* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
 
 
  body {
   background-color: #d8f7c2;
   color: #2e3e1f;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   margin: 0;
   height: 0;
   padding: 0;
  }
 
 
  h1, h2, h3 {
   font-weight: 600;
  }
 
 
  a {
   text-decoration: none;
  }
 
  .site-logo {
  height: 60px;
  width: auto;
  position: absolute;
  left: 20px;
  top: 10px;
  z-index: 10;
}
 
 
  header {
   background-color: #b2d98c;
   text-align: center;
   padding: 1rem 0;
  }
 
 
  header h1 {
   margin-bottom: 0.5rem;
   color: #1f3a1f;
   text-align: center;
  }
 
 
  header,
  nav {
   margin: 0;
   padding: 0;


  }
 
 
  .hamburger {
  display: none;
  cursor: pointer;
  width: 35px;
  height: auto;
  padding: 10px;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1000;
}

.hamburger span {
  display: block;
  height: 4px;
  margin: 6px 0;
  background-color: #1f3a1f;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
  nav ul {
   list-style: none;
   background-color: #90bc6a;
   display: flex;
   justify-content: center;
   padding: 0.5rem 0;
   flex-wrap: wrap;
  }
 
 
  nav ul li {
   margin: 0.5rem 1rem;
  }
 
 
  nav ul li a {
   color: white;
   font-weight: bold;
   transition: color 0.3s ease;
  }
 
 
  nav ul li a:hover {
   color: #ffdb6b;
  }
 
  
 
 /* HERO container */
#hero {
  position: relative;
  background-color: #548d3e; /* fallback color */
  color: white;
  text-align: center;
}

/* Carousel container */
#hero .carousel {
  position: relative;
  max-width: 100%;
  height: 90vh;
  overflow: hidden;
}

/* Slides inside carousel */
#hero .slides {
  display: flex;
  width: 700%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

#hero .slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Centered overlay text & button */
.hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 3; /* higher than arrows and overlay tint */
}

.hero-overlay h2 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  color: white;
}

.hero-overlay p {
  font-style: italic;
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.hero-overlay button {
  background-color: #ffdb6b;
  border: none;
  padding: 0.8rem 1.8rem;
  border-radius: 2rem;
  font-weight: bold;
  color: #1f3a1f;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.hero-overlay button:hover {
  background-color: #ffd04a;
  color: #1f3a1f;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Prev / Next buttons */
#hero .prev,
#hero .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.3); /* slightly lighter background */
  color: white;
  border: none;
  padding: 1rem;
  font-size: 2rem;
  cursor: pointer;
  border-radius: 50%;
  z-index: 4; /* ensures they appear above overlay and tint */
  transition: background-color 0.3s ease;
}

#hero .prev:hover,
#hero .next:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

#hero .prev {
  left: 20px;
}

#hero .next {
  right: 20px;
}

/* Slightly lighter overlay tint */
#hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15); /* lighter tint for better image visibility */
  z-index: 2;
}

  #columns {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   background-color: #cde5b0;
   padding: 2rem 1rem;
   text-align: center;
  }
 
 
  #columns .column {
   background-color: #d8f7c2;
   flex: 1 1 250px;
   margin: 0.5rem;
   padding: 1rem;
   border-radius: 8px;
   box-shadow: 0 2px 5px rgba(0,0,0,0.1);
   transition: transform 0.3s ease;
  }
 
 
  #columns .column:hover {
   transform: translateY(-5px);
  }
 
 
  #columns h3 {
   color: #1f3a1f;
   margin-bottom: 0.5rem;
  }
 
 
  #columns p {
   color: #2e3e1f;
  }
 
 
 
 
  section {
   padding: 2rem 1rem;
   text-align: center;
  }
 
 
  section h2 {
   margin-bottom: 1rem;
   color: #1f3a1f;
  }
 
 
  section article {
   max-width: 800px;
   margin: 0 auto;
  }
 
 
  figure {
   display: inline-block;
   margin: 1rem;
  }
 
 
  figure img {
   width: 100%;
   max-width: 400px;
   height: auto;
   border-radius: 5px;
  }
 
 
  figcaption {
   font-size: 0.9rem;
   margin-top: 0.3rem;
   color: #2e3e1f;
  }
 
 
 
 
  #gallery article {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1rem;
   justify-items: center;
   padding: 1rem;
  }
 
 
  #gallery figure {
   margin: 0;
   background-color: #cde5b0;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 2px 6px rgba(0,0,0,0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
 
 
  #gallery figure:hover {
   transform: scale(1.03);
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
 
 
  #gallery img {
   width: 100%;
   height: auto;
   display: block;
  }
 
 
  #gallery figcaption {
   padding: 0.5rem;
   font-size: 0.9rem;
   color: #2e3e1f;
   background-color: #e7f5d8;
   text-align: center;
  }
 
 
 
  #services {
 background-color: #cde5b0;
 padding: 3rem 1rem 4rem;
 text-align: center;
}


