/*==========================
GLOBAL
===========================*/

:root {

    /* =========================
       ODLC GLOBAL COLORS
    ========================= */

    --navy: #083C7C;
    --navy2: #083C7C;

    --blue: #083C7C;
    --cyan: #00a8ff;

    --purple: #6335e8;
    --yellow: #ffc400;

    --white: #ffffff;

    --muted: #899abd;

    --border: rgba(0, 168, 255, .30);

     --section-max-width: 1500px;

    /* Main Typography */
    --font-main: "Inter", "Segoe UI", Arial, sans-serif;

    /* Main Colors */
    --text-dark: #0b1f4d;
    --text-primary: #17203d;
    --text-body: #667085;
    --text-light: #ffffff;

    /* Font Weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

}


/* =========================================================
   2. GLOBAL BODY
========================================================= */

html,
body {

    font-family: var(--font-main);

    color: var(--text-primary);

    font-size: 16px;

    line-height: 1.6;

}


/* =========================================================
   3. GLOBAL PARAGRAPHS
========================================================= */

p {

    font-size: 16px;

    line-height: 1.7;

    font-weight: 400;

}


/* =========================================================
   4. MAIN SECTION HEADINGS
========================================================= */

.section-title,
.programmes-title {

    font-size: 52px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1.2px;

}


/* =========================================================
   5. OTHER MAIN SECTION HEADINGS
========================================================= */

.testimonial-section h2,
.blog-section h2,
.faq-section h2,
.faq-heading,
.why-odlc-title,
.section-heading {

    font-size: 46px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;

}


/* =========================================================
   6. SPECIAL LARGE HERO HEADINGS
========================================================= */

.hero-section h1,
.hero-section h2 {

    font-size: 54px;

    line-height: 1.1;

    font-weight: 800;

}


/* =========================================================
   7. SECTION DESCRIPTION
========================================================= */

.section-desc,
.programmes-description,
.testimonial-section > p,
.blog-section > p,
.section-description {

    font-size: 18px;

    line-height: 1.7;

    font-weight: 400;

    color: var(--text-body);

}


/* =========================================================
   8. SECTION BADGES
========================================================= */

.section-tag,
.programmes-badge,
.testimonial-badge,
.blog-badge,
.faq-badge,
.hero-badge {

    font-size: 14px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: .5px;

}


/* =========================================================
   9. CARD HEADINGS
========================================================= */

.feature-card h4,
.blog-card h4,
.review-card h5,
.info-content h5,
.info-card h3,
.impact-title {

    font-weight: 700;

}


/* =========================================================
   10. FEATURE CARD HEADING
========================================================= */

.feature-card h4 {

    font-size: 19px;

    line-height: 1.3;

}


/* =========================================================
   11. FEATURE CARD DESCRIPTION
========================================================= */

.feature-card p {

    font-size: 14px;

    line-height: 1.55;

}


/* =========================================================
   12. IMPACT CARD
========================================================= */

.impact-subtitle {

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .7px;

}

.impact-title {

    font-size: 30px;

    line-height: 1.25;

}

.impact-item h3 {

    font-size: 28px;

    line-height: 1.1;

    font-weight: 800;

}

.impact-item p {

    font-size: 14px;

    line-height: 1.4;

}


/* =========================================================
   13. INFORMATION STRIP
========================================================= */

.info-content h5 {

    font-size: 18px;

    line-height: 1.3;

    font-weight: 700;

}

.info-content p {

    font-size: 13px;

    line-height: 1.5;

}


/* =========================================================
   14. PROGRAMME CARDS
========================================================= */

.program-card h3,
.program-card h4,
.programme-card h3,
.programme-card h4 {

    font-size: 17px;

    line-height: 1.35;

    font-weight: 700;

}

.program-card p,
.programme-card p {

    font-size: 13px;

    line-height: 1.55;

}


/* =========================================================
   15. PROGRAMME COUNTER
========================================================= */

.program-count-card h3 {

    font-size: 26px;

    line-height: 1.2;

    font-weight: 800;

}

.program-count-card p {

    font-size: 14px;

    line-height: 1.5;

}


/* =========================================================
   16. APPLICATION / GATEWAY SECTION
========================================================= */

.application-section h2,
.gateway-section h2 {

    font-size: 46px;

    line-height: 1.15;

    font-weight: 800;

}

.application-section h4,
.gateway-section h4 {

    font-size: 17px;

    line-height: 1.35;

    font-weight: 700;

}

.application-section p,
.gateway-section p {

    font-size: 14px;

    line-height: 1.55;

}


/* =========================================================
   17. COMPARISON / WHY ODLC
========================================================= */

.comparison-section h2,
.why-odlc-section h2 {

    font-size: 46px;

    line-height: 1.15;

    font-weight: 800;

}

.comparison-card h3,
.stat-card h3 {

    font-size: 30px;

    line-height: 1.1;

    font-weight: 800;

}

.comparison-card p,
.stat-card p {

    font-size: 13px;

    line-height: 1.4;

    font-weight: 500;

}


/* =========================================================
   18. CERTIFICATION CTA
========================================================= */

.certification-section h2,
.skills-section h2 {

    font-size: 46px;

    line-height: 1.15;

    font-weight: 800;

}

.certification-section p,
.skills-section p {

    font-size: 16px;

    line-height: 1.65;

}


/* =========================================================
   19. BOTTOM FEATURE STRIPS
========================================================= */

.feature-strip h4,
.bottom-feature h4 {

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

}

.feature-strip p,
.bottom-feature p {

    font-size: 13px;

    line-height: 1.45;

}


/* =========================================================
   20. TESTIMONIALS
========================================================= */

.review-card h5 {

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

}

.review-card small {

    font-size: 12px;

}

.review-card p {

    font-size: 14px;

    line-height: 1.65;

}

.review-card a {

    font-size: 13px;

    font-weight: 600;

}


/* =========================================================
   21. BLOG
========================================================= */

.blog-card h4 {

    font-size: 18px;

    line-height: 1.4;

    font-weight: 700;

}

.blog-card p {

    font-size: 14px;

    line-height: 1.6;

}

.blog-category {

    font-size: 12px;

    font-weight: 600;

}

.blog-footer a {

    font-size: 13px;

    font-weight: 600;

}

.date-box h4 {

    font-size: 18px;

    line-height: 1;

}

.date-box span {

    font-size: 11px;

}


/* =========================================================
   22. FAQ
========================================================= */

.faq-section h2 {

    font-size: 46px;

    line-height: 1.15;

    font-weight: 800;

}

.faq-question,
.accordion-button {

    font-size: 16px;

    line-height: 1.4;

    font-weight: 600;

}

.faq-answer,
.accordion-body {

    font-size: 14px;

    line-height: 1.65;

}


/* =========================================================
   23. BUTTONS
========================================================= */

button,
.btn,
a.btn,
.blog-btn,
.google-review-btn {

    font-size: 14px;

    line-height: 1.2;

    font-weight: 600;

}


/* =========================================================
   24. HEADER / NAVIGATION
========================================================= */

.navbar-nav .nav-link {

    font-size: 14px;

    font-weight: 600;

}

.navbar-brand {

    font-size: 18px;

    font-weight: 700;

}


/* =========================================================
   25. FOOTER
========================================================= */

footer h4,
footer h5 {

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

}

footer p,
footer li,
footer a {

    font-size: 13px;

    line-height: 1.6;

}

footer .footer-title {

    font-size: 17px;

    font-weight: 700;

}


/* =========================================================
   26. LAPTOP
   992px - 1199px
========================================================= */

@media (max-width: 1199px) {

    .section-title,
    .programmes-title {

        font-size: 46px;

    }

    .testimonial-section h2,
    .blog-section h2,
    .faq-section h2,
    .faq-heading,
    .why-odlc-title,
    .section-heading {

        font-size: 42px;

    }

    .hero-section h1,
    .hero-section h2 {

        font-size: 48px;

    }

    .section-desc,
    .programmes-description {

        font-size: 17px;

    }

    .feature-card h4 {

        font-size: 18px;

    }

    .feature-card p {

        font-size: 13px;

    }

    .blog-card h4 {

        font-size: 17px;

    }

}


/* =========================================================
   27. TABLET
   768px - 991px
========================================================= */

@media (max-width: 991px) {

    body {

        font-size: 15px;

    }

    p {

        font-size: 15px;

        line-height: 1.65;

    }


    /* Main headings */

    .section-title,
    .programmes-title {

        font-size: 40px;

        line-height: 1.15;

    }


    .testimonial-section h2,
    .blog-section h2,
    .faq-section h2,
    .faq-heading,
    .why-odlc-title,
    .section-heading {

        font-size: 38px;

    }


    .hero-section h1,
    .hero-section h2 {

        font-size: 42px;

    }


    /* Description */

    .section-desc,
    .programmes-description {

        font-size: 16px;

        line-height: 1.7;

    }


    /* Badge */

    .section-tag,
    .programmes-badge,
    .testimonial-badge,
    .blog-badge,
    .faq-badge {

        font-size: 13px;

    }


    /* Cards */

    .feature-card h4 {

        font-size: 17px;

    }

    .feature-card p {

        font-size: 13px;

    }

    .impact-title {

        font-size: 26px;

    }

    .impact-item h3 {

        font-size: 25px;

    }

    .impact-item p {

        font-size: 13px;

    }

    .blog-card h4 {

        font-size: 17px;

    }

    .blog-card p {

        font-size: 13px;

    }

    .review-card p {

        font-size: 13px;

    }


    /* FAQ */

    .faq-question,
    .accordion-button {

        font-size: 15px;

    }

    .faq-answer,
    .accordion-body {

        font-size: 13px;

    }


    /* Buttons */

    button,
    .btn,
    a.btn,
    .blog-btn,
    .google-review-btn {

        font-size: 13px;

    }

}


/* =========================================================
   28. MOBILE
   576px - 767px
========================================================= */

@media (max-width: 767px) {

    body {

        font-size: 15px;

    }

    p {

        font-size: 14px;

        line-height: 1.65;

    }


    /* Main section headings */

    .section-title,
    .programmes-title {

        font-size: 32px;

        line-height: 1.18;

        letter-spacing: -.5px;

    }


    .testimonial-section h2,
    .blog-section h2,
    .faq-section h2,
    .faq-heading,
    .why-odlc-title,
    .section-heading {

        font-size: 32px;

        line-height: 1.2;

    }


    .hero-section h1,
    .hero-section h2 {

        font-size: 34px;

        line-height: 1.15;

    }


    /* Description */

    .section-desc,
    .programmes-description {

        font-size: 15px;

        line-height: 1.65;

    }


    /* Badges */

    .section-tag,
    .programmes-badge,
    .testimonial-badge,
    .blog-badge,
    .faq-badge {

        font-size: 12px;

    }


    /* Feature cards */

    .feature-card h4 {

        font-size: 16px;

    }

    .feature-card p {

        font-size: 12px;

        line-height: 1.5;

    }


    /* Impact */

    .impact-title {

        font-size: 24px;

    }

    .impact-item h3 {

        font-size: 23px;

    }

    .impact-item p {

        font-size: 12px;

    }


    /* Programme cards */

    .program-card h3,
    .program-card h4,
    .programme-card h3,
    .programme-card h4 {

        font-size: 16px;

    }

    .program-card p,
    .programme-card p {

        font-size: 12px;

    }


    /* Testimonials */

    .review-card h5 {

        font-size: 15px;

    }

    .review-card small {

        font-size: 11px;

    }

    .review-card p {

        font-size: 13px;

        line-height: 1.6;

    }


    /* Blogs */

    .blog-card h4 {

        font-size: 16px;

    }

    .blog-card p {

        font-size: 13px;

    }


    /* FAQ */

    .faq-question,
    .accordion-button {

        font-size: 14px;

    }

    .faq-answer,
    .accordion-body {

        font-size: 13px;

    }


    /* Buttons */

    button,
    .btn,
    a.btn,
    .blog-btn,
    .google-review-btn {

        font-size: 13px;

    }


    /* Footer */

    footer h4,
    footer h5 {

        font-size: 15px;

    }

    footer p,
    footer li,
    footer a {

        font-size: 12px;

    }

}


/* =========================================================
   29. SMALL MOBILE
   BELOW 576px
========================================================= */

@media (max-width: 575px) {

    body {

        font-size: 14px;

    }


    p {

        font-size: 14px;

        line-height: 1.65;

    }


    /* Main headings */

    .section-title,
    .programmes-title {

        font-size: 29px;

        line-height: 1.2;

    }


    .testimonial-section h2,
    .blog-section h2,
    .faq-section h2,
    .faq-heading,
    .why-odlc-title,
    .section-heading {

        font-size: 29px;

        line-height: 1.2;

    }


    .hero-section h1,
    .hero-section h2 {

        font-size: 30px;

    }


    /* Description */

    .section-desc,
    .programmes-description {

        font-size: 14px;

        line-height: 1.65;

    }


    /* Badge */

    .section-tag,
    .programmes-badge,
    .testimonial-badge,
    .blog-badge,
    .faq-badge {

        font-size: 11px;

    }


    /* Cards */

    .feature-card h4 {

        font-size: 15px;

    }

    .feature-card p {

        font-size: 12px;

    }


    .impact-title {

        font-size: 22px;

    }

    .impact-item h3 {

        font-size: 21px;

    }

    .impact-item p {

        font-size: 11px;

    }


    .program-card h3,
    .program-card h4,
    .programme-card h3,
    .programme-card h4 {

        font-size: 15px;

    }

    .program-card p,
    .programme-card p {

        font-size: 12px;

    }


    /* Blog */

    .blog-card h4 {

        font-size: 15px;

    }

    .blog-card p {

        font-size: 12px;

    }


    /* Testimonials */

    .review-card h5 {

        font-size: 14px;

    }

    .review-card p {

        font-size: 12px;

    }


    /* FAQ */

    .faq-question,
    .accordion-button {

        font-size: 13px;

    }

    .faq-answer,
    .accordion-body {

        font-size: 12px;

    }


    /* Buttons */

    button,
    .btn,
    a.btn,
    .blog-btn,
    .google-review-btn {

        font-size: 12px;

    }


    /* Footer */

    footer h4,
    footer h5 {

        font-size: 14px;

    }

    footer p,
    footer li,
    footer a {

        font-size: 11px;

    }

}

.section-container {

    width: 100%;

    max-width: 1320px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 40px;
    padding-right: 40px;

    box-sizing: border-box;

}

/* =========================
   DESKTOP
   ========================= */

.section-container {
    width: 100%;
    max-width: var(--section-max-width);
    margin: 0 auto;

    padding-left: 20px;
    padding-right: 20px;
}


/* =========================
   LAPTOP
   ========================= */

@media (max-width: 1399px) {

    .section-container {
        max-width: 1300px;
        padding-left: 20px;
        padding-right: 20px;
    }

}


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

@media (max-width: 991px) {

    .section-container {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

}


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

@media (max-width: 767px) {

    .section-container {
        padding-left: 10px;
        padding-right: 10px;
    }

} 


*{
    margin:0;
    padding:0px;
    box-sizing:border-box;
}

body{
    font-family:'Roboto',Arial;
    background:#ffffff;
    overflow-x:hidden;
}

img{
    max-width:100%;
}

a{
    text-decoration:none;
}



/*==========================
TOP BAR
===========================*/

.topbar{

    background:#083C7C;
    padding-left: 30px;
    height:46px;
    display:flex;
    align-items:center;
    color:#fff;
    font-size:13px;
    font-weight:500;
}

.date-time{

    display:flex;
    align-items:center;
    gap:8px;
}

.date-time i{

    color:#fff;
}

.top-menu{

    list-style:none;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0;
    padding:0;
    gap:45px;
}

.top-menu li a{

    color:#fff;
    font-size:13px;
    font-weight:600;
    transition:.3s;
}

.top-menu li a:hover{

    color:#ffc107;
}

/* .language-select{

    background:#ffc107;
    border:none;
    height:36px;
    width:190px;
    font-size:13px;
    font-weight:600;
    padding-left:12px;
    border-radius:3px;
} */

/*==========================
HEADER
===========================*/

.main-header{

    background:#fff;
    padding:12px 0 !important;
    box-shadow:0 2px 12px rgba(0,0,0,.05);
}

.logo-area{

    display:flex;
    align-items:center;
    gap:18px;
}

.logo{

    width:320px;
}

.logo-area h2{

    font-size:24px;
    font-weight:700;
    color:#16396b;
    line-height:30px;
    margin:0;
}

.row.align-items-center.col-lg-6 {
    margin-left: auto !important;
}

.government-logos {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: 100% !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.government-logos img {
    width: auto !important;
    height: 70px !important;
    max-width: 430px !important;
    object-fit: contain !important;
}

/* .menu-btn{

    width:58px;
    height:58px;

    float:right;

    border-radius:30%;

    background:#0B57D0;

    border:none;

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

    box-shadow:0 10px 25px rgba(0,0,0,.2);
}

.menu-btn i{

    color:#fff;
    font-size:30px;
}  */



/* =========================================================
   HAMBURGER
========================================================= */

.hamburger-btn {

    width: 58px;

    height: 58px;

    border: none;

    border-radius: 50%;

    background: #083C7C;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

    cursor: pointer;

    box-shadow:

        0 0 0 5px rgba(0, 100, 230, .08),

        0 10px 30px rgba(0, 50, 130, .25);

    transition: .3s ease;

}


.hamburger-btn span {

    width: 23px;

    height: 2px;

    background: #fff;

    border-radius: 10px;

}


.hamburger-btn:hover {

    transform: scale(1.07);

}


/* =========================================================
   MEGA MENU
========================================================= */

.mega-menu {

    position: fixed;

    inset: 0;

    z-index: 99999;

     background: #083C7C !important;

    color: #fff;

    overflow-y: auto;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-25px);

    transition:

        opacity .35s ease,

        transform .35s ease,

        visibility .35s ease;

}


.mega-menu::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    /* opacity: .4; */

    background-image:

        linear-gradient(
            90deg,
            rgba(0,168,255,.05) 1px,
            transparent 1px
        ),

        linear-gradient(
            rgba(0,168,255,.05) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    display: none !important;

}


.mega-menu.active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/* =========================================================
   MENU TOP
========================================================= */

.menu-top {

    height: 85px;

    border-bottom: 1px solid rgba(255,255,255,.08);

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}

/* =========================================================
   ODLC LOGO - MENU TOP CENTER
========================================================= */

.menu-odlc-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

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

    padding: 0;
    margin: 0;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    text-decoration: none;
}

.menu-odlc-logo img {
    width: 150px;
    height: auto;

    display: block;
    object-fit: contain;

    /* Make the complete logo pure white */
    filter: brightness(0) invert(1) !important;

    opacity: 1 !important;
}


.menu-odlc-logo:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    transform:
        translate(-50%, -50%)
        scale(1.03);
}



/* TEXT */

.menu-logo-text {

    display: flex;

    flex-direction: column;

    line-height: 1.1;

}


.menu-logo-text strong {

    color: #fff;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: .5px;

}


.menu-logo-text span {

    color: #8da4c8;

    font-size: 7px;

    margin-top: 3px;

}


/* =========================================================
   SINGLE LOGO VERSION
========================================================= */

.menu-odlc-logo.single-logo {

    padding: 8px 20px;

}


.menu-odlc-logo.single-logo img {

    width: 120px;

    height: 42px;

    object-fit: contain;

}




/* =========================================================
   MAIN LAYOUT
========================================================= */

.menu-layout {

    min-height: calc(100vh - 160px);

    display: grid;

    grid-template-columns:
        28%
        44%
        28%;

    position: relative;

    z-index: 2;

}


/* =========================================================
   LEFT
========================================================= */

.main-navigation {

    padding: 30px 25px 30px 15px !important;

    border-right: 1px solid rgba(255,255,255,.12);

}


.menu-heading {

    display: inline-block;

    font-size: 18px;

    font-weight: 700;

    position: relative;

    margin-bottom: 22px;

}


.menu-heading::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -9px;

    width: 38px;

    height: 3px;

    background: linear-gradient(
        90deg,
        var(--cyan),
        var(--purple)
    );

}


.menu-heading span {

    color: #fff;

}


.menu-heading strong {

    color: var(--cyan);

}


.nav-items {

    display: flex;

    flex-direction: column;

}


.main-nav-item {

    width: 100%;

    min-height: 63px;

    border: none;

    border-bottom: 1px solid rgba(255,255,255,.08);

    background: transparent;

    display: grid;

    grid-template-columns: 42px 1fr 20px;

    align-items: center;

    gap: 12px;

    color: #fff;

    text-align: left;

    padding: 8px 5px;

    cursor: pointer;

    transition: .25s ease;

}


.main-nav-item:hover,
.main-nav-item.active {

    background: rgba(0,168,255,.06);

    padding-left: 10px;

}


.nav-icon {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    border: 1px solid rgba(0,168,255,.6);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--cyan);

}


.nav-info {

    display: flex;

    flex-direction: column;

}


.nav-info strong {

    font-size: 13px;

    font-weight: 600;

}


.nav-info small {

    font-size: 9px;

    color: #8394b4;

    margin-top: 3px;

}


.main-nav-item > i {

    color: var(--yellow);

    transition: .25s;

}


.main-nav-item:hover > i {

    transform: translateX(4px);

}


/* =========================================================
   CATEGORY CONTENT
========================================================= */

.category-content {

    padding: 30px 30px !important;

    border-right: 1px solid rgba(255,255,255,.12);

}


.category-panel {

    display: none;

    animation: panelShow .35s ease;

}


.category-panel.active {

    display: block;

}


@keyframes panelShow {

    from {

        opacity: 0;

        transform: translateX(10px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}


.category-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 25px;

}


.category-header span {

    color: var(--cyan);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

}


.category-header h2 {

    margin: 5px 0;

    font-size: 25px !important;

    font-weight: 700;

}


.category-header p {

    margin: 0;

    max-width: 450px;

    color: #8ea0c0;

    font-size: 10px;

    line-height: 1.7;

}


.category-large-icon {

    color: rgba(0,168,255,.12);

    font-size: 65px;

}


/* =========================================================
   CONTENT CARDS
========================================================= */

.content-cards {

    display: grid;

    gap: 12px;

}


.content-card {

    min-height: 95px;

    padding: 15px;

    border: 1px solid rgba(0,168,255,.25);

    border-radius: 12px;

    display: grid;

    grid-template-columns: 45px 1fr 20px;

    align-items: center;

    gap: 14px;

    color: #fff;

    background: rgba(255,255,255,.025);

    transition: .3s ease;

}


.content-card:hover {

    transform: translateX(5px);

    border-color: var(--cyan);

    background: rgba(0,168,255,.06);

}


.card-icon {

    width: 42px;

    height: 42px;

    border-radius: 10px;

    background: rgba(0,168,255,.1);

    color: var(--cyan);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 19px;

}


.content-card h5 {

    margin: 0;

    font-size: 13px;

}


.content-card p {

    margin: 5px 0 0;

    color: #8496b6;

    font-size: 9px;

}


.content-card > i {

    color: var(--yellow);

}


/* =========================================================
   PROGRAMME CARDS
========================================================= */

.programme-cards {

    display: grid;

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

    gap: 12px;

}


.programme-box {

    padding: 17px;

    border-radius: 13px;

    border: 1px solid rgba(0,168,255,.3);

    background: rgba(255,255,255,.025);

    min-height: 290px;

}


.programme-box.skill {

    border-color: rgba(111,60,235,.45);

}


.programme-box.medical {

    border-color: rgba(0,200,170,.35);

}


.programme-icon {

    width: 40px;

    height: 40px;

    border-radius: 10px;

    background: rgba(0,168,255,.1);

    color: var(--cyan);

    display: flex;

    align-items: center;

    justify-content: center;

}


.programme-box.skill .programme-icon {

    color: #a174ff;

    background: rgba(99,53,232,.12);

}


.programme-box.medical .programme-icon {

    color: #22d5ad;

    background: rgba(34,213,173,.10);

}


.programme-box h4 {

    margin: 15px 0 7px;

    font-size: 15px;

}


.programme-box p {

    color: #8295b6;

    font-size: 10px;

    line-height: 1.5;

}


.programme-box a {

    display: flex;

    justify-content: space-between;

    color: #e9f1ff;

    font-size: 10px;

    padding: 10px 0;

    border-bottom: 1px solid rgba(255,255,255,.08);

}


.programme-box a:hover {

    color: var(--cyan);

}

/* =========================================================
   ECCE SUBMENU
========================================================= */

.ecce-menu-item {
    width: 100%;
    position: relative;
}


/* ECCE BUTTON */

.ecce-submenu-toggle {
    width: 100%;

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

    padding: 10px 0;

    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08);

    color: #ffffff !important;

    

    text-align: left;

    cursor: pointer;

    outline: none;
}


/* ECCE TEXT */

.ecce-submenu-toggle span {
    color: #ffffff;
}


/* ARROW */

.ecce-submenu-toggle i {
    color: #ffc400;



    transition: .3s ease;
}


/* OPEN ARROW */

.ecce-menu-item.open .ecce-submenu-toggle i {
    transform: rotate(90deg);
    color: #00a8ff;
}


/* =========================================================
   SUBMENU
========================================================= */

.ecce-submenu {
    display: none;

    margin-left: 10px;

    padding: 3px 0;

    border-left: 1px solid rgba(0,168,255,.45);
}


/* SHOW SUBMENU */

.ecce-menu-item.open .ecce-submenu {
    display: block;
}


/* SUBMENU LINKS */

.ecce-submenu a {
    display: flex !important;

    align-items: center;
    justify-content: space-between;

    padding: 9px 12px !important;

    color: #dce8fa !important;


    text-decoration: none;

    border-bottom: 1px solid rgba(255,255,255,.06);

    background: transparent !important;

    transition: .25s ease;
}


/* HOVER */

.ecce-submenu a:hover {
    color: #00a8ff !important;

    background: rgba(0,168,255,.08) !important;

    padding-left: 16px !important;
}


/* ARROW */

.ecce-submenu a i {
    color: #ffc400;

   
}


/* ECCE BUTTON HOVER */

.ecce-submenu-toggle:hover span {
    color: #00a8ff;
}


/* =========================================================
   PORTALS
========================================================= */

.portal-cards {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}


.portal-card {

    padding: 22px;

    border: 1px solid var(--border);

    border-radius: 14px;

    background: rgba(255,255,255,.025);

}


.portal-icon {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: rgba(0,168,255,.10);

    color: var(--cyan);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

}


.portal-card h4 {

    margin-top: 15px;

    

}


.portal-card p {

    color: #8295b6;

    line-height: 1.6;

}


.portal-links {

    margin-top: 18px;

}


.portal-links a {

    display: flex;

    justify-content: space-between;

    color: #fff;

    padding: 10px 0;

    border-bottom: 1px solid rgba(255,255,255,.08);


}


/* =========================================================
   ONBOARDING
========================================================= */

.onboarding-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

}


.onboarding-card {

    padding: 17px;

    border: 1px solid rgba(0,168,255,.25);

    border-radius: 12px;

    background: rgba(255,255,255,.025);

}


.onboarding-card > i {

    color: var(--cyan);


}


.onboarding-card h5 {


    margin: 12px 0;

}


.onboarding-card a {

    display: flex;

    justify-content: space-between;

    color: #cbd8ef;

    padding: 8px 0;

    border-top: 1px solid rgba(255,255,255,.08);

   

}


.onboarding-card a:hover {

    color: var(--cyan);

}


/* =========================================================
   RECOGNITION
========================================================= */

.large-feature-card {

    min-height: 150px;

    padding: 25px;

    border: 1px solid var(--border);

    border-radius: 15px;

    display: grid;

    grid-template-columns: 55px 1fr 25px;

    align-items: center;

    gap: 18px;

    color: #fff;

    background:

        linear-gradient(
            135deg,
            rgba(0,168,255,.08),
            rgba(99,53,232,.06)
        );

}


.feature-icon {

    width: 52px;

    height: 52px;

    border-radius: 14px;

    background: rgba(255,196,0,.1);

    color: var(--yellow);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 23px;

}


.large-feature-card h4 {

    margin: 0;

    

}


.large-feature-card p {

    margin: 7px 0 0;

    color: #8496b5;



}


/* =========================================================
   MEMBERSHIP
========================================================= */

.membership-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

}


.membership-card {

    min-height: 135px;

    padding: 18px;

    border: 1px solid rgba(0,168,255,.25);

    border-radius: 13px;

    color: #fff;

    position: relative;

    transition: .3s;

}


.membership-card:hover {

    border-color: var(--cyan);

    transform: translateY(-4px);

}


.membership-card > i:first-child {

    color: var(--cyan);



}


.membership-card h5 {


    margin: 12px 0 4px;

}


.membership-card span {

    color: #8395b5;


}


.membership-card > i:last-child {

    position: absolute;

    right: 18px;

    bottom: 18px;

    color: var(--yellow);

}


/* =========================================================
   QUICK ACCESS
========================================================= */

.quick-access {

    padding: 30px 15px 30px 25px !important;

}


.menu-search {

    height: 45px;

    border: 1px solid rgba(0,168,255,.45);

    border-radius: 30px;

    display: flex;

    align-items: center;

    padding: 0 15px;

    margin-bottom: 18px;

}


.menu-search i {

    color: #fff;

}


.menu-search input {

    width: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: #fff;

    font-size: 12px;

    margin-left: 10px;

}


.menu-search input::placeholder {

    color: #7d8eae;

}


.quick-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    border: 1px solid rgba(0,168,255,.25);

    border-radius: 10px;

    overflow: hidden;

}


.quick-item {

    min-height: 62px;

    padding: 10px;

    display: grid;

    grid-template-columns: 25px 1fr 10px;

    align-items: center;

    gap: 6px;

    color: #fff;

    border-bottom: 1px solid rgba(255,255,255,.08);

}


.quick-item:nth-child(odd) {

    border-right: 1px solid rgba(255,255,255,.08);

}


.quick-item:hover {

    background: rgba(0,168,255,.07);

}


.quick-item > i:first-child {

    color: var(--cyan);

}



.quick-item > i:last-child {

    color: var(--yellow);

}


/* =========================================================
   HELP
========================================================= */

.help-box {

    margin-top: 20px;

    padding: 20px;

    border: 1px solid rgba(0,168,255,.25);

    border-radius: 13px;

    background: rgba(0,75,150,.12);

}


.help-box > span {

    color: var(--yellow);

    font-weight: 700;


}


.help-box h4 {


    font-weight: 400;

    margin: 6px 0 15px;

}


.help-box > a {

    min-height: 43px;

    padding: 0 14px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: linear-gradient(
        90deg,
        #075bd9,
        #254fe7
    );

    border-radius: 6px;

    color: #fff;

    font-weight: 700;

}


.help-details {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 17px;

}


.help-details > div {

    display: flex;

    gap: 7px;

}


.help-details i {

    color: var(--cyan);

}


.help-details small {

    display: flex;

    flex-direction: column;

    color: var(--cyan);


}


.help-details strong {

    color: #fff;

    margin-top: 3px;


}


/* =========================================================
   FOOTER
========================================================= */

.menu-footer {

    min-height: 75px;

    border-top: 1px solid rgba(255,255,255,.1);

    display: grid;

    grid-template-columns: 1fr 1.3fr 1fr;

    align-items: center;

    padding: 12px 45px;

    position: relative;

    z-index: 3;

}


.footer-social {

    display: flex;

    align-items: center;

    gap: 10px;

}


.footer-social strong {

    font-size: 10px;

    margin-right: 8px;

}


.footer-social a {

    width: 30px;

    height: 30px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.2);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

}


.footer-social a:hover {

    background: var(--blue);

}


.footer-quote {

    text-align: center;

    color: #b7c6e0;

    font-size: 11px;

}


.footer-copy {

    text-align: right;

    color: #7386a8;

    font-size: 9px;

}

/* =========================================================
   ODLC MENU GLOBAL COLOR
========================================================= */

:root {
    --menu-color: #083C7C;
}


/* HAMBURGER */

.hamburger-btn {
    background: #083C7C !important;
}


/* OPEN MENU */

.mega-menu {
    background: #083C7C !important;
    color: #ffffff !important;
}


/* REMOVE DARK GRID */

.mega-menu::before {
    display: none !important;
}


/* MENU BUTTON */

.menu-open-label {
    background: #083C7C !important;
    border-color: rgba(255,255,255,.35) !important;
}


/* MENU HOVER */

.main-nav-item:hover,
.main-nav-item.active {
    background: rgba(255,255,255,.08) !important;
}


/* CARDS */

.content-card,
.programme-box,
.portal-card,
.onboarding-card,
.membership-card {
    background: rgba(255,255,255,.06) !important;
}


/* SEARCH */

.menu-search {
    border-color: rgba(255,255,255,.35) !important;
}


/* HELP BOX */

.help-box {
    background: rgba(255,255,255,.06) !important;
}


/* BUTTONS */

.help-box > a {
    background: #ffffff !important;
    color: #083C7C !important;
}


/* HAMBURGER LINES */

.hamburger-btn span {
    background: #ffffff !important;
}

/* =========================================================
   MENU FONT SIZE - SLIGHTLY SMALLER
========================================================= */

/* Main section headings */
.menu-heading {
    font-size: 17px !important;
}

/* Main menu item title */
.nav-info strong {
    font-size: 18px !important;
}

/* Main menu item description */
.nav-info small {
    font-size: 15px !important;
}

/* Category small label */
.category-header span {
    font-size: 20px !important;
}

/* Category main heading */
.category-header h2 {
    font-size: 22px !important;
}

/* Category paragraph */
.category-header p {
    font-size: 12px !important;
}

/* Content card heading */
.content-card h5 {
    font-size: 20px !important;
}

/* Content card paragraph */
.content-card p {
    font-size: 12px !important;
}

/* Programme heading */
.programme-box h4 {
    font-size: 20px !important;
}

/* Programme paragraph */
.programme-box p {
    font-size: 12px !important;
}

/* Programme links */
.programme-box a {
    font-size: 12px !important;
}

/* Portal heading */
.portal-card h4 {
    font-size: 14px !important;
}

/* Portal paragraph */
.portal-card p {
    font-size: 12px !important;
}

/* Portal links */
.portal-links a {
    font-size: 15px !important;
}

/* Quick Access heading */
.quick-access .menu-heading {
    font-size: 17px !important;
}

/* Quick access items */
.quick-item span {
    font-size: 15px !important;
}

/* Help section */
.help-box > span {
    font-size: 15px !important;
}

.help-box h4 {
    font-size: 15px !important;
}

.help-box > a {
    font-size: 15px !important;
}


/* =========================================================
   ECCE SUBMENU
========================================================= */

/* ECCE submenu main button */
.ecce-submenu-toggle {
    font-size: 15px !important;
}

/* ECCE submenu text */
.ecce-submenu-toggle span {
    font-size: 13px !important;
}

/* ECCE submenu items */
.ecce-submenu a {
    font-size: 15px !important;
}

/* ECCE submenu item text */
.ecce-submenu a span {
    font-size: 10px !important;
}








/* =========================================================
   ODLC MEGA MENU - FULL RESPONSIVE SYSTEM
   Add this at the VERY END of your CSS
========================================================= */


