/* ================================================================
   TSPS INTERNATIONAL SCHOOL — 3D PREMIUM THEME v3
   Design language: Glassmorphism · Deep shadows · 3D depth layers
   Palette: Forest Green + Gold | Playfair Display + Inter
================================================================ */

/* ── Design Tokens ── */
:root {
  /* Palette */
  --g1:#0A1F13; --g2:#122C1C; --g3:#1B4332; --g4:#2D6A4F;
  --g5:#40916C; --g6:#52B788;
  --gold:#C8941A; --gold2:#E8B84B; --gold3:#F5D78E;
  --gold-glow:rgba(200,148,26,.28);
  --green-glow:rgba(45,106,79,.25);
  --cream:#F8F5F0; --white:#fff;
  --t1:#0c1a14; --t2:#344054; --t3:#667085;
  --border:rgba(0,0,0,.07);

  /* Radius */
  --r:12px; --r-sm:8px; --r-lg:18px; --r-xl:26px;

  /* 3D Shadow Levels */
  --sh1:0 1px 4px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04);
  --sh2:0 4px 16px rgba(0,0,0,.09),0 12px 32px rgba(0,0,0,.07);
  --sh3:0 10px 32px rgba(0,0,0,.13),0 24px 56px rgba(0,0,0,.09);
  --sh4:0 20px 60px rgba(0,0,0,.18),0 4px 8px rgba(0,0,0,.06);
  --sh-gold:0 8px 32px rgba(200,148,26,.22),0 2px 8px rgba(200,148,26,.12);
  --sh-green:0 8px 32px rgba(27,67,50,.28),0 2px 8px rgba(27,67,50,.12);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.06);

  /* Easing */
  --ease:cubic-bezier(.34,1.56,.64,1);
  --ease-sm:cubic-bezier(.4,0,.2,1);
  --tr:.3s var(--ease-sm);
  --tr-spring:.42s var(--ease);
}

/* ================================================================
   RESET & BASE
================================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-anchor:none}
body{overflow-anchor:none}
body{
  font-family:'Inter','Segoe UI',sans-serif;
  color:var(--t1);
  /* Subtle green-tinted textured background */
  background:#eef2ee !important;
  overflow-x:hidden;padding-top:0 !important;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Playfair Display',Georgia,serif;
  color:var(--g1);letter-spacing:-.02em;
}
a{transition:var(--tr);text-decoration:none}
a:hover,a:focus{outline:none;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--gold);color:#fff}

/* Bootstrap modals — nuclear z-index + Chrome backdrop-filter pointer-event fix */
.modal-backdrop{z-index:99997 !important}
.modal{z-index:99998 !important;pointer-events:auto !important}
.modal-dialog,.modal-content,.modal-body,.modal-footer,.modal-header{pointer-events:auto !important}
/* Chrome bug: backdrop-filter on sticky header intercepts clicks even when visually below modal.
   Disable header pointer-events whenever a modal is open (Bootstrap adds .modal-open to body). */
body.modal-open header,
body.modal-open .toparea,
body.modal-open .toparea *{pointer-events:none !important}
body.modal-open .modal,
body.modal-open .modal *{pointer-events:auto !important}

/* Subtle dot-grid overlay on entire page */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(27,67,50,.04) 1px,transparent 1px);
  background-size:26px 26px;
}

/* ================================================================
   SCROLL PROGRESS BAR — glowing gold
================================================================ */
#tsps-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:99999;
  background:linear-gradient(90deg,var(--g5),var(--gold),var(--gold2));
  box-shadow:0 0 16px var(--gold),0 0 6px rgba(200,148,26,.5);
  transition:width .1s linear;
  border-radius:0 2px 2px 0;
}

/* ================================================================
   TOPBAR — deep dark strip
================================================================ */
.toparea{
  background:var(--g1) !important;
  padding:9px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.04) !important;
  position:relative;z-index:9100 !important;
}
.toparea::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.35;pointer-events:none;
}
.top-list{padding:0;margin:0;list-style:none}
.top-list li{
  display:inline-flex;align-items:center;gap:6px;
  color:rgba(255,255,255,.65);font-size:12px;padding:0 14px 0 0;letter-spacing:.3px;
}
.top-list li i{color:var(--gold2);font-size:11px}
.top-list li a{color:rgba(255,255,255,.65)}
.top-list li a:hover{color:var(--gold2)}
.social{padding:0;margin:0;display:flex;gap:6px;list-style:none}
.social li a{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);border-radius:50%;
  color:rgba(255,255,255,.6);font-size:12px;transition:var(--tr);
}
.social li a:hover{
  background:var(--gold);border-color:var(--gold);color:var(--g1);
  box-shadow:0 0 14px var(--gold-glow);transform:translateY(-2px);
}
.top-right{margin:0;padding:0;float:none;display:flex;align-items:center;gap:8px;list-style:none}
.top-right li a{
  color:rgba(255,255,255,.75);padding:5px 14px;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);
  font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;transition:var(--tr);
}
.top-right li a:hover{
  background:var(--gold);border-color:var(--gold);color:var(--g1);
  box-shadow:0 0 14px var(--gold-glow);
}
.loginbtn{
  border-radius:var(--r-sm) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  padding:5px 14px !important;margin:0 !important;
}

/* ================================================================
   NAVBAR — GLASSMORPHISM 3D FLOATING
================================================================ */
header{
  background:rgba(255,255,255,0.82) !important;
  backdrop-filter:blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter:blur(24px) saturate(1.8) !important;
  padding:0 !important;
  position:sticky !important;top:0;z-index:9000;
  border-bottom:1px solid rgba(255,255,255,0.55) !important;
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 4px 24px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
  transition:all .35s var(--ease-sm) !important;
}
header.scrolled{
  background:rgba(255,255,255,0.95) !important;
  box-shadow:
    0 2px 0 rgba(0,0,0,.04),
    0 8px 48px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.navbar{
  margin-bottom:0 !important;padding:0;min-height:0;
  border:none !important;background:transparent !important;border-radius:0 !important;
}
.navbar-default{background:transparent !important;border:none !important}
.navbar-header{display:flex;align-items:center}
.logo{padding:10px 0 !important;height:auto !important;display:flex;align-items:center}
.logo img{
  height:54px !important;width:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.14));
  transition:var(--tr-spring);
}
.logo img:hover{
  filter:drop-shadow(0 4px 18px rgba(200,148,26,.4));
  transform:scale(1.04) translateY(-1px);
}

/* Nav links */
.navbar-nav>li{margin-top:0 !important}
.navbar-nav>li>a{
  color:var(--t2) !important;padding:22px 16px !important;
  font-size:13px !important;font-weight:600 !important;letter-spacing:.3px;
  position:relative;transition:color .25s ease !important;
}
.navbar-nav>li>a::after{
  content:'';position:absolute;bottom:0;left:16px;right:16px;height:2.5px;
  background:linear-gradient(90deg,var(--g5),var(--gold));
  transform:scaleX(0);transform-origin:center;
  transition:transform .35s var(--ease);border-radius:2px;
  box-shadow:0 0 10px var(--gold-glow);
}
.navbar-nav>li>a:hover{color:var(--g4) !important;background:transparent !important}
.navbar-nav>li>a:hover::after{transform:scaleX(1)}
.navbar-nav>.active>a{background:transparent !important;color:var(--g4) !important}
.navbar-nav>.active>a::after{transform:scaleX(1)}
.navbar-nav>.active>a:focus,.navbar-nav>.active>a:hover{background:transparent !important}

/* Dropdown */
.dropdown-menu{
  border:none !important;border-radius:var(--r-lg) !important;
  background:rgba(255,255,255,0.96) !important;
  backdrop-filter:blur(20px) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,.14),
    0 2px 8px rgba(0,0,0,.06),
    0 0 0 1px rgba(0,0,0,.04) !important;
  border-top:2.5px solid var(--gold) !important;
  padding:8px 0 !important;min-width:210px;
  animation:ssDropIn .24s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ssDropIn{
  from{opacity:0;transform:translateY(-12px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.dropdown-menu>li>a{
  padding:10px 20px !important;font-size:13px !important;
  color:var(--t2) !important;font-weight:500 !important;
  transition:var(--tr) !important;
  display:flex;align-items:center;gap:8px;
}
.dropdown-menu>li>a::before{
  content:'›';color:var(--gold);font-size:18px;line-height:1;
  transform:translateX(-4px);transition:transform .2s ease;display:block;
}
.dropdown-menu>li>a:hover{
  background:linear-gradient(90deg,rgba(200,148,26,.07),transparent) !important;
  color:var(--g4) !important;padding-left:26px !important;
}
.dropdown-menu>li>a:hover::before{transform:translateX(0)}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus{
  background:transparent !important;color:var(--g4) !important;
}

/* Mobile toggle */
.navbar-toggle{
  background:linear-gradient(135deg,var(--g3),var(--g4)) !important;
  border:none !important;border-radius:var(--r-sm) !important;
  padding:8px 10px !important;margin:10px 0 !important;
  box-shadow:0 4px 14px var(--green-glow);
}
.navbar-toggle .icon-bar{background:#fff !important;height:2px !important}

/* CTA "Apply Now" button */
.navbar-nav>li>a.nav-apply-btn{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 100%) !important;
  color:var(--g1) !important;border-radius:var(--r-sm) !important;
  margin:14px 0 14px 10px !important;padding:9px 22px !important;
  font-weight:700 !important;
  box-shadow:0 5px 0 rgba(0,0,0,.15),var(--sh-gold) !important;
  transition:var(--tr-spring) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.08) !important;
}
.navbar-nav>li>a.nav-apply-btn:hover{
  background:linear-gradient(135deg,var(--g3) 0%,var(--g4) 100%) !important;
  color:#fff !important;
  box-shadow:0 7px 0 rgba(0,0,0,.18),var(--sh-green) !important;
  transform:translateY(-3px) !important;
}
.navbar-nav>li>a.nav-apply-btn:active{
  transform:translateY(3px) !important;
  box-shadow:0 2px 0 rgba(0,0,0,.18) !important;
}
.navbar-nav>li>a.nav-apply-btn::after{display:none !important}

/* Mobile nav */
@media(max-width:767px){
  .navbar-collapse{
    border-top:1px solid rgba(0,0,0,.06) !important;
    background:rgba(255,255,255,.97) !important;
    backdrop-filter:blur(24px) !important;
    padding:0 !important;
    box-shadow:0 14px 40px rgba(0,0,0,.14) !important;
  }
  .navbar-nav{margin:0 !important}
  .navbar-nav>li>a{padding:14px 20px !important;border-bottom:1px solid rgba(0,0,0,.05)}
  .navbar-nav>li>a::after{display:none}
  .navbar-nav>li>a.nav-apply-btn{margin:12px 20px !important;display:block;text-align:center}
  .dropdown-menu{
    border-radius:0 !important;border-top:none !important;
    box-shadow:none !important;background:rgba(248,245,240,.98) !important;
    border-left:3px solid var(--gold) !important;animation:none !important;
  }
  .logo img{height:46px !important}
}

/* ================================================================
   BANNER / SLIDER — CINEMATIC 3D
================================================================ */
.bs-slider{border-radius:0;overflow:hidden;position:relative;transform-style:preserve-3d}
.bs-slider::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(10,31,19,.1) 0%,
    transparent 40%,
    transparent 55%,
    rgba(10,31,19,.35) 100%
  );
}
.bs-slider .carousel-inner .item img{
  width:100% !important;height:520px;object-fit:cover;
  transform:none;
  transition:none;
}
.bs-slider .carousel-inner .item.active img{transform:none}
@media(max-width:767px){.bs-slider .carousel-inner .item img{height:270px}}
@media(max-width:991px){.bs-slider .carousel-inner .item img{height:390px}}

/* Banner text */
.slide-text h1,.bs-slider-text h1,.carousel-caption h1{
  font-family:'Playfair Display',serif !important;
  font-size:52px !important;font-weight:900 !important;line-height:1.15 !important;
  text-shadow:
    0 1px 0 rgba(200,148,26,.4),
    0 2px 0 rgba(100,74,13,.3),
    0 4px 0 rgba(0,0,0,.18),
    0 8px 24px rgba(0,0,0,.4) !important;
  color:#fff !important;
}
.slide-text p,.carousel-caption p{
  font-size:17px !important;color:rgba(255,255,255,.9) !important;
  text-shadow:0 2px 14px rgba(0,0,0,.45) !important;line-height:1.7 !important;
}
.control-round .carousel-control{
  background:rgba(255,255,255,.85) !important;backdrop-filter:blur(8px) !important;
  color:var(--g3) !important;box-shadow:var(--sh3) !important;
  transition:var(--tr) !important;
}
.control-round .carousel-control:hover{
  background:var(--gold) !important;color:#fff !important;
  box-shadow:0 0 24px var(--gold-glow) !important;
}
@media(max-width:991px){.slide-text h1{font-size:32px !important}}
@media(max-width:767px){.slide-text h1{font-size:26px !important}.slide-text p{font-size:14px !important}}

/* Wave separator */
.tsps-wave-sep{
  line-height:0;margin-top:-2px;overflow:hidden;pointer-events:none;
  position:relative;z-index:2;
}
.tsps-wave-sep svg{display:block;width:100%;height:72px}

/* ================================================================
   MAIN CONTENT — LAYERED DEPTH
================================================================ */
.spacet50{padding-top:72px !important}
.spaceb50{padding-bottom:72px !important}
.container.spacet50>.row{position:relative;z-index:1}

/* Content cards background lift */
.container.spacet50>.row>.col-md-12,
.container.spacet50>.row>[class*=col-md]{
  position:relative;
}

/* ================================================================
   SECTION HEADINGS — 3D TEXT DEPTH
================================================================ */
.about,.entered,.pagetitleh2{
  font-family:'Playfair Display',serif !important;
  color:var(--g1) !important;
  font-size:28px !important;font-weight:800 !important;
  text-transform:none !important;
  padding-bottom:18px !important;margin-bottom:26px !important;
  letter-spacing:-.02em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.8),
    0 -1px 0 rgba(0,0,0,.06),
    0 3px 8px rgba(0,0,0,.07) !important;
}
.about::before{
  background:linear-gradient(90deg,var(--g5),var(--gold)) !important;
  width:40% !important;height:3px !important;border-radius:2px;
  box-shadow:0 0 10px var(--gold-glow);
}
.about::after{
  background:var(--gold) !important;
  box-shadow:0 0 8px var(--gold-glow);
}
.pagetitleh2{
  border-left:4px solid var(--gold) !important;
  padding-left:18px !important;border-bottom:none !important;
  background:linear-gradient(90deg,rgba(200,148,26,.06),transparent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  box-shadow:inset 0 0 0 1px rgba(200,148,26,.08);
}
.pagetitleh2::before,.pagetitleh2::after{display:none !important}

/* About text glass card */
.abouttext{
  font-size:15px !important;color:var(--t2) !important;line-height:1.85 !important;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r);
  padding:22px !important;
  box-shadow:var(--sh2),var(--sh-inset);
}

