.carousel {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.carousel-item {
  position: absolute;
  width: 300px;
  height: 200px;
  background-color: #61dafb;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: white;
  transform-origin: center center;
  transition: transform 0.5s ease-in-out;
  transform-style: preserve-3d;
  border-radius: 10px;
}

.carousel-item.active {
  opacity: 1;
  transform: rotateY(0deg) translateX(0) scale(1.2);
}

.carousel-item.left {
  opacity: 0.5;
  transform: rotateY(-30deg) translateX(-300px) scale(0.8);
}

.carousel-item.right {
  opacity: 0.5;
  transform: rotateY(30deg) translateX(300px) scale(0.8);
}

let items = document.querySelectorAll(".carousel-item");
let currentIndex = 0;

function updateCarousel() {
  items.forEach((item, index) => {
    item.classList.remove("active", "left", "right");
  });

  let previousIndex = (currentIndex - 1 + items.length) % items.length;
  let nextIndex = (currentIndex + 1) % items.length;

  items[currentIndex].classList.add("active");
  items[previousIndex].classList.add("left");
  items[nextIndex].classList.add("right");
}

function nextSlide() {
  currentIndex = (currentIndex + 1) % items.length;
  updateCarousel();
}

updateCarousel();
setInterval(nextSlide, 2000);