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

:root {

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

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

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

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

    --white: #ffffff;

    --muted: #899abd;

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

     --section-max-width: 1500px;

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

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

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

}


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

html,
body {

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

    color: var(--text-primary);

    font-size: 16px;

    line-height: 1.6;

}


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

p {

    font-size: 16px;

    line-height: 1.7;

    font-weight: 400;

}


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

.section-title,
.programmes-title {

    font-size: 52px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1.2px;

}


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

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

    font-size: 46px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;

}


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

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

    font-size: 54px;

    line-height: 1.1;

    font-weight: 800;

}


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

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

    font-size: 18px;

    line-height: 1.7;

    font-weight: 400;

    color: var(--text-body);

}


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

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

    font-size: 14px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: .5px;

}


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

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

    font-weight: 700;

}


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

.feature-card h4 {

    font-size: 19px;

    line-height: 1.3;

}


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

.feature-card p {

    font-size: 14px;

    line-height: 1.55;

}


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

.impact-subtitle {

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .7px;

}

.impact-title {

    font-size: 30px;

    line-height: 1.25;

}

.impact-item h3 {

    font-size: 28px;

    line-height: 1.1;

    font-weight: 800;

}

.impact-item p {

    font-size: 14px;

    line-height: 1.4;

}


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

.info-content h5 {

    font-size: 18px;

    line-height: 1.3;

    font-weight: 700;

}

.info-content p {

    font-size: 13px;

    line-height: 1.5;

}


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

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

    font-size: 17px;

    line-height: 1.35;

    font-weight: 700;

}

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

    font-size: 13px;

    line-height: 1.55;

}


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

.program-count-card h3 {

    font-size: 26px;

    line-height: 1.2;

    font-weight: 800;

}

.program-count-card p {

    font-size: 14px;

    line-height: 1.5;

}


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

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

    font-size: 46px;

    line-height: 1.15;

    font-weight: 800;

}

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

    font-size: 17px;

    line-height: 1.35;

    font-weight: 700;

}

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

    font-size: 14px;

    line-height: 1.55;

}


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

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

    font-size: 46px;

    line-height: 1.15;

    font-weight: 800;

}

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

    font-size: 30px;

    line-height: 1.1;

    font-weight: 800;

}

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

    font-size: 13px;

    line-height: 1.4;

    font-weight: 500;

}


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

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

    font-size: 46px;

    line-height: 1.15;

    font-weight: 800;

}

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

    font-size: 16px;

    line-height: 1.65;

}


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

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

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

}

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

    font-size: 13px;

    line-height: 1.45;

}


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

.review-card h5 {

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

}

.review-card small {

    font-size: 12px;

}

.review-card p {

    font-size: 14px;

    line-height: 1.65;

}

.review-card a {

    font-size: 13px;

    font-weight: 600;

}


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

.blog-card h4 {

    font-size: 18px;

    line-height: 1.4;

    font-weight: 700;

}

.blog-card p {

    font-size: 14px;

    line-height: 1.6;

}

.blog-category {

    font-size: 12px;

    font-weight: 600;

}

.blog-footer a {

    font-size: 13px;

    font-weight: 600;

}

.date-box h4 {

    font-size: 18px;

    line-height: 1;

}

.date-box span {

    font-size: 11px;

}


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

.faq-section h2 {

    font-size: 46px;

    line-height: 1.15;

    font-weight: 800;

}

.faq-question,
.accordion-button {

    font-size: 16px;

    line-height: 1.4;

    font-weight: 600;

}

.faq-answer,
.accordion-body {

    font-size: 14px;

    line-height: 1.65;

}


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

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

    font-size: 14px;

    line-height: 1.2;

    font-weight: 600;

}


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

.navbar-nav .nav-link {

    font-size: 14px;

    font-weight: 600;

}

.navbar-brand {

    font-size: 18px;

    font-weight: 700;

}


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

footer h4,
footer h5 {

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

}

footer p,
footer li,
footer a {

    font-size: 13px;

    line-height: 1.6;

}

footer .footer-title {

    font-size: 17px;

    font-weight: 700;

}


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

@media (max-width: 1199px) {

    .section-title,
    .programmes-title {

        font-size: 46px;

    }

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

        font-size: 42px;

    }

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

        font-size: 48px;

    }

    .section-desc,
    .programmes-description {

        font-size: 17px;

    }

    .feature-card h4 {

        font-size: 18px;

    }

    .feature-card p {

        font-size: 13px;

    }

    .blog-card h4 {

        font-size: 17px;

    }

}


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

@media (max-width: 991px) {

    body {

        font-size: 15px;

    }

    p {

        font-size: 15px;

        line-height: 1.65;

    }


    /* Main headings */

    .section-title,
    .programmes-title {

        font-size: 40px;

        line-height: 1.15;

    }


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

        font-size: 38px;

    }


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

        font-size: 42px;

    }


    /* Description */

    .section-desc,
    .programmes-description {

        font-size: 16px;

        line-height: 1.7;

    }


    /* Badge */

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

        font-size: 13px;

    }


    /* Cards */

    .feature-card h4 {

        font-size: 17px;

    }

    .feature-card p {

        font-size: 13px;

    }

    .impact-title {

        font-size: 26px;

    }

    .impact-item h3 {

        font-size: 25px;

    }

    .impact-item p {

        font-size: 13px;

    }

    .blog-card h4 {

        font-size: 17px;

    }

    .blog-card p {

        font-size: 13px;

    }

    .review-card p {

        font-size: 13px;

    }


    /* FAQ */

    .faq-question,
    .accordion-button {

        font-size: 15px;

    }

    .faq-answer,
    .accordion-body {

        font-size: 13px;

    }


    /* Buttons */

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

        font-size: 13px;

    }

}


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

@media (max-width: 767px) {

    body {

        font-size: 15px;

    }

    p {

        font-size: 14px;

        line-height: 1.65;

    }


    /* Main section headings */

    .section-title,
    .programmes-title {

        font-size: 32px;

        line-height: 1.18;

        letter-spacing: -.5px;

    }


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

        font-size: 32px;

        line-height: 1.2;

    }


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

        font-size: 34px;

        line-height: 1.15;

    }


    /* Description */

    .section-desc,
    .programmes-description {

        font-size: 15px;

        line-height: 1.65;

    }


    /* Badges */

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

        font-size: 12px;

    }


    /* Feature cards */

    .feature-card h4 {

        font-size: 16px;

    }

    .feature-card p {

        font-size: 12px;

        line-height: 1.5;

    }


    /* Impact */

    .impact-title {

        font-size: 24px;

    }

    .impact-item h3 {

        font-size: 23px;

    }

    .impact-item p {

        font-size: 12px;

    }


    /* Programme cards */

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

        font-size: 16px;

    }

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

        font-size: 12px;

    }


    /* Testimonials */

    .review-card h5 {

        font-size: 15px;

    }

    .review-card small {

        font-size: 11px;

    }

    .review-card p {

        font-size: 13px;

        line-height: 1.6;

    }


    /* Blogs */

    .blog-card h4 {

        font-size: 16px;

    }

    .blog-card p {

        font-size: 13px;

    }


    /* FAQ */

    .faq-question,
    .accordion-button {

        font-size: 14px;

    }

    .faq-answer,
    .accordion-body {

        font-size: 13px;

    }


    /* Buttons */

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

        font-size: 13px;

    }


    /* Footer */

    footer h4,
    footer h5 {

        font-size: 15px;

    }

    footer p,
    footer li,
    footer a {

        font-size: 12px;

    }

}


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

@media (max-width: 575px) {

    body {

        font-size: 14px;

    }


    p {

        font-size: 14px;

        line-height: 1.65;

    }


    /* Main headings */

    .section-title,
    .programmes-title {

        font-size: 29px;

        line-height: 1.2;

    }


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

        font-size: 29px;

        line-height: 1.2;

    }


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

        font-size: 30px;

    }


    /* Description */

    .section-desc,
    .programmes-description {

        font-size: 14px;

        line-height: 1.65;

    }


    /* Badge */

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

        font-size: 11px;

    }


    /* Cards */

    .feature-card h4 {

        font-size: 15px;

    }

    .feature-card p {

        font-size: 12px;

    }


    .impact-title {

        font-size: 22px;

    }

    .impact-item h3 {

        font-size: 21px;

    }

    .impact-item p {

        font-size: 11px;

    }


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

        font-size: 15px;

    }

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

        font-size: 12px;

    }


    /* Blog */

    .blog-card h4 {

        font-size: 15px;

    }

    .blog-card p {

        font-size: 12px;

    }


    /* Testimonials */

    .review-card h5 {

        font-size: 14px;

    }

    .review-card p {

        font-size: 12px;

    }


    /* FAQ */

    .faq-question,
    .accordion-button {

        font-size: 13px;

    }

    .faq-answer,
    .accordion-body {

        font-size: 12px;

    }


    /* Buttons */

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

        font-size: 12px;

    }


    /* Footer */

    footer h4,
    footer h5 {

        font-size: 14px;

    }

    footer p,
    footer li,
    footer a {

        font-size: 11px;

    }

}

.section-container {

    width: 100%;

    max-width: 1320px;

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

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

    box-sizing: border-box;

}

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

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

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


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

@media (max-width: 1399px) {

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

}


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

@media (max-width: 991px) {

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

}


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

@media (max-width: 767px) {

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

} 


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

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

img{
    max-width:100%;
}

a{
    text-decoration:none;
}


/* =====================================================
   ACADEMIC COUNCIL BANNER
===================================================== */

.academic-council-banner {
    width: 100%;
    min-height: 300px;

    display: flex;
    align-items: stretch;

    position: relative;
    overflow: hidden;

    background: #083C7C;

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


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

.academic-council-content {
    width: 52%;

    padding: 80px 6% 80px 8%;

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

    position: relative;
    z-index: 5;
}


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

.academic-council-badge {
    width: fit-content;

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

    padding: 9px 18px;

    margin-bottom: 25px;

    border-radius: 30px;

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

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

    color: #FFFFFF;

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

    letter-spacing: .4px;
}

.academic-council-badge i {
    font-size: 15px;
}


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

.academic-council-content h1 {
    margin: 0;

    color: #FFFFFF;

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

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -1px;
}


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

.academic-council-line {
    width: 50px;
    height: 3px;

    margin: 25px 0 20px;

    background: #FFFFFF;

    border-radius: 5px;
}


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

.academic-council-content p {
    max-width: 520px;

    margin: 0;

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

    font-size: 16px;

    line-height: 1.75;
}


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

.academic-council-image {
    width: 48%;

    min-height: 500px;

    position: relative;

    overflow: hidden;
}


/* =====================================================
   PHOTO
===================================================== */

.academic-council-photo {
    position: absolute;

    inset: 0;

    overflow: hidden;

    /*
       Simple professional curved transition
    */

    clip-path: ellipse(
        100% 100% at 100% 50%
    );

    background: #AFCBFF;
}


.academic-council-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: transform .7s ease;
}


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

