@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   GHULAM MUHAMMAD PUBLIC SCHOOL — DESIGN SYSTEM
   A modern, premium refresh. Brand identity: blue (primary) + green (accent).
   Single typeface — Poppins — used consistently across the whole site.
   All original class names, IDs and JS hooks are kept intact.
   --------------------------------------------------------------------------
   1.  Design tokens (:root)
   2.  Base & reset
   3.  Typography helpers & section headings
   4.  Utilities (reveal, hover, animations, accessibility)
   5.  Buttons
   6.  Navbar + mobile menu
   7.  Footer
   8.  Modals (donation + job poster) + tabs + wallets
   9.  Back-to-top
   10. Home page  (idx-* + shared home sections)
   11. About page (abt-* + vision / faculty / team)
   12. Academics  (acd-* + teaching / activities / why / cta / jugnu / grads)
   13. Admissions (adm-* + form)
   14. Contact    (cnt-*)
   15. Responsive
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* Brand — blue (primary) */
     --brand:      #281752;  /* Primary */
    --brand-600:  #35206C;  /* Slightly Lighter */
    --brand-700:  #211347;  /* Dark */
    --brand-800:  #1A1039;  /* Darker */
    --brand-950:  #0F0824;  /* Deepest */
    --brand-soft: #F1EEFA;  /* Soft Background */
    /* Accent — green */
    --gold:         #16A34A;
    --gold-600:     #12833C;
    --gold-700:     #0E6B31;
    --gold-soft:    #DCFCE7;

    /* Ink / text (blue-slate) */
    --ink:          #16202B;
    --ink-2:        #3C4A59;
    --ink-3:        #64748B;
    --on-brand:     #ffffff;
    --on-brand-dim: #D7E7F6;

    /* Surfaces */
    --bg:           #ffffff;
    --bg-soft:      #f3f8fc;
    --bg-muted:     #e7f1fa;
    --surface:      #ffffff;

    /* Lines */
    --border:       #dce8f2;
    --border-2:     #c1d4e6;

    /* Status */
    --ok:           #1a7a44;
    --ok-bg:        #e5f4ec;
    --danger:       #b3261e;
    --danger-bg:    #fbe9e8;

    /* Focus ring */
    --ring:         0 0 0 3px rgba(14, 77, 139, .18), 0 0 0 1.5px var(--brand);
    --ring-gold:    0 0 0 3px rgba(22, 163, 74, .35);

    /* Radii */
    --r-xs: 8px;
    --r-sm: 12px;
    --r:    16px;
    --r-lg: 22px;
    --r-xl: 30px;
    --r-pill: 999px;

    /* Shadows (soft, navy-tinted) */
    --shadow-xs: 0 1px 2px rgba(6, 31, 58, .06);
    --shadow-sm: 0 3px 10px rgba(6, 31, 58, .06);
    --shadow:    0 10px 28px rgba(6, 31, 58, .08);
    --shadow-md: 0 16px 40px rgba(6, 31, 58, .11);
    --shadow-lg: 0 28px 64px rgba(6, 31, 58, .16);
    --shadow-brand: 0 20px 44px rgba(14, 77, 139, .24);

    /* Layout */
    --container: 1200px;
    --gutter: clamp(20px, 5vw, 40px);
    --section-y: clamp(60px, 8vw, 108px);
    --nav-h: 88px;
    --nav-h-sm: 66px;

    /* Motion */
    --t:      .28s cubic-bezier(.4, 0, .2, 1);
    --t-slow: .55s cubic-bezier(.16, .84, .44, 1);

    /* Type scale (fluid) */
    --fs-hero: clamp(2.2rem, 1.35rem + 3.4vw, 3.75rem);
    --fs-h1:   clamp(2rem, 1.5rem + 2.2vw, 3rem);
    --fs-h2:   clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem);
    --fs-h3:   clamp(1.18rem, 1.05rem + .6vw, 1.45rem);
    --fs-lead: clamp(1.05rem, 1rem + .35vw, 1.2rem);
}

/* ==========================================================================
   2. BASE & RESET
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h-sm) + 20px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    font-size: 1rem;
    overflow-x: hidden;
    overflow-wrap: break-word;      /* long tokens (emails, IBANs) wrap instead of overflowing */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

a { color: inherit; }

ul { list-style: none; }

button { font-family: inherit; }

::selection {
    background: var(--brand);
    color: #fff;
}

/* Accessible focus ring for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--r-xs);
}

/* ==========================================================================
   3. TYPOGRAPHY HELPERS & SECTION HEADINGS
   ========================================================================== */

/* Generic centered section title with gold underline accent */
.section-title,
.acd-main-title,
.adm-main-title,
.cnt-main-title,
.holistic-heading {
    font-family: 'Poppins', sans-serif;
    text-align: center;
    color: var(--brand);
    font-size: var(--fs-h2);
    font-weight: 700;
    margin-bottom: 14px;
    position: relative;
}

.section-title::after,
.acd-main-title::after,
.adm-main-title::after,
.cnt-main-title::after,
.holistic-heading::after {
    content: "";
    display: block;
    width: 68px;
    height: 4px;
    margin: 16px auto 0;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--gold), var(--gold-600));
}

.acd-subtitle,
.adm-subtitle,
.cnt-subtitle,
.ours-subtitle,
.team-subtitle,
.holistic-text {
    text-align: center;
    color: var(--ink-3);
    font-size: var(--fs-lead);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 44px;
}

/* Eyebrow tags shared by several sections */
.faculty-tag,
.academic-tag,
.jugnu-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto 22px;
    padding: 9px 20px;
    background: var(--brand);
    color: #fff;
    border-radius: var(--r-pill);
    font-family: 'Poppins', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   4. UTILITIES (reveal / hover / animations)
   ========================================================================== */
.reveal-section {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity var(--t-slow), transform var(--t-slow);
    will-change: opacity, transform;
}
.reveal-section.active-reveal {
    opacity: 1;
    transform: translateY(0);
}

.hover-lift {
    transition: transform var(--t), box-shadow var(--t) !important;
}
.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg) !important;
}

.hover-scale-card {
    transition: transform var(--t-slow), box-shadow var(--t-slow) !important;
}
.hover-scale-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-brand) !important;
}

@keyframes fadeInEffect {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeInEffect 1s ease forwards; }

@keyframes beat {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}
.animate-beat { animation: beat 1.4s ease-in-out infinite; }

@keyframes tada {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12) rotate(-6deg); }
    100% { transform: scale(1); }
}
.animate-tada { animation: tada 1.8s ease-in-out infinite; display: inline-block; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal-section { opacity: 1; transform: none; }
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

/* Primary green CTA */
.donate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--gold-600), var(--gold-700));
    color: #fff;
    padding: 12px 26px;
    min-height: 46px;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(22, 163, 74, .32);
    transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.donate-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(22, 163, 74, .42);
}
.donate-btn:active { transform: translateY(-1px); }

/* Solid plum CTA */
.hero-btn,
.cta-btn,
.jugnu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
   background: linear-gradient(135deg, var(--gold-600), var(--gold-700));
    color: #fff;
    text-decoration: none;
    padding: 13px 30px;
    min-height: 48px;
    border-radius: var(--r-pill);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: .97rem;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.hero-btn:hover,
.cta-btn:hover,
.jugnu-btn:hover {
    background: var(--gold-700);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    color: #fff;
}
.hero-btn i { transition: transform var(--t); }
.hero-btn:hover i { transform: translateX(4px); }

/* CTA on blue background flips to green */
.academic-cta .cta-btn {
    background: linear-gradient(135deg, var(--gold-600), var(--gold-700));
    color: #fff;
}
.academic-cta .cta-btn:hover {
    background: #fff;
    color: var(--brand);
}

/* Filled green button (View jobs) */
.interactive-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--gold-600), var(--gold-700));
    color: #fff;
    border: none;
    border-radius: var(--r-pill);
    padding: 12px 28px;
    min-height: 48px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(22, 163, 74, .30);
    transition: transform var(--t), background var(--t), color var(--t), box-shadow var(--t);
}
.interactive-btn:hover {
    background: var(--gold-700);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(22, 163, 74, .42);
}

/* ==========================================================================
   6. NAVBAR + MOBILE MENU
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 12px clamp(16px, 3.4vw, 54px);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(6, 31, 58, .05);
    transition: padding var(--t), background var(--t), box-shadow var(--t);
}
.navbar.navbar-scrolled {
    padding-top: 7px;
    padding-bottom: 7px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 6px 24px rgba(6, 31, 58, .1);
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.school-logo-img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t), width var(--t), height var(--t);
}
.navbar.navbar-scrolled .school-logo-img {
    width: 52px;
    height: 52px;
}
.logo-area:hover .school-logo-img { transform: scale(1.05) rotate(-2deg); }

/* --- Dual branding: school badge + parent foundation mark ---------------
   The Taawan mark follows the school name in the visual order, separated by
   a hairline rule. `order` keeps the markup edit to a single line per page
   while placing the partner mark last: badge → name │ Taawan.            */
.school-logo-img  { order: 1; }
.school-name      { order: 2; }
.logo-divider     { order: 3; }
.partner-logo-img { order: 4; }

.logo-divider {
    flex-shrink: 0;
    width: 1px;
    height: 34px;
    background: var(--border-2);
    transition: height var(--t);
}
.navbar.navbar-scrolled .logo-divider { height: 30px; }

/* Deliberately smaller than the 62px school badge: this is the parent
   foundation's mark, so it sits second in the hierarchy. At matched size the
   emblem's saturated ring overpowered the school crest beside it.
   The white rounded chip mirrors the school badge's framing, so the emblem's
   node-circle silhouette sits inside a tidy shape instead of reading as a
   lumpy blob floating in the bar. */
