header.sticky-header {
    height: 13vh;
    background: #000;
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
}

.sticky-header__wrapper {
    display: flex;
    gap: 5.99vw;
    justify-content: space-between;
    width: 100%;
    position: relative;

}

a.sticky-header__logo img {
    max-width: 18.5vw;
}

header.sticky-header .container {
    display: flex;
}

a.sticky-header__logo {
    display: flex;
}

nav.sticky-header__navigation {
    display: flex;
}

ul.sticky-header__list {
    display: flex;
    gap: 6vw 86.4px;
    align-items: center;
    color: #fff;
    list-style: none;
}

a.sticky-header__link {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.6vw;
    /* font-size: 28px; */
    transition: color .5s ease;
}

/* Подсветка меню */
.sticky-header__link.active,
.sticky-header__link:hover {
    color: #617d98;
    /* например, жёлтая подсветка */
}

.sticky-header__link.active {
    pointer-events: none;
}

.sticky-header__link {
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
    /* место для полоски */
    text-decoration: none;
    color: #fff;
    transition: color 0.3s ease;
}

.sticky-header__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, #009ADA 0%, #003D7C 50%, #E30A17 100%);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
    border-radius: 2px;
}

/* при наведении */
.sticky-header__link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* для активного пункта (из твоего скрипта) */
.sticky-header__link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* a.sticky-header__logo img {
    transition: Maxwidth 1s ease;
}

.scrolled a.sticky-header__logo img {
    max-width: 165px;
    transition: width 1s ease;
}

.scrolled a.sticky-header__link {
    font-size: 24px;
}

header.sticky-header.scrolled {
    height: 70px;
} */
#burger {
    display: none;
}

@media (max-width: 1360px) {
    ul.sticky-header__list {
        gap: 6vw 50px;
    }
}

@media (max-width: 768px) {
    button#burger.is-open {
        width: 45px;
    }

    button#close-nav {
        position: absolute;
        right: 6vw;
        top: 25px;
        background: none;
        border: none;
        font-size: 28px;
        font-weight: 800;
        color: #fff;
    }

    header.sticky-header {
        height: fit-content;
        padding: 20px 0;
        z-index: 9999;
    }

    header {
        z-index: 201;
    }

    #burger {
        display: block;
        z-index: 0;
        height: 100%;
    }

    nav.desktop {
        display: none;
    }


    ul.sticky-header__list {
        display: none;
    }

    a.sticky-header__logo img {
        max-width: 180px;
    }

    header.sticky-header {
        height: fit-content;
        padding: 20px 0;
        z-index: 1;
    }

    /* mobile menu */
    .main-nav {
        position: fixed;
        inset: 0;
        /* заменяет top/right/bottom/left */
        text-align: center;
        background: rgba(0, 0, 0, 0.942);
        /* более читаемый формат */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        /* для Safari */
        opacity: 0;
        visibility: hidden;
        z-index: -1;
        transition: opacity .375s ease, visibility .375s ease;
    }

    .main-nav.active {
        opacity: 1;
        visibility: visible;
        z-index: 9999;
    }

    .main-nav.is-open {
        opacity: 1;
        z-index: 100;
        visibility: visible;
        height: 100vh;
    }

    /* Yellow band effect */
    .main-nav::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: -15px;
        background: var(--color-accent-blue);
        opacity: 0.48;
        transform-origin: 0 0;
        transform: skew(-14deg) translateX(-120%);
        transition: all .275s .1s;
    }

    .main-nav.is-open::before {
        transform: skew(-14deg) translateX(0);
    }

    /* Skewing effect on menu links */
    .main-nav ul {
        display: inline-flex;
        flex-direction: column;
        height: 93%;
        /* Should be 100%, but we have a notice message :D */
        align-items: flex-end;
        justify-content: center;
        transform: translateX(-18%) skew(-16deg);
    }

    .main-nav li {
        display: block;
        margin: .5rem 0;
        text-align: right;
        transform: skew(16deg);
    }

    /* Apparition effect on links */
    .main-nav a {
        opacity: 0;
        transform: translateY(-10px);
    }

    .main-nav.is-open a {
        opacity: 1;
        transform: translateY(0);
    }

    .main-nav li:nth-child(1) a {
        transition: all 275ms 175ms
    }

    .main-nav li:nth-child(2) a {
        transition: all 275ms 225ms
    }

    .main-nav li:nth-child(3) a {
        transition: all 275ms 275ms
    }

    .main-nav li:nth-child(4) a {
        transition: all 275ms 325ms
    }

    .main-nav li:nth-child(5) a {
        transition: all 275ms 375ms
    }


    /* Decoration */
    .main-nav ul,
    .main-nav li {
        list-style: none;
        padding: 0;
    }

    .main-nav a {
        display: block;
        padding: 12px 0;
        color: #ffffff;
        font-size: 1.4em;
        text-decoration: none;
        font-weight: bold;
    }

    /* Burger Style: @see: https://codepen.io/CreativeJuiz/full/oMZNXy */
    .open-main-nav {
        position: absolute;
        top: 0;
        padding-top: 20px;
        right: 0;
        z-index: 1000;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .open-main-nav:focus {
        outline: none;
    }

    .burger {
        position: relative;
        display: block;
        width: 28px;
        height: 4px;
        margin: 0 auto;
        background: #ffffff;
        transform: skew(5deg);
        transition: all .275s;
    }

    .burger:after,
    .burger:before {
        content: '';
        display: block;
        height: 100%;
        background: #ffffff;
        transition: all .275s;
    }

    .burger:after {
        transform: translateY(-12px) translateX(-2px) skew(-20deg);
    }

    .burger:before {
        transform: translateY(-16px) skew(-10deg);
    }

    /* Toggle State part */
    .is-open .burger {
        transform: skew(5deg) translateY(-8px) rotate(-45deg);
    }

    .is-open .burger:before {
        transform: translateY(0px) skew(-10deg) rotate(75deg);
    }

    .is-open .burger:after {
        transform: translateY(-12px) translateX(10px) skew(-20deg);
        opacity: 0;
    }

    /* MENU Text part */

    .burger-text {
        display: block;
        font-size: .675rem;
        letter-spacing: .05em;
        margin-top: .5em;
        text-transform: uppercase;
        font-weight: 500;
        text-align: center;
        color: #5A3B5D;
    }

}

@media (min-width: 768px) {
    nav#main-nav {
        display: none;
    }
}