/*==========================
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;
    }

} 


/* =========================================
   ABOUT PAGE CONTENT JUSTIFICATION
========================================= */

.about-page-banner p,
.who-content p,
.legal-content p,
.vision-quote p,
.mission-item p,
.odlc-card-body p,
.founder-text p {
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.8;
}

.odlc-card-body li {
    text-align: justify;
    line-height: 1.7;
}


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

@media (max-width: 768px) {

    .about-page-banner p,
    .who-content p,
    .legal-content p,
    .vision-quote p,
    .mission-item p,
    .odlc-card-body p,
    .founder-text p {
        text-align: justify;
        line-height: 1.7;
    }

    .odlc-card-body li {
        text-align: justify;
        line-height: 1.6;
    }

}

/* =========================================================
   ABOUT PAGE BANNER
========================================================= */

.about-page-banner {
    width: 100%;
    height: 520px;

    display: grid;
    grid-template-columns: 55% 45%;

    position: relative;
    overflow: hidden;

    background: #083C7C;

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


/* =========================================================
   LEFT BLUE CONTENT
========================================================= */

.banner-left {
    width: 100%;
    height: 100%;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 60px 70px 60px 9%;

    background: #083C7C;

    color: #ffffff;

    position: relative;
    z-index: 5;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.banner-right {
    width: 100%;
    height: 100%;

    position: relative;

    overflow: hidden;

    z-index: 2;
}


.banner-right img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: transform 0.7s ease;
}


.about-page-banner:hover .banner-right img {
    transform: scale(1.03);
}


/* =========================================================
   CURVED TRANSITION BETWEEN BLUE + IMAGE
========================================================= */

.banner-right {
    clip-path: ellipse(
        100% 100% at 100% 50%
    );
}


/* Blue curve extending into image */

/* .banner-right::before {
    content: "";

    position: absolute;

    left: -85px;
    top: -10px;

    width: 130px;
    height: calc(100% + 20px);

    background: #083C7C;

    border-radius: 0 55% 55% 0;

    z-index: 3;
} */


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.banner-dots {
    position: absolute;

    left: 48px;
    top: 55px;

    width: 75px;
    height: 75px;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,0.45) 1.5px,
            transparent 1.7px
        );

    background-size: 14px 14px;

    opacity: 0.8;

    z-index: 8;

    pointer-events: none;
}


/* =========================================================
   BADGE
========================================================= */

.banner-badge {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 20px;

    margin-bottom: 25px;

    border: 1px solid rgba(255,255,255,0.35);

    border-radius: 30px;

    background: rgba(255,255,255,0.10);

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 0.3px;

    backdrop-filter: blur(5px);

    animation: bannerFadeUp 0.7s ease both;
}


.banner-badge i {
    font-size: 18px;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.banner-left h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(42px, 5vw, 68px);

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -1.5px;

    white-space: normal;

    animation: bannerFadeUp 0.8s ease 0.1s both;
}


/* =========================================================
   UNDERLINE
========================================================= */

.banner-underline {
    width: 95px;
    height: 4px;

    margin: 25px 0 20px;

    background: #ffffff;

    border-radius: 10px;

    animation: bannerLine 0.7s ease 0.25s both;
}


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

.banner-left p {
    width: 100%;
    max-width: 680px;

    margin: 0;

    color: rgba(255,255,255,0.94);

    font-size: 16px;

    line-height: 1.7;

    font-weight: 400;

    animation: bannerFadeUp 0.8s ease 0.35s both;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes bannerFadeUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

}


@keyframes bannerLine {

    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 95px;
        opacity: 1;
    }

}


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

@media (max-width: 1100px) {

    .about-page-banner {
        height: 460px;

        grid-template-columns: 55% 45%;
    }

    .banner-left {
        padding: 50px 40px 50px 7%;
    }

    .banner-left h1 {
        font-size: 48px;
    }

    .banner-left p {
        font-size: 15px;
    }

}


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

@media (max-width: 767px) {

    .about-page-banner {
        height: auto;

        display: flex;
        flex-direction: column;
    }


    .banner-left {
        width: 100%;
        height: auto;

        min-height: 360px;

        padding: 60px 25px 45px;
    }


    .banner-right {
        width: 100%;
        height: 280px;

        clip-path: none;
    }


    .banner-right::before {
        display: none;
    }


    .banner-left h1 {
        font-size: clamp(36px, 9vw, 48px);

        line-height: 1.12;
    }


    .banner-left p {
        font-size: 14px;

        line-height: 1.65;
    }


    .banner-badge {
        font-size: 13px;

        padding: 9px 16px;
    }


    .banner-dots {
        left: 20px;
        top: 25px;

        width: 60px;
        height: 60px;

        background-size: 11px 11px;
    }

}


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

@media (max-width: 480px) {

    .banner-left {
        min-height: 330px;

        padding: 50px 20px 40px;
    }


    .banner-left h1 {
        font-size: 34px;
    }


    .banner-left p {
        font-size: 13px;
    }


    .banner-right {
        height: 230px;
    }

}




/* =========================================================
   WHO WE ARE SECTION
========================================================= */

.who-we-are-section {

    position: relative;

    width: 100%;

    padding: 75px 0 85px;

    overflow: hidden;

    background: #FFFFFF;
}


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

.who-content {
    position: relative;
    z-index: 2;
}


/* Small heading */

.who-label {

    display: block;

    margin-bottom: 12px;

    color: #083C7C;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


/* Small line */

.who-line {

    width: 38px;

    height: 3px;

    margin-bottom: 18px;

    background: #083C7C;

    border-radius: 10px;
}


/* Main heading */

.who-content h2 {

    margin: 0;

    color: #083C7C;

    font-size: clamp(30px, 3vw, 42px);

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -0.5px;
}


/* Yellow/blue style accent converted to your primary color */

.who-accent {

    position: relative;

    width: 100%;

    max-width: 330px;

    height: 1px;

    margin: 20px 0 22px;

    background: rgba(58, 79, 102, 0.18);
}


.who-accent::before {

    content: "";

    position: absolute;

    left: 0;

    top: -3px;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #083C7C;
}


/* Paragraph */

.who-content p {
    max-width: 650px;
    margin: 0 0 24px 0;

    color: #083C7C;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;

    line-height: 1.8;

    text-align: left;
    letter-spacing: 0;
}


/* Bold content */

.who-content strong {

    color: #083C7C;

    font-weight: 700;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.who-image-wrapper {

    position: relative;

    width: 100%;

    min-height: 480px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* Decorative background */

/* .who-image-bg {

    position: absolute;

    top: 0;

    right: -10px;

    width: 90%;

    height: 92%;

    border-radius: 35px;

    background: #083C7C !important;

    z-index: 0;
} */




/* Image container */

.who-image {

    position: relative;

    width: 92%;

    height: 455px;

    overflow: hidden;

    margin-left: auto;

    border-radius: 25px;

    z-index: 2;

    box-shadow:
        0 15px 35px rgba(58, 79, 102, 0.12);
}


/* Image */

.who-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    border-radius: 40px;

    border: 9px solid #083C7C !important;

    transition: transform 0.5s ease;
}


/* Subtle hover */

.who-image:hover img {

    transform: scale(1.03);
}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.who-we-are-section::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 15px;

    width: 70px;

    height: 55px;

    opacity: 0.35;

    background-image:
        radial-gradient(
            #3A4F66 1.5px,
            transparent 1.5px
        );

    background-size: 12px 12px;
}


.who-we-are-section::after {

    content: "";

    position: absolute;

    right: 15px;

    top: 15px;

    width: 70px;

    height: 55px;

    opacity: 0.25;

    background-image:
        radial-gradient(
            #3A4F66 1.5px,
            transparent 1.5px
        );

    background-size: 12px 12px;
}


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

@media (min-width: 1200px) {

    .container {
        max-width: 1200px;
    }

}


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

@media (max-width: 991.98px) {

    .who-we-are-section {

        padding: 65px 0 70px;
    }


    .who-content h2 {

        font-size: 34px;
    }


    .who-image-wrapper {

        min-height: 420px;

        margin-top: 10px;
    }


    .who-image {

        width: 95%;

        height: 400px;
    }

}


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

@media (max-width: 767.98px) {

    .who-we-are-section {

        padding: 50px 0 60px;
    }


    .container {

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


    .who-content h2 {

        font-size: 30px;

        line-height: 1.2;
    }


    .who-content p {

        font-size: 15px;

        line-height: 1.65;
    }


    .who-image-wrapper {

        min-height: 320px;

        margin-top: 10px;
    }


    .who-image-bg {

        width: 92%;

        height: 90%;

        right: 0;

        border-radius: 25px;
    }


    .who-image {

        width: 94%;

        height: 320px;

        border-radius: 20px;
    }


    .who-we-are-section::before,
    .who-we-are-section::after {

        display: none;
    }

}


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

@media (max-width: 480px) {

    .who-we-are-section {

        padding: 40px 0 50px;
    }


    .who-content h2 {

        font-size: 27px;
    }


    .who-label {

        font-size: 12px;
    }


    .who-content p {

        font-size: 14px;
    }


    .who-image-wrapper {

        min-height: 280px;
    }


    .who-image {

        height: 280px;

        width: 100%;
    }

}


/* =========================================================
   LEGAL STATUS & INSTITUTIONAL STANDING
========================================================= */

.legal-standing-section {
    position: relative;
    width: 100%;
    padding: 80px 0;
    overflow: hidden;
    background: #FFFFFF;
    color: #083C7C;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.legal-image-wrapper {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
}


/* Decorative blue shape */

.legal-blue-shape {
    position: absolute;
    left: -25px;
    bottom: -20px;
    width: 230px;
    height: 260px;

    background: #083C7C;

    border-radius: 0 150px 0 0;

    z-index: 0;
}


/* Image */

.legal-image {
    position: relative;
    width: 92%;
    height: 450px;

    overflow: hidden;

    border-radius: 28px 28px 28px 0;

    z-index: 2;

    box-shadow:
        0 15px 35px rgba(58, 79, 102, 0.12);
}


.legal-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: transform 0.5s ease;
}


.legal-image:hover img {
    transform: scale(1.03);
}


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

.legal-content {
    position: relative;
    padding: 10px 25px 10px 20px;
}


/* Small label */

.legal-label {
    display: inline-block;

    margin-bottom: 12px;

    color: #083C7C;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* Heading */

.legal-content h2 {
    margin: 0;

    color: #083C7C;

    font-size: clamp(34px, 4vw, 48px);

    font-weight: 700;

    line-height: 1.12;

    letter-spacing: -0.6px;

    text-transform: uppercase;
}


/* Accent line */

.legal-line {
    position: relative;

    width: 48px;
    height: 4px;

    margin: 22px 0 25px;

    background: #083C7C;

    border-radius: 10px;
}


.legal-line::after {
    content: "";

    position: absolute;

    right: -7px;
    top: 50%;

    width: 7px;
    height: 7px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #083C7C;
}


/* Paragraph */

.legal-content p {
    margin: 0 0 24px;

    color: #083C7C;

    font-size: 16px;

    line-height: 1.75;
}


.legal-content strong {
    color: #083C7C;

    font-weight: 700;
}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.legal-standing-section::before {
    content: "";

    position: absolute;

    top: 20px;
    right: 25px;

    width: 75px;
    height: 55px;

    opacity: 0.22;

    background-image:
        radial-gradient(
            #3A4F66 1.5px,
            transparent 1.5px
        );

    background-size: 12px 12px;
}


.legal-standing-section::after {
    content: "";

    position: absolute;

    right: 25px;
    bottom: 25px;

    width: 75px;
    height: 55px;

    opacity: 0.18;

    background-image:
        radial-gradient(
            #3A4F66 1.5px,
            transparent 1.5px
        );

    background-size: 12px 12px;
}


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

@media (max-width: 991.98px) {

    .legal-standing-section {
        padding: 65px 0;
    }

    .legal-image-wrapper {
        min-height: 430px;
    }

    .legal-image {
        width: 95%;
        height: 400px;
    }

    .legal-content {
        padding: 10px 0;
    }

    .legal-content h2 {
        font-size: 38px;
    }

}


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

@media (max-width: 767.98px) {

    .legal-standing-section {
        padding: 55px 0;
    }

    .legal-image-wrapper {
        min-height: 330px;
    }

    .legal-image {
        width: 100%;
        height: 330px;

        border-radius: 22px 22px 22px 0;
    }

    .legal-blue-shape {
        left: -10px;
        bottom: -15px;

        width: 150px;
        height: 170px;
    }

    .legal-content {
        padding: 15px 0 0;
    }

    .legal-content h2 {
        font-size: 32px;
    }

    .legal-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .legal-standing-section::before,
    .legal-standing-section::after {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .legal-standing-section {
        padding: 45px 0;
    }

    .legal-image {
        height: 280px;
    }

    .legal-image-wrapper {
        min-height: 280px;
    }

    .legal-content h2 {
        font-size: 28px;
    }

    .legal-content p {
        font-size: 14px;
    }

}



/* =========================================================
   VISION & MISSION
   MODERN BLUE ONLY UI
========================================================= */

.vision-mission-section {
    width: 100%;
    padding: 85px 0;
    background: #f7faff;
    position: relative;
    overflow: hidden;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.vision-mission-section::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    top: -220px;
    right: -180px;

    border-radius: 50%;

    background: rgba(8, 60, 124, 0.035);
}

.vision-mission-section::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    bottom: -180px;
    left: -140px;

    border-radius: 50%;

    background: rgba(8, 60, 124, 0.035);
}


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

.vision-mission-section .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.vm-section-heading {
    text-align: center;
    margin-bottom: 60px;
}

.vm-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: #083c7c;

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

    letter-spacing: 2px;
}

.vm-section-heading h2 {
    margin: 0;

    color: #083c7c;

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

    line-height: 1.2;
}

.vm-heading-line {
    width: 55px;
    height: 4px;

    margin: 17px auto 0;

    background: #083c7c;

    border-radius: 20px;
}


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

.vm-layout {
    display: grid;

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

    gap: 55px;

    align-items: stretch;
}


/* =========================================================
   COLUMNS
========================================================= */

.vm-column {
    min-width: 0;
}


/* =========================================================
   TITLE ROW
========================================================= */

.vm-title-row {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 14px;
}

.vm-title-icon {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    background: #083c7c;

    color: #ffffff;

    font-size: 25px;

    box-shadow:
        0 8px 20px rgba(8, 60, 124, 0.18);
}

.vm-number {
    display: block;

    margin-bottom: 2px;

    color: #7c9ac0;

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

    letter-spacing: 1px;
}

.vm-title-row h3 {
    margin: 0;

    color: #083c7c;

    font-size: 28px;

    font-weight: 700;

    letter-spacing: 0.5px;
}


/* =========================================================
   BLUE TITLE LINE
========================================================= */

.vm-title-line {
    width: 100%;
    height: 3px;

    margin-bottom: 30px;

    background: #dce8f6;

    position: relative;
}

.vm-title-line::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 38%;

    height: 3px;

    background: #083c7c;
}


