<!-- Spinner Start -->
<div id="spinner"
    class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
    <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"></div>
</div>
<!-- Spinner End -->

<!-- Topbar End -->

<!-- Navbar Start -->
<div class="container-fluid py-2 sticky-top h_nav">
    <div class="container">
        <nav class="navbar navbar-expand-lg  navbar-light p-lg-0">
            <a href="<?= LINK; ?>" class="navbar-brand">
                <img src="images/logo.png" alt="">
            </a>
            <button type="button" class="navbar-toggler me-0" data-bs-toggle="collapse"
                data-bs-target="#navbarCollapse">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end " id="navbarCollapse">
                <!-- <div class="d-none d-lg-block">
                     <img src="images/logo.png" alt="">
                 </div> -->
                <div class="navbar-nav">
                    <!-- <a href="<?= LINK; ?>" class="nav-item nav-link"><i class="fas fa-home fs-5 me-1"></i></a> -->
                    <a href="#" target="" class="nav-item nav-link">Home</a>
                    <a href="#About" class="nav-item nav-link">About Us</a>
                    <a href="#Packages" class="nav-item nav-link">Packages</a>
                    <a href="#Solutions" class="nav-item nav-link ">Solutions </a>
                    <a href="#Blogs" class="nav-item nav-link">Blogs </a>
                    <a href="#Contact" class="nav-item nav-link">Contact </a>



                </div>
            </div>
            <div class="ms-auto d-none d-lg-block">
                <button type="submit" data-bs-toggle="modal" data-bs-target="#contactModal" target="_blank"
                    class="btn register-now text-white py-2 px-3">REGISTER NOW</button>
            </div>
        </nav>
    </div>
</div>
<!-- Navbar End -->

<script>
    // Close the navbar when a menu item is clicked
    document.querySelectorAll('.nav-item.nav-link').forEach(item => {
        item.addEventListener('click', function () {
            const navbarCollapse = document.getElementById('navbarCollapse');
            if (navbarCollapse.classList.contains('show')) {
                // Collapse the navbar
                new bootstrap.Collapse(navbarCollapse).toggle();
            }
        });
    });

    // Close the navbar when clicking outside
    document.addEventListener('click', function (e) {
        const navbarCollapse = document.getElementById('navbarCollapse');
        const navbarToggler = document.querySelector('.navbar-toggler');

        // Check if the click is outside the navbar and not on the toggler
        if (!navbarCollapse.contains(e.target) && !navbarToggler.contains(e.target)) {
            if (navbarCollapse.classList.contains('show')) {
                // Collapse the navbar
                new bootstrap.Collapse(navbarCollapse).toggle();
            }
        }
    });
</script>