/* 
 * Mobile Overflow Fixes
 * This file contains fixes for horizontal scrolling issues on mobile devices
 */

/* Global fixes for horizontal overflow */
html, body {
    overflow-x: hidden !important; /* Prevent horizontal scroll - important to override any other styles */
    width: 100% !important; /* Ensure body takes exactly viewport width */
    position: relative; /* Create stacking context */
    max-width: 100vw; /* Prevent content from exceeding viewport width */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Apply box-sizing to all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Fix for container elements that might cause overflow */
.container {
    width: 100%;
    max-width: 100vw;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

/* Fix for navbar container */
.navbar-container {
    width: 100%;
    max-width: 100vw;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

/* Fix for dropdown menus that might extend beyond viewport */
.dropdown-menu {
    max-width: 90vw;
    width: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* Fix for floating action buttons */
.floating-actions {
    right: 10px; /* Reduce right distance on mobile */
    z-index: 999;
}

/* Fix for animations that might cause overflow */
.fade-in, 
.fade-in-delay-1, 
.fade-in-delay-2, 
.fade-in-delay-3,
.slide-in-left,
.slide-in-right {
    max-width: 100%;
    overflow: hidden;
}

/* Fix for transform animations that might cause overflow */
@media (max-width: 768px) {
    /* Limit transform effects that could cause overflow */
    .service-card:hover,
    .industry-card:hover,
    .feature-card:hover,
    .value-card:hover,
    .wwd-card:hover,
    .case-study-card:hover,
    .testimonial-card:hover,
    .process-step:hover .process-content,
    .about-feature-item:hover,
    .tech-simple-item:hover,
    .client-logo:hover,
    .company-card-modern:hover {
        transform: translateY(-2px); /* Reduce transform amount */
    }
    
    /* Fix for horizontal scrolling sections */
    .services-grid,
    .testimonials-grid,
    .tech-simple-scroll {
        width: 100%;
        max-width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        box-sizing: border-box;
        overflow-y: visible !important; /* Prevent vertical scrollbar */
    }
}

/* Fix for mobile menu */
@media (max-width: 991px) {
    .navbar-collapse {
        width: 80%; /* Reduce width to prevent overflow */
        max-width: 200px;
    }
}

/* Fix for grid layouts that might cause overflow */
@media (max-width: 480px) {
    .companies-grid-modern,
    .services-grid,
    .industries-simple-grid,
    .features-grid,
    .values-grid,
    .what-we-do-grid,
    .wwd-innovative-grid,
    .clients-logos,
    .case-studies-grid,
    .testimonials-grid,
    .process-timeline,
    .tech-categories,
    .tech-items,
    .about-features,
    .mission-vision-container {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }
    
    /* Fix for any elements with absolute positioning */
    .hero-background,
    .hero-carousel,
    .hero-slide,
    .hero-background-overlay {
        width: 100%;
        max-width: 100vw;
        left: 0;
        right: 0;
    }
    
    /* Fix for footer columns */
    .footer-main {
        width: 100%;
        max-width: 100%;
    }
}

/* Fix for specific elements with potential overflow issues */
.features-scroll-track,
.tech-scroll-track {
    width: max-content;
    max-width: none; /* Allow horizontal scrolling within container */
}

.features-scroll-wrapper,
.tech-simple-scroll-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

/* Fix for scroll buttons that might cause overflow */
.scroll-btn {
    z-index: 10;
}

/* Fix for hero content to ensure it stays within viewport */
.hero-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Ensure images don't cause overflow */
img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* Fix for unwanted vertical scrollbars */
.services-grid, 
.testimonials-grid,
.features-scroll,
.tech-simple-scroll,
.row {
    overflow-y: visible !important; /* Prevent vertical scrollbar */
}

/* Additional fixes for specific elements */
.company-logo-modern img,
.client-logo img,
.testimonial-author img,
.case-study-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Fix for any transforms that might cause overflow */
[class*="hover"] {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}

/* Fix for any potential issues with position: fixed elements */
.navbar, 
.floating-actions,
.scroll-to-top {
    transform: translateZ(0);
}