/*===============================
Slider
===============================*/
/* =========================================================
   Home Hero Slider — home module (namespace: home-hero-*)
   ✔ NO global CSS — no html / body / * / bare-tag selectors
   ✔ Resets only via :where(.home-hero) — zero specificity
   ✔ Variables scoped to .home-hero (no :root)
   → can never override, or be overridden by, the host CSS
   ========================================================= */

/* demo page chrome via CLASS only (not a body-tag rule) */
:where(.demo-body) {
    margin: 0;
    background: #ffffff;
}

/* ---------- scoped custom properties (module-local, no :root) ---------- */
.home-hero {
    --hh-font-body: "Plus Jakarta Sans", system-ui, sans-serif;
    --hh-font-head: "Plus Jakarta Sans", system-ui, sans-serif;
    --hh-font-mr: "Plus Jakarta Sans", "Mukta", system-ui, sans-serif;
    --hh-navy: #012555; /* logo navy */
    --hh-gold: #FA971E; /* logo gold */
    --hh-white: #ffffff;
    --hh-dark: #19232B;
    --hh-text: #757F95;
    --hh-arrow-bg: rgba(255, 255, 255, 0.2);
    --hh-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
    --hh-transition: all .5s ease-in-out;
    position: relative;
    width: 100%;
    overflow: hidden;
    font-family: var(--hh-font-body);
    color: var(--hh-text);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

/* ---------- zero-specificity resets INSIDE the module only ---------- */
:where(.home-hero),
:where(.home-hero) :where(*, *::before, *::after) {
    box-sizing: border-box;
}

    :where(.home-hero) :where(h1, h6, p) {
        margin: 0;
    }

    :where(.home-hero) :where(a) {
        text-decoration: none;
    }

    :where(.home-hero) :where(button) {
        font: inherit;
    }

    :where(.home-hero) .home-hero-ico {
        display: inline-block;
        vertical-align: -3px;
    }

/* ---------- module layout ---------- */

.home-hero-slider {
    position: relative;
    overflow: hidden;
}

.home-hero-track {
    display: flex;
    transition: transform .9s cubic-bezier(.65, 0, .35, 1);
    will-change: transform;
}

.home-hero-slide {
    flex: 0 0 100%;
    min-width: 100%;
    padding-top: 120px;
    padding-bottom: 180px;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

    /* soft navy gradient — dark behind the text, light on the right */
    .home-hero-slide::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: -0.5px;
        top: 0;
        background: linear-gradient( 90deg, rgba(1, 37, 85, .78) 0%, rgba(1, 37, 85, .50) 45%, rgba(1, 37, 85, .15) 100% );
        z-index: -1;
    }

.home-hero-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.home-hero-row {
    display: flex;
    align-items: center;
}

.home-hero-col {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 992px) {
    .home-hero-col {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

/* ---------- hero content ---------- */

.home-hero-content {
    height: 100%;
}

/* subtitle — gold, underlined */
.home-hero-sub {
    display: inline-block;
    color: var(--hh-gold);
    font-family: var(--hh-font-head);
    font-size: 25px;
    letter-spacing: 6px;
    font-weight: 900;
    position: relative;
    text-transform: uppercase;
    border-bottom: 3px solid var(--hh-gold);
    padding-bottom: 6px;
}

    .home-hero-sub .home-hero-ico {
        margin-right: 10px;
    }

/* Marathi motto variant */
.home-hero-sub--mr {
    font-family: var(--hh-font-mr);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: none;
}

.home-hero-title {
    font-family: var(--hh-font-head);
    color: var(--hh-white);
    font-size: 58px;
    font-weight: 900;
    line-height: 1.15;
    margin: 20px 0;
    text-transform: capitalize;
    /* keep the heading to 2 evenly balanced lines */
    text-wrap: balance;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.home-hero-gold {
    color: var(--hh-gold);
}

.home-hero-text {
    color: var(--hh-white);
    line-height: 30px;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 20px;
    max-width: 640px;
}

.home-hero-actions {
    gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 35px;
    justify-content: flex-start;
}

/* ---------- module buttons (gold button + navy expanding circle) ---------- */

.home-hero-btn {
    font-size: 14px;
    color: #fff;
    padding: 14px 22px;
    display: inline-block;
    transition: var(--hh-transition);
    text-transform: uppercase;
    position: relative;
    border-radius: 50px 50px 50px 0;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    border: none;
    background: var(--hh-gold);
    box-shadow: var(--hh-shadow);
    z-index: 1;
}

    .home-hero-btn::before {
        content: "";
        height: 300px;
        width: 300px;
        background: var(--hh-navy);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%) scale(0);
        transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: -1;
    }

    .home-hero-btn:hover {
        color: var(--hh-gold);
    }

        .home-hero-btn:hover::before {
            transform: translateY(-50%) translateX(-50%) scale(1);
        }

    .home-hero-btn .home-hero-btn-ico {
        margin-left: 6px;
        vertical-align: -2px;
    }

/* white/alt variant */
.home-hero-btn-alt {
    background: var(--hh-white);
    color: var(--hh-dark);
}

    .home-hero-btn-alt::before {
        background: var(--hh-navy);
    }

    .home-hero-btn-alt:hover {
        color: var(--hh-white);
    }

/* ---------- slider arrows ---------- */

.home-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    background: var(--hh-arrow-bg);
    color: var(--hh-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--hh-transition);
    z-index: 10;
}

    .home-hero-arrow:hover {
        background: var(--hh-gold);
        color: #fff;
    }

.home-hero-prev {
    left: 40px;
}

.home-hero-next {
    right: 40px;
}

/* ---------- per-slide entrances (prefixed keyframes — global in CSS) ---------- */

.home-hero [data-home-anim] {
    opacity: 0;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: ease;
}

@keyframes homeHeroDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes homeHeroUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes homeHeroLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes homeHeroRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ---------- responsive ---------- */

@media (max-width: 1399px) {
    .home-hero-title {
        font-size: 52px;
    }
}

@media (max-width: 991px) {
    .home-hero-title {
        font-size: 44px;
    }

    .home-hero-arrow {
        top: auto;
        bottom: 30px;
        transform: none;
    }

    .home-hero-prev {
        left: auto;
        right: 120px;
    }

    .home-hero-next {
        right: 40px;
    }
}

@media (max-width: 767px) {
    .home-hero-slide {
        padding-top: 90px;
        padding-bottom: 140px;
    }

    .home-hero-title {
        font-size: clamp(24px, 7vw, 34px);
    }

    .home-hero-sub {
        font-size: 18px;
        letter-spacing: 3px;
    }

    .home-hero-sub--mr {
        letter-spacing: 1px;
    }

    .home-hero-text {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .home-hero-title {
        font-size: clamp(22px, 6.6vw, 30px);
    }

    .home-hero-prev {
        right: 110px;
    }

    .home-hero-next {
        right: 30px;
    }
}

/* reduced motion: entrances + autoplay movement disabled (JS checks too) */
@media (prefers-reduced-motion: reduce) {
    .home-hero-track {
        transition: none;
    }

    .home-hero [data-home-anim] {
        opacity: 1;
        animation: none;
    }
}

/*=====================================
About us
=====================================*/
/* ==================================================================
   About Us Section — Abhinav Mahavidyalaya Design System
   Reference  : Eduka "About Us" structure (theme layout)
   Design file: finaldesign.md (single source of truth)
   Palette    : Navy #012555 + Gold #FA971E
   Fonts      : Playfair Display (headings) + Plus Jakarta Sans (body)
   Container  : max-width 1500px
   Rules      : all classes prefixed (about-*), zero-global resets
                (:where), drop-in safe for layout.cshtml projects
   ================================================================== */

/* Fonts (Playfair Display + Plus Jakarta Sans) come from the Google Fonts
   link in _Layout.cshtml — do NOT redeclare @font-face here, it replaces the
   site-wide faces with missing local files and breaks every heading/body font. */

/* ---------- Scoped design tokens ---------- */
.about-root {
    --brand-navy: #012555; /* primary */
    --brand-navy2: #023878; /* navy hover / lighter surface */
    --brand-dark: #011736; /* darkest surface */
    --brand-gold: #FA971E; /* accent */
    --brand-gold2: #FBAC4B; /* gold hover */
    --brand-ink: #231F20;
    --navy-light: rgba(1, 37, 85, 0.09); /* soft navy tint (quote bg, icon shadows) */
    --body-text: #374151; /* gray-700 */
    --about-box-shadow: 0 0 40px 5px rgba(1, 23, 54, 6%);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: var(--body-text);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
    /* slideInRight cue starts off-screen; clip it so it can't widen the mobile viewport */
    overflow-x: clip;
}

/* ---------- Zero-specificity resets (never leak, never break host) ---------- */
:where(.about-root, .about-root *) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:where(.about-root h1, .about-root h2, .about-root h3, .about-root h4, .about-root h5, .about-root h6) {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 800;
    color: var(--brand-navy);
    line-height: 1.2;
    margin-bottom: .5rem;
}

:where(.about-root p) {
    margin-bottom: 1rem;
}

:where(.about-root a) {
    text-decoration: none;
    transition: all .5s ease-in-out;
}

:where(.about-root img) {
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}

/* ---------- Container : max-width 1500px ---------- */
.about-container {
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* ---------- Grid ---------- */
.about-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.about-col-lg-6, .about-col-md-6, .about-col-md-7, .about-col-md-5 {
    width: 100%;
}

@media (min-width: 768px) {
    .about-col-md-6 {
        width: calc(50% - 12px);
    }

    .about-col-md-7 {
        width: calc(58.333333% - 12px);
    }

    .about-col-md-5 {
        width: calc(41.666667% - 12px);
    }
}

@media (min-width: 992px) {
    .about-col-lg-6 {
        width: calc(50% - 12px);
    }
}

.about-align-center {
    align-items: center;
}

/* ---------- Section heading ---------- */
.about-heading {
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.about-tagline {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--brand-gold);
    position: relative;
    border-bottom: 2px solid var(--brand-gold);
    line-height: 1.4;
}

    .about-tagline svg {
        width: 20px;
        height: 20px;
        vertical-align: -3px;
        margin-right: 4px;
    }

.about-title {
    font-weight: 900;
    text-transform: capitalize;
    font-size: 55px;
    color: var(--brand-navy);
    margin-top: 10px;
    margin-bottom: 0;
    position: relative;
}

    .about-title span {
        color: var(--brand-gold);
    }

/* ==================================================================
   BUTTON — base .abm-btn (fill animation) lives in Layout.css.
   Only this section's button is dressed here, scoped to .about-root,
   so the header / footer .abm-btn buttons are never overridden.
   ================================================================== */
.about-root .about-btn-discover {
    background: var(--brand-gold);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

    .about-root .about-btn-discover .abm-btn-icon {
        display: inline-flex;
    }

/* Section-specific button dressing (Eduka pill shape) */
.about-btn-discover {
    font-size: 15.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 24px;
    border-radius: 50px 50px 50px 0;
    box-shadow: var(--about-box-shadow);
}

    .about-btn-discover svg {
        width: 15px;
        height: 15px;
    }

/* ==================================================================
   About Us section
   ================================================================== */
.about-area {
    position: relative;
    padding: 120px 0;
}

.about-left {
    margin-right: 20px;
}

.about-img {
    display: flex;
    gap: 30px;
    position: relative;
}

    .about-img > .about-row {
        flex: 1;
    }

    .about-img img {
        width: 100%;
        height: auto;
    }

    .about-img .about-img-1 {
        border-radius: 80px 80px 0 80px;
    }

    .about-img .about-img-2 {
        border-radius: 50%;
        border: 2px dashed var(--brand-gold);
        padding: 8px;
    }

    .about-img .about-img-3 {
        border-radius: 0 80px 80px 80px;
    }

/* Experience badge — gold surface ⇒ navy text (design rule) */
.about-experience {
    display: flex;
    align-items: center;
    text-align: center;
    background: var(--brand-gold);
    color: #fff;
    padding: 15px 20px 15px 15px;
    border-radius: 50px 50px 50px 0;
    box-shadow: 0 0 40px 5px rgba(1, 23, 54, 10%);
    margin-top: 24px;
    gap: 12px;
}

.about-experience-icon {
    flex: 0 0 auto;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 50px;
}

    .about-experience-icon img {
        width: 65px;
    }

.about-experience b {
    display: block;
    text-align: left;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    flex: 1;
}

.about-right {
    position: relative;
    display: block;
}

.about-content {
    margin-top: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.about-item {
    position: relative;
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
}

/* Gold icon squares with navy glyphs (approved combo) */
.about-item-icon {
    flex: 0 0 auto;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: var(--brand-gold);
    border-radius: 50px;
    color: #fff;
    box-shadow: -5px 5px 0 var(--navy-light);
}

    .about-item-icon img {
        width: 45px;
    }

.about-item-content {
    flex: 1;
}

    .about-item-content h5 {
        font-size: 22px;
        margin-bottom: 5px;
    }

    .about-item-content p {
        margin-bottom: 0;
    }

.about-quote {
    position: relative;
    color: var(--brand-navy);
    padding: 20px 22px;
    background: var(--navy-light);
    border-radius: 20px;
}

    .about-quote p {
        margin-bottom: 0;
    }

    .about-quote svg {
        position: absolute;
        width: 45px;
        height: 45px;
        color: var(--brand-navy);
        right: 15px;
        bottom: -15px;
    }

.about-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
    margin-top: 30px;
}

.about-phone {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .about-phone .about-phone-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--brand-navy);
        color: #ffffff;
        border-radius: 50px;
        box-shadow: -5px 5px 0 var(--navy-light);
    }

        .about-phone .about-phone-icon svg {
            width: 22px;
            height: 22px;
        }

    .about-phone .about-phone-number {
        line-height: 1;
    }

        .about-phone .about-phone-number span {
            color: var(--brand-gold);
            font-weight: 600;
        }

        .about-phone .about-phone-number h6 {
            font-size: 20px;
            margin: 0;
            margin-top: 8px;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

            .about-phone .about-phone-number h6 a {
                color: var(--brand-navy);
                font-weight: 700;
            }

                .about-phone .about-phone-number h6 a:hover {
                    color: var(--brand-navy2);
                }

/* ==================================================================
   Scroll-reveal cues — data-abm-cue spec (finaldesign.md §3.10)
   0.8s cubic-bezier(.4,0,.2,1), stagger handled by layout.js on site;
   standalone fallback included at the bottom of this file.
   ================================================================== */
.about-root [data-abm-cue] {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(.4, 0, .2, 1), transform 0.8s cubic-bezier(.4, 0, .2, 1);
}

.about-root [data-abm-cue="slideInLeft"] {
    transform: translateX(-30px);
}

.about-root [data-abm-cue="slideInRight"] {
    transform: translateX(30px);
}

.about-root [data-abm-cue].abm-cue-show {
    opacity: 1;
    transform: none;
}

/* ---------- Responsive ---------- */
@media all and (max-width: 991px) {
    .about-right {
        margin-top: 30px;
    }

    .about-left {
        margin-right: 0;
    }

    .about-title {
        font-size: 42px;
    }
}

@media all and (max-width: 767px) {
    .about-item {
        margin-top: 10px;
    }

    .about-quote {
        margin-top: 30px;
    }

    .about-area {
        padding: 80px 0;
    }

    .about-title {
        font-size: 34px;
    }
}

@media all and (max-width: 575px) {
    .about-title {
        font-size: 28px;
    }

    .about-experience b {
        font-size: 15px;
    }
}



/*==========================================
New Slider 
==========================================*/
/* ============================================================
   slider-notice-bar.css — ticker + hero slider (extracted from production)
   Requires: Bootstrap 5 CSS (carousel), Inter font, and the :root tokens below
   ============================================================ */
/* ============================================================
   STANDALONE COMPONENT KIT — notice ticker + hero slider
   No Bootstrap, no external CSS/JS/images. Paste anywhere.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    --navy-950: #011736;
    --navy-900: #011736;
    --navy-800: #012555;
    --navy-700: #012555;
    --gold-500: #FA971E;
    --gold-300: #FBAC4B;
    --brass-600: #AF6A15;
    --brass-500: #AF6A15;
    --brass-100: #F9E5CA;
    --brass-50: #faf6ea;
    --ink: #1c2434;
    --muted: #5f6a80;
    --line: #dfe4ee;
    --paper: #f6f7fb;
    --radius: 10px;
    --ease: cubic-bezier(.2,.9,.25,1); /* Fluent emphasized decelerate */
    --grad-navy: linear-gradient(135deg,#011736 0%,#012555 55%,#012555 100%);
    --grad-gold: linear-gradient(120deg,#AF6A15 0%,#FA971E 55%,#FFD49A 100%);
    --lift: 0 10px 28px rgba(1, 23, 54,.16),0 3px 8px rgba(1, 23, 54,.10);
    --font: "Plus Jakarta Sans", system-ui, sans-serif;
}

/** {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6
}

a {
    text-decoration: none;
    transition: color .15s var(--ease)
}*/

img {
    display: block;
    max-width: 100%
}

/* ============================================================
   1. NOTICE BAR (ticker)
   ============================================================ */
.ticker {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: linear-gradient(90deg,var(--brass-50) 0%,#fff 55%,var(--brass-50) 100%);
    border-bottom: 1px solid var(--line)
}

.ticker-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    flex: 0 0 auto;
    background: var(--grad-gold);
    color: #1d1605;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .55rem 1.7rem .55rem 1.1rem;
    clip-path: polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)
}

    .ticker-label .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #1d1605;
        animation: blink 2.4s var(--ease) infinite
    }

.ticker-viewport {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative
}

.ticker-track {
    display: inline-flex;
    gap: 3.5rem;
    white-space: nowrap;
    padding: .55rem .9rem;
    animation: marquee 40s linear infinite;
    will-change: transform
}

.ticker:hover .ticker-track, .ticker:focus-within .ticker-track {
    animation-play-state: paused
}

.ticker-item {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .84rem;
    font-weight: 500;
    color: var(--ink)
}

    .ticker-item::before {
        content: "\00B7";
        color: var(--brass-600);
        font-size: 1.15rem;
        line-height: 1
    }

    .ticker-item a {
        color: var(--navy-800);
        font-weight: 600;
        border-bottom: 1px solid transparent
    }

        .ticker-item a:hover {
            color: var(--navy-950);
            border-bottom-color: var(--gold-500)
        }

@keyframes marquee {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@keyframes blink {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

/* ============================================================
   2. HERO SLIDER
   ============================================================ */
.hero {
    position: relative;
    height: clamp(380px,55vw,560px);
    overflow: hidden;
    background: var(--navy-950);
    isolation: isolate
}

    .hero:focus-visible {
        outline: 2px solid var(--gold-500);
        outline-offset: -2px
    }

.slide-track {
    display: flex;
    height: 100%;
    transition: transform .65s var(--ease)
}

.slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden
}

.slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.001)
}

.slide.is-active .slide-bg {
    animation: zoomout 6.4s var(--ease) both
}

.slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(1, 23, 54,.3);
    z-index: 1
}

.slide-motto {
    position: absolute;
    right: 2%;
    bottom: 6%;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
    font-weight: 600;
    font-size: clamp(2rem,5.5vw,3.8rem);
    color: rgba(255,255,255,.16);
    letter-spacing: .04em;
    text-shadow: 0 2px 24px rgba(0,0,0,.35)
}

.caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 2.8rem clamp(1rem,5vw,3rem) 2.4rem;
    background: linear-gradient(to top,rgba(1, 23, 54,.92) 18%,rgba(1, 23, 54,.55) 60%,transparent 100%)
}

.caption-inner {
    max-width: 1140px;
    margin: 0 auto
}

.caption > * {
    animation: rise .65s var(--ease) both
}

.slide.is-active .caption > *:nth-child(1) {
    animation-delay: .05s
}

.slide.is-active .caption > *:nth-child(2) {
    animation-delay: .14s
}

.slide.is-active .caption > *:nth-child(3) {
    animation-delay: .23s
}

.slide.is-active .caption > *:nth-child(4) {
    animation-delay: .32s
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .8rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-300);
    background: rgba(1, 23, 54,.45);
    border: 1px solid rgba(250,151,30,.55);
    border-radius: 999px;
    padding: .3rem .95rem
}

    .kicker::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold-500);
        animation: blink 2.4s var(--ease) infinite; color: #fff;
    }

