* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

body {
  
  background: linear-gradient(#f0f5ef,#d4d8d4);
 
  font-family: "Karla", sans-serif;
  
}

html {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

h1 {
  font-family: "Karla", "Sans-serif";
  font-size: 33pt;
  font-weight: 700;
  
}

h3 {
text-shadow: black;
font-family: "Karla", "Sans-serif";
font-size: 20pt;
text-shadow: black;
padding: 20px;


}

.logo {
  
  margin: 20px 40px;
  max-width: 80px;
}
.logo:hover {
  scale: 1.04;
  transition: 0.15s;
}

#responsiveMenuButton {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  display: none;
  position: absolute;
  top: 10px;
  right: 0;
  
}

#responsiveMenuButton svg {
  height: 1.5rem;
  width: 1.5rem;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  color: #002d22;
}

#responsiveMenuButton .open-icon {
  display: block;
}

#responsiveMenuButton .close-icon {
  display: none;
}

#responsiveMenuButton.open .open-icon {
  display: none;
}

#responsiveMenuButton.open .close-icon {
  display: block;
}

a {
  text-decoration: none;
  font-weight: bold;
  color: #002d22;
  font-size: 1rem;
  
}

a:hover {
  
  text-decoration: underline;
  scale: 1.04;
  transition: 0.15s;
  
  
}





.navbar {
  position: fixed;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  z-index: 1000;
  background-color:#d4d8d4;
  border: 0;
}

.navbar-links ul {
  margin: 0;
  padding-right: 1rem;
  display: flex;
  gap: 1rem;
  list-style-type: none;

}




.navbar.show {
  opacity: 1;
  visibility: visible;
}









p {
  
  font-size: 12pt;
  font-family: "Karla", sans-serif;
  
  
}

hr {
  max-width: 20px;
  

}





@keyframes fade-in {
 
  to {scale: 1; opacity: 1;}
}




