/* Carousel Background */
#carouselExample {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(240, 240, 240, 0.8)); /* Subtle gradient background */
  padding: 20px;
  border-radius: 10px; /* Rounded corners for the carousel */
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* Light shadow around the carousel */
}

/* Image Shadow Effect */
.carousel-img {
  width: 30% !important; /* Increase image size */
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for hover effects */
  margin: 0 1%; /* Space between images */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow around each image */
  border-radius: 5px; /* Round image corners */
}

.carousel-img:hover {
  transform: scale(1.05); /* Zoom in on hover */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); /* Increase shadow on hover */
}

/* Subtle Highlight for the Next and Previous Buttons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(80%); /* Slightly less intense white icons */
  opacity: 0.7; /* Slight transparency for subtle look */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  background-color: rgba(0, 0, 0, 0.2); /* Lighter background on hover */
  border-radius: 50%; /* Rounded hover effect */
  opacity: 0.85; /* Slight increase in opacity on hover */
}

.carousel-control-prev,
.carousel-control-next {
  transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out; /* Smooth hover transition */
}

/* Icon size and visibility */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 30px;
  height: 30px; /* Adjust the icon size */
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  filter: invert(100%); /* Full white icons on hover */
  opacity: 1; /* Full opacity on hover */
}

/* On smaller screens, the images should stack and resize */
@media (max-width: 768px) {
  .carousel-img {
    width: 45% !important; /* Adjust size for mobile */
    margin: 0 auto; /* Center the image */
  }
}

.d-flex {
  padding: 20px;
}

/* Center content for small screens */
@media (max-width: 768px) {
  .d-flex {
    justify-content: center;
  }
}

/* Remove underlines globally */
a, p, div, span, h1, h2, h3, h4, h5, h6 {
  text-decoration: none !important;
}

a:hover {
  text-decoration: none !important;
}