*      /* header styles */
      header {
        background-color: #9fd6b0;
        color: #fff;
        padding: 0px;
        text-align: center;
      }
      /* logo styles */
      .logo {
        max-width: 500px;
        font-weight: 1000px;
        padding: 0px;
        display: block; /* make the logo a block element */
        margin: 0 auto; /* set left and right margin to auto */
      }
      header img{
        height: 50%;
        width: 50%;
      }

      .active {
        background-color: transparent;
        padding: 0px;
        margin: auto;
      }

      /*.main-menu */

    .main-menu {
      display: flex;
      font-size: 15px;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background-color: #9fd6b0;
      border: none;
      border-radius: 10px;
      padding: 20px 20px;
      margin-right: 70px;
      margin-left: 70px;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
      transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

    .main-menu ul {
      list-style: none;
      margin: 0;
      padding: 0;
      max-height: 500px;
    }
  
    .main-menu li {
      display: inline-flex;
      margin-right: 10px;
    }
    .main-menu li:hover > ul{
      display: block;
    }

    .main-menu a:hover {
      background-color: #6dc3c7;
      color: #000000;
    }

/* Hide the original menu */
.main-menu {
  display: none;
}

/* Style the menu toggle button */
.main-menu-toggle {
  position: fixed;
  top: 10px;
  left: 20px;
  z-index: 100; /*z-index property ensures that the menu toggle remains above other elements*/
  display: block;
  cursor: pointer;
  padding: 10px;
}

/* Style the menu toggle button bars */
.bar {
  display: block;
  width: 40px;
  height: 5px;
  background: #fffdfd;
  margin: 5px 0;
  transition: all 0.5s ease-in-out;
}

/* Style the menu toggle button bars when the toggle button is focused */
.main-menu-toggle:focus .bar {
  background-color: #ffffff;
}

/* Style the menu toggle button bars when the toggle button is toggled */
.main-menu-toggle.active .bar:first-of-type {
  transform: translateY(11px) rotate(45deg);
}

.main-menu-toggle.active .bar:nth-of-type(2) {
  opacity: 0;
}

.main-menu-toggle.active .bar:last-of-type {
  transform: translateY(-11px) rotate(-45deg);
}
 

/* Style the menu items */
.main-menu-container:focus-within .main-menu {
  display: block;
}
.main-menu-container li {
  margin-right: 5px;
  display: inline-block;
}
.main-menu-container a {
  padding: 3px 6px;
  color: #fff;
  background-color: #9fd6b0;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

/* Style the menu items when hovered over */
.main-menu-container a:hover {
  color: #000;
  background-color: #9fd6b0;
}
.main-menu-container.active {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
}

/* Style the menu toggle button bars */
.bar {
  display: block;
  width: 40px;
  height: 5px;
  background: #fff;
  margin: 5px 0;
}

/*menu toggle*/
.main-menu-toggle {
  display: block;
}

/* Show the menu when the toggle button is clicked */
.main-menu-toggle:focus + .main-menu {
  display: block;
}

/*automatic slideshow*/
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 700px;
  position: relative;
  margin: auto;
}

/* Slideshow fade animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .2} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .2} 
  to {opacity: 1}
}


/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}



/* The dots/bullets/indicators */
.dot {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}


/*body*/
body {
  background-color: #9fd6b0;
  font-family: Arial, sans-serif;
  color: #333;
}

/*buttons*/
    .buttons {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .Facebook-button,
    .Instagram-button {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      border: none;
      border-radius: 4px;
      padding: 8px 16px;
      margin-right: 16px;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
      transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

    .Facebook-button:hover,
    .Instagram-button:hover {
      background-color: #6dc3c7;
      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
      cursor: pointer;
    }

    .Facebook-button:active,
    .Instagram-button:active {
      opacity: 0.7;
      box-shadow: none;
    }

    .Facebook-button i,
    .Instagram-button i {
      margin-right: 8px;
    }

    .Facebook-button span,
    .Instagram-button span {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      text-align: center;
      text-transform: uppercase;
    }

/*description-container-intro*/
.description-container-intro {
  max-width: 800px;
  margin: 50px auto;
  width: 80%;
  text-align: center;

}
/*description-Intro*/
.description-intro {
  font-size: 18px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 20px;
  text-align: left;
}

/* Container */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 50px auto;
  max-width: 1000px;
  }

  /* Description */
  .description-container {
  width: 50%;
  text-align: center;
  padding: 40px;
  border-radius: 10px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  }
  .container .description-container img {
    width: 100%;
    height: auto;
  }

  .intro-header {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: left;
    font-family: 'Franklin Gothic Medium';
    
  }
  
  .dropdown-header {
  font-size: 15px;
  margin-bottom: 20px;
  font-weight: bold;
  text-align: left;
  }
  
  .description {
  font-family: 'Times New Roman', Times, serif;
  font-size: 18px;
  color: #333;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 20px;
  }
  
  
  /* Dropdown */
  .dropdown-content {
  display: none;
  }
  
  .dropdown-content p {
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  }
  

/*Signature class*/
.Signature {
  font-size: 16px;
  font-weight: bold;
  color: #666;
  text-align: right;
}


.hidden {
  display: none;
}

.description-dropdown-toggle {
  color: rgb(0, 0, 0);
  font-size: 15px;
  font-family: 'Times New Roman', Times, serif;
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}


/*footer*/
footer {
  background-color: #ffffff;
  padding: 20px 0;
  font-size: 14px;
  color: #666;
}

.footer-wrapper {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.footer-links {
  margin: 0;
}

.footer-link {
  color: #666;
  text-decoration: none;
  margin: 0 10px;
}

.footer-link:hover {
  text-decoration: underline;
}

.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-social a {
  display: inline-block;
  margin: 0 10px;
  color: #666;
}

.footer-social a:hover {
  color: #000;
}

.footer-text {
  text-align: right;
  margin: 0;
}

/* Font Awesome icons */
.fab {
  font-size: 20px;
}
.fa-facebook-f:before {
  content: "\f09a";
}
.fa-instagram:before {
  content: "\f16d";
}

/* Media Queries for Mobile Devices */

@media only screen and (max-width: 767px) {
  /* Header styles */
  header {
  padding: 0;
  }
  
  .logo {
    max-width: 80%;
    height: auto;
    font-weight: 800;
    padding: 0;
    display: block; /* add this to remove any default whitespace */
    margin: 0 auto; /* add this to center the image */
  }
  
  header img {
  height: 30%;
  width: 30%;
  padding: 100%;
  }
  
  /* Style the menu toggle button bars */
  .bar {
  display: block;
  width: 10px;
  height: 5px;
  background: #fffdfd;
  margin: 5px 0;
  transition: all 0.2s ease-in-out;
  }
  
  /* Menu container */
  .main-menu-container {
  font-size: 10px;
  }
  
  .main-menu-container li {
  margin-right: 5px;
  }
  
  .main-menu-container a {
  padding: 3px 6px;
  }
  
  /* Menu toggle */
  .main-menu-toggle {
  display: block;
  }
  
  /* Hide the menu */
  .main-menu {
  display: none;
  }
  
  /* Show the menu when the toggle button is clicked */
  .main-menu-toggle:focus + .main-menu {
  display: block;
  }
  
  /* Automatic slideshow */
  .slideshow-container {
  max-width: 400px;
  }
  
  .text {
  font-size: 12px;
  padding: 4px 8px;
  }
  
  .numbertext {
  font-size: 0;
  padding: 4px 8px;
  }
  
  .dot {
  height: 5px;
  width: 5px;
  margin: 0 2px;
  }
  
  /* Main Description + Container */
  .description-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 100%;
  margin: 20px 0;
  padding: 10px;
  float: none;
  width: 100%;
  margin-bottom: 20px;
  }

  .intro-header {
    font-size: 26px;
    margin-bottom: 20px;
    font-weight: bold;
  }

  .description-intro {
    font-size: 12px;
  }
  
  .description-dropdown-toggle {
  color: #000;
  text-decoration: underline;
  cursor: pointer;
  }
  /*footer*/
footer {
  background-color: #ffffff;
  padding: 20px 0;
  font-size: 14px;
  color: #666;
}

.footer-wrapper {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.footer-links {
  margin: 0;
}

.footer-link {
  color: #666;
  text-decoration: none;
  margin: 0 10px;
}

.footer-link:hover {
  text-decoration: underline;
}

.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-social a {
  display: inline-block;
  margin: 0 10px;
  color: #666;
}

.footer-social a:hover {
  color: #000;
}

.footer-text {
  text-align: right;
  margin: 0;
}

/* Font Awesome icons */
.fab {
  font-size: 18px;
}
.fa-facebook-f:before {
  content: "\f09a";
}
.fa-instagram:before {
  content: "\f16d";
}
  }