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

:root {

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

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

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

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

    --white: #ffffff;

    --muted: #899abd;

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

     --section-max-width: 1500px;

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

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

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

}


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

html,
body {

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

    color: var(--text-primary);

    font-size: 16px;

    line-height: 1.6;

}


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

p {

    font-size: 16px;

    line-height: 1.7;

    font-weight: 400;

}


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

.section-title,
.programmes-title {

    font-size: 52px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1.2px;

}


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

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

    font-size: 46px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;

}


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

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

    font-size: 54px;

    line-height: 1.1;

    font-weight: 800;

}


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

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

    font-size: 18px;

    line-height: 1.7;

    font-weight: 400;

    color: var(--text-body);

}


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

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

    font-size: 14px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: .5px;

}


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

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

    font-weight: 700;

}


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

.feature-card h4 {

    font-size: 19px;

    line-height: 1.3;

}


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

.feature-card p {

    font-size: 14px;

    line-height: 1.55;

}


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

.impact-subtitle {

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .7px;

}

.impact-title {

    font-size: 30px;

    line-height: 1.25;

}

.impact-item h3 {

    font-size: 28px;

    line-height: 1.1;

    font-weight: 800;

}

.impact-item p {

    font-size: 14px;

    line-height: 1.4;

}


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

.info-content h5 {

    font-size: 18px;

    line-height: 1.3;

    font-weight: 700;

}

.info-content p {

    font-size: 13px;

    line-height: 1.5;

}


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

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

    font-size: 17px;

    line-height: 1.35;

    font-weight: 700;

}

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

    font-size: 13px;

    line-height: 1.55;

}


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

.program-count-card h3 {

    font-size: 26px;

    line-height: 1.2;

    font-weight: 800;

}

.program-count-card p {

    font-size: 14px;

    line-height: 1.5;

}


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

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

    font-size: 46px;

    line-height: 1.15;

    font-weight: 800;

}

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

    font-size: 17px;

    line-height: 1.35;

    font-weight: 700;

}

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

    font-size: 14px;

    line-height: 1.55;

}


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

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

    font-size: 46px;

    line-height: 1.15;

    font-weight: 800;

}

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

    font-size: 30px;

    line-height: 1.1;

    font-weight: 800;

}

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

    font-size: 13px;

    line-height: 1.4;

    font-weight: 500;

}


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

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

    font-size: 46px;

    line-height: 1.15;

    font-weight: 800;

}

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

    font-size: 16px;

    line-height: 1.65;

}


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

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

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

}

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

    font-size: 13px;

    line-height: 1.45;

}


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

.review-card h5 {

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

}

.review-card small {

    font-size: 12px;

}

.review-card p {

    font-size: 14px;

    line-height: 1.65;

}

.review-card a {

    font-size: 13px;

    font-weight: 600;

}


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

.blog-card h4 {

    font-size: 18px;

    line-height: 1.4;

    font-weight: 700;

}

.blog-card p {

    font-size: 14px;

    line-height: 1.6;

}

.blog-category {

    font-size: 12px;

    font-weight: 600;

}

.blog-footer a {

    font-size: 13px;

    font-weight: 600;

}

.date-box h4 {

    font-size: 18px;

    line-height: 1;

}

.date-box span {

    font-size: 11px;

}


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

.faq-section h2 {

    font-size: 46px;

    line-height: 1.15;

    font-weight: 800;

}

.faq-question,
.accordion-button {

    font-size: 16px;

    line-height: 1.4;

    font-weight: 600;

}

.faq-answer,
.accordion-body {

    font-size: 14px;

    line-height: 1.65;

}


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

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

    font-size: 14px;

    line-height: 1.2;

    font-weight: 600;

}


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

.navbar-nav .nav-link {

    font-size: 14px;

    font-weight: 600;

}

.navbar-brand {

    font-size: 18px;

    font-weight: 700;

}


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

footer h4,
footer h5 {

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

}

footer p,
footer li,
footer a {

    font-size: 13px;

    line-height: 1.6;

}

footer .footer-title {

    font-size: 17px;

    font-weight: 700;

}


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

@media (max-width: 1199px) {

    .section-title,
    .programmes-title {

        font-size: 46px;

    }

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

        font-size: 42px;

    }

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

        font-size: 48px;

    }

    .section-desc,
    .programmes-description {

        font-size: 17px;

    }

    .feature-card h4 {

        font-size: 18px;

    }

    .feature-card p {

        font-size: 13px;

    }

    .blog-card h4 {

        font-size: 17px;

    }

}


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

@media (max-width: 991px) {

    body {

        font-size: 15px;

    }

    p {

        font-size: 15px;

        line-height: 1.65;

    }


    /* Main headings */

    .section-title,
    .programmes-title {

        font-size: 40px;

        line-height: 1.15;

    }


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

        font-size: 38px;

    }


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

        font-size: 42px;

    }


    /* Description */

    .section-desc,
    .programmes-description {

        font-size: 16px;

        line-height: 1.7;

    }


    /* Badge */

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

        font-size: 13px;

    }


    /* Cards */

    .feature-card h4 {

        font-size: 17px;

    }

    .feature-card p {

        font-size: 13px;

    }

    .impact-title {

        font-size: 26px;

    }

    .impact-item h3 {

        font-size: 25px;

    }

    .impact-item p {

        font-size: 13px;

    }

    .blog-card h4 {

        font-size: 17px;

    }

    .blog-card p {

        font-size: 13px;

    }

    .review-card p {

        font-size: 13px;

    }


    /* FAQ */

    .faq-question,
    .accordion-button {

        font-size: 15px;

    }

    .faq-answer,
    .accordion-body {

        font-size: 13px;

    }


    /* Buttons */

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

        font-size: 13px;

    }

}


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

@media (max-width: 767px) {

    body {

        font-size: 15px;

    }

    p {

        font-size: 14px;

        line-height: 1.65;

    }


    /* Main section headings */

    .section-title,
    .programmes-title {

        font-size: 32px;

        line-height: 1.18;

        letter-spacing: -.5px;

    }


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

        font-size: 32px;

        line-height: 1.2;

    }


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

        font-size: 34px;

        line-height: 1.15;

    }


    /* Description */

    .section-desc,
    .programmes-description {

        font-size: 15px;

        line-height: 1.65;

    }


    /* Badges */

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

        font-size: 12px;

    }


    /* Feature cards */

    .feature-card h4 {

        font-size: 16px;

    }

    .feature-card p {

        font-size: 12px;

        line-height: 1.5;

    }


    /* Impact */

    .impact-title {

        font-size: 24px;

    }

    .impact-item h3 {

        font-size: 23px;

    }

    .impact-item p {

        font-size: 12px;

    }


    /* Programme cards */

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

        font-size: 16px;

    }

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

        font-size: 12px;

    }


    /* Testimonials */

    .review-card h5 {

        font-size: 15px;

    }

    .review-card small {

        font-size: 11px;

    }

    .review-card p {

        font-size: 13px;

        line-height: 1.6;

    }


    /* Blogs */

    .blog-card h4 {

        font-size: 16px;

    }

    .blog-card p {

        font-size: 13px;

    }


    /* FAQ */

    .faq-question,
    .accordion-button {

        font-size: 14px;

    }

    .faq-answer,
    .accordion-body {

        font-size: 13px;

    }


    /* Buttons */

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

        font-size: 13px;

    }


    /* Footer */

    footer h4,
    footer h5 {

        font-size: 15px;

    }

    footer p,
    footer li,
    footer a {

        font-size: 12px;

    }

}


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

@media (max-width: 575px) {

    body {

        font-size: 14px;

    }


    p {

        font-size: 14px;

        line-height: 1.65;

    }


    /* Main headings */

    .section-title,
    .programmes-title {

        font-size: 29px;

        line-height: 1.2;

    }


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

        font-size: 29px;

        line-height: 1.2;

    }


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

        font-size: 30px;

    }


    /* Description */

    .section-desc,
    .programmes-description {

        font-size: 14px;

        line-height: 1.65;

    }


    /* Badge */

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

        font-size: 11px;

    }


    /* Cards */

    .feature-card h4 {

        font-size: 15px;

    }

    .feature-card p {

        font-size: 12px;

    }


    .impact-title {

        font-size: 22px;

    }

    .impact-item h3 {

        font-size: 21px;

    }

    .impact-item p {

        font-size: 11px;

    }


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

        font-size: 15px;

    }

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

        font-size: 12px;

    }


    /* Blog */

    .blog-card h4 {

        font-size: 15px;

    }

    .blog-card p {

        font-size: 12px;

    }


    /* Testimonials */

    .review-card h5 {

        font-size: 14px;

    }

    .review-card p {

        font-size: 12px;

    }


    /* FAQ */

    .faq-question,
    .accordion-button {

        font-size: 13px;

    }

    .faq-answer,
    .accordion-body {

        font-size: 12px;

    }


    /* Buttons */

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

        font-size: 12px;

    }


    /* Footer */

    footer h4,
    footer h5 {

        font-size: 14px;

    }

    footer p,
    footer li,
    footer a {

        font-size: 11px;

    }

}

.section-container {

    width: 100%;

    max-width: 1320px;

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

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

    box-sizing: border-box;

}

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

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

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


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

@media (max-width: 1399px) {

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

}


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

@media (max-width: 991px) {

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

}


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

@media (max-width: 767px) {

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

} 


/* =========================================================
   SECONDARY LEVEL – CLASS X
   HERO / BANNER
========================================================= */

.secondary-banner {
    width: 100%;
    min-height: 455px;

    position: relative;
    overflow: hidden;

    background: #062d5c;

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


/* =========================================================
   MAIN BANNER
========================================================= */

.secondary-banner-inner {
    width: 100%;
    min-height: 455px;

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
}


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

.secondary-banner-content {
    width: 52%;

    position: relative;
    z-index: 5;

    padding: 65px 40px 65px 7%;

    color: #ffffff;
}


/* =========================================================
   LABEL
========================================================= */

.secondary-banner-label {
    display: inline-flex;

    align-items: center;
    gap: 9px;

    padding: 9px 18px;

    margin-bottom: 25px;

    border-radius: 30px;

    background: rgba(83, 119, 205, 0.35);

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

    color: #ffffff;

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

    letter-spacing: 0.5px;
}

.secondary-banner-label i {
    font-size: 13px;
}


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

.secondary-banner-content h1 {
    margin: 0;

    max-width: 600px;

    color: #ffffff;

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

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -1.5px;
}

.secondary-banner-content h1 span {
    color: #a9c7ff;
}


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

.secondary-banner-line {
    width: 36px;
    height: 3px;

    margin: 24px 0 20px;

    background: #ffffff;

    border-radius: 10px;
}


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

.secondary-banner-content p {
    max-width: 480px;

    margin: 0;

    color: #e5edfb;

    font-size: 16px;

    line-height: 1.75;

    text-align: left;
}


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

.secondary-banner-image {
    width: 58%;
    right: 0;

    clip-path: ellipse(70% 90% at 72% 50%);
}

.secondary-banner-image::before {
    left: -32%;
    width: 58%;
}


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

.secondary-image-circle {
    width: 100%;
    height: 100%;

    position: relative;

    overflow: hidden;

    border-left: none;

    background: #dce9fa;
}


.secondary-image-circle img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: transform 0.7s ease;
}


/* =========================================================
   DARK BLUE CURVE
========================================================= */

.secondary-banner-image::before {
    content: "";

    position: absolute;

    top: -10%;
    left: -28%;

    width: 55%;
    height: 120%;

    z-index: 3;

    border-radius: 50%;

    background: #062d5c;
}


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

.secondary-dots {
    position: absolute;

    top: 20px;
    left: 28px;

    width: 75px;
    height: 75px;

    z-index: 6;

    background-image:
        radial-gradient(
            circle,
            rgba(155, 190, 255, 0.75) 1.5px,
            transparent 1.5px
        );

    background-size: 12px 12px;

    opacity: 0.55;
}


/* =========================================================
   DECORATIVE RINGS
========================================================= */

.secondary-ring {
    position: absolute;

    z-index: 4;

    border: 1px solid rgba(155, 190, 255, 0.28);

    border-radius: 50%;

    pointer-events: none;
}

.secondary-ring-top {
    width: 125px;
    height: 125px;

    top: -45px;
    left: 47%;
}

.secondary-ring-top::before,
.secondary-ring-top::after {
    content: "";

    position: absolute;

    border: 1px solid rgba(155, 190, 255, 0.22);

    border-radius: 50%;
}

.secondary-ring-top::before {
    inset: 15px;
}

.secondary-ring-top::after {
    inset: 30px;
}


/* =========================================================
   BOTTOM RING
========================================================= */

.secondary-ring-bottom {
    width: 150px;
    height: 150px;

    bottom: -80px;
    left: -70px;

    border: 3px solid rgba(155, 190, 255, 0.75);
}

.secondary-ring-bottom::before {
    content: "";

    position: absolute;

    inset: 15px;

    border: 1px solid rgba(155, 190, 255, 0.25);

    border-radius: 50%;
}


/* =========================================================
   RESPONSIVE - LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

    .secondary-banner,
    .secondary-banner-inner {
        min-height: 430px;
    }

    .secondary-banner-content {
        padding-left: 6%;
    }

    .secondary-banner-content h1 {
        font-size: 50px;
    }

    .secondary-banner-content p {
        max-width: 430px;
        font-size: 14px;
    }

}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 991px) {

    .secondary-banner,
    .secondary-banner-inner {
        min-height: 390px;
    }

    .secondary-banner-content {
        width: 55%;

        padding: 50px 25px 50px 5%;
    }

    .secondary-banner-content h1 {
        font-size: 42px;
    }

    .secondary-banner-label {
        margin-bottom: 18px;

        padding: 8px 15px;

        font-size: 10px;
    }

    .secondary-banner-line {
        margin: 18px 0 15px;
    }

    .secondary-banner-content p {
        max-width: 360px;

        font-size: 12px;

        line-height: 1.65;
    }

    .secondary-banner-image {
        width: 57%;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 767px) {

    .secondary-banner {
        min-height: auto;

        background: #062d5c;
    }

    .secondary-banner-inner {
        min-height: auto;

        display: flex;

        flex-direction: column;

        align-items: stretch;
    }


    /* IMAGE */

    .secondary-banner-image {
        position: relative;

        top: auto;
        right: auto;

        order: 1;

        width: 100%;
        height: 260px;

        clip-path: none;
    }

    .secondary-image-circle {
        border-left: none;

        border-bottom: 6px solid #a9c7ff;
    }

    .secondary-banner-image::before {
        display: none;
    }


    /* CONTENT */

    .secondary-banner-content {
        order: 2;

        width: 100%;

        padding: 38px 25px 50px;
    }

    .secondary-banner-content h1 {
        font-size: 34px;

        line-height: 1.12;

        letter-spacing: -0.5px;
    }

    .secondary-banner-content p {
        max-width: 100%;

        font-size: 13px;
    }


    /* LABEL */

    .secondary-banner-label {
        margin-bottom: 17px;

        padding: 8px 14px;

        font-size: 10px;
    }


    /* DECORATIONS */

    .secondary-dots {
        top: 15px;
        left: 18px;

        width: 55px;
        height: 55px;

        background-size: 9px 9px;
    }

    .secondary-ring-top {
        top: 15px;
        right: 20px;
        left: auto;

        width: 85px;
        height: 85px;
    }

    .secondary-ring-bottom {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .secondary-banner-image {
        height: 220px;
    }

    .secondary-banner-content {
        padding: 32px 20px 42px;
    }

    .secondary-banner-content h1 {
        font-size: 29px;
    }

    .secondary-banner-content p {
        font-size: 12px;

        line-height: 1.7;
    }

    .secondary-banner-line {
        width: 30px;
        height: 3px;

        margin: 16px 0;
    }

}


/* =========================================================
   PROGRAM OVERVIEW SECTION
========================================================= */

.program-overview-section {
    width: 100%;

    padding: 70px 0;

    background: #f5f8fd;

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

    overflow: hidden;
}


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

.program-overview-container {
    width: calc(100% - 80px);
    max-width: 1440px;

    min-height: 470px;

    margin: 0 auto;

    position: relative;

    display: grid;

    grid-template-columns: 48% 52%;

    align-items: center;

    padding: 55px 50px;

    background: #ffffff;

    border: 1px solid #e2eaf6;

    border-radius: 20px;

    box-shadow: 0 8px 30px rgba(8, 60, 124, 0.06);
}


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

.overview-image-area {
    position: relative;

    min-height: 360px;

    display: flex;

    align-items: center;

    justify-content: center;
}


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

.overview-image-card {
    width: 88%;
    height: 255px;

    position: relative;

    z-index: 3;

    overflow: hidden;

    border-radius: 20px;

    box-shadow: 0 12px 28px rgba(8, 60, 124, 0.14);
}

.overview-image-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: transform 0.5s ease;
}

.overview-image-card:hover img {
    transform: scale(1.04);
}


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

.overview-floating-icon {
    width: 58px;
    height: 58px;

    position: absolute;

    top: 18px;
    right: 7%;

    z-index: 5;

    display: flex;

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

    border-radius: 14px;

    background: #3e43d8;

    color: #ffffff;

    font-size: 25px;

    box-shadow: 0 8px 20px rgba(62, 67, 216, 0.25);
}


/* =========================================================
   DECORATIVE BLOCKS
========================================================= */

.overview-shape {
    position: absolute;

    border-radius: 10px;

    background: #e8edff;

    z-index: 1;
}

.overview-shape-one {
    width: 120px;
    height: 120px;

    left: 2%;
    bottom: 45px;
}

.overview-shape-two {
    width: 20px;
    height: 20px;

    left: 0;
    bottom: 35px;

    background: #0b5ca8;

    border-radius: 4px;
}


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

.overview-dots {
    position: absolute;

    width: 100px;
    height: 75px;

    background-image:
        radial-gradient(
            circle,
            #b9cdf4 2px,
            transparent 2px
        );

    background-size: 22px 22px;

    opacity: 0.8;

    z-index: 1;
}

.overview-dots-top {
    top: 0;
    left: 20px;
}

