@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


:root {
  --heading-font: "Poppins", sans-serif;
  --text-font: "Roboto", sans-serif;
  --text-color: white;
  --button-color: #60cd6f;
  --para-text: #4A4A4A;
  --box-shaow: 0px 0px 1px rgba(3, 7, 18, 0.15),
    0px 0px 4px rgba(3, 7, 18, 0.12),
    1px 1px 9px rgba(3, 7, 18, 0.09),
    2px 2px 15px rgba(3, 7, 18, 0.06),
    3px 3px 24px rgba(3, 7, 18, 0.03);

}

* {
  margin: 0;
  padding: 0;
  font-family: var(--text-font);
}

html,
body {

  scrollbar-width: none;

  -ms-overflow-style: none;
  /* IE and old Edge */
  /* overflow-y: scroll; */

  scroll-behavior: smooth;
  /* Smooth scrolling */

  height: auto;
}

body {
  background: #f7f7f7;
  
}



html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, new Edge */
}

body.hidden {
  overflow: hidden;
}




h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
}

.center {
  display: flex;
  justify-content: center;

}


header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;

}

/* Navbar */

nav {
  font-family: var(--heading-font);
  margin: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.nav-left {
  font-size: 1rem;
}

.nav-right {
  display: flex;
  gap: 1rem;
  font-weight: 600;
}



.hamberger {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.hamberger div {
  display: block;
  height: 3px;
  width: 1.8rem;
  background: black;
  transition: 0.3s;

}

.hamberger.active :nth-child(2) {
  opacity: 0;
}

.hamberger.active :nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamberger.active :nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}



.navitem {
  display: none;
}

/* Mobile Overlay  */

.mobile-overlay.active {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  background: rgba(0, 0, 0, 0.479);
  z-index: 750;
}

/* The slide-in panel */
.navitems-mb {
  position: fixed;
  right: -80%;
  top: 0;
  width: 70%;
  max-width: 350px;
  height: 100vh;
  background: white;
  z-index: 800;
  transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 4rem 2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}

.navitems-mb.active {
  right: 0;
}

.navitem-mb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.navitem-mb li a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.5rem;
  text-decoration: none;
  font-size: 1.25rem;
  font-family: var(--heading-font);
  font-weight: 500;
  color: #333;
  border-radius: 8px;
  transition: color 0.3s, background-color 0.3s;
}

.navitem-mb li a:hover {
  color: var(--button-color);
  background-color: #f7f7f7;
}

.navitem-mb li a i {
  font-size: 1.4rem;
  color: var(--button-color);
  width: 30px;
  text-align: center;
}

/* --- New Mobile Accordion Menu Styles --- */
.mobile-dropdown > .nav-link {
  justify-content: flex-start;
}
.mobile-arrow {
  margin-left: auto;
  transition: transform 0.3s ease;
}
.mobile-dropdown.is-open .mobile-arrow {
  transform: rotate(180deg);
}
.mobile-submenu {
  list-style: none;
  padding-left: 2.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}
.mobile-submenu li a {
  font-size: 1rem;
  font-weight: 400;
  padding: 0.8rem 0.5rem;
}

/* The new CTA Button in the menu */
.menu-cta-btn {
  display: block;
  text-align: center;
  padding: 1rem;
  background-color: var(--button-color);
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-family: var(--heading-font);

  .menu-social-links {
    margin-top: 0;
    /* Remove auto margin */
    padding-top: 2rem;
  }

  transition: transform 0.3s;
}

.menu-cta-btn:hover {
  transform: scale(1.03);
}

/* The new Social Links container */
.menu-social-links {
  text-align: center;
  margin-top: auto;
  /* This is the magic that pushes it to the bottom */
  padding-top: 2rem;
  padding-bottom: 2rem;
  /* Space at the very bottom of the menu */
  border-top: 1px solid #eee;
}

.menu-social-links a {
  color: #888;
  font-size: 1.5rem;
  margin: 0 1rem;
  transition: color 0.3s;
}

.menu-social-links a:hover {
  color: var(--button-color);
}


/* Hero section  */

/* --- Hero Slider Styles --- */

.hero {
  position: relative;
  overflow: hidden;
  height: 60vh;
  z-index: 1;
}