.caption h2 {
    margin: 0 0 .5rem;
    color: #fff;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    font-size: clamp(1.6rem,3.6vw,2.8rem);
    max-width: 26ch;
    text-shadow: 0 2px 20px rgba(0,0,0,.45)
}

.caption p {
    margin: 0 0 1rem;
    color: #E3E3F6;
    max-width: 62ch
}

.cta {
    display: inline-flex;
    gap: .55rem;
    flex-wrap: wrap
}

.btn {
    display: inline-block;
    border-radius: 6px;
    padding: .55rem 1.25rem;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s var(--ease),box-shadow .18s var(--ease)
}

.btn-gold {
    background: var(--grad-gold);
    color: #1d1605;
    border: 0;
    box-shadow: 0 2px 8px rgba(175,106,21,.35)
}

    .btn-gold:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 26px rgba(175,106,21,.4);
        color: #1d1605
    }

.btn-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.55)
}

    .btn-ghost:hover {
        background: rgba(255,255,255,.12);
        transform: translateY(-1px);
        color: #fff
    }

/* controls */
.cbtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.35);
    background: rgba(1, 23, 54,.55);
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s var(--ease),transform .2s var(--ease)
}

    .cbtn:hover {
        background: var(--gold-500);
        color: #fff;
        transform: translateY(-50%) scale(1.07)
    }

    .cbtn.prev {
        left: 1rem
    }

    .cbtn.next {
        right: 1rem
    }

.dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
    z-index: 4;
    display: flex;
    gap: .45rem;
    justify-content: center
}

    .dots button {
        width: 26px;
        height: 4px;
        border-radius: 3px;
        border: 0;
        cursor: pointer;
        background: rgba(255,255,255,.4);
        transition: background-color .25s var(--ease)
    }

        .dots button.active {
            background: var(--gold-500); color: #fff;
        }

@media (max-width:767px) {
    .cbtn {
        width: 50px;
        height: 50px;
        font-size: 1.6rem
    }

        .cbtn.prev {
            left: .6rem
        }

        .cbtn.next {
            right: .6rem
        }
}

/* ---------- keyframes ---------- */
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes zoomout {
    from {
        transform: scale(1.09)
    }

    to {
        transform: scale(1)
    }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
    .ticker-track {
        animation: none !important
    }

    .slide.is-active .slide-bg {
        animation: none
    }

    .caption > * {
        animation: none
    }

    .kicker::before, .ticker-label .dot {
        animation: none
    }

    * {
        transition-duration: .001s !important
    }
}

/* demo page helpers (remove when integrating) */
.demo-head {
    background: var(--grad-navy);
    color: #C9C9E8;
    padding: .5rem 1rem;
    font-size: .78rem
}

    .demo-head b {
        color: var(--gold-300)
    }





/*=====================================
Parallex section 
=====================================*/
:root {
    --abhinav-navy: #012555;
    --abhinav-navy2: #023878;
    --abhinav-dark: #011736;
    --abhinav-gold: #FA971E;
    --abhinav-gold2: #FBAC4B;
    --abhinav-green: #19733A;
    --abhinav-orange: #FA971E;
    --abhinav-red: #E52B20;
    --abhinav-cream: #FFF9EC;
    --abhinav-ink: #231F20
}

