Delivery slider

<style>
  .membership-card {
    border: 1px solid #f05aa3;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    max-width: 700px;
    margin: 0 auto;
    font-family: sans-serif;
    text-decoration: none;
    display: block;
  }

  .card-top {
    display: flex;
    align-items: center;
    padding: 16px;
    position: relative;
  }

  .icon-section img {
    width: 72px;
    height: 72px;
    margin-right: 12px;
  }

  .text-section h4 {
    margin: 0;
    font-size: 16px;
    color: #000;
  }

  .text-section p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #888;
  }

  .count-section {
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 13px;
    color: #333;
  }

  .card-bottom {
    background: linear-gradient(90deg, #f05aa3, #f63b8a);
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 14px;
  }

  /* Responsive */
  @media screen and (max-width: 600px) {
    .card-top {
      flex-direction: row;
      align-items: flex-start;
      /* padding: 16px; */
      padding: 16px 16px 0px 16px;
    }

    .icon-section img {
      margin-bottom: 10px;
      width: 52px;
      height: 52px;
      margin-right: 12px;
    }

    .count-section {
      top: auto;
      /* bottom: 16px; */
      right: 16px;
    }
  }
</style>

<!-- Swiper CSS CDN -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<div class="swiper membership-swiper">
  <div class="swiper-wrapper">

    <!-- Slide 1 -->
    <div class="swiper-slide">
      <a href="#" class="membership-card">
        <div class="card-top">
          <div class="icon-section">
            <img src="https://www.netmeds.com/images/cms/aw_rbslider/slides/1674543378_1614852032_save_more.png"
              alt="icon" />
          </div>
          <div class="text-section">
            <h4>Superfast Delivery</h4>
            <p>high priority delivery for all orders</p>
          </div>
          <div class="count-section">1 / 3</div>
        </div>
        <div class="card-bottom">
          👑 Membership starting from ₹99 for 3 months
        </div>
      </a>
    </div>

    <!-- Slide 2 -->
    <div class="swiper-slide">
      <a href="#" class="membership-card">
        <div class="card-top">
          <div class="icon-section">
            <img src="https://www.netmeds.com/images/cms/aw_rbslider/slides/1676292401_3_delivery.png" alt="icon" />
          </div>
          <div class="text-section">
            <h4>Free Health Tips</h4>
            <p>get expert guidance & tips daily</p>
          </div>
          <div class="count-section">2 / 3</div>
        </div>
        <div class="card-bottom">
          👑 Enjoy wellness benefits with membership
        </div>
      </a>
    </div>

    <!-- Slide 3 -->
    <div class="swiper-slide">
      <a href="#" class="membership-card">
        <div class="card-top">
          <div class="icon-section">
            <img src="https://www.netmeds.com/images/cms/aw_rbslider/slides/1674555154_priority.png" alt="icon" />
          </div>
          <div class="text-section">
            <h4>Free Health Tips</h4>
            <p>get expert guidance & tips daily</p>
          </div>
          <div class="count-section">3 / 3</div>
        </div>
        <div class="card-bottom">
          👑 Enjoy wellness benefits with membership
        </div>
      </a>
    </div>

  </div>
</div>

<!-- Swiper JS CDN -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script>
  var swiper = new Swiper(".membership-swiper", {
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
  });
</script>