.partner-logo-img {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 6px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    transition: transform var(--t), width var(--t), height var(--t);
}
.navbar.navbar-scrolled .partner-logo-img {
    width: 43px;
    height: 43px;
    padding: 5px;
}
.logo-area:hover .partner-logo-img { transform: scale(1.06); }

.school-name h2 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(.9rem, .72rem + .5vw, 1.14rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: .01em;
    color: var(--brand);
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
}
.nav-links a {
    display: block;
    padding: 9px 13px;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ink-2);
    border-radius: var(--r-pill);
    position: relative;
    transition: color var(--t), background var(--t);
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    border-radius: var(--r-pill);
    background: var(--gold);
    transition: width var(--t);
}
.nav-links a:hover { color: var(--brand); }
.nav-links a:hover::after { width: 26px; }

.nav-links a.active {
    color: var(--brand);
    background: var(--bg-muted);
}
.nav-links a.active::after { width: 26px; }

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 26px;
    color: var(--brand);
    cursor: pointer;
    background: var(--bg-muted);
    transition: background var(--t);
    z-index: 100000;
}
.menu-toggle:hover { background: var(--border); }

/* ==========================================================================
   7. FOOTER
   ========================================================================== */
footer {
    background: var(--brand-950);
    color: #c2d4e4;
    padding: clamp(48px, 7vw, 76px) clamp(20px, 6vw, 72px) 26px;
    position: relative;
}
footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--brand-600), var(--gold));
}
/* Wrapping flex row rather than auto-fit/max-content grid tracks: max-content
   tracks cannot shrink, so once a fourth (brand) column joined they overflowed
   the page between roughly 770px and 950px. Flex wrapping folds a column onto
   the next line instead, at every width. */
.footer-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 40px clamp(30px, 4.5vw, 60px);
    max-width: var(--container);
    margin: 0 auto;
}
.footer-container > * { min-width: 0; }

/* --- Footer brand block: school badge + Taawan Foundation mark ---------- */
.footer-brand { max-width: 320px; }

.footer-logos {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}
.footer-logo-img {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
/* Round emblem: shown whole, on a white chip so it stays legible on navy. */
.footer-logo-taawan {
    object-fit: contain;
    border-radius: 50%;
    padding: 5px;
}
.footer-logo-divider {
    flex-shrink: 0;
    width: 1px;
    height: 46px;
    background: rgba(255, 255, 255, .22);
}
.footer-brand-text {
    font-size: .92rem;
    line-height: 1.75;
    color: #b4c6d8;
}
.footer-brand-text strong {
    display: block;
    color: #fff;
    font-weight: 600;
}
/* Second <strong> — "Taawan Foundation" — stays inline and takes the accent. */
.footer-brand-text strong:not(:first-child) {
    display: inline;
    color: var(--gold);
}
footer h3 {
    margin-bottom: 20px;
    color: var(--gold);
    font-family: 'Poppins', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
footer ul li {
    margin-bottom: 11px;
    color: #b4c6d8;
    font-size: .95rem;
    transition: color var(--t), transform var(--t);
}
footer ul li:hover { color: #fff; transform: translateX(4px); }
footer ul li a {
    color: inherit;
    text-decoration: none;
}

.footer-socials p { margin-bottom: 6px; font-size: .95rem; }
.footer-contact-info { margin-top: 16px;
 display: flex;
    align-items: center;
    gap: 8px;
    /* was white-space: nowrap — the email address is ~250px wide and could
       not shrink, so it pushed the footer past the viewport on narrow
       screens. Breaking is only a last resort at very small widths. */
    overflow-wrap: anywhere; }

.social-icons {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
    font-size: 1.15rem;
}
.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--gold);
    background: rgba(255, 255, 255, .08);
    transition: transform var(--t), background var(--t), color var(--t);
}
.social-icons a:hover {
    color: #fff;
    background: var(--gold);
    transform: translateY(-5px);
}

.footer-bottom {
    max-width: var(--container);
    margin: 44px auto 0;
    padding-top: 24px;
    text-align: center;
    font-size: .85rem;
    color: #90a4b8;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

/* ==========================================================================
   8. MODALS (DONATION + JOB) + TABS + WALLETS
   ========================================================================== */
.donate-modal {
    display: none;              /* JS sets inline display:flex */
    position: fixed;
    inset: 0;
    z-index: 200000;
    width: 100%;
    height: 100%;
    background: rgba(6, 31, 58, .62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.donate-modal-content {
    background: var(--surface);
    padding: clamp(24px, 4vw, 36px);
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    position: relative;
    border-top: 6px solid var(--brand);
    animation: modalPop .4s cubic-bezier(.175, .885, .32, 1.275) forwards;
}
@keyframes modalPop {
    from { transform: translateY(24px) scale(.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.donate-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--ink-3);
    cursor: pointer;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--t), color var(--t);
}
.donate-modal-close:hover { background: var(--bg-muted); color: var(--brand); }

.donate-modal-header { text-align: center; margin-bottom: 24px; }
.donate-modal-header h2 {
    color: var(--brand);
    font-size: 1.5rem;
    margin-bottom: 8px;
}
.donate-modal-header p { color: var(--ink-3); font-size: .95rem; }

.heart-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff0f2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.heart-icon-wrapper i { color: #e0472a; font-size: 2rem; }

.donate-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
    padding-bottom: 4px;
}
.tab-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    min-height: 48px;
    background: var(--bg-muted);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: .9rem;
    color: var(--ink-2);
    cursor: pointer;
    transition: background var(--t), color var(--t), box-shadow var(--t);
}
.tab-btn:hover { background: var(--border); }
.tab-btn.active {
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.tab-content { display: none; }        /* JS toggles .active */
.tab-content.active { display: block; animation: fadeInEffect .35s ease forwards; }

.premium-card,
.donate-method-card {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 22px;
}
.card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.card-row:last-child { border-bottom: none; }
.card-row strong { color: var(--ink); font-family: 'Poppins', sans-serif; font-size: .92rem; }
.card-row span { color: var(--ink-2); font-size: .95rem; }

.copy-field {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--brand);
}
.copy-field button,
.wallet-num-box button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gold-600);
    border: none;
    padding: 7px 12px;
    border-radius: var(--r-xs);
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    transition: background var(--t), transform var(--t);
}
.copy-field button:hover,
.wallet-num-box button:hover { background: var(--gold-700); transform: translateY(-1px); }

.wallet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.wallet-card {
    padding: 22px;
    border-radius: var(--r-sm);
    color: #fff;
    position: relative;
    box-shadow: var(--shadow-sm);
}
.wallet-card.easypaisa { background: linear-gradient(135deg, #00a859, #00723e); }
.wallet-card.jazzcash  { background: linear-gradient(135deg, #ee2a2a, #b30000); }
.wallet-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: .72rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .22);
    padding: 3px 10px;
    border-radius: var(--r-pill);
}
.wallet-title { margin: 12px 0 4px; font-size: .9rem; opacity: .92; }
.wallet-num-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-size: 1.08rem;
    font-weight: 700;
    flex-wrap: wrap;
}
.wallet-num-box button { background: #fff; color: var(--ink); }

/* Job poster modal */
.job-photo-modal {
    display: none;              /* JS sets inline display:flex */
    position: fixed;
    inset: 0;
    z-index: 300000;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 30px;
}
.job-photo-content {
    position: relative;
    max-width: 92%;
    max-height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalPop .35s ease-out forwards;
}
.actual-poster-img {
    max-width: 100%;
    max-height: 82vh;
    border-radius: var(--r-sm);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
    border: 3px solid var(--gold);
}
.job-photo-close {
    position: absolute;
    top: -46px;
    right: 0;
    font-size: 2.4rem;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    transition: color var(--t), transform var(--t);
}
.job-photo-close:hover { color: var(--gold); transform: rotate(90deg); }

/* ==========================================================================
   9. BACK-TO-TOP
   ========================================================================== */
#backToTopBtn {
    display: none;              /* JS sets inline display:block */
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 99000;
    width: 52px;
    height: 52px;
    padding: 0;
    text-align: center;
    line-height: 52px;
    font-size: 18px;
    border: none;
    border-radius: 50%;
    background: var(--brand);
    color: var(--gold-soft);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background var(--t), transform var(--t), color var(--t);
}
#backToTopBtn:hover {
    background: var(--gold);
    color: #fff;
    transform: translateY(-4px);
}

/* ==========================================================================
   10. HOME PAGE
   ========================================================================== */

/* --- Hero --- */
.idx-hero-banner {
    position: relative;
    min-height: clamp(560px, 90vh, 820px);
    background: url("IMG-20260624-WA0001.jpg") center center / cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(var(--nav-h) + 40px) var(--gutter) 56px;
    isolation: isolate;
}
.idx-hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 31, 58, .35) 0%, rgba(6, 31, 58, .15) 40%, rgba(14, 77, 139, .55) 100%);
}
.hero-box {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
    width: 480px;
    max-width: 100%;
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--r-lg);
    text-align: center;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, .6);
    animation: fadeInEffect 1s ease forwards;
}
.hero-box h4 {
    color: var(--gold-700);
    font-family: 'Poppins', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.hero-box h1 {
    color: var(--brand);
    font-size: clamp(1.7rem, 1.3rem + 1.9vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
}
.hero-box p {
    color: var(--ink-2);
    font-size: 1.02rem;
    line-height: 1.65;
    margin-bottom: 26px;
}

/* --- Notice ticker --- */
.idx-notice-section {
    background: linear-gradient(135deg, var(--brand), var(--brand-700));
    padding: 14px 0;
    box-shadow: var(--shadow-sm);
    border-bottom: 3px solid var(--gold);
}
.idx-notice-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.idx-notice-header h3 {
    color: #fff;
    font-size: 1.02rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 9px;
}
.idx-notice-header h3 i { color: var(--gold-soft); }
.idx-notice-content {
    flex-grow: 1;
    min-width: 0;                 /* allow the ticker to shrink instead of overflowing */
    overflow: hidden;
    position: relative;
    height: 32px;
}
.idx-notice-ticker p {
    margin: 0;
    font-size: .96rem;
    color: #fff;
    line-height: 32px;
    display: none;
    animation: fadeInSlide .5s ease-in-out forwards;
}
.idx-notice-ticker p.active-notice { display: block; }
@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.idx-notice-controls { display: flex; gap: 8px; flex-shrink: 0; }
.idx-notice-controls button {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    transition: background var(--t), transform var(--t);
}
.idx-notice-controls button:hover { background: var(--gold-600); transform: scale(1.12); }

/* --- History / stats (idx-content-wrapper) --- */
.idx-content-wrapper {
    max-width: var(--container);
    margin: var(--section-y) auto;
    padding: 0 var(--gutter);
    width: 100%;
}
.idx-content-wrapper h2 {
    margin-bottom: 18px;
    color: var(--brand);
    font-size: var(--fs-h2);
}
.idx-grid-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 56px);
    align-items: center;
}
.idx-logo-large { text-align: center; }
.idx-badge-large-img {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    padding: 8px;
    background: #fff;
    border: 4px solid var(--brand);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

/* ---- "Our History": brand column + readable text column ------------------
   Was a 1fr / 1fr split, which gave the badge far more room than it needed
   and squeezed five paragraphs into a narrow, dense column. The brand side is
   now a fixed-ish rail and the prose gets the space.                        */
.idx-history-grid {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 68px);
    align-items: start;
}

