{{-- <!-- nav -->
 <nav class="bg-[#F8F8F8]">
     <section
         class="container mx-auto flex items-center justify-between px-2 py-3 md:px-[20px] lg:px-[100px] xl:px-[169px]">
         <!-- Logo -->
         <section>
             <a href="/">
                 <img src="{{ asset('images/' . $general->image) }}" alt="logo"
                     class="w-[139px] md:min-w-[120px] md:max-w-[160px]" />
             </a>
         </section>
         <!-- Nav section -->
         <section class="ml-auto flex items-center gap-4">
             <!-- Nav ul -->
             <div
                 class="nav-overlay fixed left-0 top-0 z-40 h-fit w-fit bg-black bg-opacity-20 md:static md:bg-transparent">
                 <ul
                     class="nav-ul fixed -left-full top-0 z-50 h-full w-[75%] items-center gap-6 space-y-4 bg-[#ffffff] px-4 py-4 text-[15px] text-[#424242] shadow-md transition-[left] duration-500 sm:w-[50%] md:static md:flex md:h-auto md:w-auto md:space-y-0 md:bg-transparent md:px-0 md:py-0 md:text-[12px] md:shadow-none lg:gap-[25px] lg:text-[15px]">
                     @foreach ($headerPages as $route)
                         <li>
                             <a href="{{ url($route->page->permalink) }}"
                                 class="inline-block w-full cursor-pointer font-semibold uppercase {{ Request::is($route->page->permalink) ? 'text-[#F06728]' : '' }} transition-colors hover:text-[#FF4800]">{{ $route->page->name }}</a>
                         </li>
                     @endforeach

                     <li>
                         <a href="#" class="flex items-center gap-2">
                             <span
                                 class="flex h-10 w-10 items-center justify-center rounded-full bg-[#FF4800] text-white"><i
                                     class="fa-solid fa-phone"></i></span>
                             <div>
                                 <p class="text-[11px] font-semibold text-black text-opacity-60">
                                     Got a Question
                                 </p>
                                 <span class="text-[14px] font-semibold text-[#2F2B2B]">{{ $general->contact }}</span>
                             </div>
                         </a>
                     </li>
                 </ul>
             </div>
             <!-- Menu Button -->
             <i class="menu-btn fa-solid fa-bars text-[#FF4800] md:hidden"></i>
         </section>
     </section>
 </nav> --}}


 <!-- nav -->
 <nav class="navbar not-fixed top-0 left-0 z-50 w-full bg-white bg-opacity-0">
     <section class="2xl:container 2xl:mx-auto flex items-center justify-between px-2 py-3 md:px-[20px] lg:px-[60px]">
         <!-- Logo -->
         <section>
             <a href="/">
                 <img src="{{ asset('images/' . $general->image) }}" alt="logo" class="max-w-[200px] h-20 bg-red-500" />
             </a>
         </section>
         <!-- Nav section -->
         <section class="ml-auto flex items-center gap-4">
             <!-- Nav ul -->
             <div
                 class="nav-overlay fixed left-0 top-0 z-40 h-fit w-fit bg-black bg-opacity-20 md:static md:bg-transparent">
                 <ul
                     class="nav-ul fixed -left-full top-0 z-50 h-full w-[75%] items-center gap-2 space-y-4 bg-[#ffffff] px-4 py-4 text-[15px] text-[#0298c0] shadow-md transition-[left] duration-500 sm:w-[50%] md:static md:flex md:h-auto md:w-auto md:space-y-0 md:bg-transparent md:px-0 md:py-0 md:text-[12px] md:shadow-none lg:text-[15px]">
                     
                     @foreach ($headerPages as $route)

                     <li>
                        <a href="{{ url($route->page->permalink) }}"
                            class="inline-block px-4 py-2 w-full cursor-pointer font-semibold uppercase {{ Request::is($route->page->permalink) ? 'text-white bg-[#0298c0]' : ' text-black transition-colors  hover:text-[#0298c0]' }} ">{{ $route->page->name }}</a>
                    </li>
                         
                     @endforeach
                                         
                     {{-- <li>
                         <a href="about-us.html"
                             class="inline-block w-full px-4 py-2 font-semibold uppercase transition-colors hover:text-[#0055ff]">About</a>
                     </li>
                     <li>
                         <a href="all-services.html"
                             class="inline-block w-full px-4 py-2 font-semibold uppercase transition-colors hover:text-[#0055ff]">Services</a>
                     </li>
                     <li>
                         <a href="people.html"
                             class="inline-block w-full px-4 py-2 font-semibold uppercase transition-colors hover:text-[#0055ff]">People</a>
                     </li>
                     <li>
                         <a href="gallery.html"
                             class="inline-block w-full px-4 py-2 font-semibold uppercase transition-colors hover:text-[#0055ff]">Gallery</a>
                     </li>
                     <li>
                         <a href="notice-board.html"
                             class="inline-block w-full px-4 py-2 font-semibold uppercase transition-colors hover:text-[#0055ff]">Notice</a>
                     </li>
                     <li>
                         <a href="contact-us.html"
                             class="inline-block w-full px-4 py-2 font-semibold uppercase transition-colors hover:text-[#0055ff]">Contact</a>
                     </li>
                     <li>
                         <a href="#"
                             class="inline-block w-full px-4 py-2 font-semibold uppercase transition-colors hover:text-[#0055ff] md:hidden">Log
                             in</a>
                     </li> --}}


                     <!-- <li>
              <a href="#" class="flex items-center gap-2">
                <span class="flex h-10 w-10 items-center justify-center rounded-full bg-[#FF4800] text-white"><i
                    class="fa-regular fa-phone-volume"></i></span>
                <div>
                  <p class="text-[11px] font-semibold text-black text-opacity-60">
                    Got a Question
                  </p>
                  <span class="text-[14px] font-semibold text-[#2F2B2B]">+88013484388</span>
                </div>
              </a>
            </li> -->


                 </ul>
             </div>

             <!-- Menu Button -->
             <i class="menu-btn fa-solid fa-bars text-[#0055ff] md:hidden"></i>
         </section>
     </section>
 </nav>