/* Mobile Layout Shifting Fix */
@media (max-width: 768px) {
    html, body {
        width: 100%;
        position: relative;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Force all containers to stay within viewport */
    .container,
    .header-container,
    .services-grid,
    .forms-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }
    
    /* Fix viewport units */
    .hero-section {
        width: 100vw;
        min-height: calc(100vh - 120px);
    }
    
    /* Prevent media elements from exceeding viewport */
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }
    
    /* Carousel adjustments for mobile */
    .portfolio-carousel-container,
    .testimonials-carousel-container {
        gap: 0.5rem;
    }
    
    .carousel-arrow {
        width: 40px !important;
        height: 40px !important;
        padding: 0.5rem !important;
    }
    
    .carousel-arrow svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .portfolio-carousel-item,
    .testimonials-carousel .testimonial-card {
        padding: 1.5rem;
    }
    
    .device-mockup {
        height: 200px;
    }
    
    /* Hero buttons stack on mobile */
    .hero-buttons {
        flex-direction: column;
    }
    
    .hero-buttons button {
        width: 100%;
    }
    
    /* Adjust star sizes for mobile */
    .stars svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    .rating svg {
        width: 28px !important;
        height: 28px !important;
    }
}