<!-- Footer Start -->
<footer class="main-footer">
    <div class="container">


        <div class="row">
            <div class="col-md-12">
                <!-- Mega Footer Start -->
                <div class="mega-footer">
                    <div class="row justify-content-center text-center">
                        <div class="col-lg-12 col-12">
                            <!-- Footer About Start -->
                            <div class="footer-about">
                                <!-- Footer Logo Start -->
                                <div class="footer-logo">
                                    <img src="images/logo-1.png" alt="">
                                </div>
                                <!-- Footer Logo End -->

                                <div class="footer-menu">
                                    <ul class="d-md-flex quick-links  justify-content-center">
                                        <li><a href="#">Home</a></li>
                                        <li><a href="#">About Us</a></li>
                                        <li><a href="#">Services</a></li>
                                        <li><a href="#">Portfolio</a></li>
                                        <li><a href="#">Contact Us</a></li>
                                    </ul>
                                </div>

                                <!-- Footer Social Links Start -->
                                <div class="footer-social-links pt-3">
                                    <ul class="justify-content-center">
                                        <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
                                        <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
                                        <li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
                                    </ul>
                                </div>
                                <!-- Footer Social Links End -->
                            </div>
                            <!-- Footer About End -->
                        </div>


                    </div>
                </div>
                <!-- Mega Footer End -->
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <!-- Copyright Footer Start -->
                <div class="footer-copyrights">
                    <div class="row align-items-center justify-content-center">
                        <div class="col-md-12">
                            <!-- Copyright Content Start -->
                            <div class="footer-copyright text-center">
                                <p>Copyright &copy; 2025 Sukirana Events. All Rights Reserved.</p>
                            </div>
                            <!-- Copyright Content End -->
                        </div>


                    </div>
                </div>
                <!-- Copyright Footer End -->
            </div>
        </div>
    </div>
</footer>
<!-- Footer End -->

<!-- Jquery Library File -->
<script src="js/jquery-3.7.1.min.js"></script>
<!-- Bootstrap js file -->
<script src="js/bootstrap.min.js"></script>
<!-- Validator js file -->
<script src="js/validator.min.js"></script>
<!-- SlickNav js file -->
<script src="js/jquery.slicknav.js"></script>
<!-- Swiper js file -->
<script src="js/swiper-bundle.min.js"></script>
<!-- Counter js file -->
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<!-- Magnific js file -->
<script src="js/jquery.magnific-popup.min.js"></script>
<!-- SmoothScroll -->
<script src="js/SmoothScroll.js"></script>
<!-- Parallax js -->
<script src="js/parallaxie.js"></script>
<!-- MagicCursor js file -->
<script src="js/gsap.min.js"></script>
<script src="js/magiccursor.js"></script>
<!-- Text Effect js file -->
<script src="js/splitType.js"></script>
<script src="js/ScrollTrigger.min.js"></script>
<!-- YTPlayer js file -->
<script src="js/jquery.mb.YTPlayer.min.js"></script>
<!-- Wow js file -->
<script src="js/wow.js"></script>
<!-- Main Custom js file -->
<script src="js/function.js"></script>

<script>
    const words = ["Crafting ", "Unforgettable ", "UniExperiences,"];
    let index = 0;
    const span = document.getElementById("changing-word");

    setInterval(() => {
        span.classList.add("fade-out");
        setTimeout(() => {
            index = (index + 1) % words.length;
            span.textContent = words[index];
            span.classList.remove("fade-out");
        }, 500);
    }, 2500); // Change every 2.5 seconds
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const target = document.querySelector(".scroll-img");

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    target.classList.add("animate__animated", "animate__swing");
                } else {
                    target.classList.remove("animate__swing");
                }
            });
        }, {
            threshold: 0.5
        });

        observer.observe(document.getElementById("animeImage"));
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const counters = document.querySelectorAll('.counter-number');
        const duration = 3000; // total animation duration in ms
        let startTimestamp = null;
        let counted = false;

        function step(timestamp) {
            if (!startTimestamp) startTimestamp = timestamp;
            const progress = timestamp - startTimestamp;
            const progressRatio = Math.min(progress / duration, 1);

            counters.forEach(counter => {
                const target = +counter.getAttribute('data-target');
                counter.innerText = Math.floor(progressRatio * target);
            });

            if (progress < duration) {
                window.requestAnimationFrame(step);
            } else {
                // Ensure final numbers are exact
                counters.forEach(counter => {
                    counter.innerText = counter.getAttribute('data-target');
                });
            }
        }

        function isInViewport(element) {
            const rect = element.getBoundingClientRect();
            return (
                rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
                rect.bottom >= 0
            );
        }

        function runCounter() {
            if (!counted && isInViewport(counters[0])) {
                counted = true;
                window.requestAnimationFrame(step);
                window.removeEventListener('scroll', runCounter);
            }
        }

        window.addEventListener('scroll', runCounter);
        runCounter(); // initial check
    });
</script>


<script>
    const video = document.querySelector('.banner-video');
    const iconWrapper = document.getElementById('audioToggleIcon');
    const audioIcon = document.getElementById('audioIcon');
    const iconSize = 48; // must match CSS size

    video.addEventListener('mousemove', (e) => {
        iconWrapper.style.display = 'flex';
        iconWrapper.style.left = (e.clientX - iconSize / 2) + 'px';
        iconWrapper.style.top = (e.clientY - iconSize / 2) + 'px';
    });

    video.addEventListener('mouseleave', () => {
        iconWrapper.style.display = 'none';
    });

    function toggleAudio() {
        video.muted = !video.muted;
        updateIcon();
    }

    function updateIcon() {
        audioIcon.className = '';
        if (video.muted) {
            audioIcon.classList.add('icon-play');
        } else {
            audioIcon.classList.add('icon-x');
        }
    }

    video.addEventListener('click', toggleAudio);
    updateIcon();
</script>

<script>
    document.querySelectorAll('.featured-e-card').forEach(card => {
  const plusIcon = card.querySelector('.plus-icon');
  const img = card.querySelector('img');

  card.addEventListener('mousemove', (e) => {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left - plusIcon.offsetWidth / 2;
    const y = e.clientY - rect.top - plusIcon.offsetHeight / 2;

    plusIcon.style.left = x + 'px';
    plusIcon.style.top = y + 'px';
    plusIcon.style.opacity = 1;
  });

  card.addEventListener('mouseleave', () => {
    plusIcon.style.opacity = 0;
  });
});

</script>




</body>

</html>