/* =========================================================
   VISION IMAGE
========================================================= */

.vm-vision-image {
    width: 100%;

    height: 260px;

    margin-bottom: 28px;

    display: flex;

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

    overflow: hidden;

    border-radius: 20px;

    background: #edf4fc;
}

.vm-vision-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.5s ease;
}

.vm-vision-image:hover img {
    transform: scale(1.04);
}


/* =========================================================
   VISION TEXT
========================================================= */

.vm-vision-text {
    margin: 0;

    color: #394f69;

    font-size: 15px;

    line-height: 1.9;

    text-align: justify;

    text-justify: inter-word;
}


/* =========================================================
   VERTICAL DIVIDER
========================================================= */

.vm-divider {
    width: 1px;

    background: #d4e2f1;

    position: relative;
}

.vm-divider span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 11px;
    height: 11px;

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

    border-radius: 50%;

    background: #083c7c;

    box-shadow:
        0 0 0 7px #f7faff;
}


/* =========================================================
   MISSION LIST
========================================================= */

.vm-mission-list {
    display: flex;

    flex-direction: column;
}


/* =========================================================
   MISSION ITEM
========================================================= */

.vm-mission-item {
    display: flex;

    align-items: center;

    gap: 17px;

    padding: 16px 0;

    border-bottom: 1px dashed #cbdced;

    transition:
        padding-left 0.3s ease,
        background 0.3s ease;
}

.vm-mission-item:first-child {
    padding-top: 5px;
}

.vm-mission-item:last-child {
    border-bottom: none;
}

.vm-mission-item:hover {
    padding-left: 8px;
}


/* =========================================================
   MISSION ICON
========================================================= */

.vm-mission-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    background: #e9f2fc;

    color: #083c7c;

    font-size: 18px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.vm-mission-item:hover .vm-mission-icon {
    background: #083c7c;

    color: #ffffff;

    transform: scale(1.05);
}


/* =========================================================
   MISSION TEXT
========================================================= */

.vm-mission-item p {
    margin: 0;

    color: #394f69;

    font-size: 14px;

    line-height: 1.65;

    text-align: justify;

    text-justify: inter-word;
}


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

@media (max-width: 1199px) {

    .vision-mission-section {
        padding: 75px 0;
    }

    .vm-layout {
        gap: 40px;
    }

    .vm-section-heading h2 {
        font-size: 38px;
    }

    .vm-title-row h3 {
        font-size: 25px;
    }

    .vm-vision-image {
        height: 230px;
    }

}


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

@media (max-width: 991px) {

    .vision-mission-section {
        padding: 65px 0;
    }

    .vm-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .vm-divider {
        display: none;
    }

    .vm-vision-image {
        height: 260px;
    }

    .vm-mission-item {
        padding: 15px 0;
    }

}


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

@media (max-width: 767px) {

    .vision-mission-section {
        padding: 50px 0;
    }

    .vm-section-heading {
        margin-bottom: 40px;
    }

    .vm-eyebrow {
        font-size: 11px;

        letter-spacing: 1.5px;
    }

    .vm-section-heading h2 {
        font-size: 30px;
    }

    .vm-heading-line {
        width: 45px;
        height: 3px;
    }


    .vm-layout {
        gap: 45px;
    }


    .vm-title-row {
        gap: 13px;
    }

    .vm-title-icon {
        width: 52px;
        height: 52px;

        font-size: 20px;
    }

    .vm-title-row h3 {
        font-size: 22px;
    }

    .vm-number {
        font-size: 10px;
    }


    .vm-title-line {
        margin-bottom: 22px;
    }


    .vm-vision-image {
        height: 200px;

        border-radius: 15px;

        margin-bottom: 22px;
    }


    .vm-vision-text {
        font-size: 12px;

        line-height: 1.75;
    }


    .vm-mission-item {
        gap: 12px;

        padding: 13px 0;
    }

    .vm-mission-icon {
        width: 40px;
        height: 40px;

        font-size: 15px;
    }

    .vm-mission-item p {
        font-size: 11.5px;

        line-height: 1.6;
    }

}


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

@media (max-width: 480px) {

    .vision-mission-section {
        padding: 42px 0;
    }

    .vm-section-heading h2 {
        font-size: 27px;
    }

    .vm-title-icon {
        width: 48px;
        height: 48px;
    }

    .vm-title-row h3 {
        font-size: 20px;
    }

    .vm-vision-image {
        height: 170px;
    }

    .vm-vision-text {
        font-size: 11px;
    }

    .vm-mission-item p {
        font-size: 10.5px;
    }

}





/* =========================================================
   WHAT ODLC DOES
========================================================= */

.what-odlc-does-section {
    position: relative;
    width: 100%;
    padding: 80px 0 90px;
    overflow: hidden;

    background: #FFFFFF;

    color: #083C7C;

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


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

.what-section-header {
    position: relative;
    z-index: 2;

    max-width: 760px;

    margin: 0 auto 38px;

    text-align: center;
}


.what-label {
    display: block;

    margin-bottom: 7px;

    color: #083C7C;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.what-heading-line {
    width: 48px;
    height: 3px;

    margin: 0 auto 16px;

    background: #083C7C;

    border-radius: 10px;
}


.what-section-header h2 {
    margin: 0;

    color: #083C7C;

    font-size: clamp(30px, 3.5vw, 42px);

    font-weight: 700;

    line-height: 1.18;

    letter-spacing: -0.5px;
}


.what-section-header p {
    max-width: 680px;

    margin: 12px auto 0;

    color: #083C7C;

    font-size: 14px;

    line-height: 1.6;
}


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

.odlc-do-card {
    position: relative;

    height: 100%;
    min-height: 205px;

    padding: 18px 17px 20px;

    overflow: hidden;

    background: #FFFFFF;

    border: 1px solid rgba(58, 79, 102, 0.12);

    border-radius: 12px;

    box-shadow:
        0 5px 18px rgba(58, 79, 102, 0.06);

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}


/* =========================================================
   CARD TOP
========================================================= */

.card-top {
    display: flex;

    align-items: center;

    gap: 12px;

    padding-right: 35px;
}


.odlc-card-icon {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 50%;

    background: #F1F5F8;

    color: #083C7C;

    font-size: 21px;

    border: 1px solid rgba(58, 79, 102, 0.08);

    transition:
        transform 0.4s ease,
        background 0.35s ease,
        color 0.35s ease;
}


/* =========================================================
   CARD TITLE
========================================================= */

.odlc-card-title h4 {
    margin: 0;

    color: #083C7C;

    font-size: 25px;

    font-weight: 700;

    line-height: 1.25;
}


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

.card-arrow {
    position: absolute;

    top: 0;
    right: 0;

    width: 43px;
    height: 43px;

    display: flex;

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

    background: #083C7C;

    color: #FFFFFF;

    border-radius: 0 12px 0 22px;

    font-size: 15px;

    transition:
        width 0.35s ease,
        height 0.35s ease,
        background 0.35s ease;
}


.card-arrow i {
    transition: transform 0.35s ease;
}


/* =========================================================
   CARD BODY
========================================================= */

.odlc-card-body {
    margin-top: 18px;

    padding-left: 1px;
}


.odlc-card-body p {
    margin: 0 0 8px;

    color: #083C7C;

    font-size: 16px;

    line-height: 1.55;
}


.odlc-card-body ul {
    margin: 6px 0 9px;

    padding-left: 17px;
}


.odlc-card-body li {
    margin-bottom: 4px;

    color: #083C7C;

    font-size: 16px;

    line-height: 1.45;
}


.odlc-card-body li::marker {
    color: #083C7C;
}


.card-bottom-text {
    margin-top: 9px !important;
}


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

.odlc-do-card:hover {

    transform: translateY(-8px);

    border-color: rgba(58, 79, 102, 0.28);

    box-shadow:
        0 18px 38px rgba(58, 79, 102, 0.14);
}


.odlc-do-card:hover .odlc-card-icon {

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

    background: #083C7C;

    color: #FFFFFF;
}


.odlc-do-card:hover .card-arrow {

    width: 48px;
    height: 48px;
}


.odlc-do-card:hover .card-arrow i {

    transform:
        translate(2px, -2px)
        rotate(5deg);
}


/* =========================================================
   TOP SHINE EFFECT
========================================================= */

.odlc-do-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 70%;
    height: 2px;

    background: #083C7C;

    transition: left 0.5s ease;
}


.odlc-do-card:hover::before {
    left: 100%;
}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.what-odlc-does-section::before {

    content: "";

    position: absolute;

    top: 35px;
    right: 30px;

    width: 70px;
    height: 55px;

    opacity: 0.18;

    background-image:
        radial-gradient(
            #3A4F66 1.5px,
            transparent 1.5px
        );

    background-size: 11px 11px;
}


.what-odlc-does-section::after {

    content: "";

    position: absolute;

    top: 20px;
    left: -45px;

    width: 110px;
    height: 110px;

    border: 1px solid rgba(58, 79, 102, 0.08);

    border-radius: 50%;
}


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