#services h2 {
 font-size: 2.4rem;
 color: #1f3a1f;
 margin-bottom: 2.5rem;
}


.services-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
 gap: 2.2rem;
 max-width: 1100px;
 margin: 0 auto;
 align-items: stretch;
}


.service-card {
 background-color: #d8f7c2;
 border-radius: 16px;
 padding: 2.5rem 1.5rem;
 box-shadow: 0 6px 15px rgba(0,0,0,0.12);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
 height: 100%;
}


.service-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}


.service-card img {
 width: 120px;
 height: 120px;
 object-fit: contain;
 margin-bottom: 1.2rem;
}


.service-card h3 {
 color: #2e3e1f;
 margin-bottom: 0.8rem;
 font-size: 1.5rem;
}


.service-card p {
 color: #334d26;
 font-size: 1rem;
 line-height: 1.6;
 max-width: 95%;
}


  #contact aside {
   margin-top: 1rem;
  }
 
 
  form {
   margin-top: 1.5rem;
   display: inline-block;
   text-align: left;
   background-color: #cde5b0;
   padding: 1.5rem;
   border-radius: 8px;
  }
 
 
  form label {
   font-weight: bold;
  }
 
 
  form input,
  form textarea {
   width: 100%;
   padding: 0.5rem;
   margin-top: 0.3rem;
   margin-bottom: 1rem;
   border: 1px solid #8fa97c;
   border-radius: 4px;
  }
 
 
  form button {
   background-color: #ffdb6b;
   border: none;
   padding: 0.6rem 1.5rem;
   border-radius: 1.2rem;
   font-weight: bold;
   color: #1f3a1f;
   cursor: pointer;
   transition: background-color 0.3s ease;
  }
 
 
  form button:hover {
   background-color: #ffd04a;
  }
 
 
 
 
  footer {
   background-color: #90bc6a;
   text-align: center;
   padding: 1rem;
   color: #1f3a1f;
   position: sticky;
  }
 
 #rate-site {
  background-color: #cde5b0;
  padding: 2rem 1rem;
  text-align: center;
}

#rate-site h3 {
  color: #1f3a1f;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

#rate-site .stars span {
  font-size: 2rem;
  cursor: pointer;
  color: #ffd04a;
  padding: 0 5px;
  transition: transform 0.2s ease;
}

#rate-site .stars span:hover {
  transform: scale(1.2);
}

#rate-site .stars span.selected {
  color: #ff9900;
}

 
 
  @media only screen and (max-width: 700px) {
   .site-logo {
    height: 45px;
    left: 10px;
    top: 10px;
  }
  /* Show hamburger */
  .hamburger {
    display: block;
  }

  /* Hide desktop nav */
  nav ul {
    display: none;
    flex-direction: column;
    background-color: #90bc6a;
    width: 100%;
    padding: 1rem 0;
  }

  /* Show nav when JS adds .open */
  nav ul.open {
    display: flex;
  }

  /* Make header layout cleaner on mobile */
  header {
    position: relative;
    padding-top: 70px;
  }

  header h1 {
    margin-top: 10px;
  }
   
    nav ul {
     flex-direction: column;
   }
 
 
   #hero h2 {
     font-size: 2rem;
   }
 
 
   #columns {
     flex-direction: column;
     align-items: center;
   }
 
 
   #columns .column {
     width: 90%;
   }
 
 
   #gallery article {
     grid-template-columns: 1fr;
   }
 
   #services h2 {
   font-size: 2rem;
 }


 .service-card img {
   width: 100px;
   height: 100px;
 }


 .service-card p {
   font-size: 0.95rem;
 }
   figure img {
     width: 90%;
     height: auto;
   }
  }