.slider-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(-45deg, var(--main-color) 50%, var(--third-color) 50%);
}

.owl-carousel .slide {
    position: relative;
    height: 100vh;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.slider-text-wrapper {
    position: absolute;
    bottom: 5%;
    width: 40%;
    text-align: left;
    color: white;
    z-index: 10;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5); /* Fondo negro semitransparente */
    border-radius: 10px;
}

/* Posiciones específicas */
.slide-1 .slider-text-wrapper {
    right: 5%;
    text-align: right;
}

.slide-2 .slider-text-wrapper {
    left: 5%;
}

/* Ajustes para el slide 3 */
.slide-3 .slider-text-wrapper {
    position: absolute;
    bottom: 5%;
    width: 70%;
    text-align: left;
    color: white;
    z-index: 10;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5); /* Fondo negro semitransparente */
    border-radius: 10px;
    left: 5%;
}

.big {
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: white;
}

.small {
    margin: 15px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
}

.small li{
    text-align: left !important;
}

.custom-prev, .custom-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0);
    color: white;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    z-index: 20;
    transition: background 0.3s ease;
}

.custom-prev { left: 20px; }
.custom-next { right: 20px; }

.custom-prev:hover, .custom-next:hover {
    background: var(--third-color);
    color: var(--main-color);
}

/* Slide 1 - Diagonal a la izquierda */
.owl-carousel .slide.slide-1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
    height: 100%;
    background: #F2F609; /* Color azul principal */
    clip-path: polygon(0 0, 100% 0, 60% 100%, 0% 100%);
    z-index: 5;
}

.owl-carousel .slide.slide-1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: 100%;
    background: #15396D; /* Color amarillo */
    clip-path: polygon(0 0, 100% 0, 60% 100%, 0% 100%);
    z-index: 6;
}

/* Slide 2 - Diagonal a la derecha */
.owl-carousel .slide.slide-2::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0; /* Movida a la derecha */
    width: 50%; /* Aumento el tamaño para que sea más visible */
    height: 100%;
    background: #F2F609; /* Color azul principal */
    clip-path: polygon(60% 0, 100% 0, 60% 100%, 0% 100%);
    z-index: 5;
}

.owl-carousel .slide.slide-2::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0; /* Movida a la derecha */
    width: 40%; /* Aumento el tamaño para que sea más visible */
    height: 100%;
    background: #15396D; /* Color amarillo */
    clip-path: polygon(60% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 6;
}

/* Slide 3 - Triángulos en las esquinas */
.owl-carousel .slide.slide-3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50vw solid #F2F609; /* Triángulo amarillo */
    border-top: 50vh solid transparent; /* Triángulo amarillo */
    z-index: 5;
}

.owl-carousel .slide.slide-3::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-right: 50vw solid #15396D; /* Triángulo azul */
    border-bottom: 50vh solid transparent; /* Triángulo azul */
    z-index: 6;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
    .slider-text-wrapper {
        width: 90% !important;
        text-align: center !important;
        margin: auto;
    }

    /* Botones */
    .btn {
        padding: 10px 25px;
    }
}