.masterbar-mobile,
.masterbar {
    background: var(--color-masterbar-background);
    font-size: 16px;
    display: flex;
    height: 80px;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--height-topbar) + var(--height-noticebar)); /* offset the top-bar + any notice bar above it */
    width: 100%;
    z-index: 200;
    max-width: var(--max-width);
    margin: 0 auto;
    transition: top 0.28s ease;
}
.masterbar-mobile {
    top: var(--height-noticebar); /* top-bar is hidden on mobile, so only offset by the notice bar */
    display: none;
}

/* "Stay visible while scrolling" notice bar (.notice-bar--fixed) leaves normal document
   flow, so the top-bar needs pushing down explicitly here instead of relying on flow —
   and the scroll-triggered sticky nav needs to sit below it rather than at the very top. */
.notice-bar--fixed ~ .top-bar {
    margin-top: var(--height-noticebar);
}
.notice-bar--fixed ~ .masterbar.sticky {
    top: var(--height-noticebar);
}
.masterbar__content {
    max-width: var(--max-width);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 20px;
    flex: 1;
    height: 100%;
}
.masterbar__section {
    display: flex;
    flex-direction: row;
}
.masterbar__logo {
    height: 44px;
    position: relative;
    display: flex;
    align-items: center;
}

.masterbar__logo-img {
   width: 63px;
}

ul.masterbar__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* Bootstrap's own .nav class (also loaded on this page) sets flex-wrap:wrap, which
       this bar was never designed to handle — its fixed 80px height doesn't leave room
       for a second line, so items that wrap end up overlapping the content below instead
       of appearing on a visible second row. Force single-row and rely on the breakpoint
       below to hand off to the mobile menu once there's genuinely not enough width. */
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.masterbar__link-item, .masterbar__links li, .masterbar__links li a {
    /*margin: 0 28px 0 0;*/
    margin: 0 15px 0 0;
}

.masterbar__link, .masterbar__links li, .masterbar__links li a {
    color: var(--color-masterbar-text);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
}



.masterbar-mobile-nav {
    background: rgba(0,0,0,0.95);
    height: 0;
    overflow-y: scroll;
    -webkit-transition: height 0.5s ease-in;
    transition: height 0.5s ease-in;
}


ul.masterbar-mobile-nav__links {
    padding: 55px 35px;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
}
.masterbar-mobile-nav ul {
    padding: 15px 15px;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
}
.masterbar-mobile-nav li a {
    text-decoration: none;
    color: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    /*justify-content: space-between;*/
    height: 40px;
    width: 100%;
    border-bottom: 1px solid #595B5D;

    /* move this */
    text-transform: uppercase;
    font-weight: 800;
    font-size: 13px;
    color: #fff;
}
.masterbar-mobile-nav div.col-sm-6.col-sm-6:empty,
.masterbar-mobile-nav div.col-sm-6.col-sm-6:blank {
   display: none !important;
}
.masterbar-mobile-nav ul.nav-child {
    padding: 10px 10px;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
}
.masterbar-mobile-nav ul.nav-child li a {
    text-decoration: none;
    color: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    /*justify-content: space-between;*/
    height: 40px;
    width: 100%;
    border-bottom: 1px solid #484747;

    /* move this */
    text-transform: uppercase;
    font-weight: normal;
    font-size: 12px;
    color: #fff;
}
.masterbar-mobile-nav__link-item, .masterbar-mobile-nav__links li, 
.masterbar-mobile-nav__links li a {
    text-decoration: none;
    color: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    /*justify-content: space-between;*/
    height: 40px;
    width: 100%;
    border-bottom: 1px solid #595B5D;

    /* move this */
    text-transform: uppercase;
    font-weight: 800;
    font-size: 13px;
}

.masterbar-mobile-nav__link, .masterbar-mobile-nav__links li a {
    color: #fff;
}

.masterbar-mobile-nav__link-text {
}
.masterbar-mobile-nav #search_mini_form input {
    margin-bottom: 10px;
    background: transparent;
    border: 1px solid #6A6A6A;
    padding: 10px 5px;
    color: #6A6A6A;
    width: 100%;
}
/* Raised from 991px — the full nav (10 items) plus logo and the Book a Demo button
   needs ~1400px to fit in one row without wrapping/overlapping (measured directly),
   so anything narrower needs to fall back to the mobile hamburger menu instead of
   trying to cram a desktop nav into a row that doesn't have room for it. */
@media only screen and (max-width: 1450px) {
    .masterbar {
        display: none;
    }
    .masterbar-mobile {
        display: inline-block;
    }
}

/* Joomla 6's own mod_menu toggle button only opens submenus via click/keyboard --
   its Nav JS has no hover fallback at all. Hide the button and bring back the
   classic hover-to-open (plus :focus-within for keyboard users tabbing to the
   parent link) behavior this nav has always used instead. Positioning only --
   no color/spacing redesign here. */
#masterbar .mod-menu .mod-menu__toggle-sub {
    display: none;
}

#masterbar .mod-menu li.parent {
    position: relative;
}

#masterbar .mod-menu .mod-menu__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
}

#masterbar .mod-menu li.parent:hover > .mod-menu__sub,
#masterbar .mod-menu li.parent:focus-within > .mod-menu__sub {
    display: block;
}