/* ================================================================
   SIBANYA MILESTONE BRIDGE SCHOOL — Complete Mobile-First CSS
   Colors: Green #0F9D58 | Red #E53935 | White #FFFFFF
   Est. 2025 | Bridge to Mainstream Education
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Urbanist:wght@700;800;900&display=swap');

/* ── VARIABLES ── */
:root {
  --green:       #0F9D58;
  --green-d:     #0a7a43;
  --green-l:     #e8f5e9;
  --red:         #E53935;
  --red-l:       #fdecea;
  --white:       #ffffff;
  --dark:        #1a2e35;
  --gray:        #666;
  --light:       #f7fdf9;
  --border:      rgba(15,157,88,.12);
  --shadow-s:    0 2px 12px rgba(15,157,88,.10);
  --shadow-m:    0 6px 28px rgba(15,157,88,.16);
  --shadow-l:    0 16px 55px rgba(0,0,0,.11);
  --r-s:  10px;
  --r-m:  16px;
  --r-l:  22px;
  --r-xl: 28px;
  --tr: all .3s cubic-bezier(.4,0,.2,1);
  --font: 'Plus Jakarta Sans',sans-serif;
  --disp: 'Urbanist',sans-serif;
  --nav-h: 66px;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--font);color:var(--dark);background:#fff;
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit;transition:var(--tr)}
ul{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
input,select,textarea{font-family:inherit}
/* ═══ HORIZONTAL OVERFLOW FIX (safe - no scroll blocking) ═══ */
/* Wrap all content to prevent horizontal scroll WITHOUT touching body overflow */
.hdr-inner, .admin-content, .container, .container-fluid {
  max-width: 100%;
}
/* no wrapper overflow needed */

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--green);border-radius:4px}

/* ── PREVENT HORIZONTAL SCROLL ── */
.container,.container-fluid{max-width:100%}
@media(max-width:767px){.container{padding-left:16px!important;padding-right:16px!important}}
section,footer,header,.main-header{max-width:100%}

/* ================================================================
   PAGE LOADER
   ================================================================ */
#pageLoader{
  position:fixed;inset:0;z-index:99999;
  background:linear-gradient(160deg,#0a3d22 0%,#0F9D58 55%,#0a3d22 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .6s ease,visibility .6s ease;
  padding:0 24px;
}
#pageLoader.hide{opacity:0;visibility:hidden;pointer-events:none}
.loader-logo-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;
  margin-bottom:28px;
}
.loader-logo-img{
  width:88px;height:88px;border-radius:20px;
  object-fit:contain;background:#fff;padding:6px;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
  animation:ldPulse 1.5s ease-in-out infinite;
}
.loader-ring{
  position:absolute;width:110px;height:110px;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:#fff;border-radius:50%;
  animation:ldSpin 1s linear infinite;
}
@keyframes ldPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes ldSpin{to{transform:rotate(360deg)}}
.loader-school-name{
  font-family:var(--disp);font-size:1.15rem;font-weight:900;
  color:#fff;text-align:center;line-height:1.25;margin-bottom:6px;
  letter-spacing:.5px;
}
.loader-tagline{
  font-size:.75rem;color:rgba(255,255,255,.7);font-weight:600;
  letter-spacing:1px;text-transform:uppercase;text-align:center;margin-bottom:28px;
}
.loader-quote{
  max-width:320px;text-align:center;color:rgba(255,255,255,.88);
  font-size:.95rem;font-weight:500;line-height:1.65;margin-bottom:6px;
  animation:qIn .6s ease;
}
@keyframes qIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.loader-author{color:rgba(255,255,255,.55);font-size:.75rem;font-weight:700;text-align:center;margin-bottom:28px}
.loader-bar{width:180px;height:3px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden}
.loader-bar-fill{height:100%;background:#fff;border-radius:2px;animation:ldBar 3s ease forwards}
@keyframes ldBar{to{width:100%}}

/* ================================================================
   NOTICE BAR
   ================================================================ */
.notice-bar{
  background:linear-gradient(90deg,var(--green-d),var(--green));
  height:34px;display:flex;align-items:center;overflow:hidden;
  position:relative;z-index:1010;width:100%;
}
.notice-label{
  background:var(--red);flex-shrink:0;
  display:flex;align-items:center;gap:5px;
  padding:0 16px 0 12px;height:100%;
  font-size:.68rem;font-weight:800;color:#fff;
  letter-spacing:1px;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,86% 100%,0 100%);
  padding-right:22px;white-space:nowrap;
}
.pulse-dot{width:5px;height:5px;border-radius:50%;background:#fff;animation:pd 1.2s infinite}
@keyframes pd{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.8)}}
.notice-scroll{flex:1;overflow:hidden}
.notice-inner{
  display:flex;gap:50px;white-space:nowrap;
  animation:nscroll 32s linear infinite;
  font-size:.75rem;color:rgba(255,255,255,.92);font-weight:500;padding:0 16px;
}
.notice-inner:hover{animation-play-state:paused}
.notice-item{display:inline-flex;align-items:center;gap:6px}
.notice-item::after{content:'◆';font-size:.4rem;opacity:.5}
@keyframes nscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ================================================================
   HEADER
   ================================================================ */
