@media (min-width: 1000px) and (max-width: 1350px){

    /***********************************PORTAFOLIO CONECTA ******************************************/
    #servicios-conecta{
        padding: 2em;
    }

    .servicio-card{
        height: 35em;
        margin-right: 1rem;
        margin-left: 1rem;
    }

    .servicio-card img {
        width: 100%;
        height: 45%;
    }

    .servicio-card  div p:nth-child(2){
        font-size: 1.3rem;
        font-weight: bold;
    }
    
    .servicio-card  div p:nth-child(3) {
        text-align: justify;
        font-size: 1rem;
    }

}

@media (max-width: 1000px) {
    
    *{
        margin: 0;
        padding: 0;
    }

/***********************************HEROE HEADER ******************************************/
    #heroe-banner{
        top: 0;
        border-radius: 0;
    }

    #heroe-banner #container-information{
        left: 0;
        width: 100%;
    }

    #container-information #title-heroe{
        text-align: center;
        width: max-content;
        margin: 0 auto;
        width: 50%;
        font-size: 2.8rem;
        font-weight: 500;
    }

    #container-information #vision-heroe{
        width: max-content;
        text-align: center;
        margin: 0 auto;
        width: 80%;
        margin-top: 2rem;
        font-size: 2rem;
    }

/***********************************SERVICIOS CONECTA******************************************/

    #servicios-conecta{
       top:-3rem;
       padding: 3rem;
    }

    #servicios-conecta section:nth-child(2) #title-section{
        font-size: 2rem;
        text-align: center;
        margin-bottom: 3rem;
    }

    #servicios-conecta section:nth-child(1) button{
        margin-right: 3rem;
        margin-left: 3rem;
    }

    .servicio-card img {
        width: 48%;
        height: 100%;
        border-radius: 2.5rem 0 0 2.5rem;
    }

    .servicio-card  div {
        width: 42%;
    }

    .servicio-card  div p:nth-child(1) {
        font-size: 0.8rem;
        color: #ffc057;
    }
    
    .servicio-card  div p:nth-child(2){
        font-size: 1rem;
        font-weight: bold;
    }
    
    .servicio-card  div p:nth-child(3) {
        text-align: left;
        font-size: 0.8rem;
    }

/***********************************HEROE FOOTER ******************************************/

    #heroe-footer{
        border-radius: 3rem 3rem 0 0;
    }

    #heroe-footer #container-info{
        width: 100%;
        margin-top: 8em;
    }

    #heroe-footer #title-heroe{
        margin-top: 0;
        margin-left: 0;
        width: max-content;
        margin: 0 auto;
        text-align: center;
        font-size: 2.5rem;
    }

    #heroe-footer #vision-heroe{
        width: max-content;
        margin: 0 auto;
    }

    #heroe-footer #vision-heroe .button-section a{
        margin-top: 0;
        margin-left: 0;
        width: max-content;
        padding: 0 1.2em;
        font-size: 1.5em;
    }

/***********************************GENERAL CONECTA******************************************/

    .row-servicio{
        display: flex;
        flex-direction: column;
        justify-content: right;
        margin-top: 0.1rem;
        margin-right: 3rem;
    }
    
    .servicio-card{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 15rem;
        margin-bottom: 1rem;
    }

}