 <!-- 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>
