/*-----------------------------------*\
  #General
\*-----------------------------------*/
:root {

    /**
     * colors
     */

     --white: hsla(0, 0%, 100%, 1);
     --white_a8: hsla(0, 0%, 100%, 0.08);
     --white_a12: hsla(0, 0%, 100%, 0.12);
     --cultured: hsla(220, 20%, 97%, 1);
     --snow: hsla(345, 57%, 97%, 1);
     --manatee: hsla(219, 10%, 62%, 1);
     --black-coral: hsla(220, 12%, 43%, 1);
     --cadet-blue-crayola_a20: hsla(222, 23%, 71%, 0.2);
     --cinnamon-satin: hsla(344, 53%, 62%, 1);
     --raisin-black: hsla(216, 14%, 14%, 1);
     --raisin-black_a6: hsla(216, 14%, 14%, 0.06);
     --gunmetal: hsla(214, 15%, 21%, 1);
     --charcoal: hsla(219, 22%, 26%, 1);
  
     --ff-manrope: 'Manrope', sans-serif;

     --fs-1: calc(2.7rem + 1.38vw);
     --fs-2: calc(2.6rem + .66vw);
     --fs-3: calc(2.6rem + .24vw);
     --fs-4: 1.9rem;
     --fs-5: 1.8rem;
     --fs-6: 1.7rem;
     --fs-7: 1.5rem;
     --fs-8: 1.4rem;
     
     --fw-700: 700;

     /**
   * spacing
   */

}  

body {
    font-family: 'Manrope', sans-serif;
    margin: 0;
    padding: 0;
    background-color: white; /* Background color similar to the image */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }


  body.nav-active { overflow: hidden; }

  ::-webkit-scrollbar { width: 10px; }
  
  ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }
  
  ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
  
  ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }

a {
    color: inherit;
    text-decoration: none;
  }
  
  img { height: auto;}
  
  input,
  button,
  textarea {
    background: none;
    border: none;
    font-family: var(--ff-manrope);
  
  }
  

p {
    font-family: var(--ff-manrope);
    font-size: 14px;
    text-align: center;
    /* Adjust the font size as needed */
}

.container { padding-inline: 16px; }

/*-----------------------------------*\
  #Navbar
\*-----------------------------------*/
* {box-sizing: border-box;}
.header {
  overflow: hidden;
  border-radius: 10px;
  text-align:center;
  font-family: var(--ff-manrope);
}

.header h1 {
overflow: hidden;
  text-align:center;
}

.header h1 {
    display: inline-flex;
  color: gray;
  text-align: left;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}
.header a {
  display: inline-block;
  color: gray;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
  cursor: pointer;
}
.header a::before {
  content:'';
  width:0%;
  height:3px;
  display:block;
  background-color: gray;
  margin-top:10px;
}
.header a:hover::before {
  width:100%;
  transition:all .5s;
}

.notice-banner {
  background-color: #ffd700; /* Background color for the notice banner */
  color: rgb(43, 42, 42); /* Text color for the notice banner */
  text-align: center;
  padding: 10px;
  font-family: 'Manrope', sans-serif;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px; /* Add some padding to the container */
  flex: 1; /* Take remaining vertical space */
}

.container1 {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px; /* Add some padding to the container */
  flex: 1; /* Take remaining vertical space */
  margin-bottom: 40px;
}

.header {
  font-weight: bold;
  padding: 10px;
  text-align: center;
}

.header h1 {
  color: gray;
  margin-bottom: 0; /* Remove margin-bottom for h1 */
}

.image-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  background-color: rgba(216, 216, 216, 0.357); /* Background color */
  padding: 20px; /* Add padding to the image section */
  border-radius: 15px; /* Add border-radius to the image section */
  overflow: hidden; /* Hide overflowing content */
}

.image-section img {
  width: 40%; /* Make the image fill the container */
  border-radius: 15px;
  margin-left: 10px; /* Adjust margin as needed */
}

.text-section {
  width: 55%;
  box-sizing: border-box; /* Include padding and border in the width calculation */
  padding: 20px; /* Add padding to the text section */
}

.text-section h2 {
  color: rgb(43, 42, 42);
  font-size: 24px;
  text-align: center;
}

.text-section p {
  text-align: center;
  color: gray;
  margin-bottom: 20px;
}

/*------*/
.image-section1 {
  text-align: center;
  margin-top: 20px;
  background-color: rgba(216, 216, 216, 0.357); /* Background color */
  padding: 20px; /* Add padding to the image section */
  border-radius: 15px; /* Add border-radius to the image section */
  overflow: hidden; /* Hide overflowing content */
}

.image-section1 img {
  display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.text-section1 {
  display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.text-section1 h2 {
  color: rgb(43, 42, 42);
  font-size: 24px;
  text-align: center;
}

.text-section1 p {
  text-align: center;
  color: gray;
  margin-bottom: 20px;
}

.button {
  font-family: 'Manrope', sans-serif;
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #e0e0e0;
  border: none;
  border-radius: 5px;
  color: rgb(43, 42, 42);
  font-size: 16px;
  cursor: default;
}

.additional-div-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.additional-div {
  width: 48%; /* Adjust the width to leave some space between divs */
  background-color: rgba(216, 216, 216, 0.357); /* Background color for the additional divs */
  padding: 30px; /* Adjust the padding */
  border-radius: 15px; /* Adjust the border-radius */
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
}

.additional-div h2 {
  color: gray; /* Text color for the heading inside the additional divs */
  font-size: 24px; /* Adjust the font size */
  text-align: center;
}

.footer {
  background-color: white;
  color: gray;
  padding: 20px;
  text-align: center;
  border-top: 1px solid rgba(128, 128, 128, 0.1); /* Semi-transparent white border at the top */
}

@media only screen and (max-width: 600px) {
  .header h1 {
    margin-bottom: 10px; /* Add margin-bottom for h1 in mobile view */
  }

  .navbar {
    display: none; /* Hide navbar items in mobile view */
  }

  .menu-icon {
    display: flex; /* Display hamburger menu icon in mobile view */
  }

  .image-section {
    flex-direction: column; /* Adjust layout for image-section in mobile view */
  }

  .image-section img {
    width: 100%; /* Adjust image width for smaller screens */
    margin-left: 0; /* Reset margin for smaller screens */
    margin-top: 10px; /* Adjust margin as needed */
  }

  .text-section {
    width: 100%;
    padding: 10px; /* Adjust text-section padding for smaller screens */
  }
}


/*-----------------------------------*\
  #Footer
\*-----------------------------------*/
/* Style the footer */
footer {
  padding-block: 40px;
  text-align: center; /* Center the content within the footer */
}

/* Style the flags */
.flag {
  width: 50px;
  /* Adjust the width of the flags as needed */
  margin-right: 5px;
  display: inline-block; /* Ensure the image is displayed as a block element */
}

/* Style the text within the footer */
.acknowledgement p {
  font-family: inherit;
  font-size: 14px;
  text-align: center;
  /* Adjust the font size as needed */
}

.acknowledgement {
  text-align: center;
}

/* Style the copyright text */
.copyright {
  margin-block-end: 12px;
}