.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    background-color: $white;
    box-shadow: 0px 2px 16px rgba(14, 56, 94, 0.08);

    &.fixed {
        .header__wrap {
            @media (min-width: 1200px) {
                min-height: 90px;
            }
        }
    }

    &__wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 80px;
        padding: 10px 0;
        transition: .2s;

        @media (min-width: 1200px) {
            min-height: 110px;
        }
    }

    &__logo {
        img {
            max-width: 175px;
            max-height: 50px;

            @media (min-width: 1200px) {
                max-height: 70px;
            }
        }
    }

    &__nav {
        margin: 0 30px;
    }

    &__buttons {
        display: flex;
        align-items: center;
    }

    &__contacts {
        display: none;

        @media (min-width: 1200px) {
            display: flex;
            margin-right: 30px;
        }
    }

    &__btn-phone {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-right: 5px;

        @media (min-width: 1200px) {
            display: none;
        }
    }

    &__col {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        flex-shrink: 0;

        &:not(:last-child) {
            margin-right: 26px;

            &::after {
                content: '';
                position: absolute;
                top: 0;
                right: -14px;
                bottom: 0;
                width: 2px;
                pointer-events: none;
                background-color: $blue;
            }
        }
    }

    &__contact {
        display: block;
        font-size: 18px;
        line-height: 24px;
        font-weight: 500;
        transition: .3s;

        &:hover {
            @media (min-width: 1200px) {
                color: $blue;
            }
        }
    }

    &__btn-callback {
        margin-top: 1px;
        font-size: 14px;
        line-height: 22px;
        font-weight: 500;
        border-bottom: 2px dotted $black;
        transition: .3s;

        &:hover {
            @media (min-width: 1200px) {
                color: $blue;
                border-color: $blue;
            }
        }
    }

    &__burger {
        position: relative;
        margin-right: -6px;
        width: 40px;
        height: 40px;
        font-size: 0;
        line-height: 0;
        transition: .3s;

        @media (min-width: 1200px) {
            margin-right: 0;
            padding-left: 40px;
            width: auto;
            height: auto;
            color: $black;
            font-size: 16px;
            line-height: 40px;
            font-weight: 600;
        }

        svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            fill: $black;
            transition: .3s;

            @media (min-width: 1200px) {
                left: 0;
                transform: translateY(-50%);
            }
        }

        &:hover {
            @media (min-width: 1200px) {
                color: $blue;
            }

            svg {
                @media (min-width: 1200px) {
                    fill: $blue;
                }
            }
        }
    }
}