Animated Marquee Testimonials Section

<section
  class="[animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll sm:px-6 sm:py-10 md:py-12 lg:px-8 lg:mt-40 lg:mb-40 max-w-7xl mt-40 mr-auto mb-40 ml-auto pt-8 pr-4 pb-8 pl-4 relative"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(6)">
  <div class="flex items-center justify-between">
    <div class="space-y-1">
      <p class="text-xs sm:text-sm text-slate-400">What people say</p>
      <h2 class="text-2xl sm:text-3xl md:text-4xl tracking-tight font-semibold text-slate-100">Testimonials</h2>
    </div>
    <div class="hidden sm:flex items-center gap-2 text-slate-400">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
        <path
          d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"
          class=""></path>
        <path
          d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"
          class=""></path>
      </svg>
      <span class="text-sm">Real feedback from teams</span>
    </div>
  </div>

  <div class="sm:mt-8 overflow-hidden sm:rounded-3xl bg-slate-950 border-slate-800 border rounded-2xl mt-8 relative"
    style="position: relative;">
    <div class="absolute -inset-1 rounded-2xl sm:rounded-3xl pointer-events-none"
      style="background: linear-gradient(45deg, rgba(132, 204, 22, 0.1), rgba(52, 211, 153, 0.08), rgba(34, 211, 238, 0.06), rgba(163, 230, 53, 0.08)); background-size: 300%; animation: glow-rotate 15s linear infinite; filter: blur(25px); opacity: 0.6; z-index: -1;">
    </div>

    <div class="absolute inset-0 rounded-2xl sm:rounded-3xl pointer-events-none" style="z-index: 1;">
      <div
        style="position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, rgba(132, 204, 22, 0.3), rgba(52, 211, 153, 0.25), rgba(34, 211, 238, 0.2), rgba(163, 230, 53, 0.25)); background-size: 400% 100%; animation: border-flow 8s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;">
      </div>
    </div>

    <div
      class="pointer-events-none absolute inset-y-0 left-0 w-24 sm:w-40 bg-gradient-to-r from-slate-950 to-transparent z-10">
    </div>
    <div
      class="pointer-events-none absolute inset-y-0 right-0 w-24 sm:w-40 bg-gradient-to-l from-slate-950 to-transparent z-10">
    </div>

    <div class="sm:py-8 pt-6 pb-6 relative">
      <div class="flex gap-4 sm:gap-5 will-change-transform animate-[marquee-ltr_45s_linear_infinite]">
        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/92cff667-f259-4342-a0aa-f51b804f4d5c_800w.webp" alt="Avatar" class="size-9 object-cover rounded-full">
            <div class="">
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Ava Thompson</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@ava_builds</p>
            </div>
          </div>
          <p class="mt-4 text-sm sm:text-base text-slate-300">
            Sendo took minutes to integrate and saved days of email management. The AI is incredible.
          </p>
        </article>

        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/68ef576f-b219-43a8-8f00-72b9eea83a0d_320w.webp" alt="Avatar" class="size-9 object-cover rounded-full">
            <div class="">
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Noah Patel</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@noah_ops</p>
            </div>
          </div>
          <p class="mt-4 text-sm sm:text-base text-slate-300">
            We achieved inbox zero 3× faster. The smart features work perfectly out of the box.
          </p>
        </article>

        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c543a9e1-f226-4ced-80b0-feb8445a75b9_800w.jpg" alt="Avatar" class="size-9 object-cover rounded-full">
            <div class="">
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Maya Kim</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@mayak</p>
            </div>
          </div>
          <p class="mt-4 text-sm sm:text-base text-slate-300">
            The platform feels invisible—just fast, reliable email management and clean organization.
          </p>
        </article>

        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/16d38370-5873-45cf-bab1-60a7b923dc6e_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
            <div>
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Ethan Garcia</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@egarcia</p>
            </div>
          </div>
          <p class="mt-4 text-sm sm:text-base text-slate-300">
            Smart insights baked in. We finally trust our email workflow for decision-making.
          </p>
        </article>

        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b08603d1-aaf4-4216-bd31-010eaa92f5cd_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
            <div>
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Ava Thompson</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@ava_builds</p>
            </div>
          </div>
          <p class="mt-4 text-sm sm:text-base text-slate-300">
            Sendo took minutes to integrate and saved days of email management. The AI is incredible.
          </p>
        </article>

        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9224ba63-793b-4edd-80e4-b2512cde1f9c_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
            <div>
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Noah Patel</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@noah_ops</p>
            </div>
          </div>
          <p class="mt-4 text-sm sm:text-base text-slate-300">
            We achieved inbox zero 3× faster. The smart features work perfectly out of the box.
          </p>
        </article>

        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/009b1373-14ec-472b-af1a-2cd1e8f97116_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
            <div>
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Maya Kim</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@mayak</p>
            </div>
          </div>
          <p class="mt-4 text-sm sm:text-base text-slate-300">
            The platform feels invisible—just fast, reliable email management and clean organization.
          </p>
        </article>

        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5180d964-2425-4134-8220-c1528af09124_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
            <div>
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Ethan Garcia</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@egarcia</p>
            </div>
          </div>
          <p class="mt-4 text-sm sm:text-base text-slate-300">
            Smart insights baked in. We finally trust our email workflow for decision-making.
          </p>
        </article>
      </div>
    </div>

    <div class="border-t border-slate-800/80"></div>

    <div class="sm:py-8 pt-6 pb-6 relative">
      <div class="flex gap-4 sm:gap-5 will-change-transform animate-[marquee-rtl_45s_linear_infinite]">
        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] bg-slate-900/40 border-slate-800 border rounded-2xl pt-5 pr-5 pb-5 pl-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4f30f4f2-b81c-4bf1-88c7-86b1dc41acd1_800w.jpg" alt="Avatar" class="size-9 object-cover rounded-full">
            <div class="">
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Priya Singh</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@priya_dev</p>
            </div>
          </div>
          <p class="mt-4 text-sm sm:text-base text-slate-300">
            The automation suite transformed our workflow. The interface stays out of the way and just works.
          </p>
        </article>

        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] bg-slate-900/40 border-slate-800 border rounded-2xl pt-5 pr-5 pb-5 pl-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/46ceb0ec-b3fa-4f16-8a70-bbd217ee77a9_800w.jpg" alt="Avatar" class="size-9 object-cover rounded-full">
            <div class="">
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Leo Martin</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@leom</p>
            </div>
          </div>
          <p class="sm:text-base text-sm text-slate-300 mt-4">
            Smart filters, priority routing, and analytics—without extra setup work. Huge productivity win.
          </p>
        </article>

        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] bg-slate-900/40 border-slate-800 border rounded-2xl pt-5 pr-5 pb-5 pl-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ecd0a237-cc16-45f4-aef8-82b1ad266250_320w.webp" alt="Avatar" class="size-9 object-cover rounded-full">
            <div class="">
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Sofia Alvarez</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@sofialabs</p>
            </div>
          </div>
          <p class="mt-4 text-sm sm:text-base text-slate-300">
            From chaos to clarity with one setup. Best email experience we've had in years.
          </p>
        </article>

        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/16d38370-5873-45cf-bab1-60a7b923dc6e_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
            <div>
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Jackson Lee</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@jacksonlee</p>
            </div>
          </div>
          <p class="mt-4 text-sm sm:text-base text-slate-300">
            Clean interface, helpful AI, and thoughtful automation. It's the small things that matter.
          </p>
        </article>

        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c543a9e1-f226-4ced-80b0-feb8445a75b9_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
            <div>
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Priya Singh</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@priya_dev</p>
            </div>
          </div>
          <p class="mt-4 text-sm sm:text-base text-slate-300">
            The automation suite transformed our workflow. The interface stays out of the way and just works.
          </p>
        </article>

        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9224ba63-793b-4edd-80e4-b2512cde1f9c_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
            <div>
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Leo Martin</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@leom</p>
            </div>
          </div>
          <p class="mt-4 text-sm sm:text-base text-slate-300">
            Smart filters, priority routing, and analytics—without extra setup work. Huge productivity win.
          </p>
        </article>

        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b08603d1-aaf4-4216-bd31-010eaa92f5cd_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
            <div>
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Sofia Alvarez</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@sofialabs</p>
            </div>
          </div>
          <p class="mt-4 text-sm sm:text-base text-slate-300">
            From chaos to clarity with one setup. Best email experience we've had in years.
          </p>
        </article>

        <article
          class="shrink-0 w-[280px] sm:w-[360px] md:w-[420px] rounded-2xl border border-slate-800 bg-slate-900/40 p-5">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5180d964-2425-4134-8220-c1528af09124_800w.jpg" alt="Avatar" class="size-9 rounded-full object-cover">
            <div>
              <div class="flex items-center gap-1">
                <span class="text-sm font-medium text-slate-100">Jackson Lee</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="w-3.5 h-3.5 text-blue-400">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m9 12 2 2 4-4" class=""></path>
                </svg>
              </div>
              <p class="text-xs text-slate-400">@jacksonlee</p>
            </div>
          </div>
          <p class="mt-4 text-sm sm:text-base text-slate-300">
            Clean interface, helpful AI, and thoughtful automation. It's the small things that matter.
          </p>
        </article>
      </div>
    </div>

    <style>
      @keyframes border-flow {
        0% {
          background-position: 0% 50%;
        }

        100% {
          background-position: 400% 50%;
        }
      }
    </style>
  </div>

  <style>
    @keyframes glow-rotate {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }
  </style>
</section>