body .mxd-page-content,
body .mxd-footer,
body #hero-master-section {

    width: 100%;
}

.mxd-marquee-correction {
    margin: 0 -1rem !important;
    width: auto !important
}

@media (min-width:768px) {
    .mxd-marquee-correction {
        margin: 0 -5rem !important
    }
}

@media (min-width:1200px) {
    .mxd-marquee-correction {
        margin: 0 -18rem !important
    }
}

.container-fluid,
.row {
    overflow-x: clip
}

@media (max-width:480px) {
    h1 {
        font-size: clamp(2.5rem, 12vw, 4rem) !important
    }
}

@media (max-width:768px) {
    #hero-scroll-engine {
        height: 250vh !important
    }

    #mouse-light-effect {
        width: 250px !important;
        height: 250px !important;
        opacity: 0.08 !important
    }

    .content-section {
        padding: 60px 15px !important;
        min-height: auto !important
    }

    .hero-fixed-visuals canvas {
        width: 100% !important;
        height: 100vh !important;
        max-width: 100%
    }

    #hero-master-section {
        overflow-x: clip;
        width: 100%;
        display: none !important
    }

    .hero-content-overlay {
        padding: 0 15px
    }

}

/* Hero Section Base Spacing (Desktop/Tablet) */
.mxd-hero-00__wrap {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.mxd-hero-00__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.mxd-hero-00__marquee {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
}

.mxd-hero-00__bottom {
    margin-top: 5rem;
}

@media (max-width: 768px) {
    .mxd-hero-00__wrap {
        gap: 2rem;
    }

    .mxd-hero-00__bottom {
        margin-top: 3rem;
    }
}

.mxd-stats-cards__image img {
    max-width: 100%;
    height: auto;
}

/* --- FIX: SERVICES SECTION SCROLL LAG (MOBILE) --- */
@media (max-width: 768px) {
    /* .btn-mobile-icon {
        margin-right: 8.5rem;
    } Removed because it causes the icon to overlap the logo by pushing it too far */

    .stack-item,
    .mxd-services-stack__inner {
        will-change: transform;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        /* Disable CSS transitions here as they fight with GSAP's frame-by-frame updates */
        transition: none !important;
    }

    .mxd-services-stack__inner {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    }

    /* --- FIX: HIDE MENU PROMO VIDEO ON MOBILE --- */
    .menu-promo__video,
    .mxd-menu__right {
        display: none !important;
    }
}

/* --- FIX: RESPONSIVE HEADER & NAVBAR DIRECTION (NO FLIP) --- */
[dir="rtl"] .mxd-header,
[dir="rtl"] .mxd-header__logo,
[dir="rtl"] .mxd-header__controls,
[dir="rtl"] .mxd-nav__wrap,
[dir="rtl"] .mxd-nav__contain {
    direction: ltr !important;
}

/* Ensure the logo stays on the left and hamburger on the right in RTL */
[dir="rtl"] .mxd-header__logo {
    margin-right: auto !important;
    margin-left: 0 !important;
}


/* --- FIX: MOBILE TYPOGRAPHY & UX --- */
@media (max-width: 768px) {


    h2,
    .mxd-section-title__title h2 {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
        line-height: 1.3 !important;
    }

    h3,
    .mxd-services-stack__title h3 {
        font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
        line-height: 1.3 !important;
    }

    /* --- FIX: FOOTER TEXT & SPACING --- */
    .footer-blocks__title-m,
    .footer-blocks__title-l,
    .footer-nav__link .btn-caption {
        font-size: clamp(2rem, 6vw, 3rem) !important;
    }

    .footer-socials__link,
    .mxd-point-subtitle a,
    .mxd-point-subtitle p,
    .footer-blocks__links p {
        font-size: clamp(1rem, 4vw, 1.4rem) !important;
        word-break: break-word !important;
    }

    .footer-blocks__card {
        padding: 2.5rem !important;
        gap: 2rem !important;
    }

    /* Keep subscribe input button responsive */
    .notify-form input[type="email"] {
        width: 100% !important;
        font-size: 1.2rem !important;
    }
}