/* ================================================================
   BUTTONS — PHYSICAL 3D PRESS
================================================================ */
.onlineformbtn,.more-btn{
  background:linear-gradient(145deg,var(--g3) 0%,var(--g4) 100%) !important;
  color:#fff !important;border:none !important;
  border-radius:var(--r-sm) !important;padding:12px 32px !important;
  font-size:13px !important;font-weight:700 !important;letter-spacing:.5px !important;
  cursor:pointer;font-family:'Inter',sans-serif !important;
  box-shadow:
    0 6px 0 rgba(0,0,0,.18),
    0 10px 28px var(--green-glow),
    inset 0 1px 0 rgba(255,255,255,.2) !important;
  transition:all .2s var(--ease-sm) !important;
  position:relative;overflow:hidden;
}
.onlineformbtn:hover,.more-btn:hover{
  background:linear-gradient(145deg,var(--gold) 0%,var(--gold2) 100%) !important;
  color:var(--g1) !important;
  box-shadow:
    0 8px 0 rgba(0,0,0,.14),
    0 14px 36px var(--gold-glow),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
  transform:translateY(-3px) !important;
}
.onlineformbtn:active,.more-btn:active{
  transform:translateY(4px) !important;
  box-shadow:0 2px 0 rgba(0,0,0,.2),inset 0 2px 4px rgba(0,0,0,.1) !important;
}
.btn-default{
  background:rgba(255,255,255,.92) !important;color:var(--g3) !important;
  border:1px solid rgba(45,106,79,.18) !important;border-radius:var(--r-sm) !important;
  box-shadow:0 3px 0 rgba(0,0,0,.08),var(--sh2) !important;
  transition:var(--tr) !important;
}
.btn-default:hover{
  background:var(--g3) !important;color:#fff !important;
  border-color:var(--g3) !important;
  box-shadow:0 5px 0 rgba(0,0,0,.15),var(--sh-green) !important;
  transform:translateY(-2px) !important;
}
.btn-primary{
  background:linear-gradient(145deg,var(--g4),var(--g5)) !important;
  border:none !important;border-radius:var(--r-sm) !important;
  box-shadow:0 5px 0 rgba(0,0,0,.14),var(--sh2) !important;
  transition:var(--tr) !important;
}
.btn-primary:hover{
  box-shadow:0 7px 0 rgba(0,0,0,.14),var(--sh3) !important;
  transform:translateY(-2px) !important;
}
.mdbtn{border-radius:var(--r-sm) !important;font-weight:600 !important;padding:9px 22px !important}
.modalclosebtn{background:var(--cream) !important;color:var(--t2) !important}
.search-top-space{margin-top:24px}

/* ================================================================
   3D CARDS — TILT + FLOAT EFFECT
================================================================ */
.post-view,.news-item,.ev-item{
  border-radius:var(--r-xl) !important;
  background:#fff !important;
  border:none !important;overflow:hidden;
  box-shadow:
    0 2px 0 rgba(255,255,255,.9) inset,
    0 -2px 0 rgba(0,0,0,.04) inset,
    var(--sh3) !important;
  transition:box-shadow .35s var(--ease-sm) !important;
  position:relative;transform-style:preserve-3d;will-change:transform;
}
.post-view::before,.news-item::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;z-index:2;
  background:linear-gradient(90deg,var(--g5),var(--gold));
  box-shadow:0 0 12px rgba(200,148,26,.3);
}
.post-view:hover,.news-item:hover,.ev-item:hover{
  box-shadow:
    0 2px 0 rgba(255,255,255,.9) inset,
    0 -2px 0 rgba(0,0,0,.04) inset,
    var(--sh4),0 0 0 2px rgba(200,148,26,.12) !important;
}
.post-thumb img,.news-img img{transition:transform .65s var(--ease-sm) !important}
.post-view:hover .post-thumb img,.news-item:hover .news-img img{transform:scale(1.07) !important}
.post-title,.news-title{font-family:'Playfair Display',serif !important;color:var(--g1) !important}

/* ================================================================
   ICON / SERVICE / FEATURE BOXES — 3D FLOAT
================================================================ */
.icon-box,.service-box,.feature-box,.info-box{
  background:#fff !important;
  border-radius:var(--r-xl) !important;
  padding:34px 24px !important;text-align:center;
  border:none !important;
  box-shadow:
    var(--sh-inset),
    var(--sh3) !important;
  transition:box-shadow .35s var(--ease-sm) !important;
  position:relative;overflow:hidden;transform-style:preserve-3d;
}
.icon-box::before,.service-box::before,.feature-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--g5),var(--gold));
  box-shadow:0 0 10px rgba(200,148,26,.25);
}
.icon-box::after,.service-box::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 85% 15%,rgba(200,148,26,.05),transparent 65%);
  pointer-events:none;
}
.icon-box:hover,.service-box:hover,.feature-box:hover{
  box-shadow:var(--sh-inset),var(--sh4),0 0 0 2px rgba(200,148,26,.14) !important;
}
.icon-box i,.service-box i,.feature-box i{
  font-size:38px !important;color:var(--g4) !important;
  filter:drop-shadow(0 3px 10px rgba(45,106,79,.25));
  transition:var(--tr-spring) !important;display:inline-block;
}
.icon-box:hover i,.service-box:hover i{
  color:var(--gold) !important;
  filter:drop-shadow(0 0 14px rgba(200,148,26,.5)) !important;
  transform:scale(1.22) rotate(-6deg) !important;
}
.icon-box h4,.service-box h4,.feature-box h4{
  color:var(--g1) !important;
  font-family:'Playfair Display',serif !important;
  margin:18px 0 10px !important;font-size:17px !important;
  text-shadow:0 1px 4px rgba(0,0,0,.06);
}
.icon-box p,.service-box p,.feature-box p{
  color:var(--t3) !important;font-size:13px !important;line-height:1.78 !important;margin:0 !important;
}

/* ================================================================
   COUNTER / STATS — DEEP 3D DARK GLASS
================================================================ */
.counter-box,.count-box,.statbox{
  background:linear-gradient(145deg,var(--g1) 0%,var(--g3) 100%) !important;
  border-radius:var(--r-xl) !important;
  padding:34px 20px !important;text-align:center;
  border:none !important;
  box-shadow:
    0 4px 0 var(--gold),
    0 24px 60px rgba(10,31,19,.45),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
  position:relative;overflow:hidden;
  transition:box-shadow .35s var(--ease-sm) !important;
  transform-style:preserve-3d;
}
.counter-box::before,.count-box::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 0% 0%,rgba(200,148,26,.15) 0%,transparent 55%);
  pointer-events:none;
}
.counter-box::after,.count-box::after{
  content:'';position:absolute;bottom:-28px;right:-28px;
  width:90px;height:90px;border-radius:50%;
  background:rgba(255,255,255,.04);pointer-events:none;
}
.counter-box:hover,.count-box:hover{
  box-shadow:
    0 6px 0 var(--gold2),
    0 32px 80px rgba(10,31,19,.55),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 2px rgba(200,148,26,.2) !important;
}
.counter-box .count,.count-box .count,
.counter-box h2,.count-box h2,
.counter-box span.counter,.count-box span.counter{
  color:var(--gold2) !important;
  font-family:'Playfair Display',serif !important;
  font-size:54px !important;font-weight:900 !important;line-height:1.1;display:block;
  text-shadow:0 0 24px rgba(232,184,75,.3),0 2px 4px rgba(0,0,0,.2);
}
.counter-box p,.count-box p,
.counter-box h4,.count-box h4{
  color:rgba(255,255,255,.7) !important;
  font-size:11px !important;font-weight:700 !important;
  letter-spacing:1.4px !important;text-transform:uppercase !important;
  margin-top:10px !important;margin-bottom:0 !important;
}

/* ================================================================
   FORMS — GLASS INPUTS
================================================================ */
.form-control{
  border:1.5px solid rgba(0,0,0,.07) !important;
  border-radius:var(--r-sm) !important;
  padding:11px 15px !important;font-size:14px !important;
  color:var(--t1) !important;
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 2px 6px rgba(0,0,0,.04) !important;
  transition:border-color .22s,box-shadow .22s !important;
  height:auto !important;font-family:'Inter',sans-serif !important;
}
.form-control:focus{
  border-color:var(--g5) !important;background:#fff !important;
  box-shadow:
    0 0 0 3.5px rgba(64,145,108,.13),
    0 2px 14px rgba(64,145,108,.09),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
  outline:none !important;
}
select.form-control{cursor:pointer}
.form-group{margin-bottom:20px !important}
.form-group label{
  font-weight:600 !important;font-size:13px !important;
  color:var(--t2) !important;margin-bottom:6px !important;display:block;
}
.req{color:#e53e3e !important}
.text-danger{font-size:12px !important;margin-top:4px !important}
.printcontent{
  background:rgba(255,255,255,.9) !important;
  border-radius:var(--r-xl) !important;
  padding:30px !important;margin-bottom:22px !important;
  border:none !important;
  box-shadow:var(--sh-inset),var(--sh3) !important;
  backdrop-filter:blur(8px);
}
.onlineform{max-width:100%}
.filestyle.form-control{padding:6px 14px !important}

/* ================================================================
   TABLES — FROSTED
================================================================ */
.table-responsive{
  border-radius:var(--r-xl) !important;border:none !important;overflow:hidden;
  box-shadow:var(--sh3) !important;
}
.table{border-radius:var(--r-xl) !important;overflow:hidden;border:none !important}
.table th{
  background:linear-gradient(145deg,var(--g1),var(--g3)) !important;
  color:#fff !important;font-weight:700 !important;font-size:13px !important;
  padding:14px 16px !important;border:none !important;
  text-shadow:0 1px 3px rgba(0,0,0,.3);
  letter-spacing:.3px;
}
.table td{
  padding:13px 16px !important;font-size:13px !important;
  color:var(--t2) !important;border-color:rgba(0,0,0,.04) !important;
  vertical-align:middle !important;
  background:rgba(255,255,255,.92) !important;
}
.table-hover>tbody>tr{transition:all .22s ease}
.table-hover>tbody>tr:hover>td{
  background:linear-gradient(90deg,rgba(64,145,108,.05),rgba(200,148,26,.03)) !important;
  color:var(--t1) !important;
}
.bggray{background:rgba(248,245,240,.7) !important}
.table>thead>tr>th,.table>tbody>tr>td{border-top:1px solid rgba(0,0,0,.04) !important}
.fontbold{font-weight:700 !important;color:var(--g3) !important}

/* ================================================================
   ALERTS
================================================================ */
.alert{
  border-radius:var(--r) !important;border:none !important;
  font-size:14px !important;
  box-shadow:var(--sh2),var(--sh-inset) !important;
  backdrop-filter:blur(6px);
}
.alert-danger{
  background:rgba(255,245,245,.95) !important;color:#c53030 !important;
  border-left:4px solid #e53e3e !important;
}
.alert-success{
  background:rgba(240,255,244,.95) !important;color:#22543d !important;
  border-left:4px solid var(--g5) !important;
}
.alert-info{
  background:rgba(235,248,255,.95) !important;color:#2b6cb0 !important;
  border-left:4px solid #3182ce !important;
}

/* ================================================================
   SIDEBAR
================================================================ */
.sidebar{
  border-radius:var(--r-xl) !important;overflow:hidden;
  box-shadow:var(--sh3) !important;
}
.catetab{
  background:linear-gradient(145deg,var(--g1),var(--g3)) !important;
  color:#fff !important;padding:14px 18px !important;
  font-weight:700 !important;font-size:13px !important;
  letter-spacing:.5px;text-transform:uppercase;
}
.newscontent{background:rgba(255,255,255,.92) !important;border:none !important}
.complain a{
  display:block !important;
  background:linear-gradient(145deg,var(--gold),var(--gold2)) !important;
  color:var(--g1) !important;padding:13px 18px !important;
  font-weight:700 !important;font-size:13px !important;
  border-radius:var(--r-sm) !important;text-align:center;
  margin-top:12px !important;letter-spacing:.5px;
  box-shadow:0 5px 0 rgba(0,0,0,.12),var(--sh-gold) !important;
  transition:var(--tr) !important;
}
.complain a:hover{
  background:linear-gradient(145deg,var(--g3),var(--g4)) !important;
  color:#fff !important;
  box-shadow:0 7px 0 rgba(0,0,0,.15),var(--sh-green) !important;
  transform:translateY(-2px);
}

/* ================================================================
   MODALS — DEEP GLASS
================================================================ */
.modal-content{
  border-radius:var(--r-xl) !important;border:none !important;
  box-shadow:0 40px 120px rgba(0,0,0,.35),0 8px 32px rgba(0,0,0,.18) !important;
  overflow:hidden;backdrop-filter:blur(4px);
}
.modal-header{
  background:linear-gradient(145deg,var(--g1),var(--g3)) !important;
  border-bottom:none !important;padding:18px 22px !important;
}
.modal-header h4{color:#fff !important;font-size:17px !important;font-weight:700 !important}
.modal-header .close{color:rgba(255,255,255,.7) !important;opacity:1 !important;font-size:24px !important}
.modal-header .close:hover{color:#fff !important}
.modal-header-small{padding:12px 18px !important}
.modal-body{padding:28px 22px 12px !important}
.modal-footer{border-top:1px solid rgba(0,0,0,.06) !important;padding:14px 22px !important}

/* ================================================================
   GALLERY
================================================================ */
.gallery-item,.gs-item,.lightbox-image{
  overflow:hidden !important;border-radius:var(--r-lg) !important;
  position:relative;cursor:pointer;
  box-shadow:var(--sh3) !important;
  transition:var(--tr-spring) !important;transform-style:preserve-3d;
}
.gallery-item img,.gs-item img{
  transition:transform .65s var(--ease-sm) !important;display:block;width:100%;
}
.gallery-item:hover,.gs-item:hover{box-shadow:var(--sh4) !important}
.gallery-item:hover img,.gs-item:hover img{transform:scale(1.09) !important}
.gallery-item::after,.gs-item::after{
  content:'\f002';font-family:'FontAwesome';
  position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(10,31,19,.75),rgba(200,148,26,.55));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:28px;opacity:0;
  transition:opacity .32s ease;
}
.gallery-item:hover::after,.gs-item:hover::after{opacity:1}

/* ================================================================
   FOOTER — 3D DARK DEPTH
================================================================ */
footer{
  background:var(--g1) !important;
  color:rgba(255,255,255,.65) !important;padding:0 !important;
  position:relative;
}
footer::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 5% 60%,rgba(200,148,26,.07) 0%,transparent 50%),
    radial-gradient(ellipse at 95% 10%,rgba(64,145,108,.07) 0%,transparent 50%);
}
footer::after{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  box-shadow:0 0 20px var(--gold-glow);
}
.tsps-footer-main{padding:64px 0 40px;position:relative;z-index:1}
.footer-grid-wrap{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:52px}
.fo-title{
  color:#fff !important;font-family:'Playfair Display',serif !important;
  font-size:16px !important;font-weight:700 !important;
  margin:0 0 22px !important;padding-bottom:13px !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  position:relative;
}
.fo-title::after{
  content:'';position:absolute;bottom:-1px;left:0;width:36px;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
  box-shadow:0 0 10px var(--gold-glow);
}
.f1-list,.co-list{padding:0 !important;margin:0 !important;list-style:none !important}
.f1-list li,.co-list li{margin-bottom:12px !important}
.f1-list li a{
  color:rgba(255,255,255,.5) !important;font-size:13px !important;
  display:flex;align-items:center;gap:8px;transition:var(--tr) !important;
}
.f1-list li a::before{content:'›';color:var(--gold);font-size:18px;line-height:1}
.f1-list li a:hover{color:#fff !important;padding-left:6px !important}
.co-list li{color:rgba(255,255,255,.5);font-size:13px;display:flex;align-items:flex-start;gap:12px}
.co-list li i{color:var(--gold2);margin-top:2px;width:14px;flex-shrink:0}
.co-list li a{color:rgba(255,255,255,.5) !important;font-size:13px !important}
.co-list li a:hover{color:#fff !important}
.footer-brand-desc{color:rgba(255,255,255,.4);font-size:13px;line-height:1.85;margin-top:14px}
.footer-brand-name{
  font-family:'Playfair Display',serif;color:#fff;font-size:22px;font-weight:800;
  margin-bottom:4px;
  text-shadow:0 2px 14px rgba(0,0,0,.25),0 0 24px rgba(200,148,26,.1);
}
.footer-brand-tag{
  color:var(--gold2);font-size:11px;font-weight:600;
  letter-spacing:1.8px;text-transform:uppercase;margin-bottom:16px;
}
.footer-soc{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.footer-soc a{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.1);border-radius:50%;
  color:rgba(255,255,255,.55);font-size:13px;transition:var(--tr);
}
.footer-soc a:hover{
  background:var(--gold);border-color:var(--gold);color:var(--g1);
  box-shadow:0 0 18px var(--gold-glow);transform:translateY(-3px);
}
.copy-right{
  background:rgba(0,0,0,.28) !important;
  border-top:1px solid rgba(255,255,255,.04) !important;
  padding:16px 0 !important;
}
.copy-right p{color:rgba(255,255,255,.35) !important;font-size:12px !important;margin:0 !important;letter-spacing:.3px}
.scrollToTop{
  background:linear-gradient(145deg,var(--gold),var(--gold2)) !important;
  color:var(--g1) !important;border-radius:50% !important;
  width:40px !important;height:40px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  box-shadow:0 5px 0 rgba(0,0,0,.12),var(--sh-gold) !important;
  transition:var(--tr-spring) !important;
}
.scrollToTop:hover{
  background:linear-gradient(145deg,var(--g5),var(--g4)) !important;
  color:#fff !important;transform:translateY(-5px) !important;
  box-shadow:0 10px 0 rgba(0,0,0,.1),var(--sh-green) !important;
}
.cookieConsent{
  background:var(--g1) !important;color:rgba(255,255,255,.75) !important;
  border-top:3px solid var(--gold) !important;padding:14px 22px !important;
  font-size:13px !important;
}
.cookieConsentOK{
  background:linear-gradient(145deg,var(--gold),var(--gold2)) !important;
  color:var(--g1) !important;border-radius:var(--r-sm) !important;
  padding:6px 18px !important;font-weight:700 !important;
  margin-left:12px !important;cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.12);
  transition:var(--tr);
}
.cookieConsentOK:hover{
  background:var(--g4) !important;color:#fff !important;
}
.bootom-whatsapp{
  bottom:24px !important;right:24px !important;
  width:56px !important;height:56px !important;
  border-radius:50% !important;
  box-shadow:0 6px 0 rgba(0,0,0,.14),0 10px 28px rgba(0,0,0,.2) !important;
  transition:var(--tr-spring) !important;
}
.bootom-whatsapp:hover{
  transform:translateY(-5px) scale(1.1) !important;
  box-shadow:0 14px 0 rgba(0,0,0,.1),0 16px 36px rgba(0,0,0,.18) !important;
}

/* ================================================================
   PAGE TITLE / BREADCRUMB
================================================================ */
.about-title{
  background-attachment:fixed !important;
  background-size:cover !important;height:300px !important;
  position:relative;
}
.about-title:before{background:rgba(10,31,19,.82) !important}
.captions{
  font-size:36px !important;letter-spacing:-.03em;font-weight:800 !important;
  text-shadow:0 2px 24px rgba(0,0,0,.45),0 4px 0 rgba(0,0,0,.1);
}
.breadcrumb{background:transparent !important;padding:8px 0 !important;font-size:13px !important}
.breadcrumb li a{color:rgba(255,255,255,.65) !important}
.breadcrumb li a:hover{color:var(--gold2) !important}
.breadcrumb li+li:before{color:rgba(255,255,255,.3) !important}
@media(max-width:991px){.about-title{height:220px !important}.captions{font-size:26px !important}}
@media(max-width:767px){.about-title{height:180px !important}.captions{font-size:20px !important}}

/* ================================================================
   TABS
================================================================ */
.nav-tabs{border-bottom:2px solid rgba(0,0,0,.07) !important;margin-bottom:24px !important}
.nav-tabs>li>a{
  color:var(--t3) !important;border:none !important;
  border-bottom:2.5px solid transparent !important;
  border-radius:0 !important;margin-bottom:-2px !important;
  font-weight:600 !important;font-size:13px !important;
  padding:10px 18px !important;transition:var(--tr) !important;
}
.nav-tabs>li.active>a,.nav-tabs>li>a:hover{
  border-bottom-color:var(--gold) !important;
  color:var(--g3) !important;background:transparent !important;
  text-shadow:0 0 20px var(--gold-glow);
}

/* ================================================================
   PAGINATION
================================================================ */
.pagination>li>a,.pagination>li>span{
  border-radius:var(--r-sm) !important;color:var(--g4) !important;
  border-color:rgba(0,0,0,.08) !important;margin:0 3px !important;
  transition:var(--tr) !important;font-weight:500 !important;
  background:rgba(255,255,255,.9) !important;
  box-shadow:var(--sh2),var(--sh-inset) !important;
}
.pagination>li>a:hover,.pagination>.active>a,.pagination>.active>span{
  background:linear-gradient(145deg,var(--g4),var(--g5)) !important;
  border-color:transparent !important;color:#fff !important;
  box-shadow:0 4px 0 rgba(0,0,0,.12),var(--sh-green) !important;
  transform:translateY(-1px);
}

/* ================================================================
   ONLINE COURSE / CART
================================================================ */
.shop-chart-top13{border-radius:var(--r-xl) !important;box-shadow:var(--sh3) !important;border:none !important}
.cart-footer .gotocartbtn{background:var(--g4) !important;border-radius:var(--r-sm) !important;border:none !important}
.currency-icon-list select{border-radius:var(--r-sm) !important}

/* ================================================================
   CBSE / ADMISSION RESULT
================================================================ */
#div_print{
  border-left:4px solid var(--gold) !important;
  box-shadow:var(--sh-inset),var(--sh3) !important;
  border-radius:var(--r-xl) !important;
  padding:28px !important;background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(8px);
}
#div_print h4{
  font-family:'Playfair Display',serif;color:var(--g1);
  font-size:22px;text-align:center;margin-bottom:22px;
}
#form1 h3.entered{margin-bottom:32px}
.onlineform{max-width:100%}

