/* ========================================
   Fixed Header on Scroll Styles
   ======================================== */

.top_bar.scroll {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    animation-name: slideDown;
    -webkit-animation-name: slideDown;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    visibility: visible !important;
    background: #1a1a1a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.top_bar.scroll .header_style_wrapper {
    background: #1a1a1a !important;
}

.top_bar.scroll #menu_wrapper div .nav > li > a {
    color: #fff !important;
    transition: color 0.3s ease;
}

.top_bar.scroll #menu_wrapper div .nav > li > a:hover {
    color: #c9a961 !important;
}

.top_bar.scroll #tg_reservation {
    border-color: #fff !important;
    color: #fff !important;
}

.top_bar.scroll #mobile_nav_icon {
    border-color: #fff !important;
}

/* Slide down animation */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@-webkit-keyframes slideDown {
    from {
        -webkit-transform: translateY(-100%);
    }
    to {
        -webkit-transform: translateY(0);
    }
}