/* ================================================================
           home.css  |  TerraLeap Homepage
           Nav + all sections  → terraleap_homepage-1.html (verbatim)
           Hero (dark navy)    → 12_homepage.html (verbatim)
           Course-links footer → background matches main footer (#2C2C2A)
        ================================================================ */
/* ── RESET & BASE ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans',sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #1a1a1a;
    background: #fff;
}

a {
    text-decoration: none;
    color: inherit;
}

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

/* ── CSS VARIABLES ── */
:root {
    --blue: #185FA5;
    --blue-light: #E6F1FB;
    --blue-mid: #B5D4F4;
    --blue-dark: #0C447C;
    --teal: #0F6E56;
    --teal-light: #E1F5EE;
    --purple: #3C3489;
    --purple-light: #EEEDFE;
    --amber: #854F0B;
    --amber-light: #FAEEDA;
    --coral: #993C1D;
    --coral-light: #FAECE7;
    --green: #3B6D11;
    --green-light: #EAF3DE;
    --pink: #993556;
    --pink-light: #FBEAF0;
    --gray-light: #F1EFE8;
    --gray-mid: #888780;
    --gray-dark: #2C2C2A;
    --border: #e5e5e5;
    --border-mid: #d0d0d0;
    --text: #1a1a1a;
    --text-muted: #666;
    --text-faint: #999;
    --bg: #fff;
    --bg-soft: #f8f8f6;
    --bg-card: #fff;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    --shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ── LAYOUT ── */
.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

section {
    padding: 72px 0;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle,#185FA5 1px,transparent 1px);
    background-size: 32px 32px;
    opacity: .04;
    pointer-events: none;
    z-index: 0;
}

.hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom,transparent,#fff);
    pointer-events: none;
    z-index: 0;
}

.divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0;
}

/* ── NAVBAR ── */
.navbar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
}



.nav-item {
    position: relative;
}

    .nav-item::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 8px;
    }

.nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 8px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    text-decoration: none;
    border: none;
    background: none;
    font-family: 'DM Sans',sans-serif;
}

    .nav-link:hover, .nav-item:hover > .nav-link {
        color: var(--blue);
        background: var(--blue-light);
    }

    .nav-link svg {
        width: 11px;
        height: 11px;
        transition: transform .2s;
        flex-shrink: 0;
    }

.nav-item:hover > .nav-link svg {
    transform: rotate(180deg);
}

.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    padding: 20px;
    display: none;
    z-index: 300;
    min-width: 480px;
}

.nav-item:hover .dropdown {
    display: flex;
    gap: 0;
}

.dropdown-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
}

    .dropdown-col + .dropdown-col {
        border-left: 1px solid #f0f0f0;
        margin-left: 16px;
        padding-left: 16px;
    }

.dropdown-col-title {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 0 8px;
    margin-bottom: 6px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
}

    .dropdown-item:hover {
        background: #f5f5f5;
    }

.di-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.di-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.di-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
}

.di-sub {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

.dropdown-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.df-link {
    font-size: 12px;
    color: var(--blue);
    font-weight: 500;
    text-decoration: none;
}

    .df-link:hover {
        text-decoration: underline;
    }


.btn-ghost {
    font-size: 13px;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-mid);
    color: var(--text);
    background: none;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    font-family: 'DM Sans',sans-serif;
}

    .btn-ghost:hover {
        border-color: var(--blue);
        color: var(--blue);
    }

.btn-primary {
    font-size: 13px;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    border: none;
    color: #fff;
    background: var(--blue);
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
    font-family: 'DM Sans',sans-serif;
}

    .btn-primary:hover {
        background: var(--blue-dark);
    }

/* ── HERO ── */
.hero {
    padding: 72px 0 56px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg,#EBF4FF 0%,#F0F7FF 40%,#E8F3FF 100%);
}

.hero-globe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    height: 600px;
    opacity: .22;
    pointer-events: none;
}

.spin-fwd {
    transform-origin: 280px 280px;
    animation: spinF 16s linear infinite;
}

.spin-rev {
    transform-origin: 280px 280px;
    animation: spinR 24s linear infinite;
}

@keyframes spinF {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes spinR {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(-360deg)
    }
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    animation: pulse 2s infinite;
}

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

    50% {
        opacity: .3
    }
}

.hero-title {
    font-family: 'Fraunces',serif;
    font-size: 48px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.15;
    margin-bottom: 18px;
    max-width: 700px;
}

    .hero-title em {
        font-style: normal;
        color: var(--blue);
    }

.search-wrap {
    width: 100%;
    max-width: 600px;
    margin-bottom: 16px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid var(--border-mid);
    border-radius: 32px;
    padding: 10px 10px 10px 20px;
    transition: border-color .15s;
    box-shadow: 0 2px 12px rgba(24,95,165,.08);
}

    .search-box:focus-within {
        border-color: var(--blue);
    }

.search-ai-icon {
    font-size: 16px;
    color: var(--blue);
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    border: none;
    background: none;
    font-size: 14px;
    font-family: 'DM Sans',sans-serif;
    color: var(--text);
    outline: none;
}

    .search-input::placeholder {
        color: var(--text-faint);
    }

.search-btn {
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'DM Sans',sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

    .search-btn:hover {
        background: var(--blue-dark);
    }

.chips-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 36px;
    max-width: 600px;
}

.stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-num {
    font-family: 'Fraunces',serif;
    font-size: 26px;
    font-weight: 500;
    color: var(--text);
    line-height: 1;
}

.stat-lbl {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.stat-sep {
    width: 1px;
    height: 36px;
    background: var(--border);
}

.exam-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: 680px;
}

.exam-chip {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-muted);
    white-space: nowrap;
    transition: all .15s;
}

    .exam-chip:hover {
        border-color: var(--blue);
        color: var(--blue);
    }

/* ── FEATURED EXAMS ── */
.tabs-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.tab-btn {
    font-size: 12px;
    font-weight: 500;
    padding: 7px 14px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: all .15s;
    font-family: 'DM Sans',sans-serif;
}

.tab-panel {
    display: none;
}

    .tab-panel.active {
        display: block;
    }

.exams-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.exam-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .15s;
}

.exam-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.exam-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
    line-height: 1.4;
}

.exam-full {
    font-size: 11px;
    color: var(--text-muted);
    margin: 2px 0 0;
    line-height: 1.4;
}

.flag {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.exam-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 4px;
}

.exam-country {
    font-size: 11px;
    color: var(--text-muted);
}

.view-all-row {
    display: flex;
    justify-content: flex-end;
}

.view-all {
    font-size: 13px;
    color: var(--blue);
    font-weight: 500;
}

/* ── WHY TERRALEAP ── */
.why-section {
    background: var(--bg-soft);
}

.section-alt {
    background: #fff;
}

.usp-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
}

.usp-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .15s;
}

.usp-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.ic-blue {
    background: var(--blue-light);
}

.ic-teal {
    background: var(--teal-light);
}

.ic-purple {
    background: var(--purple-light);
}

.ic-amber {
    background: var(--amber-light);
}

.ic-coral {
    background: var(--coral-light);
}

.ic-green {
    background: var(--green-light);
}

.ic-pink {
    background: var(--pink-light);
}

.ic-gray {
    background: var(--gray-light);
}

.usp-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.usp-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

/* ── BROWSE BY CATEGORY ── */
.stat-bar {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 32px;
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.cat-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: border-color .15s;
}

.cat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.cat-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.cat-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.cat-count {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}

.cat-items {
    font-size: 11px;
    color: var(--text-muted);
    margin: 4px 0 0;
    line-height: 1.6;
}

.cat-arrow {
    font-size: 14px;
    color: var(--text-muted);
    margin-left: auto;
    align-self: center;
    flex-shrink: 0;
}

.browse-all-row {
    display: flex;
    justify-content: center;
}

/* ── TRUST SECTION ── */
.trust-section {
    background: var(--bg-soft);
}

.trust-note {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 28px;
    padding: 10px 16px;
    background: #fff;
    border-radius: var(--radius);
    border-left: 3px solid var(--border-mid);
    line-height: 1.6;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 36px;
}

.bodies-title {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.bodies-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 32px;
}

.body-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.body-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.body-prof-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.body-prof-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.body-prof-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}

.body-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.body-row {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: 8px;
}

.body-row-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.body-row-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

.body-country {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: var(--bg-soft);
    color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
    text-align: center;
}

.hospitals-section {
    text-align: center;
}

.hospitals-label {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 14px;
}

.hospitals-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.hospital-pill {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    white-space: nowrap;
}

/* ── TESTIMONIALS ── */
.testi-stat-bar {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.testi-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}

.testi-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color .15s;
}

.testi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.testi-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--blue-light);
    color: var(--blue);
    border: 1px solid var(--blue-mid);
}

.testi-quote {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
    flex: 1;
    font-style: normal;
    position: relative;
    padding-left: 16px;
}

    .testi-quote::before {
        content: '"';
        position: absolute;
        left: 0;
        top: -2px;
        font-family: 'Fraunces',serif;
        font-size: 24px;
        color: var(--blue);
        line-height: 1;
    }

.testi-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.testi-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.av-blue {
    background: var(--blue-light);
    color: var(--blue);
}

.av-teal {
    background: var(--teal-light);
    color: var(--teal);
}

.av-purple {
    background: var(--purple-light);
    color: var(--purple);
}

.testi-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.testi-role {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}

/* ── BLOG ── */
.blog-section {
    background: var(--bg-soft);
}

.blog-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .15s;
    cursor: pointer;
}

.blog-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cat-blue {
    background: var(--blue-light);
    color: var(--blue);
}

.cat-teal {
    background: var(--teal-light);
    color: var(--teal);
}

.cat-amber {
    background: var(--amber-light);
    color: var(--amber);
}

.blog-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.5;
}

.blog-excerpt {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    flex: 1;
}

.blog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.blog-read {
    font-size: 11px;
    color: var(--text-muted);
}

/* ── FOOTER ── */
.footer {
    background: var(--gray-dark);
    color: #ccc;
    padding: 48px 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand-name {
    font-family: 'Fraunces',serif;
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 12px;
}

.footer-brand-desc {
    font-size: 13px;
    color: #aaa;
    line-height: 1.7;
    margin-bottom: 16px;
}

.footer-email {
    font-size: 13px;
    color: #aaa;
}

    .footer-email a {
        color: var(--blue-mid);
    }

.footer-col-title {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
    margin-bottom: 14px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .footer-links a {
        font-size: 13px;
        color: #aaa;
        transition: color .15s;
    }

        .footer-links a:hover {
            color: #fff;
        }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-copy {
    font-size: 12px;
    color: #888;
}

.footer-disclaimer {
    font-size: 11px;
    color: #666;
    max-width: 700px;
    line-height: 1.5;
}

/* ── RESPONSIVE ── */
@media(max-width:900px) {
    .usp-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

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

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

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

    .hero-title {
        font-size: 36px;
    }

    .navbar-nav .nav-item:nth-child(n+4) {
        display: none;
    }
}

@media(max-width:600px) {
    .exams-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

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

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

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

    .stat-bar {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .testi-stat-bar {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

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

    .hero-title {
        font-size: 28px;
    }

    .body-row {
        grid-template-columns: 80px 1fr;
    }

    .body-country {
        display: none;
    }
}

/* ════════════════════════════════════════════════════
           HERO — dark navy background (from 12_homepage.html)
        ════════════════════════════════════════════════════ */

.hero {
    background: #0B1A3B;
    padding: 84px 24px 76px;
    text-align: center;
    position: relative;
    overflow: hidden
}

    .hero canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0
    }

.globe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 640px;
    height: 640px;
    opacity: .28;
    pointer-events: none;
    z-index: 0
}

.gf {
    transform-origin: 320px 320px;
    animation: gf 20s linear infinite
}

.gr {
    transform-origin: 320px 320px;
    animation: gr 28s linear infinite
}

@keyframes gf {
    to {
        transform: rotate(360deg)
    }
}

@keyframes gr {
    to {
        transform: rotate(-360deg)
    }
}

.hero-in {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.2);
    margin-bottom: 24px
}

.bdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #B5D4F4;
    animation: bdot 2s infinite
}

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

    50% {
        opacity: .3
    }
}

.hero h1 {
    font-family: 'Fraunces',serif;
    font-size: 46px;
    font-weight: 500;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px
}

    .hero h1 em {
        font-style: normal;
        color: #B5D4F4
    }

.hero-sub {
    font-size: 16px;
    color: rgba(255,255,255,.72);
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto
}

.srch {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 32px;
    padding: 9px 9px 9px 20px;
    max-width: 580px;
    margin: 0 auto 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,.2)
}

    .srch input {
        flex: 1;
        border: none;
        background: none;
        font-size: 14px;
        font-family: 'DM Sans',sans-serif;
        color: #1a1a1a;
        outline: none
    }

        .srch input::placeholder {
            color: #bbb
        }

    .srch button {
        background: #185FA5;
        color: #fff;
        border: none;
        border-radius: 999px;
        padding: 9px 22px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        font-family: 'DM Sans',sans-serif;
        white-space: nowrap;
        margin-left: 8px
    }

        .srch button:hover {
            background: #0C447C
        }

.chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 36px
}

.chip {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.2);
    cursor: pointer;
    transition: all .15s
}

    .chip:hover {
        background: rgba(255,255,255,.2)
    }

.hstats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap
}

.hstat {
    text-align: center
}

.hstat-n {
    font-family: 'Fraunces',serif;
    font-size: 26px;
    font-weight: 500;
    color: #fff;
    line-height: 1
}

.hstat-l {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    margin-top: 4px
}

.hsep {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.2)
}

/* ════════════════════════════════════════════════════
           GLOBAL — prevent any horizontal / vertical stretch
        ════════════════════════════════════════════════════ */
html, body {
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.navbar, .hero, section, footer, .fc-footer {
    width: 100%;
    box-sizing: border-box;
}


/* no overflow:hidden — would clip dropdowns */

/* ════════════════════════════════════════════════════
           MOBILE HAMBURGER
        ════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
           MOBILE DRAWER
        ════════════════════════════════════════════════════ */
.hm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 500;
}

.hm-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px,85vw);
    background: #fff;
    z-index: 600;
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.25,.46,.45,.94);
    overflow-y: auto;
}

.hm-drawer-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.hm-drawer-links {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    flex: 1;
}

.hm-drawer-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════
           COURSE-LINKS FOOTER
           Background matches main footer: var(--gray-dark) = #2C2C2A
        ════════════════════════════════════════════════════ */
.fc-footer {
    background: var(--gray-dark); /* same #2C2C2A as main footer */
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 40px 0 36px;
    width: 100%;
    box-sizing: border-box;
}

.fc-cat {
    margin-bottom: 22px;
}

    .fc-cat:last-child {
        margin-bottom: 0;
    }

.fc-cat-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
    margin-bottom: 8px;
    font-family: 'DM Sans',sans-serif;
}

.fc-cat-links {
    font-size: 12px;
    color: #888;
    line-height: 2.1;
}

    .fc-cat-links a {
        color: #aaa;
        text-decoration: none;
        transition: color .15s;
    }

        .fc-cat-links a:hover {
            color: #fff;
        }

/* ════════════════════════════════════════════════════
           RESPONSIVE
        ════════════════════════════════════════════════════ */
