/* 
 * Scroll Fix CSS
 * Fixes scrolling issues where elements get stuck or left behind
 */

/* Ensure proper stacking context for all positioned elements */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}

/* CRITICAL: Fix footer positioning to prevent overlap */
.footer-area {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    clear: both !important;
    width: 100% !important;
    transform: none !important;
    will-change: auto !important;
}

/* Ensure sections don't overlap with footer */
section {
    position: relative !important;
    z-index: auto !important;
    margin-bottom: 0 !important;
}

/* Ensure proper flow */
.cta-area {
    position: relative !important;
    z-index: auto !important;
    margin-bottom: 0 !important;
}

/* Fix for elements that might stick during scrolling */
.hero-area {
    position: relative !important;
    transform: none !important;
    will-change: auto !important;
}

/* Ensure feature boxes don't interfere with scrolling */
.feature-boxes-area {
    position: relative !important;
    z-index: 1 !important;
    transform: none !important;
    will-change: auto !important;
}

.feature-box-ultra-white {
    position: relative !important;
    transform: none !important;
    will-change: transform !important;
}

.feature-box-ultra-white:hover {
    will-change: transform !important;
}

/* Fix any elements with problematic positioning */
section {
    position: relative !important;
    transform: none !important;
    will-change: auto !important;
}

/* Ensure proper layering */
.header-area {
    z-index: 1000 !important;
    position: fixed !important;
    will-change: transform !important;
}

/* Fix back-to-top button */
.back-to-top {
    z-index: 999 !important;
    position: fixed !important;
    will-change: transform, opacity !important;
}

/* Fix any modal overlays */
[id$="Modal"] {
    z-index: 1050 !important;
    position: fixed !important;
    will-change: auto !important;
}

/* Prevent transform issues on scroll */
* {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* Fix any elements with overflow hidden that might cause issues */
.about-image-modern,
.service-item,
.team-member,
.testimonial-item {
    overflow: visible !important;
}

/* Ensure smooth scrolling performance */
*, *::before, *::after {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Fix any sticky elements */
[style*="position: sticky"] {
    position: relative !important;
}

/* Prevent elements from staying fixed during scroll */
[style*="position: fixed"]:not(.header-area):not(.back-to-top):not([id$="Modal"]) {
    position: relative !important;
}

/* Ensure proper z-index hierarchy */
.hero-area { z-index: 1; }
.feature-boxes-area { z-index: 2; }
.about-area { z-index: 3; }
.service-area { z-index: 4; }
.team-area { z-index: 5; }
.testimonial-area { z-index: 6; }
.cta-area { z-index: 7; }
.footer-area { z-index: 8; }
.header-area { z-index: 1000; }
.back-to-top { z-index: 999; }
[id$="Modal"] { z-index: 1050; }

/* Performance optimizations for scrolling */
.hero-area,
.feature-boxes-area,
section {
    will-change: auto;
    contain: layout;
}

/* Fix any elements that might cause reflow during scroll */
img {
    will-change: auto;
}

/* Smooth scroll behavior */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Fix for any elements with transform that might stick */
.feature-box-ultra-white,
.service-item,
.team-member {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Ensure hover effects don't interfere with scrolling */
.feature-box-ultra-white:hover,
.service-item:hover,
.team-member:hover {
    transform: translateY(-10px) !important;
    will-change: transform !important;
}

/* Reset any problematic animations during scroll */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Fix for elements that might have perspective issues */
.container,
.container-fluid {
    transform: none !important;
    perspective: none !important;
}

/* Ensure proper rendering during scroll */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Fix any absolute positioned elements that might cause issues */
[style*="position: absolute"] {
    will-change: auto !important;
}

/* Additional fixes for common scroll issues */
.hero-content,
.feature-box,
.about-content,
.service-content {
    transform: none !important;
    will-change: auto !important;
}
