/* ==========================================================================
Deepthi School of Nursing — Design System
========================================================================== */
:root{
--cream:#fdf0d5;
--green:#0F8A5F;
--green-deep:#065F46;
--navy:#0F172A;
--purple:#2F218A;
--mint:#ECFDF5;
--mint-2:#F0FDF4;
--gold:#D4AF37;
--white:#FFFFFF;
--text:#475569;
--border:#E2E8F0;
--shadow-sm:0 4px 12px rgba(15,23,42,.06);
--shadow-md:0 10px 30px rgba(15,23,42,.08);
--shadow-lg:0 24px 60px rgba(15,23,42,.12);
--grad-hero:linear-gradient(135deg,#F0FDF4 0%,#ECFDF5 60%,#E0F2FE 100%);
--grad-cta:linear-gradient(120deg,#065F46 0%,#0F8A5F 55%,#2F218A 100%);
--grad-footer:linear-gradient(160deg,#0F172A 0%,#0b3b2e 65%,#065F46 100%);
--radius:14px;
--radius-lg:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:'Inter',system-ui,-apple-system,sans-serif;
color:var(--text);
background:var(--cream);
font-size:16px;
line-height:1.65;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
font-family:'Poppins','Manrope',sans-serif;
color:var(--navy);
font-weight:700;
line-height:1.25;
letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:1.25rem}
p{margin-bottom:1rem}
a{color:var(--green-deep);text-decoration:none;transition:.25s}
a:hover{color:var(--green)}
img{max-width:100%;height:auto;display:block}
/* ========= Top contact strip ========= */
.top-strip{
background:linear-gradient(90deg,var(--navy) 0%,var(--green-deep) 100%);
color:#cbd5e1;font-size:.85rem;padding:.55rem 0;
}
.top-strip a{color:#e2e8f0}
.top-strip a:hover{color:#fff}
.top-strip .item{display:inline-flex;align-items:center;gap:.4rem;margin-right:1.25rem}
.top-strip .item i{color:#34d399}
.top-strip .wa-btn{
background:#25D366;color:#fff;padding:.3rem .8rem;border-radius:30px;
font-weight:600;font-size:.8rem;display:inline-flex;align-items:center;gap:.35rem;
}
.top-strip .wa-btn:hover{background:#1ebe57;color:#fff;transform:translateY(-1px)}
/* ========= Navbar ========= */
.navbar-custom{
background:rgba(255,255,255,.92);
backdrop-filter:saturate(180%) blur(10px);
padding:.7rem 0;
border-bottom:1px solid var(--border);
transition:.3s;
position:sticky;top:0;z-index:1030;
}
.navbar-custom.scrolled{
box-shadow:0 6px 24px rgba(15,23,42,.08);
padding:.45rem 0;
}
.navbar-custom .navbar-brand{display:flex;align-items:center;gap:.7rem;font-weight:800;color:var(--navy)}
.navbar-custom .navbar-brand img{height:46px;width:auto}
.navbar-custom .brand-text{display:flex;flex-direction:column;line-height:1.1}
.navbar-custom .brand-text strong{font-family:'Poppins',sans-serif;font-size:1.05rem;color:var(--purple);letter-spacing:.02em}
.navbar-custom .brand-text small{font-size:.7rem;color:var(--green-deep);font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.navbar-custom .nav-link{
color:var(--navy)!important;font-weight:600;font-size:.95rem;
padding:.5rem .9rem!important;border-radius:8px;position:relative;
}
.navbar-custom .nav-link:hover{color:var(--green)!important;background:var(--mint)}
.navbar-custom .nav-link.active{color:var(--green-deep)!important;background:var(--mint)}
.navbar-custom .nav-link.active::after{
content:"";position:absolute;left:50%;bottom:2px;width:18px;height:3px;
background:var(--green);border-radius:3px;transform:translateX(-50%);
}
.btn-apply{
background:var(--green);color:#fff!important;font-weight:700;
padding:.55rem 1.2rem;border-radius:30px;border:none;
box-shadow:0 6px 18px rgba(15,138,95,.35);transition:.3s;
}
.btn-apply:hover{background:var(--green-deep);transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,138,95,.45)}
.navbar-toggler{border:none;padding:.35rem .55rem}
.navbar-toggler:focus{box-shadow:none}
/* ========= Buttons ========= */
.btn-primary-c{
background:var(--green);color:#fff;border:none;font-weight:700;
padding:.85rem 1.7rem;border-radius:30px;
box-shadow:0 10px 28px rgba(15,138,95,.35);transition:.3s;
display:inline-flex;align-items:center;gap:.5rem;
position:relative;overflow:hidden;
}
.btn-primary-c::after{
content:"";position:absolute;inset:0;
background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
transform:translateX(-100%);transition:.7s;
}
.btn-primary-c:hover{background:var(--green-deep);color:#fff;transform:translateY(-2px)}
.btn-primary-c:hover::after{transform:translateX(100%)}
.btn-outline-c{
background:#fff;color:var(--green-deep);border:2px solid var(--green);
font-weight:700;padding:.78rem 1.5rem;border-radius:30px;transition:.3s;
display:inline-flex;align-items:center;gap:.5rem;
}
.btn-outline-c:hover{background:var(--green);color:#fff;transform:translateY(-2px)}
.btn-wa{
background:#25D366;color:#fff;border:none;font-weight:700;
padding:.85rem 1.5rem;border-radius:30px;transition:.3s;
display:inline-flex;align-items:center;gap:.5rem;
box-shadow:0 10px 24px rgba(37,211,102,.35);
}
.btn-wa:hover{background:#1ebe57;color:#fff;transform:translateY(-2px)}
/* ========= Section ========= */
section{padding:5rem 0}
.section-eyebrow{
display:inline-block;font-size:.78rem;font-weight:700;
text-transform:uppercase;letter-spacing:.2em;color:var(--green-deep);
background:var(--mint);padding:.4rem 1rem;border-radius:30px;margin-bottom:1rem;
}
.section-title{margin-bottom:.6rem}
.section-sub{color:var(--text);max-width:640px;margin:0 auto 2.5rem;font-size:1.05rem}
.text-center .section-sub{margin-left:auto;margin-right:auto}
/* ========= Hero ========= */
.hero{
background:var(--grad-hero);
position:relative;padding:5.5rem 0 5rem;overflow:hidden;
}
.hero::before{
content:"";position:absolute;top:-200px;right:-200px;width:520px;height:520px;
background:radial-gradient(circle,rgba(47,33,138,.12),transparent 70%);border-radius:50%;
}
.hero::after{
content:"";position:absolute;bottom:-180px;left:-180px;width:460px;height:460px;
background:radial-gradient(circle,rgba(15,138,95,.14),transparent 70%);border-radius:50%;
}
.hero .container{position:relative;z-index:2}
.hero-badge{
display:inline-flex;align-items:center;gap:.5rem;background:#fff;
border:1px solid var(--border);padding:.45rem 1rem;border-radius:30px;
font-size:.82rem;font-weight:600;color:var(--green-deep);
box-shadow:var(--shadow-sm);margin-bottom:1.2rem;
}
.hero-badge i{color:var(--gold)}
.hero h1{margin-bottom:1.2rem}
.hero h1 .accent{color:var(--green-deep);background:linear-gradient(90deg,var(--green),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-lead{font-size:1.1rem;color:var(--text);margin-bottom:2rem;max-width:560px}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem}
.hero-stat{
background:#fff;border:1px solid var(--border);border-radius:14px;
padding:1rem;text-align:center;box-shadow:var(--shadow-sm);
}
.hero-stat strong{display:block;font-family:'Poppins',sans-serif;color:var(--navy);font-size:1rem}
.hero-stat span{font-size:.75rem;color:var(--text)}
.hero-visual{position:relative}
.hero-img{
border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);
border:6px solid #fff;
}
.hero-img img{aspect-ratio:4/5;object-fit:cover;width:100%}
.float-card{
position:absolute;background:#fff;border-radius:14px;padding:.8rem 1rem;
box-shadow:var(--shadow-md);display:flex;align-items:center;gap:.6rem;
font-weight:600;color:var(--navy);font-size:.85rem;
animation:float 6s ease-in-out infinite;
}
.float-card i{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--mint);color:var(--green-deep);font-size:1.1rem}
.float-card.fc-1{top:8%;left:-30px;animation-delay:0s}
.float-card.fc-2{top:32%;right:-20px;animation-delay:1.2s}
.float-card.fc-3{bottom:24%;left:-40px;animation-delay:2.4s}
.float-card.fc-4{bottom:6%;right:-10px;animation-delay:3.6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* ========= Trust cards ========= */
.trust-card{
background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
padding:2rem 1.6rem;height:100%;transition:.35s;position:relative;overflow:hidden;
}
.trust-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--green),var(--purple));transform:scaleX(0);transform-origin:left;transition:.4s}
.trust-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:transparent}
.trust-card:hover::before{transform:scaleX(1)}
.trust-icon{
width:58px;height:58px;border-radius:16px;background:var(--mint);
display:inline-flex;align-items:center;justify-content:center;
color:var(--green-deep);font-size:1.55rem;margin-bottom:1.1rem;
}
.trust-card h3{font-size:1.1rem;margin-bottom:.5rem}
.trust-card p{margin:0;font-size:.95rem}
/* ========= About preview ========= */
.about-img-wrap{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-md)}
.about-img-wrap img{aspect-ratio:5/4;object-fit:cover;width:100%}
.about-badge{
position:absolute;bottom:18px;left:18px;background:#fff;border-radius:14px;
padding:.9rem 1.1rem;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:.7rem;
}
.about-badge i{font-size:1.7rem;color:var(--green)}
.about-badge strong{display:block;color:var(--navy);font-family:'Poppins',sans-serif}
.about-badge small{color:var(--text);font-size:.78rem}
/* ========= Admissions preview cards ========= */
.adm-card{
background:linear-gradient(180deg,#fff,#fafffb);
border:1px solid var(--border);border-radius:var(--radius);
padding:1.4rem;height:100%;transition:.3s;
}
.adm-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:var(--green)}
.adm-card .label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green-deep);font-weight:700}
.adm-card .value{font-family:'Poppins',sans-serif;color:var(--navy);font-size:1.1rem;font-weight:700;margin-top:.4rem}
/* ========= Facilities grid (compact premium cards) ========= */
.facility-card{
background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
padding:1.5rem;height:100%;display:flex;gap:1rem;align-items:flex-start;
transition:.35s;position:relative;overflow:hidden;
}
.facility-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:linear-gradient(90deg,var(--green),var(--purple));
transform:scaleX(0);transform-origin:left;transition:.4s;
}
.facility-card:hover{
transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;
}
.facility-card:hover::before{transform:scaleX(1)}
.facility-card .fc-icon{
width:52px;height:52px;border-radius:14px;flex-shrink:0;
background:linear-gradient(135deg,var(--green),var(--green-deep));
color:#fff;display:inline-flex;align-items:center;justify-content:center;
font-size:1.35rem;box-shadow:0 8px 18px rgba(15,138,95,.25);
}
.facility-card .fc-body{flex:1}
.facility-card .fc-body h4{
font-family:'Poppins',sans-serif;color:var(--navy);font-size:1.05rem;margin:0 0 .35rem;
}
.facility-card .fc-body p{margin:0;font-size:.9rem;color:var(--text);line-height:1.55}
@media(max-width:576px){
.facility-card{padding:1.2rem;gap:.8rem}
.facility-card .fc-icon{width:46px;height:46px;font-size:1.2rem}
}
/* ========= Hospital cards ========= */
.hospital-card{
background:#fff;border:1px solid var(--border);border-radius:var(--radius);
padding:1.3rem;height:100%;transition:.3s;display:flex;gap:.9rem;align-items:flex-start;
}
.hospital-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--green)}
.hospital-card i{width:42px;height:42px;flex-shrink:0;border-radius:12px;background:var(--mint);color:var(--green-deep);display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem}
.hospital-card strong{color:var(--navy);font-family:'Poppins',sans-serif;display:block;font-size:1rem}
.hospital-card span{font-size:.85rem;color:var(--text)}
/* ========= Awards ========= */
.award-card{
background:linear-gradient(160deg,#fff,#FFFBEB);
border:1px solid #FDE68A;border-radius:var(--radius-lg);
padding:1.8rem;height:100%;transition:.3s;position:relative;overflow:hidden;
}
.award-card::before{content:"";position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(212,175,55,.25),transparent);border-radius:50%}
.award-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(212,175,55,.2)}
.award-card .medal{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#D4AF37,#F1C972);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.7rem;margin-bottom:1rem;box-shadow:0 8px 18px rgba(212,175,55,.4)}
.award-card h4{font-family:'Poppins',sans-serif;color:var(--navy);margin-bottom:.4rem}
.award-card p{margin:0;font-size:.95rem}
/* ========= CTA section ========= */
.cta-section{
background:var(--grad-cta);color:#fff;border-radius:0;padding:5rem 0;position:relative;overflow:hidden;
}
.cta-section::before{content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);border-radius:50%}
.cta-section h2{color:#fff}
.cta-section p{color:rgba(255,255,255,.92);font-size:1.1rem}
.cta-section .btn-outline-c{background:transparent;color:#fff;border-color:#fff}
.cta-section .btn-outline-c:hover{background:#fff;color:var(--green-deep)}
/* ========= Page banner ========= */
.page-banner{
background:var(--grad-hero);
padding:5rem 0 3.5rem;text-align:center;position:relative;overflow:hidden;
border-bottom:1px solid var(--border);
}
.page-banner::before{content:"";position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(15,138,95,.1),transparent 70%);border-radius:50%}
.page-banner h1{margin-bottom:.7rem}
.page-banner p{font-size:1.1rem;max-width:600px;margin:0 auto 1rem}
.breadcrumb-c{display:inline-flex;gap:.4rem;font-size:.88rem;font-weight:500;color:var(--text);background:#fff;padding:.45rem 1rem;border-radius:30px;border:1px solid var(--border)}
.breadcrumb-c a{color:var(--green-deep)}
.breadcrumb-c .sep{color:var(--border)}
/* ========= Chairperson section ========= */
.chair-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);position:relative}
.chair-img img{aspect-ratio:4/5;object-fit:cover;width:100%}
.chair-quote{font-style:italic;color:var(--green-deep);font-size:1.05rem;border-left:3px solid var(--green);padding-left:1rem;margin:1.2rem 0}
/* ========= Mission Vision ========= */
.mv-card{
background:linear-gradient(135deg,#fff,var(--mint-2));
border:1px solid var(--border);border-radius:var(--radius-lg);
padding:2.2rem;height:100%;
}
.mv-card .mv-icon{width:64px;height:64px;border-radius:18px;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.7rem;margin-bottom:1rem;box-shadow:0 10px 22px rgba(15,138,95,.3)}
.mv-card h3{font-size:1.5rem;margin-bottom:.7rem}
/* ========= Values cards ========= */
.value-card{
text-align:center;background:#fff;border:1px solid var(--border);
border-radius:var(--radius);padding:1.5rem 1rem;transition:.3s;height:100%;
}
.value-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:var(--green)}
.value-card .ic{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--purple));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:.9rem}
.value-card h4{font-size:1rem;margin:0;color:var(--navy);font-family:'Poppins',sans-serif}
/* ========= Why-choose list ========= */
.why-list .why-item{
display:flex;gap:.9rem;align-items:flex-start;padding:1rem 0;
border-bottom:1px dashed var(--border);
}
.why-list .why-item:last-child{border-bottom:none}
.why-list i{color:var(--green);font-size:1.3rem;margin-top:2px}
.why-list strong{display:block;color:var(--navy);font-family:'Poppins',sans-serif}
/* ========= Timeline ========= */
.timeline{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-top:2rem}
.timeline::before{content:"";position:absolute;top:30px;left:5%;right:5%;height:3px;background:linear-gradient(90deg,var(--green),var(--purple));border-radius:3px;z-index:0}
.tl-step{position:relative;z-index:1;text-align:center;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem .8rem;transition:.3s}
.tl-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--green)}
.tl-num{width:46px;height:46px;border-radius:50%;background:#fff;border:3px solid var(--green);color:var(--green-deep);font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin:-30px auto 1rem;box-shadow:0 6px 14px rgba(15,138,95,.2)}
.tl-step h5{font-size:.95rem;font-family:'Poppins',sans-serif;color:var(--navy);margin:0}
@media(max-width:768px){
.timeline{grid-template-columns:1fr;gap:.6rem}
.timeline::before{display:none}
.tl-num{margin:0 auto 0.6rem}
}
/* ========= Checklist ========= */
.checklist{list-style:none;padding:0;margin:0}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem 1rem;border-bottom:1px solid var(--border)}
.checklist li:last-child{border-bottom:none}
.checklist i{color:var(--green);font-size:1.15rem;margin-top:3px;flex-shrink:0}
.checklist-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
/* ========= Notice box ========= */
.notice-box{
background:linear-gradient(120deg,#FEF3C7,#FFFBEB);
border:1px solid #FDE68A;border-left:6px solid var(--gold);
border-radius:var(--radius);padding:1.5rem 1.8rem;display:flex;gap:1rem;align-items:flex-start;
}
.notice-box i{font-size:1.7rem;color:#B45309;flex-shrink:0}
.notice-box strong{color:var(--navy);font-family:'Poppins',sans-serif;display:block;margin-bottom:.3rem}
.notice-box p{margin:0;color:#78350F}
/* ========= Menu cards ========= */
.menu-card{
background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
padding:1.6rem;height:100%;transition:.3s;border-top:4px solid var(--green);
}
.menu-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.menu-card h4{display:flex;align-items:center;gap:.6rem;color:var(--navy);font-family:'Poppins',sans-serif;margin-bottom:.9rem}
.menu-card h4 i{color:var(--green)}
.menu-card ul{list-style:none;padding:0;margin:0;color:var(--text);font-size:.95rem}
.menu-card li{padding:.3rem 0;border-bottom:1px dashed var(--border)}
.menu-card li:last-child{border:none}
/* ========= Contact ========= */
.contact-card{
background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
padding:1.8rem;text-align:center;height:100%;transition:.3s;
}
.contact-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--green)}
.contact-card .ic{width:62px;height:62px;border-radius:50%;background:var(--mint);color:var(--green-deep);display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:1rem}
.contact-card h4{font-family:'Poppins',sans-serif;color:var(--navy);margin-bottom:.4rem}
.contact-card a{color:var(--text);font-weight:500;word-break:break-word}
.contact-card a:hover{color:var(--green)}
.form-control,.form-select{
border:1.5px solid var(--border);border-radius:12px;padding:.75rem 1rem;
font-size:.95rem;transition:.25s;
}
.form-control:focus,.form-select:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(15,138,95,.12)}
.form-label{font-weight:600;color:var(--navy);font-size:.9rem;margin-bottom:.4rem}
.contact-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.2rem;box-shadow:var(--shadow-sm)}
.map-placeholder{
border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(135deg,var(--mint),#E0F2FE);
border:1px solid var(--border);height:340px;display:flex;align-items:center;justify-content:center;
flex-direction:column;text-align:center;padding:1rem;color:var(--green-deep);
}
.map-placeholder i{font-size:3rem;margin-bottom:.7rem}
/* ========= Footer ========= */
.site-footer{
background:var(--grad-footer);color:#cbd5e1;padding:4rem 0 1.5rem;margin-top:0;
}
.site-footer h5{color:#fff;font-family:'Poppins',sans-serif;font-size:1.05rem;margin-bottom:1.1rem;position:relative;padding-bottom:.6rem}
.site-footer h5::after{content:"";position:absolute;bottom:0;left:0;width:36px;height:3px;background:var(--green);border-radius:3px}
.site-footer a{color:#cbd5e1;display:inline-block;padding:.2rem 0}
.site-footer a:hover{color:#fff;transform:translateX(3px)}
.site-footer .foot-brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.site-footer .foot-brand img{height:50px;background:#fff;padding:4px;border-radius:10px}
.site-footer .foot-brand strong{color:#fff;font-family:'Poppins',sans-serif;font-size:1.1rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer .copyright{border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;margin-top:2.5rem;text-align:center;font-size:.88rem}
/* ========= WhatsApp floating ========= */
.wa-float{
position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:50%;
background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
font-size:1.9rem;z-index:1040;box-shadow:0 12px 28px rgba(37,211,102,.45);
transition:.3s;
}
.wa-float:hover{background:#1ebe57;color:#fff;transform:scale(1.05)}
.wa-float::before{
content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;
z-index:-1;animation:pulse 2s infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.wa-tooltip{
position:absolute;right:72px;background:var(--navy);color:#fff;
padding:.45rem .85rem;border-radius:8px;font-size:.85rem;white-space:nowrap;
opacity:0;pointer-events:none;transition:.3s;font-weight:600;
}
.wa-float:hover .wa-tooltip{opacity:1;transform:translateX(-4px)}
/* ========= Back to top ========= */
.back-top{
position:fixed;bottom:24px;left:24px;width:46px;height:46px;border-radius:12px;
background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;
font-size:1.2rem;z-index:1040;opacity:0;pointer-events:none;transition:.3s;
box-shadow:var(--shadow-md);border:none;
}
.back-top.show{opacity:1;pointer-events:auto}
.back-top:hover{background:var(--green-deep);transform:translateY(-3px);color:#fff}
/* ========= Scroll reveal ========= */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
/* ========= Responsive ========= */
@media (max-width:992px){
.hero{padding:3.5rem 0}
.hero-visual{margin-top:3rem}
.hero-stats{grid-template-columns:repeat(2,1fr)}
.float-card.fc-1,.float-card.fc-3{left:10px}
.float-card.fc-2,.float-card.fc-4{right:10px}
section{padding:3.5rem 0}
.top-strip .item:not(:first-child){display:none}
.top-strip .wa-btn{display:inline-flex}
}
@media (max-width:576px){
.hero-stats{grid-template-columns:repeat(2,1fr);gap:.6rem}
.hero-stat{padding:.7rem}
.float-card{font-size:.75rem;padding:.55rem .7rem}
.wa-float{width:54px;height:54px;font-size:1.6rem;bottom:18px;right:18px}
.back-top{bottom:18px;left:18px;width:42px;height:42px}
.wa-tooltip{display:none}
.contact-form{padding:1.4rem}
.cta-section{padding:3.5rem 0}
.navbar-custom .brand-text strong{font-size:.95rem}
.navbar-custom .brand-text small{font-size:.6rem}
}
/* ==========================================================================
v2 Upgrades — Premium polish
========================================================================== */
/* Admissions-open strip */
.adm-strip{
background:linear-gradient(120deg,#065F46 0%,#0F8A5F 60%,#2F218A 100%);
color:#fff;padding:1.1rem 0;position:relative;overflow:hidden;
}
.adm-strip::before{
content:"";position:absolute;inset:0;
background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 12px,transparent 12px 24px);
pointer-events:none;
}
.adm-strip .wrap{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.adm-strip .pulse-dot{display:inline-block;width:10px;height:10px;background:#FDE68A;border-radius:50%;margin-right:.5rem;box-shadow:0 0 0 0 rgba(253,230,138,.7);animation:apulse 1.8s infinite}
@keyframes apulse{0%{box-shadow:0 0 0 0 rgba(253,230,138,.7)}70%{box-shadow:0 0 0 14px rgba(253,230,138,0)}100%{box-shadow:0 0 0 0 rgba(253,230,138,0)}}
.adm-strip h4{color:#fff;margin:0;font-size:1.05rem;font-weight:700}
.adm-strip p{margin:0;color:rgba(255,255,255,.85);font-size:.88rem}
.adm-strip .actions{display:flex;flex-wrap:wrap;gap:.5rem}
.adm-strip .mini-btn{
background:#fff;color:var(--green-deep);font-weight:700;font-size:.85rem;
padding:.55rem 1rem;border-radius:30px;display:inline-flex;align-items:center;gap:.4rem;border:none;transition:.25s;
}
.adm-strip .mini-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.18);color:var(--green-deep)}
.adm-strip .mini-btn.wa{background:#25D366;color:#fff}
.adm-strip .mini-btn.wa:hover{background:#1ebe57;color:#fff}
.adm-strip .mini-btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.adm-strip .mini-btn.ghost:hover{background:#fff;color:var(--green-deep)}
/* Parent-focused section */
.parent-section{background:linear-gradient(180deg,#fff,var(--mint-2))}
.parent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:768px){.parent-grid{grid-template-columns:1fr}}
.parent-card{
background:#fff;border:1px solid var(--border);border-radius:18px;
padding:1.4rem;display:flex;gap:.9rem;align-items:flex-start;transition:.3s;
}
.parent-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#bbf7d0}
.parent-card .pc-ic{
flex-shrink:0;width:44px;height:44px;border-radius:12px;
background:linear-gradient(135deg,var(--green),var(--green-deep));color:#fff;
display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;
box-shadow:0 6px 14px rgba(15,138,95,.25);
}
.parent-card strong{display:block;color:var(--navy);font-family:'Poppins',sans-serif;font-size:1rem;margin-bottom:.2rem}
.parent-card p{margin:0;font-size:.9rem;color:var(--text)}
/* Brochure card */
.brochure-card{
background:linear-gradient(135deg,#065F46 0%,#0F8A5F 70%,#2F218A 100%);
border-radius:22px;padding:2rem;color:#fff;position:relative;overflow:hidden;
display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;justify-content:space-between;
box-shadow:0 20px 48px rgba(6,95,70,.25);
}
.brochure-card::before{
content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;
background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);border-radius:50%;
}
.brochure-card::after{
content:"";position:absolute;left:-50px;bottom:-50px;width:200px;height:200px;
background:radial-gradient(circle,rgba(212,175,55,.25),transparent 70%);border-radius:50%;
}
.brochure-card .bc-ic{
width:74px;height:74px;border-radius:18px;background:rgba(255,255,255,.15);
display:inline-flex;align-items:center;justify-content:center;font-size:2.1rem;color:#fff;
flex-shrink:0;border:1px solid rgba(255,255,255,.2);
}
.brochure-card .bc-text{flex:1;min-width:240px;position:relative;z-index:1}
.brochure-card h3{color:#fff;margin:0 0 .35rem;font-size:1.35rem}
.brochure-card p{margin:0;color:rgba(255,255,255,.88);font-size:.95rem}
.brochure-card .bc-actions{display:flex;flex-wrap:wrap;gap:.6rem;position:relative;z-index:1}
.brochure-card .bc-btn{
background:#fff;color:var(--green-deep);font-weight:700;padding:.7rem 1.2rem;
border-radius:30px;display:inline-flex;align-items:center;gap:.45rem;border:none;transition:.25s;
}
.brochure-card .bc-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.25);color:var(--green-deep)}
.brochure-card .bc-btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.brochure-card .bc-btn.ghost:hover{background:#fff;color:var(--green-deep)}
/* Banner buttons polish */
.page-banner .btn-banner{
background:#fff;color:var(--green-deep);font-weight:700;padding:.7rem 1.2rem;
border-radius:30px;display:inline-flex;align-items:center;gap:.45rem;border:none;
box-shadow:0 8px 22px rgba(15,138,95,.18);transition:.25s;
}
.page-banner .btn-banner:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,138,95,.28);color:var(--green-deep)}
.page-banner .btn-banner.ghost{background:transparent;color:var(--green-deep);border:1.5px solid var(--green);box-shadow:none}
.page-banner .btn-banner.ghost:hover{background:var(--green);color:#fff}
/* FAQ accordion */
.faq-wrap{max-width:820px;margin:0 auto}
.faq-item{
background:#fff;border:1px solid var(--border);border-radius:16px;margin-bottom:.8rem;
overflow:hidden;transition:.3s;
}
.faq-item:hover{border-color:#bbf7d0;box-shadow:var(--shadow-sm)}
.faq-item summary{
list-style:none;cursor:pointer;padding:1.1rem 1.3rem;display:flex;align-items:center;
justify-content:space-between;gap:1rem;font-family:'Poppins',sans-serif;
font-weight:600;color:var(--navy);font-size:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
content:"\F282";font-family:'bootstrap-icons';color:var(--green-deep);
font-size:1.1rem;transition:.3s;flex-shrink:0;
}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item .faq-body{padding:0 1.3rem 1.2rem;color:var(--text);font-size:.95rem;line-height:1.7}
/* Rank cards (Awards) */
.rank-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
@media(max-width:992px){.rank-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.rank-grid{grid-template-columns:1fr}}
.rank-card{
position:relative;border-radius:22px;padding:2rem 1.5rem 1.6rem;text-align:center;
background:#fff;border:1px solid var(--border);overflow:hidden;transition:.35s;
}
.rank-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(15,23,42,.12)}
.rank-card .ribbon{
position:absolute;top:14px;right:-38px;transform:rotate(35deg);
background:var(--navy);color:#fff;font-size:.7rem;letter-spacing:.18em;
font-weight:700;padding:.25rem 3rem;text-transform:uppercase;
}
.rank-card .medal-lg{
width:78px;height:78px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
font-size:2.1rem;color:#fff;margin-bottom:1rem;
box-shadow:0 12px 24px rgba(0,0,0,.2);
}
.rank-gold .medal-lg{background:linear-gradient(135deg,#FFD86B,#D4AF37 60%,#A37C1C)}
.rank-gold{background:linear-gradient(160deg,#FFFBEB,#fff);border-color:#FDE68A}
.rank-silver .medal-lg{background:linear-gradient(135deg,#F1F5F9,#CBD5E1 60%,#94A3B8)}
.rank-silver{background:linear-gradient(160deg,#F8FAFC,#fff);border-color:#E2E8F0}
.rank-bronze .medal-lg{background:linear-gradient(135deg,#F4B488,#C97240 60%,#8C4A1F)}
.rank-bronze{background:linear-gradient(160deg,#FFF7ED,#fff);border-color:#FED7AA}
.rank-pass .medal-lg{background:linear-gradient(135deg,var(--green),var(--green-deep))}
.rank-pass{background:linear-gradient(160deg,var(--mint-2),#fff);border-color:#BBF7D0}
.rank-card h4{font-family:'Poppins',sans-serif;color:var(--navy);font-size:1.15rem;margin:0 0 .5rem}
.rank-card p{margin:0;font-size:.92rem;color:var(--text)}
.rank-card .rank-no{
display:inline-block;font-family:'Poppins',sans-serif;font-weight:800;font-size:.72rem;
letter-spacing:.22em;text-transform:uppercase;color:var(--green-deep);
background:rgba(15,138,95,.08);padding:.3rem .8rem;border-radius:30px;margin-bottom:.8rem;
}
/* Rule group cards */
.rule-group{
background:#fff;border:1px solid var(--border);border-radius:18px;padding:1.6rem;
height:100%;transition:.3s;border-top:4px solid var(--green);
}
.rule-group:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.rule-group h4{
display:flex;align-items:center;gap:.6rem;color:var(--navy);font-family:'Poppins',sans-serif;
margin-bottom:1rem;font-size:1.1rem;
}
.rule-group h4 .gi{
width:38px;height:38px;border-radius:11px;background:var(--mint);color:var(--green-deep);
display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.rule-group ul{list-style:none;padding:0;margin:0}
.rule-group li{display:flex;gap:.6rem;padding:.55rem 0;font-size:.92rem;color:var(--text);border-bottom:1px dashed var(--border)}
.rule-group li:last-child{border:none}
.rule-group li i{color:var(--green);flex-shrink:0;margin-top:3px}
.rule-group.rg-academic{border-top-color:var(--purple)}
.rule-group.rg-academic h4 .gi{background:#EEF2FF;color:var(--purple)}
.rule-group.rg-hostel{border-top-color:var(--gold)}
.rule-group.rg-hostel h4 .gi{background:#FFFBEB;color:#B45309}
.rule-group.rg-fee{border-top-color:#DC2626}
.rule-group.rg-fee h4 .gi{background:#FEF2F2;color:#B91C1C}
/* Mobile bottom action bar */
.mobile-actions{
display:none;position:fixed;left:0;right:0;bottom:0;z-index:1050;
background:#fff;border-top:1px solid var(--border);
box-shadow:0 -8px 22px rgba(15,23,42,.08);
padding:.5rem;
}
.mobile-actions .row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.mobile-actions a{
display:flex;align-items:center;justify-content:center;gap:.35rem;
padding:.65rem .4rem;border-radius:12px;font-weight:700;font-size:.85rem;
text-decoration:none;transition:.2s;
}
.mobile-actions .ma-call{background:var(--green);color:#fff}
.mobile-actions .ma-wa{background:#25D366;color:#fff}
.mobile-actions .ma-apply{background:var(--navy);color:#fff}
.mobile-actions a:active{transform:scale(.97)}
@media(max-width:768px){
.mobile-actions{display:block}
body{padding-bottom:72px}
.wa-float{bottom:88px}
.back-top{bottom:88px}
}
/* About: enhanced chairperson quote */
.chair-img::after{
content:"";position:absolute;inset:auto 0 -10px 0;height:60px;
background:linear-gradient(0deg,rgba(15,23,42,.5),transparent);
pointer-events:none;
}
.chair-img .chair-tag{
position:absolute;left:14px;bottom:14px;color:#fff;font-family:'Poppins',sans-serif;
font-weight:600;font-size:.9rem;letter-spacing:.02em;z-index:2;
display:flex;align-items:center;gap:.5rem;
}
.chair-img .chair-tag i{color:var(--gold)}
/* Form validation */
.form-control.is-invalid,.form-select.is-invalid{border-color:#DC2626;box-shadow:0 0 0 4px rgba(220,38,38,.1)}
.field-error{color:#B91C1C;font-size:.8rem;margin-top:.25rem;display:none}
.field-error.show{display:block}
.form-success{
display:none;background:#ECFDF5;border:1px solid #BBF7D0;color:#065F46;
padding:.85rem 1rem;border-radius:12px;font-size:.92rem;
}
.form-success.show{display:flex;align-items:center;gap:.5rem}
/* Footer enhancements */
.site-footer .recognition-pill{
display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);padding:.35rem .75rem;border-radius:30px;
font-size:.78rem;color:#fff;margin-top:.5rem;
}
.site-footer .recognition-pill i{color:var(--gold)}
.site-footer .credit{color:#94a3b8;font-size:.82rem;margin-top:.4rem}
/* Info note callout */
.info-note{
background:linear-gradient(90deg,#ECFDF5,#fff);
border:1px solid #BBF7D0;border-left:4px solid var(--green);
border-radius:.7rem;padding:.85rem 1rem;color:var(--ink);
font-size:.92rem;display:flex;align-items:flex-start;gap:.6rem
}
.info-note i{color:var(--green);font-size:1.1rem;margin-top:2px}
/* ==========================================================================
v3 Polish — client-ready
========================================================================== */
/* Admissions sidebar quick-enquiry card */
.enquiry-card{
position:sticky;top:96px;
background:linear-gradient(160deg,#fff 0%,var(--mint-2) 100%);
border:1px solid #BBF7D0;border-radius:22px;padding:1.6rem;
box-shadow:0 18px 40px rgba(15,138,95,.12);
}
.enquiry-card .ec-head{display:flex;align-items:center;gap:.85rem;margin-bottom:.9rem}
.enquiry-card .ec-ic{
width:50px;height:50px;border-radius:14px;flex-shrink:0;
background:linear-gradient(135deg,var(--green),var(--green-deep));color:#fff;
display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem;
box-shadow:0 8px 18px rgba(15,138,95,.3);
}
.enquiry-card h3{font-family:'Poppins',sans-serif;color:var(--navy);font-size:1.15rem;margin:0}
.enquiry-card .ec-pill{
display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;
color:var(--green-deep);background:rgba(15,138,95,.1);padding:.2rem .6rem;border-radius:30px;
letter-spacing:.08em;text-transform:uppercase;margin-top:.25rem;
}
.enquiry-card .ec-dot{width:8px;height:8px;background:var(--green);border-radius:50%;animation:apulse 1.8s infinite}
.enquiry-card > p{font-size:.92rem;color:var(--text);margin-bottom:1rem}
.enquiry-card .ec-actions{display:grid;gap:.5rem;margin-bottom:.9rem}
.enquiry-card .ec-btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
padding:.75rem 1rem;border-radius:12px;font-weight:700;font-size:.92rem;
color:#fff;transition:.25s;border:none;
}
.enquiry-card .ec-btn:hover{transform:translateY(-2px);color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.15)}
.enquiry-card .ec-call{background:var(--green)}
.enquiry-card .ec-wa{background:#25D366}
.enquiry-card .ec-mail{background:var(--navy)}
.enquiry-card .ec-foot{
font-size:.8rem;color:var(--green-deep);background:#fff;border:1px dashed #BBF7D0;
border-radius:10px;padding:.55rem .75rem;display:flex;align-items:center;gap:.45rem;
}
.enquiry-card .ec-foot i{color:var(--green)}
@media(max-width:991px){.enquiry-card{position:static;margin-top:1rem}}
/* Polished map card */
.map-card{
height:auto;min-height:340px;padding:2rem 1.4rem;
background:linear-gradient(160deg,#ECFDF5 0%,#E0F2FE 100%);
position:relative;
}
.map-card::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(circle at 20% 20%,rgba(15,138,95,.12),transparent 60%),
radial-gradient(circle at 80% 80%,rgba(47,33,138,.1),transparent 60%);
}
.map-card .mp-ic{
width:64px;height:64px;border-radius:50%;background:#fff;color:var(--green-deep);
display:inline-flex;align-items:center;justify-content:center;font-size:1.8rem;
margin-bottom:1rem;box-shadow:0 10px 22px rgba(15,138,95,.18);position:relative;z-index:1;
}
.map-card strong{font-family:'Poppins',sans-serif;color:var(--navy);font-size:1.15rem;display:block;margin-bottom:.4rem;position:relative;z-index:1}
.map-card p{color:var(--text);font-size:.92rem;max-width:320px;margin:0 auto 1rem;position:relative;z-index:1}
.map-card .mp-btn{
display:inline-flex;align-items:center;gap:.45rem;background:#fff;color:var(--green-deep);
font-weight:700;padding:.6rem 1.1rem;border-radius:30px;border:1.5px solid var(--green);
position:relative;z-index:1;transition:.25s;
}
.map-card .mp-btn:hover{background:var(--green);color:#fff;transform:translateY(-2px)}
/* Image placeholder fallback (in case any image fails) */
img.img-fallback,
.img-ph{
background:linear-gradient(135deg,var(--mint) 0%,#E0F2FE 100%);
display:flex;align-items:center;justify-content:center;
color:var(--green-deep);font-family:'Poppins',sans-serif;font-weight:600;
position:relative;min-height:200px;
}
.img-ph::before{
content:"\F2A9";font-family:'bootstrap-icons';font-size:3rem;
opacity:.4;position:absolute;
}
.img-ph span{position:relative;z-index:1;padding:.4rem .8rem;background:rgba(255,255,255,.7);border-radius:30px;font-size:.85rem}
/* Hero badge — admissions emphasis */
.hero-badge.admissions{
background:linear-gradient(120deg,#065F46,#0F8A5F);color:#fff;border-color:transparent;
}
.hero-badge.admissions i{color:#FDE68A}
/* No-horizontal-scroll safety */
html,body{max-width:100%;overflow-x:hidden}
.container{max-width:100%}
/* Footer extra polish */
.site-footer p{font-size:.92rem;color:#cbd5e1}
.site-footer li{font-size:.9rem}
/* Embedded Google Map */
.map-embed{
border-radius:18px;overflow:hidden;
border:1px solid #BBF7D0;
box-shadow:0 18px 40px rgba(15,138,95,.15);
background:#fff;
}
.map-embed iframe{display:block;width:100%;min-height:320px;border:0}
/* ==========================================================================
v4 — Premium brand color rebalance (logo-inspired)
Reduces green dominance. Navy + Purple lead; Green for trust CTAs; Gold for awards.
========================================================================== */
:root{
--navy:#101828;
--navy-2:#1E2A4A;
--purple:#2F218A;
--purple-2:#3D2BB5;
--green:#0F8A5F;
--green-deep:#065F46;
--mint:#ECFDF5;
--mint-2:#F4FBF7;
--gold:#D4AF37;
--gold-soft:#F5E6B3;
--orange:#F59E0B;
--bg:#F8FAFC;
--text:#475569;
--border:#E2E8F0;
--grad-hero:radial-gradient(1100px 520px at 85% -10%, rgba(47,33,138,.10), transparent 60%),
radial-gradient(900px 480px at -10% 110%, rgba(15,138,95,.10), transparent 60%),
linear-gradient(160deg,#FFFFFF 0%,#F8FAFC 55%,#ECFDF5 100%);
--grad-cta:linear-gradient(120deg,#101828 0%,#2F218A 60%,#3D2BB5 100%);
--grad-footer:linear-gradient(160deg,#101828 0%,#1B1750 55%,#2F218A 100%);
--grad-banner:linear-gradient(120deg,#101828 0%,#2F218A 100%);
}
body{background:var(--bg)}
/* Top strip — navy→purple */
.top-strip{background:linear-gradient(90deg,var(--navy) 0%,var(--purple) 100%);}
.top-strip .item i{color:var(--gold)}
/* Navbar — glass white, navy text, purple active underline */
.navbar-custom{background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--border)}
.navbar-custom .nav-link:hover{color:var(--purple)!important;background:rgba(47,33,138,.06)}
.navbar-custom .nav-link.active{color:var(--purple)!important;background:transparent}
.navbar-custom .nav-link.active::after{background:var(--purple)}
.navbar-custom .brand-text strong{color:var(--navy)}
.navbar-custom .brand-text small{color:var(--purple)}
/* Apply button stays green (CTA trust) */
.btn-apply{background:var(--green)}
.btn-apply:hover{background:var(--green-deep);box-shadow:0 10px 24px rgba(15,138,95,.4)}
/* Section eyebrows — purple, not green */
.section-eyebrow{color:var(--purple);background:rgba(47,33,138,.08)}
/* Hero — premium light gradient w/ subtle purple+mint glow */
.hero{background:var(--grad-hero)!important}
.hero h1 .accent{background:linear-gradient(90deg,var(--purple),var(--navy));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--purple)}
.hero-badge{border-color:rgba(47,33,138,.25);color:var(--purple);background:#fff;box-shadow:0 6px 18px rgba(47,33,138,.08)}
.hero-badge i{color:var(--orange)}
/* Trust / cards — purple hover, navy headings */
.trust-card::before{background:linear-gradient(90deg,var(--purple),var(--green))}
.trust-card:hover{border-color:var(--purple)}
.trust-card .ic{background:rgba(47,33,138,.08);color:var(--purple)}
/* Facility cards — green icon, purple hover */
.facility-card::before{background:linear-gradient(90deg,var(--purple),var(--green))}
.facility-card:hover{border-color:var(--purple)}
/* Adm card hover */
.adm-card:hover{border-color:var(--purple)}
.adm-card .label{color:var(--purple)}
/* Hospital card hover */
.hospital-card:hover{border-color:var(--purple)}
/* Page banners — navy→purple */
.page-banner{background:var(--grad-banner)!important}
/* CTA section — navy→purple */
.cta-section{background:var(--grad-cta)!important}
/* Footer — navy→purple, not green */
.site-footer, footer.site-footer{background:var(--grad-footer)!important}
/* Admissions strip — keep subtle, swap to purple tint */
.adm-strip{background:linear-gradient(90deg,rgba(47,33,138,.08),rgba(15,138,95,.06))!important;border-color:rgba(47,33,138,.15)!important}
.adm-strip .dot{background:var(--green)}
.adm-strip strong{color:var(--navy)}
/* Parent cards — purple accents */
.parent-card .ic{background:rgba(47,33,138,.08);color:var(--purple)}
.parent-card:hover{border-color:var(--purple)}
/* Brochure card — navy→purple gradient */
.brochure-card{background:var(--grad-cta)!important}
/* FAQ — purple focus */
.faq-item[open]{border-color:var(--purple)}
.faq-item summary:hover{color:var(--purple)}
/* Awards / Rank cards — gold-forward */
.rank-card{background:#fff;border:1px solid var(--border)}
.rank-card.gold{border-color:var(--gold);box-shadow:0 12px 30px rgba(212,175,55,.18)}
.rank-card.gold .medal{background:linear-gradient(135deg,#F5D76E,var(--gold));color:#5b4314}
.rank-card.silver .medal{background:linear-gradient(135deg,#E5E7EB,#9CA3AF);color:#1f2937}
.rank-card.bronze .medal{background:linear-gradient(135deg,#E0A878,#B07C4A);color:#3b2412}
.rank-card h4{color:var(--navy)}
.award-card .ic{background:rgba(212,175,55,.15);color:var(--gold)}
.award-card:hover{border-color:var(--gold)}
/* Enquiry sidebar — purple accent */
.enquiry-card{border-top:4px solid var(--purple)}
.enquiry-card h3{color:var(--navy)}
/* Map card */
.map-card{border:1px solid var(--border);background:#fff}
/* Rule groups — purple top accent */
.rule-group{border-top:3px solid var(--purple)}
.rule-group h3{color:var(--navy)}
.rule-group .ic{background:rgba(47,33,138,.08);color:var(--purple)}
/* Mobile bottom bar — keep green WhatsApp + purple Apply */
.mobile-actions .ma-apply{background:var(--purple)!important}
.mobile-actions .ma-apply:hover{background:var(--purple-2)!important}
/* Section alternation — light gray breathing rooms */
section.alt-bg{background:var(--bg)}
/* Links use purple, not green */
a{color:var(--purple)}
a:hover{color:var(--purple-2)}
/* Floating WhatsApp stays green */
/* ==========================================================================
v5 — Final polish: map card, dev note, mobile float spacing
========================================================================== */
.map-card-v2{
background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
padding:2rem 1.75rem;text-align:center;box-shadow:var(--shadow-sm);
position:relative;overflow:hidden;
}
.map-card-v2::before{
content:"";position:absolute;inset:0;background:
radial-gradient(500px 200px at 50% 0%, rgba(47,33,138,.08), transparent 60%);
pointer-events:none;
}
.map-card-v2 .mc-icon{
width:64px;height:64px;border-radius:18px;margin:0 auto 1rem;
background:linear-gradient(135deg,var(--purple),var(--navy));color:#fff;
display:inline-flex;align-items:center;justify-content:center;font-size:1.7rem;
box-shadow:0 10px 24px rgba(47,33,138,.28);position:relative;z-index:1;
}
.map-card-v2 h3{color:var(--navy);font-family:'Poppins',sans-serif;margin:0 0 .35rem;position:relative;z-index:1}
.map-card-v2 .mc-addr{color:var(--text);margin-bottom:1.1rem;position:relative;z-index:1}
.map-card-v2 .mc-note{
background:rgba(212,175,55,.12);border:1px dashed var(--gold);
color:#6b4f10;padding:.85rem 1rem;border-radius:12px;
font-size:.88rem;margin:0 auto 1.25rem;max-width:380px;
display:flex;align-items:flex-start;gap:.55rem;text-align:left;position:relative;z-index:1;
}
.map-card-v2 .mc-note i{color:var(--gold);font-size:1.05rem;flex-shrink:0;margin-top:.1rem}
.map-embed-wrap{
border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);
border:1px solid var(--border);background:#fff;position:relative;
}
.map-embed-wrap iframe{display:block;width:100%;min-height:320px;}
.map-card-v2 .map-embed-wrap + .mc-note{margin-top:1rem;}
/* Info note variant for dev/hosting reminders */
.info-note.alt{
background:rgba(47,33,138,.06);border-color:rgba(47,33,138,.2);color:#312763;
}
.info-note.alt i{color:var(--purple)}
/* Lift floating WhatsApp above mobile action bar on small screens */
@media(max-width:767.98px){
.wa-float{bottom:88px!important}
.back-top{bottom:88px!important}
body{padding-bottom:72px}
}
/* ==========================================================================
v6 — Ocean Blue palette (coolors.co/03045e...caf0f8)
Replaces navy/purple/green leads with a cohesive blue system.
========================================================================== */
:root{
--navy:#03045E; /* Federal blue - main heading / footer base */
--navy-2:#023E8A; /* Marian blue */
--purple:#023E8A; /* repurposed as deep accent */
--purple-2:#0077B6; /* Honolulu blue - hover */
--blue:#0077B6;
--blue-2:#0096C7;
--cyan:#00B4D8; /* Pacific cyan - primary CTA */
--cyan-2:#48CAE4; /* Non photo blue */
--sky:#90E0EF; /* Light sky */
--sky-2:#ADE8F4;
--foam:#CAF0F8; /* Lightest foam */
--green:#00B4D8; /* repurpose green token as cyan CTA */
--green-deep:#0077B6;
--mint:#CAF0F8; /* soft tint sections */
--mint-2:#E6F7FB;
--gold:#F4B860; /* warm accent retained for awards */
--gold-soft:#FCE9C7;
--orange:#F59E0B;
--bg:#F4FAFD;
--text:#334E68;
--border:#D6E6EE;
--grad-hero:radial-gradient(1100px 520px at 85% -10%, rgba(0,119,182,.14), transparent 60%),
radial-gradient(900px 480px at -10% 110%, rgba(0,180,216,.14), transparent 60%),
linear-gradient(160deg,#FFFFFF 0%,#F4FAFD 55%,#CAF0F8 100%);
--grad-cta:linear-gradient(120deg,#03045E 0%,#023E8A 55%,#0077B6 100%);
--grad-footer:linear-gradient(160deg,#03045E 0%,#023E8A 60%,#0077B6 100%);
--grad-banner:linear-gradient(120deg,#03045E 0%,#0077B6 100%);
}
/* Top strip */
.top-strip{background:linear-gradient(90deg,#03045E 0%,#0077B6 100%)}
.top-strip .item i{color:var(--cyan-2)}
/* Navbar — glass white, navy text, cyan active underline */
.navbar-custom .nav-link:hover{color:var(--blue)!important;background:rgba(0,119,182,.08)}
.navbar-custom .nav-link.active{color:var(--navy)!important;background:transparent}
.navbar-custom .nav-link.active::after{background:var(--cyan)}
.navbar-custom .brand-text strong{color:var(--navy)}
.navbar-custom .brand-text small{color:var(--blue)}
/* Buttons — cyan primary, navy hover */
.btn-apply{background:var(--cyan);color:#03045E!important}
.btn-apply:hover{background:var(--blue);color:#fff!important;box-shadow:0 10px 24px rgba(0,119,182,.4)}
.btn-primary-c{background:var(--blue);color:#fff}
.btn-primary-c:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn-outline-c{background:#fff;color:var(--navy);border:2px solid var(--blue)}
.btn-outline-c:hover{background:var(--blue);color:#fff}
/* Eyebrows */
.section-eyebrow{color:var(--blue);background:rgba(0,119,182,.10)}
/* Hero */
.hero{background:var(--grad-hero)!important}
.hero h1 .accent{background:linear-gradient(90deg,var(--blue),var(--navy));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--blue)}
.hero-badge{border-color:rgba(0,119,182,.25);color:var(--navy);background:#fff;box-shadow:0 6px 18px rgba(0,119,182,.12)}
.hero-badge i{color:var(--gold)}
/* Trust + facility cards */
.trust-card::before{background:linear-gradient(90deg,var(--cyan),var(--navy))}
.trust-card:hover{border-color:var(--blue)}
.trust-card .ic{background:rgba(0,180,216,.14);color:var(--blue)}
.facility-card::before{background:linear-gradient(90deg,var(--cyan),var(--navy))}
.facility-card:hover{border-color:var(--blue)}
.facility-card .fc-icon{background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 8px 18px rgba(0,119,182,.28)}
/* Adm / hospital */
.adm-card:hover{border-color:var(--blue)}
.adm-card .label{color:var(--blue)}
.hospital-card:hover{border-color:var(--blue)}
/* Banners, CTA, footer, brochure */
.page-banner{background:var(--grad-banner)!important}
.cta-section{background:var(--grad-cta)!important}
.site-footer, footer.site-footer{background:var(--grad-footer)!important}
.brochure-card{background:var(--grad-cta)!important}
/* Admissions strip */
.adm-strip{background:linear-gradient(90deg,rgba(0,119,182,.10),rgba(0,180,216,.08))!important;border-color:rgba(0,119,182,.18)!important}
.adm-strip .dot{background:var(--cyan)}
.adm-strip strong{color:var(--navy)}
/* Parent / FAQ / rules */
.parent-card .ic{background:rgba(0,180,216,.14);color:var(--blue)}
.parent-card:hover{border-color:var(--blue)}
.faq-item[open]{border-color:var(--blue)}
.faq-item summary:hover{color:var(--blue)}
.rule-group{border-top:3px solid var(--blue)}
.rule-group .ic{background:rgba(0,119,182,.10);color:var(--blue)}
/* Enquiry sidebar + map */
.enquiry-card{border-top:4px solid var(--cyan)}
.map-card-v2 .mc-icon{background:linear-gradient(135deg,var(--cyan),var(--navy));box-shadow:0 10px 24px rgba(0,119,182,.3)}
/* Awards stay gold-forward; titles navy */
.rank-card.gold{border-color:var(--gold);box-shadow:0 12px 30px rgba(244,184,96,.22)}
.award-card .ic{background:rgba(244,184,96,.18);color:#b8861d}
.award-card:hover{border-color:var(--gold)}
/* Top strip badge / WhatsApp keeps brand green for recognition */
.top-strip .wa-btn{background:#25D366}
.wa-float{background:#25D366}
/* Mobile bottom bar — blue Apply */
.mobile-actions .ma-apply{background:var(--blue)!important}
.mobile-actions .ma-apply:hover{background:var(--navy)!important}
/* Links */
a{color:var(--blue)}
a:hover{color:var(--navy)}
/* Info note alt */
.info-note.alt{background:rgba(0,119,182,.07);border-color:rgba(0,119,182,.22);color:#0b2d4a}
.info-note.alt i{color:var(--blue)}
/* Body bg */
body{background:var(--bg)}
/* ==========================================================================
v7 — Final navy/purple premium palette (logo-aligned)
Overrides v6 ocean blue. Navy + Purple lead; Green = CTA only; Gold = awards.
========================================================================== */
:root{
--navy:#0B1220;
--navy-2:#1A2240;
--purple:#312E81;
--purple-2:#4338CA;
--purple-soft:#F3F0FF;
--green:#0F766E;
--green-deep:#065F46;
--mint:#ECFDF5;
--mint-2:#F4FBF7;
--gold:#D4AF37;
--gold-soft:#FCE9C7;
--orange:#F59E0B;
--bg:#F8FAFC;
--text:#475569;
--text-strong:#101828;
--border:#E2E8F0;
--blue:#312E81;
--blue-2:#4338CA;
--cyan:#0F766E;
--cyan-2:#14B8A6;
--sky:#F3F0FF;
--foam:#F3F0FF;
--grad-hero:radial-gradient(1100px 520px at 85% -10%, rgba(49,46,129,.12), transparent 60%),
radial-gradient(900px 480px at -10% 110%, rgba(15,118,110,.08), transparent 60%),
linear-gradient(160deg,#FFFFFF 0%,#F8FAFC 50%,#F3F0FF 100%);
--grad-cta:linear-gradient(120deg,#0B1220 0%,#1F1B6E 55%,#312E81 100%);
--grad-footer:linear-gradient(135deg,#0B1220 0%,#312E81 100%);
--grad-banner:linear-gradient(120deg,#0B1220 0%,#312E81 100%);
}
body{background:var(--bg);color:var(--text)}
h1,h2,h3,h4,h5,h6{color:var(--text-strong)}
/* Top strip — navy with white text */
.top-strip{background:#0B1220;color:#E2E8F0}
.top-strip a{color:#fff}
.top-strip .item i{color:var(--gold)}
.top-strip .wa-btn{background:#25D366}
/* Navbar — glass white, navy text, purple active */
.navbar-custom{background:rgba(255,255,255,.94)}
.navbar-custom .nav-link{color:var(--navy)!important}
.navbar-custom .nav-link:hover{color:var(--purple)!important;background:rgba(49,46,129,.07)}
.navbar-custom .nav-link.active{color:var(--purple)!important;background:transparent}
.navbar-custom .nav-link.active::after{background:var(--purple)}
.navbar-custom .brand-text strong{color:var(--navy)}
.navbar-custom .brand-text small{color:var(--purple)}
/* Apply Now → green (trust CTA) */
.btn-apply{background:var(--green);color:#fff!important}
.btn-apply:hover{background:var(--green-deep);color:#fff!important;box-shadow:0 10px 24px rgba(15,118,110,.4)}
/* Primary action → green; Secondary → white w/ purple border */
.btn-primary-c{background:var(--green);color:#fff}
.btn-primary-c:hover{background:var(--green-deep);color:#fff}
.btn-outline-c{background:#fff;color:var(--navy);border:2px solid var(--purple)}
.btn-outline-c:hover{background:var(--purple);color:#fff;border-color:var(--purple)}
/* Eyebrows → purple */
.section-eyebrow{color:var(--purple);background:var(--purple-soft)}
/* Hero — white→lavender with purple glow */
.hero{background:var(--grad-hero)!important}
.hero h1{color:var(--text-strong)}
.hero h1 .accent{background:linear-gradient(90deg,var(--purple),var(--navy));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--purple)}
.hero-badge{border-color:rgba(212,175,55,.45);color:var(--navy);background:#fff;box-shadow:0 6px 18px rgba(49,46,129,.10)}
.hero-badge i{color:var(--orange)}
/* Trust + facility cards — white, purple hover, navy heading */
.trust-card{background:#fff}
.trust-card::before{background:linear-gradient(90deg,var(--purple),var(--green))}
.trust-card:hover{border-color:var(--purple)}
.trust-card .ic{background:var(--purple-soft);color:var(--purple)}
.facility-card{background:#fff}
.facility-card::before{background:linear-gradient(90deg,var(--purple),var(--green))}
.facility-card:hover{border-color:var(--purple)}
.facility-card .fc-icon{background:linear-gradient(135deg,var(--green),var(--green-deep));box-shadow:0 8px 18px rgba(15,118,110,.28)}
/* Adm + hospital cards */
.adm-card:hover{border-color:var(--purple)}
.adm-card .label{color:var(--purple)}
.hospital-card:hover{border-color:var(--purple)}
/* Banners + CTA + footer + brochure */
.page-banner{background:var(--grad-banner)!important;color:#fff}
.cta-section{background:var(--grad-cta)!important;color:#fff}
.site-footer, footer.site-footer{background:var(--grad-footer)!important;color:#cbd5e1}
.brochure-card{background:var(--grad-cta)!important;color:#fff}
/* Admissions strip — soft purple tint */
.adm-strip{background:linear-gradient(90deg,rgba(49,46,129,.08),rgba(15,118,110,.06))!important;border-color:rgba(49,46,129,.18)!important}
.adm-strip .dot{background:var(--green)}
.adm-strip strong{color:var(--navy)}
/* Parent / FAQ / rule groups */
.parent-card{background:#fff}
.parent-card .ic{background:var(--purple-soft);color:var(--purple)}
.parent-card:hover{border-color:var(--purple)}
.faq-item[open]{border-color:var(--purple)}
.faq-item summary:hover{color:var(--purple)}
.rule-group{border-top:3px solid var(--purple);background:#fff}
.rule-group h3{color:var(--navy)}
.rule-group .ic{background:var(--purple-soft);color:var(--purple)}
/* Awards — gold-forward, white cards */
.rank-card{background:#fff;border:1px solid var(--border)}
.rank-card.gold{border-color:var(--gold);box-shadow:0 12px 30px rgba(212,175,55,.22)}
.rank-card.gold .medal{background:linear-gradient(135deg,#F5D76E,var(--gold));color:#5b4314}
.rank-card.silver .medal{background:linear-gradient(135deg,#E5E7EB,#9CA3AF);color:#1f2937}
.rank-card.bronze .medal{background:linear-gradient(135deg,#E0A878,#B07C4A);color:#3b2412}
.rank-card h4{color:var(--navy)}
.award-card{background:#fff;border:1px solid var(--border)}
.award-card .ic{background:rgba(212,175,55,.18);color:#a07f10}
.award-card:hover{border-color:var(--gold);box-shadow:0 10px 24px rgba(212,175,55,.18)}
/* Enquiry sidebar + map card */
.enquiry-card{border-top:4px solid var(--purple);background:#fff}
.enquiry-card h3{color:var(--navy)}
.map-card-v2 .mc-icon{background:linear-gradient(135deg,var(--purple),var(--navy));box-shadow:0 10px 24px rgba(49,46,129,.3)}
.map-card-v2 .mc-note{background:rgba(212,175,55,.14);border:1px dashed var(--gold);color:#6b4f10}
.map-card-v2 .mc-note i{color:var(--gold)}
/* Soft section helpers */
section.bg-soft{background:var(--bg)}
section.bg-lavender{background:var(--purple-soft)}
section.bg-mint{background:var(--mint)}
/* Mobile bar — purple Apply, green WhatsApp */
.mobile-actions .ma-apply{background:var(--purple)!important;color:#fff!important}
.mobile-actions .ma-apply:hover{background:var(--purple-2)!important}
.mobile-actions .ma-wa{background:#25D366!important;color:#fff!important}
/* Links */
a{color:var(--purple)}
a:hover{color:var(--purple-2)}
/* Info note alt */
.info-note.alt{background:var(--purple-soft);border-color:rgba(49,46,129,.25);color:#1f1c5a}
.info-note.alt i{color:var(--purple)}
/* WhatsApp float stays green */
.wa-float{background:#25D366}
/* Back-to-top — navy */
.back-top{background:var(--navy);color:#fff}
.back-top:hover{background:var(--purple)}
/* ==========================================================================
v8 — Readability safety overrides (user-provided)
========================================================================== */
:root{
--primary-navy:#0B1220;
--brand-purple:#312E81;
--medical-green:#0F766E;
--warm-gold:#D4AF37;
--main-bg:#F8FAFC;
--white:#FFFFFF;
--text-dark:#101828;
--text-muted:#475569;
--border:#E2E8F0;
}
h1,h2,h3,h4,h5,h6,
.section-title,.section-title h2,.section-title h3,
.page-title,.card-title,.hero-title,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6{
color:var(--primary-navy)!important;
}
p,li,.card-text,.section-description,.lead{color:var(--text-muted)}
.section-label,.badge-label,.eyebrow,.small-title{color:var(--brand-purple)!important;font-weight:700}
.footer h1,.footer h2,.footer h3,.footer h4,.footer h5,.footer h6,
.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4,.site-footer h5,.site-footer h6,
.dark-section h1,.dark-section h2,.dark-section h3,.dark-section h4,.dark-section h5,.dark-section h6,
.cta-section h1,.cta-section h2,.cta-section h3,.cta-section h4,.cta-section h5,.cta-section h6,
.page-banner h1,.page-banner h2,.page-banner h3,.page-banner h4,.page-banner h5,.page-banner h6,
.brochure-card h1,.brochure-card h2,.brochure-card h3,.brochure-card h4,.brochure-card h5,.brochure-card h6{
color:#ffffff!important;
}
.cta-section p,.page-banner p,.brochure-card p{color:#E2E8F0!important}
.hero h1,.hero-title{color:var(--primary-navy)!important}
.hero p,.hero .lead{color:var(--text-muted)!important}
.footer,.site-footer{
background:linear-gradient(135deg,#0B1220,#312E81)!important;
color:#E2E8F0!important;
}
.footer p,.footer li,.footer a,
.site-footer p,.site-footer li,.site-footer a{color:#E2E8F0!important}
.footer a:hover,.site-footer a:hover{color:#ffffff!important}
.btn-primary,.btn-apply,.apply-btn{
background:var(--medical-green)!important;border-color:var(--medical-green)!important;color:#fff!important;
}
.btn-outline-primary,.btn-secondary-outline{
border-color:var(--brand-purple)!important;color:var(--brand-purple)!important;background:#fff!important;
}
.btn-outline-primary:hover,.btn-secondary-outline:hover{
background:var(--brand-purple)!important;color:#fff!important;
}
/* ============ v9 — Gallery grid + Lightbox ============ */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}
.gallery-grid .g-item{position:relative;display:block;overflow:hidden;border-radius:14px;cursor:zoom-in;box-shadow:0 6px 20px rgba(11,18,32,.08);background:#0B1220}
.gallery-grid .g-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.gallery-grid .g-item:hover img{transform:scale(1.08)}
.gallery-grid .g-item.tall{grid-row:span 2}
.gallery-grid .g-item.wide{grid-column:span 2}
.gallery-grid .g-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;font-weight:600;font-size:.92rem;background:linear-gradient(180deg,transparent,rgba(11,18,32,.85));transform:translateY(100%);transition:transform .35s ease}
.gallery-grid .g-item:hover .g-cap{transform:translateY(0)}
@media (max-width: 991px){.gallery-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:170px}}
@media (max-width: 640px){.gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:10px}.gallery-grid .g-item.wide{grid-column:span 2}.gallery-grid .g-item.tall{grid-row:span 1}}
/* Lightbox modal */
.lightbox-modal .modal-content{background:transparent;border:0;box-shadow:none}
.lightbox-modal .lb-content{position:relative;background:#0B1220;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox-modal #lbImage{display:block;width:100%;max-height:82vh;object-fit:contain;background:#0B1220}
.lightbox-modal .lb-caption{color:#E2E8F0;text-align:center;padding:12px 16px;font-weight:500;background:#101828}
.lightbox-modal .lb-close{position:absolute;top:10px;right:10px;z-index:5;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#0B1220;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lightbox-modal .lb-close:hover{background:#fff}
/* ============ v10 — Hero Carousel ============ */
.hero-carousel{position:relative;background:transparent;padding:0}
.hero-carousel .carousel-item{height:78vh;min-height:520px}
.hero-carousel .hc-slide{position:relative;width:100%;height:100%;background-size:cover;background-position:center;display:flex;align-items:center}
.hero-carousel .hc-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,.42) 0%,rgba(11,18,32,.62) 55%,rgba(11,18,32,.78) 100%)}
.hero-carousel .hc-content{position:relative;z-index:2;color:#fff;max-width:780px}
.hero-carousel .hc-content h1{color:#fff !important;font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.12;margin:.8rem 0 1rem}
.hero-carousel .hc-content h1 .accent{color:#D4AF37}
.hero-carousel .hc-content p{color:#E2E8F0;font-size:clamp(1rem,1.25vw,1.15rem);max-width:640px;margin-bottom:1.6rem}
.hero-carousel .hero-badge{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px)}
.hero-carousel .carousel-indicators{margin-bottom:1.2rem}
.hero-carousel .carousel-indicators [data-bs-target]{width:34px;height:4px;border-radius:4px;background:rgba(255,255,255,.5);border:0}
.hero-carousel .carousel-indicators .active{background:#D4AF37}
.hero-carousel .carousel-control-prev,.hero-carousel .carousel-control-next{width:6%;opacity:.7}
@media (max-width:768px){.hero-carousel .carousel-item{height:66vh;min-height:460px}.hero-carousel .hc-overlay{background:linear-gradient(180deg,rgba(11,18,32,.85),rgba(49,46,129,.8))}}
/* ============ v11 — Gallery marquee (auto scroll) ============ */
.gallery-marquee{padding:2.5rem 0 .5rem;overflow:hidden;background:linear-gradient(180deg,#F3F0FF,#F8FAFC)}
.gallery-marquee .gm-track{display:flex;width:max-content;gap:18px;animation:gmScroll 60s linear infinite}
.gallery-marquee:hover .gm-track{animation-play-state:paused}
.gallery-marquee .gm-set{display:flex;gap:18px;flex-shrink:0}
.gallery-marquee .gm-item{width:280px;height:200px;border-radius:14px;overflow:hidden;box-shadow:0 8px 22px rgba(11,18,32,.12);background:#0B1220}
.gallery-marquee .gm-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gallery-marquee .gm-item:hover img{transform:scale(1.06)}
@keyframes gmScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){.gallery-marquee .gm-item{width:200px;height:150px}.gallery-marquee .gm-track{animation-duration:45s}}
/* ============ v12 — Gallery v2 (intro, featured, filters, masonry) ============ */
.gallery-intro{display:flex;gap:1.25rem;align-items:flex-start;background:#fff;border:1px solid var(--border);border-left:5px solid var(--brand-purple);border-radius:16px;padding:1.5rem 1.75rem;box-shadow:0 10px 30px rgba(11,18,32,.06)}
.gallery-intro .gi-icon{flex-shrink:0;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#312E81,#0B1220);color:#fff;font-size:1.5rem}
.gallery-intro h3{margin:0 0 .35rem;font-family:'Poppins',sans-serif;font-weight:700;font-size:1.25rem}
.gallery-intro p{margin:0;color:var(--text-muted);line-height:1.6}
/* Latest uploaded gallery photos */
.latest-gallery-section{background:linear-gradient(180deg,#fff 0%,#F8FAFC 100%)}
.latest-gallery-link{display:inline-flex;align-items:center;gap:.45rem;color:var(--brand-purple);font-weight:700;font-size:.95rem}
.latest-gallery-link:hover{color:var(--medical-green);transform:translateY(-1px)}
.latest-gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.latest-photo-card{position:relative;display:block;min-height:220px;border-radius:16px;overflow:hidden;background:#0B1220;box-shadow:0 12px 34px rgba(11,18,32,.12);cursor:zoom-in}
.latest-photo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,0) 42%,rgba(11,18,32,.84) 100%)}
.latest-photo-card img{width:100%;height:100%;min-height:220px;object-fit:cover;display:block;transition:transform .6s ease}
.latest-photo-card:hover img{transform:scale(1.07)}
.latest-photo-card span{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;color:#fff;font-weight:700;font-family:'Poppins',sans-serif;font-size:.95rem;line-height:1.3}
@media (max-width:992px){.latest-gallery-grid{grid-template-columns:repeat(3,1fr)}.latest-photo-card,.latest-photo-card img{min-height:210px}}
@media (max-width:640px){.latest-gallery-grid{grid-template-columns:1fr 1fr;gap:12px}.latest-photo-card,.latest-photo-card img{min-height:190px}.latest-photo-card span{font-size:.85rem}}
@media (max-width:420px){.latest-gallery-grid{grid-template-columns:1fr}.latest-photo-card,.latest-photo-card img{min-height:240px}}
/* Featured grid */
.featured-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:18px;height:540px}
.feat-card{position:relative;display:block;overflow:hidden;border-radius:18px;box-shadow:0 14px 40px rgba(11,18,32,.14);cursor:zoom-in;background:#0B1220}
.feat-card.feat-large{grid-row:span 2}
.feat-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
.feat-card:hover img{transform:scale(1.07)}
.feat-card .feat-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;background:linear-gradient(180deg,rgba(11,18,32,0) 45%,rgba(11,18,32,.88) 100%);color:#fff}
.feat-card .feat-overlay h4{color:#fff!important;margin:.4rem 0 0;font-family:'Poppins',sans-serif;font-weight:700;font-size:1.15rem;line-height:1.3}
.feat-card.feat-large .feat-overlay h4{font-size:1.55rem}
.feat-tag{display:inline-block;align-self:flex-start;background:rgba(212,175,55,.95);color:#0B1220;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.3rem .65rem;border-radius:999px}
@media (max-width:768px){.featured-grid{grid-template-columns:1fr;grid-template-rows:auto;height:auto}.feat-card{height:260px}.feat-card.feat-large{height:340px;grid-row:auto}}
/* Filters */
.gallery-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-bottom:2rem}
.gf-btn{border:1.5px solid var(--border);background:#fff;color:var(--text-dark);font-weight:600;font-size:.9rem;padding:.55rem 1.1rem;border-radius:999px;transition:all .22s ease;display:inline-flex;align-items:center;gap:.4rem}
.gf-btn:hover{border-color:var(--brand-purple);color:var(--brand-purple);transform:translateY(-1px)}
.gf-btn.active{background:linear-gradient(135deg,var(--brand-purple),#0B1220);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(49,46,129,.3)}
.gf-btn i{font-size:.95rem}
/* Masonry-ish grid v2 */
.gallery-grid-v2{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.gallery-grid-v2{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (max-width:560px){.gallery-grid-v2{grid-template-columns:1fr;gap:14px}}
.gv-item{display:block;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(11,18,32,.07);cursor:zoom-in;transition:transform .3s ease,box-shadow .3s ease;opacity:1}
.gv-item:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(11,18,32,.14)}
.gv-item.is-hidden{display:none}
.gv-img{position:relative;overflow:hidden;aspect-ratio:4/3;background:#0B1220}
.gv-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.gv-item:hover .gv-img img{transform:scale(1.08)}
.gv-body{padding:.9rem 1.1rem 1.1rem}
.gv-tag{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--brand-purple);background:#F3F0FF;padding:.25rem .6rem;border-radius:999px;margin-bottom:.45rem}
.gv-body h5{margin:0;color:var(--primary-navy)!important;font-family:'Poppins',sans-serif;font-weight:600;font-size:1rem;line-height:1.35}
.gv-empty{text-align:center;color:var(--text-muted);padding:2rem;font-size:1rem}
.gv-empty i{color:var(--brand-purple);margin-right:.4rem}
/* Reveal animation for cards on filter */
@keyframes gvFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.gv-item.is-show{animation:gvFadeIn .35s ease both}
/* ============ v13 — Logo enlarge + adm-strip high contrast ============ */
.navbar-custom .navbar-brand img{height:68px!important;width:auto}
.navbar-custom .brand-text strong{font-size:1.25rem;line-height:1.05}
.navbar-custom .brand-text small{font-size:.78rem}
@media (max-width: 575.98px){
.navbar-custom .navbar-brand img{height:54px!important}
}
/* Force dark, highly visible Admissions strip — overrides all prior light variants */
.adm-strip{
background:linear-gradient(90deg,#0B1220 0%,#1E1B4B 55%,#312E81 100%)!important;
border:none!important;
padding:1.1rem 0!important;
color:#fff!important;
}
.adm-strip h4,.adm-strip h4 *{color:#fff!important;font-weight:700}
.adm-strip p,.adm-strip strong{color:rgba(255,255,255,.92)!important}
.adm-strip .mini-btn{
background:#fff!important;color:#0B1220!important;border:2px solid #fff!important;
font-weight:700!important;padding:.55rem 1.1rem!important;border-radius:999px!important;
display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.adm-strip .mini-btn:hover{background:#FDE68A!important;color:#0B1220!important;border-color:#FDE68A!important}
.adm-strip .mini-btn.wa{background:#25D366!important;color:#fff!important;border-color:#25D366!important}
.adm-strip .mini-btn.wa:hover{background:#1ebe57!important;color:#fff!important;border-color:#1ebe57!important}
.adm-strip .mini-btn.ghost{background:transparent!important;color:#fff!important;border:2px solid #FDE68A!important}
.adm-strip .mini-btn.ghost:hover{background:#FDE68A!important;color:#0B1220!important}
/* v13 — Final icon polish: consistent circular containers & color logic */
.trust-card .trust-icon,
.parent-card .pc-ic,
.contact-card .ic,
.value-card .ic,
.mv-card .mv-icon,
.facility-card .fc-icon,
.award-card .medal,
.rank-card .medal-lg{
border-radius:50%!important;
display:inline-flex;align-items:center;justify-content:center;
}
.trust-card .trust-icon,.parent-card .pc-ic,.contact-card .ic{
width:62px;height:62px;font-size:1.65rem;
}
.value-card .ic{width:58px;height:58px;font-size:1.5rem}
.mv-card .mv-icon{width:64px;height:64px;font-size:1.7rem}
.facility-card .fc-icon{width:60px;height:60px;font-size:1.5rem}
/* Academic / admission accent (purple) */
.parent-card .pc-ic,
.mv-card .mv-icon{
background:#F3F0FF!important;color:#312E81!important;box-shadow:none!important;
}
/* Medical / action (green) */
.trust-card .trust-icon,
.facility-card .fc-icon{
background:#ECFDF5!important;color:#0F766E!important;box-shadow:none!important;
}
/* Contact (navy on soft mint) */
.contact-card .ic{background:#ECFDF5!important;color:#0B1220!important}
/* Core values mix subtle purple */
.value-card .ic{background:#F3F0FF!important;color:#312E81!important}
/* Awards page → gold accents */
.award-card .medal{
width:64px;height:64px;font-size:1.7rem;
background:#FFF7E0!important;color:#B8861D!important;
}
/* rank cards keep their gradient mediallg */
/* Rules group icons consistency */
.rule-group h4 .gi{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem}
/* Stronger Need Admission Guidance card on desktop */
@media (min-width: 992px){
.enquiry-card{
box-shadow:0 24px 60px -28px rgba(49,46,129,.45), 0 10px 24px -16px rgba(11,18,32,.18);
border:1px solid rgba(49,46,129,.18);
background:linear-gradient(180deg,#ffffff 0%,#F8F6FF 100%);
transform:translateY(-4px);
}
.enquiry-card .ec-ic{box-shadow:0 10px 20px rgba(49,46,129,.25)}
}
/* Lightbox tag wrap fix for renamed labels */
.gv-tag{white-space:normal}
/* ============================================================
v14 — Abstract Wave / Curve Card Treatment
Inspired by flowing colorful wave artwork.
Adds a decorative SVG wave gradient on common cards.
============================================================ */
.mv-card,
.value-card,
.checklist-card,
.award-card,
.feature-card,
.facility-card,
.bento-card,
.parent-card,
.contact-card,
.rule-group,
.enquiry-card{
position:relative;
overflow:hidden;
isolation:isolate;
background:#ffffff;
border-radius:22px;
border:1px solid rgba(15,23,42,.06);
transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
/* Soft tinted wash */
.mv-card::before,
.value-card::before,
.checklist-card::before,
.award-card::before,
.feature-card::before,
.facility-card::before,
.bento-card::before,
.parent-card::before,
.contact-card::before,
.rule-group::before,
.enquiry-card::before{
content:"";
position:absolute; inset:auto -20% -40% -20%;
height:78%;
background:
radial-gradient(60% 80% at 20% 100%, rgba(49,46,129,.18), transparent 60%),
radial-gradient(55% 75% at 85% 100%, rgba(15,118,110,.16), transparent 60%);
filter:blur(2px);
z-index:-2;
pointer-events:none;
}
/* Flowing abstract wave (SVG) bottom-right */
.mv-card::after,
.value-card::after,
.checklist-card::after,
.award-card::after,
.feature-card::after,
.facility-card::after,
.bento-card::after,
.parent-card::after,
.contact-card::after,
.rule-group::after,
.enquiry-card::after{
content:"";
position:absolute;
right:-30%; bottom:-45%;
width:130%; height:130%;
background-repeat:no-repeat;
background-position:right bottom;
background-size:100% 100%;
background-image:url("data:image/svg+xml;utf8,");
opacity:.55;
z-index:-1;
pointer-events:none;
transition:transform .8s ease, opacity .5s ease;
}
/* Award cards lean gold */
.award-card::after{
background-image:url("data:image/svg+xml;utf8,");
}
/* Contact cards lean teal */
.contact-card::after{
background-image:url("data:image/svg+xml;utf8,");
}
/* Hover lift + wave drift */
.mv-card:hover,
.value-card:hover,
.checklist-card:hover,
.award-card:hover,
.feature-card:hover,
.facility-card:hover,
.bento-card:hover,
.parent-card:hover,
.contact-card:hover,
.rule-group:hover,
.enquiry-card:hover{
transform:translateY(-6px);
box-shadow:0 28px 60px -28px rgba(11,18,32,.28), 0 10px 22px -16px rgba(49,46,129,.25);
}
.mv-card:hover::after,
.value-card:hover::after,
.checklist-card:hover::after,
.award-card:hover::after,
.feature-card:hover::after,
.facility-card:hover::after,
.bento-card:hover::after,
.parent-card:hover::after,
.contact-card:hover::after,
.rule-group:hover::after,
.enquiry-card:hover::after{
transform:translate(-4%, -3%) rotate(-2deg);
opacity:.75;
}
/* Make sure inner content sits above the waves */
.mv-card > *,
.value-card > *,
.checklist-card > *,
.award-card > *,
.feature-card > *,
.facility-card > *,
.bento-card > *,
.parent-card > *,
.contact-card > *,
.rule-group > *,
.enquiry-card > *{ position:relative; z-index:1; }
/* v14 — global cream background */
body{background:#fdf0d5 !important;}
/* v15 — keep admissions strip transparent */
.adm-strip,.adm-strip::before{
background:transparent !important;background-image:none !important;
border:none !important;box-shadow:none !important;
}
.adm-strip h4,.adm-strip strong{color:#0B1220 !important}
.adm-strip p{color:#475569 !important}
.adm-strip .mini-btn{color:#fff;background:#0B1220;border:1px solid #0B1220}
.adm-strip .mini-btn.wa{background:#25D366;border-color:#25D366;color:#fff}
.adm-strip .mini-btn.ghost{color:#0B1220;border:1.5px solid #0B1220;background:transparent}
.adm-strip .mini-btn.ghost:hover{background:#0B1220;color:#fff}
/* v16 — Premium glassmorphism card system */
:root{
--glass-bg:rgba(255,255,255,0.82);
--glass-border:rgba(255,255,255,0.65);
--glass-shadow:0 18px 45px rgba(15,23,42,0.08);
--glass-shadow-hover:0 24px 60px rgba(15,23,42,0.14);
--ink:#0B1220;
--ink-soft:#475569;
--academic:#312E81;
--medical:#0F766E;
--awardc:#D4AF37;
}
.mv-card,.value-card,.checklist-card,.facility-card,.award-card,.contact-card,
.parent-card,.rule-card,.enquiry-card,.f-card,.brochure-card,.faq-item,
.feat-card,.timeline-card,.info-card,.map-card-v2,.stat-card,
.about-card,.why-card,.course-card,.chair-quote,.process-card,.doc-card,
.hostel-card,.menu-card,.notice-card,.action-card,.form-card,.gv-card{
background:#ffffff;
background:var(--glass-bg);
-webkit-backdrop-filter:blur(18px) saturate(140%);
backdrop-filter:blur(18px) saturate(140%);
border:1px solid var(--glass-border) !important;
box-shadow:var(--glass-shadow) !important;
border-radius:24px !important;
transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.mv-card,.value-card,.checklist-card,.facility-card,.award-card,.contact-card,
.parent-card,.rule-card,.enquiry-card,.f-card,.brochure-card,.faq-item,
.feat-card,.about-card,.why-card,.course-card,.gv-card,.form-card,.map-card-v2{
background:#ffffff !important;
}
}
/* Readability */
.mv-card h1,.mv-card h2,.mv-card h3,.mv-card h4,
.value-card h4,.facility-card h3,.facility-card h4,
.parent-card h3,.parent-card h4,.rule-card h3,.rule-card h4,
.contact-card h3,.contact-card h4,.f-card h3,.f-card h4,
.feat-card h3,.feat-card h4,.about-card h3,.why-card h3,
.course-card h3,.faq-item h3,.faq-item h4,
.brochure-card h3,.brochure-card h4,.enquiry-card h3,.enquiry-card h4{color:var(--ink) !important}
.mv-card p,.value-card p,.facility-card p,.parent-card p,.rule-card p,
.contact-card p,.f-card p,.feat-card p,.about-card p,.why-card p,
.course-card p,.faq-item p,.brochure-card p,.enquiry-card p{color:var(--ink-soft) !important}
/* Hover lift */
@media (hover:hover){
.mv-card:hover,.value-card:hover,.facility-card:hover,.parent-card:hover,
.rule-card:hover,.contact-card:hover,.f-card:hover,.feat-card:hover,
.about-card:hover,.why-card:hover,.course-card:hover,.faq-item:hover,
.brochure-card:hover,.enquiry-card:hover,.award-card:hover{
transform:translateY(-8px);
box-shadow:var(--glass-shadow-hover) !important;
}
/* Section accent borders on hover */
.mv-card:hover,.about-card:hover,.course-card:hover,.enquiry-card:hover,
.faq-item:hover{border-color:rgba(49,46,129,.35) !important}
.facility-card:hover,.contact-card:hover,.f-card:hover{border-color:rgba(15,118,110,.35) !important}
.award-card:hover{border-color:rgba(212,175,55,.45) !important}
}
/* Icon circles */
.mv-icon,.value-card .ic,.facility-card .ic,.parent-card .ic,.rule-card .ic,
.contact-card .ic,.f-card .ic,.feat-card .ic,.about-card .ic,.why-card .ic,
.course-card .ic,.faq-item .ic,.brochure-card .ic,.enquiry-card .ic,
.award-card .ic,.process-card .ic{
width:60px;height:60px;display:inline-flex;align-items:center;justify-content:center;
border-radius:50%;font-size:28px;margin-bottom:14px;
transition:transform .3s ease;
}
@media (hover:hover){
.mv-card:hover .mv-icon,.value-card:hover .ic,.facility-card:hover .ic,
.parent-card:hover .ic,.rule-card:hover .ic,.contact-card:hover .ic,
.f-card:hover .ic,.feat-card:hover .ic,.about-card:hover .ic,
.why-card:hover .ic,.course-card:hover .ic,.faq-item:hover .ic,
.brochure-card:hover .ic,.enquiry-card:hover .ic,.award-card:hover .ic{
transform:scale(1.08);
}
}
/* default academic palette */
.mv-icon,.value-card .ic,.parent-card .ic,.about-card .ic,.why-card .ic,
.course-card .ic,.enquiry-card .ic,.faq-item .ic{
background:rgba(49,46,129,0.10);color:#312E81;
}
/* medical */
.facility-card .ic,.f-card .ic,.contact-card .ic.med,.rule-card .ic{
background:rgba(15,118,110,0.10);color:#0F766E;
}
/* awards gold */
.award-card .ic,.brochure-card .ic{
background:rgba(212,175,55,0.16);color:#B8941F;
}
/* contact */
.contact-card .ic{background:rgba(15,23,42,0.08);color:#0B1220}
/* Gallery image caption glass */
.gv-card .cap,.gv-card .overlay,.feat-card .cap{
background:rgba(11,18,32,0.62) !important;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
color:#fff !important;
}
.gv-card img{transition:transform .5s ease}
.gv-card:hover img{transform:scale(1.04)}
/* Form fields inside glass */
.form-card input,.form-card select,.form-card textarea,
.enquiry-card input,.enquiry-card select,.enquiry-card textarea{
background:rgba(255,255,255,0.95) !important;
border:1px solid #E2E8F0 !important;
color:#101828 !important;
border-radius:12px;
}
.form-card label,.enquiry-card label{color:#0B1220;font-weight:600}
.form-card ::placeholder,.enquiry-card ::placeholder{color:#64748B}
/* Soft section glow backgrounds */
.section-academic{
background:
radial-gradient(circle at top left, rgba(49,46,129,0.08), transparent 35%),
radial-gradient(circle at bottom right, rgba(15,118,110,0.06), transparent 35%),
#F8FAFC;
}
.section-awards{
background:
radial-gradient(circle at top right, rgba(212,175,55,0.10), transparent 40%),
#F8FAFC;
}
/* Mobile tuning */
@media (max-width:768px){
.mv-card,.value-card,.facility-card,.award-card,.contact-card,.parent-card,
.rule-card,.f-card,.feat-card,.about-card,.why-card,.course-card,
.faq-item,.brochure-card,.enquiry-card,.form-card,.map-card-v2,.gv-card{
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
background:rgba(255,255,255,0.92) !important;
}
.mv-card:hover,.value-card:hover,.facility-card:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
.mv-card,.value-card,.facility-card,.award-card,.contact-card,.parent-card,
.rule-card,.f-card,.feat-card,.about-card,.why-card,.course-card,
.faq-item,.brochure-card,.enquiry-card,.gv-card,.gv-card img{
transition:none !important;animation:none !important;
}
}
/* v17 — restore brochure card white text */
.brochure-card{
background:linear-gradient(135deg,#0B1220 0%,#312E81 100%) !important;
border:1px solid rgba(255,255,255,.12) !important;
-webkit-backdrop-filter:none;backdrop-filter:none;
}
.brochure-card h3,.brochure-card h4,.brochure-card p,.brochure-card .bc-text,
.brochure-card .bc-text *{color:#fff !important}
.brochure-card p{color:rgba(255,255,255,.88) !important}
.brochure-card .bc-ic{color:#D4AF37 !important;background:rgba(212,175,55,.18) !important}
.brochure-card .bc-btn{
background:rgba(255,255,255,.12) !important;color:#fff !important;
border:1.5px solid rgba(255,255,255,.7) !important;
}
.brochure-card .bc-btn:hover{background:#fff !important;color:#0B1220 !important}
.brochure-card .bc-btn.ghost{
background:transparent !important;color:#fff !important;
border:1.5px solid rgba(255,255,255,.7) !important;
}
.brochure-card .bc-btn.ghost:hover{background:#fff !important;color:#0B1220 !important}
/* ============================================================
v18 — Premium glassmorphism polish + guaranteed readability
============================================================ */
:root{
--glass-bg-2:rgba(255,255,255,0.88);
--glass-border-2:rgba(255,255,255,0.85);
--glass-sheen:linear-gradient(135deg,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0.12) 45%,rgba(255,255,255,0.30) 100%);
--glass-ring:inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(15,23,42,0.04);
--glass-shadow-2:0 20px 50px rgba(15,23,42,0.10), 0 4px 14px rgba(15,23,42,0.05);
}
.mv-card,.value-card,.checklist-card,.facility-card,.award-card,.contact-card,
.parent-card,.rule-card,.enquiry-card,.f-card,.faq-item,.feat-card,
.timeline-card,.info-card,.map-card-v2,.stat-card,.about-card,.why-card,
.course-card,.process-card,.doc-card,.hostel-card,.menu-card,.notice-card,
.action-card,.form-card,.gv-card{
position:relative;
background:var(--glass-sheen),var(--glass-bg-2) !important;
-webkit-backdrop-filter:blur(22px) saturate(160%);
backdrop-filter:blur(22px) saturate(160%);
border:1px solid var(--glass-border-2) !important;
box-shadow:var(--glass-shadow-2),var(--glass-ring) !important;
border-radius:22px !important;
overflow:hidden;
}
/* Top highlight edge for that real-glass feel */
.mv-card::before,.value-card::before,.facility-card::before,.award-card::before,
.contact-card::before,.parent-card::before,.rule-card::before,.enquiry-card::before,
.f-card::before,.faq-item::before,.feat-card::before,.about-card::before,
.why-card::before,.course-card::before,.form-card::before,.info-card::before,
.stat-card::before,.process-card::before,.doc-card::before,.action-card::before{
content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
pointer-events:none;
}
/* Force ALL inner content readable on the white-glass surface */
.mv-card,.value-card,.facility-card,.award-card,.contact-card,.parent-card,
.rule-card,.enquiry-card,.f-card,.faq-item,.feat-card,.about-card,.why-card,
.course-card,.info-card,.stat-card,.process-card,.doc-card,.hostel-card,
.menu-card,.notice-card,.action-card,.form-card,.timeline-card,
.checklist-card,.map-card-v2{ color:#0B1220 !important; }
.mv-card *:not(a):not(.btn):not(.ic):not(i):not(.badge):not(.tag),
.value-card *:not(a):not(.btn):not(.ic):not(i):not(.badge):not(.tag),
.facility-card *:not(a):not(.btn):not(.ic):not(i):not(.badge):not(.tag),
.award-card *:not(a):not(.btn):not(.ic):not(i):not(.badge):not(.tag),
.contact-card *:not(a):not(.btn):not(.ic):not(i):not(.badge):not(.tag),
.parent-card *:not(a):not(.btn):not(.ic):not(i):not(.badge):not(.tag),
.rule-card *:not(a):not(.btn):not(.ic):not(i):not(.badge):not(.tag),
.enquiry-card *:not(a):not(.btn):not(.ic):not(i):not(.badge):not(.tag),
.f-card *:not(a):not(.btn):not(.ic):not(i):not(.badge):not(.tag),
.faq-item *:not(a):not(.btn):not(.ic):not(i):not(.badge):not(.tag),
.feat-card *:not(a):not(.btn):not(.ic):not(i):not(.badge):not(.tag),
.about-card *:not(a):not(.btn):not(.ic):not(i):not(.badge):not(.tag),
.why-card *:not(a):not(.btn):not(.ic):not(i):not(.badge):not(.tag),
.course-card *:not(a):not(.btn):not(.ic):not(i):not(.badge):not(.tag){
color:inherit;
}
/* Headings — strong navy */
.mv-card :is(h1,h2,h3,h4,h5,h6),.value-card :is(h1,h2,h3,h4,h5,h6),
.facility-card :is(h1,h2,h3,h4,h5,h6),.award-card :is(h1,h2,h3,h4,h5,h6),
.contact-card :is(h1,h2,h3,h4,h5,h6),.parent-card :is(h1,h2,h3,h4,h5,h6),
.rule-card :is(h1,h2,h3,h4,h5,h6),.enquiry-card :is(h1,h2,h3,h4,h5,h6),
.f-card :is(h1,h2,h3,h4,h5,h6),.faq-item :is(h1,h2,h3,h4,h5,h6),
.feat-card :is(h1,h2,h3,h4,h5,h6),.about-card :is(h1,h2,h3,h4,h5,h6),
.why-card :is(h1,h2,h3,h4,h5,h6),.course-card :is(h1,h2,h3,h4,h5,h6),
.info-card :is(h1,h2,h3,h4,h5,h6),.stat-card :is(h1,h2,h3,h4,h5,h6),
.process-card :is(h1,h2,h3,h4,h5,h6),.doc-card :is(h1,h2,h3,h4,h5,h6),
.action-card :is(h1,h2,h3,h4,h5,h6),.form-card :is(h1,h2,h3,h4,h5,h6){
color:#0B1220 !important;font-weight:700;
}
/* Body copy — soft slate */
.mv-card :is(p,li,span,small,div),.value-card :is(p,li,span,small),
.facility-card :is(p,li,span,small),.award-card :is(p,li,span,small),
.contact-card :is(p,li,span,small),.parent-card :is(p,li,span,small),
.rule-card :is(p,li,span,small),.enquiry-card :is(p,li,small),
.f-card :is(p,li,span,small),.faq-item :is(p,li,span,small),
.feat-card :is(p,li,span,small),.about-card :is(p,li,span,small),
.why-card :is(p,li,span,small),.course-card :is(p,li,span,small),
.info-card :is(p,li,span,small),.process-card :is(p,li,span,small),
.doc-card :is(p,li,span,small),.action-card :is(p,li,span,small){
color:#334155 !important;
}
/* Strong / labels keep darker */
.mv-card strong,.value-card strong,.facility-card strong,.award-card strong,
.parent-card strong,.rule-card strong,.contact-card strong,.about-card strong,
.why-card strong,.course-card strong,.f-card strong,.feat-card strong,
.info-card strong,.faq-item strong{color:#0B1220 !important;font-weight:700}
/* Links inside cards stay branded purple */
.mv-card a:not(.btn),.value-card a:not(.btn),.facility-card a:not(.btn),
.award-card a:not(.btn),.parent-card a:not(.btn),.rule-card a:not(.btn),
.contact-card a:not(.btn),.about-card a:not(.btn),.why-card a:not(.btn),
.course-card a:not(.btn),.f-card a:not(.btn),.feat-card a:not(.btn),
.info-card a:not(.btn),.faq-item a:not(.btn){
color:#312E81 !important;text-decoration:none;font-weight:600;
}
/* Icon circles — slightly stronger tint so they pop on glass */
.mv-icon,.value-card .ic,.facility-card .ic,.parent-card .ic,.rule-card .ic,
.contact-card .ic,.f-card .ic,.feat-card .ic,.about-card .ic,.why-card .ic,
.course-card .ic,.faq-item .ic,.enquiry-card .ic,.award-card .ic,
.process-card .ic{
box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 6px 18px rgba(15,23,42,.08);
}
/* Hover — clearer lift */
@media (hover:hover){
.mv-card:hover,.value-card:hover,.facility-card:hover,.parent-card:hover,
.rule-card:hover,.contact-card:hover,.f-card:hover,.feat-card:hover,
.about-card:hover,.why-card:hover,.course-card:hover,.faq-item:hover,
.enquiry-card:hover,.award-card:hover,.info-card:hover,.process-card:hover,
.doc-card:hover,.action-card:hover{
background:var(--glass-sheen),rgba(255,255,255,.95) !important;
box-shadow:0 28px 60px rgba(15,23,42,.16),var(--glass-ring) !important;
}
}
/* Brochure card keeps dark navy/purple gradient and white text (v17) */
.brochure-card{
background:linear-gradient(135deg,#0B1220 0%,#312E81 100%) !important;
-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
overflow:hidden;
}
.brochure-card::before{display:none}
.brochure-card *,.brochure-card :is(h1,h2,h3,h4,p,li,span,small,strong){color:#fff !important}
.brochure-card p{color:rgba(255,255,255,.9) !important}
/* Gallery captions readable */
.gv-card .cap,.gv-card .overlay,.feat-card .cap{
color:#fff !important;
}
.gv-card .cap *,.gv-card .overlay *,.feat-card .cap *{color:#fff !important}
/* Mobile — reduce blur cost, keep solid look */
@media (max-width:768px){
.mv-card,.value-card,.facility-card,.award-card,.contact-card,.parent-card,
.rule-card,.f-card,.feat-card,.about-card,.why-card,.course-card,
.faq-item,.enquiry-card,.form-card,.map-card-v2,.gv-card,.info-card,
.stat-card,.process-card,.doc-card,.action-card{
background:var(--glass-sheen),rgba(255,255,255,0.96) !important;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
}
/* ============================================================
v19 — Dribbble "Glass Morphism Template" inspired cards
(translucent frosted glass over colorful gradient blobs)
============================================================ */
/* Colorful blurred blobs behind every section so the glass effect
on top of cards becomes visible (without hurting readability). */
section, .section, main > .container, .page-section{ position:relative; }
section::before, .section::before, .page-section::before{
content:"";
position:absolute; inset:0;
pointer-events:none; z-index:0;
background:
radial-gradient(420px 360px at 8% 12%, rgba(124,58,237,.22), transparent 60%),
radial-gradient(380px 320px at 92% 18%, rgba(14,165,233,.20), transparent 60%),
radial-gradient(460px 380px at 80% 92%, rgba(236,72,153,.18), transparent 60%),
radial-gradient(360px 300px at 12% 88%, rgba(16,185,129,.18), transparent 60%);
filter: blur(10px);
opacity:.55;
}
section > *, .section > *, .page-section > *{ position:relative; z-index:1; }
/* Premium glass cards — Dribbble look */
.mv-card,.value-card,.checklist-card,.facility-card,.award-card,.contact-card,
.parent-card,.rule-card,.enquiry-card,.f-card,.faq-item,.feat-card,
.timeline-card,.info-card,.map-card-v2,.stat-card,.about-card,.why-card,
.course-card,.process-card,.doc-card,.hostel-card,.menu-card,.notice-card,
.action-card,.form-card,.gv-card{
position:relative;
background:
linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.55) 100%) !important;
-webkit-backdrop-filter: blur(28px) saturate(180%);
backdrop-filter: blur(28px) saturate(180%);
border:1px solid rgba(255,255,255,.65) !important;
border-radius:24px !important;
box-shadow:
0 30px 60px -20px rgba(15,23,42,.25),
0 10px 25px -10px rgba(15,23,42,.12),
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 -1px 0 rgba(15,23,42,.04) !important;
overflow:hidden;
isolation:isolate;
}
/* Diagonal sheen highlight — the signature Dribbble move */
.mv-card::after,.value-card::after,.facility-card::after,.award-card::after,
.contact-card::after,.parent-card::after,.rule-card::after,.enquiry-card::after,
.f-card::after,.faq-item::after,.feat-card::after,.about-card::after,
.why-card::after,.course-card::after,.info-card::after,.stat-card::after,
.process-card::after,.doc-card::after,.action-card::after,.form-card::after{
content:"";
position:absolute; inset:0;
background:linear-gradient(135deg,
rgba(255,255,255,.55) 0%,
rgba(255,255,255,.0) 28%,
rgba(255,255,255,0) 60%,
rgba(255,255,255,.18) 100%);
pointer-events:none;
mix-blend-mode:overlay;
z-index:0;
}
/* keep inner content above the sheen */
.mv-card > *, .value-card > *, .facility-card > *, .award-card > *,
.contact-card > *, .parent-card > *, .rule-card > *, .enquiry-card > *,
.f-card > *, .faq-item > *, .feat-card > *, .about-card > *, .why-card > *,
.course-card > *, .info-card > *, .stat-card > *, .process-card > *,
.doc-card > *, .action-card > *, .form-card > * { position:relative; z-index:1; }
/* Strong readability on translucent glass */
.mv-card,.value-card,.facility-card,.award-card,.contact-card,.parent-card,
.rule-card,.enquiry-card,.f-card,.faq-item,.feat-card,.about-card,.why-card,
.course-card,.info-card,.stat-card,.process-card,.doc-card,.action-card,
.form-card,.timeline-card,.checklist-card,.map-card-v2{
color:#0B1220 !important;
}
.mv-card :is(h1,h2,h3,h4,h5,h6),.value-card :is(h1,h2,h3,h4,h5,h6),
.facility-card :is(h1,h2,h3,h4,h5,h6),.award-card :is(h1,h2,h3,h4,h5,h6),
.contact-card :is(h1,h2,h3,h4,h5,h6),.parent-card :is(h1,h2,h3,h4,h5,h6),
.rule-card :is(h1,h2,h3,h4,h5,h6),.enquiry-card :is(h1,h2,h3,h4,h5,h6),
.f-card :is(h1,h2,h3,h4,h5,h6),.faq-item :is(h1,h2,h3,h4,h5,h6),
.feat-card :is(h1,h2,h3,h4,h5,h6),.about-card :is(h1,h2,h3,h4,h5,h6),
.why-card :is(h1,h2,h3,h4,h5,h6),.course-card :is(h1,h2,h3,h4,h5,h6),
.info-card :is(h1,h2,h3,h4,h5,h6),.stat-card :is(h1,h2,h3,h4,h5,h6),
.process-card :is(h1,h2,h3,h4,h5,h6),.doc-card :is(h1,h2,h3,h4,h5,h6),
.action-card :is(h1,h2,h3,h4,h5,h6),.form-card :is(h1,h2,h3,h4,h5,h6){
color:#0B1220 !important;font-weight:700;letter-spacing:-.01em;
}
.mv-card :is(p,li,span,small),.value-card :is(p,li,span,small),
.facility-card :is(p,li,span,small),.award-card :is(p,li,span,small),
.contact-card :is(p,li,span,small),.parent-card :is(p,li,span,small),
.rule-card :is(p,li,span,small),.f-card :is(p,li,span,small),
.faq-item :is(p,li,span,small),.feat-card :is(p,li,span,small),
.about-card :is(p,li,span,small),.why-card :is(p,li,span,small),
.course-card :is(p,li,span,small),.info-card :is(p,li,span,small),
.process-card :is(p,li,span,small),.doc-card :is(p,li,span,small),
.action-card :is(p,li,span,small){ color:#1f2937 !important; }
/* Hover — gentle lift, brighter glass */
@media (hover:hover){
.mv-card:hover,.value-card:hover,.facility-card:hover,.parent-card:hover,
.rule-card:hover,.contact-card:hover,.f-card:hover,.feat-card:hover,
.about-card:hover,.why-card:hover,.course-card:hover,.faq-item:hover,
.enquiry-card:hover,.award-card:hover,.info-card:hover,.process-card:hover,
.doc-card:hover,.action-card:hover{
transform:translateY(-6px);
background:
linear-gradient(135deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.65) 100%) !important;
box-shadow:
0 40px 80px -20px rgba(15,23,42,.32),
0 14px 30px -10px rgba(15,23,42,.16),
inset 0 1px 0 rgba(255,255,255,1) !important;
}
}
/* Brochure card stays dark navy/purple — overrides above */
.brochure-card{
background:linear-gradient(135deg,#0B1220 0%,#312E81 100%) !important;
-webkit-backdrop-filter:none !important; backdrop-filter:none !important;
border:1px solid rgba(255,255,255,.14) !important;
}
.brochure-card::after{display:none}
.brochure-card,.brochure-card :is(h1,h2,h3,h4,p,li,span,small,strong){color:#fff !important}
.brochure-card p{color:rgba(255,255,255,.9) !important}
/* Gallery cards keep image visible (no white wash over photos) */
.gv-card{
background:rgba(255,255,255,.35) !important;
}
.gv-card::after{display:none}
/* Mobile — lighter blur so it stays smooth */
@media (max-width:768px){
.mv-card,.value-card,.facility-card,.award-card,.contact-card,.parent-card,
.rule-card,.f-card,.feat-card,.about-card,.why-card,.course-card,.faq-item,
.enquiry-card,.form-card,.map-card-v2,.info-card,.stat-card,.process-card,
.doc-card,.action-card{
-webkit-backdrop-filter:blur(14px) saturate(160%);
backdrop-filter:blur(14px) saturate(160%);
background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.78)) !important;
}
section::before, .section::before, .page-section::before{opacity:.35}
}
/* ============================================================
v20 — Glass card readability + correct stacking
Fix: section blobs were rendering above card content because
cards live inside nested wrappers (.container > .row > .col),
so `section > * { z-index:1 }` did NOT lift them.
============================================================ */
/* Put the colorful blob layer behind everything in the section */
section, .section, .page-section { isolation: isolate; overflow: hidden; }
section::before, .section::before, .page-section::before{
z-index: -1 !important;
opacity: .45 !important;
filter: blur(40px) !important;
}
/* Every card surface — solid-enough glass so text is fully legible
while still showing the frosted-glass character on top of blobs */
.mv-card,.value-card,.checklist-card,.facility-card,.award-card,.contact-card,
.parent-card,.rule-card,.enquiry-card,.f-card,.faq-item,.feat-card,
.timeline-card,.info-card,.map-card-v2,.stat-card,.about-card,.why-card,
.course-card,.process-card,.doc-card,.hostel-card,.menu-card,.notice-card,
.action-card,.form-card{
position: relative;
z-index: 2;
background:
linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.80) 100%) !important;
-webkit-backdrop-filter: blur(22px) saturate(180%);
backdrop-filter: blur(22px) saturate(180%);
border: 1px solid rgba(255,255,255,.85) !important;
border-radius: 22px !important;
box-shadow:
0 20px 50px -16px rgba(15,23,42,.22),
0 8px 22px -10px rgba(15,23,42,.12),
inset 0 1px 0 rgba(255,255,255,.95) !important;
overflow: hidden;
}
/* Diagonal sheen — keep behind text only */
.mv-card::after,.value-card::after,.facility-card::after,.award-card::after,
.contact-card::after,.parent-card::after,.rule-card::after,.enquiry-card::after,
.f-card::after,.faq-item::after,.feat-card::after,.about-card::after,
.why-card::after,.course-card::after,.info-card::after,.stat-card::after,
.process-card::after,.doc-card::after,.action-card::after,.form-card::after{
z-index: 0 !important;
background: linear-gradient(135deg,
rgba(255,255,255,.55) 0%,
rgba(255,255,255,0) 40%,
rgba(255,255,255,0) 65%,
rgba(255,255,255,.30) 100%) !important;
}
/* Force every direct child of a card above the sheen */
.mv-card > *, .value-card > *, .facility-card > *, .award-card > *,
.contact-card > *, .parent-card > *, .rule-card > *, .enquiry-card > *,
.f-card > *, .faq-item > *, .feat-card > *, .about-card > *, .why-card > *,
.course-card > *, .info-card > *, .stat-card > *, .process-card > *,
.doc-card > *, .action-card > *, .form-card > *, .timeline-card > *,
.map-card-v2 > *, .hostel-card > *, .menu-card > *, .notice-card > *{
position: relative;
z-index: 2 !important;
}
/* Text contrast inside every glass card — guaranteed */
[class*="-card"] :is(h1,h2,h3,h4,h5,h6){ color:#0B1220 !important; }
[class*="-card"] :is(p,li,span,small,strong,label,a){ color:#1f2937 !important; }
[class*="-card"] a:hover{ color:#312E81 !important; }
/* Enquiry card action buttons must always stay white */
.enquiry-card .ec-btn,
.enquiry-card .ec-btn:hover,
.enquiry-card .ec-btn:focus,
.enquiry-card .ec-btn:active{
color:#fff !important;
}
.enquiry-card .ec-btn i,
.enquiry-card .ec-btn:hover i,
.enquiry-card .ec-btn:focus i,
.enquiry-card .ec-btn:active i{
color:#fff !important;
}
/* Brochure + dark CTA cards keep white text */
.brochure-card, .brochure-card *{ color:#fff !important; }
.brochure-card p{ color:rgba(255,255,255,.92) !important; }
/* Hover lift */
@media (hover:hover){
[class*="-card"]:hover{
transform: translateY(-6px);
background:
linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,255,255,.88)) !important;
box-shadow:
0 32px 64px -18px rgba(15,23,42,.30),
0 12px 28px -12px rgba(15,23,42,.18),
inset 0 1px 0 rgba(255,255,255,1) !important;
}
}
/* Mobile — lighter blur, fully solid for performance + readability */
@media (max-width: 768px){
[class*="-card"]{
-webkit-backdrop-filter: blur(10px) saturate(160%);
backdrop-filter: blur(10px) saturate(160%);
background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.90)) !important;
}
section::before, .section::before, .page-section::before{ opacity:.3 !important; }
}
/* ============================================================
v21 — Dribbble "Glassmorphism card" (Ali Zargar) restyle
Replace every individual card with the clean, almost-clear
frosted-glass card from the reference shot:
- ultra-light translucent white with a faint inner gradient
- hairline white border, very rounded corners
- one soft floating drop shadow, no heavy edges
- colorful blurred blobs already sit behind via v19/v20
============================================================ */
[class*="-card"]{
position: relative;
z-index: 2;
/* faint multi-tone wash to mimic the peach / lavender / mint
gradient bleeding through the glass in the reference */
background:
linear-gradient(135deg,
rgba(255,255,255,.78) 0%,
rgba(255,255,255,.62) 50%,
rgba(255,255,255,.78) 100%),
radial-gradient(120% 90% at 10% 0%, rgba(168,140,255,.18), transparent 55%),
radial-gradient(120% 90% at 95% 25%, rgba(255,176,140,.16), transparent 55%),
radial-gradient(120% 90% at 80% 100%, rgba(140,220,200,.18), transparent 55%) !important;
-webkit-backdrop-filter: blur(26px) saturate(170%);
backdrop-filter: blur(26px) saturate(170%);
border: 1px solid rgba(255,255,255,.6) !important;
border-radius: 28px !important;
box-shadow:
0 30px 60px -24px rgba(31, 38, 76, .28),
0 10px 24px -14px rgba(31, 38, 76, .18),
inset 0 1px 0 rgba(255,255,255,.9) !important;
overflow: hidden;
}
/* Inner top-edge highlight — the signature glass sheen */
[class*="-card"]::before{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(180deg,
rgba(255,255,255,.55) 0%,
rgba(255,255,255,0) 18%);
pointer-events: none;
z-index: 0;
}
/* Kill the older diagonal sheen (was too heavy on top of the new wash) */
[class*="-card"]::after{ display: none !important; }
/* Make sure every direct child stays above the highlight layer */
[class*="-card"] > *{ position: relative; z-index: 2 !important; }
/* Text contrast on the new clearer glass */
[class*="-card"] :is(h1,h2,h3,h4,h5,h6){
color:#0B1220 !important;
font-weight: 700;
letter-spacing:-.01em;
}
[class*="-card"] :is(p,li,span,small,label){ color:#1f2937 !important; }
[class*="-card"] strong{ color:#0B1220 !important; }
/* Hover — gentle lift, slightly brighter glass */
@media (hover:hover){
[class*="-card"]{ transition: transform .35s ease, box-shadow .35s ease, background .35s ease; }
[class*="-card"]:hover{
transform: translateY(-6px);
box-shadow:
0 42px 80px -24px rgba(31, 38, 76, .34),
0 16px 32px -16px rgba(31, 38, 76, .22),
inset 0 1px 0 rgba(255,255,255,1) !important;
}
}
/* Brochure / dark CTA cards keep their navy→purple identity */
.brochure-card{
background: linear-gradient(135deg,#0B1220 0%, #312E81 100%) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border: 1px solid rgba(255,255,255,.14) !important;
}
.brochure-card::before{ display:none !important; }
.brochure-card, .brochure-card *{ color:#fff !important; }
.brochure-card p{ color: rgba(255,255,255,.92) !important; }
/* Gallery cards must keep the photo visible — no white wash */
.gv-card{
background: rgba(255,255,255,.10) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border: 1px solid rgba(255,255,255,.35) !important;
}
.gv-card::before{ display:none !important; }
/* Mobile — drop blur cost, keep look */
@media (max-width: 768px){
[class*="-card"]{
-webkit-backdrop-filter: blur(12px) saturate(160%);
backdrop-filter: blur(12px) saturate(160%);
border-radius: 24px !important;
}
}
/* v21.1 — Extend glass treatment to non-`-card` surfaces on Rules page
(.item rule groups and .notice-box callout) so every individual card
across all pages matches the Dribbble reference. */
.rule-section .item, .notice-box, .checklist-card, .map-card-v2{
position: relative;
z-index: 2;
background:
linear-gradient(135deg,
rgba(255,255,255,.78) 0%,
rgba(255,255,255,.62) 50%,
rgba(255,255,255,.78) 100%),
radial-gradient(120% 90% at 10% 0%, rgba(168,140,255,.18), transparent 55%),
radial-gradient(120% 90% at 95% 25%, rgba(255,176,140,.16), transparent 55%),
radial-gradient(120% 90% at 80% 100%, rgba(140,220,200,.18), transparent 55%) !important;
-webkit-backdrop-filter: blur(26px) saturate(170%);
backdrop-filter: blur(26px) saturate(170%);
border: 1px solid rgba(255,255,255,.6) !important;
border-radius: 28px !important;
box-shadow:
0 30px 60px -24px rgba(31, 38, 76, .28),
0 10px 24px -14px rgba(31, 38, 76, .18),
inset 0 1px 0 rgba(255,255,255,.9) !important;
overflow: hidden;
}
.rule-section .item::before, .notice-box::before{
content:""; position:absolute; inset:0; border-radius:inherit;
background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 18%);
pointer-events:none; z-index:0;
}
.rule-section .item > *, .notice-box > *{ position:relative; z-index:2; }
@media (hover:hover){
.rule-section .item, .notice-box{ transition: transform .35s ease, box-shadow .35s ease; }
.rule-section .item:hover{
transform: translateY(-6px);
box-shadow:
0 42px 80px -24px rgba(31, 38, 76, .34),
0 16px 32px -16px rgba(31, 38, 76, .22),
inset 0 1px 0 rgba(255,255,255,1) !important;
}
}
/* Mobile tap state — all cards get a subtle press feedback */
[class*="-card"]:active, .rule-section .item:active, .notice-box:active{
transform: translateY(-2px) scale(.995);
transition: transform .12s ease;
}
/* Keyboard focus ring on focusable cards / links inside them */
[class*="-card"]:focus-visible,
[class*="-card"] a:focus-visible,
.rule-section .item:focus-visible{
outline: 2px solid #312E81;
outline-offset: 3px;
border-radius: 28px;
}
@media (max-width: 768px){
.rule-section .item, .notice-box{
-webkit-backdrop-filter: blur(12px) saturate(160%);
backdrop-filter: blur(12px) saturate(160%);
border-radius: 24px !important;
}
}
/* FIX: Brochure card must never turn white on hover */
.brochure-card:hover,
.brochure-card:focus-within{
background: linear-gradient(135deg,#0B1220 0%, #312E81 100%) !important;
color: #fff !important;
}
.brochure-card:hover *,
.brochure-card:focus-within *{
color: #fff !important;
}
.brochure-card:hover p,
.brochure-card:focus-within p{
color: rgba(255,255,255,.92) !important;
}
.brochure-card:hover .bc-btn,
.brochure-card:focus-within .bc-btn{
background: rgba(255,255,255,.12) !important;
color: #fff !important;
border-color: rgba(255,255,255,.7) !important;
}
.brochure-card:hover .bc-btn:hover,
.brochure-card:focus-within .bc-btn:hover{
background: #fff !important;
color: #0B1220 !important;
}
/* ============ v22 — Adm-strip visibility + brochure ghost contrast ============ */
.adm-strip{padding:1rem 0 1.25rem !important}
.adm-strip .wrap{
background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(243,240,255,.85)) !important;
border:1.5px solid rgba(49,46,129,.18) !important;
border-radius:18px !important;
padding:1rem 1.25rem !important;
box-shadow:0 10px 30px rgba(15,23,42,.08) !important;
backdrop-filter:blur(14px);
}
.adm-strip h4,.adm-strip h4 *{color:#0B1220 !important;font-weight:800 !important}
.adm-strip p{color:#334155 !important}
.adm-strip .mini-btn{
background:#0B1220 !important;color:#fff !important;border:2px solid #0B1220 !important;
font-weight:700 !important;padding:.55rem 1rem !important;border-radius:999px !important;
}
.adm-strip .mini-btn:hover{background:#312E81 !important;border-color:#312E81 !important;color:#fff !important}
.adm-strip .mini-btn.wa{background:#25D366 !important;border-color:#25D366 !important;color:#fff !important}
.adm-strip .mini-btn.wa:hover{background:#1ebe57 !important;border-color:#1ebe57 !important}
.adm-strip .mini-btn.ghost{
background:#D4AF37 !important;color:#0B1220 !important;border:2px solid #D4AF37 !important;
}
.adm-strip .mini-btn.ghost:hover{background:#0B1220 !important;color:#D4AF37 !important;border-color:#0B1220 !important}
/* brochure card ghost button readable on dark gradient */
.brochure-card .bc-btn.ghost{
background:rgba(255,255,255,.12) !important;color:#fff !important;
border:2px solid #D4AF37 !important;
}
.brochure-card .bc-btn.ghost:hover{background:#D4AF37 !important;color:#0B1220 !important}
/* v23 — Awards 3-card grid + mobile polish */
.rank-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;align-items:stretch}
.rank-card{display:flex;flex-direction:column;min-width:0}
@media (max-width: 992px){
.rank-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.rank-card.rank-pass{grid-column:1 / -1}
}
@media (max-width: 576px){
.rank-grid{grid-template-columns:1fr !important}
.rank-card.rank-pass{grid-column:auto}
}
/* Top contact strip — graceful mobile stacking, no overflow */
.top-strip{overflow-x:hidden}
.top-strip .container > div{display:flex;flex-wrap:wrap;gap:.35rem .9rem;min-width:0;width:100%}
.top-strip .item{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;white-space:nowrap;max-width:100%}
.top-strip .item a{word-break:break-word}
@media (max-width: 576px){
.top-strip{font-size:.78rem;padding:.4rem 0}
.top-strip .item{font-size:.76rem}
}
/* Page banner buttons — no horizontal overflow on small screens */
.page-banner .btn-banner{white-space:normal;word-break:keep-all}
@media (max-width: 480px){
.page-banner .btn-banner{width:100%;justify-content:center}
}
/* Hero / CTA action rows wrap cleanly on phones */
@media (max-width: 480px){
.cta-section .d-flex > *,
.bc-actions .bc-btn,
.ec-actions .ec-btn{width:100%;justify-content:center}
}
/* Brochure card stacks on small screens */
@media (max-width: 768px){
.brochure-card{flex-direction:column;text-align:center}
.brochure-card .bc-actions{justify-content:center;flex-wrap:wrap}
}
/* Ensure body never scrolls horizontally */
html,body{overflow-x:hidden;max-width:100%}
img,iframe{max-width:100%}
/* Mobile-actions bar — never overlap content */
@media (max-width: 767.98px){
body{padding-bottom:78px}
.wa-float,.back-top{bottom:92px !important}
}
/* Hero CTAs — vertical stack with full-width touch targets on small screens */
@media (max-width: 576px){
.hero-cta{flex-direction:column !important;align-items:stretch !important;gap:.75rem !important}
.hero-cta > a,
.hero-cta > button{width:100% !important;justify-content:center !important;min-height:48px !important;padding:.85rem 1rem !important;font-size:1rem !important}
}