@media(max-width:1024px) {
    .gc-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:900px) {
    .usp-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

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

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

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

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

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

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

@media(max-width:768px) {
    .hero {
        padding: 48px 24px 44px;
    }

        .hero h1 {
            font-size: 30px;
        }

    .hstats {
        gap: 16px;
    }

    .hsep {
        display: none;
    }

    section {
        padding: 48px 0;
    }

    .fc-footer {
        padding: 28px 0 24px;
    }

    .fc-cat-links {
        font-size: 11.5px;
        line-height: 1.95;
    }

    .stat-bar, .testi-stat-bar {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px) {
    .hero {
        padding: 40px 16px 36px;
    }

        .hero h1 {
            font-size: 26px;
        }

    .srch {
        padding: 8px 8px 8px 16px;
    }

    .hstats {
        gap: 12px;
    }

    .hstat-n {
        font-size: 20px;
    }

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

    .cat-grid, .testi-grid, .blog-grid {
        grid-template-columns: 1fr;
    }

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

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

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }

    .body-row {
        grid-template-columns: 80px 1fr;
    }

    .body-country {
        display: none;
    }
}

/* di-badge — text country abbreviation (IN, US) matching image */
.di-badge {
    background: #f0f0f0;
    color: #555;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'DM Sans',sans-serif;
}

/* ════════════════════════════════════════════════════
           HERO FIXES — clean sharp bottom edge, no gradients
           Overrides hp1 hero::before / hero::after
        ════════════════════════════════════════════════════ */
.hero::before,
.hero::after {
    display: none !important;
    content: none !important;
}

/* Ensure dark navy background — no gradient, clean cut */
.hero {
    background: #0B1A3B !important;
    overflow: hidden;
}

/* ================================================================
           home1.css — Colour & UI Enhancements
           USA-standard, international healthcare platform look.
           All rules appended — zero changes to base home.css.
        ================================================================ */

/* ────────────────────────────────────────────────────────
           1. FEATURED EXAM TAB BUTTONS — profession-specific colours
        ──────────────────────────────────────────────────────── */

/* Base tab reset — clean pill style */
.tab-btn {
    font-size: 12px;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s;
    font-family: 'DM Sans', sans-serif;
}

    /* Doctor — deep cobalt blue (medical authority) */
    .tab-btn[onclick*="doctor"] {
        border-color: #1A56DB;
        color: #1A56DB;
        background: #EEF4FF;
    }

        .tab-btn[onclick*="doctor"].active,
        .tab-btn[onclick*="doctor"]:hover {
            background: #1A56DB;
            color: #fff;
            border-color: #1A56DB;
        }

    /* Medical Student — rich indigo/violet */
    .tab-btn[onclick*="medstudent"] {
        border-color: #6366F1;
        color: #6366F1;
        background: #EEF2FF;
    }

        .tab-btn[onclick*="medstudent"].active,
        .tab-btn[onclick*="medstudent"]:hover {
            background: #6366F1;
            color: #fff;
            border-color: #6366F1;
        }

    /* Pharmacist — emerald green (pharmacy cross colour) */
    .tab-btn[onclick*="pharmacist"]:not([onclick*="pharmstudent"]) {
        border-color: #059669;
        color: #059669;
        background: #ECFDF5;
    }

        .tab-btn[onclick*="pharmacist"]:not([onclick*="pharmstudent"]).active,
        .tab-btn[onclick*="pharmacist"]:not([onclick*="pharmstudent"]):hover {
            background: #059669;
            color: #fff;
            border-color: #059669;
        }

    /* Pharmacy Student — violet/purple */
    .tab-btn[onclick*="pharmstudent"] {
        border-color: #7C3AED;
        color: #7C3AED;
        background: #F5F3FF;
    }

        .tab-btn[onclick*="pharmstudent"].active,
        .tab-btn[onclick*="pharmstudent"]:hover {
            background: #7C3AED;
            color: #fff;
            border-color: #7C3AED;
        }

    /* Nurse — rose pink (nursing care) */
    .tab-btn[onclick*="nurse"] {
        border-color: #DB2777;
        color: #DB2777;
        background: #FDF2F8;
    }

        .tab-btn[onclick*="nurse"].active,
        .tab-btn[onclick*="nurse"]:hover {
            background: #DB2777;
            color: #fff;
            border-color: #DB2777;
        }

    /* Dentist — sky blue (dental white/blue) */
    .tab-btn[onclick*="dentist"] {
        border-color: #0284C7;
        color: #0284C7;
        background: #F0F9FF;
    }

        .tab-btn[onclick*="dentist"].active,
        .tab-btn[onclick*="dentist"]:hover {
            background: #0284C7;
            color: #fff;
            border-color: #0284C7;
        }

    /* IPC & Quality — teal (hospital/infection control) */
    .tab-btn[onclick*="ipc"] {
        border-color: #0D9488;
        color: #0D9488;
        background: #F0FDFA;
    }

        .tab-btn[onclick*="ipc"].active,
        .tab-btn[onclick*="ipc"]:hover {
            background: #0D9488;
            color: #fff;
            border-color: #0D9488;
        }

/* ────────────────────────────────────────────────────────
           3. BROWSE BY CATEGORY — stat cards with distinct colours
        ──────────────────────────────────────────────────────── */
.stat-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin-bottom: 32px;
}

.stat-card {
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    border: none;
    position: relative;
    overflow: hidden;
}

    /* Each card gets a distinct USA-standard gradient */
    .stat-card:nth-child(1) {
        background: linear-gradient(135deg, #1A56DB 0%, #3B82F6 100%);
    }

    .stat-card:nth-child(2) {
        background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
    }

    .stat-card:nth-child(3) {
        background: linear-gradient(135deg, #059669 0%, #34D399 100%);
    }

    .stat-card:nth-child(4) {
        background: linear-gradient(135deg, #D97706 0%, #FBBF24 100%);
    }

.stat-card-num {
    font-family: 'Fraunces', serif;
    font-size: 32px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1;
}

.stat-card-lbl {
    font-size: 11px;
    color: rgba(255,255,255,.85);
    margin: 0;
    font-weight: 500;
}

/* ────────────────────────────────────────────────────────
           5. SUCCESS STORIES — stat cards with bold colours
        ──────────────────────────────────────────────────────── */
.testi-stat-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.testi-stat {
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .testi-stat:nth-child(1) {
        background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    }

    .testi-stat:nth-child(2) {
        background: linear-gradient(135deg, #1A56DB 0%, #3B82F6 100%);
    }

    .testi-stat:nth-child(3) {
        background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 100%);
    }

    .testi-stat:nth-child(4) {
        background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
    }

.testi-stat-num {
    font-family: 'Fraunces', serif;
    font-size: 28px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1;
}

.testi-stat-lbl {
    font-size: 11px;
    color: rgba(255,255,255,.85);
    margin: 0;
    font-weight: 500;
}

/* ────────────────────────────────────────────────────────
           6. TESTIMONIAL CARDS — elevated with left accent border
        ──────────────────────────────────────────────────────── */
.testi-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 22px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all .2s;
    border-left: 4px solid #1A56DB;
}

    .testi-card:hover {
        border-color: #1A56DB;
        box-shadow: 0 8px 28px rgba(26,86,219,.12);
        transform: translateY(-2px);
    }

/* ────────────────────────────────────────────────────────
           7. TESTIMONIAL BADGE COLOURS — profession accent
        ──────────────────────────────────────────────────────── */
.testi-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: #EEF4FF;
    color: #1A56DB;
    border: 1px solid #C3D9FF;
    letter-spacing: .01em;
}

.testi-stars {
    font-size: 13px;
    color: #F59E0B;
    letter-spacing: 2px;
}

/* ────────────────────────────────────────────────────────
           8. EXAM CARD — hover accent
        ──────────────────────────────────────────────────────── */
.exam-card {
    background: #fff;
    border: 1.5px solid #e5e5e5;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all .18s;
}

    .exam-card:hover {
        border-color: #1A56DB;
        box-shadow: 0 4px 20px rgba(26,86,219,.12);
        transform: translateY(-2px);
    }

/* ────────────────────────────────────────────────────────
           9. VIEW ALL / BLOG SECTION BUTTON
        ──────────────────────────────────────────────────────── */
.view-all {
    font-size: 13px;
    color: #1A56DB;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap .15s;
}

/* ────────────────────────────────────────────────────────
           10. CATEGORY CARDS — hover with left accent
        ──────────────────────────────────────────────────────── */
.cat-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: all .18s;
    border-left: 4px solid transparent;
}

    .cat-card:hover {
        border-color: #e5e5e5;
        border-left-color: #1A56DB;
        box-shadow: 0 4px 20px rgba(26,86,219,.1);
        transform: translateX(3px);
    }

/* ────────────────────────────────────────────────────────
           11. USP CARDS — elevated on hover
        ──────────────────────────────────────────────────────── */
.usp-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all .2s;
}

    .usp-card:hover {
        border-color: #C3D9FF;
        box-shadow: 0 6px 24px rgba(26,86,219,.1);
        transform: translateY(-3px);
    }

/* ────────────────────────────────────────────────────────
           12. BLOG CARDS — accent on hover
        ──────────────────────────────────────────────────────── */
.blog-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 20px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all .2s;
    cursor: pointer;
    border-top: 3px solid transparent;
}

.blog-arrow {
    font-size: 14px;
    color: #1A56DB;
    font-weight: 700;
    transition: transform .15s;
}

/* ────────────────────────────────────────────────────────
           13. RESPONSIVE — stat/testi bars collapse gracefully
        ──────────────────────────────────────────────────────── */
@media(max-width:768px) {
    .stat-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .testi-stat-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-card, .testi-stat {
        padding: 16px 12px;
    }

    .stat-card-num {
        font-size: 26px;
    }

    .testi-stat-num {
        font-size: 22px;
    }
}

@media(max-width:480px) {
    .stat-bar {
        grid-template-columns: repeat(2,1fr);
    }

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

/* ════════════════════════════════════════════════════
           BLOG SECTION — coloured thumbnail cards
        ════════════════════════════════════════════════════ */
.blog-section {
    background: #F8FAFF;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
    margin-bottom: 28px;
}

/* Card shell */
.blog-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all .22s;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    border-top: none; /* reset home1 top-border rule */
}

    .blog-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 36px rgba(0,0,0,.1);
        border-color: #e8e8e8;
    }

/* Coloured thumbnail banner */
.blog-thumb-wrap {
    width: 100%;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
}

.blog-thumb-blue {
    background: linear-gradient(135deg, #1A56DB 0%, #60A5FA 100%);
}

.blog-thumb-green {
    background: linear-gradient(135deg, #059669 0%, #34D399 100%);
}

.blog-thumb-amber {
    background: linear-gradient(135deg, #D97706 0%, #FCD34D 100%);
}

.blog-thumb-icon {
    font-size: 46px;
    line-height: 1;
    opacity: .9;
}

.blog-thumb-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.85);
    background: rgba(0,0,0,.18);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    align-self: flex-start;
}

/* Card body */
.blog-body {
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Category pill */
.blog-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.blog-cat {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: .04em;
    white-space: nowrap;
}

.blog-cat-blue {
    background: #EEF4FF;
    color: #1A56DB;
    border: 1px solid #C3D9FF;
}

.blog-cat-green {
    background: #ECFDF5;
    color: #059669;
    border: 1px solid #A7F3D0;
}

.blog-cat-amber {
    background: #FFFBEB;
    color: #D97706;
    border: 1px solid #FCD34D;
}

.blog-date {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
}

/* Title */
.blog-title {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    line-height: 1.5;
    margin: 0;
}

/* Excerpt */
.blog-excerpt {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.65;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer row */
.blog-footer {
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
    margin-top: auto;
}

.blog-read-more {
    font-size: 12px;
    font-weight: 600;
    color: #1A56DB;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap .15s;
}

.blog-card:hover .blog-read-more {
    gap: 8px;
}

.blog-card:hover .blog-arrow {
    transform: none;
}

/* Responsive */
@media(max-width:900px) {
    .blog-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

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

/* ════════════════════════════════════════════════════
           GOVERNING BODIES — colourful profession cards
        ════════════════════════════════════════════════════ */

.gc-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #1a1a1a;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .gc-section-title::before,
    .gc-section-title::after {
        content: '';
        flex: 1;
        height: 1.5px;
        background: linear-gradient(to right, #e5e5e5, transparent);
    }

    .gc-section-title::after {
        background: linear-gradient(to left, #e5e5e5, transparent);
    }

.gc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
    margin-bottom: 32px;
}

/* Card shell */
.gc-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1.5px solid var(--gc-mid);
    transition: all .22s;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

    .gc-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0,0,0,.1);
        border-color: var(--gc-accent);
    }

/* Coloured header strip */
.gc-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--gc-grad);
    border-bottom: none;
}

/* Icon circle */
.gc-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}

/* Override base body-prof-title/sub for coloured header */
.gc-top .body-prof-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 2px;
}

.gc-top .body-prof-sub {
    font-size: 10px;
    color: rgba(255,255,255,.8);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0;
}

/* Rows area */
.gc-rows {
    padding: 12px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Each row */
.gc-card .body-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--gc-light);
}

    .gc-card .body-row:last-child {
        border-bottom: none;
    }

/* Exam body name badge */
.gc-card .body-row-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--gc-accent);
    background: var(--gc-light);
    border: 1px solid var(--gc-mid);
    border-radius: 5px;
    padding: 2px 8px;
    white-space: nowrap;
    min-width: 80px;
    text-align: center;
    flex-shrink: 0;
}

/* Description */
.gc-card .body-row-desc {
    font-size: 11px;
    color: #555;
    line-height: 1.4;
    flex: 1;
}

/* Country pill */
.gc-card .body-country {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gc-light);
    color: var(--gc-accent);
    border: 1px solid var(--gc-mid);
    white-space: nowrap;
    flex-shrink: 0;
    text-align: center;
}

/* Responsive */
@media(max-width:1024px) {
    .gc-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

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

/* ════════════════════════════════════════════════════
           RESPONSIVE NAVBAR — definitive rules (highest priority)
           Hamburger shows on mobile, full menu hidden
        ════════════════════════════════════════════════════ */

/* Desktop (>1024px): full nav visible, hamburger hidden */
@media(min-width:1025px) {



    .hm-drawer {
        display: flex;
        transform: translateX(-100%);
    }
}

/* Mobile / Tablet (≤1024px): hamburger only */
@media(max-width:1024px) {
}

/* Also override the hp1 900px rule that partially hides nav items */
@media(max-width:900px) {
    .navbar-nav .nav-item {
        display: none !important;
    }
}

@media(min-width:901px) and (max-width:1024px) {
}

/* Drawer overlay */
.hm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 500;
    backdrop-filter: blur(2px);
}

    .hm-overlay.open {
        display: block;
    }

/* Drawer panel */
.hm-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 85vw);
    background: #fff;
    z-index: 600;
    box-shadow: 4px 0 32px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.25,.46,.45,.94);
    overflow-y: auto;
}

    .hm-drawer.open {
        transform: translateX(0) !important;
    }

/* Drawer header */
.hm-drawer-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 2px solid #f0f0f0;
    flex-shrink: 0;
}

.hm-drawer-logo {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--blue);
}

