<?php
/**
 * Elementor template part: Home section
 * Auto-generated from index.php to preserve exact markup.
 */
?>
    <section class="mt-6">
        <div id="imageSlider" class="relative overflow-hidden rounded-2xl">
            <!-- slider track -->
            <div id="imageSliderTrack" class="flex transition-transform duration-700 ease-in-out">
                
                <img src="<?php echo get_template_directory_uri() ?>/src/img/DESKTOPSLIDE-2.jpg"
                    alt="slide 1"
                    class="min-w-full h-[180px] sm:h-[260px] md:h-[340px] lg:h-[420px] object-cover">
                  
                <img src="<?php echo THEME_DIR; ?>/src/img/DESKTOPSLIDE-3.webp"
                    alt="slide 2"
                    class="min-w-full h-[180px] sm:h-[260px] md:h-[340px] lg:h-[420px] object-cover">
        
                <img src="<?php echo THEME_DIR; ?>/src/img/DESKTOPSLIDE-4.webp"
                    alt="slide 3"
                    class="min-w-full h-[180px] sm:h-[260px] md:h-[340px] lg:h-[420px] object-cover">

                <img src="<?php echo THEME_DIR; ?>/src/img/banner_SlideBanner_Z9fi1m_58b66e43-3eb0-4662-9a86-e56fc0472e2d.png"
                    alt="slide 4"
                    class="min-w-full h-[180px] sm:h-[260px] md:h-[340px] lg:h-[420px] object-cover">
        
            </div>
            
            <!-- prev -->
            <button id="sliderPrev"
                class="absolute hidden mdp:flex top-1/2 -translate-y-1/2 right-3 bg-white/80 hover:bg-white p-2 rounded-xl transition">
                <i class="ri-arrow-right-s-line text-xl"></i>
            </button>
        
            <!-- next -->
            <button id="sliderNext"
                class="absolute hidden mdp:flex top-1/2 -translate-y-1/2 left-3 bg-white/80 hover:bg-white p-2 rounded-xl transition">
                <i class="ri-arrow-left-s-line text-xl"></i>
            </button>
        
            <!-- dots -->
            <div id="sliderDots"
                class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-2">
            </div>
    
        </div>
    </section>
