/* Fix for arrows appearing over header when scrolling on mobile */

@media (max-width: 768px) {
    /* Ensure header has higher z-index than carousel arrows but stays sticky */
    header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important; /* Higher z-index to appear above carousel arrows */
        background-color: #fff !important; /* Ensure header has background */
    }
    
    /* Set lower z-index for arrows and constrain them to the carousel section */
    .pricing-carousel {
        position: relative !important;
        z-index: 10 !important; /* Lower z-index than header */
    }
    
    .pricing-carousel-arrow {
        z-index: 20 !important; /* Higher than carousel but lower than header */
        position: absolute !important; /* Keep absolute positioning */
        top: 50% !important; /* Position vertically in the middle of the carousel */
        transform: translateY(-50%) !important;
    }
    
    /* Ensure arrows are confined to the pricing section */
    .pricing-carousel-left {
        left: 10px !important;
    }
    
    .pricing-carousel-right {
        right: 10px !important;
    }
    
    /* Add additional containment rules */
    .pricing section {
        overflow: hidden !important; /* Prevent arrows from floating outside */
        position: relative !important;
    }
    
    /* Use CSS clip-path as an additional safeguard */
    .pricing-carousel-arrow {
        clip-path: inset(0 0 0 0) !important; /* Clip to its container */
    }
}