/* ==================================================================
   HERO SECTION
   ================================================================== */

.home-hero{
  position: relative;
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  isolation: isolate;
}

/* ============ BACKGROUND IMAGE ============ */
.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  animation: heroZoom 20s ease-out forwards;
}
@keyframes heroZoom{
  from{ transform: scale(1.08); }
  to{ transform: scale(1); }
}

/* ============ OVERLAY ============ */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Desktop overlay — strong gradient from left (readable content), fades right */
.hero-overlay{
  background:
    linear-gradient(90deg,
      rgba(17,17,17,.96) 0%,
      rgba(17,17,17,.88) 25%,
      rgba(17,17,17,.72) 50%,
      rgba(17,17,17,.45) 75%,
      rgba(17,17,17,.25) 100%),
    linear-gradient(180deg,
      rgba(17,17,17,.35) 0%,
      rgba(17,17,17,0) 30%,
      rgba(17,17,17,0) 70%,
      rgba(17,17,17,.45) 100%);
}
/* Green radial glow accents */
.hero-overlay::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(85,200,42,.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(85,200,42,.12) 0%, transparent 50%);
  pointer-events: none;
}

/* ============ CONTAINER ============ */
.hero-container{
  position: relative;
  z-index: 2;
  padding-top: 90px;
  padding-bottom: 100px;
  width: 100%;
}

/* ============ CONTENT ============ */
.hero-content{
  max-width: 720px;
  margin-left: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ============ BADGE ============ */
.hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  background: rgba(85,200,42,.15);
  border: 1px solid rgba(85,200,42,.32);
  color: #7FE058;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 99px;
  margin-bottom: 26px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(85,200,42,.15);
}
.hero-badge i{
  color: #55C82A;
  font-size: 1rem;
  filter: drop-shadow(0 0 8px rgba(85,200,42,.7));
  animation: heroPulse 2s ease-in-out infinite;
}
@keyframes heroPulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.18); }
}

/* ============ TITLE ============ */
.hero-title{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
  color: #FFFFFF;
  margin: 0 0 24px;
  letter-spacing: -.035em;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.hero-title .accent{
  color: #55C82A;
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.hero-title .accent::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 10px;
  background: rgba(85,200,42,.22);
  border-radius: 5px;
  z-index: -1;
}

/* ============ SUBTITLE ============ */
.hero-sub{
  font-family: 'Inter', sans-serif;
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(255,255,255,.88);
  margin: 0 0 36px;
  max-width: 620px;
  text-shadow: 0 1px 12px rgba(0,0,0,.3);
}

/* ============ CTA BUTTONS ============ */
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 44px;
}

.btn-hero-primary,
.btn-hero-secondary{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .96rem;
  line-height: 1;
  letter-spacing: .01em;
  border-radius: 12px;
  text-decoration: none;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn-hero-primary{
  background: linear-gradient(135deg, #55C82A 0%, #31951A 100%);
  color: #FFFFFF;
  border: 0;
  box-shadow: 0 12px 32px rgba(85,200,42,.4);
}
.btn-hero-primary::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: left .7s ease;
}
.btn-hero-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(85,200,42,.55);
  color: #FFFFFF;
}
.btn-hero-primary:hover::before{ left: 100%; }
.btn-hero-primary i{ font-size: 1.1rem; }

.btn-hero-secondary{
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.3);
  color: #FFFFFF;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-hero-secondary:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.55);
  transform: translateY(-3px);
  color: #FFFFFF;
}
.btn-hero-secondary i{ font-size: 1.05rem; }

/* ============ TRUST LIST ============ */
.hero-trust{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.hero-trust li{
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  color: rgba(255,255,255,.85);
  transition: color .3s ease;
}
.hero-trust li:hover{ color: #FFFFFF; }
.hero-trust i{
  color: #55C82A;
  font-size: 1rem;
  filter: drop-shadow(0 0 6px rgba(85,200,42,.6));
  flex-shrink: 0;
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

/* ============ TABLET ============ */
@media (max-width: 991.98px){
  .home-hero{ min-height: 580px; }
  .hero-container{
    padding-top: 70px;
    padding-bottom: 80px;
  }
  .hero-content{ max-width: 640px; }
  .hero-title{ font-size: clamp(1.9rem, 4.6vw, 2.7rem); }
  .hero-sub{ font-size: 1.02rem; margin-bottom: 30px; }
  .hero-actions{ margin-bottom: 36px; }
}

/* ============ MOBILE ============ */
@media (max-width: 767.98px){
  .home-hero{
    min-height: 620px;
    display: flex;
    align-items: center;
  }

  /* Mobile overlay — uniform dark overlay for readability */
  .hero-overlay{
    background:
      linear-gradient(180deg,
        rgba(17,17,17,.75) 0%,
        rgba(17,17,17,.7) 40%,
        rgba(17,17,17,.78) 100%),
      linear-gradient(135deg,
        rgba(17,17,17,.2) 0%,
        rgba(17,17,17,.35) 100%);
  }
  .hero-overlay::before{
    background:
      radial-gradient(circle at 30% 20%, rgba(85,200,42,.15) 0%, transparent 55%);
  }

  .hero-bg img{
    object-position: center right;
    animation: none;
  }

  .hero-container{
    padding-top: 60px;
    padding-bottom: 70px;
  }

  .hero-content{
    max-width: 100%;
    text-align: left;
    align-items: flex-start;
  }

  .hero-badge{
    font-size: .72rem;
    padding: 8px 16px;
    letter-spacing: .1em;
    margin-bottom: 22px;
  }

  .hero-title{
    font-size: clamp(1.7rem, 7.5vw, 2.3rem);
    margin-bottom: 20px;
    line-height: 1.15;
  }
  .hero-title .accent{ white-space: normal; }

  .hero-sub{
    font-size: .98rem;
    line-height: 1.65;
    margin-bottom: 28px;
  }

  .hero-actions{
    width: 100%;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
  }

  .btn-hero-primary,
  .btn-hero-secondary{
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: .95rem;
  }

  .hero-trust{
    gap: 10px 20px;
  }
  .hero-trust li{
    font-size: .85rem;
  }
}

/* ============ SMALL MOBILE ============ */
@media (max-width: 479.98px){
  .home-hero{ min-height: 560px; }

  .hero-container{
    padding-top: 50px;
    padding-bottom: 60px;
  }

  .hero-badge{
    font-size: .68rem;
    padding: 7px 14px;
    margin-bottom: 18px;
  }
  .hero-badge i{ font-size: .9rem; }

  .hero-title{
    font-size: 1.6rem;
    margin-bottom: 16px;
  }

  .hero-sub{
    font-size: .92rem;
    margin-bottom: 24px;
  }

  .btn-hero-primary,
  .btn-hero-secondary{
    padding: 15px 20px;
    font-size: .9rem;
  }

  .hero-trust{ gap: 8px 16px; }
  .hero-trust li{ font-size: .8rem; }
  .hero-trust i{ font-size: .9rem; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .hero-bg img{ animation: none; }
  .hero-badge i{ animation: none; }
}


/* ==================================================================
   TRUST & CREDIBILITY SECTION
   ================================================================== */

.trust-section{
  position: relative;
  padding: 70px 0 80px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F6F4 100%);
  overflow: hidden;
  z-index: 1;
}

.trust-section::before{
  content: '';
  position: absolute;
  top: 10%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(85,200,42,.06) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.trust-section::after{
  content: '';
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(85,200,42,.05) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.trust-section .container{
  position: relative;
  z-index: 2;
}

/* ============ SECTION HEADING (MINIMIZED) ============ */
.trust-section-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.trust-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: rgba(85,200,42,.08);
  border: 1px solid rgba(85,200,42,.18);
  padding: 6px 14px;
  border-radius: 99px;
  margin-bottom: 14px;
}
.trust-eyebrow i{
  color: var(--brand);
  font-size: .8rem;
}

.trust-heading{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 700;
  color: var(--charcoal);
  margin: 0 0 10px;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.trust-subheading{
  font-family: 'Inter', sans-serif;
  font-size: .93rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ============ GRID ============ */
.trustbar-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* ============ CARD (MAXIMIZED) ============ */
.trust-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding: 44px 36px 40px;
  background: #FFFFFF;
  border-radius: 26px;
  border: 1px solid rgba(17,17,17,.06);
  min-height: 320px;
  overflow: hidden;
  transition: all .55s cubic-bezier(.4,0,.2,1);
  cursor: default;
  isolation: isolate;
  box-shadow:
    0 1px 2px rgba(17,17,17,.02),
    0 12px 32px rgba(17,17,17,.06);
}

.trust-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 50%, var(--brand) 100%);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  z-index: 3;
}

.trust-card::after{
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle,
    rgba(85,200,42,.16) 0%,
    rgba(85,200,42,.05) 40%,
    transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .6s ease;
  z-index: 0;
  pointer-events: none;
}

.trust-card:hover{
  transform: translateY(-8px);
  border-color: rgba(85,200,42,.3);
  box-shadow:
    0 2px 4px rgba(17,17,17,.02),
    0 30px 60px rgba(17,17,17,.12),
    0 20px 40px rgba(85,200,42,.12);
}
.trust-card:hover::before{
  transform: scaleX(1);
  animation: shineSlide 2s ease-in-out infinite;
}
.trust-card:hover::after{ opacity: 1; }

@keyframes shineSlide{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

/* ============ ICON (BIGGER) ============ */
.tb-icon{
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  flex-shrink: 0;
  background: linear-gradient(135deg,
    rgba(85,200,42,.14) 0%,
    rgba(85,200,42,.06) 100%);
  color: var(--brand-dark);
  border: 1.5px solid rgba(85,200,42,.18);
  transition: all .6s cubic-bezier(.68,-.55,.265,1.55);
  overflow: hidden;
  z-index: 2;
}

.tb-icon::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 0;
  border-radius: inherit;
}

.tb-icon::after{
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 32px;
  border: 1px solid rgba(85,200,42,.25);
  opacity: 0;
  transform: scale(.9);
  transition: all .5s cubic-bezier(.4,0,.2,1);
  z-index: 0;
  pointer-events: none;
}

.tb-icon i{
  position: relative;
  z-index: 1;
  transition: transform .5s cubic-bezier(.68,-.55,.265,1.55);
  filter: drop-shadow(0 2px 6px rgba(85,200,42,.2));
}

.trust-card:hover .tb-icon{
  border-color: transparent;
  box-shadow: 0 20px 45px rgba(85,200,42,.45);
  transform: translateY(-3px) rotate(-5deg);
}
.trust-card:hover .tb-icon::before{ opacity: 1; }
.trust-card:hover .tb-icon::after{
  opacity: 1;
  transform: scale(1);
}
.trust-card:hover .tb-icon,
.trust-card:hover .tb-icon i{
  color: #FFFFFF;
}
.trust-card:hover .tb-icon i{
  transform: scale(1.15) rotate(5deg);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.15));
}

/* ============ TEXT (BIGGER) ============ */
.tb-text{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: auto;
}

.tb-text strong{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--charcoal);
  line-height: 1.2;
  letter-spacing: -.025em;
  transition: color .3s ease;
}

.tb-text small{
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.5;
  transition: color .3s ease;
}

.trust-card:hover .tb-text strong{
  color: var(--brand-dark);
}
.trust-card:hover .tb-text small{
  color: var(--text);
}

/* ============ ARROW BADGE ============ */
.tb-arrow{
  position: absolute;
  top: 34px;
  right: 34px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17,17,17,.04);
  color: var(--text-light);
  font-size: 1rem;
  transition: all .45s cubic-bezier(.68,-.55,.265,1.55);
  z-index: 2;
}

