/* Revision History 
   created 2025.03.24
*/

/* notes:

*/
:root {
  --primary-color: rgb(51, 102, 255); /* Define a reusable color */
  --secondary-color: rgb(204, 0, 0);
  --header-flag-text-color1: rgb(51,102,255);
  --header-flag-text-color2: rgb(204, 0, 0); /* Correct */

  --menu-link-color: rgb(51, 102, 255); /* Default color for menu links */
  --menu-link-hover-color: rgb(0, 36, 0); /* Hover color */
  --menu-link-active-color: rgb(255, 0, 0); /* Active state color */
  --menu-link-visited-color: rgb(204, 0, 0); /* Visited link color */
  --menu-link-text-decoration: underline;
  --menu-background: #ffffff;

  /* content area */
  --left-width: 20%;  
  --middle-width: 65%;
  --right-width: 15%; 
  --column-margin: 10px; 
  --left-bg-color: #00FFFF;
  --middle-bg-color: rgb(255,255,255);
  --right-bg-color: #00ffff;
  --text-highlight: rgb(204,0,0);
  --middle-list-color: rgb(0,60,0);
  --caption-collor: #333;
}


   a:link    { color: Blue; background-color:Transparent  }  /* unvisited link */
   a:visited { color: Red; text-decoration: underline; background-color:Transparent}    /* visited links  */
   a:active  { color: Lime; outline: thick solid blue;background-color:Transparent}             /* active links   */
   a:hover   { color: black; background-color: Transparent ;}


body, html {
  margin: 0;  /* Remove default margin */
  padding: 0; /* Remove default padding */
  height: 100%; /* Ensure full height for the body */
}

body, html {
  margin: 0;  /* Remove default margin */
  padding: 0; /* Remove default padding */
  height: 100%; /* Ensure full height for the body */
  width: 100%; /* Ensure full width for the body */
}

.text-highlight {
  color: var(--text-highlight);
  font-weight: bold;
}
.letter {
  font-size: 3em;  /* First letter is larger */
  font-weight: bold;
  color: var(--text-highlight);
}

.word {
  font-size: 1.5em;  /* Rest of the word is smaller than the first letter */
}

.first-letter {
  font-size: 2em;  /* Makes the first letter 2 times larger than the regular text */
  font-weight: bold; /* Optional, if you want the first letter to be bold */
}
h1 {
  font-size: 15pt;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
  margin: 0px;   /*outside space, set both top and bottom */
  padding: 0px;  /*inside space, set both top and bottom */
}

.container {
  display: flex; /* Enables flexbox layout */
  width: 100%; /* Full width of the container */
  height: 100vh; /* Full height of the viewport */
  justify-content: center;
  gap: var(--colum-margin);
}

.left, .middle, .right {
  height: 100vh;  /* Full viewport height */
  height: 100%; /* Ensure full height for each section */
  position: sticky;  /* Keep the section fixed while scrolling */
  top: 0;            /* Ensure the section stays at the top of the page when scrolling */
  overflow-y: scroll;
}

.left {
  width: var(--left-width); /* Left section width */
  margin-left: var(--column-margin);
  background-color: var(--left-bg-color); /* Optional background for clarity */
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: left;    /* Center content horizontally */

}
.left h1 {
  font-size: 15pt;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
  margin: 0px;   /*outside space, set both top and bottom */
  padding: 0px;  /*inside space, set both top and bottom */
}
.left h2 {
  font-size: 13pt;
  font-weight: bold;
  text-decoration: underline;
  text-align: left;
  margin: 0px;   /*outside space, set both top and bottom */
  padding: 0px 5px 0px 5px;  /*inside space, set both top and bottom */
}

.left p {
  background-color:Transparent ;
  font-size  : 12pt;
  line-height: 110%;
  text-align : left;
  margin: 0px;   /*outside space, set both top and bottom */
  padding: 0px 10px 0px 10px; /* top right bottom left */
}

.left hr {
  border-top: 2px solid black; /* Thin black border on top */
  margin: 20px 0;
}
/* The box containing the image and caption */
.left .image-caption-box {
  width: 200px;               /* Width of the box */
  border: 1px solid black;    /* Box border */
  padding: 10px;              /* Padding inside the box */
  text-align: center;         /* Center-align the contents */
  margin: 20px auto;        /* Adds space between each image-caption pair */
}

/* Image styling */
.left .image {
  width: 160px;               /* Image width */
  height: 119px;              /* Image height */
  display: block;             /* Makes the image a block element to prevent unwanted space */
  margin-left: auto;          /* Centers the image horizontally */
  margin-right: auto;         /* Centers the image horizontally */
}

/* Caption styling */
.left .caption {
  margin-top: 10px;           /* Adds space between image and caption */
  font-size: 12pt;            /* Caption font size */
  color: var(--caption-color); /* Caption color */
  text-align: center;
}



