@media(max-width: 1023px) {
    #burger.active span:nth-child(1){
        transform: rotate(-45deg) translateY(14px);
        left: -10px;
    }
    #burger.active span:nth-child(2){
        opacity: 0;
    }
    #burger.active span:nth-child(3){
        transform: rotate(45deg) translateY(-14px);
        left: -10px;
    }
    #menu-wrapper {
        transform: translateY(100%) translateX(-110%);
        transition: transform 300ms ease-in-out;
    }
    #menu-wrapper.open {
        transform: translateY(100%) translateX(0);
    }
}
.header-menu-link {
    position: relative;
}
.header-menu-link::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    border-radius: 4px;
    background: var(--color-blue-dark);
    transition: width .3s linear;
}
.header-menu-link:hover::after,
.header-menu-link:focus::after {
    width: 100%;
}


/*   Tabs   */
.tab-btn {
    background: var(--color-orange-base);
    color: #FFFFFF;
    border-radius: 4px;
    padding: 8px;
    transition: color .3s ease-in-out, background-color .3s ease-in-out;
}
.tab-btn.active {
    background: #FEFEFE;
    color: var(--color-blue-base);
    pointer-events: none;
}
.tab-content {
    display: none;
    opacity: 0;
}
.tab-content.active {
    display: block;
    animation: FadeIn forwards 0.3s 0.3s;
}
/*   Accordion   */
.accordion-button.active img {
    transform: rotate(180deg);
}
.accordion-dropdown {
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-in-out;
}
.accordion-dropdown.active {
    visibility: visible;
    pointer-events: auto;
    animation: FadeIn forwards 0.3s 0.3s;
}
/*   Modals   */
.modal {
    display: none;
    opacity: 0;
}
.modal.active {
    display: flex;
    animation: FadeIn forwards 0.3s 0.3s;
}

/*   Button states   */
button.btn,a.btn {
    transition: background-color 0.3s linear, color 0.3s linear,border-color 0.3s linear;
    border: 1px solid var(--color-orange-base);
}
.fixed-button {
    transition: transform 0.3s ease-in-out;
}
@media (any-hover: hover) {
    button.btn:hover,a.btn:hover {
        color: #FFFFFF;
        border-color: var(--color-blue-dark);
        background: var(--color-blue-dark);
    }
    .fixed-button:hover {
        transform: scale(1.2);
    }
}
button.btn:focus,a.btn:focus {
    color: var(--color-blue-base);
    border-color: var(--color-blue-base);
    background: #FFFFFF;
}
/*Slider*/
.hero-slide {
    opacity: 0;
}
.hero-slide.active {
    animation: FadeIn 0.3s ease-in-out forwards;
}
.hero-slide:nth-child(2n + 1) img  {
    transform: scale(1);
    will-change: transform;
}
.hero-slide:nth-child(2n) img  {
    transform: scale(1.2);
    will-change: transform;
}

.hero-slide:nth-child(2n + 1).active  img {
    animation: ScaleIn 5s linear forwards;
}
.hero-slide:nth-child(2n).active  img {
    animation: ScaleOut 5s linear forwards;
}

@keyframes FadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes ScaleIn {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.3);
    }
}
@keyframes ScaleOut {
    from {
        transform: scale(1.3);
    }
    to {
        transform: scale(1);
    }
}