/* This class is likely used to set the absolute positioning
   of the text container at the bottom of the slider.
*/
.position-slider-swiper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px; /* Example padding */
  z-index: 10; /* Ensures text is above the image */
}

/* These classes style your custom "previous" arrow button.
   They control its size, position, and appearance.
*/
.swiper-button-prev1 {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;

  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

/* These classes style your custom "next" arrow button.
*/
.swiper-button-next1 {
  position: absolute;
  top: 50%;
  right: 10px; /* Position on the right side */
  transform: translateY(-50%); /* Vertically center it */
  z-index: 10;
  cursor: pointer;

  /* Example button styling */
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

/* Example hover effect for the buttons */
.swiper-button-prev1:hover,
.swiper-button-next1:hover {
  background-color: rgba(255, 255, 255, 1);
}

.swiper-container {
  width: 100%;
  height: 500px; /* Example height */
  /* background: #f0f0f0; */
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  /* background: #fff; */
  /* Center content */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  /* img-fluid from bootstrap will handle max-width and height auto */
  object-fit: contain; /* Use contain to ensure whole image is visible */
  max-height: 100%; /* Ensure image doesn't overflow slide */
} /* User's custom styles */

.silder-one .silder-content .title {
  color: var(--title);
  text-transform: capitalize;
  font-weight: 400;
  /* Added for better visibility on image */
  /* background-color: rgba(255, 255, 255, 0.7); */
  padding: 10px;
  border-radius: 5px;
}
.main-silder-swiper .btn-next,
.main-silder-swiper .btn-prev {
  color: var(--title);
}

/* Adjusting user's slider content position */
.position-slider-swiper {
  position: absolute;
  bottom: 0;
  left: 0; /* Changed from ps-0 to left: 0 */
  right: 0; /* Added to help center container */
  width: 100%;
  z-index: 10; /* Ensure it's above the image */
}

.silder-content {
  /* This was causing the text to be pushed off-screen */
  /* data-swiper-parallax="-40%" */
  width: 100%;
  text-align: center;
  padding-bottom: 20px;
}