/* Hero Section */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: url('path/to/your-hero-image.jpg') no-repeat center/cover; /* Replace with your image */
}
.hero-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(rgba(255,105,180,0.5), rgba(255,105,180,0.3)), url('path/to/your-hero-image.jpg') center/cover;
  transform: translateZ(0); /* For parallax */
}
.hero-content {
  text-align: center;
  color: white;
  z-index: 2;
  max-width: 800px;
  padding: 0 2rem;
}
.hero h1 { font-size: 3rem; margin-bottom: 1rem; animation: fadeInUp 1s ease; }
.hero p { font-size: 1.2rem; margin-bottom: 2rem; animation: fadeInUp 1s ease 0.2s both; }
.btn {
  display: inline-block;
  padding: 1rem 2rem;
  margin: 0 0.5rem;
  text-decoration: none;
  border-radius: 5px;
  transition: transform 0.3s, box-shadow 0.3s;
  animation: fadeInUp 1s ease 0.4s both;
}
.btn-primary {
  background: #FF69B4;
  color: white;
}
.btn-secondary {
  background: transparent;
  color: white;
  border: 2px solid white;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Parallax Effect */
@media (min-width: 768px) {
  .hero-bg { will-change: transform; }
}