/* General carousel container styles */
.carousel-container {
  flex:1.5;
  overflow: hidden;
  margin: 0 auto;
  position: relative; /* Ensures dots are positioned relative to the carousel */
  padding-bottom: 10px; /* Add space for the dots at the bottom */
}

/* Ensuring the videos are responsive */
.carousel-container .video video {
  width: 100%;
  height: auto; /* Maintain aspect ratio */
  max-width: 100%;
  object-fit: cover;
}

/* Slick dots - place underneath the video */
.slick-dots {
  position: relative; /* Place dots relative to the container, below the video */
  bottom: -20px; /* Move dots slightly below the video */
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10; /* Make sure dots stay visible */
  margin-top: 10px; /* Space between the video and dots */
}

.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

.slick-dots li button:before {
  font-size: 12px; /* Smaller dot size for mobile */
  color: #2b4162; /* Dot color */
}

.slick-dots li.slick-active button:before {
  color: #fff; /* Active dot color */
}

/* Ensure the dots stay visible and properly aligned */
.carousel-container .slick-dots {
  position: relative;
  bottom: -10px;
  width: 100%;
  text-align: center;
  z-index: 10; /* Ensure dots are visible above content */
}

/* Typography and padding adjustments for smaller screens
@media (max-width: 768px) {
  .carousel-container .video {
    padding: 0 10px;
  }
  
  .slick-dots {
    bottom: -15px;
  }
} */

/* For smaller phones (like <576px), further adjustments */
@media (max-width: 576px) {
  .carousel-container {
    width: 100%;
    max-width: 90%;
    padding-bottom: 5px;
  }
  
  .carousel-container .video {
    padding: 0 5px; /* More padding on very small screens */
  }

  /* Slightly bigger dots for small screens */
  .slick-dots li button:before {
    font-size: 24px; /* Increase dot size */
  }
}