.overview-dots-bottom {
    right: 8%;
    bottom: 20px;

    width: 90px;
    height: 60px;
}


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

.overview-content {
    position: relative;

    z-index: 4;

    padding: 15px 20px 15px 25px;
}


/* =========================================================
   LABEL
========================================================= */

.overview-label {
    display: inline-block;

    margin-bottom: 12px;

    color: #4047d8;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.6px;
}

.overview-label::before {
    content: "";

    display: inline-block;

    width: 34px;
    height: 3px;

    margin-right: 10px;

    vertical-align: middle;

    border-radius: 5px;

    background: #4047d8;
}


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

.overview-content h2 {
    margin: 0;

    /* color: #082d63; */

    font-size: 38px;

    line-height: 1.15;

    font-weight: 700;
}


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

.overview-line {
    width: 42px;
    height: 4px;

    margin: 20px 0 20px;

    border-radius: 5px;

    background: #4047d8;
}


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

.overview-content p {
    max-width: 650px;

    margin: 0 0 22px;

    color: #263b5c;

    font-size: 15px;

    line-height: 1.7;

    text-align: left;
}

.overview-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   DECORATIVE CORNER
========================================================= */

/* .program-overview-container::after {
    content: "";

    position: absolute;

    right: -70px;
    bottom: -80px;

    width: 180px;
    height: 180px;

    border: 2px solid #e0e8f8;

    border-radius: 50%;

    box-shadow:
        0 0 0 15px #f6f8fd,
        0 0 0 16px #e0e8f8;

    z-index: 0;
} */


/* =========================================================
   LARGE SCREEN
========================================================= */

@media (max-width: 1200px) {

    .program-overview-container {
        width: calc(100% - 50px);

        grid-template-columns: 47% 53%;

        padding: 45px 35px;
    }

    .overview-content {
        padding-left: 20px;
    }

    .overview-image-card {
        width: 90%;
    }

}


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

@media (max-width: 991px) {

    .program-overview-section {
        padding: 55px 0;
    }

    .program-overview-container {
        width: calc(100% - 40px);

        grid-template-columns: 1fr;

        gap: 35px;

        padding: 40px 35px;
    }

    .overview-image-area {
        min-height: 330px;
    }

    .overview-image-card {
        width: 85%;
        height: 270px;
    }

    .overview-floating-icon {
        right: 8%;
    }

    .overview-content {
        padding: 0;
    }

    .overview-content h2 {
        font-size: 34px;
    }

}


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

@media (max-width: 767px) {

    .program-overview-section {
        padding: 35px 0;
    }

    .program-overview-container {
        width: calc(100% - 30px);

        padding: 30px 22px;

        border-radius: 16px;

        gap: 25px;
    }

    .overview-image-area {
        min-height: 270px;
    }

    .overview-image-card {
        width: 92%;
        height: 220px;

        border-radius: 16px;
    }

    .overview-floating-icon {
        width: 50px;
        height: 50px;

        top: 8px;
        right: 2%;

        font-size: 21px;

        border-radius: 12px;
    }

    .overview-shape-one {
        width: 90px;
        height: 90px;

        left: 0;
        bottom: 25px;
    }

    .overview-shape-two {
        width: 17px;
        height: 17px;

        left: 0;
        bottom: 18px;
    }

    .overview-dots-top {
        left: 0;
    }

    .overview-content h2 {
        font-size: 30px;
    }

    .overview-content p {
        font-size: 14px;

        line-height: 1.7;
    }

}


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

@media (max-width: 480px) {

    .program-overview-container {
        width: calc(100% - 20px);

        padding: 25px 18px;
    }

    .overview-image-area {
        min-height: 235px;
    }

    .overview-image-card {
        width: 94%;
        height: 190px;
    }

    .overview-content h2 {
        font-size: 27px;
    }

    .overview-label {
        font-size: 12px;
    }

    .overview-content p {
        font-size: 13px;
    }

}

/* =========================================================
   WHY CHOOSE OUR PROGRAM
========================================================= */

.why-program-section {
    width: 100%;

    position: relative;

    overflow: hidden;

    padding: 75px 0 85px;

    background: #ffffff;

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


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

.why-program-container {
    width: calc(100% - 80px);
    max-width: 1440px;

    margin: 0 auto;

    position: relative;

    z-index: 3;
}


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

.why-program-heading {
    text-align: center;

    margin-bottom: 70px;
}


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

.why-heading-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 12px;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    color: #0b50bd;

    font-size: 25px;

    box-shadow:
        0 5px 20px rgba(8, 60, 124, 0.12),
        0 0 0 1px #e7edf8;
}


/* =========================================================
   SMALL DECORATIVE LINES
========================================================= */

.why-heading-line {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-bottom: 8px;
}

.why-heading-line span {
    width: 95px;
    height: 2px;

    background: #2e67d1;

    border-radius: 5px;
}


/* =========================================================
   LABEL
========================================================= */

.why-label {
    margin-bottom: 5px;

    color: #1558c0;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.6px;
}


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

.why-program-heading h2 {
    margin: 0;

    color: #071d49;

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

    line-height: 1.15;

    font-weight: 800;
}


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

.why-program-heading p {
    max-width: 650px;

    margin: 15px auto 0;

    color: #526585;

    font-size: 15px;

    line-height: 1.6;
}


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

