/* ==========================================================================
GOWBELL OLYMPIADS — Design tokens
Font: Noto Sans, loaded via Google Fonts (see the tags in each
page's ). Previously this stack listed "Gauthami" first — a
Windows/Office system font that Microsoft does not license for web-font
embedding, so it only rendered for the small number of visitors who
happened to have it installed locally, and everyone else silently fell
back to something else. Noto Sans is free, open-source, and loads
identically for every visitor regardless of device or OS.
========================================================================== */
:root{
--navy: #0033E0;
--navy-deep: #001EA6;
--blue: #0055FF;
--sky: #2B7CFF;
--gold: #FFC400;
--gold-deep: #D99A00;
--gold-soft: #FFE199;
--emerald: #0E9F6E;
--coral: #FF6B4A;
--violet: #6C4BD1;
--ink: #0C1330;
--slate: #5B6472;
--slate-soft: #8891A3;
--cloud: #F4F7FC;
--line: #E6EAF2;
--white: #FFFFFF;
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 22px;
--shadow-sm: 0 2px 8px rgba(12,19,48,.06), 0 1px 2px rgba(12,19,48,.05);
--shadow-md: 0 14px 32px -6px rgba(12,19,48,.14), 0 4px 10px rgba(12,19,48,.06);
--shadow-lg: 0 26px 56px -10px rgba(0,19,71,.22), 0 8px 18px rgba(0,19,71,.08);
--shadow-gold: 0 14px 28px -8px rgba(217,154,0,.45);
}
*{ box-sizing:border-box; }
body{
font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
font-weight: 400;
color: var(--ink);
background: var(--white);
-webkit-font-smoothing:antialiased;
}
/* Body copy justified by default, but only where it reads as genuine
paragraph content. Hero subtitles, footer text, and short section
taglines are excluded and restored to their natural (inherited)
alignment, since justify only looks right on substantial multi-line
paragraphs, not short intro/UI text. */
p{ text-align: justify; text-justify: inter-word; }
.page-hero-sub, .hero-subtitle, .footer-text, .section-sub,
.supported-badge, .breadcrumb-custom, button, .btn, a.btn{ text-align: inherit; }
/* Any paragraph inside a Bootstrap .text-center wrapper (icon+label tiles,
centered card content, etc.) should stay centered rather than being
forced to justify — the wrapper's intent always wins here. */
.text-center p{ text-align: inherit; }
/* .text-muted is Bootstrap's own convention for short secondary/caption
text (role lines, captions, etc.) — never long-form content, so it
should never be justified either. */
p.text-muted, .text-muted p{ text-align: inherit; }
h1,h2,h3,h4,h5,h6, .fw-bold, b, strong{
font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
font-weight: 700;
}
p, span, a, li, input, button{ font-family:"Noto Sans","Segoe UI",Arial,sans-serif; }
a{ text-decoration:none; transition: color .18s ease; }
img{ max-width:100%; }
.container{ max-width:1240px; }
::selection{ background:var(--gold); color:var(--navy-deep); }
/* focus visibility (accessibility floor) */
a:focus-visible, button:focus-visible, input:focus-visible{
outline: 3px solid var(--gold); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
*{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
.tint-gold{ background: radial-gradient(900px 320px at 90% 0%, rgba(255,196,0,.14), transparent 60%), linear-gradient(180deg,#FFFDF6,#fff); }
.tint-coral{ background: radial-gradient(900px 320px at 5% 0%, rgba(255,107,74,.10), transparent 60%), linear-gradient(180deg,#FFF8F6,#fff); }
.tint-violet{ background: radial-gradient(900px 320px at 90% 100%, rgba(108,75,209,.09), transparent 60%), linear-gradient(180deg,#F9F7FE,#fff); }
.tint-emerald{ background: radial-gradient(900px 320px at 5% 100%, rgba(14,159,110,.10), transparent 60%), linear-gradient(180deg,#F5FCF9,#fff); }
.tint-blue{ background: radial-gradient(900px 320px at 50% 0%, rgba(11,63,160,.08), transparent 60%), linear-gradient(180deg,#F5F8FE,#fff); }
.text-yellow{ color: var(--gold); }
.section-eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-size:12.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
color: var(--navy); background: linear-gradient(135deg, rgba(0,44,140,.08), rgba(255,196,0,.10));
border:1px solid rgba(0,44,140,.10);
padding:6px 16px; border-radius:999px; margin-bottom:16px;
}
.section-eyebrow i{ color: var(--gold-deep); }
.section-title{
font-size: clamp(24px,3vw,34px); font-weight:700; color: var(--navy-deep);
margin-bottom:14px; letter-spacing:-.2px; position:relative;
}
.section-sub{ color: var(--slate); font-size:15.5px; max-width:620px; }
.section-sub[style*="justify"]{ text-align-last: left; line-height:1.75; }
.section-head{ margin-bottom:48px; }
.section-head.center{ text-align:center; }
.section-head.center .section-sub{ margin-left:auto; margin-right:auto; }
.section-head.center .section-title::after{
content:""; display:block; width:130px; height:16px; margin:16px auto 0;
background: url("data:image/svg+xml;utf8,") no-repeat center;
background-size: contain;
}
.mini-divider{
width:76px; height:12px;
background: url("data:image/svg+xml;utf8,") no-repeat center;
background-size: contain;
}
/* ==========================================================================
TOP BAR + NAV (kept, refined)
========================================================================== */
.top-bar{ background: linear-gradient(90deg, var(--gold), var(--gold-deep)); font-size:13.5px; }
.top-bar a{ color: var(--navy-deep); }
.top-bar a:hover{ color: var(--white); }
.top-contact-info a{ font-weight:700; }
.top-social-icons a{
width:28px;height:28px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(0,26,86,.14); color: var(--navy-deep); font-size:12px;
}
.top-social-icons a:hover{ background: var(--navy-deep); color: var(--gold); }
.btn-login{
color: var(--navy-deep); font-weight:700; font-size:13px;
border-left:1px solid rgba(0,26,86,.25); padding-left:16px;
}
.btn-login:hover{ color: var(--navy); }
.navbar{ padding-top:14px; padding-bottom:14px; }
.site-header{ position:fixed; top:0; left:0; width:100%; z-index:1030; }
/* Fallback offset so content never sits under the fixed header, even for the
brief moment before JS measures the real height (or if JS fails to run). */
body{ padding-top:112px; }
@media (max-width:767.98px){ body{ padding-top:96px; } }
.custom-nav .nav-link{
color: var(--ink) !important; font-weight:700; font-size:14.5px;
padding: 10px 16px !important; position:relative;
}
.custom-nav .nav-link.active,.custom-nav .nav-link:hover{ color: var(--navy) !important; }
.custom-nav .nav-link.active::after{
content:""; position:absolute; left:16px; right:16px; bottom:4px; height:3px;
background: var(--gold); border-radius:2px;
}
.dropdown-menu{ border-radius:12px; padding:8px; box-shadow: var(--shadow-md); border:1px solid var(--line); }
.dropdown-item{ border-radius:8px; padding:9px 14px; font-weight:400; font-size:14px; }
.dropdown-item:hover{ background: var(--cloud); color: var(--navy); }
.brand-logo{ height:40px; width:auto; display:block; }
@media (min-width:576px){ .brand-logo{ height:46px; } }
/* ==========================================================================
HERO
========================================================================== */
.hero-section{
background: radial-gradient(1100px 520px at 85% -10%, rgba(255,196,0,.14), transparent 60%), radial-gradient(700px 400px at 5% 110%, rgba(46,107,230,.25), transparent 60%), linear-gradient(160deg, var(--navy-deep), var(--navy) 55%, var(--blue));
position:relative; overflow:hidden;
}
.hero-section::before{
content:""; position:absolute; inset:0;
background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
background-size: 26px 26px; opacity:.35; pointer-events:none;
}
.hero-title{ font-size: clamp(30px,4vw,46px); line-height:1.15; letter-spacing:-.5px; }
.hero-subtitle{ font-size:17px; color:#D9E2F7; max-width:540px; }
.feature-text{ font-size:13.5px; font-weight:700; color:#EAF0FE; line-height:1.3; }
.btn-hero-yellow{
background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--navy-deep); font-weight:700; font-size:15px;
padding:14px 28px; border-radius:999px; box-shadow: var(--shadow-gold);
transition: transform .18s ease, box-shadow .18s ease;
display:inline-flex; align-items:center;
}
.btn-hero-yellow:hover{ background:#fff; color:var(--navy-deep); transform:translateY(-3px); box-shadow: 0 18px 34px -8px rgba(0,0,0,.35); }
.btn-hero-link{ color:#fff; font-weight:700; font-size:15px; border-bottom:2px solid rgba(255,255,255,.4); padding-bottom:2px; transition: color .18s ease, border-color .18s ease; }
.btn-hero-link:hover{ color: var(--gold); border-color: var(--gold); }
.hero-badge-art{ position:relative; width:100%; max-width:420px; margin:0 auto; }
.hero-badge-art svg{ width:100%; height:auto; filter: drop-shadow(0 25px 40px rgba(0,0,0,.35)); }
.hero-chip{
position:absolute; background:#fff; border-radius:14px; padding:10px 14px;
box-shadow: var(--shadow-lg); display:flex; align-items:center; gap:10px; font-weight:700; font-size:13px; color:var(--navy-deep);
}
.hero-chip i{ color: var(--gold-deep); }
.hero-chip.chip-a{ top:6%; left:-6%; }
.hero-chip.chip-b{ bottom:8%; right:-8%; }
.owl-theme .owl-dots .owl-dot span{ background:rgba(255,255,255,.35); width:9px; height:9px; }
.owl-theme .owl-dots .owl-dot.active span{ background: var(--gold); width:24px; border-radius:6px; }
/* Hero slider uses animateOut:'fadeOut' / animateIn:'fadeIn'. Owl Carousel needs these
keyframes and stacking rules itself (it doesn't ship them) — without this, the
outgoing slide never finishes its "animation" and is left stacked under the new
one, causing the double/ghosted text seen while switching slides. */
.hero-slider .owl-item{ position:relative; }
.hero-slider .owl-item.owl-animated-out{ position:absolute; top:0; left:0; width:100%; z-index:1; }
.hero-slider .owl-item.owl-animated-in{ z-index:0; }
.hero-slider .animated{ animation-duration:600ms; animation-fill-mode:both; }
.hero-slider .fadeOut{ animation-name:heroFadeOut; }
.hero-slider .fadeIn{ animation-name:heroFadeIn; }
@keyframes heroFadeOut{ 0%{ opacity:1; } 100%{ opacity:0; } }
@keyframes heroFadeIn{ 0%{ opacity:0; } 100%{ opacity:1; } }
/* ==========================================================================
NEWS TICKER
========================================================================== */
.news-ticker-section{ background:#fff; border:2px solid var(--gold); }
.news-badge{ color:var(--navy); font-size:12.5px; border-right:1px solid var(--line); }
.news-item{ font-size:13.5px; color:var(--ink); white-space:nowrap; padding:12px 0; }
.news-item .badge{ display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; line-height:1; }
.news-link{ color:var(--navy); font-weight:700; margin-left:4px; }
.news-divider{ font-size:5px; }
.news-ticker-track{ animation: ticker 26s linear infinite; width:max-content; }
.news-ticker-wrapper:hover .news-ticker-track{ animation-play-state: paused; }
@keyframes ticker{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-50%);} }
/* ==========================================================================
QUICK-ACCESS STRIP (rebuilt "All You Need" section)
========================================================================== */
.quick-strip{
position:relative; overflow:hidden;
background: radial-gradient(1000px 420px at 12% 0%, rgba(255,196,0,.10), transparent 60%), linear-gradient(150deg, var(--navy-deep), var(--navy) 55%, var(--blue));
}
.quick-strip::before{
content:""; position:absolute; inset:0;
background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
background-size: 24px 24px; pointer-events:none;
}
.quick-strip .section-eyebrow{ background: rgba(255,255,255,.1); color:#fff; border-color: rgba(255,255,255,.14); }
.quick-strip .section-eyebrow i{ color: var(--gold); }
.quick-strip .section-title{ color:#fff; }
.quick-strip .section-sub{ color:#C6D3F2; }
.tile-badge{
position:absolute; top:-11px; right:16px; z-index:3;
background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color:var(--navy-deep);
font-size:9.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
padding:4px 10px; border-radius:999px; box-shadow: 0 6px 14px -4px rgba(0,0,0,.4);
}
/* Bootstrap only ships row-cols-1 through row-cols-6 by default — 7-per-row needs a manual rule */
@media (min-width: 992px){
.row-cols-lg-7 > *{
flex: 0 0 auto;
width: 14.2857143%;
}
}
.quick-tile{
display:flex; flex-direction:column; align-items:center; text-align:center;
background: color-mix(in srgb, var(--accent, var(--navy)) 6%, #fff);
border: 1px solid color-mix(in srgb, var(--accent, var(--navy)) 20%, var(--line));
border-radius: var(--radius);
padding: 28px 12px 22px;
position:relative; overflow:hidden;
height:100%;
transition: transform .22s ease, box-shadow .22s ease;
}
.quick-tile::before{
content:""; position:absolute; top:0; left:0; right:0; height:5px; background: var(--accent, var(--navy));
}
.quick-tile:hover{ transform:translateY(-6px); box-shadow: var(--shadow-lg); }
.quick-tile-icon{
width:64px; height:64px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background: var(--accent, var(--navy)); margin-bottom:16px; flex-shrink:0;
box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--accent, var(--navy)) 60%, transparent);
}
.quick-tile-icon svg{ width:30px; height:30px; }
.quick-tile-title{
font-size:13.5px; font-weight:700; color: var(--accent, var(--navy));
margin-bottom:16px; line-height:1.28; min-height:34px; display:flex; align-items:center; justify-content:center;
}
.quick-tile-cta{
font-size:10.5px; font-weight:700; color:#fff; background: var(--accent, var(--navy));
padding:7px 15px; border-radius:999px; display:inline-flex; align-items:center; gap:5px;
transition: filter .18s ease, transform .18s ease; margin-top:auto;
}
.quick-tile-cta i{ font-size:9px; transition: transform .2s; }
.quick-tile:hover .quick-tile-cta{ filter:brightness(1.08); }
.quick-tile:hover .quick-tile-cta i{ transform:translateX(3px); }
/* ==========================================================================
PROGRAMS (Featured Initiative)
========================================================================== */
.program-card{
background: color-mix(in srgb, var(--accent, var(--navy)) 6%, #fff);
border-radius:18px; border:1px solid color-mix(in srgb, var(--accent, var(--navy)) 18%, var(--line));
padding:28px 20px; height:100%; text-align:center; position:relative; overflow:hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
.program-card:hover{ transform: translateY(-7px); box-shadow: var(--shadow-lg); }
.program-card::before{
content:""; position:absolute; top:0; left:0; right:0; height:6px; background: var(--accent, var(--navy));
}
.program-code{ font-size:23px; font-weight:700; color: var(--accent, var(--navy)); margin-bottom:2px; letter-spacing:.5px; }
.program-name{ font-size:13.5px; color:var(--slate); margin-bottom:18px; }
.program-mark{
width:60px; height:60px; border-radius:50%; margin:0 auto 14px;
display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff;
background: var(--accent, var(--navy));
box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--accent, var(--navy)) 70%, transparent);
}
.program-link{
font-size:12px; font-weight:700; color:#fff; background: var(--accent, var(--navy));
padding:7px 16px; border-radius:999px; display:inline-block;
}
.program-link:hover{ filter:brightness(1.1); color:#fff; }
/* ==========================================================================
ABACUS / SCHOOL PARTNER BANNER
========================================================================== */
.partner-banner{
background: linear-gradient(135deg, var(--gold), var(--gold-deep));
border-radius:22px; overflow:hidden; position:relative;
}
.partner-banner::after{
content:""; position:absolute; inset:0;
background-image: radial-gradient(rgba(0,26,86,.10) 1px, transparent 1px);
background-size: 22px 22px;
}
.partner-col{ position:relative; z-index:1; padding:40px 34px; }
.partner-col + .partner-col{ border-top:1px solid rgba(0,26,86,.16); }
@media (min-width:768px){
.partner-col + .partner-col{ border-top:none; border-left:1px solid rgba(0,26,86,.16); }
}
.partner-ico{
width:58px; height:58px; border-radius:16px; background: rgba(0,26,86,.12);
display:flex; align-items:center; justify-content:center; font-size:24px; color: var(--navy-deep);
flex-shrink:0;
}
.partner-title{ color: var(--navy-deep); font-size:19px; margin-bottom:8px; }
.partner-text{ color:#4A3300; font-size:14px; line-height:1.6; }
.btn-gold-outline{
display:inline-flex; align-items:center; gap:8px; color: var(--navy-deep); font-weight:700; font-size:13.5px;
border:1.5px solid var(--navy-deep); padding:10px 20px; border-radius:999px; margin-top:16px;
transition: background .18s ease, color .18s ease, transform .18s ease;
}
.btn-gold-outline:hover{ background: var(--navy-deep); color:#fff; transform:translateY(-2px); }
/* ==========================================================================
CAMPAIGNS
========================================================================== */
.campaign-card{
background: color-mix(in srgb, var(--accent, var(--navy)) 5%, #fff);
border-radius:var(--radius); border:1px solid color-mix(in srgb, var(--accent, var(--navy)) 20%, var(--line));
border-top:4px solid var(--accent, var(--navy));
padding:28px 22px; height:100%;
transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.campaign-card:hover{ box-shadow: var(--shadow-lg); transform:translateY(-5px); }
.campaign-ico{
width:52px; height:52px; border-radius:14px; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:16px;
background: var(--accent, var(--navy));
box-shadow: 0 10px 18px -6px color-mix(in srgb, var(--accent, var(--navy)) 60%, transparent);
}
.campaign-title{ font-size:17px; color:var(--navy-deep); }
.campaign-text{ font-size:14px; color:var(--slate); line-height:1.6; }
.read-more-link{ font-size:12.5px; font-weight:700; color:var(--navy); transition: gap .18s ease; }
/* ==========================================================================
HALL OF FAME — Podium redesign
========================================================================== */
.fame-section{ background: radial-gradient(1000px 420px at 85% 0%, rgba(11,63,160,.18), transparent 60%), linear-gradient(180deg, #0B1220, #101A30 55%, #0B1220); position:relative; overflow:hidden; }
.fame-section::before{
content:""; position:absolute; inset:0;
background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 24px 24px;
}
.fame-tag{ font-size:13px; color:#B9C8EE; }
/* Toppers — card + ribbon redesign */
.toppers-tab-bar{ background:#fff; padding:6px; border-radius:999px; box-shadow: var(--shadow-md); display:inline-flex; flex-wrap:wrap; justify-content:center; gap:4px; }
.toppers-tab-bar .nav-link{
color: var(--slate); font-weight:700; font-size:13.5px; border-radius:999px; padding:11px 22px; border:none;
}
.toppers-tab-bar .nav-link.active{ background: var(--navy); color:#fff; box-shadow: var(--shadow-sm); }
@media (max-width:575.98px){
.toppers-tab-bar{ border-radius:20px; }
.toppers-tab-bar .nav-link{ padding:9px 14px; font-size:12px; }
}
.toppers-track{ padding: 6px 4px 10px; }
/* Toppers carousel — Owl Carousel, auto-sliding with working prev/next nav.
Capped to a max-width here (independent of the section's own container-fluid)
so item slot widths stay consistent instead of stretching huge on very wide
screens — that stretching, not Owl itself, was what made cards look oversized. */
.toppers-slider{ max-width:1320px; margin:0 auto; position:relative; }
.toppers-slider .owl-nav{ position:absolute; top:38%; left:0; right:0; }
.toppers-slider .owl-nav button.owl-prev, .toppers-slider .owl-nav button.owl-next{
position:absolute; top:0; width:38px; height:38px; border-radius:50% !important; background:#fff !important;
color: var(--navy) !important; border:1px solid var(--line); box-shadow: var(--shadow-md);
display:flex; align-items:center; justify-content:center; font-size:13px; transition:.18s ease;
}
.toppers-slider .owl-nav button.owl-prev:hover, .toppers-slider .owl-nav button.owl-next:hover{ background: var(--navy) !important; color:#fff !important; }
.toppers-slider .owl-nav button.owl-prev{ left:-8px; }
.toppers-slider .owl-nav button.owl-next{ right:-8px; }
@media (max-width:575.98px){ .toppers-slider .owl-nav{ display:none; } }
.topper-card{
background:#fff; border-radius:14px; overflow:visible; position:relative;
box-shadow: var(--shadow-md); text-align:center; height:100%; margin-top:18px; width:100%;
}
.topper-photo{
width:100%; aspect-ratio:1/1; border-radius:14px 14px 0 0; overflow:hidden;
display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:700; color:#fff;
background: linear-gradient(155deg, var(--sky), var(--navy));
}
.topper-body{ padding:12px 10px 15px; }
.topper-rank-ribbon{
position:absolute; top:-11px; left:14px; width:30px; padding:6px 0 9px;
clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
display:flex; align-items:center; justify-content:center;
font-weight:700; font-size:12px; color:#fff; background: var(--navy); z-index:2;
box-shadow: 0 6px 12px -4px rgba(0,0,0,.35);
}
.topper-card.rank-1 .topper-rank-ribbon{ background: linear-gradient(180deg,#FFD666,var(--gold-deep)); color:var(--navy-deep); }
.topper-card.rank-2 .topper-rank-ribbon{ background: linear-gradient(180deg,#E4EAF2,#A9B4C4); color:var(--navy-deep); }
.topper-card.rank-3 .topper-rank-ribbon{ background: linear-gradient(180deg,#E9B489,#B9713F); }
.topper-air{
position:absolute; top:-5px; left:50px; z-index:2; background:#fff; border:1px solid var(--line);
border-radius:999px; padding:3.5px 11px; font-size:10px; font-weight:700; color: var(--navy-deep);
box-shadow: var(--shadow-sm); white-space:nowrap;
}
.topper-name{ font-size:12.5px; font-weight:700; color: var(--navy-deep); margin-bottom:2px; }
.topper-subject{ font-size:10px; font-weight:700; color: var(--blue); margin-bottom:3px; }
.topper-school{ font-size:9.5px; color: var(--slate); margin-bottom:10px; }
.topper-score{
display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; color:#fff;
background: var(--navy); padding:6px 12px; border-radius:999px;
}
.topper-card.rank-1 .topper-score{ background: linear-gradient(135deg,#FFD666,var(--gold-deep)); color:var(--navy-deep); }
.topper-card.rank-2 .topper-score{ background: linear-gradient(135deg,#E4EAF2,#A9B4C4); color:var(--navy-deep); }
.topper-card.rank-3 .topper-score{ background: linear-gradient(135deg,#E9B489,#B9713F); }
.topper-score i{ font-size:9.5px; }
.toppers-slider{ position:relative; }
.toppers-slider .owl-nav{ position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); display:flex; justify-content:space-between; pointer-events:none; margin:0; }
.toppers-slider .owl-nav button.owl-prev,
.toppers-slider .owl-nav button.owl-next{
pointer-events:all !important;
width:44px; height:44px; border-radius:50% !important; background: var(--navy) !important; color:#fff !important;
display:flex; align-items:center; justify-content:center; font-size:14px; border:2px solid rgba(255,255,255,.3) !important;
box-shadow: var(--shadow-md); transition: background .18s ease; margin:0 !important;
}
.toppers-slider .owl-nav button.owl-prev:hover,
.toppers-slider .owl-nav button.owl-next:hover{ background: var(--gold) !important; color: var(--navy-deep) !important; }
.toppers-slider .owl-nav .owl-prev{ margin-left:-8px !important; }
.toppers-slider .owl-nav .owl-next{ margin-right:-8px !important; }
.toppers-slider .owl-nav .disabled{ opacity:.35; }
@media (min-width: 992px){
.toppers-slider .owl-nav .owl-prev{ margin-left:-54px !important; }
.toppers-slider .owl-nav .owl-next{ margin-right:-54px !important; }
}
/* ==========================================================================
TESTIMONIALS
========================================================================== */
.testimonial-card{ border-radius:var(--radius); border:1px solid var(--line) !important; border-left:4px solid var(--accent, var(--emerald)) !important; height:100%; transition: box-shadow .2s ease, transform .2s ease; background: color-mix(in srgb, var(--accent, var(--emerald)) 5%, #fff) !important; }
.testimonial-card:hover{ box-shadow: var(--shadow-md); transform:translateY(-3px); }
.testi-avatar{
width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-weight:700; color:#fff; background: linear-gradient(135deg, var(--emerald), #0b7d57); font-size:17px; flex-shrink:0;
box-shadow: 0 8px 16px -6px rgba(14,159,110,.45);
}
.testimonial-text{ font-size:14px; color:var(--ink); line-height:1.55; }
.profile-stars i{ font-size:11px; }
.info-card{
border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow: var(--shadow-sm);
transition: box-shadow .2s ease; position:relative; overflow:hidden;
}
.info-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.info-card:hover{ box-shadow: var(--shadow-md); }
.info-card-title{ font-size:18px; color:var(--navy-deep); }
.info-card-title i{
width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--navy-deep) !important;
font-size:15px; vertical-align:middle;
}
.btn-header-sm{ font-size:12.5px; font-weight:700; color:var(--navy); border:1px solid var(--line); padding:8px 16px; border-radius:999px; transition: background .18s ease, color .18s ease; }
.btn-header-sm:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.ecosystem-icon{ flex:1; min-width:80px; }
.eco-ico{
width:52px; height:52px; border-radius:14px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center;
font-size:19px; color:#fff; background: linear-gradient(135deg, var(--navy), var(--blue));
box-shadow: 0 8px 16px -6px rgba(0,44,140,.4); transition: transform .2s ease;
}
.ecosystem-icon:hover .eco-ico{ transform:translateY(-4px); }
.ecosystem-icon:nth-child(2) .eco-ico{ background: linear-gradient(135deg,#22C08C,#0B7D57); box-shadow: 0 8px 16px -6px rgba(14,159,110,.45); }
.ecosystem-icon:nth-child(3) .eco-ico{ background: linear-gradient(135deg,#FF8A6B,#D1502F); box-shadow: 0 8px 16px -6px rgba(209,80,47,.45); }
.ecosystem-icon:nth-child(4) .eco-ico{ background: linear-gradient(135deg,#8A6BE0,#4C2FA0); box-shadow: 0 8px 16px -6px rgba(76,47,160,.45); }
.champion-zone{
background: linear-gradient(155deg, var(--navy-deep), var(--navy)) !important; border:none !important;
min-width:150px; position:relative; overflow:hidden; box-shadow: var(--shadow-md);
}
.champion-zone::before{
content:""; position:absolute; inset:0;
background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size:12px 12px;
}
.champion-zone > *{ position:relative; z-index:1; }
/* ==========================================================================
NEWS & EVENTS
========================================================================== */
.news-visual{
border-radius:var(--radius-lg); height:100%; min-height:170px; position:relative; overflow:hidden;
background: linear-gradient(155deg, var(--navy-deep), var(--blue));
display:flex; align-items:center; justify-content:center;
}
.news-visual::before{
content:""; position:absolute; inset:0;
background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
background-size: 22px 22px;
}
.news-stats-visual{ align-items:stretch; justify-content:flex-start; flex-direction:column; padding:0; }
.news-stats-head{
position:relative; z-index:1; display:flex; align-items:center; gap:8px; color:#fff;
font-size:13.5px; font-weight:700; padding:12px 16px 8px;
}
.news-stats-head i{
width:24px; height:24px; border-radius:7px; background: linear-gradient(135deg, var(--gold), var(--gold-deep));
color: var(--navy-deep); display:flex; align-items:center; justify-content:center; font-size:10.5px; flex-shrink:0;
}
.news-stats-grid{
position:relative; z-index:1; flex-grow:1;
display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(2, 1fr);
}
.news-stat-item{
text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:14px 6px; border-top:1px solid rgba(255,255,255,.14); border-left:1px solid rgba(255,255,255,.14);
}
.news-stat-item:nth-child(3n+1){ border-left:none; }
.news-stat-item:nth-child(-n+3){ border-top:none; }
.news-stat-icon{ font-size:26px; color: var(--gold); margin-bottom:6px; }
.news-stat-number{ font-size:22px; font-weight:700; color:#fff; line-height:1.15; }
.news-stat-text{ font-size:13px; color:#C6D3F2; margin-top:2px; }
.event-row{
display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line);
}
.event-row:last-child{ border-bottom:none; }
.event-ico{
width:28px; height:28px; border-radius:8px; background: var(--cloud); color:var(--navy);
display:flex; align-items:center; justify-content:center; font-size:12.5px; flex-shrink:0;
}
.event-text{ font-size:13px; font-weight:700; color:var(--ink); flex-grow:1; }
.event-date{ font-size:11.5px; color:var(--slate); white-space:nowrap; }
.btn-outline-custom{
border:1.5px solid var(--navy); color:var(--navy); font-weight:700; font-size:13px; padding:10px 20px; border-radius:999px;
transition: background .18s ease, color .18s ease, transform .18s ease;
}
.btn-outline-custom:hover{ background:var(--navy); color:#fff; transform:translateY(-2px); }
.btn-outline-custom.white{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn-outline-custom.white:hover{ background:var(--gold); border-color:var(--gold); color:var(--navy-deep); }
/* ==========================================================================
PARTNERS
========================================================================== */
.partner-logo-chip{
height:120px; border:1px solid var(--line); border-radius:18px;
display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--navy-deep);
font-size:16px; letter-spacing:.3px; padding:14px 22px; background:#fff; text-align:center; line-height:1.3;
box-shadow: var(--shadow-md); transition:.22s ease;
}
.partner-logo-chip:hover{ box-shadow: var(--shadow-lg); transform:translateY(-4px); border-color: var(--sky); }
.partner-logo-chip img{ max-width:100%; max-height:82px; object-fit:contain; }
/* ==========================================================================
FOOTER
========================================================================== */
.footer-bg{ background: var(--navy-deep); }
.footer-brand{ display:flex; align-items:center; margin-bottom:16px; }
.footer-logo{ height:42px; width:auto; filter: brightness(0) invert(1); }
.footer-text{ color:#B6C3E6; font-size:13.5px; line-height:1.7; }
.footer-heading{ color:#fff; font-size:14.5px; letter-spacing:.6px; }
.footer-links li{ margin-bottom:10px; }
.footer-links a{ color:#B6C3E6; font-size:13.5px; }
.footer-links a i{ color: var(--gold); font-size:10px; }
.footer-links a:hover{ color:#fff; }
.footer-contact li span, .footer-contact li a{ color:#B6C3E6; font-size:13.5px; }
.footer-contact i{ color: var(--gold); }
.btn-subscribe{ background: var(--gold); color:var(--navy-deep); font-weight:700; border:none; padding:0 20px; }
.btn-subscribe:hover{ background:#fff; }
.footer-copyright{ background:#00113A; font-size:12.5px; color:#93A3CC; }
.footer-copyright a{ color:#C6D3F2; }
/* back to top */
.back-to-top{
position:fixed; right:18px; bottom:18px; width:42px; height:42px; border-radius:50%;
background: var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
box-shadow: var(--shadow-md); opacity:0; visibility:hidden; transition:.25s; z-index:999;
}
/* Slightly transparent by default so it reads as a floating control rather
than a solid block sitting on top of page content (e.g. card buttons near
the bottom-right corner); full opacity on hover/focus so it's still clear
and easy to hit. */
.back-to-top.show{ opacity:.8; visibility:visible; }
.back-to-top:hover{ background: var(--gold); color:var(--navy-deep); opacity:1; }
/* ==========================================================================
ABOUT US PAGE
========================================================================== */
/* Page hero / breadcrumb band */
.page-hero{
background: linear-gradient(120deg, var(--navy-deep), var(--navy) 60%, var(--blue));
position:relative; overflow:hidden; padding:64px 0 54px;
}
.page-hero::before{
content:""; position:absolute; inset:0;
background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
background-size: 22px 22px;
}
.page-hero-content{ position:relative; z-index:1; }
.breadcrumb-custom{ font-size:13.5px; color:#B9C8EE; margin-bottom:14px; }
.breadcrumb-custom a{ color:#B9C8EE; }
.breadcrumb-custom a:hover{ color:var(--gold); }
.breadcrumb-custom i{ font-size:10px; margin:0 8px; color:#6E7FB8; }
.page-hero-title{ color:#fff; font-size:clamp(30px,4vw,44px); font-weight:700; margin-bottom:10px; }
.page-hero-sub{ color:#C6D3F2; font-size:15.5px; max-width:640px; }
/* Intro / pull-quote card */
.supported-badge{
display:inline-flex; align-items:center; gap:8px; background: var(--cloud); color:var(--navy);
font-size:12.5px; font-weight:700; padding:8px 16px; border-radius:999px; border:1px solid var(--line); margin-bottom:18px;
}
.supported-badge i{ color: var(--gold-deep); }
.pullquote-card{
background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
border-radius: var(--radius-lg); padding:34px 30px; color:#fff; position:relative; overflow:hidden; height:100%;
}
.pullquote-card i.quote-mark{ font-size:26px; color: var(--gold); opacity:.85; margin-bottom:10px; display:block; }
.pullquote-card p{ font-size:18px; font-weight:700; line-height:1.5; color:#fff; margin-bottom:0; }
/* Vision & Philosophy */
.vision-card{
background: linear-gradient(160deg, var(--blue) 0%, var(--navy-deep) 100%);
border-radius: var(--radius-lg); padding:36px 32px; color:#fff; height:100%; position:relative; overflow:hidden;
}
.vision-card i.vision-icon{ font-size:30px; color: var(--gold); margin-bottom:14px; display:block; }
.vision-card h3{ color:#fff; font-size:20px; margin-bottom:12px; }
.vision-card p{ color:#D7E0F7; font-size:15px; line-height:1.7; margin-bottom:0; }
.philosophy-card{
background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding:36px 32px; height:100%;
}
.philosophy-card h3{ color:var(--navy-deep); font-size:20px; margin-bottom:18px; }
.philosophy-steps{ list-style:none; padding:0; margin:0; }
.philosophy-steps li{
font-size:15px; color:var(--slate); padding:9px 0 9px 26px; position:relative; border-bottom:1px dashed var(--line);
}
.philosophy-steps li:last-child{ border-bottom:none; font-weight:700; color:var(--navy-deep); font-size:15.5px; }
.philosophy-steps li::before{
content:""; position:absolute; left:2px; top:17px; width:8px; height:8px; border-radius:50%; background: var(--gold-deep);
}
.philosophy-steps li:last-child::before{ background: var(--emerald); }
/* Feature / value / program cards (tabbed grid) */
.about-tab-bar{ background:#fff; padding:6px; border-radius:999px; box-shadow: var(--shadow-md); display:inline-flex; flex-wrap:wrap; justify-content:center; gap:4px; }
.about-tab-bar .nav-link{
color: var(--navy); font-weight:700; font-size:13.5px; border-radius:999px; padding:11px 24px; border:none;
}
.about-tab-bar .nav-link.active{ background: var(--navy); color:#fff; box-shadow: var(--shadow-sm); }
@media (max-width:575.98px){
.about-tab-bar{ border-radius:20px; }
.about-tab-bar .nav-link{ padding:9px 14px; font-size:12px; }
}
.about-feature-card{
background: color-mix(in srgb, var(--accent, var(--navy)) 6%, #fff);
border-radius:18px; border:1px solid color-mix(in srgb, var(--accent, var(--navy)) 18%, var(--line));
padding:28px 24px; height:100%; position:relative; overflow:hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
.about-feature-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.about-feature-card::before{
content:""; position:absolute; top:0; left:0; right:0; height:5px; background: var(--accent, var(--navy));
}
.about-feature-mark{
width:52px; height:52px; border-radius:14px; margin-bottom:16px;
display:flex; align-items:center; justify-content:center; font-size:21px; color:#fff;
background: var(--accent, var(--navy));
box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--accent, var(--navy)) 70%, transparent);
}
.about-feature-card h4{ font-size:16.5px; color:var(--navy-deep); margin-bottom:8px; }
.about-feature-card p{ font-size:13.5px; color:var(--slate); line-height:1.65; margin-bottom:0; }
.about-feature-card .program-code{ font-size:12px; font-weight:700; color: var(--accent, var(--navy)); letter-spacing:.5px; margin-bottom:6px; text-transform:uppercase; }
.future-chip-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:8px; }
.future-chip{
background: var(--cloud); border:1px solid var(--line); color:var(--navy); font-size:13px; font-weight:700;
padding:9px 18px; border-radius:999px;
}
/* Global commitment band */
.commitment-band{
background: linear-gradient(135deg, var(--gold), var(--gold-deep));
border-radius: var(--radius-lg); position:relative; overflow:hidden; padding:46px 40px;
}
.commitment-band::after{
content:""; position:absolute; inset:0;
background-image: radial-gradient(rgba(0,26,86,.10) 1px, transparent 1px);
background-size: 22px 22px;
}
.commitment-band-content{ position:relative; z-index:1; max-width:820px; margin:0 auto; text-align:center; }
.commitment-band h2{ color:var(--navy-deep); font-size:clamp(22px,3vw,30px); margin-bottom:14px; }
.commitment-band p{ color:#3A2A00; font-size:15.5px; line-height:1.75; margin-bottom:0; }
/* Promise closing section */
.promise-section{
background: linear-gradient(120deg, var(--navy-deep), var(--navy) 70%);
border-radius: var(--radius-lg); position:relative; overflow:hidden; padding:54px 40px; text-align:center;
}
.promise-section::before{
content:""; position:absolute; inset:0;
background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
background-size: 22px 22px;
}
.promise-content{ position:relative; z-index:1; max-width:760px; margin:0 auto; }
.promise-lines{ list-style:none; padding:0; margin:0 0 28px; }
.promise-lines li{ color:#DCE5F8; font-size:16.5px; padding:6px 0; }
.promise-lines li i{ color: var(--gold); margin-right:10px; }
.promise-final{ color:#fff; font-size:16px; line-height:1.8; margin-bottom:26px; }
.promise-tagline{ color: var(--gold); font-size: clamp(20px,2.6vw,26px); font-weight:700; margin-bottom:0; letter-spacing:.3px; }
.promise-tagline span{ display:block; color:#fff; font-size:13.5px; font-weight:400; letter-spacing:1px; margin-top:8px; text-transform:uppercase; }
/* ==========================================================================
GOWBELL OLYMPIADS (Initiative page)
========================================================================== */
/* Quick stats strip under the hero */
.mini-stats-strip{
background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
padding:26px 10px; margin-top:-46px; position:relative; z-index:2;
}
.mini-stat{ text-align:center; padding:10px 6px; }
.mini-stat i{ font-size:22px; color: var(--gold-deep); margin-bottom:8px; display:block; }
.mini-stat-num{ font-size:22px; font-weight:700; color:var(--navy-deep); }
.mini-stat-label{ font-size:12.5px; color:var(--slate); }
/* Level chips (eligibility) */
.level-card{
background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 18px; text-align:center; height:100%;
transition: transform .2s ease, box-shadow .2s ease;
}
.level-card:hover{ transform:translateY(-5px); box-shadow: var(--shadow-md); }
.level-tag{
display:inline-block; background: var(--navy); color:#fff; font-size:11.5px; font-weight:700;
padding:4px 12px; border-radius:999px; margin-bottom:10px; letter-spacing:.4px;
}
.level-grades{ font-size:15px; font-weight:700; color:var(--navy-deep); margin-bottom:4px; }
.level-desc{ font-size:12.5px; color:var(--slate); margin-bottom:0; }
/* How it works — numbered process */
.process-steps{ display:flex; flex-wrap:wrap; justify-content:space-between; position:relative; margin-top:20px; }
.process-steps::before{
content:""; position:absolute; top:29px; left:6%; right:6%; height:2px;
background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
z-index:0;
}
.process-step{ flex:1 1 220px; text-align:center; position:relative; z-index:1; padding:0 14px; margin-bottom:22px; }
.process-step-num{
width:58px; height:58px; border-radius:50%; margin:0 auto 16px; background: var(--navy);
color:#fff; font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center;
box-shadow: var(--shadow-md); border:4px solid #fff;
}
.process-step h4{ font-size:15.5px; color:var(--navy-deep); margin-bottom:6px; }
.process-step p{ font-size:13px; color:var(--slate); margin-bottom:0; }
.process-steps.gold .process-step-num{ background: linear-gradient(135deg,#FFD666,var(--gold-deep)); color:var(--navy-deep); }
@media (max-width:767.98px){
.process-steps::before{ display:none; }
}
/* FAQ accordion — matched to site palette */
.faq-accordion .accordion-item{ border:1px solid var(--line); border-radius:14px !important; margin-bottom:12px; overflow:hidden; }
.faq-accordion .accordion-button{
font-weight:700; color: var(--navy-deep); font-size:15px; padding:18px 22px; background:#fff;
}
.faq-accordion .accordion-button:not(.collapsed){ background: var(--cloud); color: var(--navy); box-shadow:none; }
.faq-accordion .accordion-button:focus{ box-shadow:none; }
.faq-accordion .accordion-button::after{ filter: hue-rotate(180deg) saturate(3); }
.faq-accordion .accordion-body{ font-size:14px; color:var(--slate); padding:4px 22px 20px; line-height:1.7; }
/* ==========================================================================
GOWBELL ABACUS ACADEMY (Program page)
========================================================================== */
/* Site data table (class schedule etc.) */
.site-table-wrap{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow:hidden; border:1px solid var(--line); }
table.site-table{ width:100%; margin-bottom:0; border-collapse:collapse; }
table.site-table th{
background: var(--navy); color:#fff; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
padding:14px 16px; text-align:left; white-space:nowrap; border-right:1px solid rgba(255,255,255,.15);
}
table.site-table th:last-child{ border-right:none; }
table.site-table td{ padding:13px 16px; font-size:14px; color:var(--ink); border-top:1px solid var(--line); border-right:1px solid var(--line); }
table.site-table td:last-child{ border-right:none; }
table.site-table tr:nth-child(even) td{ background: var(--cloud); }
/* Rewards & Recognition page ------------------------------------------------ */
.aw-hero{ position:relative; overflow:hidden; background: linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, var(--blue)); }
.aw-hero-photo{
position:absolute; top:0; right:0; bottom:0; width:46%; min-width:340px;
background-size:cover; background-position:center 30%;
-webkit-mask-image:linear-gradient(to right, transparent, #000 18%);
mask-image:linear-gradient(to right, transparent, #000 18%);
}
.aw-hero-content{ position:relative; z-index:1; max-width:640px; }
@media (max-width:767px){ .aw-hero-photo{ display:none; } }
.aw-tabs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:36px; }
.aw-tab-btn{
background:#fff; border:1.5px solid var(--line); color:var(--navy-deep); font-weight:700; font-size:14px;
padding:11px 22px; border-radius:999px; cursor:pointer; transition:.2s ease; display:inline-flex; align-items:center; gap:8px;
}
.aw-tab-btn i{ font-size:13px; }
.aw-tab-btn:hover{ border-color: var(--accent, var(--navy)); }
.aw-tab-btn.active{ background: var(--accent, var(--navy)); border-color: var(--accent, var(--navy)); color:#fff; }
.aw-tab-pane{ display:none; }
.aw-tab-pane.active{ display:block; animation: awFadeIn .35s ease; }
@keyframes awFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.aw-level-banner{ background: var(--gold); border-radius:8px; padding:11px 20px; margin:26px 0 12px; }
.aw-level-banner:first-of-type{ margin-top:0; }
.aw-level-banner h3{ color:var(--navy-deep); font-size:16.5px; font-weight:700; margin:0; }
.aw-level-text{ font-size:14.5px; color:var(--ink); line-height:1.75; text-align:justify; margin-bottom:0; }
.aw-notes{
background: var(--cloud); border:1px solid var(--line); border-radius: var(--radius-lg);
padding:22px 26px; margin-top:28px;
}
.aw-notes p{ font-size:14px; color:var(--ink); line-height:1.7; margin-bottom:10px; }
.aw-notes p:last-child{ margin-bottom:0; }
.aw-notes strong{ color:var(--navy-deep); }
.aw-intro{ text-align:center; max-width:720px; margin:0 auto 34px; font-size:15px; color:var(--slate); line-height:1.7; }
/* ==========================================================================
TRANSFORMING SCHOOLS (Campaign page)
========================================================================== */
/* Areas-of-transformation accordion icon */
.area-accordion .accordion-button{ display:flex; align-items:center; gap:14px; }
.area-accordion .accordion-icon{
flex:0 0 auto; width:38px; height:38px; border-radius:10px; background: var(--cloud); color:var(--navy);
display:flex; align-items:center; justify-content:center; font-size:16px;
}
.area-accordion .accordion-button:not(.collapsed) .accordion-icon{ background: var(--navy); color:#fff; }
/* Vertical timeline ("How We Work") */
.timeline{ position:relative; max-width:720px; margin:0 auto; padding-left:6px; }
.timeline::before{ content:""; position:absolute; left:23px; top:6px; bottom:6px; width:2px; background: var(--line); }
.timeline-item{ position:relative; padding:0 0 30px 62px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-num{
position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%; background: var(--navy);
color:#fff; font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center;
box-shadow: var(--shadow-sm); border:4px solid #fff; z-index:1;
}
.timeline-item h4{ font-size:16px; color:var(--navy-deep); margin-bottom:4px; }
.timeline-item p{ font-size:13.5px; color:var(--slate); margin-bottom:0; }
/* Impact goals checklist */
.goal-list{ list-style:none; padding:0; margin:0; }
.goal-item{ display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line); }
.goal-item:last-child{ border-bottom:none; }
.goal-item i{ color: var(--emerald); font-size:16px; margin-top:2px; }
.goal-item span{ font-size:14.5px; color:var(--ink); }
/* ==========================================================================
WINNERS PAGE
========================================================================== */
/* Level tab bar (reuses the pill pattern) */
.winners-tab-bar{ background:#fff; padding:6px; border-radius:999px; box-shadow: var(--shadow-md); display:inline-flex; flex-wrap:wrap; justify-content:center; gap:4px; }
.winners-tab-bar .nav-link{ color: var(--navy); font-weight:700; font-size:13.5px; border-radius:999px; padding:11px 22px; border:none; }
.winners-tab-bar .nav-link.active{ background: var(--navy); color:#fff; box-shadow: var(--shadow-sm); }
@media (max-width:575.98px){
.winners-tab-bar{ border-radius:20px; }
.winners-tab-bar .nav-link{ padding:9px 14px; font-size:12px; }
}
/* Toolbar: search + country filter */
.winners-toolbar{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border:1px solid var(--line); padding:18px; margin-bottom:22px; }
.winners-search{ position:relative; }
.winners-search i{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--slate-soft); }
.winners-search input{ padding-left:42px; border-radius:999px; border:1px solid var(--line); font-size:13.5px; }
.winners-search input:focus{ box-shadow:none; border-color: var(--sky); }
.country-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.country-chip{
background: var(--cloud); border:1px solid var(--line); color:var(--navy); font-size:12.5px; font-weight:700;
padding:8px 15px; border-radius:999px; cursor:pointer; transition:.18s ease; user-select:none;
}
.country-chip:hover{ background:#EAF0FB; }
.country-chip.active{ background: var(--navy); color:#fff; border-color:var(--navy); }
/* Winners table row content */
.winner-avatar{
width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
font-size:12.5px; font-weight:700; color:#fff; background: linear-gradient(135deg, var(--sky), var(--navy));
}
.winner-country{ font-size:12.5px; color:var(--slate); white-space:nowrap; }
.winner-country i{ color: var(--gold-deep); margin-right:4px; }
.winners-empty{ text-align:center; padding:50px 20px; color:var(--slate); }
.winners-empty i{ font-size:34px; color:var(--slate-soft); margin-bottom:14px; display:block; }
.winners-count-tag{ font-size:12.5px; color:var(--slate); font-weight:700; }
/* ==========================================================================
CHECK RESULT PAGE
========================================================================== */
.notice-band{
background: linear-gradient(135deg, #FFF6DE, #FFEFC2); border:1px solid #F0D584; border-radius:14px;
padding:16px 20px; display:flex; align-items:flex-start; gap:14px; font-size:13.5px; color:#5A4300;
}
.notice-band i{ font-size:20px; color: var(--gold-deep); margin-top:2px; }
.result-form-card{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border:1px solid var(--line); padding:34px; }
.result-form-card label{ font-size:12.5px; font-weight:700; color:var(--navy-deep); margin-bottom:6px; display:block; }
.result-form-card .form-control, .result-form-card .form-select{
border-radius:10px; border:1px solid var(--line); font-size:14px; padding:11px 14px;
}
.result-form-card .form-control:focus, .result-form-card .form-select:focus{ box-shadow:none; border-color: var(--sky); }
.result-card{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border:1px solid var(--line); padding:28px; }
.result-card-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.result-card-name{ font-size:19px; font-weight:700; color:var(--navy-deep); }
.result-card-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.result-card-grid div{ background: var(--cloud); border-radius:10px; padding:12px 14px; }
.result-card-grid span{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--slate-soft); margin-bottom:3px; }
.result-card-grid strong{ font-size:14px; color:var(--navy-deep); }
@media (max-width:575.98px){
.result-card-grid{ grid-template-columns:1fr; }
}
/* ==========================================================================
PHOTO GALLERY PAGE
========================================================================== */
.gallery-tab-bar{ background:#fff; padding:6px; border-radius:999px; box-shadow: var(--shadow-md); display:inline-flex; flex-wrap:wrap; justify-content:center; gap:4px; }
.gallery-tab-bar .nav-link{ color: var(--navy); font-weight:700; font-size:13.5px; border-radius:999px; padding:11px 22px; border:none; }
.gallery-tab-bar .nav-link.active{ background: var(--navy); color:#fff; box-shadow: var(--shadow-sm); }
@media (max-width:575.98px){
.gallery-tab-bar{ border-radius:20px; }
.gallery-tab-bar .nav-link{ padding:9px 14px; font-size:12px; }
}
.gallery-toolbar{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border:1px solid var(--line); padding:18px; margin-bottom:26px; }
.gallery-toolbar .form-select{ border-radius:999px; border:1px solid var(--line); font-size:13.5px; font-weight:700; color:var(--navy); padding:9px 18px; }
.gallery-toolbar .form-select:focus{ box-shadow:none; border-color: var(--sky); }
.gallery-card{ border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--line); height:100%; transition: transform .2s ease, box-shadow .2s ease; }
.gallery-card:hover{ transform:translateY(-6px); box-shadow: var(--shadow-lg); }
.gallery-photo{
aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size:16px 16px;
}
.gallery-photo i{ font-size:34px; color:rgba(255,255,255,.9); }
.gallery-level-tag{
position:absolute; top:10px; left:10px; background:rgba(0,19,71,.55); color:#fff; font-size:10.5px; font-weight:700;
padding:4px 11px; border-radius:999px; backdrop-filter:blur(2px);
}
.gallery-year-tag{
position:absolute; top:10px; right:10px; background: var(--gold); color:var(--navy-deep); font-size:10.5px; font-weight:700;
padding:4px 11px; border-radius:999px;
}
.gallery-body{ padding:16px; }
.gallery-title{ font-size:14px; font-weight:700; color:var(--navy-deep); margin-bottom:6px; line-height:1.4; }
.gallery-meta{ font-size:12px; color:var(--slate); display:flex; align-items:center; gap:6px; }
.gallery-meta i{ color: var(--gold-deep); }
.gallery-empty{ text-align:center; padding:50px 20px; color:var(--slate); }
.gallery-empty i{ font-size:34px; color:var(--slate-soft); margin-bottom:14px; display:block; }
/* ==========================================================================
VIDEO GALLERY PAGE (reuses .gallery-card / .gallery-tab-bar / toolbar)
========================================================================== */
.video-play-btn{
width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92); color: var(--navy-deep);
display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer;
transition: transform .18s ease, background .18s ease; position:relative; z-index:1;
}
.gallery-card:hover .video-play-btn{ transform:scale(1.08); background:#fff; }
.video-duration-tag{
position:absolute; bottom:10px; right:10px; background:rgba(0,19,71,.7); color:#fff; font-size:10.5px; font-weight:700;
padding:3px 9px; border-radius:6px;
}
.video-modal-frame{
aspect-ratio:16/9; background: var(--navy-deep); border-radius:14px; display:flex; flex-direction:column;
align-items:center; justify-content:center; color:#fff; text-align:center; gap:10px; padding:20px;
}
.video-modal-frame i{ font-size:40px; color: var(--gold); }
/* ==========================================================================
MEDIA COVERAGE PAGE
========================================================================== */
.media-card{
background:#fff; border-radius:16px; border:1px solid var(--line); padding:22px; height:100%;
transition: transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column;
}
.media-card:hover{ transform:translateY(-5px); box-shadow: var(--shadow-md); }
.media-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.media-outlet-icon{
width:42px; height:42px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
font-size:16px; color:#fff;
}
.media-outlet-name{ font-size:12.5px; font-weight:700; color:var(--navy-deep); }
.media-date{ font-size:11px; color:var(--slate-soft); }
.media-type-badge{
font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:3px 10px; border-radius:999px;
display:inline-block; margin-bottom:10px;
}
.media-type-badge.news{ background:#E8F0FE; color:#0055FF; }
.media-type-badge.tv{ background:#FDEAEA; color:#C0392B; }
.media-type-badge.press{ background:#E8F8F0; color:#0B7A54; }
.media-headline{ font-size:15px; font-weight:700; color:var(--navy-deep); line-height:1.4; margin-bottom:8px; }
.media-excerpt{ font-size:13px; color:var(--slate); line-height:1.6; margin-bottom:14px; flex-grow:1; }
.media-card-footer{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); }
.media-read-link{ font-size:12.5px; font-weight:700; color: var(--navy); }
.media-read-link i{ margin-left:4px; transition: transform .18s ease; }
.media-card:hover .media-read-link i{ transform:translateX(3px); }
/* ==========================================================================
BOOKS SHOP PAGE
========================================================================== */
.shop-toolbar{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border:1px solid var(--line); padding:20px; margin-bottom:26px; }
.shop-toolbar .form-select, .shop-toolbar .form-control{
border-radius:10px; border:1px solid var(--line); font-size:13.5px; padding:10px 14px;
}
.shop-toolbar .form-select:focus, .shop-toolbar .form-control:focus{ box-shadow:none; border-color: var(--sky); }
.shop-toolbar label{ font-size:11px; font-weight:700; color:var(--slate-soft); text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; display:block; }
.book-card{ background:#fff; border-radius:14px; overflow:hidden; border:1px solid var(--line); height:100%; display:flex; flex-direction:column; transition: transform .2s ease, box-shadow .2s ease; }
.book-card:hover{ transform:translateY(-5px); box-shadow: var(--shadow-md); }
.book-cover{
aspect-ratio:1/1; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:12px; text-align:center; color:#fff; overflow:hidden;
}
.book-cover::before{
content:""; position:absolute; inset:0;
background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size:14px 14px;
}
.book-cover::after{ content:""; position:absolute; top:0; left:0; bottom:0; width:6px; background:rgba(0,0,0,.18); }
.book-cover i{ font-size:19px; margin-bottom:6px; position:relative; z-index:1; color:rgba(255,255,255,.85); }
.book-cover-subject{ font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; opacity:.85; position:relative; z-index:1; }
.book-cover-title{ font-size:11.5px; font-weight:700; line-height:1.25; position:relative; z-index:1; margin-top:3px; }
.book-cover-class{
position:absolute; top:7px; right:7px; background:rgba(255,255,255,.9); color:var(--navy-deep); font-size:9px; font-weight:700;
padding:2px 7px; border-radius:999px; z-index:1;
}
.book-body{ padding:10px 12px; display:flex; flex-direction:column; flex-grow:1; }
.book-board-tag{ font-size:9px; font-weight:700; color: var(--slate-soft); text-transform:uppercase; letter-spacing:.3px; margin-bottom:5px; line-height:1.4; }
.book-price{ font-size:15px; font-weight:700; color:var(--navy-deep); margin:auto 0 9px; }
.book-price span{ font-size:11px; font-weight:400; color:var(--slate-soft); text-decoration:line-through; margin-left:5px; }
.book-actions{ display:flex; gap:6px; }
.btn-add-cart{
flex:1; background: var(--cloud); color:var(--navy); font-size:10.5px; font-weight:700; border:1px solid var(--line);
border-radius:7px; padding:7px 6px; text-align:center; transition:.18s ease;
}
.btn-add-cart:hover{ background: var(--navy); color:#fff; border-color:var(--navy); }
.btn-buy-now{
flex:1; background: var(--gold); color:var(--navy-deep); font-size:10.5px; font-weight:700; border:none;
border-radius:7px; padding:7px 6px; text-align:center; transition:.18s ease;
}
.btn-buy-now:hover{ background: var(--gold-deep); }
.shop-empty{ text-align:center; padding:60px 20px; color:var(--slate); }
.shop-empty i{ font-size:34px; color:var(--slate-soft); margin-bottom:14px; display:block; }
.shipping-note{
background: var(--cloud); border:1px dashed var(--line); border-radius:12px; padding:12px 18px;
font-size:12.5px; color:var(--navy); display:flex; align-items:center; gap:10px; justify-content:center;
}
.shipping-note i{ color: var(--gold-deep); }
/* ==========================================================================
CAREERS PAGE
========================================================================== */
/* Hero — layered gradient with floating orbit rings for a distinctive feel */
.careers-hero{
background: radial-gradient(1200px 500px at 15% -10%, rgba(255,196,0,.16), transparent 60%),
radial-gradient(900px 500px at 100% 10%, rgba(46,107,230,.28), transparent 55%),
linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, var(--blue));
position:relative; overflow:hidden; padding:70px 0 60px;
}
.careers-hero::before{
content:""; position:absolute; inset:0;
background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
background-size: 24px 24px;
}
.careers-orbit{
position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.12);
}
.careers-hero-content{ position:relative; z-index:1; }
/* Stat pills inline under hero title */
.careers-stat-row{ display:flex; flex-wrap:wrap; gap:28px; margin-top:26px; }
.careers-stat{ display:flex; align-items:center; gap:10px; }
.careers-stat-num{ font-size:26px; font-weight:700; color:#fff; }
.careers-stat-label{ font-size:12px; color:#B9C8EE; }
.careers-stat i{ font-size:20px; color: var(--gold); }
/* Filter toolbar */
.careers-toolbar{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border:1px solid var(--line); padding:20px; margin-top:-46px; position:relative; z-index:2; margin-bottom:30px; }
.careers-toolbar .form-select, .careers-toolbar .form-control{ border-radius:10px; border:1px solid var(--line); font-size:13.5px; padding:10px 14px; }
.careers-toolbar .form-select:focus, .careers-toolbar .form-control:focus{ box-shadow:none; border-color: var(--sky); }
.careers-toolbar label{ font-size:11px; font-weight:700; color:var(--slate-soft); text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; display:block; }
/* Job card */
.job-card{
background:#fff; border-radius:16px; border:1px solid var(--line); padding:24px; height:100%;
display:flex; flex-direction:column; position:relative; overflow:hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.job-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background: var(--accent, var(--navy)); }
.job-card:hover{ transform:translateY(-6px); box-shadow: var(--shadow-lg); }
.job-dept-tag{
display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
color: var(--accent, var(--navy)); background: color-mix(in srgb, var(--accent, var(--navy)) 10%, #fff);
padding:5px 12px; border-radius:999px; margin-bottom:12px; align-self:flex-start;
}
.job-title{ font-size:17px; font-weight:700; color:var(--navy-deep); margin-bottom:10px; line-height:1.35; }
.job-meta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:14px; }
.job-meta-item{ font-size:12.5px; color:var(--slate); display:flex; align-items:center; gap:6px; }
.job-meta-item i{ color: var(--gold-deep); }
.job-desc{ font-size:13px; color:var(--slate); line-height:1.65; margin-bottom:16px; flex-grow:1; }
.job-card-footer{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); }
.job-posted{ font-size:11.5px; color:var(--slate-soft); }
.btn-apply{
background: var(--navy); color:#fff; font-size:12.5px; font-weight:700; padding:9px 20px; border-radius:999px;
border:none; transition: background .18s ease, transform .18s ease;
}
.btn-apply:hover{ background: var(--gold); color:var(--navy-deep); transform:translateX(2px); }
.careers-empty{ text-align:center; padding:60px 20px; color:var(--slate); }
.careers-empty i{ font-size:34px; color:var(--slate-soft); margin-bottom:14px; display:block; }
/* Culture strip (gradient placeholder tiles, matches site's photo-placeholder convention) */
.culture-tile{
aspect-ratio:1; border-radius:14px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.culture-tile i{ font-size:22px; color:rgba(255,255,255,.9); }
.culture-tile::before{
content:""; position:absolute; inset:0;
background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size:14px 14px;
}
/* Application modal */
.apply-modal .modal-content{ border-radius:18px; border:none; overflow:hidden; }
.apply-modal .modal-header{ background: linear-gradient(120deg, var(--navy-deep), var(--navy)); border:none; padding:24px 28px; }
.apply-modal .modal-title{ color:#fff; font-weight:700; }
.apply-modal .modal-title span{ display:block; font-size:12px; font-weight:400; color:#B9C8EE; margin-top:3px; }
.apply-modal .btn-close{ filter:invert(1); }
.apply-modal .modal-body{ padding:28px; }
.apply-modal label{ font-size:12.5px; font-weight:700; color:var(--navy-deep); margin-bottom:6px; display:block; }
.apply-modal .form-control{ border-radius:10px; border:1px solid var(--line); font-size:14px; padding:11px 14px; }
.apply-modal .form-control:focus{ box-shadow:none; border-color: var(--sky); }
.apply-success{ text-align:center; padding:30px 10px; }
.apply-success i{ font-size:52px; color: var(--emerald); margin-bottom:16px; }
.apply-success h4{ color:var(--navy-deep); font-weight:700; margin-bottom:8px; }
/* ==========================================================================
CONTACT US PAGE
========================================================================== */
.contact-info-card{
background:#fff; border-radius:16px; border:1px solid var(--line); padding:24px 20px; height:100%; text-align:center;
transition: transform .2s ease, box-shadow .2s ease;
}
.contact-info-card:hover{ transform:translateY(-5px); box-shadow: var(--shadow-md); }
.contact-info-icon{
width:52px; height:52px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center;
font-size:20px; color:#fff; background: linear-gradient(135deg, var(--sky), var(--navy));
}
.contact-info-card h4{ font-size:14.5px; color:var(--navy-deep); margin-bottom:6px; }
.contact-info-card p{ font-size:13px; color:var(--slate); margin-bottom:0; }
.contact-info-card a{ color:var(--slate); }
.contact-info-card a:hover{ color: var(--navy); }
.contact-form-card{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border:1px solid var(--line); padding:34px; }
.contact-form-card label{ font-size:12.5px; font-weight:700; color:var(--navy-deep); margin-bottom:6px; display:block; }
.contact-form-card .form-control, .contact-form-card .form-select{
border-radius:10px; border:1px solid var(--line); font-size:14px; padding:11px 14px;
}
.contact-form-card .form-control:focus, .contact-form-card .form-select:focus{ box-shadow:none; border-color: var(--sky); }
.office-card{
background:#fff; border-radius: var(--radius-lg); border:1px solid var(--line); height:100%; padding:22px;
transition: transform .2s ease, box-shadow .2s ease; position:relative;
}
.office-card:hover{ transform:translateY(-5px); box-shadow: var(--shadow-md); }
.office-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.office-icon{
width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px;
color:#fff; background: linear-gradient(135deg, var(--sky), var(--navy)); margin-bottom:14px;
}
.office-tag{
display:inline-block; background: var(--cloud); color:var(--navy); font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:.4px; padding:4px 12px; border-radius:999px; margin-bottom:10px;
}
.office-card h4{ font-size:16px; color:var(--navy-deep); margin-bottom:12px; }
.office-detail{ display:flex; gap:10px; font-size:13px; color:var(--slate); margin-bottom:8px; }
.office-detail i{ color: var(--gold-deep); margin-top:2px; flex:0 0 auto; }
.office-map-btn{
display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--navy);
background: var(--cloud); border:1px solid var(--line); border-radius:999px; padding:8px 16px; margin-top:8px; transition:.18s ease;
}
.office-map-btn:hover{ background: var(--navy); color:#fff; border-color:var(--navy); }
.office-map-modal iframe{ width:100%; height:420px; border:none; display:block; }
.contact-dept-chip{
background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; text-align:center; height:100%;
transition: transform .2s ease, box-shadow .2s ease;
}
.contact-dept-chip:hover{ transform:translateY(-4px); box-shadow: var(--shadow-md); }
.contact-dept-chip i{ font-size:22px; color: var(--gold-deep); margin-bottom:10px; display:block; }
.contact-dept-chip h5{ font-size:13.5px; color:var(--navy-deep); margin-bottom:4px; }
.contact-dept-chip a{ font-size:12.5px; color:var(--slate); }
.contact-dept-chip a:hover{ color: var(--navy); }
.contact-form-success{ text-align:center; padding:40px 10px; }
.contact-form-success i{ font-size:52px; color: var(--emerald); margin-bottom:16px; }
.contact-form-success h4{ color:var(--navy-deep); font-weight:700; margin-bottom:8px; }
/* ==========================================================================
LEADERSHIP SECTION
========================================================================== */
.leader-card{
background:#fff; border-radius: var(--radius-lg); border:1px solid var(--line); padding:32px 24px; text-align:center; height:100%;
transition: transform .2s ease, box-shadow .2s ease;
}
.leader-card:hover{ transform:translateY(-6px); box-shadow: var(--shadow-lg); }
.leader-avatar{
width:112px; height:112px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center;
font-size:34px; font-weight:700; color:#fff; background: linear-gradient(135deg, var(--sky), var(--navy));
box-shadow: var(--shadow-md); overflow:hidden;
}
.leader-avatar img{ width:100%; height:100%; object-fit:cover; }
.leader-name{ font-size:17px; font-weight:700; color:var(--navy-deep); margin-bottom:4px; }
.leader-title{ font-size:13px; color:var(--gold-deep); font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
/* ==========================================================================
SCHOOL REGISTRATION / LOGIN PORTAL
========================================================================== */
.notice-card{
background:#fff; border-radius: var(--radius-lg); border:1px solid var(--line); box-shadow: var(--shadow-sm); padding:34px; height:100%;
}
.notice-card h3{ color:#C0392B; font-weight:700; font-size:19px; text-align:center; margin-bottom:20px; }
.notice-card p{ color:#8A2E23; font-size:14.5px; line-height:1.75; text-align:justify; text-align-last:left; }
.notice-highlight{
background: var(--gold); color:var(--navy-deep); font-weight:700; padding:12px 16px; border-radius:8px; margin:18px 0; text-align:center;
}
.notice-card a{ color:#C0392B; font-weight:700; text-decoration:underline; }
.school-login-card{
background:#fff; border-radius: var(--radius-lg); border:1px solid var(--line); box-shadow: var(--shadow-md); padding:34px; height:100%;
}
.school-login-card h3{ text-align:center; color:var(--navy-deep); font-weight:700; font-size:22px; margin-bottom:6px; }
.school-login-underline{ width:56px; height:3px; background:#C0392B; margin:0 auto 22px; border-radius:2px; }
.school-login-card p.intro{ text-align:center; color:var(--slate); font-size:13.5px; margin-bottom:22px; }
.school-login-card label{ font-size:12.5px; font-weight:700; color:var(--navy-deep); margin-bottom:6px; display:block; }
.school-login-card .form-control{ border-radius:10px; border:1px solid var(--line); padding:12px 14px; font-size:14px; }
.school-login-card .form-control:focus{ box-shadow:none; border-color: var(--sky); }
.recaptcha-note{ font-size:11.5px; color:var(--slate-soft); text-align:center; margin:16px 0; }
.recaptcha-note a{ color: var(--navy); }
.school-login-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-school-login{ flex:1; background: var(--navy); color:#fff; border:none; border-radius:10px; padding:13px; font-weight:700; font-size:14.5px; min-width:140px; transition:.18s ease; }
.btn-school-login:hover{ background: var(--navy-deep); color:#fff; }
.btn-school-forgot{ flex:1; background:#6B7280; color:#fff; border:none; border-radius:10px; padding:13px; font-weight:700; font-size:14.5px; min-width:140px; transition:.18s ease; }
.btn-school-forgot:hover{ background:#555C68; color:#fff; }
.school-login-foot{ text-align:center; margin-top:20px; font-size:13.5px; color:var(--ink); }
.school-login-foot a{ color: var(--emerald); font-weight:700; }
.school-portal-message{ display:none; margin-top:16px; padding:12px 16px; border-radius:10px; font-size:13px; text-align:center; }
.school-portal-message.info{ background:var(--cloud); border:1px dashed var(--line); color:var(--navy); }
/* ==========================================================================
DOWNLOAD FORMS PAGE
========================================================================== */
.forms-toolbar{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border:1px solid var(--line); padding:20px; margin-bottom:26px; }
.forms-toolbar label{ font-size:11px; font-weight:700; color:var(--slate-soft); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; display:block; }
.forms-toolbar .form-select, .forms-toolbar .form-control{ border-radius:10px; border:1px solid var(--line); font-size:13.5px; padding:10px 14px; }
.forms-toolbar .form-select:focus, .forms-toolbar .form-control:focus{ box-shadow:none; border-color: var(--sky); }
.forms-audience-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.forms-audience-chip{
background: var(--cloud); border:1px solid var(--line); color:var(--navy); font-size:12.5px; font-weight:700;
padding:8px 15px; border-radius:999px; cursor:pointer; transition:.18s ease; user-select:none;
}
.forms-audience-chip:hover{ background:#EAF0FB; }
.forms-audience-chip.active{ background: var(--navy); color:#fff; border-color:var(--navy); }
.form-doc-card{ background:#fff; border-radius:16px; border:1px solid var(--line); padding:22px; height:100%; display:flex; flex-direction:column; transition: transform .2s ease, box-shadow .2s ease; }
.form-doc-card:hover{ transform:translateY(-5px); box-shadow: var(--shadow-md); }
.form-doc-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:12px; }
.form-doc-icon{ width:46px; height:46px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; background: linear-gradient(135deg,#DA0B1E,#A80B17); }
.form-doc-code{ font-size:10.5px; font-weight:700; color: var(--slate-soft); text-transform:uppercase; letter-spacing:.4px; }
.form-doc-title{ font-size:14.5px; font-weight:700; color:var(--navy-deep); line-height:1.35; }
.form-doc-desc{ font-size:12.5px; color:var(--slate); line-height:1.6; margin-bottom:14px; flex-grow:1; }
.form-doc-audience{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.form-doc-audience-tag{ font-size:10px; font-weight:700; padding:3px 10px; border-radius:999px; background: var(--cloud); color:var(--navy); text-transform:uppercase; letter-spacing:.3px; }
.form-doc-footer{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); }
.form-doc-size{ font-size:11px; color:var(--slate-soft); }
.btn-form-download{
background: var(--navy); color:#fff; font-size:12px; font-weight:700; border:none; border-radius:8px;
padding:9px 16px; display:inline-flex; align-items:center; gap:7px; transition:.18s ease;
}
.btn-form-download:hover{ background: var(--navy-deep); color:#fff; }
.forms-empty{ text-align:center; padding:60px 20px; color:var(--slate); }
.forms-empty i{ font-size:34px; color:var(--slate-soft); margin-bottom:14px; display:block; }
/* ==========================================================================
SYLLABUS PAGE
========================================================================== */
.board-tabs-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:22px; }
.board-tab{
background:#fff; border:2px solid var(--line); color:var(--navy-deep); font-size:14.5px; font-weight:700;
padding:13px 26px; border-radius:12px; cursor:pointer; transition:.18s ease; min-width:130px; text-align:center;
display:flex; align-items:center; justify-content:center; gap:8px; flex-direction:column;
}
.board-tab:hover{ border-color: var(--sky); }
.board-tab.active{ background:linear-gradient(135deg, var(--navy), var(--blue)); border-color: var(--navy); color:#fff; box-shadow: var(--shadow-md); }
.board-tab-soon{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color: var(--gold-deep); background:#FFF6DE; padding:2px 8px; border-radius:999px; }
.board-tab.active .board-tab-soon{ background:rgba(255,255,255,.2); color:#fff; }
@media (max-width:575.98px){
.board-tab{ min-width:44%; padding:11px 14px; font-size:13px; }
}
.class-selector-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:28px; }
.class-chip{
background:#fff; border:1.5px solid var(--line); color:var(--navy); font-size:13px; font-weight:700;
padding:9px 18px; border-radius:999px; cursor:pointer; transition:.18s ease; min-width:64px; text-align:center;
}
.class-chip:hover{ background: var(--cloud); }
.class-chip.active{ background: var(--emerald); border-color: var(--emerald); color:#fff; }
.class-chip.has-content::after{ content:"●"; color: var(--gold-deep); font-size:8px; margin-left:5px; vertical-align:middle; }
.class-chip.active.has-content::after{ color:#fff; }
.syllabus-subject-tabs{ background:#fff; padding:6px; border-radius:999px; box-shadow: var(--shadow-md); display:inline-flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-bottom:24px; }
.syllabus-subject-tabs .nav-link{ color: var(--navy); font-weight:700; font-size:13px; border-radius:999px; padding:10px 20px; border:none; }
.syllabus-subject-tabs .nav-link.active{ background: var(--navy); color:#fff; box-shadow: var(--shadow-sm); }
.syllabus-partial-note{
background:#FFF6DE; border:1px solid #F0D584; border-radius:12px; padding:14px 20px; font-size:13px; color:#5A4300;
margin-bottom:24px; text-align:center;
}
.syllabus-download-band{
background: linear-gradient(135deg, var(--navy-deep), var(--navy)); border-radius: var(--radius-lg); padding:24px 30px;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:28px; color:#fff;
}
.syllabus-download-band h4{ font-size:16px; font-weight:700; margin:0 0 4px; }
.syllabus-download-band p{ font-size:12.5px; color:#C9D6FF; margin:0; }
.btn-syllabus-download{
background: var(--gold); color: var(--navy-deep); border:none; border-radius:10px; padding:11px 22px; font-weight:700;
font-size:13.5px; white-space:nowrap; transition:.18s ease;
}
.btn-syllabus-download:hover{ background: var(--gold-deep); color: var(--navy-deep); }
.syllabus-empty{ text-align:center; padding:70px 20px; color:var(--slate); }
.syllabus-empty i{ font-size:38px; color:var(--slate-soft); margin-bottom:16px; display:block; }
.syllabus-empty h4{ color:var(--navy-deep); font-size:17px; margin-bottom:8px; }
.syllabus-accordion .accordion-item{ border:1px solid var(--line); border-radius:10px !important; margin-bottom:10px; overflow:hidden; }
.syllabus-accordion .accordion-button{ font-size:13.5px; font-weight:700; color:var(--navy-deep); background:#fff; padding:14px 18px; }
.syllabus-accordion .accordion-button:not(.collapsed){ background: var(--cloud); color:var(--navy-deep); box-shadow:none; }
.syllabus-accordion .accordion-button::after{ width:16px; height:16px; background-size:16px; }
.syllabus-section-tag{
background: var(--emerald); color:#fff; font-size:10px; font-weight:700; padding:3px 9px; border-radius:999px; margin-right:10px;
}
.syllabus-topic-list{ margin:0; padding-left:0; list-style:none; }
.syllabus-topic-list li{ display:flex; gap:8px; font-size:13px; color:var(--ink); padding:5px 0; }
.syllabus-topic-list li i{ color: var(--emerald); font-size:9px; margin-top:5px; flex:0 0 auto; }
.syllabus-note-band{
background:#E8F8F0; border:1px solid #BEE8D3; border-radius:10px; padding:14px 18px; font-size:13px;
color:#0B7A54; margin-top:14px; line-height:1.6;
}