.middle {
  width: var(--middle-width); /* Middle section width */
  margin-left: var(--column-margin);
  margin-right: var(--column-margin);
  background-color: var(--middle-bg-color); /* Optional background for clarity */
}
.middle h1 {
  font-size: 25pt;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  margin: 0px;   /*outside space, set both top and bottom */
  padding: 0px 15px 0px 15px;  /*inside space, set both top and bottom */
}
.middle h2 {
  font-size: 20pt;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  margin: 0px;   /*outside space, set both top and bottom */
  padding: 0px 10px 0px 10px;  /*inside space, set both top and bottom */
}
.middle h3 {
  font-size: 16pt;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  margin: 0px;   /*outside space, set both top and bottom */
  padding: 0px 5px 0px 5px;  /*inside space, set both top and bottom */
}
.middle h4 {
  font-size: 16pt;
  font-weight: bold;
  text-decoration: underline;
  text-align: left;
  margin: 0px;   /*outside space, set both top and bottom */
  padding: 0px 5px 0px 5px;  /*inside space, set both top and bottom */
}

.middle p {
  background-color:Transparent ;
  font-size  : 12pt;
  line-height: 170%;
  text-align : left;
  margin: 0px;   /*outside space, set both top and bottom */
  padding: 0px 5px 0px 5px;  /*inside space, set both top and bottom */
}

.middle .indented-list {
  font-size  : 13pt;
  line-height: 150%;
  text-align : left;
  padding-left: 80px; /* Indentation for the list */
  color: var(--middle-list-color);
}

.middle .indented-list li {

}

.right hr {
  border-top: 2px solid black; /* Thin black border on top */
  margin: 20px 0;
}

/* Right section styling */
.right {
  width: var(--right-width); /* Right section width */
  margin-right: var(--column-margin);
  background-color: var(--right-bg-color); /* Optional background for clarity */
  display: flex;               /* Enables Flexbox in the right section */
  flex-direction: column;      /* Stacks items vertically */
  align-items: center;         /* Centers items horizontally */
  height: 100vh;               /* Full height of the viewport */
  padding-top: 20px;           /* Optional: adds space at the top of the right section */
}
/* The box containing the image and caption */
.right .image-caption-box {
  width: 200px;               /* Width of the box */
  border: 1px solid black;    /* Box border */
  padding: 10px;              /* Padding inside the box */
  text-align: center;         /* Center-align the contents */
  margin-bottom: 20px;        /* Adds space between each image-caption pair */
}

/* The box containing the image and caption */
.right .image-caption-box {
  width: 200px;               /* Width of the box */
  border: 1px solid black;    /* Box border */
  padding: 10px;              /* Padding inside the box */
  text-align: center;         /* Center-align the contents */
  margin-bottom: 20px;        /* Adds space between each image-caption pair */
}

/* Image styling */
.right .image {
  width: 160px;               /* Image width */
  height: 119px;              /* Image height */
  display: block;             /* Makes the image a block element to prevent unwanted space */
  margin-left: auto;          /* Centers the image horizontally */
  margin-right: auto;         /* Centers the image horizontally */
}

/* Caption styling */
.right .caption {
  margin-top: 10px;           /* Adds space between image and caption */
  font-size: 12pt;            /* Caption font size */
  color: var(--caption-color);                /* Caption color */
}


/* Media Query for small devices (phones) */
@media (max-width: 600px) {
  :root {
    --left-width: 100%;  /* Full width on smaller devices */
    --middle-width: 100%; /* Full width on smaller devices */
    --right-width: 100%;  /* Full width on smaller devices */
  }

  .container {
    flex-direction: column;  /* Stack sections vertically on smaller screens */
  }

  .left, .middle, .right {
    width: 100%;  /* Ensure each section takes full width */
  }
}

/* Media Query for medium devices (tablets) */
@media (min-width: 601px) and (max-width: 1024px) {
  :root {
    --left-width: 20%;  /* Adjust to fit the tablet screen */
    --middle-width: 65%; /* Adjust to fit the tablet screen */
    --right-width: 15%;  /* Adjust to fit the tablet screen */
  }
}

/* Media Query for larger devices (desktops) */
@media (min-width: 1025px) {
  :root {
    --left-width: 20%;  
    --middle-width: 65%; 
    --right-width: 15%; 
  }
}


/* -----------------------------------------*/
/* header */
.flag-section {
  width: 25%;
  text-align: center;
}

.flag {
  width: 112px;
  height: 76px;
}

.flag-text1 {
  color: var(--header-flag-text-color1);
  font-weight: bold;
}

.flag-text2 {
  color: var(--header-flag-text-color2);
}

.logo {
  text-align: center;
}

.logo img {
  width: 415px;
  height: 144px;
}

.address {
  width: 25%;
  vertical-align: top;
  text-align: center;
}
/* ---------------------------------*/
div.menu {
  line-height: 100%;
  font-size  : 14pt;
  color      : blue;
  text-align : center;
  background : var(--menu-background);
  margin: 0px 10px 0px 10px;
}

/* Menu Link Styles */
.menu a {
  color: var(--menu-link-color);
  text-decoration: none; /* Default state: No underlining */
}

.menu a:visited {
  color: var(--menu-link-visited-color); /* Color for visited links */
}

.menu a:hover {
  color: var(--menu-link-hover-color); /* Hover color */
  text-decoration: var(--menu-link-text-decoration); /* Text decoration on hover */
}

.menu a:active {
  color: var(--menu-link-active-color); /* Active link color */
  text-decoration: var(--menu-link-text-decoration); /* Text decoration on active */
}
/* ----------------------------*/
.product {
  background-color:Transparent ;
  font-size     : 12pt ; 
  color         : black ;
  text-align    : left ;
  line-height   : 120% ;
  font-style    : italic;
}