.trust-card:hover .tb-arrow{
  background: var(--brand);
  color: #FFFFFF;
  transform: rotate(45deg) scale(1.15);
  box-shadow: 0 8px 20px rgba(85,200,42,.4);
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

/* ============ XXL DESKTOP (1600px+) ============ */
@media (min-width: 1600px){
  .trustbar-grid{ gap: 28px; }
  .trust-card{
    padding: 52px 44px 48px;
    min-height: 360px;
    border-radius: 28px;
    gap: 48px;
  }
  .tb-icon{
    width: 128px;
    height: 128px;
    font-size: 3.8rem;
    border-radius: 32px;
  }
  .tb-text strong{ font-size: 1.75rem; }
  .tb-text small{ font-size: 1.1rem; }
  .tb-arrow{
    width: 48px;
    height: 48px;
    top: 40px;
    right: 40px;
    font-size: 1.15rem;
  }
}

/* ============ XL DESKTOP (1440-1599px) ============ */
@media (min-width: 1440px) and (max-width: 1599px){
  .trustbar-grid{ gap: 26px; }
  .trust-card{
    padding: 48px 40px 44px;
    min-height: 340px;
    border-radius: 28px;
    gap: 44px;
  }
  .tb-icon{
    width: 118px;
    height: 118px;
    font-size: 3.5rem;
    border-radius: 30px;
  }
  .tb-text strong{ font-size: 1.6rem; }
  .tb-text small{ font-size: 1.05rem; }
  .tb-arrow{
    width: 44px;
    height: 44px;
    top: 36px;
    right: 36px;
  }
}

/* ============ LARGE DESKTOP (1200-1439px) ============ */
@media (min-width: 1200px) and (max-width: 1439px){
  .trust-card{
    padding: 44px 34px 40px;
    min-height: 320px;
    gap: 40px;
  }
  .tb-icon{
    width: 108px;
    height: 108px;
    font-size: 3.1rem;
    border-radius: 26px;
  }
  .tb-text strong{ font-size: 1.4rem; }
  .tb-text small{ font-size: .98rem; }
}

/* ============ TABLET (768-991px) ============ */
@media (max-width: 991.98px){
  .trust-section{ padding: 60px 0 70px; }
  .trust-section-head{ margin-bottom: 36px; }
  .trust-heading{ font-size: 1.5rem; }
  .trust-subheading{ font-size: .9rem; }

  .trustbar-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .trust-card{
    padding: 36px 28px 32px;
    min-height: 260px;
    border-radius: 22px;
    gap: 30px;
  }
  .tb-icon{
    width: 88px;
    height: 88px;
    font-size: 2.5rem;
    border-radius: 22px;
  }
  .tb-text strong{ font-size: 1.25rem; }
  .tb-text small{ font-size: .9rem; }
  .tb-arrow{
    width: 38px;
    height: 38px;
    top: 26px;
    right: 26px;
  }
}

/* ============ MOBILE (< 768px) ============ */
@media (max-width: 767.98px){
  .trust-section{ padding: 50px 0 60px; }
  .trust-section-head{ margin-bottom: 32px; }
  .trust-eyebrow{ font-size: .66rem; padding: 5px 12px; }
  .trust-heading{ font-size: 1.3rem; }
  .trust-subheading{ font-size: .85rem; }

  .trustbar-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .trust-card{
    padding: 28px 22px 26px;
    gap: 24px;
    min-height: 220px;
    border-radius: 20px;
    background: linear-gradient(160deg, #FFFFFF 0%, #FAFBF9 100%);
  }
  .trust-card:hover{
    transform: translateY(-5px);
  }
  .tb-icon{
    width: 72px;
    height: 72px;
    font-size: 2rem;
    border-radius: 18px;
  }
  .tb-text strong{ font-size: 1.1rem; }
  .tb-text small{ font-size: .82rem; line-height: 1.4; }
  .tb-arrow{
    width: 32px;
    height: 32px;
    top: 20px;
    right: 20px;
    font-size: .85rem;
  }
}

/* ============ SMALL MOBILE (< 480px) ============ */
@media (max-width: 479.98px){
  .trust-section{ padding: 44px 0 52px; }
  .trust-section-head{ margin-bottom: 26px; }
  .trust-heading{ font-size: 1.15rem; }

  .trustbar-grid{ gap: 12px; }
  .trust-card{
    padding: 24px 18px 22px;
    gap: 20px;
    min-height: 200px;
    border-radius: 18px;
  }
  .tb-icon{
    width: 64px;
    height: 64px;
    font-size: 1.75rem;
    border-radius: 16px;
  }
  .tb-text strong{ font-size: 1rem; }
  .tb-text small{ font-size: .76rem; line-height: 1.4; }
  .tb-arrow{
    width: 28px;
    height: 28px;
    top: 16px;
    right: 16px;
    font-size: .72rem;
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .trust-card::before{ animation: none !important; }
}


/* ==================================================================
   ABOUT US SECTION
   ================================================================== */

.about-section{
  position: relative;
  padding: 100px 0 110px;
  background: #FFFFFF;
  overflow: hidden;
}

/* Subtle background accents */
.about-section::before{
  content: '';
  position: absolute;
  top: -10%;
  left: -12%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(85,200,42,.05) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.about-section::after{
  content: '';
  position: absolute;
  bottom: -15%;
  right: -10%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(85,200,42,.04) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.about-section .container{
  position: relative;
  z-index: 2;
}

/* ============ WRAPPER ============ */
.about-wrapper{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: center;
}

/* ==================================================================
   LEFT: MEDIA SIDE
   ================================================================== */

.about-media{
  position: relative;
  padding: 30px;
}

.about-media-inner{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 40px 90px rgba(17,17,17,.18),
    0 15px 40px rgba(17,17,17,.08);
  z-index: 2;
  transform: perspective(1200px) rotateY(-3deg);
  transition: transform .7s cubic-bezier(.4,0,.2,1);
}
.about-media:hover .about-media-inner{
  transform: perspective(1200px) rotateY(0deg);
}

.about-image{
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.4,0,.2,1);
}
.about-media:hover .about-image{
  transform: scale(1.04);
}

/* Decorative frame behind image */
.about-frame{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(85,200,42,.25);
  border-radius: 28px;
  z-index: 1;
  transform: translate(-20px, 20px);
  transition: transform .7s cubic-bezier(.4,0,.2,1);
}
.about-media:hover .about-frame{
  transform: translate(-30px, 30px);
}

/* ============ EXPERIENCE BADGE ============ */
.about-experience{
  position: absolute;
  top: 30px;
  left: -24px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #FFFFFF;
  padding: 20px 24px;
  border-radius: 18px;
  text-align: center;
  box-shadow:
    0 20px 45px rgba(85,200,42,.45),
    0 8px 20px rgba(85,200,42,.25);
  z-index: 3;
  min-width: 130px;
  animation: floatBadge 4s ease-in-out infinite;
  border: 3px solid #FFFFFF;
}
@keyframes floatBadge{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

.ae-number{
  font-family: 'Poppins', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}
.ae-number span{
  font-size: 1.4rem;
  margin-top: 4px;
}
.ae-text{
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 6px;
  letter-spacing: .02em;
  opacity: .95;
}

/* ============ TRUST BADGE CARD ============ */
.about-trust-badge{
  position: absolute;
  bottom: 30px;
  right: -24px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow:
    0 20px 45px rgba(17,17,17,.15),
    0 0 0 1px rgba(17,17,17,.04);
  z-index: 3;
  min-width: 240px;
  animation: floatBadge 5s ease-in-out infinite;
  animation-delay: 1s;
}

.atb-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(85,200,42,.35);
}
.atb-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.atb-text strong{
  font-family: 'Poppins', sans-serif;
  font-size: .92rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.2;
}
.atb-text small{
  font-family: 'Inter', sans-serif;
  font-size: .76rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ==================================================================
   RIGHT: CONTENT SIDE
   ================================================================== */

.about-content{
  position: relative;
}

.about-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: rgba(85,200,42,.1);
  border: 1px solid rgba(85,200,42,.2);
  padding: 8px 18px;
  border-radius: 99px;
  margin-bottom: 22px;
}
.about-eyebrow i{
  color: var(--brand);
  font-size: .9rem;
}

.about-heading{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: var(--charcoal);
  line-height: 1.15;
  letter-spacing: -.03em;
  margin: 0 0 24px;
}
.about-heading .accent{
  color: var(--brand);
  position: relative;
  display: inline-block;
}
.about-heading .accent::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 10px;
  background: rgba(85,200,42,.18);
  border-radius: 5px;
  z-index: -1;
}

.about-lead{
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 18px;
  font-weight: 500;
}

.about-text{
  font-family: 'Inter', sans-serif;
  font-size: .98rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0 0 18px;
}

/* ============ FEATURES LIST ============ */
.about-features{
  list-style: none;
  padding: 0;
  margin: 28px 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.about-features li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
}
.about-features i{
  color: var(--brand);
  font-size: .95rem;
  flex-shrink: 0;
  margin-top: 3px;
  filter: drop-shadow(0 1px 3px rgba(85,200,42,.35));
}

/* ============ STATS ROW ============ */
.about-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 24px 0;
  margin-bottom: 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.about-stat{
  text-align: center;
  padding: 0 12px;
  position: relative;
}
.about-stat:not(:last-child)::after{
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--border);
}
.as-num{
  font-family: 'Poppins', sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--charcoal);
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: 6px;
}
.as-num::after{
  content: '';
  display: block;
  width: 26px;
  height: 3px;
  background: var(--brand);
  border-radius: 3px;
  margin: 8px auto 0;
}
.as-lbl{
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ============ CTA BUTTONS ============ */
.about-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.btn-about-primary,
.btn-about-secondary{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  padding: 15px 28px;
  border-radius: 12px;
  text-decoration: none;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  line-height: 1;
  letter-spacing: .01em;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn-about-primary{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #FFFFFF;
  box-shadow: 0 10px 28px rgba(85,200,42,.35);
}
.btn-about-primary::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: left .7s ease;
}
.btn-about-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(85,200,42,.5);
  color: #FFFFFF;
}
.btn-about-primary:hover::before{ left: 100%; }
.btn-about-primary i{ font-size: 1.05rem; }

.btn-about-secondary{
  background: transparent;
  color: var(--charcoal);
  border: 1.5px solid var(--border);
}
.btn-about-secondary:hover{
  background: var(--charcoal);
  color: #FFFFFF;
  border-color: var(--charcoal);
  transform: translateY(-3px);
}
.btn-about-secondary i{
  transition: transform .3s ease;
}
.btn-about-secondary:hover i{
  transform: translateX(4px);
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

/* ============ LARGE DESKTOP (1200-1439px) ============ */
@media (min-width: 1200px) and (max-width: 1439px){
  .about-wrapper{ gap: 60px; }
  .about-image{ height: 520px; }
  .about-media{ padding: 24px; }
}

/* ============ TABLET (768-991px) ============ */
@media (max-width: 991.98px){
  .about-section{ padding: 70px 0 80px; }
  .about-wrapper{
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .about-media{
    padding: 24px;
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
  }
  .about-media-inner{
    transform: none;
  }
  .about-image{ height: 460px; }
  .about-frame{
    transform: translate(-14px, 14px);
  }

  .about-experience{
    left: -14px;
    top: 20px;
    padding: 16px 20px;
    min-width: 110px;
  }
  .ae-number{ font-size: 2rem; }
  .ae-text{ font-size: .72rem; }

  .about-trust-badge{
    right: -14px;
    bottom: 20px;
    padding: 14px 16px;
    min-width: 210px;
  }
  .atb-icon{ width: 40px; height: 40px; font-size: 1.2rem; }
  .atb-text strong{ font-size: .85rem; }
  .atb-text small{ font-size: .72rem; }

  .about-heading{ font-size: 2.1rem; }
  .about-lead{ font-size: 1rem; }
}

/* ============ MOBILE (< 768px) ============ */
@media (max-width: 767.98px){
  .about-section{ padding: 60px 0 70px; }

  .about-wrapper{ gap: 50px; }

  .about-media{ padding: 16px; }

  .about-media-inner{
    border-radius: 20px;
    box-shadow:
      0 20px 50px rgba(17,17,17,.15),
      0 8px 20px rgba(17,17,17,.06);
  }
  .about-image{ height: 400px; }
  .about-frame{
    border-radius: 22px;
    transform: translate(-10px, 10px);
    border-width: 1.5px;
  }

  .about-experience{
    left: -8px;
    top: 16px;
    padding: 14px 16px;
    min-width: 100px;
    border-radius: 14px;
    border-width: 2px;
  }
  .ae-number{ font-size: 1.75rem; }
  .ae-number span{ font-size: 1.1rem; }
  .ae-text{ font-size: .68rem; margin-top: 4px; }

  .about-trust-badge{
    right: -8px;
    bottom: 16px;
    padding: 12px 14px;
    gap: 10px;
    min-width: 190px;
    border-radius: 14px;
  }
  .atb-icon{
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
    border-radius: 10px;
  }
  .atb-text strong{ font-size: .82rem; }
  .atb-text small{ font-size: .7rem; }

  .about-heading{ font-size: 1.7rem; margin-bottom: 20px; }
  .about-lead{ font-size: .96rem; line-height: 1.7; }
  .about-text{ font-size: .92rem; }

  .about-features{
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 22px 0 26px;
  }
  .about-features li{ font-size: .88rem; }

  .about-stats{
    padding: 20px 0;
    margin-bottom: 26px;
  }
  .as-num{ font-size: 1.6rem; }
  .as-lbl{ font-size: .72rem; }

  .about-cta{
    flex-direction: column;
    align-items: stretch;
  }
  .btn-about-primary,
  .btn-about-secondary{
    width: 100%;
    justify-content: center;
    padding: 15px 22px;
    font-size: .92rem;
  }
}

/* ============ SMALL MOBILE (< 480px) ============ */
@media (max-width: 479.98px){
  .about-section{ padding: 50px 0 60px; }

  .about-media{ padding: 12px; }
  .about-image{ height: 340px; }

  .about-experience{
    left: -4px;
    top: 12px;
    padding: 12px 14px;
    min-width: 90px;
    border-radius: 12px;
  }
  .ae-number{ font-size: 1.5rem; }
  .ae-number span{ font-size: 1rem; }
  .ae-text{ font-size: .62rem; }

  .about-trust-badge{
    right: -4px;
    bottom: 12px;
    padding: 10px 12px;
    gap: 8px;
    min-width: 170px;
    border-radius: 12px;
  }
  .atb-icon{ width: 34px; height: 34px; font-size: 1rem; border-radius: 9px; }
  .atb-text strong{ font-size: .76rem; }
  .atb-text small{ font-size: .64rem; }

  .about-eyebrow{ font-size: .66rem; padding: 6px 14px; }
  .about-heading{ font-size: 1.45rem; }
  .about-lead{ font-size: .92rem; }
  .about-text{ font-size: .88rem; }

  .about-stats{ gap: 8px; padding: 16px 0; }
  .as-num{ font-size: 1.4rem; }
  .as-num::after{ width: 20px; height: 2px; }
  .as-lbl{ font-size: .66rem; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .about-experience,
  .about-trust-badge{
    animation: none !important;
  }
}

/* ==================================================================
   SERVICES SECTION
   ================================================================== */

.services-section{
  position: relative;
  padding: 80px 0 90px;
  background: linear-gradient(180deg, #F5F6F4 0%, #FFFFFF 100%);
  overflow: hidden;
}

.services-section::before{
  content: '';
  position: absolute;
  top: 8%;
  right: -8%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(85,200,42,.06) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.services-section .container{
  position: relative;
  z-index: 2;
}

/* ============ HEADING ============ */
.services-head{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}

.services-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: rgba(85,200,42,.1);
  border: 1px solid rgba(85,200,42,.2);
  padding: 7px 16px;
  border-radius: 99px;
  margin-bottom: 16px;
}
.services-eyebrow i{
  color: var(--brand);
  font-size: .85rem;
}

.services-heading{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  font-weight: 800;
  color: var(--charcoal);
  margin: 0 0 14px;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.services-subheading{
  font-family: 'Inter', sans-serif;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* ============ GRID ============ */
.services-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* ==================================================================
   SERVICE CARD
   ================================================================== */

.service-card{
  position: relative;
  display: block;
  min-height: 380px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: #FFFFFF;
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
  transition: transform .5s cubic-bezier(.4,0,.2,1),
              box-shadow .5s cubic-bezier(.4,0,.2,1);
  box-shadow:
    0 2px 4px rgba(17,17,17,.04),
    0 12px 32px rgba(17,17,17,.08);
  cursor: pointer;
}

/* ---- Gradient Overlay (base) ---- */
.service-card::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(17,17,17,0) 0%,
    rgba(17,17,17,.1) 30%,
    rgba(17,17,17,.7) 70%,
    rgba(17,17,17,.95) 100%);
  z-index: 1;
  transition: opacity .5s ease;
}

/* ---- Green Accent Overlay (active state) ---- */
.service-card::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg,
    rgba(85,200,42,.42) 0%,
    rgba(49,149,26,.2) 35%,
    rgba(17,17,17,.88) 100%);
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 1;
  pointer-events: none;
}

/* ---- Card Hover / Active ---- */
.service-card:hover,
.service-card.is-active{
  transform: translateY(-6px);
  box-shadow:
    0 4px 8px rgba(17,17,17,.06),
    0 20px 45px rgba(17,17,17,.16),
    0 14px 30px rgba(85,200,42,.14);
}
.service-card:hover::before,
.service-card.is-active::before{
  opacity: 0;
}
.service-card:hover::after,
.service-card.is-active::after{
  opacity: 1;
}

/* ============ ICON BADGE ============ */
.sc-icon{
  position: absolute;
  top: 20px;
  left: 20px;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #FFFFFF;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,.22);
  z-index: 3;
  transition: all .45s cubic-bezier(.68,-.55,.265,1.55);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.sc-icon i{
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
  transition: transform .45s cubic-bezier(.68,-.55,.265,1.55);
}
.service-card:hover .sc-icon,
.service-card.is-active .sc-icon{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-color: rgba(255,255,255,.4);
  transform: scale(1.06) rotate(-6deg);
  box-shadow:
    0 10px 24px rgba(85,200,42,.5),
    0 0 0 4px rgba(255,255,255,.12);
}
.service-card:hover .sc-icon i,
.service-card.is-active .sc-icon i{
  transform: scale(1.12);
}

/* ============ ARROW BADGE ============ */
.sc-arrow{
  position: absolute;
  top: 24px;
  right: 24px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  color: #FFFFFF;
  font-size: .9rem;
  z-index: 3;
  transition: all .45s cubic-bezier(.68,-.55,.265,1.55);
}
.service-card:hover .sc-arrow,
.service-card.is-active .sc-arrow{
  background: #FFFFFF;
  color: var(--brand-dark);
  transform: rotate(45deg) scale(1.08);
  box-shadow: 0 8px 22px rgba(255,255,255,.3);
}

/* ============ CONTENT ============ */
.sc-content{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 26px 24px 24px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.sc-title{
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.3;
  letter-spacing: -.02em;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.sc-title::after{
  content: '';
  display: block;
  width: 28px;
  height: 2.5px;
  background: var(--brand);
  border-radius: 3px;
  margin-top: 10px;
  transition: all .45s cubic-bezier(.4,0,.2,1);
}
.service-card:hover .sc-title::after,
.service-card.is-active .sc-title::after{
  width: 52px;
  background: #FFFFFF;
}

/* ---- Description (hidden by default) ---- */
.sc-desc{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: max-height .5s cubic-bezier(.4,0,.2,1),
              opacity .4s ease,
              transform .5s cubic-bezier(.4,0,.2,1);
}
.sc-desc p{
  font-family: 'Inter', sans-serif;
  font-size: .87rem;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
  margin: 12px 0 14px;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

.sc-link{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  color: #FFFFFF;
  letter-spacing: .02em;
  padding: 9px 16px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 9px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all .3s ease;
}
.sc-link i{
  font-size: .85rem;
  transition: transform .3s ease;
}

/* ---- Reveal on Hover / Active ---- */
.service-card:hover .sc-desc,
.service-card.is-active .sc-desc{
  max-height: 220px;
  opacity: 1;
  transform: translateY(0);
}
.service-card:hover .sc-link,
.service-card.is-active .sc-link{
  background: var(--brand);
  border-color: var(--brand);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(85,200,42,.45);
}
.service-card:hover .sc-link i,
.service-card.is-active .sc-link i{
  transform: translateX(3px);
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

/* ============ TABLET (768-991px) ============ */
@media (max-width: 991.98px){
  .services-section{ padding: 65px 0 75px; }

  .services-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .service-card{ min-height: 340px; }

  .sc-icon{
    width: 52px;
    height: 52px;
    font-size: 1.35rem;
    border-radius: 14px;
    top: 18px;
    left: 18px;
  }
  .sc-arrow{
    width: 36px;
    height: 36px;
    top: 20px;
    right: 20px;
    font-size: .85rem;
  }
  .sc-title{ font-size: 1.08rem; }
  .sc-content{ padding: 22px 20px 20px; }
}

/* ============ MOBILE (< 768px) ============ */
@media (max-width: 767.98px){
  .services-section{ padding: 55px 0 65px; }

  .services-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .service-card{
    min-height: 320px;
    border-radius: 18px;
  }

  .sc-icon{
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
    border-radius: 13px;
    top: 16px;
    left: 16px;
  }
  .sc-arrow{
    width: 34px;
    height: 34px;
    top: 18px;
    right: 18px;
    font-size: .8rem;
  }

  .sc-title{ font-size: 1.1rem; }
  .sc-title::after{
    width: 40px;
    margin-top: 8px;
  }
  .sc-desc p{
    font-size: .85rem;
    margin: 10px 0 12px;
  }
  .sc-link{
    font-size: .78rem;
    padding: 8px 14px;
  }
  .sc-content{
    padding: 22px 18px 20px;
  }
}

/* ============ SMALL MOBILE (< 480px) ============ */
@media (max-width: 479.98px){
  .services-section{ padding: 48px 0 55px; }

  .service-card{
    min-height: 300px;
    border-radius: 16px;
  }

  .sc-icon{
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
    border-radius: 12px;
    top: 14px;
    left: 14px;
  }
  .sc-arrow{
    width: 32px;
    height: 32px;
    top: 15px;
    right: 15px;
    font-size: .75rem;
  }

  .sc-title{
    font-size: 1rem;
    line-height: 1.3;
  }
  .sc-title::after{
    width: 34px;
    margin-top: 7px;
    height: 2px;
  }
  .sc-desc p{
    font-size: .82rem;
    line-height: 1.5;
    margin: 8px 0 10px;
  }
  .sc-link{
    font-size: .74rem;
    padding: 7px 12px;
    gap: 5px;
  }
  .sc-content{
    padding: 20px 16px 18px;
  }
}

/* ============ TOUCH DEVICES ============ */
@media (hover: none) and (pointer: coarse){
  /* Prevent hover from triggering reveal on tap */
  .service-card:hover{
    transform: none;
    box-shadow:
      0 2px 4px rgba(17,17,17,.04),
      0 12px 32px rgba(17,17,17,.08);
  }
  .service-card:hover::before{ opacity: 1; }
  .service-card:hover::after{ opacity: 0; }
  .service-card:hover .sc-icon{
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.22);
    transform: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
  }
  .service-card:hover .sc-arrow{
    background: rgba(255,255,255,.12);
    color: #FFFFFF;
    transform: none;
    box-shadow: none;
  }
  .service-card:hover .sc-title::after{
    width: 28px;
    background: var(--brand);
  }
  .service-card:hover .sc-desc{
    max-height: 0;
    opacity: 0;
    transform: translateY(10px);
  }
  .service-card:hover .sc-link{
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.25);
    box-shadow: none;
  }

  /* But keep :active state visible via JS-added class */
  .service-card.is-active{
    transform: translateY(-6px);
    box-shadow:
      0 4px 8px rgba(17,17,17,.06),
      0 20px 45px rgba(17,17,17,.16),
      0 14px 30px rgba(85,200,42,.14);
  }
  .service-card.is-active::before{ opacity: 0; }
  .service-card.is-active::after{ opacity: 1; }
  .service-card.is-active .sc-icon{
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    border-color: rgba(255,255,255,.4);
    transform: scale(1.06) rotate(-6deg);
    box-shadow:
      0 10px 24px rgba(85,200,42,.5),
      0 0 0 4px rgba(255,255,255,.12);
  }
  .service-card.is-active .sc-arrow{
    background: #FFFFFF;
    color: var(--brand-dark);
    transform: rotate(45deg) scale(1.08);
    box-shadow: 0 8px 22px rgba(255,255,255,.3);
  }
  .service-card.is-active .sc-title::after{
    width: 52px;
    background: #FFFFFF;
  }
  .service-card.is-active .sc-desc{
    max-height: 220px;
    opacity: 1;
    transform: translateY(0);
  }
  .service-card.is-active .sc-link{
    background: var(--brand);
    border-color: var(--brand);
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(85,200,42,.45);
  }
  .service-card.is-active .sc-link i{
    transform: translateX(3px);
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .service-card,
  .service-card::before,
  .service-card::after,
  .sc-icon,
  .sc-arrow,
  .sc-title::after,
  .sc-desc,
  .sc-link,
  .sc-link i{
    transition-duration: .01ms !important;
  }
}

/* ==================================================================
   WHY CHOOSE US SECTION
   ================================================================== */

.why-section{
  position: relative;
  padding: 90px 0 100px;
  background: #FFFFFF;
  overflow: hidden;
}

/* Decorative background elements */
.why-section::before{
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(85,200,42,.055) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.why-section::after{
  content: '';
  position: absolute;
  bottom: -15%;
  right: -10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(85,200,42,.04) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.why-section .container{
  position: relative;
  z-index: 2;
}

/* ============ SECTION HEADING ============ */
.why-head{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.why-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: rgba(85,200,42,.1);
  border: 1px solid rgba(85,200,42,.2);
  padding: 7px 16px;
  border-radius: 99px;
  margin-bottom: 16px;
}
.why-eyebrow i{
  color: var(--brand);
  font-size: .85rem;
}

.why-heading{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  font-weight: 800;
  color: var(--charcoal);
  margin: 0 0 14px;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.why-heading .accent{
  color: var(--brand);
  position: relative;
  display: inline-block;
}
.why-heading .accent::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 8px;
  background: rgba(85,200,42,.16);
  border-radius: 4px;
  z-index: -1;
}

.why-subheading{
  font-family: 'Inter', sans-serif;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* ============ GRID ============ */
.why-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* ==================================================================
   WHY CARD
   ================================================================== */

.why-card{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 28px 32px;
  background: #FFFFFF;
  border: 1px solid rgba(17,17,17,.06);
  border-radius: 22px;
  overflow: hidden;
  transition: all .5s cubic-bezier(.4,0,.2,1);
  box-shadow:
    0 2px 4px rgba(17,17,17,.02),
    0 12px 28px rgba(17,17,17,.05);
  min-height: 340px;
  isolation: isolate;
  cursor: default;
}

/* ---- Top gradient bar (reveals on hover) ---- */
.why-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--brand) 0%,
    var(--brand-dark) 50%,
    var(--brand) 100%);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  z-index: 3;
}

/* ---- Radial glow (behind icon) ---- */
.why-card::after{
  content: '';
  position: absolute;
  top: -100px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle,
    rgba(85,200,42,.14) 0%,
    rgba(85,200,42,.04) 40%,
    transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .55s ease;
  z-index: 0;
  pointer-events: none;
}

.why-card:hover{
  transform: translateY(-8px);
  border-color: rgba(85,200,42,.3);
  box-shadow:
    0 4px 8px rgba(17,17,17,.04),
    0 30px 60px rgba(17,17,17,.12),
    0 20px 40px rgba(85,200,42,.12);
}
.why-card:hover::before{
  transform: scaleX(1);
  animation: whyShine 2s ease-in-out infinite;
}
.why-card:hover::after{
  opacity: 1;
}

@keyframes whyShine{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

/* ============ NUMBER BADGE ============ */
.why-number{
  position: absolute;
  top: 22px;
  right: 24px;
  font-family: 'Poppins', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: rgba(17,17,17,.06);
  line-height: 1;
  letter-spacing: -.05em;
  z-index: 1;
  transition: all .5s cubic-bezier(.4,0,.2,1);
  user-select: none;
  pointer-events: none;
}
.why-card:hover .why-number{
  color: rgba(85,200,42,.22);
  transform: scale(1.1);
}

/* ============ ICON ============ */
.why-icon{
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background: linear-gradient(135deg,
    rgba(85,200,42,.12) 0%,
    rgba(85,200,42,.05) 100%);
  color: var(--brand-dark);
  border: 1.5px solid rgba(85,200,42,.18);
  margin-bottom: 24px;
  z-index: 2;
  transition: all .55s cubic-bezier(.68,-.55,.265,1.55);
  overflow: hidden;
}

.why-icon::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 0;
  border-radius: inherit;
}

.why-icon i{
  position: relative;
  z-index: 1;
  transition: transform .55s cubic-bezier(.68,-.55,.265,1.55);
  filter: drop-shadow(0 2px 4px rgba(85,200,42,.18));
}

.why-card:hover .why-icon{
  border-color: transparent;
  transform: scale(1.08) rotate(-6deg);
  box-shadow:
    0 12px 30px rgba(85,200,42,.42),
    0 0 0 4px rgba(85,200,42,.08);
}
.why-card:hover .why-icon::before{
  opacity: 1;
}
.why-card:hover .why-icon,
.why-card:hover .why-icon i{
  color: #FFFFFF;
}
.why-card:hover .why-icon i{
  transform: scale(1.1);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
}

/* ============ TITLE ============ */
.why-title{
  font-family: 'Poppins', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.3;
  letter-spacing: -.015em;
  margin: 0 0 12px;
  position: relative;
  z-index: 2;
  transition: color .35s ease;
}
.why-card:hover .why-title{
  color: var(--brand-dark);
}

/* ============ TEXT ============ */
.why-text{
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  position: relative;
  z-index: 2;
  transition: color .35s ease;
}
.why-card:hover .why-text{
  color: var(--text);
}

/* ============ CORNER ARROW ============ */
.why-corner{
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17,17,17,.03);
  color: var(--text-light);
  font-size: .85rem;
  z-index: 2;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: all .45s cubic-bezier(.68,-.55,.265,1.55);
}
.why-card:hover .why-corner{
  opacity: 1;
  transform: translate(0, 0);
  background: var(--brand);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(85,200,42,.4);
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

/* ============ LARGE DESKTOP (1200-1439px) ============ */
@media (min-width: 1200px) and (max-width: 1439px){
  .why-card{
    padding: 32px 24px 28px;
    min-height: 320px;
  }
  .why-icon{
    width: 60px;
    height: 60px;
    font-size: 1.6rem;
  }
}

/* ============ TABLET (768-991px) ============ */
@media (max-width: 991.98px){
  .why-section{ padding: 70px 0 80px; }

  .why-head{ margin-bottom: 46px; }

  .why-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .why-card{
    padding: 30px 24px 26px;
    min-height: 300px;
    border-radius: 20px;
  }

  .why-number{
    font-size: 1.9rem;
    top: 20px;
    right: 20px;
  }

  .why-icon{
    width: 58px;
    height: 58px;
    font-size: 1.5rem;
    border-radius: 16px;
    margin-bottom: 20px;
  }

  .why-title{ font-size: 1.02rem; }
  .why-text{ font-size: .87rem; }
}

/* ============ MOBILE (< 768px) ============ */
@media (max-width: 767.98px){
  .why-section{ padding: 60px 0 70px; }

  .why-head{ margin-bottom: 36px; }

  .why-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .why-card{
    padding: 26px 22px 24px;
    min-height: auto;
    border-radius: 18px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 18px;
  }

  .why-number{
    position: static;
    font-size: 1.5rem;
    color: rgba(85,200,42,.28);
    order: 1;
    flex-shrink: 0;
    transition: none;
    transform: none;
    line-height: 1;
    margin-top: 4px;
  }
  .why-card:hover .why-number{
    color: rgba(85,200,42,.4);
    transform: none;
  }

  .why-icon{
    width: 54px;
    height: 54px;
    font-size: 1.4rem;
    border-radius: 15px;
    margin-bottom: 0;
    order: 2;
    flex-shrink: 0;
  }

  .why-title,
  .why-text{
    width: 100%;
    order: 3;
  }
  .why-title{
    font-size: 1rem;
    margin-top: 18px;
    margin-bottom: 10px;
  }
  .why-text{
    font-size: .86rem;
    line-height: 1.6;
  }

  .why-corner{
    display: none;
  }

  /* Reduce hover lift on mobile */
  .why-card:hover{
    transform: translateY(-4px);
  }
}

/* ============ SMALL MOBILE (< 480px) ============ */
@media (max-width: 479.98px){
  .why-section{ padding: 50px 0 60px; }

  .why-head{ margin-bottom: 30px; }
  .why-heading{ font-size: 1.4rem; }
  .why-subheading{ font-size: .92rem; }

  .why-card{
    padding: 22px 18px 20px;
    border-radius: 16px;
    gap: 0 14px;
  }

  .why-number{
    font-size: 1.35rem;
    margin-top: 3px;
  }

  .why-icon{
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    border-radius: 13px;
  }

  .why-title{
    font-size: .95rem;
    margin-top: 14px;
    margin-bottom: 8px;
  }
  .why-text{
    font-size: .82rem;
    line-height: 1.55;
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .why-card::before{ animation: none !important; }
  .why-card,
  .why-icon,
  .why-number,
  .why-corner,
  .why-title,
  .why-text{
    transition-duration: .01ms !important;
  }
}
/* ==================================================================
   AREAS WE SERVE SECTION
   ================================================================== */

.areas-section{
  position: relative;
  padding: 90px 0 100px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F6F4 100%);
  overflow: hidden;
}

.areas-section::before{
  content: '';
  position: absolute;
  bottom: -10%;
  left: -8%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(85,200,42,.06) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.areas-section::after{
  content: '';
  position: absolute;
  top: 5%;
  right: -10%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(85,200,42,.05) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.areas-section .container{
  position: relative;
  z-index: 2;
}

/* ============ SECTION HEADING ============ */
.areas-head{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.areas-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: rgba(85,200,42,.1);
  border: 1px solid rgba(85,200,42,.2);
  padding: 7px 16px;
  border-radius: 99px;
  margin-bottom: 16px;
}
.areas-eyebrow i{
  color: var(--brand);
  font-size: .85rem;
}

.areas-heading{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  font-weight: 800;
  color: var(--charcoal);
  margin: 0 0 14px;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.areas-subheading{
  font-family: 'Inter', sans-serif;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* ============ GRID ============ */
.areas-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ==================================================================
   AREA CARD
   ================================================================== */

.area-card{
  position: relative;
  display: block;
  min-height: 340px;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: #FFFFFF;
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
  transition: transform .55s cubic-bezier(.4,0,.2,1),
              box-shadow .55s cubic-bezier(.4,0,.2,1);
  box-shadow:
    0 2px 4px rgba(17,17,17,.04),
    0 14px 36px rgba(17,17,17,.1);
  cursor: pointer;
}

.area-card::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(17,17,17,.05) 0%,
    rgba(17,17,17,.2) 35%,
    rgba(17,17,17,.8) 75%,
    rgba(17,17,17,.98) 100%);
  z-index: 1;
  transition: opacity .55s ease;
}

.area-card::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg,
    rgba(85,200,42,.45) 0%,
    rgba(49,149,26,.2) 35%,
    rgba(17,17,17,.9) 100%);
  opacity: 0;
  transition: opacity .55s ease;
  z-index: 1;
  pointer-events: none;
}

/* ---- Hover / Active state ---- */
.area-card:hover,
.area-card.is-active{
  transform: translateY(-8px);
  box-shadow:
    0 4px 8px rgba(17,17,17,.06),
    0 24px 55px rgba(17,17,17,.18),
    0 16px 35px rgba(85,200,42,.15);
}
.area-card:hover::before,
.area-card.is-active::before{ opacity: 0; }
.area-card:hover::after,
.area-card.is-active::after{ opacity: 1; }

/* ============ ICON BADGE ============ */
.ac-icon{
  position: absolute;
  top: 22px;
  left: 22px;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  color: #FFFFFF;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,.24);
  z-index: 3;
  transition: all .5s cubic-bezier(.68,-.55,.265,1.55);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.ac-icon i{
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
  transition: transform .5s cubic-bezier(.68,-.55,.265,1.55);
}
.area-card:hover .ac-icon,
.area-card.is-active .ac-icon{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-color: rgba(255,255,255,.4);
  transform: scale(1.08) rotate(-6deg);
  box-shadow:
    0 12px 28px rgba(85,200,42,.55),
    0 0 0 4px rgba(255,255,255,.12);
}
.area-card:hover .ac-icon i,
.area-card.is-active .ac-icon i{
  transform: scale(1.12);
}

/* ============ ARROW BADGE ============ */
.ac-arrow{
  position: absolute;
  top: 26px;
  right: 26px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.13);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.22);
  color: #FFFFFF;
  font-size: .88rem;
  z-index: 3;
  transition: all .5s cubic-bezier(.68,-.55,.265,1.55);
}
.area-card:hover .ac-arrow,
.area-card.is-active .ac-arrow{
  background: #FFFFFF;
  color: var(--brand-dark);
  transform: rotate(45deg) scale(1.1);
  box-shadow: 0 8px 22px rgba(255,255,255,.35);
}

/* ============ CONTENT ============ */
.ac-content{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 26px 24px 24px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ac-title{
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.ac-title .ac-state{
  color: rgba(255,255,255,.7);
  font-weight: 600;
  font-size: .85em;
}
.ac-title::after{
  content: '';
  display: block;
  width: 28px;
  height: 2.5px;
  background: var(--brand);
  border-radius: 3px;
  margin-top: 10px;
  transition: all .5s cubic-bezier(.4,0,.2,1);
}
.area-card:hover .ac-title::after,
.area-card.is-active .ac-title::after{
  width: 52px;
  background: #FFFFFF;
}

/* ---- Description ---- */
.ac-desc{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: max-height .5s cubic-bezier(.4,0,.2,1),
              opacity .4s ease,
              transform .5s cubic-bezier(.4,0,.2,1);
}
.ac-desc p{
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
  margin: 12px 0 14px;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}

.ac-link{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  color: #FFFFFF;
  letter-spacing: .02em;
  padding: 9px 16px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 9px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all .35s ease;
}
.ac-link i{
  font-size: .85rem;
  transition: transform .3s ease;
}

.area-card:hover .ac-desc,
.area-card.is-active .ac-desc{
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
}
.area-card:hover .ac-link,
.area-card.is-active .ac-link{
  background: var(--brand);
  border-color: var(--brand);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(85,200,42,.5);
}
.area-card:hover .ac-link i,
.area-card.is-active .ac-link i{
  transform: translateX(4px);
}

/* ============ VIEW ALL CTA ============ */
.areas-cta{
  text-align: center;
  margin-top: 52px;
}
.areas-cta-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  background: var(--charcoal);
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  border-radius: 12px;
  text-decoration: none;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 10px 28px rgba(17,17,17,.15);
}
.areas-cta-btn i{
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  font-size: 1rem;
}
.areas-cta-btn:hover{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(85,200,42,.4);
}
.areas-cta-btn:hover i{
  transform: translateX(5px);
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

@media (min-width: 1200px) and (max-width: 1439px){
  .area-card{ min-height: 320px; }
  .ac-title{ font-size: 1.2rem; }
}

@media (max-width: 991.98px){
  .areas-section{ padding: 70px 0 80px; }
  .areas-head{ margin-bottom: 46px; }

  .areas-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .area-card{ min-height: 300px; }

  .ac-icon{
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    border-radius: 13px;
    top: 18px;
    left: 18px;
  }
  .ac-arrow{
    width: 34px;
    height: 34px;
    top: 20px;
    right: 20px;
    font-size: .8rem;
  }
  .ac-title{ font-size: 1.15rem; }
  .ac-content{ padding: 22px 20px 20px; }
}

/* ============ MOBILE — 1 CARD ============ */
@media (max-width: 767.98px){
  .areas-section{ padding: 60px 0 70px; }
  .areas-head{ margin-bottom: 38px; }

  .areas-grid{
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 480px;
    margin: 0 auto;
  }

  .area-card{
    min-height: 320px;
    border-radius: 20px;
  }

  .ac-icon{
    width: 52px;
    height: 52px;
    font-size: 1.35rem;
    border-radius: 14px;
    top: 18px;
    left: 18px;
  }
  .ac-arrow{
    width: 36px;
    height: 36px;
    top: 22px;
    right: 22px;
    font-size: .85rem;
  }

  .ac-title{ font-size: 1.25rem; }
  .ac-desc p{
    font-size: .88rem;
    line-height: 1.55;
    margin: 12px 0 14px;
  }
  .ac-link{
    font-size: .82rem;
    padding: 9px 16px;
  }
  .ac-content{
    padding: 26px 22px 24px;
  }

  .areas-cta{ margin-top: 40px; }
  .areas-cta-btn{
    width: 100%;
    max-width: 360px;
    justify-content: center;
    padding: 14px 24px;
    font-size: .92rem;
  }
}

@media (max-width: 479.98px){
  .areas-section{ padding: 50px 0 60px; }
  .areas-head{ margin-bottom: 32px; }
  .areas-heading{ font-size: 1.4rem; }
  .areas-subheading{ font-size: .92rem; }

  .area-card{
    min-height: 280px;
    border-radius: 18px;
  }

  .ac-icon{
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
    border-radius: 12px;
    top: 16px;
    left: 16px;
  }
  .ac-arrow{
    width: 32px;
    height: 32px;
    top: 18px;
    right: 18px;
    font-size: .78rem;
  }

  .ac-title{ font-size: 1.15rem; }
  .ac-desc p{
    font-size: .84rem;
    line-height: 1.5;
    margin: 10px 0 12px;
  }
  .ac-link{
    font-size: .78rem;
    padding: 8px 14px;
  }
  .ac-content{
    padding: 22px 18px 20px;
  }
}

/* ============ TOUCH DEVICES ============ */
@media (hover: none) and (pointer: coarse){
  /* Reset hover-only effects */
  .area-card:hover{
    transform: none;
    box-shadow:
      0 2px 4px rgba(17,17,17,.04),
      0 14px 36px rgba(17,17,17,.1);
  }
  .area-card:hover::before{ opacity: 1; }
  .area-card:hover::after{ opacity: 0; }
  .area-card:hover .ac-icon{
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.24);
    transform: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
  }
  .area-card:hover .ac-arrow{
    background: rgba(255,255,255,.13);
    color: #FFFFFF;
    transform: none;
    box-shadow: none;
  }
  .area-card:hover .ac-title::after{
    width: 28px;
    background: var(--brand);
  }
  .area-card:hover .ac-desc{
    max-height: 0;
    opacity: 0;
    transform: translateY(10px);
  }
  .area-card:hover .ac-link{
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.25);
    box-shadow: none;
  }
  .area-card:hover .ac-link i{
    transform: none;
  }

  /* But :active/.is-active states stay visible */
  .area-card.is-active{
    transform: translateY(-8px);
    box-shadow:
      0 4px 8px rgba(17,17,17,.06),
      0 24px 55px rgba(17,17,17,.18),
      0 16px 35px rgba(85,200,42,.15);
  }
  .area-card.is-active::before{ opacity: 0; }
  .area-card.is-active::after{ opacity: 1; }
  .area-card.is-active .ac-icon{
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    border-color: rgba(255,255,255,.4);
    transform: scale(1.08) rotate(-6deg);
    box-shadow:
      0 12px 28px rgba(85,200,42,.55),
      0 0 0 4px rgba(255,255,255,.12);
  }
  .area-card.is-active .ac-arrow{
    background: #FFFFFF;
    color: var(--brand-dark);
    transform: rotate(45deg) scale(1.1);
    box-shadow: 0 8px 22px rgba(255,255,255,.35);
  }
  .area-card.is-active .ac-title::after{
    width: 52px;
    background: #FFFFFF;
  }
  .area-card.is-active .ac-desc{
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
  }
  .area-card.is-active .ac-link{
    background: var(--brand);
    border-color: var(--brand);
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(85,200,42,.5);
  }
  .area-card.is-active .ac-link i{
    transform: translateX(4px);
  }

  /* Base overlay darker for readability */
  .area-card::before{
    background: linear-gradient(180deg,
      rgba(17,17,17,.05) 0%,
      rgba(17,17,17,.25) 30%,
      rgba(17,17,17,.85) 75%,
      rgba(17,17,17,.98) 100%);
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .area-card,
  .area-card::before,
  .area-card::after,
  .ac-icon,
  .ac-arrow,
  .ac-title::after,
  .ac-desc,
  .ac-link,
  .ac-link i,
  .areas-cta-btn,
  .areas-cta-btn i{
    transition-duration: .01ms !important;
  }
}

/* ==================================================================
   HOW IT WORKS SECTION
   ================================================================== */

.process-section{
  position: relative;
  padding: 90px 0 100px;
  background: #FFFFFF;
  overflow: hidden;
}

/* Subtle background pattern */
.process-section::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(85,200,42,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .5;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}

.process-section::after{
  content: '';
  position: absolute;
  top: -15%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(85,200,42,.07) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.process-section .container{
  position: relative;
  z-index: 2;
}

/* ============ SECTION HEADING ============ */
.process-head{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}

.process-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: rgba(85,200,42,.1);
  border: 1px solid rgba(85,200,42,.2);
  padding: 7px 16px;
  border-radius: 99px;
  margin-bottom: 16px;
}
.process-eyebrow i{
  color: var(--brand);
  font-size: .85rem;
}

.process-heading{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  font-weight: 800;
  color: var(--charcoal);
  margin: 0 0 14px;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.process-subheading{
  font-family: 'Inter', sans-serif;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* ============ GRID ============ */
.process-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}

/* Dashed connector line (desktop only) */
.process-steps::before{
  content: '';
  position: absolute;
  top: 60px;
  left: 12%;
  right: 12%;
  height: 2px;
  background-image: linear-gradient(90deg,
    var(--border) 0%,
    var(--border) 50%,
    transparent 50%,
    transparent 100%);
  background-size: 14px 100%;
  background-repeat: repeat-x;
  z-index: 0;
  pointer-events: none;
}

/* ==================================================================
   PROCESS STEP CARD
   ================================================================== */

.process-step{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 28px 32px;
  background: #FFFFFF;
  border: 1px solid rgba(17,17,17,.06);
  border-radius: 22px;
  transition: all .5s cubic-bezier(.4,0,.2,1);
  box-shadow:
    0 2px 4px rgba(17,17,17,.02),
    0 12px 28px rgba(17,17,17,.05);
  min-height: 320px;
  isolation: isolate;
  overflow: hidden;
  cursor: default;
  z-index: 1;
}

/* Top gradient bar on hover */
.process-step::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--brand) 0%,
    var(--brand-dark) 50%,
    var(--brand) 100%);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  z-index: 3;
}

/* Radial glow behind */
.process-step::after{
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle,
    rgba(85,200,42,.16) 0%,
    rgba(85,200,42,.04) 40%,
    transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .55s ease;
  z-index: 0;
  pointer-events: none;
}

.process-step:hover{
  transform: translateY(-8px);
  border-color: rgba(85,200,42,.28);
  box-shadow:
    0 4px 8px rgba(17,17,17,.04),
    0 30px 60px rgba(17,17,17,.12),
    0 20px 40px rgba(85,200,42,.12);
}
.process-step:hover::before{
  transform: scaleX(1);
  animation: processShine 2s ease-in-out infinite;
}
.process-step:hover::after{
  opacity: 1;
}

@keyframes processShine{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

/* ============ NUMBER BADGE ============ */
.ps-number{
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-soft) 100%);
  color: var(--brand);
  font-family: 'Poppins', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.04em;
  margin-bottom: 26px;
  transition: all .55s cubic-bezier(.68,-.55,.265,1.55);
  z-index: 2;
  box-shadow:
    0 8px 20px rgba(17,17,17,.15),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.ps-number span{
  position: relative;
  z-index: 1;
}

.process-step:hover .ps-number{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #FFFFFF;
  transform: scale(1.08) rotate(-6deg);
  box-shadow:
    0 14px 32px rgba(85,200,42,.45),
    inset 0 1px 0 rgba(255,255,255,.2);
}

/* ============ ICON (Small, corner accent) ============ */
.ps-icon{
  position: absolute;
  top: 26px;
  right: 26px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--brand);
  background: rgba(85,200,42,.08);
  border: 1px solid rgba(85,200,42,.15);
  z-index: 2;
  transition: all .45s cubic-bezier(.68,-.55,.265,1.55);
}
.process-step:hover .ps-icon{
  background: rgba(85,200,42,.18);
  border-color: rgba(85,200,42,.3);
  transform: scale(1.08) rotate(8deg);
  box-shadow: 0 6px 18px rgba(85,200,42,.25);
}

/* ============ TITLE ============ */
.ps-title{
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.3;
  letter-spacing: -.015em;
  margin: 0 0 12px;
  position: relative;
  z-index: 2;
  transition: color .35s ease;
}
.process-step:hover .ps-title{
  color: var(--brand-dark);
}

/* ============ TEXT ============ */
.ps-text{
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  position: relative;
  z-index: 2;
  transition: color .35s ease;
}
.process-step:hover .ps-text{
  color: var(--text);
}

/* ============ ARROW INDICATOR ============ */
.ps-arrow{
  position: absolute;
  bottom: 26px;
  right: 26px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17,17,17,.04);
  color: var(--text-light);
  font-size: .82rem;
  z-index: 2;
  opacity: 0;
  transform: translateX(-6px);
  transition: all .45s cubic-bezier(.68,-.55,.265,1.55);
}
.process-step:hover .ps-arrow{
  opacity: 1;
  transform: translateX(0);
  background: var(--brand);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(85,200,42,.4);
}

/* Hide arrow on last step (it's the end) */
.process-step:last-child .ps-arrow{
  display: none;
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

/* ============ LARGE DESKTOP (1200-1439px) ============ */
@media (min-width: 1200px) and (max-width: 1439px){
  .process-step{
    padding: 34px 24px 28px;
    min-height: 300px;
  }
  .ps-number{
    width: 62px;
    height: 62px;
    font-size: 1.4rem;
    margin-bottom: 22px;
  }
  .ps-title{ font-size: 1.05rem; }
}

/* ============ TABLET (768-991px) ============ */
@media (max-width: 991.98px){
  .process-section{ padding: 70px 0 80px; }
  .process-head{ margin-bottom: 46px; }

  .process-steps{
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Hide connector line on tablet */
  .process-steps::before{ display: none; }

  .process-step{
    padding: 32px 24px 26px;
    min-height: 280px;
    border-radius: 20px;
  }

  .ps-number{
    width: 60px;
    height: 60px;
    font-size: 1.35rem;
    border-radius: 16px;
    margin-bottom: 22px;
  }
  .ps-icon{
    width: 36px;
    height: 36px;
    font-size: .95rem;
    top: 22px;
    right: 22px;
  }
  .ps-title{ font-size: 1.02rem; }
  .ps-text{ font-size: .86rem; }
}

/* ============ MOBILE (< 768px) ============ */
@media (max-width: 767.98px){
  .process-section{ padding: 60px 0 70px; }
  .process-head{ margin-bottom: 38px; }

  .process-steps{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .process-step{
    padding: 28px 22px 26px;
    min-height: auto;
    border-radius: 18px;
  }

  .ps-number{
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
    border-radius: 15px;
    margin-bottom: 20px;
  }
  .ps-icon{
    width: 34px;
    height: 34px;
    font-size: .9rem;
    top: 20px;
    right: 20px;
  }
  .ps-title{
    font-size: 1rem;
    margin-bottom: 10px;
    padding-right: 44px;
  }
  .ps-text{
    font-size: .86rem;
    line-height: 1.65;
  }
  .ps-arrow{ display: none; }
}

/* ============ SMALL MOBILE (< 480px) ============ */
@media (max-width: 479.98px){
  .process-section{ padding: 50px 0 60px; }
  .process-head{ margin-bottom: 32px; }
  .process-heading{ font-size: 1.4rem; }
  .process-subheading{ font-size: .92rem; }

  .process-step{
    padding: 24px 18px 22px;
    border-radius: 16px;
  }

  .ps-number{
    width: 50px;
    height: 50px;
    font-size: 1.1rem;
    border-radius: 13px;
    margin-bottom: 16px;
  }
  .ps-icon{
    width: 32px;
    height: 32px;
    font-size: .85rem;
    top: 18px;
    right: 18px;
    border-radius: 9px;
  }
  .ps-title{
    font-size: .95rem;
    padding-right: 40px;
  }
  .ps-text{
    font-size: .82rem;
    line-height: 1.6;
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .process-step::before{ animation: none !important; }
  .process-step,
  .ps-number,
  .ps-icon,
  .ps-title,
  .ps-text,
  .ps-arrow{
    transition-duration: .01ms !important;
  }
}

/* ==================================================================
   FAQ SECTION
   ================================================================== */

.faq-section{
  position: relative;
  padding: 90px 0 100px;
  background: linear-gradient(180deg, #F5F6F4 0%, #FFFFFF 100%);
  overflow: hidden;
}

/* Background accents */
.faq-section::before{
  content: '';
  position: absolute;
  top: 10%;
  left: -10%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(85,200,42,.06) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.faq-section::after{
  content: '';
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(85,200,42,.05) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.faq-section .container{
  position: relative;
  z-index: 2;
}

/* ============ WRAPPER (2-column) ============ */
.faq-wrapper{
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 60px;
  align-items: flex-start;
}

/* ==================================================================
   LEFT SIDE — HEADING
   ================================================================== */

.faq-side{
  position: sticky;
  top: 100px;
}

.faq-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: rgba(85,200,42,.1);
  border: 1px solid rgba(85,200,42,.2);
  padding: 7px 16px;
  border-radius: 99px;
  margin-bottom: 18px;
}
.faq-eyebrow i{
  color: var(--brand);
  font-size: .85rem;
}

.faq-heading{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.65rem, 2.8vw, 2.3rem);
  font-weight: 800;
  color: var(--charcoal);
  margin: 0 0 18px;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.faq-heading .accent{
  color: var(--brand);
  position: relative;
  display: inline-block;
}
.faq-heading .accent::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 10px;
  background: rgba(85,200,42,.18);
  border-radius: 5px;
  z-index: -1;
}

.faq-subheading{
  font-family: 'Inter', sans-serif;
  font-size: .98rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 32px;
}

/* ============ CTA CARD ============ */
.faq-cta-card{
  display: flex;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-soft) 100%);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 20px 45px rgba(17,17,17,.15),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.faq-cta-card::before{
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(85,200,42,.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.fcc-icon{
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(85,200,42,.35);
  position: relative;
  z-index: 1;
}

.fcc-content{
  position: relative;
  z-index: 1;
  flex: 1;
}
.fcc-content h4{
  font-family: 'Poppins', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 4px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.fcc-content p{
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  color: rgba(255,255,255,.65);
  margin: 0 0 14px;
  line-height: 1.5;
}

.fcc-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  color: var(--charcoal);
  background: var(--brand);
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 6px 18px rgba(85,200,42,.35);
}
.fcc-btn i{
  font-size: .92rem;
}
.fcc-btn:hover{
  background: #FFFFFF;
  color: var(--charcoal);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255,255,255,.2);
}

/* ==================================================================
   RIGHT SIDE — ACCORDION
   ================================================================== */

.faq-main{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-accordion{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item{
  background: #FFFFFF;
  border: 1px solid rgba(17,17,17,.07);
  border-radius: 16px;
  overflow: hidden;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  box-shadow:
    0 1px 2px rgba(17,17,17,.02),
    0 4px 12px rgba(17,17,17,.03);
  position: relative;
}

/* Green left accent (reveals when open) */
.faq-item::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  z-index: 3;
  border-radius: 0 3px 3px 0;
}

.faq-item:has(.accordion-button:not(.collapsed))::before{
  transform: scaleY(1);
}

.faq-item:hover{
  border-color: rgba(85,200,42,.3);
  box-shadow:
    0 4px 12px rgba(17,17,17,.05),
    0 12px 28px rgba(85,200,42,.08);
  transform: translateY(-2px);
}

/* ============ ACCORDION BUTTON ============ */
.faq-item .accordion-button{
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 26px;
  background: #FFFFFF;
  border: 0;
  font-family: 'Poppins', sans-serif;
  font-size: .98rem;
  font-weight: 600;
  color: var(--charcoal);
  text-align: left;
  box-shadow: none;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  position: relative;
  line-height: 1.4;
}
.faq-item .accordion-button:focus{
  box-shadow: none;
  outline: 0;
}
.faq-item .accordion-button:hover{
  background: rgba(85,200,42,.03);
}
.faq-item .accordion-button:not(.collapsed){
  color: var(--brand-dark);
  background: rgba(85,200,42,.04);
  padding-bottom: 20px;
}

/* ---- Number badge ---- */
.faq-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(85,200,42,.1) 0%, rgba(85,200,42,.04) 100%);
  border: 1px solid rgba(85,200,42,.18);
  color: var(--brand-dark);
  font-family: 'Poppins', sans-serif;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: -.02em;
  flex-shrink: 0;
  transition: all .45s cubic-bezier(.68,-.55,.265,1.55);
  position: relative;
  overflow: hidden;
}
.faq-number::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  opacity: 0;
  transition: opacity .35s ease;
  border-radius: inherit;
}
.faq-number{
  z-index: 1;
}
.faq-item .accordion-button:hover .faq-number,
.faq-item .accordion-button:not(.collapsed) .faq-number{
  border-color: transparent;
  color: #FFFFFF;
  transform: scale(1.05) rotate(-4deg);
  box-shadow: 0 8px 20px rgba(85,200,42,.35);
}
.faq-item .accordion-button:hover .faq-number::before,
.faq-item .accordion-button:not(.collapsed) .faq-number::before{
  opacity: 1;
}

/* ---- Question text ---- */
.faq-question{
  flex: 1;
  min-width: 0;
}

/* ---- Toggle icon (+ / −) ---- */
.faq-toggle-icon{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17,17,17,.04);
  color: var(--charcoal);
  font-size: .85rem;
  flex-shrink: 0;
  transition: all .45s cubic-bezier(.68,-.55,.265,1.55);
  position: relative;
  overflow: hidden;
}
.faq-toggle-icon i{
  transition: transform .45s cubic-bezier(.68,-.55,.265,1.55);
  font-weight: 900;
  position: relative;
  z-index: 1;
}
.faq-item .accordion-button:hover .faq-toggle-icon{
  background: rgba(85,200,42,.12);
  color: var(--brand-dark);
}
.faq-item .accordion-button:not(.collapsed) .faq-toggle-icon{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #FFFFFF;
  transform: rotate(180deg) scale(1.05);
  box-shadow: 0 6px 18px rgba(85,200,42,.35);
}
.faq-item .accordion-button:not(.collapsed) .faq-toggle-icon i{
  transform: rotate(-45deg);
}

/* Hide Bootstrap's default arrow */
.faq-item .accordion-button::after{
  display: none !important;
}

/* ============ ACCORDION BODY ============ */
.faq-item .accordion-body{
  padding: 0 26px 24px 84px;
  background: rgba(85,200,42,.02);
}

.faq-answer{
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--text);
  padding-top: 4px;
  position: relative;
}

/* Subtle green vertical line before answer */
.faq-answer::before{
  content: '';
  position: absolute;
  left: -28px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand) 0%, transparent 100%);
  border-radius: 2px;
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

/* ============ LARGE DESKTOP (1200-1439px) ============ */
@media (min-width: 1200px) and (max-width: 1439px){
  .faq-wrapper{
    grid-template-columns: 340px 1fr;
    gap: 50px;
  }
}

/* ============ TABLET (768-991px) ============ */
@media (max-width: 991.98px){
  .faq-section{ padding: 70px 0 80px; }

  .faq-wrapper{
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .faq-side{
    position: static;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
  }
  .faq-heading{
    font-size: 2rem;
    margin-bottom: 16px;
  }
  .faq-subheading{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 26px;
  }

  .faq-cta-card{
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
  }

  .faq-item .accordion-button{
    padding: 20px 22px;
    font-size: .95rem;
    gap: 14px;
  }
  .faq-number{
    min-width: 38px;
    height: 38px;
    font-size: .8rem;
    border-radius: 11px;
  }
  .faq-toggle-icon{
    width: 32px;
    height: 32px;
    font-size: .8rem;
  }
  .faq-item .accordion-body{
    padding: 0 22px 22px 74px;
  }
}

/* ============ MOBILE (< 768px) ============ */
@media (max-width: 767.98px){
  .faq-section{ padding: 60px 0 70px; }

  .faq-wrapper{ gap: 32px; }

  .faq-heading{ font-size: 1.7rem; }
  .faq-subheading{ font-size: .93rem; }

  .faq-cta-card{
    padding: 20px;
    gap: 14px;
    max-width: 100%;
  }
  .fcc-icon{
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    border-radius: 12px;
  }
  .fcc-content h4{ font-size: .98rem; }
  .fcc-content p{ font-size: .78rem; margin-bottom: 12px; }
  .fcc-btn{
    font-size: .8rem;
    padding: 9px 16px;
  }

  .faq-item .accordion-button{
    padding: 18px 18px;
    font-size: .92rem;
    gap: 12px;
  }
  .faq-number{
    min-width: 34px;
    height: 34px;
    font-size: .75rem;
    border-radius: 10px;
  }
  .faq-toggle-icon{
    width: 30px;
    height: 30px;
    font-size: .78rem;
  }
  .faq-item .accordion-body{
    padding: 0 18px 20px 64px;
  }
  .faq-answer{
    font-size: .88rem;
    line-height: 1.7;
  }
  .faq-answer::before{
    left: -22px;
  }
}

/* ============ SMALL MOBILE (< 480px) ============ */
@media (max-width: 479.98px){
  .faq-section{ padding: 50px 0 60px; }
  .faq-wrapper{ gap: 26px; }

  .faq-heading{ font-size: 1.45rem; }
  .faq-subheading{ font-size: .88rem; margin-bottom: 22px; }

  .faq-cta-card{ padding: 18px; }
  .fcc-icon{ width: 40px; height: 40px; font-size: 1.1rem; }
  .fcc-content h4{ font-size: .9rem; }
  .fcc-content p{ font-size: .74rem; }
  .fcc-btn{ font-size: .76rem; padding: 8px 14px; }

  .faq-item .accordion-button{
    padding: 16px 14px;
    font-size: .86rem;
    gap: 10px;
  }
  .faq-number{
    min-width: 30px;
    height: 30px;
    font-size: .7rem;
    border-radius: 9px;
  }
  .faq-toggle-icon{
    width: 28px;
    height: 28px;
    font-size: .72rem;
  }
  .faq-item .accordion-body{
    padding: 0 14px 18px 54px;
  }
  .faq-answer{
    font-size: .84rem;
    line-height: 1.65;
  }
  .faq-answer::before{
    left: -18px;
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .faq-item,
  .faq-item::before,
  .faq-item .accordion-button,
  .faq-number,
  .faq-number::before,
  .faq-toggle-icon,
  .faq-toggle-icon i{
    transition-duration: .01ms !important;
  }
}

/* ==================================================================
   CTA SECTION
   ================================================================== */

.cta-section{
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  isolation: isolate;
  background: #0A0A0A;
}

/* ============ BACKGROUND IMAGE ============ */
.cta-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cta-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.05);
  transition: transform 8s ease-out;
}
.cta-section:hover .cta-bg img{
  transform: scale(1);
}

/* ============ OVERLAY ============ */
.cta-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg,
      rgba(10,10,10,.94) 0%,
      rgba(17,17,17,.85) 40%,
      rgba(17,17,17,.7) 70%,
      rgba(17,17,17,.85) 100%);
}

/* Radial green accents */
.cta-overlay::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(85,200,42,.18) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(85,200,42,.12) 0%, transparent 50%);
  pointer-events: none;
}

