/* header */
.header {
    --position: relative;
    --bgc: transparent;
    --offset-header: var(--offset-small);
    --height-block: 5rem;

    position: var(--position);
    background-color: var(--bgc);
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--offset-header) 0;
    z-index: 99;
}

.header__wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: all;
}
.header__top {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
}
.header__start {
    padding: var(--offset-extrasmall) var(--offset-main);
}
.header__start svg {
    display: block;
    width: auto;
    height: 3.25rem;
}
.header__center {
    flex-grow: 1;
    padding: var(--offset-extrasmall) var(--offset-big);
}
.header__center-logo {
    display: block;
    height: 2.75rem;
    width: auto;
}
.header__center-logo svg {
    display: block;
    height: 100%;
    width: 100%;
}
.header__last {
    padding: var(--offset-extrasmall) var(--offset-big);
}
.header__last svg {
    display: block;
    height: 2.25rem;
    width: auto;
}
.header__block {
    display: flex;
    align-items: center;
    gap: var(--offset-big);
    background-color: var(--color-grey-32);
    color: var(--color-white-72);
    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
    min-height: var(--height-block);
    border-radius: var(--radius-extrasmall) var(--radius-extrasmall) 0 0;
}
.header__bottom {
    padding: 0.625rem var(--offset-main);
    background-color: var(--color-white-72);
    color: var(--color-black);
    border-radius: 0 0 var(--radius-extrasmall) var(--radius-extrasmall);
    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
}

/**/
.header__mobile {
    --height-block: 4rem;

    pointer-events: all;
    display: flex;
    align-items: stretch;
    gap: var(--offset-extrasmall);
}
.header__mobile .button {
    --btn-radius: var(--radius-extrasmall);
    --size-btn: 4rem;
    --size-svg: calc(var(--size-btn) / 2);
}
.header__mobile-start {
    flex-grow: 1;
    padding: var(--offset-extrasmall) var(--offset-main);
    border-radius: var(--radius-extrasmall);
}
.header__mobile-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: 1.75rem;
}
.header__mobile-logo svg {
    display: block;
    height: 100%;
    width: auto;
}

/**/
.header_fixed {
    --position: fixed;
}
.header_sticky {
    --position: sticky;
}

.header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20.25rem;
    background: radial-gradient(108.94% 100% at 50% 0%, #253357 0%, rgba(37, 51, 87, 0) 100%);
    pointer-events: none;
    z-index: -1;
}

@media screen and (max-width: 1023.5px) {
    .header {
        --offset-header: var(--offset-extrasmall);
        --grid-gap: var(--offset-extrasmall);
    }
    .header__mobile-start {
        align-items: start;
        padding: 0.375rem var(--offset-secondary);
    }
    .header__mobile-logo {
        height: 2.5rem;
    }
}