/* Global mobile overflow fix */
@media (max-width: 768px) {
    /* Prevent horizontal scroll on mobile */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }
    
    /* Fix all absolutely positioned sections */
    section[class*="__"],
    div[class*="__"],
    .hero, .stats, .gallery, .pricing, .topic, .recent, .contact-info, .footer {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Fix elements with fixed 1440px width */
    [style*="width: 1440px"],
    [style*="width:1440px"] {
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* Fix absolutely positioned elements */
    *[style*="position: absolute"] {
        max-width: 100vw !important;
    }
    
    /* Header specific fix */
    .header {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
    
    .header__container {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Fix any element that might cause overflow */
    * {
        max-width: 100vw !important;
    }
    
    /* Specific fixes for components causing issues */
    .hero__bg,
    .stats__bg,
    .gallery__bg,
    .pricing__bg,
    .topic__bg,
    .recent__bg,
    .contact-info__bg,
    .footer__container {
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* Additional safety for smaller screens */
@media (max-width: 480px) {
    /* Even stricter rules for very small screens */
    body {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    .main {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}