review auto slider

<!-- Include Slick Carousel CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />

<style>
    .testimonial-slider-section {
        max-width: 1200px;
        margin: auto;
        padding: 40px 20px;
        font-family: 'Arial', sans-serif;
    }

    .testimonial-slider-section h2 {
        text-align: center;
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 30px;
    }

    .testimonial-card {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        margin: 10px;
        text-align: left;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .testimonial-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .testimonial-header img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
    }

    .testimonial-name {
        font-weight: bold;
        color: #0e0e64;
        font-size: 16px;
    }

    .testimonial-location {
        font-size: 13px;
        color: #666;
    }

    .stars {
        margin: 10px 0;
        color: #ffb700;
        font-size: 16px;
    }

    .testimonial-text {
        font-size: 14px;
        color: #444;
        line-height: 1.5;
    }

    .recommend-product {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
        font-size: 13px;
        color: #666;
    }

    .recommend-product img {
        height: 50px;
        width: auto;
    }

    .shop-link {
        font-weight: bold;
        text-transform: uppercase;
        color: #000;
        font-size: 13px;
        text-decoration: none;
    }

    .slick-prev,
    .slick-next {
        background: #000;
        color: #fff;
        border-radius: 4px;
        z-index: 1;
        width: 30px;
        height: 30px;
    }

    .slick-prev::before,
    .slick-next::before {
        color: #fff;
        font-size: 20px;
    }

    @media (max-width: 768px) {
        .testimonial-card {
            margin: 0 10px;
        }
    }
</style>

<div class="testimonial-slider-section">
    <h2>Customer Testimonials</h2>
    <div class="testimonial-slider">
        <!-- Slide 1 -->
        <div class="testimonial-card">
            <div class="testimonial-header">
                <img src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/imgi_136_Brightning_serum.jpg?v=1751611040" alt="Kimaya" />
                <div>
                    <div class="testimonial-name">Kimaya Vartak</div>
                    <div class="testimonial-location">Mumbai</div>
                </div>
            </div>
            <div class="stars">★★★★★</div>
            <p class="testimonial-text">
                Pilgrim Hair Growth Serum has my heart. I tried their night cream first and thought of exploring
                haircare products too. No looking back from that! Must try.
            </p>
            <div class="recommend-product">
                <img
                    src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/imgi_173_imgi_14_Advanced-HGS-_30ml_---Korean-Black-Rice-_1500x1500_-1.3-White-background-_texture.jpg?v=1751610545" />
                <div>
                    Kimaya recommends this product<br />
                    <a href="https://hemieva.myshopify.com/products/demo-copy-copy-copy" class="shop-link">SHOP NOW »</a>
                </div>
            </div>
        </div>

        <!-- Slide 2 -->
        <div class="testimonial-card">
            <div class="testimonial-header">
                <img src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/imgi_136_Brightning_serum.jpg?v=1751611040" alt="Sakshi" />
                <div>
                    <div class="testimonial-name">Sakshi Singh</div>
                    <div class="testimonial-location">Delhi</div>
                </div>
            </div>
            <div class="stars">★★★★★</div>
            <p class="testimonial-text">
                French Red Vine Range is soooo good! The fragrance is heavenly but my personal fav is the brightening
                serum. It worked on my pigmentation within weeks!
            </p>
            <div class="recommend-product">
                <img
                    src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/imgi_173_imgi_14_Advanced-HGS-_30ml_---Korean-Black-Rice-_1500x1500_-1.3-White-background-_texture.jpg?v=1751610545" />
                <div>
                    Sakshi recommends this product<br />
                    <a href="https://hemieva.myshopify.com/products/demo-copy-copy-copy" class="shop-link">SHOP NOW »</a>
                </div>
            </div>
        </div>

        <!-- Slide 3 -->
        <div class="testimonial-card">
            <div class="testimonial-header">
                <img src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/imgi_136_Brightning_serum.jpg?v=1751611040" alt="Tuhina" />
                <div>
                    <div class="testimonial-name">Tuhina</div>
                    <div class="testimonial-location">Bengaluru</div>
                </div>
            </div>
            <div class="stars">★★★★★</div>
            <p class="testimonial-text">
                Saw the viral gold mask on Insta and ordered it with gold serum. The glow I get using these products is
                lovely! I’ve recommended it to many friends.
            </p>
            <div class="recommend-product">
                <img
                    src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/imgi_173_imgi_14_Advanced-HGS-_30ml_---Korean-Black-Rice-_1500x1500_-1.3-White-background-_texture.jpg?v=1751610545" />
                <div>
                    Tuhina recommends this product<br />
                    <a href="https://hemieva.myshopify.com/products/demo-copy-copy-copy" class="shop-link">SHOP NOW »</a>
                </div>
            </div>
        </div>

        <!-- Slide 4 -->
        <div class="testimonial-card">
            <div class="testimonial-header">
                <img src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/imgi_136_Brightning_serum.jpg?v=1751611040" alt="Pranjal" />
                <div>
                    <div class="testimonial-name">Pranjal Dave</div>
                    <div class="testimonial-location">Pune</div>
                </div>
            </div>
            <div class="stars">★★★★☆</div>
            <p class="testimonial-text">
                I saw reels about Glow Moisturizer and a friend recommended it too. Loved it so much! Squalane range is
                a must-have for dry skin!
            </p>
            <div class="recommend-product">
                <img
                    src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/imgi_173_imgi_14_Advanced-HGS-_30ml_---Korean-Black-Rice-_1500x1500_-1.3-White-background-_texture.jpg?v=1751610545" />
                <div>
                    Pranjal recommends this product<br />
                    <a href="https://hemieva.myshopify.com/products/demo-copy-copy-copy" class="shop-link">SHOP NOW »</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include Slick Carousel JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script>
    $(document).ready(function () {
        $('.testimonial-slider').slick({
            infinite: true,
            slidesToShow: 2,
            slidesToScroll: 1,
            arrows: true,
            dots: false,
            autoplay: true,
            autoplaySpeed: 3000,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1
                    }
                }
            ]
        });
    });
</script>