.academic-council-banner:hover
.academic-council-photo img {

    transform: scale(1.04);
}


/* =====================================================
   SIMPLE LIGHT BORDER
===================================================== */

/* .academic-council-image::before {
    content: "";

    position: absolute;

    z-index: 3;

    left: -12px;
    top: 0;

    width: 24px;
    height: 100%;

    background: #AFCBFF;

    border-radius: 50%;
} */


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

.academic-council-banner::before {
    content: "";

    position: absolute;

    left: 35px;
    top: 35px;

    width: 60px;
    height: 60px;

    background-image:
        radial-gradient(
            rgba(255,255,255,.45) 1.5px,
            transparent 1.5px
        );

    background-size: 12px 12px;

    opacity: .7;

    z-index: 2;
}


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

@media (max-width: 991px) {

    .academic-council-banner {
        min-height: 430px;
    }

    .academic-council-content {
        width: 52%;

        padding: 60px 35px;
    }

    .academic-council-image {
        width: 48%;

        min-height: 430px;
    }

    .academic-council-content h1 {
        font-size: 44px;
    }

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


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

@media (max-width: 767px) {

    .academic-council-banner {
        display: flex;

        flex-direction: column;

        min-height: auto;
    }


    .academic-council-content {
        width: 100%;

        min-height: 360px;

        padding: 55px 25px 45px;
    }


    .academic-council-content h1 {
        font-size: clamp(34px, 9vw, 46px);
    }


    .academic-council-content p {
        font-size: 14px;

        line-height: 1.65;
    }


    .academic-council-image {
        width: 100%;

        height: 300px;

        min-height: 300px;
    }


    .academic-council-photo {
        clip-path: none;

        border-radius: 0;
    }


    .academic-council-image::before {
        display: none;
    }


    .academic-council-banner::before {
        top: 20px;
        left: 20px;
    }
}


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

@media (max-width: 480px) {

    .academic-council-content {
        min-height: 330px;

        padding: 45px 20px 40px;
    }

    .academic-council-badge {
        font-size: 10px;

        padding: 7px 13px;
    }

    .academic-council-content h1 {
        font-size: 32px;
    }

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

    .academic-council-image {
        height: 250px;

        min-height: 250px;
    }
}

/* =========================================================
   STATUTORY ACADEMIC AUTHORITY
========================================================= */

.statutory-authority-section {

    position: relative;

    width: 100%;

    padding: 80px 0;

    overflow: hidden;

    background: #FFFFFF;

    color: #083C7C;

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


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

.statutory-authority-section::before {

    content: "";

    position: absolute;

    top: 80px;

    right: -120px;

    width: 350px;

    height: 350px;

    border: 1px solid rgba(8, 60, 124, 0.10);

    border-radius: 50%;

    box-shadow:
        0 0 0 35px rgba(8, 60, 124, 0.025),
        0 0 0 70px rgba(8, 60, 124, 0.02),
        0 0 0 105px rgba(8, 60, 124, 0.015);

    pointer-events: none;
}


/* Dot pattern */

.statutory-authority-section::after {

    content: "";

    position: absolute;

    top: 95px;

    right: 170px;

    width: 95px;

    height: 70px;

    opacity: 0.20;

    background-image:
        radial-gradient(
            #083C7C 1.7px,
            transparent 1.7px
        );

    background-size: 13px 13px;

    pointer-events: none;
}


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

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

.statutory-header {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 850px;

    margin: 0 auto 45px;

    padding-left: 0;

    text-align: center;
}


/* Remove vertical line */

.statutory-header::before {
    display: none;
}


/* Remove dots */

.statutory-header::after {
    display: none;
}


/* Small label */

.statutory-label {

    display: block;

    margin-bottom: 12px;

    color: #286ED1;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 0.3px;

    text-align: center;
}


/* Heading line */

.statutory-heading-line {

    width: 45px;

    height: 3px;

    margin: 0 auto 18px;

    background: #083C7C;

    border-radius: 10px;
}


/* Main heading */

.statutory-header h2 {

    margin: 0 0 18px;

    color: #083C7C;

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

    font-size: clamp(36px, 4.5vw, 56px);

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -1px;

    text-align: center;
}


/* Description */

.statutory-header p {

    max-width: 750px;

    margin: 0 auto;

    color: #083C7C;

    font-size: 15px;

    line-height: 1.7;

    text-align: center;
}


/* Bold text */

.statutory-header strong {

    color: #083C7C;

    font-weight: 700;
}


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

.statutory-cards-row {

    position: relative;

    z-index: 3;

    align-items: stretch;
}


.statutory-cards-row > div {

    display: flex;
}


.statutory-card {

    position: relative;

    width: 100%;

    height: 250px;

    padding: 25px 20px 30px;

    overflow: hidden;

    background: #FFFFFF;

    border: 1px solid rgba(8, 60, 124, 0.12);

    border-radius: 14px;

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

    color: #083C7C;

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


/* Bottom blue line */

.statutory-card::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 82%;

    height: 3px;

    background: #286ED1;

    border-radius: 0 5px 0 0;

    transition:
        width 0.4s ease;
}


.statutory-card:hover {

    transform: translateY(-8px);

    border-color: rgba(8, 60, 124, 0.25);

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


.statutory-card:hover::after {

    width: 100%;
}


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

.statutory-number {

    position: absolute;

    top: 0;

    right: 0;

    width: 55px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #083C7C;

    color: #FFFFFF;

    font-size: 25px;

    font-weight: 700;

    border-radius: 0 0 0 15px;

    transition:
        width 0.3s ease,
        height 0.3s ease;
}


.statutory-card:hover .statutory-number {

    width: 62px;

    height: 52px;
}


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

.statutory-icon {

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 12px;

    background: #F0F5FB;

    border-radius: 50%;

    color: #083C7C;

    font-size: 31px;

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


.statutory-card:hover .statutory-icon {

    background: #083C7C;

    color: #FFFFFF;

    transform:
        scale(1.08)
        rotate(-4deg);
}


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

.statutory-card h3 {

    margin: 0;

    color: #083C7C;

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

    font-size: 21px;

    font-weight: 700;

    line-height: 1.2;
}


/* Card line */

.statutory-card-line {

    width: 40px;

    height: 3px;

    margin: 7px 0 12px;

    background: #286ED1;

    border-radius: 10px;

    transition:
        width 0.35s ease;
}


.statutory-card:hover .statutory-card-line {

    width: 65px;
}


/* Card paragraph */

.statutory-card p {

    margin: 0;

    max-width: 270px;

    color: #083C7C;

    font-size: 14px;

    line-height: 1.55;
}


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

.statutory-card {

    animation:
        statutoryCardIn 0.7s ease both;
}


.statutory-cards-row > div:nth-child(1)
.statutory-card {

    animation-delay: 0.05s;
}


.statutory-cards-row > div:nth-child(2)
.statutory-card {

    animation-delay: 0.15s;
}


.statutory-cards-row > div:nth-child(3)
.statutory-card {

    animation-delay: 0.25s;
}


@keyframes statutoryCardIn {

    from {

        opacity: 0;

        transform: translateY(25px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}


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

@media (max-width: 991.98px) {

    .statutory-authority-section {

        padding: 65px 0;
    }


    .statutory-header {

        max-width: 620px;

        margin-bottom: 35px;
    }


    .statutory-header h2 {

        font-size: 44px;
    }


    .statutory-card {

        height: 245px;
    }

}


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

@media (max-width: 767.98px) {

    .statutory-authority-section {

        padding: 55px 0;
    }


    .statutory-authority-section::before {

        width: 250px;

        height: 250px;

        right: -160px;
    }


    .statutory-authority-section::after {

        right: 30px;

        top: 60px;
    }


    .statutory-header {

        padding-left: 20px;

        margin-bottom: 30px;
    }


    .statutory-header::before {

        height: 120px;
    }


    .statutory-header h2 {

        font-size: 38px;

        line-height: 1.12;
    }


    .statutory-header p {

        font-size: 14px;

        line-height: 1.65;
    }


    .statutory-card {

        height: 240px;

        padding: 22px 18px 28px;
    }


    .statutory-icon {

        width: 60px;

        height: 60px;

        font-size: 27px;
    }


    .statutory-card h3 {

        font-size: 20px;
    }


    .statutory-card p {

        font-size: 13px;
    }

}


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

@media (max-width: 480px) {

    .statutory-authority-section {

        padding: 45px 0;
    }


    .statutory-header {

        padding-left: 18px;
    }


    .statutory-header h2 {

        font-size: 32px;
    }


    .statutory-header p {

        font-size: 13px;
    }


    .statutory-card {

        height: 225px;
    }


    .statutory-number {

        width: 50px;

        height: 42px;

        font-size: 22px;
    }

}


/* =========================================================
   STATUTORY FUNCTIONS & POWERS
   FINAL RESPONSIVE OVERRIDE
========================================================= */

.statutory-functions-section {
    width: 100%;
    position: relative;
    overflow: hidden;
}


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

.statutory-functions-section > .container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 3.7%;
    padding-right: 3.7%;
    box-sizing: border-box;
}


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

.functions-header {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
}

.functions-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.functions-heading-line {
    width: 70px;
    height: 4px;
    margin: 18px auto 0;
    border-radius: 10px;
}


/* =========================================================
   MAIN FUNCTIONS GRID
========================================================= */

/*
   Bootstrap .row is removed here.
   We create our own clean 2-column layout.
*/

.statutory-functions-section .functions-grid {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;

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

    box-sizing: border-box;
}


/* =========================================================
   BOOTSTRAP COLUMNS RESET
========================================================= */

.statutory-functions-section .functions-grid > .col-lg-6 {
    width: 100% !important;
    max-width: 100% !important;

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

    flex: none !important;
}


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

.functions-column {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;

    /*
       Every card gets exactly the same height.
    */
    grid-auto-rows: 280px;

    gap: 22px;

    min-width: 0;
}


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

.function-card {
    width: 100%;
    height: 280px;
    min-height: 280px;
    max-height: 280px;

    position: relative;

    display: flex;
    flex-direction: column;

    padding: 25px;

    box-sizing: border-box;

    overflow: hidden;

    border-radius: 18px;

    /*
       Prevent content from changing card size.
    */
    min-width: 0;
}


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

.function-top {
    width: 100%;

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

    flex-shrink: 0;

    margin-bottom: 22px;
}


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

.function-icon {
    width: 54px;
    height: 54px;

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

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

    border-radius: 14px;

    flex-shrink: 0;
}

.function-icon i {
    font-size: 23px;
    line-height: 1;
}


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

.function-number {
    font-size: 15px;
    font-weight: 700;

    flex-shrink: 0;

    line-height: 1;
}


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

.function-content {
    width: 100%;

    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


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

.function-content h3 {
    margin: 0 0 12px 0;

    line-height: 1.3;

    max-width: 100%;

    overflow-wrap: break-word;
    word-break: normal;
}


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

.function-content p {
    margin: 0;

    line-height: 1.6;

    max-width: 100%;

    text-align: justify;

    overflow-wrap: break-word;
}


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

@media (max-width: 1399px) {

    .statutory-functions-section > .container {
        padding-left: 6.5%;
        padding-right: 6.5%;
    }

    .statutory-functions-section .functions-grid {
        gap: 20px;
    }

    .functions-column {
        grid-auto-rows: 280px;
        gap: 20px;
    }

    .function-card {
        height: 280px;
        min-height: 280px;
        max-height: 280px;
        padding: 23px;
    }

}


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

@media (max-width: 1199px) {

    .statutory-functions-section > .container {
        padding-left: 3.5%;
        padding-right: 3.5%;
    }

    .statutory-functions-section .functions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .functions-column {
        grid-auto-rows: 275px;
        gap: 18px;
    }

    .function-card {
        height: 275px;
        min-height: 275px;
        max-height: 275px;

        padding: 22px;
    }

    .function-top {
        margin-bottom: 18px;
    }

    .function-icon {
        width: 50px;
        height: 50px;

        min-width: 50px;
        min-height: 50px;
    }

}


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

@media (max-width: 991px) {

    .statutory-functions-section > .container {
        padding-left: 4%;
        padding-right: 4%;
    }

    /*
       Still 2 columns on tablet.
    */

    .statutory-functions-section .functions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .functions-column {
        grid-auto-rows: 285px;
        gap: 16px;
    }

    .function-card {
        height: 285px;
        min-height: 285px;
        max-height: 285px;

        padding: 20px;
        border-radius: 16px;
    }

    .function-top {
        margin-bottom: 17px;
    }

    .function-icon {
        width: 48px;
        height: 48px;

        min-width: 48px;
        min-height: 48px;

        border-radius: 12px;
    }

    .function-icon i {
        font-size: 21px;
    }

    .function-number {
        font-size: 14px;
    }

    .function-content h3 {
        margin-bottom: 10px;
    }

    .function-content p {
        line-height: 1.55;
    }

}


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

@media (max-width: 767px) {

    .statutory-functions-section > .container {
        width: 100%;
        max-width: 100%;

        padding-left: 5%;
        padding-right: 5%;
    }


    /* -----------------------------------------
       SINGLE COLUMN
    ----------------------------------------- */

    .statutory-functions-section .functions-grid {
        display: grid !important;

        grid-template-columns: 1fr;

        gap: 18px;

        width: 100%;

        margin: 0 !important;
    }


    /* -----------------------------------------
       BOTH BOOTSTRAP COLUMNS FULL WIDTH
    ----------------------------------------- */

    .statutory-functions-section .functions-grid > .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;

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


    /* -----------------------------------------
       CARD COLUMN
    ----------------------------------------- */

    .functions-column {
        width: 100%;

        grid-template-columns: 1fr;

        grid-auto-rows: 270px;

        gap: 18px;
    }


    /* -----------------------------------------
       CARD
    ----------------------------------------- */

    .function-card {
        width: 100%;

        height: 270px;
        min-height: 270px;
        max-height: 270px;

        padding: 20px;

        border-radius: 16px;
    }


    /* -----------------------------------------
       CARD TOP
    ----------------------------------------- */

    .function-top {
        margin-bottom: 16px;
    }


    /* -----------------------------------------
       ICON
    ----------------------------------------- */

    .function-icon {
        width: 48px;
        height: 48px;

        min-width: 48px;
        min-height: 48px;

        border-radius: 12px;
    }

    .function-icon i {
        font-size: 20px;
    }


    /* -----------------------------------------
       NUMBER
    ----------------------------------------- */

    .function-number {
        font-size: 13px;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .function-content {
        overflow: hidden;
    }

    .function-content h3 {
        margin-bottom: 9px;

        line-height: 1.3;
    }

    .function-content p {
        line-height: 1.55;

        text-align: justify;
    }

}


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

@media (max-width: 480px) {

    .statutory-functions-section > .container {
        padding-left: 5%;
        padding-right: 5%;
    }


    .statutory-functions-section .functions-grid {
        gap: 16px;
    }


    .functions-column {
        grid-auto-rows: 265px;
        gap: 16px;
    }


    .function-card {
        height: 265px;
        min-height: 265px;
        max-height: 265px;

        padding: 18px;

        border-radius: 15px;
    }


    .function-top {
        margin-bottom: 14px;
    }


    .function-icon {
        width: 45px;
        height: 45px;

        min-width: 45px;
        min-height: 45px;

        border-radius: 11px;
    }


    .function-icon i {
        font-size: 19px;
    }


    .function-number {
        font-size: 12px;
    }


    .function-content h3 {
        margin-bottom: 8px;
        line-height: 1.3;
    }


    .function-content p {
        line-height: 1.5;
    }

}


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

@media (max-width: 360px) {

    .statutory-functions-section > .container {
        padding-left: 4%;
        padding-right: 4%;
    }


    .functions-column {
        grid-auto-rows: 260px;
        gap: 14px;
    }


    .function-card {
        height: 260px;
        min-height: 260px;
        max-height: 260px;

        padding: 16px;
    }


    .function-icon {
        width: 42px;
        height: 42px;

        min-width: 42px;
        min-height: 42px;
    }


    .function-icon i {
        font-size: 18px;
    }

}

/* =========================================================
   MODERN STATUTORY FUNCTIONS UI
   2 CARDS PER ROW
========================================================= */

.statutory-functions-section {
    position: relative;
    width: 100%;
    padding: 75px 0 85px;
    background: #ffffff;
    overflow: hidden;
}


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

.statutory-functions-section > .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 3.7% !important;
    padding-right: 3.7% !important;
    margin: 0 auto;
    box-sizing: border-box;
}


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

.statutory-functions-section .functions-header {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 45px;
    text-align: center;
}

.statutory-functions-section .functions-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    color: #083C7C;
}

.statutory-functions-section .functions-label span {
    width: 35px;
    height: 2px;
    background: #083C7C;
    border-radius: 10px;
}

.statutory-functions-section .functions-header h2 {
    margin: 0 0 14px;
    color: #083C7C;
    font-size: 35px;
    line-height: 1.25;
    font-weight: 700;
}

.statutory-functions-section .functions-header p {
    max-width: 850px;
    margin: 0 auto;
    color: #526581;
    font-size: 15px;
    line-height: 1.7;
    text-align: justify !important;
}

.statutory-functions-section .functions-heading-line {
    width: 55px;
    height: 3px;
    margin: 18px auto 0;
    background: #083C7C;
    border-radius: 10px;
}


/* =========================================================
   FUNCTIONS WRAPPER
========================================================= */

.statutory-functions-section .functions-wrapper {
    position: relative;
    width: 100%;
}


/* Hide old center line */

.statutory-functions-section .functions-center-line {
    display: none !important;
}


/* =========================================================
   2 CARDS PER ROW
========================================================= */

.statutory-functions-section .functions-grid {
    position: relative;
    z-index: 2;

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

    margin: 0 auto;
    padding: 0;

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


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

.statutory-functions-section .function-card {
    position: relative;

    width: 100%;
    min-width: 0;

    min-height: 285px;

    padding: 28px 30px;

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

    background: #ffffff;

    border: 1px solid #dce6f3;
    border-radius: 16px;

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

    overflow: hidden;

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


/* LEFT ACCENT */

.statutory-functions-section .function-card::before {
    content: "";

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

    width: 4px;
    height: 100%;

    background: #083C7C;

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


/* TOP RIGHT NUMBER */

.statutory-functions-section .function-number {
    position: absolute;

    top: 22px;
    right: 25px;

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

    color: #083C7C;

    opacity: 0.55;
}



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

.statutory-functions-section .function-icon {
    width: 58px;
    height: 58px;

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

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

    margin-bottom: 22px;

    border-radius: 14px;

    background: #eef4ff;

    color: #083C7C;

    font-size: 23px;

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


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

.statutory-functions-section .function-content {
    width: 100%;
    min-width: 0;
}

.statutory-functions-section .function-content h3 {
    margin: 0 35px 12px 0;

    color: #083C7C;

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

    font-weight: 700;
}

.statutory-functions-section .function-content p {
    margin: 0;

    color: #526581;

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

    text-align: justify !important;

    overflow-wrap: break-word;
}


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

.statutory-functions-section .function-card:hover {
    transform: translateY(-7px);

    border-color: #b8cbe5;

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

.statutory-functions-section .function-card:hover .function-icon {
    background: #083C7C;
    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================================================
   LAST CARD
   CENTER THE 7TH CARD
========================================================= */

.statutory-functions-section .function-card:nth-child(7) {
    grid-column: 1 / -1;
    width: calc(50% - 12px);
    justify-self: center;
}


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

@media (min-width: 1400px) {

    .statutory-functions-section .functions-grid {
        max-width: 1250px;
        gap: 26px;
    }

    .statutory-functions-section .function-card {
        min-height: 290px;
        padding: 30px 32px;
    }
}


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

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

    .statutory-functions-section > .container {
        padding-left: 6.5% !important;
        padding-right: 6.5% !important;
    }

    .statutory-functions-section .functions-grid {
        max-width: 1150px;
        gap: 20px;
    }

    .statutory-functions-section .function-card {
        min-height: 280px;
        padding: 25px 27px;
    }
}  */


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

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

    .statutory-functions-section {
        padding: 60px 0 70px;
    }

    .statutory-functions-section > .container {
        padding-left: 4% !important;
        padding-right: 4% !important;
    }

    .statutory-functions-section .functions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .statutory-functions-section .function-card {
        min-height: 290px;
        padding: 23px;
    }

    .statutory-functions-section .function-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
        font-size: 21px;
    }

    .statutory-functions-section .function-content h3 {
        font-size: 19px;
    }

    .statutory-functions-section .function-content p {
        font-size: 14px;
    }

    .statutory-functions-section .function-card:nth-child(7) {
        width: calc(50% - 9px);
    }
} */


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

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

    .statutory-functions-section {
        padding: 50px 0 60px;
    }

    .statutory-functions-section > .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .statutory-functions-section .functions-header {
        margin-bottom: 32px;
    }

    .statutory-functions-section .functions-header h2 {
        font-size: 28px;
    }

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

    /* ONE CARD PER ROW ON MOBILE */

    /* .statutory-functions-section .functions-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .statutory-functions-section .function-card {
        min-height: 260px;
        padding: 22px;
    }

    .statutory-functions-section .function-card:nth-child(7) {
        grid-column: auto;
        width: 100%;
    }

    .statutory-functions-section .function-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        margin-bottom: 18px;
        font-size: 20px;
    }

    .statutory-functions-section .function-content h3 {
        font-size: 19px;
        margin-bottom: 10px;
    }

    .statutory-functions-section .function-content p {
        font-size: 14px;
        line-height: 1.6;
    } */



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

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

    .statutory-functions-section > .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .statutory-functions-section .functions-header h2 {
        font-size: 25px;
    }

    .statutory-functions-section .function-card {
        min-height: 250px;
        padding: 20px;
    }

    .statutory-functions-section .function-number {
        right: 20px;
        top: 18px;
    }
} */

/* =========================================================
   COUNCIL COMPOSITION
========================================================= */

.council-composition-section {

    position: relative;

    width: 100%;

    padding: 80px 0 0;

    overflow: hidden;

    background: #FFFFFF;

    color: #083C7C;

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


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

.council-composition-section .container {

    max-width: none;

    margin: 0 auto;

    padding-left: 15px;

    padding-right: 15px;
}


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

.council-header {

    position: relative;

    z-index: 2;

    text-align: center;

    justify-content: center;

    max-width: 760px;

    margin: 0 auto 45px;
}


/* Label */

.council-label {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-bottom: 10px;

    color: #083C7C;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.4px;
}


.council-label i {

    font-size: 20px;

    color: #083C7C;
}


.label-line {

    width: 35px;

    height: 2px;

    background: #083C7C;

    position: relative;
}


.label-line::after {

    content: "";

    position: absolute;

    width: 5px;

    height: 5px;

    top: 50%;

    transform: translateY(-50%);

    background: #083C7C;

    border-radius: 50%;
}


.label-line:first-child::after {

    right: 0;
}


.label-line:last-child::after {

    left: 0;
}


/* Main heading */

.council-header h2 {

    margin: 0 0 12px;

    color: #083C7C;

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

    font-size: clamp(40px, 4.5vw, 52px);

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -1px;
}


/* Description */

.council-header p {

    max-width: 650px;

    margin: 0 auto;

    color: #3A4F66;

    font-size: 14px;

    line-height: 1.6;
}


/* Heading line */

.council-heading-line {

    width: 38px;

    height: 3px;

    margin: 15px auto 0;

    background: #083C7C;

    border-radius: 10px;
}


/* =========================================================
   TIMELINE
========================================================= */

.council-timeline {

    position: relative;

    display: grid;

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

    gap: 20px;

    margin-top: 60px;
}


/* Horizontal timeline line */

.council-timeline::before {

    content: "";

    position: absolute;

    top: -34px;

    left: 10%;

    right: 10%;

    height: 1px;

    background: rgba(8, 60, 124, 0.35);

    z-index: 0;
}


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

.council-item {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;
}


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

.council-number {

    position: absolute;

    top: -58px;

    left: 50%;

    transform: translateX(-50%);

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #083C7C;

    color: #FFFFFF;

    font-size: 17px;

    font-weight: 700;

    z-index: 3;

    box-shadow:
        0 5px 15px rgba(8, 60, 124, 0.20);

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


.council-item:hover .council-number {

    transform:
        translateX(-50%)
        scale(1.1);

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


/* Connector */

.council-connector {

    position: absolute;

    top: -17px;

    left: 50%;

    width: 2px;

    height: 17px;

    background: #286ED1;

    z-index: 2;
}


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

.council-card {

    position: relative;

    width: 100%;

    min-height: 260px;

    padding: 20px 20px 25px;

    text-align: center;

    background: #FFFFFF;

    border: 1px solid rgba(8, 60, 124, 0.10);

    border-radius: 10px;

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

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


.council-card:hover {

    transform: translateY(-8px);

    border-color: rgba(8, 60, 124, 0.20);

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


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

.council-icon {

    width: 76px;

    height: 76px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: -5px auto 8px;

    border-radius: 50%;

    background: #EDF4FC;

    color: #083C7C;

    font-size: 35px;

    border: 1px solid #DCE8F6;

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


.council-card:hover .council-icon {

    background: #083C7C;

    color: #FFFFFF;

    transform:
        scale(1.08)
        rotate(-4deg);
}


/* Small blue line */

.council-card-line {

    width: 35px;

    height: 3px;

    margin: 8px auto 12px;

    background: #083C7C;

    border-radius: 10px;
}


/* Card heading */

.council-card h6 {

    max-width: 190px;

    min-height: 48px;

    margin: 0 auto;

    color: #083C7C;

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

    font-size: 14px;

    font-weight: 700;

    line-height: 1.45;
}


/* Divider */

.council-divider {

    width: 80%;

    height: 1px;

    margin: 10px auto 12px;

    background: #E3EAF2;
}


/* Card paragraph */

.council-card p {

    max-width: 190px;

    margin: 0 auto;

    color: #3A4F66;

    font-size: 12px;

    line-height: 1.55;
}


/* =========================================================
   COLLECTIVE RESPONSIBILITY
========================================================= */

.collective-responsibility {

    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 22px;

    padding: 18px 40px;

    background: #083C7C;
    

    border-radius: 10px;

    border: 1px solid rgba(8, 60, 124, 0.05);
}

.collective-responsibility1 {

    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 22px;

    padding: 18px 40px;

    background: #F2F6FC;

    border-radius: 10px;

    border: 1px solid rgba(8, 60, 124, 0.05);
}





/* Icon */

.collective-icon {

    flex: 0 0 60px;

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #083C7C;

    color: #FFFFFF;

    border-radius: 12px;

    font-size: 27px;
}

/* Icon */

.collective-icon1 {

    flex: 0 0 60px;

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #F2F6FC;

    color: #083C7C;

    border-radius: 12px;

    font-size: 27px;
}




/* Divider */

.collective-divider {

    width: 1px;

    height: 48px;

    background: #AFC5DF;
}


/* Content */

.collective-content {

    flex: 1;
}


.collective-content h3 {

    margin: 0 0 4px;

    

    color: #083C7C;

    font-size: 16px;

    font-weight: 700;
}




.collective-cont h3 {

    margin: 0 0 4px;

    color: #F2F6FC !important;

    font-size: 16px;

    font-weight: 700;
}

.collective-content p {

    margin: 0;

    color: #083C7C;

    font-size: 12px;

    line-height: 1.5;
}

.collective-content1 p {

    margin: 0;

    color: #3A4F66;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   BOTTOM MESSAGE
========================================================= */

.council-bottom-message {

    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 15px;

    padding: 20px 50px;


    background: #083C7C;

    border-radius: 10px;

    border: 1px solid rgba(8, 60, 124, 0.05);
}


/* Bottom decorative curve */

.council-bottom-message::after {

    content: "";

    position: absolute;

    right: -20px;

    bottom: -60px;

    width: 220px;

    height: 120px;

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

    border-radius: 50%;
}


/* Icon */

.bottom-message-icon {

    flex: 0 0 60px;

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #083C7C;

    color: #FFFFFF;

    border-radius: 12px;

    font-size: 27px;
}


/* Divider */

.bottom-message-divider {

    width: 1px;

    height: 45px;

    background: rgba(255,255,255,0.5);
}


/* Text */

.council-bottom-message p {

    max-width: 700px;

    margin: 0;

    color: #FFFFFF;

    font-size: 12px;

    line-height: 1.6;
}


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

.council-item {

    animation:
        councilFadeUp 0.7s ease both;
}


.council-item:nth-child(1) {
    animation-delay: 0.05s;
}

.council-item:nth-child(2) {
    animation-delay: 0.15s;
}

.council-item:nth-child(3) {
    animation-delay: 0.25s;
}

.council-item:nth-child(4) {
    animation-delay: 0.35s;
}


@keyframes councilFadeUp {

    from {

        opacity: 0;

        transform: translateY(25px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}


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

@media (max-width: 991.98px) {

    .council-composition-section {

        padding: 65px 0 0;
    }


    .council-timeline {

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

        row-gap: 65px;
    }


    .council-timeline::before {

        display: none;
    }


    .council-number {

        top: -22px;
    }


    .council-connector {

        display: none;
    }


    .council-card {

        min-height: 270px;
    }
}


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

@media (max-width: 767.98px) {

    .council-composition-section {

        padding: 55px 0 0;
    }


    .council-header {

        margin-bottom: 30px;
    }


    .council-header h2 {

        font-size: 36px;

        line-height: 1.15;
    }


    .council-header p {

        font-size: 13px;
    }


    .council-timeline {

        grid-template-columns: 1fr;

        gap: 45px;

        margin-top: 40px;
    }


    .council-card {

        min-height: 250px;

        padding: 22px 20px;
    }


    .council-number {

        top: -21px;

        width: 40px;

        height: 40px;
    }


    .collective-responsibility {

        flex-direction: column;

        align-items: flex-start;

        padding: 22px;

        gap: 12px;
    }


    .collective-divider {

        display: none;
    }


    .collective-content h3 {

        font-size: 16px;
    }


    .collective-content p {

        font-size: 12px;
    }


    .council-bottom-message {

        flex-direction: column;

        align-items: flex-start;

        padding: 25px;

        border-radius: 25px 25px 0 0;

        gap: 12px;
    }


    .bottom-message-divider {

        display: none;
    }


    .council-bottom-message p {

        font-size: 12px;
    }

}


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

@media (max-width: 480px) {

    .council-header h2 {

        font-size: 31px;
    }


    .council-label {

        font-size: 11px;
    }


    .council-card {

        min-height: 240px;
    }


    .council-icon {

        width: 68px;

        height: 68px;

        font-size: 31px;
    }
}


/* =========================================================
   LEGAL MANDATE & OBJECTIVE
========================================================= */

.mandate-objective-section {
    width: 100%;
    padding: 80px 0;
    background: #083C7C;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}


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

.mandate-objective-section .container {

    max-width: 1140px;

    margin: 0 auto;

    padding-left: 15px;

    padding-right: 15px;
}


/* =========================================================
   COMMON PANEL
========================================================= */

.mandate-panel,
.objective-panel {

    position: relative;

    width: 100%;

    min-height: 280px;

    display: grid;

    grid-template-columns: 180px 1fr 330px;

    align-items: center;

    overflow: hidden;

    border-radius: 14px;

    margin-bottom: 24px;

     background: #FFFFFF;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);

    border: 1px solid #DDE8F5;

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

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


.mandate-panel:hover,
.objective-panel:hover {

    transform: translateY(-5px);

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


/* =========================================================
   LEGAL PANEL
========================================================= */

.mandate-panel {

    background:
        linear-gradient(
            110deg,
            #F5F9FE 0%,
            #FFFFFF 70%
        );
}


/* =========================================================
   LEFT ICON AREA
========================================================= */

.mandate-icon-area,
.objective-icon-area {

    height: 100%;

    min-height: 280px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;
}


/* Decorative vertical line */

.mandate-icon-area::after,
.objective-icon-area::after {

    content: "";

    position: absolute;

    right: 0;

    top: 25%;

    width: 2px;

    height: 50%;

    background: #286ED1;
}


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

.mandate-icon-circle,
.objective-icon-circle {

    width: 120px;

    height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #083C7C;

    color: #FFFFFF;

    font-size: 55px;

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

    border: 8px solid #FFFFFF;

    outline: 1px solid #AFC7E3;

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


.mandate-panel:hover .mandate-icon-circle,
.objective-panel:hover .objective-icon-circle {

    transform:
        scale(1.08)
        rotate(-4deg);

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


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

.mandate-content,
.objective-content {

    padding: 35px 40px;
}


/* Label */

.mandate-label,
.objective-label {

    display: block;

    margin-bottom: 8px;

    color: #286ED1;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.5px;
}


/* Small line */

.mandate-line,
.objective-line {

    width: 32px;

    height: 3px;

    margin-bottom: 12px;

    background: #083C7C;

    border-radius: 10px;

    transition:
        width 0.3s ease;
}


.mandate-panel:hover .mandate-line,
.objective-panel:hover .objective-line {

    width: 55px;
}


/* Heading */

.mandate-content h2,
.objective-content h2 {

    margin: 0 0 14px;

    color: #083C7C;

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

    font-size: 30px;

    font-weight: 700;

    line-height: 1.2;
}


/* Paragraph */

.mandate-content p,
.objective-content p {

    max-width: 570px;

    margin: 0;

    color: #3A4F66;

    font-size: 13px;

    line-height: 1.7;
}


.mandate-content strong {

    color: #083C7C;

    font-weight: 700;
}


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

.mandate-image {

    height: 100%;

    min-height: 280px;

    padding: 12px 15px 12px 0;

    display: flex;

    align-items: center;

    justify-content: center;
}


.mandate-image img {

    width: 100%;

    height: 250px;

    object-fit: cover;

    border-radius: 14px;

    display: block;

    transition:
        transform 0.5s ease;
}


.mandate-panel:hover .mandate-image img {

    transform: scale(1.03);
}


/* =========================================================
   OBJECTIVE PANEL
========================================================= */

.objective-panel {

    grid-template-columns: 180px 1fr 330px;

    background:
        linear-gradient(
            110deg,
            #F4F7FF 0%,
            #FFFFFF 100%
        );
}


/* =========================================================
   OBJECTIVE VISUAL
========================================================= */

.objective-visual {

    height: 100%;

    min-height: 280px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px 25px 25px 0;
}


/* =========================================================
   OBJECTIVE STEPS
========================================================= */

.objective-steps {

    width: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap: 8px;

    padding-top: 25px;
}


.objective-step {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    color: #3A4F66;

    font-size: 10px;

    text-align: center;
}


/* Step icon */

.step-icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #EAF2FB;

    border: 1px solid #D5E3F3;

    color: #083C7C;

    font-size: 23px;

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


.objective-step:hover .step-icon {

    transform:
        translateY(-8px);

    background: #083C7C;

    color: #FFFFFF;
}


/* Active step */

.objective-step-active .step-icon {

    width: 62px;

    height: 78px;

    border-radius: 8px 8px 3px 3px;

    background: #083C7C;

    color: #FFFFFF;

    font-size: 28px;
}


.objective-step-active span {

    color: #083C7C;

    font-weight: 700;
}


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

.mandate-panel::before,
.objective-panel::before {

    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    border: 1px solid rgba(8, 60, 124, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


.mandate-panel::before {

    left: -90px;

    bottom: -90px;
}


.objective-panel::before {

    right: -90px;

    bottom: -90px;
}


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

.mandate-panel {

    animation:
        mandateFade 0.7s ease both;
}


.objective-panel {

    animation:
        mandateFade 0.7s ease 0.15s both;
}


@keyframes mandateFade {

    from {

        opacity: 0;

        transform: translateY(25px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}


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

@media (max-width: 991.98px) {

    .mandate-objective-section {

        padding: 65px 0;
    }


    .mandate-panel,
    .objective-panel {

        grid-template-columns:
            140px 1fr;

        min-height: 280px;
    }


    .mandate-image,
    .objective-visual {

        grid-column: 1 / -1;

        height: 220px;

        min-height: 220px;

        padding: 0 25px 25px;
    }


    .mandate-image img {

        height: 190px;
    }


    .objective-visual {

        padding-top: 0;
    }


    .mandate-content,
    .objective-content {

        padding: 30px;
    }
}


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

@media (max-width: 767.98px) {

    .mandate-objective-section {

        padding: 55px 0;
    }


    .mandate-panel,
    .objective-panel {

        display: flex;

        flex-direction: column;

        min-height: auto;

        text-align: center;
    }


    .mandate-icon-area,
    .objective-icon-area {

        width: 100%;

        min-height: auto;

        padding: 30px 0 10px;
    }


    .mandate-icon-area::after,
    .objective-icon-area::after {

        display: none;
    }


    .mandate-icon-circle,
    .objective-icon-circle {

        width: 95px;

        height: 95px;

        font-size: 42px;
    }


    .mandate-content,
    .objective-content {

        width: 100%;

        padding: 20px 25px 30px;
    }


    .mandate-content h2,
    .objective-content h2 {

        font-size: 28px;
    }


    .mandate-content p,
    .objective-content p {

        font-size: 13px;

        line-height: 1.65;
    }


    .mandate-line,
    .objective-line {

        margin-left: auto;

        margin-right: auto;
    }


    .mandate-image {

        width: 100%;

        height: 220px;

        min-height: 220px;

        padding: 0 20px 20px;
    }


    .mandate-image img {

        height: 200px;
    }


    .objective-visual {

        width: 100%;

        height: 220px;

        min-height: 220px;

        padding: 0 20px 25px;
    }


    .objective-steps {

        padding-top: 15px;

        gap: 5px;
    }


    .step-icon {

        width: 45px;

        height: 45px;

        font-size: 20px;
    }


    .objective-step-active .step-icon {

        width: 55px;

        height: 68px;
    }

}


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

@media (max-width: 480px) {

    .mandate-objective-section {

        padding: 45px 0;
    }


    .mandate-content,
    .objective-content {

        padding: 18px 20px 25px;
    }


    .mandate-content h2,
    .objective-content h2 {

        font-size: 25px;
    }


    .mandate-content p,
    .objective-content p {

        font-size: 12px;
    }


    .mandate-image {

        height: 190px;

        min-height: 190px;
    }


    .mandate-image img {

        height: 170px;
    }


    .objective-visual {

        height: 190px;

        min-height: 190px;
    }


    .objective-step {

        font-size: 9px;
    }
}

/* =========================================================
   ACADEMIC COUNCIL - MODERN FINAL UI
   Consistent left/right spacing across all sections
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =========================================================
   COMMON SECTION GUTTER
   Same left/right space for all sections
========================================================= */

.academic-council-banner,
.statutory-authority-section,
.statutory-functions-section,
.council-composition-section {
    width: 100%;
}

/* Common content width */
.statutory-authority-section > .container,
.statutory-functions-section > .container,
.council-composition-section > .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 3.7% !important;
    padding-right: 3.7% !important;

    box-sizing: border-box;
}

/* Remove nested Bootstrap spacing */
.statutory-authority-section .container .container,
.statutory-functions-section .container .container,
.council-composition-section .container .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* =========================================================
   01. ACADEMIC COUNCIL BANNER
========================================================= */

.academic-council-banner {
    position: relative;
    display: grid;
    grid-template-columns: 50% 50%;

    width: 100%;
    min-height: 470px;

    overflow: hidden;
    background: #083C7C;
}

/* Left banner content */

.academic-council-content {
    position: relative;
    z-index: 2;

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

    width: 100%;
    min-height: 470px;

    padding: 70px 7.4%;

    background:
        linear-gradient(
            135deg,
            #083C7C 0%,
            #0A478E 100%
        );

    color: #ffffff;
}

/* Small badge */

.academic-council-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    width: fit-content;

    margin-bottom: 22px;
    padding: 9px 17px;

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

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

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .7px;

    backdrop-filter: blur(8px);
}

.academic-council-badge i {
    font-size: 16px;
}

/* Banner heading */

.academic-council-content h1 {
    margin: 0;

    color: #ffffff;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 48px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -1px;
}

/* Banner line */

.academic-council-line {
    width: 65px;
    height: 4px;

    margin: 22px 0;

    border-radius: 10px;

    background: #ffffff;
}

/* Banner paragraph */

.academic-council-content p {
    max-width: 620px;

    margin: 0;

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

    font-family: Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;

    text-align: justify !important;
}

/* Banner image */

.academic-council-image {
    position: relative;

    width: 100%;
    min-height: 470px;

    overflow: hidden;

    background: #0A478E;
}

.academic-council-photo {
    width: 100%;
    height: 100%;
}

.academic-council-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

/* Image overlay */

.academic-council-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8,60,124,.18),
            transparent 35%
        );

    pointer-events: none;
}


/* =========================================================
   02. STATUTORY ACADEMIC AUTHORITY
========================================================= */

.statutory-authority-section {
    position: relative;

    padding: 90px 0;

    background: #ffffff;
    overflow: hidden;
}

/* Modern subtle background */

.statutory-authority-section::before {
    content: "";

    position: absolute;

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

    width: 420px;
    height: 420px;

    border: 1px solid rgba(8,60,124,.08);
    border-radius: 50%;

    box-shadow:
        0 0 0 45px rgba(8,60,124,.025),
        0 0 0 90px rgba(8,60,124,.018);

    pointer-events: none;
}


/* Header */

.statutory-header {
    position: relative;
    z-index: 2;

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

    margin: 0 auto 50px;

    padding: 0 !important;

    text-align: center;
}

.statutory-label {
    display: inline-block;

    margin-bottom: 14px;

    color: #286ED1;

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

    letter-spacing: .8px;
}

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

    margin: 0 auto 18px;

    border-radius: 10px;

    background: #083C7C;
}

.statutory-header h2 {
    margin: 0 0 18px;

    color: #083C7C;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

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

    letter-spacing: -.5px;
}

.statutory-header p {
    max-width: 760px;

    margin: 0 auto;

    color: #526581;

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

    text-align: justify !important;
}


/* =========================================================
   STATUTORY CARDS
========================================================= */

.statutory-cards-row {
    position: relative;
    z-index: 2;

    width: 100%;

    margin: 0 !important;
}

.statutory-cards-row > div {
    display: flex;

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

.statutory-card {
    position: relative;

    width: 100%;
    height: 265px;

    padding: 32px 28px;

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

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e1e9f3;
    border-radius: 18px;

    box-shadow:
        0 8px 30px rgba(8,60,124,.06);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.statutory-card:hover {
    transform: translateY(-8px);

    border-color: rgba(8,60,124,.20);

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

/* Number */

.statutory-number {
    position: absolute;

    top: 0;
    right: 0;

    width: 54px;
    height: 45px;

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

    border-radius: 0 0 0 16px;

    background: #083C7C;
    color: #ffffff;

    font-size: 18px;
    font-weight: 700;
}

/* Icon */

.statutory-icon {
    width: 62px;
    height: 62px;

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

    margin-bottom: 18px;

    border-radius: 16px;

    background: #edf4fc;
    color: #083C7C;

    font-size: 27px;

    border: 1px solid #dce8f6;

    transition: .35s ease;
}

.statutory-card:hover .statutory-icon {
    background: #083C7C;
    color: #ffffff;

    transform: scale(1.06);
}

/* Card heading */

.statutory-card h3 {
    margin: 0 0 10px;

    color: #083C7C;

    font-size: 22px;
    font-weight: 700;
}

/* Card line */

.statutory-card-line {
    width: 38px;
    height: 3px;

    margin-bottom: 13px;

    border-radius: 10px;

    background: #286ED1;
}

/* Card paragraph */

.statutory-card p {
    width: 100%;
    max-width: 100%;

    margin: 0;

    color: #526581;

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

    text-align: justify !important;
}


/* =========================================================
   03. STATUTORY FUNCTIONS
========================================================= */

.statutory-functions-section {
    position: relative;

    width: 100%;

    padding: 90px 0;

    background: #f6f9fc;

    overflow: hidden;
}

/* Header */

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

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

    margin: 0 auto 50px;

    text-align: center;
}

.statutory-functions-section .functions-label {
    display: flex;

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

    gap: 12px;

    margin-bottom: 14px;

    color: #286ED1;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .8px;
}

.statutory-functions-section .functions-label span {
    width: 32px;
    height: 2px;

    background: #286ED1;

    border-radius: 10px;
}

.statutory-functions-section .functions-header h2 {
    margin: 0 0 16px;

    color: #083C7C;

    font-size: 35px;
    line-height: 1.2;
    font-weight: 700;
}

.statutory-functions-section .functions-header p {
    max-width: 800px;

    margin: 0 auto;

    color: #526581;

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

    text-align: justify !important;
}

.statutory-functions-section .functions-heading-line {
    width: 50px;
    height: 3px;

    margin: 20px auto 0;

    border-radius: 10px;

    background: #083C7C;
}


/* =========================================================
   FUNCTIONS GRID
========================================================= */

.statutory-functions-section .functions-wrapper {
    position: relative;
    z-index: 2;

    width: 100%;

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

    gap: 24px;
}

.statutory-functions-section .functions-column {
    width: 100%;

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

    gap: 20px;

    min-width: 0;
}

/* Function card */

.statutory-functions-section .function-card {
    position: relative;

    width: 100%;
    min-height: 250px;

    padding: 28px;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e1e9f3;
    border-radius: 18px;

    box-shadow:
        0 7px 25px rgba(8,60,124,.055);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.statutory-functions-section .function-card:hover {
    transform: translateY(-6px);

    border-color: rgba(8,60,124,.20);

    box-shadow:
        0 18px 40px rgba(8,60,124,.11);
}

/* Number */

/* .statutory-functions-section .function-number {
    position: absolute;

    top: 18px;
    right: 20px;

    color: #d8e4f2;

    font-size: 25px;
    font-weight: 800;
} */

/* Icon */

.statutory-functions-section .function-icon {
    width: 58px;
    height: 58px;

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

    margin-bottom: 20px;

    border-radius: 15px;

    background: #edf4fc;
    color: #083C7C;

    font-size: 24px;

    border: 1px solid #dce8f6;

    transition: .35s ease;
}

.statutory-functions-section .function-card:hover .function-icon {
    background: #083C7C;
    color: #ffffff;

    transform: scale(1.05);
}

/* Content */

.statutory-functions-section .function-content {
    width: 100%;
}

.statutory-functions-section .function-content h3 {
    margin: 0 0 12px;

    color: #083C7C;

    font-size: 21px;
    line-height: 1.35;
    font-weight: 700;
}

.statutory-functions-section .function-content p {
    margin: 0;

    color: #526581;

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

    text-align: justify !important;

    overflow-wrap: break-word;
}


/* =========================================================
   04. COUNCIL COMPOSITION
========================================================= */

.council-composition-section {
    position: relative;

    width: 100%;

    padding: 90px 0;

    background: #ffffff;

    overflow: hidden;
}

/* Header */

.council-header {
    position: relative;
    z-index: 2;

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

    margin: 0 auto 55px;

    text-align: center;
}

.council-label {
    display: flex;

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

    gap: 10px;

    margin-bottom: 14px;

    color: #083C7C;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .7px;
}

.council-label i {
    font-size: 20px;
}

.label-line {
    width: 35px;
    height: 2px;

    background: #083C7C;

    border-radius: 10px;
}

.council-header h2 {
    margin: 0 0 16px;

    color: #083C7C;

    font-size: 35px;
    line-height: 1.2;
    font-weight: 700;
}

.council-header p {
    max-width: 700px;

    margin: 0 auto;

    color: #526581;

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

    text-align: justify !important;
}

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

    margin: 20px auto 0;

    border-radius: 10px;

    background: #083C7C;
}


/* =========================================================
   COUNCIL TIMELINE
========================================================= */

.council-timeline {
    position: relative;

    width: 100%;

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

    gap: 22px;

    margin-top: 70px;
}

.council-timeline::before {
    content: "";

    position: absolute;

    top: -35px;
    left: 10%;
    right: 10%;

    height: 1px;

    background: #d8e2ee;
}


/* Council card */

.council-card {
    position: relative;

    width: 100%;
    min-height: 290px;

    padding: 25px 22px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e1e9f3;
    border-radius: 18px;

    box-shadow:
        0 8px 28px rgba(8,60,124,.055);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

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

    box-shadow:
        0 18px 40px rgba(8,60,124,.11);
}

/* Icon */

.council-icon {
    width: 72px;
    height: 72px;

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

    margin: -5px auto 12px;

    border-radius: 50%;

    background: #edf4fc;
    color: #083C7C;

    font-size: 31px;

    border: 1px solid #dce8f6;

    transition: .35s ease;
}

.council-card:hover .council-icon {
    background: #083C7C;
    color: #ffffff;

    transform: scale(1.07);
}

.council-card-line {
    width: 38px;
    height: 3px;

    margin: 8px auto 15px;

    border-radius: 10px;

    background: #286ED1;
}

.council-card h6 {
    min-height: 48px;

    margin: 0 auto;

    color: #083C7C;

    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.council-divider {
    width: 80%;
    height: 1px;

    margin: 15px auto;

    background: #e4ebf3;
}

.council-card p {
    max-width: 220px;

    margin: 0 auto;

    color: #526581;

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

    text-align: justify !important;
}


/* =========================================================
   LEGAL MANDATE / OBJECTIVE
========================================================= */

.collective-responsibility,
.collective-responsibility1 {
    /* width: 100%; */

    display: flex;
    align-items: center;

    gap: 22px;

    margin-top: 25px;

    padding: 24px 30px;

    border-radius: 16px;

    box-sizing: border-box;
}

.collective-responsibility {
    background: #083C7C;
}

.collective-responsibility1 {
    background: #f2f6fc;

    border: 1px solid #dce7f3;
}

.collective-icon,
.collective-icon1 {
    flex: 0 0 58px;

    width: 58px;
    height: 58px;

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

    border-radius: 14px;

    font-size: 25px;
}

.collective-icon1 {
    background: rgba(255,255,255,.12);
    color: #ffffff;
}

.collective-icon {
    background: #ffffff;
    color: #083C7C;
}

.collective-divider {
    width: 1px;
    height: 50px;

    flex: 0 0 1px;

    background: rgba(255,255,255,.25);
}

.collective-responsibility1 .collective-divider {
    background: #d5e0ed;
}

.collective-content,
.collective-content1 {
    flex: 1;
    min-width: 0;
}

.collective-content h3,
.collective-content1 h3 {
    margin: 0 0 7px;

    font-size: 23px;
    line-height: 1.3;
    font-weight: 700;
}

.collective-content h3 {
    color: #ffffff;
}

.collective-content1 h3 {
    color: #083C7C;
}

.collective-content p,
.collective-content1 p {
    margin: 0;

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

    text-align: justify !important;
}

.collective-content p {
    color: rgba(255,255,255,.88);
}

.collective-content1 p {
    color: #526581;
}


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

@media (max-width: 1199px) {

    .academic-council-content {
        padding: 60px 6%;
    }

    .academic-council-content h1 {
        font-size: 43px;
    }

    .statutory-authority-section,
    .statutory-functions-section,
    .council-composition-section {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .council-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 55px;
    }

    .council-timeline::before {
        display: none;
    }
}


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

@media (max-width: 991px) {

    .statutory-authority-section > .container,
    .statutory-functions-section > .container,
    .council-composition-section > .container {
        padding-left: 4% !important;
        padding-right: 4% !important;
    }

    /* Banner */
    .academic-council-banner {
        grid-template-columns: 1fr;
    }

    .academic-council-content {
        min-height: 390px;

        padding: 65px 8%;
    }

    .academic-council-image {
        min-height: 330px;
    }

    /* Functions */
    .statutory-functions-section .functions-wrapper {
        grid-template-columns: 1fr;
    }

    .statutory-functions-section .function-card {
        min-height: 235px;
    }

    /* Council */
    .council-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .collective-responsibility,
    .collective-responsibility1 {
        padding: 22px 24px;
    }
}


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

@media (max-width: 767px) {

    .statutory-authority-section > .container,
    .statutory-functions-section > .container,
    .council-composition-section > .container {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    /* Banner */

    .academic-council-content {
        min-height: 360px;

        padding: 55px 7%;
    }

    .academic-council-content h1 {
        font-size: 38px;
    }

    .academic-council-content p {
        font-size: 14px;
        line-height: 1.7;

        text-align: justify !important;
    }

    .academic-council-image {
        min-height: 280px;
        height: 280px;
    }

    /* Section spacing */

    .statutory-authority-section,
    .statutory-functions-section,
    .council-composition-section {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    /* Headers */

    .statutory-header,
    .functions-header,
    .council-header {
        margin-bottom: 38px;
    }

    .statutory-header h2,
    .statutory-functions-section .functions-header h2,
    .council-header h2 {
        font-size: 30px;
    }

    .statutory-header p,
    .statutory-functions-section .functions-header p,
    .council-header p {
        font-size: 14px;
        line-height: 1.7;

        text-align: justify !important;
    }

    /* Authority cards */

    .statutory-cards-row {
        row-gap: 18px !important;
    }

    .statutory-cards-row > div {
        padding-left: 0;
        padding-right: 0;
    }

    .statutory-card {
        height: auto;
        min-height: 250px;

        padding: 27px 23px;
    }

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

    /* Functions */

    .statutory-functions-section .functions-wrapper {
        gap: 18px;
    }

    .statutory-functions-section .functions-column {
        gap: 18px;
    }

    .statutory-functions-section .function-card {
        min-height: 240px;

        padding: 24px;
    }

    .statutory-functions-section .function-content h3 {
        font-size: 20px;
    }

    .statutory-functions-section .function-content p {
        font-size: 14px;

        text-align: justify !important;
    }

    /* Council */

    .council-timeline {
        grid-template-columns: 1fr;

        gap: 22px;

        margin-top: 45px;
    }

    .council-card {
        min-height: 265px;
    }

    .council-card p {
        max-width: 100%;

        text-align: justify !important;
    }

    /* Legal / Objective */

    .collective-responsibility,
    .collective-responsibility1 {
        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

        padding: 24px 20px;
    }

    .collective-divider {
        width: 45px;
        height: 1px;

        flex: 0 0 1px;
    }

    .collective-content p,
    .collective-content1 p {
        font-size: 14px;

        text-align: justify !important;
    }
}


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

@media (max-width: 480px) {

    .academic-council-content {
        min-height: 340px;

        padding: 48px 6%;
    }

    .academic-council-badge {
        font-size: 11px;

        padding: 8px 13px;
    }

    .academic-council-content h1 {
        font-size: 34px;
    }

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

    .academic-council-image {
        height: 250px;
        min-height: 250px;
    }

    .statutory-header h2,
    .statutory-functions-section .functions-header h2,
    .council-header h2 {
        font-size: 28px;
    }

    .statutory-card {
        min-height: 240px;

        padding: 24px 20px;
    }

    .statutory-card p,
    .statutory-functions-section .function-content p,
    .council-card p {
        font-size: 13px;
        line-height: 1.65;
    }

    .statutory-functions-section .function-card {
        min-height: 235px;

        padding: 22px 20px;
    }

    .council-card {
        min-height: 255px;
    }
}


/* =========================================================
   FINAL TEXT ALIGNMENT
   Keep every section paragraph justified
========================================================= */

section p {
    text-align: justify !important;
}


/* =========================================================
   SAME LEFT & RIGHT SPACING
   STATUTORY AUTHORITY + STATUTORY FUNCTIONS
========================================================= */

.statutory-authority-section > .container,
.statutory-functions-section > .container {
    width: 100% !important;
    max-width: 100% !important;

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

    padding-left: 3.7% !important;
    padding-right: 3.7% !important;

    box-sizing: border-box;
}


/* =========================================================
   FIX FUNCTIONS FULL WIDTH
========================================================= */

/* Wrapper must NOT be a 2-column grid */
.statutory-functions-section .functions-wrapper {
    width: 100% !important;
    max-width: none !important;

    display: block !important;

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


/* Functions grid uses the FULL section width */
.statutory-functions-section .functions-grid {
    width: 100% !important;
    max-width: none !important;

    display: grid !important;

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

    gap: 24px !important;

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


/* Cards */
.statutory-functions-section .function-card {
    width: 100% !important;
    min-width: 0 !important;
}


/* 7th card centered */
.statutory-functions-section .function-card:nth-child(7) {
    grid-column: 1 / -1 !important;

    width: calc(50% - 12px) !important;

    justify-self: center !important;
}


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

@media (max-width: 991px) {

    .statutory-functions-section .functions-wrapper {
        display: block !important;
        width: 100% !important;
    }

    .statutory-functions-section .functions-grid {
        width: 100% !important;

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

        gap: 18px !important;
    }

    .statutory-functions-section .function-card:nth-child(7) {
        width: calc(50% - 9px) !important;
    }
}


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

@media (max-width: 767px) {

    .statutory-functions-section .functions-wrapper {
        display: block !important;
        width: 100% !important;
    }

    .statutory-functions-section .functions-grid {
        width: 100% !important;

        grid-template-columns: 1fr !important;

        gap: 18px !important;
    }

    .statutory-functions-section .function-card {
        width: 100% !important;
    }

    .statutory-functions-section .function-card:nth-child(7) {
        grid-column: auto !important;

        width: 100% !important;

        justify-self: stretch !important;
    }
}

/* REMOVE DOTS FROM ACADEMIC COUNCIL HERO */
.academic-council-banner::before {
    display: none !important;
}


/* REMOVE DOTS FROM STATUTORY ACADEMIC AUTHORITY */
.statutory-authority-section::after {
    display: none !important;
}














/* =========================================================
   ACADEMIC COUNCIL BANNER = GOVERNING COUNCIL BANNER
   ------------------------------------------------------------
   Both pages already use the same markup - the same section,
   content wrapper, badge, title, rule, paragraph, image wrapper
   and photo wrapper - and the same photograph. Only the
   stylesheet differed:

       Governing Council          Academic Council
       min-height 430px           min-height 300px
       content pad 80px 50px..    80px 6% 80px 8%
       line 75px, radius 10px     50px, radius 5px
       image min-height 430px     500px
       photo curve 105% x 100%    100% x 100%
       photo tint  #dce9f7        #AFCBFF
       navy seam on the image     no seam
       dot motif + fade-in        none
       text on the logo's edge     8% of the banner

   Everything below is the Governing Council banner's own rule
   set, copied across with its breakpoints (1200 / 991 / 767 /
   480 / 360 and the reduced-motion guard), so the two banners
   are identical on every device view - same height, same curve
   on the photo, same navy seam, same dot motif, same fade-in
   and the same alignment to the header logo.

   Nothing is deleted. No markup and no content is touched.
   These rules sit at the end of the file, so they take
   precedence over the older Academic Council rules above.
   ========================================================= */

.academic-council-banner {
    position: relative;
    width: 100%;
    min-height: 430px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #083C7C;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
}

.academic-council-banner::after {
    display: none !important;
    content: none !important;
}

.academic-council-content::after {
    display: none !important;
    content: none !important;
}

.academic-council-content {
    width: 52%;
    padding: 80px 50px 80px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 3;
}

.academic-council-content h1 {
    margin: 0;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -1px;
}

.academic-council-line {
    width: 75px;
    height: 3px;
    margin: 22px 0 18px;
    background: #ffffff;
    border-radius: 10px;
    transition: width 0.35s ease;
}

.academic-council-content p {
    max-width: 540px;
    margin: 0;
    color: rgba(255, 255, 255, 0.90);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}

.academic-council-image {
    position: relative;
    width: 48%;
    min-height: 430px;
    overflow: hidden;
    z-index: 2;
}

.academic-council-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #dce9f7;
    clip-path: ellipse(105% 100% at 100% 50%);
}

.academic-council-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transform: scale(1.04);
}

.academic-council-image::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 100%;
    background: #083C7C;
    z-index: 4;
    opacity: 0.9;
}

.academic-council-banner::before {
    content: "";
    position: absolute;
    top: 38px;
    left: 35px;
    width: 65px;
    height: 60px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.45) 1.6px, transparent 1.6px);
    background-size: 12px 12px;
    opacity: 0.7;
    z-index: 4;
    pointer-events: none;
}

.academic-council-content {
    animation: councilContentIn 0.8s ease-out both;
}

.academic-council-photo {
    animation: councilImageIn 1s ease-out both;
}

@keyframes councilContentIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes councilImageIn {
    from {
        opacity: 0;
        transform: scale(1.05);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---------- 1200px ---------- */

@media (max-width: 1200px) {
    .academic-council-content {
        padding-left: 6%;
        padding-right: 35px;
    }
}

/* ---------- 991px ---------- */

@media (max-width: 991px) {
    .academic-council-banner {
        min-height: 400px;
    }

    .academic-council-content {
        width: 52%;
        padding: 60px 30px 60px 5%;
    }

    .academic-council-content h1 {
        font-size: 44px;
    }

    .academic-council-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .academic-council-image {
        width: 48%;
        min-height: 400px;
    }
}

/* ---------- 767px ---------- */

@media (max-width: 767px) {
    .academic-council-banner {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .academic-council-content {
        width: 100%;
        min-height: 340px;
        padding: 55px 25px 45px;
    }

    .academic-council-content h1 {
        font-size: clamp(34px, 9vw, 46px);
        line-height: 1.12;
    }

    .academic-council-content p {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.7;
    }

    .academic-council-line {
        width: 45px;
        margin: 20px 0 16px;
    }

    .academic-council-image {
        width: 100%;
        height: 300px;
        min-height: 300px;
    }

    .academic-council-photo {
        position: relative;
        inset: auto;
        width: 100%;
        height: 100%;
        clip-path: none;
        border-radius: 0;
    }

    .academic-council-photo img {
        object-position: center;
    }

    .academic-council-image::before {
        width: 6px;
    }

    .academic-council-banner::before {
        top: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
        background-size: 10px 10px;
    }
}

/* ---------- 480px ---------- */

@media (max-width: 480px) {
    .academic-council-content {
        min-height: 320px;
        padding: 45px 20px 38px;
    }

    .academic-council-content h1 {
        font-size: 32px;
        letter-spacing: -0.5px;
    }

    .academic-council-content p {
        font-size: 13px;
        line-height: 1.65;
    }

    .academic-council-line {
        width: 42px;
        height: 3px;
        margin: 18px 0 15px;
    }

    .academic-council-image {
        height: 250px;
        min-height: 250px;
    }
}

/* ---------- 360px ---------- */

@media (max-width: 360px) {
    .academic-council-content {
        padding: 40px 18px 35px;
    }

    .academic-council-content h1 {
        font-size: 29px;
    }

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

    .academic-council-image {
        height: 220px;
        min-height: 220px;
    }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .academic-council-content,
    .academic-council-photo,
    .academic-council-photo img {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- the later 991px override on the council page ---------- */

@media (max-width: 991px) {
    .academic-council-image::before {
        display: none !important;
        content: none !important;
        width: 0 !important;
    }

    .academic-council-image {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .academic-council-photo {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        clip-path: none !important;
    }

    .academic-council-photo img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover !important;
    }
}

/* ---------- align the banner text to the header logo ---------- */

.academic-council-content {
    padding-left: max(4%, calc((100% - 1380px) / 2)) !important;
}

@media (max-width: 1199px) {
    .academic-council-content {
        padding-left: 3% !important;
    }
}

@media (max-width: 767px) {
    .academic-council-content {
        padding-left: 5% !important;
    }
}
/* ---------- two last differences found by measuring both banners ---------- */

/* The older Academic Council rules gave the content a fixed
   min-height (470px desktop, 390px at 1200px). Governing Council
   leaves it on auto, which is why its banner was 430px tall and
   this one was 470px at the same width. */
.academic-council-content {
    min-height: auto;
}

/* Governing Council hides the dot motif on the banner. */
.academic-council-banner::before {
    display: none !important;
    content: none !important;
}
/* =========================================================
   STATUTORY FUNCTIONS AND POWERS - CENTRE THE INTRO
   ------------------------------------------------------------
   The paragraph under that heading carries odlc-text-center in
   the markup, but two rules in this file set

       .statutory-functions-section .functions-header p
           { text-align: justify !important }

   (academiccouncil.css:3178 and :5940, plus a third inside the
   767px block at :6589). A two-class selector outranks
   odlc-text-center, so the text was justified and the last line
   of each sentence stretched, which is what the screenshot shows.

   The heading above it was already centred. This centres the
   paragraph the same way. Same selector, marked important and
   last in the file, so it wins over all three rules above.
   ========================================================= */

.statutory-functions-section .functions-header p {
    text-align: center !important;
}

/* The paragraph is capped at max-width 800px but its auto margins were
   being reset to 0, so the 800px box sat hard against the left of the
   830px header and the text finished 15px left of the centred heading.
   Restoring the auto margins centres the box on the same axis. */
.statutory-functions-section .functions-header p {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* =========================================================
   COUNCIL COMPOSITION - CENTRE THE INTRO
   ------------------------------------------------------------
   Same pattern as the Statutory Functions block above. The
   paragraph carries odlc-text-center in the markup, but

       .council-header p { text-align: justify !important }
       (academiccouncil.css:6173, and again with
        .statutory-functions-section .functions-header p
        inside the 767px block at :6584-6589)

   outranks it, so the text was justified. Same selector,
   marked important and last in the file, so it wins.

   The auto margins are restored for the same reason as the
   block above: odlc-body-text resets them to 0, which left the
   capped paragraph box hard against the left of its header and
   the text finished off-centre relative to the heading.
   ========================================================= */

.council-header p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* The Statutory Academic Authority paragraph is capped at max-width
   760px and its auto margins are being reset to 0 as well, so the box
   sat hard against the left of its 850px header and the centred text
   finished 45px left of the heading above it. */
.statutory-authority-section .statutory-header p {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* =========================================================
   COUNCIL COMPOSITION CARDS - CENTRE THE CARD TITLES
   ------------------------------------------------------------
   Each card title carries three single-class rules at once:

       .odlc-text-center        { text-align: center }
       .odlc-text-justify       { text-align: justify }
       .odlc-small-card-title   { text-align: left }

   All three have the same specificity, so whichever comes last
   in the cascade wins - .odlc-small-card-title does - and the
   titles rendered left-aligned while the card itself and its
   icon were centred.

   Two classes here outrank all three of them whatever the
   source order, so the titles now sit centred in the card and
   line up with the icon above them. Centre is the one the card
   layout needs; justify cannot apply at the same time as it.
   ========================================================= */

.council-card .odlc-small-card-title {
    text-align: center !important;
}
/* The title box is narrower than the card and its auto margins were
   reset to 0, so the centred text sat in a box parked at the card's
   left edge - 105px off the card's centre and 105px off the icon
   above it. Restoring the auto margins centres the box, and the text
   with it. */
.council-card .odlc-small-card-title {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* =========================================================
   STATUTORY FUNCTIONS AND POWERS - CENTRE THE HEADING
   ------------------------------------------------------------
   Same three-class conflict as the Council Composition cards:

       <h2 class="odlc-custom-card-title odlc-text-center">

       .odlc-text-center          { text-align: center }
       .odlc-custom-card-title    { text-align: left }

   Both are single-class, so source order decided it and
   .odlc-custom-card-title won - the heading rendered left while
   the paragraph under it was centred. Two classes outrank both.

   The heading box is already the full width of its header and
   centred on it, so nothing else needs changing.
   ========================================================= */

.functions-header .odlc-custom-card-title {
    text-align: center !important;
}
/* =========================================================
   BANNER - REMOVE THE VERTICAL NAVY LINE
   ------------------------------------------------------------
   The seam is the .academic-council-image::before pseudo: a 12px
   navy (#083C7C) strip pinned to the left edge of the photo at
   z-index 4, which is the vertical line running down the banner
   where the blue panel meets the picture.

   It is already switched off below 991px by the rule copied from
   the council stylesheet, so it only shows on wider screens.
   Switching it off at every width removes it there too.

   This is the only rule changed - the curved photo edge, the
   photo tint and everything else in the banner are untouched.
   ========================================================= */

.academic-council-image::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
}
/* =========================================================
   SECTION WIDTH = HEADER / FOOTER WIDTH
   ------------------------------------------------------------
   The header and footer both sit in one column, set in
   header.css:9213-9273:

       width 92%  (default)      max-width 1380px   centred
       width 94%  (<=1199px)
       width 90%  (<=767px)
       width 92%  (<=480px)

   This page's three sections used a Bootstrap .container
   instead - full width with symmetric padding, which put
   their content in a narrower band than the header:

       header / footer   926px   left 29.6      right 955.3
       section content   912px   left 36.4      right 948.4
                          14px narrower, 6.9px further in each side

   These rules give all three sections the header's own column,
   with the same percentage ladder and the same 1380px cap, so
   the left and right edges line up with the header above and
   the footer below on every screen.

   The Bootstrap row is also reset: a row carries negative
   gutter margins that are normally absorbed by the container's
   own padding, and that padding is now 0, so the row would
   otherwise spill past the column. .statutory-cards-row is the
   only row on the page.

   No markup, no content, no other rule is touched.
   ========================================================= */

.statutory-authority-section > .container,
.statutory-functions-section > .container,
.council-composition-section > .container {
    width: 92% !important;
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.statutory-authority-section .row,
.statutory-functions-section .row,
.council-composition-section .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 1199px) {
    .statutory-authority-section > .container,
    .statutory-functions-section > .container,
    .council-composition-section > .container {
        width: 94% !important;
    }
}

@media (max-width: 767px) {
    .statutory-authority-section > .container,
    .statutory-functions-section > .container,
    .council-composition-section > .container {
        width: 90% !important;
    }
}

@media (max-width: 480px) {
    .statutory-authority-section > .container,
    .statutory-functions-section > .container,
    .council-composition-section > .container {
        width: 92% !important;
    }
}
/* =========================================================
   STATUTORY ACADEMIC AUTHORITY - THREE LINES
   ------------------------------------------------------------
   Two caps were holding this paragraph at four lines:

       .statutory-header     max-width 850px
       .statutory-header p   max-width 760px

   316 characters at the page's own 16px body size measure out
   at three lines across the full 926px column, and four inside
   760px, so widening the box is all that is needed - the type
   stays at 16px and matches the rest of the page.

   The heading and the eyebrow above are centred, so taking the
   header out to the column does not move them.

   Nothing else on the page is touched.
   ========================================================= */

.statutory-authority-section .statutory-header,
.statutory-authority-section .statutory-header p {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   ACADEMIC COUNCIL: THE BANNER PHOTOGRAPH TAKES THE CLASS X SHAPE
   -------------------------------------------------------------------------

   THE BANNER PHOTOGRAPH IS CUT TO THE SAME SHAPE AS THE SECONDARY LEVEL
   CLASS X PAGE, AT EVERY WIDTH.

   The model is .secondary-banner-image in
   css/Programmes/Academic/secondarylevel-classx.css - the Secondary Level -
   Class X (Grade 10) page named as the reference. Its two declarations:

       .secondary-banner-image { clip-path: ellipse(70% 90% at 72% 50%); }
       .secondary-banner-image::before {
           content: ""; position: absolute; top: -10%; left: -32%;
           width: 58%; height: 120%; z-index: 3; border-radius: 50%;
           background: #062d5c;
       }

   An ellipse anchored at 72% 50% cuts a real curve out of the photograph's
   left side, so the blue field bulges over it. The oval on ::before is what
   draws that bulge. Both are copied here, not re-derived.

   --------------------------------------------------------------------------
   ONE COLOUR DELIBERATELY NOT COPIED

   The reference oval is #062d5c. This banner's own field is #083C7C, and
   #062d5c is never to be used as a banner background on this site, so the
   oval below is #083C7C. The two are both navy and the oval sits on a navy
   field either way, so the shape and the sweep are the same to the eye; what
   changes is only that this file does not introduce a colour it is not
   allowed to use. Change this one line if you want the exact reference
   value.

   --------------------------------------------------------------------------
   WHAT ELSE IS DIFFERENT, AND WHY IT IS LEFT ALONE

   No PHP is touched on any of these pages. Every one of them already has the
   wrapper and the <img> inside it, so the shape is a styling question alone:

       governance.php                           .gd-banner-photo        had no curve
       Governance/academiccouncil.php           .academic-council-photo 105% curve
       Governance/administrativestructure.php   .admin-image-shape      105% curve
       Governance/governingcouncil.php          .academic-council-photo 105% curve

   The three council pages were not flat - they had the other ellipse, a much
   gentler left curve. Only the value changes on those. The decorative dot
   grid, the rings, the 12px strip on .academic-council-image::before, the
   entrance animations, the padding ladder and every other declaration in
   these files are all left exactly as they are.

   The oval is placed on the element that holds the photograph, not on the
   outer .academic-council-image - that ::before is already in use on those
   two pages for the 12px strip, and two rules cannot share one pseudo.

   --------------------------------------------------------------------------
   THE BANDS

   Where this file already forces clip-path: none with !important, that
   !important still wins and the shape is simply absent below that width,
   which is the existing behaviour of the page and is not overridden here.
   Only the oval needs a matching display:none, because nothing else was
   hiding it and it would otherwise sit over the square photograph on a
   phone.
========================================================================== */


/* ---------- the clip ---------- */

.academic-council-photo {
    clip-path: ellipse(70% 90% at 72% 50%);
}

/* ---------- the navy oval that draws the bulge ---------- */

.academic-council-photo::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -62%;
    width: 58%;
    height: 120%;
    z-index: 3;
    border-radius: 50%;
    background: #083C7C;
}

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

    .academic-council-photo::before {
        display: none;
    }
}

/* ---------- why these widths ---------- */
/* This file already carries clip-path: none !important at 991px, which wins over the rule above and is left in charge. Only the oval needed matching, since nothing else was hiding it. */