/* Carousel container */
/* Carousel container */
#carouselExampleControls {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

/* Carousel images */
.carousel-item img {
  width: 100%;
  height: 800px;
  object-fit: cover; /* Ensures the images fit nicely */
  transition: transform 0.4s ease-in-out;
}

/* Image hover effect */
.carousel-item:hover img {
  transform: scale(1.05); /* Slight zoom-in effect on hover */
}

/* Navigation Controls Styling */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for better visibility */
  border-radius: 50%;
  padding: 5px; /* Smaller padding */
}

.carousel-control-prev-icon {
  background-image: url('https://cdn-icons-png.flaticon.com/512/271/271218.png');
  background-size: 100%; /* Custom icon for the previous button */
}

.carousel-control-next-icon {
  background-image: url('https://cdn-icons-png.flaticon.com/512/271/271226.png');
  background-size: 100%; /* Custom icon for the next button */
}

.carousel-control-prev,
.carousel-control-next {
  width: 3%; /* Reduce the width of the controls */
}

/* Make the icons smaller */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 30px; /* Smaller size for the icons */
  height: 30px; /* Smaller size for the icons */
  transition: transform 0.3s ease-in-out;
}

/* Hover effect for the navigation icons */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  transform: scale(1.1); /* Enlarge the icon slightly on hover */
}

/* Adjust carousel indicators */
.carousel-indicators li {
  background-color: #0175d8; /* Custom color for indicators */
}

.carousel-indicators li.active {
  background-color: #025aaa; /* Active state color */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .carousel-item img {
    height: 300px;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 20px; /* Further reduce size on smaller screens */
    height: 20px;
  }
}



/* Center-aligned carousel captions */
.carousel-caption {
  position: absolute; /* Position the caption absolutely */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Shift back to truly center */
  color: white; /* Initial text color */
  text-align: center; /* Center text alignment */
/*  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  padding: 10px 20px; /* Padding around the text */
  border-radius: 5px; /* Rounded corners for the background */
  transition: color 0.5s ease, background 0.5s ease; /* Smooth transition for color and background */
  z-index: 10; /* Ensure caption is on top of the image */
}

/* Change text color and background on hover */
.carousel-item:hover .carousel-caption {
 /* color: #FFD700; /* Change text color to gold on hover */
/*  background: rgba(0, 0, 0, 0.7); /* Darker background on hover */
}



/* Caption styling for larger screens */
@media (min-width: 768px) {
  .carousel-caption h5 {
    font-size: 2.5rem; /* Increase font size for h5 on larger screens */
    font-weight: bold; /* Make the heading bold */
  }

  .carousel-caption p {
    font-size: 1.25rem; /* Increase font size for paragraph */
  }
}

/* Fade in effect for the caption */
.carousel-item {
  transition: opacity 0.5s ease-in-out; /* Smooth fade transition */
}

.carousel-item.active .carousel-caption {
  opacity: 1; /* Show caption */
}

.carousel-item:not(.active) .carousel-caption {
  opacity: 0; /* Hide caption for inactive items */
}