.header {
    width: 100%;
    padding: 24px;
    background-color: transparent;
    transition: all 0.2s;
    position: fixed;
    top: 0;
    z-index: 999999999;
}

.header__container {
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: space-between;
}

.header__logo {
    width: 232px;
}

.header__logo svg {
    width: 150px;
    fill: #fff;
    transition: all 0.3s ease;
}

.header__right {
    display: flex;
    align-items: center;
}

.header__right-sign-in {
    margin-left: 12px;
    padding: 13px;
    width: 80px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    border-radius: 4px;
    z-index: 999;
    border: 1px solid #fff;
}

.header__right-sign-in:hover {
    background: #63626A;
    color: #fff;
}

.header__right-demo {
    font-weight: 700 !important;
    font-size: 14px;
    padding: 13px 16px;
    align-items: center;
    line-height: 18px;
    z-index: 999;
}

.header.header--dark {
    background-color: #26262C;
}

.header.header--dark .header__container {
    color: #fff
}

.header.header--dark .header__logo svg {
    fill: #fff;
}

.header.header--dark .mega-menu .mega-menu__container > .menu-item-has-children.active > .sub-menu-main-container {
    background-color: #26262C;
}

.header.header--dark nav {
    transition: all 0.3s;
    background-color: #26262C;
}

.header.header--dark .mega-menu .mega-menu__container > .menu-item::before,
.header.header--dark .mega-menu .sub-menu::before {
    background-color: #26262C;
}

.header.header--dark .burger-item {
    background-color: #fff;
}

.header.header--dark .burger-items--active .burger-item {
    background-color: #fff;
}

.header.header--light {
    background-color: #F4F4F4;
}

.header.header--light .header__container {
    color: #26262C
}

.header.header--light .mega-menu .mega-menu__container > .menu-item-has-children.active > .sub-menu-main-container {
    background-color: #F4F4F4;
}

.header.header--light .mega-menu .mega-menu__container > .menu-item::before,
.header.header--light .mega-menu .sub-menu::before {
    background-color: #F4F4F4;
}

.header.header--light .burger-items--active .burger-item {
    background-color: #F4F4F4;
}

.header.header--light .mega-menu .mega-menu__container > .active.menu-item > a {
    color: #6C2BFF;
}

.header.header--light .header__logo svg,
.header.header--transparent-light .header__logo svg {
    fill: #26262C;
}

.header.header--light .burger-item,
.header.header--transparent-light .burger-item {
    background-color: #26262C;
}

.header.header--light .mega-menu .mega-menu__container > .active.menu-item > a:hover,
.header.header--light .mega-menu .mega-menu__container > .active.menu-item-has-children > a:hover::after,
.header.header--light .mega-menu .mega-menu__container a:hover,
.header.header--light .mega-menu .mega-menu__container > .active.menu-item > a:hover,
.header.header--transparent-light .mega-menu .mega-menu__container > .active.menu-item > a:hover,
.header.header--transparent-light .mega-menu .mega-menu__container > .active.menu-item-has-children > a:hover::after,
.header.header--transparent-light .mega-menu .mega-menu__container a:hover,
.header--transparent-light .header__container {
    color: #26262C;
}

.header.header--light .header__right-sign-in,
.header.header--transparent-light .header__right-sign-in,
.header.header--light .mega-menu__sign-in,
.header.header--transparent-light .mega-menu__sign-in {
    border: 1px solid #6C2BFF;
    color: #6C2BFF;
}

.header.header--light .menu-item--list .list-menu__sub-menu a::after,
.header.header--transparent-light .menu-item--list .list-menu__sub-menu a::after,
.header.header.header--light .mega-menu .image-menu__label::after,
.header.header--transparent-light .mega-menu .image-menu__label::after {
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='%2326262C' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.967957 4.97076L11.39 4.97076C11.4481 4.9701 11.506 4.96232 11.5623 4.94762L8.38238 7.37303C8.32589 7.4496 8.28517 7.53662 8.26258 7.62904C8.23998 7.72146 8.23596 7.81745 8.25075 7.91144C8.26554 8.00543 8.29884 8.09555 8.34872 8.17657C8.3986 8.25759 8.46408 8.3279 8.54134 8.38342C8.61861 8.43895 8.70613 8.47858 8.79883 8.50001C8.89153 8.52145 8.98756 8.52427 9.08136 8.50831C9.17516 8.49234 9.26485 8.45792 9.34524 8.40702C9.42563 8.35613 9.49512 8.28978 9.54967 8.21182L13.5309 4.67128C13.6188 4.54908 13.666 4.40238 13.666 4.25188C13.666 4.10138 13.6188 3.95468 13.5309 3.83249L9.54964 0.292058C9.4374 0.139911 9.26973 0.0381208 9.08296 0.00873621C8.89619 -0.0206494 8.70536 0.0247398 8.55182 0.135069C8.39828 0.245399 8.2944 0.411783 8.26268 0.598171C8.23096 0.78456 8.27396 0.97594 8.38236 1.13085L11.5623 3.55639C11.506 3.54168 11.4481 3.53391 11.39 3.53324L0.967957 3.53324C0.77733 3.53324 0.594511 3.60897 0.459717 3.74376C0.324924 3.87855 0.249197 4.06137 0.249197 4.252C0.249197 4.44263 0.324924 4.62544 0.459717 4.76024C0.59451 4.89503 0.77733 4.97076 0.967957 4.97076Z'/%3E%3C/svg%3E%0A");
}

.header.header--light .menu-item--list .list-menu__sub-menu--has-children > li:after,
.header.header--transparent-light .menu-item--list .list-menu__sub-menu--has-children > li:after {
    background-color: #D5D5D6;
}

.header--transparent-light .mega-menu .mega-menu__container a:hover,
.header.header--transparent-light .header__right-sign-in:hover,
.header--transparent-light .mega-menu .image-menu .image-menu__sub-menu a:hover .image-menu__label{
    background: #EAEAEB;
}

@media (max-width: 1310px) {
    .header {
        padding: 16px;
    }

    .header__container {
        color: #26262C;
    }

    .header__logo svg {
        width: 100px;
    }

    .header__right {
        display: none !important;
    }

    .header.header--light .mega-menu .mega-menu__container > .menu-item-has-children.active > .sub-menu-main-container {
        background-color: #fff;
    }
}