/* =============================================================
   Mobile / tablet refinements for the long-form company pages
   built from .about-section-two.style-two / .about-section-five
   (about.php, vision-mission.php, …).

   Loads after mobile-common.css, which carries the shared
   header / footer / page-title / CTA / counter fixes.
   ============================================================= */

@media only screen and (max-width: 991px) {

    .about-section-two.style-two .wrapper-box,
    .about-section-five .title-box {
        max-width: 100%;
    }
}

@media only screen and (max-width: 767px) {

    /* ---------- Intro: copy + "Our Progress" ---------- */
    .about-section-two.style-two .sec-title h2 {
        font-size: 22px;
        line-height: 1.35;
    }

    .about-section-two.style-two .sec-title .text {
        font-size: 14.5px;
        line-height: 1.75;
        /* Justified text on a ~340px column opens rivers of white
           space between words. */
        text-align: left;
    }

    .about-section-two.style-two .col-lg-6 + .col-lg-6 {
        margin-top: 34px;
    }

    /* Buttons were rendering as two cramped boxes with the label
       wrapping inside them. */
    .about-section-two.style-two .link-btn {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .about-section-two.style-two .link-btn a.theme-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .about-section-two.style-two .content-right .sec-title h3 {
        font-size: 22px;
        margin-bottom: 18px;
    }

    /* The turnover list sits in a plain .col-8 — a Bootstrap class
       with no breakpoint, so it stays at 66.67% right down to
       320px and leaves a third of the screen empty. */
    .about-section-two.style-two .content-right .col-8 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .about-section-two.style-two .content-right .icon-box {
        padding-left: 0;
        margin-bottom: 20px;
    }

    .about-section-two.style-two .content-right .icon-box h4 {
        font-size: 15px;
        line-height: 1.35;
        margin-bottom: 8px;
    }

    /* .skill-percentage hangs at right:-100px from the end of the
       bar. On desktop the empty .col-4 beside the .col-8 absorbs
       it; now that the track is full width, the gutter has to be
       reserved here or the value labels fall off screen. */
    .about-section-two.style-two .content-right .skills {
        padding-right: 104px;
    }

    /* data-width on the last two bars is 113 and 108, so without a
       cap the fill — and the label pinned to its end — run past
       the track. */
    .about-section-two.style-two .skills .bar.progress-line {
        max-width: 100%;
    }

    .about-section-two.style-two .skills .skill-item .skill-percentage {
        font-size: 13.5px;
        top: -7px;
    }

    .about-section-two.style-two .skills .skill-percentage .count-box {
        font-size: 13.5px;
        white-space: nowrap;
    }

    /* ---------- Section rhythm ---------- */
    /* Desktop leaves ~120px of air under the sub-header banner. */
    .about-section-two.style-two {
        padding-top: 34px;
    }

    /* ---------- Company overview blocks ---------- */
    .about-section-five .sec-title h3 {
        font-size: 21px;
        line-height: 1.35;
    }

    .about-section-five .sec-title .text,
    .about-section-five .title-box p,
    .about-section-five .title-box li {
        font-size: 14.5px;
        line-height: 1.75;
        text-align: left;
    }

    .about-section-five .title-box ul {
        padding-left: 18px;
        margin-bottom: 0;
    }

    .about-section-five .title-box li {
        margin-bottom: 12px;
    }

    /* The markup puts <br> between these blocks; responsive.css
       hides every <br> under 767px, so the blocks need their own
       separation — but only enough to read as separate blocks. */
    .about-section-five .image-column {
        margin-bottom: 22px;
    }

    .about-section-five .image-column:last-child {
        margin-bottom: 0;
    }

    .about-section-five .title-box,
    .about-section-five .sec-title {
        margin-bottom: 0;
    }

    .about-section-five .sec-title h3 {
        margin-bottom: 10px;
    }

    .about-section-five .title-box p:last-child,
    .about-section-five .title-box ul:last-child {
        margin-bottom: 0;
    }

    /* ---------- Intro block spacing ---------- */
    .about-section-two.style-two .sec-title.mb-30 {
        margin-bottom: 18px;
    }

    .about-section-two.style-two .content-right {
        padding-top: 0;
    }

    /* ---------- Why choose us ---------- */
    .whychoose-us-section .sec-title h3 {
        font-size: 24px;
        line-height: 1.35;
    }
}

@media only screen and (max-width: 575px) {

    .about-section-two.style-two .sec-title h2 {
        font-size: 20px;
    }

    .about-section-five .sec-title h3 {
        font-size: 19px;
    }

    .about-section-two.style-two .content-right .icon-box h4 {
        font-size: 14px;
    }
}