/* ====================================================
   WONDER ZONE — Stylesheet
   Preschool & Educational Institute, Redhills Chennai
==================================================== */

:root{
  --green:#0F4C3A;
  --green-deep:#0A3327;
  --green-soft:#1B6A52;
  --yellow:#FFD23F;
  --yellow-soft:#FFE873;
  --cream:#FFF8E7;
  --cream-2:#FFFBEF;
  --pink:#FF8FA3;
  --orange:#FF8C42;
  --sky:#9BD9E0;
  --ink:#0E2A22;
  --muted:#5C6B65;
  --line:rgba(15,76,58,.12);
  --shadow-soft: 0 10px 30px rgba(15,76,58,.08);
  --shadow-pop: 0 18px 50px rgba(15,76,58,.18);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  color:var(--ink);
  background:var(--cream-2);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

.container{max-width:1240px;margin:0 auto;padding:0 24px}

/* ============ TYPOGRAPHY ============ */
h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:700;
  line-height:1.15;
  color:var(--green-deep);
  letter-spacing:-.01em;
}
h1{font-size:clamp(1.7rem, 3.4vw, 2.6rem); font-weight:800}
h2{font-size:clamp(1.6rem, 3.2vw, 2.6rem)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);background:rgba(255,210,63,.35);
  padding:7px 14px;border-radius:999px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}

.hl{
  background:linear-gradient(transparent 60%, var(--yellow) 60%);
  padding:0 6px;
}
.hl-yellow{
  background:linear-gradient(transparent 60%, var(--yellow) 60%);
  padding:0 4px;
}

/* ============ TOP BAR ============ */
.topbar{background:var(--green-deep);color:#fff;font-size:.82rem;padding:8px 0}
.topbar-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.topbar a{display:inline-flex;align-items:center;gap:8px;opacity:.92}
.topbar a:hover{color:var(--yellow)}
.topbar .socials a{margin-left:12px}

/* ============ NAV ============ */
.nav-wrap{
  position:sticky;top:0;z-index:50;background:rgba(255,251,239,.94);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none}
.logo-mark{
  width:100px;
  height:100px;
  border-radius:14px;
  background:#fff;
  padding:4px;
  position:relative;display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(15,76,58,.18);
  transform:rotate(-3deg);flex-shrink:0;
  transition:transform .4s cubic-bezier(.3,1.4,.5,1);
}
.logo-mark img{
  width:100%;height:100%;object-fit:contain;border-radius:10px;
  display:block;
}
.logo:hover .logo-mark{
  transform:rotate(6deg) scale(1.05);
}
.logo-mark::after{
  content:"";position:absolute;inset:-3px;border-radius:17px;
  background:linear-gradient(135deg, var(--yellow), var(--orange), var(--green));
  z-index:-1;opacity:.4;
}
.logo-text-wrap{display:flex;flex-direction:column;gap:4px}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-text b{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--green-deep);letter-spacing:.02em}
.logo-text span{
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--orange);font-weight:700;margin-top:4px;
}

/* Banner image below school name */
.nav-banner{
  display:flex;
  align-items:center;
}
.nav-banner img{
  /* height:28px; */
  width:auto;
  max-width:200px;
  object-fit:contain;
  border-radius:4px;
}
@media(max-width:960px){
  .nav-banner{ display:none; }
}

.menu{display:flex;align-items:center;gap:4px}
.menu a{
  padding:9px 14px;border-radius:999px;font-weight:600;font-size:.92rem;
  color:var(--green-deep);transition:.25s;
}
.menu a:hover, .menu a.active{background:var(--yellow);color:var(--green-deep)}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:999px;font-weight:700;font-size:.95rem;
  transition:transform .25s, box-shadow .25s, background .25s;white-space:nowrap;
}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 8px 20px rgba(15,76,58,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(15,76,58,.32);background:var(--green-deep)}
.btn-yellow{background:var(--yellow);color:var(--green-deep);box-shadow:0 8px 20px rgba(255,210,63,.45)}
.btn-yellow:hover{transform:translateY(-2px);background:var(--yellow-soft)}
.btn-ghost{border:2px solid var(--green);color:var(--green-deep)}
.btn-ghost:hover{background:var(--green);color:#fff}

.menu-toggle{display:none;font-size:1.5rem;color:var(--green-deep);padding:8px}

/* ============ HERO SLIDER ============ */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(255,210,63,.45), transparent 60%),
    radial-gradient(700px 600px at -10% 110%, rgba(15,76,58,.10), transparent 60%),
    var(--cream);
  padding:50px 0 70px;
}
.hero-blob-1{
  position:absolute;top:-80px;left:-80px;width:300px;height:300px;
  border-radius:50%;background:var(--yellow);opacity:.25;filter:blur(20px);
  pointer-events:none;
}
.hero-blob-2{
  position:absolute;bottom:-100px;right:10%;width:240px;height:240px;
  border-radius:50%;background:var(--pink);opacity:.25;filter:blur(20px);
  pointer-events:none;
}

.slider{position:relative}
.slides-wrap{position:relative;min-height:480px}
.slide{
  display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;
  position:absolute;inset:0;
  opacity:0;visibility:hidden;transition:opacity .7s ease;pointer-events:none;
}
.slide.active{
  opacity:1;visibility:visible;pointer-events:auto;
  animation:slideIn .8s ease both;
}
@keyframes slideIn{
  from{transform:translateY(20px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

.slide-content{position:relative;z-index:3}
.slide-content h1{max-width:540px;line-height:1.1}
.slide-content .eyebrow{margin-bottom:18px}
.slide-content p.lead{
  font-size:1.05rem;color:var(--muted);
  margin:18px 0 26px;max-width:560px;
}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.trust-row{display:flex;gap:24px;margin-top:32px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:12px}
.trust-icon{
  width:44px;height:44px;border-radius:14px;background:#fff;
  display:grid;place-items:center;color:var(--green);
  box-shadow:var(--shadow-soft);font-size:1rem;flex-shrink:0;
}
.trust-item small{
  color:var(--muted);font-weight:500;font-size:.78rem;
  display:block;line-height:1.2;
}
.trust-item b{color:var(--green-deep);font-size:.95rem}

.slide-content{position:relative;z-index:2}
.slide-visual{
  position:relative;height:440px;z-index:2;
  display:flex;align-items:center;justify-content:center;
}

/* CIRCULAR HERO IMAGE FRAME with rotating dashed ring */
.slide-visual .frame{
  position:relative;
  width:420px;height:420px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:var(--shadow-pop);
  border:8px solid #fff;
  background:var(--green);
  z-index:2;
  animation:frameFloat 6s ease-in-out infinite;
}
.slide-visual .frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s ease;
}
.slide.active .frame img{
  animation:imgZoom 1.4s ease-out;
}

/* Rotating decorative ring around the circle */
.slide-visual::before{
  content:"";
  position:absolute;
  width:480px;height:480px;
  border-radius:50%;
  border:2px dashed rgba(15,76,58,.35);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  animation:spinRing 22s linear infinite;
  z-index:1;
}

/* Outer dotted ring */
.slide-visual::after{
  content:"";
  position:absolute;
  width:520px;height:520px;
  border-radius:50%;
  border:1px dotted rgba(255,140,66,.45);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  animation:spinRing 30s linear infinite reverse;
  z-index:1;
}

@keyframes spinRing{
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes frameFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-12px) scale(1.01)}
}
@keyframes imgZoom{
  from{transform:scale(1.25);opacity:.6}
  to{transform:scale(1);opacity:1}
}

.float-badge{
  position:absolute;background:#fff;border-radius:18px;padding:12px 16px;
  box-shadow:var(--shadow-pop);display:flex;align-items:center;gap:10px;
  animation:bob 4s ease-in-out infinite;z-index:3;
}
.float-badge .ic{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;color:#fff;
  font-size:1rem;flex-shrink:0;
}
.float-badge b{display:block;font-size:.9rem;color:var(--green-deep);line-height:1.1}
.float-badge small{color:var(--muted);font-size:.74rem}
@keyframes bob{50%{transform:translateY(-12px)}}

.fb-1{top:30px;right:0;animation-delay:.2s}
.fb-1 .ic{background:var(--yellow);color:var(--green-deep)}
.fb-2{bottom:30px;left:0;animation-delay:.8s}
.fb-2 .ic{background:var(--orange)}
.fb-3{top:50%;right:-10px;animation-delay:1.4s}
.fb-3 .ic{background:var(--pink)}

/* SLIDER NAV */
.slider-controls{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:30px;gap:20px;flex-wrap:wrap;
}
.dots{display:flex;gap:10px;align-items:center}
.dot{
  width:36px;height:6px;border-radius:999px;
  background:rgba(15,76,58,.18);transition:.3s;cursor:pointer;
  border:none;padding:0;
}
.dot.active{background:var(--green);width:54px}
.arrows{display:flex;gap:10px}
.slider-arrow{
  width:48px;height:48px;border-radius:50%;background:#fff;color:var(--green-deep);
  display:grid;place-items:center;box-shadow:var(--shadow-soft);transition:.25s;
  font-size:.95rem;
}
.slider-arrow:hover{background:var(--green);color:#fff;transform:scale(1.05)}

/* ============ SECTION BASE ============ */
section{padding:80px 0;position:relative}
.section-head{text-align:center;max-width:760px;margin:0 auto 50px}
.section-head h2{margin:14px 0 14px}
.section-head p{color:var(--muted);font-size:1rem}

/* ============================================== */
/* ============ ABOUT (ENHANCED) ================ */
/* ============================================== */
.about{
  background:var(--cream-2);
  position:relative;
  overflow:hidden;
}

/* Decorative ambient blobs */
.about::before{
  content:"";position:absolute;
  top:10%;left:-100px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,210,63,.4), transparent 65%);
  filter:blur(40px);
  animation:aboutBlob 12s ease-in-out infinite;
  pointer-events:none;
}
.about::after{
  content:"";position:absolute;
  bottom:0;right:-80px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,143,163,.35), transparent 65%);
  filter:blur(40px);
  animation:aboutBlob 14s ease-in-out infinite reverse;
  pointer-events:none;
}
@keyframes aboutBlob{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(20px,30px) scale(1.1)}
  66%{transform:translate(-15px,-20px) scale(.95)}
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:60px;align-items:center;
  position:relative;z-index:2;
}

/* ===== IMAGE BLOCK ===== */
.about-img{
  position:relative;
  padding:30px 30px 60px 0;
}

/* Decorative dots pattern behind main image */
.about-img::before{
  content:"";position:absolute;
  top:-10px;right:-10px;width:120px;height:120px;
  background-image:radial-gradient(circle, var(--green) 1.5px, transparent 2px);
  background-size:14px 14px;
  opacity:.35;
  z-index:0;
  animation:dotsFade 4s ease-in-out infinite;
}
@keyframes dotsFade{
  0%,100%{opacity:.35;transform:scale(1)}
  50%{opacity:.6;transform:scale(1.05)}
}

/* Wavy underline behind small image */
.about-img::after{
  content:"";position:absolute;
  bottom:30px;left:0;width:80px;height:80px;
  border:6px solid var(--orange);
  border-radius:50%;
  border-right-color:transparent;
  border-top-color:transparent;
  opacity:.4;
  animation:halfSpin 8s linear infinite;
  z-index:0;
}
@keyframes halfSpin{
  to{transform:rotate(360deg)}
}

/* Main image with animated border */
.about-img .pic-main{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  box-shadow:var(--shadow-pop);
  aspect-ratio:4/5;width:100%;
  background:#e8e8e8;
  z-index:2;
  transition:transform .6s cubic-bezier(.2,.8,.2,1.05);
}
.about-img .pic-main img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s ease;
}
.about-img:hover .pic-main img{transform:scale(1.07)}

/* Glowing border behind main image */
.about-img .pic-main::before{
  content:"";position:absolute;
  inset:-3px;border-radius:34px;
  background:linear-gradient(135deg, var(--yellow), var(--orange), var(--pink), var(--green));
  background-size:300% 300%;
  z-index:-1;
  animation:borderShift 6s linear infinite;
}
@keyframes borderShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Small image overlay with floating effect */
.about-img .pic-small{
  position:absolute;
  width:52%;
  aspect-ratio:1/1;
  border-radius:24px;
  border:8px solid var(--cream-2);
  bottom:0;right:0;
  overflow:hidden;
  background:#e8e8e8;
  box-shadow:var(--shadow-pop);
  z-index:3;
  animation:smallFloat 5s ease-in-out infinite;
}
.about-img .pic-small img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s ease;
}
.about-img:hover .pic-small img{transform:scale(1.1) rotate(-3deg)}

@keyframes smallFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}

/* Floating sticker on small pic — "Loved" tag */
.about-img .pic-small::after{
  content:"\f004";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  top:14px;right:14px;
  width:36px;height:36px;
  background:#fff;color:#C7475F;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:1rem;
  box-shadow:var(--shadow-soft);
  animation:heartBeat 1.5s ease-in-out infinite;
  z-index:2;
}

/* ===== YEARS BADGE (premium upgrade) ===== */
.years-badge{
  position:absolute;
  top:0;left:0;
  width:140px;height:140px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--yellow), #FFC820);
  display:grid;place-items:center;text-align:center;
  box-shadow:0 18px 40px rgba(255,210,63,.5);
  z-index:5;
  animation:badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{transform:scale(1) rotate(-5deg)}
  50%{transform:scale(1.08) rotate(5deg)}
}

/* Rotating dashed ring */
.years-badge::before{
  content:"";position:absolute;inset:-6px;
  border:2px dashed var(--green-deep);
  border-radius:50%;
  animation:spinSlow 18s linear infinite;
}
@keyframes spinSlow{to{transform:rotate(360deg)}}

/* Outer pulse ring */
.years-badge::after{
  content:"";position:absolute;inset:0;
  border-radius:50%;
  border:2px solid var(--yellow);
  animation:badgeRing 2.5s ease-out infinite;
}
@keyframes badgeRing{
  0%{transform:scale(1);opacity:.8}
  100%{transform:scale(1.6);opacity:0}
}

.years-badge .core{
  width:96px;height:96px;
  border-radius:50%;background:#fff;
  display:grid;place-items:center;
  position:relative;z-index:2;
  box-shadow:inset 0 4px 10px rgba(15,76,58,.08);
}
.years-badge .core b{
  font-family:'Fraunces',serif;
  font-size:1.85rem;
  color:var(--green-deep);
  line-height:1;
  background:linear-gradient(135deg, var(--green-deep), var(--green));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.years-badge .core small{
  font-size:.62rem;letter-spacing:.16em;
  color:var(--orange);font-weight:800;
  text-transform:uppercase;margin-top:4px;display:block;
}

/* ===== TEXT BLOCK ===== */
.about-text{position:relative}
.about-text .eyebrow{
  position:relative;
  animation:eyebrowSlide .8s ease-out;
}
@keyframes eyebrowSlide{
  from{opacity:0;transform:translateX(-30px)}
  to{opacity:1;transform:translateX(0)}
}

.about-text h2{
  position:relative;
  margin:14px 0;
}
/* Decorative SVG-like accent next to heading */
.about-text h2::before{
  content:"✦";
  position:absolute;
  left:-30px;top:0;
  font-size:1.4rem;
  color:var(--orange);
  animation:sparkleSpin 4s ease-in-out infinite;
  opacity:.7;
}
@keyframes sparkleSpin{
  0%,100%{transform:rotate(0) scale(1);opacity:.7}
  50%{transform:rotate(180deg) scale(1.3);opacity:1}
}

.about-text p{
  color:var(--muted);
  margin:18px 0;
  font-size:1rem;
}
.about-text p strong{
  color:var(--green-deep);
  background:linear-gradient(transparent 60%, rgba(255,210,63,.5) 60%);
  padding:0 4px;
}

/* ===== VISION & MISSION CARDS ===== */
.vm-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:16px;margin-top:24px;
}
.vm-card{
  background:#fff;
  border-radius:22px;
  padding:24px 22px;
  border:1px solid var(--line);
  transition:transform .4s cubic-bezier(.2,.8,.2,1.05), box-shadow .4s ease, border-color .4s ease;
  position:relative;
  overflow:hidden;
}

/* Glowing gradient border on hover */
.vm-card::before{
  content:"";position:absolute;
  inset:-2px;border-radius:24px;
  background:linear-gradient(135deg, var(--yellow), var(--orange), var(--pink));
  opacity:0;z-index:-1;
  transition:opacity .4s ease;
  filter:blur(10px);
}

/* Decorative corner accent */
.vm-card::after{
  content:"";position:absolute;
  top:-30px;right:-30px;
  width:80px;height:80px;
  border-radius:50%;
  background:var(--yellow);
  opacity:.15;
  transition:transform .5s ease, opacity .5s ease;
}

.vm-card:hover{
  transform:translateY(-8px) rotate(-1deg);
  box-shadow:0 20px 50px rgba(15,76,58,.2);
  border-color:transparent;
}
.vm-card:hover::before{opacity:.4}
.vm-card:hover::after{
  transform:scale(2.5);
  opacity:.3;
}
.vm-card.green:hover{transform:translateY(-8px) rotate(1deg)}

.vm-card .ic{
  width:50px;height:50px;border-radius:14px;
  background:var(--yellow);color:var(--green-deep);
  display:grid;place-items:center;
  margin-bottom:14px;
  font-size:1.2rem;
  position:relative;z-index:1;
  transition:transform .4s ease;
}
.vm-card.green .ic{
  background:var(--green);
  color:var(--yellow);
}
.vm-card:hover .ic{
  animation:icPop .6s cubic-bezier(.3,1.5,.5,1);
}
@keyframes icPop{
  0%{transform:scale(1) rotate(0)}
  40%{transform:scale(1.2) rotate(-15deg)}
  70%{transform:scale(1.1) rotate(10deg)}
  100%{transform:scale(1) rotate(0)}
}

.vm-card h4{
  font-size:1.15rem;
  margin-bottom:6px;
  position:relative;z-index:1;
}
.vm-card p{
  font-size:.9rem;
  color:var(--muted);
  margin:0;
  position:relative;z-index:1;
}

/* Tag line on top of cards */
.vm-card .tag-line{
  display:inline-block;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:800;
  margin-bottom:8px;
}

/* Mobile adjustments */
@media (max-width: 980px){
  .about-img::before{width:80px;height:80px}
  .years-badge{width:110px;height:110px}
  .years-badge .core{width:78px;height:78px}
  .years-badge .core b{font-size:1.5rem}
  .about-text h2::before{display:none}
}
@media (max-width: 600px){
  .vm-grid{grid-template-columns:1fr}
  .about-img .pic-small::after{width:30px;height:30px;font-size:.85rem}
}

/* ============================================== */
/* ============ SERVICES (ENHANCED) ============= */
/* ============================================== */
.services{
  background:linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  position:relative;
  overflow:hidden;
}

/* Decorative ambient blobs */
.services::before{
  content:"";position:absolute;
  top:60px;right:-60px;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle, var(--yellow), transparent 65%);
  opacity:.45;filter:blur(20px);
  animation:servicesBlob 14s ease-in-out infinite;
  pointer-events:none;
}
.services::after{
  content:"";position:absolute;
  bottom:60px;left:-80px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,143,163,.5), transparent 65%);
  opacity:.45;filter:blur(20px);
  animation:servicesBlob 16s ease-in-out infinite reverse;
  pointer-events:none;
}
@keyframes servicesBlob{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-30px,40px) scale(1.15)}
}

/* Floating decorative shapes (using before/after on body via pattern) */
.services .container{position:relative;z-index:2}

/* Decorative wavy SVG-style line behind grid */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  position:relative;
}

/* ===== SERVICE CARD ===== */
.service-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--line);
  position:relative;
  transition:transform .5s cubic-bezier(.2,.8,.2,1.05), box-shadow .5s ease, border-color .4s ease;
  display:flex;flex-direction:column;
  z-index:1;
}

/* Card number badge (01, 02, 03, 04) */
.service-card .body::before{
  position:absolute;
  top:14px;right:18px;
  font-family:'Fraunces', serif;
  font-size:1.1rem;
  font-weight:800;
  color:var(--green);
  opacity:.25;
  letter-spacing:.02em;
  z-index:1;
  transition:opacity .3s ease, transform .3s ease;
}
.service-card.s1 .body::before{content:"01"}
.service-card.s2 .body::before{content:"02"}
.service-card.s3 .body::before{content:"03"}
.service-card.s4 .body::before{content:"04"}
.service-card:hover .body::before{
  opacity:.6;transform:scale(1.2);
}

/* Card lift on hover */
.service-card:hover{
  transform:translateY(-14px);
  box-shadow:0 25px 60px rgba(15,76,58,.22);
  border-color:transparent;
}

