/* ==========================================================================
   Study — Unified Theme Layer  (theme.css)
   --------------------------------------------------------------------------
   A single design-system stylesheet that sits ON TOP of the legacy GT3/
   WordPress + Bootstrap CSS and harmonises every page into one consistent,
   modern look & feel. It targets the shared class names already used across
   all pages (gt3-page-title, card, gt3_icon_box, btn, table, main_footer ...)
   so the whole site is uplifted without touching individual page markup.

   Loaded LAST in the document (see _Host.cshtml) so it wins the cascade.
   Brand colour: #314797 (royal blue) + saffron-gold accent.
   ========================================================================== */

:root {
    /* Brand */
    --nv-primary: #314797;
    --nv-primary-700: #293c80;
    --nv-primary-900: #1d2b5c;
    --nv-primary-300: #5a6fc4;
    --nv-primary-050: #eef1fb;
    /* Accent (saffron / gold — matches logo + page titles) */
    --nv-accent: #f5a623;
    --nv-accent-600: #e08e10;
    --nv-accent-soft: #fff4de;
    --nv-saffron: #ff7a18;
    /* Neutrals */
    --nv-ink: #1f2a44;
    --nv-body: #55617a;
    --nv-muted: #8b93a7;
    --nv-line: #e7eaf3;
    --nv-bg: #ffffff;
    --nv-bg-soft: #f5f7fc;
    --nv-bg-soft-2: #eaeefb;
    /* Status */
    --nv-success: #2e9e5b;
    --nv-danger: #e2574c;
    /* Shape & motion */
    --nv-radius-lg: 18px;
    --nv-radius: 14px;
    --nv-radius-sm: 10px;
    --nv-shadow-sm: 0 4px 16px rgba(24,39,75,.06);
    --nv-shadow: 0 14px 40px rgba(24,39,75,.10);
    --nv-shadow-lg: 0 26px 60px rgba(24,39,75,.18);
    --nv-trans: all .28s cubic-bezier(.4,0,.2,1);
    --nv-hero: linear-gradient(135deg,#3a52ab 0%,#314797 46%,#222f5e 100%);
    /* Type */
    --nv-head: 'Poppins','Montserrat','Segoe UI',sans-serif;
    --nv-text: 'Mukta','Lato','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* ==========================================================================
   1. Base
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--nv-text);
    font-size: 16px;
    line-height: 1.72;
    font-weight: 400;
    color: var(--nv-body);
    background: var(--nv-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden; /* tame the leftover broken full-width VC rows */
}

img {
    max-width: 100%;
}

a {
    transition: color .2s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--nv-head);
    color: var(--nv-ink);
    font-weight: 700;
    letter-spacing: -.01em;
}

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

/* Slim, branded scrollbar (supported browsers) */
* {
    scrollbar-color: var(--nv-primary-300) transparent;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-thumb {
    background: #c2cae6;
    border-radius: 8px;
    border: 3px solid #fff;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--nv-primary-300);
    }

/* Neutralise leftover JS-baked "full width" offsets that cause sideways scroll */
[data-vc-full-width="true"] {
    left: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* A soft entrance for page bodies */
@keyframes nvFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.site_wrapper.fadeOnLoad {
    animation: nvFadeUp .5s ease both;
}

/* ==========================================================================
   2. Page-title hero  (.gt3-page-title) — branded banner on every inner page
   --------------------------------------------------------------------------
   Header is position:absolute overlaying the top, so the hero owns the top
   of the page and pads itself down to clear the floating nav.
   ========================================================================== */
.gt3-page-title {
    display: block !important;
    position: relative;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 150px 0 52px !important;
    background: var(--nv-hero) !important;
    color: #fff !important;
    text-align: left !important;
    overflow: hidden;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}
    /* decorative saffron glow + soft grid */
    .gt3-page-title::before {
        content: "";
        position: absolute;
        top: -40%;
        right: -10%;
        width: 60vw;
        height: 160%;
        background: radial-gradient(closest-side, rgba(245,166,35,.30), rgba(245,166,35,0) 70%);
        pointer-events: none;
    }

    .gt3-page-title::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
        background-size: 22px 22px;
        opacity: .5;
        pointer-events: none;
    }

    .gt3-page-title .gt3-page-title__inner {
        display: block !important;
    }

    /* Legacy GT3 sets display:table-cell here (it used a table for vertical centring).
       Margins do not apply to table cells, so this container ignored `margin: 0 auto` and hugged
       the left edge of the viewport (0..1170) while every other .container on the page centred
       (368..1538) — which is why the hero title never lined up with the content beneath it. */
    .gt3-page-title .container {
        position: relative;
        z-index: 2;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Title + breadcrumb share one left edge, flush with the page content below. */
    .gt3-page-title .gt3-page-title__content {
        display: block !important;
        float: none !important;
        width: 100% !important;
        text-align: left !important;
    }
    /* Force title + breadcrumb to STACK regardless of GT3's own alignment modifier class
   (which is missing/corrupted on some pages and otherwise leaves the title floated left +
   breadcrumb floated right). */
    .gt3-page-title .page_title {
        text-align: left !important;
        float: none !important;
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }

    .gt3-page-title .gt3_breadcrumb,
    .gt3-page-title__content .gt3_breadcrumb {
        text-align: left !important;
        margin-top: 10px !important;
        float: none !important;
        width: 100% !important;
        display: block !important;
    }

    .gt3-page-title .page_title h1,
    .gt3-page-title__content .page_title h1 {
        color: #fff !important;
        font-family: var(--nv-head);
        font-weight: 800 !important;
        font-size: clamp(30px, 4.4vw, 50px) !important;
        line-height: 1.12 !important;
        margin: 0 0 14px !important;
        text-shadow: 0 6px 26px rgba(0,0,0,.18);
    }

    /* breadcrumb pill */
    .gt3-page-title .breadcrumbs,
    .gt3-page-title__content .breadcrumbs {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 8px 18px;
        border-radius: 50px;
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.18);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        font-size: 14px;
        font-weight: 500;
    }

        .gt3-page-title .breadcrumbs a,
        .gt3-page-title__content .gt3_breadcrumb a,
        .gt3-page-title__content .breadcrumbs a {
            color: rgba(255,255,255,.86) !important;
        }

            .gt3-page-title .breadcrumbs a:hover {
                color: var(--nv-accent) !important;
            }

        .gt3-page-title .breadcrumbs .current,
        .gt3-page-title__content .breadcrumbs .current {
            color: var(--nv-accent) !important;
            font-weight: 600;
        }

        .gt3-page-title .breadcrumbs .delimiter,
        .gt3-page-title__content .gt3_breadcrumb .delimiter {
            color: rgba(255,255,255,.5) !important;
        }

/* ==========================================================================
   3. Section rhythm & content width
   ========================================================================== */
.site_wrapper {
    background: var(--nv-bg);
}

/* The legacy theme floors every .site_wrapper at min-height:50vh so a short page cannot
   collapse onto the footer. That assumes one wrapper per page — but the teacher list stacks
   two (dynamic results, then the fixed course promos), so the first claimed half the viewport
   (600px at a 1200px window) while holding only a button: ~460px of dead space before
   "New course launched". Keep the floor on the final wrapper, drop it from any that is
   followed by another. */
.site_wrapper:has(~ .site_wrapper) {
    min-height: 0;
}

.main_wrapper {
    position: relative;
    padding-bottom: 24px;
}

/* keep content readable on huge monitors */
@media (min-width: 1400px) {
    .main_wrapper > .container,
    #main_content > .container,
    .gt3-page-title .container {
        max-width: 1240px;
    }
}

/* Comfortable default copy inside content area */
.main_wrapper p {
    color: var(--nv-body);
}

#main_content {
    padding-top: 18px;
}