.idx-history-brands {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    position: sticky;              /* tracks the long text instead of leaving a gap */
    top: calc(var(--nav-h) + 24px);
}

.idx-brand-card {
    width: 100%;
    margin: 0;
    padding: 22px 20px 20px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t);
}
.idx-brand-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.idx-brand-card .idx-badge-large-img,
.idx-brand-card .idx-partner-large-img {
    width: 100%;
    max-width: 190px;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    display: block;
}
/* The emblem is a round vector — show it whole on a plain field rather than
   cropped inside the school badge's framed-photo treatment. Sized a little
   wider than the square badge so the inscribed circle reads as the same
   visual weight rather than looking undersized. */
.idx-brand-card .idx-partner-large-img {
    max-width: 208px;
    object-fit: contain;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.idx-brand-card figcaption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
}
.idx-brand-name {
    color: var(--brand);
    font-weight: 700;
    font-size: .96rem;
    line-height: 1.35;
}
.idx-brand-since {
    color: var(--ink-3);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .04em;
}

/* "a project of" connector between the two cards */
.idx-brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    color: var(--ink-3);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.idx-brand-link::before,
.idx-brand-link::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-2);
}

/* ---- Text column --------------------------------------------------------- */
.idx-history-tag {
    display: inline-block;
    margin-bottom: 14px;
    padding: 8px 20px;
    background: var(--gold-soft);
    color: var(--gold-700);
    border-radius: var(--r-pill);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.idx-about-brief h2 { margin-bottom: 22px; }

/* Opening paragraph carries the key facts — set slightly larger with a brand
   rule so the reader has an obvious entry point. */
.idx-about-brief .idx-lead {
    padding-left: clamp(16px, 2vw, 22px);
    border-left: 4px solid var(--gold);
    color: var(--ink);
    font-size: 1.02rem;
    line-height: 1.85;
    margin-bottom: 24px;
}
.idx-about-brief .idx-about-link-btn { margin-top: 12px; }
.idx-est-text {
    margin-top: 18px;
    color: var(--brand);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: .08em;
    font-size: .92rem;
}
.idx-about-brief p {
    color:  var(--ink);
    margin-bottom: 18px;
    font-size: 1.02rem;
    line-height: 1.9;
    max-width: 68ch;          /* comfortable measure — long lines are tiring */
}
/* Emphasis reads as a highlight, not a shout: the old heavy black bold ran
   through most of the copy and flattened the hierarchy. */
.idx-about-brief strong {
    color: var(--brand);
    font-weight: 600;
}
.idx-about-link-btn { text-decoration: none; display: inline-flex; }
.idx-stats-badge {
    display: inline-block;
    margin: 12px 0 18px;
    padding: 8px 22px;
    background: var(--brand);
    color: var(--gold-soft);
    font-family: 'Poppins', sans-serif;
    font-size: .92rem;
    font-weight: 600;
    border-radius: var(--r-pill);
}
.idx-counter-box {
    display: flex;
    gap: 18px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.idx-counter-box > div {
    flex: 1;
    min-width: 150px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 20px 18px;
    text-align: center;
    color: var(--ink-2);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}
.idx-counter-box strong {
    color: var(--brand);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
    display: inline-block;
    line-height: 1;
}

/* --- Shared display images inside messages/commitment --- */
.idx-img-container { text-align: center; }
.idx-section-display-img {
    width: 100%;
    max-width: 460px;
    border: 5px solid var(--gold);
    border-radius: var(--r);
    box-shadow: var(--shadow-md);
}
.idx-chairperson-img-padding,
.idx-director-img-padding { padding-left: 0; }

/* --- Chairperson message --- */
.idx-message-chairperson {
    padding: var(--section-y) var(--gutter);
    background: var(--brand);
}
.chairperson-box {
    max-width: var(--container);
    margin: 0 auto;
    background: linear-gradient(160deg, #e9f3fb, #dbeaf7);
    padding: clamp(28px, 4vw, 52px);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.chairperson-box::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: #5fa8e0;
    opacity: .28;
    border-radius: 50%;
    filter: blur(35px);
}
.chairperson-box h2,
.idx-blue-text { color: var(--brand); font-size: var(--fs-h2); }
.chairperson-box .idx-message-text,
.idx-black-text { color: var(--ink) !important; }

/* --- Director message --- */
.idx-message-director {
    padding: var(--section-y) var(--gutter);
    background: var(--bg-soft);
}
.idx-message-director h2,
.idx-director-name { color: var(--brand); font-size: var(--fs-h2); }

.idx-message-text {
    margin: 20px 0;
    padding: 6px 0 6px 22px;
    color: var(--ink-2);
    font-size: var(--fs-lead);
    font-style: italic;
    line-height: 1.8;
    border-left: 4px solid var(--brand);
}
.idx-message-chairperson .idx-message-text { border-left-color: var(--brand); }
.idx-white-text { color: #fff !important; }

/* Center the two-col grids inside message/commitment sections */
.idx-message-chairperson .idx-grid-two-col,
.idx-message-director .idx-grid-two-col,
.idx-commitment-purple .idx-grid-two-col { max-width: var(--container); margin: 0 auto; }

/* --- Video --- */
.school-video-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.school-video-section video {
    width: 100%;
    display: block;
}
.video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, rgba(6, 31, 58, .1), rgba(6, 31, 58, .45));
    pointer-events: none;
}
.video-overlay h1 {
    color: #fff;
    font-size: clamp(1.8rem, 1rem + 4vw, 3.5rem);
    font-weight: 800;
    text-align: center;
    padding: 0 20px;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .7);
}

/* --- Commitment (purple) --- */
.idx-commitment-purple {
    padding: var(--section-y) var(--gutter);
    background: linear-gradient(160deg, var(--brand), var(--brand-800));
    color: #fff;
}
.commitment-content p {
    color: var(--on-brand-dim);
    line-height: 1.85;
    font-size: 1.04rem;
    margin-bottom: 14px;
}
.idx-commitment-purple h2 { font-size: var(--fs-h2); }
.commitment-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0;
}
.commitment-points span {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 1px solid rgba(22, 163, 74, .4);
    padding: 10px 18px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: .92rem;
    transition: background var(--t), transform var(--t);
}
.commitment-points span:hover {
    background: var(--gold);
    color: #fff;
    transform: translateY(-3px);
}

/* --- Holistic (white) --- */
.idx-commitment-white {
    padding: var(--section-y) var(--gutter);
    background: var(--bg);
}
.holistic-heading { color: var(--brand); }
.holistic-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    max-width: var(--container);
    margin: 30px auto 0;
}
.gallery-card {
    width: auto;
    min-width: 0;
    background: var(--surface);
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    text-align: center;
    overflow: hidden;
    transition: transform var(--t), box-shadow var(--t);
}
.gallery-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.gallery-card img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: var(--r);
    display: block;
}
.gallery-card h3 {
    padding: 16px 8px 8px;
    color: var(--brand);
    font-size: 1.12rem;
}

