<!-- 
<div class="ourStorySwiper ourStoryCardSwiperOne">
    <div class="ourStoryCardSwiperOneWrapper swiper-wrapper slides">
        
        <div class="swiper-slide">
            <div class="ourStoryCard ourStoryCardSwiperOne">
                <div class="ourStoryCardHead">
                    <h1>VP - Healthcare Analytics Company</h1>
                </div>
                <div class="ourStoryCardContent">
                    <p>Partnering with Finstein on our HITRUST certification journey was the best decision we made. Their end-to-end support made the entire process smooth and stress-free.</p>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="ourStoryCard ourStoryCardSwiperOne">
                <div class="ourStoryCardHead">
                    <h1>CTO - Financial Services Firm</h1>
                </div>
                <div class="ourStoryCardContent">
                    <p>Finstein's expertise in cybersecurity has been invaluable. Their proactive approach helped us identify and address vulnerabilities before they became issues.</p>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="ourStoryCard ourStoryCardSwiperOne">
                <div class="ourStoryCardHead">
                    <h1>Director - Technology Company</h1>
                </div>
                <div class="ourStoryCardContent">
                    <p>The team at Finstein demonstrated exceptional knowledge in compliance and security. Their guidance helped us achieve our certification goals efficiently.</p>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="ourStoryCard ourStoryCardSwiperOne">
                <div class="ourStoryCardHead">
                    <h1>Director - Technology Company</h1>
                </div>
                <div class="ourStoryCardContent">
                    <p>The team at Finstein demonstrated exceptional knowledge in compliance and security. Their guidance helped us achieve our certification goals efficiently.</p>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="ourStoryCard ourStoryCardSwiperOne">
                <div class="ourStoryCardHead">
                    <h1>CTO - Financial Services Firm</h1>
                </div>
                <div class="ourStoryCardContent">
                    <p>Finstein's expertise in cybersecurity has been invaluable. Their proactive approach helped us identify and address vulnerabilities before they became issues.</p>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="ourStorySwiper ourStoryCardSwiperTwo">
    <div class="ourStoryCardSwiperTwo swiper-wrapper">
        
    </div>
</div>


<div class="swiper swiper-services">
    <div class="swiper-wrapper">
        <div class="swiper-slide ourServicesCard">
            <div class="ourServicesCardImg">
                <img src="./Assets/icons/coin.png" alt="">
            </div>
            <div class="ourServicesCardContent">
                <h1>Identity</h1>
                <p>We help you identify and protect your most valuable assets, including your employees, customers, and suppliers.</p>
            </div>
        </div>
        <div class="swiper-slide ourServicesCard">
            <div class="ourServicesCardImg">
                <img src="./Assets/icons/coin.png" alt="">
            </div>
            <div class="ourServicesCardContent">
                <h1>Identity</h1>
                <p>We help you identify and protect your most valuable assets, including your employees, customers, and suppliers.</p>
            </div>
        </div>
        <div class="swiper-slide ourServicesCard">
            <div class="ourServicesCardImg">
                <img src="./Assets/icons/coin.png" alt="">
            </div>
            <div class="ourServicesCardContent">
                <h1>Identity</h1>
                <p>We help you identify and protect your most valuable assets, including your employees, customers, and suppliers.</p>
            </div>
        </div>
        <div class="swiper-slide ourServicesCard">
            <div class="ourServicesCardImg">
                <img src="./Assets/icons/coin.png" alt="">
            </div>
            <div class="ourServicesCardContent">
                <h1>Identity</h1>
                <p>We help you identify and protect your most valuable assets, including your employees, customers, and suppliers.</p>
            </div>
        </div>
        <div class="swiper-slide ourServicesCard">
            <div class="ourServicesCardImg">
                <img src="./Assets/icons/coin.png" alt="">
            </div>
            <div class="ourServicesCardContent">
                <h1>Identity</h1>
                <p>We help you identify and protect your most valuable assets, including your employees, customers, and suppliers.</p>
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>


<script>
  // document.addEventListener('DOMContentLoaded', () => {
  //   const storySwiper = new Swiper('.ourStoryCardSwiperOne', {
  //     slidesPerView: 'auto',
  //     spaceBetween: 0,
  //     direction: 'vertical',
  //     reverseDirection: true,
  //     slideShadows:false,  
  //     centeredSlides: true,
  //     loop: true,
  //     autoplay: {
  //       delay: 0,
  //       disableOnInteraction: true
  //     },
  //     speed: 5000,
  //     freeMode: true,
  //     // enabled: false,
  //     // freeModeMomentum: true,
  //     // momentum: false,
  //     // momentumBounce: true,
  //   });
  // });

  // document.addEventListener('DOMContentLoaded', () => {
  //   const storySwiper = new Swiper('.ourStoryCardSwiperTwo', {
  //     slidesPerView: 4,
  //     spaceBetween: 0,
  //     direction: 'vertical',
  //     reverseDirection: true,
  //     slideShadows:false,  
  //     // centeredSlides: true,
  //     loop: true,
  //     autoplay: {
  //       delay: 0,
  //       disableOnInteraction: true
  //     },
  //     speed: 5000,
  //     freeMode: true,
  //     // enabled: false,
  //     // freeModeMomentum: true,
  //     // momentum: false,
  //     // momentumBounce: true,
  //   });
  // });
