/* HEADER [START] */
.header {
    background-color: #001A29;
    width: 100%;
    height: var(--header-height, 80px);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 9999;
}

/* HEADER: CONTAINER */
.header__container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    height: 100%;
}

/* HEADER: LOGO */
.header__logo {
    color: #FFFFFF;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.header__logo img,
.header__logo svg {
    display: block;
    width: auto;
    height: 64px;
}

/* HEADER: BUTTON */
.header__btn {
    background-color: #007BC1;
    border: none;
    outline: none;
    color: #FEFEFE;
    cursor: pointer;
    text-align: center;
    line-height: 1.25;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 250px;
    height: 50px;
    margin: 0;
    padding: 0px 24px;
    user-select: none;
    appearance: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 8px;
}

.header__btn:hover {
    background-color: #00639B;
    color: #FEFEFE;
}

.header__btn-icon {
    display: block;
    width: 20px;
    min-width: 20px;
    height: 20px;
    transform: rotate(-90deg);
}

.header__btn-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* HEADER: ACTIONS */
.header__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

/* HEADER: ACTION */
.header__action {
    background-color: transparent;
    border: none;
    outline: none;
    color: #FEFEFE;
    cursor: pointer;
    text-align: center;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0px 24px;
    position: relative;
    user-select: none;
    appearance: none;
    transition: color 0.3s ease;
}

.header__action:hover {
    color: #007BC1;
}

.header__action + .header__action::before {
    background-color: rgba(255, 255, 255, 0.2);
    content: '';
    display: block;
    width: 1px;
    height: 50px;
    margin: auto 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

.header__action-icon {
    display: block;
    width: 30px;
    min-width: 30px;
    height: 30px;
}

.header__action-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.header__action-name {
    color: #98A2A8;
    font-size: 12px;
    font-weight: 500;
    margin-top: 6px;
    transition: color 0.3s ease;
}

.header__action:hover .header__action-name {
    color: #007BC1;
}

/* HEADER: BURGER */
.header__burger {
    background-color: #007BC1;
    border: none;
    outline: none;
    color: #FEFEFE;
    cursor: pointer;
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    appearance: none;
}

.header__burger svg {
    display: block;
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease-in-out;
}

.header__burger .menu-icon,
.header__burger .close-icon {
    transition: opacity 0.3s ease-in-out;
}

.header__burger.active svg {
    transform: rotate(90deg);
}

.header__burger .menu-icon { opacity: 1; }
.header__burger.active .menu-icon { opacity: 0; }
.header__burger .close-icon { opacity: 0; }
.header__burger.active .close-icon { opacity: 1; }

@media (min-width: 1700px) {
    .header__menu-container {
        padding: 0;
    }
}

@media (max-width: 1699px) {
    .header__burger {
        display: flex;
    }

    .header__btn {
        margin-left: auto;
    }
}

@media (max-width: 1249px) {
    .header__logo img,
    .header__logo svg {
        height: 52px;
    }

    .header__btn {
        width: fit-content;
        max-width: none;
        height: 44px;
    }

    .header__btn-icon {
        display: none;
    }

    .header__action {
        padding: 0px 16px;
    }

    .header__action-icon {
        width: 26px;
        min-width: 26px;
        height: 26px;
    }

    .header__action-name {
        margin-top: 4px;
    }
}

@media (max-width: 768px) {
    .header__container {
        gap: 12px;
    }

    .header__logo img,
    .header__logo svg {
        height: 44px;
    }

    .header__actions {
        margin-left: auto;
    }

    .header__action {
        background-color: rgba(0, 123, 193, 0.2);
        border: 1px solid rgba(0, 123, 193, 0.2);
        color: #007BC1;
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 8px;
    }

    .header__action-name {
        display: none;
    }
}
/* HEADER [END] */

/* HEADER: LANG [START] */
.header__lang {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

.header__lang-current {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.header__lang-arrow {
    color: #007BC1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.header__lang-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

.header__action:hover .header__lang-arrow {
    transform: scaleY(-1);
}

.header__lang-dropdown {
    background-color: #FFFFFF;
    box-shadow: 0px 12px 28px 0px rgba(0, 48, 76, 0.12);
    cursor: default;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 64px;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    top: calc(100% - 16px);
    left: 50%;
    transform: translate(-50%, 10px);
    transition: all 0.3s ease;
    z-index: 100;
    border-radius: 8px;
}

.header__action:hover .header__lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.header__lang-item {
    color: #002338;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transition: color 0.3s ease;
}

.header__lang-item:hover,
.header__lang-item--active {
    color: #007BC1;
}

.header__lang-item--disabled {
    color: #A0A0A0 !important;
    cursor: not-allowed !important;
}
/* HEADER: LANG [END] */

/* HEADER: MENU [START] */
.header__menu {
    height: 100%;
}

.header__menu-container {
    height: 100%;
}

.header__menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* LEVEL 1 */
.header__menu-list--level-1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    height: 100%;
}

.header__menu-item--level-1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

.header__menu-link--level-1 {
    color: #FEFEFE;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0px 24px;
    user-select: none;
    transition: color 0.3s ease;
}

.header__menu-item:hover > .header__menu-link--level-1 {
    color: #007BC1;
}

.header__menu-arrow {
    color: #007BC1;
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.header__menu-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

.header__menu-arrow--level-1 {
    display: flex;
    margin-top: 2px;
}

@media (max-width: 768px) {
    .header__menu-arrow {
        display: flex;
    }
}

.header__menu-item:hover > .header__menu-link .header__menu-arrow {
    transform: scaleY(-1);
}

/* HEADER: MEGAMENU */
.header__megamenu {
    background-color: #FFFFFF;
    box-shadow: 0px 12px 28px 0px rgba(0, 48, 76, 0.12);
    cursor: default;
    width: 100%;
    max-height: calc(100vh - var(--header-height, 80px));
    padding: 24px;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
}

.header__menu-item--level-1:hover > .header__megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* LEVEL 2 */
.header__menu-list--level-2 {
    column-count: 4;
    column-gap: 80px;
    column-rule: 1px solid rgba(0, 0, 0, 0.1);
    display: block;
}

.header__megamenu--about .header__menu-list--level-2 {
    column-count: 3;
}

.header__menu-item--level-2 {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 30px;
}

.header__megamenu--products .header__menu-item--level-2 {
    break-inside: auto;
    page-break-inside: auto;
    -webkit-column-break-inside: auto;
}

.header__menu-link--level-2 {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #002338;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.header__menu-item:hover > .header__menu-link--level-2 {
    color: #007BC1;
}

/* LEVEL 3 */
.header__menu-list--level-3 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.header__menu-link--level-3 {
    color: #002338;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    line-height: 1.4;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    transition: color 0.3s ease;
}

.header__menu-link--level-3::before {
    content: '—';
    margin-right: 8px;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.header__menu-item:hover > .header__menu-link--level-3 {
    color: #007BC1;
}

.header__menu-item:hover > .header__menu-link--level-3::before {
    opacity: 0.6;
}

@media (max-width: 1699px) {
    .header__menu {
        background-color: #001A29;
        box-shadow: 0px 12px 28px 0px rgba(0, 48, 76, 0.12);
        display: none;
        width: 100%;
        height: auto;
        padding: 0px 24px;
        position: absolute;
        top: 100%;
        top: calc(100% - 8px);
        left: 0;
        z-index: -1;
    }

    .header__menu-list--level-1 {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        width: 100%;
        height: 72px;
        padding-top: 8px;
    }

    .header__menu-list--level-1::before {
        background-color: rgba(255, 255, 255, 0.1);
        content: '';
        display: block;
        width: auto;
        height: 1px;
        position: absolute;
        top: 8px;
        left: 24px;
        right: 24px;
    }

    .header__megamenu {
        max-height: calc(100vh - 144px);
    }
}

@media (max-width: 991px) {
    .header__menu {
        padding: 0px 7px;
    }

    .header__menu-list--level-1::before {
        left: 7px;
        right: 7px;
    }
}
/* HEADER: MENU [END] */

/* HEADER: SEARCH [START] */
.header__search {
    width: 100%;
    max-width: 800px;
    background: transparent;
    padding: 0;
}

.header__search-container {
    width: 100%;
    position: relative;
}

.header__search-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

.header__search-input {
    background-color: #FFFFFF;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
    border: none;
    outline: none;
    color: #002338;
    font-size: 18px;
    font-weight: 400;
    width: 100%;
    height: 64px;
    margin: 0;
    padding: 0px 128px 0px 64px;
    position: relative;
    z-index: 1;
    border-radius: 12px;
}

.header__search-input::placeholder {
    color: #98A2A8;
}

.header__search-icon {
    color: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    pointer-events: none;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
}

.header__search-icon svg {
    display: block;
    width: 30px;
    height: 30px;
}

.header__search-button {
    background-color: #007BC1;
    border: none;
    outline: none;
    color: #FEFEFE;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 112px;
    height: 48px;
    margin: 0;
    padding: 0px 24px;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    user-select: none;
    appearance: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 8px;
}

.header__search-button:hover {
    background-color: #00639B;
    color: #FEFEFE;
}

.header__search-button svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* AUTOCOMPLETE SUGGESTIONS */
.header__search-suggestions {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    width: 100% !important;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 48, 76, 0.12);
    overflow: hidden;
    z-index: 100;
}

.header__search-suggestion {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    text-decoration: none;
    color: #002338;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.header__search-suggestion:last-child {
    border-bottom: none;
}

.header__search-suggestion:hover,
.autocomplete-selected .header__search-suggestion,
.autocomplete-selected {
    background-color: #f7f9fa;
}

.header__search-suggestion-image {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    width: 48px;
    min-width: 48px;
    height: 48px;
    margin-right: 16px;
    border-radius: 5px;
}

.header__search-suggestion-meta {
    display: flex;
    flex-direction: column;
}

.header__search-suggestion-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
}

.header__search-suggestion-title strong {
    color: #007BC1;
}

.header__search-no-result {
    padding: 20px;
    text-align: center;
    color: #98A2A8;
    font-size: 16px;
}

@media (max-width: 768px) {
    .header__search-input {
        font-size: 16px;
        height: 56px;
        padding: 0px 112px 0px 56px;
    }

    .header__search-icon {
        width: 40px;
        height: 40px;
    }

    .header__search-icon svg {
        width: 26px;
        height: 26px;
    }

    .header__search-button {
        width: 100%;
        max-width: 96px;
        height: 40px;
        padding: 0px 16px;
    }

    .header__search-suggestion-image {
        width: 40px;
        min-width: 40px;
        height: 40px;
        margin-right: 12px;
    }

    .header__search-suggestion-title {
        font-size: 14px;
    }
}
/* HEADER: SEARCH [END] */

/* HEADER: MOBILE NAV EXTRAS */
.hc-offcanvas-nav {
    font-family: inherit;
    z-index: 10000;
}

.hc-offcanvas-nav::after,
.hc-offcanvas-nav .nav-wrapper::after {
    background: rgba(12, 23, 28, 0.98);
}

.hc-offcanvas-nav .nav-custom-content {
    border-bottom: none;
    padding: 0;
}

.hc-offcanvas-nav .nav-container,
.hc-offcanvas-nav .nav-wrapper,
.hc-offcanvas-nav ul {
    background: #001A29;
}

.hc-offcanvas-nav .nav-item-link,
.hc-offcanvas-nav li.nav-close a,
.hc-offcanvas-nav .nav-back a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hc-offcanvas-nav .nav-back a,
.hc-offcanvas-nav .nav-back-button {
    background-color: #007BC1;
    border-top: none;
    border-bottom: none;
    color: #FEFEFE;
}

.hc-offcanvas-nav .nav-content > h2,
.hc-offcanvas-nav .nav-content > h3,
.hc-offcanvas-nav .nav-content > h4,
.hc-offcanvas-nav .nav-content > h5,
.hc-offcanvas-nav .nav-content > h6 {
    color: rgba(254, 254, 254, 0.8);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: var(--header-height, 80px);
    margin: 0;
    padding: 0px 17px;
}

.hc-offcanvas-nav a.nav-next {
    border-left: 1px solid #1A313F;
    border-bottom: 1px solid #1A313F;
}

.hc-offcanvas-nav .nav-wrapper > .nav-content > ul:first-of-type > li:first-child:not(.nav-back):not(.nav-close) > .nav-item-wrapper > .nav-item-link + a {
    border-top: none !important;
}

@media (max-width: 768px) {
    .header__btn,
    .header__actions > a.header__action,
    .header__actions > div.header__action {
        display: none !important;
    }

    .mobile-menu__header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: var(--header-height, 80px);
        margin: 0;
        padding: 0px 17px;
    }

    .mobile-menu__logo {
        color: #FFFFFF;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .mobile-menu__logo img,
    .mobile-menu__logo svg {
        display: block;
        width: auto;
        height: 44px;
    }

    .mobile-menu__actions {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 14px 17px;
    }

    .mobile-menu__btn-action {
        background: #007BC1;
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 44px;
        border-radius: 8px;
    }

    .mobile-menu__socials {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        margin: 0;
        padding: 14px 17px;
    }

    .mobile-menu__socials-link {
        background-color: rgba(254, 254, 254, 0.6);
        color: #001521;
        text-decoration: none;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 38px;
        min-width: 38px;
        height: 38px;
        transition: background-color 0.3s ease, color 0.3s ease;
        border-radius: 8px;
    }

    .mobile-menu__socials-link:hover {
        background-color: rgba(254, 254, 254, 1);
        color: #001521;
    }

    .mobile-menu__socials-link svg {
        display: block;
        width: 24px;
        height: 24px;
    }
}