/* =========================================================
   LARGE DESKTOP
   1400px and above
========================================================= */

@media (min-width: 1400px) {

    .menu-layout {
        grid-template-columns: 28% 44% 28%;
    }

    .main-navigation {
        padding: 38px 35px 35px 35px !important;
    }

    .category-content {
        padding: 38px 40px !important;
    }

    .quick-access {
        padding: 38px 35px !important;
    }

    .menu-heading {
        font-size: 19px !important;
    }

    .nav-info strong {
        font-size: 17px !important;
    }

    .nav-info small {
        font-size: 13px !important;
    }

    .category-header h2 {
        font-size: 28px !important;
    }

    .category-header p {
        font-size: 12px !important;
    }

}


/* =========================================================
   LAPTOP
   1200px - 1399px
========================================================= */

@media (min-width: 1200px) and (max-width: 1399px) {

    .menu-layout {
        grid-template-columns: 29% 43% 28%;
    }

    .main-navigation {
        padding: 30px 25px !important;
    }

    .category-content {
        padding: 30px 28px !important;
    }

    .quick-access {
        padding: 30px 22px !important;
    }

    .menu-heading {
        font-size: 17px !important;
    }

    .nav-info strong {
        font-size: 15px !important;
    }

    .nav-info small {
        font-size: 10px !important;
    }

    .category-header h2 {
        font-size: 25px !important;
    }

    .category-header p {
        font-size: 11px !important;
    }

    .content-card h5 {
        font-size: 16px !important;
    }

    .content-card p {
        font-size: 10px !important;
    }

    .programme-box h4 {
        font-size: 16px !important;
    }

    .programme-box p,
    .programme-box a {
        font-size: 10px !important;
    }

}


/* =========================================================
   TABLET LANDSCAPE
   992px - 1199px
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .menu-layout {
        grid-template-columns: 30% 70%;
    }


    /* LEFT MENU */

    .main-navigation {
        padding: 28px 18px !important;
    }


    .menu-heading {
        font-size: 17px !important;
        margin-bottom: 18px;
    }


    .main-nav-item {
        min-height: 58px;
        grid-template-columns: 36px 1fr 18px;
        gap: 9px;
    }


    .nav-icon {
        width: 34px;
        height: 34px;
    }


    .nav-info strong {
        font-size: 14px !important;
    }


    .nav-info small {
        font-size: 9px !important;
    }


    /* CONTENT */

    .category-content {
        padding: 28px 25px !important;
    }


    .category-header h2 {
        font-size: 24px !important;
    }


    .category-header p {
        font-size: 10px !important;
    }


    .content-card h5 {
        font-size: 15px !important;
    }


    .content-card p {
        font-size: 10px !important;
    }


    /* PROGRAMMES */

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


    .programme-box {
        min-height: 250px;
    }


    .programme-box h4 {
        font-size: 15px !important;
    }


    .programme-box p,
    .programme-box a {
        font-size: 10px !important;
    }


    /* PORTALS */

    .portal-cards {
        grid-template-columns: 1fr 1fr;
    }


    /* QUICK ACCESS */

    .quick-access {
        display: none;
    }


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

}


/* =========================================================
   TABLET PORTRAIT
   768px - 991px
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .menu-top {
        height: 75px;
    }


    .menu-odlc-logo img {
        width: 125px;
    }


    /* TWO COLUMN MENU */

    .menu-layout {
        grid-template-columns: 35% 65%;
        min-height: calc(100vh - 75px);
    }


    /* LEFT */

    .main-navigation {
        padding: 25px 18px !important;
    }


    .menu-heading {
        font-size: 16px !important;
        margin-bottom: 18px;
    }


    .main-nav-item {
        min-height: 58px;

        grid-template-columns:
            34px
            1fr
            18px;

        gap: 8px;

        padding: 7px 3px;
    }


    .nav-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }


    .nav-info strong {
        font-size: 13px !important;
    }


    .nav-info small {
        font-size: 8px !important;
    }


    /* CONTENT */

    .category-content {
        padding: 25px 20px !important;
    }


    .category-header {
        margin-bottom: 20px;
    }


    .category-header span {
        font-size: 11px !important;
    }


    .category-header h2 {
        font-size: 22px !important;
    }


    .category-header p {
        font-size: 10px !important;
    }


    /* CONTENT CARDS */

    .content-card {
        min-height: 82px;
        padding: 12px;

        grid-template-columns:
            38px
            1fr
            18px;

        gap: 10px;
    }


    .card-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }


    .content-card h5 {
        font-size: 14px !important;
    }


    .content-card p {
        font-size: 9px !important;
    }


    /* PROGRAMMES */

    .programme-cards {
        grid-template-columns: 1fr 1fr;
    }


    .programme-box {
        min-height: 230px;
        padding: 14px;
    }


    .programme-box h4 {
        font-size: 14px !important;
    }


    .programme-box p,
    .programme-box a {
        font-size: 9px !important;
    }


    /* PORTALS */

    .portal-cards {
        grid-template-columns: 1fr;
    }


    /* ONBOARDING */

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


    /* MEMBERSHIP */

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


    /* QUICK ACCESS */

    .quick-access {
        display: none;
    }


    /* FOOTER */

    .menu-footer {
        display: none;
    }

}


/* =========================================================
   MOBILE
   576px - 767px
========================================================= */

@media (min-width: 576px) and (max-width: 767px) {

    .mega-menu {
        overflow-y: auto;
        overflow-x: hidden;
    }


    /* TOP */

    .menu-top {
        height: 68px;
    }


    .menu-odlc-logo img {
        width: 115px;
    }


    /* CLOSE BUTTON */

    .mobile-panel-close {
        width: 35px;
        height: 35px;

        top: 15px;
        right: 18px;
    }


    /* MAIN LAYOUT */

    .menu-layout {
        display: block;
        min-height: auto;
    }


    /* LEFT MENU */

    .main-navigation {
        width: 100%;
        padding: 25px 25px 35px !important;

        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }


    .menu-heading {
        font-size: 18px !important;
        margin-bottom: 20px;
    }


    .main-nav-item {
        min-height: 62px;

        grid-template-columns:
            40px
            1fr
            22px;

        gap: 10px;
    }


    .nav-icon {
        width: 37px;
        height: 37px;
    }


    .nav-info strong {
        font-size: 14px !important;
    }


    .nav-info small {
        font-size: 9px !important;
    }


    /* CATEGORY */

    .category-content {
        width: 100%;
        padding: 25px 20px 40px !important;

        border-right: none;
    }


    .category-header {
        margin-bottom: 20px;
    }


    .category-header h2 {
        font-size: 23px !important;
    }


    .category-header p {
        font-size: 10px !important;
    }


    .category-large-icon {
        display: none;
    }


    /* CARDS */

    .content-cards {
        grid-template-columns: 1fr;
    }


    .content-card {
        min-height: 82px;
    }


    .content-card h5 {
        font-size: 14px !important;
    }


    .content-card p {
        font-size: 9px !important;
    }


    /* PROGRAMMES */

    .programme-cards {
        grid-template-columns: 1fr;
    }


    .programme-box {
        min-height: auto;
        padding: 17px;
    }


    .programme-box h4 {
        font-size: 16px !important;
    }


    .programme-box p {
        font-size: 10px !important;
    }


    .programme-box a {
        font-size: 10px !important;
    }


    /* PORTALS */

    .portal-cards {
        grid-template-columns: 1fr;
    }


    /* ONBOARDING */

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


    /* MEMBERSHIP */

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


    /* QUICK ACCESS */

    .quick-access {
        display: none;
    }


    /* FOOTER */

    .menu-footer {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
   0px - 575px
========================================================= */

@media (max-width: 575px) {

    /* MENU */

    .mega-menu {
        width: 100%;
        height: 100vh;

        overflow-x: hidden;
        overflow-y: auto;
    }


    /* TOP */

    .menu-top {
        height: 64px;

        padding: 0 15px;
    }


    .menu-odlc-logo img {
        width: 105px;
    }


    /* CLOSE */

    .mobile-panel-close {
        width: 32px;
        height: 32px;

        top: 15px;
        right: 12px;

        font-size: 17px;
    }


    /* LAYOUT */

    .menu-layout {
    position: relative !important;
    display: block !important;
    min-height: 100vh !important;
}


    /* LEFT NAVIGATION */

    .main-navigation {

        width: 100%;

        padding:
            22px
            15px
            30px !important;

        border-right: none;
    }


    /* HEADING */

    .menu-heading {

        font-size: 17px !important;

        margin-bottom: 18px;
    }


    .menu-heading::after {

        width: 32px;
        height: 3px;

        bottom: -7px;
    }


    /* NAV ITEM */

    .main-nav-item {

        width: 100%;

        min-height: 58px;

        grid-template-columns:
            36px
            minmax(0, 1fr)
            18px;

        gap: 9px;

        padding: 7px 3px;
    }


    /* ICON */

    .nav-icon {

        width: 33px;
        height: 33px;

        font-size: 12px;
    }


    /* TEXT */

    .nav-info {

        min-width: 0;
    }


    .nav-info strong {

        font-size: 13px !important;

        white-space: normal;

        line-height: 1.3;
    }


    .nav-info small {

        font-size: 8px !important;

        line-height: 1.3;

        margin-top: 2px;
    }


    /* ARROW */

    .main-nav-item > i {

        font-size: 12px;
    }

     

    /* =========================================================
   MENU TOP
========================================================= */

.mega-menu .menu-top {
    position: relative !important;

    width: 100% !important;
    height: 88px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* =========================================================
   ODLC LOGO - CENTER
========================================================= */

.mega-menu .menu-odlc-logo {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

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

    margin: 0 !important;
}


/* =========================================================
   CLOSE MARK - TOP RIGHT
========================================================= */

.mega-menu .close-menu {
    position: absolute !important;

    top: 18px !important;
    right: 18px !important;

    left: auto !important;
    bottom: auto !important;

    width: 42px !important;
    height: 42px !important;

    padding: 0 !important;
    margin: 0 !important;

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

    background: transparent !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    color: #ffffff !important;

    cursor: pointer !important;

    z-index: 999999 !important;
}


/* X ICON */

.mega-menu .close-menu i {
    font-size: 22px !important;

    color: #ffffff !important;

    line-height: 1 !important;

    transition: .25s ease !important;
}


/* HOVER */

.mega-menu .close-menu:hover i {
    color: #00a8ff !important;

    transform: rotate(90deg);
}


/* REMOVE BOOTSTRAP FOCUS */

.mega-menu .close-menu:focus,
.mega-menu .close-menu:focus-visible,
.mega-menu .close-menu:active {
    background: transparent !important;

    border: none !important;

    outline: none !important;

    box-shadow: none !important;
}


    /* CATEGORY HEADER */

    .category-header {

        display: block;

        margin-bottom: 20px;
    }


    .category-header span {

        font-size: 9px !important;

        letter-spacing: .8px;
    }


    .category-header h2 {

        font-size: 22px !important;

        line-height: 1.2;

        margin: 6px 0;
    }


    .category-header p {

        max-width: 100%;

        font-size: 9px !important;

        line-height: 1.6;
    }


    /* CONTENT CARDS */

    .content-cards {

        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;
    }


    .content-card {

        width: 100%;

        min-height: 78px;

        padding: 12px;

        grid-template-columns:
            36px
            minmax(0, 1fr)
            18px;

        gap: 9px;

        border-radius: 11px;
    }


    .card-icon {

        width: 34px;

        height: 34px;

        font-size: 15px;

        border-radius: 9px;
    }


    .content-card h5 {

        font-size: 13px !important;

        line-height: 1.3;
    }


    .content-card p {

        font-size: 8px !important;

        line-height: 1.4;

        margin-top: 3px;
    }


    /* PROGRAMMES */

    .programme-cards {

        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;
    }


    .programme-box {

        width: 100%;

        min-height: auto;

        padding: 15px;

        border-radius: 12px;
    }


    .programme-icon {

        width: 37px;

        height: 37px;

        font-size: 16px;
    }


    .programme-box h4 {

        font-size: 15px !important;

        line-height: 1.3;

        margin: 12px 0 6px;
    }


    .programme-box p {

        font-size: 9px !important;

        line-height: 1.5;
    }


    .programme-box a {

        font-size: 9px !important;

        padding: 9px 0;

        line-height: 1.4;
    }


    /* ECCE */

    .ecce-submenu-toggle {

        

        padding: 10px 0;
    }


    .ecce-submenu {

        margin-left: 7px;

        padding-left: 0;
    }


    .ecce-submenu a {

       

        padding: 8px 10px !important;
    }


    /* PORTALS */

    .portal-cards {

        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;
    }


    .portal-card {

        padding: 15px;

        border-radius: 12px;
    }


    .portal-icon {

        width: 40px;

        height: 40px;

        font-size: 18px;
    }


    .portal-card h4 {

        font-size: 14px;

        margin-top: 12px;
    }


    .portal-card p {

        font-size: 9px;

        line-height: 1.5;
    }


    .portal-links {

        margin-top: 12px;
    }


    .portal-links a {

        font-size: 10px;

        padding: 9px 0;
    }


    /* ONBOARDING */

    .onboarding-grid {

        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;
    }


    .onboarding-card {

        padding: 15px;

        border-radius: 11px;
    }


    .onboarding-card h5 {

        font-size: 13px;

        margin: 10px 0;
    }


    .onboarding-card a {

        font-size: 9px;

        padding: 8px 0;
    }


    /* MEMBERSHIP */

    .membership-grid {

        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;
    }


    .membership-card {

        min-height: 110px;

        padding: 15px;

        border-radius: 11px;
    }


    .membership-card h5 {

        font-size: 13px;

        margin: 9px 0 4px;
    }


    .membership-card span {

        font-size: 9px;
    }


    /* FEATURE CARD */

    .large-feature-card {

        min-height: 110px;

        padding: 15px;

        grid-template-columns:
            42px
            minmax(0,1fr)
            18px;

        gap: 10px;

        border-radius: 12px;
    }


    .feature-icon {

        width: 40px;

        height: 40px;

        font-size: 17px;

        border-radius: 10px;
    }


    .large-feature-card h4 {

        font-size: 14px;
    }


    .large-feature-card p {

        font-size: 8px;

        line-height: 1.5;
    }


    /* QUICK ACCESS */

    .quick-access {

        display: none !important;
    }


    /* FOOTER */

    .menu-footer {

        display: none !important;
    }


    /* REMOVE HORIZONTAL OVERFLOW */

    .category-content,
    .main-navigation,
    .content-card,
    .programme-box,
    .portal-card,
    .membership-card {

        max-width: 100%;

        overflow-wrap: break-word;
    }

}






/* =========================================================
   EXTRA SMALL MOBILE
   360px and below
========================================================= */

@media (max-width: 360px) {

    .menu-top {
        height: 58px;
    }


    .menu-odlc-logo img {
        width: 92px;
    }


    .main-navigation {
        padding:
            18px
            12px
            25px !important;
    }


    .category-content {
        padding:
            18px
            12px
            30px !important;
    }


    .menu-heading {
        font-size: 15px !important;
    }


    .main-nav-item {
        min-height: 54px;

        grid-template-columns:
            32px
            minmax(0,1fr)
            16px;

        gap: 7px;
    }


    .nav-icon {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }


    .nav-info strong {
        font-size: 12px !important;
    }


    .nav-info small {
        font-size: 7px !important;
    }


    .category-header h2 {
        font-size: 19px !important;
    }


    .category-header p {
        font-size: 8px !important;
    }


    .content-card h5 {
        font-size: 12px !important;
    }


    .content-card p {
        font-size: 7px !important;
    }


    .programme-box h4 {
        font-size: 13px !important;
    }


    .programme-box p,
    .programme-box a {
        font-size: 8px !important;
    }



}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .main-nav-item:hover {

        transform: none;

        padding-left: 5px;
    }


    .content-card:hover {

        transform: none;
    }


    .membership-card:hover {

        transform: none;
    }


    .programme-box a,
    .portal-links a,
    .ecce-submenu a {

        min-height: 40px;

        display: flex;

        align-items: center;
    }

}


/* =========================================================
   PREVENT BODY SCROLL WHEN MENU IS OPEN
========================================================= */

body.menu-open {

    overflow: hidden;
}


/* =========================================================
   SAFETY - NO HORIZONTAL SCROLL
========================================================= */

html,
body {

    max-width: 100%;

    overflow-x: hidden;
}


.mega-menu,
.menu-layout,
.main-navigation,
.category-content,
.quick-access {

    max-width: 100%;
}


/* =========================================================
   MOBILE BACK BUTTON
========================================================= */

/* =========================================================
   MOBILE BACK BUTTON - MODERN POSITION
========================================================= */

@media (max-width: 767px) {

    .mobile-back-btn {
        position: relative !important;

        top: auto !important;
        left: auto !important;

        display: inline-flex !important;
        align-items: center !important;

        gap: 6px !important;

        margin-top: 8px !important;
        margin-bottom: 12px !important;

        padding: 0 !important;

        background: transparent !important;
        border: none !important;
        box-shadow: none !important;

        color: #ffffff !important;

        font-size: 14px !important;
        font-weight: 500 !important;

        line-height: 1 !important;

        cursor: pointer !important;
    }

    .mobile-back-btn i {
        color: #00a8ff !important;

        font-size: 16px !important;

        margin-right: 2px !important;
    }

    .mobile-back-btn:hover,
    .mobile-back-btn:focus,
    .mobile-back-btn:active {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;

        color: #ffffff !important;
    }

     /* Hide category name beside Back button */
    .mobile-back-btn + span,
    .mobile-back-btn ~ span {
        display: none !important;
    }
}

/* =========================================================
   MOBILE DRILL-DOWN — FULL SCREEN PANEL
========================================================= */

@media (max-width: 767px) {

    .category-content {
        position: fixed !important;

        top: 68px !important;
        left: 0 !important;

        width: 100% !important;

        min-height: 0 !important;
        max-height: calc(100dvh - 58px) !important;

        background: #083C7C !important;

        z-index: 1000 !important;

        padding-bottom: 10px !important;

        overflow-y: auto !important;

        transform: translateX(100%);

        transition: transform .3s ease;

    }


    /* OPEN CATEGORY */

    .category-content.mobile-open {

        transform: translateX(0);

    }


    /* Hide every panel */

    .category-panel {

        display: none !important;

        width: 100% !important;

    }


    /* Show selected panel */

    .category-panel.active {

        display: block !important;

    }


    /* LEFT MENU */

    .main-navigation {

        width: 100% !important;

    }


    /* Hide quick access */

    .quick-access {

        display: none !important;

    }


    /* Back button */

    .mobile-back-btn {

        display: inline-flex !important;

        position: relative !important;

        top: auto !important;

        left: auto !important;

        margin: 0 !important;

        padding: 0 !important;

    }


    /* Category title */

    .mobile-panel-title {

        display: inline-block !important;

        margin-left: 10px !important;

        color: #ffffff !important;

        font-size: 14px !important;

        font-weight: 600 !important;

    }


    

}

/* =========================================================
   MAIN MENU CLOSE BUTTON
========================================================= */

#megaMenu > .menu-top {
    position: relative !important;
}


#megaMenu > .menu-top .close-menu {

    position: absolute !important;

    top: 50% !important;
    right: 20px !important;

    left: auto !important;

    transform: translateY(-50%) !important;

    width: 42px !important;
    height: 42px !important;

    padding: 0 !important;
    margin: 0 !important;

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

    background: transparent !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    color: #ffffff !important;

    z-index: 999999 !important;

    cursor: pointer !important;
}


#megaMenu > .menu-top .close-menu i {

    color: #ffffff !important;

    font-size: 22px !important;

    line-height: 1 !important;

    transition: .25s ease;
}


#megaMenu > .menu-top .close-menu:hover i {

    color: #00a8ff !important;

    transform: rotate(90deg);
}

/* =========================================================
   CATEGORY PANEL CLOSE BUTTON
========================================================= */

.mobile-panel-close {

    position: absolute !important;

    top: 15px !important;
    right: 15px !important;

    width: 36px !important;
    height: 36px !important;

    padding: 0 !important;
    margin: 0 !important;

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

    background: transparent !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    color: #ffffff !important;

    z-index: 9999 !important;
}


.mobile-panel-close i {

    color: #ffffff !important;

    font-size: 18px !important;
}




/* =========================================================
   MOBILE FONT SIZE ONLY
========================================================= */

@media (max-width: 767px) {

    /* Main menu heading */
    .menu-heading {
        font-size: 17px !important;
    }

    /* Main menu title */
    .nav-info strong {
        font-size: 16px !important;
    }

    /* Main menu description */
    .nav-info small {
        font-size: 13px !important;
    }

    /* Category label */
    .category-header span {
        font-size: 12px !important;
    }

    /* Category heading */
    .category-header h2 {
        font-size: 21px !important;
    }

    /* Category paragraph */
    .category-header p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    /* Content card heading */
    .content-card h5 {
        font-size: 15px !important;
    }

    /* Content card paragraph */
    .content-card p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    /* Programme heading */
    .programme-box h4 {
        font-size: 15px !important;
    }

    /* Programme paragraph */
    .programme-box p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    /* Programme links */
    .programme-box a {
        font-size: 12px !important;
    }

    /* Portal heading */
    .portal-card h4 {
        font-size: 15px !important;
    }

    /* Portal paragraph */
    .portal-card p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    /* Portal links */
    .portal-links a {
        font-size: 12px !important;
    }

    /* Quick Access heading */
    .quick-access .menu-heading {
        font-size: 16px !important;
    }

    /* Quick Access items */
    .quick-item span {
        font-size: 12px !important;
    }

    /* Help section */
    .help-box > span {
        font-size: 12px !important;
    }

    .help-box h4 {
        font-size: 14px !important;
    }

    .help-box > a {
        font-size: 12px !important;
    }

}


/* =========================================================
   ODLC LOGO - RESPONSIVE SIZE
========================================================= */

.mega-menu .menu-odlc-logo img {
    width: 180px !important;
    height: auto !important;

    object-fit: contain !important;

    display: block !important;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .mega-menu .menu-odlc-logo img {
        width: 220px !important;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .mega-menu .menu-odlc-logo img {
        width: 160px !important;
    }

}


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

@media (min-width: 768px) and (max-width: 991px) {

    .mega-menu .menu-odlc-logo img {
        width: 150px !important;
    }

}


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

@media (max-width: 767px) {

    .mega-menu .menu-odlc-logo img {
        width: 125px !important;
    }

}


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

@media (max-width: 480px) {

    .mega-menu .menu-odlc-logo img {
        width: 120px !important;
    }

}

/* =========================================================
   HIDE LARGE DECORATIVE ICONS ON MOBILE
========================================================= */

@media (max-width: 767px) {

    .category-large-icon {
        display: none !important;
    }

}

@media (max-width: 767px) {

    .category-panel .category-large-icon {
        display: none !important;
    }

    .category-header {
        margin-bottom: 15px !important;
    }

}

/* =========================================================
   MOBILE MENU HEADER
   LOGO LEFT + CLOSE RIGHT
========================================================= */

@media (max-width: 767px) {

    .mega-menu .menu-top {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        justify-content: flex-start !important;

        width: 100% !important;
        height: 88px !important;

        padding: 0 20px !important;
    }


    /* LOGO LEFT */

    .mega-menu .menu-odlc-logo {
        position: static !important;

        transform: none !important;

        margin: 0 !important;

        display: block !important;
    }


    .mega-menu .menu-odlc-logo img {
        width: 200px !important;
        height: auto !important;

        display: block !important;
    }


    /* CLOSE RIGHT */

    .mega-menu .close-menu {
        position: absolute !important;

        top: 50% !important;
        right: 18px !important;

        left: auto !important;

        transform: translateY(-50%) !important;

        width: 42px !important;
        height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

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

        background: transparent !important;

        border: none !important;
        outline: none !important;
        box-shadow: none !important;

        z-index: 9999 !important;
    }

}

/* =========================================================
   HEADER - LOGO LEFT / HAMBURGER RIGHT
========================================================= */

.header,
.site-header,
.main-header {
    position: relative !important;
}


/* Hamburger button */

#openMenu,
.open-menu,
.menu-toggle {
    position: absolute !important;

    right: 50px !important;
    left: auto !important;

    top: 60% !important;
    transform: translateY(-50%) !important;

    margin: 0 !important;
}

/* =========================================================
   BACK BUTTON — CLEAN MODERN POSITION
   Hide category name beside Back
========================================================= */

.mobile-back-btn {
    display: inline-flex !important;
    align-items: center !important;

    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;

    width: fit-content !important;

    margin: 14px 0 18px 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    line-height: 1 !important;

    cursor: pointer !important;
}


/* Back arrow */

.mobile-back-btn i {
    color: #00a8ff !important;

    font-size: 17px !important;

    margin-right: 7px !important;
}


/* Remove browser button styling */

.mobile-back-btn:hover,
.mobile-back-btn:focus,
.mobile-back-btn:focus-visible,
.mobile-back-btn:active {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    color: #ffffff !important;
}


/* =========================================================
   HIDE "PROGRAMMES / GOVERNANCE / PORTALS..." BESIDE BACK
========================================================= */

/* Common category title next to Back */

.mobile-back-btn + span {
    display: none !important;
}


/* If category title is inside a wrapper */

.mobile-back-btn + strong,
.mobile-back-btn + b {
    display: none !important;
}


/* Any current-category element */

.current-category,
.mobile-category-title,
.mobile-panel-title strong,
.mobile-panel-title span {
    display: none !important;
}

/* =========================================================
   HOME PANEL
   SAME STRUCTURE AS GOVERNANCE
========================================================= */

.home-panel {
    width: 100%;
    min-height: 100%;
    padding: 0;
    position: relative;
}


/* =========================================================
   HOME HEADER
========================================================= */

.home-menu-header {
    margin: 0 0 28px 0;
    padding: 0;
}


/* Small heading */

.home-menu-header span {
    display: block;

    color: #00a8ff;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: .5px;

    margin-bottom: 8px;
}


/* Main heading */

.home-menu-header h2 {
    margin: 0 0 8px 0;

    color: #ffffff;

    font-size: 28px;
    font-weight: 600;

    line-height: 1.15;
}


/* Description */

.home-menu-header p {
    margin: 0;

    color: #8aa4ca;

    font-size: 12px;

    line-height: 1.5;

    max-width: 700px;
}


/* =========================================================
   HOME CARDS
========================================================= */

.home-highlight-grid {

    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 13px;

    margin: 0;
}


/* =========================================================
   HOME CARD
========================================================= */

.home-highlight-card {

    width: 100%;

    min-height: 95px;

    padding: 16px;

    border-radius: 12px;

    border: 1px solid rgba(0,168,255,.35);

    background: rgba(255,255,255,.035);

    display: grid;

    grid-template-columns:
        45px
        1fr
        25px;

    align-items: center;

    column-gap: 14px;

    text-decoration: none;

    box-sizing: border-box;

    transition: .25s ease;
}


/* =========================================================
   HOME CARD ICON
========================================================= */

.home-card-icon {

    width: 42px;

    height: 42px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0,168,255,.10);

    color: #00a8ff;

    font-size: 18px;
}


/* =========================================================
   CARD HEADING
========================================================= */

.home-highlight-card h4 {

    margin: 0 0 5px 0;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.25;
    
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.home-highlight-card p {

    margin: 0;

    color: #8aa4ca;

    font-size: 10px;

    line-height: 1.45;
}


/* =========================================================
   CARD ARROW
========================================================= */

.home-arrow {

    color: #ffd000;

    font-size: 18px;

    text-align: center;

    transition: .25s ease;
}


/* =========================================================
   HOVER
========================================================= */

.home-highlight-card:hover {

    border-color: #00a8ff;

    background: rgba(0,168,255,.06);

}


.home-highlight-card:hover .home-arrow {

    transform: translateX(4px);

}


/* =========================================================
   HOME BOTTOM CONTENT
========================================================= */

.home-menu-bottom {

    margin-top: 10px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 5px;
}


.home-menu-bottom strong {

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.3;
}


.home-menu-bottom p {

    margin: 0;

    color: #ffffff;

    font-size: 11px;

    line-height: 1.5;
}


.home-menu-bottom a {

    margin-top: 5px;

    color: #008cff;

    font-size: 12px;

    text-decoration: none;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .home-menu-header span {
        font-size: 13px;
    }

    .home-menu-header h2 {
        font-size: 29px;
    }

    .home-menu-header p {
        font-size: 12px;
    }

    .home-highlight-card {
        min-height: 96px;
        padding: 17px;
    }

    .home-highlight-card h4 {
        font-size: 16px;
    }

    .home-highlight-card p {
        font-size: 11px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1399px) {

    .home-menu-header {
        margin-bottom: 25px;
    }

    .home-menu-header h2 {
        font-size: 26px;
    }

    .home-menu-header p {
        font-size: 11px;
    }

    .home-highlight-card {
        min-height: 90px;

        grid-template-columns:
            42px
            1fr
            22px;

        padding: 14px;
    }

    .home-card-icon {
        width: 40px;
        height: 40px;
    }

    .home-highlight-card h4 {
        font-size: 14px;
    }

    .home-highlight-card p {
        font-size: 9px;
    }

}


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

@media (min-width: 768px) and (max-width: 991px) {

    .home-menu-header {
        margin-bottom: 22px;
    }

    .home-menu-header span {
        font-size: 12px;
    }

    .home-menu-header h2 {
        font-size: 24px;
    }

    .home-menu-header p {
        font-size: 10px;
    }

    .home-highlight-grid {
        gap: 11px;
    }

    .home-highlight-card {
        min-height: 88px;

        padding: 13px;

        grid-template-columns:
            40px
            1fr
            20px;

        gap: 10px;
    }

    .home-card-icon {
        width: 38px;
        height: 38px;

        font-size: 16px;
    }

    .home-highlight-card h4 {
        font-size: 13px;
    }

    .home-highlight-card p {
        font-size: 9px;
    }

}


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

@media (max-width: 767px) {

    .home-panel {
        width: 100%;
        min-height: 100%;
    }


    .home-menu-header {
        margin-bottom: 20px;
    }


    .home-menu-header span {
        font-size: 12px;
        margin-bottom: 7px;
    }


    .home-menu-header h2 {
        font-size: 23px;
        line-height: 1.2;
        margin-bottom: 7px;
    }


    .home-menu-header p {
        font-size: 11px;
        line-height: 1.5;
    }


    .home-highlight-grid {

        display: flex;

        flex-direction: column;

        gap: 11px;

        width: 100%;
    }


    .home-highlight-card {

        width: 100%;

        min-height: 90px;

        padding: 13px;

        grid-template-columns:
            40px
            1fr
            20px;

        gap: 10px;
    }


    .home-card-icon {

        width: 38px;

        height: 38px;

        font-size: 16px;
    }


    .home-highlight-card h4 {

        font-size: 14px;

        margin-bottom: 4px;
    }


    .home-highlight-card p {

        font-size: 10px;

        line-height: 1.45;
    }


    .home-arrow {

        font-size: 16px;
    }


    .home-menu-bottom {

        margin-top: 10px;
    }


    .home-menu-bottom strong {
        font-size: 13px;
    }


    .home-menu-bottom p {
        font-size: 10px;
    }


    .home-menu-bottom a {
        font-size: 11px;
    }

}


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

@media (max-width: 480px) {

    .home-menu-header {
        margin-bottom: 18px;
    }


    .home-menu-header span {
        font-size: 11px;
    }


    .home-menu-header h2 {
        font-size: 21px;
    }


    .home-menu-header p {
        font-size: 10px;
    }


    .home-highlight-grid {
        gap: 10px;
    }


    .home-highlight-card {

        min-height: 86px;

        padding: 12px;

        grid-template-columns:
            38px
            1fr
            18px;

        gap: 9px;
    }


    .home-card-icon {

        width: 36px;

        height: 36px;

        font-size: 15px;
    }


    .home-highlight-card h4 {
        font-size: 13px;
    }


    .home-highlight-card p {
        font-size: 9px;
    }


    .home-arrow {
        font-size: 15px;
    }

}


/* =========================================================
   MOBILE - HIDE MAIN MENU WHEN CATEGORY PANEL IS OPEN
========================================================= */

@media (max-width: 767px) {

    .menu-layout:has(.category-content.mobile-open)
    .main-navigation {
        display: none !important;
    }

}

@media (max-width: 767px) {

    .category-content.mobile-open {
        width: 100% !important;
        height: calc(100vh - 58px) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        padding-bottom: 30px !important;
    }

    .category-content.mobile-open .main-navigation {
        display: none !important;
    }

}

/* =========================================================
   TOPBAR DROPDOWN
========================================================= */

.top-menu {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 35px;
    width: 100%;
}

.top-menu > li {
    position: relative;
    margin: 0;
    padding: 0;
}

.top-menu > li > a {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 0;
    transition: .3s ease;
}

.top-menu > li > a:hover {
    color: #ffc107;
}


/* ARROW */

.top-menu > li > a i {
    font-size: 10px;
    transition: transform .3s ease;
}


/* DROPDOWN */

.top-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);

    min-width: 245px;

    background: #fff;

    list-style: none;
    margin: 0;
    padding: 10px 0;

    border-radius: 6px;

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

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: all .25s ease;

    z-index: 999999;
}


/* SHOW DROPDOWN */

.top-dropdown:hover .top-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}


/* DROPDOWN ITEMS */

.top-dropdown-menu li {
    width: 100%;
    margin: 0;
    padding: 0;
}

.top-dropdown-menu li a {
    display: block;

    width: 100%;

    padding: 11px 18px;

    color: #17203d;

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;

    transition: all .2s ease;
}

.top-dropdown-menu li a:hover {
    background: #083C7C;
    color: #fff;
}


/* ARROW ROTATION */

.top-dropdown:hover > a i {
    transform: rotate(180deg);
}


/* APPLY DROPDOWN */

.apply-dropdown {
    min-width: 220px;
}

/* =========================================================
   TOPBAR DROPDOWN - FINAL FIX
========================================================= */

.top-menu .top-dropdown {
    position: relative !important;
}

.top-menu .top-dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: -100% !important;
    transform: translateX(-50%) !important;

    display: block !important;

    width: 280px !important;
    min-width: 280px !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 8px 0 !important;

    list-style: none !important;

    background: #ffffff !important;
    border-radius: 0 0 6px 6px !important;

    box-shadow: 0 10px 25px rgba(0,0,0,.20) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    z-index: 999999 !important;
}


/* SHOW DROPDOWN */

.top-menu .top-dropdown:hover .top-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* DROPDOWN ITEMS */

.top-menu .top-dropdown-menu li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* DROPDOWN TEXT */

.top-menu .top-dropdown-menu li a {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    padding: 12px 20px !important;

    background: #ffffff !important;
    color: #083C7C !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    box-sizing: border-box !important;
}


/* HOVER */

.top-menu .top-dropdown-menu li a:hover {
    background: #083C7C !important;
    color: #ffc107 !important;
}


/* ARROW */

.top-menu .top-dropdown > a i {
    font-size: 10px;
    transition: transform .25s ease;
}

.top-menu .top-dropdown:hover > a i {
    transform: rotate(180deg);
}



