/* Enhanced sticky header styles for mobile */

@media (max-width: 768px) {
    /* Make header sticky */
    header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        width: 100% !important;
        background-color: #fff !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; /* Add subtle shadow */
    }
    
    /* Navbar container */
    .navbar {
        padding: 10px 0 !important;
    }
    
    /* Ensure proper spacing after sticky header */
    .page-header {
        margin-top: 10px !important;
    }
    
    /* Ensure the pricing carousel is not obscured by the header */
    .pricing-carousel {
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Position arrows correctly with respect to the sticky header */
    .pricing-carousel-arrow {
        /* This makes the arrows position themselves relative to the viewport */
        position: fixed !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 900 !important; /* Below header but above content */
    }
    
    /* Make sure arrows don't show when the carousel is scrolled under header */
    .pricing-carousel-left {
        left: 10px !important;
    }
    
    .pricing-carousel-right {
        right: 10px !important;
    }
}