/* Mobile-specific fixes for horizontal overflow */
/* This is a safer alternative to overflow-x: hidden */

/* Target only mobile devices */
@media screen and (max-width: 767px) {
    /* Fix for body overflow */
    body {
        position: relative;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Fix for container padding */
    .container, .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Fix for rows that might cause overflow */
    .row {
        margin-left: -15px;
        margin-right: -15px;
    }
    
    /* Ensure all content stays within viewport */
    img, video, iframe, object, embed {
        max-width: 100%;
        height: auto;
    }
    
    /* Fix for fixed/absolute positioned elements */
    .position-fixed, .fixed-top, .fixed-bottom {
        left: 0;
        right: 0;
        width: 100%;
    }
}