:root {
    /* CORES: */
    --dark-green: #0D302C;
    --green: #466a5c;
}

@media screen and (min-width: 776px) and (max-width: 992px) {
    span#burguer {
        display: none; 
    }

    header {
        padding-right: 37px;
        max-width: 100%;
        overflow: hidden;
        justify-content: space-between;
    }

    body {
        overflow-x: hidden; 
    }

    nav#itens {
        width: 80%;
        display: flex;
        position: relative;
        justify-content: space-around;

        background-color: transparent;
        box-sizing: border-box;
        justify-content: space-evenly;
        padding-right: 100px;
    }

    nav  a {
        flex: auto;
    }

    nav a:hover {
        background: none;
        padding: 0px;
        margin: 0px;
        border-radius: 0px;
        border-bottom: 5px solid var(--green);
        transform: scale(110%);
        transition: all .5s;
    }

    section#home {
        margin-top: 100px;
        flex-flow: row nowrap;
        justify-content: center;
    }

    section#sobre {
        flex-flow: row nowrap;
        justify-content: center;
    }

    section#serviços {
        max-width: 100px
    }

    section#serviços > div#service {
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
    }

    div.service-box {
        display: inline-block;
        width: calc(100% / 3 - 10px);
    }
}

@media screen and (min-width: 992px) {
    span#burguer {
        display: none; 
    }

    header {
        padding-right: 40px;
        max-width: 100%;
        overflow: hidden;
        justify-content: space-between;
    }

    body {
        overflow-x: hidden; 
    }

    nav#itens {
        width: 80%;
        display: flex;
        position: relative;
        justify-content: space-around;

        background-color: transparent;
        box-sizing: border-box;
        justify-content: space-evenly;
        padding-right: 100px;
    }

    nav  a {
        flex: auto;
    }

    nav a:hover {
        background: none;
        padding: 0px;
        margin: 0px;
        border-radius: 0px;
        border-bottom: 5px solid var(--green);
        transform: scale(110%);
        transition: all .5s;
    }

    section#home {
        margin-top: 100px;
        flex-flow: row nowrap;
        justify-content: center;
    }

    section#sobre {
        flex-flow: row nowrap;
        justify-content: center;
    }

    section#sobre > div p {
        margin-left: 20px;
    }

    section#serviços > div#service {
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
    }

    div.service-box {
        display: inline-block;
        width: calc(100% / 3 - 10px);
        max-width: 400px;
    }
}