/* Dark overlay header: small logo top-left, inline nav beside it,
   contact info right-aligned, all in one bar over the hero image.
   Loaded last so it overrides style.css / css/menus/leftalignmenu.css. */

.above_top_bar {
    display: none !important;
}

/* Header used to be position:fixed, overlaid transparently on top of the
   hero banner below it (darkening the top of the hero image). Making it
   sticky instead keeps it pinned on scroll but reserves its own space in
   the normal document flow, so the banner starts fresh right after it
   instead of being covered by it. */


#wrapper {
    padding-top: 0 !important;
}


.top_bar.scroll {
    border-bottom: 0;
    background: #000000 !important;
}

.top_bar .standard_wrapper {
    height: auto !important;
    padding: 0 !important;
}

#logo_wrapper.dark_header {
    display: flex;
    align-items: center;
    float: none;
    width: 100%;
    height: 100%;
    text-align: initial;
    position: relative;
}

/* The vendor's own leftalignmenu.css sets "#logo_wrapper { display: block }"
   the moment the site's scroll JS adds a "scroll" class to .top_bar, which
   silences the flex layout above and makes the logo/nav/contact blocks stack.
   This selector out-specifies that rule (3 classes vs its 2) to keep the row intact. */
.top_bar.scroll #logo_wrapper.dark_header {
    display: flex !important;
}

#logo_wrapper.dark_header .logo_container {
    display: flex;
    align-items: center;
    float: none;
    width: auto;
    height: 100%;
    flex: 0 0 auto;
    padding-right: 30px;
    position: relative;
    top: 10px;
}

#logo_wrapper.dark_header .logo_align {
    display: block;
    line-height: 0;
}

#logo_wrapper.dark_header .logo_container .logo_wrapper.hidden {
    display: none;
}

#logo_wrapper.dark_header .logo_container .logo_wrapper img {
    width: auto;
    height: 120px;
    max-height: 120px;
}

.header_style_wrapper.scroll #logo_wrapper.dark_header .logo_container .logo_wrapper img {
    width: auto;
    height: 88px;
    max-height: 88px;
}

#logo_wrapper.dark_header .nav_inline {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 0 0 auto;
}

#logo_wrapper.dark_header .nav_inline .nav {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

#logo_wrapper.dark_header .nav_inline .nav > li {
    position: relative;
    display: block;
    margin: 0 16px;
}

#logo_wrapper.dark_header .nav_inline .nav > li > a {
    display: inline-block;
    padding: 10px 0;
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Poppins', Hind, 'Helvetica Neue', Arial, Verdana, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: color 0.3s;
}

#logo_wrapper.dark_header .nav_inline .nav > li.arrow > a:after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    margin-bottom: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.8;
}

#logo_wrapper.dark_header .nav_inline .nav > li > a:hover,
#logo_wrapper.dark_header .nav_inline .nav > li.current-menu-item > a,
#logo_wrapper.dark_header .nav_inline .nav > li.current-menu-parent > a,
#logo_wrapper.dark_header .nav_inline .nav > li.current-menu-ancestor > a {
    color: #B90000;
}

#logo_wrapper.dark_header .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    z-index: 20;
}

#logo_wrapper.dark_header .nav_inline .nav > li:hover > .sub-menu {
    display: block;
}

#logo_wrapper.dark_header .sub-menu li a {
    display: block;
    padding: 10px 20px;
    color: #333;
    font-size: 13px;
    text-transform: uppercase;
    white-space: nowrap;
}

#logo_wrapper.dark_header .sub-menu li a:hover {
    color: #B90000;
    background: #f7f7f7;
}

#logo_wrapper.dark_header .header_contact {
    display: flex;
    align-items: center;
    margin-left: auto;
    height: 100%;
}

#logo_wrapper.dark_header .header_contact .contact_item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 28px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
}

#logo_wrapper.dark_header .header_contact .contact_item a {
    color: #ffffff;
    font-weight: 600;
    transition: color 0.3s;
}

#logo_wrapper.dark_header .header_contact .contact_item a:hover {
    color: #B90000;
}

#logo_wrapper.dark_header .header_contact .contact_item span[class^="ti-"] {
    color: #B90000;
    font-size: 16px;
    flex: 0 0 auto;
}

#logo_wrapper.dark_header #logo_right_button {
    position: static;
    display: none;
    margin-left: 20px;
}

@media only screen and (max-width: 1199px) {
    #logo_wrapper.dark_header .header_contact .contact_item:first-child {
        display: none;
    }
}

@media only screen and (max-width: 991px) {
    .top_bar .standard_wrapper {
        height: 70px !important;
        min-height: 0 !important;
        max-height: 70px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #logo_wrapper.dark_header {
        padding: 0 !important;
        margin: 0 !important;
    }

    #logo_wrapper.dark_header .logo_container {
        top: 0 !important;
    }

    #logo_wrapper.dark_header .nav_inline,
    #logo_wrapper.dark_header .header_contact {
        display: none;
    }
    .header_style_wrapper.scroll #logo_wrapper.dark_header .logo_container .logo_wrapper img,
    #logo_wrapper.dark_header .logo_container .logo_wrapper img {
        height: 56px;
        max-height: 56px;
    }

    #logo_wrapper.dark_header #logo_right_button {
        display: flex !important;
        align-items: center;
        position: absolute !important;
        right: 0px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-left: 0;
        z-index: 999 !important;
    }

    #logo_wrapper.dark_header #mobile_nav_icon {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
    }

    
}

/* Hand-drawn hamburger icon, independent of the themify icon font
   (which wasn't rendering reliably on mobile). */
#logo_wrapper.dark_header .hamburger_icon,
#logo_wrapper.dark_header .hamburger_icon:before,
#logo_wrapper.dark_header .hamburger_icon:after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff;
}

#logo_wrapper.dark_header .hamburger_icon {
    position: relative;
}

#logo_wrapper.dark_header .hamburger_icon:before,
#logo_wrapper.dark_header .hamburger_icon:after {
    position: absolute;
    left: 0;
}

#logo_wrapper.dark_header .hamburger_icon:before {
    top: -7px;
}

#logo_wrapper.dark_header .hamburger_icon:after {
    top: 7px;
}