/* Subtle dot pattern */
.cta-overlay::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .8;
  pointer-events: none;
}

/* ============ CONTAINER ============ */
.cta-container{
  position: relative;
  z-index: 2;
}

.cta-inner{
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* ============ BADGE ============ */
.cta-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: rgba(85,200,42,.15);
  border: 1px solid rgba(85,200,42,.32);
  color: #7FE058;
  font-family: 'Inter', sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 99px;
  margin-bottom: 26px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(85,200,42,.15);
}
.cta-badge i{
  color: #55C82A;
  font-size: .95rem;
  animation: ctaPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(85,200,42,.7));
}
@keyframes ctaPulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.15); }
}

/* ============ HEADING ============ */
.cta-heading{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.12;
  letter-spacing: -.035em;
  margin: 0 0 22px;
  text-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.cta-heading .accent{
  color: #55C82A;
  position: relative;
  display: inline-block;
}
.cta-heading .accent::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 12px;
  background: rgba(85,200,42,.22);
  border-radius: 6px;
  z-index: -1;
}

/* ============ SUBTEXT ============ */
.cta-subtext{
  font-family: 'Inter', sans-serif;
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  margin: 0 auto 40px;
  max-width: 620px;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}

/* ============ ACTION BUTTONS ============ */
.cta-actions{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 46px;
}

