{{--
 <nav>
     <a href="{{ route('home') }}">Home</a>
     <a href="{{ route('about') }}">About Us</a>
     <a href="{{ route('contact') }}">Booking Court</a>
     <a href="#">Pages</a>
     <a href="{{ route('contact') }}">Contact Us</a>
 </nav>
 <a href="#" class="join-btn">Join The Club <img class="green-area-arrow-circle"
         src="{{ asset('assets/images/icon/arrow-upper-right.png') }}"></a> --}}

    <!-- Mobile Menu Toggle Button (Hidden on desktop) -->
    <button class="mobile-menu-toggle" aria-label="Toggle Menu" aria-expanded="false">
        <span></span>
        <span></span>
        <span></span>
    </button>

   <!-- Navigation Menu -->
    <nav>
        <a href="{{ route('home') }}">Home</a>
        <a href="{{ route('about') }}">About Us</a>
        <a href="{{ route('contact') }}">Booking Court</a>
        <a href="#">Pages</a>
        <a href="{{ route('contact') }}">Contact Us</a>

        <!-- Join button inside mobile menu -->
        <a href="#" class="join-btn">
            Join The Club
            <img class="green-area-arrow-circle"
                 src="{{ asset('assets/images/icon/arrow-upper-right.png') }}"
                 alt="Arrow">
        </a>
    </nav>

    <!-- Mobile Menu Overlay -->
    <div class="mobile-menu-overlay"></div>
</header>