/* ===== Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
  font-family: 'Segoe UI', sans-serif; 
  background: linear-gradient(to right, #0f2027, #203a43, #2c5364); 
  color: #fff; 
  overflow-x: hidden; 
  perspective: 2000px; 
}
section { padding: 80px 20px; text-align: center; }

/* ===== Hero ===== */
.hero {
  height: 100vh;
  background: url('https://images.unsplash.com/photo-1605296867304-46d5465a13f1?auto=format&fit=crop&w=1350&q=80') no-repeat center/cover;
  display: flex; justify-content: center; align-items: center;
  position: relative;
  transform-style: preserve-3d;
}
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.hero-content { position: relative; z-index: 1; transform: translateZ(80px); }
.hero h1 { font-size: 4rem; text-shadow: 0 0 20px #00ffcc; }
.btn-group { margin-top: 20px; }
.btn {
  padding: 12px 24px; margin: 10px;
  background: #00ffcc; border: none; border-radius: 10px;
  cursor: pointer; transition: transform 0.4s, box-shadow 0.4s;
  font-weight: bold;
}
.btn:hover { 
  transform: scale(1.2) rotateX(20deg); 
  box-shadow: 0 10px 25px rgba(0,255,204,0.6); 
}

/* ===== Workouts ===== */
.card-container { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; perspective: 1500px; }
.card { width: 280px; height: 350px; position: relative; transform-style: preserve-3d; transition: transform 1s; cursor: pointer; }
.card:hover { transform: rotateY(180deg) rotateX(10deg) scale(1.05); }
.card .front, .card .back {
  position: absolute; width: 100%; height: 100%; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center;
  background: #1e2a38; border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.6); padding: 15px;
}
.card .card-image { width: 100%; height: 180px; overflow: hidden; border-radius: 12px; }
.card .card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transform: translateZ(40px); }
.card h3 { font-size: 1.3rem; margin-top: 10px; }
.card .back { transform: rotateY(180deg); padding: 20px; justify-content: center; }

/* ===== Yoga Auto-Scrolling 3D ===== */
.carousel {
  overflow: hidden;
  width: 90%;
  margin: 0 auto;
  perspective: 1500px;
}
.carousel-track {
  display: flex;
  gap: 30px;
  animation: scroll 20s linear infinite;
}
.carousel-item {
  min-width: 250px;
  background: #334;
  padding: 40px;
  border-radius: 20px;
  transform: rotateY(-15deg) translateZ(60px);
  transition: transform 0.5s;
  color: #00ffcc;
  text-align: center;
}
.carousel-item:hover {
  transform: rotateY(0deg) scale(1.1) translateZ(100px);
}
.carousel-item h3 {
  font-size: 2rem;
  margin-bottom: 10px;
}
.carousel-item p {
  font-size: 1.1rem;
  line-height: 1.6;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* adjust based on number of items */
}

/* ===== Weight Loss Plans ===== */
.slider { margin: 40px auto; width: 80%; max-width: 700px; }
.plan-card { margin-top: 30px; padding: 30px; border-radius: 16px; background-size: cover; background-position: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.8); text-align: left; min-height: 300px; transition: all 0.6s ease-in-out; transform: rotateY(-10deg) rotateX(5deg); }
.plan-card:hover { transform: rotateY(0deg) rotateX(0deg) scale(1.05); }
.plan-card h3 { font-size: 2rem; margin-bottom: 15px; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
.plan-card p { font-size: 1.1rem; line-height: 1.6; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }

/* ===== Nutrition ===== */
.info-cards { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; perspective: 1500px; }
.info { width: 280px; background: #334; padding: 20px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.6); transform: rotateY(-8deg) translateZ(40px); transition: transform 0.4s; }
.info:hover { transform: rotateY(0) scale(1.1) translateZ(80px); }
.info img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; margin-bottom: 15px; }
.info h3 { margin-bottom: 10px; }

/* ===== Footer ===== */
footer { background: #111; padding: 30px 20px; text-align: center; transform: translateZ(40px); }
footer .socials { margin-bottom: 10px; }