/* The container for the slider visuals */
.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* The wrapper that will move left and right */
.slider-wrapper {
  display: flex;
  width: 500%;
  height: 100%;
  transition: transform 0.7s ease-in-out;

}

/* Each individual slide */
.slide {
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}




.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 34;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  font-size: clamp(1.5rem, 1.125rem + 2vw, 3rem);
  opacity: 0.1;
}

#prevBtn {
  left: 15px;
}

#nextBtn {
  right: 15px;
}

/* Add the dark overlay for readability */
.slider::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  /* Adjust opacity from 0 to 1 */
  z-index: 2;
}

/* --- Final Slider Buttons --- */
.slider-zone {
  position: absolute;
  top: 45%; 
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}

.slider-zone:hover {
  background: rgba(0, 0, 0, 0.6); /* Darker on hover */
}

/* This creates the arrow shape inside the button */
.slider-zone::after {
  content: '';
  display: block;
  border: solid white;
  border-width: 0 3px 3px 0;
  padding: 6px;
}

/* Position the left button */
.slider-zone-left {
  left: 5%;
}

/* Point the left arrow correctly */
.slider-zone-left::after {
  transform: rotate(135deg);
}

/* Position the right button */
.slider-zone-right {
  right: 5%;
}

/* Point the right arrow correctly */
.slider-zone-right::after {
  transform: rotate(-45deg);
}

/* The container for the text and button */
.hero-text {
  position: relative;
  /* Changed from absolute to relative */
  z-index: 3;
  /* Sits on top of the overlay */
  height: 100%;
  color: white;
  text-align: center;
  padding: 1rem;
  box-sizing: border-box;

  /* Use Flexbox to perfectly center the content */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 950px;
  margin: 0 auto;
}

.hero-text h1 {
  font-size: clamp(1.8rem, 8vw, 4rem);
  /* Responsive font size */
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  /* Adds depth */
}

