.carousel-item {
  height: 100vh;
  min-height: 500px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.carousel-item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.carousel-caption {
  z-index: 2;
  bottom: 30%;
}


.carousel-caption h1 {
  font-size: clamp(2rem, 6vw, 4rem);
}

.carousel-caption p {
  font-size: clamp(1rem, 3vw, 1.5rem);
}

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

@media (max-width: 768px) {
  .carousel-caption {
    bottom: 20%;
    text-align: center;
  }
}

.carousel-caption {
  animation: fadeUp 1s ease;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}