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

.header {

    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    height: var(--header-height);

    background: rgba(255,255,255,.95);

    backdrop-filter: blur(14px);

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

    transition: var(--transition);

}

/* =====================================================
   CONTAINER
===================================================== */

.header .container {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

}

/* =====================================================
   LOGO
===================================================== */

.logo {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-shrink: 0;

}

.logo:hover {

    opacity: .9;

}

.logo__image {

    width: 95px;

    height: 95px;

    flex-shrink: 0;

}

.logo__image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}

.logo__text {

    display: flex;

    flex-direction: column;

}

.logo__title {

    font-size: 32px;

    font-weight: 800;

    letter-spacing: -.03em;

    color: var(--color-dark);

}

.logo__subtitle {

    margin-top: 4px;

    font-size: 18px;

    color: var(--color-gray);

    letter-spacing: .03em;

    text-transform: uppercase;

}

/* =====================================================
   NAVIGATION
===================================================== */

.navigation {

    margin-left: auto;

}

.navigation__list {

    display: flex;

    align-items: center;

    gap: 38px;

}

.navigation__item a {

    position: relative;

    font-size: 18px;

    font-weight: 600;

    color: var(--color-dark);

    transition: var(--transition);

}

.navigation__item a:hover {

    color: var(--color-primary);

}

.navigation__item a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -10px;

    width: 0;

    height: 2px;

    background: var(--color-primary);

    transition: var(--transition);

}

.navigation__item a:hover::after {

    width: 100%;

}


/* =====================================================
   BURGER
===================================================== */

.burger {

    display: none;

    width: 44px;

    height: 44px;

    align-items: center;

    justify-content: center;

    cursor: pointer;

}

.burger span {

    width: 24px;

    height: 2px;

    background: var(--color-dark);

}

/* =====================================================
   SCROLLED
===================================================== */

.header.scrolled {

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

}