/* --- Work with us --- */
.idx-work-us {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(32px, 5vw, 56px);
    padding: clamp(40px, 6vw, 70px) clamp(28px, 5vw, 60px);
    background: linear-gradient(160deg, #eef5fc, #e1eef9);
    color: var(--brand);
    max-width: var(--container);
    margin: var(--section-y) auto;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
}
.work-us-text { flex: 1; }
.work-us-text h1 { font-size: var(--fs-h2); color: var(--brand); margin-bottom: 16px; }
.work-us-text p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.8; margin-bottom: 22px; }
.work-us-image { flex: 1; display: flex; justify-content: center; }
.work-us-image img { width: 100%; max-width: 440px; border: 5px solid #2E8B57; border-radius: 20px; }

/* --- Syllabus --- */
.idx-syllabus-s {
    background: linear-gradient(160deg, var(--brand-800), var(--brand-950));
    padding: clamp(48px, 7vw, 80px) var(--gutter);
    margin-bottom: 0;
    height: auto;
}
.syllabus-wrapper {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: clamp(32px, 5vw, 56px);
    flex-wrap: wrap;
}
.syllabus-img-box {
    flex: 1;
    min-width: 280px;
    overflow: hidden;
    border-radius: var(--r);
    background: #fff;
    box-shadow: var(--shadow-md);
}
.syllabus-img-box img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
.syllabus-text-box { flex: 1; min-width: 280px; color: #fff; }
.syllabus-text-box h1 { font-size: var(--fs-h2); margin-bottom: 16px; color: #fff; }
.syllabus-text-box p { font-size: 1.02rem; line-height: 1.85; margin-bottom: 24px; color: var(--on-brand-dim); }

/* --- Educational programs (STEM) --- */
.idx-StemEducation-maindiv {
    height: auto;
    padding: var(--section-y) var(--gutter);
    text-align: center;
}
.idx-StemEducation-maindiv h1 { color: var(--brand); font-size: var(--fs-h2); margin-bottom: 8px; }
.idx-stem-subtitle {
    display: block;
    margin-bottom: 40px;
    color: var(--ink-3);
    font-weight: 500;
    font-size: var(--fs-lead);
}
.idx-SEI {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    width: 100%;
    max-width: 860px;
    height: auto;
    margin: 0 auto;
    padding: 0;
    background: transparent;
}
.idx-SEI-img1,
.idx-SEI-img2 {
    width: auto;
    margin: 0;
    padding: 26px;
    background: linear-gradient(160deg, var(--brand), var(--brand-800));
    border-radius: var(--r-lg);
    color: #fff;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform var(--t), box-shadow var(--t);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.idx-SEI-img1:hover,
.idx-SEI-img2:hover { transform: translateY(-8px); box-shadow: var(--shadow-brand); }
.idx-SEI-img1 img,
.idx-SEI-img2 img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--r);
    margin-bottom: 16px;
}
.idx-SEI h3 { color: #fff; margin-bottom: 12px; font-size: 1.2rem; }
.idx-SEI p { color: var(--on-brand-dim); font-size: .96rem; line-height: 1.7; margin-bottom: 20px; flex-grow: 1; }

/* ==========================================================================
   11. ABOUT PAGE
   ========================================================================== */

/* Shared page header hero (about / academics / admissions) */
.abt-page-header,
.acd-page-header,
.adm-page-header {
    position: relative;
    min-height: clamp(450px, 75vh, 700px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--nav-h) + 40px) var(--gutter) 60px;
    background-size: cover;
    background-position: center;
    border-bottom: 4px solid var(--gold);
    isolation: isolate;
}
.abt-page-header { background-image: url("WhatsApp\ Image\ 2026-07-15\ at\ 22.12.21.jpeg"); }
.acd-page-header { background-image: url("WhatsApp\ Image\ 2026-07-19\ at\ 16.59.56.jpeg"); }
.adm-page-header { background-image: url("WhatsApp\ Image\ 2026-07-19\ at\ 16.59.57\ \(1\).jpeg"); }

/* Two stacked washes: a brand-tinted diagonal plus a vertical darkening so
   the headline and tagline always land on a deep, even base — the photos
   behind these heroes are bright and busy. */
.abt-page-header::before,
.acd-page-header::before,
.adm-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(15, 8, 36, .38) 0%, rgba(15, 8, 36, .58) 60%, rgba(15, 8, 36, .72) 100%),
        linear-gradient(135deg, rgba(40, 23, 82, .62), rgba(6, 31, 58, .58));
}
.abt-page-header h1,
.acd-page-header h1,
.adm-page-header h1 {
    color: #fff;
    font-size: var(--fs-hero);
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .55);
}

/* Tagline sits on its own green pill. Previously it was plain green text on
   a photograph, which fell well below a readable contrast ratio. White on
   the darker end of the brand green clears WCAG AA (~4.8:1 to 6.7:1). */
.abt-page-header p,
.acd-page-header p,
.adm-page-header p {
    display: inline-block;
    max-width: min(680px, 100%);
    padding: 12px clamp(20px, 3vw, 30px);
    background: linear-gradient(135deg, var(--gold-600), var(--gold-700));
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.02rem, .95rem + .45vw, 1.28rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .015em;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--r-pill);
    box-shadow: 0 12px 30px rgba(6, 31, 58, .38);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

/* Vision / Mission */
.abt-vision {
    padding: var(--section-y) var(--gutter);
    background: var(--bg-soft);
}
.vision-container {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 30px;
}
.vision-card {
    background: var(--surface);
    padding: clamp(28px, 4vw, 42px);
    border-radius: var(--r-lg);
    text-align: center;
    box-shadow: var(--shadow);
    border-top: 5px solid var(--brand);
    transition: transform var(--t), box-shadow var(--t);
}
.vision-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.vision-card i {
    font-size: 2.6rem;
    color: var(--brand);
    background: var(--bg-muted);
    width: 82px;
    height: 82px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 22px;
}
.vision-card h2 { color: var(--brand); margin-bottom: 14px; font-size: var(--fs-h3); }
.vision-card p { color: var(--ink-2); line-height: 1.8; }

/* Content wrapper */
.abt-content-wrapper {
    max-width: var(--container);
    margin: var(--section-y) auto;
    padding: 0 var(--gutter);
}

/* Founder */
.abt-founder-section {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(36px, 6vw, 80px);
    margin-bottom: 60px;
    text-align: left;
}
.abt-founder-info { width: auto; margin-top: 0; }
.abt-founder-info h2 { color: var(--brand); font-size: var(--fs-h2); margin-bottom: 20px; }
.abt-founder-info p { color: var(--ink-2); font-size: 1.05rem; line-height: 1.85; font-weight: 400; }
.abt-founder-section > div:last-child { display: flex; justify-content: center; }
.abt-founder-img {
    margin-top: 0;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    height: auto;
    max-height: 30rem;
    width: 100%;
    max-width: 400px;
    object-fit: cover;
}
.abt-divider {
    border: none;
    height: 1px;
    background: var(--border-2);
    margin: 20px 0 50px;
}

/* Leadership heading block */
.Ours- h1 {
    text-align: center;
    font-size: var(--fs-h1);
    color: var(--brand);
    margin-bottom: 6px;
}

/* Leadership cards */
.abt-grid-three-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    align-items: stretch;
}
.abt-card,
.abt-director-card-height {
    height: auto;
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, var(--brand), var(--brand-800));
    color: #fff;
    text-align: center;
    padding: 24px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    transition: transform var(--t), box-shadow var(--t);
}
.abt-card img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    border: none;
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
}
.abt-card h3 {
    color: #fff;
    margin: 18px 0 12px;
    font-size: 1.18rem;
}
.abt-card p { color: var(--on-brand-dim); font-size: .95rem; line-height: 1.75; text-align: left; }
.abt-director-learn-btn {
    align-self: center;
    margin-top: 18px;
    padding: 0;
    background: transparent;
    border: none;
    width: auto;
    cursor: pointer;
    transition: transform var(--t);
}
.abt-director-learn-btn:hover { transform: translateY(-2px); }
.abt-director-learn-btn a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    background: var(--gold);
    color: #fff;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border-radius: var(--r-pill);
    border: none;
}
.abt-director-learn-btn a:hover { background: var(--gold-600); }

/* Faculty
   Lives outside .abt-content-wrapper (see about.html) so this band runs the
   full width of the page instead of being boxed in at 1200px. */
.faculty-section{
    width:100%;
    padding: var(--section-y) var(--gutter);
    background:linear-gradient(180deg,#f7fbff 0%,#eef7f1 100%);
    border-block: 1px solid var(--border);
}

.faculty-container{
    max-width: 1340px;   /* roomier than the 1200px body column */
    width: 100%;
    margin:0 auto;
    display:grid;
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    gap: clamp(36px, 4.5vw, 64px);
    align-items:center;
}
.faculty-image { display: flex; justify-content: center; }
.faculty-image img {
    width: 100%;
    max-width: 650px;
    height: clamp(380px, 42vw, 520px);
    object-fit: cover;

    border: 5px solid var(--brand);

    border-radius: var(--r-lg);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.faculty-tag { margin: 0 0 20px; }
.faculty-content h2 { font-size: var(--fs-h2); color: var(--brand); margin-bottom: 20px; }
.faculty-content p { font-size: 1.02rem; color: var(--ink-2); line-height: 1.85; margin-bottom: 16px; }
.faculty-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 24px;
}
.faculty-points span {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    padding: 15px 18px;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-xs);
    font-weight: 600;
    font-size: .95rem;
    transition: transform var(--t), box-shadow var(--t);
}
.faculty-points span:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* Our team */
.our-team {
    padding: var(--section-y) var(--gutter);
    text-align: center;
    background: var(--bg);
}
.our-team h1 { color: var(--brand); font-size: var(--fs-h1); margin-bottom: 8px; }
.team-grid {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 28px;
}
.team-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    padding-bottom: 22px;
    transition: transform var(--t), box-shadow var(--t);
}
.team-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.team-card img {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: 24px auto 4px;
    border: 4px solid var(--gold);
    background: var(--bg-muted);
}
.team-card h3 { color: var(--brand); margin-top: 12px; font-size: 1.1rem; }
.team-card p { color: var(--ink-3); font-weight: 600; font-size: .92rem; margin-top: 2px; }
.team-qualification { color: var(--ink-3); font-weight: 400 !important; font-size: .85rem !important; margin-top: 8px; padding: 0 12px; }
.team-qualification strong { color: var(--ink-2); }

/* ==========================================================================
   12. ACADEMICS PAGE
   ========================================================================== */