.hm-drawer-close {
    background: none;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

    .hm-drawer-close:hover {
        border-color: #dc2626;
        color: #dc2626;
    }

/* Drawer links */
.hm-drawer-links {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    flex: 1;
}

    .hm-drawer-links a {
        padding: 13px 20px;
        font-size: 14px;
        font-weight: 500;
        color: #374151;
        border-left: 3px solid transparent;
        transition: all .15s;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .hm-drawer-links a:hover {
            background: #EEF4FF;
            color: var(--blue);
            border-left-color: var(--blue);
        }

/* Drawer action buttons */
.hm-drawer-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 24px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.hm-db-ghost {
    display: block;
    text-align: center;
    padding: 11px;
    border-radius: 999px;
    border: 1.5px solid #d0d0d0;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    transition: all .15s;
}

    .hm-db-ghost:hover {
        border-color: var(--blue);
        color: var(--blue);
    }

.hm-db-primary {
    display: block;
    text-align: center;
    padding: 11px;
    border-radius: 999px;
    background: var(--blue);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    transition: all .15s;
}

    .hm-db-primary:hover {
        background: var(--blue-dark);
    }

/* ════════════════════════════════════════════════════
           EXAM CARDS — coloured banner + solid purple Enroll button
        ════════════════════════════════════════════════════ */

.tab-btn {
    --tb-col: #1A56DB;
    --tb-light: #EEF4FF;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s;
    font-family: 'DM Sans', sans-serif;
}

    .tab-btn:hover {
        border-color: var(--tb-col);
        color: var(--tb-col);
        background: var(--tb-light);
    }

    .tab-btn.active {
        background: var(--tb-col);
        border-color: var(--tb-col);
        color: #fff;
        box-shadow: 0 4px 14px rgba(0,0,0,.18);
    }

.ec-flag {
    font-size: 28px;
    line-height: 1;
}

.ec-pill {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.3);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Card body */
.ec-body {
    padding: 14px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.ec-name {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.2;
}

.ec-full {
    font-size: 11px;
    color: #6b7280;
    margin: 0 0 2px;
    line-height: 1.4;
}

.ec-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
}

.ec-country {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

/* View all link */
.view-all {
    font-size: 13px;
    font-weight: 600;
    color: #7C3AED;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap .15s;
}

    .view-all:hover {
        text-decoration: underline;
        gap: 9px;
    }

/* Grid responsive */
.exams-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    margin-bottom: 16px;
}

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

@media(max-width:480px) {
    .exams-grid {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════
           USP CARDS — light gradient top strip
        ════════════════════════════════════════════════════ */
.usp-c {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    transition: all .22s;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    padding: 0;
}

    .usp-c:hover {
        border-color: var(--usp-col);
        box-shadow: 0 10px 32px rgba(0,0,0,.1);
        transform: translateY(-4px);
    }

/* Coloured gradient top strip */
.usp-strip {
    height: 6px;
    background: var(--usp-grad);
    flex-shrink: 0;
}

.usp-inner {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Icon circle with light tint background */
.usp-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--usp-light);
    border: 1.5px solid color-mix(in srgb, var(--usp-col) 20%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.usp-icon-em {
    font-size: 20px;
    line-height: 1;
}

.usp-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    line-height: 1.3;
}

.usp-desc {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
    line-height: 1.65;
}

/* ────────────────────────────────────────────────────────
           EXAM CARD — top strip design (matches USP cards)
        ──────────────────────────────────────────────────────── */
.ec-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    transition: all .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    padding: 0;
}

    .ec-card:hover {
        border-color: var(--ec-col);
        box-shadow: 0 10px 32px rgba(0,0,0,.1);
        transform: translateY(-4px);
    }

/* 6px gradient top strip — same style as USP cards */
.ec-strip {
    height: 6px;
    background: var(--ec-grad);
    flex-shrink: 0;
}

/* Card body */
.ec-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* Flag + category pill top row */
.ec-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ec-flag {
    font-size: 26px;
    line-height: 1;
}

.ec-pill {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ec-col);
    background: var(--ec-light);
    border: 1px solid color-mix(in srgb, var(--ec-col) 25%, transparent);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.ec-name {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.2;
}

.ec-full {
    font-size: 11px;
    color: #6b7280;
    margin: 0 0 2px;
    line-height: 1.4;
}

.ec-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
}

.ec-country {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

/* ────────────────────────────────────────────────────────
           ALL BUTTONS — solid purple #7C3AED (single definition)
        ──────────────────────────────────────────────────────── */

/* Enroll now (exam cards) */
.ec-enroll {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 8px;
    background: #7C3AED;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all .18s;
    font-family: 'DM Sans', sans-serif;
    white-space: nowrap;
    letter-spacing: .01em;
}

    .ec-enroll:hover {
        background: #6D28D9;
        box-shadow: 0 4px 14px rgba(124,58,237,.4);
        transform: translateY(-1px);
    }

/* Enroll now (old exam cards using cta-btn) */
.cta-btn {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 8px;
    background: #7C3AED;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all .18s;
    font-family: 'DM Sans', sans-serif;
    white-space: nowrap;
}

    .cta-btn:hover {
        background: #6D28D9;
        box-shadow: 0 4px 14px rgba(124,58,237,.4);
    }

/* Browse all / Visit blog buttons */
.browse-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 999px;
    background: #7C3AED;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all .2s;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: .01em;
    box-shadow: 0 4px 16px rgba(124,58,237,.3);
}

    .browse-all-btn:hover {
        background: #6D28D9;
        box-shadow: 0 6px 24px rgba(124,58,237,.45);
        transform: translateY(-2px);
    }


/* ────────────────────────────────────────────────────────
           SECTION HEADINGS — base (all sections)
        ──────────────────────────────────────────────────────── */
.section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7C3AED;
    margin-bottom: 8px;
    font-family: 'DM Sans', sans-serif;
}

.section-title {
    font-family: 'Fraunces', serif;
    font-size: 32px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 8px;
    line-height: 1.2;
}

.section-sub {
    font-size: 15px;
    color: #6b7280;
    margin-bottom: 32px;
    max-width: 560px;
    line-height: 1.65;
}


/* ────────────────────────────────────────────────────────
           FEATURED EXAMS — 3-colour heading treatment
        ──────────────────────────────────────────────────────── */
.fe-label {
    color: #7C3AED;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
}

.fe-title {
    font-family: 'Fraunces', serif;
    font-size: 34px;
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 10px;
    color: #111827;
}

/* "licensing" — cobalt blue */
.fe-t1 {
    color: #1A56DB;
    font-style: normal;
}

/* "exam" — purple */
.fe-t2 {
    color: #7C3AED;
    font-style: normal;
}

.fe-sub {
    font-size: 15px;
    color: #6b7280;
    margin-bottom: 28px;
    line-height: 1.65;
}

/* "40+ exams" — blue */
.fe-s1 {
    color: #1A56DB;
    font-weight: 600;
}

/* "100+ courses" — purple */
.fe-s2 {
    color: #7C3AED;
    font-weight: 600;
}

/* "7 professions" — teal */
.fe-s3 {
    color: #0D9488;
    font-weight: 600;
}


/* ────────────────────────────────────────────────────────
           TRUSTED INSTITUTIONS — multi-colour badge cards
        ──────────────────────────────────────────────────────── */
.badges-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin-bottom: 36px;
}


/* Badge card shell */
.bc-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid var(--bc-mid);
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: all .22s;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    padding: 0;
}

    .bc-card:hover {
        border-color: var(--bc-col);
        box-shadow: 0 10px 28px rgba(0,0,0,.1);
        transform: translateY(-4px);
    }


/* 6px gradient top strip */
.bc-strip {
    height: 6px;
    background: var(--bc-grad);
    flex-shrink: 0;
}


/* Card inner */
.bc-inner {
    padding: 16px 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1;
}


/* Icon circle */
.bc-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bc-light);
    border: 2px solid var(--bc-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.bc-icon-em {
    font-size: 20px;
    line-height: 1;
}


/* Name, region, tag */
.bc-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--bc-col);
    margin: 0;
    line-height: 1.2;
}

.bc-region {
    font-size: 11px;
    color: #9ca3af;
    margin: 0;
    font-weight: 500;
}

.bc-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bc-light);
    color: var(--bc-col);
    border: 1px solid var(--bc-mid);
    margin-top: 4px;
    letter-spacing: .03em;
}


/* badge-card (old class alias) */
.badge-card {
    padding: 0;
}


