Glassmorphic Responsive Navbar with Icons

<div class="fixed z-50 bg-transparent pt-6 pr-6 pb-6 pl-6 top-0 right-0 left-0"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(1)">
  <div
    class="max-w-4xl border-white/10 border rounded-full mr-auto ml-auto pt-3 pr-6 pb-3 pl-6 border-gradient before:rounded-full"
    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">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/af2a60e8-5c39-4a7a-bfaa-83e6f1bcbf4b_1600w.png" alt="Global Impact" class="h-9 object-cover" style="width: 100px; height: 36px;">
      </div>
      <ul class="hidden md:flex items-center gap-1 text-sm font-medium text-white/60">
        <li class="">
          <a href="#"
            class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5 font-geist">
            Network
          </a>
        </li>
        <li class="">
          <a href="#"
            class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5 font-geist">
            Features
          </a>
        </li>
        <li class="">
          <a href="#"
            class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5 font-geist">
            Success
          </a>
        </li>
        <li class="">
          <a href="#"
            class="hover:text-white transition-colors duration-300 px-4 py-2 rounded-full hover:bg-white/5 font-geist">
            Programs
          </a>
        </li>
      </ul>
      <div class="flex items-center gap-1.5 md:gap-2">
        <button class="inline-flex md:hidden hover:bg-white/5 p-2 rounded-full transition-all duration-300 border 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 hover:bg-white/5 p-2 rounded-full transition-all duration-300 border 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>
</div>