@import './../../../css/style-common.css';
@import './../../../css/style-J.css';
@import './../../../css/style-e.css';

#map {
    height: 660px;
    width: 100%;
}

@media (max-width: 767px) {
    #map {
        height: 400px;
        width: 100%;
    }
}

body header .container {
    max-width: 1440px !important;
}

.leaflet-control-attribution,
.leaflet-control-zoom {
    display: none !important;
}

.leaflet-popup-content {
    font-size: 16px !important;
    font-weight: bold;
}

.custom-icon {
    width: 30px;
    height: 30px;
}

#map {
    background-color: var(--primary-color) !important;
}


.section-inner.col-10.text-center.container-fluid {
    z-index: 0;
}

.proposition-section .container,
.team-section .container,
.form-section .container,
.mission-section .container {
    /* max-width: 61rem !important; */
}

.global-network .container {
    /* max-width: 98rem !important; */

}


p {
    letter-spacing: 0;
}

.network-banner .section-space-top {
    padding-top: 160px;
}


.section-holder-border {
    border: 0;
}

.network-banner .section-block {
    background: url(./../../images/chestertons_office_v5-1.jpg) repeat rgb(155, 24, 208) 48% 52% / cover;
    background-position: bottom center;

}

.section-block {
    position: relative;
}

/* Banner hero block — height controlled via CSS so media queries can override */
.banner-hero-block {
    height: 500px;
}

/* Video container pulled up to overlap banner */
.banner-video-container {
    margin-top: -200px;
}




.section-block:before {
    width: 100%;
    height: 100%;
    opacity: 0.6;
    background: linear-gradient(80deg, black 70%, #ffffff7d);
    display: block;
    content: "";
    position: absolute;
}


iframe {
    height: 35.1875rem;
    width: 76% !important;
}

/* Make the video banner section height adapt on small screens */
.network-banner .section-block {
    min-height: 350px;
}

.section-inner.col-10.text-center.container-fluid {
    position: relative;
    z-index: 0;
    padding-bottom: 75px;
}

.network-banner p {
    z-index: 14;
    color: #FFFFFF;
    font-size: 1.4861rem;
    line-height: 2.4rem;
    text-align: center;
    margin: auto;
    padding-bottom: 40px;
}

.network-banner p strong {
    font-weight: 700;
    padding-left: 5px;
}

/* .proposition-section .container,
.team-section .container,
.form-section .container,
.mission-section .container {
    max-width: 61rem;
}

.global-network .container {
    max-width: 98rem;
} */

.network-partner h3 {
    text-align: center;
    line-height: 2.875rem;
    font-size: 32px;
    color: var(--primary-color);
    font-weight: 600;
}

.proposition-item {
    padding: 0 10px;
}

.proposition-content {
    border: 0.0625rem solid #E3E2DF;
    background: rgb(248 250 251);
    width: 18.9375rem;
    padding: 30px 10px;
    text-align: center;
    height: 100%;
}

.proposition-item h5 {
    text-align: center;
    line-height: 1.5625rem;
    font-size: 1.1146rem;
    font-weight: bold;
    color: var(--primary-color);
}

.proposition-item p {
    color: var(--text-color);
    text-align: center;
    font-style: normal;
    font-weight: 400;
}

.global-network {
    background: var(--primary-color);
}

.global-network h4 {
    text-align: left;
    line-height: 2.375rem;
    font-size: 1.9814rem;
    color: #fff;
}

.global-network p {
    text-align: left;
    line-height: 1.5625rem;
    font-size: 1.1146rem;
    color: #fff;
}

.global-network img.network-img {
    width: 100%;
    height: 400px;
    max-width: 530px;
    object-fit: cover;
}

.network-partner .global-network li {
    text-align: left;
    color: rgb(255, 255, 255);
    line-height: 15px;
    font-size: 1.1146rem;
}

#page-block-l2gsrxhldyd {
    height: 25.375rem;
    max-width: 100%;
}

#page-block-l2gsrxhldyd .section-holder-border {
    border: 0;
}

#page-block-l2gsrxhldyd .section-block {
    background-color: rgb(163, 186, 198);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100%;
}

#page-block-l2gsrxhldyd .section-holder-overlay {
    opacity: 0.57;
    background-color: var(--primary-color);
    display: block;
}

