/* --- Default (Mobile) Styles --- */

/* Give the carousel a responsive height using aspect ratio */
.carousel-img {
  aspect-ratio: 4 / 3; /* A common aspect ratio for images */
  object-fit: cover; /* Ensures the image covers the area without distortion */
  height: 400px; /* A max-height for mobile */
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* A more subtle gradient that works on mobile */
  background: linear-gradient(to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 100%
  );
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.carousel-item.active .gradient-overlay {
  opacity: 1; /* Simpler opacity toggle */
}

/* Position the caption correctly */
.carousel-caption {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left !important; 
  left: -12% !important; 
  padding-left: 20% !important; 
}

.carousel-caption .text-container {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 1.5s ease;
}

.carousel-item.active .carousel-caption .text-container {
  opacity: 1;
  transform: translateX(0);
}

/* Responsive Font Sizes for Mobile */
.carousel-title-main {
  color: #003152;
  font-size: 8vw; /* Larger font size for mobile */
  font-weight: bold;
  line-height: 1.1;
}

.carousel-subtitle {
  color: #333;
  font-size: 3.5vw; /* Readable subtitle size */
}

#button-training {
  background-color: #003152;
  border: none;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  z-index: 5 !important;
}




/* --- Tablet and Desktop Styles (min-width: 768px) --- */
@media (min-width: 800px) {
  /* Restore larger height for desktop */
  .carousel-img {
    height: 600px;
    aspect-ratio: 16 / 9; /* Widescreen aspect ratio */
  }

  /* Adjust caption position for desktop */
  .carousel-caption {
    width: 50%;
    text-align: center; 
    width: 65% !important;
    padding-left: 20% !important;  
    /* padding-left: 10%; */
  }

  /* Adjust font sizes for desktop */
  .carousel-title-main {
    color: #003152;
    font-size: 4vw; /* Larger font size for mobile */
    font-weight: bold;
    line-height: 1.1;
  }

  .carousel-subtitle {
    font-size: 1.2vw; /* The original subtitle size for desktop */
  }


}