/* ==========================================================================
   4. Typography helpers that override page inline colours
   ========================================================================== */
/* Homepage feature blurbs were hard-coded maroon/20px — calm them down */
.feature-detail {
    color: var(--nv-body) !important;
    font-family: var(--nv-text) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-align: left !important;
    line-height: 1.7 !important;
}

.gt3_custom_text {
    font-family: var(--nv-text);
}

/* Generic "Read More" inline links */
.learn_more,
a.learn_more {
    color: var(--nv-primary);
    font-weight: 600;
}

/* ==========================================================================
   5. Cards  (.card) — used by Vision/Mission, teacher lists, etc.
   ========================================================================== */
.card {
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius) !important;
    background: #fff;
    box-shadow: var(--nv-shadow-sm);
    overflow: hidden;
    transition: var(--nv-trans);
}

    .card:hover {
        box-shadow: var(--nv-shadow);
        transform: translateY(-3px);
    }

.card-header {
    background: var(--nv-bg-soft);
    border-bottom: 1px solid var(--nv-line);
    font-family: var(--nv-head);
    font-weight: 700;
    font-size: 1.25rem !important;
    color: var(--nv-ink);
    padding: 16px 22px;
}

.card-body {
    padding: 22px 24px;
}

.card-title {
    font-family: var(--nv-head);
    color: var(--nv-ink);
    font-weight: 700;
}

/* Branded "info" cards (Our Vision / Our Mission panels) */
.card.bg-info,
.card.text-white.bg-info {
    background: linear-gradient(158deg, #3b54ad 0%, #2b3e85 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 18px 46px rgba(40,60,128,.30) !important;
}

    .card.bg-info:hover {
        box-shadow: 0 26px 60px rgba(40,60,128,.38) !important;
    }

    .card.bg-info .card-header {
        background: rgba(255,255,255,.10) !important;
        border-bottom: 1px solid rgba(255,255,255,.16) !important;
        color: #fff !important;
        font-size: 1.35rem !important;
        letter-spacing: .2px;
        position: relative;
        padding-left: 22px;
    }

        .card.bg-info .card-header::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 5px;
            height: 26px;
            border-radius: 0 4px 4px 0;
            background: var(--nv-accent);
        }

    .card.bg-info .card-body,
    .card.bg-info .card-text {
        color: #eef1ff !important;
        font-size: 16px;
        line-height: 1.8;
    }

    /* Mission bullet list → custom gold check markers */
    .card.bg-info ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .card.bg-info li {
        position: relative;
        padding: 0 0 0 32px;
        margin-bottom: 13px;
        line-height: 1.6;
    }

        .card.bg-info li:last-child {
            margin-bottom: 0;
        }

        .card.bg-info li::before {
            content: "\f00c"; /* FontAwesome check (FA4 is loaded) */
            font-family: FontAwesome;
            position: absolute;
            left: 0;
            top: 1px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 11px;
            color: #fff;
            background: rgba(245,166,35,.95);
            border-radius: 50%;
        }

/* ==========================================================================
   6. Feature / icon boxes  (.gt3_icon_box) — home + mission + services
   ========================================================================== */
.gt3_icon_box {
    background: #fff;
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius);
    padding: 26px 26px 24px;
    box-shadow: var(--nv-shadow-sm);
    transition: var(--nv-trans);
    height: 100%;
    box-sizing: border-box;
}

    .gt3_icon_box:hover {
        transform: translateY(-4px);
        box-shadow: var(--nv-shadow);
        border-color: #d6ddf3;
    }

    .gt3_icon_box.gt3_icon_box_icon-position_left {
        display: flex;
        align-items: flex-start;
        gap: 18px;
    }

        .gt3_icon_box.gt3_icon_box_icon-position_left .gt3_icon_box__icon {
            flex: 0 0 auto;
            /* base_composer.css floats this icon; the float must go or it fights the flex line. */
            float: none;
            margin: 0;
        }

        /* The legacy theme (base_composer.css) builds this component as a FLOAT layout:
             .gt3_icon_box_icon-position_left .gt3_icon_box__icon { float: left }
             ...icon_size_regular .gt3_icon_box__icon + .gt3_icon_box-content-wrapper { margin-left: 80px }
           Switching the box to display:flex above left that 80px margin in place, so the text
           column lost 80px of an already narrow card and collapsed to ~90px — two words a line
           beside a mostly empty card. Zero the inherited margin and let the column take the rest
           of the row (basis 0 so grow distributes it; min-width:0 so the min-content floor does
           not push it back out).

           Specificity here matches base_composer's four-class selector, and theme.css is the last
           stylesheet on the page, so it wins on order. */
        .gt3_icon_box.gt3_icon_box_icon-position_left .gt3_icon_box__icon + .gt3_icon_box-content-wrapper {
            flex: 1 1 0;
            min-width: 0;
            margin-left: 0;
        }

        /* base_composer.css adds `content:''; display:table` clearfix pseudo-elements to every
           .gt3_icon_box. In a flex container those become two stray flex items that each pick up
           an 18px gap, stealing 36px from the text column. Harmless to drop: nothing floats here
           any more, so there is nothing left to clear. */
        .gt3_icon_box.gt3_icon_box_icon-position_left::before,
        .gt3_icon_box.gt3_icon_box_icon-position_left::after {
            content: none;
        }

.gt3_icon_box__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 16px;
    background: linear-gradient(150deg, var(--nv-primary-050), #fff);
    box-shadow: inset 0 0 0 1px var(--nv-line);
    margin-bottom: 16px;
}

    .gt3_icon_box__icon img {
        width: 46px;
        height: 46px;
        object-fit: contain;
    }

.gt3_icon_box__title h2,
.gt3_icon_box__title h3,
.gt3_icon_box__title h4 {
    font-family: var(--nv-head) !important;
    font-size: 1.15rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: var(--nv-ink) !important;
    margin: 0 0 8px !important;
}

.gt3_icon_box__text,
.gt3_icon_box__text p {
    color: var(--nv-body) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

/* Center variant (top icon) */
.gt3_icon_box_icon-position_top {
    text-align: center;
}

    .gt3_icon_box_icon-position_top .gt3_icon_box__icon {
        margin-left: auto;
        margin-right: auto;
    }

/* Equal-height feature cards across a row.

   The WPBakery columns are `float: left`, and floated boxes never stretch to match their
   siblings — so the `height: 100%` on .gt3_icon_box above resolved against an auto-height
   ancestor and did nothing. Each card was only as tall as its own text, leaving the short ones
   (Tuition, Video Lession) with ragged bottoms next to the long ones.

   Turn any row that actually contains feature cards into a stretch flex row, then pass that
   height down the column > inner > wrapper chain so the card can finally grow to the tallest in
   its row. Scoped with :has() so every other .vc_row on the site keeps its float layout. */
.vc_row.wpb_row:has(> .wpb_column .gt3_icon_box) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

    .vc_row.wpb_row:has(> .wpb_column .gt3_icon_box) > .wpb_column {
        display: flex;
        float: none;
    }

        .vc_row.wpb_row:has(> .wpb_column .gt3_icon_box) > .wpb_column > .vc_column-inner {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            width: 100%;
        }

            .vc_row.wpb_row:has(> .wpb_column .gt3_icon_box) > .wpb_column > .vc_column-inner > .wpb_wrapper {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
            }

    /* height:100% cannot resolve through that chain; growing as a flex item can. */
    .vc_row.wpb_row:has(> .wpb_column .gt3_icon_box) .gt3_icon_box {
        flex: 1 1 auto;
    }

/* Tame the oversized legacy vertical spacers between feature rows */
.gt3_spacing-height_default[style*="95px"],
.gt3_spacing-height_default[style*="75px"] {
    height: 34px !important;
}

/* ==========================================================================
   7. Buttons & CTAs
   ========================================================================== */
.btn {
    font-family: var(--nv-head);
    font-weight: 600;
    border-radius: var(--nv-radius-sm);
    padding: .62rem 1.45rem;
    border: none;
    transition: var(--nv-trans);
    box-shadow: 0 6px 16px rgba(24,39,75,.10);
}

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(24,39,75,.18);
    }

    .btn:active {
        transform: translateY(0);
    }

