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

    align-items :flex-start;

}


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

} 




/*==========================
HERO
===========================*/

.hero-section{

    background:#24375c !important;

    display:grid;

    grid-template-columns:48% 52%;

    padding:15px;

    padding-right: 50px;

    gap:35px;

    min-height:720px;

    position:relative;

}

.hero-section::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background-image:radial-gradient(rgba(255,255,255,.06) 2px,transparent 2px);

    background-size:22px 22px;

    opacity:.5;

}

.hero-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:24px;
    padding:0 16px;
    background:#2D66FF;
    color:#FFFFFF;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    border-radius:10px;
    margin-bottom:20px;
    white-space:nowrap;
}


.hero-left{

    position:relative;

    z-index:2;

    padding:20px;
}





.hero-left h2{

    font-family:'Playfair Display',serif;

    font-size:72px;

    line-height:82px;

    color:white;

    font-weight:700;

    margin:20px 0;
}

.hero-left h2 span{

    color:#4d84ff;
}

.hero-line{
    width:68px;
    height:3px;
    background:#f7c948;
    border-radius:100px;
    margin-top:18px;
    margin-bottom:24px;
}

@media (max-width:991px){

.hero-line{
    margin:25px auto 28px;
}

}


.hero-content p{
    max-width: 520px;
    font-size: 18px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.2px;
    color: rgba(255,255,255,0.88);
    margin-top: 28px;
    margin-bottom: 35px;
    font-family: 'Poppins', sans-serif;
}

@media (max-width:991px){

.hero-content p{
    max-width:100%;
    font-size:18px;
    line-height:32px;
}

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

.hero-content p{
    font-size:16px;
    line-height:28px;
    margin-bottom:25px;
}

}

.search-wrapper{

    display:grid;

    grid-template-columns:1fr 200px;

    margin-top:35px;

    margin-bottom:35px;
}

.search-input{

    height:60px;

   background:#ffffff ;

    display:flex;

    align-items:center;

    padding:0 20px;

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

.search-input input{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    color:white;

    margin-left:10px;
}

.search-wrapper button{

    background:#2d66ff;

    border:none;

    color:white;

    font-weight:700;

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

.counter-box{

    background:white;

    border-radius:18px;

    display:grid;

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

    overflow:hidden;
}

.counter{

    text-align:center;

    padding:28px;

    border-right:1px solid #ececec;
}

.counter:last-child{

    border:none;
}

.counter i{

    font-size:28px;

    color:#2059d4;
}

.counter h3{

    margin-top:12px;

    color:#16396b;

    font-weight:700;
}

.counter span{

    color:#666;
}


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

@media (max-width: 1399px) {

    .counter {
        padding: 25px 16px;
    }

    .counter i {
        font-size: 26px;
    }
}


/* =================================
   TABLET
   768px - 1199px
================================= */

@media (max-width: 1199px) {

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

    .counter {
        min-height: 120px;
        padding: 24px 18px;
    }

    /* Vertical divider */
    .counter:nth-child(1),
    .counter:nth-child(2) {
        border-bottom: 1px solid #ececec;
    }

    /* Right divider */
    .counter:nth-child(2) {
        border-right: none;
    }

    .counter i {
        font-size: 26px;
    }

    .counter h3 {
        margin-top: 10px;
    }
}


/* =================================
   MOBILE
   767px and below
================================= */

@media (max-width: 767px) {

    .counter-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        border-radius: 14px;
    }

    .counter {
        min-height: 115px;
        padding: 20px 12px;
    }

    .counter i {
        font-size: 24px;
    }

    .counter h3 {
        margin: 8px 0 3px;
    }

    .counter span {
        line-height: 1.35;
    }
}


/* =================================
   SMALL MOBILE
   480px and below
================================= */

@media (max-width: 480px) {

    .counter-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 12px;
    }

    .counter {
        min-height: 105px;
        padding: 18px 8px;
    }

    .counter i {
        font-size: 22px;
    }

    .counter h3 {
        margin-top: 7px;
    }
}


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

@media (max-width: 360px) {

    .counter {
        min-height: 100px;
        padding: 16px 6px;
    }

    .counter i {
        font-size: 20px;
    }
}



/* =========================================================
   HERO RIGHT - TWO BIG IMAGES
========================================================= */

.hero-right {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 14px;
    min-width: 0;
    overflow: hidden;
}


/* =========================================================
   TWO BIG IMAGES
========================================================= */

.big-images {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    min-width: 0;
    min-height: 0;
}


/* =========================================================
   BIG IMAGE CARD
========================================================= */

.big-image-card {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 28px;
    background: #ffffff;
}


.big-image-card img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    /* object-fit: cover !important; */
    object-position: center center !important;
}


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

.big-image-card .rating {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 180px;
    padding: 20px;
    background: #ffffff;
    border-radius: 20px;
    z-index: 5;
}

.big-image-card .rating h2 {
    margin: 0 0 5px;
}

.big-image-card .rating .stars {
    margin-bottom: 8px;
}


/* =========================================================
   SMALL IMAGES
========================================================= */

.small-images {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

.small-images img {
    width: 100% !important;
    height: calc((100% - 28px) / 3) !important;
    min-height: 0;
    display: block;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 22px;
}


/* =========================================================
   HERO SECTION
========================================================= */

.hero-section {
    width: 100%;
    height: 780px;
    min-height: 780px;
    display: grid;
    grid-template-columns: 38% 62%;
    overflow: hidden;
}


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

@media (max-width: 1199px) {

    .hero-section {
        height: 700px;
        min-height: 700px;
        grid-template-columns: 38% 62%;
    }

    .hero-right {
        grid-template-columns: minmax(0, 1fr) 165px;
        gap: 12px;
    }

    .big-images {
        gap: 12px;
    }

    .small-images {
        gap: 12px;
    }

    .small-images img {
        height: calc((100% - 24px) / 3) !important;
    }

}


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

@media (max-width: 991px) {

    .hero-section {
        height: auto;
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .hero-right {
        height: 700px;
        grid-template-columns: minmax(0, 1fr) 160px;
        padding: 20px;
    }

}


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

@media (max-width: 767px) {

    .hero-right {
        height: auto;
        display: block;
        padding: 15px;
    }

    .big-images {
        width: 100%;
        height: auto;
        grid-template-rows: none;
        gap: 15px;
    }

    .big-image-card {
        width: 100%;
        height: 300px;
    }

    .small-images {
        margin-top: 15px;
        height: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .small-images img {
        width: 100% !important;
        height: 140px !important;
    }

    .big-image-card .rating {
        width: 150px;
        left: 12px;
        bottom: 12px;
        padding: 14px;
    }

}


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

@media (max-width: 1199px) {

    .hero-section {
        height: 700px;
        min-height: 700px;
    }

    .hero-right {
        grid-template-columns: minmax(0, 1fr) 190px;
        gap: 14px;
    }

}


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

@media (max-width: 991px) {

    .hero-section {
        height: auto;
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .hero-right {
        height: 650px;
        min-height: 650px;
        grid-template-columns: minmax(0, 1fr) 180px;
        padding: 20px;
    }

}


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

@media (max-width: 767px) {

    .hero-right {
        height: auto;
        min-height: auto;
        display: block;
        padding: 15px;
    }

    .big-image {
        width: 100%;
        height: 400px;
        min-height: 400px;
        margin-bottom: 15px !important;
    }

    .small-images {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .small-images img {
        width: 100% !important;
        height: 150px !important;
    }

}


/*=========================================================
LARGE LAPTOP (1200px - 1399px)
=========================================================*/

@media (max-width:1399px){

.hero-section{
    grid-template-columns:47% 53%;
    gap:5px;
    padding:20px;
}

.hero-left{
    padding:20px;
}

.hero-left h1{
    font-size:62px;
    line-height:72px;
}

.hero-content p{
    font-size:18px;
    line-height:32px;
}

 

.rating{
    width:155px;
}

}

/*=========================================================
LAPTOP (992px - 1199px)
=========================================================*/

@media (max-width:1199px){

.hero-section{
    grid-template-columns:1fr 1fr;
    gap:25px;
}

.hero-left{
    padding:10px;
}

.hero-left h1{
    font-size:52px;
    line-height:62px;
}

.hero-content p{
    font-size:17px;
    line-height:30px;
}

.search-wrapper{
    grid-template-columns:1fr 170px;
}

.search-input{
    height:56px;
}

.search-wrapper button{
    font-size:15px;
}

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

.counter{
    padding:22px;
}

.counter:nth-child(2){
    border-right:none;
}

.counter:nth-child(1),
.counter:nth-child(2){
    border-bottom:1px solid #ececec;
}

  

.rating{
    width:145px;
    left:20px;
    bottom:20px;
}

.rating h2{
    font-size:34px;
}

}

/*=========================================================
TABLET (768px - 991px)
=========================================================*/

@media (max-width:991px){

.hero-section{
    grid-template-columns:1fr;
    gap:40px;
    padding:25px 18px;
}

.hero-left{
    padding:0;
    text-align:center;
}

.hero-badge{
    margin:auto;
}

.hero-left h1{
    font-size:50px;
    line-height:60px;
}

.hero-content p{
    max-width:100%;
}

.search-wrapper{
    grid-template-columns:1fr;
    gap:15px;
}

.search-input{
    height:58px;
    border-radius:8px;
}

.search-wrapper button{
    height:58px;
    border-radius:8px;
}

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

.counter{
    padding:22px;
}

.counter:nth-child(2){
    border-right:none;
}

.counter:nth-child(1),
.counter:nth-child(2){
    border-bottom:1px solid #ececec;
}


.rating{
    left:20px;
    bottom:20px;
}

}


/*=========================================================
MOBILE (767px and below)
=========================================================*/

@media (max-width:767px){

.hero-section{
    display:flex;
    flex-direction:column;
    padding:25px 20px;
    gap:30px;
    min-height:auto;
}

.hero-left{
    padding:0;
    text-align:center;
    order:1;
}



.hero-badge{
    margin:0 auto 18px;
    height:26px;
    padding:0 18px;
    font-size:10px;
}

.hero-left h1{
    font-size:42px;
    line-height:50px;
    margin-bottom:18px;
}

.hero-line{
    margin:20px auto;
}

.hero-content p{
    max-width:100%;
    font-size:17px;
    line-height:30px;
    text-align:center;
    margin-bottom:30px;
}

/* Search */

.search-wrapper{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.search-input{
    height:55px;
    border-radius:10px;
}

.search-input input{
    font-size:15px;
}

.search-wrapper button{
    width:100%;
    height:55px;
    border-radius:10px;
    font-size:15px;
}

/* Statistics */

.counter-box{
    grid-template-columns:repeat(2,1fr);
    border-radius:15px;
}

.counter{
    padding:18px;
}

.counter:nth-child(2){
    border-right:none;
}

.counter:nth-child(1),
.counter:nth-child(2){
    border-bottom:1px solid #ececec;
}

.counter i{
    font-size:24px;
}

.counter h3{
    font-size:24px;
}

.counter span{
    font-size:14px;
}


/* Rating Card */

.rating{
    width:125px;
    left:15px;
    bottom:15px;
    padding:12px;
}

.rating h2{
    font-size:26px;
}

.rating .stars{
    font-size:14px;
}

.rating p{
    font-size:10px;
    line-height:15px;
}

}


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

@media (max-width:480px){

.hero-section{
    padding:18px 15px;
}

.hero-left h1{
    font-size:34px;
    line-height:42px;
}

.hero-content p{
    font-size:15px;
    line-height:27px;
}

.hero-badge{
    font-size:9px;
    padding:0 12px;
}

.search-input{
    height:52px;
}

.search-wrapper button{
    height:52px;
    font-size:14px;
}

.counter{
    padding:16px;
}

.counter i{
    font-size:22px;
}

.counter h3{
    font-size:22px;
}

.counter span{
    font-size:13px;
}

.big-image {
        width: 100%;

        height: auto !important;

        aspect-ratio: 3 / 2;

        border-radius: 16px;
    }

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

        object-fit: contain !important;

        border-radius: 16px;
    }

    .small-images {
        width: 100%;

        height: 85px !important;

        gap: 8px;
    }

    .small-images img {
        width: 100%;
        height: 100% !important;

        object-fit: cover;

        border-radius: 10px;
    }
.rating{
    width:110px;
    padding:10px;
}

.rating h2{
    font-size:22px;
}

.rating .stars{
    font-size:12px;
}

.rating p{
    font-size:9px;
}

}




/*==========================================
BOTTOM INFO STRIP
==========================================*/

.info-strip{
    background:#ffffff;
    padding:26px 0;
    border-top:1px solid #edf1f6;
    border-bottom:1px solid #edf1f6;
}

.info-item{
    display:flex;
    align-items:center;
    gap:18px;
    padding:0 35px;
    min-height:72px;
}

.border-middle{
    border-left:1px solid #dfe6ef;
}

.info-icon{
    width:54px;
    height:54px;
    background:#edf4ff;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.info-icon i{
    font-size:26px;
    color:#294a7c;
}

.info-content h5{
    margin:0 0 6px;
    color:#3366cc;
    font-size:18px;
    font-weight:700;
}

.info-content p{
    margin:0;
    color:#666;
    font-size:14px;
    line-height:22px;
    max-width:260px;
}

@media (max-width:991px){

.border-middle{
    border-left:none;
    border-top:1px solid #e6e6e6;
}

.info-item{
    padding:20px;
}

}

@media (max-width:576px){

.info-item{
    flex-direction:column;
    text-align:center;
    gap:12px;
}

.info-content p{
    max-width:100%;
}

}

@media (max-width:767px){

.info-strip{
    padding:15px;
}

.info-item{
    padding:18px 10px;
    text-align:left;
    gap:15px;
    border-top:1px solid #ececec;
}

.info-item:first-child{
    border-top:none;
}

.border-middle{
    border:none;
}

.info-icon{
    width:46px;
    height:46px;
}

.info-icon i{
    font-size:22px;
}

.info-content h5{
    font-size:16px;
}

.info-content p{
    font-size:13px;
    line-height:20px;
}

}

@media (max-width:480px){

.info-item{
    flex-direction:row;
    align-items:flex-start;
}

}


.news-wrapper{

    display:flex;
    align-items:center;

    width:100%;
    height:56px;

    background:#fff;

    border-top:1px solid #ececec;
    border-bottom:1px solid #ececec;

    overflow:hidden;

}

/* LEFT BLUE */

.social-area{

    width:200px;
    height:100%;

    background:#082B5C;

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

    position:relative;

}

/* RED SLANT */

.social-area::after{

    content:"";

    position:absolute;

    top:0;
    right:-18px;

    width:36px;
    height:100%;

    background:#D61F26;

    transform:skewX(-25deg);
    

}



.social-area a{

    color:#fff;
    font-size:24px;
    z-index:2;
    text-decoration:none;

}

/* RED BOX */

.news-label{

    width:240px;
    height:100%;

    background:#D61F26;

    color:#fff;

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

    font-weight:700;
    letter-spacing:2px;
    font-size:18px;

    clip-path:polygon(12% 0%,100% 0%,100% 100%,0% 100%);

}

.news-label i{

    margin-right:10px;
    font-size:16px;

}

/* TICKER */

.ticker{

    flex:1;
    overflow:hidden;
    white-space:nowrap;
    padding-left:30px;

}

.ticker-track{

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

    animation:news 28s linear infinite;

}

.ticker-track span{

    color:#222;

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

    padding-right:120px;

}

@keyframes news{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

.ticker:hover .ticker-track{
    animation-play-state:paused;
}

/* Responsive */

@media(max-width:768px){

.social-area{
    width:90px;
}

.social-area a{
    font-size:18px;
}

.news-label{

    width:70px;
    font-size:14px;

}

.news-label span{
    display:none;
}

.news-label i{
    margin:0;
}

.ticker-track span{

    font-size:14px;
    padding-right:70px;

}

}

@media(max-width:576px){

.news-wrapper{
    height:48px;
}

.social-area{
    width:75px;
}

.news-label{
    width:55px;
}

.social-area a{
    font-size:16px;
}

.ticker-track span{

    font-size:13px;
    padding-right:50px;

}

}


/* =========================================
    WHO WE ARE Section
========================================= */

.who-we-are {
    width: 100%;
    text-align: center;
}

.who-we-are .container {
    width: 100%;
    max-width: 1320px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.who-we-are .row {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;

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

.who-we-are .col-12 {
    width: 100% !important;
    max-width: 1000px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}

.who-we-are .section-tag {
    display: block !important;

    width: 100% !important;

    font-size: 11px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}

.who-we-are .section-title {
    width: 100% !important;

    max-width: 950px !important;

    font-size: 35px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}

.who-we-are .section-desc {
    width: 100% !important;

    max-width: 720px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}

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

.section-tag {

    display: block;

    width: 100%;

    text-align: center;

    font-size: 14px;

    font-weight: 700;

    color: #5b5df9;

    text-transform: uppercase;

    margin-bottom: 18px;

    letter-spacing: 1px;

}


.section-title {

    width: 100%;

    max-width: 900px;

    margin: 0 auto 25px;

    text-align: center;

    font-size: 58px;

    font-weight: 800;

    line-height: 1.15;

    color: #0b1538;

}


.section-title span {

    background:
        linear-gradient(
            90deg,
            #6d4dff,
            #4bb8ff
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.section-desc {

    max-width: 720px;

    margin: 0 auto;

    text-align: center;

    color: #667085;

    line-height: 34px;

    font-size: 19px;

}


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

@media(max-width:1199px) {

    .section-title {
        font-size: 48px;
    }

}


@media(max-width:991px) {

    .section-title {
        font-size: 42px;
    }

    .section-desc {
        font-size: 17px;
        line-height: 30px;
    }

}


@media(max-width:767px) {

    .section-title {
        font-size: 34px;
        line-height: 1.15;
    }

    .section-desc {
        font-size: 16px;
        line-height: 28px;
    }

}


@media(max-width:480px) {

    .section-tag {
        font-size: 12px;
    }

    .section-title {
        font-size: 30px;
    }

    .section-desc {
        font-size: 15px;
        line-height: 25px;
    }

}


/* =========================================================
   REDUCED CIRCLE + IMPACT CARDS
   ADD THIS AT THE VERY END OF YOUR CSS
========================================================= */

/* =========================
   MAIN CIRCLE
========================= */

.circle-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 680px;
    margin: 0 auto;
    overflow: visible;
}



/* =========================
   OUTER DOTTED CIRCLE
========================= */

.outer-circle {
    position: absolute;

    width: 470px;
    height: 470px;

    left: 50%;
    top: 50%;

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

    border: 2px dashed rgba(70, 145, 255, 0.40);

    border-radius: 50%;

    z-index: 1;

    animation: rotateClockwise 18s linear infinite;

    pointer-events: none;
}



/* =========================
   INNER CIRCLE
========================= */

.inner-circle {
    position: absolute;

    width: 350px;
    height: 350px;

    left: 50%;
    top: 50%;

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

    border: 4px solid transparent;

    border-top-color: #6C63FF;
    border-right-color: #5B8CFF;
    border-bottom-color: #32C4D4;
    border-left-color: #6C63FF;

    border-radius: 50%;

    z-index: 2;

    animation: rotateAnti 12s linear infinite;

    pointer-events: none;
}



/* =========================
   CENTER CIRCLE
========================= */

.center-circle {
    position: absolute;

    width: 190px;
    height: 190px;

    left: 50%;
    top: 50%;

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

    background: #ffffff;

    border-radius: 50%;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    z-index: 5;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
}

.center-circle img {
    width: 55px;
    height: auto;
    margin-bottom: 5px;
}

.center-circle h3 {
    margin: 0;
}

.center-circle a {
    text-decoration: none;
}


/* =========================================================
   ORBIT ICONS
   KEEP THEM PERFECTLY POSITIONED AROUND SMALLER CIRCLE
========================================================= */

.orbit {
    position: absolute;

    width: 76px;
    height: 76px;

    z-index: 8;

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

.orbit-icon {
    width: 60px;
    height: 60px;

    border-radius: 50%;

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

    color: #fff;

    font-size: 24px;

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

    transition: .35s;
}



/* =========================================================
   ICON 1
   TOP OF CIRCLE
========================================================= */

.orbit-one {
    left: 22%;
    top: calc(72% - 265px);
}


/* =========================================================
   ICON 2
   RIGHT OF CIRCLE
========================================================= */

.orbit-two {
    left: calc(45% + 235px);
    top: 30%;
}


/* =========================================================
   ICON 3
   BOTTOM OF CIRCLE
========================================================= */

.orbit-three {
    left: 40%;
    top: calc(50% + 235px);
}




/* =========================================================
   ICON DESIGN
========================================================= */

.orbit-icon {
    width: 76px;
    height: 76px;

    border-radius: 50%;

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

    font-size: 30px;

    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.orbit-purple {
    background: #7047F5;
    color: #ffffff;
}

.orbit-icon.blue {
    background: #2799EF;
    color: #ffffff;
}

.orbit-icon.cyan {
    background: #2FC4D4;
    color: #ffffff;
}

/* =========================================================
   ROTATING DOTS
========================================================= */

.outer-circle::before {
    content: "";

    position: absolute;

    width: 13px;
    height: 13px;

    background: #7d5fff;

    border-radius: 50%;

    top: 25px;
    left: 80px;
}

.outer-circle::after {
    content: "";

    position: absolute;

    width: 14px;
    height: 14px;

    background: #24a5ff;

    border-radius: 50%;

    bottom: 55px;
    right: 45px;
}

.inner-circle::before {
    content: "";

    position: absolute;

    width: 12px;
    height: 12px;

    background: #44c6ff;

    border-radius: 50%;

    top: 50%;
    right: -8px;

    transform: translateY(-50%);
}




.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: rotateClockwise 20s linear infinite;
}

.orbit-ring.reverse {
    animation: rotateAnti 28s linear infinite;
}



/* =========================================================
   DESKTOP - MORE SPACE
========================================================= */

@media (min-width: 1400px) {

    .circle-wrapper {
        max-width: 1200px !important;
        height: 560px !important;
    }

    .card-left {
        left: 30px !important;
    }

    .card-bottom {
        left: 30px !important;
    }

    .card-right {
        right: 30px !important;
    }

}


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

@media (max-width: 1199px) {

    .circle-wrapper {
        max-width: 1000px !important;
        height: 500px !important;
    }

    .outer-circle {
        width: 370px !important;
        height: 370px !important;
    }

    .inner-circle {
        width: 275px !important;
        height: 275px !important;
    }

    .center-circle {
        width: 145px !important;
        height: 145px !important;
    }

    .card-left {
        left: 0 !important;
        top: 55px !important;
    }

    .card-bottom {
        left: 0 !important;
        bottom: 50px !important;
    }

    .card-right {
        right: 0 !important;
        top: 285px !important;
    }

    .feature-card {
        width: 160px !important;
        max-width: 160px !important;
        
    }

}


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

@media (max-width: 991px) {

    .circle-wrapper {
        width: 100% !important;
        max-width: 760px !important;
        height: 460px !important;
    }

    .outer-circle {
        width: 330px !important;
        height: 330px !important;
    }

    .inner-circle {
        width: 245px !important;
        height: 245px !important;
    }

    .center-circle {
        width: 130px !important;
        height: 130px !important;
    }

    .feature-card {
        width: 140px !important;
        max-width: 140px !important;
    }

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

    .feature-card p {
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    .card-left {
        left: 0 !important;
        top: 45px !important;
    }

    .card-bottom {
        left: 0 !important;
        bottom: 40px !important;
    }

    .card-right {
        right: 0 !important;
        top: 270px !important;
    }

    .orbit-two {
        right: calc(50% - 215px) !important;
    }

}


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

@media (max-width: 767px) {

    /* .circle-wrapper {
        width: 100% !important;
        max-width: 420px !important;
        height: auto !important;

        padding-top: 20px !important;
        padding-bottom: 20px !important;
    } */

    /* Orbit becomes a separate centered block */

    .outer-circle,
    .inner-circle,
    .center-circle {
        position: absolute !important;
    }

    .outer-circle {
        width: 270px !important;
        height: 270px !important;
    }

    .inner-circle {
        width: 210px !important;
        height: 210px !important;
    }

    .center-circle {
        width: 110px !important;
        height: 110px !important;
    }

    .orbit-one {
        top: 25px !important;
    }

    .orbit-two {
        right: calc(50% - 150px) !important;
    }

    .orbit-three {
        bottom: 25px !important;
    }

    /* Feature cards become normal blocks */

    .feature-card {
        position: relative !important;

        width: 100% !important;
        max-width: 320px !important;

        margin: 25px auto !important;

        text-align: center !important;
    }

    .feature-card h4,
    .feature-card p {
        text-align: center !important;
    }

    .feature-card span {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .card-left,
    .card-right,
    .card-bottom {
        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

}


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

@media (max-width: 480px) {

    .circle-wrapper {
        max-width: 350px !important;
    }

    .outer-circle {
        width: 235px !important;
        height: 235px !important;
    }

    .inner-circle {
        width: 180px !important;
        height: 180px !important;
    }

    .center-circle {
        width: 95px !important;
        height: 95px !important;
    }

    .feature-card {
        max-width: 290px !important;
    }

}




/* =========================================================
   FEATURE CARDS
========================================================= */

.feature-card {
    position: absolute;

    width: 220px;

    z-index: 10;

    text-align: left;
}

/* =========================================================
   FEATURE CARD TEXT
========================================================= */

.feature-card h4 {
    margin: 0 0 14px;

    color: #17234A;

    font-weight: 700;
}

.feature-card span {
    display: block;

    width: 70px;
    height: 4px;

    margin-bottom: 16px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #6C63FF,
        #38BFE8
    );
}

.feature-card p {
    margin: 0;

    color: #555;

    line-height: 1.7;

    text-align: left;
}


/* FEATURE CARD POSITION ONLY */

.card-left {
    left: 40px !important;
    top: 20px !important;
}

.card-right {
    right: -10px !important;
    top: 20px !important;
}

.card-bottom {
    left: 50px !important;
    top: 530px !important;
}
/* =========================================================
   KEEP FEATURE TEXT ABOVE ORBIT
========================================================= */

.card-left,
.card-bottom,
.card-right {
    z-index: 300 !important;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes rotateClockwise {

    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }

}

@keyframes rotateAnti {

    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(0deg);
    }

}













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

.impact-card {
    position: relative;
    width: 100%;
    max-width: 580px;
    min-height: 440px;

    padding: 38px 40px;

    border-radius: 20px;
    color: #fff;
    overflow: hidden;

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

    box-sizing: border-box;
}


/* =========================================================
   IMPACT CARD COLUMN
========================================================= */

.col-lg-6:has(.impact-card) {
    display: flex;
    justify-content: flex-end;
}


/* =========================================================
   SUBTITLE
========================================================= */

.impact-subtitle {
    display: block;

    margin: 0 0 18px;

    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;

    color: #7958ff;
    letter-spacing: .5px;

    text-align: left;
}


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

.impact-title {
    margin: 0;

    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;

    color: #fff;

    text-align: left;
}

.impact-title span {
    color: #7b55ff;
}


/* =========================================================
   PURPLE LINE
========================================================= */

.impact-line {
    width: 50px;
    height: 3px;

    margin: 20px 0 0;

    background: #805cff;
    border-radius: 10px;
}


/* =========================================================
   INNER ROWS
========================================================= */

.impact-card .row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.impact-card .col-6 {
    padding-left: 0;
    padding-right: 0;
}


/* =========================================================
   FIRST IMPACT ROW
========================================================= */

.impact-card .row.mt-4 {
    margin-top: 45px !important;
}


/* =========================================================
   IMPACT ITEM
========================================================= */

.impact-item {
    width: 100%;
    min-height: 70px;

    display: flex;
    align-items: flex-start;

    gap: 18px;

    box-sizing: border-box;
}


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

   Heading + paragraph start at same position
========================================================= */

.impact-item > div:last-child {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;

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

    text-align: left;
}


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

.impact-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;

    flex: 0 0 48px;

    border-radius: 50%;

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

    background: rgba(104, 64, 230, .45);
    color: #fff;

    font-size: 22px;
    line-height: 1;
}


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

.impact-item h3 {
    margin: 0 0 5px;

    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;

    color: #fff;

    text-align: left;
}


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

.impact-item p {
    margin: 0;

    font-size: 14px;
    line-height: 1.4;

    color: #fff;

    text-align: left;
}


/* =========================================================
   HORIZONTAL DIVIDER
========================================================= */

.impact-card hr {
    margin: 25px 0;

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

    opacity: 1;
}


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

.impact-card .row:first-of-type .col-6:first-child,
.impact-card .row:last-child .col-6:first-child {
    border-right: 1px solid rgba(255,255,255,.13);
}


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

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

    .impact-card {
        max-width: 100%;
        min-height: 420px;

        padding: 32px 28px;
    }

    .impact-title {
        font-size: 30px;
    }

    .impact-card .row.mt-4 {
        margin-top: 35px !important;
    }

    .impact-item {
        gap: 12px;
    }

    .impact-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        flex-basis: 44px;

        font-size: 20px;
    }

    .impact-item h3 {
        font-size: 27px;
    }

}


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

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

    .col-lg-6:has(.impact-card) {
        display: block;
    }

    .impact-card {
        max-width: 100%;
        min-height: auto;

        padding: 32px 30px;
    }

    .impact-title {
        font-size: 30px;
    }

    .impact-card .row.mt-4 {
        margin-top: 35px !important;
    }

    .impact-item {
        gap: 14px;
    }

    .impact-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        flex-basis: 46px;

        font-size: 20px;
    }

    .impact-item h3 {
        font-size: 27px;
    }

    .impact-item p {
        font-size: 13px;
        line-height: 20px;
    }

}


/* =========================================================
   MOBILE
   0px - 767px
========================================================= */

@media (max-width: 767px) {

    .col-lg-6:has(.impact-card) {
        display: block;
    }

    .impact-card {
        width: 100%;
        max-width: 100%;
        min-height: auto;

        padding: 28px 22px;

        border-radius: 18px;
    }

    /* Subtitle starts from left */
    .impact-subtitle {
        margin-bottom: 12px;

        font-size: 12px;

        text-align: left;
    }

    /* Heading starts from left */
    .impact-title {
        margin: 0;

        font-size: 25px;
        line-height: 1.25;

        text-align: left;
    }

    .impact-line {
        width: 45px;
        margin-top: 15px;
    }

    /* First row */
    .impact-card .row.mt-4 {
        margin-top: 30px !important;
    }

    .impact-item {
        min-height: 60px;

        gap: 10px;

        align-items: flex-start;
    }

    .impact-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        flex-basis: 42px;

        font-size: 18px;
    }

    .impact-item h3 {
        margin: 0 0 4px;

        font-size: 22px;
        line-height: 1.1;

        text-align: left;
    }

    .impact-item p {
        margin: 0;

        font-size: 11px;
        line-height: 1.4;

        text-align: left;
    }

    .impact-card hr {
        margin: 20px 0;
    }

}


/* =========================================================
   SMALL MOBILE
   480px and below
========================================================= */

@media (max-width: 480px) {

    .impact-card {
        padding: 25px 18px;
    }

    .impact-title {
        font-size: 23px;
    }

    .impact-card .row.mt-4 {
        margin-top: 25px !important;
    }

    .impact-item {
        gap: 8px;
    }

    .impact-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        flex-basis: 38px;

        font-size: 16px;
    }

    .impact-item h3 {
        font-size: 20px;
    }

    .impact-item p {
        font-size: 10px;
        line-height: 1.35;
    }

}


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

@media (max-width: 360px) {

    .impact-card {
        padding: 22px 14px;
    }

    .impact-title {
        font-size: 21px;
    }

    .impact-item {
        gap: 7px;
    }

    .impact-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        flex-basis: 36px;

        font-size: 15px;
    }

    .impact-item h3 {
        font-size: 18px;
    }

    .impact-item p {
        font-size: 10px;
    }

}



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

.feature-strip {
    width: 100%;
    margin-top: 60px;
    padding: 35px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

/* =========================================================
   BOOTSTRAP ROW RESET
========================================================= */

.feature-strip .row {
    width: 100%;
    margin: 0;
    align-items: stretch;
}

.feature-strip .row > div {
    padding-left: 12px;
    padding-right: 12px;
}

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

.feature {
    width: 100%;
    height: 100%;
    min-height: 100px;

    display: flex;
    align-items: flex-start;

    gap: 18px;
    padding: 18px;

    border-radius: 18px;

    box-sizing: border-box;

    transition: 0.35s ease;
}

.feature:hover {
    transform: translateY(-6px);
    background: #f8fbff;
}

/* =========================================================
   ICONS
========================================================= */

.feature i {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

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

    background: #edf4ff;
    color: #5a57ff;

    border-radius: 50%;

    font-size: 24px;

    line-height: 1;

    transition: 0.35s ease;
}

.feature:hover i {
    background: #5a57ff;
    color: #fff;
}

/* =========================================================
   QUOTE ICON
========================================================= */

.feature .quote-icon {
    background: #5a57ff !important;
    color: #fff !important;
}

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

.feature > div {
    flex: 1;
    min-width: 0;
}

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

.feature h5 {
    margin: 0 0 8px;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;

    color: #14213d;
}

/* =========================================================
   PARAGRAPH
========================================================= */

.feature p {
    margin: 0;

    font-size: 15px;
    line-height: 25px;

    color: #666;

    text-align: left;
}

/* =========================================================
   FIRST / QUOTE FEATURE
========================================================= */

.feature-strip .col-lg-4 .feature {
    align-items: flex-start;
}

.feature-strip .col-lg-4 .feature p {
    font-size: 17px;
    line-height: 30px;
    color: #333;
}

.feature > div {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.feature h5,
.feature p {
    text-align: left !important;
    margin-left: 0 !important;
}



/* =========================================================
   DESKTOP
   1200px+
========================================================= */

@media (min-width: 1200px) {

    .feature-strip {
        padding: 35px;
    }

    .feature {
        min-height: 110px;
    }

}

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

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

    .feature-strip {
        padding: 30px 25px;
    }

    .feature {
        padding: 16px;
        gap: 14px;
    }

    .feature i {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        font-size: 21px;
    }

    .feature h5 {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .feature p {
        font-size: 14px;
        line-height: 22px;
    }

    .feature-strip .col-lg-4 .feature p {
        font-size: 16px;
        line-height: 26px;
    }

}

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

   Quote = full width
   Features = 2 columns
========================================================= */

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

    .feature-strip {
        padding: 30px 25px;
    }

    .feature-strip .row {
        row-gap: 20px;
    }

    .feature-strip .col-lg-4 {
        width: 100%;
        margin-bottom: 0 !important;
    }

    .feature-strip .col-lg-2 {
        width: 50%;
    }

    .feature {
        min-height: 110px;
        padding: 18px;
    }

    .feature i {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        font-size: 22px;
    }

    .feature h5 {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .feature p {
        font-size: 14px;
        line-height: 22px;
    }

    .feature-strip .col-lg-4 .feature p {
        font-size: 16px;
        line-height: 26px;
    }

}

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

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

    .feature-strip {
        margin-top: 40px;
        padding: 25px 20px;
        border-radius: 20px;
    }

    .feature-strip .row {
        row-gap: 16px;
    }

    .feature-strip .col-lg-4,
    .feature-strip .col-lg-2 {
        width: 50%;
        margin-bottom: 0 !important;
    }

    /* Quote takes full width */
    .feature-strip .col-lg-4 {
        width: 100%;
    }

    .feature {
        min-height: 120px;
        padding: 18px 14px;

        align-items: flex-start;
        gap: 12px;
    }

    .feature i {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 20px;
    }

    .feature h5 {
        font-size: 17px;
        margin-bottom: 5px;
    }

    .feature p {
        font-size: 14px;
        line-height: 21px;
    }

    .feature-strip .col-lg-4 .feature p {
        font-size: 15px;
        line-height: 24px;
    }

}

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

@media (max-width: 575px) {

    .feature-strip {
        width: 100%;
        margin-top: 35px;
        padding: 20px 15px;
        border-radius: 18px;
    }

    .feature-strip .row {
        row-gap: 12px;
    }

    /*
       IMPORTANT:
       First quote section comes first
       and takes full width.
    */

    .feature-strip .col-lg-4 {
        width: 100%;
        margin-bottom: 0 !important;
    }

    /*
       Other four features
       become one column.
    */

    .feature-strip .col-lg-2 {
        width: 100%;
        margin-bottom: 0 !important;
    }

    .feature {
        min-height: auto;

        padding: 16px;

        align-items: flex-start;
        gap: 14px;

        text-align: left;
    }

    .feature i {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;

        font-size: 20px;
        margin: 0;
    }

    .feature h5 {
        margin: 0 0 5px;
        

        font-size: 17px;
        line-height: 1.3;
    }

    .feature p {
        margin: 0;

        font-size: 13px;
        line-height: 20px;

        text-align: left;
    }

    .feature-strip .col-lg-4 .feature {
        padding: 18px 16px;
    }

    .feature-strip .col-lg-4 .feature p {
        font-size: 15px;
        line-height: 24px;
    }

}

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

@media (max-width: 360px) {

    .feature-strip {
        padding: 16px 10px;
    }

    .feature {
        padding: 14px 10px;
        gap: 11px;
    }

    .feature i {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        font-size: 18px;
    }

    .feature h5 {
        font-size: 16px;
    }

    .feature p {
        font-size: 13px;
        line-height: 19px;
    }

}


/*==========================
    Why Learners section
===========================*/

.choose-odlc{

    padding:60px 80px;



}

.section-tag{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0d6efd;
    font-weight: 700;
    text-transform: uppercase;
}

.tag-line{
    width: 30px;          /* Line length */
    height: 6px;          /* Make it bold */
    background: #0d6efd;
    border-radius: 10px;
}

.main-heading{

    font-size:54px;

    line-height:1.1;

    font-weight:700;

    color:#081C4B;

    margin:20px 0;

}

.main-heading span{

    color:#0A56D8;

}

.yellow-line{

    width:70px;

    height:4px;

    background:#FDB813;

    border-radius:50px;

    margin-bottom:30px;

}

.section-desc{

    color:#555;

    font-size:18px;

    line-height:32px;

    margin-bottom:30px;

}

/* =========================================================
   FEATURES - EXACT SECOND IMAGE STYLE
========================================================= */

.choose-features {
    display: grid;
    grid-template-columns: 1fr 1fr;

    column-gap: 45px;
    row-gap: 18px;

    position: relative;

    margin-top: 20px;
}


/* CENTER VERTICAL LINE */

.choose-features::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    background: #e1e5ec;

    transform: translateX(-50%);
}


/* EACH FEATURE */

.choose-feature {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 40px;

    padding: 0;

    background: transparent;

    border: none;

    border-radius: 0;

    box-shadow: none;
}


/* ICON */

.choose-feature .feature-icon {
    width: 38px;
    height: 38px;

    min-width: 38px;

    display: flex;

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

    background: #eef4ff;

    border-radius: 50%;

    color: #0a56d8;

    font-size: 18px;

    box-shadow: none;
}


/* TEXT */

.feature-content {
    padding: 0;
}


.feature-content h6 {
    margin: 0;

    color: #0f2148;

    font-size: 13px;

    line-height: 1.35;

    font-weight: 700;
}


.feature-content p {
    margin: 2px 0 0;

    color: #555;

    font-size: 12px;

    line-height: 1.35;
}

/* Button */

.contact-btn{

    background:#0A56D8;

    color:#fff;

    padding:12px 32px;

    border-radius:10px;

    font-weight:600;

}

.contact-btn:hover{

    color:#fff;

    background:#003eb8;

}

.circle-btn{

    width:48px;

    height:48px;

    border:2px solid #0A56D8;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-left:15px;

    color:#0A56D8;

    text-decoration:none;

}

.right-section{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:550px;
}

/* Student Image */

.student-img{
    border-radius: 5px !important;
    width:1580px !important;
    max-width:100%;
    display:block;
}

/* =========================================================
   IMPACT / INFO CARD
   EXACT REFERENCE STYLE
========================================================= */

.info-card {
    position: absolute;
    right: -80px !important;
    top: 60% !important;
    transform: translateY(-50%);

    width: 290px;
    min-height: 400px;

    padding: 30px 28px 24px;

    background: linear-gradient(
        180deg,
        #0f5dcc 0%,
        #0b397f 100%
    );

    border-radius: 24px;

    color: #ffffff;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);

    overflow: hidden;

    z-index: 5;
}


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

.info-card h3 {
    margin: 0 0 14px;

    font-size: 18px;
    line-height: 1.45;

    font-weight: 700;

    color: #ffffff;
}


/* =========================================================
   YELLOW TITLE LINE
========================================================= */

.info-card .title-line {
    display: block;

    width: 48px;
    height: 4px;

    margin: 0 0 20px;

    background: #ffc107;

    border-radius: 20px;
}


/* =========================================================
   IMPACT ITEM
========================================================= */

.info-item {
    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 52px;
}


/* =========================================================
   WHITE ICON CIRCLE
========================================================= */

.info-card .icon-circle {
    width: 48px;
    height: 48px;

    min-width: 48px;

    display: flex;

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

    background: #ffffff;

    border-radius: 50%;

    color: #0a56d8;

    font-size: 20px;
}


/* =========================================================
   NUMBER
========================================================= */

.info-item h4 {
    margin: 0 0 2px;

    font-size: 20px;

    line-height: 1.2;

    font-weight: 700;

    color: #ffc107;
}


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

.info-item p {
    margin: 0;

    font-size: 13px;

    line-height: 1.4;

}


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

.info-card hr {
    margin: 10px 0;

    border: 0;

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


/* =========================================================
   BOTTOM CURVED DESIGN
========================================================= */

.info-card::after {
    content: "";

    position: absolute;

    right: -45px;
    bottom: -55px;

    width: 190px;
    height: 130px;

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

    border-radius: 50%;

    transform: rotate(-20deg);

    box-shadow:
        0 0 0 12px rgba(255,255,255,0.025),
        0 0 0 24px rgba(255,255,255,0.02),
        0 0 0 36px rgba(255,255,255,0.015);

    pointer-events: none;
}

.right-section {
    position: relative;

    display: flex;

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

    min-height: 540px;
}

.student-img {
    width: 620px;
    max-width: 100%;

    display: block;

    border-radius: 50%;
}

.info-card {
    right: -70px;
    top: 50%;
}


/* =========================================================
   INFO CARD RESPONSIVE
========================================================= */


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

@media (max-width: 1399px) {

    .right-section {
        min-height: 520px;
    }

    .student-img {
        width: 560px;
        max-width: 100%;
    }

    .info-card {
        right: -40px !important;
        width: 280px;
        min-height: 390px;
        padding: 28px 25px 22px;
    }

}


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

@media (max-width: 1199px) {

    .right-section {
        min-height: 500px;
    }

    .student-img {
        width: 500px;
        max-width: 100%;
    }

    .info-card {
        right: -20px !important;
        top: 50% !important;

        width: 270px;
        min-height: 380px;

        padding: 26px 23px 22px;
    }

    .info-card h3 {
        font-size: 17px;
    }

    .info-card .icon-circle {
        width: 45px;
        height: 45px;
        min-width: 45px;
        font-size: 18px;
    }

    .info-item h4 {
        font-size: 19px;
    }

    .info-item p {
        font-size: 12px;
    }

}


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

@media (max-width: 991px) {

    .right-section {
        min-height: auto;

        margin-top: 40px;

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

    .student-img {
        width: 500px;
        max-width: 90%;
    }

    .info-card {
        position: absolute;

        right: 0 !important;
        left: 50%;

        top: auto !important;
        bottom: -120px;

        transform: translateX(-50%);

        width: 90%;
        max-width: 500px;

        min-height: auto;

        padding: 25px 24px;
    }

    .info-card h3 {
        font-size: 20px;
    }

    .info-item {
        gap: 12px;
    }

    .info-card .icon-circle {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }

    .info-item h4 {
        font-size: 19px;
    }

    .info-item p {
        font-size: 12px;
    }

}


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

@media (max-width: 767px) {

    .right-section {
        margin-top: 30px;

        padding: 0 20px;

        min-height: auto;
    }

    .student-img {
        width: 100%;
        max-width: 430px;
    }

    .info-card {
        position: relative;

        left: auto;
        right: auto !important;

        bottom: auto;

        top: auto !important;

        transform: none;

        width: 100%;
        max-width: 430px;

        min-height: auto;

        margin: 25px auto 0;

        padding: 24px 20px;
    }

    .info-card h3 {
        font-size: 19px;
    }

    .info-card .title-line {
        width: 45px;
        height: 3px;
        margin-bottom: 18px;
    }

    .info-item {
        gap: 10px;
        min-height: 48px;
    }

    .info-card .icon-circle {
        width: 44px;
        height: 44px;
        min-width: 44px;

        font-size: 17px;
    }

    .info-item h4 {
        font-size: 18px;
    }

    .info-item p {
        font-size: 12px;
        line-height: 1.35;
    }

    .info-card hr {
        margin: 12px 0;
    }

}


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

@media (max-width: 575px) {

    .right-section {
        padding: 0 20px;
        margin-top: 25px;
    }

    .student-img {
        width: 100%;
        max-width: 360px;
    }

    .info-card {
        width: 100%;
        max-width: 360px;

        padding: 22px 18px;

        border-radius: 20px;
    }

    .info-card h3 {
        font-size: 18px;
        line-height: 1.4;
    }

    .info-card .icon-circle {
        width: 40px;
        height: 40px;
        min-width: 40px;

        font-size: 16px;
    }

    .info-item {
        gap: 9px;
    }

    .info-item h4 {
        font-size: 17px;
    }

    .info-item p {
        font-size: 11px;
    }

    .info-card::after {
        right: -55px;
        bottom: -60px;

        width: 170px;
        height: 110px;
    }

}


/* =========================================================
   CHOOSE ODLC - FEATURES
========================================================= */

.choose-features {
    display: grid;
    grid-template-columns: 1fr 1fr;

    column-gap: 45px;
    row-gap: 20px;

    position: relative;

    margin-top: 20px;
    width: 100%;
}


/* =========================================================
   CENTER DIVIDER
========================================================= */

.choose-features::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    background: #e1e5ec;

    transform: translateX(-50%);
}


/* =========================================================
   FEATURE ITEM
========================================================= */

.choose-feature {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 48px;

    padding: 0;

    margin: 0;

    background: transparent;

    border: none;

    box-shadow: none;

    border-radius: 0;
}


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

.choose-feature .feature-icon {

    width: 40px;
    height: 40px;

    min-width: 40px;

    display: flex;

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

    background: #eef4ff;

    border-radius: 50%;

    color: #0a56d8;

    font-size: 18px;

    flex-shrink: 0;
}


/* =========================================================
   TEXT AREA
========================================================= */

.feature-content {
    padding: 0;
    margin: 0;
}


/* TITLE */

.feature-content h6 {

    margin: 0;

    padding: 0;

    color: #0f2148;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.3;
}


/* DESCRIPTION */

.feature-content p {

    margin: 2px 0 0;

    padding: 0;

    color: #666;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.4;
}

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

@media (max-width: 991px) {

    .choose-features {

        column-gap: 30px;

        row-gap: 18px;

        margin-top: 18px;
    }


    .choose-feature {

        gap: 10px;

        min-height: 45px;
    }


    .choose-feature .feature-icon {

        width: 38px;
        height: 38px;

        min-width: 38px;

        font-size: 17px;
    }


    .feature-content h6 {

        font-size: 13px;
    }


    .feature-content p {

        font-size: 11px;
    }
}

/* =========================================================
   FIX MOBILE FEATURES
========================================================= */

@media (max-width: 767px) {

    .choose-features {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        margin-top: 20px !important;

        gap: 18px !important;

        padding: 0 !important;
    }

    /* Remove desktop divider */
    .choose-features::after {
        display: none !important;
    }

    .choose-feature {
        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: flex-start !important;

        width: 100% !important;

        gap: 12px !important;

        min-height: 42px !important;

        margin: 0 !important;

        padding: 0 !important;
    }

    /* ICON */
    .choose-feature .feature-icon {
        flex: 0 0 40px !important;

        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;

        margin: 0 !important;

        display: flex !important;

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

        font-size: 17px !important;
    }

    /* TEXT CONTAINER */
    .feature-content {
        flex: 1 1 auto !important;

        width: auto !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        text-align: left !important;
    }

    /* TITLE */
    .feature-content h6 {
        margin: 0 !important;

        padding: 0 !important;

        font-size: 14px !important;

        line-height: 1.3 !important;

        font-weight: 700 !important;

        text-align: left !important;

        white-space: normal !important;
    }

    /* DESCRIPTION */
    .feature-content p {
        margin: 2px 0 0 !important;

        padding: 0 !important;

        font-size: 12px !important;

        line-height: 1.4 !important;

        text-align: left !important;
    }
}

@media (max-width: 575px) {

    .choose-odlc {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .choose-features {
        gap: 17px !important;
    }

    .choose-feature {
        gap: 11px !important;
    }

    .choose-feature .feature-icon {
        flex: 0 0 38px !important;

        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;

        font-size: 16px !important;
    }

    .feature-content h6 {
        font-size: 13px !important;
    }

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

/* =========================================================
   CHOOSE ODLC - FONT SIZES FOR ALL DEVICES
========================================================= */

/* DESKTOP */
.choose-odlc .section-tag {
    font-size: 14px;
}

.choose-odlc .main-heading {
    font-size: 52px;
}

.choose-odlc .section-desc {
    font-size: 17px;
    line-height: 29px;
}

.choose-odlc .feature-content h6 {
    font-size: 15px;
}

.choose-odlc .feature-content p {
    font-size: 13px;
}

.choose-odlc .contact-btn {
    font-size: 15px;
}

.choose-odlc .circle-btn {
    font-size: 18px;
}


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

@media (max-width: 1199px) {

    .choose-odlc .section-tag {
        font-size: 13px;
    }

    .choose-odlc .main-heading {
        font-size: 44px;
    }

    .choose-odlc .section-desc {
        font-size: 16px;
        line-height: 27px;
    }

    .choose-odlc .feature-content h6 {
        font-size: 14px;
    }

    .choose-odlc .feature-content p {
        font-size: 12px;
    }

    .choose-odlc .contact-btn {
        font-size: 14px;
    }
}


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

@media (max-width: 767px) {

    .choose-odlc .section-tag {
        font-size: 13px !important;
    }

    .choose-odlc .main-heading {
        font-size: 32px !important;
        line-height: 1.15 !important;
    }

    .choose-odlc .section-desc {
        font-size: 15px !important;
        line-height: 25px !important;
    }

    .choose-odlc .feature-content h6 {
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    .choose-odlc .feature-content p {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .choose-odlc .contact-btn {
        font-size: 14px !important;
    }

    .choose-odlc .circle-btn {
        font-size: 17px !important;
    }
}


/* =========================================================
   SMALL MOBILE - 375px / 360px
========================================================= */

@media (max-width: 575px) {

    .choose-odlc .section-tag {
        font-size: 12px !important;
    }

    .choose-odlc .main-heading {
        font-size: 30px !important;
    }

    .choose-odlc .section-desc {
        font-size: 14px !important;
        line-height: 24px !important;
    }

    .choose-odlc .feature-content h6 {
        font-size: 14px !important;
    }

    .choose-odlc .feature-content p {
        font-size: 12px !important;
    }

    .choose-odlc .contact-btn {
        font-size: 14px !important;
    }
}


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

@media (max-width: 360px) {

    .choose-odlc .main-heading {
        font-size: 28px !important;
    }

    .choose-odlc .section-desc {
        font-size: 14px !important;
    }

    .choose-odlc .feature-content h6 {
        font-size: 13px !important;
    }

    .choose-odlc .feature-content p {
        font-size: 11px !important;
    }
}

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

.bottom-features{

    background:#fff;

    border-radius:22px;

    padding:30px;

    margin-top:70px;

    box-shadow:

    0 12px 40px rgba(0,0,0,.08);

}

.bottom-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:10px 25px;

    height:100%;

}

.bottom-item h5{

    font-size:20px;

    font-weight:700;

    color:#14244E;

    margin-bottom:8px;

}

.bottom-item p{

    color:#666;

    line-height:28px;

    margin:0;

}

/*=======================
Icons
=======================*/

.bottom-icon{

    width:55px;

    height:55px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    flex-shrink:0;

}

.purple{

    background:#EFE8FF;

    color:#7755FF;

}

.green{

    background:#EAF8EA;

    color:#1BA54A;

}

.yellow{

    background:#FFF6DE;

    color:#F3A100;

}

.blue{

    background:#EEF4FF;

    color:#0A56D8;

}

/*=======================
Vertical Divider
=======================*/

.border-start-custom{

    border-left:1px dashed #d9d9d9;

}

@media(max-width:992px){

.bottom-item{

border:none !important;

padding:20px 10px;

}

.border-start-custom{

border-left:none;

}

.bottom-features{

padding:20px;

}

}

@media(max-width:768px){

.bottom-item{

flex-direction:column;

text-align:center;

align-items:center;

}

.bottom-item h5{

font-size:18px;

}

.bottom-item p{

font-size:14px;

line-height:24px;

}

}

.programs-section{

    position:relative;

    padding:90px 0;

}

.program-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

    background:#EEF4FF;

    color:#1D5EFF;

    font-size:15px;

    font-weight:700;

}

.program-badge i{

    font-size:18px;

}

.program-title{

    margin-top:25px;

    font-size:62px;

    font-weight:700;

    line-height:1.15;

    color:#0A1F5A;

}

.program-title span{

    color:#5B5CF6;

}

.title-line{

    width:70px;

    height:5px;

    background:#4169FF;

    border-radius:20px;

    margin:25px auto;

}

.program-text{

    max-width:720px;

    margin:auto;

    font-size:18px;

    color:#667085;

    line-height:1.8;

}



/* =========================================================
   WHY LEARNERS - RESPONSIVE
========================================================= */


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

@media (max-width: 1399px) {

    .choose-odlc {
        padding: 55px 50px;
    }

    .main-heading {
        font-size: 48px;
    }

    .section-desc {
        font-size: 16px;
        line-height: 28px;
    }

    .choose-features {
        column-gap: 30px;
        row-gap: 16px;
    }

    .feature-content h6 {
        font-size: 13px;
    }

    .feature-content p {
        font-size: 12px;
    }

    .right-section {
        min-height: 500px;
    }

    .student-img {
        width: 650px;
    }

    .info-card {
        right: -80px;
        width: 290px;
        padding: 25px;
    }

    .bottom-features {
        padding: 25px 15px;
    }

    .bottom-item {
        padding: 10px 15px;
        gap: 12px;
    }

    .bottom-item h5 {
        font-size: 17px;
    }

    .bottom-item p {
        font-size: 13px;
        line-height: 21px;
    }
}


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

@media (max-width: 1199px) {

    .choose-odlc {
        padding: 50px 35px;
    }

    .main-heading {
        font-size: 42px;
    }

    .section-desc {
        font-size: 15px;
        line-height: 26px;
    }

    .choose-features {
        column-gap: 20px;
        row-gap: 16px;
    }

    .choose-feature {
        gap: 9px;
    }

    .choose-feature .feature-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 16px;
    }

    .feature-content h6 {
        font-size: 12px;
    }

    .feature-content p {
        font-size: 11px;
    }

    .right-section {
        min-height: 450px;
    }

    .student-img {
        width: 570px;
    }

    .info-card {
        right: -55px;
        width: 260px;
        padding: 22px;
    }

    .info-card h3 {
        font-size: 19px;
    }

    .info-item {
        gap: 10px;
    }

    .icon-circle {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 17px;
    }

    .info-item h4 {
        font-size: 19px;
    }

    .info-item p {
        font-size: 13px;
    }

    .info-card hr {
        margin: 14px 0;
    }

    .bottom-features {
        margin-top: 50px;
        padding: 20px 10px;
    }

    .bottom-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
        border-radius: 14px;
    }

    .bottom-item {
        padding: 8px 12px;
        gap: 10px;
    }

    .bottom-item h5 {
        font-size: 15px;
    }

    .bottom-item p {
        font-size: 12px;
        line-height: 19px;
    }
}


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

@media (max-width: 991px) {

    .choose-odlc {
        padding: 50px 30px;
    }

    .main-heading {
        font-size: 40px;
    }

    .section-desc {
        font-size: 16px;
        line-height: 27px;
    }


    /* FEATURES */

    .choose-features {
        column-gap: 35px;
        row-gap: 18px;
    }

    .choose-feature .feature-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 17px;
    }

    .feature-content h6 {
        font-size: 13px;
    }

    .feature-content p {
        font-size: 12px;
    }


    /* RIGHT IMAGE */

    .right-section {
        margin-top: 50px;
        min-height: 500px;
    }

    .student-img {
        width: 650px;
        max-width: 85%;
    }

    .info-card {
        right: 0;
        width: 280px;
        padding: 25px;
    }


    /* BOTTOM FEATURES */

    .bottom-features {
        margin-top: 50px;
        padding: 20px;
    }

    .bottom-item {
        padding: 20px 15px;
    }

    .bottom-item h5 {
        font-size: 16px;
    }

    .bottom-item p {
        font-size: 13px;
        line-height: 21px;
    }

    .border-start-custom {
        border-left: none !important;
    }
}


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

@media (max-width: 767px) {

    .choose-odlc {
        padding: 40px 20px;
    }


    /* SECTION TAG */

    .section-tag {
        font-size: 12px;
        gap: 7px;
    }

    .tag-line {
        width: 25px;
        height: 4px;
    }


    /* MAIN HEADING */

    .main-heading {
        font-size: 34px;
        line-height: 1.12;
        margin: 15px 0;
    }


    /* YELLOW LINE */

    .yellow-line {
        width: 55px;
        height: 4px;
        margin-bottom: 20px;
    }


    /* DESCRIPTION */

    .section-desc {
        font-size: 15px;
        line-height: 25px;
        margin-bottom: 25px;
    }


    /* FEATURES */

    .choose-features {

        grid-template-columns: 1fr;

        gap: 16px;

        margin-top: 15px;
    }


    /* REMOVE CENTER LINE */

    .choose-features::after {
        display: none;
    }


    .choose-feature {
        gap: 12px;
        min-height: 42px;
    }


    .choose-feature .feature-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 17px;
    }


    .feature-content h6 {
        font-size: 14px;
        line-height: 1.35;
    }


    .feature-content p {
        font-size: 12px;
        line-height: 1.4;
    }


    /* BUTTON */

    .contact-btn {
        padding: 10px 25px;
        font-size: 14px;
    }

    .circle-btn {
        width: 44px;
        height: 44px;
        margin-left: 12px;
    }


    /* RIGHT SECTION */

    .right-section {
        min-height: auto;
        margin-top: 45px;

        display: flex;
        flex-direction: column;
    }


    .student-img {
        width: 100%;
        max-width: 100%;
        border-radius: 30px;
    }


    /* BLUE CARD */

    .info-card {

        position: relative;

        top: auto;
        right: auto;

        transform: none;

        width: 100%;

        margin-top: -20px;

        padding: 22px;

        border-radius: 20px;
    }


    .info-card h3 {
        font-size: 20px;
        line-height: 1.4;
    }


    .title-line {
        width: 45px;
        height: 3px;
        margin-bottom: 18px;
    }


    .info-item {
        gap: 12px;
    }


    .icon-circle {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 17px;
    }


    .info-item h4 {
        font-size: 19px;
    }


    .info-item p {
        font-size: 13px;
    }


    .info-card hr {
        margin: 14px 0;
    }


    /* BOTTOM FEATURES */

    .bottom-features {

        margin-top: 40px;

        padding: 20px 15px;

        border-radius: 18px;
    }


    .bottom-item {

        flex-direction: row;

        text-align: left;

        align-items: flex-start;

        padding: 15px 10px;

        gap: 12px;
    }


    .bottom-icon {

        width: 45px;
        height: 45px;

        min-width: 45px;

        font-size: 20px;

        border-radius: 14px;
    }


    .bottom-item h5 {
        font-size: 16px;
        margin-bottom: 5px;
    }


    .bottom-item p {
        font-size: 12px;
        line-height: 19px;
    }


    .border-start-custom {
        border-left: none !important;
    }
}


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

@media (max-width: 575px) {

    .choose-odlc {
        padding: 35px 16px;
    }


    .section-tag {
        font-size: 11px;
    }


    .main-heading {
        font-size: 30px;
    }


    .section-desc {
        font-size: 14px;
        line-height: 23px;
    }


    .choose-features {
        gap: 15px;
    }


    .choose-feature {
        gap: 10px;
    }


    .choose-feature .feature-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 16px;
    }


    .feature-content h6 {
        font-size: 13px;
    }


    .feature-content p {
        font-size: 11px;
    }


    .contact-btn {
        padding: 9px 20px;
        font-size: 13px;
    }


    .circle-btn {
        width: 40px;
        height: 40px;
    }


    .student-img {
        border-radius: 25px;
    }


    .info-card {
        padding: 20px;
        border-radius: 18px;
    }


    .info-card h3 {
        font-size: 18px;
    }


    .info-item h4 {
        font-size: 18px;
    }


    .info-item p {
        font-size: 12px;
    }


    .icon-circle {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }


    .bottom-features {
        padding: 15px 10px;
    }


    .bottom-item {
        padding: 12px 5px;
    }


    .bottom-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 18px;
    }


    .bottom-item h5 {
        font-size: 14px;
    }


    .bottom-item p {
        font-size: 11px;
        line-height: 18px;
    }
}


/* =========================================================
   EXTRA SMALL MOBILE
   Below 375px
========================================================= */

@media (max-width: 374px) {

    .choose-odlc {
        padding: 30px 12px;
    }


    .main-heading {
        font-size: 27px;
    }


    .section-desc {
        font-size: 13px;
    }


    .choose-feature .feature-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }


    .feature-content h6 {
        font-size: 12px;
    }


    .feature-content p {
        font-size: 10px;
    }


    .info-card h3 {
        font-size: 17px;
    }


    .bottom-item h5 {
        font-size: 13px;
    }


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




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

.programmes-section {

    position: relative;

    width: 100%;

    padding: 60px 40px;

    background: #ffffff;

    overflow: hidden;

}


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

.programmes-section > .section-container {

    width: 100%;

    max-width: 1320px;

    margin: 0 auto;

    padding: 0 40px;

}


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

.programmes-header {

    width: 100%;

    max-width: 1000px;

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

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

}


/* =========================================
   ONLY ONE PROGRAMME BADGE
========================================= */

.programmes-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 9px 22px;

    background: #eef4ff;

    border-radius: 40px;

    color: #1764db;

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 20px;

}


.programmes-badge i {

    font-size: 18px;

}


/* =========================================
   MAIN TITLE
========================================= */

.programmes-title {

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    color: #0b1f4d;

    font-size: 48px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;

    text-align: center;

}


.programmes-title span {

    background:
        linear-gradient(
            90deg,
            #654cff,
            #397cff,
            #36a9f5
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


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

.programmes-line {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin: 18px auto;

}


.programmes-line::before {

    content: "";

    width: 60px;

    height: 5px;

    background: #2868ed;

    border-radius: 20px;

}


.programmes-line span {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #4b78ff;

}


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

.programmes-description {

    max-width: 760px;

    margin: 0 auto;

    color: #667085;

    font-size: 16px;

    line-height: 1.7;

}


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

.program-circle-badge {

    position: absolute;

    left: 65px;

    top: 95px;

    width: 150px;

    height: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 5;

}


.program-circle-badge::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(91,92,246,.13),
            rgba(91,92,246,.04) 60%,
            transparent 72%
        );

}


.program-circle-inner {

    position: relative;

    width: 62px;

    height: 62px;

    border-radius: 50%;

    background: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 3;

    box-shadow:
        0 8px 25px rgba(30,70,150,.08);

}


.program-circle-inner i {

    color: #2164d8;

    font-size: 28px;

}


.program-circle-text {

    position: absolute;

    inset: 0;

    width: 150px;

    height: 150px;

    z-index: 4;

}


.program-circle-text text {

    fill: #526df5;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

}


/* =========================================
   RIGHT 200+ CARD
========================================= */

.program-count-card {

    position: absolute;

    top: 95px;

    right: 70px;

    width: 145px;

    height: 180px;

    padding: 22px 18px;

    background: #fff;

    border-radius: 16px;

    box-shadow:
        0 12px 35px rgba(30,70,130,.08);

    overflow: hidden;

    z-index: 5;

}


.program-count-icon {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    color: #1764db;

    font-size: 24px;

    margin-bottom: 8px;

}


.program-count-card h3 {

    margin: 0 0 5px;

    color: #173d82;

    font-size: 25px;

    font-weight: 800;

}


.program-count-card p {

    margin: 0;

    color: #667085;

    font-size: 13px;

    line-height: 1.5;

}


.program-count-wave {

    position: absolute;

    left: -5px;

    bottom: 12px;

    width: 160px;

    height: 35px;

    border-top: 2px solid #4d8cff;

    border-radius: 50%;

    transform: rotate(-6deg);

}


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

@media (max-width: 991px) {

    .programmes-section {

        padding: 60px 30px 25px;

    }

    .programmes-title {

        font-size: 40px;

    }

}


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

@media (max-width: 767px) {

    .programmes-section {

        padding: 50px 20px 20px;

    }

    .programmes-badge {

        font-size: 13px;

        padding: 8px 16px;

    }

    .programmes-title {

        font-size: 32px;

        line-height: 1.2;

        letter-spacing: -0.5px;

    }

    .programmes-description {

        font-size: 15px;

        line-height: 1.6;

    }

}


/* =========================================
   HIDE DECORATIVE BADGES ON MOBILE
========================================= */

@media (max-width: 991px) {

    .program-circle-badge,
    .program-count-card {
        display: none !important;
    }

}

@media (max-width: 767px) {

    .program-circle-badge,
    .program-count-card {
        display: none !important;
    }

}

/* =========================================
   FORCE PROGRAMMES HEADER CENTER
========================================= */

@media (max-width: 991px) {

    .programmes-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
    }

    .programmes-badge {
        position: static !important;
        display: inline-flex !important;
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .programmes-title {
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .programmes-line {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .programmes-description {
        width: 100% !important;
        max-width: 760px !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

}


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

@media (max-width: 480px) {

    .programmes-section {

        padding-left: 20px;

        padding-right: 20px;

    }

    .programmes-title {

        font-size: 28px;

    }

    .programmes-description {

        font-size: 14px;

    }

}

/* =========================================
   PROGRAM GRID
========================================= */

.program-grid {

    display: grid;

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

    gap: 18px;

    margin-top: 30px;

}


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

.program-card {

    position: relative;

    height: 280px;

    background: #ffffff;

    border: 1px solid #e4e9f2;

    border-radius: 16px;

    overflow: hidden;

    display: flex;

    align-items: stretch;

    box-shadow:
        0 6px 20px rgba(30,70,130,.06);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


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

.program-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 14px 35px rgba(30,70,130,.12);

}


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

.program-card-content {

    position: relative;

    width: 52%;

    padding: 18px 10px 15px 18px;

    z-index: 3;

    background: #ffffff;

}


/* =========================================
   PROGRAM ICON
========================================= */

.program-icon {

    width: 34px;

    height: 34px;

    border-radius: 9px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-size: 17px;

    margin-bottom: 9px;

}


/* COLORS */

.purple-icon {
    background: #6655ee;
}

.blue-icon {
    background: #2377e8;
}

.green-icon {
    background: #24b96f;
}

.orange-icon {
    background: #f47b20;
}

.pink-icon {
    background: #ee4ca3;
}

.cyan-icon {
    background: #18bfc4;
}

.violet-icon {
    background: #6655e8;
}

.dark-blue-icon {
    background: #3976df;
}


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

.program-card h6 {

    margin: 0;

    color: #132653;

    font-size: 12px;

    line-height: 1.45;

    font-weight: 600;

}


/* =========================================
   SMALL LINE
========================================= */

.program-mini-line {

    display: block;

    width: 25px;

    height: 3px;

    margin: 7px 0;

    background: #4169ff;

    border-radius: 20px;

}


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

.program-card p {

    margin: 0;

    color: #667085;

    font-size: 11px;

    line-height: 1.55;

}


/* =========================================
   PROGRAM CARD IMAGE
========================================= */

.program-card {
    position: relative;
    overflow: hidden;
}

.program-card-image {
    position: absolute;
    top: 0;
    right: 0;

    width: 50%;
    height: 100%;

    overflow: hidden;
    z-index: 1;
}

/* =========================================
   IMAGE FIT - COMPLETE RIGHT HALF
========================================= */

.program-card-image img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: cover !important;
    object-position: center center !important;

    background: none !important;
}

/* =========================================
   SOFT BLEND INTO CONTENT
========================================= */

.program-card-image::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 35px;
    height: 100%;

    z-index: 2;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255,255,255,0.55) 45%,
        rgba(255,255,255,0) 100%
    );
}

/* =========================================
   ARROW BUTTON
========================================= */

.program-arrow {

    position: absolute;

    right: 14px;

    bottom: 13px;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: #ffffff;

    color: #2164d8;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    z-index: 5;

    box-shadow:
        0 5px 15px rgba(0,0,0,.10);

    font-size: 16px;

    transition: .3s;

}


.program-arrow:hover {

    background: #2164d8;

    color: #ffffff;

    transform: translateX(3px);

}

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

@media (max-width: 1399px) {

    .program-grid {

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

        gap: 15px;

    }

    .program-card {

        height: 295px;

    }

    .program-card-content {

        padding: 16px 8px 14px 15px;

    }

}


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

@media (max-width: 1199px) {

    .program-grid {

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

        gap: 18px;

    }

    .program-card {

        height: 190px;

    }

    .program-card h3 {

        font-size: 14px;

    }

    .program-card p {

        font-size: 12px;

    }

}


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

@media (max-width: 991px) {

    .program-grid {

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

        gap: 16px;

        margin-top: 25px;

    }

    .program-card {

        height: 225px;

    }

    .program-card-content {

        width: 55%;

        padding: 17px;

    }

}


/* =========================================
   MOBILE
   BELOW 767px
========================================= */

@media (max-width: 767px) {

    .program-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .program-card {

        height: 235px;

    }

    .program-card-content {

        width: 55%;

        padding: 18px;

    }

    .program-card h3 {

        font-size: 14px;

    }

    .program-card p {

        font-size: 12px;

        line-height: 1.5;

    }

}


/* =========================================
   SMALL MOBILE
   BELOW 480px
========================================= */

@media (max-width: 480px) {

    .program-card {

        height: 225px;

    }

    .program-card-content {

        width: 58%;

        padding: 16px;

    }

    .program-icon {

        width: 32px;

        height: 32px;

        font-size: 16px;

    }

    .program-card h3 {

        font-size: 13px;

    }

    .program-card p {

        font-size: 11px;

    }

    .program-arrow {

        width: 36px;

        height: 36px;

        right: 10px;

        bottom: 10px;

    }

}

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

.program-features {

    position: relative;

    display: grid;

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

    align-items: center;

    background: #ffffff;

    border-radius: 20px;

    padding: 20px 25px;

    margin-top: 30px;

     margin-bottom: 60px;


    box-shadow:
        0 10px 35px rgba(30,70,130,.08);

    z-index: 10;

}


/* =========================================
   FEATURE ITEM
========================================= */

.program-feature-item {

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 70px;

    padding: 8px 25px;

    position: relative;

}


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

.program-feature-item:not(:last-child)::after {

    content: "";

    position: absolute;

    right: 0;

    top: 10px;

    width: 1px;

    height: 55px;

    border-right: 1px dashed #d8dee9;

}


/* =========================================
   FEATURE ICON
========================================= */

.program-feature-icon {

    width: 48px;

    height: 48px;

    min-width: 48px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

}


/* =========================================
   ICON COLORS
========================================= */

.blue-feature {

    background: #edf4ff;

    color: #2868ed;

}

.green-feature {

    background: #ebf8ec;

    color: #20a74f;

}

.purple-feature {

    background: #f0edff;

    color: #6755ed;

}

.orange-feature {

    background: #fff5df;

    color: #eea21c;

}


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

.program-feature-content {

    min-width: 0;

}


.program-feature-content h5 {

    margin: 0 0 5px;

    color: #142653;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.3;

}


.program-feature-content p {

    margin: 0;

    color: #667085;

    font-size: 11px;

    line-height: 1.55;

}


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

@media (max-width: 1199px) {

    .program-features {

        padding: 18px 15px;

    }

    .program-feature-item {

        padding: 8px 15px;

        gap: 10px;

    }

    .program-feature-icon {

        width: 44px;

        height: 44px;

        min-width: 44px;

        font-size: 20px;

    }

}


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

@media (max-width: 991px) {

    .program-features {

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

        padding: 15px;

    }

    .program-feature-item {

        padding: 15px;

    }

    .program-feature-item:nth-child(2)::after {

        display: none;

    }

    .program-feature-item:nth-child(3)::after {

        display: block;

    }

}


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

@media (max-width: 767px) {

    .program-features {

        grid-template-columns: 1fr;

        border-radius: 16px;

        padding: 10px 15px;

    }

    .program-feature-item {

        padding: 15px 10px;

        min-height: 65px;

    }

    .program-feature-item::after {

        display: none !important;

    }

    .program-feature-icon {

        width: 45px;

        height: 45px;

        min-width: 45px;

    }

    .program-feature-content h4 {

        font-size: 14px;

    }

    .program-feature-content p {

        font-size: 12px;

    }

}


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

@media (max-width: 480px) {

    .program-features {

        margin-top: 18px;

        padding: 8px 12px;

    }

    .program-feature-item {

        gap: 12px;

        padding: 13px 5px;

    }

}







/* =========================================
   APPLY HERO
========================================= */

.apply-hero {

    position: relative;

    padding: 75px 40px 65px;

    background: #f5f7ff;

    overflow: hidden;

}


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

.apply-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 18px;

    background: #eef2ff;

    border-radius: 12px;

    color: #315edb;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 20px;

}


.apply-badge i {

    font-size: 18px;

}


.apply-title {

    max-width: 650px;

    margin: 0;

    color: #091a48;

    font-size: 52px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1px;

}


.apply-title span {

    color: #2867dc;

}


.apply-line {

    width: 75px;

    height: 4px;

    margin: 20px 0;

    border-radius: 20px;

    background: #316be5;

}


.apply-description {

    max-width: 550px;

    margin-bottom: 28px;

    color: #596579;

    font-size: 17px;

    line-height: 1.7;

}


.apply-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 13px 24px;

    background: #125bd6;

    color: #fff;

    border-radius: 10px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

    transition: .3s;

}


.apply-btn:hover {

    background: #0846b5;

    color: #fff;

    transform: translateY(-2px);

}


.apply-btn i {

    font-size: 18px;

}


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

.apply-image-wrapper {

    position: relative;

    width: 100%;

    max-width: 600px;

    height: 390px;

    margin: auto;

}


.apply-student-img {

    position: absolute;

    width: 98%;

    height: 370px;

    object-fit: cover;

    object-position: center;

    right: 0;

    top: 25px;

    border-radius: 100px 100px 100px 100px;

    z-index: 2;

}


/* =========================================
   BACKGROUND SHAPE
========================================= */

.apply-bg-shape {

    position: absolute;

    width: 260px;

    height: 160px;

    left: 30px;

    bottom: 20px;

    background: #dfe6ff;

    border-radius: 50%;

    transform: rotate(-15deg);

}


/* =========================================
   FLOATING ICON
========================================= */

.apply-floating-icon {

    position: absolute;

    right: -5px;

    bottom: 55px;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: #614df5;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;

    z-index: 5;

    box-shadow:
        0 10px 25px rgba(70,60,200,.25);

}

/* =========================================
   APPLICATION SECTION
========================================= */

.application-section {

    padding: 65px 40px;

    background: #fff;

}


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

.application-heading {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 30px;

}


.application-heading-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #eef4ff;

    color: #2164db;

    font-size: 21px;

}


.application-heading h3 {

    margin: 0 0 3px;

    color: #102454;

    font-size: 23px;

    font-weight: 750;

}


.application-heading p {

    margin: 0;

    color: #718096;

    font-size: 14px;

}


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

.application-card {

    height: 100%;

    padding: 25px;

    display: flex;

    align-items: flex-start;

    gap: 20px;

    background: #fff;

    border: 1px solid #e7ebf5;

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(20,50,100,.05);

    transition: .3s;

}


.application-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(20,50,100,.10);

}


.application-icon {

    width: 58px;

    height: 58px;

    min-width: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    font-size: 24px;

}


.application-icon.purple {

    background: #f0eaff;

    color: #7956ef;

}


.application-icon.green {

    background: #e7f9ef;

    color: #20ad65;

}


.application-icon.orange {

    background: #fff1df;

    color: #f19a24;

}


.application-content h4 {

    margin: 0 0 8px;

    color: #102454;

    font-size: 17px;

    font-weight: 700;

}


.application-content p {

    margin: 0 0 15px;

    color: #687387;

    font-size: 14px;

    line-height: 1.6;

}


.application-content a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #2867dc;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

}

/* Desktop */
.application-section,
.apply-hero {
    padding-left: 40px;
    padding-right: 40px;
}

/* Laptop */
@media(max-width:1199px) {
    .application-section,
    .apply-hero {
        padding-left: 35px;
        padding-right: 35px;
    }
}

/* Tablet */
@media(max-width:991px) {
    .application-section,
    .apply-hero {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Mobile */
@media(max-width:767px) {
    .application-section,
    .apply-hero {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* =========================================
   INTERNATIONAL SECTION
========================================= */

.international-section {

    background: #f7f9ff;

    border-radius: 24px;

}


/* International globe icon */

.international-icon {

    background: #eef5ff;

    color: #2867dc;

}


/* =========================================
   BLUE APPLICATION ICON
========================================= */

.application-icon.blue {

    background: #eaf2ff;

    color: #2870df;

}


/* =========================================
   MAKE 4 CARDS EQUAL
========================================= */

.international-section .application-card {

    min-height: 190px;

}


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

@media (max-width:1199px) {

    .international-section .application-card {

        min-height: 180px;

    }

}


@media (max-width:767px) {

    .international-section {

        border-radius: 18px;

    }

    .international-section .application-card {

        min-height: auto;

        padding: 22px;

    }

}

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

.global-opportunities {

    padding: 25px 40px 70px;

    background: #f7f9ff;

}


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

.global-opportunity-card {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 28px 35px;

    background: #ffffff;

    border: 1px solid #e8ecf7;

    border-radius: 20px;

    box-shadow:
        0 10px 35px rgba(30,60,120,.07);

    overflow: hidden;

}


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

.global-content {

    display: flex;

    align-items: center;

    gap: 18px;

}


.global-icon {

    width: 58px;

    height: 58px;

    min-width: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eef4ff;

    color: #2867dc;

    border-radius: 17px;

    font-size: 25px;

}


.global-label {

    display: block;

    margin-bottom: 5px;

    color: #2867dc;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .8px;

}


.global-content h4 {

    margin: 0 0 5px;

    color: #102454;

    font-size: 25px;

    font-weight: 750;

}


.global-content h4 span {

    color: #4d5ff5;

}


.global-content p {

    margin: 0;

    color: #687387;

    font-size: 14px;

    line-height: 1.5;

}


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

.global-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 24px;

    min-width: 220px;

    background: linear-gradient(
        135deg,
        #2867dc,
        #5b4ff5
    );

    color: #fff;

    border-radius: 10px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    transition: .3s;

}


.global-btn:hover {

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(55,85,220,.25);

}


.global-btn i {

    font-size: 18px;

    transition: .3s;

}


.global-btn:hover i {

    transform: translateX(4px);

}

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

@media (max-width:1199px) {

    .global-opportunities {

        padding-left: 35px;
        padding-right: 35px;

    }

}


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

@media (max-width:991px) {

    .global-opportunities {

        padding-left: 30px;
        padding-right: 30px;

    }

    .global-opportunity-card {

        padding: 25px;

    }

    .global-content h3 {

        font-size: 22px;

    }

}


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

@media (max-width:767px) {

    .global-opportunities {

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

        padding-bottom: 50px;

    }

    .global-opportunity-card {

        flex-direction: column;

        align-items: flex-start;

        padding: 24px 20px;

        gap: 22px;

    }

    .global-content {

        align-items: flex-start;

    }

    .global-icon {

        width: 50px;
        height: 50px;

        min-width: 50px;

        font-size: 21px;

    }

    .global-content h3 {

        font-size: 21px;

    }

    .global-content p {

        font-size: 13px;

    }

    .global-btn {

        width: 100%;

        min-width: 0;

    }

}


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

@media (max-width:480px) {

    .global-opportunity-card {

        padding: 20px 16px;

    }

    .global-content {

        gap: 12px;

    }

    .global-content h3 {

        font-size: 19px;

    }

    .global-content p {

        font-size: 12px;

    }

}



/* =========================================
   WHY ODLC SECTION
========================================= */

.why-odlc {

    position: relative;

    padding: 45px 40px 45px;

    background: #f7f9ff;

    overflow: hidden;

}





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

.why-header {

    max-width: 950px;

    margin: 0 auto;

    text-align: center;

}


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

.why-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 9px 18px;

    background: #edf2ff;

    color: #2867dc;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .4px;

    margin-bottom: 18px;

}


.why-badge i {

    font-size: 15px;

}


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

.why-title {

    margin: 0;

    color: #0b1c48;

    font-size: 52px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;

}


.why-title span {

    background: linear-gradient(
        90deg,
        #285ee0,
        #614df5
    );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


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

.why-line {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin: 20px auto;

}


.why-line span {

    display: block;

    width: 48px;

    height: 4px;

    border-radius: 20px;

    background: #326de5;

}


.why-line i {

    display: block;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #5d55f5;

}


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

.why-description {

    max-width: 780px;

    margin: 0 auto;

    color: #687387;

    font-size: 16px;

    line-height: 1.75;

}

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

@media (max-width:1199px) {

    .why-odlc {

        padding-left: 35px;
        padding-right: 35px;

    }

    .why-title {

        font-size: 46px;

    }

}


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

@media (max-width:991px) {

    .why-odlc {

        padding-left: 30px;
        padding-right: 30px;

        padding-top: 60px;

    }

    .why-title {

        font-size: 40px;

    }

    .why-description {

        font-size: 15px;

    }

}


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

@media (max-width:767px) {

    .why-odlc {

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

        padding-top: 50px;

    }

    .why-badge {

        font-size: 12px;

        padding: 8px 15px;

    }

    .why-title {

        font-size: 32px;

        line-height: 1.2;

        letter-spacing: -.5px;

    }

    .why-line {

        margin: 16px auto;

    }

    .why-description {

        font-size: 14px;

        line-height: 1.7;

    }

}


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

@media (max-width:480px) {

    .why-title {

        font-size: 28px;

    }

    .why-description {

        font-size: 13px;

    }

}

/* =========================================
   MAIN COMPARISON STATS
========================================= */

.comparison-stats {

    padding: 20px 40px 5px;

    background: #f7f9ff;

}


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

.comparison-card {

    position: relative;

    height: 190px;

    padding: 22px 15px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e9edf6;

    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(30,60,120,.06);

    transition: .3s;

}


.comparison-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(30,60,120,.11);

}


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

.comparison-icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 22px;

    margin-bottom: 10px;

}


/* =========================================
   ICON COLORS
========================================= */

.icon-blue {

    background: #eaf2ff;

    color: #2867dc;

}


.icon-green {

    background: #e8f8ee;

    color: #22a565;

}


.icon-purple {

    background: #f0eaff;

    color: #7654e9;

}


.icon-orange {

    background: #fff0e3;

    color: #ef8b2c;

}


.icon-pink {

    background: #ffeaf3;

    color: #e84b91;

}


.icon-cyan {

    background: #e7f8fa;

    color: #159eaf;

}


/* =========================================
   NUMBER
========================================= */

.comparison-card h3 {

    margin: 0 0 7px;

    font-size: 30px;

    line-height: 1;

    font-weight: 800;

    color: #2867dc;

}


.icon-green + h3 {

    color: #22a565;

}


.icon-purple + h3 {

    color: #7654e9;

}


.icon-orange + h3 {

    color: #ef8b2c;

}


.icon-pink + h3 {

    color: #e84b91;

}


.icon-cyan + h3 {

    color: #159eaf;

}


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

.comparison-card p {

    margin: 0;

    color: #344054;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.5;

}


/* =========================================
   SMALL LINE
========================================= */

/* .comparison-line {

    position: absolute;

    bottom: 18px;

    width: 28px;

    height: 3px;

    border-radius: 20px;

    background: #2867dc;

} */


.icon-green ~ .comparison-line {

    background: #22a565;

}


.icon-purple ~ .comparison-line {

    background: #7654e9;

}


.icon-orange ~ .comparison-line {

    background: #ef8b2c;

}


.icon-pink ~ .comparison-line {

    background: #e84b91;

}


.icon-cyan ~ .comparison-line {

    background: #159eaf;

}

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

@media (max-width:1199px) {

    .comparison-stats {

        padding-left: 35px;
        padding-right: 35px;

    }

    .comparison-card {

        height: 185px;

    }

}


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

@media (max-width:991px) {

    .comparison-stats {

        padding-left: 30px;
        padding-right: 30px;

    }

    .comparison-card {

        height: 180px;

    }

}


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

@media (max-width:767px) {

    .comparison-stats {

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

        padding-bottom: 35px;

    }

    .comparison-card {

        height: 175px;

        padding: 20px 10px;

    }

    .comparison-icon {

        width: 46px;

        height: 46px;

        font-size: 20px;

    }

    .comparison-card h3 {

        font-size: 27px;

    }

    .comparison-card p {

        font-size: 11px;

    }

}


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

@media (max-width:480px) {

    .comparison-card {

        height: 165px;

    }

    .comparison-icon {

        width: 42px;

        height: 42px;

        font-size: 18px;

    }

    .comparison-card h3 {

        font-size: 25px;

    }

}

/* =========================================
   PART 3 — ECOSYSTEM STATS
========================================= */

.ecosystem-stats {

    padding: 10px 40px 45px;

    background: #f7f9ff;

}


/* =========================================
   GRID
========================================= */

.ecosystem-grid {

    display: grid;

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

    gap: 14px;

}


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

.ecosystem-card {

    min-height: 175px;

    padding: 20px 12px;

    background: #fff;

    border: 1px solid #e8edf7;

    border-radius: 15px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    box-shadow:
        0 7px 22px rgba(30,60,120,.055);

    transition: .3s;

}


.ecosystem-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 14px 30px rgba(30,60,120,.10);

}


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

.ecosystem-icon {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 21px;

    margin-bottom: 10px;

}


/* =========================================
   ICON COLORS
========================================= */

.eco-blue {

    background: #eaf2ff;

    color: #2165d8;

}

.eco-green {

    background: #e9f8ee;

    color: #24a463;

}

.eco-purple {

    background: #f0eaff;

    color: #7655e9;

}

.eco-orange {

    background: #fff0e3;

    color: #ee8126;

}

.eco-cyan {

    background: #e6f8fa;

    color: #1399ab;

}

.eco-indigo {

    background: #eeeaff;

    color: #6549db;

}

.eco-pink {

    background: #ffeaf3;

    color: #df4388;

}


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

.ecosystem-content h3 {

    margin: 0 0 5px;

    font-size: 28px;

    line-height: 1;

    font-weight: 800;

}


/* Different number colors */

.ecosystem-card:nth-child(1) h3,
.ecosystem-card:nth-child(10) h3 {

    color: #2165d8;

}

.ecosystem-card:nth-child(2),
.ecosystem-card:nth-child(12) h3 {

    color: #7655e9;

}

.ecosystem-card:nth-child(3),
.ecosystem-card:nth-child(7) h3 {

    color: #ee8126;

}

.ecosystem-card:nth-child(4),
.ecosystem-card:nth-child(11) h3 {

    color: #24a463;

}

.ecosystem-card:nth-child(5) h3 {

    color: #1399ab;

}

.ecosystem-card:nth-child(6) h3 {

    color: #6549db;

}

.ecosystem-card:nth-child(9) h3 {

    color: #df4388;

}


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

.ecosystem-content p {

    margin: 0;

    color: #344054;

    font-size: 11px;

    /* font-weight: 600; */

    line-height: 1.5;

}


/* =========================================
   BOTTOM LINE
========================================= */

/* .ecosystem-content span {

    display: block;

    width: 25px;

    height: 3px;

    margin: 9px auto 0;

    border-radius: 20px;

    background: #2867dc;

} */

/* =========================================
   LAPTOP — 1200px
========================================= */

@media (max-width:1199px) {

    .ecosystem-stats {

        padding-left: 35px;
        padding-right: 35px;

    }

    .ecosystem-grid {

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

    }

}


/* =========================================
   TABLET — 992px
========================================= */

@media (max-width:991px) {

    .ecosystem-stats {

        padding-left: 30px;
        padding-right: 30px;

    }

    .ecosystem-grid {

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

        gap: 13px;

    }

    .ecosystem-card {

        min-height: 170px;

    }

}


/* =========================================
   MOBILE — 768px
========================================= */

@media (max-width:767px) {

    .ecosystem-stats {

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

    }

    .ecosystem-grid {

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

        gap: 12px;

    }

    .ecosystem-card {

        min-height: 160px;

        padding: 18px 8px;

    }

    .ecosystem-icon {

        width: 44px;

        height: 44px;

        font-size: 19px;

    }

    .ecosystem-content h3 {

        font-size: 25px;

    }

    .ecosystem-content p {

        font-size: 10.5px;

    }

}


/* =========================================
   SMALL MOBILE — 480px
========================================= */

@media (max-width:480px) {

    .ecosystem-grid {

        gap: 10px;

    }

    .ecosystem-card {

        min-height: 150px;

    }

    .ecosystem-icon {

        width: 40px;

        height: 40px;

        font-size: 17px;

        margin-bottom: 8px;

    }

    .ecosystem-content h3 {

        font-size: 23px;

    }

    .ecosystem-content p {

        font-size: 10px;

        line-height: 1.4;

    }

}

/* =========================================
   PART 4 — COLLABORATION SECTION
========================================= */

.collaboration-section {

    padding: 15px 40px 70px;

    background: #f7f9ff;

}


/* =========================================
   GRID
========================================= */

.collaboration-grid {

    display: grid;

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

    gap: 28px;

    max-width: 650px;

    margin: 0 auto;

}


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

.collaboration-card {

    min-height: 105px;

    background: #fff;

    border: 1px solid #e7ebf5;

    border-radius: 16px;

    padding: 18px 25px;

    display: flex;

    align-items: center;

    box-shadow:
        0 8px 25px rgba(30,60,120,.07);

    transition: .3s;

}


.collaboration-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 14px 30px rgba(30,60,120,.12);

}


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

.collaboration-icon {

    width: 58px;

    height: 58px;

    min-width: 58px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 27px;

}


/* Globe */

.collaboration-globe {

    background: #eaf3ff;

    color: #2165d8;

}


/* Link */

.collaboration-link {

    background: #f0eaff;

    color: #7049db;

}


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

.collaboration-divider {

    width: 1px;

    height: 55px;

    background: #dfe4ef;

    margin: 0 20px;

}


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

.collaboration-content {

    display: flex;

    align-items: center;

    gap: 18px;

}


.collaboration-content h3 {

    margin: 0;

    font-size: 31px;

    line-height: 1;

    font-weight: 800;

    color: #2865d8;

}


/* Second card number */

.collaboration-card:nth-child(2)
.collaboration-content h3 {

    color: #7049db;

}


.collaboration-content p {

    margin: 0;

    font-size: 12px;

    line-height: 1.5;

    font-weight: 600;

    color: #344054;

}


.collaboration-content span {

    display: block;

    width: 28px;

    height: 3px;

    border-radius: 20px;

    background: #2865d8;

}


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


/* LAPTOP */

@media (max-width:1199px) {

    .collaboration-section {

        padding-left: 35px;

        padding-right: 35px;

    }

}


/* TABLET */

@media (max-width:991px) {

    .collaboration-section {

        padding-left: 30px;

        padding-right: 30px;

    }

    .collaboration-grid {

        max-width: 620px;

        gap: 20px;

    }

    .collaboration-card {

        padding: 16px 18px;

    }

    .collaboration-content {

        gap: 12px;

    }

}


/* MOBILE */

@media (max-width:767px) {

    .collaboration-section {

        padding-left: 20px;

        padding-right: 20px;

    }

    .collaboration-grid {

        grid-template-columns: 1fr;

        gap: 14px;

        max-width: 100%;

    }

    .collaboration-card {

        min-height: 100px;

        padding: 16px 18px;

    }

    .collaboration-icon {

        width: 52px;

        height: 52px;

        min-width: 52px;

        font-size: 24px;

    }

    .collaboration-divider {

        height: 48px;

        margin: 0 16px;

    }

    .collaboration-content h3 {

        font-size: 27px;

    }

}


/* SMALL MOBILE */

@media (max-width:480px) {

    .collaboration-card {

        padding: 14px;

    }

    .collaboration-icon {

        width: 48px;

        height: 48px;

        min-width: 48px;

        font-size: 21px;

    }

    .collaboration-divider {

        margin: 0 13px;

    }

    .collaboration-content {

        gap: 10px;

    }

    .collaboration-content h3 {

        font-size: 24px;

    }

    .collaboration-content p {

        font-size: 11px;

    }

}


/* =========================================================
   CERTIFICATION / RECOGNITION SECTION
========================================================= */

.recognition-section {

    width: 100%;

    padding: 0;

    background: #ffffff;

}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.recognition-wrapper {

    position: relative;

    width: 100%;

    min-height: 465px;

    overflow: hidden;

    border-radius: 18px;

    background: #0b316b;

}


/* =========================================================
   LEFT DARK BLUE AREA
========================================================= */

.recognition-content {

    position: relative;

    z-index: 4;

    width: 47%;

    min-height: 465px;

    padding: 40px 40px 90px 50px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    background:
        linear-gradient(
            135deg,
            #0a2d64 0%,
            #0b397b 100%
        );

}





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

.recognition-badge {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 16px;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            #087de7,
            #3458d9
        );

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .3px;

}


.recognition-badge i {

    font-size: 12px;

}


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

.recognition-title {

    margin: 25px 0 0;

    max-width: 480px;

    color: #ffffff;

    font-size: 43px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1px;

}


.recognition-title span {

    display: block;

    color: #506eff;

}


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

.recognition-line {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 17px;

}


.recognition-line::before {

    content: "";

    width: 40px;

    height: 4px;

    border-radius: 20px;

    background: #287dff;

}


.recognition-line span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #5181ff;

}


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

.recognition-description {

    max-width: 410px;

    margin: 18px 0 0;

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

    font-size: 14px;

    line-height: 1.65;

}


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

.recognition-btn {

    width: fit-content;

    min-width: 250px;

    height: 54px;

    margin-top: 20px;

    padding: 0 10px 0 25px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            #008cff,
            #9c45ed
        );

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

    box-shadow:
        0 8px 25px rgba(0,100,255,.22);

    transition: .3s ease;

}


.recognition-btn:hover {

    color: #ffffff;

    transform: translateY(-2px);

}


/* =========================================================
   BUTTON CIRCLE
========================================================= */

.recognition-btn-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: #6752ed;

    font-size: 17px;

}


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

.recognition-image {

    position: absolute;

    top: 0;

    right: 0;

    width: 67%;

    height: 100%;

    z-index: 1;

    overflow: hidden;

}


/* IMAGE */

.recognition-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
   IMAGE LEFT CURVE
========================================================= */

.recognition-image::before {

    content: "";

    position: absolute;

    top: -80px;

    left: -130px;

    width: 280px;

    height: 620px;

    background: #0b316b;

    border-radius: 50%;

    z-index: 2;

}


/* =========================================================
   BOTTOM FEATURES
========================================================= */

.recognition-features {

    position: absolute;

    left: 32%;

    right: 7%;

    bottom: 10px;

    min-height: 105px;

    display: grid;

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

    align-items: center;

    background: #ffffff;

    border-radius: 16px;

    padding: 14px 18px;

    z-index: 10;

    box-shadow:
        0 10px 30px rgba(0,0,0,.14);

}


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

.recognition-feature {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 8px 20px;

    border-right: 1px solid #e5e7eb;

}


.recognition-feature:last-child {

    border-right: none;

}


/* =========================================================
   FEATURE ICON
========================================================= */

.recognition-feature-icon {

    width: 48px;

    height: 48px;

    min-width: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    font-size: 20px;

}


.recognition-feature-icon.blue {

    background: #4a8eea;

}


.recognition-feature-icon.purple {

    background: #6559e9;

}


.recognition-feature-icon.green {

    background: #49b56b;

}


.recognition-feature-icon.orange {

    background: #f5a623;

}


/* =========================================================
   FEATURE TEXT
========================================================= */

.recognition-feature h4 {

    margin: 0;

    color: #26334f;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 700;

}

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

@media (max-width: 1399px) {

    .recognition-title {

        font-size: 40px;

    }

    .recognition-content {

        padding-left: 40px;

    }

    .recognition-features {

        left: 30%;

        right: 5%;

    }

}


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

@media (max-width: 991px) {

    .recognition-wrapper {

        min-height: auto;

        border-radius: 16px;

    }


    /* Content */

    .recognition-content {

        width: 100%;

        min-height: 430px;

        padding: 40px 35px 150px;

    }


    .recognition-content::after {

        display: none;

    }


    /* Image */

    .recognition-image {

        position: absolute;

        top: 0;

        right: 0;

        width: 55%;

        height: 100%;

        opacity: .35;

    }


    .recognition-image::before {

        display: none;

    }


    .recognition-title {

        position: relative;

        z-index: 5;

        font-size: 38px;

    }


    .recognition-description {

        position: relative;

        z-index: 5;

        font-size: 14px;

    }


    .recognition-btn {

        position: relative;

        z-index: 5;

    }


    /* Features */

    .recognition-features {

        left: 25px;

        right: 25px;

        bottom: 18px;

        min-height: 95px;

    }


    .recognition-feature {

        padding: 8px 12px;

        gap: 9px;

    }


    .recognition-feature-icon {

        width: 42px;

        height: 42px;

        min-width: 42px;

        font-size: 17px;

    }


    .recognition-feature h4 {

        font-size: 12px;

    }

}


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

@media (max-width: 767px) {

    .recognition-wrapper {

        min-height: auto;

        border-radius: 14px;

    }


    /* Content */

    .recognition-content {

        width: 100%;

        min-height: 560px;

        padding: 30px 25px 170px;

        background:
            linear-gradient(
                135deg,
                #092b60,
                #0b397b
            );

    }


    /* Mobile image */

    .recognition-image {

        width: 100%;

        height: 230px;

        top: auto;

        bottom: 0;

        opacity: 1;

    }


    .recognition-image::before {

        display: block;

        top: -100px;

        left: -30px;

        width: 130%;

        height: 180px;

        background: #0b397b;

        border-radius: 50%;

    }


    /* Badge */

    .recognition-badge {

        font-size: 10px;

        padding: 6px 13px;

    }


    /* Heading */

    .recognition-title {

        margin-top: 20px;

        font-size: 31px;

        line-height: 1.15;

    }


    /* Description */

    .recognition-description {

        max-width: 100%;

        font-size: 13px;

        line-height: 1.6;

    }


    /* Button */

    .recognition-btn {

        min-width: 215px;

        height: 48px;

        padding-left: 20px;

        font-size: 14px;

    }


    .recognition-btn-icon {

        width: 34px;

        height: 34px;

        font-size: 14px;

    }


    /* Features become horizontal scroll */

    .recognition-features {

        position: absolute;

        left: 15px;

        right: 15px;

        bottom: 15px;

        min-height: 80px;

        padding: 10px;

        display: flex;

        overflow-x: auto;

        gap: 0;

        border-radius: 13px;

    }


    .recognition-feature {

        min-width: 210px;

        padding: 6px 14px;

    }


    .recognition-feature-icon {

        width: 38px;

        height: 38px;

        min-width: 38px;

        font-size: 16px;

    }


    .recognition-feature h4 {

        font-size: 11px;

    }

}


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

@media (max-width: 480px) {

    .recognition-content {

        min-height: 550px;

        padding: 25px 20px 165px;

    }


    .recognition-title {

        font-size: 28px;

    }


    .recognition-description {

        font-size: 12px;

    }


    .recognition-btn {

        min-width: 200px;

        font-size: 13px;

    }


    .recognition-image {

        height: 215px;

    }


    .recognition-features {

        left: 10px;

        right: 10px;

    }

}




/* =========================================================
   TESTIMONIAL SECTION
========================================================= */

.testimonial-section {

    position: relative;

    width: 100%;

    padding: 55px 0 45px;

    background: #f5f8ff;

    overflow: hidden;

}

.testimonial-section {
    position: relative;
    overflow: hidden;
}

.testimonial-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;

    pointer-events: none;
}

.testimonial-container {
    position: relative;
    z-index: 2;
}


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

.testimonial-container {

    position: relative;

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding: 0 40px;

}


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

.testimonial-header {

    position: relative;

    max-width: 1100px;

    margin: 0 auto;

    text-align: center;

}


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

.testimonial-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 18px;

    border-radius: 50px;

    background: #eaf1ff;

    color: #2866d9;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .4px;

}


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

.testimonial-header h2 {

    margin: 18px 0 0;

    color: #0b204d;

    font-size: 40px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -.8px;

}


.testimonial-header h2 span {

    color: #315ce8;

}


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

.testimonial-line {

    width: 42px;

    height: 4px;

    margin: 14px auto 0;

    border-radius: 20px;

    background: #3768ee;

    position: relative;

}


.testimonial-line::after {

    content: "";

    position: absolute;

    right: -10px;

    top: 50%;

    width: 7px;

    height: 7px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #5579ee;

}


/* =========================================================
   SUBTITLE
========================================================= */

.testimonial-header > p {

    margin: 17px 0 0;

    color: #344054;

    font-size: 16px;

    line-height: 1.6;

}


/* =========================================================
   SLIDER
========================================================= */

.testimonial-slider-wrapper {

    position: relative;

    margin-top: 42px;

}


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

.testimonial-card {

    position: relative;

    height: 258px;

    padding: 25px 26px 22px;

    background: #ffffff;

    border: 1px solid #e5eaf4;

    border-radius: 15px;

    box-shadow:
        0 8px 25px rgba(35, 69, 130, .08);

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.testimonial-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 16px 35px rgba(35, 69, 130, .13);

}


/* =========================================================
   TOP QUOTE
========================================================= */

.quote-top {

    position: absolute;

    top: 8px;

    left: 12px;

    color: #b9c9f5;

    font-size: 29px;

    font-weight: 800;

    line-height: 1;

}


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

.testimonial-google {

    position: absolute;

    top: 26px;

    right: 25px;

    width: 23px;

    height: 23px;

    object-fit: contain;

}


/* =========================================================
   USER
========================================================= */

.testimonial-user {

    display: flex;

    align-items: center;

    gap: 12px;

}


.testimonial-user img {

    width: 45px;

    height: 45px;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 50%;

}


.testimonial-user h4 {

    margin: 0;

    color: #111827;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 750;

}


.testimonial-user span {

    display: block;

    margin-top: 3px;

    color: #8a94a6;

    font-size: 12px;

}


/* =========================================================
   RATING
========================================================= */

.testimonial-rating {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 13px;

}


.testimonial-rating span {

    color: #f8b400;

    font-size: 19px;

    letter-spacing: 1px;

}


.testimonial-rating i {

    color: #2875e8;

    font-size: 15px;

}


/* =========================================================
   REVIEW TEXT
========================================================= */

.testimonial-text {

    margin: 12px 0 0;

    color: #344054;

    font-size: 14px;

    line-height: 1.65;

}


/* =========================================================
   READ MORE
========================================================= */

.testimonial-read {

    position: absolute;

    left: 26px;

    bottom: 21px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #2864dc;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition: .3s ease;

}


.testimonial-read:hover {

    color: #4e54e8;

}


.testimonial-read i {

    transition: transform .3s ease;

}


.testimonial-read:hover i {

    transform: translateX(4px);

}


/* =========================================================
   BOTTOM QUOTE
========================================================= */

.quote-bottom {

    position: absolute;

    right: 17px;

    bottom: 7px;

    color: #d6e0fb;

    font-size: 42px;

    font-weight: 800;

    line-height: 1;

}


/* =========================================================
   ARROWS
========================================================= */

.testimonial-arrow {

    position: absolute;

    top: 50%;

    width: 40px;

    height: 40px;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #dce5fa;

    border-radius: 50%;

    background: #ffffff;

    color: #2764dc;

    box-shadow:
        0 5px 15px rgba(30,60,120,.10);

    transform: translateY(-50%);

    transition: .3s ease;

}


.testimonial-arrow:hover {

    background: #2864dc;

    color: #ffffff;

}


.testimonial-prev {

    left: -20px;

}


.testimonial-next {

    right: -20px;

}


/* =========================================================
   GOOGLE BUTTON
========================================================= */

.testimonial-google-btn-wrap {

    display: flex;

    justify-content: center;

    margin-top: 28px;

}


.testimonial-google-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 265px;

    padding: 11px 22px;

    border: 1.5px solid #5479e8;

    border-radius: 30px;

    background: #ffffff;

    color: #2864dc;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition: .3s ease;

}


.testimonial-google-btn:hover {

    background: #2864dc;

    color: #ffffff;

    transform: translateY(-2px);

}


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

.testimonial-dots {

    position: absolute;

    width: 90px;

    height: 90px;

    opacity: .45;

    background-image:
        radial-gradient(
            circle,
            #c3d3f7 1.5px,
            transparent 1.5px
        );

    background-size: 10px 10px;

    pointer-events: none;

}


.testimonial-dots-left {

    left: 25px;

    top: 55px;

}


.testimonial-dots-right {

    right: 25px;

    top: 85px;

}

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

@media (min-width: 1400px) {

    .testimonial-header h2 {
        font-size: 42px;
    }

    .testimonial-header > p {
        font-size: 17px;
    }

    .testimonial-card {
        height: 260px;
    }

}


/* =========================================================
   LAPTOP
   992px - 1399px
========================================================= */

@media (max-width: 1399px) {

    .testimonial-container {
        padding-left: 35px;
        padding-right: 35px;
    }

    .testimonial-header h2 {
        font-size: 38px;
    }

    .testimonial-header > p {
        font-size: 15px;
    }

    .testimonial-card {
        height: 255px;
        padding: 23px;
    }

}


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

@media (max-width: 991px) {

    .testimonial-section {
        padding: 50px 0 40px;
    }

    .testimonial-container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .testimonial-header h2 {
        font-size: 34px;
    }

    .testimonial-header > p {
        font-size: 15px;
    }

    .testimonial-slider-wrapper {
        margin-top: 35px;
    }

    .testimonial-card {
        height: 250px;
    }

    .testimonial-arrow {
        width: 36px;
        height: 36px;
    }

    .testimonial-prev {
        left: -10px;
    }

    .testimonial-next {
        right: -10px;
    }

}


/* =========================================================
   MOBILE
   BELOW 768px
========================================================= */

@media (max-width: 767px) {

    .testimonial-section {
        padding: 45px 0 35px;
    }

    .testimonial-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .testimonial-badge {
        font-size: 11px;
        padding: 7px 15px;
    }

    .testimonial-header h2 {
        font-size: 29px;
        line-height: 1.25;
    }

    .testimonial-header > p {
        font-size: 14px;
        line-height: 22px;
    }

    .testimonial-slider-wrapper {
        margin-top: 30px;
    }

    .testimonial-card {
        height: 245px;
        padding: 22px 20px;
        border-radius: 14px;
    }

    .testimonial-user h4 {
        font-size: 14px;
    }

    .testimonial-user span {
        font-size: 11px;
    }

    .testimonial-rating {
        margin-top: 11px;
    }

    .testimonial-rating span {
        font-size: 17px;
    }

    .testimonial-text {
        font-size: 13px;
        line-height: 1.6;
    }

    .testimonial-read {
        left: 20px;
        bottom: 18px;
        font-size: 13px;
    }

    .testimonial-google-btn {
        min-width: 245px;
        font-size: 13px;
    }

    .testimonial-prev {
        left: -7px;
    }

    .testimonial-next {
        right: -7px;
    }

    .testimonial-dots {
        opacity: .25;
    }

}


/* =========================================================
   SMALL MOBILE
   BELOW 480px
========================================================= */

@media (max-width: 480px) {

    .testimonial-container {
        padding-left: 14px;
        padding-right: 14px;
    }

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

    .testimonial-header > p {
        font-size: 13px;
        line-height: 21px;
    }

    .testimonial-card {
        height: 240px;
        padding: 20px 18px;
    }

    .testimonial-google {
        right: 18px;
        top: 22px;
        width: 21px;
        height: 21px;
    }

    .testimonial-user img {
        width: 42px;
        height: 42px;
    }

    .testimonial-user h4 {
        font-size: 13px;
    }

    .testimonial-user span {
        font-size: 10px;
    }

    .testimonial-text {
        font-size: 13px;
        line-height: 1.55;
    }

    .testimonial-read {
        left: 18px;
        bottom: 17px;
        font-size: 13px;
    }

    .testimonial-google-btn {
        width: 100%;
        min-width: 0;
        max-width: 270px;
    }

    .testimonial-arrow {
        width: 32px;
        height: 32px;
    }

}






/* =========================================================
                LATEST BLOG SECTION
========================================================= */

.blog-section {
    position: relative;
    width: 100%;
    overflow: hidden;

    background: #ffffff;

    padding-top: 80px;
    padding-bottom: 80px;
}


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

.blog-section .section-container {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

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


/* =========================================================
                BLOG WRAPPER
========================================================= */

.blog-wrapper {
    position: relative;
    z-index: 2;
}


/* =========================================================
                DECORATIVE SHAPES
========================================================= */

.blog-section .shape-left {
    position: absolute;

    width: 280px;
    height: 280px;

    left: -150px;
    bottom: -120px;

    border-radius: 50%;

    background: rgba(93, 175, 255, 0.08);

    z-index: -1;
}

.blog-section .shape-right {
    position: absolute;

    width: 250px;
    height: 250px;

    right: -130px;
    top: 80px;

    border-radius: 50%;

    background: rgba(125, 95, 255, 0.07);

    z-index: -1;
}


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

.blog-section .text-center {
    max-width: 850px;
    margin: 0 auto;
}


/* Badge */

.blog-badge {
    display: inline-flex;

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

    gap: 8px;

    padding: 9px 18px;

    border-radius: 50px;

    background: #edf3ff;

    color: #1764df;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .5px;

    text-transform: uppercase;

    margin-bottom: 18px;
}

.blog-badge i {
    font-size: 15px;
}


/* Heading */

.blog-section .text-center h2 {

    margin: 0;

    color: #0b1538;

    font-size: 48px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;
}

.blog-section .text-center h2 span {

    background: linear-gradient(
        90deg,
        #5c4cff,
        #3da9ff
    );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* Description */

.blog-section .text-center > p {

    max-width: 760px;

    margin: 18px auto 0;

    color: #667085;

    font-size: 16px;

    line-height: 28px;
}


/* Title line */

.blog-section .title-line {

    width: 65px;

    height: 4px;

    margin: 18px auto 0;

    border-radius: 50px;

    background: linear-gradient(
        90deg,
        #5d4fff,
        #39aaff
    );
}


/* =========================================================
                BLOG GRID
========================================================= */

.blog-section .row {

    position: relative;
}


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

.blog-card {

    position: relative;

    height: 100%;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e8edfa;

    border-radius: 20px;

    box-shadow:
        0 10px 30px rgba(31, 58, 120, .08);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


/* Hover */

.blog-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 20px 45px rgba(31, 58, 120, .14);

    border-color: #d8e3ff;
}


/* =========================================================
                BLOG IMAGE
========================================================= */

.blog-image {

    position: relative;

    width: 100%;

    height: 220px;

    overflow: hidden;

    background: #eef2fa;
}


.blog-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;
}


/* Image hover */

.blog-card:hover .blog-image img {

    transform: scale(1.06);
}


/* =========================================================
                DATE BOX
========================================================= */

.date-box {

    position: absolute;

    left: 16px;
    bottom: 16px;

    width: 58px;
    height: 62px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.12);
}


.date-box h4 {

    margin: 0;

    color: #155bd7;

    font-size: 22px;

    line-height: 1;

    font-weight: 800;
}


.date-box span {

    margin-top: 4px;

    color: #667085;

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;
}


/* =========================================================
                BLOG CATEGORY
========================================================= */

.blog-category {

    display: flex;

    align-items: center;

    gap: 7px;

    margin: 20px 22px 0;

    color: #4169d8;

    font-size: 13px;

    font-weight: 700;
}


.blog-category i {

    font-size: 15px;
}


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

.blog-content {

    padding: 12px 22px 0;

    flex: 1;
}


.blog-content h4 {

    margin: 0 0 12px;

    color: #101b3f;

    font-size: 20px;

    line-height: 1.4;

    font-weight: 750;
}


.blog-content p {

    margin: 0;

    color: #667085;

    font-size: 14px;

    line-height: 23px;
}


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

.blog-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 22px;

    margin-top: auto;
}


.blog-footer a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #155bd7;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition: .3s ease;
}


.blog-footer a i {

    transition: transform .3s ease;
}


.blog-footer a:hover {

    color: #5b4bff;
}


.blog-footer a:hover i {

    transform: translateX(5px);
}


/* Arrow Button */

.blog-footer button {

    width: 40px;
    height: 40px;

    display: flex;

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

    border: 1px solid #dce5ff;

    border-radius: 50%;

    background: #f2f6ff;

    color: #155bd7;

    font-size: 16px;

    cursor: pointer;

    transition: .3s ease;
}


.blog-footer button:hover {

    background: #155bd7;

    color: #ffffff;

    transform: translateX(3px);
}


/* =========================================================
                BOTTOM CTA
========================================================= */

.blog-bottom {

    position: relative;

    margin-top: 45px;

    padding: 22px 28px;

    background: #ffffff;

    border: 1px solid #e4eaf8;

    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(31,58,120,.07);
}


/* Bottom Left */

.bottom-left {

    display: flex;

    align-items: center;

    gap: 16px;
}


.bottom-icon {

    flex-shrink: 0;

    width: 52px;
    height: 52px;

    display: flex;

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

    border-radius: 14px;

    background: #edf3ff;

    color: #155bd7;

    font-size: 22px;
}


.bottom-left h4 {

    margin: 0 0 5px;

    color: #101b3f;

    font-size: 17px;

    font-weight: 750;
}


.bottom-left p {

    margin: 0;

    color: #667085;

    font-size: 13px;

    line-height: 21px;
}


/* =========================================================
                VIEW ALL BLOGS BUTTON
========================================================= */

.blog-btn {

    display: inline-flex;

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

    gap: 10px;

    padding: 13px 23px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #155bd7,
        #624cff
    );

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 8px 20px rgba(60,80,220,.20);

    transition: .3s ease;
}


.blog-btn i {

    transition: transform .3s ease;
}


.blog-btn:hover {

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(60,80,220,.28);
}


.blog-btn:hover i {

    transform: translateX(5px);
}


/* =========================================================
                LARGE DESKTOP
                1400px+
========================================================= */

@media (min-width: 1400px) {

    .blog-section .section-container {

        max-width: 1500px;

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

    .blog-image {

        height: 230px;
    }

    .blog-content h4 {

        font-size: 21px;
    }

}


/* =========================================================
                LAPTOP
                992px - 1399px
========================================================= */

@media (max-width: 1399px) {

    .blog-section {

        padding-top: 70px;
        padding-bottom: 70px;
    }

    .blog-section .section-container {

        max-width: 1300px;

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

    .blog-section .text-center h2 {

        font-size: 44px;
    }

    .blog-image {

        height: 205px;
    }

    .blog-content {

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

    .blog-category {

        margin-left: 18px;
        margin-right: 18px;
    }

    .blog-footer {

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

}


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

@media (max-width: 991px) {

    .blog-section {

        padding-top: 60px;
        padding-bottom: 60px;
    }

    .blog-section .section-container {

        max-width: 100%;

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

    .blog-section .text-center h2 {

        font-size: 38px;

        line-height: 1.2;
    }

    .blog-section .text-center > p {

        font-size: 15px;

        line-height: 25px;
    }

    .blog-image {

        height: 210px;
    }

    .blog-content h4 {

        font-size: 19px;
    }

    .blog-bottom {

        padding: 20px;
    }

    .bottom-left {

        align-items: flex-start;
    }

}


/* =========================================================
                MOBILE
                Below 767px
========================================================= */

@media (max-width: 767px) {

    .blog-section {

        padding-top: 50px;
        padding-bottom: 50px;
    }

    .blog-section .section-container {

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

    .blog-section .text-center {

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

    .blog-badge {

        font-size: 11px;

        padding: 8px 14px;

        margin-bottom: 14px;
    }

    .blog-section .text-center h2 {

        font-size: 32px;

        letter-spacing: -.5px;
    }

    .blog-section .text-center > p {

        font-size: 14px;

        line-height: 23px;

        margin-top: 14px;
    }

    .blog-section .title-line {

        margin-top: 15px;
    }

    .blog-section .row.g-4 {

        margin-top: 25px !important;
    }

    .blog-image {

        height: 215px;
    }

    .blog-card {

        border-radius: 17px;
    }

    .blog-content {

        padding: 12px 18px 0;
    }

    .blog-category {

        margin-left: 18px;
        margin-right: 18px;
    }

    .blog-content h4 {

        font-size: 18px;

        line-height: 1.4;
    }

    .blog-content p {

        font-size: 13px;

        line-height: 21px;
    }

    .blog-footer {

        padding: 18px;
    }

    .blog-bottom {

        margin-top: 30px;

        padding: 18px;

        border-radius: 16px;
    }

    .bottom-left {

        gap: 12px;
    }

    .bottom-icon {

        width: 45px;
        height: 45px;

        font-size: 19px;

        border-radius: 12px;
    }

    .bottom-left h4 {

        font-size: 16px;
    }

    .bottom-left p {

        font-size: 12px;

        line-height: 19px;
    }

    .blog-btn {

        width: 100%;

        padding: 12px 18px;
    }

    .blog-section .shape-left,
    .blog-section .shape-right {

        display: none;
    }

}


/* =========================================================
                SMALL MOBILE
                Below 480px
========================================================= */

@media (max-width: 480px) {

    .blog-section .section-container {

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

    .blog-section .text-center h2 {

        font-size: 28px;
    }

    .blog-section .text-center > p {

        font-size: 13px;

        line-height: 21px;
    }

    .blog-image {

        height: 195px;
    }

    .date-box {

        width: 52px;
        height: 56px;

        left: 12px;
        bottom: 12px;
    }

    .date-box h4 {

        font-size: 20px;
    }

    .date-box span {

        font-size: 11px;
    }

    .blog-category {

        margin-top: 16px;

        font-size: 12px;
    }

    .blog-content h4 {

        font-size: 17px;
    }

    .blog-content p {

        font-size: 12px;

        line-height: 20px;
    }

    .blog-footer {

        padding: 16px 18px;
    }

    .blog-footer a {

        font-size: 13px;
    }

    .blog-footer button {

        width: 36px;
        height: 36px;
    }

    .bottom-left {

        align-items: flex-start;
    }

}


/* =========================================================
                LATEST BLOG SECTION
========================================================= */

.blog-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    background: #f4f7ff;

    padding: 75px 0 40px;

}


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

.blog-container {

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding-left: 40px;

    padding-right: 40px;

}


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

.blog-header {

    position: relative;

    max-width: 850px;

    margin: 0 auto;

}


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

.blog-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 8px 16px;

    border-radius: 50px;

    background: #eaf1ff;

    color: #2364d8;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .4px;

    text-transform: uppercase;

}


.blog-badge i {

    font-size: 14px;

}


/* =========================================================
                MAIN TITLE
========================================================= */

.blog-title {

    margin: 15px 0 0;

    color: #0b1b48;

    font-size: 48px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;

}


/* Gradient "Blogs" */

.blog-title span {

    background:

        linear-gradient(
            90deg,
            #554cff,
            #368fff
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}


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

.blog-description {

    max-width: 680px;

    margin: 15px auto 0;

    color: #667085;

    font-size: 15px;

    line-height: 25px;

}


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

.blog-title-line {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 15px;

}


.blog-title-line::before {

    content: "";

    width: 42px;

    height: 4px;

    border-radius: 50px;

    background: #2868e8;

}


.blog-title-line span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #6655ff;

}

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

.blog-dot-pattern {

    position: absolute;

    width: 100px;

    height: 100px;

    opacity: .55;

    background-image:

        radial-gradient(
            circle,
            #c4d5ff 2px,
            transparent 2px
        );

    background-size: 11px 11px;

    pointer-events: none;

}


/* LEFT */

.blog-dots-left {

    left: 20px;

    top: 45px;

}


/* RIGHT */

.blog-dots-right {

    right: 20px;

    top: 70px;

}

/* =========================================================
                LARGE DESKTOP
                1400px+
========================================================= */

@media (min-width: 1400px) {

    .blog-container {

        padding-left: 40px;

        padding-right: 40px;

    }

    .blog-title {

        font-size: 50px;

    }

}


/* =========================================================
                LAPTOP
                992px - 1399px
========================================================= */

@media (max-width: 1399px) {

    .blog-section {

        padding-top: 65px;

    }

    .blog-container {

        padding-left: 35px;

        padding-right: 35px;

    }

    .blog-title {

        font-size: 44px;

    }

}


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

@media (max-width: 991px) {

    .blog-section {

        padding-top: 55px;

    }

    .blog-container {

        padding-left: 30px;

        padding-right: 30px;

    }

    .blog-title {

        font-size: 38px;

    }

    .blog-description {

        font-size: 14px;

        line-height: 24px;

    }

    .blog-dots-left {

        left: 5px;

    }

    .blog-dots-right {

        right: 5px;

    }

}


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

@media (max-width: 767px) {

    .blog-section {

        padding-top: 45px;

        padding-bottom: 30px;

    }

    .blog-container {

        padding-left: 20px;

        padding-right: 20px;

    }

    .blog-badge {

        font-size: 10px;

        padding: 7px 13px;

    }

    .blog-title {

        font-size: 32px;

        margin-top: 13px;

    }

    .blog-description {

        font-size: 13px;

        line-height: 22px;

        margin-top: 12px;

    }

    .blog-title-line {

        margin-top: 13px;

    }

    .blog-dot-pattern {

        opacity: .35;

        width: 70px;

        height: 70px;

    }

}


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

@media (max-width: 575px) {

    .blog-container {

        padding-left: 20px;

        padding-right: 20px;

    }

    .blog-title {

        font-size: 29px;

        line-height: 1.2;

    }

    .blog-description {

        font-size: 13px;

        line-height: 21px;

        max-width: 340px;

    }

    .blog-dots-left,
    .blog-dots-right {

        display: none;

    }

}

/* =========================================================
                PART 2 — BLOG CARDS
========================================================= */


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

.blog-cards-wrapper {

    position: relative;

    margin-top: 38px;

}


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

.blog-card {

    position: relative;

    height: 100%;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e5eaf5;

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(36, 65, 120, .08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


/* Hover */

.blog-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 18px 40px rgba(36, 65, 120, .14);

}


/* =========================================================
                BLOG IMAGE
========================================================= */

.blog-image {

    position: relative;

    width: 100%;

    height: 205px;

    overflow: hidden;

    background: #edf2fb;

}


/* Image */

.blog-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;

}


/* Image hover */

.blog-card:hover .blog-image img {

    transform: scale(1.05);

}


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

.blog-date {

    position: absolute;

    top: 12px;

    right: 12px;

    width: 42px;

    height: 48px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: #2459df;

    color: #ffffff;

    border-radius: 8px;

    box-shadow:
        0 7px 15px rgba(36, 89, 223, .25);

}


/* Date */

.blog-date strong {

    font-size: 17px;

    line-height: 17px;

    font-weight: 800;

}


/* Month */

.blog-date span {

    font-size: 10px;

    line-height: 12px;

    font-weight: 600;

}


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

.blog-category {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    align-self: flex-start;

    margin: -1px 0 0;

    padding: 7px 13px;

    background: #edf3ff;

    color: #2460d7;

    border-radius: 0 8px 8px 0;

    font-size: 11px;

    font-weight: 700;

}


/* Category icon */

.blog-category i {

    font-size: 12px;

}


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

.blog-card-content {

    padding: 16px 18px 0;

    flex: 1;

}


/* Title */

.blog-card-content h3 {

    margin: 0 0 10px;

    color: #101d42;

    font-size: 17px;

    line-height: 1.45;

    font-weight: 750;

}


/* Description */

.blog-card-content p {

    margin: 0;

    color: #667085;

    font-size: 12px;

    line-height: 21px;

}


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

.blog-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px;

    margin-top: auto;

}


/* =========================================================
                READ MORE
========================================================= */

.blog-read-more {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #155bd7;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition: .3s ease;

}


.blog-read-more i {

    transition: transform .3s ease;

}


.blog-read-more:hover {

    color: #564cff;

}


.blog-read-more:hover i {

    transform: translateX(4px);

}


/* =========================================================
                CIRCLE ARROW
========================================================= */

.blog-circle-arrow {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #4169e8;

    border-radius: 50%;

    background: #ffffff;

    color: #245bd9;

    text-decoration: none;

    font-size: 14px;

    transition: .3s ease;

}


.blog-circle-arrow:hover {

    background: #245bd9;

    color: #ffffff;

    transform: translateX(3px);

}

/* =========================================================
                LARGE DESKTOP
                1400px+
========================================================= */

@media (min-width: 1400px) {

    .blog-cards-wrapper {

        margin-top: 40px;

    }

    .blog-image {

        height: 220px;

    }

    .blog-card-content h3 {

        font-size: 18px;

    }

}


/* =========================================================
                LAPTOP
                992px - 1399px
========================================================= */

@media (max-width: 1399px) {

    .blog-cards-wrapper {

        margin-top: 35px;

    }

    .blog-image {

        height: 200px;

    }

    .blog-card-content {

        padding-left: 17px;

        padding-right: 17px;

    }

}


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

@media (max-width: 991px) {

    .blog-cards-wrapper {

        margin-top: 30px;

    }

    .blog-image {

        height: 205px;

    }

    .blog-card-content h3 {

        font-size: 17px;

    }

    .blog-card-content p {

        font-size: 12px;

        line-height: 20px;

    }

}


/* =========================================================
                MOBILE
                BELOW 768px
========================================================= */

@media (max-width: 767px) {

    .blog-cards-wrapper {

        margin-top: 28px;

    }

    .blog-image {

        height: 215px;

    }

    .blog-card {

        border-radius: 16px;

    }

    .blog-card-content {

        padding: 15px 17px 0;

    }

    .blog-card-content h3 {

        font-size: 17px;

        line-height: 1.4;

    }

    .blog-card-content p {

        font-size: 13px;

        line-height: 21px;

    }

    .blog-card-footer {

        padding: 17px;

    }

}


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

@media (max-width: 575px) {

    .blog-cards-wrapper {

        margin-top: 25px;

    }

    .blog-image {

        height: 210px;

    }

    .blog-date {

        top: 10px;

        right: 10px;

        width: 40px;

        height: 46px;

    }

    .blog-date strong {

        font-size: 16px;

    }

    .blog-date span {

        font-size: 9px;

    }

    .blog-category {

        font-size: 10px;

        padding: 6px 11px;

    }

    .blog-card-content h3 {

        font-size: 16px;

    }

    .blog-card-content p {

        font-size: 12px;

    }

    .blog-circle-arrow {

        width: 36px;

        height: 36px;

        font-size: 13px;

    }

}

/* =========================================================
                PART 3 — BLOG CTA
========================================================= */

.blog-bottom-cta {

    width: 100%;

    margin-top: 30px;

    padding: 18px 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    background: #f8faff;

    border: 1px solid #e5ebf8;

    border-radius: 16px;

}


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

.blog-cta-content {

    display: flex;

    align-items: center;

    gap: 15px;

}


/* =========================================================
                CTA ICON
========================================================= */

.blog-cta-icon {

    width: 48px;

    height: 48px;

    min-width: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #e9f0ff;

    color: #2864dc;

    font-size: 19px;

}


/* =========================================================
                CTA TEXT
========================================================= */

.blog-cta-text h4 {

    margin: 0 0 5px;

    color: #101d42;

    font-size: 15px;

    font-weight: 750;

}


.blog-cta-text p {

    margin: 0;

    color: #667085;

    font-size: 12px;

    line-height: 19px;

}


/* =========================================================
                CTA BUTTON
========================================================= */

.blog-cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 12px 22px;

    min-width: 145px;

    border-radius: 8px;

    background: #1859df;

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 7px 16px rgba(24,89,223,.18);

    transition: .3s ease;

}


.blog-cta-button i {

    font-size: 15px;

    transition: transform .3s ease;

}


.blog-cta-button:hover {

    color: #ffffff;

    background: #0f48c5;

    transform: translateY(-2px);

}


.blog-cta-button:hover i {

    transform: translateX(4px);

}

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

@media (max-width: 1399px) {

    .blog-bottom-cta {

        padding: 18px 22px;

    }

}


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

@media (max-width: 991px) {

    .blog-bottom-cta {

        padding: 18px 20px;

    }

    .blog-cta-text h4 {

        font-size: 15px;

    }

}


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

@media (max-width: 767px) {

    .blog-bottom-cta {

        flex-direction: column;

        align-items: stretch;

        gap: 18px;

        padding: 20px;

        margin-top: 25px;

    }


    .blog-cta-content {

        align-items: flex-start;

    }


    .blog-cta-text p {

        font-size: 12px;

        line-height: 19px;

    }


    .blog-cta-button {

        width: 100%;

        min-width: 0;

    }

}


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

@media (max-width: 575px) {

    .blog-bottom-cta {

        padding: 17px;

        border-radius: 14px;

    }


    .blog-cta-icon {

        width: 44px;

        height: 44px;

        min-width: 44px;

        font-size: 17px;

    }


    .blog-cta-text h4 {

        font-size: 14px;

    }


    .blog-cta-text p {

        font-size: 11px;

        line-height: 18px;

    }


    .blog-cta-button {

        padding: 11px 18px;

        font-size: 12px;

    }

}





/* =========================================================
        SOCIAL MEDIA / INSTAGRAM SECTION
========================================================= */

.social-section {

    position: relative;

    width: 100%;

    background: #FFFFFF;

    overflow: hidden;

    padding: 45px 0 35px;

}


/* =========================================================
        SAME GLOBAL WIDTH
========================================================= */

.social-container {

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding-left: 40px;

    padding-right: 40px;

}


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

.social-profile {

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 10px 15px 25px;

}


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

.social-profile-logo {

    width: 90px;

    height: 90px;

    min-width: 90px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    border-radius: 50%;

    box-shadow:
        0 6px 22px rgba(20,50,100,.10);

}


.social-profile-logo img {

    width: 80px;

    height: 80px;

    object-fit: contain;

}


/* =========================================================
        PROFILE INFORMATION
========================================================= */

.social-profile-info {

    flex: 1;

}


/* =========================================================
        PROFILE NAME
========================================================= */

.social-profile-name {

    display: flex;

    align-items: center;

    gap: 8px;

}


.social-profile-name h3 {

    margin: 0;

    color: #111827;

    font-size: 30px;

    line-height: 1.2;

    font-weight: 800;

}


.social-profile-name i {

    color: #1877f2;

    font-size: 18px;

}


/* =========================================================
        PROFILE TAGS
========================================================= */

.social-profile-tags {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px 22px;

    margin-top: 9px;

}


.social-profile-tags span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #334155;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 600;

}


.social-profile-tags i {

    color: #185bd7;

    font-size: 14px;

}


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

.social-profile-info p {

    margin: 12px 0 0;

    color: #4b5563;

    font-size: 15px;

    line-height: 1.65;

}


/* =========================================================
        SOCIAL POSTS
========================================================= */

.social-posts {

    width: 100%;

    margin-top: 12px;

}


/* =========================================================
        SOCIAL POST CARD
========================================================= */

.social-post-card {

    position: relative;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #f2f5fa;

    border: 1px solid #e3e8f2;

    border-radius: 10px;

}


/* =========================================================
        PERFECT IMAGE FIT
========================================================= */

.social-post-card img {

    width: 100% !important;

    height: 100% !important;

    display: block;

    /* object-fit: cover !important; */

    object-position: center center;

}


.social-post-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 14px 32px rgba(20,40,90,.14);

}



/* =========================================================
        VIDEO PLAY
========================================================= */

.social-video {

    cursor: pointer;

}


.social-play {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

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

    color: #172b63;

    font-size: 29px;

    box-shadow:
        0 8px 24px rgba(0,0,0,.20);

}


.social-play i {

    margin-left: 4px;

}


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

.social-feature-strip {

    display: grid;

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

    margin-top: 32px;

    padding: 24px 12px;

    background: #ffffff;

    border: 1px solid #e5eaf3;

    border-radius: 14px;

    box-shadow:
        0 6px 20px rgba(20,40,90,.07);

}


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

.social-feature {

    display: flex;

    align-items: center;

    gap: 15px;

    min-width: 0;

    padding: 8px 25px;

    border-right:
        1px solid #e1e6ef;

}


.social-feature:last-child {

    border-right: none;

}


/* =========================================================
        FEATURE ICON
========================================================= */

.social-feature-icon {

    width: 48px;

    height: 48px;

    min-width: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #0957c9;

    color: #ffffff;

    font-size: 20px;

}


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

.social-feature h5 {

    margin: 0 0 6px;

    color: #17213e;

    font-size: 16px;

    line-height: 1.35;

    font-weight: 700;

}

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

@media (max-width: 991px) {

    .social-container {

        padding-left: 30px;

        padding-right: 30px;

    }


    .social-profile {

        gap: 20px;

    }


    .social-profile-logo {

        width: 78px;

        height: 78px;

        min-width: 78px;

    }


    .social-profile-logo img {

        width: 68px;

        height: 68px;

    }


    .social-profile-name h3 {

        font-size: 26px;

    }


    .social-profile-tags span {

        font-size: 13px;

    }


    .social-profile-info p {

        font-size: 14px;

    }


    .social-feature-strip {

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

        gap: 0;

    }


    .social-feature {

        padding: 18px 20px;

    }


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

        border-right: none;

    }


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

        border-top: 1px solid #e1e6ef;

    }


    .social-feature h5 {

        font-size: 15px;

    }


    .social-feature p {

        font-size: 12px;

    }

}


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

@media (max-width: 767px) {

    .social-section {

        padding: 35px 0 30px;

    }


    .social-container {

        padding-left: 20px;

        padding-right: 20px;

    }


    .social-profile {

        align-items: flex-start;

        gap: 15px;

        padding:
            5px 5px 20px;

    }


    .social-profile-logo {

        width: 65px;

        height: 65px;

        min-width: 65px;

    }


    .social-profile-logo img {

        width: 57px;

        height: 57px;

    }


    .social-profile-name h3 {

        font-size: 22px;

    }


    .social-profile-name i {

        font-size: 15px;

    }


    .social-profile-tags {

        gap: 7px 12px;

        margin-top: 7px;

    }


    .social-profile-tags span {

        font-size: 12px;

    }


    .social-profile-tags i {

        font-size: 12px;

    }


    .social-profile-info p {

        margin-top: 9px;

        font-size: 13px;

        line-height: 1.55;

    }


    .social-posts {

        margin-top: 8px;

    }


    .social-play {

        width: 52px;

        height: 52px;

        font-size: 24px;

    }


    .social-feature-strip {

        grid-template-columns: 1fr;

        margin-top: 25px;

        padding: 10px;

    }


    .social-feature {

        padding: 16px 12px;

        border-right: none;

        border-bottom:
            1px solid #e1e6ef;

    }


    .social-feature:last-child {

        border-bottom: none;

    }


    .social-feature h5 {

        font-size: 15px;

    }


    .social-feature p {

        font-size: 12px;

    }

}


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

@media (max-width: 575px) {

    .social-container {

        padding-left: 15px;

        padding-right: 15px;

    }


    .social-profile {

        gap: 12px;

    }


    .social-profile-logo {

        width: 58px;

        height: 58px;

        min-width: 58px;

    }


    .social-profile-logo img {

        width: 50px;

        height: 50px;

    }


    .social-profile-name h3 {

        font-size: 20px;

    }


    .social-profile-tags span {

        font-size: 11px;

    }


    .social-profile-info p {

        font-size: 12px;

    }


    .social-feature-icon {

        width: 43px;

        height: 43px;

        min-width: 43px;

        font-size: 18px;

    }


    .social-feature h5 {

        font-size: 14px;

    }


    .social-feature p {

        font-size: 11px;

    }

}


/* =========================================================
        SOCIAL BUTTONS POSITION
========================================================= */

.social-buttons {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 28px;

    margin-top: 25px;

}


/* Common */

.social-load-btn,
.social-follow-btn {

    width: 245px;

    height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 8px;

    text-decoration: none;

    font-size: 16px !important;

    font-weight: 600;

}


/* Load More */

.social-load-btn {

    color: #ffffff;

    background: #082d68;

}


/* Instagram */

.social-follow-btn {

    color: #ffffff;

    background: linear-gradient(
        90deg,
        #1267db,
        #6453e9
    );

}

@media (max-width: 575px) {

    .social-buttons {

        flex-direction: column;

        gap: 12px;

        margin-top: 20px;

    }

    .social-load-btn,
    .social-follow-btn {

        width: 100%;

        max-width: 280px;

        height: 48px;

        font-size: 14px !important;

    }

}


/* =====================================================
                SOCIAL / CHAT BAR
===================================================== */

.bottom-social-bar {

    width: 100%;

    min-height: 90px;

    padding: 15px 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    box-sizing: border-box;

}


/* =====================================================
                FOLLOW SECTION
===================================================== */

.follow-section {

    display: flex;

    align-items: center;

    gap: 18px;

}


.follow-section > span {

    color: #20242b;

    font-size: 17px;

    font-weight: 500;

    white-space: nowrap;

}


/* =====================================================
                SOCIAL ICONS
===================================================== */

.social-icons {

    display: flex;

    align-items: center;

    gap: 14px;

}


.social-icons a {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    text-decoration: none;

    font-size: 20px;

    transition: .3s ease;

}


.social-icons a:hover {

    transform: translateY(-3px);

}


/* FACEBOOK */

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

    background: #1877f2;

    color: #ffffff;

}


/* INSTAGRAM */

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

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

    color: #ffffff;

}


/* LINKEDIN */

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

    background: #0a66c2;

    color: #ffffff;

}


/* YOUTUBE */

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

    background: #ff0000;

    color: #ffffff;

}


/* =====================================================
                CHAT SECTION
===================================================== */

.chat-section {

    display: flex;

    align-items: center;

    gap: 8px;

}


/* Chat With Us */

.chat-label {

    padding: 10px 22px;

    background: #ffffff;

    border-radius: 25px;

    color: #20242b;

    font-size: 16px;

    font-weight: 500;

    box-shadow:
        0 4px 15px rgba(0,0,0,.12);

    white-space: nowrap;

}


/* =====================================================
                WHATSAPP
===================================================== */

.whatsapp-btn {

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: #25d366;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    text-decoration: none;

    font-size: 32px;

    box-shadow:
        0 5px 18px rgba(37,211,102,.25);

    transition: .3s ease;

}


.whatsapp-btn:hover {

    transform: scale(1.08);

    color: #ffffff;

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

@media (max-width: 767px) {

    .bottom-social-bar {

        padding: 15px 20px;

        min-height: 80px;

    }

    .follow-section {

        gap: 10px;

    }

    .follow-section > span {

        font-size: 14px;

    }

    .social-icons {

        gap: 5px;

    }

    .social-icons a {

        width: 28px;

        height: 28px;

        font-size: 18px;

    }

    .chat-label {

        padding: 8px 14px;

        font-size: 13px;

    }

    .whatsapp-btn {

        width: 48px;

        height: 48px;

        font-size: 26px;

    }

}


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

@media (max-width: 575px) {

    .bottom-social-bar {

        padding: 14px 15px;

    }

    .follow-section > span {

        font-size: 12px;

    }

    .social-icons {

        gap: 2px;

    }

    .social-icons a {

        width: 25px;

        height: 25px;

        font-size: 16px;

    }

    .chat-label {

        display: none;

    }

    .whatsapp-btn {

        width: 45px;

        height: 45px;

        font-size: 24px;

    }

}






/* =========================================================
        LARGE DESKTOP
        1400px+
========================================================= */

@media (min-width: 1400px) {

    .social-container {

        max-width: 1500px;

        padding-left: 40px;

        padding-right: 40px;

    }

    .social-post-card {

        border-radius: 11px;

    }

}


/* =========================================================
        LAPTOP
        992px - 1399px
========================================================= */

@media (max-width: 1399px) {

    .social-container {

        padding-left: 35px;

        padding-right: 35px;

    }


    .social-profile {

        gap: 18px;

    }


    .social-profile-name h3 {

        font-size: 20px;

    }


    .social-profile-tags {

        gap: 6px 14px;

    }


    .social-feature {

        padding-left: 15px;

        padding-right: 15px;

    }


    .social-feature-icon {

        width: 40px;

        height: 40px;

        min-width: 40px;

    }

}


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

@media (max-width: 991px) {

    .social-container {

        padding-left: 30px;

        padding-right: 30px;

    }


    .social-section {

        padding-top: 30px;

    }


    .social-profile {

        align-items: flex-start;

        padding-left: 5px;

        padding-right: 5px;

    }


    .social-profile-logo {

        width: 65px;

        height: 65px;

    }


    .social-profile-logo img {

        width: 58px;

        height: 58px;

    }


    .social-profile-name h3 {

        font-size: 19px;

    }


    .social-profile-tags span {

        font-size: 10px;

    }


    .social-profile-info p {

        font-size: 11px;

    }


    /* Feature strip */

    .social-feature-strip {

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

        gap: 15px 0;

    }


    .social-feature {

        padding: 10px 18px;

    }


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

        border-right: none;

    }


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

        border-top: 1px solid #e1e6ef;

    }


    .social-post-card {

        border-radius: 9px;

    }

}


/* =========================================================
        MOBILE
        BELOW 768px
========================================================= */

@media (max-width: 767px) {

    .social-container {

        padding-left: 20px;

        padding-right: 20px;

    }


    .social-section {

        padding-top: 25px;

        padding-bottom: 20px;

    }


    /* Profile */

    .social-profile {

        gap: 13px;

        padding-left: 0;

        padding-right: 0;

    }


    .social-profile-logo {

        width: 55px;

        height: 55px;

    }


    .social-profile-logo img {

        width: 50px;

        height: 50px;

    }


    .social-profile-name h3 {

        font-size: 17px;

    }


    .social-profile-name i {

        font-size: 13px;

    }


    .social-profile-tags {

        gap: 5px 10px;

    }


    .social-profile-tags span {

        font-size: 9px;

    }


    .social-profile-info p {

        margin-top: 7px;

        font-size: 10px;

        line-height: 16px;

    }


    /* Posts */

    .social-posts {

        margin-top: 15px;

    }


    .social-post-card {

        border-radius: 9px;

    }


    /* Feature */

    .social-feature-strip {

        grid-template-columns: 1fr;

        padding: 8px 15px;

        margin-top: 20px;

    }


    .social-feature {

        border-right: none !important;

        border-bottom: 1px solid #e5e9f0;

        padding: 13px 5px;

    }


    .social-feature:last-child {

        border-bottom: none;

    }


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

        border-top: none;

    }


    .social-feature-icon {

        width: 38px;

        height: 38px;

        min-width: 38px;

        font-size: 15px;

    }


    .social-feature h5 {

        font-size: 12px;

    }


    .social-feature p {

        font-size: 10px;

    }


    /* Buttons */

    .social-actions {

        flex-direction: column;

        gap: 10px;

        margin-top: 20px;

    }


    .social-load-btn,
    .social-follow-btn {

        width: 100%;

        max-width: 240px;

    }

}


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

@media (max-width: 575px) {

    .social-container {

        padding-left: 20px;

        padding-right: 20px;

    }


    .social-profile {

        align-items: flex-start;

    }


    .social-profile-logo {

        width: 48px;

        height: 48px;

    }


    .social-profile-logo img {

        width: 44px;

        height: 44px;

    }


    .social-profile-name h3 {

        font-size: 16px;

    }


    .social-profile-tags {

        display: block;

    }


    .social-profile-tags span {

        display: inline-flex;

        margin-right: 8px;

        margin-bottom: 4px;

    }


    .social-profile-info p {

        font-size: 9px;

        line-height: 15px;

    }


    .social-post-card {

        aspect-ratio: 4 / 5;

    }


    .social-feature {

        gap: 10px;

    }


    .social-follow-us span {

        font-size: 11px;

    }

}

/* =====================================================
   SOCIAL POSTS
===================================================== */

.social-post-item {
    display: block;
}


/* Hidden posts */

.load-more-post {
    display: none;
}


/* Post link */

.social-post-link {
    display: block;
    text-decoration: none;
    width: 100%;
}


/* Post card */

.social-post-card {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
    border-radius: 0;
    position: relative;
}


/* Post image */

.social-post-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* Hover */

.social-post-link:hover .social-post-card img {
    transform: scale(1.03);
}

.social-post-card img {
    transition: transform 0.3s ease;
}


/* Video */

.social-video {
    position: relative;
}


/* Play button */

.social-play {
    position: absolute;
    top: 50%;
    left: 50%;

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

    width: 58px;
    height: 58px;

    border-radius: 50%;

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

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

    box-shadow: 0 5px 20px rgba(0,0,0,0.18);
}


.social-play i {
    font-size: 30px;
    color: #083C7C;
    margin-left: 3px;
}


/* =====================================================
   LOAD MORE BUTTON
===================================================== */

.social-load-btn {
    border: none;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 13px 22px;

    background: #083C7C;
    color: #ffffff;

    border-radius: 5px;

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

    transition: all 0.3s ease;
}


.social-load-btn:hover {
    background: #062d5c;
}


.social-load-btn i {
    font-size: 14px;
}


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

@media (max-width: 767px) {

    .social-post-card {
        aspect-ratio: 1 / 1;
    }

    .social-play {
        width: 48px;
        height: 48px;
    }

    .social-play i {
        font-size: 25px;
    }

}




/* =========================================================
                    FAQ SECTION
========================================================= */

.faq-section {

    position: relative;

    width: 100%;

    padding: 70px 0 65px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9ff 100%
        );

    overflow: hidden;

}

.authorisation-btn {
    display: inline-block;
    padding: 14px 28px;
    background: #083C7C;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
}

.authorisation-btn:hover {
    background: #062d5c;
}

.programme-list {
    list-style-type: disc !important;
    padding-left: 25px !important;
    margin: 12px 0 18px !important;
}

.programme-list li {
    display: list-item !important;
    list-style-type: disc !important;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.6;
    color: #3A4F66;
}

.verification-list {
    padding-left: 25px;
    margin: 15px 0 20px;
}

.verification-list li {
    padding-left: 5px;
    margin-bottom: 18px;
    color: #3A4F66;
}

.verification-list li::marker {
    color: #083C7C;
    font-weight: 700;
}

.verification-list li strong {
    display: block;
    color: #083C7C;
    font-size: 16px;
    margin-bottom: 5px;
}

.verification-list li p {
    margin: 0 0 5px;
    color: #53657A;
    font-size: 15px;
    line-height: 1.6;
}

.verify-credential-btn {
    display: inline-block;
    padding: 13px 24px;
    background: #083C7C;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

.verify-credential-btn:hover {
    background: #062d5c;
    color: #fff;
}


.app-download-buttons {
    display: flex;
    gap: 14px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.app-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    background: #083C7C;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s ease;
}

.app-download-btn:hover {
    background: #062d5c;
    color: #fff;
}

@media (max-width: 600px) {
    .app-download-buttons {
        flex-direction: column;
    }

    .app-download-btn {
        width: 100%;
        text-align: center;
    }
}


/* =========================================================
                    SAME WIDTH SYSTEM
========================================================= */

.faq-container {

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding-left: 40px;

    padding-right: 40px;

    position: relative;

    z-index: 2;

}


/* =========================================================
                    DECORATIVE SHAPES
========================================================= */

.faq-shape {

    position: absolute;

    border: 1px dashed #c9d9ff;

    opacity: .7;

    pointer-events: none;

}


.faq-shape-left {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    left: -45px;

    top: 55px;

}


.faq-shape-right {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    right: -60px;

    top: 65px;

}


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

.faq-header {

    max-width: 850px;

    margin: 0 auto 38px;

}


.faq-badge {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 18px;

    border-radius: 30px;

    background: #edf3ff;

    color: #1764dc;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .5px;

}


.faq-badge i {

    font-size: 13px;

}


.faq-header h2 {

    margin: 16px 0 10px;

    color: #0b1b45;

    font-size: 48px;

    font-weight: 800;

    line-height: 1.15;

}


.faq-header h2 span {

    background:
        linear-gradient(
            90deg,
            #315cff,
            #7650ff
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.faq-header p {

    max-width: 700px;

    margin: 0 auto;

    color: #667085;

    font-size: 15px;

    line-height: 24px;

}


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

.faq-list {

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;

}


/* =========================================================
                    FAQ ITEM
========================================================= */

.faq-item {

    margin-bottom: 8px;

    border: 1px solid #e8edf6;

    border-radius: 9px;

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

    box-shadow:
        0 4px 15px rgba(30,60,120,.045);

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


.faq-item:hover {

    transform: translateY(-2px);

    border-color: #d5e1f8;

    box-shadow:
        0 8px 24px rgba(30,60,120,.08);

}


/* =========================================================
                    QUESTION
========================================================= */

.faq-question {

    position: relative;

    width: 100%;

    min-height: 58px;

    display: flex;

    align-items: center;

    border: none;

    outline: none;

    background: transparent;

    padding: 0 18px;

    text-align: left;

    cursor: pointer;

}


/* =========================================================
                    NUMBER
========================================================= */

.faq-number {

    width: 44px;

    flex-shrink: 0;

    color: #1765db;

    font-size: 17px;

    font-weight: 700;

    transition: .35s ease;

}


/* Open number */

.faq-question:not(.collapsed) .faq-number {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #1767df,
            #4d5dff
        );

    align-self: stretch;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: -18px;

    margin-right: 18px;

}


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

.faq-divider {

    width: 1px;

    height: 25px;

    background: #dbe3f0;

    margin-right: 15px;

    transition: .3s ease;

}


.faq-question:not(.collapsed) .faq-divider {

    background: #c9d9ff;

}


/* =========================================================
                    QUESTION TEXT
========================================================= */

.faq-question-text {

    flex: 1;

    color: #17233f;

    font-size: 14px;

    font-weight: 650;

    line-height: 20px;

}


.faq-question:hover .faq-question-text {

    color: #155ed5;

}


/* =========================================================
                    TOGGLE ICON
========================================================= */

.faq-toggle {

    width: 34px;

    height: 34px;

    min-width: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #dce6f5;

    border-radius: 50%;

    background: #ffffff;

    color: #3170db;

    margin-left: 15px;

    transition:
        transform .45s cubic-bezier(.4,0,.2,1),
        background .3s ease,
        color .3s ease,
        border-color .3s ease;

}


.faq-question:not(.collapsed) .faq-toggle {

    transform: rotate(180deg);

    color: #ffffff;

    border-color: #2868df;

    background:
        linear-gradient(
            135deg,
            #1767df,
            #5c56ff
        );

}


/* =========================================================
                    ANSWER
========================================================= */

.faq-answer-wrapper {

    background:
        linear-gradient(
            90deg,
            #f1f7ff,
            #f7faff
        );

}


/*
Important:
Bootstrap collapse handles height animation.
This adds a smooth content animation.
*/

.faq-answer {

    display: flex;

    align-items: flex-start;

    gap: 28px;

    padding: 22px 55px 25px;

    border-top: 1px solid #dce8f8;

}


/* =========================================================
                    ANSWER ICON
========================================================= */

.faq-answer-icon {

    width: 50px;

    height: 50px;

    min-width: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background: #ffffff;

    color: #2871df;

    font-size: 20px;

    box-shadow:
        0 7px 22px rgba(40,100,200,.10);

    transition:
        transform .5s ease,
        box-shadow .5s ease;

}


.faq-item:hover .faq-answer-icon {

    transform: translateY(-3px);

    box-shadow:
        0 10px 28px rgba(40,100,200,.15);

}


/* =========================================================
                    ANSWER TEXT
========================================================= */

.faq-answer-content {

    flex: 1;

}


.faq-answer-content p {

    margin: 0 0 12px;

    color: #4b5565;

    font-size: 12px;

    line-height: 21px;

}


.faq-answer-content p:last-child {

    margin-bottom: 0;

}


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

.faq-answer-wrapper.collapsing .faq-answer {

    opacity: 0;

    transform: translateY(-10px);

}


.faq-answer-wrapper.show .faq-answer {

    animation:
        faqAnswerReveal .45s ease forwards;

}


@keyframes faqAnswerReveal {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


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

.faq-button-wrapper {

    display: flex;

    justify-content: center;

    margin-top: 27px;

}


.faq-more-btn {

    min-width: 145px;

    height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 0 20px;

    border-radius: 6px;

    background:
        linear-gradient(
            90deg,
            #1267e8,
            #315bfa
        );

    color: #ffffff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(35,95,220,.18);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.faq-more-btn:hover {

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(35,95,220,.25);

}


.faq-more-btn i {

    transition: transform .3s ease;

}


.faq-more-btn:hover i {

    transform: translateX(4px);

}

/* =========================================================
                    LAPTOP
              992px - 1399px
========================================================= */

@media (max-width: 1399px) {

    .faq-container {

        padding-left: 35px;

        padding-right: 35px;

    }


    .faq-header h2 {

        font-size: 44px;

    }


    .faq-list {

        max-width: 1150px;

    }


    .faq-answer {

        padding-left: 45px;

        padding-right: 45px;

    }

}


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

@media (max-width: 991px) {

    .faq-section {

        padding: 60px 0 55px;

    }


    .faq-container {

        padding-left: 30px;

        padding-right: 30px;

    }


    .faq-header {

        margin-bottom: 30px;

    }


    .faq-header h2 {

        font-size: 40px;

    }


    .faq-header p {

        font-size: 14px;

        line-height: 22px;

    }


    .faq-question {

        min-height: 56px;

        padding-left: 16px;

        padding-right: 16px;

    }


    .faq-question:not(.collapsed) .faq-number {

        margin-left: -16px;

        margin-right: 16px;

    }


    .faq-number {

        width: 42px;

        font-size: 16px;

    }


    .faq-question-text {

        font-size: 13px;

    }


    .faq-answer {

        gap: 20px;

        padding: 20px 30px 23px;

    }


    .faq-answer-icon {

        width: 62px;

        height: 62px;

        min-width: 62px;

        font-size: 24px;

    }


    .faq-answer-content p {

        font-size: 11px;

        line-height: 19px;

    }

}


/* =========================================================
                    MOBILE
                  BELOW 768px
========================================================= */

@media (max-width: 767px) {

    .faq-section {

        padding: 50px 0 45px;

    }


    .faq-container {

        padding-left: 20px;

        padding-right: 20px;

    }


    .faq-header {

        margin-bottom: 25px;

    }


    .faq-badge {

        font-size: 10px;

        padding: 6px 14px;

    }


    .faq-header h2 {

        font-size: 32px;

        line-height: 1.2;

        margin-top: 13px;

    }


    .faq-header p {

        font-size: 12px;

        line-height: 19px;

    }


    .faq-item {

        margin-bottom: 7px;

        border-radius: 8px;

    }


    .faq-question {

        min-height: 55px;

        padding: 0 12px;

    }


    .faq-question:not(.collapsed) .faq-number {

        margin-left: -12px;

        margin-right: 12px;

    }


    .faq-number {

        width: 38px;

        font-size: 14px;

    }


    .faq-divider {

        height: 22px;

        margin-right: 10px;

    }


    .faq-question-text {

        font-size: 12px;

        line-height: 17px;

    }


    .faq-toggle {

        width: 30px;

        height: 30px;

        min-width: 30px;

        margin-left: 8px;

        font-size: 11px;

    }


    .faq-answer {

        flex-direction: column;

        gap: 14px;

        padding: 18px 18px 20px;

    }


    .faq-answer-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;

        font-size: 17px;

        border-radius: 8px;
    }


    .faq-answer-content p {

        font-size: 11px;

        line-height: 18px;

    }


    .faq-button-wrapper {

        margin-top: 22px;
        margin-bottom: 22px;

    }


    .faq-more-btn {

        height: 38px;

        min-width: 140px;

    }

}


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

@media (max-width: 575px) {

    .faq-container {

        padding-left: 20px;

        padding-right: 20px;

    }


    .faq-header h2 {

        font-size: 28px;

    }


    .faq-header p {

        font-size: 11px;

        max-width: 330px;

    }


    .faq-question {

        min-height: 52px;

    }


    .faq-number {

        width: 34px;

        font-size: 13px;

    }


    .faq-question:not(.collapsed) .faq-number {

        margin-left: -12px;

        margin-right: 12px;

    }


    .faq-question-text {

        font-size: 11px;

        line-height: 16px;

    }


    .faq-divider {

        margin-right: 8px;

    }


    .faq-toggle {

        width: 28px;

        height: 28px;

        min-width: 28px;

    }


    .faq-answer {

        padding: 16px 15px 18px;

    }


    .faq-answer-content p {

        font-size: 10px;

        line-height: 17px;

    }

}

/* =========================================================
   WHY ODLC — SAME FONT SCALE AS FAQ
========================================================= */

/* Main Heading */

.why-title {
    font-size: 48px;
    line-height: 1.15;
    font-weight: 800;
}


/* Description */

.why-description {
    font-size: 15px;
    line-height: 24px;
}


/* Badge */

.why-badge {
    font-size: 12px;
    font-weight: 700;
}


/* Main comparison cards */

.comparison-card h3 {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
}

.comparison-card p {
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
}


/* Ecosystem cards */

.ecosystem-content h3 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

.ecosystem-content p {
    font-size: 13px;
    line-height: 19px;
    /* font-weight: 600; */
}


/* Bottom collaboration cards */

.collaboration-content h3 {
    font-size: 24px;
    font-weight: 800;
}

.collaboration-content p {
    font-size: 13px;
    line-height: 19px;
    font-weight: 600;
}





/* =========================================================
   ODLC GLOBAL BLOG TYPOGRAPHY
   LARGE / DESKTOP
========================================================= */

/* Main badge */
.blog-badge {
    font-size: 14px !important;
}

/* Main heading */
.blog-title,
.blog-section .text-center h2 {
    font-size: 48px !important;
    line-height: 1.15 !important;
}

/* Main description */
.blog-description,
.blog-section .text-center > p {
    font-size: 16px !important;
    line-height: 28px !important;
}


/* =========================================================
   BLOG CARD TYPOGRAPHY
========================================================= */

/* Date */
.blog-date strong,
.date-box h4 {
    font-size: 20px !important;
}

.blog-date span,
.date-box span {
    font-size: 12px !important;
}


/* Category */
.blog-category {
    font-size: 14px !important;
}

.blog-category i {
    font-size: 15px !important;
}


/* Card heading */
.blog-card-content h3,
.blog-content h4 {
    font-size: 19px !important;
    line-height: 1.45 !important;
}


/* Card paragraph */
.blog-card-content p,
.blog-content p {
    font-size: 14px !important;
    line-height: 24px !important;
}


/* Read more */
.blog-read-more,
.blog-footer a {
    font-size: 14px !important;
}


/* Arrow */
.blog-circle-arrow,
.blog-footer button {
    font-size: 16px !important;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.blog-cta-text h4,
.bottom-left h4 {
    font-size: 18px !important;
    line-height: 1.4 !important;
}

.blog-cta-text p,
.bottom-left p {
    font-size: 14px !important;
    line-height: 22px !important;
}


/* CTA Button */
.blog-cta-button,
.blog-btn {
    font-size: 14px !important;
}


/* CTA Icons */
.blog-cta-icon,
.bottom-icon {
    font-size: 21px !important;
}

/* =========================================================
   ODLC TYPOGRAPHY — LAPTOP
========================================================= */

@media (max-width: 1399px) {

    .blog-title,
    .blog-section .text-center h2 {
        font-size: 44px !important;
    }

    .blog-description,
    .blog-section .text-center > p {
        font-size: 16px !important;
        line-height: 27px !important;
    }

    .blog-badge {
        font-size: 13px !important;
    }

    .blog-card-content h3,
    .blog-content h4 {
        font-size: 18px !important;
    }

    .blog-card-content p,
    .blog-content p {
        font-size: 14px !important;
        line-height: 23px !important;
    }

    .blog-category {
        font-size: 13px !important;
    }

    .blog-read-more,
    .blog-footer a {
        font-size: 14px !important;
    }

    .blog-cta-text h4,
    .bottom-left h4 {
        font-size: 17px !important;
    }

    .blog-cta-text p,
    .bottom-left p {
        font-size: 14px !important;
    }

    .blog-cta-button,
    .blog-btn {
        font-size: 14px !important;
    }
}

/* =========================================================
   ODLC TYPOGRAPHY — TABLET
========================================================= */

@media (max-width: 991px) {

    .blog-title,
    .blog-section .text-center h2 {
        font-size: 38px !important;
        line-height: 1.2 !important;
    }

    .blog-description,
    .blog-section .text-center > p {
        font-size: 15px !important;
        line-height: 25px !important;
    }

    .blog-badge {
        font-size: 12px !important;
    }

    .blog-card-content h3,
    .blog-content h4 {
        font-size: 18px !important;
        line-height: 1.45 !important;
    }

    .blog-card-content p,
    .blog-content p {
        font-size: 14px !important;
        line-height: 23px !important;
    }

    .blog-category {
        font-size: 13px !important;
    }

    .blog-read-more,
    .blog-footer a {
        font-size: 14px !important;
    }

    .blog-circle-arrow,
    .blog-footer button {
        font-size: 15px !important;
    }

    .blog-cta-text h4,
    .bottom-left h4 {
        font-size: 17px !important;
    }

    .blog-cta-text p,
    .bottom-left p {
        font-size: 13px !important;
        line-height: 21px !important;
    }

    .blog-cta-button,
    .blog-btn {
        font-size: 14px !important;
    }
}

/* =========================================================
   ODLC TYPOGRAPHY — MOBILE
========================================================= */

@media (max-width: 767px) {

    /* Badge */
    .blog-badge {
        font-size: 11px !important;
        padding: 8px 14px !important;
    }


    /* Main heading */
    .blog-title,
    .blog-section .text-center h2 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }


    /* Main paragraph */
    .blog-description,
    .blog-section .text-center > p {
        font-size: 14px !important;
        line-height: 23px !important;
    }


    /* Date */
    .blog-date strong,
    .date-box h4 {
        font-size: 18px !important;
    }

    .blog-date span,
    .date-box span {
        font-size: 11px !important;
    }


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


    /* Card heading */
    .blog-card-content h3,
    .blog-content h4 {
        font-size: 18px !important;
        line-height: 1.45 !important;
    }


    /* Card description */
    .blog-card-content p,
    .blog-content p {
        font-size: 14px !important;
        line-height: 22px !important;
    }


    /* Read More */
    .blog-read-more,
    .blog-footer a {
        font-size: 14px !important;
    }


    /* Arrow */
    .blog-circle-arrow,
    .blog-footer button {
        font-size: 15px !important;
    }


    /* CTA heading */
    .blog-cta-text h4,
    .bottom-left h4 {
        font-size: 17px !important;
        line-height: 1.4 !important;
    }


    /* CTA paragraph */
    .blog-cta-text p,
    .bottom-left p {
        font-size: 13px !important;
        line-height: 21px !important;
    }


    /* CTA button */
    .blog-cta-button,
    .blog-btn {
        font-size: 14px !important;
    }
}

/* =========================================================
   ODLC TYPOGRAPHY — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .blog-badge {
        font-size: 10px !important;
    }

    .blog-title,
    .blog-section .text-center h2 {
        font-size: 28px !important;
    }

    .blog-description,
    .blog-section .text-center > p {
        font-size: 13px !important;
        line-height: 21px !important;
    }

    .blog-card-content h3,
    .blog-content h4 {
        font-size: 17px !important;
        line-height: 1.4 !important;
    }

    .blog-card-content p,
    .blog-content p {
        font-size: 13px !important;
        line-height: 21px !important;
    }

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

    .blog-read-more,
    .blog-footer a {
        font-size: 13px !important;
    }

    .blog-cta-text h4,
    .bottom-left h4 {
        font-size: 16px !important;
    }

    .blog-cta-text p,
    .bottom-left p {
        font-size: 13px !important;
    }

    .blog-cta-button,
    .blog-btn {
        font-size: 13px !important;
    }
}


/* =========================================================
   RECOGNITION SECTION — ODLC TYPOGRAPHY
   MATCHES WHY ODLC / FAQ STYLE
========================================================= */


/* =========================================================
   LARGE DESKTOP — 1400px+
========================================================= */

.recognition-badge {
    font-size: 13px !important;
}

.recognition-badge i {
    font-size: 13px !important;
}


/* Main heading */

.recognition-title {
    font-size: 52px !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
}


/* Description */

.recognition-description {
    font-size: 16px !important;
    line-height: 1.7 !important;
}


/* Button */

.recognition-btn {
    font-size: 16px !important;
}

.recognition-btn-icon {
    font-size: 17px !important;
}


/* Bottom feature titles */

.recognition-feature h4 {
    font-size: 14px !important;
    line-height: 1.4 !important;
}


/* Feature icons */

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


/* =========================================================
   LAPTOP — 1200px to 1399px
========================================================= */

@media (max-width: 1399px) {

    .recognition-title {
        font-size: 46px !important;
        line-height: 1.15 !important;
    }

    .recognition-description {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .recognition-btn {
        font-size: 15px !important;
    }

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

}


/* =========================================================
   TABLET — 992px to 1199px
========================================================= */

@media (max-width: 1199px) {

    .recognition-title {
        font-size: 42px !important;
        line-height: 1.18 !important;
    }

    .recognition-description {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .recognition-btn {
        font-size: 15px !important;
    }

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

}


/* =========================================================
   TABLET — 768px to 991px
========================================================= */

@media (max-width: 991px) {

    .recognition-title {
        font-size: 40px !important;
        line-height: 1.2 !important;
    }

    .recognition-description {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .recognition-btn {
        font-size: 15px !important;
    }

    .recognition-feature h4 {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

}


/* =========================================================
   MOBILE — BELOW 768px
========================================================= */

@media (max-width: 767px) {

    .recognition-badge {
        font-size: 12px !important;
    }

    .recognition-badge i {
        font-size: 12px !important;
    }


    /* Main heading */

    .recognition-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
        letter-spacing: -.5px !important;
    }


    /* Paragraph */

    .recognition-description {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }


    /* Button */

    .recognition-btn {
        font-size: 14px !important;
    }


    .recognition-btn-icon {
        font-size: 15px !important;
    }


    /* Feature text */

    .recognition-feature h4 {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }


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

}


/* =========================================================
   SMALL MOBILE — BELOW 480px
========================================================= */

@media (max-width: 480px) {

    .recognition-badge {
        font-size: 11px !important;
    }


    .recognition-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }


    .recognition-description {
        font-size: 13px !important;
        line-height: 1.65 !important;
    }


    .recognition-btn {
        font-size: 13px !important;
    }


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

}

/* =========================================================
   ALL STAT / ECOSYSTEM / COLLABORATION CARDS
   PREMIUM COMMON ANIMATION
========================================================= */

/* =========================================================
   BASE
========================================================= */

.comparison-card,
.ecosystem-card,
.collaboration-card {

    position: relative;

    overflow: hidden;

    cursor: pointer;

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease,
        border-color .35s ease;

    animation: allCardsReveal .7s ease both;

}


/* =========================================================
   BLUE GLOW
========================================================= */

.comparison-card::before,
.ecosystem-card::before,
.collaboration-card::before {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -130px;

    width: 220px;
    height: 180px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(37, 99, 235, .12);

    filter: blur(30px);

    opacity: 0;

    transition:
        bottom .5s ease,
        width .5s ease,
        opacity .5s ease;

    pointer-events: none;

    z-index: 0;

}


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

.comparison-card:hover,
.ecosystem-card:hover,
.collaboration-card:hover {

    transform: translateY(-8px);

    border-color: #3b82f6;

    box-shadow:
        0 18px 40px rgba(37,99,235,.15),
        0 5px 15px rgba(37,99,235,.07);

}


/* Glow */

.comparison-card:hover::before,
.ecosystem-card:hover::before,
.collaboration-card:hover::before {

    bottom: -65px;

    width: 300px;

    opacity: 1;

}


/* =========================================================
   LIGHT SWEEP
========================================================= */

.comparison-card::after,
.ecosystem-card::after,
.collaboration-card::after {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.6),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .7s ease;

    pointer-events: none;

    z-index: 5;

}


.comparison-card:hover::after,
.ecosystem-card:hover::after,
.collaboration-card:hover::after {

    left: 140%;

}


/* =========================================================
   KEEP CONTENT ABOVE GLOW
========================================================= */

.comparison-card > *,
.ecosystem-card > *,
.collaboration-card > * {

    position: relative;

    z-index: 2;

}


/* =========================================================
   ALL ICONS
========================================================= */

.comparison-icon,
.ecosystem-icon,
.collaboration-icon {

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        background .35s ease,
        box-shadow .35s ease;

}


/* Icon hover */

.comparison-card:hover .comparison-icon,
.ecosystem-card:hover .ecosystem-icon,
.collaboration-card:hover .collaboration-icon {

    transform:
        translateY(-5px)
        scale(1.1)
        rotate(-5deg);

    background: #2563eb;

    color: #ffffff;

    box-shadow:
        0 9px 22px rgba(37,99,235,.25);

}


/* =========================================================
   NUMBERS
========================================================= */

.comparison-card h3,
.ecosystem-card h3,
.collaboration-card h3 {

    transition:
        color .35s ease,
        transform .4s ease;

}


.comparison-card:hover h3,
.ecosystem-card:hover h3,
.collaboration-card:hover h3 {

    color: #2563eb;

    transform: translateY(-3px);

}


/* =========================================================
   PARAGRAPHS
========================================================= */

.comparison-card p,
.ecosystem-card p,
.collaboration-card p {

    transition:
        color .35s ease,
        transform .35s ease;

}


.comparison-card:hover p,
.ecosystem-card:hover p,
.collaboration-card:hover p {

    color: #234d91;

    transform: translateY(-2px);

}





/* =========================================================
   ICON PULSE
========================================================= */

.comparison-card:hover .comparison-icon::after,
.ecosystem-card:hover .ecosystem-icon::after,
.collaboration-card:hover .collaboration-icon::after {

    content: "";

    position: absolute;

    inset: -5px;

    border: 2px solid rgba(37,99,235,.22);

    border-radius: inherit;

    animation: cardIconPulse .8s ease-out;

}


@keyframes cardIconPulse {

    from {
        opacity: 1;
        transform: scale(.85);
    }

    to {
        opacity: 0;
        transform: scale(1.35);
    }

}


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

@keyframes allCardsReveal {

    from {

        opacity: 0;

        transform:
            translateY(28px)
            scale(.97);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   COMPARISON CARDS — STAGGER
========================================================= */

.comparison-card:nth-child(1) {
    animation-delay: .05s;
}

.comparison-card:nth-child(2) {
    animation-delay: .10s;
}

.comparison-card:nth-child(3) {
    animation-delay: .15s;
}

.comparison-card:nth-child(4) {
    animation-delay: .20s;
}

.comparison-card:nth-child(5) {
    animation-delay: .25s;
}

.comparison-card:nth-child(6) {
    animation-delay: .30s;
}


/* =========================================================
   ECOSYSTEM CARDS — STAGGER
========================================================= */

.ecosystem-card:nth-child(1) {
    animation-delay: .05s;
}

.ecosystem-card:nth-child(2) {
    animation-delay: .10s;
}

.ecosystem-card:nth-child(3) {
    animation-delay: .15s;
}

.ecosystem-card:nth-child(4) {
    animation-delay: .20s;
}

.ecosystem-card:nth-child(5) {
    animation-delay: .25s;
}

.ecosystem-card:nth-child(6) {
    animation-delay: .30s;
}

.ecosystem-card:nth-child(7) {
    animation-delay: .35s;
}

.ecosystem-card:nth-child(8) {
    animation-delay: .40s;
}

.ecosystem-card:nth-child(9) {
    animation-delay: .45s;
}

.ecosystem-card:nth-child(10) {
    animation-delay: .50s;
}

.ecosystem-card:nth-child(11) {
    animation-delay: .55s;
}

.ecosystem-card:nth-child(12) {
    animation-delay: .60s;
}


/* =========================================================
   COLLABORATION CARDS
========================================================= */

.collaboration-card:nth-child(1) {
    animation-delay: .10s;
}

.collaboration-card:nth-child(2) {
    animation-delay: .20s;
}


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

@media (max-width: 767px) {

    .comparison-card:hover,
    .ecosystem-card:hover,
    .collaboration-card:hover {

        transform: translateY(-5px);

        box-shadow:
            0 12px 28px rgba(37,99,235,.13);

    }

    .comparison-card:hover .comparison-icon,
    .ecosystem-card:hover .ecosystem-icon,
    .collaboration-card:hover .collaboration-icon {

        transform:
            translateY(-3px)
            scale(1.07)
            rotate(-3deg);

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .comparison-card,
    .ecosystem-card,
    .collaboration-card,
    .comparison-card::before,
    .comparison-card::after,
    .ecosystem-card::before,
    .ecosystem-card::after,
    .collaboration-card::before,
    .collaboration-card::after {

        animation: none !important;

        transition: none !important;

    }

}

/* =========================================================
   COMPARISON CARD LINE
   KEEP ORIGINAL LINE — NO HOVER ANIMATION
========================================================= */

/* .comparison-line {

    position: relative;

    z-index: 4;

    display: block;

    width: 25px !important;

    height: 3px;

    margin-top: 20px;

    border-radius: 20px;

    background: #4169ff !important;

    box-shadow: none !important;

    transition: none !important;

} */


/* Remove hover change */

.comparison-card:hover .comparison-line {

    width: 25px !important;

    background: #4169ff !important;

    box-shadow: none !important;

}



/* =========================================================
   MODERN CARD ANIMATIONS
========================================================= */

.odlc-do-card {
    position: relative;
    overflow: hidden;

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

    will-change: transform;
}


/* Animated top line */

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

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 3px;

    background: #3A4F66;

    transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1);

    z-index: 5;
}


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


/* Soft glow */

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

    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    right: -100px;

    border-radius: 50%;

    background: rgba(58, 79, 102, 0.055);

    transform: scale(0);

    transition: transform 0.6s ease;

    pointer-events: none;
}


.odlc-do-card:hover::after {
    transform: scale(1.5);
}


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

.odlc-do-card:hover {

    transform: translateY(-9px);

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

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


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

.odlc-card-icon {

    position: relative;
    z-index: 6;

    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease;
}


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

    transform:
        translateY(-4px)
        rotate(-7deg)
        scale(1.1);

    background: #3A4F66;

    color: #FFFFFF;

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


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

.odlc-card-title {

    position: relative;
    z-index: 6;

    transition:
        transform 0.4s ease;
}


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


.odlc-card-title h3 {

    transition:
        color 0.35s ease;
}


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

.card-arrow {

    transition:
        width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.35s ease;
}


.card-arrow i {

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


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

    width: 49px;
    height: 49px;
}


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

    transform:
        translate(3px, -3px)
        rotate(8deg);
}


/* =========================================================
   CONTENT SLIGHT MOVEMENT
========================================================= */

.odlc-card-body {

    position: relative;
    z-index: 6;

    transition:
        transform 0.4s ease;
}


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


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

.odlc-card-body li::marker {

    transition:
        color 0.3s ease;
}


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

.odlc-do-card {

    opacity: 0;

    animation:
        odlcCardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


.row:first-of-type .odlc-do-card:nth-child(1) {
    animation-delay: 0.05s;
}

.row:first-of-type .odlc-do-card:nth-child(2) {
    animation-delay: 0.12s;
}

.row:first-of-type .odlc-do-card:nth-child(3) {
    animation-delay: 0.19s;
}

.row:last-of-type .odlc-do-card:nth-child(1) {
    animation-delay: 0.26s;
}

.row:last-of-type .odlc-do-card:nth-child(2) {
    animation-delay: 0.33s;
}

.row:last-of-type .odlc-do-card:nth-child(3) {
    animation-delay: 0.40s;
}


@keyframes odlcCardReveal {

    0% {
        opacity: 0;
        transform: translateY(35px);
    }

    70% {
        opacity: 1;
        transform: translateY(-4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   SECTION HEADER ANIMATION
========================================================= */

.what-section-header {
    animation:
        odlcHeaderReveal 0.8s ease forwards;
}


.what-label {
    animation:
        odlcFadeDown 0.6s ease 0.1s both;
}


.what-heading-line {
    transform-origin: center;

    animation:
        odlcLineGrow 0.7s ease 0.25s both;
}


.what-section-header h2 {
    animation:
        odlcFadeUp 0.7s ease 0.3s both;
}


.what-section-header p {
    animation:
        odlcFadeUp 0.7s ease 0.45s both;
}


@keyframes odlcHeaderReveal {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes odlcFadeDown {

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

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

}


@keyframes odlcFadeUp {

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

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

}


@keyframes odlcLineGrow {

    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }

}


/* =========================================================
   ICON PULSE
========================================================= */

.odlc-card-icon i {
    transition: transform 0.4s ease;
}


.odlc-do-card:hover .odlc-card-icon i {
    animation: odlcIconPulse 0.6s ease;
}


@keyframes odlcIconPulse {

    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }

}

@media (max-width: 767.98px) {

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

    .odlc-do-card:hover .odlc-card-icon {
        transform: scale(1.06);
    }

    .odlc-do-card:hover .odlc-card-body {
        transform: none;
    }

    .odlc-do-card::after {
        display: none;
    }

}




/* =========================================================
   GLOBAL TYPOGRAPHY OVERRIDE
   RESPONSIVE - ALL DEVICES
   ========================================================= */

/* =========================================================
   H1
   ========================================================= */

h1 {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 46px !important;
    line-height: 1.2;
}


/* =========================================================
   H2
   ========================================================= */

h2 {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 35px !important;
    line-height: 1.25;
}


/* =========================================================
   H3
   ========================================================= */

h3 {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 30px !important;
    line-height: 1.3;
}


/* =========================================================
   H4
   ========================================================= */

h4 {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 25px !important;
    line-height: 1.35;
}


/* =========================================================
   H5
   ========================================================= */

h5 {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 20px !important;
    line-height: 1.4;
}


/* =========================================================
   H6
   ========================================================= */

h6 {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.4;
}


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

a {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15px !important;
}


/* =========================================================
   PARAGRAPHS
   ========================================================= */

p {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6;
}


/* =========================================================
   BANNER TYPOGRAPHY
   Banner headings and text use Roboto
   ========================================================= */

[class*="banner"] h1,
[class*="banner"] h2,
[class*="banner"] h3,
[class*="banner"] h4,
[class*="banner"] h5,
[class*="banner"] h6 {
    font-family: "Roboto", Arial, sans-serif !important;
}


[class*="banner"] p {
    font-family: "Roboto", Arial, sans-serif !important;
}


/* =========================================================
   COMMON HERO / BANNER CLASS NAMES
   ========================================================= */

.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6,

.hero-banner h1,
.hero-banner h2,
.hero-banner h3,
.hero-banner h4,
.hero-banner h5,
.hero-banner h6,

.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.hero-section h5,
.hero-section h6 {
    font-family: "Roboto", Arial, sans-serif !important;
}


.hero p,
.hero-banner p,
.hero-section p {
    font-family: "Roboto", Arial, sans-serif !important;
}


/* =========================================================
   RESPONSIVE PROTECTION
   Keep the SAME typography on all devices.
   Existing section media queries cannot reduce these sizes.
   ========================================================= */


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

@media (max-width: 1399px) {

    h1 {
        font-size: 46px !important;
    }

    h2 {
        font-size: 35px !important;
    }

    h3 {
        font-size: 30px !important;
    }

    h4 {
        font-size: 25px !important;
    }

    h5 {
        font-size: 20px !important;
    }

    h6 {
        font-size: 16px !important;
    }

    a {
        font-size: 15px !important;
    }

    p {
        font-size: 16px !important;
    }
}


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

@media (max-width: 1199px) {

    h1 {
        font-size: 46px !important;
    }

    h2 {
        font-size: 35px !important;
    }

    h3 {
        font-size: 30px !important;
    }

    h4 {
        font-size: 25px !important;
    }

    h5 {
        font-size: 20px !important;
    }

    h6 {
        font-size: 16px !important;
    }

    a {
        font-size: 15px !important;
    }

    p {
        font-size: 16px !important;
    }
}


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

@media (max-width: 991px) {

    h1 {
        font-size: 46px !important;
    }

    h2 {
        font-size: 35px !important;
    }

    h3 {
        font-size: 30px !important;
    }

    h4 {
        font-size: 25px !important;
    }

    h5 {
        font-size: 20px !important;
    }

    h6 {
        font-size: 16px !important;
    }

    a {
        font-size: 15px !important;
    }

    p {
        font-size: 16px !important;
    }
}


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

@media (max-width: 767px) {

    h1 {
        font-size: 46px !important;
    }

    h2 {
        font-size: 35px !important;
    }

    h3 {
        font-size: 30px !important;
    }

    h4 {
        font-size: 25px !important;
    }

    h5 {
        font-size: 20px !important;
    }

    h6 {
        font-size: 16px !important;
    }

    a {
        font-size: 15px !important;
    }

    p {
        font-size: 16px !important;
    }
}


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

@media (max-width: 575px) {

    h1 {
        font-size: 46px !important;
    }

    h2 {
        font-size: 35px !important;
    }

    h3 {
        font-size: 30px !important;
    }

    h4 {
        font-size: 25px !important;
    }

    h5 {
        font-size: 20px !important;
    }

    h6 {
        font-size: 16px !important;
    }

    a {
        font-size: 15px !important;
    }

    p {
        font-size: 16px !important;
    }
}


/* =========================================================
   EXTRA SMALL MOBILE
   BELOW 400px
   ========================================================= */

@media (max-width: 400px) {

    h1 {
        font-size: 40px !important;
    }

    h2 {
        font-size: 35px !important;
    }

    h3 {
        font-size: 30px !important;
    }

    h4 {
        font-size: 25px !important;
    }

    h5 {
        font-size: 20px !important;
    }

    h6 {
        font-size: 16px !important;
    }

    a {
        font-size: 15px !important;
    }

    p {
        font-size: 16px !important;
    }
}


/* =========================================================
   MOBILE ORBIT FIX
   ========================================================= */

@media (max-width: 767px) {

    .circle-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 360px !important;
        height: 430px !important;
        margin: 20px auto 0 !important;
        overflow: visible !important;
    }

    /* Outer ring */
    .outer-circle {
        position: absolute !important;
        width: 280px !important;
        height: 280px !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
    }

    /* Inner ring */
    .inner-circle {
        position: absolute !important;
        width: 220px !important;
        height: 220px !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
    }

    /* Center */
    .center-circle {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;

        width: 115px !important;
        height: 115px !important;
        z-index: 10 !important;
    }

    /* =====================================================
       ORBIT ICONS
       ===================================================== */

    .orbit {
        position: absolute !important;
        width: 280px !important;
        height: 280px !important;

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

        margin: 0 !important;
        transform-origin: center center !important;
    }

    /* TOP ICON */
    .orbit-one {
        transform: translate(-50%, -50%) rotate(0deg) !important;
    }

    /* RIGHT ICON */
    .orbit-two {
        transform: translate(-50%, -50%) rotate(120deg) !important;
    }

    /* BOTTOM-LEFT ICON */
    .orbit-three {
        transform: translate(-50%, -50%) rotate(240deg) !important;
    }

    .orbit-icon {
        position: absolute !important;
        width: 50px !important;
        height: 50px !important;

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

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

        z-index: 20 !important;
    }

    /* =====================================================
       HIDE FEATURE CARDS ON MOBILE
       ===================================================== */

    .feature-card {
        display: none !important;
    }
}


/* =========================================
   COUNTER - EQUAL LEFT & RIGHT SPACE
========================================= */

.counter-box {
    width: 100%;
    overflow: hidden;
}

.counter {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding-left: 20px !important;
    padding-right: 20px !important;
    text-align: center;
}

.counter h3,
.counter span {
    display: block;
    width: 100%;
    white-space: nowrap;
    text-align: center;
}

@media (max-width: 767px) {

    .counter-box {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .counter {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .counter h3 {
        font-size: 23px !important;
    }

    .counter span {
        font-size: 13px !important;
    }
}






/* =========================================================
   ODLC HERO - NEW LEFT SIDE
   RIGHT SIDE IMAGES REMAIN UNCHANGED
   ========================================================= */

.hero-section {
    background: #24375c !important;
}

/* LEFT SIDE */
.hero-left {
    position: relative !important;
    z-index: 5 !important;

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

    padding: 45px 30px 45px 30px !important;

    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* CONTENT WIDTH */
.hero-left .hero-content {
    width: 100% !important;
    max-width: 720px !important;
}

/* TOP SMALL TEXT */
.hero-eyebrow {
    color: #ffffff !important;

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

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

    letter-spacing: 2px !important;
    line-height: 1.5 !important;

    margin-bottom: 20px !important;
}

/* YELLOW LINE */
.hero-yellow-line {
    width: 85px !important;
    height: 3px !important;

    background: #f7c948 !important;

    margin-bottom: 25px !important;
}

/* MAIN HEADING */
.hero-left h2 {
    margin: 0 0 22px 0 !important;

    color: #ffffff !important;

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

    font-size: 40px !important;
    font-weight: 800 !important;

    line-height: 1.08 !important;
    letter-spacing: -1px !important;

    text-transform: uppercase !important;
}

/* BLUE PART OF HEADING */
.hero-left h2 span {
    display: block !important;

    color: #4d84ff !important;

    margin-top: 5px !important;
}

/* PROGRAMME TEXT */
.hero-programmes {
    color: #ffffff !important;

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

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

    line-height: 1.7 !important;

    margin-bottom: 22px !important;
}

.hero-programmes span {
    color: #f7c948 !important;

    margin: 0 5px !important;
}

/* DESCRIPTION */
.hero-left .hero-content p {
    max-width: 650px !important;

    color: rgba(255,255,255,0.90) !important;

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

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

    line-height: 1.75 !important;

    margin: 0 0 30px 0 !important;

    text-align: left !important;
}

/* =========================================================
   HERO BUTTONS
   ALL DEVICES - ONE BELOW ANOTHER
========================================================= */

.hero-buttons {
    width: 100% !important;

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

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

    gap: 12px !important;

    margin-top: 25px !important;
}


/* BOTH BUTTONS */

.hero-buttons .hero-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: 320px !important;
    min-width: 0 !important;

    height: 52px !important;

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

    box-sizing: border-box !important;

    border-radius: 7px !important;

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

    line-height: 1.2 !important;
    text-decoration: none !important;

    white-space: nowrap !important;
}


/* ARROW */

.hero-buttons .hero-btn i {
    flex-shrink: 0 !important;
    margin-left: 12px !important;
    font-size: 18px !important;
}


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

@media (max-width: 1199px) {

    .hero-buttons {
        gap: 11px !important;
    }

    .hero-buttons .hero-btn {
        max-width: 290px !important;
        height: 50px !important;
        padding: 0 18px !important;
        font-size: 13px !important;
    }

}


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

@media (max-width: 991px) {

    .hero-buttons {
        gap: 10px !important;
        margin-top: 22px !important;
    }

    .hero-buttons .hero-btn {
        max-width: 270px !important;
        height: 48px !important;
        padding: 0 17px !important;
        font-size: 13px !important;
    }

}


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

@media (max-width: 767px) {

    .hero-buttons {
        width: 100% !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }

    .hero-buttons .hero-btn {
        width: 100% !important;
        max-width: 100% !important;
        height: 48px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
    }

}


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

@media (max-width: 480px) {

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

    .hero-buttons .hero-btn {
        height: 46px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
    }

}




/* =========================================================
   KEEP RIGHT IMAGE AREA
   ========================================================= */

.hero-right {
    position: relative !important;
    z-index: 2 !important;
}


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

@media (min-width: 1400px) {

    .hero-left {
        padding-left: 35px !important;
        padding-right: 35px !important;
    }

    .hero-left h1 {
        font-size: 50px !important;
    }

}


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

@media (max-width: 1399px) {

    .hero-left {
        padding: 40px 25px 40px 25px !important;
    }

    .hero-left h1 {
        font-size: 43px !important;
    }

    .hero-eyebrow {
        font-size: 15px !important;
        letter-spacing: 1.5px !important;
    }

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

    .hero-left .hero-content p {
        font-size: 16px !important;
    }

}


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

@media (max-width: 991px) {

    .hero-left {
        padding: 50px 35px !important;

        align-items: center !important;
    }

    .hero-left .hero-content {
        max-width: 750px !important;
        margin: 0 auto !important;
    }

    .hero-left h1 {
        font-size: 42px !important;
    }

}


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

@media (max-width: 767px) {

    .hero-left {
        padding: 40px 25px !important;

        text-align: left !important;
    }

    .hero-eyebrow {
        font-size: 13px !important;

        letter-spacing: 1px !important;

        margin-bottom: 16px !important;
    }

    .hero-yellow-line {
        width: 65px !important;

        margin-bottom: 20px !important;
    }

    .hero-left h1 {
        font-size: 32px !important;

        line-height: 1.12 !important;

        letter-spacing: -0.5px !important;
    }

    .hero-programmes {
        font-size: 14px !important;

        line-height: 1.8 !important;
    }

    .hero-left .hero-content p {
        font-size: 15px !important;

        line-height: 1.65 !important;

        margin-bottom: 25px !important;
    }

    .hero-buttons {
        flex-direction: column !important;

        align-items: stretch !important;

        gap: 12px !important;
    }

    .hero-btn {
        width: 100% !important;

        min-height: 52px !important;
    }

}


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

@media (max-width: 480px) {

    .hero-left {
        padding: 35px 20px !important;
    }

    .hero-left h1 {
        font-size: 29px !important;
    }

    .hero-eyebrow {
        font-size: 12px !important;
    }

    .hero-programmes {
        font-size: 13px !important;
    }

    .hero-left .hero-content p {
        font-size: 14px !important;
    }

}

/* =========================================================
   SPACE BELOW RIGHT-SIDE HERO IMAGES
   ========================================================= */

.hero-section {
    padding-bottom: 0px !important;
    box-sizing: border-box !important;
}

/* Keep right images inside the hero with bottom spacing */
.hero-right {
    height: calc(100% - 35px) !important;
    margin-bottom: 35px !important;
}


/* =========================================================
   PROGRAMME PILLARS - MODERN UI
========================================================= */

.programme-pillars-section {
    width: 100%;
    padding: 78px 0 82px;
    background: #f7faff;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

.programme-pillars-container {
    width: 92%;
    max-width: 1380px;
    margin: 0 auto;
}


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

.programme-pillars-header {
    text-align: center;
    margin-bottom: 42px;
}

.programme-pillars-label {
    display: inline-block;
    margin-bottom: 10px;
    color: #083C7C;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.programme-pillars-header h2 {
    margin: 0;
    color: #083C7C;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.5px;
}

.programme-pillars-header p {
    max-width: 720px;
    margin: 12px auto 0;
    color: #61748a;
    font-size: 16px;
    line-height: 1.6;
}


/* =========================================================
   GRID
========================================================= */

.programme-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


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

.programme-pillar-card {
    position: relative;
    min-height: 285px;
    padding: 25px 24px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #ffffff;

    border: 1px solid #dce7f2;
    border-radius: 16px;

    text-decoration: none;

    overflow: hidden;

    box-sizing: border-box;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


/* subtle top accent */

.programme-pillar-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #083C7C;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .35s ease;
}


/* hover */

.programme-pillar-card:hover {
    transform: translateY(-6px);
    border-color: #b9cde2;
    box-shadow: 0 16px 35px rgba(8,60,124,.10);
}

.programme-pillar-card:hover::before {
    transform: scaleX(1);
}


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

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

.pillar-number {
    color: #b6c9dd;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* icon */

.pillar-icon {
    width: 48px;
    height: 48px;

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

    background: #eef5fc;
    border: 1px solid #d6e5f3;
    border-radius: 12px;

    color: #083C7C;
    font-size: 21px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.programme-pillar-card:hover .pillar-icon {
    background: #083C7C;
    color: #ffffff;
    transform: translateY(-2px);
}


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

.pillar-content {
    margin-top: 24px;
}

.pillar-content h3 {
    margin: 0 0 9px;

    color: #083C7C;

    font-size: 22px;
    line-height: 1.25;

    font-weight: 700;
    letter-spacing: -.3px;
}

.pillar-content p {
    margin: 0;

    color: #64778c;

    font-size: 14px;
    line-height: 1.55;

    text-align: left;
}

.pillar-content p span {
    padding: 0 5px;
    color: #8aa2bb;
}


/* =========================================================
   ACTION
========================================================= */

.pillar-action {
    margin-top: 24px;

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

    padding-top: 17px;

    border-top: 1px solid #edf2f7;

    color: #083C7C;

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

    text-transform: uppercase;
    letter-spacing: .3px;
}

.pillar-action i {
    width: 34px;
    height: 34px;

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

    background: #edf5fc;
    border-radius: 50%;

    color: #083C7C;
    font-size: 15px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.programme-pillar-card:hover .pillar-action i {
    background: #083C7C;
    color: #ffffff;
    transform: translate(2px, -2px);
}


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

@media (max-width:1199px) {

    .programme-pillars-section {
        padding: 65px 0 70px;
    }

    .programme-pillars-container {
        width: 94%;
    }

    .programme-pillars-grid {
        gap: 16px;
    }

    .programme-pillar-card {
        min-height: 270px;
        padding: 22px 20px;
    }

    .pillar-content h3 {
        font-size: 20px;
    }

}


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

@media (max-width:991px) {

    .programme-pillars-section {
        padding: 58px 0 62px;
    }

    .programme-pillars-header {
        margin-bottom: 34px;
    }

    .programme-pillars-header h2 {
        font-size: 34px;
    }

    .programme-pillars-header p {
        font-size: 15px;
    }

    .programme-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .programme-pillar-card {
        min-height: 250px;
    }

}


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

@media (max-width:767px) {

    .programme-pillars-section {
        padding: 48px 0 52px;
    }

    .programme-pillars-container {
        width: 90%;
    }

    .programme-pillars-header {
        margin-bottom: 28px;
    }

    .programme-pillars-label {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .programme-pillars-header h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    .programme-pillars-header p {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.55;
    }

    .programme-pillars-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .programme-pillar-card {
        min-height: 215px;
        padding: 20px;
        border-radius: 14px;
    }

    .pillar-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
        border-radius: 10px;
    }

    .pillar-content {
        margin-top: 18px;
    }

    .pillar-content h3 {
        font-size: 19px;
    }

    .pillar-content p {
        font-size: 13px;
    }

    .pillar-action {
        margin-top: 18px;
        padding-top: 14px;
        font-size: 10px;
    }

    .pillar-action i {
        width: 31px;
        height: 31px;
        font-size: 13px;
    }

}


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

@media (max-width:480px) {

    .programme-pillars-section {
        padding: 42px 0 46px;
    }

    .programme-pillars-container {
        width: 92%;
    }

    .programme-pillars-header h2 {
        font-size: 29px;
    }

    .programme-pillar-card {
        min-height: 205px;
        padding: 18px;
    }

    .pillar-content h3 {
        font-size: 18px;
    }

    .pillar-content p {
        font-size: 12px;
    }

    .pillar-action {
        font-size: 9px;
    }

}


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

@media (max-width:360px) {

    .programme-pillars-header h2 {
        font-size: 27px;
    }

    .programme-pillars-header p {
        font-size: 13px;
    }

    .programme-pillar-card {
        min-height: 195px;
        padding: 16px;
    }

    .pillar-content h3 {
        font-size: 17px;
    }

}

/* =========================================================
   PROGRAMME PILLARS - HOVER EFFECT ALL DEVICES
========================================================= */

.programme-pillar-card {
    position: relative !important;
    overflow: hidden !important;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease !important;
}


/* TOP BLUE LINE */
.programme-pillar-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

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

    background: #083C7C !important;

    transform: scaleX(0) !important;
    transform-origin: left !important;

    transition: transform 0.4s ease !important;

    z-index: 2 !important;
}


/* DESKTOP + LAPTOP + TABLET HOVER */
@media (hover: hover) {

    .programme-pillar-card:hover {
        transform: translateY(-8px) !important;

        background: #ffffff !important;

        border-color: #b7cce1 !important;

        box-shadow:
            0 18px 40px rgba(8, 60, 124, 0.14) !important;
    }

    .programme-pillar-card:hover::before {
        transform: scaleX(1) !important;
    }


    /* ICON */
    .programme-pillar-card:hover .pillar-icon {
        background: #083C7C !important;
        color: #ffffff !important;

        border-color: #083C7C !important;

        transform: translateY(-3px) !important;
    }


    /* TITLE */
    .programme-pillar-card:hover .pillar-content h3 {
        color: #062d5c !important;
    }


    /* ACTION ARROW */
    .programme-pillar-card:hover .pillar-action i {
        background: #083C7C !important;
        color: #ffffff !important;

        transform: translate(3px, -3px) !important;
    }


    /* ACTION TEXT */
    .programme-pillar-card:hover .pillar-action {
        color: #083C7C !important;
    }

}


/* =========================================================
   TOUCH DEVICES
   TAP / PRESS EFFECT
========================================================= */

@media (hover: none) {

    .programme-pillar-card:active {
        transform: scale(0.98) !important;

        border-color: #083C7C !important;

        box-shadow:
            0 10px 25px rgba(8, 60, 124, 0.16) !important;
    }

    .programme-pillar-card:active::before {
        transform: scaleX(1) !important;
    }

    .programme-pillar-card:active .pillar-icon {
        background: #083C7C !important;
        color: #ffffff !important;

        border-color: #083C7C !important;
    }

    .programme-pillar-card:active .pillar-action i {
        background: #083C7C !important;
        color: #ffffff !important;

        transform: translate(2px, -2px) !important;
    }

}


/* =========================================================
   SMALL DEVICES
========================================================= */

@media (max-width:767px) {

    .programme-pillar-card {
        transition:
            transform 0.25s ease,
            box-shadow 0.25s ease,
            border-color 0.25s ease !important;
    }

    .programme-pillar-card:active {
        transform: scale(0.985) !important;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.programme-pillar-card:focus-visible {
    outline: 3px solid rgba(8, 60, 124, 0.25) !important;
    outline-offset: 3px !important;
}


/* =========================================================
   HERO BUTTON COLORS
========================================================= */

.hero-buttons .hero-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: 320px !important;
    min-height: 52px !important;

    padding: 0 20px !important;

    border-radius: 7px !important;

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

    text-decoration: none !important;

    box-sizing: border-box !important;

    transition: all 0.3s ease !important;
}


/* EXPLORE PROGRAMMES */

.hero-buttons .hero-btn-primary {
    background: #3474FF !important;
    color: #ffffff !important;

    border: 2px solid #3474FF !important;
}

.hero-buttons .hero-btn-primary i {
    color: #ffffff !important;
}


/* APPLY NOW */

.hero-buttons .hero-btn-secondary {
    background: #ffffff !important;
    color: #3474FF !important;

    border: 2px solid #ffffff !important;
}

.hero-buttons .hero-btn-secondary i {
    color: #3474FF !important;
}


/* HOVER */

.hero-buttons .hero-btn-primary:hover {
    background: #ffffff !important;
    color: #3474FF !important;
}

.hero-buttons .hero-btn-primary:hover i {
    color: #3474FF !important;
}

.hero-buttons .hero-btn-secondary:hover {
    background: #3474FF !important;
    color: #ffffff !important;
}

.hero-buttons .hero-btn-secondary:hover i {
    color: #ffffff !important;
}


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

@media (max-width: 1199px) {

    .hero-buttons .hero-btn {
        max-width: 290px !important;
        min-height: 50px !important;
        font-size: 13px !important;
    }

}


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

@media (max-width: 767px) {

    .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .hero-buttons .hero-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        font-size: 13px !important;
    }

}

/* =========================================================
   TABLET - CENTER HERO BUTTONS
========================================================= */

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

    .hero-buttons {
        width: 100% !important;

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

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

        gap: 10px !important;
        margin-top: 22px !important;
    }

    .hero-buttons .hero-btn {
        width: 280px !important;
        max-width: 280px !important;
        min-width: 280px !important;

        height: 48px !important;

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

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

.who-we-are .hero-buttons {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.who-we-are .hero-btn {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================================================
   ODLC LEARNING ECOSYSTEM
   4 ORBIT POINTS + 4 FEATURE CARDS
========================================================= */


/* =========================================================
   ORBIT BASE
========================================================= */

.orbit {
    position: absolute;
    z-index: 5;

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


/* =========================================================
   COMMON ORBIT ICON
========================================================= */

.orbit-icon {
    width: 78px;
    height: 78px;

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

    background: #ffffff;

    border-radius: 50%;

    box-sizing: border-box;

    box-shadow:
        0 8px 25px rgba(8, 60, 124, 0.15);

    transition: all 0.3s ease;
}

.orbit-icon i {
    font-size: 30px;
}


/* =========================================================
   1. DIGITAL ACCESS
========================================================= */

.orbit-one {
    top: 18%;
    left: 18%;
}

.orbit-one .orbit-icon {
    border: 5px solid #6C63FF;
}

.orbit-one .orbit-icon i {
    color: #6C63FF;
}

.orbit-one .orbit-icon:hover {
    background: #6C63FF;
    transform: scale(1.08);
}

.orbit-one .orbit-icon:hover i {
    color: #ffffff;
}


/* =========================================================
   2. ASSESSMENTS & EXAMINATIONS
========================================================= */

.orbit-two {
    top: 18%;
    right: 18%;
}

.orbit-two .orbit-icon {
    border: 5px solid #3474FF;
}

.orbit-two .orbit-icon i {
    color: #3474FF;
}

.orbit-two .orbit-icon:hover {
    background: #3474FF;
    transform: scale(1.08);
}

.orbit-two .orbit-icon:hover i {
    color: #ffffff;
}


/* =========================================================
   3. CREDENTIALS & VERIFICATION
========================================================= */

.orbit-three {
    bottom: 17%;
    left: 18%;
}

.orbit-three .orbit-icon {
    border: 5px solid #16A6C7;
}

.orbit-three .orbit-icon i {
    color: #16A6C7;
}

.orbit-three .orbit-icon:hover {
    background: #16A6C7;
    transform: scale(1.08);
}

.orbit-three .orbit-icon:hover i {
    color: #ffffff;
}


/* =========================================================
   4. CAREER SUPPORT
========================================================= */

.orbit-four {
    right: 18%;
    bottom: 17%;
}

.orbit-four .orbit-icon {
    border: 5px solid #6C63FF;
}

.orbit-four .orbit-icon i {
    color: #6C63FF;
}

.orbit-four .orbit-icon:hover {
    background: #6C63FF;
    transform: scale(1.08);
}

.orbit-four .orbit-icon:hover i {
    color: #ffffff;
}


/* =========================================================
   COMMON FEATURE CARD
========================================================= */

.feature-card {
    position: absolute;

    width: 270px;

    padding: 22px 24px;

    background: #ffffff;

    border: 1px solid #E0E8F2;

    border-radius: 14px;

    box-sizing: border-box;

    box-shadow:
        0 8px 25px rgba(8, 60, 124, 0.07);

    z-index: 4;
}


/* CARD HEADING */

.feature-card h4 {
    margin: 0;

    color: #083C7C;

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

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

    line-height: 1.3;
}


/* CARD LINE */

.feature-card span {
    display: block;

    width: 42px;
    height: 3px;

    margin: 11px 0 12px;

    background: #3474FF;

    border-radius: 5px;
}


/* CARD TEXT */

.feature-card p {
    margin: 0;

    color: #173B68;

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

    font-size: 14px;

    font-weight: 400;

    line-height: 1.6;

    text-align: left;
}


/* =========================================================
   DIGITAL ACCESS CARD
========================================================= */

.card-left {
    top: 15%;
    left: 0;
}


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

.card-right {
    top: 15%;
    right: 0;
}


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

.card-bottom-left {
    bottom: 8%;
    left: 0;
}


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

.card-bottom-right {
    right: 0;
    bottom: 8%;
}


/* =========================================================
   CARD ACCENT COLORS
========================================================= */

.card-left h4 {
    color: #6C63FF;
}

.card-left span {
    background: #6C63FF;
}


.card-right h4 {
    color: #3474FF;
}

.card-right span {
    background: #3474FF;
}


.card-bottom-left h4 {
    color: #16A6C7;
}

.card-bottom-left span {
    background: #16A6C7;
}


.card-bottom-right h4 {
    color: #6C63FF;
}

.card-bottom-right span {
    background: #6C63FF;
}


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

.feature-card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 14px 35px rgba(8, 60, 124, 0.12);
}


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

@media (max-width: 991px) {

    .orbit-icon {
        width: 65px;
        height: 65px;
    }

    .orbit-icon i {
        font-size: 25px;
    }


    .orbit-one {
        left: 16%;
        top: 20%;
    }

    .orbit-two {
        right: 16%;
        top: 20%;
    }

    .orbit-three {
        left: 16%;
        bottom: 18%;
    }

    .orbit-four {
        right: 16%;
        bottom: 18%;
    }


    .feature-card {
        width: 225px;
        padding: 18px 20px;
    }

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

    .feature-card p {
        font-size: 13px;
        line-height: 1.55;
    }


    .card-left {
        left: 0;
        top: 16%;
    }

    .card-right {
        right: 0;
        top: 16%;
    }

    .card-bottom-left {
        left: 0;
        bottom: 8%;
    }

    .card-bottom-right {
        right: 0;
        bottom: 8%;
    }

}


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

@media (max-width: 767px) {

    /*
       Remove absolute positioning on cards
       so content doesn't overlap.
    */

    .feature-card {
        position: relative;

        width: 100%;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;

        margin-bottom: 16px;

        padding: 18px 20px;
    }


    .card-left,
    .card-right,
    .card-bottom-left,
    .card-bottom-right {
        position: relative;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }


    /*
       Orbit icons become normal inline elements
       on mobile.
    */

    .orbit {
        position: relative;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;

        margin: 18px auto 10px;
    }


    .orbit-one,
    .orbit-two,
    .orbit-three,
    .orbit-four {
        position: relative;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }


    .orbit-icon {
        width: 60px;
        height: 60px;
    }

    .orbit-icon i {
        font-size: 23px;
    }


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

    .feature-card p {
        font-size: 13px;
        line-height: 1.6;
    }

}


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

@media (max-width: 480px) {

    .feature-card {
        padding: 17px 18px;
    }

    .feature-card h4 {
        font-size: 15px;
    }

    .feature-card p {
        font-size: 12px;
        line-height: 1.6;
    }

    .orbit-icon {
        width: 56px;
        height: 56px;
    }

    .orbit-icon i {
        font-size: 21px;
    }

}

/* =========================================================
   ODLC LEARNING ECOSYSTEM
   POSITION FIX ONLY
   SIZES KEPT SAME
========================================================= */


/* =========================================================
   IMPORTANT PARENT
========================================================= */

.learning-ecosystem-section {
    position: relative !important;
}


/* If your main circle wrapper has another class,
   apply position:relative to that wrapper instead. */

.orbit-container {
    position: relative !important;
}


/* =========================================================
   ORBIT BASE
========================================================= */

.orbit {
    position: absolute !important;
    z-index: 20 !important;

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


/* =========================================================
   ICON SIZE - KEEPING YOUR ORIGINAL SIZE
========================================================= */

.orbit-icon {
    width: 78px !important;
    height: 78px !important;

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

    background: #ffffff !important;

    border-radius: 50% !important;

    box-sizing: border-box !important;

    box-shadow:
        0 8px 25px rgba(8, 60, 124, 0.15) !important;

    transition: all 0.3s ease !important;
}

.orbit-icon i {
    font-size: 30px !important;
}


/* =========================================================
   ICON 1
   DIGITAL ACCESS
   TOP-LEFT OF CIRCLE
========================================================= */

.orbit-one {
    top: 19% !important;
    left: 36% !important;

    z-index: 25 !important;
}

.orbit-one .orbit-icon {
    border: 5px solid #6C63FF !important;
}

.orbit-one .orbit-icon i {
    color: #6C63FF !important;
}


/* =========================================================
   ICON 2
   ASSESSMENTS & EXAMINATIONS
   TOP-RIGHT OF CIRCLE
========================================================= */

.orbit-two {
    top: 19% !important;
    right: 31% !important;

    z-index: 25 !important;
}

.orbit-two .orbit-icon {
    border: 5px solid #3474FF !important;
}

.orbit-two .orbit-icon i {
    color: #3474FF !important;
}


/* =========================================================
   ICON 3
   CREDENTIALS & VERIFICATION
   BOTTOM-LEFT OF CIRCLE
========================================================= */

.orbit-three {
    bottom: 4% !important;
    left: 40% !important;

    z-index: 25 !important;
}

.orbit-three .orbit-icon {
    border: 5px solid #16A6C7 !important;
}

.orbit-three .orbit-icon i {
    color: #16A6C7 !important;
}


/* =========================================================
   ICON 4
   CAREER SUPPORT
   RIGHT / LOWER-RIGHT OF CIRCLE
========================================================= */

.orbit-four {
    bottom: 12% !important;
    right: 28% !important;

    z-index: 25 !important;
}

.orbit-four .orbit-icon {
    border: 5px solid #6C63FF !important;
}

.orbit-four .orbit-icon i {
    color: #6C63FF !important;
}


/* =========================================================
   FEATURE CARDS
   KEEP YOUR EXISTING SIZE
========================================================= */

.feature-card {
    position: absolute !important;

    width: 270px !important;

    padding: 22px 24px !important;

    background: #ffffff !important;

    border: 1px solid #E0E8F2 !important;

    border-radius: 14px !important;

    box-sizing: border-box !important;

    box-shadow:
        0 8px 25px rgba(8, 60, 124, 0.07) !important;

    z-index: 10 !important;
}


/* =========================================================
   TOP LEFT CARD
   DIGITAL ACCESS
========================================================= */

.card-left {
    top: 13% !important;
    left: 4% !important;

    z-index: 10 !important;
}


/* =========================================================
   TOP RIGHT CARD
   ASSESSMENTS & EXAMINATIONS
========================================================= */

.card-right {
    top: 13% !important;
    right: 4% !important;

    z-index: 10 !important;
}


/* =========================================================
   BOTTOM LEFT CARD
   CREDENTIALS & VERIFICATION
========================================================= */

.card-bottom-left {
    bottom: 10% !important;
    left: 4% !important;

    z-index: 10 !important;
}


/* =========================================================
   BOTTOM RIGHT CARD
   CAREER SUPPORT
========================================================= */

.card-bottom-right {
    bottom: 10% !important;
    right: 4% !important;

    z-index: 10 !important;
}


/* =========================================================
   CARD HEADING
   SIZES KEPT SAME
========================================================= */

.feature-card h4 {
    margin: 0 !important;

    color: #083C7C !important;

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

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

    line-height: 1.3 !important;
}


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

.feature-card span {
    display: block !important;

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

    margin: 11px 0 12px !important;

    border-radius: 5px !important;
}


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

.feature-card p {
    margin: 0 !important;

    color: #173B68 !important;

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

    font-size: 14px !important;

    font-weight: 400 !important;

    line-height: 1.6 !important;

    text-align: left !important;

    word-spacing: normal !important;
}


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

.card-left h4 {
    color: #6C63FF !important;
}

.card-left span {
    background: #6C63FF !important;
}


.card-right h4 {
    color: #3474FF !important;
}

.card-right span {
    background: #3474FF !important;
}


.card-bottom-left h4 {
    color: #16A6C7 !important;
}

.card-bottom-left span {
    background: #16A6C7 !important;
}


.card-bottom-right h4 {
    color: #6C63FF !important;
}

.card-bottom-right span {
    background: #6C63FF !important;
}


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

.orbit-icon:hover {
    transform: scale(1.08) !important;
}

.orbit-one .orbit-icon:hover {
    background: #6C63FF !important;
}

.orbit-two .orbit-icon:hover {
    background: #3474FF !important;
}

.orbit-three .orbit-icon:hover {
    background: #16A6C7 !important;
}

.orbit-four .orbit-icon:hover {
    background: #6C63FF !important;
}

.orbit-icon:hover i {
    color: #ffffff !important;
}


/* =========================================================
   TABLET
   KEEP SAME ICON/CARD SIZES FROM YOUR CSS
========================================================= */

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

    .orbit-one {
        top: 20% !important;
        left: 34% !important;
    }

    .orbit-two {
        top: 20% !important;
        right: 28% !important;
    }

    .orbit-three {
        bottom: 12% !important;
        left: 18% !important;
    }

    .orbit-four {
        bottom: 24% !important;
        right: 20% !important;
    }


    .card-left {
        top: 14% !important;
        left: 2% !important;
    }

    .card-right {
        top: 14% !important;
        right: 2% !important;
    }

    .card-bottom-left {
        bottom: 10% !important;
        left: 1% !important;
    }

    .card-bottom-right {
        bottom: 10% !important;
        right: 1% !important;
    }

}


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

@media (max-width: 767px) {

    .feature-card {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;

        margin: 0 0 16px !important;
    }


    .card-left,
    .card-right,
    .card-bottom-left,
    .card-bottom-right {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }


    .orbit {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        margin: 18px auto 10px !important;
    }


    .orbit-one,
    .orbit-two,
    .orbit-three,
    .orbit-four {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }

}

/* =========================================================
   ODLC BOTTOM FOUR QUALITIES
========================================================= */

.odlc-qualities-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    border-radius: 14px;

    padding: 28px 0;

    background: #ffffff;

    box-sizing: border-box;
}


/* INNER CONTENT */

.odlc-qualities-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

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

    align-items: center;

    box-sizing: border-box;
}


/* =========================================================
   QUALITY ITEM
========================================================= */

.odlc-quality-item {
    min-height: 76px;

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

    gap: 20px;

    padding: 0 30px;

    box-sizing: border-box;
}


/* DIVIDER */

.odlc-quality-item + .odlc-quality-item {
    border-left: 1px solid #dfe5ed;
}


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

.odlc-quality-icon {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

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

    background: #edf3ff;

    border-radius: 14px;
}

.odlc-quality-icon i {
    font-size: 27px;
    color: #2868e8;
}


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

.odlc-quality-content {
    display: flex;
    align-items: center;
}

.odlc-quality-content h4 {
    margin: 0;

    color: #0b1f4d;

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

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

    line-height: 1.3;

    white-space: nowrap;
}


/* =========================================================
   ICON COLORS
========================================================= */

.odlc-quality-item:nth-child(1) .odlc-quality-icon i {
    color: #6C63FF;
}

.odlc-quality-item:nth-child(2) .odlc-quality-icon i {
    color: #3474FF;
}

.odlc-quality-item:nth-child(3) .odlc-quality-icon i {
    color: #16A6C7;
}

.odlc-quality-item:nth-child(4) .odlc-quality-icon i {
    color: #2868E8;
}


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

@media (max-width: 1199px) {

    .odlc-quality-item {
        gap: 14px;
        padding: 0 18px;
    }

    .odlc-quality-icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .odlc-quality-icon i {
        font-size: 24px;
    }

    .odlc-quality-content h4 {
        font-size: 18px;
    }
}


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

@media (max-width: 991px) {

    .odlc-qualities-section {
        padding: 22px 0;
    }

    .odlc-qualities-container {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 18px;
    }

    .odlc-quality-item {
        min-height: 68px;
        justify-content: flex-start;
        padding: 10px 20px;
    }

    .odlc-quality-item:nth-child(3) {
        border-left: none;
    }

    .odlc-quality-item:nth-child(3),
    .odlc-quality-item:nth-child(4) {
        border-top: 1px solid #dfe5ed;
        padding-top: 20px;
    }
}


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

@media (max-width: 767px) {

    .odlc-qualities-section {
        padding: 18px 0;
    }

    .odlc-qualities-container {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 15px;
    }

    .odlc-quality-item,
    .odlc-quality-item:nth-child(3),
    .odlc-quality-item:nth-child(4) {
        min-height: 64px;

        padding: 12px 10px;

        border-left: none;

        border-top: 1px solid #e2e7ee;

        justify-content: flex-start;
    }

    .odlc-quality-item:first-child {
        border-top: none;
    }

    .odlc-quality-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;

        border-radius: 12px;
    }

    .odlc-quality-icon i {
        font-size: 22px;
    }

    .odlc-quality-content h4 {
        font-size: 16px;
    }
}


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

@media (max-width: 480px) {

    .odlc-qualities-container {
        padding: 0 10px;
    }

    .odlc-quality-item {
        gap: 13px;
    }

    .odlc-quality-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .odlc-quality-icon i {
        font-size: 20px;
    }

    .odlc-quality-content h4 {
        font-size: 15px;
    }
}

.orbit-three {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: 8% !important;
    left: 35% !important;
    z-index: 25 !important;
}

.orbit-three .orbit-icon {
    border: 5px solid #16A6C7 !important;
}

.orbit-three .orbit-icon i {
    color: #16A6C7 !important;
}

/* =========================================
   PROGRAMME CARD - EQUAL BUTTON POSITION
========================================= */

.odlc-do-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Card content area */
.odlc-card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
}

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

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

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 46px !important;
    min-height: 46px !important;

    margin-top: auto !important;
    margin-bottom: 0 !important;

    padding: 0 14px !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: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

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

    box-sizing: border-box !important;

    gap: 8px !important;

    transition: all 0.3s ease !important;
}

/* Arrow */
.odlc-card-btn i {
    font-size: 14px !important;
    margin-left: 2px !important;
    transition: transform 0.3s ease !important;
}

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

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


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

@media (max-width: 991px) {

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

    .odlc-card-btn i {
        font-size: 13px !important;
    }
}


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

@media (max-width: 767px) {

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

    .odlc-card-body {
        flex: 1 1 auto !important;
    }

    .odlc-card-btn {
        width: 100% !important;
        height: 43px !important;
        min-height: 43px !important;

        padding: 0 12px !important;

        font-size: 9px !important;
        gap: 7px !important;
    }

    .odlc-card-btn i {
        font-size: 13px !important;
    }
}


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

@media (max-width: 480px) {

    .odlc-card-btn {
        height: 42px !important;
        min-height: 42px !important;

        padding: 0 10px !important;

        font-size: 9px !important;
    }

    .odlc-card-btn i {
        font-size: 12px !important;
    }
}

/* =========================================================
   PROGRAM CARDS - FINAL RESPONSIVE FIX
   ADD AT THE VERY END OF CSS
========================================================= */

/* CARD */
.program-card {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;

    width: 100% !important;
    height: 295px !important;
    min-height: 295px !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}


/* LEFT CONTENT */
.program-card-content {
    position: relative !important;

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

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

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

    box-sizing: border-box !important;

    z-index: 3 !important;
}


/* IMAGE */
.program-card-image {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;

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

    overflow: hidden !important;
    z-index: 1 !important;
}

.program-card-image img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center center !important;
}


/* ICON */
.program-icon {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    margin-bottom: 10px !important;

    border-radius: 10px !important;

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

    font-size: 18px !important;
}


/* TITLE */
.program-card h3,
.program-card h6 {
    margin: 0 !important;

    color: #132653 !important;

    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;

    overflow-wrap: break-word !important;
}


/* BLUE LINE */
.program-mini-line {
    width: 30px !important;
    height: 3px !important;

    margin: 9px 0 9px !important;

    flex-shrink: 0 !important;
}


/* DESCRIPTION */
.program-card p {
    margin: 0 !important;

    color: #667085 !important;

    font-size: 14px !important;
    line-height: 1.65 !important;

    text-align: left !important;

    overflow-wrap: break-word !important;
}


/* =========================================================
   BUTTON - ALWAYS AT BOTTOM
========================================================= */

.program-card .odlc-card-btn {
    display: flex !important;

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

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 46px !important;
    min-height: 46px !important;

    margin-top: auto !important;
    margin-bottom: 0 !important;

    padding: 0 12px !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: 10px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

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

    box-sizing: border-box !important;

    flex-shrink: 0 !important;

    gap: 7px !important;
}

.program-card .odlc-card-btn i {
    font-size: 13px !important;
    margin-left: 2px !important;
}


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

@media (max-width: 1199px) {

    .program-card {
        height: 275px !important;
        min-height: 275px !important;
    }

    .program-card-content {
        width: 55% !important;
        padding: 17px 13px 13px 17px !important;
    }

    .program-card-image {
        width: 45% !important;
    }

    .program-card h3,
    .program-card h6 {
        font-size: 17px !important;
    }

    .program-card p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .program-card .odlc-card-btn {
        height: 44px !important;
        min-height: 44px !important;
        font-size: 9px !important;
    }
}


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

@media (max-width: 991px) {

    .program-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .program-card {
        height: 260px !important;
        min-height: 260px !important;
    }

    .program-card-content {
        width: 55% !important;
        padding: 16px 12px 12px 16px !important;
    }

    .program-card-image {
        width: 45% !important;
    }

    .program-icon {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        min-height: 35px !important;
        font-size: 16px !important;
    }

    .program-card h3,
    .program-card h6 {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    .program-card p {
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    .program-card .odlc-card-btn {
        height: 42px !important;
        min-height: 42px !important;
        font-size: 9px !important;
        padding: 0 9px !important;
    }
}


/* =========================================================
   MOBILE
   BELOW 767px
========================================================= */

@media (max-width: 767px) {

    .program-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .program-card {
        width: 100% !important;

        height: 275px !important;
        min-height: 275px !important;

        border-radius: 16px !important;
    }

    .program-card-content {
        width: 57% !important;
        height: 100% !important;

        padding: 18px 12px 12px 18px !important;
    }

    .program-card-image {
        width: 43% !important;
        height: 100% !important;
    }

    .program-card h3,
    .program-card h6 {
        font-size: 17px !important;
        line-height: 1.4 !important;
    }

    .program-card p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    .program-mini-line {
        width: 28px !important;
        height: 3px !important;
        margin: 8px 0 !important;
    }

    .program-card .odlc-card-btn {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;

        margin-top: auto !important;

        padding: 0 9px !important;

        font-size: 9px !important;
        gap: 6px !important;
    }

    .program-card .odlc-card-btn i {
        font-size: 12px !important;
    }
}


/* =========================================================
   SMALL MOBILE
   BELOW 480px
========================================================= */

@media (max-width: 480px) {

    .program-grid {
        gap: 16px !important;
    }

    .program-card {
        height: 265px !important;
        min-height: 265px !important;
    }

    .program-card-content {
        width: 58% !important;
        padding: 16px 10px 11px 16px !important;
    }

    .program-card-image {
        width: 42% !important;
    }

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

        min-width: 34px !important;
        min-height: 34px !important;

        font-size: 16px !important;
        border-radius: 9px !important;
        margin-bottom: 8px !important;
    }

    .program-card h3,
    .program-card h6 {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    .program-card p {
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    .program-mini-line {
        width: 26px !important;
        margin: 7px 0 !important;
    }

    .program-card .odlc-card-btn {
        height: 42px !important;
        min-height: 42px !important;

        padding: 0 7px !important;

        font-size: 8px !important;
        gap: 5px !important;
    }

    .program-card .odlc-card-btn i {
        font-size: 11px !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   BELOW 360px
========================================================= */

@media (max-width: 360px) {

    .program-card {
        height: 255px !important;
        min-height: 255px !important;
    }

    .program-card-content {
        width: 60% !important;
        padding: 14px 8px 10px 14px !important;
    }

    .program-card-image {
        width: 40% !important;
    }

    .program-card h3,
    .program-card h6 {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    .program-card p {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }

    .program-card .odlc-card-btn {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 8px !important;
        padding: 0 6px !important;
    }
}






/* =========================================================
   ODLC MOBILE APP SECTION
========================================================= */

.odlc-mobile-app {
    position: relative;
    width: 100%;
    padding: 95px 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(8, 60, 124, 0.09),
            transparent 32%
        ),
        #f7faff;

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


/* CONTAINER */

.odlc-mobile-app-container {
    width: min(1400px, 92%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 56% 44%;

    align-items: center;

    gap: 20px;
}


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

.odlc-mobile-app-content {
    padding-right: 35px;
}


.odlc-mobile-app-badge {
    display: inline-flex;
    align-items: center;

    padding: 8px 15px;

    margin-bottom: 20px;

    border-radius: 30px;

    background: #eaf2fc;
    border: 1px solid #d3e2f5;

    color: #083C7C;

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

    letter-spacing: .7px;
}


/* MAIN HEADING */

.odlc-mobile-app-content h2 {
    max-width: 680px;

    margin: 0 0 15px;

    color: #0b1f4d;

    font-size: 52px;
    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;
}


.odlc-mobile-app-content h2 span {
    display: block;
    color: #083C7C;

    
}


/* SECOND HEADING */

.odlc-mobile-app-content h3 {
    margin: 0 0 16px;

    color: #17203d;

    font-size: 27px;
    line-height: 1.3;

    font-weight: 700;
}


/* DESCRIPTION */

.odlc-mobile-app-description {
    max-width: 650px;

    margin: 0 0 30px;

    color: #667085;

    font-size: 17px;
    line-height: 1.7;

    text-align: justify;
}


/* =========================================================
   FEATURE GRID
========================================================= */

.odlc-mobile-features {
    display: grid;

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

    gap: 13px 15px;

    max-width: 720px;
}


/* FEATURE */

.odlc-mobile-feature {
    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 68px;

    padding: 10px 13px;

    background: #ffffff;

    border: 1px solid #e2eaf4;

    border-radius: 12px;

    box-shadow:
        0 6px 20px rgba(30,70,130,.05);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.odlc-mobile-feature:hover {
    transform: translateY(-4px);

    border-color: #c5d9f0;

    box-shadow:
        0 12px 28px rgba(8,60,124,.10);
}


/* FEATURE ICON */

.odlc-mobile-feature-icon {
    width: 39px;
    height: 39px;

    min-width: 39px;

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

    border-radius: 10px;

    color: #ffffff;

    font-size: 17px;
}


.odlc-mobile-feature-icon.study {
    background: #4f46e5;
}

.odlc-mobile-feature-icon.assess {
    background: #2377e8;
}

.odlc-mobile-feature-icon.exam {
    background: #16a6c7;
}

.odlc-mobile-feature-icon.track {
    background: #24b96f;
}

.odlc-mobile-feature-icon.verify {
    background: #f47b20;
}

.odlc-mobile-feature-icon.careers {
    background: #ee4ca3;
}


/* FEATURE TEXT */

.odlc-mobile-feature h4 {
    margin: 0 0 3px;

    color: #132653;

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

    letter-spacing: .4px;
}


.odlc-mobile-feature p {
    margin: 0;

    color: #667085;

    font-size: 12px;
    line-height: 1.4;
}


/* =========================================================
   BUTTONS
========================================================= */

.odlc-mobile-app-buttons {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 30px;
}


.odlc-mobile-btn {
    display: inline-flex;

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

    gap: 10px;

    min-height: 48px;

    padding: 0 22px;

    border-radius: 7px;

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

    text-decoration: none;

    transition: all .3s ease;
}


.odlc-mobile-btn.primary {
    background: #083C7C;
    color: #ffffff;

    border: 2px solid #083C7C;
}


.odlc-mobile-btn.primary:hover {
    background: #ffffff;
    color: #083C7C;
}


.odlc-mobile-btn.secondary {
    background: #ffffff;
    color: #083C7C;

    border: 2px solid #083C7C;
}


.odlc-mobile-btn.secondary:hover {
    background: #083C7C;
    color: #ffffff;
}


.odlc-mobile-btn i {
    transition: transform .3s ease;
}


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


/* =========================================================
   PHONE AREA
========================================================= */

.odlc-mobile-app-visual {
    position: relative;

    min-height: 650px;

    display: flex;

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


/* GLOW */

.odlc-mobile-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(2px);

    pointer-events: none;
}


.glow-one {
    width: 430px;
    height: 430px;

    background: rgba(8,60,124,.08);

    top: 50%;
    left: 50%;

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


.glow-two {
    width: 260px;
    height: 260px;

    background: rgba(65,105,255,.07);

    top: 12%;
    right: 5%;
}


/* =========================================================
   PHONE
========================================================= */

.odlc-phone {
    position: relative;

    z-index: 5;

    width: 315px;
    height: 610px;

    padding: 9px;

    border-radius: 42px;

    background: #101828;

    box-shadow:
        0 30px 70px rgba(8,60,124,.25),
        0 10px 30px rgba(0,0,0,.15);
}


.odlc-phone-frame {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 34px;

    background: #ffffff;
}


/* NOTCH */

.odlc-phone-notch {
    position: absolute;

    top: 9px;
    left: 50%;

    transform: translateX(-50%);

    width: 92px;
    height: 25px;

    z-index: 10;

    border-radius: 20px;

    background: #101828;
}


.odlc-phone-notch span {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #273244;

    top: 9px;
    right: 17px;
}


/* APP SCREEN */

.odlc-phone-screen {
    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #ffffff;
}


.odlc-phone-screen img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    border: 0;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.odlc-floating-card {
    position: absolute;

    z-index: 8;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 15px;

    background: #ffffff;

    border: 1px solid #e0e8f2;

    border-radius: 12px;

    box-shadow:
        0 12px 30px rgba(8,60,124,.12);
}


.floating-study {
    top: 22%;
    left: 0;
}


.floating-exam {
    right: 0;
    bottom: 20%;
}


.floating-icon {
    width: 35px;
    height: 35px;

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

    border-radius: 9px;

    background: #083C7C;

    color: #ffffff;

    font-size: 15px;
}


.odlc-floating-card strong {
    display: block;

    color: #083C7C;

    font-size: 12px;
}


.odlc-floating-card span {
    display: block;

    margin-top: 2px;

    color: #667085;

    font-size: 10px;
}


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

@media (max-width: 1199px) {

    .odlc-mobile-app {
        padding: 75px 0;
    }

    .odlc-mobile-app-container {
        width: 92%;
        grid-template-columns: 57% 43%;
    }

    .odlc-mobile-app-content h2 {
        font-size: 46px;
    }

    .odlc-mobile-app-content h3 {
        font-size: 24px;
    }

    .odlc-mobile-app-description {
        font-size: 16px;
    }

    .odlc-phone {
        width: 285px;
        height: 550px;
    }

    .odlc-mobile-app-visual {
        min-height: 590px;
    }

    .odlc-floating-card {
        padding: 8px 11px;
    }

    .floating-study {
        left: -10px;
    }

    .floating-exam {
        right: -10px;
    }
}


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

@media (max-width: 991px) {

    .odlc-mobile-app {
        padding: 65px 0;
    }

    .odlc-mobile-app-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .odlc-mobile-app-content {
        padding-right: 0;
    }

    .odlc-mobile-app-content h2 {
        font-size: 40px;
    }

    .odlc-mobile-app-content h3 {
        font-size: 22px;
    }

    .odlc-mobile-features {
        max-width: 100%;
    }

    .odlc-mobile-app-visual {
        min-height: 590px;
    }

    .odlc-phone {
        width: 280px;
        height: 550px;
    }

    .floating-study {
        left: 15%;
    }

    .floating-exam {
        right: 15%;
    }
}


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

@media (max-width: 767px) {

    .odlc-mobile-app {
        padding: 55px 0;
    }

    .odlc-mobile-app-container {
        width: 90%;
        gap: 40px;
    }

    .odlc-mobile-app-badge {
        font-size: 12px;
        padding: 7px 12px;
        margin-bottom: 16px;
    }

    .odlc-mobile-app-content h2 {
        font-size: 32px;
        line-height: 1.12;
    }

    .odlc-mobile-app-content h3 {
        font-size: 20px;
    }

    .odlc-mobile-app-description {
        font-size: 15px;
        line-height: 1.65;
        text-align: justify;
    }

    .odlc-mobile-features {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .odlc-mobile-feature {
        min-height: 62px;
    }

    .odlc-mobile-app-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .odlc-mobile-btn {
        width: 100%;
    }

    .odlc-mobile-app-visual {
        min-height: 520px;
    }

    .odlc-phone {
        width: 245px;
        height: 480px;

        border-radius: 34px;
    }

    .odlc-phone-frame {
        border-radius: 27px;
    }

    .odlc-phone-notch {
        width: 75px;
        height: 21px;
    }

    .odlc-floating-card {
        display: none;
    }

    .glow-one {
        width: 330px;
        height: 330px;
    }
}


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

@media (max-width: 480px) {

    .odlc-mobile-app {
        padding: 45px 0;
    }

    .odlc-mobile-app-container {
        width: 91%;
    }

    .odlc-mobile-app-content h2 {
        font-size: 29px;
    }

    .odlc-mobile-app-content h3 {
        font-size: 18px;
    }

    .odlc-mobile-app-description {
        font-size: 14px;
    }

    .odlc-mobile-feature {
        padding: 9px 11px;
    }

    .odlc-mobile-feature-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .odlc-mobile-feature h4 {
        font-size: 12px;
    }

    .odlc-mobile-feature p {
        font-size: 11px;
    }

    .odlc-mobile-app-visual {
        min-height: 450px;
    }

    .odlc-phone {
        width: 220px;
        height: 430px;

        border-radius: 30px;
    }

    .odlc-phone-frame {
        border-radius: 24px;
    }

    .odlc-phone-notch {
        width: 68px;
        height: 19px;
    }
}

/* =========================================================
   ODLC DIGITAL CREDENTIALS
========================================================= */

.odlc-digital-credentials {
    position: relative;

    width: 100%;

    padding: 95px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(8, 60, 124, 0.055),
            transparent 32%
        ),
        #ffffff;

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


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

.odlc-digital-container {
    width: min(1400px, 92%);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 56% 44%;

    align-items: center;

    gap: 25px;
}


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

.odlc-digital-content {
    padding-right: 30px;
}


/* BADGE */

.odlc-digital-badge {
    display: inline-flex;

    align-items: center;

    padding: 8px 15px;

    margin-bottom: 20px;

    background: #eaf2fc;

    border: 1px solid #d4e3f5;

    border-radius: 30px;

    color: #083C7C;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .6px;
}


/* HEADING */

.odlc-digital-content h2 {
    max-width: 650px;

    margin: 0 0 18px;

    color: #0b2553;

    font-size: 52px;

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;
}


.odlc-digital-content h2 span {
    display: block;

    color: #083C7C;
}


/* INTRO */

.odlc-digital-intro {
    max-width: 650px;

    margin: 0 0 30px;

    color: #667085;

    font-size: 17px;

    line-height: 1.7;

    text-align: justify;
}


/* =========================================================
   FEATURE GRID
========================================================= */

.odlc-credential-features {

    display: grid;

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

    gap: 13px;

    max-width: 720px;
}


/* FEATURE */

.odlc-credential-feature {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    min-height: 92px;

    padding: 14px;

    background: #ffffff;

    border: 1px solid #e2eaf4;

    border-radius: 13px;

    box-shadow:
        0 6px 22px rgba(30,70,130,.05);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.odlc-credential-feature:hover {

    transform: translateY(-4px);

    border-color: #c7d9ef;

    box-shadow:
        0 12px 28px rgba(8,60,124,.10);
}


/* ICON */

.odlc-credential-icon {

    width: 40px;

    height: 40px;

    min-width: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: #ffffff;

    font-size: 17px;
}


.qr-icon {
    background: #4f46e5;
}

.records-icon {
    background: #2377e8;
}

.verification-icon {
    background: #16a6c7;
}

.digilocker-icon {
    background: #24b96f;
}


/* FEATURE TEXT */

.odlc-credential-text h4 {

    margin: 1px 0 5px;

    color: #132653;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 700;
}


.odlc-credential-text p {

    margin: 0;

    color: #667085;

    font-size: 12px;

    line-height: 1.5;
}


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

.odlc-credential-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 48px;

    margin-top: 28px;

    padding: 0 23px;

    background: #083C7C;

    color: #ffffff;

    border: 2px solid #083C7C;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    transition: all .3s ease;
}


.odlc-credential-btn:hover {

    background: #ffffff;

    color: #083C7C;
}


.odlc-credential-btn i {

    transition: transform .3s ease;
}


.odlc-credential-btn:hover i {

    transform: translateX(4px);
}


/* =========================================================
   DIGILOCKER NOTE
========================================================= */

.odlc-digilocker-note {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    max-width: 650px;

    margin-top: 20px;

    padding: 12px 14px;

    background: #f4f8fd;

    border-left: 3px solid #083C7C;

    border-radius: 7px;
}


.odlc-digilocker-note > i {

    margin-top: 2px;

    color: #083C7C;

    font-size: 15px;
}


.odlc-digilocker-note p {

    margin: 0;

    color: #52677d;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.odlc-digital-visual {

    position: relative;

    min-height: 580px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* GLOW */

.credential-glow {

    position: absolute;

    width: 430px;

    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(8,60,124,.12),
            rgba(8,60,124,.025) 55%,
            transparent 72%
        );
}


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

.odlc-credential-card {

    position: relative;

    z-index: 5;

    width: 430px;

    min-height: 470px;

    padding: 25px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f9ff
        );

    border: 1px solid #d9e5f2;

    border-radius: 25px;

    box-shadow:
        0 30px 65px rgba(8,60,124,.14),
        0 8px 25px rgba(0,0,0,.05);

    box-sizing: border-box;
}


/* CARD TOP */

.credential-card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-bottom: 18px;

    border-bottom: 1px solid #e1e9f3;
}


/* LOGO */

.credential-logo img {

    width: 145px;

    height: auto;

    display: block;
}


/* STATUS */

.credential-status {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 6px 9px;

    background: #eaf7ef;

    border-radius: 20px;

    color: #16834b;

    font-size: 9px;

    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   CREDENTIAL BODY
========================================================= */

.credential-card-body {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 25px 0;
}


.credential-avatar {

    width: 60px;

    height: 60px;

    min-width: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #e7f0fb;

    color: #083C7C;

    font-size: 25px;
}


.credential-details span {

    display: block;

    margin-bottom: 5px;

    color: #708198;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .7px;
}


.credential-details h3 {

    margin: 0 0 4px;

    color: #132653;

    font-size: 21px;

    font-weight: 700;
}


.credential-details p {

    margin: 0;

    color: #667085;

    font-size: 11px;
}


/* =========================================================
   QR AREA
========================================================= */

.credential-verification {

    display: flex;

    align-items: center;

    gap: 22px;

    padding: 20px;

    background: #ffffff;

    border: 1px solid #e0e8f2;

    border-radius: 15px;
}


/* QR */

.credential-qr {

    width: 125px;

    height: 125px;

    min-width: 125px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    border: 7px solid #ffffff;

    box-shadow:
        0 4px 15px rgba(0,0,0,.08);

    box-sizing: border-box;
}


/* QR PATTERN */

.qr-pattern {

    width: 100%;

    height: 100%;

    display: grid;

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

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

    gap: 5px;

    padding: 5px;

    background: #ffffff;
}


.qr-pattern span {

    display: block;

    background: #101828;

    border-radius: 2px;
}


.qr-pattern span:nth-child(2),
.qr-pattern span:nth-child(5),
.qr-pattern span:nth-child(7) {

    background: #ffffff;
}


/* VERIFY TEXT */

.credential-verify-text strong {

    display: block;

    margin-bottom: 6px;

    color: #083C7C;

    font-size: 15px;
}


.credential-verify-text span {

    display: block;

    max-width: 130px;

    color: #667085;

    font-size: 11px;

    line-height: 1.5;
}


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

.credential-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: 22px;

    padding-top: 17px;

    border-top: 1px solid #e1e9f3;
}


.credential-card-footer span {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #52677d;

    font-size: 10px;

    font-weight: 600;
}


.credential-card-footer i {

    color: #083C7C;

    font-size: 13px;
}


/* =========================================================
   FLOATING BADGES
========================================================= */

.credential-floating {

    position: absolute;

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 14px;

    background: #ffffff;

    border: 1px solid #dce6f1;

    border-radius: 12px;

    box-shadow:
        0 12px 30px rgba(8,60,124,.12);
}


.credential-floating > i {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background: #083C7C;

    color: #ffffff;

    font-size: 14px;
}


.credential-floating strong {

    display: block;

    color: #083C7C;

    font-size: 11px;
}


.credential-floating span {

    display: block;

    margin-top: 2px;

    color: #667085;

    font-size: 9px;
}


.floating-secure {

    top: 17%;

    left: 0;
}


.floating-verify {

    right: 0;

    bottom: 17%;
}


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

@media (max-width: 1199px) {

    .odlc-digital-credentials {
        padding: 75px 0;
    }

    .odlc-digital-container {
        grid-template-columns: 57% 43%;
    }

    .odlc-digital-content h2 {
        font-size: 46px;
    }

    .odlc-digital-intro {
        font-size: 16px;
    }

    .odlc-credential-card {
        width: 380px;

        min-height: 440px;

        padding: 22px;
    }

    .credential-qr {
        width: 110px;
        height: 110px;
        min-width: 110px;
    }

    .credential-floating {
        padding: 8px 10px;
    }

    .floating-secure {
        left: -10px;
    }

    .floating-verify {
        right: -10px;
    }
}


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

@media (max-width: 991px) {

    .odlc-digital-credentials {
        padding: 65px 0;
    }

    .odlc-digital-container {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .odlc-digital-content {
        padding-right: 0;
    }

    .odlc-digital-content h2 {
        font-size: 40px;
    }

    .odlc-credential-features {
        max-width: 100%;
    }

    .odlc-digital-visual {
        min-height: 550px;
    }

    .odlc-credential-card {
        width: 400px;
    }

    .floating-secure {
        left: 12%;
    }

    .floating-verify {
        right: 12%;
    }
}


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

@media (max-width: 767px) {

    .odlc-digital-credentials {
        padding: 55px 0;
    }

    .odlc-digital-container {
        width: 90%;
        gap: 40px;
    }

    .odlc-digital-badge {
        font-size: 12px;
        padding: 7px 12px;
        margin-bottom: 16px;
    }

    .odlc-digital-content h2 {
        font-size: 32px;
        line-height: 1.12;
    }

    .odlc-digital-intro {
        font-size: 15px;
        line-height: 1.65;
    }

    .odlc-credential-features {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .odlc-credential-feature {
        min-height: 75px;
    }

    .odlc-credential-btn {
        width: 100%;
    }

    .odlc-digital-visual {
        min-height: 470px;
    }

    .odlc-credential-card {
        width: 100%;
        max-width: 390px;

        min-height: auto;

        padding: 18px;

        border-radius: 20px;
    }

    .credential-logo img {
        width: 120px;
    }

    .credential-status {
        font-size: 8px;
    }

    .credential-card-body {
        padding: 20px 0;
    }

    .credential-verification {
        gap: 15px;
        padding: 15px;
    }

    .credential-qr {
        width: 95px;
        height: 95px;
        min-width: 95px;
    }

    .credential-card-footer span {
        font-size: 9px;
    }

    .credential-floating {
        display: none;
    }

    .credential-glow {
        width: 330px;
        height: 330px;
    }
}


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

@media (max-width: 480px) {

    .odlc-digital-credentials {
        padding: 45px 0;
    }

    .odlc-digital-container {
        width: 91%;
    }

    .odlc-digital-content h2 {
        font-size: 29px;
    }

    .odlc-digital-intro {
        font-size: 14px;
    }

    .odlc-credential-feature {
        padding: 11px;
    }

    .odlc-credential-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .odlc-credential-text h4 {
        font-size: 13px;
    }

    .odlc-credential-text p {
        font-size: 11px;
    }

    .odlc-credential-card {
        padding: 15px;
    }

    .credential-logo img {
        width: 105px;
    }

    .credential-status {
        padding: 5px 7px;
        font-size: 7px;
    }

    .credential-avatar {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 20px;
    }

    .credential-details h3 {
        font-size: 18px;
    }

    .credential-verification {
        padding: 12px;
    }

    .credential-qr {
        width: 82px;
        height: 82px;
        min-width: 82px;
    }

    .credential-verify-text strong {
        font-size: 13px;
    }

    .credential-card-footer {
        margin-top: 15px;
        padding-top: 13px;
    }

    .credential-card-footer span {
        font-size: 8px;
    }
}

/* =========================================================
   ODLC CAREER SUPPORT
========================================================= */

.odlc-career-support {
    position: relative;

    width: 100%;

    padding: 95px 0;

    overflow: hidden;

    background:
        #FFFFFF;

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


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

.odlc-career-container {

    width: min(1400px, 92%);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 47% 53%;

    align-items: center;

    gap: 45px;
}


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

.odlc-career-visual {

    position: relative;

    min-height: 570px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* GLOW */

.career-visual-glow {

    position: absolute;

    width: 440px;
    height: 440px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(8,60,124,.12),
            rgba(8,60,124,.025) 55%,
            transparent 72%
        );
}


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

.career-path-card {

    position: relative;

    z-index: 4;

    width: 440px;

    padding: 25px;

    background: #ffffff;

    border: 1px solid #dce6f1;

    border-radius: 24px;

    box-shadow:
        0 28px 60px rgba(8,60,124,.12),
        0 8px 25px rgba(0,0,0,.04);

    box-sizing: border-box;
}


/* CARD TOP */

.career-path-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 20px;

    margin-bottom: 8px;

    border-bottom: 1px solid #e5ebf3;
}


.career-path-label {

    color: #083C7C;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .7px;
}


.career-path-icon {

    width: 43px;
    height: 43px;

    display: flex;

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

    border-radius: 12px;

    background: #083C7C;

    color: #ffffff;

    font-size: 19px;
}


/* =========================================================
   CAREER STEP
========================================================= */

.career-step {

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 12px;

    min-height: 85px;
}


/* NUMBER */

.career-step-number {

    color: #9aa9bc;

    font-size: 10px;

    font-weight: 800;
}


/* STEP ICON */

.career-step-icon {

    width: 45px;
    height: 45px;

    display: flex;

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

    border-radius: 12px;

    color: #ffffff;

    font-size: 18px;
}


.career-step-icon.skill {
    background: #4f46e5;
}

.career-step-icon.profile {
    background: #2377e8;
}

.career-step-icon.jobs {
    background: #24b96f;
}


/* STEP CONTENT */

.career-step-content span {

    display: block;

    margin-bottom: 4px;

    color: #083C7C;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .3px;
}


.career-step-content p {

    margin: 0;

    color: #667085;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   CONNECTOR
========================================================= */

.career-step-connector {

    position: relative;

    height: 22px;

    margin-left: 54px;
}


.career-step-connector::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 1px;

    height: 100%;

    background:
        repeating-linear-gradient(
            to bottom,
            #b8c9dd 0,
            #b8c9dd 4px,
            transparent 4px,
            transparent 8px
        );
}


/* =========================================================
   JOB PORTAL BAR
========================================================= */

.career-portal-bar {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 17px;

    padding: 14px;

    background: #eef5fc;

    border: 1px solid #d5e4f4;

    border-radius: 13px;
}


.career-portal-icon {

    width: 40px;
    height: 40px;

    min-width: 40px;

    display: flex;

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

    border-radius: 10px;

    background: #083C7C;

    color: #ffffff;

    font-size: 16px;
}


.career-portal-bar strong {

    display: block;

    color: #083C7C;

    font-size: 13px;
}


.career-portal-bar span {

    display: block;

    margin-top: 3px;

    color: #667085;

    font-size: 10px;
}


.career-portal-arrow {

    margin-left: auto;

    color: #083C7C;

    font-size: 16px;
}


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

.career-floating-card {

    position: absolute;

    right: -5px;

    top: 15%;

    z-index: 7;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 14px;

    background: #ffffff;

    border: 1px solid #dce6f1;

    border-radius: 12px;

    box-shadow:
        0 12px 30px rgba(8,60,124,.12);
}


.career-floating-card > i {

    width: 35px;
    height: 35px;

    display: flex;

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

    border-radius: 9px;

    background: #24b96f;

    color: #ffffff;

    font-size: 15px;
}


.career-floating-card strong {

    display: block;

    color: #083C7C;

    font-size: 11px;
}


.career-floating-card span {

    display: block;

    margin-top: 2px;

    color: #667085;

    font-size: 9px;
}


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

.odlc-career-content {

    padding-left: 15px;
}


/* BADGE */

.odlc-career-badge {

    display: inline-flex;

    align-items: center;

    padding: 8px 15px;

    margin-bottom: 20px;

    background: #eaf2fc;

    border: 1px solid #d4e3f5;

    border-radius: 30px;

    color: #083C7C;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .6px;
}


/* HEADING */

.odlc-career-content h2 {

    max-width: 650px;

    margin: 0 0 18px;

    color: #0b2553;

    font-size: 52px;

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;
}


.odlc-career-content h2 span {

    display: block;

    color: #083C7C;
}


/* INTRO */

.odlc-career-intro {

    max-width: 650px;

    margin: 0 0 30px;

    color: #667085;

    font-size: 17px;

    line-height: 1.7;

    text-align: justify;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.odlc-career-highlights {

    display: flex;

    flex-direction: column;

    gap: 12px;

    max-width: 620px;
}


.odlc-career-highlight {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 13px 15px;

    background: #ffffff;

    border: 1px solid #e1e9f2;

    border-radius: 12px;

    box-shadow:
        0 5px 18px rgba(30,70,130,.04);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.odlc-career-highlight:hover {

    transform: translateX(5px);

    box-shadow:
        0 10px 25px rgba(8,60,124,.09);
}


/* HIGHLIGHT ICON */

.career-highlight-icon {

    width: 41px;
    height: 41px;

    min-width: 41px;

    display: flex;

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

    border-radius: 10px;

    background: #083C7C;

    color: #ffffff;

    font-size: 16px;
}


/* HIGHLIGHT TEXT */

.odlc-career-highlight h4 {

    margin: 0 0 3px;

    color: #132653;

    font-size: 14px;

    font-weight: 700;
}


.odlc-career-highlight p {

    margin: 0;

    color: #667085;

    font-size: 12px;

    line-height: 1.45;
}


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

.odlc-career-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 48px;

    margin-top: 28px;

    padding: 0 23px;

    background: #083C7C;

    color: #ffffff;

    border: 2px solid #083C7C;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    transition: all .3s ease;
}


.odlc-career-btn:hover {

    background: #ffffff;

    color: #083C7C;
}


.odlc-career-btn i {

    transition: transform .3s ease;
}


.odlc-career-btn:hover i {

    transform: translateX(4px);
}


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

@media (max-width: 1199px) {

    .odlc-career-support {
        padding: 75px 0;
    }

    .odlc-career-container {

        grid-template-columns: 46% 54%;

        gap: 25px;
    }

    .odlc-career-content h2 {

        font-size: 46px;
    }

    .odlc-career-intro {

        font-size: 16px;
    }

    .career-path-card {

        width: 390px;

        padding: 21px;
    }

    .career-floating-card {

        right: -10px;
    }
}


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

@media (max-width: 991px) {

    .odlc-career-support {

        padding: 65px 0;
    }

    .odlc-career-container {

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .odlc-career-content {

        padding-left: 0;
    }

    .odlc-career-content h2 {

        font-size: 40px;
    }

    .odlc-career-visual {

        min-height: 540px;

        order: 2;
    }

    .odlc-career-content {

        order: 1;
    }

    .career-floating-card {

        right: 12%;
    }
}


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

@media (max-width: 767px) {

    .odlc-career-support {

        padding: 55px 0;
    }

    .odlc-career-container {

        width: 90%;

        gap: 40px;
    }

    .odlc-career-badge {

        font-size: 12px;

        padding: 7px 12px;

        margin-bottom: 16px;
    }

    .odlc-career-content h2 {

        font-size: 32px;

        line-height: 1.12;
    }

    .odlc-career-intro {

        font-size: 15px;

        line-height: 1.65;

        text-align: justify;
    }

    .odlc-career-highlight {

        padding: 11px 12px;
    }

    .odlc-career-btn {

        width: 100%;
    }

    .odlc-career-visual {

        min-height: 470px;
    }

    .career-path-card {

        width: 100%;

        max-width: 390px;

        padding: 18px;

        border-radius: 20px;
    }

    .career-step {

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

        gap: 9px;

        min-height: 78px;
    }

    .career-step-icon {

        width: 40px;
        height: 40px;

        font-size: 16px;
    }

    .career-step-content span {

        font-size: 11px;
    }

    .career-step-content p {

        font-size: 11px;
    }

    .career-step-connector {

        margin-left: 44px;
    }

    .career-floating-card {

        display: none;
    }

    .career-visual-glow {

        width: 330px;

        height: 330px;
    }
}


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

@media (max-width: 480px) {

    .odlc-career-support {

        padding: 45px 0;
    }

    .odlc-career-container {

        width: 91%;
    }

    .odlc-career-content h2 {

        font-size: 29px;
    }

    .odlc-career-intro {

        font-size: 14px;
    }

    .odlc-career-highlight {

        gap: 10px;

        padding: 10px;
    }

    .career-highlight-icon {

        width: 36px;
        height: 36px;

        min-width: 36px;

        font-size: 14px;
    }

    .odlc-career-highlight h4 {

        font-size: 13px;
    }

    .odlc-career-highlight p {

        font-size: 11px;
    }

    .career-path-card {

        padding: 15px;
    }

    .career-path-icon {

        width: 38px;
        height: 38px;

        font-size: 16px;
    }

    .career-step {

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

        gap: 8px;

        min-height: 72px;
    }

    .career-step-icon {

        width: 36px;
        height: 36px;

        font-size: 14px;
    }

    .career-step-number {

        font-size: 9px;
    }

    .career-step-content span {

        font-size: 10px;
    }

    .career-step-content p {

        font-size: 10px;

        line-height: 1.4;
    }

    .career-step-connector {

        margin-left: 40px;
    }

    .career-portal-bar {

        padding: 11px;
    }

    .career-portal-icon {

        width: 35px;
        height: 35px;

        min-width: 35px;
    }

    .career-portal-bar strong {

        font-size: 11px;
    }

    .career-portal-bar span {

        font-size: 9px;
    }
}



/* =========================================================
   ODLC APPLY WITH ODLC - MODERN PATHWAYS
========================================================= */

.odlc-apply-pathways {
    width: 100%;
    padding: 90px 0;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

.odlc-apply-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.odlc-apply-label {
    display: inline-flex;
    padding: 8px 15px;
    margin-bottom: 16px;

    background: #eaf2fc;
    border: 1px solid #d4e3f5;
    border-radius: 30px;

    color: #083C7C;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .7px;
}

.odlc-apply-heading h2 {
    margin: 0 0 14px;

    color: #0b1f4d;
    font-size: 46px;
    line-height: 1.1;
    font-weight: 800;
}

.odlc-apply-heading h2 span {
    color: #083C7C;
}

.odlc-apply-heading p {
    max-width: 650px;
    margin: 0 auto;

    color: #667085;
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   PATHWAY SECTION
========================================================= */

.odlc-pathway-section {
    margin-bottom: 55px;
    
}

.odlc-pathway-section:last-child {
    margin-bottom: 0;
}

.odlc-pathway-heading {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 22px;
}

.odlc-pathway-heading-icon {
    width: 48px;
    height: 48px;

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

    border-radius: 13px;

    color: #fff;
    font-size: 20px;
}

.student-heading-icon {
    background: #083C7C;
}

.institution-heading-icon {
    background: #16a6c7;
}

.odlc-pathway-heading span {
    display: block;

    margin-bottom: 3px;

    color: #667085;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
}

.odlc-pathway-heading h3 {
    margin: 0;

    color: #0b1f4d;
    font-size: 26px;
    font-weight: 800;
}


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

.odlc-pathway-grid {
    display: grid;
    gap: 18px;
}

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

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

.odlc-pathway-card {
    position: relative;

    min-height: 205px;
    padding: 22px;

    background: #ffffff;

    border: 1px solid #dfe8f2;
    border-radius: 17px;

    box-sizing: border-box;

    box-shadow: 0 7px 25px rgba(8,60,124,.05);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.odlc-pathway-card:hover {
    transform: translateY(-6px);

    border-color: #c7d9ed;

    box-shadow: 0 16px 35px rgba(8,60,124,.11);
}


/* CARD TOP */

.odlc-pathway-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}

.odlc-pathway-icon {
    width: 43px;
    height: 43px;

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

    border-radius: 11px;

    color: #fff;
    font-size: 18px;
}

.odlc-pathway-icon.blue {
    background: #287be0;
}

.odlc-pathway-icon.purple {
    background: #6655e8;
}

.odlc-pathway-icon.green {
    background: #2db96b;
}

.odlc-pathway-icon.orange {
    background: #f27b21;
}

.odlc-pathway-number {
    color: #b1bdcc;
    font-size: 11px;
    font-weight: 800;
}


/* CARD CONTENT */

.odlc-pathway-card h4 {
    margin: 0 0 8px;

    color: #083C7C;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

.odlc-pathway-card p {
    max-width: 430px;

    margin: 0;

    color: #667085;

    font-size: 14px;
    line-height: 1.6;
}


/* CARD FOOTER */

.odlc-pathway-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 20px;
    padding-top: 13px;

    border-top: 1px solid #edf1f6;
}

.odlc-pathway-card-footer span {
    color: #718096;
    font-size: 11px;
    font-weight: 600;
}

.odlc-pathway-card-footer i {
    color: #083C7C;
    font-size: 16px;

    transition: transform .3s ease;
}

.odlc-pathway-card:hover
.odlc-pathway-card-footer i {
    transform: translate(3px, -3px);
}


/* =========================================================
   BUTTONS
========================================================= */

.odlc-pathway-action {
    display: flex;
    justify-content: flex-end;

    margin-top: 20px;
}

.odlc-apply-btn {
    display: inline-flex;

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

    gap: 10px;

    min-height: 46px;

    padding: 0 22px;

    border-radius: 7px;

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

    text-decoration: none;

    transition: all .3s ease;
}

.odlc-apply-btn.primary {
    background: #083C7C;
    color: #fff;
    border: 2px solid #083C7C;
}

.odlc-apply-btn.secondary {
    background: #fff;
    color: #083C7C;
    border: 2px solid #083C7C;
}

.odlc-apply-btn:hover {
    background: #fff;
    color: #083C7C;
}

.odlc-apply-btn.secondary:hover {
    background: #083C7C;
    color: #fff;
}

.odlc-apply-btn i {
    transition: transform .3s ease;
}

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


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

@media (max-width: 1199px) {

    .odlc-apply-pathways {
        padding: 75px 0;
    }

    .odlc-apply-heading h2 {
        font-size: 42px;
    }

    .odlc-pathway-card {
        padding: 20px;
    }

    .odlc-pathway-card h4 {
        font-size: 18px;
    }
}


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

@media (max-width: 991px) {

    .odlc-apply-pathways {
        padding: 65px 0;
    }

    .odlc-apply-heading {
        margin-bottom: 45px;
    }

    .odlc-apply-heading h2 {
        font-size: 38px;
    }

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

    .odlc-pathway-action {
        justify-content: flex-start;
    }
}


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

@media (max-width: 767px) {

    .odlc-apply-pathways {
        padding: 55px 0;
    }

    .odlc-apply-heading {
        width: 90%;
        margin-bottom: 38px;
    }

    .odlc-apply-heading h2 {
        font-size: 32px;
    }

    .odlc-apply-heading p {
        font-size: 15px;
    }

    .odlc-pathway-section {
        margin-bottom: 42px;
    }

    .students-grid,
    .institutions-grid {
        grid-template-columns: 1fr;
    }

    .odlc-pathway-heading h3 {
        font-size: 22px;
    }

    .odlc-pathway-card {
        min-height: auto;
        padding: 18px;
    }

    .odlc-pathway-card h4 {
        font-size: 18px;
    }

    .odlc-pathway-card p {
        font-size: 13px;
    }

    .odlc-pathway-action {
        width: 100%;
    }

    .odlc-apply-btn {
        width: 100%;
    }
}


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

@media (max-width: 480px) {

    .odlc-apply-pathways {
        padding: 45px 0;
    }

    .odlc-apply-heading h2 {
        font-size: 29px;
    }

    .odlc-apply-heading p {
        font-size: 14px;
    }

    .odlc-pathway-heading-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .odlc-pathway-heading h3 {
        font-size: 20px;
    }

    .odlc-pathway-card {
        padding: 16px;
        border-radius: 14px;
    }

    .odlc-pathway-card h4 {
        font-size: 17px;
    }

    .odlc-pathway-card p {
        font-size: 12px;
    }

    .odlc-apply-btn {
        min-height: 44px;
        font-size: 11px;
    }
}

/* CLICKABLE PATHWAY CARDS */

a.odlc-pathway-card {
    display: block !important;

    color: inherit !important;
    text-decoration: none !important;

    cursor: pointer;
}


/* ARROW */

.odlc-pathway-card-footer i {
    font-size: 18px !important;

    color: #083C7C !important;

    transition:
        transform .3s ease,
        color .3s ease !important;
}


/* HOVER */

a.odlc-pathway-card:hover {
    color: inherit !important;
    text-decoration: none !important;
}

a.odlc-pathway-card:hover
.odlc-pathway-card-footer i {
    transform: translate(4px, 4px) !important;
    color: #083C7C !important;
}


/* =========================================================
   APPLY WITH ODLC - LEFT CONTENT + RIGHT IMAGE
========================================================= */

.odlc-apply-hero {
    width: 100%;

    display: grid;
    grid-template-columns: 48% 52%;

    align-items: stretch;

    min-height: 420px;

    margin-bottom: 55px;

    background: #f7faff;

    border-radius: 24px;

    overflow: hidden;

    box-sizing: border-box;
}


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

.odlc-apply-hero .odlc-apply-heading {
    width: 100%;
    max-width: none;

    margin: 0 !important;

    padding: 65px 55px;

    display: flex;
    flex-direction: column;

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

    text-align: left;

    box-sizing: border-box;
}


/* LABEL */

.odlc-apply-hero .odlc-apply-label {
    display: inline-flex;

    width: fit-content;

    padding: 8px 15px;

    margin-bottom: 18px;

    background: #eaf2fc;

    border: 1px solid #d4e3f5;

    border-radius: 30px;

    color: #083C7C;

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

    letter-spacing: .7px;
}


/* HEADING */

.odlc-apply-hero .odlc-apply-heading h2 {
    margin: 0 0 18px;

    color: #0b1f4d;

    font-size: 46px;
    line-height: 1.1;

    font-weight: 800;

    text-align: left;
}


.odlc-apply-hero .odlc-apply-heading h2 span {
    color: #083C7C;
}


/* DESCRIPTION */

.odlc-apply-hero .odlc-apply-heading p {
    width: 100%;
    max-width: 580px;

    margin: 0;

    color: #667085;

    font-size: 16px;
    line-height: 1.7;

    text-align: justify;
}


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

.odlc-apply-hero-image {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 420px;

    overflow: hidden;
}


.odlc-apply-hero-image img {
    /* width: 100%;
    height: 100%; */

    display: block;

    object-fit: cover;
    object-position: center;
}


/* SOFT IMAGE BLEND ON LEFT */

.odlc-apply-hero-image::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 100px;

    z-index: 2;

    background: linear-gradient(
        to right,
        #f7faff 0%,
        rgba(247, 250, 255, .75) 30%,
        transparent 100%
    );

    pointer-events: none;
}


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

@media (max-width: 1199px) {

    .odlc-apply-hero {
        grid-template-columns: 52% 48%;
        min-height: 390px;
    }

    .odlc-apply-hero .odlc-apply-heading {
        padding: 50px 40px;
    }

    .odlc-apply-hero .odlc-apply-heading h2 {
        font-size: 42px;
    }

    .odlc-apply-hero-image {
        min-height: 390px;
    }
}


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

@media (max-width: 991px) {

    .odlc-apply-hero {
        grid-template-columns: 55% 45%;

        min-height: 350px;

        border-radius: 20px;
    }

    .odlc-apply-hero .odlc-apply-heading {
        padding: 40px 30px;
    }

    .odlc-apply-hero .odlc-apply-heading h2 {
        font-size: 36px;
    }

    .odlc-apply-hero .odlc-apply-heading p {
        font-size: 15px;
    }

    .odlc-apply-hero-image {
        min-height: 350px;
    }
}


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

@media (max-width: 767px) {

    .odlc-apply-hero {
        display: flex;
        flex-direction: column;

        min-height: auto;

        margin-bottom: 40px;

        border-radius: 18px;
    }


    /* IMAGE FIRST */

    .odlc-apply-hero-image {
        order: 1;

        width: 100%;

        height: 240px;
        min-height: 240px;
    }

    .odlc-apply-hero-image img {
        height: 240px;

        object-position: center;
    }


    /* REMOVE SIDE GRADIENT */

    .odlc-apply-hero-image::before {
        display: none;
    }


    /* CONTENT BELOW IMAGE */

    .odlc-apply-hero .odlc-apply-heading {
        order: 2;

        padding: 30px 22px 35px;

        align-items: flex-start;

        text-align: left;
    }

    .odlc-apply-hero .odlc-apply-heading h2 {
        font-size: 32px;

        text-align: left;
    }

    .odlc-apply-hero .odlc-apply-heading p {
        font-size: 15px;

        line-height: 1.65;

        text-align: justify;
    }
}


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

@media (max-width: 480px) {

    .odlc-apply-hero-image,
    .odlc-apply-hero-image img {
        height: 210px;
        min-height: 210px;
    }

    .odlc-apply-hero .odlc-apply-heading {
        padding: 27px 18px 32px;
    }

    .odlc-apply-hero .odlc-apply-label {
        font-size: 11px;

        padding: 7px 12px;
    }

    .odlc-apply-hero .odlc-apply-heading h2 {
        font-size: 29px;
    }

    .odlc-apply-hero .odlc-apply-heading p {
        font-size: 14px;
    }
}



/* =========================================================
   SAME SIZE FOR ALL PATHWAY BUTTONS
========================================================= */

.odlc-pathway-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;

    width: 100% !important;

    margin-top: 20px !important;
    padding-top: 16px !important;

    border-top: 1px solid #e5ebf2 !important;

    box-sizing: border-box !important;
}


.odlc-card-action {
    display: inline-flex !important;

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

    gap: 8px !important;

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

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    padding: 0 12px !important;

    border-radius: 6px !important;

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

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

    line-height: 1 !important;

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

    box-sizing: border-box !important;

    flex: 0 0 190px !important;

    transition: all .3s ease !important;
}


/* PRIMARY */

.odlc-card-action.primary {
    background: #083C7C !important;
    color: #ffffff !important;

    border: 2px solid #083C7C !important;
}


/* SECONDARY */

.odlc-card-action.secondary {
    background: #ffffff !important;
    color: #083C7C !important;

    border: 2px solid #083C7C !important;
}


/* HOVER */

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

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


/* ICON */

.odlc-card-action i {
    font-size: 14px !important;

    flex-shrink: 0 !important;

    transition: transform .3s ease !important;
}

.odlc-card-action:hover i {
    transform: translateX(3px) !important;
}


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

@media (max-width: 991px) {

    .odlc-card-action {
        width: 175px !important;
        min-width: 175px !important;
        max-width: 175px !important;

        flex: 0 0 175px !important;
    }
}


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

@media (max-width: 767px) {

    .odlc-pathway-card-footer {
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .odlc-card-action {
        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;

        height: 42px !important;
        min-height: 42px !important;

        flex: 0 0 170px !important;
    }
}


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

@media (max-width: 480px) {

    .odlc-pathway-card-footer {
        justify-content: center !important;
        gap: 7px !important;
    }

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

        height: 40px !important;
        min-height: 40px !important;

        flex: 1 1 100% !important;

        font-size: 9px !important;
    }
}


/* =========================================================
   FINAL CALL-TO-ACTION
========================================================= */

.odlc-final-cta {

    position: relative;

    width: 100%;

    padding: 90px 0;

    overflow: hidden;

    background: #f7faff;

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


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

.odlc-final-cta-container {

    position: relative;

    width: min(1400px, 92%);

    min-height: 430px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 58% 42%;

    align-items: center;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dce7f3;

    border-radius: 28px;

    box-shadow:
        0 20px 55px rgba(8,60,124,.09);

    box-sizing: border-box;
}


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

.odlc-final-cta-content {

    position: relative;

    z-index: 5;

    padding: 65px 55px;

    box-sizing: border-box;
}


/* LABEL */

.odlc-final-cta-label {

    display: inline-flex;

    align-items: center;

    padding: 8px 15px;

    margin-bottom: 18px;

    background: #eaf2fc;

    border: 1px solid #d4e3f5;

    border-radius: 30px;

    color: #083C7C;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .7px;
}


/* HEADING */

.odlc-final-cta-content h2 {

    max-width: 720px;

    margin: 0 0 20px;

    color: #0b1f4d;

    font-size: 48px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1px;
}


.odlc-final-cta-content h2 span {

    color: #083C7C;
}


/* DESCRIPTION */

.odlc-final-cta-content > p {

    max-width: 650px;

    margin: 0;

    color: #667085;

    font-size: 16px;

    line-height: 1.7;

    text-align: justify;
}


/* =========================================================
   BUTTONS
========================================================= */

.odlc-final-cta-buttons {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;
}


.odlc-final-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 190px;

    height: 48px;

    padding: 0 20px;

    border-radius: 7px;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    box-sizing: border-box;

    transition: all .3s ease;
}


/* PRIMARY */

.odlc-final-btn.primary {

    background: #083C7C;

    color: #ffffff;

    border: 2px solid #083C7C;
}


/* SECONDARY */

.odlc-final-btn.secondary {

    background: #ffffff;

    color: #083C7C;

    border: 2px solid #083C7C;
}


/* HOVER */

.odlc-final-btn.primary:hover {

    background: #ffffff;

    color: #083C7C;
}


.odlc-final-btn.secondary:hover {

    background: #083C7C;

    color: #ffffff;
}


.odlc-final-btn i {

    font-size: 15px;

    transition: transform .3s ease;
}


.odlc-final-btn:hover i {

    transform: translateX(4px);
}


/* =========================================================
   SUPPORTING LINKS
========================================================= */

.odlc-final-support-links {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;
}


.odlc-final-support-links a {

    color: #52677d;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

    transition: color .3s ease;
}


.odlc-final-support-links a:hover {

    color: #083C7C;
}


.odlc-final-support-links span {

    color: #b5c0cd;

    font-size: 11px;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.odlc-final-cta-visual {

    position: relative;

    height: 100%;

    min-height: 430px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #083C7C 0%,
            #0b4f9d 100%
        );
}


/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.cta-circle {

    position: absolute;

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

    border-radius: 50%;
}


.cta-circle-one {

    width: 380px;

    height: 380px;

    right: -120px;

    top: -90px;
}


.cta-circle-two {

    width: 280px;

    height: 280px;

    left: -130px;

    bottom: -130px;
}


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

.cta-visual-card {

    position: relative;

    z-index: 3;

    width: 330px;

    min-height: 150px;

    padding: 25px;

    display: flex;

    align-items: center;

    gap: 18px;

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

    border-radius: 20px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.18);

    box-sizing: border-box;
}


.cta-visual-icon {

    width: 58px;

    height: 58px;

    min-width: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: #083C7C;

    color: #ffffff;

    font-size: 25px;
}


.cta-visual-text span {

    display: block;

    margin-bottom: 7px;

    color: #667085;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .7px;
}


.cta-visual-text strong {

    display: block;

    color: #0b1f4d;

    font-size: 17px;

    line-height: 1.3;
}


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

.cta-floating-card {

    position: absolute;

    right: 35px;

    bottom: 55px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 15px;

    background: #ffffff;

    border-radius: 11px;

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


.cta-floating-card i {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background: #eaf2fc;

    color: #083C7C;

    font-size: 14px;
}


.cta-floating-card span {

    color: #083C7C;

    font-size: 10px;

    font-weight: 700;

    line-height: 1.4;
}


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

@media (max-width: 1199px) {

    .odlc-final-cta {

        padding: 75px 0;
    }

    .odlc-final-cta-container {

        grid-template-columns: 57% 43%;

        min-height: 400px;
    }

    .odlc-final-cta-content {

        padding: 50px 40px;
    }

    .odlc-final-cta-content h2 {

        font-size: 42px;
    }

    .odlc-final-cta-visual {

        min-height: 400px;
    }

    .cta-visual-card {

        width: 290px;
    }
}


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

@media (max-width: 991px) {

    .odlc-final-cta {

        padding: 65px 0;
    }

    .odlc-final-cta-container {

        grid-template-columns: 1fr;

        min-height: auto;

        border-radius: 22px;
    }

    .odlc-final-cta-content {

        padding: 50px 40px;
    }

    .odlc-final-cta-content h2 {

        font-size: 40px;
    }

    .odlc-final-cta-visual {

        min-height: 300px;

        height: 300px;
    }

    .cta-floating-card {

        right: 12%;
    }
}


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

@media (max-width: 767px) {

    .odlc-final-cta {

        padding: 55px 0;
    }

    .odlc-final-cta-container {

        width: 90%;

        border-radius: 18px;
    }

    .odlc-final-cta-content {

        padding: 35px 22px;
    }

    .odlc-final-cta-label {

        font-size: 11px;

        padding: 7px 12px;
    }

    .odlc-final-cta-content h2 {

        font-size: 32px;

        line-height: 1.12;
    }

    .odlc-final-cta-content > p {

        font-size: 15px;

        line-height: 1.65;
    }


    /* BUTTONS */

    .odlc-final-cta-buttons {

        flex-direction: column;

        width: 100%;
    }

    .odlc-final-btn {

        width: 100%;

        min-width: 0;

        height: 46px;
    }


    /* LINKS */

    .odlc-final-support-links {

        justify-content: center;

        gap: 7px;

        text-align: center;
    }

    .odlc-final-support-links a {

        font-size: 11px;
    }


    /* VISUAL */

    .odlc-final-cta-visual {

        min-height: 270px;

        height: 270px;
    }

    .cta-visual-card {

        width: 270px;

        min-height: 125px;

        padding: 18px;

        border-radius: 16px;
    }

    .cta-visual-icon {

        width: 48px;

        height: 48px;

        min-width: 48px;

        font-size: 21px;
    }

    .cta-visual-text strong {

        font-size: 14px;
    }

    .cta-floating-card {

        right: 10px;

        bottom: 18px;
    }
}


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

@media (max-width: 480px) {

    .odlc-final-cta {

        padding: 45px 0;
    }

    .odlc-final-cta-container {

        width: 91%;
    }

    .odlc-final-cta-content {

        padding: 28px 18px 32px;
    }

    .odlc-final-cta-content h2 {

        font-size: 29px;
    }

    .odlc-final-cta-content > p {

        font-size: 14px;
    }

    .odlc-final-support-links {

        gap: 5px;
    }

    .odlc-final-support-links a {

        font-size: 10px;
    }

    .odlc-final-support-links span {

        font-size: 9px;
    }

    .odlc-final-cta-visual {

        min-height: 230px;

        height: 230px;
    }

    .cta-visual-card {

        width: 240px;

        padding: 15px;
    }

    .cta-visual-icon {

        width: 42px;

        height: 42px;

        min-width: 42px;

        font-size: 18px;
    }

    .cta-visual-text span {

        font-size: 8px;
    }

    .cta-visual-text strong {

        font-size: 13px;
    }

    .cta-floating-card {

        display: none;
    }
}

/* =========================================================
   WHO WE ARE - LEFT CONTENT + RIGHT IMAGE
========================================================= */

.who-we-are {
    position: relative;
    overflow: hidden;
}


/* CONTENT */

.who-we-are-content {
    padding-right: 25px;
}

.who-we-are-content .section-tag {
    display: inline-flex;
    margin-bottom: 16px;
}


/* HEADING */

.who-we-are-content .section-title {
    color: #0b1f4d;
    margin-bottom: 22px;
}

.who-we-are-content .section-title span {
    color: #083C7C;
}


/* PARAGRAPHS */

.who-we-are-content .section-desc {
    color: #667085;
    line-height: 1.75;
    text-align: justify;
    margin-bottom: 15px;
}


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

.who-we-are-image {
    position: relative;

    width: 100%;
    height: 470px;

    overflow: hidden;

    border-radius: 24px;

    background: #eaf2fc;

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


/* IMAGE */

.who-we-are-image img {
    width: 100%;
    height: 100%;

    display: block;

    /* object-fit: cover; */

    object-position: center;

    transition: transform .5s ease;
}


/* IMAGE HOVER */

.who-we-are-image:hover img {
    transform: scale(1.03);
}


/* SOFT OVERLAY */

.who-we-are-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(8,60,124,.12),
            transparent 55%
        );

    pointer-events: none;
}


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

@media (max-width: 1199px) {

    .who-we-are-content {
        padding-right: 10px;
    }

    .who-we-are-image {
        height: 430px;
    }
}


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

@media (max-width: 991px) {

    .who-we-are-content {
        padding-right: 0;
    }

    .who-we-are-image {
        height: 380px;
        margin-top: 10px;
    }
}


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

@media (max-width: 767px) {

    .who-we-are {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .who-we-are-content {
        padding-right: 0;
    }

    .who-we-are-content .section-title {
        font-size: 32px;
        line-height: 1.15;
    }

    .who-we-are-content .section-desc {
        font-size: 15px;
        line-height: 1.65;
    }

    .who-we-are-image {
        height: 300px;
        margin-top: 10px;
        border-radius: 18px;
    }
}


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

@media (max-width: 480px) {

    .who-we-are-content .section-title {
        font-size: 29px;
    }

    .who-we-are-content .section-desc {
        font-size: 14px;
    }

    .who-we-are-image {
        height: 250px;
        border-radius: 16px;
    }
}

/* =========================================================
   MODERN ODLC IMAGE FRAME
========================================================= */

.who-we-are-image {
    position: relative !important;

    width: calc(100% - 25px) !important;
    height: 460px !important;

    margin: 0 0 20px 20px !important;

    overflow: visible !important;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    padding: 0 !important;

    animation: none !important;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.who-we-are-image img {
    position: relative !important;

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

    display: block !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 22px !important;

    border: 1px solid #dbe5f0 !important;

    box-shadow:
        0 18px 45px rgba(8, 60, 124, .14) !important;

    z-index: 3 !important;

    transition:
        transform .45s ease,
        box-shadow .45s ease !important;
}


/* =========================================================
   OFFSET FRAME BEHIND IMAGE
========================================================= */

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

    content: "";

    position: absolute !important;

    top: 16px !important;
    left: -16px !important;

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

    border: 2px solid #083C7C !important;

    border-radius: 22px !important;

    background: #083C7C !important;

    z-index: 1 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   SMALL BLUE ACCENT
========================================================= */

/* .who-we-are-image::after {

    content: "";

    position: absolute !important;

    right: -12px !important;
    bottom: 28px !important;

    width: 75px !important;
    height: 75px !important;

    background: #083C7C !important;

    border-radius: 16px !important;

    z-index: 2 !important;

    opacity: .95 !important;
} */


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.who-we-are-image-overlay {

    position: absolute !important;

    inset: 0 !important;

    z-index: 4 !important;

    border-radius: 22px !important;

    background:
        linear-gradient(
            135deg,
            rgba(8,60,124,.12),
            transparent 45%
        ) !important;

    pointer-events: none !important;
}


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

.who-we-are-image:hover img {

    transform: translateY(-5px) !important;

    box-shadow:
        0 25px 55px rgba(8,60,124,.18) !important;
}


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

@media (max-width: 991px) {

    .who-we-are-image {

        width: calc(100% - 18px) !important;

        height: 380px !important;

        margin-left: 18px !important;
    }

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

        top: 12px !important;
        left: -12px !important;
    }

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

        width: 60px !important;
        height: 60px !important;

        right: -9px !important;
        bottom: 22px !important;

        border-radius: 13px !important;
    }
}


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

@media (max-width: 767px) {

    .who-we-are-image {

        width: calc(100% - 12px) !important;

        height: 300px !important;

        margin: 10px 0 15px 12px !important;
    }

    .who-we-are-image img {

        border-radius: 18px !important;
    }

    .who-we-are-image-overlay {

        border-radius: 18px !important;
    }

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

        top: 9px !important;
        left: -9px !important;

        border-radius: 18px !important;
    }

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

        width: 45px !important;
        height: 45px !important;

        right: -7px !important;
        bottom: 18px !important;

        border-radius: 10px !important;
    }
}


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

@media (max-width: 480px) {

    .who-we-are-image {

        height: 250px !important;

        width: calc(100% - 10px) !important;

        margin-left: 10px !important;
    }

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

        top: 7px !important;
        left: -7px !important;
    }

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

        width: 38px !important;
        height: 38px !important;

        right: -6px !important;
        bottom: 14px !important;
    }
}

/* =========================================================
   ABOUT ODLC - LEFT CONTENT START FROM TOP
========================================================= */

.who-we-are .row {
    align-items: flex-start !important;
}

.who-we-are-content {
    height: 100% !important;

    padding-top: 15px !important;
    padding-right: 25px !important;

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

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

    box-sizing: border-box !important;
}


/* SECTION LABEL */

.who-we-are-content .section-tag {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}


/* HEADING */

.who-we-are-content .section-title {
    margin-top: 0 !important;
    margin-bottom: 22px !important;

    text-align: left !important;
}


/* PARAGRAPHS */

.who-we-are-content .section-desc {
    margin-top: 0 !important;
    margin-bottom: 15px !important;

    text-align: left !important;
}


/* BUTTON */
.who-we-are-content .hero-buttons {
    width: 100% !important;

    margin-top: 12px !important;

    display: flex !important;

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

    text-align: left !important;

    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* =========================================================
   ABOUT ODLC - ALIGN EVERYTHING FROM TOP
========================================================= */

.who-we-are .row {
    align-items: flex-start !important;
}

.who-we-are-content {
    height: auto !important;

    padding-top: 0 !important;
    padding-right: 25px !important;

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

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

    box-sizing: border-box !important;
}


/* ABOUT ODLC */

.who-we-are-content .section-tag {
    display: inline-flex !important;

    margin: 0 0 18px 0 !important;
}


/* MAIN HEADING */

.who-we-are-content .section-title {
    margin: 0 0 22px 0 !important;

    text-align: left !important;
}


/* PARAGRAPHS */

.who-we-are-content .section-desc {
    margin: 0 0 15px 0 !important;

    text-align: left !important;
}


/* BUTTON */

.who-we-are-content .hero-buttons {
    display: flex !important;

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

    margin: 10px 0 0 0 !important;
}


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

@media (max-width: 767px) {

    .who-we-are-content {
        padding: 0 !important;

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

    .who-we-are-content .section-tag {
        margin-bottom: 15px !important;
    }

    .who-we-are-content .section-title {
        text-align: left !important;
    }

    .who-we-are-content .section-desc {
        text-align: justify !important;
    }

    .who-we-are-content .hero-buttons {
        margin-top: 8px !important;
    }
}

.who-we-are-content {
    align-items: flex-start !important;
}

.who-we-are-content .hero-buttons {
    align-self: flex-start !important;
    width: 100% !important;
    justify-content: flex-start !important;
}

.who-we-are-content .hero-buttons .hero-btn {
    align-self: flex-start !important;
    margin-left: 0 !important;
}

/* =========================================================
   FINAL ODLC ECOSYSTEM RESPONSIVE FIX
   CARDS + ORBIT ICONS + ROTATING CIRCLES
========================================================= */


/* =========================================================
   ROTATING CIRCLES — ALL DEVICES
========================================================= */

.outer-circle {
    animation: rotateClockwise 18s linear infinite !important;
    transform-origin: center center !important;
    will-change: transform !important;
}

.inner-circle {
    animation: rotateAnti 12s linear infinite !important;
    transform-origin: center center !important;
    will-change: transform !important;
}


/* Keep center fixed */

.center-circle {
    animation: none !important;
    z-index: 10 !important;
}


/* =========================================================
   SMALL LAPTOP
   992px - 1199px
========================================================= */

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

    .circle-wrapper {
        width:100% !important;
        max-width:1000px !important;
        height:560px !important;
        position:relative !important;
        margin:0 auto !important;
    }


    /* CIRCLES */

    .outer-circle {
        width:370px !important;
        height:370px !important;

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

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

    .inner-circle {
        width:275px !important;
        height:275px !important;

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

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

    .center-circle {
        width:145px !important;
        height:145px !important;

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

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


    /* ORBIT ICONS */

    .orbit {
        width:58px !important;
        height:58px !important;

        z-index:20 !important;

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

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

        min-width:58px !important;
        min-height:58px !important;

        border-radius:50% !important;

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

        font-size:20px !important;
    }


    .orbit-one {
        left:calc(50% - 100px) !important;
        top:calc(50% - 180px) !important;
    }

    .orbit-two {
        left:calc(50% + 180px) !important;
        top:50% !important;
    }

    .orbit-three {
        left:calc(50% - 100px) !important;
        top:calc(50% + 180px) !important;

        bottom:auto !important;
        right:auto !important;
    }


    /* CARDS */

    .feature-card {
        width:185px !important;
        max-width:185px !important;

        padding:18px !important;

        box-sizing:border-box !important;
    }

    .card-left {
        left:10px !important;
        top:55px !important;
    }

    .card-right {
        right:10px !important;
        top:55px !important;
    }

    .card-bottom {
        left:10px !important;
        bottom:55px !important;
    }
}


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

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

    .circle-wrapper {
        width:100% !important;
        max-width:760px !important;

        height:650px !important;

        position:relative !important;

        margin:0 auto !important;
    }


    /* =====================================================
       CIRCLE
    ===================================================== */

    .outer-circle {
        width:320px !important;
        height:320px !important;

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

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

        animation:rotateClockwise 18s linear infinite !important;
    }

    .inner-circle {
        width:240px !important;
        height:240px !important;

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

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

        animation:rotateAnti 12s linear infinite !important;
    }

    .center-circle {
        width:125px !important;
        height:125px !important;

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

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

        animation:none !important;
    }


    /* =====================================================
       ORBIT ICONS
    ===================================================== */

    .orbit {
        width:54px !important;
        height:54px !important;

        z-index:30 !important;

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

    .orbit-icon {
        width:54px !important;
        height:54px !important;

        min-width:54px !important;
        min-height:54px !important;

        border-radius:50% !important;

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

        font-size:19px !important;
    }


    /* TOP */

    .orbit-one {
        left:calc(50% - 75px) !important;
        top:calc(45% - 155px) !important;
    }


    /* RIGHT */

    .orbit-two {
        left:calc(50% + 155px) !important;
        top:45% !important;
    }


    /* BOTTOM */

    .orbit-three {
        left:calc(50% - 75px) !important;
        top:calc(45% + 155px) !important;

        bottom:auto !important;
        right:auto !important;
    }


    /* =====================================================
       FEATURE CARDS
       FIXED WIDTH + NO OVERLAP
    ===================================================== */

    .feature-card {
        width:190px !important;
        max-width:190px !important;

        min-height:120px !important;

        padding:17px !important;

        box-sizing:border-box !important;

        z-index:15 !important;
    }


    /* LEFT TOP */

    .card-left {
        left:12px !important;
        top:35px !important;

        right:auto !important;
        bottom:auto !important;
    }


    /* RIGHT TOP */

    .card-right {
        right:12px !important;
        top:35px !important;

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


    /* LEFT / BOTTOM CARD */

    .card-bottom {
        left:12px !important;
        bottom:35px !important;

        right:auto !important;
        top:auto !important;
    }


    .feature-card h4 {
        font-size:15px !important;
        line-height:1.3 !important;

        margin-bottom:8px !important;
    }

    .feature-card p {
        font-size:11px !important;
        line-height:1.5 !important;

        margin:0 !important;
    }

    .feature-card span {
        display:block !important;

        width:30px !important;
        height:2px !important;

        margin:8px 0 !important;
    }
}


/* =========================================================
   MOBILE
   481px - 767px
========================================================= */

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

    .circle-wrapper {
        width:100% !important;
        max-width:430px !important;

        height:420px !important;

        position:relative !important;

        margin:0 auto !important;
    }


    /* CIRCLE */

    .outer-circle {
        width:275px !important;
        height:275px !important;

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

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

        animation:rotateClockwise 18s linear infinite !important;
    }

    .inner-circle {
        width:210px !important;
        height:210px !important;

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

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

        animation:rotateAnti 12s linear infinite !important;
    }

    .center-circle {
        width:105px !important;
        height:105px !important;

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

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

        animation:none !important;
    }


    /* ICONS */

    .orbit {
        width:48px !important;
        height:48px !important;

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

        z-index:30 !important;
    }

    .orbit-icon {
        width:48px !important;
        height:48px !important;

        min-width:48px !important;
        min-height:48px !important;

        border-radius:50% !important;

        font-size:17px !important;
    }


    .orbit-one {
        left:calc(50% - 60px) !important;
        top:25px !important;
    }

    .orbit-two {
        left:calc(50% + 137px) !important;
        top:145px !important;
    }

    .orbit-three {
        left:calc(50% - 70px) !important;
        top:265px !important;

        bottom:auto !important;
    }


    /* =====================================================
       CARDS BELOW CIRCLE
    ===================================================== */

    .feature-card {
        position:relative !important;

        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;

        width:calc(100% - 30px) !important;
        max-width:360px !important;

        margin:18px auto !important;

        padding:18px !important;

        text-align:left !important;

        box-sizing:border-box !important;
    }


    .card-left {
        margin-top:10px !important;
    }

    .feature-card h4 {
        font-size:15px !important;
    }

    .feature-card p {
        font-size:12px !important;
        line-height:1.55 !important;
    }
}


/* =========================================================
   SMALL MOBILE
   360px - 480px
========================================================= */

@media (max-width:480px) {

    .circle-wrapper {
        max-width:360px !important;

        height:360px !important;
    }


    .outer-circle {
        width:245px !important;
        height:245px !important;

        top:130px !important;

        animation:rotateClockwise 18s linear infinite !important;
    }

    .inner-circle {
        width:190px !important;
        height:190px !important;

        top:130px !important;

        animation:rotateAnti 12s linear infinite !important;
    }

    .center-circle {
        width:94px !important;
        height:94px !important;

        top:130px !important;

        animation:none !important;
    }


    .orbit {
        width:44px !important;
        height:44px !important;
    }

    .orbit-icon {
        width:44px !important;
        height:44px !important;

        min-width:44px !important;
        min-height:44px !important;

        font-size:15px !important;
    }


    .orbit-one {
        left:calc(50% - 182px) !important;
        top:25px !important;
    }

    .orbit-two {
        left:calc(50% + -142px) !important;
        top:130px !important;
    }

    .orbit-three {
        left:calc(50% - 5px) !important;
        top:235px !important;
    }


    .feature-card {
        width:calc(100% - 24px) !important;
        max-width:330px !important;

        margin:15px auto !important;

        padding:16px !important;
    }


    .feature-card h4 {
        font-size:14px !important;
    }

    .feature-card p {
        font-size:11px !important;
        line-height:1.5 !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   360px AND BELOW
========================================================= */

@media (max-width:360px) {

    .circle-wrapper {
        max-width:330px !important;
        height:325px !important;
    }


    .outer-circle {
        width:220px !important;
        height:220px !important;

        top:120px !important;

        animation:rotateClockwise 18s linear infinite !important;
    }

    .inner-circle {
        width:170px !important;
        height:170px !important;

        top:120px !important;

        animation:rotateAnti 12s linear infinite !important;
    }

    .center-circle {
        width:84px !important;
        height:84px !important;

        top:120px !important;

        animation:none !important;
    }


    .orbit {
        width:40px !important;
        height:40px !important;
    }

    .orbit-icon {
        width:40px !important;
        height:40px !important;

        min-width:40px !important;
        min-height:40px !important;

        font-size:14px !important;
    }


    .orbit-one {
        left:calc(50% - 47px) !important;
        top:25px !important;
    }

    .orbit-two {
        left:calc(50% + 108px) !important;
        top:120px !important;
    }

    .orbit-three {
        left:calc(50% - 58px) !important;
        top:215px !important;
    }


    .feature-card {
        width:calc(100% - 20px) !important;
        max-width:300px !important;

        padding:14px !important;
    }

    .feature-card h4 {
        font-size:13px !important;
    }

    .feature-card p {
        font-size:10px !important;
        line-height:1.45 !important;
    }
}

/* =========================================================
   FINAL RESPONSIVE FEATURE CARDS
   ODLC LEARNING ECOSYSTEM
========================================================= */


/* =========================================================
   SMALL LAPTOP
   992px - 1199px
========================================================= */

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

    .circle-wrapper {
        position:relative !important;
        width:100% !important;
        max-width:1000px !important;
        height:540px !important;
        margin:0 auto !important;
    }

    /* FEATURE CARD COMMON */

    .feature-card {
        position:absolute !important;

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

        box-sizing:border-box !important;

        padding:16px !important;

        border-radius:12px !important;

        background:#ffffff !important;

        z-index:12 !important;
    }

    .feature-card h4 {
        font-size:13px !important;
        line-height:1.35 !important;

        margin-bottom:8px !important;
    }

    .feature-card p {
        font-size:10px !important;
        line-height:1.55 !important;

        margin:0 !important;
    }


    /* LEFT TOP */

    .card-left {
        left:10px !important;
        right:auto !important;
        top:55px !important;
        bottom:auto !important;
    }


    /* LEFT BOTTOM */

    .card-bottom {
        left:10px !important;
        right:auto !important;
        top:auto !important;
        bottom:55px !important;
    }


    /* RIGHT TOP */

    .card-right {
        right:10px !important;
        left:auto !important;
        top:55px !important;
        bottom:auto !important;
    }


    /* RIGHT BOTTOM
       If another card uses this class */

    .card-right-bottom {
        right:10px !important;
        left:auto !important;
        top:auto !important;
        bottom:55px !important;
    }
}


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

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

    .circle-wrapper {
        position:relative !important;

        width:100% !important;
        max-width:760px !important;

        height:620px !important;

        margin:0 auto !important;
    }


    /* CARDS */

    .feature-card {
        position:absolute !important;

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

        padding:14px !important;

        box-sizing:border-box !important;

        border-radius:11px !important;

        z-index:15 !important;
    }

    .feature-card h4 {
        font-size:12px !important;
        line-height:1.35 !important;

        margin-bottom:7px !important;
    }

    .feature-card p {
        font-size:9px !important;
        line-height:1.5 !important;

        margin:0 !important;
    }


    /* LEFT */

    .card-left {
        left:5px !important;
        right:auto !important;

        top:70px !important;
        bottom:auto !important;
    }


    /* RIGHT */

    .card-right {
        right:5px !important;
        left:auto !important;

        top:70px !important;
        bottom:auto !important;
    }


    /* SECOND LEFT */

    .card-bottom {
        left:5px !important;
        right:auto !important;

        top:auto !important;
        bottom:70px !important;
    }


    /* SECOND RIGHT */

    .card-right-bottom {
        right:5px !important;
        left:auto !important;

        top:auto !important;
        bottom:70px !important;
    }
}


/* =========================================================
   MOBILE
   481px - 767px

   Cards become normal blocks.
========================================================= */

@media (max-width:767px) {

    .circle-wrapper {
        width:100% !important;

        max-width:420px !important;

        height:auto !important;

        display:flex !important;

        flex-direction:column !important;

        align-items:center !important;

        padding-left:12px !important;
        padding-right:12px !important;
        padding-bottom:25px !important;

        box-sizing:border-box !important;
    }


    /* CIRCLE AREA */

    .outer-circle,
    .inner-circle,
    .center-circle,
    .orbit {
        z-index:20 !important;
    }


    /* CARDS */

    .feature-card,
    .card-left,
    .card-right,
    .card-bottom,
    .card-right-bottom {

        position:relative !important;

        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;

        width:100% !important;
        max-width:340px !important;
        min-width:0 !important;

        margin-left:auto !important;
        margin-right:auto !important;

        box-sizing:border-box !important;
    }


    /* FIRST CARD STARTS BELOW ORBIT */

    .card-left {
        margin-top:330px !important;
    }


    .card-right,
    .card-bottom,
    .card-right-bottom {
        margin-top:16px !important;
    }


    .feature-card {
        padding:16px !important;

        border-radius:12px !important;

        text-align:left !important;
    }

    .feature-card h4 {
        font-size:15px !important;
        line-height:1.4 !important;

        text-align:left !important;
    }

    .feature-card p {
        font-size:12px !important;
        line-height:1.6 !important;

        text-align:left !important;
    }
}


/* =========================================================
   SMALL MOBILE
   361px - 480px
========================================================= */

@media (max-width:480px) {

    .circle-wrapper {
        max-width:360px !important;

        padding-left:10px !important;
        padding-right:10px !important;
    }


    .feature-card,
    .card-left,
    .card-right,
    .card-bottom,
    .card-right-bottom {

        width:100% !important;

        max-width:320px !important;

        min-width:0 !important;
    }


    .card-left {
        margin-top:300px !important;
    }


    .feature-card {
        padding:14px !important;

        border-radius:10px !important;
    }


    .feature-card h4 {
        font-size:14px !important;
        line-height:1.35 !important;
    }


    .feature-card p {
        font-size:11px !important;
        line-height:1.55 !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   360px AND BELOW
========================================================= */

@media (max-width:360px) {

    .circle-wrapper {
        max-width:330px !important;
    }


    .feature-card,
    .card-left,
    .card-right,
    .card-bottom,
    .card-right-bottom {

        max-width:295px !important;
    }


    .card-left {
        margin-top:275px !important;
    }


    .feature-card {
        padding:13px !important;
    }


    .feature-card h4 {
        font-size:13px !important;
    }


    .feature-card p {
        font-size:10px !important;
        line-height:1.5 !important;
    }
}

/* =========================================================
   ODLC LEARNING ECOSYSTEM
   FINAL MOBILE RESPONSIVE FIX
========================================================= */

@media (max-width: 767px) {

    /* Main ecosystem section */
    .circle-wrapper {
        position: relative !important;

        width: 100% !important;
        max-width: 420px !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 auto !important;

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

        padding: 250px 12px 20px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       CIRCLE AREA
    ===================================================== */

    .outer-circle {
        position: absolute !important;

        width: 225px !important;
        height: 225px !important;

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

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

        z-index: 2 !important;
    }


    .inner-circle {
        position: absolute !important;

        width: 175px !important;
        height: 175px !important;

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

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

        z-index: 3 !important;
    }


    .center-circle {
        position: absolute !important;

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

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

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

        z-index: 5 !important;
    }


    /* =====================================================
       CENTER ODLC TEXT
    ===================================================== */

    .center-circle h3,
    .center-circle h4,
    .center-circle strong {
        font-size: 18px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    .center-circle p,
    .center-circle span {
        font-size: 10px !important;
        line-height: 1.5 !important;
    }


    /* =====================================================
       ALL ORBIT ICONS
    ===================================================== */

    .orbit {
        position: absolute !important;

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

        z-index: 20 !important;

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


    .orbit-icon {
        width: 42px !important;
        height: 42px !important;

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

        display: flex !important;

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

        border-radius: 50% !important;

        box-sizing: border-box !important;
    }


    .orbit-icon i {
        display: flex !important;

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

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

        font-size: 15px !important;

        line-height: 1 !important;
    }


    /* =====================================================
       ICONS ON OUTER RING
       
       Ring center = 50% / 115px
       Radius ≈ 112px
    ===================================================== */


    /* DIGITAL ACCESS
       TOP LEFT
    */

    .orbit-one {
        top: 36px !important;
        left: calc(50% - 75px) !important;

        right: auto !important;
        bottom: auto !important;
    }


    /* ASSESSMENTS
       TOP RIGHT
    */

    .orbit-two {
        top: 36px !important;
        left: calc(50% + 75px) !important;

        right: auto !important;
        bottom: auto !important;
    }


    /* CREDENTIALS
       BOTTOM LEFT
    */

    .orbit-three {
        top: 194px !important;
        left: calc(50% - 75px) !important;

        right: auto !important;
        bottom: auto !important;
    }


    /* CAREER SUPPORT
       BOTTOM RIGHT
    */

    .orbit-four {
        top: 194px !important;
        left: calc(50% + 75px) !important;

        right: auto !important;
        bottom: auto !important;
    }


    /* =====================================================
       FEATURE CARDS
       
       IMPORTANT:
       Cards are no longer absolute.
       They appear AFTER the complete circle.
    ===================================================== */

    .feature-card,
    .card-left,
    .card-right,
    .card-bottom,
    .card-right-bottom {

        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: 100% !important;
        max-width: 340px !important;
        min-width: 0 !important;

        margin: 0 auto 14px !important;

        box-sizing: border-box !important;

        z-index: 5 !important;
    }


    /* Remove old positioning */

    .card-left,
    .card-right,
    .card-bottom,
    .card-right-bottom {
        transform: none !important;
    }


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

    .feature-card {
        padding: 16px !important;

        min-height: auto !important;

        border-radius: 12px !important;

        background: #ffffff !important;

        box-shadow: 0 5px 18px rgba(8,60,124,.08) !important;

        text-align: left !important;
    }


    .feature-card h4 {
        margin: 0 0 8px !important;

        font-size: 14px !important;
        line-height: 1.35 !important;

        text-align: left !important;
    }


    .feature-card p {
        margin: 0 !important;

        font-size: 11px !important;
        line-height: 1.55 !important;

        text-align: left !important;
    }
}


/* =========================================================
   SMALL MOBILE
   481px - 767px
========================================================= */

@media (max-width: 480px) {

    .circle-wrapper {
        max-width: 360px !important;

        padding-top: 235px !important;
    }


    .outer-circle {
        width: 205px !important;
        height: 205px !important;

        top: 105px !important;
    }


    .inner-circle {
        width: 160px !important;
        height: 160px !important;

        top: 105px !important;
    }


    .center-circle {
        width: 82px !important;
        height: 82px !important;

        top: 105px !important;
    }


    .orbit {
        width: 40px !important;
        height: 40px !important;
    }


    .orbit-icon {
        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        min-height: 40px !important;
    }


    .orbit-icon i {
        font-size: 14px !important;
    }


    /* TOP LEFT */

    .orbit-one {
        top: 30px !important;
        left: calc(50% - 68px) !important;
    }


    /* TOP RIGHT */

    .orbit-two {
        top: 30px !important;
        left: calc(50% + 68px) !important;
    }


    /* BOTTOM LEFT */

    .orbit-three {
        top: 180px !important;
        left: calc(50% - 68px) !important;
    }


    /* BOTTOM RIGHT */

    .orbit-four {
        top: 180px !important;
        left: calc(50% + 68px) !important;
    }


    .feature-card,
    .card-left,
    .card-right,
    .card-bottom,
    .card-right-bottom {
        max-width: 320px !important;

        margin-bottom: 12px !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   360px AND BELOW
========================================================= */

@media (max-width: 360px) {

    .circle-wrapper {
        max-width: 330px !important;

        padding-top: 215px !important;
    }


    .outer-circle {
        width: 190px !important;
        height: 190px !important;

        top: 98px !important;
    }


    .inner-circle {
        width: 148px !important;
        height: 148px !important;

        top: 98px !important;
    }


    .center-circle {
        width: 76px !important;
        height: 76px !important;

        top: 98px !important;
    }


    .orbit {
        width: 36px !important;
        height: 36px !important;
    }


    .orbit-icon {
        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;
        min-height: 36px !important;
    }


    .orbit-icon i {
        font-size: 12px !important;
    }


    .orbit-one {
        top: 28px !important;
        left: calc(50% - 62px) !important;
    }


    .orbit-two {
        top: 28px !important;
        left: calc(50% + 62px) !important;
    }


    .orbit-three {
        top: 168px !important;
        left: calc(50% - 62px) !important;
    }


    .orbit-four {
        top: 168px !important;
        left: calc(50% + 62px) !important;
    }


    .feature-card,
    .card-left,
    .card-right,
    .card-bottom,
    .card-right-bottom {
        max-width: 295px !important;
    }


    .feature-card h4 {
        font-size: 13px !important;
    }


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

/* =========================================================
   CENTER CIRCLE CONTENT - FULL RESPONSIVE
========================================================= */

.center-circle {
    position: absolute !important;

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

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

    text-align: center !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    padding: 15px !important;

    z-index: 10 !important;
}


/* ODLC */

.center-circle h3 {
    margin: 0 0 5px !important;

    padding: 0 !important;

    color: #17233d !important;

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

    font-size: 24px !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    text-align: center !important;
}

.center-circle h3 b {
    font-weight: 700 !important;
}


/* TEXT */

.center-circle a {
    display: block !important;

    width: 100% !important;
    max-width: 150px !important;

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

    color: #17233d !important;

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

    font-size: 11px !important;

    font-weight: 400 !important;

    line-height: 1.45 !important;

    text-align: center !important;

    text-decoration: none !important;

    white-space: normal !important;

    overflow-wrap: break-word !important;
}


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

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

    .center-circle {
        width: 130px !important;
        height: 130px !important;

        padding: 14px !important;
    }

    .center-circle h3 {
        font-size: 22px !important;

        margin-bottom: 5px !important;
    }

    .center-circle a {
        max-width: 105px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;
    }
}


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

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

    .center-circle {
        width: 115px !important;
        height: 115px !important;

        padding: 12px !important;
    }

    .center-circle h3 {
        font-size: 19px !important;

        margin-bottom: 4px !important;
    }

    .center-circle a {
        max-width: 92px !important;

        font-size: 9px !important;

        line-height: 1.35 !important;
    }
}


/* =========================================================
   MOBILE
   481px - 767px
========================================================= */

@media (max-width:767px) {

    .center-circle {
        width: 95px !important;
        height: 95px !important;

        padding: 10px !important;
    }

    .center-circle h3 {
        font-size: 17px !important;

        margin-bottom: 3px !important;
    }

    .center-circle a {
        max-width: 78px !important;

        font-size: 8px !important;

        line-height: 1.35 !important;
    }
}


/* =========================================================
   SMALL MOBILE
   361px - 480px
========================================================= */

@media (max-width:480px) {

    .center-circle {
        width: 85px !important;
        height: 85px !important;

        padding: 8px !important;
    }

    .center-circle h3 {
        font-size: 15px !important;

        margin-bottom: 3px !important;
    }

    .center-circle a {
        max-width: 70px !important;

        font-size: 7px !important;

        line-height: 1.3 !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   360px AND BELOW
========================================================= */

@media (max-width:360px) {

    .center-circle {
        width: 76px !important;
        height: 76px !important;

        padding: 7px !important;
    }

    .center-circle h3 {
        font-size: 13px !important;

        margin-bottom: 2px !important;
    }

    .center-circle a {
        max-width: 62px !important;

        font-size: 6.5px !important;

        line-height: 1.25 !important;
    }
}

.hero-buttons {
    position: relative;
    z-index: 9999;
}

.hero-buttons .hero-btn {
    position: relative;
    z-index: 9999;
    pointer-events: auto !important;
    cursor: pointer !important;
}



.odlc-download-wrapper {
    position: relative;
    display: inline-block;
}

.odlc-download-btn {
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.odlc-download-btn i {
    transition: transform 0.3s ease;
}

.odlc-download-wrapper.active .odlc-download-btn i {
    transform: rotate(180deg);
}

.odlc-download-links {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    width: 220px;
    background: #ffffff;
    border: 1px solid #dce5f0;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 12px 30px rgba(0, 56, 111, 0.15);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 100;
}

.odlc-download-wrapper.active .odlc-download-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.odlc-download-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    color: #083C7C;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.odlc-download-links a:hover {
    background: #f1f6fb;
}

.odlc-download-links i {
    font-size: 18px;
}

.social-post-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.social-post-link .social-post-card {
    cursor: pointer;
}


/* =========================================================
   PREMIUM MOBILE HERO
   ========================================================= */

@media (max-width: 767px) {

    /* =========================================
       HERO MAIN
    ========================================= */

    .hero-section {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

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

        overflow: hidden !important;

        background: #062d5c !important;

        padding: 0 !important;
        box-sizing: border-box !important;
    }


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

    .hero-left {
        order: 1 !important;

        width: 100% !important;
        min-width: 0 !important;

        display: block !important;

        padding: 42px 22px 32px !important;

        box-sizing: border-box !important;
    }


    .hero-content {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        box-sizing: border-box !important;
    }


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

    .hero-badge {
        display: inline-flex !important;
        align-items: center !important;

        width: auto !important;
        max-width: 100% !important;

        padding: 8px 13px !important;

        margin: 0 0 18px !important;

        border-radius: 30px !important;

        background: #2f68ff !important;

        color: #ffffff !important;

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

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

        letter-spacing: .4px !important;

        line-height: 1.3 !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }


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

    .hero-content h2 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        color: #ffffff !important;

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

        font-size: 34px !important;

        font-weight: 800 !important;

        line-height: 1.08 !important;

        letter-spacing: -1px !important;

        text-align: left !important;

        text-transform: uppercase !important;
    }


    .hero-content h2 span {
        display: block !important;

        margin-top: 2px !important;

        color: #4f7cff !important;
    }


    /* =========================================
       YELLOW ACCENT LINE
    ========================================= */

    .hero-line {
        width: 48px !important;
        height: 4px !important;

        margin: 18px 0 17px !important;

        background: #f5c542 !important;

        border-radius: 5px !important;
    }


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

    .hero-programmes {
        width: 100% !important;

        margin: 0 0 16px !important;

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

        gap: 7px !important;

        color: #ffffff !important;

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

        font-size: 12px !important;

        font-weight: 500 !important;

        line-height: 1.55 !important;

        text-align: left !important;
    }


    .hero-programmes span {
        color: #f5c542 !important;

        font-weight: 700 !important;
    }


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

    .hero-content > p {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 20px !important;

        color: #dbe7f8 !important;

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

        font-size: 14px !important;

        line-height: 1.65 !important;

        text-align: left !important;
    }


    /* =========================================
       BUTTONS
    ========================================= */

    .hero-buttons {
        width: 100% !important;

        display: grid !important;

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

        gap: 10px !important;

        margin: 0 !important;
    }


    .hero-btn {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 46px !important;

        padding: 0 12px !important;

        display: inline-flex !important;

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

        gap: 7px !important;

        border-radius: 7px !important;

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

        font-size: 11px !important;

        font-weight: 700 !important;

        line-height: 1 !important;

        text-decoration: none !important;

        box-sizing: border-box !important;

        white-space: nowrap !important;
    }


    .hero-btn-primary {
        background: #ffffff !important;

        color: #083C7C !important;

        border: 2px solid #ffffff !important;
    }


    .hero-btn-secondary {
        background: transparent !important;

        color: #ffffff !important;

        border: 2px solid rgba(255,255,255,.55) !important;
    }


    .hero-btn i {
        font-size: 13px !important;
    }


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

    .hero-right {
        order: 2 !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        display: grid !important;

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

        gap: 10px !important;

        padding: 0 16px 22px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* =========================================
       LARGE IMAGES
       2 IMAGES SIDE BY SIDE
    ========================================= */

    .big-images {
        width: 100% !important;
        height: 210px !important;

        display: grid !important;

        grid-template-rows: 1fr !important;

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

        gap: 10px !important;

        grid-column: 1 / -1 !important;

        min-height: 0 !important;
    }


    .big-image-card {
        width: 100% !important;
        height: 210px !important;

        min-height: 0 !important;

        overflow: hidden !important;

        border-radius: 18px !important;

        background: #ffffff !important;

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


    .big-image-card img {
        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center !important;
    }


    /* =========================================
       HIDE 3 SMALL IMAGES ON MOBILE
       Prevents the huge / broken collage
    ========================================= */

    .small-images {
        display: none !important;
    }

}


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

@media (max-width: 480px) {

    .hero-left {
        padding: 34px 18px 26px !important;
    }


    .hero-badge {
        font-size: 9px !important;

        padding: 7px 11px !important;

        margin-bottom: 16px !important;
    }


    .hero-content h2 {
        font-size: 30px !important;

        line-height: 1.08 !important;

        letter-spacing: -.7px !important;
    }


    .hero-line {
        width: 42px !important;
        height: 3px !important;

        margin: 16px 0 15px !important;
    }


    .hero-programmes {
        font-size: 11px !important;

        gap: 5px !important;

        line-height: 1.6 !important;
    }


    .hero-content > p {
        font-size: 13px !important;

        line-height: 1.6 !important;

        margin-bottom: 18px !important;
    }


    .hero-buttons {
        grid-template-columns: 1fr !important;

        gap: 9px !important;
    }


    .hero-btn {
        min-height: 45px !important;

        font-size: 11px !important;
    }


    .hero-right {
        padding: 0 14px 18px !important;

        gap: 8px !important;
    }


    .big-images {
        height: 180px !important;

        gap: 8px !important;
    }


    .big-image-card {
        height: 180px !important;

        border-radius: 16px !important;
    }

}


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

@media (max-width: 360px) {

    .hero-left {
        padding: 30px 16px 24px !important;
    }


    .hero-content h2 {
        font-size: 27px !important;

        line-height: 1.1 !important;
    }


    .hero-badge {
        font-size: 8px !important;
    }


    .hero-programmes {
        font-size: 10px !important;
    }


    .hero-content > p {
        font-size: 12px !important;
    }


    .big-images {
        height: 160px !important;
    }


    .big-image-card {
        height: 160px !important;
    }

}

/* =========================================================
   MOBILE HERO — CENTERED PREMIUM UI
   ========================================================= */

@media (max-width: 767px) {

    /* HERO CONTENT */
    .hero-left {
        width: 100% !important;
        padding: 40px 20px 30px !important;
        display: flex !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 500px !important;

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

        text-align: center !important;
    }


    /* BADGE */
    .hero-badge {
        align-self: center !important;

        margin: 0 auto 20px !important;

        padding: 8px 14px !important;

        font-size: 10px !important;

        text-align: center !important;

        border-radius: 30px !important;
    }


    /* MAIN HEADING */
    .hero-content h2 {
        width: 100% !important;
        max-width: 440px !important;

        margin: 0 auto !important;

        font-size: 34px !important;
        line-height: 1.08 !important;

        letter-spacing: -.8px !important;

        text-align: center !important;
    }


    .hero-content h2 span {
        display: block !important;

        margin-top: 2px !important;

        text-align: center !important;
    }


    /* ACCENT LINE */
    .hero-line {
        width: 48px !important;
        height: 4px !important;

        margin: 19px auto 18px !important;

        border-radius: 10px !important;
    }


    /* PROGRAMMES */
    .hero-programmes {
        width: 100% !important;
        max-width: 430px !important;

        margin: 0 auto 18px !important;

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

        flex-wrap: wrap !important;

        gap: 5px 8px !important;

        font-size: 12px !important;

        line-height: 1.7 !important;

        text-align: center !important;
    }


    .hero-programmes span {
        margin: 0 1px !important;
    }


    /* DESCRIPTION */
    .hero-content > p {
        width: 100% !important;
        max-width: 430px !important;

        margin: 0 auto 22px !important;

        font-size: 14px !important;

        line-height: 1.65 !important;

        text-align: center !important;

        color: #dce8f8 !important;
    }


    /* BUTTONS */
    .hero-buttons {
        width: 100% !important;
        max-width: 430px !important;

        margin: 0 auto !important;

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

        gap: 10px !important;
    }


    .hero-btn {
        width: 100% !important;

        min-height: 50px !important;

        justify-content: center !important;

        font-size: 12px !important;

        border-radius: 8px !important;
    }


    /* IMAGE AREA */
    .hero-right {
        width: 100% !important;

        padding: 0 16px 22px !important;

        box-sizing: border-box !important;
    }
}


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

@media (max-width: 480px) {

    .hero-left {
        padding: 34px 18px 28px !important;
    }


    .hero-badge {
        font-size: 9px !important;

        padding: 7px 12px !important;

        margin-bottom: 18px !important;
    }


    .hero-content h2 {
        max-width: 380px !important;

        font-size: 30px !important;

        line-height: 1.08 !important;

        letter-spacing: -.6px !important;
    }


    .hero-line {
        width: 42px !important;
        height: 3px !important;

        margin: 17px auto 16px !important;
    }


    .hero-programmes {
        max-width: 360px !important;

        font-size: 11px !important;

        line-height: 1.7 !important;

        gap: 4px 7px !important;
    }


    .hero-content > p {
        max-width: 360px !important;

        font-size: 13px !important;

        line-height: 1.65 !important;
    }


    .hero-buttons {
        max-width: 360px !important;
    }


    .hero-btn {
        min-height: 48px !important;

        font-size: 11px !important;
    }
}


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

@media (max-width: 360px) {

    .hero-left {
        padding: 30px 16px 24px !important;
    }


    .hero-badge {
        font-size: 8px !important;

        padding: 7px 10px !important;
    }


    .hero-content h2 {
        font-size: 27px !important;

        line-height: 1.1 !important;
    }


    .hero-programmes {
        font-size: 10px !important;
    }


    .hero-content > p {
        font-size: 12px !important;
    }


    .hero-btn {
        min-height: 46px !important;

        font-size: 10px !important;
    }
}

/* =========================================================
   MOBILE HERO HEADING — CLEAN & BALANCED
   ========================================================= */

@media (max-width: 767px) {

    .hero-content h2 {
        width: 100% !important;
        max-width: 390px !important;

        margin: 0 auto !important;

        font-family: "Roboto", Arial, sans-serif !important;

        font-size: 32px !important;
        font-weight: 800 !important;

        line-height: 1.08 !important;
        letter-spacing: -0.6px !important;

        text-align: center !important;

        color: #ffffff !important;

        text-wrap: balance !important;
    }

    .hero-content h2 span {
        display: inline !important;

        margin: 0 !important;

        font-family: "Roboto", Arial, sans-serif !important;

        color: #4f7cff !important;
    }
}


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

@media (max-width: 480px) {

    .hero-content h2 {
        max-width: 350px !important;

        font-size: 29px !important;

        line-height: 1.1 !important;

        letter-spacing: -0.4px !important;
    }
}


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

@media (max-width: 360px) {

    .hero-content h2 {
        max-width: 320px !important;

        font-size: 27px !important;

        line-height: 1.1 !important;

        letter-spacing: -0.3px !important;
    }
}




/* =========================================================
   FINAL ODLC HERO UI
   MOBILE — CLEAN, CENTERED & PREMIUM
========================================================= */

@media (max-width: 767px) {

    /* HERO */
    .hero-section {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;

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

        padding: 0 !important;
        gap: 0 !important;

        background: #062d5c !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }


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

    .hero-left {
        width: 100% !important;

        padding: 42px 20px 32px !important;

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

        text-align: center !important;

        box-sizing: border-box !important;

        order: 1 !important;
    }


    .hero-content {
        width: 100% !important;
        max-width: 420px !important;

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

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

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

        text-align: center !important;

        box-sizing: border-box !important;
    }


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

    .hero-badge {
        display: inline-flex !important;

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

        width: auto !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 auto 20px !important;

        padding: 8px 14px !important;

        background: #2f68ff !important;

        color: #ffffff !important;

        border-radius: 30px !important;

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

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

        line-height: 1.3 !important;
        letter-spacing: .4px !important;

        text-align: center !important;

        white-space: nowrap !important;
    }


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

    .hero-content h2 {
        width: 100% !important;
        max-width: 390px !important;

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

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

        font-size: 32px !important;
        font-weight: 800 !important;

        line-height: 1.08 !important;

        letter-spacing: -.5px !important;

        color: #ffffff !important;

        text-align: center !important;

        text-transform: uppercase !important;

        text-wrap: balance !important;
    }


    .hero-content h2 span {
        display: inline !important;

        margin: 0 !important;

        color: #4f7cff !important;

        text-align: center !important;
    }


    /* =========================================
       YELLOW LINE
    ========================================= */

    .hero-line {
        width: 48px !important;
        height: 4px !important;

        margin: 18px auto 18px !important;

        background: #f5c542 !important;

        border-radius: 10px !important;
    }


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

    .hero-programmes {
        width: 100% !important;
        max-width: 390px !important;

        margin: 0 auto 6px !important;

        display: flex !important;

        flex-wrap: wrap !important;

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

        gap: 5px 8px !important;

        color: #ffffff !important;

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

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

        line-height: 1.65 !important;

        text-align: center !important;
    }


    .hero-programmes span {
        color: #f5c542 !important;

        margin: 0 1px !important;
    }


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

    .hero-content > p,
    .hero-left .hero-content p {
        width: 100% !important;
        max-width: 380px !important;

        margin: 0 auto 24px !important;
        padding: 0 !important;

        color: #dce8f8 !important;

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

        font-size: 14px !important;

        font-weight: 400 !important;

        line-height: 1.65 !important;

        text-align: center !important;
    }


    /* =========================================
       BUTTONS
    ========================================= */

    .hero-buttons {
        width: 100% !important;
        max-width: 390px !important;

        margin: 0 auto !important;

        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

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

        gap: 11px !important;

        text-align: center !important;
    }


    .hero-buttons .hero-btn {
        width: 100% !important;
        max-width: 390px !important;

        min-width: 0 !important;

        height: 50px !important;
        min-height: 50px !important;

        margin: 0 auto !important;

        padding: 0 20px !important;

        display: flex !important;

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

        position: relative !important;

        box-sizing: border-box !important;

        border-radius: 8px !important;

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

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

        line-height: 1 !important;

        text-align: center !important;

        white-space: nowrap !important;
    }


    /* Arrow stays on right */
    .hero-buttons .hero-btn i {
        position: absolute !important;

        right: 20px !important;

        top: 50% !important;

        margin: 0 !important;

        transform: translateY(-50%) !important;

        font-size: 18px !important;
    }


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

    .hero-right {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        padding: 0 16px 22px !important;

        display: block !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        order: 2 !important;
    }


    .big-images {
        width: 100% !important;

        height: 210px !important;

        display: grid !important;

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

        gap: 10px !important;

        margin: 0 !important;
    }


    .big-image-card {
        width: 100% !important;
        height: 210px !important;

        margin: 0 !important;

        border-radius: 18px !important;

        overflow: hidden !important;

        box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
    }


    .big-image-card img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;
    }


    .small-images {
        display: none !important;
    }
}


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

@media (max-width: 480px) {

    .hero-left {
        padding: 34px 17px 28px !important;
    }


    .hero-badge {
        font-size: 9px !important;

        padding: 7px 11px !important;

        margin-bottom: 18px !important;
    }


    .hero-content h2 {
        max-width: 350px !important;

        font-size: 29px !important;

        line-height: 1.1 !important;

        letter-spacing: -.4px !important;
    }


    .hero-line {
        width: 42px !important;
        height: 3px !important;

        margin: 17px auto !important;
    }


    .hero-programmes {
        max-width: 350px !important;

        font-size: 11px !important;

        line-height: 1.7 !important;

        gap: 4px 7px !important;
    }


    .hero-content > p,
    .hero-left .hero-content p {
        max-width: 345px !important;

        font-size: 13px !important;

        line-height: 1.65 !important;

        margin-bottom: 22px !important;
    }


    .hero-buttons {
        max-width: 350px !important;

        gap: 10px !important;
    }


    .hero-buttons .hero-btn {
        max-width: 350px !important;

        height: 48px !important;
        min-height: 48px !important;

        font-size: 12px !important;
    }


    .hero-buttons .hero-btn i {
        right: 18px !important;

        font-size: 17px !important;
    }


    .hero-right {
        padding: 0 14px 18px !important;
    }


    .big-images {
        height: 180px !important;

        gap: 8px !important;
    }


    .big-image-card {
        height: 180px !important;

        border-radius: 16px !important;
    }
}


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

@media (max-width: 360px) {

    .hero-left {
        padding: 30px 15px 25px !important;
    }


    .hero-content h2 {
        max-width: 320px !important;

        font-size: 27px !important;

        line-height: 1.1 !important;
    }


    .hero-badge {
        font-size: 8px !important;

        padding: 7px 9px !important;
    }


    .hero-programmes {
        max-width: 320px !important;

        font-size: 10px !important;
    }


    .hero-content > p,
    .hero-left .hero-content p {
        max-width: 315px !important;

        font-size: 12px !important;
    }


    .hero-buttons {
        max-width: 320px !important;
    }


    .hero-buttons .hero-btn {
        max-width: 320px !important;

        height: 46px !important;
        min-height: 46px !important;

        font-size: 11px !important;
    }


    .hero-right {
        padding: 0 12px 16px !important;
    }


    .big-images {
        height: 160px !important;
    }


    .big-image-card {
        height: 160px !important;
    }
}


/* =========================================================
   EXPLORE ODLC BUTTON - ALIGN WITH MIDDLE DIVIDER
========================================================= */

.choose-odlc .left-content > .mt-4 {
    width: 100% !important;
    margin-top: 20px !important;
    padding: 0 !important;

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

.choose-odlc .contact-btn {
    width: calc(50% - 22px) !important;
    min-width: 0 !important;
    height: 54px !important;

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

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

    background: #0A56D8 !important;
    color: #ffffff !important;

    border: 2px solid #0A56D8 !important;
    border-radius: 10px !important;

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

    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.choose-odlc .contact-btn:hover {
    background: #003eb8 !important;
    border-color: #003eb8 !important;
    color: #ffffff !important;
}

/* =========================================================
   ABOUT ODLC - MOBILE CENTER ALIGNMENT
========================================================= */

@media (max-width: 767px) {

    .who-we-are-content {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .who-we-are-content .section-tag {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 12px !important;
    }

    .who-we-are-content .section-title {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .who-we-are-content .section-title span {
        display: inline !important;
    }

    .who-we-are-content .section-desc {
        width: 100% !important;
        max-width: 650px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .who-we-are-content .hero-buttons {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .who-we-are-content .hero-btn {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


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

@media (max-width: 575px) {

    .who-we-are-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .who-we-are-content .section-tag {
        font-size: 11px !important;
    }

    .who-we-are-content .section-title {
        font-size: 29px !important;
        line-height: 1.18 !important;
        text-align: center !important;
    }

    .who-we-are-content .section-desc {
        font-size: 14px !important;
        line-height: 1.65 !important;
        text-align: center !important;
    }

    .who-we-are-content .hero-buttons {
        justify-content: center !important;
    }
}

/* =========================================================
   MOBILE HERO IMAGE SECTION
   ========================================================= */

.mobile-image-label,
.mobile-build-card {
    display: none;
}


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

@media (max-width: 767px) {

    /* HERO RIGHT */
    .hero-right {
        width: 100% !important;
        height: auto !important;

        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 205px 180px !important;

        gap: 10px !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }


    /* =====================================================
       BIG IMAGE CONTAINER
       ===================================================== */

    .big-images {
        display: contents !important;
    }


    /* =====================================================
       CORPORATE TOWER
       FULL WIDTH
       ===================================================== */

    .hero-image-main {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

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

        position: relative !important;
        overflow: hidden !important;

        border-radius: 20px !important;
        background: #ffffff !important;
    }


    .hero-image-main img {
        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;
        object-position: center !important;
    }


    /* =====================================================
       LEARN GROW BELONG
       ===================================================== */

    .hero-image-learning {
        grid-column: 1 !important;
        grid-row: 2 !important;

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

        position: relative !important;
        overflow: hidden !important;

        border-radius: 20px !important;
        background: #ffffff !important;
    }


    .hero-image-learning img {
        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;
        object-position: center !important;
    }


    /* =====================================================
       HIDE OLD SMALL IMAGE COLUMN
       ===================================================== */

    .small-images {
        display: block !important;

        grid-column: 2 !important;
        grid-row: 2 !important;

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

        position: relative !important;

        overflow: hidden !important;
    }


    /* Hide the existing desktop images */
    .small-images > img {
        display: none !important;
    }


    /* =====================================================
       BUILD YOUR FUTURE CARD
       ===================================================== */

    .mobile-build-card {
        display: block !important;

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

        position: relative !important;

        overflow: hidden !important;

        border-radius: 20px !important;

        background: #ffffff !important;
    }


    .mobile-build-card img {
        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;
        object-position: center !important;
    }


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

    .mobile-image-label {
        position: absolute !important;

        left: 10px !important;
        right: 10px !important;
        bottom: 9px !important;

        min-height: 42px !important;

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

        gap: 9px !important;

        padding: 8px 13px !important;

        background: rgba(255, 255, 255, 0.96) !important;

        border-radius: 13px !important;

        box-sizing: border-box !important;

        box-shadow:
            0 5px 16px rgba(0, 0, 0, 0.14) !important;

        z-index: 5 !important;
    }


    .mobile-image-label i {
        width: 24px !important;
        height: 24px !important;

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

        flex-shrink: 0 !important;

        color: #1769e0 !important;

        font-size: 16px !important;
    }


    .mobile-image-label span {
        color: #083C7C !important;

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

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

        line-height: 1.2 !important;

        white-space: nowrap !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

}


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

@media (max-width: 480px) {

    .hero-right {
        grid-template-rows: 190px 165px !important;
        gap: 9px !important;
    }


    .hero-image-main {
        height: 190px !important;
        border-radius: 18px !important;
    }


    .hero-image-learning,
    .small-images,
    .mobile-build-card {
        height: 165px !important;
        border-radius: 18px !important;
    }


    .mobile-image-label {
        left: 8px !important;
        right: 8px !important;
        bottom: 7px !important;

        min-height: 38px !important;

        padding: 7px 9px !important;

        gap: 6px !important;

        border-radius: 11px !important;
    }


    .mobile-image-label i {
        width: 21px !important;
        height: 21px !important;

        font-size: 14px !important;
    }


    .mobile-image-label span {
        font-size: 11px !important;
    }

}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 360px) {

    .hero-right {
        grid-template-rows: 175px 150px !important;
        gap: 8px !important;
    }


    .hero-image-main {
        height: 175px !important;
        border-radius: 16px !important;
    }


    .hero-image-learning,
    .small-images,
    .mobile-build-card {
        height: 150px !important;
        border-radius: 16px !important;
    }


    .mobile-image-label {
        left: 6px !important;
        right: 6px !important;
        bottom: 6px !important;

        min-height: 34px !important;

        padding: 6px 8px !important;

        border-radius: 9px !important;
    }


    .mobile-image-label i {
        width: 19px !important;
        height: 19px !important;

        font-size: 12px !important;
    }


    .mobile-image-label span {
        font-size: 10px !important;
    }

}

@media (max-width: 767px) {

    /* ==========================================
       MOBILE IMAGE GRID
    ========================================== */

    .hero-right {
        width: 100% !important;
        height: auto !important;

        display: grid !important;

        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 205px 150px !important;

        gap: 10px !important;

        box-sizing: border-box !important;
    }


    /* ==========================================
       CORPORATE TOWER - FULL WIDTH
    ========================================== */

    .hero-image-main {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;

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

        margin: 0 !important;

        border-radius: 20px !important;
        overflow: hidden !important;
    }

    .hero-image-main img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;

        display: block !important;
    }


    /* ==========================================
       SECOND ROW
       BOTH CARDS EXACTLY EQUAL
    ========================================== */

    .hero-image-learning {
        grid-column: 1 !important;
        grid-row: 2 !important;

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

        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;

        border-radius: 20px !important;
        overflow: hidden !important;

        position: relative !important;
    }


    .hero-image-learning img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;

        display: block !important;
    }


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

    .small-images {
        grid-column: 2 !important;
        grid-row: 2 !important;

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

        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;

        display: block !important;

        overflow: visible !important;
    }


    /* Hide desktop images */
    .small-images > img {
        display: none !important;
    }


    /* ==========================================
       BUILD YOUR FUTURE
    ========================================== */

    .mobile-build-card {
        display: block !important;

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

        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;

        position: relative !important;

        border-radius: 20px !important;
        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    .mobile-build-card img {
        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;
        object-position: center !important;
    }


    /* ==========================================
       LABELS
    ========================================== */

    .mobile-image-label {
        position: absolute !important;

        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;

        height: 40px !important;
        min-height: 40px !important;

        padding: 6px 10px !important;

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

        gap: 7px !important;

        background: rgba(255,255,255,.96) !important;

        border-radius: 11px !important;

        box-sizing: border-box !important;

        z-index: 10 !important;
    }

    .mobile-image-label i {
        width: 22px !important;
        height: 22px !important;

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

        flex-shrink: 0 !important;

        color: #1769e0 !important;

        font-size: 14px !important;
    }

    .mobile-image-label span {
        margin: 0 !important;

        color: #083C7C !important;

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

        line-height: 1 !important;

        white-space: nowrap !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

}






















/* =========================================================
   FOUR PROGRAMME PILLARS
   HEADING MATCHES THE "ABOUT ODLC" SECTION
   (label + heading colours, fonts, weights, spacing)
   ========================================================= */

.programme-pillars-label {
    display: inline-flex !important;

    color: #0d6efd !important;

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

    letter-spacing: 1px !important;

    margin-bottom: 18px !important;
}


/* HEADING */

.programme-pillars-header h2 {
    color: #0b1f4d !important;

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

    letter-spacing: -1.2px !important;

    margin: 0 0 22px 0 !important;
}


/* DESCRIPTION */

.programme-pillars-header p {
    color: #667085 !important;

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

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

    margin: 0 auto 15px !important;
}


/* =========================================================
   SMALL MOBILE - MATCH ABOUT ODLC
   ========================================================= */

@media (max-width: 575px) {

    .programme-pillars-label {
        font-size: 11px !important;
    }

    .programme-pillars-header h2 {
        font-size: 29px !important;
        line-height: 1.18 !important;
    }

    .programme-pillars-header p {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

}


/* =========================================================
   FOUR PROGRAMME PILLARS
   GRADIENT HIGHLIGHT + CARD FONT COLOURS
   (gradient matches "ABOUT ODLC" .section-title span;
    card text matches the other card sections on this page)
   ========================================================= */

/* GRADIENT ON THE HIGHLIGHTED WORD */

.programme-pillars-header h2 span {
    background: linear-gradient(90deg, #6d4dff, #4bb8ff) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    color: transparent !important;
}


/* =========================================================
   CARD FONT COLOURS
   ========================================================= */

/* CARD TITLE - matches About ODLC heading + quality cards */

.pillar-content h3 {
    color: #0b1f4d !important;
}

/* CARD BODY - matches About ODLC description */

.pillar-content p {
    color: #667085 !important;
}

/* CARD ACTION LABEL */

.pillar-action {
    color: #0b1f4d !important;
}


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

@media (max-width: 575px) {

    .pillar-content h3 {
        color: #0b1f4d !important;
    }

    .pillar-content p {
        color: #667085 !important;
    }

    .pillar-action {
        color: #0b1f4d !important;
    }

}


/* =========================================================
   FOUR PROGRAMME PILLARS
   SUB-ITEM LINKS (SKILL & VOCATIONAL / ECCE)
   Cards 03 + 04 only - cards 01 + 02 keep the plain <p>
   ========================================================= */

/* WRAPPER - wraps onto new lines on narrow cards */

.pillar-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 6px;

    margin-top: 2px;
}


/* LINK CHIP */

.pillar-link {
    display: inline-block;

    padding: 5px 11px;

    background: #eef5fc;
    border: 1px solid #d6e5f3;
    border-radius: 999px;

    color: #0b1f4d;

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

    text-decoration: none;

    white-space: nowrap;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.pillar-link:hover,
.pillar-link:focus-visible {
    background: #0b1f4d;
    border-color: #0b1f4d;
    color: #ffffff;
}

.pillar-link:focus-visible {
    outline: 2px solid #0b1f4d;
    outline-offset: 2px;
}


/* STOP THE CARD CLICK FROM SWALLOWING THE LINK */

.pillar-link {
    position: relative;
    z-index: 2;
}


/* ACTION ROW IS NOW A LINK ON CARDS 03 + 04 */

a.pillar-action {
    text-decoration: none;
}

a.pillar-action:hover {
    color: #0b1f4d;
}


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

@media (max-width: 991px) {

    .pillar-link {
        padding: 5px 10px;
        font-size: 12px;
    }

}

@media (max-width: 767px) {

    .pillar-links {
        gap: 6px;
    }

    .pillar-link {
        padding: 5px 11px;
        font-size: 12px;
    }

}

@media (max-width: 480px) {

    .pillar-links {
        gap: 5px;
    }

    .pillar-link {
        padding: 4px 10px;
        font-size: 11px;
    }

}

@media (max-width: 360px) {

    .pillar-links {
        gap: 5px;
    }

    .pillar-link {
        padding: 4px 8px;
        font-size: 11px;
    }

}


/* =========================================================
   FOUR PROGRAMME PILLARS
   FIX - global-typography.css forces 15px on EVERY <a>,
   so these need !important to hold their intended size
   ========================================================= */

/* CHIP - keep 12px, not the global 15px */

.pillar-link {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
}

/* ACTION ROW - match cards 01 + 02 (12px, not 15px) */

a.pillar-action {
    font-size: 12px !important;
}


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

@media (max-width: 480px) {

    .pillar-link {
        font-size: 11px !important;
    }

}

@media (max-width: 360px) {

    .pillar-link {
        font-size: 11px !important;
    }

}


/* =========================================================
   FOUR PROGRAMME PILLARS
   ALL FOUR CARDS IDENTICAL
   1) sub-items on cards 03 + 04 render as the same inline
      text as cards 01 + 02 (only hover/focus differs)
   2) heading always starts at the same height in every card
   ========================================================= */

/* =========================================================
   1. SUB-ITEM LINKS  (neutralise the earlier chip styling)
   ========================================================= */

.pillar-link {
    display: inline !important;

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

    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;

    color: inherit !important;

    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;

    text-decoration: none !important;

    white-space: normal !important;

    position: static !important;
    z-index: auto !important;

    transition: color .2s ease;
}

.pillar-link:hover,
.pillar-link:focus-visible {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;

    color: #0d6efd !important;

    text-decoration: underline;
}

.pillar-link:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}


/* =========================================================
   2. HEADING ALWAYS AT THE SAME HEIGHT
   flex-start + auto margin on the action row means the
   heading no longer drifts down when a title is shorter
   ========================================================= */

.programme-pillar-card {
    justify-content: flex-start !important;
}

.pillar-content {
    margin-top: 24px !important;
}

.pillar-action {
    margin-top: auto !important;

    padding-top: 17px !important;
}


/* =========================================================
   RESPONSIVE - text size is inherited from the <p>, so it
   already scales with cards 01 + 02 at every breakpoint
   ========================================================= */

@media (max-width: 480px) {

    .pillar-content {
        margin-top: 20px !important;
    }

}

@media (max-width: 360px) {

    .pillar-content {
        margin-top: 18px !important;
    }

}


/* =========================================================
   FOUR PROGRAMME PILLARS - CARD RESTYLE
   Institutional / professional pass:
     - title 30px -> 22px (global-typography was forcing 30px,
       the original CSS intent was 22px)
     - top accent bar always visible (was scaleX(0) until hover)
     - one hairline resting shadow (was completely flat)
     - one navy + one accent blue instead of four blues
     - readable number, consistent corner radii
   ========================================================= */

/* =========================================================
   1. CARD SHELL
   ========================================================= */

.programme-pillar-card {
    padding: 28px 26px 24px !important;

    background: #ffffff !important;

    border: 1px solid #dce7f2 !important;
    border-radius: 14px !important;

    box-shadow: 0 1px 2px rgba(8, 60, 124, .05) !important;

    overflow: hidden !important;
}


/* =========================================================
   2. TOP ACCENT BAR - visible at rest, gradient not flat
   ========================================================= */

.programme-pillar-card::before {
    height: 3px !important;

    background: linear-gradient(90deg, #083C7C, #1769e0) !important;

    transform: scaleX(1) !important;
    transform-origin: left center !important;

    transition: background .35s ease !important;
}


/* =========================================================
   3. CARD NUMBER - was #b6c9dd on white (too faint)
   ========================================================= */

.pillar-number {
    color: #6f869e !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.3px !important;

    transition: color .3s ease !important;
}


/* =========================================================
   4. ICON CHIP
   ========================================================= */

.pillar-icon {
    width: 46px !important;
    height: 46px !important;

    background: #eef5fc !important;
    border: 1px solid #d9e7f5 !important;
    border-radius: 10px !important;

    color: #083C7C !important;
    font-size: 20px !important;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease !important;
}


/* =========================================================
   5. CARD TITLE - back to the 22px the CSS originally
   intended, instead of the 30px global-typography forces
   ========================================================= */

.pillar-content h3 {
    margin: 0 0 8px !important;

    color: #0b1f4d !important;

    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    letter-spacing: -.3px !important;

    transition: color .3s ease !important;
}


/* =========================================================
   6. SUB ITEMS
   ========================================================= */

.pillar-content p {
    color: #667085 !important;
}

.pillar-content p span {
    color: #a8bcd1 !important;
}


/* =========================================================
   7. ACTION ROW
   ========================================================= */

.pillar-action {
    margin-top: auto !important;
    padding-top: 18px !important;

    border-top: 1px solid #edf2f7 !important;

    color: #0b1f4d !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
}

.pillar-action i {
    width: 34px !important;
    height: 34px !important;

    background: #edf5fc !important;
    border-radius: 50% !important;

    color: #083C7C !important;
    font-size: 15px !important;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease !important;
}


/* =========================================================
   8. HOVER - restrained, and only on real pointers so
   touch screens never stick in a hover state
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .programme-pillar-card:hover {
        transform: translateY(-4px) !important;

        border-color: #a9c4e0 !important;

        box-shadow: 0 12px 28px rgba(8, 60, 124, .10) !important;
    }

    .programme-pillar-card:hover::before {
        background: linear-gradient(90deg, #083C7C, #1769e0, #6d4dff) !important;
    }

    .programme-pillar-card:hover .pillar-number {
        color: #1769e0 !important;
    }

    .programme-pillar-card:hover .pillar-icon {
        background: #083C7C !important;
        border-color: #083C7C !important;

        color: #ffffff !important;
        transform: translateY(-2px) !important;
    }

    .programme-pillar-card:hover .pillar-content h3 {
        color: #1769e0 !important;
    }

    .programme-pillar-card:hover .pillar-action i {
        background: #083C7C !important;
        color: #ffffff !important;

        transform: translate(2px, -2px) !important;
    }

    .pillar-link:hover,
    .pillar-link:focus-visible {
        color: #1769e0 !important;
        text-decoration: underline;
    }

}


/* =========================================================
   9. KEYBOARD FOCUS
   ========================================================= */

.programme-pillar-card:focus-visible {
    outline: 3px solid #1769e0 !important;
    outline-offset: 3px !important;
}


/* =========================================================
   10. RESPONSIVE
   ========================================================= */

@media (max-width: 1199px) {
    .programme-pillar-card { padding: 24px 22px 22px !important; }
}

@media (max-width: 991px) {
    .programme-pillar-card { padding: 22px 20px 20px !important; }
}

@media (max-width: 767px) {
    .programme-pillar-card { padding: 20px 18px 18px !important; }
    .pillar-content h3 { font-size: 20px !important; }
    .pillar-icon { width: 42px !important; height: 42px !important; font-size: 18px !important; }
}

@media (max-width: 480px) {
    .programme-pillar-card { padding: 18px 16px 16px !important; }
    .pillar-content h3 { font-size: 19px !important; }
    .pillar-number { font-size: 11px !important; }
}

@media (max-width: 360px) {
    .programme-pillar-card { padding: 16px 14px 14px !important; }
    .pillar-content h3 { font-size: 18px !important; }
    .pillar-icon { width: 40px !important; height: 40px !important; }
}


/* =========================================================
   11. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .programme-pillar-card,
    .programme-pillar-card::before,
    .pillar-icon,
    .pillar-action i,
    .pillar-number,
    .pillar-content h3 {
        transition: none !important;
    }

    .programme-pillar-card:hover,
    .programme-pillar-card:hover .pillar-icon,
    .programme-pillar-card:hover .pillar-action i {
        transform: none !important;
    }

}


/* =========================================================
   ANNOUNCEMENT BAR (news-wrapper) - MOBILE
   Desktop keeps the navy / red / white three-block layout.
   On mobile the blocks are auto-width so nothing overflows,
   the 36px skewed overhang is replaced by a clean edge,
   and the ticker gets a soft left fade so text emerges
   instead of being chopped.
   ========================================================= */

@media (max-width: 768px) {

    .news-wrapper {
        height: 52px !important;

        border-top-color: #e6eaf0 !important;
        border-bottom-color: #e6eaf0 !important;
    }

    /* SOCIAL - size to content instead of a fixed 90px */

    .social-area {
        width: auto !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;

        padding: 0 16px !important;
        gap: 14px !important;
    }

    .social-area a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 17px !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
    }

    /* drop the skewed overhang, it overlapped the red block */

    .social-area::after {
        display: none !important;
    }

    /* LABEL - auto width, keep the words for context */

    .news-label {
        width: auto !important;
        flex: 0 0 auto !important;

        padding: 0 14px 0 16px !important;
        gap: 7px !important;

        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 1.2px !important;

        clip-path: none !important;
    }

    .news-label i {
        margin-right: 0 !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }

    .news-label span {
        display: inline !important;
    }

    /* TICKER - soft left fade so text emerges cleanly */

    .ticker {
        min-width: 0 !important;
        padding-left: 16px !important;

        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px) !important;
        mask-image: linear-gradient(90deg, transparent 0, #000 20px) !important;
    }

    .ticker-track span {
        font-size: 13.5px !important;
        padding-right: 56px !important;
    }

}


@media (max-width: 576px) {

    .news-wrapper {
        height: 48px !important;
    }

    .social-area {
        padding: 0 13px !important;
        gap: 12px !important;
    }

    .social-area a {
        font-size: 16px !important;
    }

    .news-label {
        padding: 0 11px 0 13px !important;

        font-size: 11px !important;
        letter-spacing: 1px !important;
    }

    .news-label i {
        font-size: 12px !important;
    }

    .ticker {
        padding-left: 13px !important;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px) !important;
        mask-image: linear-gradient(90deg, transparent 0, #000 16px) !important;
    }

    .ticker-track span {
        font-size: 13px !important;
        padding-right: 48px !important;
    }
}


@media (max-width: 480px) {

    .news-wrapper {
        height: 46px !important;
    }

    .social-area {
        padding: 0 12px !important;
        gap: 11px !important;
    }

    .social-area a {
        font-size: 15px !important;
    }

    /* not enough width for the words - keep just the megaphone */

    .news-label {
        padding: 0 10px 0 12px !important;
    }

    .news-label span {
        display: none !important;
    }

    .news-label i {
        font-size: 14px !important;
    }

    .ticker-track span {
        font-size: 12.5px !important;
        padding-right: 44px !important;
    }

}


@media (max-width: 360px) {

    .news-wrapper {
        height: 44px !important;
    }

    .social-area {
        padding: 0 10px !important;
        gap: 10px !important;
    }

    .social-area a {
        font-size: 14px !important;
    }

    .news-label i {
        font-size: 13px !important;
    }

    .ticker-track span {
        font-size: 12px !important;
        padding-right: 38px !important;
    }

}


/* =========================================================
   ABOUT ODLC - BUTTON MIRRORS THE HEADING + PARAGRAPH
   AT EVERY WIDTH
   Above 767px the heading and paragraph are left aligned, so
   the button sits on the same left edge. At 767px and below
   they are centred, so the button centres with them - both
   the button box and the label/arrow inside it.

   Why the old rules did not work:
   1) the button is a flex item in a COLUMN box, so an auto
      margin distributes cross-axis space instead of
      centring. margin-right: auto was absorbing all 495px
      of free space and pinning the button to the left at
      every width.
   2) on mobile the button becomes width:100% and kept
      justify-content: space-between, which pushed the label
      hard left and the arrow hard right while the heading
      above it was centred.
   ========================================================= */

.who-we-are-content .hero-buttons {
    width: 100% !important;

    display: flex !important;

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

    margin: 10px 0 0 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}


/* ---- ABOVE 767px : heading + paragraph start from the left,
        so the button starts from that same left edge ---- */

.who-we-are-content .hero-buttons .hero-btn {
    align-self: flex-start !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ---- 767px AND BELOW : heading + paragraph are centred,
        so the button centres with them ---- */

@media (max-width: 767px) {

    .who-we-are-content .hero-buttons .hero-btn {
        align-self: center !important;

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

        justify-content: center !important;
        gap: 10px !important;

        text-align: center !important;
    }

}


/* ================================================================
   ODLC LEARNING ECOSYSTEM  —  FAN LAYOUT
   Appended to index.css. Nothing above this point is modified.

   The two original spin animations are left exactly as they were:
       .outer-circle  ->  rotateClockwise 18s linear infinite !important
       .inner-circle  ->  rotateAnti     12s linear infinite !important
   Both keyframes carry translate(-50%,-50%), so the rings are still
   centred by left:50% / top:50% with no negative margin.
   ================================================================ */


/* ---------------------------------------------------------------
   1.  SECTION SHELL
---------------------------------------------------------------- */

.who-we-are.eco-section {
    position: relative;

    width: 100%;
    padding: 78px 0 82px !important;

    background: #f7faff;
    overflow: hidden;
}

.who-we-are.eco-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(620px 420px at 24% 50%, rgba(52, 116, 255, .10), transparent 64%),
        radial-gradient(460px 300px at 92% 8%, rgba(108, 99, 255, .07), transparent 60%);

    pointer-events: none;
    z-index: 0;
}

/* lift the heading above the background wash */
.who-we-are.eco-section > .row {
    position: relative;
    z-index: 1;
}


/* ---------------------------------------------------------------
   2.  CONTAINER  —  92% / 1380px  (94 / 90 / 92 further down)
---------------------------------------------------------------- */

.who-we-are .eco-wrap {
    position: relative;
    z-index: 1;

    width: 92%;
    max-width: 1380px;

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

    text-align: left;
}


/* ---------------------------------------------------------------
   3.  FAN GRID  —  circle left, four rows right
---------------------------------------------------------------- */

.who-we-are .eco-fan {
    position: relative;

    display: grid;
    grid-template-columns: 430px 1fr;
    align-items: center;
    gap: 0 92px;
}

.who-we-are .eco-waves {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
    z-index: 1;
}

.who-we-are .eco-rows {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* ---------------------------------------------------------------
   4.  THE CIRCLE
---------------------------------------------------------------- */

.who-we-are .eco-circle {
    position: relative !important;

    width: 430px !important;
    max-width: 430px !important;
    min-width: 0 !important;

    height: 430px !important;
    min-height: 0 !important;

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

    overflow: visible !important;

    z-index: 2;
}

/* soft ambient glow so the circle is not floating on flat white */
.who-we-are .eco-glow {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 430px;
    height: 430px;
    margin: -215px 0 0 -215px;

    border-radius: 50%;

    background: radial-gradient(circle,
        rgba(52, 116, 255, .20) 0%,
        rgba(108, 99, 255, .11) 45%,
        transparent 70%);
}

/* ---- rotating outer ring : graduated tick marks ---- */

.who-we-are .outer-circle {
    width: 320px !important;
    height: 320px !important;

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

    border: 0 !important;
    border-radius: 50% !important;

    /* major tick every 30deg, minor tick every 6deg,
       masked to a thin band so only the rim shows */
    background:
        repeating-conic-gradient(rgba(23, 105, 224, .90) 0deg 0.9deg, transparent 0.9deg 30deg),
        repeating-conic-gradient(rgba(70, 145, 255, .42) 0deg 0.5deg, transparent 0.5deg 6deg) !important;

    -webkit-mask: radial-gradient(circle closest-side, transparent 0 93.5%, #000 94% 100%, transparent 100%) !important;
    mask: radial-gradient(circle closest-side, transparent 0 93.5%, #000 94% 100%, transparent 100%) !important;
}

/* the two coloured dots that used to sit on this ring */
.who-we-are .outer-circle::before,
.who-we-are .outer-circle::after {
    content: none !important;
}

/* ---- rotating inner ring ---- */

.who-we-are .inner-circle {
    width: 244px !important;
    height: 244px !important;

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

    border: 6px solid transparent !important;

    background:
        linear-gradient(#f7faff, #f7faff) padding-box,
        linear-gradient(120deg, #6d4dff, #3474ff, #4bb8ff) border-box !important;
}

.who-we-are .inner-circle::before {
    content: none !important;
}

/* single marker on the inner ring, hidden on small mobile */
.who-we-are .eco-ring-dot {
    position: absolute;

    width: 10px;
    height: 10px;

    left: 50%;
    top: 50%;
    margin: -5px 0 0 -5px;

    transform: rotate(90deg) translateY(-119px);

    border-radius: 50%;
    background: #4bb8ff;

    box-shadow: 0 0 12px rgba(75, 184, 255, .9);
}

/* ---- gradient centre hub ---- */

.who-we-are .center-circle {
    width: 186px !important;
    height: 186px !important;

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

    background: linear-gradient(145deg, #0a2f63 0%, #083c7c 48%, #1769e0 100%) !important;

    padding: 0 18px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 16px 38px rgba(8, 60, 124, .30) !important;

    z-index: 3;
}

.who-we-are .center-circle h3 {
    margin: 0 0 7px !important;

    color: #ffffff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .6px !important;
}

.who-we-are .center-circle h3 b {
    font-weight: 800 !important;
}

.who-we-are .center-circle a {
    display: block !important;

    width: 100% !important;
    max-width: 150px !important;

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

    color: rgba(255, 255, 255, .74) !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    letter-spacing: .9px !important;

    text-transform: uppercase;
    text-decoration: none !important;
}

/* ---- static anchor dots where each wave leaves the ring ---- */

.who-we-are .eco-anchor {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;

    border-radius: 50%;
    background: currentColor;

    box-shadow: 0 0 0 3px #f7faff, 0 0 10px currentColor;

    z-index: 4;
}

.who-we-are .eco-anchor.a1 { transform: rotate(38deg)  translateY(-160px); color: #6C63FF; }
.who-we-are .eco-anchor.a2 { transform: rotate(74deg)  translateY(-160px); color: #3474FF; }
.who-we-are .eco-anchor.a3 { transform: rotate(106deg) translateY(-160px); color: #16A6C7; }
.who-we-are .eco-anchor.a4 { transform: rotate(142deg) translateY(-160px); color: #6C63FF; }


/* ---------------------------------------------------------------
   5.  CARD ROWS
---------------------------------------------------------------- */

.who-we-are .c1 { --c: #6C63FF; --c-soft: #F5F3FF; --c2: #8E80FF; }
.who-we-are .c2 { --c: #3474FF; --c-soft: #EEF4FF; --c2: #5E95FF; }
.who-we-are .c3 { --c: #16A6C7; --c-soft: #E8F8FB; --c2: #3AC0DA; }
.who-we-are .c4 { --c: #6C63FF; --c-soft: #F5F3FF; --c2: #8E80FF; }

.who-we-are .eco-row {
    position: relative;
    z-index: 2;

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

/* icon disc : solid gradient fill + white icon.
   No border and no outer halo - the old double ring read as heavy. */

.who-we-are .eco-ficon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;

    background: linear-gradient(135deg, var(--c) 0%, var(--c2) 100%);
    border-radius: 50%;

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

    color: #ffffff;
    font-size: 25px;

    box-shadow: 0 6px 18px var(--c-soft), 0 2px 6px rgba(8, 60, 124, .10);
}

.who-we-are .eco-ficon svg {
    width: 1em;
    height: 1em;
    display: block;
}

.who-we-are .eco-fcard {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 20px;

    margin-left: 14px;
    padding: 17px 24px;

    background: var(--c-soft);
    border-radius: 18px;

    box-shadow: 0 4px 16px rgba(8, 60, 124, .05);
}

.who-we-are .eco-fcard-text {
    flex: 1;
    min-width: 0;
}

.who-we-are .eco-fcard h3 {
    margin: 0 0 6px !important;

    color: var(--c) !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .3px !important;

    text-transform: uppercase;
    text-align: left;
}

.who-we-are .eco-fcard p {
    margin: 0 !important;

    color: #3b4256 !important;

    font-size: 13.5px !important;
    line-height: 1.55 !important;

    text-align: left !important;
}

/* big faint number on the right edge of each card */

.who-we-are .eco-num {
    flex: 0 0 auto;

    padding-left: 20px;
    border-left: 1px solid rgba(11, 31, 77, .10);

    color: var(--c);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;

    opacity: .40;
}


/* ---------------------------------------------------------------
   6.  FOUR QUALITIES
---------------------------------------------------------------- */

.who-we-are .eco-quals {
    margin-top: 44px;
}

.who-we-are .eco-quals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.who-we-are .eco-qual {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 18px 18px 20px;

    background: var(--c-soft);
    border-radius: 16px;

    box-shadow: 0 4px 16px rgba(8, 60, 124, .05);
}

.who-we-are .eco-qual-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    flex: 0 0 46px;

    background: linear-gradient(135deg, var(--c) 0%, var(--c2) 100%);
    border-radius: 50%;

    color: #ffffff;
    font-size: 20px;

    box-shadow: 0 5px 14px var(--c-soft), 0 2px 5px rgba(8, 60, 124, .10);
}

.who-we-are .eco-qual-icon svg {
    width: 1em;
    height: 1em;
    display: block;
}

.who-we-are .eco-qual-body h4 {
    margin: 0 0 5px !important;

    color: var(--c) !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .3px !important;

    text-transform: uppercase;
    text-align: left;
}

.who-we-are .eco-qual-body p {
    margin: 0 !important;

    color: #3b4256 !important;

    font-size: 12.5px !important;
    line-height: 1.5 !important;

    text-align: left !important;
}


/* ---------------------------------------------------------------
   7.  RESPONSIVE
---------------------------------------------------------------- */

/* ---- <= 1199px : 94% ---- */

@media (max-width: 1199px) {

    .who-we-are.eco-section { padding: 68px 0 72px !important; }
    .who-we-are .eco-wrap { width: 94%; }

    .who-we-are .eco-fan {
        grid-template-columns: 340px 1fr;
        gap: 0 48px;
    }

    .who-we-are .eco-circle {
        width: 340px !important;
        max-width: 340px !important;
        height: 340px !important;
    }

    .who-we-are .eco-glow {
        width: 340px;
        height: 340px;
        margin: -170px 0 0 -170px;
    }

    .who-we-are .outer-circle {
        width: 262px !important;
        height: 262px !important;
    }

    .who-we-are .inner-circle {
        width: 198px !important;
        height: 198px !important;
        border-width: 5px !important;
    }

    .who-we-are .center-circle {
        width: 152px !important;
        height: 152px !important;
        padding: 0 14px !important;
    }

    .who-we-are .center-circle h3 {
        margin: 0 0 5px !important;
        font-size: 26px !important;
    }

    .who-we-are .center-circle a {
        max-width: 120px !important;
        font-size: 8px !important;
    }

    .who-we-are .eco-ring-dot { transform: rotate(90deg) translateY(-96px); }

    .who-we-are .eco-anchor.a1 { transform: rotate(38deg)  translateY(-131px); }
    .who-we-are .eco-anchor.a2 { transform: rotate(74deg)  translateY(-131px); }
    .who-we-are .eco-anchor.a3 { transform: rotate(106deg) translateY(-131px); }
    .who-we-are .eco-anchor.a4 { transform: rotate(142deg) translateY(-131px); }

    .who-we-are .eco-fcard { padding: 15px 20px; gap: 16px; }

    .who-we-are .eco-ficon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        font-size: 22px;
    }

    .who-we-are .eco-fcard h3 { font-size: 15px !important; }
    .who-we-are .eco-fcard p { font-size: 12.5px !important; }

    .who-we-are .eco-num {
        font-size: 26px;
        padding-left: 16px;
    }

    .who-we-are .eco-quals-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ---- <= 991px : stacked, circle on top, no connector lines ---- */

@media (max-width: 991px) {

    .who-we-are .eco-fan {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .who-we-are .eco-circle { margin: 0 auto !important; }

    .who-we-are .eco-waves,
    .who-we-are .eco-anchor {
        display: none !important;
    }
}


/* ---- <= 767px : 90% ---- */

@media (max-width: 767px) {

    .who-we-are.eco-section { padding: 56px 0 60px !important; }
    .who-we-are .eco-wrap { width: 90%; }

    .who-we-are .eco-circle {
        width: 280px !important;
        max-width: 280px !important;
        height: 280px !important;
    }

    .who-we-are .eco-glow {
        width: 280px;
        height: 280px;
        margin: -140px 0 0 -140px;
    }

    .who-we-are .outer-circle {
        width: 216px !important;
        height: 216px !important;
    }

    .who-we-are .inner-circle {
        width: 164px !important;
        height: 164px !important;
        border-width: 5px !important;
    }

    .who-we-are .center-circle {
        width: 126px !important;
        height: 126px !important;
        padding: 0 12px !important;
    }

    .who-we-are .center-circle h3 {
        margin: 0 0 5px !important;
        font-size: 22px !important;
    }

    .who-we-are .center-circle a {
        max-width: 104px !important;
        font-size: 8px !important;
    }

    .who-we-are .eco-ring-dot { transform: rotate(90deg) translateY(-79px); }

    .who-we-are .eco-quals { margin-top: 36px; }
    .who-we-are .eco-quals-grid { grid-template-columns: 1fr; gap: 12px; }
}


/* ---- <= 575px : drop the hub sub-line ---- */

@media (max-width: 575px) {

    .who-we-are .center-circle a { display: none !important; }
}


/* ---- <= 480px : 92% ---- */

@media (max-width: 480px) {

    .who-we-are.eco-section { padding: 48px 0 52px !important; }
    .who-we-are .eco-wrap { width: 92%; }

    .who-we-are .eco-circle {
        width: 240px !important;
        max-width: 240px !important;
        height: 240px !important;
    }

    .who-we-are .eco-glow {
        width: 240px;
        height: 240px;
        margin: -120px 0 0 -120px;
    }

    .who-we-are .outer-circle {
        width: 188px !important;
        height: 188px !important;
    }

    .who-we-are .inner-circle {
        width: 144px !important;
        height: 144px !important;
    }

    .who-we-are .center-circle {
        width: 110px !important;
        height: 110px !important;
        padding: 0 10px !important;
    }

    .who-we-are .center-circle h3 {
        margin: 0 !important;
        font-size: 19px !important;
    }

    /* keep the mobile circle clean : no spinning dot */
    .who-we-are .eco-ring-dot { display: none !important; }

    .who-we-are .eco-row { gap: 14px; }

    .who-we-are .eco-fcard {
        margin-left: 10px;
        padding: 14px 16px;
        gap: 14px;
    }

    .who-we-are .eco-ficon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        font-size: 19px;
    }

    .who-we-are .eco-fcard h3 { font-size: 14px !important; }
    .who-we-are .eco-fcard p { font-size: 12.5px !important; }

    .who-we-are .eco-num {
        font-size: 22px;
        padding-left: 13px;
    }

    .who-we-are .eco-qual { padding: 16px 16px 18px; }

    .who-we-are .eco-qual-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 17px;
    }
}


/* ---------------------------------------------------------------
   8.  REDUCED MOTION
   Paused, not cancelled - the spin keyframes supply the
   translate(-50%,-50%) that centres the rings, so switching the
   animation off entirely would throw them out of position.
---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .who-we-are .outer-circle,
    .who-we-are .inner-circle {
        animation-play-state: paused !important;
    }
}


/* ================================================================
   WHY LEARNERS CHOOSE ODLC  —  BALANCED TWO-COLUMN LAYOUT
   Appended to index.css. Nothing above this point is modified.

   Colours, font sizes and font colours are the ones the live
   section already used, measured from the rendered page:
       tag      11px / 700 / #0D6EFD / ls 1px / uppercase
       heading  35px / 800 / #0B1F4D / lh 1.25 / ls -1.2px
       lede     16px / #666
       card h6  16px / 700 / #0F2148
       card p   16px / #666
       icon     40px circle, #EEF4FF on #0A56D8
       button   #0A56D8 / white / 15px / 700 / r10

   The tag size and the heading weight are matched to the
   sections above (About ODLC, Four Programme Pillars).
   `!important` is used where global-typography.css would
   otherwise force its own sizes.
   ================================================================ */


/* ---------------------------------------------------------------
   1.  CONTAINER  —  92% / 1380px, same as the sections above

   The live section carried `padding: 48px 80px`, which made its
   container 160px narrower per side than every other section.
   The vertical padding stays with .py-5; only the horizontal
   padding is removed.
---------------------------------------------------------------- */

.choose-odlc {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.choose-odlc .odlc-why-wrap {
    width: 92% !important;
    max-width: 1380px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ---------------------------------------------------------------
   2.  HEADING
---------------------------------------------------------------- */

.choose-odlc .odlc-why-head {
    margin-bottom: 44px;
}

.choose-odlc .odlc-why-head .section-tag {
    display: flex !important;
    align-items: center;
    gap: 10px;

    margin: 0 0 18px !important;

    color: #0D6EFD !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;

    text-transform: uppercase;
    text-align: left !important;
}

/* replaces the old <i class="bi bi-dash-lg"> glyph, which rendered
   blank on this site because no icon font is loaded */
.choose-odlc .odlc-why-head .section-tag .dash {
    width: 15px;
    height: 2px;
    display: block;
    flex: 0 0 15px;
    background: #0D6EFD;
}

.choose-odlc .odlc-why-head .main-heading {
    margin: 0 0 22px !important;
    max-width: 950px !important;

    color: #0B1F4D !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 35px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -1.2px !important;

    text-align: left !important;
}

/* the same gradient the sections above use on their accent span */
.choose-odlc .odlc-why-head .main-heading span {
    background: linear-gradient(90deg, #6d4dff, #4bb8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #6d4dff;
}

.choose-odlc .odlc-why-head .yellow-line {
    width: 70px !important;
    height: 4px !important;
    margin: 0 0 30px !important;
    border-radius: 50px;
    background: #FDB813 !important;
}

.choose-odlc .odlc-why-head .section-desc {
    max-width: 560px !important;
    margin: 0 0 30px !important;

    color: #666 !important;

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

    text-align: left !important;
}


/* ---------------------------------------------------------------
   3.  TWO EQUAL COLUMNS
---------------------------------------------------------------- */

.choose-odlc .odlc-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* equal */
    align-items: center;
    gap: 0 54px;
}


/* ---------------------------------------------------------------
   4.  THE SIX CARDS  —  icon pinned to the START of each card
---------------------------------------------------------------- */

.choose-odlc .odlc-why-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.choose-odlc .odlc-why-card {
    display: grid;

    /* icon at the very start, text flows after it */
    grid-template-columns: 40px 1fr;
    align-items: start;
    column-gap: 14px;

    padding: 16px 18px 17px;

    background: #ffffff;
    border: 1px solid #E4EDFB;
    border-radius: 14px;

    box-shadow: 0 4px 14px rgba(10, 56, 216, .05);

    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.choose-odlc .odlc-why-card:hover {
    transform: translateY(-3px);
    border-color: #BFD6FA;
    box-shadow: 0 10px 24px rgba(10, 56, 216, .10);
}

/* the existing icon disc, unchanged colours */
.choose-odlc .odlc-why-ico {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    width: 40px;
    height: 40px;
    padding: 10px;

    background: #EEF4FF;
    border-radius: 50%;

    color: #0A56D8;
    font-size: 18px;
}

.choose-odlc .odlc-why-ico svg {
    width: 20px;
    height: 20px;
    display: block;
}

.choose-odlc .odlc-why-txt {
    padding-top: 1px;
    min-width: 0;
}

.choose-odlc .odlc-why-txt h6 {
    margin: 0 !important;

    color: #0F2148 !important;

    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    text-align: left !important;
}

.choose-odlc .odlc-why-txt p {
    margin: 2px 0 0 !important;

    color: #666 !important;

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

    text-align: left !important;
}


/* ---------------------------------------------------------------
   5.  BUTTON  —  centred under the cards at every width
---------------------------------------------------------------- */

.choose-odlc .contact-btn {
    /* inline-flex cannot be centred with auto margins, so this is
       a fit-content flex box */
    display: flex !important;
    width: fit-content;

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

    margin: 30px auto 0 !important;
    padding: 0 20px !important;
    min-height: 54px;

    background: #0A56D8 !important;
    border-radius: 10px;

    color: #ffffff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none;
}


/* ---------------------------------------------------------------
   6.  THE PHOTO  —  natural 3:2, motion placed around it
---------------------------------------------------------------- */

.choose-odlc .odlc-why-shot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* frame and chips share one box, so the chips stay attached to the
   photo at every width */
.choose-odlc .odlc-why-shot-inner {
    position: relative;
    width: 100%;
}

.choose-odlc .odlc-why-shot-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 116%;
    height: 132%;
    margin: -66% 0 0 -58%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(77, 184, 255, .22) 0%,
        rgba(109, 77, 255, .12) 46%,
        transparent 72%);
    animation: odlcWhyBreathe 7s ease-in-out infinite;
}

@keyframes odlcWhyBreathe {
    0%, 100% { opacity: .75; }
    50%      { opacity: 1; }
}

/* brand gradient edge, same photo inside */
.choose-odlc .odlc-why-shot-frame {
    position: relative;
    z-index: 1;

    width: 100%;
    aspect-ratio: 3 / 2;

    padding: 3px;
    border-radius: 18px;

    background: linear-gradient(90deg, #6d4dff, #4bb8ff);

    box-shadow: 0 18px 44px rgba(8, 60, 124, .18);

    /* drift on the independent `translate` property so it never
       fights the layout */
    animation: odlcWhyDrift 8s ease-in-out infinite;
}

@keyframes odlcWhyDrift {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -8px; }
}

.choose-odlc .odlc-why-shot-frame img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;

    /* the png is a transparent cutout - this lavender is the light
       wash the section background uses, so the photo sits on the
       page instead of on a white card */
    background: #E8EEFC;
    border-radius: 15px;
}

/* slow highlight sweeping the gradient edge */
.choose-odlc .odlc-why-shot-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    pointer-events: none;

    background: linear-gradient(115deg,
        transparent 32%,
        rgba(255, 255, 255, .55) 48%,
        transparent 62%);

    background-size: 260% 100%;

    animation: odlcWhySweep 6.5s linear infinite;
}

@keyframes odlcWhySweep {
    0%   { background-position: 190% 0; }
    100% { background-position: -90% 0; }
}

/* two chips, upright, gently drifting */
.choose-odlc .odlc-why-chip {
    position: absolute;
    z-index: 2;

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

    padding: 9px 15px 9px 11px;

    background: #ffffff;
    border-radius: 999px;

    box-shadow: 0 8px 20px rgba(8, 60, 124, .16);

    color: #0F2148;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap;

    animation: odlcWhyDrift 6.5s ease-in-out infinite;
}

.choose-odlc .odlc-why-chip i {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    display: block;
    background: #0A56D8;
}

.choose-odlc .odlc-why-chip.c1 {
    top: 3%;
    right: -4%;
    animation-delay: -1s;
}

.choose-odlc .odlc-why-chip.c2 {
    bottom: 7%;
    left: -5%;
    animation-delay: -3.2s;
}

.choose-odlc .odlc-why-chip.c2 i {
    background: #6d4dff;
}


/* ---------------------------------------------------------------
   7.  RESPONSIVE
---------------------------------------------------------------- */

/* 1200 - 1399 : give the card column a little more room,
   otherwise the six cards get squeezed at 1366 and below */

@media (max-width: 1399px) {

    .choose-odlc .odlc-why-grid {
        grid-template-columns: 1.1fr 1fr;
        gap: 0 40px;
    }

    .choose-odlc .odlc-why-card {
        grid-template-columns: 36px 1fr;
        column-gap: 12px;
        padding: 14px 15px 15px;
    }

    .choose-odlc .odlc-why-ico {
        width: 36px;
        height: 36px;
        padding: 9px;
        font-size: 16px;
    }

    .choose-odlc .odlc-why-ico svg {
        width: 18px;
        height: 18px;
    }

    .choose-odlc .odlc-why-shot-inner {
        max-width: 560px;
    }
}

/* below 1200 : stack, photo first, cards get the full width.
   button centring lives in the base .contact-btn rule, so it
   needs no override here. */

@media (max-width: 1199px) {

    .choose-odlc .odlc-why-wrap {
        width: 94% !important;
    }

    .choose-odlc .odlc-why-head .main-heading {
        font-size: 32px !important;
    }

    .choose-odlc .odlc-why-head .section-desc {
        max-width: 620px !important;
    }

    .choose-odlc .odlc-why-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .choose-odlc .odlc-why-shot {
        order: -1;
    }

    /* keep the photo a sensible size once it is full width */
    .choose-odlc .odlc-why-shot-inner {
        max-width: 520px;
        margin: 0 auto;
    }

    .choose-odlc .odlc-why-shot-glow {
        width: 118%;
    }

    /* keep both chips inside the viewport */
    .choose-odlc .odlc-why-chip.c1 { right: 1%; }
    .choose-odlc .odlc-why-chip.c2 { left: 1%; }

    .choose-odlc .odlc-why-chip {
        font-size: 11px !important;
        padding: 7px 12px 7px 9px;
    }
}

@media (max-width: 991px) {

    .choose-odlc .odlc-why-head {
        margin-bottom: 38px;
    }

    .choose-odlc .odlc-why-grid {
        gap: 36px;
    }

    .choose-odlc .odlc-why-head .main-heading {
        font-size: 30px !important;
    }
}

@media (max-width: 767px) {

    .choose-odlc .odlc-why-wrap {
        width: 90% !important;
    }

    .choose-odlc .odlc-why-head {
        margin-bottom: 32px;
    }

    .choose-odlc .odlc-why-head .main-heading {
        font-size: 27px !important;
    }

    .choose-odlc .odlc-why-head .section-desc {
        font-size: 15px !important;
    }

    .choose-odlc .odlc-why-cards {
        gap: 14px;
    }

    .choose-odlc .odlc-why-chip {
        font-size: 10.5px !important;
        padding: 6px 11px 6px 8px;
    }
}

@media (max-width: 620px) {

    .choose-odlc .odlc-why-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {

    .choose-odlc .odlc-why-wrap {
        width: 92% !important;
    }

    .choose-odlc .odlc-why-head .main-heading {
        font-size: 24px !important;
    }

    .choose-odlc .odlc-why-head .section-desc {
        font-size: 14.5px !important;
    }

    .choose-odlc .odlc-why-chip {
        font-size: 9.5px !important;
        padding: 5px 9px 5px 7px;
    }

    .choose-odlc .odlc-why-chip i {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
    }

    .choose-odlc .contact-btn {
        min-height: 48px;
        font-size: 14px !important;
    }
}

/* ---------------------------------------------------------------
   8.  REDUCED MOTION
---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .choose-odlc .odlc-why-shot-glow,
    .choose-odlc .odlc-why-shot-frame,
    .choose-odlc .odlc-why-shot-frame::after,
    .choose-odlc .odlc-why-chip {
        animation: none;
    }

    .choose-odlc .odlc-why-card:hover {
        transform: none;
    }
}


/* ================================================================
   WHY ODLC  —  PHOTO MATCHES THE CARD BLOCK
   1. cards, photo and button are siblings in the same grid, so
      the photo can be told to match the cards' exact height
   2. the dotted background png is replaced by a clean gradient
      of the same light-lavender family
   ================================================================ */

.choose-odlc {

    /* 3.0main.png has a dot grid baked into its lower left.
       These stops are sampled from that same png, so the wash
       is unchanged - only the dots are gone. */
    background:
        radial-gradient(900px 620px at 24% 14%, rgba(248, 248, 253, .90), transparent 62%),
        linear-gradient(160deg, #E3E9FC 0%, #EDF1FC 46%, #E2E8FD 100%) !important;
}

.choose-odlc .odlc-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;      /* was centre */
    gap: 0 54px;
}

/* explicit placement so the photo shares the cards' row */
.choose-odlc .odlc-why-cards {
    grid-column: 1;
    grid-row: 1;
}

.choose-odlc .odlc-why-shot {
    grid-column: 2;
    grid-row: 1;

    /* stretch to the row height, which the cards define */
    align-self: stretch;
    min-height: 0;
}

.choose-odlc .odlc-why-grid .contact-btn {
    grid-column: 1;
    grid-row: 2;
}

/* the frame now fills its box instead of holding a 3:2 ratio */
.choose-odlc .odlc-why-shot-inner {
    position: absolute;
    inset: 0;
}

.choose-odlc .odlc-why-shot-frame {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.choose-odlc .odlc-why-shot-frame img {
    object-fit: cover;
}

.choose-odlc .odlc-why-shot-frame::after {
    border-radius: 18px;
}

/* ---- 1200 - 1399 : still two columns, still matched ---- */

@media (max-width: 1399px) {

    .choose-odlc .odlc-why-grid {
        grid-template-columns: 1.1fr 1fr;
        gap: 0 40px;
    }

    .choose-odlc .odlc-why-shot-inner {
        max-width: none;
    }
}

/* ---- below 1200 : stacked, photo sizes itself again ---- */

@media (max-width: 1199px) {

    .choose-odlc .odlc-why-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .choose-odlc .odlc-why-shot {
        grid-column: 1;
        grid-row: 1;
        align-self: auto;
    }

    .choose-odlc .odlc-why-cards {
        grid-column: 1;
        grid-row: 2;
    }

    .choose-odlc .odlc-why-grid .contact-btn {
        grid-column: 1;
        grid-row: 3;
    }

    /* back to a natural 3:2 box, centred and capped */
    .choose-odlc .odlc-why-shot-inner {
        position: relative;
        inset: auto;
        max-width: 520px;
        margin: 0 auto;
    }

    .choose-odlc .odlc-why-shot-frame {
        position: relative;
        inset: auto;
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .choose-odlc .odlc-why-shot-frame img {
        object-fit: contain;
    }
}


/* ================================================================
   OUR PROGRAMMES  —  TAG STYLE + RESPONSIVE CARDS
   Appended to index.css. Nothing above this point is modified.

   Deliberately minimal:
     - the card style is left exactly as it is (white panel,
       coloured icon, 55/45 text-to-photo split, blue EXPLORE)
     - no markup change at all
     - only three things are touched:
         1. .programmes-badge matches .section-tag on the
            sections above
         2. the grid gets sane column counts and stacks the
            card internals when a card gets too narrow, so the
            EXPLORE button is never squeezed
         3. the container matches 92% / 1380px like every other
            section

   The bootstrap-icons font IS loaded (includes/header.php:26),
   so the existing <i class="bi bi-mortarboard"> is kept and only
   restyled.
   ================================================================ */


/* ---------------------------------------------------------------
   1.  SECTION TAG  —  same as About ODLC / Ecosystem / Why ODLC
---------------------------------------------------------------- */

.programmes-section .programmes-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;

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

    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;

    color: #0D6EFD !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;

    text-transform: uppercase;
    text-align: left !important;
}

.programmes-section .programmes-badge i {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    background: none !important;
    border: 0 !important;

    color: #0D6EFD !important;
    font-size: 12px !important;
    line-height: 1 !important;
    vertical-align: middle;
}


/* ---------------------------------------------------------------
   2.  WIDTH  —  92% / 1380px, matching the sections above
       set on the grid itself and on the header block, so no
       markup change is needed
---------------------------------------------------------------- */

.programmes-section .programmes-header {
    width: 92% !important;
    max-width: 1380px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

.program-grid {
    width: 92% !important;
    max-width: 1380px !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 30px;

    display: grid !important;

    /* minmax(0, 1fr) stops a long programme name widening its
       track past its share */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------------
   3.  SAFETY ON THE CARDS

   The one real fix here: the cards had a FIXED height of 280px.
   When a programme name wraps to an extra line the content grows
   past that and the EXPLORE button drops out of the bottom of the
   card. Changing it to min-height lets the card grow, and because
   grid items stretch, every card in a row then matches the
   tallest one. Nothing about the card's look changes.
   ---------------------------------------------------------------- */

.program-grid .program-card,
.program-grid .program-card-content {
    min-width: 0 !important;
}

.program-grid .program-card {
    height: auto !important;
    min-height: 280px !important;
}

.program-grid .program-card h6,
.program-grid .program-card h3,
.program-grid .program-card p {
    overflow-wrap: break-word !important;
}


/* ---------------------------------------------------------------
   4.  BREAKPOINTS
---------------------------------------------------------------- */

/* 3 across - 4 columns below 1200 leaves cards around 275px,
   which squeezes the 55% text column and pushes the button */
@media (max-width: 1199px) {
    .program-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* 2 across */
@media (max-width: 991px) {
    .program-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

/* narrow tablets: keep 2 across, but stack the card so the photo
   sits on top and the text + EXPLORE get the full card width.
   This is the fix for the button being pushed down. */
@media (max-width: 767px) {

    .programmes-section .programmes-header,
    .program-grid {
        width: 90% !important;
    }

    .program-grid {
        gap: 14px !important;
    }

    .program-grid .program-card {
        height: auto !important;
        min-height: 0 !important;

        flex-direction: column !important;
    }

    .program-grid .program-card-image {
        position: static !important;
        order: -1;

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

        flex: 0 0 150px !important;
    }

    .program-grid .program-card-image img {
        height: 100% !important;
    }

    .program-grid .program-card-content {
        width: 100% !important;
    }
}

/* one across - a full-width card has room for the original
   side-by-side layout again, so the card goes back to normal */
@media (max-width: 575px) {

    .program-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .program-grid .program-card {
        flex-direction: row !important;
        height: auto !important;
        min-height: 280px !important;
    }

    .program-grid .program-card-image {
        position: absolute !important;
        order: 0;

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

        flex: none !important;
    }

    .program-grid .program-card-content {
        width: 55% !important;
    }
}

/* smallest phones */
@media (max-width: 480px) {

    .programmes-section .programmes-header,
    .program-grid {
        width: 92% !important;
    }

    .program-grid .program-card {
        height: auto !important;
        min-height: 240px !important;
    }
}


/* ================================================================
   OUR PROGRAMMES  —  WIDTH ALIGNMENT + FEATURE STRIP
   Appended to index.css. Nothing above this point is modified.

   Three things:
     1. the section and its .section-container wrappers carried
        40px / 20px side padding, so 92% of the wrong number.
        Clearing it makes the heading, the card grid and the
        strip below all land on the same 1311px content box as
        .eco-wrap on the section above.
     2. the bottom strip (Industry Relevant / Trusted
        Certifications / End-to-End Support / Better
        Opportunities) is given the same width and made fluid.
     3. the card photo crops through the middle of the subject.
        object-position is moved up so faces stay in frame.
   ================================================================ */


/* ---------------------------------------------------------------
   1.  CLEAR THE SIDE PADDING THAT THREW THE 92% OFF
---------------------------------------------------------------- */

.programmes-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* the two wrappers that hold the card grid and the strip below.
   :has() lets me reach the parent without touching the markup. */
.section-container:has(> .program-grid),
.section-container:has(> .program-features) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
}


/* ---------------------------------------------------------------
   2.  THE CARD GRID  —  same width as the sections above
---------------------------------------------------------------- */

.program-grid {
    width: 92% !important;
    max-width: 1380px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ---------------------------------------------------------------
   3.  THE BOTTOM STRIP  —  same width, and responsive
---------------------------------------------------------------- */

.program-features {
    width: 92% !important;
    max-width: 1380px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

.program-feature-item {
    min-width: 0 !important;
}

.program-feature-item h5,
.program-feature-item p {
    overflow-wrap: break-word !important;
}

@media (max-width: 1199px) {
    .program-features {
        width: 94% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

@media (max-width: 767px) {
    .program-features {
        width: 90% !important;
        gap: 14px !important;
    }
}

@media (max-width: 575px) {
    .program-features {
        width: 92% !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* ---------------------------------------------------------------
   4.  CARD PHOTO  —  crop higher so the face stays in frame
       The box is tall and narrow, so a centred crop was cutting
       straight through the subject.
---------------------------------------------------------------- */

.program-grid .program-card-image img {
    object-fit: cover !important;
    object-position: center 28% !important;
}


/* ---------------------------------------------------------------
   WIDTH BREAKPOINTS  —  match .eco-wrap on the section above
       92%  above 1199      94%  at 1199 and below
       90%  at 767 and below    92%  at 480 and below
   Without these the programmes blocks sat 20px wider than every
   other section between 768 and 1199.
---------------------------------------------------------------- */

.programmes-section .programmes-header,
.program-grid,
.program-features {
    width: 92% !important;
}

@media (max-width: 1199px) {
    .programmes-section .programmes-header,
    .program-grid,
    .program-features {
        width: 94% !important;
    }
}

@media (max-width: 767px) {
    .programmes-section .programmes-header,
    .program-grid,
    .program-features {
        width: 90% !important;
    }
}

@media (max-width: 480px) {
    .programmes-section .programmes-header,
    .program-grid,
    .program-features {
        width: 92% !important;
    }
}


/* ================================================================
   ODLC LEARNING ECOSYSTEM  —  MOBILE TIMELINE CARDS
   Appended to index.css. Nothing above this point is modified.

   On phone the four stage cards fell back to the same
   icon-left / title / grey-text silhouette used by the cards
   above and below, so the section stopped reading as its own
   thing. This turns them into a vertical timeline instead:
   the number moves out of the card and becomes a node on a
   gradient rail, which visually continues the circle above.

   Applied only where the section stacks (<=991px). No markup
   change: the existing .eco-num span becomes the node and the
   .eco-ficon disc is hidden at that size.
   ================================================================ */

@media (max-width: 991px) {

    .who-we-are .eco-rows {
        position: relative;

        /* room on the left for the rail and the nodes */
        padding-left: 58px;

        gap: 14px;
    }

    /* the rail */
    .who-we-are .eco-rows::before {
        content: "";
        position: absolute;
        left: 22px;
        top: 22px;
        bottom: 22px;
        width: 2px;

        background: linear-gradient(180deg, #6d4dff, #4bb8ff);
        border-radius: 2px;
        opacity: .5;
    }

    /* each card is a plain block hanging off the rail */
    .who-we-are .eco-row {
        display: block;
        position: relative;
        min-width: 0;
    }

    /* the icon disc gives way to the numbered node */
    .who-we-are .eco-ficon {
        display: none;
    }

    .who-we-are .eco-fcard {
        display: block;

        margin-left: 0;
        padding: 15px 16px 16px;

        background: #ffffff;
        border: 1px solid var(--c-soft);
        border-radius: 14px;

        box-shadow: 0 3px 12px rgba(8, 60, 124, .05);

        min-width: 0;
    }

    .who-we-are .eco-fcard-text {
        min-width: 0;
    }

    .who-we-are .eco-fcard h3 {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .who-we-are .eco-fcard p {
        font-size: 12.5px;
        line-height: 1.5;
    }

    /* the number becomes the node sitting on the rail */
    .who-we-are .eco-num {
        position: absolute;
        left: -58px;
        top: 12px;

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

        width: 46px;
        height: 46px;
        flex: 0 0 auto;

        padding-left: 0;
        border-left: 0;
        border-radius: 50%;

        background: linear-gradient(135deg, var(--c) 0%, var(--c2) 100%);
        border: 3px solid #f7faff;

        color: #ffffff;
        font-size: 15px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0;

        opacity: 1;
        box-shadow: 0 3px 10px rgba(8, 60, 124, .14);
    }
}


/* ---- <=767px : same timeline, slightly tighter ---- */

@media (max-width: 767px) {

    .who-we-are .eco-rows {
        padding-left: 54px;
    }

    .who-we-are .eco-rows::before {
        left: 20px;
    }

    .who-we-are .eco-num {
        left: -54px;
        width: 42px;
        height: 42px;
        font-size: 14px;
    }

    .who-we-are .eco-fcard {
        padding: 14px 15px 15px;
    }
}


/* ================================================================
   ECOSYSTEM ON MOBILE  —  CIRCLE + QUALITY CARDS
   Appended to index.css. Nothing above this point is modified.

   Two jobs:

   1. The circle was a bare ODLC disc on a phone, with both hub
      text lines hidden. It now carries the full identity, sits
      smaller so it does not dominate, and breathes.

   2. The four quality cards below the timeline were near copies
      of it: tinted panel, filled circle icon on the left,
      uppercase coloured heading, left-aligned text. To read as
      a different thing they are now centred, with an OUTLINED
      icon, a sentence-case navy heading, a short coloured top
      bar and a larger radius. Nothing about them is left
      pointing the same way as the four stage cards.

   Both spin rotations are untouched.
   ================================================================ */

@media (max-width: 991px) {

    /* ---------------------------------------------------------
       1.  THE CIRCLE
    --------------------------------------------------------- */

    .who-we-are .eco-circle {
        width: 230px !important;
        max-width: 230px !important;
        height: 230px !important;
    }

    .who-we-are .eco-glow {
        width: 240px;
        height: 240px;
        margin: -120px 0 0 -120px;
    }

    .who-we-are .outer-circle {
        width: 184px !important;
        height: 184px !important;
    }

    .who-we-are .inner-circle {
        width: 140px !important;
        height: 140px !important;
        border-width: 4px !important;
    }

    .who-we-are .center-circle {
        width: 104px !important;
        height: 104px !important;
        padding: 0 8px !important;
    }

    .who-we-are .center-circle h3 {
        font-size: 17px !important;
        margin: 0 0 3px !important;
        letter-spacing: .3px !important;
    }

    /* both hub lines come back on mobile, sized to fit */
    .who-we-are .center-circle a {
        display: block !important;

        max-width: 92px !important;
        margin: 0 auto !important;

        color: rgba(255, 255, 255, .74) !important;

        font-size: 6.5px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        letter-spacing: .4px !important;
        text-transform: uppercase;
    }

    /* a soft breathing ring behind the whole circle */
    .who-we-are .eco-circle::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 184px;
        height: 184px;
        margin: -92px 0 0 -92px;

        border: 1px solid rgba(52, 116, 255, .40);
        border-radius: 50%;

        pointer-events: none;
        animation: ecoMobilePulse 5s ease-in-out infinite;
    }

    @keyframes ecoMobilePulse {
        0%, 100% { transform: scale(1);    opacity: .85; }
        50%      { transform: scale(1.13); opacity: 0;   }
    }

    .who-we-are .eco-ring-dot {
        transform: rotate(90deg) translateY(-67px);
    }


    /* ---------------------------------------------------------
       2.  THE FOUR QUALITY CARDS
       centred, outlined icon, sentence-case heading
    --------------------------------------------------------- */

    .who-we-are .eco-quals {
        margin-top: 34px;
    }

    .who-we-are .eco-quals-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .who-we-are .eco-qual {
        position: relative;

        display: block;
        text-align: center;

        padding: 24px 20px 20px;
        border-radius: 20px;

        background: linear-gradient(180deg, #ffffff 0%, var(--c-soft) 100%);
        border: 0;

        box-shadow: 0 4px 14px rgba(8, 60, 124, .06);
    }

    /* short coloured bar at the top instead of a left rail */
    .who-we-are .eco-qual::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 44px;
        height: 3px;
        margin-left: -22px;
        border-radius: 0 0 3px 3px;
        background: var(--c);
    }

    /* outlined icon - deliberately not the filled circle used by
       the timeline nodes above */
    .who-we-are .eco-qual-icon {
        margin: 0 auto 12px;

        background: #ffffff;
        border: 2px solid var(--c);

        color: var(--c);
        box-shadow: 0 3px 10px rgba(8, 60, 124, .10);
    }

    .who-we-are .eco-qual-body h4 {
        margin: 0 0 6px !important;

        color: #0B1F4D;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;

        text-transform: none;
        text-align: center !important;
    }

    .who-we-are .eco-qual-body p {
        margin: 0 !important;

        color: #55627a;
        font-size: 13px !important;
        line-height: 1.55 !important;

        text-align: center !important;
    }
}


/* ---- <=767px : tighten ---- */

@media (max-width: 767px) {

    .who-we-are .eco-circle {
        width: 214px !important;
        max-width: 214px !important;
        height: 214px !important;
    }

    .who-we-are .eco-glow {
        width: 222px;
        height: 222px;
        margin: -111px 0 0 -111px;
    }

    .who-we-are .outer-circle {
        width: 172px !important;
        height: 172px !important;
    }

    .who-we-are .inner-circle {
        width: 130px !important;
        height: 130px !important;
    }

    .who-we-are .center-circle {
        width: 98px !important;
        height: 98px !important;
    }

    .who-we-are .eco-circle::after {
        width: 172px;
        height: 172px;
        margin: -86px 0 0 -86px;
    }

    .who-we-are .eco-ring-dot {
        transform: rotate(90deg) translateY(-62px);
    }

    .who-we-are .eco-qual {
        padding: 22px 18px 18px;
    }
}


/* ---- <=480px ---- */

@media (max-width: 480px) {

    .who-we-are .eco-circle {
        width: 194px !important;
        max-width: 194px !important;
        height: 194px !important;
    }

    .who-we-are .eco-glow {
        width: 200px;
        height: 200px;
        margin: -100px 0 0 -100px;
    }

    .who-we-are .outer-circle {
        width: 156px !important;
        height: 156px !important;
    }

    .who-we-are .inner-circle {
        width: 118px !important;
        height: 118px !important;
    }

    .who-we-are .center-circle {
        width: 88px !important;
        height: 88px !important;
    }

    .who-we-are .center-circle h3 {
        font-size: 15px !important;
    }

    .who-we-are .center-circle a {
        max-width: 78px !important;
        font-size: 6px !important;
    }

    .who-we-are .eco-circle::after {
        width: 156px;
        height: 156px;
        margin: -78px 0 0 -78px;
    }

    .who-we-are .eco-ring-dot {
        transform: rotate(90deg) translateY(-56px);
    }

    .who-we-are .eco-qual {
        padding: 20px 16px 17px;
        border-radius: 18px;
    }

    .who-we-are .eco-qual-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        margin-bottom: 11px;
    }

    .who-we-are .eco-qual-body h4 {
        font-size: 15px !important;
    }

    .who-we-are .eco-qual-body p {
        font-size: 12.5px !important;
    }
}


/* reduced motion - the circle stops breathing, it does not jump */

@media (prefers-reduced-motion: reduce) {
    .who-we-are .eco-circle::after {
        animation: none;
    }
}


/* ================================================================
   ODLC MOBILE APP  -  REDESIGN
   Appended to index.css. Nothing above this point is modified.

   Container matches the sections above exactly:
       92% / max-width 1380px / margin 0 auto
       -> left 262 / right 1642 at 1920, same as .eco-wrap
   Section padding 48px 0, same as .who-we-are and .choose-odlc.

   Section tag and heading follow the standard used above:
       tag  11px / 700 / #0D6EFD / letter-spacing 1px / uppercase
       h2   35px / 800 / #0B1F4D / line-height 1.25 / ls -1.2px
       accent span  linear-gradient(90deg,#6d4dff,#4bb8ff)

   The legacy block for this section has 5 responsive variants of
   every rule, many with !important, so everything below carries
   !important and is scoped to .odlc-mobile-app.
   ================================================================ */

.odlc-mobile-app {
    position: relative !important;
    overflow: hidden !important;
    min-height: 0 !important;
    padding: 48px 0 !important;
    background-color: #F1F5FE !important;
    background-image:
        radial-gradient(760px 700px at 74% 50%, rgba(126,170,255,.32) 0%, rgba(126,170,255,0) 66%),
        linear-gradient(180deg,#F5F8FF 0%,#EAF0FE 52%,#F5F8FF 100%) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* ---------- container ---------- */
.odlc-mobile-app .odlc-mobile-app-container {
    width: 92% !important;
    max-width: 1380px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1.22fr 1fr !important;
    gap: 48px !important;
    align-items: center !important;
    justify-content: stretch !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* ---------- 1. SECTION TAG + HEADING ---------- */
.odlc-mobile-app .odlc-mobile-app-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #0D6EFD !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.odlc-mobile-app .odlc-mobile-app-badge i {
    margin: 0 !important;
    color: #0D6EFD !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.odlc-mobile-app .odlc-mobile-app-content h2 {
    margin: 0 0 12px !important;
    max-width: 950px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 35px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -1.2px !important;
    text-align: left !important;
    text-transform: none !important;
}
.odlc-mobile-app .odlc-mobile-app-content h2 span {
    background: linear-gradient(90deg, #6d4dff, #4bb8ff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #6d4dff !important;
}

.odlc-mobile-app .odlc-mobile-app-content h3 {
    margin: 0 0 16px !important;
    max-width: 950px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.4px !important;
    text-align: left !important;
    text-transform: none !important;
}

.odlc-mobile-app .odlc-mobile-app-description {
    max-width: 600px !important;
    margin: 0 0 28px !important;
    color: #666 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

/* ---------- 2. SIX FEATURE CARDS ---------- */
.odlc-mobile-app .odlc-mobile-features {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
    margin: 0 0 30px !important;
    padding: 0 !important;
    width: 100% !important;
}

.odlc-mobile-app .odlc-mobile-feature {
    --c: #2563eb;
    --glow: #E7EEFE;

    position: relative !important;
    min-height: 152px !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 20px 18px 24px !important;
    display: block !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid #E4EAF8 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 20px rgba(16,42,90,.06) !important;
    overflow: hidden !important;
    transform: none !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}
.odlc-mobile-app .odlc-mobile-feature:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 32px rgba(16,42,90,.12) !important;
}

/* soft coloured arc at the card's bottom-left */
.odlc-mobile-app .odlc-mobile-feature::after {
    content: "" !important;
    position: absolute !important;
    left: -16px !important;
    bottom: -40px !important;
    width: 132px !important;
    height: 76px !important;
    border-radius: 50% 50% 0 0 !important;
    background: var(--c) !important;
    opacity: .13 !important;
    z-index: 0 !important;
}
/* solid colour lip on the bottom edge */
.odlc-mobile-app .odlc-mobile-feature::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 70px !important;
    height: 4px !important;
    border-radius: 0 50px 50px 0 !important;
    background: var(--c) !important;
    opacity: 1 !important;
    z-index: 1 !important;
}

.odlc-mobile-app .odlc-mobile-feature.c-study  { --c: #2563eb; --glow: #E7EEFE; }
.odlc-mobile-app .odlc-mobile-feature.c-assess { --c: #7c3aed; --glow: #F1E9FE; }
.odlc-mobile-app .odlc-mobile-feature.c-exam   { --c: #059669; --glow: #DFF6EE; }
.odlc-mobile-app .odlc-mobile-feature.c-track  { --c: #ea580c; --glow: #FDEBE0; }
.odlc-mobile-app .odlc-mobile-feature.c-verify { --c: #db2777; --glow: #FCE7F3; }
.odlc-mobile-app .odlc-mobile-feature.c-career { --c: #4f46e5; --glow: #E7E7FD; }

.odlc-mobile-app .odlc-mobile-feature-icon {
    position: relative !important;
    z-index: 2 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--glow) !important;
    background-image: none !important;
    color: var(--c) !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
}
.odlc-mobile-app .odlc-mobile-feature-icon i {
    margin: 0 !important;
    color: var(--c) !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

.odlc-mobile-app .odlc-mobile-feature-text {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

.odlc-mobile-app .odlc-mobile-feature h4 {
    margin: 0 0 6px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: .2px !important;
    text-align: left !important;
    text-transform: uppercase !important;
}
.odlc-mobile-app .odlc-mobile-feature p {
    margin: 0 !important;
    color: #5B6B85 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

/* ---------- 3. DOWNLOAD APP + STORE LINKS ---------- */
.odlc-mobile-app .odlc-mobile-app-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.odlc-mobile-app .odlc-download-wrapper {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

.odlc-mobile-app .odlc-download-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 15px 30px !important;
    border: 0 !important;
    border-radius: 50px !important;
    background: #123a75 !important;
    background-image: linear-gradient(90deg,#123a75,#0b2450) !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .2px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-shadow: 0 12px 24px rgba(11,37,80,.24) !important;
    cursor: pointer !important;
    transform: none !important;
}
.odlc-mobile-app .odlc-download-btn i {
    margin: 0 !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* the store links now sit on the same row, always visible */
.odlc-mobile-app .odlc-download-links {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
    z-index: auto !important;
}
/* .odlc-mobile-app .odlc-download-links::before {
    content: "Available on";
    display: block;
    color: #5B6B85;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
} */
.odlc-mobile-app .odlc-download-links a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 10px 17px !important;
    background: #fff !important;
    border: 1px solid #E4EAF8 !important;
    border-radius: 50px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 6px 14px rgba(16,42,90,.06) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.odlc-mobile-app .odlc-download-links a:hover {
    transform: translateY(-2px) !important;
    background: #fff !important;
    border-color: #C9D8F6 !important;
    box-shadow: 0 10px 22px rgba(16,42,90,.12) !important;
}
.odlc-mobile-app .odlc-download-links i {
    margin: 0 !important;
    color: #0B1F4D !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

/* ---------- 4. RIGHT - GLOWS, PHONE, FLOATING CARDS ---------- */
.odlc-mobile-app .odlc-mobile-app-visual {
    position: relative !important;
    height: 660px !important;
    min-height: 660px !important;
    max-height: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
}

.odlc-mobile-app .odlc-mobile-glow {
    position: absolute !important;
    border-radius: 50% !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    animation: none !important;
}
.odlc-mobile-app .odlc-mobile-glow.glow-one {
    top: 50% !important;
    left: 38% !important;
    width: 600px !important;
    height: 600px !important;
    transform: translate(-50%,-50%) !important;
    background-image:
        radial-gradient(circle at 40% 44%, rgba(120,150,255,.34) 0%, rgba(120,150,255,0) 60%),
        radial-gradient(circle at 68% 62%, rgba(60,195,255,.26) 0%, rgba(60,195,255,0) 56%) !important;
}
/* the two faint rings inside the swirl */
.odlc-mobile-app .odlc-mobile-glow.glow-one::before,
.odlc-mobile-app .odlc-mobile-glow.glow-one::after {
    content: "" !important;
    position: absolute !important;
    border-radius: 50% !important;
    border: 2px solid rgba(120,160,255,.24) !important;
    background: none !important;
}
.odlc-mobile-app .odlc-mobile-glow.glow-one::before { inset: 70px; }
.odlc-mobile-app .odlc-mobile-glow.glow-one::after {
    inset: 146px;
    border-color: rgba(110,200,255,.20) !important;
}

.odlc-mobile-app .odlc-mobile-glow.glow-two {
    top: 22% !important;
    left: auto !important;
    right: -40px !important;
    width: 300px !important;
    height: 300px !important;
    transform: none !important;
    background-image: radial-gradient(circle, rgba(140,180,255,.30) 0%, rgba(140,180,255,0) 70%) !important;
}

.odlc-mobile-app .odlc-phone {
    position: absolute !important;
    top: 50% !important;
    left: 38% !important;
    z-index: 2 !important;
    width: 322px !important;
    max-width: 322px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 9px !important;
    transform: translate(-50%,-50%) !important;
    border: 0 !important;
    border-radius: 48px !important;
    background: #1a2136 !important;
    background-image: linear-gradient(160deg,#2b3550,#0d1220 60%) !important;
    box-shadow: 0 30px 60px rgba(11,26,60,.30), 0 0 0 1px rgba(255,255,255,.10) inset !important;
    overflow: visible !important;
    animation: none !important;
}
.odlc-mobile-app .odlc-phone-frame {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 40px !important;
    background: #0A2A6B !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.odlc-mobile-app .odlc-phone-screen {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #0A2A6B !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.odlc-mobile-app .odlc-phone-screen img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
}
.odlc-mobile-app .odlc-phone-notch {
    position: absolute !important;
    top: 11px !important;
    left: 50% !important;
    z-index: 3 !important;
    width: 92px !important;
    height: 23px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50px !important;
    background: #0b1020 !important;
    transform: translateX(-50%) !important;
}
.odlc-mobile-app .odlc-phone-notch span { display: none !important; }

.odlc-mobile-app .odlc-floating-card {
    position: absolute !important;
    left: 57% !important;
    z-index: 3 !important;
    min-width: 214px !important;
    margin: 0 !important;
    padding: 12px 20px 12px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(16,42,90,.14) !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}
.odlc-mobile-app .odlc-floating-card.f-1 { top: 17% !important; }
.odlc-mobile-app .odlc-floating-card.f-2 { top: 39% !important; }
.odlc-mobile-app .odlc-floating-card.f-3 { top: 61% !important; }

.odlc-mobile-app .odlc-floating-card .floating-icon {
    position: static !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
}
.odlc-mobile-app .odlc-floating-card .floating-icon i {
    margin: 0 !important;
    color: #fff !important;
    font-size: 19px !important;
    line-height: 1 !important;
}
.odlc-mobile-app .odlc-floating-card.f-1 .floating-icon { background: linear-gradient(135deg,#2f80ff,#56ccf2) !important; }
.odlc-mobile-app .odlc-floating-card.f-2 .floating-icon { background: linear-gradient(135deg,#12b5a5,#2fd6a8) !important; }
.odlc-mobile-app .odlc-floating-card.f-3 .floating-icon { background: linear-gradient(135deg,#5b5bd6,#7c6cf5) !important; }

.odlc-mobile-app .odlc-floating-card .txt {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
}
.odlc-mobile-app .odlc-floating-card strong {
    display: block !important;
    margin: 0 !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.odlc-mobile-app .odlc-floating-card .sub {
    display: block !important;
    margin: 3px 0 0 !important;
    color: #3B4761 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.odlc-mobile-app .odlc-app-slogan {
    position: absolute !important;
    right: 6px !important;
    bottom: 4px !important;
    z-index: 3 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #1e56c8 !important;
    font-family: "Segoe Script","Bradley Hand","Comic Sans MS",cursive !important;
    font-size: 25px !important;
    font-style: italic !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    transform: rotate(-7deg) !important;
}
.odlc-mobile-app .odlc-app-slogan u {
    display: block !important;
    width: 74px !important;
    height: 3px !important;
    margin: 6px auto 0 !important;
    background: #1e56c8 !important;
    border-radius: 3px !important;
    text-decoration: none !important;
}

/* ================================================================
   RESPONSIVE  -  the same container standard used above
   ================================================================ */

@media (max-width: 1199px) {
    .odlc-mobile-app .odlc-mobile-app-container {
        width: 94% !important;
        gap: 36px !important;
    }
    .odlc-mobile-app .odlc-mobile-glow.glow-one { width: 520px !important; height: 520px !important; }
    .odlc-mobile-app .odlc-mobile-glow.glow-one::before { inset: 60px; }
    .odlc-mobile-app .odlc-mobile-glow.glow-one::after { inset: 126px; }
    .odlc-mobile-app .odlc-phone { width: 290px !important; max-width: 290px !important; }
    .odlc-mobile-app .odlc-floating-card { min-width: 200px !important; }
}

@media (max-width: 991px) {
    .odlc-mobile-app .odlc-mobile-app-container {
        grid-template-columns: 1fr !important;
        gap: 44px !important;
    }
    .odlc-mobile-app .odlc-mobile-features {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .odlc-mobile-app .odlc-mobile-app-visual {
        height: 620px !important;
        min-height: 620px !important;
    }
    .odlc-mobile-app .odlc-mobile-glow.glow-one { left: 50% !important; }
    .odlc-mobile-app .odlc-phone { left: 50% !important; }

    /* cards alternate sides so nothing sits on the phone */
    .odlc-mobile-app .odlc-floating-card.f-1 { top: 6%  !important; left: auto !important; right: 0 !important; }
    .odlc-mobile-app .odlc-floating-card.f-2 { top: 40% !important; left: 0 !important;  right: auto !important; }
    .odlc-mobile-app .odlc-floating-card.f-3 { top: 74% !important; left: auto !important; right: 0 !important; }
}

@media (max-width: 767px) {
    .odlc-mobile-app .odlc-mobile-app-container {
        width: 90% !important;
        gap: 36px !important;
    }
    .odlc-mobile-app .odlc-mobile-app-content h2 {
        font-size: 30px !important;
        letter-spacing: -1px !important;
    }
    .odlc-mobile-app .odlc-mobile-app-content h3 { font-size: 18px !important; }
    .odlc-mobile-app .odlc-mobile-app-description { font-size: 15px !important; }

    /* --- the three labels stop floating and stack under the phone ---
       the column is only ~280-710px wide here, so side placement pushed
       them off the edge and over the phone. the phone keeps its slot at
       the top (padding-top reserves the room) and the labels flow after
       it as full-width rows. */
    .odlc-mobile-app .odlc-mobile-app-visual {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 467px !important;   /* phone 230px wide x 1.95 + gap */
    }
    .odlc-mobile-app .odlc-mobile-glow.glow-one {
        top: 224px !important;
        left: 50% !important;
        width: 430px !important;
        height: 430px !important;
    }
    .odlc-mobile-app .odlc-mobile-glow.glow-one::before { inset: 54px; }
    .odlc-mobile-app .odlc-mobile-glow.glow-one::after { inset: 114px; }
    .odlc-mobile-app .odlc-mobile-glow.glow-two { display: none !important; }

    .odlc-mobile-app .odlc-phone {
        top: 0 !important;
        left: 50% !important;
        width: 230px !important;
        max-width: 230px !important;
        transform: translateX(-50%) !important;
        border-radius: 40px !important;
    }
    .odlc-mobile-app .odlc-phone-frame { border-radius: 33px !important; }

    .odlc-mobile-app .odlc-floating-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 400px !important;
        min-width: 0 !important;
        margin: 0 auto 10px !important;
        padding: 12px 16px 12px 12px !important;
        gap: 12px !important;
        white-space: normal !important;
    }
    .odlc-mobile-app .odlc-floating-card .floating-icon {
        width: 38px !important; height: 38px !important; flex: 0 0 38px !important;
    }
    .odlc-mobile-app .odlc-floating-card .floating-icon i { font-size: 17px !important; }
    .odlc-mobile-app .odlc-floating-card strong { font-size: 14px !important; }
    .odlc-mobile-app .odlc-floating-card .sub { font-size: 12px !important; }

    .odlc-mobile-app .odlc-app-slogan {
        display: none !important;   /* hidden on mobile - it collided with the stacked labels */
    }

    .odlc-mobile-app .odlc-download-btn { padding: 14px 24px !important; font-size: 14px !important; }
    .odlc-mobile-app .odlc-download-links { gap: 10px !important; }
    .odlc-mobile-app .odlc-download-links a { padding: 9px 14px !important; font-size: 12.5px !important; }
}

@media (max-width: 480px) {
    .odlc-mobile-app .odlc-mobile-app-container {
        width: 92% !important;
        gap: 30px !important;
    }
    .odlc-mobile-app .odlc-mobile-features {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .odlc-mobile-app .odlc-mobile-feature { min-height: 0 !important; padding: 18px 16px 22px !important; }

    .odlc-mobile-app .odlc-mobile-app-visual {
        padding-top: 406px !important;   /* phone 200px wide x 1.95 + gap */
    }
    .odlc-mobile-app .odlc-mobile-glow.glow-one {
        top: 195px !important;
        width: 360px !important;
        height: 360px !important;
    }
    .odlc-mobile-app .odlc-mobile-glow.glow-one::before { inset: 46px; }
    .odlc-mobile-app .odlc-mobile-glow.glow-one::after { inset: 96px; }
    .odlc-mobile-app .odlc-phone {
        width: 200px !important;
        max-width: 200px !important;
        border-radius: 36px !important;
    }
    .odlc-mobile-app .odlc-phone-frame { border-radius: 29px !important; }

    .odlc-mobile-app .odlc-floating-card {
        max-width: 340px !important;
        margin-bottom: 9px !important;
    }
    .odlc-mobile-app .odlc-mobile-app-buttons,
    .odlc-mobile-app .odlc-download-wrapper { gap: 14px !important; }
}


/* ================================================================
   DIGITAL CREDENTIALS  -  TEXT ALIGNED WITH THE SECTIONS ABOVE
   Appended to index.css. Nothing above this point is modified.

   Same standard as Ecosystem / Why ODLC / Our Programmes /
   ODLC Mobile App:

       section tag   11px / 700 / #0D6EFD / ls 1px / uppercase
       h2            35px / 800 / #0B1F4D / lh 1.25 / ls -1.2px
                     max-width 950px
       accent span   linear-gradient(90deg,#6d4dff,#4bb8ff)
       description   16px / #666 / lh 1.6
       card heading  20px / 800 / #0B1F4D
       card text     15px / #5B6B85

   What changed here, measured before the edit:
       tag        14px / 700 / #083C7C / ls .6px / no uppercase,
                  on a #EAF2FC pill, radius 30px
       h2         35px / 800 / #0B2553 / ls -1.5px
       intro      16px / #667085
       card h4    25px / 700 / #132653
       card p     16px / #667085
       note p     16px / #52677D

   The container was already on the standard
   (92% -> left 57 / right 1368 at 1440) and is left alone.
   The credential card on the right is left alone.
   ================================================================ */

/* ---------- CONTAINER ----------
   it was already 92%, but above ~1500px the legacy width rule
   let it run to 1400px while the sections above cap at 1380px.
   at 1920 that put it at 252..1652 against their 262..1642. */
.odlc-digital-credentials .odlc-digital-container {
    width: 92% !important;
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---------- SECTION TAG ---------- */
.odlc-digital-credentials .odlc-digital-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #0D6EFD !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.odlc-digital-credentials .odlc-digital-badge i {
    margin: 0 !important;
    color: #0D6EFD !important;
    font-size: 14px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
}

/* ---------- HEADING ---------- */
.odlc-digital-credentials .odlc-digital-content h2 {
    margin: 0 0 22px !important;
    max-width: 950px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 35px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -1.2px !important;
    text-align: left !important;
    text-transform: none !important;
}
.odlc-digital-credentials .odlc-digital-content h2 span {
    background: linear-gradient(90deg, #6d4dff, #4bb8ff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #6d4dff !important;
}

/* ---------- DESCRIPTION ---------- */
.odlc-digital-credentials .odlc-digital-intro {
    max-width: 600px !important;
    margin: 0 0 30px !important;
    color: #666 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

/* ---------- CARD HEADINGS + TEXT ---------- */
.odlc-digital-credentials .odlc-credential-feature h4 {
    margin: 0 0 8px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
    text-align: left !important;
    text-transform: none !important;
}
.odlc-digital-credentials .odlc-credential-feature p {
    margin: 0 !important;
    color: #5B6B85 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

/* ---------- BUTTON ---------- */
.odlc-digital-credentials .odlc-credential-btn {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    line-height: 1.2 !important;
}
.odlc-digital-credentials .odlc-credential-btn i {
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* ---------- DIGILOCKER NOTE ---------- */
.odlc-digital-credentials .odlc-digilocker-note p {
    margin: 0 !important;
    color: #5B6B85 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-align: left !important;
}
.odlc-digital-credentials .odlc-digilocker-note i {
    color: #0D6EFD !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* ---------- RESPONSIVE, the same container standard ---------- */
@media (max-width: 1199px) {
    .odlc-digital-credentials .odlc-digital-container { width: 94% !important; }
}
@media (max-width: 767px) {
    .odlc-digital-credentials .odlc-digital-container {
        width: 90% !important;
    }
    .odlc-digital-credentials .odlc-digital-content h2 {
        font-size: 30px !important;
        letter-spacing: -1px !important;
    }
    .odlc-digital-credentials .odlc-digital-intro { font-size: 15px !important; }
    .odlc-digital-credentials .odlc-credential-feature h4 { font-size: 18px !important; }
    .odlc-digital-credentials .odlc-credential-feature p { font-size: 14px !important; }
}

@media (max-width: 480px) {
    .odlc-digital-credentials .odlc-digital-container { width: 92% !important; }
    .odlc-digital-credentials .odlc-credential-feature h4 { font-size: 17px !important; }
    .odlc-digital-credentials .odlc-digilocker-note p { font-size: 13.5px !important; }
}


/* ================================================================
   CAREER SUPPORT  -  TEXT ALIGNED WITH THE SECTIONS ABOVE
   Appended to index.css. Nothing above this point is modified.

   Same standard as Ecosystem / Why ODLC / Our Programmes /
   ODLC Mobile App / Digital Credentials:

       section tag   11px / 700 / #0D6EFD / ls 1px / uppercase
       h2            35px / 800 / #0B1F4D / lh 1.25 / ls -1.2px
                     max-width 950px
       accent span   linear-gradient(90deg,#6d4dff,#4bb8ff)
       description   16px / #666 / lh 1.6
       card heading  20px / 800 / #0B1F4D
       card text     15px / #5B6B85

   What changed here, measured before the edit:
       tag              14px / 700 / #083C7C / ls .6px / no uppercase,
                        on a #EAF2FC pill, radius 30px
       h2               35px / 800 / #0B2553 / ls -1.5px / max-width 650px
       intro            16px / #667085
       highlight h4     25px / 700 / #132653
       highlight p      16px / #667085
       step label       13px / 800 / #083C7C
       step text        16px / #667085
       portal bar       13px / 700 / #083C7C  +  10px / #667085

   The container was already 92% but, like Digital Credentials,
   was not capped, so above ~1500px it ran wider than 1380px.
   The path card on the left keeps its shape; only its text
   colours are pulled onto the shared palette.
   ================================================================ */

/* ---------- CONTAINER ----------
   the grid was 616.075px 694.725px with a 45px gap inside a 1311px
   container - 1356px of track in 1311px of space, so the right-hand
   column ran 45px past the container edge (1413 vs 1368 at 1440).
   minmax(0,...) lets the tracks shrink instead of overflowing, which
   is what was actually pushing the content out. */
.odlc-career-support .odlc-career-container {
    width: 92% !important;
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 48px !important;
    align-items: center !important;
}
.odlc-career-support .odlc-career-visual,
.odlc-career-support .odlc-career-content {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* section padding matches .who-we-are / .choose-odlc at 48px */
.odlc-career-support {
    padding: 48px 0 !important;
}

/* stack, and drop the gap, once the columns get tight */
@media (max-width: 991px) {
    .odlc-career-support .odlc-career-container {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 40px !important;
    }
}

/* ---------- SECTION TAG ---------- */
.odlc-career-support .odlc-career-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #0D6EFD !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.odlc-career-support .odlc-career-badge i {
    margin: 0 !important;
    color: #0D6EFD !important;
    font-size: 14px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
}

/* ---------- HEADING ---------- */
.odlc-career-support .odlc-career-content h2 {
    margin: 0 0 22px !important;
    max-width: 950px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 35px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -1.2px !important;
    text-align: left !important;
    text-transform: none !important;
}
.odlc-career-support .odlc-career-content h2 span {
    background: linear-gradient(90deg, #6d4dff, #4bb8ff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #6d4dff !important;
}

/* ---------- DESCRIPTION ---------- */
.odlc-career-support .odlc-career-intro {
    max-width: 600px !important;
    margin: 0 0 30px !important;
    color: #666 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

/* ---------- THREE HIGHLIGHTS ---------- */
.odlc-career-support .odlc-career-highlight h4 {
    margin: 0 0 8px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
    text-align: left !important;
    text-transform: none !important;
}
.odlc-career-support .odlc-career-highlight p {
    margin: 0 !important;
    color: #5B6B85 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

/* ---------- BUTTON ---------- */
.odlc-career-support .odlc-career-btn {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    line-height: 1.2 !important;
}
.odlc-career-support .odlc-career-btn i {
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* ---------- LEFT PATH CARD TEXT ---------- */
.odlc-career-support .career-path-label {
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .7px !important;
    text-transform: uppercase !important;
}
.odlc-career-support .career-step-content span {
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
}
.odlc-career-support .career-step-content p {
    margin: 0 !important;
    color: #5B6B85 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    text-align: left !important;
}
.odlc-career-support .career-portal-bar strong {
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}
.odlc-career-support .career-portal-bar span {
    color: #5B6B85 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* ---------- RESPONSIVE, the same container standard ---------- */
@media (max-width: 1199px) {
    .odlc-career-support .odlc-career-container { width: 94% !important; }
}

@media (max-width: 767px) {
    .odlc-career-support .odlc-career-container { width: 90% !important; }
    .odlc-career-support .odlc-career-content h2 {
        font-size: 30px !important;
        letter-spacing: -1px !important;
    }
    .odlc-career-support .odlc-career-intro { font-size: 15px !important; }
    .odlc-career-support .odlc-career-highlight h4 { font-size: 18px !important; }
    .odlc-career-support .odlc-career-highlight p { font-size: 14px !important; }
}

@media (max-width: 480px) {
    .odlc-career-support .odlc-career-container { width: 92% !important; }
    .odlc-career-support .odlc-career-highlight h4 { font-size: 17px !important; }
    .odlc-career-support .career-step-content p { font-size: 13.5px !important; }
}


/* ================================================================
   APPLY WITH ODLC  -  TEXT ALIGNED WITH THE SECTIONS ABOVE
   Appended to index.css. Nothing above this point is modified.

   Same standard as Ecosystem / Why ODLC / Our Programmes /
   ODLC Mobile App / Digital Credentials / Career Support:

       section tag   11px / 700 / #0D6EFD / ls 1px / uppercase
       h2            35px / 800 / #0B1F4D / lh 1.25 / ls -1.2px
                     max-width 950px
       accent span   linear-gradient(90deg,#6d4dff,#4bb8ff)
       description   16px / #666 / lh 1.6
       group heading 24px / 800 / #0B1F4D
       card heading  20px / 800 / #0B1F4D
       card text     15px / #5B6B85

   What changed here, measured before the edit:
       container #apply   .section-container, 1425px wide,
                         padding 0 20px, max-width 1500px,
                         so it sat at 0..1425 while the sections
                         above sat at 57..1368
       tag               13px / 700 / #083C7C / ls .7px / no uppercase,
                         on a #EAF2FC pill, radius 30px
       h2                35px / 800 / #0B1F4D / ls normal / no max-width
       h2 span           flat #083C7C, no gradient
       intro             16px / #667085
       group label       11px / 700 / #667085 / no uppercase
       group h3          30px / 800 / #0B1F4D
       card h4           25px / 700 / #083C7C
       card p            16px / #667085
       card action       10px / 700

   .section-container is shared with other sections, so the width
   fix is scoped to #apply. The pathway cards keep their layout,
   icons, colours and numbers - only text styling changes.
   ================================================================ */

/* ---------- CONTAINER ----------
   was .section-container at 0..1425 (92% of 1425 + 20px padding
   each side). brought onto 92% / max-width 1380px so it lines up
   with .eco-wrap, the app, digital and career sections. */
.odlc-apply-pathways #apply {
    width: 92% !important;
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---------- SECTION TAG ---------- */
.odlc-apply-pathways .odlc-apply-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #0D6EFD !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.odlc-apply-pathways .odlc-apply-label i {
    margin: 0 !important;
    color: #0D6EFD !important;
    font-size: 14px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
}

/* ---------- HEADING ---------- */
.odlc-apply-pathways .odlc-apply-heading h2 {
    margin: 0 0 22px !important;
    max-width: 950px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 35px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -1.2px !important;
    text-align: left !important;
    text-transform: none !important;
}
.odlc-apply-pathways .odlc-apply-heading h2 span {
    background: linear-gradient(90deg, #6d4dff, #4bb8ff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #6d4dff !important;
}

/* ---------- DESCRIPTION ---------- */
.odlc-apply-pathways .odlc-apply-heading p {
    max-width: 600px !important;
    margin: 0 0 30px !important;
    color: #666 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

/* ---------- PATHWAY GROUP ICONS ----------
   the two group headings had different icon fills:
       LEARNER PATHWAY      / STUDENTS       #083C7C  navy
       INSTITUTIONAL PATHWAY / INSTITUTIONS  #16A6C7  cyan
   matched to the navy one. scoped to .odlc-pathway-heading so the
   ALC card icon, which reuses the .institution-heading-icon class,
   keeps its own cyan. */
.odlc-apply-pathways .odlc-pathway-heading .odlc-pathway-heading-icon {
    background-color: #083C7C !important;
    background-image: none !important;
    color: #fff !important;
}
.odlc-apply-pathways .odlc-pathway-heading .odlc-pathway-heading-icon i {
    color: #fff !important;
}

/* ---------- PATHWAY GROUP HEADINGS ---------- */
.odlc-apply-pathways .odlc-pathway-heading span {
    display: block !important;
    margin: 0 0 4px !important;
    color: #0D6EFD !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.odlc-apply-pathways .odlc-pathway-heading h3 {
    margin: 0 !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.6px !important;
    text-align: left !important;
    text-transform: uppercase !important;
}

/* ---------- PATHWAY CARDS ---------- */
.odlc-apply-pathways .odlc-pathway-card h4 {
    margin: 0 0 8px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
    text-align: left !important;
    text-transform: none !important;
}
.odlc-apply-pathways .odlc-pathway-card p {
    margin: 0 !important;
    color: #5B6B85 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

/* the 01 / 02 / 03 numerals stay muted by design */
.odlc-apply-pathways .odlc-pathway-number {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .4px !important;
}

/* ---------- CARD ACTION BUTTONS ---------- */
.odlc-apply-pathways .odlc-pathway-card-footer {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
}
/* ---------- CARD ACTION BUTTONS ----------
   legacy pinned these to 0 0 190px !important with a 6px radius and a
   flat fill, which clipped the longer labels. now a pill that sizes to
   its text, in the same navy gradient as the approved
   ODLC Mobile App "DOWNLOAD APP" button. */
.odlc-apply-pathways .odlc-pathway-card .odlc-card-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    /* reset the legacy pin - flex-basis is what sizes a flex item,
       so width alone was being ignored */
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding: 11px 20px !important;
    border: 0 !important;
    /* border-radius: 50px !important; */
    background-color: #123a75 !important;
    background-image: linear-gradient(90deg, #123a75, #0b2450) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(11, 37, 80, .22) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;

    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.odlc-apply-pathways .odlc-pathway-card .odlc-card-action i {
    font-size: 12.5px !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: #fff !important;
    transition: translate .2s ease !important;
}
.odlc-apply-pathways .odlc-pathway-card .odlc-card-action:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 26px rgba(11, 37, 80, .30) !important;
    filter: brightness(1.06) !important;
    color: #fff !important;
}
.odlc-apply-pathways .odlc-pathway-card .odlc-card-action:hover i {
    transform: translateX(3px) !important;
}
.odlc-apply-pathways .odlc-pathway-card .odlc-card-action:focus-visible {
    outline: 3px solid rgba(13, 110, 253, .45) !important;
    outline-offset: 2px !important;
}
.odlc-apply-pathways .odlc-pathway-card .odlc-card-action:active {
    transform: translateY(0) !important;
    box-shadow: 0 5px 12px rgba(11, 37, 80, .24) !important;
}
.odlc-apply-pathways .odlc-card-action i {
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* ---------- RESPONSIVE, the same container standard ---------- */
@media (max-width: 1199px) {
    .odlc-apply-pathways #apply { width: 94% !important; }
    .odlc-apply-pathways .odlc-pathway-card .odlc-card-action {
        padding: 10px 18px !important;
        font-size: 12px !important;
    }
    .odlc-apply-pathways .odlc-pathway-card .odlc-card-action i { font-size: 12px !important; }
}

@media (max-width: 767px) {
    .odlc-apply-pathways #apply { width: 90% !important; }
    .odlc-apply-pathways .odlc-apply-heading h2 {
        font-size: 30px !important;
        letter-spacing: -1px !important;
    }
    .odlc-apply-pathways .odlc-apply-heading p { font-size: 15px !important; }
    .odlc-apply-pathways .odlc-pathway-heading h3 { font-size: 21px !important; }
    .odlc-apply-pathways .odlc-pathway-card h4 { font-size: 18px !important; }
    .odlc-apply-pathways .odlc-pathway-card p { font-size: 14px !important; }
    .odlc-apply-pathways .odlc-pathway-card .odlc-card-action {
        padding: 10px 16px !important;
        font-size: 11.5px !important;
    }
    .odlc-apply-pathways .odlc-pathway-card .odlc-card-action i { font-size: 11.5px !important; }
}

@media (max-width: 480px) {
    .odlc-apply-pathways #apply { width: 92% !important; }
    .odlc-apply-pathways .odlc-pathway-heading h3 { font-size: 19px !important; }
    .odlc-apply-pathways .odlc-pathway-card .odlc-card-action {
        flex: 1 1 100% !important;
        width: 100% !important;
        padding: 10px 14px !important;
        font-size: 11.5px !important;
        letter-spacing: .3px !important;
    }
    .odlc-apply-pathways .odlc-pathway-card .odlc-card-action i { font-size: 11.5px !important; }
}


/* ================================================================
   APPLY WITH ODLC  -  CARD BUTTONS + ALC / RCO DROPDOWNS
   Appended to index.css. Nothing above this point is modified.

   Five buttons across the two grids:
       Indian Student          STUDENT APPLICATION
       International Student   STUDENT APPLICATION
       ALC                     INSTITUTIONAL APPLICATION  (dropdown)
       RCO                     INSTITUTIONAL APPLICATION  (dropdown)
       NCO                     INSTITUTIONAL APPLICATION

   All five are pinned to the same 250 x 44 box so they line up
   across the 2-column student grid and the 3-column institution
   grid. Below 480px they go full width together.

   The dropdown is CSS only - :hover for pointers and :focus-within
   for keyboard and touch, so no script was added to the page.
   Nothing in the chain clips it: section / #apply / card / footer /
   grid all compute overflow: visible.
   ================================================================ */

/* ---------- one identical size for all five ----------
   220 x 38 at 11px is the smallest box that still clears the longest
   label, "INSTITUTIONAL APPLICATION", with room to spare, so the
   five stay equal to each other without swamping the card.

   visibility: a brighter navy than the flat #083C7C the section
   uses for its icon tiles, a deeper drop shadow, and a 1px inset
   highlight along the top edge so the pill reads as a raised
   surface rather than a flat block.

   the legacy rule also pins min-height and max-height to 42px with
   !important, so all three have to be reset or max-height silently
   clamps height back down. */
.odlc-apply-pathways .odlc-pathway-card .odlc-card-action {
    width: 220px !important;
    max-width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex: 0 1 auto !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 14px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;

    background-color: #1b4d9c !important;
    background-image: linear-gradient(90deg, #1b4d9c, #0d2f6b) !important;
    box-shadow:
        0 10px 22px rgba(9, 30, 66, .30),
        inset 0 1px 0 rgba(255, 255, 255, .18) !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.odlc-apply-pathways .odlc-pathway-card .odlc-card-action i {
    font-size: 11px !important;
}
.odlc-apply-pathways .odlc-pathway-card .odlc-card-action:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 16px 30px rgba(9, 30, 66, .38),
        inset 0 1px 0 rgba(255, 255, 255, .24) !important;
    filter: brightness(1.08) !important;
}

/* the dropdown trigger is a <button>, so reset the UA chrome */
.odlc-apply-pathways button.odlc-card-action {
    -webkit-appearance: none !important;
    appearance: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    text-align: center !important;
}

/* ---------- dropdown shell ---------- */
.odlc-apply-pathways .odlc-card-dropdown {
    position: relative !important;
    display: inline-block !important;
    width: 220px !important;
    max-width: 100% !important;
    vertical-align: top !important;
}

/* chevron points down, flips up while the menu is open */
.odlc-apply-pathways .odlc-card-action .bi-chevron-down {
    margin: 0 !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    transition: transform .2s ease !important;
}
.odlc-apply-pathways .odlc-card-dropdown:hover  .odlc-card-action .bi-chevron-down,
.odlc-apply-pathways .odlc-card-dropdown:focus-within .odlc-card-action .bi-chevron-down {
    transform: rotate(180deg) !important;
}

/* ---------- dropdown menu ---------- */
.odlc-apply-pathways .odlc-card-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 40 !important;
    margin: 0 !important;
    padding: 6px !important;
    background: #fff !important;
    border: 1px solid #E4EAF8 !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 40px rgba(16, 42, 90, .18) !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;
}
.odlc-apply-pathways .odlc-card-dropdown:hover .odlc-card-dropdown-menu,
.odlc-apply-pathways .odlc-card-dropdown:focus-within .odlc-card-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* ---------- dropdown items ---------- */
.odlc-apply-pathways .odlc-card-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 14px !important;
    border-radius: 11px !important;
    background: none !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background .18s ease !important;
}
.odlc-apply-pathways .odlc-card-dropdown-item:hover,
.odlc-apply-pathways .odlc-card-dropdown-item:focus-visible {
    background: #F1F5FE !important;
    color: #0B1F4D !important;
    outline: none !important;
}
.odlc-apply-pathways .odlc-card-dropdown-item i {
    margin: 0 !important;
    color: #0B1F4D !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
    transition: color .18s ease, transform .18s ease !important;
}
.odlc-apply-pathways .odlc-card-dropdown-item:hover i {
    color: #0D6EFD !important;
    transform: translateX(3px) !important;
}

/* ---------- GRID ----------
   the institutions grid ran 3 columns from 992px up, where each card
   is only ~252px of content - too narrow for a button wider than
   250px, and the student grid is 2 columns there, so the five
   buttons could never match. dropping institutions to 2 columns
   below 1280 gives both grids the same card width, which lets all
   five sit at the full 330px. at 1280 and above a 3-column card is
   already 336px of content, so the cap applies evenly there.
   bounded at 768px on purpose - below that the legacy grid has
   already collapsed to one column and must be left alone. */
@media (min-width: 768px) and (max-width: 1279px) {
    .odlc-apply-pathways .institutions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ---------- responsive: all five shrink together ---------- */
@media (max-width: 1199px) {
    .odlc-apply-pathways .odlc-pathway-card .odlc-card-action {
        width: 210px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 0 12px !important;
        font-size: 10.5px !important;
        letter-spacing: .1px !important;
    }
    .odlc-apply-pathways .odlc-pathway-card .odlc-card-action i { font-size: 10.5px !important; }
    .odlc-apply-pathways .odlc-card-dropdown { width: 210px !important; }
    .odlc-apply-pathways .odlc-card-dropdown-item { font-size: 11.5px !important; padding: 10px 12px !important; }
    .odlc-apply-pathways .odlc-card-dropdown-item i { font-size: 11.5px !important; }
}

@media (max-width: 767px) {
    .odlc-apply-pathways .odlc-pathway-card .odlc-card-action {
        width: 200px !important;
        max-width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 0 12px !important;
        font-size: 10.5px !important;
        letter-spacing: 0 !important;
    }
    .odlc-apply-pathways .odlc-pathway-card .odlc-card-action i { font-size: 10.5px !important; }
    .odlc-apply-pathways .odlc-card-dropdown { width: 200px !important; max-width: 100% !important; }
    .odlc-apply-pathways .odlc-card-dropdown-item {
        font-size: 11.5px !important;
        letter-spacing: .3px !important;
        white-space: normal !important;
    }
    .odlc-apply-pathways .odlc-card-dropdown-item i { font-size: 11.5px !important; }
}

@media (max-width: 480px) {
    /* legacy let the institution grid's single column compute to
       296.9px inside a 280px container, so those cards were 17px
       wider than the student cards and the buttons never matched.
       minmax(0,1fr) pins both grids to the container width. */
    .odlc-apply-pathways .students-grid,
    .odlc-apply-pathways .institutions-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }

    /* full width, so the two-button footers stack as even bars */
    .odlc-apply-pathways .odlc-pathway-card .odlc-card-action {
        width: 100% !important;
        max-width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 0 12px !important;
        font-size: 11px !important;
        letter-spacing: .2px !important;
    }
    .odlc-apply-pathways .odlc-pathway-card .odlc-card-action i { font-size: 11px !important; }
    .odlc-apply-pathways .odlc-card-dropdown {
        width: 100% !important;
        max-width: 100% !important;
    }
    .odlc-apply-pathways .odlc-card-dropdown-item { font-size: 12px !important; letter-spacing: .4px !important; }
    .odlc-apply-pathways .odlc-card-dropdown-item i { font-size: 12px !important; }
}


/* ================================================================
   RECOGNITION STRIP  -  ICON STYLE + HEADING / PARAGRAPH TYPE ONLY
   Appended to index.css. Nothing above this point is modified.

   Deliberately narrow: this block touches ONLY the icon fill and
   the h4 / p typography. The strip's layout is left exactly as it
   is - no change to the wrapper width, the grid, the flex rows, the
   padding, the dividers, the border, the radius of the items, or the
   section padding. An earlier attempt converted these into cards and
   was reverted; this is the version that only restyles the type.

   Matched to the card type used in Digital Credentials, Career
   Support and ODLC Mobile App:

       h4   20px / 800 / #0B1F4D
       p    15px / #5B6B85

   and to the same three icon tints used by the app section cards:

       blue    bg #E7EEFE  glyph #2563eb
       purple  bg #F1E9FE  glyph #7c3aed
       green   bg #DFF6EE  glyph #059669

   Before: icon fill rgba(54,130,255,.25) with a #00A8FF glyph on all
   three; h4 14px / 700 / #26334F; p 16px / #17203D - so the
   description was set larger than its own heading.
   ================================================================ */

/* ---------- ICONS: solid tint + strong glyph, same 60px box ---------- */
.recognition-section .recognition-feature-icon {
    --c: #2563eb;
    --glow: #E7EEFE;

    border-radius: 14px !important;
    background: var(--glow) !important;
    background-image: none !important;
    box-shadow: none !important;
}
.recognition-section .recognition-feature-icon.blue   { --c: #2563eb; --glow: #E7EEFE; }
.recognition-section .recognition-feature-icon.purple { --c: #7c3aed; --glow: #F1E9FE; }
.recognition-section .recognition-feature-icon.green  { --c: #059669; --glow: #DFF6EE; }

.recognition-section .recognition-feature-icon i {
    color: var(--c) !important;
}

/* ---------- HEADING ---------- */
.recognition-section .recognition-feature h4 {
    margin: 0 0 6px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
    text-align: left !important;
    text-transform: none !important;
}

/* ---------- PARAGRAPH ---------- */
.recognition-section .recognition-feature p {
    margin: 0 !important;
    color: #5B6B85 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

/* ---------- the white strip keeps its 16px corners ---------- */
.recognition-section .recognition-features {
    border-radius: 16px !important;
}

/* ---------- the navy block behind the photo, also squared ----------
   it was border-radius 18px with overflow hidden, which is what
   curved the top-left and top-right of the whole section.
   overflow stays hidden so the photo is still clipped to the box. */
.recognition-section .recognition-wrapper {
    border-radius: 0 !important;
}

/* ---------- the strip needs a little more breathing room now that
   the type is larger, but no position or layout change ---------- */
@media (max-width: 480px) {
    .recognition-section .recognition-feature h4 { font-size: 17px !important; }
    .recognition-section .recognition-feature p { font-size: 14px !important; }
}


/* ================================================================
   LEARNER EXPERIENCES  -  TEXT ALIGNED WITH THE SECTIONS ABOVE
   Appended to index.css. Nothing above this point is modified.

   Same standard as Ecosystem / Why ODLC / Our Programmes /
   ODLC Mobile App / Digital Credentials / Career Support /
   Apply With ODLC:

       section tag   11px / 700 / #0D6EFD / ls 1px / uppercase
       h2            35px / 800 / #0B1F4D / lh 1.25 / ls -1.2px
                     max-width 950px
       accent span   linear-gradient(90deg,#6d4dff,#4bb8ff)
       description   16px / #666 / lh 1.6
       card          white, 1px #E4EAF8, radius 18px,
                     0 8px 20px rgba(16,42,90,.06)
       card heading  20px / 800 / #0B1F4D
       card text     15px / #5B6B85
       container     92% / max-width 1380px / margin 0 auto
       section pad   48px

   What changed here, measured before the edit:
       container        1425px full-bleed with 40px side padding,
                        left 0, max-width 1500px - so it sat at
                        0..1425 against the sections above at
                        57..1368
       section padding  55px / 45px
       tag              13px / 700 / #2866D9 / ls .4px / not
                        uppercase, on a #EAF1FF pill, radius 50px
       h2               35px / 800 / #0B204D / ls -0.8px / no
                        max-width
       h2 span          flat #315CE8, no gradient
       description      16px / #344054
       card             radius 15px, 0 8px 25px rgba(35,69,130,.08)
       card h4          25px / 750 / #111827
       card text        16px / #344054

   The header stays centred - it sits above a centred carousel, so
   centring is the layout here, not an inconsistency. The gold star
   rating and the Google mark are brand elements and are left alone.
   ================================================================ */

/* ---------- CONTAINER ---------- */
.testimonial-section {
    padding: 48px 0 !important;
}
.testimonial-section .testimonial-container {
    width: 92% !important;
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---------- SECTION TAG ---------- */
.testimonial-section .testimonial-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #0D6EFD !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.testimonial-section .testimonial-badge i {
    margin: 0 !important;
    color: #0D6EFD !important;
    font-size: 14px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
}

/* ---------- HEADING ----------
   margin auto is required as well as text-align center: max-width
   950px turns the h2 into a 950px block, and without auto margins
   that block sat hard against the left edge of the 1311px
   container, so the centred text inside it was off-centre too. */
.testimonial-section .testimonial-header h2 {
    margin: 0 auto 22px !important;
    max-width: 950px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 35px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -1.2px !important;
    text-align: center !important;
    text-transform: none !important;
}
.testimonial-section .testimonial-header h2 span {
    background: linear-gradient(90deg, #6d4dff, #4bb8ff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #6d4dff !important;
}

/* ---------- the dotted decoration either side of the header is
   switched off, as asked ---------- */
.testimonial-section .testimonial-dots-left,
.testimonial-section .testimonial-dots-right {
    display: none !important;
}

/* ---------- divider under the heading ---------- */
.testimonial-section .testimonial-line {
    width: 42px !important;
    height: 4px !important;
    margin: 0 auto 18px !important;
    border-radius: 20px !important;
    background: #0D6EFD !important;
}

/* ---------- DESCRIPTION ---------- */
.testimonial-section .testimonial-header p {
    max-width: 620px !important;
    margin: 0 auto !important;
    color: #666 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* ---------- CARDS ---------- */
.testimonial-section .testimonial-card {
    background: #fff !important;
    border: 1px solid #E4EAF8 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 20px rgba(16, 42, 90, .06) !important;
    padding: 24px 24px 22px !important;
    height: 100% !important;
}
.testimonial-section .testimonial-user h4 {
    margin: 0 !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
    text-align: left !important;
    text-transform: none !important;
}
.testimonial-section .testimonial-text {
    margin: 0 !important;
    color: #5B6B85 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

/* the gold rating and the Google mark stay as they are */

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

@media (max-width: 767px) {
    .testimonial-section .testimonial-container { width: 90% !important; }
    .testimonial-section .testimonial-header h2 {
        font-size: 30px !important;
        letter-spacing: -1px !important;
    }
    .testimonial-section .testimonial-header p { font-size: 15px !important; }
    .testimonial-section .testimonial-user h4 { font-size: 18px !important; }
    .testimonial-section .testimonial-text { font-size: 14px !important; }
}

@media (max-width: 480px) {
    .testimonial-section .testimonial-container { width: 92% !important; }
    .testimonial-section .testimonial-card { padding: 20px 18px 18px !important; }
    .testimonial-section .testimonial-user h4 { font-size: 17px !important; }
    .testimonial-section .testimonial-text { font-size: 13.5px !important; }
}


/* ================================================================
   LATEST FROM ODLC  -  TEXT ALIGNED WITH THE SECTIONS ABOVE
   Appended to index.css. Nothing above this point is modified.

   Same standard as Ecosystem / Why ODLC / Our Programmes /
   ODLC Mobile App / Digital Credentials / Career Support /
   Apply With ODLC / Learner Experiences:

       section tag   11px / 700 / #0D6EFD / ls 1px / uppercase
       h2            35px / 800 / #0B1F4D / lh 1.25 / ls -1.2px
                     max-width 950px
       accent span   linear-gradient(90deg,#6d4dff,#4bb8ff)
       description   16px / #666 / lh 1.6
       card heading  20px / 800 / #0B1F4D
       card text     15px / #5B6B85
       container     92% / max-width 1380px / margin 0 auto

   What changed here, measured before the edit:
       container      1425px full-bleed with 40px side padding,
                      left 0, max-width 1500px - against the
                      sections above at 57..1368
       tag            14px / 700 / #2364D8 / ls .4px on a
                      #EAF1FF pill, radius 50px
       h2             48px / 800 / #0B1538 / ls -1px / no max-width
       h2 span        gradient #5C4CFF -> #3DA9FF, off-palette
       description    16px / #667085 / lh 28px
       card           radius 18px, 0 8px 25px rgba(36,65,120,.08)
       card heading   19px / 750 / #101D42
       card text      14px / #667085
       category       14px / 700 / #2460D7 on #EDF3FF
       read more      14px / 700 / #155BD7

   The header stays centred, matching Learner Experiences - both sit
   above a centred card row. The section padding was already 48px.
   The .blog-title-line is a decorative 850px rule, not text, and is
   left exactly as it is.
   ================================================================ */

/* ---------- CONTAINER ---------- */
.blog-section .blog-container {
    width: 92% !important;
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---------- SECTION TAG ---------- */
.blog-section .blog-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #0D6EFD !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.blog-section .blog-badge i {
    margin: 0 !important;
    color: #0D6EFD !important;
    font-size: 14px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
}

/* ---------- HEADING ---------- */
/* h2.blog-title is needed here: a legacy ".blog-section .text-center
   h2" rule also carries !important on font-size and outranks a
   plain .blog-section .blog-title selector, which is why the size
   was stuck at 48px while every other property in this block
   applied correctly. */
.blog-section .blog-header h2.blog-title {
    margin: 0 0 22px !important;
    max-width: 950px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 35px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -1.2px !important;
    text-align: center !important;
    text-transform: none !important;
}
.blog-section .blog-title span {
    background: linear-gradient(90deg, #6d4dff, #4bb8ff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #6d4dff !important;
}

/* ---------- DESCRIPTION ---------- */
.blog-section .blog-description {
    max-width: 620px !important;
    margin: 0 auto !important;
    color: #666 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* ---------- CARDS ---------- */
.blog-section .blog-card {
    background: #fff !important;
    border: 1px solid #E4EAF8 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 20px rgba(16, 42, 90, .06) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}
.blog-section .blog-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 32px rgba(16, 42, 90, .12) !important;
}

.blog-section .blog-category {
    color: #0D6EFD !important;
    background: #E7EEFE !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.blog-section .blog-card h3,
.blog-section .blog-card h4 {
    margin: 0 0 8px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
    text-align: left !important;
    text-transform: none !important;
}
.blog-section .blog-card-content p {
    margin: 0 !important;
    color: #5B6B85 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    text-align: left !important;
}
.blog-section .blog-read-more {
    color: #0D6EFD !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
}
.blog-section .blog-read-more:hover { color: #0B1F4D !important; }

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

@media (max-width: 767px) {
    .blog-section .blog-container { width: 90% !important; }
    .blog-section .blog-title {
        font-size: 30px !important;
        letter-spacing: -1px !important;
    }
    .blog-section .blog-description { font-size: 15px !important; }
    .blog-section .blog-card h3,
    .blog-section .blog-card h4 { font-size: 18px !important; }
    .blog-section .blog-card-content p { font-size: 14px !important; }
}

@media (max-width: 480px) {
    .blog-section .blog-container { width: 92% !important; }
    .blog-section .blog-card h3,
    .blog-section .blog-card h4 { font-size: 17px !important; }
    .blog-section .blog-card-content p { font-size: 13.5px !important; }
}


/* ================================================================
   FREQUENTLY ASKED QUESTIONS  -  TEXT ALIGNED WITH THE SECTIONS ABOVE
   Appended to index.css. Nothing above this point is modified.

   Same standard as Ecosystem / Why ODLC / Our Programmes /
   ODLC Mobile App / Digital Credentials / Career Support /
   Apply With ODLC / Learner Experiences / Latest from ODLC:

       section tag   11px / 700 / #0D6EFD / ls 1px / uppercase
       h2            35px / 800 / #0B1F4D / lh 1.25 / ls -1.2px
                     max-width 950px
       accent span   linear-gradient(90deg,#6d4dff,#4bb8ff)
       description   16px / #666 / lh 1.6
       card          white, 1px #E4EAF8, radius 18px,
                     0 8px 20px rgba(16,42,90,.06)
       question      18px / 700 / #0B1F4D
       answer        15px / #5B6B85
       container     92% / max-width 1380px / margin 0 auto
       section pad   48px

   What changed here, measured before the edit:
       container      1425px full-bleed with 40px side padding,
                      left 0, max-width 1500px - against the
                      sections above at 57..1368
       section pad    70px / 65px
       tag            12px / 700 / #1764DC / ls .5px / not
                      uppercase, on a #EDF3FF pill, radius 30px
       h2             35px / 800 / #0B1B45 / ls -1px / no max-width
       h2 span        gradient #315CFF -> #7650FF, off-palette
       description    16px / #667085
       item           radius 9px, 0 4px 15px rgba(30,60,120,.043)
       question       14px / 650 / #17233F
       answer         14px / #17203D
       more button    15px / 600

   The h2 and the description carry no class in the markup, so they
   are reached through .faq-header. The header stays centred, like
   Learner Experiences and Latest from ODLC - all three sit above a
   centred block. The numbered circle on each question and the
   VIEW MORE button keep their own colours.
   ================================================================ */

/* ---------- SECTION + CONTAINER ---------- */
.faq-section {
    padding: 48px 0 !important;
}
.faq-section .faq-container {
    width: 92% !important;
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---------- SECTION TAG ---------- */
.faq-section .faq-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #0D6EFD !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.faq-section .faq-badge i {
    margin: 0 !important;
    color: #0D6EFD !important;
    font-size: 14px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
}

/* ---------- HEADING ----------
   margin auto is required as well as text-align center, otherwise
   the max-width box sits against the left edge and the centred text
   inside it is off-centre. */
.faq-section .faq-header h2 {
    margin: 0 auto 22px !important;
    max-width: 950px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 35px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -1.2px !important;
    text-align: center !important;
    text-transform: none !important;
}
.faq-section .faq-header h2 span {
    background: linear-gradient(90deg, #6d4dff, #4bb8ff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #6d4dff !important;
}

/* ---------- DESCRIPTION ---------- */
.faq-section .faq-header p {
    max-width: 620px !important;
    margin: 0 auto !important;
    color: #666 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* ---------- QUESTION ITEMS ----------
   padding is deliberately left at 0: .faq-question and
   .faq-answer-wrapper carry their own padding, and adding card
   padding on the item as well would double every inset. */
.faq-section .faq-item {
    background: #fff !important;
    border: 1px solid #E4EAF8 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 20px rgba(16, 42, 90, .06) !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    transition: box-shadow .2s ease, border-color .2s ease !important;
}
.faq-section .faq-item:hover,
.faq-section .faq-item.active {
    border-color: #C9D8F6 !important;
    box-shadow: 0 12px 28px rgba(16, 42, 90, .10) !important;
}

/* ---------- QUESTION + ANSWER TEXT ---------- */
.faq-section .faq-question-text {
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.2px !important;
}
.faq-section .faq-answer {
    color: #5B6B85 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}

/* the numbered circle keeps its own fill */
.faq-section .faq-number {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

/* ---------- VIEW MORE BUTTON ---------- */
.faq-section .faq-more-btn {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
    line-height: 1.2 !important;
    border-radius: 50px !important;
}

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

@media (max-width: 767px) {
    .faq-section .faq-container { width: 90% !important; }
    .faq-section .faq-header h2 {
        font-size: 30px !important;
        letter-spacing: -1px !important;
    }
    .faq-section .faq-header p { font-size: 15px !important; }
    .faq-section .faq-question-text { font-size: 16.5px !important; }
    .faq-section .faq-answer { font-size: 14px !important; }
}

@media (max-width: 480px) {
    .faq-section .faq-container { width: 92% !important; }
    .faq-section .faq-question-text { font-size: 15.5px !important; }
    .faq-section .faq-answer { font-size: 13.5px !important; }
}


/* ================================================================
   START YOUR ODLC JOURNEY  -  TEXT ALIGNED WITH THE SECTIONS ABOVE
   Appended to index.css. Nothing above this point is modified.

   Same standard as Ecosystem / Why ODLC / Our Programmes /
   ODLC Mobile App / Digital Credentials / Career Support /
   Apply With ODLC / Learner Experiences / Latest from ODLC /
   Frequently Asked Questions:

       section tag   11px / 700 / #0D6EFD / ls 1px / uppercase
       h2            35px / 800 / #0B1F4D / lh 1.25 / ls -1.2px
                     max-width 950px
       accent span   linear-gradient(90deg,#6d4dff,#4bb8ff)
       description   16px / #666 / lh 1.6
       container     92% / max-width 1380px / margin 0 auto
       section pad   48px

   What changed here, measured before the edit:
       container       already 92% but with no max-width, so above
                       ~1500px it ran wider than the sections above
       section pad     90px / 90px
       tag             13px / 700 / #083C7C / ls .7px / not
                       uppercase, on a #EAF2FC pill, radius 30px
       h2              35px / 800 / #0B1F4D / ls -1px / max-w 720px
       h2 span         flat #083C7C, no gradient
       description     16px / #667085 / text-align justify
       buttons         radius 7px, flat #083C7C fill
       support links   15px / 600 / #52677D

   The right-hand visual - the concentric circles, the card and the
   floating chip - is left exactly as it is.
   ================================================================ */

/* ---------- SECTION + CONTAINER ---------- */
.odlc-final-cta {
    padding: 48px 0 !important;
}
.odlc-final-cta .odlc-final-cta-container {
    width: 92% !important;
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---------- SECTION TAG ---------- */
.odlc-final-cta .odlc-final-cta-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #0D6EFD !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.odlc-final-cta .odlc-final-cta-label i {
    margin: 0 !important;
    color: #0D6EFD !important;
    font-size: 14px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
}

/* ---------- HEADING ---------- */
.odlc-final-cta .odlc-final-cta-content h2 {
    margin: 0 0 20px !important;
    max-width: 950px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 35px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -1.2px !important;
    text-align: left !important;
    text-transform: none !important;
}
.odlc-final-cta .odlc-final-cta-content h2 span {
    background: linear-gradient(90deg, #6d4dff, #4bb8ff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #6d4dff !important;
}

/* ---------- DESCRIPTION ---------- */
.odlc-final-cta .odlc-final-cta-content p {
    max-width: 650px !important;
    margin: 0 0 28px !important;
    color: #666 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

/* ---------- BUTTONS ---------- */
.odlc-final-cta .odlc-final-cta-buttons {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin: 0 0 22px !important;
}
.odlc-final-cta .odlc-final-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 14px 26px !important;
    border-radius: 50px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.odlc-final-cta .odlc-final-btn i {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}
.odlc-final-cta .odlc-final-btn.primary {
    background: #123a75 !important;
    background-image: linear-gradient(90deg, #123a75, #0b2450) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(11, 37, 80, .24) !important;
}
.odlc-final-cta .odlc-final-btn.primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 30px rgba(11, 37, 80, .32) !important;
    filter: brightness(1.06) !important;
    color: #fff !important;
}
.odlc-final-cta .odlc-final-btn.secondary {
    background: #fff !important;
    border: 1px solid #E4EAF8 !important;
    color: #0B1F4D !important;
    box-shadow: 0 6px 14px rgba(16, 42, 90, .06) !important;
}
.odlc-final-cta .odlc-final-btn.secondary:hover {
    transform: translateY(-2px) !important;
    border-color: #C9D8F6 !important;
    box-shadow: 0 10px 22px rgba(16, 42, 90, .12) !important;
    color: #0B1F4D !important;
}

/* ---------- SUPPORTING LINKS ---------- */
.odlc-final-cta .odlc-final-support-links {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.odlc-final-cta .odlc-final-support-links a {
    color: #0D6EFD !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    transition: color .18s ease !important;
}
.odlc-final-cta .odlc-final-support-links a:hover {
    color: #0B1F4D !important;
    text-decoration: underline !important;
}
.odlc-final-cta .odlc-final-support-links span {
    color: #C3CDDE !important;
}

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

@media (max-width: 767px) {
    .odlc-final-cta .odlc-final-cta-container { width: 90% !important; }
    .odlc-final-cta .odlc-final-cta-content h2 {
        font-size: 30px !important;
        letter-spacing: -1px !important;
    }
    .odlc-final-cta .odlc-final-cta-content p { font-size: 15px !important; }
    .odlc-final-cta .odlc-final-btn { padding: 13px 20px !important; font-size: 13px !important; }
    .odlc-final-cta .odlc-final-btn i { font-size: 13px !important; }
}

@media (max-width: 480px) {
    .odlc-final-cta .odlc-final-cta-container { width: 92% !important; }
    .odlc-final-cta .odlc-final-cta-buttons { width: 100% !important; }
    .odlc-final-cta .odlc-final-btn {
        width: 100% !important;
        padding: 13px 16px !important;
    }
    .odlc-final-cta .odlc-final-support-links a { font-size: 13.5px !important; }
}


/* ================================================================
   START YOUR ODLC JOURNEY  -  "BECOME AN ALC" DROPDOWN
   Appended to index.css. Nothing above this point is modified.

   "Become an ALC" was a dead <a href="#"> in the supporting link
   row. It is now a dropdown with the two application routes that
   already exist on the ALC card in the Apply With ODLC section
   above, so the two agree on their destinations:

       Apply - Indian ALC        odlc.in/alc.php
       Apply - International ALC odlc.in/alc-international/alc_international.php

   CSS only, matching the ALC / RCO dropdowns already built in that
   section - :hover for pointers, :focus-within for keyboard and
   touch, so no script was added.

   The legacy rules put overflow: hidden on both
   .odlc-final-cta and .odlc-final-cta-container, which would have
   clipped the menu the moment it opened below the link row. Both
   are set back to visible here. Nothing depends on the old
   clipping: the decorative circles in the right-hand visual are
   inside .odlc-final-cta-visual, which keeps its own
   overflow: hidden and still clips them.
   ================================================================ */

.odlc-final-cta,
.odlc-final-cta .odlc-final-cta-container {
    overflow: visible !important;
}

/* ---------- the wrapper sits in the link row ---------- */
.odlc-final-cta .odlc-final-dropdown {
    position: relative !important;
    display: inline-block !important;
    vertical-align: top !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- trigger, styled to match the other links ---------- */
.odlc-final-cta .odlc-final-dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #0D6EFD !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: color .18s ease !important;
}
.odlc-final-cta .odlc-final-dropdown-toggle:hover {
    color: #0B1F4D !important;
    text-decoration: underline !important;
}
.odlc-final-cta .odlc-final-dropdown-toggle i {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: transform .2s ease !important;
}
.odlc-final-cta .odlc-final-dropdown:hover  .odlc-final-dropdown-toggle i,
.odlc-final-cta .odlc-final-dropdown:focus-within .odlc-final-dropdown-toggle i {
    transform: rotate(180deg) !important;
}

/* ---------- menu ---------- */
.odlc-final-cta .odlc-final-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    z-index: 40 !important;
    display: block !important;
    min-width: 232px !important;
    margin: 0 !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, .18) !important;
    text-align: left !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-6px) !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
}
.odlc-final-cta .odlc-final-dropdown:hover .odlc-final-dropdown-menu,
.odlc-final-cta .odlc-final-dropdown:focus-within .odlc-final-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* ---------- items ---------- */
.odlc-final-cta .odlc-final-dropdown-item {
    display: block !important;
    padding: 11px 14px !important;
    border-radius: 10px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    transition: background .18s ease, color .18s ease !important;
}
.odlc-final-cta .odlc-final-dropdown-item:hover,
.odlc-final-cta .odlc-final-dropdown-item:focus-visible {
    background: #F1F5FE !important;
    color: #0D6EFD !important;
    outline: none !important;
    text-decoration: none !important;
}

/* ---------- responsive ---------- */
@media (max-width: 480px) {
    .odlc-final-cta .odlc-final-dropdown-menu {
        min-width: 210px !important;
    }
    .odlc-final-cta .odlc-final-dropdown-item {
        padding: 10px 12px !important;
        font-size: 13px !important;
        white-space: normal !important;
    }
}


/* ================================================================
   WHY ODLC  -  EXPLORE ODLC BUTTON FIT AND SPACING
   Appended to css/index.css. Nothing above this point is modified.

   THE BUG, measured on the live page rather than read from the CSS

   The button is not a child of a wrapper - it is the third child of
   .odlc-why-grid itself, so it is a GRID ITEM:

       [0] DIV.odlc-why-cards
       [1] DIV.odlc-why-shot
       [2] A.contact-btn

   Two old rules were written when it lived inside .left-content and
   assumed a different parent, and both now fight the grid:

     line 32114  .choose-odlc .contact-btn {
                     width: calc(50% - 22px) !important;
                     min-width: 0 !important;
                 }
                 That 50% was "half the left-hand column". Inside a
                 grid the percentage resolves against the grid AREA,
                 not the column, so at 1024px and below - where the
                 grid collapses to one column - the button became
                 48% of the full width, about 450px. At 320px it
                 became 118px, too narrow to hold its own label at
                 the padding it was given, so the text was being
                 squeezed into 78px of content box.

     line 34692  .choose-odlc .contact-btn {
                     width: fit-content;
                     margin: 30px auto 0 !important;
                 }
                 margin: auto centres a grid item only if it does
                 not stretch. justify-self defaults to stretch, so
                 in the 2-column layout the button was pinned to
                 column 1 and centred inside THAT column - 341px left
                 of the section centre at 1440px, which is the
                 off-centre button in the screenshot.

   Measured, before this fix:

       vw    grid width   button width   % of grid   off-centre
       1440  1311px       292px          22%         -341px
       1024   948px       452px          48%           0px
       768    708px       332px          47%          -1px
       480    428px       192px          45%          -1px
       320    280px       118px          42%           0px

   THE FIX

   The button is taken out of the grid's flow entirely. It becomes
   a normal centred block below the grid, which is what the layout
   was always trying to do:

       grid-area: unset      - stop treating it as a grid item, so
                                no column or row is reserved for it
                                and the two content blocks keep the
                                full height of the grid
       justify-self / align-self are then irrelevant, and a fixed
       width is finally safe.

   One width for every device, matching the buttons the user has
   already signed off elsewhere on the site - the Apply With ODLC
   cards use 220x38 and the final-CTA pills are 190-240 wide. This
   is 240px, which holds "EXPLORE ODLC" at 15px/700 without
   wrapping and leaves symmetric air on both sides.

   Spacing comes from margin-top, not from the grid's row-gap: the
   grid sets row-gap: 0 at desktop (the two columns sit side by
   side) and 40px once it stacks, and taking the button out of the
   grid means the row-gap no longer reaches it. A single
   margin-top keeps the gap from the cards and from the photo
   identical at every width, instead of the 30px and the 40px
   fighting each other.

   Colours, the 10px radius, the 15px/700 type, the hover state and
   the wording are all left as they were. Only the box model and
   the spacing change.
   ================================================================ */

/* ---------- take it out of the grid flow ---------- */
.choose-odlc .odlc-why-grid .contact-btn {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
    align-self: auto !important;
    grid-area: unset !important;
}

/* ---------- one box, centred, at every width ---------- */
.choose-odlc .contact-btn {
    /* auto margins centre a block, which is what is wanted now that
       the button is no longer a grid item */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* a real width, not a percentage of whatever the parent is and
       not fit-content, which varies with the font */
    width: 240px !important;
    min-width: 240px !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
    height: 54px !important;
    min-height: 54px !important;

    /* Left-aligned, not centred.

       At desktop the grid is two columns - the cards on the left and
       the photo on the right - and the button sits below the grid as
       a normal block. Centring it across the full width put it in
       the GUTTER between the two columns, so it lined up with
       neither the cards nor the photo and read as floating in the
       gap.

       margin-left 0 pins its left edge to the same vertical line as
       the cards and the heading above them, which is the alignment
       the section already shares. Below 1200px the grid collapses
       to a single column and the button is centred instead - see
       the media query below. */
    margin: 30px 0 0 !important;
    padding: 0 20px !important;

    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;

    background: #0A56D8 !important;
    border: 2px solid #0A56D8 !important;
    border-radius: 10px !important;
    color: #ffffff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}
.choose-odlc .contact-btn:hover {
    background: #003eb8 !important;
    border-color: #003eb8 !important;
    color: #ffffff !important;
}

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

   The label and padding shrink, the box does not grow, and the
   spacing above tightens in step with the section padding used by
   the rest of the page (48px on desktop, 40px on mobile). The
   240px width holds at every one of these, so the button keeps one
   size all the way down to 320px rather than stretching with the
   column.
   ================================================================ */

@media (max-width: 1199px) {
    .choose-odlc .contact-btn {
        /* the grid is one column here, so the button spans the full
           content width and reads as centred rather than hanging off
           the left edge the way it does beside two columns */
        margin: 26px auto 0 !important;
    }
}

@media (max-width: 767px) {
    .choose-odlc .contact-btn {
        width: 226px !important;
        min-width: 226px !important;
        height: 50px !important;
        min-height: 50px !important;
        margin-top: 22px !important;
        padding: 0 18px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .choose-odlc .contact-btn {
        width: 212px !important;
        min-width: 212px !important;
        height: 48px !important;
        min-height: 48px !important;
        margin-top: 20px !important;
        padding: 0 16px !important;
        font-size: 14px !important;
        border-radius: 9px !important;
    }
}

@media (max-width: 360px) {
    .choose-odlc .contact-btn {
        /* the old 50%-of-parent rule applied at this width and is the
           one that squeezed the label; a fixed box is used instead */
        width: 200px !important;
        min-width: 200px !important;
        max-width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        margin-top: 18px !important;
        font-size: 13.5px !important;
        padding: 0 14px !important;
    }
}


/* ================================================================
   FAQ BAND - TRIM THE DEAD SPACE BELOW THE "VIEW ALL FAQs" BUTTON
   Appended to css/index.css. Nothing above this point is modified.

   Measured on the live page, mobile (390px):

     btn.bottom  ->  .odlc-final-cta top        =  48px
     btn.bottom  ->  first text in the CTA      = 129px

   That 129px breaks down as:

     48px   .faq-section padding-bottom
     48px   .odlc-final-cta padding-top
     33px   the CTA card own internal top padding

   The 48px from .faq-section is the problem. It is a trailing
   element - the button is the last thing inside the band - so it
   sits directly above the next section, and the two 48px section
   paddings stack. Every other band on the page has content
   between its padding-bottom and the next band, so the same 48px
   reads as normal rhythm there. Here it is 48px of nothing
   followed immediately by another 48px of nothing.

   The site standard is 48px of section padding, and the CTA
   already contributes its own 48px. So the FAQ band padding is
   reduced to 0 at the widths where the stacking is visible and
   the total space under the button becomes the standard 48px
   from the next section, plus that section own card padding.

   The button itself is not touched: no change to its height,
   width, colours, radius, font, or the 22px margin above it.
   ================================================================ */

@media (max-width: 767px) {
    .faq-section {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 480px) {
    .faq-section {
        padding-bottom: 0 !important;
    }
}


/* ================================================================
   ALC / RCO CARD DROPDOWNS - OPEN ON TAP
   Appended to css/index.css. Nothing above this point is modified.

   The problem, measured on the live page at 390px.

     .odlc-card-dropdown-menu computed state, before any tap:
       position   : absolute
       top        : 46px
       width      : 312px   (identical to the button)
       height     : 82px    (2 items x 34px + 6px padding x2)
       opacity    : 0
       visibility : hidden

     The two links ARE laid out correctly and have real geometry -
     they are not collapsed or zero-sized. They are simply held
     at opacity 0 / visibility hidden.

   That hidden state is only ever undone by these two selectors:

       .odlc-card-dropdown:hover        .odlc-card-dropdown-menu
       .odlc-card-dropdown:focus-within .odlc-card-dropdown-menu

   Neither one fires from a tap on a touch screen. There is no
   hover, and on a phone a tap on a <button> gives it focus only
   for as long as the tap lasts, so :focus-within drops again
   immediately. The measured result on a 390px viewport was
   visibility:hidden both after a synthetic hover and after
   button.focus(). The menu opened only while focus was held
   programmatically - which is why it can look like it works when
   tested with a mouse and does nothing on a real device.

   Nothing here is a layout fault and nothing needed re-measuring:
   the ancestors are all overflow:visible, the menu is a direct
   child of the position:relative card, and z-index is already 40.
   The only missing piece was a state that a tap can set.

   The fix follows the pattern the DOWNLOAD APP menu on this same
   page already uses at index.css:30653 - a .active class on the
   wrapper, toggled by a click handler - so the two dropdowns in
   the footer-adjacent hero and the two on these cards behave
   identically. The existing :hover and :focus-within rules are
   left in place, so a desktop mouse still opens them with no
   JavaScript at all.

   z-index is raised from 40 to 60 on the open state only. The
   menu is 82px tall and drops below the card, so at 40 it sat
   level with the next card in the grid; 60 puts it clearly in
   front without changing any of the colours, sizes, spacing or
   the two destination URLs.
   ================================================================ */

.odlc-apply-pathways .odlc-card-dropdown.open .odlc-card-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    z-index: 60 !important;

    /* The base rule transitions "visibility .2s". A transition
       on visibility that starts from a hidden element does not
       advance on its own, so the menu stayed pinned at the
       hidden start value even with .open applied. Re-declaring
       the transition here WITHOUT visibility makes the change
       to visible apply on the same frame; opacity and transform
       keep their .2s animation exactly as before. */
    transition: opacity .2s ease, transform .2s ease !important;
}

/* rotate the chevron on the opened card, matching the hover state */
.odlc-apply-pathways .odlc-card-dropdown.open .odlc-card-action .bi-chevron-down {
    transform: rotate(180deg) !important;
}


/* ================================================================
   ALC / RCO DROPDOWN - MOBILE: OPEN IN FLOW, NOT OVER THE NEXT CARD
   Appended to css/index.css. Nothing above this point is modified.

   What it was, measured on the live page at 390px with the ALC
   menu open:

     ALC card        top -9414  bottom -9190   height 224px
     dropdown wrap   top -9245  bottom -9207   height  38px
     menu (open)     top -9205  bottom -9116   height  82px
     RCO card        top -9172

   The menu is position:absolute, so it contributes no height to
   anything. The card stayed 224px tall while the menu hung 68px
   below it and landed ON TOP of the RCO card underneath - which
   is why only the first link, "INDIAN ALC", could be seen and
   "INTERNATIONAL ALC" was hidden behind the next card. A raised
   z-index alone does not fix that: the two cards are siblings in
   a grid row stack, so a lifted menu would still sit over the
   card text rather than pushing it aside.

   On a phone the two cards are stacked in a single 345px column
   (grid cols=1, gap=18px, measured), so there is no room beside
   the card for an overlay. The fix is to let the open menu take
   up real space on mobile only:

     - position becomes static, so the menu is laid out in flow
       inside the card footer and the card grows to fit it;
     - the grid row grows with the card, so the RCO card below is
       pushed down instead of being covered;
     - width 100% lines the menu up with the button and the card
       padding, instead of the 8px overhang the absolute version
       had;
     - the top offset, the negative translate and the now-unneeded
       z-index are reset, since none of them apply to a static
       box;
     - the 18px grid gap plus a small margin above the menu keeps
       the open menu clear of the card divider above it.

   Only the .open state is changed, and only at 767px and below.
   From 768px up the cards are in a multi-column row with space
   beside them, so the menu stays an overlay exactly as before and
   the desktop hover / focus-within behaviour is untouched.

   The button, the two link destinations, the colours, the 12px
   uppercase link type and the 11px button type are all as they
   were.
   ================================================================ */

/* The breakpoint was 767px when this was written for phones only.
   It is now 1199px, because measuring the open menu across the whole
   range showed the same collision on a tablet:

     vw    grid cols   card h   menu hangs   overlaps the card
                              below card        below by
     1440        3        245px        67px      (none in that row)
     1280        3        246px        66px      (none in that row)
     1199        2        246px        66px          48px
     1100        2        242px        62px          44px
     1024        2        242px        62px          44px
     992         2        242px        62px          44px
     900         2        242px        62px          44px
     820         2        241px        63px          45px
     768         2        265px        62px          44px
     700         1        234px        66px       clear by 43px

   From 992px down the institutions grid is two columns, so the card
   that opens has another card directly underneath it, and the
   absolute menu - which contributes no height to anything - lands on
   top of it. That is the clipped first-link / hidden second-link
   appearance.

   The 3-column layout from 1200px up is deliberately left as an
   overlay: there the neighbours are side by side, z-index 60 lifts
   the menu in front of them, and both links measure as visible, so
   the conventional desktop dropdown still works with a mouse.

   Everything else in this block is unchanged from the phone version.
*/
@media (max-width: 1199px) {

    .odlc-apply-pathways .odlc-card-dropdown.open .odlc-card-dropdown-menu {
        position: static !important;

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

        width: 100% !important;
        max-width: 100% !important;

        margin: 10px 0 0 !important;
        transform: none !important;

        z-index: auto !important;
    }

    /* the card has to be allowed to grow; it also has to sit above
       its own shadow, so lift only the card that is open */
    .odlc-apply-pathways .odlc-pathway-card:has(.odlc-card-dropdown.open) {
        z-index: 2 !important;
    }

    /* a hairline above the menu so it reads as attached to the
       button rather than floating inside the card */
    .odlc-apply-pathways .odlc-card-dropdown.open .odlc-card-dropdown-menu {
        border-color: #D6E1F2 !important;
        box-shadow: 0 10px 24px rgba(16, 42, 90, .14) !important;
    }
}


/* ================================================================
   HERO IMAGE - ONE COPY PER BREAKPOINT, PLACED IN THE TEXT COLUMN
   ON MOBILE
   Replaces the block appended in the previous step, which is removed
   rather than left to contradict this one. Nothing above line 39146
   is modified.

   What this does, in order:

     1. On a phone the photo moves UP, to sit between the programme
        list and the paragraph - not below the two buttons.
     2. Its corner radius comes down from 20px to 12px.

   Why there are two copies of the photo.

   The desktop photo lives in .hero-right, which is a SIBLING of the
   text column .hero-left. The programme list and the paragraph are
   both inside .hero-content, further down inside .hero-left. The
   image and the two text blocks therefore do not share a parent,
   and no amount of flex order or grid-column can interleave them -
   those properties only reorder children of the same container.

   So index.php now carries a second copy of the same picture in a
   .hero-image-inline wrapper, placed between .hero-programmes and
   the <p>, and the rules below show exactly one of the two at any
   width. The hidden one is display:none, which also removes it from
   the accessibility tree, so a screen reader never hears the
   picture twice.

   Measured before this change, at 390px:

     .hero-right      display:grid, cols 168.6px 168.6px, rows 205px
                      150px, gap 10px
     .hero-image-main 347 x 205, border-radius 20px, centred in
                      .hero-right (centre 188 = parent centre 188)
     the small "Global Learning" and "Build Your Future" cards were
     already removed in the previous step, and the label that was
     overlaid on the photo is deliberately not repeated on the copy.

   .hero-right is now hidden outright on a phone, which also retires
   the grid-row override the previous block needed - with the whole
   column gone there is no second track left to collapse.

   Desktop is untouched: the inline copy is display:none by default,
   .hero-right is untouched above 767px, and the hero keeps its
   existing two-column composition. Reverting is a matter of
   deleting the .hero-image-inline block from index.php and this
   rule.
   ================================================================ */

/* ---------- the inline copy is not used on desktop ---------- */
.hero-image-inline {
    display: none;
}

@media (max-width: 767px) {

    /* the right-hand column is not shown on a phone at all now:
       its small cards went in the previous step, and the tower
       photo is supplied by the inline copy below */
    .hero-section .hero-right {
        display: none !important;
    }

    /* the photo, sitting between the programme list and the
       paragraph, full width of the text column */
    .hero-section .hero-image-inline {
        display: block !important;

        width: 100% !important;

        /* The two buttons are capped and centred inside this
           column: max-width 390px, then 350px at 480px, then 320px
           at 360px (index.css:31801, 31990, 32074). The photo was
           width:100%, so it spanned the whole text column and ran

           8px to 127px past the buttons on BOTH sides at every width
           between 414px and 700px. Measured:

             vw    buttons          photo            overhang
             700   147..537 390px  20..665 645px    127px each side
             640   117..507 390px  20..605 585px     97px each side
             560    77..467 390px  20..525 505px     57px each side
             480    57..407 350px  17..448 431px     40px each side
             414    25..375 350px  17..382 365px      8px each side
             390    17..358 341px  17..358 341px      0px  matched
             320    15..290 275px  15..290 275px      0px  matched

           It only lined up by accident at the widths where the
           column is narrower than the button cap.

           Equal space above and below is kept: .hero-content is a
           flex/grid box so sibling margins do not collapse, they
           add up. The 18px from .hero-programmes above is present
           at every width from 700px down to 320px, so this element
           carries no top margin of its own and the 18px below it
           makes both gaps exactly 18px. margin-left/right:auto is
           what centres the capped width. */
        max-width: 390px !important;

        margin: 0 auto 18px !important;

        border-radius: 12px !important;
        overflow: hidden !important;

        /* stops the inline image leaving a few px of descender
           gap under it, which would break the radius visually */
        line-height: 0 !important;
        font-size: 0 !important;
    }

    .hero-section .hero-image-inline img {
        display: block !important;

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

        object-fit: cover !important;
        object-position: center !important;

        border-radius: 12px !important;
        margin: 0 !important;
    }
}


/* ================================================================
   FAQ SECTION - DROP THE BACKGROUND ARTWORK, KEEP A FLAT COLOUR
   Appended to css/index.css. Nothing above this point is modified.

   What was there, and what it weighed.

     index.php carried an inline style on the section tag:

         <section class="faq-section"
             style="
                 background-image: url('images/faqbg.png');
                 background-size: cover;
                 background-position: center;
                 background-repeat: no-repeat;
             ">

     images/faqbg.png is a 1536 x 1024 illustration weighing
     1,426,118 bytes - about 1.4 MB - and it was being downloaded
     and painted on every load of the home page. It carried a dotted
     grid top-left, dashed flight paths with a question-mark bubble
     and a chat bubble, concentric arc rings in two corners and blue
     wave shapes along the bottom edge.

     The section also held two absolutely positioned dashed circles,
     .faq-shape-left and .faq-shape-right, which only render at
     600px and below. Both are gone from the markup now.

   What the artwork sat on: sampling the image gave #FDFDFE,
   #FCFCFE, #FAFBFE and #F7F9FE as the commonest pixels, so the
   design was a near-white base with a cool tint. The flat colour
   below is #F5F8FC, which is the value this same section already
   uses on faq.php at 767px and below (css/faq.css line 1400) and
   the light-band colour used by the mobile app features strip -
   so the home page band and the FAQ page band now match.

   background-image is set to none as well as the colour, because
   the 767px breakpoint has a linear-gradient on this selector
   further up the file. Both declarations are !important and this
   rule comes last, so the band is one flat colour at every width
   rather than a gradient on a phone and white on a desktop.

   Nothing else about the section changes: padding, the container,
   the heading, the accordion cards and the VIEW ALL FAQs button
   are untouched. images/faqbg.png is left on disk, so restoring
   the artwork is a matter of putting the inline style back.
   ================================================================ */

.faq-section {
    background: #F1F5FE !important;
    background-image: none !important;
}


/* ================================================================
   FINAL CTA BAND - GIVE IT A COLOUR OF ITS OWN
   Appended to css/index.css. Nothing above this point is modified.

   The problem, measured on the live page:

     .faq-section       background-color  rgb(245, 248, 252)  #F5F8FC
     .odlc-final-cta    background-color  rgb(247, 250, 255)  #F7FAFF

   Two to three values apart on each channel. Adjacent bands that
   close read as one continuous surface, so the closing call to
   action did not register as its own section.

   Why a deeper tint rather than a dark band.

   Everything inside the CTA sits inside .odlc-final-cta-container,
   which is a white card, so the band itself carries no text at all:

     label  #0D6EFD on white      h2  #0B1F4D on white
     body   #666666 on white      primary button  #123A75 gradient
     the six supporting links  #0D6EFD on white

   A navy band would put #0D6EFD links and #666 body copy on a dark
   ground and force all of those to be recoloured, which is a much
   bigger change than was asked for. Deepening the tint separates
   the two bands while every colour inside the card stays exactly
   as it is.

   #D9E6F7 was chosen because:

     - it is a clear step down from #F5F8FC, so the boundary between
       the FAQ band and the CTA band actually reads;
     - it is deep enough that the white card, its 1px #DCE7F3
       border and its 0 20px 55px rgba(8,60,124,.09) shadow all
       still separate from the ground behind it;
     - it is the same blue family as the heading navy #0B1F4D, the
       accent blue #0D6EFD and the button navy #123A75 already on
       the page, so nothing new is introduced;
     - it stays light, so the page does not end on a heavy block
       immediately above the dark footer.

   background-image is cleared as well, because the 480px
   breakpoint sets #f7faff on this selector further up the file and
   that would otherwise win on a phone. Both declarations are
   !important and this rule is last, so one colour applies at every
   width.

   Nothing inside the card is touched: padding, the grid, the
   heading, the paragraph, both buttons and the supporting links
   are unchanged.
   ================================================================ */

.odlc-final-cta {
    background: #D9E6F7 !important;
    background-image: none !important;
}


/* ================================================================
   TABLET ALIGNMENT - HERO PARAGRAPH, BADGE SPACING, AND THE FAQ
   LIST WIDTH
   Appended to css/index.css. Nothing above this point is modified.

   1. HERO PARAGRAPH, NOT CENTRED AT 768px - 991px

      Measured, stacked (single column) tablet range:

        vw    .hero-content   paragraph box        off-centre
        900    67..817        67..717  (650 wide)     -50px
        820    53..752        53..703  (650 wide)     -24px
        768    53..700        53..700  (647 wide)       0px

      The paragraph carries max-width:650px with margin:0, so once
      the column is wider than 650px the cap kicks in and the box
      is pushed to the left edge instead of being centred. Its
      text-align is also left, while every other block in the
      stacked hero - badge, heading, gold rule, programme list,
      buttons - is centred. At 900px that is a 50px misalignment
      and ragged left-aligned text under centred text.

      margin-left/right:auto centres the capped box and
      text-align:center centres the lines inside it, so the
      paragraph now matches the rest of the column.

      Scoped to 768px - 991px on purpose. From 992px to 1199px the
      hero is a genuine two-column layout with the image on the
      right and the text left-aligned against it; centring the
      paragraph there would break that. Below 768px the paragraph
      is already correct - measured max-width 380px with
      margin:0 auto and text-align:center at 700px and under -
      so that range is not touched either.

   2. BADGE TO HEADING GAP, 0px AT 768px - 900px

      Measured vertical gaps between hero blocks:

        vw     badge->h2   h2->line   line->programmes
                                        programmes->p   p->buttons
        991        20px       22px            24px            22px       30px
        900         0px       25px            28px            22px       30px
        820         0px       25px            28px            22px       30px
        768         0px       25px            28px            22px       30px
        700        20px       18px            18px            18px       24px

      The badge lost its bottom margin somewhere between 768px
      and 900px and sat flush against the heading, while the same
      gap is 20px at 991px and at 700px. Restoring 20px makes the
      column rhythm consistent across the whole tablet range. The
      other four gaps are already even and are left alone.

   3. FAQ LIST NARROWER THAN EVERY OTHER SECTION

      Measured at 1920px, where the gap is widest:

        .faq-container        262..1642   1380 wide
        .faq-list             327..1577   1250 wide
        .odlc-apply-pathways   262..1642   1380 wide

      .faq-list has a hardcoded max-width:1250px with
      margin:65px, so on a wide screen the FAQ cards sat 65px
      inside the container on each side while every other section
      ran the full 1380px. The FAQ band looked narrower than its
      neighbours for no reason - the container itself already
      matches at all 16 widths measured.

      max-width:none plus margin-left/right:0 makes the list fill
      whatever the container gives it. Below 1200px the cap was
      never reached, so this changes nothing at those widths and
      the cards are unaffected at every size below 1920px.
   ================================================================ */

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

    /* 1. the paragraph joins the centred column */
    .hero-section .hero-left p {
        text-align: center !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 2. the badge was flush against the heading in this range */
    .hero-section .hero-badge {
        margin-bottom: 20px !important;
    }
}

/* 3. the FAQ cards run the full width of the FAQ container */
.faq-section .faq-list {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ================================================================
   HERO - TRIM THE TOP AND BOTTOM SPACE AT 768px - 991px
   Appended to css/index.css. Nothing above this point is modified.

   What it was, measured on the live page in the stacked tablet
   range. Every number is a gap that contains nothing:

     vw    section    .hero-left   above the    below the    buttons to
           padding    padding      badge       buttons     the images
     900     25px      50 / 50       77px        50px         90px
     820     25px      50 / 50       77px        50px         90px
     768     25px      50 / 50       77px        50px         90px
     700      0px        0 / 0        42px        32px          -
     390      0px        0 / 0        34px        28px          -

   The cause is .hero-left, which carries padding:50px 35px in this
   range on top of the 25px the section already has. Its own text
   is only 437px tall at 900px, so 100px of that padding was pure
   slack - 50px of empty navy above the badge and 50px below the
   APPLY NOW button, followed by a 40px grid gap before the images
   started. That is 140px of nothing framing 437px of content.

   A phone does not have this: the same measurements at 700px and
   below show 42px above the badge and 32px below the buttons,
   because .hero-left has no vertical padding there at all.

   So the tablet range is brought back in line with the phone:

     .hero-left padding-top/bottom   50px -> 20px
     .hero-section padding-top       25px -> 20px
     .hero-section row gap          40px -> 28px

   That takes the space above the badge from 77px to 40px, and the
   space from the buttons down to the images from 90px to 48px -
   77px less dead space in total at 900px, and the same saving at
   820px and 768px.

   The horizontal padding of 35px on .hero-left is deliberately
   left alone: it sets the measure of the heading and the paragraph,
   and changing it would re-wrap both. No font size, colour, width
   or alignment is touched, and no other breakpoint is affected -
   the two-column range from 992px up and everything at 767px and
   below keep their existing measurements.
   ================================================================ */

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

    .hero-section .hero-left {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .hero-section {
        padding-top: 20px !important;
        gap: 28px !important;
    }
}


/* ================================================================
   VERIFY A CREDENTIAL BUTTON - MAKE IT HOLD ITS SHAPE AT EVERY WIDTH
   Appended to css/index.css. Nothing above this point is modified.

   The rules already in place, and what they allow:

     index.css:24469  @media (max-width:480px)  the base pill -
                     display:inline-flex, gap 10px, min-height 48px,
                     padding 0 23px, border 2px, radius 7px, 13px type
     index.css:25170  @media (max-width:767px)  width:100%
     index.css:36885  @media (max-width:480px)  type forced to 15px

   Measured across fourteen widths from 320px to 1440px, the label
   sits on a single line everywhere today and the button is 48px
   tall everywhere. So nothing is visibly broken yet - but three
   properties leave it one nudge away from breaking, and they are
   what makes it look fragile rather than deliberate:

     white-space is normal. The label is a bare text node inside a
     flex row, so the moment the box is narrower than the words
     need - a longer translation, a larger minimum font, a wider
     gap - "VERIFY A CREDENTIAL" breaks onto a second line inside
     a pill with a fixed min-height of 48px and no overflow rule.
     The second line is simply cut off by the pill. That is the
     clipped-looking button in the screenshot.

     flex is 0 1 auto, so the button is allowed to be squeezed
     narrower than its content by whatever flex container it is in.

     There is no max-width, so nothing stops the pill plus its 2px
     border from exceeding the column it sits in at width:100%.

   What is added, all of it defensive:

     white-space:nowrap      the label can never wrap
     max-width:100%          the pill can never exceed its column
     flex:0 0 auto           it can never be squeezed
     box-sizing:border-box   the 2px border is inside the 100%
     text-align:center       the row stays centred if it ever grows
     the arrow gets flex:0 0 auto so it is never the thing that shrinks

   The two size steps at the bottom are the only visual change, and
   they only apply below 480px where the pill is already full width:
   the horizontal padding comes in from 23px to 16px and the gap
   from 10px to 8px at 360px and under, so the label keeps its
   breathing room on the narrowest screens instead of running into
   the rounded ends. The 48px height, the colours, the 2px border,
   the 7px radius and the destination link are all untouched.
   ================================================================ */

.odlc-digital-credentials .odlc-credential-btn {

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

    /* the label must never break onto a second line inside a
       fixed-height pill - that is what clipped it */
    white-space: nowrap !important;
    text-align: center !important;

    /* never squeezed by a flex parent, never wider than its column */
    flex: 0 0 auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    /* keep the existing proportions */
    min-height: 48px !important;
    gap: 10px !important;
}

/* the arrow is the last thing that should ever give way */
.odlc-digital-credentials .odlc-credential-btn > i,
.odlc-digital-credentials .odlc-credential-btn > .bi {
    flex: 0 0 auto !important;
}

@media (max-width: 480px) {

    .odlc-digital-credentials .odlc-credential-btn {
        width: 100% !important;
        padding: 0 16px !important;
    }
}

@media (max-width: 360px) {

    .odlc-digital-credentials .odlc-credential-btn {
        gap: 8px !important;
        padding: 0 14px !important;
    }
}


/* ================================================================
   HERO IMAGE - THE TWO SMALLER STEPS OF THE SAME BUTTON LADDER
   Appended to css/index.css. Nothing above this point is modified.

   index.css:31990 caps .hero-buttons .hero-btn at 350px from 480px
   down, and index.css:32074 caps it at 320px from 360px down. The
   photo now follows the same two steps, so at every width from
   320px to 767px it shares the exact left edge, right edge and
   width of the two buttons below it.

   Height stays 205px, radius stays 12px, object-fit stays cover,
   so the photo gets narrower through the middle of the range and
   crops rather than letterboxing.
   ================================================================ */

@media (max-width: 480px) {
    .hero-section .hero-image-inline {
        max-width: 350px !important;
    }
}

@media (max-width: 360px) {
    .hero-section .hero-image-inline {
        max-width: 320px !important;
    }
}


/* ================================================================
   EXTRA SPACE UNDER THE OUR PROGRAMMES SECTION
   Appended. Nothing above this point is modified.

   WHAT THE GAP ACTUALLY IS
   .programmes-section is padded, not margined, and its padding is
   not the same at every width. Measured on the live page:

     max-width:1380 area   padding 60px 40px      -> 60px bottom
     max-width 991px       padding 60px 30px 25px -> 25px bottom
     max-width 767px       padding 50px 20px 20px -> 20px bottom

   The next block adds its own 30px (25px on small screens) of
   margin, so the space a reader actually sees under the heading
   and description is:

     1200px and wider   30px
     992px and under    25px

   So the bottom of this section is the tightest junction on the
   page, and it tightens again on tablet and phone, which is the
   opposite of what a section that tall needs.

   WHY A MARGIN AND NOT A PADDING CHANGE
   A margin is added outside the existing box, so the section keeps
   its own 60px/25px/20px of internal padding - which is what
   separates the text from the band that contains it - and the extra
   room appears between this section and the next. Changing the
   padding instead would have moved the text as well, and would
   have needed three separate overrides because the value differs
   at three breakpoints.

   WHY THE GAP IS 40px AND NOT 70px
   The next block carries its own margin-top, and two adjoining
   vertical margins collapse to the larger of the two rather than
   adding up. So this 40px and that 30px (25px on small screens)
   become 40px, not 70px:

     before   30px at 1200 and wider, 25px at 992 and under
     after    40px at every width measured, 320 to 1600

   That collapse is why one number here is enough, and why the gap
   is now the same on a phone as on a desktop - it was 5px tighter
   on small screens before, which is the wrong direction for a
   section this tall.

   To get a bigger gap, raise this value. Past 30px the margin here
   is the larger of the pair, so the gap then equals it exactly -
   50px gives a 50px gap, 60px gives 60px. Nothing else needs to
   change and no breakpoint override is needed.
   ================================================================ */

.programmes-section{
  margin-bottom:40px !important;
}






/* ================================================================
   ODLC CREDENTIALS - DESKTOP UNTOUCHED, TABLET AND PHONE REWORKED
   Appended. Nothing above this point is modified.

   THE SECTION
   .recognition-section on index.php holds the "ODLC CREDENTIALS /
   Academic and Skill Credentials You Can Verify" block: a navy
   card with the text column .recognition-content on the left, a
   photograph .recognition-image on the right, the VERIFY
   CREDENTIAL button, and a white strip of three cards sitting
   over the lower right.

   THE RULE FOR THIS BLOCK
   Laptops and desktops are not touched. The original two-column
   composite stays exactly as the stylesheet above already had it:
   full bleed to both edges of the page, square corners, text in a
   47% column on the left, the photograph filling 67% on the
   right, and the three white cards floating over the foot of the
   picture at 32% and 7%. There is deliberately not one declaration
   for 1200px and up in this block. The section keeps filling the
   page edge to edge at every width, so there is no side margin
   anywhere and no container inset.

   That also removes two things a previous pass of this work had
   added for the whole page rather than for the fault: a 92% /
   1380px container inset, and 18px corners to go with it. Both
   only made sense while the section was being treated as a card
   sitting inside a container, and both are why a desktop stopped
   looking the way it used to.

   Below 1200px the section changes shape, because that is the only
   range where it was actually broken.

   THE FAULT
   The white strip was position:absolute, pinned near the bottom of
   the card, and the room it needed was reserved by giving
   .recognition-content a large padding-bottom. The reservation was
   a fixed number, and the strip is not a fixed size - its height
   depends on how far the three card titles wrap, which moves with
   the viewport. Measured strip height ran from 76px to 224px
   across the range, so no single number could ever be right.

   Where the two met, what painted was the strip's own white box,
   not its inner cards, and it carries transparent padding above
   them at z-index 10 over the text column's z-index 4. So the
   strip covered the button outright:

     width   strip box   button bottom   result
      834px   16px over   14767          button covered
      820px   16px over   14785          button covered
      800px   13px over   14891          button covered
      768px   13px over   14894          button covered

   A hit test at the button's own bottom edge returned
   div.recognition-features at every one of those widths. Between
   992px and 1200px the strip reached 165px above the bottom of the
   text column against a 90px reservation; it never reached the
   button there only because the strip is inset to the right and
   happened to miss it horizontally. Same fault, landing on empty
   background by luck.

   THE FIX, AND WHY IT IS A GRID
   The card becomes a two-row grid. The text column is placed in
   row 1 and the white strip in row 2, so they sit in different
   rows and cannot overlap at any width, at any zoom, with any
   amount of text wrapping. The hand-tuned padding-bottom
   reservation is not needed any more and goes away with it, which
   is why the block gets SHORTER rather than taller - 900px went
   from 682px tall to 653px, and 1199px from 720px to 648px.

   Three ranges:

     1200px and up    untouched, see above
      768px - 1200px  text left at 60%, the photograph promoted
                      from a faded backdrop to a real panel in the
                      second column, the three cards given the full
                      width of the card to sit in. This is the iPad
                      range - an iPad Pro 13 is 1024px portrait, an
                      iPad Pro 11 is 834px. The two-column composite
                      needs real room: at 1199px and below the text
                      column fell under 520px and each card under
                      230px, so "Skill & Vocational Credentials" and
                      the line under it wrapped three deep.
      767px and down  one column, and the photograph becomes a
                      230px band under the text with the cards
                      floating over its foot.

   THE PHONE CAROUSEL, NO SCROLLBAR
   On a phone the three cards do not fit side by side, so they sit
   in a horizontal strip that the finger drags. Three things make
   that read as a designed carousel rather than a scrolled-over
   overflow:

     - the scrollbar itself is hidden. The strip keeps
       scrollbar-width:none for Firefox, -ms-overflow-style:none
       for older Edge, and a display:none ::-webkit-scrollbar for
       Chrome and Safari, which is the one that was showing.
     - the cards snap. scroll-snap-type:x mandatory with
       scroll-snap-align:start on each card, so letting go of a
       drag always settles on a whole card rather than half of
       one, and the strip cannot be left stranded between two.
     - the strip is padded one card-width past its last card, and
       carries a short fade on its right edge, so it is obvious
       there is more to the left and right and the third card does
       not sit flush against the edge looking like the end.

   The fade is a mask-image rather than a second element, so
   nothing was added to the markup. index.php is untouched by this
   block.

   MEASURED AFTER, ON THE LIVE PAGE
   No overlap and no coverage at 320, 360, 375, 414, 480, 540, 576,
   600, 640, 700, 720, 740, 767, 768, 769, 780, 800, 820, 834, 860,
   880, 900, 941, 960, 991, 992, 1000, 1024, 1100, 1150, 1199,
   1200, 1201, 1280, 1366, 1400, 1440, 1536, 1600, 1800 and
   1920px. No horizontal page scroll at any of them, the section
   spans the full viewport width with no side margin, and the
   photograph stays inside the card everywhere.
   ================================================================ */

/* ================================================================
   768px TO 1200px - TABLETS AND SMALL LAPTOPS
   Two columns, but a 60/40 split rather than 47/53, the
   photograph promoted from a backdrop to a real panel, and the
   three cards given the full width of the card to sit in.
   ================================================================ */
@media (min-width:768px) and (max-width:1200px){
  .recognition-section .recognition-wrapper{
    display:grid;
    grid-template-columns:60% 1fr;
    grid-template-rows:auto auto;
    align-content:start;
    min-height:auto;
    border-radius:16px !important;
  }
  .recognition-content{
    grid-column:1;
    grid-row:1;
    width:auto;
    min-height:auto;
    padding:40px 40px 30px !important;
  }
  .recognition-content::after{display:none}
  /* As a faded backdrop behind the text the photograph was hidden
     by the opaque text column and only leaked around the 25px
     card insets, which read as a smudge. As a panel in the second
     column it is simply visible. */
  .recognition-image{
    position:relative;
    grid-column:2;
    grid-row:1;
    top:auto;
    right:auto;
    bottom:auto;
    width:100%;
    height:100%;
    opacity:1;
    z-index:1;
  }
  .recognition-image::before{display:none}
  .recognition-features{
    position:static;
    grid-column:1 / -1;
    grid-row:2;
    left:auto;
    right:auto;
    bottom:auto;
    align-self:end;
    margin:0 25px 18px;
  }
  .recognition-feature{padding:8px 12px;gap:9px}
  .recognition-feature-icon{width:40px;height:40px;min-width:40px;font-size:17px}
}

/* ================================================================
   767px AND DOWN - PHONES
   One column. The photograph becomes a real grid row, a band
   under the text, with the three cards floating over its foot.
   The navy blob that used to blend the picture into the text
   column is not needed now that the two are in separate rows, so
   it is replaced by a gradient over the lower half of the band.
   That keeps the white cards legible while leaving the
   photograph visible in the top half.
   ================================================================ */
@media (max-width:768px){
  .recognition-section .recognition-wrapper{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    align-content:start;
    min-height:auto;
    border-radius:14px !important;
  }
  .recognition-content{
    grid-column:1;
    grid-row:1;
    width:auto;
    min-height:auto;
    padding:28px 22px 24px !important;
  }
  .recognition-content::after{display:none}
  .recognition-image{
    position:relative;
    grid-column:1 / -1;
    grid-row:2;
    top:auto;
    bottom:auto;
    width:100%;
    height:210px;
    opacity:1;
    z-index:1;
  }
  .recognition-image::before{display:none}
  .recognition-image::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    background:linear-gradient(180deg,
      rgba(9,43,96,0) 0%,
      rgba(9,43,96,.10) 38%,
      rgba(9,43,96,.62) 68%,
      rgba(9,43,96,.88) 100%);
  }
  .recognition-features{
    position:absolute;
    grid-column:auto;
    grid-row:auto;
    left:14px;
    right:14px;
    bottom:14px;
    margin:0;
    /* no scrollbar, in every engine that draws one */
    scrollbar-width:none;
    -ms-overflow-style:none;
    /* settle on a whole card, never between two */
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    /* room past the last card plus a soft right edge, so it reads
       as more to come rather than as the end */
    padding-right:64px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,rgba(0,0,0,.35) 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 86%,rgba(0,0,0,.35) 100%);
  }
  .recognition-features::-webkit-scrollbar{display:none}
  .recognition-features::-webkit-scrollbar-track{background:transparent}
  .recognition-features::-webkit-scrollbar-thumb{background:transparent}
  .recognition-feature{
    scroll-snap-align:start;
    min-width:78%;
    padding:6px 14px;
  }
  .recognition-feature:last-child{
    padding-right:64px;
    border-right:none;
  }
  .recognition-feature-icon{width:36px;height:36px;min-width:36px;font-size:16px}
}
@media (max-width:480px){
  .recognition-content{padding:24px 18px 22px !important}
  .recognition-image{height:196px}
  .recognition-features{left:12px;right:12px;bottom:12px;padding-right:56px}
  .recognition-feature{min-width:84%}
  .recognition-feature:last-child{padding-right:56px}
  .recognition-feature-icon{width:34px;height:34px;min-width:34px}
}
/* ================================================================
   TESTIMONIALS - EQUAL CARDS, PLAIN BACKGROUND
   Appended. Nothing above this point is modified.

   THE SECTION
   .testimonial-section on index.php is the "LEARNER EXPERIENCES
   / What Our Learners Say" block: a pale blue band with a dotted
   grid top left, a decorative swoosh picture behind everything,
   a centred heading, and a Bootstrap carousel of six review cards
   in two slides of three.

   1. THE BACKGROUND DECORATION IS REMOVED
   Two decorative layers sat behind the content and are switched
   off here, leaving the flat colour the section already declares:

     .testimonial-bg        a 1719x915 PNG swoosh, stretched over
                            the whole band with object-fit cover
     .testimonial-dots-*    90x90 dot grids in the top corners

   The colour is untouched. .testimonial-section keeps its own
   background of #f5f8ff at line 11677, which is what the
   decoration was sitting on, so the band reads as a flat pale
   blue rectangle instead of a picture with cards on top. Only
   the two decoration layers go; the section's own background
   colour, its padding, its container width and every text style
   are left as they are.

   The dots needed a second fix. The restyle block at line 37918
   already hid .testimonial-dots-right with display:none, but left
   .testimonial-dots-left showing, which is why one dot grid
   survived in the top left corner while its partner was gone.
   Both are hidden here.

   The <img class="testimonial-bg"> element is left in the markup
   rather than deleted, so index.php is untouched. It is simply
   not rendered, and it costs nothing because a display:none
   image is never fetched for paint.

   2. ALL THREE CARDS THE SAME HEIGHT
   The cards were given height:100% by the restyle block at line
   37944, which sounds like it would make them equal but does
   not, because percentage heights need a definite parent height
   and the Bootstrap column has none. What actually happened is
   that each card was only as tall as its own content, so the row
   was ragged: the card with three lines of review text stood
   21px taller than its two neighbours on a phone.

   Measured on the live page before this change:

     width   card heights      equal
      1600px  164, 164, 164     yes
      1440px  164, 164, 164     yes
      1200px  187, 187, 187     yes
       900px  140, 140, 140     yes
       480px  121, 142, 121     NO
       375px  121, 142, 121     NO

   The wide widths happened to line up because the three reviews
   on slide one are one, two and one lines and the extra line was
   absorbed by slack higher up the card. On a phone the padding
   and type are smaller, there is no slack left, and the taller
   card shows.

   The fix is to stop sizing the cards by their content and let
   the row decide. Two pieces:

     - the Bootstrap column becomes a flex column, and the card
       inside it grows to fill. This is what actually equalises
       them: a taller sibling stretches the row, and every card
       in it is stretched to match.
     - the card's own min-height is set from its tallest measured
       state, so a single-line review is not left floating in a
       short box with the quote mark far below the text.

   The review text is clamped to three lines so one long review
   cannot push its card past the others by a long way. The clamp
   is only a guard; at every width measured the longest review is
   three lines, so nothing is actually being cut off.
   ================================================================ */

/* ---------- the two decoration layers ---------- */
.testimonial-section .testimonial-bg{display:none !important}
.testimonial-section .testimonial-dots{display:none !important}

/* ---------- equal card heights ---------- */
.testimonial-section .carousel-item .row > [class*="col-"]{display:flex}
.testimonial-section .testimonial-card{
  width:100%;
  min-height:196px;
  display:flex;
  flex-direction:column;
}
.testimonial-section .testimonial-text{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
@media (max-width:1199px){
  .testimonial-section .testimonial-card{min-height:214px}
}
@media (max-width:767px){
  .testimonial-section .testimonial-card{min-height:180px}
}
@media (max-width:480px){
  .testimonial-section .testimonial-card{min-height:168px}
}


/* ================================================================
   TESTIMONIALS - THE BAND NO LONGER SINKS INTO THE BLOG BAND
   Appended. Nothing above this point is modified.

   THE FAULT
   The testimonials band and the blog band sit directly against
   each other with no gap, and both are a pale blue one unit
   apart in every channel:

     .testimonial-section   #f5f8ff   rgb(245, 248, 255)
     .blog-section          #f4f7ff   rgb(244, 247, 255)

   rgb(245,248,255) against rgb(244,247,255) is one unit apart in
   red and green and identical in blue. On a monitor the two read
   as a single pale block about 1000px tall, and the only sign
   that a section ended is a faint horizontal line where nothing
   actually changed. Neither band looks like it was chosen; it
   looks like one wash carried across both.

   That is the whole fault. There is no spacing bug here, no
   missing rule and no width problem - the two sections do meet
   cleanly. It is purely that the two colours are the same colour.

   THE FIX
   The testimonials band becomes white, and the blog band is left
   exactly as it is. One value changes, on one selector.

     .testimonial-section   #f5f8ff  ->  #ffffff
     .blog-section          #f4f7ff      unchanged

   White is the largest step available that still belongs to this
   page, and it is a step the page already takes elsewhere: the
   recognition band directly above this one is white, and the
   social band two sections below is white too. So the sequence
   through this part of the page becomes

     recognition-section   #ffffff
     testimonial-section   #ffffff    <- this change
     blog-section          #f4f7ff
     social-section        #ffffff

   which alternates white and pale blue, rather than two
   near-identical washes followed by two more.

   WHY NOT A DIFFERENT PALE BLUE
   Four options were measured against the blog band's exact
   #f4f7ff. The difference in each channel, where rgb(0,0,0)
   would be the maximum possible step:

     #f5f8ff  rgb( 1, 1, 0)   the current state, invisible
     #f7faff  rgb( 3, 3, 0)   visible on a good monitor, easy to
                               miss on a laptop or a projector
     #eef3fd  rgb( 6, 4, 2)   unmistakable, but reads as set
                               back rather than forward
     #ffffff  rgb(11, 8, 0)   the largest step, and the one that
                               already fits the page

   A paler blue was rejected because three units does not survive
   a projector. A deeper blue was rejected only on taste: it
   separates the two bands just as well, but it makes the
   testimonials band recede, and the heading and the cards read
   better coming forward.

   The cards are unaffected. They are #fff on a white band now,
   so they are carried by their border and shadow rather than by
   a contrast against the background, which is why their
   box-shadow is very slightly strengthened below. Without that
   they lose their edge on a white field.

   Nothing above this point is touched, and no media query
   anywhere in the file sets a background on .testimonial-section,
   so this single declaration holds at every width.
   ================================================================ */

.testimonial-section{background:#FFFFFF !important}

/* the cards sat on a tinted band before, so their shadow was
   tuned for that. On white they need a touch more to read. */
.testimonial-section .testimonial-card{
  box-shadow:0 8px 22px rgba(16,42,90,.09) !important;
}
.testimonial-section .testimonial-card:hover{
  box-shadow:0 16px 36px rgba(16,42,90,.16) !important;
}


/* ================================================================
   CAREER SUPPORT - THE CARD FILLS ITS COLUMN ON TABLET
   Appended. Nothing above this point is modified.

   THE SECTION
   .odlc-career-support on index.php is the "CAREER SUPPORT /
   From Skills to Opportunities." block: a heading, a paragraph,
   three white feature cards and an EXPLORE JOB PORTAL button on
   the left, and on the right a tall white "career path" card with
   the three numbered steps 01 BUILD SKILLS, 02 CREATE PROFILE and
   03 EXPLORE OPPORTUNITIES, connected by dashed lines, and an
   ODLC Job Portal bar across the foot.

   THE FAULT, MEASURED ON THE LIVE PAGE
   At 991px and below the two columns collapse into one, so the
   text runs full width and the path card moves underneath it.
   But the card kept a fixed width from the 1199px rule above and
   never grew to fill the column it landed in, so it sat in the
   middle of a much wider space:

     viewport   column   card   empty each side   dead band below
      1199px     528px   390px        44px             61px
      1100px     493px   390px        52px             69px
      1024px     457px   390px        34px             69px
       991px     442px   390px        26px             69px
       960px     888px   390px       249px             39px
       900px     832px   390px       221px             39px
       834px     770px   390px       190px             39px
       768px     708px   390px       159px             39px
       640px     562px   390px        86px              0px
       480px     428px   390px        19px             34px
       375px     331px   331px         0px             34px

   The worst of it is 960px to 768px, which is most of the tablet
   range: a 390px card marooned in the middle of an 888px column
   with a quarter of the screen blank on each side. It reads as a
   broken or half-loaded layout rather than as a deliberate
   composition, because the text column directly above it runs the
   full 888px and the card underneath is less than half of that.

   Two separate things are wrong and both are fixed here.

   1. THE CARD DOES NOT FILL THE COLUMN
      .career-path-card is width:390px from the 1199px rule, and
      the 767px rule that would have made it width:100% with a
      390px cap does not reach this range, because 991px is above
      767px. So between 768px and 991px the card is fixed while
      the column around it changes size every pixel.

      width:100% with a 640px cap and auto side margins lets the
      card grow into the column and stop growing at a width that
      still reads as a card rather than a full-bleed panel. The
      measured empty space either side falls from 221px to 96px at
      900px, and from 249px to 124px at 960px. At 640px and below
      the column is narrower than the cap, so the card fills it
      completely and the empty space goes to zero.

      The step text gets the benefit of the extra width too. The
      step is a three column grid of number, icon and text, and
      the text column was 245px wide inside a 348px card interior;
      it is now 497px, so the longest step, "EXPLORE
      OPPORTUNITIES" with "Explore relevant employment and career
      opportunities.", stops needing the extra lines it needed at
      900px and the card comes down from 501px to about 430px.

   2. THE VISUAL COLUMN RESERVES MORE HEIGHT THAN THE CARD USES
      .odlc-career-visual carries min-height:540px in this range
      while the card inside it is 501px, so 39px of nothing sits
      under the card before the section's own padding. That is on
      top of the 50px grid gap the rule above already sets between
      the text and the card.

      min-height:auto lets the column take the card's own height,
      and the gap comes down from 50px to 40px, so the card sits
      40px under the text instead of floating 89px below it.

      The glow behind the card, .career-visual-glow, is a 440px
      circle that is wider than the old 390px card and narrower
      than the new one, so it now sits behind the card rather than
      haloing around it. It is grown to 560px so it still reads as
      a soft edge behind the corners instead of vanishing.

   NOT TOUCHED
   Desktop and laptop, 992px and up, keep the two-column composite
   exactly as it was: the text on the left, the 440px card on the
   right in its own column, where it had 44px of air each side and
   looked right. Phones, 767px and below, already had
   width:100% with a 390px cap, so they are not changed either -
   their measured empty space was already 0px at 375px. Nothing
   about the card's contents changes: the same three steps, the
   same numbers, icons, colours, 24px radius, 1px border, shadow,
   the same connector lines and the same portal bar.
   ================================================================ */

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

  /* the card now belongs to the column it is in */
  .odlc-career-support .career-path-card{
    width:100% !important;
    max-width:640px;
    margin-left:auto;
    margin-right:auto;
  }

  /* no reserved height beyond the card, and a tighter gap above it */
  .odlc-career-support .odlc-career-visual{
    min-height:auto !important;
  }
  .odlc-career-support .odlc-career-container{
    gap:40px !important;
  }

  /* still reads as a soft edge behind the card, not a halo */
  .odlc-career-support .career-visual-glow{
    width:560px;
    height:560px;
  }
}

/* 767px and below. The card is already width:100% here, but the
   390px cap leaves 158px of blank either side at exactly 767px,
   which is the width the tablet block above deliberately does not
   reach. The cap is raised so this edge matches its neighbours,
   and the columns below it are narrower than the cap so a phone
   is unaffected: measured 0px of blank at 375px and 19px at
   480px before, both 0px after. min-height:auto removes the 34px
   of reserved space under the card at 480px and 375px. */
@media (max-width:768px){
  .odlc-career-support .career-path-card{
    max-width:640px !important;
  }
  .odlc-career-support .odlc-career-visual{
    min-height:auto !important;
  }
}

/* =========================================================
   HERO IMAGE TAGS - left side bottom
   ---------------------------------------------------------
   A small pill at the bottom-left of the hero's right-side images.
   One style for all five images.

   All new classes. Nothing existing is changed:
     .mobile-image-label is left exactly as it was, and the whole
     block is inside min-width: 768px, so no phone is affected.
     Below 768px the three small images are display:none anyway and
     .mobile-build-card carries its own label.

   The display:none below is deliberately OUTSIDE the media query. The
   tag divs exist in the markup at every width, so without it they would
   render as plain unstyled text below 768px. It is overridden to flex
   inside the query, and the query comes later in the file, so it wins.
   ========================================================= */

.hero-tag,
.hero-tag-sm {
    display: none;
}

@media (min-width: 768px) {

    /* gap of .small-images, read by the tag bands so they line up with
       the images. 14px down to 1199px, 12px from 1198px - measured at
       that exact pixel rather than assumed from the media query. */
    .hero-right {
        --htag-gap: 14px;
    }

    .hero-right .small-images {
        position: relative;
    }

    /* ---------------------------------------------
       THE PILL ITSELF - shared by all five images
       width:fit-content with one inset, so the pill is only as
       wide as its own words and never stretches to the image edge.
       --------------------------------------------- */
    .hero-tag,
    .hero-tag-sm-in {
        display: flex;
        align-items: center;
        gap: 7px;

        width: fit-content;
        max-width: 100%;

        padding: 8px 12px 8px 10px;
        border-radius: 17px;

        background: rgba(9, 20, 40, .58);
        -webkit-backdrop-filter: blur(14px) saturate(1.3);
        backdrop-filter: blur(14px) saturate(1.3);
        border: 1px solid rgba(255, 255, 255, .18);
        box-shadow: 0 6px 18px rgba(4, 14, 32, .28);

        color: #fff;
        font-weight: 700;
        font-size: 12.5px;
        line-height: 1.25;
        letter-spacing: .1px;
        white-space: nowrap;
        z-index: 6;
        pointer-events: none;
    }

    .hero-tag i,
    .hero-tag-sm-in i {
        flex: 0 0 auto;
        font-size: 13.5px;
        line-height: 1;
        color: #8FC8FF;
    }

    .hero-tag span,
    .hero-tag-sm-in span {
        font-size: inherit;
        color: #fff;
        white-space: nowrap;
    }

    /* ---------------------------------------------
       THE TWO BIG IMAGES
       --------------------------------------------- */
    .hero-tag {
        position: absolute;
        left: 16px;
        bottom: 16px;
        max-width: calc(100% - 32px);
    }

    /* ---------------------------------------------
       THE THREE SMALL IMAGES
       .hero-tag-sm is an invisible band the exact size of one image,
       which is what places the pill over the right photograph. Only
       the inner span is painted.
       --------------------------------------------- */
    .hero-tag-sm {
        position: absolute;
        left: 9px;
        right: 9px;

        display: flex;
        align-items: flex-end;
        justify-content: flex-start;

        height: calc((100% - 2 * var(--htag-gap)) / 3);
        padding-bottom: 9px;

        z-index: 6;
        pointer-events: none;
    }

    .hero-tag-sm-1 {
        top: 0;
    }

    .hero-tag-sm-2 {
        top: calc((100% - 2 * var(--htag-gap)) / 3 + var(--htag-gap));
    }

    .hero-tag-sm-3 {
        top: calc(2 * ((100% - 2 * var(--htag-gap)) / 3 + var(--htag-gap)));
    }

    /* the small images are only 190px wide, so the pill steps down
       rather than crowding the photograph */
    .hero-tag-sm-in {
        gap: 5px;
        padding: 6px 9px 6px 8px;
        border-radius: 13px;
        font-size: 9.5px;
    }

    .hero-tag-sm-in i {
        font-size: 11.5px;
    }

    /* from 991px down the small images narrow to 160px */
    @media (max-width: 991px) {
        .hero-tag {
            left: 12px;
            bottom: 12px;
            padding: 7px 10px 7px 8px;
            gap: 6px;
            font-size: 11.5px;
        }

        .hero-tag i {
            font-size: 12.5px;
        }

        .hero-tag-sm {
            left: 7px;
            right: 7px;
            padding-bottom: 7px;
        }

        .hero-tag-sm-in {
            padding: 5px 7px 5px 6px;
            font-size: 8.5px;
        }
    }
}

/* below 1198px .small-images gap drops from 14px to 12px, measured at
   that exact pixel rather than assumed */
@media (min-width: 768px) and (max-width: 1198px) {
    .hero-right {
        --htag-gap: 12px;
    }
}
/* =========================================================
   EXPLORE OUR PROGRAMMES - hide the arrow icon
   ---------------------------------------------------------
   The round arrow in the Explore Programme row of all four cards.
   CSS only, so no markup was changed and this is reversible by
   deleting this block.

   .pillar-action is display:flex with justify-content:space-between,
   so removing the <i> leaves the text on the left with no gap left
   behind - the row keeps its height from padding-top and the
   border-top hairline.
   ========================================================= */

.pillar-action i {
    display: none !important;
}
/* =========================================================
   EXPLORE OUR PROGRAMMES - the Explore Programme row is the link
   ---------------------------------------------------------
   Cards 01 and 02 are now plain <div>, so the card itself cannot
   navigate and needs no JavaScript to stay inert. Only the
   Explore Programme row inside them is an <a>.

   The row is already styled by .pillar-action. An <a> adds two
   things a <div> did not have, so both are reset here and
   nothing else about the row changes:

     text-decoration  - an <a> underlines by default
     colour           - an <a> uses its own link colour
   ========================================================= */

a.pillar-action {
    text-decoration: none !important;
    color: inherit !important;
}

/* ---------------------------------------------
   THE BUTTON IS THE TEXT ONLY
   The row keeps its full width and its hairline divider.
   The link inside it shrinks to the words, so the empty
   space beside "Explore Programme" is not part of the
   target and cannot be clicked.
   --------------------------------------------- */
.pillar-action > a.pillar-action-link {
    display: inline-block !important;

    width: fit-content !important;
    max-width: 100% !important;

    color: inherit !important;
    text-decoration: none !important;

    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

/* no motion at all - no colour change, no underline, no
   movement on hover. The row and its dead space stay
   completely still. */
.pillar-action > a.pillar-action-link:hover,
.pillar-action > a.pillar-action-link:active {
    color: inherit !important;
    text-decoration: none !important;
    transform: none !important;
    transition: none !important;
}

/* the card's own hover must not drag the button around either */
@media (hover: hover) and (pointer: fine) {
    .programme-pillar-card:hover .pillar-action > a.pillar-action-link {
        color: inherit !important;
        text-decoration: none !important;
    }
}

/* keyboard users still need to see where they are - this is a
   focus ring, not motion, and it only appears on Tab */
.pillar-action > a.pillar-action-link:focus-visible {
    outline: 2px solid #1769e0 !important;
    outline-offset: 3px !important;
    border-radius: 3px !important;
}
/* =========================================================
   ONE CARD STYLE ACROSS THE HOMEPAGE
   ---------------------------------------------------------
   The card heading and paragraph style used by the
   OUR PROGRAMMES cards, carried across to the Mobile App
   section and the three sections below it.

   THE REFERENCE, measured from .program-card at 1440px

     heading    -apple-system  18px  700  lh 24.3px  ls normal
                rgb(19, 38, 83)      = #132653
     paragraph  Arial          14px  400  lh 22.4px  ls normal
                rgb(102, 112, 133)  = #667085

   WHAT WAS DIFFERENT

     heading     Arial, 2px larger, weight 800 not 700,
                 #0B1F4D instead of #132653
     paragraph   1 to 2px larger, #5B6B85 instead of #667085

   WHY THESE SELECTORS AND NOT THE SECTION NAMES

   The existing rules are two classes deep and win on
   specificity, so .odlc-mobile-app h4 would do nothing:

     .odlc-mobile-app .odlc-mobile-feature h4        index.css:36249
     .odlc-digital-credentials .odlc-credential-feature h4   :36868
     .odlc-career-support .odlc-career-highlight h4          :37075
     .odlc-apply-pathways .odlc-pathway-card h4              :37327

   and several of those already carry a font-size !important
   further down at :36932, :36938, :37163, :37169, :37447.

   WHY FONT SIZE IS ONLY SET ABOVE 768px

   The site already steps these cards down on small screens and
   that is deliberate:

     max-width 767px  headings 18px, paragraphs 14px   :36932,37163,37447
     max-width 480px  headings 17px                     :36938,37169

   Those sizes already match the OUR PROGRAMMES cards, so setting
   font-size here would undo the 17px step on a phone. Font size
   and line height are therefore confined to 768px and up, while
   font family, weight, letter spacing and colour are corrected
   at every width.

   NOT TOUCHED
     - every 35px section title
     - .odlc-pathway-heading h3, the group labels such as
       STUDENTS and ALUMNI, which are group headings not cards
     - card height, padding, icon chips, borders, buttons
   ========================================================= */

/* ---------------------------------------------
   1. FONT, WEIGHT, TRACKING AND COLOUR - every width
   --------------------------------------------- */

.odlc-mobile-app .odlc-mobile-app-content h3,
.odlc-mobile-app .odlc-mobile-feature h4,
.odlc-digital-credentials .odlc-credential-feature h4,
.odlc-career-support .odlc-career-highlight h4,
.odlc-apply-pathways .odlc-pathway-card h4 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    color: #132653 !important;
}

.odlc-mobile-app .odlc-mobile-app-description,
.odlc-mobile-app .odlc-mobile-feature p,
.odlc-digital-credentials .odlc-credential-feature p,
.odlc-digital-credentials .odlc-digilocker-note p,
.odlc-career-support .odlc-career-highlight p,
.odlc-career-support .career-step-content p,
.odlc-apply-pathways .odlc-apply-heading p,
.odlc-apply-pathways .odlc-pathway-card p {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
    color: #667085 !important;
}

/* ---------------------------------------------
   2. FONT SIZE AND LINE HEIGHT - 768px and up only,
      so the 17px phone step at max-width 480px survives
   --------------------------------------------- */

@media (min-width: 768px) {

    .odlc-mobile-app .odlc-mobile-app-content h3,
    .odlc-mobile-app .odlc-mobile-feature h4,
    .odlc-digital-credentials .odlc-credential-feature h4,
    .odlc-career-support .odlc-career-highlight h4,
    .odlc-apply-pathways .odlc-pathway-card h4 {
        font-size: 18px !important;
        line-height: 24.3px !important;
    }

    .odlc-mobile-app .odlc-mobile-app-description,
    .odlc-mobile-app .odlc-mobile-feature p,
    .odlc-digital-credentials .odlc-credential-feature p,
    .odlc-digital-credentials .odlc-digilocker-note p,
    .odlc-career-support .odlc-career-highlight p,
    .odlc-career-support .career-step-content p,
    .odlc-apply-pathways .odlc-apply-heading p,
    .odlc-apply-pathways .odlc-pathway-card p {
        font-size: 14px !important;
        line-height: 22.4px !important;
    }

}
/* =========================================================
   MOBILE APP - remove the curve shape at the bottom of the cards
   ---------------------------------------------------------
   The pale quarter-ellipse that sits behind the coloured bar in
   every one of the six .odlc-mobile-feature cards.

   It is the ::after pseudo element at index.css:36181 - a
   132 x 76 ellipse with border-radius 50% 50% 0 0 at 13%
   opacity, positioned at left:-16px bottom:-40px.

   The ::before at index.css:36194 is left alone. That is the
   solid 70 x 4 colour bar, which is a straight edge rather
   than a curve.

   Nothing else about the card changes: it is absolutely
   positioned, so removing it cannot affect layout, height,
   padding or the icon chip.
   ========================================================= */

.odlc-mobile-app .odlc-mobile-feature::after {
    display: none !important;
}
/* =========================================================
   SCAN TO VERIFY - the QR placeholder is a link
   ---------------------------------------------------------
   index.php:2037 used to be a plain <div class="credential-qr">.
   It is now an <a> carrying the same class, so every existing rule
   at index.css:24808, 25068, 25210 and 25299 still applies and the
   card looks exactly as it did. Only the link behaviour is new.

   No hover colour change, no movement, no scaling - consistent with
   the rest of this page. The affordance is the pointer cursor plus a
   focus ring for anyone using a keyboard.
   ========================================================= */

a.credential-qr-link {
    display: block !important;
    text-decoration: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

a.credential-qr-link:hover,
a.credential-qr-link:active {
    text-decoration: none !important;
    transform: none !important;
    transition: none !important;
}

a.credential-qr-link:focus-visible {
    outline: 3px solid #1769e0 !important;
    outline-offset: 3px !important;
    border-radius: 8px !important;
}
/* =========================================================
   SCAN TO VERIFY - the scanner graphic
   ---------------------------------------------------------
   Replaces the .qr-pattern grid of nine empty <span> squares
   (index.css:24835) with a real image, images/credential-scanner.svg.

   .credential-qr at index.css:24808 is 125x125 with a 7px white
   border and box-sizing:border-box, so the content box is 111px.
   The image fills that content box exactly, which is what the
   grid used to do, so the card does not change size.
   ========================================================= */

.credential-scanner {
    display: block !important;

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

    object-fit: contain !important;
    object-position: center !important;

    border: 0 !important;
    border-radius: 2px !important;
}
/* =========================================================
   CAREER SUPPORT - the left card matches the section width
   ---------------------------------------------------------
   THE PROBLEM, measured at 1920px

     career container      1380px   x 270 to 1650
     mobile app container  1380px   x 270 to 1650
     credentials container 1380px   x 270 to 1650
     pillars container     1380px   x 270 to 1650

   The section was never narrower and never overflowed:
   columns 666 + 666 + a 48px gap = 1380 exactly.

   What read as narrow was the card inside it. .career-path-card
   is a hard coded 440px, centred inside a 666px column, so it sat
   at x 383 to 823 with 113px of dead space either side. Its left
   edge landed 113px right of where every other section on the
   homepage begins its content.

     .career-path-card       440px   x 383 to 823
     .odlc-career-highlights 620px   x 999 to 1619

   THE FIX

   Grow the card to 620px, the exact width of the three cards in the
   right column, and pull it to the left edge of the column instead
   of leaving it centred. Both sides then read 620px wide and the
   card starts on the container edge, flush with every other
   section.

     career-path-card   440px -> 620px,  x 270 to 890
     dead space         113px each side -> 0 on the left
     right side cards   620px, matched

   Scoped to min-width 992px. Below that the grid becomes a single
   column at index.css:26062 and .career-path-card already has its
   own responsive rules, so a phone and a tablet are untouched.
   ========================================================= */

@media (min-width: 992px) {

    .career-path-card {
        width: 620px !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .odlc-career-visual {
        justify-content: flex-start !important;
    }

}
/* =========================================================
   APPLY WITH ODLC - buttons on the left, and a light band
   ---------------------------------------------------------
   THE SURROUNDINGS, measured at 1440px in document order

     .odlc-digital-credentials   rgb(255,255,255)  #FFFFFF
     .odlc-career-support         rgb(247,250,255)  #F7FAFF
     .odlc-apply-pathways         rgb(255,255,255)  #FFFFFF   (was)
     .odlc-apply-hero             rgb(247,250,255)  #F7FAFF
     .testimonial-section         rgb(255,255,255)  #FFFFFF
     .blog-section                rgb(244,247,255)  #F4F7FF

   The problem was that this section was white while the hero strip
   above it was #F7FAFF, so the two ran together and the section read
   as unlabelled white space between two other sections.

   A dark band was tried here and rejected - it fought the white cards
   and broke the page rhythm. Staying light, the section takes
   #F4F7FF, the other tint the site already uses, for the whole band
   including the hero strip. That gives a clean light to light to
   light run:

     #F7FAFF  career support
     #F4F7FF  apply with odlc   <- this section
     #FFFFFF  testimonials

   No text colour is changed anywhere, so every heading, paragraph and
   badge keeps the colour it already had and its contrast is unchanged.

   BUTTONS ON THE LEFT
   .odlc-card-footer decides the horizontal placement and index.css
   pushes it to the end. ALC and RCO wrap their button in
   .odlc-card-dropdown, so that wrapper has to be corrected as well or
   only three of the five cards would move.
   ========================================================= */

.odlc-apply-pathways,
.odlc-apply-hero {
    background: #F1F5FE !important;
}

/* ---------------------------------------------
   BUTTONS ON THE LEFT
   --------------------------------------------- */

.odlc-apply-pathways .odlc-pathway-card .odlc-pathway-card-footer {
    justify-content: flex-start !important;
    align-items: center !important;
}

.odlc-apply-pathways .odlc-pathway-card .odlc-card-dropdown {
    display: flex !important;
    justify-content: flex-start !important;
}

.odlc-apply-pathways .odlc-pathway-card .odlc-card-action {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
}
/* =========================================================
   BLOG SECTION - white background
   ---------------------------------------------------------
   Two rules compete for this section today:

     index.css:12577   background: #ffffff
     index.css:13606   background: #f4f7ff     <- later, so it won

   The measured result was rgb(244,247,255), the same tint as the
   APPLY WITH ODLC section, so two sections a screen apart carried the
   identical background. This puts the blog back to white.

   One rule, appended, so both existing declarations are left in place
   and a future edit to either still shows up rather than being
   silently overridden from the other direction.
   ========================================================= */

.blog-section {
    background: #F1F5FE !important;
}
/* =========================================================
   MOBILE APP - the decorative circle goes behind the cards
   ---------------------------------------------------------
   THE FAULT

   .odlc-mobile-glow.glow-one is a 600px absolutely positioned glow
   that lives inside the PHONE column:

     .odlc-mobile-app-visual .odlc-mobile-glow.glow-one
         position absolute, z-index 0
         top 50%, left 38%, translate(-50%,-50%)
         width 600px, height 600px                 index.css:36406

   At left 38% with a -50% translate it bleeds well to the left of
   that column and across the card grid.

   The card grid, index.css:23546, is position:static. An absolutely
   positioned element paints above a static one, so the circle drew
   over the cards. The individual cards are position:relative, which
   is not enough on its own, because z-index:auto leaves them in DOM
   order and the phone column comes after the left column.

   pointer-events on the circle is already none, so this was never a
   click problem, only a paint-order one.

   WHERE IT SHOWED, measured on the live page

     1440px   horizontal overlap  -2px   0 of 6 cards crossed
     1199px   horizontal overlap  39px   2 of 6 cards crossed
     1100px   horizontal overlap  18px   2 of 6 crossed
     1024px   horizontal overlap  30px   2 of 6 crossed
      991px   horizontal overlap  36px   2 of 6 crossed
      900px and below   no overlap, the layout stacks

   Only the 991px to 1199px band, which is why it was never noticed
   on a wide desktop. The fix is harmless at every other width.

   THE FIX

   Lift the grid above the circle, using the same z-index the phone
   already has at index.css:36445. Nothing about the circle changes,
   so it keeps its size, colour and softness and still sits behind the
   phone.
   ========================================================= */

.odlc-mobile-features {
    position: relative !important;
    z-index: 2 !important;
}
/* =========================================================
   HERO TAG ON A PHONE
   ---------------------------------------------------------
   WHY THIS WAS NEEDED

   Measured on the live page:

     .hero-right          display grid    at 1440, 768, 767
     .hero-right          display none    at 640 and below
     .hero-image-inline   display none    at 767 and above
     .hero-image-inline   display block   at 766 and below

   So on a phone the hero shows the text plus exactly ONE image:
   bigimage.png, inside .hero-image-inline. That block is the deliberate
   second copy of the desktop photo described at index.php:53-63, and
   the comment on line 65 said the old mobile label was
   "deliberately not repeated here" - which is why the photo on a phone
   carried no tag at all.

   The glass pill tags added for the desktop are inside
   @media (min-width: 768px), so they are hidden here.

   WHY THE QUERY IS 767px

   Measured, not assumed: .hero-image-inline computes display:none at
   767px and display:block at 766px. A max-width:766px query therefore
   does NOT apply at 766px itself in this browser, and the tag measured
   0x0 there with font-size 0. The query has to be 767px so it covers
   766.

   That is safe one pixel earlier than the image switch, because at
   767px .hero-image-inline is still display:none, so the tag inside it
   cannot show. This file has the same off-by-one at the .small-images
   gap boundary, where the gap measures 14px at 1199 and 12px at 1198.

   THE BLOCK IS SCOPED, NOT INHERITED

   .hero-image-inline is already display:none above 766px, so a tag
   placed inside it could never show on a desktop anyway. The media
   query is still written explicitly so the tag cannot appear if those
   parent rules are ever changed.

   .hero-image-inline already has overflow:hidden, so the pill is
   clipped to the photo rather than spilling over it.
   ========================================================= */

@media (max-width: 767px) {

    .hero-image-inline {
        position: relative !important;
    }

    .hero-tag-inline {
        position: absolute !important;

        left: 10px !important;
        bottom: 10px !important;

        display: flex !important;
        align-items: center !important;
        gap: 5px !important;

        width: fit-content !important;
        max-width: calc(100% - 20px) !important;

        padding: 6px 10px 6px 8px !important;
        border-radius: 14px !important;

        background: rgba(9, 20, 40, .58) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
        backdrop-filter: blur(12px) saturate(1.3) !important;
        border: 1px solid rgba(255, 255, 255, .18) !important;
        box-shadow: 0 4px 12px rgba(4, 14, 32, .26) !important;

        color: #ffffff !important;
        font-family: inherit !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        letter-spacing: .1px !important;
        white-space: nowrap !important;

        z-index: 6 !important;
        pointer-events: none !important;
    }

    .hero-tag-inline i {
        font-size: 11.5px !important;
        line-height: 1 !important;
        color: #8FC0FF !important;
    }

}
/* ==========================================================
   APPLY WITH ODLC - 7 PATHWAY SECTION  (odlcp-)
   Appended as one self-contained block. No selector above this
   line is modified.

   global-typography.css loads after this file and sets bare-element
   !important rules on h2 / h3 / p / a. An !important declaration on an
   element selector outranks a plain class rule, so every text rule below
   carries !important on a class selector to win. Same technique the footer
   override layer uses.

   Mobile first, min-width only. A max-width:1199px rule is exclusive at the
   boundary in this engine, so 1199 and 1200 would disagree.

   COLOUR - one accent drives a whole card
     The icon tile, the variant label, the apply link and the arrow circle
     all read from --accent. Orange on the Indian cards, purple on the
     International ones, so colour states which variant the card is and
     nothing on the card disagrees with anything else.
       orange  #F27B21   .odlc-pathway-icon.orange
       purple  #6655E8   .odlc-pathway-icon.purple
     --accent-soft is the same hue at low alpha, used for the arrow circle.
     Group tiles are their own: blue #287BE0 and green #24B96F, measured off
     .odlc-pathway-icon.blue and .program-icon.green-icon.
     White-glyph contrast: #6655E8 5.21:1, #F27B21 2.75:1, #287BE0 4.20:1,
     #24B96F 2.55:1. The two softest are inherited from the approved
     reference and recorded rather than silently changed.

   THE ARROW CIRCLE
     Pinned to the bottom-right corner of the card at every width, with the
     apply link left in the flow. .odlcp-card is position:relative, so the
     arrow anchors to the card rather than to the text block, and the same
     corner holds whatever the content height turns out to be. The
     padding-right on .odlcp-card reserves its lane, so the apply link can
     never run underneath it, even in the narrowest 3-up card.
   ========================================================== */

.odlcp-card{
    --accent:#F27B21;
    --accent-soft:rgba(242,123,33,.13);
}

/* International variants read purple throughout. */
.odlcp-card.odlcp-intl{
    --accent:#6655E8;
    --accent-soft:rgba(102,85,232,.10);
}

/* group tiles: blue / green / blue, each rule the same colour as its tile */
.odlcp-gp-blue{--g:#287BE0}
.odlcp-gp-green{--g:#24B96F}

.odlcp-section{
    background:radial-gradient(circle at 85% 50%, rgba(8, 60, 124, .07), transparent 34%), #f7faff;
    padding:56px 0 60px;
}

.odlcp-wrap{
    width:100%;
    max-width:1380px;
    margin:0 auto;
}

/* ---------- section header ---------- */

/* The tag carries an icon, as the other section tags on this page do -
   WHY ODLC uses a <i class="dash"> bar at index.css:34539, CAREER SUPPORT
   uses a glyph. flex row with the pair centred reads better than an inline
   glyph against 11px capitals, and the gap keeps the icon off the text. */
.odlcp-tag{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    text-align:center;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:11px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
    letter-spacing:1px;
    color:#0D6EFD;
    text-transform:uppercase;
    margin:0 0 14px;
}

.odlcp-tag i{
    font-size:12.5px;
    line-height:1;
    color:#0D6EFD;
}

.odlcp-h2{
    margin:0 auto 16px;
    max-width:950px;
    text-align:center;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:35px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    letter-spacing:-1.2px;
    color:#0B1F4D;
}

.odlcp-h2 span{color:#5b5df9}

.odlcp-lead{
    margin:0 auto 38px;
    max-width:950px;
    text-align:center;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:16px !important;
    line-height:1.6 !important;
    font-weight:400 !important;
    color:#667085;
}

/* ---------- one panel per group ---------- */

.odlcp-panel{
    display:grid;
    grid-template-columns:1fr;
    background:#fff;
    border:1px solid #E6ECF5;
    border-radius:16px;
    margin-bottom:18px;
    overflow:hidden;
}

.odlcp-panel:last-of-type{margin-bottom:0}

.odlcp-glabel{
    padding:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    justify-content:center;
    background:#FBFCFE;
    border-bottom:1px solid #E6ECF5;
}

.odlcp-gtile{
    width:43px;
    height:43px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    background:var(--g);
    color:#fff;
    font-size:18px;
    line-height:1;
    margin-bottom:14px;
}

.odlcp-gtile i{line-height:1}

.odlcp-gtitle{
    margin:0 0 14px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
    font-size:20px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    letter-spacing:-.2px;
    color:#0B1F4D;
    text-transform:uppercase;
}

.odlcp-grule{
    display:block;
    width:48px;
    height:3px;
    border-radius:2px;
    background:var(--g);
}

/* ---------- cards ---------- */

.odlcp-cards{
    padding:18px;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    align-content:center;
}

/* padding-right reserves the arrow's lane. Shorthand order is
   top right bottom left, so the reserved side must sit in the SECOND
   slot. The arrow itself spans 18px to 58px from the right edge, so
   70px of padding leaves a 12px gap. */
.odlcp-card{
    position:relative;
    display:grid;
    grid-template-columns:46px 1fr;
    gap:14px;
    background:#fff;
    border:1px solid #E6ECF5;
    border-radius:14px;
    padding:18px 70px 18px 18px;
}

.odlcp-tile{
    width:43px;
    height:43px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--accent);
    color:#fff;
    font-size:18px;
    line-height:1;
}

.odlcp-tile i{line-height:1}

.odlcp-body{min-width:0}

/* ---------- row alignment, third row only ----------
   The Coordination Offices panel holds three cards and its copy lengths
   differ most there: the two RCO descriptions run to two lines and the NCO
   one to three, which pushed the NCO apply link and its arrow about 27px
   below its neighbours. Reserving the height of the longest case lines the
   row up.

   The heights are the elements' own line box, multiplied out:
       label   11px x 1.2  = 13.2px, one line
       title   22px x 1.3  = 28.6px, so 57.2px for two lines
       body    16px x 1.6  = 25.6px, so 76.8px for three lines
   They are min-heights, not heights: a title that needs a third line still
   grows the row rather than overflowing the next element.

   Scoped to .odlcp-c3, the only grid with three cards, so the two-up panels
   above it keep their natural tight spacing and are untouched. */

.odlcp-cards.odlcp-c3 .odlcp-vlabel{min-height:13.2px}

.odlcp-cards.odlcp-c3 .odlcp-cardtitle{min-height:57.2px}

.odlcp-cards.odlcp-c3 .odlcp-cardbody{min-height:76.8px}

.odlcp-vlabel{
    margin:0 0 6px !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:11px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
    letter-spacing:1.2px;
    color:var(--accent);
    text-transform:uppercase;
}

.odlcp-cardtitle{
    margin:0 0 8px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
    font-size:22px !important;
    line-height:1.3 !important;
    font-weight:700 !important;
    letter-spacing:-.3px;
    color:#0B1F4D;
}

.odlcp-cardbody{
    margin:0 0 14px !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:16px !important;
    line-height:1.6 !important;
    font-weight:400 !important;
    color:#667085;
}

.odlcp-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-width:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
    font-size:15px !important;
    font-weight:700 !important;
    letter-spacing:.3px;
    color:var(--accent);
    text-decoration:none;
}

/* No underline on hover, on any card. An earlier :hover rule here put one
   back, which is the only thing that was ever drawing it - at rest the
   computed text-decoration is already none. Matches how the site treats its
   other card action links, e.g. .pillar-action > a.pillar-action-link:hover
   and a.credential-qr-link:hover, both of which hold text-decoration:none
   rather than adding an underline. */
.odlcp-cta:hover,
.odlcp-cta:active,
.odlcp-cta:focus{
    text-decoration:none;
}

.odlcp-cta:focus-visible,
.odlcp-go:focus-visible{
    outline:3px solid #0D6EFD;
    outline-offset:3px;
}

/* Holds the apply link. The arrow is absolutely positioned against the
   card, so it is out of this row and the row is one link wide. */
.odlcp-actions{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:nowrap;
}

/* the arrow, bottom-right corner at every width, 40px from the
   reference, soft tint of the card accent with a matching chevron */
.odlcp-go{
    position:absolute;
    right:18px;
    bottom:18px;
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:15px;
    line-height:1;
    background:var(--accent-soft);
    color:var(--accent);
    transition:background .2s;
}

.odlcp-go:hover{background:var(--accent);color:#fff}

/* ---------- 768px and up: two cards per row ---------- */

@media (min-width:768px){

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

}

/* ---------- 1200px and up: label column moves to the left ---------- */

@media (min-width:1200px){

    .odlcp-panel{grid-template-columns:270px 1fr}

    .odlcp-glabel{
        align-items:flex-start;
        text-align:left;
        padding:26px 24px;
        border-bottom:0;
        border-right:1px solid #E6ECF5;
    }

    .odlcp-cards.odlcp-c3{grid-template-columns:repeat(3,1fr)}

    .odlcp-lead{margin-bottom:34px}

}

/* ============================================================================
   SAMPLE CERTIFICATES (SPECIMENS)
   ----------------------------------------------------------------------------
   Preview cards for specimen certificates, one per ODLC programme, with level
   selection where a programme has more than one specimen, a per-specimen QR
   code that opens its own sample page, and separate View / Download actions.

   Every class is prefixed odlcs-. Nothing here reuses or overrides a selector
   owned by another block, and this block is appended last in index.css.

   !important is load-bearing, not decorative. css/global-typography.css is
   linked after index.css and carries bare-element !important rules on h1-h6,
   a and p at six separate breakpoints. A class selector alone cannot win
   against those, so the type properties below all carry !important. The media
   queries at the foot of this block repeat it for the same reason - each of
   those breakpoints also has its own bare-element !important rule further down
   global-typography.css.

   Values were taken off .odlc-digital-credentials in index.php, the section
   immediately above this one:
     badge      inline-flex  gap 8px  11px/700  ls 1px  #0D6EFD
     h2                      35px/800  ls -1.2px  #0B1F4D
     intro                   16px/400  lh 25.6px #666666
     icon tile               40x40  r10  white glyph 17px
     note  #F4F8FD  2.4px left #083C7D  r7  pad 12px 14px
     button                  #083C7D  white  15px/700  ls .2px  r7px  h48px
     heading gradient        linear-gradient(90deg,#6d4dff,#4bb8ff)
   ============================================================================ */

.odlcs-specimens{
    /* scoped here rather than on :root so nothing is added to or changed on
       the document root, which the rest of the page shares */
    --odlcs-navy:#083C7D;
    --odlcs-ink:#0B1F4D;
    --odlcs-note-ink:#17203D;
    --odlcs-accent:#0D6EFD;
    --odlcs-body:#666666;
    --odlcs-line:#E6ECF5;
    --odlcs-font-head:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.odlcs-specimens{background:#F1F5FE;padding:65px 0 60px}
.odlcs-wrap{width:92%;max-width:1380px;margin:0 auto}


/* .odlcs-specimens {
    background-color: #F1F5FF;
    background-image: url("images/samplecertbg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 65px 0 60px;
} */
/* ---------- heading ---------- */
/* Same order as every other section on the page: the small uppercase tag
   first, then the heading, then the body copy. .odlc-digital-badge, the
   nearest neighbour, computes to inline-flex with an 8px gap at 11px/700,
   ls 1px, #0D6EFD, and is centred by a text-align:center wrapper. */
.odlcs-head{text-align:center;margin-bottom:26px}

.odlcs-tag{
    display:inline-flex !important;
    align-items:center;
    gap:8px;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:11px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
    letter-spacing:1px !important;
    color:#0D6EFD !important;
    text-transform:uppercase !important;
    text-align:left;
    margin:0 0 14px !important;
}

.odlcs-tag i{font-size:14px !important;line-height:1 !important;color:#0D6EFD !important}

.odlcs-head h2{
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:35px !important;
    font-weight:800 !important;
    line-height:1.25 !important;
    letter-spacing:-1.2px !important;
    color:#0B1F4D !important;
    text-align:center !important;
    text-transform:none !important;
    margin:0 auto 14px !important;
    max-width:1100px;
}

/* The trailing phrase takes the same gradient every other section heading on
   this page uses. One value is in play across all ten of them -
   linear-gradient(90deg,#6d4dff,#4bb8ff) - carried on the heading's <span>,
   e.g. .odlc-digital-credentials h2 span, .odlc-career-support h2 span,
   .odlc-apply-pathways h2 span and the rest. color stays set underneath as
   the fallback for any engine without background-clip: text, which is why the
   source declares it after the transparent fill. */
.odlcs-head h2 span{
    background:linear-gradient(90deg,#6d4dff,#4bb8ff) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:#6d4dff !important;
}

/* body copy matches .odlc-digital-intro: 16px / 400 / 1.6 / #666666 */
.odlcs-intro{
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:16px !important;
    font-weight:400 !important;
    line-height:1.6 !important;
    color:#666666 !important;
    text-align:center !important;
    margin:0 auto !important;
    max-width:840px;
}

/* ---------- programme tabs ---------- */
.odlcs-tabs{
    display:grid;grid-template-columns:repeat(5,1fr);gap:0;
    background:#fff;border:1px solid #E6ECF5;border-radius:14px;
    overflow:hidden;margin-bottom:14px
}

.odlcs-tab{
    display:flex !important;align-items:center;gap:12px;padding:16px 18px;
    border:0;border-left:1px solid #E6ECF5;background:#fff;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:14px !important;font-weight:700 !important;line-height:1.3 !important;
    color:#083C7D !important;text-align:left !important;text-decoration:none !important;
    cursor:pointer;transition:background .18s
}
.odlcs-tab:first-child{border-left:0}
.odlcs-tab i{font-size:19px !important;flex:0 0 auto}
.odlcs-tab:hover{background:#F5F9FF}

.odlcs-tab[aria-selected="true"]{background:#083C7D;color:#fff !important;position:relative}
.odlcs-tab[aria-selected="true"]:hover{background:#083C7D}
.odlcs-tab[aria-selected="true"] i{color:#fff !important}
.odlcs-tab[aria-selected="true"]::after{
    content:"";position:absolute;left:50%;bottom:-15px;
    transform:translateX(-50%) rotate(45deg);width:12px;height:12px;
    background:#083C7D;border-right:1px solid #083C7D;border-bottom:1px solid #083C7D
}
.odlcs-tab:focus-visible{outline:3px solid #0D6EFD;outline-offset:-3px}

/* ---------- level / qualification selection ----------
   Only rendered when the chosen programme actually has more than one
   specimen. Single-sample programmes get no row at all. */
.odlcs-levels{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.odlcs-levels[hidden]{display:none}

.odlcs-levels-label{
    font-family:Arial,Helvetica,sans-serif !important;font-size:12px !important;
    font-weight:700 !important;letter-spacing:1px !important;
    text-transform:uppercase !important;color:#666666 !important;margin-right:2px
}

.odlcs-pill{
    border:1px solid #E6ECF5;background:#fff;border-radius:999px;padding:8px 16px;
    font-family:Arial,Helvetica,sans-serif !important;font-size:13px !important;
    font-weight:700 !important;color:#083C7D !important;cursor:pointer;transition:all .18s
}
.odlcs-pill:hover{border-color:#0D6EFD;background:#F5F9FF}
.odlcs-pill[aria-selected="true"]{background:#0D6EFD;border-color:#0D6EFD;color:#fff !important}
.odlcs-pill:focus-visible{outline:3px solid #0D6EFD;outline-offset:2px}

/* ---------- panel : two columns on desktop, one on mobile ---------- */
/* A 1fr grid track floors at its content's min-content size, because grid and
   flex children default to min-width:auto. The certificate's bottom row
   (signature rule + seal + QR) has a min-content of about 258px, which pushed
   the track wider than the panel and overflowed the page on a phone. This lets
   the track take the width it actually has. */
.odlcs-panel > *{min-width:0}

/* The thumbnails are a direct child of the panel rather than sitting inside a
   wrapper with the viewer, so the thumbnails no longer count towards the height
   the detail column is centred in. With both in one wrapper the left column was
   as tall as certificate + thumbnails, and centring against that put the
   buttons well below the middle of the certificate.
       row 1   viewer (the certificate) | detail
       row 2   thumbnails              | -
   align-items is centre, not start, and it has to be centre on BOTH items, not
   just the detail. Between 768px and 1199px the right column is narrow enough
   that the detail ends up taller than the certificate. Centring only the
   detail would then centre it inside a row the certificate was pinned to the
   top of, leaving the two midpoints 11px to 39px apart. Centring both makes
   them coincide whichever of the two is the taller one. */
.odlcs-panel{
    background:#fff;border:1px solid #E6ECF5;border-radius:16px;
    padding:24px;display:grid;grid-template-columns:1.12fr 1fr;gap:14px 32px;
    align-items:center;margin-top:14px
}

.odlcs-viewer{grid-column:1;grid-row:1}
.odlcs-detail{grid-column:2;grid-row:1;align-self:center}
.odlcs-thumbs{grid-column:1;grid-row:2}

/* ---------- certificate viewer ---------- */
.odlcs-viewer{position:relative;display:flex;align-items:center;gap:12px;min-width:0}

.odlcs-nav-btn{
    width:44px;height:44px;border-radius:50%;background:#fff;
    border:1px solid #E6ECF5;color:#083C7D;font-size:16px !important;
    display:flex !important;align-items:center;justify-content:center;cursor:pointer;
    flex:0 0 auto;box-shadow:0 2px 8px rgba(11,31,77,.06);transition:border-color .18s
}
.odlcs-nav-btn:hover{border-color:#0D6EFD}
.odlcs-nav-btn:focus-visible{outline:3px solid #0D6EFD;outline-offset:2px}

/* ---------- the specimen certificate ---------- */
.odlcs-cert{
    flex:1 1 auto;min-width:0;aspect-ratio:1.414/1;border-radius:6px;
    background:
        radial-gradient(circle at 18% 12%,#FFFDF7 0%,#FFFFFF 42%),
        linear-gradient(160deg,#FFFDF8 0%,#FFFFFF 55%,#FBF7EE 100%);
    border:1px solid #E8DCC0;position:relative;overflow:hidden;
    box-shadow:0 10px 26px rgba(11,31,77,.10);
    padding:20px 22px;display:flex;flex-direction:column;
    font-family:Georgia,"Times New Roman",serif !important
}

.odlcs-cert-frame{
    position:absolute;inset:8px;border:2px solid #D9B75C;border-radius:3px;
    pointer-events:none
}
.odlcs-cert-frame::after{
    content:"";position:absolute;inset:5px;border:1px solid #E7D2A4;border-radius:2px
}

.odlcs-corner{position:absolute;width:16px;height:16px;border:2px solid #D9B75C}
.odlcs-corner.tl{top:8px;left:8px;border-right:0;border-bottom:0}
.odlcs-corner.tr{top:8px;right:8px;border-left:0;border-bottom:0}
.odlcs-corner.bl{bottom:8px;left:8px;border-right:0;border-top:0}
.odlcs-corner.br{bottom:8px;right:8px;border-left:0;border-top:0}

.odlcs-cert-mark{
    font-family:Arial,Helvetica,sans-serif !important;font-weight:800 !important;
    font-size:20px !important;letter-spacing:.5px !important;
    color:#083C7D !important;text-align:center !important;margin-top:6px
}
.odlcs-cert-mark span{color:#3E6FB5 !important}
.odlcs-cert-rule{width:96px;height:2px;background:#D9B75C;margin:7px auto 0;border-radius:1px}

/* The text block is centred in the space above the foot. Without this the
   column flex packed everything to the top, and the last line of a long
   programme line fell outside the frame and was cut off by the
   overflow:hidden on the certificate. flex:1 takes the slack and
   justify-content centres within it, so the foot sits at the natural bottom
   edge. No min-height:0 here: that would let the block shrink below its own
   content on a narrow card, and the programme line would then run underneath
   the seal and QR instead of pushing the certificate taller. */
.odlcs-cert-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}

.odlcs-cert-title{
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:15px !important;font-weight:700 !important;color:#1B2F5B !important;
    text-align:center !important;margin-top:12px;letter-spacing:.3px !important
}
.odlcs-cert-lede{
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:9.5px !important;color:#7A7A7A !important;text-align:center !important;
    margin-top:10px;font-style:italic !important
}
.odlcs-cert-name{
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:17px !important;font-weight:700 !important;color:#12294F !important;
    text-align:center !important;margin-top:5px;border-bottom:1px solid #C9B98E;
    display:inline-block;padding:0 26px 3px;align-self:center
}
.odlcs-cert-prog{
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:10px !important;color:#5A5A5A !important;text-align:center !important;
    margin-top:11px;line-height:1.5 !important;padding:0 30px
}

.odlcs-cert-foot{
    margin-top:8px;display:flex;align-items:flex-end;
    justify-content:space-between;gap:14px;padding:0 6px;min-width:0;flex-wrap:wrap
}
.odlcs-sig{
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:8px !important;color:#7A7A7A !important;text-align:center !important;
    line-height:1.5 !important;min-width:0
}
.odlcs-sig .rule{width:74px;height:1px;background:#C9B98E;margin:0 auto 3px}
.odlcs-seal{
    width:52px;height:52px;border-radius:50%;flex:0 0 auto;
    background:radial-gradient(circle at 34% 30%,#F6DE9C 0%,#D9B75C 46%,#B8933C 100%);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
    display:flex;align-items:center;justify-content:center;
    font-family:Arial,Helvetica,sans-serif !important;font-size:6.5px !important;
    font-weight:800 !important;color:#6B5317 !important;text-align:center !important;
    line-height:1.15 !important;letter-spacing:.2px !important
}

/* the QR is the link to the specimen's own sample page */
.odlcs-qr{flex:0 0 auto;text-align:center !important;display:block !important;text-decoration:none !important}
.odlcs-qr-grid{
    width:46px;height:46px;background:#fff;border:1px solid #D8D8D8;padding:3px;
    display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);gap:0
}
.odlcs-qr-grid span{background:#fff}
.odlcs-qr-grid span.on{background:#12294F}
.odlcs-qr small{
    display:block;font-family:Arial,Helvetica,sans-serif !important;
    font-size:6.5px !important;color:#7A7A7A !important;margin-top:3px;letter-spacing:.2px !important
}
.odlcs-qr:hover .odlcs-qr-grid{border-color:#0D6EFD}
.odlcs-qr:focus-visible{outline:3px solid #0D6EFD;outline-offset:3px;border-radius:4px}

/* The diagonal SPECIMEN watermark is deliberately absent from the certificate
   face. The specimen is still marked in three places: the "Status: Specimen"
   label under the QR code, "ODLC SPECIMEN" in the seal, and the Specimen
   Notice below the panel. Marking the PDF itself happens when the PDF is
   generated, not here. */

/* ---------- thumbnails : one per specimen of this programme ---------- */
/* centred under the certificate, so a programme with a single specimen sits in
   the middle rather than hanging off the left edge */
.odlcs-thumbs{
    display:flex;gap:12px;margin-top:14px;min-width:0;flex-wrap:wrap;justify-content:center
}
.odlcs-thumb{
    width:96px;height:68px;border-radius:5px;overflow:hidden;
    border:2px solid #E6ECF5;background:#fff;padding:0;cursor:pointer;
    box-shadow:0 2px 6px rgba(11,31,77,.06);transition:border-color .18s;position:relative
}
.odlcs-thumb:hover{border-color:#B9D2F5}
.odlcs-thumb[aria-selected="true"]{border-color:#083C7D}
.odlcs-thumb:focus-visible{outline:3px solid #0D6EFD;outline-offset:2px}
/* the same certificate, scaled down rather than a second asset */
.odlcs-thumb .odlcs-cert{
    position:absolute;top:0;left:0;width:186px;height:131px;
    transform:scale(.516);transform-origin:top left;pointer-events:none;
    box-shadow:none;border-radius:0;aspect-ratio:auto;padding:9px 10px;display:block
}
.odlcs-thumb .odlcs-cert-mark{font-size:9px !important}
.odlcs-thumb .odlcs-cert-rule{width:44px;height:1px;margin-top:3px}
.odlcs-thumb .odlcs-cert-title{font-size:7px !important;margin-top:5px}
.odlcs-thumb .odlcs-cert-lede{font-size:4.5px !important;margin-top:4px}
.odlcs-thumb .odlcs-cert-name{font-size:8px !important;padding:0 12px 1px;margin-top:2px}
.odlcs-thumb .odlcs-cert-prog{font-size:4.5px !important;margin-top:5px;padding:0 14px}
/* inside a thumbnail the certificate is a fixed-size block, so the centring
   wrapper has no slack to work with and must not stay flex */
.odlcs-thumb .odlcs-cert-body{display:block;flex:none}
.odlcs-thumb .odlcs-cert-foot{padding:0 3px;gap:6px;margin-top:4px}
.odlcs-thumb .odlcs-sig{font-size:3.5px !important}
.odlcs-thumb .odlcs-sig .rule{width:34px}
.odlcs-thumb .odlcs-seal{width:24px;height:24px;font-size:3px !important}
.odlcs-thumb .odlcs-qr-grid{width:21px;height:21px;padding:1px}
.odlcs-thumb .odlcs-qr small{font-size:3px !important;margin-top:1px}
.odlcs-thumb .odlcs-cert-frame{inset:4px;border-width:1px}
.odlcs-thumb .odlcs-cert-frame::after{inset:2px}
.odlcs-thumb .odlcs-corner{width:7px;height:7px;border-width:1px}

/* ---------- detail column ---------- */
.odlcs-detail{min-width:0}
.odlcs-detail h3{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
    font-size:26px !important;font-weight:800 !important;letter-spacing:-.6px !important;
    line-height:1.2 !important;color:#0B1F4D !important;text-align:left !important;
    text-transform:none !important;margin:0 0 6px !important
}
.odlcs-detail-sub{
    font-family:Arial,Helvetica,sans-serif !important;font-size:14px !important;
    font-weight:400 !important;color:#666666 !important;text-align:left !important;
    margin:0 0 6px !important
}
.odlcs-chosen{
    display:inline-block;margin:0 0 14px;
    font-family:Arial,Helvetica,sans-serif !important;font-size:12px !important;
    font-weight:700 !important;letter-spacing:.6px !important;
    text-transform:uppercase !important;color:#0D6EFD !important;
    background:#EEF5FF;border-radius:999px;padding:5px 12px
}
.odlcs-chosen[hidden]{display:none}
.odlcs-bar{display:block;width:56px;height:3px;border-radius:2px;background:#0D6EFD;margin:0 0 16px}
.odlcs-detail p{
    font-family:Arial,Helvetica,sans-serif !important;font-size:15px !important;
    font-weight:400 !important;line-height:1.65 !important;color:#666666 !important;
    text-align:left !important;margin:0 0 22px !important
}

/* two distinct actions, never merged */
.odlcs-btn{
    display:flex !important;align-items:center;justify-content:center;gap:10px;
    width:100%;height:48px;border-radius:7px;
    font-family:Arial,Helvetica,sans-serif !important;font-size:15px !important;
    font-weight:700 !important;letter-spacing:.2px !important;
    text-decoration:none !important;cursor:pointer;margin-bottom:12px;
    transition:background .18s,color .18s
}
.odlcs-btn:last-child{margin-bottom:0}
.odlcs-btn-ghost{background:#fff;color:#083C7D !important;border:1px solid #0D6EFD}
.odlcs-btn-ghost:hover{background:#F0F6FF}
.odlcs-btn-solid{background:#083C7D;color:#fff !important;border:1px solid #083C7D}
.odlcs-btn-solid:hover{background:#0A4E9C}
.odlcs-btn:focus-visible{outline:3px solid #0D6EFD;outline-offset:2px}

/* ---------- EXPLORE QR VERIFICATION ---------- */
.odlcs-qrrow{
    display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;
    background:#fff;border:1px solid #E6ECF5;border-radius:14px;
    padding:22px 24px;margin-top:18px
}
.odlcs-qrtile{
    width:40px;height:40px;border-radius:10px;background:#4F46E5;color:#fff;
    font-size:17px !important;display:flex !important;align-items:center;justify-content:center
}
.odlcs-qrtile i{line-height:1 !important}
.odlcs-qrrow h3{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
    font-size:20px !important;font-weight:800 !important;letter-spacing:-.4px !important;
    line-height:1.3 !important;color:#0B1F4D !important;text-align:left !important;
    text-transform:none !important;margin:0 0 8px !important
}
.odlcs-qrrow p{
    font-family:Arial,Helvetica,sans-serif !important;font-size:15px !important;
    font-weight:400 !important;line-height:1.65 !important;color:#666666 !important;
    text-align:left !important;margin:0 !important
}

/* ---------- SPECIMEN NOTICE ---------- */
.odlcs-notice{
    display:flex;align-items:flex-start;gap:9px;background:#F4F8FD;
    border-left:2.4px solid #083C7D;border-radius:7px;padding:12px 14px;
    margin-top:18px;
    font-family:Arial,Helvetica,sans-serif !important;font-size:15px !important;
    line-height:24px !important;color:#17203D !important;text-align:left !important
}
.odlcs-notice i{color:#0D6EFD !important;font-size:16px !important;flex:0 0 auto;margin-top:4px}
.odlcs-notice p{
    font-family:Arial,Helvetica,sans-serif !important;font-size:15px !important;
    line-height:24px !important;color:#17203D !important;text-align:left !important;margin:0 !important
}
.odlcs-notice strong{display:block;margin-bottom:2px;font-weight:700 !important}

/* ---------- the specimen's own sample page ----------
   Opened by the QR code. Each .odlcs-qr href and both button hrefs already
   carry the real per-specimen URL, so once those pages exist the intercept in
   the script is the only thing standing between the click and the page. */
.odlcs-scrim{
    position:fixed;inset:0;background:rgba(11,26,53,.55);z-index:60;
    display:flex;align-items:center;justify-content:center;padding:20px
}
.odlcs-scrim[hidden]{display:none}

.odlcs-page{
    background:#fff;border-radius:16px;max-width:560px;width:100%;
    max-height:88vh;overflow:auto;box-shadow:0 24px 60px rgba(11,26,53,.30)
}
.odlcs-page-head{
    display:flex;align-items:flex-start;gap:14px;padding:22px 24px;
    border-bottom:1px solid #E6ECF5
}
.odlcs-page-head h3{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
    font-size:20px !important;font-weight:800 !important;color:#0B1F4D !important;
    text-align:left !important;margin:0 0 4px !important
}
.odlcs-page-head p{
    font-family:Arial,Helvetica,sans-serif !important;font-size:13px !important;
    color:#666666 !important;text-align:left !important;margin:0 !important
}
.odlcs-page-close{
    margin-left:auto;width:36px;height:36px;border-radius:50%;
    border:1px solid #E6ECF5;background:#fff;color:#083C7D;font-size:15px !important;
    cursor:pointer;display:flex !important;align-items:center;justify-content:center;flex:0 0 auto
}
.odlcs-page-close:hover{border-color:#0D6EFD}
.odlcs-page-close:focus-visible{outline:3px solid #0D6EFD;outline-offset:2px}

.odlcs-status{
    display:inline-flex;align-items:center;gap:6px;
    font-family:Arial,Helvetica,sans-serif !important;font-size:11px !important;
    font-weight:700 !important;letter-spacing:1px !important;
    text-transform:uppercase !important;color:#8A5A00 !important;
    background:#FFF3D6;border-radius:999px;padding:5px 11px;margin:0 24px 18px
}

.odlcs-details{padding:0 24px 4px;margin:0}
.odlcs-details div{
    display:flex;gap:12px;padding:9px 0;border-bottom:1px solid #F1F5FA;
    font-family:Arial,Helvetica,sans-serif !important;font-size:14px !important;
    line-height:1.5 !important
}
.odlcs-details div:last-child{border-bottom:0}
.odlcs-details dt,.odlcs-details .k{flex:0 0 42%;color:#666666 !important}
.odlcs-details dd,.odlcs-details .v{margin:0;color:#17203D !important;font-weight:700 !important}

.odlcs-page-foot{padding:18px 24px 24px}

/* ---------- responsive ---------- */
/* two columns stay until the phone breakpoint, then collapse to one */
@media (max-width:1199px){
    /* the container width ladder, copied verbatim from the block labelled
       "the same container standard" at index.css:36919 - 92% above 1199px,
       94% down to 1199px, then 90% down to 767px, then back to 92% at 480px.
       Without the 767px step this section was 12px to 14px wider than the two
       sections that bracket it, which read as a misalignment. */
    .odlcs-wrap{width:94%}
    .odlcs-tabs{grid-template-columns:repeat(3,1fr)}
    .odlcs-tab:nth-child(4){border-left:0}
}

@media (max-width:767px){
    .odlcs-wrap{width:90%}
}

@media (max-width:480px){
    .odlcs-wrap{width:92%}
}

@media (max-width:767px){
    .odlcs-head h2{font-size:26px !important}
    .odlcs-tag{font-size:10px !important;letter-spacing:.8px !important}
    .odlcs-tag i{font-size:12.5px !important}
    .odlcs-tabs{grid-template-columns:1fr}
    .odlcs-tab{border-left:0;border-top:1px solid #E6ECF5}
    .odlcs-tab:first-child{border-top:0}
    .odlcs-tab[aria-selected="true"]::after{display:none}

    /* one column on mobile: the thumbnails stay directly under the certificate,
       so the row order is viewer, thumbs, detail */
    .odlcs-panel{grid-template-columns:1fr;gap:16px;padding:16px}
    .odlcs-viewer{grid-column:1;grid-row:1}
    .odlcs-thumbs{grid-column:1;grid-row:2}
    .odlcs-detail{grid-column:1;grid-row:3;align-self:start}

    .odlcs-qrrow{grid-template-columns:1fr;gap:12px;padding:18px}
    .odlcs-thumbs{flex-wrap:wrap}

    /* the certificate compresses, so its own type steps down with it */
    .odlcs-cert{padding:12px 13px}
    /* the 1.414 ratio gives a box too short for the text once it wraps at this
       width, and overflow:hidden cut the last line off the frame. Let the
       height follow the content instead of the ratio. */
    .odlcs-cert{aspect-ratio:auto;min-height:206px}
    .odlcs-cert-mark{font-size:15px !important}
    .odlcs-cert-title{font-size:12px !important;margin-top:8px}
    .odlcs-cert-name{font-size:13px !important;padding:0 16px 2px}
    .odlcs-cert-prog{font-size:8.5px !important;padding:0 16px;margin-top:8px}
    .odlcs-cert-lede{font-size:8px !important;margin-top:7px}
    /* The foot must stay on one line. Its three parts measured 75 + 40 + 46 plus
       28px of gaps = 189px against the 185px available inside a 225px
       certificate, so it wrapped and then cascaded into three stacked rows,
       which stretched the certificate further. No wrap, smaller parts, and the
       group centred in whatever room is left. */
    .odlcs-cert-foot{flex-wrap:nowrap;gap:8px;justify-content:center}
    .odlcs-sig{font-size:7px !important}
    .odlcs-sig .rule{width:46px}
    .odlcs-seal{width:34px;height:34px;font-size:5px !important}
    .odlcs-qr-grid{width:32px;height:32px;padding:2px}
    .odlcs-qr small{font-size:5px !important}
    .odlcs-nav-btn{width:38px;height:38px;font-size:14px !important}
    .odlcs-thumb{width:84px;height:60px}
    .odlcs-thumb .odlcs-cert{transform:scale(.452)}
}

/* 768px to 999px is a squeezed band that no mobile rule reaches. The panel is
   still two columns there, so the certificate is only 218px to 330px wide -
   narrower than a 480px phone gets - but it was being given the desktop
   15px/10px type, which needed more height than the 1.414 ratio allowed and
   pushed the name and programme line outside the frame. Measured:
        768px  cert 218x154  needs 314  overflow
        850px  cert 258x182  needs 319  overflow
        900px  cert 282x200  programme line outside the frame
        950px  cert 306x217  programme line outside the frame
       1000px  cert 331x234  clean
   The band therefore runs to 999px, not 899px: the certificate only becomes
   wide enough for the desktop type at a 1000px viewport. */
@media (min-width:768px) and (max-width:999px){
    .odlcs-cert{aspect-ratio:auto;min-height:236px;padding:12px 12px}
    .odlcs-cert-mark{font-size:13px !important}
    .odlcs-cert-rule{width:64px;height:1px;margin-top:5px}
    .odlcs-cert-title{font-size:10.5px !important;margin-top:6px}
    .odlcs-cert-lede{font-size:7px !important;margin-top:5px}
    .odlcs-cert-name{font-size:11px !important;padding:0 12px 2px}
    .odlcs-cert-prog{font-size:7.5px !important;padding:0 10px;margin-top:6px}
    .odlcs-cert-foot{flex-wrap:nowrap;gap:8px;justify-content:center}
    .odlcs-sig{font-size:6px !important}
    .odlcs-sig .rule{width:36px}
    .odlcs-seal{width:28px;height:28px;font-size:4.5px !important}
    .odlcs-qr-grid{width:26px;height:26px;padding:2px}
    .odlcs-qr small{font-size:4.5px !important}
    .odlcs-nav-btn{width:34px;height:34px;font-size:13px !important}
    .odlcs-thumb{width:72px;height:51px}
    .odlcs-thumb .odlcs-cert{transform:scale(.387)}
}

/* The certificate is about 58% of the viewport width once the two arrow buttons
   and the panel padding are taken off, so it lands near 225px at a 390px phone
   and 160px at 320px. Text that reads well at 225px wraps to four and five
   lines at 160px, so the type steps down with it. Each block below is matched
   to a certificate width, not to an arbitrary screen size, and the thumbnails
   keep their 186px baseline with only the scale changed so their inner type
   shrinks in proportion. */
@media (max-width:560px){
    .odlcs-cert{padding:11px 11px}
    .odlcs-cert-mark{font-size:13px !important}
    .odlcs-cert-rule{width:64px;height:1px;margin-top:5px}
    .odlcs-cert-title{font-size:10.5px !important;margin-top:6px}
    .odlcs-cert-lede{font-size:7px !important;margin-top:5px}
    .odlcs-cert-name{font-size:11px !important;padding:0 12px 2px}
    .odlcs-cert-prog{font-size:7.5px !important;padding:0 10px;margin-top:6px}
    .odlcs-sig{font-size:6px !important}
    .odlcs-sig .rule{width:36px}
    .odlcs-seal{width:28px;height:28px;font-size:4.5px !important}
    .odlcs-qr-grid{width:26px;height:26px;padding:2px}
    .odlcs-qr small{font-size:4.5px !important}
    .odlcs-nav-btn{width:34px;height:34px;font-size:13px !important}
    .odlcs-thumb{width:72px;height:51px}
    .odlcs-thumb .odlcs-cert{transform:scale(.387)}
}

@media (max-width:400px){
    .odlcs-cert{padding:10px 9px;min-height:190px}
    .odlcs-cert-mark{font-size:11.5px !important}
    .odlcs-cert-rule{width:52px;margin-top:4px}
    .odlcs-cert-title{font-size:9.5px !important;margin-top:5px}
    .odlcs-cert-lede{font-size:6.5px !important;margin-top:4px}
    .odlcs-cert-name{font-size:10px !important;padding:0 9px 2px}
    .odlcs-cert-prog{font-size:6.8px !important;padding:0 7px;margin-top:5px}
    .odlcs-sig{font-size:5.5px !important}
    .odlcs-sig .rule{width:30px}
    .odlcs-seal{width:24px;height:24px;font-size:4px !important}
    .odlcs-qr-grid{width:22px;height:22px}
    .odlcs-qr small{font-size:4px !important}
    .odlcs-nav-btn{width:30px;height:30px;font-size:12px !important}
    .odlcs-thumb{width:64px;height:45px}
    .odlcs-thumb .odlcs-cert{transform:scale(.344)}
}

/* ============================================================================
   PROGRAMME PILLARS  -  FIVE ACROSS
   ----------------------------------------------------------------------------
   The section now carries five cards, one per programme family, so the desktop
   grid runs five across in a single row instead of four with an orphan.

   Every declaration here sits on a new odlcp5- class. No existing selector in
   this file is edited or redefined, so reverting this block and the
   odlcp5-grid / odlcp5-desc / odlcp5-arrow classes restores the four-card
   section exactly.

   !important is load-bearing. css/global-typography.css is linked after
   index.css and carries bare-element !important rules on p and a at six
   breakpoints, and index.css:40547 hides the Explore arrow outright with
   .pillar-action i { display: none !important } inside
   @media (min-width:768px) and (max-width:1198px). Equal importance plus a
   later position in the file is what lets these win.

   Measured at 1440px: 5 columns of 249px, one row, card height 356px, the five
   Explore rows sharing a baseline with 0px of spread.
   ============================================================================ */

/* ---------- five across on desktop, stepping down to one ---------- */
/* Below 1200px this deliberately departs from the old ladder. The old one went
   4 -> 2 -> 1, which leaves a single card alone on the last row whether there
   are four cards or five. 5 -> 3 -> 2 -> 1 fills every row. */
.odlcp5-grid{grid-template-columns:repeat(5,1fr)}

@media (max-width:1199px){
    .odlcp5-grid{grid-template-columns:repeat(3,1fr)}
}

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

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

/* ---------- the description line ---------- */
/* Scoped as .programme-pillar-card .odlcp5-desc, which is two classes against
   the .pillar-content p rule's one class plus one element, so it wins without
   leaning on !important for the box. The type properties still need it,
   because of global-typography's bare-element p rule. */
.programme-pillar-card .odlcp5-desc{
    margin:0 0 9px !important;
    color:#667085 !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:13.5px !important;
    font-weight:400 !important;
    line-height:1.55 !important;
    text-align:left !important;
}

/* ---------- the Explore arrow ---------- */
/* The card shipped with bi-arrow-up-right, and index.css:40547 hides the glyph
   with an UNCONDITIONAL base rule:
       .pillar-action i { display: none !important; }
   That selector is one class plus one element, so it is specificity (0,1,1) and
   a plain .odlcp5-arrow at (0,1,0) loses to it. Source order does not rescue
   it: for !important declarations specificity is compared before position in
   the file. The selector here is .pillar-action i.odlcp5-arrow, three parts at
   (0,2,1), which outranks it. index.css:42087 hides the same glyph a second
   time inside @media (min-width:768px) and (max-width:1198px), and is beaten
   the same way.
   The glyph is now bi-arrow-right. 26px rather than the house 34px because at a
   249px card width the larger circle crowded the label; the phone step below
   restores the house 31px. */
.pillar-action i.odlcp5-arrow{
    display:flex !important;
    width:26px !important;
    height:26px !important;
    font-size:13px !important;
}

@media (max-width:767px){
    .pillar-action i.odlcp5-arrow{
        width:31px !important;
        height:31px !important;
        font-size:13px !important;
    }
}

/* ============================================================================
   HERO  -  ALIGN TO THE PAGE GUTTER, AND FIT THE COLLAGE
   ----------------------------------------------------------------------------
   Measured on the live page across 20 widths, 320px to 1600px.

   THE FAULT
   Every other section on this page shares one gutter ladder and they all agree
   with each other exactly, at every width:
       above 1199px   92%,  capped at 1380px
       to    767px    94%
       to    480px    90%
       below 480px    92%
   Measured, .odlc-digital-container / .programme-pillars-container /
   .odlcs-wrap all report the same left and right edge at all twenty widths,
   scaling from 12px at 320px out to 102px at 1600px.

   The hero used none of that. It carried fixed pixel padding, so its gutter
   stayed roughly 15px to 53px at every screen size while the page standard
   scaled from 12px to 102px. The two cross over near 1300px, which is why the
   hero reads as wrong on a wide monitor AND on a phone.

       viewport   page edge   hero text L   hero image R
          1600     102/1482      50 (-52)     1570 (+88)
          1440      57/1368      50 (-7)      1410 (+42)
           768      23/730       53 (+30)     715 (-15)
           390      15/360       17 (+2)      image hidden

   Three separate faults, all fixed below.

   FAULT 1 - fixed padding instead of the ladder. At 1440px and above the
   section padding was 15px on the left but 50px on the right, which is
   asymmetric on its own. On a phone the section padding was 0.

   FAULT 2 - the right column overflowed by exactly the gap. The grid was
   grid-template-columns: 38% 62%. Both percentages resolve against the full
   content box, so they already sum to 100% and the 35px gap is then ADDED on
   top. Measured overflowRight: 35px at 1440px, exactly the gap. The section
   has overflow:hidden so it was clipped rather than scrolling, but the image
   collage was 35px wider than intended and its right edge lined up with
   nothing. fr units subtract the gap from the tracks instead of adding to them.

   FAULT 3 - the collage's small-image strip was a fixed 190px. At 1600px that
   is 23% of the column and fine. At 1024px the whole column is only 489px, so
   a 190px strip took 39% of it and the main photograph shrank to 285px - a
   stamp. Making the strip a percentage lets the collage scale.

   NOT CHANGED ON PURPOSE
   The 35px bottom inset under the collage. .hero-right carries
   height: calc(100% - 35px) with margin-bottom: 35px, so the box is 730px and
   the margin fills the remaining 35px of the row. That gap is deliberate
   breathing room above the fold, not a fault, so it is left exactly as it is.
   To pull the photos flush with the bottom of the hero instead, add
   height:100% and margin-bottom:0 to .hero-right in section 4 below.

   Reverting: delete this block. Every selector here is one this block
   introduces or is a bare .hero-section / .hero-right rule that nothing else
   in the file sets after this point.
   ============================================================================ */

/* ---------- 1. the gutter: the same ladder every other section uses ----------
   max() so the content is capped at 1380px on a wide screen exactly as the
   other sections are, instead of the hero stretching past it. 100% here is the
   hero's own width, which is the same box the other containers measure
   against, so the two edges land on the same pixel. */
.hero-section{
    padding-left: max(4%, calc((100% - 1380px) / 2)) !important;
    padding-right: max(4%, calc((100% - 1380px) / 2)) !important;
}

@media (max-width:1199px){
    .hero-section{
        padding-left:3% !important;
        padding-right:3% !important;
    }
}

@media (max-width:767px){
    .hero-section{
        padding-left:5% !important;
        padding-right:5% !important;
    }
}

@media (max-width:480px){
    .hero-section{
        padding-left:4% !important;
        padding-right:4% !important;
    }
}

/* ---------- 2. the two columns, with the gap taken out of the tracks ---------- */
@media (min-width:1400px){
    .hero-section{
        grid-template-columns:minmax(0,38fr) minmax(0,62fr) !important;
    }
}

@media (min-width:992px) and (max-width:1399px){
    .hero-section{
        grid-template-columns:minmax(0,47fr) minmax(0,53fr) !important;
    }
}

/* ---------- 3. the columns carry no horizontal padding of their own ----------
   .hero-left was padding:45px 30px and .hero-right padding:20px. Left in
   place they push the text and the collage back off the gutter that section 1
   just set, which is what kept the two disagreeing. */
.hero-section .hero-left,
.hero-section .hero-right{
    padding-left:0 !important;
    padding-right:0 !important;
}

/* ---------- 4. the collage strip scales with its column ----------
   23% at the full desktop width, 25% through the narrower bands, where the
   column itself is smaller and needs proportionally more for the main photo. */
@media (min-width:1400px){
    .hero-section .hero-right{
        grid-template-columns:minmax(0,1fr) 23% !important;
    }
}

@media (min-width:768px) and (max-width:1399px){
    .hero-section .hero-right{
        grid-template-columns:minmax(0,1fr) 25% !important;
    }
}

/* ============================================================================
   REMOVE THE WHITE LINE BETWEEN THE CTA BLOCK AND THE FOOTER BLOCK
   ----------------------------------------------------------------------------
   There are two blocks stacked at the bottom of the page. It is not obvious
   from the markup because three empty <script> tags sit between them:

     .odlc-final-cta   the pale card, "Learn Academics. Build Skills."
     .odlcf-cta        the dark band, "Academic Learning. Practical Skills."

   Between the bottom of the card and the top of the dark band there were 74px
   of nothing, measured at every width:

     1600px   card bottom 14138   dark band top 14212   gap  74px
     1366px   card bottom 14294   dark band top 14364   gap  70px
      768px   card bottom 21738   dark band top 21812   gap  74px
      390px   card bottom 27383   dark band top 27457   gap  74px

   It is two separate things, and both have to go:

   1.  48px of the CTA block's own bottom padding. .odlc-final-cta carries
       padding: 90px 0 (index.css:27376), narrowed to 48px 0 !important at
       38419. That padding is painted in the block's own pale #D9E6F7, which is
       what reads as a white line. Only the bottom is touched - the top padding
       is the space between the FAQ block above and this card, and it stays.

   2.  A further 26px that is not a margin. Both blocks compute to margin 0, and
       the only nodes between them are three display:none <script> tags. What is
       actually there is an absolutely positioned .odlc-final-dropdown-menu
       inside the card that overflows its block by 32px, and a decorative
       .cta-circle-two that overflows by 129px; the block is overflow:visible
       (index.css:38626) so they paint outside the box without taking part in
       layout. Removing the padding does not remove this, so the dark band is
       pulled up by the same 26px.

   The residual measures 26px at 992px and above, 24px at 768px and 22px at
   390px, so at the narrow end the dark band overlaps by up to 4px. Both are
   solid, so that is invisible. position and z-index are set so the dark band
   paints over the card's overflowing circle rather than under it - that circle
   is meant to be clipped or hidden by the band anyway.

   Nothing inside either block is restyled: no colour, no size, no internal
   spacing, no content.
   ============================================================================ */

.odlc-final-cta{
    padding-bottom:68px !important;
}

.odlcf-cta{
    margin-top:-26px !important;
    position:relative !important;
    z-index:1 !important;
}

/* ============================================================================
   HERO - THE IMAGE COLLAGE MATCHES THE TEXT, TOP AND BOTTOM
   ----------------------------------------------------------------------------
   The request: measure the space the left-hand text occupies, shrink the
   right-hand images to the same, and keep the top and bottom equal.

   WHY IT LOOKED WRONG

   .hero-section is a FIXED box:

       index.css:1889   height: 780px;   min-height: 780px;
       index.css:1905   height: 700px;   min-height: 700px;   below 1200px

   The collage fills that box and the text is merely centred inside it, so the
   collage is always the taller of the two and hangs over the text above and
   below. Measured on the live site, gap above/below the text:

       1920px  -66 / +31        1280px  -69 / +34
       1600px  -66 / +31        1100px  -40 / +5
       1440px  -51 / +16         992px  -40 / +5

   It is not one fixed amount. The overhang changes with the viewport because
   the text reflows to a different number of lines, so no fixed pixel offset can
   correct it - and CSS cannot read a sibling's height to derive one.

   WHAT THIS DOES INSTEAD

   The dependency is inverted: the section stops being a fixed box and takes its
   height from the text, and the collage fills whatever height that turns out to
   be. The two edges then agree at every width by construction rather than by
   calculation.

   THREE PARTS, AND ALL THREE ARE NEEDED

   1  .hero-section height/min-height auto, so the text is what decides.

   2  THE IMAGES MUST STOP CONTRIBUTING THEIR OWN HEIGHT, or the grid row is
      still sized by the collage and nothing moves at all. This is the part that
      is easy to miss. .big-image-card img is height:100%!important and
      .small-images img is height:calc((100% - 28px) / 3)!important - both
      percentages of a parent whose own height is a percentage of an
      indefinite one, which collapses to each image's aspect ratio. That is what
      is currently producing the 725-730px.

      Taking the big images out of flow with position:absolute removes their
      intrinsic height. For the small ones flex:1 1 0 is NOT enough on its own -
      flex-grow only hands out free space, and an auto-height container has none,
      so the photos stayed at their natural size and the collage came out 166px
      too tall when this was first tried. height:0 is the declaration that
      actually makes an item contribute nothing; flex:1 1 0 then divides
      whatever height the container is finally given.

      object-fit:cover is what the client chose (Option A), so the images fill
      the shorter box and crop a little from the middle instead of
      letterboxing. The two large photos lose about 48px of height each and the
      three small ones about 32px.

   3  .hero-left's vertical padding has to go. Otherwise .hero-left is taller
      than the text block inside it and the collage ends up matching the padding
      rather than the text. The horizontal padding is untouched - that is the
      gutter, and it lines up with the sections below.

   SCOPE - 768px AND UP ONLY, DELIBERATELY

   Below 768px the collage is already display:none (index.css:39239) and the
   hero shows .hero-image-inline instead, and .hero-section is already
   height:auto !important (index.css:30700). There is nothing to fix there and
   the rule would only get in the way.

   The grid-template-columns is not touched at any width, so the hero still
   stacks to a single column between 768px and 900px exactly as it does now.

   Checked after the change, gap above/below the text:
       1920px 0/0   1600px 0/0   1440px 0/0   1366px 0/0   1280px 0/0
       1100px 0/0    992px 0/0    900px 0/0    768px 0/0
   and below 768px the hero is byte-for-byte unchanged in behaviour.
   ============================================================================ */

@media (min-width:768px){

    /* 1 - the text decides the height */
    .hero-section{
        height:auto !important;
        min-height:0 !important;
    }

    /* Breathing room, equal above and below.

       This is deliberately on the SECTION and not on .hero-left, and that
       distinction is the whole point. Padding on .hero-left would make
       .hero-left taller than the text block inside it, and the collage -
       which is height:100% of the same grid row - would then match the
       padding instead of the text, putting the overhang straight back. Here
       the hero band grows evenly at both ends while the text and the collage
       stay exactly the same height as each other, 0px apart.

       .hero-section already carries padding:15px with padding-right:50px
       (index.css:1405-1416), so this overrides only the two vertical values
       and leaves the horizontal gutter exactly as it was.

       One number to change if you want more or less air. */
    .hero-section{
        padding-top:40px !important;
        padding-bottom:40px !important;
    }

    .hero-left{
        height:auto !important;
        padding-top:0 !important;      /* 3 - match the text, not the padding */
        padding-bottom:0 !important;
    }

    .hero-content{
        margin-top:auto !important;
        margin-bottom:auto !important;
    }

    /* 2 - the collage fills exactly that height and contributes none of its own */
    .hero-right{
        height:100% !important;
        margin-bottom:0 !important;
    }

    .big-images{
        height:100% !important;
        min-height:0 !important;
    }

    .big-image-card{
        height:100% !important;
        min-height:0 !important;
    }

    .big-image-card img{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;   /* Option A - fills, crops a little */
    }

    .small-images{
        height:100% !important;
        min-height:0 !important;
    }

    /* height:0 is the load-bearing part - see the note above */
    .small-images img{
        flex:1 1 0 !important;
        height:0 !important;
        min-height:0 !important;
        object-fit:cover !important;   /* Option A */
    }

}


/* ============================================================================
   SPECIMEN PDF MODAL  -  the viewer behind VIEW SAMPLE PDF
   ----------------------------------------------------------------------------
   Appended, and every selector is a new odlcsx- prefixed class, so nothing
   existing in this file is overridden or reused. index.php builds the markup
   once at start-up and appends it to the body, so there is no markup in the
   HTML source for these rules to match - they exist only for that modal.

   WHY IT IS A MODAL AND NOT A NEW TAB

   The visitor is partway through the specimen section when they click VIEW.
   Opening a new tab loses that position and on mobile it is a jarring switch
   of application. A modal keeps the page underneath exactly where it was, so
   closing the certificate returns them to the same programme tab and the same
   level pill they were on.

   WHY THERE IS A NEW TAB BUTTON ANYWAY

   Inline PDF rendering is a desktop-browser convenience, not a guarantee.
   iOS Safari and most Android browsers will not display a PDF inside an
   <object> at all. The object carries fallback content for that case, and
   "Open in new tab" is the route that always works, so it stays visible
   rather than being hidden behind a media query. If your traffic is mostly
   mobile, point VIEW straight at a new tab instead and drop the object.

   SIZING

   The frame is a fixed 76vh with a min-height so a short window still shows a
   readable certificate, and the modal itself is capped at 100% height with
   overflow hidden, so the head and the actions above it can never be pushed
   off screen by a tall document.

   FOCUS

   Focus moves to the close button on open and returns to whatever was focused
   on close, and Escape closes. The scrim carries aria-hidden so assistive
   technology is not offered the hidden dialog between openings.
   ============================================================================ */

.odlcsx-scrim{
    position:fixed;
    inset:0;
    z-index:100000;
    background:rgba(6,20,40,.74);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:26px;
}

.odlcsx-scrim[hidden]{
    display:none;
}

.odlcsx-modal{
    background:#fff;
    border-radius:14px;
    width:min(980px,100%);
    max-height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:0 26px 70px rgba(0,0,0,.45);
}

.odlcsx-modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:18px 22px;
    border-bottom:1px solid #e3e9f2;
    background:#fbfcfe;
    flex:0 0 auto;
}

.odlcsx-modal-head h3{
    margin:0 0 3px;
    font:700 18px/1.3 Arial,Helvetica,sans-serif;
    color:#0b1f3f;
}

/* the file name on the server, shown so it is obvious which document opened */
.odlcsx-modal-head p{
    margin:0;
    font:400 12px Consolas,'Courier New',monospace;
    color:#5a6b82;
    word-break:break-all;
}

.odlcsx-modal-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    flex:0 0 auto;
}

.odlcsx-mini{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid #c9d6e8;
    background:#fff;
    color:#0b1f3f;
    border-radius:8px;
    padding:8px 13px;
    font:600 13px/1 Arial,Helvetica,sans-serif;
    text-decoration:none;
    cursor:pointer;
    white-space:nowrap;
}

.odlcsx-mini:hover,
.odlcsx-mini:focus-visible{
    background:#f0f5fc;
}

.odlcsx-mini-dl{
    background:#0b3d7a;
    border-color:#0b3d7a;
    color:#fff;
}

.odlcsx-mini-dl:hover,
.odlcsx-mini-dl:focus-visible{
    background:#12529c;
}

.odlcsx-x{
    border:1px solid #c9d6e8;
    background:#fff;
    border-radius:8px;
    width:34px;
    height:34px;
    cursor:pointer;
    color:#33475f;
    font-size:15px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.odlcsx-x:hover,
.odlcsx-x:focus-visible{
    background:#f0f5fc;
}

/* grey surround so the white PDF page reads as a sheet of paper */
.odlcsx-frame-wrap{
    flex:1 1 auto;
    background:#5b6675;
    padding:10px;
    overflow:auto;
}

.odlcsx-frame{
    width:100%;
    height:76vh;
    min-height:420px;
    border:0;
    border-radius:8px;
    background:#fff;
    display:block;
}

/* shown only when the browser refuses to render the PDF inline */
.odlcsx-nopdf{
    color:#fff;
    font:14px/1.6 Arial,Helvetica,sans-serif;
    padding:30px 20px;
    text-align:center;
    margin:0;
}

@media (max-width:600px){
    .odlcsx-scrim{
        padding:10px;
    }
    .odlcsx-modal-head{
        flex-direction:column;
        gap:12px;
        padding:14px 16px;
    }
    .odlcsx-modal-actions{
        width:100%;
    }
    .odlcsx-mini{
        flex:1 1 auto;
        justify-content:center;
    }
    .odlcsx-frame{
        height:70vh;
        min-height:340px;
    }
}

/* ============================================================================
   SAMPLE CERTIFICATES (SPECIMENS) - SECTION BACKGROUND ARTWORK
   ----------------------------------------------------------------------------
   Puts images/samplecertbg.png behind the specimen section.

   WHY A NEW CLASS RATHER THAN EDITING .odlcs-specimens

   The existing rule at index.css:41484 is
       .odlcs-specimens{background:#F1F5FE;padding:65px 0 60px}
   and that is left exactly as it is. The new rule is written as
   .odlcs-specimens.odlcs-bg, which is (0,2,0) against the original's (0,1,0),
   so it wins on specificity and does not depend on where in this file it lands.
   Nothing existing is overridden, and removing .odlcs-bg from the section tag in
   index.php reverts this completely.

   THE COLOUR IS KEPT UNDERNEATH

   The shorthand background:#F1F5FE already on the section sets
   background-image to none. This rule sets background-image again, which paints
   the artwork over that colour rather than replacing it. So the pale blue is
   still there as the base layer: if the PNG is slow, blocked or renamed, the
   section reads as it does today instead of going white. The artwork is
   transparent-safe by design - it is white with soft blue blobs, so it sits on
   #F1F5FE without a visible seam.

   WHY cover AND NOT contain

   The PNG is 1672 x 940, a landscape ratio of 1.78. The section is much taller
   than that once the tabs, panel, QR row and notice are counted, so contain
   would leave bands of bare colour above and below the artwork. cover fills the
   box at every width. Because the blobs sit in the corners and fade to white,
   the crop that cover performs is invisible at desktop widths; below about
   768px the box becomes tall and narrow and the artwork is cropped from the
   sides, which again just crops more white.
   ============================================================================ */

.odlcs-specimens.odlcs-bg{
    background-image:url("images/samplecertbg.png");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    background-attachment:scroll;
}

/* NO EXTRA BREAKPOINT IS NEEDED, AND ONE WAS TRIED AND REMOVED

   A landscape-phone override of background-size:auto 100% was written first and
   then deleted. With no-repeat that scales to the box height only, so on a wide
   short box the artwork stops short of both edges and a band of bare colour
   shows down one side. cover has no such gap at any width, so it stands alone.

   WHAT cover ACTUALLY DOES ON NARROW SCREENS, AGAINST THE REAL BOX HEIGHTS

       1600px   box 1585 x 1220   artwork drawn 2170 x 1220   74% of its width visible
       1200px   box 1185 x 1145   artwork drawn 2037 x 1145   59% visible
        992px   box  977 x 1185   artwork drawn 2108 x 1185   47% visible
        768px   box  753 x 1313   artwork drawn 2335 x 1313   33% visible
        390px   box  375 x 1926   artwork drawn 3426 x 1926   11% visible

   Once the section stacks to a single column it is taller than it is wide, so
   cover starts scaling on height instead of width. By 390px it is magnifying
   the artwork roughly 2x and only the middle eleventh of it is on screen - and
   the middle of this PNG is plain white, because the blue shapes sit in the
   corners.

   So on a phone the section reads much as it does today: the flat #F1F5FE.
   Nothing overlaps the text and nothing is broken, but the artwork is barely
   visible there. Two ways to change that, neither applied here:

     - drop the image below a breakpoint, which also saves the 931 KB
       transfer on a mobile connection:
           @media (max-width:767px){
               .odlcs-specimens.odlcs-bg{background-image:none}
           }

     - supply a second, portrait crop of the artwork for narrow widths, rather
       than asking a 1.78 landscape file to fill a 0.20 box.

   Both are a design call, so neither is baked in.
   ============================================================================ */


/* ============================================================================
   STUDENT APPLICATIONS - PUT BOTH APPLY NOW LINKS ON THE SAME LINE
   ----------------------------------------------------------------------------
   The Indian Student card sits one line higher than the International Student
   card. Measured at 1600px, 1440px and 1024px the two APPLY NOW links were 26px
   apart, which is exactly one line of the description: 16px type at line-height
   1.6 gives 25.6px.

   WHY IT HAPPENED

   The two descriptions are different lengths. "Apply for an eligible ODLC
   programme." takes one line at desktop widths;
   "Explore programmes available for international learners." takes two. The APPLY
   NOW link follows the description in normal flow, so it lands wherever the
   description happens to end. Nothing held the two action rows to a shared line.

   THE FIX

   .odlcp-card is display:grid with two columns, and its items stretch to the
   height of the tallest card in the row by default. Making .odlcp-body a flex
   column and giving .odlcp-actions margin-top:auto therefore pins the action row
   to the bottom of whatever height the card ended up at. Both links then sit on
   the same line whatever the copy does.

   WHY THIS RATHER THAN A min-height

   This file already aligns the three-up panels with fixed minimum heights -
   .odlcp-cards.odlcp-c3 .odlcp-cardbody{min-height:76.8px} and its two siblings
   at index.css:41314-41318. That approach works, and it was measured here
   alongside this one: both produce a 0px spread and an identical 220px panel.

   The min-height was not chosen because it encodes the current copy. It is 51.2px
   because the descriptions happen to be at most two lines today. Edit the copy to
   three lines and the number is stale, and nobody gets a warning. The flex rule
   has no number in it and cannot go stale.

   It also avoids adding dead space. With a min-height, a panel whose two
   descriptions are both one line grows by a line for no reason. Bottom-anchoring
   leaves the panel exactly as short as its content needs.

   SCOPE

   Only the Student Applications panel carries odlcp-actbtm, so the Learning
   Centres and Coordination Offices panels are untouched. Adding odlcp-actbtm to
   another .odlcp-cards container is all it takes to extend this.

   NOT AFFECTED

   The round chevron is position:absolute against .odlcp-card at bottom:18px, so
   it never moved. The action row's bottom edge lands on the card's own 18px
   padding, which is where it already was.
   ============================================================================ */

.odlcp-cards.odlcp-actbtm .odlcp-body{
    display:flex;
    flex-direction:column;
}

.odlcp-cards.odlcp-actbtm .odlcp-actions{
    margin-top:auto;
}

/* ============================================================================
   TESTIMONIALS - THE DECORATIVE QUOTE NO LONGER SITS ON THE NAME (phones)
   ----------------------------------------------------------------------------
   At 480px and below the quote glyph overlapped the reviewer's name. Measured on
   the live page at 320, 360, 390, 430 and 480px, every card reported the same
   collision: the quote and the h4 intersected by 9px horizontally and 17px
   vertically.

   WHY

   Inside the max-width:480px block at index.css:11611, .quote-top is taken out
   of flow and pinned into the card's top-left corner:

       .quote-top{position:absolute; top:8px; left:12px; font-size:29px}

   The quote is 29px tall, so it occupies y +9 to +38 inside the card. The name is
   the first thing in the normal flow, and on that breakpoint the card's padding
   is 20px, so the h4 starts at y +20 and its left edge is 9px to the right of the
   quote's right edge. The two boxes intersect, and since the quote is a pale
   watermark sitting under dark text, the glyph printed through the first letter.

   THE FIX

   The quote is moved up and left, into the corner that the card's padding leaves
   empty, and dropped from 29px to 22px. That puts its right edge at roughly 18px
   inside the card, which is inside the 20px mobile padding, so it can never reach
   the content column at any width this rule applies to.

   Measured after: 0px overlap at 320, 360, 390, 430 and 480px, and the card
   height is unchanged at 168px - unlike reserving space with extra padding, this
   costs the layout nothing.

   WHY A NEW CLASS

   .quote-top itself is left exactly as it is. This rule is written as
   .testimonial-section.tst-quotefix .quote-top, which is (0,3,0) against the
   original's (0,1,0), so it wins on specificity and not on position in the file.
   Nothing existing is overridden, and taking tst-quotefix off the section tag
   reverts the whole thing.

   ONLY THE PHONE BREAKPOINT IS TOUCHED

   The same collision exists above 480px but it is only 3px wide, because the card
   padding there is 24px rather than 20px. At 1600px, 992px and 481px the quote
   and the h4 still intersect by 3px horizontally and 13px vertically. That is
   small enough not to read as a fault at 20px type, and the desktop layout was
   not reported, so it has deliberately been left alone. Widening this rule to
   every width is a one-line change - drop the media query - if it is wanted.
   ============================================================================ */

@media (max-width:480px){
    .testimonial-section.tst-quotefix .quote-top{
        top:5px;
        left:3px;
        font-size:22px;
    }
}

/* ============================================================================
   APPLY PATHWAYS CARDS - READABLE ON A PHONE
   ----------------------------------------------------------------------------
   On a phone each card wasted more than half its width and the text was
   squeezed into a narrow ribbon, so the copy broke over five or six lines and
   the two cards in a panel ended up wildly different heights.

   MEASURED BEFORE, at 390px

       card width            289px
       text column           140px      48% of the card
       title                 2 lines on both cards
       description           3 lines and 5 lines
       card heights          237px and 288px      51px apart
       APPLY NOW to chevron  42px of empty space

   The cause is not the type size. .odlcp-card reserves padding-right:70px for
   the round chevron, which is absolutely positioned at right:18px. On a 289px
   card that reservation is a quarter of the width, and it is subtracted before
   the tile and the gap, so what is left for the words is 140px.

   WHAT THIS DOES, AT 767px AND BELOW

   1. The icon shrinks from 43px to 34px and the gap from 14px to 9px.
   2. The padding drops from 18px 70px 18px 18px to a uniform 14px, so the lane
      the chevron used to occupy is returned to the text.
   3. The chevron goes back into the flow, sitting immediately after APPLY NOW
      with the row's own 14px gap, instead of floating in the far corner.

   MEASURED AFTER, at 390px

       text column           217px      75% of the card, up from 48%
       title                 1 line on both cards
       description           2 lines on both cards
       card heights          191px and 191px      equal, and 46px and 97px shorter
       APPLY NOW to chevron  14px, the row gap, down from 42px
       overflow              none, at 320, 360, 390, 430, 480, 600 and 767px

   The icon stays beside the text rather than moving above it, so the card still
   reads as the same object it does on desktop.

   WHY 767px AND NOT 480px

   The whole card component - .odlcp-card, .odlcp-tile, .odlcp-go and the
   min-heights on the three-up cards - is defined inside the max-width:767px
   block that opens at index.css:41107. That is the width at which .odlcp-cards
   switches to a single column and the cards begin to stack, so that is the
   breakpoint the fix belongs to. Stopping at 480px would have left 481px to
   767px with the same squeezed column.

   SCOPE

   All three panels in this section - Student Applications, Learning Centres and
   Coordination Offices - are built from the same card component and had the same
   defect, so the rule is scoped to the section rather than to one panel.
   .odlc-apply-pathways.odlcp-mcard .odlcp-card is (0,3,0) against the original's
   (0,1,0) and wins on specificity, so no existing selector is touched and no
   !important is needed. Removing odlcp-mcard from the section tag reverts it.
   ============================================================================ */

@media (max-width:767px){
    .odlc-apply-pathways.odlcp-mcard .odlcp-card{
        grid-template-columns:34px 1fr;
        padding:14px;
        gap:9px;
    }

    .odlc-apply-pathways.odlcp-mcard .odlcp-tile{
        width:34px;
        height:34px;
        font-size:15px;
        border-radius:9px;
    }

    .odlc-apply-pathways.odlcp-mcard .odlcp-go{
        position:static;
        right:auto;
        bottom:auto;
        flex:0 0 auto;
    }
}

/* ============================================================================
   MOBILE APP - THE FLOATING CARDS STAY INSIDE THE PANEL (992px to 1279px)
   ----------------------------------------------------------------------------
   Between 992px and 1279px the three floating cards - Easy Access, Secure and
   Trusted, Better Future - hung off the right edge of the panel.

   MEASURED BEFORE, on the live page

       992px    "Secure and Trusted" ended 18px PAST the panel's right edge
       1024px   ended 11px past it
       1100px   ended 28px past the phone column's right edge
       1200px   ended 17px past it
       1280px   ended  2px past it
       1366px and above   inside

   The widest card is the middle one, "Secure and Trusted", because
   white-space:nowrap stops it wrapping and it needs 218px where the other two
   need 214px. So the card that overflows is always the middle one.

   WHY

   The cards are absolutely positioned inside .odlc-mobile-app-visual at
   left:57%. That is a percentage of the visual column, and in this band the
   layout is two columns, so that column is only about 400px wide at 992px.
   57% of 400 is 228px, and a 218px card hung from there needs 446px. The column
   is 100px narrower than the card needs, so the overflow is structural, not a
   rounding error - the percentage simply does not leave room for itself once the
   column gets this narrow.

   THE FIX

   Anchor the cards to the right edge of the visual column instead of to a
   percentage offset from its left. right:0 cannot overflow by construction: the
   card's right edge is placed on the column's right edge, and a box only ever
   extends leftwards from there.

   The cards still overlap the phone, which is the intended floating look - at
   992px the phone spans 556 to 846 and the cards now span 729 to 947.

   MEASURED AFTER

       992px    0px past the panel, 0px past the phone column
       1024px   0px and 0px
       1100px   0px and 0px
       1200px   0px and 0px
       1280px   unchanged, 0px and 2px
       1366px   unchanged
       1600px   unchanged

   WHY THE BAND STOPS AT 1279px

   At 1280px and above the phone column is wide enough that 57% already clears,
   so the cards are correctly placed there and this rule must not touch them. The
   upper bound is what keeps the desktop layout byte-for-byte identical.

   WHY !important IS USED HERE

   The prefers-reduced-motion block at index.css:36505 also sets left:57% on
   these cards, and it does so with !important. Without !important here, a visitor
   whose system asks for reduced motion would keep the overflow. This selector is
   (0,3,0) against that rule's (0,2,0), so with both marked important this one
   still wins on specificity.

   SCOPE

   Written as .odlc-mobile-app.odlc-app-fit .odlc-floating-card so nothing
   existing is overridden. Removing odlc-app-fit from the section tag reverts it.
   ============================================================================ */

@media (min-width:992px) and (max-width:1279px){
    .odlc-mobile-app.odlc-app-fit .odlc-floating-card{
        left:auto !important;
        right:0 !important;
    }
}

/* ================================================================
   STORE LINK BADGES

   The Google Play and App Store marks beside the "Google Play" and
   "App Store" links are now <img> SVGs rather than Bootstrap Icons
   glyphs, so they need explicit sizing.

   height in em tracks the link's own font-size across breakpoints. The
   badges are scoped by class, so the .app-download-btn buttons further
   down this page - which carry no icon at all - are untouched.
   ================================================================ */

img.odlc-store-badge {
    height: 1.25em;
    width: auto;
    display: block;
    flex: 0 0 auto;
}
/* ================================================================
   THE MOBILE APP STORE BUTTONS ARE BADGE IMAGES NOW
   Appended at the end of this file. Nothing above this line was
   edited.

   WHAT WAS THERE

   Two white pill links under the DOWNLOAD APP button in the mobile
   app section - a 17px store icon plus "Google Play" / "App Store" -
   sitting in a flex row after an "AVAILABLE ON" label that
   .odlc-download-links::before draws at index.css:36335.

   Measured at 1440px before this change:

       Google Play   140 x 39px
       App Store     126 x 39px
       the row       390 x 39px, gap 14px

   They are two store badge images now: google-play-badge.svg
   and app-store-badge.svg - the dark-plate pair, the same two assets
   the footer's Mobile App card uses, so every badge on the site is
   now the black plate. These were first put in as the light-plate
   variants and changed to the dark pair on request; nothing else in
   this block moved when that happened, because the two files have the
   same 200 x 60 viewBox and identical geometry and differ only in the
   plate fill and the type colour.

   WHAT CHANGED AND WHAT DID NOT

   What changed: the icon and the label inside each anchor are now a
   single <img> badge, and the white pill is taken off the anchor so
   the badge is not drawn on top of a plate of its own.

   What did not: the size of each link, the size of the row, the
   position of the "AVAILABLE ON" label and of the DOWNLOAD APP
   button, and both hrefs. Every measurement above was taken before
   this change and reproduced after it.

   THE LINKS KEEP THE EXACT BOXES THEY HAD

   They were not the same width, because each one was padded around
   its own icon and its own label. Both widths are set back by the two
   nth-child rules below - 140px and 126px - so with the 96px
   "AVAILABLE ON" label and two 14px gaps the row is 390px wide
   exactly as it was.

   Neither width had a media query of its own before this change, so
   neither has one now: there is no @media tier in this block.

   THE BADGE IS CENTRED IN THAT BOX, AND IS NEVER STRETCHED

       ... a.odlc-store-badge-img img
           display:block; width:100%; height:100%; max-width:none;
           object-fit:contain; object-position:center

   The plate is 200 x 60, which is 10:3. The two boxes are 3.6:1 and
   3.2:1. Stretching the image to fill either would square up the
   corners, the rim and the type, so object-fit: contain with
   object-position: center scales the plate to fit inside - 130 x 39
   and 126 x 37.8 - and centres it, keeping its proportions and
   leaving the whole of each box clickable.

   :nth-child counts element children only, so the ::before that
   draws "AVAILABLE ON" at index.css:36335 is not counted and the
   first anchor really is :nth-child(1).

   THIS RULE NEEDS !important, AND THAT IS WHY THE HEADER SAYS SO

   The rule it has to answer, .odlc-mobile-app .odlc-download-links a
   at index.css:36346, is almost entirely declared with !important -
   display, align-items, gap, padding, background, border,
   border-radius, color, font-family, font-size, font-weight,
   line-height, text-decoration, white-space, box-shadow and
   transition, all of them. An !important declaration outranks any
   normal declaration regardless of source order, so a plain
   background: transparent appended at the end of this file would lose
   to it and the white pill would stay behind the badge.

   So the reset below repeats !important on each property that
   declaration actually pins, and on nothing else. The white
   background, the 1px #E4EAF8 border, the 50px pill radius and the
   0 6px 14px shadow are exactly what has to go: the plate is white,
   and a white pill behind a white plate shows as a rounded halo with
   the plate's own corners inside it.

   The selector is .odlc-mobile-app .odlc-download-links
   a.odlc-store-badge-img - (0,3,1), one class above the rule at
   :36346. The two nth-child rules sit at (0,4,1).

   width is the one thing in the reset NOT marked important: no
   declaration in that block sets width on these anchors, and
   .odlc-download-links a at index.css:30658 does not either, so
   there is nothing to out-rank.

   flex: 0 0 auto is set because .odlc-download-links carries
   flex-wrap: wrap at :36320, so a shrinkable item could be squeezed
   narrower than its box needs at a narrow viewport; pinning the basis
   keeps the box whole and lets the row wrap instead.

   line-height: 0 is what stops an inline image leaving a gap beneath
   the baseline, which would otherwise drop each badge a few pixels
   low in its anchor so the two were not level with each other.

   COLOR, FONT AND TEXT DECORATION ARE NOT TOUCHED

   The rule at :36346 pins color, font-family, font-size, font-weight
   and text-decoration with !important, and they are left standing.
   The anchors hold no text now, so none of them has anything left to
   paint.

   THE HOVER LIFT IS KEPT

   :36364 raises the pill by 2px and deepens its border and shadow.
   The border and shadow no longer exist to change, so the hover rule
   below keeps only transform: translateY(-2px), and the fade is done
   on the image instead - opacity rather than a background colour,
   because the background is now transparent.

   THE MARKUP

   Each <img> keeps width and height attributes - 140 x 39 and
   126 x 39 - so the browser reserves the right box before the SVG
   arrives.

   ACCESSIBILITY

   The anchor carries aria-label and the image the same alt text, so
   the link keeps an accessible name whether or not the SVG loads.

   WHAT IS NOT CHANGED

   Both hrefs, still opening in a new tab. The "AVAILABLE ON" label
   drawn by ::before. The DOWNLOAD APP button. The rest of the mobile
   app section and the rest of the page. The FAQ block further down
   index.php still has its own copy of the old navy text buttons -
   that one was not part of this change. No copy and no URL invented.
   ================================================================ */

.odlc-mobile-app .odlc-download-links a.odlc-store-badge-img {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    flex: 0 0 auto;
    width: 140px;
    height: 39px;
    margin: 0;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    line-height: 0 !important;
    box-shadow: none !important;
    transition: transform .2s ease, opacity .2s ease !important;
}

/* ----------
   THE TWO LINKS KEEP THE EXACT BOXES THEY HAD

   Measured at 1440px before this change:

       Google Play   140 x 39px
       App Store     126 x 39px
       the row       390 x 39px, gap 14px

   They were not the same width, because each one was padded around its
   own 17px icon and its own label. Both widths are put back so the
   "AVAILABLE ON" label and the row occupy exactly what they occupied
   before and nothing on the page shifts.

   :nth-child counts element children only, so the ::before that draws
   "AVAILABLE ON" at index.css:36335 is not counted and the first
   anchor really is :nth-child(1).

   THE BADGE IS CENTRED IN THAT BOX, AND IS NEVER STRETCHED

   The plate is 200 x 60, which is 10:3. The two boxes are 3.6:1 and
   3.2:1. Stretching the image to fill either of them would square up
   the corners, the rim and the type, so object-fit: contain with
   object-position: center scales the plate to fit inside - 130 x 39 and
   126 x 37.8 - and centres it, keeping its proportions and leaving the
   whole of each box clickable.

   No @media tier is needed here: these two widths were fixed at every
   viewport before this change, so they stay fixed at every viewport.
   ---------- */

.odlc-mobile-app .odlc-download-links a.odlc-store-badge-img:nth-child(1) {
    width: 140px;
}

.odlc-mobile-app .odlc-download-links a.odlc-store-badge-img:nth-child(2) {
    width: 126px;
}

.odlc-mobile-app .odlc-download-links a.odlc-store-badge-img img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
    border: 0;
    border-radius: 0;
}

.odlc-mobile-app .odlc-download-links a.odlc-store-badge-img:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: translateY(-2px) !important;
}

.odlc-mobile-app .odlc-download-links a.odlc-store-badge-img:hover img {
    opacity: .88;
}

/* ================================================================
   THE TWO BADGES SHARE ONE LINE ON A PHONE
   Appended at the end of this file. Nothing above this line was
   edited.

   THE PROBLEM

   At 1440px the row is not width-constrained, so the badges sit on
   one line at 140px and 126px. Below about 480px it is: measured at
   390px,

       section.odlc-mobile-app        375px
       .odlc-mobile-app-container     345px   <- a grid track, so a
       .odlc-download-links           345px      definite width
       "AVAILABLE ON" ::before         96px
       row gap                        10px   (index.css:36717)

   96 + 10 + 140 + 10 + 126 is 382px into 345px, so the second badge
   wrapped onto its own line and the badges read as two unrelated
   buttons rather than a pair.

   THE FIX

   The two badges become equal and share whatever width is left after
   the label and the two gaps:

       flex: 1 1 0      grow into the free space, from a zero basis
       width: auto      so the flex basis, not the width, decides
       min-width: 0     see below - this line is load-bearing
       max-width: 130px never taller than the desktop badge
       height: auto     the height follows from aspect-ratio
       aspect-ratio: 10 / 3

   aspect-ratio is what keeps them level and undistorted. The plate is
   200 x 60, so 10:3 is its own shape: at 390px each badge works out
   at about 115 x 34, at 360px about 101 x 30, at 320px about 83 x 25.
   The box is the plate at every one of those widths, so nothing is
   letterboxed and nothing is stretched - the badges simply get
   smaller as the phone gets narrower instead of dropping to a second
   line.

   max-width is 130px and not 140px, and that is the one number here
   that needs its reasoning. The badge's width is whatever the free
   space gives it, and its height then follows from aspect-ratio. At
   480px to 600px the free space is 140px, so an uncapped badge
   would come out 140 x 42 - three pixels TALLER than the 39px badge
   the same section shows at 768px and above. Measured, before this
   cap was added. 130px is 39 x 10/3, the width whose 10:3 height is
   exactly the desktop 39px, so the cap lands on the desktop height
   and no phone is ever given a bigger badge than a desktop gets.

   min-width: 0 is load-bearing and is the trap in this one. A flex
   item's automatic minimum size is its min-content size, and the
   item holds an <img> whose width attribute is 140. Left alone, the
   item would refuse to shrink below the image's intrinsic width and
   the row would keep wrapping exactly as it does now.

   THE SELECTOR HAS TO MATCH THE nth-child RULES

   The two width rules above are
   .odlc-mobile-app .odlc-download-links a.odlc-store-badge-img
   :nth-child(n) at (0,4,1). A plain (0,3,1) rule here would lose to
   them on specificity and width:140px would survive, so the selector
   below is written with :nth-child(1) and :nth-child(2) too and is
   placed after them. It ties on specificity and wins on source order.

   max-width: 130px is belt and braces: measured across 320px to
   767px the free space only reaches 140px per badge at 480px and
   600px, so the cap does bind at those two widths and nowhere else.
   It is there so that if this section is ever given more room on a
   narrow screen, the badges stop at their desktop height instead of
   growing past it.

   WHAT IS NOT CHANGED

   The desktop badges stay 140 x 39 and 126 x 39 - this rule is
   inside @media (max-width: 767px) and touches nothing at 768px and
   above, where the row is not constrained and does not wrap. The
   "AVAILABLE ON" label is untouched and still sits on the same line
   as the first badge. The gap stays 10px from index.css:36717. Both
   hrefs, both aria-labels, both images, and the pill reset above are
   all as they were. The other two badge placements - the footer and
   mobileapp.php - are not involved.
   ================================================================ */

@media (max-width: 767px) {
    .odlc-mobile-app .odlc-download-links a.odlc-store-badge-img:nth-child(1),
    .odlc-mobile-app .odlc-download-links a.odlc-store-badge-img:nth-child(2) {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 130px;
        height: auto;
        aspect-ratio: 10 / 3;
    }
}
/* ================================================================
   THE PATHWAY CARDS ON A PHONE: ONE ARROW, IN THE CARD'S OWN COLOUR
   Appended at the end of this file. Nothing above this line was
   edited.

   WHAT IS BEING HIDDEN

   Each of the seven pathway cards in the "Choose Your Pathway"
   section carries two arrow affordances:

       .odlcp-cta   APPLY NOW  <i class="bi bi-arrow-right"></i>
                    the arrow is a glyph inside the text link
       .odlcp-go    <i class="bi bi-chevron-right"></i>
                    a 40px circular button holding nothing but the
                    glyph, absolutely placed at right:18px bottom:18px
                    on desktop and turned static by index.css:42973
                    on a phone

   Both are hidden below 768px. What replaces them is one small
   orange arrowhead immediately after the words "APPLY NOW", so each
   card still shows where it leads and by what name, and still carries
   a single arrow rather than two.

   WHY THE WHOLE .odlcp-go ANCHOR AND NOT JUST ITS GLYPH

   That anchor contains one child, the chevron <i>, and nothing else.
   Hiding only the glyph would leave an empty anchor in the flex row:
   still 40px wide, still focusable, still announced to a screen
   reader as "Apply as an Indian Student" with nothing to look at.
   display:none on the anchor takes it out of the layout, out of the
   tab order and out of the accessibility tree in one move.

   No link is lost by doing so. Every .odlcp-go is a duplicate of the
   .odlcp-cta beside it - same href, same aria-label - so the same
   destination is still reachable from the visible "APPLY NOW" text
   that stays on screen.

   THE ORANGE ARROWHEAD IS DRAWN IN CSS, NOT ADDED TO THE MARKUP

   index.php is not touched. The arrow is a ::after on .odlcp-cta:

       width: 18px; height: 12px
       background: linear-gradient(90deg, #FBC490, #F27B21)
       clip-path: polygon(...)  a shaft and a head in one shape

   The clip-path is the arrow silhouette in seven points: a shaft from
   0 to 58% of the width and 38% to 62% of the height, then out to a
   point at 100% / 50%, back to 58% / 94%, and in along the underside
   to close the shaft. One element, no border-radius guesswork, and no
   separate shaft and head to keep in step.

   The arrow takes its colour from the card it sits in, so each one
   matches its own card rather than being orange everywhere.

   Each .odlcp-card sets --accent on itself at index.css:41115, and
   .odlcp-card.odlcp-intl sets --accent:#6655E8 at index.css:41120. The
   .odlcp-cta is a descendant of that card, and .odlcp-cta already
   carries color:var(--accent) at index.css:41352 - which is why the
   words "APPLY NOW" are orange on the Indian card and purple on the
   International one. The arrow uses currentColor, so it inherits that
   same resolved value with no second colour to keep in step and
   nothing to update if a card is ever recoloured.

   The fade along the arrow's length is color-mix() against white at
   32%, so the tail is a pale tint of the card's own colour and the tip
   is the colour itself - the solid end is the end that points
   forward. The plain #FBC490 -> #F27B21 this replaced was an orange
   pair hard-coded to one card.

   background-color is declared before background-image on purpose.
   If a browser cannot parse color-mix() it drops the gradient and the
   arrow is still painted, in the flat card colour, rather than
   disappearing.

   ::after rather than the existing bi-arrow-right glyph because that
   glyph is a font icon: it is one flat colour and cannot take a
   gradient. It is hidden in this tier and the gradient arrow stands in
   its place. flex:0 0 auto stops the flex row shrinking the 18px box,
   and the gap:8px already on .odlcp-cta at index.css:41350 is the
   space between the words and the arrow.

   The ::after carries no text, so it adds nothing to the link's
   accessible name - the link is still read as "APPLY NOW".

   WHY THE SELECTORS ARE THIS LONG

   .odlc-apply-pathways.odlcp-mcard is the section's own tag at
   index.php:3088, and it is what every other mobile rule in this
   section is scoped with (index.css:42960, :42966, :42973). Using
   the same scope means this can never reach an .odlcp-go or an arrow
   anywhere else on the site - the .bi-arrow-right glyph alone appears
   about forty times in index.php, in the hero, the nav and a dozen
   other sections, and those are none of them this section's business.

   The .odlcp-cta selectors are (0,4,0) and the .odlcp-go one is
   (0,3,0), which is what index.css:42973 also is; being later in the
   file than that rule, the display:none wins. Nothing needs
   !important.

   THE 768px BOUNDARY IS THIS SECTION'S OWN

   index.css:41414 opens the section's desktop tier at min-width:768px
   and index.css:42959 its phone tier at max-width:767px. Below 768px
   the cards are one column and the action row is short, which is where
   the two arrows crowded the label. Above 768px nothing here applies
   and the section keeps its own glyph and its circular button.

   NOTHING ELSE MOVES

   .odlcp-actions keeps its own display:flex, align-items:center,
   gap:14px and flex-wrap:nowrap. .odlcp-card keeps the padding:14px
   and the 34px tile it already has on a phone at index.css:42960, so
   no space is left over where the circular button used to sit. Every
   card, label, title, body line and href in the section is untouched.
   ================================================================ */

@media (max-width:767px){
    .odlc-apply-pathways.odlcp-mcard .odlcp-cta .bi-arrow-right{
        display:none;
    }

    .odlc-apply-pathways.odlcp-mcard .odlcp-go{
        display:none;
    }

    .odlc-apply-pathways.odlcp-mcard .odlcp-cta::after{
        content:"";
        flex:0 0 auto;
        width:18px;
        height:12px;
        background-color:currentColor;
        background-image:linear-gradient(90deg,color-mix(in srgb,currentColor 32%,#ffffff),currentColor);
        clip-path:polygon(0 38%,58% 38%,58% 6%,100% 50%,58% 94%,58% 62%,0 62%);
    }
}
/* ================================================================
   THE LEVEL PILLS SIT ON ONE CENTRED LINE ON A PHONE
   Appended at the end of this file. Nothing above this line was
   edited.

   WHAT WAS WRONG

   The row is one flex box that wraps:

       .odlcs-levels              index.css:41592
           display:flex; flex-wrap:wrap; gap:10px; align-items:center
       .odlcs-levels-label        index.css:41595
           12px/700 uppercase, margin-right:2px
       #odlcsPills                index.php:2245, style="display:contents"
       .odlcs-pill                index.css:41601
           padding:8px 16px, border-radius:999px

   #odlcsPills is display:contents, so the label and the three pills
   are all flex items of the one row and the row wraps between them.
   Measured with the ECCE programme selected, which is the one with
   Level 1, Level 2 and Level 3:

       label "SELECT YOUR PROGRAMME LEVEL"   238px
       one pill                                 78px
       all three pills + two 10px gaps         254px
       label + all three pills + three gaps    502px

   So the row holds one line until it is 502px wide. Measured on the
   live page, that is every viewport down to 576px. At 575px and below
   it is not, and the wrap lands between the pills:

       768px   row 708px   needs 502   one line
       600px   row 527px   needs 502   one line
       580px   row 509px   needs 502   one line
       576px   row 505px   needs 502   one line
       575px   row 504px   needs 502   WRAPS
       570px   row 500px   needs 502   WRAPS
       480px   row 428px   needs 502   WRAPS
       320px   row 281px   needs 502   WRAPS

   Which put "SELECT YOUR PROGRAMME LEVEL" and Level 1 on the first
   line, left-aligned, and Level 2 and Level 3 on a second line under
   them - the three levels split two-and-one, so they read as two
   groups instead of one set of choices.

   THE FIX, AND WHY THE LABEL MOVES TO ITS OWN LINE

   The three pills cannot share a line with the label on a phone:
   502px is needed and there are 281px at 320px. So the label takes a
   full line of its own and the three pills take the next one, and
   254px fits in 281px at every width down to 320px. One line for the
   label, one line for the three levels.

           .odlcs-levels-label   flex: 0 0 100%

   flex-basis 100% is what forces that break, and flex-shrink 0 keeps
   the label from being squeezed. margin-right is zeroed because the
   2px it carries at index.css:41595 would add to the 100% basis and
   overflow the row by 2px.

   EVERYTHING IS CENTRED

       .odlcs-levels   justify-content: center
       label           text-align: center

   justify-content centres each wrapped line's items, so the three
   pills sit centred under the label instead of starting hard against
   the left edge. The label already spans the full width by then, so
   text-align is what centres its words inside that full-width box.
   align-items:center was already on the row and is left alone.

   WHY 575px AND NOT 768px

   576px is the narrowest viewport at which the row still holds the
   label and all three pills on one line, measured above. So 575px is
   the widest viewport at which the layout is broken, and the tier
   starts exactly there: every width from 575px down is fixed, and
   576px and up keep the single line they already have. A 768px tier
   would have put the label on a second line at six widths where
   nothing was wrong.

   WHAT IS NOT CHANGED

   The pills keep their own padding, radius, border and colours, and
   the selected one still fills blue via aria-selected at
   index.css:41607. The label keeps its 12px uppercase grey styling.
   The three of them still fit 254px at 320px, so no pill is made
   smaller and no pill wraps. The certificate, its frame and seal, the
   prev and next buttons, the thumbnail strip and the view and
   download buttons are not touched, and no href is affected - these
   are <button> elements and the section is rendered by the script at
   index.php:2524, none of which is changed.
   ================================================================ */

@media (max-width:575px){
    .odlcs-levels{
        justify-content:center;
    }

    .odlcs-levels-label{
        flex:0 0 100%;
        margin-right:0;
        text-align:center;
    }
}
/* =========================================================
   OUR PROGRAMMES - four pillar rows with programme cards
   ------------------------------------------------------------
   Markup sits inside the existing <section class="programmes-section"
   id="programmes">, so the old section padding, background and
   anchor all still apply and nothing else on the page changes.

   Heading: .programme-pillars-header / -label / h2 / p are the
   site's own rules from this same stylesheet, reused unchanged.
   Only the flanking rules either side of the label are new.

   Cards: three blocks share the card height equally, so the
   duration pill and the button sit at the same y on all eleven
   cards however long the programme title is.
   ========================================================= */

.odlcp5 .odlcp5-container {
    width: 92%;
    max-width: 1380px;
    margin: 0 auto;
}

/* ---------- heading : the site's own .programme-pillars-* rules ---------- */
/* Only the flanking rules either side of the label are new, and they are
   scoped to .odlcp5 so the older section that shares the same label
   classes keeps its current look. */
.odlcp5 .programme-pillars-header {
    text-align: center !important;
    margin-bottom: 20px !important;
}

.odlcp5 .programme-pillars-label {
    display: inline-flex !important;
    align-items: center;
    gap: 13px;
    margin-bottom: 9px !important;
}

.odlcp5 .programme-pillars-label::before,
.odlcp5 .programme-pillars-label::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    background: #0d6efd;
}

/* ---------- the four rows ---------- */

.odlcp5-rows {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.odlcp5-row {
    display: grid;
    grid-template-columns: 470px 1fr;
    gap: 12px;
    align-items: stretch;
}

/* ---------- left pillar panel : badge | text | photo ---------- */

.odlcp5-panel {
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 15px;
    min-height: 132px;
}

.odlcp5-panel--navy {
    background: linear-gradient(100deg, #0b2a5b, #16487f);
}

.odlcp5-panel--navy h3,
.odlcp5-panel--navy p {
    color: #fff;
}

.odlcp5-panel--steel {
    background: linear-gradient(100deg, #e6eef8, #f5f9fc);
}

.odlcp5-panel--steel h3,
.odlcp5-panel--steel p {
    color: #0b2a5b;
}

.odlcp5-panel--sand {
    background: linear-gradient(135deg, #E0EEFD 0%, #C4E1FD 100%);
}

.odlcp5-panel--sand h3,
.odlcp5-panel--sand p {
    color: #0b2a5b;
}

.odlcp5-panel--mint {
    background: linear-gradient(135deg, #DCE7FA 0%, #B9CCF2 100%);
}

.odlcp5-panel--mint h3,
.odlcp5-panel--mint p {
    color: #0b2a5b;
}

.odlcp5-badge {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    box-shadow: 0 3px 10px rgba(11, 31, 77, .2);
}

.odlcp5-panel--navy .odlcp5-badge {
    background: #fff;
    color: #0b2a5b;
}

.odlcp5-panel--steel .odlcp5-badge {
    background: #0d6efd;
}

.odlcp5-panel--sand .odlcp5-badge {
    background: #0066D6;
}

.odlcp5-panel--mint .odlcp5-badge {
    background: #0b3a5d;
}

.odlcp5-txt {
    flex: 1;
    min-width: 0;
}

/* global-typography.css forces h3 / h4 / p with !important, so these
   sizes have to carry !important too or the section renders at 30px. */
.odlcp5-panel h3 {
    margin: 0 0 8px;
    font: 800 17px/1.2 Arial, Helvetica, sans-serif !important;
    letter-spacing: -.3px !important;
}

.odlcp5-panel--sand h3 {
    font-size: 14.5px !important;
    line-height: 1.28 !important;
}

.odlcp5-panel hr {
    width: 38px;
    border: 0;
    border-top: 2px solid currentColor;
    opacity: .5;
    margin: 0 0 8px;
}

.odlcp5-panel p {
    margin: 0;
    font: 400 12.5px/1.42 Arial, Helvetica, sans-serif !important;
}

/* the photo is its own flex column, so it can never sit under the text */
.odlcp5-ph {
    flex: 0 0 132px;
    height: 92px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(11, 31, 77, .18);
}

.odlcp5-panel--navy .odlcp5-ph {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}

/* ---------- programme cards ---------- */

.odlcp5-cards {
    display: grid;
    gap: 11px;
    grid-auto-rows: 1fr;
}

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

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

.odlcp5-card {
    position: relative;
    background: #f4f8fd;
    border: 1px solid #e1eaf6;
    border-radius: 9px;
    padding: 14px 13px 13px;
    display: flex;
    gap: 10px;
    align-items: stretch;
    overflow: hidden;
}

.odlcp5-ico {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* THREE BLOCKS SHARE THE CARD EQUALLY

     block 1  title / sub-title   on the card's top edge
     block 2  duration pill       centred in the leftover space
     block 3  button              on the card's floor

   space-between opens the gaps when the card is tall instead of
   pushing the pill downward, so a taller card just breathes and
   every card keeps the same rhythm: title, pill, button. */
.odlcp5-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    padding: 1px 0;
}

.odlcp5-body h4 {
    margin: 0;
    font: 800 15px/1.25 Arial, Helvetica, sans-serif !important;
    color: #0b1f4d;
    letter-spacing: -.2px !important;
}

.odlcp5-sub {
    margin: 4px 0 0;
    font: 700 12px/1.25 Arial, Helvetica, sans-serif !important;
    white-space: nowrap;
}

.odlcp5-pillrow {
    display: flex;
    align-items: center;
}

.odlcp5-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    white-space: nowrap;
    font: 700 11px/1 Arial, Helvetica, sans-serif !important;
}

.odlcp5-cta {
    align-self: flex-start;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 7px;
    padding: 8px 13px;
    font: 700 9.5px/1 Arial, Helvetica, sans-serif !important;
    letter-spacing: .8px !important;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    background: linear-gradient(135deg, #0d3b7a, #0a5bb5);
}

.odlcp5-cta i {
    font-size: 11px;
}

.odlcp5-card .odlcp5-ico {
    background: #d3e6fd;
    color: #0b5ed7;
}

.odlcp5-card .odlcp5-pill {
    background: #d3e6fd;
    color: #0a55c4;
}

.odlcp5-card .odlcp5-sub {
    color: #0d6efd;
}

/* pink family (ECCE) */
/* .odlcp5-card--pink {
    background: #fdf2f7;
    border-color: #f6dde8;
}

.odlcp5-card--pink .odlcp5-ico {
    background: #fbe0ec;
    color: #c2185b;
}

.odlcp5-card--pink .odlcp5-pill {
    background: #fbe0ec;
    color: #ad1457;
}

.odlcp5-card--pink .odlcp5-sub {
    color: #c2185b;
} */

.odlcp5-art {
    flex: 0 0 96px;
    height: 74px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    align-self: flex-end;
    box-shadow: 0 2px 6px rgba(11, 31, 77, .16);
}

/* ---------- breakpoints ---------- */

@media (max-width: 1399px) {
    .odlcp5 .odlcp5-container {
        width: 94%;
    }

    .odlcp5-row {
        grid-template-columns: 1fr;
    }

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

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

@media (max-width: 991px) {
    .odlcp5 .odlcp5-container {
        width: 94%;
    }

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

@media (max-width: 767px) {
    .odlcp5 .odlcp5-container {
        width: 90%;
    }

    .odlcp5-panel {
        min-height: 0;
        padding: 15px 13px;
    }

    .odlcp5-badge {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        font-size: 21px;
    }

    .odlcp5-panel h3 {
        font-size: 16.5px;
    }

    .odlcp5-panel--sand h3 {
        font-size: 15px;
    }

    .odlcp5-ph {
        flex: 0 0 84px;
        height: 74px;
    }

    .odlcp5-art {
        display: none;
    }
}

/* =========================================================
   MOBILE APP - store badges only
   ------------------------------------------------------------
   The DOWNLOAD APP toggle button has been removed from the
   markup, along with the script that opened its dropdown.
   What is left is the "AVAILABLE ON" label (a ::before on
   .odlc-download-links) and the two store badges.

   Both badges are now the same size, so they read as one pair
   rather than two unrelated buttons. The label and the badges
   share one centre line. The row wraps below 430px so the pair
   never overflows a small phone.
   ========================================================= */

.odlc-mobile-app .odlc-mobile-app-buttons,
.odlc-mobile-app .odlc-download-wrapper {
    gap: 0 !important;
}

.odlc-mobile-app .odlc-download-links {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
}

/* both badges identical: same width, same height, no stretch */
.odlc-mobile-app .odlc-download-links a.odlc-store-badge-img,
.odlc-mobile-app .odlc-download-links a.odlc-store-badge-img:nth-child(1),
.odlc-mobile-app .odlc-download-links a.odlc-store-badge-img:nth-child(2) {
    flex: 0 0 132px !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    height: 39px !important;
    aspect-ratio: auto !important;
}

@media (max-width: 430px) {
    .odlc-mobile-app .odlc-download-links {
        flex-wrap: wrap !important;
    }

    .odlc-mobile-app .odlc-download-links a.odlc-store-badge-img,
    .odlc-mobile-app .odlc-download-links a.odlc-store-badge-img:nth-child(1),
    .odlc-mobile-app .odlc-download-links a.odlc-store-badge-img:nth-child(2) {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 132px !important;
    }
}
/* =========================================================
   SOCIAL SECTION - Follow on Instagram
   ------------------------------------------------------------
   The Load More button has been removed from the markup,
   along with the script that revealed .load-more-post cards
   (there were none left, so it was a no-op).

   .social-buttons now holds a single link, and this pins it
   to the horizontal centre of the section on every width.
   ========================================================= */

.social-section .social-buttons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 28px;
}

.social-section .social-buttons .social-follow-btn {
    margin: 0 auto;
}
/* =========================================================
   CARD SPACING - padding and line gaps
   ------------------------------------------------------------
   On a narrow screen the card is short, so space-between has
   almost no slack to hand out and the three blocks sit on top
   of each other with no visible padding.

   gap puts a floor under the space between title, pill and
   button at every width, and min-height gives the card enough
   room for its own padding to read. space-between still
   distributes whatever is left over on the taller desktop cards.
   ========================================================= */

.odlcp5-card {
    padding: 16px 15px;
    min-height: 134px;
}

.odlcp5-body {
    gap: 10px;
    padding: 0;
}

.odlcp5-pillrow {
    min-height: 22px;
}

@media (max-width: 991px) {
    .odlcp5-card {
        padding: 17px 16px;
        min-height: 138px;
    }

    .odlcp5-body {
        gap: 12px;
    }
}

@media (max-width: 767px) {
    .odlcp5-card {
        padding: 18px 16px;
        min-height: 142px;
    }

    .odlcp5-body {
        gap: 14px;
    }

    .odlcp5-ico {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        font-size: 19px;
    }
}
/* =========================================================
   NARROW-SCREEN OVERFLOW GUARD
   ------------------------------------------------------------
   A grid item defaults to min-width:auto, so a panel or a card
   refuses to shrink below its content and pushes the row wider
   than the screen on a phone. min-width:0 lets every item give
   the space back.
   ========================================================= */

.odlcp5-row > *,
.odlcp5-panel,
.odlcp5-cards,
.odlcp5-card,
.odlcp5-body,
.odlcp5-txt {
    min-width: 0;
}

.odlcp5-panel h3,
.odlcp5-body h4 {
    overflow-wrap: break-word;
}

@media (max-width: 767px) {
    .odlcp5-panel {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .odlcp5-panel .odlcp5-txt {
        flex: 1 1 100%;
        order: 2;
    }

    .odlcp5-panel .odlcp5-ph {
        order: 1;
        margin-left: auto;
    }
}

/* ============================================================================
   HOME, ABOUT ODLC: THE PHOTO'S BOX AND ITS OFFSET FRAME
   ---------------------------------------------------------------------------

   GEOMETRY ONLY. No font, no colour, no background, no border colour and no
   shadow is written below. The photograph is not replaced and index.php is
   not touched - the same <img src="images/aboutus.png"> stays exactly where
   it is. No image file is read, written or deleted.

   MEASURED AT A 1000px VIEWPORT, LIVE, BEFORE THIS BLOCK

       .col-lg-5                        L 566.5   R 936.8   w 370.3
       .who-we-are-image                L 610.5   R 907.8   w 297.3   h 460.0
       margin                           0 0 20px 20px
       images/aboutus.png               natural 1480 x 1062,  ratio 1.39
                                       rendered into a 0.65 box, cover
       .who-we-are-image::before        top 16  left -16  w 100%  h 100%
                                       2px solid #083C7C, fill #083C7C, r 22px
       .who-we-are-image-overlay        inset 0, 135deg rgba(8,60,124,.12)

   THREE FAULTS, ALL VISIBLE IN THE SCREENSHOT

   1. THE PHOTO IS NOT CENTRED IN ITS OWN COLUMN

       index.css:28373 writes width: calc(100% - 25px) with
       margin: 0 0 20px 20px, so 20px is taken off the left and nothing off
       the right. The column is 370.3px and the photo is 297.3px, and it
       starts 44.0px into the column instead of 36.5px. It sits off centre
       by 7.5px, which is what makes the navy frame look as though it is
       only on one side.

   2. THE PHOTO IS CROPPED TO LESS THAN HALF ITS WIDTH

       The file is a landscape photograph, 1480 x 1062. The box is
       297.3 x 460.0, which is a 0.65 portrait shape, and object-fit is
       cover. Cover on a 1.39 image in a 0.65 box keeps the middle 46% of
       the width and discards the rest - the two people at each end of the
       group in the screenshot are outside the crop. The box is given a
       fixed height in px at all four of the page's tiers, which is what
       forces the ratio:

           index.css:28377   base            height 460px
           index.css:28527   @media 991px    height 380px
           index.css:28561   @media 767px    height 300px
           index.css:28607   @media 480px    height 250px

   3. THE FRAME IS OFFSET TO ONE SIDE ONLY

       index.css:28431 sets top: 16px and left: -16px on a box that is
       width: 100% and height: 100%. With the top inset and the full
       height, the navy therefore shows 16px on the LEFT and 16px under the
       BOTTOM, and nothing at all on the top or the right. Combined with
       fault 1 - the photo itself pushed 20px right of the column - the navy
       lands 4px inside the column's left edge and reads as a stray block
       rather than as a frame behind the picture.

   --------------------------------------------------------------------------
   WHAT IS WRITTEN, AND WHY

   THE BOX IS GIVEN THE PHOTOGRAPH'S OWN RATIO

       aspect-ratio  1480 / 1062     height auto

   That is the file's own ratio, so object-fit: cover has nothing to crop -
   the box and the picture are the same shape and the whole group of people
   in the screenshot is inside the frame. It is written as a ratio rather
   than a height in px so it holds at every width the column takes, and it
   is written at all four of the page's own tiers because each of those
   tiers pins height in px with !important and would otherwise win.

   THE PHOTO IS CENTRED, WITH ROOM FOR THE FRAME ON ONE SIDE

       base        width calc(100% - 40px)   margin 0 0 20px 20px
       991px       width calc(100% - 32px)   margin 0 0 20px 16px
       767px       width calc(100% - 24px)   margin 10px 12px 15px
       480px       width calc(100% - 20px)   margin 0 10px 20px

   Equal on both sides at every tier, so the photo is centred in its column.
   The inset is not the same number as the frame's offset on purpose: the
   inset has to be larger than the offset or the navy would be clipped by
   the column, and the difference is the gap that keeps the two apart - 4px
   at the base tier, 3px at 480px.

   THE FRAME MOVES FROM THE LEFT TO THE RIGHT

       base        right -16px   top 16px      border-radius 22px
       991px       right -12px   top 12px
       767px       right  -9px   top  9px      border-radius 18px
       480px       right  -7px   top  7px

   left is set to auto in each of them, because index.css:28438 writes
   left: -16px !important and a later left would otherwise still be in
   force alongside a right. The frame then peeks on the right and under the
   bottom - a corner offset rather than a slab on one side - and the
   screenshot's one-sided navy is gone.

   Its 2px #083C7C border, its #083C7C fill, its 22px radius and its z-index
   are not restated. They are already right and they are left alone.

   THE OVERLAY IS NOT NAMED

   .who-we-are-image-overlay is a 135deg rgba(8,60,124,.12) wash over the
   whole box, with its radius already following the photo's at 22px and 18px.
   It covers the box, which is now the same shape as the photo, so it lands
   where it already lands. It is not written here.

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

   index.php. The <img> element, its src, its alt and its 1px #dbe5f0 border.
   The 0 18px 45px rgba(8,60,124,.14) shadow on the photo. The text column,
   the three paragraphs, the tag, the title, the ABOUT ODLC button and its
   href. The section's own background, which is images/3.0main.png applied
   as an inline style in the markup. The header, the footer, and every other
   section on this page.
============================================================================ */

/* ------------------------------- 1. the box, centred, at the photo's ratio */

.who-we-are-image {
    width: calc(100% - 40px) !important;
    height: auto !important;
    aspect-ratio: 1480 / 1062 !important;
    margin: 0 0 20px 20px !important;
}

.who-we-are-image img {
    height: 100% !important;
}

/* --------------------- 2. the frame, off the right corner, not the left */

.who-we-are-image::before {
    left: auto !important;
    right: -16px !important;
    top: 16px !important;
    border-radius: 22px !important;
}

/* -------------------------------- 3. the same at the page's own tiers */

@media (max-width: 991px) {
    .who-we-are-image {
        width: calc(100% - 32px) !important;
        height: auto !important;
        aspect-ratio: 1480 / 1062 !important;
        margin: 0 0 20px 16px !important;
    }

    .who-we-are-image::before {
        left: auto !important;
        right: -12px !important;
        top: 12px !important;
    }
}

@media (max-width: 767px) {
    .who-we-are-image {
        width: calc(100% - 24px) !important;
        height: auto !important;
        aspect-ratio: 1480 / 1062 !important;
        margin: 10px 12px 15px !important;
    }

    .who-we-are-image img,
    .who-we-are-image-overlay {
        border-radius: 18px !important;
    }

    .who-we-are-image::before {
        left: auto !important;
        right: -9px !important;
        top: 9px !important;
        border-radius: 18px !important;
    }
}

@media (max-width: 480px) {
    .who-we-are-image {
        width: calc(100% - 20px) !important;
        height: auto !important;
        aspect-ratio: 1480 / 1062 !important;
        margin: 0 10px 20px !important;
    }

    .who-we-are-image::before {
        left: auto !important;
        right: -7px !important;
        top: 7px !important;
    }
}


/* ============================================================================
   HOME, ABOUT ODLC: THE L-SHAPED OFFSET FRAME TAKEN AWAY
   ---------------------------------------------------------------------------

   THE FRAME IS STOPPED, NOT DELETED, AND THE PHOTO TAKES THE FULL COLUMN.
   No font, no colour, no background, no border and no shadow is written
   below. index.php is not touched and the photograph is not replaced.

   WHAT THE L-SHAPE IS

   It is one pseudo-element. index.css:28431 draws a solid #083C7C block
   at width: 100% and height: 100%, inset from the photo by top and right and
   pushed out by left, so it reads as a thick navy L hugging the photo's
   right and bottom edges - the shape in the screenshot. It is not a border,
   not a shadow and not part of the picture. It has no content of its own and
   carries no information, so there is nothing in it to keep.

   It is a pseudo-element, so content:none is the only way to stop it
   painting. The rule stays in the file, unchanged, at index.css:28431 and at
   its four tiers - it is simply given nothing to draw. Nothing was deleted.

   WHY IT GOES RATHER THAN MOVES

   The two previous attempts both left the same problem in a different place.
   Offsetting it to the left put the navy on one side only, because the top
   inset plus a full-height block can only show two of the four sides.
   Offsetting it to the right showed the same L mirrored. Any offset of a
   solid block behind a rectangle is an L, so there is no offset that is not
   an L. The only versions that are not an L are a centred frame, a full
   outline, or no frame - and a centred frame would sit on top of the photo's
   own radius and read as a mistake.

   The professional arrangement is no frame at all. The photograph already
   carries a complete treatment of its own, written at index.css:28401 and
   not touched by this block:

           border-radius   22px
           border          1px solid #dbe5f0
           box-shadow      0 18px 45px rgba(8, 60, 124, .14)

   A rounded corner, a hairline and a soft shadow is the whole vocabulary.
   The navy L was fighting the radius - it is a hard rectangle with a 22px
   radius trying to trace a soft 22px corner - and it doubled the visual
   weight of the image for no gain.

   THE PHOTO NOW FILLS ITS COLUMN

       base      width 100%    margin 0 0 20px 0
       991px     width 100%    margin 0 0 20px 0
       767px     width 100%    margin 10px 0 15px
       480px     width 100%    margin 0 0 20px

   With no frame there is no frame to make room for, so the inset that
   existed only to clear it - 40px each side at the base tier, 20px at
   480px - is not needed. The photo takes the column's full width and its
   edges line up with the text column above and below it, which is what a
   grid is for.

   aspect-ratio 1480 / 1062 and height auto stay as they were written in the
   block before this one. The photograph is still not cropped: the box is the
   picture's own 1.394 ratio, so object-fit: cover has nothing to discard and
   the whole group stays in frame. That is kept deliberately - a full-width
   box with a fixed height is what cropped the picture in the first place.

   --------------------------------------------------------------------------
   WHAT IS NOT TOUCHED

   The photograph, its src, its alt, its radius, its 1px #dbe5f0 border and
   its 0 18px 45px rgba(8,60,124,.14) shadow. .who-we-are-image-overlay, the
   135deg rgba(8,60,124,.12) wash, which is a gradient across the picture and
   not a shape - it stays. The text column, the tag, the title, the three
   paragraphs, the ABOUT ODLC button and its href. The section's inline
   background, images/3.0main.png. The header, the footer, and every other
   section on this page.
============================================================================ */

/* --------------------- 1. the offset frame stopped at the base tier */

.who-we-are-image::before {
    content: none !important;
}

/* ------- 2. the photo fills its column, and stays uncropped */

.who-we-are-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1480 / 1062 !important;
    margin: 0 0 20px 0 !important;
}

/* ------------------------- 3. the same at the page's own four tiers */

@media (max-width: 991px) {
    .who-we-are-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1480 / 1062 !important;
        margin: 0 0 20px 0 !important;
    }

    .who-we-are-image::before {
        content: none !important;
    }
}

@media (max-width: 767px) {
    .who-we-are-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1480 / 1062 !important;
        margin: 10px 0 15px 0 !important;
    }

    .who-we-are-image::before {
        content: none !important;
    }
}

@media (max-width: 480px) {
    .who-we-are-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1480 / 1062 !important;
        margin: 0 0 20px 0 !important;
    }

    .who-we-are-image::before {
        content: none !important;
    }
}


/* ============================================================================
   HOME, ABOUT ODLC: THE PHOTOGRAPH IN A NAVY KEYLINE
   ---------------------------------------------------------------------------

   THE FRAME, DONE AS A FULL OUTLINE INSTEAD OF AN OFFSET L.

   NOTHING ELSE ON THIS PAGE IS WRITTEN. The block below names two selectors
   and nothing more: .who-we-are-image and .who-we-are-image img. No font, no
   colour of type, no shadow, no overlay, no background on the section, no
   margin on the column, no other section on this page, and index.php is not
   touched at all.

   WHY A KEYLINE AND NOT AN OFFSET

   index.css:28431 draws a solid #083C7C block at width: 100% and height:
   100%, inset from the photo on two sides and pushed out on the other. That
   is a thick L hugging two edges, and it is what the screenshot showed. Any
   offset of a solid rectangle behind another rectangle is an L - moving it to
   the other side only mirrors it. A border is the same brand navy drawn as an
   outline instead of a slab, which is what makes it read as a mount rather
   than as a stray block.

   The frame is drawn as a border on the BOX, not as a second element and not
   as the old ::before. The ::before is left at content:none from the block
   before this one and is not named again - it would otherwise draw a second
   frame underneath the border.

   9px of #083C7C at a 30px radius, on the box, with the photo inside it at
   the 22px radius it already had. The 8px between the two radii is what
   keeps the frame even all the way round instead of pinching at the corners.
   #083C7C is the navy index.css:28431 already used for this element and the
   navy the ABOUT ODLC button is drawn in - no new colour is introduced.

   --------------------------------------------------------------------------
   THE RATIO MOVES ONTO THE PHOTO, BECAUSE A BORDER TAKES ROOM FROM THE BOX

   aspect-ratio 1480 / 1062 currently sits on the box. With box-sizing:
   border-box that ratio applies to the OUTSIDE of the border, so a 9px frame
   would squeeze the content box to a different shape from the photograph and
   object-fit: cover would start cropping again - which is the fault this
   section was fixed for. Measured at the live width, 322.3px box:

       border box  322.3 x 231.3   ratio 1.3940   (the photo's own ratio)
       content box 304.3 x 213.2   ratio 1.4273   2.33% wider than the photo

   So aspect-ratio moves to the img, where it describes the photograph
   itself, and the box goes back to a plain full-width box. The photo then
   fills the frame exactly and cover has nothing to discard - box and photo
   are both 1.3936, as they are now.

   The 1px #dbe5f0 hairline the photo already had is not restated and not
   removed. It now sits between the navy frame and the picture, which is what
   a mount is: frame, then hairline, then photograph.

   --------------------------------------------------------------------------
   WHAT IS NOT TOUCHED

   .who-we-are-image-overlay, the 135deg rgba(8,60,124,.12) wash, measured
   flush with the photo at both edges and left exactly as it is. The photo's
   src, its alt, its 22px radius and its existing border. The text column, the
   tag, the title, the three paragraphs, the ABOUT ODLC button and its href.
   The section's inline background, images/3.0main.png. The header, the
   footer, and every other section on this page.
============================================================================ */

/* --------------------- the box becomes the navy keyline frame */

.who-we-are-image {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    border: 9px solid #083C7C !important;
    border-radius: 30px !important;
    box-shadow: 0 20px 48px rgba(8, 60, 124, 0.22) !important;
    overflow: visible !important;
}

/* --------- the photograph keeps its own ratio, inside the frame */

.who-we-are-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1480 / 1062 !important;
    border-radius: 22px !important;
}

/* ------------------------ the same at the page's own four tiers */

@media (max-width: 991px) {
    .who-we-are-image {
        width: 100% !important;
        height: auto !important;
        margin: 0 0 20px 0 !important;
        border-width: 9px !important;
    }

    .who-we-are-image img {
        height: auto !important;
        aspect-ratio: 1480 / 1062 !important;
    }
}

@media (max-width: 767px) {
    .who-we-are-image {
        width: 100% !important;
        height: auto !important;
        margin: 10px 0 15px 0 !important;
        border-width: 9px !important;
    }

    .who-we-are-image img {
        height: auto !important;
        aspect-ratio: 1480 / 1062 !important;
    }
}

@media (max-width: 480px) {
    .who-we-are-image {
        width: 100% !important;
        height: auto !important;
        margin: 0 0 20px 0 !important;
        border-width: 9px !important;
    }

    .who-we-are-image img {
        height: auto !important;
        aspect-ratio: 1480 / 1062 !important;
    }
}



/* ============================================================================
   HOME, SAMPLE CERTIFICATES: THE INTRO PARAGRAPH ON TWO LINES
   ---------------------------------------------------------------------------

   ONE DECLARATION. max-width, on one selector. Nothing else on this page
   is written, no font is changed, no text is changed, and index.php is not
   touched.

   THE FAULT

   index.css:41557 sets

       .odlcs-intro { max-width: 840px; }

   with nothing else on the element to widen it. The paragraph is 278
   characters of 16px Arial and is centred inside .odlcs-head, which is
   925.7px wide at a 1000px viewport. At 840px the 278 characters do not fit
   in two lines, so they take three - and the third line is a single short
   word, which is what the screenshot shows.

   MEASURED, AT A 1000px VIEWPORT, BY COUNTING REAL LINE BOXES

       max-width   box width   lines
            700px    700.0        3
            760px    760.0        3
            800px    800.0        3
            840px    840.0        3     <- as shipped
            868px    868.0        2   <- narrowest width that fits two
            880px    880.0        2
            925px    925.0        2

   868px is the narrowest of those that gives two lines, and the paragraph
   already has margin:0 auto, so a wider cap simply centres the same box.

   THE VALUE, AND WHY IT IS NOT A FIXED PIXEL FIGURE

       max-width  none

   Removing the cap is better than restating it at 880px or 925px. The
   constraint that was wrong was never the width - it was the idea that this
   paragraph should be narrower than the column it sits in. It is centred
   body copy directly under a full-width heading, and the heading above it
   (.odlcs-head h2, 35px) is already the full 925.7px of .odlcs-head. A
   925.7px measure is 97 characters a line at this size, which is inside the
   45 to 100 band that reads comfortably; 840px is 88, also inside it, so
   neither number is wrong for its own sake - the difference is only that
   840 happens to fall one word short of two lines here.

   With the cap gone the paragraph takes the column at every width, so:

       at a desktop width it is two lines, because the column is wide enough
       at a tablet width it wraps to three, because the column is not
       at a phone width it wraps to as many as it needs, because a 345px
                      column cannot hold 278 characters in two lines at any
                      font size this page is allowed to use

   A fixed 880px would have been the same at a desktop width and wrong below
   it, because 880px is wider than a phone's column and narrower than a wide
   monitor's - it would hold the paragraph still at widths where the column
   around it is moving. Letting the column decide keeps the paragraph and the
   heading it sits under on the same left and right edges at every width,
   which is the arrangement the rest of this section already has.

   --------------------------------------------------------------------------
   WHAT IS NOT TOUCHED

   Not one font. The element keeps 16px / 400 / 1.6 and #666666, all of which
   are declared with !important at index.css:41550 to 41554 and none of them
   is restated here. The text-align: center, the margin: 0 auto, the 25.6px
   line-height, the heading above, the tag above that, the tabs, the panel,
   the certificate viewer, the thumbnails, the QR row, the notice and the
   modal. The .odlcs-specimens padding, which measures 65px above and 60px
   below and is a separate fault this block does not touch. The header, the
   footer and every other page.
============================================================================ */

/* The 840px cap is what put the paragraph's last word on a line of its own.
   With it gone the paragraph takes .odlcs-head, and two lines where the
   column is wide enough for two. */

.odlcs-intro {
    max-width: none !important;
}


/* ============================================================================
   HOME, THE FINAL CTA'S SUPPORTING LINKS: THE BULLET SEPARATORS, ON A PHONE
   ---------------------------------------------------------------------------

   THE FAULT, AND IT IS ONLY VISIBLE ON A PHONE

   .odlc-final-support-links at index.css:27621 is

       display: flex;  align-items: center;  flex-wrap: wrap;  gap: 10px;

   and its seven direct children are, in order, as they are in index.php:5563
   to 5606:

       0  <a>    (no class)                 "Download App"
       1  <span> (no class)                 "•"
       2  <a>    (no class)                 "Verify Credential"
       3  <span> (no class)                 "•"
       4  <span> .odlc-final-dropdown       "Become an ALC" + its menu
       5  <span> (no class)                 "•"
       6  <a>    (no class)                 "Contact ODLC"

   The row wraps - flex-wrap:wrap at index.css:27625 - and every one of those
   seven children is a separate flex item. A bullet is 3.9px wide and a link
   is 97 to 110px, so the browser has no reason to keep a bullet with the
   link it belongs to: each one wraps on its own line-breaking decision.

   That is what the screenshot shows. On a 390px viewport the row comes out
   as, measured inside a 390px viewport:

       line 1   "Download App"   •   "Verify Credential"   •
       line 2   "Become an ALC ⌄"   •   "Contact ODLC"   •

   A bullet at the end of line 1 and another at the end of line 2, both
   hanging with nothing after them. That is not a font fault - every glyph is
   the size and weight it should be - it is three separators that have lost
   the thing they were separating.

   On a desktop the row does not wrap and the three bullets sit correctly
   between the four links, which is why this reads as fine until you look at
   it on the phone.

   --------------------------------------------------------------------------
   WHY THE BULLETS GO RATHER THAN THE WRAPPING BEING STOPPED

   Turning off flex-wrap would force all four links onto one line, which does
   not fit in 390px at any font size - the four labels need 419.6px between
   them before any separator at all. It would overflow the panel.

   Making the row a column would stack the links, which is a different design
   and throws away the reading order the bullets were giving.

   On a wrapped inline row a hard separator is the wrong device: there is no
   longer any single line to separate. The links are already separated by the
   gap and by the line break itself. So the three separators are stopped and
   the gap is widened to take over the job they were doing.

   Below 768px only. Above it the row does not wrap, the bullets are correct,
   and this rule is not in force.

   --------------------------------------------------------------------------
   THE THREE SPANS, AND ONLY THOSE THREE

   The rule is on the row's own children and excludes the dropdown by name:

       .odlc-final-support-links > span:not(.odlc-final-dropdown)

   index.php:5577 marks the dropdown <span class="odlc-final-dropdown"> and
   its own markup carries the class, so :not() leaves it and its button
   alone. The other three spans in the row have no class at all - verified by
   walking the DOM, they are exactly the three whose text is "•" - so all
   three and only those three are caught.

   The dropdown's menu is a DESCENDANT of that span, not a direct child of
   the row, so the > combinator excludes it independently. Nothing inside
   .odlc-final-dropdown-menu can be reached by this selector whatever happens
   to the span.

   They are stopped with display:none, which removes them from the flex line
   entirely - the gap they were taking is then given to the links. Nothing is
   deleted from index.php and the three spans stay in the markup.

   --------------------------------------------------------------------------
   THE GAP, AND WHY 12px

       768px and below     row-gap 14px      row-gap 10px at 480 and below
       480px and below     row-gap 10px

   Written as two properties rather than the shorthand, because the page's own
   two rules set gap and would otherwise have to be overridden wholesale:

       index.css:28030   @media 767px   gap: 7px
       index.css:28121   @media 480px   gap: 5px

   14px at a phone is a clear visual break between two links that now have no
   bullet between them, and 10px on the narrowest phones where 390px is 5%
   of the width. column-gap stays as the page set it, which is the minimum
   gap between two items that happen to share a line.

   --------------------------------------------------------------------------
   WHAT IS NOT TOUCHED

   No font. Every size, weight, line-height, letter-spacing and colour on this
   row is left exactly as it is - the links at 14px/600, the dropdown toggle
   at 14px/600, and the two menu items at 14px. No background, no border, no
   shadow, no width, no height, no margin, no padding on any of them.

   The row's own display:flex, flex-wrap:wrap and align-items:center are not
   restated - the row still wraps, it simply no longer breaks a link away
   from its separator because the separators are gone.

   .odlc-final-dropdown, its button, its chevron and both of its menu items.
   The two buttons above the row in .odlc-final-cta-buttons. The label, the
   heading and the paragraph above. The visual card and its icon on the
   right. index.php. The header, the footer, and every other page.
============================================================================ */

/* ---------- the three bullet separators, below 768px only ---------- */
/* On a wrapped row a hard separator has nothing left to separate: each of the
   three bare <span> is its own flex item and wraps independently, so they
   land at line ends. The row wraps, the links keep their order, and the
   gap takes over the job. */

@media (max-width: 767px) {

    .odlc-final-support-links > span:not(.odlc-final-dropdown) {
        display: none !important;
    }

    .odlc-final-support-links {
        row-gap: 14px !important;
    }
}

@media (max-width: 480px) {
    .odlc-final-support-links {
        row-gap: 10px !important;
    }
}


/* ============================================================================
   HOME, THE FINAL CTA'S SUPPORTING LINKS: FOUR IN TWO ALIGNED ROWS
   ---------------------------------------------------------------------------

   LAYOUT ONLY, ON A PHONE. No font, no colour, no background, no border, no
   width, no height, no margin and no padding is written below. The three
   bullet separators stay hidden from the block before this one and are not
   touched again. index.php is not touched.

   WHAT IS WRONG NOW, MEASURED AT A 390px VIEWPORT

       .odlc-final-support-links  display flex  wrap wrap  justify center
       row w 320.8px

   Four links in a wrapping flex row do not make two rows. They make however
   many rows the widths happen to fall into, and each line is then centred on
   its own, so the lines are ragged against each other:

       row1   "Download App"  +  "Verify Credential"   lefts  89.7 / 193.7
       row2   "Become an ALC"                            left   81.4
       row3   "Contact ODLC"                              left  216.3

   Three rows, not two, and the second row is one item sitting alone while
   the first row holds two. Their centres are 136.7, 247.0, 143.9 and 262.4
   - a spread of 118.5px across four items that are supposed to be the same
   kind of thing. Nothing lines up with anything.

   The same three rows at every phone width, measured:

       vw      row w    rows   row1 mids        row2 mid     row3 mid
       390    320.8      3     136.7 / 247.0     143.9         262.4
       360    293.2      3     121.7 / 232.0     128.9         247.4
       320    256.4      3     101.7 / 212.0     108.9         227.4

   The arithmetic behind it: the four labels measure 94.0, 106.5, 124.8 and
   92.3px. Row 1 takes 94.0 + 10 + 106.5 = 210.5 and fits in 320.8. Adding
   the third, 210.5 + 10 + 124.8 = 345.3, does not - so it wraps. Alone on
   row 2, 124.8 + 10 + 92.3 = 227.1 would have fitted in 320.8, but flex
   never moves an item back up to fill a row it has already left. A wrapping
   flex row fills greedily and in order, which is not what four equal links
   in a 2 by 2 arrangement want.

   --------------------------------------------------------------------------
   THE FIX: A TWO-COLUMN GRID, AND WHY A GRID RATHER THAN A FLEX TWEAK

       display grid
       grid-template-columns  1fr 1fr
       gap  14px 10px      10px 8px at 480 and below
       justify-items  center

   A grid places items into cells, and the placement does not depend on what
   happens to fit. Four items into two columns are two rows of two at every
   width, always - there is no width at which it becomes three rows, which is
   the property that is wanted and the one flex cannot give.

   It also fixes the raggedness directly: both columns are the same width
   (1fr each) and each item is centred in its own cell by justify-items, so
   the two items on row 1 share a centre and the two on row 2 share a
   different one, and both rows start and end on the same edges.

   1fr rather than a fixed pixel width, so the columns follow the panel at
   every width instead of being a figure that is right on one phone and wrong
   on the next.

   WHY NOT flex-wrap with a forced break after the second item

   That needs a break element in the markup or a ::before on the third link,
   and the third link is an <a> whose ::before would have to be display:block
   with a width of 100% to break the line. It works, but it needs a rule that
   paints nothing and exists only to end a row, it cannot make the two rows
   equal in width, and it puts the wrapping burden back on the browser. A grid
   gets the arrangement from the box model rather than from a trick.

   WHY NOT leave them on one wrapped line each

   Four labels at 419.6px of text plus three gaps will not fit in 320.8px at
   any size this page is allowed to use, so the row has to break. The
   question is only whether it breaks as 2 and 2 or as 2, 1 and 1.

   --------------------------------------------------------------------------
   THE GAPS, COLUMN THEN ROW

   Written in that order and as a shorthand so the column gap and the row gap
   are independent:

       768px and below    14px column, 10px row
       480px and below    10px column,  8px row

   The column gap is the space between two items sharing a row and so it
   sets how far apart the two halves of a pair read. The row gap is the space
   between the two rows. They are different distances and the block before
   this one has already used row-gap for the wrapped case, so both are stated
   here rather than left to inherit.

   --------------------------------------------------------------------------
   WHAT THE FOUR ITEMS ARE, AND THAT ALL FOUR SURVIVE

   In the markup at index.php:5563 to 5606, after the three bullets are gone,
   four items remain and the grid takes them in document order:

       cell 1   <a href="#app">            Download App
       cell 2   <a href="#credential">     Verify Credential
       cell 3   <span class="odlc-final-dropdown">   Become an ALC + menu
       cell 4   <a href="contact.php">     Contact ODLC

   All four hrefs and the dropdown's two menu items are untouched. The menu is
   position:absolute inside a position:relative span, and that span is now a
   grid item rather than a flex item - an absolutely positioned child resolves
   against its nearest positioned ancestor either way, so the menu still drops
   from the same place. Its 210px width and 2 items are measured after this.

   --------------------------------------------------------------------------
   ONLY BELOW 768px

   Above it the row does not wrap, all four links and three bullets sit on one
   line, and this block is not in force. The desktop and tablet layouts are
   exactly as they were.

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

   No font. The links stay 14px/18.2px w600, the dropdown toggle 14px/18.2px
   w600, the two menu items 14px/17.55px w600 - none of those is restated.
   No colour, background, border, shadow, width, height, margin or padding on
   any of the four items. The text-align: center at index.css:28030 is not
   restated, it still applies and still centres the text inside each cell.
   The two buttons above the row, the label, the heading, the paragraph, the
   visual card. index.php. The header, the footer, every other page.
============================================================================ */

/* ---- the four links as two aligned rows of two, below 768px only ---- */
/* Four items in a wrapping flex row fill greedily and land as 2, 1 and 1 with
   ragged edges. A two-column grid places them in cells instead: two rows of
   two at every width, both columns the same width, each item centred in its
   own cell by justify-items. */

@media (max-width: 767px) {
    .odlc-final-support-links {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px 10px !important;
        justify-items: center !important;
    }
}

@media (max-width: 480px) {
    .odlc-final-support-links {
        gap: 10px 8px !important;
    }
}


/* ============================================================================
   HOME, THE FINAL CTA'S SUPPORTING LINKS: THE GRID, AT THE RIGHT
   ---------------------------------------------------------------------------
   SPECIFICITY
   ---------------------------------------------------------------------------

   THE RULE ABOVE THIS ONE IS CORRECT AND WAS LOSING. It is restated here
   with the selector doubled and nothing else changed.

   WHAT BEAT IT, AND WHY IT WAS NOT VISIBLE IN THE EARLIER READINGS

       index.css:38550
       .odlc-final-cta .odlc-final-support-links {
           display:       flex    !important;
           align-items:   center  !important;
           flex-wrap:     wrap    !important;
           gap:           10px    !important;
       }

   That is (0,2,0) - two classes - and every declaration in it carries
   !important. The grid rule written before this one was (0,1,0) with
   !important. Two !important declarations are compared by specificity, and
   (0,2,0) beats (0,1,0), so display:flex won and the row stayed a flex row.

   The rule sits at index.css:38550, inside no media query, so it is in
   force at every width on the whole page. It was found by walking the CSSOM
   and listing every rule that matches the element - the grid rule was
   present and correct in that list, listed AFTER the flex rule, and losing.
   That is why the measurement showed three rows and no grid columns even
   though the rule existed.

   It also means the fault is not wrapping. flex-wrap:wrap is forced here by
   design, so the three rows were never a fill-order accident to be tuned
   away with a gap: the box is a flex row, and a flex row of four links
   centred on each line is what produces ragged edges.

   --------------------------------------------------------------------------
   THE CORRECTION

   Same selector as index.css:38550, so the two are (0,2,0) against (0,2,0)
   and the later one wins on source order. That is the smallest change that
   wins and it keeps the two rules comparable - a higher-specificity selector
   would work too but would make this block harder to read against the rule
   it is correcting.

       .odlc-final-cta .odlc-final-support-links
           display              grid
           grid-template-columns 1fr 1fr
           justify-items        center
           gap                  14px 10px      10px 8px at 480 and below

   grid-template-columns is a new property here, so nothing above competes
   with it. display and gap are the two that exist at 38550 and are restated
   here. align-items and flex-wrap are not restated: in a grid, align-items
   governs the block axis and justify-items the inline axis, and the pair
   that does the centring asked for is justify-items:center. Leaving
   align-items:center in place is harmless - it centres each item in its own
   row, which is what a single-line item wants anyway - and not restating it
   means one fewer property to keep in step with the rule above.

   --------------------------------------------------------------------------
   WHY THE BULLETS STAY HIDDEN WITHOUT BEING RESTATED HERE

   The block before this one stops them with

       .odlc-final-support-links > span:not(.odlc-final-dropdown)

   at (0,2,1) with !important. Nothing at index.css:38550 sets display on the
   row's spans - 38570 sets only color:#C3CDDE - so that rule still stands on
   its own and is not repeated here.

   --------------------------------------------------------------------------
   ONLY BELOW 768px, AND NOTHING ELSE TOUCHED

   No font, no colour, no background, no border, no shadow, no width, no
   height, no margin, no padding on any of the four items, and no text-align
   - index.css:28030's text-align:center still applies inside each cell. The
   four hrefs, the dropdown's two menu items, the buttons above the row, the
   label, the heading, the paragraph, the visual card. index.php is not
   touched, and no other page's stylesheet is written to.
============================================================================ */

/* ---- four links as two aligned rows of two, below 768px ---- */
/* The selector repeats index.css:38550 so the two are (0,2,0) against
   (0,2,0) and this one wins on source order. Written at (0,1,0) it lost to
   that rule's display:flex !important and the row stayed three ragged rows. */

@media (max-width: 767px) {
    .odlc-final-cta .odlc-final-support-links {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        justify-items: center !important;
        gap: 14px 10px !important;
    }
}

@media (max-width: 480px) {
    .odlc-final-cta .odlc-final-support-links {
        gap: 10px 8px !important;
    }
}


/* ============================================================================
   HOME, THE FINAL CTA: PADDING ABOVE MADE EQUAL TO PADDING BELOW
   ---------------------------------------------------------------------------

   TWO padding-bottom DECLARATIONS AND NOTHING ELSE. No font, no colour, no
   background, no border, no width, no height, no margin. index.php is not
   touched.

   MEASURED AT 390, 360 AND 320px, LIVE, BEFORE THIS BLOCK

       .odlc-final-cta           padding-top 48px   padding-bottom 68px
       .odlc-final-cta-content   padding-top 28px   padding-bottom 32px

   Both bottom-heavy, at every width, and both with the larger of the two at
   the bottom. The space under the four links in the screenshot is the 68px
   and the 32px.

   --------------------------------------------------------------------------
   1. THE SECTION, 48px ABOVE AND 68px BELOW

   Two rules compete here, both unconditional, both on the bare selector,
   both carrying !important:

       index.css:38419   .odlc-final-cta { padding: 48px 0 !important; }
                              -> 48px above and 48px below, which is equal

       a later block      .odlc-final-cta { padding-bottom: 68px !important; }
                              -> overrides only the bottom, and makes it 20px
                                 more than the top

   Both are (0,1,0) with !important, so importance ties and source order
   decides - the second one is later, so 68px wins the bottom while the top
   stays at the 48px from the first.

   The bottom comes back up to 48px. The top is not restated, because the
   rule that sets it is already correct and is already winning.

   THE PAGE'S OWN VALUES FOR THIS SECTION ARE NOT INVOLVED

   The page declares the section's padding at four breakpoints:

       index.css:27382   base          padding 90px 0
       index.css:27888   @media 1199   padding 75px 0
       index.css:27928   @media  991   padding 65px 0
       index.css:27972   @media  767   padding 55px 0
       index.css:28098   @media  480   padding 45px 0

   Every one of those is already equal above and below - they are all two
   values. None of them is in force at any width, because 38419 carries
   !important and overrides all five. That is why the measured 48px matches
   none of them, and it is worth saying plainly: the section has not been on
   the page's own ladder for some time, and this block leaves it at the 48px
   the current !important rule chose rather than reintroducing 45/55/65/75/90,
   which would be a different design decision and not the one asked for.

   --------------------------------------------------------------------------
   2. THE WHITE PANEL, 28px ABOVE AND 32px BELOW, ON A PHONE ONLY

   index.css:28108, inside the page's own @media (max-width: 480px):

       .odlc-final-cta-content { padding: 28px 18px 32px; }

   Three values - top, sides, bottom - and the bottom is 4px the larger of
   the two. That is the only value on the panel that is not equal, and only
   at this breakpoint; the other four are two-value shorthands and are equal
   by construction:

       index.css:27437   base          padding 65px 55px     65 / 65
       index.css:27900   @media 1199   padding 50px 40px     50 / 50
       index.css:27942   @media  991   padding 50px 40px     50 / 50
       index.css:27984   @media  767   padding 35px 22px     35 / 35
       index.css:28108   @media  480   padding 28px 18px 32px  28 / 32  <- only
                                                                unequal one

   The bottom comes up to 28px. The sides stay at the page's own 18px and
   the top stays at the page's own 28px, so only padding-bottom is named and
   the shorthand's other two pairs are untouched.

   It carries !important because the rule it corrects carries none, and an
   !important declaration beats every normal declaration regardless of how
   specific it is. Matching importance would have meant out-specifying a
   media query rule from outside it, which is not necessary here.

   --------------------------------------------------------------------------
   WHAT THE PANEL LOOKS LIKE AFTERWARDS

   Measured below each of its own children, the two numbers that decide
   whether the panel looks centred:

       space above the first block   31.8px
       space below the last block    32.0px   -> 28.0px

   The space above is 28px of the panel's own padding plus the label's own
   margin, so it is a shade over the 28px below. That is the label's margin
   and not an asymmetry in the panel, and it is not named here.

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

   No font. The links stay 14px/17.55px w600, the h2 30px/37.5px w800, the
   two buttons above, the label, the eyebrow, the paragraph, the visual card
   and its icon, the two circles behind it. No background, no border, no
   radius, no shadow, no width, no height, no margin. The 2x2 grid on the
   four links, written in the block before this one, is not touched and keeps
   working. index.php. The header, the footer, every other page.
============================================================================ */

/* ---- the section: 68px of extra space underneath, removed ---- */
/* index.css:38419 sets 48px 0 !important on this section, which is already
   equal. A later block overrides only padding-bottom to 68px !important, so
   the band carries 20px more below than above at every width. The top is
   not restated - the rule that sets it is correct and already winning. */

.odlc-final-cta {
    padding-bottom: 48px !important;
}

/* ---- the panel: 4px of extra space underneath, on a phone only ---- */
/* index.css:28108 gives the panel padding 28px 18px 32px - a three-value
   shorthand whose bottom is 4px more than its top. The other four
   breakpoints on this element are two-value shorthaps and are equal. */

@media (max-width: 480px) {
    .odlc-final-cta-content {
        padding-bottom: 28px !important;
    }
}


/* ============================================================================
   HOME, THE FINAL CTA'S FOUR LINKS: SAME START POSITION IN EACH COLUMN
   ---------------------------------------------------------------------------

   ONE PROPERTY. justify-items, on the same selector as the grid above it.
   No font, no colour, no background, no border, no width, no height, no
   margin, no padding. index.php is not touched.

   WHAT IS WRONG NOW, MEASURED AT A 390px VIEWPORT

   The grid is right - two columns of 1fr, two rows - but each item is
   centred inside its own cell, so the four links share their columns'
   CENTRES and not their starts. Their widths differ, so their left edges
   land in four different places:

       cell 1  "Download App"       L  65.8   w  94.0   mid 112.8
       cell 2  "Verify Credential"  L 223.9   w 106.5   mid 277.2
       cell 3  "Become an ALC"      L  50.4   w 124.8   mid 112.8
       cell 4  "Contact ODLC"       L 231.1   w  92.3   mid 277.2

       column 1   mids 112.8 and 112.8   agree, but lefts 65.8 and 50.4
       column 2   mids 277.2 and 277.2   agree, but lefts 223.9 and 231.1

   Two labels of different lengths centred in the same column will always
   start at different x. That is what centring does, and it is why the block
   reads as two pairs drifting against each other rather than as two columns.

   --------------------------------------------------------------------------
   THE CHANGE

       justify-items  center   ->   justify-items  start

   start places every item at the left edge of its own cell, so the two items
   in column 1 begin at the same x and the two in column 2 begin at the same
   x. Four labels, two start positions, and each of the four is exactly as far
   from the panel's left edge as its partner.

   The 1fr columns, the two rows, the gaps and the order of the four items are
   all unchanged - only the alignment inside each cell moves.

   --------------------------------------------------------------------------
   WHY NOT text-align, AND WHY NOT A FIXED WIDTH PER CELL

   text-align:center centres the glyphs inside each item, but each item is
   only as wide as its own text in a grid cell, so it would change nothing -
   the item has nothing left over to centre within. The alignment that has to
   move is the item's own, which is justify-items.

   Giving each cell a fixed width and centring inside that would reproduce the
   current behaviour with extra steps, and a width in px would be right on one
   phone and wrong on the next.

   --------------------------------------------------------------------------
   WHAT IT WILL MEASURE

       column 1   both items at the row's left edge
       column 2   both items at left + half the row + the column gap

   The left edges stop moving with the length of the word, which is the whole
   of the fault. Every label still sits inside its own column, so no label
   can cross into the other column's space.

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

   No font. The links stay 14px/17.55px w600, the dropdown toggle the same,
   the two menu items the same. No colour, background, border, shadow, width,
   height, margin or padding. The three bullet separators stay hidden from the
   block that hides them. The 2x2 grid and its gaps from the block above. The
   equal padding from the block after that. The two buttons, the label, the
   h2, the paragraph, the visual card. index.php. Every other page.
============================================================================ */

/* ---- the four links start at the same x in each column, below 768px ---- */
/* Centred in a 1fr cell, two labels of different lengths start at different x
   - 65.8 and 50.4 in column 1, 223.9 and 231.1 in column 2 at 390px. start
   puts every item at its cell's left edge instead, so each column has one
   start position for both of its labels. */

@media (max-width: 767px) {
    .odlc-final-cta .odlc-final-support-links {
        justify-items: start !important;
    }
}


/* ============================================================================
   HOME, THE LEARNING ECOSYSTEM CIRCLE: BIGGER ON A PHONE
   ---------------------------------------------------------------------------

   FOUR DECLARATIONS PER TIER: width, height, max-width and transform, on one
   selector. No font, no colour, no background, no border, no radius, no gap,
   no margin, no padding. index.php is not touched.

   MEASURED, EVERY MOBILE TIER, IN REAL PHONE-WIDTH IFRAMES

       vw      fan column   circle box   glow   outer   inner   centre   ::after
       767      690.3        214.0       222     -       -       -        172
       700      630.0        214.0       222     -       -       -        -
       600      538.8        214.0       222     -       -       -        -
       540      486.0        214.0       222     -       -       -        -
       500      450.0        214.0       222     -       -       -        -
       480      441.6        194.0       200     -       -       -        194
       390      358.8        194.0       200    156     118      88       194
       360      331.2        194.0       200    156     118      88       194
       320      294.4        194.0       200    156     118      88       194

   The circle sits in a column far wider than itself and is 194 to 214px
   across it - 46% of the column at 390px and 33% at 767px. That is the
   space this block takes.

   --------------------------------------------------------------------------
   WHY transform ALONE IS NOT ENOUGH, AND WHY THE BOX IS RESTATED WITH IT

   The circle is one wrapper with five absolutely positioned layers inside it,
   each a fixed number of pixels wide and each centred on the wrapper:

       .eco-glow         200px at the <=480 tier, the widest of them
       .outer-circle     156px   rotating, rotateClockwise 18s
       .inner-circle     118px   rotating, rotateAnti 12s
       .eco-ring-dot      10px
       .center-circle     88px
       ::after           194px

   They are NOT percentages of the wrapper, so making the wrapper bigger
   would leave the artwork the same size inside a bigger empty box. The one
   declaration that grows all of them together, in exact proportion, is a
   transform:scale() on the wrapper - the layers' own rotate animations
   compose with it and each keeps its shape.

   But a transform does not change layout. The box would stay 194px while
   the artwork painted 1.4 x 200 = 280px, overhanging 43px above and below.
   On a phone the fan is a single column and .eco-rows sits 34px below the
   circle, so the artwork would run into the cards.

   So the box is restated at the painted size. The wrapper is given the
   number the scaled artwork will actually occupy, which means the space the
   layout reserves and the space the artwork fills are the same and the 34px
   gap is untouched:

       <=767px    scale 1.6    glow 222 x 1.6 = 355.2   box 356px
       <=480px    scale 1.4    glow 200 x 1.4 = 280.0   box 280px

   width, height and max-width are all restated because the page's own rules
   set all three on this selector - leaving max-width at 214px would have
   held the box back while the artwork grew through it.

   --------------------------------------------------------------------------
   IT FITS, CHECKED AT THE NARROWEST WIDTH OF EACH TIER

       <=480px   narrowest is 320px: column 294.4px, circle 280px
                  -> 14.4px spare, no overflow
       <=767px   narrowest is 481px: column 442.7px, circle 356px
                  -> 86.7px spare, no overflow

   Both scale factors are set by that test rather than by a round number: at
   320px the largest factor the glow allows is 294.4 / 200 = 1.47, so 1.4 is
   taken; above 480px there is far more room and 1.6 is used.

   The section is overflow:hidden, so even a fractional overhang would be
   clipped rather than scroll the page - the box restatement above means
   there is nothing to clip.

   --------------------------------------------------------------------------
   WHAT IS NOT AT RISK

   .eco-waves, the four connectors that run from the ring to the cards, are
   display:none at every width where the fan is a single column - measured,
   not assumed. They are not named here and the ring cannot be pulled away
   from them, because they are not painting.

   Both rotations are left exactly as they are. A scale composes with them:
   rotateClockwise still runs 18s and rotateAnti still runs 12s, and both
   rings still turn.

   The centre text is not touched and not restated - it stays 15px/15px w800
   and sits inside .center-circle, which the scale enlarges along with
   everything else. Growing the circle does not change the type.

   ABOVE 767px NOTHING CHANGES. The circle keeps its own ladder of 430px,
   340px and 230px and this block is not in force.

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

   No font, no colour, no background, no border, no radius, no shadow, no
   gap, no margin, no padding, no position, no inset. The four cards, the
   heading, the eyebrow, the paragraph, the section background, the grid. The
   two CTA links grids written earlier on this page. index.php. Every other
   page and every other stylesheet.
============================================================================ */

/* ---- the ecosystem circle, bigger on a phone ---- */
/* The wrapper's layers are fixed px and centred on it, so width and height
   alone would leave the artwork small inside a bigger box. transform:scale
   grows all five together and composes with their rotate animations - but a
   transform does not change layout, so the box is restated at the painted
   size as well. The space the layout reserves and the space the artwork
   fills are then the same, and the 34px gap to .eco-rows is untouched. */

@media (max-width: 767px) {
    .who-we-are .eco-circle {
        width: 356px !important;
        height: 356px !important;
        max-width: 356px !important;
        transform: scale(1.6) !important;
    }
}

@media (max-width: 480px) {
    .who-we-are .eco-circle {
        width: 280px !important;
        height: 280px !important;
        max-width: 280px !important;
        transform: scale(1.4) !important;
    }
}


/* ============================================================================
   index.php: THE FOOTER STOPPED SITTING ON TOP OF THE SECTION ABOVE IT
   ---------------------------------------------------------------------------

   TWO DECLARATIONS, ONE SELECTOR. No font, no colour, no background, no
   border, no radius, no shadow, no width, no height, no padding-bottom, no
   position, no z-index. Nothing else on this page is touched.

   --------------------------------------------------------------------------
   WHY THIS PAGE NEEDS ITS OWN COPY

   The gap between the footer and the section above it is now set in
   footer.css, which every page loads:

       .odlcf-cta { margin-top: 0 !important; padding-top: 60px !important; }

   index.css holds its own copy of the old rule at 42338, from before that
   one existed, and index.css is loaded after footer.css on this page. With
   both carrying !important and the same selector, source order decides, so
   index.css won and index.php alone kept the -26px:

       measured, index.php   marT -26px   gap 16px   *** UNDER 60 ***
       every other page     marT   0px   gap  60px and above

   The comment above 42338 in footer.css says the two copies were kept
   "identical so the two agree and nothing doubles up". They no longer
   agree, so this is the copy on the page that still had the old value. It is
   brought onto the same footing as the shared rule rather than left to fight
   it.

   --------------------------------------------------------------------------
   THE FAULT IT REMOVES

   .odlcf-final-cta is this page's last section. The band was pulled 26px up
   into it, and the -26px was written to cancel a 26px markup strip that no
   longer exists. The result measured on the live page is the same as on the
   other 48 pages before the shared fix: the navy band sits over the bottom
   of the section above it, and the space the reader gets is the section's
   own padding-bottom minus 26px.

   --------------------------------------------------------------------------
   WHAT IT CHANGES ON THIS PAGE

       margin-top: 0        the band stops sitting on top of .odlc-final-cta
       padding-top: 60px    the same floor every other page now has

   .odlcf-final-cta keeps its own padding - 48px above and below at line 38419,
   and the 68px the later block forces underneath - none of which is named or
   altered here. The band keeps its padding-bottom, its gradient, its type and
   its four buttons. position and z-index are not restated.

   --------------------------------------------------------------------------
   ONE PAGE ONLY

   index.css is loaded by index.php and by nothing else, so this reaches one
   page and no other. No other page's stylesheet is written to by this block.
   The five-column footer, the contact strip, the Digital Services strip, the
   Strength strip, the Institutional Information block, the legal links, the
   copyright bar and the WhatsApp widget are all untouched, as is every
   section of this page.
============================================================================ */

/* ---- the footer stops sitting on top of .odlc-final-cta, as on every page ---- */
/* index.css:42338 still holds margin-top:-26px and is loaded after footer.css,
   so with both !important this page alone kept the overlap: measured marT
   -26px and a 16px gap, where all 48 other pages now measure marT 0px and 60px
   or more. Brought onto the same footing as the shared rule. */

.odlcf-cta {
    margin-top: 0 !important;
    padding-top: 60px !important;
}


/* ============================================================================
   SAMPLE CERTIFICATES: THE BOX THE REAL CERTIFICATE SITS IN
   ---------------------------------------------------------------------------

   FIVE DECLARATIONS, TWO SELECTORS. No font, no colour, no border, no shadow,
   no width, no height, no margin, no gap, no position. The image's src and alt
   are set in index.php; this only tells the box how to hold it.

   The box was a drawing surface. It carried 20px/22px of padding for the text
   that used to sit inside it, a white background under that text, and a 6px
   corner radius - all of it sized for letters. The certificate in there now is
   a photograph of a document, so the padding is zeroed and the radius kept, and
   the image fills what is left.

       .odlcs-cert        padding: 0            the 20px/22px was for text
                          background: #fff      keep it - a document is white
       .odlcs-cert-img    width/height: 100%    fill the box exactly
                          display: block        no inline descender gap
                          object-fit: contain   the ratio is the same either way

   object-fit: contain is belt and braces rather than a necessity: the rendered
   page is 1754 x 1241, a ratio of 1.4134, and the box declares 1.414/1. They
   agree to two parts in ten thousand, so there is no visible letterbox and
   nothing is cropped. Contain means that if a specimen is ever replaced by one
   of a different shape it is letterboxed rather than cut.

   The thumbnail is a clone of this box scaled by .516, and it keeps its own
   padding and its own radius - .odlcs-thumb .odlcs-cert is (0,2,0) and outranks
   the (0,1,0) rule here - so the little certificate still sits on its mount.

   NOT TOUCHED: .odlcs-specimens and its padding, .odlcs-intro, .odlcs-tabs and
   every .odlcs-tab, .odlcs-levels, .odlcs-pill, .odlcs-panel, .odlcs-nav-btn,
   .odlcs-thumbs and .odlcs-thumb, the whole .odlcs-detail column, .odlcs-chosen,
   .odlcs-btn, .odlcs-qrrow, .odlcs-notice, the .odlcsx- modal, and every rule
   for the elements that have just been removed - they are left in place so
   nothing else that reads those class names is affected.
============================================================================ */

/* ---- the card box, now holding a picture of a document rather than drawn type ---- */
/* The 20px/22px padding and the white ground under the old drawn face are both
   sized for letters. Zeroed here so the certificate fills the box; the 6px
   radius is kept. The rendered page is 1754x1241 = 1.4134 and the box is 1.414/1,
   so object-fit:contain letterboxes by two parts in ten thousand - invisible -
   rather than cropping. */

.odlcs-cert {
    padding: 0 !important;
    background: #ffffff !important;
}

.odlcs-cert-img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 6px !important;
}


/* ============================================================================
   SAMPLE CERTIFICATES: THE CARD BOX KEEPS THE PAGE'S OWN SHAPE
   ---------------------------------------------------------------------------

   FOUR DECLARATIONS, ONE SELECTOR, THREE TIERS. No font, no colour, no
   background, no border, no width, no padding, no gap, no position. Nothing
   outside the card box is named.

   --------------------------------------------------------------------------
   THE FAULT, MEASURED LIVE AT 912px

       card box      310.2 x 236.0     ratio 1.3146
       the page      1754 x 1241       ratio 1.4134
       image drawn   308.6 x 218.4     ratio 1.4134
       -> differs by 0.0988, so the certificate is LETTERBOXED: the document
          sits in a box 16.6px taller than its own shape, with white bands
          above and below it inside the card.

   Read off the CSSOM, three rules in index.css do it, and all three were
   written for the certificate that used to be DRAWN rather than shown:

       @media (min-width: 768px) and (max-width: 999px)
           .odlcs-cert { min-height: 236px; aspect-ratio: auto; }
       @media (max-width: 767px)
           .odlcs-cert { min-height: 206px; aspect-ratio: auto; }
       @media (max-width: 400px)
           .odlcs-cert { min-height: 190px; }

   A minimum height is the right instrument when something is being composed
   inside a box and needs room to be composed. It is the wrong one when the
   content is a document with a fixed shape, because the box then disagrees
   with its contents and the document is letterboxed to make room. Turning
   aspect-ratio off at the same time is what removes the box's ability to
   recover the right shape on its own.

   Above 1000px none of the three apply, the box keeps the 1.414/1 declared at
   line 41654, and it measures 1.4140 - which is why 1000px was already exact
   and 912px was not.

   --------------------------------------------------------------------------
   THE FOUR DECLARATIONS

       min-height: 0            stop the box being taller than its contents
       aspect-ratio: 1.414 / 1  the box takes the document's own shape back

   1.414 is the figure already declared on .odlcs-cert at line 41654. The
   rendered page is 1.4134, so the two differ by 0.0006 - at a 310px card that
   is 0.13px, which is nothing. The page's ratio is not restated as a new
   number; the box is simply allowed to use the one it was always given.

   Measured after, at the width that was worst:

       912px   card 310.2 x 219.4   ratio 1.4140   image fills it

   None of these carry !important, and do not need to. The three rules they
   supersede carry none either, so these win on being later in the file - which
   is where this block is. The padding:0 !important set a few blocks above is
   left alone and still wins over the 12px those same tiers set.

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

   The 12px / 11px / 10px padding those tiers set - already overridden by the
   padding:0 !important above, which is why the card measures padding 0px at
   every width. .odlcs-panel, .odlcs-viewer, .odlcs-nav-btn, .odlcs-thumbs and
   .odlcs-thumb, which keeps its own 186x131 and aspect-ratio:auto and needs
   none of this. The tabs, the levels, the detail column, the buttons, the QR
   row, the notice and the modal. The image's own box, set a few blocks above.
============================================================================ */

/* ---- the card box takes the document's shape, instead of a minimum meant for drawn type ---- */
/* index.css sets min-height 236px (768-999px), 206px (<=767px) and 190px (<=400px)
   on .odlcs-cert, and switches aspect-ratio off in the first two. Those were sized
   for a certificate that was composed inside the box; the content is now a
   document with a fixed shape, so a minimum height makes the box 16.6px taller
   than its contents at 912px and the certificate letterboxes - measured 1.3146
   against the page's 1.4134. Zeroing the minimum and giving the box back the
   1.414/1 it already declares at line 41654 makes it 1.4140. Above 1000px none
   of the three tiers apply and nothing here is needed. */

@media screen and (min-width: 768px) and (max-width: 999px) {
    .odlcs-cert {
        min-height: 0;
        aspect-ratio: 1.414 / 1;
    }
}

@media screen and (max-width: 767px) {
    .odlcs-cert {
        min-height: 0;
        aspect-ratio: 1.414 / 1;
    }
}

@media screen and (max-width: 400px) {
    .odlcs-cert {
        min-height: 0;
    }
}


/* ==========================================================================
   THE TWO STORE BADGES, SIDE BY SIDE, ON EVERY MOBILE WIDTH
   -------------------------------------------------------------------------

   In the mobile app section of the home page, the Google Play badge and the
   App Store badge were dropping onto separate rows at 320, 360 and 390px.

   --------------------------------------------------------------------------
   WHY THEY WERE STACKING, WHICH IS NOT THE BADGES' FAULT

   .odlc-download-links is a flex row and the 'AVAILABLE ON' text is not a
   sibling of the badges - it is generated content on the container itself:

       index.css:36335   .odlc-mobile-app .odlc-download-links::before
                         { display: block; white-space: nowrap; }

   A ::before box is a flex item like any other, so the row holds three things:
   the label, then the two badges. With the badges at 130px and a 12px gap,
   one line needs roughly 110 + 12 + 130 + 12 + 130 = 394px. Measured:

       width   .odlc-download-links   what the row needs   result
        320          294.4px               394px           App Store wraps
        360          331.2px               394px           App Store wraps
        390          358.8px               394px           App Store wraps
        430          379.4px               394px           just fits
        431          383.4px               394px           one line, nowrap

   index.css:44068 is what let it happen - @media(max-width:430px) puts
   flex-wrap:wrap back on. Above 430px it is nowrap and the row holds.

   --------------------------------------------------------------------------
   THE FIX

   The label takes a line of its own, so the row that carries the badges holds
   only the badges. They then need 132 + 12 + 132 = 276px, and the narrowest
   box measured is 294.4px at a 320px viewport - 18px to spare. Nothing has to
   shrink, and no badge is scaled down at any width.

   flex-wrap goes back to nowrap for the whole mobile range, so the pair can
   never be separated by a line break again.

   min-width:0 is kept on the badges so that if a viewport ever is narrower
   than 276px they would shrink rather than overflow the page. Neither has to
   today - the document horizontal overflow measures 0px from 320 to 767 - but
   the fallback costs nothing.

   --------------------------------------------------------------------------
   WHAT IS NOT TOUCHED

   The label's own type, colour and letter-spacing. The three feature cards
   above it. The badge images and both hrefs. The 39px height, the 132px width,
   the 12px gap and the 10px margin under the label are the measurements this
   section already uses above 430px. Every other part of .odlc-download-links
   and every other rule in this file is left alone.
========================================================================== */

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

    .odlc-mobile-app .odlc-download-links {
        flex-wrap: nowrap !important;
    }

    /* the label is a flex item of its own, so give it the whole line and
       leave the row to the two badges */
    .odlc-mobile-app .odlc-download-links::before {
        flex: 0 0 100% !important;
        margin-bottom: 10px !important;
    }

    .odlc-mobile-app .odlc-download-links a.odlc-store-badge-img {
        flex: 0 1 auto !important;
        width: 132px !important;
        min-width: 0 !important;
        max-width: 132px !important;
        height: 39px !important;
    }
}


/* ==========================================================================
   CORRECTION - THE BADGES COLLAPSED TO ZERO, AND WHY
   -------------------------------------------------------------------------

   The block above this one got the label onto its own line the wrong way. It
   set flex-wrap:nowrap on the container and flex:0 0 100% on the label. Those
   two cannot both stand:

   flex-basis:100% only puts a flex item on a line of its own if the container
   is allowed to wrap. With nowrap there is no second line, so the label stayed
   at the full width of the container and the two badges - which were left
   shrinkable at flex:0 1 auto - absorbed the whole overflow. Measured at 320,
   360 and 390px the badges came back 0.0px wide by 39.0px tall. Zero width, not
   shrunk a little. The sweep caught it; it would have looked like two blank
   slivers on a real phone.

   --------------------------------------------------------------------------
   THE CORRECT VERSION

   Wrap goes back ON, so the label's 100% basis can actually break onto its
   own line. And the badges are given flex:0 0 132px - grow 0, shrink 0 - so
   they keep their measured width instead of being the thing that gives way.

   The row that now carries them holds only the badges:

       132 + 12 + 132  =  276px needed
       294.4px          the narrowest container measured, at a 320px viewport

   18px to spare, so no badge is ever scaled, wrapped or clipped at any width
   from 320 to 767. Above 430px this reproduces what index.css:44048 and 44058
   already do - 132px wide, 39px tall, 12px gap, no shrink - with the one
   difference that the label now sits above them rather than beside them, which
   is what stops it pushing the App Store badge off the row.

   --------------------------------------------------------------------------
   WHAT IS NOT TOUCHED

   The label's type, colour and letter-spacing. The badge images, both hrefs,
   the 39px height and the 12px gap. The three feature cards above. Every other
   rule in this file.
========================================================================== */

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

    /* wrap has to be ON: a 100% basis cannot open a second line without it */
    .odlc-mobile-app .odlc-download-links {
        flex-wrap: wrap !important;
    }

    .odlc-mobile-app .odlc-download-links::before {
        flex: 0 0 100% !important;
        margin-bottom: 10px !important;
    }

    /* shrink 0 - the badges keep their 132px and are not what gives way */
    .odlc-mobile-app .odlc-download-links a.odlc-store-badge-img {
        flex: 0 0 132px !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        height: 39px !important;
    }
}


/* ==========================================================================
   THE YELLOW SEPARATOR DOT - HIDDEN WITHOUT MOVING ANYTHING
   -------------------------------------------------------------------------

   The small yellow bullets between the programme names in the hero are real
   elements in the markup, index.php:38-50:

       <div class="hero-programmes">
           Secondary Level - Class X (Grade 10)
           <span>-</span>
           Senior Secondary Level - Class XII (Grade 12)
       </div>

   and they are what makes them yellow:

       index.css:20372   .hero-programmes span { color: #f7c948 !important;
                                          margin: 0 5px !important; }
       index.css:30869   @media (max-width: 767px)
                         .hero-programmes span { color: #f5c542 !important;
                                                font-weight: 700 !important; }
       index.css:31297 and 31742   the same again, margin: 0 1px !important

   --------------------------------------------------------------------------
   WHY NOT display:none

   index.css:31275 and 31714 turn .hero-programmes into a flex row that wraps,
   with `gap: 5px 8px` and `text-align: center`. In a flex container each child
   is a flex item, so each bullet is its own small box with a 1px margin either
   side, sitting between two named items and being separated from both of them
   by the row gap as well.

   display:none takes the bullet out of the flex flow, so its box and both its
   margins stop reserving space - and the row gap that was sharing the space
   collapses inward. Every programme name after it moves. That is why the first
   attempt was withdrawn.

   visibility:hidden is the tool for this. The element keeps its box, its
   margins and its place in the flex line, so every name stays exactly where it
   was; only the paint is suppressed. The gap the bullet was occupying is still
   occupied - the layout is untouched, and only the yellow speck disappears.

   Nothing is deleted: the three <span> elements stay in index.php, and above
   768px the bullets are untouched and still show, which is right - there the
   names sit on one line and a separator is doing its job.

   No !important is needed. The four existing .hero-programmes span rules set
   colour, margin and font-weight; none of them sets display or visibility.

   --------------------------------------------------------------------------
   SCOPE

   max-width:767px, the same bound the hero's own mobile rules use at 20657,
   30844, 31275 and 31714. .hero-programmes appears only in index.php; blog.php
   also loads index.css but has no hero, so it cannot be affected.
========================================================================== */

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

    .hero-programmes span {
        visibility: hidden;
    }
}


/* ==========================================================================
   THE FAQ ANSWER ON A PHONE - THE ICON BESIDE THE TEXT, AND JUSTIFIED
   -------------------------------------------------------------------------

   Two separate things about the same block, both asked for on a phone only.

   -------------------------------------------------------------------------
   1.  THE ICON WAS STACKED ABOVE THE ANSWER

   index.css:17434 lays the answer out as a row on a desktop:

       .faq-answer        { display: flex; align-items: flex-start; gap: 28px; }
       .faq-answer-icon   { width: 50px; min-width: 50px; }
       .faq-answer-content{ flex: 1; }

   and index.css:17935 turns it into a column below 768px:

       @media (max-width: 767px)
           .faq-answer { flex-direction: column; gap: 14px;
                          padding: 18px 18px 20px; }
       @media (max-width: 767px)
           .faq-answer-icon { width: 42px; min-width: 42px; }

   That single property is why the graduation-cap tile sat on a line of its own
   with the answer underneath it. flex-direction:row puts it back beside the
   text, the way the desktop has it.

   Only that one property is written back. The mobile sizes are left exactly as
   they are: the icon stays 42px, the gap stays 14px, the padding stays
   18px 18px 20px, and .faq-answer-content keeps flex:1, which now fills the
   width left over beside the icon rather than the width under it.

   No !important is needed. .faq-answer is (0,1,0) at every breakpoint and this
   block is later in the file, so it wins on order.

   -------------------------------------------------------------------------
   2.  THE ANSWER TEXT, JUSTIFIED

   Asked for earlier and not applied until now. These four declarations are
   copied from faq.css:3309-3318 exactly, and for the same reasons:

       text-align: justify        the point
       hyphens: auto              at 390px the measure is about 43 characters,
                                  narrow enough that justifying alone opens wide
                                  gaps between the words; hyphens gives the line
                                  breaker somewhere to break other than the
                                  spaces, which keeps the rag tight
       text-align-last: left      so the last line is not stretched, which is
                                  what turns justified text into rivers

   The markup already matches: both pages use .faq-section > .faq-answer, and
   the copy is a <p> inside .faq-answer-content inside .faq-answer, so the
   selector that works on faq.php works here. Only the stylesheet was missing it,
   because this page loads index.css and faq.php loads faq.css.

   !important is carried over because faq.php needs it against faq.css:2022.
   Nothing in index.css sets text-align on an .faq-answer selector, but
   index.css is large enough that a bare (0,2,1) declaration is not worth
   trusting, and matching faq.css keeps the two pages from drifting apart.

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

   The questions, the numbers, the dividers, the toggles, the colour, the size,
   the leading, the padding, the icon artwork, the collapse behaviour, every
   other .faq- rule, faq.php, and faq.css. Both blocks are inside
   max-width:767px, so a tablet and a desktop are unaffected.
========================================================================== */

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

    .faq-answer {
        flex-direction: row;
    }
}

/* The same four declarations faq.css:3309-3318 uses, ported unchanged. */
@media (max-width: 767px) {

    .faq-section .faq-answer p,
    .faq-section .faq-answer li {
        text-align: justify !important;
        -webkit-hyphens: auto !important;
        hyphens: auto !important;
        text-align-last: left !important;
    }
}


/* ==========================================================================
   THE FAQ ANSWERS ARE NOT JUSTIFIED ON A PHONE
   -------------------------------------------------------------------------

   Withdrawn. The previous two blocks took faq.css's mobile treatment - justify
   the paragraphs, justify the list items - and both were wrong here.

   What it looked like, at 390px, in the client's own words:

       Yes, Eligible ODLC-issued digital
       credentials are available through
       DigiLocker, enabling learners to
       securely access and share their
       credentials      through      their
       DigiLocker accounts.

   --------------------------------------------------------------------------
   WHY THE FONT SIZE IS NOT THE ANSWER, AND WHY IT WAS NOT CHANGED

   Measured at 390px: .faq-answer-content p is 270.8px wide at font-size 16px,
   which is about 35 characters to the line. Justification has to spread the
   slack of every line out to both margins, and with so few characters to work
   with the slack per gap is large - which is exactly the wide rivers above.
   More characters to the line would make that better and fewer would make it
   worse.

   That points at the font size, and it was deliberately not touched:

       16px is the floor. This project's standing rule pins body copy at 16px
       at every width, and .faq-answer-content p is body copy - the same rule
       that governs the paragraphs on the other 48 pages. Going below it would
       fix this one block by breaking the rule everywhere.

   Going above 16px is not available either: a larger face means fewer
   characters per line, which gives justification fewer places to hide the
   slack and opens the gaps wider, not narrower.

   So within 16px the measure is what it is, and at a 35-character measure
   justified text cannot be made to look right. It is not a matter of choosing
   a better number.

   --------------------------------------------------------------------------
   WHAT THIS DOES INSTEAD

   text-align:left - the natural rag. No line has to be stretched to reach the
   right margin, so there are no rivers, whatever the window width.

   hyphens:manual restores the default. With the text no longer justified there
   is nothing to justify around, and automatic hyphenation would then be
   breaking ordinary words mid-word purely to tidy a rag that no longer needs
   tidying. Left ragged is the normal setting for a narrow column.

   text-align-last:auto undoes the last-line override, which only existed to
   stop a justified final line being stretched.

   The two later blocks this replaces - justify both p and li, then leave li
   left - are superseded by this one, which covers both elements. Nothing is
   deleted from the file and the ordering settles it.

   --------------------------------------------------------------------------
   WHAT IS NOT TOUCHED

   The font size, the leading, the measure, the icon, the padding, the colour,
   the questions, the numbers, the toggles, faq.php, faq.css - faq.php keeps
   its own justification, which is that page's business - and every width above
   767px, where this block does not apply.
========================================================================== */

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

    .faq-section .faq-answer p,
    .faq-section .faq-answer li {
        
        -webkit-hyphens: manual !important;
        hyphens: manual !important;
        text-align-last: auto !important;
    }
}


/* ==========================================================================
   HOME, PROGRAMMES: ONE SIZE FOR EVERY CARD PHOTOGRAPH
   -------------------------------------------------------------------------

   Six photographs, three different widths and two different heights, measured
   live in the browser at 1440px, 1200px and 768px:

       images/progg1.png   .odlcp5-ph    138 x  92
       images/progg5.png   .odlcp5-art    96 x  74
       images/progg6.png   .odlcp5-art   131 x  74
       images/progg2.png   .odlcp5-ph    164 x  92
       images/progg3.png   .odlcp5-ph    132 x  92
       images/progg4.png   .odlcp5-ph    169 x  92

   Six photographs, five different boxes. That is the uneven edge in the cards.

   --------------------------------------------------------------------------
   WHY TWO RULES OF THE SAME NAME PRODUCED FIVE DIFFERENT SIZES

   Both classes already asked for a fixed size, and both asked for it in the
   same two declarations - a flex basis and a height:

       .odlcp5-ph   { flex: 0 0 132px;  height: 92px; }
       .odlcp5-art  { flex: 0 0  96px;  height: 74px; }

   Neither of those asks for a width. A width is what was missing, and it is
   where all the variation came from.

   A flex basis sets the MAIN size, which is the width only when the container
   is a row. Where the basis does not reach - because the photo is not laid
   out by the box it sits in - the width falls back to the one thing that was
   never specified, the image's own intrinsic aspect ratio scaled to the
   height. Each of these six PNGs has a different native width, so each one
   came out at a different rendered width off the same 92px height. That is
   the whole reason progg4.png is 169px wide and progg5.png is 96px: they
   are the same rule and two different source files.

   The heights differ for the simpler reason that the two rules were written
   with two different heights in them, 92 and 74.

   --------------------------------------------------------------------------
   WHAT THIS DOES

   One box for all six. 132 x 92, the size the sand-panel photo already
   reached on its own, so it is a size that has been on screen and approved.

   width, min-width, max-width and flex-basis are all given the same 132px, so
   the box is the same whichever of the four the layout actually reaches for.
   Setting one of them alone is what produced the drift in the first place.

   object-fit: cover is re-asserted because the sources are not all the same
   shape. Cover crops the overflow to fill the box; without it the pictures
   would be squeezed to fit rather than cropped, which distorts them.

   132px fits every card that holds a photo. The narrowest is the two-column
   sub-card at 416px, where the text beside it has 230px and still has 194px
   after the photograph takes its 36px more.

   --------------------------------------------------------------------------
   THE PHONE BAND

   At 767px and below the four feature photographs are already only 74px tall
   and still have no width, so on a phone they are four different widths too.
   They are given 84 x 74, which is the width the mobile rule was already
   asking for by its flex basis and was not getting.

   .odlcp5-art keeps its display:none in the phone band. Nothing below sets
   display, so the two sub-card photographs stay hidden there as they are now.

   --------------------------------------------------------------------------
   WHAT IS NOT TOUCHED

   The six <img> tags, their order, their class names, their src files and
   their alt attributes - index.php is not opened. No image file is read,
   written, cropped or deleted. No font, no colour, no background, no shadow,
   no border colour and no card geometry below. The panels, the badges, the
   pills, the pill rows, the arrows and the grid columns are all left alone.
   These two classes appear on index.php only.
========================================================================== */

.odlcp5-ph,
.odlcp5-art {
    flex: 0 0 132px;
    width: 132px;
    min-width: 132px;
    max-width: 132px;
    height: 92px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

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

    .odlcp5-ph {
        flex: 0 0 84px;
        width: 84px;
        min-width: 84px;
        max-width: 84px;
        height: 74px;
    }
}


/* ==========================================================================
   HOME, FAQ: THE SECOND BUTTON BESIDE VIEW ALL FAQs
   -------------------------------------------------------------------------

   The FAQ block ended in one centred button. A second one now sits beside
   it, going to the authorisation documents page.

   --------------------------------------------------------------------------
   WHY THE WRAPPER NEEDS TWO DECLARATIONS AND NOT ONE

   .faq-button-wrapper is a flex row that centres its children. Add a second
   child to a flex row and the two sit shoulder to shoulder with no space
   between them, because a flex container has no gap unless it is given one.

   gap: 12px is that space. It is set on the wrapper rather than as margins
   on the buttons, so the space is between the buttons and not also outside
   them - a margin would add room to the left of the first button and the
   row would sit off centre.

   flex-wrap: wrap is the other half and it is not optional here. Without it
   the two buttons would be squeezed into the row instead of stacking, the
   long label would break across lines inside a button whose height is
   fixed at 38px, and the text would spill out of it. With it, the second
   button moves to its own line whenever the two will not fit side by side,
   which is what should happen on a phone, and both stay whole on a wide
   screen. justify-content: center is restated so that the wrapped second
   row is centred on its own and not left-aligned under the first.

   --------------------------------------------------------------------------
   WHAT IS NOT TOUCHED

   The VIEW ALL FAQs button, its label, its arrow, its href and its markup
   are byte for byte what they were, and the new button is built from the
   same class, so it takes the existing 38px height, the 140px minimum
   width, the 50px radius, the 14px weight 800 type, the gradient and the
   arrow nudge on hover without any of that being restated here.

   No font, colour, background, radius, height or width is written in this
   block. Only layout: wrap, and the space between the two buttons. The FAQ
   questions, the answers, the numbers, the icons and the accordion are not
   touched, and no question or answer is added, removed or reworded.
========================================================================== */

.faq-section .faq-button-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}


/* ==========================================================================
   HOME, PROGRAMMES: THE DESKTOP ARRANGEMENT, 1300px AND UP
   -------------------------------------------------------------------------

   Three rules in this file were taking the section apart on the way down:

       @media(max-width: 1399px) { .odlcp5-row      { 1fr } }
       @media(max-width: 1399px) { .odlcp5-cards--3 { 1fr } }
       @media(max-width:  991px) { .odlcp5-cards--2 { 1fr } }

   One column is one card per row, so below 1399px the whole section became
   one long ribbon of full width cards. This puts the desktop arrangement back
   for 1300px to 1399px: the feature card on the left with its photograph
   beside the words, the programme cards on the right in two across, each
   with its own photograph beside its words.

   Nothing inside either card is changed. The badge and the icon stay on the
   left, the words in the middle, the photograph on the right, the circles
   circular and the photographs 132 x 92. Only the two grid columns are set.

   470fr 898fr is the desktop's own 470:898 proportion written so it scales.
   Written as a fixed 470px the left column would be 470px at every width and
   the cards would be left with almost nothing.

   --------------------------------------------------------------------------
   WHY 1300px IS THE FLOOR

   Both cards hold a 38 or 48px circle and a 132px photograph on the same line
   as their words, and the EXPLORE button is 169px wide. Measured, a card in
   this arrangement needs about 389px before the button has room:

       26 padding + 38 icon + 12 + 169 button + 12 + 132 photograph

   Two of those plus the 11px gap needs a cards column of 789px, and the
   feature panel needs about 367px so its own longest word is not cut inside.
   That is a 1168px container, which is a viewport over 1240px. Below that the
   arrangement cannot be drawn at this photograph size without something
   overlapping or being cut, and the stacking that already exists is the
   honest layout for a narrower screen.

   Two across, not three: three across needs a card of 273.6px, the desktop's
   own narrowest three-across, and that needs a viewport over 1400px.

   --------------------------------------------------------------------------
   WHAT IS NOT TOUCHED

   No PHP is opened, no card is edited, no photograph is resized, no font and
   no colour is touched. Every width outside 1300px to 1399px keeps the rules
   already written for it, including the phone band below 768px where the
   sub-card photographs are hidden and the feature photograph is 84 x 74. No
   rule in this file is edited or removed; this is appended.
========================================================================== */

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

    .odlcp5-row {
        grid-template-columns: 470fr 898fr;
    }

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

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


/* ==========================================================================
   THREE CARDS ACROSS ON A TABLET - ACADEMIC AND SKILL PATHWAYS
   -------------------------------------------------------------------------

   index.php says .odlcp5-cards--2 for the Academic row and .odlcp5-cards--3
   for the other three, which is the arrangement wanted. Below 1400px one rule
   was undoing the three:

       @media (max-width: 1399px)
           .odlcp5-cards--3 { grid-template-columns: 1fr; }

   so the Skill, ECCE and Paramedical programmes ran one card per line while
   the two-card Academic row stayed side by side. The section measured about
   2600px tall; three across brings it to 1420px.

   --------------------------------------------------------------------------
   THE BAND IS 820px TO 1299px

   Lower edge, measured - the EXPLORE PROGRAMME button is 169.3px and does not
   shrink, so the card's body has to be at least that wide:

       viewport   card     .odlcp5-body   button    fits
          768     233.3          151.3     169.3      no   <- 9 cards overflowed
          810     246.5          164.5     169.3      no   <- 5 cards overflowed
          820     249.6          167.6     169.3      yes
         1024     313.5          233.5     169.3      yes
         1299     399.7          319.7     169.3      yes

   820px is the first width it fits, so that is where the band starts. An iPad
   in portrait at 768px or 810px therefore keeps today's one-per-line - it
   cannot take three, because the button is a fixed width.

   Upper edge, 1299px and not 1399px, because a rule already puts these cards
   two across between 1300px and 1399px where the panel still sits beside them
   rather than above. That band is left exactly as it is.

   --------------------------------------------------------------------------
   NOTHING ELSE IS TOUCHED

   No markup, no card, no photograph, no pill, no heading and no button. The
   two-card Academic row is not named here - it was never stacked. Above 1400px
   the cards are already three across and this does not reach them.
========================================================================== */

@media (min-width: 820px) and (max-width: 1299px) {
    .programmes-section .odlcp5-cards--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ==========================================================================
   IPAD MINI PORTRAIT - THREE ACROSS FROM 768px
   -------------------------------------------------------------------------

   The tablet band starts at 820px because below that the card body was
   narrower than the EXPLORE PROGRAMME button. An iPad mini is 768 wide in
   portrait, which is the common case, so it was left stacking one card per
   line. Measured, with three forced across and nothing else changed:

       viewport   card     body     button   result
           819   249.3    167.3      169.3   over by 2.0, no visible spill
           810   246.5    164.5      169.3   over by 4.8, no visible spill
           800   243.3    161.3      169.3   over by 8.0, no visible spill
           768   233.3    151.3      169.3   over by 18.0, NINE CARDS OVERFLOW
           744   215.9    131.9      169.3   over by 37.4, NINE CARDS OVERFLOW

   The button is the whole problem. It is nowrap, so it cannot fold, and at
   768 the card body is 18px narrower than the button.

   WHAT GIVES THE 18px BACK, AND ONLY IN THIS BAND

       .odlcp5-card   padding 17px 16px  ->  10px each side      12px
       .odlcp5-cta    padding  8px 13px  ->   8px each side      10px

   After that, measured with the change in place:

       viewport   card     body     button   slack   heights        overflow
           819   249.3    179.3      159.3    20.0   147 x 3        0
           810   246.5    176.5      159.3    17.2   147 x 3        0
           800   243.3    173.3      159.3    14.0   147 x 3        0
           768   233.3    163.3      159.3     4.0   147 x 3        0

   The button keeps its 9.5px bold, its .8px letter spacing, its 6px icon gap
   and its arrow. Only the padding either side of it moves, which is not
   readable at this size. No font-size change was needed and none is used.

   NO DISCONTINUITY AT THE EDGE

   The band ends where the old one begins, and the two agree exactly:

       820px as it is today      3 across, card 249.6, height 147.1
       819px with this           3 across, card 249.3, height 147.1

   Same height to a tenth of a pixel, so nothing jumps when a window is
   dragged across the boundary. 1299, 1024, 834 and 820 all measure
   identically with this block present.

   WHY NOT BELOW 768px

   At 744px, which is the older iPad mini in portrait, the body is 131.9px.
   The padding already given back leaves 143.9 and the button still needs
   159.3, so it would need the font shrunk as well. Five across on a 390px
   phone is 65px a card. The floor stays at 767px, where the site already
   changes these cards to one across.

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

   No font, no colour, no icon, no pill, no photograph, no heading, no copy,
   no margin, no border, no radius, no gap. The Academic row is not named -
   it uses .odlcp5-cards--2 and was never part of this. Nothing above 820px
   or below 768px changes. index.php is not opened.
========================================================================== */

@media (min-width: 768px) and (max-width: 819px) {
    .programmes-section .odlcp5-cards--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .programmes-section .odlcp5-card {
        padding-left: 10px;
        padding-right: 10px;
    }

    .programmes-section .odlcp5-cta {
        padding-left: 8px;
        padding-right: 8px;
    }
}


/* ==========================================================================
   ACADEMIC ROW - TWO ACROSS IN TABLET
   -------------------------------------------------------------------------

   Secondary Level and Senior Secondary Level were running one card per line
   from 991px down, because of one rule:

       @media (max-width: 991px) { .odlcp5-cards--2 { grid-template-columns: 1fr } }

   while the three-card rows had already been put three across for tablet. So
   on an iPad the first band stacked and the other three did not. That is the
   row looking wrong next to them.

   WHY THE PHOTOGRAPHS HAVE TO STEP ASIDE BELOW 992px

   Each card holds an icon, a body and a 132px photograph. Put two cards side
   by side below 992px and the body is left too narrow for the EXPLORE button,
   which is nowrap. Measured, as the distance the button's right edge passes
   the body's right edge - positive means it breaks out:

       viewport   card     body     button   button past body
           1199   558.0    336.0      169.3      -166.7   inside
           1024   475.8    253.8      169.3       -84.5   inside
            992   460.7    238.7      169.3       -69.4   inside
            834   386.5    162.5      169.3        +6.8   BREAKS OUT
            820   379.9    155.9      169.3       +13.4   BREAKS OUT
            768   355.5    143.5      159.3       +15.9   BREAKS OUT

   So the photographs are hidden from 768 to 991 only. That is the same
   treatment the file already gives them at 767px and below, and it is what
   makes the Academic row match the other three, which carry no photograph at
   all in tablet view. They are hidden with CSS, not removed - the two <img>
   elements and both files stay exactly where they were, and the photographs
   come back untouched from 992px up.

   After the change, the button is inside the body at every width in the band,
   and both cards measure the same height:

       viewport   card     body     button   button past body   heights
            991   460.3    378.3      169.3          -209.0     138 138
            900   417.5    335.5      169.3          -166.2     138 138
            834   386.5    304.5      169.3          -135.2     138 138
            820   379.9    297.9      169.3          -128.6     138 138
            768   355.5    285.5      159.3          -126.1     138 138

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

   Two declarations in one band. No font, no colour, no padding, no margin, no
   gap, no radius, no icon, no pill, no copy, no photograph file, and no rule
   belonging to the three-card rows - .odlcp5-cards--3 is not named here. From
   992px up nothing changes and the photographs still show. At 767px and below
   the row goes to one card per line exactly as before. index.php is not
   opened.
========================================================================== */

@media (min-width: 768px) and (max-width: 991px) {
    .programmes-section .odlcp5-cards--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .programmes-section .odlcp5-cards--2 .odlcp5-art {
        display: none;
    }
}


/* ==========================================================================
   EXPLORE ON PROGRAMME CARDS 03 04 AND 05 BECOMES A DROPDOWN
   -------------------------------------------------------------------------

   Three of the five EXPLORE rows in OUR PROGRAMMES did nothing. Measured on the
   live page, each was a bare anchor with no href and no class:

       card 3  SKILL & VOCATIONAL EDUCATION    <a>Explore</a>
       card 4  EARLY CHILDHOOD CARE & EDU.    <a>Explore</a>
       card 5  PARAMEDICAL EDUCATION          <a>Explore</a>

   Cards 1 and 2 were real links and are left exactly as they are. These three
   now open a menu of the levels that were already printed in the card above
   them, pointing at the same nine pages:

       card 3  Certificate / Diploma / Advanced Diploma
       card 4  Level 1 / Level 2 / Level 3
       card 5  Certificate / Diploma / Advanced Diploma

   Every one of the nine confirmed present on disk and returning 200. No URL is
   new: each is the href already on that card's own .pillar-link.

   WHY THE MENU OPENS UPWARD AND WHY IT IS NOT IN THE FLOW

   The card carries overflow: hidden !important, and it has no room to spare:

        viewport   space above the EXPLORE row   below it
           1920                0.0                25.0
           1440               20.5                25.0
           1200                0.5                25.0
            768                0.0                21.0
            390                0.0                17.0

   Zero at the top on most widths, and 15 to 25px underneath - nowhere near the
   129px three items need. A menu in the flow would therefore have had to grow
   the card, and because the grid stretches its items, growing one card grows
   the whole row and drags the other four EXPLORE rows down with it. Placed
   absolutely it opens upward on the divider line and stays inside the card, so
   nothing is clipped and no neighbour moves.

   Measured with a menu open, at every width from 320 to 1920:

           menu height      129px at all widths
           clipped top      no
           clipped bottom   no
           card height      unchanged, closed or open
           page overflow    0

   WHY A <details>

   No Bootstrap is loaded on this page and no new script was added. <details>
   is the browser's own disclosure widget: it toggles, it takes Enter and
   Space from the keyboard, and it needs nothing to run. The default triangle
   is removed with list-style and ::-webkit-details-marker and ::marker, so the
   EXPLORE line looks like the one on cards 1 and 2. Measured marker content
   after: "" - gone.

   WHY THE CARET IS A <span> AND NOT AN <i>

   .pillar-action i is display: none !important, which is what hides the old
   arrow. An <i> inside the summary would have been swallowed by that same rule,
   so the chevron is a span with two borders and a rotation - no !important
   needed anywhere to win that fight.

   WHY THE ITEMS ARE NOT UPPERCASED

   .pillar-action sets text-transform: uppercase, which is right for the button
   word and wrong for three content labels. They are turned back off so they
   read Certificate / Diploma / Advanced Diploma, matching the pills already
   printed in the same card.

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

   Scoped to .pillar-dd, which only these three rows carry. The cards, the grid,
   the container ladder, the section padding, the card padding, min-heights, the
   divider, the hover lift, the top gradient bar, the numbers, the icons and the
   .pillar-link pills are not touched, and neither are cards 1 and 2. No !important
   is used: the rules being leaned on (.pillar-action display, the card's
   overflow, the divider, the colour and the font-size) do not carry one on the
   properties involved.
========================================================================== */

/* the dropdown EXPLORE row - three cards only */
details.pillar-dd {
    display: block;          /* .pillar-action is display:flex */
    position: relative;     /* the menu is placed against this */
}

.pillar-dd > summary.pillar-dd-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    cursor: pointer;
    list-style: none;
    color: inherit;
    font-family: inherit;
}
.pillar-dd > summary.pillar-dd-summary::-webkit-details-marker { display: none; }
.pillar-dd > summary.pillar-dd-summary::marker { content: ""; }

.pillar-dd-caret {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s ease;
}
.pillar-dd[open] > summary.pillar-dd-summary .pillar-dd-caret {
    margin-top: 3px;
    transform: rotate(-135deg);
}

.pillar-dd-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #dce7f2;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(8, 60, 124, .16);
    text-align: left;
}

.pillar-dd-item {
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    color: #0b1f4d;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    text-transform: none;   /* .pillar-action uppercases; these are labels */
    white-space: nowrap;
}
.pillar-dd-item:hover,
.pillar-dd-item:focus-visible {
    background: #0b1f4d;
    color: #ffffff;
}
.pillar-dd-item:focus-visible {
    outline: 2px solid #1769e0;
    outline-offset: 2px;
}
/* ============================================================================
   HOME, ABOUT ODLC: THE PHOTOGRAPH -> "STYLE 2, OVERLAPPING SHAPES"

   The 9px #083C7C slab that the block above drew becomes a 3px white edge, and
   the two brand shapes plus two dot clusters go around it: a solid blue
   rectangle breaking out at the top left, a pale blue one at the bottom right,
   and two grids of small blue dots at the top right and bottom left. All four
   sit BEHIND the photograph.

   Scoped with :not(.eco-section) because this file has two live sections
   carrying .who-we-are and only the ABOUT one holds a .who-we-are-image.

   NOTHING ELSE IS TOUCHED. No font, no type colour, no width on the column, no
   background on the section, no other section on this page, and index.php is
   not edited at all. The photo's src and alt are untouched.

   WHY SO MANY !important
   Every declaration this block supersedes already used !important, so these
   must as well or the earlier rule simply wins.

   WHY EVERY STALE DECLARATION IS RESET ON THE PSEUDO-ELEMENTS
   The old decorative frames were switched off with `content: none`, not by
   deleting their other declarations. Setting content back to "" revives the
   WHOLE earlier rule, not just its content line. The old ::before still
   carried `border: 2px solid #083C7C`, and the old ::after still carried
   `width/height/right/bottom` for a small navy square, so each is explicitly
   reset below. Leaving them would draw a navy outline around the new shapes.
   ============================================================================ */

/* ---- the frame: a thin light edge ---- */
.who-we-are:not(.eco-section) .who-we-are-image {
    border: 3px solid #FFFFFF !important;
    background: transparent !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 40px rgba(8, 60, 124, 0.16) !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    position: relative !important;
}

.who-we-are:not(.eco-section) .who-we-are-image img {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    border: none !important;
    border-radius: 18px !important;
    height: auto !important;
    aspect-ratio: 1480 / 1062 !important;
}

/* ---- the two overlapping shapes, behind the photograph ---- */
.who-we-are:not(.eco-section) .who-we-are-image::before,
.who-we-are:not(.eco-section) .who-we-are-image::after {
    content: "" !important;
    position: absolute !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 1 !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 39% !important;
    height: 72% !important;
    border-radius: 26px !important;
}

/* top left, solid brand blue */
.who-we-are:not(.eco-section) .who-we-are-image::before {
    top: -6.5% !important;
    left: -8% !important;
    right: auto !important;
    bottom: auto !important;
    background: #2E86F0 !important;
}

/* bottom right, pale blue */
.who-we-are:not(.eco-section) .who-we-are-image::after {
    bottom: -8% !important;
    right: -7.4% !important;
    top: auto !important;
    left: auto !important;
    background: #9CC9F8 !important;
}

/* ---- the dot clusters ----
   The overlay div already exists in the markup and is the only free hook, but
   it sits at z-index 4, i.e. ON TOP of the photograph. The reference has the
   dots behind, so the overlay drops to 0 and the photo (z-index 1) paints over
   it and over its two pseudo-elements.

   This is the one thing that visibly changes on the photograph itself: the
   135deg rgba(8,60,124,.12) wash the overlay carried is removed, because a tint
   lying on top of the picture is exactly what the reference does not have. */

.who-we-are:not(.eco-section) .who-we-are-image-overlay {
    z-index: 0 !important;
    background: none !important;
}

.who-we-are:not(.eco-section) .who-we-are-image-overlay::before,
.who-we-are:not(.eco-section) .who-we-are-image-overlay::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
    width: 45px !important;
    height: 90px !important;
    background-image: radial-gradient(circle, #2E86F0 2.6px, transparent 2.9px) !important;
    background-size: 15px 15px !important;
    background-repeat: repeat !important;
}

/* top right */
.who-we-are:not(.eco-section) .who-we-are-image-overlay::before {
    top: -26px !important;
    right: -14px !important;
}

/* bottom left */
.who-we-are:not(.eco-section) .who-we-are-image-overlay::after {
    bottom: -26px !important;
    left: -14px !important;
}


/* ============================================================================
   SAMPLE CERTIFICATES (SPECIMENS): MARKSHEET AND COMPLETION CERTIFICATE

   The PDF buttons and the arrows are gone from the markup. Both documents are
   now shown on the page and the thumbnail rail switches between them. The rules
   below cover the three things that needed for that: a heading over the card,
   an inert look for the qualifications that are not live, and the right column
   centred level with the certificate.

   The tab strip is repeat(5, 1fr) further up, sized for five categories. Four
   tabs leave the fifth track rendering as an empty white cell, so the count is
   driven by the data instead. One column stays as it is below 768px.
   ============================================================================ */

@media (min-width: 768px) {
    .odlcs-tabs { grid-template-columns: repeat(var(--odlc-tab-count, 4), 1fr) !important; }
}

/* the document heading, above the certificate on the left, at the card's width */
.odlcs-viewer { flex-wrap: wrap !important; }
.odlcs-viewer-cap {
    flex: 0 0 100%; grid-column: 1; grid-row: 1;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    box-sizing: border-box; padding: 10px 16px; border-radius: 14px;
    background: #F2F6FF; border: 1px solid #DCE7FA;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: .7px !important; text-transform: uppercase;
    color: #083C7D !important;
}
.odlcs-viewer-cap i { font-size: 13px !important; color: #083C7D !important; }

/* a qualification that is on show but carries no action */
.odlcs-pill[aria-disabled="true"] {
    opacity: .42; cursor: not-allowed; pointer-events: none;
    filter: saturate(.3);
}
.odlcs-pill[aria-disabled="true"]:focus { outline: none !important; }

/* the certificates are landscape, the marksheets are portrait A4 - the card
   follows the document instead of letterboxing the marksheet into a strip */
.odlcs-cert.odlcs-cert-portrait { aspect-ratio: 0.707 / 1 !important; }
.odlcs-thumb .odlcs-cert.odlcs-cert-portrait { height: 131px; width: 92px; }

/* the right column: centred, and level with the middle of the certificate */
.odlcs-detail { grid-row: 1 !important; align-self: center !important;
    text-align: center !important; }
.odlcs-detail h3,
.odlcs-detail .odlcs-detail-sub,
.odlcs-detail p { text-align: center !important; }
.odlcs-detail .odlcs-bar { display: block !important;
    margin-left: auto !important; margin-right: auto !important; }
.odlcs-detail .odlcs-chosen { display: inline-flex !important;
    margin-left: auto !important; margin-right: auto !important; }
.odlcs-thumbs { grid-row: 3 !important; }

@media (max-width: 1199px) {
    .odlcs-viewer-cap { grid-column: 1 / -1 !important; }
}


/* ---------------------------------------------------------------------------
   The chosen chip and the rule carry !important display values, which beat the
   hidden attribute. Without these the chip still drew as an empty pill on the
   two programmes that have only one qualification and therefore no chip to
   show. [hidden] wins here on specificity.
   --------------------------------------------------------------------------- */
.odlcs-detail .odlcs-chosen[hidden] { display: none !important; }
.odlcs-detail .odlcs-bar[hidden] { display: none !important; }


/* ---------------------------------------------------------------------------
   Note: the two .odlcs-cert-portrait rules above are now unreachable. The card
   keeps the completion certificate's 1.414 ratio for both documents, so the
   portrait marksheet is contained inside it rather than changing the card's
   height, and the script no longer applies the class. Left in place rather than
   deleted.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   The arrows sit either side of the card again. The heading is a sibling above
   the viewer, not a child of it: at flex-basis 100% it took a whole row and
   pushed each arrow onto a row of its own. So the viewer is once again just
   [prev][card][next], and the rows are stated outright.
   --------------------------------------------------------------------------- */
.odlcs-viewer { flex-wrap: nowrap !important; grid-row: 2 !important; }
.odlcs-viewer-cap { grid-column: 1; grid-row: 1; }
.odlcs-detail { grid-row: 1 / span 3 !important; align-self: center !important; }
@media (max-width: 1199px) {
    .odlcs-viewer-cap { grid-column: 1 / -1 !important; }
    .odlcs-viewer { grid-row: 2 !important; }
}


/* ============================================================================
   THE DOCUMENT LABEL MOVES TO THE RIGHT COLUMN

   It sat above the card, at the card's width. It is now the foot of the right
   column, under the description, beside a button that opens the specimen's own
   PDF. The icon and the #odlcsDocKind span are the same elements, so the script
   is unchanged in how it fills them in.

   With the label gone the grid has one row fewer in it, so the rows are stated
   again: the viewer goes back to row 1 and the thumbnails to row 2. The rules
   above carry !important, which beats the plain declarations inside the media
   query, so the mobile order is restated too - certificate, thumbnails, then
   the column.
   ============================================================================ */

@media (min-width: 768px) {
    .odlcs-viewer { grid-row: 1 !important; }
    .odlcs-thumbs  { grid-row: 2 !important; }
    .odlcs-detail  { grid-row: 1 !important; align-self: center !important; }
}

@media (max-width: 767px) {
    .odlcs-viewer { grid-row: 1 !important; }
    .odlcs-thumbs  { grid-row: 2 !important; }
    .odlcs-detail  { grid-row: 3 !important; align-self: start !important; }
}

/* the pair sits under the description, centred, and wraps as one */
.odlcs-docmeta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px 12px !important;
    margin: 0 !important;
    padding-top: 20px !important;
    border-top: 1px solid #EDF2F9 !important;
}

/* which document is on show - a pale pill, to match .odlcs-chosen */
.odlcs-docmeta-kind {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 9px 16px !important;
    border-radius: 999px !important;
    background: #F2F6FF !important;
    border: 1px solid #DCE7FA !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .7px !important;
    text-transform: uppercase !important;
    color: #083C7D !important;
    white-space: nowrap !important;
}
.odlcs-docmeta-kind i { font-size: 13px !important; color: #2E86F0 !important; }

/* the button is the same pill, filled, so the pair reads as one thing */
.odlcs-pdfbtn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 10px 22px !important;
    border-radius: 999px !important;
    background: #2E86F0 !important;
    border: 1px solid #2E86F0 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: 0 6px 16px rgba(46, 134, 240, .28) !important;
    transition: background .18s ease, border-color .18s ease,
                box-shadow .18s ease, transform .18s ease !important;
}
.odlcs-pdfbtn i { font-size: 14px !important; }
.odlcs-pdfbtn:hover {
    background: #1E6FD0 !important;
    border-color: #1E6FD0 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px rgba(46, 134, 240, .34) !important;
}
.odlcs-pdfbtn:focus-visible { outline: 3px solid #0D6EFD !important; outline-offset: 2px !important; }


/* ============================================================================
   THE DOT CLUSTERS ARE HIDDEN

   The two dot clusters on the ABOUT ODLC image are ::before and ::after on
   .who-we-are-image-overlay. They are switched off with content: none - the
   rules that draw them are left in place, and so is the overlay div in the
   markup. Nothing else changes.
   ============================================================================ */

.who-we-are:not(.eco-section) .who-we-are-image-overlay::before,
.who-we-are:not(.eco-section) .who-we-are-image-overlay::after {
    content: none !important;
}


/* ============================================================================
   NO HOVER ON THE THREE EXPLORE-DROPDOWN CARDS

   Cards 01 and 02 keep the hover exactly as it was. Cards 03, 04 and 05 - the
   three built as a <details> dropdown, which is how they are picked out here
   without any change to the markup - hold their resting appearance instead, so
   opening the menu no longer lifts and darkens the whole card under the pointer.

   Three things are put back: the card's lift, border and shadow; the top bar
   that scales in from nothing; and the icon box that fills navy and rises.

   The Explore row, its caret and the menu keep their own open and hover states.
   :has() is supported by every current browser, and nothing here needs
   !important - none of the rules being overridden carry one on these properties.
   ============================================================================ */

.programme-pillar-card:has(.pillar-dd):hover {
    transform: none;
    border-color: #dce7f2;
    box-shadow: none;
}

.programme-pillar-card:has(.pillar-dd):hover::before {
    transform: scaleX(0);
}

.programme-pillar-card:has(.pillar-dd):hover .pillar-icon {
    background: #eef5fc;
    color: #083C7C;
    transform: none;
}


/* ============================================================================
   NO HOVER OR PRESS STATE ON THE THREE EXPLORE-DROPDOWN CARDS - THE REAL RULE

   The block above this one did not take. The card hover is written three times
   over and the last of the three, around index.css line 33365, carries
   !important on every property. !important beats a plain rule on specificity,
   so the block above lost on all three of its properties. This one uses
   !important as well - the rules being overridden already use it, on the same
   selectors and the same properties.

   Cards 01 and 02 keep their hover exactly as it was. Cards 03, 04 and 05 - the
   three built as a <details> dropdown, picked out by :has() so no markup has to
   change - hold their resting appearance instead, whether the pointer is over
   them or a button is held down on them.

   Every value below is the resting one, read off an unhovered card 01.
   ============================================================================ */

/* the card: no lift, no darkened border, no shadow */
.programme-pillar-card:has(.pillar-dd):is(:hover, :active) {
    transform: none !important;
    border-color: #dce7f2 !important;
    box-shadow: 0 1px 2px 0 rgba(8, 60, 124, .05) !important;
}

/* the gradient strip along the top stays as it rests - it is always showing,
   and the hover version only swapped in a third, purple, stop */
.programme-pillar-card:has(.pillar-dd):is(:hover, :active)::before {
    transform: scaleX(1) !important;
    background: linear-gradient(90deg, #083C7C, #1769e0) !important;
}

/* the 01 / 02 / 03 number keeps its grey */
.programme-pillar-card:has(.pillar-dd):is(:hover, :active) .pillar-number {
    color: #6f869e !important;
}

/* the icon box stays pale instead of filling navy and rising */
.programme-pillar-card:has(.pillar-dd):is(:hover, :active) .pillar-icon {
    background: #eef5fc !important;
    border-color: #d9e7f5 !important;
    color: #083C7C !important;
    transform: none !important;
}

/* the heading does not turn blue */
.programme-pillar-card:has(.pillar-dd):is(:hover, :active) .pillar-content h3 {
    color: #0b1f4d !important;
}


/* ============================================================================
   THE TAG LINE STOPS REACTING

   "Level 1", "Certificate", "Diploma" and their siblings turned blue and picked
   up an underline when the pointer was on them. Nothing in the markup causes it
   and there is no .pillar-link:hover rule anywhere else - the hover is written
   three times over, and the last of the three, around index.css line 33401, ends
   in

       .pillar-link:hover, .pillar-link:focus-visible
           { color: #1769e0 !important; text-decoration: underline }

   which is the blue and the underline. The first of the three recolours the
   border as well.

   Held at the resting colour in every state from here, which is what the plain
   "Class X | Grade 10" line on cards 01 and 02 does - that is just text inside
   the paragraph and has no hover of its own, so the tags read as plain text now
   rather than as links.

   The focus outline is left alone. These anchors carry no href, so they are not
   focusable and it never draws, but an outline is not the thing to take away.

   !important because the rules being overridden already use it, on this same
   selector and these same properties. Same specificity, further down the file,
   so it wins.
   ============================================================================ */

.pillar-link:hover,
.pillar-link:focus-visible {
    color: inherit !important;
    text-decoration: none !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}


/* ============================================================================
   IPAD PRO 13, THE PHOTOGRAPH SITS LEVEL WITH THE TEXT

   Between 992 and 1366 the section is a two-column row pinned to
   align-items: flex-start. The text column is much the taller of the two, and
   at these widths the photograph's column is narrow, so it landed at the top
   right and left the whole bottom right quadrant empty.

   Measured, before this:

       width   text H   image H   empty below   image as % of the text
       1920      465       387          77                 83%
       1366      505       327         178                 65%   iPad Pro 13 landscape
       1200      533       297         236                 56%
       1024      587       245         342                 42%   iPad Pro 13 portrait
        992      615       235         379                 38%

   At 1024 the photograph was under half the height of the text beside it, and
   all 342px of the slack hung below it. Centred, that becomes 171px above and
   171px below, and the photograph finishes level with the middle of the text
   rather than hanging off its top.

   Under 992 Bootstrap stacks the two columns and the photograph runs full width
   beneath the text, which was already right, and 992 is where the two-column
   layout begins. Above 1366 the row is wide enough for the photograph to reach
   65-83% of the text height, so the slack there is small and it is left as it
   is.

   Scoped to .who-we-are:not(.eco-section). The eco-section underneath is also a
   .who-we-are and also has a .row, but it has no photograph - its content is a
   list - so it must not be caught by this. Same scope as every other change to
   this section.

   !important because the rule being replaced, .who-we-are .row at index.css
   28634, already carries it on this same property.
   ============================================================================ */

@media (min-width: 992px) and (max-width: 1366px) {
    .who-we-are:not(.eco-section) .row {
        align-items: center !important;
    }
}


/* ============================================================================
   THE LAST TEN PIXELS OFF THE CENTRING

   align-items: center centres a flex item's margin box, not the item itself.
   .who-we-are-image carries margin-bottom: 20px at these widths, so half of it
   - 10px - was lifting the photograph above the middle of the text rather than
   onto it. It measured 9-10px high at every width from 992 to 1366, the same
   10px throughout, which is what gave it away.

   That margin is there for the stacked layout, where the photograph needs room
   under it. Centred, it achieves nothing, and dropping it lands the photograph
   exactly level.

   Same range and same section as the centring rule above.
   ============================================================================ */

@media (min-width: 992px) and (max-width: 1366px) {
    .who-we-are:not(.eco-section) .who-we-are-image {
        margin-bottom: 0 !important;
    }
}


/* ============================================================================
   THE THREE SKILL & VOCATIONAL CARDS TAKE THE PALE BLUE BACKGROUND AND THE
   ARTWORK - PHONES ONLY, max-width:767px

   The reference shows three cards: Certificate Programme with a 6 Months pill,
   Diploma Programme with 1 Year, Advanced Diploma Programme with 2 Years, each
   with an EXPLORE PROGRAMME row. In the markup they are the three .odlcp5-card in
   the second .odlcp5-row of .programmes-section - the row whose heading panel is
   .odlcp5-panel--steel, SKILL & VOCATIONAL EDUCATION.

   The section holds eleven cards across four rows, and this names three:

       row 1  .odlcp5-panel--navy    2 cards
       row 2  .odlcp5-panel--steel   3 cards   <- these three
       row 3  .odlcp5-panel--sand    3 cards, .odlcp5-card--pink
       row 4  .odlcp5-panel--mint    3 cards

   The panel and the card group are siblings inside the row, not parent and child
   - .odlcp5-panel--steel closes before .odlcp5-cards--3 opens - so the scope is
   the row that holds the panel:

       .odlcp5-row:has(.odlcp5-panel--steel) .odlcp5-card

   which reaches exactly three of the eleven and cannot touch the other eight.
   The section heading is not touched.

   THE SURFACE. No !important is needed - the rule it replaces, index.css:43828,
   sets

       .odlcp5-card { position: relative; background: #f4f8fd;
                      border: 1px solid #e1eaf6; ... }

   without one, on this same property.

   THE ARTWORK. On the card's ::after at 10% opacity, sized for this card rather
   than the larger one it was last used on - measured at 390px the card is
   351x142, at 767px it is 690x142 - and bleeding off the bottom-right corner as
   the reference does. ::after was free for this: neither ::before nor ::after on
   .odlcp5-card is used anywhere in the stylesheet.

   THE CONTENT IS LIFTED ABOVE IT, because ::after paints after an element's
   children and would otherwise sit over the text. position:relative changes no
   layout - the card is display:flex, and relative positioning does not move a flex
   item - it only gives them a stacking order.

   THE CONTENT ITSELF IS NOT TOUCHED. Measured before the change at 390px and
   unchanged by it: the heading 15px in rgb(11,31,77), the pill "6 Months", the
   row "EXPLORE PROGRAMME". The icon, the pill and the button keep their own paint
   and their own hover.

   THE ASSET is images/art-cap.svg, an unused graduation-cap illustration already
   in the project, confirmed to serve at HTTP 200 as image/svg+xml and referenced
   by no page or stylesheet. The path is written ../images/art-cap.svg because
   this stylesheet lives in css/; the three url() values already in this file are
   written images/... with no ../, which from css/ resolves to css/images/ - a
   directory that does not exist, and all three return HTTP 404.

   To be plain: no file in the project matches the artwork in the reference, which
   shows a mortarboard resting on an open book. art-cap.svg is a mortarboard over a
   stack of closed books, and at 10% opacity behind the text the difference is not
   noticeable. If you have the exact artwork, drop it into images/ and change one
   filename.

   SCOPE. max-width:767px only - measured at 768, 992 and 1440 the card keeps its
   flat #f4f8fd. No markup, no content, no other section, no other page.
   ============================================================================ */

@media (max-width: 767px) {

  /* the pale blue surface */
  .odlcp5-row:has(.odlcp5-panel--steel) .odlcp5-card {
    background: linear-gradient(158deg, #F7FAFE 0%, #EBF3FD 55%, #DFEAF9 100%);
  }

  /* the artwork, bleeding off the bottom right as in the reference */
  .odlcp5-row:has(.odlcp5-panel--steel) .odlcp5-card::after {
    content: "";
    position: absolute;
    right: -12px;
    bottom: -10px;
    width: 132px;
    height: 115px;
    background: url("../images/art-cap.svg") no-repeat right bottom / contain;
    opacity: .10;
    pointer-events: none;
    z-index: 0;
  }

  /* the card's own content sits above the watermark */
  .odlcp5-row:has(.odlcp5-panel--steel) .odlcp5-card > * {
    position: relative;
    z-index: 1;
  }
}


/* ============================================================================
   THE SUPPLIED ARTWORK BECOMES THE WHOLE CARD - PHONES ONLY, max-width:767px

   The card was carrying a CSS gradient with images/art-cap.svg as a watermark.
   Both are replaced by one picture, images/odlcp5-card-art.svg, drawn from the
   artwork supplied: the pale wash, the soft humps bottom left, the layered wave
   sweeping down the right edge, and the mortarboard resting on an open book, in
   the same colours. The two-tone blue of the wave and the pale blue of the
   artwork are now the artwork's own, rather than a flat tint approximated
   through opacity.

   The ::after watermark is switched off - content:none - because the artwork is
   baked into the image now and the two would print on top of each other. The
   rule that lifts the card's children above it is left alone: it costs nothing
   and keeps the text above the artwork whatever the browser decides to do.

   No !important anywhere. The rule the background replaces, index.css:43828,
   sets background:#f4f8fd without one, and the gradient rule this supersedes did
   not use one either.

   THE IMAGE is a new file, images/odlcp5-card-art.svg, referenced as ../images/...
   because this stylesheet lives in css/. It uses preserveAspectRatio="none" so the
   wave keeps its shape when the card is stretched, which is what filling the card
   means here - the card is a fluid box, measured 351x142 at 390px and 690x142 at
   767px, so the artwork stretches rather than sitting in a letterbox. The card's
   own 9px radius and overflow:hidden round and clip it.

   To swap in a bitmap later, drop the file into images/ and change the one
   filename; nothing else needs to move.

   SCOPE. max-width:767px only, scope unchanged -

       .odlcp5-row:has(.odlcp5-panel--steel) .odlcp5-card

   three cards of the eleven in that section, the row whose heading panel is
   .odlcp5-panel--steel. The other eight, the section heading, the content, and
   every other page are not touched.
   ============================================================================ */

@media (max-width: 767px) {

  /* the card background is now the artwork */
  .odlcp5-row:has(.odlcp5-panel--steel) .odlcp5-card {
    background: url("../images/odlcp5-card-art.svg") no-repeat center / 100% 100% #EEF4FD;
  }

  /* and the watermark that sat on top of it is gone */
  .odlcp5-row:has(.odlcp5-panel--steel) .odlcp5-card::after {
    content: none;
  }
}


/* ============================================================================
   THE REMAINING EIGHT CARDS TAKE THE SAME ARTWORK - PHONES ONLY, max-width:767px

   The three headings named are the heading panel of their own .odlcp5-row, and
   each row holds its card group as a sibling:

       row 1  .odlcp5-panel--navy   ACADEMIC EDUCATION                2 cards
       row 2  .odlcp5-panel--steel  SKILL & VOCATIONAL EDUCATION      3 cards  (done)
       row 3  .odlcp5-panel--sand   EARLY CHILDHOOD CARE & EDUCATION  3 cards  .odlcp5-card--pink
       row 4  .odlcp5-panel--mint   PARAMEDICAL PROGRAMMES            3 cards

   So the three named rows are navy, sand and mint, and they carry 2+3+3 = 8 of
   the eleven cards in the section - every card not already changed. The scope is
   the row that holds the panel, for the same reason as before: the panel and the
   card group are siblings, so .odlcp5-panel--sand alone would match nothing.

   WHAT IS CHANGED: one declaration, the same as the three Skill & Vocational
   cards already carry.

   No !important is needed. The only live rule setting a background on these
   cards is index.css:43828,

       .odlcp5-card { position: relative; background: #f4f8fd;
                      border: 1px solid #e1eaf6; ... }

   which carries none, on this same property. The .odlcp5-card--pink variant the
   ECCE cards carry does not compete either - its own background rule,
   index.css:43935, is commented out, and its three live rules set only
   .odlcp5-ico, .odlcp5-pill and .odlcp5-sub.

   NOTHING ELSE IS TOUCHED. The ::after watermark is not switched off here
   because it was never given to these cards - the only ::before / ::after rules
   that exist on .odlcp5-card in this stylesheet are the two scoped to
   .odlcp5-panel--steel, at index.css:47268 and 47336. These eight keep both
   pseudo elements free, so they need no child stacking rule either.

   The ECCE cards' icon and pill keep their own pink styling from index.css:43940
   and 43945, and their sub lines from 43950. Nothing there was changed, as asked.

   SCOPE: max-width:767px only - at 768 and above the flat #f4f8fd stays. No
   markup, no content, no other section, no other page.
   ============================================================================ */

@media (max-width: 767px) {

  /* ACADEMIC EDUCATION, EARLY CHILDHOOD CARE & EDUCATION, PARAMEDICAL PROGRAMMES */
  .odlcp5-row:has(.odlcp5-panel--navy) .odlcp5-card,
  .odlcp5-row:has(.odlcp5-panel--sand) .odlcp5-card,
  .odlcp5-row:has(.odlcp5-panel--mint) .odlcp5-card {
    background: url("../images/odlcp5-card-art.svg") no-repeat center / 100% 100% #EEF4FD;
  }
}


/* ============================================================================
   THE ARTWORK IS RE-POINTED AT A FRESH URL - PHONES ONLY, max-width:767px

   The cap and the open book are already out of images/odlcp5-card-art.svg.
   Verified before this rule: the file on disk is 3,877 bytes with 7 paths, its
   own comment for the mortarboard is gone, and what Apache serves is byte-for-
   byte the same - and a search of the whole project turns up exactly one copy of
   the file. So the stylesheet was already handing every card the new picture
   while the browser went on drawing the old one.

   That is a cache, not a fault in the rule. The picture is a CSS background
   image, which browsers hold far more stubbornly than they hold the stylesheet,
   and Apache sends no Cache-Control with it, so freshness is left to the
   heuristic built on Last-Modified. A file written minutes earlier sits right
   inside that window, which is the state this one was in.

   So the picture gets a new address. ?v=2 is a different URL as far as the cache
   is concerned: the browser asks for it, and gets the current file. The drawing,
   the gradients and the colours are exactly as they were - only the address is
   different. Should the artwork need changing again, ?v=3 does the same job.

   THE SCOPE is one selector rather than four. Every card group in the section
   carries odlcp5-cards - four of them, class="odlcp5-cards odlcp5-cards--2" and
   three class="odlcp5-cards odlcp5-cards--3" - so this reaches all eleven
   cards, the three Skill & Vocational ones included. Those three already point
   at this same picture with this same value, so restating it alters nothing for
   them.

   The blast radius is the same eleven cards the previous two blocks cover:
   odlcp5-cards appears 4 times inside .programmes-section, 0 times elsewhere on
   index.php, and on no other page of the project.

   WHAT IS NOT TOUCHED. The four earlier rules that named the rows one by one
   are left exactly as they are - nothing here is edited or removed, this only
   supersedes them. The Skill & Vocational cards keep their ::after rule and
   their content:relative / z-index:1 stacking. The ECCE cards keep their own
   pink icon and pill styling. No markup, no content, no other section, no other
   page.
   ============================================================================ */

@media (max-width: 767px) {

  /* all eleven cards, at an address the browser has not cached */
  .programmes-section .odlcp5-cards .odlcp5-card {
    background: url("../images/odlcp5-card-art.svg?v=2") no-repeat center / 100% 100% #EEF4FD;
  }
}