<!--<div class="bg-[#f58220] overflow-hidden py-10 ">-->
<!--    <div id="logoViewport" class="overflow-hidden w-full">-->
<!--        <div id="logoTrack" class="flex gap-12 items-center w-max will-change-transform"></div>-->
<!--    </div>-->
<!--</div>-->

<!--<script>-->
<!--document.addEventListener('DOMContentLoaded', () => {-->

<!--    const totalLogos = 22;-->
<!--    const base =-->
<!--        'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/';-->

<!--    const track = document.getElementById('logoTrack');-->
<!--    if (!track) return;-->

<!--    track.innerHTML = Array.from({ length: totalLogos }, (_, i) => `-->
<!--        <img src="${base}logo${i + 1}.png"-->
<!--             class="h-20 shrink-0 brightness-0 invert">-->
<!--    `).join('');-->
<!--});-->
<!--</script>-->


<style>
  /* Infinite loop animation */
  @keyframes loop-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* because we duplicate the content */
  }

  .loop-scroll {
    animation: loop-scroll var(--duration, 20s) linear infinite;
  }

  /* Hover pause */
  .logo-marquee:hover .loop-scroll {
    animation-play-state: paused;
  }
</style>

<div class="logo-marquee bg-[#f58220] py-10 overflow-hidden">
  <div class="flex overflow-hidden">
    <!-- Track (contains 2 copies inside) -->
    <div class="flex shrink-0 items-center gap-12 loop-scroll"
         style="--duration: 18s;">
      <!-- ✅ COPY 1 -->
      <div class="flex shrink-0 items-center gap-12">
        <!-- Your Logos -->
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo1.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo2.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo3.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo4.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo5.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo6.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo7.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo8.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo9.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo10.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo11.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo12.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo13.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo14.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo15.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo16.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo17.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo18.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo19.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo20.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo21.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo22.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
      </div>

      <!-- ✅ COPY 2 (same as copy 1) -->
      <div class="flex shrink-0 items-center gap-12" aria-hidden="true">
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo1.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo2.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo3.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo4.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo5.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo6.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo7.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo8.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo9.png"  class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo10.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo11.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo12.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo13.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo14.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo15.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo16.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo17.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo18.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo19.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo20.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo21.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/logo22.png" class="h-20 shrink-0 brightness-0 invert" alt="" />
      </div>
    </div>
  </div>
</div>
<?php /**PATH /home/eggfirst/public_html/resources/views/components/client-logo.blade.php ENDPATH**/ ?>