<!-- Bootstrap JS Bundle (with Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- swiper carousle -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<!-- Fancybox JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/4.0.47/fancybox.umd.js"></script>

<!-- jQuery (Owl Carousel dependency) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Owl Carousel JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<!-- wow animation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.js"></script>

<!-- fancybox -->
<script>
    Fancybox.bind("[data-fancybox='gallery']", {
        Thumbs: {
            autoStart: true
        },
        Slideshow: {
            autoStart: true,
            timeout: 3000
        },
        Toolbar: {
            display: [
                "zoom",
                "slideShow",
                "thumbs",
                "close"
            ]
        }
    });
</script>

<!-- wow animation -->
<script>
    document.addEventListener("DOMContentLoaded", function() {

        const wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animate__animated',
            offset: 80,
            mobile: true,
            live: true,
            scrollContainer: null,
            resetAnimation: true,
            callback: function(box) {
                console.log("Animating:", box.tagName);
            }
        });

        wow.init();

        /* ---------- Smooth Scroll ---------- */

        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();

                const target = document.querySelector(this.getAttribute('href'));

                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

    });
</script>

<!-- testimonial carousel -->
<script>
    $(document).ready(function() {

        $('.testimonial-slider').owlCarousel({

            loop: true,
            margin: 30,
            nav: true,
            dots: true,

            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,

            smartSpeed: 800,
            slideTransition: 'ease',

            navText: [
                "<span class='owl-prev-icon'>‹</span>",
                "<span class='owl-next-icon'>›</span>"
            ],

            responsive: {
                0: {
                    items: 1,
                    margin: 20
                },
                768: {
                    items: 1,
                    margin: 25
                },
                992: {
                    items: 2,
                    margin: 30
                }
            }

        });

    });
</script>

<!-- before and after -->
<script>
    document.querySelectorAll(".before-after-wrapper").forEach(wrapper => {

        const range = wrapper.querySelector(".slider-range");
        const afterWrapper = wrapper.querySelector(".after-wrapper");
        const slider = wrapper.querySelector(".slider");

        range.addEventListener("input", function() {

            let value = this.value;

            afterWrapper.style.width = value + "%";
            slider.style.left = value + "%";

        });

    });
</script>


<!-- click to top btn -->
<script>
    const scrollBtn = document.getElementById("scrollTopBtn");

    window.addEventListener("scroll", function() {

        if (window.scrollY > 300) {
            scrollBtn.classList.add("show");
        } else {
            scrollBtn.classList.remove("show");
        }

    });

    scrollBtn.addEventListener("click", function() {
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    });
</script>


<!-- header dropdown -->
<!-- <script>

document.querySelectorAll('.dropdown-submenu > a').forEach(function(element) {

    element.addEventListener("click", function (e) {

        let nextMenu = this.nextElementSibling;

        if(nextMenu && nextMenu.classList.contains('dropdown-menu')){
            e.preventDefault();

            if(nextMenu.style.display === "block"){
                nextMenu.style.display = "none";
            } else {
                nextMenu.style.display = "block";
            }
        }

        e.stopPropagation();

    });

});

</script> -->