/* Responsive */
@media(max-width:900px) {
    .badges-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

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



/* ════════════════════════════════════════════════════
           FIX 1: NAVBAR — logo left, nav middle, actions right
        ════════════════════════════════════════════════════ */
.navbar {
    padding: 0 !important;
}







/* ════════════════════════════════════════════════════
           FIX 2: RESPONSIVE NAVBAR (overrides all previous)
        ════════════════════════════════════════════════════ */
@media(min-width:1025px) {
}

@media(max-width:1024px) {
}


/* ════════════════════════════════════════════════════
           FIX 3: TAB BUTTONS — all one neutral teal/slate color
           Selected = teal #0D9488, hover = same tint
        ════════════════════════════════════════════════════ */
.tab-btn {
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 7px 16px !important;
    border-radius: 999px !important;
    border: 1.5px solid #e0e7ef !important;
    background: #f8fafc !important;
    color: #475569 !important;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s;
    font-family: 'DM Sans', sans-serif;
    --tb-col: #0D9488;
    --tb-light: #F0FDFA;
}

    .tab-btn:hover {
        border-color: #0D9488 !important;
        color: #0D9488 !important;
        background: #F0FDFA !important;
    }

    .tab-btn.active {
        background: #0D9488 !important;
        border-color: #0D9488 !important;
        color: #fff !important;
        box-shadow: 0 4px 12px rgba(13,148,136,.25) !important;
    }

    /* Override the per-profession colour rules */
    .tab-btn[onclick*="doctor"],
    .tab-btn[onclick*="medstudent"],
    .tab-btn[onclick*="pharmacist"]:not([onclick*="pharmstudent"]),
    .tab-btn[onclick*="pharmstudent"],
    .tab-btn[onclick*="nurse"],
    .tab-btn[onclick*="dentist"],
    .tab-btn[onclick*="ipc"] {
        border-color: #e0e7ef !important;
        color: #475569 !important;
        background: #f8fafc !important;
    }

        .tab-btn[onclick*="doctor"]:hover,
        .tab-btn[onclick*="medstudent"]:hover,
        .tab-btn[onclick*="pharmacist"]:not([onclick*="pharmstudent"]):hover,
        .tab-btn[onclick*="pharmstudent"]:hover,
        .tab-btn[onclick*="nurse"]:hover,
        .tab-btn[onclick*="dentist"]:hover,
        .tab-btn[onclick*="ipc"]:hover {
            border-color: #0D9488 !important;
            color: #0D9488 !important;
            background: #F0FDFA !important;
        }

        .tab-btn[onclick*="doctor"].active,
        .tab-btn[onclick*="medstudent"].active,
        .tab-btn[onclick*="pharmacist"]:not([onclick*="pharmstudent"]).active,
        .tab-btn[onclick*="pharmstudent"].active,
        .tab-btn[onclick*="nurse"].active,
        .tab-btn[onclick*="dentist"].active,
        .tab-btn[onclick*="ipc"].active {
            background: #0D9488 !important;
            border-color: #0D9488 !important;
            color: #fff !important;
            box-shadow: 0 4px 12px rgba(13,148,136,.25) !important;
        }


/* ════════════════════════════════════════════════════
           FIX 4: ENROLL BUTTON — light outline, not solid purple
        ════════════════════════════════════════════════════ */
.ec-enroll {
    display: inline-flex !important;
    align-items: center;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--ec-col, #185FA5) !important;
    text-decoration: none;
    border: 1.5px solid var(--ec-col, #185FA5) !important;
    cursor: pointer;
    transition: all .18s;
    font-family: 'DM Sans', sans-serif;
    white-space: nowrap;
}

    .ec-enroll:hover {
        background: var(--ec-col, #185FA5) !important;
        color: #fff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
        transform: translateY(-1px);
    }

.cta-btn {
    background: transparent !important;
    color: #185FA5 !important;
    border: 1.5px solid #185FA5 !important;
    box-shadow: none !important;
}

    .cta-btn:hover {
        background: #185FA5 !important;
        color: #fff !important;
        box-shadow: 0 4px 12px rgba(24,95,165,.25) !important;
    }


/* ════════════════════════════════════════════════════
           FIX 5: EC-CARD (Featured Exams) — left side color accent
           Remove top strip, add left border accent like success stories
        ════════════════════════════════════════════════════ */
.ec-card {
    border-radius: 12px !important;
    border: 1px solid #e8e8e8 !important;
    border-left: 4px solid var(--ec-col, #185FA5) !important;
    overflow: visible !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.06) !important;
    padding: 0 !important;
    background: #fff !important;
}

    .ec-card:hover {
        border-left-color: var(--ec-col, #185FA5) !important;
        box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
        transform: translateY(-3px);
    }

.ec-strip {
    display: none !important; /* hide the top gradient strip */
}

.ec-pill {
    color: var(--ec-col, #185FA5) !important;
    background: var(--ec-light, #E6F1FB) !important;
    border: 1px solid var(--ec-col, #185FA5) !important;
    border-color: color-mix(in srgb, var(--ec-col, #185FA5) 30%, transparent) !important;
}


/* ════════════════════════════════════════════════════
           FIX 6: GC-CARD (Governing Bodies) — left border accent
        ════════════════════════════════════════════════════ */
.gc-card {
    border-radius: 12px !important;
    border: 1px solid #e8e8e8 !important;
    border-left: 4px solid var(--gc-accent, #185FA5) !important;
    overflow: visible !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
}

    .gc-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,.09) !important;
        transform: translateY(-3px);
    }

/* Remove the gradient top strip from gc-card if present */
.gc-top {
    background: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 14px 16px 12px !important;
}

.gc-icon {
    background: var(--gc-light, #E6F1FB) !important;
    border: 1.5px solid var(--gc-mid, #c5d8ee) !important;
    border-radius: 8px !important;
}


/* ════════════════════════════════════════════════════
           FIX 7: TESTIMONIAL / SUCCESS STORY CARDS — left accent, curved
        ════════════════════════════════════════════════════ */
.testi-card {
    border-radius: 12px !important;
    border: 1px solid #e8e8e8 !important;
    border-left: 4px solid var(--blue) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
    padding: 20px 18px !important;
    background: #fff !important;
    transition: all .2s !important;
}

    .testi-card:hover {
        box-shadow: 0 6px 20px rgba(24,95,165,.12) !important;
        transform: translateY(-3px);
        border-left-color: var(--blue) !important;
    }

    /* Rotate left-accent colour per card */
    .testi-card:nth-child(1) {
        border-left-color: #185FA5 !important;
    }

    .testi-card:nth-child(2) {
        border-left-color: #0D9488 !important;
    }

    .testi-card:nth-child(3) {
        border-left-color: #7C3AED !important;
    }

    .testi-card:nth-child(4) {
        border-left-color: #DB2777 !important;
    }

    .testi-card:nth-child(5) {
        border-left-color: #059669 !important;
    }

    .testi-card:nth-child(6) {
        border-left-color: #0284C7 !important;
    }


/* ════════════════════════════════════════════════════
           FIX 8: BC-CARD (Badge/Institution cards) — left accent
        ════════════════════════════════════════════════════ */
.bc-card {
    border-radius: 12px !important;
    border: 1px solid var(--bc-mid) !important;
    border-left: 4px solid var(--bc-col) !important;
    overflow: visible !important;
}

.bc-strip {
    display: none !important;
}

.bc-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
    transform: translateY(-3px);
}



/* ════════════════════════════════════════════════════
           FIX: BLOG CARDS — left accent border, pastel colours, no solid gradient thumb
        ════════════════════════════════════════════════════ */
.blog-card {
    border-radius: 14px !important;
    border: 1px solid #e8e8e8 !important;
    border-top: none !important;
    border-left: 4px solid #185FA5 !important;
    overflow: visible !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
    background: #fff !important;
    transition: all .2s !important;
}

    .blog-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
        transform: translateY(-3px);
    }

/* Per-card left border colour */
.blog-card-1 {
    border-left-color: #185FA5 !important;
}

.blog-card-2 {
    border-left-color: #059669 !important;
}

.blog-card-3 {
    border-left-color: #D97706 !important;
}

.blog-card-4 {
    border-left-color: #7C3AED !important;
}

.blog-card-5 {
    border-left-color: #DB2777 !important;
}

.blog-card-6 {
    border-left-color: #0D9488 !important;
}


/* Thumbnail — replace dark gradient with light pastel */
.blog-thumb-wrap {
    height: 110px !important;
    border-radius: 0 !important;
    padding: 14px 18px !important;
}

.blog-thumb-blue {
    background: #EEF4FF !important;
}

.blog-thumb-green {
    background: #ECFDF5 !important;
}

.blog-thumb-amber {
    background: #FFFBEB !important;
}

.blog-thumb-purple {
    background: #F5F3FF !important;
}

.blog-thumb-pink {
    background: #FDF2F8 !important;
}

.blog-thumb-teal {
    background: #F0FDFA !important;
}


/* Thumb icon — darker on light bg */
.blog-thumb-icon {
    opacity: 1 !important;
}


/* Thumb tag pill — dark text on light bg */
.blog-thumb-tag {
    color: #374151 !important;
    background: rgba(0,0,0,.07) !important;
    font-size: 10px !important;
}

/* Card body padding */
.blog-body {
    padding: 14px 16px 16px !important;
}

.blog-title {
    font-size: 14px !important;
    color: #111827 !important;
    font-weight: 600 !important;
}

.blog-excerpt {
    font-size: 12px !important;
    color: #6b7280 !important;
}



/* ════════ HOME1 FINAL POLISH ════════ */

/* Fraunces on ALL headings */
.section-title, .fe-title, .gc-main-heading, h1, h2, h3 {
    font-family: 'Fraunces',Georgia,serif !important;
}


/* Navbar: no stretch, right-aligned actions */
.navbar {
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important
}






@media(min-width:1025px) {
}

@media(max-width:1024px) {
}


/* No horizontal stretch */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

section, footer, .hero, .navbar, .fc-footer {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
}


/* ── TAB BUTTONS: all same neutral color, active = light indigo ── */
.tab-btn {
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 7px 16px !important;
    border-radius: 999px !important;
    border: 1.5px solid #CBD5E1 !important;
    background: #F8FAFC !important;
    color: #475569 !important;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s;
    font-family: 'DM Sans',sans-serif;
}

    .tab-btn:hover {
        border-color: #818CF8 !important;
        color: #4F46E5 !important;
        background: #EEF2FF !important;
    }

    .tab-btn.active {
        background: #EEF2FF !important;
        border-color: #818CF8 !important;
        color: #4F46E5 !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 10px rgba(99,102,241,.2) !important;
    }

    /* Override all per-profession colour rules completely */
    .tab-btn[onclick*="doctor"], .tab-btn[onclick*="medstudent"],
    .tab-btn[onclick*="pharmacist"], .tab-btn[onclick*="pharmstudent"],
    .tab-btn[onclick*="nurse"], .tab-btn[onclick*="dentist"],
    .tab-btn[onclick*="ipc"] {
        border-color: #CBD5E1 !important;
        color: #475569 !important;
        background: #F8FAFC !important;
    }

        .tab-btn[onclick*="doctor"]:hover, .tab-btn[onclick*="medstudent"]:hover,
        .tab-btn[onclick*="pharmacist"]:hover, .tab-btn[onclick*="pharmstudent"]:hover,
        .tab-btn[onclick*="nurse"]:hover, .tab-btn[onclick*="dentist"]:hover,
        .tab-btn[onclick*="ipc"]:hover {
            border-color: #818CF8 !important;
            color: #4F46E5 !important;
            background: #EEF2FF !important;
        }

        .tab-btn[onclick*="doctor"].active, .tab-btn[onclick*="medstudent"].active,
        .tab-btn[onclick*="pharmacist"].active, .tab-btn[onclick*="pharmstudent"].active,
        .tab-btn[onclick*="nurse"].active, .tab-btn[onclick*="dentist"].active,
        .tab-btn[onclick*="ipc"].active {
            background: #EEF2FF !important;
            border-color: #818CF8 !important;
            color: #4F46E5 !important;
            box-shadow: 0 2px 10px rgba(99,102,241,.2) !important;
        }


/* ── EC-CARD: same pastel style as USP cards, keep color after click ── */
.ec-card {
    border-radius: 14px !important;
    border: 1px solid #e8e8e8 !important;
    border-left: 4px solid var(--ec-col,#185FA5) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
    transition: all .2s !important;
}

    .ec-card:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
        transform: translateY(-3px);
    }

.ec-strip {
    display: none !important;
}

.ec-body {
    background: var(--ec-light,#EEF4FF)10 !important;
}

.ec-head-row {
    background: var(--ec-light,#EEF4FF);
    padding: 10px 14px;
    margin: -14px -14px 10px;
    border-bottom: 1px solid var(--ec-col,#185FA5)22;
}

.ec-pill {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    color: var(--ec-col,#185FA5) !important;
    background: #fff !important;
    border: 1px solid var(--ec-col,#185FA5) !important;
}

.ec-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

.ec-full {
    font-size: 11px !important;
    color: #6b7280 !important;
}

.ec-enroll {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--ec-col,#185FA5) !important;
    border: 1.5px solid var(--ec-col,#185FA5) !important;
    text-decoration: none;
    transition: all .18s;
}

    .ec-enroll:hover {
        background: var(--ec-col,#185FA5) !important;
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
    }


/* ── GC-CARD: left border, heading, light bg ── */
.gc-section-head {
    margin-bottom: 20px;
}

.gc-main-heading {
    font-family: 'Fraunces',serif !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    color: #111827;
    margin-bottom: 8px;
    line-height: 1.25;
}

.gc-sub-heading {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.7;
}

.gc-card {
    border-radius: 12px !important;
    border: 1px solid #e8e8e8 !important;
    border-left: 4px solid var(--gc-accent,#185FA5) !important;
    overflow: visible !important;
    background: #fff !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
    transition: all .2s !important;
}

    .gc-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
        transform: translateY(-3px);
    }

.gc-top {
    background: var(--gc-light,#EEF4FF) !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 12px 16px !important;
}

.gc-icon {
    background: #fff !important;
    border: 1.5px solid var(--gc-mid,#BFDBFE) !important;
    border-radius: 8px !important;
}

.gc-card .body-prof-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

.gc-card .body-prof-sub {
    font-size: 11px !important;
    color: #6b7280 !important;
}

.gc-card .body-row-name {
    color: var(--gc-accent,#185FA5) !important;
    font-weight: 700 !important;
}


/* ── BC-CARD (Trusted institutions): left border, no strip ── */
.bc-card {
    border-radius: 12px !important;
    border: 1px solid var(--bc-mid) !important;
    border-left: 4px solid var(--bc-col) !important;
    overflow: visible !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
    transition: all .2s !important;
}

.bc-strip {
    display: none !important;
}

.bc-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
    transform: translateY(-3px);
}

.bc-inner {
    padding: 16px 14px 18px !important;
}


/* ── TESTI-CARD: left border accent, curved ── */
.testi-card {
    border-radius: 12px !important;
    border: 1px solid #e8e8e8 !important;
    border-left: 4px solid #185FA5 !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
    padding: 20px 18px !important;
    background: #fff !important;
    transition: all .2s !important;
}

    .testi-card:hover {
        box-shadow: 0 6px 20px rgba(24,95,165,.12) !important;
        transform: translateY(-3px);
    }

    .testi-card:nth-child(1) {
        border-left-color: #185FA5 !important;
    }

    .testi-card:nth-child(2) {
        border-left-color: #0D9488 !important;
    }

    .testi-card:nth-child(3) {
        border-left-color: #7C3AED !important;
    }

    .testi-card:nth-child(4) {
        border-left-color: #DB2777 !important;
    }

    .testi-card:nth-child(5) {
        border-left-color: #059669 !important;
    }

    .testi-card:nth-child(6) {
        border-left-color: #D97706 !important;
    }


/* ── BLOG CARDS: left accent, pastel thumb, styled heading ── */
.blog-section {
    background: #F8FAFF !important;
}

.blog-card {
    border-radius: 14px !important;
    border: 1px solid #e8e8e8 !important;
    border-top: none !important;
    border-left: 4px solid #185FA5 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
    background: #fff !important;
    text-decoration: none;
    color: inherit;
    transition: all .2s !important;
}

    .blog-card:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
        transform: translateY(-3px);
    }

.blog-card-1 {
    border-left-color: #185FA5 !important;
}

.blog-card-2 {
    border-left-color: #059669 !important;
}

.blog-card-3 {
    border-left-color: #D97706 !important;
}

/* Pastel thumb backgrounds */
.blog-thumb-wrap {
    height: 100px !important;
    padding: 14px 18px !important;
}

.blog-thumb-blue {
    background: linear-gradient(135deg,#EEF4FF,#DBEAFE) !important;
}

.blog-thumb-green {
    background: linear-gradient(135deg,#ECFDF5,#D1FAE5) !important;
}

.blog-thumb-amber {
    background: linear-gradient(135deg,#FFFBEB,#FEF3C7) !important;
}

.blog-thumb-icon {
    opacity: 1 !important;
    font-size: 40px !important;
}

.blog-thumb-tag {
    color: #374151 !important;
    background: rgba(0,0,0,.07) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    align-self: flex-start !important;
}

/* Blog heading bar */
.blog-section .section-label {
    display: inline-block;
    background: #FFFBEB;
    color: #D97706 !important;
    border: 1px solid #FDE68A;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
}

.blog-body {
    padding: 14px 16px 16px !important;
}

.blog-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    line-height: 1.5 !important;
}

.blog-excerpt {
    font-size: 12px !important;
    color: #6b7280 !important;
    line-height: 1.6 !important;
}

.blog-read-more {
    font-size: 12.5px !important;
    color: #185FA5 !important;
    font-weight: 600 !important;
}


/* ── HOSPITAL PILLS: coloured ── */
.hospital-pill {
    font-size: 12px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid #e5e5e5;
    font-weight: 500;
    white-space: nowrap;
    transition: all .15s;
}


/* ── SECTION SUB multi-colour ── */
.fe-sub .fe-s1 {
    color: #1A56DB;
    font-weight: 600;
}

.fe-sub .fe-s2 {
    color: #7C3AED;
    font-weight: 600;
}

.fe-sub .fe-s3 {
    color: #0D9488;
    font-weight: 600;
}



/* ══ EXAM CARDS — doctor blue for ALL tabs ══ */
.ec-card {
    --ec-col: #1A56DB;
    --ec-light: #EEF4FF;
    border-left: 4px solid #1A56DB !important;
    border-radius: 14px !important;
    border-top: 1px solid #e8e8e8 !important;
    border-right: 1px solid #e8e8e8 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
    overflow: hidden !important;
    transition: all .2s !important;
    background: #fff !important;
    padding: 0 !important;
}

    .ec-card:hover {
        box-shadow: 0 8px 24px rgba(26,86,219,.15) !important;
        transform: translateY(-3px);
    }

/* Exam name in the pill position — big bold */
.ec-exam-name {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    font-weight: 700;
    color: #1A56DB;
    line-height: 1.15;
}

.ec-pill {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    color: #1A56DB !important;
    background: #EEF4FF !important;
    border: 1px solid #BFDBFE !important;
    white-space: nowrap;
    align-self: flex-start;
}

.ec-head-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 14px 8px !important;
    background: #EEF4FF !important;
    margin: 0 !important;
    border-bottom: 1px solid #BFDBFE !important;
}

.ec-body {
    padding: 8px 14px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.ec-full {
    font-size: 12.5px !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
    margin: 0 0 10px !important;
    flex: 1 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ec-strip {
    display: none !important;
}

.ec-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 8px !important;
    border-top: 1px solid #f0f4ff !important;
    margin-top: auto !important;
}

.ec-country {
    font-size: 11.5px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ec-enroll {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    border-radius: 8px !important;
    background: #1A56DB !important;
    color: #fff !important;
    border: 1.5px solid #1A56DB !important;
    text-decoration: none;
    transition: all .18s;
    white-space: nowrap;
}

    .ec-enroll:hover {
        background: #0C447C !important;
        border-color: #0C447C !important;
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(26,86,219,.25);
    }


/* ══ TAB BUTTONS — all same neutral, active = light blue ══ */
.tab-btn {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    padding: 7px 16px !important;
    border-radius: 999px !important;
    border: 1.5px solid #CBD5E1 !important;
    background: #F8FAFC !important;
    color: #475569 !important;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s;
    font-family: 'DM Sans', sans-serif;
}

    .tab-btn:hover {
        border-color: #93C5FD !important;
        color: #1A56DB !important;
        background: #EFF6FF !important;
    }

    .tab-btn.active {
        background: #EFF6FF !important;
        border-color: #93C5FD !important;
        color: #1A56DB !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 10px rgba(26,86,219,.15) !important;
    }

/* Kill ALL per-profession overrides */
[class*="tab-btn"][onclick*="doctor"],
[class*="tab-btn"][onclick*="medstudent"],
[class*="tab-btn"][onclick*="pharmacist"],
[class*="tab-btn"][onclick*="pharmstudent"],
[class*="tab-btn"][onclick*="nurse"],
[class*="tab-btn"][onclick*="dentist"],
[class*="tab-btn"][onclick*="ipc"] {
    border-color: #CBD5E1 !important;
    color: #475569 !important;
    background: #F8FAFC !important;
}

    [class*="tab-btn"][onclick*="doctor"].active,
    [class*="tab-btn"][onclick*="medstudent"].active,
    [class*="tab-btn"][onclick*="pharmacist"].active,
    [class*="tab-btn"][onclick*="pharmstudent"].active,
    [class*="tab-btn"][onclick*="nurse"].active,
    [class*="tab-btn"][onclick*="dentist"].active,
    [class*="tab-btn"][onclick*="ipc"].active {
        background: #EFF6FF !important;
        border-color: #93C5FD !important;
        color: #1A56DB !important;
        box-shadow: 0 2px 10px rgba(26,86,219,.15) !important;
    }

    [class*="tab-btn"][onclick*="doctor"]:hover,
    [class*="tab-btn"][onclick*="medstudent"]:hover,
    [class*="tab-btn"][onclick*="pharmacist"]:hover,
    [class*="tab-btn"][onclick*="pharmstudent"]:hover,
    [class*="tab-btn"][onclick*="nurse"]:hover,
    [class*="tab-btn"][onclick*="dentist"]:hover,
    [class*="tab-btn"][onclick*="ipc"]:hover {
        border-color: #93C5FD !important;
        color: #1A56DB !important;
        background: #EFF6FF !important;
    }


/* ══ GOVERNING BODIES: no bg on header, 1 per row ══ */
.gc-grid {
    grid-template-columns: 1fr !important;
}

.gc-top {
    background: transparent !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.gc-card {
    border-radius: 12px !important;
    border: 1px solid #e5e5e5 !important;
    border-left: 4px solid var(--gc-accent, #185FA5) !important;
}

.body-prof-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}


/* ══ BLOG: no thumb bg, italic category, clean ══ */
.blog-thumb-plain {
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0;
    height: 60px !important;
    padding: 12px 18px !important;
    display: flex;
    align-items: center;
}

    .blog-thumb-plain .blog-thumb-icon {
        font-size: 28px !important;
        opacity: .8;
    }

.blog-cat {
    font-size: 11px !important;
    font-weight: 600 !important;
    font-style: normal;
    padding: 3px 10px !important;
    border-radius: 999px !important;
}

.blog-cat-blue {
    background: #EEF4FF;
    color: #1A56DB;
    border: 1px solid #BFDBFE;
}

.blog-cat-green {
    background: #ECFDF5;
    color: #059669;
    border: 1px solid #A7F3D0;
}

.blog-cat-amber {
    background: #FFFBEB;
    color: #D97706;
    border: 1px solid #FDE68A;
}

.blog-card {
    border-left: 4px solid !important;
    border-top: none !important;
}

.blog-card-1 {
    border-left-color: #1A56DB !important;
}

.blog-card-2 {
    border-left-color: #059669 !important;
}

.blog-card-3 {
    border-left-color: #D97706 !important;
}


/* ══ NAVBAR fully right-aligned ══ */
.navbar {
    padding: 0 !important;
    overflow: visible !important;
}






@media(min-width:1025px) {
}

@media(max-width:1024px) {
}

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

section, footer, .hero, .navbar, .fc-footer {
    box-sizing: border-box !important;
    max-width: 100vw !important;
}



/* ══════ GOVERNING BODIES TABLE GRID ══════ */
.gc-table {
    width: 100%;
    border-collapse: collapse;
    padding: 0 16px 14px;
}

.gc-table-hdr {
    display: grid;
    grid-template-columns: 140px 1fr 180px;
    padding: 8px 16px 6px;
    background: #f8f9fa;
    border-bottom: 2px solid #e5e7eb;
}

.gc-th {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #9ca3af;
}

.gc-row {
    display: grid;
    grid-template-columns: 140px 1fr 180px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #f3f4f6;
    transition: background .12s;
}

    .gc-row:last-child {
        border-bottom: none;
    }

    .gc-row:hover {
        background: #f9fafb;
    }

.gc-code {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    font-family: 'DM Sans',sans-serif;
}

.gc-desc {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.5;
    padding-right: 12px;
}

.gc-country-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: #6b7280;
}

.gc-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 20px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

/* Card header — no background */
.gc-top {
    background: transparent !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 14px 16px !important;
}

.gc-card {
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    border-left: 4px solid var(--gc-accent,#185FA5) !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
    margin-bottom: 12px;
}

    .gc-card:last-child {
        margin-bottom: 0;
    }

.gc-grid {
    grid-template-columns: 1fr !important;
}

.body-prof-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

.body-prof-sub {
    font-size: 11px !important;
    color: #9ca3af !important;
}


/* ══════ EC-CARD COUNTRY FLAG BOX ══════ */
.ec-flag-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 20px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    margin-right: 5px;
}

.ec-country {
    display: flex !important;
    align-items: center !important;
    font-size: 11.5px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
}


/* ══════ BLOG CARD NEW LAYOUT ══════ */
.blog-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 11px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}

.blog-hdr-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.blog-cat {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-style: normal !important;
    white-space: nowrap;
}

    .blog-cat em {
        font-style: normal;
    }

.blog-cat-blue {
    background: #fff !important;
    color: #1A56DB !important;
    border: 1.5px solid #1A56DB !important;
}

.blog-cat-green {
    background: #fff !important;
    color: #059669 !important;
    border: 1.5px solid #059669 !important;
}

.blog-cat-amber {
    background: #fff !important;
    color: #D97706 !important;
    border: 1.5px solid #D97706 !important;
}

.blog-date-line {
    font-size: 11px;
    color: #9ca3af;
    margin: 4px 0 8px !important;
}

.blog-body {
    padding: 14px 16px 16px !important;
}

.blog-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

.blog-excerpt {
    font-size: 12px !important;
    color: #6b7280 !important;
    line-height: 1.6 !important;
    margin-top: 8px !important;
}

/* Remove old thumb */
.blog-thumb-wrap, .blog-thumb-plain {
    display: none !important;
}

.blog-card {
    border-radius: 14px !important;
    border: 1px solid #e5e7eb !important;
    border-left: 4px solid #1A56DB !important;
    border-top: none !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
    background: #fff !important;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all .2s !important;
}

    .blog-card:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
        transform: translateY(-3px);
    }

.blog-card-1 {
    border-left-color: #1A56DB !important;
}

.blog-card-2 {
    border-left-color: #059669 !important;
}

.blog-card-3 {
    border-left-color: #D97706 !important;
}


/* ══════ HEADINGS — Fraunces, grey, no color spans ══════ */
.section-title {
    font-family: 'Fraunces',Georgia,serif !important;
    color: #111827 !important;
}

.fe-title .fe-t1 {
    color: #1A56DB;
    font-style: normal;
}

.fe-title .fe-t2 {
    color: #7C3AED;
}


/* ══════ RESPONSIVE TABLE ══════ */
@media(max-width:700px) {
    .gc-table-hdr {
        grid-template-columns: 90px 1fr;
    }

    .gc-row {
        grid-template-columns: 90px 1fr;
    }

    .gc-country-pill {
        display: none;
    }

    .gc-row::after {
        content: attr(data-country);
        font-size: 10px;
        color: #9ca3af;
        grid-column: 2;
        margin-top: 2px;
    }
}

@media(max-width:480px) {
    .gc-table-hdr, .gc-row {
        grid-template-columns: 80px 1fr;
    }
}



/* DM Sans everywhere, Fraunces for headings */
body, body * {
    font-family: 'DM Sans', sans-serif;
}

/* Ensure hero specific */
.hero h1 {
    font-size: 44px !important;
    font-weight: 500 !important;
}

.hero-badge, .hero-sub, .chip, .srch input, .srch button,
.hstat-l, .nav-link, .btn-ghost, .btn-primary,
.section-label, .section-sub, .ec-full, .ec-pill,
.ec-country, .ec-enroll, .tab-btn, .gc-code, .gc-desc,
.gc-th, .gc-country-pill, .blog-cat, .blog-date-line,
.blog-excerpt, .blog-read-more, .testi-quote,
.testi-role, .testi-badge, .footer-links a,
.footer-col-title, .footer-brand-desc, .footer-copy,
.cat-count, .cat-items, .usp-desc {
    font-family: 'DM Sans', sans-serif !important;
}

/* Flag image box */
.ec-flag-box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 22px !important;
    border-radius: 4px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    flex-shrink: 0 !important;
    margin-right: 6px !important;
}

    .ec-flag-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

.ec-country {
    display: flex !important;
    align-items: center !important;
    font-size: 12px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
}

.gc-flag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 20px !important;
    border-radius: 3px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    flex-shrink: 0 !important;
}

    .gc-flag img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }



/* ══ UNIFIED HEADING SYSTEM — same pattern across all sections ══ */

/* Label (small uppercase pill above heading) */
.section-label.fe-label,
.section-label {
    display: inline-block !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    color: #1A56DB !important;
    background: #EEF4FF !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 999px !important;
    padding: 4px 14px !important;
    margin-bottom: 14px !important;
}


/* Main heading — same size everywhere */
.section-title.fe-title,
.section-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 34px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    color: #111827 !important;
    margin-bottom: 12px !important;
}


/* Dual colour spans — consistent across all headings */
.fe-t1 {
    color: #1A56DB !important;
    font-style: normal !important;
}

.fe-t2 {
    color: #7C3AED !important;
    font-style: normal !important;
}


/* Sub-description — same style everywhere */
.section-sub.fe-sub,
.section-sub {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    color: #6b7280 !important;
    line-height: 1.7 !important;
    margin-bottom: 28px !important;
    max-width: 680px !important;
}


/* Coloured keyword spans in descriptions */
.fe-s1 {
    color: #1A56DB !important;
    font-weight: 600 !important;
}

.fe-s2 {
    color: #7C3AED !important;
    font-weight: 600 !important;
}

.fe-s3 {
    color: #0D9488 !important;
    font-weight: 600 !important;
}


/* Responsive heading sizes */
@media(max-width:768px) {
    .section-title, .section-title.fe-title {
        font-size: 26px !important;
    }

    .section-sub, .section-sub.fe-sub {
        font-size: 14px !important;
    }
}

@media(max-width:480px) {
    .section-title, .section-title.fe-title {
        font-size: 22px !important;
    }

    .section-label, .section-label.fe-label {
        font-size: 10px !important;
    }
}



/* ══ EC-CARD: grey theme, compact, black exam name ══ */
.ec-card {
    --ec-col: #6b7280;
    border-left: 4px solid #d1d5db !important;
    border-top: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    overflow: hidden !important;
    transition: all .2s !important;
}

    .ec-card:hover {
        border-left-color: #9ca3af !important;
        box-shadow: 0 6px 18px rgba(0,0,0,.1) !important;
        transform: translateY(-2px);
    }


/* Header row: grey background instead of blue */
.ec-head-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 14px 9px !important;
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin: 0 !important;
}


/* Exam name: black, Fraunces */
.ec-exam-name {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.2 !important;
}


/* Pill: grey outline */
.ec-pill {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    color: #6b7280 !important;
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    white-space: nowrap;
    align-self: flex-start;
    flex-shrink: 0;
}


/* Body: compact padding */
.ec-body {
    padding: 10px 14px 12px !important;
}


/* Description: 2 full lines minimum, grey */
.ec-full {
    font-size: 12px !important;
    color: #4b5563 !important;
    line-height: 1.65 !important;
    margin: 0 0 10px !important;
    min-height: 2.6em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}


/* Footer row */
.ec-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 8px !important;
    border-top: 1px solid #f3f4f6 !important;
    margin-top: auto !important;
}


.ec-country {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    font-size: 11.5px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
}


/* Flag box: small compact */
.ec-flag-box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 16px !important;
    border-radius: 3px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    flex-shrink: 0 !important;
    margin-right: 5px !important;
}

    .ec-flag-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }


/* Enroll button: grey outline, black on hover */
.ec-enroll {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 5px 13px !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #6b7280 !important;
    border: 1.5px solid #d1d5db !important;
    text-decoration: none;
    white-space: nowrap;
    transition: all .18s;
    cursor: pointer;
}

    .ec-enroll:hover {
        background: #111827 !important;
        color: #fff !important;
        border-color: #111827 !important;
    }


/* ══ TAB BUTTONS: grey outline, black on hover ══ */
.tab-btn,
.tab-btn[onclick*="doctor"],
.tab-btn[onclick*="medstudent"],
.tab-btn[onclick*="pharmacist"],
.tab-btn[onclick*="pharmstudent"],
.tab-btn[onclick*="nurse"],
.tab-btn[onclick*="dentist"],
.tab-btn[onclick*="ipc"] {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    padding: 7px 16px !important;
    border-radius: 999px !important;
    border: 1.5px solid #d1d5db !important;
    background: #fff !important;
    color: #6b7280 !important;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s;
}

    .tab-btn:hover,
    .tab-btn[onclick*="doctor"]:hover,
    .tab-btn[onclick*="medstudent"]:hover,
    .tab-btn[onclick*="pharmacist"]:hover,
    .tab-btn[onclick*="pharmstudent"]:hover,
    .tab-btn[onclick*="nurse"]:hover,
    .tab-btn[onclick*="dentist"]:hover,
    .tab-btn[onclick*="ipc"]:hover {
        border-color: #111827 !important;
        color: #111827 !important;
        background: #f9fafb !important;
    }

    .tab-btn.active,
    .tab-btn[onclick*="doctor"].active,
    .tab-btn[onclick*="medstudent"].active,
    .tab-btn[onclick*="pharmacist"].active,
    .tab-btn[onclick*="pharmstudent"].active,
    .tab-btn[onclick*="nurse"].active,
    .tab-btn[onclick*="dentist"].active,
    .tab-btn[onclick*="ipc"].active {
        background: #111827 !important;
        border-color: #111827 !important;
        color: #fff !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
    }



    /* ══ 1. TAB BUTTONS — active = light grey, not black ══ */
    .tab-btn.active,
    .tab-btn[onclick*="doctor"].active,
    .tab-btn[onclick*="medstudent"].active,
    .tab-btn[onclick*="pharmacist"].active,
    .tab-btn[onclick*="pharmstudent"].active,
    .tab-btn[onclick*="nurse"].active,
    .tab-btn[onclick*="dentist"].active,
    .tab-btn[onclick*="ipc"].active {
        background: #f3f4f6 !important;
        border-color: #6b7280 !important;
        color: #111827 !important;
        font-weight: 600 !important;
        box-shadow: 0 1px 4px rgba(0,0,0,.1) !important;
    }


/* ══ 2. PHARMACIST section — force same grey as all others ══ */
/* Override any green --ec-col variables for pharmacist cards */
#tab-pharmacist .ec-card {
    --ec-col: #6b7280 !important;
    --ec-light: #f9fafb !important;
    border-left-color: #d1d5db !important;
}

#tab-pharmacist .ec-head-row {
    background: #f9fafb !important;
    border-bottom-color: #e5e7eb !important;
}

#tab-pharmacist .ec-pill {
    color: #6b7280 !important;
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
}

#tab-pharmacist .ec-enroll {
    color: #6b7280 !important;
    border-color: #d1d5db !important;
    background: transparent !important;
}


/* ══ 3. ENROLL NOW — hover: black outline only, no fill ══ */
.ec-enroll:hover {
    background: transparent !important;
    color: #111827 !important;
    border-color: #111827 !important;
    box-shadow: none !important;
}


/* ══ 4. Browse all / Visit blog — same as Ask AI button (#185FA5 blue) ══ */
.browse-all-btn,
.blog-browse-btn,
a.browse-all-btn,
a.blog-browse-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    border-radius: 999px !important;
    background: #185FA5 !important;
    color: #fff !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .18s !important;
    box-shadow: 0 2px 8px rgba(24,95,165,.25) !important;
}

    .browse-all-btn:hover,
    .blog-browse-btn:hover,
    a.browse-all-btn:hover,
    a.blog-browse-btn:hover {
        background: #0C447C !important;
        color: #fff !important;
    }



/* ══════════════════════════════════════════════════════
           DEFINITIVE TAB BUTTON OVERRIDE — kills ALL old rules
           Uses :is() for max specificity without !important hell
        ══════════════════════════════════════════════════════ */

/* Reset every possible variant to grey */
button.tab-btn,
button.tab-btn[onclick],
button.tab-btn[onclick*="doctor"],
button.tab-btn[onclick*="medstudent"],
button.tab-btn[onclick*="pharmacist"]:not([onclick*="pharmstudent"]),
button.tab-btn[onclick*="pharmstudent"],
button.tab-btn[onclick*="nurse"],
button.tab-btn[onclick*="dentist"],
button.tab-btn[onclick*="ipc"] {
    background: #fff !important;
    border: 1.5px solid #d1d5db !important;
    color: #6b7280 !important;
    box-shadow: none !important;
}


    /* Hover: black outline, dark text, no fill */
    button.tab-btn:hover,
    button.tab-btn[onclick*="doctor"]:hover,
    button.tab-btn[onclick*="medstudent"]:hover,
    button.tab-btn[onclick*="pharmacist"]:not([onclick*="pharmstudent"]):hover,
    button.tab-btn[onclick*="pharmstudent"]:hover,
    button.tab-btn[onclick*="nurse"]:hover,
    button.tab-btn[onclick*="dentist"]:hover,
    button.tab-btn[onclick*="ipc"]:hover {
        background: #f9fafb !important;
        border-color: #374151 !important;
        color: #111827 !important;
        box-shadow: none !important;
    }


    /* Active (selected): light grey fill, grey border, dark text */
    button.tab-btn.active,
    button.tab-btn[onclick*="doctor"].active,
    button.tab-btn[onclick*="medstudent"].active,
    button.tab-btn[onclick*="pharmacist"]:not([onclick*="pharmstudent"]).active,
    button.tab-btn[onclick*="pharmstudent"].active,
    button.tab-btn[onclick*="nurse"].active,
    button.tab-btn[onclick*="dentist"].active,
    button.tab-btn[onclick*="ipc"].active {
        background: #f3f4f6 !important;
        border-color: #6b7280 !important;
        color: #111827 !important;
        font-weight: 600 !important;
        box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
    }


/* ══ EC-CARD — full grey, no green anywhere ══ */
.ec-card,
#tab-pharmacist .ec-card,
#tab-pharmstudent .ec-card,
#tab-doctor .ec-card,
#tab-medstudent .ec-card,
#tab-nurse .ec-card,
#tab-dentist .ec-card,
#tab-ipc .ec-card {
    border-left: 4px solid #d1d5db !important;
    border-top: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #fff !important;
}


.ec-head-row,
#tab-pharmacist .ec-head-row {
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
}


.ec-pill,
#tab-pharmacist .ec-pill {
    color: #6b7280 !important;
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
}


.ec-exam-name {
    color: #111827 !important;
}


/* ══ EC-FULL: force min 2 full lines ══ */
.ec-full {
    font-size: 12px !important;
    color: #4b5563 !important;
    line-height: 1.65 !important;
    min-height: 3.5em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
}


/* ══ ENROLL NOW: grey outline, hover = black outline no fill ══ */
.ec-enroll,
#tab-pharmacist .ec-enroll {
    background: transparent !important;
    color: #6b7280 !important;
    border: 1.5px solid #d1d5db !important;
}

    .ec-enroll:hover,
    #tab-pharmacist .ec-enroll:hover {
        background: transparent !important;
        color: #111827 !important;
        border-color: #111827 !important;
    }


