<!-- =============================footer============================= -->
<footer class="footer">
    <div class="container">
        <!-- Contact Info Row -->
        <!-- <div class="row text-center text-md-start mb-5 contact-border">
            <div class="col-md-4 contact-info">
                <i class="fas fa-map-marker-alt"></i>
                <span><strong>Address:</strong>63 Rafi Ahmed street, Kolkata</span>
            </div>

            <div class="col-md-4 contact-info">
                <i class="fas fa-phone"></i>
                <span><strong>Phone:</strong>(00) 875 784 568</span>
            </div>

            <div class="col-md-4 contact-info">
                <i class="fas fa-envelope"></i>
                <span><strong>Email:</strong>info@gmail.com</span>
            </div>
        </div> -->
        <div class="top-margin">
            <!-- Footer Main Row -->
            <div class="row">
                <!-- Logo + About -->
                <div class="col-lg-3 col-md-6 mb-4 footer-logo">
                    <img src="images/logo.png" alt="Logo">
                    <!-- <p class="mt-2">We follow strict hygiene standards and modern processing techniques to maintain
                        consistency, freshness, and quality across all our offerings.</p> -->
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
                        <!-- <a href="#"><i class="fab fa-twitter"></i></a> -->
                    </div>
                </div>

                <!-- Quick Links -->
                <div class="col-lg-2 col-md-6 mb-4">
                    <h5>Quick Links</h5>
                    <ul class="list-unstyled mt-3">
                        <li><a class="menu-link" href="index.php">Home</a></li>
                        <li><a class="menu-link" href="about-us.php">About Us</a></li>
                        <li><a class="menu-link" href="#">Products</a></li>
                        <li><a class="menu-link" href="testimonial.php">Testimonial</a></li>
                        <li><a class="menu-link" href="contact-us.php">Contact Us</a></li>
                    </ul>
                </div>

                <!-- Others -->
                <div class="col-lg-2 col-md-6 mb-4">
                    <h5>Categories</h5>
                    <ul class="list-unstyled mt-3">
                        <li><a class="menu-link" href="#">Namkeen Snacks</a></li>
                        <li><a class="menu-link" href="#">Chanachur & Mixture</a></li>
                        <li><a class="menu-link" href="#">Roasted Snacks</a></li>
                        <li><a class="menu-link" href="#">Traditional Indian Snacks</a></li>
                        <li><a class="menu-link" href="#">Spicy Snacks</a></li>
                    </ul>
                </div>


                <div class="col-lg-2 col-md-6 mb-4">
                    <h5>Others Links</h5>
                    <ul class="list-unstyled mt-3">
                        <!-- <li><a class="menu-link" href="#">Privacy Policy</a></li> -->
                        <li><a class="menu-link" href="#">Terms & Conditions</a></li>
                        <li><a class="menu-link" href="#">Return Policy</a></li>
                        <li><a class="menu-link" href="#">Shipping Policy</a></li>
                        <li><a class="menu-link" href="faq.php">FAQ</a></li>
                    </ul>
                </div>

                <!-- Contact Us -->
                <div class="col-lg-3 col-md-6 mb-4">
                    <h5>Contact Us</h5>
                    <ul class="list-unstyled mt-3">
                        <li><a class="menu-link" href="tel:8250111179"><i class="fas fa-phone"></i> +91 8250111179</a>
                        </li>
                        <li><a class="menu-link" href="mailto:support@lovesofindia.com"><i class="fas fa-envelope"></i>
                                support@lovesofindia.com</a></li>
                        <li><a class="menu-link" href="#"><i class="fas fa-map-marker-alt"></i> Saltia 32 Railgate ,
                                Habra , <br>West Bengal - 743263 , India</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <p>© Copyright Onqanet Technologies. All right reserved</p>
    </div>
</footer>


<!-- ===============================popup content================================ -->

