/* ==========================================
   HEADER
========================================== */

.header {
    position: sticky;
    top: 0;
    z-index: 1000;

    height: 92px;

    background: rgba(250, 245, 240, .94);

    backdrop-filter: blur(14px);

    border-bottom: 1px solid var(--border);
}


/* ---------- ЛОГОТИП ---------- */

.logo {
    position: absolute;

    left: 32px;
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
}

.logo img {
    height: 60px;
    width: auto;

    display: block;

    transition: .3s;
}

.logo:hover img {
    transform: scale(1.03);
}


/* ---------- КОНТЕЙНЕР ---------- */

.header .container {
    height: 100%;

    display: flex;

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


/* =========================================================
   ПЛАНШЕТ
========================================================= */

@media (max-width: 900px) {

    .header {
        height: 82px;
    }

    .logo {
        left: 22px;
    }

    .logo img {
        height: 52px;
    }

    .header .container {
        padding-left: 170px;
    }

}


/* =========================================================
   ТЕЛЕФОН
========================================================= */

@media (max-width: 600px) {

    .header {
        height: auto;
        min-height: 76px;
    }


    /* Логотип */

    .logo {
        position: static;

        transform: none;

        padding: 10px 0 10px 16px;
    }

    .logo img {
        height: 48px;
    }


    /* Контейнер */

    .header .container {
        height: auto;

        padding: 0 16px 12px;

        justify-content: center;
    }

}