/* Soft colored glow on hover (subtle) */
.service-card::before{
  content:"";position:absolute;
  inset:-2px;border-radius:26px;
  z-index:-1;opacity:0;
  transition:opacity .5s ease;
  filter:blur(20px);
}
.service-card.s1::before{background:linear-gradient(135deg, var(--yellow), #FFC820)}
.service-card.s2::before{background:linear-gradient(135deg, var(--green), var(--green-soft))}
.service-card.s3::before{background:linear-gradient(135deg, var(--pink), #FF6080)}
.service-card.s4::before{background:linear-gradient(135deg, var(--sky), #6EBFC8)}
.service-card:hover::before{opacity:.35}

/* Top accent stripe (color per service) */
.service-card::after{
  content:"";position:absolute;
  top:0;left:0;right:0;height:4px;
  z-index:5;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s cubic-bezier(.2,.8,.2,1.05);
}
.service-card.s1::after{background:linear-gradient(90deg, var(--yellow), var(--orange))}
.service-card.s2::after{background:linear-gradient(90deg, var(--green), var(--green-soft))}
.service-card.s3::after{background:linear-gradient(90deg, var(--pink), #FF6080)}
.service-card.s4::after{background:linear-gradient(90deg, var(--sky), #6EBFC8)}
.service-card:hover::after{transform:scaleX(1)}

/* Image wrapper */
.service-card .img-wrap{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#e8e8e8;
}
.service-card .img-wrap img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1.05);
}
.service-card:hover .img-wrap img{transform:scale(1.08)}

/* ===== BADGE TAG ===== */
.service-card .badge-tag{
  position:absolute;top:14px;left:14px;
  background:#fff;color:var(--green-deep);
  padding:7px 14px;border-radius:999px;
  font-size:.75rem;font-weight:700;
  display:flex;align-items:center;gap:6px;
  box-shadow:0 6px 20px rgba(15,76,58,.18);
  z-index:3;
  transition:transform .4s cubic-bezier(.2,.8,.2,1.05), box-shadow .4s ease;
}
.service-card.s1 .badge-tag i{color:#A88200}
.service-card.s2 .badge-tag i{color:var(--green)}
.service-card.s3 .badge-tag i{color:#C7475F}
.service-card.s4 .badge-tag i{color:#1F6F8B}
.service-card:hover .badge-tag{
  transform:translateY(-4px) scale(1.08);
  box-shadow:0 12px 28px rgba(15,76,58,.28);
}

/* Badge icon spins on hover */
.service-card:hover .badge-tag i{
  animation:badgeSpin .6s ease;
}
@keyframes badgeSpin{
  0%{transform:rotate(0) scale(1)}
  50%{transform:rotate(180deg) scale(1.3)}
  100%{transform:rotate(360deg) scale(1)}
}

/* ===== CARD BODY ===== */
.service-card .body{
  padding:22px 22px 24px;
  flex:1;
  display:flex;flex-direction:column;
  position:relative;
  z-index:2;
}

.service-card h3{
  font-size:1.25rem;
  margin-bottom:8px;
  position:relative;
  display:inline-block;
  transition:color .3s ease;
}

/* Animated underline below title on hover */
.service-card h3::after{
  content:"";position:absolute;
  left:0;bottom:-3px;
  width:0;height:2px;
  background:linear-gradient(90deg, var(--orange), var(--yellow));
  transition:width .5s cubic-bezier(.2,.8,.2,1.05);
}
.service-card:hover h3::after{width:100%}

.service-card p{
  color:var(--muted);
  font-size:.92rem;
  margin-bottom:18px;
  flex:1;
  line-height:1.55;
}

/* ===== ARROW LINK ===== */
.service-card .arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:var(--green);
  transition:gap .35s cubic-bezier(.2,.8,.2,1.05), color .3s ease;
  font-size:.9rem;
  position:relative;
  width:fit-content;
}

/* Pill background on arrow that fills on hover */
.service-card .arrow::before{
  content:"";position:absolute;
  inset:-8px -14px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--yellow), var(--orange));
  transform:scaleX(0);
  transform-origin:left center;
  z-index:-1;
  opacity:0;
  transition:transform .4s ease, opacity .3s ease;
}
.service-card:hover .arrow{
  gap:14px;
  color:var(--green-deep);
  padding:0 6px;
}
.service-card:hover .arrow::before{
  transform:scaleX(1);
  opacity:.25;
}

/* Arrow icon bounce */
.service-card .arrow i{
  transition:transform .35s ease;
}
.service-card:hover .arrow i{
  animation:arrowSlide .8s ease infinite;
}
@keyframes arrowSlide{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(6px)}
}

/* ===== ENTRANCE ANIMATIONS (staggered) ===== */
.services-grid.reveal-stagger > .service-card{
  opacity:0;
  transform:translateY(40px) scale(.92);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1.05), transform .8s cubic-bezier(.2,.8,.2,1.05);
}
.services-grid.reveal-stagger.in > .service-card{
  opacity:1;
  transform:translateY(0) scale(1);
}
.services-grid.reveal-stagger.in > .service-card:nth-child(1){transition-delay:.05s}
.services-grid.reveal-stagger.in > .service-card:nth-child(2){transition-delay:.18s}
.services-grid.reveal-stagger.in > .service-card:nth-child(3){transition-delay:.31s}
.services-grid.reveal-stagger.in > .service-card:nth-child(4){transition-delay:.44s}

/* ===== Mobile tweaks ===== */
@media (max-width: 980px){
  .services::before,.services::after{width:160px;height:160px}
  .service-card .body::before{font-size:.95rem}
}
@media (max-width: 600px){
  .services::before,.services::after{display:none}
}

/* ============================================== */
/* ============ ACTIVITIES (ENHANCED) =========== */
/* ============================================== */
.activities{
  background:linear-gradient(180deg, var(--green-deep) 0%, var(--green) 100%);
  color:#fff;
  border-radius:60px 60px 0 0;
  margin-top:30px;
  overflow:hidden;
  position:relative;
}

/* Dotted polka pattern overlay */
.activities::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(255,210,63,.08) 1.2px, transparent 1.5px);
  background-size:30px 30px;
  opacity:.6;
  pointer-events:none;
  animation:dotPan 60s linear infinite;
}
@keyframes dotPan{
  to{background-position:30px 30px}
}

/* Soft glowing orb on top-right */
.activities::after{
  content:"";position:absolute;
  top:-10%;right:-10%;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,210,63,.18), transparent 70%);
  filter:blur(20px);
  pointer-events:none;
  animation:actGlow 12s ease-in-out infinite;
}
@keyframes actGlow{
  0%,100%{transform:translate(0,0) scale(1);opacity:.7}
  50%{transform:translate(-40px,40px) scale(1.2);opacity:1}
}

.activities .section-head h2{color:#fff}
.activities .section-head p{color:rgba(255,255,255,.7)}
.activities .eyebrow{background:rgba(255,210,63,.18);color:var(--yellow)}

/* Floating decorative SVG icons in background */
.activities .container{position:relative;z-index:2}

.act-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  position:relative;
  z-index:2;
}

/* ===== ACTIVITY CARD ===== */
.act-card{
  background:#fff;
  color:var(--green-deep);
  border-radius:20px;
  overflow:visible;
  transition:transform .5s cubic-bezier(.2,.8,.2,1.05), box-shadow .5s ease;
  cursor:pointer;
  display:flex;flex-direction:column;
  position:relative;
  box-shadow:var(--shadow);
}

/* Soft colored aura on hover (color cycles per nth-child) */
.act-card::before{
  content:"";position:absolute;
  inset:-2px;border-radius:22px;
  z-index:-1;opacity:0;
  filter:blur(20px);
  transition:opacity .5s ease;
}
.act-card:nth-child(6n+1)::before{background:linear-gradient(135deg, var(--yellow), var(--orange))}
.act-card:nth-child(6n+2)::before{background:linear-gradient(135deg, var(--pink), #FF6080)}
.act-card:nth-child(6n+3)::before{background:linear-gradient(135deg, var(--sky), #6EBFC8)}
.act-card:nth-child(6n+4)::before{background:linear-gradient(135deg, #E9DCFA, #6B4DBA)}
.act-card:nth-child(6n+5)::before{background:linear-gradient(135deg, var(--green), var(--yellow))}
.act-card:nth-child(6n+6)::before{background:linear-gradient(135deg, var(--orange), var(--pink))}
.act-card:hover::before{opacity:.55}

.act-card:hover{
  transform:translateY(-12px);
  box-shadow:0 25px 50px rgba(0,0,0,.4);
}

/* Image wrapper */
.act-card .img-wrap{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#e8e8e8;
  border-radius:20px 20px 0 0;
}
.act-card .img-wrap img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1.05), filter .5s ease;
  filter:saturate(.95);
}
.act-card:hover .img-wrap img{
  transform:scale(1.12);
  filter:saturate(1.15);
}

/* Bottom gradient overlay on image */
.act-card .img-wrap::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(15,76,58,.55) 0%, rgba(15,76,58,.1) 35%, transparent 60%);
  z-index:1;
  transition:opacity .4s ease;
}

/* Sparkle decoration on hover */
.act-card .img-wrap::before{
  content:"\f005 \f005 \f005";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  top:14px;left:14px;
  color:var(--yellow);
  font-size:.6rem;
  letter-spacing:8px;
  z-index:2;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .4s ease, transform .4s ease;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}
.act-card:hover .img-wrap::before{
  opacity:1;transform:translateY(0);
  animation:sparkleBlink 1.2s ease-in-out infinite;
}
@keyframes sparkleBlink{
  0%,100%{opacity:1}
  50%{opacity:.4}
}

/* ===== FLOATING ICON ===== */
.act-card .ic-floating{
  position:absolute;
  bottom:65px;right:18px;
  width:54px;height:54px;
  border-radius:16px;
  background:linear-gradient(135deg, var(--yellow), #FFC820);
  color:var(--green-deep);
  display:grid;place-items:center;
  font-size:1.2rem;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
  z-index:10;
  transition:transform .5s cubic-bezier(.3,1.4,.5,1), box-shadow .5s ease;
}

/* Pulsing ring around floating icon */
.act-card .ic-floating::before{
  content:"";position:absolute;inset:0;
  border-radius:16px;
  border:2px solid var(--yellow);
  opacity:0;
  animation:icRing 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes icRing{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.5);opacity:0}
}

/* Icon hover - bigger spin */
.act-card:hover .ic-floating{
  transform:translateY(-6px) rotate(-15deg) scale(1.15);
  box-shadow:0 14px 28px rgba(255,210,63,.45);
}

/* ===== CARD BODY ===== */
.act-card .body{
  padding:30px 20px 20px;
  position:relative;
}

/* Animated underline accent on body */
.act-card .body::before{
  content:"";position:absolute;
  top:14px;left:20px;
  width:0;height:3px;
  background:linear-gradient(90deg, var(--yellow), var(--orange));
  border-radius:2px;
  transition:width .5s cubic-bezier(.2,.8,.2,1.05);
}
.act-card:hover .body::before{width:36px}

.act-card h4{
  font-size:1.05rem;
  margin-bottom:6px;
  color:var(--green-deep);
  transition:color .3s ease;
}
.act-card:hover h4{color:var(--green)}

.act-card small{
  color:var(--muted);
  font-size:.82rem;
  display:block;
  line-height:1.45;
}

/* ===== STAGGERED ENTRANCE ===== */
.act-grid.reveal-stagger > .act-card{
  opacity:0;
  transform:translateY(40px) scale(.9);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1.05), transform .8s cubic-bezier(.2,.8,.2,1.05);
}
.act-grid.reveal-stagger.in > .act-card{
  opacity:1;
  transform:translateY(0) scale(1);
}
.act-grid.reveal-stagger.in > .act-card:nth-child(1){transition-delay:.05s}
.act-grid.reveal-stagger.in > .act-card:nth-child(2){transition-delay:.12s}
.act-grid.reveal-stagger.in > .act-card:nth-child(3){transition-delay:.19s}
.act-grid.reveal-stagger.in > .act-card:nth-child(4){transition-delay:.26s}
.act-grid.reveal-stagger.in > .act-card:nth-child(5){transition-delay:.33s}
.act-grid.reveal-stagger.in > .act-card:nth-child(6){transition-delay:.4s}
.act-grid.reveal-stagger.in > .act-card:nth-child(7){transition-delay:.47s}
.act-grid.reveal-stagger.in > .act-card:nth-child(8){transition-delay:.54s}
.act-grid.reveal-stagger.in > .act-card:nth-child(9){transition-delay:.61s}
.act-grid.reveal-stagger.in > .act-card:nth-child(10){transition-delay:.68s}
.act-grid.reveal-stagger.in > .act-card:nth-child(11){transition-delay:.75s}
.act-grid.reveal-stagger.in > .act-card:nth-child(12){transition-delay:.82s}

/* ===== Mobile ===== */
@media (max-width: 980px){
  .activities::after{width:240px;height:240px}
  .act-card .ic-floating{width:46px;height:46px;font-size:1rem}
}
@media (max-width: 600px){
  .activities::after{display:none}
}

/* ============================================== */
/* ============ WHY US (ENHANCED) =============== */
/* ============================================== */
.why{
  background:var(--cream-2);
  position:relative;
  overflow:hidden;
}

/* Decorative ambient blobs */
.why::before{
  content:"";position:absolute;
  top:20%;right:-100px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,210,63,.4), transparent 65%);
  filter:blur(40px);
  animation:whyBlob 14s ease-in-out infinite;
  pointer-events:none;
}
.why::after{
  content:"";position:absolute;
  bottom:10%;left:-80px;width:250px;height:250px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,143,163,.35), transparent 65%);
  filter:blur(40px);
  animation:whyBlob 16s ease-in-out infinite reverse;
  pointer-events:none;
}
@keyframes whyBlob{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(30px,-30px) scale(1.1)}
}

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

/* Top row: content left | image right */
.why-top-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:stretch;
  /* padding-bottom:40px; */
}
@media(max-width:860px){
  .why-top-grid{grid-template-columns:1fr;gap:40px}
}

/* Bottom row: 2 equal columns */
.why-bottom-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  /* padding-top:32px;
  border-top:1px solid var(--line); */
}
@media(max-width:700px){
  .why-bottom-grid{grid-template-columns:1fr}
}
.why-bottom-col{
  display:grid;
  gap:16px;
}

/* ===== LIST OF REASONS ===== */
.why-list{
  display:grid;
  gap:14px;
  margin-top:28px;
}

.why-item{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:18px 20px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  transition:transform .4s cubic-bezier(.2,.8,.2,1.05), box-shadow .4s ease, border-color .4s ease;
  position:relative;
  overflow:hidden;
}

/* Sliding gradient highlight on hover */
.why-item::before{
  content:"";position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,210,63,.0) 0%, rgba(255,210,63,.12) 100%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}

/* Decorative number badge */
.why-item::after{
  position:absolute;
  top:14px;right:18px;
  font-family:'Fraunces', serif;
  font-size:.9rem;
  font-weight:800;
  color:var(--green);
  opacity:.25;
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.why-list-top .why-item:nth-child(1)::after{content:"01"}
.why-list-top .why-item:nth-child(2)::after{content:"02"}
.why-list-top .why-item:nth-child(3)::after{content:"03"}
.why-list-top .why-item:nth-child(4)::after{content:"04"}
.why-list-top .why-item:nth-child(5)::after{content:"05"}
.why-bottom-col:first-child .why-item:nth-child(1)::after{content:"06"}
.why-bottom-col:first-child .why-item:nth-child(2)::after{content:"07"}
.why-bottom-col:last-child  .why-item:nth-child(1)::after{content:"08"}
.why-bottom-col:last-child  .why-item:nth-child(2)::after{content:"09"}

.why-item:hover{
  transform:translateX(8px);
  box-shadow:0 14px 30px rgba(15,76,58,.12);
  border-color:transparent;
}
.why-item:hover::before{opacity:1}
.why-item:hover::after{
  opacity:.6;
  transform:scale(1.2) rotate(-8deg);
}

/* Icon block */
.why-item .ic{
  flex:0 0 54px;
  width:54px;height:54px;
  border-radius:16px;
  background:var(--yellow);
  color:var(--green-deep);
  display:grid;place-items:center;
  font-size:1.25rem;
  position:relative;
  transition:transform .4s cubic-bezier(.3,1.4,.5,1), box-shadow .4s ease;
  z-index:1;
}

/* Pulsing ring around icon (always-on) */
.why-item .ic::before{
  content:"";position:absolute;inset:0;
  border-radius:16px;
  border:2px solid currentColor;
  opacity:0;
  animation:whyRing 3s ease-out infinite;
  pointer-events:none;
}
@keyframes whyRing{
  0%{transform:scale(1);opacity:.5}
  100%{transform:scale(1.5);opacity:0}
}

/* Per-item icon colors — top 5 */
.why-list-top .why-item:nth-child(2) .ic{background:#FFD6DE;color:#C7475F}
.why-list-top .why-item:nth-child(3) .ic{background:#D4F1E2;color:var(--green)}
.why-list-top .why-item:nth-child(4) .ic{background:#D9ECF7;color:#1F6F8B}
.why-list-top .why-item:nth-child(5) .ic{background:#E9DCFA;color:#6B4DBA}
/* Bottom items icon colors */
.why-bottom-col:first-child .why-item:nth-child(1) .ic{background:#FFE9D5;color:#D06A1B}
.why-bottom-col:first-child .why-item:nth-child(2) .ic{background:#D9ECF7;color:#1F6F8B}
.why-bottom-col:last-child  .why-item:nth-child(1) .ic{background:#D4F1E2;color:var(--green)}
.why-bottom-col:last-child  .why-item:nth-child(2) .ic{background:#FFD6DE;color:#C7475F}

/* Stagger delays for ring pulse so they don't all fire at same time */
.why-list-top .why-item:nth-child(1) .ic::before{animation-delay:0s}
.why-list-top .why-item:nth-child(2) .ic::before{animation-delay:.5s}
.why-list-top .why-item:nth-child(3) .ic::before{animation-delay:1s}
.why-list-top .why-item:nth-child(4) .ic::before{animation-delay:1.5s}
.why-list-top .why-item:nth-child(5) .ic::before{animation-delay:2s}

/* Icon hover - rotate and scale */
.why-item:hover .ic{
  transform:rotate(-12deg) scale(1.1);
  box-shadow:0 8px 20px rgba(15,76,58,.18);
}

/* Each icon has its own little animation */
.why-list-top .why-item:nth-child(1):hover .ic i{animation:iconShake .5s ease}
.why-list-top .why-item:nth-child(2):hover .ic i{animation:iconNod .6s ease}
.why-list-top .why-item:nth-child(3):hover .ic i{animation:iconGrow .6s ease}
.why-list-top .why-item:nth-child(4):hover .ic i{animation:iconSpin360 .6s ease}
.why-list-top .why-item:nth-child(5):hover .ic i{animation:iconBlink .6s ease}

@keyframes iconShake{
  0%,100%{transform:rotate(0)}
  20%,60%{transform:rotate(-15deg)}
  40%,80%{transform:rotate(15deg)}
}
@keyframes iconNod{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px) scale(1.15)}
}
@keyframes iconGrow{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.4) rotate(15deg)}
}
@keyframes iconSpin360{
  to{transform:rotate(360deg) scale(1.1)}
}
@keyframes iconBlink{
  0%,100%{opacity:1;transform:scale(1)}
  40%{opacity:.4;transform:scale(.9)}
  70%{opacity:1;transform:scale(1.2)}
}

/* Text content */
.why-item > div:last-child{flex:1;padding-right:30px}
.why-item h4{
  font-size:1.05rem;
  margin-bottom:4px;
  color:var(--green-deep);
  transition:color .3s ease;
}
.why-item:hover h4{color:var(--green)}
.why-item p{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.5;
}

/* ===== STAGGERED ENTRANCE ===== */
.why-list.reveal-stagger > .why-item{
  opacity:0;
  transform:translateX(-30px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1.05);
}
.why-list.reveal-stagger.in > .why-item{
  opacity:1;
  transform:translateX(0);
}
.why-list.reveal-stagger.in > .why-item:nth-child(1){transition-delay:.05s}
.why-list.reveal-stagger.in > .why-item:nth-child(2){transition-delay:.18s}
.why-list.reveal-stagger.in > .why-item:nth-child(3){transition-delay:.31s}
.why-list.reveal-stagger.in > .why-item:nth-child(4){transition-delay:.44s}
.why-list.reveal-stagger.in > .why-item:nth-child(5){transition-delay:.57s}

/* ===== VISUAL / IMAGE BLOCK ===== */
.why-visual{
  position:relative;
  padding:30px;
  display:flex;
  flex-direction:column;
}

/* Decorative dots pattern behind image */
.why-visual::before{
  content:"";position:absolute;
  bottom:5px;right:-10px;
  width:140px;height:140px;
  background-image:radial-gradient(circle, var(--green) 1.5px, transparent 2px);
  background-size:14px 14px;
  opacity:.3;
  z-index:0;
  animation:dotsFade 4s ease-in-out infinite;
}

/* Rotating dashed circle background */
.why-visual::after{
  content:"";position:absolute;
  top:-10px;left:-10px;
  width:120px;height:120px;border-radius:50%;
  border:3px dashed var(--orange);
  opacity:.4;
  animation:halfSpin 14s linear infinite;
  z-index:0;
}

.why-visual .pic{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  box-shadow:var(--shadow-pop);
  flex:1;
  min-height:320px;
  background:#e8e8e8;
  z-index:2;
  transition:transform .6s cubic-bezier(.2,.8,.2,1.05);
}
.why-visual .pic img{
  width:100%;height:790px;object-fit:cover;object-position:center top;
  transition:transform .8s ease;
}
.why-visual:hover .pic{
  transform:scale(1.02) rotate(-1deg);
}
.why-visual:hover .pic img{transform:scale(1.08)}

/* Animated rainbow gradient border */
.why-visual .pic::before{
  content:"";position:absolute;
  inset:-3px;
  border-radius:34px;
  background:linear-gradient(135deg, var(--green), var(--yellow), var(--orange), var(--pink));
  background-size:300% 300%;
  z-index:-1;
  animation:borderShift 7s linear infinite;
}

/* Dark gradient overlay on image bottom */
.why-visual .pic::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(15,76,58,.4), transparent 40%);
  pointer-events:none;
  z-index:1;
}

/* ===== FLOATING TAGS ===== */
.why-tag{
  position:absolute;
  background:#fff;
  border-radius:18px;
  padding:14px 18px;
  box-shadow:0 18px 40px rgba(15,76,58,.18);
  display:flex;align-items:center;gap:12px;
  z-index:3;
  transition:transform .4s cubic-bezier(.2,.8,.2,1.05), box-shadow .4s ease;
}
.why-tag:hover{
  transform:scale(1.08) translateY(-2px) !important;
  box-shadow:0 24px 50px rgba(15,76,58,.25);
}

.why-tag .ic{
  width:42px;height:42px;border-radius:12px;
  background:var(--green);
  color:var(--yellow);
  display:grid;place-items:center;
  flex-shrink:0;
  position:relative;
  font-size:1.05rem;
  transition:transform .4s ease;
}
.why-tag:hover .ic{
  animation:tagIcPop .6s cubic-bezier(.3,1.4,.5,1);
}
@keyframes tagIcPop{
  0%{transform:scale(1) rotate(0)}
  50%{transform:scale(1.25) rotate(-15deg)}
  100%{transform:scale(1) rotate(0)}
}

.why-tag b{
  color:var(--green-deep);
  font-size:.95rem;
  display:block;
  font-family:'Fraunces', serif;
}
.why-tag small{
  color:var(--muted);
  font-size:.75rem;
  display:block;
}

/* Tag positions with gentle bobbing */
.why-tag.t1{
  top:10px;right:-15px;
  animation:bob 4s ease-in-out infinite;
}
.why-tag.t2{
  bottom:30px;left:-15px;
  animation:bob 4s ease-in-out infinite .8s;
}

/* Sparkle dot on tag corner */
.why-tag::before{
  content:"";position:absolute;
  top:-4px;right:-4px;
  width:12px;height:12px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 0 var(--orange);
  animation:tagSparkle 2s ease-in-out infinite;
}
.why-tag.t2::before{
  background:var(--pink);
  box-shadow:0 0 0 0 var(--pink);
  left:-4px;right:auto;
}
@keyframes tagSparkle{
  0%,100%{box-shadow:0 0 0 0 currentColor}
  50%{box-shadow:0 0 0 8px transparent;transform:scale(1.3)}
}

/* ===== Mobile ===== */
@media (max-width: 980px){
  .why::before,.why::after{width:180px;height:180px}
  .why-visual{padding:20px}
  .why-visual::before,.why-visual::after{width:80px;height:80px}
}
@media (max-width: 600px){
  .why::before,.why::after{display:none}
  .why-visual::before,.why-visual::after{display:none}
  .why-item{padding:16px}
  .why-item::after{display:none}
}

/* ============================================== */
/* ============ COUNTER (ENHANCED) ============== */
/* ============================================== */
.counter-wrap{padding:0}

.counter{
  background:linear-gradient(135deg, var(--yellow) 0%, #FFC820 50%, #FFB800 100%);
  background-size:200% 200%;
  padding:70px 40px;
  border-radius:36px;
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(255,210,63,.4);
  animation:counterBgShift 15s ease infinite;
}
@keyframes counterBgShift{
  0%,100%{background-position:0% 0%}
  50%{background-position:100% 100%}
}

/* Big decorative circles with movement */
.counter::before{
  content:"";position:absolute;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle, rgba(15,76,58,.15), transparent 70%);
  top:-120px;right:-120px;
  animation:counterCircle1 18s ease-in-out infinite;
}
.counter::after{
  content:"";position:absolute;
  width:250px;height:250px;border-radius:50%;
  background:radial-gradient(circle, rgba(15,76,58,.15), transparent 70%);
  bottom:-100px;left:3%;
  animation:counterCircle2 20s ease-in-out infinite;
}
@keyframes counterCircle1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-30px,40px) scale(1.15)}
}
@keyframes counterCircle2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-30px) scale(1.1)}
}

