/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
    padding: 20px 0;
    height: 84px;
    transition: all 0.5s;
    z-index: 997;
    background: var(--bg);
    box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.06);
}

    #header #logo h1 {
        font-size: 42px;
        margin: 0;
        padding: 0;
        line-height: 1;
        font-family: "Montserrat", sans-serif;
        font-weight: 700;
    }


        #header #logo h1 a {
            color: #0c2e8a;
            line-height: 1;
            display: inline-block;
            text-decoration: none;
            position: relative;
            overflow: hidden; /* required for shine effect */
        }

            /* hover shine */
            #header #logo h1 a::after {
                content: "";
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient( 120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100% );
                transform: skewX(-20deg);
                transition: left 0.7s ease;
            }

            #header #logo h1 a:hover::after {
                left: 100%;
            }


            #header #logo h1 a span {
                color: #50d8af;
            }

    #header #logo img {
        padding: 0;
        margin: 0;
    }

@media (max-width: 768px) {
    #header {
        padding: 20px 0;
        height: 74px;
    }

        #header #logo h1 {
            font-size: 34px;
        }

        #header #logo img {
            max-height: 40px;
        }
}