.btn-primary {
    background: var(--nv-primary) !important;
    border-color: var(--nv-primary) !important;
    color: #fff !important;
}

    .btn-primary:hover {
        background: var(--nv-primary-700) !important;
    }

.btn-warning {
    background: linear-gradient(135deg, #ffb938, #ef8f1d) !important;
    color: #fff !important;
    border: none !important;
}

    .btn-warning:hover {
        background: linear-gradient(135deg, #ffae1f, #e07f10) !important;
        color: #fff !important;
    }

.btn-danger {
    background: var(--nv-danger) !important;
    border-color: var(--nv-danger) !important;
}

.btn-outline-primary {
    border: 2px solid var(--nv-primary) !important;
    color: var(--nv-primary) !important;
    background: transparent !important;
}

    .btn-outline-primary:hover {
        background: var(--nv-primary) !important;
        color: #fff !important;
    }

/* Legacy theme buttons (404 page, module buttons, search) */
.gt3_module_button a,
.search_submit,
input[type="submit"].search_submit {
    display: inline-block;
    background: var(--nv-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--nv-radius-sm) !important;
    padding: 12px 28px !important;
    font-family: var(--nv-head);
    font-weight: 600;
    transition: var(--nv-trans);
}

    .gt3_module_button a:hover,
    .search_submit:hover {
        background: var(--nv-accent) !important;
        color: #fff !important;
        transform: translateY(-2px);
    }

/* ==========================================================================
   8. Forms
   ========================================================================== */
.form-control,
.clsSelect,
select.form-control,
textarea.form-control {
    border: 1px solid var(--nv-line) !important;
    border-radius: var(--nv-radius-sm) !important;
    padding: .6rem .9rem !important;
    height: auto !important;
    color: var(--nv-ink);
    background: #fff;
    box-shadow: none !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* Selects carry a chevron graphic pinned to their right edge, but the rule above cuts the right
   padding to .9rem (14.4px) - narrower than the chevron - so long option text ran underneath it
   ("-- Select Acadmy Or Instituion --" collided with the arrow). Reserve room for the glyph and
   ellipsize anything still too long. */
select.clsSelect,
select.form-control {
    padding-right: 2.6rem !important;
    text-overflow: ellipsis;
}

    .form-control:focus {
        border-color: var(--nv-primary-300) !important;
        box-shadow: 0 0 0 .2rem rgba(49,71,151,.16) !important;
    }

    .form-control::placeholder {
        color: var(--nv-muted);
    }

.input-group-text {
    background: var(--nv-primary);
    color: #fff;
    border: none;
    border-radius: var(--nv-radius-sm) 0 0 var(--nv-radius-sm);
}

/* Homepage "Book a free demo" panel  (#dvBookDemo)
   --------------------------------------------------------------------------
   Round two on this band. Round one only unbroke the 30%-wide inputs; what was left
   still read as an unfinished form: each field carried a solid brand-blue icon chip that
   vanished into the brand-blue card, so the white part of the field started somewhere in
   the middle and the four controls scanned as different widths. Now each field is ONE
   white pill with the icon sitting inside it, all four controls share a 46px height, and
   the gold submit is the only saturated colour in the band so it reads as the action. */
/* The WPBakery scaffolding left around this band declares a one-third column
   (.vc_col-sm-4) even though the panel has always been full width. The old markup escaped
   the column by tagging the panel with the legacy fixed-width `.container` class, which
   simply overflowed its parent. Widen the column itself instead, so the panel lines up with
   the slider above it because both sit in the same container — not by accident.
   Scoped with :has() to the column that actually holds the panel: the feature-box rows
   further down the home page carry the same vc_custom class and DO want real thirds. */
.vc_column_container:has(> .vc_column-inner > .wpb_wrapper > #dvBookDemo) {
    width: 100%;
    float: none;
}

/* The band's section and the feature-box row below it share one legacy class, whose 100px
   top padding is what left the big empty stripe under the panel. Give the panel's own
   section the tighter rhythm and leave the feature row's spacing alone. */
.vc_custom_1509608684434:has(#dvBookDemo) {
    padding-top: 56px !important;
    padding-bottom: 0 !important;
}

    /* The legacy markup pulls this wrapper up 40px, which ate most of the gap under the
       banner. Neutralised here so the 56px above is what actually renders. */
    .vc_custom_1509608684434:has(#dvBookDemo) .wpb_wrapper {
        margin-top: 0 !important;
    }

.vc_custom_1509608684434:has(#dvBookDemo) ~ .vc_custom_1509608684434 {
    padding-top: 40px !important;
}

/* Deep navy rather than the hero blue: the panel sits directly under the royal-blue banner
   block, and two near-identical blues stacked with a white line between them read as one
   thing that failed to line up. Dropping this card into the dark end of the palette makes it
   a distinct object, and gives the white fields and the gold button something to sit on. */
#dvBookDemo {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,#26386e 0%,#1d2b5c 52%,#141d3f 100%) !important;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--nv-radius-lg) !important;
    padding: 26px 28px !important;
    /* drop shadow, plus a thin saffron edge along the top — the one warm line that ties the
       panel to the logo and the submit button */
    box-shadow: var(--nv-shadow-lg), inset 0 3px 0 var(--nv-accent);
    /* The legacy markup tags this panel with `.container`, whose fixed 1170px width made it
       48px wider than the 1122px slider above and pushed it out past the right edge. Let it
       take its wrapper's width instead, so the panel and the banner share one set of edges. */
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

    /* The same saffron glow + dot grid the page-title heroes carry, so the one saturated
       block on the home page reads as part of the family instead of a flat blue slab. */
    #dvBookDemo::before {
        content: "";
        position: absolute;
        top: -70%;
        right: -4%;
        width: 44%;
        height: 240%;
        background: radial-gradient(closest-side, rgba(245,166,35,.30), rgba(245,166,35,0) 70%);
        pointer-events: none;
    }

    #dvBookDemo::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
        background-size: 22px 22px;
        opacity: .5;
        pointer-events: none;
    }

    #dvBookDemo > * {
        position: relative;
        z-index: 2;
    }

.nv-demo__head {
    text-align: center;
    margin-bottom: 18px;
}

.nv-demo__title {
    color: #fff !important;
    font-family: 'Kaushan Script', cursive;
    font-weight: 400;
    font-size: clamp(22px, 2vw, 27px);
    line-height: 1.35;
    margin: 0 0 2px;
}

