/* Override theme @layer utilities for mobile captions */
@layer utilities {
  .carousel-caption.d-lg-block,
  .homeslider .caption.d-lg-block,
  .rslides .caption.d-lg-block {
    display: block !important;
  }
}

/* Fallback override for non-layered CSS specificity */
.homeslider .caption,
.carousel-caption {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 1. Target all homepage sliders by HTML structure & IDs */
#carousel,
.homeslider,
[data-ride="carousel"],
.carousel {
  max-height: 450px !important;
  height: 450px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* 2. Target inner slide wrappers */
#carousel .carousel-inner,
.homeslider .carousel-inner,
.carousel-inner,
.carousel-item {
  max-height: 450px !important;
  height: 100% !important;
}

/* 3. Force slide images to crop without distorting */
#carousel img,
.homeslider img,
.carousel img,
.carousel-item img {
  height: 450px !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* 4. Position caption at BOTTOM RIGHT and force mobile visibility */
#carousel .carousel-caption,
.homeslider .caption,
.carousel-caption,
.caption-description {
  display: block !important;
  position: absolute !important;
  top: auto !important;
  bottom: 20px !important;
  right: 20px !important;
  left: auto !important;
  transform: none !important;
  background: rgba(255, 255, 255, 0.6) !important;
  padding: 1.25rem !important;
  border-radius: 8px !important;
  max-width: 400px !important;
  z-index: 10 !important;
  text-align: left !important;
}

#carousel .carousel-caption *,
.homeslider .caption *,
.carousel-caption * {
  color: #000000;
}

/* 5. Mobile Responsiveness adjustments (Screens under 991px) */
@media (max-width: 991.98px) {
  #carousel,
  .homeslider,
  [data-ride="carousel"],
  .carousel,
  #carousel .carousel-inner,
  .homeslider .carousel-inner,
  .carousel-inner,
  .carousel-item,
  #carousel img,
  .homeslider img,
  .carousel img,
  .carousel-item img {
    height: 300px !important;
    max-height: 300px !important;
  }

  #carousel .carousel-caption,
  .homeslider .caption,
  .carousel-caption,
  .caption-description {
    bottom: 10px !important;
    right: 10px !important;
    left: 10px !important;
    max-width: none !important;
    padding: 0.75rem 1rem !important;
    background: rgba(255, 255, 255, 0.65) !important;
  }

  #carousel .carousel-caption h2,
  .carousel-caption h2,
  .carousel-caption .h1 {
    font-size: 1.1rem !important;
    margin-bottom: 0.25rem !important;
  }

  #carousel .carousel-caption p,
  .carousel-caption p {
    font-size: 0.85rem !important;
    margin-bottom: 0 !important;
  }
}
.slider-title {
    color: red;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.slider-sub {
    text-align: center;
}