/* =====================================================
   Section 2 — "We Build / Innovate" Slider
   Image ↔ Content spacing fix  (fully responsive)

   Layout explanation:
   - .scroll-img is position:absolute on the left (the big illustration)
   - .head contains two children:
       #imageContainerX.images-box  ← empty spacer, reserves left column
       .content-box                 ← actual text, sits in right column
   - Fix: make .head flex-row, give .images-box a fixed width so
     .content-box is pushed clear of the image.
   ===================================================== */

/* ── Desktop: flex row, images-box = left spacer ── */
.common-home-sect2 .carousel-item .head {
    display:        flex !important;
    flex-direction: row !important;
    align-items:    center !important;
    width:          100%;
    /* let content breathe — no fixed viewport height */
    min-height:     calc(100vh - 83px);
    position:       relative;
    gap:            0;
}

/* Left spacer — smaller to reduce image footprint */
.common-home-sect2 .carousel-item .images-box {
    flex:       0 0 42%;
    width:      42%;
    min-height: 1px;          /* keep it from collapsing */
    align-self: stretch;
}

/* Right column — all the text lives here, more space now */
.common-home-sect2 .content-box {
    flex:         1 1 auto !important;
    min-width:    0 !important;          /* allow shrink */
    padding-left: 80px !important;       /* gap between spacer and text */
    display:      flex;
    align-items:  center;
}

.common-home-sect2 .content-box .common-sect-para {
    display:         block !important;
    justify-content: unset !important;
    align-items:     unset !important;
    min-height:      unset !important;
    margin-top:      0 !important;
    width:           100%;
}

/* Text alignment — left-align so it doesn't collide with the image */
.common-home-sect2 .heading {
    max-width:  560px;
    text-align: left !important;
    padding-top: 0 !important;
}
.common-home-sect2 .heading h2,
.common-home-sect2 .heading .text-gradient1,
.common-home-sect2 .heading .para {
    text-align: left !important;
}

/* ── Scale down the actual image size ── */
.common-home-sect2 .scroll-img {
    max-width: 42vw !important;  /* reduced from implicit 50%+ */
    left: -120px !important;     /* pull it in a bit from the extreme left */
}

.common-home-sect2 .scroll-img .scroll-img-w {
    max-width: 680px !important; /* cap the absolute max width */
    width: 100%;
    height: auto;
}

/* ── 1400px + (large desktops) ── */
@media (min-width: 1400px) {
    .common-home-sect2 .carousel-item .images-box {
        flex: 0 0 44%;
        width: 44%;
    }
    .common-home-sect2 .content-box {
        padding-left: 100px !important;
    }
    .common-home-sect2 .heading { max-width: 600px; }
    .common-home-sect2 .scroll-img {
        max-width: 44vw !important;
        left: -140px !important;
    }
    .common-home-sect2 .scroll-img .scroll-img-w {
        max-width: 720px !important;
    }
}

/* ── 1200–1399 (medium desktops) ── */
@media (min-width: 1200px) and (max-width: 1399px) {
    .common-home-sect2 .carousel-item .images-box {
        flex: 0 0 42%;
        width: 42%;
    }
    .common-home-sect2 .content-box {
        padding-left: 80px !important;
    }
    .common-home-sect2 .scroll-img {
        max-width: 42vw !important;
        left: -120px !important;
    }
    .common-home-sect2 .scroll-img .scroll-img-w {
        max-width: 680px !important;
    }
}

/* ── 992–1199 (small desktops / landscape tablets) ── */
@media (min-width: 992px) and (max-width: 1199px) {
    .common-home-sect2 .carousel-item .images-box {
        flex: 0 0 40%;
        width: 40%;
    }
    .common-home-sect2 .content-box {
        padding-left: 64px !important;
    }
    .common-home-sect2 .heading { max-width: 480px; }
    .common-home-sect2 .scroll-img {
        max-width: 40vw !important;
        left: -100px !important;
    }
    .common-home-sect2 .scroll-img .scroll-img-w {
        max-width: 580px !important;
    }
}

/* ── 768–991 (tablet portrait) ── */
@media (min-width: 768px) and (max-width: 991px) {
    .common-home-sect2 .carousel-item .head {
        min-height: unset !important;
    }
    .common-home-sect2 .carousel-item .images-box {
        flex: 0 0 38%;
        width: 38%;
    }
    .common-home-sect2 .content-box {
        padding-left: 48px !important;
    }
    .common-home-sect2 .heading { max-width: 420px; }
    .common-home-sect2 .scroll-img {
        max-width: 38vw !important;
        left: -80px !important;
    }
    .common-home-sect2 .scroll-img .scroll-img-w {
        max-width: 500px !important;
    }
}

/* ── Mobile ≤ 767px ── */
@media (max-width: 767px) {
    /* Make the section a flex column so we can reorder image/content */
    .common-home-sect2 {
        display:        flex !important;
        flex-direction: column !important;
    }

    /* Box animations stay out of flow — no order needed */
    .common-home-sect2 .box-ani-outer {
        order: 0;
    }

    /* Container (holds text) — comes FIRST */
    .common-home-sect2 .container {
        order: 1;
    }

    /* Mobile image — comes SECOND (below text) */
    .common-home-sect2 .scroll-img.show-mobile {
        order:           2;
        position:        relative !important;
        left:            0 !important;
        top:             0 !important;
        transform:       none !important;
        width:           100% !important;
        max-width:       100% !important;
        display:         flex !important;
        justify-content: center !important;
        align-items:     center !important;
        margin-top:      16px;
        margin-bottom:   0;
        min-height:      200px;
    }

    /* Override style.css rule that hides img inside .hide-desktop.show-mobile */
    .common-home-sect2 .scroll-img.hide-desktop.show-mobile img.scroll-img-w,
    .common-home-sect2 .scroll-img.show-mobile img.scroll-img-w {
        display:   block !important;
        width:     100% !important;
        max-width: 320px !important;
        height:    auto !important;
        margin:    0 auto;
    }

    /* Keep the desktop absolute image truly hidden */
    .common-home-sect2 .scroll-img.hide-mobile {
        display: none !important;
    }

    /* Stack vertically inside each carousel slide */
    .common-home-sect2 .carousel-item .head {
        flex-direction: column !important;
        align-items:    flex-start !important;
        min-height:     unset !important;
        padding:        24px 16px 8px;
        gap:            0;
    }
    .common-home-sect2 .carousel-item .images-box {
        flex:    0 0 auto !important;
        width:   0 !important;
        display: none !important;
    }
    .common-home-sect2 .content-box {
        flex:          1 1 auto !important;
        width:         100% !important;
        min-width:     0 !important;
        padding-left:  0 !important;
        padding-right: 0 !important;
        align-items:   flex-start !important;
    }
    .common-home-sect2 .content-box .common-sect-para {
        padding:         0 !important;
        justify-content: flex-start !important;
        width:           100% !important;
    }
    .common-home-sect2 .heading {
        max-width:  100%;
        text-align: left !important;
        padding:    0 !important;
        width:      100% !important;
    }
    .common-home-sect2 .heading h2,
    .common-home-sect2 .heading .text-gradient1,
    .common-home-sect2 .heading .para {
        text-align: left !important;
    }
}

/* ── Very small ≤ 480px ── */
@media (max-width: 480px) {
    .common-home-sect2 .carousel-item .head {
        gap: 0;
        padding: 16px 16px 8px;
    }
    .common-home-sect2 .scroll-img.show-mobile img.scroll-img-w {
        max-width: 280px !important;
    }
}