/* Site-wide design system. Loaded after styles.css. */
:root {
  --primary: #0b74b8;
  --maroon: #7b0d12;
  --primary-deep: #095f97;
  --blue: #0b74b8;
  --gold: #f9b90f;
  --gold-deep: #8f5f00;
  --ink: #22313d;
  --muted: #566572;
  --line: #d9edf8;
  --cream: #f0f9fe;
  --white: #fff;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(8, 63, 102, .10);
  --shadow-lg: 0 18px 44px rgba(8, 63, 102, .16);
  --heading: 'Sora', system-ui, sans-serif;
  --cyan: #2fc4f2;
  --panel: #062c47;
  --body: 'Jost', system-ui, sans-serif;
  --bs-font-sans-serif: var(--body);
}

html { scroll-behavior: smooth; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
body {
  font-family: var(--body) !important;
  color: var(--ink);
  background: var(--white);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { color: var(--primary); line-height: 1.25; overflow-wrap: anywhere; }
h1, h2 { font-family: var(--heading); font-weight: 600 !important; letter-spacing: .005em; }
h3, h4, h5, h6 { font-weight: 700; }
p, li, td, th { overflow-wrap: anywhere; }
a { color: var(--blue); }
img, video, iframe { max-width: 100%; }
img { height: auto; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Helpers kept from the old theme */
.bg-darkred { background-color: var(--primary); }
.text-darkred { color: var(--primary) !important; }
.text-warning { color: var(--gold-deep) !important; }
.text-danger { color: var(--primary) !important; }
.bg-warning { background-color: var(--gold) !important; }
.bg-light { background-color: var(--cream) !important; }
.btn { border-radius: 999px; font-weight: 700; padding: .6rem 1.5rem; }
.btn-danger, .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-danger:hover, .btn-primary:hover { background: var(--primary-deep); border-color: var(--primary-deep); color: #fff; }
.btn-gold { background: var(--gold); border: 0; color: var(--primary-deep); }
.btn-gold:hover { background: #ffcb3d; color: var(--primary-deep); }
.btn-ghost { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn-ghost:hover { background: var(--primary); color: #fff; }

/* Keep old theme text and page content in step with the font size buttons */
.fs-7 { font-size: 1rem !important; }
.fsize { font-size: 1rem; }
.faculty-card, .card-text, .dropdown-item { font-size: 1rem; }
.font-tools button.active { color: #ffe08a; text-decoration: underline; }

/* Scrollbar */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--primary) #e8f4fb; }
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #e8f4fb; }
::-webkit-scrollbar-thumb { border-radius: 0; background: linear-gradient(180deg, var(--primary), var(--cyan)); }

/* Top bar */
.topbar { background: var(--primary); color: #fff; font-size: 0.8125rem; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: #ffe08a; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar-contact, .topbar-tools { display: flex; align-items: center; gap: 18px; min-width: 0; }
.topbar-contact a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar-contact i { color: #ffe08a; }
.topbar-social { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.topbar-social img { display: block; width: auto; height: 20px; }
.font-tools { display: flex; align-items: center; gap: 2px; }
.font-tools button { background: none; border: 0; color: inherit; font-size: 0.75rem; font-weight: 700; padding: 2px 6px; }
.font-tools button:hover { color: #ffe08a; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 1030; }
.site-nav { background: #fff; box-shadow: 0 4px 18px rgba(8, 63, 102, .08); padding: 8px 0; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.brand img { flex: none; width: 54px; height: 54px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-name { font-family: var(--heading); font-size: 1.1875rem; font-weight: 700; letter-spacing: -.01em; color: var(--primary); white-space: normal; }
.brand-tag { font-size: 0.6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.site-nav .navbar-toggler { flex: none; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.site-nav .nav-link { color: var(--ink); font-size: 0.9062rem; font-weight: 600; padding: 8px 11px !important; border-radius: 8px; white-space: nowrap; }
.site-nav .nav-link:hover, .site-nav .nav-link.show { color: var(--primary); background: #e8f4fb; }
.site-nav .dropdown-menu { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; }
.site-nav .dropdown-item { border-radius: 8px; font-size: 0.875rem; font-weight: 500; padding: 8px 12px; white-space: normal; }
.site-nav .dropdown-item:hover { background: #e8f4fb; color: var(--primary); }
.nav-cta { margin-left: 10px; white-space: nowrap; }
@media (max-width: 1199.98px) {
  .site-nav .navbar-collapse { max-height: calc(100vh - 140px); overflow-y: auto; padding: 10px 0 6px; }
  .site-nav .dropdown-menu { border: 0; box-shadow: none; background: #f1f8fc; }
  .nav-cta { margin: 10px 0 4px; display: block; text-align: center; }
}

/* Hero slider */
.hero .carousel-inner { z-index: auto; }
.hero .carousel-item img { display: block; width: 100%; height: auto; }
.hero .carousel-control-prev, .hero .carousel-control-next { width: 56px; opacity: .85; }
.hero .carousel-control-prev-icon, .hero .carousel-control-next-icon {
  width: 38px; height: 38px; border-radius: 50%; background-color: rgba(8, 63, 102, .6); background-size: 55%;
}

/* News ticker */
.news-bar { display: flex; align-items: stretch; background: var(--gold); color: #1c1400; font-weight: 700; font-size: 1rem; }
.news-label { display: flex; align-items: center; gap: 8px; flex: none; padding: 9px 20px; background: var(--primary); color: #fff; font-weight: 700; white-space: nowrap; }
.news-label i { color: var(--gold); }
.news-track { display: flex; align-items: center; flex: 1; min-width: 0; overflow: hidden; }
.news-track marquee { display: block; width: 100%; }
.news-track marquee, .news-track marquee * { color: #1c1400 !important; }
.news-toggle { display: grid; flex: none; align-self: center; place-items: center; width: 26px; height: 26px; margin: 0 10px; padding: 0; border: 0; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.6875rem; }
.news-toggle:hover { background: var(--primary-deep); }

/* Sections */
.section { padding: 72px 0; }
.section-alt { background: var(--cream); }
.section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.eyebrow { display: block; margin-bottom: 8px; color: var(--gold-deep); font-size: 0.7812rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section-head h2, .section-title { margin: 0; font-size: clamp(1.875rem, 4vw, 2.625rem); }
.section-head p { margin: 10px 0 0; color: var(--muted); }

/* Quick links */
.quick-links { position: relative; z-index: 2; margin-top: 28px; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.quick-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--primary); font-size: 0.9062rem; font-weight: 700; line-height: 1.3; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--primary); }
.quick-card i { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fef3d0; color: var(--gold-deep); font-size: 1.0625rem; }

/* About */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.about-media { position: relative; }
.about-media .carousel { overflow: hidden; border-radius: 22px; box-shadow: var(--shadow-lg); }
.about-media img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.about-badge { position: absolute; right: 18px; bottom: 18px; padding: 12px 18px; border-radius: 14px; background: var(--gold); color: var(--primary-deep); font-weight: 700; line-height: 1.2; text-align: center; }
.about-badge strong { display: flex; align-items: flex-start; justify-content: center; font-family: var(--body); font-size: 2rem; font-weight: 700; line-height: 1.1; }
.about-copy { color: var(--ink); }
.about-copy h1, .about-copy h2, .about-copy h3 { margin-bottom: 14px; font-family: var(--heading); font-size: clamp(1.875rem, 4vw, 2.625rem) !important; font-weight: 600; }
.about-copy h1 *, .about-copy h2 *, .about-copy h3 * { font-size: inherit !important; font-weight: 600 !important; }
.about-copy h1, .about-copy h2 { letter-spacing: -.01em; }
.about-copy p, .about-copy p *, .about-copy li, .about-copy li * { font-size: 1.0625rem !important; }
.about-copy p { margin-bottom: 12px; text-align: left !important; }

.about-slide-2, .about-slide-3 { transform: scale(1.08); filter: contrast(1.08) saturate(1.12) brightness(1.03); }
.about-slide-2 { object-position: center 30%; }
.about-slide-3 { object-position: center 45%; }

/* Stats */
.stats { background: linear-gradient(135deg, #e3f4fd, #f4fbff 60%, #fff6d6); color: var(--ink); }
.stats .section-head h2 { color: var(--primary-deep); }
.stats .eyebrow { color: var(--gold-deep); }
.stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.stat-card { padding: 22px 10px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.stat-num { display: flex; align-items: flex-start; justify-content: center; color: var(--gold); font-family: var(--body); font-size: clamp(2.125rem, 3.6vw, 2.875rem); font-weight: 700; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.plus { margin-left: 2px; font-size: .58em; font-weight: 600; line-height: 1.25; }
.stat-label { display: block; margin-top: 6px; color: var(--ink); font-size: 0.8438rem; font-weight: 600; line-height: 1.35; }

/* Gallery (home and gallery page) */
.gallery { --bs-gutter-x: 0; margin: 0 -7px; }
.gallery > [class*="col-"] { height: auto !important; aspect-ratio: 1; padding: 7px; overflow: hidden; }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 14px !important; transition: transform .3s; }
.gallery img:hover { transform: scale(1.03); }
#galleryModal .modal-content { border: 0; border-radius: var(--radius); overflow: hidden; }
#galleryModal .carousel-item img { max-height: 76vh; object-fit: contain; background: #062c47; }
.zoom-container.zoomed { overflow: auto; }

/* Explore */
.explore-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.explore-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); color: var(--primary); font-weight: 700; text-decoration: none; transition: background .2s, color .2s; }
.explore-card:hover { background: var(--primary); color: #fff; }

/* Highlights */
.highlight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.highlight-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--primary); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.highlight-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.highlight-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.highlight-card span { padding: 15px 18px 17px; font-weight: 700; line-height: 1.4; }

/* Admission band */
.admission-wrap { padding: 72px 0 64px; }
.admission-band { position: relative; display: flex; align-items: center; gap: 26px; overflow: hidden; padding: 36px 42px; border: 1px solid rgba(47, 196, 242, .4); border-radius: 22px; background: radial-gradient(circle at 92% 10%, rgba(249, 185, 15, .24), transparent 34%), radial-gradient(circle at 4% 100%, rgba(47, 196, 242, .25), transparent 38%), linear-gradient(120deg, #052238, #0b5f96); box-shadow: 0 20px 44px rgba(8, 63, 102, .28); color: #fff; }
.admission-icon { display: grid; flex: none; place-items: center; width: 74px; height: 74px; border-radius: 20px; background: var(--gold); color: #1c1400; font-size: 1.875rem; box-shadow: 0 0 26px rgba(249, 185, 15, .45); }
.admission-text { flex: 1; min-width: 0; }
.admission-text .eyebrow { margin-bottom: 4px; color: var(--gold); }
.admission-text .eyebrow::before { color: var(--cyan); }
.admission-band h2 { margin: 0 0 4px; color: #fff; font-size: clamp(1.5625rem, 3.2vw, 2.125rem); }
.admission-band p { margin: 0; color: #d5e7f3; }
.admission-band .btn { flex: none; padding: .75rem 1.9rem; background: var(--gold); color: #1c1400; }
.admission-band .btn:hover { background: #ffcb3d; color: #1c1400; box-shadow: 0 0 22px rgba(249, 185, 15, .6); }

/* Student & parent hub */
.hub .owl-carousel { margin: 0 !important; padding: 8px 0; }
.hub .card { margin: 8px 6px; border: 0; }
.hub .card:hover { transform: translateY(-4px); }
.hub .card-image { height: 240px; }
.hub .card-content, .hub .category-badge { display: none; }
.custom-prev, .custom-next { color: var(--primary); }
.custom-prev:hover, .custom-next:hover { background: var(--primary); }
.custom-dot.active { background: var(--primary); }

/* Social feeds */
.social-section > .container > .row { --bs-gutter-x: 0; gap: 24px !important; margin: 0 0 24px; padding: 0 !important; }
.social-section > .container > .row:last-child { margin-bottom: 0; }
.social-section > .container > .row > .col { min-width: 0; padding: 20px !important; background: #fff !important; border: 1px solid var(--line) !important; border-radius: var(--radius); box-shadow: var(--shadow); }
.social-section .row .row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px !important; margin: 0; }
.social-section .row .row > .col { flex: 0 1 auto; width: auto; padding: 7px 16px !important; border: 0 !important; border-radius: 999px !important; background: #e8f4fb; color: var(--primary) !important; font-weight: 700; }
.social-section .row .row > .col.bg-darkred { background: var(--primary); color: #fff !important; }
.social-section iframe { display: block; max-width: 100%; border: 0; border-radius: 10px; }


.wall-box { height: 350px; margin-top: 20px; overflow: auto; scrollbar-width: none; }
.wall-frame { display: block; width: 100%; height: 420px; border: 0; background: #fff; }

.enquiry-check { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.page-extra { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; padding-top: 16px; padding-bottom: 48px; }
.page-extra img { width: 100%; height: 220px; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow); }

.whatsapp-float { position: fixed; right: 22px; bottom: 22px; text-decoration: none; z-index: 1040; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #25d366; color: #fff; font-size: 1.5rem; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); transition: transform .2s; }
.whatsapp-float:hover, .whatsapp-float:focus { color: #fff; text-decoration: none; transform: scale(1.08); }

/* Blog */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
.blog-main { min-width: 0; }
.blog-result { font-weight: 700; color: var(--primary-deep); }
.blog-entry { overflow: hidden; margin-bottom: 34px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.blog-entry-image { display: block; overflow: hidden; }
.blog-entry-image img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; transition: transform .4s; }
.blog-entry:hover .blog-entry-image img { transform: scale(1.04); }
.blog-entry-body { padding: 24px 28px 28px; }
.blog-entry-body h2 { margin: 6px 0 12px; font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
.blog-entry-body h2 a { color: var(--primary-deep); text-decoration: none; }
.blog-entry-body h2 a:hover { color: var(--primary); }
.blog-entry-body p { color: var(--muted); }
.blog-more { color: var(--primary); font-weight: 700; text-decoration: none; }
.blog-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; color: var(--muted); font-size: 0.875rem; }
.blog-meta i { color: var(--primary); }
.blog-pages { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.blog-head { padding: 16px 0; background: #f1f8fc; border-bottom: 1px solid var(--line); }
.blog-crumbs { color: var(--muted); font-size: 0.875rem; overflow-wrap: anywhere; }
.blog-crumbs a { color: var(--primary); text-decoration: none; }
.blog-single h1 { margin-bottom: 12px; font-size: clamp(1.75rem, 3.6vw, 2.5rem); color: var(--primary-deep); }
.blog-main-image { display: block; width: 100%; max-height: 480px; object-fit: cover; margin: 18px 0 22px; border-radius: 12px; }
.blog-lead { padding-left: 16px; border-left: 4px solid var(--gold); color: var(--ink); font-size: 1.1875rem; font-weight: 500; }
.blog-content { font-size: 1.0625rem; line-height: 1.85; }
.blog-content h2 { margin: 28px 0 12px; font-size: 1.625rem; }
.blog-content h3 { margin: 24px 0 10px; font-size: 1.3125rem; }
.blog-content p, .blog-content ul, .blog-content ol { margin-bottom: 16px; }
.blog-content blockquote { margin: 22px 0; padding: 16px 20px; border-left: 4px solid var(--primary); border-radius: 0 10px 10px 0; background: #f1f8fc; font-style: italic; }
.blog-content img { height: auto; border-radius: 10px; }
.blog-content table { display: block; max-width: 100%; overflow-x: auto; }
.blog-sub { margin: 30px 0 12px; font-size: 1.25rem; }
.blog-video { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000; }
.blog-video iframe, .blog-video video { display: block; width: 100%; height: 100%; border: 0; }
.blog-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.blog-nav a { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--primary-deep); font-weight: 700; line-height: 1.35; text-decoration: none; }
.blog-nav a:hover { border-color: var(--primary); }
.blog-nav a.next { text-align: right; }
.blog-nav small { display: block; margin-bottom: 4px; color: var(--muted); font-weight: 500; }
.blog-sidebar { position: sticky; top: 130px; display: grid; gap: 22px; min-width: 0; }
.blog-widget { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.blog-widget h4 { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--gold); font-size: 1.0625rem; }
.blog-search { display: flex; }
.blog-search input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-right: 0; border-radius: 8px 0 0 8px; }
.blog-search button { width: 44px; border: 0; border-radius: 0 8px 8px 0; background: var(--primary); color: #fff; }
.blog-recent { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--primary-deep); text-decoration: none; }
.blog-recent:last-child { border-bottom: 0; }
.blog-recent img { flex: none; width: 70px; height: 56px; object-fit: cover; border-radius: 6px; }
.blog-recent strong { display: block; font-size: 0.875rem; line-height: 1.35; }
.blog-recent small { color: var(--muted); }
.blog-cta { background: #f1f8fc; text-align: center; }
.blog-cta p { font-size: 0.9375rem; }
@media (max-width: 991.98px) {
  .blog-layout { grid-template-columns: 1fr; gap: 32px; }
  .blog-sidebar { position: static; }
}
@media (max-width: 575px) {
  .blog-entry-body { padding: 18px; }
  .blog-nav { grid-template-columns: 1fr; }
  .blog-nav a.next { text-align: left; }
}
.blog-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 24px; }
.blog-gallery img { width: 100%; height: 170px; object-fit: cover; border-radius: 12px; }
.blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.blog-share strong { margin-right: 6px; color: var(--primary-deep); }
.blog-share a, .blog-share button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--primary); color: #fff; text-decoration: none; }
.blog-share a:hover, .blog-share button:hover { background: var(--primary-deep); color: #fff; }

/* Newsletter */
.newsletter-band { padding: 44px 0; background-color: #052238; background-image: radial-gradient(circle at 10% 20%, rgba(47, 196, 242, .22), transparent 38%), radial-gradient(circle at 90% 80%, rgba(249, 185, 15, .16), transparent 34%), linear-gradient(120deg, #052238, #0b5f96); color: #fff; }
.newsletter-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px 36px; align-items: center; }
.newsletter-text .eyebrow { margin-bottom: 4px; color: var(--gold); }
.newsletter-text .eyebrow::before { color: var(--cyan); }
.newsletter-text h2 { margin: 0 0 4px; color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); }
.newsletter-text p { margin: 0; color: #d5e7f3; }
.newsletter-form { display: flex; gap: 10px; min-width: 0; }
.newsletter-form input[type=text], .newsletter-form input[type=email] { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--ink); }
.newsletter-form .btn { flex: none; }
.newsletter-note { grid-column: 1 / -1; margin: 0; color: var(--gold); font-weight: 600; text-align: right; }

/* Footer */
.site-footer { background: var(--primary-deep); color: #d5e7f3; font-size: 0.9062rem; }
.site-footer a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.site-footer a:hover { color: var(--gold); }
.footer-main { display: grid; grid-template-columns: 1.5fr 1fr .8fr 1.2fr; gap: 40px; padding: 60px 0 44px; }
.footer-title { margin-bottom: 14px; color: #fff; font-size: 1rem; font-family: var(--body); font-weight: 700; }
.footer-brand { color: #fff; font-family: var(--heading); font-size: 1.375rem; font-weight: 600; }
.footer-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.footer-contact li { display: flex; gap: 10px; }
.footer-contact i { flex: none; width: 16px; margin-top: 6px; color: var(--gold); }
.footer-social { display: flex; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.footer-social img { display: block; width: auto; height: 26px; }
.footer-map iframe { display: block; width: 100%; height: 190px; border: 0; border-radius: 12px; }
.footer-bottom { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 0.8125rem; text-align: center; }

/* Academic calendar */
.calendar-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.calendar-tabs button { padding: 10px 20px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--primary-deep); font-weight: 700; }
.calendar-tabs button.active { border-color: var(--primary); background: var(--primary); color: #fff; }
.calendar-tabs span { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: #1c1400; font-size: 0.75rem; }
.calendar-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.calendar-head h2 { margin: 0 0 4px; font-size: clamp(1.625rem, 3.4vw, 2.25rem); }
.calendar-head p { margin: 0; color: var(--muted); }
.calendar-pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 22px; }
.calendar-pages figure { margin: 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.calendar-pages img { display: block; width: 100%; height: auto; border-radius: 8px; }
.calendar-pages figcaption { padding: 8px 4px 2px; color: var(--muted); font-size: 0.875rem; font-weight: 600; text-align: center; }
.calendar-archive { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.calendar-archive h3 { margin-bottom: 14px; font-size: 1.25rem; }
.calendar-archive div { display: flex; flex-wrap: wrap; gap: 12px; }
.calendar-archive a { padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--primary-deep); font-weight: 600; text-decoration: none; }
.calendar-archive a:hover { border-color: var(--primary); }
.calendar-archive i, .calendar-head .btn i { margin-right: 6px; }

/* School activities */
.activity-home { background-color: #eceef0; background-image: linear-gradient(180deg, #f3f4f5 0%, #e6e8eb 100%); }
.activity-home .activity-feature { border-color: rgba(0, 0, 0, .06); box-shadow: 0 20px 44px rgba(30, 40, 50, .18); }
.activity-home .activity-list { background: rgba(255, 255, 255, .7); border-color: rgba(0, 0, 0, .05); box-shadow: 0 8px 24px rgba(30, 40, 50, .08); }
.activity-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: stretch; }
.activity-feature .carousel-item { transition-duration: .7s; }
.activity-feature { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.activity-slide { position: relative; }
.activity-photo { display: block; overflow: hidden; background: var(--panel); }
.activity-photo img { display: block; width: 100%; height: 480px; object-fit: cover; }
.activity-copy { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; padding: 48px 190px 26px 30px; background: linear-gradient(to top, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .6) 45%, transparent 85%); color: #fff; pointer-events: none; }
.activity-copy small { color: #f1f1f1; font-weight: 600; }
.activity-copy h3 { margin: 6px 0 8px; font-size: clamp(1.375rem, 2.6vw, 2rem); color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.activity-copy p { max-width: 640px; margin-bottom: 12px; color: #f1f1f1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.activity-copy .btn { position: absolute; right: 30px; bottom: 26px; pointer-events: auto; }
.activity-feature .carousel-control-prev, .activity-feature .carousel-control-next { top: 50%; bottom: auto; width: 44px; height: 44px; margin-top: -22px; opacity: 1; z-index: 3; }
.activity-feature .carousel-control-prev { left: 16px; right: auto; }
.activity-feature .carousel-control-next { right: 16px; left: auto; }
.activity-feature .carousel-control-prev-icon, .activity-feature .carousel-control-next-icon { width: 44px; height: 44px; border-radius: 50%; background-color: rgba(5, 34, 56, .65); background-size: 50%; }
.activity-list { display: flex; flex-direction: column; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.activity-list h3 { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--gold); font-size: 1.125rem; }
.activity-list a { display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; border-radius: 10px; color: var(--primary-deep); font-weight: 600; line-height: 1.35; text-decoration: none; }
.activity-list a small { color: var(--muted); font-weight: 500; }
.activity-list a:hover, .activity-list a.active { background: #e8f4fb; }
.activity-list a.active { box-shadow: inset 3px 0 0 var(--primary); }
.activity-list .activity-all { flex-direction: row; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; color: var(--primary); font-weight: 700; }
.activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.activity-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.activity-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--cyan), var(--shadow-lg); color: var(--ink); }
.activity-card-image { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel); }
.activity-card-image img { width: 100%; height: 100%; object-fit: cover; }
.activity-card-image em { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(5, 34, 56, .75); color: #fff; font-size: 0.8125rem; font-style: normal; }
.activity-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.activity-card-body small { color: var(--muted); }
.activity-card-body strong { color: var(--primary-deep); font-size: 1.125rem; line-height: 1.35; }
.activity-card-body > span { color: var(--muted); font-size: 0.9375rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.activity-detail-carousel { overflow: hidden; margin: 18px 0 22px; border-radius: 14px; background: var(--panel); }
.activity-detail-carousel img { display: block; width: 100%; height: clamp(240px, 52vw, 480px); object-fit: contain; }
@media (max-width: 991.98px) {
  .activity-layout { grid-template-columns: 1fr; }
  .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .activity-photo img { height: 420px; }
  .activity-copy { padding: 30px 16px 68px; }
  .activity-copy p { -webkit-line-clamp: 2; font-size: 0.9375rem; }
  .activity-copy .btn { padding: .45rem 1.1rem; font-size: 0.875rem; }
  .activity-copy .btn { right: 16px; bottom: 16px; }
  .activity-feature .carousel-control-prev, .activity-feature .carousel-control-next { top: 32%; }
  .activity-feature .carousel-control-prev { left: 10px; }
  .activity-feature .carousel-control-next { right: 10px; }
  .activity-grid { grid-template-columns: 1fr; }
}

/* Speed and accessibility fixes */
.about-media .carousel-inner { aspect-ratio: 5 / 4; }
.yt-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; border-radius: 10px; background: #000; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.yt-facade span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 12px; background: #ff0000; color: #fff; font-size: 1.25rem; }
.yt-facade:hover span { background: #cc0000; }
.yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; }
.btn-gold, .btn-gold:hover, .about-badge { color: #1c1400 !important; }
.social-section .row .row > .col { color: var(--primary-deep) !important; }
.topbar-social img, .footer-social img { aspect-ratio: 1; object-fit: contain; }

/* Footer finish */
.site-footer { position: relative; background-color: #052238; background-image: radial-gradient(circle at 8% 12%, rgba(47, 196, 242, .14), transparent 34%), radial-gradient(circle at 92% 90%, rgba(249, 185, 15, .1), transparent 32%); }
.site-footer::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--primary), var(--cyan), var(--gold)); }
.footer-main { gap: 44px; }
.footer-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.footer-logo span { display: grid; flex: none; place-items: center; width: 70px; height: 84px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 2px rgba(249, 185, 15, .6); }
.footer-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.footer-logo .footer-brand { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.site-footer p { line-height: 1.75; }
.footer-title { position: relative; margin-bottom: 20px; padding-bottom: 10px; font-size: 1.0625rem; }
.footer-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 38px; height: 3px; border-radius: 2px; background: var(--gold); }
.site-footer .footer-list a { transition: color .2s, padding-left .2s; }
.site-footer .footer-list:not(.footer-contact) a:hover { padding-left: 5px; }
.footer-contact i { display: grid; place-items: center; width: 30px; height: 30px; margin-top: 0; border-radius: 8px; background: rgba(47, 196, 242, .14); font-size: 0.8125rem; }
.footer-contact li { align-items: flex-start; }
.footer-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .1); transition: background .2s, transform .2s; }
.footer-social a:hover { background: rgba(255, 255, 255, .2); transform: translateY(-3px); }
.footer-social img { height: 22px; }
.footer-map iframe { border: 1px solid rgba(255, 255, 255, .16); }
.footer-bottom { color: #9fb6c8; }

/* Inner pages */
.bdcrp { position: relative; padding: 44px 0 !important; background: linear-gradient(120deg, #dff2fd, #f2fafe 60%, #fff4cc) !important; }
.bdcrp .container { padding-top: 12px !important; padding-bottom: 12px !important; }
.bdcrp h1 { margin: 0; color: var(--primary-deep) !important; font-size: clamp(1.875rem, 5vw, 2.875rem); text-align: center; }
.bdcrp h1::after { content: ""; display: block; width: 56px; height: 3px; margin: 14px auto 0; border-radius: 2px; background: var(--gold); }
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card:hover { transform: none; box-shadow: var(--shadow-lg); }
.card[style*="height"] { height: auto !important; overflow: visible !important; }
.card-title { color: var(--primary) !important; }
.table { --bs-table-border-color: var(--line); }
.table thead th { background: var(--primary); color: #fff; }
.form-control, .form-select { min-height: 46px; border: 1px solid #c9dce8; border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(13, 116, 176, .15); }
.faculty-card { border-color: var(--line); border-radius: 12px; background: #fff; }
.faq-text h1 { color: var(--primary); font-family: var(--heading); }
.faq-toggle { color: var(--blue); }

@media (max-width: 768px) {
  .container { padding: 0 16px; }
}

/* Alumni, virtual tour, news and admission pages */
.media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.media-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.media-card img, .media-card video, .media-card iframe { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 0; background: #000; }
.media-card video { object-fit: contain; }
.media-card-body { padding: 16px 18px 18px; }
.media-card-body h3 { margin: 0 0 6px; font-size: 1.125rem; }
.media-card-body p { margin: 0; color: var(--muted); font-size: 0.9688rem; }
.empty-note { padding: 44px 20px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--cream); color: var(--muted); text-align: center; }
.journey-card { max-width: 680px; margin: 0 auto; padding: 42px 34px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); text-align: center; }
.journey-card > i { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: #fef3d0; color: var(--gold-deep); font-size: 1.625rem; }
.journey-card h2 { margin-bottom: 12px; font-size: clamp(1.625rem, 4vw, 2.125rem); }
.journey-period { color: var(--primary-deep); font-size: 1.125rem; }
.journey-card .btn { margin-top: 8px; }

/* High-tech look */
.has-decor { position: relative; overflow: hidden; }
.has-decor > .container { position: relative; z-index: 1; }
.school-art { position: absolute; z-index: 0; width: clamp(64px, 7.5vw, 104px); pointer-events: none; opacity: 0; transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.school-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(8, 63, 102, .18)); }
.school-art.in-right { transform: translateX(50px) rotate(8deg); }
.school-art.in-left { transform: translateX(-50px) rotate(-8deg); }
.school-art.in-up { transform: translateY(40px); }
.school-art.shown { opacity: 1; transform: none; }
.d-about { left: 3%; bottom: 18px; width: clamp(64px, 6vw, 88px); }
.d-stats { right: 4%; top: 34px; }
.d-gallery { left: 5%; top: 44px; }
.d-highlight { right: 4%; top: 40px; }
.d-hub { left: 4%; top: 46px; }
.d-social { right: 3%; bottom: 14px; }
.d-banner-r { right: 9%; top: 50%; margin-top: -46px; width: 92px; }
.d-banner-r2 { right: 16%; top: 50%; margin-top: -46px; width: 92px; }
.d-banner-l { left: 9%; top: 50%; margin-top: -46px; width: 92px; }
.d-banner-l2 { left: 16%; top: 50%; margin-top: -46px; width: 92px; }

.section:not(.stats), .section-alt { background-image: radial-gradient(rgba(11, 116, 184, .12) 1px, transparent 1px); background-size: 22px 22px; }
.section-head h2::after { content: ""; display: block; width: 72px; height: 3px; margin: 14px auto 0; border-radius: 2px; background: linear-gradient(90deg, var(--primary), var(--cyan), var(--gold)); }
.eyebrow { font-family: var(--heading); }
.eyebrow::before { content: "// "; color: var(--primary); }

.stats { background: var(--panel); background-image: linear-gradient(rgba(47, 196, 242, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 196, 242, .08) 1px, transparent 1px), linear-gradient(135deg, #052238, #0a4a76); background-size: 34px 34px, 34px 34px, auto; }
.stats .section-head h2 { color: #fff; }
.stats .eyebrow, .stats .eyebrow::before { color: var(--cyan); }
.stat-card { position: relative; overflow: hidden; border: 1px solid rgba(47, 196, 242, .35); background: rgba(6, 44, 71, .7); box-shadow: inset 0 0 22px rgba(47, 196, 242, .08); }
.stat-num { color: var(--gold); text-shadow: 0 0 16px rgba(249, 185, 15, .35); }
.stat-label { color: #d5e7f3; }

.quick-card, .highlight-card, .media-card, .explore-card, .journey-card { position: relative; transition: transform .2s, box-shadow .2s, border-color .2s; }
.quick-card:hover, .highlight-card:hover, .media-card:hover, .explore-card:hover { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 14px 34px rgba(11, 116, 184, .24); }
.btn-gold, .btn-danger, .btn-primary { transition: box-shadow .2s, background .2s; }
.btn-gold:hover { box-shadow: 0 0 18px rgba(249, 185, 15, .6); }
.btn-danger:hover, .btn-primary:hover { box-shadow: 0 0 18px rgba(47, 196, 242, .55); }
.site-nav { border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--primary), var(--cyan), var(--gold)) 1; }
.bdcrp { background-color: var(--panel) !important; background-image: linear-gradient(rgba(47, 196, 242, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 196, 242, .08) 1px, transparent 1px), linear-gradient(120deg, #052238, #0b5f96) !important; background-size: 34px 34px, 34px 34px, auto !important; }
.bdcrp h1 { color: #fff !important; }
.bdcrp h1::after { background: linear-gradient(90deg, var(--cyan), var(--gold)); }
.site-footer { background-color: #052238; }

/* Image cards */
.gallery > [class*="col-"] { position: relative; }
.gallery > [class*="col-"]::before { content: ""; position: absolute; inset: 7px; z-index: 1; border-radius: 16px; background: linear-gradient(to top, rgba(6, 44, 71, .55), transparent 55%); opacity: 0; pointer-events: none; transition: opacity .25s; }
.gallery > [class*="col-"]::after { content: "\f00e"; position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--gold); color: #1c1400; font: 900 17px "Font Awesome 6 Free"; opacity: 0; pointer-events: none; transform: scale(.7); transition: opacity .25s, transform .25s; }
.gallery > [class*="col-"]:hover::before, .gallery > [class*="col-"]:hover::after { opacity: 1; transform: none; }
.gallery img { padding: 5px; border-radius: 16px !important; background: linear-gradient(135deg, var(--primary), var(--cyan), var(--gold)); box-shadow: var(--shadow); cursor: pointer; }
.gallery img:hover { transform: none; }

.highlight-grid { gap: 26px; }
.highlight-card { position: relative; aspect-ratio: 4 / 3; border: 0; border-radius: 20px; background: var(--panel); isolation: isolate; }
.highlight-card img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transition: transform .5s ease; }
.highlight-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(5, 34, 56, .92) 0%, rgba(5, 34, 56, .45) 38%, transparent 66%); }
.highlight-card::after { content: "\f061"; position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: #1c1400; font: 900 14px "Font Awesome 6 Free"; opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .25s; }
.highlight-card span { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 18px 20px; color: #fff; font-family: var(--heading); font-size: 1.0312rem; font-weight: 600; line-height: 1.35; }
.highlight-card span::before { content: ""; display: block; width: 34px; height: 3px; margin-bottom: 9px; border-radius: 2px; background: var(--gold); transition: width .3s; }
.highlight-card:hover img { transform: scale(1.07); }
.highlight-card:hover::after { opacity: 1; transform: none; }
.highlight-card:hover span::before { width: 64px; }

.hub .card { border-radius: 20px; background: #fff; padding: 7px; box-shadow: var(--shadow); }
.hub .card-image { height: 250px; border-radius: 15px; }
.hub .card:hover { box-shadow: 0 0 0 2px var(--cyan), 0 14px 34px rgba(11, 116, 184, .22); }

/* Homepage gallery mosaic */
.home-gallery { background-color: #f4fbff; }
.home-gallery .gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 16px; margin: 0; }
.home-gallery .gallery > [class*="col-"] { width: auto; max-width: none; aspect-ratio: auto; padding: 0; overflow: visible; }
.home-gallery .gallery > [class*="col-"]::before { inset: 0; }
.home-gallery .gallery > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
.home-gallery .gallery > :nth-child(6) { grid-column: span 2; }
.home-gallery .gallery img { padding: 4px; transition: transform .3s, box-shadow .3s; }
.home-gallery .gallery > :hover img { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 18px 36px rgba(11, 116, 184, .3); }
.home-gallery .gallery > :hover::before, .home-gallery .gallery > :hover::after { translate: 0 -5px; }

/* Homepage highlights showcase */
.home-highlights { background-color: var(--panel); background-image: radial-gradient(circle at 12% 18%, rgba(47, 196, 242, .24), transparent 36%), radial-gradient(circle at 88% 84%, rgba(249, 185, 15, .16), transparent 34%), linear-gradient(135deg, #052238, #0a4a76); background-size: auto; }
.home-highlights .section-head h2 { color: #fff; }
.home-highlights .eyebrow, .home-highlights .eyebrow::before { color: var(--cyan); }
.home-highlights .highlight-grid { grid-auto-rows: 230px; gap: 20px; }
.home-highlights .highlight-card { aspect-ratio: auto; box-shadow: 0 0 0 1px rgba(47, 196, 242, .4), 0 16px 34px rgba(0, 0, 0, .32); }
.home-highlights .highlight-card:hover { box-shadow: 0 0 0 2px var(--gold), 0 0 34px rgba(249, 185, 15, .35); }
.home-highlights .highlight-card:first-child { grid-column: span 2; grid-row: span 2; }
.home-highlights .highlight-card:first-child span { padding: 26px 28px; font-size: clamp(1.25rem, 2.4vw, 1.75rem); }

/* Image viewer */
img.iv-ready { cursor: zoom-in; }
.img-viewer { position: fixed; inset: 0; z-index: 2000; display: none; flex-direction: column; background: rgba(4, 22, 36, .96); color: #fff; }
.img-viewer.open { display: flex; }
.iv-bar { display: flex; flex: none; align-items: center; justify-content: space-between; padding: 10px 16px; }
.iv-count { font-size: 0.875rem; font-weight: 600; }
.iv-actions { display: flex; gap: 8px; }
.img-viewer button { color: #fff; border: 0; }
.iv-actions button, .iv-nav { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.iv-actions button:hover, .iv-nav:hover { background: var(--gold); color: var(--primary-deep); }
.iv-stage { display: flex; flex: 1; min-height: 0; overflow: hidden; padding: 0 64px; }
.iv-stage img { display: block; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; border-radius: 6px; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.img-viewer.zoomed .iv-stage { display: block; overflow: auto; padding: 0; }
.img-viewer.zoomed .iv-stage img { width: 250%; max-width: none; height: auto; max-height: none; margin: 0; border-radius: 0; cursor: zoom-out; }
.img-viewer.zoomed .iv-nav { display: none; }
.iv-nav { position: absolute; top: 50%; margin-top: -22px; }
.iv-prev { left: 12px; }
.iv-next { right: 12px; }
.iv-thumbs { display: flex; flex: none; gap: 8px; padding: 10px 16px 14px; overflow-x: auto; scrollbar-width: thin; }
.iv-thumbs:has(> :only-child) { justify-content: center; }
.iv-thumbs button { flex: none; width: 66px; height: 50px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: none; opacity: .55; }
.iv-thumbs button.active, .iv-thumbs button:hover { border-color: var(--gold); opacity: 1; }
.iv-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.img-viewer.single .iv-nav, .img-viewer.single .iv-thumbs, .img-viewer.single .iv-count { display: none; }
@media (max-width: 767.98px) {
  .iv-stage { padding: 0 6px; }
  .iv-nav { width: 38px; height: 38px; margin-top: -19px; }
  .iv-prev { left: 6px; }
  .iv-next { right: 6px; }
}

/* Tablet */
@media (max-width: 1099.98px) {
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991.98px) {
  .section { padding: 56px 0; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .highlight-grid, .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admission-wrap { padding: 56px 0 48px; }
  .admission-band { padding: 30px; }
}

.instagram-media { min-width: 0 !important; }

@media (max-width: 991.98px) {
  .home-gallery .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 190px; }
  .home-gallery .gallery > :nth-child(6) { grid-column: span 1; }
  .home-gallery .gallery > :nth-child(8) { grid-column: span 2; }
  .home-highlights .highlight-card:first-child { grid-row: span 1; }
  .home-highlights .highlight-card:last-child:nth-child(even) { grid-column: span 2; }
}

@media (max-width: 575px) {
  .whatsapp-float { right: 14px; bottom: 14px; width: 42px; height: 42px; font-size: 1.375rem; }
}

@media (max-width: 767.98px) {
  .newsletter-inner { grid-template-columns: 1fr; }
  .newsletter-form { flex-direction: column; }
  .newsletter-note { text-align: left; }
}

/* Mobile */
@media (max-width: 767.98px) {
  .topbar-contact .topbar-email { display: none; }
  .brand img { width: 46px; height: 46px; }
  .brand-name { font-size: 0.9375rem; }
  .brand-tag { font-size: 0.625rem; }
  .hero .carousel-control-prev, .hero .carousel-control-next { width: 42px; }
  .hero .carousel-control-prev-icon, .hero .carousel-control-next-icon { width: 28px; height: 28px; }
  .social-section > .container > .row { flex-direction: column; }
  .news-bar { font-size: 0.9375rem; }
  .news-label { padding: 8px 12px; }
  .news-label span { display: none; }
  .quick-links { margin-top: 18px; }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .quick-card { flex-direction: column; gap: 8px; padding: 13px 8px; font-size: 0.8438rem; text-align: center; }
  .quick-card:last-child { grid-column: 1 / -1; }
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 28px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gallery > [class*="col-"] { width: 50%; padding: 5px; }
  .explore-grid, .highlight-grid, .media-grid { grid-template-columns: 1fr; }
  .home-gallery .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
  .home-gallery .gallery > [class*="col-"] { width: auto; padding: 0; }
  .home-gallery .gallery > :nth-child(1) { grid-column: span 2; }
  .home-gallery .gallery > :nth-child(6) { grid-column: span 2; grid-row: span 2; }
  .home-gallery .gallery > :nth-child(8) { grid-column: span 1; }
  .home-highlights .highlight-card:first-child, .home-highlights .highlight-card:last-child:nth-child(even) { grid-column: auto; }
  .home-highlights .highlight-grid { grid-auto-rows: 220px; }
  .journey-card { padding: 30px 20px; }
  .admission-wrap { padding: 44px 0 40px; }
  .admission-band { flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 22px; }
  .admission-icon { width: 58px; height: 58px; font-size: 1.5rem; }
  .admission-band .btn { width: 100%; }
  .footer-main { grid-template-columns: 1fr; gap: 30px; padding: 44px 0 30px; }
  table { display: block; max-width: 100%; overflow-x: auto; }
}

.site-nav > .container { flex-wrap: wrap; }
.brand { flex: 1 1 0; max-width: calc(100% - 64px); }
@media (min-width: 1200px) {
  .brand { flex: none; max-width: none; }
  .site-nav > .container { flex-wrap: nowrap; }
}

@media (max-width: 1199.98px) {
  .d-about, .d-social { display: none; }
}
@media (max-width: 767.98px) {
  .school-art { width: 52px; }
  .d-hub { display: none; }
  .d-stats, .d-highlight { top: 10px; right: 10px; }
  .d-gallery, .d-hub { top: 10px; left: 10px; }
  .d-banner-r, .d-banner-r2 { right: 10px; top: 12px; margin-top: 0; width: 46px; }
  .d-banner-l, .d-banner-l2 { left: 10px; top: 12px; margin-top: 0; width: 46px; }
}

@media (max-width: 420px) {
  .topbar-inner { gap: 8px; }
  .topbar-contact, .topbar-tools { gap: 8px; }
  .topbar-social { gap: 7px; }
  .topbar-social { display: none; }
  .font-tools button { padding: 2px 5px; }
  .social-section > .container > .row > .col { padding: 12px !important; }
  .social-section .row .row > .col { padding: 6px 11px !important; font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}