/* 
 * Immanuel Online School - Central CSS (modern-custom.css)
 * -------------------------------------------------------
 * Design system applied to all pages (About, Welcome, What we offer, Find out more, Contact, etc.)
 *
 * TO CHANGE SITE-WIDE STYLE: edit the :root variables below (lines 14–75).
 *   - Colors: --ios-gold, --ios-quick-gold, --ios-heading-color, etc.
 *   - Track cards spacing: --ios-track-hero-padding-bottom, --ios-track-carousel-padding-bottom,
 *     --ios-track-content-padding-top (controls gap between cards and Options section)
 *   - Body text: --ios-body-font, --ios-body-size, --ios-body-color
 *
 * SECTION HEADINGS (Vision, Ethos, Options, etc.): dark blue #192f59, 18px, 600, not capitals
 * PARAGRAPH TEXT: Inter 16px, #4a5568, line-height 1.65 (same as About)
 * LINKS in content: gold (var(--ios-gold)) – NOT headings
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Outfit:wght@300;400;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Color Palette - Vibrant Dark UI */
    --ios-bg-black: #05010d;
    --ios-bg-surface: #0e021a;
    --ios-bg-elevated: #1a082e;

    /* Site-wide body/paragraph text – consistent across all pages */
    --ios-body-font: 'Inter', sans-serif;
    --ios-body-size: 14px;
    --ios-body-color: #4a5568;
    --ios-body-line-height: 1.55;

    --ios-accent-cyan: #00f2ff;
    --ios-accent-cyan-dim: rgba(0, 242, 255, 0.15);
    --ios-accent-purple: #9d00ff;
    --ios-accent-purple-dim: rgba(157, 0, 255, 0.15);

    --ios-text-primary: #ffffff;
    --ios-text-secondary: #a8a0b1;
    --ios-text-muted: #6e657a;

    /* Gradients */
    --ios-grad-primary: linear-gradient(135deg, var(--ios-accent-cyan), var(--ios-accent-purple));
    --ios-grad-dark: linear-gradient(180deg, var(--ios-bg-black), var(--ios-bg-surface));

    /* Quick link boxes – IOS logo gold (refined, less mustard, glittery)
       Tweak to match logo: light=highlights, dark=depth */
    --ios-quick-gold: #d4af37;        /* Main gold – border, button */
    --ios-quick-gold-light: #f0e6c8;  /* Beige-gold highlight */
    --ios-quick-gold-dark: #b8962e;   /* Shadow/depth */

    /* Page content section headings (Vision, Ethos, Options, etc.) – dark blue, NOT gold */
    --ios-heading-color: #192f59;

    /* Site-wide gold – for links, accents, buttons. NOT for section headings. */
    --ios-gold: #c9a227;
    --ios-gold-light: #e8c547;
    --ios-gold-dark: #b8860b;
    --ios-gold-gradient: linear-gradient(135deg, #b8860b 0%, #c9a227 35%, #e8c547 65%, #c9a227 100%);

    /* Layout & Effects */
    --ios-container-width: 1200px;
    --ios-radius: 16px;
    --ios-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --ios-glass: blur(12px) saturate(180%);
    --ios-shadow-glow: 0 0 20px rgba(0, 242, 255, 0.25);

    /* Track cards (whatweoffer, teaching) – COMPACT spacing to prevent bottom border/shadow clipping */
    --ios-track-hero-padding-bottom: 8px;
    --ios-track-hero-padding-bottom-mobile: 16px;
    --ios-track-carousel-padding-bottom: 12px;
    --ios-track-carousel-inner-padding-bottom: 16px;
    --ios-track-content-padding-top: 24px;
    --ios-track-card-border-radius: 8px;
    --ios-track-card-border-width: 2px;
}

/* Mobile/desktop header: theme handles swap at 1260px – no overrides */

/* Base Body Styles */
body.kingster-body {
    background-color: var(--ios-bg-black) !important;
    color: var(--ios-text-secondary);
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
    margin: 0;
    overflow-x: hidden;
}

h1,
h2 {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 600;
    margin-top: 0;
}

h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    margin-top: 0;
}

/* Central: page content section headings (Vision, Ethos, Options, etc.) – dark blue, not capitals */
.kingster-body .kingster-page-wrapper h2,
.kingster-body .kingster-page-wrapper h3,
.kingster-body .kingster-page-wrapper h4,
.kingster-body .kingster-page-wrapper h5,
.kingster-body .kingster-page-wrapper h6,
.gdlr-core-page-builder-body .gdlr-core-skin-title,
.gdlr-core-page-builder-body .gdlr-core-title-item-title {
    color: var(--ios-heading-color) !important;
    text-transform: none !important;
}

/* Fallback dark headings where above doesn't apply */
.kingster-body h1,
.kingster-body h2,
.kingster-body h3,
.kingster-body h4,
.kingster-body h5,
.kingster-body h6 {
    color: var(--ios-heading-color) !important;
}

/* All h1 and h2 use EB Garamond site-wide */
.kingster-body h1,
.kingster-body h2,
.kingster-page-title,
.kingster-page-title-wrap h1,
.kingster-page-title-wrap .kingster-page-title {
    font-family: 'EB Garamond', Georgia, serif !important;
}

/* Page titles (Contact us, Vision and ethos, etc.) – white on dark hero/banner */
.kingster-page-title,
.kingster-page-title-wrap h1,
.kingster-page-title-wrap .kingster-page-title {
    color: #ffffff !important;
}

/* Dark sections: white headings (Column Service, etc.) – must override default */
.gdlr-core-page-builder-body [data-skin="Column Service"] h1,
.gdlr-core-page-builder-body [data-skin="Column Service"] h2,
.gdlr-core-page-builder-body [data-skin="Column Service"] h3,
.gdlr-core-page-builder-body [data-skin="Column Service"] h4,
.gdlr-core-page-builder-body [data-skin="Column Service"] h5,
.gdlr-core-page-builder-body [data-skin="Column Service"] h6,
.gdlr-core-page-builder-body [data-skin="Column Service"] .gdlr-core-skin-title {
    color: #ffffff !important;
}