.main-header{
  position:sticky;top:0;z-index:1000;
  height:var(--nav-h);display:flex;align-items:center;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:var(--tr);width:100%;
}
.main-header.scrolled{box-shadow:0 4px 24px rgba(15,157,88,.12)}
.hdr-inner{
  width:100%;max-width:1280px;margin:0 auto;
  padding:0 16px;display:flex;align-items:center;gap:12px;
}
/* LOGO */
.hdr-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;min-width:0}
.hdr-logo-img{
  width:44px;height:44px;border-radius:11px;
  object-fit:contain;background:var(--green-l);
  padding:3px;flex-shrink:0;
}
.hdr-logo-text{min-width:0}
.hdr-logo-name{
  font-family:var(--disp);font-size:.82rem;font-weight:900;
  color:var(--dark);display:block;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hdr-logo-tag{font-size:.6rem;color:var(--green);font-weight:700;letter-spacing:.3px;display:block}
/* NAV */
.hdr-nav{flex:1;display:flex;justify-content:center}
.nav-list{display:flex;align-items:center;gap:2px}
.nav-list li a{
  display:flex;align-items:center;gap:4px;
  padding:7px 10px;font-size:.76rem;font-weight:700;
  color:#555;border-radius:9px;transition:var(--tr);
  position:relative;white-space:nowrap;
}
.nav-list li a::after{
  content:'';position:absolute;bottom:3px;left:50%;right:50%;
  height:2px;background:var(--green);border-radius:2px;transition:var(--tr);
}
.nav-list li a:hover,.nav-list li a.active{color:var(--green);background:var(--green-l)}
.nav-list li a:hover::after,.nav-list li a.active::after{left:10px;right:10px}
/* ACTIONS */
.hdr-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.btn-apply{
  background:linear-gradient(135deg,var(--green),var(--green-d));
  color:#fff;padding:9px 16px;border-radius:11px;
  font-size:.78rem;font-weight:800;
  display:flex;align-items:center;gap:6px;
  box-shadow:0 4px 14px rgba(15,157,88,.38);transition:var(--tr);
  white-space:nowrap;
}
.btn-apply:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,157,88,.5);color:#fff}
.hamburger{
  display:none;flex-direction:column;gap:4px;
  padding:6px;width:36px;height:36px;justify-content:center;
}
.hamburger span{display:block;width:22px;height:2px;background:var(--dark);border-radius:2px;transition:var(--tr)}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── DRAWER ── */
.drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.48);backdrop-filter:blur(4px);z-index:9998;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-mask.show{opacity:1;pointer-events:all}
.mobile-drawer{
  position:fixed;top:0;right:-100%;width:min(290px,85vw);
  height:100%;background:#fff;z-index:9999;
  transition:right .36s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:-6px 0 30px rgba(0,0,0,.14);
}
.mobile-drawer.open{right:0}
.drawer-head{
  background:linear-gradient(135deg,var(--green),var(--green-d));
  padding:18px 16px;display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.drawer-head-logo{display:flex;align-items:center;gap:10px}
.drawer-head-logo img{width:42px;height:42px;border-radius:10px;object-fit:contain;background:rgba(255,255,255,.2);padding:3px}
.drawer-head-logo strong{color:#fff;font-family:var(--disp);font-size:.85rem;font-weight:900;display:block;line-height:1.2}
.drawer-head-logo small{color:rgba(255,255,255,.75);font-size:.62rem;font-weight:600}
.drawer-x{width:32px;height:32px;background:rgba(255,255,255,.18);border-radius:8px;color:#fff;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.drawer-nav{flex:1;overflow-y:auto;padding:10px}
.drawer-nav a{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:11px;
  font-size:.85rem;font-weight:700;color:#444;
  margin-bottom:2px;transition:var(--tr);
}
.drawer-nav a:hover,.drawer-nav a.active{background:var(--green-l);color:var(--green)}
.drawer-nav a i{width:17px;text-align:center;color:var(--green);font-size:.9rem}
.drawer-foot{padding:14px;border-top:1px solid #f0f0f0;flex-shrink:0}

/* ── BOTTOM NAV ── */
.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
  border-top:1px solid var(--border);z-index:990;
  padding:5px 0 max(6px,env(safe-area-inset-bottom));
  box-shadow:0 -3px 18px rgba(0,0,0,.07);
}
.bnav{display:flex}
.bnav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:5px 2px;color:#aaa;font-size:.58rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.3px;transition:var(--tr);
}
.bnav-item i{font-size:1.1rem;transition:var(--tr)}
.bnav-item.active,.bnav-item:hover{color:var(--green)}
.bnav-item.active i{transform:translateY(-2px)}
.bnav-dot{width:4px;height:4px;border-radius:50%;background:var(--green);opacity:0;transition:var(--tr);margin-top:1px}
.bnav-item.active .bnav-dot{opacity:1}

/* ================================================================
   SHARED SECTION STYLES
   ================================================================ */
.sp{padding:70px 0}
.sp-sm{padding:50px 0}
.sh{margin-bottom:2.5rem}
.badge{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--green-l);color:var(--green);
  font-size:.68rem;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;padding:5px 14px;border-radius:50px;
  border:1.5px solid rgba(15,157,88,.2);margin-bottom:.65rem;
}
.badge-red{background:var(--red-l);color:var(--red);border-color:rgba(229,57,53,.2)}
.badge-white{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.3)}
.stitle{
  font-family:var(--disp);
  font-size:clamp(1.5rem,4vw,2.2rem);
  font-weight:900;color:var(--dark);
  line-height:1.2;margin-bottom:.6rem;
}
/* On dark backgrounds, titles auto-white */
.testi-section .stitle,
.cta-band .stitle{color:#fff}
.testi-section .sdesc,
.cta-band .sdesc{color:rgba(255,255,255,.82)}
.stitle span,.tg{color:var(--green)!important}
.stitle-white{color:#fff}
.sdesc{font-size:.95rem;color:var(--gray);line-height:1.75;max-width:520px}
.sdesc.center{margin:0 auto}
.sdivider{width:44px;height:4px;background:linear-gradient(90deg,var(--green),#6fcf97);border-radius:2px;margin-bottom:.9rem}
.text-center .sdivider{margin:0 auto .9rem}

/* ── BUTTONS ── */
.btn-g{
  background:linear-gradient(135deg,var(--green),var(--green-d));
  color:#fff;padding:12px 26px;border-radius:12px;
  font-weight:800;font-size:.88rem;
  display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 5px 18px rgba(15,157,88,.38);transition:var(--tr);
}
.btn-g:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,157,88,.5);color:#fff}
.btn-r{
  background:linear-gradient(135deg,var(--red),#c62828);
  color:#fff;padding:12px 26px;border-radius:12px;
  font-weight:800;font-size:.88rem;
  display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 5px 18px rgba(229,57,53,.38);transition:var(--tr);
}
.btn-r:hover{transform:translateY(-2px);color:#fff}
.btn-ol-g{
  background:transparent;color:var(--green);
  padding:12px 24px;border-radius:12px;font-weight:800;font-size:.88rem;
  border:2px solid var(--green);
  display:inline-flex;align-items:center;gap:7px;transition:var(--tr);
}
.btn-ol-g:hover{background:var(--green);color:#fff;transform:translateY(-2px)}
.btn-white{
  background:#fff;color:var(--green);padding:12px 26px;border-radius:12px;
  font-weight:800;font-size:.88rem;
  display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 5px 18px rgba(0,0,0,.14);transition:var(--tr);
}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.2)}
.ripple{position:relative;overflow:hidden}
.ripple::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.3);width:0;height:0;left:50%;top:50%;transform:translate(-50%,-50%);transition:width .5s,height .5s,opacity .5s;opacity:0}
.ripple:active::after{width:250px;height:250px;opacity:1;transition:0s}

/* ================================================================
   HERO SECTION
   ================================================================ */
.hero{
  position:relative;min-height:100svh;
  overflow:hidden;background:var(--dark);
  display:flex;flex-direction:column;
}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.2s ease;
}
.hero-slide::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(10,60,30,.82) 0%,rgba(15,80,45,.68) 50%,rgba(10,40,20,.6) 100%);
}
.hero-slide.active{opacity:1}
#heroCanvas{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.4}
.hero-video-wrap{position:absolute;inset:0;z-index:1;display:none}
.hero-video-wrap iframe{width:100%;height:100%;border:none;pointer-events:none;transform:scale(1.04)}
.hero-video-wrap::after{content:'';position:absolute;inset:0;background:rgba(10,40,20,.55);z-index:1}
/* floating shapes */
.hshape{position:absolute;border-radius:50%;opacity:.06;pointer-events:none}
.hshape-1{width:500px;height:500px;background:var(--green);top:-120px;right:-100px;animation:hf1 10s ease-in-out infinite}
.hshape-2{width:300px;height:300px;background:#fff;bottom:-60px;left:-50px;animation:hf2 13s ease-in-out infinite}
.hshape-3{width:160px;height:160px;background:var(--red);top:40%;left:4%;animation:hf3 9s ease-in-out infinite}
@keyframes hf1{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,18px)}}
@keyframes hf2{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,-20px)}}
@keyframes hf3{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
/* HERO CONTENT */
.hero-content{
  position:relative;z-index:6;flex:1;
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + 20px) 5% 90px;
}
.hero-inner{max-width:640px;color:#fff;width:100%}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:.72rem;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;
  padding:7px 16px;border-radius:50px;margin-bottom:1.25rem;
}
.hero-eyebrow i{color:#FFD700}
.hero-title{
  font-family:var(--disp);
  font-size:clamp(2rem,7vw,3.6rem);
  font-weight:900;line-height:1.1;
  margin-bottom:1.1rem;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}
.hero-title .l1{display:block}
.hero-title .l2{
  display:block;color:var(--green);
  position:relative;
}
.hero-title .l2::after{
  content:'';position:absolute;bottom:-5px;left:0;
  width:0;height:3px;
  background:linear-gradient(90deg,var(--green),transparent);
  border-radius:2px;animation:tline 2s ease .5s forwards;
}
@keyframes tline{to{width:100%}}
.hero-sub{font-size:clamp(.9rem,2.5vw,1.05rem);opacity:.88;margin-bottom:1.8rem;line-height:1.72;max-width:500px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:1.5rem}
/* First Time in Odisha badge */
.hero-fto{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--red);color:#fff;
  font-size:.78rem;font-weight:800;letter-spacing:.5px;
  padding:8px 18px;border-radius:50px;
  box-shadow:0 4px 14px rgba(229,57,53,.45);
  animation:ftoBounce 2s ease infinite;
}
@keyframes ftoBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* Hero dots */
.hero-dots{position:absolute;bottom:60px;left:5%;z-index:7;display:flex;gap:7px}
.hdot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.38);cursor:pointer;transition:var(--tr)}
.hdot.active{background:#fff;width:20px;border-radius:4px}
/* Wave */
.hero-wave{position:absolute;bottom:-1px;left:0;right:0;z-index:7;line-height:0}
.hero-wave svg{display:block;width:100%}

/* ================================================================
   ABOUT-SCHOOL INTRO SECTION (5 pillars from PDF)
   ================================================================ */
.pillars-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:1.5rem}
.pillar{
  background:#fff;border-radius:var(--r-m);padding:1.1rem .8rem;
  text-align:center;border:1px solid var(--border);
  box-shadow:var(--shadow-s);transition:var(--tr);
}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:var(--green)}
.pillar-icon{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,var(--green),var(--green-d));
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:#fff;margin:0 auto .75rem;
}
.pillar h6{font-size:.75rem;font-weight:800;color:var(--dark);line-height:1.3}