@media (max-width: 991.98px) {

    .what-odlc-does-section {
        padding: 65px 0 75px;
    }

    .odlc-do-card {
        min-height: 220px;
    }

}


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

@media (max-width: 767.98px) {

    .what-odlc-does-section {
        padding: 55px 0 65px;
    }

    .what-section-header {
        margin-bottom: 28px;
    }

    .what-section-header h2 {
        font-size: 30px;
    }

    .what-section-header p {
        font-size: 14px;
    }

    .odlc-do-card {
        min-height: auto;

        padding: 17px;
    }

    .odlc-card-title h3 {
        font-size: 16px;
    }

    .odlc-card-body p {
        font-size: 14px;
    }

    .odlc-card-body li {
        font-size: 13px;
    }

    .odlc-do-card:hover {
        transform: translateY(-4px);
    }

}


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

@media (max-width: 480px) {

    .what-odlc-does-section {
        padding: 45px 0 55px;
    }

    .what-section-header h2 {
        font-size: 27px;
    }

    .what-section-header p {
        font-size: 13px;
    }

    .odlc-card-icon {
        flex-basis: 42px;

        width: 42px;
        height: 42px;

        font-size: 18px;
    }

    .odlc-card-title h3 {
        font-size: 15px;
    }

}



/* =========================================================
   FOUNDER'S MESSAGE
========================================================= */

.founder-message-section {
    position: relative;

    width: 100%;

    padding: 80px 0;

    background: #FFFFFF;

    color: #083C7C;

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

    overflow: hidden;
}


/* =========================================================
   MAIN CARD
========================================================= */

.founder-message-card {

    position: relative;

    display: flex;

    min-height: 610px;

    overflow: hidden;

    background: #FFFFFF;

    border: 1px solid rgba(58, 79, 102, 0.10);

    border-radius: 20px;

    box-shadow:
        0 12px 35px rgba(58, 79, 102, 0.10);
}


/* =========================================================
   LEFT BLUE PANEL
========================================================= */

.founder-blue-panel {

    position: relative;

    flex: 0 0 18%;

    min-width: 150px;

    background: #083C7C;

    overflow: hidden;

    border-radius: 20px 0 0 20px;
}


/* Curved white edge */

.founder-blue-panel::after {

    content: "";

    position: absolute;

    top: -10%;

    right: -75px;

    width: 145px;

    height: 120%;

    background: #FFFFFF;

    border-radius: 50%;

    z-index: 2;
}


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

.founder-content {

    position: relative;

    z-index: 5;

    flex: 1;

    padding: 38px 70px 40px 45px;
}


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

.founder-heading {

    display: flex;

    align-items: center;

    gap: 22px;

    margin-bottom: 22px;
}


.founder-quote-icon {

    flex: 0 0 68px;

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #083C7C;

    color: #FFFFFF;

    border: 4px solid #EEF3F7;

    box-shadow:
        0 4px 15px rgba(58, 79, 102, 0.15);

    font-size: 34px;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.founder-heading:hover .founder-quote-icon {

    transform:
        rotate(-5deg)
        scale(1.06);

    box-shadow:
        0 8px 22px rgba(58, 79, 102, 0.22);
}


.founder-heading h2 {

    margin: 0;

    color: #083C7C;

    font-size: clamp(34px, 4vw, 46px);

    font-weight: 700;

    line-height: 1.12;

    letter-spacing: -0.5px;
}


/* =========================================================
   HEADING LINE
========================================================= */

.founder-title-line {

    position: relative;

    width: 70px;

    height: 4px;

    margin: 13px 0 10px;

    background: #083C7C;

    border-radius: 10px;
}


.founder-title-line::after {

    content: "";

    position: absolute;

    right: -10px;

    top: 50%;

    width: 7px;

    height: 7px;

    transform: translateY(-50%);

    background: #083C7C;

    border-radius: 50%;
}


.founder-subtitle {

    margin: 0;

    color: #083C7C;

    font-size: 15px;

    font-weight: 500;
}


/* =========================================================
   MESSAGE TEXT
========================================================= */

.founder-text {

    max-width: 850px;

    padding-left: 1px;
}


.founder-text p {

    margin: 0 0 22px;

    color: #083C7C;

    font-size: 15px;

    line-height: 1.75;

    text-align: left;
}


/* =========================================================
   FOUNDER PROFILE
========================================================= */

.founder-profile {

    display: flex;

    align-items: center;

    max-width: 540px;

    margin-top: 22px;

    padding-top: 20px;

    border-top: 1px solid rgba(58, 79, 102, 0.15);
}


.founder-sign-icon {

    flex: 0 0 62px;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #F0F4F7;

    border: 4px solid #E6EDF2;

    color: #083C7C;

    font-size: 25px;

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        color 0.4s ease;
}


.founder-profile:hover .founder-sign-icon {

    transform: translateY(-4px);

    background: #083C7C;

    color: #FFFFFF;
}


.founder-divider {

    width: 1px;

    height: 55px;

    margin: 0 18px;

    background: rgba(58, 79, 102, 0.18);
}


.founder-details h3 {

    margin: 0 0 5px;

    color: #083C7C;

    font-size: 20px;

    font-weight: 700;
}


.founder-details span {

    display: block;

    margin-bottom: 5px;

    color: #083C7C;

    font-size: 14px;

    font-weight: 500;
}


.founder-details small {

    display: block;

        color: rgb(102, 112, 133) !important;

    font-size: 12px;
}


/* =========================================================
   DOT PATTERN
========================================================= */

.founder-dots {

    position: absolute;

    width: 75px;

    height: 60px;

    opacity: 0.55;

    background-image:
        radial-gradient(
            #8DB6E8 1.8px,
            transparent 1.8px
        );

    background-size: 12px 12px;

    z-index: 6;
}


.founder-dots-top {

    top: 35px;

    left: 35px;
}


.founder-dots-right {

    top: 35px;

    right: 30px;
}


/* =========================================================
   LEFT CIRCLE PATTERN
========================================================= */

.founder-circle-pattern {

    position: absolute;

    left: -80px;

    bottom: -90px;

    width: 220px;

    height: 220px;

    border: 1px solid rgba(255, 255, 255, 0.20);

    border-radius: 50%;

    z-index: 1;
}


.founder-circle-pattern::before,
.founder-circle-pattern::after {

    content: "";

    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 50%;
}


.founder-circle-pattern::before {

    inset: 20px;
}


.founder-circle-pattern::after {

    inset: 45px;
}


/* =========================================================
   RIGHT CIRCLE PATTERN
========================================================= */

.founder-right-pattern {

    position: absolute;

    right: -90px;

    bottom: -120px;

    width: 260px;

    height: 260px;

    border: 1px solid rgba(58, 79, 102, 0.10);

    border-radius: 50%;

    z-index: 1;
}


.founder-right-pattern::before,
.founder-right-pattern::after {

    content: "";

    position: absolute;

    border: 1px solid rgba(58, 79, 102, 0.08);

    border-radius: 50%;
}


.founder-right-pattern::before {

    inset: 25px;
}


.founder-right-pattern::after {

    inset: 50px;
}


/* =========================================================
   CARD ANIMATION
========================================================= */

.founder-message-card {

    animation:
        founderReveal 0.8s ease both;
}


@keyframes founderReveal {

    from {

        opacity: 0;

        transform:
            translateY(30px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


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

.founder-message-card {

    transition:
        box-shadow 0.4s ease,
        transform 0.4s ease;
}


.founder-message-card:hover {

    box-shadow:
        0 20px 50px rgba(58, 79, 102, 0.14);
}


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

@media (max-width: 991.98px) {

    .founder-message-section {

        padding: 65px 0;
    }


    .founder-blue-panel {

        flex-basis: 15%;

        min-width: 100px;
    }


    .founder-blue-panel::after {

        right: -60px;
    }


    .founder-content {

        padding:
            35px
            45px
            35px
            25px;
    }


    .founder-heading h2 {

        font-size: 36px;
    }


    .founder-text p {

        font-size: 15px;
    }

}


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

@media (max-width: 767.98px) {

    .founder-message-section {

        padding: 50px 0;
    }


    .founder-message-card {

        display: block;

        min-height: auto;

        border-radius: 16px;
    }


    .founder-blue-panel {

        width: 100%;

        height: 55px;

        min-width: 0;

        border-radius: 16px 16px 0 0;
    }


    .founder-blue-panel::after {

        display: none;
    }


    .founder-content {

        padding: 30px 22px 35px;
    }


    .founder-heading {

        align-items: flex-start;

        gap: 15px;
    }


    .founder-quote-icon {

        flex-basis: 55px;

        width: 55px;

        height: 55px;

        font-size: 27px;
    }


    .founder-heading h2 {

        font-size: 30px;
    }


    .founder-subtitle {

        font-size: 13px;
    }


    .founder-text p {

        font-size: 14px;

        line-height: 1.7;

        margin-bottom: 20px;
    }


    .founder-profile {

        margin-top: 18px;
    }


    .founder-dots-top {

        top: 15px;

        left: 20px;
    }


    .founder-dots-right {

        top: 15px;

        right: 20px;
    }


    .founder-right-pattern {

        display: none;
    }

}


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

@media (max-width: 480px) {

    .founder-message-section {

        padding: 40px 0;
    }


    .founder-content {

        padding: 25px 18px 30px;
    }


    .founder-heading {

        gap: 12px;
    }


    .founder-quote-icon {

        flex-basis: 48px;

        width: 48px;

        height: 48px;

        font-size: 23px;
    }


    .founder-heading h2 {

        font-size: 26px;
    }


    .founder-subtitle {

        font-size: 12px;
    }


    .founder-text p {

        font-size: 13px;

        line-height: 1.65;
    }


    .founder-sign-icon {

        flex-basis: 52px;

        width: 52px;

        height: 52px;
    }


    .founder-details h3 {

        font-size: 17px;
    }


    .founder-details span {

        font-size: 13px;
    }


    .founder-details small {

        font-size: 11px;
    }

}

/* =========================================================
   WHAT ODLC DOES - BUTTONS
========================================================= */

.odlc-card-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.odlc-card-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    width: auto !important;
    min-width: 245px !important;
    min-height: 46px !important;

    padding: 0 20px !important;

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

    border: 2px solid #083C7C !important;
    border-radius: 6px !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
    text-align: center !important;

    white-space: normal !important;

    box-sizing: border-box !important;
    cursor: pointer !important;

    transition: all 0.3s ease !important;
}

.odlc-card-btn i {
    flex-shrink: 0;
    font-size: 16px !important;
    transition: transform 0.3s ease !important;
}

.odlc-card-btn:hover {
    background: #ffffff !important;
    color: #083C7C !important;
}

.odlc-card-btn:hover i {
    transform: translateX(4px);
}


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

.odlc-card-body p,
.odlc-card-body li {
    text-align: justify;
}

.odlc-card-body ul {
    padding-left: 20px;
    margin-bottom: 18px;
}

.odlc-card-body li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.odlc-card-body strong {
    color: #083C7C;
}

.card-bottom-text {
    margin-top: 15px;
}


/* =========================================================
   MOBILE APP BUTTONS
========================================================= */

.odlc-card-buttons .odlc-card-btn {
    min-width: 205px !important;
}


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

@media (max-width: 991px) {

    .odlc-card-btn {
        min-width: 225px !important;
        min-height: 44px !important;
        padding: 0 17px !important;
        font-size: 12px !important;
    }

    .odlc-card-buttons {
        gap: 8px;
    }

    .odlc-card-buttons .odlc-card-btn {
        min-width: 195px !important;
    }
}


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

@media (max-width: 767px) {

    .odlc-card-btn {
        min-width: 210px !important;
        min-height: 42px !important;
        padding: 0 15px !important;
        font-size: 12px !important;
    }

    .odlc-card-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .odlc-card-buttons .odlc-card-btn {
        width: auto !important;
        min-width: 210px !important;
    }

    .odlc-card-body li {
        line-height: 1.55;
        margin-bottom: 7px;
    }
}


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

@media (max-width: 480px) {

    .odlc-card-btn {
        min-width: 195px !important;
        min-height: 40px !important;
        padding: 0 13px !important;
        font-size: 11px !important;
    }

    .odlc-card-buttons .odlc-card-btn {
        min-width: 195px !important;
    }

}


.odlc-card-buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    margin-top: 20px !important;
}

.odlc-card-buttons .odlc-card-btn {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Mobile */
@media (max-width: 767px) {
    .odlc-card-buttons {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .odlc-card-buttons .odlc-card-btn {
        padding: 0 12px !important;
        font-size: 11px !important;
    }
}


/* =========================================================
   ODLC MOBILE APP BUTTONS
========================================================= */

.odlc-card-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 20px !important;
}

.odlc-card-buttons .odlc-card-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    width: auto !important;
    min-width: 260px !important;
    max-width: 100% !important;

    height: 48px !important;

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

    box-sizing: border-box !important;

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

    border: 2px solid #083C7C !important;
    border-radius: 7px !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;

    line-height: 1 !important;
    text-align: center !important;

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

    overflow: hidden !important;
}


/* TABLET */

@media (max-width: 991px) {

    .odlc-card-buttons {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .odlc-card-buttons .odlc-card-btn {
        min-width: 250px !important;
        height: 46px !important;
        font-size: 11px !important;
    }
}


/* MOBILE */

@media (max-width: 767px) {

    .odlc-card-buttons {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .odlc-card-buttons .odlc-card-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 44px !important;

        padding: 0 14px !important;

        font-size: 11px !important;
    }
}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .odlc-card-buttons {
        gap: 9px !important;
    }

    .odlc-card-buttons .odlc-card-btn {
        height: 43px !important;
        font-size: 10px !important;
        padding: 0 12px !important;
    }
}

/* =========================================================
   ODLC CARDS - SAME CONTENT & BUTTON ALIGNMENT
========================================================= */

/* Make every card fill the complete row height */
.what-odlc-does-section .row {
    align-items: stretch !important;
}

.what-odlc-does-section .row > [class*="col-"] {
    display: flex !important;
}


/* CARD */
.what-odlc-does-section .odlc-do-card {
    width: 100% !important;
    height: 100% !important;

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

    box-sizing: border-box !important;
}


/* =========================================================
   CARD TOP
   Creates SAME starting position for all paragraphs
========================================================= */

.what-odlc-does-section .card-top {
    min-height: 135px !important;

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

    box-sizing: border-box !important;
}


/* Keep title area aligned */
.what-odlc-does-section .odlc-card-title {
    flex: 1 !important;
    min-width: 0 !important;
}


/* =========================================================
   CARD BODY
========================================================= */

.what-odlc-does-section .odlc-card-body {
    flex: 1 1 auto !important;

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

    box-sizing: border-box !important;
}


/* Paragraph starts from same position */
.what-odlc-does-section .odlc-card-body > p:first-child {
    margin-top: 0 !important;
}


/* =========================================================
   LIST
========================================================= */

.what-odlc-does-section .odlc-card-body > ul {
    margin-bottom: 20px !important;
}


/* =========================================================
   NORMAL SINGLE BUTTON
   Pushes button to bottom
========================================================= */

.what-odlc-does-section .odlc-card-body > .odlc-card-btn {
    margin-top: auto !important;
}


/* =========================================================
   MOBILE APP - TWO BUTTONS
   Push entire button group to bottom
========================================================= */

.what-odlc-does-section .odlc-card-body > .odlc-card-buttons {
    margin-top: auto !important;

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

    gap: 10px !important;
}


/* Buttons inside mobile app card */
.what-odlc-does-section .odlc-card-buttons .odlc-card-btn {
    margin-top: 0 !important;
}


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

@media (min-width: 992px) {

    .what-odlc-does-section .card-top {
        min-height: 135px !important;
    }

}


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

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

    .what-odlc-does-section .card-top {
        min-height: 120px !important;
    }

}


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

@media (max-width: 767px) {

    .what-odlc-does-section .row > [class*="col-"] {
        display: flex !important;
    }

    .what-odlc-does-section .odlc-do-card {
        height: 100% !important;
    }

    .what-odlc-does-section .card-top {
        min-height: 105px !important;
    }

}

/* =========================================================
   DISCOVER ODLC BUTTON
========================================================= */

.who-discover-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    width: fit-content !important;
    min-width: 185px !important;
    height: 46px !important;

    margin-top: 10px !important;
    padding: 0 20px !important;

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

    border: 2px solid #083C7C !important;
    border-radius: 6px !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

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

    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

.who-discover-btn i {
    font-size: 16px !important;
    transition: transform 0.3s ease !important;
}

.who-discover-btn:hover {
    background: #ffffff !important;
    color: #083C7C !important;
}

.who-discover-btn:hover i {
    transform: translateX(4px) !important;
}


/* TABLET */
@media (max-width: 991px) {
    .who-discover-btn {
        min-width: 175px !important;
        height: 44px !important;
        padding: 0 18px !important;
        font-size: 13px !important;
    }
}


/* MOBILE */
@media (max-width: 767px) {
    .who-discover-btn {
        min-width: 165px !important;
        height: 42px !important;
        padding: 0 16px !important;
        font-size: 12px !important;
    }
}

/* =========================================================
   LEGAL STATUS BUTTONS
========================================================= */

.legal-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.legal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 210px;
    height: 46px;

    padding: 0 20px;

    background: #083C7C;
    color: #ffffff;

    border: 2px solid #083C7C;
    border-radius: 6px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;

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

    box-sizing: border-box;

    transition: all 0.3s ease;
}

