:root {
    --nav-height: 19vw;
}

.nav-mobile {
    display: none;
    justify-content: space-between;
    position: fixed;
    z-index: 1040;
    width: 100%;
    background: #fff0;
}

.nav-mobile.sticky,
.nav-mobile.open {
    background: #fffd;
    backdrop-filter: blur(0.75vw);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 25%);

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

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

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

.nav-buttons {
    display: flex;
    position: relative;
    flex: 1;
    height: var(--nav-height);
    justify-content: space-between;
    margin-inline-start: var(--mobile-nav-icons-initial-distance);
    margin-inline-end: var(--mobile-nav-icons-initial-distance);
}

.nav-right-buttons {
    display: flex;
    gap: var(--mobile-nav-icons-gap);
    align-items: center;
}

.menu-button,
.ig,
.fb {
    z-index: 2;
    cursor: pointer;
}

.mobile-logo-a {
    display: flex;
}

.mobile-logo {
    width: 100%;
}

.menu-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.menu-button-element:before,
.menu-button-element:after {
    content: "";
    position: absolute;
}

.menu-button-element,
.menu-button-element:before,
.menu-button-element:after {
    display: block;
    width: var(--mobile-nav-icons-width);
    height: var(--mobile-nav-burger-width);
    background: #fff;
    border-radius: calc(var(--mobile-nav-burger-width) / 2);
}

.menu-button-element:before {
    top: 0;
}

.menu-button-element:after {
    bottom: 0;
}

.nav-mobile.open .menu-button,
.nav-mobile.closed .menu-button {
    transition: rotate 0.2s ease;
}

.nav-mobile.open .menu-button-element:before {
    top: auto;
    rotate: 90deg;
}

.nav-mobile.open .menu-button-element:after {
    bottom: auto;
}

.nav-mobile.open .menu-button-element,
.nav-mobile.open .menu-button-element:before,
.nav-mobile.open .menu-button-element:after,
.nav-mobile.sticky .menu-button-element,
.nav-mobile.sticky .menu-button-element:before,
.nav-mobile.sticky .menu-button-element:after,
body.testimonials-page .menu-button-element,
body.testimonials-page .menu-button-element:before,
body.testimonials-page .menu-button-element:after,
body.not-found-page .menu-button-element,
body.not-found-page .menu-button-element:before,
body.not-found-page .menu-button-element:after {
    background-color: var(--livui-blue);
}

.nav-mobile.open .menu-button-element {
    background-color: transparent;
}

.nav-mobile.open .menu-button {
    rotate: 45deg;
}

.nav-mobile.open,
.nav-mobile.closed {
    transition: height 0.2s ease-in;
}

.nav-mobile.non-sticky.closed .mobile-logo-a {
    pointer-events: none;
}

.nav-mobile.non-sticky.closed .mobile-logo-a,
.nav-mobile.sticky.closed .mobile-logo-a,
.nav-mobile.non-sticky.open .mobile-logo-a {
    /* transition: translate 0.2s ease; */
}

.nav-mobile ul {
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;

    box-sizing: border-box;
    padding: 10vw 18vw;
}

.nav-mobile ul:before {
    content: "";
    position: absolute;
    width: 90vw;
    height: 0.1vw;
    background: var(--livui-turquoise);
    right: 5%;
    opacity: 0.75;
}

.nav-mobile.open ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12vw;
    position: absolute;
    top: var(--nav-height);
    height: calc(100% - 21vw);
}

.nav-mobile.open li {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.nav-mobile.open li a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    text-decoration: none;
    color: var(--livui-blue);
}

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

.nav-mobile ul li a svg {
    fill: var(--livui-pink);
    width: 12vw;
}

.nav-mobile ul li .nav-text {
    font-size: 5.5vw;
}

body.testimonials-page header,
body.not-found-page header {
    height: 4vw;
    background: #fff;
}