/* ================================================================
   WHAT WE OFFER (special features from PDF pg 6)
   ================================================================ */
.special-feature{
  background:#fff;border-radius:var(--r-l);
  overflow:hidden;border:1px solid var(--border);
  box-shadow:var(--shadow-s);transition:var(--tr);height:100%;
}
.special-feature:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.sf-head{
  background:linear-gradient(135deg,var(--green),var(--green-d));
  padding:1.2rem 1.4rem;
  display:flex;align-items:center;gap:12px;
}
.sf-head i{font-size:1.6rem;color:rgba(255,255,255,.85)}
.sf-head h5{font-family:var(--disp);font-weight:900;color:#fff;font-size:.97rem;margin:0}
.sf-body{padding:1.2rem 1.4rem}
.sf-list{list-style:none;margin:0;padding:0}
.sf-list li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:.85rem;color:var(--gray);margin-bottom:7px;padding-bottom:7px;
  border-bottom:1px solid var(--border);
}
.sf-list li:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.sf-list li::before{content:'★';color:var(--green);font-size:.7rem;margin-top:3px;flex-shrink:0}

/* ================================================================
   PROGRAMS (matching PDF pg 3)
   ================================================================ */
.prog-card{
  background:#fff;border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-s);
  height:100%;display:flex;flex-direction:column;transition:var(--tr);
}
.prog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);border-color:var(--green)}
.prog-img{position:relative;overflow:hidden}
.prog-img img{width:100%;height:185px;object-fit:cover;transition:transform .5s}
.prog-card:hover .prog-img img{transform:scale(1.06)}
.prog-tag{
  position:absolute;top:12px;left:12px;
  background:var(--green);color:#fff;
  font-size:.68rem;font-weight:800;padding:4px 11px;
  border-radius:50px;letter-spacing:.5px;text-transform:uppercase;
}
.prog-body{padding:1.3rem;flex:1;display:flex;flex-direction:column}
.prog-body h4{font-family:var(--disp);font-weight:900;font-size:.97rem;margin-bottom:.5rem;color:var(--dark)}
.prog-body p{font-size:.84rem;color:var(--gray);flex:1;line-height:1.68}
/* ILP badge */
.ilp-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--red-l);color:var(--red);font-size:.7rem;font-weight:800;
  padding:4px 10px;border-radius:6px;margin-top:.8rem;
}

/* ================================================================
   VISION & MISSION (PDF pg 4)
   ================================================================ */
.vm-card{
  background:#fff;border-radius:var(--r-l);padding:1.75rem;
  border:1px solid var(--border);box-shadow:var(--shadow-s);
  height:100%;position:relative;overflow:hidden;transition:var(--tr);
}
.vm-card:hover{box-shadow:var(--shadow-m)}
.vm-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--green),#6fcf97);
}
.vm-card.red::before{background:linear-gradient(90deg,var(--red),#ff6b6b)}
.vm-icon{
  width:60px;height:60px;border-radius:16px;
  background:var(--green-l);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:var(--green);margin-bottom:1rem;
}
.vm-card.red .vm-icon{background:var(--red-l);color:var(--red)}
.vm-card h4{font-family:var(--disp);font-weight:900;font-size:1.05rem;color:var(--dark);margin-bottom:.6rem}
.vm-card p{font-size:.88rem;color:var(--gray);line-height:1.72}
/* 5 mission icons row */
.mission-icons{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:2rem}
.mi-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:#fff;border-radius:var(--r-m);padding:14px 10px;
  border:1px solid var(--border);box-shadow:var(--shadow-s);
  width:calc(20% - 8px);min-width:70px;transition:var(--tr);
}
.mi-item:hover{border-color:var(--green);transform:translateY(-3px)}
.mi-item i{font-size:1.4rem;color:var(--green)}
.mi-item span{font-size:.65rem;font-weight:800;color:var(--dark);text-align:center;line-height:1.3}

/* ================================================================
   SERVICES / FACILITIES CARDS
   ================================================================ */
.svc-card{
  background:#fff;border-radius:var(--r-l);padding:1.6rem 1.4rem;
  text-align:center;border:1px solid var(--border);
  box-shadow:var(--shadow-s);height:100%;transition:var(--tr);
  position:relative;overflow:hidden;
}
.svc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--green),#6fcf97);
  transform:scaleX(0);transform-origin:left;transition:transform .35s;
}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);border-color:var(--green)}
.svc-card:hover::before{transform:scaleX(1)}
.svc-icon{
  width:68px;height:68px;border-radius:18px;
  background:var(--green-l);
  display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;color:var(--green);margin:0 auto 1.1rem;transition:var(--tr);
}
.svc-card:hover .svc-icon{background:var(--green);color:#fff;transform:rotate(5deg) scale(1.1)}
.svc-card h5{font-family:var(--disp);font-weight:900;font-size:.97rem;margin-bottom:.5rem;color:var(--dark)}
.svc-card p{font-size:.85rem;color:var(--gray);margin:0;line-height:1.65}

/* ================================================================
   WHY CHOOSE US (from PDF pg 5)
   ================================================================ */
.why-row{
  background:#fff;border-radius:var(--r-l);
  border:1px solid var(--border);box-shadow:var(--shadow-s);
  padding:1.3rem 1.5rem;display:flex;align-items:flex-start;gap:14px;
  transition:var(--tr);height:100%;
}
.why-row:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--green)}
.why-icon{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  background:linear-gradient(135deg,var(--green),var(--green-d));
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:#fff;box-shadow:0 4px 14px rgba(15,157,88,.3);
}
.why-text h5{font-family:var(--disp);font-weight:900;font-size:.93rem;color:var(--dark);margin-bottom:.3rem}
.why-text p{font-size:.83rem;color:var(--gray);margin:0;line-height:1.6}
.why-list{list-style:none;margin:.5rem 0 0;padding:0}
.why-list li{font-size:.8rem;color:var(--gray);display:flex;align-items:flex-start;gap:5px;margin-bottom:3px}
.why-list li::before{content:'★';color:var(--green);font-size:.6rem;margin-top:3px;flex-shrink:0}