.legal-btn i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.legal-btn:hover {
    background: #ffffff;
    color: #083C7C;
}

.legal-btn:hover i {
    transform: translateX(4px);
}


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

@media (max-width: 991px) {

    .legal-buttons {
        gap: 10px;
        margin-top: 20px;
    }

    .legal-btn {
        min-width: 195px;
        height: 44px;
        padding: 0 16px;
        font-size: 12px;
    }

}


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

@media (max-width: 767px) {

    .legal-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .legal-btn {
        width: 100%;
        min-width: 0;
        height: 44px;
        padding: 0 15px;
        font-size: 12px;
    }

}


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

@media (max-width: 480px) {

    .legal-btn {
        height: 42px;
        font-size: 11px;
        padding: 0 13px;
    }

}

/* =========================================================
   ODLC PROGRAMME CARDS - FIX TEXT SPACING
========================================================= */

.what-odlc-does-section .odlc-card-body p,
.what-odlc-does-section .odlc-card-body li {
    text-align: left !important;
    text-justify: auto !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
}


/* Card paragraph */
.what-odlc-does-section .odlc-card-body > p {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* Card list */
.what-odlc-does-section .odlc-card-body ul {
    padding-left: 25px !important;
    margin-left: 0 !important;
}

.what-odlc-does-section .odlc-card-body li {
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
}


/* Keep email and long text from creating spacing */
.what-odlc-does-section .odlc-card-body li,
.what-odlc-does-section .odlc-card-body p {
    overflow-wrap: break-word !important;
}


/* Mobile */
@media (max-width: 767px) {

    .what-odlc-does-section .odlc-card-body p,
    .what-odlc-does-section .odlc-card-body li {
        text-align: left !important;
        line-height: 1.55 !important;
    }

}


























/* ================================================================
   ACADEMIC PROGRAMMES DROPDOWN
   Appended. Nothing above this point is modified.

   THE BUTTON IS NOT WRAPPED, AND NOT EDITED
   An earlier attempt put the two programmes in a second button and
   then, after that was withdrawn, wrapped EXPLORE ACADEMIC PROGRAMMES
   in a <div> to hang the menu off it. Wrapping changed the button.
   The other six cards put .odlc-card-btn straight into
   .odlc-card-body, which is a flex column, so width:auto stretches
   the button to the full 345px of the card. Inside a plain block
   wrapper it collapsed to 300px - 45px narrower than its six
   neighbours, plainly out of step in a row of identical cards.

   So the panel is a SIBLING of the button, not a child. The button
   is still a direct child of .odlc-card-body and keeps its exact
   markup, its 345px width and its place on the card. Nothing in this
   block sets width, margin, padding, height or position on the
   button, so it cannot move.

   WHY THE PANEL OPENS UPWARD
   .odlc-do-card and .what-odlc-does-section are both overflow:hidden,
   measured on the live page. A panel opening downward would hang
   below the card's bottom edge and lose 110px of itself to that
   clip. Opening upward keeps it inside the card:

     .odlc-card-body        position:relative, so the panel anchors here
     button top edge        46px above the body's bottom edge
     panel height           129px, plus an 8px gap  =  137px
     room above the button  594px inside the card

   137px of panel into 594px of room. It cannot be clipped at any
   width, and it never reaches the row of cards below.

   The 54px is the button's 46px height plus the 8px gap, and it is
   written as a calc so it stays correct if the button's height
   changes at a breakpoint.

   WHY THE PANEL IS THE SAME WIDTH AS THE BUTTON
   left:0 and right:0 on a panel whose containing block is
   .odlc-card-body makes it exactly the body's content width, which
   is exactly the button's width, because both are that width. No
   hard-coded number, so it tracks the card at every breakpoint.

   Almost. .odlc-card-body carries padding-left:1px, and an absolutely
   positioned child is measured against the PADDING box, not the
   content box - so left:0 landed 1px left of the button and the panel
   came out 346px against the button's 345px. margin-left corrects
   position and width together, because with left and right both set
   and width auto the margin is taken off the used width.

   THE CHEVRON IS A PSEUDO-ELEMENT, NOT MARKUP
   The button already contains a bi-arrow-right, so a second icon
   inside it would have meant editing the button and shifting its
   centred label. The chevron is therefore drawn on the button with
   a ::after that is absolutely positioned outside the content box.
   position:relative on the button is needed to anchor it, and that
   does not move the button or change its size. Verified: the button
   measures 345x46 before and after.

   OPEN STATES
   Three, so it works for a pointer, a keyboard and a tap:

     :hover on the button      pointer
     :hover on the panel       so the pointer can travel up to it
     :focus-within             keyboard, and tap-to-focus
     .is-open                  set by the script in about.php for a
                               tap, where a link would otherwise
                               navigate before the menu appeared

   The panel has a transparent ::after bridging the 8px gap below
   it. Without that bridge the menu would close the instant the
   pointer crossed the gap, because for those 8px neither the button
   nor the panel is hovered.

   The open state repeats the transition WITHOUT visibility. A
   transition that begins from visibility:hidden never advances, which
   pins the computed value and leaves the panel stuck shut.

   COLOURS AND TYPE ARE THIS SECTION'S
   #E4EAF8 border and white ground as the cards, #0B1F4D titles and
   #5B6B85 secondary lines as .odlc-card-body uses, Arial
   throughout as every rule in this file, 13px titles to match the
   13px .odlc-card-btn, 11.5px for the supporting line. global-
   typography.css pins b and span with !important, so both need it.
   ================================================================ */

/* ---------- the anchor for the panel ---------- */
.what-odlc-does-section .odlc-card-body:has(> .odlc-prog-panel){
  position:relative !important;
}

/* the hint chevron, outside the button's content */
.what-odlc-does-section .odlc-card-body:has(> .odlc-prog-panel) > .odlc-card-btn{
  /* anchors the chevron. position:relative does not move the button
     and does not change its size - it still measures 345x46 */
  position:relative !important;
}
.what-odlc-does-section .odlc-card-body:has(> .odlc-prog-panel) > .odlc-card-btn::after{
  content:"\F285";                 /* bi-chevron-right */
  position:absolute !important;
  top:50% !important;
  right:16px !important;
  transform:translateY(-50%) rotate(0deg) !important;
  font-family:"bootstrap-icons" !important;
  font-size:11px !important;
  line-height:1 !important;
  color:rgba(255,255,255,.75) !important;
  pointer-events:none !important;
  transition:transform .2s ease !important;
}

/* The panel clears the button by the button's own height plus the 8px
   gap, and the button is not a fixed height - .odlc-card-btn sets
   min-height 46px at line 4587 and steps it down at three breakpoints
   further down this file:

     max-width 991px   44px
     max-width 767px   42px
     max-width 480px   40px

   So one fixed offset does not hold. Left at 46px the gap measured
   2px at 1200px and up, 10px at 900, 12px at 600 and 8px at 480 -
   the menu drifting into the button, or floating away from it, as
   the width changed. The three overrides at the END of this block
   repeat the same breakpoints and the same four numbers, so the gap
   is 8px at every width. The two sets have to be changed together.

   THE OVERRIDES HAVE TO COME AFTER THE BASE RULE
   They were first written directly under this comment, which put them
   ABOVE the base .odlc-prog-panel rule further down the block. Same
   selector, same !important, so the later rule won and computed bottom
   stayed 54px at every width and the gap still drifted. They now sit
   at the end of the block, after the rule they override. */
.what-odlc-does-section .odlc-card-body:has(> .odlc-card-btn:hover) > .odlc-card-btn::after,
.what-odlc-does-section .odlc-card-body:has(> .odlc-prog-panel:hover) > .odlc-card-btn::after,
.what-odlc-does-section .odlc-card-body:focus-within > .odlc-card-btn::after,
.what-odlc-does-section .odlc-card-body.is-open > .odlc-card-btn::after{
  transform:translateY(-50%) rotate(90deg) !important;
}

/* ---------- the panel, opening upward inside the card ---------- */
.what-odlc-does-section .odlc-prog-panel{
  position:absolute !important;
  bottom:calc(46px + 8px) !important;
  left:0 !important;
  right:0 !important;
  /* margin:0 first, then the one correction. Setting only margin-left
     left margin-bottom to whatever the cascade gave it, and it measured
     6px. `bottom` positions the margin edge, so the panel sat 6px
     higher than declared, on top of the width error that the
     margin-left is there to fix. */
  margin:0 !important;
  margin-left:1px !important;
  z-index:40 !important;
  padding:6px !important;
  background:#fff !important;
  border:1px solid #E4EAF8 !important;
  border-radius:14px !important;
  box-shadow:0 18px 40px rgba(16,42,90,.20) !important;
  text-align:left !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(6px) !important;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease !important;
}
/* bridges the 8px gap so the pointer can reach the panel */
.what-odlc-does-section .odlc-prog-panel::after{
  content:"" !important;
  position:absolute !important;
  top:100% !important;
  left:0 !important;
  right:0 !important;
  height:8px !important;
}

.what-odlc-does-section .odlc-card-body:has(> .odlc-card-btn:hover) > .odlc-prog-panel,
.what-odlc-does-section .odlc-card-body:has(> .odlc-prog-panel:hover) > .odlc-prog-panel,
.what-odlc-does-section .odlc-card-body:focus-within > .odlc-prog-panel,
.what-odlc-does-section .odlc-card-body.is-open > .odlc-prog-panel{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
  transition:opacity .2s ease,transform .2s ease !important;
}

/* ---------- the two items ---------- */
.what-odlc-does-section .odlc-prog-item{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:11px 13px !important;
  border-radius:10px !important;
  background:none !important;
  color:#0B1F4D !important;
  font-family:Arial,Helvetica,sans-serif !important;
  text-decoration:none !important;
  transition:background .2s ease !important;
}
.what-odlc-does-section .odlc-prog-item:hover,
.what-odlc-does-section .odlc-prog-item:focus-visible{
  background:#F5F8FC !important;
}
.what-odlc-does-section .odlc-prog-item-txt{
  display:block !important;
  min-width:0 !important;
}
.what-odlc-does-section .odlc-prog-item-txt b{
  display:block !important;
  margin:0 0 2px !important;
  color:#0B1F4D !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  letter-spacing:0 !important;
  text-align:left !important;
}
.what-odlc-does-section .odlc-prog-item-txt span{
  display:block !important;
  margin:0 !important;
  color:#5B6B85 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:11.5px !important;
  font-weight:400 !important;
  line-height:1.4 !important;
  letter-spacing:0 !important;
  text-align:left !important;
}
.what-odlc-does-section .odlc-prog-item > i{
  flex:0 0 auto !important;
  color:#0D6EFD !important;
  font-size:13px !important;
  transition:transform .2s ease !important;
}
.what-odlc-does-section .odlc-prog-item:hover > i{
  transform:translateX(3px) !important;
}

/* ---------- the three groups in the professional-programmes menu ----------
   That menu is nine links in three groups rather than two loose links, so
   each group is labelled. The items are the same .odlc-prog-item the
   other card's menu uses - same colour, same type, same arrow - so the
   two menus read as one component.

   WHY THERE IS NO SCROLLBAR
   A first version capped the panel with max-height and let it scroll.
   That was wrong: the nine items need 586px, the room above the button
   inside the card is 401px at the tightest widths (600px and 480px), and
   the card clips its overflow, so a scrolling panel hid items behind a
   scroll gesture. Everything is now laid out to FIT.

   Two changes do that, and they are the same change at every width, so
   the items look the same in both menus always:

   - above 600px the three groups sit in TWO columns, so the menu is two
     group-rows deep instead of three
   - at 600px and below the items become single-line, with the duration
     muted inline after the title, which takes each item from 48px to
     28px

   The compact form is applied to .odlc-prog-item itself rather than only
   inside the tall panel, so at any one breakpoint both menus are
   identical. Scoping it to the tall panel alone would have made the two
   menus look different from each other on a phone.

   max-height and overflow-y are deliberately NOT set, so nothing can
   scroll. The panel grows to fit its content and the room above the
   button was measured at every width before the numbers below were
   chosen. */
.what-odlc-does-section .odlc-prog-group{
  padding:2px 0 8px !important;
}
.what-odlc-does-section .odlc-prog-group + .odlc-prog-group{
  border-top:1px solid #E4EAF8 !important;
  padding-top:9px !important;
}
.what-odlc-does-section .odlc-prog-group-label{
  padding:3px 13px 6px !important;
  color:#5B6B85 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  letter-spacing:.7px !important;
  text-transform:uppercase !important;
  text-align:left !important;
}

/* ONE LINE PER ITEM, AT EVERY WIDTH - and this is the whole fix.
   A second attempt put the three groups into two columns above 600px
   and kept the stacked two-line items below it. Measured, that was
   worse: the panel was 499px where the room is 490px, and 646px where
   the room is 401px, because two columns of a 303px-wide card left
   each group about 145px and the labels wrapped to four lines. It did
   not fit at 900, 768, 601, 600 or 480 - five of the eleven widths.

   One column with single-line items is 418px at its tallest, and the
   room above the button is 401px at the tightest width, 490px at
   900 and 768, and 530-714px everywhere else. It fits at every width
   measured, with no scrollbar, and it is the same rule at every
   breakpoint rather than two different layouts to keep in step.

   The item component is .odlc-prog-item, the one the Academic
   Education menu already uses, so the nine new items are styled
   exactly like the two existing ones - the same rule changes both.
   The title stays 13px and the duration stays 11.5px #5B6B85; they
   now sit side by side with a middot between them instead of stacked. */
.what-odlc-does-section .odlc-prog-item-txt{
  display:flex !important;
  align-items:baseline !important;
  gap:5px !important;
}
.what-odlc-does-section .odlc-prog-item-txt b{
  margin:0 !important;
  white-space:nowrap !important;
}
.what-odlc-does-section .odlc-prog-item-txt span{
  white-space:nowrap !important;
}
.what-odlc-does-section .odlc-prog-item-txt span::before{
  content:"\00B7" !important;
  margin-right:5px !important;
}
.what-odlc-does-section .odlc-prog-item{
  padding:5px 12px !important;
}
.what-odlc-does-section .odlc-prog-group{
  padding:1px 0 5px !important;
}
.what-odlc-does-section .odlc-prog-group + .odlc-prog-group{
  padding-top:5px !important;
}
.what-odlc-does-section .odlc-prog-group-label{
  padding:3px 12px 5px !important;
}

/* ---------- the button-height overrides, LAST in the block ----------
   These must follow the base .odlc-prog-panel rule above. Placed
   before it they lose: same selector, same !important, and the later
   rule is the one that counts. The numbers are the button's own
   min-height at each breakpoint, plus the 8px gap. */
@media (max-width:991px){
  .what-odlc-does-section .odlc-prog-panel{
    bottom:calc(44px + 8px) !important;
  }
}
@media (max-width:767px){
  .what-odlc-does-section .odlc-prog-panel{
    bottom:calc(42px + 8px) !important;
  }
}
@media (max-width:480px){
  .what-odlc-does-section .odlc-prog-panel{
    bottom:calc(40px + 8px) !important;
  }
}


/* ============================================================================
   ABOUT PAGE - EVERY SECTION ON THE HEADER AND FOOTER GUTTER LADDER
   ----------------------------------------------------------------------------
   The header and the footer already agree with each other at every width. The
   five sections in the middle of this page did not, so the eye read the page as
   crooked even though nothing looked broken.

   WHAT EACH SIDE WAS DOING

   The header and footer use a four-step width ladder, set in header.css:9213
   and footer.css:5788:

       width: 92%;  max-width: 1380px;  margin-inline: auto;  padding-inline: 0
       94% at 1199px and below
       90% at 767px and below
       92% at 480px and below

   The about page sections used Bootstrap's .container instead, which
   about.css:2154 caps at max-width 1200px above 1200px, and about.css:2209
   gives 20px of padding below 768px. Bootstrap's own 12px padding is on top of
   that. So there were two separate width systems on the same page.

   MEASURED ON THE LIVE PAGE, before this, section content edge against the
   header content edge. Negative is further left than the header.

       viewport   header edge    section edge     out by
       1585       102 .. 1482    204 .. 1380      102px both sides
       1425        57 .. 1368    124 .. 1300       67px both sides
       1185        47 .. 1137    124 .. 1060       77px both sides
        885        27 ..  858     94 ..  790       67px both sides
        585        29 ..  556     42 ..  542       13px both sides
        375        15 ..  360     20 ..  355        5px both sides

   It was wrong in both directions depending on the width - 102px too far in on a
   large screen, 5px too far out on a phone - which is what makes it read as
   careless rather than as a deliberate narrow column.

   The page banner was full width, edge to edge, with no gutter at all.

   WHAT THIS DOES

   Five section wrappers, abgut, move onto the same ladder as the header. The
   declarations below are the header's, unchanged, including all four steps. The
   Bootstrap 12px padding goes to zero because the .row inside carries the
   matching -12px margin and the .col carries the matching 12px padding, so the
   two cancel and the column content lands exactly on the container edge - which
   is the same trick header.css:9318 uses to put the logo on that edge.

   The banner, abgutbnr, is a full-bleed 55/45 grid with a background colour, so
   it keeps its edge-to-edge background and gets matching padding. The padding
   is the same max() the header uses for its menu button, so the two agree above
   the 1380px cap as well as below it.

   MEASURED AFTER, on the live page, twenty-one widths from 320 to 1600
   including every breakpoint boundary - 1200/1199, 768/767, 481/480:

       worst deviation at any width: 0px
       all six sections, both edges, at all twenty-one widths

   SCOPE

   Two new classes, abgut and abgutbnr, added to six elements in about.php.
   Nothing existing is edited and no selector is reused. about.css is loaded by
   about.php only - verified, no other page references it - so this cannot reach
   any other page. Removing the two class names reverts all of it.

   No text, no markup order, no image and no section padding was changed. Six
   lines in about.php differ from before, each of them only a class name.
   ============================================================================ */

.abgut {
    width: 92% !important;
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 1199px) {
    .abgut { width: 94% !important; }
}

@media (max-width: 767px) {
    .abgut { width: 90% !important; }
}

@media (max-width: 480px) {
    .abgut { width: 92% !important; }
}

/* ---------- the banner keeps its full-bleed background ---------- */

.abgutbnr {
    box-sizing: border-box !important;
    padding-left: max(4%, calc((100% - 1380px) / 2)) !important;
    padding-right: max(4%, calc((100% - 1380px) / 2)) !important;
}

@media (max-width: 1199px) {
    .abgutbnr {
        padding-left: max(3%, calc((100% - 1380px) / 2)) !important;
        padding-right: max(3%, calc((100% - 1380px) / 2)) !important;
    }
}

@media (max-width: 767px) {
    .abgutbnr {
        padding-left: max(5%, calc((100% - 1380px) / 2)) !important;
        padding-right: max(5%, calc((100% - 1380px) / 2)) !important;
    }
}

@media (max-width: 480px) {
    .abgutbnr {
        padding-left: max(4%, calc((100% - 1380px) / 2)) !important;
        padding-right: max(4%, calc((100% - 1380px) / 2)) !important;
    }
}

/* ============================================================================
   THE BANNER - TEXT ON THE HEADER EDGE, IMAGE BACK ONTO THE SCREEN EDGE
   ----------------------------------------------------------------------------
   Two faults, both visible in one screenshot.

   FAULT 1 - the left text sat 20 to 69px to the right of the header logo

   The gutter work above put the banner's left padding on the header ladder,
   which is right. But .banner-left already carries its own padding:

       about.css:1466   .banner-left { padding: 60px 70px 60px 9%; }

   That 9% is a percentage of .banner-left's own width, so it was measured from
   a column that had itself already moved. The two stacked and the text landed
   inside the gutter instead of on it.

       viewport   header logo   banner badge was   out by
       1585            102            171           +69px
       1425             57            122           +65px
       1265             51            108           +57px
       1009             30             67           +37px
        753             23             50           +27px
        375             15             35           +20px

   Switched off, and the badge, the About ODLC heading and the paragraph all sit
   on the header logo edge at every width. The other three sides of that padding
   are left alone - 70px on the right still keeps the paragraph off the image,
   and the vertical padding is what centres the block.

   FAULT 2 - a strip of empty navy sat between the picture and the screen edge

   The gutter work above gave the banner padding on the right as well. The banner
   is a 55/45 grid and .banner-right is the second track, so the right padding
   shortened the image instead of framing it. Measured gap between the image and
   the right edge of the screen: 103px at 1600, 57px at 1440, 51px at 1280,
   30px at 1024, 23px at 768, 15px at 390.

   Right padding goes to zero, so the picture runs off the edge exactly as it did
   before the gutter work. The left padding stays, so the text side is unchanged.
   The ellipse clip-path on .banner-right is relative to .banner-right itself,
   which is the last track, so the curve keeps its shape and simply finishes at
   the screen edge again.

   MEASURED AFTER, on the live page, fourteen widths from 320 to 1600

       header logo edge == banner badge edge == banner h1 edge   at all 14
       gap between the image and the right edge of the screen      0px at all 14
       page horizontal overflow                                   0px at all 14
       banner section horizontal overflow                         0px at all 14
       text box and image box overlap                             no, at all 14

   The overlap test is done on both axes, because at 767px and below the banner
   switches to a stacked flex column and the image sits under the text rather
   than beside it. A left-to-right comparison alone would report those six widths
   as a collision when nothing overlaps at all.

   The paragraph gains width as the left inset comes out - 620px to 680px at
   1600px viewport - which is its own max-width in about.css:1670, so it stops
   there and the line count does not change.

   WHY THE SELECTORS ARE DOUBLED

   about.php loads css/about.css from a script rather than a plain link, and the
   stylesheet lands in the head after any style element appended at runtime.
   Equal specificity would therefore lose on source order. Both selectors here
   repeat the class - .about-page-banner.abgutbnr is (0,2,0) against (0,1,0) -
   so they win on specificity instead and do not depend on where they sit.

   Nothing existing is edited. about.css is loaded by about.php only, so this
   cannot reach another page. No text, no image, no markup and no section padding
   was changed; about.php is not touched by this edit at all.
   ============================================================================ */

.about-page-banner.abgutbnr {
    padding-right: 0 !important;
}

.about-page-banner.abgutbnr .banner-left {
    padding-left: 0 !important;
}
/* ============================================================================
   WHAT ODLC DOES - ALL EIGHT CARDS THE SAME HEIGHT, WITH READ MORE
   Appended at the end of this file. Nothing above this line was edited.

   SCOPE

   Every selector below starts with .what-odlc-does-section, the section at
   about.php:521. The eight .odlc-do-card in it are the only cards this can
   reach: the class is used nowhere else on this page or on any other page,
   and the section prefix narrows it further.

   WHAT WAS WRONG

   The eight cards sit in ONE Bootstrap .row, so align-items:stretch already
   made them equal within each row - but not across rows, and not between a
   short card and a long one. Measured natural heights, scrollHeight:

       1440px   608 608 608 | 625 625 625 | 824 824
       1199px   710 710 710 | 723 723 723 | 824 824
        991px   495 495 | 589 589 | 556 556 | 883 883
        768px   561 561 | 691 691 | 710 710 | 986 986
        390px   490 545 | 657 650 | 675 671 | 884 944
        320px   490 653 | 761 700 | 755 745 | 958 1173

   So the first card is 608px and the eighth is 824px on a desktop, and 490px
   against 944px on a phone - the grid reads as three different bands rather
   than one set of cards.

   WHY THE HEIGHT IS ON THE CARD, NOT ON THE ROW

   about.css:4892 already sets height:100% on the card, which makes it fill
   whatever the Bootstrap column gives it. That is what lets a row stretch
   its cards but it cannot make a SHORT card as tall as a long one in a
   different row. An explicit height beats both height:100% and
   align-items:stretch, so all eight end up exactly --ab-card-h whatever
   they hold, and a card whose content does not fit is genuinely clipped -
   which is what gives the script in about.php something to detect.

   THE HEIGHT IS PER TIER, MEASURED NOT GUESSED

   The cards get taller as the column narrows and the prose wraps, so one
   number cannot serve every width. --ab-card-h sits above the middle of the
   range and below the longest card, so the longest one or two get a Read
   more and the rest are not cut:

       700px   at 768px and above   - clips the last row, 824 to 986px
       660px   at 480px and below   - clips cards 7 and 8, 655 to 1173px

   The cost is dead space in the short cards - 210px in the first card at
   390px. That is unavoidable if all eight are to be the same size; the
   alternative is leaving them ragged, which is what was asked to be fixed.

   THE CTA IS BEHIND READ MORE UNTIL A CARD IS OPENED

   The EXPLORE button is the last child of .odlc-card-body, so on a card that
   is clipped the button is clipped with it and Read more sits where it was.
   Opening the card releases the clip and the button is there, with its
   dropdown panel - .odlc-prog-panel on the first two cards - still anchored
   inside, which is what the note at about.css:5314 works to preserve.

   ::after IS FREE ON THIS CARD

   .odlc-do-card::before is the 2px line that slides across on hover
   (about.css:3587). ::after was checked and is not used anywhere on this
   card, so the fade below takes it rather than needing a wrapper element in
   the markup. Nothing is added to about.php except the script.

   .ab-more, .ab-more-fade, .ab-open and .ab-clamp are added by that script
   and are declared nowhere else in the project.
   ============================================================================ */

.what-odlc-does-section {
    --ab-card-h: 700px;
}

/* every card the same height, and content that does not fit is clipped */
.what-odlc-does-section .odlc-do-card {
    height: var(--ab-card-h) !important;
    overflow: hidden !important;
}

/* opened: let the row grow to fit instead of clipping */
.what-odlc-does-section .odlc-do-card.ab-open {
    height: auto !important;
}

/* the fade over the clipped text. Opaque from 52% down, which puts solid
   white behind the whole of the control band rather than over its top edge.
   96px tall over a card whose bottom padding is 20px. */
.what-odlc-does-section .odlc-do-card.ab-more-fade::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 96px !important;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .55) 22%,
        rgba(255, 255, 255, .88) 38%,
        #FFFFFF 52%
    ) !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.what-odlc-does-section .odlc-do-card.ab-open.ab-more-fade::after {
    display: none !important;
}

