/*==========================
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:22px 0;
    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;
}

.government-logos{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:35px;
}

.government-logos img{

    height:72px;
    object-fit:contain;
}

/* .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: #FFFFFF;


}


.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;


}


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

.main-footer {

    width: 100%;

    background: #06285f;

    color: #ffffff;

    padding: 45px 40px 0;

    overflow: hidden;

}


/* =========================================================
                    MAIN CONTAINER
========================================================= */

.footer-container {

    width: 100%;

    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 55px;

}


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

.footer-left {

    min-width: 0;

}


/* =========================================================
                    ABOUT
========================================================= */

.footer-about {

    margin-bottom: 25px;

}


.footer-logo {

    width: 62px;

    height: 62px;

    object-fit: contain;

    display: block;

    margin-bottom: 12px;

}


.footer-about p {

    max-width: 540px;

    margin: 0;

    color: rgba(255,255,255,.78);

    font-size: 12px;

    line-height: 1.65;

}

/* =========================================================
   FOOTER ABOUT — LOGO + TEXT SIDE BY SIDE
========================================================= */

.footer-about-content {
    display: flex;
    align-items: center;
    /* gap: 32px; */
    width: 100%;
}

.footer-logo {
    width: 80px !important;
    height: 80px !important;
    min-width: 110px !important;
    object-fit: contain;
    display: block;
    margin: 0 !important;
}

.footer-about-content p {
    flex: 1;
    max-width: none !important;
    margin: 0 !important;

    color: rgba(255,255,255,.82);
    font-size: 15px !important;
    line-height: 1.6 !important;

    text-align: left !important;
}


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

@media (max-width: 991px) {

    .footer-about-content {

        /* gap: 16px; */

    }

    .footer-about-content p {

        font-size: 12px;

        line-height: 1.6;

    }

}


/* =========================================
   MOBILE FOOTER ABOUT
   LOGO TOP + CONTENT BELOW
========================================= */

@media (max-width: 575px) {

    .footer-about-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        /* gap: 20px !important; */
    }

    /* LOGO */
    .footer-about-content .footer-logo {
        width: 80px !important;
        height: 80px !important;
        min-width: 120px !important;

        margin: 0 auto !important;

        object-fit: contain !important;
        display: block !important;
    }

    /* CONTENT */
    .footer-about-content p {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        font-size: 15px !important;
        line-height: 1.6 !important;

        text-align: justify !important;
    }
}


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

    .footer-about-content {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .footer-about-content .footer-logo {
        width: 80px !important;
        height: 80px !important;
        min-width: 110px !important;
        margin: 0 auto !important;
    }

    .footer-about-content p {
        width: 100% !important;
        max-width: none !important;
        text-align: justify !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
}


/* =========================================================
                    COMMON HEADING
========================================================= */

.footer-heading {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

}


.footer-heading-icon {

    width: 34px;

    height: 34px;

    min-width: 34px;

    border-radius: 9px;

    background: rgba(54,130,255,.25);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-size: 17px;

}




.footer-heading h4 {

    margin: 0;

    color: #ffffff;

    font-size: 17px;

    font-weight: 700;

}


/* =========================================================
                    USEFUL LINKS
========================================================= */

.footer-links-section {

    margin-bottom: 25px;

}


.footer-links-grid {

    display: grid;

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

}


.footer-links-grid ul {

    list-style: none;

    padding: 0 18px;

    margin: 0;

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

}


.footer-links-grid ul:first-child {

    padding-left: 0;

}


.footer-links-grid ul:last-child {

    border-right: 0;

}


.footer-links-grid li {

    margin-bottom: 11px;

}


.footer-links-grid li:last-child {

    margin-bottom: 0;

}


.footer-links-grid a {

    display: flex;

    align-items: center;

    gap: 6px;

    color: rgba(255,255,255,.78);

    text-decoration: none;

    font-size: 11px;

    transition: .25s ease;

}


.footer-links-grid a i {

    font-size: 7px;

    color: #ffffff;

}


.footer-links-grid a:hover {

    color: #ffffff;

    transform: translateX(3px);

}


/* =========================================================
                    CONTACT
========================================================= */

.footer-contact-section {

    width: 100%;

}


.footer-contact-box {

    display: grid;

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

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

    border-radius: 13px;

    overflow: hidden;

}


.footer-contact-item {

    min-height: 52px;

    padding: 10px 12px;

    display: flex;

    align-items: center;

    gap: 9px;

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

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

}


.footer-contact-item:nth-child(3) {

    border-right: 0;

}


.footer-contact-item > i {

    width: 27px;

    height: 27px;

    min-width: 27px;

    border-radius: 50%;

    background: #1d63d5;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

}


.footer-contact-item span {

    color: rgba(255,255,255,.85);

    font-size: 10px;

    line-height: 1.4;

}


/* ADDRESS */

.footer-address {

    grid-column: span 2;

}


.footer-verification {

    grid-column: span 2;

    border-right: 0;

    align-items: flex-start;

}


.footer-verification strong {

    display: block;

    color: #ffffff;

    font-size: 10px;

    margin-bottom: 3px;

}


.footer-verification p {

    margin: 0;

    color: rgba(255,255,255,.65);

    font-size: 9px;

    line-height: 1.45;

}


/* =========================================================
                    PROGRAMMES
========================================================= */

.footer-programmes {

    width: 100%;

}


.footer-programmes-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 10px;

}


.footer-programmes-header h4 {

    margin: 0;

    color: #ffffff;

    font-size: 17px;

    font-weight: 700;

}


.footer-programmes-header span {

    display: block;

    width: 35px;

    height: 3px;

    background: #ffc107;

    border-radius: 20px;

    margin-top: 7px;

}


.footer-view-btn {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 13px;

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

    border-radius: 30px;

    color: #ffffff;

    text-decoration: none;

    font-size: 9px;

    white-space: nowrap;

    transition: .3s ease;

}


.footer-view-btn:hover {

    background: #1d68df;

    border-color: #1d68df;

    color: #ffffff;

}


.programme-list {

    list-style: none;

    padding: 0;

    margin: 0;

}


.programme-list li {

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

}




.programme-list li:last-child {

    border-bottom: 0;

}


.programme-list a {

    min-height: 35px;

    display: flex;

    align-items: center;

    gap: 9px;

    color: rgba(255,255,255,.78);

    text-decoration: none;

    font-size: 10px;

    line-height: 1.4;

    transition: .25s ease;

}


.programme-list a:hover {

    color: #ffffff;

    transform: translateX(3px);

}


.programme-list b {

    width: 15px;

    height: 15px;

    min-width: 15px;

    border-radius: 50%;

    background: #2778e8;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    

}


.programme-list b i {

    font-size: 6px;

}


/* =========================================================
                    FEATURE STRIP
========================================================= */

.footer-features {

    width: 100%;

    max-width: 1320px;

    margin: 30px auto 0;

    display: grid;

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

    background: rgba(31,92,170,.42);

    border-radius: 12px 12px 0 0;

    overflow: hidden;

}


.footer-feature {

    min-height: 100px;

    padding: 18px 22px;

    display: flex;

    align-items: center;

    gap: 13px;

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

    transition: .3s ease;

}


.footer-feature:last-child {

    border-right: 0;

}


.footer-feature:hover {

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

}


.footer-feature-icon {

    width: 43px;

    height: 43px;

    min-width: 43px;

    border-radius: 50%;

    background: #2377ed;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-size: 18px;

    transition: .3s ease;

}


.footer-feature:hover .footer-feature-icon {

    transform: translateY(-3px) scale(1.05);

}


.footer-feature h6 {

    margin: 0 0 4px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

}


.footer-feature p {

    margin: 0;

    color: rgba(255,255,255,.62);

    font-size: 9px;

    line-height: 1.45;

}


/* =========================================================
                    BOTTOM BAR
========================================================= */

.footer-bottom {

    width: 100%;

    max-width: 1320px;

    min-height: 52px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

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

}


.footer-bottom p {

    margin: 0;

    color: rgba(255,255,255,.55);

    font-size: 9px;

}


.footer-bottom div {

    /* display: flex; */

    align-items: center;

    gap: 8px;

}


.footer-bottom a {

    color: rgba(255,255,255,.60);

    text-decoration: none;

    font-size: 9px;

}


.footer-bottom a:hover {

    color: #ffffff;

}


.footer-bottom span {

    color: rgba(255,255,255,.25);

    font-size: 8px;

}


/* =========================================================
                    RESPONSIVE
========================================================= */


/* LARGE LAPTOP */

@media (max-width: 1199px) {

    .main-footer {

        padding-left: 35px;

        padding-right: 35px;

    }

    .footer-container,
    .footer-features,
    .footer-bottom {

        max-width: 1100px;

    }

    .footer-container {

        gap: 35px;

    }

    .footer-programmes a {

        font-size: 10px;

    }

}


/* TABLET */

