/* Hero Section Styles */

.hero-section {
  position: relative;
  height: 100svh;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  border-radius: 0 0 3rem 3rem;
  padding-top: 160px;
}

/* Hero Content Main */
.hero-section .content-main {
  padding: 2rem;
  padding-top: 2rem;
  max-width: 1200px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Carousel */
.carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.carousel-slide.active {
  opacity: 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive */

/* Large tablets - iPad Air, iPad Pro */
@media (max-width: 1024px) {
  .hero-section {
    background: #140506;
  }

  .carousel {
    top: 180px;
  }
}

/* Small tablets - iPad Mini */
@media (max-width: 768px) {
  .hero-section {
    border-radius: 0 0 1.5rem 1.5rem;
    padding-top: 180px;
    min-height: 90vh;
    height: 90vh;
    background: #140506;
  }

  .hero-section .content-main {
    padding: 1.5rem;
  }

  .carousel {
    top: 220px;
  }
}

@media (max-width: 576px) {
  .hero-section {
    border-radius: 0 0 1rem 1rem;
    padding-top: 150px;
    min-height: 85vh;
    height: 85vh;
    background: #140506;
  }

  .hero-section .content-main {
    padding: 1rem;
  }

  .carousel {
    top: 250px;
  }
}

/* Extra small phones like iPhone SE */
@media (max-width: 400px) {
  .carousel {
    top: 280px;
  }
}

.hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(
    to top,
    rgba(58, 12, 15, 1),
    rgba(58, 12, 15, 0.5),
    rgba(58, 12, 15, 0)
  );
}