header {
    width: 100%;

    box-shadow: var(--box-shadow-01);

    background-color: var(--color-03);

    position: fixed;

    top: 0;
    left: 0;

    z-index: 2;
}

.header-line {
    width: 100%;

    background-color: var(--color-01);
    background: var(--gradient-01);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-l);

    padding: var(--space-xs) var(--space-xxl);
}

.header-line-block {
    display: flex;
    align-items: center;
    gap: var(--space-l);
}

.header-line-block > a {
    height: 18px;
    
    color: #FFFFFF;

    display: flex;
    align-items: center;
    justify-content: center;
}

.header-line-block > a > img {
    height: 100%;
}

.header-line-close-btn {
    width: 10px;
    height: 10px;

    border: none;

    color: #FFFFFF;
    background: none;

    display: none;

    padding: 0;

    position: absolute;

    right: 40px;

    cursor: pointer;
}

.header-line-close-btn-icon {
    width: 100%;
}

.header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-l);
    
    padding: var(--space-xxl);
}

.header-logo-container {
    height: 45px;
}

.header-logo {
    height: 100%;
}

.header-main-right {
    display: flex;
    align-items: center;
    gap: var(--space-l);
}

.header-links {
    display: flex;
    align-items: center;
    gap: var(--space-l);

    position: relative;
}

.header-links > a:not(.c-primary-btn) {
    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);
}

.header-links > a:not(.c-primary-btn):hover {
    color: var(--color-01);
}

.header-langs-dropdown-btn {
    height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.header-langs-dropdown-btn > img {
    height: 100%;
}

.header-langs-dropdown {
    border: 1px solid var(--color-05);
    border-radius: var(--radius-l);
    
    background-color: #FFFFFF;

    opacity: 0;
    
    display: flex;
    flex-direction: column;
    gap: var(--space-s);

    padding: var(--space-m);

    transform: translateY(80px);
    -webkit-transform: translateY(80px);

    position: absolute;

    top: calc(100% - (var(--space-xxl) / 2));
    right: var(--space-xxl);

    z-index: 1;

    visibility: hidden;

    transition: 0.4s;
    -webkit-transition: 0.4s;
}

.header-langs-dropdown._active {
    opacity: 1;

    transform: translateY(0);
    -webkit-transform: translateY(0);

    visibility: visible;
}

.header-lang-switch-btn {
    width: max-content;
    
    color: var(--color-07);

    display: flex;
    align-items: center;
    gap: var(--space-s);
}

.header-lang-switch-btn > img {
    width: 18px;
}

.mobile-header-open-btn {
    display: none;
    flex-direction: column;
    gap: 7px;

    cursor: pointer;
}

.mobile-header-open-btn > div {
    width: 28px;
    height: 2px;

    border-radius: var(--radius-l);

    background-color: var(--color-01);
}

.mobile-header {
        width: calc(100% - (2 * var(--space-xs)));

    border: 1px solid var(--color-05);
    border-radius: var(--radius-l);
    
    background-color: #FFFFFF;

    display: flex;
    flex-direction: column;
    gap: 20px;

    opacity: 0;

    padding: var(--space-m);

    transform: translateY(80px);
    -webkit-transform: translateY(80px);

    position: absolute;

    top: calc(100% + var(--space-xs));
    left: var(--space-xs); 

    z-index: 3;

    visibility: hidden;

    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);
}

.mobile-header._active {
    opacity: 1;

    transform: translateY(0);
    -webkit-transform: translateY(0);

    visibility: visible;
}

.mobile-header > a {
    width: max-content;
}

@media only screen and (max-width: 800px) {
    .header-line-block:last-child {
        display: none;
    }
    
    .header-line-block > a:last-child {
        display: none;
    }

    .header-links {
        display: none;
    }

    .header-langs-dropdown {
        width: calc(100% - (2 * var(--space-xs)));

        top: calc(100% + var(--space-xs));
        left: var(--space-xs); 
    }
    
    .mobile-header-open-btn {
        display: flex;
    }
}

@media only screen and (max-width: 400px) {
    .mobile-header-links {
        padding: 20px;
    }
}