/* Column Service paragraphs – same font/size as tabs content (Inter 16px), but white (dark bg) */
.gdlr-core-page-builder-body [data-skin="Column Service"] .gdlr-core-column-service-content,
.gdlr-core-page-builder-body [data-skin="Column Service"] .gdlr-core-column-service-content p {
    font-family: var(--ios-body-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
}

/* Blue Title captions (Enhanced Curriculum row) – same font/size for consistency */
.gdlr-core-page-builder-body [data-skin="Blue Title"] .gdlr-core-column-service-caption {
    font-family: var(--ios-body-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

/* Personnel skin (Vision, Ethos, Faith) – dark blue headings, same as About */
.gdlr-core-page-builder-body [data-skin="Personnel"] .gdlr-core-skin-title,
.gdlr-core-page-builder-body [data-skin="Personnel"] .gdlr-core-title-item-title {
    color: var(--ios-heading-color) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Welcome & About – section headings (Vision, Ethos style) – dark blue */
.gdlr-core-personnel-list-title,
.gdlr-core-page-builder-body [data-skin="Personnel"] .gdlr-core-personnel-list-title {
    color: var(--ios-heading-color) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Personnel body text – match About */
.gdlr-core-page-builder-body [data-skin="Personnel"] .gdlr-core-personnel-list-content,
.gdlr-core-page-builder-body [data-skin="Personnel"] .gdlr-core-personnel-list-content p {
    font-family: var(--ios-body-font) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: var(--ios-body-color) !important;
}

/* Central: page content links – gold (same as About "Click here") */
.gdlr-core-page-builder-body .gdlr-core-text-box-item-content p a,
.gdlr-core-page-builder-body .gdlr-core-personnel-list-content p a,
.gdlr-core-pbf-wrapper .gdlr-core-text-box-item-content p a,
.kingster-page-wrapper .gdlr-core-text-box-item-content p a,
.kingster-page-wrapper .gdlr-core-personnel-list-content p a {
    color: var(--ios-gold) !important;
}
.gdlr-core-page-builder-body .gdlr-core-text-box-item-content p a:hover,
.gdlr-core-page-builder-body .gdlr-core-personnel-list-content p a:hover,
.gdlr-core-pbf-wrapper .gdlr-core-text-box-item-content p a:hover,
.kingster-page-wrapper .gdlr-core-text-box-item-content p a:hover,
.kingster-page-wrapper .gdlr-core-personnel-list-content p a:hover {
    color: var(--ios-gold-light) !important;
}

/* ==========================================
   REMOVE UNDERLINES – all links site-wide
   Nav bar, header, top bar, footer, content, mobile menu.
   Overrides inline styles and theme defaults.
   ========================================== */
a,
a:hover,
a:focus,
a:visited,
/* Nav & header */
.kingster-navigation a,
.kingster-main-menu a,
.sf-menu a,
.kingster-top-bar a,
.kingster-top-bar-menu a,
.kingster-mobile-header a,
.kingster-mm-menu-wrap a,
#menu-main-navigation a,
/* Footer */
.kingster-footer-wrapper a,
.kingster-footer-wrapper .gdlr-core-custom-menu-widget a,
.menu-our-campus-container a,
.menu-campus-life-container a,
.menu-academics-container a,
/* Content links */
.gdlr-core-page-builder-body a,
.kingster-page-wrapper a {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Links wrapped in <u> – remove underline from u when inside link */
a u,
a u:hover {
    text-decoration: none !important;
}

/* Footer widget titles – remove any link underline on hover */
.kingster-footer-wrapper .kingster-widget-title a {
    text-decoration: none !important;
}

/* Nav slide bar (animated underline under menu items) – remove */
.kingster-navigation .kingster-navigation-slide-bar {
    display: none !important;
}

/* Top navigation labels (Home, School Information, Academic Information, News and Events, etc.) – Inter */
.kingster-navigation .sf-menu > li > a,
.kingster-main-menu .sf-menu > li > a,
.kingster-mm-menu-wrap .m-menu > li > a,
#kingster-mobile-menu .m-menu > li > a {
    font-family: 'Inter', sans-serif !important;
}

/* Footer: headings (School Information, Academic Information, etc.) – white, Inter */
.kingster-footer-wrapper .kingster-widget-title,
.kingster-footer-wrapper h1,
.kingster-footer-wrapper h2,
.kingster-footer-wrapper h3,
.kingster-footer-wrapper h4,
.kingster-footer-wrapper h5,
.kingster-footer-wrapper h6 {
    color: #ffffff !important;
}

.kingster-footer-wrapper .kingster-widget-title {
    font-family: 'Inter', sans-serif !important;
}

/* ==========================================
   SITE-WIDE PARAGRAPH TEXT – consistent font & size
   All normal body/paragraph text matches: 14px, Inter, #4a5568
   ========================================== */
/* Main page content – 16px, Inter, same as About (Vision, Ethos paragraphs) */
.gdlr-core-page-builder-body p,
.gdlr-core-page-builder-body .gdlr-core-skin-content,
.gdlr-core-page-builder-body .gdlr-core-text-box-item-content,
.gdlr-core-page-builder-body .gdlr-core-text-box-item-content p,
.gdlr-core-page-builder-body .gdlr-core-personnel-list-content,
.gdlr-core-page-builder-body .gdlr-core-personnel-list-content p,
.gdlr-core-page-builder-body .gdlr-core-icon-list-content,
.gdlr-core-page-builder-body .gdlr-core-icon-list-content-wrap,
/* PBF wrapper layout (timetable_main, assessmentandreporting, etc.) */
.gdlr-core-pbf-wrapper .gdlr-core-text-box-item-content,
.gdlr-core-pbf-wrapper .gdlr-core-text-box-item-content p,
.gdlr-core-pbf-wrapper .gdlr-core-pbf-column-content p,
.gdlr-core-pbf-wrapper .gdlr-core-skin-content,
/* Page wrapper catch-all */
.kingster-page-wrapper .gdlr-core-text-box-item-content,
.kingster-page-wrapper .gdlr-core-text-box-item-content p,
.ios-offer-intro,
.ios-offer-section p,
.ios-hero-sub,
.ios-findoutmore-intro,
.ios-info-card-desc,
/* Text widgets (news/special events pages, sidebars, etc.) */
.textwidget,
.textwidget p,
.kingster-page-wrapper .textwidget,
.kingster-page-wrapper .textwidget p,
.kingster-sidebar-area .textwidget,
.kingster-sidebar-area .textwidget p,
.gdlr-core-page-builder-body .textwidget,
.gdlr-core-page-builder-body .textwidget p,
.gdlr-core-page-builder-body .widget_text .textwidget,
.gdlr-core-page-builder-body .kingster-widget .textwidget,
.gdlr-core-pbf-wrapper .textwidget,
.gdlr-core-pbf-sidebar-right .textwidget,
.gdlr-core-pbf-sidebar-right .textwidget p,
.gdlr-core-sidebar-item .textwidget,
.gdlr-core-sidebar-item .textwidget p,
.gdlr-core-pbf-sidebar-content .textwidget,
.widget_text .textwidget,
/* Lead/intro paragraphs (theiosstory, etc.) */
p.lead,
.lead {
    font-family: var(--ios-body-font) !important;
    font-size: var(--ios-body-size) !important;
    color: var(--ios-body-color) !important;
    line-height: var(--ios-body-line-height) !important;
}

/* Main content paragraphs – 16px to match About (Vision, Ethos text) */
.gdlr-core-page-builder-body .gdlr-core-text-box-item-content,
.gdlr-core-page-builder-body .gdlr-core-text-box-item-content p,
.gdlr-core-page-builder-body .gdlr-core-personnel-list-content,
.gdlr-core-page-builder-body .gdlr-core-personnel-list-content p,
.gdlr-core-pbf-wrapper .gdlr-core-text-box-item-content,
.gdlr-core-pbf-wrapper .gdlr-core-text-box-item-content p,
.gdlr-core-pbf-wrapper .gdlr-core-pbf-column-content p,
.kingster-page-wrapper .gdlr-core-text-box-item-content,
.kingster-page-wrapper .gdlr-core-text-box-item-content p,
.ios-offer-intro,
.ios-offer-section p,
.ios-findoutmore-intro {
    font-size: 16px !important;
    line-height: 1.65 !important;
}

/* List items in main content – same as paragraphs */
.gdlr-core-page-builder-body .gdlr-core-icon-list-content,
.gdlr-core-page-builder-body .gdlr-core-icon-list-item li,
.gdlr-core-page-builder-body .gdlr-core-icon-list-item .gdlr-core-icon-list-content,
.gdlr-core-pbf-wrapper .gdlr-core-text-box-item-content li,
.gdlr-core-pbf-wrapper .gdlr-core-pbf-column-content ul li,
.gdlr-core-page-builder-body .gdlr-core-text-box-item-content li,
.kingster-page-wrapper .gdlr-core-text-box-item-content li,
.ios-offer-features li {
    font-family: var(--ios-body-font) !important;
    font-size: var(--ios-body-size) !important;
    color: var(--ios-body-color) !important;
    line-height: var(--ios-body-line-height) !important;
}

/* Footer textwidget – keep font/size consistent but preserve footer color */
.kingster-footer-wrapper .textwidget {
    font-family: var(--ios-body-font) !important;
    font-size: var(--ios-body-size) !important;
    line-height: var(--ios-body-line-height) !important;
}

/* ==========================================
   UNIFIED PREMIUM HEADER (Standalone Integration)
   ========================================== */
.ios-top-bar {
    background: #0a0820 !important;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Hide top bar on homepage for cleaner hero match to design */
body.home .ios-top-bar {
    display: none;
}

.ios-top-bar-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ios-top-bar-left {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 500;
}

.ios-top-bar-left i {
    color: var(--ios-accent-cyan);
    margin-right: 8px;
}

.ios-top-bar-right a {
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
    transition: var(--ios-transition);
}

.ios-top-bar-right a:hover {
    color: var(--ios-accent-cyan);
}

.ios-top-bar-right .separator {
    color: rgba(255, 255, 255, 0.2);
    padding: 0 10px;
}

/* Main header – lighter, more gradient, modern (matches top bar) */
.ios-header-unified {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 25%, #3b82f6 50%, #60a5fa 100%) !important;
    backdrop-filter: var(--ios-glass);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 9999;
}

.ios-header-unified .ios-header-container {
    position: relative;
}

.ios-header-container {
    max-width: 1400px;
    /* Wider for "far left" logo */
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 100px;
}

.ios-logo-wrap {
    display: flex;
    align-items: center;
    margin-right: auto;
    /* Push others to right */
}

.ios-main-logo {
    max-width: 160px !important;
    height: auto !important;
    transition: var(--ios-transition);
}

.ios-main-logo:hover {
    transform: scale(1.05);
}

.ios-navigation {
    display: flex;
    align-items: center;
}

.ios-main-menu {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ios-main-menu>li {
    position: relative;
}

.ios-main-menu>li>a {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 35px 0;
    transition: var(--ios-transition);
    display: block;
}

.ios-main-menu>li>a:hover {
    color: var(--ios-accent-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
}

/* Active nav item – no underline */
.ios-main-menu>li.current-menu-item>a,
.ios-main-menu>li.current-menu-item>a:hover {
    color: #ffffff !important;
}

.ios-main-menu>li.current-menu-item>a::after {
    display: none !important;
}

/* Mega Menu Dropdown */
.ios-mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1a1a4a, #2a0845) !important;
    min-width: 650px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    border-radius: var(--ios-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    margin-top: 20px;
    z-index: 10000;
    backdrop-filter: var(--ios-glass);
}

.ios-main-menu>li:hover .ios-mega-menu {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
}

.ios-mega-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

.ios-mega-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ios-mega-menu ul li {
    margin-bottom: 12px;
}

.ios-mega-menu ul li a {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
    display: block;
    padding: 5px 0;
}

.ios-mega-menu ul li a:hover {
    color: var(--ios-accent-cyan) !important;
    padding-left: 8px;
}

.ios-mega-logo {
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ios-mega-logo img {
    max-width: 120px;
    opacity: 0.2;
    filter: brightness(0) invert(1);
}

/* Register Button Styles Repurposed */
.ios-menu-register-button a {
    background: var(--ios-grad-primary) !important;
    color: #ffffff !important;
    padding: 12px 30px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    box-shadow: 0 5px 15px rgba(157, 0, 255, 0.3) !important;
}

.ios-menu-register-button a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(157, 0, 255, 0.5) !important;
}

.ios-mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
}

/* RESPONSIVE HEADER */
@media (max-width: 1100px) {
    .ios-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: linear-gradient(180deg, #0f0c29, #1a1740);
        flex-direction: column;
        padding: 20px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: all 0.35s ease;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .ios-header-unified.nav-open .ios-navigation {
        max-height: 90vh;
        overflow-y: auto;
        opacity: 1;
        visibility: visible;
    }

    .ios-main-menu {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }

    .ios-main-menu>li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .ios-main-menu>li>a {
        padding: 16px 0;
    }

    .ios-mega-menu {
        position: static;
        transform: none;
        min-width: 100%;
        margin-top: 0;
        padding: 15px 0 15px 20px;
        box-shadow: none;
        border-radius: 0;
        border-left: 3px solid var(--ios-accent-cyan);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
    }

    .ios-main-menu>li:hover .ios-mega-menu,
    .ios-main-menu>li.mega-open .ios-mega-menu {
        max-height: 500px;
        opacity: 1;
    }

    .ios-mega-columns {
        grid-template-columns: 1fr;
    }

    .ios-mega-logo {
        display: none;
    }

    .ios-mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 8px;
    }

    .ios-mobile-toggle.active i::before {
        content: "\f00d";
    }

    .ios-header-container {
        min-height: 80px;
    }
}

@media (max-width: 768px) {
    .ios-top-bar-container {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        padding: 10px 20px;
    }
}

/* Modern Sections */
.ios-section {
    padding: 120px 0;
    position: relative;
    z-index: 1;
}

.ios-container {
    max-width: var(--ios-container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Elements */
.ios-hero-highlight {
    color: var(--ios-accent-cyan);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 24px;
    display: block;
    animation: fadeInUp 0.8s ease-out;
}

.ios-hero-title {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 84px;
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 40px;
    color: var(--ios-text-primary) !important;
    animation: fadeInUp 1s ease-out;
}

.ios-hero-title span {
    background: var(--ios-grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Card Modern Grid */
.ios-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin-top: 60px;
}

.ios-feature-card {
    background: var(--ios-bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 50px 40px;
    transition: var(--ios-transition);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.ios-feature-card:hover {
    background: var(--ios-bg-elevated);
    border-color: rgba(0, 242, 255, 0.3);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.ios-feature-card i {
    font-size: 32px;
    color: var(--ios-accent-cyan);
    margin-bottom: 30px;
    display: block;
}

.ios-feature-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.ios-feature-card p {
    font-size: 16px;
    color: var(--ios-text-secondary);
}

/* Modern Tabs */
.ios-tabs-nav {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 40px;
}

.ios-tab-btn {
    padding: 15px 30px;
    color: var(--ios-text-secondary);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ios-transition);
    position: relative;
}

.ios-tab-btn.active {
    color: var(--ios-accent-cyan);
}

.ios-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--ios-accent-cyan);
    box-shadow: var(--ios-shadow-glow);
}

/* ==========================================
   HERO SECTION (Homepage) – fills first screen, content midway
   ========================================== */
.ios-hero-section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

/* Video + overlay: fill the hero, stacked behind content */
.ios-hero-video-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
}

.ios-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ios-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay removed – video fully visible in all views */

/* ==========================================
   TOP BAR: Hidden for clean nav bar (Contact/Learning Portal removed)
   To restore: remove the .kingster-top-bar { display: none } rule below
   ========================================== */
.kingster-top-bar {
    display: none !important;
}

/* ==========================================
   HEADER AND FOOTER – Default (main site)
   White header, slightly bigger logo, footer deep blue (one shade darker).
   ========================================== */
.kingster-header-background,
.kingster-sticky-menu-placeholder,
.kingster-header-style-boxed.kingster-fixed-navigation .kingster-header-background,
.kingster-header-wrap .kingster-header-background,
.kingster-animate-fixed-navigation .kingster-header-background,
.kingster-mobile-header.kingster-header-background {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

.kingster-header-wrap.kingster-header-style-plain {
    border-color: #e8e8e8 !important;
}

/* Main site: slightly taller header bar for bigger logo */
.kingster-header-container-inner {
    min-height: 100px !important;
    padding: 16px 0 !important;
}

/* Main site footer: deep blue, one shade darker than previous */
.kingster-footer-wrapper {
    background: #0b0918 !important;
    background-color: #0b0918 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.kingster-footer-wrapper a {
    color: rgba(255, 255, 255, 0.9) !important;
}

.kingster-footer-wrapper a:hover {
    color: var(--ios-gold) !important;
}

.kingster-copyright-wrapper {
    background: #080612 !important;
    background-color: #080612 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.kingster-copyright-wrapper a {
    color: var(--ios-gold) !important;
}

.kingster-copyright-wrapper a:hover {
    color: var(--ios-gold-light) !important;
}

/* ==========================================
   HOME2 ONLY – Dark blue/purple gradient (body.ios-home2)
   Same as previous “dark theme”: gradient header/footer, white+gold nav.
   Applied when URL is /home2 (controller sets body class ios-home2).
   ========================================== */
body.ios-home2 .kingster-header-background,
body.ios-home2 .kingster-sticky-menu-placeholder,
body.ios-home2 .kingster-header-style-boxed.kingster-fixed-navigation .kingster-header-background,
body.ios-home2 .kingster-header-wrap .kingster-header-background,
body.ios-home2 .kingster-animate-fixed-navigation .kingster-header-background,
body.ios-home2 .kingster-mobile-header.kingster-header-background {
    background: linear-gradient(135deg, #0d0a1a 0%, #1a0a2e 25%, #16213e 50%, #1e3a5f 75%, #2d1b4e 100%) !important;
    background-color: transparent !important;
}

body.ios-home2 .kingster-header-wrap.kingster-header-style-plain {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.ios-home2 .kingster-footer-wrapper {
    background: linear-gradient(180deg, #1a0a2e 0%, #16213e 40%, #0d0a1a 100%) !important;
    background-color: #0d0a1a !important;
}

body.ios-home2 .kingster-copyright-wrapper {
    background: linear-gradient(135deg, #0d0a1a 0%, #1a0a2e 100%) !important;
    background-color: #0d0a1a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ==========================================
   MODERN GRADIENT: Top bar + Column Service (Academic Quality section)
   Overrides: kingster-style-custom.css .kingster-top-bar-background (#192f59)
             kingster-style-custom.css #div_1dd7_31 (#1b2945)
   ========================================== */
/* Top bar – lighter, more gradient, modern look (when shown) */
.kingster-top-bar-background {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 30%, #3b82f6 60%, #60a5fa 100%) !important;
}

#div_1dd7_31,
.gdlr-core-pbf-wrapper[data-skin="Column Service"] .gdlr-core-pbf-background-wrap,
#div_1dd7_30 .gdlr-core-pbf-background-wrap {
    background: linear-gradient(135deg, #1a0a2e 0%, #192f59 40%, #1e3a5f 100%) !important;
}

/* Ensure hero parent has no extra padding/layout that pushes content down */
.gdlr-core-pbf-wrapper:has(.ios-hero-section) {
    padding: 0 !important;
}

/* Content: absolutely positioned ON TOP of video/overlay – centered midway in hero */
.ios-hero-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px 80px;
    max-width: 900px;
    margin: 0 auto;
}

.ios-hero-content .ios-hero-title {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: clamp(32px, 5.5vw, 56px);
    font-weight: 800;
    color: #ffffff !important;
    margin-bottom: 24px;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 4px 24px rgba(0, 0, 0, 0.7);
    animation: iosFadeInUp 0.8s ease-out;
    white-space: nowrap;
}

/* Hero subtitle – must override global paragraph rule (higher specificity) */
.ios-hero-content .ios-hero-subtitle,
.ios-hero-content p.ios-hero-subtitle,
.gdlr-core-page-builder-body .ios-hero-content p,
body .ios-hero-section .ios-hero-content p {
    color: #ffffff !important;
    font-size: clamp(16px, 2.2vw, 21px) !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.65 !important;
}

.ios-hero-subtitle {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 2px 12px rgba(0, 0, 0, 0.6);
    margin-bottom: 40px;
    font-weight: 400;
    animation: iosFadeInUp 1s ease-out 0.2s both;
}

.ios-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
    animation: iosFadeInUp 1s ease-out 0.4s both;
}

@keyframes iosFadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ios-btn-primary {
    display: inline-block;
    padding: 12px 32px;
    background: linear-gradient(135deg, #4fc3f7, #9d00ff);
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 8px 25px rgba(157, 0, 255, 0.35);
    box-sizing: border-box;
}

.ios-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(157, 0, 255, 0.5);
    color: #ffffff !important;
}

/* Use box-shadow instead of border – avoids clipping, keeps buttons same height */
.ios-btn-secondary {
    display: inline-block;
    padding: 12px 32px;
    background: transparent;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 6px;
    border: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-sizing: border-box;
}

.ios-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 2px #ffffff;
    color: #ffffff !important;
}

@media (max-width: 640px) {
    .ios-hero-section {
        min-height: 45vh;
    }

    .ios-hero-content .ios-hero-title {
        white-space: normal;
        font-size: 28px;
    }

    .ios-hero-buttons {
        flex-direction: column;
    }

    .ios-btn-primary,
    .ios-btn-secondary {
        width: 100%;
        max-width: 260px;
        text-align: center;
    }
}

/* Remove overlap between hero and services strip on desktop */
@media (min-width: 769px) {
    #gdlr-core-wrapper-1,
    .hp1-col-services {
        margin-top: 0 !important;
    }
}

/* ==========================================
   HOME PAGE ACCORDION (replaces tabs) – EB Garamond titles
   ========================================== */
.ios-home-accordion-wrap {
    max-width: 1320px !important;
    margin: 40px auto 0 !important;
    padding: 0 !important;
    box-shadow: 0 -6px 24px rgba(10, 10, 10, 0.09);
    background-color: #ffffff !important;
    border-radius: 3px;
}

.ios-home-accordion {
    border: 1px solid rgba(25, 47, 89, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.ios-home-accordion-item {
    border-bottom: 1px solid #e8ecf0;
}

.ios-home-accordion-item:last-child {
    border-bottom: none;
}

.ios-home-accordion-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 18px 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 12px;
    transition: background 0.2s ease;
}

.ios-home-accordion-trigger:hover {
    background: rgba(25, 47, 89, 0.03);
}

.ios-home-accordion-item--open .ios-home-accordion-trigger {
    background: rgba(25, 47, 89, 0.05);
}

.ios-home-accordion-trigger-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ios-home-accordion-icon {
    flex-shrink: 0;
    width: 32px;
    height: auto;
}

/* Accordion titles – EB Garamond */
.ios-home-accordion-title {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ios-heading-color) !important;
    text-transform: none !important;
    line-height: 1.35;
}

.ios-home-accordion-trigger .fa-chevron-down {
    font-size: 12px;
    color: #718096;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.ios-home-accordion-item--open .ios-home-accordion-trigger .fa-chevron-down {
    transform: rotate(180deg);
}

.ios-home-accordion-body {
    display: none;
    padding: 0 24px 28px 70px;
}

.ios-home-accordion-item--open .ios-home-accordion-body {
    display: block;
}

.ios-home-accordion-body p {
    font-family: var(--ios-body-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #4a5568 !important;
    line-height: 1.7 !important;
    margin: 0 0 12px;
}

.ios-home-accordion-body p:last-of-type {
    margin-bottom: 0;
}

.ios-home-accordion-body .ios-home-accordion-inner-title {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ios-heading-color) !important;
    margin: 20px 0 12px !important;
    text-transform: none !important;
}

.ios-home-accordion-body .ios-home-accordion-inner-title:first-child {
    margin-top: 0 !important;
}

.ios-home-accordion-wrap .ios-link-green,
.ios-home-accordion-wrap a .ios-link-green {
    color: var(--ios-gold) !important;
}

.ios-home-accordion-wrap a:hover .ios-link-green {
    color: var(--ios-gold-light) !important;
}

.ios-home-accordion-body .ios-video-wrap {
    margin: 12px 0 24px;
    max-width: 640px;
}

.ios-home-accordion-body .ios-video-wrap iframe {
    width: 100%;
    max-width: 640px;
    height: 360px;
    border-radius: 3px;
}

.ios-home-accordion-body .ios-video-wrap video {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
}

.ios-home-accordion-body .ios-video-large {
    max-width: 740px;
}

.ios-home-accordion-body .ios-video-large video {
    width: 100%;
    max-width: 740px;
}

@media (max-width: 767px) {
    .ios-home-accordion-trigger {
        padding: 16px 20px;
    }
    .ios-home-accordion-body {
        padding: 0 20px 24px 20px;
    }
    .ios-home-accordion-title {
        font-size: 16px !important;
    }
    .ios-home-accordion-body .ios-video-wrap iframe {
        height: 220px;
    }
}

/* Legacy tabs (if used elsewhere) */
.ios-modern-tabs-wrap {
    max-width: 1320px !important;
    margin: 40px auto 0 !important;
    padding: 0 !important;
    box-shadow: 0 -6px 24px rgba(10, 10, 10, 0.09);
    background-color: #ffffff !important;
    border-radius: 3px;
}
.ios-modern-tabs-wrap .ios-tabs-header { overflow: hidden; }
.ios-modern-tabs-wrap .ios-tab-trigger { cursor: pointer; padding: 20px 0 20px 40px; transition: background 0.2s ease; }
.ios-modern-tabs-wrap .ios-tab-trigger:last-child { padding-right: 40px; }
.ios-modern-tabs-wrap .ios-tab-trigger-inner { margin-bottom: 0 !important; }
.ios-modern-tabs-wrap .ios-tab-trigger:hover { background: rgba(25, 47, 89, 0.03); }
.ios-modern-tabs-wrap .ios-tab-trigger.gdlr-core-active { background: rgba(25, 47, 89, 0.05); }
.ios-modern-tabs-wrap .ios-tab-trigger .gdlr-core-column-service-title { font-size: 16px !important; font-weight: 500 !important; color: #192f59 !important; text-transform: none !important; }
.ios-modern-tabs-wrap .ios-tab-trigger .gdlr-core-column-service-title-wrap { margin-bottom: 0 !important; }
.ios-modern-tabs-wrap .ios-tab-trigger .gdlr-core-column-service-media { max-width: 36px !important; margin-right: 12px !important; }
.ios-modern-tabs-wrap .ios-tab-trigger .gdlr-core-column-service-media img { max-width: 32px !important; height: auto !important; }
.ios-modern-tabs-wrap .ios-tab-content { display: none; padding: 52px 66px 45px !important; color: #707070 !important; border-top: 1px solid rgba(25, 47, 89, 0.08); }
.ios-modern-tabs-wrap .ios-tab-content.gdlr-core-active { display: block; }
.ios-modern-tabs-wrap .ios-tab-content .gdlr-core-title-item-title,
.ios-modern-tabs-wrap .ios-tab-content h3.gdlr-core-skin-title { font-size: 18px !important; font-weight: 500 !important; color: #192f59 !important; text-transform: none !important; margin: 0 0 16px !important; }
.ios-modern-tabs-wrap .ios-tab-content p { font-family: var(--ios-body-font) !important; font-size: 16px !important; font-weight: 400 !important; color: #4a5568 !important; line-height: 1.7 !important; margin: 0 0 12px; }
.ios-modern-tabs-wrap .ios-tab-content p:last-of-type { margin-bottom: 0; }
.ios-modern-tabs-wrap .ios-tab-content p strong { color: #707070 !important; }
.ios-modern-tabs-wrap .ios-link-green, .ios-modern-tabs-wrap a .ios-link-green { color: var(--ios-gold) !important; }
.ios-modern-tabs-wrap a:hover .ios-link-green { color: var(--ios-gold-light) !important; }
.ios-modern-tabs-wrap .ios-video-wrap { margin: 12px 0 24px; max-width: 640px; }
.ios-modern-tabs-wrap .ios-video-wrap iframe { width: 100%; max-width: 640px; height: 360px; border-radius: 3px; }
.ios-modern-tabs-wrap .ios-video-wrap video { max-width: 100%; height: auto; display: block; border-radius: 3px; }
.ios-modern-tabs-wrap .ios-video-large { max-width: 740px; }
.ios-modern-tabs-wrap .ios-video-large video { width: 100%; max-width: 740px; }
@media (max-width: 767px) {
    .ios-modern-tabs-wrap .ios-tab-trigger { padding: 16px 20px !important; width: 100%; float: none; box-sizing: border-box; }
    .ios-modern-tabs-wrap .ios-tab-trigger:last-child { padding-right: 20px !important; }
    .ios-modern-tabs-wrap .ios-tab-content { padding: 28px 24px 40px !important; }
    .ios-modern-tabs-wrap .ios-video-wrap iframe { height: 220px; }
}

/* ==========================================
   Find out more – School & Academic cards
   (smaller cards + text, shared styling)
   ========================================== */
.ios-findoutmore-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.ios-info-card {
    display: block;
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 3px 14px rgba(10, 10, 10, 0.05);
    border: 1px solid rgba(25, 47, 89, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    color: inherit;
}

.ios-info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(25, 47, 89, 0.12);
}

.ios-info-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(25, 47, 89, 0.08), rgba(25, 47, 89, 0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.ios-info-card-icon i {
    font-size: 18px;
    color: #192f59;
}

.ios-info-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #192f59 !important;
    margin: 0 0 8px !important;
    text-transform: none !important;
}

.ios-info-card-desc {
    font-size: 13px;
    color: #707070 !important;
    line-height: 1.6;
    margin: 0 0 14px !important;
}

.ios-info-card-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--ios-gold) !important;
}

.ios-info-card:hover .ios-info-card-link {
    color: var(--ios-gold-light) !important;
}

.ios-info-card-link i {
    font-size: 12px;
    margin-left: 4px;
}

@media (max-width: 600px) {
    .ios-findoutmore-cards {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   What we offer – 5 tracks + sections
   ========================================== */

/* What we offer page – redesign (wwo-*): no clipping, all 5 cards visible */
body:has(.wwo-page).kingster-body,
body.ios-page-whatweoffer.kingster-body {
    overflow-x: hidden;
    overflow-y: visible !important;
}
body:has(.wwo-page) .kingster-body-outer-wrapper,
body:has(.wwo-page) .kingster-body-wrapper,
body:has(.wwo-page) .kingster-page-wrapper,
body:has(.wwo-page) .gdlr-core-page-builder-body,
.wwo-page,
.wwo-hero,
.wwo-container,
.wwo-tracks-outer,
.wwo-tracks {
    overflow: visible !important;
}

.wwo-page {
    background: #f8fafc;
    padding-bottom: 0;
}

.wwo-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.wwo-hero {
    padding: 48px 0 56px;
    background: #f8fafc;
}

.wwo-hero-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--ios-heading-color) !important;
    text-transform: none !important;
    text-align: left;
    margin: 0 0 8px !important;
    font-family: 'Outfit', sans-serif;
}

.wwo-hero-sub {
    font-size: 15px;
    color: #707070;
    margin: 0 0 8px;
    text-align: left;
}

.wwo-swipe-hint {
    display: none;
    font-size: 13px;
    color: #94a3b8;
    margin: 0 0 16px;
    text-align: left;
}

/* Outer wrapper: padding bottom so card borders/shadows are never cut off */
.wwo-tracks-outer {
    padding: 16px 0 32px;
    margin: 0;
    overflow: visible !important;
}

/* Grid: 5 equal columns on large screens; wrap on smaller */
.wwo-tracks {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    align-items: stretch;
    overflow: visible !important;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wwo-track-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #ffffff;
    border: 2px solid var(--ios-quick-gold);
    border-radius: 10px;
    padding: 20px 18px 22px;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    min-height: 160px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.12);
    overflow: visible;
    flex-shrink: 0;
}

.wwo-track-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.2), 0 0 0 2px var(--ios-quick-gold);
}

.wwo-track-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: var(--ios-gold-gradient) !important;
    border: 2px solid var(--ios-heading-color);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
    transition: transform 0.25s ease;
}

.wwo-track-card:hover .wwo-track-card-icon {
    transform: scale(1.05);
}

.wwo-track-card-icon i {
    font-size: 22px;
    color: var(--ios-heading-color);
}

.wwo-track-card-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ios-heading-color) !important;
    margin: 0 0 8px !important;
    text-transform: none !important;
    font-family: 'Outfit', sans-serif;
}

.wwo-track-card-desc {
    font-size: 13px !important;
    color: #707070 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    flex-grow: 1;
}

.wwo-content {
    padding: 0 0 80px;
    background: #ffffff;
    overflow: visible !important;
}

.wwo-content .wwo-container {
    padding-top: 8px;
}

/* Tablet: 2–3 columns so all 5 cards visible without horizontal scroll */
@media (max-width: 992px) {
    .wwo-tracks {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .wwo-swipe-hint {
        display: block;
    }
}

/* Small tablet / large phone: still 2 columns, smaller cards */
@media (max-width: 768px) {
    .wwo-hero {
        padding: 36px 0 40px;
    }
    .wwo-container {
        padding: 0 20px;
    }
    .wwo-tracks-outer {
        padding: 12px 0 28px;
    }
    .wwo-tracks {
        gap: 14px;
    }
    .wwo-track-card {
        min-height: 150px;
        padding: 18px 16px 20px;
    }
    .wwo-track-card-icon {
        width: 44px;
        height: 44px;
    }
    .wwo-track-card-icon i {
        font-size: 20px;
    }
    .wwo-track-card-title {
        font-size: 16px !important;
    }
    .wwo-content {
        padding: 0 0 48px;
    }
}

/* Mobile: horizontal scroll so all 5 cards visible and nothing cut off */
@media (max-width: 600px) {
    .wwo-hero {
        padding: 28px 0 36px;
    }
    .wwo-container {
        padding: 0 16px;
    }
    .wwo-hero-title {
        font-size: 20px !important;
    }
    .wwo-hero-sub {
        font-size: 14px;
        margin-bottom: 12px;
    }
    .wwo-tracks-outer {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        margin: 0 -16px;
        padding: 12px 16px 28px;
    }
    .wwo-tracks-outer::-webkit-scrollbar {
        height: 6px;
    }
    .wwo-tracks-outer::-webkit-scrollbar-thumb {
        background: rgba(25, 47, 89, 0.25);
        border-radius: 3px;
    }
    .wwo-tracks-outer::-webkit-scrollbar-track {
        background: rgba(25, 47, 89, 0.06);
        border-radius: 3px;
    }
    .wwo-tracks {
        grid-template-columns: repeat(5, minmax(220px, 1fr));
        grid-auto-flow: column;
        gap: 14px;
        scroll-snap-type: x mandatory;
        padding: 0 4px;
    }
    .wwo-track-card {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        min-width: 220px;
        min-height: 140px;
        padding: 16px 14px 18px;
    }
    .wwo-track-card-title {
        font-size: 15px !important;
    }
    .wwo-track-card-desc {
        font-size: 12px !important;
    }
}

.ios-whatweoffer-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Central: five tracks + Your Live Track Journey – same size, font, colour */
.ios-section-title,
.ios-teaching-journey-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--ios-heading-color) !important;
    text-transform: none !important;
    text-align: left;
    margin: 0 0 8px !important;
}

.ios-hero-sub,
.ios-teaching-journey-sub {
    text-align: left;
    font-size: 15px;
    color: #707070;
    margin: 0 0 28px;
}

/* 5 Track cards – prevent bottom clipping. Compact shadow (8px) + padding so borders stay visible. */
body:has(.ios-whatweoffer-hero),
.kingster-body-outer-wrapper:has(.ios-whatweoffer-hero),
.kingster-page-wrapper:has(.ios-whatweoffer-hero),
.gdlr-core-page-builder-body:has(.ios-whatweoffer-hero),
.ios-whatweoffer-hero,
.ios-whatweoffer-hero .ios-whatweoffer-container,
.ios-tracks-carousel-wrap,
.ios-tracks-carousel {
    overflow: visible !important;
}

/* Force overflow visible on the entire page hierarchy (whatweoffer, teaching) */
body:has(.ios-whatweoffer-hero) .kingster-body-outer-wrapper,
body:has(.ios-whatweoffer-hero) .kingster-body-wrapper,
.kingster-body-outer-wrapper:has(.ios-whatweoffer-hero),
.kingster-body-wrapper:has(.ios-whatweoffer-hero) {
    overflow: visible !important;
}

/* What we offer page only: prevent any clipping of track cards */
body.ios-page-whatweoffer.kingster-body {
    overflow: visible !important;
}
body.ios-page-whatweoffer .kingster-body-outer-wrapper,
body.ios-page-whatweoffer .kingster-body-wrapper,
body.ios-page-whatweoffer .kingster-page-wrapper,
body.ios-page-whatweoffer .gdlr-core-page-builder-body,
body.ios-page-whatweoffer .ios-whatweoffer-hero,
body.ios-page-whatweoffer .ios-whatweoffer-hero .ios-whatweoffer-container,
body.ios-page-whatweoffer .ios-whatweoffer-content {
    overflow: visible !important;
}

/* No drop shadow on whatweoffer cards – border only, so nothing extends outside the box */
body.ios-page-whatweoffer .ios-track-card {
    box-shadow: none;
    contain: none;
}
body.ios-page-whatweoffer .ios-track-card:hover {
    box-shadow: 0 0 0 2px var(--ios-quick-gold);
}
/* Spacer below track cards (whatweoffer) - hidden, no longer needed */
.ios-tracks-carousel-spacer {
    display: none;
}

.ios-whatweoffer-hero {
    padding: 48px 0 var(--ios-track-hero-padding-bottom) !important;
}

.ios-whatweoffer-hero .ios-whatweoffer-container {
    overflow: visible !important;
}

.ios-tracks-carousel-wrap {
    overflow: visible !important;
    padding-bottom: var(--ios-track-carousel-padding-bottom);
    margin-bottom: 0;
}

.ios-tracks-carousel {
    overflow: visible !important;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    padding: 12px 0 var(--ios-track-carousel-inner-padding-bottom);
    align-items: stretch;
}

.ios-track-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #ffffff;
    border: var(--ios-track-card-border-width) solid var(--ios-quick-gold);
    border-radius: var(--ios-track-card-border-radius);
    padding: 18px 16px 20px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.12), 0 0 0 1px rgba(212, 175, 55, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    min-height: 150px;
    box-sizing: border-box;
    overflow: visible;
    flex-shrink: 0;
    margin-bottom: 0;
}

.ios-track-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.18), 0 0 0 2px var(--ios-quick-gold);
}

/* Static track cards (teaching page) – no link, default cursor */
.ios-tracks-static .ios-track-card {
    cursor: default;
    text-decoration: none;
}

.ios-track-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: transform 0.25s ease;
}

.ios-track-card:hover .ios-track-card-icon {
    transform: scale(1.05);
}

.ios-track-card-icon i {
    font-size: 22px;
    color: var(--ios-heading-color);
}

/* Track card icons: blue outline, gold inside – grand, professional */
.ios-track-card--live .ios-track-card-icon,
.ios-track-card--nsw .ios-track-card-icon,
.ios-track-card--open .ios-track-card-icon,
.ios-track-card--master .ios-track-card-icon,
.ios-track-card--schools .ios-track-card-icon {
    background: var(--ios-gold-gradient) !important;
    border: 2px solid var(--ios-heading-color);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
}

.ios-track-card-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ios-heading-color) !important;
    margin: 0 0 6px !important;
    text-transform: none !important;
}

.ios-track-card-desc {
    font-size: 13px !important;
    color: #707070 !important;
    line-height: 1.48 !important;
    margin: 0 !important;
}

/* Swipe hint – visible only on mobile */
.ios-swipe-hint {
    display: none;
    font-size: 13px;
    color: #94a3b8;
    margin: 0 0 12px;
    text-align: center;
}

/* Mobile: swipeable track carousel – works on both whatweoffer and teaching */
@media (max-width: 992px) {
    .ios-swipe-hint {
        display: block;
    }

    .ios-tracks-carousel-wrap {
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        touch-action: pan-x pan-y pinch-zoom;
        padding-bottom: var(--ios-track-carousel-padding-bottom);
        margin-bottom: 4px;
        margin-left: -24px;
        margin-right: -24px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .ios-tracks-carousel-wrap::-webkit-scrollbar {
        height: 6px;
    }

    .ios-tracks-carousel-wrap::-webkit-scrollbar-thumb {
        background: rgba(25, 47, 89, 0.25);
        border-radius: 3px;
    }

    .ios-tracks-carousel-wrap::-webkit-scrollbar-track {
        background: rgba(25, 47, 89, 0.06);
        border-radius: 3px;
    }

    .ios-tracks-carousel {
        grid-template-columns: repeat(5, minmax(260px, 1fr));
        grid-auto-flow: column;
        gap: 16px;
        scroll-snap-type: x mandatory;
        padding: 4px 4px 16px;
    }

    .ios-track-card {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        min-width: 260px;
        min-height: 150px;
        padding: 18px 16px 20px;
    }
}

@media (max-width: 600px) {
    .ios-tracks-carousel-wrap {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .ios-whatweoffer-container {
        padding: 0 16px;
    }

    .ios-tracks-carousel {
        grid-template-columns: repeat(5, minmax(240px, 1fr));
        gap: 14px;
    }

    .ios-track-card {
        min-width: 240px;
        min-height: 140px;
        padding: 16px 14px 18px;
    }

    .ios-track-card-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 10px;
    }

    .ios-track-card-icon i {
        font-size: 20px;
    }

    .ios-track-card-title { font-size: 15px !important; }
    .ios-track-card-desc { font-size: 13px !important; }
    .ios-section-title { font-size: 20px !important; margin-bottom: 6px !important; }
    .ios-hero-sub { font-size: 14px !important; margin-bottom: 20px !important; }

    .ios-whatweoffer-hero {
        padding: 32px 0 var(--ios-track-hero-padding-bottom-mobile) !important;
    }
}

/* Content sections – full width, no sidebar */
.ios-whatweoffer-content {
    padding: 0 0 80px;
    background: #ffffff;
}

.ios-offer-section {
    background: #ffffff;
    border-radius: 14px;
    padding: 32px 36px;
    margin-bottom: 24px;
    scroll-margin-top: 24px;
    box-shadow: 0 4px 24px rgba(25, 47, 89, 0.08), 0 0 0 1px rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.25);
}

.ios-offer-section:last-child {
    margin-bottom: 0;
}

.ios-offer-section-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.ios-offer-section-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Section icons: blue outline, gold inside – grand, professional */
.ios-offer-section-icon--live,
.ios-offer-section-icon--nsw,
.ios-offer-section-icon--open,
.ios-offer-section-icon--master,
.ios-offer-section-icon--schools,
.ios-offer-section-icon--ease,
.ios-offer-section-icon--multi {
    background: var(--ios-gold-gradient) !important;
    border: 2px solid var(--ios-heading-color);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
}

.ios-offer-section-icon i {
    font-size: 24px;
    color: var(--ios-heading-color) !important;
}

/* Match About "Vision" heading style – dark blue */
.ios-offer-section-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ios-heading-color) !important;
    margin: 0 !important;
    text-transform: none !important;
}

.ios-offer-intro {
    margin: 0 0 18px;
}

/* Feature lists – compact, colourful bullets */
.ios-offer-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ios-offer-features li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(25, 47, 89, 0.04);
    font-family: var(--ios-body-font) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: var(--ios-body-color) !important;
}