.nv-demo__sub {
    color: rgba(255,255,255,.74) !important;
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
}

/* One white pill per field: the icon chip is part of the pill, not a blue block in front
   of it, so the eye reads four controls of equal weight instead of eight fragments.
   `:has(.form-control)` matters — the legacy markup also wraps the Submit button in an
   .input-group, and without the guard the button got a white pill drawn around it. */
#dvBookDemo .input-group:has(.form-control) {
    width: 100%;
    flex-wrap: nowrap;
    background: #fff;
    border-radius: var(--nv-radius-sm);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(9,16,38,.18);
    transition: var(--nv-trans);
}

    #dvBookDemo .input-group:has(.form-control):focus-within {
        box-shadow: 0 0 0 3px rgba(245,166,35,.55);
    }

/* the button's legacy wrapper: no pill, no margin of its own */
#dvBookDemo .input-group:not(:has(.form-control)) {
    background: none;
    box-shadow: none;
    margin-bottom: 0 !important;
    width: 100%;
}

#dvBookDemo .input-group-text {
    height: 46px;
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--nv-primary) !important;
    padding: 0 6px 0 14px;
    font-size: 16px;
}

#dvBookDemo .form-control {
    width: 100% !important;
    height: 46px !important;
    border: none !important;
    border-radius: 0 !important;
    background: #fff;
    color: var(--nv-ink);
    padding-left: 8px;
    box-shadow: none !important;
}

    #dvBookDemo .form-control::placeholder {
        color: var(--nv-muted);
    }

#dvBookDemo .nv-demo__submit,
#dvBookDemo .btn-warning {
    width: 100%;
    height: 46px;
    font-weight: 700;
    letter-spacing: .2px;
    border: none;
    border-radius: var(--nv-radius-sm);
    background: linear-gradient(135deg, var(--nv-accent), var(--nv-accent-600));
    color: #35270a;
    box-shadow: 0 6px 18px rgba(245,166,35,.32);
}

    #dvBookDemo .nv-demo__submit:hover,
    #dvBookDemo .btn-warning:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(245,166,35,.42);
        color: #35270a;
    }

/* Pre-rebuild markup only: the heading is still an inline-styled <h1> and the status line is
   still a Bootstrap .alert. Keep both in the new proportions so the panel does not look
   half-finished between a CSS deploy and the next build. */
#dvBookDemo h1 {
    color: #fff !important;
    font-size: clamp(22px, 2vw, 27px) !important;
    line-height: 1.35 !important;
    margin: 0 !important; /* the legacy row below it already carries a 30px top margin */
}

#dvBookDemo .alert {
    margin: 18px 0 0;
    padding: 11px 16px;
    border-radius: var(--nv-radius-sm);
    background: rgba(255,255,255,.12);
    border: none;
    border-left: 4px solid var(--nv-accent);
    color: #fff;
    font-size: 15px;
}

/* Status line — only rendered after a submit (see Index.razor), tinted by outcome.
   Bootstrap's pale .alert surfaces are built for white pages and glared on the blue card,
   so this is a translucent strip with a coloured edge instead. */
.nv-demo__msg {
    margin-top: 18px;
    padding: 11px 16px;
    border-radius: var(--nv-radius-sm);
    background: rgba(255,255,255,.12);
    border-left: 4px solid var(--nv-accent);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

    .nv-demo__msg.is-ok {
        background: rgba(46,158,91,.22);
        border-left-color: #6ddc9b;
    }

    .nv-demo__msg.is-error {
        background: rgba(226,87,76,.20);
        border-left-color: #ff9c94;
    }

/* Home slider arrows.
   The page-level rule sized them 55px and pinned `top:50%`, which puts the button's TOP
   edge at the midpoint — so they hung ~27px below centre — and left them flush against the
   left and right edges of the artwork. Inset them and centre them properly. */
#carouselExampleCaptions .carousel-control-prev,
#carouselExampleCaptions .carousel-control-next {
    width: 55px;
    height: 55px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #243b3b;
    opacity: .85;
    transition: var(--nv-trans);
}

#carouselExampleCaptions .carousel-control-prev {
    left: 24px;
}

#carouselExampleCaptions .carousel-control-next {
    right: 24px;
}

    #carouselExampleCaptions .carousel-control-prev:hover,
    #carouselExampleCaptions .carousel-control-next:hover {
        opacity: 1;
        transform: translateY(-50%) scale(1.06);
    }

/* Drawn banner slides (HomeBanner.razor). Used where a country has no artwork yet: the same
   composition as the PNG banners — lavender ground, orange/yellow corner blobs top-left, soft grey
   swoops, a stack of rounded squares bottom-right, a figure on the left and mustard heading + navy
   copy + yellow pill on the right — so UK/US slides sit in the same carousel as the India artwork. */
.nv-slide {
    --nv-slide-bg: #f5eef8;
    --nv-slide-grey: #e6e4e8;
    --nv-slide-orange: #e8955c;
    --nv-slide-yellow: #f9b94f;
    --nv-slide-pale: #fbd98f;
    --nv-slide-heading: #d99a2b;
    --nv-slide-ink: #1f2a44;
    position: relative;
    display: flex;
    align-items: center;
    gap: 4%;
    height: 550px;
    padding: 0 7% 0 5%;
    background: var(--nv-slide-bg);
    overflow: hidden;
    color: var(--nv-slide-ink);
    font-family: 'Poppins', sans-serif;
}

.nv-slide__deco {
    position: absolute;
    display: block;
    pointer-events: none;
}

.nv-slide__deco--grey-l {
    width: 34%;
    height: 78%;
    left: -12%;
    top: -22%;
    background: var(--nv-slide-grey);
    border-radius: 0 0 55% 45% / 0 0 60% 40%;
}

.nv-slide__deco--grey-r {
    width: 20%;
    height: 140%;
    right: -6%;
    top: -20%;
    background: var(--nv-slide-grey);
    border-radius: 48% 0 0 52% / 40% 0 0 60%;
}

.nv-slide__deco--sq {
    width: 70px;
    height: 70px;
    left: 0;
    top: 0;
    background: var(--nv-slide-orange);
}

.nv-slide__deco--circle {
    width: 110px;
    height: 110px;
    left: 20px;
    top: 14px;
    background: var(--nv-slide-yellow);
    border-radius: 50%;
}

.nv-slide__deco--pale {
    width: 68px;
    height: 68px;
    left: 68px;
    top: 66px;
    background: var(--nv-slide-pale);
}

.nv-slide__deco--stack {
    right: 18px;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .nv-slide__deco--stack i {
        display: block;
        width: 58px;
        height: 58px;
        border-radius: 14px;
    }

        .nv-slide__deco--stack i:nth-child(1) { background: var(--nv-slide-pale); }
        .nv-slide__deco--stack i:nth-child(2) { background: var(--nv-slide-yellow); }
        .nv-slide__deco--stack i:nth-child(3) { background: var(--nv-slide-orange); }

.nv-slide__figure {
    position: relative;
    flex: 0 0 34%;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    max-height: 78%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0, #fde9c4 55%, #fbd98f 100%);
    box-shadow: 0 24px 60px rgba(217, 154, 43, .22);
}

    .nv-slide__figure .fa {
        font-size: clamp(90px, 11vw, 170px);
        color: var(--nv-slide-orange);
        text-shadow: 0 10px 24px rgba(232, 149, 92, .25);
    }

.nv-slide__copy {
    position: relative;
    flex: 1 1 auto;
    max-width: 58%;
}

.nv-slide__title {
    margin: 0 0 14px;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 3.4vw, 50px);
    line-height: 1.1;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nv-slide-heading) !important;
}