@media only screen and (max-width: 1200px) {
    :root {
        --nav-height: 12vw;
        --mobile-nav-icons-initial-distance: 4vw;
        --mobile-nav-icons-gap: 4vw;
        --mobile-nav-icons-width: 5vw;
        --mobile-nav-burger-gap: 0.8vw;
        --mobile-nav-burger-width: calc((var(--mobile-nav-icons-width) - var(--mobile-nav-burger-gap) * 2) / 3);
    }

    body.testimonials-page header,
    body.not-found-page header {
        height: 4vw;
        background: #fff;
    }

    .nav-mobile.open {
        height: 40vw;
    }

    .nav-mobile.sticky {
        height: 40vw;
    }

    .nav-mobile.closed {
        height: var(--nav-height);
    }

    .nav-mobile.sticky .mobile-logo-a,
    .nav-mobile.open .mobile-logo-a {
        width: 30vw;
    }

    .menu-button,
    .ig,
    .fb {
        height: var(--mobile-nav-icons-width);
        width: var(--mobile-nav-icons-width);
    }

    .nav-mobile.non-sticky.closed .mobile-logo-a {
        position: absolute;
        width: 30vw;

        left: calc(5vw - var(--mobile-nav-icons-initial-distance));
        top: 4vw;
    }

    .nav-mobile.non-sticky.closed .nav-right-buttons {
        position: absolute;
        translate: 0vw 5vw;
    }

    .nav-mobile.open ul {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: none;
        gap: 0;
        height: calc(100% - 66vw);
    }

    .nav-mobile ul {
        padding: 5vw 7vw;
    }

    .nav-mobile ul li a svg {
        width: 8vw;
    }

    .nav-mobile ul li .nav-text {
        font-size: 3.6vw;
    }

    .nav-mobile ul li .nav-text .underline {
        display: none;
    }
}