</script> -->



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Marquee Reviews</title>
    <style>
        :root {
            --duration: 20s;
        }

        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        .marquee-container {
            position: relative;
            display: flex;
            width: 300px;
            height: 500px;
            overflow: hidden;
            border: 1px solid rgba(0,0,0,0.1);
            border-radius: 8px;
            background: white;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .marquee {
            position: absolute;
            display: flex;
            flex-direction: column;
            width: 50%;
        }

        .marquee.reverse {
            left: 50%;
        }

        .marquee-inner {
            display: flex;
            flex-direction: column;
            animation: marquee var(--duration) linear infinite;
        }

        .marquee.reverse .marquee-inner {
            animation-direction: reverse;
            /* font-family: ; */
        }

        .marquee-inner:hover {
            animation-play-state: paused;
        }

        @keyframes marquee {
            0% { transform: translateY(0); }
            100% { transform: translateY(-100%); }
        }

        .review-card {
            min-width: 144px;
            min-height: 160px;
            padding: 16px;
            border: 1px solid rgba(0,0,0,0.1);
            border-radius: 12px;
            margin: 8px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: background-color 0.3s;
        }

        .review-card:hover {
            background-color: rgba(0,0,0,0.02);
        }

        .review-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        .review-header img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
        }

        .review-author {
            display: flex;
            flex-direction: column;
        }

        .review-name {
            font-weight: 500;
            font-size: 14px;
        }

        .review-username {
            font-size: 12px;
            color: rgba(0,0,0,0.6);
        }

        .review-body {
            font-size: 14px;
        }

        .gradient-top, .gradient-bottom {
            position: absolute;
            left: 0;
            right: 0;
            height: 100px;
            pointer-events: none;
            background: linear-gradient(to bottom, white, transparent);
        }

        .gradient-top {
            top: 0;
        }

        .gradient-bottom {
            bottom: 0;
            background: linear-gradient(to top, white, transparent);
        }
    </style>
</head>
<body>
    <div class="marquee-container">
        <div class="marquee first-row">
            <div class="marquee-inner"></div>
        </div>
        <div class="marquee reverse second-row">
            <div class="marquee-inner"></div>
        </div>
        <div class="gradient-top"></div>
        <div class="gradient-bottom"></div>
    </div>

    <script>
        const reviews = [
            {
                name: "Jack",
                username: "@jack",
                body: "I've never seen anything like this before. It's amazing. I love it.",
                img: "https://avatar.vercel.sh/jack",
            },
            {
                name: "Jill",
                username: "@jill",
                body: "I don't know what to say. I'm speechless. This is amazing.",
                img: "https://avatar.vercel.sh/jill",
            },
            {
                name: "John",
                username: "@john",
                body: "I'm at a loss for words. This is amazing. I love it.",
                img: "https://avatar.vercel.sh/john",
            }
        ];

        function createReviewCard(review) {
            const card = document.createElement('div');
            card.classList.add('review-card');
            card.innerHTML = `
                <div class="review-header">
                    <img src="${review.img}" alt="${review.name}">
                    <div class="review-author">
                        <span class="review-name">${review.name}</span>
                        <span class="review-username">${review.username}</span>
                    </div>
                </div>
                <blockquote class="review-body">${review.body}</blockquote>
            `;
            return card;
        }

        function populateMarquee() {
            const firstRow = document.querySelector('.first-row .marquee-inner');
            const secondRow = document.querySelector('.second-row .marquee-inner');

            const firstHalf = reviews.slice(0, Math.ceil(reviews.length / 2));
            const secondHalf = reviews.slice(Math.ceil(reviews.length / 2));

            firstHalf.forEach(review => {
                const card = createReviewCard(review);
                firstRow.appendChild(card);
                // Duplicate for continuous scrolling
                firstRow.appendChild(card.cloneNode(true));
            });

            secondHalf.forEach(review => {
                const card = createReviewCard(review);
                secondRow.appendChild(card);
                // Duplicate for continuous scrolling
                secondRow.appendChild(card.cloneNode(true));
            });
        }

        populateMarquee();
    </script>
</body>
</html>





<swiper-container class="blogSwiper"
                            slides-per-view="auto"
                            space-between="100"
                            pagination="true"
                            pagination-clickable="true"
                            navigation="false"
                            centered-slides="true"
                            speed="1000"
                            autoplay="false"    
                            free-mode="false"
                            initial-slide="0"
                            breakpoints='{
                                "320": {
                                    "slidesPerView": 1,
                                    "spaceBetween": 0,
                                    "centeredSlides": "true",
                                    "navigation": "false"
                                },
                                "480": {
                                    "slidesPerView": 1,
                                    "spaceBetween": 0,
                                    "centeredSlides": "true",
                                    "navigation": "false"
                                },
                                "640": {
                                    "slidesPerView": 2,
                                    "spaceBetween": 200,
                                    "navigation": "false",
                                    "centeredSlides": "true"
                                },
                                "800": {
                                    "centeredSlides": "true",
                                    "slidesPerView": 2,
                                    "spaceBetween": 200,
                                    "navigation": "false"
                                },
                                "960": {
                                    "initialSlide": 0,
                                    "slidesPerView": 3,
                                    "spaceBetween": 200,
                                    "navigation": "false"
                                },
                                "1200":{
                                    "initialSlide": 1,
                                    "slidesPerView": 3,
                                    "spaceBetween": 200
                                },
                                "1600":{
                                    "initialSlide": 1,
                                    "slidesPerView": 4,
                                    "spaceBetween": 100
                                }
                            }'    
                        >
                        
                        
                    </swiper-container>