/* body {
  margin: 0;
  background: #acacac;
  overflow: hidden;
  font-family: Poppins, sans-serif;
} */

.carousel-container-3d {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2000px;
  top: 0px !important;

  /* margin: 100px; */
  /* background: #acacac; */
  /* overflow: hidden; */
  font-family: Poppins, sans-serif;
}
.carousel-bg{
  background-image: linear-gradient(to top left, #000000, #dddddd);
}

.carousel-3d {
  width: 350px;
  height: 245px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 50s linear infinite;
}

@keyframes rotate {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

.card-3d {
  width: 250px;
  height: 350px;
  position: absolute;
  left: 10%;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 36deg)) translateZ(500px);
  border-radius: 20px;
  overflow: hidden;
  padding: 10px;
  background: rgba(10 10 10 / 15%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  text-align: center;
  transition: 0.4s ease;
}

.card-3d:hover {
  transform: rotateY(calc(var(--i) * 36deg)) translateZ(440px) scale(1.1);
  z-index: 10;
}

.card-3d img {
  width: 100%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,0.6));
}

.card-3d h3 {
  margin-top: 10px;
  color: #ffe600;
  font-size: 20px;
  letter-spacing: 1px;
}


/* ------------------------------------------------------------
     RESPONSIVE DESIGN
------------------------------------------------------------- */

/* 📱 MOBILE (Small Screens) */
@media (max-width: 480px) {

  .carousel-3d {
    width: 250px;
    height: 350px;
  }

  .card-3d {
    width: 180px;
    height: 260px;
    top: 0;
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(320px);
  }

  .card-3d:hover {
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(340px) scale(1.05);
  }

  .card-3d h3 {
    font-size: 16px;
  }
}

/* 📱📲 LARGE MOBILE + TABLETS */
@media (min-width: 481px) and (max-width: 768px) {

  .carousel-3d {
    width: 300px;
    height: 380px;
  }

  .card-3d {
    width: 200px;
    height: 290px;
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(380px);
  }

  .card-3d:hover {
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(410px) scale(1.07);
  }

  .card-3d h3 {
    font-size: 18px;
  }
}

/* 💻 SMALL LAPTOPS */
@media (min-width: 769px) and (max-width: 1024px) {

  .carousel-3d {
    width: 330px;
    height: 430px;
  }

  .card-3d {
    width: 220px;
    height: 310px;
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(440px);
  }
}

/* 🖥 DESKTOP (Everything looks perfect already) */
@media (min-width: 1400px) {
  .card-3d {
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(600px);
  }
}