.cta-btn-primary,
.cta-btn-secondary{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 34px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .01em;
  border-radius: 14px;
  text-decoration: none;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* ---- Primary Button ---- */
.cta-btn-primary{
  background: linear-gradient(135deg, #55C82A 0%, #31951A 100%);
  color: #FFFFFF;
  border: 0;
  box-shadow:
    0 12px 32px rgba(85,200,42,.45),
    0 0 0 0 rgba(85,200,42,.5);
}
.cta-btn-primary::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transition: left .75s ease;
}
.cta-btn-primary:hover{
  transform: translateY(-4px);
  box-shadow:
    0 22px 55px rgba(85,200,42,.6),
    0 0 0 6px rgba(85,200,42,.12);
  color: #FFFFFF;
}
.cta-btn-primary:hover::before{
  left: 100%;
}
.cta-btn-primary i{
  font-size: 1.15rem;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.15));
}

/* ---- Secondary Button ---- */
.cta-btn-secondary{
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.28);
  color: #FFFFFF;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.cta-btn-secondary:hover{
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.6);
  transform: translateY(-4px);
  color: #FFFFFF;
  box-shadow: 0 16px 40px rgba(255,255,255,.12);
}
.cta-btn-secondary i{
  font-size: 1.08rem;
}

/* ============ TRUST SIGNALS ============ */
.cta-trust{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cta-trust li{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  transition: color .3s ease;
}
.cta-trust li:hover{
  color: #FFFFFF;
}
.cta-trust i{
  color: #55C82A;
  font-size: 1rem;
  filter: drop-shadow(0 0 6px rgba(85,200,42,.5));
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

/* ============ LARGE DESKTOP (1200-1439px) ============ */
@media (min-width: 1200px) and (max-width: 1439px){
  .cta-section{ padding: 100px 0; }
  .cta-heading{ font-size: 2.8rem; }
}

/* ============ TABLET (768-991px) ============ */
@media (max-width: 991.98px){
  .cta-section{ padding: 90px 0; }

  .cta-heading{
    font-size: 2.3rem;
    margin-bottom: 18px;
  }
  .cta-subtext{
    font-size: 1rem;
    margin-bottom: 34px;
  }

  .cta-btn-primary,
  .cta-btn-secondary{
    padding: 16px 28px;
    font-size: .95rem;
  }

  .cta-actions{ margin-bottom: 38px; }
}

/* ============ MOBILE (< 768px) ============ */
@media (max-width: 767.98px){
  .cta-section{ padding: 80px 0; }

  .cta-bg img{
    object-position: 70% center;
  }

  .cta-overlay{
    background:
      linear-gradient(180deg,
        rgba(10,10,10,.92) 0%,
        rgba(17,17,17,.88) 45%,
        rgba(17,17,17,.94) 100%);
  }

  .cta-badge{
    font-size: .7rem;
    padding: 8px 16px;
    margin-bottom: 22px;
  }

  .cta-heading{
    font-size: clamp(1.75rem, 6vw, 2.1rem);
    margin-bottom: 18px;
    line-height: 1.15;
  }
  .cta-heading .accent::after{
    height: 8px;
    bottom: 2px;
  }

  .cta-subtext{
    font-size: .96rem;
    line-height: 1.65;
    margin-bottom: 30px;
  }

  .cta-actions{
    flex-direction: column;
    gap: 12px;
    margin-bottom: 34px;
  }
  .cta-btn-primary,
  .cta-btn-secondary{
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: .95rem;
    border-radius: 12px;
  }

  .cta-trust{
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .cta-trust li{
    font-size: .86rem;
  }
}

/* ============ SMALL MOBILE (< 480px) ============ */
@media (max-width: 479.98px){
  .cta-section{ padding: 65px 0; }

  .cta-badge{
    font-size: .66rem;
    padding: 7px 14px;
    letter-spacing: .12em;
  }
  .cta-badge i{ font-size: .85rem; }

  .cta-heading{
    font-size: 1.6rem;
    margin-bottom: 16px;
    letter-spacing: -.03em;
  }

  .cta-subtext{
    font-size: .92rem;
    margin-bottom: 26px;
  }

  .cta-actions{ margin-bottom: 30px; }

  .cta-btn-primary,
  .cta-btn-secondary{
    padding: 15px 20px;
    font-size: .92rem;
  }
  .cta-btn-primary i,
  .cta-btn-secondary i{
    font-size: 1rem;
  }

  .cta-trust li{
    font-size: .82rem;
  }
  .cta-trust i{ font-size: .92rem; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .cta-badge i{ animation: none !important; }
  .cta-bg img,
  .cta-btn-primary,
  .cta-btn-secondary,
  .cta-btn-primary::before{
    transition-duration: .01ms !important;
  }
}

/* ==================================================================
   CHATBOT WIDGET
   ================================================================== */

.chatbot-widget{
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1050;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==================================================================
   TOGGLE BUTTON
   ================================================================== */

.chatbot-toggle{
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #55C82A 0%, #31951A 100%);
  color: #FFFFFF;
  cursor: pointer;
  box-shadow:
    0 12px 32px rgba(85,200,42,.45),
    0 4px 12px rgba(17,17,17,.12);
  transition: all .4s cubic-bezier(.68,-.55,.265,1.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 0;
}
.chatbot-toggle:hover{
  transform: translateY(-4px) scale(1.05);
  box-shadow:
    0 20px 48px rgba(85,200,42,.55),
    0 8px 20px rgba(17,17,17,.15);
}
.chatbot-toggle:focus-visible{
  outline: 3px solid rgba(85,200,42,.4);
  outline-offset: 4px;
}

/* Icon swap */
.cb-toggle-icon{
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cb-toggle-icon i{
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all .35s cubic-bezier(.68,-.55,.265,1.55);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.cb-icon-close{
  opacity: 0;
  transform: rotate(-90deg) scale(.5);
}
.chatbot-widget.is-open .cb-icon-chat{
  opacity: 0;
  transform: rotate(90deg) scale(.5);
}
.chatbot-widget.is-open .cb-icon-close{
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* Pulse ring around button */
.cb-toggle-pulse{
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(85,200,42,.6);
  animation: cbPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes cbPulse{
  0%{
    transform: scale(.9);
    opacity: .8;
  }
  70%{
    transform: scale(1.35);
    opacity: 0;
  }
  100%{
    transform: scale(1.35);
    opacity: 0;
  }
}
.chatbot-widget.is-open .cb-toggle-pulse{
  display: none;
}

/* Badge */
.chatbot-badge{
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 99px;
  background: #FF3B30;
  color: #FFFFFF;
  font-size: .7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
  box-shadow: 0 4px 12px rgba(255,59,48,.4);
  animation: cbBadgeBounce 2s ease-in-out infinite;
}
@keyframes cbBadgeBounce{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}
.chatbot-widget.is-open .chatbot-badge{
  display: none;
}

/* ==================================================================
   CHAT PANEL
   ================================================================== */

.chatbot-panel{
  position: absolute;
  bottom: 84px;
  right: 0;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 120px);
  background: #FFFFFF;
  border-radius: 22px;
  box-shadow:
    0 30px 80px rgba(17,17,17,.22),
    0 8px 24px rgba(17,17,17,.12),
    0 0 0 1px rgba(17,17,17,.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  animation: cbPanelIn .45s cubic-bezier(.68,-.55,.265,1.55);
}
@keyframes cbPanelIn{
  from{
    opacity: 0;
    transform: scale(.85) translateY(20px);
  }
  to{
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ============ HEADER ============ */
.chatbot-header{
  position: relative;
  padding: 20px 22px;
  background: linear-gradient(135deg, #111111 0%, #1A1A1A 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.chatbot-header::before{
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(85,200,42,.3) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.chatbot-header::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #55C82A 0%, #31951A 50%, #55C82A 100%);
  background-size: 200% 100%;
  animation: cbHeaderLine 3s linear infinite;
}
@keyframes cbHeaderLine{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

.cb-header-brand{
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.cb-avatar{
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #55C82A 0%, #31951A 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #FFFFFF;
  flex-shrink: 0;
  box-shadow:
    0 8px 20px rgba(85,200,42,.4),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.cb-avatar i{
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

.cb-status{
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #55C82A;
  border: 2.5px solid #111111;
  box-shadow: 0 0 8px rgba(85,200,42,.8);
  animation: cbStatusPulse 2s ease-in-out infinite;
}
@keyframes cbStatusPulse{
  0%, 100%{ box-shadow: 0 0 8px rgba(85,200,42,.8); }
  50%{ box-shadow: 0 0 16px rgba(85,200,42,1); }
}

.cb-header-text{
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cb-header-text strong{
  font-family: 'Poppins', sans-serif;
  font-size: .98rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-header-text small{
  font-size: .74rem;
  color: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.cb-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #55C82A;
  display: inline-block;
  animation: cbDotBlink 1.8s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(85,200,42,.8);
}
@keyframes cbDotBlink{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .4; }
}

.cb-header-close{
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  background: rgba(255,255,255,.08);
  color: #FFFFFF;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s cubic-bezier(.68,-.55,.265,1.55);
  flex-shrink: 0;
}
.cb-header-close:hover{
  background: rgba(85,200,42,.25);
  transform: rotate(90deg);
}
.cb-header-close:focus-visible{
  outline: 2px solid #55C82A;
  outline-offset: 2px;
}

/* ============ MESSAGES AREA ============ */
.chatbot-messages{
  flex: 1;
  overflow-y: auto;
  padding: 22px 20px;
  background:
    radial-gradient(circle at 20% 10%, rgba(85,200,42,.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(85,200,42,.03) 0%, transparent 40%),
    linear-gradient(180deg, #FAFBFA 0%, #F5F6F4 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}

/* Custom scrollbar */
.chatbot-messages::-webkit-scrollbar{
  width: 6px;
}
.chatbot-messages::-webkit-scrollbar-track{
  background: transparent;
}
.chatbot-messages::-webkit-scrollbar-thumb{
  background: rgba(85,200,42,.25);
  border-radius: 3px;
}
.chatbot-messages::-webkit-scrollbar-thumb:hover{
  background: rgba(85,200,42,.5);
}

/* Chat message */
.chat-msg{
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: .9rem;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-line;
  animation: cbMsgIn .4s cubic-bezier(.4,0,.2,1);
  position: relative;
}
@keyframes cbMsgIn{
  from{
    opacity: 0;
    transform: translateY(10px) scale(.95);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Bot message */
.chat-msg.bot{
  align-self: flex-start;
  background: #FFFFFF;
  color: #374151;
  border: 1px solid rgba(17,17,17,.06);
  border-bottom-left-radius: 4px;
  box-shadow:
    0 2px 4px rgba(17,17,17,.03),
    0 4px 12px rgba(17,17,17,.04);
  font-family: 'Inter', sans-serif;
}

/* User message */
.chat-msg.user{
  align-self: flex-end;
  background: linear-gradient(135deg, #55C82A 0%, #31951A 100%);
  color: #FFFFFF;
  border-bottom-right-radius: 4px;
  box-shadow:
    0 4px 12px rgba(85,200,42,.3),
    0 2px 4px rgba(85,200,42,.15);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

/* Typing indicator */
.cb-typing{
  align-self: flex-start;
  padding: 14px 18px;
  background: #FFFFFF;
  border: 1px solid rgba(17,17,17,.06);
  border-bottom-left-radius: 4px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow:
    0 2px 4px rgba(17,17,17,.03),
    0 4px 12px rgba(17,17,17,.04);
  animation: cbMsgIn .4s cubic-bezier(.4,0,.2,1);
}
.cb-typing span{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55C82A;
  display: inline-block;
  animation: cbTypingBounce 1.4s infinite ease-in-out;
}
.cb-typing span:nth-child(2){ animation-delay: .15s; }
.cb-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes cbTypingBounce{
  0%, 60%, 100%{
    transform: translateY(0);
    opacity: .4;
  }
  30%{
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* ============ QUICK REPLIES ============ */
.cb-quick-replies{
  padding: 12px 16px;
  background: #FFFFFF;
  border-top: 1px solid rgba(17,17,17,.06);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.cb-quick-replies::-webkit-scrollbar{
  display: none;
}

.cb-quick-btn{
  flex-shrink: 0;
  padding: 8px 14px;
  background: rgba(85,200,42,.08);
  border: 1px solid rgba(85,200,42,.18);
  color: #31951A;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 99px;
  cursor: pointer;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
}
.cb-quick-btn:hover{
  background: linear-gradient(135deg, #55C82A 0%, #31951A 100%);
  border-color: transparent;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(85,200,42,.3);
}
.cb-quick-btn:active{
  transform: translateY(0);
}

/* ============ INPUT FORM ============ */
.chatbot-form{
  padding: 14px 16px 12px;
  background: #FFFFFF;
  border-top: 1px solid rgba(17,17,17,.06);
  flex-shrink: 0;
}

.cb-input-wrap{
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F5F6F4;
  border: 1.5px solid rgba(17,17,17,.06);
  border-radius: 14px;
  padding: 4px 4px 4px 16px;
  transition: all .3s ease;
}
.cb-input-wrap:focus-within{
  border-color: #55C82A;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(85,200,42,.12);
}

#chatbot-input{
  flex: 1;
  border: 0;
  background: transparent;
  padding: 12px 0;
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  color: #374151;
  outline: 0;
  min-width: 0;
}
#chatbot-input::placeholder{
  color: #9CA3AF;
}

.cb-send-btn{
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border: 0;
  background: linear-gradient(135deg, #55C82A 0%, #31951A 100%);
  color: #FFFFFF;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s cubic-bezier(.68,-.55,.265,1.55);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(85,200,42,.35);
}
.cb-send-btn:hover{
  transform: scale(1.08) rotate(-8deg);
  box-shadow: 0 8px 20px rgba(85,200,42,.5);
}
.cb-send-btn:active{
  transform: scale(.95);
}
.cb-send-btn:focus-visible{
  outline: 2px solid #55C82A;
  outline-offset: 2px;
}

.cb-footer-text{
  margin-top: 10px;
  text-align: center;
  font-size: .68rem;
  color: #9CA3AF;
  font-family: 'Inter', sans-serif;
}
.cb-footer-text strong{
  color: #6B7280;
  font-weight: 600;
}
.cb-footer-text a{
  color: #31951A;
  font-weight: 600;
  text-decoration: none;
}
.cb-footer-text a:hover{
  text-decoration: underline;
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

/* ============ TABLET ============ */
@media (max-width: 991.98px){
  .chatbot-panel{
    width: 360px;
    height: 560px;
  }
}

/* ============ MOBILE ============ */
@media (max-width: 767.98px){
  .chatbot-widget{
    bottom: 16px;
    right: 16px;
  }
  .chatbot-toggle{
    width: 58px;
    height: 58px;
  }
  .cb-toggle-icon i{ font-size: 1.35rem; }

  .chatbot-panel{
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    animation: cbPanelMobileIn .4s cubic-bezier(.4,0,.2,1);
  }
  @keyframes cbPanelMobileIn{
    from{ opacity: 0; transform: translateY(30px); }
    to{ opacity: 1; transform: translateY(0); }
  }

  .chatbot-header{
    padding: 16px 18px;
    padding-top: max(16px, env(safe-area-inset-top));
  }
  .cb-avatar{
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
    border-radius: 13px;
  }
  .cb-header-text strong{ font-size: .92rem; }
  .cb-header-text small{ font-size: .7rem; }
  .cb-header-close{
    width: 34px;
    height: 34px;
  }

  .chatbot-messages{
    padding: 18px 16px;
  }

  .cb-quick-replies{
    padding: 10px 14px;
  }
  .cb-quick-btn{
    font-size: .74rem;
    padding: 7px 12px;
  }

  .chatbot-form{
    padding: 12px 14px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  #chatbot-input{ font-size: .88rem; }
  .cb-send-btn{
    width: 40px;
    height: 40px;
  }
}

/* ============ SMALL MOBILE ============ */
@media (max-width: 479.98px){
  .chatbot-toggle{
    width: 54px;
    height: 54px;
  }
  .cb-toggle-icon i{ font-size: 1.25rem; }
  .chatbot-badge{
    min-width: 20px;
    height: 20px;
    font-size: .66rem;
  }

  .chat-msg{
    font-size: .86rem;
    padding: 11px 14px;
    max-width: 88%;
  }

  .cb-footer-text{
    font-size: .62rem;
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .cb-toggle-pulse,
  .chatbot-badge,
  .chatbot-header::after,
  .cb-status,
  .cb-dot,
  .cb-typing span{
    animation: none !important;
  }
  .chatbot-panel,
  .chat-msg,
  .cb-typing{
    animation-duration: .01ms !important;
  }
}

.page-hero{
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: #0A0A0A;
  text-align: center;
}

/* ---------- Background Image ---------- */
.page-hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.page-hero-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  animation: pageHeroZoom 20s ease-out forwards;
}
@keyframes pageHeroZoom{
  from{ transform: scale(1.08); }
  to{ transform: scale(1); }
}

/* ---------- Overlay ---------- */
.page-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(10,10,10,.92) 0%,
      rgba(17,17,17,.85) 40%,
      rgba(17,17,17,.85) 60%,
      rgba(10,10,10,.94) 100%);
  pointer-events: none;
}
.page-hero-overlay::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(85,200,42,.18) 0%, transparent 45%),
    radial-gradient(circle at 70% 75%, rgba(85,200,42,.12) 0%, transparent 50%);
}
.page-hero-overlay::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .7;
}

/* ---------- Container ---------- */
.page-hero-container{
  position: relative;
  z-index: 2;
  padding-top: 80px;
  padding-bottom: 80px;
  width: 100%;
}

.page-hero-content{
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- Breadcrumb ---------- */
.page-hero .breadcrumb-nav{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 99px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
  margin-bottom: 24px;
  transition: all .35s ease;
}
.page-hero .breadcrumb-nav:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(85,200,42,.35);
}
.page-hero .breadcrumb-nav a{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  transition: color .3s ease;
}
.page-hero .breadcrumb-nav a:hover{
  color: #55C82A;
}
.page-hero .breadcrumb-nav a i{
  font-size: .8rem;
  color: #55C82A;
}
.page-hero .breadcrumb-nav .sep{
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,.35);
  font-size: .65rem;
}
.page-hero .breadcrumb-nav .current{
  color: #55C82A;
  font-weight: 600;
  letter-spacing: .01em;
}

/* ---------- Title ---------- */
.page-hero-title{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
  letter-spacing: -.035em;
  margin: 0 0 24px;
  text-shadow: 0 4px 24px rgba(0,0,0,.45);
  text-align: center;
}
.page-hero-title .accent{
  color: #55C82A;
  position: relative;
  display: inline-block;
}
.page-hero-title .accent::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 12px;
  background: rgba(85,200,42,.22);
  border-radius: 6px;
  z-index: -1;
}

/* ---------- Decorative Divider ---------- */
.page-hero-divider{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 22px;
  width: 100%;
  max-width: 300px;
}
.page-hero-divider span{
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(85,200,42,.5) 50%,
    transparent 100%);
  border-radius: 2px;
}
.page-hero-divider span:first-child{
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(85,200,42,.5) 100%);
}
.page-hero-divider span:last-child{
  background: linear-gradient(90deg,
    rgba(85,200,42,.5) 0%,
    transparent 100%);
}
.page-hero-divider i{
  color: #55C82A;
  font-size: 1rem;
  filter: drop-shadow(0 0 10px rgba(85,200,42,.6));
  animation: dividerPulse 2.4s ease-in-out infinite;
}
@keyframes dividerPulse{
  0%, 100%{ transform: scale(1); opacity: .9; }
  50%{ transform: scale(1.15); opacity: 1; }
}

/* ---------- Subtitle ---------- */
.page-hero-sub{
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  margin: 0 auto;
  max-width: 620px;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
  text-align: center;
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

@media (max-width: 991.98px){
  .page-hero{ min-height: 380px; }
  .page-hero-container{
    padding-top: 70px;
    padding-bottom: 70px;
  }
  .page-hero-title{ font-size: 2.3rem; }
  .page-hero-sub{ font-size: 1.02rem; }
}

@media (max-width: 767.98px){
  .page-hero{ min-height: 340px; }
  .page-hero-bg img{
    object-position: center 30%;
    animation: none;
  }
  .page-hero-overlay{
    background:
      linear-gradient(180deg,
        rgba(10,10,10,.9) 0%,
        rgba(17,17,17,.88) 50%,
        rgba(10,10,10,.94) 100%);
  }
  .page-hero-container{
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .page-hero .breadcrumb-nav{
    font-size: .74rem;
    padding: 8px 16px;
    margin-bottom: 18px;
    gap: 8px;
  }
  .page-hero-title{
    font-size: clamp(1.7rem, 7vw, 2.1rem);
    margin-bottom: 18px;
  }
  .page-hero-title .accent::after{
    height: 9px;
    bottom: 2px;
  }
  .page-hero-divider{
    gap: 12px;
    margin-bottom: 18px;
    max-width: 240px;
  }
  .page-hero-sub{
    font-size: .96rem;
    line-height: 1.6;
  }
}

@media (max-width: 479.98px){
  .page-hero{ min-height: 320px; }
  .page-hero-container{
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .page-hero .breadcrumb-nav{
    font-size: .7rem;
    padding: 7px 14px;
    gap: 7px;
  }
  .page-hero-title{
    font-size: 1.55rem;
    letter-spacing: -.03em;
    margin-bottom: 16px;
  }
  .page-hero-divider{
    gap: 10px;
    margin-bottom: 16px;
    max-width: 200px;
  }
  .page-hero-divider i{ font-size: .9rem; }
  .page-hero-sub{
    font-size: .9rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-hero-bg img,
  .page-hero-divider i{
    animation: none !important;
  }
}

/* ==================================================================
   ABOUT CONTENT SECTION
   ================================================================== */

.about-content-section{
  position: relative;
  padding: 90px 0 100px;
  background: #FFFFFF;
  overflow: hidden;
}
.about-content-section::before{
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(85,200,42,.05) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.about-content-section .container{
  position: relative;
  z-index: 2;
}

/* ============ FEATURED IMAGE ============ */
.about-feature-image{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 42px;
  box-shadow:
    0 4px 8px rgba(17,17,17,.06),
    0 24px 60px rgba(17,17,17,.15);
}
.about-feature-image img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .8s cubic-bezier(.4,0,.2,1);
}
.about-feature-image:hover img{
  transform: scale(1.04);
}
.about-feature-image::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(17,17,17,0) 40%,
    rgba(17,17,17,.65) 100%);
  pointer-events: none;
  z-index: 1;
}

.afi-badge{
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  padding: 16px 20px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 16px;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
}
.afi-badge i{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #55C82A 0%, #31951A 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(85,200,42,.4);
}
.afi-badge strong{
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: .98rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
  margin-bottom: 3px;
}
.afi-badge small{
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  color: rgba(255,255,255,.8);
  line-height: 1.2;
}

/* ============ ARTICLE BODY ============ */
.about-body{ position: relative; }

.about-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #31951A;
  background: rgba(85,200,42,.1);
  border: 1px solid rgba(85,200,42,.2);
  padding: 7px 16px;
  border-radius: 99px;
  margin-bottom: 18px;
}
.about-eyebrow i{
  color: #55C82A;
  font-size: .85rem;
}

.about-h2{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 800;
  color: #111111;
  letter-spacing: -.025em;
  line-height: 1.25;
  margin: 0 0 20px;
  position: relative;
  padding-left: 20px;
}
.about-h2::before{
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  background: linear-gradient(180deg, #55C82A 0%, #31951A 100%);
  border-radius: 3px;
}
.about-h2.mt-5{ margin-top: 48px !important; }

.about-body p{
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: #374151;
  margin: 0 0 18px;
}
.about-body p strong{
  color: #111111;
  font-weight: 600;
}

/* ============ FEATURE CARDS GRID ============ */
.about-features-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 32px 0 8px;
}

.about-feature-card{
  position: relative;
  padding: 26px 24px 24px 88px;
  background: linear-gradient(135deg, #FAFBFA 0%, #F5F6F4 100%);
  border: 1px solid rgba(17,17,17,.06);
  border-left: 3px solid #55C82A;
  border-radius: 14px;
  transition: all .4s cubic-bezier(.4,0,.2,1);
}
.about-feature-card:hover{
  transform: translateX(4px);
  border-left-color: #31951A;
  box-shadow:
    0 8px 24px rgba(17,17,17,.06),
    0 4px 12px rgba(85,200,42,.1);
  background: linear-gradient(135deg, #FFFFFF 0%, #FAFBFA 100%);
}

.afc-icon{
  position: absolute;
  top: 24px;
  left: 24px;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: linear-gradient(135deg, #55C82A 0%, #31951A 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 6px 16px rgba(85,200,42,.32);
  transition: all .4s cubic-bezier(.68,-.55,.265,1.55);
}
.about-feature-card:hover .afc-icon{
  transform: scale(1.08) rotate(-6deg);
  box-shadow: 0 10px 24px rgba(85,200,42,.45);
}

.about-feature-card h3{
  font-family: 'Poppins', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: #111111;
  letter-spacing: -.015em;
  line-height: 1.3;
  margin: 0 0 10px;
}
.about-feature-card p{
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  line-height: 1.7;
  color: #6B7280;
  margin: 0;
}

/* ==================================================================
   SIDEBAR
   ================================================================== */

.about-sidebar{
  position: sticky;
  top: 100px;
}

.sidebar-card-pro{
  background: #FFFFFF;
  border: 1px solid rgba(17,17,17,.07);
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow:
    0 2px 4px rgba(17,17,17,.02),
    0 12px 32px rgba(17,17,17,.06);
  position: relative;
  overflow: hidden;
}
.sidebar-card-pro::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #55C82A 0%, #31951A 50%, #55C82A 100%);
  background-size: 200% 100%;
  animation: sbShine 4s linear infinite;
}
@keyframes sbShine{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

.scp-header{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(17,17,17,.07);
}
.scp-header-icon{
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: linear-gradient(135deg, #111111 0%, #1A1A1A 100%);
  color: #55C82A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(17,17,17,.2);
}
.scp-header h4{
  font-family: 'Poppins', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: #111111;
  margin: 0 0 3px;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.scp-header p{
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  color: #6B7280;
  margin: 0;
  line-height: 1.3;
}

/* ---------- Contact List ---------- */
.contact-list-pro{
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-list-pro li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.clp-icon{
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(85,200,42,.08);
  border: 1px solid rgba(85,200,42,.16);
  color: #31951A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
  transition: all .35s cubic-bezier(.68,-.55,.265,1.55);
}
.contact-list-pro li:hover .clp-icon{
  background: linear-gradient(135deg, #55C82A 0%, #31951A 100%);
  border-color: transparent;
  color: #FFFFFF;
  transform: scale(1.08) rotate(-6deg);
  box-shadow: 0 6px 16px rgba(85,200,42,.35);
}
.contact-list-pro li > div{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 2px;
}
.contact-list-pro small{
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9CA3AF;
  line-height: 1.2;
}
.contact-list-pro a,
.contact-list-pro span{
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  line-height: 1.5;
  transition: color .25s ease;
  word-break: break-word;
}
.contact-list-pro a:hover{ color: #31951A; }

/* ---------- Primary Button ---------- */
.btn-pro-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #55C82A 0%, #31951A 100%);
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  border-radius: 12px;
  text-decoration: none;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 8px 24px rgba(85,200,42,.32);
  position: relative;
  overflow: hidden;
}
.btn-pro-primary::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: left .7s ease;
}
.btn-pro-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(85,200,42,.5);
  color: #FFFFFF;
}
.btn-pro-primary:hover::before{ left: 100%; }
.btn-pro-primary i{ font-size: 1.05rem; }

/* ---------- Service Areas List ---------- */
.side-list-pro{
  list-style: none;
  padding: 0 6px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 340px;
  overflow-y: auto;
}
.side-list-pro::-webkit-scrollbar{ width: 4px; }
.side-list-pro::-webkit-scrollbar-track{ background: transparent; }
.side-list-pro::-webkit-scrollbar-thumb{
  background: rgba(85,200,42,.25);
  border-radius: 3px;
}
.side-list-pro li a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.side-list-pro li a > i:first-child{
  color: #55C82A;
  font-size: .85rem;
  flex-shrink: 0;
  transition: transform .3s ease;
}
.side-list-pro li a span{
  flex: 1;
  min-width: 0;
}
.side-list-pro li a .arrow{
  color: #D1D5DB;
  font-size: .75rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.side-list-pro li a:hover{
  background: linear-gradient(90deg, rgba(85,200,42,.1) 0%, rgba(85,200,42,.02) 100%);
  color: #31951A;
  padding-left: 16px;
}
.side-list-pro li a:hover > i:first-child{
  transform: scale(1.15);
}
.side-list-pro li a:hover .arrow{
  opacity: 1;
  transform: translateX(0);
  color: #55C82A;
}

/* ==================================================================
   ABOUT FAQ SECTION
   ================================================================== */

.about-faq-section{
  position: relative;
  padding: 90px 0 100px;
  background: linear-gradient(180deg, #F5F6F4 0%, #FFFFFF 100%);
  overflow: hidden;
}
.about-faq-section::before{
  content: '';
  position: absolute;
  top: 10%;
  right: -10%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(85,200,42,.06) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.about-faq-section .container{
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.about-faq-head{
  text-align: center;
  margin-bottom: 50px;
}
.about-faq-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #31951A;
  background: rgba(85,200,42,.1);
  border: 1px solid rgba(85,200,42,.2);
  padding: 7px 16px;
  border-radius: 99px;
  margin-bottom: 16px;
}
.about-faq-eyebrow i{
  color: #55C82A;
  font-size: .85rem;
}
.about-faq-heading{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  color: #111111;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: 0 0 14px;
}
.about-faq-sub{
  font-family: 'Inter', sans-serif;
  font-size: .98rem;
  line-height: 1.65;
  color: #6B7280;
  margin: 0 auto;
  max-width: 620px;
}

/* ---------- FAQ Accordion ---------- */
.about-faq-accordion{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-faq-item{
  background: #FFFFFF;
  border: 1px solid rgba(17,17,17,.07);
  border-radius: 16px;
  overflow: hidden;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  box-shadow:
    0 1px 2px rgba(17,17,17,.02),
    0 4px 12px rgba(17,17,17,.03);
  position: relative;
}
.about-faq-item::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #55C82A 0%, #31951A 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  z-index: 3;
  border-radius: 0 3px 3px 0;
}
.about-faq-item:hover{
  border-color: rgba(85,200,42,.3);
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px rgba(17,17,17,.05),
    0 12px 28px rgba(85,200,42,.08);
}

.about-faq-item .accordion-button{
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 26px;
  background: #FFFFFF;
  border: 0;
  font-family: 'Poppins', sans-serif;
  font-size: .98rem;
  font-weight: 600;
  color: #111111;
  text-align: left;
  box-shadow: none;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  line-height: 1.4;
}
.about-faq-item .accordion-button:focus{
  box-shadow: none;
  outline: 0;
}
.about-faq-item .accordion-button:hover{
  background: rgba(85,200,42,.03);
}
.about-faq-item .accordion-button:not(.collapsed){
  color: #31951A;
  background: rgba(85,200,42,.04);
  padding-bottom: 20px;
}

.afq-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(85,200,42,.1) 0%, rgba(85,200,42,.04) 100%);
  border: 1px solid rgba(85,200,42,.18);
  color: #31951A;
  font-family: 'Poppins', sans-serif;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: -.02em;
  flex-shrink: 0;
  transition: all .45s cubic-bezier(.68,-.55,.265,1.55);
}
.about-faq-item .accordion-button:hover .afq-num,
.about-faq-item .accordion-button:not(.collapsed) .afq-num{
  background: linear-gradient(135deg, #55C82A 0%, #31951A 100%);
  border-color: transparent;
  color: #FFFFFF;
  transform: scale(1.05) rotate(-4deg);
  box-shadow: 0 8px 20px rgba(85,200,42,.35);
}

.afq-q{
  flex: 1;
  min-width: 0;
}

.afq-icon{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17,17,17,.04);
  color: #111111;
  font-size: .85rem;
  flex-shrink: 0;
  transition: all .45s cubic-bezier(.68,-.55,.265,1.55);
}
.afq-icon i{
  transition: transform .45s cubic-bezier(.68,-.55,.265,1.55);
  font-weight: 900;
}
.about-faq-item .accordion-button:hover .afq-icon{
  background: rgba(85,200,42,.12);
  color: #31951A;
}
.about-faq-item .accordion-button:not(.collapsed) .afq-icon{
  background: linear-gradient(135deg, #55C82A 0%, #31951A 100%);
  color: #FFFFFF;
  transform: rotate(180deg) scale(1.05);
  box-shadow: 0 6px 18px rgba(85,200,42,.35);
}
.about-faq-item .accordion-button:not(.collapsed) .afq-icon i{
  transform: rotate(-45deg);
}
.about-faq-item .accordion-button::after{
  display: none !important;
}

.about-faq-item .accordion-body{
  padding: 0 26px 24px 84px;
  background: rgba(85,200,42,.02);
}
.afq-answer{
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  line-height: 1.75;
  color: #374151;
  padding-top: 4px;
  position: relative;
}
.afq-answer::before{
  content: '';
  position: absolute;
  left: -28px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, #55C82A 0%, transparent 100%);
  border-radius: 2px;
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

@media (max-width: 991.98px){
  .about-content-section,
  .about-faq-section{ padding: 70px 0 80px; }

  .about-sidebar{ position: static; margin-top: 40px; }

  .about-feature-image img{ height: 360px; }
}

@media (max-width: 767.98px){
  .about-content-section,
  .about-faq-section{ padding: 60px 0 70px; }

  .about-feature-image{
    margin-bottom: 34px;
    border-radius: 18px;
  }
  .about-feature-image img{ height: 300px; }
  .afi-badge{
    padding: 14px 16px;
    gap: 12px;
  }
  .afi-badge i{
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
    border-radius: 11px;
  }
  .afi-badge strong{ font-size: .9rem; }
  .afi-badge small{ font-size: .74rem; }

  .about-h2{ font-size: 1.35rem; }
  .about-body p{ font-size: .94rem; line-height: 1.75; }

  .about-feature-card{ padding: 60px 20px 22px 20px; }
  .afc-icon{
    top: 18px;
    left: 20px;
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
  }
  .about-feature-card h3{ font-size: 1rem; }
  .about-feature-card p{ font-size: .88rem; }

  .sidebar-card-pro{ padding: 24px 22px; }

  .about-faq-item .accordion-button{
    padding: 18px 20px;
    font-size: .93rem;
    gap: 12px;
  }
  .afq-num{ min-width: 36px; height: 36px; font-size: .78rem; }
  .afq-icon{ width: 32px; height: 32px; font-size: .8rem; }
  .about-faq-item .accordion-body{
    padding: 0 20px 22px 68px;
  }
  .afq-answer{ font-size: .88rem; }
}

@media (max-width: 479.98px){
  .about-feature-image img{ height: 260px; }
  .afi-badge{
    bottom: 14px;
    left: 14px;
    right: 14px;
    padding: 12px 14px;
  }
  .afi-badge i{ width: 36px; height: 36px; font-size: 1rem; }

  .about-h2{ font-size: 1.2rem; padding-left: 16px; }
  .about-h2::before{ width: 3px; }
  .about-body p{ font-size: .9rem; }

  .about-feature-card{ padding: 56px 18px 20px 18px; }
  .afc-icon{ top: 16px; left: 18px; width: 42px; height: 42px; }

  .sidebar-card-pro{ padding: 22px 18px; border-radius: 16px; }
  .scp-header{ gap: 12px; margin-bottom: 18px; padding-bottom: 16px; }
  .scp-header-icon{ width: 42px; height: 42px; font-size: 1.15rem; }
  .scp-header h4{ font-size: 1rem; }

  .about-faq-item .accordion-button{
    padding: 16px 16px;
    font-size: .88rem;
    gap: 10px;
  }
  .afq-num{ min-width: 32px; height: 32px; font-size: .72rem; border-radius: 10px; }
  .afq-icon{ width: 28px; height: 28px; font-size: .72rem; }
  .about-faq-item .accordion-body{
    padding: 0 16px 20px 58px;
  }
  .afq-answer{ font-size: .84rem; }
  .afq-answer::before{ left: -20px; }
}

@media (prefers-reduced-motion: reduce){
  .sidebar-card-pro::before{ animation: none !important; }
  .about-feature-image img,
  .about-feature-card,
  .afc-icon,
  .clp-icon,
  .side-list-pro li a,
  .about-faq-item,
  .about-faq-item::before{
    transition-duration: .01ms !important;
  }
}
/* ==================================================================
   GLOBAL SECTION HEIGHT REDUCTION
   Saare sections ki vertical padding/height kam karne ke liye
   ================================================================== */

/* ============ MAIN SECTIONS — Desktop ============ */
.home-section,
.trust-section,
.about-section,
.services-section,
.why-section,
.areas-section,
.process-section,
.reviews-section,
.faq-section,
.contact-section,
.about-content-section,
.about-faq-section,
.services-listing-section,
.areas-listing-section,
.blog-section,
.gallery-section,
.contact-page-section{
  padding-top: 55px !important;
  padding-bottom: 60px !important;
}

/* ============ HERO SECTIONS ============ */
.home-hero{
  min-height: 480px !important;
  padding-top: 55px !important;
  padding-bottom: 60px !important;
}
.home-hero .hero-container{
  padding-top: 40px !important;
  padding-bottom: 50px !important;
}

.page-hero{
  min-height: 300px !important;
}
.page-hero-container{
  padding-top: 45px !important;
  padding-bottom: 45px !important;
}

/* ============ CTA SECTION ============ */
.cta-section{
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

/* ============ SECTION HEADINGS — Bottom Margin ============ */
.section-head-home,
.trust-section-head,
.about-faq-head,
.services-head,
.why-head,
.areas-head,
.process-head,
.reviews-head,
.faq-head{
  margin-bottom: 32px !important;
}

/* ============ INTRO BLOCK ============ */
.intro-block{
  padding-top: 50px !important;
  padding-bottom: 55px !important;
}

/* ============ FOOTER ============ */
.footer-main{
  padding-top: 70px !important;
}
.footer-cta-band{
  padding: 30px 0 !important;
}
.cta-band-inner{
  padding: 34px 40px !important;
}

/* ==================================================================
   CARD HEIGHTS — Compact
   ================================================================== */

/* --- Trust Cards --- */
.trust-card{
  min-height: 260px !important;
  padding: 32px 28px 28px !important;
  gap: 26px !important;
}

/* --- Service Cards --- */
.service-card,
.service-card-pro{
  min-height: 320px !important;
}
.services-grid{
  gap: 18px !important;
}

/* --- Why Choose Cards --- */
.why-card{
  min-height: 260px !important;
  padding: 28px 24px 24px !important;
  gap: 28px !important;
}
.why-grid{
  gap: 18px !important;
}

/* --- Area Cards --- */
.area-card{
  min-height: 260px !important;
}
.areas-grid{
  gap: 18px !important;
}

/* --- Process Steps --- */
.process-step{
  min-height: 260px !important;
  padding: 32px 24px 26px !important;
}
.process-steps{
  gap: 18px !important;
}

/* --- Review Card --- */
.reviews-track{
  min-height: 320px !important;
}
.review-card{
  padding: 36px 34px 30px !important;
}

/* --- About Feature Cards --- */
.about-feature-card{
  padding: 22px 20px 22px 80px !important;
}

/* --- Sidebar Cards --- */
.sidebar-card-pro{
  padding: 22px 22px !important;
}

/* --- Feature Image --- */
.about-feature-image img{
  height: 340px !important;
}
.about-image{
  height: 480px !important;
}

/* ==================================================================
   GAPS BETWEEN COLUMNS
   ================================================================== */
.row.g-5{
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 2rem;
}

/* ==================================================================
   RESPONSIVE — Tablet
   ================================================================== */
@media (max-width: 991.98px){
  .home-section,
  .trust-section,
  .about-section,
  .services-section,
  .why-section,
  .areas-section,
  .process-section,
  .reviews-section,
  .faq-section,
  .contact-section,
  .about-content-section,
  .about-faq-section{
    padding-top: 45px !important;
    padding-bottom: 50px !important;
  }

  .home-hero{
    min-height: 420px !important;
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }

  .page-hero{ min-height: 260px !important; }
  .page-hero-container{
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .cta-section{
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  .section-head-home,
  .trust-section-head,
  .services-head,
  .why-head,
  .areas-head,
  .process-head,
  .reviews-head,
  .about-faq-head{
    margin-bottom: 26px !important;
  }

  .trust-card{ min-height: 230px !important; }
  .service-card{ min-height: 290px !important; }
  .why-card{ min-height: 230px !important; }
  .area-card{ min-height: 240px !important; }
  .process-step{ min-height: 230px !important; }
  .reviews-track{ min-height: 300px !important; }
  .about-image{ height: 420px !important; }
  .about-feature-image img{ height: 300px !important; }
}

/* ==================================================================
   RESPONSIVE — Mobile
   ================================================================== */
@media (max-width: 767.98px){
  .home-section,
  .trust-section,
  .about-section,
  .services-section,
  .why-section,
  .areas-section,
  .process-section,
  .reviews-section,
  .faq-section,
  .contact-section,
  .about-content-section,
  .about-faq-section{
    padding-top: 38px !important;
    padding-bottom: 42px !important;
  }

  .home-hero{
    min-height: 340px !important;
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }
  .home-hero .hero-container{
    padding-top: 32px !important;
    padding-bottom: 38px !important;
  }

  .page-hero{ min-height: 240px !important; }
  .page-hero-container{
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .cta-section{
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }

  .section-head-home,
  .trust-section-head,
  .services-head,
  .why-head,
  .areas-head,
  .process-head,
  .reviews-head,
  .about-faq-head{
    margin-bottom: 22px !important;
  }

  .intro-block{
    padding-top: 40px !important;
    padding-bottom: 45px !important;
  }

  /* Card heights — mobile */
  .trust-card{ min-height: auto !important; padding: 22px 20px !important; }
  .service-card{ min-height: 280px !important; }
  .why-card{
    min-height: auto !important;
    padding: 22px 18px !important;
  }
  .area-card{ min-height: 200px !important; }
  .process-step{
    min-height: auto !important;
    padding: 22px 18px !important;
  }
  .reviews-track{ min-height: 340px !important; }
  .review-card{ padding: 28px 22px 24px !important; }

  .about-image{ height: 340px !important; }
  .about-feature-image img{ height: 240px !important; }
  .about-feature-image{ margin-bottom: 26px !important; }

  .footer-main{
    padding-top: 50px !important;
    padding-bottom: 0 !important;
  }
  .footer-grid{
    padding-bottom: 36px !important;
    gap: 30px 18px !important;
  }
  .cta-band-inner{ padding: 26px 22px !important; }
}

/* ==================================================================
   RESPONSIVE — Small Mobile
   ================================================================== */
@media (max-width: 479.98px){
  .home-section,
  .trust-section,
  .about-section,
  .services-section,
  .why-section,
  .areas-section,
  .process-section,
  .reviews-section,
  .faq-section,
  .contact-section,
  .about-content-section,
  .about-faq-section{
    padding-top: 32px !important;
    padding-bottom: 36px !important;
  }

  .home-hero{
    min-height: 300px !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .page-hero{ min-height: 220px !important; }
  .page-hero-container{
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .cta-section{
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .section-head-home,
  .trust-section-head,
  .services-head,
  .why-head,
  .areas-head,
  .process-head,
  .reviews-head,
  .about-faq-head{
    margin-bottom: 18px !important;
  }

  .trust-card{ padding: 20px 18px !important; }
  .service-card{ min-height: 260px !important; }
  .why-card{ padding: 20px 16px !important; }
  .area-card{ min-height: 190px !important; }
  .process-step{ padding: 20px 16px !important; }
  .reviews-track{ min-height: 360px !important; }
  .review-card{ padding: 24px 18px 22px !important; }

  .about-image{ height: 300px !important; }
  .about-feature-image img{ height: 220px !important; }

  .sidebar-card-pro{ padding: 20px 18px !important; }
  .footer-main{ padding-top: 40px !important; }
}

/* ============ MOBILE — show only 3 areas ============ */
@media (max-width: 767.98px){
  /* Hide 4th, 5th, 6th cards on mobile */
  .areas-grid .area-card:nth-child(n+4){
    display: none;
  }
}

@media (max-width: 479.98px){
  .areas-grid .area-card:nth-child(n+4){
    display: none;
  }
}

@media (max-width: 767.98px){
  /* Mobile overlay — lighter */
  .hero-overlay{
    background:
      linear-gradient(180deg,
        rgba(17,17,17,.55) 0%,
        rgba(17,17,17,.5) 40%,
        rgba(17,17,17,.6) 100%),
      linear-gradient(135deg,
        rgba(17,17,17,.15) 0%,
        rgba(17,17,17,.25) 100%);
  }
  .hero-overlay::before{
    background:
      radial-gradient(circle at 30% 20%, rgba(85,200,42,.12) 0%, transparent 55%);
  }
}

@media (max-width: 767.98px){
  /* Center align trust cards content */
  .trust-card{
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 30px 24px !important;
    gap: 18px !important;
  }
  .tb-icon{
    margin-bottom: 4px;
  }
  .tb-text{
    align-items: center !important;
    text-align: center !important;
  }
  .tb-text strong,
  .tb-text small{
    text-align: center !important;
  }
  .tb-arrow{
    top: 18px !important;
    right: 18px !important;
  }
}
/* ============ MOBILE — 1 card per row ============ */
@media (max-width: 767.98px){
  .trustbar-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .trust-card{
    min-height: auto !important;
    padding: 22px 20px !important;
  }
}

@media (max-width: 479.98px){
  .trustbar-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}