/* ===========================================
   INDEX PAGE – MEDIUM RESPONSIVE (601px–640px)
   =========================================== */

@media screen and (min-width: 601px) and (max-width: 640px) {

    /* ============================================
       ISSUE 1: Hide Snap-Slide Paragraphs
       ============================================ */

    .snap-slide-caption .slide-description {
        display: none !important;
    }

    /* ============================================
       SNAP SLIDE: Reposition Title and Read More Button
       Title: 20px above thumbnail, centered
       Button: 20px below thumbnail, centered
       ============================================ */

    /* Make snap-slider-captions cover full viewport for positioning */
    .snap-slider-captions {
        z-index: 10 !important;
        pointer-events: none !important;
    }

    /* Make the captions wrapper fill the viewport */
    .snap-slider-captions-wrapper {
        height: 100vh !important;
        height: 100dvh !important;
        width: 100% !important;
        position: relative !important;
        overflow: visible !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

    /* Hide all captions by default */
    .snap-slide-caption {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: none !important; /* Override GSAP translateY animation */
    }

    /* Show only the caption that is in view */
    .snap-slide-caption.in-view {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Position title 20px above thumbnail center 
       Thumbnail is 40vw x 40vw on screens ≤767px, centered at 50% */
    .snap-slider-captions .slide-title {
        position: absolute !important;
        top: calc(50% - 20vw - 50px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        max-width: 90% !important;
        text-align: center !important;
        margin: 0 !important;
        height: auto !important;
        line-height: 1.3 !important;
        z-index: 10 !important;
    }

    /* Position button 20px below thumbnail center */
    .snap-slide-caption .button-wrap {
        position: absolute !important;
        top: calc(50% + 20vw + 0px) !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin-left: 25px !important; /* Shift 25px to the right */
        width: auto !important;
        padding: 0 !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }

    /* Ensure button is visible when caption is in view */
    .snap-slide-caption.in-view .button-wrap {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Override specific #slide-2-button positioning from style.css */
    #slide-2-button {
        position: absolute !important;
        top: calc(50% + 20vw + 0px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 25px !important; /* Shift 25px to the right */
    }

    /* ============================================
       ISSUE 2: Push "Brands That Trust" Section Down
       Push down by 60px without changing distance between elements
       The parent <p> has inline margin-top: -60px, override it
       ============================================ */

    /* Target the parent p element that contains .brands-that-trust */
    .pinned-lists-wrapper > p:has(.brands-that-trust) {
        margin-top: 30px !important; /* Override inline -60px, push down 30px more */
    }

    /* Fallback for browsers without :has() support - target by structure */
    .pinned-lists-wrapper .pinned-lists + p {
        margin-top: 30px !important;
    }

    /* ============================================
       ISSUE 3: Align "Explore" and "Solutions" with "more"
       Stack the words vertically and center-align
       ============================================ */

    #page-nav.compact-page-nav .next-hero-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        position: relative !important;
    }

    #page-nav.compact-page-nav .next-hero-title::before {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin-bottom: 5px !important;
        font-size: 16px !important;
        opacity: 0.6 !important;
    }

    #page-nav.compact-page-nav .next-hero-title::after {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        margin-top: 5px !important;
        font-size: 16px !important;
        opacity: 0.6 !important;
    }

    #page-nav.compact-page-nav .next-hero-title span {
        order: 0 !important;
    }

    /* ============================================
       ISSUE 4: Stack Addresses Vertically
       Order: Bahrain, Pakistan, Saudi Arabia
       ============================================ */

    /* Reduce gap between partners slider and addresses */
    .content-row.row_padding_top.light-section[style*="margin-top: 440px"] {
        margin-top: 240px !important;
    }

    .address-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
    }

    /* Hide the separators on medium */
    .address-row .address-separator {
        display: none !important;
    }

    /* Make each address full width */
    .address-row .one_third {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Center address content */
    .address-row .box-icon-wrapper {
        align-items: center !important;
    }

    .address-row .box-icon-content {
        text-align: center !important;
    }

    /* Reorder addresses: Bahrain (2nd) = order 1, Pakistan (3rd) = order 2, Saudi Arabia (1st) = order 3 */
    .address-row .one_third:nth-child(1) {
        order: 3 !important; /* Saudi Arabia - last */
    }

    .address-row .one_third:nth-child(3) {
        order: 1 !important; /* Bahrain - first */
    }

    .address-row .one_third:nth-child(5) {
        order: 2 !important; /* Pakistan - second */
    }

    /* Keep separators in their relative positions but hidden */
    .address-row .address-separator:nth-child(2) {
        order: 10 !important;
    }

    .address-row .address-separator:nth-child(4) {
        order: 11 !important;
    }

    /* ============================================
       FOOTER MOBILE LAYOUT
       Back to Top Arrow + Social Icons in Same Row
       ============================================ */

    /* Footer container: flex-wrap to create rows */
    .clapat-footer.compact-footer {
        height: auto !important;
        min-height: 130px !important;
        overflow: visible !important; /* Fix: prevent clipping of footer-middle content */
    }

    .clapat-footer.compact-footer #footer-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 15px 20px !important;
        height: auto !important;
        min-height: 130px !important;
        position: relative !important;
        gap: 0 !important;
        margin-top: -20px !important;
    }

    /* ----- ROW 1: Footer Navigation (Full Width) ----- */
    .clapat-footer.compact-footer #footer-container .footer-middle {
        flex: 1 1 100% !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3px !important;
        position: relative !important;
        height: auto !important;
        width: 100% !important;
        pointer-events: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    .clapat-footer.compact-footer .footer-middle .footer-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3px !important;
    }

    /* Ensure all nav links are visible */
    .clapat-footer.compact-footer .footer-middle .footer-nav a {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 16px !important;
        color: #02042a !important;
    }

    /* Copyright notice - show below Let's Talk */
    .clapat-footer.compact-footer .footer-middle .footer-copyright {
        display: block !important;
        font-size: 16px !important;
        text-align: center !important;
        margin-top: 5px !important;
        width: 100% !important;
        color: #02042a !important;
    }

    /* Hide Terms of Use | Privacy Policy */
    .clapat-footer.compact-footer .footer-middle .footer-copyright .footer-legal-links {
        display: none !important;
    }

    /* ----- ROW 2: Back to Top Arrow + Social Icons ----- */

    /* Back to Top Button: LEFT side of row 2 */
    .clapat-footer.compact-footer #footer-container #backtotop.button-wrap.left {
        flex: 0 0 auto !important;
        order: 2 !important;
        position: relative !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
        margin-top: -8px !important;
        margin-right: auto !important;
        padding: 0 0 0 -50px !important;
        margin-left: -10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Hide "Back to Top" text completely */
    .clapat-footer.compact-footer #footer-container #backtotop.button-wrap.left .button-text {
        display: none !important;
    }

    /* Arrow icon wrapper */
    .clapat-footer.compact-footer #footer-container #backtotop.button-wrap.left .icon-wrap {
        float: none !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
        opacity: 1 !important;
        width: 36px !important;
        height: 36px !important;
    }

    .clapat-footer.compact-footer #footer-container #backtotop.button-wrap.left .button-icon {
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
    }

    /* Blue arrow - visible */
    .clapat-footer.compact-footer #footer-container #backtotop.button-wrap.left .button-icon i {
        color: #601fe0 !important;
        font-size: 16px !important;
        line-height: 36px !important;
    }

    /* Social Icons: Centered in row 2, shifted left */
    .clapat-footer.compact-footer #footer-container .socials-wrap {
        flex: 0 0 auto !important;
        order: 3 !important;
        position: relative !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        transform: translateX(-45px) !important;
    }

    /* Hide "Follow Us" text and share icon */
    .clapat-footer.compact-footer #footer-container .socials-wrap .socials-text,
    .clapat-footer.compact-footer #footer-container .socials-wrap .socials-icon {
        display: none !important;
    }

    /* Social icons: horizontal row */
    .clapat-footer.compact-footer #footer-container .socials-wrap .socials {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        transform: none !important;
        text-align: center !important;
        width: auto !important;
        height: auto !important;
        line-height: normal !important;
    }

    /* Each social icon: always visible */
    .clapat-footer.compact-footer #footer-container .socials-wrap .socials li {
        float: none !important;
        opacity: 1 !important;
        transform: none !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
    }

    .clapat-footer.compact-footer #footer-container .socials-wrap .socials li a {
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        font-size: 16px !important;
    }

}