

.slide-header {
    background-image: url('../img/AdobeStock_641380750.jpeg');
}

.slide-header-content button {
    display: block; 
    width: 100%;
    margin: 1vw auto;
    color: white;
}

.slide-header-content a {
   background-color: transparent !important;
}

.lane .item-lane-action .title-lane {
    color: black;
}

.lane .item-lane-action {
    min-height: 24.02vw;
}

.slider {
    background-color: white;
    height: 26.0416vw;
    display: flex;
    justify-content: center;
}



.custom-list {
    list-style: none;
    padding-left: 0;
    counter-reset: item; /* Inicializa el contador en 1 */
}

.custom-list li {
    font-size: 1.5vw;
    text-align: left;
    margin-bottom: 0.85vw;
}

.custom-list li::before {
    content: counter(item) ". ";
    counter-increment: item;
    font-size: 24px;
    font-weight: bold;
    margin-right: 5px;
}

.slider-block {
    background-color: white;
}

.slider .slide-active {
    width: 100%;
    background: black;
}

.slide .content-slide .main-content-slide {
    display: none;
}


.slide:has(.link-open-slide) {
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    text-align: center; /* Alineación del texto */
}

.slide .link-open-slide {
    font-size: 65px;
    font-family: "Anton";
    color: black;
    transition: transform 0.3s ease;
    cursor: pointer;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
}

.slide .link-open-slide:hover {
    transform: scale(1.1);
}

.slide-active .content-slide {
    height: 100%;
}

.slide-active .content-slide .background-slide {
    width: 100%; /* Ocupar el ancho completo */
    height: 100%; /* Ocupar la altura completa */
    object-fit: cover ; /* Escalar la imagen para llenar el contenedor */
    opacity: 0.85; /* Establecer la transparencia (ajusta según sea necesario) */
    z-index: 1;
    position: relative;
  }

.main-content-slide * {
    position: relative;
    z-index: 2;
}
.main-content-slide {
    position: relative;
    z-index: 2;
    width: 98%;
    height: 32%;
    top: -32%;
    display: flex;
    flex-direction: row;
}

.content-slide-title-url{
    font-family: "Anton";
    font-size: 80px;
    color: white;
    margin: auto;
    width: 50%;
    transition: transform 0.3s ease;
}

.content-slide-title-url:hover{
    transform: scale(1.075);
    cursor: pointer;
}

.content-slide-description {
    width: 30%;
}

.content-description {
    font-size: 24px;
    font-family: 'Staatliches';
    color: white;
}

.content-description .important-text {
    font-size: 24px;
    font-family: 'Staatliches';
    color: #F0CC24;
}

.content-arrow-url {
    width: 230px;
    height: 56px;
    border: 1px;
    color: white;
    font-family: 'Staatliches';
    font-size: 28px;
    background-color: #F0CC24;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;

}


.img-carrusel {
    width: 36.875vw;
    height: 21.25vw;
}

.separador-carrusel {
    height: 13vw;
}



@media (max-width: 1350px) {
    .content-slide-title-url:hover{
        transform: scale(1.05);
    }

    .slide .link-open-slide {
        font-size: 47px;
    }

    .content-slide-title-url{
        font-size: 70px;
        margin-left: 10px;
        padding-left: 10px;
    }

    #slide-quiero-ser-dubi {
        flex-direction: column;
        height: 1200px !important;
    }

    #conductor {
        width: 45% !important;
        height: 90% !important;
    }
}


@media (max-width: 1050px) {

   .slider-block {
    padding: 0px !important;
    }

}

#google-play-viaja {
    width: 8.8194vw;
    height: 2.8472vw;
    margin-right: 2vw;
}

#apple-store-viaja {
    width: 8.8194vw;
    height: 3vw;
    position: relative;
    top: -0.25vw;
    margin-left: 2vw;
}

.slide-header-content h1 {
    margin: 0%;
}

#img-dubi {
    height: 19.44vw; 
    width: 19.44vw; 
    margin: -6.94vw; 
    margin-left: 8.7vw; 
    padding: -0.485vw;
}

.big-text {
    font-size: 4.1666vw;
    margin-bottom: 1vw;
}

.content-big-text {
    font-size: 1.3888vw;
    max-width: 32.9861vw;
}

@media (max-width: 768px) {


    .flex {
        flex-direction: column;
       }

    .img-header-hidden {
        background-image:   url('../img/AdobeStock_641380750.jpeg');
    }

    .content-big-text {
        padding: 10%;
        text-align: center;
        font-size: 3.375vw;
        max-width: 76.9861vw;
        padding: 5%;
        padding-top: 0%;
    }



    .slider-block {
        padding: 0px !important;
    }


    .big-text {
        font-size: 9.625vw;
    }

    .slider {
        height: auto !important;
        min-height: 0px;
        margin-bottom: 50px !important;
        padding-top: 10px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        width: auto;
    }

    .slide-header-content {
        width: auto;
        padding: 35px;

    }

    .separador-carrusel {
        width: 100%;
        height: 7vw;
        content: url("../img/rayas\ mayor\ diagonales.png");
      }

    .slider-block {
        padding-top: 10px !important;
    }

    #img-dubi {
        height: 50vw ;
        margin: -15vw 20% -20vw 30%;
        width: 50vw !important;
    }

        
    #google-play-viaja {
        width: 35vw;
        height: 11vw;
        margin-right: 2vw;
    }

    #apple-store-viaja {
        width: 37vw;
        height: 12vw;
        position: relative;
        top: -1.125vw;
        margin-left: 2vw;
    }

    .slide-header-content button {
        padding: 2px 10px;
        border-radius: 10px;
        box-shadow: 1px 1px 5px black;
        font-size: 6.25vw;
        margin: 12.5vw 0vw;
        height: 10vw;
    }

    .slide-header {
        height: 600px;
    }

    #download-sites {
        flex-direction: column !important;
        text-align: center;
    }


    .slide-header{
        height: 750px;
    }


    .lane .item-lane-action {
        min-height: 75vw;
    }


    .custom-list li {
        font-size: 4vw;
    }

    .custom-list {
        padding-inline-start: 0%;
        margin: 0.5em  !important;
        width: 100% !important;
    }

    .img-carrusel {
        width: 75.875vw;
        height: 45.25vw;
    }

    #listo {
        font-size: 4.2vw !important;
    }
}