/* ================================================================
   CALENDAR
================================================================ */
.fc-header-toolbar .fc-button{
  background:linear-gradient(145deg,var(--g3),var(--g4)) !important;
  border:none !important;border-radius:var(--r-sm) !important;
  box-shadow:0 3px 0 rgba(0,0,0,.12) !important;
}
.fc-event{background:var(--g4) !important;border:none !important;border-radius:4px !important}

/* ================================================================
   SCROLL REVEAL — 3D ENTRANCE (perspective flip in)
================================================================ */
.ss-reveal{
  opacity:0;
  transform:translateY(44px) perspective(700px) rotateX(14deg) scale(.97);
  transition:opacity .75s var(--ease-sm),transform .75s var(--ease);
}
.ss-reveal.ss-visible{
  opacity:1;transform:translateY(0) perspective(700px) rotateX(0deg) scale(1);
}
.ss-reveal-left{
  opacity:0;transform:translateX(-56px) perspective(700px) rotateY(18deg);
  transition:opacity .72s var(--ease-sm),transform .72s var(--ease);
}
.ss-reveal-left.ss-visible{opacity:1;transform:translateX(0) perspective(700px) rotateY(0deg)}
.ss-reveal-right{
  opacity:0;transform:translateX(56px) perspective(700px) rotateY(-18deg);
  transition:opacity .72s var(--ease-sm),transform .72s var(--ease);
}
.ss-reveal-right.ss-visible{opacity:1;transform:translateX(0) perspective(700px) rotateY(0deg)}
.ss-stagger>*{
  opacity:0;transform:translateY(28px) scale(.96);
  transition:opacity .52s var(--ease-sm),transform .52s var(--ease);
}
.ss-stagger.ss-visible>*{opacity:1;transform:translateY(0) scale(1)}
.ss-stagger.ss-visible>*:nth-child(1){transition-delay:.04s}
.ss-stagger.ss-visible>*:nth-child(2){transition-delay:.11s}
.ss-stagger.ss-visible>*:nth-child(3){transition-delay:.18s}
.ss-stagger.ss-visible>*:nth-child(4){transition-delay:.25s}
.ss-stagger.ss-visible>*:nth-child(5){transition-delay:.32s}
.ss-stagger.ss-visible>*:nth-child(6){transition-delay:.39s}

/* ================================================================
   PARTICLES / CURSOR GLOW (from layout.php JS)
================================================================ */
.tsps-particle{
  position:fixed;pointer-events:none;z-index:0;opacity:0;
  will-change:transform,opacity;user-select:none;
  animation:tspsParticleFloat linear infinite;
  font-style:normal;line-height:1;
}
@keyframes tspsParticleFloat{
  0%  {transform:translateY(105vh) rotate(0deg)   scale(.8);opacity:0}
  8%  {opacity:.25}
  50% {transform:translateY(52vh)  rotate(270deg) scale(1)}
  92% {opacity:.18}
  100%{transform:translateY(-12vh) rotate(540deg) scale(1.1);opacity:0}
}
@keyframes tspsRipple{from{transform:scale(0);opacity:1}to{transform:scale(2.8);opacity:0}}
@keyframes tspsShimmer{0%{background-position:200% center}100%{background-position:-200% center}}
#tsps-cursor-glow{
  pointer-events:none;position:fixed;z-index:0;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(64,145,108,.065) 0%,transparent 68%);
  transform:translate(-50%,-50%);
  transition:left .15s ease,top .15s ease;
  display:none;
}

/* ================================================================
   WAVE SEPARATOR
================================================================ */
.tsps-wave-sep{line-height:0;margin-top:-2px;overflow:hidden;pointer-events:none;position:relative;z-index:2}
.tsps-wave-sep svg{display:block;width:100%;height:72px}

/* ================================================================
   RESPONSIVE
================================================================ */
@media(max-width:991px){
  .footer-grid-wrap{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:767px){
  .footer-grid-wrap{grid-template-columns:1fr;gap:32px}
  .tsps-footer-main{padding:44px 0 28px}
  .spacet50{padding-top:48px !important}
  .spaceb50{padding-bottom:48px !important}
  .counter-box,.count-box{padding:26px 16px !important}
  .counter-box .count,.count-box .count,
  .counter-box h2,.count-box h2{font-size:40px !important}
  .icon-box,.service-box{padding:26px 18px !important}
  .tsps-wave-sep svg{height:44px}
  .about,.entered{font-size:23px !important}
  .table-responsive{overflow-x:auto}
  .printcontent{padding:18px !important}
  .col-md-3,.col-md-4,.col-md-6{width:100% !important}
}

/* ================================================================
   UTILITY
================================================================ */
.text-green{color:var(--g4) !important}
.text-gold{color:var(--gold) !important}
.bg-green{background:var(--g3) !important}
.bg-cream{background:var(--cream) !important}
.bggray{background:rgba(255,255,255,.6) !important}
.rounded-card{
  border-radius:var(--r-xl) !important;
  box-shadow:var(--sh-inset),var(--sh3) !important;
  padding:28px !important;background:rgba(255,255,255,.92) !important;
}

/* ================================================================
   HOMEPAGE — STATS BAND
================================================================ */
.tsps-stats-band{
  background:linear-gradient(135deg,var(--g1) 0%,var(--g3) 60%,var(--g4) 100%);
  padding:64px 0;
  position:relative;overflow:hidden;
}
.tsps-stats-band::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.tsps-stat{
  text-align:center;padding:32px 20px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-xl);
  box-shadow:
    0 8px 32px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 1px rgba(200,148,26,.12);
  margin-bottom:20px;
  position:relative;overflow:hidden;
  backdrop-filter:blur(8px);
  transition:var(--tr-spring);
}
.tsps-stat::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(200,148,26,.1),transparent 65%);
  pointer-events:none;
}
.tsps-stat:hover{
  background:rgba(255,255,255,.1);
  box-shadow:
    0 16px 48px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.15),
    0 4px 0 var(--gold),
    0 0 0 1px rgba(200,148,26,.25);
  transform:translateY(-8px) scale(1.03);
}
.tsps-stat-ico{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,rgba(200,148,26,.2),rgba(200,148,26,.08));
  border:1px solid rgba(200,148,26,.3);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  box-shadow:0 0 20px rgba(200,148,26,.15),inset 0 1px 0 rgba(255,255,255,.1);
  transition:var(--tr-spring);
}
.tsps-stat:hover .tsps-stat-ico{
  background:linear-gradient(135deg,rgba(200,148,26,.35),rgba(200,148,26,.15));
  box-shadow:0 0 32px rgba(200,148,26,.3);
  transform:scale(1.1) rotate(5deg);
}
.tsps-stat-ico i{font-size:24px;color:var(--gold2)}
.tsps-stat-num{
  font-family:'Playfair Display',serif;
  font-size:52px;font-weight:900;line-height:1;
  color:var(--gold2);display:flex;align-items:flex-start;justify-content:center;gap:2px;
  text-shadow:0 0 28px rgba(232,184,75,.3),0 2px 4px rgba(0,0,0,.2);
}
.tsps-stat-num sup{font-size:24px;font-weight:700;margin-top:8px;color:var(--gold)}
.tsps-stat p{
  color:rgba(255,255,255,.7);font-size:12px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;margin:10px 0 0;
}