.nv-slide__text {
    margin: 0 0 24px;
    font-family: 'Mukta', 'Poppins', sans-serif;
    font-size: clamp(16px, 1.55vw, 23px);
    line-height: 1.5;
    color: var(--nv-slide-ink);
}

.nv-slide__cta {
    display: inline-block;
    padding: 12px 38px;
    border-radius: 40px;
    background: var(--nv-slide-yellow);
    color: var(--nv-slide-ink);
    font-weight: 600;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.3;
    text-align: center;
}

@media (max-width: 767.98px) {
    .nv-slide {
        flex-direction: column;
        justify-content: center;
        gap: 18px;
        padding: 24px 22px 60px;
        text-align: center;
    }

    .nv-slide__deco--grey-l,
    .nv-slide__deco--grey-r,
    .nv-slide__deco--pale {
        display: none;
    }

    .nv-slide__deco--stack i {
        width: 26px;
        height: 26px;
        border-radius: 7px;
    }

    .nv-slide__figure {
        flex: 0 0 auto;
        width: 150px;
        max-height: none;
    }

        .nv-slide__figure .fa {
            font-size: 76px;
        }

    .nv-slide__copy {
        max-width: none;
    }

    .nv-slide__title {
        letter-spacing: .08em;
    }
}

/* ==========================================================================
   9. Tables  (.table + bare content tables on subject/course pages)
   ========================================================================== */
.table,
.main_wrapper #main_content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius);
    overflow: hidden;
    box-shadow: var(--nv-shadow-sm);
}

    .table thead th,
    .main_wrapper #main_content table thead th,
    .main_wrapper #main_content table th {
        background: var(--nv-primary) !important;
        color: #fff !important;
        font-family: var(--nv-head);
        font-weight: 600;
        border: none !important;
        padding: 13px 16px !important;
        text-align: left;
        vertical-align: middle;
    }

    .table td,
    .table th,
    .main_wrapper #main_content table td {
        padding: 12px 16px !important;
        border-top: 1px solid var(--nv-line) !important;
        color: var(--nv-body);
        vertical-align: middle;
    }

    .table tbody tr:nth-child(even),
    .main_wrapper #main_content table tbody tr:nth-child(even) {
        background: var(--nv-bg-soft);
    }

    .table tbody tr:hover,
    .main_wrapper #main_content table tbody tr:hover {
        background: var(--nv-primary-050);
    }

/* ==========================================================================
   10. Testimonials slider (mission page)
   ========================================================================== */
.testimonials_item .testimonial_item_wrapper {
    background: #fff;
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius);
    padding: 26px;
    margin: 6px 12px;
    box-shadow: var(--nv-shadow-sm);
}

.testimonials_round_img {
    border-radius: 50% !important;
    box-shadow: 0 6px 16px rgba(24,39,75,.18);
}

.testimonials_title {
    font-family: var(--nv-head);
    font-weight: 700;
    color: var(--nv-ink);
}

    .testimonials_title .author_status {
        color: var(--nv-accent-600);
        font-weight: 600;
    }

.testimonials-text {
    color: var(--nv-body);
    font-style: italic;
}

/* ==========================================================================
   11. Pie-charts / progress (mission, business pages)
   ========================================================================== */
.wpb_pie_chart_heading {
    font-family: var(--nv-head) !important;
    color: var(--nv-ink) !important;
}

/* ==========================================================================
   12. Header & navigation polish  (kept conservative — the header works)
   ========================================================================== */
/* Top utility bar (brand blue already via stylesheet.min.css) */
.gt3_header_builder__section--top a {
    color: #fff !important;
    transition: color .2s ease;
}

    .gt3_header_builder__section--top a:hover {
        color: var(--nv-accent) !important;
    }

.gt3_header_builder__section--top .fa {
    transition: color .2s ease;
}

/* Primary menu links */
.main-menu > ul > li > a {
    font-family: var(--nv-head);
    font-weight: 600;
    color: var(--nv-ink);
    position: relative;
    transition: color .2s ease;
}

    .main-menu > ul > li > a .manu-item-main-span {
        transition: color .2s ease;
    }

.main-menu > ul > li:hover > a,
.main-menu > ul > li:hover > a .manu-item-main-span {
    color: var(--nv-primary) !important;
}
/* animated underline */
.main-menu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -4px;
    height: 3px;
    border-radius: 3px;
    background: var(--nv-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.main-menu > ul > li:hover > a::after {
    transform: scaleX(1);
}

/* Dropdown sub-menus → clean card */
.main-menu ul li ul.sub-menu {
    background: #fff !important;
    border: 1px solid var(--nv-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--nv-shadow) !important;
    padding: 8px !important;
    overflow: hidden;
}

    .main-menu ul li ul.sub-menu .menu-item a {
        color: var(--nv-body) !important;
        border-radius: 8px;
        transition: background .18s ease, color .18s ease, padding-left .18s ease;
    }

        .main-menu ul li ul.sub-menu .menu-item a:hover {
            background: var(--nv-primary-050) !important;
            color: var(--nv-primary) !important;
        }

/* Sticky header → brand colour, readable white links */
.sticky_header .gt3_header_builder__section--middle {
    background: var(--nv-primary-900) !important;
}

.sticky_header .main-menu > ul > li > a,
.sticky_header .main-menu > ul > li > a .manu-item-main-span {
    color: #fff !important;
}

.sticky_header .main-menu > ul > li:hover > a,
.sticky_header .main-menu > ul > li:hover > a .manu-item-main-span {
    color: var(--nv-accent) !important;
}

/* Header search box */
.headerSearch .form-control {
    border-radius: 50px !important;
    height: 30px !important;
}

/* ==========================================================================
   13. Footer
   ========================================================================== */
.main_footer.Saas_WebDefaultBGColor,
footer.main_footer {
    background: linear-gradient(180deg, #2a3c81 0%, #1f2c5b 100%) !important;
    color: #c6cdea !important;
}

.main_footer .top_footer {
    padding-top: 8px;
}

.main_footer .textwidget,
.main_footer .menu-top-menu-container,
.main_footer p {
    color: #c6cdea !important;
    line-height: 1.9;
}

.main_footer b, .main_footer strong {
    color: #eef1ff !important;
}

.main_footer .widget-title {
    color: #fff !important;
    font-family: var(--nv-head);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    position: relative;
}

    .main_footer .widget-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 44px;
        height: 3px;
        border-radius: 3px;
        background: var(--nv-accent);
    }

.main_footer .menu li {
    margin-bottom: 9px;
}

.main_footer a {
    color: #c6cdea !important;
    transition: var(--nv-trans);
}

    .main_footer a:hover {
        color: var(--nv-accent) !important;
        padding-left: 4px;
    }

.main_footer .fa {
    color: var(--nv-accent);
    margin-right: 4px;
}

.main_footer .copyright.Saas_WebDefaultBGColor,
.main_footer .copyright {
    background: rgba(0,0,0,.22) !important;
    color: #aab2d6 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}

    .main_footer .copyright a {
        color: #c6cdea !important;
    }

        .main_footer .copyright a:hover {
            color: var(--nv-accent) !important;
        }

/* ==========================================================================
   14. 404 page
   ========================================================================== */
.wrapper_404 {
    text-align: center;
    padding: 60px 0 80px;
}

    .wrapper_404 .number_404 {
        font-family: var(--nv-head);
        font-weight: 800;
        font-size: clamp(90px, 16vw, 168px) !important;
        line-height: 1;
        background: var(--nv-hero);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 8px;
    }

    .wrapper_404 h2 {
        color: var(--nv-ink);
        margin-bottom: 10px;
    }

.gt3_404_search .search_text {
    border: 1px solid var(--nv-line);
    border-radius: 50px;
    padding: 11px 20px;
    min-width: 260px;
}

/* ==========================================================================
   15. Misc polish
   ========================================================================== */
.alert {
    border-radius: var(--nv-radius-sm);
    border: none;
}

.carousel {
    border-radius: var(--nv-radius-lg);
    overflow: hidden;
    box-shadow: var(--nv-shadow);
}

.carousel-indicators [data-bs-target] {
    border-radius: 50px;
}

iframe {
    max-width: 100%;
    border-radius: var(--nv-radius);
}

hr {
    border-color: var(--nv-line);
}

/* Section helper if pages opt in */
.nv-section {
    padding: 60px 0;
}

.nv-section--soft {
    background: var(--nv-bg-soft);
}

/* ==========================================================================
   17. Library page  (/library) — floating filter panel + book grid
   ========================================================================== */
/* books-style.css (loaded on /library) decorates EVERY h2 with a 2px bar across its vertical
   centre — `h2:after { bottom:50%; margin-bottom:-2px; left:0; right:0; background:#373d47 }`.
   That is a deliberate "text with a rule through it" style, but it only reads correctly when the
   heading contains a <strong> chip, which books-style.css paints on an opaque orange background
   to mask the bar. Headings without that chip — like "Explore the Digital Library" — just come out
   struck through. Keep the decoration for headings that opt in, drop it everywhere else. */
h2:not(:has(strong))::after {
    content: none !important;
}

/* The panel used to be lifted -56px so it floated over the hero. No other page overlaps its
   banner, so /library read as sitting higher than the rest of the site. Sit it below the hero
   like every other first content block instead — 40px is #main_content's 18px top padding plus
   the breathing room a raised card needs so its shadow does not crowd the blue band. */
.nv-lib-filter {
    max-width: 940px;
    margin: 40px auto 8px;
    position: relative;
    z-index: 3;
    background: #fff;
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius-lg);
    box-shadow: var(--nv-shadow);
    padding: 26px 30px 30px;
}

.nv-lib-filter__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--nv-line);
}

