/* Force the height for the container to be smaller on mobile */
.container {
  position: relative;
  width: 100%;
  height: 70vh; /* Default height for desktop */
  max-height: 600px;
  overflow: hidden;
}

.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Ensures image fills container */
}

.text-overlay {
  position: absolute;
  top: 10%;
  left: 10%;
  z-index: 2;
  color: white;
  padding-right: 15%;
}

/* Force height for smaller screens, !important ensures it overrides other rules */
@media (max-width: 1024px) {
  .container {
    height: 60vh !important;  /* Slightly smaller on tablets */
  }
}

@media (max-width: 768px) {
  .container {
    height: 60vh !important;  /* Adjust this value for smaller screens */
  }

  .text-overlay {
    top: 5%;
    left: 5%;
    font-size: 1rem;
    padding-right: 10%;
  }
}

@media (max-width: 480px) {
  .container {
    height: 150vh !important;  /* Smaller height for mobile to fit better */
  }

  .text-overlay {
    top: 3%;
    left: 3%;
    font-size: 0.9rem;
    padding-right: 5%;
  }
}

/* Remove possible overflow issue caused by slick-carousel container */
.slick-carousel {
  height: auto !important;
  max-height: none !important;
}

/* Removed the CTA styles */
.cta-container {
  display: none;
}

/* Slide link styling to ensure it is clickable */
.slide-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Other styles */
.text-overlay {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 100%;
  z-index: 2;
  color: white;
  padding-right: 15%;
}

/* Rest of the existing styles remain unchanged */

}