.hero-text p {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  max-width: 600px;
  /* Prevents lines from getting too long */
  margin-top: 1rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-btn {
  display: inline-block;
  margin-top: 2rem;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  padding: clamp(0.8rem, 2.5vw, 1.1rem) clamp(1.5rem, 5vw, 2.5rem);
  background-color: var(--button-color);
  /* Your brand's green */
  color: white;
  /* Dark text for high contrast */
  text-decoration: none;
  font-weight: 600;
  font-family: var(--heading-font);
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* --- Icon-Based Services Section --- */

.services-wrapper {

  position: relative;
  z-index: 2;
  margin-top: -120px;
  /* Adjust this value to control how much it overlaps */

  clip-path: polygon(0 5%, 5% 0, 10% 5%, 15% 0, 20% 5%, 25% 0, 30% 5%, 35% 0, 40% 5%, 45% 0, 50% 5%, 55% 0, 60% 5%, 65% 0, 70% 5%, 75% 0, 80% 5%, 85% 0, 90% 5%, 95% 0, 100% 5%, 100% 100%, 0% 100%);
}


/* This container now only has to worry about arranging the cards */
.icon-services {
  display: flex;
  flex-direction: column;
  /* Or 'row' on desktop */
  gap: 0;
  max-width: 1400px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

.icon-card {
  text-align: center;
  background-color: #ffffff;
  /* White background for the cards */
  padding: 2.5rem 1.5rem;


}

.icon-card:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  clip-path: polygon(0% 0%,
      1% 2.8%,
      2% 0%,
      3% 4.2%,
      4% 0.7%,
      5% 3.5%,
      6% 0%,
      7% 4.9%,
      8% 1.4%,
      9% 2.8%,
      10% 0%,
      11% 5.6%,
      12% 0.7%,
      13% 3.5%,
      14% 0%,
      15% 4.2%,
      16% 1.4%,
      17% 6.3%,
      18% 0%,
      19% 2.8%,
      20% 0.7%,
      21% 4.9%,
      22% 0%,
      23% 3.5%,
      24% 1.4%,
      25% 5.6%,
      26% 0%,
      27% 4.2%,
      28% 0.7%,
      29% 2.8%,
      30% 0%,
      31% 6.3%,
      32% 1.4%,
      33% 3.5%,
      34% 0%,
      35% 4.9%,
      36% 0.7%,
      37% 2.1%,
      38% 0%,
      39% 5.6%,
      40% 1.4%,
      41% 4.2%,
      42% 0%,
      43% 2.8%,
      44% 0.7%,
      45% 6.3%,
      46% 0%,
      47% 3.5%,
      48% 1.4%,
      49% 4.9%,
      50% 0%,
      51% 5.6%,
      52% 0.7%,
      53% 2.8%,
      54% 0%,
      55% 4.2%,
      56% 1.4%,
      57% 6.3%,
      58% 0%,
      59% 3.5%,
      60% 0.7%,
      61% 4.9%,
      62% 0%,
      63% 2.1%,
      64% 1.4%,
      65% 5.6%,
      66% 0%,
      67% 4.2%,
      68% 0.7%,
      69% 2.8%,
      70% 0%,
      71% 6.3%,
      72% 1.4%,
      73% 3.5%,
      74% 0%,
      75% 4.9%,
      76% 0.7%,
      77% 5.6%,
      78% 0%,
      79% 2.8%,
      80% 1.4%,
      81% 4.2%,
      82% 0%,
      83% 6.3%,
      84% 0.7%,
      85% 3.5%,
      86% 0%,
      87% 4.9%,
      88% 1.4%,
      89% 2.1%,
      90% 0%,
      91% 5.6%,
      92% 0.7%,
      93% 4.2%,
      94% 0%,
      95% 2.8%,
      96% 1.4%,
      97% 6.3%,
      98% 0%,
      99% 3.5%,
      100% 0.7%,
      100% 100%,
      0% 100%);

  padding: 6rem 2rem;
}


.icon-card:last-child {
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.icon-card-icon i {

  font-size: 3rem;
  /* Make the icon nice and big */
  color: #60cd6f;
  /* Your brand's green color */
  margin-bottom: 1.5rem;
}

.icon-card h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.icon-card p {
  color: var(--para-text);
  line-height: 1.6;
}

/* Services Home page Layout */

/* --- Hover Grid Section --- */
.hover-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  /* 1 column on mobile, as you requested */
  gap: 0;
  padding: 1.5rem;
  justify-content: center;
  max-width: 1400px;
  margin: auto;
}

.hover-card {
  position: relative;
  /* This is the positioning context for the layers */
  height: 300px;
  overflow: hidden;
  color: white;
  border-radius: 0;
}

.hover-card:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.hover-card:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}



.hover-card-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  /* Bottom layer */
}

.hover-card::after {
  /* The dark overlay */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.hover-card-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  text-align: center;
}

/* Featured Page Home Call To Action */

.glass-feature-section {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile: A single stacked column */
  gap: 2rem;
  max-width: 1200px;
  margin: 2.5rem auto;
  padding: 1rem;
}

/* The Glass Card Container */
.glass-card {
  position: relative;
  overflow: hidden;
  /* This is crucial for the effect */
  border-radius: 20px;
  min-height: 500px;
  display: flex;
  align-items: flex-end;
  /* Align content to the bottom */
}

.glass-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* The Frosted Glass Panel */
.glass-card-content {
  position: relative;
  z-index: 2;
  margin: 1.5rem;
  padding: 2rem;
  border-radius: 15px;
  color: white;

  /* The "Frosted Glass" Effect */
  background: rgba(88, 86, 86, 0.425);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* For Safari */
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-card-content h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: white;
}

.glass-btn {
  background-color: #60cd6f;
  /* Your brand's green */
  color: white;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  display: inline-flex;
  /* Changed to inline-flex for icon alignment */
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  transition: background-color 0.3s ease;
}

.glass-btn:hover {
  background-color: #4aa556;
  /* A slightly darker green for the hover state */
}

/* The Main Image on the Right */
.glass-feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* --- Timeline Process Section --- */
.process-section {
  padding: 4rem 1.5rem;
  background-color: #ffffff;
}

.section-heading {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 4rem;
}

.timeline-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* The timeline line (for mobile) */
.timeline-container::after {
  content: '';
  position: absolute;
  width: 4px;
  background-color: #e0e0e0;
  top: 0;
  bottom: 0;
  left: 20px;
  margin-left: -2px;
  /* Center the 4px line */
}

/* The container for each step */
.timeline-item {
  padding: 10px 0 30px 40px;
  position: relative;
}