.acd-container {
    max-width: var(--container);
    margin: var(--section-y) auto;
    padding: 0 var(--gutter);
    scroll-margin-top: calc(var(--nav-h) + 20px);
}
.acd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 30px;
}
.acd-card {
    background: var(--surface);
    padding: clamp(26px, 3vw, 34px);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--brand);
    transition: transform var(--t), box-shadow var(--t);
}
.acd-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.acd-card h3 {
    color: var(--brand);
    font-size: 1.3rem;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.acd-card h3 i { color: var(--gold-700); }
.acd-card p { color: var(--ink-2); margin-bottom: 20px; font-size: .97rem; }
.acd-list li {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    font-size: .96rem;
    flex-wrap: wrap;
}
.acd-list li:last-child { border-bottom: none; }
.acd-download-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--brand);
    color: #fff;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: var(--r-pill);
    font-size: .82rem;
    font-weight: 600;
    transition: background var(--t), transform var(--t);
    white-space: nowrap;
}
.acd-download-link:hover { background: var(--brand-600); transform: translateY(-2px); }

/* Teaching methodology */
.teaching-section { padding: var(--section-y) var(--gutter); background: var(--bg); }
.teaching-grid,
.activities-grid,
.why-grid {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 28px;
}
.teaching-card {
    background: var(--surface);
    padding: 36px 26px;
    border-radius: var(--r-lg);
    text-align: center;
    box-shadow: var(--shadow);
    border-top: 5px solid var(--gold);
    transition: transform var(--t), box-shadow var(--t);
}
.teaching-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.teaching-card i {
    font-size: 2.4rem;
    color: var(--brand);
    background: var(--bg-muted);
    width: 76px;
    height: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 20px;
}
.teaching-card h3 { color: var(--brand); margin-bottom: 12px; font-size: 1.15rem; }
.teaching-card p { color: var(--ink-2); line-height: 1.75; font-size: .96rem; }

/* Activities */
.activities-section { padding: var(--section-y) var(--gutter); background: var(--bg-soft); }
.activity-card {
    background: linear-gradient(170deg, var(--brand), var(--brand-800));
    color: #fff;
    padding: 36px 28px;
    border-radius: var(--r-lg);
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform var(--t), box-shadow var(--t);
}
.activity-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-brand); }
.activity-card i { font-size: 2.4rem; color: var(--gold-soft); margin-bottom: 18px; }
.activity-card h3 { margin-bottom: 12px; color: #fff; font-size: 1.15rem; }
.activity-card p { color: var(--on-brand-dim); line-height: 1.7; font-size: .95rem; }

/* Why choose us */
.why-section { padding: var(--section-y) var(--gutter); background: var(--bg); }
.why-card {
    background: var(--surface);
    padding: 34px 28px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    text-align: center;
    border-bottom: 4px solid transparent;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.why-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-bottom-color: var(--gold); }
.why-card h3 { color: var(--brand); margin-bottom: 12px; font-size: 1.15rem; }
.why-card p { color: var(--ink-2); line-height: 1.8; }

/* CTA */
.academic-cta {
    background: linear-gradient(135deg, var(--brand), var(--brand-600));
    padding: clamp(56px, 8vw, 96px) var(--gutter);
    text-align: center;
    color: #fff;
}
.academic-cta h2 { font-size: var(--fs-h1); margin-bottom: 18px; color: #fff; }
.academic-cta p {
    max-width: 700px;
    margin: 0 auto 32px;
    line-height: 1.8;
    font-size: var(--fs-lead);
    color: var(--on-brand-dim);
}

/* Academic life */
.academic-life { padding: var(--section-y) var(--gutter); background: var(--bg); }
.academic-life-container {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    /* fr, not %, so the two columns share what is left AFTER the gap —
       45% + 55% + gap adds up to more than the container and pushed the
       page into horizontal scroll on wide screens. */
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    align-items: center;
    gap: clamp(36px, 5vw, 60px);
}
.academic-life-image img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    object-position: top;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}
.academic-life-content h2 { font-size: var(--fs-h2); color: var(--brand); margin-bottom: 18px; }
.academic-life-content p { font-size: 1.02rem; color: var(--ink-2); line-height: 1.85; margin-bottom: 30px; }
.academic-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.point {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    padding: 16px;
    border-radius: var(--r-sm);
    transition: background var(--t), transform var(--t), color var(--t);
}
.point:hover { background: var(--brand); color: #fff; transform: translateY(-4px); }
.point:hover span { color: #fff; }
.point i {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: var(--gold);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
}
.point span { font-weight: 600; color: var(--ink); }

/* Jugnu partnership */
.jugnu-section { padding: var(--section-y) var(--gutter); background: var(--bg-soft); }
.jugnu-container {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    /* see .academic-life-container — fr keeps the gap inside the container */
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: center;
    gap: clamp(36px, 5vw, 60px);
}
.jugnu-tag {
    display: inline-flex;
    margin: 0 0 16px;
    background: linear-gradient(135deg, var(--brand), var(--brand-600));
    color: #fff;
    padding: 12px 30px;
    border-radius: var(--r-pill);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: var(--shadow-brand);
}
.jugnu-content h2 { font-size: var(--fs-h2); color: var(--brand); margin: 0 0 18px; }
.jugnu-content p { font-size: 1.02rem; line-height: 1.85; color: var(--ink-2); margin-bottom: 14px; }
.jugnu-content strong { color: var(--ink); }
/* The four partnership benefits: feature cards inside a highlighted panel,
   so they read as a distinct block rather than a run of inline text. */
.jugnu-points-box {
    margin: 30px 0 34px;
    padding: clamp(20px, 3vw, 30px);
    background: linear-gradient(150deg, var(--surface) 0%, var(--gold-soft) 100%);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.jugnu-points-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--brand);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.jugnu-points-title::after {
    content: "";
    flex: 1;
    height: 2px;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--gold), rgba(22, 163, 74, 0));
}

.jugnu-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.jugnu-points span {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    padding: 16px 18px;
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: .97rem;
    box-shadow: var(--shadow-xs);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.jugnu-points span:hover {
    transform: translateY(-4px);
    border-left-color: var(--brand);
    box-shadow: var(--shadow);
}
.jugnu-points i {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-700));
    color: #fff;
    font-size: .95rem;
    box-shadow: 0 6px 14px rgba(22, 163, 74, .28);
}
.jugnuu-image {
    display: flex;
    justify-content: center;
}

.jugnuu-image img {
    width: 100%;
    max-width: 600px;   /* Pehle 420px tha, isy 600px kar dein */
    height: auto;
    object-fit: contain;
    border-radius: var(--r-lg);
}

/* Graduates */
.graduate-section {
    padding: var(--section-y) var(--gutter);
    text-align: center;
    background: var(--bg);
}
.graduate-section h2 { font-size: var(--fs-h1); color: var(--brand); margin-bottom: 44px; }
.graduates-container {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
    padding: 0;
}
.graduate-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    text-align: center;
    box-shadow: var(--shadow);
    padding: 22px 15px;
    transition: transform var(--t), box-shadow var(--t);
}
.graduate-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.graduate-card img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--gold);
    background: var(--bg-muted);
    margin: 0 auto;
}
.graduate-card h3 { margin: 16px 0 4px; color: var(--brand); font-size: 1.08rem; }
.graduate-card p { color: var(--ink-3); font-size: .9rem; }

/* ==========================================================================
   13. ADMISSIONS PAGE
   ========================================================================== */
.adm-content-wrapper {
    max-width: var(--container);
    margin: var(--section-y) auto;
    padding: 0 var(--gutter);
}
.adm-content-wrapper h2 {
    margin-bottom: 24px;
    color: var(--brand);
    font-size: var(--fs-h2);
    text-align: center;
}
.adm-grid-three-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    margin-top: 10px;
}
.adm-card {
    background: var(--surface);
    padding: 28px;
    border-radius: var(--r-lg);
    border-left: 5px solid var(--brand);
    box-shadow: var(--shadow);
    transition: transform var(--t), box-shadow var(--t);
}
.adm-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.adm-card h3 { color: var(--brand); margin-bottom: 12px; font-size: 1.2rem; }
.adm-card p { color: var(--ink-2); line-height: 1.75; }

.adm-faq-section { margin-top: 60px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.adm-accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 900px;
    margin: 24px auto 0;
}
.adm-accordion-item {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--t);
}
.adm-accordion-item.active-item { box-shadow: var(--shadow); }
.adm-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    padding: 18px 22px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--brand);
    cursor: pointer;
    transition: background var(--t);
}
.adm-accordion-header:hover { background: var(--bg-soft); }
.adm-accordion-item.active-item .adm-accordion-header { background: var(--bg-muted); }
.accordion-icon { transition: transform var(--t); color: var(--gold-700); }
.adm-accordion-item.active-item .accordion-icon { transform: rotate(180deg); }
.adm-accordion-body {
    display: none;              /* JS toggles inline display */
    padding: 18px 22px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    color: var(--ink-2);
    line-height: 1.75;
}

.adm-container {
    max-width: var(--container);
    margin: var(--section-y) auto;
    padding: 0 var(--gutter);
    scroll-margin-top: calc(var(--nav-h) + 20px);
}
.adm-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-md);
    border-radius: var(--r);
    border: 1px solid var(--border);
}
.adm-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    text-align: left;
    /* 560, not 640: the cells hold short values, and the lower floor lets the
       full table fit from ~640px up instead of forcing sideways scrolling. */
    min-width: 560px;
}
.adm-table th {
    background: var(--brand);
    color: #fff;
    padding: 16px 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
}
.adm-table td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    color: var(--ink-2);
}
.adm-table tbody tr { transition: background var(--t); }
.adm-table tbody tr:hover { background: var(--bg-soft); }
.adm-table tbody tr:last-child td { border-bottom: none; }
.adm-table td strong { color: var(--ink); }

/* ---- Fee table as stacked cards on phones -------------------------------
   At 375px the 4-column table needed ~292px of sideways scrolling, so the
   Monthly Tuition Fee and Admission Status columns were off-screen and most
   visitors would never see them. Each row becomes a self-contained card with
   the column name supplied from the td's data-label. The <thead> is hidden
   visually but left in the accessibility tree for screen readers.          */
