/*==========================================================
Site Header
==========================================================*/

.site-header {

    position: fixed;

    top: 24px;

    left: 50%;

    transform: translateX(-50%);

    width: min(1400px, calc(100% - 48px));

    z-index: 1000;

}

.site-header-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 3rem;

    padding: 1rem 1rem;

    border-radius: 32px;

    background: rgba(22,22,24,.72);

    backdrop-filter: blur(30px);

    border: 10px solid rgba(255,255,255,.08);

    box-shadow:
        0 20px 60px rgba(0,0,0,.35);

}
.brand {

    position: relative;

    display: flex;

    align-items: center;

    padding-left: 240px;

}


.brand-text h1 {

    margin: 0;

    font-size: 1.8rem;

}
.brand-text p {

    margin: .25rem 0 0;

    color: var(--color-text-secondary);

}

.brand-scene {

    position: absolute;

    left: 0;

    top: 50%;

    width: 380px;

    height: 0;

}

.brand-illustration {

    position: absolute;

    left: 500px;

    bottom: -160px;

    width: 280px;

    height: auto;

    z-index: 10;

    pointer-events: none;

}

.main-nav {

    display: flex;

    gap: 2.5rem;

}
.main-nav a {

    position: relative;

    font-weight: 600;

    transition: color .25s;
    font-size: 1.6rem;  
}
.main-nav a:hover::after {

    transform: scaleX(1.1);

}

.main-nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -10px;

    width: 100%;

    height: 2px;

    background: var(--color-primary);

    transform: scaleX(0);

    transition: transform .25s;

}