 <style>
   .nav-link.active {
     color: var(--secondary-color) !important;

   }
 </style>
 <header class="bg-white">
   <div class="b-container">
     <!-- Navbar -->
     <nav class="navbar navbar-expand-lg navbar-light" aria-label="Offcanvas navbar large">
       <div class="container-fluid">
         <div class="logo-box">
           <a href="index" class="navbar-brand">
             <img src="assets/img/logo1.png" alt="Main Logo"></a>
         </div>
         <button class="navbar-toggler bg-primary-color border-0" type="button" data-bs-toggle="offcanvas"
           data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
           <span class="bi bi-list text-white fs-2"></span>
         </button>
         <div class="offcanvas offcanvas-start bg-light" tabindex="-1" id="offcanvasNavbar"
           aria-labelledby="offcanvasNavbarLabel" role="dialog" aria-modal="true">
           <div class="offcanvas-header" id="offcanvasNavbarLabel">
             <div class="logo-drawer">
               <a href="index" class="navbar-brand"><img src="assets/img/logo1.png" alt="Drawer Logo"
                   class="img-fluid"></a>
             </div>
             <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
           </div>
           <div class="offcanvas-body">
             <ul class="navbar-nav mx-auto mb-2 mb-xl-0 gap-xl-4 justify-content-center flex-grow-1 pe-3">
               <li class="nav-item">
                 <a class="nav-link  active" aria-current="page" href="index">Home</a>
               </li>
               <li class="nav-item">
                 <a class="nav-link " href="index#about">About Us</a>
               </li>

               <li class="nav-item">
                 <a class="nav-link " href="contact">Contact
                   Us</a>
               </li>
               <li class="nav-item">
                 <a class="nav-link " href="terms-and-conditions">Terms and Conditions</a>
               </li>
               <li class="nav-item dropdown">
                 <a class="nav-link" href="privacy-policy">
                   Privacy Policy
                 </a>

               </li>



             </ul>
             <div class="mt-lg-3">
              <button type="button" class="btn btn-primary-solid" data-bs-toggle="modal" data-bs-target="#enquiryModal">
    Book Now
  </button>
             </div>
           </div>
         </div>
       </div>
     </nav>
     <!-- #navbar end -->
   </div>
 </header>


 <script>
   const links = document.querySelectorAll(".nav-link");
   const currentPath = window.location.pathname;
   const currentHash = window.location.hash;

   links.forEach(link => {
     const href = link.getAttribute("href");

     // remove all active first
     link.classList.remove("active");

     // ✅ Home (/ or /index)
     if (
       (href === "index" && (currentPath.endsWith("/") || currentPath.endsWith("/index"))) &&
       currentHash === ""
     ) {
       link.classList.add("active");
     }

     // ✅ About section (index#about)
     if (href === "index#about" && currentHash === "#about") {
       link.classList.add("active");
     }

     // ✅ Other pages (contact, terms, privacy)
     if (currentPath.includes(href) && !href.includes("#")) {
       link.classList.add("active");
     }
   });
 </script>