@media (max-width: 640px) {
    .adm-table-wrapper {
        overflow-x: visible;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: none;
    }
    .adm-table {
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background: none;
    }
    .adm-table thead {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .adm-table tr {
        display: block;
        margin-bottom: 18px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    .adm-table tbody tr:hover { background: var(--surface); }
    .adm-table tbody tr:last-child { margin-bottom: 0; }

    .adm-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        padding: 13px 16px;
        text-align: right;
        border-bottom: 1px solid var(--border);
    }
    .adm-table td::before {
        content: attr(data-label);
        flex: 0 1 auto;
        text-align: left;
        font-weight: 600;
        color: var(--ink-3);
    }
    .adm-table tbody tr td:last-child { border-bottom: none; }

    /* First cell becomes the card's header bar */
    .adm-table td:first-child {
        display: block;
        text-align: left;
        padding: 14px 16px;
        background: var(--brand);
        color: #fff;
        font-size: 1.02rem;
    }
    .adm-table td:first-child::before { content: none; }
    .adm-table td:first-child strong { color: #fff; }
}

.status-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    font-size: .82rem;
    font-weight: 700;
}
.status-badge.open { background: var(--ok-bg); color: var(--ok); }
.status-badge.closed { background: var(--danger-bg); color: var(--danger); }

/* Admission form */
.admission-form-section {
    padding: var(--section-y) var(--gutter);
    background: var(--bg-soft);
    text-align: center;
}
.admission-form-section h1 { color: var(--brand); font-size: var(--fs-h2); margin-bottom: 10px; }
.admission-form-section > p { color: var(--ink-3); margin-bottom: 40px; font-size: var(--fs-lead); }
.admission-form {
    max-width: 620px;
    margin: 0 auto;
    background: var(--surface);
    padding: clamp(28px, 4vw, 42px);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}

/* ==========================================================================
   14. CONTACT PAGE
   ========================================================================== */
.cnt-container {
    max-width: var(--container);
    margin: 0 auto var(--section-y);
    padding: calc(var(--nav-h) + clamp(28px, 5vw, 52px)) var(--gutter) 0;
}
.cnt-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(28px, 4vw, 44px);
    align-items: stretch;
}
.cnt-info-box {
    background: linear-gradient(160deg, var(--brand), var(--brand-800));
    color: #fff;
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    min-width: 0;                   /* allow grid item to shrink below content min-width */
}
.cnt-info-box h3 {
    margin-bottom: 26px;
    font-size: 1.4rem;
    color: #fff;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 12px;
    display: inline-block;
}
.cnt-info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 22px;
    min-width: 0;
}
/* break-word, not anywhere: `anywhere` split the email address mid-word
   ("…@gmai / l.com") even when a clean wrap was available. */
.cnt-info-item p { min-width: 0; overflow-wrap: break-word; }
/* Giving the label its own line lets the long address use the full column
   instead of being squeezed after "Email:" on a narrow phone. */
@media (max-width: 480px) {
    .cnt-info-item p strong { display: block; }
}
.cnt-info-item i {
    flex-shrink: 0;
    color: #fff;
    background: var(--gold);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    margin-top: 2px;
}
.cnt-info-item p { color: var(--on-brand-dim); line-height: 1.6; }
.cnt-info-item strong { color: #fff; }
.cnt-map-placeholder {
    margin-top: 28px;
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.cnt-map-placeholder iframe { display: block; width: 100%; border: 0; }

.cnt-form-box {
    background: var(--surface);
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    min-width: 0;                   /* allow grid item to shrink below content min-width */
}
.cnt-form-box h3 { color: var(--ink); margin-bottom: 26px; font-size: 1.4rem; }

/* Shared form controls */
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--ink-2);
    font-weight: 600;
    font-size: .92rem;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 13px 15px;
    min-height: 48px;
    border: 1.5px solid var(--border-2);
    border-radius: var(--r-xs);
    font-family: inherit;
    font-size: 1rem;
    background: var(--bg);
    color: var(--ink);
    transition: border-color var(--t), box-shadow var(--t);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--ink-3); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(14, 77, 139, .12);
}

.cnt-submit-btn,
.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 14px 26px;
    min-height: 50px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--r-xs);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.cnt-submit-btn:hover,