/* Floating sparkle dots scattered around */
.counter-sparkles{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:1;
}
.counter-sparkles span{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--green-deep);
  opacity:.25;
  animation:sparkleFloat 6s ease-in-out infinite;
}
.counter-sparkles span:nth-child(1){top:20%;left:10%;animation-delay:0s}
.counter-sparkles span:nth-child(2){top:70%;left:18%;animation-delay:.8s;width:5px;height:5px}
.counter-sparkles span:nth-child(3){top:30%;left:88%;animation-delay:1.6s}
.counter-sparkles span:nth-child(4){top:75%;left:82%;animation-delay:2.4s;width:6px;height:6px}
.counter-sparkles span:nth-child(5){top:50%;left:48%;animation-delay:3.2s;width:4px;height:4px}
.counter-sparkles span:nth-child(6){top:15%;left:55%;animation-delay:4s}
.counter-sparkles span:nth-child(7){top:85%;left:42%;animation-delay:1.2s;width:5px;height:5px}
.counter-sparkles span:nth-child(8){top:40%;left:25%;animation-delay:2.8s;width:6px;height:6px}
@keyframes sparkleFloat{
  0%,100%{transform:translateY(0) scale(1);opacity:.25}
  50%{transform:translateY(-20px) scale(1.5);opacity:.6}
}

.counter-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  text-align:center;
  position:relative;
  z-index:2;
}

/* ===== COUNTER ITEM ===== */
.counter-item{
  position:relative;
  padding:14px 8px;
  border-radius:20px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1.05);
  cursor:default;
}

/* Decorative divider lines between items */
.counter-item:not(:last-child)::after{
  content:"";position:absolute;
  right:-15px;top:25%;bottom:25%;
  width:2px;
  background:linear-gradient(to bottom, transparent, rgba(15,76,58,.2), transparent);
}

.counter-item:hover{
  transform:translateY(-8px) scale(1.02);
}

/* ===== ICON ===== */
.counter-item .ic{
  width:70px;height:70px;
  border-radius:20px;
  background:linear-gradient(135deg, var(--green-deep), var(--green));
  color:var(--yellow);
  display:grid;place-items:center;
  margin:0 auto 18px;
  font-size:1.5rem;
  position:relative;
  box-shadow:0 12px 24px rgba(15,76,58,.3);
  transition:transform .4s cubic-bezier(.3,1.4,.5,1);
}

/* Rotating ring around icon */
.counter-item .ic::before{
  content:"";position:absolute;
  inset:-6px;
  border:2px dashed var(--green-deep);
  border-radius:24px;
  opacity:.4;
  animation:counterRing 8s linear infinite;
}

/* Pulse ring */
.counter-item .ic::after{
  content:"";position:absolute;inset:0;
  border-radius:20px;
  border:2px solid var(--green-deep);
  opacity:0;
  animation:counterPulse 2.5s ease-out infinite;
}
.counter-item:nth-child(2) .ic::after{animation-delay:.6s}
.counter-item:nth-child(3) .ic::after{animation-delay:1.2s}
.counter-item:nth-child(4) .ic::after{animation-delay:1.8s}

@keyframes counterRing{
  to{transform:rotate(360deg)}
}
@keyframes counterPulse{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(1.5);opacity:0}
}

/* Icon hover - bigger spin */
.counter-item:hover .ic{
  transform:rotate(-15deg) scale(1.15);
  box-shadow:0 16px 36px rgba(15,76,58,.45);
}

/* Icon-specific hover animations */
.counter-item:nth-child(1):hover .ic i{animation:trophyShake .6s ease}
.counter-item:nth-child(2):hover .ic i{animation:childWave .6s ease}
.counter-item:nth-child(3):hover .ic i{animation:puzzleSpin .8s ease}
.counter-item:nth-child(4):hover .ic i{animation:heartPump .6s ease}

@keyframes trophyShake{
  0%,100%{transform:rotate(0)}
  20%,60%{transform:rotate(-15deg) translateY(-3px)}
  40%,80%{transform:rotate(15deg) translateY(-3px)}
}
@keyframes childWave{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px) scale(1.2)}
}
@keyframes puzzleSpin{
  to{transform:rotate(360deg) scale(1.1)}
}
@keyframes heartPump{
  0%,100%{transform:scale(1)}
  20%{transform:scale(1.4)}
  40%{transform:scale(1)}
  60%{transform:scale(1.3)}
}

/* ===== NUMBER ===== */
.counter-num{
  font-family:'Fraunces', serif;
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  font-weight:800;
  color:var(--green-deep);
  line-height:1;
  display:inline-flex;
  align-items:baseline;
  position:relative;
  text-shadow:0 4px 0 rgba(15,76,58,.08);
}
.counter-num span:first-child{
  display:inline-block;
  background:linear-gradient(135deg, var(--green-deep), var(--green-soft));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:transform .3s ease;
}
.counter-item:hover .counter-num span:first-child{
  transform:scale(1.05);
}

.counter-num .plus{
  color:var(--green);
  font-size:.85em;
  margin-left:2px;
  display:inline-block;
  animation:plusBounce 2s ease-in-out infinite;
}
@keyframes plusBounce{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-6px) rotate(15deg)}
}

/* ===== LABEL ===== */
.counter-item p{
  font-weight:700;
  color:var(--green-deep);
  margin:8px auto 0;
  font-size:.95rem;
  letter-spacing:.02em;
  position:relative;
  display:block;
  width:fit-content;
}

/* Animated underline below label */
.counter-item p::after{
  content:"";
  position:absolute;
  left:50%;bottom:-4px;
  width:0;height:2px;
  background:var(--green-deep);
  border-radius:99px;
  transform:translateX(-50%);
  transition:width .4s cubic-bezier(.2,.8,.2,1.05);
}
.counter-item:hover p::after{width:60%}

/* ===== ENTRANCE ANIMATION ===== */
.counter-item{
  opacity:0;
  transform:translateY(30px) scale(.85);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1.05), transform .7s cubic-bezier(.2,.8,.2,1.05);
}
.counter.in .counter-item{
  opacity:1;
  transform:translateY(0) scale(1);
  animation:none;
}
.counter.in .counter-item:nth-child(1){transition-delay:.1s}
.counter.in .counter-item:nth-child(2){transition-delay:.25s}
.counter.in .counter-item:nth-child(3){transition-delay:.4s}
.counter.in .counter-item:nth-child(4){transition-delay:.55s}

/* ===== Mobile ===== */
@media (max-width: 980px){
  .counter{padding:50px 24px;border-radius:28px}
  .counter-grid{grid-template-columns:repeat(2,1fr);gap:36px}
  .counter-item:not(:last-child)::after{display:none}
  .counter-item:nth-child(odd)::after{
    content:"";position:absolute;
    right:-18px;top:25%;bottom:25%;
    width:2px;
    background:linear-gradient(to bottom, transparent, rgba(15,76,58,.2), transparent);
    display:block;
  }
}
@media (max-width: 600px){
  .counter{padding:40px 20px}
  .counter-grid{grid-template-columns:1fr 1fr;gap:24px}
  .counter-num{font-size:2.2rem}
  .counter-item .ic{width:54px;height:54px;font-size:1.2rem}
  .counter-item:nth-child(odd)::after{display:none}
  .counter-sparkles span{display:none}
}

/* ============================================== */
/* ============ ADMISSION (ENHANCED) ============ */
/* ============================================== */
.admission{
  background:var(--cream-2);
  position:relative;
  overflow:hidden;
}

/* Decorative ambient blobs */
.admission::before{
  content:"";position:absolute;
  top:10%;left:-100px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,210,63,.45), transparent 65%);
  filter:blur(40px);
  animation:admBlob 14s ease-in-out infinite;
  pointer-events:none;
}
.admission::after{
  content:"";position:absolute;
  bottom:0;right:-80px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,143,163,.35), transparent 65%);
  filter:blur(40px);
  animation:admBlob 16s ease-in-out infinite reverse;
  pointer-events:none;
}
@keyframes admBlob{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(20px,30px) scale(1.1)}
}

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

.adm-grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:50px;
  align-items:center;
}

/* ===== FORM CARD ===== */
.adm-form{
  background:#fff;
  border-radius:32px;
  padding:42px 38px;
  box-shadow:0 30px 60px rgba(15,76,58,.15);
  position:relative;
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.8,.2,1.05), box-shadow .5s ease;
}

/* Animated gradient border */
.adm-form::before{
  content:"";position:absolute;
  inset:-2px;
  border-radius:34px;
  background:linear-gradient(135deg, var(--yellow), var(--orange), var(--pink), var(--green));
  background-size:300% 300%;
  z-index:-1;
  opacity:0;
  transition:opacity .5s ease;
  animation:borderShift 7s linear infinite;
}
.adm-form:hover{
  transform:translateY(-4px);
  box-shadow:0 40px 80px rgba(15,76,58,.2);
}
.adm-form:hover::before{opacity:.6}

/* Decorative corner sparkle */
.adm-form::after{
  content:"\f005";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  top:18px;right:24px;
  font-size:.85rem;
  color:var(--orange);
  opacity:.6;
  animation:sparkleSpin 4s ease-in-out infinite;
}

.adm-form h3{
  font-size:1.65rem;
  margin-bottom:6px;
  background:linear-gradient(135deg, var(--green-deep), var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.adm-form > p{
  color:var(--muted);
  margin-bottom:24px;
  font-size:.92rem;
}

/* ===== FORM FIELDS ===== */
.field{
  margin-bottom:16px;
  position:relative;
}
.field label{
  display:block;
  font-size:.82rem;
  font-weight:700;
  margin-bottom:7px;
  color:var(--green-deep);
  letter-spacing:.02em;
  transition:color .3s ease;
}
.field:focus-within label{color:var(--orange)}

/* Required label gets a small star */
.field label::after{
  content:"";
}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:2px solid var(--line);
  background:var(--cream-2);
  font-family:inherit;
  font-size:.93rem;
  color:var(--ink);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--green);
  background:#fff;
  box-shadow:0 0 0 4px rgba(15,76,58,.1);
  transform:translateY(-2px);
}

/* Invalid state styling (after first attempt) */
.field input.invalid,
.field select.invalid,
.field textarea.invalid{
  border-color:#E55A6E;
  background:#FFF5F6;
  animation:fieldShake .5s ease;
}
@keyframes fieldShake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-6px)}
  40%,80%{transform:translateX(6px)}
}

.field textarea{
  resize:vertical;
  min-height:90px;
}

.row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

/* ===== SUBMIT BUTTON ===== */
.adm-form button[type="submit"]{
  width:100%;
  justify-content:center;
  padding:16px;
  margin-top:6px;
  font-size:1rem;
  position:relative;
  overflow:hidden;
}

/* Status message below form */
.form-status{
  font-size:.78rem;
  color:var(--muted);
  margin-top:14px;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:color .3s ease;
}
.form-status.success{color:var(--green)}
.form-status.error{color:#E55A6E}
.form-status i{transition:transform .3s ease}
.form-status.success i{animation:iconNod .6s ease}

/* ===== VISUAL / IMAGE BLOCK ===== */
.adm-visual{
  position:relative;
  padding:30px;
}

/* Decorative floating shapes */
.adm-visual::before{
  content:"";position:absolute;
  top:-10px;right:-10px;
  width:130px;height:130px;
  background-image:radial-gradient(circle, var(--orange) 1.5px, transparent 2px);
  background-size:14px 14px;
  opacity:.3;
  z-index:0;
  animation:dotsFade 4s ease-in-out infinite;
}
.adm-visual::after{
  content:"";position:absolute;
  bottom:20px;left:0;
  width:90px;height:90px;border-radius:50%;
  border:4px dashed var(--green);
  border-right-color:transparent;
  opacity:.35;
  animation:halfSpin 12s linear infinite;
  z-index:0;
}

.adm-visual .pic{
  position:relative;
  border-radius:30px 30px 30px 100px;
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 30px 60px rgba(15,76,58,.2);
  background:#e8e8e8;
  z-index:2;
  transition:transform .6s cubic-bezier(.2,.8,.2,1.05);
}
.adm-visual .pic img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s ease;
}
.adm-visual:hover .pic{
  transform:rotate(-1deg) scale(1.02);
}
.adm-visual:hover .pic img{transform:scale(1.08)}

/* Animated rainbow border */
.adm-visual .pic::before{
  content:"";position:absolute;
  inset:-3px;
  border-radius:33px 33px 33px 103px;
  background:linear-gradient(135deg, var(--yellow), var(--orange), var(--pink), var(--green));
  background-size:300% 300%;
  z-index:-1;
  animation:borderShift 7s linear infinite;
}

/* ===== STICKERS ===== */
.sticker{
  position:absolute;
  background:#fff;
  border-radius:18px;
  padding:14px 18px;
  box-shadow:0 18px 40px rgba(15,76,58,.18);
  z-index:3;
  transition:transform .4s cubic-bezier(.2,.8,.2,1.05);
}
.sticker:hover{
  transform:scale(1.08) !important;
}

/* Sticker 1 - Quick Reply */
.sticker.s1{
  top:5px;left:-15px;
  display:flex;align-items:center;gap:12px;
  animation:bob 4.5s ease-in-out infinite;
}
.sticker.s1 .ic{
  width:46px;height:46px;border-radius:14px;
  background:linear-gradient(135deg, var(--yellow), #FFC820);
  color:var(--green-deep);
  display:grid;place-items:center;flex-shrink:0;
  font-size:1.05rem;
  position:relative;
  transition:transform .4s ease;
}

/* Pulsing ring on bolt icon */
.sticker.s1 .ic::before{
  content:"";position:absolute;inset:0;
  border-radius:14px;
  border:2px solid var(--yellow);
  opacity:0;
  animation:counterPulse 2s ease-out infinite;
}

.sticker.s1:hover .ic{
  animation:tagIcPop .6s cubic-bezier(.3,1.4,.5,1);
}
.sticker.s1 b{
  display:block;color:var(--green-deep);
  font-size:.95rem;line-height:1.2;
  font-family:'Fraunces', serif;
}
.sticker.s1 small{color:var(--muted);font-size:.78rem}

/* Sparkle dot */
.sticker.s1::before{
  content:"";position:absolute;
  top:-4px;right:-4px;
  width:12px;height:12px;border-radius:50%;
  background:var(--orange);
  animation:tagSparkle 2s ease-in-out infinite;
}

/* Sticker 2 - Free badge */
.sticker.s2{
  bottom:30px;right:-15px;
  background:linear-gradient(135deg, var(--green), var(--green-deep));
  color:#fff;
  border-radius:20px;
  padding:18px 22px;
  text-align:center;
  animation:bob 5s ease-in-out infinite .5s;
  min-width:130px;
}
.sticker.s2 b{
  font-family:'Fraunces',serif;
  font-size:1.7rem;
  display:block;
  color:var(--yellow);
  line-height:1;
  margin-bottom:4px;
}
.sticker.s2 small{
  font-size:.78rem;
  opacity:.9;
}

/* Sparkle dot on green sticker */
.sticker.s2::before{
  content:"";position:absolute;
  top:-4px;left:-4px;
  width:12px;height:12px;border-radius:50%;
  background:var(--pink);
  animation:tagSparkle 2s ease-in-out infinite .5s;
}

/* ===== Mobile ===== */
@media (max-width: 980px){
  .adm-form{padding:32px 26px}
  .adm-form h3{font-size:1.4rem}
  .admission::before,.admission::after{width:180px;height:180px}
}
@media (max-width: 600px){
  .row-2{grid-template-columns:1fr}
  .adm-form{padding:26px 22px}
  .admission::before,.admission::after{display:none}
  .adm-visual{padding:20px}
  .adm-visual::before,.adm-visual::after{display:none}
}

/* ============================================== */
/* ============ GALLERY (CAVE SLIDER) =========== */
/* ============================================== */
.gallery{
  background:var(--cream);
  position:relative;
  overflow:hidden;
}

/* Decorative ambient blobs */
.gallery::before{
  content:"";position:absolute;
  top:5%;right:-100px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,210,63,.45), transparent 65%);
  filter:blur(40px);
  animation:galBlob 14s ease-in-out infinite;
  pointer-events:none;
}
.gallery::after{
  content:"";position:absolute;
  bottom:5%;left:-100px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,143,163,.4), transparent 65%);
  filter:blur(40px);
  animation:galBlob 16s ease-in-out infinite reverse;
  pointer-events:none;
}
@keyframes galBlob{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-20px,30px) scale(1.1)}
}

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

