.hero-slider .carousel-item {
  height: 70vh;
  min-height: 450px;
  background-color: #000;
}

.hero-slider .carousel-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  opacity: 0.7;
}

.hero-slider .carousel-caption {
  bottom: 25%;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
  z-index: 10;
}

.hero-slider .carousel-caption h1 {
  font-size: 3.5rem;
}

@media (max-width: 768px) {
  .hero-slider .carousel-item {
    height: 60vh;
  }
}

@media (max-width: 768px) {
  .hero-slider .carousel-caption h1 {
    font-size: 2rem;
  }
}