<div class="custom-model-main">
    <div class="custom-model-inner">
        <div class="close-btn">×</div>
        <div class="custom-model-wrap">
            <div class="pop-up-content-wrap">
                <div class="contact-page-form" method="post">
                    <h2>Request a Quote</h2>
                    <form action="contact-mail.php" method="post">
                        <div class="row">
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <input type="text" placeholder="Full Name" name="full_name" required>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <input type="text" placeholder="Company / Business Name" name="company_name">
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <input type="email" placeholder="Email Address" name="email" required>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <input type="text" placeholder="Phone Number" name="phone" required>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <select name="product_type" required>
                                        <option value="">Select Product Type</option>
                                        <option value="dry_ice_pellets">Dry Ice Pellets</option>
                                        <option value="dry_ice_blocks">Dry Ice Blocks</option>
                                        <option value="custom_quantity">Custom Quantity</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <input type="text" placeholder="Required Quantity (kg)" name="quantity">
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <select name="industry">
                                        <option value="">Select Industry</option>
                                        <option value="logistics">Transport & Logistics</option>
                                        <option value="hospitality">Hospitality</option>
                                        <option value="food_production">Food Production</option>
                                        <option value="medical">Medical / Hospitals</option>
                                        <option value="cleaning">Dry Ice Blasting / Cleaning</option>
                                        <option value="education">Education / Research</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="single-input-field">
                                    <input type="date" name="delivery_date">
                                </div>
                            </div>

                            <div class="col-md-12 message-input">
                                <div class="single-input-field">
                                    <textarea placeholder="Additional Requirements / Message" name="message"></textarea>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="single-input-fieldsbtn">
                                    <input type="submit" value="Request a Quote">
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-overlay"></div>
</div>

<!-- ====================================Pop Up================================== -->


<div id="enquiryModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>

        <div class="contact-page-form" method="post">
            <div class="all-heading left-align">
                <h3 class="ml10">
                    <span class="text-wrapper">
                        <span class="letters">Get in Touch</span>
                    </span>
                </h3>
                <p class="ml12">Your Contemporary Living Starts Here</p>
            </div>
            <form action="contact-mail.php" method="post">
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <div class="single-input-field">
                            <input type="text" placeholder="Your Name" name="name" />
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <div class="single-input-field">
                            <input type="email" placeholder="E-mail" name="email" required />
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <div class="single-input-field">
                            <input type="text" placeholder="Phone Number" name="phone" />
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <div class="single-input-field">
                            <input type="text" placeholder="Subject" name="subject" />
                        </div>
                    </div>
                    <div class="col-md-12 message-input">
                        <div class="single-input-field">
                            <textarea placeholder="Write Your Message" name="message"></textarea>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="hvr-radial-out single-input-fieldsbtn">
                            <input type="submit" value="Send Now" />
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>



<!-- ====================================perticle================================== -->

<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script>
particlesJS('particles-js', {
    particles: {
        number: {
            value: 80,
            density: {
                enable: true,
                value_area: 800
            }
        },
        color: {
            value: '#1e6bff'
        },
        shape: {
            type: 'circle',
            stroke: {
                width: 0,
                color: '#000000'
            },
        },
        opacity: {
            value: 0.5,
            random: false,
        },
        size: {
            value: 3,
            random: true,
        },
        line_linked: {
            enable: true,
            distance: 150,
            color: '#1e6bff',
            opacity: 0.4,
            width: 1
        },
        move: {
            enable: true,
            speed: 6,
            direction: 'none',
            random: false,
            straight: false,
            out_mode: 'out',
            attract: {
                enable: false
            }
        }
    },
    interactivity: {
        detect_on: 'canvas',
        events: {
            onhover: {
                enable: true,
                mode: 'repulse'
            },
            onclick: {
                enable: true,
                mode: 'push'
            },
            resize: true
        },
        modes: {
            repulse: {
                distance: 100,
                duration: 0.4
            },
            push: {
                particles_nb: 4
            }
        }
    },
    retina_detect: true
});
</script>
<!-- ===========================header========================================= -->

<script>
const toggler = document.querySelector('.navbar-toggler');
const nav = document.querySelector('#main_nav');
const overlay = document.querySelector('.menu-overlay');

toggler.addEventListener('click', () => {
    overlay.classList.toggle('active');
});

overlay.addEventListener('click', () => {
    nav.classList.remove('show');
    overlay.classList.remove('active');
});
</script>

