Glassmorphic Charter Pricing Section with CTAs

<section class="relative w-full sm:py-10 py-8">
      <div class="absolute inset-0"></div>
      <div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4">
        <div class="max-w-6xl mr-auto ml-auto">
          <p class="text-center text-xs tracking-wider text-neutral-300/90">Premium experiences await.</p>
          <h3 class="mt-2 text-center text-2xl sm:text-3xl tracking-tight font-semibold">Choose Your Charter</h3>

          <div class="border-white/10 border rounded-3xl mt-6 backdrop-blur" style="">
            <ul class="divide-y divide-white/10">
              <li class="flex pt-5 pr-5 pb-5 pl-5 items-center justify-between">
                <div class="flex gap-3 items-center">
                  <span class="h-10 w-10 flex bg-white/10 rounded-xl items-center justify-center">
                    <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" data-lucide="clock" class="lucide lucide-clock w-[20px] h-[20px] text-slate-50" style="width: 20px; height: 20px;" data-icon-replaced="true"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
                  </span>
                  <div class="">
                    <p class="font-semibold tracking-tight">Half Day</p>
                    <p class="text-xs text-white/70" style="">4-hour coastal experience</p>
                  </div>
                </div>
                <a href="#" class="text-xs px-3 py-1.5 rounded-full bg-white/10 hover:bg-white/20 transition" style="">From $2,500</a>
              </li>
              <li class="flex pt-5 pr-5 pb-5 pl-5 items-center justify-between">
                <div class="flex items-center gap-3">
                  <span class="h-10 w-10 flex bg-white/10 rounded-xl items-center justify-center" style="">
                    <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" data-lucide="sun" class="lucide lucide-sun w-[20px] h-[20px] text-slate-50" style="width: 20px; height: 20px;" data-icon-replaced="true"><circle cx="12" cy="12" r="4" class=""></circle><path d="M12 2v2" class=""></path><path d="M12 20v2" class=""></path><path d="m4.93 4.93 1.41 1.41" class=""></path><path d="m17.66 17.66 1.41 1.41" class=""></path><path d="M2 12h2" class=""></path><path d="M20 12h2" class=""></path><path d="m6.34 17.66-1.41 1.41" class=""></path><path d="m19.07 4.93-1.41 1.41" class=""></path></svg>
                  </span>
                  <div class="">
                    <p class="font-semibold tracking-tight">Full Day</p>
                    <p class="text-xs text-white/70" style="">8-hour luxury adventure</p>
                  </div>
                </div>
                <a href="#" class="text-xs px-3 py-1.5 rounded-full bg-white/10 hover:bg-white/20 transition" style="">From $4,800</a>
              </li>
              <li class="p-5 flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <span class="h-10 w-10 flex bg-white/10 rounded-xl items-center justify-center" style="">
                    <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" data-lucide="moon" class="lucide lucide-moon w-[20px] h-[20px] text-slate-50" style="width: 20px; height: 20px;" data-icon-replaced="true"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" class=""></path></svg>
                  </span>
                  <div class="">
                    <p class="font-semibold tracking-tight">Multi-Day</p>
                    <p class="text-xs text-white/70" style="">Extended cruising with accommodation</p>
                  </div>
                </div>
                <a href="#" class="text-xs px-3 py-1.5 rounded-full bg-white/10 hover:bg-white/20 transition" style="">Custom Quote</a>
              </li>
            </ul>
            <div class="p-5 flex gap-3">
              <a href="#" class="flex-1 inline-flex items-center justify-center gap-2 rounded-xl bg-cyan-400/90 hover:bg-cyan-400 text-black px-4 py-2.5 text-sm font-medium transition" style="">
                <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" data-lucide="calendar" class="lucide lucide-calendar h-4 w-4"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg>
                Book Charter
              </a>
              <a href="#" class="flex-1 inline-flex items-center justify-center gap-2 rounded-xl bg-white/10 hover:bg-white/20 px-4 py-2.5 text-sm font-medium transition" style="">
                <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" data-lucide="phone" class="lucide lucide-phone h-4 w-4 text-slate-300" style=""><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" class=""></path></svg>
                Contact Us
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>