.slider-container {
  width: 100%;
  height: 80vh; /* Adjust the height as needed */
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.slides {
  display: flex;
  height:100%;
  transition: transform 0.5s ease!important;
}

.slide {
  min-width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: none; /* Hide all slides initially */
  position: relative; /* Needed for positioning text container */
 transform: translateX(100%); /* Start from the right */
  transition: opacity 0.5s ease, transform 0.5s ease;  
}

.slide p {font-size: 1.15rem; margin-bottom: 2rem;}

.slide.active {
  display: block!important; /* Only show the active slide */
 opacity: 1; /* Show active slide */
  transform: translateX(0); /* Slide in */}

.slide-text-container {
  position: absolute;
  bottom: 40%;
  left: 10vw;
  background: rgba(0, 0, 0, 0.67); /* Semi-transparent background for text */
  color: white!important;
  padding: 3rem;
  width: 100%;
  max-width: 500px;
  display: none; /* Hide all text containers initially */
  transition: opacity 0.5s ease; /* Smooth transition for text container */
  border-radius: 5px;
}

.slide-text-container .subtitle  {color: #fff;}


.slide-text-container.active {
  display: block; /* Show only the active text container */
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  cursor: pointer;
  z-index: 1000; /* Ensure arrows are above other elements */
  user-select: none; /* Prevent text selection */
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8); /* Darken arrows on hover for better visibility */
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .slide-text-container {
    padding: 10px;
    bottom: 10px;
    left: 10px;
    max-width: none; /* Allow text container to take necessary width */
  }

  .prev, .next {
    padding: 5px;
  }
}