<script>
window.addEventListener("scroll", function() {
    var header = document.querySelector(".tf-header");

    if (window.scrollY > 120) {
        header.classList.add("sticky");
    } else {
        header.classList.remove("sticky");
    }
});
</script>
<!-- ===================================product slider=============================== -->
<script>
$('.responsive').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 5,
    slidesToScroll: 5,
    responsive: [{
            breakpoint: 1024,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: true,
                dots: true
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
        // You can unslick at a given breakpoint now by adding:
        // settings: "unslick"
        // instead of a settings object
    ]
});
</script>
<!-- ================================category slider============================== -->
<script>
$('.category-slide').slick({
    dots: false,
    arrows: true,
    infinite: false,
    speed: 300,
    slidesToShow: 6,
    slidesToScroll: 6,
    responsive: [{
            breakpoint: 1024,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: true,
                dots: false
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
    ]
});
</script>


<!-- ============================text animation=========================== -->

<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml3');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({
        loop: false
    })
    .add({
        targets: '.ml3 .letter',
        opacity: [0, 1],
        easing: "easeInOutQuad",
        duration: 1000,
        delay: (el, i) => 30 * (i + 1)
    }).add({
        targets: '.ml3',
        opacity: 1,
        duration: 1000,
        easing: "easeOutExpo",
        delay: 1000
    });
</script>
<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml4');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({
        loop: false
    })
    .add({
        targets: '.ml4 .letter',
        opacity: [0, 1],
        easing: "easeInOutQuad",
        duration: 1000,
        delay: (el, i) => 30 * (i + 1)
    }).add({
        targets: '.ml4',
        opacity: 1,
        duration: 1000,
        easing: "easeOutExpo",
        delay: 1000
    });
</script>

<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml5');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({
        loop: false
    })
    .add({
        targets: '.ml5 .letter',
        opacity: [0, 1],
        easing: "easeInOutQuad",
        duration: 1000,
        delay: (el, i) => 30 * (i + 1)
    }).add({
        targets: '.ml5',
        opacity: 1,
        duration: 1000,
        easing: "easeOutExpo",
        delay: 1000
    });
</script>

<!-- =============================all heading======================== -->
<script>
document.querySelectorAll('.ml10').forEach((heading) => {

    const lettersWrapper = heading.querySelector('.letters');

    // Wrap each letter in span
    lettersWrapper.innerHTML = lettersWrapper.textContent.replace(/\S/g,
        "<span class='letter'>$&</span>"
    );

    // Create animation (autoplay false)
    const animation = anime.timeline({
            autoplay: false
        })
        .add({
            targets: heading.querySelectorAll('.letter'),
            rotateY: [-90, 0],
            duration: 1300,
            delay: (el, i) => 45 * i
        });

    // Scroll Trigger
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animation.play();
                observer.unobserve(entry.target); // run once
            }
        });
    }, {
        threshold: 0.5
    });

    observer.observe(heading);

});
</script>



<script>
document.querySelectorAll('.ml12').forEach((textWrapper) => {

    // Wrap every letter
    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g,
        "<span class='letter'>$&</span>"
    );

    // Create animation (no autoplay)
    const animation = anime.timeline({
            autoplay: false
        })
        .add({
            targets: textWrapper.querySelectorAll('.letter'),
            translateX: [40, 0],
            opacity: [0, 1],
            easing: "easeOutExpo",
            duration: 1200,
            delay: (el, i) => 30 * i
        });

    // Scroll Trigger
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animation.play();
                observer.unobserve(entry.target); // run once
            }
        });
    }, {
        threshold: 0.5
    });

    observer.observe(textWrapper);

});
</script>


<!-- ===================================counter=================================== -->
<script>
$(function() {
    var triggered = false;
    var $section = $('.counter-sec'); // check the whole section
    if ($section.length === 0) return; // nothing to do

    function runCounters() {
        $('.counter-number').each(function() {
            var $this = $(this);
            var countTo = parseInt($this.attr('data-count'), 10) || 0;
            $({
                countNum: 0
            }).animate({
                countNum: countTo
            }, {
                duration: 8000,
                easing: 'linear',
                step: function(now) {
                    $this.text(Math.floor(now) + 'K+');
                },
                complete: function() {
                    $this.text(countTo + 'K+');
                }
            });
        });
    }

    function checkScroll() {
        var winHeight = $(window).height();
        var scrollTop = $(window).scrollTop();
        var sectionTop = $section.offset().top;

        // trigger when section enters viewport
        if (!triggered && (scrollTop + winHeight) >= sectionTop) {
            triggered = true;
            runCounters();
        }
    }

    // initial check in case section is already in view
    checkScroll();
    $(window).on('scroll', checkScroll);
});
</script>



<!-- =====================================category==================================== -->