/* ===== CAVE SLIDER WRAPPER ===== */
.cave-slider{
  position:relative;
  height:520px;
  margin:30px auto 0;
  max-width:1200px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1400px;
  user-select:none;
}

/* ===== SLIDES (3 visible: prev / active / next) ===== */
.cave-slide{
  position:absolute;
  width:420px;
  height:480px;
  border-radius:28px;
  overflow:hidden;
  background:#e8e8e8;
  box-shadow:0 30px 60px rgba(15,76,58,.25);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transition:transform .8s cubic-bezier(.4,0,.2,1),
             opacity .6s ease,
             filter .6s ease,
             box-shadow .6s ease;
  transform:scale(.5);
  z-index:0;
  pointer-events:none;
}

.cave-slide img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s ease;
}

/* ─── ACTIVE (center, largest) ─── */
.cave-slide.active{
  opacity:1;
  visibility:visible;
  transform:scale(1) translateX(0);
  z-index:5;
  pointer-events:auto;
  filter:none;
  box-shadow:0 40px 80px rgba(15,76,58,.3);
}

/* ───────────────────────────────────────────── */
/*    PREV (left side, slightly smaller)          */
/* ───────────────────────────────────────────── */
.cave-slide.prev{
  opacity:.75;
  visibility:visible;
  transform:scale(.82) translateX(-95%);
  z-index:3;
  pointer-events:auto;
  filter:brightness(.92);
  box-shadow:0 18px 36px rgba(15,76,58,.18);
}

/* ───────────────────────────────────────────── */
/*    NEXT (right side, slightly smaller)         */
/* ───────────────────────────────────────────── */
.cave-slide.next{
  opacity:.75;
  visibility:visible;
  transform:scale(.82) translateX(95%);
  z-index:3;
  pointer-events:auto;
  filter:brightness(.92);
  box-shadow:0 18px 36px rgba(15,76,58,.18);
}

/* Hover on prev/next adds subtle highlight */
.cave-slide.prev:hover,
.cave-slide.next:hover{
  filter:brightness(1);
  opacity:.92;
}

/* Active slide image zoom subtle on hover */
.cave-slide.active:hover img{transform:scale(1.05)}

/* ===== CAPTION OVERLAY ===== */
.cave-slide .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(15,76,58,.92) 0%, rgba(15,76,58,.4) 30%, transparent 55%);
  display:flex;
  align-items:flex-end;
  padding:32px 28px;
  color:#fff;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s ease;
}
.cave-slide.active .overlay{opacity:1}

.cave-slide .overlay > div{
  transform:translateY(20px);
  transition:transform .6s cubic-bezier(.2,.8,.2,1.05) .2s;
}
.cave-slide.active .overlay > div{transform:translateY(0)}

.cave-slide .overlay b{
  font-family:'Fraunces', serif;
  font-size:1.5rem;
  display:block;
  margin-bottom:6px;
}
.cave-slide .overlay small{
  font-size:.95rem;
  opacity:.9;
  display:block;
}

/* Sparkle decorator */
.cave-slide.active .overlay::before{
  content:"\f005";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  top:24px;right:28px;
  font-size:1.2rem;
  color:var(--yellow);
  animation:sparkleSpin 4s ease-in-out infinite;
}

/* Number badge on active slide */
.cave-slide.active::before{
  content:attr(data-num);
  position:absolute;
  top:20px;left:20px;
  width:42px;height:42px;
  background:var(--yellow);
  color:var(--green-deep);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:'Fraunces', serif;
  font-weight:800;
  font-size:1rem;
  z-index:3;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  animation:badgePopIn .6s cubic-bezier(.3,1.4,.5,1);
}
@keyframes badgePopIn{
  from{transform:scale(0) rotate(-180deg);opacity:0}
  to{transform:scale(1) rotate(0);opacity:1}
}

/* ===== NAVIGATION ARROWS ===== */
.cave-arrows{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  display:flex;
  justify-content:space-between;
  pointer-events:none;
  z-index:10;
  padding:0 16px;
}
.cave-arrow{
  width:54px;
  height:54px;
  border-radius:50%;
  background:#fff;
  color:var(--green-deep);
  display:grid;
  place-items:center;
  box-shadow:0 12px 30px rgba(15,76,58,.18);
  cursor:pointer;
  pointer-events:auto;
  transition:transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
  border:none;
  font-size:1rem;
}
.cave-arrow:hover{
  background:var(--green);
  color:#fff;
  transform:scale(1.12);
  box-shadow:0 16px 40px rgba(15,76,58,.3);
}

/* ===== DOTS NAVIGATION (hidden — using arrows + click only) ===== */
.cave-dots{display:none}

/* ===== CTA BUTTON (force-centered) ===== */
.gallery-cta{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:50px;
  position:relative;
  z-index:2;
  text-align:center;
}

/* ===== Mobile ===== */
@media (max-width: 980px){
  .cave-slider{height:440px}
  .cave-slide{width:340px;height:400px}
  .cave-slide.prev{transform:scale(.78) translateX(-95%)}
  .cave-slide.next{transform:scale(.78) translateX(95%)}
  .cave-arrow{width:46px;height:46px;font-size:.9rem}
}
@media (max-width: 600px){
  .cave-slider{height:380px}
  .cave-slide{width:260px;height:340px}
  .cave-slide.prev{transform:scale(.7) translateX(-92%);opacity:.55}
  .cave-slide.next{transform:scale(.7) translateX(92%);opacity:.55}
  .cave-slide .overlay b{font-size:1.2rem}
  .cave-slide .overlay small{font-size:.82rem}
  .cave-arrow{width:42px;height:42px}
  .cave-arrows{padding:0 4px}
  .gallery::before,.gallery::after{display:none}
}

/* ============================================== */
/* ============ TESTIMONIALS (ENHANCED) ========= */
/* ============================================== */
.testimonials{
  background:var(--cream-2);
  position:relative;
  overflow:hidden;
}

/* Decorative ambient blobs */
.testimonials::before{
  content:"";position:absolute;
  top:10%;right:-100px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,210,63,.4), transparent 65%);
  filter:blur(40px);
  animation:tBlob 14s ease-in-out infinite;
  pointer-events:none;
}
.testimonials::after{
  content:"";position:absolute;
  bottom:5%;left:-100px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,143,163,.4), transparent 65%);
  filter:blur(40px);
  animation:tBlob 16s ease-in-out infinite reverse;
  pointer-events:none;
}
@keyframes tBlob{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(20px,-30px) scale(1.1)}
}

/* Big decorative quote marks scattered in background */
.testimonials .container{position:relative;z-index:2}
.testimonials .container::before{
  content:"\201C";
  position:absolute;
  top:80px;left:20px;
  font-family:'Fraunces', serif;
  font-size:14rem;
  color:var(--yellow);
  opacity:.15;
  line-height:1;
  pointer-events:none;
  z-index:0;
  animation:bigQuoteFloat 8s ease-in-out infinite;
}
@keyframes bigQuoteFloat{
  0%,100%{transform:translateY(0) rotate(-5deg)}
  50%{transform:translateY(-15px) rotate(5deg)}
}

.t-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  position:relative;
  z-index:1;
}

/* ===== TESTIMONIAL SLIDER ===== */
.t-slider{
  position:relative;
  max-width:780px;
  margin:0 auto;
  z-index:1;
}

.t-track{
  position:relative;
  min-height:340px;
}

.t-track > .t-card{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transform:translateX(40px) scale(.96);
  transition:opacity .6s ease,
             transform .6s cubic-bezier(.2,.8,.2,1.05),
             visibility .6s;
  pointer-events:none;
}

.t-track > .t-card.active{
  opacity:1;
  visibility:visible;
  transform:translateX(0) scale(1);
  pointer-events:auto;
}

/* Slide-out direction (left when going forward) */
.t-track > .t-card.exit-left{
  transform:translateX(-40px) scale(.96);
}

/* ===== CONTROLS (hidden — auto-rotates only) ===== */
.t-controls{display:none}

/* ===== TESTIMONIAL CARD ===== */
.t-card{
  background:#fff;
  border-radius:24px;
  padding:32px 28px 28px;
  border:1px solid var(--line);
  position:relative;
  transition:transform .5s cubic-bezier(.2,.8,.2,1.05),
             box-shadow .5s ease,
             border-color .4s ease;
  overflow:hidden;
}

/* Big quote mark on each card */
.t-card::before{
  content:"\201C";
  position:absolute;
  top:14px;right:22px;
  font-family:'Fraunces', serif;
  font-size:5rem;
  color:var(--yellow);
  line-height:1;
  z-index:0;
  transition:transform .5s cubic-bezier(.3,1.4,.5,1), color .4s ease;
}
.t-card:hover::before{
  transform:scale(1.2) rotate(-8deg);
  color:var(--orange);
}

/* Per-card aura (different colors) */
.t-card::after{
  content:"";position:absolute;
  inset:-2px;border-radius:26px;
  z-index:-1;opacity:0;
  filter:blur(20px);
  transition:opacity .5s ease;
}
.t-card:nth-child(1)::after{background:linear-gradient(135deg, var(--green), var(--green-soft))}
.t-card:nth-child(2)::after{background:linear-gradient(135deg, var(--orange), var(--yellow))}
.t-card:nth-child(3)::after{background:linear-gradient(135deg, var(--pink), #FF6080)}

/* Hover effects */
.t-card:hover{
  transform:translateY(-12px);
  box-shadow:0 30px 60px rgba(15,76,58,.18);
  border-color:transparent;
}
.t-card:hover::after{opacity:.4}

/* Top accent stripe per card color */
.t-card{position:relative}
.t-card .stripe-accent{
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s cubic-bezier(.2,.8,.2,1.05);
  z-index:1;
}
.t-card:nth-child(1) .stripe-accent{background:linear-gradient(90deg, var(--green), var(--green-soft))}
.t-card:nth-child(2) .stripe-accent{background:linear-gradient(90deg, var(--orange), var(--yellow))}
.t-card:nth-child(3) .stripe-accent{background:linear-gradient(90deg, var(--pink), #FF6080)}
.t-card:hover .stripe-accent{transform:scaleX(1)}

/* ===== STARS ===== */
.stars{
  color:var(--orange);
  margin-bottom:14px;
  font-size:1rem;
  display:inline-flex;
  gap:3px;
  position:relative;
  z-index:1;
}
.stars i{
  display:inline-block;
  animation:starShimmer 3s ease-in-out infinite;
  filter:drop-shadow(0 2px 4px rgba(255,140,66,.3));
}
.stars i:nth-child(1){animation-delay:0s}
.stars i:nth-child(2){animation-delay:.2s}
.stars i:nth-child(3){animation-delay:.4s}
.stars i:nth-child(4){animation-delay:.6s}
.stars i:nth-child(5){animation-delay:.8s}
@keyframes starShimmer{
  0%,100%{transform:scale(1) rotate(0);opacity:1}
  50%{transform:scale(1.15) rotate(15deg);opacity:.85}
}
.t-card:hover .stars i{
  animation:starBounce .6s ease;
}
@keyframes starBounce{
  0%,100%{transform:translateY(0) rotate(0)}
  40%{transform:translateY(-8px) rotate(-15deg) scale(1.2)}
  70%{transform:translateY(-2px) rotate(10deg)}
}

/* ===== QUOTE TEXT ===== */
.t-card p{
  color:var(--muted);
  font-size:.95rem;
  margin-bottom:22px;
  line-height:1.65;
  position:relative;
  z-index:1;
  transition:color .3s ease;
}
.t-card:hover p{color:var(--ink)}

/* ===== META (avatar + name) ===== */
.t-meta{
  display:flex;
  align-items:center;
  gap:14px;
  border-top:1px solid var(--line);
  padding-top:18px;
  position:relative;
  z-index:1;
  transition:border-color .3s ease;
}
.t-card:hover .t-meta{border-color:var(--green)}

/* Avatar with ring + scale effect */
.t-avatar{
  width:52px;height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:'Fraunces', serif;
  font-weight:800;
  color:#fff;
  font-size:1.05rem;
  flex-shrink:0;
  position:relative;
  transition:transform .4s cubic-bezier(.3,1.4,.5,1);
}

/* Pulsing ring around avatar */
.t-avatar::before{
  content:"";position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px dashed currentColor;
  opacity:.5;
  animation:avatarRing 8s linear infinite;
}
@keyframes avatarRing{to{transform:rotate(360deg)}}

/* Pulse aura on avatar */
.t-avatar::after{
  content:"";position:absolute;inset:0;
  border-radius:50%;
  border:2px solid currentColor;
  opacity:0;
  animation:avatarPulse 2.5s ease-out infinite;
}
.t-card:nth-child(2) .t-avatar::after{animation-delay:.5s}
.t-card:nth-child(3) .t-avatar::after{animation-delay:1s}
@keyframes avatarPulse{
  0%{transform:scale(1);opacity:.5}
  100%{transform:scale(1.5);opacity:0}
}

.t-card:hover .t-avatar{
  transform:scale(1.1) rotate(-8deg);
}

.t-meta b{
  display:block;
  color:var(--green-deep);
  font-size:1rem;
  font-family:'Fraunces', serif;
  transition:color .3s ease;
}
.t-card:hover .t-meta b{color:var(--green)}

.t-meta small{
  color:var(--muted);
  font-size:.82rem;
  display:block;
  margin-top:2px;
}

/* Mobile */
@media (max-width: 980px){
  .testimonials::before,.testimonials::after{width:200px;height:200px}
  .testimonials .container::before{font-size:9rem;left:10px;top:60px}
}
@media (max-width: 600px){
  .testimonials::before,.testimonials::after{display:none}
  .testimonials .container::before{display:none}
  .t-card{padding:26px 22px 22px}
}

/* ============================================== */
/* ============ FOOTER (ENHANCED) =============== */
/* ============================================== */
footer{
  background:linear-gradient(180deg, var(--green-deep) 0%, #0a3528 100%);
  color:#fff;
  padding:80px 0 0;
  position:relative;
  overflow:hidden;
}

/* Decorative top wave divider */
footer::before{
  content:"";position:absolute;
  top:0;left:0;right:0;
  height:6px;
  background:linear-gradient(90deg,
    var(--yellow) 0%,
    var(--orange) 25%,
    var(--pink) 50%,
    var(--green) 75%,
    var(--yellow) 100%);
  background-size:200% 100%;
  animation:footerStripeFlow 8s linear infinite;
  z-index:5;
}
@keyframes footerStripeFlow{
  to{background-position:200% 0}
}

/* Ambient glow blobs */
footer::after{
  content:"";position:absolute;
  top:-60px;right:10%;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,210,63,.18), transparent 70%);
  filter:blur(40px);
  pointer-events:none;
  animation:footerBlob 14s ease-in-out infinite;
}
@keyframes footerBlob{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-30px,30px) scale(1.2)}
}

/* ===== FLOATING PARTICLES ===== */
.footer-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.footer-particles span{
  position:absolute;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--yellow);
  opacity:.3;
  animation:particleFloat 8s ease-in-out infinite;
}
.footer-particles span:nth-child(1){top:15%;left:8%;animation-delay:0s}
.footer-particles span:nth-child(2){top:60%;left:18%;animation-delay:1.2s;width:4px;height:4px}
.footer-particles span:nth-child(3){top:25%;left:45%;animation-delay:2.4s}
.footer-particles span:nth-child(4){top:80%;left:55%;animation-delay:3.6s;width:5px;height:5px}
.footer-particles span:nth-child(5){top:40%;left:75%;animation-delay:4.8s}
.footer-particles span:nth-child(6){top:70%;left:88%;animation-delay:1.8s;width:4px;height:4px}
.footer-particles span:nth-child(7){top:10%;left:65%;animation-delay:6s}
.footer-particles span:nth-child(8){top:50%;left:35%;animation-delay:3s;width:5px;height:5px}
@keyframes particleFloat{
  0%,100%{transform:translateY(0) scale(1);opacity:.3}
  50%{transform:translateY(-25px) scale(1.4);opacity:.7}
}

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

.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.1fr;
  gap:40px;
  margin-bottom:50px;
}

/* ===== BRAND BLOCK ===== */
.footer-brand{
  position:relative;
}

/* Logo + text (now stacked vertically) */
.footer-logo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  text-decoration:none;
  margin-bottom:20px;
}
.footer-logo-img{
  width:150px;
  height:170px;
  border-radius:20px;
  background:rgba(255,255,255,.06);
  padding:6px;
  display:grid;
  place-items:center;
  position:relative;
  transition:transform .5s cubic-bezier(.3,1.4,.5,1);
  box-shadow:0 12px 28px rgba(0,0,0,.3);
}

/* Glow ring around logo */
.footer-logo-img::before{
  content:"";position:absolute;
  inset:-3px;
  border-radius:23px;
  background:linear-gradient(135deg, var(--yellow), var(--orange), var(--pink), var(--green));
  background-size:300% 300%;
  z-index:-1;
  animation:borderShift 6s linear infinite;
  opacity:.6;
}

/* Pulsing aura */
.footer-logo-img::after{
  content:"";position:absolute;
  inset:0;
  border-radius:20px;
  border:2px solid var(--yellow);
  opacity:0;
  animation:logoPulse 2.5s ease-out infinite;
}
@keyframes logoPulse{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(1.3);opacity:0}
}

.footer-logo-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:14px;
  display:block;
}

.footer-logo:hover .footer-logo-img{
  transform:rotate(-6deg) scale(1.05);
}

.footer-logo-text b{
  color:#fff;
  font-family:'Fraunces', serif;
  font-size:1.7rem;
  display:block;
  line-height:1.1;
  background:linear-gradient(135deg, #fff, var(--yellow));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:4px;
}
.footer-logo-text span{
  color:rgba(255,255,255,.7);
  font-size:.82rem;
  display:block;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
}

.footer-tagline{
  color:rgba(255,255,255,.7);
  margin:0 0 24px;
  font-size:.93rem;
  line-height:1.65;
  max-width:340px;
}

/* ===== SOCIALS ===== */
.socials{
  display:flex;
  gap:10px;
}
.soc{
  width:44px;height:44px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:#fff;
  display:inline-grid;place-items:center;
  transition:transform .4s cubic-bezier(.3,1.4,.5,1), background .3s ease, color .3s ease, box-shadow .3s ease;
  position:relative;
  font-size:.95rem;
  overflow:hidden;
}

/* Sliding background fill on hover */
.soc::before{
  content:"";position:absolute;inset:0;
  background:var(--yellow);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1.05);
  z-index:0;
}
.soc i{position:relative;z-index:1;transition:transform .35s ease}

.soc:hover{
  transform:translateY(-6px) rotate(-8deg);
  box-shadow:0 12px 26px rgba(255,210,63,.4);
  color:var(--green-deep);
}
.soc:hover::before{transform:translateY(0)}
.soc:hover i{transform:scale(1.2)}