:where(.abhinav-root,.abhinav-root * ) {
    box-sizing: border-box
}

:where(.abhinav-root) {
    margin: 0;
    font-family: "Plus Jakarta Sans",Arial,sans-serif;
    color: #fff
}

.abhinav-agenda {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 82px 24px 76px;
    min-height: 720px;
    background-image: url('/Images/HomePage/ParallexImage.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed
}

    .abhinav-agenda::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(1, 23, 54,.58);
        pointer-events: none
    }

.abhinav-wrap {
    width: min(1180px,100%);
    margin: 0 auto
}

.abhinav-kicker {
    margin: 0 0 12px;
    color: var(--abhinav-gold);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase
}

.abhinav-intro {
    display: grid;
    grid-template-columns: 54% 46%;
    align-items: center;
    margin-bottom: 64px
}

.abhinav-headline {
    padding-right: 58px
}

    .abhinav-headline h1 {
        margin: 0;
        font-family: "Plus Jakarta Sans", system-ui, sans-serif"Times New Roman",serif;
        font-size: 38px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: -.5px
    }

        .abhinav-headline h1::before {
            content: "";
            display: inline-block;
            width: 5px;
            height: 45px;
            vertical-align: -7px;
            margin-right: 16px;
            border-radius: 4px;
            background: var(--abhinav-gold); color: #fff;
        }

.abhinav-intro-copy {
    border-left: 1px solid rgba(250,151,30,.55);
    padding: 8px 0 8px 34px;
    font-size: 17px;
    line-height: 1.85;
    color: #f7f9ff;
    max-width: 490px
}

    .abhinav-intro-copy strong {
        color: var(--abhinav-gold);
        font-weight: 700
    }

.abhinav-cards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px
}

.abhinav-card {
    position: relative;
    min-height: 290px;
    border: 1px solid rgba(250,151,30,.24);
    border-radius: 4px;
    text-align: center;
    background: rgba(255,255,255,.98);
    color: var(--abhinav-ink);
    overflow: hidden;
    box-shadow: 0 10px 34px rgba(0,0,0,.2);
    transition: transform .25s ease,box-shadow .25s ease,border-color .25s ease
}

    .abhinav-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,var(--abhinav-gold),var(--abhinav-orange));
        opacity: 0;
        transition: opacity .35s ease;
        z-index: 0; color: #fff;
    }

    .abhinav-card:hover {
        transform: translateY(-7px);
        border-color: var(--abhinav-gold);
        box-shadow: 0 18px 38px rgba(0,0,0,.34)
    }

        .abhinav-card:hover::after {
            opacity: 1
        }

.abhinav-card-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 32px 21px 30px
}

.abhinav-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 21px;
    border: 2px solid var(--abhinav-gold);
    border-radius: 50%;
    color: var(--abhinav-navy);
    font-size: 30px;
    font-weight: 800;
    transition: color .25s,border-color .25s,background .25s
}

    .abhinav-icon svg {
        width: 37px;
        height: 37px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.abhinav-card h2 {
    margin: 0 0 14px;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif"Times New Roman",serif;
    font-size: 21px;
    line-height: 1.25;
    color: var(--abhinav-navy);
    transition: color .25s
}

.abhinav-card p {
    margin: 0;
    color: #4b5360;
    font-size: 14px;
    line-height: 1.7;
    transition: color .25s
}

.abhinav-card:hover h2, .abhinav-card:hover p, .abhinav-card:hover .abhinav-icon {
    color: var(--abhinav-navy);
    border-color: var(--abhinav-navy)
}

.abhinav-card-mark {
    position: absolute;
    right: -10px;
    bottom: -30px;
    z-index: 0;
    font-size: 110px;
    line-height: 1;
    color: rgba(1, 37, 85,.07);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    transition: opacity .2s
}

.abhinav-card:hover .abhinav-card-mark {
    opacity: .25
}

.abhinav-footer-note {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 42px;
    color: #fff;
    font-size: 14px
}

    .abhinav-footer-note::before {
        content: "";
        width: 42px;
        height: 2px;
        background: var(--abhinav-gold); color: #fff;
    }

    .abhinav-footer-note span {
        color: var(--abhinav-gold);
        font-weight: 700
    }

@media(max-width:900px) {
    .abhinav-intro {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 45px
    }

    .abhinav-headline {
        padding-right: 0
    }

    .abhinav-intro-copy {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(250,151,30,.55);
        padding-top: 20px
    }

    .abhinav-cards {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:560px) {
    .abhinav-agenda {
        padding: 58px 18px
    }

    .abhinav-headline h1 {
        font-size: 30px
    }

    .abhinav-cards {
        grid-template-columns: 1fr
    }

    .abhinav-card {
        min-height: 240px
    }

    .abhinav-desktop-break {
        display: none
    }
}

/*========================================
Campus Life + Admission CTA
========================================*/
/* ============================================================
   Abhinav Mahavidyalaya — Campus Life + Admission CTA
   Namespace: .abm-cl-*  (campus life)   .abm-adm-*  (admission)
   NO global selectors (no *, html, body, or bare tags).
   Every reset is wrapped in :where() => zero specificity.
   ============================================================ */
/* ---- zero-specificity resets, scoped to our root only ---- */
:where(.abm-root) {
    box-sizing: border-box;
}

:where(.abm-root *, .abm-root *::before, .abm-root *::after) {
    box-sizing: border-box;
}

:where(.abm-root h2, .abm-root h3, .abm-root p, .abm-root ul, .abm-root li, .abm-root figure) {
    margin: 0;
    padding: 0;
}

:where(.abm-root ul) {
    list-style: none;
}

:where(.abm-root a) {
    text-decoration: none;
    color: inherit;
}

:where(.abm-root img) {
    max-width: 100%;
    display: block;
}

:where(.abm-root button) {
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* ---- brand tokens ---- */
.abm-root {
    --abm-navy: #012555;
    --abm-navy2: #023878;
    --abm-dark: #011736;
    --abm-gold: #FA971E;
    --abm-gold2: #FBAC4B;
    --abm-cream: #FFF9EC;
    --abm-green: #19733A;
    --abm-orange: #FA971E;
    --abm-red: #E52B20;
    --abm-ink: #231F20;
    --abm-alt: #EEF1F6;
    --abm-serif: "Plus Jakarta Sans", system-ui, sans-serif;
    --abm-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-family: var(--abm-sans);
    font-size: 17px;
    line-height: 1.75;
    color: #4b5563;
    -webkit-font-smoothing: antialiased;
}

/* ---- shared button (design system §3.1) ---- */
.abm-btn {
    position: relative;
    z-index: 2;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--abm-sans);
    font-size: 16px;
    font-weight: 700;
    padding: 15px 34px;
    border: 1px solid transparent;
    background-color: var(--abm-gold);
    color: #fff;
    transition: 0.5s;
}

    .abm-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 0;
        height: 100%;
        background: var(--abm-navy);
        transition: 0.7s;
    }

    .abm-btn:hover {
        color: #ffffff;
        border-color: var(--abm-navy);
    }

        .abm-btn:hover::before {
            width: 100%;
        }

    .abm-btn .abm-btn-icon {
        transition: 0.4s;
        display: inline-flex;
    }

    .abm-btn:hover .abm-btn-icon {
        transform: translateX(6px);
    }

    .abm-btn .abm-btn-icon svg {
        fill: currentColor;
        width: 16px;
        height: 16px;
    }

/* ---- scroll reveal cues (design system §3.10) ---- */
.abm-root [data-abm-cue] {
    opacity: 0;
    transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1);
}

.abm-root [data-abm-cue="fadeUp"] {
    transform: translateY(40px);
}

.abm-root [data-abm-cue="slideInLeft"] {
    transform: translateX(-45px);
}

.abm-root [data-abm-cue="slideInRight"] {
    transform: translateX(45px);
}

.abm-root [data-abm-cue].abm-cue-show {
    opacity: 1;
    transform: none;
}

