/* Prevent horizontal scrollbars on mobile */
        @media (max-width: 768px) {
            html {
              height: auto;
              min-height: 100%;
              overflow-y: auto;
              -webkit-overflow-scrolling: touch;
            }

            html, body {
              overflow-x: clip;
              max-width: 100%;
            }

            body,
            body.overflow-x-hidden {
              width: 100%;
              /* Keep the root scrollable on first mobile touch, even before all content settles. */
              min-height: calc(100svh + 1px);
              overflow-y: visible;
              touch-action: pan-y;
            }

            @supports not (height: 100svh) {
              body,
              body.overflow-x-hidden {
                min-height: calc(100vh + 1px);
              }
            }

            @supports not (overflow: clip) {
              html,
              body,
              body.overflow-x-hidden {
                overflow-x: hidden;
              }
            }
            
            /* Reset AOS horizontal animations on mobile */
            [data-aos="fade-left"],
            [data-aos="fade-right"] {
              transform: none !important;
              opacity: 1 !important;
            }
            
            /* Before animation state */
            [data-aos="fade-left"]:not(.aos-animate),
            [data-aos="fade-right"]:not(.aos-animate) {
              transform: translateY(20px) !important;
              opacity: 0 !important;
            }
        }
        
        /* Additional safety for AOS animations */
        .aos-animate {
            overflow: hidden;
        }