/* =========================================================
   SUPREME KIDS ACADEMY — School CMS Theme Stylesheet
   Re-skin of the existing PHP/CodeIgniter frontend views.
   No PHP logic lives here — presentation only.
   Sections: Tokens > Grid > Base > Header > Footer >
             Page components > Utilities > Media
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --navy-900:#071b3d; --navy-800:#0c2a5c; --navy-700:#123c7e; --navy-600:#1c4f9c;
  --navy-100:#e7edf9; --navy-050:#f4f7fd;
  --gold-600:#e0930f; --gold-500:#f7a82e; --gold-100:#fef1d8;
  --teal-600:#0f9d89; --teal-500:#22b8a0; --teal-100:#dcf7f1;
  --ink:#0b1730; --ink-soft:#48546e; --ink-faint:#7c88a3;
  --surface:#ffffff; --bg:#f6f8fc; --line:#e3e8f3;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-lg:22px; --radius-md:14px; --radius-sm:9px;
  --shadow-sm:0 2px 10px rgba(11,23,48,.07);
  --shadow-md:0 10px 30px rgba(11,23,48,.12);
  --shadow-lg:0 24px 60px rgba(11,23,48,.18);
  --ease:cubic-bezier(.22,.75,.32,1);
}

/* ---------- GRID (Bootstrap-class-compatible, vanilla) ---------- */
.container{width:100%; max-width:1200px; margin-inline:auto; padding-inline:15px;}
.row{display:flex; flex-wrap:wrap; margin-inline:-15px;}
[class*='col-']{width:100%; padding-inline:15px;}
.no-print{}
.float-right{float:right;}
.justify-content-center{justify-content:center;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.text-left{text-align:left;}
.d-none{display:none;}
.d-block{display:block;}
.col-12, .col-xs-12{flex:0 0 100%; max-width:100%;}
@media (min-width:576px){
  .col-sm-1{flex:0 0 8.333333%; max-width:8.333333%;} .col-sm-2{flex:0 0 16.666667%; max-width:16.666667%;}
  .col-sm-3{flex:0 0 25%; max-width:25%;} .col-sm-4{flex:0 0 33.333333%; max-width:33.333333%;}
  .col-sm-5{flex:0 0 41.666667%; max-width:41.666667%;} .col-sm-6{flex:0 0 50%; max-width:50%;}
  .col-sm-7{flex:0 0 58.333333%; max-width:58.333333%;} .col-sm-8{flex:0 0 66.666667%; max-width:66.666667%;}
  .col-sm-9{flex:0 0 75%; max-width:75%;} .col-sm-10{flex:0 0 83.333333%; max-width:83.333333%;}
  .col-sm-11{flex:0 0 91.666667%; max-width:91.666667%;} .col-sm-12{flex:0 0 100%; max-width:100%;}
  .offset-sm-0{margin-left:0%;} .offset-sm-1{margin-left:8.333333%;} .offset-sm-2{margin-left:16.666667%;}
  .offset-sm-3{margin-left:25%;} .offset-sm-4{margin-left:33.333333%;} .offset-sm-5{margin-left:41.666667%;}
  .offset-sm-6{margin-left:50%;} .offset-sm-7{margin-left:58.333333%;} .offset-sm-8{margin-left:66.666667%;}
  .offset-sm-9{margin-left:75%;} .offset-sm-10{margin-left:83.333333%;} .offset-sm-11{margin-left:91.666667%;}
}
@media (min-width:768px){
  .col-md-1{flex:0 0 8.333333%; max-width:8.333333%;} .col-md-2{flex:0 0 16.666667%; max-width:16.666667%;}
  .col-md-3{flex:0 0 25%; max-width:25%;} .col-md-4{flex:0 0 33.333333%; max-width:33.333333%;}
  .col-md-5{flex:0 0 41.666667%; max-width:41.666667%;} .col-md-6{flex:0 0 50%; max-width:50%;}
  .col-md-7{flex:0 0 58.333333%; max-width:58.333333%;} .col-md-8{flex:0 0 66.666667%; max-width:66.666667%;}
  .col-md-9{flex:0 0 75%; max-width:75%;} .col-md-10{flex:0 0 83.333333%; max-width:83.333333%;}
  .col-md-11{flex:0 0 91.666667%; max-width:91.666667%;} .col-md-12{flex:0 0 100%; max-width:100%;}
  .offset-md-0{margin-left:0%;} .offset-md-1{margin-left:8.333333%;} .offset-md-2{margin-left:16.666667%;}
  .offset-md-3{margin-left:25%;} .offset-md-4{margin-left:33.333333%;} .offset-md-5{margin-left:41.666667%;}
  .offset-md-6{margin-left:50%;} .offset-md-7{margin-left:58.333333%;} .offset-md-8{margin-left:66.666667%;}
  .offset-md-9{margin-left:75%;} .offset-md-10{margin-left:83.333333%;} .offset-md-11{margin-left:91.666667%;}
}
@media (min-width:992px){
  .col-lg-1{flex:0 0 8.333333%; max-width:8.333333%;} .col-lg-2{flex:0 0 16.666667%; max-width:16.666667%;}
  .col-lg-3{flex:0 0 25%; max-width:25%;} .col-lg-4{flex:0 0 33.333333%; max-width:33.333333%;}
  .col-lg-5{flex:0 0 41.666667%; max-width:41.666667%;} .col-lg-6{flex:0 0 50%; max-width:50%;}
  .col-lg-7{flex:0 0 58.333333%; max-width:58.333333%;} .col-lg-8{flex:0 0 66.666667%; max-width:66.666667%;}
  .col-lg-9{flex:0 0 75%; max-width:75%;} .col-lg-10{flex:0 0 83.333333%; max-width:83.333333%;}
  .col-lg-11{flex:0 0 91.666667%; max-width:91.666667%;} .col-lg-12{flex:0 0 100%; max-width:100%;}
  .offset-lg-0{margin-left:0%;} .offset-lg-1{margin-left:8.333333%;} .offset-lg-2{margin-left:16.666667%;}
  .offset-lg-3{margin-left:25%;} .offset-lg-4{margin-left:33.333333%;} .offset-lg-5{margin-left:41.666667%;}
  .offset-lg-6{margin-left:50%;} .offset-lg-7{margin-left:58.333333%;} .offset-lg-8{margin-left:66.666667%;}
  .offset-lg-9{margin-left:75%;} .offset-lg-10{margin-left:83.333333%;} .offset-lg-11{margin-left:91.666667%;}
}

/* ---------- BASE / RESET ---------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body); color:var(--ink); background:var(--bg); line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; padding:0;}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input,textarea,select{font:inherit;}
h1,h2,h3,h4,h5{font-family:var(--font-display); line-height:1.16; font-weight:600; letter-spacing:-.01em; color:var(--navy-900);}
hr{border:none; border-top:1px solid var(--line); margin-block:20px;}
:focus-visible{outline:3px solid var(--gold-500); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

/* Preloader */
#preloader{
  position:fixed; inset:0; z-index:9999; background:var(--navy-900);
  display:flex; align-items:center; justify-content:center; transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
#preloader::after{
  content:""; width:46px; height:46px; border-radius:50%; border:4px solid rgba(255,255,255,.2);
  border-top-color:var(--gold-500); animation:skaSpin .8s linear infinite;
}
#preloader.is-hidden{opacity:0; visibility:hidden; pointer-events:none;}
@keyframes skaSpin{to{transform:rotate(360deg);}}

