/* =============================================================
   Homepage-only mobile / tablet refinements.
   Shared header / footer / page-title / CTA / counter / export
   fixes live in mobile-common.css, which loads before this.
   ============================================================= */

/* ---------- Tablet and below ---------- */
@media only screen and (max-width: 991px) {

    .main-slider img,
    .about-section-two .image img,
    .blog-grid .blog-box .post-image img,
    .single-client-logo img {
        max-width: 100%;
    }
}

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

    /* =========================================================
       HERO SLIDER
       Desktop shows 5 vertical panels that expand on :hover.
       Touch devices have no hover, so the headline (incl. the
       page H1) never became visible and every panel was a
       ~70px sliver. On mobile it becomes a swipeable,
       snap-scrolling carousel with the caption always shown.
       ========================================================= */
    /* .header-lower is position:fixed below 767px (76px tall), so the
       hero starts underneath it. On the old 100vh hero that barely
       mattered; against a 219px photo it hid the top third. */
    .main-slider {
        position: relative;
        padding-top: 76px;
        background: var(--blue, #1a1d7a);
    }

    .main-slider .innercontainer {
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0;
        padding: 0;
    }

    .main-slider .innercontainer::-webkit-scrollbar {
        display: none;
    }

    /* Full-bleed slides. All slides stretch to the tallest so the
       snap-scroller doesn't jump height between slides. */
    .main-slider .slider-img,
    .main-slider .slider-img.active,
    .main-slider .active {
        flex: 0 0 100%;
        width: 100%;
        height: auto;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        border: 0;
        border-radius: 0;
        overflow: hidden;
        transition: none;
    }

    /* A tap fires mouseover on touch browsers — don't let that
       grey out the rest of the carousel. */
    .main-slider .innercontainer:has(.slider-img.active) .slider-img:not(.active) {
        filter: none;
    }

    /* Photo on top, caption in its own bar underneath. Overlaying
       the caption on a 1920x900 machine photo squeezed into a
       phone-width box buried the machine and collided with the
       dots; this keeps the whole photo visible and the text
       readable. .slider-txt precedes <img> in the markup, hence
       the explicit order. */
    .main-slider .slider-img a {
        display: flex;
        flex-direction: column;
        position: relative;
        height: 100%;
    }

    /* The slider art is 1080x1920 PORTRAIT (not the 1920x900 the
       markup used to claim): a faded rope backdrop fills the top
       ~55% and the machine sits in the bottom ~45%. Centring the
       crop lands on the empty backdrop, so anchor it to the
       bottom to frame the machine. */
    .main-slider .slider-img img {
        order: 1;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        min-height: 0;
        max-height: none;
        object-fit: cover;
        object-position: center bottom;
        display: block;
    }

    .main-slider .slider-txt,
    .main-slider .active .slider-txt {
        order: 2;
        position: static;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
        background: var(--blue, #1a1d7a);
        padding: 15px 16px 34px;
        animation: none;
    }

    /* responsive.css hides every <br> below 767px — the hero
       captions need theirs back to keep the two-line rhythm. */
    .main-slider .slider-txt br {
        display: inline;
    }

    .main-slider .slider-txt h1,
    .main-slider .slider-txt h3 {
        font-size: 18px;
        line-height: 1.3;
        padding-left: 0;
        margin: 8px 0 0;
        color: #fff;
        letter-spacing: .2px;
    }

    .main-slider .slider-txt h1 span,
    .main-slider .slider-txt h3 span {
        display: inline-block;
        align-self: flex-start;
        font-size: 10.5px;
        line-height: 1.4;
        letter-spacing: .6px;
        padding: 4px 11px;
    }

    /* Dots built by the inline script in index.php */
    .ak-hero-dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px;
        display: flex;
        justify-content: center;
        gap: 7px;
        z-index: 3;
        pointer-events: none;
    }

    .ak-hero-dots span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .45);
        transition: background .25s, width .25s;
    }

    .ak-hero-dots span.is-on {
        width: 20px;
        border-radius: 4px;
        background: var(--orange, #f58634);
    }

    /* ---------- Trust strip ---------- */
    .trust-strip-section {
        padding: 14px 0;
    }

    /* ---------- Web stories row ---------- */
    .story-slider-container .story-container {
        margin: 14px 0;
    }

    .story-slider-container .person-story {
        width: 84px;
        height: 115px;
        margin: 6px;
        border-width: 2px;
    }

    .story-slider-container .person-story:hover {
        transform: none;
    }

    /* ---------- About ---------- */
    .about-section-two .image img {
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

    .about-section-two .col-lg-5 {
        margin-bottom: 22px;
    }

    .about-section-two .sec-title h3 {
        font-size: 22px;
        line-height: 1.35;
    }

    .about-section-two .sec-title .text {
        font-size: 14.5px;
        line-height: 1.75;
    }

    .about-section-two .link-btn {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

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

    /* ---------- Products carousel ---------- */
    .services-section-two .sec-title h2 {
        font-size: 26px;
        line-height: 1.3;
    }

    .services-section-two .sec-title .text {
        font-size: 14.5px;
    }

    /* ---------- Facts counters ---------- */
    /* Base rule pins the section to height:325px, which four
       stacked full-width blocks overflow. The bottom padding also
       has to absorb the CTA card that sits on top of this band
       (see .cta-section top:-70px below). */
    .facts-section-two {
        height: auto;
        padding: 26px 0 30px;
        position: relative;
    }

    /* White counters over a busy rope photo need a scrim to stay
       readable at phone size. */
    .facts-section-two::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(10, 18, 42, .55);
        pointer-events: none;
    }

    .facts-section-two .auto-container {
        position: relative;
        z-index: 1;
    }

    .facts-section-two .column {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .facts-block-two .inner {
        height: 100%;
    }

    /* Fixed min-height keeps the four numbers on a shared baseline
       even though "Years Experience in Industry" wraps to two
       lines while "Man Power" is one. */
    .facts-block-two .content {
        padding: 44px 12px 16px;
        min-height: 130px;
    }

    .facts-block-two .icon {
        top: 10px;
        right: 10px;
        font-size: 23px;
    }

    .facts-block-two .content:before {
        top: 16px;
        left: 12px;
        width: 32px;
        height: 3px;
    }

    .facts-block-two .count-outer {
        font-size: 27px;
        line-height: 30px;
        left: 0;
    }

    .facts-block-two .text {
        font-size: 12.5px;
        line-height: 1.4;
        margin-bottom: 0;
    }

    /* .content:after is the column divider. In a 2-up grid the one
       on the right-hand column dangles off the edge, and the two
       rows need a rule between them instead. */
    .facts-section-two .column:nth-child(even) .content:after {
        display: none;
    }

    .facts-section-two .column:nth-child(-n+2) .content {
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        padding-bottom: 18px;
        margin-bottom: 16px;
    }

    /* (.cta-section top:-70px is zeroed in mobile-common.css — it
       was swallowing the second row of counters here.) */

    /* ---------- Working process ---------- */
    .working-process-section.style-two .sec-title h3 {
        font-size: 24px;
    }

    .working-process-section.style-two .process-block {
        margin-bottom: 18px;
    }

    /* ---------- Quote form ---------- */
    .contact-form-section.style-two .sec-title h3 {
        font-size: 24px;
    }

    .contact-form-section.style-two .wrapper-box {
        padding: 22px 16px !important;
    }

    /* 16px keeps iOS Safari from zooming in on focus */
    .contact-form-section .contact-form input,
    .contact-form-section .contact-form select,
    .contact-form-section .contact-form textarea {
        font-size: 16px;
        width: 100%;
        max-width: 100%;
    }

    .contact-form-section .contact-form textarea {
        min-height: 110px;
    }

    .contact-form-section .contact-form .form-group {
        margin-bottom: 16px;
    }

    .contact-form-section .contact-form .form-btn .theme-btn {
        width: 100%;
        justify-content: center;
    }

    .contact-form-section .feature-block-two.style-two {
        margin-top: 24px;
        gap: 16px;
    }

    .contact-form-section .feature-block-two .inner-box h4 {
        font-size: 17px;
        line-height: 1.4;
    }

    /* ---------- Testimonials ---------- */
    .ak-testimonial-section {
        padding: 50px 0 35px;
    }

    .ak-tcard {
        padding: 26px 20px 22px;
    }

    /* ---------- Blog grid ---------- */
    /* col-md-3 goes full-width below 768px — 8 stacked cards is
       an endless scroll, so use two per row instead. */
    .blog-grid .grid-item {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 12px;
    }

    .blog-grid .blog-box .post-image img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .blog-grid .blog-box .post-name {
        padding: 12px 8px;
    }

    .blog-grid .blog-box .post-name h4 {
        font-size: 13px;
        line-height: 1.4;
    }

}

/* ---------- Small phones ---------- */
@media only screen and (max-width: 575px) {

    /* responsive.css hides the "We Deliver Quality" CTA outright
       below 575px, which drops the two main conversion buttons on
       exactly the devices most visitors use. Show it stacked. */
    .cta-section.cta-section-index.style-two {
        display: block;
    }

    .cta-section-index .wrapper-box {
        padding: 26px 18px;
        text-align: center;
    }

    .cta-section-index h3 {
        font-size: 20px;
        line-height: 1.35;
        margin-bottom: 18px;
        text-align: center;
    }

    .cta-section-index .link-btn {
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .cta-section-index .link-btn .theme-btn {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center;
        margin: 0;
    }

    .main-slider .slider-txt h1,
    .main-slider .slider-txt h3 {
        font-size: 16.5px;
    }

    .facts-block-two .content {
        padding: 52px 10px 8px;
    }

    .facts-block-two .count-outer {
        font-size: 26px;
        line-height: 28px;
    }

    .facts-block-two .text {
        font-size: 12.5px;
    }

    .blog-grid .blog-box .post-name h4 {
        font-size: 12px;
    }

    .story-slider-container .person-story {
        width: 74px;
        height: 100px;
    }
}

/* ---------- Very small phones ---------- */
@media only screen and (max-width: 350px) {

    .cta-section.cta-section-index.style-two {
        display: block;
    }

    /* Keep the 2-up counter grid even on 320px screens — one
       column per row made the band scroll for ages. */
    .facts-block-two .content {
        padding: 40px 9px 14px;
        min-height: 138px;
    }

    .facts-block-two .count-outer {
        font-size: 24px;
        line-height: 26px;
    }

    .facts-block-two .text {
        font-size: 11.5px;
    }

    .facts-block-two .icon {
        font-size: 20px;
        top: 9px;
        right: 7px;
    }

    .facts-block-two .content:before {
        left: 9px;
        width: 26px;
    }
}