/* Per-network color hint */
.soc.fb:hover::before{background:#1877F2;}
.soc.fb:hover{color:#fff;box-shadow:0 12px 26px rgba(24,119,242,.4)}
.soc.ig:hover::before{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.soc.ig:hover{color:#fff;box-shadow:0 12px 26px rgba(221,42,123,.4)}
.soc.yt:hover::before{background:#FF0000}
.soc.yt:hover{color:#fff;box-shadow:0 12px 26px rgba(255,0,0,.4)}
.soc.wa:hover::before{background:#25D366}
.soc.wa:hover{color:#fff;box-shadow:0 12px 26px rgba(37,211,102,.4)}

/* ===== COLUMN HEADINGS ===== */
.footer-col h4,
footer h4{
  color:var(--yellow);
  font-size:1.1rem;
  margin-bottom:20px;
  position:relative;
  font-family:'Fraunces', serif;
  display:inline-block;
  padding-bottom:10px;
}

/* Animated underline below h4 */
.footer-col h4::after,
footer h4::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:30px;
  height:3px;
  background:linear-gradient(90deg, var(--yellow), var(--orange));
  border-radius:99px;
  transition:width .5s cubic-bezier(.2,.8,.2,1.05);
}
.footer-col:hover h4::after{width:60px}

/* ===== LIST LINKS ===== */
footer ul{list-style:none;padding:0;margin:0}
footer ul li{margin-bottom:12px}
footer ul a{
  color:rgba(255,255,255,.78);
  font-size:.92rem;
  transition:color .3s ease, transform .3s ease, padding-left .3s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
  position:relative;
}
footer ul a::before{
  content:"›";
  color:var(--yellow);
  font-weight:700;
  font-size:1.1rem;
  transition:transform .3s ease;
}
footer ul a:hover{
  color:var(--yellow);
  padding-left:6px;
}
footer ul a:hover::before{
  transform:translateX(4px);
}

/* ===== CONTACT LINES ===== */
.contact-line{
  display:flex;
  gap:14px;
  margin-bottom:16px;
  font-size:.9rem;
  color:rgba(255,255,255,.85);
  align-items:flex-start;
  transition:transform .3s ease;
}
.contact-line:hover{
  transform:translateX(4px);
}
.contact-line:hover .ic{
  background:var(--yellow);
  color:var(--green-deep);
  transform:rotate(-8deg) scale(1.1);
}

.contact-line .ic{
  flex:0 0 38px;
  width:38px;height:38px;
  border-radius:12px;
  background:rgba(255,210,63,.15);
  color:var(--yellow);
  display:grid;place-items:center;
  font-size:.9rem;
  transition:transform .3s ease, background .3s ease, color .3s ease;
}

.contact-line a{
  color:#fff;
  font-weight:600;
  transition:color .3s ease;
}
.contact-line a:hover{color:var(--yellow)}

/* ===== MINI MAP (Google Maps embed) ===== */
.map-mini{
  border-radius:18px;
  overflow:hidden;
  height:180px;
  background:#1a5944;
  margin-top:14px;
  position:relative;
  border:2px solid rgba(255,255,255,.12);
  transition:border-color .4s ease, transform .4s ease, box-shadow .4s ease;
  box-shadow:0 12px 30px rgba(0,0,0,.2);
}
.map-mini:hover{
  border-color:var(--yellow);
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(255,210,63,.2);
}

/* The iframe itself */
.map-mini iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  filter:saturate(1.1) contrast(1.05);
  transition:filter .4s ease;
}
.map-mini:hover iframe{
  filter:saturate(1.2) contrast(1.1);
}

/* Floating "Open in Google Maps" link overlay (bottom) */
.map-overlay{
  position:absolute;
  bottom:10px;left:10px;
  background:var(--yellow);
  color:var(--green-deep);
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:.78rem;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  text-decoration:none;
  z-index:3;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  animation:bob 3.5s ease-in-out infinite;
}
.map-overlay:hover{
  transform:scale(1.06) translateY(-2px);
  box-shadow:0 12px 28px rgba(255,210,63,.45);
  background:#FFC820;
  color:var(--green-deep);
}

/* Pulsing dot on the overlay icon */
.map-overlay i{
  color:var(--green-deep);
  animation:pinPulseDot 2s ease-in-out infinite;
}
@keyframes pinPulseDot{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.25);opacity:.85}
}

/* ===== COPY (footer bottom) ===== */
.copy{
  border-top:1px solid rgba(255,255,255,.12);
  padding:24px 0;
  text-align:center;
  color:rgba(255,255,255,.6);
  font-size:.85rem;
  position:relative;
}
.copy strong{color:#fff}
.copy a{color:var(--yellow)}

/* Beating heart */
.copy-heart{
  color:var(--yellow);
  display:inline-block;
  animation:heartBeatCopy 1.4s ease-in-out infinite;
  margin:0 2px;
}
@keyframes heartBeatCopy{
  0%,40%,100%{transform:scale(1)}
  20%{transform:scale(1.3)}
  60%{transform:scale(1.15)}
}

/* ===== Mobile ===== */
@media (max-width: 980px){
  footer{padding:60px 0 0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width: 600px){
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-particles{display:none}
  .footer-logo-img{width:170px;height:180px}
}

/* ============ WHATSAPP FLOAT ============ */
.wa-float{
  position:fixed;bottom:22px;right:22px;z-index:60;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;
  display:grid;place-items:center;font-size:1.5rem;
  box-shadow:0 10px 30px rgba(37,211,102,.4);
  animation:pulseWA 2.4s ease-in-out infinite;
}
@keyframes pulseWA{
  0%,100%{box-shadow:0 10px 30px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.5)}
  50%{box-shadow:0 10px 30px rgba(37,211,102,.4), 0 0 0 16px rgba(37,211,102,0)}
}

/* ============ REVEAL ANIMATION ============ */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.in{opacity:1;transform:translateY(0)}

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

/* Tablet */
@media (max-width: 1100px){
  .services-grid, .act-grid{grid-template-columns:repeat(3,1fr)}
}

/* Mobile */
@media (max-width: 980px){
  .topbar{display:none}

  /* Mobile menu */
  .menu{
    display:none;position:fixed;top:78px;left:12px;right:12px;
    flex-direction:column;background:#fff;padding:16px;gap:4px;
    box-shadow:var(--shadow-pop);border:1px solid var(--line);
    border-radius:20px;z-index:55;
  }
  .menu.open{display:flex;align-items:stretch;animation:dropDown .3s ease}
  @keyframes dropDown{
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:translateY(0)}
  }
  .menu a{text-align:left;padding:12px 16px}
  .menu-toggle{display:block}
  .nav-cta{padding:10px 14px;font-size:.82rem}
  .nav-cta span{display:none}

  /* Hero stack vertical — TEXT FIRST, IMAGE BELOW (CHANGE 1) */
  .hero{padding:30px 0 50px}
  .slides-wrap{min-height:auto}
  .slide{
    position:relative;inset:auto;
    grid-template-columns:1fr;gap:30px;
    opacity:0;visibility:hidden;
    transition:none;display:none;
  }
  .slide.active{display:grid}
  .slide-visual{height:340px}
  .slide-visual .frame{width:300px;height:300px;border-radius:50%}
  .slide-visual::before{width:340px;height:340px}
  .slide-visual::after{width:370px;height:370px}
  .float-badge{padding:10px 12px}
  .float-badge b{font-size:.82rem}
  .float-badge small{font-size:.7rem}
  .float-badge .ic{width:34px;height:34px;font-size:.85rem}
  .fb-1{top:12px;right:0}
  .fb-2{bottom:12px;left:0}
  .fb-3{display:none}

  .trust-row{gap:14px;margin-top:24px}
  .trust-item{flex:1;min-width:140px}
  .slider-controls{margin-top:24px;justify-content:center}
  .arrows{order:-1}

  .about-grid, .why-grid, .adm-grid{grid-template-columns:1fr;gap:50px}
  .about-img{padding:0;max-width:420px;margin:0 auto;width:100%}
  .about-img .pic-small{width:42%;bottom:-20px;right:-10px}
  .years-badge{width:100px;height:100px;top:-15px;left:-10px}
  .years-badge .core{width:72px;height:72px}
  .years-badge .core b{font-size:1.4rem}
  .years-badge .core small{font-size:.55rem}
  .why-visual{max-width:420px;margin:0 auto;width:100%}

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

  .counter-grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .counter{padding:50px 24px}

  .t-grid{grid-template-columns:1fr;gap:18px}
  .t-track{min-height:380px}
  .t-arrow{width:42px;height:42px;font-size:.85rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}

  section{padding:60px 0}
  .activities{border-radius:40px 40px 0 0}
  .section-head{margin-bottom:36px}
}

/* Small phones */
@media (max-width: 600px){
  .container{padding:0 18px}
  .nav{padding:12px 0}
  .logo-mark{width:90px;height:90px;font-size:1.2rem;border-radius:14px}
  .logo-text b{font-size:1.1rem}
  .logo-text span{font-size:.6rem;letter-spacing:.22em}
  .nav-cta{display:none}

  h1{font-size:2rem}
  h2{font-size:1.6rem}
  .slide-content p.lead{font-size:.95rem}
  .slide-visual{height:300px}
  .slide-visual .frame{width:260px;height:260px}
  .slide-visual::before{width:295px;height:295px}
  .slide-visual::after{width:325px;height:325px}

  .cta-row{width:100%}
  .cta-row .btn{flex:1;justify-content:center;font-size:.86rem;padding:12px 14px}

  .trust-row{gap:10px}
  .trust-item{flex:1 1 calc(50% - 10px);min-width:0}
  .trust-icon{width:38px;height:38px}
  .trust-item small{font-size:.7rem}
  .trust-item b{font-size:.8rem}

  .services-grid, .act-grid{grid-template-columns:1fr;gap:16px}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .counter-grid{grid-template-columns:1fr 1fr;gap:24px}
  .counter-num{font-size:2.2rem}
  .counter-item .ic{width:50px;height:50px;font-size:1.1rem}
  .counter{padding:40px 20px}

  .row-2{grid-template-columns:1fr}
  .adm-form{padding:26px 20px}
  .vm-grid{grid-template-columns:1fr}

  .why-tag.t1{top:-5px;right:0}
  .why-tag.t2{bottom:0;left:0}
  .sticker.s1{top:-5px;left:0}
  .sticker.s2{bottom:5px;right:0}

  .wa-float{
    width:52px;height:52px;font-size:1.35rem;
    bottom:18px;right:18px;
  }
  section{padding:50px 0}
  .section-head{margin-bottom:30px}
}


/* ============================================== */
/* ============ ADVANCED ANIMATIONS ============= */
/* ============================================== */

/* ===== PRELOADER ===== */

.preloader{
  position:fixed;inset:0;z-index:200;
  background:var(--cream-2);
  display:grid;place-items:center;
  transition:opacity .6s ease, visibility .6s ease;
}
.preloader.gone{opacity:0;visibility:hidden}

.pre-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

/* Logo container with image */
.pre-logo{
  width:150px;
  height:150px;
  border-radius:26px;
  background:#fff;
  padding:8px;
  position:relative;
  display:grid;place-items:center;
  box-shadow:0 25px 60px rgba(15,76,58,.25);
  animation:preIn .9s cubic-bezier(.2,.9,.3,1.4) both,
            preBob 1.6s ease-in-out infinite .9s;
}

/* Logo image inside */
.pre-logo img{
  width:100%;height:100%;
  object-fit:contain;
  border-radius:18px;
  display:block;
}

/* Animated rainbow gradient border */
.pre-logo::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:30px;
  background:linear-gradient(135deg, var(--yellow), var(--orange), var(--pink), var(--green));
  background-size:300% 300%;
  z-index:-1;
  animation:borderShift 4s linear infinite;
}

/* Pulsing yellow ring */
.pre-logo::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:26px;
  border:3px solid var(--yellow);
  opacity:0;
  animation:preRing 2s ease-out infinite;
}

@keyframes preIn{
  from{transform:rotate(-180deg) scale(.4); opacity:0}
  to{transform:rotate(-3deg) scale(1); opacity:1}
}
@keyframes preBob{
  0%,100%{transform:rotate(-3deg) translateY(0)}
  50%{transform:rotate(3deg) translateY(-10px)}
}
@keyframes preRing{
  0%{transform:scale(1); opacity:.7}
  100%{transform:scale(1.4); opacity:0}
}

/* Wonder Zone text below logo */
.pre-text{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:0;
  animation:fadeUp .6s ease forwards .5s;
  background:linear-gradient(135deg, var(--green-deep), var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Three bouncing colored dots */
.pre-dots{display:flex; gap:6px}
.pre-dots span{
  width:9px;height:9px;
  border-radius:50%;
  background:var(--orange);
  animation:preDot 1.2s ease-in-out infinite;
}
.pre-dots span:nth-child(2){background:var(--green); animation-delay:.15s}
.pre-dots span:nth-child(3){background:var(--yellow); animation-delay:.3s}

@keyframes preDot{
  0%,100%{transform:translateY(0); opacity:.5}
  50%{transform:translateY(-10px); opacity:1}
}
@keyframes fadeUp{
  from{opacity:0; transform:translateY(15px)}
  to{opacity:1; transform:translateY(0)}
}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg, var(--yellow), var(--orange), var(--green));
  z-index:100;transition:width .1s linear;
  box-shadow:0 0 10px rgba(255,210,63,.6);
}

/* ============================================== */
/* ===== ANNOUNCEMENT MARQUEE (ENHANCED) ======== */
/* ============================================== */
.marquee{
  background:linear-gradient(90deg,
    var(--yellow) 0%,
    #FFE873 25%,
    var(--yellow) 50%,
    #FFE873 75%,
    var(--yellow) 100%);
  background-size:200% 100%;
  color:var(--green-deep);
  overflow:hidden;
  padding:18px 0;
  border-top:2px solid var(--green-deep);
  border-bottom:2px solid var(--green-deep);
  font-weight:700;font-size:.95rem;
  position:relative;
  animation:marqueeBg 8s linear infinite;
}
@keyframes marqueeBg{
  from{background-position:0% 50%}
  to{background-position:200% 50%}
}

/* Decorative top stripe pattern */
.marquee::before{
  content:"";
  position:absolute;left:0;right:0;top:-2px;height:4px;
  background-image:repeating-linear-gradient(
    90deg,
    var(--green-deep) 0 12px,
    var(--orange) 12px 24px,
    var(--green-deep) 24px 36px,
    var(--pink) 36px 48px
  );
  animation:stripeMove 6s linear infinite;
  z-index:3;
}
.marquee::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-2px;height:4px;
  background-image:repeating-linear-gradient(
    -90deg,
    var(--green-deep) 0 12px,
    var(--orange) 12px 24px,
    var(--green-deep) 24px 36px,
    var(--pink) 36px 48px
  );
  animation:stripeMove 6s linear infinite reverse;
  z-index:3;
}
@keyframes stripeMove{
  from{background-position:0 0}
  to{background-position:48px 0}
}

/* Edge fade overlay (left & right) */
.marquee-edges{
  position:absolute;inset:0;pointer-events:none;z-index:2;
}
.marquee-edges::before,
.marquee-edges::after{
  content:"";position:absolute;top:0;bottom:0;width:120px;
}
.marquee-edges::before{
  left:0;
  background:linear-gradient(90deg, var(--yellow), transparent);
}
.marquee-edges::after{
  right:0;
  background:linear-gradient(-90deg, var(--yellow), transparent);
}

/* Track */
.marquee-track{
  display:flex;
  gap:60px;
  white-space:nowrap;
  width:max-content;
  animation:marqueeScroll 28s linear infinite;
  position:relative;
  z-index:1;
}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Items */
.marquee-item{
  display:inline-flex;align-items:center;gap:12px;
  padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.0);
  transition:background .3s ease, transform .3s ease, color .3s ease;
  cursor:default;
  position:relative;
}
.marquee-item:hover{
  background:var(--green-deep);
  color:var(--yellow);
  transform:scale(1.08) translateY(-2px);
}
.marquee-item:hover i{
  color:var(--yellow) !important;
  animation:iconSpin .6s ease;
}

/* Each icon — distinct colors and animations */
.marquee-item i{
  color:var(--orange);
  font-size:1.05rem;
  display:inline-block;
  transition:color .3s ease;
  animation:icoBounce 2s ease-in-out infinite;
}
.marquee-item:nth-child(1) i{animation-delay:0s;color:var(--orange)}
.marquee-item:nth-child(3) i{animation-delay:.3s;color:#C7475F}
.marquee-item:nth-child(5) i{animation-delay:.6s;color:var(--green)}
.marquee-item:nth-child(7) i{animation-delay:.9s;color:#1F6F8B}
.marquee-item:nth-child(9) i{animation-delay:1.2s;color:#6B4DBA}
.marquee-item:nth-child(11) i{animation-delay:1.5s;color:#C7475F}

@keyframes icoBounce{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-4px) rotate(8deg)}
}
@keyframes iconSpin{
  0%{transform:rotate(0) scale(1)}
  50%{transform:rotate(180deg) scale(1.3)}
  100%{transform:rotate(360deg) scale(1)}
}

/* Heart icon special — keep beat */
.marquee-item .fa-heart{
  animation:heartBeat 1.5s ease-in-out infinite !important;
  color:#C7475F !important;
}

/* Star icon special — twinkle */
.marquee-item .fa-star{
  animation:starTwinkle 2s ease-in-out infinite !important;
}
@keyframes starTwinkle{
  0%,100%{opacity:1;transform:scale(1) rotate(0)}
  50%{opacity:.6;transform:scale(1.2) rotate(72deg)}
}

/* Medal icon special — glow */
.marquee-item .fa-medal{
  filter:drop-shadow(0 0 0 transparent);
  animation:medalGlow 2.5s ease-in-out infinite !important;
}
@keyframes medalGlow{
  0%,100%{filter:drop-shadow(0 0 2px rgba(255,140,66,.3))}
  50%{filter:drop-shadow(0 0 12px rgba(255,140,66,.9))}
}

/* Shield icon — shake on hover */
.marquee-item:hover .fa-shield-halved{
  animation:shieldShake .5s ease;
}
@keyframes shieldShake{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(-12deg)}
  40%{transform:rotate(10deg)}
  60%{transform:rotate(-8deg)}
  80%{transform:rotate(6deg)}
}

/* Children icon — wiggle */
.marquee-item .fa-children{
  animation:childWiggle 3s ease-in-out infinite !important;
}
@keyframes childWiggle{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-10deg) translateY(-2px)}
  75%{transform:rotate(10deg) translateY(-2px)}
}

/* Graduation cap — toss */
.marquee-item .fa-graduation-cap{
  animation:capToss 3s ease-in-out infinite !important;
}
@keyframes capToss{
  0%,100%{transform:translateY(0) rotate(0)}
  40%{transform:translateY(-6px) rotate(-15deg)}
  70%{transform:translateY(-3px) rotate(8deg)}
}

/* Animated dot separator */
.marquee-item + .dot-sep,
.marquee .dot-sep{
  width:8px;height:8px;border-radius:50%;
  background:var(--green-deep);
  display:inline-block;flex-shrink:0;
  position:relative;
  align-self:center;
  animation:dotJump 1.6s ease-in-out infinite;
}
.dot-sep:nth-of-type(odd){background:var(--orange);animation-delay:.2s}
.dot-sep:nth-of-type(even){background:var(--green);animation-delay:.5s}
@keyframes dotJump{
  0%,100%{transform:scale(1) rotate(0)}
  50%{transform:scale(1.6) rotate(180deg);box-shadow:0 0 8px currentColor}
}

/* Mobile tweak */
@media (max-width: 600px){
  .marquee{font-size:.82rem;padding:14px 0}
  .marquee-track{gap:40px;animation-duration:22s}
  .marquee-edges::before,.marquee-edges::after{width:60px}
}

/* ===== HERO WORD-BY-WORD REVEAL ===== */
.word-reveal{display:inline}
.word-reveal .w{
  display:inline-block;
  transform:translateY(110%) rotate(8deg);
  opacity:0;
  animation:wordUp .9s cubic-bezier(.2,.8,.2,1.05) forwards;
}
@keyframes wordUp{
  to{transform:translateY(0) rotate(0);opacity:1}
}

/* ===== FLOATING DOODLES IN HERO ===== */
.doodle{
  position:absolute;pointer-events:none;z-index:0;opacity:.55;
  animation:doodleFloat 7s ease-in-out infinite;
  filter:drop-shadow(0 6px 10px rgba(15,76,58,.10));
}
.doodle.d1{top:5%;left:0;animation-delay:0s;width:24px;opacity:.5}
.doodle.d2{bottom:0;left:46%;animation-delay:2s;width:22px;opacity:.5}
.doodle.d3{top:4%;right:1%;animation-delay:4s;width:26px;opacity:.55}
.doodle.d4{bottom:5%;right:0;animation-delay:1s;width:22px;opacity:.5}
@keyframes doodleFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  33%{transform:translateY(-22px) rotate(12deg)}
  66%{transform:translateY(8px) rotate(-8deg)}
}

/* ===== CLICK RIPPLE EFFECT ===== */
.btn{position:relative;overflow:hidden}
.ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.55);
  transform:scale(0);pointer-events:none;
  animation:rippleAnim .65s ease-out;
}
.btn-yellow .ripple,.btn-ghost .ripple{background:rgba(15,76,58,.18)}
@keyframes rippleAnim{
  to{transform:scale(4);opacity:0}
}

/* ===== MAGNETIC BUTTONS / TILT CARDS ===== */
.btn-primary,.btn-yellow{will-change:transform}
.tilt-card{
  transform-style:preserve-3d;
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.tilt-card .img-wrap,.tilt-card .body,
.tilt-card .badge-tag,.tilt-card .ic-floating{
  transform:translateZ(28px);
}

/* ===== PULSE RINGS ON BADGES ===== */
.pulse-host{position:relative}
.pulse-host::before,.pulse-host::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:2px solid var(--yellow);opacity:0;
  animation:pulseRing 2.4s ease-out infinite;
  pointer-events:none;
}
.pulse-host::after{animation-delay:1.2s}
@keyframes pulseRing{
  0%{transform:scale(.95);opacity:.7}
  100%{transform:scale(1.6);opacity:0}
}

/* ===== STAGGERED REVEAL ===== */
.reveal-stagger > *{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal-stagger.in > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.15s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.25s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.35s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.45s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.55s}
.reveal-stagger.in > *:nth-child(7){transition-delay:.65s}
.reveal-stagger.in > *:nth-child(8){transition-delay:.75s}
.reveal-stagger.in > *:nth-child(9){transition-delay:.85s}
.reveal-stagger.in > *:nth-child(10){transition-delay:.95s}
.reveal-stagger.in > *:nth-child(11){transition-delay:1.05s}
.reveal-stagger.in > *:nth-child(12){transition-delay:1.15s}