/* the control, at the card's own padding edge: 17px sides at desktop and
   above 480px, 17px all round at 480px and below, which is where the card
   padding changes to 17px. */
.what-odlc-does-section .ab-more {
    position: absolute !important;
    left: 17px !important;
    bottom: 12px !important;
    z-index: 6 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 6px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #083C7C !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}

.what-odlc-does-section .ab-more i {
    font-size: 12px !important;
    line-height: 1 !important;
    transition: transform .18s ease !important;
}

.what-odlc-does-section .odlc-do-card.ab-open .ab-more i {
    transform: rotate(180deg) !important;
}

.what-odlc-does-section .ab-more:hover {
    text-decoration: underline !important;
}

.what-odlc-does-section .ab-more:focus-visible {
    outline: 2px solid #083C7C !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* the card lifts 8px on hover (about.css:3545); a fixed height would make
   that lift clip against the cards below, so the lift is kept and the extra
   room it needs is added here. */
.what-odlc-does-section .row {
    padding-bottom: 8px !important;
}

@media (max-width: 480px) {
    .what-odlc-does-section {
        --ab-card-h: 660px;
    }
}

/* ============================================================================
   WHAT ODLC DOES - THE TWO DOWNLOAD BUTTONS ON ONE LINE
   Appended at the end of this file. Nothing above this line was edited.

   WHY THEY ARE STACKED

   about.css:4973 sets flex-direction: column with !important on
   .what-odlc-does-section .odlc-card-body > .odlc-card-buttons, and 4702
   does the same again below 767px. So the group is a column and the two
   buttons sit one under the other, as in the capture.

   WHY FLIPPING IT ALONE IS NOT ENOUGH

   Each button carries min-width:205px !important (4662), 195px below 991px
   (4684) and 210px below 767px (4709). The card's inner column is far
   narrower than two of those side by side, so a bare flex-direction:row
   would push the pair straight out of the card. The min-width is what has
   to go as well as the direction - the two share the card's width instead,
   evenly, and neither can claim a floor of its own.

   THE RESULT

   One row at every width, each button half the available width, the group
   still pinned to the bottom of the card by the margin-top:auto already on
   it at 4970. Nothing else on the card moves: the buttons are the last
   child either way, and the card is still held to --ab-card-h.
   ============================================================================ */

.what-odlc-does-section .odlc-card-body > .odlc-card-buttons {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
}

.what-odlc-does-section .odlc-card-body > .odlc-card-buttons .odlc-card-btn {
    /* 0,3,0 with !important, so it outranks the bare .odlc-card-buttons
       .odlc-card-btn min-width at 4662 and its per-width copies */
    min-width: 0 !important;
    width: auto !important;
    flex: 1 1 0 !important;
    max-width: none !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
}
/* =========================================================
   MATCH THE LEGAL STATUS COLUMN WIDTH
   ------------------------------------------------------------
   The content column is already identical on both pages:

       .ls-container   width 92%, max-width 1380, centred
       .abgut          width 92%, max-width 1380, centred

   The visible difference is that About's sections are built from
   Bootstrap .row, and a Bootstrap row carries negative gutter
   margins ( -12px by default, -24px at the g-lg-5 breakpoint )
   which are normally absorbed by the container's own 12px
   padding. .abgut zeroes that padding, so nothing absorbed them
   and every row spilled past the column:

       container  926px  at left 30   <- the Legal Status width
       .row g-3   942px  at left 22   <- 16px over
       .row g-lg-5 974px at left 6    <- 48px over

   Setting the row margins back to zero pulls the content onto the
   same 926px column Legal Status uses. Nothing else is touched:
   no markup, no content, no other rule.
   ========================================================= */

.abgut .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================================================
   ABOUT ODLC: FIVE DOT GRIDS STOPPED, TWO SECTIONS' PADDING MADE EQUAL
   ---------------------------------------------------------------------------

   FONT, COLOUR AND STYLE ARE NOT TOUCHED. Nothing below sets font-family,
   font-size, font-weight, line-height, letter-spacing, text-transform, colour,
   background, border or shadow. The five dot grids are stopped with
   content:none, which is a content value and not a colour, and the two
   padding fixes restate the page's own top padding as its bottom.
   about.php is not touched and no other page's stylesheet is written to.

   MEASURED AT A 1000px VIEWPORT BEFORE THIS BLOCK

       header .container-fluid   L  29.6   R  955.3   w  925.7
       .odlcf-cta-in             L  29.6   R  955.3   dL  0.0  dR  0.0

   --------------------------------------------------------------------------
   FIRST, WHAT IS ALREADY RIGHT ON THIS PAGE - AND IS NOT RESTATED

   All five .abgut containers on this page already measure dL 0.0 and dR 0.0
   against the header, at the 1380px cap and the 92/94/90/92 ladder:

       .who-we-are-section      > .container.abgut      925.7px  ON EDGES
       .legal-standing-section  > .container.abgut      925.7px  ON EDGES
       .vision-mission-section  > .container.abgut      925.7px  ON EDGES
       .what-odlc-does-section  > .container.abgut      925.7px  ON EDGES
       .founder-message-section > .container.abgut      925.7px  ON EDGES

   and .odlcf-cta-in, .odlcf-ds-in, .odlcf-st-in and .odlcf-dc-in all read
   0.0 and 0.0. This page was put on the ladder in an earlier block and has
   not drifted, so this block writes no width and no margin at all. Saying so
   is the point: there is nothing to correct, and a rule that restates a
   correct value is a rule that can drift later.

   THE BANNER IS ALSO ALREADY RIGHT

       .about-page-banner        pad-left 29.5375px   pad-right 0
       .banner-left first child  L 29.5   DELTA to the logo edge -0.0
       .banner-right             R 984.8   gap to the screen edge 15.2px

   The text sits on the header logo's edge and the picture runs to the edge
   of the screen, both measured, both correct. Not touched.

   --------------------------------------------------------------------------
   1. THE FIVE DOT GRIDS, STOPPED

   They are not in the banner. The banner has none - .about-page-banner,
   .banner-left and .banner-right all read content "none" on both
   pseudo-elements. The five that exist are in three of the sections below
   the banner, and each is a rectangle of small dots built from a
   radial-gradient of a 1.5px dot on a transparent one, on a 12px pitch:

       about.css:2096  .who-we-are-section::before     70 x 55px   left 0
                                                           bottom 15px
                                                           #3A4F66 at .35
       about.css:2122  .who-we-are-section::after      70 x 55px   right 15px
                                                           top 15px
                                                           #3A4F66 at .25
       about.css:2502  .legal-standing-section::before 75 x 55px   right 25px
                                                           top 20px
                                                           #3A4F66 at .22
       about.css:2525  .legal-standing-section::after  75 x 55px   right 25px
                                                           bottom 25px
                                                           #3A4F66 at .18
       about.css:3613  .what-odlc-does-section::before 70 x 55px  right 30px
                                                           top 35px
                                                           #3A4F66 at .18,
                                                           on an 11px pitch

   Five in all, and they are the same decoration repeated - one dot colour,
   one dot size, one pitch, five placements.

   Each is a pseudo-element, so there is nothing in the markup to keep and
   no class to find it by. content:none is the only way to stop a
   pseudo-element painting. The five rules stay in the file exactly where
   they are - nothing is deleted.

   THE SIXTH PSEUDO-ELEMENT IS NOT A DOT GRID AND IS NOT NAMED

       about.css:3637  .what-odlc-does-section::after
                        110 x 110px at left -45px top 20px, a 1px
                        rgba(58, 79, 102, .08) circle at 50% radius

   That one is an outlined ring, not a field of dots, and it is left
   painting. Naming it would have removed a shape that is not the decoration
   being corrected here.

   --------------------------------------------------------------------------
   2. THE TWO SECTIONS WHOSE PADDING IS NOT EQUAL

   Both have more space underneath than above, and in both the bottom is the
   larger of the two, so it comes up to the top:

       <who-we-are-section>      75 / 85      out by 10
       <what-odlc-does-section>  80 / 90      out by 10

   The page's own values, at each of its own breakpoints, from a brace-depth
   walk of about.css so that no rule is attributed to the wrong query:

       .who-we-are-section
           base             75px 0 85px    -> 75 / 75
           991.98px         65px 0 70px    -> 65 / 65
           767.98px         50px 0 60px    -> 50 / 50
           480px            40px 0 50px    -> 40 / 40

       .what-odlc-does-section
           base             80px 0 90px    -> 80 / 80
           991.98px         65px 0 75px    -> 65 / 65
           767.98px         55px 0 65px    -> 55 / 55
           480px            45px 0 55px    -> 45 / 45

   All eight are restated, at the page's own boundaries rather than the
   round ones, because each of those queries also carries a rule of its own
   that would otherwise win on source order. The page's own top values are
   the ones kept.

   THE OTHER THREE SECTIONS ARE ALREADY EQUAL AND ARE NOT NAMED

       .legal-standing-section    80 / 80   65 / 65   55 / 55   45 / 45
       .vision-mission-section    85 / 85   75 / 75   65 / 65   50 / 50
                                42 / 42
       .founder-message-section   80 / 80   65 / 65   50 / 50   40 / 40

   Each of those declares its padding as a two-value shorthand, which is
   equal above and below by construction. That is the arrangement the two
   sections above are being brought to.

   .odlcf-strip measures 14px above and 0px below on every page of the site.
   It is a shared footer component loaded by thirteen pages from
   css/includes/footer.css, so it is not named here and not fixed here. It
   is the one section on this page still out, and it needs a site-wide
   decision rather than one.

   --------------------------------------------------------------------------
   NOT TOUCHED

   No font, anywhere. No colour of type, no background, no border, no shadow.
   The banner and its background, .banner-left, .banner-right and the
   photograph. The five .abgut containers and their width ladder. The tag,
   the h1, the paragraph, the eight .odlc-do-card, the vision and mission
   cards, the founder message, the legal-standing table. about.php. The
   header, the footer, and every other page.
============================================================================ */

/* ---------- 1. the five dot grids, stopped. Nothing is deleted. */

.who-we-are-section::before,
.who-we-are-section::after,
.legal-standing-section::before,
.legal-standing-section::after,
.what-odlc-does-section::before {
    content: none !important;
}

/* .what-odlc-does-section::after is a 110px outlined ring at about.css:3637,
   not a field of dots, and is deliberately not named above. */

/* ---------------------- 2. the two sections, padding above = padding below */

.who-we-are-section {
    padding: 75px 0 0 !important;
}

.what-odlc-does-section {
    padding: 80px 0 80px !important;
}

@media (max-width: 991.98px) {
    .who-we-are-section {
        padding: 65px 0 65px !important;
    }

    .what-odlc-does-section {
        padding: 65px 0 65px !important;
    }
}

@media (max-width: 767.98px) {
    .who-we-are-section {
        padding: 50px 0 50px !important;
    }

    .what-odlc-does-section {
        padding: 55px 0 55px !important;
    }
}

@media (max-width: 480px) {
    .who-we-are-section {
        padding: 40px 0 40px !important;
    }

    .what-odlc-does-section {
        padding: 45px 0 45px !important;
    }
}


/* ==========================================================================
   THE STORE BADGES IN THE 'ODLC MOBILE APP & DIGITAL LEARNING' CARD
   -------------------------------------------------------------------------

   The two buttons in that card on the About page now hold the store badge
   images instead of the words GOOGLE PLAY and APP STORE and an arrow. The
   class is .odlc-store-badge-img, the same one index.php, mobileapp.php and
   faq.php already use, so the two are the same button everywhere.

   --------------------------------------------------------------------------
   WHAT HAS TO BE OVERRIDDEN, AND WHY IT IS ALL !important

   .odlc-card-btn is a blue pill. about.css:4579 and about.css:4783 give it
   these, every one of them with !important:

       min-width: 260px        padding: 0 18px       background: #083C7C
       height: 48px            border-radius: 6px   color/gap/font-size

   A plain declaration cannot touch any of those. The button also has a height
   ladder already in place - 48px, then 46px at 991, 44px at 767 and 43px at
   480 - so the height is deliberately NOT set here: the badge is told to fill
   whatever height the existing rules give it, and the button therefore steps
   down on a tablet and a phone exactly as the text button did.

   The badge is 200 x 60, which is 10:3, so width follows from height:

       48px tall  ->  160px wide        43px tall  ->  143.3px
       46px tall  ->  153.3px           39px tall  ->  130px

   --------------------------------------------------------------------------
   min-width IS SET TO 0, DELIBERATELY

   min-width:260px would hold the anchor open at every width. The badge inside
   is sized by its own height, so the anchor has to be allowed to shrink-wrap
   round it instead. max-width:100% is kept so that a badge can never run past
   the edge of its card on the narrowest phone.

   --------------------------------------------------------------------------
   HOVER

   The text button inverted to white on hover. A black badge plate on a white
   background has nothing to invert, so hover only lifts it 2px, the same lift
   index.css already gives the badge on the home page.

   --------------------------------------------------------------------------
   NOT TOUCHED

   Both hrefs, the .odlc-card-buttons container and its direction, the card
   itself, every other rule in this file, and every other page.
========================================================================== */

.odlc-card-buttons .odlc-card-btn.odlc-store-badge-img {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: inherit !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 0 !important;
}

.odlc-card-buttons .odlc-card-btn.odlc-store-badge-img:hover,
.odlc-card-buttons .odlc-card-btn.odlc-store-badge-img:focus-visible {
    background: transparent !important;
    color: inherit !important;
    transform: translateY(-2px);
}

.odlc-card-buttons .odlc-card-btn.odlc-store-badge-img img {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}


/* ==========================================================================
   THE BLUE FRAME AROUND THE BADGES - IT WAS A BORDER, NOT A BACKGROUND
   -------------------------------------------------------------------------

   The block above set background:transparent on the two badge buttons and
   that part worked - the computed background-color came back rgba(0,0,0,0).

   Two things it did not touch were still drawing, and both were visible in the
   screenshot as a blue edge standing proud of the black badge plate:

       border   computed 2px solid rgb(8, 60, 124)
       padding  computed 0px 10px, not 0

   The border is the frame. It was never mentioned in the earlier block, so it
   was left standing - which is why the badge looked like it was sitting inside
   a small blue box rather than being the button.

   The padding did not reset for a different reason. The earlier block used the
   shorthand `padding: 0 !important` at specificity (0,3,0). Something in this
   file sets a padding on the same button at a higher specificity, so the
   shorthand lost and 10px a side survived. Ten pixels either side is 20px of
   extra width on a badge that is 146.7px - which is exactly why the anchor
   measured 189.3px for a 146.7px plate.

   --------------------------------------------------------------------------
   THE FIX: MORE SELECTOR, AND THE LONTHANDS

   Two changes, both needed:

   1. .what-odlc-does-section is added to the front of the selector. That is the
      section this card lives in - the script at about.php:1382 reads it - so
      the compound selector is (0,4,0) and outranks whatever was beating (0,3,0).

   2. padding-left and padding-right are written as longhands rather than the
      shorthand. A longhand at equal specificity is not weaker than a shorthand
      - they score the same - but writing them separately means one of them
      cannot be reintroduced by a later shorthand without also resetting the
      other. border is set to 0 the same way.

   --------------------------------------------------------------------------
   THE RESULTING SIZES

   The plate is 200 x 60, a ratio of 10:3, so at the button's own height:

       48px tall  ->  160px wide      the anchor now measures 160, not 189.3
       46px tall  ->  153.3px
       44px tall  ->  146.7px         the 146.7 measured before, now flush
       43px tall  ->  143.3px

   Height is still left to the ladder already in this file, so the badge steps
   down at 991, 767 and 480px exactly as the text button did.

   --------------------------------------------------------------------------
   NOT TOUCHED

   Both hrefs, .odlc-card-buttons and its direction, the card itself, every
   other .odlc-card-btn in this file - there are seven more that are accordion
   triggers and must keep their blue pill - and every other rule.
========================================================================== */

.what-odlc-does-section .odlc-card-buttons .odlc-card-btn.odlc-store-badge-img {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    font-size: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
}

.what-odlc-does-section .odlc-card-buttons .odlc-card-btn.odlc-store-badge-img:hover,
.what-odlc-does-section .odlc-card-buttons .odlc-card-btn.odlc-store-badge-img:focus-visible {
    background: transparent !important;
    color: inherit !important;
    transform: translateY(-2px);
}

.what-odlc-does-section .odlc-card-buttons .odlc-card-btn.odlc-store-badge-img img {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
}


/* ==========================================================================
   READ MORE TAKEN OFF THE WHAT ODLC DOES CARDS
   -------------------------------------------------------------------------

   Eight cards in this one section, held to a fixed box:

       .what-odlc-does-section { --ab-card-h: 700px }
       .what-odlc-does-section .odlc-do-card
           { height: var(--ab-card-h) !important; overflow: hidden !important; }

   A short script measures each card and, where the text does not fit, fades
   the bottom 96px with a white gradient and drops a Read more button over it.
   Clicking that button added .ab-open, which let the card grow to its content.

   The Read more is gone. Three declarations do it:

       .what-odlc-does-section .ab-more            display: none
       .what-odlc-does-section .odlc-do-card
           .ab-more-fade::after                    display: none
       .what-odlc-does-section .odlc-do-card       height: auto

   ALL THREE ARE NEEDED, NOT ONE

   Hiding the button on its own would have been the worst of the three: the box
   is overflow: hidden and still only 700px tall, so the card would have looked
   as though the Read more had never worked and the text was simply lost. The
   fade is the second one - a white gradient over the bottom 96px, which on a
   full-height card would sit on top of the last few lines. Only the height
   release actually shows the text, and that is what this last line does.

   THE SCRIPT IS LEFT ALONE

   It still measures and still builds the buttons into the DOM. They are hidden
   with CSS and left in place, the same way decorative pieces have been handled
   elsewhere on this site. No PHP is touched, so if the Read more is ever wanted
   back it is one rule removed rather than a rewrite.

   MEASURED, BEFORE AND AFTER

       viewport   buttons   card heights before      card heights after
           1920         1     700 x 8                 562 x3, 611 x3, 832 x2
           1440         1     700 x 8                 562 x3, 645 x3, 859 x2
           1200         3     700 x 8                 666 x3, 749 x3, 859 x2
           1024         5     700 x 8                 744 x3, 749 x3, 913 x2
            768         3     700 x 8                 511 x2, 627 x2, 703 x2, 908 x2
            600         1     700 x 8                 388, 458, 502, 500, 526, 596, 769
            390         2     660 x 8                 422, 465, 532, 551, 594, 597, 684, 829

   The button measures as not visible at every width, no card clips its text at
   any width, and the document has no horizontal overflow at any width tested.
   Cards still sit at equal heights within each row, because the row stretches.

   THE SECTION GETS SHORTER, NOT TALLER

   The 700px box was padding out cards that never needed it. Measured:

           1920   2587 -> 2492
           1440   2587 -> 2552
           1200   2587 -> 2760
           1024   2582 -> 2888
            768   3225 -> 3174
            600   6079 -> 4719
            390   5786 -> 5179

   Wider than about 1000px it loses height because the fixed box had been
   forcing empty space. Below that the text is shown in full, which costs
   height, but 4719 instead of 6079 at 600px is still a large saving because
   the eight cards are no longer all padded out to 700px on a narrow screen.

   --------------------------------------------------------------------------
   NOTHING ELSE

   Scoped to .what-odlc-does-section, which holds these eight cards and nothing
   else. No card, icon, title, tag, colour, border, radius, padding, font,
   shadow, hover or arrow is touched. No other section of the page is named and
   the fade gradient itself is left in the file, only not painted. about.php is
   not opened.
========================================================================== */

.what-odlc-does-section .ab-more {
    display: none !important;
}

.what-odlc-does-section .odlc-do-card.ab-more-fade::after {
    display: none !important;
}

.what-odlc-does-section .odlc-do-card {
    height: auto !important;
}


/* ============================================================================
   WHO WE ARE IMAGE: OVERLAPPING SHAPES

   The same treatment as the ABOUT ODLC image on the home page - a solid brand
   blue block showing at the top left and a pale blue one at the bottom right,
   both sitting behind the photograph.

   Nothing in the markup changes. .who-image-wrapper is already position:relative
   and .who-image is already position:relative at z-index 2, so the two
   pseudo-elements below, absolutely positioned at z-index 0, land behind the
   photograph without disturbing anything else.

   The photograph is width 92% and pushed to the right, so the shapes are
   offset by -2.5% to clear its left and right edges. No dot clusters here -
   those were taken off the home page image and are not repeated.
   ============================================================================ */

.who-we-are-section .who-image-wrapper::before,
.who-we-are-section .who-image-wrapper::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    width: 42% !important;
    height: 76% !important;
    border-radius: 26px !important;
    pointer-events: none !important;
}

/* top left, solid brand blue */
.who-we-are-section .who-image-wrapper::before {
    top: -6% !important;
    left: -2.5% !important;
    background: #2E86F0 !important;
}

/* bottom right, pale blue */
.who-we-are-section .who-image-wrapper::after {
    bottom: -6% !important;
    right: -2.5% !important;
    background: #9CC9F8 !important;
}

@media (max-width: 767.98px) {
    .who-we-are-section .who-image-wrapper::before,
    .who-we-are-section .who-image-wrapper::after {
        width: 46% !important;
        height: 78% !important;
        border-radius: 20px !important;
    }
}


/* ============================================================================
   THE FRAME IS TAKEN OFF, AND THE BLUE BLOCK IS CUT DOWN

   Two faults with the WHO WE ARE photograph.

   1. It carried border: 9px solid #083C7C - a heavy navy frame that is not in
      the design. It is the only rule putting a border on .who-image img, and it
      does so with !important on this same property, so that is used here too.
      .who-image still rounds the corners and carries a soft shadow, so the
      photograph keeps a clean edge.

   2. The blue block was 42% x 76% at 26px radius, standing 6% out. That is a
      slab, not an accent. It is now 32% x 56% at 22px radius, 2.5% out.

   The offset was the worse half of it. The photograph is width 92%, pushed
   right, so its left edge sits 8% into the wrapper - but the blocks were placed
   against the wrapper, not against it. The blue one therefore stood 76px clear
   of the photograph on the left while the pale one cleared it by 18px on the
   right: a slab on one side, a sliver on the other. Each is now placed off the
   photograph's own edge, so both clear it by the same 18px. Under 992px the
   photograph is width 95% and that edge moves to 5%, so it is restated there.

   Under 768px the photograph is not full width, for a reason of its own: the
   empty .who-image-bg div picks up width:92% from the media query while its own
   rule sits commented out, and takes half the row. That is pre-existing and is
   left alone; at those widths the two blocks sit symmetrically on the wrapper's
   edges instead.

   The photograph, its hover zoom, the markup and the rest of the page are not
   touched.
   ============================================================================ */

.who-we-are-section .who-image img {
    border: 0 !important;
}

/* both blocks, slimmer and shorter */
.who-we-are-section .who-image-wrapper::before,
.who-we-are-section .who-image-wrapper::after {
    width: 32% !important;
    height: 56% !important;
    border-radius: 22px !important;
}

/* top left, solid brand blue, placed off the photograph's left edge */
.who-we-are-section .who-image-wrapper::before {
    top: -2.5% !important;
    left: calc(8% - 18px) !important;
}

/* bottom right, pale blue, placed off the photograph's right edge */
.who-we-are-section .who-image-wrapper::after {
    bottom: -2.5% !important;
    right: -18px !important;
}

@media (max-width: 991.98px) {
    /* the photograph is width 95% here, so its left edge is at 5% */
    .who-we-are-section .who-image-wrapper::before {
        left: calc(5% - 18px) !important;
    }
}

@media (max-width: 767.98px) {
    .who-we-are-section .who-image-wrapper::before,
    .who-we-are-section .who-image-wrapper::after {
        width: 34% !important;
        height: 60% !important;
        border-radius: 18px !important;
    }
    .who-we-are-section .who-image-wrapper::before { left: -14px !important; }
    .who-we-are-section .who-image-wrapper::after  { right: -14px !important; }
}

@media (max-width: 480px) {
    .who-we-are-section .who-image-wrapper::before { left: -10px !important; }
    .who-we-are-section .who-image-wrapper::after  { right: -10px !important; }
}


/* ============================================================================
   THE EMPTY DIV IS TAKEN OUT OF FLOW - THE MOBILE SQUEEZE

   .who-image-bg is an empty decorative div. The rule that would have
   positioned it and given it a background is the one commented out in this
   file, but the max-width:767.98px query still hands it width:92%;
   height:90%. With no position of its own it stays in the row, and
   .who-image-wrapper is a flex container - so below 768px the empty div takes
   92% of the row and squeezes the photograph into what is left. Measured at
   480px before this: a 418px row with the photograph down to 218px, shoved to
   the right, and the blue block stranded on the left of it.

   Taken out of flow, it costs the row nothing at any width and still draws
   nothing, which is all it ever did. Above 768px it was already zero-sized, so
   nothing moves there.

   With the photograph back to its proper width, the two blocks are anchored to
   its edges at the small breakpoints as well: the photograph is width 94% below
   992px and 100% below 480px, so its left edge is at 6% and then at 0. Each
   clears it by the same 14px, matching how the desktop rules clear it by 18px.

   No !important: nothing on these selectors carries one. These rules come after
   the media query and outrank it on specificity.
   ============================================================================ */

.who-we-are-section .who-image-bg {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    pointer-events: none !important;
}

@media (max-width: 991.98px) {
    .who-we-are-section .who-image-wrapper::before {
        left: calc(5% - 18px) !important;
    }
}

@media (max-width: 767.98px) {
    .who-we-are-section .who-image-wrapper::before,
    .who-we-are-section .who-image-wrapper::after {
        width: 34% !important;
        height: 60% !important;
        border-radius: 18px !important;
    }
    /* the photograph is width 94% here, so its left edge is at 6% */
    .who-we-are-section .who-image-wrapper::before {
        left: calc(6% - 14px) !important;
    }
    .who-we-are-section .who-image-wrapper::after {
        right: -14px !important;
    }
}

@media (max-width: 480px) {
    /* the photograph is width 100% here, so its left edge is at 0 */
    .who-we-are-section .who-image-wrapper::before {
        left: -14px !important;
    }
    .who-we-are-section .who-image-wrapper::after {
        right: -14px !important;
    }
}


/* ============================================================================
   THE BANNER PHOTOGRAPH GOES THE FULL WIDTH ON THE STACKED LAYOUT

   The gap beside it is the banner's own gutter. .about-page-banner carries
   .abgutbnr, which sets padding-left and padding-right on the header ladder.
   Line 5852 already takes padding-right back off again, so the photograph runs
   to the right edge - padding-left stays, and above 768px that is right: the
   banner is a two-column grid, the gap sits beside the text, and that is the
   gutter.

   Below 768px the banner becomes one column (about.css:1755) and the photograph
   moves under the text. That same padding-left is then the gap beside the
   photograph - 38px at 767, 13px at 320 - and the photograph measures 95% of the
   card rather than all of it.

   So below 768px the gutter moves off the banner and onto .banner-left. The same
   max() expressions are restated on it, so the text does not move by a pixel:
   they resolve against .about-page-banner's content box, which is the full card
   width once the padding is off. And .about-page-banner is box-sizing:border-box,
   so dropping the padding does not change its size either.

   Two steps, because the ladder has two steps at these widths: max(5%,...) down
   to 480, then max(4%,...).

   The grid layout at 768 and above is not touched.

   !important because the rules these lean on already carry it, on the same
   selectors and the same properties - .abgutbnr and the 5852/5856 pair.
   ============================================================================ */

@media (max-width: 767px) {
    .about-page-banner.abgutbnr {
        padding-left: 0 !important;
    }
    .about-page-banner.abgutbnr .banner-left {
        padding-left: max(5%, calc((100% - 1380px) / 2)) !important;
    }
}

@media (max-width: 480px) {
    .about-page-banner.abgutbnr {
        padding-left: 0 !important;
    }
    .about-page-banner.abgutbnr .banner-left {
        padding-left: max(4%, calc((100% - 1380px) / 2)) !important;
    }
}