.nv-lib-filter__icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--nv-primary), var(--nv-primary-700));
    color: #fff;
    font-size: 24px;
    box-shadow: 0 10px 24px rgba(49,71,151,.30);
}

.nv-lib-filter__title {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.2;
}

.nv-lib-filter__sub {
    margin: 4px 0 0;
    color: var(--nv-muted);
    font-size: 14.5px;
}

.nv-lib-filter__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.nv-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

    .nv-field label {
        font-family: var(--nv-head);
        font-weight: 600;
        font-size: 12.5px;
        color: var(--nv-ink);
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .nv-field select.form-control,
    .nv-field .clsSelect {
        width: 100% !important; /* neutralise any leftover inline vw width */
        height: 48px !important;
        cursor: pointer;
    }

/* Book grid (uses CDN .cards flex layout; we soften/modernise the cards) */
.nv-book-grid {
    justify-content: flex-start;
    padding: 24px 0 6px;
    margin-left: 0 !important;
}

.cards.nv-book-grid .card {
    width: 190px;
    height: 270px;
    margin: 14px;
    border-radius: var(--nv-radius-sm);
    border: 1px solid var(--nv-line);
    box-shadow: var(--nv-shadow-sm);
}

    .cards.nv-book-grid .card:hover {
        box-shadow: var(--nv-shadow);
        transform: translateY(-5px) scale(1.02);
    }

    .cards.nv-book-grid .card img {
        object-fit: cover;
        height: 100%;
    }

    .cards.nv-book-grid .card figcaption {
        background: rgba(31,42,68,.94) !important;
        color: #fff !important;
        font-size: 15px !important;
        text-align: center;
        padding: 11px 10px !important;
    }

        .cards.nv-book-grid .card figcaption a {
            color: #fff !important;
            font-weight: 600;
        }

.nv-book-empty {
    width: 100%;
    padding: 30px 16px;
    text-align: center;
    color: var(--nv-muted);
    font-family: var(--nv-head);
    font-weight: 600;
}

/* Library credit note */
.nv-lib-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 940px;
    margin: 26px auto 46px;
    background: #fff4f3;
    border: 1px solid #f6d2ce;
    border-left: 4px solid var(--nv-danger);
    border-radius: var(--nv-radius-sm);
    padding: 14px 18px;
    color: #9a3a32;
    font-size: 15px;
    font-weight: 600;
}

    .nv-lib-note .fa {
        color: var(--nv-danger);
        margin-top: 3px;
        font-size: 17px;
    }

    .nv-lib-note a {
        color: var(--nv-primary);
        text-decoration: underline;
    }

/* ==========================================================================
   18. Cross-cutting normalizers
   --------------------------------------------------------------------------
   These target the recurring inline-style anti-patterns left over from the
   WordPress/WPBakery export (off-brand colours, dated form fields, bespoke
   buttons, fixed media, empty placeholder pages). theme.css loads LAST, so
   !important here beats the page-level inline styles & <style> blocks.
   ========================================================================== */

/* --- 18a. Off-brand lime-green (#a0ce4e) → brand ------------------------- */
a[style*="a0ce4e"],
[style*="color:#a0ce4e"],
[style*="color: #a0ce4e"] {
    color: var(--nv-primary) !important;
}

[style*="background:#a0ce4e"],
[style*="background: #a0ce4e"],
[style*="background-color:#a0ce4e"],
[style*="background-color: #a0ce4e"] {
    background-color: var(--nv-primary) !important;
}

[style*="border-color:#a0ce4e"],
[style*="border-color: #a0ce4e"],
[style*="rgb(160, 206, 78)"] {
    border-color: var(--nv-primary) !important;
}

/* --- 18b. Dated/bespoke inline form fields → themed --------------------- */
/* Many WP/CF7 inputs carry inline width:70% / brown #967c6c border / square
   corners. Normalise the common bespoke field classes to the brand look. */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea,