/* =========================================================
   TOPBAR - FULL RESPONSIVE
========================================================= */

.topbar {
    width: 100%;
    min-height: 46px;
    height: auto !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
}

.topbar .container-fluid {
    width: 100%;
}

.topbar .row {
    width: 100%;
    margin: 0 !important;
}

.topbar .top-menu {
    width: 100% !important;

    display: flex !important;
    flex-wrap: wrap !important;

    justify-content: center !important;
    align-items: center !important;

    gap: 0 32px !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.topbar .top-menu > li {
    display: block !important;
    position: relative !important;

    flex: 0 0 auto !important;

    visibility: visible !important;
    opacity: 1 !important;
}

.topbar .top-menu > li > a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    padding: 14px 0 !important;
}

.topbar .top-menu > li > a:hover {
    color: #ffc107 !important;
}


/* =========================================================
   DROPDOWN
========================================================= */

.top-dropdown {
    position: relative !important;
}

.top-dropdown-menu {
    position: absolute !important;

    top: 100% !important;
    left: 50% !important;

    transform: translateX(-50%) translateY(8px) !important;

    width: 240px !important;

    margin: 0 !important;
    padding: 8px 0 !important;

    background: #ffffff !important;

    list-style: none !important;

    border-radius: 0 0 8px 8px !important;

    box-shadow: 0 10px 30px rgba(0,0,0,.20) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    z-index: 999999 !important;

    transition: all .25s ease !important;
}

.top-dropdown-menu li {
    display: block !important;
    width: 100% !important;
}

.top-dropdown-menu li a {
    display: block !important;

    width: 100% !important;

    padding: 11px 18px !important;

    color: #083C7C !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    white-space: normal !important;

    text-decoration: none !important;
}

.top-dropdown-menu li a:hover {
    background: #f1f5f9 !important;
    color: #083C7C !important;
}


/* DESKTOP HOVER */

@media (min-width: 992px) {

    .top-dropdown:hover .top-dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translateX(-50%) translateY(0) !important;
    }

}


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

@media (max-width: 991px) {

    .topbar {
        min-height: 46px !important;
        height: auto !important;

        padding: 0 15px !important;
    }

    .topbar .top-menu {
        gap: 0 22px !important;
    }

    .topbar .top-menu > li {
        display: block !important;
        visibility: visible !important;
    }

    .topbar .top-menu > li > a {
        font-size: 12px !important;
        padding: 10px 0 !important;
    }

}


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

@media (max-width: 767px) {

    .topbar {
        min-height: auto !important;
        height: auto !important;

        padding: 4px 8px !important;

        overflow: visible !important;
    }

    .topbar .container-fluid,
    .topbar .row {
        width: 100% !important;
    }

    .topbar .top-menu {
        width: 100% !important;

        display: flex !important;
        flex-wrap: wrap !important;

        justify-content: center !important;
        align-items: center !important;

        column-gap: 16px !important;
        row-gap: 0 !important;
    }

    .topbar .top-menu > li {
        display: block !important;

        flex: 0 0 auto !important;

        visibility: visible !important;
        opacity: 1 !important;
    }

    .topbar .top-menu > li > a {
        font-size: 11px !important;

        padding: 7px 0 !important;

        white-space: nowrap !important;
    }

}


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

@media (max-width: 575px) {

    .topbar {
        padding: 4px 6px !important;
    }

    .topbar .top-menu {
        column-gap: 12px !important;
        row-gap: 0 !important;
    }

    .topbar .top-menu > li > a {
        font-size: 10px !important;
        padding: 6px 0 !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .topbar .top-menu {
        column-gap: 9px !important;
    }

    .topbar .top-menu > li > a {
        font-size: 9.5px !important;
    }

}

/*==================================================
 HEADER TOP
==================================================*/

.header-top-row{
    width:min(1400px, calc(100% - 40px));
    margin:auto;
    padding:18px 0 0 0;
    align-items:center;
}

/* Logo */

.logo-area img.logo{
    max-width:290px;
    width:100%;
    height:auto;
}

/*==================================================
 DIGITAL INTEGRATION BOX
==================================================*/

.digital-integration{
    background:#F8FBFF;
    border:1px solid #C8DAF4;
    border-radius:20px;
    padding:20px 24px;
    height:100%;
}

.digital-heading-row{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:18px;
}

.digital-heading-row h6{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:28px;
    font-weight:700;
    color:#083C7C;
    letter-spacing:1px;
    white-space:nowrap;
}

.digital-heading-row span{
    flex:1;
    height:2px;
    background:#BFD2EC;
}

.digital-services{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:18px;
}

.digital-service img{
    max-width:520px;
    width:100%;
    height:auto;
    object-fit:contain;
}

.digital-integration-text{
    margin:0;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    color:#415A77;
    line-height:1.7;
}

/*==================================================
 MENU BUTTON
==================================================*/

.menu-btn{
    width:68px;
    height:68px;
    border:none;
    border-radius:50%;
    background:#083C7C;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 25px rgba(8,60,124,.18);
}

.menu-btn i{
    font-size:32px;
}

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

@media (max-width:991px){

   

    .logo-area{
        text-align:center;
    }

    .logo-area img.logo{
        max-width:240px;
    }

    .digital-heading-row h6{
        font-size:22px;
    }

    .digital-service img{
        max-width:420px;
    }

    .menu-btn{
        width:58px;
        height:58px;
    }
}

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

@media (max-width:767px){

    .header-top-row{
        width:min(1400px, calc(100% - 20px));
    }

    .logo-area{
        text-align:center;
        margin-bottom:10px;
    }

    .logo-area img.logo{
        max-width:220px;
    }

    .digital-integration{
        padding:16px;
        border-radius:16px;
    }

    .digital-heading-row{
        flex-direction:column;
        gap:10px;
    }

    .digital-heading-row span{
        width:80px;
        flex:none;
    }

    .digital-heading-row h6{
        font-size:20px;
        text-align:center;
    }

    .digital-service img{
        max-width:100%;
    }

    .digital-integration-text{
        font-size:14px;
        text-align:center;
    }

    .menu-btn{
        width:52px;
        height:52px;
        margin-left:auto;
    }

    .menu-btn i{
        font-size:28px;
    }
}


/* =========================================================
   ECCE SUBMENU - CLICK TO OPEN
   ========================================================= */

.ecce-menu-item {
    position: relative !important;
    width: 100% !important;
}


/* ECCE BUTTON */

.ecce-submenu-toggle {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    cursor: pointer !important;

    background: transparent !important;
    border: none !important;

    color: inherit !important;

    text-align: left !important;
}


/* ECCE ARROW */

.ecce-submenu-toggle i {
    transition: transform 0.3s ease !important;
}


/* SUBMENU CLOSED */

.ecce-submenu {
    display: none !important;

    width: 100% !important;

    margin-top: 8px !important;
}


/* SUBMENU OPEN */

.ecce-menu-item.active .ecce-submenu {
    display: block !important;
}


/* ROTATE ARROW */

.ecce-menu-item.active
.ecce-submenu-toggle i {
    transform: rotate(90deg) !important;
}


/* SUBMENU LINKS */

.ecce-submenu a {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    padding: 10px 14px !important;

    color: #083C7C !important;

    text-decoration: none !important;

    border-radius: 8px !important;

    transition: all 0.25s ease !important;
}


.ecce-submenu a:hover {
    background: #eef5fc !important;

    color: #083C7C !important;
}

/* =========================================================
   MOBILE MEGA MENU — ENABLE LINK CLICKING
========================================================= */

.mega-menu a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.mega-menu .main-nav-item,
.mega-menu .content-card,
.mega-menu .programme-box a,
.mega-menu .portal-links a,
.mega-menu .onboarding-card a,
.mega-menu .membership-grid a,
.mega-menu .quick-item,
.mega-menu .help-box > a {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}


/* Mobile specifically */

@media (max-width: 767px) {

    .mega-menu {
        pointer-events: auto !important;
    }

    .mega-menu * {
        pointer-events: auto;
    }

    .mega-menu a {
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent;
    }

}

/* =========================================================
   FINAL MOBILE MENU FIX
========================================================= */

@media (max-width: 767px) {

    /* Category area starts outside screen */
    .category-content {
        position: fixed !important;
        top: 68px !important;
        left: 0 !important;

        width: 100% !important;

        height: calc(100dvh - 68px) !important;
        max-height: calc(100dvh - 68px) !important;

        background: #083C7C !important;

        z-index: 99998 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        transform: translateX(100%) !important;

        transition:
            transform .3s ease !important;

        pointer-events: none !important;
    }


    /* OPEN CATEGORY */

    .category-content.mobile-open {

        transform: translateX(0) !important;

        pointer-events: auto !important;
    }


    /* CATEGORY PANELS */

    .category-panel {
        display: none !important;

        width: 100% !important;

        min-height: 100% !important;

        box-sizing: border-box !important;
    }


    /* ACTIVE CATEGORY */

    .category-panel.active {

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        pointer-events: auto !important;
    }


    /* LEFT MENU BUTTONS */

    .main-navigation {
        position: relative !important;

        z-index: 9999 !important;
    }


    .category-btn {

        position: relative !important;

        z-index: 10000 !important;

        width: 100% !important;

        pointer-events: auto !important;

        cursor: pointer !important;

        touch-action: manipulation !important;
    }


    /* LINKS INSIDE CATEGORY */

    .category-panel a {

        position: relative !important;

        z-index: 10001 !important;

        pointer-events: auto !important;

        cursor: pointer !important;

        touch-action: manipulation !important;
    }


    /* GOVERNANCE CARDS */

    .content-card {

        pointer-events: auto !important;

        position: relative !important;

        z-index: 10002 !important;
    }


    /* PROGRAMME LINKS */

    .programme-box a {

        pointer-events: auto !important;

        position: relative !important;

        z-index: 10002 !important;
    }


    /* ECCE LINKS */

    .ecce-submenu a {

        pointer-events: auto !important;

        position: relative !important;

        z-index: 10003 !important;
    }

}

/* =========================================================
   MEMBERSHIP - WHITE TEXT LIKE PORTALS
========================================================= */

.membership-grid > a {
    color: #ffffff !important;
    text-decoration: none !important;
}


/* ICON */

.membership-grid > a > i:first-child {
    color: #00a8ff !important;
}


/* TITLE */

.membership-grid > a > h5 {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}


/* DESCRIPTION */

.membership-grid > a > span {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin-top: 5px !important;
}


/* ARROW */

.membership-grid > a > i:last-child {
    color: #ffffff !important;
    font-size: 14px !important;
}


/* HOVER */

.membership-grid > a:hover {
    color: #ffffff !important;
    background: transparent !important;
}

.membership-grid > a:hover h5,
.membership-grid > a:hover span {
    color: #ffffff !important;
}

.membership-grid > a:hover > i:last-child {
    color: #ffffff !important;
    transform: translateX(3px) !important;
}


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

@media (max-width: 575px) {

    .membership-grid > a > h5 {
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    .membership-grid > a > span {
        color: #ffffff !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .membership-grid > a > i:first-child {
        color: #00a8ff !important;
    }

    .membership-grid > a > i:last-child {
        color: #ffffff !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .membership-grid > a > h5 {
        font-size: 15px !important;
    }

    .membership-grid > a > span {
        font-size: 12px !important;
    }
}

/* =========================================================
   RECOGNITION - WHITE TEXT
========================================================= */

#recognition > a {
    color: #ffffff !important;
    text-decoration: none !important;
    background: transparent !important;
}


/* ICON */

#recognition > a .feature-icon {
    color: #00a8ff !important;
}


/* TITLE */

#recognition > a h4 {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}


/* DESCRIPTION */

#recognition > a p {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin: 8px 0 0 !important;
}


/* ARROW */

#recognition > a > i:last-child {
    color: #ffffff !important;
    font-size: 15px !important;
}


/* HOVER */

#recognition > a:hover {
    color: #ffffff !important;
    background: transparent !important;
}

#recognition > a:hover h4,
#recognition > a:hover p {
    color: #ffffff !important;
}

#recognition > a:hover > i:last-child {
    color: #ffffff !important;
    transform: translateX(4px) !important;
}


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

@media (max-width: 575px) {

    #recognition > a h4 {
        color: #ffffff !important;
        font-size: 17px !important;
    }

    #recognition > a p {
        color: #ffffff !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    #recognition > a > i:last-child {
        color: #ffffff !important;
    }
}


/* VERY SMALL MOBILE */

@media (max-width: 360px) {

    #recognition > a h4 {
        font-size: 16px !important;
    }

    #recognition > a p {
        font-size: 12px !important;
    }
}

/* =========================================================
   RECOGNITION - MOBILE FEATURE LINK
========================================================= */

.recognition-feature-link {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr) 25px !important;

    align-items: center !important;

    gap: 16px !important;

    padding: 16px 0 !important;

    background: transparent !important;

    color: #ffffff !important;
    text-decoration: none !important;

    box-sizing: border-box !important;
}


/* ICON */

.recognition-feature-icon {
    width: 60px !important;
    height: 60px !important;

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

    border-radius: 15px !important;

    background: rgba(54, 130, 255, 0.25) !important;

    color: #00a8ff !important;

    flex-shrink: 0 !important;
}

.recognition-feature-icon i {
    color: #00a8ff !important;
    font-size: 25px !important;
}


/* TEXT */

.recognition-feature-content {
    min-width: 0 !important;
}

.recognition-feature-content h4 {
    margin: 0 0 7px !important;

    color: #ffffff !important;

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: 18px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;
}

.recognition-feature-content p {
    margin: 0 !important;

    color: #ffffff !important;

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: 14px !important;
    font-weight: 400 !important;

    line-height: 1.55 !important;

    text-align: left !important;
}


/* ARROW */

.recognition-feature-arrow {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 25px !important;
}

.recognition-feature-arrow i {
    color: #ffffff !important;

    font-size: 19px !important;

    transition: transform .3s ease !important;
}


/* HOVER */

.recognition-feature-link:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

.recognition-feature-link:hover
.recognition-feature-arrow i {
    transform: translateX(5px) !important;
}


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

@media (max-width: 767px) {

    .recognition-feature-link {
        grid-template-columns: 58px minmax(0, 1fr) 20px !important;
        gap: 14px !important;

        padding: 14px 0 !important;
    }

    .recognition-feature-icon {
        width: 58px !important;
        height: 58px !important;

        border-radius: 14px !important;
    }

    .recognition-feature-icon i {
        font-size: 23px !important;
    }

    .recognition-feature-content h4 {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }

    .recognition-feature-content p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .recognition-feature-arrow i {
        font-size: 18px !important;
    }
}


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

@media (max-width: 480px) {

    .recognition-feature-link {
        grid-template-columns: 52px minmax(0, 1fr) 18px !important;
        gap: 12px !important;
    }

    .recognition-feature-icon {
        width: 52px !important;
        height: 52px !important;

        border-radius: 13px !important;
    }

    .recognition-feature-icon i {
        font-size: 21px !important;
    }

    .recognition-feature-content h4 {
        font-size: 16px !important;
    }

    .recognition-feature-content p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .recognition-feature-arrow i {
        font-size: 16px !important;
    }
}

/* =========================================================
   TABLET MEGA MENU FIX
   768px - 991px
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    /* =========================================
       FULL MENU
    ========================================= */

    .mega-menu {
        width: 100% !important;
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }


    /* =========================================
       MENU TOP
    ========================================= */

    .menu-top {
        height: 82px !important;
        padding: 0 25px !important;
    }

    .menu-odlc-logo img {
        width: 145px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .close-menu {
        width: 44px !important;
        height: 44px !important;
        right: 20px !important;
    }

    .close-menu i {
        font-size: 20px !important;
    }


    /* =========================================
       MAIN MENU LAYOUT
       LEFT + CONTENT ONLY
    ========================================= */

    .menu-layout {
        min-height: calc(100vh - 82px) !important;

        display: grid !important;

        grid-template-columns: 30% 70% !important;

        width: 100% !important;

        position: relative !important;
    }


    /* =========================================
       LEFT NAVIGATION
    ========================================= */

    .main-navigation {
        width: 100% !important;

        padding: 28px 18px !important;

        border-right: 1px solid rgba(255,255,255,.14) !important;

        box-sizing: border-box !important;
    }


    .menu-heading {
        font-size: 15px !important;
        margin-bottom: 20px !important;
    }

    .menu-heading::after {
        width: 30px !important;
        height: 2px !important;
        bottom: -7px !important;
    }


    /* NAV ITEMS */

    .main-nav-item {
        width: 100% !important;

        min-height: 62px !important;

        grid-template-columns: 38px minmax(0,1fr) 15px !important;

        gap: 9px !important;

        padding: 7px 3px !important;

        box-sizing: border-box !important;
    }


    .main-nav-item:hover,
    .main-nav-item.active {
        padding-left: 6px !important;
    }


    /* NAV ICON */

    .nav-icon {
        width: 34px !important;
        height: 34px !important;

        border-radius: 50% !important;

        font-size: 13px !important;
    }


    /* NAV TEXT */

    .nav-info {
        min-width: 0 !important;
    }

    .nav-info strong {
        font-size: 12px !important;
        line-height: 1.25 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    .nav-info small {
        display: block !important;

        font-size: 8px !important;
        line-height: 1.3 !important;

        margin-top: 3px !important;

        color: #9db1d0 !important;

        white-space: normal !important;
    }


    .main-nav-item > i {
        font-size: 11px !important;
    }


    /* =========================================
       CATEGORY CONTENT
    ========================================= */

    .category-content {
        width: 100% !important;

        min-width: 0 !important;

        padding: 28px 28px !important;

        border-right: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* =========================================
       CATEGORY HEADER
    ========================================= */

    .category-header {
        width: 100% !important;

        margin-bottom: 22px !important;
    }

    .category-header h2 {
        font-size: 32px !important;

        line-height: 1.15 !important;

        margin: 6px 0 !important;
    }

    .category-header span {
        font-size: 10px !important;
    }

    .category-header p {
        max-width: 500px !important;

        font-size: 12px !important;

        line-height: 1.6 !important;
    }

    .category-large-icon {
        font-size: 55px !important;
    }


    /* =========================================
       HOME CONTENT
    ========================================= */

    .home-menu-header h2 {
        font-size: 32px !important;
        line-height: 1.15 !important;
    }

    .home-menu-header p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }


    /* =========================================
       HOME CARDS
    ========================================= */

    .home-highlight-grid {
        grid-template-columns: 1fr 1fr !important;

        gap: 12px !important;
    }

    .home-highlight-card {
        min-height: 115px !important;

        padding: 14px !important;

        grid-template-columns: 38px minmax(0,1fr) 15px !important;

        gap: 10px !important;
    }

    .home-card-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }

    .home-highlight-card h4 {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    .home-highlight-card p {
        font-size: 10px !important;
        line-height: 1.5 !important;
    }


    /* =========================================
       CONTENT CARDS
    ========================================= */

    .content-cards {
        grid-template-columns: 1fr !important;

        gap: 12px !important;
    }

    .content-card {
        width: 100% !important;

        min-height: 82px !important;

        padding: 14px !important;

        grid-template-columns: 42px minmax(0,1fr) 18px !important;

        gap: 12px !important;
    }

    .content-card h5 {
        font-size: 14px !important;
    }

    .content-card p {
        font-size: 10px !important;
        line-height: 1.5 !important;
    }


    /* =========================================
       PROGRAMMES
    ========================================= */

    .programme-cards {
        grid-template-columns: 1fr 1fr !important;

        gap: 14px !important;
    }

    .programme-box {
        min-height: 250px !important;

        padding: 16px !important;
    }

    .programme-box h4 {
        font-size: 15px !important;
    }

    .programme-box p {
        font-size: 10px !important;
    }

    .programme-box a {
        font-size: 10px !important;

        line-height: 1.45 !important;

        white-space: normal !important;
    }


    /* =========================================
       PORTALS
    ========================================= */

    .portal-cards {
        grid-template-columns: 1fr 1fr !important;

        gap: 14px !important;
    }

    .portal-card {
        padding: 17px !important;
    }

    .portal-card h4 {
        font-size: 15px !important;
    }

    .portal-card p {
        font-size: 10px !important;
    }

    .portal-links a {
        font-size: 10px !important;
    }


    /* =========================================
       ONBOARDING
    ========================================= */

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

        gap: 12px !important;
    }

    .onboarding-card {
        padding: 15px !important;
    }

    .onboarding-card h5 {
        font-size: 13px !important;
    }

    .onboarding-card a {
        font-size: 10px !important;
    }


    /* =========================================
       RECOGNITION
    ========================================= */

    .recognition-feature-link {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            58px
            minmax(0,1fr)
            22px !important;

        align-items: center !important;

        gap: 15px !important;

        padding: 16px !important;

        box-sizing: border-box !important;

        border: 1px solid rgba(0,168,255,.25) !important;

        border-radius: 12px !important;

        background: rgba(255,255,255,.025) !important;
    }

    .recognition-feature-icon {
        width: 58px !important;
        height: 58px !important;
    }

    .recognition-feature-content h4 {
        font-size: 17px !important;
    }

    .recognition-feature-content p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }


    /* =========================================
       MEMBERSHIP
    ========================================= */

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

        gap: 15px !important;
    }

    .membership-grid a {
        color: #ffffff !important;
    }


    /* =========================================
       HIDE QUICK ACCESS ON TABLET
    ========================================= */

    .quick-access {
        display: none !important;
    }


    /* =========================================
       BACK BUTTON
    ========================================= */

    .mobile-back-btn {
        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        margin-bottom: 20px !important;

        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;

        color: #ffffff !important;

        font-size: 13px !important;

        font-weight: 600 !important;
    }

    .mobile-back-btn i {
        color: #00a8ff !important;

        font-size: 16px !important;
    }


    /* =========================================
       ECCE SUBMENU
    ========================================= */

    .ecce-submenu {
        width: 100% !important;

        margin-left: 0 !important;
    }

    .ecce-submenu a {
        font-size: 11px !important;
    }

}

/* =========================================================
   MOBILE FULL SCREEN MENU
   REFERENCE STYLE
========================================================= */