.ios-offer-features li:last-child {
    border-bottom: none;
}

.ios-bullet {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 2px solid var(--ios-quick-gold);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.ios-bullet i {
    color: #fff;
}

/* All bullets: dark blue to match headings, gold outline – grand, royal, professional */
.ios-bullet--green,
.ios-bullet--blue,
.ios-bullet--teal,
.ios-bullet--purple,
.ios-bullet--coral,
.ios-bullet--gold {
    background: linear-gradient(135deg, #192f59 0%, #1e3a5f 100%) !important;
    box-shadow: 0 2px 8px rgba(25, 47, 89, 0.25);
}

.ios-bullet--green i,
.ios-bullet--blue i,
.ios-bullet--teal i,
.ios-bullet--purple i,
.ios-bullet--coral i,
.ios-bullet--gold i {
    color: #ffffff !important;
}

/* Two-column grid for long lists */
.ios-offer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 48px;
}

.ios-offer-grid .ios-offer-features li {
    padding: 8px 0;
}

.ios-offer-features--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.ios-offer-features--inline li {
    border-bottom: none;
    padding: 0;
    flex: 0 0 auto;
    width: calc(50% - 12px);
}

.ios-offer-features--compact li {
    padding: 6px 0;
}

.ios-offer-link {
    color: #2563eb !important;
    font-weight: 500;
    text-decoration: none;
}

.ios-offer-link:hover {
    text-decoration: none !important;
}

.ios-offer-section p a {
    color: #2563eb !important;
}

.ios-offer-section--compact {
    padding: 28px 36px;
}

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

    .ios-whatweoffer-content {
        padding: 0 0 48px;
    }

    .ios-offer-section {
        padding: 24px 20px;
    }

    .ios-offer-section-header {
        gap: 14px;
    }

    .ios-offer-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ios-offer-features--inline li {
        width: 100%;
    }

    .ios-offer-section-icon {
        width: 46px;
        height: 46px;
    }

    .ios-offer-section-icon i {
        font-size: 20px;
    }

    .ios-offer-section-title {
        font-size: 17px !important;
    }

    .ios-offer-features li {
        font-size: 14px;
    }

    .ios-offer-intro {
        font-size: 15px !important;
    }
}

