/**
 * Emergency responsive fix for horizontal scrolling on iPhone and other mobile devices
 */

/* Global fixes */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
}

/* Container fixes */
.container,
.container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}

/* Section fixes */
section, 
.section, 
.hero, 
div[class^="col-"] {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Image fixes */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Row fixes */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

/* Special fixes for mobile */
@media (max-width: 767px) {
    [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .hero-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Fix all potential third-party elements */
    iframe, 
    embed, 
    object,
    video,
    .embed-responsive {
        max-width: 100% !important;
    }
}

/* iPhone specific fix */
@media screen and (max-width: 812px) and (orientation: landscape),
       screen and (max-width: 414px) and (orientation: portrait) {
    .container {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    body::after {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        width: 0;
        height: 100%;
    }
}