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

.site-header {

    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(250,248,245,.94);
    backdrop-filter: blur(10px);

    box-shadow: 0 4px 18px rgba(0,0,0,.04);

    overflow: visible;
}
.header-inner {

    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 20px;

    padding: 0 1rem;
}
/* ==========================================
   LOGO
========================================== */

.site-logo {

    display: flex;
    align-items: center;

    text-decoration: none;

    position: relative;
}

.site-logo img {

    min-width: 200px;

    transform: translateY(18px);
position: relative;
top:-30px;
bottom: -30px;

}


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

.main-nav ul {

    display: flex;
    align-items: center;
    gap: 2.5rem;

    margin: 0;
    padding: 0;

    list-style: none;

}

.main-nav a {

    font-family: var(--font-body);

    font-size: .84rem;

    font-weight: 500;

    letter-spacing: .8em;

    text-transform: none;

    text-decoration: none;

    color: var(--color-text);

    transition: .25s ease;

position:relative;

}

.main-nav a:hover {

    color: var(--color-accent);

}
.main-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -.4rem;

    width: 0;

    height: 2px;

    background: var(--color-accent);

    transition: width .3s ease;

}

.main-nav a:hover::after {

    width: 100%;

}
/* ==========================================
   SEARCH
========================================== */

.search-link img {

   width: 35px;
    height: 35px;

    opacity: .75;

    transition: .25s ease;

}

.search-link:hover img {

    opacity: 1;

}