body {
  font-family: 'Poppins', sans-serif;
  background: #f0fdf4;
}

.brand {
  font-family: 'Playfair Display', serif;
}

/* Floating animation */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-25px); }
  100% { transform: translateY(0); }
}

.float-slow {
  animation: float 22s ease-in-out infinite;
}

.float-medium {
  animation: float 28s ease-in-out infinite;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}


.parallax-slow {
  transform: translateY(0);
  transition: transform 0.1s linear;
}
.parallax-image {
  transform: translateY(0);
  transition: transform 0.15s ease-out;
}



/* Glass panel */
.glass {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(16px);
  border-radius: 32px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.12);
}
.banner{
    width: 100%;
    height: 460px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner .slider{
    position: relative;
    width: 180px;
    height: 230px;
    transform-style: preserve-3d;
    transform: perspective(1200px) rotateX(-18deg);
    animation: autoRun 40s linear infinite;
}

@keyframes autoRun{
    from{
        transform: perspective(1200px) rotateX(-18deg) rotateY(0deg);
    }
    to{
        transform: perspective(1200px) rotateX(-18deg) rotateY(360deg);
    }
}

.banner .slider .item{
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform:
        rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg))
        translateZ(420px);
}

/* 🔥 DEPTH MAGIC */
.banner .slider .item{
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* FRONT */
.banner .slider .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.35);
}

/* Visual depth illusion */
.banner .slider{
    --depth-front: translateY(-30px) scale(1.15);
    --depth-middle: translateY(0px) scale(1);
    --depth-back: translateY(40px) scale(0.85);
}