Payment Offers slider

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

<!-- Slider Section -->
<div class="offers-container">
    <div class="offers-header">
        <h2>Payment Partner Offers <a href="#">View All</a></h2>
    </div>

    <div class="swiper payment-offers-swiper">
        <div class="swiper-wrapper">

            <!-- Slide 1 -->
            <div class="swiper-slide offer-card">
                <img src="https://cdn.shopify.com/s/files/1/0646/4169/5809/files/1682856824_1676964790_paytm.png?v=1746100031"
                    alt="Paytm Logo" class="offer-logo" />
                <div class="offer-details">
                    <h4>Get Assured Paytm Cashback Between ₹10 and ₹300 on 1st & 3rd Tran...</h4>
                    <p>Till 31st July 2025, get assured Paytm cashback between Rs. 10 and Rs. 300 on a minimum purchase
                        of ..</p>
                </div>
            </div>

            <!-- Slide 2 -->
            <div class="swiper-slide offer-card">
                <img src="https://cdn.shopify.com/s/files/1/0646/4169/5809/files/1740490171_Twidpay__Icon256x256.png?v=1746160204"
                    alt="Coin Icon" class="offer-logo" />
                <div class="offer-details">
                    <h4>Get assured Savings of up to Rs. 150* + Earn up to 16X rewards*..</h4>
                    <p>ALL users get assured Savings of max. Rs. 150 on ONLY one transaction of min. Rs 999 Up to 16X
                        Rewar..</p>
                </div>
            </div>

            <!-- Slide 3 -->
            <div class="swiper-slide offer-card">
                <img src="https://cdn.shopify.com/s/files/1/0646/4169/5809/files/1740490171_Twidpay__Icon256x256.png?v=1746160204"
                    alt="Coin Icon" class="offer-logo" />
                <div class="offer-details">
                    <h4>Get assured Savings of up to Rs. 200* + Earn up to 16X rewards*..</h4>
                    <p>NEW users get assured Savings of max. Rs. 200 on ONLY one transaction of min. Rs 499 Up to 16X
                        Rewar..</p>
                </div>
            </div>

            <!-- Slide 4 -->
            <div class="swiper-slide offer-card">
                <img src="https://cdn.shopify.com/s/files/1/0646/4169/5809/files/1696004008_Free_Charge_ico_02.png?v=1746160204"
                    alt="Coin Icon" class="offer-logo" />
                <div class="offer-details">
                    <h4>Get up to Rs. 35 Freecharge UPI Cashback!..</h4>
                    <p>Get Freecharge UPI Cashback of up to Rs. 35 on a minimum purchase of ANY pro ducts* worth Rs.
                        999. wh..</p>
                </div>
            </div>

            <!-- Slide 5 -->
            <div class="swiper-slide offer-card">
                <img src="https://cdn.shopify.com/s/files/1/0646/4169/5809/files/1739783795_Mobikwik__Icon256x256.png?v=1746160204"
                    alt="Coin Icon" class="offer-logo" />
                <div class="offer-details">
                    <h4>Get up to 10% Cashback with MobiKwik UPI..</h4>
                    <p>Get up to 10% Cashback on a minimum purchase of Rs. 999/- when you pay via MobiKwik UPI. Offer
                        valid..</p>
                </div>
            </div>

        </div>

        <!-- Arrows -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>

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

<script>
    new Swiper('.payment-offers-swiper', {
        slidesPerView: 1.1,
        spaceBetween: 16,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            640: { slidesPerView: 1.4 },
            768: { slidesPerView: 2 },
            1024: { slidesPerView: 3 }
        }
    });
</script>

<!-- CSS -->
<style>
    .offers-container {
        background: #f5f9ff;
        padding: 20px;
        border-radius: 10px;
        font-family: Arial, sans-serif;
    }

    .swiper-slide.offer-card {
        width: 483px !important;
        margin-right: 16px !important;
    }

    .offers-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .offers-header h2 {
        font-size: 24px;
        font-weight: 500;
        line-height: 32px;
        margin: 0 0 5px;
        color: #0b1219;
        padding: 0;
        font-family: sans-serif;
        letter-spacing: 1px;
    }

    .offers-header a {
        color: #1a73e8;
        text-decoration: none;
        font-weight: normal;
        font-size: 24px;
        /* font-weight: 700; */
    }

    .offer-card {
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
    }

    .offer-logo {
        width: 42px;
        height: 36px;
        margin-right: 15px;
        flex-shrink: 0;
        object-fit: contain;
        padding-right: 14px;
        border-right: 1px solid #151b391a;
    }

    .offer-details h4 {
        font-size: 11.5px;
        font-weight: 600;
        margin-bottom: 5px;
        color: #151b39;
        font-family: sans-serif;
    }

    .offer-details p {
        font-size: 11px;
        color: #6f7284;
        margin: 0 16px 0 0;
        font-family: sans-serif;
        line-height: 13px;
    }

    .swiper-button-prev,
    .swiper-button-next {
        background: white;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    }

    @media screen and (max-width: 767px) {
        .offers-header h2 {
            font-size: 15px !important;
            font-weight: 500;
            line-height: 32px;
            margin: 0 0 5px;
            color: #0b1219;
            padding: 0;
            font-family: sans-serif;
            letter-spacing: 1px;
        }

        .offers-header a {
            color: #1a73e8;
            text-decoration: none;
            font-weight: normal;
            font-size: 15px !important;
            /* font-weight: 700; */
        }

        .swiper-slide.offer-card {
            width: 270px !important;
            padding: 12px 16px;
        }

        .offer-logo {
            width: 32px !important;
            height: 32px !important;
            margin-right: 0px !important;
            float: left;
            border-right: 0px solid #151b391a !important;
        }

        .offer-details h4 {
            font-size: 10px !important;
            font-weight: 600;
            margin-bottom: 5px;
            color: #151b39;
            font-family: sans-serif;
            width: 100%;
            overflow: hidden !important;
            /* white-space: nowrap; */
            text-overflow: ellipsis !important;
        }

        .offer-details p {
            font-size: 8px !important;
            color: #6f7284;
            margin: 0 16px 0 0;
            font-family: sans-serif;
            line-height: 13px;
        }
    }
</style>