.navbar.nav-crev {
    background-color: transparent !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.nav-font {
    font-size: 1rem;
}

/* nav bar */
@media (max-width: 991px) {
    .--suf-nav {
        display: none;
    }
    .navbar-nav .--suf-nav-item {
        display: flex;
    }

    .navbar-collapse.show {
        height: 300vh;
        display: flex;
        justify-content: start !important;
    }

    .navbar-collapse.show ul {
        flex-grow: 1;
    }

    .navbar-collapse.show .navbar-nav a {
        text-align: center;
        width: 100%;
    }
    .--nav-show {
        padding: 4% 0 100vh 0 !important;
        position: fixed;
    }
    .--nav-show a {
        border-bottom: none !important;
    }

    .group {
        transition: transform 2s;
    }

    .group .top-bar {
        transform: rotate(0deg);
        /*  top: 0px !important; */
        transition: transform 2s ease;
    }
    .--nav-show .group .top-bar {
        transform: rotate(-45deg);
        top: 10px !important;
        transition: transform 2s ease;
    }

    .group .bot-bar {
        transform: rotate(0deg);
        /*   top: 0px !important; */
        transition: transform 2s ease;
    }

    .--nav-show .group .bot-bar {
        transform: rotate(45deg);
        top: 10px !important;
        transition: transform 2s ease;
    }
    .--nav-show .group .mid-bar {
        opacity: 0;
        transition: transform 2s ease;
    }

    .nav-font {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .nav-font {
        font-size: 28px;
    }
}