/**
 * =================================================================
 * HEADER
 * =================================================================
 */
.header {
    background-color: #222;
    padding: 20px 0;
}
#header-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0;
    z-index: 99;
}
.header-wrapper {
    background-color: transparent;
    transition: background-color .28s ease, box-shadow .28s ease, transform .5s ease;
}
.header-hidden {
    transform: translateY(-100%);
}
.header-shown {
    transform: translateY(0);
}
.header-active {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.header-inner {
    justify-content: space-between;
    align-items: stretch;
}
/*.header-logo {
    z-index: 1;
}*/
.header-logo a {
    display: flex;
}
.header-logo a img {
    transition: width .5s ease;
    height: auto;
}
.header-active .header-logo a img {
    width: 95px;
    height: auto;
}
.header-right {
    column-gap: 20px;
}
.header-right a:not(.btn) {
    padding: 10px;
    color: var(--e-global-color-text);
}
.header-navigation {
    display: flex;
    align-items: center;
    column-gap: 30px;
    transition: all 0.3s ease;
}
/* Media Queries */
@media (width <=991px) {
    body.no-scroll .header-wrapper {
        background-color: transparent;
        height: 100%;
        transition: none;
        transform: translateY(0);
    }
    .header-wrapper .container {
        max-width: 100%;
    }
    .header-right {
        align-items: center;
    }
    .header-contact-info {
        column-gap: 20px;
    }
    .header-contact-info i.fa {
        font-size: 1.25rem;
    }
    /* Base hidden state */
    .header-navigation {
        position: absolute;
        height: 0;
        inset: 0;
        /* full width + height */
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        transition: height 300ms ease;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .header-navigation.is-open {
        height: 100vh;
        opacity: 1;
        pointer-events: auto;
        row-gap: 15px;
        overflow-y: auto;
        justify-content: center;
        padding: 80px 0 40px;
    }
}
@media (width <=575px) {
    .header-logo a img {
        width: 95px;
    }
}
@media (width >=992px) {
    .header-right {
        flex-direction: column;
        justify-content: center;
    }    
    .header-contact-info {
        position: relative;
        height: 100%;
        justify-content: end;
        column-gap: 15px;
        z-index: 100;
        opacity: 1;
        transition: height 0.3s ease-out, opacity 0.3s ease-in-out;
    }
    .header-active .header-contact-info {
        height: 0;
        visibility: hidden;
        opacity: 0;
    }
}