/* ================================================================
   HOMEPAGE — WHY CHOOSE US
================================================================ */
.tsps-why-sec{
  padding:80px 0 72px;
  background:linear-gradient(180deg,var(--cream) 0%,#fff 100%);
  position:relative;
}
.tsps-why-sec::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.tsps-sec-hd{text-align:center;margin-bottom:52px}
.tsps-badge{
  display:inline-block;
  background:linear-gradient(135deg,rgba(200,148,26,.12),rgba(200,148,26,.06));
  border:1px solid rgba(200,148,26,.25);
  color:var(--gold);font-size:11px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:5px 16px;border-radius:20px;margin-bottom:14px;
}
.tsps-sec-hd h2{
  font-family:'Playfair Display',serif;
  font-size:36px;font-weight:800;color:var(--g1);
  margin:0 0 12px;letter-spacing:-.02em;
  text-shadow:0 2px 8px rgba(0,0,0,.07);
}
.tsps-sec-hd h2 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--g4),var(--gold),var(--g4));
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:tspsShimmer 4s linear infinite;
}
.tsps-sec-hd p{
  color:var(--t3);font-size:16px;line-height:1.7;max-width:520px;margin:0 auto;
}
.tsps-why-row{margin:-12px}
.tsps-why-row>[class*=col-]{padding:12px}
.tsps-wcard{
  background:#fff;
  border-radius:var(--r-xl);
  padding:32px 24px;
  border:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 4px 16px rgba(0,0,0,.07),
    0 12px 36px rgba(0,0,0,.06);
  transition:box-shadow .35s var(--ease-sm);
  position:relative;overflow:hidden;
  height:100%;
  transform-style:preserve-3d;
}
.tsps-wcard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--g5),var(--gold));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.tsps-wcard:hover::before{transform:scaleX(1)}
.tsps-wcard:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 10px 40px rgba(0,0,0,.12),
    0 24px 60px rgba(0,0,0,.09),
    0 0 0 2px rgba(200,148,26,.1);
}
.tsps-wico{
  width:60px;height:60px;border-radius:16px;
  background:linear-gradient(135deg,var(--g1),var(--g3));
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  box-shadow:0 8px 24px var(--green-glow),inset 0 1px 0 rgba(255,255,255,.1);
  transition:var(--tr-spring);
}
.tsps-wcard:hover .tsps-wico{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 10px 28px var(--gold-glow);
  transform:scale(1.1) rotate(-5deg);
}
.tsps-wico i{font-size:22px;color:#fff}
.tsps-wcard h4{
  font-family:'Playfair Display',serif;
  color:var(--g1);font-size:18px;font-weight:700;
  margin:0 0 10px;letter-spacing:-.01em;
}
.tsps-wcard p{
  color:var(--t3);font-size:14px;line-height:1.75;margin:0;
}

/* ================================================================
   HOMEPAGE — CTA BAND
================================================================ */
.tsps-cta-band{
  background:linear-gradient(135deg,var(--g1) 0%,var(--g3) 50%,#1a3d2a 100%);
  padding:64px 0;position:relative;overflow:hidden;
}
.tsps-cta-band::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 0% 50%,rgba(200,148,26,.1) 0%,transparent 55%),
    radial-gradient(ellipse at 100% 50%,rgba(64,145,108,.08) 0%,transparent 50%);
  pointer-events:none;
}
.tsps-cta-band::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  box-shadow:0 0 24px var(--gold-glow);
}
.tsps-cta-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:40px;flex-wrap:wrap;position:relative;z-index:1;
}
.tsps-cta-txt h3{
  font-family:'Playfair Display',serif;
  color:#fff;font-size:30px;font-weight:800;margin:0 0 8px;
  text-shadow:0 2px 16px rgba(0,0,0,.25);
}
.tsps-cta-txt h3 span{color:var(--gold2)}
.tsps-cta-txt p{color:rgba(255,255,255,.7);font-size:15px;line-height:1.7;margin:0}
.tsps-cta-act{display:flex;align-items:center;gap:14px;flex-shrink:0;flex-wrap:wrap}
.tsps-btn-g{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(145deg,var(--gold),var(--gold2));
  color:var(--g1) !important;font-weight:700;font-size:14px;
  padding:14px 32px;border-radius:var(--r-sm);text-decoration:none;
  box-shadow:0 6px 0 rgba(0,0,0,.18),0 10px 32px var(--gold-glow);
  transition:var(--tr-spring);letter-spacing:.3px;
}
.tsps-btn-g:hover{
  background:linear-gradient(145deg,var(--gold2),var(--gold3));
  transform:translateY(-3px);
  box-shadow:0 9px 0 rgba(0,0,0,.15),0 16px 40px var(--gold-glow);
  color:var(--g1) !important;
}
.tsps-btn-g:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.tsps-btn-w{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.3);
  color:#fff !important;font-weight:600;font-size:14px;
  padding:13px 24px;border-radius:var(--r-sm);text-decoration:none;
  backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:var(--tr-spring);letter-spacing:.3px;
}
.tsps-btn-w:hover{
  background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);
  transform:translateY(-2px);color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 6px 20px rgba(0,0,0,.15);
}
.tsps-gold-txt{
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ================================================================
   HOMEPAGE — RESPONSIVE
================================================================ */
@media(max-width:991px){
  .tsps-stats-band{padding:48px 0}
  .tsps-why-sec{padding:60px 0 56px}
  .tsps-cta-band{padding:52px 0}
  .tsps-cta-row{flex-direction:column;text-align:center}
  .tsps-cta-act{justify-content:center}
  .tsps-sec-hd h2{font-size:30px}
}
@media(max-width:767px){
  .tsps-stats-band{padding:40px 0}
  .tsps-stat{padding:24px 14px}
  .tsps-stat-num{font-size:40px}
  .tsps-stat-ico{width:52px;height:52px}
  .tsps-stat-ico i{font-size:20px}
  .tsps-why-sec{padding:48px 0 44px}
  .tsps-sec-hd h2{font-size:26px}
  .tsps-wcard{padding:24px 18px}
  .tsps-cta-band{padding:44px 0}
  .tsps-cta-txt h3{font-size:22px}
  .tsps-btn-g,.tsps-btn-w{width:100%;justify-content:center}
  .tsps-cta-act{width:100%}
}

/* ================================================================
   SMARTSCHOOL CMS — HOMEPAGE SECTION OVERRIDES
   Targeting actual classes from the CMS database content
================================================================ */

/* ── Slider height fix (style.css sets 100vh on ≥992px; override) ── */
@media(min-width:992px){
  .bs-slider .carousel-inner{height:520px !important}
}

/* ── Service boxes strip (overlaps slider bottom) ── */
.services{position:relative;z-index:3}
.service-inner{
  position:relative !important;top:auto !important;
  background:linear-gradient(135deg,var(--g1) 0%,var(--g3) 100%);
  box-shadow:0 12px 40px rgba(10,31,19,.35);
}
/* Specifically target the homepage service-strip columns — reset card styles */
.services .service-box,.service-inner [class*="service-box"]{
  background:transparent !important;
  border:none !important;
  border-right:1px solid rgba(255,255,255,.1) !important;
  border-radius:0 !important;
  padding:28px 28px 22px 32px !important;
  text-align:left !important;
  box-shadow:none !important;
  transform:none !important;
  transition:background var(--tr) !important;
}
.services .service-box::before,.service-inner [class*="service-box"]::before,
.services .service-box::after,.service-inner [class*="service-box"]::after{
  display:none !important;
}
.services .service-box:last-child{border-right:none !important}
.services .service-box:hover{background:rgba(200,148,26,.1) !important}
.service-box .service-box-content h3{font-size:18px !important;margin-bottom:8px !important}
.service-box .service-box-content h3 a{
  color:#fff !important;font-family:'Playfair Display',serif !important;
  transition:var(--tr) !important;
}
.service-box .service-box-content h3 a:hover{color:var(--gold2) !important}
.service-box .service-box-content p{
  color:rgba(255,255,255,.65) !important;font-size:13px !important;
}

/* ── Section headings (SmartSchool uses h2.head-title) ── */
h2.head-title{
  font-family:'Playfair Display',serif !important;
  color:var(--g1) !important;font-size:30px !important;
  font-weight:800 !important;letter-spacing:-.02em;
  text-align:center;
  position:relative;padding-bottom:18px !important;
  margin-bottom:26px !important;
}
h2.head-title::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:56px;height:3px;
  background:linear-gradient(90deg,var(--g5),var(--gold));
  border-radius:2px;box-shadow:0 0 10px var(--gold-glow);
}

/* ── About / bg-gray section ── */
section.bg-gray,.bg-gray{
  background:linear-gradient(180deg,rgba(238,242,238,.7) 0%,#fff 100%) !important;
}
.fullwidth{width:100% !important;max-width:100% !important;padding-left:0 !important;padding-right:0 !important}
.spacet40{padding-top:40px !important}
.spaceb40{padding-bottom:40px !important}
.spacet0{padding-top:0 !important}
.divider{border-top:1px solid rgba(0,0,0,.07) !important;margin:20px auto !important;width:60px !important}
.about_img img{border-radius:var(--r-lg) !important}
.about_img{border-radius:var(--r-lg) !important;overflow:hidden;box-shadow:var(--sh3) !important}
.about-right h3{
  font-family:'Playfair Display',serif !important;
  color:var(--g1) !important;font-size:21px !important;
  font-weight:700 !important;text-transform:none !important;
  margin-bottom:14px !important;
}
.pb40{padding-bottom:40px !important}
.pt10{padding-top:10px !important}

/* ── FAQ Accordion — green/gold override ── */
.panel-group.accrodion2{margin-bottom:0 !important}
.accrodion2 .panel.panel-default{
  border:none !important;border-radius:var(--r) !important;
  margin-bottom:8px !important;overflow:hidden;
  box-shadow:0 3px 12px rgba(0,0,0,.08),var(--sh-inset) !important;
}
.accrodion2 .panel-default>.panel-heading{
  background:linear-gradient(135deg,var(--g2) 0%,var(--g3) 100%) !important;
  border:none !important;border-radius:0 !important;
  padding:13px 18px !important;
  -webkit-transition:all .28s ease 0s !important;
  transition:all .28s ease 0s !important;
}
.accrodion2 .panel-default>.panel-heading:hover{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 100%) !important;
}
.accrodion2 .panel-default>.panel-heading:hover .panel-title,
.accrodion2 .panel-default>.panel-heading:hover .panel-title a{
  color:var(--g1) !important;
}
.accrodion2 .panel-title{
  font-family:'Inter',sans-serif !important;
  font-size:14px !important;font-weight:600 !important;
  margin:0 !important;color:#fff !important;
}
.accrodion2 .panel-title a,
.accrodion2 .panel-title a:hover,
.accrodion2 .panel-title a:focus{
  color:#fff !important;text-decoration:none !important;display:block;
}
.accrodion2 .panel-body{
  background:#fff !important;border:none !important;
  border-top:1px solid rgba(200,148,26,.12) !important;
  font-size:14px !important;color:var(--t2) !important;
  line-height:1.82 !important;padding:16px 18px !important;
}
/* FA chevron icons in accordion */
.accrodion2 .panel-heading .accordion-toggle:after{
  color:var(--gold2) !important;float:right;margin-top:2px;
}

/* ── ACHIEVEMENT / COUNTER SECTION ── */
/* Remove dark navy overlay, replace with forest green gradient */
.countdown_bg,section.countdown_bg{
  background:linear-gradient(135deg,var(--g1) 0%,var(--g3) 60%,var(--g4) 100%) !important;
  padding:72px 0 !important;
  position:relative;overflow:hidden;
}
/* Kill the rgb(1,92,150) navy overlay from style.css */
.countdown_bg::after{
  background:transparent !important;
  background-color:transparent !important;
  display:none !important;
}
/* Add our decorative overlay */
.countdown_bg::before{
  content:'' !important;position:absolute !important;
  inset:0 !important;z-index:0 !important;pointer-events:none !important;
  background:
    radial-gradient(ellipse at 5% 50%,rgba(200,148,26,.1) 0%,transparent 55%),
    radial-gradient(ellipse at 95% 10%,rgba(64,145,108,.08) 0%,transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.018'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
}
.countdown_bg .container{position:relative;z-index:1}
.countdown_bg .row{position:relative;z-index:1}

/* Achievement heading */
h2.counter-title,.counter-title{
  font-family:'Playfair Display',serif !important;
  color:#fff !important;font-size:32px !important;
  font-weight:800 !important;letter-spacing:-.02em;
  margin-top:0 !important;margin-bottom:16px !important;
  text-shadow:0 2px 14px rgba(0,0,0,.25) !important;
}
h2.counter-title::after,.counter-title::after{
  content:'';display:block;
  width:50px;height:3px;
  background:linear-gradient(90deg,var(--gold),transparent);
  margin-top:12px;border-radius:2px;
  box-shadow:0 0 12px var(--gold-glow);
}
.counter-text p{
  color:rgba(255,255,255,.65) !important;
  font-size:14px !important;line-height:1.85 !important;
}
.counter-img .about_img{
  box-shadow:0 16px 48px rgba(0,0,0,.3),0 0 0 2px rgba(255,255,255,.1) !important;
}

/* Counter boxes */
.counter-main{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:var(--r-lg) !important;
  padding:26px 18px 22px !important;
  text-align:center !important;
  margin-bottom:18px !important;
  position:relative;overflow:hidden;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 32px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.1) !important;
  transition:var(--tr-spring) !important;
}
.counter-main::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(200,148,26,.1),transparent 65%);
}
.counter-main:hover{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(200,148,26,.3) !important;
  box-shadow:0 16px 48px rgba(0,0,0,.25),0 4px 0 var(--gold),inset 0 1px 0 rgba(255,255,255,.15) !important;
  -webkit-transform:translateY(-6px) scale(1.03) !important;
  transform:translateY(-6px) scale(1.03) !important;
}
/* SVG icons inside counter-main */
.counter-main img.svg,.counter-main .svg{
  width:40px !important;height:40px !important;
  margin:0 auto 10px !important;display:block !important;
  filter:brightness(0) invert(1) opacity(.8) !important;
}
/* Numbers */
.counter-main h3.value,.counter-main .value{
  font-family:'Playfair Display',serif !important;
  color:var(--gold2) !important;
  font-size:44px !important;font-weight:900 !important;
  line-height:1.1 !important;margin:4px 0 6px !important;
  text-shadow:0 0 24px rgba(232,184,75,.3) !important;
  display:block !important;position:relative;z-index:1;
}
/* Override .countdown_bg span color from style.css */
.countdown_bg span,.countdown_bg .counter-main span{
  color:rgba(255,255,255,.75) !important;
  font-size:11px !important;font-weight:700 !important;
  letter-spacing:1.3px !important;text-transform:uppercase !important;
  position:relative;z-index:1;
}
.counter-content{color:#fff !important;padding-right:12px}
.counter-text{margin:14px 0}

/* ── our-facility orange section (if present) ── */
.our-facility{
  background:linear-gradient(135deg,var(--g1),var(--g3)) !important;
}

/* ── facility_bg section (if present) ── */
.facility_bg{background-image:none !important;background:linear-gradient(135deg,var(--g1) 0%,var(--g3) 100%) !important}
.facility_bg::before{background-color:transparent !important}

/* ================================================================
   DESKTOP LAYOUT — ALIGNMENT & SPACING FIXES
================================================================ */
/* Prevent the full-width section containers from adding gutters */
.fullwidth > .container,
section.bg-gray > .container,
section.countdown_bg > .container{
  padding-left:15px;padding-right:15px;
}

/* Ensure the content area has a clean background */
.container.spacet50{
  background:transparent;
  position:relative;z-index:2;
}

/* Fix overflow on all pages */
.body-content,.page-wrapper{overflow-x:hidden}

/* Mission/Vision boxes */
.misssion{
  border-top:4px solid var(--gold) !important;
  box-shadow:0 6px 32px rgba(0,0,0,.1) !important;
  border-radius:var(--r) !important;
}
.visionbg{
  background:linear-gradient(135deg,var(--g2),var(--g3)) !important;
  border-radius:var(--r) !important;
}
.whitebox{
  border-radius:var(--r-lg) !important;
  box-shadow:var(--sh3) !important;
}
.blue-box1{
  background:linear-gradient(135deg,var(--g3),var(--g4)) !important;
  border-radius:var(--r) !important;
  padding:20px !important;
}

/* ================================================================
   RESPONSIVE — MOBILE / TABLET FIXES
================================================================ */
@media(max-width:991px){
  /* Tablet: accordion full width */
  .accrodion2{margin-top:24px}
  /* Counter section padding */
  .countdown_bg,section.countdown_bg{padding:52px 0 !important}
  h2.counter-title,.counter-title{font-size:26px !important}
  /* Service boxes: stack vertically */
  .service-box{border-right:none !important;border-bottom:1px solid rgba(255,255,255,.1) !important}
  /* Responsive images */
  .about_img{margin-bottom:24px}
}
@media(max-width:767px){
  /* Mobile: full-width columns for SmartSchool homepage */
  .col-sm-6.counter-col,.countdown_bg .col-sm-6{margin-bottom:8px}
  .counter-main{margin-bottom:14px !important}
  h2.counter-title,.counter-title{font-size:24px !important;text-align:center}
  h2.head-title{font-size:24px !important}
  /* Service boxes: stack */
  .service-inner{padding:0 !important}
  .service-box{padding:20px 20px 16px !important;border-bottom:1px solid rgba(255,255,255,.1) !important;border-right:none !important}
  /* Slimmer counter grid on phone */
  .counter-main h3.value,.counter-main .value{font-size:36px !important}
  /* Accordion full width */
  .about-right{margin-top:20px}
  /* Section spacing */
  section.bg-gray{padding:36px 0 !important}
  .countdown_bg,section.countdown_bg{padding:40px 0 !important}
  /* Fix service-inner not going absolute on mobile */
  .service-inner{position:relative !important;top:0 !important}
}
@media(min-width:768px) and (max-width:991px){
  /* iPad: 2-col for counter boxes */
  .countdown_bg .col-md-6{float:left;width:50%}
  /* 2-col service boxes */
  .service-box{width:50%;float:left;box-sizing:border-box}
}

/* ================================================================
   TSPS 3D CLAYMORPHISM UPGRADE v4
   Design: Clay depth + floating blobs + spring physics
   Safe additions — only visual, no ERP logic touched
================================================================ */

/* ──────────────────────────────────────────────────────────────
   SLIDER: kill the black background gap between slide + content
────────────────────────────────────────────────────────────── */
.bs-slider,.bs-slider .carousel,.bs-slider .carousel-inner{
  background:var(--g1) !important;
}
.bs-slider .carousel-inner .item{
  background:var(--g1);
}
/* Contain slider height — prevents oversized container bleeding */
.bs-slider{overflow:hidden !important;max-height:600px}
@media(min-width:992px){
  .bs-slider{max-height:580px !important}
  .bs-slider .carousel,.bs-slider .carousel-inner{
    height:520px !important;max-height:520px !important;overflow:hidden !important;
  }
}
@media(max-width:991px){
  .bs-slider .carousel,.bs-slider .carousel-inner{height:390px !important;max-height:390px !important}
}
@media(max-width:767px){
  .bs-slider .carousel,.bs-slider .carousel-inner{height:270px !important;max-height:270px !important}
}

/* ──────────────────────────────────────────────────────────────
   CLAY DESIGN TOKENS
────────────────────────────────────────────────────────────── */
:root{
  /* Clay radius scale */
  --r-clay:32px;
  --r-clay-sm:20px;
  --r-clay-lg:44px;

  /* Clay shadow (light surface) — bright top inset + shadow stack */
  --clay:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -4px 0 rgba(0,0,0,.07),
    0 6px 12px rgba(0,0,0,.08),
    0 16px 32px rgba(0,0,0,.07),
    0 32px 64px rgba(0,0,0,.05);

  /* Clay shadow on hover */
  --clay-hover:
    inset 0 3px 0 rgba(255,255,255,.98),
    inset 0 -5px 0 rgba(0,0,0,.08),
    0 10px 20px rgba(0,0,0,.12),
    0 28px 56px rgba(0,0,0,.1),
    0 48px 80px rgba(0,0,0,.06),
    0 0 0 2px rgba(200,148,26,.18);

  /* Clay shadow (dark surface) — subtle bright top + deep shadow */
  --clay-dark:
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -5px 0 rgba(0,0,0,.3),
    0 12px 32px rgba(0,0,0,.22),
    0 32px 64px rgba(0,0,0,.18);

  --clay-dark-hover:
    inset 0 3px 0 rgba(255,255,255,.22),
    inset 0 -6px 0 rgba(0,0,0,.3),
    0 20px 60px rgba(0,0,0,.32),
    0 40px 80px rgba(0,0,0,.22),
    0 4px 0 var(--gold);
}

/* ──────────────────────────────────────────────────────────────
   BLOB / FLOAT KEYFRAMES
────────────────────────────────────────────────────────────── */
@keyframes tspsBlob1{
  0%,100%{transform:translate(0,0) scale(1)}
  33%    {transform:translate(32px,-44px) scale(1.06)}
  66%    {transform:translate(-22px,28px) scale(.97)}
}
@keyframes tspsBlob2{
  0%,100%{transform:translate(0,0) scale(1)}
  40%    {transform:translate(-30px,24px) scale(1.05)}
  72%    {transform:translate(22px,-28px) scale(.98)}
}
@keyframes tspsPulseRing{
  0%,100%{opacity:.55;transform:scale(1)}
  50%    {opacity:.75;transform:scale(1.05)}
}
@keyframes tspsFloatCard{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-10px)}
}