@media only screen and (max-width: 992px) {
    :root {
        --nav-height: 9vw;
        --mobile-nav-icons-initial-distance: 5vw;
        --mobile-nav-icons-gap: 4vw;
        --mobile-nav-icons-width: 4vw;
        --mobile-nav-burger-gap: 0.6vw;
        --mobile-nav-burger-width: calc((var(--mobile-nav-icons-width) - var(--mobile-nav-burger-gap) * 2) / 3);
    }

    body.testimonials-page header,
    body.not-found-page header {
        height: 9vw;
    }

    .nav-mobile {
        display: block;
    }

    .nav-mobile.open,
    .nav-mobile.sticky {
        height: 32vw;
    }

    .nav-mobile.closed {
        height: var(--nav-height);
    }

    body.testimonials-page .nav-mobile.non-sticky .mobile-logo-a,
    body.testimonials-page .nav-mobile.closed .mobile-logo-a,
    body.not-found-page .nav-mobile.non-sticky .mobile-logo-a,
    body.not-found-page .nav-mobile.closed .mobile-logo-a {
        width: 22vw;
    }

    .nav-mobile.sticky .mobile-logo-a,
    .nav-mobile.open .mobile-logo-a {
        width: 22vw;
    }

    .menu-button,
    .ig,
    .fb {
        height: var(--mobile-nav-icons-width);
        width: var(--mobile-nav-icons-width);
    }

    .nav-mobile.non-sticky.closed .mobile-logo-a {
        position: absolute;
        width: 40vw;

        left: calc(5vw - var(--mobile-nav-icons-initial-distance));
        top: 4vw;
    }

    .nav-mobile.non-sticky.closed .nav-right-buttons {
        position: absolute;
        translate: 0vw 5vw;
    }

    .nav-mobile.open ul {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: none;
        gap: 0;
        height: calc(100% - 66vw);
    }

    .nav-mobile ul {
        padding: 5vw 7vw;
    }

    .nav-mobile ul li a svg {
        width: 8vw;
    }

    .nav-mobile ul li .nav-text {
        font-size: 3.6vw;
    }

    .nav-mobile ul li .nav-text .underline {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    :root {
        --nav-height: 14vw;
        --mobile-nav-icons-initial-distance: 4vw;
        --mobile-nav-icons-gap: 4vw;
        --mobile-nav-icons-width: 5vw;
        --mobile-nav-burger-gap: 0.8vw;
        --mobile-nav-burger-width: calc((var(--mobile-nav-icons-width) - var(--mobile-nav-burger-gap) * 2) / 3);
    }

    body.testimonials-page header,
    body.not-found-page header {
        height: 4vw;
    }

    .nav-mobile {
        display: block;
    }

    .nav-mobile.open {
        height: 40vw;
    }

    .nav-mobile.sticky {
        height: 40vw;
    }

    .nav-mobile.closed {
        height: var(--nav-height);
    }

    body.testimonials-page .nav-mobile.non-sticky .mobile-logo-a,
    body.testimonials-page .nav-mobile.open .mobile-logo-a,
    body.testimonials-page .nav-mobile.closed .mobile-logo-a,
    body.not-found-page .nav-mobile.non-sticky .mobile-logo-a,
    body.not-found-page .nav-mobile.open .mobile-logo-a,
    body.not-found-page .nav-mobile.closed .mobile-logo-a {
        width: 22vw !important;
    }

    .menu-button,
    .ig,
    .fb {
        height: var(--mobile-nav-icons-width);
        width: var(--mobile-nav-icons-width);
    }

    .nav-mobile.non-sticky.closed .mobile-logo-a {
        position: absolute;
        width: 40vw;

        left: calc(5vw - var(--mobile-nav-icons-initial-distance));
        top: 4vw;
    }

    .nav-mobile.non-sticky.closed .nav-right-buttons {
        position: absolute;
        translate: 0vw 5vw;
    }

    .nav-mobile.open ul {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: none;
        gap: 0;
        height: calc(100% - 66vw);
    }

    .nav-mobile ul {
        padding: 5vw 7vw;
    }

    .nav-mobile ul li a svg {
        width: 8vw;
    }

    .nav-mobile ul li .nav-text {
        font-size: 3.6vw;
    }

    .nav-mobile ul li .nav-text .underline {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    :root {
        --nav-height: 12vw;
        --mobile-nav-icons-initial-distance: 4vw;
        --mobile-nav-icons-gap: 4vw;
        --mobile-nav-icons-width: 6vw;
        --mobile-nav-burger-gap: 1.1vw;
    }

    body.testimonials-page header,
    body.not-found-page header {
        height: 3vw;
    }

    .nav-mobile.non-sticky.closed .nav-right-buttons {
        position: static;
        translate: none;
    }

    .nav-mobile.sticky .mobile-logo-a,
    .nav-mobile.open .mobile-logo-a {
        width: 30vw;
    }

    .nav-mobile.non-sticky.closed .mobile-logo-a {
        position: absolute;
        width: 64vw;
        left: calc(18vw - var(--mobile-nav-icons-initial-distance));
        top: 28vw;
    }

    .nav-mobile.sticky .mobile-logo-a,
    .nav-mobile.open .mobile-logo-a,
    body.testimonials-page nav.nav-mobile.closed a.mobile-logo-a,
    body.testimonials-page nav.nav-mobile.open a.mobile-logo-a,
    body.not-found-page nav.nav-mobile.closed a.mobile-logo-a,
    body.not-found-page nav.nav-mobile.open a.mobile-logo-a {
        width: 30vw !important;
        position: static !important;
    }

    .nav-mobile.non-sticky.closed .mobile-logo-a .mobile-logo {
        width: 100% !important;
    }

    .menu-button,
    .ig,
    .fb {
        height: var(--mobile-nav-icons-width);
    }

    .nav-mobile.non-sticky.closed .mobile-logo {
        top: 28vw;
        width: 54vw !important;
        left: 23vw;
    }

    body.testimonials-page a.mobile-logo-a,
    body.not-found-page a.mobile-logo-a {
        width: 30vw;
        pointer-events: all !important;
        translate: none !important;
        position: static;
    }
}

@media only screen and (max-width: 430px) {
    :root {
        --nav-height: 19vw;
        --mobile-nav-icons-initial-distance: 5vw;
        --mobile-nav-icons-gap: 6vw;
        --mobile-nav-icons-width: 8vw;
        --mobile-nav-burger-gap: 1.5vw;
        --mobile-nav-burger-width: calc((var(--mobile-nav-icons-width) - var(--mobile-nav-burger-gap) * 2) / 3);
    }

    body.testimonials-page header,
    body.not-found-page header {
        height: 0;
    }

    .nav-mobile.open {
        height: 92vw;
    }

    .nav-mobile.non-sticky.closed .mobile-logo-a {
        position: absolute;
        width: 64vw;
        left: calc(18vw - var(--mobile-nav-icons-initial-distance));
        top: 38vw;
    }

    .nav-mobile.sticky .mobile-logo-a,
    .nav-mobile.open .mobile-logo-a,
    body.testimonials-page nav.nav-mobile.closed a.mobile-logo-a,
    body.testimonials-page nav.nav-mobile.open a.mobile-logo-a,
    body.not-found-page nav.nav-mobile.closed a.mobile-logo-a,
    body.not-found-page nav.nav-mobile.open a.mobile-logo-a {
        width: 40vw !important;
    }

    .nav-mobile ul {
        padding: 10vw 18vw;
    }

    .nav-mobile.open ul {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 12vw;
        height: calc(100% - 21vw);
    }

    .nav-mobile ul li a svg {
        width: 12vw;
    }

    .nav-mobile ul li .nav-text {
        font-size: 5.5vw;
    }

    body.testimonials-page .section-divider,
    body.not-found-page .section-divider {
        border-top: 10vw solid white;
    }
}