/* =====================================================================
   ARCHEAN — ABOUT US: responsive + layout refinements
   ---------------------------------------------------------------------
   Standalone override file (loaded AFTER common.css + about.css) so it
   never conflicts with the shared about.css / common.css that a teammate
   may be editing. Everything here is additive and scoped to the About
   page sections. Safe to delete this one file to fully revert.

   Breakpoints follow the theme's existing scale: 1199 / 991 / 767 / 575 / 480.
   ===================================================================== */

/* =====================================================================
   1. VISION / MISSION  — add a clear gap between the two cards
   (cards were touching: gutter measured 0px)
   ===================================================================== */
.aboutPageSec_1 .mvBox {
    height: 100%;
}

@media (min-width: 992px) {
    .aboutPageSec_1 .row>[class*="col-"]:first-child {
        padding-right: 16px;
    }

    .aboutPageSec_1 .row>[class*="col-"]:last-child {
        padding-left: 16px;
        /* => 32px gap between the cards */
    }
}

@media (max-width: 991px) {

    /* stacked: vertical gap between Vision and Mission */
    .aboutPageSec_1 .row>[class*="col-"]:first-child {
        margin-bottom: 24px;
    }
}

/* =====================================================================
   2. HISTORY  — keep left (heading/graphic) + right (timeline) side by
   side on desktop & tablet; stack only on phones. Constrain the
   decorative graphic so it can't overflow horizontally.
   ===================================================================== */
.historySec .histWrap {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 40px;
}

.historySec .histLeft {
    width: 45%;
}

.historySec .histRight {
    width: 55%;
    padding-left: 0;
    /* gap handles the spacing now */
}

.historySec .histLeft .graphicImg {
    left: 0;
    width: 100%;
    /* was left:-120px; width:110% -> overflow */
}

@media (max-width: 991px) {

    /* stay side by side on tablets, just tighten the gap/padding */
    .historySec .histWrap {
        flex-direction: row;
        gap: 24px;
    }

    .historySec .histLeft {
        padding: 50px 0;
        min-height: 0;
    }

    .historySec .histRight {
        padding: 40px 0;
    }

    .historySec .histSliderWindow {
        height: 420px;
    }
}

@media (max-width: 767px) {

    /* phones: stack cleanly */
    .historySec .histWrap {
        flex-direction: column;
        gap: 0;
    }

    .historySec .histLeft,
    .historySec .histRight {
        width: 100%;
    }

    .historySec .histLeft {
        padding: 45px 20px;
    }

    .historySec .histRight {
        padding: 0 20px 45px;
    }

    .historySec .histSliderWindow {
        height: 380px;
    }
}

/* =====================================================================
   3. LEADERSHIP TEAM  — carousel arrows centred.
   The theme's <=1199 rule targets .teamPrev2/.teamNext2, but the About
   markup uses .teamPrev/.teamNext, so the arrows never got positioned
   (they overlapped). Centre them at the bottom of the slider instead.
   ===================================================================== */
@media (max-width: 1199px) {
    .leadershipSec .teamSliderWrap {
        position: relative;
        padding: 0 0 80px;
        /* room for the centred arrows */
    }

    .leadershipSec .teamNav {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        display: flex;
        justify-content: center;
        /* group both arrows in the centre */
        gap: 16px;
    }

    .leadershipSec .teamNav button {
        position: static;
        /* cancel the absolute teamPrev2/Next2 rule */
    }
}


@media (max-width: 1199px) {
    .valuesSec .valuesRow {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991px) {
    .valuesSec .valuesRow {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 22px;
    }
}

@media (max-width: 480px) {
    .valuesSec .valuesRow {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   5. COUNTERS  — 4 across -> 2 -> 1 (was fixed calc(100%/4), no stacking)
   ===================================================================== */
@media (max-width: 991px) {

    .aboutSec {
        .headingWrap {
            text-align: center;
        }

        .aboutTextWrap {
            text-align: center;

            .btnWrap {
                justify-content: center;
            }
        }
    }

    .aboutSec .countWrap {
        margin-top: 35px;
    }


    .aboutSec .countWrap .countItem {
        width: 50%;
        padding: 0 20px;
        margin-bottom: 28px;
    }

    .aboutSec .countWrap .countItem:nth-child(2n+1) {
        padding-left: 0;
    }

    .aboutSec .countWrap .countItem:nth-child(2n) {
        padding-right: 0;
    }

    .aboutSec .countWrap .countItem:nth-child(2n)::after {
        display: none;
    }

    .aboutSec .countWrap .countItem h3 {
        font-size: 38px;
    }
}

@media (max-width: 575px) {
    .aboutSec .countWrap .countItem {
        padding: 0 12px;
        margin-bottom: 24px;
    }

    .aboutSec .countWrap .countItem h3 {
        font-size: 30px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .aboutSec .countWrap .countItem h3 .countText {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .aboutSec .countWrap .countItem {
        width: 100%;
        padding: 0;
        text-align: center;
    }

    .aboutSec .countWrap .countItem h3 {
        justify-content: center;
    }

    .aboutSec .countWrap .countItem::after {
        display: none;
    }
}

/* =====================================================================
   6. CERTIFICATES  — 5 across -> 3 -> 2 -> 1 (was fixed calc(20%))
   ===================================================================== */
@media (max-width: 1199px) {
    .certificateSec .CertiWrap .echCertiWrap {
        width: 50%;
        margin-bottom: 24px;

        .certiCard {
            min-height: 180px;
        }
    }
}

@media (max-width: 767px) {
    .certificateSec .CertiWrap .echCertiWrap {
        width: 50%;
    }

    .certificateSec .CertiWrap .echCertiWrap .certiCard .certiTxt .certiTle {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .certificateSec .CertiWrap .echCertiWrap {
        width: 100%;
        .certiCard{
            min-height: auto;
        }
    }
}

/* =====================================================================
   7. MISC small-screen type tidy
   ===================================================================== */
@media (max-width: 991px) {
    .aboutSec .aboutImg {
        width: 400px;
        height: auto;
        margin: 15px auto;
    }
}

@media (max-width: 575px) {
    .aboutPageSec_1 .mvBox .mvTitle {
        font-size: 26px;
    }

    .aboutPageSec_1 .mvBox .mvHeading .mvIcon {
        width: 44px;
        height: 44px;
    }

    .aboutSec .aboutImg {
        width: 100%;
    }
}