/* ──────────────────────────────────────────────────────────────
   PAGE BACKGROUND — subtle layered depth
────────────────────────────────────────────────────────────── */
body{
  background:
    radial-gradient(ellipse at 85% 8%,rgba(200,148,26,.04) 0%,transparent 48%),
    radial-gradient(ellipse at 12% 78%,rgba(27,67,50,.05) 0%,transparent 48%),
    #eef2ee !important;
}

/* ──────────────────────────────────────────────────────────────
   STATS BAND — CLAYMORPHISM DARK CARDS
────────────────────────────────────────────────────────────── */
.tsps-stats-band{
  padding:80px 0 !important;
  position:relative !important;
  overflow:hidden !important;
  background:linear-gradient(145deg,var(--g1) 0%,#0f2418 45%,var(--g3) 100%) !important;
}
/* Replace dot pattern with large ambient blob */
.tsps-stats-band::before{
  content:'';position:absolute;
  width:550px;height:550px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,148,26,.13) 0%,transparent 68%);
  top:-180px;left:-100px;
  animation:tspsBlob1 24s ease-in-out infinite;
  pointer-events:none;z-index:0;
}
.tsps-stats-band::after{
  content:'';position:absolute;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(64,145,108,.1) 0%,transparent 68%);
  bottom:-130px;right:-80px;
  animation:tspsBlob2 30s ease-in-out infinite;
  pointer-events:none;z-index:0;
}
.tsps-stats-band .container,.tsps-stats-band .row{position:relative;z-index:1}

/* Stat cards — clay on dark */
.tsps-stat{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:var(--r-clay) !important;
  padding:36px 20px !important;
  box-shadow:var(--clay-dark) !important;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease) !important;
  will-change:transform;
}
.tsps-stat::before{
  content:'';position:absolute;inset:0;border-radius:var(--r-clay);pointer-events:none;
  background:
    radial-gradient(circle at 28% 12%,rgba(255,255,255,.13),transparent 52%),
    radial-gradient(circle at 78% 88%,rgba(200,148,26,.08),transparent 52%);
}
.tsps-stat:hover{
  transform:translateY(-14px) translateZ(24px) scale(1.04) !important;
  box-shadow:var(--clay-dark-hover) !important;
}
/* Icon bubble */
.tsps-stat-ico{
  width:68px !important;height:68px !important;
  border-radius:18px !important;
  background:linear-gradient(135deg,rgba(200,148,26,.22),rgba(200,148,26,.1)) !important;
  border:1px solid rgba(200,148,26,.32) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.12),
    inset 0 -3px 0 rgba(0,0,0,.2),
    0 8px 24px rgba(200,148,26,.18),
    0 16px 32px rgba(0,0,0,.1) !important;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease) !important;
}
.tsps-stat:hover .tsps-stat-ico{
  background:linear-gradient(135deg,rgba(200,148,26,.38),rgba(200,148,26,.18)) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.15),
    inset 0 -3px 0 rgba(0,0,0,.2),
    0 0 36px rgba(200,148,26,.32),
    0 16px 32px rgba(0,0,0,.12) !important;
  transform:scale(1.12) rotate(6deg) !important;
}
/* Large glowing number */
.tsps-stat-num{
  font-size:56px !important;
  text-shadow:0 0 32px rgba(232,184,75,.35),0 2px 4px rgba(0,0,0,.2) !important;
}

/* ──────────────────────────────────────────────────────────────
   WHY CHOOSE US — CLAYMORPHISM LIGHT CARDS
────────────────────────────────────────────────────────────── */
.tsps-why-sec{
  padding:92px 0 84px !important;
  background:linear-gradient(175deg,#f7f3ec 0%,#fff 45%,#f4f8f5 100%) !important;
  position:relative;
  overflow:hidden;
}
/* Floating blobs */
.tsps-why-sec::before{
  content:'';position:absolute;
  width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,148,26,.065) 0%,transparent 68%);
  top:-220px;right:-160px;
  animation:tspsBlob1 32s ease-in-out infinite;
  pointer-events:none;
}
.tsps-why-sec::after{
  content:'';position:absolute;
  width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(27,67,50,.065) 0%,transparent 68%);
  bottom:-160px;left:-110px;
  animation:tspsBlob2 28s ease-in-out infinite;
  pointer-events:none;
}
/* Section heading enhancement */
.tsps-sec-hd{position:relative;z-index:1}
.tsps-sec-hd h2{
  font-size:40px !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.85),
    0 2px 0 rgba(0,0,0,.04),
    0 6px 16px rgba(0,0,0,.08) !important;
}
/* Badge pulse */
.tsps-badge{
  border-radius:30px !important;
  padding:6px 22px !important;
  box-shadow:
    0 4px 14px rgba(200,148,26,.18),
    inset 0 1px 0 rgba(255,255,255,.75) !important;
  animation:tspsPulseRing 3.2s ease-in-out infinite;
}

/* WHY CHOOSE cards — full claymorphism */
.tsps-wcard{
  background:#fff !important;
  border-radius:var(--r-clay) !important;
  padding:36px 26px !important;
  box-shadow:var(--clay) !important;
  border:none !important;
  position:relative !important;
  overflow:hidden !important;
  height:100% !important;
  transform-style:preserve-3d;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease) !important;
  will-change:transform;
}
/* Gold-green gradient stripe on hover */
.tsps-wcard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  border-radius:var(--r-clay) var(--r-clay) 0 0;
  background:linear-gradient(90deg,var(--g5),var(--gold),var(--gold2));
  box-shadow:0 0 18px rgba(200,148,26,.32);
  transform:scaleX(0);transform-origin:left;
  transition:transform .48s var(--ease) !important;
}
.tsps-wcard:hover::before{transform:scaleX(1)}
/* Ambient glow spot */
.tsps-wcard::after{
  content:'';position:absolute;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,148,26,.07),transparent 68%);
  top:-65px;right:-65px;pointer-events:none;
  transition:transform .45s var(--ease),opacity .45s ease;
}
.tsps-wcard:hover::after{
  transform:scale(1.4);
  background:radial-gradient(circle,rgba(200,148,26,.13),transparent 68%);
}
.tsps-wcard:hover{
  transform:translateY(-12px) translateZ(16px) !important;
  box-shadow:var(--clay-hover) !important;
}
/* Icon bubble — clay on dark */
.tsps-wico{
  width:68px !important;height:68px !important;
  border-radius:20px !important;
  background:linear-gradient(145deg,var(--g2),var(--g4)) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.16),
    inset 0 -4px 0 rgba(0,0,0,.22),
    0 10px 28px var(--green-glow),
    0 18px 36px rgba(0,0,0,.1) !important;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease) !important;
}
.tsps-wcard:hover .tsps-wico{
  background:linear-gradient(145deg,var(--gold),var(--gold2)) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -4px 0 rgba(0,0,0,.18),
    0 12px 36px var(--gold-glow),
    0 20px 44px rgba(0,0,0,.08) !important;
  transform:scale(1.14) rotate(-7deg) translateZ(10px) !important;
}
.tsps-wico i{font-size:24px !important;color:#fff !important}
.tsps-wcard h4{font-size:19px !important;margin-bottom:12px !important}

/* ──────────────────────────────────────────────────────────────
   CTA BAND — DEEPER 3D
────────────────────────────────────────────────────────────── */
.tsps-cta-band{
  background:linear-gradient(145deg,var(--g1) 0%,#101d14 35%,var(--g3) 75%,#163222 100%) !important;
  padding:84px 0 !important;
  position:relative;overflow:hidden;
}
.tsps-cta-band::before{
  content:'';position:absolute;
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,148,26,.12) 0%,transparent 62%);
  top:-320px;left:-180px;
  animation:tspsBlob1 36s ease-in-out infinite;
  pointer-events:none;
}
/* Keep the gold top-line */
.tsps-cta-band::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  box-shadow:0 0 28px var(--gold-glow);
}
/* Primary CTA button — clay */
.tsps-btn-g{
  border-radius:var(--r-clay-sm) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -5px 0 rgba(0,0,0,.18),
    0 8px 20px rgba(200,148,26,.28),
    0 18px 36px rgba(200,148,26,.16) !important;
  transition:transform .45s var(--ease),box-shadow .3s var(--ease-sm) !important;
}
.tsps-btn-g:hover{
  transform:translateY(-5px) !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.32),
    inset 0 -6px 0 rgba(0,0,0,.15),
    0 14px 28px rgba(200,148,26,.32),
    0 28px 56px rgba(200,148,26,.2) !important;
  color:var(--g1) !important;
}
.tsps-btn-g:active{
  transform:translateY(3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 2px 8px rgba(0,0,0,.2) !important;
}

/* ──────────────────────────────────────────────────────────────
   ACHIEVEMENT / COUNTER SECTION — CLAY CARDS
────────────────────────────────────────────────────────────── */
.counter-main{
  border-radius:var(--r-clay) !important;
  box-shadow:var(--clay-dark) !important;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease) !important;
}
.counter-main::before{
  border-radius:var(--r-clay);
}
.counter-main:hover{
  transform:translateY(-12px) translateZ(18px) scale(1.04) !important;
  box-shadow:var(--clay-dark-hover) !important;
}

/* ──────────────────────────────────────────────────────────────
   GENERAL CARDS — GLOBAL CLAY RADIUS
────────────────────────────────────────────────────────────── */
.post-view,.news-item,.ev-item{border-radius:var(--r-clay) !important}
.icon-box,.service-box,.feature-box{border-radius:var(--r-clay) !important}
.rounded-card,.printcontent{border-radius:var(--r-clay) !important}
.abouttext{
  border-radius:var(--r-clay-sm) !important;
  box-shadow:var(--clay) !important;
  border:1px solid rgba(255,255,255,.85) !important;
}
.sidebar{border-radius:var(--r-clay) !important}
.modal-content{border-radius:var(--r-clay) !important}
.table-responsive{border-radius:var(--r-clay) !important}
.dropdown-menu{border-radius:var(--r-clay-sm) !important}