@media (min-width: 992px) {
    .team-section .col-lg-fifth {
        flex: 0 0 20%;
        max-width: 20%;
        width: 20%;
    }
}


.benefit-content ul li {
    font-size: 20px;
    line-height: 1.3;
    color: var(--text-color);
    list-style: none;
    position: relative;
}

.benefit-content ul li:before {
    content: '';
    position: absolute;
    top: 3px;
    left: -28px;
    /* background: url(./../../../images/svgviewer-output.png); */
    background: var(--bullet-icon);
    height: 20px;
    width: 20px;
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
}

/* .benefit-content ul li img {
    width: 20px;
    margin-right: 16px;
    filter: brightness(0) saturate(100%) invert(18%) sepia(39%) saturate(3846%) hue-rotate(271deg) brightness(89%) contrast(97%);
} */

.Mission-content p {
    font-size: 1.8576rem;
    color: var(--primary-color);
    font-style: italic;
    text-align: center;
    line-height: 3rem;
}

.team-section .col-md-3 {
    width: 20%;
    padding: 0;
    margin-top: 0;
}

.team-section img.team-img {
    width: 100%;
    max-width: 300px;
    min-height: 310px;
    object-fit: cover;
}

.team-section .row.proposition-detail-ctn {
    padding: 0px 111px;
}

p.team-name {
    font-weight: 700;
    text-align: center;
    line-height: 1.5625rem;
    font-size: 1.1146rem;
    padding-top: 14px;
    color: var(--text-color);
    margin-bottom: 0;
}

p.team-position {
    text-align: center;
    line-height: 1.625rem;
    font-size: 0.9907rem;
    color: #792a8b;
    font-style: italic;
}

.form-section .section-block {
    /* background: url(./../../images/footer-iframe.jpg) repeat rgb(155, 24, 208) 48% 52% / cover; */
    background: var(--contact-form-bg) repeat rgb(155, 24, 208) 48% 52% / cover;


}

.our-mission {
    display: none;
}

footer ul.footer-links {
    margin-bottom: 16px;
}

footer .footer-address p {
    line-height: 1.5;
}

.team-members {
    text-align: center;
}

.map-section {
    padding-top: 50px;
    padding-bottom: 20px;
}

.enquiry-form-iframe {
    border-radius: 15px;
    opacity: 0.8 !important;
    height: 730px;
}

/* ============================================
   TABLET ONLY (768px – 991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {

    /* ---- 1. BANNER ---- */
    /* Height auto so content drives height on tablet */
    .banner-hero-block {
        height: auto !important;
        min-height: 350px;
    }

    /* section-space-top top padding reduced for tablet */
    .network-banner .section-space-top {
        padding-top: 180px;
    }

    /* Video pulls up less aggressively on tablet */
    .banner-video-container {
        margin-top: -120px;
    }

    /* Video iframe responsive */
    .video-wrapper iframe {
        width: 95% !important;
        aspect-ratio: 16/9;
        height: auto !important;
    }



    /* ---- 2. GLOBAL NETWORK DESCRIPTION ---- */
    .global-network-description {
        font-size: 18px;
        line-height: 1.8;
    }

    /* ---- 3. PROPOSITION CARDS (col-lg-4 → stacks on tablet) ---- */
    /* Force 3-column row on tablet since col-lg-4 only kicks in at 992px+ */
    .proposition-section .proposition-detail-ctn {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 12px;
    }

    .proposition-section .proposition-detail-ctn>.proposition-item {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 6px;
    }

    .proposition-content {
        width: 100%;
        padding: 20px 12px;
    }

    /* ---- 4. MID-BANNER 3-IMAGE STRIP ---- */
    /* Override the inline height:25.375rem with !important */
    #page-block-l2gsrxhldyd {
        height: 18rem !important;
    }

    #page-block-l2gsrxhldyd .section-block {
        height: 18rem !important;
        background-position: left center, center center, right center !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    /* ---- 5. BENEFITS SECTION ---- */
    .benefits-section.space-top {
        padding-top: 40px;
    }

    .benefits-section.space-bottom {
        padding-bottom: 40px;
    }

    .benefits-section h3 {
        font-size: 26px;
        line-height: 2.2rem;
    }

    /* Keep two columns but reduce heavy padding */
    .benefits-section .list-items>.col-md-6.d-flex.justify-content-end {
        padding-right: 10px !important;
        justify-content: flex-end;
    }

    .benefits-section .list-items>.col-md-6.d-flex.justify-content-start {
        padding-left: 10px !important;
        justify-content: flex-start;
    }

    .benefit-content ul li {
        font-size: 16px;
        line-height: 1.6;
    }

    .benefit-content ul {
        padding-left: 28px;
    }

    /* ---- 6. FORM / ENQUIRY IFRAME ---- */
    /* Widen the col-10 container on tablet */
    .form-section .section-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Override the inline height:600px and width:96% */
    .enquiry-form-iframe {
        width: 100% !important;
        border-radius: 12px;
    }

    /* ---- 7. TEAM SECTION ---- */
    .team-section .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        /* Ensures item 5 stays left aligned! */
        align-items: stretch;
    }

    .team-section .container>h3 {
        flex: 0 0 100%;
        width: 100%;
        text-align: center;
        margin-bottom: 25px;
    }

    /* Bypass default Bootstrap rows so columns flow cleanly across the DOM */
    .team-section .row {
        display: contents;
    }

    /* Set items to exactly 50% for 2-per-row alignment */
    .team-section .col-md-3 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 0 10px !important;
        margin-top: 20px !important;
        display: flex;
    }

    .team-section .team-members {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .team-section .row.proposition-detail-ctn {
        padding: 0 15px;
    }

    .team-section img.team-img {
        max-width: 100%;
        width: 100%;
    }

    /* Header & footer adjustments */
    body header .container {
        padding: 0;
    }

    body footer .container {
        padding: 0 30px;
    }

    .team-members {
        text-align: center;
    }
}

