html, body {
    overflow-x: hidden;
}

#menu-toggle {
    display: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
}

.seta {
    display: none !important;
}

#fechar {
    display: none !important;
}

@media (max-width: 768px) {


    .seta {
        display: inline-block !important;
    }

    #header {
        padding: 5px 20px;
    }

    #fechar {
        display: block !important;
    }

    #bar.ativo #fechar {
        display: block;
        text-align: left;
        color: white;
        font-size: 30px;
        padding: 0 15px;
    }

    #menu {
        color: white;
    }

    img {
        width: 320px;
        padding-left: 0px;
    }

    #menu-toggle {
        display: block;
    }

    #bar.ativo > ul {
        right: 0;
    }

    /* MENU LATERAL */
    #bar > ul {
        position: fixed;
        top: 0;
        right: -250px;

        width: 250px;
        height: 100%;

        background: rgb(42, 0, 68);

        display: flex;
        flex-direction: column;

        padding-top: 10px;

        transition: 0.3s;

        z-index: 999;
    }

    /* ITENS DO MENU */
    #bar > ul > li {
        width: 100%;
        text-align: left;
        padding: 5px 10px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* LINKS PRINCIPAIS */
    #bar > ul > li > a {
        display: block;
        width: 100%;

        padding: 12px 10px;

        color: white;
        text-decoration: none;

        border-radius: 8px;
    }

    /* SUBMENU */
    .submenu {
        position: static;

        width: 100%;

        display: none;

        flex-direction: column;

        background: rgb(30, 0, 50);

        margin-top: 5px;
        padding: 0;

        border-radius: 8px;

        overflow: hidden;
    }

    .submenu li {
        width: 100%;
        list-style: none;
    }

    .submenu li a {
        display: block;
        width: 100%;

        padding: 12px 15px;

        color: white;
        text-decoration: none;
    }

    .submenu li a:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    /* ABRIR SUBMENU */
    .servicos.active .submenu,
    .contato.active .submenu {
        display: flex;
    }

    .servicos:hover .submenu,
    .contato:hover .submenu {
        display: none;
    }

    .servicos.active:hover .submenu,
    .contato.active:hover .submenu {
        display: flex;
    }
}