/* Styles for horizontal scrollable gallery on mobile */
@media (max-width: 767px) {
    .elementor-widget-image-gallery.mobile-scroll-gallery .gallery {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
        scroll-snap-type: x mandatory !important;
        gap: 10px !important; /* Space between images */
        padding-bottom: 10px !important; /* Prevent scrollbar clipping */
    }

    /* Target the gallery items directly */
    .elementor-widget-image-gallery.mobile-scroll-gallery .gallery-item {
        flex: 0 0 85% !important; /* Show 85% of one image, hinting at the next */
        max-width: 85% !important;
        scroll-snap-align: center !important;
        margin: 0 !important; /* Remove Elementor default margins */
        clear: none !important;
    }

    /* Hide the Elementor carousels that we tried to use before */
    .elementor-widget-image-carousel.mobile-scroll-gallery {
        display: none !important;
    }
    
    /* Ensure image fits container */
    .elementor-widget-image-gallery.mobile-scroll-gallery .gallery-item img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 8px !important; /* Optional: adds nice rounded corners */
    }
    
    /* Hide scrollbar for a cleaner look (optional) */
    .elementor-widget-image-gallery.mobile-scroll-gallery .gallery::-webkit-scrollbar {
        height: 6px;
    }
    .elementor-widget-image-gallery.mobile-scroll-gallery .gallery::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    .elementor-widget-image-gallery.mobile-scroll-gallery .gallery::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }
}