{{-- <header id="header" class="fixed top-0 w-full bg-white/90 backdrop-blur-sm z-50 border-b border-gray-100">
    <nav class="max-w-7xl mx-auto px-6 py-4">
        <div class="flex justify-between items-center">
            <div class="text-2xl font-playfair font-semibold text-gray-900">
                <a href="{{route('home')}}">
                    <img src="{{web_logo()}}" alt="{{web_title()}}">
                </a>
            </div>
            <div class="hidden md:flex space-x-8 items-center">
               @foreach($categories as $category)
                <a href="#{{ $category->category_slug }}" class="text-gray-700 hover:text-gold transition-colors duration-300">{{ $category->category_name }}</a>
               @endforeach
                <a href="#contact" class="bg-gold text-white px-6 py-2 hover:bg-yellow-600 transition-colors duration-300">Contact</a>
            </div>
        </div>
    </nav>
</header> --}}

{{-- 06Nov2025 Html COde Starts(Shakib)  --}}
<header id="header" class="fixed top-0 w-full bg-white/90 backdrop-blur-sm z-50 border-b border-gray-100">
    <nav class="max-w-7xl mx-auto px-6 py-4">
        <div class="flex justify-between items-center">
            <!-- Logo -->
            <div class="text-2xl font-playfair font-semibold text-gray-900">
                <a href="{{route('home')}}">
                    <img src="{{web_logo()}}" alt="{{web_title()}}">
                </a>
            </div>

            <!-- Desktop Menu -->
            <div class="hidden md:flex space-x-8 items-center">
               @foreach($categories as $category)
                    <a href="#{{ $category->category_slug }}" class="text-gray-700 hover:text-gold transition-colors duration-300">{{ $category->category_name }}</a>
               @endforeach
                <a href="#contact" class="bg-gold text-white px-6 py-2 hover:bg-yellow-600 transition-colors duration-300">Contact</a>
            </div>

            <!-- Mobile Menu Button -->
            <div class="md:hidden">
                <button id="mobile-menu-btn" class="text-gray-700 focus:outline-none">
                    &#9776; <!-- Hamburger icon -->
                </button>
            </div>
        </div>

        <!-- Mobile Menu -->
        <div id="mobile-menu" class="hidden md:hidden flex flex-col mt-4 space-y-2">
            @foreach($categories as $category)
                <a href="#{{ $category->category_slug }}" class="text-gray-700 hover:text-gold transition-colors duration-300">{{ $category->category_name }}</a>
            @endforeach
            <a href="#contact" class="bg-gold text-white px-6 py-2 hover:bg-yellow-600 transition-colors duration-300">Contact</a>
        </div>
    </nav>
</header>

<script>
    const menuBtn = document.getElementById('mobile-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');

    menuBtn.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });
</script>

{{-- 06Nov2025 Html COde Ends (Shakib) --}}