/* ══ SPECIALITY ICON BOX ══ */
.ec-spec-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    border-radius: 5px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    margin-right: 6px;
}

.ec-country {
    display: flex !important;
    align-items: center !important;
    font-size: 12px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
}



/* ══ EC-CARD: clean redesign ══ */
.ec-card {
    border-left: 4px solid #d1d5db !important;
    border-top: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    overflow: hidden !important;
    transition: all .2s !important;
    display: flex;
    flex-direction: column;
}

    .ec-card:hover {
        border-left-color: #9ca3af !important;
        box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
        transform: translateY(-2px);
    }


/* Header: exam name + pill */
.ec-head-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 14px 8px !important;
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin: 0 !important;
}

.ec-exam-name {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    background: #f3f4f6 !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 3px 10px !important;
}

.ec-pill {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    color: #6b7280 !important;
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    white-space: nowrap;
    align-self: flex-start;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .05em;
}


/* Body: rich 3-line description */
.ec-body {
    padding: 8px 14px 12px !important;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ec-full {
    font-size: 12px !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
    flex: 1 !important;
    margin-bottom: 10px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: auto !important;
}


/* Footer */
.ec-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 8px !important;
    border-top: 1px solid #f3f4f6 !important;
    margin-top: auto !important;
}


/* Country pill — rounded box with light bg like ec-pill */
.ec-country-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important;
    padding: 3px 10px 3px 4px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
}


/* Speciality icon inside country pill — bigger */
.ec-spec-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    background: #fff !important;
    border-radius: 50% !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}


/* Enroll button */
.ec-enroll {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    background: #1A56DB !important;
    color: #fff !important;
    border: 1.5px solid #1A56DB !important;
    text-decoration: none;
    white-space: nowrap;
    transition: all .18s;
}

    .ec-enroll:hover {
        background: #0C447C !important;
        color: #fff !important;
        border-color: #0C447C !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(26,86,219,.25);
    }


/* ══ TAB BUTTONS — definitive ══ */
button.tab-btn,
button.tab-btn[onclick],
button.tab-btn[onclick*="doctor"],
button.tab-btn[onclick*="medstudent"],
button.tab-btn[onclick*="pharmacist"]:not([onclick*="pharmstudent"]),
button.tab-btn[onclick*="pharmstudent"],
button.tab-btn[onclick*="nurse"],
button.tab-btn[onclick*="dentist"],
button.tab-btn[onclick*="ipc"] {
    background: #fff !important;
    border: 1.5px solid #d1d5db !important;
    color: #6b7280 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 18px !important;
    border-radius: 999px !important;
}

    button.tab-btn:hover,
    button.tab-btn[onclick*="doctor"]:hover,
    button.tab-btn[onclick*="medstudent"]:hover,
    button.tab-btn[onclick*="pharmacist"]:not([onclick*="pharmstudent"]):hover,
    button.tab-btn[onclick*="pharmstudent"]:hover,
    button.tab-btn[onclick*="nurse"]:hover,
    button.tab-btn[onclick*="dentist"]:hover,
    button.tab-btn[onclick*="ipc"]:hover {
        background: #f9fafb !important;
        border-color: #374151 !important;
        color: #111827 !important;
        box-shadow: none !important;
    }

    button.tab-btn.active,
    button.tab-btn[onclick*="doctor"].active,
    button.tab-btn[onclick*="medstudent"].active,
    button.tab-btn[onclick*="pharmacist"]:not([onclick*="pharmstudent"]).active,
    button.tab-btn[onclick*="pharmstudent"].active,
    button.tab-btn[onclick*="nurse"].active,
    button.tab-btn[onclick*="dentist"].active,
    button.tab-btn[onclick*="ipc"].active {
        background: #f3f4f6 !important;
        border-color: #6b7280 !important;
        color: #111827 !important;
        font-weight: 600 !important;
        box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
    }