input.form_field,
textarea.form_field,
input[style*="#967c6c"],
textarea[style*="#967c6c"] {
    width: 100% !important;
    border: 1px solid var(--nv-line) !important;
    border-radius: var(--nv-radius-sm) !important;
    background: #fff !important;
    color: var(--nv-ink) !important;
    padding: .6rem .9rem !important;
    min-height: 46px !important;
    box-shadow: none !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

textarea[style*="#967c6c"],
.wpcf7-form-control.wpcf7-textarea {
    min-height: 130px !important;
}

    .wpcf7-form-control.wpcf7-text:focus,
    .wpcf7-form-control.wpcf7-textarea:focus,
    input.form_field:focus,
    textarea.form_field:focus,
    input[style*="#967c6c"]:focus,
    textarea[style*="#967c6c"]:focus {
        border-color: var(--nv-primary-300) !important;
        box-shadow: 0 0 0 .2rem rgba(49,71,151,.16) !important;
        outline: none;
    }

/* --- 18c. Bespoke / off-brand buttons → themed ------------------------- */
.primary-btn,
.order-submit,
.feedbackSubmit,
button.feedbackSubmit,
.search-course-button,
.shortcode_button,
a.shortcode_button {
    display: inline-block;
    background: var(--nv-primary) !important;
    background-color: var(--nv-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--nv-radius-sm) !important;
    padding: 11px 26px !important;
    font-family: var(--nv-head);
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(24,39,75,.10);
    transition: var(--nv-trans);
    cursor: pointer;
}

    .primary-btn:hover,
    .order-submit:hover,
    .feedbackSubmit:hover,
    button.feedbackSubmit:hover,
    .search-course-button:hover,
    .shortcode_button:hover,
    a.shortcode_button:hover {
        background: var(--nv-accent) !important;
        background-color: var(--nv-accent) !important;
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(24,39,75,.18);
    }
/* kill the magic-number offset hack used on submit columns */
.sbumitButton, .submitButton {
    margin-left: 0 !important;
}

/* --- 18d. Responsive media (fixed-width videos / canvases / embeds) ----- */
video {
    max-width: 100% !important;
    height: auto;
    border-radius: var(--nv-radius);
}

canvas {
    max-width: 100%;
}

.wpb_video_widget iframe,
.course-description iframe,
.blog_post_media iframe {
    width: 100% !important;
}

/* --- 18e. Off-brand inline text colours on notes/links ------------------ */
/* tame raw maroon/rust table text & links from page <style> blocks */
.main_wrapper #main_content table span[style*="color"],
.main_wrapper #main_content table a {
    color: var(--nv-primary) !important;
}

/* --- 18f. Social icons (contact page) → consistent brand chips ---------- */
.soc-icon {
    transition: var(--nv-trans);
    border-radius: 10px !important;
}

    .soc-icon:hover {
        transform: translateY(-3px);
        filter: brightness(1.06);
    }

/* --- 18g. (removed) ----------------------------------------------------- */
/* A global :empty::before "coming soon" injection was tried here but it
   mis-fired on content pages that contain structural empty .row/.container
   wrappers from the WP export (e.g. the teacher-list grid renders an empty
   row when a filter returns no teachers). Empty placeholder pages are now
   left to be handled per-page instead of via a blanket CSS rule. */

/* --- 18h. Neutralise leftover full-width negative-offset export hacks ---- */
/* WPBakery baked e.g. left:-504px;width:2179px on some full-width bands,
   which forces horizontal scroll at every viewport but the original one. */
[data-vc-full-width="true"][style*="left: -"],
[data-vc-full-width][style*="left:-"] {
    left: 0 !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}

/* --- 18i. Un-freeze isotope grids baked to one viewport ----------------- */
/* The WP export ran isotope/JS once and baked position:absolute + a fixed
   container height into the markup (class "isotope_loaded"). That JS does not
   re-run here, so the grid is frozen to one width (e.g. a lone team card
   floating over 1400px of empty space). Restore a responsive flex flow. */
ul.item_list.isotope,
.gt3_course_grid.isotope,
.gt3_course_grid {
    position: static !important;
    height: auto !important;
    margin-right: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 30px;
    list-style: none;
    padding-left: 0;
}

    ul.item_list.isotope > li,
    ul.item_list.isotope > li.item-team-member,
    .gt3_course_grid > .gt3_course_item,
    .gt3_course_grid > div {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }

        ul.item_list.isotope > li.item-team-member {
            width: 280px;
            max-width: 100%;
        }

    .gt3_course_grid > .gt3_course_item,
    .gt3_course_grid > div {
        flex: 1 1 300px;
        max-width: 360px;
    }

/* ==========================================================================
   16. Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
    .gt3-page-title {
        padding: 124px 0 50px !important;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 15.5px;
    }

    .gt3-page-title {
        padding: 104px 0 42px !important;
    }

        .gt3-page-title .page_title h1 {
            font-size: clamp(26px, 7vw, 34px) !important;
        }

    .gt3_icon_box.gt3_icon_box_icon-position_left {
        flex-direction: column;
    }

    #dvBookDemo {
        margin-left: 0 !important;
        padding: 22px 18px 20px !important;
    }

    /* 55px chips eat a phone-width slide — shrink them and hug the edges more closely. */
    #carouselExampleCaptions .carousel-control-prev,
    #carouselExampleCaptions .carousel-control-next {
        width: 42px;
        height: 42px;
    }

    #carouselExampleCaptions .carousel-control-prev {
        left: 10px;
    }

    #carouselExampleCaptions .carousel-control-next {
        right: 10px;
    }

    .card.bg-info .card-body {
        font-size: 15px;
    }

    .nv-lib-filter {
        margin-top: 18px;
        padding: 20px;
    }

    .nv-lib-filter__grid {
        grid-template-columns: 1fr;
    }

    .cards.nv-book-grid {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .gt3-page-title {
        padding: 92px 0 36px !important;
    }

    .card-body, .gt3_icon_box {
        padding: 18px;
    }
}

/* ---------------------------------------------------------------------------
   Font Awesome 4.7 — CORS-safe @font-face override.

   The theme stylesheets on cdn.zeetsoft.com declare @font-face for 'FontAwesome'
   with font files served from that CDN. Cross-origin font requests require an
   Access-Control-Allow-Origin response header; cdn.zeetsoft.com does not send one,
   so every browser blocked the download and all `fa-*` icons rendered blank.

   theme.css is the last stylesheet on the page, so this declaration wins the
   cascade and points the same font-family at a CDN that does send ACAO: *.
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'FontAwesome';
    src: url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
         url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
         url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------------------
   Header menu: keep all seven top-level items on one row.

   Each item carried 12px padding + 5px margin per side (34px of chrome each),
   so the seven items needed 977px while the 1170px theme container only offers
   ~924px for the menu — "Life Skills" dropped onto a second row.

   Trimming the chrome to 20px per item recovers ~98px, which fits the row with
   headroom to spare and leaves the logo, font size and container width alone.
   Scoped to the horizontal header bars so the stacked mobile menu is unaffected.
   --------------------------------------------------------------------------- */
.gt3_header_builder__section--middle nav.main-menu > ul > li > a {
    padding-left: 8px;
    padding-right: 8px;
    margin-left: 2px;
    margin-right: 2px;
}

/* Belt-and-braces: never let the top row break, even if an item is added later. */
.gt3_header_builder__section--middle nav.main-menu > ul {
    white-space: nowrap;
}

.gt3_header_builder__section--middle nav.main-menu > ul > li {
    white-space: normal;
}

/* ==========================================================================
   19. Teacher / course cards  (.nv-tcard)
   --------------------------------------------------------------------------
   Used by the teacher-list page (both the dynamic result grid and the fixed
   "new course" showcase). Replaces the old hand-rolled inline styles: a fixed
   16:9 course banner, a circular teacher photo that laps over the banner, a
   subject chip, and an action row that keeps the buttons on one baseline
   instead of letting them collide. Cards in a row are always equal height.
   ========================================================================== */
.nv-teacher-grid {
    row-gap: 30px;
    align-items: stretch;
}

    /* Bootstrap columns are block by default — flex lets the card fill the row height. */
    .nv-teacher-grid > [class*="col-"] {
        display: flex;
    }

