@media screen and (min-width:991px) {
    header.site_header {
        nav {
            .back {
                display: none;
            }
        }
    }
}

@media screen and (max-width:992px) {
    header.site_header {
        .row {
            align-items: center;
            justify-content: space-between;
        }

        .trigger {
            display: flex;
            width: 2rem;
            height: 2rem;
            position: relative;
            z-index: 8;

            &:after,
            &:before,
            span {
                content: "";
                position: absolute;
                top: 50%;
                left: 0;
                width: 100%;
                height: 3px;
                background: var(--dark-color);
                display: flex;
                z-index: 1;
                transition: 0.5s;
            }

            &:after {
                transform: translate(0%, 0.6rem);
            }

            &:before {
                transform: translate(0%, -0.7rem);
                width: 60%;
            }

            span {
                transform: translate(0%, -50%);
                width: 90%;
            }

            &.active {
                &:before {
                    transform: translate(0%, -50%) rotate(45deg);
                    width: 100%;
                }

                &:after {
                    transform: translate(0%, -50%) rotate(-45deg);
                    width: 100%;

                }

                span {
                    width: 0;
                    left: 50%;
                }
            }
        }

        nav {
            .back {
                font-size: 1.5rem;
                color: var(--white);
                margin-bottom: 1rem;
                padding: 1rem;
                border: 1px solid #ffffff1a;
                border-radius: 30%;
                background: #00000036;
                width: max-content !important;
            }

            align-items: stretch !important;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8705882353);
            z-index: 9;
            backdrop-filter: blur(0.3rem);
            justify-content: start !important;
            padding: 2rem;
            transform: translateX(-100%);
            transition: 0.5s;
            overflow: overlay;
            flex-direction: column;

            ul.menu {
                flex-direction: column;
                justify-content: center;
                align-items: start !important;
                width: 100%;

                &>li {
                    width: 100%;
                    margin: 0.3rem 0;

                    &>a {
                        color: var(--white) !important;
                        text-align: left !important;
                        font-size: 1.2rem;
                        line-height: 3rem;
                        padding: 0rem 1rem !important;
                        background: rgba(51, 51, 51, 0.7098039216) !important;
                        border: 1px solid rgba(255, 255, 255, 0.1803921569);
                        justify-content: space-between;
                        border-radius: 0.7rem !important;
                    }
                }
            }

            &.active {
                transform: translateX(0%);
            }
        }
    }
}