/* Tab emoji size */
.tabs-row .tab-btn {
    font-size: 13px !important;
}



/* ══ HEADING SYSTEM: Black + Blue only, NO violet/teal/green ══ */

/* Label pill */
.section-label, .section-label.fe-label {
    display: inline-block !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    color: #185FA5 !important;
    background: #EEF4FF !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 999px !important;
    padding: 4px 14px !important;
    margin-bottom: 14px !important;
}


/* Main h2: Fraunces, same size everywhere */
.section-title, .section-title.fe-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 34px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    color: #111827 !important;
    margin-bottom: 12px !important;
}


/* fe-t1: Blue — only colour in headings */
.fe-t1 {
    color: #185FA5 !important;
    font-style: normal !important;
}


/* fe-t2: Dark navy/charcoal — second "colour" (near black) */
.fe-t2 {
    color: #374151 !important;
    font-style: normal !important;
}


/* Sub description keywords: fe-s1 blue, fe-s2 and fe-s3 also blue */
.fe-s1 {
    color: #185FA5 !important;
    font-weight: 600 !important;
}

.fe-s2 {
    color: #185FA5 !important;
    font-weight: 600 !important;
}

.fe-s3 {
    color: #374151 !important;
    font-weight: 600 !important;
}


/* Sub description */
.section-sub, .section-sub.fe-sub {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    color: #6b7280 !important;
    line-height: 1.7 !important;
    margin-bottom: 28px !important;
    max-width: 680px !important;
}


/* Responsive */
@media(max-width:768px) {
    .section-title, .section-title.fe-title {
        font-size: 26px !important;
    }

    .section-sub, .section-sub.fe-sub {
        font-size: 14px !important;
    }
}

@media(max-width:480px) {
    .section-title, .section-title.fe-title {
        font-size: 22px !important;
    }

    .section-label, .section-label.fe-label {
        font-size: 10px !important;
    }
}


/* ══ GC COUNTRY PILL — emoji icon + country name ══ */
.gc-country-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
}

.gc-cicon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 20px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}


/* ══ GC TABLE ══ */
.gc-table-hdr {
    display: grid !important;
    grid-template-columns: 140px 1fr 180px !important;
    padding: 8px 16px 6px !important;
    background: #f8f9fa !important;
    border-bottom: 2px solid #e5e7eb !important;
}

.gc-row {
    display: grid !important;
    grid-template-columns: 140px 1fr 180px !important;
    align-items: center !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    transition: background .12s !important;
}

    .gc-row:last-child {
        border-bottom: none !important;
    }

    .gc-row:hover {
        background: #f9fafb !important;
    }

.gc-th {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: #9ca3af !important;
}

.gc-code {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #374151 !important;
}

.gc-desc {
    font-size: 12.5px !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
    padding-right: 12px !important;
}

.gc-grid {
    grid-template-columns: 1fr !important;
}

.gc-top {
    background: transparent !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 14px 16px !important;
}

.gc-card {
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    border-left: 4px solid var(--gc-accent,#185FA5) !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
    margin-bottom: 12px;
    transition: all .2s !important;
}

    .gc-card:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
        transform: translateY(-2px);
    }

    .gc-card:last-child {
        margin-bottom: 0;
    }

.body-prof-title {
    font-family: 'Fraunces', serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 !important;
}

.body-prof-sub {
    font-size: 11px !important;
    color: #9ca3af !important;
    margin: 0 !important;
}


@media(max-width:700px) {
    .gc-table-hdr, .gc-row {
        grid-template-columns: 90px 1fr !important;
    }

    .gc-country-pill {
        display: none !important;
    }
}



/* ================================================================
           NAVBAR — DEFINITIVE FINAL RULES
           Logo left · Nav links fill centre · Actions + Ham right
           100% width, fixed 64px height, never stretches
        ================================================================ */

/* Outer nav: full width, no stretch */
.navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid #e5e5e5 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow: visible !important; /* allow dropdowns to show */
    padding: 0 !important;
    isolation: isolate;
}


/* ── RESPONSIVE ──────────────────────────────────────────── */

/* ≥ 1025px — full desktop nav, no hamburger */
@media (min-width: 1025px) {
}


/* ≤ 1024px — hide nav links & buttons, show hamburger */
@media (max-width: 1024px) {
}


/* ≤ 480px — tighten padding on small phones */
@media (max-width: 480px) {
}


/* ── PREVENT ALL PAGE HORIZONTAL STRETCH ── */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}



/* ── NAVBAR RIGHT-ALIGN FIX ── */

/* Logo stays left — remove margin-right so it doesn't push */

/* Nav + actions grouped on the right */





/* ── NAVBAR: Logo LEFT · Nav links · Login · Register — all RIGHT ── */


/* Nav links: push to right with margin-left auto */

/* Actions: immediately after nav links, no auto margin */

/* Ham: right of actions on mobile */

@media(max-width:1024px) {
}


/* Desktop ≥1025px: show all, hide ham */
@media (min-width: 1025px) {
}

/* Mobile ≤1024px: hide links + buttons, show ham */
@media (max-width: 1024px) {
}



/* ════════════════════════════════════════
           NAVBAR — SINGLE CLEAN DEFINITION
           Logo: far left
           Nav links + Login + Register + Ham: far right
        ════════════════════════════════════════ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #e5e5e5;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    padding: 0;
    isolation: isolate;
}


@media (min-width: 1025px) {
    .navbar-nav {
        display: flex;
    }

    .navbar-actions {
        display: flex;
    }

    .hm-ham {
        display: none;
    }
}

@media (max-width: 1024px) {
    .navbar-nav {
        display: none;
    }

    .navbar-actions {
        display: none;
    }

    .hm-ham {
        display: flex;
        margin-left: auto;
    }

    .navbar-inner {
        padding: 0 16px;
    }
}

@media (max-width: 480px) {
    .navbar-inner {
        padding: 0 12px;
    }

    .navbar-logo {
        font-size: 18px;
    }
}



/* ════════ NAVBAR CLEAN ════════ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #e5e5e5;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    padding: 0;
    isolation: isolate;
}

.navbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    width: 100%;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.navbar-logo {
    font-family: 'Fraunces',Georgia,serif;
    font-size: 22px;
    font-weight: 700;
    color: #185FA5;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.navbar-nav {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    overflow: visible;
}

.navbar-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
    flex-shrink: 0;
}

.hm-ham {
    display: none;
    width: 38px;
    height: 38px;
    border: 1.5px solid #d0d0d0;
    border-radius: 8px;
    background: none;
    font-size: 18px;
    color: #555;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 12px;
    align-items: center;
    justify-content: center;
}

    .hm-ham:hover {
        border-color: #185FA5;
        color: #185FA5;
        background: #E6F1FB;
    }

@media(min-width:1025px) {
    .navbar-nav {
        display: flex;
    }

    .navbar-actions {
        display: flex;
    }

    .hm-ham {
        display: none;
    }
}

@media(max-width:1024px) {
    .navbar-nav {
        display: none;
    }

    .navbar-actions {
        display: none;
    }

    .hm-ham {
        display: flex;
        margin-left: auto;
    }

    .navbar-inner {
        padding: 0 16px;
    }
}

@media(max-width:480px) {
    .navbar-inner {
        padding: 0 12px;
    }

    .navbar-logo {
        font-size: 18px;
    }
}


/* NAVBAR FINAL OVERRIDE — !important kills all previous conflicts */
.navbar-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 16px !important;
    flex-shrink: 0 !important;
}