/* ===== HERO ANIMATED OVERLAY ===== */
.hero::after{
  content:"";position:absolute;
  top:30%;right:-200px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,210,63,.25), transparent 65%);
  animation:heroPulse 10s ease-in-out infinite;
  pointer-events:none;z-index:0;
}
@keyframes heroPulse{
  0%,100%{transform:scale(1) translateX(0);opacity:.6}
  50%{transform:scale(1.25) translateX(-40px);opacity:1}
}

/* ===== ICON BOUNCE-IN (for trust items, why us icons) ===== */
.in .trust-icon,.in .ic{
  animation:iconPop .6s cubic-bezier(.3,1.4,.5,1) both;
}
.in .trust-row .trust-item:nth-child(1) .trust-icon{animation-delay:.1s}
.in .trust-row .trust-item:nth-child(2) .trust-icon{animation-delay:.2s}
.in .trust-row .trust-item:nth-child(3) .trust-icon{animation-delay:.3s}
@keyframes iconPop{
  from{transform:scale(0) rotate(-180deg);opacity:0}
  to{transform:scale(1) rotate(0);opacity:1}
}

/* ===== SHIMMER TEXT EFFECT (for highlights) ===== */
.shimmer{
  background:linear-gradient(90deg, var(--green-deep) 0%, var(--orange) 25%, var(--green-deep) 50%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmerMove 3s linear infinite;
}
@keyframes shimmerMove{
  to{background-position:-200% center}
}

/* ===== WAVE SVG DIVIDER ===== */
.wave-divider{
  position:relative;height:60px;margin-top:-60px;z-index:2;
  pointer-events:none;
}
.wave-divider svg{width:100%;height:100%;display:block}
.wave-divider .wave-path{
  animation:waveMove 8s ease-in-out infinite;
  transform-origin:center;
}
@keyframes waveMove{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* ===== INPUT FOCUS GROW ===== */
.field input:focus,.field select:focus,.field textarea:focus{
  transform:translateY(-2px);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .marquee-track{animation:none}
  .doodle{display:none}
}

/* ===== MOBILE: lighter motion ===== */
@media (max-width: 980px){
  .doodle.d3,.doodle.d4{display:none}
  .tilt-card{transform:none !important}
  .hero::after{display:none}
}


/* ============================================== */
/* ============ EXTRA ANIMATIONS PACK =========== */
/* ============================================== */

/* ===== ROTATING SUNBURST BEHIND CIRCLE ===== */
.slide-visual .sun-rays{
  position:absolute;
  width:600px;height:600px;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;
  opacity:.35;
  animation:sunSpin 40s linear infinite;
}
.slide-visual .sun-rays span{
  position:absolute;left:50%;top:50%;
  width:4px;height:280px;
  background:linear-gradient(to bottom, var(--yellow), transparent);
  transform-origin:center top;
  border-radius:2px;
}
@keyframes sunSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ===== HEART BEAT ON LIKE ICONS ===== */
.fa-heart{animation:heartBeat 2s ease-in-out infinite}
@keyframes heartBeat{
  0%,100%{transform:scale(1)}
  10%,30%{transform:scale(1.18)}
  20%{transform:scale(1.05)}
}

/* ===== STAR TWINKLE ===== */
.stars .fa-star{
  animation:twinkle 2.5s ease-in-out infinite;
}
.stars .fa-star:nth-child(1){animation-delay:0s}
.stars .fa-star:nth-child(2){animation-delay:.3s}
.stars .fa-star:nth-child(3){animation-delay:.6s}
.stars .fa-star:nth-child(4){animation-delay:.9s}
.stars .fa-star:nth-child(5){animation-delay:1.2s}
@keyframes twinkle{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.85)}
}

/* ===== UNDERLINE GROW ON LINKS HOVER ===== */
.menu a{position:relative}
.menu a::after{
  content:"";position:absolute;left:50%;bottom:6px;
  width:0;height:2px;background:var(--orange);
  transition:width .3s ease,left .3s ease;
}
.menu a:hover::after{width:60%;left:20%}
.menu a.active::after{width:0}

/* ===== TILT ON HOVER FOR ADMISSION IMAGE ===== */
.adm-visual .pic{
  transition:transform .5s cubic-bezier(.2,.8,.2,1.05);
}
.adm-visual:hover .pic{transform:rotate(1deg) scale(1.02)}

/* ===== EYEBROW DOT PULSE ===== */
.eyebrow::before{
  animation:dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.6);opacity:.5}
}

/* ===== BTN ARROW SLIDE ===== */
.btn .fa-arrow-right{transition:transform .25s ease}
.btn:hover .fa-arrow-right{transform:translateX(5px)}

/* ===== GRADIENT ANIMATION ON HERO BG ===== */
.hero{
  background-size:200% 200%, 200% 200%, cover;
  animation:bgShift 25s ease infinite;
}
@keyframes bgShift{
  0%,100%{background-position:0% 0%, 100% 100%, center}
  50%{background-position:100% 50%, 0% 50%, center}
}

/* ===== TRUST BADGE FLOAT ===== */
.trust-icon{
  transition:transform .3s ease, box-shadow .3s ease;
}
.trust-item:hover .trust-icon{
  transform:translateY(-4px) rotate(-8deg);
  box-shadow:0 12px 24px rgba(15,76,58,.18);
}

/* ===== FORM INPUT SLIDE-IN ON FOCUS ===== */
.field input,.field select,.field textarea{
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

/* ===== SECTION TITLE WAVE UNDERLINE ===== */
.section-head h2{position:relative;display:block}
.section-head h2::after{
  content:"";position:absolute;
  left:50%;bottom:-12px;
  width:60px;height:6px;
  background:linear-gradient(90deg, var(--yellow), var(--orange));
  border-radius:99px;
  transform:translateX(-50%);
  opacity:0;transition:opacity .5s ease, width .5s ease;
}
.section-head.in h2::after{opacity:1;width:80px}

/* ===== WHATSAPP FLOAT TOOLTIP ===== */
.wa-float::before{
  content:"Chat with us!";
  position:absolute;right:70px;top:50%;
  transform:translateY(-50%) translateX(10px);
  background:var(--green-deep);color:#fff;
  padding:8px 14px;border-radius:20px;
  font-size:.82rem;font-weight:600;white-space:nowrap;
  opacity:0;visibility:hidden;
  transition:.25s ease;
  pointer-events:none;
  font-family:'Plus Jakarta Sans', sans-serif;
}
.wa-float::after{
  content:"";position:absolute;right:60px;top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-left-color:var(--green-deep);
  opacity:0;visibility:hidden;
  transition:.25s ease;
}
.wa-float:hover::before,.wa-float:hover::after{
  opacity:1;visibility:visible;
  transform:translateY(-50%) translateX(0);
}

/* ===== LOGO LETTER WIGGLE ===== */
.logo-text b{
  display:inline-block;transition:transform .3s ease;
}
.logo:hover .logo-text b{
  animation:letterWiggle .5s ease;
}
@keyframes letterWiggle{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-3deg)}
  75%{transform:rotate(3deg)}
}

/* ===== HORIZONTAL SHIMMER ON BUTTONS ===== */
.btn-primary::after,.btn-yellow::after{
  content:"";position:absolute;top:0;left:-100%;
  width:50%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-25deg);
  transition:.5s ease;
  pointer-events:none;
}
.btn-primary:hover::after,.btn-yellow:hover::after{
  left:150%;
}

/* ===== HIDE EXTRA ANIMATIONS ON MOBILE ===== */
@media (max-width: 980px){
  .slide-visual::before,.slide-visual::after{display:none}
  .slide-visual .sun-rays{display:none}
}
/* ====================================================
   ADDITIONS FROM BROCHURE — Wonder Zone
   Hero Slogan · Founder Card · Learning Stages ·
   Teaching Philosophy · Curriculum · Special Ed
==================================================== */

/* ============ ABOUT SLOGAN ============ */
.about-slogan {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 20px;
  padding: 14px 22px;
  background: linear-gradient(135deg, rgba(255,210,63,.18), rgba(255,140,66,.1));
  border-left: 4px solid var(--orange);
  border-radius: 0 16px 16px 0;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease;
}
.about-slogan::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: sloganShine 4s ease-in-out infinite;
}
@keyframes sloganShine {
  0% { left: -60% }
  60%, 100% { left: 150% }
}
.about-slogan:hover { transform: translateX(6px) }
.about-slogan i {
  font-size: 1.5rem;
  color: var(--orange);
  flex-shrink: 0;
  animation: flamePulse 1.8s ease-in-out infinite;
}
@keyframes flamePulse {
  0%, 100% { transform: scale(1) rotate(-5deg) }
  50% { transform: scale(1.2) rotate(5deg) }
}
.about-slogan span {
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--green-deep);
  line-height: 1.3;
}
.about-slogan span em {
  font-style: normal;
  color: var(--orange);
  background: linear-gradient(transparent 55%, rgba(255,210,63,.5) 55%);
  padding: 0 3px;
}

/* ============ FOUNDER CARD ============ */
.founder-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, rgba(255,210,63,.15), rgba(255,140,66,.12));
  border: 1.5px solid rgba(255,210,63,.5);
  border-radius: 20px;
  padding: 18px 22px;
  margin: 24px 0;
  transition: transform .4s ease, box-shadow .4s ease;
  position: relative;
  overflow: hidden;
}
.founder-card::before {
  content: "✦";
  position: absolute;
  right: 18px; top: 14px;
  font-size: 1.4rem;
  color: var(--orange);
  opacity: .3;
  animation: sparkleSpin 6s ease-in-out infinite;
}
.founder-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(255,140,66,.18);
}
.founder-ic {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  display: grid; place-items: center;
  color: var(--green-deep);
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(255,210,63,.45);
}
.founder-info { line-height: 1.3 }
.founder-label {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 800;
  display: block;
  margin-bottom: 4px;
}
.founder-trust {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  color: var(--green-deep);
  display: block;
  margin-bottom: 6px;
}
.founder-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: var(--muted);
}
.founder-name i { color: var(--green); font-size: .85rem }
.founder-name strong { color: var(--green-deep) }
.founder-name small {
  /* background: rgba(15,76,58,.08); */
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .75rem;
  color: var(--green);
  font-weight: 600;
}

/* ============ LEARNING STAGES SECTION ============ */
/* ============ LEARNING STAGES SECTION (redesigned) ============ */
.learning-section {
  background: linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);
  position: relative;
  overflow: hidden;
  padding: 80px 0 90px;
}

/* ambient blobs like hero/services */
.learning-section::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--yellow), transparent 65%);
  opacity: .35; filter: blur(24px);
  pointer-events: none;
  animation: servicesBlob 14s ease-in-out infinite;
}
.learning-section::after {
  content: "";
  position: absolute;
  bottom: -60px; left: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155,217,224,.6), transparent 65%);
  opacity: .5; filter: blur(20px);
  pointer-events: none;
  animation: servicesBlob 18s ease-in-out infinite reverse;
}

/* floating doodles (matching hero style) */
.ls-doodle {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.ld1 { width: 64px; top: 60px; left: 5%; opacity: .5; animation: float1 7s ease-in-out infinite }
.ld2 { width: 52px; bottom: 80px; right: 6%; opacity: .45; animation: float2 9s ease-in-out infinite }
.ld3 { width: 44px; top: 40%; left: 1%; opacity: .35; animation: float1 11s ease-in-out infinite 2s }
@keyframes float1 {
  0%,100% { transform: translateY(0) rotate(0deg) }
  50% { transform: translateY(-18px) rotate(12deg) }
}
@keyframes float2 {
  0%,100% { transform: translateY(0) rotate(0deg) }
  50% { transform: translateY(14px) rotate(-10deg) }
}

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

.learning-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 900px) { .learning-grid { grid-template-columns: 1fr } }

/* ── LEFT PANEL: Learning Stages Cards ── */
.ls-panel {
  position: relative;
}
.ls-panel-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.ls-panel-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--green), var(--green-soft));
  display: grid; place-items: center;
  color: var(--yellow);
  font-size: 1.4rem;
  box-shadow: 0 10px 28px rgba(15,76,58,.3);
  flex-shrink: 0;
  animation: badgePulse 4s ease-in-out infinite;
}
.ls-panel-header h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  color: var(--green-deep);
  margin: 0 0 4px;
}
.ls-panel-header small {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
}

/* Stage cards — stacked horizontally like activity cards */
.ls-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ls-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 20px;
  padding: 16px 22px;
  border: 1.5px solid var(--line);
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform .45s cubic-bezier(.2,.8,.2,1.05), box-shadow .45s ease, border-color .3s ease;
}
/* Animated left stripe like service cards top stripe */
.ls-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .45s cubic-bezier(.2,.8,.2,1.05);
  border-radius: 999px;
}
/* Hover glow */
.ls-card::after {
  content: "";
  position: absolute;
  inset: -2px; border-radius: 22px;
  z-index: -1; opacity: 0;
  filter: blur(16px);
  transition: opacity .45s ease;
}
.ls-card:hover { transform: translateX(8px); box-shadow: 0 16px 40px rgba(15,76,58,.14); border-color: transparent }
.ls-card:hover::before { transform: scaleY(1) }
.ls-card:hover::after { opacity: .5 }

/* Per-card colours */
.lsc-1::before, .lsc-1::after { background: linear-gradient(180deg, var(--yellow), var(--orange)) }
.lsc-2::before, .lsc-2::after { background: linear-gradient(180deg, var(--sky), #6EBFC8) }
.lsc-3::before, .lsc-3::after { background: linear-gradient(180deg, var(--pink), #FF6080) }
.lsc-4::before, .lsc-4::after { background: linear-gradient(180deg, var(--green), var(--green-soft)) }
.lsc-5::before, .lsc-5::after { background: linear-gradient(180deg, var(--orange), #FF6820) }
.lsc-5 { background: linear-gradient(90deg, rgba(255,140,66,.06), rgba(255,140,66,.02)); border-color: rgba(255,140,66,.25) }

.lsc-badge {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform .45s cubic-bezier(.3,1.5,.5,1);
}
.lsc-1 .lsc-badge { background: rgba(255,210,63,.2); color: #A88200 }
.lsc-2 .lsc-badge { background: rgba(155,217,224,.25); color: #1F8090 }
.lsc-3 .lsc-badge { background: rgba(255,143,163,.2); color: #C7475F }
.lsc-4 .lsc-badge { background: rgba(15,76,58,.1); color: var(--green) }
.lsc-5 .lsc-badge { background: rgba(255,140,66,.15); color: var(--orange) }
.ls-card:hover .lsc-badge { transform: scale(1.18) rotate(-10deg) }

.lsc-info { flex: 1 }
.lsc-info b {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  color: var(--green-deep);
  margin-bottom: 2px;
}
.lsc-info span {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .04em;
}

.lsc-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--orange);
  white-space: nowrap;
  background: rgba(255,140,66,.1);
  border-radius: 999px;
  padding: 5px 14px;
  transition: background .3s ease, transform .3s ease;
}
.ls-card:hover .lsc-time { background: rgba(255,140,66,.18); transform: scale(1.05) }
.lsc-time i { font-size: .85rem; color: var(--orange); opacity: .7 }

/* staggered entrance for ls-cards */
.ls-panel .ls-card {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1.05), transform .7s cubic-bezier(.2,.8,.2,1.05),
              box-shadow .45s ease, border-color .3s ease;
}
.ls-panel.in .ls-card {
  opacity: 1;
  transform: translateX(0);
}
.ls-panel.in .ls-card:nth-child(1) { transition-delay: .05s }
.ls-panel.in .ls-card:nth-child(2) { transition-delay: .17s }
.ls-panel.in .ls-card:nth-child(3) { transition-delay: .29s }
.ls-panel.in .ls-card:nth-child(4) { transition-delay: .41s }
.ls-panel.in .ls-card:nth-child(5) { transition-delay: .53s }

/* tp-trio cards entrance */
.tp-panel .tp-trio-card {
  opacity: 0;
  transform: translateY(30px) scale(.93);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1.05), transform .7s cubic-bezier(.2,.8,.2,1.05),
              box-shadow .5s ease;
}
.tp-panel.in .tp-trio-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.tp-panel.in .tp-trio-card:nth-child(1) { transition-delay: .15s }
.tp-panel.in .tp-trio-card:nth-child(2) { transition-delay: .30s }
.tp-panel.in .tp-trio-card:nth-child(3) { transition-delay: .45s }



/* ── RIGHT PANEL: Teaching Philosophy ── */
.tp-panel {
  position: sticky;
  top: 100px;
}
.tp-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(255,210,63,.35);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.tp-panel-eyebrow i { color: var(--orange) }
.tp-panel-h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--green-deep);
  line-height: 1.2;
  margin-bottom: 16px;
}
.tp-panel-desc {
  font-size: .98rem;
  color: var(--muted);
  line-height: 1.72;
  margin-bottom: 32px;
  max-width: 480px;
}

/* Three learning style cards — matching tilt-card / act-card feel */
.tp-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 600px) { .tp-trio { grid-template-columns: 1fr } }

.tp-trio-card {
  border-radius: 22px;
  padding: 22px 16px 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform .5s cubic-bezier(.2,.8,.2,1.05), box-shadow .5s ease;
}
.tp-trio-card::before {
  content: "";
  position: absolute;
  inset: -2px; border-radius: 24px;
  z-index: -1; opacity: 0;
  filter: blur(18px);
  transition: opacity .5s ease;
}
.tp-trio-card:hover { transform: translateY(-10px) }
.tp-trio-card:hover::before { opacity: .55 }

/* Auditory */
.ttc-a { background: linear-gradient(160deg, rgba(155,217,224,.2), rgba(155,217,224,.06)); border: 1.5px solid rgba(155,217,224,.7) }
.ttc-a::before { background: linear-gradient(135deg, var(--sky), #6EBFC8) }
.ttc-a:hover { box-shadow: 0 20px 44px rgba(155,217,224,.45) }
/* Visual */
.ttc-v { background: linear-gradient(160deg, rgba(255,210,63,.2), rgba(255,210,63,.05)); border: 1.5px solid rgba(255,210,63,.65) }
.ttc-v::before { background: linear-gradient(135deg, var(--yellow), var(--orange)) }
.ttc-v:hover { box-shadow: 0 20px 44px rgba(255,210,63,.4) }
/* Kinesthetic */
.ttc-k { background: linear-gradient(160deg, rgba(255,143,163,.2), rgba(255,143,163,.05)); border: 1.5px solid rgba(255,143,163,.65) }
.ttc-k::before { background: linear-gradient(135deg, var(--pink), #FF6080) }
.ttc-k:hover { box-shadow: 0 20px 44px rgba(255,143,163,.45) }

.ttc-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: #fff;
  display: grid; place-items: center;
  margin: 0 auto 14px;
  font-size: 1.3rem;
  box-shadow: var(--shadow-soft);
  transition: transform .5s cubic-bezier(.3,1.5,.5,1);
}
.ttc-a .ttc-icon { color: #1F8090 }
.ttc-v .ttc-icon { color: var(--orange) }
.ttc-k .ttc-icon { color: #C7475F }
.tp-trio-card:hover .ttc-icon { transform: scale(1.2) rotate(-12deg) }

/* animated connector line between icon and text */
.ttc-connector {
  width: 2px; height: 18px;
  margin: -4px auto 10px;
  border-radius: 999px;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .5s ease .1s;
}
.ttc-a .ttc-connector { background: var(--sky) }
.ttc-v .ttc-connector { background: var(--yellow) }
.ttc-k .ttc-connector { background: var(--pink) }
.tp-trio-card:hover .ttc-connector { transform: scaleY(1) }

.tp-trio-card b {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  color: var(--green-deep);
  margin-bottom: 6px;
}
.tp-trio-card small {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Quote strip */
.tp-quote {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, var(--green), var(--green-soft));
  border-radius: 20px;
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
}
.tp-quote::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  animation: sloganShine 5s ease-in-out infinite;
}
.tp-quote i {
  color: var(--yellow);
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.tp-quote span {
  font-family: 'Caveat', cursive;
  font-size: 1.15rem;
  color: #fff;
  font-weight: 600;
  line-height: 1.5;
}

/* ── OLD classes kept for safety (hidden) ── */
.ls-table-wrap, .tp-wrap { display: none }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .ls-card { padding: 14px 16px }
  .lsc-time { font-size: .95rem; padding: 4px 10px }
  .tp-panel { position: static }
}



/* ============ CONSTRUCTIVE CURRICULUM v2 ============ */
.curriculum-section {
  background: var(--green-deep);
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}

/* Animated ambient orbs */
.curr-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  animation: orbFloat 8s ease-in-out infinite;
}
.curr-orb-1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255,210,63,.18) 0%, transparent 70%);
  top: -120px; left: -100px;
  animation-delay: 0s;
}
.curr-orb-2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(27,106,82,.5) 0%, transparent 70%);
  bottom: -80px; right: -60px;
  animation-delay: -3s;
}
.curr-orb-3 {
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(255,140,66,.12) 0%, transparent 70%);
  top: 40%; left: 50%;
  transform: translateX(-50%);
  animation-delay: -5s;
}
@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.05); }
}