<script>
const cards = document.querySelectorAll('.electro-card');

cards.forEach((card, index) => {
    const arrow = document.createElement('div');
    arrow.classList.add('electro-btn');
    arrow.innerHTML = '→';
    card.appendChild(arrow);

    arrow.addEventListener('click', () => {
        // Reset all cards to default
        cards.forEach((c) => {
            c.classList.remove('active');
            c.querySelector('.electro-more')?.style.setProperty('display', 'none');
            c.querySelector('.electro-btn')?.style.setProperty('display', 'flex');
        });

        // Activate clicked card
        card.classList.add('active');
        arrow.style.display = 'none';
        card.querySelector('.electro-more').style.display = 'block';
    });
});

// Hide arrow and show 'READ MORE' on the first active card by default
const activeCard = document.querySelector('.electro-card.active');
if (activeCard) {
    activeCard.querySelector('.electro-btn').style.display = 'none';
    activeCard.querySelector('.electro-more').style.display = 'block';
}
</script>


<!-- ===========================loader============================ -->
<script>
setTimeout(function() {
    document.getElementById("preloader").style.display = "none";
}, 2000);
</script>

<!-- ==============================testimonial============================== -->
<script>
$(document).ready(function() {
    $("#testimonial-slider").owlCarousel({
        items: 2,
        itemsDesktop: [1024, 2],
        itemsDesktopSmall: [980, 2],
        itemsTablet: [768, 2],
        itemsMobile: [650, 1],
        pagination: true,
        navigation: false,
        slideSpeed: 1000,
        autoPlay: true
    });
});
</script>


<!-- =================================aos============================== -->

<script>
AOS.init({
    duration: 2000
});
</script>


<!-- ====================================gallery============================== -->
<script>
// $('.portfolio-item').isotope({
//  	itemSelector: '.item',
//  	layoutMode: 'fitRows'
//  });

$('.portfolio-menu ul li').click(function() {
    $('.portfolio-menu ul li').removeClass('active');
    $(this).addClass('active');

    var selector = $(this).attr('data-filter');
    $('.portfolio-item').isotope({
        filter: selector
    });
    return false;
});
$(document).ready(function() {
    var popup_btn = $('.popup-btn');
    popup_btn.magnificPopup({
        type: 'image',
        gallery: {
            enabled: true
        }
    });
});
</script>


<!-- =====================================faq================================= -->
<script>
document.querySelectorAll(".qna__item").forEach((item) => {
    const minimizeSiblings = true;
    const question = item.querySelector(".qna__question");
    const answer = item.querySelector(".qna__answer");
    const cssDuration = getComputedStyle(answer).getPropertyValue(
        "--qna-animation-duration"
    );
    const animationDuration = Number.parseInt(
        Number.parseFloat(cssDuration) * (/\ds$/.test(cssDuration) ? 1000 : 1)
    );
    const setHeight = () =>
        answer.style.setProperty(
            "--qna-details-height",
            `${answer.scrollHeight}px`
        );

    item.classList.add("js-details");

    const onClick = (event) => {
        setHeight();

        let isAnimating = true;
        item.classList.toggle("is-open");
        item.classList.add("is-animating");

        setTimeout(() => {
            item.classList.remove("is-animating");
        }, animationDuration);

        if (item.open) {
            event.preventDefault();
            if (isAnimating) return;
            setTimeout(() => {
                item.open = false;
                isAnimating = false;
            }, animationDuration);
        }

        if (!minimizeSiblings) return;

        const siblings = [...item.parentNode.children]
            .filter((el) => el.classList.contains("js-details"))
            .filter((el) => el !== event.target.parentNode);

        for (const el of siblings) {
            el.classList.remove("is-open");
            setTimeout(() => {
                el.open = false;
            }, animationDuration);
        }
    };

    question.addEventListener("click", onClick);
});

// By default, when an answer is expanded, the neighboring ones collapse. This behavior can be disabled by setting the JS variable minimizeSiblings to false.
</script>



<!-- ===================================pop up================================ -->
<script>
$(".Click-here").on("click", function() {
    $(".custom-model-main").addClass("model-open");
});

$(".close-btn, .bg-overlay").on("click", function() {
    $(".custom-model-main").removeClass("model-open");
});
</script>



