<section data-component-type="Features" class="trusted-logos-section">
  <style>
    .trusted-logos-section {
      width: 100%;
      padding: 0px 100px 60px;
      background: #ffffff;
      overflow: hidden;
    }

    .trusted-logos-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 80px;
    }

    .trusted-left h2 {
      font-family: "Rajdhani", sans-serif;
      font-style: italic;
      font-weight: 900;
      font-size: 48px;
      line-height: 122%;
      margin-bottom: 20px;
    }

    .trusted-left p {
      font-family: "Michroma", sans-serif;
      font-size: 20px;
      line-height: 32px;
      color: #7e7e7e;
      max-width: 580px;
    }

    .logo-slider-wrapper {
      position: relative;
      width: 100%;
      overflow: hidden;
    }

    .logo-slider-wrapper::before,
    .logo-slider-wrapper::after {
      content: "";
      position: absolute;
      top: 0;
      width: 80px;
      height: 100%;
      z-index: 2;
      pointer-events: none;
    }

    .logo-slider-wrapper::before {
      left: 0;
      background: linear-gradient(to right, #ffffff 0%, transparent 100%);
    }

    .logo-slider-wrapper::after {
      right: 0;
      background: linear-gradient(to left, #ffffff 0%, transparent 100%);
    }

    .logo-slider {
      display: flex;
      width: max-content;
      animation: logo-scroll 18s linear infinite;
    }

    .logo-track {
      display: flex;
      gap: 60px;
      align-items: center;
      padding-right: 60px;
    }

    .logo-item img {
      height: 36px;
      width: auto;
      opacity: 0.9;
      display: block;
    }

    @keyframes logo-scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    @media (max-width: 1024px) {
      .trusted-logos-inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }

    @media (max-width: 768px) {
      .trusted-logos-section {
        padding: 60px 20px;
      }

      .trusted-left h2 {
        font-size: 36px;
      }

      .trusted-left p {
        font-size: 18px;
      }
    }
  </style>

  <div class="trusted-logos-inner">
    <div class="trusted-left">
      <h2
        data-node="trusted_title"
        data-node-type="text"
        data-node-default="Trusted by Over a Million Fits"
      >
        {{trusted_title}}
      </h2>

      <p
        data-node="trusted_description"
        data-node-type="text"
        data-node-default="Where bold style meets everyday comfort. Built for the streets, worn by the culture. A community that grows with every drop."
      >
        {{trusted_description}}
      </p>
    </div>

    <div class="logo-slider-wrapper">
      <div class="logo-slider">
        <div class="logo-track">
          <div class="logo-item">
            <img
              src="{{logo_1}}"
              data-node="logo_1"
              data-node-type="file"
              data-node-default="../assets/Logo (1).png"
            />
          </div>
          <div class="logo-item">
            <img
              src="{{logo_2}}"
              data-node="logo_2"
              data-node-type="file"
              data-node-default="../assets/Logo (2).png"
            />
          </div>
          <div class="logo-item">
            <img
              src="{{logo_3}}"
              data-node="logo_3"
              data-node-type="file"
              data-node-default="../assets/Logo (3).png"
            />
          </div>
          <div class="logo-item">
            <img
              src="{{logo_4}}"
              data-node="logo_4"
              data-node-type="file"
              data-node-default="../assets/Logo (4).png"
            />
          </div>
        </div>

        <div class="logo-track">
          <div class="logo-item">
            <img src="{{logo_1}}" />
          </div>
          <div class="logo-item">
            <img src="{{logo_2}}" />
          </div>
          <div class="logo-item">
            <img src="{{logo_3}}" />
          </div>
          <div class="logo-item">
            <img src="{{logo_4}}" />
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