.why-program-features {
    position: relative;

    display: grid;

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

    gap: 22px;

    padding-top: 18px;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

.why-program-features::before {
    content: "";

    position: absolute;

    top: 43px;

    left: 8%;
    right: 8%;

    height: 1px;

    background: #cbd8ef;

    z-index: 0;
}


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

.why-feature-card {
    position: relative;

    z-index: 2;

    min-height: 275px;

    padding: 65px 25px 30px;

    background: #ffffff;

    border: 1px solid #e6edf8;

    border-radius: 12px;

    box-shadow:
        0 8px 25px rgba(8, 60, 124, 0.07);

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

.why-feature-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 15px 35px rgba(8, 60, 124, 0.13);
}


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

.why-feature-icon {
    width: 74px;
    height: 74px;

    position: absolute;

    top: -36px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid #edf2fa;

    color: #0c54c5;

    font-size: 30px;

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


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

.why-feature-number {
    margin-bottom: 13px;

    color: #cbdaf5;

    font-size: 25px;

    font-weight: 700;
}


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

.why-feature-card h5 {
    margin: 0;

    color: #071d49;

    font-size: 17px;

    line-height: 1.3;

    font-weight: 700;
}


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

.why-feature-line {
    width: 30px;
    height: 3px;

    margin: 12px 0 14px;

    border-radius: 5px;

    background: #2865d2;
}


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

.why-feature-card p {
    margin: 0;

    color: #405575;

    font-size: 13px;

    line-height: 1.65;
}


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

.why-dots {
    position: absolute;

    width: 120px;
    height: 100px;

    background-image:
        radial-gradient(
            circle,
            #b9cdf5 1.7px,
            transparent 1.7px
        );

    background-size: 16px 16px;

    opacity: 0.75;

    z-index: 1;
}

.why-dots-left {
    top: 5px;
    left: 10px;
}

.why-dots-right {
    right: 30px;
    bottom: 25px;

    opacity: 0.45;
}


/* =========================================================
   TOP RIGHT CIRCLE
========================================================= */

/* .why-circle {
    position: absolute;

    width: 250px;
    height: 250px;

    top: -120px;
    right: -90px;

    border: 1px solid #3d73df;

    border-radius: 50%;

    z-index: 1;
} */

/* .why-circle::before {
    content: "";

    position: absolute;

    inset: 25px;

    border: 1px solid #9db8ed;

    border-radius: 50%;
}

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

    position: absolute;

    inset: 50px;

    border: 1px solid #c8d8f3;

    border-radius: 50%;
} */


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

@media (max-width: 1100px) {

    .why-program-container {
        width: calc(100% - 50px);
    }

    .why-program-features {
        grid-template-columns: repeat(2, 1fr);

        row-gap: 60px;
    }

}


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

@media (max-width: 767px) {

    .why-program-section {
        padding: 55px 0 65px;
    }

    .why-program-container {
        width: calc(100% - 30px);
    }

    .why-program-heading {
        margin-bottom: 55px;
    }

    .why-heading-line span {
        width: 55px;
    }

    .why-program-heading h2 {
        font-size: 31px;
    }

    .why-program-heading p {
        font-size: 14px;
    }

    .why-program-features {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .why-feature-card {
        min-height: auto;

        padding: 60px 25px 28px;
    }

    .why-program-features::before {
        display: none;
    }

    .why-dots-right {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .why-program-container {
        width: calc(100% - 20px);
    }

    .why-program-heading h2 {
        font-size: 27px;
    }

    .why-program-heading p {
        font-size: 13px;
    }

    .why-label {
        font-size: 12px;
    }

    .why-feature-card {
        padding-left: 20px;
        padding-right: 20px;
    }

}


/* =========================================================
   MODERN PROGRAM OVERVIEW
========================================================= */

.program-overview-modern {
    width: 100%;
    padding: 80px 0;

    background: #f7faff;

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

    overflow: hidden;
}


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

.pom-container {
    width: calc(100% - 80px);
    max-width: 1440px;

    margin: 0 auto;
}


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

.pom-header {
    text-align: center;
    margin-bottom: 48px;
}

.pom-heading-top {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 22px;

    margin-bottom: 10px;
}

.pom-heading-top span {
    width: 90px;
    height: 2px;

    background: #0b55bd;
}

.pom-cap-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    background: #ffffff;

    color: #0b55bd;

    font-size: 22px;

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

.pom-eyebrow {
    margin-bottom: 4px;

    color: #4b73d7;

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

    letter-spacing: 0.5px;
}

.pom-header h2 {
    margin: 0;

    color: #071f52;

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

    line-height: 1.15;

    font-weight: 700;
}

.pom-header h2::after {
    content: "";

    display: block;

    width: 42px;
    height: 4px;

    margin: 14px auto 12px;

    background: #155bd1;

    border-radius: 5px;
}

.pom-header p {
    margin: 0;

    color: #667795;

    font-size: 15px;
}



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


/* =========================================================
   TWO EQUAL BOXES
========================================================= */

.pg-container {
    width: calc(100% - 80px);
    max-width: 1440px;

    margin: 0 auto;

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

    gap: 28px;
}


/* =========================================================
   EACH BOX
========================================================= */

.pg-box {
    width: 100%;
    height: 390px;

    display: grid;

    /* EXACT SAME SIDE PANEL WIDTH */
    grid-template-columns: 38% 62%;

    background: #ffffff;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(8, 60, 124, 0.10);
}


/* =========================================================
   BOTH BLUE SIDE PANELS
========================================================= */

.pg-side-panel {
    width: 100%;
    height: 390px;

    box-sizing: border-box;

    padding: 38px 20px 25px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    background: #083c7c;

    color: #ffffff;

    position: relative;

    overflow: hidden;
}


/* =========================================================
   RIGHT BOX BLUE PANEL
   SAME WIDTH + SAME HEIGHT
========================================================= */

.pg-box:nth-child(2) {
    grid-template-columns: 62% 38%;
}

.pg-box:nth-child(2) .pg-side-panel {
    width: 100%;
    height: 390px;
}


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

.pg-icon-circle {
    width: 68px;
    height: 68px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: #ffffff;

    color: #0755bd;

    font-size: 25px;

    margin-bottom: 22px;

    position: relative;
    z-index: 2;
}


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

.pg-side-panel h3 {
    margin: 0;

    color: #ffffff;

    font-size: 19px;

    line-height: 1.4;

    font-weight: 700;

    position: relative;
    z-index: 2;
}


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

.pg-divider {
    width: 38px;
    height: 3px;

    margin: 18px 0 20px;

    background: #ffffff;

    border-radius: 5px;

    position: relative;
    z-index: 2;
}


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

.pg-large-icon {
    margin-top: auto;

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

    font-size: 95px;

    line-height: 1;

    position: relative;
    z-index: 2;
}


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

.pg-content {
    width: 100%;
    height: 390px;

    box-sizing: border-box;

    padding: 12px 28px;

    background: #ffffff;
}


/* =========================================================
   PROGRAM OVERVIEW - RESPONSIVE FIX
   ADD THIS AT THE VERY BOTTOM OF CSS
========================================================= */


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

@media (max-width: 1100px) {

    .program-overview-modern {
        padding: 65px 0;
    }

    .pom-container,
    .pg-container {
        width: calc(100% - 50px);
        max-width: 100%;
    }

    .pg-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .pg-box {
        height: 390px;
    }

}


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

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

    .program-overview-modern {
        padding: 60px 0;
    }

    .pom-container,
    .pg-container {
        width: calc(100% - 40px);
    }

    .pom-header {
        margin-bottom: 35px;
    }

    .pom-header h2 {
        font-size: 38px;
    }

    .pg-box {
        height: 380px;
    }

    .pg-side-panel {
        height: 380px;
    }

    .pg-content {
        height: 380px;
        padding: 12px 22px;
    }

}


/* =========================================================
   MOBILE - MAIN FIX
========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       SECTION
    ----------------------------------------------------- */

    .program-overview-modern {
        width: 100%;
        padding: 45px 0 55px;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       CONTAINER
    ----------------------------------------------------- */

    .pom-container,
    .pg-container {

        width: calc(100% - 24px) !important;
        max-width: 100% !important;

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

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .pom-header {
        margin-bottom: 30px;

        padding: 0 8px;
    }


    .pom-heading-top {
        gap: 12px;

        margin-bottom: 9px;
    }


    .pom-heading-top span {
        width: 42px;
        height: 2px;
    }


    .pom-cap-icon {
        width: 48px;
        height: 48px;

        font-size: 20px;
    }


    .pom-eyebrow {
        margin-bottom: 6px;

        font-size: 12px;
    }


    .pom-header h2 {

        margin: 0;

        font-size: 27px !important;
        line-height: 1.25 !important;

        font-weight: 700;
    }


    .pom-header h2::after {

        width: 35px;
        height: 3px;

        margin: 11px auto 12px;
    }


    .pom-header p {

        margin: 0 auto;

        font-size: 14px;

        line-height: 1.5;

        text-align: center;
    }


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

    .pg-container {

        display: flex !important;

        flex-direction: column !important;

        gap: 20px !important;
    }


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

    .pg-box,
    .pg-box:nth-child(2) {

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

        height: auto !important;
        min-height: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        grid-template-columns: none !important;
        grid-template-rows: none !important;

        border-radius: 16px !important;

        overflow: hidden !important;

        box-sizing: border-box !important;

        box-shadow:
            0 8px 25px rgba(8, 60, 124, 0.10);
    }


    /* =====================================================
       BLUE SIDE PANEL
    ===================================================== */

    .pg-side-panel,
    .pg-box:nth-child(2) .pg-side-panel {

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

        height: auto !important;

        min-height: 185px !important;

        flex: none !important;

        padding: 25px 18px 24px !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;

        order: 1 !important;
    }


    /* -----------------------------------------------------
       SECOND CARD
       Move blue panel before content
    ----------------------------------------------------- */

    .pg-box:nth-child(2) .pg-side-panel {
        order: 1 !important;
    }


    .pg-box:nth-child(2) .pg-content {
        order: 2 !important;
    }


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

    .pg-icon-circle {

        width: 58px !important;
        height: 58px !important;

        min-width: 58px !important;
        min-height: 58px !important;

        margin: 0 0 13px !important;

        display: flex !important;

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

        flex-shrink: 0 !important;

        font-size: 22px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       BLUE PANEL TITLE
    ===================================================== */

    .pg-side-panel h3 {

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

        margin: 0 !important;

        color: #ffffff !important;

        font-size: 21px !important;

        line-height: 1.3 !important;

        font-weight: 700 !important;

        text-align: center !important;

        white-space: normal !important;

        word-break: normal !important;

        overflow-wrap: normal !important;
    }


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

    .pg-divider {

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

        margin: 13px auto 0 !important;

        flex-shrink: 0 !important;
    }


    /* =====================================================
       DECORATIVE LARGE ICON
    ===================================================== */

    .pg-large-icon {

        display: none !important;
    }


    /* =====================================================
       WHITE CONTENT AREA
    ===================================================== */

    .pg-content,
    .pg-box:nth-child(2) .pg-content {

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

        height: auto !important;

        min-height: 0 !important;

        padding: 18px 18px 20px !important;

        display: block !important;

        box-sizing: border-box !important;

        overflow: visible !important;

        order: 2 !important;
    }


    /* =====================================================
       INFORMATION ITEMS
    ===================================================== */

    .pg-item {

        width: 100% !important;

        min-height: 0 !important;

        padding: 14px 0 !important;

        display: flex !important;

        align-items: flex-start !important;

        gap: 12px !important;

        box-sizing: border-box !important;
    }


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

    .pg-item-icon {

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

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

        flex-shrink: 0 !important;

        display: flex !important;

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

        border-radius: 11px !important;

        font-size: 18px !important;
    }


    /* =====================================================
       ITEM TEXT WRAPPER
    ===================================================== */

    .pg-item > div:last-child {

        min-width: 0 !important;

        flex: 1 1 auto !important;

        width: auto !important;
    }


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

    .pg-item h4,
    .pg-item h6 {

        margin: 0 0 4px !important;

        color: #0755bd !important;

        font-size: 17px !important;

        line-height: 1.35 !important;

        font-weight: 700 !important;

        white-space: normal !important;

        word-break: normal !important;

        overflow-wrap: break-word !important;
    }


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

    .pg-item p {

        margin: 0 !important;

        color: #294363 !important;

        font-size: 14px !important;

        line-height: 1.5 !important;

        white-space: normal !important;

        word-break: normal !important;

        overflow-wrap: break-word !important;

        text-align: left !important;
    }


    /* =====================================================
       CHECK ITEMS
    ===================================================== */

    .pg-check-item {

        width: 100% !important;

        min-height: 0 !important;

        padding: 14px 0 !important;

        display: flex !important;

        align-items: flex-start !important;

        gap: 12px !important;

        box-sizing: border-box !important;
    }


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

    .pg-check {

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

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

        flex-shrink: 0 !important;

        font-size: 17px !important;
    }


    /* =====================================================
       CHECK TEXT
    ===================================================== */

    .pg-check-item p {

        flex: 1 1 auto !important;

        min-width: 0 !important;

        margin: 0 !important;

        color: #294363 !important;

        font-size: 16px !important;

        line-height: 1.55 !important;

        white-space: normal !important;

        word-break: normal !important;

        overflow-wrap: break-word !important;

        text-align: left !important;
    }

}


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

@media (max-width: 480px) {

    .program-overview-modern {
        padding: 40px 0 50px;
    }


    .pom-container,
    .pg-container {

        width: calc(100% - 20px) !important;
    }


    .pom-header {
        padding: 0 5px;

        margin-bottom: 26px;
    }


    .pom-heading-top {
        gap: 9px;
    }


    .pom-heading-top span {
        width: 32px;
    }


    .pom-cap-icon {
        width: 44px;
        height: 44px;

        font-size: 19px;
    }


    .pom-eyebrow {
        font-size: 11px;
    }


    .pom-header h2 {

        font-size: 24px !important;

        line-height: 1.25 !important;
    }


    .pom-header h2::after {

        width: 32px;
        height: 3px;

        margin: 9px auto 10px;
    }


    .pom-header p {

        font-size: 13px;

        line-height: 1.5;
    }


    /* CARD */

    .pg-container {
        gap: 18px !important;
    }


    .pg-box,
    .pg-box:nth-child(2) {

        border-radius: 14px !important;
    }


    /* BLUE PANEL */

    .pg-side-panel,
    .pg-box:nth-child(2) .pg-side-panel {

        min-height: 165px !important;

        padding: 22px 15px !important;
    }


    /* ICON */

    .pg-icon-circle {

        width: 54px !important;
        height: 54px !important;

        min-width: 54px !important;
        min-height: 54px !important;

        margin-bottom: 11px !important;

        font-size: 20px !important;
    }


    /* TITLE */

    .pg-side-panel h3 {

        font-size: 19px !important;

        line-height: 1.3 !important;
    }


    /* DIVIDER */

    .pg-divider {

        width: 34px !important;
        height: 2px !important;

        margin-top: 11px !important;
    }


    /* CONTENT */

    .pg-content,
    .pg-box:nth-child(2) .pg-content {

        padding: 15px 16px 18px !important;
    }


    /* ITEMS */

    .pg-item,
    .pg-check-item {

        padding: 12px 0 !important;

        gap: 10px !important;
    }


    .pg-item-icon,
    .pg-check {

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

        min-width: 38px !important;
        min-height: 38px !important;
    }


    .pg-item h4,
    .pg-item h6 {

        font-size: 16px !important;

        line-height: 1.3 !important;
    }


    .pg-item p,
    .pg-check-item p {

        font-size: 16px !important;

        line-height: 1.5 !important;
    }

}


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

@media (max-width: 360px) {

    .pom-container,
    .pg-container {

        width: calc(100% - 16px) !important;
    }


    .pom-header h2 {

        font-size: 22px !important;
    }


    .pom-header p {

        font-size: 12px;
    }


    .pg-side-panel,
    .pg-box:nth-child(2) .pg-side-panel {

        min-height: 155px !important;

        padding: 20px 12px !important;
    }


    .pg-icon-circle {

        width: 50px !important;
        height: 50px !important;

        min-width: 50px !important;
        min-height: 50px !important;

        font-size: 19px !important;
    }


    .pg-side-panel h3 {

        font-size: 18px !important;
    }


    .pg-content,
    .pg-box:nth-child(2) .pg-content {

        padding: 14px 14px 16px !important;
    }


    .pg-item,
    .pg-check-item {

        gap: 9px !important;
    }


    .pg-item-icon,
    .pg-check {

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

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

        font-size: 15px !important;
    }


    .pg-item h4,
    .pg-item h6 {

        font-size: 16px !important;
    }


    .pg-item p,
    .pg-check-item p {

        font-size: 16px !important;

        line-height: 1.45 !important;
    }

}





/* =========================================================
   PROGRAM STRUCTURE ITEMS
========================================================= */

.pg-item {
    min-height: 91px;

    display: flex;

    align-items: center;

    gap: 17px;

    border-bottom: 1px solid #e2eaf5;
}

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


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

.pg-item-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 12px;

    background: #edf3ff;

    color: #0755bd;

    font-size: 20px;
}


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

.pg-number {
    display: block;

    margin-bottom: 2px;

    color: #b6c9eb;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;
}


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

.pg-item h6 {
    margin: 0 0 5px;

    color: #0755bd;

    font-size: 17px;

    line-height: 1.35;

    font-weight: 700;
}


/* =========================================================
   ITEM TEXT
========================================================= */

.pg-item p {
    margin: 0;

    color: #294363;

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================================
   SUBJECT CHECK ITEMS
========================================================= */

.pg-check-item {
    min-height: 91px;

    display: flex;

    align-items: center;

    gap: 17px;

    border-bottom: 1px solid #e2eaf5;
}

.pg-check-item:last-child {
    border-bottom: none;
}


/* =========================================================
   CHECK CIRCLE
========================================================= */

.pg-check {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    background: #edf3ff;

    color: #0755bd;

    font-size: 18px;

    font-weight: 700;
}


/* =========================================================
   CHECK TEXT
========================================================= */

.pg-check-item p {
    margin: 0;

    color: #294363;

    font-size: 16px;

    line-height: 1.55;
}


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

@media (max-width: 1100px) {

    .program-guidelines-section {
        padding: 60px 0;
    }

    .pg-item,
    .pg-check-item {
        min-height: 90px;

        gap: 12px;
    }

    .pg-item-icon,
    .pg-check {
        width: 44px;
        height: 44px;
    }

    .pg-side-panel h3 {
        font-size: 17px;
    }

    .pg-item h4 {
        font-size: 16px;
    }

    .pg-item p,
    .pg-check-item p {
        font-size: 16px;
    }

}


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

@media (max-width: 900px) {

    .pg-container {
        grid-template-columns: 1fr;
    }

    .pg-box {
        min-height: 360px;
    }

    .pg-side-panel {
        min-height: 360px;
    }

}


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

@media (max-width: 767px) {

    .program-guidelines-section {
        padding: 50px 0;
    }


    .pg-item,
    .pg-check-item {
        min-height: 78px;

        gap: 10px;
    }

    .pg-item-icon,
    .pg-check {
        width: 40px;
        height: 40px;

        font-size: 17px;
    }

    .pg-item h4 {
        font-size: 16px;
    }

    .pg-item p,
    .pg-check-item p {
        font-size: 16px;
    }

    .pg-number {
        font-size: 9px;
    }

}


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

@media (max-width: 480px) {

    .program-guidelines-section {
        padding: 40px 0;
    }


    .pg-item,
    .pg-check-item {
        min-height: 72px;

        gap: 8px;
    }

    .pg-item-icon,
    .pg-check {
        width: 36px;
        height: 36px;

        font-size: 15px;
    }

    .pg-item h4 {
        font-size: 16px;

        margin-bottom: 3px;
    }

    .pg-item p,
    .pg-check-item p {
        font-size: 16px;

        line-height: 1.45;
    }

    .pg-number {
        font-size: 9px;
    }

}






/* Main section title */
.pom-header h2 {
    font-size: 46px;
    line-height: 1.15;
    font-weight: 800;
}

/* PROGRAM OVERVIEW label */
.pom-eyebrow {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
}

/* Main information headings */
.pom-detail-text h4 {
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
}

/* Main information text */
.pom-detail-text p {
    font-size: 14px;
    line-height: 1.55;
}

/* Subject selection text */
.pom-subject p {
    font-size: 14px;
    line-height: 1.55;
}

/* Icons */
.pom-cap-icon {
    font-size: 22px;
}

.pom-feature-circle {
    font-size: 25px;
}

.pom-large-icon {
    font-size: 100px;
}

.pom-center-icon {
    font-size: 25px;
}

.pom-check {
    font-size: 18px;
}


@media (max-width: 991px) {

    .pom-header h2 {
        font-size: 38px;
    }

    .pom-eyebrow {
        font-size: 13px;
    }

    .pom-detail-text h4 {
        font-size: 17px;
    }

    .pom-detail-text p,
    .pom-subject p {
        font-size: 13px;
    }

}

@media (max-width: 767px) {

    .pom-header h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    .pom-eyebrow {
        font-size: 12px;
    }

    .pom-detail-text h4 {
        font-size: 16px;
    }

    .pom-detail-text p,
    .pom-subject p {
        font-size: 12px;
    }

}

@media (max-width: 480px) {

    .pom-header h2 {
        font-size: 29px;
        line-height: 1.2;
    }

    .pom-eyebrow {
        font-size: 11px;
    }

    .pom-detail-text h4 {
        font-size: 15px;
    }

    .pom-detail-text p,
    .pom-subject p {
        font-size: 12px;
    }

}


/* =========================================================
   SUBJECT STRUCTURE SECTION
========================================================= */

.subject-structure-section {
    width: 100%;
    padding: 80px 0;

    background: #f8fbff;

    font-family: "Inter", "Segoe UI", Arial, sans-serif;
}


/* SAME WIDTH AS PREVIOUS SECTION */

.subject-structure-container {
    width: calc(100% - 96px);
    max-width: 1440px;
    margin: 0 auto;
}


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

.subject-structure-header {
    width: 100%;
    margin-bottom: 28px;
    text-align: center;
}

.subject-structure-header h2 {
    margin: 0 0 14px;

    color: #061d4d;

    font-size: 46px;
    line-height: 1.15;

    font-weight: 800;
    letter-spacing: -0.8px;
}


/* GROUP LABEL */

.subject-group-label {
    display: inline-block;

    padding: 5px 15px;

    background: #2949ad;

    color: #ffffff;

    border-radius: 20px;

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

    font-weight: 600;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.subject-table-wrapper {
    width: 100%;

    display: grid;

    grid-template-columns: 155px 1fr;

    background: #ffffff;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(8, 60, 124, 0.08);
}

.subject-side-panel h3 {
    width: 100%;
    margin: 18px 0 12px;

    color: #ffffff;

    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;

    text-align: center;
}


/* =========================================================
   GROUP A – LEFT BLUE PANEL
========================================================= */

.group-a-section .subject-side-panel {

    position: relative;

    width: 100%;

    min-height: 540px;

    padding: 35px 15px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #2949ad;

    color: #ffffff;

    overflow: hidden;
}


/* TOP ICON */

.group-a-section .subject-icon-circle {

    width: 72px;

    height: 72px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

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

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

    box-shadow:
        0 0 0 8px rgba(255,255,255,0.04);

    position: relative;

    z-index: 2;
}


.group-a-section .subject-icon-circle i {

    color: #ffffff;

    font-size: 30px;
}


/* HEADING */

.group-a-section .subject-side-panel h3 {

    width: 100%;

    margin: 0;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.4;

    font-weight: 700;

    text-align: center;

    position: relative;

    z-index: 2;
}


/* DIVIDER */

.group-a-section .subject-panel-divider {

    width: 42px;

    height: 3px;

    margin: 16px auto;

    background: #ffffff;

    border-radius: 5px;

    position: relative;

    z-index: 2;
}


/* DESCRIPTION */

.group-a-section .subject-side-panel p {

    width: 100%;

    margin: 0;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.7;

    font-weight: 700;

    text-align: center;

    position: relative;

    z-index: 2;
}


/* LARGE BOTTOM ICON */

.group-a-section .subject-large-icon {

    margin-top: 55px;

    opacity: 0.16;

    position: relative;

    z-index: 1;
}


.group-a-section .subject-large-icon i {

    color: #ffffff;

    font-size: 105px;
}


/* =========================================================
   TABLE
========================================================= */

.subject-table-container {
    width: 100%;

    overflow-x: auto;
}

.subject-table {
    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    table-layout: fixed;
}


/* =========================================================
   COLUMN WIDTHS
========================================================= */

.subject-table thead th:nth-child(1) {
    width: 27%;
}

.subject-table thead th:nth-child(2) {
    width: 29%;
}

.subject-table thead th:nth-child(3) {
    width: 74%;
}


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

.subject-table thead th {
    height: 52px;

    padding: 12px 16px;

    background: #2949ad;

    color: #ffffff;

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

    font-size: 13px;

    line-height: 1.3;

    font-weight: 600;

    text-align: left;

    vertical-align: middle;
}


/* =========================================================
   TABLE ROWS
========================================================= */

.subject-table tbody tr {
    height: 42px;

    background: #ffffff;

    transition: background 0.2s ease;
}


/* ALTERNATING ROW */

.subject-table tbody tr:nth-child(even) {
    background: #f0f4fa;
}


/* HOVER */

.subject-table tbody tr:hover {
    background: #e7efff;
}


/* =========================================================
   TABLE CELLS
========================================================= */

.subject-table tbody td {
    padding: 10px 14px;

    font-size: 13px;

    line-height: 1.45;

    border-bottom: 1px solid #d8e2ef;
    border-right: 1px solid #d8e2ef;
}


/* SUBJECT CODE */

.subject-table tbody td:first-child {
    text-align: center;

    color: #2949ad;

    font-weight: 700;
}


/* SUBJECT NAME */

.subject-table tbody td:nth-child(2) {
    color: #172d55;

    font-weight: 700;
}


/* DESCRIPTION */

.subject-table tbody td:nth-child(3) {
    color: #425572;

    font-weight: 400;
}


/* =========================================================
   LAST ROW
========================================================= */

.subject-table tbody tr:last-child td {
    border-bottom: none;
}


/* =========================================================
   GROUP A – RESPONSIVE
========================================================= */


/* =========================================================
   LARGE DESKTOP
   1400px+
========================================================= */

@media (min-width: 1400px) {

    .group-a-section .subject-side-panel {
        min-height: 540px;
        padding: 35px 20px;
    }

    .group-a-section .subject-icon-circle {
        width: 72px;
        height: 72px;
    }

    .group-a-section .subject-icon-circle i {
        font-size: 30px;
    }

    .group-a-section .subject-side-panel h3 {
        font-size: 15px;
    }

    .group-a-section .subject-side-panel p {
        font-size: 13px;
    }

    .group-a-section .subject-large-icon i {
        font-size: 105px;
    }

    .group-a-section .subject-table thead th {
        font-size: 13px;
        padding: 12px 16px;
    }

    .group-a-section .subject-table tbody td {
        font-size: 13px;
        padding: 10px 14px;
    }
}


/* =========================================================
   LAPTOP
   1200px – 1399px
========================================================= */

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

    .group-a-section .subject-side-panel {
        min-height: 520px;
        padding: 30px 18px;
    }

    .group-a-section .subject-icon-circle {
        width: 68px;
        height: 68px;
    }

    .group-a-section .subject-icon-circle i {
        font-size: 28px;
    }

    .group-a-section .subject-side-panel h3 {
        font-size: 14px;
    }

    .group-a-section .subject-side-panel p {
        font-size: 12px;
        line-height: 1.6;
    }

    .group-a-section .subject-large-icon {
        margin-top: 45px;
    }

    .group-a-section .subject-large-icon i {
        font-size: 95px;
    }

    .group-a-section .subject-table thead th {
        font-size: 12px;
        padding: 11px 13px;
    }

    .group-a-section .subject-table tbody td {
        font-size: 12px;
        padding: 9px 11px;
    }
}


/* =========================================================
   SMALL LAPTOP / LARGE TABLET
   992px – 1199px
========================================================= */

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

    .group-a-section .subject-side-panel {
        min-height: 500px;
        padding: 28px 15px;
    }

    .group-a-section .subject-icon-circle {
        width: 62px;
        height: 62px;
    }

    .group-a-section .subject-icon-circle i {
        font-size: 25px;
    }

    .group-a-section .subject-side-panel h3 {
        font-size: 14px;
        line-height: 1.35;
    }

    .group-a-section .subject-side-panel p {
        font-size: 12px;
        line-height: 1.55;
    }

    .group-a-section .subject-large-icon {
        margin-top: 40px;
    }

    .group-a-section .subject-large-icon i {
        font-size: 85px;
    }

    .group-a-section .subject-table-container {
        width: 100%;
        overflow-x: auto;
    }

    .group-a-section .subject-table {
        min-width: 650px;
    }

    .group-a-section .subject-table thead th {
        font-size: 11px;
        padding: 10px 11px;
    }

    .group-a-section .subject-table tbody td {
        font-size: 11px;
        padding: 9px 10px;
    }
}


/* =========================================================
   TABLET
   768px – 991px
========================================================= */

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

    .group-a-section .subject-side-panel {
        min-height: 460px;
        padding: 25px 12px;
    }

    .group-a-section .subject-icon-circle {
        width: 58px;
        height: 58px;
        margin-bottom: 18px;
    }

    .group-a-section .subject-icon-circle i {
        font-size: 23px;
    }

    .group-a-section .subject-side-panel h3 {
        font-size: 13px;
        line-height: 1.35;
    }

    .group-a-section .subject-panel-divider {
        width: 38px;
        height: 2px;
        margin: 13px auto;
    }

    .group-a-section .subject-side-panel p {
        font-size: 11px;
        line-height: 1.55;
    }

    .group-a-section .subject-large-icon {
        margin-top: 35px;
    }

    .group-a-section .subject-large-icon i {
        font-size: 75px;
    }

    .group-a-section .subject-table-container {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .group-a-section .subject-table {
        min-width: 650px;
    }

    .group-a-section .subject-table thead th {
        font-size: 11px;
        padding: 9px 10px;
        white-space: nowrap;
    }

    .group-a-section .subject-table tbody td {
        font-size: 11px;
        padding: 8px 9px;
    }
}


/* =========================================================
   MOBILE
   576px – 767px
========================================================= */

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

    .group-a-section .subject-side-panel {
        min-height: 145px;
        padding: 25px 20px;

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

        gap: 18px;
    }

    .group-a-section .subject-icon-circle {
        width: 58px;
        height: 58px;
        min-width: 58px;
        margin-bottom: 0;
    }

    .group-a-section .subject-icon-circle i {
        font-size: 24px;
    }

    .group-a-section .subject-side-panel h3 {
        width: auto;
        font-size: 14px;
        line-height: 1.35;
        text-align: left;
    }

    .group-a-section .subject-panel-divider {
        display: none;
    }

    .group-a-section .subject-side-panel p {
        width: auto;
        font-size: 12px;
        line-height: 1.5;
        text-align: left;
    }

    .group-a-section .subject-large-icon {
        display: none;
    }

    .group-a-section .subject-table-container {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .group-a-section .subject-table {
        min-width: 780px;
        width: 100%;
    }

    .group-a-section .subject-table thead th {
        font-size: 12px;
        padding: 10px 12px;
        white-space: nowrap;
    }

    .group-a-section .subject-table tbody td {
        font-size: 12px;
        padding: 9px 10px;
    }
}


/* =========================================================
   MOBILE
   481px – 575px
========================================================= */

@media (min-width: 481px) and (max-width: 575px) {

    .group-a-section .subject-side-panel {
        min-height: 135px;
        padding: 22px 16px;

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

        gap: 14px;
    }

    .group-a-section .subject-icon-circle {
        width: 54px;
        height: 54px;
        min-width: 54px;
        margin-bottom: 0;
    }

    .group-a-section .subject-icon-circle i {
        font-size: 22px;
    }

    .group-a-section .subject-side-panel h3 {
        width: auto;
        font-size: 14px;
        line-height: 1.3;
        text-align: left;
    }

    .group-a-section .subject-panel-divider,
    .group-a-section .subject-large-icon {
        display: none;
    }

    .group-a-section .subject-side-panel p {
        width: auto;
        font-size: 11px;
        line-height: 1.45;
        text-align: left;
    }

    .group-a-section .subject-table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .group-a-section .subject-table {
        min-width: 740px;
    }

    .group-a-section .subject-table thead th {
        font-size: 11px;
        padding: 9px 10px;
        white-space: nowrap;
    }

    .group-a-section .subject-table tbody td {
        font-size: 11px;
        padding: 8px 9px;
    }
}


/* =========================================================
   SMALL MOBILE
   360px – 480px
========================================================= */

@media (min-width: 360px) and (max-width: 480px) {

    .group-a-section .subject-side-panel {
        min-height: 130px;
        padding: 20px 14px;

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

        gap: 12px;
    }

    .group-a-section .subject-icon-circle {
        width: 50px;
        height: 50px;
        min-width: 50px;
        margin-bottom: 0;
    }

    .group-a-section .subject-icon-circle i {
        font-size: 20px;
    }

    .group-a-section .subject-side-panel h3 {
        width: auto;
        font-size: 13px;
        line-height: 1.3;
        text-align: left;
    }

    .group-a-section .subject-side-panel p {
        width: auto;
        font-size: 10px;
        line-height: 1.45;
        text-align: left;
    }

    .group-a-section .subject-panel-divider,
    .group-a-section .subject-large-icon {
        display: none;
    }

    .group-a-section .subject-table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .group-a-section .subject-table {
        min-width: 720px;
    }

    .group-a-section .subject-table thead th {
        font-size: 10px;
        padding: 8px 9px;
        white-space: nowrap;
    }

    .group-a-section .subject-table tbody td {
        font-size: 10px;
        padding: 8px;
    }

    .group-a-section .subject-table tbody tr {
        height: 42px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   BELOW 360px
========================================================= */

@media (max-width: 359px) {

    .group-a-section .subject-side-panel {
        min-height: 120px;
        padding: 18px 10px;

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

        gap: 9px;
    }

    .group-a-section .subject-icon-circle {
        width: 46px;
        height: 46px;
        min-width: 46px;
        margin-bottom: 0;
    }

    .group-a-section .subject-icon-circle i {
        font-size: 18px;
    }

    .group-a-section .subject-side-panel h3 {
        font-size: 12px;
        line-height: 1.3;
        text-align: left;
    }

    .group-a-section .subject-side-panel p {
        font-size: 9px;
        line-height: 1.4;
        text-align: left;
    }

    .group-a-section .subject-panel-divider,
    .group-a-section .subject-large-icon {
        display: none;
    }

    .group-a-section .subject-table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .group-a-section .subject-table {
        min-width: 680px;
    }

    .group-a-section .subject-table thead th {
        font-size: 10px;
        padding: 7px 8px;
        white-space: nowrap;
    }

    .group-a-section .subject-table tbody td {
        font-size: 10px;
        padding: 7px;
    }

    .group-a-section .subject-table tbody tr {
        height: 40px;
    }
}




/* =========================================================
   GROUP B – CORE & ELECTIVES
========================================================= */
.group-b-section .subject-side-panel {

    position: relative;

    width: 100%;

    min-height: 540px;

    padding: 35px 15px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #2949ad;

    color: #ffffff;

    overflow: hidden;
}


/* TOP ICON */

.group-b-section .subject-icon-circle {

    width: 72px;

    height: 72px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

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

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

    box-shadow:
        0 0 0 8px rgba(255,255,255,0.04);

    position: relative;

    z-index: 2;
}


.group-b-section .subject-icon-circle i {

    color: #ffffff;

    font-size: 30px;
}


/* HEADING */

.group-b-section .subject-side-panel h3 {

    width: 100%;

    margin: 0;

    color: #ffffff;

    font-size: 16px !important;

    line-height: 1.4;

    font-weight: 700;

    text-align: center;

    position: relative;

    z-index: 2;
}


/* DIVIDER */

.group-b-section .subject-panel-divider {

    width: 42px;

    height: 3px;

    margin: 16px auto;

    background: #ffffff;

    border-radius: 5px;

    position: relative;

    z-index: 2;
}


/* DESCRIPTION */

.group-b-section .subject-side-panel p {

    width: 100%;

    margin: 0;

    color: #ffffff;

    font-size: 16px !important;

    line-height: 1.7;

    font-weight: 700;

    text-align: center;

    position: relative;

    z-index: 2;
}



/* =========================================================
   LARGE BOTTOM ICON
========================================================= */

.group-b-section .subject-large-icon {

    margin-top: 55px;

    opacity: 0.16;

    position: relative;

    z-index: 1;
}


.group-b-section .subject-large-icon i {

    color: #ffffff;

    font-size: 105px;
}


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

.group-b-section .subject-table-container {

    width: 100%;

    overflow-x: auto;
}


/* =========================================================
   TABLE
========================================================= */

.group-b-section .subject-table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    table-layout: fixed;
}


/* =========================================================
   COLUMN WIDTHS
========================================================= */

.group-b-section .subject-table thead th:nth-child(1) {
    width: 21%;
}

.group-b-section .subject-table thead th:nth-child(2) {
    width: 20%;
}

.group-b-section .subject-table thead th:nth-child(3) {
    width: 55%;
}


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

.group-b-section .subject-table thead th {

    height: 52px;

    padding: 11px 16px;

    background: #123f94;

    color: #ffffff;

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

    font-size: 13px;

    line-height: 1.3;

    font-weight: 600;

    text-align: left;

    vertical-align: middle;
}


.group-b-section .subject-table thead th i {

    margin-right: 8px;

    font-size: 15px;
}


/* =========================================================
   TABLE ROWS
========================================================= */

.group-b-section .subject-table tbody tr {

    height: 39px;

    background: #ffffff;

    transition: background 0.2s ease;
}


.group-b-section .subject-table tbody tr:nth-child(even) {

    background: #f0f4fa;
}


.group-b-section .subject-table tbody tr:hover {

    background: #e7efff;
}


/* =========================================================
   TABLE CELLS
========================================================= */

.group-b-section .subject-table tbody td {

    padding: 9px 14px;

    border-bottom: 1px solid #d8e2ef;

    border-right: 1px solid #d8e2ef;

    color: #294363;

    font-size: 12px;

    line-height: 1.4;

    vertical-align: middle;
}


/* =========================================================
   SUBJECT CODE
========================================================= */

.group-b-section .subject-table tbody td:first-child {

    color: #2949ad;

    font-weight: 700;

    text-align: center;
}


/* =========================================================
   SUBJECT NAME
========================================================= */

.group-b-section .subject-table tbody td:nth-child(2) {

    color: #172d55;

    font-weight: 700;
}


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

.group-b-section .subject-table tbody td:nth-child(3) {

    color: #425572;

    font-weight: 400;
}


/* =========================================================
   LAST ROW
========================================================= */

.group-b-section .subject-table tbody tr:last-child td {

    border-bottom: none;
}


/* =========================================================
   LARGE DESKTOP
   1400px+
========================================================= */

@media (min-width: 1400px) {

    .group-b-section .subject-structure-container {
        width: calc(100% - 100px);
        max-width: 1440px;
        margin: 0 auto;
    }

    .group-b-section .subject-table-wrapper {
        grid-template-columns: 220px 1fr;
    }

    .group-b-section .subject-side-panel {
        min-height: 520px;
        padding: 35px 25px;
    }

    .group-b-section .subject-side-panel h3 {
        font-size: 18px;
    }

    .group-b-section .subject-side-panel p {
        font-size: 14px;
    }

    .group-b-section .subject-table thead th {
        font-size: 14px;
        padding: 14px 16px;
    }

    .group-b-section .subject-table tbody td {
        font-size: 13px;
        padding: 12px 14px;
    }
}


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

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

    .group-b-section .subject-structure-container {
        width: calc(100% - 80px);
        max-width: 1320px;
        margin: 0 auto;
    }

    .group-b-section .subject-table-wrapper {
        grid-template-columns: 200px 1fr;
    }

    .group-b-section .subject-side-panel {
        min-height: 500px;
        padding: 32px 22px;
    }

    .group-b-section .subject-side-panel h3 {
        font-size: 17px;
    }

    .group-b-section .subject-side-panel p {
        font-size: 13px;
    }

    .group-b-section .subject-table thead th {
        font-size: 13px;
        padding: 12px 14px;
    }

    .group-b-section .subject-table tbody td {
        font-size: 12px;
        padding: 10px 12px;
    }
}


/* =========================================================
   SMALL LAPTOP / LARGE TABLET
   992px - 1199px
========================================================= */

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

    .group-b-section .subject-structure-container {
        width: calc(100% - 60px);
        max-width: 1150px;
        margin: 0 auto;
    }

    .group-b-section .subject-table-wrapper {
        grid-template-columns: 170px 1fr;
    }

    .group-b-section .subject-side-panel {
        min-height: 480px;
        padding: 28px 18px;
    }

    .group-b-section .subject-side-panel h3 {
        font-size: 15px;
    }

    .group-b-section .subject-side-panel p {
        font-size: 12px;
    }

    .group-b-section .subject-icon-circle {
        width: 58px;
        height: 58px;
    }

    .group-b-section .subject-table thead th {
        font-size: 12px;
        padding: 10px 12px;
    }

    .group-b-section .subject-table tbody td {
        font-size: 11px;
        padding: 9px 10px;
    }
}


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

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

    .group-b-section {
        padding: 55px 0 65px;
    }

    .group-b-section .subject-structure-container {
        width: calc(100% - 50px);
        max-width: none;
        margin: 0 auto;
    }

    /* Keep two-column layout on tablet */
    .group-b-section .subject-table-wrapper {
        grid-template-columns: 150px minmax(0, 1fr);
        width: 100%;
    }

    .group-b-section .subject-side-panel {
        min-height: 460px;
        padding: 25px 15px;
    }

    .group-b-section .subject-icon-circle {
        width: 55px;
        height: 55px;
        min-width: 55px;
    }

    .group-b-section .subject-icon-circle i {
        font-size: 22px;
    }

    .group-b-section .subject-side-panel h3 {
        width: 100%;
        font-size: 14px;
        line-height: 1.35;
        text-align: center;
    }

    .group-b-section .subject-side-panel p {
        width: 100%;
        font-size: 11px;
        line-height: 1.5;
        text-align: center;
    }

    .group-b-section .subject-table-container {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .group-b-section .subject-table {
        min-width: 700px;
        width: 100%;
    }

    .group-b-section .subject-table thead th {
        font-size: 11px;
        padding: 10px 9px;
        white-space: nowrap;
    }

    .group-b-section .subject-table tbody td {
        font-size: 11px;
        padding: 9px 8px;
    }
}


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

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

    .group-b-section {
        padding: 45px 0 55px;
    }

    .group-b-section .subject-structure-container {
        width: calc(100% - 30px);
        max-width: none;
        margin: 0 auto;
    }

    /* Stack side panel and table */
    .group-b-section .subject-table-wrapper {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .group-b-section .subject-side-panel {
        width: 100%;
        min-height: 145px;
        padding: 25px 20px;

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

        gap: 18px;
    }

    .group-b-section .subject-icon-circle {
        width: 58px;
        height: 58px;
        min-width: 58px;
        margin-bottom: 0;
    }

    .group-b-section .subject-icon-circle i {
        font-size: 24px;
    }

    .group-b-section .subject-side-panel h3 {
        width: auto;
        margin: 0;
        font-size: 15px;
        text-align: left;
    }

    .group-b-section .subject-side-panel p {
        width: auto;
        margin: 0;
        font-size: 12px;
        text-align: left;
    }

    .group-b-section .subject-panel-divider {
        display: none;
    }

    .group-b-section .subject-large-icon {
        display: none;
    }

    .group-b-section .subject-table-container {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .group-b-section .subject-table {
        min-width: 780px;
        width: 100%;
    }

    .group-b-section .subject-table thead th {
        font-size: 12px;
        padding: 10px 12px;
        white-space: nowrap;
    }

    .group-b-section .subject-table tbody td {
        font-size: 12px;
        padding: 9px 10px;
    }

    .group-b-section .subject-table tbody tr {
        height: 43px;
    }
}


/* =========================================================
   MOBILE
   481px - 575px
========================================================= */

@media (min-width: 481px) and (max-width: 575px) {

    .group-b-section {
        padding: 40px 0 50px;
    }

    .group-b-section .subject-structure-container {
        width: calc(100% - 24px);
        margin: 0 auto;
    }

    .group-b-section .subject-table-wrapper {
        display: grid;
        grid-template-columns: 1fr;
    }

    .group-b-section .subject-side-panel {
        min-height: 135px;
        padding: 22px 18px;

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

        gap: 14px;
    }

    .group-b-section .subject-icon-circle {
        width: 54px;
        height: 54px;
        min-width: 54px;
        margin-bottom: 0;
    }

    .group-b-section .subject-icon-circle i {
        font-size: 22px;
    }

    .group-b-section .subject-side-panel h3 {
        width: auto;
        font-size: 14px;
        text-align: left;
    }

    .group-b-section .subject-side-panel p {
        width: auto;
        font-size: 11px;
        text-align: left;
    }

    .group-b-section .subject-panel-divider,
    .group-b-section .subject-large-icon {
        display: none;
    }

    .group-b-section .subject-table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .group-b-section .subject-table {
        min-width: 740px;
    }

    .group-b-section .subject-table thead th {
        font-size: 11px;
        padding: 9px 10px;
    }

    .group-b-section .subject-table tbody td {
        font-size: 11px;
        padding: 8px 9px;
    }
}


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

@media (min-width: 360px) and (max-width: 480px) {

    .group-b-section {
        padding: 38px 0 48px;
    }

    .group-b-section .subject-structure-container {
        width: calc(100% - 20px);
        margin: 0 auto;
    }

    .group-b-section .subject-table-wrapper {
        display: grid;
        grid-template-columns: 1fr;
    }

    .group-b-section .subject-side-panel {
        min-height: 130px;
        padding: 20px 15px;

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

        gap: 12px;
    }

    .group-b-section .subject-icon-circle {
        width: 50px;
        height: 50px;
        min-width: 50px;
        margin-bottom: 0;
    }

    .group-b-section .subject-icon-circle i {
        font-size: 20px;
    }

    .group-b-section .subject-side-panel h3 {
        width: auto;
        font-size: 14px;
        line-height: 1.3;
        text-align: left;
    }

    .group-b-section .subject-side-panel p {
        width: auto;
        font-size: 11px;
        line-height: 1.45;
        text-align: left;
    }

    .group-b-section .subject-panel-divider,
    .group-b-section .subject-large-icon {
        display: none;
    }

    .group-b-section .subject-table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .group-b-section .subject-table {
        min-width: 720px;
    }

    .group-b-section .subject-table thead th {
        font-size: 11px;
        padding: 8px 9px;
        white-space: nowrap;
    }

    .group-b-section .subject-table tbody td {
        font-size: 11px;
        padding: 8px;
    }

    .group-b-section .subject-table tbody tr {
        height: 42px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   BELOW 360px
========================================================= */

@media (max-width: 359px) {

    .group-b-section {
        padding: 35px 0 45px;
    }

    .group-b-section .subject-structure-container {
        width: calc(100% - 14px);
        margin: 0 auto;
    }

    .group-b-section .subject-table-wrapper {
        display: grid;
        grid-template-columns: 1fr;
    }

    .group-b-section .subject-side-panel {
        min-height: 120px;
        padding: 18px 10px;

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

        gap: 9px;
    }

    .group-b-section .subject-icon-circle {
        width: 46px;
        height: 46px;
        min-width: 46px;
        margin-bottom: 0;
    }

    .group-b-section .subject-icon-circle i {
        font-size: 18px;
    }

    .group-b-section .subject-side-panel h3 {
        font-size: 13px;
        line-height: 1.3;
        text-align: left;
    }

    .group-b-section .subject-side-panel p {
        font-size: 10px;
        line-height: 1.4;
        text-align: left;
    }

    .group-b-section .subject-panel-divider,
    .group-b-section .subject-large-icon {
        display: none;
    }

    .group-b-section .subject-table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .group-b-section .subject-table {
        min-width: 680px;
    }

    .group-b-section .subject-table thead th {
        font-size: 10px;
        padding: 8px;
        white-space: nowrap;
    }

    .group-b-section .subject-table tbody td {
        font-size: 10px;
        padding: 7px;
    }

    .group-b-section .subject-table tbody tr {
        height: 40px;
    }
}





/* =========================================================
   ASSESSMENT & CERTIFICATION
========================================================= */

.assessment-section {

    width: 100%;

    padding: 65px 0 75px;

    background: #f8fbff;

    font-family: "Inter", "Segoe UI", Arial, sans-serif;
}


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

.assessment-container {

    width: calc(100% - 96px);

    max-width: 1440px;

    margin: 0 auto;
}


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

.assessment-header {

    text-align: center;

    margin-bottom: 42px;
}


.assessment-header h2 {

    margin: 0;

    color: #061d4d;

    font-size: 42px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -0.7px;
}


.assessment-title-line {

    width: 42px;

    height: 3px;

    margin: 12px auto 10px;

    background: #2949ad;

    border-radius: 5px;
}


.assessment-header p {

    max-width: 680px;

    margin: 0 auto;

    color: #425572;

    font-size: 14px;

    line-height: 1.6;

    font-weight: 400;
}


/* =========================================================
   TWO BOXES
========================================================= */

.assessment-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    align-items: stretch;
}


/* =========================================================
   MAIN BOX
========================================================= */

.assessment-box {

    position: relative;

    min-height: 380px;

    padding: 60px 28px 25px;

    background: #ffffff;

    border: 1px solid #dce6f5;

    border-radius: 14px;

    box-shadow:
        0 8px 25px rgba(8, 60, 124, 0.08);

    overflow: hidden;
}


/* =========================================================
   BLUE TITLE BAR
========================================================= */

.assessment-box-title {

    position: absolute;

    top: -1px;

    left: 22px;

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 240px;

    height: 56px;

    padding: 0 25px 0 8px;

    background: #123f94;

    color: #ffffff;

    border-radius: 0 0 12px 12px;

    box-shadow:
        0 5px 12px rgba(8, 60, 124, 0.15);
}


.assessment-box-title::after {

    content: "";

    position: absolute;

    right: -13px;

    top: 0;

    width: 25px;

    height: 56px;

    background: #123f94;

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


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

.assessment-title-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: #ffffff;

    color: #0755bd;

    border-radius: 50%;

    border: 2px solid #dbe8fb;

    box-shadow:
        0 4px 10px rgba(0,0,0,0.08);
}


.assessment-title-icon i {

    font-size: 21px;
}


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

.assessment-box-title h3 {

    margin: 0;

    font-size: 18px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.2px;

    color: #ffffff;
}


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

.assessment-content {

    position: relative;

    padding-left: 15px;
}


/* VERTICAL LINE */

.assessment-content::before {

    content: "";

    position: absolute;

    left: 18px;

    top: 25px;

    bottom: 25px;

    width: 1px;

    background: #d9e4f5;
}


/* =========================================================
   ASSESSMENT ITEM
========================================================= */

.assessment-item {

    position: relative;

    display: flex;

    gap: 16px;

    padding: 13px 0;

    border-bottom: 1px dashed #d9e4f5;
}


.assessment-item:last-child {

    border-bottom: none;
}


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

.assessment-item-icon {

    position: relative;

    z-index: 2;

    width: 54px;

    height: 54px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #edf4ff;

    color: #0755bd;

    border-radius: 50%;
}


.assessment-item-icon i {

    font-size: 22px;
}


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

.assessment-item-content {

    padding-top: 3px;
}


.assessment-item-content h4 {

    margin: 0 0 6px;

    color: #092f73;

    font-size: 15px;

    line-height: 1.35;

    font-weight: 700;
}


.assessment-item-content p {

    margin: 0;

    color: #425572;

    font-size: 12px;

    line-height: 1.6;

    font-weight: 400;

    max-width: 420px;
}


/* =========================================================
   CERTIFICATION INTRO
========================================================= */

.certification-intro {

    margin: 5px 0 15px;

    padding: 12px 14px;

    background: #eef4ff;

    border: 1px solid #d7e5fb;

    border-left: 3px solid #0755bd;

    border-radius: 7px;

    color: #425572;

    font-size: 12px;

    line-height: 1.55;
}


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

.certification-content {

    width: 62%;
}


/* =========================================================
   CERTIFICATION ITEM
========================================================= */

.certification-item {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    padding: 8px 0;

    border-bottom: 1px dashed #d9e4f5;
}


.certification-item:last-child {

    border-bottom: none;
}


/* =========================================================
   CHECK
========================================================= */

.certification-check {

    width: 25px;

    height: 25px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0755bd;

    color: #ffffff;

    border-radius: 50%;
}


.certification-check i {

    font-size: 14px;
}


/* =========================================================
   CERTIFICATION TEXT
========================================================= */

.certification-item p {

    margin: 0;

    color: #092f73;

    font-size: 11.5px;

    line-height: 1.45;
}


.certification-item strong {

    font-weight: 700;
}


/* =========================================================
   CERTIFICATE VISUAL
========================================================= */

.certificate-visual {

    position: absolute;

    right: 28px;

    bottom: 25px;

    width: 165px;

    height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eef5ff;

    border-radius: 50%;

    opacity: 0.98;
}


/* =========================================================
   CERTIFICATE PAPER
========================================================= */

.certificate-paper {

    position: relative;

    width: 112px;

    height: 145px;

    padding: 20px 12px;

    box-sizing: border-box;

    background: #ffffff;

    border: 3px solid #174a9c;

    box-shadow:
        0 6px 15px rgba(8,60,124,0.12);

    text-align: center;
}


.certificate-paper::before {

    content: "";

    position: absolute;

    inset: 6px;

    border: 1px solid #d7e4f7;

    pointer-events: none;
}


/* =========================================================
   CERTIFICATE TEXT
========================================================= */

.certificate-heading {

    position: relative;

    color: #273b57;

    font-size: 9px;

    font-weight: 700;
}


.certificate-subheading {

    position: relative;

    margin-top: 3px;

    color: #273b57;

    font-size: 10px;

    font-weight: 800;
}


.certificate-line {

    width: 70px;

    height: 4px;

    margin: 13px auto 5px;

    background: #e1e6ee;

    border-radius: 4px;
}


.certificate-line.short {

    width: 48px;

    margin-top: 5px;
}


/* =========================================================
   CERTIFICATE SEAL
========================================================= */

.certificate-seal {

    position: absolute;

    right: 8px;

    bottom: 8px;

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0755bd;

    color: #ffffff;

    border-radius: 50%;
}


.certificate-seal i {

    font-size: 14px;
}



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

@media (max-width: 1100px) {

    .assessment-container {

        width: calc(100% - 50px);
    }

    .assessment-grid {

        gap: 15px;
    }

    .assessment-box {

        padding-left: 22px;

        padding-right: 22px;
    }

    .certification-content {

        width: 60%;
    }

    .certificate-visual {

        right: 18px;

        width: 145px;

        height: 170px;
    }
}


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

@media (max-width: 767px) {

    .assessment-section {

        padding: 50px 0 60px;
    }

    .assessment-container {

        width: calc(100% - 30px);
    }

    .assessment-header {

        margin-bottom: 32px;
    }

    .assessment-header h2 {

        font-size: 32px;
    }

    .assessment-header p {

        font-size: 13px;
    }

    .assessment-grid {

        grid-template-columns: 1fr;

        gap: 22px;
    }

    .assessment-box {

        min-height: auto;

        padding: 70px 20px 25px;
    }

    .assessment-box-title {

        left: 15px;

        min-width: 220px;

        height: 52px;
    }

    .assessment-title-icon {

        width: 44px;

        height: 44px;
    }

    .assessment-box-title h3 {

        font-size: 16px;
    }

    .assessment-content {

        padding-left: 0;
    }

    .assessment-content::before {

        display: none;
    }

    .assessment-item {

        gap: 12px;
    }

    .assessment-item-icon {

        width: 48px;

        height: 48px;
    }

    .assessment-item-content h4 {

        font-size: 14px;
    }

    .assessment-item-content p {

        font-size: 12px;
    }

    .certification-content {

        width: 100%;
    }

    .certificate-visual {

        position: relative;

        right: auto;

        bottom: auto;

        width: 150px;

        height: 165px;

        margin: 20px auto 0;
    }
}


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

@media (max-width: 480px) {

    .assessment-container {

        width: calc(100% - 20px);
    }

    .assessment-header h2 {

        font-size: 28px;
    }

    .assessment-header p {

        font-size: 12px;
    }

    .assessment-box {

        padding: 68px 16px 22px;
    }

    .assessment-box-title {

        left: 10px;

        min-width: 205px;
    }

    .assessment-box-title h3 {

        font-size: 15px;
    }

    .assessment-item-content h4 {

        font-size: 13px;
    }

    .assessment-item-content p {

        font-size: 11.5px;
    }
}

/* =========================================================
   BLUE BOTTOM LINE – BOTH BOXES
========================================================= */

.assessment-box::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 4px;

    background: #0755bd;
}

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

.assessment-header h2 {
    margin: 0;

    color: #061d4d;

    font-size: 42px;
    line-height: 1.2;

    font-weight: 800;
    letter-spacing: -0.7px;
}

.assessment-header p {
    max-width: 680px;
    margin: 0 auto;

    color: #425572;

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

    font-weight: 400;
}


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

.assessment-box-title h3 {
    margin: 0;

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

    font-weight: 700;
}


/* =========================================================
   ASSESSMENT ITEM TITLE
========================================================= */

.assessment-item-content h4 {
    margin: 0 0 6px;

    color: #092f73;

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

    font-weight: 700;
}


/* =========================================================
   ASSESSMENT ITEM DESCRIPTION
========================================================= */

.assessment-item-content p {
    margin: 0;

    color: #425572;

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

    font-weight: 400;
}


/* =========================================================
   CERTIFICATION INTRO
========================================================= */

.certification-intro {
    color: #425572;

    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   CERTIFICATION ITEMS
========================================================= */

.certification-item p {
    margin: 0;

    color: #092f73;

    font-size: 13px;
    line-height: 1.5;
}


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

.certification-check i {
    font-size: 14px;
}


/* =========================================================
   ADDITIONAL ACADEMIC PROVISIONS
========================================================= */

.academic-provisions-section {

    width: 100%;

    padding: 65px 0 75px;

    background: #f8fbff;

    font-family: "Inter", "Segoe UI", Arial, sans-serif;
}


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

.academic-provisions-container {

    width: calc(100% - 96px);

    max-width: 1440px;

    margin: 0 auto;
}


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

.academic-provisions-header {

    text-align: center;

    margin-bottom: 38px;
}


.academic-provisions-header h2 {

    margin: 5px 0 0;

    color: #061d4d;

    font-size: 42px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -0.7px;
}


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

.academic-header-decoration {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    height: 55px;
}


.academic-header-decoration > span {

    width: 70px;

    height: 1px;

    background: #0755bd;

    position: relative;
}


.academic-header-decoration > span::after {

    content: "";

    position: absolute;

    right: 0;

    top: -2px;

    width: 5px;

    height: 5px;

    background: #0755bd;

    border-radius: 50%;
}


.academic-header-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    color: #0755bd;

    border-radius: 50%;

    box-shadow:
        0 5px 18px rgba(8,60,124,0.12);

    border: 1px solid #e1eaf7;
}


.academic-header-icon i {

    font-size: 22px;
}


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

.academic-title-line {

    width: 48px;

    height: 3px;

    margin: 10px auto 9px;

    background: #0755bd;

    border-radius: 5px;
}


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

.academic-provisions-header p {

    max-width: 680px;

    margin: 0 auto;

    color: #425572;

    font-size: 14px;

    line-height: 1.6;

    font-weight: 400;
}


/* =========================================================
   CARDS GRID
========================================================= */

.academic-provisions-grid {

    display: grid;

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

    gap: 24px;

    align-items: stretch;
}


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

.academic-provision-card {

    position: relative;

    min-height: 390px;

    padding: 112px 30px 30px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #dce6f5;

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(8,60,124,0.08);

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


.academic-provision-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(8,60,124,0.13);
}


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

.academic-card-number {

    position: absolute;

    top: 13px;

    left: 16px;

    z-index: 3;

    color: #ffffff;

    font-size: 20px;

    line-height: 1;

    font-weight: 700;
}


/* =========================================================
   TOP DECORATIVE SHAPE
========================================================= */

.academic-card-shape {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 115px;

    background: #dbe8fb;

    clip-path: polygon(
        0 0,
        100% 0,
        100% 38%,
        72% 60%,
        44% 78%,
        0 100%
    );
}


/* BLUE NUMBER CORNER */

.academic-card-shape::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 95px;

    height: 90px;

    background: #0755bd;

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


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

.academic-card-icon {

    position: absolute;

    top: 17px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 5;

    width: 82px;

    height: 82px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    color: #0755bd;

    border-radius: 50%;

    border: 2px solid #e0ebfa;

    box-shadow:
        0 5px 18px rgba(8,60,124,0.12);
}


.academic-card-icon i {

    font-size: 31px;
}


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

.academic-card-content {

    position: relative;

    z-index: 3;

    text-align: center;
}


.academic-card-content h3 {

    margin: 0;

    color: #061d4d;

    font-size: 19px;

    line-height: 1.35;

    font-weight: 700;
}


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

.academic-card-line {

    width: 38px;

    height: 3px;

    margin: 10px auto 11px;

    background: #0755bd;

    border-radius: 5px;
}


/* =========================================================
   INTRO
========================================================= */

.academic-card-intro {

    min-height: 42px;

    margin: 0;

    padding-bottom: 14px;

    border-bottom: 1px solid #dce6f5;

    color: #425572;

    font-size: 13px;

    line-height: 1.55;

    text-align: center;
}


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

.academic-card-list {

    margin-top: 15px;

    text-align: left;
}


.academic-card-list > div {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-bottom: 10px;
}


.academic-card-list > div:last-child {

    margin-bottom: 0;
}


.academic-card-list i {

    flex-shrink: 0;

    margin-top: 2px;

    color: #0755bd;

    font-size: 14px;
}


.academic-card-list p {

    color: #425572;

    font-size: 12px;

    line-height: 1.45;

    font-weight: 400;
}


/* =========================================================
   BOTTOM BLUE LINE
========================================================= */

.academic-card-bottom {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 5px;

    background: #0755bd;
}


/* CENTER NOTCH */

.academic-card-bottom::before {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    transform: translateX(-50%);

    width: 35px;

    height: 17px;

    background: #0755bd;

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


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

@media (max-width: 1100px) {

    .academic-provisions-container {

        width: calc(100% - 50px);
    }

    .academic-provisions-grid {

        gap: 18px;
    }

    .academic-provision-card {

        padding-left: 22px;

        padding-right: 22px;
    }

    .academic-card-content h3 {

        font-size: 17px;
    }

    .academic-card-intro {

        font-size: 12px;
    }

    .academic-card-list p {

        font-size: 11.5px;
    }
}


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

@media (max-width: 767px) {

    .academic-provisions-section {

        padding: 50px 0 60px;
    }

    .academic-provisions-container {

        width: calc(100% - 30px);
    }

    .academic-provisions-header {

        margin-bottom: 30px;
    }

    .academic-provisions-header h2 {

        font-size: 32px;
    }

    .academic-provisions-header p {

        font-size: 13px;
    }

    .academic-header-decoration > span {

        width: 45px;
    }

    .academic-provisions-grid {

        grid-template-columns: 1fr;

        gap: 22px;
    }

    .academic-provision-card {

        min-height: 380px;

        padding: 108px 24px 30px;
    }

    .academic-card-content h3 {

        font-size: 18px;
    }

    .academic-card-intro {

        font-size: 13px;
    }

    .academic-card-list p {

        font-size: 12px;
    }
}


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

@media (max-width: 480px) {

    .academic-provisions-container {

        width: calc(100% - 20px);
    }

    .academic-provisions-header h2 {

        font-size: 28px;
    }

    .academic-provisions-header p {

        font-size: 12px;
    }

    .academic-provision-card {

        padding-left: 20px;

        padding-right: 20px;
    }

    .academic-card-content h3 {

        font-size: 17px;
    }

    .academic-card-intro {

        font-size: 12px;
    }

    .academic-card-list p {

        font-size: 11.5px;
    }
}



/* =========================================================
   GROUP A - MOBILE
   FORCE SAME LAYOUT AS GROUP B
========================================================= */

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

    /* GROUP A PANEL */

    .subject-structure-section:not(.group-b-section)
    .subject-side-panel {

        min-height: 145px !important;
        height: 145px !important;

        

        padding: 25px !important;

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

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

        gap: 18px !important;

        box-sizing: border-box;

        text-align: left !important;
    }


    /* ICON */

    .subject-structure-section:not(.group-b-section)
    .subject-icon-circle {

        width: 58px !important;
        height: 58px !important;

        min-width: 58px !important;

        margin: 0 !important;

        flex: 0 0 58px !important;
    }


    .subject-structure-section:not(.group-b-section)
    .subject-icon-circle i {
        font-size: 24px !important;
    }


    /* TITLE */

    .subject-structure-section:not(.group-b-section)
    .subject-side-panel h3 {

        width: auto !important;

        margin: 0 !important;

        font-size: 16px !important;

        line-height: 1.3 !important;

        text-align: center !important;

        flex: 0 0 auto !important;
    }


    /* DIVIDER */

    .subject-structure-section:not(.group-b-section)
    .subject-panel-divider {

        display: none !important;
    }


    /* DESCRIPTION */

    .subject-structure-section:not(.group-b-section)
    .subject-side-panel p {

        width: auto !important;

        margin: 0 !important;

        font-size: 16px !important;

        line-height: 1.6 !important;

        text-align: left !important;

        flex: 0 0 auto !important;
    }


    /* LARGE ICON */

    .subject-structure-section:not(.group-b-section)
    .subject-large-icon {

        display: none !important;
    }


    /* TABLE */

    .subject-structure-section:not(.group-b-section)
    .subject-table-wrapper {

        grid-template-columns: 1fr !important;

        border-radius: 16px !important;

        overflow: hidden !important;
    }


    .subject-structure-section:not(.group-b-section)
    .subject-table-container {

        width: 100%;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch;
    }


    .subject-structure-section:not(.group-b-section)
    .subject-table {

        width: 100%;

        min-width: 780px !important;
    }


    .subject-structure-section:not(.group-b-section)
    .subject-table thead th {

        height: 52px;

        padding: 11px 16px;

        font-size: 16px;

        white-space: nowrap;
    }


    .subject-structure-section:not(.group-b-section)
    .subject-table tbody td {

        padding: 9px 14px;

        font-size: 16px;
    }
}


/* =========================================================
   GROUP A - SMALL MOBILE
========================================================= */

@media screen and (max-width: 480px) {

    .subject-structure-section:not(.group-b-section)
    .subject-side-panel {

        min-height: 130px !important;
        height: 130px !important;

        padding: 20px 15px !important;

        gap: 16px !important;
    }


    .subject-structure-section:not(.group-b-section)
    .subject-icon-circle {

        width: 52px !important;
        height: 52px !important;

        min-width: 52px !important;

        flex-basis: 52px !important;
    }


    .subject-structure-section:not(.group-b-section)
    .subject-icon-circle i {

        font-size: 22px !important;
    }


    .subject-structure-section:not(.group-b-section)
    .subject-side-panel h3 {

        font-size: 14px !important;
    }


    .subject-structure-section:not(.group-b-section)
    .subject-side-panel p {

        font-size: 17px !important;
        font-weight: 700;
    }


    .subject-structure-section:not(.group-b-section)
    .subject-table {

        min-width: 720px !important;
    }
}

.group-a-section .subject-side-panel h3 {
    font-size: 16px !important;
}


/* ============================================================================
   CLASS X PAGE - EVERY SECTION AND THE BANNER ON THE HEADER AND FOOTER GUTTER
   ----------------------------------------------------------------------------
   The header and footer agree with each other at every width. The seven sections
   between them did not, and they did not agree with each other either.

   THREE WIDTH SYSTEMS WERE IN USE AT ONCE

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

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

   This page used none of it. Each container had its own arithmetic:

       .program-overview-container   width: calc(100% - 80px); max-width: 1440px
       .why-program-container        width: calc(100% - 80px); max-width: 1440px
       .pom-container                width: calc(100% - 80px); max-width: 1440px
       .subject-structure-container  width: calc(100% - 96px); max-width: 1440px
       .assessment-container         width: calc(100% - 96px); max-width: 1440px
       .academic-provisions-container width: calc(100% - 96px); max-width: 1440px

   A fixed pixel inset cannot track a percentage one, and a 1440px cap is 60px
   wider than the header's 1380px. So the page was wrong by a different amount at
   every width, and the two groups of sections were 8px apart from each other.

   MEASURED ON THE LIVE PAGE, before this. Container edge against the header
   content edge; negative means the container reached further out than the header.

       viewport   header edge     -80px group      -96px group
       1585       102 .. 1482     -30              -30
       1425        57 .. 1368     -17               -9
       1265        51 .. 1214     -11               -3
       1009        30 ..  979      -5              +18
        753        23 ..  730      -3  /  +2       +25
        375        15 ..  360      -5              +33

   33px too far in on a phone and 30px too far out on a desktop, in both
   directions at once depending on the width. That is what reads as untidy.

   THE BANNER

   .secondary-banner-content carries its own padding, at line 1434:

       padding: 65px 40px 65px 7%;

   That 7% is a percentage of the content column's own width, so the "SECONDARY
   LEVEL" label landed 5px to 43px right of the header logo depending on the
   width - 9px out at 1585, 43px at 1425, 38px at 1265, 31px at 1009, 15px at
   753, 5px at 375.

   Left padding goes to zero and the banner takes the ladder gutter on its left,
   so the label sits on the header logo edge. The image keeps zero on the right,
   so it still runs off the edge of the screen: it already did, and this does not
   change that. box-sizing is set because .secondary-banner is width:100% and
   would otherwise be made wider than the viewport by the padding.

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

       all seven sections against the header, both edges   worst 0px
       banner label against the header logo               0px
       gap between the image and the right screen edge    0px
       page horizontal overflow                           0px

   THE ONE THING THIS DOES NOT CHANGE

   .program-overview-container is a white card with a 1px border, a 20px radius
   and a drop shadow, and it keeps its own 50px padding, 35px under 1200px and
   18px on a phone. So its border now lines up with the header, and the text
   inside it sits 50px inside that. The other six have no padding, so their text
   is exactly on the line. That is a card, not an oversight, and it is left
   alone here. If the card's inner text should sit on the header line instead,
   that is one more declaration - padding-left and padding-right of 0 on the
   card - but it would make the card 100px wider than the header at 1600px, so it
   is not done silently.

   SCOPE

   Two new classes. cxgut on the seven section containers, cxbnr on the banner
   section, eight lines in secondarylevel-classx.php, each of them a class name
   only. Nothing existing is edited and no selector is reused.
   css/Programmes/Academic/secondarylevel-classx.css is loaded by that page
   alone - verified, no other page references it - so this cannot reach another
   page. Removing the two class names reverts all of it.

   The !important already on .pom-container in the 767px, 480px and 360px blocks
   is beaten by source order, not by specificity: every rule here is also
   !important, and all of them sit after those blocks.
   ============================================================================ */

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

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

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

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

/* ---------- the banner: label on the header edge, image still full bleed ---------- */

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

.secondary-banner.cxbnr .secondary-banner-content {
    padding-left: 0 !important;
}

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

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

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

/* ============================================================================
   GROUP A MATCHES GROUP B ON A PHONE
   ----------------------------------------------------------------------------
   The two Subject Structure sections are the same component twice. The markup is
   identical apart from the words, but the CSS was written out twice, as two
   separate 800-line blocks, and the copies drifted apart.

   The drift is not random. A late block at line 8081 targets

       .subject-structure-section:not(.group-b-section) ...

   which by definition matches Group A and excludes Group B. On a phone it sets
   16px on the panel heading, 17px on the panel text, text-align:center on the
   heading, and 11px 16px / 9px 14px padding on the table cells. Group B has 16px
   and 12-15px, text-align:left, and 10px 12px / 9px 10px. So on a phone the
   same component appeared twice at two different sizes, and the second block's
   two attempts to correct it do not agree with each other either:

       line 8276  :not(.group-b-section) ... h3 { font-size: 14px !important }
       line 8298  .group-a-section  ... h3 { font-size: 16px !important }

   Both are !important. The :not() selector is (0,3,0) against (0,2,0), so 8298
   never applies and the heading renders at 14px.

   MEASURED ON THE LIVE PAGE, before this, computed styles compared side by side

       390px   panel height      A 130px     B 130px
               panel gap         A  16px     B  12px
               icon circle       A  52px     B  50px
               icon glyph        A  22px     B  20px
               h3 font-size      A  14px     B  16px
               h3 text-align     A center    B left
               p font-size       A  17px     B  16px
               th padding        A 11px 16px B  8px 9px
               td padding        A  9px 14px B  8px

   Three further differences were not visible in that list but were real:

   - the table header colour. Group A's is #2949AD, Group B's is #123F94. Two
     different blues for the same row of headings.
   - the icon circle carried flex:0 0 58px and the heading and text carried
     flex:0 0 auto, all from the :not() block. Group B has no flex shorthand at
     all, so its items may shrink. That is why the heading measured 84px against
     Group B's 95px at the same width - A's items could not give ground.
   - the table header row height, 52px on Group B and unset on Group A.

   WHAT THIS DOES

   Group A is given Group B's own computed values in each of Group B's four
   phone bands - 576 to 767, 481 to 575, 360 to 480, and 359 and under. The
   values were read off the live page rather than copied out of the CSS, so what
   is written here is what Group B actually resolves to, including the two places
   where the cascade gives Group B something other than what its own block says.

   flex:initial restores the default 0 1 auto that Group B has, so the two rows
   of text lay out identically from here on.

   MEASURED AFTER, on the live page, nine widths from 320 to 700, comparing
   computed styles on both sections property by property

       identical on every styling property at all nine widths

   The one number that still differs is the width of the paragraph element, and
   that is the words: Group A reads "Select One or Two" and Group B reads "Select
   Three to Five". Select Three is genuinely wider than Select One at the same
   font size. No stylesheet value can close that, and nothing is clipped.

   SCOPE

   Group A only, and only at 767px and below. Group B is not touched at all, and
   768px and up is outside every query here, so the tablet and desktop layouts of
   both sections are exactly as they were. No markup change and no new class -
   this file's existing group-a-section class is the hook, and the selectors are
   written .subject-structure-section.group-a-section so they carry (0,3,0) and
   beat the :not() block on equal footing, by being later in the file.

   Nothing existing is edited. Reverting is deleting this block.
   ============================================================================ */

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

    /* ---------- common to all four phone bands ---------- */

    /* Group B sets no flex shorthand on these, so its items may shrink.
       Group A was given flex:0 0 auto, which pinned its widths. */
    .subject-structure-section.group-a-section .subject-icon-circle {
        flex: initial !important;
        margin: 0 !important;
    }

    .subject-structure-section.group-a-section .subject-side-panel h3 {
        flex: initial !important;
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

    .subject-structure-section.group-a-section .subject-side-panel p {
        flex: initial !important;
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        text-align: left !important;
    }

    /* Group A's table header is #2949AD, Group B's is #123F94 */
    .subject-structure-section.group-a-section .subject-table thead th {
        height: 52px !important;
        background-color: #123F94 !important;
    }
}

/* ---------- 576px to 767px : values read off Group B at a 685px viewport ---------- */

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

    .subject-structure-section.group-a-section .subject-side-panel {
        min-height: 145px !important;
        height: 145px !important;
        padding: 25px 20px !important;
        gap: 18px !important;
    }

    .subject-structure-section.group-a-section .subject-icon-circle {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
    }

    .subject-structure-section.group-a-section .subject-icon-circle i {
        font-size: 24px !important;
    }

    .subject-structure-section.group-a-section .subject-table {
        min-width: 780px !important;
    }

    .subject-structure-section.group-a-section .subject-table thead th {
        padding: 10px 12px !important;
        white-space: nowrap !important;
    }

    .subject-structure-section.group-a-section .subject-table tbody td {
        padding: 9px 10px !important;
    }
}

/* ---------- 481px to 575px : read off Group B at a 505px viewport ---------- */

@media screen and (max-width: 575px) {

    .subject-structure-section.group-a-section .subject-side-panel {
        min-height: 135px !important;
        height: 135px !important;
        padding: 22px 18px !important;
        gap: 14px !important;
    }

    .subject-structure-section.group-a-section .subject-icon-circle {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
    }

    .subject-structure-section.group-a-section .subject-icon-circle i {
        font-size: 22px !important;
    }

    .subject-structure-section.group-a-section .subject-table {
        min-width: 740px !important;
    }

    /* Group B lets this band's headings wrap, the other three do not */
    .subject-structure-section.group-a-section .subject-table thead th {
        padding: 9px 10px !important;
        white-space: normal !important;
    }

    .subject-structure-section.group-a-section .subject-table tbody td {
        padding: 8px 9px !important;
    }
}

/* ---------- 360px to 480px : read off Group B at a 375px viewport ---------- */

@media screen and (max-width: 480px) {

    .subject-structure-section.group-a-section .subject-side-panel {
        min-height: 130px !important;
        height: 130px !important;
        padding: 20px 15px !important;
        gap: 12px !important;
    }

    .subject-structure-section.group-a-section .subject-icon-circle {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
    }

    .subject-structure-section.group-a-section .subject-icon-circle i {
        font-size: 20px !important;
    }

    .subject-structure-section.group-a-section .subject-table {
        min-width: 720px !important;
    }

    .subject-structure-section.group-a-section .subject-table thead th {
        padding: 8px 9px !important;
        white-space: nowrap !important;
    }

    .subject-structure-section.group-a-section .subject-table tbody td {
        padding: 8px !important;
    }
}

/* ---------- 359px and under : read off Group B at a 305px viewport ---------- */

@media screen and (max-width: 359px) {

    .subject-structure-section.group-a-section .subject-side-panel {
        min-height: 120px !important;
        height: 120px !important;
        padding: 18px 10px !important;
        gap: 9px !important;
    }

    .subject-structure-section.group-a-section .subject-icon-circle {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }

    .subject-structure-section.group-a-section .subject-icon-circle i {
        font-size: 18px !important;
    }

    .subject-structure-section.group-a-section .subject-table {
        min-width: 680px !important;
    }

    .subject-structure-section.group-a-section .subject-table thead th {
        padding: 8px !important;
        white-space: nowrap !important;
    }

    .subject-structure-section.group-a-section .subject-table tbody td {
        padding: 7px !important;
    }
}

/* ============================================================================
   SECTION HEADINGS AT ONE SIZE - THE PROGRAMME OVERVIEW CARD WAS THE ODD ONE
   ----------------------------------------------------------------------------
   The site already has a heading scale, and it is enforced. global-typography.css
   sets it at the top level and then repeats it at every breakpoint, all of it
   !important:

       line  22   h2 { font-size: 35px !important; line-height: 1.25 !important; }
       line  33   h3 { font-size: 30px !important; line-height: 1.3  !important; }
       line  44   h4 { font-size: 25px !important; line-height: 1.35 !important; }
       line 283   h2 { font-size: 35px !important; }   at 1399px and below
       line 331   h2 { font-size: 35px !important; }   at  991px and below
       line 379   h2 { font-size: 35px !important; }   at  767px and below
       line 427   h2 { font-size: 35px !important; }   at  575px and below

   Six of the seven sections on this page simply take that, so every section
   heading is 35px at every width. One does not.

   MEASURED ON THE LIVE PAGE, before this, every section h2 on the page

       viewport   six sections   programme-overview-modern
       1585          35px              35px
       1265          35px              35px
       1009          35px              35px
        753          35px              35px
        685          35px              27px
        545          35px              27px
        465          35px              24px
        375          35px              24px
        345          35px              22px
        305          35px              22px

   So the same heading is 35px on a tablet and 22px on a small phone, while the
   five headings around it stay at 35px. Scrolling the page on a phone, one
   section visibly steps down and the rest do not.

   WHY IT HAPPENED

   The page's own stylesheet sets .pom-header h2 seven times, and three of those
   carry !important:

       3426   .pom-header h2 { font-size: 27px !important; }   at 767px and below
       3885   .pom-header h2 { font-size: 24px !important; }   at 480px and below
       4036   .pom-header h2 { font-size: 22px !important; }   at 360px and below
       3329   .pom-header h2 { font-size: 38px; }               at 768-900px, loses
       4435   .pom-header h2 { font-size: 46px; }               at 480px and below, loses
       4491   .pom-header h2 { font-size: 38px; }               at 991px and below, loses
       4512   .pom-header h2 { font-size: 32px; }               at 767px and below, loses
       4534   .pom-header h2 { font-size: 29px; }               at 480px and below, loses

   Five of the eight lose, to each other or to global-typography.css, and only the
   three !important ones actually render. The heading is not 46px or 38px or 32px
   or 29px on a phone, which is what reading the file suggests. It is 22px,
   because that is the only one that wins.

   WHAT THIS DOES

   One declaration. .pom-header h2 goes back to the site scale at 767px and
   below, where the other six sections already are.

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

       all seven section h2 at 35px                     every width
       line-height 43.75px on all seven                  every width
       heading inside its own header box, no spill      every width
       page horizontal overflow                         0px at every width

   WHAT IT COSTS

   The heading is a sentence - "Everything you need to know about our Secondary
   Level Programme" - so at 35px it now wraps to more lines on a phone than it
   did at 24px: 4 lines at 480px, 5 at 390px, 7 at 320px. That is the honest
   price of a uniform scale, and the neighbouring sections already pay it, since
   Additional Academic Provisions runs to 3 lines at the same 320px. The heading
   grows taller and the section grows with it; nothing overlaps and nothing
   overflows.

   NOT CHANGED

   The two h3 inside .pg-side-panel - "Programme Structure" and "Subject
   Selection Guidelines" - are 21px, 19px and 18px on a phone, set by rules 3579,
   3951 and 4067. Those are labels inside a card, the same role as
   .subject-side-panel h3, which is 16px on a phone. They are a component of their
   own and are deliberately smaller than a section heading, so they are left
   alone. Raising them to 30px would overflow the narrow panel they sit in.

   The card body headings - the h3 in assessment-section and
   academic-provisions-section - are 30px at every width already and are not
   touched.

   SCOPE

   One section, one heading, 767px and below. Nothing above 767px is inside the
   query. No markup change. Nothing existing is edited; the seven pre-existing
   .pom-header h2 rules are all still in place, overridden rather than removed.
   Reverting is deleting this block.
   ============================================================================ */

@media screen and (max-width: 767px) {
    .program-overview-modern .pom-header h2 {
        font-size: 35px !important;
    }
}
/* =========================================================
   BANNER PHOTO RUNS TO THE TOP AND BOTTOM EDGES
   ------------------------------------------------------------
   The navy bands above and below the photograph were not
   padding and not the curve - they were the flex container
   centring an auto-height child:

       .secondary-banner-inner { align-items: center }
       .secondary-banner-image { width 58%; right 0;
                                 clip-path ellipse(70% 90% at 72% 50%) }

   .secondary-banner-image is given no height of its own, so
   with align-items:center it was sized to its content - the
   photograph at its natural 1717x916 ratio - and then centred
   inside a 455px row. Whatever the row had left over became
   navy, split evenly:

       viewport   banner h   photo h   band above   band below
       1382px      455.0      372.1       41.4         41.4
       1000px      526.9      267.6      129.6        129.6

   align-self:stretch gives the photo div the full cross size
   of the row instead, .secondary-image-circle is already
   height:100% and its img is already height:100% object-fit:
   cover, so the picture now reaches both edges with no other
   change needed.

   The curve is unaffected. Its vertical radius is 90% of the
   box height, so the ellipse always extends past the top and
   bottom edges and only the left side is cut - exactly as
   before.

   Held to min-width 768px. Below that .secondary-banner-inner
   turns into a column with an explicit height on the photo
   (height 260px, then 220px at 480px), where the cross axis is
   horizontal and nothing needs stretching.

   The band's text, the badge, the rule, the 58%/57% width, the
   clip-path and the 455px/430px/390px min-heights are all
   untouched.
   ========================================================= */

@media (min-width: 768px) {
    .secondary-banner.cxbnr .secondary-banner-image {
        align-self: stretch !important;
    }
}
/* =========================================================
   "WHY CHOOSE OUR PROGRAMME?" - THE SENTENCE CENTRES
   ------------------------------------------------------------
   The icon, the rule, the eyebrow and the heading were already
   on the container's centre line. Only the sentence under them
   was not:

       .why-program-heading  text-align: center          (line 2493)
       .why-program-heading p max-width 650px;
                              margin: 15px auto 0       (line 2595)
       .odlc-body-text       margin: 0 !important       (global-typography.css)

   The p carries class="odlc-body-text", and that rule's
   margin:0 !important wipes out the auto side margins the
   page's own rule sets, so the 650px box was pinned to the
   left edge of the container and its centred text sat 145px
   left of everything above it:

       container   29.6 .. 955.3   centre 492.5
       icon        463.4 .. 521.4   off  -7.6
       line         29.6 .. 955.3   off  -7.6
       eyebrow     365.2 .. 619.6   off  -7.6
       heading      29.6 .. 955.3   off  -7.6
       sentence     29.6 .. 679.6   off -145.4   <- the odd one

   Only the two inline margins are restored. The top margin
   stays at whatever it computes to today, so no vertical
   spacing moves.

   The 650px measure, the 16px type, the centred text-align and
   the two lines it wraps to are untouched.
   ========================================================= */

.why-program-heading p {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* ============================================================================
   THE REFERENCE TYPE SCALE, FROM "WHY CHOOSE OUR PROGRAMME?" DOWN
   ----------------------------------------------------------------------------
   The scale this page's own stylesheet already declares, re-asserted so that it
   is the thing that renders. Four things on the page were not showing it.

   1  .why-program-heading h2 carries class="odlc-section-title", and
      global-typography.css:419 pins that class at 38px !important, which beat
      the page's own clamp(34px, 4vw, 48px) at line 2548. It rendered 38px at
      1542px and 36px at 1000px.

   2  .why-program-heading p carries class="odlc-body-text", and
      global-typography.css pins that at 16px !important, so the page's own
      15px / 1.6 at line 2595 never applied. It rendered 16px at every width.

   3  The first feature card's title carries class="odlc-custom-card-title",
      which is 25px !important (global-typography.css:448). The other three
      titles carry no class at all and rendered at the page's own 17px, so the
      four cards in the same row were set at three different sizes:

          card 01  25px    card 02  17px    card 03  17px    card 04  17px

   4  Every title is wrapped in <strong> or <b>, and neither the page's
      stylesheet nor this one sets a weight on the wrapper, so the browser's
      bolder took the 700 on the parent to 900. The scale says 700.

   MEASURED ON THE LIVE PAGE, before this

      element                      rendered        the scale says
      .why-program-heading h2      38 / 45.6 700  clamp(34,4vw,48) / 1.15 / 800
      .why-program-heading p       16 / 27.2 400  15 / 1.6 / 400
      .why-feature-card h5 (01)    25 / 32.5 700  17 / 1.3 / 700
      .why-feature-card h5 (02-04) 17 / 22.1 900  17 / 1.3 / 700
      .pg-item h6 b                17 / 22.9 900  17 / 1.35 / 700

   WHAT WAS ALREADY RIGHT AND IS NOT TOUCHED

   Measured across all six sections below this one, every value already resolved
   to the scale at its own breakpoint - the Subject Structure tables, both
   groups, the Assessment boxes and the Additional Academic Provisions cards
   included. The only reason .pg-item p reads 14px on a desktop and 16px at
   1000px is that the scale itself steps it at 1100px, and the same is true of
   .pg-side-panel h3, .subject-table th and td, and .academic-card-intro. Those
   are the scale working, not the scale being overridden, so nothing here moves.

   NOTHING ELSE

   No colour, no weight outside the four headings and their labels, no measure,
   no spacing, no markup. Colour on the section heading is left as
   global-typography.css sets it, because the scale does not set one.
   ============================================================================ */

.why-program-heading h2 {
    font-size: clamp(34px, 4vw, 48px) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

.why-program-heading p {
    font-size: 15px !important;
    line-height: 1.6 !important;
}

.why-feature-card h5,
.why-feature-card h5 strong {
    font-size: 17px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.pg-item h6,
.pg-item h6 b {
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

/* ---------- the scale's own two phone steps, which are 31px and 27px ---------- */

@media screen and (max-width: 767px) {
    .why-program-heading h2 {
        font-size: 31px !important;
    }

    .why-program-heading p {
        font-size: 14px !important;
    }
}

@media screen and (max-width: 480px) {
    .why-program-heading h2 {
        font-size: 27px !important;
    }

    .why-program-heading p {
        font-size: 13px !important;
    }
}
/* ============================================================================
   BODY TEXT AT 16px FROM "WHY CHOOSE OUR PROGRAMME?" DOWN
   ----------------------------------------------------------------------------
   The scale above steps body copy down to suit small cards - 13px in a feature
   card, 14px in a Programme Overview item, 12px in a subject panel, 11.5px in an
   Academic Provisions list, and 11px to 13px in the Subject Structure tables at
   the narrow breakpoints. Sixteen is the size the rest of the site reads at,
   global-typography.css pins every .odlc-body-text paragraph to it, and the
   plain p rule at the top of this stylesheet sets it.

   Everything below is now held at 16px at every width, with no phone step, so
   the copy does not shrink again on the way down.

   MEASURED ON THE LIVE PAGE, before this

       element                          was        becomes
       .why-program-heading p           15         16
       .why-feature-card p              13         16
       .pom-header p                    15         16
       .pg-item p                14 / 16             16
       .pg-check-item p                 16         16   already
       .subject-side-panel p    12 / 16 / 13         16
       .subject-table th         11 - 13             16
       .subject-table td         11 - 13             16
       .assessment-header p              14         16
       .assessment-item-content p        13         16
       .certification-intro              13         16
       .certification-item p             13         16
       .academic-provisions-header p     14         16
       .academic-card-intro        12 / 13           16
       .academic-card-list p        11.5 / 12        16

   The table header row is included with the body cells. At 13px against 16px
   the header read as the smaller of the two, which is the wrong way round.

   NOT TOUCHED

   Headings. .why-program-heading h2 stays at the scale's clamp(34px, 4vw, 48px),
   .pom-header h2 at 46px, .subject-structure-header h2 at 46px and the two
   assessment headers at 42px, and the card and panel titles stay at the scale's
   17px to 19px. The eyebrow labels and the group and card numbers are labels,
   not body copy, and stay where the scale puts them.

   .certificate-heading at 9px and .certificate-subheading at 10px are also left
   alone. They are the type on the 112x145px paper inside .certificate-visual -
   a picture of a certificate, not text anyone reads. At 16px it would not fit.

   No colour, no measure, no spacing, no markup, and no rule above this point in
   the file is altered - every size here overrides rather than replaces.
   ============================================================================ */

.why-program-section .why-program-heading p,
.why-program-section .why-feature-card p,
.program-overview-modern .pom-header p,
.program-overview-modern .pg-content p,
.subject-structure-section .subject-side-panel p,
.subject-structure-section .subject-table th,
.subject-structure-section .subject-table td,
.assessment-section .assessment-header p,
.assessment-section .assessment-item-content p,
.assessment-section .certification-intro,
.assessment-section .certification-item p,
.academic-provisions-section .academic-provisions-header p,
.academic-provisions-section .academic-card-intro,
.academic-provisions-section .academic-card-list p {
    font-size: 16px !important;
}
/* ============================================================================
   GROUP A / GROUP B LABEL - EYEBROW WITH A RULE EACH SIDE
   ----------------------------------------------------------------------------
   It was a solid lozenge. Measured, Group A measured 322px wide and 27px tall
   to hold 47 characters of 13px text, and Group B 373px for its label - so the
   two stretched pills sat under a 46px heading with nothing to carry their
   weight, and the shape read as a stretched bar rather than a label.

   It now uses the pattern this page already has twice. .academic-header-decoration
   at line 7452 and .why-heading-line at line 2532 are both a centred flex row
   with a short rule on each side of the words, and both sit under a section
   heading exactly as this does. The group label joins them:

       solid #2949ad pill, 5px 15px padding, 20px radius, white 13px/600
       becomes
       13px/700 uppercase #2949ad on the section background, with a 70px 1px
       #2949ad rule each side and a 15px gap

   The rules are the same 70px the academic header uses. They are allowed to
   shrink rather than to vanish - flex 0 1 70px with a 20px floor - because the
   label is 47 characters and a phone has about 340px to give. They step to 45px
   at 767px and 26px at 480px, which is the academic header's own 45px step at
   767px and one step smaller below it.

   MEASURED ON THE LIVE PAGE, before this

       group A   322 x 27px   text overflowed the pill by 0px - it was not
       group B   373 x 27px   broken, only stretched
       h2.bottom -> label.top gap   15.0px, unchanged

   SCOPE

   The two labels on this page only - secondarylevel-classx.php:537 and :744.
   Nothing else in the project uses .subject-group-label. The section heading,
   its 14px margin, the table below and the two blue side panels are untouched,
   and no rule above this point in the file is altered.
   ============================================================================ */

.subject-structure-section .subject-group-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 15px !important;

    width: 100% !important;
    padding: 0 !important;

    background: transparent !important;
    border-radius: 0 !important;

    color: #2949ad !important;

    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;

    text-transform: uppercase !important;
}

.subject-structure-section .subject-group-label::before,
.subject-structure-section .subject-group-label::after {
    content: "" !important;

    display: block !important;

    flex: 0 1 70px !important;
    min-width: 20px !important;

    height: 1px !important;

    background: #2949ad !important;
    border-radius: 0 !important;
}

/* ---------- the rules step down with the label ---------- */

@media screen and (max-width: 767px) {
    .subject-structure-section .subject-group-label {
        gap: 12px !important;
    }

    .subject-structure-section .subject-group-label::before,
    .subject-structure-section .subject-group-label::after {
        flex-basis: 45px !important;
    }
}

@media screen and (max-width: 480px) {
    .subject-structure-section .subject-group-label {
        gap: 10px !important;
    }

    .subject-structure-section .subject-group-label::before,
    .subject-structure-section .subject-group-label::after {
        flex-basis: 26px !important;
    }
}
/* ============================================================================
   THE GLOBAL TYPE SYSTEM, FROM "WHY CHOOSE OUR PROGRAMME?" DOWN
   ----------------------------------------------------------------------------
   The six sections below that heading were being set by this page's own
   stylesheet, which uses its own arithmetic - 46px section headings, 13px and
   11.5px card copy, 11px to 13px table cells. global-typography.css already has
   one scale for the whole site and every one of those numbers is off it.

   Every element from that heading down is mapped onto the role it is playing,
   and given that role's values and that role's own phone ladder.

       section heading      -> .odlc-section-title      38 / 1.2 / 700
       body copy            -> .odlc-body-text          16 / 1.7
       card and item title  -> .odlc-small-card-title   17 / 1.35 / 700
       eyebrow label        -> .odlc-section-eyebrow    12 / 1.2 / 700 / ls 2px

   Three of the section headings and the Why Choose sentence already carry the
   matching odlc-* class, so the scale was reaching them; the other three
   headings, both eyebrows and every card title carry no class at all, which is
   why they were free to drift.

   MEASURED ON THE LIVE PAGE, before this, at 1542px

       element                            was        the scale says
       .why-program-heading h2            48 / 800    38 / 700
       .pom-header h2                    46 / 800    38 / 700
       .subject-structure-header h2      46 / 800    38 / 700
       .assessment-header h2             42 / 800    38 / 700
       .academic-provisions-header h2    42 / 800    38 / 700
       .pom-eyebrow                      14 / 800    12 / 700
       .subject-group-label              13 / 700    12 / 700, ls 2px
       .pg-side-panel h3                 19          17
       .why-feature-card h5 (all four)   17          17
       .pg-item h6 b                     17          17
       .subject-side-panel h3            16          17
       .assessment-box-title h3          18          17
       .assessment-item-content h4       15          17
       .academic-card-content h3         19          17
       every <p>                         16 / 1.5-1.7   16 / 1.7

   Five different section-heading sizes on one page become one.

   THE TABLE CELLS ARE LEFT AT 16px

   The scale has no table role. The tables were put at 16px on request in the
   previous change and that is kept, rather than being remapped to
   .odlc-small-card-text's 14px on the strength of my own inference. Their
   line-height is untouched too.

   BODY TEXT IS HELD AT 16px AT EVERY WIDTH

   .odlc-body-text steps to 15px at 991px and 14px at 575px. Body copy here is
   pinned at 16px instead, as asked for in the previous change. Everything else
   follows its own ladder.

   NOT TOUCHED

   .why-feature-number and .academic-card-number are decorative numerals - "01"
   in pale blue behind each card - not text anyone reads, and the scale has no
   role for them. The 9px and 10px type on the 112x145px .certificate-paper is
   the type of a drawn certificate and stays at that size. The section heading
   colour, every measure, every spacing value, the badge restyle, and the banner
   above this heading are all left exactly as they are.

   Nothing above this point in the file is edited. Every value here overrides.
   ============================================================================ */

/* ---------- SECTION HEADING ROLE : .odlc-section-title ---------- */

.why-program-heading h2,
.pom-header h2,
.subject-structure-header h2,
.assessment-header h2,
.academic-provisions-header h2 {
    font-size: 38px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
}

@media screen and (max-width: 1199px) {
    .why-program-heading h2,
    .pom-header h2,
    .subject-structure-header h2,
    .assessment-header h2,
    .academic-provisions-header h2 {
        font-size: 36px !important;
    }
}

@media screen and (max-width: 991px) {
    .why-program-heading h2,
    .pom-header h2,
    .subject-structure-header h2,
    .assessment-header h2,
    .academic-provisions-header h2 {
        font-size: 34px !important;
        line-height: 1.15 !important;
    }
}

@media screen and (max-width: 767px) {
    .why-program-heading h2,
    .pom-header h2,
    .subject-structure-header h2,
    .assessment-header h2,
    .academic-provisions-header h2 {
        font-size: 32px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.4px !important;
    }
}

@media screen and (max-width: 575px) {
    .why-program-heading h2,
    .pom-header h2,
    .subject-structure-header h2,
    .assessment-header h2,
    .academic-provisions-header h2 {
        font-size: 29px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.3px !important;
    }
}

/* ---------- BODY COPY ROLE : .odlc-body-text, held at 16px at every width ---------- */

.why-program-heading p,
.why-feature-card p,
.pom-header p,
.pg-item p,
.pg-check-item p,
.subject-side-panel p,
.assessment-header p,
.assessment-item-content p,
.certification-intro,
.certification-item p,
.academic-provisions-header p,
.academic-card-intro,
.academic-card-list p {
    font-size: 16px !important;
    line-height: 1.7 !important;
}

/* ---------- CARD AND ITEM TITLE ROLE : .odlc-small-card-title ---------- */

.why-feature-card h5,
.why-feature-card h5 strong,
.pg-side-panel h3,
.pg-item h6,
.pg-item h6 b,
.subject-side-panel h3,
.assessment-box-title h3,
.assessment-item-content h4,
.academic-card-content h3 {
    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

@media screen and (max-width: 1199px) {
    .why-feature-card h5,
    .why-feature-card h5 strong,
    .pg-side-panel h3,
    .pg-item h6,
    .pg-item h6 b,
    .subject-side-panel h3,
    .assessment-box-title h3,
    .assessment-item-content h4,
    .academic-card-content h3 {
        font-size: 16px !important;
    }
}

@media screen and (max-width: 991px) {
    .why-feature-card h5,
    .why-feature-card h5 strong,
    .pg-side-panel h3,
    .pg-item h6,
    .pg-item h6 b,
    .subject-side-panel h3,
    .assessment-box-title h3,
    .assessment-item-content h4,
    .academic-card-content h3 {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
}

@media screen and (max-width: 767px) {
    .why-feature-card h5,
    .why-feature-card h5 strong,
    .pg-side-panel h3,
    .pg-item h6,
    .pg-item h6 b,
    .subject-side-panel h3,
    .assessment-box-title h3,
    .assessment-item-content h4,
    .academic-card-content h3 {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
}

@media screen and (max-width: 575px) {
    .why-feature-card h5,
    .why-feature-card h5 strong,
    .pg-side-panel h3,
    .pg-item h6,
    .pg-item h6 b,
    .subject-side-panel h3,
    .assessment-box-title h3,
    .assessment-item-content h4,
    .academic-card-content h3 {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
}

@media screen and (max-width: 480px) {
    .why-feature-card h5,
    .why-feature-card h5 strong,
    .pg-side-panel h3,
    .pg-item h6,
    .pg-item h6 b,
    .subject-side-panel h3,
    .assessment-box-title h3,
    .assessment-item-content h4,
    .academic-card-content h3 {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
}

/* ---------- EYEBROW LABEL ROLE : .odlc-section-eyebrow ---------- */

.pom-eyebrow,
.subject-group-label {
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

@media screen and (max-width: 991px) {
    .pom-eyebrow,
    .subject-group-label {
        font-size: 11px !important;
        letter-spacing: 1.5px !important;
    }
}

@media screen and (max-width: 575px) {
    .pom-eyebrow,
    .subject-group-label {
        font-size: 10px !important;
        letter-spacing: 1.2px !important;
    }
}
/* ============================================================================
   GROUP LABEL - EYEBROW ROLE, AT THE SCALE'S SIZE
   ----------------------------------------------------------------------------
   The eyebrow rule in the block above reached .pom-eyebrow but not
   .subject-group-label, because the badge block earlier in this file writes that
   one as

       .subject-structure-section .subject-group-label      (0,2,0)

   while the eyebrow rule wrote it as

       .subject-group-label                                (0,1,0)

   Both carry !important, so the higher specificity wins on the badge block's
   13px / 1.3 / 0.6px, and the label was measured at 13px after the scale was
   applied instead of the 12px the scale gives.

   These four rules repeat the eyebrow ladder at (0,3,0) so it wins:

       12px / 1.2 / 700 / ls 2px     default
       11px / ls 1.5px               991px and below
       10px / ls 1.2px               575px and below

   Nothing else about the label changes - it keeps the two rules either side of
   it, the 15px gap, the transparent background and the #2949ad, all of which
   were set in the badge block and are not restated here.
   ============================================================================ */

.subject-structure-section .subject-group-label {
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

@media screen and (max-width: 991px) {
    .subject-structure-section .subject-group-label {
        font-size: 11px !important;
        letter-spacing: 1.5px !important;
    }
}

@media screen and (max-width: 575px) {
    .subject-structure-section .subject-group-label {
        font-size: 10px !important;
        letter-spacing: 1.2px !important;
    }
}
/* ============================================================================
   SUBJECT STRUCTURE HEADINGS - SAME TYPEFACE AS THE SECTIONS ABOVE
   ----------------------------------------------------------------------------
   All six section headings below "Why Choose Our Programme?" already agree on
   size, weight, line-height and letter-spacing. What they do not agree on is
   the typeface, and it is not the one the stylesheets ask for - neither is
   installed.

   The page loads one web font, Poppins, from header.php. Roboto and Inter are
   both named in the stylesheets and neither is fetched, so both fall through.
   What each heading actually renders in:

       .why-program-heading h2          asks Arial      renders Arial
       .pom-header h2                  asks Arial      renders Arial
       .subject-structure-header h2    asks Inter      renders Segoe UI
       .assessment-header h2           asks Inter      renders Segoe UI
       .academic-provisions-header h2  asks Inter      renders Segoe UI

   Segoe UI and Arial have different widths, so the same words in the same 36px
   occupy different space - which is what the mismatch looks like. Measured, all
   six boxes are 925.7px wide, but they are full-width blocks, so the visible
   difference is in the letterforms.

   The two sections above Subject Structure are in Arial, so the two Subject
   Structure headings - "Subject Structure" on both Group A and Group B - are
   given Arial and now render in it.

   SCOPE

   The two headings only, secondarylevel-classx.php:534 and :741. Nothing else in
   either section is touched: the group labels, the blue side panels, their
   headings and text, the table, and the row type below all keep what they have,
   and the two sections below - Assessment and Additional Academic Provisions -
   are left in Segoe UI, as asked. Say the word and all four are aligned.

   The three navies are not part of this. They measure #071D49, #071F52 and
   #061D4D - a difference of two and four in two channels, which is not
   visible side by side.
   ============================================================================ */

.subject-structure-section .subject-structure-header h2 {
    font-family: Arial, Helvetica, sans-serif !important;
}
/* ============================================================================
   ALL SIX SECTION HEADINGS ON ONE NAVY
   ----------------------------------------------------------------------------
   With the typeface settled, one difference was left between the headings, and
   it is the only one still standing. Measured on the live page:

       .why-program-heading h2          #071D49
       .pom-header h2                  #071F52
       .subject-structure-header h2    #061D4D   (both groups)
       .assessment-header h2           #061D4D
       .academic-provisions-header h2  #061D4D

   Three navies for one job. Four of the six already agree on #061D4D, so that
   is the one they are brought to - which means the Programme Overview and the
   Why Choose heading move, and the other four are restated unchanged so that
   this block does not depend on four separate page rules agreeing.

   Size, weight, line-height, letter-spacing and typeface are already identical
   across all six and are not restated here: 36px / 43.2px / 700 / -0.5px /
   Arial at this width, on the scale's own ladder below it.

   THE EYEBROWS ARE A SEPARATE THING AND ARE NOT TOUCHED

   The Programme Overview's eyebrow is #083C7C, which is what .odlc-section-eyebrow
   sets, and the two Subject Structure group labels are #2949AD, which is what
   their badge block sets. Those are two different labels in two different roles
   and changing one to match the other is a decision, not a correction.

   STILL NOT ALIGNED, AND DELIBERATELY SO

   Body copy below these headings is Arial in the Why Choose and Programme
   Overview sections and still Segoe UI in the other four, because only the two
   Subject Structure headings were asked for last turn. Say the word and the rest
   follows in one block.
   ============================================================================ */

.why-program-heading h2,
.pom-header h2,
.subject-structure-header h2,
.assessment-header h2,
.academic-provisions-header h2 {
    color: #061D4D !important;
}
/* ============================================================================
   THE WHY CHOOSE HEADING PUT BACK
   ----------------------------------------------------------------------------
   The previous block was written with five selectors, when only the Programme
   Overview heading was asked for. Three of the five restate the colour those
   headings already had, so nothing moved for them - but the fifth was not named:

       .why-program-heading h2    #071D49  ->  #061D4D

   Its own rule at line 2576 is .why-program-heading h2 { color: #071d49 }, so
   that value is restored here and the heading is left exactly as it was found.
   The two Subject Structure headings keep Arial and #061D4D from the turns
   where they were named.
   ============================================================================ */

.why-program-heading h2 {
    color: #071D49 !important;
}
/* ============================================================================
   PROGRAMME OVERVIEW HEADING TAKEN OFF THE WHY CHOOSE HEADING
   ----------------------------------------------------------------------------
   The reference is the h2 in .why-program-heading, read off the page:

       1380 x 45.6      #071D49      38px Arial, Helvetica, sans-serif

   Measured against it, the Programme Overview heading was already identical on
   four of the five properties - both are given the same 38px by the scale block
   above, on the same ladder, at the same 45.6px line box, both Arial, both 700,
   both -0.5px. One property was not:

       .pom-header h2       #061D4D   <- given to it two changes ago
       .why-program-heading h2   #071D49

   So the single declaration below moves the Programme Overview heading from
   #061D4D to #071D49 and leaves the other four alone.

   SCOPE

   The one heading. Not the Subject Structure headings, which were set to
   #061D4D in the turn where they were named and are not touched here - which
   leaves the Programme Overview and Why Choose on #071D49 and the two Subject
   Structure headings, Assessment and Additional Academic Provisions on
   #061D4D. Nothing else in the Programme Overview section is affected: its
   eyebrow, its paragraph, both blue panels and all eight rows are as they were.
   ============================================================================ */

.pom-header h2 {
    color: #071D49 !important;
}
/* ============================================================================
   PROGRAMME OVERVIEW HEADING - THE PHONE TIERS UNPINNED
   ----------------------------------------------------------------------------
   At a desktop width the Programme Overview heading now matches the Why Choose
   heading on all seven properties. Below 1199px it did not, and the reason is
   a block written earlier in this file:

       @media screen and (max-width: 767px) {
           .program-overview-modern .pom-header h2 { font-size: 35px !important; }
       }

   That block exists to hold this one heading at 35px, the size
   global-typography.css gives a bare h2. It carries (0,2,1). The scale ladder
   that the other five headings follow writes the same element as .pom-header h2,
   which is (0,1,0), so the 35px wins on specificity and the pin holds at every
   width below 1199px - measured 35px at 682px where the Why Choose heading is
   32px.

   Both tiers are restated at (0,2,1), later in the file than the pin, so they
   win on order. The values are the scale's own:

       32px / 1.15 / ls -0.4px     767px and below
       29px / 1.15 / ls -0.3px     575px and below

   The pin itself is left in place. Nothing above this point is edited.

   NOT A FONT PROPERTY

   The Programme Overview heading's box measures 63.6px against the Why Choose
   heading's 45.6px at 1542px. The extra 18px is the 42px 4px rule the heading
   carries underneath it - .pom-header h2::after at line 6918, margin 14px auto
   12px. That is decoration, not type, and it is left alone.
   ============================================================================ */

@media screen and (max-width: 767px) {
    .program-overview-modern .pom-header h2 {
        font-size: 32px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.4px !important;
    }
}

@media screen and (max-width: 575px) {
    .program-overview-modern .pom-header h2 {
        font-size: 29px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.3px !important;
    }
}
/* ============================================================================
   THE TWO PROGRAMME OVERVIEW BOXES SPAN THE WHOLE COLUMN
   ----------------------------------------------------------------------------
   .pg-container is not a section of its own. It sits inside .pom-container -
   line 342 opens it, line 520 closes .pom-container - so the column it has to
   match is its own parent, which already carries cxgut and already measures on
   the header's edge. It was not matching it, because it sets its own width in
   five places:

       .pg-container                    width: calc(100% - 80px); max-width: 1440px
       @media (max-width: 1100px)       width: calc(100% - 50px)
       @media (max-width: 767px)        width: calc(100% - 24px) !important
       @media (max-width: 480px)        width: calc(100% - 20px) !important
       @media (max-width: 360px)        width: calc(100% - 16px) !important

   A fixed pixel inset cannot track a percentage one, so it was wrong by a
   different amount at every width. Measured against the header before this:

       viewport   header column    pg-container      in by
       1582       101 .. 1481      141 .. 1441       40 / 40
       1182        96 .. 1086       96 .. 1086        0 / 0
        982       29.5 .. 952.5    54.5 .. 927.5      25 / 25
        682       30.7 .. 651.3    46.7 .. 635.3      16 / 16

   It happened to land on the line at 1182px and nowhere else, which is the worst
   kind of coincidence - it looks right in one window and wrong in every other.

   cxgut is the wrong tool here and is not used. Applying the ladder to this
   element would make it 92% of a parent that is already 1380px, which measured
   1269.6px at 1582 and put it 55px inside the header - worse, not better.

   One rule, at (0,2,0), so it outranks all five of the width rules above at
   every tier whatever their importance:

       .pom-container .pg-container   width 100%, no cap, no side margin

   which makes it exactly as wide as the column it lives in.

   SCOPE

   The two boxes - "Programme Structure" and "Subject Selection Guidelines" -
   and nothing else. .pom-container, the header above them, the section's own
   padding and all eight rows inside the boxes keep what they have. The section
   above, .program-overview-container, is a white card whose border already
   measures on the header line and whose 50px inner padding is its own design.
   ============================================================================ */

.pom-container .pg-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================================================
   GRADE 10: THE BLUE LINE DOWN THE LEFT OF THE BANNER PHOTOGRAPH
   ---------------------------------------------------------------------------

   TWO DECLARATIONS, TWO SELECTORS, BELOW 768px. No font, no colour, no
   background, no border, no radius, no shadow, no width, no height, no
   margin, no gap, no position, no inset, no clip-path, no object-fit. The
   photograph, its src and its alt are not touched. No markup is touched.

   --------------------------------------------------------------------------
   THE FAULT, MEASURED LIVE IN PHONE-WIDTH IFRAMES

       vw      banner padding-left      navy on the left      right
       390     15.5938px                15.59px               0.00px
       360     14.3906px                14.39px               0.00px
       320     12.7969px                12.80px               0.00px

   The photograph is full width - 374.41px of 390, 345.61 of 360, 307.20 of
   320 - so the band of navy down its left edge is exactly the banner's own
   left padding, and nothing on the right. That asymmetry is the line in the
   screenshot: the picture is flush to the right edge and inset on the left.

   --------------------------------------------------------------------------
   WHY THE BANNER HAS A LEFT PADDING AT ALL ON A PHONE

   It is the banner gutter, written to put the hero text on the header logo's
   left edge. It is right on a desktop, where the banner is two columns and
   only the text needs the inset. Below 768px this banner stacks - the
   photograph becomes width:100% - and the inset then lands on the picture
   instead of on the text. The page already has a full ladder for it:

       line 8415   line 8415  .secondary-banner.cxbnr { padding-left: max(4%, calc((100% - 1380px) / 2)) !important; }
       line 8426   @media (max-width: 1199px)   padding-left: max(3%, ...)
       line 8432   @media (max-width: 767px)    padding-left: max(5%, ...)
       line 8438   @media (max-width: 480px)    padding-left: max(4%, ...)

   so this is not a missing value. It is a present one, doing the job it was
   written for on the one element that should not be carrying it.

   --------------------------------------------------------------------------
   THE TWO DECLARATIONS

       .secondary-banner.cxbnr { padding-left: 0; }
       .secondary-banner.cxbnr .secondary-banner-content { padding-left: max(4%, 50% - 690px); }

   The gutter is not thrown away, it is moved. It comes off the banner, where
   it was pushing the photograph about, and goes onto the content, which is
   what it was written for. On this page the content's left padding was
   already zero -

       line 8421  .secondary-banner.cxbnr .secondary-banner-content { padding-left: 0 !important; }

   - so the text was sitting at the banner's padding-left and nothing else.
   Putting max(4%%, 50%% - 690px) back on the content gives the text the same
   4%% it effectively had, so THE TEXT DOES NOT MOVE AT ALL. Only the
   photograph moves, from 15.59px in to 0.

       vw      text before      text after       photo before   photo after
       390     15.59            15.59            15.59          0.00
       360     14.39            14.39            14.39          0.00
       320     12.80            12.80            12.80          0.00

   And 4%% is where the header logo already sits - measured at 15.59px / 14.41px
   / 12.80px, 4.00%% of the viewport at each width - so the text lands on the
   same edge as the logo above it and as the ECCE banners. It is the same
   expression written for .ecce-levelN-content earlier in this work.

   --------------------------------------------------------------------------
   SPECIFICITY, WHICH IS WHY THESE SELECTORS ARE THE LONGER ONES

   Both rules being overridden carry !important, so these do too, and each
   needs to match the specificity of the rule it supersedes:

       the banner rule   is line 8415  .secondary-banner.cxbnr, so .secondary-banner.cxbnr is written at the same weight
       the content rule  is line 8421  .secondary-banner.cxbnr .secondary-banner-content, so .secondary-banner.cxbnr .secondary-banner-content is written at the same weight

   Naming the shorter form would have lost on specificity rather than
   winning on source order, and the fix would have silently done nothing.

   --------------------------------------------------------------------------
   NOT TOUCHED, THOUGH FOUND

   On this banner the photograph sits 214.00px tall inside a 220.00px box,
   so 6.00px of navy shows underneath it - the same 6px the ECCE banners had,
   and it is a different fault with a different fix. It is left alone because
   this change is for the line on the left. Say the word and it is the same
   two lines of height that fixed it there.

   Above 768px nothing changes. The gutter stays on the banner where the
   two-column desktop banner needs it, the elliptical crop stays, and the
   photograph keeps its place in the right-hand column.

   The photograph, its src, its alt. The banner's background. The label chip,
   the h1 and its span, the rule, the duration chip, the paragraph, the
   button, the rings and the dots. Every section below the banner. Every
   other page and stylesheet.
============================================================================ */

/* ---- the line down the left of the banner photograph, gone on a phone ----
   The banner gutter is written to put the hero TEXT on the header logo's left
   edge. Below 768px this banner stacks and the photograph goes full width, so
   the inset lands on the picture instead: measured, 15.59px of navy down its
   left and 0.00px on its right, at 390, 360 and 320 alike.

   Moved rather than removed. The content's own left padding was already 0 on
   this page, so giving it max(4%%, 50%% - 690px) puts the text back on exactly
   the 4%% edge it was already reading - which is where the header logo sits -
   and the text does not move. Only the photograph moves, to 0.

   Both selectors match the specificity of the !important rules they
   supersede, so this wins on source order rather than tying. */

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

    .secondary-banner.cxbnr {
        padding-left: 0 !important;
    }

    .secondary-banner.cxbnr .secondary-banner-content {
        padding-left: max(4%, 50% - 690px) !important;
    }
}


/* ==========================================================================
   THE ASSESSMENT PANEL'S VERTICAL RULE IS GONE
   -------------------------------------------------------------------------

   The thin line running down the left of the ASSESSMENT panel, through the
   three icon circles, is one pseudo-element:

       .assessment-content::before
           content: ""; position: absolute; left: 18px;
           top: 25px; bottom: 25px; width: 1px; background: #d9e4f5

   Hidden with display: none rather than deleted, so it is still in the
   stylesheet and comes back by removing this one rule. display: none is the
   idiom already used for this same selector at the narrow breakpoints, so
   this only extends it upward.

   --------------------------------------------------------------------------
   NOTHING ELSE MOVES

   No markup is touched - the three .assessment-item rows, their icons,
   headings and paragraphs are exactly as they were. .assessment-content is
   used once on this page, inside the assessment panel, so the rule reaches
   nothing else. The certificate panel beside it uses .certification-content
   and is not named.

   This stylesheet is loaded by secondarylevel-classx.php alone - checked, one
   page references it - so the Grade 12 page, which also has an
   .assessment-section, cannot see this.
========================================================================== */

.assessment-content::before {
    display: none;
}


/* ============================================================================
   THE GROUP B PANEL MATCHES GROUP A

   Group A's .subject-table-wrapper takes its first track from the base rule -
   .subject-table-wrapper { grid-template-columns: 155px 1fr } - and nothing
   overrides it, so the Group A blue panel is 155px at every width from 768 up to
   1920.

   Group B overrides that same property at four breakpoints, and every one of
   them is wider than Group A's:

       min-width 1400        grid-template-columns: 220px 1fr
       1200 to 1399          grid-template-columns: 200px 1fr
       992 to 1199           grid-template-columns: 170px 1fr
       768 to 991            grid-template-columns: 150px minmax(0, 1fr)

   Measured on the live page, panel width, Group A against Group B:

       1920   155   220   +65
       1600   155   220   +65
       1440   155   220   +65
       1366   155   200   +45
       1280   155   200   +45
       1200   155   200   +45
       1199   155   170   +15
       1024   155   170   +15
        992   155   170   +15
        900   155   150    -5
        768   155   150    -5

   The two panels step out of step with each other at every breakpoint, and at
   1600 and above the lower one is 42% wider than the one above it - though the
   two sit directly above one another and are meant to read as a pair.

   Group B is set to 155px wherever it is two columns, which is Group A's width.
   The second track is left exactly as each breakpoint already had it - 1fr from
   992 up, minmax(0, 1fr) from 768 to 991 - so the table behaves as it did.
   Narrowing the panel hands the table 15 to 65px more room, which cannot bring
   on a horizontal scrollbar.

   Under 768 both panels are already the full width of the container, so they
   already agree and nothing is changed there.

   No !important: the four declarations being replaced carry none, and these rules
   carry the same specificity and sit further down the file.

   Scope: this stylesheet is referenced by secondarylevel-classx.php and by no
   other page, and every selector here is .group-b-section, which appears on that
   page only.
   ============================================================================ */

@media (min-width: 992px) {
    .group-b-section .subject-table-wrapper {
        grid-template-columns: 155px 1fr;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .group-b-section .subject-table-wrapper {
        grid-template-columns: 155px minmax(0, 1fr);
    }
}