/* The circle on the timeline */
.timeline-item::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  /* THE FIX FOR MOBILE: We calculate the position.
     Line is at 20px. Circle's total width is 16px + 4px border + 4px border = 24px.
     So, 20px - (24px / 2) = 8px. */
  left: 8px;
  top: 5px;
  background-color: white;
  border: 4px solid var(--button-color);
  border-radius: 50%;
  z-index: 1;
}

.timeline-content {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.timeline-content h3 {
  font-size: 1.5rem;
  color: var(--button-color);
}

/* --- Styles for the new icons in the timeline --- */

.timeline-content i {
  display: block;
  /* This ensures the icon is on its own line */
  font-size: 2.5rem;
  color: var(--button-color);
  /* Use your brand's primary green */
  margin-bottom: 1rem;
  /* Adds space between the icon and the heading */
}

/* --- Auto-Scrolling Client Logo Section --- */

.client-section {
  padding: 4rem 0;
  background-color: white;
}

.logo-scroller {
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  /* This is the mask */
  /* This creates the nice fade-out effect on the sides */
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.logo-scroller-inner {
  display: flex;
  gap: 3rem;
  /* Space between logos */
  width: max-content;
  /* Make the container as wide as its content */
  animation: scroll 30s linear infinite;
  /* The animation magic */
}

.logo-scroller-inner img {
  height: 60px;
  /* Or your desired logo height */
  max-width: 180px;
  object-fit: contain;
}

/* Optional: Pause the animation on hover */
.logo-scroller:hover .logo-scroller-inner {
  animation-play-state: paused;
}

/* The Animation Definition */
@keyframes scroll {
  to {
    /* Move the inner container left by the width of one full set of logos */
    transform: translateX(-50%);
  }
}

/* Testimonial Section  */
.testimonial-v2-section {
  padding: 4rem 0;
  background-color: #f9f9f9;
}

.testimonial-v2-container {
  max-width: 1400px;
  margin: 0 auto;
  /* Mobile First: Stacked layout */
  display: flex;
  flex-direction: column;
}

/* Left/Top Static Content */
.testimonial-v2-static {
  padding: 2rem;
  text-align: center;
}

.testimonial-v2-static .fa-quote-left {
  font-size: 3rem;
  color: #60cd6f;
}

.testimonial-v2-static h2 {
  font-size: 2.5rem;
  margin: 1rem 0;
}

/* The Scroller (Right/Bottom) */
.testimonial-v2-scroller {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.testimonial-v2-inner {
  display: flex;
  width: max-content;
  /* This prevents a "snap" on page load */
  animation: scrollTestimonials 25s linear infinite paused; 
}

/* This makes the animation play only if the JS has run */
.testimonial-v2-scroller:hover .testimonial-v2-inner {
    animation-play-state: paused;
}

/* Start the animation once the duplication is complete */
.testimonial-v2-scroller .testimonial-v2-inner {
    animation-play-state: running;
}

.testimonial-card {
  width: 300px;
  /* Give cards a fixed width */
  flex-shrink: 0;
  margin: 1rem;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
}

.testimonial-card p {
  color: var(--para-text);
  margin: 1rem 0;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.author-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.author-text span {
  font-size: 0.8rem;
  color: #999;
}

.stars {
  color: #00B67A;
}

@keyframes scrollTestimonials {
  to {
    transform: translateX(-50%);
  }
}

/* Call To Action  */
/* --- FINAL & BULLETPROOF CTA Section using CSS Grid --- */

.final-cta-section {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile First: A single column */
  align-items: center;

  position: relative;
  /* Establishes a context for z-index */
  max-width: 1000px;

  background-color: #06301B;
  /* The "Pine" color */
  color: white;
  border-radius: 12px;
  padding: 4rem 2rem;
  overflow: hidden;
  margin: 4rem 1.5rem;
}

/* The container for your text and button */
.cta-content-wrapper {
  text-align: center;
  z-index: 2;
  /* Ensure text is always on top */
  /* Place this item in the grid */
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.final-cta-section h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 2rem;
}

.cta-button {
  display: inline-block;
  background-color: #60cd6f;
  color: #06301B;
  padding: 1rem 2.5rem;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
  transition: transform 0.3s ease;
}

.cta-button:hover {
  transform: scale(1.05);
}

/* The plant image */
.cta-plant-image {
  z-index: 1;
  /* Place it behind the text */
  /* Place this item in the exact same grid cell */
  grid-row: 1 / 2;
  grid-column: 1 / 2;

  /* MOBILE STYLING: Small and pushed to the corner */
  width: 160px;
  opacity: 0.2;
  justify-self: end;
  /* This pushes it to the right edge of the grid cell */
  align-self: end;
  /* This pushes it to the bottom edge of the grid cell */
  /* This fine-tunes the "peeking" effect */
  transform: translate(10%, 10%);
}

/* ============================================= */
/* --- Universal Popup Contact Form Styles --- */
/* ============================================= */

/* The full-screen dark overlay */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* The main form container */

.popup-form-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  background-color: #06301B;
  /* Your secondary "Pine" color */
  color: white;

  /* === THE FIXES START HERE === */

  /* 1. Create horizontal "breathing room" */
  width: calc(100% - 2rem);
  /* Always leaves 1rem of space on left/right */
  max-width: 500px;

  /* 2. Make the popup scrollable if the content is too tall */
  height: auto;
  max-height: calc(100vh - 2rem);
  /* Never taller than the screen, leaves 1rem top/bottom space */
  overflow-y: auto;
  /* If content overflows, make IT scroll, not the page */
  overflow-x: hidden;

  scrollbar-width: thin;
  /* Makes the scrollbar narrow */
  scrollbar-color: #60cd6f #2a3b29;

  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 2.5rem 2rem;
  box-sizing: border-box;
  /* Ensures padding is calculated correctly */

  /* Keep your opacity/visibility transitions for the open/close effect */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.popup-form-container::-webkit-scrollbar {
  width: 8px;
}

.popup-form-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.popup-form-container::-webkit-scrollbar-thumb {
  background-color: var(--button-color);
  border: 2px solid #06301B;
}

.popup-form-container::-webkit-scrollbar-thumb:hover {
  background-color: #79e688;
}

.popup-form-container.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}


/* The decorative plant background image */
.popup-bg-plant {
  position: absolute;
  bottom: -40px;
  right: -70px;
  width: 250px;
  opacity: 0.08;
  z-index: 1;
  pointer-events: none;
}

/* Ensure the form content sits on top of the plant */
.popup-form-content {
  position: relative;
  z-index: 2;
}

.popup-form-content h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

/* The close button */
.popup-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  color: white;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

/* Form element styles */
.popup-form-container form input,
.popup-form-container form select,
.popup-form-container form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: white;
  font-size: 1rem;
  box-sizing: border-box;
}

.popup-form-container form::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.popup-form-container form select {
  appearance: none;
}

.popup-submit-btn {
  width: 100%;
  padding: 15px;
  background-color: var(--button-color);
  /* Your primary green */
  color: #06301B;
  /* The dark pine color for text */
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s;
}

.popup-submit-btn:hover {
  transform: scale(1.03);
}

/* ============================================= */
/* --- Form Status Message Styles --- */
/* ============================================= */
.form-status-message {
  margin-top: 1rem;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  display: none; /* Hidden by default */
  transition: all 0.3s ease;
}

.form-status-message.success {
  background-color: #d1fae5; /* Light green */
  color: #065f46; /* Dark green */
  display: block;
}

.form-status-message.error {
  background-color: #fee2e2; /* Light red */
  color: #991b1b; /* Dark red */
  display: block;
}

/* --- Custom Select Dropdown Styles --- */
.custom-select-wrapper {
  position: relative;
  margin-bottom: 1rem;
}

.custom-select {
  position: relative;
}

.custom-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: white;
  font-size: 1rem;
  cursor: pointer;
}

.arrow {
  border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #06301B;
  /* Your Pine color */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  z-index: 10;
  display: none;
  /* Hide by default */
}

.custom-select.open .custom-options {
  display: block;
  /* Show when open */
}

.custom-option {
  display: block;
  padding: 12px;
  color: white;
  cursor: pointer;
}

.custom-option:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* --- Main Footer Section --- */
.main-footer {
  background-color: #222222;
  /* A professional charcoal */
  color: #a0a0a0;
  /* A light grey for text for soft contrast */
  padding-top: 4rem;
}

.footer-container {
  display: flex;
  flex-direction: column;
  /* Mobile First: Stack the columns */
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.footer-column h3 {
  /* For the LOGO */
  font-size: 2rem;
  color: white;
  margin-bottom: 1rem;
}

.footer-column h4 {
  font-size: 1.1rem;
  color: white;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-column p {
  line-height: 1.8;
  margin-bottom: 1rem;
}

.footer-column i {
  /* Icons next to contact info */
  margin-right: 10px;
  color: var(--button-color);
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li {
  margin-bottom: 0.75rem;
}

.footer-column a {
  color: #a0a0a0;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-column a:hover {
  color: var(--button-color);
  /* Your brand green */
}

.social-icons {
  margin-top: 1rem;
  display: flex;
  gap: 1.5rem;
}

.social-icons a {
  font-size: 1.2rem;
}

.sub-footer {
  text-align: center;
  padding: 1.5rem;
  margin-top: 3rem;
  border-top: 1px solid #333;
  font-size: 0.9rem;
  color: #777;
}


/* ============================================= */
/* --- REFINED & SMALLER Floating Action Buttons --- */
/* ============================================= */

/* Main container for the bottom-center button */
.fab-main-cta {
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 998;
  background-color: var(--button-color);
  color: #06301B;
  padding: 0.8rem 1.2rem;
  border-radius: 50px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--heading-font);
  white-space: nowrap;
  font-size: 0.9rem;
  transition: opacity 0.6s ease, transform 0.6s ease;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* This is the new rule that makes it hide */
.fab-main-cta.is-scrolling {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  /* Makes it slide down and out */
  pointer-events: none;
}

.fab-main-cta:hover {
  transform: translateX(-50%) scale(1.05);
}

/* ============================================= */
/* --- REFINED & RESPONSIVE Floating Action Buttons --- */
/* ============================================= */

/* Main container for the bottom-center button */
.fab-main-cta {
  position: fixed;
  bottom: clamp(15px, 2vw, 25px); /* Responsive bottom spacing */
  left: 50%;
  transform: translateX(-50%);
  z-index: 998;
  background-color: var(--button-color);
  color: #06301B;
  /* Responsive padding and font-size */
  padding: clamp(0.7rem, 1.5vw, 1rem) clamp(1rem, 2.5vw, 1.8rem);
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  border-radius: 50px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--heading-font);
  white-space: nowrap;
  transition: opacity 0.6s ease, transform 0.6s ease;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.fab-main-cta.is-scrolling {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
}

.fab-main-cta:hover {
  transform: translateX(-50%) scale(1.05);
}

/* Container for the side buttons */
.fab-side-buttons {
  position: fixed;
  /* Responsive bottom and right spacing */
  bottom: clamp(80px, 12vw, 110px);
  right: clamp(15px, 2vw, 25px);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

.fab-side-btn {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 1;
  transform: translateX(0);
}

.fab-side-btn.is-scrolling {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

/* Individual side button icons (the circle) */
.fab-side-btn i {
  /* Responsive width, height, and icon size */
  width: clamp(44px, 6vw, 56px);
  height: clamp(44px, 6vw, 56px);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: opacity 0.6s ease, transform 0.6s ease;
  margin-left: 0.75rem;
}

.fab-side-btn:hover i {
  transform: scale(1.1);
}

.fab-whatsapp i {
  background-color: var(--button-color);
}

.fab-call i {
  background-color: var(--button-color);
}
/* --- New "Silent" Text Label Styles --- */
.fab-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: white;
  color: black;
  padding: 0.4rem 0.8rem;
  border-radius: 5px;
  margin-left: 0.75rem;
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  white-space: nowrap;

  /* By default, it's hidden */
  opacity: 0;
  transform: translateX(10px);
  visibility: hidden;
  transition: all 0.4s ease;
  pointer-events: none;
  /* Make it unclickable when hidden */
}

/* This class will make it appear */
.fab-text.is-visible {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

/* The tail for the message bubble */
.fab-text::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid white;
}

.fabs-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

/* --- New Rule to Hide FABs in Footer --- */
.floating-action-buttons.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%); /* Makes the buttons slide down and out */
    transition: all 0.4s ease;
}

/* ============================================= */
/* --- Scroll to Top Button --- */
/* ============================================= */
.scroll-to-top-btn {
  position: fixed;
  bottom: 20px;
  left: 20px; /* Positioned on the left to avoid other buttons */
  z-index: 997;
  width: 48px;
  height: 48px;
  background-color: var(--button-color);
  color: white;
  border-radius: 50%;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.scroll-to-top-btn:hover {
  transform: scale(1.1);
}

/* This class will be added by JavaScript to show the button */
.scroll-to-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}





















/* --- Final Fix for Very Narrow Mobile Screens --- */
@media (max-width: 380px) {
  .hero-text {
    /* Add more side padding to keep text away from buttons */
    padding-left: 55px;
    padding-right: 55px;
  }
}






















@media (min-width: 768px) {

  /* --- New Desktop Dropdown Styles --- */
  .dropdown-li {
    position: relative;
  }

  .dropdown-arrow {
    font-size: 0.8rem;
    margin-left: 5px;
  }

  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 0.5rem 0;
    margin-top: 10px;
    width: 240px;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .dropdown-li.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    margin-top: 5px;
  }

 .dropdown-menu li a {
    padding: 0.8rem 1.5rem;
    display: block;
    font-size: 1rem; 
  }


/* Hero  */
  .hero {
    height: 80vh;
  }


  /* Navigation  */

  nav {

    height: 70px;
    margin: 0 2.5rem;

  }

  .nav-left {
    font-size: 2rem;
  }

  .nav-right {
    display: flex;
    gap: 1rem;
    font-weight: 400;
  }

  .hamberger {
    display: none;
  }

  .navitem {
    display: flex;
    list-style: none;
    gap: 1rem;
  }



  .navitem li a {
    text-decoration: none;
    color: black;
    font-family: var(--heading-font);
    font-size: 1.2rem;
    transition: color 0.3s ease;
  }


  .navitem li a:hover {
    color: var(--button-color);


  }

   .nav-cta-btn {
    background-color: var(--button-color);
    color: white !important; /* Use !important to override default link styles */
    padding: 0.6rem 1.3rem;
    border-radius: 8px;
    transition: transform 0.3s ease;
  }

  .nav-cta-btn:hover {
    color: white !important;
    transform: scale(1.05);
  }

  /* Iconed Section  */

  .icon-services {
    flex-direction: row;
  }

  .icon-card {
    flex: 1;
    clip-path: polygon(0% 0%,
        1% 2.8%,
        2% 0%,
        3% 4.2%,
        4% 0.7%,
        5% 3.5%,
        6% 0%,
        7% 4.9%,
        8% 1.4%,
        9% 2.8%,
        10% 0%,
        11% 5.6%,
        12% 0.7%,
        13% 3.5%,
        14% 0%,
        15% 4.2%,
        16% 1.4%,
        17% 6.3%,
        18% 0%,
        19% 2.8%,
        20% 0.7%,
        21% 4.9%,
        22% 0%,
        23% 3.5%,
        24% 1.4%,
        25% 5.6%,
        26% 0%,
        27% 4.2%,
        28% 0.7%,
        29% 2.8%,
        30% 0%,
        31% 6.3%,
        32% 1.4%,
        33% 3.5%,
        34% 0%,
        35% 4.9%,
        36% 0.7%,
        37% 2.1%,
        38% 0%,
        39% 5.6%,
        40% 1.4%,
        41% 4.2%,
        42% 0%,
        43% 2.8%,
        44% 0.7%,
        45% 6.3%,
        46% 0%,
        47% 3.5%,
        48% 1.4%,
        49% 4.9%,
        50% 0%,
        51% 5.6%,
        52% 0.7%,
        53% 2.8%,
        54% 0%,
        55% 4.2%,
        56% 1.4%,
        57% 6.3%,
        58% 0%,
        59% 3.5%,
        60% 0.7%,
        61% 4.9%,
        62% 0%,
        63% 2.1%,
        64% 1.4%,
        65% 5.6%,
        66% 0%,
        67% 4.2%,
        68% 0.7%,
        69% 2.8%,
        70% 0%,
        71% 6.3%,
        72% 1.4%,
        73% 3.5%,
        74% 0%,
        75% 4.9%,
        76% 0.7%,
        77% 5.6%,
        78% 0%,
        79% 2.8%,
        80% 1.4%,
        81% 4.2%,
        82% 0%,
        83% 6.3%,
        84% 0.7%,
        85% 3.5%,
        86% 0%,
        87% 4.9%,
        88% 1.4%,
        89% 2.1%,
        90% 0%,
        91% 5.6%,
        92% 0.7%,
        93% 4.2%,
        94% 0%,
        95% 2.8%,
        96% 1.4%,
        97% 6.3%,
        98% 0%,
        99% 3.5%,
        100% 0.7%,
        100% 100%,
        0% 100%);
    padding-top: 6rem;

  }

  .icon-card:first-child,
  .icon-card:last-child {
    border-radius: 0;
  }


  .icon-card:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }


  .icon-card:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;



  }

   /* Floating Button  */
 .fab-main-cta {
    display: none;
  }


 
    .hover-grid-container {
      grid-template-columns: repeat(3, 1fr);
    }

    /* By default, HIDE the text content */
    .hover-card-content {
      opacity: 0;
      transform: translateY(15px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    /* On hover, SHOW the text content */
    .hover-card:hover .hover-card-content {
      opacity: 1;
      transform: translateY(0);
    }

    /* Make the overlay fade in on hover for a nicer effect */
    .hover-card::after {
      background-color: rgba(0, 0, 0, 0);
      /* Transparent by default */
      transition: background-color 0.4s ease;
    }

    .hover-card:hover::after {
      background-color: rgba(0, 0, 0, 0.6);
      /* Darkens on hover to make text readable */
    }

    .hover-card:first-child,
    .hover-card:last-child {
      border-radius: 0;
    }

    /* Apply new desktop corners */
    .hover-card:nth-child(1) {
      border-top-left-radius: 12px;
    }

    .hover-card:nth-child(3) {
      border-top-right-radius: 12px;
    }

    .hover-card:nth-child(4) {
      border-bottom-left-radius: 12px;
    }

    .hover-card:nth-child(6) {
      border-bottom-right-radius: 12px;
    }
  }


@media (min-width: 992px) {
  .glass-feature-section {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

/* --- Responsive zig-zag for Desktops --- */
@media (min-width: 768px) {

  .timeline-container::after {
    left: 50%;
  }

  .timeline-item {
    padding: 10px 40px;
    width: 50%;
    box-sizing: border-box;
    text-align: right;
    left: 0;
  }

  /* Push the right-side items over */
  .timeline-item-right {
    left: 50%;
    text-align: left;
  }

  /* Adjust the circle positions for the centered line */
  .timeline-item::after {
    left: auto;

    right: -12px;
    top: 20px;
  }

  .timeline-item-right::after {
    right: auto;

    left: -12px;
  }
}

/* --- Responsive Split-Screen for Desktops --- */
@media (min-width: 992px) {
  .testimonial-v2-container {
    display: grid;
    /* Fixed width for the static text, flexible for the scroller */
    grid-template-columns: 400px 1fr;
    align-items: center;
    gap: 3rem;
    padding: 0 2rem;
  }

  .testimonial-v2-static {
    text-align: left;
  }
}

/* --- DESKTOP Styles --- */
@media (min-width: 768px) {
  .final-cta-section {
    /* Create two columns on desktop */
    grid-template-columns: 2fr 1fr;
    text-align: left;
    padding: 2rem 4rem;
  }

  .cta-content-wrapper {
    text-align: left;
  }

  .cta-plant-image {
    /* The image now gets its own grid column on desktop */
    grid-column: 2 / 3;

    /* DESKTOP STYLING: Larger and more prominent */
    width: 350px;
    opacity: 0.5;
    justify-self: center;
    align-self: center;
    transform: translate(20%, 20%);
  }
}

@media (min-width: 1030px) {
  .final-cta-section {
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Responsive Media Query for Desktop --- */
@media (min-width: 768px) {
  .footer-container {
    flex-direction: row;
    /* Side-by-side columns on desktop */
    justify-content: space-between;
    align-items: flex-start;
  }

  .footer-column {
    flex: 1;
    margin: 0 1rem;
  }

  .footer-about {
    flex: 1.5;
    /* Give the first column a bit more space */
  }
}