/* What we offer & Teaching: page title on mobile-only */
@media (max-width: 768px) {
    body.ios-page-whatweoffer .kingster-page-title-wrap .kingster-page-title,
    body.ios-page-teaching .kingster-page-title-wrap .kingster-page-title {
        font-size: 28px !important;
    }
}

@media (max-width: 480px) {
    body.ios-page-whatweoffer .kingster-page-title-wrap .kingster-page-title,
    body.ios-page-teaching .kingster-page-title-wrap .kingster-page-title {
        font-size: 24px !important;
    }

    .ios-offer-section {
        padding: 20px 16px;
    }
}

/* ==========================================
   Teaching page – Interactive Journey & Bento
   ========================================== */
.ios-teaching-journey-wrap {
    padding: 40px 0 56px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}


.ios-journey-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 28px;
}

.ios-journey-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.ios-journey-step:hover {
    transform: scale(1.05);
}

.ios-journey-step-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #94a3b8, #cbd5e1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.ios-journey-step-circle i {
    font-size: 22px;
    color: #fff;
}

.ios-journey-step--active .ios-journey-step-circle {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
}

.ios-journey-step-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.ios-journey-step--active .ios-journey-step-label {
    color: var(--ios-heading-color);
}

.ios-journey-connector {
    width: 24px;
    height: 2px;
    background: #cbd5e1;
    margin: 0 4px;
}

