/*
========================================
niveles.css
Colegio Madrid de Veracruz
========================================
*/

/* NIVELES */

.nivel{
    padding:50px 20px;
}

.dos-columnas{
    width:98%;
    max-width:900px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.invertido{
    flex-direction:row-reverse;
}

.imagen{
    flex:.9;
    text-align:center;
}

.nivel-imagen{
    display:block;
    overflow:hidden;
    border-radius:18px;
}

.imagen img{
    width:100%;
    max-width:460px;
    display:block;
    margin:0 auto;
    transition:transform .6s ease;
}

.nivel-imagen:hover img{
    transform:scale(1.05);
}

.texto{
    flex:1.1;
}

.texto h2{
    margin-bottom:18px;
    font:700 46px/46px "Open Sans",sans-serif;
}

.texto h2 a{
    color:#1d5ca8;
    text-decoration:none;
    transition:color .25s ease;
}

.texto h2 a:hover{
    color:#1d70b8;
}

.texto p{
    color:#333333;
    font:400 16px/20px "Open Sans",sans-serif;
    text-align:justify;
}

/* RESPONSIVE */

@media (max-width:900px){

    .nivel{
        padding:40px 20px;
    }

    .dos-columnas,
    .invertido{
        flex-direction:column;
        gap:30px;
    }

    .texto,
    .imagen{
        flex:1;
    }

    .imagen{
        order:-1;
    }

    .imagen img{
        max-width:360px;
    }

    .texto h2{
        font-size:40px;
        line-height:40px;
        text-align:center;
    }

    .texto p{
        font-size:16px;
        line-height:24px;
    }

}

@media (max-width:600px){

    .nivel{
        padding:35px 15px;
    }

    .imagen img{
        max-width:300px;
    }

    .texto h2{
        font-size:32px;
        line-height:34px;
    }

}