<!-- 🌱 Horizontal Feature Bar -->
<section class="py-4">
  <div class="container">
    <div class="feature-bar d-flex flex-nowrap overflow-auto px-4 py-3 rounded-4">

      <!-- Feature 1 -->
      <div class="feature-item d-flex align-items-center me-4 flex-shrink-0">
        <div class="icon-circle me-2"><i class="fas fa-undo-alt fa-lg"></i></div>
        <span class="feature-text">1 Day Easy Return</span>
      </div>

      <!-- Feature 2 -->
      <div class="feature-item d-flex align-items-center me-4 flex-shrink-0">
        <div class="icon-circle me-2"><i class="fas fa-money-bill-wave fa-lg"></i></div>
        <span class="feature-text">Cash on Delivery</span>
      </div>

      <!-- Feature 3 -->
      <div class="feature-item d-flex align-items-center me-4 flex-shrink-0">
        <div class="icon-circle me-2"><i class="fas fa-tags fa-lg"></i></div>
        <span class="feature-text">Lowest Prices</span>
      </div>

      <!-- Feature 4 -->
      <div class="feature-item d-flex align-items-center me-4 flex-shrink-0">
        <div class="icon-circle me-2"><i class="fas fa-seedling fa-lg"></i></div>
        <span class="feature-text">100% Organic Seeds</span>
      </div>

    </div>
  </div>
</section>

<!-- ✅ CSS -->
<style>
  .feature-bar {
    background: linear-gradient(to right, #f0fff0, #eaffea);
    border: 1px solid #c1eec1;
    box-shadow: 0 3px 15px rgba(0, 128, 0, 0.05);
    white-space: nowrap;
  }

  .feature-item {
    background: #fff;
    padding: 10px 18px;
    border-radius: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .icon-circle {
    background-color: #e6f9ec;
    color: #28a745;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .feature-text {
    font-weight: 600;
    color: #1d1d1d;
    font-size: 16px;
  }

  /* Optional: hide scroll bar on desktop */
  .feature-bar::-webkit-scrollbar {
    display: none;
  }
</style>