/* ============================================================
   1) CAMPUS LIFE  —  contained, max-width 1500px
   ============================================================ */
.abm-cl-area {
    background-color: #ffffff;
    padding: 100px 0;
    overflow: hidden;
}

.abm-cl-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 16px;
}

.abm-cl-title {
    max-width: 620px;
    text-align: center;
    margin: -10px auto 48px;
    position: relative;
}

.abm-cl-title-top {
    display: inline-block;
    font-family: var(--abm-sans);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--abm-orange);
    margin-bottom: 12px;
}

.abm-cl-title h2 {
    font-family: var(--abm-serif);
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--abm-navy);
    margin-bottom: 18px;
}

.abm-cl-title-bar {
    width: 78px;
    height: 4px;
    background-color: var(--abm-gold);
    margin: 0 auto 18px; color: #fff;
}

.abm-cl-title p {
    font-size: 17px;
    color: #6b7280;
    line-height: 1.75;
}

/* slider shell */
.abm-cl-slider {
    position: relative;
}

.abm-cl-stage {
    overflow: hidden;
}

.abm-cl-track {
    display: flex;
    will-change: transform;
    transition: transform 1s cubic-bezier(.25,.46,.45,.94);
}

.abm-cl-item {
    flex: 0 0 auto;
    padding: 0 15px;
}

/* card */
.abm-cl-card {
    position: relative;
    background-color: #ffffff;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(1, 37, 85, .08);
    transition: all ease .5s;
}

/* every card image is framed at 460×325 (cards are ~460px wide on desktop; same ratio on smaller screens) */
.abm-cl-card-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 460 / 325;
}

    .abm-cl-card-img a {
        display: block;
        height: 100%;
    }

    .abm-cl-card-img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s cubic-bezier(.4,0,.2,1);
    }

.abm-cl-card:hover .abm-cl-card-img img {
    transform: scale(1.06);
}

.abm-cl-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(1, 23, 54,.55), rgba(1, 23, 54,0) 55%);
    transition: opacity .5s;
}

.abm-cl-content {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 30px;
    background-color: #ffffff;
    padding: 28px 30px 26px;
    border-top: 3px solid var(--abm-gold);
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: all ease .5s;
    box-shadow: 0 18px 40px rgba(1, 23, 54, .18);
}

.abm-cl-tag {
    display: inline-block;
    margin-bottom: 12px;
    font-family: var(--abm-sans);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--abm-orange);
}

.abm-cl-content h3 {
    font-family: var(--abm-serif);
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--abm-navy);
    transition: all ease .4s;
}

.abm-cl-card:hover .abm-cl-content h3 {
    color: var(--abm-navy2);
}

.abm-cl-content h3:hover {
    color: var(--abm-orange);
}

.abm-cl-item.abm-cl-center .abm-cl-content {
    transform: scaleY(1);
}

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

/* nav arrows */
.abm-cl-nav-btn {
    position: absolute;
    top: 50%;
    left: -80px;
    transform: translateY(-50%);
    height: 46px;
    width: 46px;
    border-radius: 100%;
    background-color: #ffffff;
    border: 1px solid #dfe3ec;
    color: var(--abm-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease .4s;
    box-shadow: 0 6px 18px rgba(1, 37, 85,.08);
    z-index: 3;
}

.abm-cl-nav-next {
    left: auto;
    right: -80px;
}

.abm-cl-nav-btn svg {
    fill: currentColor;
    width: 20px;
    height: 20px;
}

.abm-cl-nav-btn:hover {
    background-color: var(--abm-gold);
    border-color: var(--abm-gold);
    color: #fff;
}

/* ============================================================
   2) ADMISSION CTA  —  FULL WIDTH
   ============================================================ */
.abm-adm-area {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 110px 0;
    /* NOTE: plain CSS cannot expand Razor's "~/". In .cshtml keep this rule but set the
     image from the markup instead:  style="background-image:url('@Url.Content("~/Images/HomePage/admission-3.jpg")')"
     (or use /Images/HomePage/admission-3.jpg here if the app runs at the site root). */
    background-image: url(/Images/HomePage/admission-3.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .abm-adm-area::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(1, 23, 54,.92) 0%, rgba(1, 37, 85,.80) 55%, rgba(1, 37, 85,.68) 100%);
    }

    .abm-adm-area::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 6px;
        background-color: var(--abm-gold); color: #fff;
    }

.abm-adm-container {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 16px;
}

.abm-adm-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -15px;
}

.abm-adm-col {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 15px;
}

.abm-adm-left {
    position: relative;
}

.abm-adm-left-top {
    display: inline-block;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--abm-gold);
    margin-bottom: 14px;
}

.abm-adm-left h2 {
    font-family: var(--abm-serif);
    font-size: 44px;
    line-height: 1.18;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 18px;
}

.abm-adm-left p {
    color: #d6dcea;
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 32px;
    max-width: 560px;
}

.abm-adm-right {
    position: relative;
    text-align: right;
}

.abm-adm-right-list {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    min-height: 80px;
}

.abm-adm-watch {
    padding-right: 100px;
    color: #ffffff;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: .02em;
}

.abm-adm-watch-sub {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--abm-gold);
}

.abm-adm-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    height: 66px;
    width: 66px;
}

    .abm-adm-icon a {
        height: 66px;
        width: 66px;
        border-radius: 100%;
        background-color: #ffffff;
        color: var(--abm-navy);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all ease .5s;
    }

        .abm-adm-icon a svg {
            fill: currentColor;
            width: 26px;
            height: 26px;
            margin-left: 3px;
        }

        .abm-adm-icon a:hover {
            background-color: var(--abm-gold);
            color: #fff;
        }

    .abm-adm-icon::before {
        content: '';
        position: absolute;
        height: 78px;
        width: 78px;
        border-radius: 100%;
        left: -6px;
        top: -6px;
        background-color: rgba(250,151,30,.22);
        animation: abm-adm-ripple 4s linear infinite;
        z-index: -1;
    }

    .abm-adm-icon::after {
        content: '';
        position: absolute;
        height: 90px;
        width: 90px;
        border-radius: 100%;
        left: -12px;
        top: -12px;
        background-color: rgba(250,151,30,.14);
        animation: abm-adm-ripple 3s linear infinite;
        z-index: -1;
    }

@keyframes abm-adm-ripple {
    0% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.75);
        opacity: .6;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ---- responsive ---- */
@media only screen and (max-width: 1400px) {
    .abm-cl-nav-btn {
        left: -20px;
    }

    .abm-cl-nav-next {
        right: -20px;
        left: auto;
    }
}

@media only screen and (max-width: 1280px) {
    .abm-cl-nav-btn {
        left: 6px;
    }

    .abm-cl-nav-next {
        right: 6px;
        left: auto;
    }
}

@media only screen and (max-width: 1024px) {
    .abm-cl-area {
        padding: 80px 0;
    }

    .abm-adm-area {
        padding: 90px 0;
    }

    .abm-cl-title h2, .abm-adm-left h2 {
        font-size: 34px;
    }
}

@media only screen and (max-width: 767px) {
    .abm-cl-area {
        padding: 64px 0;
    }

    .abm-adm-area {
        padding: 70px 0;
    }

    .abm-cl-title h2, .abm-adm-left h2 {
        font-size: 28px;
    }

    .abm-cl-title {
        margin-bottom: 36px;
    }

    .abm-cl-content {
        left: 18px;
        right: 18px;
        bottom: 18px;
        padding: 20px 20px 18px;
    }

        .abm-cl-content h3 {
            font-size: 20px;
        }

    .abm-adm-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .abm-adm-right {
        text-align: left;
        margin-top: 44px;
    }

    .abm-adm-right-list {
        justify-content: flex-start;
    }

    .abm-adm-watch {
        padding-right: 0;
        padding-left: 86px;
    }

    .abm-adm-icon {
        right: auto;
        left: 0;
    }
}


