<header class="bg-black text-white border-b border-gray-800 sticky top-0 z-50">
  <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">

    <!-- Left: Logo + Desktop Menu -->
    <div class="flex items-center space-x-6">

      <!-- Logo -->
      <a href="index.html" class="bg-white px-2 py-1">
        <img src="images/fav-icon.svg" alt="Logo" class="h-8">
      </a>

      <!-- Desktop Navigation -->
      <nav class="hidden md:flex space-x-6 text-sm font-semibold">
        <a title="home" href="{{ url('/') }}" class="hover:text-red-500">HOME</a>
        @foreach ($catM->take(8) as $category)
        <a title="{{ $category->category_name }}" href="{{ url(Str::lower($category->category_name)) }}">
            {{ Str::ucfirst(strtoupper(str_replace('-', ' ', $category->category_name))) }}
        </a>
  @endforeach
      
      </nav>

    </div>

    <!-- Right Section -->
    <div class="flex items-center space-x-5">

      <!-- Sign in (desktop only) -->
      <a href="#" class="hidden md:block text-sm hover:text-gray-300">
        Sign in
      </a>

      <!-- Search Icon (desktop only) -->
      <svg xmlns="http://www.w3.org/2000/svg"
        class="hidden md:block h-5 w-5 cursor-pointer hover:text-gray-300"
        fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round"
          stroke-width="2"
          d="M21 21l-4.35-4.35M10 18a8 8 0 100-16 8 8 0 000 16z" />
      </svg>

      <!-- Donate Button (desktop only) -->
      <button class="hidden md:block bg-red-600 hover:bg-red-700 text-white text-sm font-semibold px-4 py-1 rounded">
        DONATE
      </button>

      <!-- Hamburger Button (Mobile only - Right side) -->
      <button id="menuBtn" class="md:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7"
          fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>

    </div>

  </div>
</header>

<!-- ================= MOBILE MENU ================= -->
<div id="mobileMenu" class="hidden md:hidden bg-black text-white border-b border-gray-800">
  <nav class="flex flex-col space-y-4 px-4 py-4 text-sm font-semibold">
    <a href="#" class="hover:text-red-500">WORLD</a>
    <a href="#" class="hover:text-red-500">U.S.</a>
    <a href="#" class="hover:text-red-500">POLITICS</a>
    <a href="#" class="hover:text-red-500">SPORTS</a>
    <a href="#" class="hover:text-red-500">ENTERTAINMENT</a>
    <a href="#" class="hover:text-red-500">BUSINESS</a>
    <a href="#" class="hover:text-red-500">SCIENCE</a>
    <a href="#" class="hover:text-red-500">TECH</a>
    <a href="#" class="hover:text-red-500">PRESS RELEASES</a>
    <hr class="border-gray-700">
    <a href="#" class="hover:text-red-500">Sign in</a>
  </nav>
</div>