.card.nv-tcard {
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius-lg) !important;
    overflow: hidden;
}

    .card.nv-tcard:hover {
        transform: translateY(-6px);
        box-shadow: var(--nv-shadow);
    }

/* --- Course banner ------------------------------------------------------- */
.nv-tcard__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--nv-bg-soft);
}

    /* contain, not cover: these banners ARE the course-title artwork, so cropping
       them eats words. The fixed 16:9 box still keeps every card the same height. */
    .nv-tcard__media img {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        transition: transform .55s cubic-bezier(.4,0,.2,1);
    }

/* Art narrower than 16:9 (the Business Law banner, for one) letterboxes inside that contained
   box, and the near-white backdrop behind it read as a broken image rather than a frame — two
   cards in the row filled edge to edge and the third had white bars down both sides. Paint a
   blurred, over-scaled copy of the same art behind the sharp one: the frame always fills, and
   the course title still never gets cropped. Banners already 16:9 cover it completely. */
.nv-tcard__media img.nv-tcard__media-fill {
    position: absolute;
    inset: 0;
    z-index: 0;
    object-fit: cover;
    transform: scale(1.18);
    filter: blur(16px) saturate(1.15);
}

.card.nv-tcard:hover .nv-tcard__media img {
    transform: scale(1.06);
}

    /* Hold the backdrop over-scaled through the hover zoom, or its blurred edges creep inward. */
    .card.nv-tcard:hover .nv-tcard__media img.nv-tcard__media-fill {
        transform: scale(1.25);
    }

/* Scrim so the white avatar ring always separates from a busy banner. Shares the sharp image's
   z-index and wins on DOM order, so it still paints over both layers. */
.nv-tcard__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    height: 52%;
    background: linear-gradient(180deg,rgba(20,28,54,0) 0%,rgba(20,28,54,.22) 100%);
    pointer-events: none;
}

/* Cards with no course banner (dynamic teacher results) get a brand band instead,
   so the lapped avatar and the card proportions stay identical either way. */
.nv-tcard__media--plain {
    aspect-ratio: auto;
    height: 96px;
    background: var(--nv-hero);
}

    .nv-tcard__media--plain::after {
        display: none;
    }

.nv-tcard__subject {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
    background: rgba(255,255,255,.94);
    color: var(--nv-primary);
    font-family: var(--nv-head);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(24,39,75,.16);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Teacher photo -------------------------------------------------------- */
.nv-tcard__avatar {
    position: relative;
    z-index: 2;
    display: block;
    width: 116px;
    height: 116px;
    margin: -58px auto 0;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 4px solid #fff;
    box-shadow: 0 10px 26px rgba(24,39,75,.20);
}

/* --- Body ---------------------------------------------------------------- */
.nv-tcard .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    text-align: center;
    padding: 14px 20px 22px;
}

.nv-tcard__name {
    margin: 0 0 4px;
    font-family: var(--nv-head);
    font-size: 19px;
    font-weight: 700;
    color: var(--nv-ink);
    line-height: 1.3;
}

.nv-tcard__role {
    margin: 0;
    font-family: var(--nv-head);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--nv-muted);
}

.nv-tcard__meta {
    margin: 10px 0 0;
    font-size: 14.5px;
    color: var(--nv-body);
}

/* --- Actions -------------------------------------------------------------- */
.nv-tcard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto; /* pins the buttons to the bottom on short cards */
    padding-top: 20px;
}

    /* 145px basis = the width the longest label ("Course Contents") needs. Two
       buttons therefore sit side by side only when the card is wide enough for
       both at full width, and drop to a clean stack otherwise — never squeezed,
       never overlapping. */
    .nv-tcard__actions .btn {
        flex: 1 1 145px;
        padding: .6rem .7rem;
        font-size: 14.5px;
        box-shadow: none;
    }

        .nv-tcard__actions .btn:hover {
            box-shadow: 0 10px 20px rgba(24,39,75,.16);
        }

        .nv-tcard__actions .btn:focus-visible {
            outline: 3px solid var(--nv-primary-300);
            outline-offset: 2px;
        }

/* Single-action cards (dynamic list) read better full width. */
.nv-tcard__actions--single .btn {
    flex: 1 1 100%;
}

/* --- Section heading above a grid ---------------------------------------- */
.nv-teacher-head {
    text-align: center;
    margin: 36px 0 22px;
}

    /* The showcase sits in its own .site_wrapper directly under the dynamic
       results wrapper, so the first heading's top margin lands on top of that
       wrapper's padding-bottom and reads as dead space. The wrapper padding is
       enough separation on its own. */
    .nv-teacher-head:first-child {
        margin-top: 0;
    }

    .nv-teacher-head h2 {
        margin: 0;
        font-size: clamp(24px, 3vw, 32px);
        color: var(--nv-primary);
    }

    .nv-teacher-head::after {
        content: "";
        display: block;
        width: 72px;
        height: 4px;
        margin: 14px auto 0;
        border-radius: 999px;
        background: linear-gradient(90deg,var(--nv-accent),var(--nv-saffron));
    }

/* --- Direct-enrolment CTA ------------------------------------------------
   Programmes with no teacher choice (ePrimary) rendered a lone <a class="btn"> where the card
   grid would be: left-aligned against nothing, floating in ~200px of empty band, with no clue
   why there were no teachers. Give that state the same card language as the grid it replaces,
   centred on the same axis as the section headings below it. */
/* Own both gaps outright rather than inheriting them: 8px left the panel almost touching the
   hero, while below it the 4px bottom margin stacked on .main_wrapper's 24px padding before the
   next wrapper's heading. Top margin now clears the hero properly, bottom margin IS the gap to
   "New Courses Launched" (see the .main_wrapper override below that zeroes the padding). */
.nv-enroll-cta {
    max-width: 620px;
    margin: 44px auto 36px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius-lg);
    box-shadow: var(--nv-shadow-sm);
    padding: 34px 32px 36px;
}

/* .main_wrapper's bottom padding is sized for a card grid running to the wrapper edge. A single
   centred panel does not need it, and it only widened the trough before the showcase heading. */
.main_wrapper:has(.nv-enroll-cta) {
    padding-bottom: 0;
}

.nv-enroll-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--nv-primary), var(--nv-primary-700));
    color: #fff;
    font-size: 26px;
    box-shadow: 0 10px 24px rgba(49,71,151,.30);
}

.nv-enroll-cta__title {
    margin: 0;
    font-size: clamp(21px, 2.4vw, 26px);
    color: var(--nv-primary);
}

.nv-enroll-cta__sub {
    margin: 10px auto 24px;
    max-width: 44ch;
    color: var(--nv-muted);
    font-size: 15px;
}

.nv-enroll-cta__btn {
    padding: .72rem 1.7rem;
}

/* Same treatment for the "no teachers" notice — it was an <h3 class="pl-5"> inside the row,
   so it picked up an arbitrary left pad and shouted at heading size. */
.nv-teacher-empty {
    max-width: 620px;
    margin: 8px auto 4px;
    padding: 26px 24px;
    text-align: center;
    border: 1px dashed var(--nv-line);
    border-radius: var(--nv-radius-lg);
    background: var(--nv-bg-soft);
    color: var(--nv-muted);
    font-family: var(--nv-head);
    font-weight: 600;
    font-size: 16px;
}

@media (max-width: 575.98px) {
    .nv-tcard__actions .btn {
        flex: 1 1 100%;
    }

    .nv-enroll-cta {
        padding: 28px 20px 30px;
    }
}