.ios-journey-panels {
    position: relative;
    min-height: 120px;
}

.ios-journey-panel {
    display: none;
    padding: 24px 32px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(25, 47, 89, 0.08);
    border: 1px solid rgba(25, 47, 89, 0.06);
}

.ios-journey-panel--show {
    display: block;
    animation: ios-panel-fade 0.35s ease;
}

@keyframes ios-panel-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.ios-journey-panel h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ios-heading-color) !important;
    margin: 0 0 10px !important;
}

.ios-journey-panel p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ios-body-color);
    margin: 0;
}

@media (max-width: 768px) {
    .ios-teaching-journey-wrap {
        padding: 32px 0 40px;
    }

    .ios-teaching-journey-title {
        font-size: 20px !important;
    }

    .ios-teaching-journey-sub {
        font-size: 14px !important;
        margin-bottom: 24px;
    }

    .ios-journey-stepper {
        gap: 6px;
        margin-bottom: 24px;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        scrollbar-width: none;
    }

    .ios-journey-stepper::-webkit-scrollbar {
        display: none;
    }

    .ios-journey-step {
        flex-shrink: 0;
    }

    .ios-journey-step-circle {
        width: 44px;
        height: 44px;
    }

    .ios-journey-step-circle i {
        font-size: 16px;
    }

    .ios-journey-step-label {
        font-size: 11px;
    }

    .ios-journey-connector {
        width: 12px;
    }

    .ios-journey-panel {
        padding: 20px 20px;
    }

    .ios-journey-panel h4 {
        font-size: 16px !important;
    }

    .ios-journey-panel p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .ios-teaching-journey-wrap {
        padding: 24px 0 32px;
    }

    .ios-journey-step-circle {
        width: 40px;
        height: 40px;
    }

    .ios-journey-step-circle i {
        font-size: 14px;
    }

    .ios-journey-step-label {
        font-size: 10px;
    }
}

/* Teaching page: LTT, Benefits, and other gdlr sections – mobile stacking */
@media (max-width: 768px) {
    body.ios-page-teaching .gdlr-core-pbf-wrapper-container,
    body.ios-page-teaching .gdlr-core-pbf-wrapper-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    body.ios-page-teaching .gdlr-core-pbf-column {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.ios-page-teaching .gdlr-core-pbf-column-content-margin {
        margin: 0 !important;
        padding: 20px 0 !important;
    }

    body.ios-page-teaching .gdlr-core-pbf-wrapper {
        padding: 24px 0 !important;
    }
}

@media (max-width: 480px) {
    body.ios-page-teaching .gdlr-core-pbf-wrapper-container,
    body.ios-page-teaching .gdlr-core-pbf-wrapper-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Live Track in Action – swipeable one-card carousel */
.ios-teaching-bento-wrap {
    padding: 48px 0 64px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.ios-teaching-bento-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--ios-heading-color) !important;
    text-align: center;
    margin: 0 0 8px !important;
}

.ios-teaching-bento-sub {
    text-align: center;
    font-size: 15px;
    color: #707070;
    margin: 0 0 28px;
}

.ios-livetrack-carousel-wrap {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 56px;
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
}

.ios-livetrack-carousel {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ios-livetrack-slide {
    flex: 0 0 100%;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
}

.ios-livetrack-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 32px;
    border: 1px solid rgba(25, 47, 89, 0.08);
    box-shadow: 0 8px 32px rgba(25, 47, 89, 0.1);
    height: 300px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.ios-livetrack-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.ios-livetrack-icon i {
    font-size: 26px;
    color: #fff;
}

.ios-livetrack-card h4 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--ios-heading-color) !important;
    margin: 0 0 8px !important;
}

.ios-livetrack-tagline {
    font-size: 15px;
    color: #64748b;
    font-weight: 500;
    margin: 0 0 14px;
}

.ios-livetrack-desc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ios-body-color);
    margin: 0;
    flex: 1;
}

.ios-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(25, 47, 89, 0.15);
    background: #fff;
    color: var(--ios-heading-color);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 2;
}

.ios-carousel-arrow:hover {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    border-color: transparent;
}

.ios-carousel-arrow--prev { left: 0; }
.ios-carousel-arrow--next { right: 0; }

.ios-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.ios-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #cbd5e1;
    cursor: pointer;
    padding: 0;
    transition: all 0.25s ease;
}

.ios-carousel-dot:hover {
    background: #94a3b8;
}

.ios-carousel-dot--active {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    transform: scale(1.2);
}

