/* 
 * Scrollbar Fix
 * This file ensures there's only one main vertical scrollbar for the entire page
 */

/* Ensure only the main body has a vertical scrollbar */
html, body {
    overflow-y: auto !important; /* Allow vertical scrolling for the main page */
    max-height: none !important;
    height: auto !important;
}

/* Target specific sections that might cause extra scrollbars */
.services-grid,
.testimonials-grid,
.features-grid,
.tech-grid,
.row,
.container,
.container-fluid,
.section,
section:not(.hero) {
    overflow: visible !important; /* Prevent all scrollbars in these sections */
    max-height: none !important;
    height: auto !important;
}

/* Preserve hero section height */
.hero {
    height: calc(100vh - 50px) !important; /* Restore original height */
    overflow: hidden !important; /* Maintain overflow hidden for background effects */
    display: flex !important; /* Maintain flex layout */
    align-items: center !important; /* Keep content vertically centered */
    position: relative !important; /* Maintain positioning */
}

/* Ensure hero content is properly positioned */
.hero-content {
    position: relative !important;
    z-index: 3 !important;
}

/* Responsive hero heights */
@media (max-width: 1024px) {
    .hero {
        height: calc(100vh - 50px) !important;
    }
}

@media (max-width: 768px) {
    .hero {
        height: calc(100vh - 50px) !important;
    }
}

@media (max-width: 480px) {
    .hero {
        height: calc(100vh - 50px) !important;
    }
}

/* Fix specifically for retail development page */
.services-grid .row {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Allow horizontal scrolling in specific containers that need it, but ONLY on mobile */
@media (max-width: 480px) {
    .services-grid, 
    .testimonials-grid,
    .features-scroll,
    .tech-simple-scroll {
        overflow-x: auto !important; /* Allow horizontal scrolling */
        overflow-y: visible !important; /* Prevent vertical scrollbar */
        max-height: none !important;
        height: auto !important;
    }
}

/* Ensure scrollbars are thin and styled - ONLY on mobile */
@media (max-width: 480px) {
    /* WebKit scrollbar styles */
    .services-grid::-webkit-scrollbar,
    .testimonials-grid::-webkit-scrollbar,
    .features-scroll::-webkit-scrollbar,
    .tech-simple-scroll::-webkit-scrollbar {
        height: 6px; /* Horizontal scrollbar height */
        width: 0 !important; /* No vertical scrollbar */
    }
    
    /* Style scrollbar track */
    .services-grid::-webkit-scrollbar-track,
    .testimonials-grid::-webkit-scrollbar-track,
    .features-scroll::-webkit-scrollbar-track,
    .tech-simple-scroll::-webkit-scrollbar-track {
        background: var(--gray-200, #e5e7eb);
        border-radius: 10px;
    }
    
    /* Style scrollbar thumb */
    .services-grid::-webkit-scrollbar-thumb,
    .testimonials-grid::-webkit-scrollbar-thumb,
    .features-scroll::-webkit-scrollbar-thumb,
    .tech-simple-scroll::-webkit-scrollbar-thumb {
        background: var(--primary, #D4AF37);
        border-radius: 10px;
    }
    
    /* Firefox scrollbar styles */
    .services-grid,
    .testimonials-grid,
    .features-scroll,
    .tech-simple-scroll {
        scrollbar-width: thin;
        scrollbar-color: var(--primary, #D4AF37) var(--gray-200, #e5e7eb);
    }
}