/* ================================================================
   STRENGTH & PARENT SECTION (PDF pg 7)
   ================================================================ */
.strength-card{
  background:#fff;border-radius:var(--r-l);padding:1.5rem;
  border:1px solid var(--border);box-shadow:var(--shadow-s);height:100%;
}
.str-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.str-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.str-icon{width:44px;height:44px;border-radius:12px;background:var(--green-l);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--green);flex-shrink:0}
.str-item h6{font-size:.87rem;font-weight:800;color:var(--dark);margin-bottom:2px}
.str-item p{font-size:.8rem;color:var(--gray);margin:0}
/* parent card */
.parent-card{
  background:linear-gradient(135deg,var(--green),var(--green-d));
  border-radius:var(--r-l);padding:1.75rem;color:#fff;height:100%;
}
.parent-card h4{font-family:var(--disp);font-weight:900;font-size:1.1rem;margin-bottom:.75rem}
.parent-card p{font-size:.9rem;opacity:.88;margin-bottom:1rem;line-height:1.7}
.parent-list{list-style:none;margin:0;padding:0}
.parent-list li{font-size:.85rem;color:rgba(255,255,255,.9);display:flex;align-items:flex-start;gap:7px;margin-bottom:7px}
.parent-list li i{color:#FFD700;flex-shrink:0;margin-top:2px}

/* ================================================================
   STATS
   ================================================================ */
.stats-band{background:linear-gradient(135deg,var(--green),var(--green-d));padding:50px 0}
.stat-blk{text-align:center;color:#fff;padding:14px;position:relative}
.stat-blk::after{content:'';position:absolute;right:0;top:20%;bottom:20%;width:1px;background:rgba(255,255,255,.18)}
.stat-blk:last-child::after{display:none}
.stat-n{font-family:var(--disp);font-size:clamp(1.9rem,5vw,2.7rem);font-weight:900;display:block;line-height:1}
.stat-lbl{font-size:.72rem;opacity:.82;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
.stat-ic{width:48px;height:48px;background:rgba(255,255,255,.14);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin:0 auto 9px}

/* ================================================================
   TESTIMONIALS
   ================================================================ */
.testi-section{background:linear-gradient(160deg,#0a3d22 0%,#0F9D58 100%)}
.testi-card{
  background:rgba(255,255,255,.07);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-l);
  padding:1.6rem;height:100%;
}
.testi-stars{color:#FFD700;font-size:.85rem;margin-bottom:.8rem}
.testi-text{color:rgba(255,255,255,.82);font-size:.88rem;line-height:1.78;margin-bottom:1.3rem;font-style:italic}
.testi-auth{display:flex;align-items:center;gap:11px}
.testi-av{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--green-d));
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;color:#fff;font-weight:800;overflow:hidden;flex-shrink:0;
}
.testi-av img{width:100%;height:100%;object-fit:cover}
.testi-auth h6{color:#fff;font-weight:700;font-size:.84rem;margin:0}
.testi-auth small{color:rgba(255,255,255,.6);font-size:.72rem}

/* ================================================================
   NEWS CARDS
   ================================================================ */
.news-card{
  background:#fff;border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-s);
  height:100%;display:flex;flex-direction:column;transition:var(--tr);
}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.nc-img{position:relative;overflow:hidden}
.nc-img img{width:100%;height:195px;object-fit:cover;transition:transform .5s}
.news-card:hover .nc-img img{transform:scale(1.06)}
.nc-date{position:absolute;bottom:12px;left:12px;background:var(--green);color:#fff;padding:4px 11px;border-radius:8px;font-size:.72rem;font-weight:800}
.nc-body{padding:1.3rem;flex:1;display:flex;flex-direction:column}
.nc-tag{background:var(--green-l);color:var(--green);font-size:.67rem;font-weight:800;padding:2px 9px;border-radius:50px;display:inline-block;margin-bottom:.55rem;text-transform:uppercase;letter-spacing:.5px}
.nc-body h5{font-family:var(--disp);font-weight:900;font-size:.93rem;margin-bottom:.45rem;color:var(--dark);line-height:1.4}
.nc-body p{font-size:.84rem;color:var(--gray);flex:1;line-height:1.65}
.nc-more{color:var(--green);font-weight:800;font-size:.78rem;display:inline-flex;align-items:center;gap:4px;margin-top:.8rem;transition:var(--tr)}
.nc-more:hover{gap:9px}

/* ================================================================
   CTA BAND
   ================================================================ */
.cta-band{
  background:linear-gradient(135deg,var(--green-d),var(--green),var(--green-d));
  padding:75px 0;position:relative;overflow:hidden;
}
.cta-band::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='1.5' fill='%23fff' fill-opacity='.05'/%3E%3C/svg%3E");
}
.cta-steps{display:flex;justify-content:center;gap:0;flex-wrap:nowrap;margin-bottom:2rem}
.cta-step{flex:1;text-align:center;color:#fff;padding:0 8px;position:relative;max-width:140px}
.cta-step::after{content:'';position:absolute;top:22px;left:calc(50% + 24px);right:calc(-50% + 24px);height:1.5px;background:rgba(255,255,255,.22)}
.cta-step:last-child::after{display:none}
.cta-step-ic{width:48px;height:48px;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin:0 auto 9px}
.cta-step h6{font-size:.76rem;font-weight:800}
.cta-step small{font-size:.67rem;opacity:.72}

/* ================================================================
   PAGE HERO (inner pages)
   ================================================================ */
.page-hero{
  padding:72px 0 50px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0a3d22 0%,var(--green-d) 50%,#0a3d22 100%);
}
.page-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23fff' fill-opacity='.05'/%3E%3C/svg%3E")}
.ph-shape{position:absolute;border-radius:50%;opacity:.06}
.ph-s1{width:350px;height:350px;background:#fff;top:-120px;right:-70px}
.ph-s2{width:180px;height:180px;background:var(--green);bottom:-50px;left:5%}
.page-hero h1{font-family:var(--disp);font-weight:900;color:#fff}
.page-hero .lead{color:rgba(255,255,255,.8)}
.breadcrumb-item a{color:rgba(255,255,255,.62)}
.breadcrumb-item a:hover{color:#fff}
.breadcrumb-item.active{color:rgba(255,255,255,.42)}
.breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.32)}

/* ================================================================
   ABOUT PAGE
   ================================================================ */
.about-img-wrap{position:relative}
.about-img{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-l)}
.about-img img{width:100%;height:400px;object-fit:cover}
.about-float{
  position:absolute;bottom:-18px;left:-16px;
  background:linear-gradient(135deg,var(--green),var(--green-d));
  color:#fff;border-radius:16px;padding:16px 20px;
  box-shadow:0 8px 26px rgba(15,157,88,.4);text-align:center;
}
.about-float strong{font-family:var(--disp);font-size:1.9rem;font-weight:900;display:block;line-height:1}
.about-float small{font-size:.7rem;opacity:.85}
.chip{
  display:flex;align-items:flex-start;gap:11px;
  background:var(--green-l);border-radius:13px;padding:13px;
  border:1px solid rgba(15,157,88,.15);transition:var(--tr);
}
.chip:hover{box-shadow:var(--shadow-s);transform:translateY(-2px)}
.chip-ic{width:36px;height:36px;background:var(--green);border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.88rem;flex-shrink:0}
.chip h6{font-size:.82rem;font-weight:800;color:var(--dark);margin-bottom:2px}
.chip p{font-size:.74rem;color:var(--gray);margin:0;line-height:1.5}

/* ================================================================
   CONTACT
   ================================================================ */
.contact-card{
  background:#fff;border-radius:var(--r-l);padding:1.6rem 1.4rem;
  text-align:center;border:1px solid var(--border);
  box-shadow:var(--shadow-s);height:100%;transition:var(--tr);
}
.contact-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:var(--green)}
.cc-icon{width:60px;height:60px;border-radius:16px;background:var(--green-l);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--green);margin:0 auto .9rem;transition:var(--tr)}
.contact-card:hover .cc-icon{background:var(--green);color:#fff}
.contact-card h5{font-family:var(--disp);font-weight:900;font-size:.93rem;color:var(--dark);margin-bottom:.4rem}
.contact-card p,.contact-card a{font-size:.86rem;color:var(--gray);margin:0}

/* ================================================================
   FORM
   ================================================================ */
.form-wrap{background:#fff;border-radius:var(--r-xl);padding:2rem;box-shadow:var(--shadow-m);border:1px solid var(--border)}
.form-wrap .flbl{font-size:.8rem;font-weight:800;color:var(--dark);margin-bottom:.35rem;display:block}
.form-wrap .fc{border-radius:11px;border:1.5px solid rgba(15,157,88,.18);padding:11px 14px;font-size:.88rem;background:#f7fdf9;font-family:var(--font);transition:var(--tr);width:100%}
.form-wrap .fc:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(15,157,88,.12);background:#fff;outline:none}

/* ================================================================
   GALLERY
   ================================================================ */
.g-filters{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-bottom:1.75rem}
.g-filter{
  padding:7px 16px;border-radius:50px;font-size:.78rem;font-weight:800;
  border:1.5px solid rgba(15,157,88,.22);background:transparent;
  color:var(--gray);cursor:pointer;transition:var(--tr);
}
.g-filter.active,.g-filter:hover{background:var(--green);color:#fff;border-color:var(--green)}
.g-masonry{columns:3;gap:10px}
.g-item{break-inside:avoid;margin-bottom:10px;border-radius:13px;overflow:hidden;cursor:pointer;position:relative}
.g-item img{width:100%;display:block;transition:transform .45s}
.g-item:hover img{transform:scale(1.05)}
.g-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,157,88,.82),transparent 60%);display:flex;align-items:flex-end;padding:12px;opacity:0;transition:var(--tr)}
.g-item:hover .g-overlay{opacity:1}
.g-overlay span{color:#fff;font-size:.8rem;font-weight:700}
.video-thumb{position:relative;border-radius:13px;overflow:hidden;cursor:pointer}
.video-thumb img{width:100%;height:165px;object-fit:cover;transition:transform .45s;display:block}
.video-thumb:hover img{transform:scale(1.04)}
.vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.28);transition:var(--tr)}
.vplay i{width:50px;height:50px;background:rgba(15,157,88,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.25rem;transition:var(--tr)}
.video-thumb:hover .vplay i{background:var(--green);transform:scale(1.1)}
.vtitle{padding:.7rem 1rem;background:#fff;font-size:.83rem;font-weight:800;color:var(--dark);border-radius:0 0 13px 13px}

/* ================================================================
   PRINCIPAL CARD
   ================================================================ */
.principal-card{
  background:#fff;border-radius:var(--r-xl);padding:2.2rem;
  box-shadow:var(--shadow-m);border:1px solid var(--border);
  position:relative;overflow:hidden;
}
.principal-card::before{content:'"';position:absolute;top:-15px;left:16px;font-size:8rem;color:var(--green);opacity:.07;font-family:Georgia,serif;line-height:1}
.principal-photo{width:100px;height:100px;border-radius:50%;object-fit:cover;border:4px solid var(--green);box-shadow:0 5px 20px rgba(15,157,88,.28)}
.principal-text{font-size:.92rem;color:var(--gray);line-height:1.8;font-style:italic;margin-top:.7rem}
.principal-sig{font-size:1.3rem;font-family:cursive;color:var(--green);margin-top:.45rem}

/* ================================================================
   FLOATING ELEMENTS
   ================================================================ */
.fab-group{position:fixed;bottom:86px;right:16px;z-index:990;display:flex;flex-direction:column;gap:9px}
.fab{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;color:#fff;
  box-shadow:0 5px 18px rgba(0,0,0,.18);transition:var(--tr);
  position:relative;
}
.fab:hover{transform:scale(1.12)}
.fab-wa{background:#25D366}
.fab-eq{background:var(--green)}
.fab-tip{position:absolute;right:58px;top:50%;transform:translateY(-50%);background:var(--dark);color:#fff;font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.fab:hover .fab-tip{opacity:1}
.scroll-top{
  position:fixed;bottom:16px;right:16px;width:42px;height:42px;
  background:var(--green);color:#fff;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
  box-shadow:0 4px 14px rgba(15,157,88,.4);
  opacity:0;transform:translateY(16px);transition:var(--tr);z-index:991;
}
.scroll-top.show{opacity:1;transform:translateY(0)}
.scroll-top:hover{background:var(--green-d);transform:translateY(-2px)}

/* ================================================================
   POPUP
   ================================================================ */
.popup-mask{position:fixed;inset:0;background:rgba(0,0,0,.52);backdrop-filter:blur(6px);z-index:99990;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s;padding:16px}
.popup-mask.show{opacity:1;pointer-events:all}
.popup-box{background:#fff;border-radius:var(--r-xl);max-width:420px;width:100%;overflow:hidden;transform:scale(.88) translateY(22px);transition:transform .42s cubic-bezier(.34,1.56,.64,1);box-shadow:0 28px 70px rgba(0,0,0,.22)}
.popup-mask.show .popup-box{transform:scale(1) translateY(0)}
.popup-head{background:linear-gradient(135deg,var(--green),var(--green-d));padding:1.6rem;text-align:center;color:#fff;position:relative}
.popup-close{position:absolute;top:12px;right:13px;width:29px;height:29px;background:rgba(255,255,255,.2);border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:.88rem}
.popup-close:hover{background:rgba(255,255,255,.35)}
.popup-head img{width:60px;height:60px;border-radius:14px;object-fit:contain;background:rgba(255,255,255,.2);padding:6px;margin:0 auto .7rem}
.popup-head i{font-size:2.2rem;margin-bottom:.5rem;display:block}
.popup-head h4{font-family:var(--disp);font-weight:900;margin:0;font-size:1.1rem}
.popup-head p{font-size:.83rem;opacity:.85;margin:.35rem 0 0}
.popup-body{padding:1.6rem;text-align:center}
/* enquiry popup */
.eq-mask{position:fixed;inset:0;background:rgba(0,0,0,.48);backdrop-filter:blur(6px);z-index:99991;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .3s}
.eq-mask.show{opacity:1;pointer-events:all}
.eq-box{background:#fff;border-radius:var(--r-xl);max-width:400px;width:100%;overflow:hidden;transform:scale(.9);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.eq-mask.show .eq-box{transform:scale(1)}
.eq-head{background:linear-gradient(135deg,var(--green),var(--green-d));padding:1.2rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.eq-head h5{color:#fff;font-family:var(--disp);font-weight:900;margin:0;font-size:.95rem}
.eq-head button{background:rgba(255,255,255,.2);border-radius:8px;color:#fff;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:.88rem}
.eq-body{padding:1.5rem}

/* ================================================================
   FOOTER
   ================================================================ */
.main-footer{background:#0a2012;color:rgba(255,255,255,.68)}
.footer-top{padding:58px 0 40px}
.ft-logo{display:flex;align-items:center;gap:10px;margin-bottom:1.1rem}
.ft-logo img{width:44px;height:44px;border-radius:11px;object-fit:contain;background:rgba(255,255,255,.12);padding:3px}
.ft-logo-name{color:#fff;font-family:var(--disp);font-weight:900;font-size:.88rem;display:block;line-height:1.2}
.ft-logo-tag{color:var(--green);font-size:.62rem;font-weight:700;letter-spacing:.3px}
.ft-about p{font-size:.83rem;line-height:1.72;color:rgba(255,255,255,.56)}
.ft-social{display:flex;gap:8px;margin-top:1.1rem}
.ft-social a{width:36px;height:36px;background:rgba(255,255,255,.07);border-radius:9px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.62);font-size:.85rem;transition:var(--tr)}
.ft-social a:hover{background:var(--green);color:#fff;transform:translateY(-3px)}
.ft-head{color:#fff;font-family:var(--disp);font-weight:900;font-size:.88rem;margin-bottom:1rem;padding-bottom:8px;position:relative}
.ft-head::after{content:'';position:absolute;bottom:0;left:0;width:26px;height:2px;background:var(--green);border-radius:2px}
.ft-links{list-style:none;margin:0;padding:0}
.ft-links li{margin-bottom:6px}
.ft-links a{font-size:.82rem;color:rgba(255,255,255,.56);display:flex;align-items:center;gap:5px;transition:var(--tr)}
.ft-links a::before{content:'›';color:var(--green);font-size:.95rem;line-height:1}
.ft-links a:hover{color:#fff;padding-left:3px}
.ft-contact{display:flex;align-items:center;gap:10px;margin-bottom:10px;text-align:left!important}
.ft-contact i{color:var(--green);width:18px;text-align:center;flex-shrink:0;font-size:.95rem;line-height:1}
.ft-contact a,.ft-contact span{font-size:.82rem;color:rgba(255,255,255,.62);transition:color .2s}
.ft-contact a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding:16px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.78rem;color:rgba(255,255,255,.36)}
.footer-bottom a{color:rgba(255,255,255,.42)}
.footer-bottom a:hover{color:var(--green)}

/* ================================================================
   MOBILE RESPONSIVE — PERFECT MOBILE
   ================================================================ */
@media (max-width: 991px) {
  .hdr-nav{display:none}
  .hamburger{display:flex}
  .pillars-grid{grid-template-columns:repeat(3,1fr)}
  .mission-icons .mi-item{width:calc(33% - 8px)}
  .cta-steps{flex-wrap:wrap}
  .cta-step{width:50%;max-width:none;margin-bottom:18px}
  .cta-step::after{display:none}
}

@media (max-width: 767px) {
  :root{--nav-h:60px}
  .sp{padding:55px 0}
  .sp-sm{padding:40px 0}
  body{font-size:15px}

  img{max-width:100%!important;height:auto}

  /* hide logo tag on mobile */
  .hdr-logo-tag{display:none}
  .hdr-logo-name{font-size:.78rem}
  .hdr-logo-img{width:38px;height:38px}

  /* Hero mobile */
  .hero-content{padding:calc(var(--nav-h)+16px) 4% 80px}
  .hero-title{font-size:clamp(1.75rem,8vw,2.5rem)}
  .hero-sub{font-size:.9rem}
  .hero-btns{gap:10px}
  .hero-btns .btn-g,.hero-btns .btn-white{padding:11px 18px;font-size:.82rem}
  .hero-wave svg{height:35px}

  /* Gallery mobile */
  .g-masonry{columns:2;gap:8px}
  .g-item{margin-bottom:8px}

  /* Pillars 2-col on mobile */
  .pillars-grid{grid-template-columns:repeat(2,1fr);gap:8px}

  /* mission 3-col */
  .mission-icons .mi-item{width:calc(33% - 8px);padding:10px 6px}

  /* stats */
  .stat-blk::after{display:none}
  .stat-blk{padding:10px 6px}
  .stat-n{font-size:1.8rem}

  /* CTA steps */
  .cta-steps{gap:0}
  .cta-step{width:50%;padding:0 6px;margin-bottom:16px}

  /* Bottom nav + scroll spacing */
  .bottom-nav{display:block}
  .fab-group{bottom:78px}
  .scroll-top{bottom:78px}
  .main-footer{padding-bottom:70px}

  /* Cards full width */
  .why-row,.strength-card,.parent-card,.vm-card,.prog-card,.svc-card{
    border-radius:var(--r-m)
  }

  /* About image */
  .about-img img{height:260px}
  .about-float{position:static;display:inline-flex;align-items:center;gap:14px;border-radius:13px;margin-top:12px;padding:12px 16px}

  /* Form */
  .form-wrap{padding:1.3rem}

  /* Footer mobile */
  .footer-top{padding:40px 0 30px}
  .ft-logo img{width:38px;height:38px}

  /* Popup mobile */
  .popup-box,.eq-box{max-width:95vw}

  /* Notice bar mobile */
  .notice-label{font-size:.62rem;padding-right:18px}
  .notice-inner{font-size:.72rem}

  /* Page hero mobile */
  .page-hero{padding:55px 0 38px}
  .page-hero h1{font-size:1.8rem}

  /* Table responsive */
  .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media (max-width: 480px) {
  :root{--nav-h:56px}
  .hero-title{font-size:1.7rem}
  .hero-eyebrow{font-size:.65rem;padding:6px 12px}
  .hero-fto{font-size:.7rem;padding:6px 13px}
  .pillars-grid{grid-template-columns:1fr 1fr}
  .g-masonry{columns:2;gap:6px}
  .mission-icons .mi-item{width:calc(50% - 8px)}
  .stitle{font-size:1.5rem}
  .cta-step h6{font-size:.72rem}
  .btn-g,.btn-r,.btn-ol-g,.btn-white,.btn-apply{padding:10px 16px;font-size:.82rem}
  /* stats 2x2 */
  .stats-band .row>div{width:50%}
  .stat-blk::after{display:none}
}

@media (max-width: 360px) {
  .hero-title{font-size:1.55rem}
  .hdr-inner{padding:0 10px}
  .pillars-grid{grid-template-columns:1fr 1fr}
}

/* ── UTILITIES ── */
img.lazy{opacity:0;transition:opacity .4s}
img.lazy.loaded{opacity:1}
.text-green{color:var(--green)!important}
.text-red{color:var(--red)!important}
.bg-light-g{background:var(--light)!important}

/* ================================================================
   MOBILE CENTER FIX + HERO VIDEO ASPECT RATIO + SCROLL ANIMATIONS
   ================================================================ */

/* ── FORCE CENTER ALL TEXT ON MOBILE ── */
@media (max-width: 767px) {
  /* Center all text in sections */
  section .container > .row > [class*="col-"] {
    text-align: center;
  }
  /* Center badges, titles, descriptions */
  .badge, .stitle, .sdesc, .sdivider, .sh {
    text-align: center;
  }
  .sdivider { margin-left: auto; margin-right: auto; }
  /* Center chips/value items */
  .chip { text-align: left; } /* keep chip inner text left */
  /* Center about float badge */
  .about-img-wrap { text-align: center; }
  /* Center hero content */
  .hero-inner { text-align: center; }
  .hero-sub { text-align: center; }
  .hero-btns { justify-content: center; }
  .hero-eyebrow { text-align: center; display: inline-flex; }
  .hero-fto { display: inline-flex; }
  /* Center page hero */
  .page-hero { text-align: center; }
  /* Center why-row text */
  .why-row { flex-direction: column; align-items: center; text-align: center; }
  .why-list { text-align: left; }
  /* Center strength items */
  .str-item { text-align: left; } /* keep left for readability */
  /* Center stat items */
  .stat-blk { text-align: center; }
  /* Center cta steps */
  .cta-step { text-align: center; }
  /* Center pillar grid */
  .pillars-grid { text-align: center; }
  /* Center mission icons */
  .mission-icons { justify-content: center; }
  /* Center download cards */
  .downloads-page .row { justify-content: center; }
  /* Center form wrap headings */
  .form-wrap h4 { text-align: center; }
  /* Center footer */
  .footer-top .col-6, .footer-top .col-lg-4, .footer-top .col-lg-2 { text-align: center; }
  .ft-head::after { left: 50%; transform: translateX(-50%); }
  .ft-links a { justify-content: center; }
  .ft-social { justify-content: center; }
  .footer-bottom { justify-content: center; text-align: center; }
  /* Center contact cards */
  .contact-card { text-align: center; }
  /* Center vm-card */
  .vm-card { text-align: center; }
  .vm-icon { margin-left: auto; margin-right: auto; }
  /* Center svc-card */
  .svc-card { text-align: center; }
  /* Center prog-body */
  .prog-body { text-align: center; }
  .ilp-badge { margin-left: auto; margin-right: auto; }
  /* Center news card */
  .nc-body { text-align: center; }
  .nc-more { margin-left: auto; }
  /* Center testi */
  .testi-auth { justify-content: center; }
  /* Center admission steps */
  .admission-steps { text-align: center; }
  /* Center principal */
  .principal-card { text-align: center; }
  .principal-card .d-flex { justify-content: center; }
  /* CTA band */
  .cta-band .text-white { text-align: center; }
  /* Section headers */
  .section-header, .sh { text-align: center !important; }
  /* About chips */
  .row.g-3 .chip { text-align: left; }
  /* Notice bar */
  .notice-bar { overflow: hidden; }
  /* Parent card list */
  .parent-list { text-align: left; }
  /* Teacher card */
  .prog-card[style*="border-radius"] .prog-body { text-align: center; }
  /* Achievement card */
  .achievement-card { text-align: center; }
}

/* ── HERO VIDEO — DESKTOP 16:9, MOBILE 9:16 ── */
.hero {
  /* Desktop: full screen viewport height */
  min-height: 100vh;
}
.hero-video-wrap {
  position: absolute; inset: 0; z-index: 1;
}
.hero-video-wrap iframe {
  width: 100%; height: 100%;
  border: none; pointer-events: none;
}

/* Desktop: 16:9 letterbox */
@media (min-width: 768px) {
  .hero-video-wrap iframe {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* 16:9 calculation: if width is 100vw, height = 56.25vw */
    min-width: 100%; min-height: 56.25vw;
    /* If height 100%, width needs to be 177.78% */
    width: max(100%, 177.78vh);
    height: max(56.25vw, 100%);
  }
}

/* Mobile: 9:16 portrait */
@media (max-width: 767px) {
  .hero {
    min-height: 100svh;
  }
  .hero-video-wrap iframe {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* 9:16 calculation */
    width: max(100%, 56.25vh);
    height: max(177.78vw, 100%);
  }
}

/* ── SCROLL ANIMATIONS ── */
/* AOS overrides for center-aligned reveals */
[data-aos="fade-right"] {
  transform: translate3d(-30px, 0, 0);
}
[data-aos="fade-left"] {
  transform: translate3d(30px, 0, 0);
}
/* Custom scroll animation classes */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.scroll-reveal.delay-1 { transition-delay: .1s }
.scroll-reveal.delay-2 { transition-delay: .2s }
.scroll-reveal.delay-3 { transition-delay: .3s }

/* ── MOBILE HERO CENTERING ── */
@media (max-width: 767px) {
  .hero-content { align-items: center; justify-content: center; }
  .hero-inner { max-width: 100%; }
  .hero-title .l2::after { left: 50%; transform: translateX(-50%); }
  .hero-dots { left: 50%; transform: translateX(-50%); }
}

/* ── AOS centered on mobile ── */
@media (max-width: 767px) {
  [data-aos="fade-right"],
  [data-aos="fade-left"] {
    transform: translate3d(0, 20px, 0);
  }
}

/* ── PILLAR FIX on mobile ── */
@media (max-width: 480px) {
  .pillars-grid { grid-template-columns: 1fr 1fr; }
  .pillar h6 { font-size: .7rem; }
}

/* ── PREVENT text overflow ── */
p, h1, h2, h3, h4, h5, h6, span, a, li { word-break: break-word; }
.hdr-logo-name { word-break: normal; }

/* section fade-in removed (caused issues) */

/* ── CARD HOVER ANIMATIONS ── */
.prog-card, .svc-card, .why-row, .news-card, .vm-card, .strength-card, .testi-card, .pillar {
  will-change: transform;
}

/* ── BOTTOM NAV SAFE AREA ── */
@media (max-width: 767px) {
  .bottom-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}

/* ================================================================
   FIXES: Mobile Center | Sticky Header | Dark Section Titles
   ================================================================ */

/* ── STICKY HEADER (ensure it works) ── */
.main-header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
}

/* ── DARK SECTION TITLE FIXES (footer above section) ── */
.testi-section .stitle,
.cta-band .stitle{color:#fff!important}
.testi-section .sdesc,
.cta-band .sdesc{color:rgba(255,255,255,.82)!important}
.testi-section .sh .badge,
.cta-band .sh .badge{background:rgba(255,255,255,.15)!important;color:#fff!important;border-color:rgba(255,255,255,.25)!important}

/* ── FIX: section above footer (cta-band) title not visible ── */
.cta-band h2,.cta-band .stitle{color:#fff!important}
.cta-band p{color:rgba(255,255,255,.88)!important}
.cta-band .text-white{color:#fff!important}
/* The span inside stitle on dark bg */
.cta-band .stitle span{color:#7dffb3!important}
.testi-section .stitle span{color:#7dffb3!important}

/* ── MOBILE: CENTER EVERYTHING PROPERLY ── */
@media (max-width: 767px) {
  /* Force center on all sections */
  .container .row > [class*="col-"]{text-align:center}
  /* But keep form labels, list items left-aligned */
  .form-wrap label,.flbl,.fc,.form-control,.form-select,
  .parent-list,.why-list,.sf-list,.str-item,
  .ft-contact,.info-item,.drawer-nav a{text-align:left!important}
  /* Center specific elements */
  .badge,.stitle,.sdesc,.sdivider,.sh{text-align:center!important}
  .sdivider{margin-left:auto!important;margin-right:auto!important}
  /* Hero */
  .hero-inner{text-align:center}
  .hero-btns{justify-content:center}
  /* Why row */
  .why-row{flex-direction:column;align-items:center;text-align:center}
  .why-text h5{text-align:center}
  .why-list li{text-align:left}
  /* Mission icons */
  .mission-icons{justify-content:center}
  .mi-item{text-align:center}
  /* Pillars */
  .pillars-grid{text-align:center}
  .pillar{text-align:center}
  /* About */
  .about-img-wrap{text-align:center;margin-bottom:1.5rem}
  .about-float{display:inline-flex;align-items:center;gap:14px;border-radius:14px;padding:12px 18px;margin-top:14px}
  /* Chip - keep icon + text layout but center overall */
  .chip{text-align:left}
  .row.g-3 .col-sm-6{display:flex;justify-content:center}
  .chip{width:100%;max-width:320px}
  /* Cards */
  .prog-card,.svc-card,.why-row,.news-card,.vm-card,
  .testi-card,.pillar,.contact-card,.achievement-card{text-align:center}
  /* Prog body text inside card */
  .prog-body h4,.prog-body p{text-align:center}
  .ilp-badge{margin:0 auto}
  /* VM card icon */
  .vm-icon{margin:0 auto 1rem}
  /* Contact */
  .cc-icon{margin:0 auto}
  /* Svc icon */
  .svc-icon{margin:0 auto}
  /* Why icon */
  .why-icon{margin:0 auto}
  /* News */
  .nc-body{text-align:center}
  .nc-more{margin:0 auto;display:inline-flex}
  /* Testi */
  .testi-auth{justify-content:center}
  /* Stats */
  .stat-blk{text-align:center}
  .stat-ic{margin:0 auto}
  /* Principal */
  .principal-card{text-align:center}
  .principal-card .d-flex{justify-content:center;flex-wrap:wrap}
  /* CTA steps */
  .cta-step{text-align:center}
  .cta-step-ic{margin:0 auto}
  /* Footer */
  .footer-top .col-6,[class*="col-lg"]{text-align:center}
  .ft-head::after{left:50%;transform:translateX(-50%)}
  .ft-links{text-align:center}
  .ft-links a{justify-content:center}
  .ft-social{justify-content:center}
  .footer-bottom{justify-content:center;text-align:center;flex-direction:column}
  .ft-about{text-align:center}
  .ft-logo{justify-content:center}
  .ft-contact{text-align:left} /* keep contact info left for readability */
  /* Buttons */
  .hero-btns,.d-flex.gap-3.flex-wrap{justify-content:center}
  /* Admission steps */
  .admission-steps .d-flex{text-align:left}
  /* Strength card */
  .str-item{text-align:left}
  .parent-list li{text-align:left}
  /* Page hero */
  .page-hero{text-align:center!important}
  /* Section headers on inner pages */
  .sh{text-align:center!important;display:block}
  .text-center.sh,.text-center .sh{text-align:center!important}
}

/* desktop toggle removed */

/* ── IMAGE: only webp/png accepted ── */
input[type="file"].img-only{border:2px dashed rgba(15,157,88,.35);background:var(--green-l);padding:10px}

/* ── ADMIN: img-hint on frontend (not needed but harmless) ── */
.img-hint{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.72rem;color:var(--green);font-weight:700;
  background:var(--green-l);padding:3px 10px;border-radius:6px;margin-top:5px;
}

/* ── PERFORMANCE: GPU compositing ── */
.hero-slide,.hero-bg,.hero-shapes,.hero-content{transform:translateZ(0)}
.prog-card,.svc-card,.why-row,.news-card,.vm-card,.pillar,.testi-card{
  backface-visibility:hidden;
}
@media(max-width:767px){
  /* FAB buttons on LEFT on mobile */
  .fab-group{left:14px!important;right:auto!important;}
  .scroll-top{right:14px;bottom:82px}
}

/* ================================================================
   MOBILE: FULL CENTER + NO RIGHT GAP + SMOOTH SCROLL
   ================================================================ */
@media (max-width: 767px) {
  /* Remove any right-side gap */
  html { width: 100%; } body { width: 100%; margin: 0; padding: 0; }
  .container { width: 100%; padding-left: 14px !important; padding-right: 14px !important; margin: 0 auto; }
  .row { margin-left: 0 !important; margin-right: 0 !important; }
  .row > * { padding-left: 8px !important; padding-right: 8px !important; }
  section { width: 100%; }
  /* Smooth scroll without lag */
  * { -webkit-tap-highlight-color: transparent; }
  /* FAB buttons on LEFT on mobile */
  .fab-group { left: 14px !important; right: auto !important; }
  .scroll-top { right: 14px; }
  /* Footer contact — icon + text on same line */
  .ft-contact { align-items: center !important; }
  .ft-contact i { margin-top: 0 !important; line-height: 1 !important; }
  /* Ensure all text is centered in cards */
  .col-sm-6, .col-md-6, .col-lg-4, .col-lg-3, .col-md-4, .col-12 {
    text-align: center;
  }
  /* But keep these left-aligned */
  .form-wrap *, .fc, .form-control, .form-select, .form-label, .flbl,
  .parent-list li, .why-list li, .sf-list li, .str-item, .ft-contact,
  .info-item, .drawer-nav a, p.text-start { text-align: left !important; }
  /* Hero full width */
  .hero, .hero-section { width: 100%; }
  .hero-inner { padding: 0 4px; }
  /* Page hero */
  .page-hero .container { text-align: center; }
  /* Stats band */
  .stats-band .col-6 { padding: 0 8px; }
  /* Pillar grid full width */
  .pillars-grid { width: 100%; }
  /* Gallery masonry */
  .g-masonry { column-gap: 8px; }
  /* Program cards */
  .prog-card { margin-bottom: 0; }
  /* Notice bar overflow */
  .notice-bar { width: 100vw; }
  /* Bottom nav */
  .bottom-nav { width: 100%; }
}

/* ================================================================
   KIDS BACKGROUND ANIMATION
   ================================================================ */

/* Floating kids elements - stars, pencils, books, ABC */
.kids-bg {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.kids-float {
  position: absolute;
  opacity: 0.18;
  animation: kidsFloat linear infinite;
  will-change: transform;
  font-size: 1.4rem;
  color: #fff;
  user-select: none;
}

@keyframes kidsFloat {
  0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
  5%   { opacity: 0.18; }
  95%  { opacity: 0.18; }
  100% { transform: translateY(-10vh)  rotate(360deg); opacity: 0; }
}

/* Colourful floating shapes on white sections */
.kids-shapes-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.ks {
  position: absolute;
  border-radius: 50%;
  opacity: 0.06;
  animation: ksBounce ease-in-out infinite;
}
@keyframes ksBounce {
  0%,100% { transform: translateY(0) scale(1);   }
  50%      { transform: translateY(-18px) scale(1.08); }
}

/* Stars sparkle on hero */
.hero-star {
  position: absolute;
  color: rgba(255,255,255,.55);
  font-size: .8rem;
  pointer-events: none;
  animation: starTwinkle 2.5s ease-in-out infinite;
}
@keyframes starTwinkle {
  0%,100% { opacity:.2; transform:scale(.8); }
  50%     { opacity:.7; transform:scale(1.2); }
}