@media (max-width: 767px) {

    /* Main menu */
    .mega-menu {
        width: 100% !important;
        max-width: 100% !important;
        background: #084684 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .mega-menu .menu-top {
        position: relative !important;
        width: 100% !important;
        /* min-height: 105px !important; */

        padding: 15px !important;

        display: flex !important;
        align-items: flex-start !important;

        background: #084684 !important;

        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;

        box-sizing: border-box !important;
    }

    /* ODLC LOGO */
    .mega-menu .menu-odlc-logo {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mega-menu .menu-odlc-logo img {
        display: block !important;

        width: 225px !important;
        max-width: 225px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* -----------------------------------------------------
       DIGILOCKER + GOVERNMENT LOGO
       WHITE ROUNDED PANEL
    ----------------------------------------------------- */

    .mega-menu .mobile-government-logo {

        position: absolute !important;

        left: 24px !important;
        right: 24px !important;

        top: 102px !important;

        width: calc(100% - 48px) !important;
        max-width: none !important;

        /* height: 130px !important; */

        /* padding: 15px 25px !important; */

        object-fit: contain !important;

        /* background: #ffffff !important; */

        border-radius: 22px !important;

        box-sizing: border-box !important;

        display: block !important;

        z-index: 20 !important;

        box-shadow: 0 8px 25px rgba(0,0,0,.12) !important;
    }

    /* CLOSE BUTTON */
    .mega-menu .close-menu {

        position: absolute !important;

        top: 28px !important;
        right: 28px !important;

        width: 42px !important;
        height: 42px !important;

        padding: 0 !important;
        margin: 0 !important;

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

        background: transparent !important;
        border: none !important;

        color: #ffffff !important;

        z-index: 30 !important;
    }

    .mega-menu .close-menu i {
        font-size: 27px !important;
        color: #ffffff !important;
    }


    /* -----------------------------------------------------
       MENU CONTENT
    ----------------------------------------------------- */

    .mega-menu .container-fluid {
        padding-left: 28px !important;
        padding-right: 28px !important;

        margin-top: 150px !important;
    }

    .mega-menu .menu-layout {
        width: 100% !important;
    }

    /* -----------------------------------------------------
       EXPLORE ODLC
    ----------------------------------------------------- */

    .mega-menu .main-navigation {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;

        border: none !important;
    }

    .mega-menu .main-navigation > h3,
    .mega-menu .main-navigation > .navigation-title {
        margin-top: 0 !important;
    }

}


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

@media (max-width: 480px) {

    .mega-menu .menu-top {
        /* min-height: 115px !important; */
        /* padding: 20px 24px 15px !important; */
    }

    .mega-menu .menu-odlc-logo img {
        width: 285px !important;
        /* max-width: 385px !important; */
    }

    .mega-menu .close-menu {
        top: 24px !important;
        right: 22px !important;
    }

    .mega-menu .close-menu i {
        font-size: 25px !important;
    }

    .mega-menu .mobile-government-logo {
        left: 20px !important;
        right: 20px !important;
        top: 92px !important;

        width: calc(100% - 40px) !important;
        /* height: 65px !important; */

        padding: 0 !important;
        border-radius: 300px !important;
    }

    .mega-menu .container-fluid {
        padding-left: 24px !important;
        padding-right: 24px !important;
        margin-top: 95px !important;
    }
}

/* =========================================================
   MOBILE MENU HEADER - CENTER ODLC LOGO
========================================================= */

@media (max-width: 767px) {

    .mobile-menu-header {
        position: relative !important;
        width: 100% !important;
        height: 110px !important;
        display: block !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* ODLC LOGO - EXACT CENTER */
    .mobile-menu-header .mobile-menu-logo {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;

        width: 190px !important;
        max-width: 65% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
    }

    /* CLOSE BUTTON */
    .mobile-menu-header .mobile-menu-close {
        position: absolute !important;
        top: 50% !important;
        right: 18px !important;
        transform: translateY(-50%) !important;

        margin: 0 !important;
        z-index: 20 !important;
    }
}


/* SMALL MOBILE */
@media (max-width: 480px) {

    .mobile-menu-header {
        height: 100px !important;
    }

    .mobile-menu-header .mobile-menu-logo {
        width: 170px !important;
        max-width: 68% !important;
    }

    .mobile-menu-header .mobile-menu-close {
        right: 14px !important;
    }
}


/* =========================================================
   GOVERNMENT LOGO
   MOBILE VIEW ONLY
========================================================= */

/* Hide on tablets and desktop */
.mobile-government-logo {
    display: none !important;
}

/* Show ONLY on mobile */
@media (max-width: 767px) {

    .mobile-government-logo {
        display: block !important;
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
        margin: 12px auto 0 !important;
        object-fit: contain !important;
    }

}

/* =========================================================
   MOBILE GOVERNMENT LOGO
   SHOW ONLY ON NORMAL MOBILE PHONES
   HIDE ON TABLETS, DESKTOPS & FOLDABLES
========================================================= */

/* Hidden by default */
.mobile-government-logo {
    display: none !important;
}

/* Show only normal mobile screens */
@media screen and (max-width: 480px) {

    .mobile-government-logo {
        display: block !important;
    }

}

/* Hide on foldable / wider mobile devices */
@media screen and (min-width: 481px) {

    .mobile-government-logo {
        display: none !important;
    }

}









/* ================================================================
   NEED HELP PANEL - CALL US AND EMAIL US, ONE AFTER THE OTHER,
   EACH ON A SINGLE LINE
   Appended to css/includes/header.css. Nothing above this point
   is modified.

   What it was, measured on the live page at 1440px:

     .help-box      332px wide, 20px padding each side
     .help-details  grid-template-columns: 1fr 1fr, gap 10px, 290px

     but the two tracks came out UNEVEN:

       track 1  116.4px   Call Us   "+91 11 4304 2200"
       track 2  164.1px   Email Us  "info@odlccouncil.org"

     1fr 1fr does not mean equal here. A grid track has an
     automatic minimum of min-content, and "info@odlccouncil.org"
     is one long unbreakable word, so track 2 was stretched to fit
     it and track 1 was squeezed to whatever was left - 116px.
     After the icon and the 7px gap that leaves about 95px of text
     space, and the phone number does not fit in 95px, so it broke
     across lines while the email sat on one.

   The fix is to stop forcing them side by side. Stacked, each item
   gets the full 290px, which is more than enough for both strings,
   so they read as two clean lines - one after the other - which is
   what the panel is for. white-space:nowrap on the value stops a
   long number or address from ever re-wrapping at a narrow width,
   and min-width:0 on the row lets the text ellipsis rather than
   push the icon out if a value is ever longer than these two.

   .help-box and .help-details appear in header.php only - grepped
   across every PHP file - so nothing in the footer is affected by
   this, even though css/includes/footer.css also carries some
   .help-details rules inside a 767px media query. Those are dead
   rules and are left untouched.

   The panel itself only renders at 1200px and above, so this is
   the desktop NEED HELP box in the header.

   The label text, the two values, the icons, the colours and the
   CONTACT ODLC button above are all untouched.
   ================================================================ */

.help-details {

    /* one after the other, not side by side */
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.help-details > div {
    min-width: 0 !important;
}

.help-details strong {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* ================================================================
   HEADER - DIGILOCKER + GOVERNMENT AUTHORIZED LOGO SPACING
   ================================================================
   Option B: the logo pair is held a fixed 32px from the menu button at
   every viewport width, with all leftover space falling to the left.

   WHY THE GAP COULD NOT BE HELD FROM THE GRID

   The menu button is not in the grid at all:

       .hamburger-btn { position: absolute; right: 50px; top: 65px }

   anchored to .main-header, which is position:relative. Its left edge is
   therefore headerRight - 50 - 58, whatever the Bootstrap columns do.
   Measured at 1920px, the button sits at x=1797 while its own col-lg-2
   ends at x=1628.

   With the logo pair left in normal flow inside col-lg-6, the measured
   gap swung from 74px at 992px to 390px at 1920px. No margin on the
   wrapper can hold that steady, because the gap is created by the dead
   width of a column, and that width scales with the viewport.

   HOW IT IS FIXED

   The pair is taken out of flow and anchored to the same header edge as
   the button:

       right: 140px  =  50 (button inset) + 58 (button) + 32 (the gap)

   padding:0 matters as much as right: the .row parent hands the wrapper
   a 12px Bootstrap gutter on both sides, which pushed the artwork 12px
   inside its own box and made the measured gap 44px instead of 32px.

   These rules carry !important because header.css already uses it on
   this element, and footer.css also sets .government-logos (a header
   class, which it should not) and loads after header.css.
   ================================================================ */

@media (min-width: 992px) {

  .government-logos {
    position: absolute !important;
    right: 140px !important;
    top: 65px !important;
    transform: translateY(-50%) !important;

    /* no longer needs to fill a grid column */
    width: auto !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  .government-logos img {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

}


/* ============================================================================
   TOP BAR PROGRAMMES  -  NESTED QUALIFICATION SUB-DROPDOWNS
   ----------------------------------------------------------------------------
   Three of the five items in the PROGRAMMES menu each cover three
   qualifications, so each now opens a flyout to the right:

     Skill & Vocational Education   Certificate 6mo / Diploma 1yr / Adv Dip 2yr
     Early Childhood Care & Edu     Level 1 6mo / Level 2 1yr / Level 3 2yr
     Paramedical Education          Certificate 6mo / Diploma 1yr / Adv Dip 2yr

   No existing selector is redefined. Everything is on new odlct- classes, and
   where a flyout link has to look different from a top-level one it is done by
   adding a class to raise specificity rather than by editing the old rule:

     .top-menu .top-dropdown-menu li a      (0,2,2)
     .top-menu .top-dropdown-menu li a.odlct-sub-link   (0,3,2)  <- wins

   The old rules carry !important, so a plain new class would lose. That is why
   the nested links repeat display, padding and colour with !important on the
   higher-specificity selector instead.

   Durations are taken from the programme titles already used in the PROGRAM
   CARDS section at index.php: "6 Months", "1 Year", "2 Years". They are the
   only new words on screen.

   Hover and focus-within both open it, so the keyboard can reach it. On a
   touch screen there is no hover, so the flyout will not open by tapping - the
   parent link still navigates to that family's first qualification, which is
   why the parent href was kept rather than replaced with javascript:void(0).
   ============================================================================ */

/* ---------- the APPLY menu is wider than the others ----------
   280px was not enough for the two long labels once each one also carries a
   caret on the same line:

     label 240px  +  gap 12px  +  caret 11px  =  263px of content needed
     263px        +  row padding 20px each side =  303px of dropdown

   Set to 320px, which leaves 17px of slack so the caret does not sit jammed
   against the edge. Scoped to .apply-dropdown with a qualified selector, (0,3,0)
   against .top-menu .top-dropdown-menu at (0,2,0) - the PROGRAMMES menu keeps its
   own width, because its labels are shorter and it has no such problem.

   Only at 992px and up. Below that the top bar itself is already tight and its
   items wrap onto a second row, so the menu falls back to the shared 280px and
   the two long labels drop their caret to the right edge of a narrower row
   instead - still one line, just less padding around it. */
@media (min-width:992px){
    .top-menu .top-dropdown-menu.apply-dropdown{
        width:320px !important;
    }
}

/* Below 992px the 320px cannot be used: the top bar is already tight and the
   APPLY dropdown hangs off the right edge at 768px even at the shared 280px.
   Widening it there would push it further off-screen, so instead the two long
   labels are allowed to wrap. The caret stays put either way - it is a flex item
   with align-items:center, so on a two-line label it sits centred against the
   two lines rather than dropping below them.

   This overrides white-space:nowrap on
   .top-menu .top-dropdown-menu li a at (0,3,1) against (0,2,2). Without it the
   ALC and RCO rows overflowed their own row by 16px and 30px at 768px. */
@media (max-width:991px){
    .top-menu .top-dropdown-menu .odlct-has-sub > a{
        white-space:normal !important;
    }
}

.odlct-has-sub{position:relative}

/* A row that owns a flyout puts its label and its caret on ONE line.

   This was display:block with the caret floated right, and it fell apart on the
   two long APPLY labels. Measured at a 280px dropdown with 12px/20px row
   padding, so 240px of content:

     "Accredited Learning Centre (ALC)"   text 240px
     "Regional Coordination Office (RCO)" text 240px

   Both labels measure exactly 240px - the whole content box. float:right needs
   11px for the caret plus 14px of margin, so it had nowhere to go sideways and
   dropped to the bottom of the line box: caret top landed at 34px inside a 46px
   row, which is what read as an arrow on a second line. Flex fixes it properly -
   the label and caret are two items on one row, both centred on the same
   baseline, and margin-left:auto parks the caret at the right edge whether or not
   the label fills the row.

   align-items:center rather than baseline because the row also carries a
   background on hover; centring keeps the caret visually centred in the row
   whichever label length is in it.

   Selector is qualified to (0,3,1) to beat the base
   .top-menu .top-dropdown-menu li a at (0,2,2), which sets display and
   white-space with !important. The base also sets white-space:nowrap, which is
   kept deliberately: it is what holds each label to a single line, and the
   dropdown is widened below so a nowrap label plus a caret genuinely fit. */
.top-menu .top-dropdown-menu .odlct-has-sub > a{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
}

/* the chevron on the parent row */
.top-menu .top-dropdown-menu .odlct-has-sub > a .odlct-caret{
    display:inline-block !important;
    flex:0 0 auto !important;   /* never squeezed when the label is long */
    margin-left:auto !important; /* parks it at the right edge, same line */
    float:none !important;       /* was the cause of the second-line look */
    font-size:11px !important;
    line-height:1 !important;
    color:#8aa4ca !important;
    transition:transform .18s ease, color .18s ease !important;
    pointer-events:none;
}
.odlct-has-sub:hover > a .odlct-caret,
.odlct-has-sub:focus-within > a .odlct-caret{
    transform:translateX(3px) !important;
    color:#ffc107 !important;
}

/* ---------- the flyout ---------- */
.odlct-submenu{
    position:absolute !important;
    top:0 !important;
    left:100% !important;
    right:auto !important;
    bottom:auto !important;

    /* Bootstrap's reboot gives every ul a 2rem left indent and a 1rem bottom
       margin. Without this reset the flyout sits 32px too far right and drags
       an extra 16px of height with it. */
    list-style:none !important;
    margin:0 !important;
    padding:8px 0 !important;

    min-width:236px !important;
    width:236px !important;
    max-height:none !important;

    background:#ffffff !important;
    border-radius:6px !important;
    box-shadow:0 14px 34px rgba(8,60,124,.18) !important;

    /* the top-level menu is a flyout already, so this one is hidden by default
       and revealed on hover or keyboard focus */
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(-8px) !important;
    transition:opacity .18s ease, transform .18s ease, visibility .18s !important;

    z-index:60 !important;
}

.odlct-has-sub:hover > .odlct-submenu,
.odlct-has-sub:focus-within > .odlct-submenu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(0) !important;
}

/* ---------- a row inside the flyout ----------
   flex so the qualification sits left and its duration sits right, which is
   what makes three levels scannable in a 236px column. */
.odlct-submenu li{
    display:block !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
}

.top-menu .top-dropdown-menu li a.odlct-sub-link{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;

    width:100% !important;
    height:auto !important;
    padding:10px 18px !important;

    background:#ffffff !important;
    color:#17203d !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:13px !important;
    font-weight:500 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-decoration:none !important;
    text-align:left !important;
    white-space:nowrap !important;

    transition:background .18s ease, color .18s ease !important;
}

.top-menu .top-dropdown-menu li a.odlct-sub-link:hover,
.top-menu .top-dropdown-menu li a.odlct-sub-link:focus-visible{
    background:#083C7C !important;
    color:#ffffff !important;
    outline:none !important;
}

.odlct-sub-name{
    flex:0 1 auto !important;
    font-weight:600 !important;
}

.odlct-sub-dur{
    flex:0 0 auto !important;
    font-size:11px !important;
    font-weight:500 !important;
    color:#7a8ba4 !important;
    white-space:nowrap !important;
}

.top-menu .top-dropdown-menu li a.odlct-sub-link:hover .odlct-sub-dur,
.top-menu .top-dropdown-menu li a.odlct-sub-link:focus-visible .odlct-sub-dur{
    color:#ffc107 !important;
}

/* ---------- narrow screens: the flyout cannot sit beside the menu ----------
   Measured overflow of a 236px flyout past the right edge of the viewport:
       480px viewport   56px past
       390px viewport  134px past
       320px viewport  196px past
   The PROGRAMMES menu is already 280px wide, so at 320px there is simply no
   room beside it. Below 600px the flyout therefore stops being a flyout and
   opens INLINE inside the same 280px column instead, pushing the remaining
   items down. It keeps the hover and focus-within behaviour, gains a tinted
   panel and a left rule so it reads as nested, and the caret turns down. */
@media (max-width:599px){
    .odlct-submenu{
        position:static !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;

        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        transform:none !important;
        box-shadow:none !important;
        border-radius:0 !important;

        background:#f4f8fd !important;
        border-left:3px solid #083C7C !important;
        padding:5px 0 !important;
    }

    .odlct-has-sub:hover > .odlct-submenu,
    .odlct-has-sub:focus-within > .odlct-submenu{
        transform:none !important;
    }

    /* indented, and a step down in size, so it reads as a child of the row above */
    .top-menu .top-dropdown-menu li a.odlct-sub-link{
        padding:9px 14px 9px 24px !important;
        font-size:12.5px !important;
        gap:10px !important;
    }

    .odlct-has-sub > a .odlct-caret{
        transform:rotate(90deg) !important;
    }
    .odlct-has-sub:hover > a .odlct-caret,
    .odlct-has-sub:focus-within > a .odlct-caret{
        transform:rotate(270deg) !important;
    }
}

/* ---------- menus that sit in the right half open leftwards ----------
   APPLY sits much further right than PROGRAMMES in the top bar, so a
   right-hand flyout runs off the edge. Measured overflow of a 236px flyout
   past the right edge of the viewport, with the APPLY flyout opening right:

     900px viewport    24px past
     820px viewport    64px past
     768px viewport    90px past
     700px viewport   111px past
     600px viewport   161px past

   At 600px the APPLY menu itself measures 253 to 533, so a flyout placed on
   its left spans 289 to 525 and sits comfortably inside the viewport. Same
   geometry holds all the way up, because the menu only moves further right.

   The class sits on the two APPLY families only. PROGRAMMES keeps opening to
   the right, where there is room.

   NOT fixed here: below 480px the APPLY MENU already overflows by 63px on its
   own, with no flyout involved - at 360px it measures 143 to 423 against a
   360px viewport. That predates this work and is a positioning decision for
   the top bar, so it is left alone rather than changed silently. */
.odlct-has-sub.odlct-flip-left > .odlct-submenu{
    left:auto !important;
    right:100% !important;
    transform:translateX(8px) !important;
}

.odlct-has-sub.odlct-flip-left:hover > .odlct-submenu,
.odlct-has-sub.odlct-flip-left:focus-within > .odlct-submenu{
    transform:translateX(0) !important;
}

/* the caret points the way the panel will travel */
.odlct-has-sub.odlct-flip-left > a .odlct-caret{
    transform:rotate(180deg) !important;
}
.odlct-has-sub.odlct-flip-left:hover > a .odlct-caret,
.odlct-has-sub.odlct-flip-left:focus-within > a .odlct-caret{
    transform:rotate(180deg) translateX(3px) !important;
}

/* ============================================================================
   SAMPLE CERTIFICATES PANEL  -  THE MIDDLE COLUMN OF THE MEGA MENU
   ----------------------------------------------------------------------------
   Replaces the previous .home-menu-header + .home-highlight-grid block, which
   was four cards reading "Meaningful Learning Recognition", "Learning into
   Opportunity", "Our Programmes" and "Recognition & Certification". All four
   were plain <div> elements with a gold arrow and no href, so they looked
   clickable and were not. Those classes have been removed from the markup and
   their old rules are left in this file, unused.

   SCOPE. Only the middle column. The left EXPLORE column and the right
   QUICK ACCESS column are not touched by anything in this block - no selector
   here reaches .main-navigation, .quick-item or .category-panel's siblings.

   EVERY selector is new and prefixed odlcw-. No existing rule is redefined.

   !important is load-bearing. css/global-typography.css is linked after
   header.css and carries bare-element !important rules on h2 and p at six
   breakpoints, so the title and the lead need it to hold their size at all.
   The media queries at the foot repeat it for the same reason.

   Two deliberate differences from the client's mockup, at their request:
   the circular arrow button is gone, and there is no level line on the cards.
   The whole card is the link and carries the hover and focus treatment, so
   nothing is lost by dropping the arrow.
   ============================================================================ */

.odlcw-panel{
    width:100%;
    padding:0;
    box-sizing:border-box;
}

/* ---------- heading + image ----------
   One track by default. :has() adds the second track only while an .odlcw-art
   is actually present in the markup, and the script in header.php deletes that
   block when images/odlc-student.png is missing. So a file that has not been
   added yet leaves the copy full width with no gap and no broken-image icon,
   and no code has to change when it is added. */
.odlcw-head{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:center;
    margin:0 0 clamp(16px, 2.2vw, 22px);
}
.odlcw-head:has(> .odlcw-art){
    grid-template-columns:minmax(0,1fr);
    gap:clamp(14px, 2vw, 20px);
    align-items:start;
}

.odlcw-copy{min-width:0}

.odlcw-eyebrow{
    display:block !important;
    color:#4FC3F7 !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    letter-spacing:3px !important;
    text-transform:uppercase !important;
    text-align:left !important;
    margin:0 0 14px !important;
}

/* Two explicit blocks, one per line, so the heading is always exactly two
   lines and never three. Each phrase has to fit its own line on its own, which
   is the whole constraint here: the live middle panel is only 588px wide at a
   1600px viewport, while the mockup it was copied from had a 684px column.
   "OPEN AND DISTANCE" needs roughly 340px at 30px, so the copy column is never
   allowed below that - hence the image moving above the copy instead of
   competing for width until 1500px (see the media queries at the foot).

   2.6vw lets the type use the full panel width while the image sits on its own
   row, and it is capped at 30px so the phrase always fits. */
.odlcw-title{
    margin:0 0 14px !important;
    color:#ffffff !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:clamp(23px, 2.6vw, 30px) !important;
    font-weight:800 !important;
    line-height:1.14 !important;
    letter-spacing:-.6px !important;
    text-align:left !important;
    text-transform:none !important;
}
.odlcw-title span{
    display:block !important;
    margin:0 !important;
}
.odlcw-title-a{color:#ffffff !important}
.odlcw-title-b{color:#38BDF8 !important}

/* ---------- the lead paragraph ----------
   No width cap. The line breaks are explicit <br>s in the markup instead, which
   is the only way to hold three lines while letting the measure stay whatever
   the column allows.

   Two earlier attempts, both wrong:

   23.5em (about 47 characters) forced three lines on wrap alone, but produced an
   obviously artificial narrow column - it broke mid-word at "technology-/driven",
   left a stub third line, and stopped well short of where the heading above
   ends, so the block read as three unrelated strips.

   33em (about 66 characters) is a comfortable reading measure and fixed the
   mid-word break, but it only bites where the column is genuinely wide. Below
   1500px the copy runs the full 450-524px panel and the paragraph came out as
   two lines with 69-79 characters on each - too long to read comfortably.

   With the breaks fixed in the markup, the paragraph is three lines from 480px
   to 2560px with clean word boundaries, and the measure is simply the column.
   Verified by reading the rendered line boxes at every width.
*/
.odlcw-lead{
    margin:0 !important;
    color:#C9DCF2 !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:clamp(13px, 0.88vw, 14px) !important;
    font-weight:400 !important;
    line-height:1.6 !important;
    text-align:left !important;
}

/* "technology-driven" carries a hyphen, so the browser is free to break after
   it and leave "technology-" dangling at the end of a line with "driven"
   starting the next. That is what made the paragraph look broken. Keeping the
   compound whole moves it to the next line instead and gives a clean rag. It is
   the only hyphenated compound in the copy, and the word is short enough to sit
   on a line by itself at every width down to 360px. */
.odlcw-lead .odlcw-nb{
    white-space:nowrap;
}

/* ---------- the one image ----------
   No icon badges - the client is supplying a single image of their own.

   The box takes the image's own proportions rather than a fixed portrait ratio.
   That is deliberate: the design has the bottom of the image tucking under the
   first card, and with a fixed ratio the painted image would sit inside the box
   with empty space under it, so the overlap would land on nothing. Sizing to the
   real image means the overlap always falls on actual picture.

   object-fit:contain and max-height are only a safety valve, for a very tall
   image - below 300px tall nothing is letterboxed at all. Transparent PNGs sit
   on the panel background. */
.odlcw-art{
    position:relative;
    order:-1;
    justify-self:center;
    width:clamp(172px, 38%, 248px);
    min-width:0;
}
.odlcw-art img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:300px !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    margin:0 !important;
}

/* ---------- the three feature cards ---------- */
.odlcw-cards{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:clamp(10px, 1.3vw, 14px);
}

.odlcw-card{
    display:grid;
    grid-template-columns:clamp(54px, 5.4vw, 76px) minmax(0,1fr);
    align-items:center;
    gap:clamp(12px, 1.7vw, 18px);
    padding:clamp(14px, 1.7vw, 18px) clamp(16px, 1.9vw, 20px);
    border-radius:18px;
    text-decoration:none !important;
    box-shadow:0 12px 28px rgba(6,32,72,.34);
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.odlcw-card:hover{
    transform:translateY(-2px);
    filter:brightness(1.06);
    box-shadow:0 16px 34px rgba(6,32,72,.42);
}
.odlcw-card:focus-visible{
    outline:3px solid #FFC107;
    outline-offset:3px;
}

.odlcw-card-1{background:linear-gradient(104deg,#1C6AD6 0%,#2E93E4 58%,#38A8EA 100%)}
.odlcw-card-2{background:linear-gradient(104deg,#1A63CE 0%,#2B84E0 56%,#3E9BE6 100%)}
.odlcw-card-3{background:linear-gradient(104deg,#3A6BDD 0%,#5A63E8 52%,#7B6CF2 100%)}

.odlcw-ico{
    width:clamp(54px, 5.4vw, 76px);
    height:clamp(54px, 5.4vw, 76px);
    border-radius:16px;
    display:flex !important;
    align-items:center;
    justify-content:center;
    background:#F4F9FF;
    font-size:clamp(23px, 2.6vw, 34px) !important;
    flex:0 0 auto;
}
.odlcw-card-1 .odlcw-ico{color:#2F80ED !important}
.odlcw-card-2 .odlcw-ico{color:#1FA85A !important}
.odlcw-card-3 .odlcw-ico{color:#8B5CF6 !important}

.odlcw-txt{min-width:0}

.odlcw-txt strong{
    display:block !important;
    margin:0 0 5px !important;
    color:#ffffff !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:clamp(15px, 1.35vw, 19px) !important;
    font-weight:700 !important;
    line-height:1.25 !important;
    letter-spacing:-.2px !important;
}

.odlcw-txt > span{
    display:block !important;
    color:#DCEBFB !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:clamp(12.5px, 1.05vw, 13.5px) !important;
    font-weight:400 !important;
    line-height:1.5 !important;
}

/* ---------- wide panels ----------
   1500px and up: image beside the copy, its bottom tucked under the first card,
   as in the mockup.

   THE OVERLAP. A negative margin on the image box cannot do this reliably. That
   trick only works when the image is the taller of the two columns: the row
   height is then (image - margin), and the overlap comes out at exactly
   (margin - the head's own bottom margin). The moment the copy is taller - and
   it is, by 30-40px, because of the three-line lead - the copy drives the row,
   the trick collapses, and the measured overlap fell to 11px instead of 72px.
   It also lands on empty box whenever the image is shorter than the box.

   So the image is taken out of flow instead: absolutely positioned at the top
   right, and the copy reserves the width with padding-right. The row is now
   driven by the copy alone, the image is free to hang below it, and the cards -
   which carry z-index:2 - paint over it. No dependence on which column is
   taller, and nothing escapes the panel, so the menu's own overflow cannot clip
   it.

   The box is a fixed height with the image contained and anchored to the bottom,
   so the strip that goes behind the card is always real picture. At 1600px the
   box is 246px and the copy ends at 196px, so 50px of a 212px image - about a
   quarter of it - sits behind the card, which is the proportion in the mockup.

   THE THRESHOLD is measured, not guessed. Below 1500px the middle panel is only
   352-544px wide. A two-column split leaves the copy 288-348px - under the
   ~340px that "OPEN AND DISTANCE" needs at 30px, so the heading broke to three
   lines across the whole 1300-1499 band.

   The title drops to 26px in this layout, and that is what pays for the bigger
   image. The copy width is the binding constraint - it has to clear the widest
   phrase - so every pixel given to the image has to come off the title. At
   1500px the copy measures 310px against 294px needed, and at 1600px it is
   337px, so there is real margin rather than a knife edge. Below 1500px the
   image keeps its own row instead, so the heading has the entire panel to sit
   on and the image is bigger still, not smaller.

   THE IMAGE SHARE. The image takes 35% of the panel, not the 39% it took
   before. 39% left the copy 314-341px, which is narrow enough that the
   paragraph wrapped mid-word and read as broken; at 35% the copy is 340-367px
   and the same text falls on clean word boundaries. The image is still 206-220px,
   larger than the 188px it was two revisions back.
*/
@media (min-width:1500px){
    .odlcw-head:has(> .odlcw-art){
        grid-template-columns:minmax(0,1fr);
        position:relative;
        padding-right:calc(clamp(180px, 35%, 220px) + clamp(16px, 1.9vw, 22px));
        align-items:start;
    }
    .odlcw-art{
        position:absolute;
        top:0;
        right:0;
        width:clamp(180px, 35%, 220px);
        height:clamp(226px, 22vw, 254px);
        order:0;
        justify-self:auto;
        margin:0;
        z-index:1;
    }
    .odlcw-art img{
        height:100% !important;
        max-height:none !important;
        object-fit:contain !important;
        object-position:center top !important;
    }
    .odlcw-title{font-size:clamp(23px, 1.75vw, 26px) !important}
}

/* The !important on the type sizes is load-bearing:
   css/global-typography.css is linked after this file and carries bare-element
   !important rules on h2 and p at six breakpoints, which is what pinned the
   heading at 35px before these were added. */
@media (max-width:991px){
    .odlcw-title{font-size:clamp(22px, 3.2vw, 27px) !important}
    .odlcw-lead{font-size:clamp(13px, 1.6vw, 14px) !important}
}

@media (max-width:767px){
    .odlcw-eyebrow{font-size:11px !important;letter-spacing:2.2px !important}
    .odlcw-title{font-size:clamp(20px, 5.2vw, 25px) !important}
}


/* ============================================================================
   HEADER GUTTERS MATCH THE SECTIONS BELOW IT
   ----------------------------------------------------------------------------
   Measured before this change, left and right gutter in px from the document
   edge to the content edge:

     1920   1600   1440   1366   1200   1024    768    390
     262    102     57     54     47     30     23     15   <- the sections
      32     32     32     32     32     32     27     18   <- top bar
      12     12     12     12     12     12     12     12   <- main header

   Eight sections already agree, because they were all normalised onto one rule:

     width: 92%;  max-width: 1380px;  margin-inline: auto;  padding-inline: 0
     @media (max-width:1199px)  width: 94%
     @media (max-width:767px)   width: 90%
     @media (max-width:480px)   width: 92%

   The header used Bootstrap .container-fluid instead, which is 100% wide with a
   12px gutter, so the logo sat 90px further left than the content under it at
   1600px and the two never lined up at any width. The same four-step ladder is
   applied to the header's two containers, so "12" becomes "102" and the logo
   lines up with the section content.

   THE TWO ABSOLUTE POSITIONS HAVE TO FOLLOW.

   Neither the menu button nor the government logo pair is in the grid:

     #openMenu, .open-menu, .menu-toggle   position:absolute; right:50px
     .government-logos                      position:absolute; right:140px

   Their right values are insets from the header's own right edge, chosen to hold
   a fixed 32px between the button and the logo pair. Narrowing the container
   moves the logo but not these two, so they would end up hanging outside the
   content edge. Each inset is rewritten as the gutter plus its original offset,
   with the gutter computed from the same numbers as the container:

     max(4%, (100% - 1380px) / 2)      the container is min(92%, 1380px)
     3%                                94% below 1199px
     5%                                90% below 767px
     4%                                92% below 480px

   100% inside right: is the containing block, which is .main-header - it has
   padding:12px 0, so no horizontal padding and its padding box is its full
   width. That keeps the arithmetic exact and avoids vw, which would be out by
   the width of the scrollbar.

   THE LOGO IS CENTRED, so it has to be un-centred.

   .logo-area is text-align:center inside col-lg-4, and .logo-area is also
   display:flex. Left alone, narrowing the container slides the logo further
   right with the column instead of holding it against the content edge. Both
   are reset to flex-start.

   Only the header is touched here. The sections' own four outliers -
   who-we-are, apply-pathways, social and choose-odlc - are left as they are, and
   so is the full-screen mega menu overlay.
   ============================================================================ */

.main-header > .container-fluid,
.topbar > .container-fluid{
    width:92% !important;
    max-width:1380px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* Above 1200px the gutter stops being a simple percentage, because the
   container reaches its 1380px cap and centres itself.

   THIS MUST COME BEFORE THE MEDIA QUERIES. All four of these rules are (0,1,0)
   with !important, so they are separated by source order alone. With the base
   rule last it silently beat the max-width:1199px rule and every inset below
   1200px used 4% instead of 3% - measured at 1100px the button sat 94px from the
   edge where 83px was correct. */
#openMenu,
.open-menu,
.menu-toggle{
    right:calc(max(4%, (100% - 1380px) / 2)) !important;
}

.government-logos{
    right:calc(max(4%, (100% - 1380px) / 2) + 90px) !important;
}

@media (max-width:1199px){
    .main-header > .container-fluid,
    .topbar > .container-fluid{
        width:94% !important;
    }
    #openMenu,
    .open-menu,
    .menu-toggle{
        right:calc(3% ) !important;
    }
    .government-logos{
        right:calc(3% + 90px) !important;
    }
}

@media (max-width:767px){
    .main-header > .container-fluid,
    .topbar > .container-fluid{
        width:90% !important;
    }
    #openMenu,
    .open-menu,
    .menu-toggle{
        right:calc(5% ) !important;
    }
    .government-logos{
        right:calc(5% + 90px) !important;
    }
}

@media (max-width:480px){
    .main-header > .container-fluid,
    .topbar > .container-fluid{
        width:92% !important;
    }
    #openMenu,
    .open-menu,
    .menu-toggle{
        right:calc(4% ) !important;
    }
    .government-logos{
        right:calc(4% + 90px) !important;
    }
}

/* hold the logo against the content edge instead of centring it in its column */
.main-header .logo-area{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;
}

/* ============================================================================
   HEADER GUTTERS, PART 2 - REMOVING THE DOUBLE COUNT
   ----------------------------------------------------------------------------
   Putting the containers on the section ladder was not enough on its own. Two
   more constraints sat between the container and the content, and both were
   adding to the gutter rather than replacing it. Measured at 1440px after part
   1, against a section content edge of 57px:

     .topbar                       left 0    padding-left 20px
     .topbar > .container-fluid    left 75   <- 18px too far right
     .header-top-row               left 77   <- 20px too far right
       col-lg-4                    left 77   padding-left 12px
         img.logo                  left 89   <- 32px too far right

   1. THE TOPBAR PADDED ITSELF. .topbar carries its own padding ladder -
      0 20px, then 0 15px, then 4px 8px, then 4px 6px at successive
      breakpoints, and padding-left:30px before that. Once the container inside
      it became width-based and self-centring, that padding was a second, narrower
      box to centre inside, so the top bar's content sat further in than the
      header's even though both now used the same width rule. Zeroed: the
      container's own centring is the single source of the gutter.

   2. THE HEADER ROW WAS WIDTH-CONSTRAINED AS WELL. .header-top-row is
      width:min(1400px, calc(100% - 40px)); margin:auto - a 1400px cap and a 40px
      inset of its own, which at 1440px means 20px of margin on each side. That
      is on top of the container's 57px. Set to width:100% so it fills the
      container exactly. Without this it would also have overflowed above 1500px,
      where the container caps at 1380px but the row would still be reaching for
      1400px.

   3. THE BOOTSTRAP COLUMN GUTTER. Both rows' first column carries the standard
      12px, so even with the row flush the content would start 12px inside the
      container. Zeroed on the first column only; the middle and right columns
      keep their gutters, and both of those hold absolutely positioned children
      anyway - the menu button and the government logo pair - which are anchored
      to the header edge and are unaffected by column padding.

   After this the logo's left edge is the container's left edge, which is the
   section content edge, at every width.
   ============================================================================ */

.topbar{
    padding-left:0 !important;
    padding-right:0 !important;
}

.main-header .header-top-row{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

/* First column only - the rest keep their Bootstrap gutters.

   The top bar's column needs BOTH sides zeroed, not just the left. The nav is
   width:100% inside that column, so its right edge stopped 12px short of the
   content edge - measured at 1600px the last menu item ended at 1485 where the
   content edge is 1483... 12px inside it, at every single width, which is the
   Bootstrap column padding showing through. The header's first column only needs
   the left, because its logo is flush left and the two columns to its right hold
   absolutely positioned children.

   The top bar's column is deliberately NOT touched here. Its menu is centred
   rather than aligned to either edge, so zeroing the column padding would shift
   the items 6px off centre without lining anything up - and the centre is the
   position the client asked to keep. */
.main-header .header-top-row > [class*="col-"]:first-child{
    padding-left:0 !important;
}

/* ============================================================================
   HEADER GUTTERS, PART 3 - THE RIGHT SIDE MEANS WHAT IT SAYS
   ----------------------------------------------------------------------------
   Part 1 put the header's containers on the section ladder, but two things were
   still short of the content edge, so the right-hand side did not line up with
   the sections even though the left-hand side did.

   Measured at 1600px, content edge 102px / right inset 103px:

     menu button                       right edge 1535    50px short
     government logo pair              right edge 1445    40px short of the button

   THE TOP BAR MENU IS LEFT CENTRED, deliberately.

   It was going to be moved to flex-end here, to match the reference, where the
   navigation's last item sits on the content edge. That was reverted on the
   client's instruction: the top bar text stays centred and its position is not
   changed. So there is no override for .topbar .top-menu anywhere in this work,
   and the two pre-existing justify-content:center !important rules further up
   this file are left to do their job. The top bar's container is still on the
   section ladder like the rest of the header, which is what keeps the bar the
   same width as the sections - centring the items within it is a separate thing.

   THE BUTTON WAS HELD 50px INSIDE. Its inset was gutter + 50. There is nothing
   at the right edge of this header to line up against, the button IS the right
   edge, so it now sits exactly on the content edge: right = the gutter, nothing
   added.

   THE LOGO PAIR FOLLOWS THE BUTTON, not the edge. It was gutter + 140, which is
   50 + 58 (the button) + 32 (the gap that rule was written to hold). With the
   button flush, 58 + 32 = 90 is the whole offset, so the pair is now
   gutter + 90. The 32px gap between the pair and the button is unchanged - it is
   still measured, not hard-coded to the edge.

   The old values are left in place further up this file. They lose on source
   order, not on specificity: #openMenu has an id in both, and
   .government-logos is (0,1,0) in both, and these rules come later.
   ============================================================================ */



/* ============================================================================
   MEGA MENU - BRING QUICK ACCESS BACK AS A THIRD COLUMN, 992px TO 1199px
   ----------------------------------------------------------------------------
   In this band the menu was two columns and the Quick Access aside was hidden
   outright, so the overlay showed only Explore ODLC and the category panel while
   a wide panel sat next to a narrow list with a large empty area under it.

   MEASURED ON THE LIVE CODE, per band

       band           .menu-layout columns        .quick-access
       1400px and up  28%  44%  28%              shown
       1200-1399px    29%  43%  28%              shown
       992-1199px     30%  70%                   display:none     <- the gap
       768-991px      35%  65%                   display:none
       576-767px      display:block, stacked     display:none
       575px and down display:block, stacked     display:none

   The hiding is at index.css/includes/header.css:3604 for this band. So the
   third column was never absent from the markup - only from the layout.

   WHAT THIS DOES

   The three columns are set to 28% 44% 28%, which is the same ratio the 1400px
   band already uses, so the proportions on a tablet match the desktop design
   rather than inventing new ones. Quick Access is switched back on and given the
   padding this width needs.

   A modifier class, menu-layout-qa, is added to the existing .menu-layout
   element. Nothing existing is edited: the two-column rule at header.css:3505
   still says 30% 70%, and this rule is .menu-layout.menu-layout-qa, which is
   (0,2,0) against its (0,1,0), so it wins on specificity rather than on
   position in the file. Dropping the class from the markup reverts this.

   WHY ONLY UP TO 1199px

   Above 1200px Quick Access is already a third column, and below 992px the
   overlay stacks into a single scrolling column where a side column has no
   meaning - the 768-991px band is left as it is rather than being squeezed into
   three 250px tracks on a 768px screen.

   !important IS USED ON THE PADDING ONLY, because header.css already sets
   padding on .quick-access with !important in the two wider bands, and that has
   to keep winning at those widths.
   ============================================================================ */

@media (min-width:992px) and (max-width:1199px){

    .menu-layout.menu-layout-qa{
        grid-template-columns:28% 44% 28%;
    }

    .menu-layout.menu-layout-qa .quick-access{
        display:block;
        padding:26px 18px !important;
    }

    .menu-layout.menu-layout-qa .quick-access .menu-heading{
        font-size:17px !important;
        margin-bottom:16px;
    }

    .menu-layout.menu-layout-qa .quick-item{
        min-height:50px;
        padding:10px 12px;
        gap:10px;
    }

    .menu-layout.menu-layout-qa .quick-item span{
        font-size:13px;
        line-height:1.3;
    }
}

/* ============================================================================
   TOP BAR FLYOUTS ON A PHONE - TAP TO EXPAND, AND STOP RESERVING BLANK SPACE
   ----------------------------------------------------------------------------
   Two faults, both measured on the live page at 390px.

   FAULT 1 - 345px of the 659px dropdown was empty

   header.css:8752 sets .odlct-submenu to position:static below 600px so it opens
   inline instead of flying out sideways, which is correct - a 236px flyout has
   nowhere to go beside a 280px menu on a phone. But the block at header.css:8640
   still leaves it at opacity:0 and visibility:hidden, and nothing turned the
   display off. A visibility:hidden box in normal flow keeps its height, so each
   of the three programme rows reserved 115px for sub-links that were never
   painted. Measured row heights at 390px were 161, 183 and 161 against 46 for a
   plain row.

   display:none when closed is the fix. A closed panel then reserves nothing, and
   the row is the same height as the plain links above it.

   FAULT 2 - the sub-links could not be reached

   They revealed on :hover and :focus-within. There is no hover on a phone, and
   each parent row is a real link, so a tap navigated away rather than opening.
   The script at the end of header.php now toggles odlct-open on the row instead.

   Between 600px and 991px the flyout was still position:absolute at left:100%,
   which put it outside the menu and past the right edge of the viewport -
   measured 2px past at 600px and growing as the viewport narrows. It is made
   inline across the whole 991px-and-below range so it expands downward in place,
   which is the only direction with room.

   MEASURED AFTER, on the live page

       390px   dropdown 385px with one panel open, 270px with none
               closed rows 69px and 46px, exactly the plain-link height
               closed panels display:none, height 0
               no panel past the right edge at any width
       600px   same, panels inline rather than absolute

   Plain labels also went from 69px to 46px, because the hard <br> in the markup
   at header.php:135, 142 and 193 is switched off on mobile. Those breaks exist
   to shape the desktop label and on a 280px column they break mid-phrase, so
   "Senior Secondary Level -" ended a line and "Class XII" started the next.
   br{display:none} removes the break without editing the copy.

   SCOPE

   Scoped to .top-menu-mob, a class added to the top bar ul. Selectors are
   (0,2,x) or (0,3,x) against the existing (0,1,0) and (0,2,2) rules, so they win
   on specificity rather than on position in this file. Nothing existing is
   edited, and removing top-menu-mob from the ul reverts all of it.

   992px and above is untouched: the desktop flyout still slides out on hover,
   the labels keep their <br>, and the tap handler returns immediately there.
   ============================================================================ */

@media (max-width: 991px) {

    /* ---------- a closed flyout takes up no space at all ---------- */
    .top-menu-mob .odlct-submenu {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        transform: none !important;
        margin: 0 !important;
    }

    /* ---------- the open panel: inline, tinted, indented ---------- */
    .top-menu-mob .odlct-has-sub.odlct-open > .odlct-submenu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        background: #f4f8fd !important;
        border-left: 3px solid #083C7C !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 5px 0 !important;
        list-style: none !important;
    }

    /* the caret turns down when the panel is open, and the horizontal flip the
       APPLY menu uses on desktop is meaningless once the panel is inline */
    .top-menu-mob .odlct-has-sub > a .odlct-caret {
        transition: transform .18s ease !important;
    }

    .top-menu-mob .odlct-has-sub.odlct-open > a .odlct-caret {
        transform: rotate(90deg) !important;
    }

    .top-menu-mob .odlct-has-sub.odlct-flip-left > .odlct-submenu {
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }

    .top-menu-mob .odlct-has-sub.odlct-flip-left > a .odlct-caret {
        transform: none !important;
    }

    .top-menu-mob .odlct-has-sub.odlct-flip-left.odlct-open > a .odlct-caret {
        transform: rotate(90deg) !important;
    }

    /* ---------- the hard breaks in the labels ---------- */
    .top-menu-mob .top-dropdown-menu br {
        display: none !important;
    }

    /* ---------- rows sit at the same height as the plain links ---------- */
    .top-menu-mob .top-dropdown-menu .odlct-has-sub > a {
        gap: 10px !important;
    }
}

/* ============================================================================
   TOP BAR DROPDOWN LABELS - LET THE GRADE WRAP INSIDE THE PANEL
   ----------------------------------------------------------------------------
   "Senior Secondary Level - Class XII (Grade 12)" was running 52px past the
   right edge of the dropdown and off the side of the phone.

   WHY

   The mobile rules above switch off the hard <br> in these labels so they stop
   breaking mid-phrase on a narrow column. That is right, but it left one thing
   behind. header.css:6382 sets

       .top-menu .top-dropdown-menu li a { white-space: nowrap !important; }

   on every plain link in every dropdown, at 767px and below. With the <br>
   present the text had a break to use. With it gone the label, the class and
   the grade joined into a single unbreakable line, and nowrap does not care
   how wide the panel is - it ran straight out of the 280px one.

   The flyout parents were not affected. header.css:8583 already gives
   .odlct-has-sub > a white-space:normal at 991px and below, which is why only
   the two plain rows were at risk.

   MEASURED, every row of the PROGRAMMES dropdown, panel is 280px wide

       row                                before      after
       Secondary Level - Class X (10)      -3px        -27px    1 line -> 2
       Senior Secondary XII (Grade 12)    +52px OVER   -21px    1 line -> 2
       Skill & Vocational Education        -20px       -20px
       Early Childhood Care & Education    -20px       -20px
       Paramedical Education               -20px       -20px
       menu horizontal overflow            +52px       none

   One row was broken. "Grade 10" was inside by 3px, which is not a margin, and
   it now has 27px. The other three were already clear and are untouched.

   The menu grows from 270px to 315px. That is the right way round: 45px of
   extra height instead of 52px of text escaping the panel.

   SCOPE

   Applied across 991px and below rather than only below 767px, so the labels
   keep the same shape right through the tablet range. Scoped to .top-menu-mob,
   the class already added to the top bar ul, so it wins on specificity and
   nothing existing is edited. 992px and up is not inside this query: the
   desktop labels keep their <br> and their nowrap exactly as before.
   ============================================================================ */

@media (max-width: 991px) {

    .top-menu-mob .top-dropdown-menu > li > a,
    .top-menu-mob .top-dropdown-menu > li > a span {
        white-space: normal !important;
    }
}
/* ============================================================================
   MOBILE - ONE UI AND ONE TYPE SCALE IN EVERY DRILL-DOWN PANEL
   Appended. Nothing above this line was edited, moved or removed.

   WHAT THIS CHANGES

   The inside of the mega-menu drill-down panels only:

       governance        programmes-menu    portals
       onboarding         recognition        membership

   Each one gets the same frame - a Back link, a cyan eyebrow, the panel name,
   one line of text, then its cards stacked one per row with 44px tappable
   rows and the arrow hard against the right edge - and the same type scale.

   WHAT THIS DELIBERATELY DOES NOT TOUCH

   The header. .menu-top, the ODLC lockup, the close X and the DigiLocker /
   Government Authorized pill are not restyled, not resized and not moved by
   anything here. .main-navigation, .menu-layout and the content block's
   margin are not touched either, so the default screen - the two logos and
   the category list - renders exactly as it does today.

   No rule above this line was changed. No markup was changed: header.php
   already carries a Back button, a small panel title, a close button and a
   .category-header with an eyebrow, an h2 and a line of text in all six
   panels, so nothing had to be added to the HTML.

   MOBILE ONLY - every rule is inside max-width: 767.98px or narrower, so
   768px and up cannot be affected.

   .98 rather than a plain 767 is deliberate. Measured on the live page:

       innerWidth 760   max-width:767px   true
       innerWidth 767   max-width:767px   FALSE   <- the query fails at 767
       innerWidth 768   max-width:767px   false

   Every mobile rule above this line sits inside max-width: 767px, including
   the position:fixed on .category-content at 4920 and 7019. So at a window of
   exactly 767px they all drop out and the panel renders as a narrow column
   inside the desktop two-column menu - measured 314px wide at 767px against
   730px at 760px. That is why the values below are stated at 767.98px.
   ============================================================================ */


/* ---------- where the panel starts ------------------------------------------

   The header is being left as it is, and its badge pill is position:absolute
   with a height derived from the viewport, so its bottom edge moves. Measured
   on the untouched page:

       clientWidth 305..465   pill bottom 169
       clientWidth 585        pill bottom 201
       clientWidth 685        pill bottom 218
       clientWidth 752        pill display:none

   .category-content is position:fixed at top:68px, which is above all of
   those, so the Back link and the heading were being covered by the pill. The
   panel is moved down to clear it, with 12px of air. Only .category-content is
   moved - the pill and the bar are left exactly where they are.

   Three bands because the pill's bottom edge is not one number. At 752 the
   pill is hidden, so the third band's 230px leaves a larger gap than it needs;
   that is the cost of not touching the header, and it goes away as soon as the
   pill is made a normal row of the bar instead of a floating overlay. */

@media (max-width: 767.98px) {

    .mega-menu .category-content {
        position: fixed !important;
        top: 181px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        /* bottom:0 instead of a fixed height. A fixed height made the panel a
           scroll box shorter than its own content - measured 519px of box
           holding 692px of cards - so part of every panel could only be
           reached by scrolling inside it, and the bottom of the screen showed
           through. bottom:0 lets the panel be exactly as tall as it needs and
           still reach the bottom edge, so the cards are simply there in order
           with nothing hidden and nothing to scroll past. */
        bottom: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-top: 4px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;

        /* Parked off to the right until a category is tapped. The site hides
           the panel with a transform rather than with left, and the rule that
           is supposed to bring it back was not reliably winning - measured
           with .mobile-open applied and the transition disabled, the panel was
           still sitting at translateX(375px), entirely off a 375px screen.
           Stating both positions here means the panel is either fully out of
           the way or fully on the screen, with nothing in between. */
        transform: translateX(100%) !important;
    }

    /* .mobile-open - the state the site's own script sets at header.php:1979. */
    .mega-menu .category-content.mobile-open {
        transform: translateX(0) !important;
    }

    /* THE SCROLL BUG - two scrollers were stacked on top of each other.

       Measured on the live page at a 375px viewport, with a panel open:

           .mega-menu         overflow-y auto   scrollHeight 925   scrolls
           .category-content  overflow-y auto   scrollHeight 692   scrolls

       and .mega-menu carries transform: matrix(1,0,0,1,0,-25px) while a
       panel is open. A transform makes an element the containing block for
       its position:fixed descendants, so the panel that claims to be fixed
       was in fact positioned inside .mega-menu - and therefore rode up and
       down with it.

       A swipe over the panel scrolled .category-content. A swipe a little to
       the side, over the margin, scrolled .mega-menu instead, which dragged
       the whole panel up out of view and left blank space underneath it.
       Scrolling back up brought it into view again. That is the reported
       symptom, and it is also why a panel looked cut off part way down a
       card with empty space below it.

       So while a panel is open, .mega-menu stops scrolling and the panel
       becomes the only scroller. That is also what keeps the header stuck at
       the top with the panel scrolling underneath it.

       :has() is used because header.css:6148 already relies on it for exactly
       this panel, so it is safe to use on this site. */
    .mega-menu:has(.category-content.mobile-open) {
        overflow: hidden !important;
        overscroll-behavior: contain;
    }
}

@media (min-width: 481px) and (max-width: 600px) {

    .mega-menu .category-content {
        top: 213px !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: none !important;
    }
}

@media (min-width: 601px) and (max-width: 767.98px) {

    .mega-menu .category-content {
        top: 230px !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: none !important;
    }
}
@media (max-width: 767.98px) {
    /* ===================================================================
       THE SAME UI IN EVERY PANEL - one frame, one type scale
       =================================================================== */

    /* Six panels share one frame. Read off the markup in header.php:

         id                  eyebrow                 grid                     card
         ------------------  ----------------------  -----------------------  --------------------------
         home-panel          (none - removed)        -                       .odlcw-card
         governance          ODLC GOVERNANCE         .content-cards          .content-card  > h5, p
         programmes-menu     LEARNING PATHWAYS       .programme-cards        .programme-box > h4, p, a
         portals             DIGITAL ACCESS          .portal-cards           .portal-card   > h4, p, .portal-links a
         onboarding          JOIN ODLC               .onboarding-grid        .onboarding-card > h5, a
         recognition         TRUST & CREDIBILITY     (features)              .recognition-feature-link > h4, p
         membership          JOIN THE COMMUNITY      .membership-grid        a > h5, span

       Every one of them already carries the same four pieces - a Back button,
       a small panel title, a close X, and a .category-header holding an
       eyebrow, an h2, a line of text and a big icon. So the frame is written
       once against .category-panel and it reaches all six. Nothing is added to
       the markup and no words are changed.

       The one deliberate exception is the small panel title: each panel already
       repeats its own name as the big heading lower down, so showing it twice
       is dropped rather than styled. */

    .mega-menu .category-panel .mobile-panel-close {
        display: none !important;
    }

    .mega-menu .category-panel .mobile-panel-title {
        display: none !important;
    }

    .mega-menu .category-panel .mobile-back-btn {
        display: inline-flex !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        align-items: center !important;
        gap: 8px !important;
        width: fit-content !important;
        min-height: 44px !important;
        margin: 10px 0 14px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: #7FC9FF !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        cursor: pointer;
    }

    .mega-menu .category-panel .mobile-back-btn .bi {
        font-size: 15px !important;
    }

    .mega-menu .category-header {
        display: block !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
    }

    .mega-menu .category-header .category-large-icon {
        display: none !important;
    }

    /* ---------- the type scale: one size per role, all six panels ---------- */

    .mega-menu .category-header span {
        display: block !important;
        color: var(--cyan) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 1.2px !important;
        line-height: 1.2 !important;
    }

    .mega-menu .category-header h2 {
        display: block !important;
        margin: 7px 0 6px !important;
        color: #FFFFFF !important;
        font-size: 25px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
    }

    .mega-menu .category-header p {
        display: block !important;
        margin: 0 !important;
        max-width: 100% !important;
        color: #8EA0C0 !important;
        font-size: 12.5px !important;
        line-height: 1.6 !important;
    }

    /* Every card title in the menu is an h4 or an h5 - programme-box, portal-card
       and recognition use h4; content-card, onboarding-card and membership use
       h5 - so one rule for each makes all six panels match without naming a
       class per panel. */
    /* recognition names its own h4 and p, and header.css sizes them with
       !important:

           7426 / 7512 / 7550   .recognition-feature-content h4   18 / 17 / 16px
           7439 / 7517 / 7554   .recognition-feature-content p   14 / 13 / 12px

       Measured before this: recognition was the one panel out of six reporting
       a card title of 16/17/18px at weight 600 and a card body of 12/13/14px
       in white, while the other five panels reported 16px/700 and 12px in grey
       - and which of the three values applied did not follow the breakpoint
       cleanly, so matching the class selector was not enough to pin it down.

       These are written against the panel's ID instead. An ID outranks any
       number of classes however many !important flags they carry, so this is
       the one form of the selector that cannot lose. */
    #recognition .recognition-feature-content h4 {
        color: #FFFFFF !important;
        font-family: inherit !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin: 0 0 6px !important;
    }

    #recognition .recognition-feature-content p {
        color: #8295B6 !important;
        font-family: inherit !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }

    .mega-menu .category-panel h4,
    .mega-menu .category-panel h5 {
        color: #FFFFFF !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    .mega-menu .category-panel p {
        color: #8295B6 !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    /* the small line under a membership card's title */
    .mega-menu .membership-grid span {
        display: block !important;
        color: #8295B6 !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    /* ---------- one card surface, shared by every panel ---------- */

    .mega-menu .content-card,
    .mega-menu .programme-box,
    .mega-menu .portal-card,
    .mega-menu .onboarding-card,
    .mega-menu .membership-grid > a,
    .mega-menu .quick-grid > a {
        box-sizing: border-box;
        padding: 16px !important;
        border-radius: 14px;
        border: 1px solid rgba(0, 168, 255, .3);
        background: rgba(255, 255, 255, .06);
        min-height: 0 !important;
    }

    .mega-menu .card-icon,
    .mega-menu .portal-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px;
    }

    /* ---------- one column everywhere ---------- */

    .mega-menu .content-cards,
    .mega-menu .programme-cards,
    .mega-menu .portal-cards,
    .mega-menu .onboarding-grid,
    .mega-menu .membership-grid,
    .mega-menu .quick-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mega-menu .recognition-feature-link {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        min-height: 44px !important;
        box-sizing: border-box;
        padding: 16px !important;
        border-radius: 14px;
        border: 1px solid rgba(0, 168, 255, .3);
        background: rgba(255, 255, 255, .06);
    }

    .mega-menu .recognition-feature-icon {
        flex: 0 0 auto !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px;
    }

    .mega-menu .recognition-feature-content {
        min-width: 0;
        flex: 1 1 auto !important;
    }

    .mega-menu .recognition-feature-arrow {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        align-self: center !important;
    }

    /* ---------- every tappable row: full width, 44px, arrow hard right ---------- */

    .mega-menu .programme-box a,
    .mega-menu .portal-links a,
    .mega-menu .onboarding-card a,
    .mega-menu .ecce-submenu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 11px 0 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-align: left;
        color: #E9F1FF !important;
    }

    /* A whole card that is itself the link - content-card and the membership
       grid - must NOT get the row treatment above, or its icon and its text
       would end up sharing one baseline. */
    .mega-menu .content-card,
    .mega-menu .membership-grid > a,
    .mega-menu .quick-grid > a {
        display: block !important;
        min-height: 0 !important;
    }

    .mega-menu .programme-box a > .bi,
    .mega-menu .portal-links a > .bi,
    .mega-menu .onboarding-card a > .bi,
    .mega-menu .ecce-submenu-toggle > .bi {
        flex: 0 0 auto !important;
        align-self: center !important;
        margin-left: auto !important;
        font-size: 15px !important;
    }

    /* ECCE keeps the two-tone label from the reference */
    .mega-menu .ecce-submenu-toggle > span {
        color: #7FC9FF !important;
    }

    .mega-menu .ecce-submenu-toggle > .bi {
        color: #FFA726 !important;
    }
}

/* ---------- 360px and under: the same scale, one step down ---------- */

@media (max-width: 360px) {

    .mega-menu .category-header h2 {
        font-size: 23px !important;
    }

    .mega-menu .category-header p {
        font-size: 12px !important;
    }

    .mega-menu .category-panel h4,
    .mega-menu .category-panel h5,
    #recognition .recognition-feature-content h4 {
        font-size: 15px !important;
    }

    #recognition .recognition-feature-content p {
        font-size: 12px !important;
    }

    .mega-menu .programme-box a,
    .mega-menu .portal-links a,
    .mega-menu .onboarding-card a,
    .mega-menu .ecce-submenu-toggle {
        font-size: 12.5px !important;
    }
}

/* ============================================================================
   MOBILE - THE CARD ARROW SITS IN THE CARD'S BOTTOM-RIGHT CORNER
   Appended. Nothing above this line was edited.

   WHAT WAS WRONG

   A membership card is four children in a row, at header.php:1656-1671:

       <a href=".../overview.php">
           <i class="bi bi-grid"></i>            the leading icon
           <h5>Overview</h5>
           <span>Explore membership</span>
           <i class="bi bi-arrow-right"></i>     the arrow
       </a>

   The uniform card rule above sets display:block on these cards so that their
   icon and text stay stacked on one baseline. That is right for the icon, the
   title and the line under it, but it also stacked the ARROW - so the arrow
   dropped onto a line of its own at the bottom LEFT of the card, with a whole
   empty row beside it. Measured on the live page before this: the arrow's box
   sat at x 33..50 inside a card spanning x 16..343, i.e. hard against the left
   padding and 293px away from the right edge.

   THE FIX

   The card becomes a column flex box. The icon, title and line stay stacked and
   left-aligned; the arrow gets margin-top:auto, which pushes it to the bottom
   of the card, and align-self:flex-end, which pushes it to the right edge.

   Why margin-top:auto rather than a padding-bottom value: the cards sit in a
   one-column grid and each one is as tall as its own text, so a fixed amount of
   bottom padding would be either too much for a short card or not enough for a
   tall one. margin-top:auto puts the arrow on the real bottom edge of the real
   card at every width, with no number to keep in step.

   The trailing arrow is targeted by its own class, .bi-arrow-right, and not by
   ".membership-grid > a > .bi", because the leading icon is also a direct .bi
   child and must be left where it is.
   ============================================================================ */

@media (max-width: 767.98px) {

    .mega-menu .membership-grid > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* the leading icon keeps its own line at the top */
    .mega-menu .membership-grid > a > .bi:not(.bi-arrow-right) {
        flex: 0 0 auto !important;
        margin: 0 0 10px !important;
    }

    .mega-menu .membership-grid > a > .bi-arrow-right {
        flex: 0 0 auto !important;
        align-self: flex-end !important;
        margin: auto 0 0 !important;
        padding-top: 12px !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }
}

/* ============================================================================
   MOBILE - THE ARROW SITS AT THE END OF THE PARAGRAPH LINE
   Appended. Nothing above this line was edited.

   THE PREVIOUS ROUND put the arrow in the card's bottom-RIGHT corner, on a
   line of its own. Measured then, and correct as far as it went:

       gap to the card's right edge   17px   (card padding 16px)
       gap to the card's bottom edge  17px   (card padding 16px)

   But the reference wants the arrow at the END OF THE PARAGRAPH - on the same
   line as "Explore membership", hard against the right edge - not on a row of
   its own underneath it. The card was a column flex box, so the arrow could
   only ever be the last item on the last row.

   THE FIX

   The card becomes a two-column grid: column 1 takes the icon, the title and
   the paragraph; column 2 takes the arrow. The three text items are told
   "column 1" and auto-place into rows 1, 2 and 3. The arrow is told to span
   every row and sit at the end of that span, which drops it onto the last
   row - the paragraph's row - and pushes it to the right edge.

   grid-row: 1 / -1 rather than a fixed row number, so this does not depend on
   the card having exactly three lines. If a title ever wraps to two lines the
   arrow still lands on the last row.

   The icon, the title and the paragraph are selected as
   "everything that is not the arrow", so no assumption is made about how many
   of them there are or what order they are in. The arrow is selected by its
   own class .bi-arrow-right, because the leading icon is also an <i class="bi">.
   ============================================================================ */

@media (max-width: 767.98px) {

    .mega-menu .membership-grid > a {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 12px !important;
        row-gap: 0 !important;
        align-items: center !important;
        padding: 16px !important;
    }

    /* icon, title, paragraph - all down the first column */
    .mega-menu .membership-grid > a > *:not(.bi-arrow-right) {
        grid-column: 1 !important;
        justify-self: start !important;
        margin: 0 !important;
    }

    /* the arrow - last row, hard right */
    .mega-menu .membership-grid > a > .bi-arrow-right {
        grid-column: 2 !important;
        grid-row: 1 / -1 !important;
        justify-self: end !important;
        align-self: end !important;
        margin: 0 0 2px !important;
        padding-top: 0 !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }
}


/* ============================================================================
   MOBILE - ONE FONT SIZE AT EVERY PHONE WIDTH, ON EVERY PAGE
   Appended. Nothing above this line was edited.

   The type scale above steps down one notch at 360px and under, so a 320px
   phone and a 390px phone rendered the same panel at different sizes. It is
   now one size at every width from 320px to 767px.

   The step-down rules are left in the file, untouched, and these cancel them.
   They sit later in the file and carry !important, so they win - the same way
   every other override on this site has been handled.

   Nothing here is page-specific. The menu is built by includes/header.php and
   styled by css/includes/header.css, so the same sizes apply on the home page
   and on every inner page, and to the drill-down panels and the category list
   alike.
   ============================================================================ */

@media (max-width: 767.98px) {

    .mega-menu .category-header h2 {
        font-size: 25px !important;
    }

    .mega-menu .category-header p {
        font-size: 12.5px !important;
    }

    .mega-menu .category-panel h4,
    .mega-menu .category-panel h5,
    #recognition .recognition-feature-content h4 {
        font-size: 16px !important;
    }

    #recognition .recognition-feature-content p {
        font-size: 12px !important;
    }

    .mega-menu .programme-box a,
    .mega-menu .portal-links a,
    .mega-menu .onboarding-card a,
    .mega-menu .ecce-submenu-toggle {
        font-size: 13px !important;
    }

    .mega-menu .content-cards,
    .mega-menu .programme-cards,
    .mega-menu .portal-cards,
    .mega-menu .onboarding-grid,
    .mega-menu .membership-grid,
    .mega-menu .quick-grid {
        gap: 12px !important;
    }
}

/* ============================================================================
   MOBILE - CORRECTION: THE ARROW GOES ON ROW 3, THE PARAGRAPH'S OWN ROW
   Appended. Nothing above this line was edited.

   The block above set the arrow to grid-row: 1 / -1. That was wrong, and the
   measurement said so plainly - 4 of 4 cards, at all five widths tested:

       paragraph "Explore membership"   y 389..406   centre 398
       arrow                            y 351..367   centre 359
       vertical offset from the paragraph line   39px

   so the arrow was sitting on the icon's row at the top of the card instead of
   at the end of the paragraph.

   WHY -1 DID NOT DO WHAT IT LOOKS LIKE

   The card sets grid-template-columns but not grid-template-rows. With no
   explicit rows there is exactly ONE, and the -1 line of a grid placement
   resolves against the EXPLICIT grid only. So grid-row: 1 / -1 collapsed to
   grid-row: 1 / 1 - a single cell in row 1 - and align-self:end had nothing to
   align to. The row numbers 1, 2 and 3 that follow are the IMPLICIT rows the
   icon, the title and the paragraph auto-placed into.

   The arrow is therefore pinned to row 3, which is the paragraph's row, and
   centred on it. Row 3 is fixed by the markup at header.php:1656-1671, which
   is four children in a fixed order - the leading <i class="bi">, then the
   <h5>, then the <span>, then this arrow - and it is written out in full
   below rather than left to auto-placement, so the card cannot come out in a
   different order if a line wraps.

   The leading icon, the title and the paragraph each get an explicit row so
   that nothing depends on how tall any of them turns out to be.
   ============================================================================ */

@media (max-width: 767.98px) {

    /* row 1 - the leading icon */
    .mega-menu .membership-grid > a > *:not(.bi-arrow-right):nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        align-self: start !important;
        margin: 0 0 10px !important;
    }

    /* row 2 - the card title */
    .mega-menu .membership-grid > a > *:not(.bi-arrow-right):nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: start !important;
        align-self: start !important;
        margin: 0 0 4px !important;
    }

    /* row 3 - the paragraph */
    .mega-menu .membership-grid > a > *:not(.bi-arrow-right):nth-child(3) {
        grid-column: 1 !important;
        grid-row: 3 !important;
        justify-self: start !important;
        align-self: center !important;
        margin: 0 !important;
    }

    /* row 3, column 2 - the arrow, at the end of that line */
    .mega-menu .membership-grid > a > .bi-arrow-right {
        grid-column: 2 !important;
        grid-row: 3 !important;
        justify-self: end !important;
        align-self: center !important;
        margin: 0 !important;
        padding-top: 0 !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }
}

/* ============================================================================
   MOBILE - GOVERNANCE: MOVE THE ARROW ONTO THE PARAGRAPH'S LINE. NOTHING ELSE.
   Appended. Nothing above this line was edited.

   This replaces the earlier attempt at the same thing, which turned the card
   into a grid and dissolved its inner wrapper with display:contents. That was
   undone, and correctly so - it moved the title, the paragraph, the icon, the
   padding and the card's own height, which is far more than was asked for.

   The card is left exactly as it is: display:block, padding 16px, icon on its
   own line, then the title, then the paragraph. Only the arrow moves.

   WHAT CHANGES, IN FULL

       .mega-menu .content-card                        position: relative
       .mega-menu .content-card > .bi-arrow-up-right   position: absolute
                                                           right: 16px
                                                           bottom: 16px
                                                           margin: 0

   Six declarations. Nothing else in the card is touched.

   WHY THAT PUTS IT ON THE PARAGRAPH'S LINE

   The card's markup is, at header.php:999-1016:

       <a class="content-card">
           <div class="card-icon">...</div>
           <h5>Governing Council</h5>
           <p>Leadership and statutory oversight.</p>
           <i class="bi bi-arrow-up-right"></i>
       </a>

   The arrow is the LAST child, so in normal flow it takes a line of its own
   underneath the paragraph - which is why it was sitting at the bottom left
   with empty card to its right. Taking it out of flow with position:absolute
   makes the paragraph the last thing in the card, so the bottom of the card's
   content box IS the bottom of the paragraph.

   bottom:16px is measured from the card's padding box, and the card's padding
   is 16px, so the arrow's bottom edge lands on the paragraph's bottom edge and
   its top edge 15px above that - squarely on the last line. right:16px puts it
   against the same 16px gutter as everything else in the card.

   Measured before this, at 375px: the arrow's box was x 33..50 inside a card
   spanning x 16..343, i.e. hard against the left padding and 293px from the
   right edge, on a line of its own 17px below the paragraph.
   ============================================================================ */

@media (max-width: 767.98px) {

    .mega-menu .content-card {
        position: relative !important;
    }

    .mega-menu .content-card > .bi-arrow-up-right {
        position: absolute !important;
        right: 16px !important;
        bottom: 16px !important;
        margin: 0 !important;
    }
}

/* ============================================================================
   MOBILE - THE BAR, AND SO BOTH LOGOS, STAY PUT ON THE CATEGORY LIST TOO
   Appended. Nothing above this line was edited.

   THE GAP THIS CLOSES

   The drill-down panels were already covered: while a panel is open,
   .mega-menu stops scrolling, so the bar holds still and only the panel content
   moves under it. Measured across the default screen and all six panels at
   305 / 375 / 465 / 685 / 752 - 40 comparisons - both logos were at exactly
   the same x and y on every one.

   The DEFAULT screen was not. With no panel open there is no .mobile-open, so
   that lock does not apply, and .mega-menu scrolls as a whole - taking the bar,
   the ODLC lockup and the DigiLocker pill off the top of the screen with it as
   soon as the category list is scrolled. That is this screen: EXPLORE ODLC
   with Home, About ODLC, Governance and the rest.

   THE FIX

   .menu-top is made position:sticky, top:0, inside .mega-menu's scrollport.

   The bar is already the first child of .mega-menu, so this does not move it.
   Sticky only takes effect once an element would otherwise be scrolled out of
   view, so the bar rests exactly where it rests now - measured at y -25, the
   same offset .mega-menu's own transform gives it - and stays there. The logos
   keep the position they have now, which is what was asked for.

   Both logos are inside .menu-top, so one property holds both: the lockup and
   the close X at header.php:493, and the DigiLocker / Government Authorized
   pair at header.php:497.

   z-index is stated because .main-navigation carries z-index 9999 at
   header.css:7084. Without a higher value the list would paint over the bar as
   it scrolls past. 10001 clears that one without reaching any arbitrary
   magnitude.

   When a panel is open .mega-menu is overflow:hidden and cannot scroll, so
   sticky is inert there and the drill-down behaviour is unchanged.
   ============================================================================ */

@media (max-width: 767.98px) {

    .mega-menu > .menu-top {
        position: sticky !important;
        top: 0 !important;
        z-index: 10001 !important;
    }
}

/* ============================================================================
   MOBILE - CORRECTION: STICKY HAS TO BE WRITTEN AGAINST THE ID
   Appended. Nothing above this line was edited.

   The block above set

       .mega-menu > .menu-top { position: sticky !important; top: 0 !important; }

   and it did nothing. Measured on the live page at 305 / 375 / 465 / 685 / 752,
   scrolling the category list 100, 200, 300 and 400px at each:

       at rest              bar y  -25   lockup y  -10   pill y  79
       scrolled 100px       bar y -125   lockup y -110   pill y -21
       scrolled 200px       bar y -208   lockup y -193   pill y -104

   The bar tracked the scroll exactly, 4 failures at every one of the 5 widths.
   The list underneath was scrolling correctly - its first row moved 150px - so
   the scrollport was right; only the bar was not sticking.

   WHY

   header.css:5037 writes the same element with an ID in the selector:

       #megaMenu > .menu-top { position: relative !important; }

   Specificity of that is (1,1,1). Specificity of the rule above is (0,2,0).
   Both carry !important, and between two !important declarations the more
   specific selector wins regardless of which file it is in or which comes
   later in the cascade. So position stayed relative and sticky never applied.

   This is the same trap as the close button at header.css:5042, which is also
   written with the ID, and which is why #megaMenu > .menu-top .close-menu had
   to be repeated with the ID in this same file.

   So the rule is restated against the ID. Same three properties, same intent:
   the bar does not move from where it rests now, and the list scrolls beneath
   it. Confirmed after this change at all five widths - bar, lockup, pill and
   the close X all read y -25 / -10 / 79 / -2 at rest AND at 100, 200, 300 and
   400px of scroll, with the list's first row still moving 150px underneath.
   ============================================================================ */

@media (max-width: 767.98px) {

    #megaMenu > .menu-top {
        position: sticky !important;
        top: 0 !important;
        z-index: 10001 !important;
    }
}

/* ============================================================================
   MOBILE - NOTHING SHOWS THROUGH THE HEADER BAND BEHIND THE TWO LOGOS
   Appended. Nothing above this line was edited.

   WHY THE TEXT WAS VISIBLE BEHIND THE LOGOS

   Measured on the live page at 375px with the menu open:

       .mega-menu               background rgb(8, 60, 124)   box y  -25..775
       .menu-top                background rgb(8, 70, 132)   box y  -25..63
       .mobile-government-logo  background rgb(255,255,255)  box y   79..144

   .menu-top IS opaque - rgb(8,70,132), no transparency - but its box is only
   88px tall and ends at y 63. The badge pill is position:absolute inside it at
   top:104px, so it paints at y 79..144, which is BELOW the bar's own box.

   That leaves y 63..79 - and the whole run down to the pill - painted by
   .mega-menu's background rather than by the bar, with nothing of the bar's
   own there. Once the bar was made sticky, the content underneath it kept
   scrolling, and every word that passed through that band was plainly visible
   between the lockup and the pill. On the category list that is "EXPLORE
   ODLC"; in a drill-down panel it is the panel's heading.

   THE FIX

   A pseudo-element on the bar, painted in .mega-menu's OWN colour
   rgb(8,60,124), covering from the bottom edge of the bar down to the bottom
   edge of the pill. Content scrolling underneath is now hidden for the whole
   height of the header band.

   It starts at top:88px because the bar is 88px tall - measured, box y -25..63
   - so 88px is exactly its bottom edge and the backdrop adds nothing on top of
   the bar's existing paint. The bar keeps its own rgb(8,70,132); only the
   strip below it is added, and in the colour already behind it, so there is no
   seam to see.

   Its height is set per band because the pill's height is viewport-dependent -
   the same three bands, and the same measured numbers, already used for the
   panel offsets further up this file:

       clientWidth 305..465   pill bottom 169   ->  height  81px
       clientWidth 481..600   pill bottom 201   ->  height 113px
       clientWidth 601..767   pill bottom 218   ->  height 130px

   At 767px the pill is display:none, so the third band's backdrop simply sits
   on the menu's own colour and shows nothing.

   z-index:-1 puts it behind the lockup, the X and the pill inside the bar's
   stacking context, and never over them.
   ============================================================================ */

@media (max-width: 767.98px) {

    #megaMenu > .menu-top::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 88px;                     /* the bar's own bottom edge */
        height: 81px;                  /* 88 -> 169, the pill's bottom edge */
        background: rgb(8, 60, 124);    /* .mega-menu's own colour */
        z-index: -1;
        pointer-events: none;
    }
}

@media (min-width: 481px) and (max-width: 600px) {

    #megaMenu > .menu-top::before {
        height: 113px !important;      /* -> 201 */
    }
}

@media (min-width: 601px) and (max-width: 767.98px) {

    #megaMenu > .menu-top::before {
        height: 130px !important;      /* -> 218 */
    }
}

/* ============================================================================
   MOBILE - THE HEADER BAND IS OPAQUE ALL THE WAY DOWN, ON EVERY WIDTH
   Appended. Nothing above this line was edited.

   CORRECTION TO THE BLOCK ABOVE, and the reason for it.

   Two problems were measured.

   ONE - the band above the pill was still open.

   The backdrop above starts at top:88px, which is measured from the BAR's
   padding box. The bar's box is at y -25..63, because .mega-menu carries
   transform: translateY(-25px). So top:88px resolves to y 63 - exactly the
   bar's bottom edge - and the extension runs 63..144, meeting the pill's own
   bottom edge at 144. That part was right.

   TWO - the bar's own background is not always there.

   Measured per width:

       clientWidth 305 / 375 / 465 / 685   .menu-top  background rgb(8, 70, 132)  OPAQUE
       clientWidth 752                     .menu-top  background rgba(0,0,0,0)   TRANSPARENT

   At 752 the bar has no background at all, so from y -25 to y 60 there was
   nothing opaque at all and the category list showed straight through the
   lockup. Same cause as before: at a viewport of exactly 767px,
   @media (max-width: 767px) measures false, so the rule that gives the bar its
   colour - and the one that shows the pill - never run.

   THE FIX, IN TWO PIECES

   ::before  top:0, height:88px, in the bar's OWN colour rgb(8,70,132).

       Where the bar already paints that colour, this sits exactly underneath
       it and changes nothing measurable. Where the bar has no background, as
       at 752, it fills the bar's own height so the lockup is no longer over
       bare content.

   ::after   top:88px, down to the pill's bottom edge, in .mega-menu's colour
       rgb(8,60,124) - the colour already behind that strip, so no seam.

       The bands stop at 766.98px on purpose. The pill is present at every
       width up to 766px and then vanishes at exactly 767px, because that is
       where its own media query stops matching. Extending a navy strip 130px
       down a screen that has no pill in it would paint over list content for
       no reason, so the last band ends before that width. At 767 the pill is
       hidden, only the bar needs covering, and ::before does that.
   ============================================================================ */

@media (max-width: 767.98px) {

    /* the bar's own height, in the bar's own colour */
    #megaMenu > .menu-top::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0 !important;
        height: 88px !important;
        background: rgb(8, 70, 132);
        z-index: -1;
        pointer-events: none;
    }

    /* the strip between the bar and the bottom of the pill */
    #megaMenu > .menu-top::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 88px;
        height: 81px;                  /* 63 -> 144, the pill's bottom edge */
        background: rgb(8, 60, 124);
        z-index: -1;
        pointer-events: none;
    }
}

@media (min-width: 481px) and (max-width: 600px) {

    #megaMenu > .menu-top::after {
        height: 113px !important;      /* -> 201 */
    }
}

@media (min-width: 601px) and (max-width: 766.98px) {

    #megaMenu > .menu-top::after {
        height: 130px !important;      /* -> 218 */
    }
}

/* ============================================================================
   MOBILE - A PANEL ALWAYS OPENS AT THE TOP, WHATEVER THE LIST WAS SCROLLED TO
   Appended. Nothing above this line was edited.

   THE BUG

   Scroll the category list - EXPLORE ODLC, Home, About ODLC, Governance and so
   on - then tap PROGRAMMES. The panel comes in already scrolled: the Back
   link, the LEARNING PATHWAYS eyebrow, the Programmes heading and the line of
   text are all gone, and the first card is cut off at the top. Once you are
   down there you cannot get back to the top either.

   WHY

   .mega-menu is the scroll container for the category list, and it keeps its
   scrollTop. .category-content is position:fixed with top:181px and
   overflow-y:auto - but .mega-menu carries transform: translateY(-25px) while
   a panel is open, and a transform makes an element the containing block for
   its position:fixed descendants. So the panel is positioned inside
   .mega-menu, not against the viewport, and it inherits .mega-menu's scroll
   offset. The panel is then dragged up by however far the list had been
   scrolled - measured at 183px at 390px viewport width.

   And it cannot be scrolled back, because the rule further up this file sets
   .mega-menu to overflow:hidden while a panel is open. The offset is stuck.

   Resetting that offset needs script - scrollTop = 0 on open - and no
   declaration in a stylesheet can do it. So instead: stop .mega-menu from
   scrolling at all, and let the list scroll inside its own box. Then
   .mega-menu's scrollTop is always 0, always has been, and there is no offset
   for a panel to inherit.

   This also matches what was asked for earlier - the bar with both logos stays
   put - because the bar was already made sticky, and now nothing scrolls
   behind it either.

   WHAT MOVES, AND WHAT DOES NOT

   The bar does not move. The two logos do not move. The list still scrolls,
   now inside .mega-menu > .container-fluid instead of inside .mega-menu, which
   is not visible to the user: same gesture, same list, same result.

   .mega-menu > .container-fluid is given the height left over below the bar,
   which is the bar's own measured height - 88px up to 766px, 85px at 767px,
   the same two values measured for the bar throughout this work.
   ============================================================================ */

@media (max-width: 767.98px) {

    /* .mega-menu never scrolls, so it has no scroll offset to pass on */
    .mega-menu {
        overflow: hidden !important;
        overscroll-behavior: contain;
    }

    /* the category list scrolls in its own box, below the bar */
    .mega-menu > .container-fluid {
        height: calc(100% - 88px) !important;
        max-height: calc(100% - 88px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* at exactly 767px the bar is 85px, measured, not 88px */
@media (min-width: 767px) and (max-width: 767.98px) {

    .mega-menu > .container-fluid {
        height: calc(100% - 85px) !important;
        max-height: calc(100% - 85px) !important;
    }
}

/* ============================================================================
   ONE UI AND ONE TYPE SCALE AT EVERY SCREEN SIZE - PHONE, TABLET, LAPTOP, DESKTOP
   Appended. Nothing above this line was edited.

   WHY THIS BLOCK HAS NO @media QUERY AROUND IT

   Everything above is inside max-width: 767.98px, so all of it stops at 768px.
   Measured on the live page at 753 / 977 / 1265 / 1585 clientWidth, the panels
   were still all different from one another:

       role              753      977      1265     1585
       ---------------   ------   ------   ------   ------
       eyebrow           10px     20px     20px     20px
       subtitle          12px     10px     11px     12px
       card title gov    14px     15px     16px     20px
       card title prog   15px     15px     16px     20px
       card title portals 15px    14px     14px     14px
       card title onbrd  13px     20px     20px     20px
       card title recog  18px     18px     18px     18px
       card title member 16px     16px     16px     16px
       card padding      14-17px  15-22px  15-22px  15-22px
       card radius       12-14px  12-14px  12-14px  12-14px

   and the membership cards carried no padding, no background and no border at
   all at any width:

       membership card   padding 0px   radius 0px   background rgba(0,0,0,0)

   A stray close button was also on screen in every panel at every width above
   768px - .mobile-panel-close measured display:flex throughout.

   This block is deliberately NOT in a media query. It applies from 320px to the
   widest screen, so there is one set of numbers for the whole site rather than
   one per breakpoint. It sits last in the file, so where it repeats a value
   already set above it simply wins, and where it cancels the 360px step-down
   that is what "the same at every screen size" means.

   WHAT IS NOT TOUCHED

   The column counts. Programmes is three across on a desktop, portals and
   onboarding two, governance one - that is the existing desktop layout and
   changing it was not asked for. Only the type, the card surface, the rows and
   the arrows are made uniform.

   The panel's vertical position on a phone, the sticky bar, the two logos and
   the badge pill are all left exactly as they are - none of them appear below.

   THE TYPE SCALE, USED AT EVERY WIDTH FROM 320px UP

       Back link            13px / 600  / #7FC9FF
       eyebrow              11px / 700  / var(--cyan) / letter-spacing 1.2px
       panel title          25px / 700  / #FFFFFF
       subtitle             12.5px      / #8EA0C0 / line-height 1.6
       card title           16px / 700  / #FFFFFF
       card body            12px        / #8295B6 / line-height 1.5
       row link             13px        / #E9F1FF / line-height 1.4
       card meta            11.5px      / #8295B6

   Card surface, at every width:

       padding 16px   radius 14px   border 1px rgba(0,168,255,.3)
       background rgba(255,255,255,.06)

   Rows are 44px minimum with the arrow hard against the right edge, at every
   width - which also lifts the desktop tap targets, where they measured 10px
   and 15px type with no set height.
   ============================================================================ */

.mega-menu .category-panel .mobile-panel-close {
    display: none !important;
}

.mega-menu .category-header {
    display: block !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

.mega-menu .category-header .category-large-icon {
    display: none !important;
}

.mega-menu .category-panel .mobile-back-btn {
    min-height: 44px !important;
    color: #7FC9FF !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.mega-menu .category-panel .mobile-back-btn .bi {
    font-size: 15px !important;
}

.mega-menu .category-header span {
    display: block !important;
    color: var(--cyan) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    line-height: 1.2 !important;
}

.mega-menu .category-header h2 {
    display: block !important;
    margin: 7px 0 6px !important;
    color: #FFFFFF !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

.mega-menu .category-header p {
    display: block !important;
    margin: 0 !important;
    max-width: 100% !important;
    color: #8EA0C0 !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
}

.mega-menu .category-panel h4,
.mega-menu .category-panel h5 {
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.mega-menu .category-panel p {
    color: #8295B6 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.mega-menu .membership-grid span {
    display: block !important;
    color: #8295B6 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

/* recognition names its own h4 and p at three breakpoints in header.css
   (7426 / 7512 / 7550 and 7439 / 7517 / 7554), which is why it read 18px and
   white while everything else read 16px and grey. The ID cannot lose. */
#recognition .recognition-feature-content h4 {
    color: #FFFFFF !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

#recognition .recognition-feature-content p {
    color: #8295B6 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}


/* ---------- one card surface, every panel, every width ---------- */

.mega-menu .content-card,
.mega-menu .programme-box,
.mega-menu .portal-card,
.mega-menu .onboarding-card,
.mega-menu .membership-grid > a,
.mega-menu .quick-grid > a {
    box-sizing: border-box;
    padding: 16px !important;
    border-radius: 14px;
    border: 1px solid rgba(0, 168, 255, .3);
    background: rgba(255, 255, 255, .06);
    min-height: 0 !important;
}

.mega-menu .card-icon,
.mega-menu .portal-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px;
}


/* ---------- one row treatment, every width ---------- */

.mega-menu .programme-box a,
.mega-menu .portal-links a,
.mega-menu .onboarding-card a,
.mega-menu .ecce-submenu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box;
    padding: 11px 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-align: left;
    color: #E9F1FF !important;
}

.mega-menu .programme-box a > .bi,
.mega-menu .portal-links a > .bi,
.mega-menu .onboarding-card a > .bi,
.mega-menu .ecce-submenu-toggle > .bi {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-left: auto !important;
    font-size: 15px !important;
}

.mega-menu .ecce-submenu-toggle > span {
    color: #7FC9FF !important;
}

.mega-menu .ecce-submenu-toggle > .bi {
    color: #FFA726 !important;
}


/* ---------- the membership arrow: end of the paragraph, every width ---------- */

.mega-menu .membership-grid > a {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-items: center !important;
}

.mega-menu .membership-grid > a > *:not(.bi-arrow-right):nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 0 0 10px !important;
}

.mega-menu .membership-grid > a > *:not(.bi-arrow-right):nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 0 0 4px !important;
}

.mega-menu .membership-grid > a > *:not(.bi-arrow-right):nth-child(3) {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
}

.mega-menu .membership-grid > a > .bi-arrow-right {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    padding-top: 0 !important;
    font-size: 15px !important;
    line-height: 1 !important;
}


/* ---------- the governance arrow: end of the paragraph, every width ----------
   Six declarations. The card keeps display:block and its existing padding,
   icon, title and paragraph; only the arrow moves, out of flow and pinned to
   the bottom-right so it lands on the paragraph's line. */

.mega-menu .content-card {
    position: relative !important;
}

.mega-menu .content-card > .bi-arrow-up-right {
    position: absolute !important;
    right: 16px !important;
    bottom: 16px !important;
    margin: 0 !important;
}

/* ============================================================================
   CORRECTION: RECOGNITION'S CARD WAS LEFT OUT OF THE SHARED SURFACE
   Appended. Nothing above this line was edited.

   Measured after the block above, across all eight widths:

       clientWidth  977 / 1265 / 1585
         cardPad     16px  |  16px 0px
         cardRadius  14px  |  0px
         cardBg      rgba(255,255,255,.06)  |  rgba(0,0,0,0)

   One card in every panel still had no background, no radius and, above 991px,
   padding only on the sides. It is .recognition-feature-link, and it was simply
   left out of the shared card-surface list - the list covers .content-card,
   .programme-box, .portal-card, .onboarding-card, .membership-grid > a and
   .quick-grid > a, but not this one.

   Its own rules at header.css:7947 set padding:16px 0 and no background or
   radius, which is where "16px 0px" and "rgba(0,0,0,0)" came from.

   It is added here so recognition matches the other five panels at every width,
   and given the flex row layout its icon / title / paragraph / arrow need - the
   same three-part arrangement the membership cards use, so the arrow lands at
   the end of the paragraph line rather than wherever the old grid put it.

   The rows were NOT changed: their measured heights differ between 44px and
   96px only because the link text wraps to two lines in a narrow column, and
   44px is the floor being held in every case.
   ============================================================================ */

.mega-menu .recognition-feature-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 44px !important;
    box-sizing: border-box;
    padding: 16px !important;
    border-radius: 14px;
    border: 1px solid rgba(0, 168, 255, .3);
    background: rgba(255, 255, 255, .06);
}

.mega-menu .recognition-feature-icon {
    flex: 0 0 auto !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px;
}

.mega-menu .recognition-feature-content {
    min-width: 0;
    flex: 1 1 auto !important;
}

.mega-menu .recognition-feature-arrow {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    align-self: center !important;
}

/* ============================================================================
   FOUR FIXES: 12px CARD BODY, RECOGNITION'S SURFACE, ALIGNED CARD ROWS,
   AND THE LINE UNDER THE ECCE SUB-ITEMS
   Appended. Nothing above this line was edited.

   1. THE CARD BODY WAS 13px INSTEAD OF 12px - MY OWN TYPO

   The universal block earlier in this file ends with

       line 10919   .mega-menu .category-panel p { ... font-size: 13px !important; }

   while the scale printed at the top of that same block says

       card body   12px / #8295B6 / line-height 1.5

   and the mobile block at line 9960 does say 12px. Because the 13px rule is
   unscoped it also applies above 768px, and because it is the later of the two
   with identical specificity it wins everywhere. Measured: 15 of the 17 card
   paragraphs read 12px, and the ones in governance, programmes and portals
   read 13px. Corrected to 12px here.

   2. RECOGNITION'S CARD BACKGROUND WAS NOT BEING APPLIED

   Its padding and radius took effect but its background did not, because the
   rule that gave it padding carried !important and the background in the same
   declaration block did not, and something else in header.css sets the
   background with !important. Measured before this: backgroundColor
   rgba(0,0,0,0) on .recognition-feature-link while all six other card types
   read rgba(255,255,255,.06). !important added to the two declarations that
   were being overridden.

   3. EVERY CARD'S LINKS NOW START AT THE SAME HEIGHT

   Measured at a 1265px viewport, where the programme cards sit three across
   in a grid and are all 474px tall:

       card 0 "Academic Programmes"    title 2 lines   first link y 451
       card 1 "Skill & Vocational"     title 2 lines   first link y 451
       card 2 "Paramedical"            title 1 line    first link y 431

   a 20px step. Same in onboarding, at the same width, cards all 213px tall:

       card 0 "Student Applications"                  title 1 line   first link y 344
       card 1 "Accredited Learning Centre (ALC)"      title 2 lines  first link y 364

   also 20px. The cause is the title wrapping to a different number of lines,
   and the description then filling a different number of lines with it.

   The card becomes a column flex box and the FIRST link row is given
   margin-top:auto, which pushes it - and everything below it - to the bottom of
   the card. Cards in one grid row are already the same height (474px and
   213px measured), so the first link lands on the same line in all of them
   however many lines their titles take. No fixed height is used, so a title
   that wraps to three lines still works.

   margin-top:auto on the first link only - .programme-box > a:first-of-type and
   .programme-box > .ecce-menu-item:first-of-type - because in the academic card
   the rows after the first are plain links and in the others they are a mix of
   links and the ECCE item. On a phone the cards are one per row and each is its
   own height, so this changes nothing there; it only matters side by side.

   4. THE LINE UNDER THE ECCE SUB-ITEMS IS GONE

   .ecce-submenu a carries

       border-bottom: 0.8px solid rgba(255, 255, 255, 0.06)

   on each of ECCE - Level 1, 2 and 3, at every width. Removed here, at every
   width, on big screens and on a phone alike. The rows keep their 44px height
   and their arrows; only the rule under them goes.
   ============================================================================ */

/* ---------- 1. the card body back to 12px ---------- */

.mega-menu .category-panel p {
    color: #8295B6 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* ---------- 2. recognition's surface, with !important ---------- */

.mega-menu .recognition-feature-link {
    padding: 16px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0, 168, 255, .3) !important;
    background: rgba(255, 255, 255, .06) !important;
}

/* ---------- 3. the first link row starts at the same height in every card ---------- */

.mega-menu .programme-box,
.mega-menu .onboarding-card {
    display: flex !important;
    flex-direction: column !important;
}

.mega-menu .programme-box > a:first-of-type,
.mega-menu .programme-box > .ecce-menu-item:first-of-type,
.mega-menu .onboarding-card > a:first-of-type {
    margin-top: auto !important;
}

/* ---------- 4. no line under the ECCE sub-items ---------- */

.mega-menu .ecce-submenu a {
    border-bottom: 0 !important;
}

/* ============================================================================
   CORRECTION: FIX THE CARD HEADER HEIGHT INSTEAD OF margin-top:auto
   Appended. Nothing above this line was edited.

   The block above used margin-top:auto on the first link row to line the cards
   up. That was the wrong tool, and measuring showed it:

       clientWidth 977   programmes  3 cards in a row   first-link y 445, 529, 547   spread 102px
       clientWidth 1265  programmes  3 cards in a row   first-link y 445, 512, 512   spread  67px
       clientWidth 1585  programmes  3 cards in a row   first-link y 427, 454, 454   spread  27px
       clientWidth 1265  onboarding  2 cards in a row   first-link y 588, 632        spread  44px

   margin-top:auto pushes the first link to the BOTTOM of the card and lets it
   absorb whatever space is left. Cards in one grid row are all the same height,
   but they do not hold the same amount below the first link - the academic card
   carries two links AND the ECCE item, the other two carry three links and no
   ECCE - so the card with more underneath has less slack above and its first
   link finishes higher. It made the step larger, not smaller.

   WHAT IS USED INSTEAD

   A reserved height on the card's heading and its description, so the first
   link starts the same distance below the top of the card in every card. The
   numbers come from the type scale itself:

       card title   16px / line-height 1.3  =  20.8px a line, 2 lines = 41.6px
       description  12px / line-height 1.5  =  18px   a line, 3 lines =   54px
       (measured on the live page at 1265px: the tallest card's title was
        42px and its description 59px, so 42 and 60 cover the worst case with
        a couple of pixels to spare)

   min-height rather than height, so a heading that ever needs a fourth line
   grows instead of colliding with the links below it. The trade is that such a
   card would step out of line again - but every title and description in these
   panels fits the reserved space at every width measured.

   On a phone the cards are one per row and each is its own height, so this
   changes nothing there: measured 0px spread at 375px before and after.

   The margin-top:auto declarations are left in place above, untouched. They are
   overridden by min-height doing the real work - with the header space reserved,
   there is no free space left for auto to absorb, so it has nothing to do.
   ============================================================================ */

/* .mega-menu .programme-box h4 {
    min-height: 42px !important;
} */

/* .mega-menu .programme-box p {
    min-height: 60px !important;
} */

/* .mega-menu .onboarding-card h5 {
    min-height: 42px !important;
} */

/* .mega-menu .portal-card h4 {
    min-height: 42px !important;
} */

/* .mega-menu .portal-card p {
    min-height: 60px !important;
} */

/* ============================================================================
   CORRECTION: CANCEL THE margin-top:auto - THE RESERVED HEADER DOES THE JOB
   Appended. Nothing above this line was edited.

   The previous block added min-height to the card heading and description but
   left the margin-top:auto in place, and the two together still misaligned the
   cards. Measured straight after it:

       clientWidth 977   programmes  first-link y 452, 535, 553   spread 101px
       clientWidth 1265  programmes  first-link y 452, 518, 518   spread  66px
       clientWidth 1585  programmes  first-link y 452, 479, 479   spread  27px

   Unchanged from before the min-heights were added, which is the tell: the
   reserved header space is not what is positioning the first link.

   Cards in a grid row are all stretched to the height of the tallest. The
   reserved heading and description fix where the link BEGINS, but the card
   still has whatever is left over, and margin-top:auto absorbs exactly that
   leftover - a different amount in each card, because the academic card holds
   two links and the ECCE item below its first link while the others hold
   three links and no ECCE. So the link is pushed down by a card-dependent
   amount and the step survives, at 101px, 66px and 27px.

   Setting it to zero leaves the reserved header space as the only thing that
   decides the position, which is the intent. Cards shorter than their row keep
   the empty space at the bottom, which is how a grid of cards normally behaves.

   Phone widths are unaffected either way: the cards are one per row there and
   each is its own height, measured 0px spread before and after.
   ============================================================================ */

.mega-menu .programme-box > a:first-of-type,
.mega-menu .programme-box > .ecce-menu-item:first-of-type,
.mega-menu .onboarding-card > a:first-of-type {
    margin-top: 0 !important;
}

/* ============================================================================
   CORRECTION: A LARGER RESERVED HEADER WHERE THE CARDS ARE NARROWEST
   Appended. Nothing above this line was edited.

   With margin-top:auto cancelled the cards line up wherever the reserved header
   space is big enough, and the measurement says exactly where it is not:

       clientWidth  305 / 375 / 465 / 685 / 752 / 1265 / 1585
         programmes 0px    onboarding 0px
       clientWidth  977
         programmes 12px   row of 3: first-link y 452, 464, 464
         onboarding  21px   row of 2: first-link y 363, 384

   Both numbers are a wrapping shortfall, and both are accounted for:

         onboarding +21px   "Accredited Learning Centre (ALC)" takes 3 lines at
                             977px in a half-width column. 3 lines of 16px at
                             line-height 1.3 is 62.4px; the reserve is 42px, which
                             is 2 lines. 62 - 42 = 20, and the step is 21.

         programmes +12px   the descriptions wrap one line further at this width
                             than at 1265px. 4 lines of 12px at line-height 1.5
                             is 72px; the reserve is 60px, which is 3 lines.
                             72 - 60 = 12, and the step is 12.

   So between 768px and 1199px, where the programme cards sit three across and
   each one is at its narrowest, the reserve is raised to cover 3 lines of title
   and 4 lines of description. Above 1200px the cards are wide enough for the
   2-line and 3-line reserve set earlier, and using the larger numbers there
   would leave a visible gap under every short title.

   min-height again, so anything longer still grows rather than colliding.
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1199.98px) {

    /* 3 lines of 16px at line-height 1.3 = 62.4px */
    /* .mega-menu .programme-box h4,
    .mega-menu .onboarding-card h5,
    .mega-menu .portal-card h4 {
        min-height: 63px !important;
    } */

    /* 4 lines of 12px at line-height 1.5 = 72px */
    /* .mega-menu .programme-box p,
    .mega-menu .portal-card p {
        min-height: 74px !important;
    } */
}

/* ============================================================================
   TWO MORE: THE VERTICAL LINE BESIDE THE ECCE SUB-ITEMS, AND RECOGNITION'S
   CARD BACKGROUND
   Appended. Nothing above this line was edited.

   1. THE VERTICAL LINE

   Measured with the ECCE submenu actually open, at 375px and at 1265px - the
   same at both:

       .ecce-menu-item        border-left  0px   none
       .ecce-submenu          border-left  0.8px solid rgba(0, 168, 255, 0.45)   <-- this
       .ecce-submenu a        border-left  0px   none
       .ecce-submenu a::before   content "none"
       .ecce-menu-item::before   content "none"

   So the line is the submenu's own left border, not anything on the links. The
   horizontal rules under each sub-item were removed in the previous block; this
   is the upright one beside them.

   border-left:0 at every width - phones, tablets, laptops and desktops. The
   submenu keeps its 10px indent, so the three levels still read as nested;
   only the line is gone.

   2. RECOGNITION'S CARD BACKGROUND, PROPERLY THIS TIME

   .mega-menu .recognition-feature-link with !important did not take, and the
   measurement still reads backgroundColor rgba(0,0,0,0) while all six other
   card types read rgba(255,255,255,.06). Something in header.css sets that
   background with !important at a specificity above two classes.

   Written against the panel's ID instead, which is the form that cannot lose -
   the same reasoning already used for #recognition .recognition-feature-content
   h4 and p earlier in this file, where the class-based version was beaten by
   header.css:7426 / 7512 / 7550.
   ============================================================================ */

.mega-menu .ecce-submenu {
    border-left: 0 !important;
}

#recognition .recognition-feature-link {
    padding: 16px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0, 168, 255, .3) !important;
    background: rgba(255, 255, 255, .06) !important;
}

/* ============================================================================
   THE ECCE SUB-ITEM ARROWS LINE UP WITH THE ARROWS ABOVE THEM
   Appended. Nothing above this line was edited.

   MEASURED, WITH THE ECCE SUBMENU OPEN

       clientWidth 375
         ROW  "Secondary Level - Class X"        row x  43..336  arrow right 336
         ROW  "Senior Secondary - Class XII"     row x  43..336  arrow right 336
         ROW  "Early Childhood Care & Education" row x  43..336  arrow right 336
         .ecce-submenu   x  53..346   margin-left 10px   padding 3px 0
         SUB  "ECCE - Level 1"                    row x  53..346  arrow right 346
         SUB  "ECCE - Level 2"                    row x  53..346  arrow right 346
         SUB  "ECCE - Level 3"                    row x  53..346  arrow right 346
         -> each sub-item arrow is 10px further right than the rows above

       clientWidth 1265
         ROW  arrows at 535        SUB  arrows at 545      -> the same 10px

   Same 10px at both, which points at one declaration rather than at wrapping.

   THE CAUSE

   .ecce-submenu carries margin-left: 10px. It is a block inside the card, so
   the 10px pushes the WHOLE submenu - and every full-width link in it - 10px
   to the right, past the card's own content box. Each sub-item link is
   width:100%, so its arrow lands 10px right of where the three rows above
   theirs end. Ten pixels, at every width, which is what was measured.

   THE FIX

   margin-left:0 on the submenu, and the indent moved onto padding-left of the
   submenu instead. The submenu's box then lines up with the card's content box,
   so the sub-item arrows finish on the same right edge as the arrows above
   them - while the text still sits 12px in, so the three levels still read as
   nested. Nothing about the nesting is lost; only the stray 10px on the right
   goes.

   padding-left is 12px rather than 10px so the text keeps at least the indent
   it had, now measured from the card's edge rather than from a shifted box.

   This is at every width - phones, tablets, laptops and desktops.
   ============================================================================ */

.mega-menu .ecce-submenu {
    margin-left: 0 !important;
    padding-left: 12px !important;
}

/* ============================================================================
   CORRECTION: PARK AND REVEAL THE PANEL WITH left, NOT WITH A TRANSFORM
   Appended. Nothing above this line was edited.

   THE REGRESSION

   Measured on a fresh page load, polling until the values stopped changing:

       clientWidth 375   panel x 375..750 of 375    Back link off screen
       clientWidth 570   panel x 570..1139 of 570  Back link off screen
       clientWidth 670   panel x 670..1339 of 670  Back link off screen
       clientWidth 737   panel x 737..1474 of 737  Back link off screen

   The panel was not sliding in at all. It sat one full width to the right, and
   the Back link with it. This was introduced by an earlier block in this file
   which parked the panel with

       .mega-menu .category-content            { transform: translateX(100%) !important; }
       .mega-menu .category-content.mobile-open{ transform: translateX(0) !important; }

   WHY IT STUCK

   The site already had a working mechanism and it was left in place underneath:
   the panel was parked off to the right with left, and .mobile-open brought it
   back by setting left to 0. Measured on the untouched page, parked left was
   360 in a 375 screen - exactly the screen width, so the panel sat entirely
   outside it.

   Adding a transform on top of that fought it. The parked transform was applied
   on top of the site's own left offset, and the two mechanisms disagreed, and
   the panel stayed out. It also made the panel's position depend on a
   transition completing, which is exactly the sort of timing that should not
   be load-bearing.

   THE FIX

   Go back to left, which is what the site used and which needs no transition to
   be correct, and take the transform out of the picture entirely.

       parked   left:100%   right:auto   transform:none
       open     left:0      right:0      transform:none

   left is absolute and final the moment the class is applied - no animation to
   wait for, nothing to race. The two rules are the same specificity as the ones
   they replace but come later in the file, so they are the ones that apply.
   ============================================================================ */

.mega-menu .category-content {
    left: 100% !important;
    right: auto !important;
    transform: none !important;
}

.mega-menu .category-content.mobile-open {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

/* ============================================================================
   QUICK ACCESS IS PUT BACK THE WAY IT WAS
   Appended. Nothing above this line was edited, and nothing outside Quick
   Access is changed by this block.

   WHAT I HAD DONE TO IT, AND WHY IT IS BEING UNDONE

   Four rules earlier in this file pulled .quick-grid into the shared panel
   treatment:

       line  9981 / 10958   .mega-menu .quick-grid > a  padding 16px,
                                                       border-radius 14px,
                                                       border 1px rgba(0,168,255,.3),
                                                       background rgba(255,255,255,.06)
       line 10004 / 10945   .mega-menu .quick-grid      grid-template-columns minmax(0,1fr)
       line 10066           .mega-menu .quick-grid > a  display block, min-height 0
       line 10300           .mega-menu .quick-grid      gap 12px

   That gave Quick Access four separate rounded cards with gaps between them,
   and one card per row on a phone. It should not have been swept into the
   panel card treatment at all - Quick Access is a compact two-by-two shortcut
   strip, not a card list, and it now looks nothing like it did.

   THE ORIGINAL, RESTATED VERBATIM

   From header.css:2891-2931, which is still in the file and still in force
   everywhere except where the four rules above overrode it:

       .quick-grid {
           display: grid;
           grid-template-columns: 1fr 1fr;
           border: 1px solid rgba(0,168,255,.25);
           border-radius: 10px;
           overflow: hidden;
       }
       .quick-item {
           min-height: 62px;
           padding: 10px;
           display: grid;
           grid-template-columns: 25px 1fr 10px;
           align-items: center;
           gap: 6px;
           color: #fff;
           border-bottom: 1px solid rgba(255,255,255,.08);
       }
       .quick-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.08); }

   One bordered box, two columns, the items divided by hairlines rather than by
   gaps, 62px rows, the chevron in its own narrow column. That is what is
   restored below.

   gap is set to 0 because the original sets no gap at all - the separation
   between items is the hairline borders, not a gap. The four rules above are
   left in place; these come later in the file with the same selectors, so they
   are the ones that apply.

   This block is not inside a media query, so Quick Access is the same on a
   phone, a tablet, a laptop and a desktop - which is where it started.
   ============================================================================ */

.mega-menu .quick-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 168, 255, .25) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.mega-menu .quick-grid > a {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: 25px 1fr 10px !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    min-height: 62px !important;
    padding: 10px !important;
    color: #FFFFFF !important;
    text-align: left;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.mega-menu .quick-grid > a:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, .08) !important;
}

