/* Wellbeing quote section styles */
.wb-quote-img-container {
    flex: 0 0 390px;
    max-width: 390px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.wb-quote-img {
    width: 360px;
    max-width: 100%;
    height: auto;
    border-radius: 50%;
}

.wb-quote-pill-container {
    flex: 1;
    min-width: 200px;
    position: relative;
    z-index: 1;
}

.custom-row-width {
    max-width: 900px;
    width: 100%;
}

/* Mobile responsive styles */
@media (max-width: 767.98px) {
    .wb-quote-img-container {
        flex: 0 0 300px;
        max-width: 300px;
    }

    .wb-quote-pill-container {
        margin-top: 20px;
    }

    .hero-banner.country-hero {
        min-height: 120px !important;
    }
}

/* Banner */
    .hero-banner.country-hero {
        background: url(../images/country/image-01.jpg) no-repeat center bottom;
        background-size: cover;
        position: relative;
        min-height: 165px;
        padding:0px;
    }

    .hero-banner.country-hero .hero-caption {
        position: relative;
        z-index: 2;
    }

    .hero-banner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(5, 21, 60, 0.0); /* Optional overlay */
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .hero-caption {
        position: relative;
        z-index: 1;
    }

    .hero-banner .hero-caption h1 {
        font-size: 2rem;
    }

    .hero-banner.blog-hero .hero-caption, .hero-banner.country-hero .hero-caption {
        left: 0%;
        width: 100%;
    }

    @media (min-width: 768px) {
        .hero-banner .hero-caption h1 {
            font-size: 2.2rem;
        }
    }

    @media (min-width: 992px) {
        .hero-banner {
            min-height: 360px;
        }
    }

    .heading {
        font-size: 2.2rem;
        font-weight: bold;
        color: #142259;
        text-align: left;
    }

    /* Well-being quote section */
    .wb-quote-section .wb-circle-img {
        max-width: 100%;
        height: auto;
        transition: transform 0.25s cubic-bezier(0.4, 0.2, 0.2, 1);
    }

    .wb-quote-section .wb-circle-img:hover {
        transform: scale(1.15);
    }
        .wb-quote-section {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        .wb-quote-section .wb-circle-img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        .wb-quote-section .wb-pill {
            background: linear-gradient(90deg, #2d3f8d 0%, #6a76a3 45%, #ead9ab 100%);
            color: #fff;
            border-top-right-radius: 120px;
            border-bottom-right-radius: 120px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            padding: 30px 34px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            margin-left: -112px; /* Adjust overlap for smaller circle */
            min-width: 0;
            width: 110%; /* ~30% wider than previous 85% */
            max-width: 110%;
        }
        .wb-quote-section .wb-quote {
            font-size: 1.5rem;
            line-height: 1.35;
            font-weight: 400;
            margin: 0;
            letter-spacing: .3px;
        }
        .wb-quote-section .wb-source {
            font-size: 1.6rem;
        }
    @media (min-width: 992px) {
            .wb-quote-section .wb-pill {
                padding: 30px 85px 30px 124px;
                margin-left: -110px;
                width: 100%;
                max-width: 100%;
            }
        }
        @media (max-width: 991.98px) {
            .wb-quote-section {
                flex-direction: column;
                align-items: center;
            }
            .wb-quote-img-container {
                flex: none;
                margin-bottom: 20px;
            }
            .wb-quote-pill-container {
                flex: none;
                width: 100%;
            }
            .wb-quote-section .wb-pill {
                border-top-right-radius: 30px;
                border-bottom-right-radius: 30px;
                border-top-left-radius: 30px;
                border-bottom-left-radius: 30px;
                padding: 25px;
                margin-left: 0;
                width: 100%;
                max-width: 100%;
            }
            .wb-quote-section .wb-quote { font-size: 1.3rem; }
            .wb-quote-section .wb-source { font-size: 1.3rem; }
        }
        @media (max-width: 767.98px) {
            .wb-quote-section .wb-pill {
                padding: 20px;
            }
            .wb-quote-section .wb-quote { font-size: 1.15rem; }
            .wb-quote-section .wb-source { font-size: 1.15rem; }
        }

        /* People section (right-side image) */
        .people-section { padding: 40px 0; }
        .people-card {
            display: flex;
        }
    .people-left { padding: 36px 0px; padding-left: 20px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
    .people-left .people-quote { color: #163049; margin-bottom: 18px; font-size: 1.8rem; line-height: 1.5; letter-spacing: 1px; }
    .people-left .people-author { color: #142259; font-size: 1.5rem; letter-spacing: 1px; }
        .people-right { flex: 0 0 45%; max-width: 45%; position: relative; padding-right: 50px; }
        .people-right img { width: 100%; height: 100%; object-fit: cover; display: block; }
        @media (max-width: 991.98px) {
            .people-card { flex-direction: column; }
            .people-right { flex: 0 0 auto; max-width: 100%; }
            .people-right img { border-radius: 0; height: 320px; }
            .people-left { padding: 22px; }
            .people-left .people-quote { font-size: 1.05rem; }
            .people-left .people-author { font-size: 1.05rem; }
        }

        /* Methodology section styles */
        .methodology-description {
            color: #4b5870;
            font-size: 1.4rem;
            line-height: 1.6;
            margin-bottom: 0;
            text-align: left;
        }

        /* wrapper to limit paragraph width to ~70% on desktop */
        .methodology-desc-wrap {
            width: 100%;
        }

        .methodology-visual-section {
            background: linear-gradient(90deg, #d6d9ea 0%, #efe6d9 100%);
            position: relative;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .methodology-content {
            align-items: center;
        }

        .methodology-logos {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            padding: 2rem 0;
        }

        .methodology-labels {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem 0;
            height: 100%;
        }

        .school-logo-section {
            display: flex;
            flex-direction: column;
        }

        .school-logo {
            width: 150px;
            object-fit: contain;
        }

        .circle-360-section {
            display: flex;
            flex-direction: column;
        }

        .circle-360-logo {
            width: 120px;
            object-fit: contain;
        }

        .methodology-divider {
            width: 75%;
            height: 2px;
            background-color: #fff;
            margin: 1rem auto;
            display: block;
            border-radius: 2px;
        }

        .assessment-label-section,
        .data-processing-section {
            display: flex;
            align-items: center;
            height: 85px;
        }

        .assessment-label,
        .data-processing {
            color: #142259;
            font-size: 1rem;
            font-weight: 700;
            text-align: center;
            line-height: 1.3;
        }

        .methodology-right {
            position: relative;
            padding: 2rem 0;
        }

        .hunded-badge {
            position: absolute;
            top: -46px;
            right: -25px;
            z-index: 10;
        }

        .hunded-logo {
            width: 100px;
            height: 100px;
        }

        .assessment-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .stakeholders-row {
            margin-top: 1rem;
            justify-content: center !important;
            gap: 1rem;
            max-width: 62%;
            margin-left: auto;
            margin-right: auto;
        }

        .areas-row {
            gap: 0.9rem;
            max-width: 92%;
            margin-left: auto;
            margin-right: auto;
        }

        .stakeholders-row .assessment-item {
            margin: 0 -0.3rem;
        }

        .assessment-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            min-width: 0;
            flex: 1;
            margin: 0;
        }

        .assessment-icon {
            width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.8rem;
            overflow: hidden;
        }

        .assessment-icon img {
            width:100%;
            object-fit: contain;
        }

        .assessment-label {
            font-size: 1rem;
            color: #142259;
            font-weight: 700;
            line-height: 1.2;
            text-align: center;
            letter-spacing: 1px;
        }

        /* Responsive adjustments */
        @media (max-width: 991.98px) {
            .methodology-logos {
                gap: 1.5rem;
                padding: 1.5rem 0;
            }

            .methodology-labels {
                gap: 1.5rem;
                padding: 1.5rem 0;
                align-items: center;
            }

            /* make paragraph full width on smaller screens */
            .methodology-desc-wrap { max-width: 100%; }

            .assessment-label-section,
            .data-processing-section {
                height: 120px;
            }

            .assessment-row {
                justify-content: center;
                gap: 1rem;
            }

            .assessment-item {
                margin: 0.5rem;
            }

            .hunded-badge {
                position: static;
                text-align: center;
                margin-bottom: 1rem;
            }
        }

        @media (max-width: 767.98px) {
            .methodology-logos {
                gap: 1rem;
                padding: 1rem 0;
            }

            .methodology-labels {
                gap: 0rem;
                padding: 1rem 0;
                align-items: center;
            }

            .assessment-label-section,
            .data-processing-section {
                height: 100px;
            }

            .assessment-row {
                flex-direction: column;
                gap: 1.5rem;
            }

            .stakeholders-row,
            .areas-row {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
                justify-items: center;
                margin-bottom: 2rem;
            }

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

            .areas-row .assessment-item:last-child {
                grid-column: 1 / -1;
            }

            .assessment-icon {
                width: 60px;
                height: 60px;
            }

            .assessment-icon img {
                width: 50px;
                height: 50px;
            }
        }

        /* Indicators styles (compact) */
        .indicator-card { position: relative; overflow: visible; }
        /* Compact image height for smaller cards */
        .indicator-image { width: 100%; height: 220px; background-size: cover; background-position: center; border-radius: 6px; }
        /* Increase bubble width to show more content */
        .indicator-bubble {
            background: #fff;
            width: 275px;
            max-width: 88%;
            margin: -68px auto 0;
            border-radius: 22px;
            padding: 16px 16px 14px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            position: relative;
            height: 250px;
        }

        /* Set a different height for indicator bubbles in the second row */
        .indicators-row .col-12.d-flex .row .indicator-bubble {
            height: 200px;
        }
        .indicator-icon { width: 56px; height: 56px; border-radius: 50%; display:flex; align-items:center; justify-content:center; margin: -36px auto 12px; box-shadow: 0 6px 14px rgba(0,0,0,0.08); }
        .indicator-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.25s cubic-bezier(0.4, 0.2, 0.2, 1);
        }

        .indicator-icon:hover img {
            transform: scale(1.15);
        }
        .indicator-bubble h5 { margin: 12px 0 15px; font-size: 1.05rem; color:#142259; font-weight:600; }
        .indicator-bubble p { margin: 0; color:#4b5870; font-size: .95rem; }
        @media (max-width: 1199.98px) {
            .indicator-image { height: 160px; }
        }
        @media (max-width: 991.98px) {
            .indicator-image { height: 150px; }
        }
        @media (max-width: 767.98px) {
            .indicator-image { height: 190px; }
            .indicator-bubble { width: 86%; margin-top: -46px; padding: 12px; }
            .indicator-icon { width: 48px; height: 48px; margin-top: -38px; }
        }

    /* Reduce overall column width for indicator cards so each card appears smaller */
        @media (min-width: 992px) {
            /* make the 3-up columns slightly narrower than default 33.33% */
            .indicators-row > .col-lg-4 {
                flex: 0 0 30%;
                max-width: 30%;
            }
            /* specifically target the two centered cards (nested row) and make them narrower */
            .indicators-row .col-12.d-flex .row > .col-lg-6 {
                flex: 0 0 36%;
                max-width: 36%;
            }
        }

        @media (min-width: 768px) and (max-width: 991.98px) {
            /* make two-up columns slightly narrower on tablets */
            .indicators-row > .col-md-6 {
                flex: 0 0 48%;
                max-width: 48%;
            }
        }

        /* Add consistent gaps between indicator cards (horizontal + vertical) */
        .indicators-row {
            gap: 3rem 3rem; /* row-gap column-gap */
        }

        /* Ensure nested centered row also gets spacing between its two columns */
        .indicators-row .col-12.d-flex .row {
            gap: 3rem;
        }

        /* Certification section */
        .cert-text { color: #4b5870; font-size: 1.4rem; line-height: 1.65; }
        /* Reduce logo sizes by 40% */
        .cert-logo { max-width: 156px; height: auto; }
        .cert-badge { max-width: 115px; height: auto; }
        /* Centered content wrapper with equal spacing on both sides - reduced by 20% */
        .cert-content-wrapper {
            margin: 0 auto;
            width: 100%;
        }
        /* Increase gap between logo and text using padding - increased by 20% */
        .cert-content-wrapper .col-md-9 {
            padding-left: 0;
        }
        /* Custom flexbox layout for precise gap control */
        .cert-row {
            display: flex;
            align-items: center;
            gap: 4rem;
            margin-bottom: 2rem;
        }
        .cert-logo-container {
            flex: 0 0 140px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cert-text-container {
            flex: 1;
        }
        /* Center align logos both horizontally and vertically */
        .cert-content-wrapper .col-md-2 {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        @media (max-width: 767.98px) {
            .cert-text { font-size: 1rem; line-height: 1.55; }
            .cert-logo { max-width: 120px; }
            .cert-badge { max-width: 108px; }
            .cert-content-wrapper { max-width: 95%; }
            .cert-row {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }
            .cert-logo-container {
                flex: 0 0 auto;
            }
        }

@media (max-width: 1200px) { .heading { font-size: 1.8rem; } }
@media (max-width: 768px) { .heading { font-size: 1.2rem; } }
@media (max-width: 480px) { .heading { font-size: 1.1rem; } }

/* Hide banner title by default; show only with mobile nav (<= 1364px) */
.hero-banner .banner-title { display: none; }

@media (max-width: 1364px) {
    .hero-banner .banner-title {
        display: block !important; /* override Bootstrap d-xl-none */
        margin: 0;
        padding: 0 15px;
        font-size: 2rem;
        line-height: 1.2;
    }
}

/* Fine-tune banner title sizing for smaller screens */
@media (max-width: 992px) {
    .hero-banner .banner-title {
        font-size: 1.8rem;
    }
}
@media (max-width: 768px) {
    .hero-banner .banner-title {
        font-size: 1.5rem;
    }
}