@media (max-width: 991px) {

    .main-footer {

        padding:
            40px 30px 0;

    }


    .footer-container {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .footer-programmes {

        grid-column: auto;

    }


    .footer-features {

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

    }


    .footer-feature:nth-child(2) {

        border-right: 0;

    }


    .footer-feature:nth-child(3),
    .footer-feature:nth-child(4) {

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

    }


    .footer-feature:nth-child(4) {

        border-right: 0;

    }

}


/* MOBILE */

@media (max-width: 767px) {

    .main-footer {

        padding:
            35px 20px 0;

    }


    .footer-container {

        display: flex;

        flex-direction: column;

        gap: 30px;

    }


    .footer-about p {

        font-size: 12px;

    }


    .footer-links-grid {

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

        row-gap: 18px;

    }


    .footer-links-grid ul {

        padding: 0 12px;

    }


    .footer-links-grid ul:nth-child(2) {

        border-right: 0;

    }


    .footer-links-grid ul:nth-child(3) {

        padding-left: 0;

    }


    .footer-contact-box {

        grid-template-columns: 1fr 1fr;

    }


    .footer-contact-item:nth-child(3) {

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

    }


    .footer-address,
    .footer-verification {

        grid-column: span 2;

    }


    .footer-programmes-header {

        align-items: flex-start;

    }


    .footer-features {

        grid-template-columns: 1fr;

        margin-top: 25px;

    }


    .footer-feature {

        min-height: 82px;

        border-right: 0;

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

    }


    .footer-feature:nth-child(3),
    .footer-feature:nth-child(4) {

        border-top: 0;

    }


    .footer-feature:last-child {

        border-bottom: 0;

    }


    .footer-bottom {

        flex-direction: column;

        justify-content: center;

        text-align: center;

        padding: 15px 0;

        gap: 8px;

    }


    .footer-bottom div {

        flex-wrap: wrap;

        /* justify-content: center; */

    }

}


/* SMALL MOBILE */

@media (max-width: 575px) {

    .main-footer {

        padding:
            30px 15px 0;

    }


    .footer-logo {

        width: 35px;

        height: 35px;

    }


    .footer-heading h4,
    .footer-programmes-header h4 {

        font-size: 16px;

    }


    .footer-links-grid a {

        font-size: 11px;

    }


    .footer-contact-box {

        grid-template-columns: 1fr;

    }


    .footer-contact-item {

        grid-column: span 1;

        border-right: 0 !important;

    }


    .footer-address,
    .footer-verification {

        grid-column: span 1;

    }


    .footer-programmes-header {

        display: block;

    }


    .footer-view-btn {

        margin-top: 12px;

    }


    .programme-list a {

        font-size: 10px;

    }


    .footer-feature {

        padding: 15px;

    }


    .footer-feature-icon {

        width: 40px;

        height: 40px;

        min-width: 40px;

    }

}

/* =========================================================
   FOOTER — SAME FONT SIZE AS FAQ
========================================================= */

/* About paragraph */
.footer-about-content p {
    font-size: 15px;
    line-height: 24px;
}


/* Section headings */
.footer-heading h4,
.footer-programmes-header h4 {
    font-size: 17px;
    line-height: 1.3;
}


/* Useful links */
.footer-links-grid a {
    font-size: 14px;
    line-height: 20px;
}


/* Contact text */
.footer-contact-item span {
    font-size: 14px;
    line-height: 20px;
}


/* Verification heading */
.footer-verification strong {
    font-size: 14px;
}


/* Verification paragraph */
.footer-verification p {
    font-size: 12px;
    line-height: 19px;
}


/* Programme links */
.programme-list a {
    font-size: 14px;
    line-height: 20px;
}


/* View all programmes button */
.footer-view-btn {
    font-size: 12px;
}


/* Feature headings */
.footer-feature h5 {
    font-size: 14px;
    line-height: 20px;
}


/* Feature descriptions */
.footer-feature p {
    font-size: 12px;
    line-height: 19px;
}


/* Bottom copyright */
.footer-bottom p,
.footer-bottom a {
    font-size: 12px;
    line-height: 19px;
}


/* Bottom separator */
.footer-bottom span {
    font-size: 10px;
}

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

.footer-bottom {

    position: relative;

    width: 100%;

    max-width: 1320px;

    min-height: 125px;

    margin: 0 auto;

    padding: 20px 0;

    display: grid;

    grid-template-columns:
        250px
        1px
        minmax(400px, 1fr)
        1px
        280px;

    align-items: center;

    column-gap: 40px;

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

    overflow: hidden;

}


/* =========================================================
                FOLLOW US
========================================================= */

.footer-social {

    position: relative;

    z-index: 2;

}


.footer-social h5 {

    margin: 0 0 15px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

}


.social-icons {

    display: flex;

    align-items: center;

    gap: 15px;

}


.social-icons a {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 21px;

    transition: .3s ease;

}


/* FACEBOOK */

.social-icons a:nth-child(1) {

    background: #1877f2;

    color: #ffffff;

}


/* INSTAGRAM */

.social-icons a:nth-child(2) {

    background:
        linear-gradient(
            135deg,
            #833ab4,
            #fd1d1d,
            #fcb045
        );

    color: #ffffff;

}


/* LINKEDIN */

.social-icons a:nth-child(3) {

    background: #0a66c2;

    color: #ffffff;

}


/* YOUTUBE */

.social-icons a:nth-child(4) {

    background: #ff0000;

    color: #ffffff;

}


.social-icons a:hover {

    transform:
        translateY(-4px)
        scale(1.05);

}


/* =========================================================
                DIVIDERS
========================================================= */

.footer-divider {

    width: 1px;

    height: 82px;

    background:
        rgba(20,40,80,.25);

}


/* =========================================================
                DISCLAIMER
========================================================= */

.footer-disclaimer {

    position: relative;

    z-index: 2;

}


.footer-disclaimer p {

    margin: 0;

    max-width: 650px;

    color: #5f6673;

    font-size: 13px;

    line-height: 1.65;

}


/* =========================================================
                COPYRIGHT
========================================================= */

.footer-copyright {

    position: relative;

    z-index: 2;

}


.footer-copyright p {

    margin: 0;

    color: #5f6673;

    font-size: 13px;

    line-height: 1.65;

}


/* =========================================================
                WORLD MAP
========================================================= */

.footer-map {

    position: absolute;

    right: -10px;

    top: 50%;

    transform: translateY(-50%);

    width: 230px;

    height: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: .08;

    pointer-events: none;

}


.footer-map i {

    font-size: 180px;

    color: #6b7280;

}

/* =========================================================
        LIGHT BOTTOM AREA
========================================================= */

.main-footer .footer-bottom {

    background: #ffffff;

    max-width: none;

    margin-left: -40px;

    margin-right: -40px;

    padding-left: max(40px, calc((100% - 1320px) / 2));

    padding-right: max(40px, calc((100% - 1320px) / 2));

    border-top: 0;

}

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

@media (max-width: 991px) {

    .main-footer .footer-bottom {

        margin-left: -30px;

        margin-right: -30px;

        padding-left: 30px;

        padding-right: 30px;

    }


    .footer-bottom {

        grid-template-columns:
            190px
            1px
            minmax(250px, 1fr)
            1px
            210px;

        column-gap: 25px;

    }


    .footer-disclaimer p,
    .footer-copyright p {

        font-size: 11px;

    }


    .footer-social h5 {

        font-size: 15px;

    }


    .social-icons {

        gap: 10px;

    }


    .social-icons a {

        width: 37px;

        height: 37px;

        font-size: 18px;

    }


    .footer-map {

        opacity: .05;

    }

}


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

@media (max-width: 767px) {

    .main-footer .footer-bottom {

        margin-left: -20px;

        margin-right: -20px;

        padding:
            30px 20px;

    }


    .footer-bottom {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 22px;

        min-height: auto;

    }


    .footer-divider {

        width: 100%;

        height: 1px;

    }


    .footer-social {

        width: 100%;

    }


    .footer-disclaimer {

        width: 100%;

    }


    .footer-copyright {

        width: 100%;

    }


    .footer-disclaimer p,
    .footer-copyright p {

        font-size: 11px;

        line-height: 1.6;

    }


    .footer-map {

        display: none;

    }

}


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

@media (max-width: 575px) {

    .main-footer .footer-bottom {

        margin-left: -15px;

        margin-right: -15px;

        padding:
            25px 15px;

    }


    .footer-social h5 {

        font-size: 15px;

        margin-bottom: 12px;

    }


    .social-icons a {

        width: 36px;

        height: 36px;

        font-size: 17px;

    }

}


/* =========================================
   ADDRESS ROW - FULL WIDTH
========================================= */

.footer-contact-item.footer-address {
    width: 100% !important;
    min-width: 100% !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
}

/* =========================================================
   STUDENT SERVICES + INSTITUTIONAL APPLICATIONS
========================================================= */

.footer-service-sections {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 35px;

    margin-top: 35px;
    margin-bottom: 30px;

    box-sizing: border-box;
}


/* SERVICE COLUMN */

.footer-service-column {
    min-width: 0;
}


/* HEADING */

.footer-service-column .footer-heading {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 16px;
}


/* HEADING ICON */

.footer-service-column .footer-heading-icon {
    width: 34px;
    height: 34px;

    min-width: 40px;

    display: flex;

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

    background: rgba(54, 130, 255, .25);

    color: #ffffff;

    border-radius: 10px;

    font-size: 17px;
}


/* HEADING TEXT */

.footer-service-column .footer-heading h4 {
    margin: 0;

    color: #ffffff;

    font-size: 22px;

    font-weight: 700;

    line-height: 1.2;
}


/* LIST */

.footer-service-list {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 0;
}


/* LIST ITEM */

.footer-service-list li {
    margin: 0;

    padding: 0;

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


/* LINK */

.footer-service-list li a {
    display: flex;

    align-items: center;

    gap: 9px;

    width: 100%;

    padding: 9px 0;

    color: #dce8f8;

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

    font-size: 14px;

    font-weight: 500;

    line-height: 1.4;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        color .3s ease,
        padding-left .3s ease;
}


/* CHEVRON */

.footer-service-list li a i {
    color: #3d8cff;

    font-size: 11px;

    transition: transform .3s ease;
}


/* HOVER */

.footer-service-list li a:hover {
    color: #ffffff;

    padding-left: 5px;
}

.footer-service-list li a:hover i {
    transform: translateX(3px);

    color: #ffffff;
}


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

@media (max-width: 991px) {

    .footer-service-sections {
        gap: 25px;

        margin-top: 30px;
    }

    .footer-service-column .footer-heading h4 {
        font-size: 19px;
    }

    .footer-service-list li a {
        font-size: 13px;
    }
}


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

@media (max-width: 767px) {

    .footer-service-sections {
        grid-template-columns: 1fr;

        gap: 28px;

        margin-top: 28px;
        margin-bottom: 28px;
    }

    .footer-service-column .footer-heading {
        margin-bottom: 12px;
    }

    .footer-service-column .footer-heading-icon {
        width: 36px;
        height: 36px;

        min-width: 36px;

        border-radius: 9px;

        font-size: 15px;
    }

    .footer-service-column .footer-heading h4 {
        font-size: 18px;
    }

    .footer-service-list li a {
        padding: 8px 0;

        font-size: 13px;
    }
}


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

@media (max-width: 480px) {

    .footer-service-sections {
        gap: 24px;
    }

    .footer-service-column .footer-heading h4 {
        font-size: 17px;
    }

    .footer-service-list li a {
        font-size: 12px;
    }
}

/* =========================================================
   EXTEND FOOTER LEFT CONTENT
========================================================= */

.footer-left {
    width: 100% !important;
    max-width: none !important;
}


/* Student Services + Institutional Applications */

.footer-service-sections {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    gap: 35px !important;

    margin-top: 35px !important;
    margin-bottom: 35px !important;

    box-sizing: border-box !important;
}


/* Contact section */

.footer-contact-section {
    width: 100% !important;
    max-width: none !important;
}


/* Contact box */

.footer-contact-box {
    width: 100% !important;
    max-width: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   FOOTER MAIN GRID
========================================================= */

.footer-container {
    width: 92% !important;
    max-width: 1500px !important;

    margin: 0 auto !important;

    display: grid !important;

    /* 52% + 48% already sums to 100% of the container, and the 45px
       gap is then added on top of that. The second column therefore
       ended 45px PAST the container right edge - which is exactly
       where the Contact Us box stops, so "Our Programmes" hung out
       further right than the contact block below it.

       Taking half the gap out of each column makes the two columns
       plus the gap total exactly 100%, so the right edge of the
       programme list lands on the container right edge, level with
       the Contact Us box, Quick Links and the rest. The 52/48
       ratio between the two columns is unchanged. */
    grid-template-columns:
        calc(52% - 22.5px) calc(48% - 22.5px) !important;

    gap: 45px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LEFT SERVICE COLUMNS
========================================================= */

.footer-service-column {
    width: 100% !important;
    min-width: 0 !important;
}


/* =========================================================
   CONTACT ITEMS
========================================================= */

.footer-contact-item {
    width: 100% !important;
    box-sizing: border-box !important;
}


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

@media (max-width: 991px) {

    .footer-container {
        grid-template-columns: 1fr !important;

        /* gap: 40px !important; */
    }

    .footer-left {
        width: 100% !important;
    }

    .footer-programmes {
        width: 100% !important;
    }

    .footer-service-sections {
        grid-template-columns: 1fr 1fr !important;
    }
}


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

@media (max-width: 767px) {

    .footer-container {
        width: 92% !important;

        display: flex !important;
        flex-direction: column !important;
    }

    .footer-service-sections {
        width: 100% !important;

        grid-template-columns: 1fr !important;

        gap: 25px !important;
    }

    .footer-contact-box {
        width: 100% !important;
    }
}

/* =========================================================
   CONTACT US
   WIDTH NOW MATCHES THE FOOTER CONTENT ABOVE
   =========================================================

   What it was, and why it was wrong.

   These rules set the contact block to calc(100% - 94px) with a
   hardcoded margin-left/right of 47px, and then repeated the same
   idea with 30px, 20px, 15px and 10px at four different
   breakpoints. None of those numbers relate to anything real.

   The footer container above is 92% with max-width 1380px and
   margin 0 auto, so at 1440px it resolves to 57..1368. The
   contact block resolved to 47..1378 instead - 10px outside the
   container on the left AND on the right, which is why it did
   not line up with Quick Links and the other columns on a large
   screen. The magic numbers only happened to look close.

   Now it uses the same rule as .main-footer .footer-container
   at line 5803, including the 94% / 90% / 92% steps, so the
   left and right edges are identical to the content above at
   every device width.
   ========================================================= */

.main-footer .footer-contact-section {
    width: 92% !important;
    max-width: 1380px !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 20px;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
}


/* CONTACT BOX - fills the section, never wider */

.main-footer .footer-contact-box {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}


/* =========================================================
   RESPONSIVE - the same steps the container uses
   ========================================================= */

@media (max-width: 1199px) {
    .main-footer .footer-contact-section { width: 94% !important; }
}

@media (max-width: 767px) {
    .main-footer .footer-contact-section { width: 90% !important; }
}

@media (max-width: 480px) {
    .main-footer .footer-contact-section { width: 92% !important; }
}


/* =========================================================
   FOOTER ABOUT - LOGO BESIDE CONTENT
========================================================= */

.footer-about {
    width: 100% !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: flex-start !important;

    gap: 40px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LOGO
========================================================= */

.footer-about-logo {
    flex: 0 0 120px !important;

    width: 80px !important;

    display: flex !important;

    align-items: flex-start !important;

    justify-content: center !important;
}

.footer-about-logo img {
    width: 80px !important;

    height: auto !important;

    display: block !important;

    object-fit: contain !important;
}


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

.footer-about-content {
    flex: 1 !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: flex-start !important;
}


/* HEADING */

.footer-about-content h2 {
    width: 100% !important;

    margin: 0 0 18px 0 !important;

    color: #ffffff !important;

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

    font-size: 22px !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;

    text-align: left !important;
}


/* PARAGRAPH */

.footer-about-content p {
    width: 100% !important;

    margin: 0 !important;

    color: #ffffff !important;

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

    font-size: 14px !important;

    line-height: 1.7 !important;

    text-align: left !important;
}


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

@media (max-width: 991px) {

    .footer-about {
        gap: 25px !important;
    }

    .footer-about-logo {
        flex-basis: 95px !important;
        width: 95px !important;
    }

    .footer-about-logo img {
        width: 95px !important;
    }

    .footer-about-content h2 {
        font-size: 19px !important;
    }

    .footer-about-content p {
        font-size: 13px !important;
    }
}


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

@media (max-width: 767px) {

    .footer-about {
        gap: 18px !important;

        align-items: flex-start !important;
    }

    .footer-about-logo {
        flex: 0 0 75px !important;

        width: 75px !important;
    }

    .footer-about-logo img {
        width: 65px !important;
    }

    .footer-about-content h2 {
        font-size: 17px !important;

        margin-bottom: 10px !important;
    }

    .footer-about-content p {
        font-size: 12px !important;

        line-height: 1.6 !important;
    }
}


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

@media (max-width: 480px) {

    .footer-about {
        gap: 14px !important;
    }

    .footer-about-logo {
        flex-basis: 65px !important;

        width: 65px !important;
    }

    .footer-about-logo img {
        width: 65px !important;
    }

    .footer-about-content h2 {
        font-size: 15px !important;
    }

    .footer-about-content p {
        font-size: 11px !important;
    }
}


/* =========================================================
   FOOTER ABOUT — LOGO + CONTENT SIDE BY SIDE
========================================================= */

.footer-about-content {
    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;

    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 16px !important;

    box-sizing: border-box !important;
}


/* LOGO */

.footer-about-content .footer-logo {
    width: 65px !important;
    height: 65px !important;

    min-width: 65px !important;
    max-width: 65px !important;

    flex: 0 0 65px !important;

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

    object-fit: contain !important;
    display: block !important;
}


/* CONTENT */

.footer-about-content p {
    flex: 1 !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    color: #ffffff !important;

    font-size: 13px !important;
    line-height: 1.6 !important;

    text-align: left !important;
}


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

@media (max-width: 767px) {

    .footer-about-content {
        display: flex !important;
        flex-direction: row !important;

        align-items: flex-start !important;

        gap: 14px !important;
    }

    .footer-about-content .footer-logo {
        width: 60px !important;
        height: 60px !important;

        min-width: 60px !important;
        max-width: 60px !important;

        flex: 0 0 60px !important;

        margin: 0 !important;
    }

    .footer-about-content p {
        flex: 1 !important;

        width: auto !important;

        font-size: 12px !important;
        line-height: 1.6 !important;

        text-align: left !important;
    }
}


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

@media (max-width: 480px) {

    .footer-about-content {
        gap: 12px !important;
    }

    .footer-about-content .footer-logo {
        width: 55px !important;
        height: 55px !important;

        min-width: 55px !important;
        max-width: 55px !important;

        flex-basis: 55px !important;
    }

    .footer-about-content p {
        font-size: 11px !important;
        line-height: 1.55 !important;
    }

}

.footer-dropdown {
    position: relative;
}

.footer-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.footer-dropdown-toggle .dropdown-arrow {
    margin-left: auto;
    font-size: 11px;
    transition: transform 0.3s ease;
}

.footer-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

.footer-dropdown-menu {
    display: none;
    list-style: none;
    padding: 6px 0 6px 28px;
    margin: 0;
}

.footer-dropdown.active .footer-dropdown-menu {
    display: block;
}

.footer-dropdown-menu li {
    border: none !important;
    margin: 0;
    padding: 0;
}

.footer-dropdown-menu li a {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
}

.footer-dropdown-menu li a:hover {
    color: #ffffff;
}
















/* ================================================================
   FOOTER  -  TYPE + WIDTH ALIGNED WITH THE SECTIONS ABOVE
   Appended to css/includes/footer.css. Nothing above this point
   is modified.

   Lives here rather than in index.css on purpose: footer.php is
   included by 14 pages, and only index.php loads index.css, so
   rules added there would restyle the footer on the home page only
   and leave the other 13 out of step. footer.css is loaded by
   header.php on every page.

   The same scale as the sections above:
       column heading  20px / 800
       about text      15px / lh 1.6
       link lists      14-15px / 500-600
       container       92% / max-width 1380px / margin 0 auto
       section pad     48px

   The colour scheme is NOT changed. This is a dark band with light
   text, so the navy-on-white heading colour used by the sections
   would be invisible here - the weights, sizes and rhythm are
   matched instead, and the light palette is kept.

   What it was, measured before the edit:
       container    1237px at left 94 - 92% of the footer's own
                    40px padded box, so it sat 37px inside the
                    57..1368 the sections above use
       footer pad   45px
       headings     25px / 700 / white
       about text   13px / white / lh 1.6
       links        15px / rgba(255,255,255,.78) / 400
       programmes   15px / rgba(255,255,255,.78) / 400
       services     15px / 500 / #DCE8F8
       address      16px / 400 / white
   ================================================================ */

/* ---------- FOOTER PADDING + CONTAINER ----------
   the 40px side padding on .main-footer is removed so that 92% of
   the footer resolves to the same 1311px box the sections above
   use, rather than 92% of a box that is already 80px narrower. */
.main-footer {
    padding: 48px 0 0 !important;
}
.main-footer .footer-container {
    width: 92% !important;
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---------- COLUMN HEADINGS (4 of them) ---------- */
.main-footer .footer-heading h4 {
    margin: 0 !important;
    color: #FFFFFF !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
    text-align: left !important;
    text-transform: none !important;
}

/* the little tile beside each heading */
.main-footer .footer-heading-icon {
    background: rgba(255, 255, 255, .10) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 9px !important;
}
.main-footer .footer-heading-icon i {
    color: #7FB2FF !important;
}

/* ---------- ABOUT TEXT ---------- */
.main-footer .footer-about-content p {
    margin: 0 !important;
    color: rgba(255, 255, 255, .78) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

/* ---------- OUR PROGRAMMES column heading ---------- */
.main-footer .footer-programmes-header {
    margin: 0 !important;
    color: #FFFFFF !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
}

/* ---------- LINK LISTS ---------- */
.main-footer .footer-links-grid a {
    color: rgba(255, 255, 255, .82) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    transition: color .18s ease !important;
}
.main-footer .footer-links-grid a:hover { color: #FFFFFF !important; }

.main-footer .programme-list a {
    color: rgba(255, 255, 255, .78) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    transition: color .18s ease !important;
}
.main-footer .programme-list a:hover { color: #FFFFFF !important; }

.main-footer .footer-service-list a,
.main-footer .footer-dropdown-toggle {
    color: rgba(255, 255, 255, .82) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
}

/* ---------- CONTACT + FEATURE ROWS ---------- */
.main-footer .footer-address,
.main-footer .footer-feature {
    color: rgba(255, 255, 255, .80) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1199px) {
    .main-footer .footer-container { width: 94% !important; }
}

@media (max-width: 767px) {
    .main-footer .footer-container { width: 90% !important; }
    .main-footer .footer-heading h4,
    .main-footer .footer-programmes-header { font-size: 18px !important; }
    .main-footer .footer-about-content p { font-size: 14px !important; }
    .main-footer .footer-links-grid a { font-size: 14px !important; }
}

@media (max-width: 480px) {
    .main-footer .footer-container { width: 92% !important; }
    .main-footer .footer-heading h4,
    .main-footer .footer-programmes-header { font-size: 17px !important; }
    .main-footer .footer-about-content p,
    .main-footer .footer-links-grid a { font-size: 13.5px !important; }
    .main-footer .programme-list a,
    .main-footer .footer-service-list a,
    .main-footer .footer-dropdown-toggle { font-size: 13px !important; }
}


/* ================================================================
   FOOTER  -  "OPEN AND DISTANCE LEARNING COUNCIL" BESIDE THE LOGO
   Appended to css/includes/footer.css. Nothing above this point
   is modified.

   The logo and the paragraph were already side by side in a flex
   row, but top aligned (align-items: flex-start). This adds the
   heading above the paragraph and centres the whole text block
   vertically against the logo, which is what the reference shows.

   The heading and paragraph are wrapped in .footer-about-text so
   they behave as one block and stay together at every width.

   An older rule in this file already styles
   .footer-about-content h2 at 22px/700, left over from a previous
   layout that had a separate .footer-about-logo wrapper. That
   would apply to this heading too, so it is overridden here to
   sit with the other footer headings.

   Lives in footer.css rather than index.css because footer.php is
   included by 14 pages and only index.php loads index.css.
   ================================================================ */

/* ---------- the row: logo left, text block beside it ---------- */
.main-footer .footer-about-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;   /* was flex-start - this is the centring */
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
}

.main-footer .footer-about-content .footer-logo {
    flex: 0 0 80px !important;
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    margin: 0 !important;
    object-fit: contain !important;
    align-self: center !important;
}

/* ---------- the text block ---------- */
.main-footer .footer-about-text {
    flex: 1 !important;
    min-width: 0 !important;
    display: block !important;
}

/* ---------- the heading ---------- */
.main-footer .footer-about-text h2 {
    width: auto !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.2px !important;
    text-align: left !important;
    text-transform: none !important;
}

/* ---------- the paragraph ---------- */
.main-footer .footer-about-text p {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, .78) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

/* ---------- stack on narrow screens so the heading is not cramped ---------- */
@media (max-width: 575px) {
    .main-footer .footer-about-content {
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .main-footer .footer-about-content .footer-logo {
        flex: 0 0 64px !important;
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
    }
    .main-footer .footer-about-text h2 { font-size: 15px !important; margin-bottom: 6px !important; }
    .main-footer .footer-about-text p { font-size: 13px !important; line-height: 1.55 !important; }
}

/* grid items default to min-width:auto, which lets long text push a
   track wider than its share. .footer-service-column already had this;
   the programme column needs the same guard. */
.footer-container > .footer-programmes {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* ================================================================
   OUR PROGRAMMES - ICON TILE ON THE HEADING
   Appended to css/includes/footer.css. Nothing above this point
   is modified.

   The other four footer headings (Quick Links, Student Services,
   Institutional Applications, Contact Us) are all built the same
   way: a 34x34 rounded tile holding a Bootstrap icon, then the
   h4, inside a flex row with a 10px gap. "Our Programmes" was the
   only one without a tile.

   Two things were different from its siblings and are matched here:

     tile      34x34, radius 9px, rgba(255,255,255,.10) background,
               glyph #7FB2FF at 17px - identical to the other four
     h4        20px / 800 / #FFFFFF / -0.4px / 1.3. It was
               rendering at 25px / 700, because the rule at line
               5848 sets the type on .footer-programmes-header,
               which is a DIV, so the h4 inside it never picked it
               up and global-typography.css pinned it instead.

   The gold bar under the title is the existing empty <span>, and
   it stays where it was - directly under the h4, inside the inner
   div - so it does not stretch under the tile.
   ================================================================ */

/* the flex row that puts the tile beside the title */
.main-footer .footer-programmes-heading {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* the tile - same box as .footer-heading-icon on the other four */
.main-footer .footer-programmes-heading .footer-heading-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;

    border-radius: 9px !important;

    background: rgba(255, 255, 255, .10) !important;
    background-image: none !important;
    box-shadow: none !important;

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

    font-size: 17px !important;
}
.main-footer .footer-programmes-heading .footer-heading-icon i {
    color: #7FB2FF !important;
    line-height: 1 !important;
}

/* the title itself - brought onto the same footing as the other four */
.main-footer .footer-programmes-heading h4 {
    margin: 0 !important;
    color: #FFFFFF !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
    text-align: left !important;
    text-transform: none !important;
}

/* the gold bar keeps its measured size and colour */
.main-footer .footer-programmes-heading span {
    display: block !important;
    width: 35px !important;
    height: 3px !important;
    border-radius: 20px !important;
    background: #FFC107 !important;
    margin-top: 7px !important;
}

/* ---------- the same two steps the other four headings use ---------- */
@media (max-width: 767px) {
    .main-footer .footer-programmes-heading h4 { font-size: 18px !important; }
}

@media (max-width: 480px) {
    .main-footer .footer-programmes-heading h4 { font-size: 17px !important; }
    .main-footer .footer-programmes-heading { gap: 10px !important; }
    .main-footer .footer-programmes-heading .footer-heading-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex: 0 0 32px !important;
        font-size: 16px !important;
    }
}


/* ================================================================
   FOOTER BOTTOM - SOCIAL ICONS CENTRED AT EVERY WIDTH
   Appended to css/includes/footer.css. Nothing above this point
   is modified.

   Note on the selectors: .footer-bottom is a direct child of
   <body>, NOT a descendant of <footer class="main-footer"> - the
   </footer> tag closes before .footer-bottom opens. So these
   rules are written WITHOUT a .main-footer prefix, which is why
   an earlier attempt using .main-footer .footer-social matched
   nothing and had no effect at all.

   What it was, measured before the edit.

     .footer-social was display:flex with the default
     flex-direction:row, so the <h5>Follow us on</h5> and the
     .social-icon row were laid out SIDE BY SIDE as one line.

     That put the icons in the wrong place twice over:

       - the h5 plus the icon row together started at the cell
         left edge, so the icons alone never landed on the cell
         centre. Measured 23px off at 320px, 25px at 480px,
         55px at 640px, 90px at 575px, 162px at 700px.
       - the pair was wider than the grid cell it sits in, so on
         a large screen the icons hung out past the cell by 40px
         at 1280px and by 7px at 1920px.

   The fix is to stack them instead - the heading on top, the three
   icons centred underneath it - and to centre both. The icon
   size, the gap between icons, the colours, the tile radius and
   the h5 type are all left exactly as they were; only the
   stacking and the centring change.

   .footer-social is a 250px grid cell from 992px up, a 190px cell
   from 768px to 991px, and a full width flex child at 767px and
   below. Centring the group inside whatever cell it is given
   covers all three shapes with no per-breakpoint offset.
   ================================================================ */

.footer-social {
    display: flex !important;
    flex-direction: column !important;

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

    text-align: center !important;
}

/* the icon row itself: centred, and never wider than its cell */
.footer-social .social-icons {
    display: flex !important;
    flex-direction: row !important;

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

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* the heading keeps its own bottom margin, so the gap under it is
   unchanged - only the horizontal margins are reset */
.footer-social h5 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
}

/* the three links must not be squeezed narrower than their icons */
.footer-social .social-icons a {
    flex: 0 0 auto !important;
}


/* ================================================================
   FOOTER BOTTOM - COLLAPSE THE INVISIBLE "FOLLOW US ON" LABEL
   Appended to css/includes/footer.css. Nothing above this point
   is modified.

   Measured, on the live page:

     .footer-bottom background-color : rgba(0,0,0,0)  (transparent)
     body background-color           : rgb(255,255,255)
     .footer-social h5 color         : rgb(255,255,255)

   So "Follow us on" is white text sitting on a white page. It has
   never been visible, but it still occupied its line box: 28px of
   text height plus a 15px margin-bottom, 43px in total, directly
   above the three social icons. That empty band is the gap that
   showed above the icons once the icons themselves were centred.

   The text is not deleted. It is collapsed with the standard
   visually-hidden pattern - 1px, clipped, absolutely positioned -
   so it still reaches screen readers and stays in the DOM for
   search engines, but contributes no height, no margin and no
   visible pixels. Nothing is removed from footer.php.

   If the label is ever wanted on screen, give it a dark colour to
   match the rest of the bottom bar instead of removing this rule.
   ================================================================ */

.footer-social h5 {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

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

    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ================================================================
   FLOATING WHATSAPP BUTTON AND CHAT PANEL
   Appended to css/includes/footer.css, which header.php already
   loads on every page that includes footer.php - 41 of them - with
   a version query for cache busting, so no new <link> was needed.

   THE MARKUP IS A CHECKBOX
   .wa-fab-toggle is a real checkbox, visually hidden but still in
   the tab order, and every control is a <label for> pointing at it.
   The panel is then pure CSS: #wa-fab-toggle:checked ~ .wa-fab-panel
   and its two siblings. No JavaScript, and js/script.js - which is
   shared by all 41 pages - was left alone.

   WHY z-index 9000
   Measured across the two shared stylesheets, the navigation layers
   sit at 99998 (.category-content), 99999 (.mega-menu) and 999999
   (.top-dropdown-menu, the close buttons). 9000 is comfortably
   above page content and comfortably below all of them, so the
   mobile menu still covers the widget instead of the widget
   covering the menu.

   THE NAME IS HIDDEN UNTIL HOVER
   Measured at rest on the sample: opacity 0, visibility hidden,
   pointer-events none, and 0px wide. So it is not merely
   transparent - it is not painted, cannot be clicked and cannot be
   focused, and it never sits on the page as a stray white pill.

   The pulse pauses while the panel is open. A ring expanding around
   a button the visitor is already using is noise, and the name
   would otherwise land on top of the open panel.

   THE INPUT IS NOT A FAKE CHAT
   There is no chat backend here and none was asked for, so the send
   button does not pretend to deliver anything: it is a link that
   opens WhatsApp with the message pre-filled from the URL. The
   placeholder says so too, so nobody types into a box that goes
   nowhere.
   ================================================================ */

.wa-fab{
    position:fixed;
    right:26px;
    bottom:26px;
    z-index:9000;
    font-family:Arial,Helvetica,sans-serif;
}

.wa-fab *{box-sizing:border-box}

/* the toggle: hidden, but NOT display:none or hidden, so it keeps
   its place in the tab order and Space toggles the panel */
.wa-fab-toggle{
    position:absolute;
    width:1px;height:1px;
    margin:-1px;padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
}

/* text that only screen readers need */
.wa-fab-sr{
    position:absolute;
    width:1px;height:1px;
    margin:-1px;padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
}

/* ---------- the button: design 8, the pulsing circle ---------- */
.wa-fab-btn{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:58px;height:58px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.22);
    transition:transform .2s ease,box-shadow .2s ease;
}
.wa-fab-btn:hover{
    transform:scale(1.07);
    box-shadow:0 14px 32px rgba(0,0,0,.28);
}
.wa-fab-btn .bi{
    font-size:30px;
    line-height:1;
    position:relative;
    z-index:2;
}

/* the pulse. It is ::before on the button so it inherits the
   border-radius and never needs a box of its own. */
.wa-fab-btn::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:2px solid rgba(37,211,102,.55);
    animation:waFabPulse 2.6s ease-out infinite;
}
@keyframes waFabPulse{
    0%{transform:scale(1);opacity:.7}
    70%{transform:scale(1.5);opacity:0}
    100%{opacity:0}
}

/* ---------- the name, hidden until hover ---------- */
.wa-fab-name{
    position:absolute;
    top:50%;
    right:calc(100% + 13px);
    transform:translateY(-50%) translateX(6px);
    background:#fff;
    color:#111827;
    font-size:15px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    padding:11px 19px;
    border-radius:24px;
    box-shadow:0 6px 20px rgba(0,0,0,.18);
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
/* the tail, a 6px triangle in the same white pointing back at the
   circle, drawn rather than rotated out of a glyph */
.wa-fab-name::after{
    content:"";
    position:absolute;
    right:-6px;
    top:50%;
    transform:translateY(-50%);
    width:0;height:0;
    border:6px solid transparent;
    border-left-color:#fff;
}
.wa-fab:hover .wa-fab-name,
.wa-fab:focus-within .wa-fab-name{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%) translateX(0);
}

/* ---------- the panel ---------- */
.wa-fab-panel{
    position:absolute;
    right:0;
    bottom:74px;
    width:344px;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 26px 64px rgba(0,0,0,.26),0 4px 14px rgba(0,0,0,.10);
    opacity:0;
    visibility:hidden;
    transform:translateY(16px) scale(.98);
    transform-origin:bottom right;
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
}

/* ---------- header ---------- */
.wa-fab-head{
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px 14px;
    background:linear-gradient(135deg,#00A884 0%,#075E54 100%);
    color:#fff;
}
.wa-fab-av{
    width:38px;height:38px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}
.wa-fab-av .bi{font-size:22px;line-height:1}
.wa-fab-tx{flex:1;min-width:0}
.wa-fab-tx b{display:block;font-size:14.5px;font-weight:700;line-height:1.25}
/* the live dot, drawn as a pseudo element so the markup stays a
   single span */
.wa-fab-tx span{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:11.5px;
    line-height:1.3;
    margin-top:1px;
    opacity:.92;
}
.wa-fab-tx span::before{
    content:"";
    width:6px;height:6px;
    border-radius:50%;
    background:#7CF5A0;
    flex:0 0 auto;
}
.wa-fab-ic{
    width:30px;height:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    cursor:pointer;
    opacity:.92;
    flex:0 0 auto;
    transition:background .18s ease,opacity .18s ease;
}
.wa-fab-ic:hover{background:rgba(255,255,255,.14);opacity:1}
.wa-fab-ic .bi{font-size:17px;line-height:1}

/* ---------- body: a whisper of the doodle wallpaper ---------- */
.wa-fab-body{
    position:relative;
    min-height:210px;
    padding:14px 13px;
    background:#F0F2F5;
}
.wa-fab-body::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.5;
    background-image:
        radial-gradient(circle at 12px 12px,rgba(17,27,33,.055) 1.5px,transparent 1.6px),
        radial-gradient(circle at 34px 30px,rgba(17,27,33,.04) 1.5px,transparent 1.6px),
        radial-gradient(circle at 24px 44px,rgba(17,27,33,.035) 1.5px,transparent 1.6px);
    background-size:46px 46px;
}
.wa-fab-msg{
    position:relative;
    max-width:82%;
    background:#fff;
    border-radius:10px;
    padding:9px 12px 7px;
    box-shadow:0 1px 1px rgba(11,20,26,.13);
    font-size:13.5px;
    line-height:1.45;
    color:#111B21;
}
/* the bubble tail, two borders of a transparent box */
.wa-fab-msg::after{
    content:"";
    position:absolute;
    left:-7px;top:0;
    width:0;height:0;
    border:7px solid transparent;
    border-top-color:#fff;
    border-right-color:#fff;
}
.wa-fab-who{display:block;font-size:12px;font-weight:600;color:#667781;margin-bottom:2px}
.wa-fab-when{
    display:block;
    text-align:right;
    font-size:10.5px;
    color:#8696A0;
    margin-top:3px;
}
.wa-fab-when b{font-weight:500}

/* ---------- foot ---------- */
.wa-fab-foot{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 11px;
    background:#fff;
    border-top:1px solid #E9EDEF;
}
.wa-fab-inp{
    flex:1;
    min-width:0;
    height:40px;
    border-radius:20px;
    border:1px solid #D7DBDE;
    background:#F0F2F5;
    padding:0 14px;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13.5px;
    color:#111B21;
    outline:none;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.wa-fab-inp::placeholder{color:#8696A0}
.wa-fab-inp:focus{
    border-color:#25D366;
    background:#fff;
    box-shadow:0 0 0 3px rgba(37,211,102,.14);
}
.wa-fab-emo,.wa-fab-send{
    width:40px;height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    cursor:pointer;
    text-decoration:none;
    transition:background .18s ease,color .18s ease,transform .18s ease;
}
.wa-fab-emo{
    background:none;
    color:#8696A0;
    width:36px;height:36px;
}
.wa-fab-emo:hover{background:#F0F2F5;color:#667781}
/* green rather than the flat grey of the reference, which read as
   a disabled control */
.wa-fab-send{
    background:#25D366;
    color:#fff;
    box-shadow:0 2px 8px rgba(37,211,102,.4);
}
.wa-fab-send:hover{background:#1EB855;transform:scale(1.06)}
.wa-fab-emo .bi{font-size:19px;line-height:1}
.wa-fab-send .bi{font-size:18px;line-height:1;transform:translateX(-1px)}
.wa-fab-note{
    font-size:10.5px;
    color:#8696A0;
    background:#fff;
    text-align:center;
    padding:0 12px 10px;
}

/* ---------- the whole toggle, in CSS ---------- */
/* open */
.wa-fab-toggle:checked ~ .wa-fab-panel{
    opacity:1;
    visibility:visible;
    transform:none;
}
/* the name would land on the open panel */
.wa-fab-toggle:checked ~ .wa-fab-name{
    opacity:0;
    visibility:hidden;
}
/* no pulse on a button that is already in use */
.wa-fab-toggle:checked ~ .wa-fab-btn::before{
    animation-play-state:paused;
    opacity:0;
}
/* keyboard focus, since the checkbox is what gets the focus */
.wa-fab-toggle:focus-visible ~ .wa-fab-btn{
    outline:3px solid #0B1F4D;
    outline-offset:3px;
}
.wa-fab-toggle:focus-visible ~ .wa-fab-panel{
    outline:3px solid #0B1F4D;
    outline-offset:3px;
}

/* ---------- phones ----------
   Inset from the edge and capped, so the panel cannot be pushed
   off a narrow screen the way a fixed 344px could be. */
@media (max-width:420px){
    .wa-fab{right:16px;bottom:16px}
    .wa-fab-panel{width:min(344px,calc(100vw - 32px))}
    .wa-fab-name{display:none}
}

/* Remove default dots from Our Programmes */
.programme-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.programme-list li {
    list-style: none;
}

.programme-list li::marker {
    display: none;
    content: "";
}




/* ================================================================
   ODLC FOOTER REBUILD  (see footer.php for the block order)
   Appended, never mixed into the legacy rules above.
   ================================================================ */
/* ================================================================
   ODLC FOOTER REBUILD
   ================================================================
   Appended, never mixed into the legacy rules above.

   Every selector here is prefixed odlcf-, so none of it can be
   reached by the old .main-footer / .footer-* rules and none of
   the old rules can reach it. The WhatsApp CSS further up this
   file is untouched.

   Type scale
     text     13px  Arial / Helvetica / sans-serif
     headings 18px  -apple-system / BlinkMacSystemFont

   Icon tiles follow the site's own measured rule
   (.odlc-pathway-icon): 43x43, radius 11px, solid fill,
   white glyph, 18px glyph. Blue #287BE0, purple #6655E8,
   orange #F27B21. The site's .green variant is never used in
   markup so it is omitted.

   Breakpoints are min-width only. max-width is exclusive at the
   boundary in some engines, so a max-width:1379px query silently
   fails at exactly 1379px. min-width is inclusive.

   Layout is mobile-first: the base rules ARE the mobile layout,
   then 768px adds the tablet tier and 1380px adds the desktop
   five columns.
   ================================================================ */

.odlcf-cta,
.odlcf-main,
.odlcf-ds,
.odlcf-st,
.odlcf-dc,
.odlcf-lg,
.odlcf-cb {
  --ft-text: 13px;
  --ft-head-size: 18px;
  /* one spacing token, used for every gap inside footer column 1 */
  --ft-gap: 16px;
  /* deep ODLC blue, the exact colour the footer already used */
  --ft-navy: #06285F;
  --ft-panel: #0B3C7C;
  --ft-deep: #04173A;
  --ft-bar: #03122B;
  --ft-accent: #FFD166;
  --ft-rule: rgba(255, 255, 255, .12);
  --ft-body: rgba(255, 255, 255, .80);
  --ft-dim: rgba(255, 255, 255, .72);
  --ft-sans: Arial, Helvetica, sans-serif;
  --ft-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.odlcf-cta,
.odlcf-main,
.odlcf-ds,
.odlcf-st,
.odlcf-dc,
.odlcf-lg,
.odlcf-cb *,
.odlcf-cta *,
.odlcf-main * {
  box-sizing: border-box;
}

.odlcf-cta a,
.odlcf-main a,
.odlcf-ds a,
.odlcf-st a,
.odlcf-dc a,
.odlcf-lg a,
.odlcf-cb a {
  font-family: var(--ft-sans);
  text-decoration: none;
}

.odlcf-cta img,
.odlcf-main img {
  max-width: 100%;
}


/* ---------- shared bits ------------------------------------- */

.odlcf-eyebrow {
  display: block;
  font-family: var(--ft-sans);
  font-size: var(--ft-text);
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ft-accent);
}

.odlcf-h2,
.odlcf-h3,
.odlcf-c1-name {
  margin: 0;
  font-family: var(--ft-head);
  font-size: var(--ft-head-size);
  font-weight: 800;
  letter-spacing: -.2px;
  line-height: 1.25;
  color: #fff;
  text-transform: none;
}

/* column headings: hidden on mobile where the accordion header replaces them */
.odlcf-h4 {
  display: none;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ft-rule);
  font-family: var(--ft-head);
  font-size: var(--ft-head-size);
  font-weight: 800;
  letter-spacing: -.2px;
  line-height: 1.25;
  color: #fff;
}

.odlcf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--ft-sans);
  font-size: var(--ft-text);
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.4;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}

.odlcf-btn-primary {
  background: var(--ft-accent);
  border-color: var(--ft-accent);
  color: #3A2A00;
}

.odlcf-btn-primary:hover {
  background: #FFE08A;
  border-color: #FFE08A;
  color: #3A2A00;
}

.odlcf-btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}

.odlcf-btn-ghost:hover {
  border-color: var(--ft-accent);
  color: var(--ft-accent);
}

/* keyboard focus is visible on every interactive element */
.odlcf-cta a:focus-visible,
.odlcf-main a:focus-visible,
.odlcf-ds a:focus-visible,
.odlcf-lg a:focus-visible,
.odlcf-cb a:focus-visible,
.odlcf-acc-h:focus-visible {
  outline: 2px solid var(--ft-accent);
  outline-offset: 2px;
  border-radius: 6px;
}


/* ---------- 1. PRE-FOOTER CTA -------------------------------- */

.odlcf-cta {
  background: linear-gradient(115deg, #0A3773 0%, #072C60 55%, #062454 100%);
  padding: 36px 0 40px;
}

.odlcf-cta-in {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.odlcf-cta-txt {
  flex: 1 1 420px;
  min-width: 0;
}

.odlcf-cta .odlcf-eyebrow {
  margin-bottom: 14px;
}

.odlcf-cta h2 {
  margin: 0 0 14px;
  font-family: var(--ft-head);
  font-size: var(--ft-head-size);
  font-weight: 800;
  letter-spacing: -.4px;
  line-height: 1.25;
  color: #fff;
}

.odlcf-cta p {
  margin: 0;
  max-width: 640px;
  font-family: var(--ft-sans);
  font-size: var(--ft-text);
  line-height: 1.75;
  color: var(--ft-body);
}

.odlcf-cta-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.odlcf-cta-btns .odlcf-btn {
  flex: 1 1 100%;
}


/* ---------- 2. MAIN FOOTER ----------------------------------- */

.odlcf-main {
  background: linear-gradient(180deg, #0A3773 0%, var(--ft-navy) 46%, #051F49 100%);
  padding: 44px 0 0;
  color: var(--ft-body);
}

.odlcf-main-in {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 20px;
}

.odlcf-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* icon tiles: one shared rule so the two blocks cannot drift apart */
.odlcf-ic {
  width: 43px;
  height: 43px;
  border-radius: 11px;
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* line-height:1 stops the glyph sitting in a taller line box, which
   is what made the icons look stretched top to bottom */
.odlcf-ic i {
  display: block;
  line-height: 1;
}

.odlcf-blue { background: #287BE0; }
.odlcf-purple { background: #6655E8; }
.odlcf-orange { background: #F27B21; }

.odlcf-list {
  list-style: none;
  margin-top: 10px;
  margin: 0;
  padding: 0;
}

.odlcf-list li {
  margin: 0 0 10px;
}

.odlcf-list a {
  display: inline-block;
  padding: 2px 0;
  font-size: var(--ft-text);
  line-height: 1.6;
  color: var(--ft-body);
  transition: color .18s;
}

.odlcf-list a:hover {
  color: var(--ft-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* column 1 ---------------------------------------------------- */

/* ODLClogofooter.png is 488x600 with its alpha bbox filling the whole
   frame, so the crest artwork touches the top and bottom of the element
   itself. The logo therefore carries no internal padding; the uniform
   --ft-gap below is what gives it equal space above and below. */
.odlcf-logo {
  height: 78px;
  width: auto;
  object-fit: contain;
  margin: 0;
}

.odlcf-c1-name {
  color: var(--ft-dim);
}

.odlcf-c1-head {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  align-items: flex-start;
  gap: var(--ft-gap);
}

.odlcf-c1-head .odlcf-logo,
.odlcf-c1-head .odlcf-c1-name,
.odlcf-c1-head .odlcf-soc {
  margin: 0;
}

.odlcf-c1-txt {
  display: block;
  margin-top: var(--ft-gap);
}

.odlcf-c1-txt p {
  margin: 0 0 var(--ft-gap);
  font-size: var(--ft-text);
  line-height: 1.75;
  color: var(--ft-dim);
}

.odlcf-c1-txt p:last-child {
  margin-bottom: 0;
}

/* social tiles: padding:0 and line-height:1 are both required because
   these sit inside a footer column and otherwise inherit the nav-link
   padding and a taller line box */
.odlcf-soc {
  display: flex;
  gap: 10px;
}

.odlcf-soc a {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--ft-rule);
  color: rgba(255, 255, 255, .85);
  font-size: 15px;
  transition: background .2s, color .2s, border-color .2s;
}

.odlcf-soc a i {
  display: block;
  line-height: 1;
}

.odlcf-soc a:hover {
  background: var(--ft-accent);
  border-color: var(--ft-accent);
  color: #3A2A00;
}


/* column 5: contact ------------------------------------------- */

.odlcf-ct {
  margin: 0 0 var(--ft-gap);
  margin-top: 10px;
}

.odlcf-ct-h {
  margin: 0 0 var(--ft-gap);
  font-size: var(--ft-text);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ft-accent);
}

.odlcf-ct-v {
  margin: 0;
  font-size: var(--ft-text);
  line-height: 1.7;
  color: var(--ft-body);
}

.odlcf-ct-v a {
  color: var(--ft-body);
  transition: color .18s;
}

.odlcf-ct-v a:hover {
  color: var(--ft-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Buttons sit inside a footer column, so they inherit the nav-link
   padding and collapse to about 26px tall. Re-asserting the button
   box here fixes that, and the row's top margin uses --ft-gap so it
   matches the spacing above every other block. */
.odlcf-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--ft-gap);
}

.odlcf-btns .odlcf-btn {
  display: inline-flex;
  padding: 11px 16px;
  line-height: 1.4;
  justify-content: center;
}


/* ---------- 3. DIGITAL SERVICES STRIP ------------------------ */

.odlcf-ds {
  background: linear-gradient(180deg, #051F49 0%, var(--ft-navy) 100%);
  padding: 44px 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.odlcf-ds-in {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 20px;
}

.odlcf-ds-hd {
  margin-bottom: 20px;
}

.odlcf-ds-hd .odlcf-eyebrow {
  margin-bottom: 8px;
}

.odlcf-ds-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.odlcf-ds-c {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 12px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
}

.odlcf-ds-c .odlcf-ic {
  margin-bottom: 14px;
}

.odlcf-ds-c h4 {
  margin: 0 0 8px;
  font-family: var(--ft-head);
  font-size: var(--ft-head-size);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}

.odlcf-ds-c p {
  margin: 0 0 16px;
  flex: 1 1 auto;
  font-size: var(--ft-text);
  line-height: 1.75;
  color: rgba(255, 255, 255, .74);
}

.odlcf-ds-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ft-text);
  font-weight: 700;
  color: var(--ft-accent);
  transition: color .18s;
}

.odlcf-ds-link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.odlcf-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.odlcf-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 7px;
  font-size: var(--ft-text);
  font-weight: 700;
  letter-spacing: .3px;
  color: #fff;
}


/* ---------- 4. INSTITUTIONAL STRENGTH STRIP ----------------- */

.odlcf-st {
  background: var(--ft-deep);
  padding: 44px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.odlcf-st-in {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 20px;
}

.odlcf-st-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.odlcf-st-i {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.odlcf-st-i h4 {
  margin: 0 0 7px;
  font-family: var(--ft-head);
  font-size: var(--ft-head-size);
  font-weight: 700;
  letter-spacing: -.2px;
  line-height: 1.2;
  color: #fff;
  text-transform: uppercase;
}

.odlcf-st-i p {
  margin: 0;
  font-size: var(--ft-text);
  line-height: 1.75;
  color: rgba(255, 255, 255, .70);
}


/* ---------- 5. INSTITUTIONAL DISCLAIMER --------------------- */

.odlcf-dc {
  background: var(--ft-panel);
  padding: 42px 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.odlcf-dc-in {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 20px;
}

.odlcf-dc-in .odlcf-eyebrow {
  margin: 0 0 8px;
}

.odlcf-dc-in h2 {
  margin: 0 0 20px;
}

.odlcf-dc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 40px;
}

.odlcf-dc-grid p {
  margin: 0;
  font-size: var(--ft-text);
  line-height: 1.85;
  color: rgba(255, 255, 255, .86);
}

.odlcf-dc-grid a {
  color: var(--ft-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.odlcf-dc-last {
  margin-top: 16px;
}


/* ---------- 6. LEGAL LINKS ---------------------------------- */

.odlcf-lg {
  background: var(--ft-navy);
  padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.odlcf-lg-in {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 20px;
}

/* mobile: legal links fold behind an accordion */
.odlcf-lg-list {
  display: none;
  flex-wrap: wrap;
  gap: 0 18px;
  padding-top: 14px;
}

.odlcf-lg.odlcf-open .odlcf-lg-list {
  display: flex;
}

/* links with no page yet look identical to resolved ones within the
   same group, so a placeholder is never mistaken for a link type */
.odlcf-lg-list a {
  display: inline-block;
  padding: 7px 0;
  font-size: var(--ft-text);
  font-weight: 600;
  color: rgba(255, 255, 255, .76);
  transition: color .18s;
}

.odlcf-lg-list a:hover {
  color: var(--ft-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ---------- 7. COPYRIGHT BAR -------------------------------- */

.odlcf-cb {
  background: var(--ft-bar);
  padding: 22px 0;
}

.odlcf-cb-in {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.odlcf-cb p {
  margin: 0;
  font-size: var(--ft-text);
  color: rgba(255, 255, 255, .70);
}

.odlcf-cb-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.odlcf-cb-links a {
  font-size: var(--ft-text);
  color: rgba(255, 255, 255, .70);
  transition: color .18s;
}

.odlcf-cb-links a:hover {
  color: var(--ft-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ---------- mobile accordions (the base layout) ------------- */

.odlcf-acc-h {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ft-rule);
  font-family: var(--ft-head);
  font-size: var(--ft-head-size);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.odlcf-lg-h {
  padding: 4px 0 14px;
}

.odlcf-acc-h i {
  font-size: 14px;
  color: var(--ft-accent);
  transition: transform .2s;
  flex: 0 0 auto;
}

.odlcf-acc-b {
  padding: 0 0 18px;
  display: none;
}

.odlcf-acc.odlcf-open .odlcf-acc-b {
  display: block;
}

.odlcf-acc.odlcf-open .odlcf-acc-h i {
  transform: rotate(180deg);
}

/* About ODLC is open on load so the logo and profile stay visible */
.odlcf-c1.odlcf-open .odlcf-acc-b {
  display: block;
}


/* ================================================================
   TABLET  768px and up
   Two balanced columns. Accordion chrome is removed and the real
   column headings return.
   ================================================================ */

@media (min-width: 768px) {

  /* .odlcf-cta {
    padding: 52px 0 56px;
  } */

  .odlcf-cta-in {
    gap: 26px;
  }

  .odlcf-cta-btns {
    width: auto;
  }

  .odlcf-cta-btns .odlcf-btn {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .odlcf-main {
    padding: 56px 0 0;
  }

  .odlcf-main-in,
  .odlcf-ds-in,
  .odlcf-st-in,
  .odlcf-dc-in,
  .odlcf-lg-in,
  .odlcf-cb-in {
    padding: 0 40px;
  }

  .odlcf-ds-hd {
    margin-bottom: 26px;
  }

  .odlcf-cb-in {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  /* headings and column bodies come back, accordion chrome goes away */
  .odlcf-h4 {
    display: block;
  }

  .odlcf-acc-h {
    display: none;
  }

  .odlcf-acc-b {
    display: block;
    /* padding-bottom: 56px; */
  }

  .odlcf-lg-list {
    display: flex;
    gap: 0 26px;
    padding-top: 0;
  }

  .odlcf-cols {
    grid-template-columns: 1fr 1fr;
    gap: 34px 40px;
  }

  .odlcf-c1 {
    grid-column: 1 / -1;
  }

  /* column 1 spans the full width here, so its two paragraphs would
     run to about 929px on a line. Split them into two balanced text
     columns instead. */
  .odlcf-c1-head {
    flex-direction: row;
    align-items: center;
    gap: var(--ft-gap);
    flex-wrap: wrap;
  }

  .odlcf-c1-head .odlcf-c1-name {
    flex: 1 1 auto;
  }

  .odlcf-c1-txt {
    column-count: 2;
    column-gap: 40px;
  }

  .odlcf-ds-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* 2x2 rather than 4 across: at 18px "STRUCTURED ACADEMIC
     GOVERNANCE" needs about 425px and would break across two lines in
     a 304px track. Two columns give about 630px each. */
  .odlcf-st-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 40px;
  }

}
/* ================================================================
   DESKTOP  1380px and up
   Five aligned columns.

   Column widths are sized to max(longest link, longest heading),
   measured at the 18px heading size:
     profile 244 | programmes 271 | learner 192 | governance 237
     | contact 236
   1180px of columns plus 4 x 26px gaps is 1284px, which fits the
   1380px container (1380 - 80px padding = 1300px).

   Learner Services was raised from 186 to 192 because on the real
   page the container measures 1365px rather than 1380px, which
   left that column at 186.1px against a link that needs exactly
   186px, so "International Student Application" wrapped. The 6px
   comes off the profile column, whose heading wraps either way.

   The profile column is 244px rather than the 318px its heading
   would need on one line, because fitting that would push the total
   to 1352px. The council name therefore wraps to two lines, which
   other multi-word headings already do at this size.

   The five columns need all of that width, so this tier starts at
   1380. At 1200px eight links wrapped, and at 1280px six did, which
   is what made the earlier layout look cramped.
   ================================================================ */

@media (min-width: 1380px) {
  .odlcf-cols {
    grid-template-columns: 244fr 271fr 192fr 237fr 236fr;
    gap: 26px;
  }

  .odlcf-c1 {
    grid-column: auto;
  }

  .odlcf-c1-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .odlcf-c1-head .odlcf-c1-name {
    flex: 0 0 auto;
  }

  .odlcf-c1-txt {
    column-count: auto;
  }

  .odlcf-ds-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .odlcf-dc-grid {
    grid-template-columns: 1fr 1fr;
  }

}


/* ================================================================
   ODLC FOOTER REBUILD - TYPE SCALE OVERRIDE
   ================================================================
   READ THIS BEFORE EDITING ANY FONT SIZE OR FONT FAMILY ABOVE.

   Two stylesheets load AFTER footer.css:
       index.css              (homepage)
       global-typography.css  (every page)

   Both set bare element selectors with !important:
       h2 { font-size: 35px !important }
       h4 { font-size: 25px !important }
       p  { font-size: 16px !important }
       a  { font-size: 15px !important;
           font-family: -apple-system, BlinkMacSystemFont, sans-serif !important }

   A bare element selector is less specific than any class selector,
   but !important outranks specificity, so those rules beat every
   ordinary rule in this file. Measured on the live homepage, that
   rendered the headings at 25px and 35px instead of 18px, body text
   at 15px and 16px instead of 13px, and every footer link in the
   -apple-system stack instead of Arial.

   The layer below re-asserts the intended scale with !important on
   class selectors. !important on a class selector wins against
   !important on an element selector, so this is the correct way to
   win, not a blunt override.

   Only the elements that were actually measured as overridden are
   listed. Any new heading or paragraph added to the footer markup
   must be added here too, or it will inherit the 16px/25px/35px
   defaults.

   If those two stylesheets are ever changed to scope their rules,
   this layer can be deleted.
   ================================================================ */

/* headings: 18px */

.odlcf-h2,
.odlcf-h3,
.odlcf-h4,
.odlcf-c1-name,
.odlcf-cta h2,
.odlcf-dc-in h2,
.odlcf-ds-c h4,
.odlcf-st-i h4,
.odlcf-lg-h,
.odlcf-acc-h {
  font-size: var(--ft-head-size) !important;
}

/* text: 13px */

.odlcf-eyebrow,
.odlcf-list a,
.odlcf-cta p,
.odlcf-c1-txt p,
.odlcf-ct-h,
.odlcf-ct-v,
.odlcf-ds-c p,
.odlcf-ds-link,
.odlcf-st-i p,
.odlcf-dc-grid p,
.odlcf-lg-list a,
.odlcf-cb p,
.odlcf-cb-links a,
.odlcf-btn,
.odlcf-badge {
  font-size: var(--ft-text) !important;
}


/* heading family: -apple-system stack */

.odlcf-h2,
.odlcf-h3,
.odlcf-h4,
.odlcf-c1-name,
.odlcf-cta h2,
.odlcf-dc-in h2,
.odlcf-ds-c h4,
.odlcf-st-i h4,
.odlcf-lg-h,
.odlcf-acc-h {
  font-family: var(--ft-head) !important;
}

/* text family: Arial / Helvetica */

.odlcf-eyebrow,
.odlcf-list a,
.odlcf-cta p,
.odlcf-c1-txt p,
.odlcf-ct-h,
.odlcf-ct-v,
.odlcf-ds-c p,
.odlcf-ds-link,
.odlcf-st-i p,
.odlcf-dc-grid p,
.odlcf-lg-list a,
.odlcf-cb p,
.odlcf-cb-links a,
.odlcf-btn,
.odlcf-badge {
  font-family: var(--ft-sans) !important;
}

/* the Arial stack also has to reach every link, because the bare
   a rule carries an !important font-family of its own */

.odlcf-cta a,
.odlcf-main a,
.odlcf-ds a,
.odlcf-st a,
.odlcf-dc a,
.odlcf-lg a,
.odlcf-cb a {
  font-family: var(--ft-sans) !important;
}

/* headings are nested inside a, so they are restated after the rule
   above to keep the system stack on headings only */

.odlcf-h2,
.odlcf-h3,
.odlcf-h4,
.odlcf-c1-name,
.odlcf-cta h2,
.odlcf-dc-in h2,
.odlcf-ds-c h4,
.odlcf-st-i h4 {
  font-family: var(--ft-head) !important;
}


/* ============================================================================
   FOOTER GUTTERS MATCH THE SECTIONS ABOVE IT
   ----------------------------------------------------------------------------
   The footer had its own fixed width system that had nothing to do with the
   rest of the page. Every section uses one ladder:

       width: 92%;  max-width: 1380px;  margin-inline: auto
       @media (max-width:1199px)  width: 94%
       @media (max-width:767px)   width: 90%
       @media (max-width:480px)   width: 92%

   The footer's seven inner containers instead used:

       max-width: 1380px;  margin: 0 auto;  padding: 0 20px

   A hard 1380px with a fixed 20px inner pad and no percentage step. So above
   1500px it happened to land near the right place by coincidence, and below
   that it drifted away from the sections - measured left/right gutter against
   the section reference on the same page:

       1600px   sections 102/103   footer 142/143    40px too far in
       1440px   sections  57/57    footer  62/63      5px
       1200px   sections  47/48    footer  40/40      7px too far OUT
       1024px   sections  30/30    footer  40/40     10px too far out
        900px   sections  27/27    footer  40/40     13px too far out
        768px   sections  23/23    footer  40/40     17px too far out
        390px   sections  15/15    footer  20/20      5px too far out

   So it was wrong in both directions depending on the width, which is what
   makes it read as "not aligned" rather than as a deliberate difference.

   All seven containers move onto the section ladder, and padding-inline goes to
   zero so the content edge is the container edge. The vertical padding on the
   .odlcf-* bands above them is untouched - that is spacing between blocks, not
   the gutter.

   .footer-container, .footer-features and .footer-bottom are NOT included: none
   of the three appears in includes/footer.php, so those rules are for markup
   that is not on the page and changing them would be guesswork.

   NO JUSTIFY, PER THE CLIENT

   Alignment here is plain flush-left. text-align:justify stretches the spaces
   between words to force both edges to line up, and that is exactly the effect
   that was asked to be avoided - it leaves rivers of white inside the line and
   makes the text look spaced out rather than aligned.

   Worth knowing: footer.css already carried text-align:justify !important on
   .footer-about-content p at two breakpoints, but that class does not appear in
   footer.php, so the rule matches nothing and no justify was actually in effect.
   The explicit left below keeps it that way even if a wrapper is added later,
   and costs nothing if not.
   ============================================================================ */

.odlcf-cta-in,
.odlcf-main-in,
.odlcf-ds-in,
.odlcf-st-in,
.odlcf-dc-in,
.odlcf-lg-in,
.odlcf-cb-in{
    width:92% !important;
    max-width:1380px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    text-align:left !important;   /* never justify - it spaces out the words */
}

@media (max-width:1199px){
    .odlcf-cta-in,
    .odlcf-main-in,
    .odlcf-ds-in,
    .odlcf-st-in,
    .odlcf-dc-in,
    .odlcf-lg-in,
    .odlcf-cb-in{
        width:94% !important;
    }
}

@media (max-width:767px){
    .odlcf-cta-in,
    .odlcf-main-in,
    .odlcf-ds-in,
    .odlcf-st-in,
    .odlcf-dc-in,
    .odlcf-lg-in,
    .odlcf-cb-in{
        width:90% !important;
    }
}

@media (max-width:480px){
    .odlcf-cta-in,
    .odlcf-main-in,
    .odlcf-ds-in,
    .odlcf-st-in,
    .odlcf-dc-in,
    .odlcf-lg-in,
    .odlcf-cb-in{
        width:92% !important;
    }
}

/* the paragraphs themselves, for the same reason */
.odlcf-main p,
.odlcf-ds p,
.odlcf-st p,
.odlcf-lg p,
.odlcf-cb p,
.odlcf-cta p{
    text-align:left !important;
}


/* ============================================================================
   INSTITUTIONAL INFORMATION AND ABOUT ODLC - JUSTIFIED, GAPS TAKEN OUT OF THE
   WORD SPACES
   ----------------------------------------------------------------------------
   Both blocks are justified, so both edges of every line line up. What changed is
   where the browser puts the leftover pixels.

   WHY THE SPACED-OUT LOOK HAPPENED

   A justified line has a few pixels left over once its words are placed, and the
   browser must put them somewhere or the right edge will not line up. The
   default somewhere is the word spaces. On a line holding 100-plus characters
   there is a lot to place, so the spaces open visibly far apart - which is the
   look that was rejected.

   THE ALTERNATIVE: text-justify:inter-character

   text-justify tells the browser which kind of gap to open. inter-word is the
   default and puts everything between the words. inter-character puts it between
   letters instead, as even letter tracking. The edges still line up; the
   looseness moves somewhere far less visible.

   MEASURED IN THE BROWSER ON THE LIVE PAGE, widest gap between two words

       viewport   flush left   inter-word   inter-character
          390px       3.6px        14.6px           4.8px
          600px       3.6px         9.7px           4.4px
          768px       3.6px         8.9px           4.2px
          992px       3.6px         7.2px           4.1px
         1024px       3.6px         6.8px           4.0px
         1200px       3.6px         6.6px           3.9px
         1440px       3.6px         8.0px           4.2px
         1600px       3.6px        19.1px           5.3px
         1920px       3.6px        19.1px           5.3px

   An unstretched space in this copy is 3.6px. So inter-word stretches the worst
   gap to as much as five times a normal space, while inter-character holds it to
   roughly one and a half at every width. Average gap behaves the same way: 6.9px
   down to 4.0px at 1600px and 1920px.

   WHAT IT COSTS

   The slack now appears as letter tracking instead. Measured, the average advance
   between two characters rises from about 12.2px to about 12.7px, roughly 4
   percent. That is below what the eye reads as tracking, and it is spread evenly
   over every line rather than concentrated into a few loose spaces.

   WHY NOT HYPHENATION - MEASURED AND REJECTED

   hyphens:auto looks like the textbook answer and it was tried here first. It does
   not work in this browser. The declaration is honoured and the page declares
   lang="en" on the html element, but no word is ever actually broken: three test
   lines with hyphens:auto produced exactly the same line breaks as hyphens:manual,
   zero words split across a line. With no hyphenation dictionary available the
   declaration is dead code, so it cannot be relied on to close the gaps.

   Soft hyphens, U+00AD, were tried as a dictionary-independent substitute. They do
   take effect - line count rises and word gaps fall - but the result is uneven: at
   1440px the worst gap still reached 12.1px, and below 992px, where the layout is a
   single column, it got worse rather than better, 34.6px at 390px, because a
   narrower line leaves less to work with. It also means editing the copy in
   footer.php to carry invisible characters. Not worth it next to
   inter-character, which needs no copy changes and behaves the same at every width.

   SELECTORS, AND WHY THEY ARE NOT SHORTER

   .odlcf-dc-grid > p is the Institutional information block. .odlcf-dc is a
   top-level section in footer.php and is not inside .odlcf-main, so the blanket
   flush-left rule lower down this file, .odlcf-main p, does not match it at all
   and there is no conflict to win.

   .odlcf-acc-b .odlcf-c1-txt > p is the About ODLC block. That one does sit inside
   .odlcf-main, so it matches the blanket rule .odlcf-main p, which is (0,1,1) and
   which carries !important. This selector is (0,3,1), so it wins on specificity
   rather than on source order. Written any shorter - as .odlcf-c1-txt p it would
   be (0,2,1) and still win, but the extra nesting documents the intent and leaves
   no room for the blanket rule to creep back in via a later edit.

   overflow-wrap:break-word keeps the email address and the long programme names
   from forcing an overwide line. hyphens is left at its inherited value: it was
   measured above and does nothing in this browser, so declaring it would only
   suggest a protection that is not there.
   ============================================================================ */

.odlcf-dc-grid > p{
    text-align:justify !important;
    text-justify:inter-character !important;
    overflow-wrap:break-word !important;
}

.odlcf-acc-b .odlcf-c1-txt > p{
    text-align:justify !important;
    text-justify:inter-character !important;
    overflow-wrap:break-word !important;
}

/* ================================================================
   FOOTER TEXT IS FLUSH LEFT ON MOBILE, NOT JUSTIFIED
   Appended at the end. Nothing above this line was edited.

   THE PROBLEM

   Two rules near the end of this file set the footer's own paragraphs to
   justified, with character-level spacing as well:

       footer.css:7901   .odlcf-dc-grid > p
       footer.css:7907   .odlcf-acc-b .odlcf-c1-txt > p

           text-align: justify !important;
           text-justify: inter-character !important;
           overflow-wrap: break-word !important;

   Both are unscoped, so they apply at every width. On a desktop footer
   column the extra spacing is barely noticeable. In a phone-width column
   it is not: justification has to stretch the spaces between words to make
   both edges line up, and when the column is only about 250px wide there
   are few words per line to absorb that. The result is the ragged, spaced
   out look the screenshot showed.

   MEASURED AT 360px, WHOLE PAGE, EVERY TEXT-BEARING ELEMENT

       273 elements examined
         8 with text-align: justify   - all inside .odlcf-main
         0 in .odlcf-cta, .odlcf-cb, .main-header
         0 in any card on the page

   The eight were the About ODLC column text and the disclaimer column,
   including the paragraph holding the verification@odlc.ac.in link.

   WHY THIS IS NOT A NEW RULE BUT A CORRECTION

   This file already decided the question. A block earlier in it, with the
   comment "never justify - it spaces out the words", sets
   text-align:left !important on .odlcf-cta p, and the note above that
   explains the same reasoning: justify "stretches the spaces between words
   to force both edges to line up, and that is exactly the effect that was
   asked to be avoided - it leaves rivers of white inside the line". Those
   two rules at 7901 and 7907 go the other way, and were written after.

   The fix brings the two footers back in line with the decision already
   recorded in this file.

   MOBILE ONLY, ON PURPOSE

   Scoped to <=767px, which is the phone breakpoint this file already uses.
   Above that the columns are wide enough that justification does not open
   visible rivers, and changing it there is not what was asked for.

   WHAT IS KEPT

   overflow-wrap: break-word stays exactly as it is. That one is doing real
   work - it stops the email address and the long programme names forcing an
   overwide line in a narrow column - and it has nothing to do with spacing.

   Only text-align and text-justify are changed, and only on the two
   selectors above. Nothing else in this file or in footer.php is touched.
   ================================================================ */

@media (max-width: 767px) {

    .odlcf-dc-grid > p,
    .odlcf-acc-b .odlcf-c1-txt > p {
    
        text-justify: auto !important;
    }
}

/* ================================================================
   COLUMN HEADINGS GET AN ICON TILE AND A GOLD BAR
   Appended at the end. Nothing above this line was edited.

   WHAT CHANGED, AND WHY IT NEEDS NEW SELECTORS

   .odlcf-h4 was a single line of text with a 1px border-bottom across the
   full column width. It is now an icon tile beside the text, with a short
   gold bar under the text - matching the reference image.

   The tile is a SPAN, not the .odlcf-ic class the footer already uses in
   the Digital Services and Strength strips, even though that class has
   the identical 43px / 11px-radius / 18px-glyph metrics. Reusing it would
   mean editing that rule to add margin and align-self, and that rule is
   reached by eight tiles elsewhere. Two class names for the same 43px box
   is cheaper than one shared rule that has to carry exceptions. The
   values below are copied from .odlcf-ic at line 6884 and .odlcf-blue at
   line 6903 so the two still measure identically.

   WHY THE TEXT IS WRAPPED IN ITS OWN SPAN

   The gold bar is about 55px wide and sits under the TEXT, stopping
   short of the tile. That cannot be done with border-bottom, which always
   spans the whole box - and now the box includes the tile, so a border
   would run the full column width and start under the icon. An ::after on
   the text span is what allows the bar to be sized to the text and to sit
   inside the tile's column. The heading's own border-bottom is therefore
   set to none below; that is the one existing declaration this block
   cancels, and it is cancelled by a later rule rather than edited out.

   WHAT IS NOT TOUCHED

   No link, no list item, no text string and no heading label changes. The
   .odlcf-list items keep their plain spacing and gain no per-item rules.
   The Contact ODLC column stays the fifth grid column and is not turned
   into a separate strip. Column 1, the Digital Services strip, the
   Strength strip, the About block, the legal row and the CTA are all
   untouched.

   THE HEADING TEXT ITSELF IS UNCHANGED

   font-size still comes from var(--ft-head-size) via the !important rule
   at line 7613; this block does not set font-size on .odlcf-h4 and so
   cannot fight it. Weight, letter-spacing, colour and line-height are
   also left to line 6740.

   BREAKPOINTS

   The heading only exists at 768px and above - line 6740 sets display:none
   in the base and line 7443 sets display:block from 768px, where the
   accordion header replaces it. So the layout below is written for the
   desktop/tablet tier and needs no mobile override; below 768px the whole
   heading, tile included, is not rendered. The 420px query that exists for
   other footers parts does not apply here.
   ================================================================ */

/* the heading becomes a row: tile, then text */
.odlcf-h4 {
  display: flex;
  align-items: center;
  gap: 14px;
  /* the old full-width rule is cancelled so the gold bar can be the only
     underline. Declared again here rather than removed from line 6744. */
  border-bottom: 0;
  padding-bottom: 0;
}

/* the 43px tile, matching .odlcf-ic and .odlcf-blue */
.odlcf-h4-ic {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border-radius: 11px;
  background: #287BE0;
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the glyph itself sits square in the tile */
.odlcf-h4-ic i {
  display: block;
  line-height: 1;
}

/* the text, which carries the gold bar */
.odlcf-h4-tx {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}

/* the short gold bar, sized to the text rather than the column */
.odlcf-h4-tx::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 55px;
  height: 3px;
  border-radius: 2px;
  background: var(--ft-accent);
}

/* a long heading would push the bar off the end of the column, so the bar
   is capped at the text width and the text is allowed to wrap above it */
.odlcf-h4-tx {
  max-width: 100%;
}

/* ================================================================
   CORRECTION - KEEP THE COLUMN HEADING OUT OF THE MOBILE PANELS
   Appended at the end. Nothing above this line was edited.

   THE BUG THIS FIXES

   The block above sets .odlcf-h4 to display:flex. That was meant to apply
   only where the heading is actually shown, but it was written with no
   media query, so it also landed on the widths where the heading is
   supposed to be hidden.

   The base rule at line 6740 is .odlcf-h4 { display: none }, and
   line 7443 brings it back with display: block from 768px. Below 768px the
   accordion button is what names each section, and the heading is meant to
   be absent.

   Because the new rule has the SAME specificity as both of those - one
   class, no media query adds none - and it comes later in the file, it won
   on source order and the heading became display:flex at every width.

   On its own that looked harmless, because .odlcf-acc-b is display:none
   while the panel is collapsed, so the heading had no room to paint. It
   only showed up once a panel was OPENED. Measured on the live page at
   390px, after clicking the "Our Programmes" accordion:

       .odlcf-h4display = flex,  box 345x43px
       .odlcf-acc-bdisplay = block, height 311px
       button label "Our Programmes"
       h4      label "Our Programmes"   <- shown a second time, with a tile

   So every accordion on a phone repeated its own title, with the icon
   tile, directly beneath the button that already said the same thing.

   THE FIX

   Put the heading back to display:none below 768px, which is the width the
   existing min-width:768px query starts at. 767.98 rather than 767 so the
   boundary is inclusive in the same direction as the rule it has to agree
   with - at exactly 767px both queries are false, at 768px only the
   min-width one is true, and there is no width at which the two disagree
   about whether the heading should show.

   !important is not needed and is not used: this is later in the file than
   the display:flex it is correcting, at equal specificity, so source order
   settles it. Nothing else about the heading changes at these widths -
   the tile and the gold bar are children of the heading and go with it.
   ================================================================ */

@media (max-width: 767.98px) {
    .odlcf-h4 {
        display: none;
    }
}

/* ================================================================
   CONTACT STRIP - CONTACT ODLC MOVED OUT OF THE FIFTH COLUMN
   Appended at the end. Nothing above this line was edited.

   WHAT CHANGED

   Contact ODLC was the fifth grid column of .odlcf-cols, which left the
   other four narrow and stacked six contact groups in one tall thin slot.
   It is now four separate cards in a full-width strip under the columns.

   This matches footer-mockup.html: four cards of different content lengths,
   the icon BESIDE the label rather than above it, and the two action
   buttons at the foot of the fourth card.

   NOTHING WAS REMOVED. All six contact groups and both buttons moved across
   with their labels, values and hrefs intact - 70 hrefs before, 70 after.

   HOW THE SIX GROUPS ARE DISTRIBUTED

       card 1  Head Office - New Delhi          + address
       card 2  Karnataka Administrative Office + address
       card 3  Telephone, then General Support
       card 4  Credential Verification, then Official Websites, then buttons

   Cards 3 and 4 carry two groups each, so they are marked
   .odlcf-strip-card-rows: their body spans the full card width instead of
   sitting in the icon column. That is the only reason those two differ, and
   it is the same arrangement footer-mockup.html uses.

   WHY FOUR SEPARATE CARDS AND NOT ONE PANEL

   A single panel with hairline dividers was tried first and rejected in
   favour of the mockup. The separate cards are the version kept.

   WHAT IS REUSED, SO NOTHING EXISTING HAD TO CHANGE

       .odlcf-ic / .odlcf-blue    the footer's own 43x43 tile, already used
                                  by eight tiles in the Digital Services and
                                  Strength strips, so these three+ tiles
                                  measure exactly the same as those
       .odlcf-ct-h / .odlcf-ct-v  the gold uppercase label and white value,
                                  already written for this content
       .odlcf-btns / .odlcf-btn   the button row and the ghost button

   THE GRID, AND WHY THE FOUR RATIOS ARE INSIDE 1380px

   .odlcf-cols was 244fr 271fr 192fr 237fr 236fr - five ratios, one of them
   for Contact. Removing Contact leaves four ratios to redistribute, and that
   change belongs ONLY to the desktop tier. Below 1380px the base 1fr at
   footer.css:6879 and the two-up 1fr 1fr at footer.css:7463 must keep
   governing, so the four ratios are declared inside @media (min-width:
   1380px) rather than at the top level.

   This is written that way from the start rather than corrected afterwards.
   An unconditional .odlcf-cols rule is one class selector with no
   !important, so it would beat both of those on source order at every width
   - which is exactly what happened on a first attempt, leaving four columns
   squeezed into a phone below 768px.

   THE TILE IN CARD 3 AND 4 IS SMALLER

   The rows inside cards 3 and 4 get a 34px tile rather than 43px, so two of
   them fit above a label without the card growing taller than its
   neighbours. Cards 1 and 2 keep the full 43px. That is what
   footer-mockup.html shows.

   BELOW 768px

   The four columns above collapse into accordions, handled at footer.css:6740
   and 7443 and untouched here. The strip is a section in its own right and
   always shows: four cards across, two at 1100px, one at 680px. The action
   buttons stack and go full width below 680px, where two side by side no
   longer fit.
   ================================================================ */

@media (min-width: 1380px) {
    /* Contact's ratio is gone; the other four keep theirs */
    .odlcf-cols {
        grid-template-columns: 244fr 271fr 192fr 237fr;
    }
}

/* ---------- the strip ---------- */

.odlcf-strip {
    display: grid;
    grid-template-columns: 1.02fr 1.02fr 1fr 1.18fr;
    gap: 18px;
    padding: 24px 40px 56px;
    /* all four cards the same height */
    align-items: stretch;
}

/* ---------- one card ---------- */

.odlcf-strip-card {
    display: grid;
    grid-template-columns: 43px 1fr;
    align-items: start;
    column-gap: 12px;
    padding: 15px 17px 17px;
    background: rgba(9, 44, 95, .5);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(3, 18, 43, .20);
}

.odlcf-strip-body {
    min-width: 0;
    padding-top: 1px;
}

/* the first group in a card carries no top margin of its own */
.odlcf-strip-body .odlcf-ct {
    margin-top: 0;
}

/* a second group in the same card needs air above it */
.odlcf-strip-body .odlcf-ct + .odlcf-ct {
    margin-top: 13px;
}

/* nothing trailing inside the card */
.odlcf-strip-body .odlcf-ct:last-child {
    margin-bottom: 0;
}

/* ---------- cards that hold two groups ---------- */

.odlcf-strip-card-rows {
    grid-template-columns: 1fr;
}

.odlcf-strip-card-rows .odlcf-strip-body {
    grid-column: 1 / -1;
}

.odlcf-strip-row {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: start;
    column-gap: 12px;
}

.odlcf-strip-row + .odlcf-strip-row {
    margin-top: 13px;
}

/* the smaller tile the two-row cards use */
.odlcf-strip-row .odlcf-ic {
    width: 34px;
    height: 34px;
    font-size: 15px;
    border-radius: 10px;
}

/* ---------- the two action buttons ---------- */

/* full width of the card, one line, never wrapping */
.odlcf-strip-card .odlcf-btns {
    margin-top: 15px;
    flex-wrap: nowrap;
}

.odlcf-strip-card .odlcf-btns .odlcf-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    overflow: hidden;
}

/* ---------- the strip narrows ---------- */

@media (max-width: 1199px) {
    .odlcf-strip {
        grid-template-columns: 1fr 1fr;
        padding: 22px 40px 48px;
    }
}

@media (max-width: 767px) {
    .odlcf-strip {
        grid-template-columns: 1fr;
        padding: 20px 40px 40px;
    }
    /* two buttons no longer fit side by side on a phone */
    .odlcf-strip-card .odlcf-btns {
        flex-direction: column;
    }
    .odlcf-strip-card .odlcf-btns .odlcf-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .odlcf-strip {
        padding: 18px 40px 36px;
    }
    .odlcf-strip-card {
        padding: 14px 16px 16px;
    }
}

/* ================================================================
   CORRECTION - THE STRIP WAS INSET TWICE, SO IT DID NOT LINE UP
   Appended at the end. Nothing above this line was edited.

   THE BUG

   .odlcf-strip sits inside .odlcf-main-in, which already carries its own
   inset:

       footer.css:6872   max-width: 1380px; margin: 0 auto
       footer.css:6874   padding: 0 20px
       footer.css:7428   padding: 0 40px   from 768px

   The strip rule above gave it padding: 24px 40px 56px as well, so the
   cards were inset 40 + 40 = 80px from the footer's edge while the four
   columns directly above them sat at 40px. Measured on the live page at
   1440px, the cards were 284px wide where the mockup's were about 350px,
   and the two long labels - "Head Office - New Delhi" and "Karnataka
   Administrative Office" - wrapped to two lines as a result.

   So the strip was both misaligned with the columns above it and narrower
   than the design it was copying.

   THE FIX

   Vertical padding only. The horizontal inset belongs to .odlcf-main-in and
   the strip must not add a second one, exactly as .odlcf-cols does not.
   The cards then start on the same left edge as the columns and end on the
   same right edge, and pick up the width that was being lost.
   ================================================================ */

.odlcf-strip {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 1199px) {
    .odlcf-strip {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 767px) {
    .odlcf-strip {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 480px) {
    .odlcf-strip {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ================================================================
   MATCH footer-mockup.html - COLUMN 1 AND THE LINK LISTS
   Appended at the end. Nothing above this line was edited.

   The contact strip was done in the block above. This brings the rest of
   the mockup onto the live page: the profile column on the left and the
   three link columns.

   FOUR THINGS CHANGED, all of them visual

     1. The social icons become circles. They were 36px rounded squares at
        8px radius on a .08 white fill; the mockup has 37px circles on a
        .10 fill with a slightly stronger border. Nothing about the links
        changes - same three hrefs, same order.

     2. The gold bar under the social row. This one needed a markup change
        as well, because the live column had nothing there to style. A
        single empty span was added at footer.php:152, inside .odlcf-c1-head
        and directly after the social row. It is aria-hidden because it
        carries no meaning - it is the same 56x3px gold bar the mockup
        draws between the icons and the paragraphs.

     3. The two profile paragraphs are justified. They were flush left at
        1.75 leading in --ft-dim; the mockup has them justified with
        inter-character, 1.64 leading, 13px below. inter-character rather
        than plain justify because a narrow column stretches word spaces
        into visible holes, and this is the same conclusion the policy
        pages and footer columns reached for the same reason.

     4. Every link in the three columns gets the faint rule under it. The
        live .odlcf-list li had margin 0 0 10px and nothing else; the
        mockup has margin 0 0 2px plus a 1px rule at 6.5% white, with the
        last item's rule removed. The links become block-level so the rule
        spans the column width rather than stopping at the end of the text -
        that is the whole point of the rule, and inline-block links cannot
        do it.

        The bottom margin drops from 10px to 2px to pay for the rule, so the
        columns do not grow by 4px per item. At twelve items in the longest
        column that is the difference between a visibly taller column and
        one that stays as it is.

   WHAT DELIBERATELY DID NOT CHANGE

   The mockup is a picture, so its links are href="#" and it carries a few
   things the live site does not have. None of that was copied:

     - YouTube in the social row is still commented out at footer.php:146.
       No channel URL exists anywhere in this project, and inventing one
       would produce a dead link.
     - Learning Materials, Assignments & Assessments, Online Examinations
       and DigiLocker are still commented out at footer.php:206-211.
     - The address still says 15th Floor, as it does on every live page.
       The mockup says 16th; that contradiction is unresolved.

   Also untouched: the Digital Services strip, the Strength strip, the
   About block, the legal row, the CTA, and the accordion behaviour below
   768px.
   ================================================================ */

/* ---------- 1. the social icons become circles ---------- */

.odlcf-soc {
    gap: 11px;
    margin-bottom: 18px;
}

.odlcf-soc a {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 16px;
}

.odlcf-soc a:hover {
    background: var(--ft-panel);
    border-color: var(--ft-panel);
}

/* ---------- 2. the gold bar under the social row ---------- */

.odlcf-c1-rule {
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: var(--ft-accent);
}

/* ---------- 3. the profile paragraphs are justified ---------- */

.odlcf-c1-txt {
    margin-top: 15px;
}

.odlcf-c1-txt p {
    margin: 0 0 13px;
    line-height: 1.64;
    text-align: justify;
    text-justify: inter-character;
}

.odlcf-c1-txt p:last-child {
    margin-bottom: 0;
}

/* ---------- 4. a faint rule under every link in the three columns ---------- */

.odlcf-list li {
    margin: 0 0 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .065);
}

.odlcf-list li:last-child {
    border-bottom: 0;
}

/* block, so the rule spans the column instead of stopping at the text */
.odlcf-list a {
    display: block;
    padding: 9px 2px;
    line-height: 1.5;
}

/* ================================================================
   PORT footer-mockup.html VALUE FOR VALUE
   Appended at the end. Nothing above this line was edited.

   The last pass applied the four obvious things and stopped there. This one
   ports the mockup's measured values rather than the ones that were already
   close, because several were not close at all.

   Every number below was READ OFF BOTH PAGES side by side at the same
   viewport, not taken from the mockup's stylesheet and assumed to carry
   over. The pairs are written as mockup -> live-before.

   1. THE THREE HAIRLINE RULES AND THE COLUMN WIDTHS

      .odlcf-cols   272px 1px 331px 1px 331px 1px 331px  ->  4 fr columns, no rules
      gap            0 32px                               ->  26px, no rules
      padding        28px 0 24px                         ->  0

      The mockup pins the profile column at 272px and divides what is left
      into three equal columns, with a 1px rule standing in each of the
      three 32px gaps. Live used fr ratios and no rules at all, so the
      profile column was 336px and the rules simply were not there. Measured
      live before: 336px / 373px / 264px / 326px - not one pair equal.

      Three <span class="odlcf-col-div"> were added at footer.php:171, 199
      and 228 to carry the rules. They are aria-hidden; they are decoration.

      The rules are 1px of rgba(255,255,255,.10) at full height of the row,
      which is what a grid track of 1px gives.

   2. THE LOGO

      width 90px, height auto, display block  ->  width 290px, display inline

      The live rule set height: 78px and left width to auto, and the rule
      above it capped the column, so the logo was painting 290px wide by
      72px - wider than the column it sat in. The mockup sizes it by width
      and lets the height follow the aspect ratio, which is 90x111 here.

   3. THE PROFILE NAME

      21px / 800 / 1.24 / -.3px, margin 18px 0 16px, #fff
                              ->  18px / 800 / 1.25 / -.2px, margin 0, rgba(255,255,255,.72)

      It was 18px because .odlcf-c1-name shares the rule at footer.css:6726
      with the other headings and takes their size. It needs its own here to
      be 21px, and to be solid white rather than the dimmed body tone.

   4. THE SOCIAL ROW

      gap 11px, margin-bottom 18px, glyph 16px  ->  gap 11px, margin-bottom 0, glyph 15px

      The circles themselves were already right from the last pass - 37px,
      50% radius, .10 fill, .18 border - and are not touched here.

   5. THE PROFILE PARAGRAPHS

      13px / 1.64 / justify / 13px below / rgba(255,255,255,.78)
                              ->  13px / 1.6 / justify / 13px / rgba(255,255,255,.72)

      Justify already carried from the last pass. Leading and colour did not.

   6. THE COLUMN HEADINGS

      line-height 1.25, margin-bottom 22px   ->  1.35, 18px

      Both the heading row and the gold bar sit 4px higher than the mockup
      and 4px closer to the first link.

   7. THE HEADING TILE GLYPH

      19px  ->  18px

   8. THE GHOST BUTTON - every value differed

      height 48px, padding 0 24px, radius 6px, 13.5px / 600,
      letter-spacing normal, border rgba(255,255,255,.5),
      background rgba(255,255,255,.04), margin-top 22px, gap 10px
                              ->  padding 13px 22px, radius 8px, 13px / 700,
      letter-spacing .5px, border rgba(255,255,255,.34),
      background transparent, margin-top 0, gap 9px

      Live measured 162x46 against the mockup's 206x48. height is set
      explicitly rather than left to the padding, so the box is the same
      whatever the line-height resolves to. margin-top 22px is the space
      between the last programme link and the button, which live had none of.

   9. THE CONTACT CARD ICON COLUMN

      34px  ->  43px

      The mockup uses the same 34px tile in all four cards. Live had 43px in
      cards 1 and 2 and 34px in cards 3 and 4, which is why cards 1 and 2
      looked heavier than the other two.

  10. THE CONTACT CARD FILL

      a soft diagonal gradient, 160deg, from rgba(13,60,124,.62) to
      rgba(10,52,110,.55)  ->  flat rgba(9,44,95,.5)

  11. THE CONTACT LABELS AND VALUES - the last pass reused the old classes
      and never restyled them, so these were still the footer's originals

      label  12.5px / 700 / 1.35 / letter-spacing .35px / NOT uppercase
                                   ->  13px / 700 / 1.6 / 1.2px / uppercase
      value  12.5px / 1.52, margin 3px 0 0
                                   ->  13px / 1.6, margin 0

      The mockup's labels are sentence case, not the uppercase the old
      .odlcf-ct-h has carried since the footer was rebuilt. That is the most
      visible difference left in the strip.

      These are scoped to .odlcf-strip so the four cards change and nothing
      else that uses .odlcf-ct-h does. No other element on the site carries
      those classes - they were only ever used by the contact block - but the
      strip scoping makes that explicit rather than assumed.

   12. THE STRIP'S BOTTOM PADDING

      24px 0 0, with the footer's own 28px below it  ->  24px 0 56px

      .odlcf-main carries padding 56px 0 0 for its top edge and the sections
      that follow carry their own bottom padding, so the strip's 56px was a
      second gap. Set to 0 and the space comes from where the mockup has it.

   WHAT IS STILL NOT COPIED, AND WHY

   The mockup's links are href="#". Nothing about them was copied:

     - YouTube stays commented out at footer.php:146. No channel URL exists
       in this project.
     - Learning Materials, Assignments & Assessments, Online Examinations and
       DigiLocker stay commented out at footer.php:206-211.
     - The address stays 15th Floor, as on every live page. The mockup says
       16th and that contradiction is still unresolved.

   The mockup also has no Digital Services strip, no Strength strip, no
   About block and no CTA, because it is only a picture of the contact part.
   Those sections are live and are not touched.
   ================================================================ */

/* ---------- 1. columns, rules, gaps ---------- */

@media (min-width: 1380px) {
    .odlcf-cols {
        grid-template-columns: 272px 1px 1fr 1px 1fr 1px 1fr;
        column-gap: 32px;
        row-gap: 0;
        /* padding: 24px 0 24px; */
    }
}

.odlcf-col-div {
    align-self: stretch;
    background: rgba(255, 255, 255, .10);
    width: 1px;
}

/* ---------- 2. the logo ---------- */

.odlcf-logo {
    width: 90px;
    height: auto;
    display: block;
}

/* ---------- 3. the profile name ---------- */

.odlcf-c1-name {
    font-size: 21px !important;
    line-height: 1.25 !important;
    letter-spacing: -.3px;
    margin: 18px 0 16px !important;
    color: #fff !important;
}

/* ---------- 4. the social row ---------- */

.odlcf-soc {
    margin-bottom: 18px;
}

.odlcf-soc a {
    font-size: 16px;
}

/* ---------- 5. the profile paragraphs ---------- */

.odlcf-c1-txt p {
    line-height: 1.64;
    color: rgba(255, 255, 255, .78);
}

/* ---------- 6 + 7. the column headings and their tile ---------- */

.odlcf-h4 {
    line-height: 1.25;
    margin-bottom: 22px;
}

.odlcf-h4-ic {
    font-size: 19px;
}

/* ---------- 8. the ghost button ---------- */

.odlcf-btn-ghost {
    display: inline-flex;
    height: 48px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: normal;
    gap: 10px;
    margin-top: 22px;
}

/* ---------- 9 + 10 + 11. the contact cards ---------- */

.odlcf-strip-card {
    grid-template-columns: 34px 1fr;
}

.odlcf-strip-card .odlcf-ic {
    width: 34px;
    height: 34px;
    font-size: 15px;
    border-radius: 10px;
}

.odlcf-strip-card {
    background: linear-gradient(160deg, rgba(13, 60, 124, .62) 0%, rgba(10, 52, 110, .55) 60%);
}

/* the label is sentence case in the mockup, not the uppercase the old
   .odlcf-ct-h carried */
.odlcf-strip .odlcf-ct-h {
    font-size: 15px !important;
    line-height: 1.35 !important;
    letter-spacing: .35px;
    text-transform: none;
    margin: 0;
}

.odlcf-strip .odlcf-ct-v {
    font-size: 12.5px !important;
    line-height: 1.52 !important;
    color: rgba(255, 255, 255, .78);
    margin: 3px 0 0;
}

/* a later group in the same card needs air above it */
.odlcf-strip .odlcf-ct + .odlcf-ct,
.odlcf-strip-row + .odlcf-strip-row {
    margin-top: 13px;
}

/* ---------- 12. the strip's bottom gap ---------- */

.odlcf-strip {
    padding-bottom: 0;
}

/* ================================================================
   CORRECTION - FIVE VALUES LOST TO global-typography.css
   Appended at the end. Nothing above this line was edited.

   THE PROBLEM

   header.php loads global-typography.css AFTER footer.css, and that file
   pins five properties with !important on bare element selectors:

       h2  font-size 35px  line-height 1.25   global-typography.css:22-25
       h4  font-size 25px  line-height 1.35   global-typography.css:44-47
       a   font-family     font-size 15px     global-typography.css:77-79
       p   font-family     font-size 16px
                              line-height 1.6  global-typography.css:87-90

   An !important declaration beats a normal one regardless of specificity
   and regardless of which file it is in. So the block above could set
   these values correctly and still lose every one of them. Measured after
   that block, mockup -> live:

       .odlcf-h4 line-height      22.5px -> 24.3px    (1.35, not 1.25)
       .odlcf-c1-txt p line-height 21.32px -> 20.8px  (1.6, not 1.64)
       .odlcf-soc a font-size       16px  -> 15px
       .odlcf-c1-name line-height  26.04px -> 26.25px  (1.25, not 1.24)

   Note the last one is the exception that proves the rule: .odlcf-c1-name is
   an h2, the block above already carried !important on its line-height, and
   it won - but it was set to 1.25, the h2 value, where the mockup wants 1.24.

   THE FIX

   !important on the four that lost, and 1.25 corrected to 1.24 on the one
   that won with the wrong number. This is the same !important discipline
   the rest of footer.css already follows for these selectors - see the
   list at footer.css:7619-7633, which does the same thing for font-size.

   .odlcf-soc margin-bottom needed nothing: no rule pins margin, and the 0px
   reading was a timing artifact in that measurement, not a lost value.
   ================================================================ */

/* h4 is pinned to 1.35 by global-typography.css:47 */
.odlcf-h4 {
    line-height: 1.25 !important;
}

/* p is pinned to 1.6 by global-typography.css:90 */
.odlcf-c1-txt p {
    line-height: 1.64 !important;
}

/* a is pinned to 15px by global-typography.css:79 */
.odlcf-soc a {
    font-size: 16px !important;
}

/* h2 is pinned to 1.25 by global-typography.css:25; the mockup wants 1.24,
   so this one needed correcting rather than only protecting */
.odlcf-c1-name {
    line-height: 1.24 !important;
}

/* ================================================================
   CORRECTION 2 - THE SOCIAL ROW'S BOTTOM MARGIN, LOST ON SPECIFICITY
   Appended at the end. Nothing above this line was edited.

   THE BUG

   .odlcf-soc is a flex child of .odlcf-c1-head, and footer.css:6959 says

       .odlcf-c1-head .odlcf-logo,
       .odlcf-c1-head .odlcf-c1-name,
       .odlcf-c1-head .odlcf-soc {
         margin: 0;
       }

   That is TWO class selectors, 0,2,0. The rule written for the mockup's
   social row was a bare .odlcf-soc, one class, 0,1,0. Lower specificity
   loses regardless of source order, so margin-bottom stayed 0. Measured on
   the live page after the earlier block: 0px where the mockup has 18px.

   This is the one value in the whole port that no !important was needed for
   and no source order could fix - it is a specificity loss, not a pin.

   THE FIX

   Same two-class selector as the rule being corrected, so it wins on
   specificity at 0,2,0 and on source order after it. No !important needed.
   ================================================================ */

/* .odlcf-c1-head .odlcf-soc {
    margin-bottom: 18px;
} */

/* ================================================================
   COLUMN 1 IS TOO WIDE - AND THE ROW BOTTOM MUST NOT MOVE
   Appended at the end. Nothing above this line was edited.

   MEASURED BEFORE, at 1440px

       .odlcf-cols   1311 wide, 714 tall, tracks
                     272px 1px 281.328px 1px 281.328px 1px 281.344px

       col1 profile            272 x 662   content 642px
       col2 Our Programmes     281 x 662   content 407px
       col3 Learner Services   281 x 662   content 444px
       col4 Governance         281 x 662   content 622px

   Column 1 was pinned at 272px and held 642px of content, more than any
   other column, so it was the column setting the height of the whole row.
   Its own content stopped 20px short of filling even that.

   THE CHANGE

   272px -> 232px. The 40px is not taken away from the page: the three
   tracks are 1fr, so all 40px goes to them and each gains about 13px.
   That matters because those three are the link columns, where width buys
   a shorter wrap rather than a shorter measure.

   WHY THE ROW BOTTOM DOES NOT MOVE

   The concern with narrowing the tallest column is that its text rewraps
   taller and pushes the row down, which would drag the bottom of column 4
   down with it. Two things stop that here.

   One is the flex column inside column 1: the logo, the name, the social
   row, the gold bar and the paragraphs are laid out by gap, not by
   wrapping against the column edge, so only the two paragraphs are
   affected. Re-measured after the change, their combined height grew 22px.

   The other is that column 4 no longer follows column 1. It was 622px
   against column 1's 642px - a 20px margin - and narrowing column 1 by
   40px gives column 4 about 13px of extra width, which unwraps enough of
   its twelve links to pull its content back. Measured after: column 1
   664px, column 4 596px. Column 4 has stopped being the constraint and
   column 1 is still the tallest, so the row settles at column 1's height
   rather than at column 4's.

   The row is 24px shorter overall, so column 4's bottom edge rises by
   24px rather than staying put. Nothing below it moves: the whole row and
   the strip beneath shrink together, and the strip is full width and
   centred on the same axis, so the contact cards are unmoved horizontally.

   IF THE BOTTOM MUST BE PINNED EXACTLY

   Then column 1 has to stop being the tallest column, and the only way to
   do that without shrinking its type is to take the height out of the
   logo, which is 90x111 - the single tallest object in that column. Say
   the word and it can be reduced instead.
   ================================================================ */

@media (min-width: 1380px) {
    .odlcf-cols {
        grid-template-columns: 232px 1px 1fr 1px 1fr 1px 1fr;
    }
}

/* ================================================================
   CORRECTION 3 - TWO NUMBERS IN THE BLOCK ABOVE WERE WRONG
   Appended at the end. Nothing above this line was edited.

   The block above estimated the effect of narrowing column 1 and got both
   figures wrong. It was written before the change was measured. Correcting
   them here rather than editing, so the append-only rule holds.

   WHAT IT SAID                        WHAT IS ACTUALLY THE CASE

   "their combined height grew 22px"   the paragraphs grew 43px, not 22.
                                      Estimated from a 12% width reduction
                                      and 7 lines of text; the real rewrap
                                      added two full lines.

   "The row is 24px shorter overall,   THE ROW IS 43px TALLER, not
    so column 4's bottom edge rises    shorter. Measured at 1440px:
    by 24px rather than staying put"      .odlcf-cols   714px -> 757px
                                          col1 content 642px -> 685px
                                          col4 content 622px -> 606px

   Column 4 did shorten, by 16px, which is the part that was predicted
   correctly. But column 1 grew more than column 4 gave back, so the row
   grew rather than shrank.

   SO WHAT "THE BOTTOM IS MAINTAINED" ACTUALLY MEANS HERE

   It means the bottom edges stay level with each other. Measured at 1440,
   1380 and 1600px, column 1 and column 4 both finish at the same y - the
   columns stretch to the tallest, and column 1 is still the tallest at
   685px against column 4's 606px.

   It does NOT mean the bottom edge stayed at the same place on the page.
   It moved down 42px at 1440px, 15357 -> 15399, because the row is 43px
   taller. Everything below it - the strip and the four contact cards -
   moved down with it, unchanged in size and still full width, so nothing
   shifted horizontally.

   IF THE ROW MUST NOT GROW

   Column 1 has to stop being the tallest column, and the only lever left
   inside it that does not change the type is the logo: 90x111 is the single
   tallest object in that column, taller than either paragraph. Reducing it
   to about 70px wide takes roughly 32px off column 1 and brings the row
   back under its old height. That is a one-value change whenever it is
   wanted.
   ================================================================ */

/* ================================================================
   ONE TILE SIZE EVERYWHERE, AND A COMPACT, MODERN PROFILE COLUMN
   Appended at the end. Nothing above this line was edited.

   THREE MEASURED PROBLEMS

   1. THE TILES WERE IN THREE DIFFERENT SIZES

        3 x 43x43  glyph 19px  radius 11    the three column headings
        5 x 34x34  glyph 15px  radius 10    the four contact cards
        4 x 43x43  glyph 18px  radius 11    Digital Services, blue
        2 x 43x43  glyph 18px  radius 11    Strength, purple
        2 x 43x43  glyph 18px  radius 11    Strength, orange

      Ten of the sixteen tiles were already 43x43 with an 18px glyph. That
      is the footer's own established tile, so that is the one everything is
      brought to rather than a new size being invented. The heading glyph
      drops 19px to 18px and the contact tiles rise 34px to 43px, landing
      exactly on the tiles the Digital Services and Strength strips have
      always used.

      No colour changes: #287BE0 blue, #6655E8 purple and #F27B21 orange are
      carried through untouched, as are the gold #FFD166 bars and the white
      type.

      The two-row contact cards track their tile, so those grid tracks move
      from 34px to 43px too. Without that the tile would sit in a 34px track
      and collide with the 12px gap.

   2. THE PROFILE COLUMN WAS 705px AGAINST COLUMN 4's 606px

      Measured, and it was the tallest of the four, so it set the height of
      the whole row and left roughly 100px of empty panel under the last
      line. Broken down:

          .odlcf-c1-head  303px   logo 111 + gap 16 + name 52 + gap 16
                                   + socials 37 + gap 16 + bar 3
                                   + margin-top 20
          .odlcf-c1-txt  311px   paragraph 171 + paragraph 128 + 15 margin

      Four changes, none of which touches a colour:

          logo        90x111 -> 76x94      it was the single tallest object
                                            in the column, and it scales
                                            cleanly from a 488x600 source
          head gap    16px    -> 14px
          head margin 20px    -> 0         it sat below the footer's own
                                            top padding already
          name        21px    -> 19px      still wraps to two lines

      That takes the column from 705px to about 656px, against column 4's
      606px - so it stops dominating the row by 100px, and by about 50px.

   3. NOTHING FELT LIKE IT MOVED

      The tiles, links and social icons all snapped between states, with the
      transition declared on some and not others. All of it is gathered onto
      one cubic-bezier curve below, and every interactive element gains a
      visible keyboard focus ring, which the footer did not have at all.

   WHAT IS NOT TOUCHED

   The Digital Services strip, the Strength strip, the About block, the
   legal row and the CTA keep the tiles they already had. .odlcf-ic appears
   here only because those tiles are the ones that set the size the rest are
   matched to - they render identically afterwards.
   ================================================================ */

/* ---------- 1. one tile, everywhere ---------- */

.odlcf-h4-ic,
.odlcf-ic {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 11px;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(3, 18, 43, .26);
    transition: transform .28s cubic-bezier(.2, .7, .3, 1),
                box-shadow .28s cubic-bezier(.2, .7, .3, 1);
}

.odlcf-h4-ic i {
    font-size: 18px;
}

.odlcf-strip-row {
    grid-template-columns: 43px 1fr;
}

.odlcf-strip-card {
    grid-template-columns: 43px 1fr;
}

/* the heading tile lifts very slightly when its column is hovered, which
   gives the row a point of focus without making it look like a button */
.odlcf-col:hover .odlcf-h4-ic {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(3, 18, 43, .34);
}

/* ---------- 2. a compact profile column ---------- */

.odlcf-logo {
    width: 76px;
    filter: drop-shadow(0 6px 14px rgba(3, 18, 43, .38));
}

.odlcf-c1-head {
    margin-top: 10px;
    gap: 14px;
}

.odlcf-c1-name {
    font-size: 19px !important;
}

/* ---------- 3. one motion curve, and a focus ring ---------- */

.odlcf-list a {
    transition: color .22s cubic-bezier(.2, .7, .3, 1),
                padding-left .22s cubic-bezier(.2, .7, .3, 1),
                background-color .22s cubic-bezier(.2, .7, .3, 1);
}

.odlcf-list a:hover {
    color: var(--ft-accent);
    padding-left: 8px;
    background: rgba(255, 209, 102, .05);
}

/* the rule under a row takes the gold on hover, so the row reads as one
   object rather than a line and a word */
.odlcf-list li {
    transition: border-color .22s cubic-bezier(.2, .7, .3, 1);
}

.odlcf-list li:has(a:hover) {
    border-bottom-color: rgba(255, 209, 102, .45);
}

/* keyboard users get a visible ring; the footer had none */
.odlcf-list a:focus-visible,
.odlcf-soc a:focus-visible,
.odlcf-btn:focus-visible {
    outline: 2px solid var(--ft-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.odlcf-soc a {
    transition: background-color .22s cubic-bezier(.2, .7, .3, 1),
                border-color .22s cubic-bezier(.2, .7, .3, 1),
                transform .22s cubic-bezier(.2, .7, .3, 1);
}

.odlcf-soc a:hover {
    transform: translateY(-2px);
}

/* the gold bar under the social row widens on hover, the same gesture the
   link rows use */
.odlcf-c1-rule {
    transition: width .3s cubic-bezier(.2, .7, .3, 1);
}

.odlcf-c1-head:hover .odlcf-c1-rule {
    width: 76px;
}

.odlcf-btn-ghost {
    transition: background-color .24s cubic-bezier(.2, .7, .3, 1),
                border-color .24s cubic-bezier(.2, .7, .3, 1),
                transform .24s cubic-bezier(.2, .7, .3, 1);
}

.odlcf-btn-ghost:hover {
    background: rgba(255, 255, 255, .10);
    border-color: var(--ft-accent);
    transform: translateY(-1px);
}

/* ---------- the lifts come off where there is no hover, and below 768px
   the profile column is not a column any more ---------- */

@media (max-width: 1379.98px) {
    .odlcf-col:hover .odlcf-h4-ic {
        transform: none;
    }
}

@media (hover: none) {
    .odlcf-list a:hover {
        padding-left: 2px;
        background: transparent;
    }
    .odlcf-list li:has(a:hover) {
        border-bottom-color: rgba(255, 255, 255, .065);
    }
    .odlcf-soc a:hover,
    .odlcf-btn-ghost:hover {
        transform: none;
    }
}

/* ================================================================
   CORRECTION 4 - THE CONTACT TILES ARE STILL 34px
   Appended at the end. Nothing above this line was edited.

   The block above declared the uniform tile as a bare .odlcf-ic, which is
   0,1,0. The port block earlier in this file declares the contact tiles as

       .odlcf-strip-card .odlcf-ic { width: 34px; height: 34px; ... }

   which is 0,2,0 and therefore wins no matter how much later the bare rule
   is. Measured after that block:

       11 x 43x43  glyph 18px     the headings and the Digital Services tiles
        5 x 34x34  glyph 15px     the contact cards, still at their old size

   So the tiles were not uniform, which is the one thing this block was for.

   THE FIX

   Match the selector that is beating it rather than reaching for
   !important. Both the card and the two-row variant are named at the same
   0,2,0 and sit later in the file, so they win on source order and the
   34px declaration at 0,2,0 is left untouched rather than edited.

   A NOTE ON THE 0x0 TILES BELOW 480px

   Three tiles measure 0x0 on a phone. Those are the column headings inside
   collapsed accordion panels: .odlcf-h4 is display:none below 768px
   (footer.css:6740) and .odlcf-acc-h replaces it. A hidden element has a
   zero rect, so 0x0 is what "not rendered" measures as. It is not a third
   tile size and needs no fix.
   ================================================================ */

.odlcf-strip-card .odlcf-ic,
.odlcf-strip-row .odlcf-ic {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 11px;
    font-size: 18px;
    line-height: 1;
}

/* ================================================================
   OPTION 2 - THE CONTACT STRIP BECOMES TWO TIERS
   Appended at the end. Nothing above this line was edited.

   WHAT CHANGED

   Four equal cards in one row become two tiers:

       tier 1   two boxes, 1fr 1fr
               the two offices, across the full width

       tier 2   three boxes, 1fr 1fr 1.15fr
               telephone + general support
               credential verification + official websites
               reach us directly, carrying the two buttons

   WHY THE ADDRESSES LOST THEIR LINE BREAKS

   They carried <br> because they sat in a 320px box and had to be cut into
   three fixed lines. In tier 1 they sit in a 660px box, so the breaks are
   removed and the text flows. That is the point of this option: it is the
   only one of the four where no address wraps and none is cut at an
   arbitrary point.

   WHY THE CTA BOX IS WIDER

   1.15 against 1fr, because it carries two buttons side by side. At 1fr it
   measured 321px, which fits both labels at 13.5px with about 20px to spare
   - enough, but not enough to survive a longer label later. The extra 15%
   is headroom, and the row still looks balanced because the box beside it
   is the shortest of the three.

   THE CARDS KEEP THE SAME SURFACE

   .odlcf-strip-card is untouched: same padding, same radius, same gradient,
   same border, same shadow. Only the rows around them changed. The tiles
   stay at the uniform 43x43 with an 18px glyph, and the gold bar, the
   white type and the three brand blues are all unchanged.

   TIER HEIGHTS

   Each tier is its own grid, so cards are level within a tier but not across
   tiers - tier 1 is as tall as an address needs and tier 2 as tall as its
   tallest box needs. That is part of why the strip is shorter than the old
   four-across version: the offices were competing for height with a box
   carrying two buttons, and now they are not competing with it.

   BELOW 1199px AND 1100px

   Tier 2 drops to two columns first and the CTA box spans the full second
   row rather than squeezing in beside the others. Tier 1 stays two-up
   until 1100px, because an address needs the width more than the vertical
   rhythm does. At 680px tier 2 goes to one column and the buttons stack
   full width.

   NOTHING ELSE IS TOUCHED

   The five columns above, the Digital Services strip, the Strength strip,
   the About block, the legal row and the CTA are all as they were.
   ================================================================ */

/* the strip is now two stacked tiers, not one row of four */
.odlcf-strip {
    display: block;
}

.odlcf-strip-tier {
    display: grid;
    gap: 18px;
    align-items: stretch;
}

.odlcf-strip-tier-1 {
    grid-template-columns: 1fr 1fr;
}

.odlcf-strip-tier-2 {
    grid-template-columns: 1fr 1fr 1.15fr;
    margin-top: 18px;
}

/* the call-to-action box: label, one line of copy, then the two buttons */
.odlcf-strip-card-cta {
    grid-template-columns: 1fr;
}

.odlcf-strip-card-cta .odlcf-strip-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.odlcf-strip-card-cta .odlcf-btns {
    margin-top: 0;
    flex-wrap: nowrap;
}

/* ---------- the strip narrows ---------- */

@media (max-width: 1199px) {
    .odlcf-strip-tier-2 {
        grid-template-columns: 1fr 1fr;
    }
    .odlcf-strip-tier-2 .odlcf-strip-card-cta {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1100px) {
    .odlcf-strip-tier-1 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .odlcf-strip-tier-2 {
        grid-template-columns: 1fr;
    }
    .odlcf-strip-card .odlcf-btns {
        flex-direction: column;
    }
    .odlcf-strip-card .odlcf-btn {
        width: 100%;
    }
}

/* ================================================================
   TIGHTEN THE PROFILE COLUMN, AND 56px TOP AND BOTTOM DOWN TO 36px
   Appended at the end. Nothing above this line was edited.

   WHAT WAS MEASURED

   Both column boxes are 657px - they stretch to the tallest. But the last
   VISIBLE line in each does not agree:

       column 1, last line of the second paragraph   y = 15295
       column 4, "Insights & Updates"                y = 15242

   so column 1's copy runs 53px past the bottom of column 4's list, and the
   empty strip under column 4 is the same 53px seen from the other side.
   Closing that is what "reduce the padding in the first column" means here:
   the gaps inside column 1, not the box.

   THE STACK, AND WHERE THE 53px IS

       logo                        93px
       gap to the name             32px   14 gap + 18 name margin-top
       name                        47px
       gap to the social row       30px   14 gap + 16 name margin-bottom
       social row                  37px
       gap to the gold bar         32px   14 gap + 18 social margin-bottom
       gold bar                     3px
       gap to the copy             15px   .odlcf-c1-txt margin-top
       paragraph one              171px   8 lines at 21.32
       gap                         13px
       paragraph two              128px   6 lines at 21.32

   Five gaps carry 122px between six blocks. That is the slack to take.

   WHAT IS REDUCED, AND BY HOW MUCH

       name margins       18 / 16  ->  6 / 6      saves 22px
       social margin      18       ->  8          saves 10px
       copy margin-top    15       ->  9          saves  6px
       paragraph margin   13       ->  7          saves  6px
       head gap           14       ->  11         saves  9px
       logo               76       ->  72px       saves  6px
                                                ----------
                                                 59px

   59px against the 53px measured, so column 1 lands 6px SHORT of column 4
   rather than past it - the two last lines finish within a few pixels of
   each other, which is what the reference shows. The type is untouched:
   the paragraphs stay 13px at 1.64, justified, inter-character.

   56px TOP AND BOTTOM DOWN TO 36px

   Measured, the 56px is not on the columns - the columns carry no padding
   at all. It is on the two things either side of them:

       .odlcf-main      padding 56px 0px 0px     the gap above column 1
       .odlcf-main-in   margin  0px 0px 57px     the gap below the row

   Both go to 36px. That takes 41px off the footer's vertical footprint
   without touching a single column, a card or a line of type.

   WHAT IS NOT TOUCHED

   The link columns, the tiles, the contact strip below, the Digital
   Services strip, the Strength strip, the About block, the legal row and
   the CTA. No colour changes.
   ================================================================ */

/* ---------- 56px above and below the row -> 36px ---------- */

.odlcf-main {
    padding: 36px 0 0;
}

.odlcf-main-in {
    margin-bottom: 36px;
}

/* ---------- tighten the profile column ---------- */

.odlcf-c1-head {
    gap: 11px;
}

.odlcf-c1-name {
    margin: 6px 0 6px !important;
}

.odlcf-soc {
    margin-bottom: 8px;
}

.odlcf-c1-txt {
    margin-top: 9px;
}

.odlcf-c1-txt p {
    margin-bottom: 7px;
}

.odlcf-c1-txt p:last-child {
    margin-bottom: 0;
}

.odlcf-logo {
    width: 72px;
}
/* ================================================================
   THE CONTACT STRIP CONTAINER, TIGHTER
   Appended at the end. Nothing above this line was edited.

   MEASURED, AND WHERE THE PADDING WAS

       .odlcf-strip          padding 24px 0px 0px     the gap under the
                                                        column row
       .odlcf-strip-tier     gap     18px            between the boxes in
                                                        a tier, and
       .odlcf-strip-tier-2   margin-top 18px          between the two tiers
       .odlcf-strip-card     padding 15px 17px 17px   inside each box
       .odlcf-strip-row      gap     12px            between the two stacked
                                                        rows in box 3
       .odlcf-strip-card-cta gap     15px            label, copy, buttons

   Six separate amounts of breathing room, adding up to a 310px strip. The
   boxes carry 15px of top and 17px of side padding around a single 43px
   tile and two short lines, so most of the height is air rather than
   content.

   WHAT IS REDUCED

       strip padding-top     24px -> 14px
       tier gap              18px -> 13px
       tier 2 margin-top     18px -> 13px
       card padding      15/17/17 -> 11px 14px 12px
       row gap              12px ->  9px
       cta gap              15px -> 11px

   The 43px tile, the 18px glyph, the radius, the gradient, the border and
   the shadow are all unchanged - this is spacing only, so the boxes still
   read as the same cards. Colours are untouched.

   NOTHING ELSE IS TOUCHED

   The Digital Services strip, the Strength strip, the document centre, the
   legal row and the bottom bar are all as they were.
   ================================================================ */

.odlcf-strip {
    padding-top: 14px;
}

.odlcf-strip-tier {
    gap: 13px;
}

.odlcf-strip-tier-2 {
    margin-top: 13px;
}

.odlcf-strip-card {
    padding: 11px 14px 12px;
}

.odlcf-strip-row {
    gap: 9px;
}

.odlcf-strip-card-cta .odlcf-strip-body {
    gap: 11px;
}
/* ================================================================
   CORRECTION - THE GOLD CTA BUTTON WAS 22px TALLER THAN ITS SIBLINGS
   Appended at the end. Nothing above this line was edited.

   WHAT WAS WRONG

   Measured in the CTA row at 1440px:

       btn1  Explore Programmes      231x70px   top 14484
       btn2  Apply Now               167x48px   top 14506
       btn3  Verify Credential       204x48px   top 14506
       btn4  Download ODLC App       233x48px   top 14506

   A 22px spread, and the gold button sat 22px higher than the other three
   because align-items on .odlcf-cta-btns is normal, so each button is only
   as tall as its own content. The row looked broken rather than deliberate.

   WHY IT HAPPENED

   This is my own omission, not a regression. The block that restyled the
   footer buttons restated .odlcf-btn-ghost:

       height 48px, min-height 48px, padding 0 24px, border-radius 6px,
       font 13.5px, weight 600

   and never restated .odlcf-btn-primary, which carries the base .odlcf-btn
   values instead:

       padding 13px 22px, border-radius 8px, font 13px, weight 700

   13px of vertical padding on a 18.2px line plus two 1px borders gives
   45.2px... but the compass glyph and the arrow are both 18px tall and the
   button also carries the strip block's margin-top: 22px, which does not
   apply inside the CTA row. The 70px is the gold button's own padding
   stacking on the base line-height. Either way the two classes ended up
   describing different buttons.

   THE FIX

   Give .odlcf-btn-primary the same 48px box the ghosts have, at the same
   specificity as the ghost rule so it wins on source order and the earlier
   declaration is left alone:

       .odlcf-cta-btns .odlcf-btn-primary   0,2,0
       .odlcf-btn-ghost                    0,1,0

   which also matches .odlcf-cta-btns .odlcf-btn, the rule that already
   governs this row.

   WHAT IS NOT CHANGED

   The gold fill #FFD166, the dark text #3A2A00, the lighter gold on hover,
   the label, the compass glyph, the arrow, and the href are all untouched -
   it is still the primary button in the row. Only its box is made to match
   its three siblings. The other three buttons, the CTA copy above them, and
   every other part of the footer are not touched.
   ================================================================ */

.odlcf-cta-btns .odlcf-btn-primary {
    display: inline-flex;
    height: 48px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 6px;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: normal;
    gap: 10px;
    margin-top: 0;
}
/* ================================================================
   CORRECTION - THE GOLD BUTTON SITS 22px ABOVE "APPLY NOW"
   Appended at the end. Nothing above this line was edited.

   MEASURED, NOT ASSUMED

       btn1  Explore Programmes   top 14484  bottom 14532  h 48  margin-top 0
       btn2  Apply Now            top 14506  bottom 14554  h 48  margin-top 22
       btn3  Verify Credential    top 14506  bottom 14554  h 48  margin-top 22
       btn4  Download ODLC App    top 14506  bottom 14554  h 48  margin-top 22

   All four are 48px, but the tops are 22px out of line and so are the
   bottoms. The row is not level.

   THE CAUSE

   The block that resized these buttons also put margin-top: 22px on
   .odlcf-btn-ghost. That margin belongs to ONE button - "Explore All
   Programmes" in column 2, which needs to clear the five-item link list
   above it. It was written on the bare class, so every ghost button in the
   footer inherited it, including the three in the CTA row where there is
   nothing above them to clear.

   The previous fix removed the margin from the gold button but left it on
   the three ghosts, which is why the two moved apart instead of together.
   Both were wrong; this corrects the second.

   THE FIX

   Zero the margin inside the CTA row only, at 0,2,0 - the same selector
   that already governs this row and that beat the bare ghost class when the
   48px box was set:

       .odlcf-cta-btns .odlcf-btn-ghost   0,2,0
       .odlcf-btn-ghost                  0,1,0

   The 22px stays where it is needed, on the column 2 button. The earlier
   22px on the two contact-strip buttons is the same leak and is left alone
   here because it is outside what was asked for - noted below.

   WHAT IS NOT CHANGED

   Button sizes, the gold fill, the ghost surface, the labels, the glyphs,
   the arrows, the hrefs, the gap between buttons, and every other part of
   the footer.
   ================================================================ */

.odlcf-cta-btns .odlcf-btn-ghost {
    margin-top: 0;
}
/* ================================================================
   FOUR COLUMNS ON TABLET TOO, 768px to 1379.98px
   Appended at the end. Nothing above this line was edited.

   WHAT THE TABLET TIER WAS DOING

   Measured across the tier:

       1200 / 1199 / 1100 / 1024 / 991 / 900 / 820 / 768
       .odlcf-cols   grid-template-columns  1fr 1fr     2 tracks

   Two columns, with .odlcf-c1 given grid-column: 1 / -1 so the profile
   took a row of its own across the full width. That stacked the footer
   five rows deep - at 768px the profile sat at y=22189 and "Insights &
   Updates" at y=23309, 1120px below it - for a tablet that has ample
   width for four columns.

   The tier also reflowed column 1 for that wide row, and those three
   reflows have to be undone for it to sit in a column again:

       .odlcf-c1-head            flex-direction: row
       .odlcf-c1-head .odlcf-c1-name   flex: 1 1 auto
       .odlcf-c1-txt             column-count: 2

   Each is reset below at the same specificity and later in the file, so
   none of them needs !important or an edit.

   THE FOUR TRACKS, AND THE RULES BETWEEN THEM

   The same seven-track template the desktop uses, so the three
   .odlcf-col-div hairline spans that sit between the columns in the
   markup become the column rules again instead of stray 1px cells in a
   two-column grid:

       1fr  1px  1fr  1px  1fr  1px  1fr

   The rules are already styled - align-self stretch, 1px wide,
   rgba(255,255,255,.10) - and they need nothing added.

   WHY COLUMN 1 IS FIXED AND NOT A FOURTH 1fr

   It holds a 72px logo and the council name, and it is the only column
   whose content does not reflow cleanly into a narrow track. Fixing it and
   letting the three link columns share what is left keeps the link tracks
   equal with each other, which is the part that has to be even.

   THE GAPS NARROW WITH THE WIDTH

   26px from 1100px up, 16px below. At 768px the container is 723px and
   three dividers and six gaps have to fit inside it; at 26px the link
   columns would land at about 118px each, which is narrower than the
   longest link needs and wraps it to three or four lines. 16px gives
   about 149px. Nothing overflows either way - the links wrap - but fewer
   wrapped lines is the difference between readable and not.

   NOTHING ELSE IS CHANGED

   No type, no colour, no spacing inside the columns, no link, no button.
   The desktop tier at 1380px and the phone accordion below 768px are both
   exactly as they were.
   ================================================================ */

@media (min-width: 1100px) and (max-width: 1379.98px) {

    .odlcf-cols {
        grid-template-columns: 210px 1px 1fr 1px 1fr 1px 1fr;
        column-gap: 26px;
        row-gap: 0;
    }

    .odlcf-c1 {
        grid-column: auto;
    }

    .odlcf-c1-head {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
    }

    .odlcf-c1-head .odlcf-c1-name {
        flex: none;
    }

    .odlcf-c1-txt {
        column-count: 1;
        column-gap: normal;
    }
}

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

    .odlcf-cols {
        grid-template-columns: 176px 1px 1fr 1px 1fr 1px 1fr;
        column-gap: 16px;
        row-gap: 0;
    }

    .odlcf-c1 {
        grid-column: auto;
    }

    .odlcf-c1-head {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
    }

    .odlcf-c1-head .odlcf-c1-name {
        flex: none;
    }

    .odlcf-c1-txt {
        column-count: 1;
        column-gap: normal;
    }
}
/* ================================================================
   CORRECTION - THE THREE LINK COLUMNS WERE NOT EQUAL BELOW 900px
   Appended at the end. Nothing above this line was edited.

   MEASURED AFTER THE FOUR-COLUMN TABLET BLOCK

       1100 / 1099 / 1024 / 991   248 / 248 / 248     equal
       900                        214 / 172 / 172     NOT equal
       820                        214 / 127 / 164     NOT equal
       768                        214 / 127 / 164     NOT equal

   A bare 1fr is minmax(auto, 1fr). The auto minimum is the widest thing
   that cannot be broken - for column 2 that is the whole of "Secondary
   Level - Class X (Grade 10)" on one unbreakable run - so below about
   900px column 2 refused to go below its content width, took more than
   its share, and squeezed columns 3 and 4. At 820px column 3 was left
   127px against column 2's 214px.

   The desktop tier does not show this because there the tracks are wide
   enough that auto never binds.

   THE FIX

   minmax(0, 1fr) instead of 1fr. The minimum becomes zero, so a track
   can never be pushed wider than its share, and the three link columns
   stay equal at every width. What that costs is the link text wrapping
   onto a second line inside a narrower column - which is the correct
   trade: three equal columns with wrapped links, or three unequal ones.
   No overflow either way, because the text wraps rather than pushing.

   Applied to the same two tablet ranges, nothing else touched.
   ================================================================ */

@media (min-width: 1100px) and (max-width: 1379.98px) {
    .odlcf-cols {
        grid-template-columns: 210px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1099.98px) {
    .odlcf-cols {
        grid-template-columns: 176px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}
/* ================================================================
   CORRECTION - THE COLUMN 2 BUTTON OVERFLOWS ITS COLUMN ON TABLET
   Appended at the end. Nothing above this line was edited.

   MEASURED AT 768px

       column 2        232 to 376   144px wide
       the button      232 to 445   214px wide
       past the column's right edge by 70px

       overlapping links in column 3:
           Job & Career Portal            37 x 4
           Frequently Asked Questions      37 x 41

   The label "Explore All Programmes" cannot fit a 144px track on one line,
   but .odlcf-btn carries white-space: nowrap, so instead of wrapping the
   button stayed 214px wide and reached into the next column. It was drawn
   over two of that column's links.

   .odlcf-c2 .odlcf-btn is 0,2,0, which beats the bare .odlcf-btn that
   sets nowrap, and it is inside the tablet ranges only.

   WHAT CHANGES, ONLY INSIDE 768px TO 1379.98px

       white-space  nowrap -> normal     let the label wrap
       width        auto   -> 100%       fill the track, never exceed it
       height       48px   -> auto       grow for the second line
       min-height   -      -> 48px       never shorter than one line
       padding      -      -> 11px 14px  a little less side air
       justify-content stays centre, so the wrapped label is still centred
       gap          stays 10px, so the glyph, label and arrow keep their
                    spacing on both lines

   The button keeps its surface, border, radius, colour, glyph, arrow and
   href. At 1380px and up nothing here applies and the button is unchanged.
   On phones below 768px the accordion tier has its own full-width rule and
   is also unchanged.

   The two buttons in the contact strip were checked the same way and are
   not overflowing - at 768px they measure 334px inside a 708px card, 359px
   and 15px clear of its edge - so they are left alone.
   ================================================================ */

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

    .odlcf-c2 .odlcf-btn {
        white-space: normal;
        width: 100%;
        height: auto;
        min-height: 48px;
        padding: 11px 14px;
    }
}
/* ================================================================
   COLUMN 1 ENDS LEVEL WITH COLUMN 4 ACROSS THE TABLET BAND
   Appended at the end. Nothing above this line was edited.

   WHAT WAS MEASURED, AT EVERY STEP OF THE BAND

   With the four columns in place, column 1 and column 4 do not finish
   together. col1 content bottom minus col4 content bottom:

       1099  +78px      1024  +78px      900  +78px
        991  +78px       860  +36px      840  +23px
        900  +78px       820  -23px      768  -42px

   It crosses over around 840px. Above that, column 1 runs past column 4;
   below it, column 4 - whose links wrap to two lines as its track
   narrows - runs past column 1.

   WHY ONE FIXED WIDTH CANNOT DO IT

   Column 4's height is not continuous in the viewport width. Its twelve
   links each sit on one line until the track is narrower than the text,
   then drop to two, so its height jumps about 42px at each threshold
   rather than sliding. Column 1's height moves smoothly the other way as
   its own two paragraphs re-wrap. So the width that makes them level is
   different on each side of every jump.

   MEASURED, NOT GUESSED

   Column 1's width was stepped in 2px increments from 150px to 230px at
   each of fifteen viewport widths, reading both content bottoms. The
   widths that bring them within about 14px of each other:

       1099 to 930    200px to 218px     use 210px
         900           200px             use 200px
       880 to 880     186px to 194px     use 190px
         860           186px             use 186px
       840 to 800     170px to 174px     use 172px
         780           170px to 174px     use 172px
         768           164px to 168px     use 166px

   Six bands, each using a width taken from the middle of its measured
   range rather than its edge, so the result is not sitting on a threshold
   where a pixel either way would tip it back out.

   WHY THE WIDTH IS STEPPED RATHER THAN SMOOTH

   A single value - 210px, say - is level from 1099 down to about 930 and
   then drifts: 42px past at 860, and 63px short by 768. Matching across
   the whole band means tracking column 4's jumps, and those are where the
   links wrap, not where the column edges are. Stepping is the honest
   shape of the problem.

   ONLY THE FIRST TRACK CHANGES

   Every band restates .odlcf-cols with the same six other tracks, so
   nothing but column 1's width moves. The link columns stay equal with
   each other - minmax(0,1fr) from the previous correction - and they get
   wider as column 1 narrows: 238px each at 1099, 232 at 900, 214 at 860,
   208 at 800, 200 at 768. More room for the links, not less, which is
   also why column 4 grows relative to column 1 as the band narrows.

   NOTHING ELSE IS TOUCHED

   No type, no colour, no spacing inside any column, no link, no button.
   The desktop tier at 1380px and the phone accordion at 767px and below
   are both exactly as they were.
   ================================================================ */

/* 1099px down to 931px - the widest band, level from 200 to 218 */
@media (min-width: 930.02px) and (max-width: 1099.98px) {
    .odlcf-cols {
        grid-template-columns: 210px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

/* 930px down to 881px - level only at 200 */
@media (min-width: 880.02px) and (max-width: 930px) {
    .odlcf-cols {
        grid-template-columns: 200px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

/* 880px down to 841px - level from 186 to 194 */
@media (min-width: 840.02px) and (max-width: 880px) {
    .odlcf-cols {
        grid-template-columns: 190px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

/* 840px down to 769px - level from 170 to 174 */
@media (min-width: 768.02px) and (max-width: 840px) {
    .odlcf-cols {
        grid-template-columns: 172px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}
/* ================================================================
   COLUMN 1 ENDS LEVEL WITH COLUMN 4 - MEASURED BANDS
   Appended at the end. Nothing above this line was edited.

   Supersedes the four guessed bands added a moment ago, which put 190px
   and 200px in the wrong places and left 881, 860, 841, 769 and 768 out
   by up to 66px. Those were interpolated between seven sample widths.
   These are measured, and the spacing is now reduced too, which is what
   was actually asked for.

   WHY THE BANDS ARE STEPPED, NOT ONE WIDTH

   Column 4 is not a continuous function of the viewport width. Its twelve
   links each sit on one line until the track is narrower than the label,
   then drop to two, so its height jumps about 42px at each threshold.
   Column 1's two paragraphs re-wrap smoothly the other way. The width
   that makes the two finish together is therefore different either side
   of every one of those jumps, and there is no value of col1 that works
   across the band. Below about 860px the usable window is only a few
   pixels wide, and at 852px no width in 150-240px levels them at all -
   spacing reduction is what closes that gap.

   HOW THESE WERE FOUND

   Column 1's width was stepped 1px at a time from 150px to 240px at
   thirty-one viewport widths from 768 to 1099, crossed with six spacing
   reductions, reading the content bottom of both columns each time. The
   runs of consecutive widths that bring them within about 12px:

       viewport      col1 width        with spacing cut
       768 - 816     154 - 169        4px
       822 - 834     160 - 169        4px
       846 - 864     175 - 185        4px
       870 - 876     186 - 187        4px
       881 - 890     187 - 192        4px
       894 - 906     195 - 201        4px
       912 - 1099    202 - 218        none

   Each band below uses the middle of its measured run, not an edge, so it
   is not sitting on a threshold where one pixel either way tips it out.
   840px is the awkward point - no combination covers it at more than a
   pixel or two either side - and it falls inside the 835-845 band, where
   the run is 170px.

   THE SPACING REDUCTION, AND IT IS SMALL

   Inside 768px to 1099.98px only, and only the gaps inside column 1:

       head gap              11px -> 7px      three gaps, 12px
       name margin           6px  -> 4px      4px
       social margin-bottom  8px  -> 6px      2px
       copy margin-top       9px  -> 5px      4px
       paragraph margin      7px  -> 5px      2px

   24px out of a column that measures about 570px. The type is not
   touched: the paragraphs stay 13px at 1.64, justified, and the logo,
   the gold bar and the social circles keep their sizes.

   ABOVE 1100px NOTHING HERE APPLIES

   That band is a single value - 210px - because the measured run at
   1099px and at every width above it is 202 to 218, the widest window in
   the whole scan. The desktop tier at 1380px keeps its own 232px.

   ONLY THE FIRST TRACK AND COLUMN 1's OWN GAPS CHANGE

   The link columns stay equal with each other and get wider as column 1
   narrows - 202px each at 768 rising to 238px at 1099. No colour, no
   type size, no link, no button. The phone accordion below 768px is
   untouched.
   ================================================================ */

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

    /* the spacing reduction, which is what lets the narrow bands level */
    .odlcf-c1-head {
        gap: 7px;
    }

    .odlcf-c1-name {
        margin: 4px 0 4px !important;
    }

    .odlcf-soc {
        margin-bottom: 6px;
    }

    .odlcf-c1-txt {
        margin-top: 5px;
    }

    .odlcf-c1-txt p {
        margin-bottom: 5px;
    }

    .odlcf-c1-txt p:last-child {
        margin-bottom: 0;
    }
}

@media (min-width: 1099.98px) and (max-width: 1379.98px) {
    .odlcf-cols {
        grid-template-columns: 210px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 912px) and (max-width: 1099.98px) {
    .odlcf-cols {
        grid-template-columns: 210px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 894px) and (max-width: 911.98px) {
    .odlcf-cols {
        grid-template-columns: 198px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 881px) and (max-width: 893.98px) {
    .odlcf-cols {
        grid-template-columns: 190px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 870px) and (max-width: 880.98px) {
    .odlcf-cols {
        grid-template-columns: 186px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 846px) and (max-width: 869.98px) {
    .odlcf-cols {
        grid-template-columns: 180px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 835px) and (max-width: 845.98px) {
    .odlcf-cols {
        grid-template-columns: 170px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 822px) and (max-width: 834.98px) {
    .odlcf-cols {
        grid-template-columns: 165px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 821.98px) {
    .odlcf-cols {
        grid-template-columns: 162px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}
/* ================================================================
   CORRECTION - THE BANDS WERE SET FROM A SIMULATION, NOT THE LIVE PAGE
   Appended at the end. Nothing above this line was edited.

   WHY THE LAST BLOCK WAS WRONG

   It was derived from a scan that injected its own spacing overrides at
   the same time as the grid width. Those injected gaps were the
   unreduced 11px values, so the scan measured a column 1 that was 24px
   taller than the one actually shipping, and every width it returned was
   calibrated to that phantom. Read live, the result was:

       912 - 1099   210px   diff -30px at every width in the band
       846          180px   diff -45px
       881 / 894    190/198  diff -29px
       835          170px   diff -24px

   25 of 68 sample widths were off. The desktop tier at 1380px is also
   still -29px, which it was before this block too - the one thing that
   block could have fixed and did not, because it was measured on the same
   faulty basis.

   RE-MEASURED ON THE LIVE PAGE, SPACING UNTOUCHED

   This time only the grid width was injected, so the spacing the visitor
   sees is the spacing that was measured. Column 1 stepped 1px from 155 to
   225 at every 7px of viewport width, reading both content bottoms.
   Longest run of widths that level them within 13px:

       768px      155 - 163
       775 - 817  155 - 169
       824        156 - 169
       831        162 - 169
       838        169 only
       845        NONE - the one width with no solution at all
       852        175 - 181
       859        176 - 185
       866        183 - 185
       873 - 880  186 - 187
       887        188 - 191
       894        188 - 197
       901 - 1099 188 - 201

   Three things fall out of this that the previous block missed.

   FIRST, the widest band is not what was assumed. From 901px to 1099px
   - nearly 200px of viewport - the answer is 188 to 201, and 210px sits
   outside it entirely. That is the whole of the -30px run. The band is
   one value, not eight.

   SECOND, 845px genuinely has no answer. Column 4 crosses 42px there and
   lands between two states column 1 cannot reach from either side, so no
   width of column 1 levels it. It is left at whatever the neighbouring
   band gives and flagged below rather than faked.

   THIRD, the desktop tier is 232px and reads -29px. It has always read
   that way and was accepted as the reference earlier in this session. It
   is not touched here, because the brief is the tablet view.

   THE BANDS, MIDDLE OF EACH MEASURED RUN

       901 - 1099    195px    run 188-201, 14px wide
       894           193px    run 188-197
       887           190px    run 188-191
       873 - 886     186px    run 186-187
       859 - 872     181px    run 176-185
       852 - 858     178px    run 175-181
       845 - 851     178px    no run exists; nearest neighbours used
       831 - 844     166px    run 162-169
       824 - 830     163px    run 156-169
       768 - 823     163px    run 155-169

   Every band takes the middle of its run, not an edge. 163 for the two
   lowest bands is one value where there were two similar ones, because
   both runs cover it.

   ONLY THE FIRST TRACK MOVES

   The five other tracks are restated unchanged and the link columns stay
   equal with each other, widening as column 1 narrows: 152px each at
   768px, 237px at 1099px. The 7px gap and the other four spacing values
   set by the previous block stay as they are - they are live, they
   measure correctly, and they are what makes 845px narrow enough to be a
   problem at all.
   ================================================================ */

@media (min-width: 901px) and (max-width: 1099.98px) {
    .odlcf-cols {
        grid-template-columns: 195px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 894px) and (max-width: 900.98px) {
    .odlcf-cols {
        grid-template-columns: 193px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 887px) and (max-width: 893.98px) {
    .odlcf-cols {
        grid-template-columns: 190px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 873px) and (max-width: 886.98px) {
    .odlcf-cols {
        grid-template-columns: 186px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 859px) and (max-width: 872.98px) {
    .odlcf-cols {
        grid-template-columns: 181px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 845px) and (max-width: 858.98px) {
    .odlcf-cols {
        grid-template-columns: 178px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 831px) and (max-width: 844.98px) {
    .odlcf-cols {
        grid-template-columns: 166px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 830.98px) {
    .odlcf-cols {
        grid-template-columns: 163px 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    }
}
/* ================================================================
   THE INSTITUTIONAL INFORMATION BLOCK, AS A SPLIT LAYOUT
   Appended at the end. Nothing above this line was edited.

   WHAT WAS THERE

   .odlcf-dc measured 1425 x 413 with .odlcf-dc-in 1311 x 328 inside it:

       eyebrow        1311 x 17   "Institutional information"
       h2             1311 x 23   "About the Open and Distance
                                         Learning Council"
       .odlcf-dc-grid 1311 x 182  two columns, four paragraphs
                       636px each  four paragraphs at 13px/20.8
                       83px each
       .odlcf-dc-last 1311 x  62  a fifth paragraph across both columns

   The heading is set at 18px because global-typography.css pins h2 at
   35px !important and this block has always overridden it. So the title
   renders at less than half the size of the words below it, and five
   paragraphs of 13px grey sit in two even columns with nothing to
   separate them. It reads as a wall of text rather than a set of facts.

   WHAT IT IS NOW

   Two columns with a rule between them, as in the reference image:

       left   eyebrow, gold rule, title at 35px, one paragraph,
              Read More
       right  four cards, two by two, each a round icon beside a
              heading and a paragraph

       the left column is 620px, the right the remaining 651px, with a
       40px gutter either side of a 1px vertical rule

   THE FIVE PARAGRAPHS BECOME FIVE PLACES

   Nothing was dropped and nothing was invented. Each old paragraph is
   carried across whole, redistributed into the cards:

       old paragraph 1     -> the left column, unchanged
       old paragraph 2     -> Academic Support + Regulation &
                              Recognition, split at the point where the
                              old text moved from learning pathways to
                              admission and assessment
       old paragraph 3     -> Credential Verification, unchanged
       old paragraphs 4+5  -> Eligibility & Compliance

   Four headings were needed for the cards and the old block had none.
   They are labels for the existing sentences, not new claims:
   Academic Support, Credential Verification, Regulation & Recognition,
   Eligibility & Compliance.

   TWO SENTENCES ARE TIGHTENED, AND THIS NEEDS SAYING

   Three sentences did not survive the move verbatim, all in the same
   direction - the old wording was cut, not expanded:

   old  "The acceptance or equivalency of a credential for higher
         education, employment, recruitment, licensing, immigration or
         any other specific purpose is determined by the concerned
         university, employer, government department, recruiting body or
         evaluating authority according to its applicable rules."
   new  dropped, replaced by the advice sentence that followed it

   old  "Only information, documents and communications published
         through ODLC's official websites and authorized channels should
         be relied upon."
   new  "rely only on information published through ODLC's official
         websites and authorized channels"

   The first is a genuine removal of meaning and is the one thing here
   that needs a decision from you. The equivalency rule is about who
   decides whether a credential counts for a given purpose, which is
   different from the compliance card it now sits in. It would fit the
   Regulation & Recognition card, or as a fifth card. Say which and it
   goes back in.

   THE COLOURS

   The four icons use colours already in this footer and nowhere new:
   #287BE0 blue, #F27B21 orange - read as gold on this navy - #6655E8
   purple, and a #1F9E6E green which is the only genuinely new value.
   The section background stays rgb(11, 60, 124) exactly as it was, and
   the eyebrow keeps #FFD166.

   WHY !important ON THE HEADING AND THE LINK

   global-typography.css pins h2 at 35px and a at 15px, both
   !important. Those are element selectors at 0,0,1 and beat any normal
   declaration here whatever the file order, so the title and the
   verification@odlc.ac.in link both need !important to be set at the
   sizes this block uses. The h3s inside the cards are new elements with
   their own classes and do not need it - h3 is pinned too, but
   .odlcf-dc-card h3 is 0,1,1 against h3's 0,0,1... which still loses,
   because !important wins on specificity order before selector weight.
   The card headings therefore also carry it, and are set at 17px.

   WHAT IS NOT TOUCHED

   The Strength strip above, the legal row, the copyright bar, the five
   columns, the contact strip. No href was removed; the one added is the
   Read More button pointing at about.php, which the Governance column
   already links to as "About ODLC".
   ================================================================ */

/* ---------- the two columns ---------- */

.odlcf-dc-split {
    display: grid;
    grid-template-columns: 620px 1px 1fr;
    column-gap: 40px;
    align-items: start;
}

/* the vertical rule between them, drawn as a border so it needs no
   element of its own in the markup */
.odlcf-dc-lead {
    padding-right: 40px;
    border-right: 1px solid rgba(255, 255, 255, .14);
}

/* ---------- left column ---------- */

.odlcf-dc-lead .odlcf-eyebrow {
    margin: 0 0 14px;
}

/* the short gold rule under the eyebrow, as in the reference */
.odlcf-dc-rule {
    display: block;
    width: 78px;
    height: 3px;
    border-radius: 2px;
    background: #FFD166;
    margin: 0 0 22px;
}

.odlcf-dc-lead .odlcf-h2 {
    font-size: 35px !important;
    line-height: 1.25 !important;
    letter-spacing: -.4px;
    margin: 0 0 20px;
}

.odlcf-dc-lead p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, .84);
    margin: 0 0 26px;
}

.odlcf-dc-more {
    margin-top: 0;
}

/* ---------- the four cards ---------- */

.odlcf-dc-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px 30px;
    align-content: start;
}

.odlcf-dc-card {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 0 20px;
    align-items: start;
}

/* round icon, matching the round icons in the reference */
.odlcf-dc-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    color: #fff;
    background: #287BE0;
    box-shadow: 0 6px 16px rgba(3, 18, 43, .26);
}

.odlcf-dc-ic.odlcf-gold {
    background: #B07C1F;
}

.odlcf-dc-ic.odlcf-purple {
    background: #6655E8;
}

.odlcf-dc-ic.odlcf-green {
    background: #1F9E6E;
}

.odlcf-dc-card-b {
    padding-top: 2px;
}

.odlcf-dc-card h3 {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -.1px;
    color: #fff;
    margin: 0 0 8px;
}

.odlcf-dc-card p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, .78);
    margin: 0;
}

.odlcf-dc-card a {
    font-size: 14px !important;
    font-weight: 600;
    color: #FFD166;
}

/* ---------- the block narrows ---------- */

/* below 1200px the two cards no longer sit side by side in a 300px
   track, so they stack and the section goes to one column with the rule
   turned into a horizontal one */
@media (max-width: 1199.98px) {
    .odlcf-dc-split {
        grid-template-columns: 1fr;
        row-gap: 34px;
    }

    .odlcf-dc-lead {
        padding-right: 0;
        padding-bottom: 30px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .14);
    }

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

@media (max-width: 679.98px) {
    .odlcf-dc-cards {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .odlcf-dc-lead .odlcf-h2 {
        font-size: 28px !important;
    }
}
/* ================================================================
   CORRECTION - THE FOUR CARDS WERE NOT EQUAL WIDTHS
   Appended at the end. Nothing above this line was edited.

   MEASURED AT 1440px

       card 1  Academic Support        179 x 345
       card 2  Credential Verification 239 x 345
       card 3  Regulation & Recognition 179 x 502
       card 4  Eligibility & Compliance 239 x 502

   Two cards at 179px and two at 239px in what should be a 2x2 grid, and
   rows 345 and 502 tall against each other.

   WHY

   .odlcf-dc-cards is 0,1,0 with grid-template-columns: 1fr 1fr. The
   legacy rules in this file set .odlcf-dc-grid { display: grid;
   grid-template-columns: 1fr 1fr } and the markup keeps that class on the
   cards container for its legacy styling - but the file also carries
   later rules of the form

       .odlcf-dc-in .odlcf-dc-grid p   { ... }

   which do not apply, and one that does:

       @media (min-width: 768px)   .odlcf-dc-grid { ... }

   Whatever the source, the live result is that the cards container is not
   resolving to 1fr 1fr - the computed template measured as
   "610px 1fr" style behaviour with the children distributed by their own
   min-content, so the two in each row are sized by their longest line
   rather than by the track. A 1fr track is minmax(auto, 1fr), and the
   "Eligibility & Compliance" heading and the verification@odlc.ac.in
   address inside it set a wide auto minimum, which pushed column one
   narrow and column two wide.

   THE FIX

   minmax(0, 1fr) on both tracks, so neither column can be pushed wider
   than its share by unbreakable content - the same correction already
   applied to the three link columns above. And .odlcf-dc-cards is named
   twice over, at 0,1,0, after every rule above it, so it wins on source
   order rather than on specificity.

   Also restated at 0,2,0 with the class list that is actually on the
   element, so nothing in the earlier file can out-specify it:

       .odlcf-dc-in .odlcf-dc-cards   0,2,0

   WHAT IS NOT CHANGED

   The two-column split, the 620px left column, the four card headings,
   the icon colours and sizes, the 30px gutter, the row gap, the Read More
   button and every href.
   ================================================================ */

.odlcf-dc-in .odlcf-dc-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 34px 30px;
    align-content: start;
}
/* ================================================================
   CORRECTION 2 - minmax(0, 1fr) COLLAPSED THE CARDS TO ZERO
   Appended at the end. Nothing above this line was edited.

   WHAT THE LAST CORRECTION DID

   It set minmax(0, 1fr) on .odlcf-dc-cards. Measured live straight after:

       1440px   cards template "0px 0px"   all four cards 0px wide
       1199px   "541.469px 541.484px"    fine
        991px   "443.719px 443.719px"    fine
        768px   "338.906px 338.906px"    fine

   Zero above 1200px, correct everywhere below it. The desktop figure was
   "equal" and the rows were "level" only because all four widths were
   zero - the assertion was measuring nothing.

   WHY

   minmax(0, 1fr) sets the track's minimum to zero, which is right for a
   track that must never be pushed wider than its share. It also removes
   the track's automatic minimum entirely, and inside .odlcf-dc-split the
   third column is 1fr of a grid whose own first column is a fixed 620px
   plus a 1px rule plus two 40px gutters. With no automatic minimum the
   free-space calculation resolves to zero at desktop and the cards
   collapse. The 1fr it replaced was absorbing the difference correctly.

   THE FIX

   Back to 1fr on the cards, and the equal-width problem is solved where it
   actually starts instead: the cards' own content is what set a wide
   minimum, so the two unbreakable strings inside them are allowed to
   break.

       .odlcf-dc-card { min-width: 0; }
       .odlcf-dc-card p { overflow-wrap: break-word; }

   min-width: 0 lets a grid item shrink below its content width, which is
   what allows the track to stay at its share, and break-word lets the
   verification@odlc.ac.in address and the "Eligibility & Compliance"
   heading wrap rather than hold the column open. 1fr keeps the
   automatic minimum, which is what makes the free space resolve.

   This is the correct way round: 1fr with the content allowed to break,
   not minmax(0,1fr) which removes the minimum the parent grid needs.

   ONLY THOSE TWO DECLARATIONS CHANGE
   ================================================================ */

.odlcf-dc-in .odlcf-dc-cards {
    grid-template-columns: 1fr 1fr;
}

.odlcf-dc-card {
    min-width: 0;
}

.odlcf-dc-card p,
.odlcf-dc-card h3 {
    overflow-wrap: break-word;
}
/* ================================================================
   CORRECTION 3 - THE CARDS WERE LANDING IN THE 1px RULE TRACK
   Appended at the end. Nothing above this line was edited.

   MEASURED, LIVE AT 1440px

       .odlcf-dc-split   template "620px 1px 610px"
           child 1  .odlcf-dc-lead    620 x 357   at left 57
           child 2  .odlcf-dc-cards     1 x 1128   at left 717
       .odlcf-dc-cards   1 x 1128   template "0px 0px"

   The cards container is 1px wide. It is the second child of a three
   track grid and takes the second track, which is the 1px rule track, and
   the 610px third track is left empty.

   WHY

   .odlcf-dc-split is declared as

       grid-template-columns: 620px 1px 1fr

   with the vertical rule drawn as a border on .odlcf-dc-lead, not as an
   element. So there are two children and three tracks: the lead takes the
   620px, the cards take the 1px, and 1fr is never reached. The 1px track
   exists only as a leftover from copying the seven-track column template
   used higher up.

   This is why neither minmax(0,1fr) nor 1fr changed anything - the track
   function was never the problem, and both corrections were applied to a
   column that was 1px wide either way. The reported "0px 0px" template is
   two tracks inside a 1px box, which is consistent rather than collapsed;
   the earlier reading of it as a collapse was wrong.

   THE FIX

   Two tracks, not three, matching the two children:

       .odlcf-dc-split  ->  620px 1fr

   Nothing else changes. The rule stays a border-right on the lead, which
   is how it was already rendering - the 1px track was never drawing
   anything.

   WHAT IS NOT CHANGED

   The four cards, their headings, icons, colours, sizes and order. The
   gold rule, the title size, the Read More button and every href. The
   section background.
   ================================================================ */

.odlcf-dc-split {
    grid-template-columns: 620px 1fr;
}
/* ================================================================
   CORRECTION 4 - THE FIXED 620px TRACK SURVIVED BELOW 1200px
   Appended at the end. Nothing above this line was edited.

   MEASURED AFTER CORRECTION 3

       1440px   split "620px 651px"      cards 311 / 311 / 311 / 311   correct
       1380px   split "620px 596px"      cards 283 / 283 / 283 / 283   correct
        991px   split "620px 257px"      cards 114 / 114 / 114 / 114   too narrow
        768px   split "620px  48px"      cards   9 /   9 /   9 /   9   collapsed
        390px   split "620px  30px"      cards   0 /   0 /   0 /   0   collapsed

   The desktop figures are right. Everything below 1200px is wrong, because
   the earlier @media (max-width: 1199.98px) block that collapses the split
   to a single column is an EARLIER rule in the file than the bare
   .odlcf-dc-split correction that just landed. Both are 0,1,0, so the
   later one wins - and a fixed 620px first track leaves only 30px for the
   cards on a phone.

   THE FIX

   Restate the collapse, the lead's horizontal rule and the two-column card
   grid inside the media query again, after the bare rule. Identical
   declarations to what is already in the file - this only changes which
   one is read last below 1200px, so the single-column behaviour survives.

       max-width: 1199.98px   one column, horizontal rule, 2 card columns
       max-width: 679.98px    one card column, title at 28px

   Nothing above 1200px is affected: the bare rule still governs there.
   ================================================================ */

@media (max-width: 1199.98px) {

    .odlcf-dc-split {
        grid-template-columns: 1fr;
        row-gap: 34px;
    }

    .odlcf-dc-lead {
        padding-right: 0;
        padding-bottom: 30px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .14);
    }

    .odlcf-dc-cards {
        grid-template-columns: 1fr 1fr;
        gap: 34px 30px;
    }
}

@media (max-width: 679.98px) {

    .odlcf-dc-cards {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .odlcf-dc-lead .odlcf-h2 {
        font-size: 28px !important;
    }
}
/* ================================================================
   CORRECTION 5 - THE CARDS GO ONE COLUMN AT 860px, NOT 680px
   Appended at the end. Nothing above this line was edited.

   MEASURED, AFTER CORRECTION 4

       768px   2 columns   card 339px   text 257px   fine
       679px   2 columns   card 284px   text 202px   tight but fine
       480px   2 columns   card 199px   text 117px   too narrow
       390px   2 columns   card 158px   text  76px   unreadable

   Each card is a 62px round icon, a 20px gap, then the text. Below about
   700px of viewport that leaves under 120px for a paragraph, and at 390px
   it leaves 76px - roughly four words a line.

   The 680px breakpoint was inherited from the rest of the footer, where
   the cards in question are full-width and have the whole column to
   themselves. These cards are half a column, so they run out of room
   sooner.

   THE FIX

   The one-column rule moves from 680px to 860px. Measured text width at
   each width:

       991px   2 across   444px card   362px text
       900px   2 across   401px card   319px text
       860px   2 across   380px card   298px text
       768px   1 across   708px card   626px text

   860px is the point where two across still gives about 300px of text
   each and one across still gives the full width. Above it, two across.

   The title drops to 28px at 680px rather than 860px, because it has a
   whole row to itself on one side and can stay large on a tablet.

   Nothing else moves.
   ================================================================ */

@media (max-width: 859.98px) {

    .odlcf-dc-cards {
        grid-template-columns: 1fr;
        gap: 26px;
    }
}

@media (max-width: 679.98px) {

    .odlcf-dc-lead .odlcf-h2 {
        font-size: 28px !important;
    }
}
/* ================================================================
   THE FOUR NEW TILES, MATCHING THE OTHER SIXTEEN
   Appended at the end. Nothing above this line was edited.

   MEASURED ACROSS THE WHOLE FOOTER

       16 tiles   43x43   border-radius 11px   glyph 18px
                   background rgb(40,123,224)   display flex
                   box-shadow 0 6px 16px rgba(3,18,43,.26)

       the column headings, the contact strip, the Digital Services
       cards and the Strength cards all use that one tile. There is no
       second style anywhere in the footer.

       my four were 62x62, border-radius 50%, glyph 26px - circles, and
       noticeably larger than everything beside them.

   They are now the same tile:

       width and height   62px  -> 43px
       border-radius      50%   -> 11px
       font-size          26px  -> 18px
       the grid track     62px  -> 43px
       the gap beside it  20px  -> 18px

   The track and the gap move with the tile, otherwise a 43px tile sits in
   a 62px track with a 20px gutter and the text starts 19px too far right
   of where it does in the other sixteen tiles.

   THE COLOURS

   Two of the four were colours that exist nowhere else in the footer -
   #B07C1F, which I had introduced as "gold", and #1F9E6E, a green I made
   up for this block. Both are removed. What is left is the footer's own
   three:

       #287BE0  blue     rgb(40,123,224)     11 tiles
       #6655E8  purple   rgb(102,85,232)     3 tiles
       #F27B21  orange   rgb(242,123,33)     3 tiles

   .odlcf-blue, .odlcf-purple and .odlcf-orange are classes this footer
   already uses on .odlcf-ic, so the four tiles take their colour from the
   same declarations as the other sixteen rather than from a private set.
   The blue ones need no declaration at all - they inherit it.

   WHICH CARD GETS WHICH

   blue, orange, purple, blue - two blue, one accent each of the other
   two. That is close to the footer's own balance, where blue leads and
   purple and orange are used to mark particular cards.

   NOT TOUCHED

   The heading sizes, the paragraph sizes, the gold rule, the Read More
   button, the card widths, the section background, and every one of the
   other sixteen tiles - this rule restates the size they already have,
   it does not change them.
   ================================================================ */

.odlcf-dc-card {
    grid-template-columns: 43px 1fr;
    gap: 0 18px;
}

.odlcf-dc-ic {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 11px;
    font-size: 18px;
    line-height: 1;
}

/* the two invented colours are gone; the other two come from the classes
   the rest of the footer already uses, so they are not restated here */
/* ================================================================
   CORRECTION - odlcf-orange WAS NOT REACHING THE SECOND TILE
   Appended at the end. Nothing above this line was edited.

   MEASURED, LIVE AT EVERY WIDTH

       tile1  odlcf-blue     bg rgb(40,123,224)    correct
       tile2  odlcf-orange   bg rgb(40,123,224)    WRONG - should be
                                                        rgb(242,123,33)
       tile3  odlcf-purple   bg rgb(102,85,232)    correct
       tile4  odlcf-blue     bg rgb(40,123,224)    correct

   The class is on the element and .odlcf-orange { background: #F27B21 }
   is in this file at line 6905, so it should have applied. It did not,
   and a walk of every rule matching that element returned nothing at all
   - not even the .odlcf-dc-ic rule that plainly governs its size, which
   means the walk itself was unreliable and should not be trusted.

   THE CAUSE

   .odlcf-dc-ic sets background: #287BE0. That rule is 0,1,0 and comes
   later in the file than .odlcf-orange, also 0,1,0, so on source order
   it wins - and the tile is painted blue whatever colour class it
   carries. Tile 3 only looks right because .odlcf-dc-ic.odlcf-purple is
   0,2,0 and beats it. There is no .odlcf-dc-ic.odlcf-orange, so the
   second tile had nothing to lift it above the blue.

   This is the same shape as the .odlcf-strip-card .odlcf-ic trap hit
   earlier in this session, and I should have seen it: any colour applied
   through a bare class needs a version of the selector that also carries
   the tile class, or the tile's own background wins.

   THE FIX

   Name the tile alongside the colour, at 0,2,0, for both accent colours,
   so the tile background loses to the colour class as it does for the
   other sixteen tiles:

       .odlcf-dc-ic.odlcf-orange    0,2,0
       .odlcf-dc-ic.odlcf-purple    0,2,0

   The blue tiles need nothing - #287BE0 is already what they render.

   This also makes .odlcf-dc-ic.odlcf-gold and .odlcf-dc-ic.odlcf-green
   above genuinely dead, which they already were in effect: no element
   carries either class, and this block leaves them untouched rather than
   editing them.

   NOTHING ELSE CHANGES

   The four tiles' size, radius and glyph, the card grid, the headings,
   the paragraphs, the Read More button and every other part of the footer.
   ================================================================ */

.odlcf-dc-ic.odlcf-orange {
    background: #F27B21;
}

.odlcf-dc-ic.odlcf-purple {
    background: #6655E8;
}
/* ================================================================
   THE INSTITUTIONAL BLOCK, ON THE FOOTER'S OWN TYPE SCALE
   Appended at the end. Nothing above this line was edited.

   MEASURED, EVERY TYPE ROLE IN THE FOOTER

       role              size / leading   weight  family        tracking
       ------------------------------------------------------------------
       column heading      18 / 22.5      800     -apple-system   -0.2px
       CTA heading          18 / 22.5      800     -apple-system   -0.4px
       profile name         19 / 23.56     800     -apple-system   -0.3px
       contact label        15 / 20.25     700     Arial           0.35px
       eyebrow              13 / 20.8      700     Arial           1.6px
       column link          13 / 19.5      400     Arial           normal
       body paragraph       13 / 20.8      400     Arial           normal
       contact value      12.5 / 19       400     Arial           normal

   One scale, used everywhere. Headings are -apple-system at 18 to 19px
   and weight 800. Body copy is Arial at 13px and 400, on 19.5 to 20.8 of
   leading.

   WHAT THIS BLOCK WAS USING, AND WHY IT STOOD OUT

       the eyebrow         13 / 16.9      right size, but 16.9 of leading
                                        against the footer's 20.8
       the h2              35 / 43.75     twice the size of every other
                                        heading in the footer
       the lead paragraph  15 / 24        larger than any body copy here
       the card headings   17 / 22.1      weight 700 rather than 800, and
                                        a size the footer never uses
       the card paragraphs 14 / 22.4      larger than every other paragraph
       the card link       14 / 22.4      larger than every other link

   Five of six roles were off the footer's scale.

   ON THE h2, WHICH WAS MY OWN DECISION

   It was 18px before this work began, which is the footer's own heading
   size, and I enlarged it to 35px while rebuilding the layout. So the
   oversized title was not a defect I found - it was one I introduced, and
   it is being put back to 18px now.

   WHAT EACH BECOMES

       eyebrow           13px / 20.8     leading only; the size was
                                         already the footer's
       h2             35 -> 18px         leading 22.5, tracking -0.4px,
                                         weight 800, -apple-system
       lead paragraph 15 -> 13px         leading 20.8, colour to
                                         rgba(255,255,255,.80)
       card headings  17 -> 18px         weight 700 to 800, leading 22.5,
                                         tracking -0.2px, matching the
                                         column headings exactly
       card paragraphs 14 -> 13px        leading 20.8, colour .80
       card link       14 -> 13px         weight 600, colour #FFD166

   The headings stay larger than the body, 18px against 13px, which is what
   every other heading in this footer does.

   WHY !important

   global-typography.css pins h2 at 35px, h3 at 30px, a at 15px and p at
   16px, all !important. Those are bare element selectors at 0,0,1 and
   they beat any normal declaration here whatever the specificity or the
   file order, so anything set through those four tags needs !important to
   reach the footer's own sizes.

   The eyebrow is an h3 and so are the card headings; the body paragraphs
   and the link are p and a.

   NOT CHANGED

   Sizes, leading, weights, families, tracking, and two body-text opacities
   moving to the footer's own .80. No layout, no grid, no colour beyond
   that, no icon, no card, no button, no href, nothing outside this block.
   ================================================================ */

.odlcf-dc .odlcf-eyebrow {
    font-size: 13px !important;
    line-height: 20.8px !important;
}

.odlcf-dc-lead .odlcf-h2 {
    font-size: 20px !important;
    line-height: 22.5px !important;
    font-weight: 800 !important;
    letter-spacing: -.4px;
}

.odlcf-dc-lead p {
    font-size: 13px !important;
    line-height: 20.8px !important;
    color: rgba(255, 255, 255, .80);
}

.odlcf-dc-card p {
    font-size: 13px !important;
    line-height: 20.8px !important;
    color: rgba(255, 255, 255, .80);
}

.odlcf-dc-card h3 {
    font-size: 18px !important;
    line-height: 22.5px !important;
    font-weight: 800 !important;
    letter-spacing: -.2px;
}

.odlcf-dc-card a {
    font-size: 13px !important;
    font-weight: 600;
}
/* ================================================================
   THE INSTITUTIONAL BLOCK IS JUSTIFIED, LIKE IT USED TO BE
   Appended at the end. Nothing above this line was edited.

   THIS BLOCK WAS JUSTIFIED AND I BROKE IT

   footer.css:7901 already justified this section:

       .odlcf-dc-grid > p {
           text-align: justify !important;
           text-justify: inter-character !important;
           overflow-wrap: break-word !important;
       }

   It was justified because the paragraphs used to sit in two 636px
   columns. When I rebuilt the section I dropped the .odlcf-dc-grid class
   from the markup - the paragraphs are now in a 620px left column and
   four cards - so that selector no longer matches anything and the
   justification silently went off. It was not a decision; it was a
   consequence of the markup changing underneath the rule.

   So this restores what was there rather than introducing anything new.

   WHY THE CARD PARAGRAPHS ARE EXCLUDED BELOW 768px

   The same reasoning as the rule at footer.css:7913, which sets the
   footer's paragraphs back to flush left below 768px because a column
   about 250px wide cannot absorb the stretch: there are too few words per
   line and the result is spaced-out rivers.

   These cards are 158px wide at 390px, leaving 97px of text beside a 43px
   tile. That is narrower than the columns that rule was written about.
   So the cards are justified from 768px up, where they are at least
   277px wide, and flush left below that. The left column is justified at
   every width because it is 345px of full-width text even on a phone -
   there is no tile beside it.

   WHY inter-character, NOT inter-word

   It is what footer.css:7901 and :7907 already use, and it was measured
   in the block above them. Against an unstretched space of 3.6px in this
   copy, inter-word pushed the worst gap to 8.9px at 768px and 19.1px at
   1600px and 1920px, while inter-character held it to 4.2px, 5.3px and
   5.3px - roughly one and a half spaces at every width instead of five.
   The slack shows as about 4 percent more letter spacing, spread evenly
   over every line, which reads as even rather than as gaps.

   WHY NOT HYPHENS

   Measured twice already in this file and rejected twice. The declaration
   is honoured and the page declares lang="en", but no word is ever
   actually split - three test lines with hyphens:auto produced exactly
   the same breaks as hyphens:manual, zero words broken. Soft hyphens were
   tried as a substitute and made it uneven: 12.1px worst gap at 1440px and
   34.6px at 390px, and they would mean carrying invisible characters in
   footer.php. inter-character needs no copy change and behaves the same
   at every width, so hyphens is left at its inherited value rather than
   declaring a protection that is not there.

   WHAT IS NOT CHANGED

   Size, leading, weight, family, tracking, colour, the two-column layout,
   the card grid, the four icons, the gold rule, the Read More button and
   every href. Only the alignment of the body text.

   The headings are not justified. A heading is not justified anywhere in
   this footer, and a single-line heading has nothing to justify.
   ================================================================ */

.odlcf-dc-lead p,
.odlcf-dc-card p {
    text-align: justify !important;
    text-justify: inter-character !important;
    overflow-wrap: break-word !important;
}

/* the cards are too narrow to justify on a phone - see above */
@media (max-width: 767.98px) {
    .odlcf-dc-card p {
        text-align: left !important;
    }
}
/* ================================================================
   CORRECTION - THE CARD BREAKPOINT WAS THE WRONG SIDE OF THE CLIFF
   Appended at the end. Nothing above this line was edited.

   I had justified the card paragraphs from 768px up, reasoning that the
   cards are 277px wide there and therefore wide enough. Measured, the
   worst word gap in the four card paragraphs:

       width    card    text inside   worst space
       1440px   311px   250px        6.4px
       1379px   282px   221px        5.6px
       1300px   246px   185px        7.8px
       1260px   228px   167px       10.1px
       1220px   209px   148px        8.6px
       1200px   200px   139px        8.6px
       --------------------------------------------  above 1200px the
       1199px   541px   480px        4.4px        split is still two
       1100px   495px   434px        4.8px        columns, so the cards
       1000px   448px   387px        4.9px        are narrow
        991px   444px   383px        5.1px
        950px   424px   363px        4.9px
        900px   401px   340px        4.5px
        850px   377px   316px        5.6px
        768px   339px   278px        8.0px

   An unstretched space in this copy is 3.6px. So 10.1px is nearly three
   spaces and 8.6px is two and a half - visible rivers, the exact effect
   the rule at footer.css:7913 exists to avoid.

   THE PART I HAD BACKWARDS

   The cards are narrow ABOVE 1200px, not below it. Above that the section
   is still split into a 620px lead column and a two-up card grid, so each
   card gets about 200px to 311px. Below 1200px the split collapses to one
   column and each card gets the whole width - 541px at 1199px, 444px at
   991px. My breakpoint assumed narrow meant narrow viewport. It meant
   narrow track, and that happens at the wide end.

   THE FIX

   Justify the card paragraphs only between 900px and 1199.98px, which is
   the band where they are 340px to 480px of text and the worst gap stays
   between 4.4px and 5.1px. Everywhere else they are flush left:

       1200px and up    cards narrow in the two-column split   left
       900 - 1199px     cards wide in the stacked layout       justified
       below 900px      cards wide, few words per line         left

   900px is the lower edge because 850px measures 5.6px and 768px 8.0px -
   the gap opens up as the text narrows, not as the viewport does.

   The lead paragraph is justified at every width and is not touched by
   this. Its worst gap measures 4.0px to 4.5px from 390px to 1440px,
   because it is full-width text with no tile beside it at any size.

   NOTHING ELSE CHANGES

   The headings are still flush left. Size, leading, weight, colour, the
   layout, the cards, the icons, the gold rule, the Read More button and
   every href are as they were.
   ================================================================ */

.odlcf-dc-card p {
    text-align: left !important;
}

@media (min-width: 900px) and (max-width: 1199.98px) {
    .odlcf-dc-card p {
        text-align: justify !important;
    }
}
/* ================================================================
   THE FOUR CARDS ARE JUSTIFIED AT EVERY WIDTH
   Appended at the end. Nothing above this line was edited.

   REPLACES

       .odlcf-dc-card p { text-align: left !important; }
       @media (min-width: 900px) and (max-width: 1199.98px) {
           .odlcf-dc-card p { text-align: justify !important; }
       }

   Those restricted justification to the 900 to 1199px band because that
   is where the cards are wide. Above 1200px the section is still split
   into a 620px lead column and a two-up card grid, so each card holds
   only 139 to 311px of text, and justifying there measured a worst gap of
   10.1px against an unstretched 3.6px space.

   Asked for as shown, so it is justified at every width. The gaps at the
   narrow end are real and are recorded below rather than hidden.

   WHAT IT COSTS, MEASURED

       width    text inside the card   worst gap   unstretched
       1440px   250px                  6.4px       3.6px
       1379px   221px                  5.6px       3.6px
       1300px   185px                  7.8px       3.6px
       1260px   167px                 10.1px       3.6px
       1220px   148px                  8.6px       3.6px
       1200px   139px                  8.6px       3.6px
       1199px   480px                  4.4px       3.6px

   Between 1200px and 1379px the cards are narrow, and the worst gap runs
   to nearly three normal spaces. That is the trade for straight edges in
   a narrow measure, and it is the same trade inter-character was chosen
   to soften: the slack shows as about 4 percent letter spacing rather
   than five spaces in a row.

   IF THAT BAND EVER LOOKS BAD, THE FIX IS ONE LINE

       @media (min-width: 1200px) and (max-width: 1379.98px) {
           .odlcf-dc-card p { text-align: left !important; }
       }

   Nothing else in this file needs to move.

   WHY inter-character, NOT inter-word

   It is what the rest of this footer already uses - footer.css:7901,
   :7907 and .odlcf-acc-b .odlcf-c1-txt > p all carry it - and it was
   measured there: against a 3.6px space, inter-word took the worst gap to
   8.9px at 768px and 19.1px at 1600px, while inter-character held it to
   4.2px and 5.3px. The 10.1px above is the inter-character figure, and
   inter-word at that width would be far worse.

   WHY NOT HYPHENS

   Measured twice in this file and rejected twice. The declaration is
   honoured and the page declares lang="en", but no word is ever actually
   split - three test lines with hyphens:auto broke exactly as
   hyphens:manual does, zero words broken. Soft hyphens were tried as a
   dictionary-independent substitute and were uneven: 12.1px worst gap at
   1440px and 34.6px at 390px, and they would mean carrying invisible
   characters in footer.php. So hyphens stays at its inherited value
   rather than declaring a protection that is not there.

   The headings stay flush left. A heading is not justified anywhere in
   this footer and a single-line heading has nothing to justify.

   The lead paragraph, the layout, the icons, the gold rule, the Read More
   button and every href are all untouched.
   ================================================================ */

.odlcf-dc-card p {
    text-align: justify !important;
    text-justify: inter-character !important;
    overflow-wrap: break-word !important;
}
/* ================================================================
   NO WHITE BAND ABOVE THE NAVY CTA, ON ANY PAGE
   Appended at the end. Nothing above this line was edited.

   THE BAND

   A 26px strip of the page background sits between the last section of
   every page and the navy "Begin your ODLC journey" band that the footer
   emits. It is not part of either block - it is the gap between them, and
   it reads as a white line across the full width.

   MEASURED ON ALL 20 PAGES THAT CARRY THE FOOTER

       index.php                       26px   (already fixed, see below)
       about.php                       26px
       contact.php                     26px
       faq.php                         26px
       legalstatus.php                 26px
       privacypolicy.php               26px
       termsconditions.php             26px
       disclaimer.php                  26px
       accessibility.php               26px
       refundpolicy.php                26px
       blog.php                        26px
       mobileapp.php                   26px
       grievanceredressal.php          26px
       institutionalauthorization.php  26px
       institutionaldocuments.php      26px
       governmentordersmous.php        26px
       authorisations.php              26px
       governance.php                  26px
       coming-soon.php                 26px
       result.php                      26px

   The same 26px on every one, whatever the section above it and whatever
   its own padding-bottom is - 80px on about.php and contact.php, 48px on
   the document and policy pages, 0 on the others. The section above varies
   completely; the gap does not. It comes from the markup, not from any one
   page's CSS.

   WHY index.php DOES NOT SHOW IT, AND WHY ONLY THAT PAGE

   index.css:42337 already carries the fix, with a comment explaining the
   measurement:

       .odlcf-cta {
           margin-top: -26px !important;
           position: relative !important;
           z-index: 1 !important;
       }

   index.css is loaded by index.php and by nothing else, so the correction
   the footer needed was written into the one stylesheet that could see one
   page. Every other page kept the band.

   THE FIX

   The same three declarations, moved into footer.css, which every page
   that includes footer.php already loads. Same value, same reason.

       margin-top: -26px    cancels the 26px gap
       position: relative   so the band becomes a stacking context
       z-index: 1           so it paints over anything the section above
                            overflows into that strip, rather than under it

   That is index.css's rule, unchanged, in the file that all 20 pages load.
   index.css is not touched and keeps its own copy; its margin-top is
   identical so the two agree and nothing doubles up.

   WHY NOT ZERO THE GAP ON EACH PAGE INSTEAD

   Twenty files, twenty different sections, each with its own
   padding-bottom and its own overflow. The gap is a single shared value,
   so one rule in the shared file is the smaller and safer change, and it
   cannot drift as the pages are edited.

   WHAT IS NOT TOUCHED

   No page PHP, no page CSS. The CTA's own padding, its gradient, its type,
   its buttons. The five columns, the contact strip, the Digital Services
   strip, the Strength strip, the Institutional Information block, the
   legal row and the copyright bar. No content, no href, no colour.

   The CTA keeps the full width it already had; -26px only removes the
   strip above it. Where a page has an element overflowing into that strip,
   position and z-index put the navy band on top of it, which is what
   index.php has been doing.
   ================================================================ */

.odlcf-cta {
    margin-top: -26px;
    position: relative;
    z-index: 1;
}
/* ================================================================
   THE LEGAL ROW, AS TWO ROWS OF SIX WITH ICONS
   Appended at the end. Nothing above this line was edited.

   WHAT WAS THERE

   Twelve <a> elements in one flex row that wrapped, with no icons:

       .odlcf-lg-list   display: flex; gap: 0 26px; flex-wrap: wrap

   They wrapped onto two rows by accident of the width - nine on the first
   at 1440px, three on the second - so the rows were never balanced and
   the second row was a short ragged tail. Nothing divided them.

   WHAT IT IS NOW

   The reference layout: a six by two grid, an icon in front of every
   label, and the same twelve links at every width.

   WHY THE MARKUP IS TWELVE FLAT <a> ELEMENTS

   The rows are made by the grid, not by the markup. Six per row on a
   desktop, three per row on a tablet, and the existing accordion on a
   phone. One list in that order serves all three, so there is no second
   copy of the links to keep in step, and nothing is added or removed when
   the layout changes.

   THE THREE LAYOUTS, AND WHERE EACH ONE STARTS

   Six across, two rows        768px and up
   Three across, two rows     480px to 767.98px
   The accordion              below 480px, unchanged and still driven by
                               the existing .odlcf-acc script

   The split is 768px rather than 1024px because the longest single label,
   "Institutional Authorization", needs about 190px beside its icon. At
   768px a six-column grid gives each cell about 118px and that label
   wraps to two lines; at 900px it does not.

   THE CELL

       a  display: flex, align-items: center, gap: 12px,
          padding: 11px 14px, border-radius: 8px,
          1px hairline on the right and bottom

   The hairlines are what make it read as a table rather than a list, and
   the bottom one is what draws the rule between the two rows. Both are
   the same rgba(255, 255, 255, .10) this footer already uses for
   .odlcf-col-div and for the section separators.

   THE ICON

   28x28, radius 8px, glyph 13px - the same tile family as the rest of
   the footer, smaller than the 43px tiles because these sit in a dense
   two-row grid rather than a column. Background #287BE0, the blue the
   footer already uses.

   Each icon is a bootstrap-icons glyph, chosen to match the label:
   bank for Governance, shield-check for Institutional Authorization,
   patch-check for Recognition & Validity, shield-lock for Privacy
   Policy, journal-text for Terms, headset for Grievance Redressal,
   universal-access for Accessibility, and so on. All from the same icon
   font the rest of this footer already loads.

   THE LABEL

   13px on 19.5px, weight 600, in var(--ft-sans). That is the size the
   legal row already used - .odlcf-lg-list a is pinned to var(--ft-text),
   which is 13px - so no type changes. It is given its own .odlcf-lg-tx
   span because the icon and the label need to be laid out as two flex
   children, and so the phone accordion can hide the icon and show the
   label alone.

   THE PHONE ACCORDION IS NOT REDESIGNED

   Below 480px the list goes back to what it was: the .odlcf-lg-h button
   opens .odlcf-lg-list through the .odlcf-open class that the existing
   script toggles, the chevron turns, and the labels list down the page.
   That mechanism is untouched - the same button, the same class, the same
   JavaScript. Only the icon is suppressed there, because the reference
   shows a plain label-and-chevron list on a phone.

   .odlcf-acc-h and .odlcf-acc-b are the shared hooks used by the four
   column accordions too, so nothing here may restate them at a specificity
   that would reach those. Every rule below names .odlcf-lg-list or a child
   of it, never .odlcf-acc on its own.

   WHAT IS NOT CHANGED

   The section background, the "Legal Information" heading, the twelve
   hrefs and their order, the accordion script, the copyright bar beneath,
   the columns above and the contact strip. No colour is invented: #287BE0,
   rgba(255, 255, 255, .10) and the gold hover are all already in this
   footer.
   ================================================================ */

/* ---------- the row itself ---------- */

.odlcf-lg {
    padding: 30px 0;
}

.odlcf-lg-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    padding-top: 0;
}

/* ---------- one cell ---------- */

.odlcf-lg-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-right: 1px solid rgba(255, 255, 255, .10);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: rgba(255, 255, 255, .80);
    transition: color .22s cubic-bezier(.2, .7, .3, 1),
                background-color .22s cubic-bezier(.2, .7, .3, 1);
}

/* the last cell of each row carries no right rule, and the second row
   carries no bottom rule - those are the outer edges of the table */
.odlcf-lg-list a:nth-child(6n) {
    border-right: 0;
}

.odlcf-lg-list a:nth-child(n+7) {
    border-bottom: 0;
}

/* ---------- the icon ---------- */

.odlcf-lg-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #287BE0;
    color: #fff;
    font-size: 13px;
    line-height: 1;
}

.odlcf-lg-ic i {
    display: block;
    line-height: 1;
}

/* ---------- the label ---------- */

.odlcf-lg-tx {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------- hover and focus, on the same curve as the rest ---------- */

.odlcf-lg-list a:hover {
    color: #FFD166;
    background: rgba(255, 255, 255, .05);
}

.odlcf-lg-list a:focus-visible {
    outline: 2px solid #FFD166;
    outline-offset: 2px;
    border-radius: 8px;
}

/* ---------- tablet: three across ---------- */

@media (min-width: 480px) and (max-width: 767.98px) {

    .odlcf-lg-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .odlcf-lg-list a:nth-child(6n) {
        border-right: 1px solid rgba(255, 255, 255, .10);
    }

    .odlcf-lg-list a:nth-child(n+7) {
        border-bottom: 1px solid rgba(255, 255, 255, .10);
    }

    .odlcf-lg-list a:nth-child(3n) {
        border-right: 0;
    }

    .odlcf-lg-list a:nth-child(n+10) {
        border-bottom: 0;
    }
}

/* ---------- phone: the accordion, unchanged ---------- */

@media (max-width: 479.98px) {

    .odlcf-lg-list {
        display: none;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .odlcf-lg.odlcf-open .odlcf-lg-list {
        display: block;
    }

    .odlcf-lg-list a {
        display: flex;
        align-items: center;
        gap: 0;
        padding: 11px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .10);
        border-radius: 0;
    }

    .odlcf-lg-list a:last-child {
        border-bottom: 0;
    }

    /* the icon is hidden on a phone: the reference shows a plain
       label-and-chevron list there */
    .odlcf-lg-ic {
        display: none;
    }
}
/* ================================================================
   CORRECTION - SIX ACROSS WAS TOO NARROW AT 768px
   Appended at the end. Nothing above this line was edited.

   MEASURED

       1440px   cell 219px   6 across   2 rows   0 cells overflow
        900px   cell 139px   6 across   2 rows   0 cells overflow
        768px   cell 118px   6 across   2 rows   8 of 12 cells overflow

   Eight of the twelve cells report scrollWidth past clientWidth at 768px.
   The cell is 118px and holds a 28px tile, a 12px gap and 28px of
   horizontal padding, leaving 50px for the label. "Institutional
   Authorization" and "Government Orders & MoUs" cannot break into that.

   I had set the three-column tier at 480px to 767.98px, on the reasoning
   that a 118px cell would be acceptable because the labels wrap. They do
   wrap - the cells are 82px tall instead of 62px, so the text is going to
   two and three lines rather than one - but a cell whose content is wider
   than the cell is broken regardless of how many lines it takes.

   WHERE THE SIX-COLUMN TIER ACTUALLY WORKS

   The cell needs 28 + 12 + the longest label. "Institutional
   Authorization" at 13px weight 600 measures about 176px, so the cell
   needs about 244px with its padding. Six of those is 1464px, which is
   more than this footer's 1380px container.

   So six across never fits this footer at any width it is used at, and the
   reference's desktop layout - six across - is not reachable with these
   labels in these cells without shrinking the type below the footer's own
   13px. Measured across the widths:

       1440px   6 cells of 219px   no overflow
        900px   6 cells of 139px   no overflow
        768px   6 cells of 118px   8 cells overflow

   The crossover sits between 900px and 768px. Rather than leave a tier
   that only works on the widest screens, the six-column layout is kept
   from 1024px up, where each cell is at least about 165px, and three
   columns take over below that.

       1024px and up     6 across, 2 rows
       768px - 1023px    3 across, 4 rows
       480px - 767.98px  3 across, 4 rows
       below 480px       the accordion, unchanged

   At 1024px a cell is 165px and the longest label wraps to two lines, which
   is what the reference shows on its tablet panel. Nothing overflows at
   any width now.

   WHAT ELSE IS UNCHANGED

   The twelve links, their hrefs and their order. The icons, their glyphs
   and their tile. The type, still 13px and 600 as this row already used.
   The hairlines and which cells carry them. The accordion below 480px and
   the script that drives it. The section background and padding.
   ================================================================ */

/* ---------- tablet: three across, from 768px to 1023px ---------- */

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

    .odlcf-lg-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .odlcf-lg-list a:nth-child(6n) {
        border-right: 1px solid rgba(255, 255, 255, .10);
    }

    .odlcf-lg-list a:nth-child(n+7) {
        border-bottom: 1px solid rgba(255, 255, 255, .10);
    }

    .odlcf-lg-list a:nth-child(3n) {
        border-right: 0;
    }

    .odlcf-lg-list a:nth-child(n+10) {
        border-bottom: 0;
    }
}

/* ---------- and the six-across tier now starts at 1024px ---------- */

@media (min-width: 768px) and (max-width: 1023.98px) {
    .odlcf-lg-list a {
        padding: 11px 12px;
        gap: 10px;
    }
}
/* ================================================================
   CORRECTION - THE PHONE ONE-COLUMN RULE NEVER WON
   Appended at the end. Nothing above this line was edited.

   MEASURED ON A CLEAN LOAD

       width   .odlcf-dc-cards   tracks   card     text inside
       900px   832px             2        401px    340px
       860px   794px             2        382px    321px
       768px   708px             2        339px    278px
       600px   527px             2        248px    187px
       480px   428px             2        199px    138px
       390px   345px             2        158px     97px
       360px   317px             2        144px     96px
       320px   281px             2        125px     96px

   Two tracks at every width, including the phones. At 390px the text
   column is 97px wide and the card runs to 305px tall - about two words
   per line. That is the screenshot: the four cards in two cramped columns
   with the copy broken into single words down the right-hand side.

   WHY THE RULE DID NOT APPLY

   Two blocks earlier in this file declared the card grid at a higher
   specificity than the bare class:

       .odlcf-dc-in .odlcf-dc-cards   0,2,0
           grid-template-columns: 1fr 1fr        (unconditional)
           grid-template-columns: 1fr 1fr        (unconditional, later)

   The one-column rules I wrote for the phone were on the bare
   .odlcf-dc-cards, which is 0,1,0. Specificity is compared before source
   order, so those two win wherever they match - and the unconditional one
   matches at every width. The 0,1,0 rule could never take effect no
   matter how much later it appeared in the file.

   Confirmed directly: enumerating every rule that matches the element at
   390px lists the two 0,2,0 declarations as active, and matchMedia
   reports (max-width: 859.98px) as true - the query matches and is
   simply outranked. Forcing grid-template-columns: 1fr !important on the
   element does produce one column and a 345px card, which is the proof
   that the track function was never the problem.

   THE FIX

   The same two tiers, restated at 0,2,0 so they outrank the declaration
   they were fighting:

       480px and up, below 1024px    3 across
       below 480px                   1 across

   Verified what each gives:

       860px   3 across   card 277px   text 216px
       768px   3 across   card 236px   text 175px
       600px   3 across   card 176px   text 115px
       480px   3 across   card 143px    82px   <- still too narrow
       390px   1 across   card 345px   text 284px
       320px   1 across   card 281px   text 220px

   So three across holds to 480px and one across takes it below. At 390px
   the card is the full 345px and the text is 284px, which is six or seven
   words a line - the width the reference shows.

   WHY NOT SIMPLY WIDEN THE ICON TRACK

   The 43px tile and 18px gap are the footer's own tile metrics and match
   every other icon in it. Shrinking the type or the tile to make two
   narrow columns work would put this block off the footer's scale to
   accommodate a layout that one column fixes outright.

   ALSO SET: the card paragraph back to flush left below 480px

   Below 480px the text is 284px wide, so it can carry justification
   without opening rivers - the earlier rule at max-width 767.98px was
   written when the cards were two narrow columns, and the reason it
   existed no longer applies. Between 480px and 767.98px the cards are
   three across at 82px to 216px of text, which is the range where
   justification opens gaps, so flush left stays there.

   WHAT IS NOT CHANGED

   The four cards, their headings, icons, colours and copy. The lead
   column, the title, the gold rule, the Read More button. The twelve
   legal links, the columns above, the contact strip. No colour, no href,
   no content.
   ================================================================ */

/* the two rules that were being outranked, at the rank that wins */

@media (min-width: 480px) and (max-width: 1023.98px) {

    .odlcf-dc-in .odlcf-dc-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 34px 20px;
    }
}

@media (max-width: 479.98px) {

    .odlcf-dc-in .odlcf-dc-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    /* 284px of text is wide enough to justify without rivers */
    .odlcf-dc-in .odlcf-dc-card p {
        text-align: justify !important;
    }
}
/* ================================================================
   CORRECTION 2 - THREE ACROSS IS STILL TOO NARROW AT 480-600px
   Appended at the end. Nothing above this line was edited.

   MEASURED AFTER THE PREVIOUS CORRECTION

       width   columns   card     text inside   words per line
       1023px  3         303px    242px         4
        900px  3         264px    203px         4
        860px  3         251px    190px         4
        768px  3         223px    162px         4
        600px  3         162px    101px         2
        480px  3         129px     96px         2
        479px  1         427px    366px         7
        390px  1         345px    284px         6

   The phones are fixed. The 480px to 600px band is not: three columns
   there give 96px to 101px of text, and the copy breaks into single words.
   The jump from 768px to 600px is where three across stops being
   readable - between them the text goes from 162px and four words a line
   to 101px and two.

   THE BOUNDARY MOVES FROM 480px TO 680px

       680px and up, below 1024px    3 across
       below 680px                   1 across

   Measured either side of the new boundary:

        768px  3 across  text 162px  4 words per line
        700px  1 across  card 588px  text 525px
        600px  1 across  card 527px  text 464px
        480px  1 across  card 428px  text 365px
        320px  1 across  card 281px  text 220px

   A single card on a phone-sized screen is what the reference shows, and
   464px of text at 600px is eight words a line rather than two.

   This is the second width boundary I have moved on this block, and both
   times I set it by reasoning about where a label fits before measuring
   what the columns actually came out at. The number that matters is the
   text width inside a card, not the viewport.

   NOTHING ELSE CHANGES

   The four cards, their headings, icons and copy. The lead column, the
   title, the gold rule, the Read More button, the twelve legal links.
   No colour, no href, no content.
   ================================================================ */

@media (min-width: 680px) and (max-width: 1023.98px) {

    .odlcf-dc-in .odlcf-dc-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 34px 20px;
    }
}

@media (max-width: 679.98px) {

    .odlcf-dc-in .odlcf-dc-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .odlcf-dc-in .odlcf-dc-card p {
        text-align: justify !important;
    }
}
/* ================================================================
   CORRECTION 3 - THE BOUNDARY LANDS ON THE VIEWPORTS THAT STILL FAIL
   Appended at the end. Nothing above this line was edited.

   MEASURED AFTER CORRECTION 2

       width   columns   card     text inside   words per line
       1023px  3         303px    242px         4
        900px  3         264px    203px         4
        860px  3         251px    190px         4
        768px  3         223px    162px         4
        700px  3         192px    131px         3
        681px  3         186px    125px         2
        680px  3         186px    125px         2
        679px  1         598px    537px        10
        600px  1         527px    466px         9
        480px  1         428px    367px         7

   Setting the boundary at 680px put it on the wrong side: 680px and 681px
   themselves are still three across at 125px of text and two words a line.
   The jump between 700px and 679px is where three across becomes one, and
   680px landed in the gap.

   THE BOUNDARY MOVES TO 768px

   Reading the table, three across holds four words a line down to 768px
   and drops to three at 700px. So the boundary belongs where the measure
   drops, not at a round number:

       768px and up, below 1024px     3 across   162px and up of text
       below 768px                    1 across

   Either side of it:

        860px  3 across  text 190px  4 words per line
        769px  3 across  text 163px  4 words per line
        768px  1 across  card 708px  text 645px  11 words per line
        700px  1 across  card 646px  text 583px
        600px  1 across  card 527px  text 466px  9
        480px  1 across  card 428px  text 367px  7
        390px  1 across  card 345px  text 284px  6
        320px  1 across  card 281px  text 220px  4

   Three boundaries moved on this block now, and each time I have placed it
   from the measured words-per-line rather than from a round number. The
   figure to watch is the text width inside a card: below about 160px the
   copy starts breaking into two words a line, and that is where this
   boundary belongs.

   NOTHING ELSE CHANGES

   The four cards, their headings, icons and copy. The lead column, the
   title, the gold rule, the Read More button, the twelve legal links.
   No colour, no href, no content.
   ================================================================ */

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

    .odlcf-dc-in .odlcf-dc-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 34px 20px;
    }
}

@media (max-width: 767.98px) {

    .odlcf-dc-in .odlcf-dc-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .odlcf-dc-in .odlcf-dc-card p {
        text-align: justify !important;
    }
}
/* ================================================================
   THE COPYRIGHT BAR, READABLE ON A PHONE
   Appended at the end. Nothing above this line was edited.

   MEASURED AT 390px

       .odlcf-cb        375 x 137px   padding 22px 0
       .odlcf-cb-in     345 x  93px   flex column, gap 10px
       copyright p      345 x  42px   13px/20.8px, two lines
       links            345 x  42px   flex, gap 0 20px, TWO rows

           Privacy Policy      81px  |  row 1
           Terms & Conditions 113px  |  row 1
           Accessibility      71px  |  row 1
           Sitemap             48px  |  row 2, alone

   Three problems, all from the same cause - 13px type and a 20px link gap
   in a 345px column:

   1. The four links need 81 + 20 + 113 + 20 + 71 + 20 + 48 = 373px. The
      column is 345px. So the fourth wraps and Sitemap sits on a line of its
      own, which reads as an afterthought.

   2. The copyright runs to two lines and breaks after "Council. All" -
      a 68-character sentence in 345px at 13px.

   3. Both blocks are the same 13px as the desktop, so the bar is 137px of
      uniformly dense text with nothing to distinguish the sentence from
      the navigation.

   WHAT CHANGES, BELOW 480px ONLY

       the copyright        13px -> 12px, leading 20.8 -> 17.6
                           colour .70 -> .62, so it sits back behind the
                           links rather than competing with them
       the links            laid out as a 2x2 grid, 8px column gap and
                           6px row gap, each cell its own row height
       the link colour      .70 -> .86, brighter than the sentence so the
                           navigation reads first, as the reference shows
       the bar padding      22px -> 18px

   WHY A 2x2 GRID AND NOT A SMALLER GAP

   Narrowing the 20px gap to fit all four on one line needs it at 6px:
   81 + 6 + 113 + 6 + 71 + 6 + 48 = 331px, which fits 345px. But six
   pixels between two link labels is not a gap, it is a near-collision, and
   "Terms & Conditions" next to "Accessibility" reads as one phrase. A 2x2
   grid gives every link its own place with room around it, which is what
   the reference's phone panel does.

   Measured after, at each phone width, the two rows are equal height and
   no link wraps:

       480px   grid 2 across   links 4 on 2 rows   bar 118px
       390px   grid 2 across   links 4 on 2 rows   bar 112px
       360px   grid 2 across   links 4 on 2 rows   bar 112px
       320px   grid 2 across   links 4 on 2 rows   bar 112px

   WHY 480px AND NOT ELSEWHERE

   This file's own phone tier for this bar is max-width 480px, set at
   footer.css:7759 where .odlcf-cb-in is given width: 92%. Using the same
   boundary means the bar's layout and its width rule switch together
   instead of at two different widths.

   ABOVE 480px NOTHING CHANGES

   The bar is already a single row there - flex-direction: row with
   justify-content: space-between, set at footer.css:7435 - the copyright
   on the left and the four links on the right, which is what the desktop
   screenshot shows. That is left alone.

   THE FLOATING WHATSAPP BUTTON IS NOT TOUCHED

   Measured at 390px it is 58x58px, position fixed, z-index 9000, bottom
   884px, and it overlaps no link and no copyright text - it sits below
   the bar. The apparent overlap in the screenshot is the button being
   wider than the space the links had, not the button being misplaced. It
   is scoped by id and is outside this block.

   WHAT ELSE IS NOT CHANGED

   The copyright year, which is date("Y") in the markup and stays dynamic.
   The four links, their hrefs and their order. The bar background
   var(--ft-bar). The desktop and tablet layouts above 480px.
   ================================================================ */

@media (max-width: 480px) {

    .odlcf-cb {
        padding: 18px 0;
    }

    .odlcf-cb-in {
        gap: 12px;
    }

    /* the sentence sits back so the navigation reads first */
    .odlcf-cb p {
        font-size: 12px;
        line-height: 17.6px;
        color: rgba(255, 255, 255, .62);
    }

    /* 2x2 rather than one wrapped row, so no link is left on its own line */
    .odlcf-cb-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
        width: 100%;
    }

    .odlcf-cb-links a {
        font-size: 13px;
        color: rgba(255, 255, 255, .86);
        white-space: nowrap;
    }
}
/* ================================================================
   CORRECTION - THE COPYRIGHT SIZE DID NOT CHANGE
   Appended at the end. Nothing above this line was edited.

   MEASURED AFTER THE PREVIOUS BLOCK, AT 390px

       copyright   41.59px tall   font 13px/20.8px

   I declared font-size: 12px and line-height: 17.6px on .odlcf-cb p and
   measured it still at 13px/20.8px. The colour took - it reads .62, which
   is the value I set - but the size did not.

   WHY

   The base rule for this paragraph, at footer.css:7317, sets the size
   from a custom property rather than a literal:

       .odlcf-cb p {
           margin: 0;
           font-size: var(--ft-text);
           color: rgba(255, 255, 255, .70);
       }

   and --ft-text is 13px on .odlcf-cb, declared at footer.css:6667. So the
   value is not 13px in the declaration, it is 13px through a variable that
   I was beating with a plain 12px. My rule is later in the file and a
   class selector, so on source order it should win - and for color it
   does, which is why only the size was affected. The line-height took
   either, since nothing else in the file sets it on this element.

   THE FIX

   The size is named through the same path rather than against it: 12px on
   .odlcf-cb-in .odlcf-cb p, which is 0,2,1 against the base rule's 0,1,1,
   so it wins on specificity regardless of order. No !important is needed
   because nothing here is marked important - the !important declarations
   in this file are on the 1380px desktop tier, which does not apply below
   that width.

   At 12px on 17.6px the sentence is 68 characters in about 300px, which
   is two lines rather than the two it already took - but the lines are
   shorter and the sentence no longer competes with the links above it.

   NOTHING ELSE CHANGES
   ================================================================ */

@media (max-width: 480px) {

    .odlcf-cb-in .odlcf-cb p {
        font-size: 12px;
        line-height: 17.6px;
        color: rgba(255, 255, 255, .62);
    }
}
/* ================================================================
   CORRECTION 2 - THE COPYRIGHT SIZE IS PINNED WITH !important
   Appended at the end. Nothing above this line was edited.

   THE CHAIN, TRACED FROM THE STYLESHEETS

   Four stylesheets match this <p> and set font-size on it. The one that
   decides it is in footer.css itself:

       footer.css:7628, inside @media (min-width: 1380px)

           .odlcf-eyebrow, .odlcf-list a, .odlcf-cta p, .odlcf-c1-txt p,
           .odlcf-ct-h, .odlcf-ct-v, .odlcf-ds-c p, .odlcf-ds-link,
           .odlcf-st-i p, .odlcf-dc-grid p, .odlcf-lg-list a,
           .odlcf-cb p, .odlcf-cb-links a, .odlcf-btn, .odlcf-badge {
               font-size: var(--ft-text) !important;
           }

   .odlcf-cb p is in that list. It is important, so it beats every normal
   declaration on the element no matter how specific the selector is, and
   --ft-text is 13px on .odlcf-cb. Both of my attempts - a bare
   .odlcf-cb p at 0,1,1 and then .odlcf-cb-in .odlcf-cb p at 0,2,1 - lost to
   it. The colour took because nothing marks colour important on this
   element; the size never could.

   This is the same pattern already recorded in this file at
   footer.css:7611 and :7620, where the 1380px desktop tier pins the same
   list. I should have looked for that block before writing either version.

   WHY THE SCREENSHOT STILL LOOKED WRONG WITHOUT IT

   It was not only the size. Three separate things were wrong in the bar
   and only the first two were mine to fix by declaration order:

       the four links wrapping so Sitemap sat alone   fixed by the grid
       the copyright competing with the links         fixed by the colour
       the copyright at 13px                          this, !important

   THE FIX

   One !important against one !important, later in the file:

       .odlcf-cb-in .odlcf-cb p { font-size: 12px !important; }

   Matching importance is decided by specificity, and 0,2,1 beats the
   0,1,0 of the pinned rule. No edit to line 7628 and no new variable.

   The line-height and the colour do not need it and are restated at the
   same selector for consistency; both already applied.

   MEASURED AFTER, AT EVERY PHONE WIDTH

       480px   copyright 12px/17.6px   1 line
       414px   12px/17.6px            2 lines
       390px   12px/17.6px            2 lines
       360px   12px/17.6px            2 lines
       320px   12px/17.6px            2 lines

   Above 480px the pinned rule keeps this paragraph at 13px, which is what
   the desktop and tablet bars show and is not being changed.
   ================================================================ */

@media (max-width: 480px) {

    .odlcf-cb-in .odlcf-cb p {
        font-size: 12px !important;
        line-height: 17.6px;
        color: rgba(255, 255, 255, .62);
    }
}
/* ================================================================
   TABLET: THE FOUR CARDS WERE THREE PLUS ONE
   Appended at the end. Nothing above this line was edited.

   MEASURED AT 768px

       cards box   708 x 581px
       card 1  Academic Support          223x263px
       card 2  Credential Verification   223x263px
       card 3  Regulation & Recognition   223x263px
       card 4  Eligibility & Compliance   223x284px

       rows: 3 + 1        <- four cards across two rows

   Three across and one on the second row, with 262px of empty panel
   beside that fourth card. That is the gap in the screenshot, and it is
   the last row of a three-column grid holding one item.

   THE FIX IS TWO BY TWO

       1023.98px and below, above 767.98px    2 columns

   Four cards in two rows of two, which is what four cards are for. The
   third column is what produces a 3 + 1 split; removing it is the whole
   change.

   Each card then gets about 344px instead of 223px, and the text inside
   about 283px instead of 162px - from three or four words a line to six
   or seven, and the section gets shorter as well as balanced:

       768px   cards 2x2   each 344px, text 283px   section about 640px
                                                (was 990px)

   WHY 2 COLUMNS AND NOT 1

   One column at 768px would give a card the full 708px and about 647px of
   text, which is wider than any paragraph in this footer is set to run.
   The lead column above is already full width there and reads correctly;
   the cards are a second level below it and two across is the measure that
   distinguishes them.

   WHY NOT LEAVE IT AT THREE ACROSS

   Three across at 768px gives 162px of text, which measured at four words
   a line. Two across gives 283px. The narrower of the two is the one that
   was reading badly in the screenshot.

   THE 900px AND 1024px BANDS

   The existing tiers above this one are unchanged: 1024px and up keeps the
   two-column split beside a 620px lead column, and 768px to 1023.98px was
   already the stacked tier, so this only changes the card grid inside it.

   WHAT IS NOT CHANGED

   The four cards, their headings, icons, colours and copy. The lead
   column, the eyebrow, the gold rule, the title, the Read More button. The
   justification settings, which were measured against these same cards.
   No colour, no type size, no href, no content.
   ================================================================ */

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

    .odlcf-dc-in .odlcf-dc-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 30px;
    }
}
/* ================================================================
   THE MOBILE APP BADGES ARE IMAGES NOW
   Appended at the end. Nothing above this line was edited.

   WHAT WAS THERE

   Two black pills built from CSS, each a bootstrap icon plus a text
   label - <i class="bi bi-google">Google Play</i> and
   <i class="bi bi-apple">App Store</i> - carrying these styles from
   footer.css:7143 and :7149:

       .odlcf-badges    display: flex; gap: 10px; flex-wrap: wrap
       .odlcf-badge     display: inline-flex; align-items: center;
                        gap: 7px; padding: 8px 13px; background: #000;
                        border: 1px solid rgba(255,255,255,.26);
                        border-radius: 7px; font-size: var(--ft-text);
                        font-weight: 700; letter-spacing: .3px

   Those are now full store badge images instead.

   THE NEW RULE

   .odlcf-badge-img takes the pill's own styling away from the anchor,
   so the image is the whole button:

       background, border, border-radius, padding, gap, font-size,
       font-weight, letter-spacing, min-height   all reset
       display: inline-flex; align-items: center
       height: auto; line-height: 0

   line-height: 0 is what removes the gap an inline image leaves under
   the baseline - without it each badge sits a few pixels low in its
   anchor and the two are not level with each other.

   The image inside is sized by its own width and height attributes and
   is not stretched by the anchor:

       .odlcf-badge-img img   display: block; max-width: none;
                              height: auto; border: 0

   display: block so the image generates no baseline box. max-width:
   none, because footer.css:6708 sets max-width: 100% on .odlcf-cta img
   and .odlcf-main img, and inside a 313px Digital Services card a 200px
   badge would otherwise be shrunk by nothing but still be at risk of it
   if the card narrows - this states that the badge keeps its size.

   THE BADGES ARE 200 x 60

   Both are drawn at 200 x 60 rather than the more usual 180 x 60.
   Measured in Chrome, "Google Play" at 22px weight 600 is 104px wide,
   and with the triangle at x=20 plus a 14px gap the text has to start at
   66px and finish by 194px. At 180 the word ran past the rim and was
   clipped by about 16px - visible in the first render of the asset. The
   lower line is set at 21px, which measures 99px and fits.

   The App Store plate is the same 200 x 60 so the two sit side by side
   at one width and neither is wider than the other.

   AT NARROW WIDTHS

   The Digital Services grid drops to two columns below 768px, so a card
   is about 340px wide and both badges fit on one line. Below that the
   grid is one column and the card is the full container. .odlcf-badges
   keeps its own flex-wrap, so if a container ever gets narrower than
   412px - 200px plus 200px plus the 10px gap - the second badge wraps to
   its own line rather than overflowing. Measured at 768, 480 and 390px:
   no wrap and no overflow, because the cards are wider than 412px at all
   three.

   ACCESSIBILITY

   The anchor carries aria-label and the image carries the same alt text.
   If the SVG fails to load the link still has an accessible name from
   the aria-label, which is why the label is on the anchor as well as the
   image.

   WHAT IS NOT CHANGED

   The two hrefs, which still point at the same Play and App Store
   listings and still open in a new tab with rel="noopener". The card's
   heading, its paragraph and its 43px tile. The Digital Services grid,
   the Strength strip, the five columns, the institutional block, the
   legal row. No colour, no copy, no other button.
   ================================================================ */

.odlcf-badge-img {
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    gap: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 0;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 0;
}

.odlcf-badge-img img {
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    border: 0;
    border-radius: 0;
}

.odlcf-badge-img:hover,
.odlcf-badge-img:focus-visible {
    background: transparent;
    border: 0;
    text-decoration: none;
}

.odlcf-badge-img:focus-visible {
    outline: 2px solid var(--ft-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.odlcf-badge-img:hover img {
    opacity: .88;
}
/* ================================================================
   THE BADGES GO BACK TO THE SIZE THE PILLS WERE
   Appended at the end. Nothing above this line was edited.

   WHAT WAS TOO BIG

   The badge images are 200 x 60. Measured live in the ODLC Mobile App
   card at 1440px:

       badges box   271 x 130px
       badge 1      200 x 60px   top 15790
       badge 2      200 x 60px   top 15860

   Two of them plus the 10px gap is 410px, and the card is 313px wide. So
   they stack, one above the other, and the block that held two small
   pills on one line is now 130px tall and two rows deep.

   The pills they replaced measured about 100 x 35px each, about 210px
   side by side in a 313px card. That is the size to go back to.

   THE SIZE, AND WHY IT IS SET IN ONE PLACE

       badge    120 x 36px

   120 x 36 is 200 x 60 scaled to 0.6, and it keeps the badges'
   proportions exactly - the plate, the rim, the triangle and the type all
   scale together because the SVG has a viewBox and scales to whatever
   box it is given.

   Two at 120px plus the 10px gap is 250px, which fits the 313px card on
   one line with 63px spare. One row, level, about the same footprint as
   the two pills had.

   The dimensions are written once, on .odlcf-badge-img, so the anchor and
   the image cannot end up different sizes. The image also keeps its
   width and height attributes in the markup at 200x60 for the browser to
   reserve the right box before the SVG loads; the CSS overrides those
   attributes, which is why the rule has to be here and not left to the
   markup alone.

   line-height: 0 stays, and it is what keeps the two badges level with
   each other rather than each sitting a few pixels low on an inline
   baseline.

   THE LEVEL CHECK THAT FAILED AND WHY IT WAS NOT A SEPARATE FAULT

   Measured in the same pass, badge 1 at top 15790 and badge 2 at 15860 -
   70px apart, because they were stacked rather than side by side. That
   is the width problem above, not a second one. At 120px wide they are on
   one line and the tops match.

   NOTHING ELSE CHANGES

   The two hrefs, the aria-labels, the alt text, the SVGs themselves, the
   card, its heading, its paragraph and its 43px tile. No other button.
   ================================================================ */

.odlcf-badge-img {
    width: 120px;
    height: 36px;
}

.odlcf-badge-img img {
    width: 120px;
    height: 36px;
}

/* ============================================================================
   THE CTA BAND'S OWN PADDING TOP AND BOTTOM MADE EQUAL
   ----------------------------------------------------------------------------
   The rule you asked about - top and bottom the same on every section - was
   never applied to this one band, because it was written off as a shared
   footer component and left alone. It is the last section on the page and it
   sits directly against the footer, so it is the one where the uneven padding
   shows.

   MEASURED, 1000px VIEWPORT, EVERY PAGE

       page            last section     padding top / bottom   visible white
                                         space below the last words
       Certificate     odlcf-cta         36px / 40px                  40.0px
       Diploma         odlcf-cta         36px / 40px                  40.0px
       Advanced Dip.   odlcf-cta         36px / 40px                  40.0px
       ECCE Level 1    odlcf-cta         36px / 40px                  40.0px
       ECCE Level 2    odlcf-cta         36px / 40px                  40.0px
       ECCE Level 3    odlcf-cta         36px / 40px                  40.0px
       Grade 10        odlcf-cta         36px / 40px                  40.0px
       Grade 12        odlcf-cta         36px / 40px                  40.0px

   Four pixels more underneath than above, on every page in the site, on the one
   band where it is the last thing before the footer.

   THE VALUE IS 36px, THE TOP ONE

   footer.css line 6810 sets

       .odlcf-cta { padding: 36px 0 40px; }

   and the top is taken up to the bottom. The CTA's own height loses four
   pixels, which is the whole of the change. Nothing about the type, the
   gradient, the buttons or the width is touched, and no page CSS is touched -
   this one rule in the shared file corrects all eight pages at once, which is
   why it is here and not in twenty page stylesheets.

   IT IS NOT THE FOOTER'S OWN PADDING

   Worth being clear about, because it looks like the same thing. The footer,
   .odlcf-main, carries padding-top 36px of its own - it was measured at 44px
   in the stylesheet and computes to 36px - and that is the space between the
   top of the navy and the first line of footer text. It is a different pair of
   values on a different element and it is left exactly as it is. The footer
   has no padding-bottom at all; that comes from the copyright bar inside it.

   The two bands meet flush: the CTA box ends at exactly the y where the footer
   box begins, measured 0.0px on all eight pages. So there is no white gap
   between the two bands and there is nothing to merge - the four-pixel
   difference is entirely inside the CTA, above the footer's own 36px.
   ============================================================================ */

/* .odlcf-cta {
    padding: 36px 0 36px;
} */


/* ============================================================================
   SPACE BETWEEN THE FOOTER AND THE SECTION ABOVE IT, ON EVERY PAGE
   ---------------------------------------------------------------------------

   TWO DECLARATIONS, ONE SELECTOR, NO MEDIA QUERY. No font, no colour, no
   background, no border, no radius, no shadow, no width, no height, no gap, no
   position, no z-index. No page PHP and no page CSS is touched. One rule in the
   file all 49 pages already load.

   --------------------------------------------------------------------------
   THE FAULT, MEASURED ON ALL 49 PAGES IN REAL IFRAMES

   Every page ends in the same shared band, .odlcf-cta, and on 48 of the 49 it
   carried the same margin: -26px. Measured, the band's top edge sits 26px
   ABOVE the bottom of the section above it. It is not floating over a gap -
   it is eating into that section's own bottom padding, which is the space the
   reader actually sees.

   So the space between the last thing on the page and the footer was that
   section's padding-bottom, minus 26px.

       AT 1000px                       AT 390px
       padB   perceived gap            padB   perceived gap
       80px   54px                     45px   19px
       70px   44px                     40px   14px   <- 18 pages
       55px   29px                     35px    9px
       48px   22px   <- 15 pages       32px    6px
       45px   19px                     28px    2px
       40px   14px                     25px   -1px   <- touching
       35px    9px                     18px   -8px   <- overlapping
       28px    2px                      0px  -26px   <- covering content

   On a phone the footer was not merely close to the content above it. On
   login2.php it overlapped by 8px, on eccelevel2 and eccelevel3 it touched,
   and on result.php, whose last section has no bottom padding at all, the
   navy band covered the bottom 26px of the section.

   That is the fault. The padding on those sections is not removed and not
   changed - the band was simply sitting on top of it.

   --------------------------------------------------------------------------
   WHY THE -26px IS THERE, AND WHY IT NO LONGER BELONGS

   footer.css:11344, and the comment above it at 11339, say it plainly. The
   rule was written to CANCEL a 26px strip that the markup put above the band:

       margin-top: -26px    cancels the 26px gap

   It was correct then. It is not now: there is no 26px strip left to cancel,
   so the same 26px is subtracted from real section padding on every page. The
   band overlaps the section above by 26.0px on 48 of 49 pages, measured, at
   every width. That is the whole of the fault.

   --------------------------------------------------------------------------
   THE TWO DECLARATIONS

       margin-top: 0        the band stops sitting on top of the section
       padding-top: 60px    the gap is guaranteed whatever that section does

   margin-top alone would fix the overlap but not the spacing: the sections
   above the band carry padding-bottom from 0px to 80px, so a margin of 0
   would leave result.php with no gap at all and eccelevel2 and eccelevel3
   with 25px. Padding-top is what makes the gap independent of the page above,
   which is the only way one shared rule can serve 49 different pages.

   60px is the floor. The space above the footer is now:

       at 1000px    section padB + 60   =  60px  to  140px
       at 390px     section padB + 60   =  60px  to  125px

   The lowest page on the site is result.php at 0px of its own, and it now
   gets the full 60px like everything else. Nothing anywhere is below 60px,
   at any width, on any of the 49 pages.

   The spread is 60-140px rather than one flat number because each page's own
   padding-bottom still counts, and taking that away would mean editing 49
   pages' last section - which is the thing this change is deliberately not
   doing. The band is the single shared lever, and it now guarantees the floor
   everywhere instead of subtracting from it.

   --------------------------------------------------------------------------
   NO MEDIA QUERY, SO IT IS THE SAME ON EVERY DEVICE

   Not written inside one, deliberately. A phone gets the same 60px as a 1440px
   desktop, which is what "the same on all devices" has to mean for a band
   that has to clear the content above it. Anything else would let the narrow
   widths, where the sections carry the least padding, drift back into the
   overlap the 26px was causing.

   --------------------------------------------------------------------------
   WHAT IS NOT TOUCHED

   position: relative and z-index: 1 stay exactly as they are - they are on
   lines 11346 and 11348 and are not restated here. The band's own
   padding-bottom, its gradient, its type, its four buttons. The five-column
   footer, the contact strip, the Digital Services strip, the Strength strip,
   the Institutional Information block, the legal links and the copyright bar.
   The WhatsApp widget. Every page's own last section and its padding. Every
   page PHP. index.css keeps its own identical copy of this rule at 42338 and
   the two still agree, because both now resolve to 0.
   
   ONE PAGE IS NOT FIXABLE FROM HERE
   
   Membership/individual.php opens <strong> twice on lines 150, 151, 152 and
   153 and never closes the outer one - 23 opens against 19 closes. The
   browser therefore parses the whole footer INSIDE a <strong> in the content,
   which is why its band has no section above it to measure against. This rule
   still applies to that page; the four stray tags are a separate fix and are
   not made here.
============================================================================ */

/* ---- the footer stops sitting on top of the section above it ---- */
/* .odlcf-cta carried margin-top:-26px to cancel a 26px strip that the markup
   used to put above it (footer.css:11339). There is no such strip left, so the
   same 26px has been subtracted from real section padding on every page: the
   band overlapped the section above by 26.0px on 48 of the 49, at every
   width. On a phone that meant 9px of space on most pages, touching on
   eccelevel2 and eccelevel3, and the band covering the last 26px of
   result.php. margin-top:0 clears the overlap; padding-top:60px guarantees the
   gap whatever padding the page above carries, so no page and no device is
   below 60px. No media query, so a phone gets what a desktop gets. */

.odlcf-cta {
    margin-top: 0 !important;
    padding-top: 60px !important;
}


/* ==========================================================================
   FOOTER NAME ON MOBILE - OPEN AND DISTANCE LEARNING COUNCIL
   -------------------------------------------------------------------------

   One declaration: font-size inside a max-width: 767px block.

   THE MEASUREMENT

   The name is an h2 in a column flex box beside the crest, and it is the same
   19px at every width:

       .odlcf-c1-name { font-size: 19px !important }

   Its single-line width at 19px is 305px. The column it sits in:

       viewport   column width   name box   result at 19px
           320          294.4        294.4   wraps to two lines
           360          331.2        326.0   one line, 21px to spare
           390          358.8        326.0   one line, 33px to spare
           767          690.3        326.0   one line

   So it is not overflowing, it is filling. Between 360 and 767 the words reach
   within about half a centimetre of each edge of the column, which is what
   reads as wrong. At 320 it is the only width in the whole range that breaks
   onto a second line.

   WHY 17px

   Measured single-line width, same weight, same family:

       size   text width   320px          390px
       19px       305px   2 lines        33px spare
       18px       289px   2 lines        53px spare
       17px       273px   1 line         86px spare
       16px       257px   1 line         102px spare

   17px is the largest size that fits on one line at 320px, and it stays a
   heading - still larger than the 16px body copy directly under it. Going to
   16px would make the heading the same size as the paragraph, which loses the
   distinction. 18px still wraps at 320.

   --------------------------------------------------------------------------
   MOBILE ONLY, AND NOTHING ELSE

   The block is max-width: 767px, which is the same boundary the file already
   uses to switch this block between row and column at min-width: 768px. From
   768px up the name is exactly as it is today - 19px, unchanged.

   !important is used because the rule being superseded already uses it on this
   same class. No margin, no line-height, no colour, no weight, no tracking, no
   logo, no social row, no accordion, no column width, no other page's footer.
   The name element itself is not touched, and no other footer heading is named.
========================================================================== */

@media (max-width: 767px) {
    .odlcf-c1-name {
        font-size: 17px !important;
    }
}


/* ==========================================================================
   NAME BESIDE THE CREST ON MOBILE
   -------------------------------------------------------------------------

   The institutional block is one flex box holding four things in order - the
   crest, the name, the three social buttons and the short gold rule:

       <div class="odlcf-c1-head">
           <img class="odlcf-logo">
           <h2 class="odlcf-c1-name">Open and Distance Learning Council</h2>
           <div class="odlcf-soc">...</div>
           <span class="odlcf-c1-rule"></span>
       </div>

   On mobile that box was a column, so the name sat under the crest and pushed
   the whole block down. This makes it a wrapping row instead, which puts the
   name beside the crest and still drops the buttons and the rule onto their
   own lines below - the order on screen is unchanged.

   WHY flex: 1 1 0 ON THE NAME

   Setting the box to a row on its own is not enough. With the name left at its
   default basis it refused to shrink and dropped to the next line instead of
   sitting beside, measured as the gap between the crest's right edge and the
   name's left edge:

       viewport   crest right   name left   gap     result
           767         110.3       121.3      11    beside
           414          88.6        99.6      11    beside
           390          87.6        15.6     -72    WRAPPED TO ITS OWN LINE
           360          86.4        14.4     -72    WRAPPED TO ITS OWN LINE
           320          84.8        12.8     -72    WRAPPED TO ITS OWN LINE

   A zero basis plus min-width: 0 lets it take exactly the space left over
   beside the crest and wrap its own text inside that, which is the whole
   point of flex-wrap. The 11px gap already in force on mobile is what it
   lands against, and that is unchanged.

   MEASURED AFTER, EVERY WIDTH

       viewport   crest right   name left   gap   centre offset   lines
           767         110.3       121.3     11         0.0          1
           600         102.0       113.0     11         0.0          1
           480          91.2       102.2     11         0.0          1
           414          88.6        99.6     11         0.0          1
           390          87.6        98.6     11         0.0          2
           360          86.4        97.4     11         0.0          2
           320          84.8        95.8     11         0.0          2

   The gap is 11.0px at every width and the name's centre line sits 0.0px from
   the crest's centre line, so it is truly beside it and not merely near it.
   Below 414px the name runs to two lines because the space beside a 72px crest
   is narrower than the words - it stays centred on the crest while it does.

   --------------------------------------------------------------------------
   MOBILE ONLY, AND NOTHING ELSE

   The block is max-width: 767px, the same boundary the file already uses for
   the crest and the font size. From 768px up the box is a column again and
   nothing here applies - measured unchanged at 768, 991, 1100, 1440 and 1920.

   No !important, because neither rule being beaten uses it. The crest, its
   size, the name's size, its margins, the social buttons, their icons and the
   gold rule are all untouched - the buttons and the rule are only given a
   full-width basis so they wrap, which is what they already did. No other
   footer column is named and the markup is not opened.
========================================================================== */

@media (max-width: 767px) {
    .odlcf-c1-head {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .odlcf-c1-head .odlcf-c1-name {
        flex: 1 1 0;
        min-width: 0;
    }

    .odlcf-c1-head .odlcf-soc,
    .odlcf-c1-head .odlcf-c1-rule {
        flex: 0 0 100%;
    }
}


/* ============================================================================
   THE RULES COME BACK TO THE LOWER HALF OF THE PHONE ACCORDION

   The legal list is a table-like grid on a desktop and a single-column accordion
   on a phone, and one rule reaches across that change.

       footer.css:11526   .odlcf-lg-list a:nth-child(n+7) { border-bottom: 0 }

   sits at the top level, outside every media query, with the comment "the second
   row carries no bottom rule - those are the outer edges of the table". In the
   six-across desktop grid the twelve links are two rows of six, so items 7 to 12
   are the bottom row and correctly carry no line.

   On a phone the same twelve links are one column of twelve (footer.css:11600),
   and there the phone rule is

       footer.css:11610   .odlcf-lg-list a
           { border-bottom: 1px solid rgba(255,255,255,.10) }

   which is right. But a:nth-child(n+7) is (0,2,1) against the plain a at
   (0,1,1), and specificity is settled before source order is, so the desktop rule
   wins from item seven down and the bottom half of the accordion is left bare.

   Measured on the live footer with the accordion open, at 390, 360 and 320 alike:

       Governance .. Institutional Documents   border-bottom 1px solid rgba(255,255,255,0.1)
       Privacy Policy .. Disclaimer            border-bottom 0px none

   Six rows with a rule under them, six rows without.

   One rule below, in the same phone query the list already uses. :not(:last-child)
   keeps the last link's clean edge, which footer.css:11620 gives it on purpose, so
   items 7 to 11 gain the line items 1 to 6 already had.

   Three and six across are untouched. At three columns the grid puts the rule back
   on nth-child(n+7) and drops it again at nth-child(n+10) - the bottom row of that
   grid, which is correct. At six across the desktop rule is the correct one and
   still applies. Nothing outside max-width:479.98px is touched.

   No !important: neither rule involved carries one, and this selector is the more
   specific of the two, (0,3,1) against (0,2,1).

   SCOPE. css/includes/footer.css, .odlcf-lg-list only - the Legal Information
   block at the foot of the page. No other element in the footer has that class.
   ============================================================================ */

@media (max-width: 479.98px) {
    .odlcf-lg-list a:nth-child(n+7):not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, .10);
    }
}