@media only screen and (min-width: 200px) {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
  }

  .carousel-container {
    position: relative;
    width: 100%;
    height: 150vh;
    overflow: hidden;
  }

  .carousel {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .slide.active {
    opacity: 1;
  }

  .slide img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  .slide .caption {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
    width: 100vw;
    height: 690px; /* Minimum height to ensure content fits */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 70px 20px 0;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    transition-delay: 0.9s;
  }

  /* Create the radial gradient background */
  .caption::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      transparent 0%,
      rgba(0, 0, 0, 0.7) 15%,
      rgba(0, 0, 0, 0.8) 50%,
      rgba(0, 0, 0, 0.5) 85%,
      transparent 100%
    );
    z-index: -1;
  }
  .slide.active .caption {
    opacity: 1;
  }

  /* Content wrapper to maintain readable width */
  .caption-content {
    max-width: 800px;
    margin: 0 auto;
  }

  /* Update caption elements to be relative to new structure */
  .caption h2 {
    position: relative;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    transition-delay: 1.2s;
  }

  .caption p {
    position: relative;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    transition-delay: 1.6s;
  }

  .caption .cta-button {
    text-decoration: none;
    position: relative;
    padding: 8px 10px;
    font-size: 20px;
    background-color: #004882;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    transition-delay: 1.8s;
  }

  .slide.active .caption h2,
  .slide.active .caption p,
  .slide.active .cta-button {
    opacity: 1;
    transform: translateY(0);
  }

  .slide:not(.active) .caption h2,
  .slide:not(.active) .caption p,
  .slide:not(.active) .cta-button {
    opacity: 0;
    transform: translateY(-20px);
    transition-delay: 0s;
  }
  .slide .caption h2 {
    font-size: 24px;
    color: #c7dff3;
  }
  .slide .caption p {
    font-size: 18px;
    color: #43c687;
  }
  .cta-button {
    padding: 12px 30px;
    font-size: 1.1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .cta-button:hover {
    background-color: #0056b3;
  }

  .carousel-button {
    position: absolute;
    top: 8%;
    transform: translateY(-50%);
    z-index: 3;
    background-color: #004882a3;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
  }
  .carousel-button i {
    color: #c7dff3;
    font-size: 19px;
  }
  .carousel-button:hover {
    background-color: #00bf63;
  }

  .prev {
    left: 20px;
  }

  .next {
    right: 20px;
  }

  .carousel-dots {
    position: absolute;
    bottom: 495px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 10px;
  }

  .dot {
    width: 17px;
    height: 14px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .dot.active {
    background-color: #43c687;
  }

  .carousel-button {
    padding: 8px 12px;
    font-size: 1rem;
  }
}
@media only screen and (min-width: 360px) {
  .carousel-button {
    top: 20%;
  }
  .slide .caption {
    height: 635px;
  }
  .carousel-dots {
    bottom: 484px;
  }
  .caption::before {
    background: linear-gradient(
      transparent 0%,
      rgba(0, 0, 0, 0.7) 14%,
      rgba(0, 0, 0, 0.8) 50%,
      rgba(0, 0, 0, 0.5) 85%,
      transparent 100%
    );
  }
}
@media only screen and (min-width: 412px) {
  .slide .caption {
    height: 670px; /* Minimum height to ensure content fits */
  }
  .carousel-dots {
    bottom: 510px;
  }
  .caption::before {
    background: linear-gradient(
      transparent 0%,
      rgba(0, 0, 0, 0.7) 13%,
      rgba(0, 0, 0, 0.8) 50%,
      rgba(0, 0, 0, 0.5) 85%,
      transparent 100%
    );
  }
}
@media (min-width: 480px) {
  .caption h2 {
    font-size: 2rem;
  }

  .caption p {
    font-size: 1rem;
  }

  .cta-button {
    padding: 10px 20px;
    font-size: 1rem;
  }

  .carousel-button {
    padding: 10px 15px;
    font-size: 1.2rem;
  }
}
@media only screen and (min-width: 600px) {
  .slide .caption {
    height: 490px;
    padding: 60px 40px 0;
  }
  .carousel-button {
    top: 30%;
  }
  .slide .caption h2 {
    font-size: 31px;
  }
  .slide .caption p {
    font-size: 22px;
  }
  .caption .cta-button {
    font-size: 23px;
  }
  .carousel-dots {
    bottom: 645px;
  }
  .carousel-button i {
    font-size: 25px;
  }
}
@media only screen and (min-width: 712px) {
  .slide .caption {
    padding: 60px 60px 0;
  }
  .carousel-dots {
    bottom: 735px;
  }
}
@media (min-width: 768px) {
  .slide .caption {
    padding: 60px 104px 0;
  }
  .caption h2 {
    font-size: 2.5rem;
  }
  .caption p {
    font-size: 1.2rem;
  }
  .carousel-button {
    font-size: 1.5rem;
    padding: 15px 25px;
    top: 34%;
  }
  .carousel-dots {
    bottom: 660px;
  }
  .slide .caption {
    height: 382px;
  }
}
@media only screen and (min-width: 800px) {
  .slide .caption {
    height: 370px;
  }
  .carousel-dots {
    bottom: 755px;
  }
  .slide .caption {
    padding: 60px 133px 0;
  }
}
@media only screen and (min-width: 912px) {
  .carousel-dots {
    bottom: 892px;
  }
}
@media only screen and (min-width: 1024px) {
  @media only screen and (height: 600px) {
    .slide .caption h2 {
      font-size: 34px;
    }
    .slide .caption p {
      font-size: 23px;
    }
    .carousel-dots {
      bottom: 444px;
    }
    .slide .caption {
      height: 582px;
    }
    .carousel-button {
      top: 19%;
    }
  }
  @media only screen and (height: 1366px) {
    .slide .caption h2 {
      font-size: 46px;
    }
    .slide .caption p {
      font-size: 25px;
    }
    .caption .cta-button {
      font-size: 30px;
    }
    .carousel-dots {
      bottom: 863px;
    }
    .slide .caption {
      height: 430px;
      padding: 79px 133px 0;
    }
  }
}
@media only screen and (min-width: 1280px) {
  .carousel-dots {
    bottom: 551px;
  }
  .slide .caption {
    height: 475px;
  }
  .slide .caption h2 {
    font-size: 37px;
  }
  .slide .caption p {
    font-size: 28px;
  }
  .carousel-button {
    top: 28%;
  }
}
@media only screen and (min-width: 1366px) {
  .carousel-dots {
    bottom: 450px;
  }
  .slide .caption {
    height: 550px;
  }
}
@media only screen and (min-width: 1920px) {
  .carousel-dots {
    bottom: 710px;
  }
}