/* ──────────────────────────────────────────────────────────────
   NAVBAR APPLY BUTTON — CLAY
────────────────────────────────────────────────────────────── */
.navbar-nav>li>a.nav-apply-btn{
  border-radius:var(--r-clay-sm) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -4px 0 rgba(0,0,0,.16),
    0 6px 14px rgba(200,148,26,.28),
    0 12px 28px rgba(200,148,26,.15) !important;
}
.navbar-nav>li>a.nav-apply-btn:hover{
  transform:translateY(-4px) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -5px 0 rgba(0,0,0,.15),
    0 10px 0 rgba(0,0,0,.14),
    0 14px 36px var(--green-glow) !important;
}
.navbar-nav>li>a.nav-apply-btn:active{
  transform:translateY(3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -2px 0 rgba(0,0,0,.2),
    0 2px 6px rgba(0,0,0,.2) !important;
}

/* ──────────────────────────────────────────────────────────────
   FOOTER SOCIAL — CLAY SQUARE BUTTONS
────────────────────────────────────────────────────────────── */
.footer-soc a{
  border-radius:12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 0 rgba(0,0,0,.2),
    0 4px 10px rgba(0,0,0,.22) !important;
  transition:transform .42s var(--ease),box-shadow .3s var(--ease-sm),background .3s !important;
}
.footer-soc a:hover{
  border-radius:12px !important;
  transform:translateY(-5px) scale(1.1) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.2),
    inset 0 -4px 0 rgba(0,0,0,.18),
    0 10px 0 rgba(0,0,0,.12),
    0 14px 32px var(--gold-glow) !important;
}

/* ──────────────────────────────────────────────────────────────
   SCROLL-TO-TOP — CLAY SQUARE
────────────────────────────────────────────────────────────── */
.scrollToTop{
  border-radius:16px !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.32),
    inset 0 -5px 0 rgba(0,0,0,.18),
    0 8px 0 rgba(0,0,0,.12),
    0 12px 28px var(--gold-glow) !important;
}
.scrollToTop:hover{
  transform:translateY(-7px) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -5px 0 rgba(0,0,0,.18),
    0 16px 0 rgba(0,0,0,.08),
    0 20px 40px var(--green-glow) !important;
}

/* ──────────────────────────────────────────────────────────────
   GENERAL BUTTON — CLAY PRESS DEPTH
────────────────────────────────────────────────────────────── */
.onlineformbtn,.more-btn{
  border-radius:var(--r-clay-sm) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.2),
    inset 0 -5px 0 rgba(0,0,0,.2),
    0 8px 20px var(--green-glow),
    0 16px 32px rgba(0,0,0,.1) !important;
}
.onlineformbtn:hover,.more-btn:hover{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.24),
    inset 0 -5px 0 rgba(0,0,0,.18),
    0 12px 28px var(--gold-glow),
    0 24px 48px rgba(0,0,0,.08) !important;
  transform:translateY(-4px) !important;
}
.onlineformbtn:active,.more-btn:active{
  transform:translateY(3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.2) !important;
}

/* ──────────────────────────────────────────────────────────────
   WAVE SEPARATOR — SOFT SHADOW
────────────────────────────────────────────────────────────── */
.tsps-wave-sep svg{
  filter:drop-shadow(0 -6px 18px rgba(27,67,50,.12));
}

/* ──────────────────────────────────────────────────────────────
   ACCORDION — ROUNDED CLAY
────────────────────────────────────────────────────────────── */
.accrodion2 .panel.panel-default{
  border-radius:var(--r-clay-sm) !important;
  box-shadow:var(--clay) !important;
}
.accrodion2 .panel-default>.panel-heading{
  border-radius:var(--r-clay-sm) var(--r-clay-sm) 0 0 !important;
}

/* ──────────────────────────────────────────────────────────────
   FORMS — CLAY INPUT
────────────────────────────────────────────────────────────── */
.form-control{
  border-radius:var(--r-clay-sm) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(0,0,0,.04),
    0 1px 0 rgba(255,255,255,.9) !important;
}
.form-control:focus{
  box-shadow:
    0 0 0 3.5px rgba(64,145,108,.14),
    inset 0 2px 4px rgba(0,0,0,.04),
    0 1px 0 rgba(255,255,255,.9) !important;
}

/* ──────────────────────────────────────────────────────────────
   RESPONSIVE — clay radius adjustments
────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  :root{--r-clay:22px;--r-clay-sm:14px;--r-clay-lg:30px}
  .tsps-stat:hover,.tsps-wcard:hover,.counter-main:hover{transform:translateY(-6px) !important}
}

/* ================================================================
   TSPS ALIGNMENT & BANNER FIX PATCH v4.1
   Fixes: banner crop · achievement full-width · service icons ·
          stats alignment · topbar · equal-height cards
================================================================ */

/* ──────────────────────────────────────────────────────────────
   SLIDER BANNER — remove crop, show full image height
   Overrides the height:520px we set earlier
────────────────────────────────────────────────────────────── */
.bs-slider{overflow:hidden !important}
.bs-slider .carousel,
.bs-slider .carousel-inner{
  height:520px !important;
  overflow:hidden !important;
}
.bs-slider .carousel-inner .item img{
  width:100% !important;
  height:520px !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block;
}
@media(max-width:991px){
  .bs-slider .carousel,.bs-slider .carousel-inner{height:390px !important}
  .bs-slider .carousel-inner .item img{height:390px !important}
}
@media(max-width:767px){
  .bs-slider .carousel,.bs-slider .carousel-inner{height:270px !important}
  .bs-slider .carousel-inner .item img{height:270px !important}
}

/* ──────────────────────────────────────────────────────────────
   ACHIEVEMENT / COUNTDOWN — spans 100% of its full-width parent
   countdown_bg is INSIDE bg-gray.fullwidth which already handles
   the full-width breakout, so no second breakout needed here.
────────────────────────────────────────────────────────────── */
section.countdown_bg,
div.countdown_bg{
  position:relative !important;
  left:auto !important;
  transform:none !important;
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box;
  overflow:hidden;
}
/* Keep inner content at centered max-width */
section.countdown_bg > .container,
div.countdown_bg > .container{
  max-width:1170px !important;
  width:100% !important;
  padding-left:15px !important;
  padding-right:15px !important;
  margin:0 auto !important;
}
/* ──────────────────────────────────────────────────────────────
   FULL-WIDTH SECTIONS — bg-gray.fullwidth breakout
   Element is in a double-nested Bootstrap container.
   50% of its parent (inner col-md-12 = 1110px) = 555px.
   calc(-50vw + 50%) = -V/2 + 555px = exactly cancels the
   offset from viewport left, moving the element to x=0.
   No negative layout overflow — element starts at x=0, not x<0.
────────────────────────────────────────────────────────────── */
.bg-gray.fullwidth,
section.bg-gray.fullwidth,
.our-facility,
section.our-facility,
.facility_bg,
section.facility_bg{
  position:relative !important;
  left:auto !important;
  transform:none !important;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(-50vw + 50%) !important;
  margin-right:calc(-50vw + 50%) !important;
  overflow:hidden;
}

/* ──────────────────────────────────────────────────────────────
   SERVICE STRIP — fix icon images overlapping text
   Root cause: SmartSchool CSS sets .service-ico position:absolute
   which places it over the heading. We force it into normal flow
   stacked ABOVE the heading by using flex-column on the box.
────────────────────────────────────────────────────────────── */

/* Force the service box into a vertical flex stack */
.service-box,
.services .service-box,
.service-inner .service-box{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:0 !important;
  position:relative !important;
  /* NO overflow:hidden — would clip countdown_bg full-width breakout */
}

/* Icon container: pull out of absolute, go back into flow ABOVE heading */
.service-ico,
.service-icon,
.service-box-icon,
.service-box-img{
  position:relative !important;  /* override SmartSchool's absolute */
  display:block !important;
  float:none !important;
  width:auto !important;
  height:auto !important;
  margin:0 0 14px 0 !important;
  flex-shrink:0 !important;
  z-index:1;
  transform:none !important;     /* remove any translateY that re-offsets it */
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
}

/* Icon image: constrained, no float */
.service-ico img,
.service-icon img,
.service-box-icon img,
.service-box-img img{
  width:48px !important;
  height:48px !important;
  object-fit:contain !important;
  display:block !important;
  position:static !important;
  float:none !important;
  max-width:100% !important;
}

/* Content block: full width, clear any side-float */
.service-box .service-box-content,
.service-box .service-inner-content{
  position:relative !important;
  z-index:1;
  width:100% !important;
  padding-left:0 !important;    /* reset any left-padding added for icon offset */
  clear:both !important;
}

/* Heading inside service content: no competing padding */
.service-box .service-box-content h3,
.service-box h3{
  padding-left:0 !important;
  margin-top:0 !important;
  position:relative !important;
  z-index:1;
}

/* ──────────────────────────────────────────────────────────────
   TOPBAR — vertical center all 3 columns
────────────────────────────────────────────────────────────── */
.toparea .container > .row{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap;
  min-height:44px;
}
.toparea [class*="col-"]{
  display:flex !important;
  align-items:center !important;
}

/* ──────────────────────────────────────────────────────────────
   STATS BAND — equal-height flex cards on desktop
────────────────────────────────────────────────────────────── */
.tsps-stats-band .row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
}
.tsps-stats-band [class*="col-"]{
  display:flex !important;
  flex-direction:column !important;
}
.tsps-stat{
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

/* ──────────────────────────────────────────────────────────────
   WHY CHOOSE — equal-height flex cards on desktop
────────────────────────────────────────────────────────────── */
.tsps-why-row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
  margin:-12px !important;
}
.tsps-why-row > [class*="col-"]{
  display:flex !important;
  flex-direction:column !important;
  padding:12px !important;
}
.tsps-wcard{
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
}
.tsps-wcard p{
  flex:1 !important;
}

/* ──────────────────────────────────────────────────────────────
   ABOUT SECTION — hide SmartSchool's floating badge/icon
   inside .about-left that breaks the Bootstrap float grid.
   Do NOT set overflow:hidden on about-right — that clips the
   countdown_bg full-width breakout (margin-left:-50vw+50%).
────────────────────────────────────────────────────────────── */
.about-left > *:not(.about_img){
  display:none !important;
}
.about_img{
  position:relative !important;
}

/* ──────────────────────────────────────────────────────────────
   DESKTOP CONTAINER — consistent max-width across all sections
────────────────────────────────────────────────────────────── */
@media(min-width:1200px){
  .tsps-stats-band .container,
  .tsps-why-sec .container,
  .tsps-cta-band .container,
  .tsps-fac-sec .container{
    max-width:1170px !important;
  }
}
/* Fix Bootstrap 3 col-md override on mobile — scope to stats only */
@media(max-width:767px){
  .tsps-stats-band .col-md-3{width:50% !important;max-width:50% !important}
  .tsps-stats-band .col-xs-6{width:50% !important}
}
@media(max-width:400px){
  .tsps-stats-band .col-md-3,
  .tsps-stats-band .col-xs-6{width:100% !important;max-width:100% !important}
}

/* ================================================================
   TSPS iPAD / TABLET PATCH v4.3
   Fixes: navbar wrapping · footer layout · why-choose grid ·
          CTA band · topbar overflow
================================================================ */

/* ──────────────────────────────────────────────────────────────
   NAVBAR — collapse to hamburger at ≤1199px (all iPads + tablet)
   Extended from 991px to 1199px so landscape iPad Air (1180px CSS)
   also gets hamburger — 10 nav items can't fit in 970px container.
   Desktop full nav starts at ≥1200px only.
────────────────────────────────────────────────────────────── */
@media(max-width:1199px){
  /* Show the hamburger toggle */
  .navbar-toggle{ display:block !important }
  /* Float the header left so toggle appears right */
  .navbar-header{ float:none !important; width:100% !important; display:flex !important; align-items:center !important; justify-content:space-between !important }
  /* Hide the nav collapse by default */
  .navbar-collapse.collapse{ display:none !important; overflow:hidden !important }
  /* Show when toggled */
  .navbar-collapse.collapse.in{ display:block !important }
  /* Full-width dropdown panel */
  .navbar-nav{ float:none !important; width:100% !important }
  .navbar-nav>li{ float:none !important; display:block !important }
  /* Keep header single row */
  #tsps-header .navbar{ position:relative }
  /* Ensure header doesn't exceed viewport */
  #tsps-header .container{ overflow:visible }
}

/* Collapsed nav panel styling on tablet (same as mobile) */
@media(max-width:1199px) and (min-width:768px){
  .navbar-collapse{
    border-top:1px solid rgba(0,0,0,.06) !important;
    background:rgba(255,255,255,.97) !important;
    backdrop-filter:blur(24px) !important;
    padding:0 !important;
    box-shadow:0 14px 40px rgba(0,0,0,.14) !important;
  }
  .navbar-nav>li>a{ padding:14px 20px !important; border-bottom:1px solid rgba(0,0,0,.05) }
  .navbar-nav>li>a::after{ display:none !important }
  .navbar-nav>li>a.nav-apply-btn{ margin:12px 20px !important; display:block; text-align:center }
}

/* ──────────────────────────────────────────────────────────────
   TOPBAR — hide email on tablet to prevent overflow
────────────────────────────────────────────────────────────── */
@media(max-width:991px) and (min-width:768px){
  .toparea .col-md-5 .top-list li:first-child{ display:none !important }
  .toparea [class*="col-"]{ width:auto !important; padding:0 8px !important }
  .toparea .container > .row{ justify-content:space-between }
}

/* ──────────────────────────────────────────────────────────────
   FOOTER — 3-column stays at tablet; brand spans top on mobile
────────────────────────────────────────────────────────────── */
@media(max-width:991px) and (min-width:768px){
  .footer-grid-wrap{
    grid-template-columns: 1fr 1fr 1fr !important;
    gap:24px !important;
  }
  .footer-brand-name{ font-size:18px !important }
  .footer-brand-desc{ font-size:12px !important }
}

