.custom-carousel {
  max-width: 1450px; /* Limit the width of the carousel */
  margin: auto; /* Center the carousel */
}

/* Carousel images */
.custom-carousel .carousel-item img {
  width: 100%; /* Make sure images fill the width */
  height: 100%;
  max-height: 95vh; /* Prevent excessive height */
  object-fit: contain; /* Ensures full image visibility without cropping */
  padding-bottom:6% ;
}

/* Caption styling */
.carousel-caption p {
  color: grey;
  font-size: 12px;  
}
.navbar a:hover,
  .navbar .active,
  .navbar .active:focus,
  .navbar li:hover>a {
    color: black;
  } 

/* Carousel controls styling */
.carousel-control-prev,
.carousel-control-next {
  width: 10%; /* Control width relative to container */

}

/* Properly position the controls */
.carousel-control-prev {
  left: 0;
}
.carousel-control-next {
  right: 0;
}

/* Change control icons to grey */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: brightness(0) invert(0.5);
}

/* Hover effect for black controls */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  filter: brightness(0);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .custom-carousel .carousel-item img {
    max-height: 250px; /* Make images smaller */
  }
  .carousel-caption {
    bottom: -50px; /* Move caption below image */
  }
  .carousel-control-prev,
  .carousel-control-next {
    width: 8%;
  }
  .carousel-caption p {
    font-size: 5px;
    
  }
}

@media (max-width: 480px) {
  .custom-carousel .carousel-item img {
    max-height: 200px; /* Further reduce image size */
  }
  
  .carousel-caption {
    bottom: -40px; /* Ensure space between image and caption */
  }
  
  .carousel-caption p {
    font-size: 2px;
    
  }
  
  .carousel-control-prev,
  .carousel-control-next {
    width: 6%;
  }
}