/* ========================================
   Mobile Responsive Fix - Professional Solution
   ======================================== */

/* Prevent horizontal scroll on all devices */
html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* Prevent hero section and video elements from causing overflow */
.hero-video-section,
.video-container,
.video-container-modern {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.video-overlay,
.hero-video,
video {
    max-width: 100% !important;
    width: 100% !important;
}

/* Fix Bootstrap row negative margins on mobile */
@media (max-width: 767px) {

    html,
    body {
        overflow-x: hidden !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Ensure containers don't overflow */
    .container,
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Fix columns */
    .col,
    [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Prevent sections from overflowing */
    section {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }

    /* Fix images and media */
    img,
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }

    /* Force navbar to full width */
    .navbar,
    .navbar-modern {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/*
 Fix hero section z-index layering */
.hero-video-section {
    position: relative;
}

.hero-video-section .video-container-modern,
.hero-video-section .hero-video,
.hero-video-section video {
    z-index: 1;
}

.hero-video-section .video-overlay {
    z-index: 2;
}

.hero-video-section .video-content,
.hero-video-section .video-text-wrapper,
.hero-video-section .video-cta,
.hero-video-section .btn-video-primary,
.hero-video-section .btn-video-secondary {
    position: relative;
    z-index: 3;
}

.hero-video-section .scroll-indicator-video {
    z-index: 3;
}


/* Fix hero buttons width on mobile */
@media (max-width: 767px) {
    .hero-video-section .video-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        width: 100%;
        padding: 0 20px;
    }

    .hero-video-section .btn-video-primary,
    .hero-video-section .btn-video-secondary {
        width: 100%;
        max-width: 320px;
        padding: 14px 24px;
        font-size: 16px;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {

    .hero-video-section .btn-video-primary,
    .hero-video-section .btn-video-secondary {
        max-width: 280px;
        padding: 12px 20px;
        font-size: 15px;
    }
}