.submit-btn:hover {
    background: var(--brand-600);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.form-feedback {
    margin-top: 16px;
    padding: 12px;
    border-radius: var(--r-xs);
    text-align: center;
    display: none;
    font-weight: 600;
}


/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

/* Tablet / small desktop */
@media (max-width: 1024px) {
    :root { --nav-h: 76px; }

    .faculty-container,
    .academic-life-container,
    .jugnu-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .jugnu-content { order: 2; }
    .academic-life-image img,
    .faculty-image img { max-height: 440px; }

    /* ---- Collapse navigation to a hamburger menu on tablet & small laptops ---- */
    .menu-toggle { display: flex; order: 3; flex-shrink: 0; }

    /* Keep the Donate button visible on mobile, grouped with the hamburger.
       The logo/name area is the ONLY flexible item — it grows to push Donate +
       toggle to the right and shrinks first, so those fixed items always fit. */
    .logo-area { order: 1; flex: 1 1 auto; min-width: 0; }
    .school-name { min-width: 0; overflow: hidden; }
    .navbar > .donate-btn {
        display: inline-flex;
        order: 2;
        flex-shrink: 0;
        padding: 9px 18px;
        min-height: 42px;
        font-size: .85rem;
    }
    .navbar > nav { order: 4; flex: 0 0 auto; }   /* dropdown wrapper — nav-links is absolutely positioned */

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0;
        background: #fff;
        border-top: 1px solid var(--border);
        box-shadow: 0 14px 28px rgba(6, 31, 58, .14);
    }
    .nav-links.active { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links a {
        width: 100%;
        text-align: center;
        padding: 15px;
        border-radius: 0;
    }
    .nav-links a::after { display: none; }
    .nav-links a.active { background: var(--bg-muted); }
}

@media (max-width: 992px) {
    :root { --nav-h: 72px; }

    .idx-grid-two-col,
    .abt-founder-section {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    /* History: brand rail moves above the text and the two logos sit side by
       side, so it stays compact instead of pushing the story a screen down.
       An explicit card/connector/card grid — wrapping flex put the connector
       beside the first card at some widths. */
    .idx-history-grid { grid-template-columns: 1fr; gap: 36px; }
    .idx-history-brands {
        position: static;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: stretch;
        gap: 18px;
        max-width: 660px;
        margin-inline: auto;
    }
    .idx-brand-card .idx-badge-large-img { max-width: 150px; }
    .idx-brand-card .idx-partner-large-img { max-width: 164px; }
    /* Connector turns on its side between two columns */
    .idx-brand-link {
        width: auto;
        flex-direction: column;
        justify-content: center;
    }
    .idx-brand-link::before,
    .idx-brand-link::after { width: 1px; height: auto; }
    .idx-brand-link span { writing-mode: vertical-rl; }
    .idx-about-brief p { max-width: none; }

    .idx-message-text { text-align: left; }
    .abt-founder-info { text-align: center; }
    .idx-counter-box { justify-content: center; }
    .idx-SEI { grid-template-columns: 1fr; max-width: 460px; }
    .idx-work-us { flex-direction: column; text-align: center; }
    .work-us-text { order: 2; }
    .syllabus-wrapper { flex-direction: column; }
    .cnt-grid { grid-template-columns: 1fr; }
    .adm-grid-three-col { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: navbar collapse + layout stacking */
@media (max-width: 768px) {
    :root { --nav-h: 66px; }

    .navbar {
        padding: 10px clamp(12px, 3.5vw, 20px);
        gap: 10px;
    }
    .school-logo-img { width: 42px; height: 42px; flex-shrink: 0; }
    .navbar.navbar-scrolled .school-logo-img { width: 38px; height: 38px; }
    .partner-logo-img { width: 38px; height: 38px; padding: 4px; border-radius: 10px; }
    .navbar.navbar-scrolled .partner-logo-img { width: 34px; height: 34px; padding: 4px; }
    .logo-divider { height: 26px; }
    .navbar.navbar-scrolled .logo-divider { height: 24px; }
    .school-name h2 { font-size: 13px; max-width: 100%; line-height: 1.15; }
    .navbar > .donate-btn { padding: 8px 15px; min-height: 40px; font-size: .82rem; }
    /* (nav collapse / dropdown rules are inherited from the ≤1024px block) */

    /* Jugnuu benefits stack; keep the panel from eating the whole screen */
    .jugnu-points-box { padding: 20px 16px; }
    .jugnu-points-title { font-size: 1rem; }

    /* Announcements: let long notices wrap instead of being clipped to one line */
    .idx-notice-container { flex-wrap: wrap; }
    .idx-notice-content { height: auto; overflow: visible; }
    .idx-notice-ticker p { line-height: 1.5; padding: 3px 0; }

    /* Stack multi-column layouts */
    .idx-counter-box { flex-direction: column; }
    .adm-grid-three-col,
    .faculty-points,
    .academic-points,
    .jugnu-points { grid-template-columns: 1fr; }
    .idx-SEI { grid-template-columns: 1fr; }
    .wallet-grid { grid-template-columns: 1fr; }
    .donate-tabs { flex-direction: column; }

    .idx-message-text { font-size: 1.05rem; }
    .abt-card p { text-align: left; }

    /* Footer: two balanced columns on tablets/large phones */
    .footer-container { justify-content: flex-start; gap: 30px 24px; text-align: left; }
    .footer-container > * { flex: 1 1 220px; }
    .footer-brand { flex-basis: 100%; max-width: 100%; }
}

/* ==========================================================================
   TOUCH TARGETS
   Apple HIG and Material both put the minimum comfortable target at ~44px.
   Several controls sat well under that (footer links 21px tall, the notice
   arrows 32x32, Donate 38px, the syllabus download links 38px).
   Scoped to small viewports and to coarse pointers so the desktop layout and
   spacing are unchanged.
   ========================================================================== */
@media (max-width: 768px), (pointer: coarse) {
    /* Footer navigation — links were only 21px tall and stacked 11px apart,
       an easy mis-tap. Height comes from the link itself so the whole row is
       tappable, and the list margin is removed to absorb the extra height. */
    footer ul li { margin-bottom: 0; }
    footer ul li a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
    .footer-socials .social-icons a { width: 44px; height: 44px; }

    /* Only the navbar Donate button shrinks below 44 — the other CTAs are
       already 46-48px in the base styles and are deliberately left alone. */
    .navbar > .donate-btn { min-height: 44px; }

    .menu-toggle { width: 46px; height: 46px; }

    /* Announcement arrows were 32x32 */
    .idx-notice-controls button { width: 44px; height: 44px; font-size: .95rem; }

    /* Syllabus download links were 38px tall */
    .acd-download-link { min-height: 44px; }

    /* Controls that only appear inside modals/accordions, raised for the same
       reason (min-* so they can only grow, never shrink). */
    .adm-accordion-header { min-height: 52px; }
    .tab-btn { min-height: 46px; }
    .donate-modal-close,
    .job-photo-close { min-width: 44px; min-height: 44px; }
    .copy-field button,
    .wallet-num-box button { min-height: 40px; }
}

/* Centred footer on the narrowest phones keeps its links centred */
@media (max-width: 480px) {
    footer ul li a { justify-content: center; }
}

/* Small phones */
@media (max-width: 480px) {
    .hero-box { padding: 24px 20px; }
    .idx-hero-banner { min-height: 78vh; }

    /* Compact navbar so logo + Donate + menu all fit.
       Below 480px there is no room for a second mark without squeezing the
       school name into a 4-line column, so the Taawan emblem drops out of the
       header here — the footer still carries both logos at every size. */
    /* 11.5px was below a readable floor; 12.5px with a tighter gap and a
       slightly smaller badge keeps the same number of wrapped lines. */
    .school-name h2 { font-size: 12.5px; line-height: 1.18; }
    .navbar { gap: 8px; }
    .logo-area { gap: 10px; }
    .school-logo-img { width: 38px; height: 38px; }
    .navbar.navbar-scrolled .school-logo-img { width: 35px; height: 35px; }
    .logo-divider,
    .partner-logo-img { display: none; }
    .navbar > .donate-btn { padding: 9px 12px; min-height: 44px; font-size: .78rem; }
    .menu-toggle { width: 44px; height: 44px; font-size: 22px; }

    /* Announcements: full-width stacked, centred, fully readable */
    .idx-notice-container { flex-direction: column; gap: 10px; align-items: stretch; }
    .idx-notice-header h3 { justify-content: center; white-space: normal; text-align: center; }
    .idx-notice-content { text-align: center; height: auto; overflow: visible; }
    .idx-notice-ticker p { line-height: 1.5; }
    .idx-notice-controls { justify-content: center; }

    /* History brand rail: back to a single stacked column — two cards side by
       side leave too little room for the captions on a small phone. */
    .idx-history-brands { grid-template-columns: 1fr; max-width: 320px; }
    .idx-brand-card .idx-badge-large-img { max-width: 170px; }
    .idx-brand-card .idx-partner-large-img { max-width: 186px; }
    .idx-brand-link { flex-direction: row; }
    .idx-brand-link::before,
    .idx-brand-link::after { width: auto; height: 1px; }
    .idx-brand-link span { writing-mode: horizontal-tb; }

    .card-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .graduates-container { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .graduate-card img { width: 110px; height: 110px; }
    .team-grid { grid-template-columns: 1fr; }
    #backToTopBtn { bottom: 20px; right: 20px; width: 46px; height: 46px; line-height: 46px; }

    /* Footer: single centred column */
    .footer-container { flex-direction: column; align-items: center; gap: 26px; text-align: center; }
    .footer-container > * { flex: 0 1 auto; }
    .footer-socials .social-icons { justify-content: center; }
    .footer-brand { max-width: 100%; }
    .footer-logos { justify-content: center; }
    footer ul li:hover { transform: none; }
}
/* ===============================
   STEM EDUCATION HERO SECTION
================================== */

.stem-education{
    background: #281752;
    color: #fff;
    text-align: center;
    padding: 140px 20px 80px;
}

.stem-education h1{
    font-size: clamp(2.3rem, 5vw, 3.5rem);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
    color: white;
}

.stem-education p{
    max-width: 850px;
    margin: 0 auto;
    font-size: 1.08rem;
    line-height: 1.9;
    color: white;
}
.stem-education h1::after{
    content: "";
    display: block;
    width: 90px;
    height: 4px;
    background: var(--gold);
    margin: 15px auto 0;
    border-radius: 20px;
}
@media (max-width:768px){

.stem-education{
    padding:110px 20px 60px;
}

.stem-education h1{
    font-size:2rem;
}

.stem-education p{
    font-size:.98rem;
}

}
/* ===============================
   PROGRAM GALLERY
================================== */

.program-gallery{
    padding:80px 5%;
     background:#f7f8fc;
}

.section-heading{
    text-align:center;
    margin-bottom:50px;
}

.section-heading h2{
    font-size:2.4rem;
    color:var(--brand);
    margin-bottom:15px;
}

.section-heading p{
    max-width:700px;
    margin:auto;
    color:#666;
    line-height:1.8;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
    gap:30px;
}

.gallery-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    transition:.35s;
}

.gallery-card:hover{
    transform:translateY(-10px);
}

.gallery-card img{
    width:100%;
    height:250px;
    object-fit:cover;
    display:block;
    transition:.4s;
}

.gallery-card:hover img{
    transform:scale(1.08);
}

.gallery-content{
    padding:22px;
    text-align:center;
}

.gallery-content h3{
    color:var(--brand);
    font-size:1.2rem;
    margin:0;
}
/* ==========================================
   EXPLORE ART PAGE
========================================== */

/*=========================
      HERO SECTION
=========================*/


.explore-hero{
    min-height:22vh;
    background:#281752;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:110px 20px 50px;   /* 10px ki jagah 110px */
    color:#fff;
}

.explore-hero-content{
    max-width:850px;
}

.explore-hero h1{
    font-size:clamp(3rem,7vw,4.8rem);
    margin-bottom:25px;
    color:#fff;
    font-weight:700;
}

.explore-hero p{
    font-size:1.2rem;
    line-height:1.9;
    color:rgba(255,255,255,.92);
}
/*==============================
    EVENT GALLERY HEADING
===============================*/

.event-gallery-heading{
    max-width:850px;
    margin:90px auto 60px;
    text-align:center;
    padding:0 20px;
}

.gallery-tag{
    display:inline-block;
    background:#f3edff;
    color:var(--brand);
    padding:8px 20px;
    border-radius:50px;
    font-size:.9rem;
    font-weight:600;
    letter-spacing:1px;
    margin-bottom:18px;
}

.event-gallery-heading h2{
    font-size:clamp(2rem,5vw,3rem);
    color:var(--brand);
    margin-bottom:20px;
    position:relative;
}

.event-gallery-heading h2::after{
    content:"";
    width:90px;
    height:4px;
    background:var(--gold);
    display:block;
    margin:15px auto 0;
    border-radius:20px;
}

.event-gallery-heading p{
    font-size:1.05rem;
    line-height:1.8;
    color:#666;
    max-width:700px;
    margin:auto;
}
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
    gap:25px;
    max-width:1200px;
    margin:60px auto;
    padding:0 20px;
}

.gallery-card{
    background:#fff;
    border:3px solid #28a745;      /* Green Border */
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    transition:.3s;
    padding:0;                     /* White space khatam */
}

.gallery-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 28px rgba(0,0,0,.18);
    border-color:#1e7e34;
}

.gallery-card img{
    width:100%;
    height:250px;
    object-fit:cover;              /* White space remove */
    object-position:center;
    display:block;
}

.gallery-content{
    padding:15px;
    text-align:center;
    background:#fff;
    border-top:2px solid #28a745;
}

.gallery-content h3{
    margin:0;
    color:#281752;
    font-size:1.05rem;
    font-weight:600;
}

/*==============================
      MOBILE
===============================*/

@media (max-width:768px){

.event-gallery-heading{
    margin:70px auto 40px;
}

.event-gallery-heading h2{
    font-size:2rem;
}

.event-gallery-heading p{
    font-size:1rem;
}

}
/*==========================
      EVENT GALLERY
===========================*/
.featured-event{
    padding:90px 7%;
    background:#f8fbff;
}

.featured-heading{
    max-width:850px;
    margin:auto;
    text-align:center;
    margin-bottom:60px;
}

.featured-heading span{
    display:inline-block;
    padding:8px 22px;
    background:#e8f7ee;
    color:#2E8B57;
    border-radius:40px;
    font-weight:600;
    margin-bottom:18px;
}

.featured-heading h2{
    color:#281752;
    font-size:clamp(2.2rem,5vw,3.2rem);
    margin-bottom:20px;
}

.featured-heading p{
    color:#666;
    line-height:1.8;
}

.featured-container{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:35px;
    align-items:start;
}

.event-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
    max-width:1200px;
    margin:50px auto;
}

.event-gallery img{
    width:100%;
    height:250px;
    object-fit:cover;
    border-radius:18px;
    border:2px solid #2E8B57;
    transition:.3s;
    box-shadow:0 10px 20px rgba(0,0,0,.12);
}

.event-gallery img:hover{
    transform:scale(1.04);
}

/*==========================
         VIDEO
===========================*/

.event-video{
    max-width:1200px;
    margin:50px auto 0;
}

.event-video video{
    width:100%;
    height:600px;
    border-radius:20px;
    border:3px solid #2E8B57;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
    object-fit:cover;
    display:block;
}

/*==========================
        MOBILE
===========================*/

@media(max-width:768px){

.event-gallery{
    grid-template-columns:1fr;
}

.event-gallery img{
    height:220px;
}

.event-video video{
    height:250px;
}

}
/*================ DONATION SECTION ================*/

.donation-section{
    padding:90px 8%;
    background:#f7fbff;
}

.donation-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    flex-wrap:wrap;
}

