@import url(../colors.css);
@import url(../fonts.css);

#solucion-titulo {
    width: 100%;
    font-family: FiraSans-ExtraBold;
    font-size: 56px;
    padding: 0px;
    margin-top: 70px;
    color: var(--azul-oscuro);
    text-align: left;
}

#main-btn-s{
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: start;
}

#main-btn-s button{
    margin-right: 30px;
}

h2 {
    width: 100%;
    font-family: FiraSans-Bold;
    font-size: 56px;
    padding: 0px;
    color: var(--azul-oscuro);
    text-align: center;
}

.cw-mb {
    margin-bottom: 150px;
}

.cw-padding {
    padding: 0px 10px;
}

.soluciones-imagen {
    width: 100%;
    height: 100%;
    background-image: url(../../media/imagenes/1366_2000.webp);
    background-size: 150%;
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 20px;
}

#imagen-asesoria {
    background-image: url(../../media/imagenes/photo-1516321318423-f06f85e504b3.webp);
    width: 95%;
    margin-left: 5%;
}

#text-md{
    display: block;
}

#text-sm{
    display: none;
}

#degradado-solucion {
    background: rgb(255, 255, 255);
    background: linear-gradient(
        13deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(228, 243, 248, 1) 30%,
        rgba(160, 212, 231, 1) 50%,
        rgba(228, 243, 248, 1) 70%,
        rgba(255, 255, 255, 1) 100%
    );
}

#oracle-imagen {
    width: 100%;
    height: 100%;
    background-image: url(../../media/imagenes/57297.png);
    background-size: 110% 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 20px;
}

@media (max-width: 991px) {
    #solucion-titulo {
        text-align: center;
        margin-top: 30px;
    }

    #main-btn-s{
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    p {
        text-align: center;
    }

    .soluciones-imagen {
        width: 100%;
        height: 400px;
        margin-bottom: 80px;
        margin-top: 80px;
    }

    #oracle-imagen {
        width: 100%;
        height: 400px;
    }

    #footer-info li p{
        text-align: left;
    }
}

@media (max-width: 575px) {
    #main-btn-s{
        width: 100%;
        display:flex;
        flex-direction: column;
        justify-content: center;
    }

    #main-btn-s button{
        margin: 20px 0px;
    }

    #oracle-imagen {
        width: 100%;
        height: 300px;
    }

    #text-md{
        display: none;
    }

    #text-sm{
        display: block;
    }

    #footer-info li p{
        text-align: center;
    }
}