<!-- 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="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-[35px] 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: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-[#F06728]">{{ $route->page->name }}</a>
                        </li>
                    @endforeach


                    <!-- Get a Quote btn -->
                    <a href="{{ url('contact') }}"
                        class="hidden rounded-full bg-[#F06728] px-3 py-1 text-[11px] font-semibold text-white transition-colors hover:bg-orange-700 md:block md:px-4 md:py-2">
                        Get a Quote
                    </a>
                </ul>
            </div>
            <!-- Menu Button -->
            <i class="menu-btn fa-solid fa-bars text-[#F06728] md:hidden"></i>
        </section>
    </section>
</nav>