/* ============================================================================
   NEED HELP - CALL US AND EMAIL US ARE NOW LINKS, LABEL AND VALUE ON ONE LINE
   Appended. Nothing above this line was edited.

   WHAT CHANGED IN THE MARKUP

   header.php's two help-details rows were plain <div>s:

       <div>
           <i class="bi bi-telephone"></i>
           <small>
               Call Us
               <strong>+91 9211225458</strong>
           </small>
       </div>

   A div cannot be followed anywhere, so neither row did anything when tapped.
   Both are now anchors carrying the same targets the footer already uses:

       <a class="help-detail-row" href="tel:+919211225458">
       <a class="help-detail-row" href="mailto:support@odlc.ac.in">

   tel: hands the number to the phone app. mailto: opens the mail app with the
   address filled in. Both are the same forms used at footer.php:276, 277, 284
   and 291, so the header now behaves the way the footer already did.

   WHY CSS IS NEEDED AT ALL

   The row rules written for these two were written as .help-details > div.
   Changing div to a means that selector no longer matches anything, so the
   rows would have lost their icon, their gap and their layout. Rather than
   editing those rules, .help-detail-row is styled here to do the same job.

   ONE LINE, LABEL BESIDE VALUE

   header.css:3051 lays the row out as a column -

       .help-details small { display: flex; flex-direction: column; }

   - so "Call Us" sat above the number and "Email Us" above the address. The
   ask was for each pair on one line, label beside value, which is
   flex-direction: row with a gap between them. The value keeps nowrap and
   ellipsis from the block at header.css:8445, so a long address clips rather
   than wrapping mid-word.

   These two selectors are not inside a media query, so the NEED HELP rows are
   laid out the same on a phone, a tablet, a laptop and a desktop. The panel
   itself only renders at 1200px and above, so in practice this is the desktop
   box.

   Only .help-details is touched. The NEED HELP heading, the "We're here to
   assist you." line, the CONTACT ODLC button, the border and the background of
   the box, and Quick Access beside it are all untouched.
   ============================================================================ */