<!-- ===========================product details============================== -->
<script>
let productImages = document.querySelectorAll(".productPageImagesBar .image");
let productFullImage = document.querySelector(".productPageFullImage img");
let productDots = document.querySelectorAll(".imgDots i");

/* product images */
productImages.forEach((productImage, index) => {
    productImage.addEventListener("click", (event) => {

        productImages.forEach((img) => {
            img.classList.remove("selected");
        })
        productDots.forEach((i) => {
            i.classList.remove("selected");
        })

        productDots[index].classList.add("selected");
        productImage.classList.add("selected");

        productFullImage.src = productImage.children[0].src;
        productFullImage.parentElement.style.setProperty("--img", "url(" + productFullImage.src + ")");

    });
});
productImages[0].click();

/* product dots */
productDots.forEach((productDot, index) => {
    productDot.addEventListener("click", (event) => {
        productImages[index].click();
    });
})


/* distingush color & size prefered */
var sizes = document.querySelectorAll(".productSizes span");
var colors = document.querySelectorAll(".colorsAvailable span");

sizes.forEach((size) => {
    size.addEventListener("click", (e) => {
        sizes.forEach((size) => {
            size.classList.remove("choosedSize");
        });
        size.classList.add("choosedSize");
    });
});
colors.forEach((color) => {
    color.addEventListener("click", (e) => {
        colors.forEach((color) => {
            color.classList.remove("choosedColor");
        });
        color.classList.add("choosedColor");
    });
})
/* */


/* zoom in & out */
let imgZoom = productFullImage.parentElement;
imgZoom.addEventListener("mousemove", (e) => {
    imgZoom.style.setProperty("--display", "block");
    imgZoom.style.setProperty("--zoom-x", `${e.offsetX / imgZoom.offsetWidth * 100}%`);
    imgZoom.style.setProperty("--zoom-y", `${e.offsetY / imgZoom.offsetHeight * 100}%`);
})
imgZoom.addEventListener("mouseout", (e) => {
    imgZoom.style.setProperty("--display", "none");
})
</script>

<!-- ====================================popup============================= -->
<script>
var modal = document.getElementById("enquiryModal");
var btn = document.getElementById("enquiryBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
    document.body.style.overflow = "hidden"; // STOP SCROLL
}

span.onclick = function() {
    modal.style.display = "none";
    document.body.style.overflow = "auto"; // ENABLE SCROLL
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
        document.body.style.overflow = "auto"; // ENABLE SCROLL
    }
}
</script>


<!-- ==============================paragraph============================= -->
<script>
$(document).ready(function() {
    function AddReadMore() {
        //This limit you can set after how much characters you want to show Read More.
        var carLmt = 400;
        // Text to show when text is collapsed
        var readMoreTxt = " ...read more";
        // Text to show when text is expanded
        var readLessTxt = " read less";


        //Traverse all selectors with this class and manupulate HTML part to show Read More
        $(".add-read-more").each(function() {
            if ($(this).find(".first-section").length)
                return;

            var allstr = $(this).text();
            if (allstr.length > carLmt) {
                var firstSet = allstr.substring(0, carLmt);
                var secdHalf = allstr.substring(carLmt, allstr.length);
                var strtoadd = firstSet + "<span class='second-section'>" + secdHalf +
                    "</span><span class='read-more'  title='Click to Show More'>" + readMoreTxt +
                    "</span><span class='read-less' title='Click to Show Less'>" + readLessTxt +
                    "</span>";
                $(this).html(strtoadd);
            }
        });

        //Read More and Read Less Click Event binding
        $(document).on("click", ".read-more,.read-less", function() {
            $(this).closest(".add-read-more").toggleClass("show-less-content show-more-content");
        });
    }

    AddReadMore();
});
</script>

<!-- ==============================testimonial=================================== -->

<script>
(() => {
    const track = document.getElementById('cardsTrack');
    const dots = document.querySelectorAll('.dot');
    let current = 0;

    function goTo(idx) {
        const cards = track.querySelectorAll('.testimonial-card');
        if (!cards[idx]) return;
        current = idx;
        const cardH = cards[0].offsetHeight + 20;
        track.style.transform = `translateY(-${cardH * idx}px)`;
        dots.forEach((d, i) => d.classList.toggle('active', i === idx));
    }

    dots.forEach(dot => {
        dot.addEventListener('click', () => goTo(parseInt(dot.dataset.index)));
    });
})();
</script>

</body>

</html>