Gradient Services List Section

<section
  class="overflow-hidden group md:p-16 bg-gradient-to-br from-white/10 via-white/0 to-white/10 w-full max-w-[1500px] rounded-[32px] ring-white/5 ring-1 pt-8 pr-8 pb-8 pl-8 relative shadow-2xl"
  style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)); --border-radius-before: 32px"
  id="expertise">
  <!-- Background Layers -->
  <div class="z-0 absolute top-0 right-0 bottom-0 left-0">
    <div class="bg-gradient-to-br from-indigo-500/10 via-purple-500/5 to-cyan-500/10 opacity-30 absolute inset-0"></div>

    <div class="bg-gradient-to-t from-[#000000] via-[#000000]/80 to-black/40 absolute top-0 right-0 bottom-0 left-0">
    </div>
  </div>

  <!-- Content -->
  <div class="relative z-10">
    <div class="grid grid-cols-1 md:grid-cols-2 mb-16 pb-8">
      <div class="col-span-1">
        <h2 class="text-7xl sm:text-9xl font-extrabold text-white leading-none tracking-tight">
          SERVICES
        </h2>
        <div class="text-white text-sm font-light mt-4 opacity-50">
          // EXPERTISE
        </div>
      </div>

      <div class="col-span-1 self-end md:text-right mt-8 md:mt-0">
        <span class="text-cyan-400 text-sm font-medium tracking-widest uppercase mb-1 block">
                    04
                </span>
        <p class="text-white/70 max-w-sm ml-auto text-lg font-light">
          Professional modeling services available for bookings.
        </p>
      </div>
    </div>

    <div class="border-t border-white/10">
      <dl
        class="flex flex-col border-b border-white/10 group/item cursor-pointer hover:bg-white/5 transition-colors rounded-xl">
        <dt class="flex items-center justify-between p-6">
          <div class="flex items-start gap-6">
            <div class="flex flex-col gap-1 pt-1 opacity-70">
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 block"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 block"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-white/30 block"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-white/30 block"></span>
            </div>
            <div class="flex flex-col">
              <span class="text-2xl font-medium text-white group-hover/item:text-cyan-400 transition-colors">
                                Editorial &amp; Print
                            </span>
              <span class="text-sm text-gray-400 mt-1 font-light">
                                High fashion magazine features, covers, and lookbooks.
                            </span>
            </div>
          </div>
          <div class="text-gray-400 group-hover/item:text-cyan-400 transition-colors">
            <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="lucide lucide-chevron-down w-5 h-5 transition-transform group-hover/item:rotate-180">
              <path d="m6 9 6 6 6-6" class=""></path>
            </svg>
          </div>
        </dt>
      </dl>

      <dl
        class="flex flex-col border-b border-white/10 group/item cursor-pointer hover:bg-white/5 transition-colors rounded-xl">
        <dt class="flex items-center justify-between p-6">
          <div class="flex items-start gap-6">
            <div class="flex flex-col gap-1 pt-1 opacity-70">
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 block"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 block"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 block"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-white/30 block"></span>
            </div>
            <div class="flex flex-col">
              <span class="text-2xl font-medium text-white group-hover/item:text-cyan-400 transition-colors">
                                Runway Walk
                            </span>
              <span class="text-sm text-gray-400 mt-1 font-light">
                                Professional catwalk for fashion weeks and designer showcases.
                            </span>
            </div>
          </div>
          <div class="text-gray-400 group-hover/item:text-cyan-400 transition-colors">
            <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="lucide lucide-chevron-down w-5 h-5 transition-transform group-hover/item:rotate-180">
              <path d="m6 9 6 6 6-6" class=""></path>
            </svg>
          </div>
        </dt>
      </dl>

      <dl
        class="flex flex-col border-b border-white/10 group/item cursor-pointer hover:bg-white/5 transition-colors rounded-xl">
        <dt class="flex items-center justify-between p-6">
          <div class="flex items-start gap-6">
            <div class="flex flex-col gap-1 pt-1 opacity-70">
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 block"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 block"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 block"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 block"></span>
            </div>
            <div class="flex flex-col">
              <span class="text-2xl font-medium text-white group-hover/item:text-cyan-400 transition-colors">
                                Commercial &amp; TV
                            </span>
              <span class="text-sm text-gray-400 mt-1 font-light">
                                Acting and modeling for television commercials and digital ads.
                            </span>
            </div>
          </div>
          <div class="text-gray-400 group-hover/item:text-cyan-400 transition-colors">
            <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="lucide lucide-chevron-down w-5 h-5 transition-transform group-hover/item:rotate-180">
              <path d="m6 9 6 6 6-6" class=""></path>
            </svg>
          </div>
        </dt>
      </dl>

      <dl
        class="flex flex-col border-b border-white/10 group/item cursor-pointer hover:bg-white/5 transition-colors rounded-xl">
        <dt class="flex items-center justify-between p-6">
          <div class="flex items-start gap-6">
            <div class="flex flex-col gap-1 pt-1 opacity-70">
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 block"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 block"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-white/30 block"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-white/30 block"></span>
            </div>
            <div class="flex flex-col">
              <span class="text-2xl font-medium text-white group-hover/item:text-cyan-400 transition-colors">
                                Fit Modeling
                            </span>
              <span class="text-sm text-gray-400 mt-1 font-light">
                                Precise body measurements for garment fitting and production.
                            </span>
            </div>
          </div>
          <div class="text-gray-400 group-hover/item:text-cyan-400 transition-colors">
            <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="lucide lucide-chevron-down w-5 h-5 transition-transform group-hover/item:rotate-180">
              <path d="m6 9 6 6 6-6" class=""></path>
            </svg>
          </div>
        </dt>
      </dl>

      <dl
        class="flex flex-col border-b border-white/10 group/item cursor-pointer hover:bg-white/5 transition-colors rounded-xl">
        <dt class="flex items-center justify-between p-6">
          <div class="flex items-start gap-6">
            <div class="flex flex-col gap-1 pt-1 opacity-70">
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 block"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 block"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 block"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-white/30 block"></span>
            </div>
            <div class="flex flex-col">
              <span class="text-2xl font-medium text-white group-hover/item:text-cyan-400 transition-colors">
                                Beauty &amp; Parts
                            </span>
              <span class="text-sm text-gray-400 mt-1 font-light">
                                Specialized modeling for cosmetics, jewelry, and accessories.
                            </span>
            </div>
          </div>
          <div class="text-gray-400 group-hover/item:text-cyan-400 transition-colors">
            <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="lucide lucide-chevron-down w-5 h-5 transition-transform group-hover/item:rotate-180">
              <path d="m6 9 6 6 6-6" class=""></path>
            </svg>
          </div>
        </dt>
      </dl>

      <dl
        class="flex flex-col border-b border-white/10 group/item cursor-pointer hover:bg-white/5 transition-colors rounded-xl">

      </dl>
    </div>
  </div>
</section>