@media (max-width: 680px) {
    .ios-teaching-bento-wrap {
        padding: 32px 0 48px;
    }

    .ios-teaching-bento-title {
        font-size: 20px !important;
    }

    .ios-teaching-bento-sub {
        font-size: 14px !important;
    }

    .ios-livetrack-carousel-wrap {
        margin: 0 -16px;
        padding: 0 48px;
        max-width: none;
    }

    .ios-carousel-arrow--prev { left: 4px; }
    .ios-carousel-arrow--next { right: 4px; }

    .ios-carousel-arrow {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .ios-livetrack-slide {
        padding: 0 4px;
    }

    .ios-livetrack-card {
        padding: 24px 20px;
        height: auto;
        min-height: 280px;
    }

    .ios-livetrack-card h4 {
        font-size: 18px !important;
    }

    .ios-livetrack-tagline {
        font-size: 14px;
    }

    .ios-livetrack-desc {
        font-size: 14px;
    }
}

/* Introducing video section */
.ios-intro-video-wrap {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.ios-intro-video {
    width: 100%;
    height: auto;
    display: block;
}

/* Premium Buttons */
.ios-btn-glow {
    display: inline-block;
    padding: 18px 45px;
    background: var(--ios-grad-primary);
    color: white !important;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: var(--ios-transition);
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(157, 0, 255, 0.2);
}

.ios-btn-glow:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(157, 0, 255, 0.4), var(--ios-shadow-glow);
}

/* ==========================================
   HEADER + NAV BAR – Logo consistency only
   ========================================== */

/* Logo: default (main site) – slightly bigger header/logo */
.kingster-header-wrap .kingster-logo-inner,
.kingster-animate-fixed-navigation .kingster-logo-inner {
    max-width: 240px !important;
}

.kingster-header-wrap .kingster-logo-inner img,
.kingster-mobile-header .kingster-logo-inner img,
.kingster-animate-fixed-navigation .kingster-logo-inner img {
    max-width: 220px !important;
    width: 220px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Home2: slightly smaller logo so it fits the gradient bar */
body.ios-home2 .kingster-header-wrap .kingster-logo-inner,
body.ios-home2 .kingster-animate-fixed-navigation .kingster-logo-inner {
    max-width: 200px !important;
}

body.ios-home2 .kingster-header-wrap .kingster-logo-inner img,
body.ios-home2 .kingster-mobile-header .kingster-logo-inner img,
body.ios-home2 .kingster-animate-fixed-navigation .kingster-logo-inner img {
    max-width: 180px !important;
    width: 180px !important;
}

/* ==========================================
   NAV BAR – SINGLE PLACE TO CHANGE NAV STYLING
   --------------------------------------------------------
   Default (main site): dark links on white header.
   Home2 (body.ios-home2): white links, gold hover – edit the block below.
   -------------------------------------------------------- */

/* Main site: nav dark blue on white header */
.sf-menu > li > a,
.sf-vertical > li > a,
.kingster-navigation .sf-menu > li > a,
.kingster-main-menu .sf-menu > li > a {
    color: #163269 !important;
}

.sf-menu > li > a:hover,
.sf-menu > li.current-menu-item > a,
.sf-menu > li.current-menu-ancestor > a,
.sf-vertical > li > a:hover,
.sf-vertical > li.current-menu-item > a,
.sf-vertical > li.current-menu-ancestor > a,
.kingster-navigation .sf-menu > li > a:hover,
.kingster-navigation .sf-menu > li.current-menu-item > a,
.kingster-navigation .sf-menu > li.current-menu-ancestor > a {
    color: var(--ios-gold) !important;
}

/* Home2 only: white + gold nav (edit this block to experiment with nav bar) */
body.ios-home2 .sf-menu > li > a,
body.ios-home2 .sf-vertical > li > a,
body.ios-home2 .kingster-navigation .sf-menu > li > a,
body.ios-home2 .kingster-main-menu .sf-menu > li > a {
    color: #ffffff !important;
}

body.ios-home2 .sf-menu > li > a:hover,
body.ios-home2 .sf-menu > li.current-menu-item > a,
body.ios-home2 .sf-menu > li.current-menu-ancestor > a,
body.ios-home2 .kingster-navigation .sf-menu > li > a:hover,
body.ios-home2 .kingster-navigation .sf-menu > li.current-menu-item > a,
body.ios-home2 .kingster-navigation .sf-menu > li.current-menu-ancestor > a {
    color: var(--ios-gold) !important;
}

body.ios-home2 .kingster-mobile-header .m-menu a,
body.ios-home2 .kingster-mm-menu-wrap a,
body.ios-home2 .kingster-mm-menu-wrap .m-menu > li > a {
    color: #ffffff !important;
}

body.ios-home2 .kingster-mobile-header .m-menu a:hover,
body.ios-home2 .kingster-mm-menu-wrap a:hover {
    color: var(--ios-gold) !important;
}

/* Hamburger: default dark on white; Home2 white on dark */
.kingster-top-menu-button i,
.kingster-mobile-menu-button i,
.kingster-mobile-button-hamburger:before,
.kingster-mobile-button-hamburger:after,
.kingster-mobile-button-hamburger span {
    color: #333333 !important;
    background: #333333 !important;
}

body.ios-home2 .kingster-top-menu-button i,
body.ios-home2 .kingster-mobile-menu-button i,
body.ios-home2 .kingster-mobile-button-hamburger:before,
body.ios-home2 .kingster-mobile-button-hamburger:after,
body.ios-home2 .kingster-mobile-button-hamburger span {
    color: #ffffff !important;
    background: #ffffff !important;
}

.kingster-main-menu-right .kingster-top-menu-button,
.kingster-mobile-menu .kingster-mobile-menu-button {
    border-color: #333333 !important;
}

body.ios-home2 .kingster-main-menu-right .kingster-top-menu-button,
body.ios-home2 .kingster-mobile-menu .kingster-mobile-menu-button {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* ========================================== */

/* Each top-level mega menu item needs position:relative so its dropdown positions under IT */
.kingster-navigation .sf-menu > .kingster-mega-menu,
.sf-menu.kingster-top-bar-menu > .kingster-mega-menu {
    position: relative !important;
}

/* Mega dropdown: directly below each link, left edge aligned with link, extends right */
.kingster-navigation .sf-menu > .kingster-mega-menu > .sf-mega,
.sf-menu.kingster-top-bar-menu > .kingster-mega-menu .sf-mega {
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    top: 100% !important;
}

/* Dropdown logo: larger on desktop (nav bar right) */
.kingster-mega-menu-section-content img,
.sf-mega .kingster-mega-menu-section-content img {
    max-width: 200px !important;
    width: 200px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Dropdown: clean modern layout – links in white box with gold outline, logo compact */
.kingster-navigation .sf-menu > .kingster-mega-menu > .sf-mega,
.sf-menu.kingster-top-bar-menu > .kingster-mega-menu .sf-mega {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.sf-mega .sf-mega-section-wrap,
.kingster-navigation .sf-menu > .kingster-mega-menu .sf-mega .sf-mega-section-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0 !important;
    overflow: visible !important;
    border-top: none !important;
}

/* Links column – white background, posh gold outline */
.sf-mega .sf-mega-section:first-child,
.kingster-navigation .sf-menu > .kingster-mega-menu .sf-mega .sf-mega-section:first-child {
    background: #ffffff !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border: 1px solid #c9a227 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    padding: 20px 28px !important;
    min-width: 260px !important;
}

.sf-mega .sf-mega-section-inner {
    padding: 0 !important;
}

/* Logo column – transparent, centered, no stretch/blank space (override theme’s padding-bottom:999px trick) */
.sf-mega .sf-mega-section:last-child,
.kingster-navigation .sf-menu > .kingster-mega-menu .sf-mega .sf-mega-section:last-child {
    background: transparent !important;
    padding: 16px 0 0 28px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    overflow: visible !important;
    min-width: 220px !important;
    align-self: flex-start !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sf-mega .kingster-mega-menu-section-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sf-mega .kingster-mega-menu-section-content img {
    max-width: 200px !important;
    width: 200px !important;
    height: auto !important;
}

/* Dropdown links – white box styling */
.sf-mega .sub-menu,
.kingster-mega-menu .sub-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sf-mega .sub-menu li,
.kingster-mega-menu .sub-menu li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.sf-mega .sub-menu li a,
.kingster-mega-menu .sub-menu li a,
.kingster-mm-menu-wrap .sub-menu li a {
    display: block !important;
    padding: 10px 12px !important;
    margin: 2px 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #2d2d2d !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}

/* Gold outline for each link on hover */
.sf-mega .sub-menu li a:hover,
.kingster-mega-menu .sub-menu li a:hover {
    color: #192f59 !important;
    border-color: #c9a227 !important;
    background: rgba(201, 162, 39, 0.06) !important;
}

/* Initial Vision highlight when Home dropdown shows on load */
.sf-mega .sub-menu a.ios-initial-vision-highlight,
.kingster-mega-menu .sub-menu a.ios-initial-vision-highlight {
    color: #192f59 !important;
    border-color: #c9a227 !important;
    background: rgba(201, 162, 39, 0.15) !important;
}

.sf-mega .sub-menu li:last-child a,
.kingster-mega-menu .sub-menu li:last-child a {
    border-bottom: none !important;
}

/* Main nav bar – desktop spacing */
.kingster-main-menu .sf-menu > li > a {
    padding: 18px 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

/* Mobile menu – main nav items (no capitals) */
.kingster-mm-menu-wrap .m-menu > li > a,
.kingster-mm-menu-wrap .m-menu > li > a span,
.kingster-mm-menu-wrap .m-menu li a {
    text-transform: none !important;
    font-size: 16px !important;
    padding: 14px 0 !important;
    font-weight: 500 !important;
}

/* Mobile sub-menu spacing */
.kingster-mm-menu-wrap .sub-menu {
    padding-left: 16px !important;
    margin-bottom: 8px !important;
}

.kingster-mm-menu-wrap .sub-menu li a,
.kingster-mm-menu-wrap .mm-listview li a {
    text-transform: none !important;
    padding: 12px 0 !important;
    font-size: 14px !important;
}

/* Override theme uppercase on mobile menu */
.kingster-mm-menu-wrap,
.kingster-mm-menu-wrap .mm-listview,
.kingster-mm-menu-wrap .mm-listview li,
.kingster-mm-menu-wrap .mm-listview li a {
    text-transform: none !important;
}

.kingster-navigation .sf-menu > .kingster-mega-menu .sf-mega-section-inner .sub-menu a {
    color: #2d2d2d !important;
}

.kingster-navigation .sf-menu > .kingster-mega-menu .sf-mega-section-inner .sub-menu a:hover {
    color: #192f59 !important;
}

/* Responsive Overrides */
@media (max-width: 991px) {
    .kingster-logo-inner span {
        display: none !important;
    }

    .kingster-header-container-inner {
        padding: 10px 0 !important;
    }

    .kingster-header-wrap .kingster-logo-inner img {
        max-width: 150px !important;
        width: 150px !important;
    }

    /* Dropdown logo – tablet: scale down */
    .sf-mega .kingster-mega-menu-section-content img,
    .kingster-mega-menu-section-content img {
        max-width: 140px !important;
        width: 140px !important;
    }

    .sf-mega .sf-mega-section:last-child {
        min-width: 160px !important;
        padding: 12px 0 0 20px !important;
    }
}

@media (max-width: 767px) {
    .kingster-header-wrap .kingster-logo-inner img,
    .kingster-mobile-header .kingster-logo-inner img {
        max-width: 140px !important;
        width: 140px !important;
    }

    /* Dropdown logo – mobile: compact */
    .sf-mega .kingster-mega-menu-section-content img,
    .kingster-mega-menu-section-content img {
        max-width: 100px !important;
        width: 100px !important;
    }

    .sf-mega .sf-mega-section:last-child {
        min-width: 120px !important;
        padding: 10px 0 0 16px !important;
    }
}

/* ==========================================
   MOBILE OPTIMIZATION
   ========================================== */
@media (max-width: 991px) {
    body.kingster-body {
        overflow-x: hidden;
    }

    .kingster-container,
    .gdlr-core-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }

    .ios-hero-content {
        padding: 40px 16px 60px !important;
    }

    .ios-hero-content .ios-hero-title {
        font-size: 28px !important;
        white-space: normal;
    }

    .ios-hero-subtitle {
        font-size: 15px !important;
    }

    .ios-hero-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .ios-btn-primary,
    .ios-btn-secondary {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    .kingster-top-bar-container-inner,
    .kingster-mobile-header-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .kingster-footer-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .kingster-footer-column {
        margin-bottom: 24px;
    }

    .kingster-page-title-wrap .kingster-page-title {
        font-size: 28px !important;
    }
}

@media (max-width: 767px) {
    .kingster-mobile-header .kingster-logo-inner {
        margin-right: 60px;
    }

    .kingster-mobile-button-hamburger {
        display: block !important;
    }

    .kingster-footer-wrapper .kingster-footer-container {
        flex-direction: column;
    }

    .kingster-footer-column {
        width: 100% !important;
        margin-bottom: 28px;
    }
}

@media (max-width: 480px) {
    .ios-hero-section {
        min-height: 50vh;
    }

    .ios-hero-content .ios-hero-title {
        font-size: 24px !important;
    }

    .kingster-page-title-wrap .kingster-page-title {
        font-size: 24px !important;
    }
}

@media (max-width: 768px) {
    .ios-section {
        padding: 80px 0;
    }
}

/* ==========================================
   News and Events page – full-width, consistent media, mobile-optimised
   ========================================== */
.ios-newsandevents .gdlr-core-pbf-sidebar-wrapper {
    padding: 0 !important;
    overflow: visible;
}

.ios-newsandevents .gdlr-core-pbf-sidebar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0;
    overflow: visible;
}

.ios-newsandevents .gdlr-core-pbf-sidebar-content {
    flex: 1 1 0;
    min-width: 0;
    padding: 48px 40px 56px 0 !important;
}

/* Sidebar: match Welcome/About proportion (~33%), min 340px so Quick Links isn't squashed */
.ios-newsandevents .gdlr-core-pbf-sidebar-right {
    flex: 0 0 33.333%;
    min-width: 340px;
    max-width: 400px;
    padding: 48px 0 56px 40px !important;
    overflow: visible;
}

.ios-newsandevents .gdlr-core-sidebar-item .ios-quick-links-box,
.ios-newsandevents .ios-quick-links-box {
    min-width: 300px;
    max-width: 100%;
    box-sizing: border-box;
}

.ios-newsandevents .ios-quick-links-box .gdlr-core-button,
.ios-newsandevents .ios-quick-links-box a.gdlr-core-button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.ios-newsandevents .gdlr-core-pbf-background-wrap {
    display: none !important;
}

/* Hero */
body.ios-page-newsandevents .kingster-page-title-wrap {
    min-height: 160px;
}

body.ios-page-newsandevents .kingster-page-title {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Event cards */
.ios-newsandevents .gdlr-core-blog-full-frame {
    margin-bottom: 48px !important;
    padding: 0 0 48px !important;
    border: none !important;
    border-bottom: 1px solid rgba(25, 47, 89, 0.1) !important;
    border-radius: 0;
    box-shadow: none;
    background: transparent !important;
}

.ios-newsandevents .gdlr-core-blog-full-frame:last-of-type {
    border-bottom: none !important;
}

.ios-newsandevents .gdlr-core-blog-full-head {
    margin-bottom: 20px !important;
}

.ios-newsandevents .gdlr-core-blog-title {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
}

.ios-newsandevents .gdlr-core-blog-title a {
    color: #192f59 !important;
}

.ios-newsandevents .gdlr-core-blog-title a:hover {
    color: #c9a227 !important;
}

.ios-newsandevents .gdlr-core-blog-info-wrapper {
    font-size: 13px !important;
}

.ios-newsandevents .gdlr-core-blog-info-wrapper a {
    color: #6b7280 !important;
}

.ios-newsandevents .gdlr-core-blog-info-wrapper a:hover {
    color: #192f59 !important;
}

.ios-newsandevents .gdlr-core-blog-content {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #4a5568;
}

.ios-newsandevents .gdlr-core-blog-content p {
    margin-bottom: 1em !important;
}

.ios-newsandevents .gdlr-core-blog-thumbnail {
    margin-bottom: 24px;
}

/* Consistent media – 16:9 aspect ratio, responsive */
.ios-newsandevents .gdlr-core-blog-content .ios-media-wrap {
    width: 100%;
    max-width: 100%;
    margin: 1.5em 0;
    border-radius: 8px;
    overflow: hidden;
}

.ios-newsandevents .gdlr-core-blog-content .ios-media-wrap video,
.ios-newsandevents .gdlr-core-blog-content .ios-media-wrap iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    max-height: 500px;
    object-fit: cover;
}

.ios-newsandevents .gdlr-core-blog-content video:not(.ios-skip-wrap),
.ios-newsandevents .gdlr-core-blog-content iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    margin: 1.5em 0;
}

.ios-newsandevents .gdlr-core-blog-thumbnail img,
.ios-newsandevents .gdlr-core-blog-content img,
.ios-newsandevents .gdlr-core-image-frame-item img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.ios-newsandevents .gdlr-core-blog-content video {
    margin: 1em 0;
}

.ios-newsandevents .gdlr-core-image-frame-item {
    margin: 1.5em 0;
}

/* Footer and layout */
.ios-newsandevents {
    display: block !important;
    clear: both !important;
    overflow: hidden !important;
    padding-bottom: 0;
}

footer,
.kingster-footer-wrapper {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    flex-basis: 100% !important;
}

body.ios-page-newsandevents .kingster-body-wrapper {
    display: flex !important;
    flex-direction: column !important;
}

body.ios-page-newsandevents .kingster-page-wrapper.ios-newsandevents {
    flex: 0 0 auto;
}

/* News & Events mobile – Quick Links at BOTTOM (order: content 1, sidebar 2) */
@media (max-width: 768px) {
    .ios-newsandevents .gdlr-core-pbf-sidebar-container {
        padding: 0 24px !important;
        flex-direction: column;
    }

    .ios-newsandevents .gdlr-core-pbf-sidebar-content {
        order: 1;
        max-width: 100% !important;
        padding: 32px 0 24px !important;
    }

    .ios-newsandevents .gdlr-core-pbf-sidebar-right {
        order: 2;
        flex: 0 0 100%;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 32px 0 40px !important;
        border-top: 1px solid rgba(25, 47, 89, 0.1);
        margin-top: 24px;
    }

    .ios-newsandevents .ios-quick-links-box {
        min-width: 0;
    }

    .ios-newsandevents .gdlr-core-blog-full-frame {
        margin-bottom: 40px !important;
        padding-bottom: 40px !important;
    }

    .ios-newsandevents .gdlr-core-blog-title {
        font-size: 1.25rem !important;
    }

    body.ios-page-newsandevents .kingster-page-title {
        font-size: 1.5rem;
    }

    .ios-newsandevents .gdlr-core-blog-content video,
    .ios-newsandevents .gdlr-core-blog-content iframe {
        aspect-ratio: 16 / 9;
        min-height: 200px;
    }
}

@media (max-width: 480px) {
    .ios-newsandevents .gdlr-core-pbf-sidebar-container {
        padding: 0 16px !important;
    }

    .ios-newsandevents .gdlr-core-pbf-sidebar-content {
        padding: 24px 0 16px !important;
    }

    .ios-newsandevents .gdlr-core-pbf-sidebar-right {
        padding: 24px 0 32px !important;
        margin-top: 16px;
    }

    .ios-newsandevents .gdlr-core-blog-full-frame {
        margin-bottom: 36px !important;
        padding-bottom: 36px !important;
    }

    .ios-newsandevents .gdlr-core-blog-content video,
    .ios-newsandevents .gdlr-core-blog-content iframe {
        min-height: 180px;
    }
}

/* ==========================================
   QUICK LINK BOXES  (search: "QUICK LINK BOXES" to find this section)
   ---------------
   Single source of truth: add class "ios-quick-links-box" to the wrapper.
   To add to any page: use the partial
     <?php $this->load->view('partials/quick_links_box'); ?>
   Styling: white bg, gold border, large "Quick links", gold links, rounded
   dark purple/blue button. Edit this CSS block to change the look site-wide.
   ========================================== */

/* Box – white background, gold border, soft shadow */
.ios-quick-links-box {
    background: #ffffff !important;
    border: 2px solid var(--ios-quick-gold) !important;
    border-radius: 8px !important;
    padding: 40px 36px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(212, 175, 55, 0.15) !important;
}

/* "Quick links" main heading – LARGE */
.ios-quick-links-box .gdlr-core-widget-box-shortcode-content h3:first-of-type,
.ios-quick-links-box h3:first-of-type {
    color: #192f59 !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin-bottom: 25px !important;
    letter-spacing: 0.02em;
}

/* Section headings (e.g. Social Info) */
.ios-quick-links-box h3:not(:first-of-type),
.ios-quick-links-box .gdlr-core-widget-box-shortcode-content h3:not(:first-of-type) {
    color: #192f59 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}

/* Links – gold (IOS accent) */
.ios-quick-links-box a:not(.gdlr-core-button),
.ios-quick-links-box .gdlr-core-widget-box-shortcode-content p a:not(.gdlr-core-button) {
    color: var(--ios-quick-gold) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.ios-quick-links-box a:hover:not(.gdlr-core-button),
.ios-quick-links-box .gdlr-core-widget-box-shortcode-content p a:hover:not(.gdlr-core-button) {
    color: var(--ios-quick-gold-dark) !important;
}

/* Social icons – gold */
.ios-quick-links-box .gdlr-core-social-network-icon {
    color: var(--ios-quick-gold) !important;
}

.ios-quick-links-box .gdlr-core-social-network-icon:hover {
    color: var(--ios-quick-gold-dark) !important;
}

/* Button – ROUNDED, dark purple/blue gradient */
.ios-quick-links-box .gdlr-core-button,
.ios-quick-links-box a.gdlr-core-button,
.btn-ios-quick-links {
    background: linear-gradient(135deg, #1a0a2e 0%, #192f59 40%, #1e3a5f 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 16px 27px !important;
    transition: all 0.3s ease !important;
}

.ios-quick-links-box .gdlr-core-button:hover,
.ios-quick-links-box a.gdlr-core-button:hover,
.btn-ios-quick-links:hover {
    background: linear-gradient(135deg, #192f59 0%, #1e3a5f 60%, #2563eb 100%) !important;
    color: #ffffff !important;
}

/* Quick Links – mobile: consistent across Welcome, About, News and Events */
@media (max-width: 768px) {
    .ios-quick-links-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 28px 24px !important;
        box-sizing: border-box;
    }

    .ios-quick-links-box h3:first-of-type {
        font-size: 1.3rem !important;
    }

    .ios-quick-links-box .gdlr-core-button,
    .ios-quick-links-box a.gdlr-core-button {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Sidebar layouts: Quick Links at BOTTOM on mobile (About, Welcome) */
    .gdlr-core-pbf-sidebar-container {
        display: flex !important;
        flex-direction: column !important;
    }

    .gdlr-core-pbf-sidebar-content {
        order: 1 !important;
    }

    .gdlr-core-pbf-sidebar-right {
        order: 2 !important;
    }
}

/* ==========================================
   REPLACE ALL GREEN WITH GOLD – main nav, breadcrumbs, links, accents
   Rich deep gold (not mustard), gradient for shiny/radiant
   ========================================== */
a[style*="3db166"],
.font-green,
font[color="green"],
.ios-gold-link {
    color: var(--ios-gold) !important;
}

a[style*="3db166"]:hover,
font[color="green"]:hover,
a:hover .ios-gold-link {
    color: var(--ios-gold-light) !important;
}

/* Main nav – hover & active state */
.sf-menu > li > a:hover,
.sf-menu > li.current-menu-item > a,
.sf-menu > li.current-menu-ancestor > a,
.sf-vertical > li > a:hover,
.sf-vertical > li.current-menu-item > a,
.sf-vertical > li.current-menu-ancestor > a,
.kingster-navigation .sf-menu > li > a:hover,
.kingster-navigation .sf-menu > li.current-menu-item > a,
.kingster-navigation .sf-menu > li.current-menu-ancestor > a,
.kingster-mobile-header .m-menu a:hover,
.kingster-mm-menu-wrap a:hover {
    color: var(--ios-gold) !important;
}

/* Nav slide bar (if shown) */
.kingster-navigation .kingster-navigation-slide-bar,
.kingster-navigation .kingster-navigation-slide-bar:before {
    border-color: var(--ios-gold) !important;
}

/* Breadcrumbs */
.kingster-body .kingster-breadcrumbs span,
.kingster-body .kingster-breadcrumbs a:hover span,
.gdlr-core-breadcrumbs-item span,
.gdlr-core-breadcrumbs-item a:hover span {
    color: var(--ios-gold) !important;
}

/* Page title caption */
.kingster-page-title-wrap .kingster-page-caption,
.kingster-page-title-wrap .kingster-page-caption a,
.kingster-page-title-wrap .kingster-page-title-event-link a,
.kingster-page-title-wrap .kingster-page-title-event-link a:hover {
    color: var(--ios-gold) !important;
}

/* Sidebar widget titles */
.kingster-sidebar-area .kingster-widget-title {
    border-bottom-color: var(--ios-gold) !important;
}

/* Column Service / White Text / Green Title skins – override green */
.gdlr-core-page-builder-body [data-skin="White Text"] a,
.gdlr-core-page-builder-body [data-skin="White Text"] .gdlr-core-skin-link,
.gdlr-core-page-builder-body [data-skin="Column Service"] a,
.gdlr-core-page-builder-body [data-skin="Column Service"] .gdlr-core-skin-link,
.gdlr-core-page-builder-body [data-skin="Green Title"] h1,
.gdlr-core-page-builder-body [data-skin="Green Title"] h2,
.gdlr-core-page-builder-body [data-skin="Green Title"] h3,
.gdlr-core-page-builder-body [data-skin="Green Title"] h4,
.gdlr-core-page-builder-body [data-skin="Green Title"] h5,
.gdlr-core-page-builder-body [data-skin="Green Title"] h6,
.gdlr-core-page-builder-body [data-skin="Green Title"] .gdlr-core-skin-title,
.gdlr-core-page-builder-body [data-skin="Green Title"] .gdlr-core-skin-title a {
    color: var(--ios-gold) !important;
}

.gdlr-core-page-builder-body [data-skin="White Text"] a:hover,
.gdlr-core-page-builder-body [data-skin="White Text"] .gdlr-core-skin-link:hover,
.gdlr-core-page-builder-body [data-skin="Column Service"] a:hover,
.gdlr-core-page-builder-body [data-skin="Column Service"] .gdlr-core-skin-link:hover {
    color: var(--ios-gold-light) !important;
}

.gdlr-core-page-builder-body [data-skin="Green Form"] *,
.gdlr-core-page-builder-body [data-skin="Green Form"] .gdlr-core-skin-border,
.gdlr-core-page-builder-body [data-skin="Green Form"] input {
    border-color: var(--ios-gold) !important;
}

/* Footer widget titles */
.kingster-footer-wrapper .kingster-widget-title {
    border-bottom-color: var(--ios-gold) !important;
}

/* Accordion – blue (no green). Active state + icon match Welcome page button. */
.gdlr-core-accordion-style-icon .gdlr-core-accordion-item-icon,
.gdlr-core-accordion-style-icon .gdlr-core-accordion-item-title,
.gdlr-core-toggle-box-style-icon .gdlr-core-toggle-box-item-icon,
.gdlr-core-toggle-box-style-icon .gdlr-core-toggle-box-item-title,
.gdlr-core-accordion-style-background-title-icon .gdlr-core-accordion-item-title:before,
.gdlr-core-toggle-box-style-background-title-icon .gdlr-core-toggle-box-item-title:before {
    color: #2563eb !important;
}

.gdlr-core-accordion-style-background-title .gdlr-core-accordion-item-title,
.gdlr-core-accordion-style-background-title-icon .gdlr-core-accordion-item-title,
.gdlr-core-toggle-box-style-background-title .gdlr-core-toggle-box-item-title,
.gdlr-core-toggle-box-style-background-title-icon .gdlr-core-toggle-box-item-title {
    color: var(--ios-heading-color) !important;
}

.gdlr-core-accordion-style-background-title-icon .gdlr-core-active .gdlr-core-accordion-item-title:before,
.gdlr-core-toggle-box-style-background-title-icon .gdlr-core-active .gdlr-core-toggle-box-item-title:before {
    color: #ffffff !important;
}

.gdlr-core-accordion-style-background-title .gdlr-core-active .gdlr-core-accordion-item-title,
.gdlr-core-accordion-style-background-title-icon .gdlr-core-active .gdlr-core-accordion-item-title,
.gdlr-core-toggle-box-style-background-title .gdlr-core-active .gdlr-core-toggle-box-item-title,
.gdlr-core-toggle-box-style-background-title-icon .gdlr-core-active .gdlr-core-toggle-box-item-title {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%) !important;
    color: #ffffff !important;
}

/* Blockquote, testimonial quotes */
.gdlr-core-blockquote-item-quote,
.gdlr-core-testimonial-item .gdlr-core-testimonial-quote {
    color: var(--ios-gold) !important;
}

/* Blog titles hover, category badges */
.gdlr-core-blog-title a:hover,
.kingster-body .kingster-single-article-title a:hover,
.gdlr-core-blog-info-category,
.gdlr-core-style-2 .gdlr-core-blog-thumbnail .gdlr-core-blog-info-category,
.gdlr-core-blog-feature .gdlr-core-blog-info-category {
    color: var(--ios-gold) !important;
}

.gdlr-core-style-2 .gdlr-core-blog-thumbnail .gdlr-core-blog-info-category,
.gdlr-core-blog-feature .gdlr-core-blog-info-category,
.gdlr-core-recent-post-widget-thumbnail .gdlr-core-blog-info-category {
    background: var(--ios-gold-gradient) !important;
}

/* ID-based theme overrides – Vision, Ethos, Faith headings: dark blue (not gold) */
#a_1dd7_5,
#h3_1dd7_16, #h3_1dd7_17, #h3_1dd7_18, #h3_1dd7_19, #h3_1dd7_20, #h3_1dd7_21,
#h3_983a_1, #h3_983a_2, #h3_983a_3 {
    color: var(--ios-heading-color) !important;
}

#div_1dd7_69 {
    background: var(--ios-gold-gradient) !important;
}

#div_1dd7_111, #div_983a_6, #div_983a_49 {
    border-color: var(--ios-gold) !important;
}

/* Top bar, cart, tagcloud, search, video widget */
.kingster-top-bar .kingster-top-bar-right-social a:hover,
.kingster-top-cart-content-wrap .kingster-top-cart-checkout-button,
.kingster-top-cart-content-wrap .kingster-top-cart-checkout-button:hover {
    color: var(--ios-gold) !important;
}

.kingster-main-menu-cart > .kingster-top-cart-count {
    background: var(--ios-gold-gradient) !important;
}

.kingster-body .tagcloud a {
    background: var(--ios-gold-gradient) !important;
    border-color: var(--ios-gold) !important;
}

.widget_search input.search-field {
    border-color: var(--ios-gold) !important;
}

.gdlr-core-video-widget i {
    background: var(--ios-gold-gradient) !important;
}

.kingster-body a:hover {
    color: var(--ios-gold) !important;
}

/* Sub-menu hover – gold accent */
.sf-menu > li > .sub-menu a:hover,
.sf-menu > .kingster-mega-menu > .sf-mega a:hover {
    color: var(--ios-gold) !important;
}

/* Buttons – blue gradient to match Welcome page / top header (no green) */
.btn-green,
.black-hover,
.kingster-top-bar .kingster-top-bar-right-button,
.kingster-top-bar-right-button,
.gdlr-core-body .gdlr-core-button,
.kingster-body .kingster-button,
.kingster-body input[type="button"],
.kingster-body input[type="submit"],
.kingster-body button[type="submit"],
.submit-button,
.gdlr-core-button.gdlr-core-button-gradient {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 40%, #3b82f6 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

.btn-green:hover,
.black-hover:hover,
.kingster-top-bar .kingster-top-bar-right-button:hover,
.gdlr-core-body .gdlr-core-button:hover,
.kingster-body .kingster-button:hover,
.kingster-body input[type="button"]:hover,
.kingster-body input[type="submit"]:hover,
.kingster-body button[type="submit"]:hover,
.submit-button:hover {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%) !important;
}

/* Green → blue: icon list bullets (e.g. Benefits on teaching page) */
.gdlr-core-icon-list-icon.fa-dot-circle-o,
.gdlr-core-icon-list-item .gdlr-core-icon-list-icon[style*="50bd77"],
.gdlr-core-icon-list-item .gdlr-core-icon-list-icon[style*="3db166"] {
    color: #2563eb !important;
}

/* ==========================================
   Christian Schools page – blue/white/gold tables
   ========================================== */
.ios-christianschools-content h4 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--ios-heading-color) !important;
    margin: 0 0 20px !important;
}

/* Intro paragraphs: same font/size/style as option block text */
.ios-christianschools-content p {
    font-family: var(--ios-body-font) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: var(--ios-body-color) !important;
    margin: 0 0 16px !important;
}

.ios-option-block {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(25, 47, 89, 0.08);
}

.ios-option-block:last-of-type {
    border-bottom: none;
}

.ios-option-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ios-heading-color) !important;
    margin: 0 0 6px !important;
}

.ios-option-subtitle {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #4a5568 !important;
    margin: 0 0 14px !important;
}

.ios-option-block p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: var(--ios-body-color) !important;
    margin: 0 0 16px !important;
}

