/* Main formatiing section */

.swiper {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.swiper-slide {
  /* display: block; */
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.swiper-wrapper-outer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.swiper-wrapper-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.custom-prev,
.custom-next {
  position: absolute;
  bottom: 50%; /* Position at the bottom of the outer wrapper */
  /* transform: translateY(-20%); */
  z-index: 100;
  cursor: pointer;
  font-weight: 200;
  padding : 0.5rem 1rem;
  border-radius: 1rem;
  background-color: rgba(9, 9, 9, 0.4); /* Light background for visibility */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.custom-prev:hover,
.custom-next:hover {
  background-color: rgba(255, 255, 255, 0.7); /* lighten background on hover */
  color: black; /* Change text color on hover for better visibility */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Add a subtle shadow on hover */
  scale: 1.15; /* Slightly enlarge the button on hover */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.custom-prev {
  left: 2rem; /* Position to the left of the outer wrapper */
}

.custom-next {
  right: 2rem; /* Position to the right of the outer wrapper */
}

.swiper {
    /* Optional: override default swiper static position if needed for specific versions/setups */
    position: static;
}