/* =========================================
   UTILITY BAR
========================================= */

.utility-bar {

    background: var(--cc-navy-dark);

    color: rgba(255, 255, 255, .78);

    font-size: 12px;

    letter-spacing: .2px;

}


.utility-inner {

    min-height: 40px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.utility-left,
.utility-right {

    display: flex;

    align-items: center;

    gap: 18px;

}


.utility-right a {

    color: rgba(255, 255, 255, .82);

}


.utility-right a:hover {

    color: var(--cc-gold-light);

}


.utility-bar i {

    margin-right: 5px;

    color: var(--cc-gold);

}


.utility-divider {

    width: 1px;

    height: 14px;

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

}


/* =========================================
   HEADER SCROLL STATE
========================================= */

.site-header {

    position: relative;

    z-index: 1000;

}


.site-header.is-scrolled .main-navbar {

    box-shadow:
        0 8px 30px rgba(8, 28, 45, .08);

}


.site-header.is-scrolled .main-navbar {

    padding-top: 12px;

    padding-bottom: 12px;

}