.navbar-nav {
    margin-left: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

.hm-ham {
    display: none !important;
}

@media(min-width:1025px) {
    .navbar-nav {
        display: flex !important;
    }

    .navbar-actions {
        display: flex !important;
    }

    .hm-ham {
        display: none !important;
    }
}

@media(max-width:1024px) {
    .navbar-nav {
        display: none !important;
    }

    .navbar-actions {
        display: none !important;
    }

    .hm-ham {
        display: flex !important;
        margin-left: auto !important;
        width: 38px !important;
        height: 38px !important;
        border: 1.5px solid #d0d0d0 !important;
        border-radius: 8px !important;
        background: none !important;
        font-size: 18px !important;
        color: #555 !important;
        cursor: pointer !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .navbar-inner {
        padding: 0 16px !important;
    }
}


/* ══ ENROLL NOW — blue filled like Ask AI ══ */
.ec-enroll.ec-enroll-blue {
    background: #185FA5 !important;
    color: #fff !important;
    border: none !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s;
}

    .ec-enroll.ec-enroll-blue:hover {
        background: #0C447C !important;
        color: #fff !important;
        border: none !important;
    }

/* ══ EC-PILL — filled color outline style ══ */
.ec-pill {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    background: #185FA5 !important;
    color: #fff !important;
    border: 1px solid #185FA5 !important;
    white-space: nowrap;
    align-self: flex-start;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ══ GC-GRID — 2 columns ══ */
.gc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}

@media(max-width: 768px) {
    .gc-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ══ HOSPITAL PILLS — grey outline only ══ */
.hospital-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    border: 1.5px solid #d1d5db !important;
    background: #f9fafb !important;
    color: #6b7280 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    transition: all .15s !important;
}

    .hospital-pill:hover {
        border-color: #185FA5 !important;
        color: #185FA5 !important;
        background: #EEF4FF !important;
    }

/* ══ TESTIMONIAL PLAY BUTTON ══ */
.testi-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #EEF4FF;
    border: 1.5px solid #BFDBFE;
    color: #185FA5;
    font-size: 12px;
    cursor: pointer;
    transition: all .18s;
    flex-shrink: 0;
    margin-left: auto;
}

    .testi-play-btn:hover {
        background: #185FA5;
        color: #fff;
        border-color: #185FA5;
        transform: scale(1.1);
    }

.testi-footer {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* ══ VIDEO MODAL ══ */
.video-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

    .video-modal-overlay.open {
        display: flex;
    }

.video-modal-box {
    background: #111827;
    border-radius: 16px;
    width: 90%;
    max-width: 720px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
}

.video-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,.15);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .video-modal-close:hover {
        background: rgba(255,255,255,.3);
    }

.video-modal-screen {
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0B1A3B, #185FA5);
}

.video-modal-placeholder {
    text-align: center;
    color: #fff;
    padding: 24px;
}

.video-modal-play-big {
    display: block;
    font-size: 56px;
    opacity: .6;
    margin-bottom: 16px;
}

.video-modal-placeholder p {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 6px;
}

.video-modal-sub {
    font-size: 13px !important;
    opacity: .7;
    font-family: 'DM Sans', sans-serif !important;
}


/* ══ EC-PILL — back to grey outline (Medical Exam, Pharmacist Exam etc.) ══ */
.ec-pill {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
    white-space: nowrap !important;
    align-self: flex-start !important;
    flex-shrink: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
}

/* ══ EC-EXAM-NAME — grey outline box like ec-pill ══ */
.ec-exam-name {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    background: #f3f4f6 !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
}


/* GC table — narrow country column now just code */
.gc-table-hdr {
    grid-template-columns: 130px 1fr 70px !important;
}

.gc-row {
    grid-template-columns: 130px 1fr 70px !important;
}

.gc-country-pill {
    font-size: 11px !important;
    font-weight: 600 !important;
    gap: 4px !important;
}

@media(max-width:700px) {
    .gc-table-hdr, .gc-row {
        grid-template-columns: 90px 1fr !important;
    }
}


/* ══ GC TABLE — proper column widths with spacing ══ */
.gc-table-hdr {
    grid-template-columns: 120px 1fr 110px !important;
    gap: 0 16px !important;
    padding: 8px 16px 6px !important;
}

.gc-row {
    grid-template-columns: 120px 1fr 110px !important;
    gap: 0 16px !important;
    padding: 10px 16px !important;
}
/* Country name — small grey font, no icon box */
.gc-country-pill {
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

.gc-cicon {
    width: 20px !important;
    height: 16px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}
/* Desc column gets padding-right for breathing room */
.gc-desc {
    font-size: 12px !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
    padding-right: 8px !important;
}

@media(max-width:700px) {
    .gc-table-hdr, .gc-row {
        grid-template-columns: 80px 1fr !important;
        gap: 0 12px !important;
    }

    .gc-country-pill {
        display: none !important;
    }
}


/* ══ GC TABLE — tight columns, no wasted space ══ */
.gc-table-hdr,
.gc-row {
    display: grid !important;
    grid-template-columns: 110px 1fr 100px !important;
    gap: 0 12px !important;
    align-items: center !important;
}

.gc-table-hdr {
    padding: 7px 14px 5px !important;
}

.gc-row {
    padding: 9px 14px !important;
}

.gc-code {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #374151 !important;
}

.gc-desc {
    font-size: 12px !important;
    color: #6b7280 !important;
    line-height: 1.45 !important;
}

.gc-country-pill {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media(max-width:700px) {
    .gc-table-hdr, .gc-row {
        grid-template-columns: 80px 1fr !important;
    }

    .gc-country-pill {
        display: none !important;
    }
}


/* ══ View all links — blue not purple ══ */
.view-all {
    color: #185FA5 !important;
}

    .view-all:hover {
        color: #0C447C !important;
    }

/* ══ GC TABLE — fixed 3-col layout, country never wraps ══ */
.gc-table {
    width: 100%;
}

.gc-table-hdr,
.gc-row {
    display: grid !important;
    grid-template-columns: 120px 1fr 130px !important;
    gap: 0 14px !important;
    align-items: start !important;
    padding: 9px 16px !important;
}

.gc-table-hdr {
    align-items: center !important;
    background: #f8f9fa !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding: 7px 16px 6px !important;
}

.gc-code {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    word-break: break-word;
}

.gc-desc {
    font-size: 12px !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
}

.gc-country-pill {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.4 !important;
    display: block !important;
}

@media(max-width:760px) {
    .gc-table-hdr, .gc-row {
        grid-template-columns: 85px 1fr 80px !important;
        gap: 0 8px !important;
    }
}

@media(max-width:500px) {
    .gc-table-hdr, .gc-row {
        grid-template-columns: 75px 1fr !important;
    }

    .gc-country-pill {
        display: none !important;
    }
}


/* ══════════════════════════════════════════════
           GC TABLE — definitive clean 3-column layout
           All cells left-aligned, top-aligned, no zigzag
        ══════════════════════════════════════════════ */

/* Outer table wrapper */
.gc-table {
    width: 100% !important;
    border-collapse: collapse !important;
    overflow: hidden !important;
}

/* Both header and data rows: same 3-column grid */
.gc-table-hdr,
.gc-row {
    display: grid !important;
    grid-template-columns: 130px 1fr 120px !important;
    grid-template-rows: auto !important;
    align-items: start !important;
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Header row */
.gc-table-hdr {
    background: #f8f9fa !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding: 0 !important;
}

.gc-th {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: #9ca3af !important;
    padding: 8px 10px 7px !important;
    display: block !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* Data rows */
.gc-row {
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 0 !important;
    transition: background .12s !important;
}

    .gc-row:last-child {
        border-bottom: none !important;
    }

    .gc-row:hover {
        background: #f9fafb !important;
    }

/* Each cell: block, padded, left-aligned, top-aligned */
.gc-code,
.gc-desc,
.gc-country-pill {
    display: block !important;
    padding: 9px 10px !important;
    text-align: left !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
    min-height: 36px !important;
    border-right: 1px solid #f3f4f6 !important;
}

.gc-country-pill {
    border-right: none !important;
}

/* Cell content styles */
.gc-code {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    word-break: break-word !important;
    white-space: normal !important;
}

.gc-desc {
    font-size: 12px !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
    white-space: normal !important;
}

.gc-country-pill {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    white-space: normal !important;
    background: none !important;
    border: none !important;
    border-right: none !important;
    line-height: 1.5 !important;
}

/* Responsive */
@media(max-width: 640px) {
    .gc-table-hdr,
    .gc-row {
        grid-template-columns: 80px 1fr !important;
    }

    .gc-th:last-child,
    .gc-country-pill {
        display: none !important;
    }
}


/* ══ GC TABLE — FINAL ALIGNMENT FIX ══
           Country column ALWAYS top-aligned with its row's first line
           Organisation gets more space so it wraps less
        ══════════════════════════════════════ */
.gc-table-hdr,
.gc-row {
    display: grid !important;
    grid-template-columns: 110px 1fr 100px !important;
    align-items: start !important; /* ALL cells top-aligned */
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Every cell: padding inside, top-left aligned */
.gc-code,
.gc-desc,
.gc-country-pill,
.gc-th {
    display: block !important;
    padding: 9px 8px !important;
    text-align: left !important;
    align-self: start !important; /* force top alignment per cell */
    box-sizing: border-box !important;
}

.gc-code {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    word-break: break-word !important;
    white-space: normal !important;
    padding-top: 9px !important;
}

.gc-desc {
    font-size: 11.5px !important;
    color: #6b7280 !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    border-left: 1px solid #f0f0f0 !important;
    border-right: 1px solid #f0f0f0 !important;
}

.gc-country-pill {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    white-space: nowrap !important; /* never wrap — stays on one line */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: none !important;
    border: none !important;
    padding-top: 9px !important; /* match gc-code top padding */
    display: block !important;
    align-self: start !important;
}

.gc-th {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: #9ca3af !important;
    white-space: nowrap !important;
    padding: 7px 8px 6px !important;
}

.gc-table-hdr {
    background: #f8f9fa !important;
    border-bottom: 2px solid #e5e7eb !important;
    align-items: center !important;
}

.gc-row {
    border-bottom: 1px solid #f3f4f6 !important;
}

    .gc-row:last-child {
        border-bottom: none !important;
    }

    .gc-row:hover {
        background: #f9fafb !important;
    }

@media(max-width:640px) {
    .gc-table-hdr, .gc-row {
        grid-template-columns: 75px 1fr !important;
    }

    .gc-th:last-child, .gc-country-pill {
        display: none !important;
    }
}


/* ================================================================
   APPENDED — v3 PATCHES (homepage + blog + dropdown fix)
   ================================================================
   1. Exam card .ec-fullname heading (full course name with line)
   2. Dropdown helpers for JS-detached navbar dropdowns
   3. ASP.NET form-wrapper overflow fixes
   4. Blog article page (modern minimal redesign)
================================================================ */


/* ── 1. Exam card: full course name heading ───────────────────── */
.ec-fullname {
    font-family: 'DM Sans',sans-serif;
    /*font-family: 'Fraunces', Georgia, serif !important;*/
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0C447C !important;
    line-height: 1.35 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 0 8px 0 !important;
    border-bottom: 1px solid #d1d5db !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ── 2. Dropdown helpers (when JS clones .dropdown to <body>) ──── */
.dropdown.js-detached {
    position: fixed !important;
    z-index: 99999 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
    display: flex;
}
.dropdown.js-detached.is-open {
    opacity: 1;
    pointer-events: auto;
}
.nav-item.is-open > .nav-link {
    color: var(--blue);
    background: var(--blue-light);
}
.nav-item.is-open .nav-link svg {
    transform: rotate(180deg);
}


/* ── 3. ASP.NET wrapper overflow fixes ──────────────────────────── */
/* Prevent <form runat="server"> and content placeholders from clipping
   sticky navbar dropdowns on inside pages */
form,
#aspnetForm,
form#aspnetForm,
form#form1,
#ContentPlaceHolder1,
.main-wrap,
main,
.page-content,
.page-wrap,
.content-wrap {
    overflow: visible !important;
}


/* ── 4. Modern blog article page ─────────────────────────────── */

.blog-page-wrap { background: #fafaf8; }

/* Hero with gradient + animated illustration support */
.blog-hero {
    background: linear-gradient(135deg, #0C447C 0%, #185FA5 100%);
    color: #fff;
    padding: 36px 0 60px;
    position: relative;
    overflow: hidden;
}
.blog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.blog-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 280px;
    gap: 36px;
    position: relative;
    z-index: 1;
    align-items: center;
}
@media (max-width: 800px) {
    .blog-hero-inner { grid-template-columns: 1fr; }
    .blog-hero-illust { display: none; }
}

.blog-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,.7);
    margin-bottom: 14px;
}
.blog-breadcrumb a { color: rgba(255,255,255,.85); }
.blog-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.blog-breadcrumb .sep { opacity: .5; }

.blog-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.blog-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
}
.blog-meta-text { font-size: 11.5px; color: rgba(255,255,255,.75); }
.blog-meta-dot { font-size: 11px; color: rgba(255,255,255,.5); }

.blog-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 12px;
    letter-spacing: -.005em;
}
@media (max-width: 700px) { .blog-title { font-size: 22px; } }

.blog-deck {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255,255,255,.85);
    max-width: 620px;
}

.blog-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.15);
}
.blog-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #B5D4F4, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    color: #0C447C;
    font-size: 13px;
}
.blog-author-name { font-size: 13px; font-weight: 600; color: #fff; }
.blog-author-role { font-size: 11px; color: rgba(255,255,255,.65); }

/* Animated SVG illustration in hero */
.blog-hero-illust {
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.blog-hero-illust svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

@keyframes blog-float-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes blog-float-fast { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes blog-pulse-ring { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes blog-twinkle { 0%,49% { opacity: 1; } 50%,100% { opacity: .3; } }
.illust-clock { animation: blog-float-slow 4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.illust-doc { animation: blog-float-fast 3.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.illust-spark { animation: blog-pulse-ring 2.5s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.illust-spark-2 { animation: blog-pulse-ring 2.5s ease-out infinite .8s; transform-origin: center; transform-box: fill-box; }
.illust-spark-3 { animation: blog-pulse-ring 2.5s ease-out infinite 1.6s; transform-origin: center; transform-box: fill-box; }
.illust-pencil { animation: blog-float-slow 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.illust-bulb { animation: blog-twinkle 1.5s steps(2) infinite; transform-origin: center; transform-box: fill-box; }

/* Body — two-column with sticky sidebar */
.blog-body-wrap {
    max-width: 1100px;
    margin: -32px auto 0;
    padding: 0 28px;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0,1fr) 280px;
    gap: 32px;
}
@media (max-width: 900px) { .blog-body-wrap { grid-template-columns: 1fr; } }

.blog-feature-image {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    margin-bottom: 24px;
    border: 1px solid #ececec;
}
.blog-feature-image-inner {
    height: 240px;
    background: linear-gradient(135deg, #E6F1FB, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-article {
    background: #fff;
    border-radius: 14px;
    padding: 32px 36px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    border: 1px solid #ececec;
    color: #2c2c2a;
}
@media (max-width: 700px) { .blog-article { padding: 22px 20px; } }

.blog-article p { font-size: 15px; line-height: 1.75; color: #2c2c2a; margin-bottom: 16px; }
.blog-article h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: #111;
    margin: 28px 0 12px;
    line-height: 1.3;
    padding-left: 12px;
    border-left: 4px solid #185FA5;
}
.blog-article h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    font-weight: 600;
    color: #185FA5;
    margin: 20px 0 8px;
}
.blog-article ul, .blog-article ol { margin: 0 0 16px 20px; }
.blog-article li { font-size: 14px; line-height: 1.7; color: #3a3a38; margin-bottom: 5px; }
.blog-article strong { color: #111; font-weight: 600; }
.blog-article a { color: #185FA5; border-bottom: 1px solid rgba(24,95,165,.3); }
.blog-article a:hover { border-bottom-color: #185FA5; }

.blog-callout {
    background: #F0F7FF;
    border-left: 4px solid #185FA5;
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin: 20px 0;
}
.blog-callout p {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 15px;
    line-height: 1.6;
    color: #0C447C;
    margin: 0;
    font-weight: 500;
}

.blog-highlight {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    padding: 14px 18px;
    margin: 18px 0;
    display: flex;
    gap: 12px;
}
.blog-highlight-icon { font-size: 18px; flex-shrink: 0; }
.blog-highlight-text { font-size: 13.5px; line-height: 1.6; color: #78350F; margin: 0; }
.blog-highlight-text strong { color: #451A03; }

.blog-table-wrap {
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 6px;
    margin: 18px 0;
    overflow-x: auto;
}
.blog-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.blog-table thead th {
    background: #f3f4f6;
    color: #111;
    font-weight: 700;
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid #e5e7eb;
}
.blog-table td {
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
    color: #2c2c2a;
}
.blog-table tr:last-child td { border-bottom: none; }

.blog-cta {
    background: linear-gradient(135deg, #0C447C 0%, #185FA5 100%);
    color: #fff;
    border-radius: 12px;
    padding: 22px 24px;
    margin: 28px 0;
    display: flex;
    align-items: center;
    gap: 18px;
}
.blog-cta-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.blog-cta-text { flex: 1; }
.blog-cta-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; margin-bottom: 3px; color: #fff; }
.blog-cta-sub { font-size: 12px; color: rgba(255,255,255,.85); margin: 0; }
.blog-cta-btns { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 700px) {
    .blog-cta { flex-direction: column; align-items: flex-start; }
    .blog-cta-btns { width: 100%; }
}
.blog-cta-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: all .15s;
    text-decoration: none;
}
.blog-cta-btn.primary { background: #fff; color: #185FA5; border: none; }
.blog-cta-btn.primary:hover { background: #E6F1FB; }
.blog-cta-btn.ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.blog-cta-btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.blog-tags {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #ececec;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.blog-tags-label {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-right: 4px;
}
.blog-tags a {
    font-size: 11.5px;
    font-weight: 500;
    color: #185FA5;
    background: #E6F1FB;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #d4e6f7;
    transition: all .15s;
}
.blog-tags a:hover { background: #185FA5; color: #fff; border-color: #185FA5; }

/* Sidebar */
.blog-sidebar { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 901px) {
    .blog-sidebar { position: sticky; top: 84px; align-self: start; }
}
.blog-sidebar-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.03);
}
.blog-sidebar-card h4 {
    font-size: 11px;
    font-weight: 700;
    color: #185FA5;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 12px;
}
.blog-toc { display: flex; flex-direction: column; gap: 4px; }
.blog-toc a {
    font-size: 12.5px;
    color: #3a3a38;
    padding: 5px 9px;
    border-radius: 6px;
    border-left: 2px solid transparent;
    transition: all .15s;
    text-decoration: none;
}
.blog-toc a:hover { background: #f5faff; color: #185FA5; border-left-color: #185FA5; }

.blog-share { display: flex; gap: 8px; }
.blog-share a {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all .15s;
    color: #666;
    font-weight: 600;
    text-decoration: none;
}
.blog-share a:hover { background: #185FA5; color: #fff; }

/* Related articles grid */
.blog-related-wrap { max-width: 1100px; margin: 40px auto 24px; padding: 0 28px; }
.blog-related-title {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 600;
    color: #111;
    margin-bottom: 16px;
}
.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 800px) { .blog-related-grid { grid-template-columns: 1fr; } }
.blog-related-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    overflow: hidden;
    transition: all .2s;
    text-decoration: none;
    display: block;
}
.blog-related-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.blog-related-thumb {
    height: 110px;
    background: linear-gradient(135deg, #E6F1FB, #f5faff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}
.blog-related-body { padding: 14px 16px; }
.blog-related-cat {
    font-size: 10px;
    font-weight: 700;
    color: #185FA5;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 5px;
}
.blog-related-headline {
    font-family: 'Fraunces', serif;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    line-height: 1.35;
    margin-bottom: 6px;
}
.blog-related-meta { font-size: 10.5px; color: #999; }


/* ================================================================
   APPENDED — v4 PATCHES
   ----------------------------------------------------------------
   1. Exam cards (.ec-card): blue accents, blue shadow, blue heading
   2. Long course-title heading: smaller font + blue color
   3. Explore-all-content cards (.cat-card): match exam card style
================================================================ */


/* ── 1. Exam card — blue border + blue shadow ───────────────── */
.ec-card {
    border-left: 4px solid #1A56DB !important;
    border-top: 1px solid #BFDBFE !important;
    border-right: 1px solid #BFDBFE !important;
    border-bottom: 1px solid #BFDBFE !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(26,86,219,.10) !important;
    overflow: hidden !important;
    transition: all .22s !important;
    display: flex;
    flex-direction: column;
}

    .ec-card:hover {
        border-left-color: #0C447C !important;
        border-color: #93C5FD !important;
        box-shadow: 0 8px 28px rgba(26,86,219,.20) !important;
        transform: translateY(-3px);
    }


/* ── 2. Long course title (anchor heading inside ec-card) ────── */
/* Matches: <a><h3>Foreign Medical Graduate Examination (FMGE)</h3></a>
   or just an anchor with the long title text. */

    .ec-card a:first-of-type,
    .ec-card > a,
    .ec-card h2,
    .ec-card h3,
    .ec-card h4,
    .ec-card .ec-card-title,
    .ec-card-title {
        font-family: 'DM Sans',sans-serif;
        /*font-family: 'Fraunces', Georgia, serif !important;*/
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: #1A56DB !important;
        line-height: 1.35 !important;
        text-decoration: none !important;
        margin: 0 !important;
        transition: color .15s;
    }

.ec-card a:first-of-type:hover,
.ec-card > a:hover,
.ec-card h2 a:hover,
.ec-card h3 a:hover,
.ec-card h4 a:hover,
.ec-card .ec-card-title:hover,
.ec-card-title:hover {
    color: #0C447C !important;
    text-decoration: none !important;
}

/* If headings are inside the anchor, target both */
.ec-card a h2,
.ec-card a h3,
.ec-card a h4 {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #1A56DB !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

.ec-card a:hover h2,
.ec-card a:hover h3,
.ec-card a:hover h4 {
    color: #0C447C !important;
}


/* ── 3. Explore all content cards — match exam card design ────── */
.cat-card {
    background: #fff !important;
    border-left: 4px solid #1A56DB !important;
    border-top: 1px solid #BFDBFE !important;
    border-right: 1px solid #BFDBFE !important;
    border-bottom: 1px solid #BFDBFE !important;
    border-radius: 12px !important;
    padding: 18px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    box-shadow: 0 2px 8px rgba(26,86,219,.10) !important;
    transition: all .22s !important;
}

    .cat-card:hover {
        border-left-color: #0C447C !important;
        border-color: #93C5FD !important;
        box-shadow: 0 8px 28px rgba(26,86,219,.20) !important;
        transform: translateY(-3px) !important;
    }

/* Inside .cat-card — emphasize the heading in blue */
.cat-card a,
.cat-card h2,
.cat-card h3,
.cat-card h4,
.cat-card .cat-card-title {
    color: #1A56DB !important;
    text-decoration: none !important;
    transition: color .15s;
}

    .cat-card a:hover,
    .cat-card a:hover h3,
    .cat-card a:hover h4,
    .cat-card:hover h3,
    .cat-card:hover h4 {
        color: #0C447C !important;
    }


/* ================================================================
   APPENDED — v5 PATCHES (bulletproof overrides)
   ----------------------------------------------------------------
   1. Course title heading inside ec-card → BLUE (high specificity)
   2. Enroll button → solid blue with WHITE text (bulletproof)
   3. Course title heading inside cat-card → BLUE
================================================================ */


/* ── 1. COURSE TITLE → BLUE (maximum specificity) ─────────────── */
/* Targets every plausible markup variant for the long course name
   in the "Exams by profession" section. Uses html body to win on
   specificity over any earlier rule. */
html body .ec-card a,
html body .ec-card a:link,
html body .ec-card a:visited,
html body .ec-card a:active,
html body .ec-card h2,
html body .ec-card h3,
html body .ec-card h4,
html body .ec-card h2 a,
html body .ec-card h3 a,
html body .ec-card h4 a,
html body .ec-card a h2,
html body .ec-card a h3,
html body .ec-card a h4,
html body .ec-card .ec-name,
html body .ec-card .ec-card-title,
html body .ec-card .ec-title {
    color: #185FA5 !important;
    /* color: #1A56DB !important; */
    text-decoration: none !important;
}

html body .ec-card a:hover,
html body .ec-card h2:hover,
html body .ec-card h3:hover,
html body .ec-card h4:hover,
html body .ec-card a:hover h2,
html body .ec-card a:hover h3,
html body .ec-card a:hover h4,
html body .ec-card h2 a:hover,
html body .ec-card h3 a:hover,
html body .ec-card h4 a:hover {
    color: #0C447C !important;
}

/* The Enroll-button anchor is excluded — it uses .ec-enroll class */
html body .ec-card a.ec-enroll,
html body .ec-card a.ec-enroll:link,
html body .ec-card a.ec-enroll:visited,
html body .ec-card a.ec-enroll:hover {
    color: #fff !important;
}


/* ── 2. ENROLL BUTTON → solid blue + WHITE text (bulletproof) ─── */
/* High specificity to beat any earlier .ec-enroll rule. */
html body a.ec-enroll,
html body .ec-card a.ec-enroll,
html body .ec-card .ec-footer a.ec-enroll,
html body a.ec-enroll:link,
html body a.ec-enroll:visited {
    background: #185FA5 !important;
    background-color: #185FA5 !important;
    color: #fff !important;
    /*border: 1.5px solid #1A56DB !important;*/
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all .18s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

html body a.ec-enroll:hover,
html body .ec-card a.ec-enroll:hover {
    background: #0C447C !important;
    background-color: #0C447C !important;
    color: #fff !important;
    border-color: #0C447C !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26,86,219,.30);
}

/* If Enroll button has a child element holding the text */
html body .ec-card a.ec-enroll *,
html body a.ec-enroll * {
    color: #fff !important;
}


/* ── 3. CAT-CARD course title → BLUE ──────────────────────────── */
html body .cat-card,
html body .cat-card a,
html body .cat-card a:link,
html body .cat-card a:visited,
html body .cat-card h2,
html body .cat-card h3,
html body .cat-card h4,
html body .cat-card h2 a,
html body .cat-card h3 a,
html body .cat-card h4 a,
html body .cat-card a h2,
html body .cat-card a h3,
html body .cat-card a h4,
html body .cat-card .cat-card-title,
html body .cat-card .cat-title {
    color: #1A56DB !important;
    text-decoration: none !important;
}

html body .cat-card a:hover,
html body .cat-card:hover a,
html body .cat-card:hover h2,
html body .cat-card:hover h3,
html body .cat-card:hover h4,
html body .cat-card a:hover h2,
html body .cat-card a:hover h3,
html body .cat-card a:hover h4 {
    color: #0C447C !important;
}

/* ============ NEW EXAM CARD ============ */
.exams-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
}

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

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

.ec-card {
    border-left: 4px solid #185FA5 !important;
    border-top: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    transition: all .2s !important;
}

    .ec-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
        transform: translateY(-2px);
        border-left-color: #0C447C !important;
    }

/* Top row: Acronym + Pill */
.ec-head-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 14px 8px !important;
    background: #f9fafb !important;
    border-bottom: none !important;
    margin: 0 !important;
}

.ec-exam-name {
    font-family: 'Fraunces',Georgia,serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    background: #f3f4f6 !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 3px 10px !important;
}

.ec-pill {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    white-space: nowrap !important;
}

.ec-body {
    padding: 8px 14px 12px !important;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #f9fafb;
}

/* NEW Full course name as heading */
.ec-fullname {
    font-family: 'DM Sans',sans-serif;
    /*font-family: 'Fraunces',Georgia,serif !important;*/
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0C447C !important;
    line-height: 1.35 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 0 8px 0 !important;
    border-bottom: 1px solid #d1d5db !important;
}

.ec-full {
    font-size: 11px !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
    flex: 1 !important;
    margin-bottom: 10px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    /*overflow: hidden !important;*/
	overflow-y: auto !important;
    background: #fff;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ececec;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ec-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 8px !important;
    margin-top: auto !important;
}

.ec-country-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important;
    padding: 3px 10px 3px 4px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
}

.ec-spec-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    background: #fff !important;
    border-radius: 50% !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* BLUE Enroll button */
.ec-enroll.ec-enroll-blue,
.ec-enroll {
    background: #185FA5 !important;
    color: #fff !important;
    border: none !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background .18s !important;
}

    .ec-enroll.ec-enroll-blue:hover,
    .ec-enroll:hover {
        background: #0C447C !important;
        color: #fff !important;
        border: none !important;
    }

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 18px;
}

@media(max-width:800px) {
    .compare-grid {
        grid-template-columns: 1fr;
    }
}

.compare-col {
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 18px;
}

    .compare-col h4 {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #666;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .compare-col.before h4::before {
        content: '';
        width: 8px;
        height: 8px;
        background: #dc2626;
        border-radius: 50%;
    }

    .compare-col.after h4::before {
        content: '';
        width: 8px;
        height: 8px;
        background: #16a34a;
        border-radius: 50%;
    }

/*-------------------
2026-05-14
-------------------*/

/* Hide old artefacts */
.aura-tag, .aura-card-title, .aura-strip-inner {
    display: none !important;
}

/* Hero pill */
.hero-aura-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(99,102,241,.18);
    color: #A5B4FC;
    border: 1px solid rgba(165,180,252,.3);
    margin-bottom: 10px;
}

    .hero-aura-pill strong {
        color: #fff;
        font-weight: 700;
    }

.hero-aura-pill-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7C3AED;
    box-shadow: none;
    animation: aura-pulse 2s infinite;
}

/* Responsive */
@media(max-width:1100px) {
    .aura-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 16px;
    }
}

@media(max-width:600px) {
    .aura-section {
        padding: 60px 0 56px;
    }

    .aura-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .aura-hd h2 {
        font-size: 26px !important;
    }
}

/* ── Hero stat boxes — rounded, frosted glass ── */
.hstats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
}

.hstat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    padding: 12px 18px;
    min-width: 88px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .18s;
}

    .hstat-box:hover {
        background: rgba(255,255,255,.16);
    }

.hstat-box-n {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}

.hstat-box-l {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,.6);
    margin: 0;
    white-space: nowrap;
    text-align: center;
}


/* ════════════════════════════════════════════════════════════
   AURA — Glossy Premium Section
   Deep multi-layer dark bg · glowing orbs · glassmorphism cards
   Hero pill · animated shimmer heading
════════════════════════════════════════════════════════════ */

/* ── Section shell ── */
/* ════════════════════════════════════════════════════════════
   AURA AI SECTION — Neural network / deep-tech aesthetic
   Dark void background · glowing gradient cards · circuit grid
════════════════════════════════════════════════════════════ */

.aura-section {
    background: #F8F9FA;
    padding: 88px 0 84px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

    /* Animated radial glow — top centre */
    .aura-section::before {
        content: '';
        position: absolute;
        top: -120px;
        left: 50%;
        transform: translateX(-50%);
        width: 900px;
        height: 500px;
        background: radial-gradient(ellipse, rgba(59,130,246,.08) 0%, rgba(139,92,246,.04) 50%, transparent 70%);
        pointer-events: none;
        z-index: 0;
        animation: aura-breathe 8s ease-in-out infinite alternate;
    }

    /* Circuit-board dot grid */
    .aura-section::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(99,102,241,.1) 1px, transparent 1px);
        background-size: 36px 36px;
        pointer-events: none;
        z-index: 0;
    }

@keyframes aura-breathe {
    from {
        opacity: .7;
        transform: translateX(-50%) scale(1);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1.08);
    }
}

.aura-inner {
    position: relative;
    z-index: 1;
}

/* ── Section heading ── */
.aura-hd {
    text-align: center;
    margin-bottom: 52px;
}

.aura-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 999px;
    background: #F5F3FF;
    color: #7C3AED;
    border: 1px solid #DDD6FE;
    margin-bottom: 18px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.aura-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7C3AED;
    box-shadow: none;
    animation: aura-pulse 2s infinite;
}

@keyframes aura-pulse {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .35
    }
}

.aura-hd h2 {
    font-family: 'Fraunces', serif !important;
    font-size: 34px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
    background: none !important;
    -webkit-text-fill-color: unset !important;
    animation: none !important;
}

    .aura-hd h2 .hh-white {
        color: #111827;
    }

    .aura-hd h2 .hh-blue {
        color: #185FA5;
        /*font-style: italic;*/
    }

    .aura-hd h2 .hh-purple {
        color: #7C3AED;
    }

.aura-hd > p {
    font-size: 15px !important;
    color: #6b7280 !important;
    line-height: 1.75 !important;
    max-width: 520px !important;
    margin: 0 auto 28px !important;
}

.aura-hd-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #185FA5;
    border: 1.5px solid #BFDBFE;
    padding: 9px 22px;
    border-radius: 999px;
    background: #EEF4FF;
    transition: all .2s;
    text-decoration: none;
}

    .aura-hd-link:hover {
        background: #185FA5;
        border-color: #185FA5;
        color: #fff;
        transform: translateY(-1px);
    }

/* ── Grid ── */
.aura-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 20px;
}

/* ── Card shell ── */
.aura-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s, border-color .2s;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

    /* Top glow edge */
    .aura-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 15%;
        right: 15%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--ac), transparent);
        opacity: .6;
        z-index: 1;
    }

    .aura-card:hover {
        transform: translateY(-10px) scale(1.01);
        border-color: rgba(0,0,0,.15);
        box-shadow: 0 28px 60px rgba(0,0,0,.55), 0 0 0 1px var(--ac), 0 0 40px -8px var(--ac);
    }