.intro-section {
  min-height: 100vh;
  text-align: center;
  background-image: linear-gradient(rgba(255, 255, 255, 0.438), #002d22d8 ), url("IMG_3968.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 175%;
  color: #eee;

  h3, img, .btn {
  scale: .9; opacity: 0;
  animation: fade-in linear .75s forwards;
  }


}




.about-section {
  overflow: hidden;
  height: 100vh;
  text-align: left;
  background: linear-gradient(#002d22,#001d16);

  .introPicSmall {
    display: none;
  }

}

.col-lg-12 {
  display: flex;          /* Enables Flexbox layout */
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically (optional) */
  min-height: 100vh;       /* Ensures body fills the full viewport height */
  padding: 0;  
  color: white;
  width: 100%;
  
  hr {
    max-width: 20px;
    margin: 40px 0px;
  
  }
}



.introText {
  max-width: 500px;
}




.col-lg-13 {
  display: flex;          /* Enables Flexbox layout */
  flex-direction: column;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically (optional) */
  min-height: 100vh;       /* Ensures body fills the full viewport height */
  margin: 0;  
  color: white;
}

.col-lg-124 {
  width: 100%;
  display: flex;          /* Enables Flexbox layout */
  text-align: left;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically (optional) */
  min-height: 100vh;       /* Ensures body fills the full viewport height */
    
  hr {
    max-width: 20px;
    margin: 30px 0px;
    color: black;
    border: 1px solid black;
  

    padding: 0 ;
   
  }


  .veggies {
    position: relative;
    overflow: hidden;
    max-height: 65vh;
    max-width: 400px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

     
    
   
    
  }
 
  .overlay {
    position: absolute;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    color: #f1f1f1;
    width: 100%;
    height: 100%;
    align-content: center;
    text-align: center;
    display: grid;
    
    a {
      color: white;
      font-size: 15pt;
     
    }

    h3 {
      font-size: 3.5rem;
      
    }



    
  }

  .signupBtn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 60%;
    
    justify-self: center;
    
    
  }
}



.csa-text {
  max-width: 500px;
  
}

.services-section {
  min-height: 100vh;
  text-align: center;
  background: #fff;
  
 
}
.contact-section {

  overflow: hidden;
  background: linear-gradient(#f0f5ef,#d4d8d4);
  text-align: center;

  
  h1 {
    
    margin-top: 0;
    margin-bottom: 16px;
    color: #002d22;
    
    
  }
  p {
    
    color: #002d22;
    margin-bottom: 20px;
    font-size: 18pt;
    
    
  }

  a {
    text-decoration: none;
    font-size: 32pt;
    color: #002d22;
    
    font-family: "Karla";
  
}



.contactDiv {
  
  max-width: 450px;
  text-align: center;
  hr {
    max-width: 20px;
    margin: 40px 0px;
    color: #002d22;
    border: 1px solid #002d22;
  

    padding: 0 ;
   
  }
}

}

form {
  
  max-width: 450px;
  min-width: 300px;
  margin: 1.5em auto;
  padding: 0;
  
}

input[type="email"], textarea {
  width: 100%;
  padding: 20px;
  margin-top: 20px;
  border: none;
  border-radius: 10px;
  background-color: #002d228a;
  
}

input[type="email"], textarea:focus {
 outline-color: rgba(128, 128, 128, 0.363);
 outline-width: .60em;
 outline-offset: .25em;
 
}

input[type="submit"] {
  
  font-family: "Source Sans 3", sans-serif;
  font-weight: 500;
  font-size: 15pt;
  width: 100%;
  padding: 20px;
  margin-top: 20px;
  border: none;
  border-radius: 10px;
  background-color: #002d22;
  color: #d4d8d4;
  border: 2px solid #002d22;
}

input[type="submit"]:hover {
  border: 2px solid #002d22;
  background-color: transparent;
  color: #002d22;
}

::placeholder {
  font-family: "Source Sans 3", sans-serif;
  color: #d4d8d4;
  opacity: .6; 
  font-size: 15pt;
}


textarea {
  height: 130px;
}

.left-foot > p {
  font-size: 10pt;
}




.btn {
  
  font-family: "Source Sans 3", sans-serif;
  font-weight: 500;
  font-size: 15pt;
  
  padding: 20px;
  
  border: none;
  border-radius: 10px;
  background-color: #002d22;
  color: #d4d8d4;
  border: 2px solid #002d22;
}

.btn:hover {
  border: 2px solid #002d22;
  background-color: transparent;
  color: #002d22;
}



/* Styles for the footer */
footer {

  width: 100%; /* Ensures the footer takes full width within the section */
  min-height: 40vh;
  padding: 40px 30px; /* Adds vertical padding */
  background-color: #002d22;
  display: flex; /* Use Flexbox on the footer */
  justify-content: center; /* Center the content horizontally */
  align-items: center;
  text-decoration: none;
  
}


.left-foot > hr {
  margin: auto;
}

.left-foot > p {
  margin-bottom: 20px;
  line-height: 20px;
}

.left-foot > .akgn {
  margin-top: 30px;
  font-size: 12pt;
}
.footer-content {
  
  color: white;
  align-items: center;
  text-align: center;
  display: flex;
  justify-content: space-between;
  font-size: 20pt;
  text-decoration: none;
}

.footer-content img {
  max-width: 150px; /* Restricts the image size */
  margin-bottom: 5px; /* Adds some space below the image */
}

.footer-content > p {
  text-decoration: none;
  font-size: 45pt;
  color: white;
  
}

#footer-link {
  display: none;
}

.akgn {
  max-width: 700px;
}





@media (max-width: 930px) {

  .logo {
  
    margin: 20px 20px;
    
  }
  #responsiveMenuButton {
    display: block;
  }
  .navbar-links {
    display: none;
  }

  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .navbar-links.open {
    display: block;
    
  }

  .navbar-links ul {
    width: 100%;
    flex-direction: column;
    padding: 1rem;
    
  
  } 



  h3 {
    font-size: 1.15rem;
    
  }

  p {
    font-size: 10pt;
    
  }

  .intro-section { 

  height: 100%;
  width: 100%;
  img {
    max-width: 360px;
  }

  }


 
  .introPic {
    display: none;
  }

  .col-lg-12 {
    flex-direction: column;
    justify-content: space-evenly;
    hr {
      
      margin: 30px 0px;
    
    }

    
    
  }

  .col-lg-13 {
    padding: 20px;
    
    
  }
  .gap {
    display: none;
  }

.left-foot > hr {
  margin: auto;
  
}
.introPicSmall {
  max-width: 80vw;
  overflow: hidden;
}

  .col-lg-124 {
    flex-direction: column;
    justify-content: space-evenly;

    .overlay {
      justify-content: space-evenly;
      
    }

    img {
      transform: rotate(90deg)
    }
    .veggies {
     max-height: 30vh;
     max-width: 80vw;
      
      
    }

   .overlay {
    height: 30vh;
    display: grid;
    
   }

    .overlay h3 {
      
      font-size: 2.8rem;
      
    padding-bottom: 20px;
      
      
    }

    .signupBtn {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      width: 100%;
      align-items: center;
      height: auto;
      padding-bottom: 30px;

      
      
     
      
    }
    
    
  }

  .about-section {
    .introPicSmall {
      display: block;
    }
  }

  .contact-section {
    a, hr {
      display: none;
    }

    p {
      font-size: 12pt;
      
    }
    .col-lg-12 {
      justify-content: center;
      
    }

    form {
      max-width: 400px;
      margin: 0;
    }

    .contactDiv {
      text-align: center;
    }
    

  }

  .footer-content {
    a {
      color: white;
      font-size: 2rem;
      margin: 0;
      
    }
    text-align: center;
    
  .akgn {
    margin-top: 10px;
  }

  #footer-link {
    display: block;
  }
    
  }

  a {
    padding-top: 30px;
    cursor: pointer;
  }

}
 













    




  
@media (max-width: 520px) {



  .navbar-container .ul #links {
    display: none;
  }

  
  .container {
    max-width: 80vw;
    justify-self: center;
    
  }

  .intro-section {
    min-height: 100vh;
    text-align: center;
    background-image: linear-gradient(rgba(255, 255, 255, 0.438), #002d22d8 ), url("backSML.jpeg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120%;
    color: #eee;
  
  .col-lg-13 {
    padding: 10%;
  }

 
 
  .col-lg-12, .col-lg-124 {
    
    
    padding: 10%;
    
   
    
  }



  .signupBtn .btn {
    padding: 10px 5px;
   
  }
 

  .footer-content {
    padding: 16px;


  }

 
 
}