<footer id="Resources">
    <div class="wrapper">
        <div class="blks">
            <div class="blk blk-1">
                <h5 class="common-title">
                    Get Involved
                </h5>
                <div class="social">
                    <a target="_blank" href="https://www.linkedin.com/company/khalifa-university/" class="icon-1"></a>
                    <a target="_blank" href="https://www.youtube.com/@KhalifaUniversity" class="icon-2"></a>
                    <a target="_blank" href="https://www.facebook.com/khalifauniversity/" class="icon-3"></a>
                    <a target="_blank" href="https://linktr.ee/KhalifaUni" class="icon-4"></a>
                </div>
            </div>
            <div class="blk">
                <ul>
                    <li><a target="_blank" href="https://www.ku.ac.ae/">KU Home</a></li>
                    <li><a target="_blank" href="https://www.ku.ac.ae/college-research/data-science-and-artificial-intelligence">Data Science & AI at KU</a></li>
                    <li><a target="_blank" href="https://www.ku.ac.ae/academics/undergraduate-programs/b-sc-in-robotics-artificial-intelligence">BSc in Robotics & AI</a></li>
                    <li><a target="_blank" href="https://www.ku.ac.ae/about/strategic-partnerships">Strategic Partnerships</a></li>
                </ul>
            </div>
            <div class="blk">
                <ul>
                    <li><a target="_blank" href="https://www.ku.ac.ae/media">Media & Communications</a></li>
                    <li><a target="_blank" href="https://www.ku.ac.ae/event/">Events</a></li>
                    <li><a target="_blank" href="https://www.ku.ac.ae/open-data">Open Data</a></li> 
                </ul>
            </div>
        </div>
        <p class="copyright">
            <?= date('Y'); ?> all rights reserved © Khalifa University.
        </p>
    </div>
</footer>
<script>
    $(document).ready(function () {

        var $owl = $('.owl-carousel');

        $owl.owlCarousel({
            items: 3,
            loop: true,
            nav: true,
            margin: 10,
            navText: ['', ''],
            responsive: {
                0: {items: 1},
                600: {items: 2},
                1000: {items: 3}
            }
        });


        var $carousel2 = $('.owl-carousel-2');

        $carousel2.owlCarousel({
            items: 3,
            loop: true,
            nav: true,
            margin: 10,
            autoplay: true,
            autoplayTimeout: 3000,
            autoplayHoverPause: true,
            navText: ['', ''],
            dots: true,
            responsive: {
                0: {items: 1},
                600: {items: 2},
                1000: {items: 3}
            }
        });

        // Wait until nav & dots are rendered
        setTimeout(function () {
            $carousel2.each(function () {
                var $this = $(this);
                var nav = $this.find('.owl-nav');
                var dots = $this.find('.owl-dots');

                // Only wrap if not already done
                if ($this.find('.owl-controls-wrapper').length === 0) {
                    var wrapper = $('<div class="owl-controls-wrapper"></div>');
                    wrapper.append(nav.find('.owl-prev'));
                    wrapper.append(dots);
                    wrapper.append(nav.find('.owl-next'));
                    nav.replaceWith(wrapper);
                }
            });
        }, 100); // 100ms delay is usually enough 

        equalizeOwlHeights($owl);

        // Equalize function
        function equalizeOwlHeights($carousel) {
            var maxHeight = 0;

            // Reset existing heights first
            $carousel.find('.owl-item').css('height', 'auto');

            // Find max height
            $carousel.find('.owl-item').each(function () {
                var thisHeight = $(this).outerHeight(true);
                if (thisHeight > maxHeight) {
                    maxHeight = thisHeight;
                }
            });

            // Apply max height
            $carousel.find('.owl-item').height(maxHeight);
        }

        // Equalize after init, refresh, and change
        $owl.on('initialized.owl.carousel refreshed.owl.carousel changed.owl.carousel', function (e) {
            var $this = $(this);
            setTimeout(function () {
                equalizeOwlHeights($this);
            }, 100);
        });

        // Also equalize after lazy images load
        $owl.on('loaded.owl.lazy', function (e) {
            var $this = $(this);
            setTimeout(function () {
                equalizeOwlHeights($this);
            }, 100);
        });

        $('a[href^="#"]').on('click', function (e) {
            e.preventDefault();
            var target = $($(this).attr('href'));
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top - 80 // adjust offset if header overlaps
                }, 300); // 600ms = smooth speed
            }
        });
    }
    );
</script>
</body>    
</html>