#miSlider {
  height: 60vh;
  overflow: hidden;
  background-color: #ffffff;
}

#miSlider .carousel-inner,
#miSlider .carousel-item {
  height: 100%;
}

#miSlider .carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.slider-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.carousel-caption {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  z-index: 2;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.8s ease-in-out;
}

.carousel-item.active .carousel-caption {
  opacity: 1;
  transform: translateY(0);
}

.carousel-caption h5 {
  font-family: "TommySoftBold", Arial, sans-serif;
  font-size: clamp(1.5rem, 2vw, 2.5rem);
  margin-bottom: 0.5rem;
  color: rgb(103, 103, 103);
  max-width: 100%;
  line-height: 1.2;
  word-wrap: break-word;
  white-space: normal;
}

.carousel-caption p {
  font-family: "TommySoftBold", Arial, sans-serif;
  font-size: clamp(1rem, 1.8vw, 2rem);
  color: white;
  margin-top: 0.5rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
  max-width: 100%;
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  opacity: 1;
  position: relative;
  z-index: 1;
}

.carousel-item.active {
  opacity: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}

.carousel-fade .carousel-item.active {
  transition: opacity 0.3s ease-in-out !important;
}

.carousel-item.active img {
  opacity: 1 !important;
  visibility: visible !important;
}

.carousel-item.active .carousel-caption {
  transition: all 0.4s ease-in-out !important;
}

@media only screen and (max-width: 768px) {
  .carousel-caption {
    top: 20%;
  }

  .carousel-caption .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .carousel-caption h5,
  .carousel-caption p {
    max-width: 90%;
    margin: 0 auto;
  }
}