@media screen and (max-width:960px) {
    .info img{
        height: 100%;
    }

    nav {
        display: none;
    }

    #banner-img {
        display: block;
        height: 70vh;
    }

    header {
        padding: 0px 10vw;
    }

    .o-que-fazemos p{
        width: 80vw;
    }

    .linha {
        width: 60vw;
        height: 1px;
        background-color: #33573a;
    }

    .quem {
        width: 60vw;
    }

    .ficha {
        margin-left: 20vw;

    }

    .images {
        margin-left: 10.7vw;
    }

    .images img {
        width: 25vw;
        height: 30vw;
    }

    video {
        width: 25vw;
        height: 30vw;
        transition: 0.8s;
        margin-left: 1.3vw;
        margin-bottom: 1vw;
    }

    .images img:hover {
        opacity: 0.8;
        scale: 1;
    }

    .xdiv {
        position: absolute;
        top: 55px;
        right: 45px;
        display: none;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        background-color: #326d3d;
        border-radius: 5px;
        color: #fff;
        z-index: 3;
    }

    .instagram {
        width: 4.5vh;
        height: 4.5vh;
        transition: 0.7s;
    }
    
    .instagram:hover {
        width: 5vh;
        height: 5vh;
    }


}

@media screen and (max-width:680px) {
    header {
        padding: 0;
        margin: 0;
    }

    header img {
        width: 90px;
    }

    .info {
        width: 90vw;
        margin-left: 4vw;
        margin-bottom: 5vh;
    }

    #banner-img {
        display: none;
    }

    .infos {
        flex-direction: column;
    }

    nav {
        display: none;
    }

    .o-que-fazemos p{
        width: 80vw;
    }

    .linha {
        width: 60vw;
        height: 1px;
        background-color: #33573a;
    }

    .quem {
        width: 60vw;
    }

    .ficha {
        margin-left: 20vw;

    }

    .images {
        margin-left: 10.7vw;
    }

    .images img {
        width: 25vw;
    }

}