
<section
  data-component-type="Banner"
  class="py-8 md:py-12 bg-[#F6F6F6] overflow-hidden"
>
  <div
    class="relative flex overflow-x-hidden"
    data-component-type="Content"
  >

    <!-- LEFT GRADIENT -->
    <div
      class="absolute left-0 top-0 h-full w-[300px] z-20 pointer-events-none
             bg-gradient-to-r from-[#F6F6F6] to-transparent"
      
    ></div>

    <!-- RIGHT GRADIENT -->
    <div
      class="absolute right-0 top-0 h-full w-[300px] z-20 pointer-events-none
             bg-gradient-to-l from-[#F6F6F6] to-transparent"

    ></div>

    <!-- MARQUEE ROW 1 -->
    <div
      class="animate-marquee whitespace-nowrap flex items-center gap-8 md:gap-14"
      
    >

      <div class="flex items-center gap-4 md:gap-6">
        <img
          src="{{logo_1}}"
          data-node="logo_1"
          data-node-type="file"
          data-node-default="../assets/m1.png"
          class="w-full"
        />
      </div>

      <div class="flex items-center gap-4 md:gap-6">
        <img
          src="{{logo_2}}"
          data-node="logo_2"
          data-node-type="file"
          data-node-default="../assets/m5.png"
          class="w-full"
        />
      </div>

      <div class="flex items-center gap-4 md:gap-6">
        <img
          src="{{logo_3}}"
          data-node="logo_3"
          data-node-type="file"
          data-node-default="../assets/m2.png"
          class="w-full"
        />
      </div>

      <div class="flex items-center gap-4 md:gap-6">
        <img
          src="{{logo_4}}"
          data-node="logo_4"
          data-node-type="file"
          data-node-default="../assets/m3.png"
          class="w-full"
        />
      </div>

    </div>

    <!-- MARQUEE ROW 2 -->
    <div
      class="absolute top-0 animate-marquee2 whitespace-nowrap flex items-center gap-8 md:gap-14"
      
    >

      <div class="flex items-center gap-4 md:gap-6">
        <img
          src="{{logo_5}}"
          data-node="logo_5"
          data-node-type="file"
          data-node-default="../assets/m2.png"
          class="w-full"
        />
      </div>

      <div class="flex items-center gap-4 md:gap-6">
        <img
          src="{{logo_6}}"
          data-node="logo_6"
          data-node-type="file"
          data-node-default="../assets/m3.png"
          class="w-full"
        />
      </div>

      <div class="flex items-center gap-4 md:gap-6">
        <img
          src="{{logo_7}}"
          data-node="logo_7"
          data-node-type="file"
          data-node-default="../assets/m4.png"
          class="w-full"
        />
      </div>

      <div class="flex items-center gap-4 md:gap-6">
        <img
          src="{{logo_8}}"
          data-node="logo_8"
          data-node-type="file"
          data-node-default="../assets/m5.png"
          class="w-full"
        />
      </div>

      <div class="flex items-center gap-4 md:gap-6">
        <img
          src="{{logo_9}}"
          data-node="logo_9"
          data-node-type="file"
          data-node-default="../assets/m1.png"
          class="w-full"
        />
      </div>

    </div>

  </div>
</section>

<style>
  @keyframes marquee {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  @keyframes marquee2 {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0%);
    }
  }
  .animate-marquee {
    animation: marquee 25s linear infinite;
  }
  .animate-marquee2 {
    animation: marquee2 25s linear infinite;
  }
</style>
