Feature Highlights Section with Center Image

<div class="container md:px-8 flex flex-col lg:flex-row gap-12 mr-auto ml-auto pt-16 pr-4 pb-16 pl-4 items-center">
  <!-- Left Features -->
  <div class="flex flex-col gap-8 flex-1 w-full">
    <div
      class="gradient-box p-8 rounded-2xl ring-1 ring-white/10 backdrop-blur-md fade-in fade-in-1 hover:ring-teal-400/20 transition-all duration-300">
      <p
        class="text-3xl mb-3 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500 font-playfair font-medium">
        01</p>
      <p class="text-base leading-relaxed text-gray-300 font-geist">Advanced Analytics – Deep insights and real-time
        performance monitoring for your business</p>
    </div>
    <div
      class="gradient-box p-8 rounded-2xl ring-1 ring-white/10 backdrop-blur-md fade-in fade-in-3 hover:ring-teal-400/20 transition-all duration-300">
      <p
        class="text-3xl mb-3 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500 font-playfair font-medium">
        03</p>
      <p class="text-base leading-relaxed text-gray-300 font-geist">Seamless Integration – Connect with over 200+ tools
        and platforms effortlessly</p>
    </div>
  </div>

  <!-- Center Image -->
  <div class="flex-1 w-full flex justify-center fade-in fade-in-2">
    <div class="relative">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1ba266bd-81e8-4c6b-b290-bdcb56dc9f72_800w.jpg" alt="Digital Interface" class="w-full max-w-md rounded-3xl shadow-2xl object-cover">
      <div class="absolute -inset-1 bg-gradient-to-r from-teal-400 to-blue-500 rounded-3xl blur opacity-20"></div>
    </div>
  </div>

  <!-- Right -->
  <div class="flex flex-col gap-8 flex-1 w-full">
    <h1 class="md:text-6xl leading-tight fade-in fade-in-1 text-5xl tracking-tight mb-4 font-playfair font-medium">Why
      Choose?<span class="bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500 font-playfair font-medium">Zenith</span>
    </h1>
    <div
      class="gradient-box p-8 rounded-2xl ring-1 ring-white/10 backdrop-blur-md fade-in fade-in-2 hover:ring-teal-400/20 transition-all duration-300">
      <p
        class="text-3xl mb-3 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500 font-playfair font-medium">
        02</p>
      <p class="text-base leading-relaxed text-gray-300 font-geist">Enterprise Security – Bank-grade encryption with
        99.9% uptime guarantee</p>
    </div>
    <div
      class="gradient-box p-8 rounded-2xl ring-1 ring-white/10 backdrop-blur-md fade-in fade-in-4 hover:ring-teal-400/20 transition-all duration-300">
      <p
        class="text-3xl mb-3 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500 font-playfair font-medium">
        04</p>
      <p class="text-base leading-relaxed text-gray-300 font-geist">Global Scale – Built for teams of any size, from
        startups to Fortune 500 companies</p>
    </div>
  </div>
</div>