.nav-wrapper {
    width: 100vw;
    position: absolute;
    display: flex;
    justify-content: center;
    top: 3.2vw;
    left: 50%;
    transform: translate(-50%);
    z-index: 6;
}

nav.nav-desktop {
    width: 75vw;
    display: flex;
    justify-content: space-between;
    color: #fff;
}

nav.nav-desktop ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

nav.nav-desktop ul li {
    margin-inline-end: 2vw;
    position: relative;
    height: 100%;
    display: flex;
}

nav.nav-desktop ul li:last-child {
    margin-inline-end: 4vw;
}

nav.nav-desktop ul li a {
    text-decoration: none;
    color: #fff;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
}

nav.nav-desktop ul li a *,
.logo-a * {
    pointer-events: none;
}

nav.nav-desktop a svg {
    width: 2.2vw;
    margin-inline-end: 1vw;
    fill: #fff;
}

.nav-text {
    font-size: 1.2vw;
}

nav.nav-desktop a svg,
.nav-text {
    filter: drop-shadow(0 0.1vw 0.1vw rgb(0 0 0 / 0.3));
}

.logo {
    width: 16vw;
    transition: opacity 0.3s;
}

/* Sticky Nav */

.nav-wrapper.sticky {
    position: fixed;
    top: 0;
    z-index: 2000;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 25%);
    background-color: #fffc;
    backdrop-filter: blur(20px);

    transition-property: background-color, box-shadow, backdrop-filter;
    transition-duration: .5s;
    transition-timing-function: ease-in;
}

.nav-wrapper.non-sticky {
    box-shadow: none;
    background-color: #fff0;
    backdrop-filter: none;

    transition-property: background-color, box-shadow, backdrop-filter;
    transition-duration: .2s;
    transition-timing-function: ease-out;
}

.nav-wrapper.sticky ul li a {
    color: var(--livui-blue);
}

.nav-wrapper.sticky span.underline {
    background: var(--livui-pink);
}

.nav-wrapper.sticky .logo {
    width: 12vw;
    margin: 0.5vw 1vw;

    transition-property: width, margin;
    transition-duration: .5s;
    transition-timing-function: ease-in;
}

.nav-wrapper.non-sticky .logo {
    width: 16vw;
    margin: 0;

    transition-property: width, margin;
    transition-duration: .4s;
    transition-timing-function: ease-in;
}

.nav-wrapper.sticky a svg {
    fill: var(--livui-pink);
}

.nav-wrapper.sticky a svg,
.nav-wrapper.sticky .nav-text {
    filter: none;
}

.nav-wrapper {
    top: 2vw;
}

@media only screen and (max-width: 1440px) {   
}

@media only screen and (max-width: 1200px) {
    
}

@media only screen and (max-width: 992px) {
    .nav-wrapper {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 430px) {
}

/* Pages with white header background: keep logo at sticky size even in non-sticky state */
@media (min-width: 993px) {
  body.testimonials-page .nav-wrapper.non-sticky .logo,
  body.not-found-page .nav-wrapper.non-sticky .logo {
    width: 12vw;
    margin: 0.5vw 1vw; /* same as sticky */
  }
}