AI Services Marquee with Stats Grid

<div class="grid lg:grid-cols-12 gap-12 lg:px-12 pt-20 pr-6 pb-20 pl-6 gap-x-12 gap-y-12 m-8 max-w-6xl my-20 mx-auto">

  <!-- Services Column (Marquee) -->
  <div class="lg:col-span-7 overflow-hidden space-y-12">
    <p class="text-2xl lg:text-3xl font-light text-neutral-800 leading-snug tracking-tight max-w-3xl">
      We are pioneers in <span class="text-orange-600 font-normal">Machine Learning</span>, dedicated to helping
      businesses harness the power of artificial intelligence to drive innovation, efficiency, and growth.
    </p>

    <div class="w-full mask-gradient no-scrollbar" style="overflow-x: auto; overflow-y: hidden;">
      <div class="flex gap-6 w-[200%] gap-x-6 gap-y-6 items-stretch">

        <!-- Original Set -->
        <div class="flex gap-6 w-1/2 pr-6 gap-x-6 gap-y-6 items-stretch" style="flex-wrap: nowrap;">
          <!-- Card 1 -->
          <div
            class="flex-1 min-w-[240px] shrink-0 bg-white p-6 rounded-2xl border border-neutral-200 shadow-sm flex flex-col h-64 group hover:border-orange-200 transition-colors duration-300">
            <div
              class="flex group-hover:bg-orange-50 group-hover:text-orange-600 transition-colors duration-300 text-neutral-600 bg-neutral-50 w-10 h-10 rounded-lg mb-0 items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                style="color: rgb(234, 88, 12); width: 16px; height: 16px;" class="w-[16px] h-[16px]" aria-hidden="true"
                role="img" data-icon="solar:chart-square-bold-duotone" data-solar="stars-line-bold-duotone"
                data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
                <path fill="#ea580c"
                  d="M12.55 3.44c-.432-.931-.648-1.396-1.029-1.435s-.674.373-1.262 1.198l-.152.214c-.166.234-.25.351-.37.422c-.12.07-.263.087-.55.119l-.26.03c-1.01.112-1.514.168-1.664.52c-.15.351.154.765.761 1.592l.158.214c.172.235.258.352.29.49s.004.28-.05.564l-.05.259c-.192 1-.288 1.5 0 1.757c.289.256.77.099 1.733-.215l.249-.081c.274-.09.41-.134.55-.12s.266.086.519.23l.23.13c.89.506 1.335.759 1.663.566s.322-.704.31-1.725l-.004-.264c-.003-.29-.005-.436.05-.564c.055-.129.16-.227.371-.422l.192-.178c.742-.688 1.113-1.032 1.027-1.408c-.085-.375-.57-.534-1.54-.851L13.47 4.4c-.276-.09-.414-.135-.52-.23c-.105-.093-.166-.225-.289-.49z"
                  class="">
                </path>
                <path fill="#ea580c" fill-rule="evenodd"
                  d="M11.205 11.279a.75.75 0 0 1 .515.927c-.366 1.283-.454 3.144-.396 5.008a41 41 0 0 0 .417 4.672a.75.75 0 0 1-1.483.228c-.17-1.11-.374-2.94-.433-4.853c-.059-1.894.02-3.95.453-5.467a.75.75 0 0 1 .927-.515m11.442-2.157a.75.75 0 0 1-.27 1.026C16.667 13.48 15.25 18.859 15.25 22a.75.75 0 0 1-1.5 0c0-3.525 1.583-9.48 7.872-13.148a.75.75 0 0 1 1.025.27"
                  clip-rule="evenodd" opacity=".5" class=""></path>
                <path fill="#ea580c"
                  d="M5.133 13.765c-.023-.108.149-.207.23-.133c.238.213.56.457.86.537s.699.03 1.011-.036c.108-.023.207.149.133.23c-.213.238-.456.56-.537.86c-.08.299-.03.698.036 1.011c.023.108-.149.207-.23.133c-.238-.213-.56-.456-.859-.537c-.3-.08-.7-.03-1.012.036c-.108.023-.207-.149-.133-.23c.213-.238.457-.56.537-.859c.08-.3.03-.7-.036-1.012"
                  class="">
                </path>
              </svg>
            </div>
            <h4 class="text-base font-semibold text-neutral-900 leading-tight mt-6 mb-2">Automation Machine Learning
            </h4>
            <div class="mt-auto w-full">
              <button class="group shadow-orange-500/30 hover:shadow-orange-500/50 transition-all duration-300 overflow-hidden font-medium text-orange-900 bg-gradient-to-r from-[#FFEBB1] to-[#FFC438] rounded-lg py-2.5 px-4 relative shadow-lg w-full text-sm" style="box-shadow:0 15px 33px -12px rgba(255,162,42,0.9), inset 0 4px 6.3px rgba(252,220,134,1), inset 0 -5px 6.3px rgba(255,162,38,1);">
                <div class="group-hover:tranneutral-y-0 transition-transform duration-300 bg-white/20 absolute inset-0 tranneutral-y-full"></div>
                <span class="relative flex items-center justify-center gap-2">
                    Talk With Us
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" class="lucide lucide-send w-4 h-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
                </span>
            </button>
            </div>
          </div>

          <!-- Card 2 (Highlighted) -->
          <div
            class="flex-1 min-w-[260px] shrink-0 shadow-orange-100/50 flex flex-col bg-gradient-to-b from-white to-orange-50/50 h-64 border-orange-200 border ring-orange-100 ring-1 rounded-2xl pt-6 pr-6 pb-6 pl-6 shadow-lg">
            <div
              class="flex group-hover:bg-orange-50 group-hover:text-orange-600 transition-colors duration-300 text-neutral-600 bg-neutral-50 w-10 h-10 rounded-lg mb-0 items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="color: #ea580c"
                class="" aria-hidden="true" role="img" data-icon="solar:chart-square-bold-duotone"
                data-solar="notification-unread-lines-bold-duotone" data-icon-set="solar" data-icon-replaced="true">
                <path fill="#ea580c"
                  d="M22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12"
                  opacity=".5" class=""></path>
                <path fill="#ea580c"
                  d="M7 16.75a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5zm0-3.5a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5zM22 5a3 3 0 1 1-6 0a3 3 0 0 1 6 0"
                  class="">
                </path>
              </svg>
            </div>
            <h4 class="text-base font-semibold text-orange-900 leading-tight mt-6 mb-2">AI-Powered Chatbots</h4>
            <div class="mt-auto w-full">
              <button class="group shadow-orange-500/30 hover:shadow-orange-500/50 transition-all duration-300 overflow-hidden font-medium text-orange-900 bg-gradient-to-r from-[#FFEBB1] to-[#FFC438] rounded-lg py-2.5 px-4 relative shadow-lg w-full text-sm" style="box-shadow:0 15px 33px -12px rgba(255,162,42,0.9), inset 0 4px 6.3px rgba(252,220,134,1), inset 0 -5px 6.3px rgba(255,162,38,1);">
                <div class="group-hover:tranneutral-y-0 transition-transform duration-300 bg-white/20 absolute inset-0 tranneutral-y-full"></div>
                <span class="relative flex items-center justify-center gap-2">
                    Talk With Us
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" class="lucide lucide-send w-4 h-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
                </span>
            </button>
            </div>
          </div>

          <!-- Card 3 -->
          <div
            class="flex-1 min-w-[240px] shrink-0 bg-white p-6 rounded-2xl border border-neutral-200 shadow-sm flex flex-col h-64 group hover:border-orange-200 transition-colors duration-300">
            <div
              class="flex group-hover:bg-orange-50 group-hover:text-orange-600 transition-colors duration-300 text-neutral-600 bg-neutral-50 w-10 h-10 rounded-lg mb-0 items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                viewBox="0 0 24 24" data-icon="solar:chart-square-bold-duotone" class="w-[16px] h-[16px]"
                stroke-width="2" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(234, 88, 12);">
                <path fill="currentColor"
                  d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22"
                  opacity=".5" class=""></path>
                <path fill="currentColor"
                  d="M12 5.25a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75m-5 3a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0V9A.75.75 0 0 1 7 8.25m10 4a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0v-5a.75.75 0 0 1 .75-.75"
                  class="">
                </path>
              </svg>
            </div>
            <h4 class="text-base font-semibold text-neutral-900 leading-tight mt-6 mb-2">Data Analytics Deep Insights
            </h4>
            <div class="mt-auto w-full">
              <button class="group shadow-orange-500/30 hover:shadow-orange-500/50 transition-all duration-300 overflow-hidden font-medium text-orange-900 bg-gradient-to-r from-[#FFEBB1] to-[#FFC438] rounded-lg py-2.5 px-4 relative shadow-lg w-full text-sm" style="box-shadow:0 15px 33px -12px rgba(255,162,42,0.9), inset 0 4px 6.3px rgba(252,220,134,1), inset 0 -5px 6.3px rgba(255,162,38,1);">
                <div class="group-hover:tranneutral-y-0 transition-transform duration-300 bg-white/20 absolute inset-0 tranneutral-y-full"></div>
                <span class="relative flex items-center justify-center gap-2">
                    Talk With Us
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" class="lucide lucide-send w-4 h-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
                </span>
            </button>
            </div>
          </div>
        </div>

        <!-- Duplicate Set for Loop -->


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

  <!-- Stats Column -->
  <div class="lg:col-span-5 grid grid-cols-2 gap-x-8 gap-y-12 content-center">
    <div class="">
      <h3 class="text-5xl font-normal tracking-tighter text-neutral-900 mb-2">
        2M</h3>
      <p class="text-sm text-neutral-500 leading-snug">
        Users benefiting from our AI-powered solutions globally
      </p>
    </div>
    <div class="">
      <h3 class="text-5xl font-normal tracking-tighter text-neutral-900 mb-2">
        4.9<span class="text-3xl text-neutral-400 font-light">/5</span></h3>
      <p class="text-sm text-neutral-500 leading-snug">
        Average rating across all AI-driven applications
      </p>
    </div>
    <div class="">
      <h3 class="text-5xl font-normal tracking-tighter text-neutral-900 mb-2">35%</h3>
      <p class="text-sm text-neutral-500 leading-snug">
        Faster decision-making with neural recommendations
      </p>
    </div>
    <div class="">
      <h3 class="text-5xl font-normal tracking-tighter text-neutral-900 mb-2">99.9%</h3>
      <p class="text-sm text-neutral-500 leading-snug">
        Uptime guarantee for seamless AI experience
      </p>
    </div>
  </div>
</div>