/* ──────────────────────────────────────────────────────────────
   WHY CHOOSE — fix negative-margin row on tablet
────────────────────────────────────────────────────────────── */
@media(max-width:991px){
  .tsps-why-row{
    margin:-8px !important;
    overflow:hidden !important;
  }
  .tsps-why-row > [class*="col-"]{
    padding:8px !important;
  }
  /* Ensure last-row cards stretch to fill */
  .tsps-wcard{
    min-height:160px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   STATS BAND — 2×2 grid on tablet
────────────────────────────────────────────────────────────── */
@media(max-width:991px) and (min-width:768px){
  .tsps-stats-band .col-md-3{
    width:50% !important;
    float:left !important;
  }
  .tsps-stats-band .row{
    display:block !important;
    overflow:hidden !important;
  }
  /* Re-enable flex for equal height within pairs */
  .tsps-stat{
    min-height:150px !important;
    margin-bottom:0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   CTA BAND — stack vertically on tablet
────────────────────────────────────────────────────────────── */
@media(max-width:991px){
  .tsps-cta-row{
    flex-direction:column !important;
    text-align:center !important;
    gap:24px !important;
  }
  .tsps-cta-act{
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:12px !important;
  }
  .tsps-btn-g,.tsps-btn-w{
    min-width:180px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   SLIDER — reasonable max height on iPad
────────────────────────────────────────────────────────────── */
@media(max-width:991px) and (min-width:768px){
  .bs-slider .carousel-inner .item img{
    max-height:520px !important;
    object-fit:cover !important;
    object-position:center center !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   SECTION HEADINGS — scale down on tablet
────────────────────────────────────────────────────────────── */
@media(max-width:991px){
  .tsps-sec-hd h2{ font-size:26px !important }
  .tsps-stats-band{ padding:40px 0 !important }
  .tsps-why-sec{ padding:52px 0 !important }
}

/* ================================================================
   TSPS PROGRAMS SECTION
================================================================ */
.tsps-prog-sec{
  padding:80px 0;
  position:relative;
  background:#eef2ee;
  overflow:hidden;
}
.tsps-prog-sec::before{
  content:'';position:absolute;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,148,26,.07) 0%,transparent 70%);
  top:-140px;right:-120px;
  animation:tspsBlob2 20s ease-in-out infinite;
  pointer-events:none;
}
.tsps-prog-grid{
  display:flex;
  gap:20px;
  margin-top:44px;
  align-items:stretch;
}
.tsps-prog-card{
  flex:1;
  background:#fff;
  border-radius:var(--r-clay);
  box-shadow:var(--clay);
  padding:32px 20px 28px;
  text-align:center;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease-sm);
  position:relative;
  overflow:hidden;
  cursor:default;
  display:flex;flex-direction:column;align-items:center;
}
.tsps-prog-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(145deg,rgba(255,255,255,.6) 0%,transparent 60%);
  pointer-events:none;
}
.tsps-prog-card:hover{
  transform:translateY(-10px) scale(1.025);
  box-shadow:var(--clay-hover);
}
.tsps-prog-ico{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(145deg,var(--g3),var(--g5));
  box-shadow:0 8px 24px var(--green-glow),inset 0 1px 0 rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
  transition:transform .38s var(--ease),box-shadow .38s,background .3s;
  flex-shrink:0;
}
.tsps-prog-ico i{ font-size:26px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.2) }
.tsps-prog-card:hover .tsps-prog-ico{
  transform:scale(1.12) rotate(-6deg);
  box-shadow:0 12px 32px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.3);
  background:linear-gradient(145deg,var(--gold),var(--gold2));
}
.tsps-prog-lbl{
  font-family:'Playfair Display',serif;
  font-size:17px;font-weight:700;color:var(--g1);
  margin-bottom:6px;
}
.tsps-prog-range{
  font-size:11px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold);
  background:rgba(200,148,26,.09);
  display:inline-block;padding:3px 10px;
  border-radius:20px;margin-bottom:12px;
}
.tsps-prog-card p{
  font-size:13px;color:var(--t3);
  line-height:1.65;margin:0;flex:1;
}

/* Programs — responsive */
@media(max-width:991px){
  .tsps-prog-grid{ flex-wrap:wrap;gap:16px }
  .tsps-prog-card{ flex:0 0 calc(50% - 8px);min-width:0 }
  .tsps-prog-sec{ padding:56px 0 }
}
@media(max-width:767px){
  .tsps-prog-grid{ gap:12px }
  .tsps-prog-card{ flex:0 0 calc(50% - 6px);padding:22px 14px 18px }
  .tsps-prog-ico{ width:52px;height:52px }
  .tsps-prog-ico i{ font-size:20px }
  .tsps-prog-lbl{ font-size:15px }
  .tsps-prog-sec{ padding:44px 0 }
}
@media(max-width:420px){
  .tsps-prog-card{ flex:0 0 100% }
}

/* ================================================================
   TSPS FACILITIES STRIP
================================================================ */
.tsps-fac-strip{
  padding:72px 0;
  background:var(--g2);
  position:relative;
  overflow:hidden;
}
.tsps-fac-strip::before{
  content:'';position:absolute;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,148,26,.07) 0%,transparent 65%);
  top:-200px;left:-150px;
  animation:tspsBlob1 22s ease-in-out infinite;
  pointer-events:none;
}
.tsps-fac-strip::after{
  content:'';position:absolute;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(82,183,136,.07) 0%,transparent 70%);
  bottom:-120px;right:-100px;
  animation:tspsBlob2 18s ease-in-out infinite;
  pointer-events:none;
}
/* Override section-head for dark background */
.tsps-fac-strip .tsps-sec-hd h2{ color:#fff !important }
.tsps-fac-strip .tsps-sec-hd p{ color:rgba(255,255,255,.55) !important }

/* Gold badge variant */
.tsps-badge-gold{
  background:rgba(200,148,26,.18) !important;
  color:var(--gold2) !important;
  border:1px solid rgba(200,148,26,.3) !important;
}

.tsps-fac-grid{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px 12px;
  margin-top:44px;
  position:relative;z-index:1;
}
.tsps-fac-item{
  flex:1;min-width:100px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:24px 14px;
  border-radius:var(--r-clay-sm);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  transition:transform .35s var(--ease),background .28s,box-shadow .28s,border-color .28s;
  cursor:default;
}
.tsps-fac-item:hover{
  transform:translateY(-8px);
  background:rgba(200,148,26,.1);
  border-color:rgba(200,148,26,.35);
  box-shadow:0 16px 40px rgba(0,0,0,.3),0 0 0 1px rgba(200,148,26,.2);
}
.tsps-fac-ico{
  width:58px;height:58px;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(200,148,26,.25);
  display:flex;align-items:center;justify-content:center;
  transition:background .28s,border-color .28s,transform .35s var(--ease),box-shadow .28s;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.tsps-fac-ico i{
  font-size:22px;color:var(--gold2);
  transition:transform .35s var(--ease),color .28s;
}
.tsps-fac-item:hover .tsps-fac-ico{
  background:rgba(200,148,26,.15);
  border-color:var(--gold2);
  box-shadow:0 0 28px var(--gold-glow),0 4px 16px rgba(0,0,0,.22);
  transform:scale(1.12) rotate(-6deg);
}
.tsps-fac-item:hover .tsps-fac-ico i{ color:var(--gold3) }
.tsps-fac-item span{
  font-size:12px;font-weight:600;
  color:rgba(255,255,255,.6);
  text-align:center;letter-spacing:.3px;
  transition:color .28s;
  line-height:1.4;
}
.tsps-fac-item:hover span{ color:#fff }

/* Facilities — responsive */
@media(max-width:991px){
  .tsps-fac-item{ flex:0 0 calc(25% - 10px);min-width:0 }
  .tsps-fac-strip{ padding:52px 0 }
}
@media(max-width:767px){
  .tsps-fac-item{ flex:0 0 calc(33.33% - 10px) }
  .tsps-fac-strip{ padding:44px 0 }
  .tsps-fac-ico{ width:50px;height:50px }
  .tsps-fac-ico i{ font-size:18px }
}
@media(max-width:480px){
  .tsps-fac-item{ flex:0 0 calc(50% - 8px) }
}

/* ================================================================
   CMS CONTENT PAGES — clay card treatment
   Applies to About Us, FAQ, News, Events etc.
================================================================ */
/* Page-level post view cards */
.post-view,.about-section,.page-content-wrap{
  border-radius:var(--r-clay) !important;
  box-shadow:var(--clay) !important;
  background:#fff !important;
  overflow:hidden;
}
/* Headings inside content */
.container.spacet50 h1,.container.spacet50 h2,
.container.spacet50 h3{
  color:var(--g1);
}
.container.spacet50 h2{
  font-size:28px;
  margin-bottom:18px;
}
/* FAQ / Accordion panels */
.panel{
  border-radius:var(--r-clay-sm) !important;
  box-shadow:var(--sh2) !important;
  border:1px solid rgba(0,0,0,.05) !important;
  overflow:hidden;
  margin-bottom:12px !important;
}
.panel-default>.panel-heading{
  background:linear-gradient(135deg,var(--g3) 0%,var(--g4) 100%) !important;
  border:none !important;
  padding:14px 20px !important;
}
.panel-default>.panel-heading .panel-title a,
.panel-default>.panel-heading .panel-title{
  color:#fff !important;
  font-weight:600 !important;
  font-size:14px !important;
  text-decoration:none !important;
}
.panel-default>.panel-heading+.panel-collapse>.panel-body{
  background:#fff;
  border-top:none !important;
  padding:16px 20px !important;
  color:var(--t2);
  font-size:14px;
  line-height:1.75;
}
/* Tables in CMS */
.table-bordered{
  border-radius:var(--r) !important;
  overflow:hidden;
  border:none !important;
  box-shadow:var(--sh1) !important;
}
.table-bordered>thead>tr>th{
  background:linear-gradient(135deg,var(--g3),var(--g4)) !important;
  color:#fff !important;
  border:none !important;
  font-weight:600;
}
.table-striped>tbody>tr:nth-of-type(odd){
  background:rgba(27,67,50,.04) !important;
}
/* News / Event cards */
.news-item,.ev-item,.post-view{
  border-radius:var(--r-clay-sm) !important;
  box-shadow:var(--clay) !important;
  transition:transform .35s var(--ease),box-shadow .35s !important;
  overflow:hidden;
}
.news-item:hover,.ev-item:hover,.post-view:hover{
  transform:translateY(-6px) !important;
  box-shadow:var(--clay-hover) !important;
}

/* ================================================================
   TSPS CRITICAL FIX PATCH v4.4
   Fixes: banner crop/stretch · Why-Choose grid · navbar items
   These rules use high-specificity selectors to win all cascade
   battles with Bootstrap and previous patches.
================================================================ */

/* ──────────────────────────────────────────────────────────────
   BANNER — Desktop: natural aspect ratio, no scale-crop
   Root causes fixed:
   1. transform:scale(1.04) zoomed image → overflows overflow:hidden → crop
   2. object-fit:fill distorts when container width ≠ image width
   3. Multiple conflicting height rules from v4.1 patch
────────────────────────────────────────────────────────────── */
.bs-slider{
  overflow:hidden !important;
  position:relative !important;
}
/* Carousel container — fixed height wins, no height:auto */
.bs-slider .carousel,
.bs-slider .carousel-inner{
  height:520px !important;
  overflow:hidden !important;
}
/* Do NOT force position:relative on .item — Bootstrap needs .item.next/.prev to be position:absolute during slide transitions.
   Forcing relative on all items makes both slides sit in document flow simultaneously → 1040px height spike → scroll jump */
.bs-slider .carousel-inner .item.active{
  overflow:hidden !important;
}
/* THE KEY RULE: fixed height + cover — no transform, no layout shift */
.bs-slider .carousel-inner .item img,
.bs-slider .carousel-inner .item.active img{
  display:block !important;
  width:100% !important;
  height:520px !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  transition:none !important;
  position:relative !important;
}
/* Tablet */
@media(max-width:991px) and (min-width:768px){
  .bs-slider .carousel-inner .item img,
  .bs-slider .carousel-inner .item.active img{
    max-height:480px !important;
    height:480px !important;
    object-fit:cover !important;
    object-position:center top !important;
  }
}
/* Mobile */
@media(max-width:767px){
  .bs-slider .carousel-inner .item img,
  .bs-slider .carousel-inner .item.active img{
    max-height:260px !important;
    height:260px !important;
    object-fit:cover !important;
    object-position:center top !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   WHY CHOOSE GRID — 3 columns on desktop + tablet, 2 on mobile
   Root cause: flex shrink was letting items below Bootstrap's
   col-sm-6 (50%) width, fitting 4 across on iPad
────────────────────────────────────────────────────────────── */
.tsps-why-row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
  margin:0 -10px !important;    /* compensate for column padding */
}
.tsps-why-row > [class*="col-"]{
  /* Force exactly 3 columns on desktop and tablet */
  float:none !important;        /* kill Bootstrap col-sm-6 float:left */
  width:33.333% !important;
  flex:0 0 33.333% !important;  /* flex-shrink:0 prevents squeezing */
  max-width:33.333% !important;
  padding:10px !important;
  display:flex !important;
  flex-direction:column !important;
  box-sizing:border-box !important;
}
/* 2 columns on mobile */
@media(max-width:767px){
  .tsps-why-row > [class*="col-"]{
    width:50% !important;
    flex:0 0 50% !important;
    max-width:50% !important;
  }
}
/* 1 column on small mobile */
@media(max-width:420px){
  .tsps-why-row > [class*="col-"]{
    width:100% !important;
    flex:0 0 100% !important;
    max-width:100% !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   NAVBAR — Vertical stacking on all tablets + small desktops (≤1199px)
   Uses #tsps-navbar ID (specificity 0,1,0,0) to beat Bootstrap's
   class-only rules (0,0,2,0) and force correct vertical layout.
────────────────────────────────────────────────────────────── */
@media(max-width:1199px){
  /* Show hamburger */
  .navbar-toggle{
    display:block !important;
  }

  /* Header: logo left, toggle right — single row */
  .navbar-header{
    float:none !important;
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:60px !important;
  }

  /* Collapse panel: hidden by default, shown when .in */
  .navbar-collapse.collapse{
    display:none !important;
    overflow:hidden !important;
    height:0 !important;
  }
  .navbar-collapse.in,
  .navbar-collapse.collapse.in{
    display:block !important;
    overflow-y:auto !important;
    height:auto !important;
    max-height:80vh !important;
  }

  /* Panel background */
  .navbar-collapse{
    background:rgba(255,255,255,.97) !important;
    border-top:1px solid rgba(0,0,0,.06) !important;
    box-shadow:0 14px 40px rgba(0,0,0,.14) !important;
    padding:0 !important;
    width:100% !important;
    float:none !important;
    clear:both !important;
  }

  /* ── The ID-scoped rules force vertical stacking ── */
  #tsps-navbar,
  #tsps-navbar.navbar-collapse{
    width:100% !important;
    float:none !important;
  }

  /* UL: full width, no float */
  #tsps-navbar .navbar-nav,
  #tsps-navbar .navbar-nav.navbar-right,
  #tsps-navbar ul.nav{
    float:none !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* LI: full-width blocks, no float */
  #tsps-navbar .navbar-nav > li,
  #tsps-navbar .navbar-nav.navbar-right > li{
    float:none !important;
    display:block !important;
    width:100% !important;
    clear:both !important;
    margin:0 !important;
  }

  /* Links: full-width, normal vertical padding */
  #tsps-navbar .navbar-nav > li > a{
    display:block !important;
    width:100% !important;
    padding:13px 20px !important;
    border-bottom:1px solid rgba(0,0,0,.05) !important;
    color:var(--g1) !important;
    font-size:14px !important;
    font-weight:600 !important;
  }
  #tsps-navbar .navbar-nav > li > a::after{
    display:none !important;
  }

  /* Apply/CTA button */
  #tsps-navbar .navbar-nav > li > a.nav-apply-btn{
    margin:10px 20px !important;
    border-radius:var(--r-sm) !important;
    text-align:center !important;
    border-bottom:none !important;
    display:block !important;
    width:calc(100% - 40px) !important;
  }

  /* Dropdown — inline, not floating */
  #tsps-navbar .dropdown-menu{
    position:static !important;
    float:none !important;
    width:100% !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
    border-left:3px solid var(--gold) !important;
    background:rgba(248,245,240,.98) !important;
    animation:none !important;
    padding:0 !important;
    display:none !important;
  }
  #tsps-navbar .open > .dropdown-menu{
    display:block !important;
  }
  #tsps-navbar .dropdown-menu > li > a{
    padding:11px 28px !important;
    font-size:13px !important;
    border-bottom:1px solid rgba(0,0,0,.04) !important;
  }
  #tsps-navbar .dropdown-menu > li > a::before{
    display:none !important;
  }
}

