header, footer {

    .navbar {
        user-select: none;
        --bs-navbar-nav-link-padding-x: 1rem !important;
        padding: 0;


        .container {
            position: relative;
            height: 100%;

            .navbar-brand {
                color: #fff;

                i {
                    &:before {
                        font-size: 1.8rem;
                    }
                }
            }

            .navbar-toggler {
                border: 0;
                width: 1.5em;
                height: 1.5em;
                position: relative;
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
                -webkit-transition: .5s ease-in-out;
                -moz-transition: .5s ease-in-out;
                -o-transition: .5s ease-in-out;
                transition: .5s ease-in-out;
                cursor: pointer;

                &:focus,
                &:active {
                    outline: none;
                    box-shadow: none;
                    border: none;
                }

                span {
                    display: block;
                    position: absolute;
                    height: 4px;
                    background-color: #fff;
                    opacity: 1;
                    left: 0;
                    -webkit-transform: rotate(0deg);
                    -moz-transform: rotate(0deg);
                    -o-transform: rotate(0deg);
                    transform: rotate(0deg);
                    -webkit-transition: .25s ease-in-out;
                    -moz-transition: .25s ease-in-out;
                    -o-transition: .25s ease-in-out;
                    transition: .25s ease-in-out;
					width: 100%;
                }

                span:nth-child(1) {
                    top: 5px;
                    -webkit-transform-origin: left center;
                    -moz-transform-origin: left center;
                    -o-transform-origin: left center;
                    transform-origin: left center;
                }

                span:nth-child(2) {
                    top: 13px;
                    -webkit-transform-origin: left center;
                    -moz-transform-origin: left center;
                    -o-transform-origin: left center;
                    transform-origin: left center;
                }

                span:nth-child(3) {
                    top: 21px;
                    -webkit-transform-origin: left center;
                    -moz-transform-origin: left center;
                    -o-transform-origin: left center;
                    transform-origin: left center;
                }

                &.open {
                    span:nth-child(1) {
                        -webkit-transform: rotate(45deg);
                        -moz-transform: rotate(45deg);
                        -o-transform: rotate(45deg);
                        transform: rotate(45deg);
                        top: 2px;
                        left: 5px;
                    }

                    span:nth-child(2) {
                        width: 0%;
                        opacity: 0;
                    }

                    span:nth-child(3) {
                        -webkit-transform: rotate(-45deg);
                        -moz-transform: rotate(-45deg);
                        -o-transform: rotate(-45deg);
                        transform: rotate(-45deg);
                        top: 23px;
                        left: 5px;
                    }

                }
            }

            .navbar-collapse {

                @media (max-width: 999px) {
                    z-index: 1050;
                }

                .navbar-nav {
                    /*position: absolute;*/

                    @media (max-width: 999px) {
                        position: relative;
                        padding: 30px 30px 30px 45px;
                        background-color: #FDF9F3;
                        border-radius: 43px;
                        border: 2px solid #a0a0a0;
                        left: 50%;
                        transform: translateX(-50%);
                        z-index: 1050;

                        &:before {
                            content: '';
                            position: absolute;
                            width: 3px;
                            left: 25px;
                            bottom: 30px;
                            top: 30px;

                            background-color: #a0a0a0 !important;
                        }
                    }

                    @media (min-width: 1400px) {
                        right: 40px;
                    }
                }

                .nav-link {
                    white-space: nowrap;
                    font-weight: bold;
                    text-transform: uppercase;

                    @media (max-width: 999px) {
                        color: #a0a0a0;
                    }

                    &:hover {
                        text-decoration: none;
                        color: #5E1E0D;
                    }

                    &.active {
                        color: #5E1E0D !important;
                    }
                }
            }
        }
    }

    .navbar-popover {
        --bs-popover-border-color: #a0a0a0 !important;
        --bs-popover-bg: #F5F5F5 !important;
        --bs-popover-body-padding-x: 5px !important;
        --bs-popover-body-padding-y: 5px !important;

        .popover-body {
            user-select: none;
        }
    }
}