/* ── Header strip: tall, gradient, icon + text ── */
.aura-strip {
    background: var(--ag);
    height: 96px;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    position: relative;
    overflow: hidden;
}

    /* Large watermark number in strip */
    .aura-strip::after {
        content: attr(data-num);
        position: absolute;
        right: -6px;
        bottom: -14px;
        font-family: 'Fraunces', serif;
        font-size: 88px;
        font-weight: 500;
        color: rgba(255,255,255,.1);
        line-height: 1;
        pointer-events: none;
        z-index: 0;
        letter-spacing: -.04em;
    }

    .aura-strip::before {
        display: none;
    }

/* Icon */
.aura-ico {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: rgba(255,255,255,.2);
    border: 1.5px solid rgba(255,255,255,.35);
    font-size: 24px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    transition: transform .25s;
}

.aura-card:hover .aura-ico {
    transform: scale(1.1) rotate(-3deg);
}

/* Mode label + title in strip */
.aura-strip-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1;
    position: relative;
    z-index: 1;
}

.aura-strip-mode {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.7);
    line-height: 1;
}

.aura-strip-title {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* ── Card body ── */
.aura-card-body {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    background: transparent;
}

.aura-card-role {
    font-size: 10px;
    font-weight: 700;
    color: var(--ac);
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .9;
}

.aura-card-desc {
    font-size: 12.5px;
    color: #374151;
    line-height: 1.75;
    flex: 1;
}

.aura-feats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,.08);
}

.aura-feat {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #4b5563;
    line-height: 1.45;
}

.aura-feat-check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ac-mid, #EEF4FF);
    border: 1px solid var(--ac);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 800;
    color: var(--ac);
    margin-top: 1px;
}

/* Hide old artefacts */
.aura-tag, .aura-card-title, .aura-strip-inner {
    display: none !important;
}

/* Hero pill */
.hero-aura-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(99,102,241,.18);
    color: #A5B4FC;
    border: 1px solid rgba(165,180,252,.3);
    margin-bottom: 10px;
}

    .hero-aura-pill strong {
        color: #fff;
        font-weight: 700;
    }

.hero-aura-pill-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7C3AED;
    box-shadow: none;
    animation: aura-pulse 2s infinite;
}

/* Responsive */
@media(max-width:1100px) {
    .aura-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 16px;
    }
}

@media(max-width:600px) {
    .aura-section {
        padding: 60px 0 56px;
    }

    .aura-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .aura-hd h2 {
        font-size: 26px !important;
    }
}


/* Standards grid — 4 col compact cards */
/* ═══════════════════════════════════════════
   TRUST SECTION — sober, single neutral palette
═══════════════════════════════════════════ */

/* Sub-label above each group */
.tr-sub-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b7280;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Accreditation pills ── */
.tr-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;/*10px;*/
    margin-bottom: 4px;
}

.tr-badge-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 16px;
    transition: box-shadow .18s, transform .18s;
}

    .tr-badge-pill:hover {
        box-shadow: 0 4px 14px rgba(0,0,0,.08);
        transform: translateY(-1px);
    }

.tr-badge-ico {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.tr-badge-name {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

.tr-badge-region {
    font-size: 10.5px;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap;
}

.tr-badge-tag {
    font-size: 9.5px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}

/* ── Profession cards ── */
.tr-body-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}

.tr-body-card {
    background: #F8F9FA;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}

    .tr-body-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,.08);
        transform: translateY(-2px);
    }

.tr-body-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.tr-body-ico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.tr-body-prof {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.tr-body-sub {
    font-size: 10px;
    color: #9ca3af;
    font-weight: 500;
    margin: 0;
}

.tr-body-rows {
    padding: 6px 14px 10px;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.tr-body-row {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #f3f4f6;
}

    .tr-body-row:last-child {
        border-bottom: none;
    }

.tr-body-code {
    font-size: 10.5px;
    font-weight: 700;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    padding: 2px 7px;
    text-align: center;
    white-space: nowrap;
}

.tr-body-desc {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
}

.tr-body-country {
    font-size: 9.5px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
    text-align: center;
}

/* Trust note */
.tr-note {
    font-size: 11px;
    color: #9ca3af;
    margin: 18px 0 0;
    padding: 10px 14px;
    background: #f9fafb;
    border-radius: 8px;
    border-left: 3px solid #e5e7eb;
    line-height: 1.6;
}

/* Hospitals strip */
.tr-hospitals {
    margin-top: 24px;
    text-align: center;
}

.tr-hospitals-lbl {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.tr-hospitals-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* Responsive */
@media(max-width:900px) {
    .tr-body-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:600px) {
    .tr-body-grid {
        grid-template-columns: 1fr;
    }

    .tr-body-row {
        grid-template-columns: 80px 1fr;
    }

    .tr-body-country {
        display: none;
    }
}


/* ── Profession card per-colour (muted, sober) ── */
[data-prof] .tr-body-hd {
    background: var(--pc-bg);
    border-bottom: 1px solid var(--pc-border);
}

[data-prof] .tr-body-ico {
    background: var(--pc-border);
}

[data-prof] .tr-body-prof {
    color: var(--pc-col);
}

[data-prof] .tr-body-code {
    color: var(--pc-col);
    background: var(--pc-bg);
    border-color: var(--pc-border);
}

[data-prof="doctor"] {
    --pc-col: #1A56DB;
    --pc-bg: #EEF4FF;
    --pc-border: #BFDBFE;
}

[data-prof="pharma"] {
    --pc-col: #059669;
    --pc-bg: #ECFDF5;
    --pc-border: #A7F3D0;
}

[data-prof="nurse"] {
    --pc-col: #DB2777;
    --pc-bg: #FDF2F8;
    --pc-border: #FBCFE8;
}

[data-prof="dentist"] {
    --pc-col: #0284C7;
    --pc-bg: #F0F9FF;
    --pc-border: #BAE6FD;
}

[data-prof="pharmstu"] {
    --pc-col: #7C3AED;
    --pc-bg: #F5F3FF;
    --pc-border: #DDD6FE;
}

[data-prof="ipc"] {
    --pc-col: #0D9488;
    --pc-bg: #F0FDFA;
    --pc-border: #99F6E4;
}


/* ════════════════════════════════════════════════════════════
   MASTER TYPOGRAPHY NORMALISER
   One font family · One size scale · Applied to every section
   heading, sub-text and body content across the entire page.
   Uses !important to override any conflicting block above.
════════════════════════════════════════════════════════════ */

/* ── Section label (pill badge above every heading) ── */
.section-label,
.section-label.fe-label,
.tr-sub-label,
.aura-badge,
.aura-card-role {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

/* ── Section h2 title — every section ── */
.section-title,
.section-title.fe-title,
.aura-hd h2,
.gc-main-heading {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 34px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: #111827 !important;
    margin-bottom: 12px !important;
}

/* ── Section sub-text (paragraph under heading) ── */
.section-sub,
.section-sub.fe-sub,
.aura-hd > p,
.gc-sub-heading {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #6b7280 !important;
}

/* ── Card titles (strip title, usp-title, blog-title) ── */
.aura-strip-title,
.usp-title,
.blog-title,
.testi-name,
.ec-name,
.aura-card-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: #111827 !important;
}

/* strip title sits on dark gradient — keep white */
.aura-strip-title {
    color: #fff !important;
}

/* ── Card body / description text ── */
.aura-card-desc,
.usp-desc,
.blog-excerpt,
.testi-quote,
.ec-full,
.cat-items,
.tr-body-desc {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #4b5563 !important;
}

/* ── Feature / bullet items ── */
.aura-feat,
.tr-body-row {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
}

/* ── Small labels & meta ── */
.aura-strip-mode,
.ec-country,
.exam-country,
.cat-count,
.testi-role,
.tr-body-sub,
.tr-std-region,
.tr-badge-region,
.blog-date {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 11px !important;
}

/* ── Responsive scale — all headings together ── */
@media(max-width: 768px) {
    .section-title,
    .section-title.fe-title,
    .aura-hd h2,
    .gc-main-heading {
        font-size: 26px !important;
    }

    .section-sub,
    .section-sub.fe-sub,
    .aura-hd > p {
        font-size: 14px !important;
    }
}

@media(max-width: 480px) {
    .section-title,
    .section-title.fe-title,
    .aura-hd h2,
    .gc-main-heading {
        font-size: 22px !important;
    }
}


/* ── Hero stat boxes — rounded, frosted glass ── */
.hstats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
}

.hstat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    padding: 12px 18px;
    min-width: 88px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .18s;
}

    .hstat-box:hover {
        background: rgba(255,255,255,.16);
    }

.hstat-box-n {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}

.hstat-box-l {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,.6);
    margin: 0;
    white-space: nowrap;
    text-align: center;
}