.swiper-slide {
 position: relative;
 top: 0px;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 padding-bottom: 30%;
 position: relative;
}

.swiper-slide::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(
  to bottom,
  rgba(0, 0, 0, 0) 0%,
  rgba(0, 0, 0, 0.6) 100%
 );
}

.swiper-slide > div {
 position: relative;
 position: absolute;
 bottom: 20%;
 font-family: "Migelo";
 font-weight: 300;
 font-size: 25px;
}

.swiper-navigation {
 position: relative;
 bottom: -30px;
 width: 100%;
}

.swiper-button-next::after,
.swiper-button-prev::after {
 color: black; /* Cambia el color de las flechas a negro */
 font-size: 25px !important;
 display: flex;
 justify-content: center;
 position: absolute;
}

.swiper-button-next {
 right: 45% !important;
}
.swiper-button-prev {
 left: 45% !important;
}

@media (max-width: 768px) {
 .swiper-slide {
  padding-bottom: 50% !important;
 }
 .swiper-button-next {
  right: 40% !important;
 }
 .swiper-button-prev {
  left: 40% !important;
 }
}