.header .navbar-collapse {
    position: fixed;
    inset: 0;
}
.navbar-collapse {
    visibility: hidden !important;
    display: unset !important;
}
.navbar-collapse.show {
    display: flex !important;
}
.navbar-collapse.menu-active {
    visibility: visible !important;
}
header .navbar-collapse {
    --transition-time: 380ms;
    background-color: transparent !important;
}
.navbar-collapse .menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-color: #000;
    transition: transform 300ms ease;
    transform-origin: bottom;
    z-index: 10;
}
.navbar-collapse.menu-active .menu-overlay {
    animation: menu-scale var(--transition-time) ease-out;
    transform-origin: bottom;
}
.navbar-collapse .menu-overlay.menu-leave {
    animation: menu-scale-down var(--transition-time) linear calc(var(--transition-time) * 4);
    transform-origin: top;
}
@keyframes menu-scale {
    from {
        transform: scale(1, 0);
    }
    to {
        transform: scale(1, 1);
    }
}
@keyframes menu-scale-down {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(1, 0);
    }
}

.link-wrapper {
    --delay-difference: calc(var(--transition-time) / 3);
    display: flex;
}
.link-wrapper.link-visible {
    --delay-difference: calc(var(--transition-time) / 2);
}
.inner-container {
    max-width: min(70vw, 1440px);
    margin-inline: auto;
    height: 100vh;
    display: flex;
    align-items: center;
}
.link-wrapper a {
    color: #ffffff;
    overflow: hidden;
    pointer-events: none;
}
.link-wrapper.link-visible a {
    pointer-events: all;
}
.link-wrapper a.nav-link>span {
    display: block;
    opacity: 0;
    transform: translateY(calc(100% + 12px));
    animation: link-disappear var(--transition-time) cubic-bezier(0.550, 0.055, 0.675, 0.190);
    color: #ffffff;
}
.link-wrapper.link-visible a.nav-link>span {
    opacity: 1;
    transform: translateY(0px);
    transition-property: transform;
    animation: link-appear var(--transition-time) ease;
}
.link-wrapper.link-visible .nav-item:hover a.nav-link>span {
    color: #BE9B20;
} 

.link-wrapper li:nth-child(1) a.nav-link>span,
.link-wrapper.link-visible li:nth-child(1) a.nav-link>span {
    transition-delay: calc(var(--transition-time) + (var(--delay-difference) * 0));
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 0));
}
.link-wrapper li:nth-child(2) a.nav-link>span,
.link-wrapper.link-visible li:nth-child(2) a.nav-link>span {
    transition-delay: calc(var(--transition-time) + (var(--delay-difference) * 1));
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 1));
}
.link-wrapper li:nth-child(3) a.nav-link>span,
.link-wrapper.link-visible li:nth-child(3) a.nav-link>span {
    transition-delay: calc(var(--transition-time) + (var(--delay-difference) * 2));
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 2));
}
.link-wrapper li:nth-child(4) a.nav-link>span,
.link-wrapper.link-visible li:nth-child(4) a.nav-link>span {
    transition-delay: calc(var(--transition-time) + (var(--delay-difference) * 3));
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 3));
}
.link-wrapper li:nth-child(5) a.nav-link>span,
.link-wrapper.link-visible li:nth-child(5) a.nav-link>span {
    transition-delay: calc(var(--transition-time) + (var(--delay-difference) * 4));
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 4));
}
.link-wrapper li:nth-child(6) a.nav-link>span,
.link-wrapper.link-visible li:nth-child(6) a.nav-link>span {
    transition-delay: calc(var(--transition-time) + (var(--delay-difference) * 5));
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 5));
}

.link-wrapper li:nth-child(7) a.nav-link>span,
.link-wrapper.link-visible li:nth-child(7) a.nav-link>span {
    transition-delay: calc(var(--transition-time) + (var(--delay-difference) * 6));
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 6));
}
.link-wrapper li:nth-child(8) a.nav-link>span,
.link-wrapper.link-visible li:nth-child(8) a.nav-link>span {
    transition-delay: calc(var(--transition-time) + (var(--delay-difference) * 7));
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 7));
}
@keyframes link-appear {
    from {
        opacity: 0;
        transform: translateY(calc(100% + 12px));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes link-disappear {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-60px);
    }
}

/* control link rotation on enter */
.link-wrapper:not(.link-visible) a {
    animation: link-rotate-exit var(--transition-time) cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
.link-wrapper.link-visible a {
    animation: link-rotate-enter var(--transition-time) ease;
    transform-origin: left;
}
.link-wrapper li:nth-child(1) a {
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 0));
}
.link-wrapper li:nth-child(2) a {
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 1));
}
.link-wrapper li:nth-child(3) a {
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 2));
}
.link-wrapper li:nth-child(4) a {
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 3));
}
.link-wrapper li:nth-child(5) a {
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 4));
}
.link-wrapper li:nth-child(6) a {
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 5));
}
.link-wrapper li:nth-child(7) a {
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 6));
}.link-wrapper li:nth-child(8) a {
    animation-delay: calc(var(--transition-time) + (var(--delay-difference) * 7));
}

@keyframes link-rotate-exit {
    from {
        rotate: 0deg;
        translate: 0 0;
    }
    to {
        rotate: -10deg;
        translate: 0 -10vh;
    }
}
@keyframes link-rotate-enter {
    from {
        rotate: 10deg;
    }
    to {
        rotate: 0deg;
    }
}

/* ---- animation to show sublist ---- */

@keyframes show-submenu {
    from {
        opacity: 0;
        transform: translatey(5vh);
    }
    to {
        opacity: 1;
        transform: translatey(0);

    }
}
.header .menu-block .navbar-collapse ul.nav li:hover .dropdown-menu {
    animation: show-submenu 300ms ease-in;
}
.header .menu-block .navbar-collapse ul.nav li {
    width: fit-content;
}
.header .menu-block .navbar-collapse ul.nav li:hover {
    width: 100%;
}

/* animation for button hover */

.btn-bar {
    overflow: hidden;
    --menu-animation-timing: 1s;
}
button:not(.menu-btn_show) .btn-bar:hover .icon-bar {
    animation: menu-bar-anime var(--menu-animation-timing) ease-in;
}
.btn-bar:hover .icon-bar:nth-of-type(2) {
    animation-delay: 250ms !important;
}
.btn-bar:hover .icon-bar:nth-of-type(4) {
    --menu-animation-timing: 850ms;
    animation-delay: 350ms !important;
}

@keyframes menu-bar-anime {
    0% {
        transform: translateX(0px);
    }
    33% {
        transform: translateX(33px);
        background-color: transparent;
    }
    66% {
        transform: translateX(-33px);
        background-color: transparent;
    }
    100% {
        transform: translateX(0px);
        background-color: #ffffff;
    }
}

/* modification in Menu button transformation CSS */

.header .navbar-toggler.menu-btn_show .icon-bar:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
}
.header .navbar-toggler.menu-btn_show .icon-bar:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.header .navbar-toggler.menu-btn_show .icon-bar:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.header .navbar-toggler.menu-btn_show .icon-bar:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
}

/* sticky header element CSS */
#header {
    background-color: transparent;
    position: fixed;
    z-index: 100;
    top: 0;
    transition:top 300ms linear;
    width: 100%;
}
body:not(.sticky-menu) #header.fixed-header {
    top: -90px;
}

/*  resrting bootstrp style */

.link-wrapper .dropdown-item.active {
    background-color: unset;
}