<!-- jQuery (Required for Owl Carousel) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

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

<!-- AOS Animation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

<!-- Owl Carousel JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<!-- Fancybox -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>


<!-- fantacy box popup -->
<script>
    Fancybox.bind("[data-fancybox='gallery']", {
        Toolbar: true,
        closeButton: "top",
        animated: true,
        showClass: "fancybox-zoomIn",
        hideClass: "fancybox-fadeOut",
        Thumbs: true,
        keyboard: true,
        dragToClose: true,
        autoFocus: true,
        preload: 2,
    });
</script>

<!-- Popup Script -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const modal = document.getElementById("loadingModal");
        if (!modal) return;

        const closeBtn = modal.querySelector(".close-btn");

        modal.classList.add("active");

        function closeModal() {
            modal.classList.remove("active");
            modal.classList.add("closing");
            setTimeout(() => {
                modal.classList.remove("closing");
            }, 400);
        }

        if (closeBtn) {
            closeBtn.addEventListener("click", closeModal);
        }

        modal.addEventListener("click", function(e) {
            if (e.target === modal) closeModal();
        });
    });
</script>


<!-- wow animation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        new WOW({
            boxClass: 'wow',
            animateClass: 'animate__animated',
            offset: 200,
            mobile: true,
            live: true,
            resetAnimation: true,
            callback: function(box) {
                box.style.setProperty('animation-duration', '1.2s');
                box.style.setProperty('animation-timing-function', 'ease-out');
            }
        }).init();
    });
</script>

<!-- scrole stickey  navbar -->
<script>
    document.addEventListener("scroll", function() {
        const header = document.querySelector(".nav-area");

        if (window.scrollY > 50) {
            header.classList.add("nav-sticky");
        } else {
            header.classList.remove("nav-sticky");
        }
    });
</script>

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

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

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


<!-- preloader -->
<script>
    window.addEventListener("load", function() {
        setTimeout(() => {
            document.getElementById("fullLoader").style.display = "none";
        }, 50);
    });
</script>


<!-- event page event carousel -->
<!-- <script>
    $('.offer-carousel').owlCarousel({
        loop: true,
        margin: 30,
        nav: true,
        dots: false,
        navText: ['<i class="bi bi-chevron-left"></i>', '<i class="bi bi-chevron-right"></i>'],
        responsive: {
            0: {
                items: 1
            },
            576: {
                items: 1
            },
            768: {
                items: 2
            },
            992: {
                items: 3
            }
        }
    });
</script> -->

<!-- event video  -->
<!-- <script>
    const video = document.getElementById('clientVideo');
    const playButton = document.getElementById('playButton');

    playButton.addEventListener('click', () => {
        if (video.requestFullscreen) {
            video.requestFullscreen();
        } else if (video.webkitRequestFullscreen) {
            video.webkitRequestFullscreen();
        } else if (video.msRequestFullscreen) {
            video.msRequestFullscreen();
        }

        video.play();
        playButton.style.display = 'none';
    });
</script> -->