USP Effects

<div class="features-wrapper">
  <div class="features-container">
    <div class="feature-item">
      <img src="https://cdn.shopify.com/s/files/1/0721/0886/7822/files/freeshipping.png?v=1736404873" alt="FREE SHIPPING">
      <p>FREE<br>SHIPPING</p>
    </div>
    <div class="feature-item">
      <img src="https://cdn.shopify.com/s/files/1/0721/0886/7822/files/secure_payment.png?v=1736404873" alt="Secure Payment">
      <p>SECURE PAYMENT</p>
    </div>
    <div class="feature-item">
      <img src="https://cdn.shopify.com/s/files/1/0721/0886/7822/files/high_quality.png?v=1736404873" alt="100% QUALITY PRODUCT">
      <p>100% QUALITY PRODUCT</p>
    </div>
    <div class="feature-item">
      <img src="https://cdn.shopify.com/s/files/1/0721/0886/7822/files/customer_support.png?v=1736404873" alt="CUSTOMER SUPPORT">
      <p>CUSTOMER SUPPORT</p>
    </div>
    <!-- Duplicated items for continuous scrolling -->
    <div class="feature-item">
      <img src="https://cdn.shopify.com/s/files/1/0721/0886/7822/files/freeshipping.png?v=1736404873" alt="FREE SHIPPING">
      <p>FREE<br>SHIPPING</p>
    </div>
    <div class="feature-item">
      <img src="https://cdn.shopify.com/s/files/1/0721/0886/7822/files/secure_payment.png?v=1736404873" alt="Secure Payment">
      <p>SECURE PAYMENT</p>
    </div>
    <div class="feature-item">
      <img src="https://cdn.shopify.com/s/files/1/0721/0886/7822/files/high_quality.png?v=1736404873" alt="100% QUALITY PRODUCT">
      <p>100% QUALITY PRODUCT</p>
    </div>
    <div class="feature-item">
      <img src="https://cdn.shopify.com/s/files/1/0721/0886/7822/files/customer_support.png?v=1736404873" alt="CUSTOMER SUPPORT">
      <p>CUSTOMER SUPPORT</p>
    </div>
  </div>
</div>

<style>
  /* Wrapper to hide overflow */
  .features-wrapper {
    overflow: hidden;
    width: 100%;
    background-color: #f9f9f9;
    font-family: 'DM Sans', sans-serif;
  }

  /* Scrolling container */
  .features-container {
    display: flex;
    justify-content: center; /* Center the items on desktop */
    flex-wrap: nowrap;
    transition: transform 0.3s ease-in-out;
  }

  /* Individual feature items */
  .feature-item {
    text-align: center;
    width: 120px;
    flex: 0 0 auto;
    margin: 0 20px; /* Normal space between items */
  }

  .feature-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
    transition: opacity 0.3s;
  }

  .feature-item p {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    transition: color 0.3s;
  }

  /* Hover effect for images and text */
  .feature-item:hover img {
    opacity: 0.8;
  }

  .feature-item:hover p {
    color: #1a6940;
  }

  /* Mobile-specific styles */
  @media (max-width: 768px) {
    .features-container {
      animation: scroll 20s linear infinite; /* Mobile scrolling effect */
      gap: 10px; /* Reduces space between items on mobile */
    }

    .feature-item {
      margin: 0 10px; /* Normal spacing on mobile */
      width: 80px; /* Adjust width for better fit */
    }

    /* Ensure items don't wrap on mobile */
    .features-container {
      flex-wrap: nowrap;
    }
  }

  /* Keyframes for auto-scrolling on mobile */
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%); /* Scroll across all items, making it repeat */
    }
  }
</style>