document.addEventListener('DOMContentLoaded', function () {
    const grid = document.querySelector('.testimonials-grid');
    const prevButton = document.querySelector('.carousel-button.prev');
    const nextButton = document.querySelector('.carousel-button.next');

    let currentIndex = 0;

    function updateCarousel() {
        const cardWidth = grid.querySelector('.testimonial-card').offsetWidth;
        grid.style.transform = `translateX(-${currentIndex * cardWidth}px)`;
    }

    prevButton.addEventListener('click', () => {
        currentIndex = Math.max(currentIndex - 1, 0); // Prevent going below 0
        updateCarousel();
    });

    nextButton.addEventListener('click', () => {
        const totalCards = grid.children.length;
        const visibleCards = Math.floor(grid.offsetWidth / grid.querySelector('.testimonial-card').offsetWidth);
        currentIndex = Math.min(currentIndex + 1, totalCards - visibleCards); // Prevent going beyond the last card
        updateCarousel();
    });

    window.addEventListener('resize', updateCarousel);

    // Initialize the carousel position
    updateCarousel();
});