/*================================
Programms/Courses
================================*/
:where(.abm-page) {
    --abm-navy: #012555;
    --abm-dark: #011736;
    --abm-gold: #FA971E;
    --abm-pink: #d71958;
    --abm-ink: #231f20;
    --abm-muted: #69778e;
    --abm-line: #dfe4ea;
    --abm-soft: #f7f8fa;
    color: var(--abm-ink);
    font-family: "Plus Jakarta Sans", "Noto Sans Devanagari", system-ui, sans-serif;
    background: #fff;
    min-height: 100vh
}

.abm-shell {
    max-width: 1500px;
    margin: auto;
    padding: 0 36px
}

.abm-events {
    position: relative;
    padding: 68px 0 118px;
    overflow: hidden
}

    .abm-events:before {
        content: "";
        position: absolute;
        left: 0;
        top: 36px;
        width: 155px;
        height: 300px;
        opacity: .6;
        background-image: radial-gradient(#d7dce1 2px,transparent 2px);
        background-size: 29px 29px
    }

.abm-events-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    margin-bottom: 42px
}

.abm-eyebrow {
    margin: 0 0 13px;
    color: var(--abm-pink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .25em;
    text-transform: uppercase
}

    .abm-eyebrow:before {
        content: "";
        display: inline-block;
        width: 34px;
        height: 2px;
        background: var(--abm-gold);
        vertical-align: middle;
        margin: 0 12px 3px 0; color: #fff;
    }

.abm-events-heading h1 {
    margin: 0;
    color: var(--abm-navy);
    font-weight: 700; font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    letter-spacing: -1px
}

.abm-explore {
    border: 1px solid var(--abm-line);
    padding: 15px 22px;
    color: var(--abm-navy);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600
}

    .abm-explore:hover {
        border-color: var(--abm-gold);
        background: #fff9ec
    }

.abm-event {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    padding: 0 0 44px;
    margin-bottom: 44px;
    border-bottom: 1px solid var(--abm-line);
    align-items: center
}

    .abm-event:nth-child(even) .abm-event-media {
        order: 2
    }

    .abm-event:nth-child(even) .abm-event-copy {
        order: 1
    }

.abm-event-media {
    position: relative;
    height: 260px;
    overflow: hidden;
    background: #e9edf2
}

    .abm-event-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(.77);
        transition: transform .5s ease
    }

.abm-event:hover .abm-event-media img {
    transform: scale(1.045)
}

.abm-event-number {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 58px;
    height: 59px;
    background: var(--abm-pink);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 23px;
    font-weight: 700
}

    .abm-event-number small {
        display: block;
        margin-top: -20px;
        font: 600 9px "Plus Jakarta Sans", "Noto Sans Devanagari", system-ui, sans-serif;
        letter-spacing: .13em
    }

.abm-event-copy {
    padding: 3px 0
}

.abm-event-kicker {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--abm-pink);
    font-family: "Plus Jakarta Sans", "Noto Sans Devanagari", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700
}

.abm-event-copy h2 {
    margin: 0 0 13px;
    color: var(--abm-navy);
    font-weight: 700; font-family: "Plus Jakarta Sans", system-ui, sans-serif
}

.abm-event-copy p {
    margin: 0;
    color: var(--abm-muted);
    font: 400 15px/1.8 "Plus Jakarta Sans", "Noto Sans Devanagari", system-ui, sans-serif
}

.abm-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 19px 0 0;
    padding: 0;
    list-style: none
}

    .abm-points li {
        padding: 6px 12px;
        background: #fff9ec;
        color: var(--abm-navy);
        font: 600 12px "Plus Jakarta Sans", "Noto Sans Devanagari", system-ui, sans-serif;
        border-left: 3px solid var(--abm-gold)
    }

.abm-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 22px;
    margin-top: 19px;
    color: #3e4653;
    font-size: 12px;
    font-weight: 600
}

    .abm-meta span:before {
        color: var(--abm-pink);
        margin-right: 7px
    }

.abm-location:before {
    content: "●"
}

.abm-session:before {
    content: "▣"
}

.abm-details {
    display: inline-flex;
    margin-top: 22px;
    border: 1px solid var(--abm-line);
    padding: 13px 21px;
    color: var(--abm-navy);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: .5s;
    position: relative;
    overflow: hidden
}

    .abm-details:after {
        content: "→";
        font-size: 19px;
        margin-left: 16px;
        line-height: 12px;
        transition: .4s
    }

    .abm-details:hover {
        background: var(--abm-gold);
        border-color: var(--abm-gold); color: #fff;
    }

        .abm-details:hover:after {
            transform: translateX(6px)
        }

.abm-notice {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--abm-dark);
    padding: 24px 29px;
    color: #fff;
    font-family: "Plus Jakarta Sans", "Noto Sans Devanagari", system-ui, sans-serif
}

    .abm-notice strong {
        color: var(--abm-gold);
        font-size: 18px
    }

    .abm-notice span {
        font-size: 13px;
        line-height: 1.7
    }

.abm-contact {
    color: var(--abm-gold);
    font-family: "Plus Jakarta Sans", "Noto Sans Devanagari", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap
}

@media(max-width:1100px) {
    .abm-shell {
        padding: 0 24px
    }
}

@media(max-width:760px) {
    .abm-events {
        padding: 48px 0 75px
    }

    .abm-events-heading {
        align-items: start;
        flex-direction: column;
        gap: 22px
    }

    .abm-event, .abm-event:nth-child(even) {
        display: flex;
        flex-direction: column;
        gap: 26px;
        align-items: stretch;
        padding-bottom: 34px;
        margin-bottom: 34px
    }

        .abm-event:nth-child(even) .abm-event-media, .abm-event:nth-child(even) .abm-event-copy {
            order: initial
        }

    .abm-event-media {
        height: 230px
    }

    .abm-event-copy {
        padding: 0
    }

    .abm-notice {
        align-items: flex-start;
        flex-direction: column
    }

    .abm-contact {
        white-space: normal
    }
}

@media(max-width:420px) {
    .abm-shell {
        padding: 0 18px
    }

    .abm-brand-name {
        font-size: 18px
    }

    .abm-brand-sub {
        font-size: 7px
    }

    .abm-event-copy h2 {
        font-size: 28px
    }

    .abm-event-media {
        height: 195px
    }
}


/*
====================================================
Student feedback and Upcoming Event
====================================================*/

/* ===================================================================
     ABM DESIGN SYSTEM TOKENS  (per finaldesign.md — Abhinav Mahavidyalaya)
     Scoped directly to this module's own section classes (.abm-feedback /
     .abm-events) — no wrapper root class, no *, body, html or bare tag
     selectors anywhere.
  =================================================================== */
:where(.abm-feedback, .abm-events) {
    --abm-navy: #012555;
    --abm-navy2: #023878;
    --abm-dark: #011736;
    --abm-gold: #FA971E;
    --abm-gold2: #FBAC4B;
    --abm-cream: #FFF9EC;
    --abm-green: #19733A;
    --abm-orange: #FA971E;
    --abm-red: #E52B20;
    --abm-ink: #231F20;
    --abm-font-serif: "Plus Jakarta Sans", system-ui, sans-serif;
    --abm-font-sans: 'Plus Jakarta Sans', -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
    display: block;
    font-family: var(--abm-font-sans);
    color: #4b5563;
}

:where(.abm-feedback *, .abm-events *) {
    box-sizing: border-box;
}

:where(.abm-feedback h1, .abm-feedback h2, .abm-feedback h3, .abm-feedback h4, .abm-feedback h5, .abm-events h1, .abm-events h2, .abm-events h3, .abm-events h4, .abm-events h5) {
    font-family: var(--abm-font-serif);
    color: var(--abm-navy);
    margin: 0;
}

:where(.abm-feedback p, .abm-events p) {
    margin: 0;
}

:where(.abm-feedback a, .abm-events a) {
    text-decoration: none;
    color: inherit;
}

:where(.abm-feedback ul, .abm-events ul) {
    list-style: none;
    margin: 0;
    padding: 0;
}