/* ================================================================
   TSPS MOBILE + TABLET COMPLETE PATCH v5.0
   Covers: topbar · footer · services · about · countdown ·
           landscape · small-screen spacing
   CONSTRAINT: Desktop (≥992px) is completely unchanged.
================================================================ */

/* ──────────────────────────────────────────────────────────────
   TOPBAR — hide on mobile; too cramped below 768px
────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  .toparea{ display:none !important; }
}

/* ──────────────────────────────────────────────────────────────
   NAVBAR — mobile header row + logo size
────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  .navbar-header{ min-height:52px !important; }
  .navbar-brand img{ max-height:42px !important; }
  .navbar-toggle{
    margin:6px 0 !important;
    padding:7px 10px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   SLIDER — landscape phone: shorter height
────────────────────────────────────────────────────────────── */
@media(max-width:767px) and (orientation:landscape){
  .bs-slider .carousel-inner .item img,
  .bs-slider .carousel-inner .item.active img{
    height:180px !important;
    max-height:180px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   WAVE SEPARATOR — scale on mobile
────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  .tsps-wave-sep{ height:32px !important; }
  .tsps-wave-sep svg{ height:32px !important; }
}

/* ──────────────────────────────────────────────────────────────
   STATS BAND — ensure row clears floats on mobile
────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  .tsps-stats-band .row{ overflow:hidden !important; }
  .tsps-stats-band{ padding:36px 0 !important; }
}

/* ──────────────────────────────────────────────────────────────
   SERVICES STRIP — mobile: remove right-border dividers,
   add bottom-border; tablet: 2-col layout
────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  .services .service-box,
  .service-inner [class*="service-box"]{
    border-right:none !important;
    border-bottom:1px solid rgba(255,255,255,.1) !important;
    padding:20px 20px 18px !important;
  }
  .services .service-box:last-child,
  .service-inner [class*="service-box"]:last-child{
    border-bottom:none !important;
  }
}
@media(max-width:991px) and (min-width:768px){
  .services .col-md-3{
    width:50% !important;
    float:left !important;
  }
  .services .col-md-3:nth-child(2n) .service-box,
  .services .col-md-3:nth-child(2n) [class*="service-box"]{
    border-right:none !important;
  }
  .services .col-md-3:nth-child(n+3) .service-box,
  .services .col-md-3:nth-child(n+3) [class*="service-box"]{
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   ABOUT / BG-GRAY SECTION — mobile single-column stack
────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  .about-left,
  .about-right{
    width:100% !important;
    float:none !important;
    padding-left:15px !important;
    padding-right:15px !important;
  }
  .about-left{ margin-bottom:20px !important; }
  .about_img img{
    max-height:260px !important;
    object-fit:cover !important;
    width:100% !important;
  }
  /* Safety: prevent any fullwidth calc() from creating horiz scroll */
  section.bg-gray.fullwidth,
  .bg-gray.fullwidth{
    overflow-x:hidden !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   COUNTDOWN / ACHIEVEMENTS — 2-col on mobile, 1-col on ≤400px
────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  section.countdown_bg .col-md-3,
  div.countdown_bg .col-md-3{
    width:50% !important;
    float:left !important;
    margin-bottom:12px !important;
  }
  /* Counter number font size */
  .countdown_bg .timer,
  .countdown_bg .count,
  .countdown_bg h2,
  .countdown_bg .counter-number{
    font-size:36px !important;
    line-height:1.1 !important;
  }
  .countdown_bg h4,
  .countdown_bg p,
  .countdown_bg .counter-label{
    font-size:12px !important;
  }
  /* overflow guard since countdown_bg is inside bg-gray.fullwidth */
  section.countdown_bg,
  div.countdown_bg{
    overflow-x:hidden !important;
  }
}
@media(max-width:400px){
  section.countdown_bg .col-md-3,
  div.countdown_bg .col-md-3{
    width:100% !important;
    float:none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   WHY CHOOSE — card size tweak on tablet
────────────────────────────────────────────────────────────── */
@media(max-width:991px) and (min-width:768px){
  .tsps-wcard{ padding:22px 16px !important; }
  .tsps-wcard-ico{ width:52px !important; height:52px !important; }
  .tsps-wcard-ico i{ font-size:20px !important; }
  .tsps-wcard h3{ font-size:15px !important; }
  .tsps-wcard p{ font-size:13px !important; }
}

/* ──────────────────────────────────────────────────────────────
   SECTION HEADINGS — very small screens (≤480px)
────────────────────────────────────────────────────────────── */
@media(max-width:480px){
  .tsps-sec-hd h2{ font-size:21px !important; }
  .tsps-sec-hd p{ font-size:13px !important; }
  h2.head-title{ font-size:21px !important; }
  .tsps-sec-hd{ margin-bottom:28px !important; }
}

/* ──────────────────────────────────────────────────────────────
   CTA BAND — compact on small mobile
────────────────────────────────────────────────────────────── */
@media(max-width:480px){
  .tsps-cta-band{ padding:36px 0 !important; }
  .tsps-cta-txt h3{ font-size:20px !important; }
  .tsps-cta-txt p{ font-size:13px !important; }
  .tsps-btn-g,.tsps-btn-w{
    padding:12px 20px !important;
    font-size:13px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   FOOTER — single column on mobile
────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  .footer-grid-wrap{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .tsps-footer-main{ padding:40px 0 28px !important; }
  .footer-brand-name{ font-size:20px !important; }
  .footer-brand-tag{ font-size:12px !important; }
  .footer-brand-desc{ font-size:13px !important; }
  .fo-title{ font-size:14px !important; margin-bottom:12px !important; }
  .footer-soc a{ width:36px !important; height:36px !important; font-size:14px !important; }
  .co-list li{ font-size:13px !important; }
  .f1-list li a{ font-size:13px !important; }
  .copy-right p{ font-size:12px !important; }
}

/* ──────────────────────────────────────────────────────────────
   CMS CONTENT SPACING — tighter on mobile
────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  .container.spacet50{ padding-top:28px !important; }
  .container.spaceb50{ padding-bottom:28px !important; }
}

/* ──────────────────────────────────────────────────────────────
   GLOBAL OVERFLOW GUARD — prevent horizontal scroll on mobile
────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  html, body{
    overflow-x:hidden !important;
    max-width:100vw !important;
  }
}

/* ================================================================
   TSPS TABLET FIX v5.1
   Fixes: Why Choose 3-col on portrait iPad · landscape nav collapse
          topbar compact on landscape · section spacing 992-1199px
================================================================ */

/* ──────────────────────────────────────────────────────────────
   WHY CHOOSE — force 3-col at all tablet widths (768-1199px)
   Bootstrap col-sm-6 sets width:50% at ≥768px. This scoped
   media-query rule with !important overrides it definitively.
────────────────────────────────────────────────────────────── */
@media(min-width:768px) and (max-width:1199px){
  .tsps-why-row > .col-sm-6,
  .tsps-why-row > .col-md-4,
  .tsps-why-row > [class*="col-"]{
    float:none !important;
    width:33.333% !important;
    flex:0 0 33.333% !important;
    max-width:33.333% !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   TOPBAR — compact layout on landscape iPad (992-1199px)
────────────────────────────────────────────────────────────── */
@media(max-width:1199px) and (min-width:992px){
  .toparea .col-md-5 .top-list li:first-child{ display:none !important }
  .toparea [class*="col-"]{ width:auto !important; padding:0 8px !important }
}

/* ──────────────────────────────────────────────────────────────
   FOOTER — ensure 3-col on landscape iPad (992-1199px)
   Default grid is 1.8fr 1fr 1fr; at 992-1199px Bootstrap
   container is 970px so we normalise to equal columns.
────────────────────────────────────────────────────────────── */
@media(max-width:1199px) and (min-width:992px){
  .footer-grid-wrap{
    grid-template-columns:1fr 1fr 1fr !important;
    gap:28px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   STATS BAND — 2×2 on landscape iPad (992-1199px)
   col-md-3 activates at ≥992px → 4-in-a-row works fine.
   No change needed — included here only to confirm the intent.
────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────
   CTA BAND — stack vertically on landscape iPad too (992-1199px)
────────────────────────────────────────────────────────────── */
@media(max-width:1199px) and (min-width:992px){
  .tsps-cta-row{
    flex-direction:column !important;
    text-align:center !important;
    gap:24px !important;
  }
  .tsps-cta-act{
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:12px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   SECTION HEADINGS — scale for 992-1199px landscape iPad
────────────────────────────────────────────────────────────── */
@media(max-width:1199px) and (min-width:992px){
  .tsps-sec-hd h2{ font-size:32px !important; }
  .tsps-stats-band{ padding:52px 0 !important; }
  .tsps-why-sec{ padding:64px 0 60px !important; }
  .tsps-cta-band{ padding:56px 0 !important; }
}

/* ──────────────────────────────────────────────────────────────
   SERVICES STRIP — 2-col on landscape iPad (992-1199px)
────────────────────────────────────────────────────────────── */
@media(max-width:1199px) and (min-width:992px){
  .services .col-md-3{
    width:50% !important;
    float:left !important;
  }
  .services .col-md-3:nth-child(2n) .service-box,
  .services .col-md-3:nth-child(2n) [class*="service-box"]{
    border-right:none !important;
  }
  .services .col-md-3:nth-child(n+3) .service-box,
  .services .col-md-3:nth-child(n+3) [class*="service-box"]{
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   SLIDER — height on landscape iPad (992-1199px)
────────────────────────────────────────────────────────────── */
@media(max-width:1199px) and (min-width:992px){
  .bs-slider .carousel-inner .item img,
  .bs-slider .carousel-inner .item.active img{
    max-height:480px !important;
    height:480px !important;
    object-fit:cover !important;
    object-position:center top !important;
  }
}

/* ================================================================
   TSPS TABLET FIX v5.2
   Nuclear fixes: navbar hamburger · topbar portrait · FAQ colour ·
   countdown section · Why Choose float override
================================================================ */

/* ──────────────────────────────────────────────────────────────
   NAVBAR HAMBURGER — nuclear specificity fix
   Bootstrap's bootstrap.min.css AND ss-print.css (loaded after
   our CSS) both have .navbar-collapse.collapse{display:block!i}
   Using header#tsps-header prefix wins that specificity battle.
────────────────────────────────────────────────────────────── */
@media(max-width:1199px){
  /* Show the hamburger toggle — high specificity beats ss-print */
  header#tsps-header .navbar-toggle{
    display:block !important;
    float:right !important;
  }
  /* Hide the collapse panel (not toggled open) */
  header#tsps-header .navbar-collapse.collapse:not(.in){
    display:none !important;
    height:0 !important;
    overflow:hidden !important;
    visibility:visible !important;
  }
  /* Show when hamburger tapped (Bootstrap adds .in class) */
  header#tsps-header .navbar-collapse.in,
  header#tsps-header .navbar-collapse.collapse.in{
    display:block !important;
    height:auto !important;
    max-height:80vh !important;
    overflow-y:auto !important;
  }
  /* Desktop nav link underline — hide on tablet */
  header#tsps-header .navbar-nav > li > a::after{
    display:none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   TOPBAR — fix col-sm-12 stacking on portrait iPad (768-1199px)
   Bootstrap col-sm-12 makes each topbar col 100% → 3 rows.
   Switch the .row to flexbox to keep all 3 cols on one line.
────────────────────────────────────────────────────────────── */
@media(max-width:1199px) and (min-width:768px){
  .toparea .container > .row{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
  }
  .toparea [class*="col-"]{
    float:none !important;
    width:auto !important;
    flex:0 0 auto !important;
    padding:0 6px !important;
  }
  /* Keep email hidden on narrow tablet to prevent overflow */
  .toparea .col-md-5 .top-list li:first-child{ display:none !important; }
}

/* ──────────────────────────────────────────────────────────────
   WHY CHOOSE — belt-and-braces float:none + 3-col enforcement
   Bootstrap col-sm-6 applies float:left at ≥768px; some Safari
   versions honour this inside a flex container — kill it.
────────────────────────────────────────────────────────────── */
@media(min-width:768px){
  .tsps-why-row{
    display:flex !important;
    flex-wrap:wrap !important;
  }
  .tsps-why-row > [class*="col-"],
  .tsps-why-row > .col-sm-6,
  .tsps-why-row > .col-md-4{
    float:none !important;
    width:33.333% !important;
    flex:0 0 33.333% !important;
    max-width:33.333% !important;
    box-sizing:border-box !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   FAQ / ACCORDION — force green on ALL panel headings
   SmartSchool default is red; broader selectors cover all pages.
────────────────────────────────────────────────────────────── */
.panel-group .panel-default > .panel-heading,
.panel-group.accrodion2 .panel-default > .panel-heading,
.accrodion2 .panel-default > .panel-heading{
  background:linear-gradient(135deg,var(--g2) 0%,var(--g3) 100%) !important;
  border:none !important;
  border-radius:0 !important;
  padding:13px 18px !important;
}
.panel-group .panel-default > .panel-heading .panel-title,
.panel-group .panel-default > .panel-heading .panel-title a,
.accrodion2 .panel-default > .panel-heading .panel-title,
.accrodion2 .panel-default > .panel-heading .panel-title a{
  color:#fff !important;
  font-weight:600 !important;
  font-size:14px !important;
}
.panel-group .panel-default > .panel-heading:hover,
.accrodion2 .panel-default > .panel-heading:hover{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 100%) !important;
}
.panel-group .panel-default > .panel-heading:hover .panel-title,
.panel-group .panel-default > .panel-heading:hover .panel-title a{
  color:var(--g1) !important;
}

/* ──────────────────────────────────────────────────────────────
   COUNTDOWN / ACHIEVEMENTS — override SmartSchool's dark navy
   background and style counters to match our dark-green theme.
────────────────────────────────────────────────────────────── */
section.countdown_bg,
div.countdown_bg{
  background:var(--g1) !important;
  color:#fff !important;
}
.countdown_bg h2,
.countdown_bg h3,
.countdown_bg .count-head{
  color:#fff !important;
  font-family:'Playfair Display',serif !important;
  font-weight:800 !important;
}
.countdown_bg p,
.countdown_bg .count-desc{
  color:rgba(255,255,255,.72) !important;
  font-family:'Inter',sans-serif !important;
}
.countdown_bg .timer,
.countdown_bg .count,
.countdown_bg .counter-value{
  color:var(--gold2) !important;
  font-family:'Playfair Display',serif !important;
  font-weight:800 !important;
}
.countdown_bg h4,
.countdown_bg .count-title,
.countdown_bg .counter-label{
  color:rgba(255,255,255,.82) !important;
  font-size:12px !important;
  letter-spacing:.6px !important;
  text-transform:uppercase !important;
}
.countdown_bg i,
.countdown_bg .count-icon i{
  color:var(--gold2) !important;
}
.countdown_bg img{
  border-radius:var(--r-clay-sm) !important;
  box-shadow:0 8px 32px rgba(0,0,0,.3) !important;
}

/* ──────────────────────────────────────────────────────────────
   FOOTER — 3-col across all tablet widths (768-1199px)
────────────────────────────────────────────────────────────── */
@media(max-width:1199px) and (min-width:768px){
  .footer-grid-wrap{
    grid-template-columns:1fr 1fr 1fr !important;
    gap:24px !important;
  }
}