/* Buttons + link CTA (used site-wide via .glbscl-link-btn, preserved as functional class hook) */
.glbscl-link-btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:100px;
  background:var(--gold-500); color:var(--navy-900) !important; font-weight:700; font-size:.94rem;
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow:0 10px 22px rgba(247,168,46,.32); border:none; cursor:pointer;
}
.glbscl-link-btn:hover{background:var(--gold-600); transform:translateY(-2px);}
.hvr-bs{}
.btn-navy{background:var(--navy-800); color:#fff;}
.btn-navy:hover{background:var(--navy-700);}
.btn-outline-white{border:1.5px solid rgba(255,255,255,.5); color:#fff; background:transparent; padding:13px 24px; border-radius:100px; font-weight:700; display:inline-flex; align-items:center; gap:8px;}
.btn-outline-white:hover{background:rgba(255,255,255,.12);}

/* ---------- HEADER ---------- */
.ska-topbar{background:var(--navy-900); color:#cdd7ee; font-size:.85rem;}
.ska-topbar-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding-block:9px;}
.ska-topbar-left{display:flex; flex-wrap:wrap; gap:18px;}
.ska-topbar-left span{display:inline-flex; align-items:center; gap:7px;}
.ska-topbar-left i{color:var(--gold-500);}
.ska-topbar-right{display:flex; flex-wrap:wrap; align-items:center; gap:16px;}
.ska-topbar-right .tb-link{font-weight:600; color:#fff; display:inline-flex; align-items:center; gap:6px;}
.ska-topbar-right .tb-link:hover{color:var(--gold-500);}
.ska-school-switch select.ska-select{background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:8px; padding:5px 10px; font-size:.82rem;}
.ska-school-switch select.ska-select option{color:#000;}

.ska-nav-wrap{background:#fff; box-shadow:var(--shadow-sm); position:sticky; top:0; z-index:200;}
.ska-nav-row{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px;}
.ska-logo img{height:52px; width:auto; object-fit:contain;}
.ska-menu-wrap{display:none;}
.ska-menu{display:flex; align-items:center; gap:2px;}
.ska-menu > li{position:relative;}
.ska-menu > li > a{
  display:flex; align-items:center; gap:6px; padding:12px 16px; font-weight:700; font-size:.94rem;
  color:var(--navy-900); border-radius:100px; transition:background .2s, color .2s;
}
.ska-menu > li > a:hover, .ska-menu > li.ska-open > a, .ska-menu > li > a.is-current{background:var(--navy-050); color:var(--navy-700);}
.ska-menu .icon{font-size:.7rem; transition:transform .2s;}
.ska-menu .drop{
  position:absolute; top:calc(100% + 8px); left:0; min-width:200px; background:#fff; border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); padding:8px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.ska-menu > li:hover .drop, .ska-menu > li.ska-open .drop{opacity:1; visibility:visible; transform:translateY(0);}
.ska-menu .drop li a{display:block; padding:10px 14px; border-radius:8px; font-size:.9rem; font-weight:600; color:var(--ink-soft);}
.ska-menu .drop li a:hover, .ska-menu .drop li a.is-current{background:var(--navy-050); color:var(--navy-800);}

.ska-hamburger{display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; border-radius:12px; background:var(--navy-050); flex:none;}
.ska-hamburger span{width:20px; height:2px; background:var(--navy-900); margin-inline:auto; border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease);}
.ska-hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.ska-hamburger.is-open span:nth-child(2){opacity:0;}
.ska-hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.ska-mobile-menu{position:fixed; inset:0; background:var(--navy-900); z-index:300; padding:26px 22px; overflow-y:auto; transform:translateX(100%); transition:transform .4s var(--ease);}
.ska-mobile-menu.is-open{transform:translateX(0);}
.ska-mobile-menu-top{display:flex; justify-content:flex-end; margin-bottom:18px;}
.ska-mobile-close{width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center;}
.ska-mobile-menu ul#menu-mobile > li > a, .ska-mobile-menu-list > li > a{display:flex; align-items:center; justify-content:space-between; color:#fff; font-family:var(--font-display); font-size:1.2rem; padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.1);}
.ska-mobile-menu-list > li > a.is-current{color:var(--gold-500);}
.ska-mobile-menu ul.drop{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
.ska-mobile-menu li.ska-open > ul.drop{max-height:400px;}
.ska-mobile-menu ul.drop li a{display:block; color:#b7c3de; padding:10px 14px; font-size:.98rem;}
.ska-mobile-menu ul.drop li a.is-current{color:var(--gold-500); font-weight:700;}

/* ---------- FOOTER ---------- */
.ska-footer{background:var(--navy-900); color:#c3cce4; padding-top:60px;}
.ska-footer-grid{padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1);}
.ska-footer .ska-logo img{height:52px; margin-bottom:14px; background:#fff; padding:6px; border-radius:10px;}
.ska-footer h2.fw-title{color:#fff; font-family:var(--font-display); font-size:1.1rem; margin-bottom:16px; margin-top:26px; font-weight:600;}
.ska-footer .links li, .ska-footer .address li{margin-bottom:11px; font-size:.92rem;}
.ska-footer .links a:hover{color:var(--gold-500);}
.ska-footer .address li{display:flex; gap:10px; align-items:flex-start;}
.ska-footer .address .icon{color:var(--gold-500); margin-top:3px;}
.ska-footer .social{display:flex; gap:10px; flex-wrap:wrap;}
.ska-footer .social a{width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; transition:background .25s, transform .25s;}
.ska-footer .social a:hover{background:var(--gold-500); color:var(--navy-900); transform:translateY(-3px);}
.footer-bottom-area{padding-block:20px; margin-top:36px; font-size:.85rem; color:#8695ba;}
.footer-bottom-area .copyright a{color:var(--gold-500);}

/* ---------- PAGE HERO / BREADCRUMB (replaces .page-breadcumb-area.bg-with-black) ---------- */
.page-breadcumb-area{
  background:linear-gradient(120deg, var(--navy-900), var(--navy-700)); color:#fff; padding-block:64px;
  position:relative; overflow:hidden;
}
.page-breadcumb-area::after{content:""; position:absolute; right:-60px; top:-60px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(247,168,46,.2), transparent 70%);}
.page-breadcumb-area .title{font-size:clamp(1.8rem,1.5rem + 2vw,2.6rem); color:#fff; position:relative;}
.page-breadcumb-area .links{display:flex; justify-content:center; gap:8px; margin-top:14px; font-size:.9rem; color:#b7c3de; position:relative; flex-wrap:wrap;}
.page-breadcumb-area .links li:not(:last-child)::after{content:"/"; margin-left:8px; color:var(--gold-500);}
.page-breadcumb-area .links a{color:#dfe6f6; font-weight:600;}
.page-breadcumb-area .links a:hover{color:var(--gold-500);}

/* Generic section spacing + section title pattern (Our <span class="inner">Facilities</span>) */
section{padding-block:60px;}
.section-title{max-width:640px; margin:0 auto 40px;}
.section-title .title{font-size:clamp(1.6rem,1.3rem + 1.6vw,2.3rem); color:var(--navy-900);}
.section-title .title .inner{color:var(--teal-600); position:relative;}
.section-title.white .title{color:#fff;}
.section-title.white .title .inner{color:var(--gold-500);}

/* ---------- HOME: HERO SLIDER (.slider-area, replaces owl-carousel) ---------- */
.slider-area{position:relative; height:min(88vh,780px); min-height:480px; overflow:hidden; padding:0;}
.slider-area .single-slider{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1s var(--ease), visibility 1s;}
.slider-area .single-slider.is-active{opacity:1; visibility:visible; z-index:2;}
.slider-area .single-slider .img{position:absolute; inset:0;}
.slider-area .single-slider .img img{width:100%; height:100%; object-fit:cover;}
.slider-area .single-slider .img::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,27,61,.92) 10%, rgba(7,27,61,.55) 55%, rgba(7,27,61,.2)), linear-gradient(0deg, rgba(7,27,61,.7), transparent 45%);}
.slider-area .content{position:relative; z-index:3; height:100%; display:flex; align-items:flex-end; padding-bottom:100px; color:#fff;}
.slider-area .content .container{max-width:640px;}
.slider-area .intro{color:var(--gold-500); font-weight:700; margin-bottom:10px; font-size:1.05rem;}
.slider-area .title{font-size:clamp(2rem,1.5rem + 3vw,3.4rem); color:#fff; margin-bottom:14px;}
.slider-area h3{color:#dfe6f6; font-size:1.05rem; font-weight:500; margin-top:6px; font-family:var(--font-body);}
.ska-slider-dots{position:absolute; z-index:5; left:0; right:0; bottom:26px; display:flex; justify-content:center; gap:10px;}
.ska-slider-dots button{width:30px; height:4px; border-radius:4px; background:rgba(255,255,255,.35); transition:background .3s, width .3s;}
.ska-slider-dots button.is-active{background:var(--gold-500); width:46px;}
.ska-slider-arrows{position:absolute; z-index:5; bottom:22px; right:24px; display:flex; gap:8px;}
.ska-slider-arrows button{width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.35); color:#fff; display:flex; align-items:center; justify-content:center; transition:background .2s;}
.ska-slider-arrows button:hover{background:rgba(255,255,255,.16);}

/* ---------- top-banner-area (about split: text + image) ---------- */
.top-banner-area{background:var(--surface);}
.top-banner-content .intro{color:var(--teal-600); font-weight:700; margin-bottom:10px;}
.top-banner-content .title{font-size:clamp(1.7rem,1.4rem + 1.6vw,2.4rem); margin-bottom:16px;}
.top-banner-content .text{color:var(--ink-soft); margin-bottom:20px;}
.top-banner-content .more{margin-top:18px;}
.top-banner-img img{border-radius:var(--radius-lg); box-shadow:var(--shadow-md); width:100%; height:100%; object-fit:cover; max-height:420px;}

/* ---------- latest-news-area / news cards ---------- */
.single-news{background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:transform .3s var(--ease), box-shadow .3s var(--ease); height:100%; display:flex; flex-direction:column;}
.single-news:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.single-news .img{height:190px; overflow:hidden;}
.single-news .img img{width:100%; height:100%; object-fit:cover;}
.single-news .content{padding:22px; display:flex; flex-direction:column; flex:1;}
.single-news .meta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:10px;}
.single-news .meta .info{display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--ink-faint); font-weight:600;}
.single-news .meta .icon{color:var(--gold-600);}
.single-news .title{font-size:1.12rem; margin-bottom:10px;}
.single-news .title a:hover{color:var(--teal-600);}
.single-news .text{color:var(--ink-soft); font-size:.92rem; flex:1;}
.single-news .more{margin-top:16px;}

/* ---------- facilities-area ---------- */
.facilities-area{background:var(--navy-050);}
.single-faclities{background:#fff; border-radius:var(--radius-lg); padding:32px 22px; text-align:center; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease); height:100%;}
.single-faclities:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.single-faclities .icon{width:64px; height:64px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; background:var(--teal-100); border-radius:50%;}
.single-faclities .icon img{width:32px; height:32px; object-fit:contain;}
.single-faclities .name{font-size:1.05rem; color:var(--navy-900);}

/* ---------- latest-event / single-event ---------- */
.single-event{background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:transform .3s var(--ease), box-shadow .3s var(--ease); height:100%; display:flex; flex-direction:column;}
.single-event:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.single-event .img{height:190px; overflow:hidden;}
.single-event .img img{width:100%; height:100%; object-fit:cover;}
.single-event .content{padding:22px; flex:1; display:flex; flex-direction:column;}
.single-event .title{font-size:1.1rem; margin-bottom:12px;}
.single-event .title a:hover{color:var(--teal-600);}
.single-event .list{margin-bottom:16px; flex:1;}
.single-event .list .info{display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--ink-soft); margin-bottom:8px;}
.single-event .list .icon{color:var(--gold-600); width:16px;}

/* ---------- achivement-area / counters ---------- */
.achivement-area{background:var(--navy-900); color:#fff; position:relative; overflow:hidden;}
.achivement-area::before{content:""; position:absolute; inset:0; opacity:.5; background:radial-gradient(600px 300px at 15% 20%, rgba(34,184,160,.18), transparent 60%), radial-gradient(600px 300px at 85% 80%, rgba(247,168,46,.14), transparent 60%);}
.single-achivement{position:relative; text-align:center;}
.single-achivement .icon img{width:46px; height:46px; margin:0 auto 14px; object-fit:contain;}
.single-achivement .counter{font-size:clamp(1.8rem,1.5rem + 1.6vw,2.6rem); color:var(--gold-500); font-family:var(--font-display);}
.single-achivement .name{color:#c3cce4; margin-top:6px;}

/* ---------- testimonial-area ---------- */
.testimonial-area{background:var(--navy-050);}
.single-testimonial{max-width:720px; margin:0 auto; text-align:center; padding:20px;}
.single-testimonial .auth-img{width:72px; height:72px; border-radius:50%; overflow:hidden; margin:0 auto 18px; border:3px solid var(--gold-100);}
.single-testimonial .auth-img img{width:100%; height:100%; object-fit:cover;}
.single-testimonial .name{font-size:1.1rem; margin-bottom:10px;}
.single-testimonial .text{color:var(--ink-soft); font-family:var(--font-display); font-size:1.2rem; line-height:1.5;}
.testimonial-carousel{position:relative;}
.testimonial-carousel{display:none;}
.testimonial-carousel.is-active{display:block; animation:skaFadeUp .5s var(--ease);}
@keyframes skaFadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
.ska-testi-dots{display:flex; justify-content:center; gap:8px; margin-top:20px;}
.ska-testi-dots button{width:9px; height:9px; border-radius:50%; background:var(--line); transition:background .3s, transform .3s;}
.ska-testi-dots button.is-active{background:var(--teal-600); transform:scale(1.25);}

/* ---------- apply-now-area ---------- */
.apply-now-area{padding-block:0 60px;}
.apply-now{background:linear-gradient(120deg, var(--navy-900), var(--navy-700)); border-radius:28px; padding:38px 34px; color:#fff; display:flex; align-items:center; box-shadow:var(--shadow-lg);}
.apply-now .title{color:#fff; font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem); margin:0;}
.apply-now .row{align-items:center; width:100%;}

/* ---------- why-choose-area (ported from the static template) ---------- */
.why-choose-area{background:var(--navy-050);}
.why-grid{display:grid; gap:32px; align-items:center;}
.why-media{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); height:380px;}
.why-media img{width:100%; height:100%; object-fit:cover;}
.why-float{position:absolute; right:16px; top:16px; background:rgba(7,27,61,.85); backdrop-filter:blur(6px); color:#fff; padding:14px 18px; border-radius:var(--radius-md); max-width:190px;}
.why-float strong{font-family:var(--font-display); color:var(--gold-500); font-size:1.3rem; display:block;}
.why-float span{font-size:.78rem; color:#dbe2f4;}
.why-list{display:flex; flex-direction:column; gap:2px;}
.why-item{display:flex; gap:16px; padding-block:16px; border-bottom:1px solid var(--line);}
.why-item:last-child{border-bottom:none;}
.why-ic{flex:none; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--teal-100); color:var(--teal-600);}
.why-item:nth-child(2n) .why-ic{background:var(--gold-100); color:var(--gold-600);}
.why-item h4{color:var(--navy-900); font-size:1.05rem; margin-bottom:4px; font-family:var(--font-display); font-weight:600;}
.why-item p{color:var(--ink-soft); font-size:.93rem;}

/* ---------- Admission process steps inside apply-now (ported from the static template) ---------- */
.apply-now .process-grid{display:grid; gap:22px; margin-top:30px; padding-top:26px; border-top:1px solid rgba(255,255,255,.16);}
.apply-now .process-step{position:relative; padding-left:50px;}
.apply-now .process-step .pn{position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%; background:var(--gold-500); color:var(--navy-900); font-family:var(--font-display); font-weight:700; display:flex; align-items:center; justify-content:center;}
.apply-now .process-step h4{color:#fff; margin-bottom:6px; font-size:1.02rem;}
.apply-now .process-step p{color:#c3cce4; font-size:.86rem;}
@media (min-width:768px){ .apply-now .process-grid{grid-template-columns:repeat(3,1fr);} }

.page-notice-area{background:var(--bg);}
.single-notice{background:var(--surface); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-sm); border:1px solid var(--line); height:100%; transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.single-notice:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.single-notice .title{font-size:1.15rem; margin-bottom:10px;}
.single-notice .title a:hover{color:var(--teal-600);}
.single-notice .date{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.85rem; color:var(--ink-faint); margin-bottom:10px; font-weight:600;}
.single-notice .date .icon{color:var(--gold-600);}
.single-notice .seprator{color:var(--line);}
.single-notice .meta{display:flex; gap:14px; margin-bottom:8px;}
.single-notice .meta .info{display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--ink-soft);}
.single-notice .meta .icon{color:var(--gold-600);}
.single-notice .text{color:var(--ink-soft); font-size:.93rem; margin-bottom:14px;}

/* ---------- Detail pages: content + sidebar (event/news/notice/holiday detail) ---------- */
.page-event-details-area, .page-news-details-area, .page-notice-details-area{background:var(--bg);}
.page-event-details, .page-news-details, .page-notice{background:var(--surface); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-sm); border:1px solid var(--line);}
.page-event-details .banner, .page-news-details .banner{border-radius:var(--radius-md); overflow:hidden; margin-bottom:24px; max-height:380px;}
.page-event-details .banner img, .page-news-details .banner img{width:100%; height:100%; object-fit:cover;}
.page-event-details .title, .page-news-details .title, .page-notice .title{font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem); margin-bottom:16px;}
.event-meta, .page-news-details .meta, .page-notice .meta{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.event-meta .info, .page-news-details .meta .info, .page-notice .meta .info{display:flex; align-items:center; gap:7px; font-size:.88rem; color:var(--ink-soft); font-weight:600;}
.event-meta .icon, .page-news-details .meta .icon, .page-notice .meta .icon{color:var(--gold-600);}
.info-title{font-size:1.15rem; margin-bottom:10px; margin-top:20px;}
.page-event-details .text, .page-news-details .text, .page-notice .text{color:var(--ink-soft);}
.share-news .social{display:flex; gap:10px; margin-top:16px;}
.share-news .social a{width:36px; height:36px; border-radius:50%; background:var(--navy-050); color:var(--navy-800); display:flex; align-items:center; justify-content:center;}

.sidebar-widget{background:var(--surface); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm); border:1px solid var(--line);}
.sidebar-title{font-size:1.1rem; margin-bottom:18px; padding-bottom:14px; border-bottom:2px solid var(--gold-500);}
.widget-event li, .widget-news li, .widget-notice li{padding-block:14px; border-bottom:1px solid var(--line);}
.widget-event li:last-child, .widget-news li:last-child, .widget-notice li:last-child{border-bottom:none;}
.widget-event li a, .widget-news li a{display:flex; gap:12px; align-items:flex-start;}
.widget-event .img, .widget-news .img{width:64px; height:64px; border-radius:10px; overflow:hidden; flex:none;}
.widget-event .img img, .widget-news .img img{width:100%; height:100%; object-fit:cover;}
.widget-event .content .title, .widget-news .content .title{display:block; font-size:.95rem; color:var(--navy-900); font-family:var(--font-display); font-weight:600; margin-bottom:6px;}
.widget-event .event-meta{display:flex; flex-direction:column; gap:3px; border:none; padding:0; margin:0;}
.widget-event .event-meta .info, .widget-news .meta .info{font-size:.76rem;}
.widget-notice li a .title{display:block; font-weight:700; color:var(--navy-900); margin-bottom:6px; font-size:.95rem;}
.widget-notice li a .date, .widget-notice li a span.date{display:block; font-size:.78rem; color:var(--ink-faint); margin-bottom:3px;}

/* ---------- page-teacher-area (staff + teacher grid) ---------- */
.page-teacher-area{background:var(--bg);}
.single-team{background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); text-align:center; transition:transform .3s var(--ease), box-shadow .3s var(--ease); height:100%;}
.single-team:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.single-team .st-upper{background:var(--navy-900); padding:12px; }
.single-team .st-upper .type{color:#fff; font-size:.95rem; font-weight:600;}
.single-team .st-img{height:210px; overflow:hidden;}
.single-team .st-img img{width:100%; height:100%; object-fit:cover;}
.single-team .st-content{padding:20px;}
.single-team .st-content .name{font-size:1.02rem; margin-bottom:12px; color:var(--teal-600);}
.single-team .social{display:flex; justify-content:center; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.single-team .social a{width:32px; height:32px; border-radius:50%; background:var(--navy-050); color:var(--navy-800); display:flex; align-items:center; justify-content:center; font-size:.82rem;}
.single-team .social a:hover{background:var(--gold-500);}
.single-team .contact{text-align:left; border-top:1px solid var(--line); padding-top:14px;}
.single-team .contact li{display:flex; gap:8px; align-items:flex-start; font-size:.82rem; color:var(--ink-soft); margin-bottom:8px;}
.single-team .contact .icon{color:var(--gold-600); margin-top:2px;}

/* ---------- page-gallery-area ---------- */
.page-gallery-area{background:var(--bg);}
.gallery-section-title{width:100%; margin-bottom:22px; margin-top:26px;}
.gallery-section-title .title{font-size:1.4rem;}
.gallery-section-title .text{color:var(--ink-soft); margin-top:6px;}
.gallery-carousel{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; width:100%; margin-bottom:20px;}
.single-gallery{position:relative; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); aspect-ratio:4/3; cursor:zoom-in;}
.single-gallery img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.single-gallery:hover img{transform:scale(1.07);}
.single-gallery .icon{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(7,27,61,.35); color:#fff; opacity:0; transition:opacity .3s;}
.single-gallery:hover .icon{opacity:1;}
.ska-lightbox{position:fixed; inset:0; z-index:500; background:rgba(7,27,61,.94); display:none; align-items:center; justify-content:center; padding:26px;}
.ska-lightbox.is-open{display:flex;}
.ska-lightbox img{max-width:92vw; max-height:86vh; border-radius:12px; box-shadow:var(--shadow-lg);}
.ska-lightbox-close{position:absolute; top:22px; right:26px; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.3rem;}
.ska-lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center;}
.ska-lightbox-prev{left:20px;} .ska-lightbox-next{right:20px;}

/* ---------- Admission printable form ---------- */
.page-contact-area{background:var(--bg);}
.admission-form{background:var(--surface); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-sm); border:1px solid var(--line);}
.admission-address h3{color:var(--navy-900); margin-bottom:6px;}
.admission-address div{color:var(--ink-soft); font-size:.95rem; margin-bottom:3px;}
.admission-address h4{margin-top:14px; color:var(--teal-600); font-size:1.1rem;}
.student-picture{display:flex; align-items:center; justify-content:center; width:110px; height:130px; border:2px dashed var(--line); border-radius:10px; color:var(--ink-faint); font-size:.8rem; margin-left:auto;}
.admission-form-title{color:var(--navy-900); font-size:1.05rem; margin-block:18px 10px; padding-bottom:8px; border-bottom:2px solid var(--gold-500); display:inline-block;}
.form-field{display:flex; gap:8px; border-bottom:1px dashed var(--line); padding-block:9px; font-size:.92rem;}
.form-field .field-title{color:var(--ink-soft); font-weight:700; white-space:nowrap;}
.form-field .field-value{flex:1; min-height:1.2em; border-bottom:1px solid var(--line);}
.margin-top{margin-top:24px;}
.admission-form .btn-info{background:var(--navy-800); color:#fff; border-radius:100px; padding:12px 26px; font-weight:700; display:inline-flex; gap:8px; align-items:center;}
.admission-form .btn-info:hover{background:var(--navy-700);}
@media print{ .no-print{display:none !important;} .ska-header, .ska-footer, .page-breadcumb-area{display:none !important;} }

/* ---------- Contact page ---------- */
.page-contact-area #mymap{width:100%; height:340px; border-radius:var(--radius-lg); margin-bottom:40px; box-shadow:var(--shadow-sm); background:var(--navy-050);}
.contact-form-area{background:var(--surface); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-sm); border:1px solid var(--line);}
.contact-page-title{font-size:1.3rem; margin-bottom:20px;}
.contact-input-box{margin-bottom:18px;}
.contact-input-box input, .contact-input-box textarea{
  width:100%; padding:13px 15px; border-radius:10px; border:1.5px solid var(--line); background:var(--navy-050); transition:border .2s, background .2s;
}
.contact-input-box input:focus, .contact-input-box textarea:focus{border-color:var(--teal-500); background:#fff; outline:none;}
.contact-input-box textarea{min-height:130px; resize:vertical;}
.contact-input-box input[type=submit]{width:auto; cursor:pointer;}
.single-contact-info{display:flex; gap:14px; align-items:flex-start; padding:18px 0;}
.single-contact-info .icon{width:44px; height:44px; border-radius:12px; background:var(--navy-050); color:var(--navy-800); display:flex; align-items:center; justify-content:center; flex:none;}
.single-contact-info .info{color:var(--ink-soft); font-size:.92rem;}
label.error{color:#e5484d; font-size:.8rem; margin-top:4px; display:block;}

/* ---------- Generic content page (page.php) ---------- */
.top-banner-area .text ul, .top-banner-area .text ol{padding-left:20px; margin-top:10px;}

/* ---------- Splash: multi-school selector ---------- */
.login-area{min-height:100vh; background:linear-gradient(120deg, var(--navy-900), var(--navy-700)); display:flex; align-items:center; padding-block:60px;}
.login-area-all-box{width:100%;}
.login-box-col{margin-bottom:24px;}
.single-login-box{background:#fff; border-radius:var(--radius-lg); padding:34px; box-shadow:var(--shadow-lg); text-align:center; height:100%;}
.single-login-box .title{font-size:1.3rem; margin-bottom:20px;}
.single-login-box .links{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

/* ---------- Message flash (layout/message.php) ---------- */
#message_div{padding:14px 18px; margin-block:20px; border-radius:12px; font-weight:600; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:var(--shadow-sm);}
#message_div.alert-success{background:var(--teal-600);}
#message_div.alert-error{background:#e5484d;}
#message_div.alert-warning{background:var(--gold-600);}
#message_div.alert-info{background:var(--navy-700);}
#message_div .remove{font-weight:700; cursor:pointer; opacity:.85;}
#message_div .remove:hover{opacity:1;}

/* ---------- Back to top ---------- */
.ska-back-top{position:fixed; right:20px; bottom:20px; z-index:150; width:46px; height:46px; border-radius:50%; background:var(--navy-900); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .3s, transform .3s, visibility .3s, background .25s;}
.ska-back-top.is-shown{opacity:1; visibility:visible; transform:translateY(0);}
.ska-back-top:hover{background:var(--gold-500); color:var(--navy-900);}

/* ---------- Checkmyresult iframe page ---------- */
.ska-result-frame{background:#fff;}
.ska-result-frame iframe{display:block; width:100%; min-height:80vh; border:0;}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ---------- MEDIA QUERIES ---------- */
@media (min-width:992px){
  .ska-menu-wrap{display:block;}
  .ska-hamburger{display:none;}
  .gallery-carousel{grid-template-columns:repeat(4,1fr);}
  #ska-desktop-apply{display:inline-flex !important; margin-left:6px;}
}
@media (max-width:991px){
  .slider-area .content{padding-bottom:70px;}
}
@media (max-width:575px){
  section{padding-block:44px;}
  .apply-now{flex-direction:column; align-items:flex-start; gap:18px;}
  .apply-now .row > div{width:100%;}
}