:where(.abm-feedback button, .abm-events button) {
    font-family: inherit;
    cursor: pointer;
    background: none;
    border: none;
}

:where(.abm-feedback img, .abm-events img) {
    max-width: 100%;
    display: block;
}

.abm-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width:640px) {
    .abm-container {
        padding: 0 18px;
    }
}

/* ---------- section heading block ---------- */
.abm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--abm-font-sans);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--abm-orange);
    margin-bottom: 14px;
}

    .abm-eyebrow::before {
        content: '';
        width: 28px;
        height: 2px;
        background: var(--abm-orange);
        display: inline-block; color: #fff;
    }

.abm-title-light {
    color: #fff;
}

.abm-title {
    font-size: clamp(28px,3.6vw,42px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
}

.abm-desc {
    font-size: 16.5px;
    line-height: 1.8;
    max-width: 460px;
}

/* ---------- shared abm-btn (per finaldesign.md §3.1) ---------- */
.abm-btn {
    position: relative;
    z-index: 2;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15.5px;
    transition: .5s;
    white-space: nowrap;
}

    .abm-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 0;
        height: 100%;
        transition: .7s;
    }

    .abm-btn .abm-btn-icon {
        transition: .4s;
        display: inline-flex;
    }

    .abm-btn:hover .abm-btn-icon {
        transform: translateX(6px);
    }

.abm-btn-gold {
    background: var(--abm-gold);
    color: #fff;
}

    .abm-btn-gold::before {
        background: var(--abm-navy);
    }

    .abm-btn-gold:hover {
        color: #fff;
        border-color: var(--abm-navy);
    }

        .abm-btn-gold:hover::before {
            width: 100%;
        }

/* ---------- scroll reveal cue (per finaldesign.md §3.10) ---------- */
[data-abm-cue] {
    opacity: 0;
    transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1);
}

[data-abm-cue="fadeUp"] {
    transform: translateY(36px);
}

[data-abm-cue="slideInLeft"] {
    transform: translateX(-40px);
}

[data-abm-cue="slideInRight"] {
    transform: translateX(40px);
}

[data-abm-cue].abm-cue-show {
    opacity: 1;
    transform: translate(0,0);
}

/* ===================================================================
     STUDENT FEEDBACK SECTION  (flat brand bg, infinite-loop + arrow nav)
  =================================================================== */
.abm-feedback {
    position: relative;
    background: var(--abm-navy);
    padding: 110px 0;
    overflow: hidden;
}

.abm-feedback-grid {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
}

@media (max-width:900px) {
    .abm-feedback-grid {
        grid-template-columns: 1fr;
    }
}

.abm-feedback-left .abm-title {
    text-transform: uppercase;
    letter-spacing: .01em;
    margin-bottom: 22px;
}

.abm-feedback-left p {
    color: rgba(255,255,255,.75);
    font-size: 16px;
    line-height: 1.8;
    max-width: 400px;
    margin-bottom: 40px;
}

.abm-feedback-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.abm-fb-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s ease;
    background: transparent;
    flex-shrink: 0;
}

    .abm-fb-btn:hover {
        background: var(--abm-gold);
        border-color: var(--abm-gold);
        color: #fff;
    }

    .abm-fb-btn svg {
        width: 19px;
        height: 19px;
    }

/* --- infinite marquee viewport --- */
.abm-marquee {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.abm-marquee-track {
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
}

.abm-card {
    flex: 0 0 auto;
    width: min(430px, 86vw);
    background: #fff;
    border-radius: 10px;
    padding: 38px 36px 32px;
}

.abm-stars {
    display: flex;
    gap: 4px;
    color: var(--abm-navy);
    margin-bottom: 20px;
}

    .abm-stars svg {
        width: 16px;
        height: 16px;
    }

.abm-quote {
    font-size: 16px;
    line-height: 1.85;
    color: #3b3f4a;
    margin-bottom: 30px;
    min-height: 110px;
}

    .abm-quote strong {
        color: var(--abm-navy);
    }

.abm-author {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.abm-author-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .abm-author-meta img {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        object-fit: cover;
    }

    .abm-author-meta h5 {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 3px;
        color: var(--abm-ink);
    }

    .abm-author-meta span {
        font-size: 13px;
        color: #8a8f98;
        font-weight: 500;
    }

.abm-quote-mark {
    width: 40px;
    height: 40px;
    color: var(--abm-navy);
    flex-shrink: 0;
    opacity: .18;
}

/* ===================================================================
     UPCOMING EVENT SECTION
  =================================================================== */
.abm-events {
    padding: 100px 0;
    background: #EEF1F6;
}

.abm-events-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 26px;
    margin-bottom: 54px;
}

.abm-title-dark {
    color: var(--abm-navy);
}

.abm-event-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 34px;
}

@media (max-width:980px) {
    .abm-event-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:680px) {
    .abm-event-grid {
        grid-template-columns: 1fr;
    }
}

.abm-event-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(1, 37, 85,.07);
    transition: transform .35s ease, box-shadow .35s ease;
}

    .abm-event-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 48px rgba(1, 37, 85,.16);
    }

.abm-event-thumb {
    position: relative;
    height: 230px;
    overflow: hidden;
}

    .abm-event-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s ease;
    }

.abm-event-card:hover .abm-event-thumb img {
    transform: scale(1.08);
}

.abm-event-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--abm-gold);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 7px 14px;
    border-radius: 999px;
}

.abm-event-body {
    padding: 26px 26px 28px;
}

.abm-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--abm-navy2);
    margin-bottom: 14px;
}

    .abm-event-meta span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .abm-event-meta svg {
        width: 15px;
        height: 15px;
        color: var(--abm-orange);
    }

.abm-event-title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.5;
    margin-bottom: 22px;
    min-height: 86px;
}

    .abm-event-title a:hover {
        color: var(--abm-orange);
    }

.abm-round-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #dfe3ec;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--abm-navy);
    transition: .3s ease;
}

    .abm-round-btn svg {
        width: 16px;
        height: 16px;
    }

    .abm-round-btn:hover {
        background: var(--abm-navy);
        border-color: var(--abm-navy);
        color: var(--abm-gold);
    }


/*
    ====================================
    why choose us
    ====================================*/


/* ============================================================
   ABM — WHY CHOOSE US section   (prefix: wcu-)
   Follows finaldesign.md : navy+gold palette, gold CTA mechanics,
   data-wcu-cue entrances, scoped CSS only (no global selectors).
   ============================================================ */

/* --- scoped zero-specificity resets (leaks nothing outside the section) --- */
:where(.wcu-section, .wcu-section *) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- design tokens + base text (all on the section class itself) --- */
.wcu-section {
    --brand-navy: #012555;
    --brand-navy2: #023878;
    --brand-dark: #011736;
    --brand-gold: #FA971E;
    --brand-gold2: #FBAC4B;
    --brand-cream: #FFF9EC;
    --brand-green: #19733A;
    --brand-orange: #FA971E;
    --brand-red: #E52B20;
    --brand-ink: #231F20;
    --wcu-gray-700: #374151;
    --serif: "Plus Jakarta Sans", system-ui, sans-serif;
    --sans: "Plus Jakarta Sans","Segoe UI",sans-serif;
    --subtitle-font: "Plus Jakarta Sans", system-ui, sans-serif;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.625;
    color: var(--wcu-gray-700);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   SECTION FRAME
   ============================================================ */
.wcu-section {
    position: relative;
    overflow: hidden;
    min-height: 700px; /* requested section height */
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical centering of collage + content */
}

.wcu-container {
    /* design system: max-w-[1500px] mx-auto px-4  (§4) */
    max-width: 1500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    z-index: 2;
}

.wcu-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: -12px;
    margin-right: -12px;
}

.wcu-col-media,
.wcu-col-content {
    flex: 0 0 auto;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
}
/* content stays on the RIGHT from lg upwards */
@media (min-width:992px) {
    .wcu-col-media,
    .wcu-col-content {
        width: 50%;
    }
}

@media (max-width:991.98px) {
    .wcu-row {
        row-gap: 60px;
    }
}

