.custom-carousel-container {
  position: relative;
  width: 100%; /* Full width for responsiveness */
  max-width: 1256px; /* Maximum width */
  height: 500px; /* Fixed height for now */
  overflow: hidden; /* Hide overflow from images */
  margin: 0 auto; /* Center the container horizontally */
}

.custom-carousel-wrapper {
  display: flex;
  transition: transform 0.5s ease; /* Smooth transition for sliding effect */
}

.custom-carousel-slide {
  min-width: 100%;
  height: 100%; /* Ensure each slide takes the full height */
  box-sizing: border-box;
  position: relative; /* Position relative to control image positioning */
  display: flex; /* Center image in the slide */
  align-items: center;
  justify-content: center;
}

.custom-carousel-slide img {
  width: 100%; /* Scale width to fit container */
  height: auto; /* Maintain aspect ratio */
  max-height: 100%; /* Ensure the image does not exceed the container height */
  object-fit: contain; /* Adjust fit to ensure the whole image is visible */
  display: block; /* Remove extra space below images */
}

.custom-carousel-navigation {
  position: absolute;
  bottom: 10px; /* Position navigation slightly above the bottom */
  left: 50%;
  transform: translateX(-50%); /* Center navigation horizontally */
  display: flex;
  gap: 12px; /* Space between underscores */
}

.custom-carousel-nav-item {
  width: 20px;
  height: 4px;
  background-color: rgba(
    0,
    0,
    0,
    0.5
  ); /* Default background color for inactive items */
  transition: background-color 0.3s;
  cursor: pointer;
}

.custom-carousel-nav-item.active {
  background-color: white; /* Background color for active item */
}

/* Responsive Styles */
@media (max-width: 768px) {
  .custom-carousel-container {
    height: 200px; /* Adjust height for smaller screens */
  }

  .custom-carousel-nav-item {
    width: 15px; /* Smaller underscores for smaller screens */
    height: 3px;
  }
}

@media (max-width: 480px) {
  .custom-carousel-container {
    height: 150px; /* Further adjust height for very small screens */
  }

  .custom-carousel-nav-item {
    width: 12px; /* Even smaller underscores for very small screens */
    height: 2px;
  }
}