.ios-option-note {
    font-weight: 600 !important;
    margin: 16px 0 8px !important;
}

.ios-option-note-text {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 0 8px !important;
}

/* ==========================================
   Central: ALL tables site-wide – blue/white/gold
   (timetable_main, christianschools, and any other page)
   ========================================== */
.kingster-page-wrapper table,
.gdlr-core-page-builder-body table,
.gdlr-core-pbf-wrapper table,
.gdlr-core-text-box-item-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin: 20px 0 24px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(25, 47, 89, 0.08);
    border: 2px solid var(--ios-quick-gold);
}

.kingster-page-wrapper table th,
.gdlr-core-page-builder-body table th,
.gdlr-core-pbf-wrapper table th,
.gdlr-core-text-box-item-content table th {
    background: linear-gradient(135deg, #192f59 0%, #1e3a5f 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 16px 20px !important;
    text-align: left !important;
    border-bottom: 2px solid var(--ios-quick-gold) !important;
}

.kingster-page-wrapper table th a,
.gdlr-core-page-builder-body table th a,
.gdlr-core-pbf-wrapper table th a,
.gdlr-core-text-box-item-content table th a {
    color: #ffffff !important;
}

.kingster-page-wrapper table td,
.gdlr-core-page-builder-body table td,
.gdlr-core-pbf-wrapper table td,
.gdlr-core-text-box-item-content table td {
    background: #ffffff !important;
    color: var(--ios-body-color) !important;
    padding: 18px 20px !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
    vertical-align: top;
}

.kingster-page-wrapper table tr:last-child td,
.gdlr-core-page-builder-body table tr:last-child td,
.gdlr-core-pbf-wrapper table tr:last-child td,
.gdlr-core-text-box-item-content table tr:last-child td {
    border-bottom: none;
}

.kingster-page-wrapper table td a,
.gdlr-core-page-builder-body table td a,
.gdlr-core-pbf-wrapper table td a,
.gdlr-core-text-box-item-content table td a {
    color: var(--ios-gold) !important;
}

.kingster-page-wrapper table td a:hover,
.gdlr-core-page-builder-body table td a:hover,
.gdlr-core-pbf-wrapper table td a:hover,
.gdlr-core-text-box-item-content table td a:hover {
    color: var(--ios-gold-light) !important;
}

.kingster-page-wrapper table td p,
.gdlr-core-page-builder-body table td p,
.gdlr-core-pbf-wrapper table td p,
.gdlr-core-text-box-item-content table td p {
    margin: 0 0 10px !important;
}

.kingster-page-wrapper table td p:last-child,
.gdlr-core-page-builder-body table td p:last-child,
.gdlr-core-pbf-wrapper table td p:last-child,
.gdlr-core-text-box-item-content table td p:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .kingster-page-wrapper table,
    .gdlr-core-page-builder-body table,
    .gdlr-core-pbf-wrapper table,
    .gdlr-core-text-box-item-content table {
        font-size: 14px;
    }

    .kingster-page-wrapper table th,
    .kingster-page-wrapper table td,
    .gdlr-core-page-builder-body table th,
    .gdlr-core-page-builder-body table td,
    .gdlr-core-pbf-wrapper table th,
    .gdlr-core-pbf-wrapper table td,
    .gdlr-core-text-box-item-content table th,
    .gdlr-core-text-box-item-content table td {
        padding: 14px 16px !important;
    }
}