/* ============================================================
   SHAPES (template decorations, animated)
   ============================================================ */
.wcu-shape {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.wcu-shape-right {
    right: 3%;
    top: 2%;
}

.wcu-shape-left {
    left: 2%;
    bottom: 0;
    z-index: 3; /* sit above the image collage (.wcu-container is z-index 2) */
}

.wcu-anim-jump {
    animation: wcu-jump-reverse 7s linear infinite;
}

.wcu-anim-move-x {
    animation: wcu-moving-x 8s linear infinite;
}

@keyframes wcu-jump-reverse {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(30px)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes wcu-moving-x {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(50px)
    }

    100% {
        transform: translateX(0)
    }
}

@media (max-width:1399.98px) {
    .wcu-shape-left {
        display: none;
    }
}

@media (max-width:1199.98px) {
    .wcu-shape-right {
        display: none;
    }
}

/* ============================================================
   LEFT — IMAGE COLLAGE
   ============================================================ */
.wcu-collage {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    z-index: 2;
}

    .wcu-collage img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

.wcu-media-main {
    position: relative;
    flex: 0 0 300px;
    max-width: 300px;
}

.wcu-media-stack {
    flex: 1 1 auto;
    max-width: 300px;
}

    .wcu-media-stack > div:first-child {
        margin-bottom: 25px;
    }

/* images shrink proportionally between lg and xxl so both fit in half width */
@media (min-width:992px) and (max-width:1399.98px) {
    .wcu-media-main {
        flex: 0 1 300px;
        max-width: 44%;
    }

    .wcu-media-stack {
        max-width: 48%;
    }
}

@media (max-width:991.98px) {
    .wcu-collage {
        justify-content: center;
        max-width: 640px;
        margin: 0 auto;
    }
}

@media (max-width:767.98px) {
    .wcu-collage {
        flex-direction: column;
        gap: 15px;
        max-width: 440px;
    }

    .wcu-media-main {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    .wcu-media-stack {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================================
   ROTATING CIRCULAR BADGE  (inline — next to the CTA, off the images)
   ============================================================ */
.wcu-badge {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    flex: 0 0 auto;
    transform: scale(.8); /* compact stamp next to the button */
    transform-origin: center;
    margin: -28px 0; /* keep the row compact after scaling */
}

.wcu-badge-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: var(--brand-navy); /* navy disc */
    border: 3px solid var(--brand-gold); /* gold ring */
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.wcu-badge-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    color: var(--brand-navy);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    animation: wcu-spin 14s linear infinite;
}

@keyframes wcu-spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}
/* each letter is a thin sliver whose bottom-center sits EXACTLY on the
   circle center, so the letters form a mathematically perfect ring */
.wcu-ring-text {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

    .wcu-ring-text .wcu-char {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 20px;
        height: 68px; /* ring radius */
        margin-left: -10px;
        margin-top: -68px; /* bottom-center = circle center */
        text-align: center;
        text-transform: uppercase;
        transform-origin: bottom center;
        transform: rotate(calc(var(--rotate-letter) * var(--char-index)));
    }

/* ============================================================
   RIGHT — CONTENT
   ============================================================ */
@media (min-width:1400px) {
    .wcu-content {
        margin-left: 1.5rem;
        padding-left: .5rem;
    }
}

@media (min-width:1200px) and (max-width:1399.98px) {
    .wcu-content {
        margin-left: .5rem;
    }
}

@media (max-width:991.98px) {
    .wcu-content {
        max-width: 760px;
        margin: 0 auto;
    }
}

.wcu-subtitle {
    display: inline-flex;
    align-items: center;
    font-family: var(--subtitle-font);
    font-size: 17px;
    font-weight: 700;
    color: var(--brand-navy); /* navy text */
    text-transform: uppercase;
    letter-spacing: .12em;
    line-height: 24px;
    margin-bottom: 18px;
    position: relative;
    padding-left: 52px;
}

    .wcu-subtitle::before { /* gold accent bar */
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 36px;
        height: 3px;
        background: var(--brand-gold);
        transform: translateY(-50%);
        border-radius: 2px; color: #fff;
    }

.wcu-title {
    font-family: var(--serif);
    color: var(--brand-navy); /* navy headings */
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: .4px;
}

.wcu-text {
    font-size: 17px;
    margin-top: 22px;
}

/* gold icon squares on light surface */
.wcu-features {
    margin-top: 38px;
}

.wcu-feature {
    display: flex;
    gap: 24px;
    align-items: center;
}

    .wcu-feature + .wcu-feature {
        margin-top: 38px;
    }

.wcu-feature-icon {
    position: relative;
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    background: var(--brand-gold); /* gold square */
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center; color: #fff;
}

    .wcu-feature-icon::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--brand-navy);
        transform: scale(0);
        transform-origin: center;
        transition: all .5s cubic-bezier(.62,.21,.45,1.52);
    }

    .wcu-feature-icon svg {
        position: relative;
        z-index: 1;
        transition: .4s ease-in-out;
        fill: #fff;
    }

.wcu-feature:hover .wcu-feature-icon::before {
    transform: scale(1);
}

.wcu-feature:hover .wcu-feature-icon svg {
    transform: rotateY(180deg);
    fill: var(--brand-gold); /* icon turns gold on navy */
}

.wcu-feature-title {
    font-family: var(--serif);
    color: var(--brand-navy);
    font-weight: 700;
    font-size: 23px;
    line-height: 1.5;
    letter-spacing: .02em;
    margin-bottom: 4px;
}

.wcu-feature-text {
    font-size: 16px;
    line-height: 1.75;
}

@media (max-width:575.98px) {
    .wcu-feature {
        display: block;
    }

    .wcu-feature-icon {
        margin-bottom: 18px;
    }

    .wcu-title {
        font-size: 33px;
        line-height: 43px;
    }

    .wcu-section {
        padding-top: 60px;
        padding-bottom: 70px;
    }
}

/* ============================================================
   BUTTON — gold primary CTA — fill-from-left hover mechanics, gold primary variant
   ============================================================ */
.wcu-btns {
    margin-top: 48px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

@media (max-width:575.98px) {
    .wcu-btns {
        gap: 20px;
    }
}

.wcu-btn {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border: 1px solid transparent;
    transition: color .5s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--brand-gold); /* primary CTA: orange bg */
    color: #fff; /* white text on orange */
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

    .wcu-btn::before { /* navy fill grows from the LEFT */
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 0;
        height: 100%;
        background: var(--brand-navy);
        transition: .7s;
    }

    .wcu-btn:hover {
        color: #fff;
        border-color: var(--brand-navy);
    }

        .wcu-btn:hover::before {
            width: 100%;
        }

    .wcu-btn .wcu-btn-icon {
        width: 22px;
        height: 22px;
        transition: .4s;
    }

    .wcu-btn:hover .wcu-btn-icon {
        transform: translateX(6px);
    }
/* arrow slides */

/* ============================================================
   SCROLL ENTRANCES — data-wcu-cue
   ============================================================ */
.wcu-section [data-wcu-cue] {
    opacity: 0;
    transition: transform .8s cubic-bezier(.4,0,.2,1), opacity .8s cubic-bezier(.4,0,.2,1);
    will-change: transform,opacity;
}

.wcu-section [data-wcu-cue="fadeUp"] {
    transform: translateY(40px);
}

.wcu-section [data-wcu-cue="slideInLeft"] {
    transform: translateX(-50px);
}

.wcu-section [data-wcu-cue="slideInRight"] {
    transform: translateX(50px);
}

.wcu-section [data-wcu-cue].wcu-cue-show {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion:reduce) {
    .wcu-section [data-wcu-cue] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .wcu-badge-ring, .wcu-anim-jump, .wcu-anim-move-x {
        animation: none;
    }
}

</style >
<noscript >
<style >
/* static previews (scripts blocked): show everything */
.wcu-section [data-wcu-cue] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.wcu-ring-text {
    display: none !important;
}