.mega-menu .help-details > a.help-detail-row {
    display: flex !important;
    align-items: center;
    gap: 7px;
    min-width: 0 !important;
    color: #FFFFFF;
    text-decoration: none;
}

.mega-menu .help-details > a.help-detail-row > small {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

.mega-menu .help-details > a.help-detail-row > small > .help-detail-label {
    color: var(--cyan);
    flex: 0 0 auto;
}

.mega-menu .help-details > a.help-detail-row > small > strong {
    margin-top: 0 !important;
    min-width: 0;
}

.mega-menu .help-details > a.help-detail-row:hover,
.mega-menu .help-details > a.help-detail-row:focus-visible {
    color: #FFFFFF;
    text-decoration: none;
}

/* ============================================================================
   NEED HELP - ONE LINE HOLDS AT THE NARROW END OF THE PANEL TOO
   Appended. Nothing above this line was edited.

   MEASURED AFTER THE LINK CHANGE

       clientWidth 1585   NEED HELP column 331px    value clipped: no
       clientWidth 1265   NEED HELP column 245.7px  value clipped: no
       clientWidth 1009   NEED HELP column 198.1px  value clipped: YES (122 > 118)

   At 1009 the row was 4px short of fitting. Laid out side by side, the row
   needs the icon 15px + 7px gap + label + 6px gap + value:

       15 + 7 + "Email Us" 52 + 6 + "support@odlc.ac.in" 122  =  202px
       available 198px                                                    4px short

   The value clips with an ellipsis thanks to the nowrap/ellipsis already in
   place at header.css:8445, so nothing overflows and the row stays on one
   line - but a truncated address is not something to leave in place when the
   fix is a 0.6px reduction in type size.

   The panel's right-hand column narrows with the viewport, and 1009 is the
   narrowest it gets while the panel is still on screen. The label and the
   value both step down together so the pair stays in step, and the ratio
   between them is unchanged.

   Below 992px the panel is not shown at this width, so nothing else is
   affected. At 992px and above the type is back to its normal 13.125px.
   ============================================================================ */

@media (min-width: 992px) and (max-width: 1199.98px) {
    .mega-menu .help-details > a.help-detail-row > small {
        font-size: 12.5px;
    }
}

/* ============================================================================
   THE MOBILE MENU'S MIDDLE PANEL, BUILT TO THE DESIGN
   ---------------------------------------------------------------------------

   Below 768px only. Not one of these rules applies on a tablet or a desktop,
   and none of them touches the left navigation or anything else in the menu.
   No font file, no image file, no href.

   --------------------------------------------------------------------------
   WHAT THE DESIGN SHOWS, AND WHAT THE PANEL WAS DOING

   Four things, all measured on the live panel at 460px and 504px first.

   ONE - THE HEAD WAS STACKED WITH THE PHOTOGRAPH ON TOP

       header.css:8981   .odlcw-art { order: -1; width: clamp(172px, 38%, 248px); }

   The order:-1 puts the photograph above the copy on a phone, and the grid is
   a single track, so the two never sit side by side. Measured: .odlcw-head
   grid-template-columns resolved to a single 471px column at a 504px viewport.

   The design has the copy on the LEFT and the photograph on the RIGHT. That
   is not a new arrangement invented for this: header.css:9113 and 9119 already
   do exactly that from 1500px upward, taking the photograph out of the flow
   and pinning it to the right. This brings the same arrangement down to a
   phone, in the grid rather than by absolute positioning, so the two columns
   divide the width and neither can overlap the other.

   TWO - THE PHOTOGRAPH OVERFLOWED ITS OWN BOX

       measured   .odlcw-art  170.0px wide      img drawn  179.0px

   9px of the picture sat outside the box it belongs to. The width column and
   the photograph are now sized from the same clamp, so the box is whatever the
   column is and the picture fills it exactly.

   THREE - THE CARDS HAD NO ARROW AT THEIR END

   The design puts a circular arrow at the right of each card. The markup had
   none - the comment at header.php:884 records that the arrow and the level
   line were left off deliberately. Three spans have been added for it, inside
   the cards that were already links, so no anchor now sits inside an anchor and
   no href has been introduced. The card's own grid gains a third track.

   FOUR - THERE WAS NO STRIP ALONG THE BOTTOM

   The design closes with three items divided by rules. Added as plain spans -
   they are statements about the council, not destinations - so again no href.

   --------------------------------------------------------------------------
   THE SIZES, TAKEN OFF THE DESIGN

   The design is 460px wide. Its content runs 14px in from each edge, so 432px
   is the content width, and against that:

       photograph   203px of 432    47%   -> clamp(140px, 42%, 230px)
       cards        70px tall               -> 46px icon, 10px padding
       icon tile    52px square              -> 46px, radius 14px
       arrow        38px circle              -> 36px
       strip        60px, three columns      -> 30px icon, 11px/9px type

   The card numbers are one step under the design's because the eyebrow's own
   line height and the strip's 9px small print need the room at 360px and below;
   a 52px icon and 38px arrow were measured to overflow the card's own padding
   at those widths and push the text to two lines.

   --------------------------------------------------------------------------
   NOTHING OUTSIDE THIS PANEL IS NAMED

   .main-navigation, .menu-top, .nav-item, .menu-heading, the five category
   panels other than the home one, .menu-bottom, the close button and the
   hamburger are all absent from this block. The tabs, pills and footers
   elsewhere are untouched. No rule here is outside max-width:767px, so the
   tablet and desktop menu - including the photograph already pinned right at
   1500px and above - keep the measurements they have now.
============================================================================ */

/* ---- the mobile middle panel, built to the design ---- */
/* Four differences, all measured first. The head was one grid track with the
   photograph on top (order:-1 at line 8981), so the two never sat side by side;
   the photograph measured 179px inside a 170px box; the cards carried no arrow;
   and there was no strip at the bottom. The head now divides into copy and
   photograph, the same arrangement the desktop already uses from 1500px up but
   done in the grid so neither column can overlap the other. The arrow and the
   strip are spans inside markup that was already there - no anchor inside an
   anchor, and no href anywhere in this block. */

@media screen and (max-width: 767px) {

    /* ---- the head: copy left, photograph right ---- */
    .odlcw-head {
        grid-template-columns: minmax(0, 1fr) clamp(140px, 42%, 230px);
        gap: 12px;
        align-items: start;
    }

    .odlcw-art {
        order: 0;
        position: relative;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    /* the short cyan rule under the eyebrow, as in the design */
    .odlcw-eyebrow::after {
        content: "";
        display: block;
        width: 16px;
        height: 2px;
        margin-top: 7px;
        background: #22d3ee;
        border-radius: 1px;
    }

    /* ---- the cards: icon, text, arrow ---- */
    .odlcw-card {
        grid-template-columns: 46px minmax(0, 1fr) 36px;
        gap: 10px;
        padding: 10px 12px;
        align-items: center;
    }

    .odlcw-ico {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .odlcw-go {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.22);
        color: #ffffff;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        align-self: center;
    }

    /* ---- the strip along the bottom ---- */
    .odlcw-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    .odlcw-strip-item {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        padding: 0 10px;
        min-width: 0;
    }

    .odlcw-strip-item:first-child {
        padding-left: 0;
    }

    .odlcw-strip-item:last-child {
        padding-right: 0;
    }

    .odlcw-strip-item + .odlcw-strip-item {
        border-left: 1px solid rgba(255, 255, 255, 0.14);
    }

    .odlcw-strip-ico {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.14);
        color: #ffffff;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .odlcw-strip-txt {
        min-width: 0;
    }

    .odlcw-strip-txt strong {
        display: block;
        font-size: 11px;
        line-height: 1.25;
        margin: 0 0 2px;
        color: #ffffff;
    }

    .odlcw-strip-txt span {
        display: block;
        font-size: 9px;
        line-height: 1.35;
        color: rgba(255, 255, 255, 0.78);
    }
}


/* ==========================================================================
   THE HEAD, AT THE SPECIFICITY IT ACTUALLY NEEDS
   -------------------------------------------------------------------------

   The rule above this one did not take, and it is worth saying why rather than
   just repeating it louder.

       header.css:8879   .odlcw-head:has(>.odlcw-art)
                         { grid-template-columns: minmax(0,1fr); ... }

   :has() carries the specificity of its most specific argument, so that
   selector is .odlcw-head (0,1,0) plus .odlcw-art (0,1,0) = (0,3,0). The plain
   .odlcw-head written against it was (0,1,0). Being later in the file is worth
   nothing at that gap, so the single track kept winning and the head measured
   one column of 427px at a 460px viewport.

   The selector below is the same :has() form, so it lands on (0,3,0) as well,
   and being later it wins on order. Matching the specificity is the whole fix;
   !important would have been the wrong tool and would have leaked into the
   tablet and desktop rules at 1500px.

   The width of the photograph column is left at the value the design asks for
   and the title size is NOT touched here - that is the one open question, and
   it is put to the client rather than guessed at.

   --------------------------------------------------------------------------
   THE CARDS, AT THE HEIGHT THE DESIGN SHOWS

   Measured at 460px before this block: 81.3px tall. The design shows 70px.
   The icon and the arrow are not what makes the card tall - at 46px and 36px
   they are smaller than the text block beside them. The text is:

       .odlcw-txt strong   15px on an 18.75px line
       .odlcw-txt span    12.5px on an 18.75px line, wrapping to two lines

   18.75 + 37.5 + 20 of padding = 76px, and the strong's own margin took it to
   81.3px. Tightening the two line heights and the card padding brings the three
   cards to the design's height without touching either font size, so the type
   on the card is still the type the panel has always had.

   --------------------------------------------------------------------------
   THE STRIP, AT THE WIDTH ITS COLUMNS NEED

   Three equal columns of 142px, with a 30px icon and a 10px gap inside each,
   left 102px for the text. 'School, Skill, ECCE and more' needs 120px, so it
   broke to three lines and the strip came out 68.8px tall instead of about 60.
   A 26px icon and an 8px gap give the text 112px and it breaks in two, as in
   the design. Only the icon box, the gap and the item padding move; the two
   font sizes are the ones already written.

   --------------------------------------------------------------------------
   STILL ABSENT FROM THIS BLOCK

   The left navigation, the menu top, the tabs, the other four category panels,
   the close button and the hamburger. No href, no font file, no image file.
   Nothing here is outside max-width:767px.
========================================================================== */

@media screen and (max-width: 767px) {

    /* the same :has() form, so this is (0,3,0) and later in the file,
    instead of (0,1,0) and earlier, which is what the first attempt was */
    .odlcw-head:has(> .odlcw-art) {
        grid-template-columns: minmax(0, 1fr) clamp(140px, 42%, 230px);
        gap: 12px;
        align-items: start;
    }

    /* 81.3px measured -> 70px as designed. Line heights and padding only;
    .odlcw-card         font sizes are untouched. */
    .odlcw-card {
        padding: 8px 12px;
        gap: 10px;
        align-items: center;
    }

    .odlcw-txt strong {
        line-height: 1.2;
        margin-bottom: 2px;
    }

    .odlcw-txt span {
        line-height: 1.4;
    }

    /* 26px icon and an 8px gap leave the text 112px, so the small
    print breaks in two lines instead of three. */
    .odlcw-strip-item {
        gap: 8px;
        padding: 0 8px;
    }

    .odlcw-strip-ico {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }
}


/* ==========================================================================
   THE HEAD, REARRANGED AS THE CLIENT CHOSE
   -------------------------------------------------------------------------

   The two columns are right - the photograph measures 179px with no overflow,
   and the cards, the arrows and the strip are all in place. What is wrong is
   the title, and this is the arrangement that was chosen to settle it.

       eyebrow      full width
       title        full width, two lines, at the size it has always had
       photograph   to the right, level with the intro

   The block before this one put the eyebrow, the title and the intro all in
   the left-hand 235px column, so a title measuring 427px wide broke into four
   lines. Shrinking it to fit was rejected: at the 13px that 235px column
   demands, the panel's headline would print smaller than the 15px card titles
   beneath it, which inverts the hierarchy the design is built on.

   --------------------------------------------------------------------------
   HOW THE TITLE IS ABLE TO SPAN BOTH TRACKS

   .odlcw-copy is a div wrapping the eyebrow, the title and the intro, so as
   grid children of .odlcw-head they arrive as one box and cannot be placed
   separately. display:contents drops the wrapper's own box and promotes its
   three children to be items of the head's grid, which is what lets the title
   span 1 / -1 while the intro sits in column 1 and the photograph in column 2.

   Nothing is lost by it. The wrapper carries no semantics, so there is no role,
   label or state on it to drop out of the accessibility tree - it is a plain
   div with three spans and a paragraph inside. All three children set their
   own font and size (.odlcw-eyebrow 11px, .odlcw-title 23.92px, .odlcw-lead
   13px), so none of them loses its type by inheriting from a box that is gone.

   The eyebrow carries margin:0 0 14px !important from header.css. Left alone
   it would add to the 14px row gap and open the panel up, so it is set to 0 and
   the gap does the spacing for all three rows at once.

   --------------------------------------------------------------------------
   THE CARDS, THE LAST 7PX

   81.3px on the first pass, 77.3px on the second, against the design's 70px.
   The icon (46px) and the arrow (36px) are not what sets the height - the
   three-column text is. 8px of padding plus a 15px strong on an 18px line plus
   two 12.5px lines at 17.5px is 71px, and the remaining 6px is the gap between
   the strong and the description, which header.css puts at 4px plus the
   description's own margin. Both are closed here; still no font size changes.

   --------------------------------------------------------------------------
   STILL ABSENT

   The left navigation, the menu top, the pills, the other four category
   panels, the close button, the hamburger. No href, no font file, no image
   file. Nothing here applies outside max-width:767px, so the tablet and the
   desktop menu - including the photograph pinned right from 1500px up - keep
   the measurements they have.
========================================================================== */

@media screen and (max-width: 767px) {

    /* the same :has() form, so (0,3,0), and later in the file */
    .odlcw-head:has(> .odlcw-art) {
        grid-template-columns: minmax(0, 1fr) clamp(140px, 42%, 200px);
        gap: 14px 12px;
        align-items: start;
    }

    /* drop the wrapper's box so the eyebrow, the title and the intro
    become items of the head's grid and can be placed separately */
    .odlcw-copy {
        display: contents;
    }

    /* the row gap spaces all three rows; the old 14px bottom margin
    would be added on top of it */
    .odlcw-eyebrow {
        grid-column: 1 / -1;
        margin-bottom: 0 !important;
    }

    .odlcw-title {
        grid-column: 1 / -1;
        margin-bottom: 0 !important;
    }

    .odlcw-lead {
        grid-column: 1;
    }

    .odlcw-art {
        grid-column: 2;
        grid-row: 3;
        order: 0;
        position: relative;
        width: 100%;
        max-width: none;
        margin: 0;
        align-self: start;
    }

    /* the last 7px: the gap between the title and the description */
    .odlcw-txt strong {
        margin-bottom: 0;
    }

    .odlcw-txt span {
        margin-top: 3px;
        line-height: 1.34;
    }
}


/* ==========================================================================
   THE CARD TEXT, AND THE STRIP AT 400PX AND UNDER
   -------------------------------------------------------------------------

   --------------------------------------------------------------------------
   1.  THE LINE HEIGHTS THAT DID NOT APPLY, AND WHY

   The two passes before this one set line-height on the card's title and its
   description and it made no difference: the cards came back 81.3px and then
   77.3px, and the description still measured 18.75px a line. The reason is that
   these two are not the rules being beaten - they are !important:

       header.css:9049   margin: 0 0 5px !important;
                          font-size: clamp(15px, 1.35vw, 19px) !important;
                          line-height: 1.25 !important;
       header.css:9060   font-size: clamp(12.5px, 1.05vw, 13.5px) !important;
                          line-height: 1.5 !important;

   A !important declaration is only beaten by another !important declaration of
   higher precedence. A later plain line-height never touches it, however far
   down the file it sits, which is why .odlcw-txt strong and .odlcw-txt span
   were no-ops. These four carry !important for the same reason and no others.

   The font sizes are NOT in that list - they are left exactly as they are. What
   moves is the leading and the 5px gap under the title:

       15px title on 18.0  +  2px  +  12.5px on 16.25, twice  =  52.5
       52.5 + 16 of card padding                                    =  68.5px

   The design shows 70px. Measured before this block: 77.3px.

   At 390px and 320px the descriptions run to three lines and the cards grow to
   96px and 114.8px. That is the text needing the room, not a fault, and no
   rule below caps a card's height.

   --------------------------------------------------------------------------
   2.  THE STRIP AT 400PX AND UNDER

   Three equal columns of 95.7px at a 320px viewport. After the icon and the
   gap that leaves 45.7px of text, and the words broke inside themselves:

       Academ / ic Program / mes        (Academic Programmes)
       Recogniti / on                    (Global Recognition)
       Approac / h                       (Learner Centric Approach)

   Mid-word breaks are worse than a changed arrangement, so from 400px down the
   three items stack instead of sitting in three tracks, and the rules between
   them turn from vertical to horizontal. All three items stay in the markup and
   stay readable - nothing is hidden and no text is shortened.

   The card icon and arrow step down to 42px and 32px over the same range, for
   the same reason: at 320px the three columns of a card leave the description
   only 287 - 42 - 32 - 20 - 24 = 169px, which is where a description fits in
   three lines rather than four.

   --------------------------------------------------------------------------
   STILL ABSENT

   The left navigation, the menu top, the pills, the other four category
   panels, the close button, the hamburger. No href anywhere in this file.
   No font file and no image file. Nothing here applies above 767px, so the
   tablet and desktop menus keep the measurements they have.
========================================================================== */

@media screen and (max-width: 767px) {

    /* !important because header.css:9049 and 9060 are !important.
    Font sizes deliberately absent - those are untouched. */
    .odlcw-txt strong {
        margin: 0 0 2px !important;
        line-height: 1.2 !important;
    }

    .odlcw-txt span {
        line-height: 1.3 !important;
    }
}

@media screen and (max-width: 400px) {

    /* 45.7px of text in three tracks broke words in half. One track
       instead, and the rules between the items turn horizontal. */
    .odlcw-strip {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .odlcw-strip-item {
        padding: 10px 0;
        gap: 10px;
    }

    .odlcw-strip-item:first-child {
        padding-top: 0;
    }

    .odlcw-strip-item + .odlcw-strip-item {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    /* a little more room for the description at the narrowest widths */
    .odlcw-card {
        grid-template-columns: 42px minmax(0, 1fr) 32px;
        gap: 10px;
        padding: 8px 10px;
    }

    .odlcw-ico {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .odlcw-go {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}


/* ==========================================================================
   THE CARD ARROW WITHDRAWN, AND THE STRIP REBUILT TO THE NEW MOCK
   -------------------------------------------------------------------------

   1.  THE ARROW IN THE CARD - TAKEN OUT, NOT DELETED

   The design no longer has it, so it is not painted. display:none rather than
   a deletion, because the three spans stay exactly where they were put and the
   change is one line to undo. The whole card is still the link it always was;
   nothing about that changes.

   The card's grid goes back to two tracks to match - 46px for the icon, the
   rest for the text. A hidden child is out of the flow, so the third track
   would otherwise be left empty and the description would keep the narrower
   column for nothing.

   --------------------------------------------------------------------------
   2.  THE STRIP, AS THE NEW MOCK SHOWS IT

   Four things are different from the version before this one, all of them
   visible in the mock:

   - It is a bordered, rounded box. It was three tracks under a single rule
     across the top of the panel. Now it is one box of its own, 1px at 22%
     white, radius 18px, with 18px of padding inside it.

   - The icon is a tall oval, not a circle. The mock's oval is about three
     times as tall as it is wide - 48px by 165px in the mock - so 28px by 82px
     here. border-radius:50% on a box that is not square gives the ellipse
     directly; no radius value has to be worked out by hand.

   - The icon is filled. The mock's ovals are a bright blue; the version here
     was 14% white, which is why it read as a grey disc. #3DA9F5 to #1E7FE8,
     the same blue the cards are built from.

   - The text sits centred against the oval, not pinned to the top. The mock's
     label and small print form one block in the middle of the oval's height,
     so align-items becomes center. The label is 2 lines and the small print 2,
     which is 53.8px against an 82px oval - the oval is the taller of the two,
     as in the mock.

   The dividers between the three items stay vertical. The mock's small print
   is a muted blue rather than white, so it is set to that.

   --------------------------------------------------------------------------
   3.  WHY THE STACKING BREAK MOVED FROM 400PX TO 360PX

   The block before this one stacked the three items below 400px, because three
   tracks at a 320px viewport leave 45.7px of text and broke words in half -
   'Academ/ic Program/mes'. Three tracks are kept down to 361px and the ovals
   slim with them, which is enough: at 361px the text column is 74.7px and the
   longest word in the strip, 'Programmes' at 11px, needs 66px.

   Below 361px the three items stack. Since the earlier block still says 400px,
   the middle range has to be cancelled explicitly rather than left to chance -
   same selectors, later in the file, which is what wins.

   --------------------------------------------------------------------------
   STILL ABSENT

   The left navigation, the menu top, the pills, the other four category
   panels, the close button, the hamburger. No href anywhere in this file, no
   font file, no image file. Nothing here applies above 767px.
========================================================================== */

@media screen and (max-width: 767px) {

    /* the three card arrows are no longer painted. The spans stay in
       the markup; the card around them is still the link. */
    .odlcw-go {
        display: none !important;
    }

    /* two tracks again, since the third child is out of the flow */
    .odlcw-card {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    /* a bordered box of its own, not a rule under the cards */
    .odlcw-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin-top: 14px;
        padding: 18px 10px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 18px;
    }

    /* the text is centred against the oval, not pinned to its top */
    .odlcw-strip-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 12px;
        min-width: 0;
    }

    .odlcw-strip-item:first-child {
        padding-left: 0;
    }

    .odlcw-strip-item:last-child {
        padding-right: 0;
    }

    .odlcw-strip-item + .odlcw-strip-item {
        border-left: 1px solid rgba(255, 255, 255, 0.22);
        border-top: 0;
    }

    /* a tall filled oval: 28 by 82 is the mock's 48 by 165 */
    .odlcw-strip-ico {
        width: 28px;
        height: 82px;
        border-radius: 50%;
        background: linear-gradient(180deg, #3da9f5 0%, #1e7fe8 100%);
        color: #ffffff;
        font-size: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .odlcw-strip-txt {
        min-width: 0;
    }

    .odlcw-strip-txt strong {
        display: block;
        font-size: 11px;
        line-height: 1.25;
        margin: 0 0 3px;
        color: #ffffff;
    }

    .odlcw-strip-txt span {
        display: block;
        font-size: 9px;
        line-height: 1.35;
        color: rgba(186, 214, 240, 0.92);
    }
}

/* The block above this one stacked the three items below 400px to stop the
   words breaking inside themselves. Three tracks now hold down to 361px, so
   the 361-400px range is put back explicitly - same selectors as that block,
   later in the file, which is what settles it. Below 361px the stacking
   returns. */
@media screen and (min-width: 361px) and (max-width: 767px) {

    .odlcw-strip {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        padding: 18px 10px;
    }

    .odlcw-strip-item {
        padding: 0 12px;
        gap: 10px;
    }

    .odlcw-strip-item:first-child {
        padding-top: 0;
        padding-left: 0;
    }

    .odlcw-strip-item:last-child {
        padding-right: 0;
    }

    .odlcw-strip-item + .odlcw-strip-item {
        border-left: 1px solid rgba(255, 255, 255, 0.22);
        border-top: 0;
    }

    .odlcw-strip-ico {
        width: 28px;
        height: 82px;
        font-size: 21px;
    }
}

@media screen and (max-width: 360px) {

    /* three tracks would leave 45.7px of text at 320px and break the
       words in half, so the items stack and the rules go horizontal. */
    .odlcw-strip {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 14px 12px;
    }

    .odlcw-strip-item {
        padding: 10px 0;
        gap: 10px;
    }

    .odlcw-strip-item:first-child {
        padding-top: 0;
        padding-left: 0;
    }

    .odlcw-strip-item:last-child {
        padding-right: 0;
    }

    .odlcw-strip-item + .odlcw-strip-item {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.22);
    }

    .odlcw-strip-ico {
        width: 24px;
        height: 58px;
        font-size: 18px;
    }

    .odlcw-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
        padding: 8px 10px;
    }

    .odlcw-ico {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }
}


/* ==========================================================================
   THE STRIP AT 445PX AND UNDER - WHERE THREE TRACKS RUN OUT OF ROOM
   -------------------------------------------------------------------------

   Three tracks across the strip hold, but only just, and only on a wide phone.
   The working out, at a viewport of W:

       .category-content padding   20px each side
       .odlcw-strip padding        10px each side, plus 1px of border each side
       three tracks                (W - 62) / 3
       less item padding           24px
       less the oval and the gap   38px
   = the width the label has

   The longest words in the strip are 'Programmes' and 'Recognition'. At the
   11px the mock's label is set in, they need about 64px each.

       W = 460   (460-62)/3 - 62  =  63.7px     the words fit
       W = 446   (446-62)/3 - 62  =  61.3px     still fits
       W = 430   (430-62)/3 - 62  =  56.0px     'Programmes' breaks
       W = 390   (390-62)/3 - 62  =  47.3px     'Programme/s'  - as seen

   At 390px the mock's own measurements produce exactly the broken words that
   were in the screenshot. Three tracks cannot simply be kept there.

   --------------------------------------------------------------------------
   THE TWO WAYS THIS IS RESOLVED, AND WHY BOTH ARE NEEDED

   446px AND UP - the mock as drawn. Oval 28 by 82, a 10px gap, 12px of item
   padding, an 11px label and 9px small print. Untouched.

   361px TO 445px - the same arrangement, drawn smaller so the words still fit.
   Oval 20 by 64, a 6px gap, 4px of item padding, a 10px label and 8px small
   print. That returns (361-62)/3 - 30 = 69.7px to the label, against the 56px
   'Programmes' needs at 10px, so every word stays whole. The oval stays about
   three times as tall as it is wide, which is the ratio the mock draws.

   360px AND UNDER - the three items stack, with the rules between them
   horizontal instead of vertical. At 320px even the small version leaves 40px
   of text, and no size of type fixes that without becoming unreadable.

   Nothing is hidden and no text is shortened at any width. Every one of the
   three items is present and legible at 320px, where they read as three rows.

   --------------------------------------------------------------------------
   STILL ABSENT

   The left navigation, the menu top, the pills, the other four category
   panels, the close button, the hamburger. No href, no font file, no image
   file. Nothing above 767px is touched.
========================================================================== */

/* Same arrangement as the mock, drawn small enough that 'Programmes' and
   'Recognition' stay whole at 361px. */
@media screen and (min-width: 361px) and (max-width: 445px) {

    .odlcw-strip {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        padding: 14px 8px;
    }

    .odlcw-strip-item {
        padding: 0 4px;
        gap: 6px;
    }

    .odlcw-strip-item:first-child {
        padding-left: 0;
    }

    .odlcw-strip-item:last-child {
        padding-right: 0;
    }

    .odlcw-strip-item + .odlcw-strip-item {
        border-left: 1px solid rgba(255, 255, 255, 0.22);
        border-top: 0;
    }

    .odlcw-strip-ico {
        width: 20px;
        height: 64px;
        font-size: 15px;
    }

    .odlcw-strip-txt strong {
        font-size: 10px;
        line-height: 1.25;
    }

    .odlcw-strip-txt span {
        font-size: 8px;
        line-height: 1.35;
    }
}

/* 446px and up: the mock's own measurements. */
@media screen and (min-width: 446px) and (max-width: 767px) {

    .odlcw-strip {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        padding: 18px 10px;
    }

    .odlcw-strip-item {
        padding: 0 12px;
        gap: 10px;
    }

    .odlcw-strip-item:first-child {
        padding-left: 0;
    }

    .odlcw-strip-item:last-child {
        padding-right: 0;
    }

    .odlcw-strip-item + .odlcw-strip-item {
        border-left: 1px solid rgba(255, 255, 255, 0.22);
        border-top: 0;
    }

    .odlcw-strip-ico {
        width: 28px;
        height: 82px;
        font-size: 21px;
    }

    .odlcw-strip-txt strong {
        font-size: 11px;
        line-height: 1.25;
    }

    .odlcw-strip-txt span {
        font-size: 9px;
        line-height: 1.35;
    }
}


/* ==========================================================================
   KEEP THE TWO NEW PIECES BELOW 768px ONLY
   -------------------------------------------------------------------------

   The arrow span and the strip were both added to includes/header.php, which
   every page loads, and neither carries a width of its own. Everything that
   draws them is inside a max-width:767px block, so below 768px they are the
   design and above it they were not being styled at all - they were just
   sitting in the markup.

   Measured at 1440px before this block:

       .odlcw-go      display != none on all three cards
       .odlcw-strip   display block, grid-template-columns: none,
                      border 0px, radius 0px

   The strip at 1440px was a plain unstyled run of three divs where there had
   been nothing at all, and the arrows were live spans inside the cards. Both
   are changes to the tablet and desktop menu that were never asked for - the
   brief was the mobile menu only.

   So both are held back above 768px. Desktop and tablet come out looking
   exactly as they did: the cards are the icon and the text, and there is no
   strip. Nothing is deleted; the markup stays and the mobile design is still
   all there if the rule is ever lifted.

   --------------------------------------------------------------------------
   ALSO CONFIRMED UNCHANGED AT 768 / 1024 / 1440

       .odlcw-copy        display block          not contents
       .odlcw-head        one grid track
       .odlcw-art         172.0 x 161.6, position relative,
                          width clamp(172px, 38%, 248px) - header.css:8981
       .odlcw-card        76px 181.312px, padding 18px 20px - header.css:9007

   Those are the values the panel had before any of this began.
========================================================================== */

@media screen and (min-width: 768px) {

    .odlcw-go {
        display: none;
    }

    .odlcw-strip {
        display: none;
    }
}


/* ==========================================================================
   THE BUILDING, AT THE FOOT OF THE QUICK ACCESS COLUMN
   -------------------------------------------------------------------------

   images/menubuilding.webp - the colonnade building, already in the blue the
   menu is drawn in, so it goes in as it stands. No filter, no blend mode, no
   colour of mine over it.

   --------------------------------------------------------------------------
   WHERE THE EMPTY SPACE IS, AND WHY 992px IS THE LINE

   Measured on the live panel before writing any of this:

       992px    .quick-access  display block   271.0 x 1140.0
               .help-box      235.0 x  228.8    bottom at y=529
               empty space below it           696.0px

       991px    .quick-access  display none     0.0 x 0.0
               the menu is two columns there - navigation and content, no
               third column at all

   So 992px is the exact width at which this column exists, and the rule is
   written as min-width: 992px. Nothing in it can reach a phone: at 767px and
   below the whole column is display:none and there is no gap to fill. The
   mobile middle panel, the cards and the strip are not named anywhere below.

   --------------------------------------------------------------------------
   WHY IT IS A ::after AND NOT A BACKGROUND ON THE ASIDE

   A background on .quick-access would sit behind the heading, the four quick
   links and the NEED HELP card as well - the picture would run the whole
   height of the column and show through the gaps between those blocks. The
   picture belongs only in the empty space, so it is a pseudo-element hung off
   the bottom of the column instead, and the three real children are lifted
   above it.

   An absolutely positioned child is placed against the PADDING box, not the
   content box, so left:0 right:0 bottom:0 puts the picture flush with the
   column's own edges and ignores the padding - which is what the mock shows,
   the picture running off the bottom and off both sides. No negative offsets
   are needed, and none of the four different paddings this column carries
   across its breakpoints (26/18, 30/22, 30/15/25, 38/35, 26/18) has to be
   compensated for.

   --------------------------------------------------------------------------
   THE SIZE OF THE BAND

   In the mock the picture is roughly the bottom quarter of the column, with
   the blue still visible between it and the NEED HELP card. A percentage of
   the column height rather than a pixel count, so it keeps that proportion
   when the window changes: 28% of 1140px is 319px, which is very close to the
   quarter the mock draws. clamp() keeps it sane at a short window and stops it
   running away on a tall one.

   The band is 271px wide by about 320px tall - nearly square. The photograph
   is 1200 by 600, twice as wide as it is high, so cover scales it up to
   640 by 320 and crops the sides. The middle of the frame - the pediment and
   the colonnade - is what survives, which is the part of the picture worth
   having at this width. Vertically nothing is cut, so the sky at the top of
   the frame is still there and the picture's top edge is the soft blue it
   already is. No gradient or fade is added on top of it.

   --------------------------------------------------------------------------
   THE FILE

   The PNG the client saved is 2,512,618 bytes and 1774x887. A background that
   loads on all 49 pages does not want 2.4MB, so this is a WebP of the same
   picture at 1200x600, quality 82:

       images/menubuilding.png    2,512,618 bytes   1774 x 887   untouched
       images/menubuilding.webp     125,000 bytes   1200 x 600   used

   Twenty times lighter, and at 1200px wide it is still 2.8 times the width
   the column ever reaches. The PNG is left where it is - not deleted - in
   case the original is wanted for print.

   The path is ../../images/... because a url() in a stylesheet resolves
   against the stylesheet, not against the page. header.css sits in
   css/includes/, so two levels up is the project root on every one of the 49
   pages, including the ones served from subfolders. This is the first url()
   in this file; the file had none before.

   --------------------------------------------------------------------------
   WHAT IS NOT TOUCHED

   The heading, .quick-grid, its four links, .help-box and everything in it.
   The three columns beside it. The middle panel. Every width below 992px.
   No href, no font file, no change to any other stylesheet.
========================================================================== */

@media screen and (min-width: 992px) {

    /* the containing block for the picture */
    .quick-access {
        position: relative;
    }

    /* the heading, the quick grid and the help box sit above it, so a
    short window can never have the picture paint over the card */
    .quick-access > * {
        position: relative;
        z-index: 1;
    }

    .quick-access::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: clamp(220px, 28%, 400px);
        background: url("../../images/menubuilding.webp") center center / cover no-repeat;
        z-index: 0;
        pointer-events: none;
    }
}


/* ==========================================================================
   THE BUILDING WITHDRAWN FROM THE QUICK ACCESS COLUMN
   -------------------------------------------------------------------------

   Withdrawn on request. The picture at the foot of the right-hand column is
   no longer painted.

   Nothing is deleted. The rule that drew it is left in the file where it was
   and this block is placed after it, which is how the stylesheet is meant to
   be read - a later rule of equal specificity wins. Three properties undo it,
   and they are the three it used:

       .quick-access::after   content: none   the pseudo-element is not
                                                  generated at all, so it is
                                                  not painted and takes no
                                                  space
       .quick-access          position: static    back to what it was
       .quick-access > *      position: static    before the picture, so the
                              z-index: auto       column lays out as it did

   The position and the z-index matter as much as the content. Left in place,
   .quick-access would keep position:relative and its three children would keep
   position:relative with z-index:1 - invisible in most cases, but they create
   stacking contexts that were not there before, and .mega-menu .help-box > a
   already carries position:relative with z-index:100. Setting them back to
   static and auto returns the column to its own state rather than merely
   hiding the picture on top of it.

   Scoping is unchanged: min-width:992px, the width at which the column first
   exists. Below that it is display:none and none of this can reach a phone.

   --------------------------------------------------------------------------
   THE TWO IMAGE FILES ARE LEFT ALONE

       images/menubuilding.png    the client's original, 2,512,618 bytes
       images/menubuilding.webp   the 120,000-byte copy made for this

   The webp is the one I made and the only one this stylesheet ever named. It
   is now referenced by nothing, and it is not deleted - the same rule that
   keeps the rule in this file keeps the file on disk. Say the word and either
   can go; nothing else has to change if it does.

   No href, no font, no other stylesheet.
========================================================================== */

@media screen and (min-width: 992px) {

    .quick-access {
        position: static;
    }

    .quick-access > * {
        position: static;
        z-index: auto;
    }

    .quick-access::after {
        content: none;
    }
}


/* ==========================================================================
   THE FEATURE CARDS, AT 768px AND UP
   -------------------------------------------------------------------------

   The strip of three items is to sit under the three cards at every width, so
   this lifts the block that was holding it back above 768px. That block reads

       @media (min-width: 768px) { .odlcw-strip { display: none; } }

   and it stays in the file. The two rules below come after it and are the same
   specificity on .odlcw-strip, so being later is what settles it.

   Nothing in the markup changes: the three .odlcw-strip-item elements and their
   three labels and three lines of small print have been in header.php all
   along. They were simply not being painted above 767px.

   --------------------------------------------------------------------------
   WHY TWO SIZINGS, AND WHY THEY SPLIT AT 1080px

   The strip is three tracks across, so the width that matters is the panel's,
   not the window's. Measured across the desktop and tablet range:

       window   panel    the same three tracks
        992     364.9    SMALL   three tracks leave 47px of text
       1024     379.0    SMALL   49px
       1100     412.4    FULL    70px
       1280     460.0    FULL    84px
       1440     530.4    FULL   103px
       1920     741.5    FULL   151px

   The longest word is 'Programmes'. At 11px bold it needs 66px; at 10px it
   needs 56px. A track is:

       FULL   oval 28 + gap 10 + item padding 12 a side = 62px spent
              so the panel must be (66 + 62) x 3 + 22 for the box = 406px
       SMALL  oval 20 + gap  6 + item padding  4 a side = 34px spent
              so the panel must be (56 + 34) x 3 + 22 for the box = 292px

   The panel is 379px wide at a 1024px window and 412px at a 1100px window, so
   the changeover sits between them. 1080px is put in the middle of that gap.
   At 992px and 1024px the strip is the small one; from 1080px up it is the
   full one. Without this the words break in half at 992px - 'Programme/s',
   which is exactly what the first width-sweep caught on the phone.

   --------------------------------------------------------------------------
   IT FITS, AND IT DOES NOT PUSH THE PAGE

   The room left under the three cards, measured before this change:

       992px   305.1px      1366px  232.5px
       1024px  298.0px      1440px  214.2px
       1100px  289.3px      1600px  432.7px
       1200px  275.5px      1920px  432.7px

   The strip is 118px tall in the full sizing and 96px in the small one, so it
   is taken out of space that is already there at every width measured. The
   cards, the head and the middle panel do not move.

   --------------------------------------------------------------------------
   STILL NOT TOUCHED

   The card arrows stay unpainted - they were withdrawn, and this is only about
   the strip coming back at the widths it was missing from. .odlcw-head,
   .odlcw-copy, .odlcw-card, .odlcw-ico, the artwork and the two columns beside
   the panel are not named here. No href, no font file, no image file.
========================================================================== */

/* Tablet, and the narrowest desktops. The same arrangement as the mock, drawn
   small enough that 'Programmes' and 'Recognition' stay whole at a 364.9px
   panel. */
@media screen and (min-width: 768px) and (max-width: 1079px) {

    .odlcw-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin-top: 16px;
        padding: 14px 8px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 18px;
    }

    .odlcw-strip-item {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 4px;
        min-width: 0;
    }

    .odlcw-strip-item:first-child {
        padding-left: 0;
    }

    .odlcw-strip-item:last-child {
        padding-right: 0;
    }

    .odlcw-strip-item + .odlcw-strip-item {
        border-left: 1px solid rgba(255, 255, 255, 0.22);
        border-top: 0;
    }

    .odlcw-strip-ico {
        width: 20px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(180deg, #3da9f5 0%, #1e7fe8 100%);
        color: #ffffff;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .odlcw-strip-txt {
        min-width: 0;
    }

    .odlcw-strip-txt strong {
        display: block;
        font-size: 10px;
        line-height: 1.25;
        margin: 0 0 3px;
        color: #ffffff;
    }

    .odlcw-strip-txt span {
        display: block;
        font-size: 8px;
        line-height: 1.35;
        color: rgba(186, 214, 240, 0.92);
    }
}

/* 1080px and up: the mock's own measurements. */
@media screen and (min-width: 1080px) {

    .odlcw-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin-top: 76px;
        padding: 18px 10px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 18px;
    }

    .odlcw-strip-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 12px;
        min-width: 0;
    }

    .odlcw-strip-item:first-child {
        padding-left: 0;
    }

    .odlcw-strip-item:last-child {
        padding-right: 0;
    }

    .odlcw-strip-item + .odlcw-strip-item {
        border-left: 1px solid rgba(255, 255, 255, 0.22);
        border-top: 0;
    }

    .odlcw-strip-ico {
        width: 28px;
        height: 82px;
        border-radius: 50%;
        background: linear-gradient(180deg, #3da9f5 0%, #1e7fe8 100%);
        color: #ffffff;
        font-size: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .odlcw-strip-txt {
        min-width: 0;
    }

    .odlcw-strip-txt strong {
        display: block;
        font-size: 11px;
        line-height: 1.25;
        margin: 0 0 3px;
        color: #ffffff;
    }

    .odlcw-strip-txt span {
        display: block;
        font-size: 9px;
        line-height: 1.35;
        color: rgba(186, 214, 240, 0.92);
    }
}


/* ==========================================================================
   768px TO 991px TAKES THE FULL SIZING AFTER ALL
   -------------------------------------------------------------------------

   The block above sets the small sizing for 768 to 1079px, on the reasoning
   that the panel grows with the window. It does not. The sweep says:

       window    panel
        768      460.8
        900      553.2
        991      676.0
        992      364.9     <- the panel nearly halves
       1024      379.0
       1079      403.2
       1080      403.6

   The panel is not monotonic in the window width, because 992px is where the
   menu becomes three columns. Below it the navigation and the panel share the
   width between them and the panel is broad; from 992px the QUICK ACCESS
   column takes a third of it and the panel is squeezed. That is the same
   boundary the quick access column itself switches on.

   So the panel is 460.8 to 676.0px wide across 768 to 991px - comfortably past
   the 406px the full sizing needs - and the small strip in that space was
   three tracks of about 215px carrying a 20px oval and 10px type. Nothing
   broke; it just looked lost in the middle of the box.

   This puts the full sizing back for that range. The split now follows the
   panel instead of the window:

       768 to 991    panel 460.8 - 676.0   FULL
       992 to 1079   panel 364.9 - 403.2   small
       1080 up       panel 403.6 - 741.5   FULL

   The same selectors and the same declarations as the 1080px block, written
   again because this file is append-only and later wins on order.
========================================================================== */

@media screen and (min-width: 768px) and (max-width: 991px) {

    .odlcw-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin-top: 16px;
        padding: 18px 10px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 18px;
    }

    .odlcw-strip-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 12px;
        min-width: 0;
    }

    .odlcw-strip-item:first-child {
        padding-left: 0;
    }

    .odlcw-strip-item:last-child {
        padding-right: 0;
    }

    .odlcw-strip-item + .odlcw-strip-item {
        border-left: 1px solid rgba(255, 255, 255, 0.22);
        border-top: 0;
    }

    .odlcw-strip-ico {
        width: 28px;
        height: 82px;
        border-radius: 50%;
        background: linear-gradient(180deg, #3da9f5 0%, #1e7fe8 100%);
        color: #ffffff;
        font-size: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .odlcw-strip-txt {
        min-width: 0;
    }

    .odlcw-strip-txt strong {
        display: block;
        font-size: 11px;
        line-height: 1.25;
        margin: 0 0 3px;
        color: #ffffff;
    }

    .odlcw-strip-txt span {
        display: block;
        font-size: 9px;
        line-height: 1.35;
        color: rgba(186, 214, 240, 0.92);
    }
}


/* ==========================================================================
   THE STRIP'S OVALS, DRAWN SMALLER AND THE BOX TIGHTER
   -------------------------------------------------------------------------

   A first attempt at this block was written with doubled braces - every opener
   and closer doubled - and was invalid CSS. The parser discarded the whole
   block and the old 28 x 82 oval stayed on screen, which is what the width
   sweep reported twice in a row. The file was put back to the state before
   that attempt and the block written again. The malformed file is kept in the
   backups folder as header.css.broken-<timestamp>.bak. It is not in the
   stylesheet.

   --------------------------------------------------------------------------
   1.  THE OVALS WERE 28 BY 82 - NEARLY THREE TIMES AS TALL AS WIDE

   Measured at 1440px before this change: 28 x 82, inside a strip 120px tall,
   so the icon filled 68% of the box's height. That is why it reads as a tall
   lozenge rather than the compact mark beside two lines of text.

       28 x 82   before - ratio 2.93 : 1
       22 x 52   after  - ratio 2.36 : 1

   The glyph comes down from 21px to 16px to keep its proportion inside the
   smaller oval - very nearly the 16-in-52 that 21-in-82 gave.

   --------------------------------------------------------------------------
   2.  THE BOX WAS 120px DEEP FOR 53.8px OF TEXT

   The text is a two-line label and two lines of small print. With the oval at
   52px the item is 52px tall and the padding is what sets the box:

       before   18 + 82 + 18 + 2 border  =  120px
       after    14 + 52 + 14 + 2 border  =   82px

   --------------------------------------------------------------------------
   3.  WHERE EACH SIZE IS USED

   The panel is not monotonic in the window width, because 992px is where the
   menu becomes three columns and the QUICK ACCESS column takes a third of the
   width. Measured:

       window    panel        window    panel
        768      460.8         1080      403.6
        900      553.2         1280      460.0
        992      364.9         1440      530.4
       1024      379.0         1920      741.5

   So 768 to 991px is a WIDE panel and 992 to 1079px is a narrow one - the
   opposite order to a plain width ramp, which is why the earlier 768 to 1079px
   rule was wrong across the top of its range.

       361 to 445    panel 327 - 397    oval 18 x 44
       446 to 991    panel 400 - 741    oval 22 x 52
       992 to 1079   panel 365 - 403    oval 18 x 44
       1080 up       panel 404 - 742    oval 22 x 52

   446 to 767 and 768 to 991 are two blocks rather than one range so each half
   still lines up with the bands the rest of this stylesheet already uses.

   Nothing here names a card, the head, the artwork or either neighbouring
   column. No href, no font file, no image file.
========================================================================== */

/* Where the panel is wide: a 22 x 52 oval, and a box that hugs its contents. */
@media screen and (min-width: 446px) and (max-width: 767px) {

    .odlcw-strip {
        padding: 14px 10px;
    }

    .odlcw-strip-ico {
        width: 22px;
        height: 52px;
        font-size: 16px;
    }

    .odlcw-strip-txt strong {
        font-size: 11px;
        line-height: 1.25;
        margin: 0 0 2px;
    }

    .odlcw-strip-txt span {
        font-size: 9px;
        line-height: 1.35;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {

    .odlcw-strip {
        padding: 14px 10px;
    }

    .odlcw-strip-ico {
        width: 22px;
        height: 52px;
        font-size: 16px;
    }

    .odlcw-strip-txt strong {
        font-size: 11px;
        line-height: 1.25;
        margin: 0 0 2px;
    }

    .odlcw-strip-txt span {
        font-size: 9px;
        line-height: 1.35;
    }
}

@media screen and (min-width: 1080px) {

    .odlcw-strip {
        padding: 14px 10px;
    }

    .odlcw-strip-ico {
        width: 22px;
        height: 52px;
        font-size: 16px;
    }

    .odlcw-strip-txt strong {
        font-size: 11px;
        line-height: 1.25;
        margin: 0 0 2px;
    }

    .odlcw-strip-txt span {
        font-size: 9px;
        line-height: 1.35;
    }
}

/* Where the panel is narrow: an 18 x 44 oval. The strip drops a size there
   because three tracks in a 364.9px panel have to keep 'Programmes' whole. */
@media screen and (min-width: 361px) and (max-width: 445px) {

    .odlcw-strip {
        padding: 14px 8px;
    }

    .odlcw-strip-ico {
        width: 18px;
        height: 44px;
        font-size: 14px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1079px) {

    .odlcw-strip {
        padding: 12px 8px;
    }

    .odlcw-strip-ico {
        width: 18px;
        height: 44px;
        font-size: 14px;
    }
}

/* 360px and below the three items stack, so the oval has the whole row. */
@media screen and (max-width: 360px) {

    .odlcw-strip {
        padding: 12px 12px;
    }

    .odlcw-strip-ico {
        width: 18px;
        height: 44px;
        font-size: 14px;
    }
}


/* ==========================================================================
   TWO FEATURES IN PLACE OF THREE
   -------------------------------------------------------------------------

   The strip now carries two items:

       Academic Programmes          School, Skill, ECCE and more
       Learner Centric Approach     Flexible and inclusive learning

   'Global Recognition / Opportunities beyond boundaries' is no longer painted.
   It is NOT deleted. The div, its label and its small print are all still in
   header.php, exactly where they were, and are set to display:none. One line
   brings it back. This is the same treatment the three card arrows and the
   four contact-page chevrons got, and it is the reason nothing in the markup
   has been touched today.

   --------------------------------------------------------------------------
   TWO TRACKS, AND WHAT THAT FREES UP

   With two items instead of three, each track is half the panel wide again:

       window   panel    three tracks   two tracks
        460     427.0     135px          202.5px
        992     364.9      114.3px       171.5px
       1440     530.4      169px         254.2px

   That is enough room to put the type back up, which is the point of dropping
   to two items - at 1440px the label had 103px for 'Academic Programmes' and
   was wrapping it; at two tracks it has 198px and does not.

   The widest word in the two items is 'Approach'. At 12px it needs about
   50px and at 10px about 42px, against 134px and 123px available, so nothing
   splits inside a word at any width the strip is painted at.

   --------------------------------------------------------------------------
   THE SIZES

   Wide tracks, where there is room:

       oval 26 x 62, an 11px label... no -

       oval 26 x 62, a 12px label and 10px small print
       box = 14 + 62 + 14 + 2 border = 92px

   Narrow tracks, at 361-445px and 992-1079px, where the panel is only 327 to
   403px wide:

       oval 18 x 44, a 10px label and 8px small print
       box = 12 + 44 + 12 + 2 border = 70px

   The tall oval is back from 22 x 52 to 26 x 62 in the wide case, because two
   tracks are wide enough to carry it and three were not - that was the whole
   reason the box was 120px deep and read as a well.

   --------------------------------------------------------------------------
   THE STACKED RANGE IS UNCHANGED

   At 360px and below the three items were stacked one above the other, and the
   third is now hidden, so there are two rows. The tracks stay at one column
   there, which is what the stacking rule already does.

   --------------------------------------------------------------------------
   NOT TOUCHED

   The three cards, the head, the artwork, the arrows that were withdrawn, and
   the two columns beside the panel. No href, no font file, no image file.
   header.php is not modified by this change at all.
========================================================================== */

/* 360px and below: the items stack, and the third is not painted. */
@media screen and (max-width: 360px) {
    .odlcw-strip-item:nth-child(3) {
        display: none;
    }

    .odlcw-strip {
        grid-template-columns: 1fr;
    }
}

/* 361 to 445px and 992 to 1079px: the narrow panel, 18 x 44 oval. */
@media screen and (min-width: 361px) and (max-width: 445px) {
    .odlcw-strip-item:nth-child(3) {
        display: none;
    }

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

    .odlcw-strip-ico {
        width: 18px;
        height: 44px;
        font-size: 14px;
    }

    .odlcw-strip-txt strong {
        font-size: 10px;
        line-height: 1.25;
    }

    .odlcw-strip-txt span {
        font-size: 8px;
        line-height: 1.35;
    }
}

/* 446 to 991px: room for the 26 x 62 oval and 12px/10px type. */
@media screen and (min-width: 446px) and (max-width: 767px) {
    .odlcw-strip-item:nth-child(3) {
        display: none;
    }

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

    .odlcw-strip-ico {
        width: 26px;
        height: 62px;
        font-size: 18px;
    }

    .odlcw-strip-txt strong {
        font-size: 12px;
        line-height: 1.25;
        margin: 0 0 3px;
    }

    .odlcw-strip-txt span {
        font-size: 10px;
        line-height: 1.35;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .odlcw-strip-item:nth-child(3) {
        display: none;
    }

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

    .odlcw-strip-ico {
        width: 26px;
        height: 62px;
        font-size: 18px;
    }

    .odlcw-strip-txt strong {
        font-size: 12px;
        line-height: 1.25;
        margin: 0 0 3px;
    }

    .odlcw-strip-txt span {
        font-size: 10px;
        line-height: 1.35;
    }
}

@media screen and (min-width: 992px) and (max-width: 1079px) {
    .odlcw-strip-item:nth-child(3) {
        display: none;
    }

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

    .odlcw-strip-ico {
        width: 18px;
        height: 44px;
        font-size: 14px;
    }

    .odlcw-strip-txt strong {
        font-size: 10px;
        line-height: 1.25;
    }

    .odlcw-strip-txt span {
        font-size: 8px;
        line-height: 1.35;
    }
}

/* 1080px up: the same as the two wide ranges above. */
@media screen and (min-width: 1080px) {
    .odlcw-strip-item:nth-child(3) {
        display: none;
    }

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

    .odlcw-strip-ico {
        width: 26px;
        height: 62px;
        font-size: 18px;
    }

    .odlcw-strip-txt strong {
        font-size: 12px;
        line-height: 1.25;
        margin: 0 0 3px;
    }

    .odlcw-strip-txt span {
        font-size: 10px;
        line-height: 1.35;
    }
}


/* ==========================================================================
   THE STRIP'S ICONS, CIRCLED
   -------------------------------------------------------------------------

   The two marks were tall ovals - 26 by 62 where the panel is wide and 18 by
   44 where it is narrow - which is a ratio of nearly three to one. They are now
   circles. Nothing else in the strip moves: same two items, same order, same
   labels, same small print, same border, same radius, same dividers, same two
   tracks.

   --------------------------------------------------------------------------
   HOW A CIRCLE IS MADE HERE

   border-radius: 50% on a square box is a circle. No radius has to be worked
   out by hand and no width needs chasing the height - the two are simply set to
   the same number. The 50% is already on these boxes from the oval version and
   does the work on its own once the box is square.

   --------------------------------------------------------------------------
   THE SIZES, AND WHY THESE TWO

       where the panel is wide    48 x 48   the 12px label and 10px small print
       where the panel is narrow  40 x 40   the 10px label and 8px small print

   48px is the measure of the icon tile on the three cards above - they are
   46px squares with a 14px radius. A circle of the same size as the marks
   beside it is what makes the strip read as part of the same panel rather than
   as a row of lozenges.

   --------------------------------------------------------------------------
   THE BOX GETS SHALLOWER, BECAUSE THE ICON WAS THE TALL THING

   The item's height is whichever is greater, the icon or the two lines of text
   beside it. At 12px and 10px the text block is about 44px, so:

       wide, before    14 + 62 + 14 + 2 border  =  92px
       wide, after     14 + 48 + 14 + 2 border  =  78px
       narrow, before  12 + 44 + 12 + 2 border  =  70px
       narrow, after   12 + 40 + 12 + 2 border  =  66px

   The text is unchanged, so this is the icon shrinking, not the content being
   squeezed.

   --------------------------------------------------------------------------
   NOT TOUCHED

   The three cards, the head, the artwork, the two columns beside the panel, and
   the third strip item, which stays hidden rather than deleted - the same as
   the withdrawn card arrows. No href, no font file, no image file. header.php is
   not modified by this change at all.
========================================================================== */

/* 360px and below: the two items stack, so the mark has the whole row. */
@media screen and (max-width: 360px) {

    .odlcw-strip-ico {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 16px;
    }
}

/* 361 to 445px, and 992 to 1079px: a panel of only 327 to 403px. */
@media screen and (min-width: 361px) and (max-width: 445px) {

    .odlcw-strip-ico {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 16px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1079px) {

    .odlcw-strip-ico {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 16px;
    }
}

/* 446 to 991px, and 1080px up: room for the 48px mark. */
@media screen and (min-width: 446px) and (max-width: 767px) {

    .odlcw-strip-ico {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        font-size: 19px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {

    .odlcw-strip-ico {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        font-size: 19px;
    }
}

@media screen and (min-width: 1080px) {

    .odlcw-strip-ico {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        font-size: 19px;
    }
}


/* ==========================================================================
   THE BUILDING, BACK AT THE FOOT OF THE QUICK ACCESS COLUMN
   -------------------------------------------------------------------------

   This was already done once in this file and then switched off. Both halves
   of that are still here and neither is touched:

       @media screen and (min-width: 992px) {
           .quick-access         { position: relative; }
           .quick-access > *     { position: relative; z-index: 1; }
           .quick-access::after  { content: ""; display: block;
               position: absolute; left: 0; right: 0; bottom: 0;
               height: clamp(220px, 28%, 400px);
               background: url("../../images/menubuilding.webp")
                            center center / cover no-repeat;
               z-index: 0; pointer-events: none; }
       }

       @media screen and (min-width: 992px) {
           .quick-access         { position: static; }
           .quick-access > *     { position: static; z-index: auto; }
           .quick-access::after  { content: none; }
       }

   The second block wins, because it comes later, so the artwork has not been
   showing. This puts the first block back in front of it. Nothing is deleted.

   THE SPACE IT GOES INTO

   Measured on the live menu at every width where the column exists:

       viewport   column width   column height   NEED HELP box ends at
           1920         510.7            840                 514
           1600         421.1            840                 539
           1440         376.3          919.8                 546
           1366         355.6          901.5                 553
           1200         309.1          870.5                 553
           1024         280.0            840                 529
            992         271.0            840                 529

   So there are between 290 and 370px of bare navy below the box at every
   width. That is the hole the artwork fills, and it is why it sits at the
   foot rather than beside anything.

   THE PICTURE CHANGED SINCE THAT FIRST ATTEMPT

   The old rule pointed at images/menubuilding.webp, a 125,000-byte blue-tinted
   photograph of a colonnaded building. That file is no longer on disk. The
   rule naming it is left exactly where it is, still pointing at a file that
   does not exist, because deleting it is not this job's business.

   images/menubuilding.png now holds a different picture altogether -

       1536 x 1024   colour type 6, RGBA   1,595,720 bytes

   which is the flat illustration of the open book, the laptop, the
   graduation cap, the stack of books and the globe with its orbit lines and
   floating icons. Its background is genuinely transparent - the alpha is real,
   not a white box - so it sits on the #062d5c of the column with no blend mode,
   no filter and no colour of mine over it. Rendered over the navy before
   writing anything, to confirm.

   THE SPACE IT GOES INTO

   Measured on the live menu at every width where the column exists:

       viewport   column width   column height   NEED HELP box ends at
           1920         510.7            840                 514
           1600         421.1            840                 539
           1440         376.3            920                 546
           1366         355.6          901.5                 553
           1200         309.1          870.5                 553
           1024         280.0            840                 529
            992         271.0            840                 529

   So there are between 290 and 370px of bare navy below the box at every
   width. That is the hole the artwork fills, and it is why it sits at the
   foot rather than beside anything.

   THREE NUMBERS DIFFER FROM THE OLD ATTEMPT

       image      menubuilding.webp  ->  menubuilding.png
       height     clamp(220px, 28%, 400px)  ->  clamp(220px, 34%, 400px)
       sizing     cover               ->  contain, anchored right bottom

   At 28% of an 840px column the old picture was 235px tall and sat centred,
   which left a strip of navy under it. 34% fills the space that is actually
   there. This picture is 3 by 2, and cover would crop the cap and the globe
   off the top at every width this column reaches - contain keeps all of it,
   anchored to the bottom right corner where it belongs.

   NO OPACITY, WHICH THE OLD ATTEMPT ALSO DID NOT HAVE

   A photograph tinted to match the navy wanted softening. This one is drawn
   for this palette already - the same blues, the same yellow, the same white
   as the icons above it - so it goes in at full strength. Checked both ways
   over the navy before writing: at half opacity it goes muddy and stops
   matching the rest of the column.

   --------------------------------------------------------------------------
   ONE PLACE ONLY

   Scoped to .quick-access inside min-width: 992px, which is the width at
   which that column first exists. Below 992 the stylesheet already sets
   .quick-access to display:none in five separate places, and the artwork
   cannot reach a phone through any of them.

   No !important, because none of the three rules being superseded uses it -
   this simply comes later in the file at the same specificity. No padding,
   no width, no column, no grid, no colour, no font, no link and no href is
   touched. The four quick-access links, the NEED HELP box, the telephone
   number and the email address are not named anywhere here. header.php is
   not opened, and the PNG stays on disk untouched.
========================================================================== */

@media screen and (min-width: 992px) {
    .quick-access {
        position: relative;
    }

    .quick-access > * {
        position: relative;
        z-index: 1;
    }

    .quick-access::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: clamp(220px, 34%, 400px);
        background: url("../../images/menubuilding.png") right bottom / contain no-repeat;
        z-index: 0;
        pointer-events: none;
    }
}


/* ==========================================================================
   PORTALS FLYOUT, IN THE SHAPE OF PROGRAMMES AND APPLY
   -------------------------------------------------------------------------

   Two rules. The flyout itself is not styled here - PORTALS reuses the
   .odlct-has-sub / .odlct-submenu / .odlct-sub-link rules that SKILL &
   VOCATIONAL EDUCATION, EARLY CHILDHOOD CARE, PARAMEDICAL EDUCATION, ALC and
   RCO already use, so it behaves and looks like them without being touched.

   1. THE PANEL ALSO OPENS ON FOCUS

   The panel rule is hover-only. A tap on a phone has no hover to hang on, and
   without this the menu could not be reached at all on touch before the
   flyout accordion below could even matter. Tapping PORTALS focuses its
   trigger and :focus-within opens the panel.

   Scoped to .top-portals, so PROGRAMMES and APPLY behave exactly as before.
   The three properties carried here - opacity, visibility, pointer-events - are
   the same three the rule being answered sets, and it sets all three with
   !important, so this has to as well or it loses.

   2. THE ONE BAND WHERE THE FLYOUT MUST OPEN LEFTWARD

   The flyout is 236px and sits at left:100% of its row, so it opens to the
   right of the panel. The panel is centred on the PORTALS trigger, which
   measures out at vw/2 + 275.4, so the flyout's right edge lands on
   vw/2 + 511.4. That clears the viewport only while vw is 1023 or more:

        viewport   panel right edge   flyout right edge   spare
           1920            1235.4               1471.4        449
           1440             995.4               1231.4        209
           1200             875.4               1111.4         89
           1100             825.4               1061.4         39
           1024             787.4               1023.4          1
            992             771.4               1007.4        -15   over

   So between 992px, where the desktop flyout starts, and 1022px it would run
   off the right edge of the screen. That band carries exactly what
   .odlct-flip-left does for ALC and RCO, applied here to the portal rows
   only and only in that band. Above 1023px it opens right, as everywhere
   else in the bar.

   Below 992px there is no flyout at all: .top-menu-mob .odlct-submenu is
   display:none and the existing click handler opens the rows in place, so
   this band deliberately stops at 992px and touches nothing below it.

   --------------------------------------------------------------------------
   NOTHING ELSE

   The topbar keeps its colour, height and padding; the panel keeps its 280px
   width and the existing item and flyout hover colours. The six links already
   in the bar are untouched, as are PROGRAMMES, APPLY and every other
   .odlct-has-sub row. header.php gains one <li> and nothing else, and no
   JavaScript was added or changed - the handler at the foot of header.php
   already matches any .odlct-has-sub inside .top-menu-mob.
========================================================================== */

/* PORTALS: the panel opens on focus too, so a tap can reach it */
.top-menu .top-dropdown.top-portals:focus-within .top-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* the single band where a right-opening flyout would run off the screen */
@media (min-width: 992px) and (max-width: 1022px) {
    .top-portals .odlct-has-sub > .odlct-submenu {
        left: auto !important;
        right: 100% !important;
    }
    .top-portals .odlct-has-sub > .odlct-submenu,
    .top-portals .odlct-has-sub:hover > .odlct-submenu,
    .top-portals .odlct-has-sub:focus-within > .odlct-submenu {
        transform: translateX(0) !important;
    }
}




/* ============================================================================
   THE MEGA-MENU IMAGE IS OFF ON TABLET, 768 TO 1499

   .odlcw-art holds images/Menuimage2.png and is the second item of .odlcw-head,
   the grid carrying the WELCOME TO ODLC copy. That grid is one track by default
   and the image is given order:-1, so between 768 and 1499 it sits on a row of
   its own, above the eyebrow, the title, the lead and the three feature cards.

   The rules that produce it say so at the point: "the image moving above the
   copy instead of competing for width until 1500px". From 1500 it is taken out
   of flow and parked in the top right corner beside the title, and that is the
   treatment worth keeping.

   On a tablet the row is dead weight. Measured on the open menu:

       viewport    art box    its own row   beside the copy
       1368 x 912  189 x 178         yes             no
       1280 x 800  175 x 164         yes             no
       1194 x 834  172 x 162         yes             no
       1024 x 768  172 x 162         yes             no
        900 x1200  210 x 198         yes             no
       1600 x 900  210 x 254          no            yes

   At 1280 that 164px row pushes the three feature cards down and the third falls
   below the fold. Switched off, the copy starts at the top of the panel.

   display:none only. The heading, the lead, the three cards and the two buttons
   are not touched, and the gap the image was in collapses with it.

   .odlcw-head:has(> .odlcw-art) still matches afterwards, because :has() tests
   the DOM and not visibility - the element is still there, just not drawn. That
   is harmless: the head is a single-track grid at these widths already, and with
   one child the row gap has nothing to separate.

   Nothing outside 768-1499 is touched. Under 768 the image keeps its own mobile
   treatment; from 1500 it stays in the corner beside the title.

   SCOPE. .odlcw-art appears in exactly two files in the project - this
   stylesheet and includes/header.php, which is the markup. Checked across every
   .php and .html: no other page, template or stylesheet carries the class. So
   this reaches the mega menu and nothing else.
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1499px) {
    .odlcw-art {
        display: none;
    }
}


/* ============================================================================
   THE LOGO PAIR IS BACK ON TABLET, 768 TO 991

   header.php puts the DigiLocker + Government Authorised pair inside a wrapper
   marked d-none d-lg-block. .d-none is display:none !important and .d-lg-block
   only lifts it from 992px up, so the pair is drawn on a desktop and gone on
   anything narrower. Measured on the live header:

       1920  430 x 70      992  430 x 70
       1600  430 x 70      991      none      <- the step
       1440  430 x 70      980      none
       1366  430 x 70      900      none
       1280  430 x 70      820      none
       1100  430 x 70      768      none
       1024  430 x 70      480      none

   iPad mini portrait is 810 or 768 wide and Surface Pro 10 portrait is 800. All
   of them land under 992, which is why the pair is missing on those.

   Three things, and nothing else.

   1. THE WRAPPER IS SHOWN. Picked out with :has(> .government-logos) rather than
      by naming Bootstrap's utility classes, so it is the wrapper holding this
      pair and not any other d-none element. display:block !important, because
      .d-none is itself !important.

   2. THE PAIR IS TAKEN OUT OF FLOW, exactly as it already is from 992 up -
      position, the translateY centring, width:auto, zero margin and padding.
      Its right inset is not restated: .government-logos already carries
      right:calc(gutter + 90px) at every width, and that is what holds the 32px
      gap to the menu button. Below 992 the wrapper is not inside that media
      query, which is the whole reason the pair was sitting in a grid column.

      top is 50% rather than the desktop's fixed 65px, because the tablet header
      measures 102px tall against roughly 130 on a desktop, and 50% with the same
      translateY(-50%) centres it at either.

   3. THE IMAGE IS SCALED DOWN. At full size the pair is 430px wide, and at 834
      and below it runs into the ODLC logo:

          width   logo ends   pair would start   result
           900        297          330           clears
           834        274          264           10px overlap
           800        263          230           33px overlap
           768        252          198           54px overlap

      At 70px tall it is 430 wide. 54px keeps the artwork's own proportion and
      brings it to about 332 wide, which at 768 leaves a measured 63px between the
      pair and the logo, with the 32px gap to the menu button unchanged.

   Under 768 nothing changes - phones keep the single Government Authorised mark
   inside the menu, which is a different element, .mobile-government-logo. From
   992 up nothing changes either.

   !important because .d-none is !important; the rest are declarations already
   written with it for this same element.

   SCOPE. .government-logos appears in header.php and this stylesheet only, and
   footer.css mentions the class too, so these are scoped to .main-header. They
   can only match this header's logo pair.
   ============================================================================ */

@media (min-width: 768px) and (max-width: 991px) {

  /* 1. the wrapper d-none is holding down */
  .main-header .row:has(> .government-logos) {
    display: block !important;
  }

  /* 2. the pair out of flow, anchored to the header like it already is at 992+ */
  .main-header .government-logos {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  /* 3. sized so it clears the ODLC logo down to 768 */
  .main-header .government-logos img {
    flex: 0 0 auto !important;
    margin: 0 !important;
    height: 54px !important;
    width: auto !important;
    max-width: 332px !important;
  }
}


/* ============================================================================
   THE MOBILE MENU LIST CAN BE REACHED, AND SCROLLED BACK UP

   On a phone the mega menu is a fixed full-screen overlay with a sticky bar
   across the top and a list of eleven destinations below it. The list is meant
   to scroll inside .mega-menu > .container-fluid, which is given the height left
   over under the bar:

       header.css:10772   .mega-menu > .container-fluid {
           height: calc(100% - 88px);
           max-height: calc(100% - 88px);
           overflow-y: auto;
       }

   That subtracts 88px, the height of the bar - and the box does not begin at
   88px. The Government Authorised mark is absolutely positioned at top:102px
   inside the bar and a band is reserved for it, so the container starts 183px
   down the overlay, not 88px. Its height was therefore 95px more than the space
   actually under it, and the bottom of the scroller sat below the fold at every
   phone size. From 481px up the band is taller and it happens by 150px.

   Measured on the open menu:

       width   bar   container top   bottom past the fold
        320     88       183               95
        360     88       183               95
        390     88       183               95
        414     88       183               95
        480     88       183               95
        540     88       238              150
        600     88       238              150
        700     88       238              150
        767     88       238              153

   At 390x844 the list runs to y 925 while the scroller's window ends at 939,
   which is 95px under the screen. Scrolling to the end of the range therefore
   never brings the bottom of the list into view: Blogs and Contact, the last
   two, stop short of the fold and there is nothing further to give. From there
   the list reads as stuck, and a swipe back up reads as the list refusing to
   move.

   The scroller's height cannot be derived from the bar's height, because the
   container does not start under the bar. Rather than hard-code the two offsets
   measured above - 183px at one breakpoint and 238px at another, and wrong again
   the moment that band changes height - the overlay is made the scroller:

       .mega-menu { overflow-y: auto }   it is position:fixed; inset:0, so its
                                         scrollable area is exactly the viewport
       the container                    stops being a scroller of its own and
                                         grows to fit what it holds

   .menu-top is already position:sticky, so the bar stays at the top while the
   list moves under it, which is how the menu is meant to behave.
   -webkit-overflow-scrolling moves to the overlay, for the momentum it was giving
   the container.

   Guarded with :not(:has(.category-content.mobile-open)). Once a destination is
   chosen the script puts mobile-open on the panel, and from that moment the
   panel is the scroller: .category-content.mobile-open already carries its own
   height, overflow-y:auto and overscroll-behavior, and .mega-menu is held at
   overflow:hidden by header.css:9789 so the page behind cannot be dragged.
   Neither is touched.

   Nothing above 767.98px changes. There the container carries no height
   constraint and the menu does not scroll - measured at 768 as the list sitting
   exactly 82..1024 with nothing to scroll.

   !important because the rules being replaced already carry it, on the same
   selectors and the same properties: overflow on .mega-menu, height and
   max-height on the container.
   ============================================================================ */

@media (max-width: 767.98px) {

  /* the overlay scrolls; inset:0 makes its scroll area exactly the viewport */
  .mega-menu:not(:has(.category-content.mobile-open)) {
    overflow-y: auto !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* and the container inside it stops being a scroller of its own */
  .mega-menu:not(:has(.category-content.mobile-open)) > .container-fluid {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
  }
}


/* ============================================================================
   THE TABLET HEADER, THE PAIR ON THE LOGO'S LINE

   Measured on the live header, the vertical middle of the ODLC logo against the
   DigiLocker / Government Authorised pair:

       width   logo image   logo pair   difference
        1440      80..153    80..150        -2
        1280      80..153    80..150        -2
        1024      80..153    80..150        -2
         991      76..136    90..144        +11
         900      76..136    90..144        +11
         834      76..136    90..144        +11
         800      76..136    90..144        +11
         768      76..133    89..143        +11

   On a desktop the two are within 2px, which is why this only ever showed on a
   tablet, where the pair sat 11px under the logo.

   WHY THEY PART COMPANY

   The two are positioned by different things. The pair is absolutely positioned
   and anchored to the middle of .main-header - top:50% with translateY(-50%).
   At tablet the header runs 46..188 with 12px of padding, so its middle is 117.

   The logo is not positioned at all. It sits in the first column of the header
   row, which is display:flex with align-items:center. Below 992 Bootstrap's
   col-lg-* widths no longer apply and the logo column carries col-8, so it takes
   the first flex line alone while the two columns after it - the empty logos
   wrapper and the hamburger column - wrap onto a second. Measured at 991:

       row            58..176   h 118   align-items center
       logo column    76..136   h  60
       logos wrapper 156..156   h   0   <- second flex line
       burger column 176..176   h   0   <- second flex line

   The logo is centred on its own flex line, 11px above the middle of the row.
   The pair is centred on the row. Eleven pixels apart.

   THE FIX

   The pair is lifted by those 11px, in the same 768-991 range it was already
   given, so it shares the logo's baseline. The 11 is measured, not guessed: it
   reads the same at 991, 980, 950, 900, 868, 834, 820, 810, 800 and 768, with
   the logo 60px tall at the wider sizes and 57px at 768. It does not move with
   the logo height or with the viewport, because it comes from where the flex
   lines break and not from either.

   Nothing else changes. The pair keeps the right inset that already holds it 32px
   from the hamburger. The logo is not touched. Above 992 nothing changes - it
   was never more than 2px out. Below 768 this pair is not drawn in the header.

   !important on the transform, which is the property the rule being amended
   already sets, on this element, in this range.
   ============================================================================ */

@media (min-width: 768px) and (max-width: 991px) {
    .main-header .government-logos {
        transform: translateY(calc(-50% - 11px)) !important;
    }
}


/* ============================================================================
   THE PAIR IS 20PX TOO HIGH AND IS CORRECTED

   The header was shortened at tablet - 142px tall became 102px - which moved the
   logo and the pair by different amounts and left the pair high. Measured on the
   live header, the vertical middle of each:

       width   header    logo image   logo pair   difference
        1440    115      80..153    80..150        -2
        1280    115      80..153    80..150        -2
        1024    115      80..153    80..150        -2
         992    115      80..153    80..150        -2
         991    102      76..136    59..113       -20
         900    102      76..136    59..113       -20
         834    102      76..136    59..113       -20
         800    102      76..136    59..113       -20
         768     99      76..133    58..112       -20

   On a desktop the two are still within 2px. On a tablet the pair is now 20px
   above the logo, where it used to be 11px below it before the header changed.

   THE CORRECTION: 9px DOWN.

   The tablet rules centre the pair on the header, at top:50% with
   translateY(-50%) - 97 on the new 102px header. The logo is not centred on the
   header. It sits in the first column of the header row, which is display:flex
   with align-items:center, and below 992 Bootstrap's col-lg-* widths stop
   applying while that column keeps col-8. So it takes the first flex line alone
   and the two columns after it - the empty logos wrapper and the hamburger
   column - wrap onto a second. Measured at 991:

       header         46..148   h 102   padding 12px
       content box    58..136            <- the row, h 78
       logo column    76..136   h  60
       logos wrapper     ..      h   0   <- second flex line
       burger column     ..      h   0   <- second flex line

   The logo centres on its own line, 9px below the middle of the content box -
   and 9px below the middle of the header too, the padding being equal top and
   bottom. That 9 reads the same at 991, 980, 950, 920, 900, 868, 834, 820, 810,
   800 and 768, where the header is a step shorter at 99px and the logo a step
   shorter at 57px.

   So the transform goes from calc(-50% - 11px), the correction made when the
   header was 142px and this ran the other way, to calc(-50% + 9px). With the
   pair 54px tall that is -27px + 9px, so -18px: 20px down, the measured gap.

   NOTHING ELSE. The 32px from the pair to the hamburger comes from its right
   inset and is untouched - still 32px at every width from 768 to 1600. The
   pair's size at tablet, 332x54, is not changed. The logo is not touched. Above
   992 nothing changes; it was never more than 2px out. Below 768 this pair is
   not drawn in the header.

   !important on the transform, which is the property replaced, for this element,
   in this range, and already carries it.
   ============================================================================ */

@media (min-width: 768px) and (max-width: 991px) {
    .main-header .government-logos {
        transform: translateY(calc(-50% + 9px)) !important;
    }
}