.donation-image{
    flex:1;
}

.donation-image img{
    width:100%;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.donation-content{
    flex:1;
}

.donation-tag{
    display:inline-block;
    background:#eaf4ff;
    color:#0b2d59;
    padding:8px 18px;
    border-radius:30px;
    font-weight:600;
    margin-bottom:20px;
}

.donation-content h2{
    font-size:42px;
    color:#0b2d59;
    margin-bottom:20px;
}

.donation-content p{
    color:#555;
    line-height:1.8;
    margin-bottom:18px;
    font-size:17px;
}

.support-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin:30px 0;
}

.support-card img{
    width:100%;
    height:100px;
    object-fit:cover;
    border-radius:12px;
    margin-bottom:15px;
    transition:.4s ease;
}

.support-card:hover img{
    transform:scale(1.08);
}

.support-card h4{
    font-size:15px;
    color:#0b2d59;
    margin-top:8px;
    font-weight:600;
}
.support-card{
    background:#fff;
    padding:12px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.35s ease;
    overflow:hidden;
    border:1px solid #eef2f6;
}

.support-card:hover{
    transform:translateY(-10px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.donate-btn-home{
    background:#2E8B57;
    color:#fff;
    border:none;
    padding:16px 40px;
    min-width:220px;     /* width fix */
    white-space:nowrap;  /* text ko 1 line mein rakhega */
    border-radius:40px;
    font-size:18px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.donate-btn-home:hover{
    background:#2E8B57;
    transform:translateY(-3px);
}

@media(max-width:992px){

.donation-container{
    flex-direction:column;
}

.support-grid{
    grid-template-columns:repeat(2,1fr);
}

.donation-content h2{
    font-size:34px;
}

}


@media(max-width:576px){

.support-grid{
    grid-template-columns:1fr;
}

.donation-content h2{
    font-size:28px;
}

.donate-btn-home{
    width:100%;
}

}
.about-stats{
    margin-top: 20px;
    margin-bottom: 60px;
    padding: 0 6%;
}


.stats-container{
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.stat-card{
    background:#fff;
    padding:35px 25px;
    border-radius:18px;

    text-align:center;

    box-shadow:0 15px 45px rgba(0,0,0,.12);

    transition:.35s ease;

    border-top:5px solid var(--brand-600);
}
.stat-card img{
    object-fit:contain;
    background:#fff;
}

.stat-card:hover{
    transform:translateY(-10px);
}

.stat-number{
    font-size:3rem;
    font-weight:800;
    color:#0b8f5a;
    margin-bottom:8px;
}

.stat-title{
    font-size:1rem;
    color:#666;
    font-weight:600;
}
/*=========================================
      Sponsored Educational Trip
=========================================*/

.idx-sponsored-trip{

    width:100%;

    max-width:100%;

    margin:0 auto;

    padding:80px 50px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

    background:white;   /* Ya white, jo bhi chahiye */

    border-radius:0;

    box-shadow:none;

}

.trip-image{

     flex: 1.3;

}

.trip-image img{

    width:100%;

    height:500px;

    object-fit:cover;

    display:block;

    border-radius:22px;

    border:5px solid var(--brand);

    box-shadow:0 12px 30px rgba(0,0,0,.15);

}

.trip-content{

     flex: 0.7;

}

.trip-tag{

    display:inline-block;

    background:#E8F6EC;

    color:var(--brand);

    padding:8px 18px;

    border-radius:30px;

    font-size:.85rem;

    font-weight:600;

    margin-bottom:20px;

}

.trip-content h2{

    font-size:var(--fs-h2);

    color:var(--brand);

    margin-bottom:20px;

}

.trip-content p{

    color:var(--ink-2);

    line-height:1.9;

    margin-bottom:30px;

}

.trip-cards{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.trip-card{

    flex:1;

    min-width:170px;

    background:#f8fbff;

    padding:22px;

    text-align:center;

    border-radius:18px;

    border:1px solid #dce8f5;

    transition:.3s;

}

.trip-card:hover{

    transform:translateY(-8px);

    box-shadow:0 12px 25px rgba(0,0,0,.12);

}

.trip-card i{

    font-size:30px;

    color:var(--brand);

    margin-bottom:15px;

}

.trip-card h4{

    color:var(--brand);

    margin-bottom:10px;

}

.trip-card p{

    margin:0;

    font-size:.92rem;

    color:var(--ink-2);

}


/*================ Responsive ================*/

@media(max-width:900px){

    .idx-sponsored-trip{
        flex-direction:column;
        text-align:center;
        padding:35px 20px;
    }

    .trip-image{
        width:100%;
    }

    .trip-image img{
        width:100%;
        max-width:420px;
        height:320px;
        margin:0 auto;
        object-fit:cover;
    }

    .trip-cards{
        justify-content:center;
    }

    .trip-card{
        min-width:140px;
    }
}

/*==================================================
            Murree Trip Gallery
==================================================*/
/* =========================================
   APPLE GALLERY - PART 2
========================================= */

/* =========================================
   APPLE STYLE MURREE GALLERY
========================================= */

.apple-gallery{

    position:relative;
    width:100%;
    min-height:100vh;

    overflow:hidden;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#0f172a;

    padding:80px 20px;

}


/* Background Images */

.gallery-background{

    position:absolute;

    inset:0;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

    padding:20px;

    z-index:1;

}


.gallery-column{

    display:flex;

    flex-direction:column;

    gap:18px;

    animation-timing-function:linear;

    animation-iteration-count:infinite;

}



/* Images */

.gallery-column img{

    width:100%;

    height:240px;

    object-fit:cover;

    border-radius:18px;

    box-shadow:0 15px 35px rgba(0,0,0,.35);

    opacity:.85;

    transition:.5s ease;

}


.gallery-column img:hover{

    transform:scale(1.08);

    opacity:1;

    filter:brightness(1.15);

}



/* Different Image Heights */

.gallery-column img:nth-child(2n){

    height:280px;

}


.gallery-column img:nth-child(3n){

    height:200px;

}



/* Moving Animation */

.column-1{

    animation:moveUp 35s linear infinite;

}


.column-2{

    animation:moveDown 40s linear infinite;

}


.column-3{

    animation:moveUp 45s linear infinite;

}


.column-4{

    animation:moveDown 38s linear infinite;

}



@keyframes moveUp{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-40%);

    }

}


@keyframes moveDown{

    from{

        transform:translateY(-40%);

    }

    to{

        transform:translateY(0);

    }

}



/* Dark Overlay */

.gallery-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        rgba(0,0,0,.05),
        rgba(0,0,0,.12)
    );

    backdrop-filter:none;

    z-index:2;

}



/* Center Content */

.gallery-content{
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;   /* Heading aur video dono center */
    justify-content: center;
    text-align: center;
     border: 2px solid rgba(34,197,94,0.7);
    border-radius: 30px;
     box-shadow:
        0 0 15px rgba(34,197,94,.35),
        0 0 35px rgba(34,197,94,.20),
        0 20px 50px rgba(0,0,0,.35);
}
.gallery-content:hover{
    border-color:#22c55e;
    box-shadow:
        0 0 20px rgba(34,197,94,.6),
        0 0 45px rgba(34,197,94,.35),
        0 25px 60px rgba(0,0,0,.4);
}


/* Heading */

.gallery-content h2{

    color: var(--brand);

    font-size:48px;

    font-weight:800;

    margin-bottom:30px;

    text-shadow:0 10px 25px rgba(0,0,0,.6);

}



/* Video Card */

.video-card{
    width:280px;
    padding:0;
    background:transparent;
    border:none;
    box-shadow:none;
}

.video-card video{
    width:280px;
    height:520px;
    object-fit:cover;
    border-radius:22px;
    display:block;
    box-shadow:0 20px 45px rgba(0,0,0,.35);
}



/* Video Shine Effect */

.video-card::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:60%;

    height:300%;


    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.3),
        transparent
    );


    transform:rotate(25deg);

    animation:shine 6s infinite;

}



@keyframes shine{

    from{

        left:-60%;

    }

    to{

        left:150%;

    }

}



/* Floating Video */

.video-card{

    animation:floatVideo 5s ease-in-out infinite;

}


@keyframes floatVideo{

    50%{

        transform:translateY(-10px);

    }

}



/* Spotlight */

.gallery-content::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    background:radial-gradient(
        circle,
        rgba(255,255,255,.20),
        transparent 70%
    );

    filter:blur(70px);

    z-index:-1;

}



/* =========================================
   TABLET
========================================= */

@media(max-width:991px){


.gallery-background{

    grid-template-columns:repeat(2,1fr);

}


.gallery-content h2{

    font-size:34px;

}


}


/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){


.apple-gallery{

    padding:50px 15px;

}


.gallery-background{

    gap:10px;

    padding:10px;

}


.gallery-column{

    gap:10px;

}


.gallery-column img{

    height:170px;

}


.gallery-content h2{

    font-size:24px;

    margin-bottom:20px;

}


.video-card{

    width:210px;

}


.video-card video{

    width:210px;

    height:370px;

}
}