/* Floating particles */
.curr-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cp {
  position: absolute;
  color: rgba(255,210,63,.25);
  font-size: 1rem;
  animation: cpDrift linear infinite;
}
.cp1 { left: 8%; top: 20%; font-size: 0.7rem; animation-duration: 12s; animation-delay: 0s; }
.cp2 { left: 20%; top: 70%; font-size: 0.5rem; animation-duration: 15s; animation-delay: -4s; }
.cp3 { left: 45%; top: 15%; font-size: 0.8rem; animation-duration: 10s; animation-delay: -2s; }
.cp4 { left: 65%; top: 60%; font-size: 0.5rem; animation-duration: 18s; animation-delay: -7s; }
.cp5 { left: 80%; top: 25%; font-size: 0.6rem; animation-duration: 13s; animation-delay: -1s; }
.cp6 { left: 92%; top: 75%; font-size: 0.7rem; animation-duration: 16s; animation-delay: -5s; }
@keyframes cpDrift {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-80px) rotate(360deg); opacity: 0; }
}

/* Header */
.curr-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}
.curr-eyebrow {
  background: rgba(255,210,63,.15) !important;
  color: var(--yellow) !important;
  border: 1px solid rgba(255,210,63,.3);
  letter-spacing: .1em;
}
.curr-eyebrow::before { background: var(--yellow) !important; }
.curr-title {
  color: #fff;
  margin-top: 18px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
}
.curr-hl {
  position: relative;
  display: inline;
  color: var(--yellow);
}
.curr-hl::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--yellow), var(--orange), transparent);
  border-radius: 2px;
  animation: hlSlide 3s ease-in-out infinite;
  transform-origin: left;
}
@keyframes hlSlide {
  0%, 100% { scaleX: 1; opacity: 1; }
  50% { opacity: .6; }
}
.curr-desc {
  color: rgba(255,255,255,.75);
  margin-top: 18px;
  line-height: 1.7;
  font-size: .98rem;
}
.curr-desc strong { color: var(--yellow); background: none; font-weight: 700; }
.curr-cta { margin-top: 28px; display: inline-flex; }

/* MI Grid v2 */
.mi-grid-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 50px;
}
@media (max-width: 900px) { .mi-grid-v2 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .mi-grid-v2 { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* MI Card v2 */
.mi-card-v2 {
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 24px 16px 20px;
  text-align: center;
  backdrop-filter: blur(10px);
  cursor: default;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              background .45s ease,
              border-color .45s ease,
              box-shadow .45s ease;

  /* stagger reveal: starts invisible */
  opacity: 0;
  transform: translateY(40px) scale(.96);
}
.mi-card-v2.mi-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1),
              background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.mi-card-v2:hover {
  transform: translateY(-8px) scale(1.03);
  background: rgba(255,255,255,.13);
  border-color: rgba(255,210,63,.35);
  box-shadow: 0 20px 50px rgba(0,0,0,.3), 0 0 30px rgba(255,210,63,.08);
}

/* Glow blob behind card on hover */
.mi-glow {
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,63,.3) 0%, transparent 70%);
  opacity: 0;
  filter: blur(16px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.mi-card-v2:hover .mi-glow { opacity: 1; transform: translateX(-50%) scale(1.3); }
.mi-glow-ar { background: radial-gradient(circle, rgba(255,140,66,.5) 0%, transparent 70%); }

/* Icon v2 */
.mi-ic-v2 {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  display: grid; place-items: center;
  margin: 0 auto 14px;
  font-size: 1.15rem;
  color: var(--green-deep);
  box-shadow: 0 8px 20px rgba(255,210,63,.35);
  transition: transform .5s cubic-bezier(.3,1.6,.5,1), box-shadow .4s ease;
  position: relative; z-index: 1;
}
.mi-card-v2:hover .mi-ic-v2 {
  transform: scale(1.18) rotate(-10deg);
  box-shadow: 0 12px 28px rgba(255,210,63,.5);
}
.mi-ic-ar {
  background: linear-gradient(135deg, #fff9e6, var(--yellow));
}

/* Card text */
.mi-card-v2 b {
  display: block;
  font-size: .85rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1.2;
  position: relative; z-index: 1;
}
.mi-card-v2 small {
  font-size: .73rem;
  color: rgba(255,255,255,.55);
  position: relative; z-index: 1;
}

/* Decorative bottom line on hover */
.mi-line {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--yellow), transparent);
  border-radius: 1px;
  transition: transform .4s ease;
}
.mi-card-v2:hover .mi-line { transform: translateX(-50%) scaleX(1); }
.mi-line-ar { background: linear-gradient(90deg, transparent, var(--orange), transparent); }

/* AR special card */
.mi-card-ar {
  background: linear-gradient(135deg, rgba(255,210,63,.12), rgba(255,140,66,.1));
  border-color: rgba(255,210,63,.3);
}
.mi-card-ar b { color: var(--yellow); }
.mi-ar-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  color: var(--green-deep);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 30px;
  line-height: 1;
}

/* Stats bar */
.curr-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 28px 40px;
  backdrop-filter: blur(8px);
  flex-wrap: wrap;
  gap: 20px;
}
.curr-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 100px;
}
.cs-num {
  font-family: 'Fraunces', serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--yellow);
  line-height: 1;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cs-label {
  font-size: .75rem;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.curr-stat-div {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .curr-stats { padding: 20px; }
  .curr-stat-div { display: none; }
}

/* mi-reveal animation handled via JS */
.mi-reveal {
  opacity: 0;
  transform: translateY(40px) scale(.96);
}

/* ============ SPECIAL EDUCATION SECTION ============ */
.special-ed {
  background: linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);
  position: relative;
  overflow: hidden;
}
.special-ed::before {
  content: "";
  position: absolute;
  top: 40px; right: -50px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,143,163,.3), transparent 65%);
  opacity: .6; filter: blur(16px);
  pointer-events: none;
  animation: servicesBlob 12s ease-in-out infinite;
}
.sped-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
@media (max-width: 860px) {
  .sped-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 560px) {
  .sped-grid { grid-template-columns: 1fr }
}
.sped-card {
  background: #fff;
  border-radius: 24px;
  padding: 28px 24px;
  border: 1.5px solid var(--line);
  transition: transform .5s cubic-bezier(.2,.8,.2,1.05), box-shadow .5s ease, border-color .4s ease;
  position: relative;
  overflow: hidden;
}
.sped-card::after {
  content: "";
  position: absolute;
  top: -30px; right: -30px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: var(--pink);
  opacity: .08;
  transition: transform .5s ease, opacity .5s ease;
}
.sped-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 56px rgba(15,76,58,.18);
  border-color: var(--pink);
}
.sped-card:hover::after {
  transform: scale(2.8);
  opacity: .15;
}
.sped-ic {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,143,163,.25), rgba(255,143,163,.1));
  border: 1.5px solid rgba(255,143,163,.4);
  display: grid; place-items: center;
  font-size: 1.4rem;
  color: #C7475F;
  margin-bottom: 16px;
  transition: transform .4s cubic-bezier(.3,1.5,.5,1), background .4s ease;
}
.sped-card:hover .sped-ic {
  transform: scale(1.15) rotate(-8deg);
  background: linear-gradient(135deg, rgba(255,143,163,.4), rgba(255,143,163,.2));
}
.sped-card h4 {
  font-size: 1.05rem;
  color: var(--green-deep);
  margin-bottom: 8px;
}
.sped-card p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.sped-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============ WHY ITEMS (additional items) ============ */
.why-item:nth-child(6) .ic { background: #D4F1E2; color: var(--green) }
.why-item:nth-child(7) .ic { background: rgba(255,210,63,.2); color: var(--orange) }
.why-item:nth-child(8) .ic { background: rgba(155,217,224,.3); color: #1F8090 }
.why-item:nth-child(9) .ic { background: rgba(255,143,163,.2); color: #C7475F }

.why-item:nth-child(6)::after { content: "06" }
.why-item:nth-child(7)::after { content: "07" }
.why-item:nth-child(8)::after { content: "08" }
.why-item:nth-child(9)::after { content: "09" }
.why-item:nth-child(6) .ic::before { animation-delay: 2.5s }
.why-item:nth-child(7) .ic::before { animation-delay: 3s }
.why-item:nth-child(8) .ic::before { animation-delay: 3.5s }
.why-item:nth-child(9) .ic::before { animation-delay: 4s }



/* ============================================================
   ============================================================
   ============ MULTI-PAGE ADDITIONS (v3) =====================
   ============================================================
   ============================================================ */

/* ============================================== */
/* ============ PAGE HERO BANNER ================ */
/* ============================================== */
/* Used on About, Services, Gallery, Contact inner pages */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 70px 0 80px;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(255, 210, 63, .45), transparent 60%),
    radial-gradient(700px 600px at -10% 110%, rgba(15, 76, 58, .10), transparent 60%),
    var(--cream);
  background-size: 200% 200%, 200% 200%, cover;
  animation: bgShift 25s ease infinite;
}

.page-hero::after {
  content: "";
  position: absolute;
  top: 20%;
  right: -200px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 63, .25), transparent 65%);
  animation: heroPulse 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.page-hero-blob-1 {
  position: absolute;
  top: -80px;
  left: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--yellow);
  opacity: .25;
  filter: blur(20px);
  pointer-events: none;
}

.page-hero-blob-2 {
  position: absolute;
  bottom: -100px;
  right: 10%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--pink);
  opacity: .25;
  filter: blur(20px);
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 2;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  align-items: center;
}

.page-hero-text .eyebrow {
  margin-bottom: 18px;
}

.page-hero-text h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 18px;
  font-weight: 800;
}

.page-hero-text p.lead {
  font-size: 1.08rem;
  color: var(--muted);
  margin-bottom: 28px;
  max-width: 580px;
}

/* Breadcrumb */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(10px);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--green-deep);
  margin-bottom: 18px;
  box-shadow: 0 6px 20px rgba(15, 76, 58, .08);
}

.breadcrumb a {
  color: var(--green);
  transition: color .3s ease;
}

.breadcrumb a:hover {
  color: var(--orange);
}

.breadcrumb i.sep {
  font-size: .65rem;
  color: var(--muted);
  opacity: .6;
}

.breadcrumb span {
  color: var(--orange);
  font-weight: 700;
}

/* Page hero visual (circular framed image like home page) */
.page-hero-visual {
  position: relative;
  height: 380px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero-visual .frame {
  position: relative;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  border: 8px solid #fff;
  background: var(--green);
  z-index: 2;
  animation: frameFloat 6s ease-in-out infinite;
}

.page-hero-visual .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rotating decorative ring */
.page-hero-visual::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 2px dashed rgba(15, 76, 58, .35);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spinRing 22s linear infinite;
  z-index: 1;
}

.page-hero-visual::after {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  border: 1px dotted rgba(255, 140, 66, .45);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spinRing 30s linear infinite reverse;
  z-index: 1;
}

/* Floating badge on page hero */
.page-hero-badge {
  position: absolute;
  background: #fff;
  border-radius: 18px;
  padding: 12px 16px;
  box-shadow: var(--shadow-pop);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: bob 4s ease-in-out infinite;
  z-index: 3;
}

.page-hero-badge .ic {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--green-deep);
  background: var(--yellow);
  font-size: 1rem;
  flex-shrink: 0;
}

.page-hero-badge b {
  display: block;
  font-size: .9rem;
  color: var(--green-deep);
  line-height: 1.1;
}

.page-hero-badge small {
  color: var(--muted);
  font-size: .74rem;
}

.page-hero-badge.b1 {
  top: 20px;
  right: 0;
  animation-delay: .2s;
}

.page-hero-badge.b2 {
  bottom: 30px;
  left: 0;
  animation-delay: .8s;
}

.page-hero-badge.b2 .ic {
  background: var(--orange);
  color: #fff;
}

@media (max-width: 980px) {
  .page-hero {
    padding: 40px 0 50px;
  }

  .page-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .page-hero-visual {
    height: 320px;
  }

  .page-hero-visual .frame {
    width: 280px;
    height: 280px;
  }

  .page-hero-visual::before {
    width: 330px;
    height: 330px;
  }

  .page-hero-visual::after {
    width: 365px;
    height: 365px;
  }
}

@media (max-width: 600px) {
  .page-hero-visual {
    height: 260px;
  }

  .page-hero-visual .frame {
    width: 220px;
    height: 220px;
  }

  .page-hero-visual::before {
    width: 260px;
    height: 260px;
  }

  .page-hero-visual::after {
    width: 290px;
    height: 290px;
  }

  .page-hero-badge {
    padding: 10px 12px;
  }

  .page-hero-badge b {
    font-size: .82rem;
  }

  .page-hero-badge small {
    font-size: .7rem;
  }
}

/* ============================================== */
/* ============ GALLERY GRID (3-COL) ============ */
/* ============================================== */
.gallery-page {
  background: var(--cream-2);
  position: relative;
  overflow: hidden;
}

.gallery-page::before {
  content: "";
  position: absolute;
  top: 10%;
  right: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 63, .4), transparent 65%);
  filter: blur(40px);
  animation: galBlob 14s ease-in-out infinite;
  pointer-events: none;
}

.gallery-page::after {
  content: "";
  position: absolute;
  bottom: 10%;
  left: -100px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 143, 163, .4), transparent 65%);
  filter: blur(40px);
  animation: galBlob 16s ease-in-out infinite reverse;
  pointer-events: none;
}

.gallery-page .container {
  position: relative;
  z-index: 2;
}

/* Filter tabs */
.gallery-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 40px;
}

.gallery-filter {
  padding: 10px 20px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--line);
  color: var(--green-deep);
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: all .3s cubic-bezier(.2, .8, .2, 1.05);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gallery-filter i {
  font-size: .8rem;
  color: var(--orange);
  transition: transform .3s ease;
}

.gallery-filter:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(255, 210, 63, .35);
}

.gallery-filter:hover i {
  transform: rotate(360deg);
}

.gallery-filter.active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  box-shadow: 0 8px 20px rgba(15, 76, 58, .25);
}

.gallery-filter.active i {
  color: var(--yellow);
}

/* 3-column grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}

.gallery-item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  background: #e8e8e8;
  box-shadow: 0 15px 35px rgba(15, 76, 58, .12);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1.05), box-shadow .5s ease;
}

.gallery-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px rgba(15, 76, 58, .22);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1.05), filter .5s ease;
  filter: saturate(.95);
}

.gallery-item:hover img {
  transform: scale(1.12);
  filter: saturate(1.15);
}

/* Hover gradient overlay */
.gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 76, 58, .85) 0%, rgba(15, 76, 58, 0) 60%);
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 2;
  pointer-events: none;
}

.gallery-item:hover::before {
  opacity: 1;
}

/* Number badge on each item */
.gallery-item::after {
  content: attr(data-num);
  position: absolute;
  top: 16px;
  left: 16px;
  width: 38px;
  height: 38px;
  background: var(--yellow);
  color: var(--green-deep);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: .85rem;
  z-index: 3;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
  transform: scale(0) rotate(-180deg);
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}

.gallery-item:hover::after {
  transform: scale(1) rotate(0);
}

/* Caption overlay */
.gi-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 22px;
  color: #fff;
  background: linear-gradient(to top, rgba(15, 76, 58, .9), transparent);
  z-index: 3;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1.05), opacity .4s ease;
}

.gallery-item:hover .gi-caption {
  transform: translateY(0);
  opacity: 1;
}

.gi-caption b {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.gi-caption small {
  font-size: .8rem;
  opacity: .9;
}

/* Magnifier icon (top-right on hover) */
.gi-zoom {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: var(--green-deep);
  display: grid;
  place-items: center;
  font-size: .9rem;
  z-index: 3;
  opacity: 0;
  transform: scale(0) rotate(-90deg);
  transition: all .4s cubic-bezier(.3, 1.4, .5, 1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

.gallery-item:hover .gi-zoom {
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* Staggered entrance */
.gallery-grid.reveal-stagger>.gallery-item {
  opacity: 0;
  transform: translateY(40px) scale(.9);
  transition: opacity .8s cubic-bezier(.2, .8, .2, 1.05), transform .8s cubic-bezier(.2, .8, .2, 1.05);
}

.gallery-grid.reveal-stagger.in>.gallery-item {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(1) { transition-delay: .05s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(2) { transition-delay: .12s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(3) { transition-delay: .19s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(4) { transition-delay: .26s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(5) { transition-delay: .33s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(6) { transition-delay: .4s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(7) { transition-delay: .47s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(8) { transition-delay: .54s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(9) { transition-delay: .61s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(10) { transition-delay: .68s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(11) { transition-delay: .75s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(12) { transition-delay: .82s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(13) { transition-delay: .89s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(14) { transition-delay: .96s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(15) { transition-delay: 1.03s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(16) { transition-delay: 1.1s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(17) { transition-delay: 1.17s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(18) { transition-delay: 1.24s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(19) { transition-delay: 1.31s }
.gallery-grid.reveal-stagger.in>.gallery-item:nth-child(20) { transition-delay: 1.38s }

/* Mobile */
@media (max-width: 980px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .gallery-page::before,
  .gallery-page::after {
    display: none;
  }
}

/* ============================================== */
/* ============ LIGHTBOX ======================== */
/* ============================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 51, 39, .95);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 60px;
  opacity: 0;
  transition: opacity .35s ease;
}

.lightbox.open {
  display: flex;
  animation: lbFadeIn .35s ease forwards;
}

@keyframes lbFadeIn {
  to {
    opacity: 1;
  }
}

.lightbox-content {
  position: relative;
  max-width: 1100px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  border: 6px solid #fff;
  animation: lbZoomIn .5s cubic-bezier(.2, .8, .2, 1.05);
}

@keyframes lbZoomIn {
  from {
    transform: scale(.85);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.lb-caption {
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
}

.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--green-deep);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.1rem;
  border: none;
  transition: all .3s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  z-index: 2;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: #fff;
  transform: scale(1.1);
}

.lb-close {
  top: 20px;
  right: 20px;
}

.lb-prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.lb-prev:hover {
  transform: translateY(-50%) scale(1.1);
}

.lb-next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.lb-next:hover {
  transform: translateY(-50%) scale(1.1);
}

.lb-counter {
  position: absolute;
  top: 24px;
  left: 24px;
  color: #fff;
  background: rgba(255, 255, 255, .15);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  backdrop-filter: blur(10px);
  z-index: 2;
}

@media (max-width: 600px) {
  .lightbox {
    padding: 20px;
  }

  .lb-prev,
  .lb-next {
    width: 44px;
    height: 44px;
    font-size: .9rem;
  }

  .lb-close {
    width: 44px;
    height: 44px;
    font-size: .9rem;
  }
}

/* ============================================== */
/* ============ CONTACT PAGE ==================== */
/* ============================================== */
.contact-info-section {
  background: var(--cream-2);
  position: relative;
  overflow: hidden;
}

.contact-info-section::before {
  content: "";
  position: absolute;
  top: 10%;
  left: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 63, .4), transparent 65%);
  filter: blur(40px);
  animation: aboutBlob 12s ease-in-out infinite;
  pointer-events: none;
}

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

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 50px;
}

.ci-card {
  background: #fff;
  border-radius: 24px;
  padding: 32px 28px;
  text-align: center;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1.05), box-shadow .5s ease, border-color .4s ease;
}

.ci-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  z-index: -1;
  opacity: 0;
  filter: blur(20px);
  transition: opacity .5s ease;
}

.ci-card:nth-child(1)::before {
  background: linear-gradient(135deg, var(--yellow), var(--orange));
}

.ci-card:nth-child(2)::before {
  background: linear-gradient(135deg, var(--green), var(--green-soft));
}

.ci-card:nth-child(3)::before {
  background: linear-gradient(135deg, var(--pink), #FF6080);
}

.ci-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 50px rgba(15, 76, 58, .18);
  border-color: transparent;
}

.ci-card:hover::before {
  opacity: .4;
}

/* Top accent stripe */
.ci-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1.05);
  z-index: 1;
}

.ci-card:nth-child(1)::after {
  background: linear-gradient(90deg, var(--yellow), var(--orange));
}

.ci-card:nth-child(2)::after {
  background: linear-gradient(90deg, var(--green), var(--green-soft));
}

.ci-card:nth-child(3)::after {
  background: linear-gradient(90deg, var(--pink), #FF6080);
}

.ci-card:hover::after {
  transform: scaleX(1);
}

.ci-icon {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--yellow), #FFC820);
  color: var(--green-deep);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  font-size: 1.7rem;
  position: relative;
  box-shadow: 0 12px 24px rgba(255, 210, 63, .35);
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}

.ci-card:nth-child(2) .ci-icon {
  background: linear-gradient(135deg, var(--green), var(--green-deep));
  color: var(--yellow);
  box-shadow: 0 12px 24px rgba(15, 76, 58, .3);
}

.ci-card:nth-child(3) .ci-icon {
  background: linear-gradient(135deg, var(--pink), #FF6080);
  color: #fff;
  box-shadow: 0 12px 24px rgba(255, 143, 163, .35);
}

/* Pulsing ring around icon */
.ci-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border: 2px solid currentColor;
  opacity: 0;
  animation: counterPulse 2.5s ease-out infinite;
}

/* Rotating dashed ring */
.ci-icon::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px dashed currentColor;
  border-radius: 26px;
  opacity: .35;
  animation: counterRing 12s linear infinite;
}

.ci-card:hover .ci-icon {
  transform: rotate(-12deg) scale(1.1);
}

.ci-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: var(--green-deep);
  transition: color .3s ease;
}

.ci-card:hover h3 {
  color: var(--green);
}

.ci-card p {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
  margin-bottom: 14px;
}

.ci-card a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-weight: 700;
  font-size: .92rem;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 210, 63, .25);
  transition: all .3s cubic-bezier(.2, .8, .2, 1.05);
}

.ci-card a:hover {
  background: var(--green);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 76, 58, .25);
}

.ci-card a i {
  transition: transform .3s ease;
}

.ci-card a:hover i {
  transform: translateX(4px);
}

@media (max-width: 980px) {
  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ============================================== */
/* ============ BIG EMBEDDED MAP ================ */
/* ============================================== */
.big-map-section {
  background: var(--cream);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.big-map-section::before {
  content: "";
  position: absolute;
  top: 5%;
  right: -100px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 63, .4), transparent 65%);
  filter: blur(40px);
  animation: galBlob 14s ease-in-out infinite;
  pointer-events: none;
}

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

.big-map-wrap {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(15, 76, 58, .2);
  border: 4px solid #fff;
  background: #1a5944;
  height: 500px;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1.05), box-shadow .5s ease;
}

.big-map-wrap:hover {
  transform: translateY(-5px);
  box-shadow: 0 40px 80px rgba(15, 76, 58, .3);
}

/* Animated rainbow border */
.big-map-wrap::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--yellow), var(--orange), var(--pink), var(--green));
  background-size: 300% 300%;
  z-index: -1;
  animation: borderShift 7s linear infinite;
}

.big-map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(1.1) contrast(1.05);
  transition: filter .4s ease;
}

.big-map-wrap:hover iframe {
  filter: saturate(1.2) contrast(1.1);
}

/* Floating action buttons on map */
.big-map-fab {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: flex;
  gap: 12px;
  z-index: 3;
}

.big-map-fab a {
  background: var(--yellow);
  color: var(--green-deep);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  transition: all .3s ease;
  animation: bob 3.5s ease-in-out infinite;
}

.big-map-fab a:hover {
  transform: scale(1.06) translateY(-3px);
  box-shadow: 0 14px 32px rgba(255, 210, 63, .5);
  background: #fff;
}

.big-map-fab a:nth-child(2) {
  background: var(--green);
  color: #fff;
  animation-delay: .3s;
}

.big-map-fab a:nth-child(2):hover {
  background: var(--green-deep);
  box-shadow: 0 14px 32px rgba(15, 76, 58, .5);
}

@media (max-width: 980px) {
  .big-map-wrap {
    height: 380px;
  }

  .big-map-fab {
    bottom: 16px;
    left: 16px;
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .big-map-wrap {
    height: 320px;
  }

  .big-map-fab a {
    padding: 10px 16px;
    font-size: .82rem;
  }
}

/* ============================================== */
/* ============ CTA BANNER ====================== */
/* ============================================== */
.cta-banner {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green) 100%);
  border-radius: 36px;
  padding: 60px 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0 0 80px;
  box-shadow: 0 30px 60px rgba(15, 76, 58, .3);
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 210, 63, .08) 1.2px, transparent 1.5px);
  background-size: 30px 30px;
  opacity: .8;
  pointer-events: none;
  animation: dotPan 60s linear infinite;
}

.cta-banner::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 63, .2), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  animation: actGlow 12s ease-in-out infinite;
}

.cta-banner-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}