/* ============================================
   MOBILE (max-width: 767px)
   ============================================ */
@media (max-width: 767px) {
     .section-block::before {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    /* --- Banner --- */
    .banner-hero-block {
        height: auto !important;
        min-height: 200px !important;
        background-position: center center !important;
    }

    .network-banner .section-space-top {
        padding-top: 120px !important;
        padding-bottom: 20px;
    }

    .network-banner p {
        width: 100%;
        font-size: 1.15rem;
        line-height: 1.9rem;
        padding-bottom: 20px;
    }

    /* Video container: reduce negative margin on mobile */
    .banner-video-container {
        margin-top: -70px;
    }

    /* --- Video iframe --- */
    .video-wrapper iframe {
        width: 100% !important;
        aspect-ratio: 16/9;
        height: auto !important;
    }

    section.network-banner iframe {
        max-width: 100%;
    }

    /* General iframe reset (don't let the global rule squash the video) */
    iframe {
        height: auto;
        width: 100% !important;
    }

    /* --- Global network description section --- */
    .global-network-section2-bg {
        margin-top: 20px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .global-network-description {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .global-network-section2-bg h6 {
        font-size: 17px;
    }

    /* --- Map section --- */
    .map-section {
        padding-top: 30px;
        padding-bottom: 10px;
    }

    /* --- Proposition cards (3 boxes) --- */
    .proposition-section .proposition-detail-ctn {
        display: flex;
        row-gap: 15px;
        flex-wrap: wrap;
        flex-direction: column;
        align-content: center;
    }

    .proposition-section .proposition-detail-ctn>div {
        width: 100%;
        max-width: 100%;
        padding: 0 5px;
    }

    .proposition-section .proposition-detail-ctn>div .proposition-content {
        width: 100%;
    }

    .proposition-content {
        width: 100%;
        padding: 20px 15px;
    }

    /* --- Mid banner strip: stack to single image or compress height --- */
    #page-block-l2gsrxhldyd,
    #page-block-l2gsrxhldyd .section-block {
        height: 13rem;
    }

    /* Scale the 3-image background strip for mobile */

    #page-block-l2gsrxhldyd .section-block {

        background: repeat rgb(163, 186, 198) 50% 50% / cover;
        height: 25.375rem;
    }


    /* --- Benefits section --- */
    .benefit-content ul li {
        font-size: 16px;
        line-height: 1.7;
        display: flex;
        margin-bottom: 10px;
    }

    .benefit-content ul li:last-child {
        margin-bottom: 15px;
    }

    .benefits-section h3 {
        font-size: 24px;
        line-height: 2rem;
    }

    .benefits-section .list-items {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .benefits-section .list-items>div {
        width: 100% !important;
        padding: 0 !important;
        justify-content: flex-start !important;
    }

    .benefit-content ul {
        padding-left: 28px;
    }

    /* --- Team section --- */
    .team-section .col-md-3 {
        width: 50% !important;
        padding: 0 8px !important;
        margin-top: 20px !important;
    }

    .team-section .row {
        display: flex;
        flex-wrap: wrap;
    }

    .team-section img.team-img {
        width: 100%;
        max-width: 307px;
        min-height: 200px;
        object-fit: cover;
    }

    .team-section .row.proposition-detail-ctn {
        padding: 0 8px;
    }

    .team-members {
        margin-bottom: 25px;
    }

    p.team-name {
        font-size: 0.95rem;
        padding-top: 10px;
    }
    .team-section .row.proposition-detail-ctn {
        padding: 0px 13px;
    }
    .team-position-title {
        font-size: 0.85rem;
    }
    #page-block-l2gsrxhldyd,
    #page-block-l2gsrxhldyd .section-block {
        height: 130px;
        background-color: transparent !important;
    }

    /* --- Form section --- */
    .form-section .section-inner {
        width: 100% !important;
        max-width: 100%;
        /* padding: 20px 10px !important; */
    }

    .section-inner.col-10.text-center.container-fluid.section-space-top {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    .network-partner h3 {
        font-size: 24px;
        line-height: 2rem;
    }
}




/* ============================================
   SMALL MOBILE (max-width: 480px)
   ============================================ */

@media (max-width: 587px) {
    .enquiry-form-iframe {
        height: 870px !important;
    }
}

@media (max-width: 540px) {
    .enquiry-form-iframe {
        height: 1100px !important;
    }
}

@media (max-width: 480px) {
    .section-block {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    .network-banner .section-space-top {
        padding-top: 90px !important;
    }

    .network-banner p {
        font-size: 1rem;
        line-height: 1.7rem;
    }

    /* Team: single column on very small screens */
    .team-section .col-md-3 {
        width: 100% !important;
    }

    .team-section img.team-img {
        max-width: 280px;
        margin: 0 auto;
        display: block;
    }

    #page-block-l2gsrxhldyd,
    #page-block-l2gsrxhldyd .section-block {
        height: 10rem;
    }

    .benefit-content ul li {
        font-size: 14px;
    }

    .benefits-section h3,
    .network-partner h3 {
        font-size: 20px;
        line-height: 1.7rem;
    }

    .global-network-description {
        font-size: 15px !important;
    }

    .proposition-item h5 {
        font-size: 1rem;
    }
}

div#mCSB_1_container {
    width: 100% !important;
}

.map-point-section {

    max-width: 100% !important;

}

.global-network-section2-bg {
    background-color: var(--primary-color);
    margin-top: 35px;
}

.global-network-description {
    font-size: 18px;
    line-height: 1.9;
}

.global-network-section2-bg h6 {
    color: #bc8418;
    font-weight: bold;
    font-size: 21px;
    margin-bottom: 15px;
}

.video-wrapper {
    display: flex;
    justify-content: center;
}

.video-wrapper iframe {
    width: 90%;
    aspect-ratio: 16/9;
    height: auto;
}

.team-position-title {
    text-align: center;
    line-height: 1.625rem;
    font-size: 0.9907rem;
    color: var(--text-color);
}

@media only screen and (min-width: 1800px) {
    /* body .container {
        max-width: 1524px !important;
    } */

    .network-banner .section-space-top {
        padding-top: 150px;
    }
}

/* Banner section-space-top padding for 768-1000px tablet range */
@media (min-width: 769px) and (max-width: 1000px) {
    .network-banner .section-space-top {
        padding-top: 180px;
    }
}

@media (max-width: 768px) {
    .network-banner .section-space-top {
        padding-top: 130px;
    }
}

/* (header/footer/team already merged into the main tablet block above) */
 .team-members {
        text-align: center;
    }

 .team-section {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
}

@media screen and (min-width: 320px) and (max-width: 502px) {
    header {
        padding: 0 2px !important;
    }
}