/* Timetable page: centered table (Year | Timetable) */
.ios-timetable-table th,
.ios-timetable-table td {
    text-align: center !important;
}

.ios-timetable-table td {
    vertical-align: middle !important;
}

/* Christian Schools: ios-option-table (extends central style) */
.ios-christianschools-page .ios-option-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin: 20px 0 24px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(25, 47, 89, 0.08);
    border: 2px solid var(--ios-quick-gold);
}

.ios-christianschools-page .ios-option-table thead tr th {
    background: linear-gradient(135deg, #192f59 0%, #1e3a5f 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 16px 20px !important;
    text-align: left !important;
    border-bottom: 2px solid var(--ios-quick-gold) !important;
}

.ios-christianschools-page .ios-option-table thead tr th a {
    color: #ffffff !important;
}

.ios-christianschools-page .ios-option-table tbody tr td {
    background: #ffffff !important;
    color: var(--ios-body-color) !important;
    padding: 18px 20px !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
    vertical-align: top;
}

.ios-christianschools-page .ios-option-table tbody tr:last-child td {
    border-bottom: none;
}

.ios-christianschools-page .ios-option-table tbody tr td p {
    margin: 0 0 10px !important;
}

.ios-christianschools-page .ios-option-table tbody tr td p:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .ios-christianschools-page .ios-option-table {
        font-size: 14px;
    }

    .ios-christianschools-page .ios-option-table thead tr th,
    .ios-christianschools-page .ios-option-table tbody tr td {
        padding: 14px 16px !important;
    }

    .ios-christianschools-content {
        padding: 40px 20px 40px 0 !important;
    }
}