.cta-banner .eyebrow {
  background: rgba(255, 210, 63, .25);
  color: var(--yellow);
  margin-bottom: 18px;
}

.cta-banner h2 {
  color: #fff;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  margin-bottom: 16px;
}

.cta-banner h2 .hl {
  background: linear-gradient(transparent 60%, rgba(255, 210, 63, .6) 60%);
}

.cta-banner p {
  color: rgba(255, 255, 255, .85);
  font-size: 1.05rem;
  margin-bottom: 28px;
}

.cta-banner-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .cta-banner {
    padding: 40px 24px;
    border-radius: 24px;
  }
}

/* ============================================== */
/* ============ NAV ACTIVE PAGE LINK ============ */
/* ============================================== */
/* Highlight current page link in nav */
body.page-about .menu a[href*="about"],
body.page-services .menu a[href*="services"],
body.page-gallery .menu a[href*="gallery"],
body.page-contact .menu a[href*="contact"],
body.page-home .menu a[href$="index.html"],
body.page-home .menu a[href="/"] {
  background: var(--yellow);
  color: var(--green-deep);
}


/* ============================================================
   ============ PAGE BANNER (compact, full-width image) =======
   ============================================================
   Replaces .page-hero across about/services/gallery/contact.
   Background image with warm overlay, centered title + breadcrumb */

.page-banner {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-image set inline per page */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Subtle ken-burns zoom on the bg image */
.page-banner::before {
  content: "";
  position: absolute;
  inset: -8%;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  z-index: 0;
  animation: bannerKenBurns 22s ease-in-out infinite alternate;
}

@keyframes bannerKenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(-18px, -8px); }
}

/* Warm orange + green branded overlay */
.page-banner-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(255, 140, 66, 0.62) 0%,
      rgba(207, 90, 30, 0.55) 40%,
      rgba(15, 76, 58, 0.55) 100%);
  z-index: 1;
}

/* Optional second layer for depth + vignette */
.page-banner-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0) 0%,
    rgba(10, 51, 39, 0.35) 100%);
}

.page-banner-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 60px 24px;
  width: 100%;
}

.page-banner-title {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.05;
  margin: 0 0 22px;
  letter-spacing: -.01em;
  text-shadow: 0 6px 26px rgba(0, 0, 0, .45);
  opacity: 0;
  animation: bannerTitleIn .9s cubic-bezier(.2, .8, .2, 1.05) forwards .2s;
}

@keyframes bannerTitleIn {
  from { opacity: 0; transform: translateY(-22px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Breadcrumb styling override for dark overlay */
.page-banner .breadcrumb {
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  padding: 11px 22px;
  font-size: .9rem;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  opacity: 0;
  animation: bannerCrumbIn .8s cubic-bezier(.3, 1.4, .5, 1) forwards .55s;
}

@keyframes bannerCrumbIn {
  from { opacity: 0; transform: scale(.65) translateY(18px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.page-banner .breadcrumb a {
  color: var(--green-deep);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .3s ease;
}

.page-banner .breadcrumb a:hover {
  color: var(--orange);
}

.page-banner .breadcrumb a i {
  color: var(--green);
  font-size: .85rem;
  transition: transform .3s ease, color .3s ease;
}

.page-banner .breadcrumb a:hover i {
  color: var(--orange);
  transform: scale(1.15);
}

.page-banner .breadcrumb i.sep {
  color: var(--orange);
  font-size: .7rem;
  opacity: .8;
}

.page-banner .breadcrumb span {
  color: var(--orange);
  font-weight: 700;
}

/* Floating sparkle particles (decoration) */
.page-banner-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.page-banner-particles span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  opacity: .45;
  box-shadow: 0 0 12px rgba(255, 210, 63, .6);
  animation: bannerParticle 7s ease-in-out infinite;
}

.page-banner-particles span:nth-child(1) { top: 22%; left: 7%;   animation-delay: 0s; }
.page-banner-particles span:nth-child(2) { top: 68%; left: 14%;  animation-delay: 1.2s; width: 6px; height: 6px; }
.page-banner-particles span:nth-child(3) { top: 28%; left: 88%;  animation-delay: 2.4s; }
.page-banner-particles span:nth-child(4) { top: 72%; left: 80%;  animation-delay: 3.6s; width: 5px; height: 5px; }
.page-banner-particles span:nth-child(5) { top: 45%; left: 50%;  animation-delay: 1.8s; opacity: .3; width: 6px; height: 6px; }
.page-banner-particles span:nth-child(6) { top: 18%; left: 55%;  animation-delay: 4.2s; }
.page-banner-particles span:nth-child(7) { top: 55%; left: 28%;  animation-delay: 2.8s; width: 5px; height: 5px; }
.page-banner-particles span:nth-child(8) { top: 35%; left: 72%;  animation-delay: 5s; }

@keyframes bannerParticle {
  0%, 100% { transform: translateY(0) scale(1);   opacity: .45; }
  50%      { transform: translateY(-22px) scale(1.6); opacity: .85; }
}

/* Decorative corner ornaments */
.page-banner-corner {
  position: absolute;
  width: 110px;
  height: 110px;
  border: 2px dashed rgba(255, 255, 255, .35);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  animation: bannerCornerSpin 18s linear infinite;
}

.page-banner-corner.tl {
  top: -55px;
  left: -55px;
}

.page-banner-corner.br {
  bottom: -55px;
  right: -55px;
  animation-direction: reverse;
  border-color: rgba(255, 210, 63, .4);
}

@keyframes bannerCornerSpin {
  to { transform: rotate(360deg); }
}

/* Mobile */
@media (max-width: 980px) {
  .page-banner {
    min-height: 230px;
  }
  .page-banner-content {
    padding: 50px 20px;
  }
  .page-banner-corner {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 600px) {
  .page-banner {
    min-height: 190px;
  }
  .page-banner-content {
    padding: 40px 18px;
  }
  .page-banner-title {
    margin-bottom: 16px;
  }
  .page-banner .breadcrumb {
    padding: 9px 16px;
    font-size: .82rem;
    gap: 8px;
  }
  .page-banner-corner { display: none; }
}


/* ============================================================
   ============ HOVER OVERFLOW FIX ============================
   ============================================================
   Was: .act-card / .service-card had a blurry colored halo
   pseudo-element with inset:-2px + filter:blur(20px) that
   bled ~22px past the card boundary. On hover this colored
   cloud spilled into the row below the grid.
   Fix: contain the card with overflow:hidden and replace the
   bleeding halo with a colored drop shadow on hover (shadows
   are not clipped by overflow:hidden, so the colored glow
   still shows but drops cleanly below the card). */

/* ─── ACTIVITY CARDS (services page) ─── */
.act-card {
  overflow: hidden;
}

/* Disable the old bleeding halo pseudo-element */
.act-card::before,
.act-card:hover::before {
  display: none !important;
}

/* New: colored drop-shadow on hover, per-card color */
.act-card:hover {
  box-shadow: 0 22px 45px rgba(0, 0, 0, .28);
}
.act-card:nth-child(6n+1):hover { box-shadow: 0 22px 45px rgba(0, 0, 0, .25), 0 10px 28px rgba(255, 140, 66, .42); }
.act-card:nth-child(6n+2):hover { box-shadow: 0 22px 45px rgba(0, 0, 0, .25), 0 10px 28px rgba(255, 143, 163, .48); }
.act-card:nth-child(6n+3):hover { box-shadow: 0 22px 45px rgba(0, 0, 0, .25), 0 10px 28px rgba(155, 217, 224, .55); }
.act-card:nth-child(6n+4):hover { box-shadow: 0 22px 45px rgba(0, 0, 0, .25), 0 10px 28px rgba(107, 77, 186, .42); }
.act-card:nth-child(6n+5):hover { box-shadow: 0 22px 45px rgba(0, 0, 0, .25), 0 10px 28px rgba(255, 210, 63, .55); }
.act-card:nth-child(6n+6):hover { box-shadow: 0 22px 45px rgba(0, 0, 0, .25), 0 10px 28px rgba(255, 140, 66, .48); }


/* ─── SERVICE CARDS (services page top) ─── */
.service-card {
  overflow: hidden;
}

/* Disable the old bleeding halo pseudo-element */
.service-card::before,
.service-card:hover::before {
  display: none !important;
}

/* New: colored drop-shadow on hover, per-variant color */
.service-card:hover {
  box-shadow: 0 22px 50px rgba(15, 76, 58, .22);
}
.service-card.s1:hover { box-shadow: 0 22px 50px rgba(15, 76, 58, .2), 0 10px 30px rgba(255, 210, 63, .55); }
.service-card.s2:hover { box-shadow: 0 22px 50px rgba(15, 76, 58, .2), 0 10px 30px rgba(15, 76, 58, .35); }
.service-card.s3:hover { box-shadow: 0 22px 50px rgba(15, 76, 58, .2), 0 10px 30px rgba(255, 143, 163, .48); }
.service-card.s4:hover { box-shadow: 0 22px 50px rgba(15, 76, 58, .2), 0 10px 30px rgba(155, 217, 224, .55); }


/* ============================================================
   ============ ICON POSITION FIX =============================
   ============================================================
   Move the floating icon to the bottom-right of the image,
   overlapping the image/body seam (classic floating badge).
   Position is preserved on hover — the icon stays straddling
   the seam, lifting slightly with the transform animation. */

.act-card .ic-floating {
  top: auto !important;
  bottom: -5px;
  right: 18px;
}

/* ============================================================
   ============ MOBILE FIXES =================================
   ============================================================ */

/* ---- 1. Show banner image on mobile (full-width strip) ---- */
@media (max-width: 960px) {
  /* Override existing display:none */
  .nav-banner {
    display: block !important;
    width: 100%;
    margin-top: 8px;
    flex-basis: 100%;
  }
  .nav-banner img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    display: block;
  }
  /* Let the logo wrap so banner can take its own row inside .logo */
  .logo {
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
  }
  .logo-text-wrap {
    flex: 1;
    min-width: 0;
  }
}

/* On very narrow phones, give the banner slightly more breathing room */
@media (max-width: 480px) {
  .nav-banner {
    margin-top: 10px;
  }
}


/* ---- 2. Fix Founder card layout on mobile ---- */
@media (max-width: 600px) {
  .founder-card {
    gap: 14px;
    padding: 16px 18px;
    align-items: flex-start;
  }
  .founder-ic {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    border-radius: 14px;
  }
  .founder-info {
    min-width: 0;
    flex: 1;
  }
  .founder-label {
    font-size: .62rem;
    letter-spacing: .15em;
  }
  .founder-trust {
    font-size: 1rem;
    line-height: 1.25;
    margin-bottom: 8px;
  }
  .founder-name {
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 6px;
    font-size: .82rem;
    align-items: baseline;
  }
  /* Keep "G. Yuvarani" together — never wrap mid-name */
  .founder-name strong {
    white-space: nowrap;
  }
  /* Drop the qualification badge to its own row so nothing squeezes */
  .founder-name small {
    flex-basis: 100%;
    width: max-content;
    margin: 4px 0 0;
    padding: 3px 12px;
  }
}

/* ============================================================
   ============ MOBILE FIXES (v2) =============================
   ============================================================ */

/* ---- Fix Founder card layout on mobile ---- */
@media (max-width: 600px) {
  .founder-card {
    gap: 14px;
    padding: 16px 18px;
    align-items: flex-start;
  }
  .founder-ic {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    border-radius: 14px;
  }
  .founder-info {
    min-width: 0;
    flex: 1;
  }
  .founder-label {
    font-size: .62rem;
    letter-spacing: .15em;
  }
  .founder-trust {
    font-size: 1rem;
    line-height: 1.25;
    margin-bottom: 8px;
  }
  .founder-name {
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 6px;
    font-size: .82rem;
    align-items: baseline;
  }
  .founder-name strong {
    white-space: nowrap;
  }
  .founder-name small {
    flex-basis: 100%;
    width: max-content;
    margin: 4px 0 0;
    padding: 3px 12px;
  }
}


/* ============================================================
   ============ TRUST BANNER (About page signboard) ===========
   ============================================================ */
.trust-banner {
  margin: 28px 0 32px;
}
.trust-banner-frame {
  background: #fff;
  border: 1.5px solid rgba(255, 210, 63, .5);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(15, 76, 58, .08);
  overflow: hidden;
  transition: transform .4s ease, box-shadow .4s ease;
  position: relative;
}
.trust-banner-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 210, 63, .12), rgba(255, 140, 66, .08), transparent);
  pointer-events: none;
  z-index: 0;
}
.trust-banner-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(255, 140, 66, .15);
}
.trust-banner-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  position: relative;
  z-index: 1;
}
.trust-banner-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  margin-top: 14px;
  font-size: .82rem;
  color: var(--green-deep);
  font-weight: 600;
}
.trust-banner-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trust-banner-badges i {
  color: var(--orange);
}
@media (max-width: 600px) {
  .trust-banner { margin: 22px 0 26px; }
  .trust-banner-frame { padding: 6px; border-radius: 12px; }
  .trust-banner-badges { font-size: .72rem; gap: 8px 12px; margin-top: 12px; }
}

/* ============================================================
   ============ FOUNDER CARD v2 (with real photo) =============
   ============================================================ */

/* Hide the old generic icon — keep CSS in case it's referenced */
.founder-card .founder-ic { display: none; }

/* New photo frame */
.founder-photo {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  box-shadow: 0 8px 22px rgba(255, 140, 66, .25);
  align-self: flex-start;
  margin-top: 4px;
}
.founder-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;   /* auto-crop toward the face */
  border: 3px solid #fff;
  display: block;
  position: relative;
  z-index: 2;
}
.founder-photo-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 210, 63, .65);
  animation: founderRingSpin 18s linear infinite;
  pointer-events: none;
}
@keyframes founderRingSpin {
  to { transform: rotate(360deg); }
}
.founder-card:hover .founder-photo img {
  transform: scale(1.04);
}
.founder-photo img {
  transition: transform .5s ease;
}

/* Founder quote tagline */
.founder-quote {
  margin: 12px 0 0;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--muted);
  font-style: italic;
  position: relative;
  padding-left: 4px;
}
.founder-quote i {
  color: var(--orange);
  font-size: .7rem;
  margin-right: 6px;
  opacity: .7;
}

/* Allow the card to grow vertically with the new content */
.founder-card {
  align-items: flex-start;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .founder-photo {
    width: 70px;
    height: 70px;
    padding: 3px;
  }
  .founder-photo-ring {
    inset: -5px;
    border-width: 1.5px;
  }
  .founder-quote {
    font-size: .78rem;
    margin-top: 10px;
  }
}

/* ============================================================
   ============ FOUNDER CARD — FULL LAYOUT FIX ================
   ============================================================
   Restructures the founder name row so:
   - "G. Yuvarani" stays together on one line
   - Long qualifications drop to their own line as a clean
     credentials block (not a squeezed pill badge)
   - Works at all screen sizes */

.founder-card {
  align-items: flex-start;
}

.founder-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 4px;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Keep "Founder: G. Yuvarani" on one line as one unit */
.founder-name > i,
.founder-name > strong {
  flex-shrink: 0;
}
.founder-name strong {
  white-space: nowrap;
}

/* Promote the qualifications to their own readable line */
.founder-name small {
  flex-basis: 100%;
  background: rgba(15, 76, 58, .07);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: .78rem;
  color: var(--green-deep);
  font-weight: 600;
  margin-top: 6px;
  line-height: 1.45;
  display: block;
  width: 100%;
}


/* ============================================================
   ============ TRUST BANNER — LARGER DISPLAY =================
   ============================================================ */
.trust-banner {
  margin: 32px 0 36px;
}
.trust-banner-frame {
  background: #fff;
  border: 1.5px solid rgba(255, 210, 63, .5);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(15, 76, 58, .08);
  overflow: hidden;
  transition: transform .4s ease, box-shadow .4s ease;
  position: relative;
}
.trust-banner-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 210, 63, .12), rgba(255, 140, 66, .08), transparent);
  pointer-events: none;
  z-index: 0;
}
.trust-banner-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(255, 140, 66, .15);
}
.trust-banner-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.trust-banner-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 22px;
  margin-top: 16px;
  font-size: .85rem;
  color: var(--green-deep);
  font-weight: 600;
}
.trust-banner-badges span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.trust-banner-badges i {
  color: var(--orange);
}


/* ============================================================
   ============ MOBILE ADJUSTMENTS ============================
   ============================================================ */
@media (max-width: 600px) {
  .founder-card {
    gap: 14px;
    padding: 16px 18px;
  }
  .founder-photo {
    width: 70px;
    height: 70px;
    padding: 3px;
  }
  .founder-photo-ring {
    inset: -5px;
    border-width: 1.5px;
  }
  .founder-info {
    min-width: 0;
    flex: 1;
  }
  .founder-label {
    font-size: .62rem;
    letter-spacing: .15em;
  }
  .founder-trust {
    font-size: 1rem;
    line-height: 1.25;
    margin-bottom: 8px;
  }
  .founder-name {
    font-size: .82rem;
  }
  .founder-name small {
    font-size: .72rem;
    padding: 5px 10px;
  }
  .founder-quote {
    font-size: .78rem;
    margin-top: 10px;
  }

  .trust-banner { margin: 22px 0 26px; }
  .trust-banner-frame { padding: 8px; border-radius: 14px; }
  .trust-banner-badges { font-size: .72rem; gap: 8px 14px; margin-top: 12px; }
}