Nav bar - Rulz&Co

<div class="max-w-4xl border rounded-full mr-auto ml-auto pt-3 pr-6 pb-3 pl-6 border-white/10"
  style="background: linear-gradient(180deg, rgba(14,16,26,0.55), rgba(14,16,26,0.35)) padding-box, linear-gradient(120deg, rgba(255,255,255,0.35), rgba(255,255,255,0.08)) border-box; border: 1px solid transparent; backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);">
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <span class="text-lg font-semibold tracking-tight text-white/90">Rulz&amp;Co.</span>
    </div>
    <ul class="hidden md:flex items-center gap-1 text-sm font-medium text-white/60">
      <li class="">
        <a href="#"
          class="transition-colors duration-300 rounded-full pt-2 pr-4 pb-2 pl-4 hover:text-white hover:bg-white/5">Home</a>
      </li>
      <li class="">
        <a href="/services"
          class="transition-colors duration-300 hover:text-white hover:bg-white/5 rounded-full pt-2 pr-4 pb-2 pl-4">Services</a>
      </li>
      <li class="">
        <a href="#"
          class="transition-colors duration-300 rounded-full pt-2 pr-4 pb-2 pl-4 hover:text-white hover:bg-white/5">Works</a>
      </li>
      <li class="">
        <a href="#"
          class="transition-colors duration-300 rounded-full pt-2 pr-4 pb-2 pl-4 hover:text-white hover:bg-white/5">Contact</a>
      </li>
      <li class="">
        <a href="#"
          class="transition-colors duration-300 rounded-full pt-2 pr-4 pb-2 pl-4 hover:text-white hover:bg-white/5">FAQ</a>
      </li>
    </ul>
    <div class="flex items-center gap-1.5 md:gap-2">
      <button class="inline-flex md:hidden p-2 rounded-full transition-all duration-300 border hover:bg-white/5 border-white/5" style="background: rgba(255, 255, 255, 0.02);" aria-label="Menu">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 stroke-[1.5] text-white/70">
          <line x1="4" y1="6" x2="20" y2="6" class=""></line>
          <line x1="4" y1="12" x2="20" y2="12" class=""></line>
          <line x1="4" y1="18" x2="20" y2="18" class=""></line>
        </svg>
      </button>
      <button class="hidden md:inline-flex p-2 rounded-full transition-all duration-300 border hover:bg-white/5 border-white/5" style="background: rgba(255, 255, 255, 0.02);" aria-label="Account">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 stroke-[1.5] text-white/60">
          <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" class=""></path>
          <circle cx="12" cy="7" r="4" class=""></circle>
        </svg>
      </button>

    </div>
  </div>
</div>