.elementor-56 .elementor-element.elementor-element-351bade7{--display:flex;--min-height:75px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--margin-top:20px;--margin-bottom:-110px;--margin-left:0px;--margin-right:0px;--padding-top:0em;--padding-bottom:0em;--padding-left:2em;--padding-right:2em;--z-index:99;overflow:visible;}.elementor-56 .elementor-element.elementor-element-38afbc67{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}body:not(.rtl) .elementor-56 .elementor-element.elementor-element-6c945cd9{left:0px;}body.rtl .elementor-56 .elementor-element.elementor-element-6c945cd9{right:0px;}.elementor-56 .elementor-element.elementor-element-6c945cd9{top:0px;text-align:start;}.elementor-56 .elementor-element.elementor-element-6c945cd9 img{height:70px;object-fit:contain;object-position:center center;}.elementor-56 .elementor-element.elementor-element-74083a9{text-align:start;}.elementor-56 .elementor-element.elementor-element-74083a9 img{height:65px;object-fit:contain;object-position:center center;}.elementor-56 .elementor-element.elementor-element-19c00d4a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-56 .elementor-element.elementor-element-69cc9378{z-index:999;--e-nav-menu-horizontal-menu-item-margin:calc( 24px / 2 );}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-menu-toggle{margin:0 auto;background-color:#02010100;}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-520c191-font-family ), Sans-serif;font-size:var( --e-global-typography-520c191-font-size );font-weight:var( --e-global-typography-520c191-font-weight );line-height:var( --e-global-typography-520c191-line-height );}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );padding-left:0px;padding-right:0px;padding-top:24px;padding-bottom:24px;}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--main .elementor-item:hover, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--main .elementor-item:focus{color:#FA7147;fill:#FA7147;}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:24px;}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown a, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-menu-toggle{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown{background-color:var( --e-global-color-7fbea4f );border-radius:8px 8px 8px 8px;}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown a:hover, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown a:focus, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown a.highlighted, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-menu-toggle:hover, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-menu-toggle:focus{color:var( --e-global-color-text );}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown a:hover, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown a:focus, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown a.highlighted{background-color:var( --e-global-color-d49ac81 );}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown .elementor-item, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-520c191-font-family ), Sans-serif;font-size:var( --e-global-typography-520c191-font-size );font-weight:var( --e-global-typography-520c191-font-weight );}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown li:first-child a{border-top-left-radius:8px;border-top-right-radius:8px;}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown li:last-child a{border-bottom-right-radius:8px;border-bottom-left-radius:8px;}.elementor-56 .elementor-element.elementor-element-69cc9378 div.elementor-menu-toggle{color:var( --e-global-color-text );}.elementor-56 .elementor-element.elementor-element-69cc9378 div.elementor-menu-toggle svg{fill:var( --e-global-color-text );}.elementor-56 .elementor-element.elementor-element-69cc9378 div.elementor-menu-toggle:hover, .elementor-56 .elementor-element.elementor-element-69cc9378 div.elementor-menu-toggle:focus{color:var( --e-global-color-secondary );}.elementor-56 .elementor-element.elementor-element-69cc9378 div.elementor-menu-toggle:hover svg, .elementor-56 .elementor-element.elementor-element-69cc9378 div.elementor-menu-toggle:focus svg{fill:var( --e-global-color-secondary );}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-menu-toggle:hover, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-menu-toggle:focus{background-color:var( --e-global-color-332724a );}.elementor-56 .elementor-element.elementor-element-6308ebd .elementor-button{background-color:var( --e-global-color-332724a );fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-56 .elementor-element.elementor-element-6308ebd .elementor-button:hover, .elementor-56 .elementor-element.elementor-element-6308ebd .elementor-button:focus{background-color:#FA7147;color:#FFFFFF;}.elementor-56 .elementor-element.elementor-element-6308ebd{margin:1px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-56 .elementor-element.elementor-element-6308ebd .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-56 .elementor-element.elementor-element-6308ebd .elementor-button:hover svg, .elementor-56 .elementor-element.elementor-element-6308ebd .elementor-button:focus svg{fill:#FFFFFF;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-56 .elementor-element.elementor-element-351bade7{--min-height:70px;--margin-top:10px;--margin-bottom:-80px;--margin-left:0px;--margin-right:0px;--padding-top:0em;--padding-bottom:0em;--padding-left:2em;--padding-right:2em;}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-520c191-font-size );line-height:var( --e-global-typography-520c191-line-height );}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown .elementor-item, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-520c191-font-size );}.elementor-56 .elementor-element.elementor-element-69cc9378{--nav-menu-icon-size:28px;}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-menu-toggle{border-radius:8px;}}@media(max-width:767px){.elementor-56 .elementor-element.elementor-element-351bade7{--min-height:60px;--margin-top:0px;--margin-bottom:-60px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-56 .elementor-element.elementor-element-38afbc67{--width:80%;}.elementor-56 .elementor-element.elementor-element-6c945cd9 img{height:32px;}.elementor-56 .elementor-element.elementor-element-74083a9 img{height:32px;}.elementor-56 .elementor-element.elementor-element-19c00d4a{--width:20%;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-520c191-font-size );line-height:var( --e-global-typography-520c191-line-height );}.elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown .elementor-item, .elementor-56 .elementor-element.elementor-element-69cc9378 .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-520c191-font-size );}}@media(min-width:768px){.elementor-56 .elementor-element.elementor-element-38afbc67{--width:25%;}.elementor-56 .elementor-element.elementor-element-19c00d4a{--width:75%;}}@media(max-width:1024px) and (min-width:768px){.elementor-56 .elementor-element.elementor-element-38afbc67{--width:25%;}.elementor-56 .elementor-element.elementor-element-19c00d4a{--width:75%;}}/* Start custom CSS for container, class: .elementor-element-351bade7 *//* ============================================================ BOS LEGAL — STICKY HEADER WHERE THIS GOES: the top-level HEADER CONTAINER in the header template (ID 56) → Advanced → Custom CSS. Nowhere else. ".elementor-56 .elementor-element.elementor-element-351bade7" must resolve to the header container, so this will not work if pasted onto the nav widget or a page. REQUIRES: that same container → Advanced → Motion Effects → Sticky: Top, Effects Offset: 60. Elementor then adds .elementor-sticky--effects once the user scrolls past 60px, and every scrolled-state rule below keys off that class. PALETTE: navy #05366E · orange #F85802 · deep #D54105 pale orange #FFB38A (for text on navy) ============================================================ */ /* ---- 1. BASE TRANSITIONS (top-of-page state) ---- Every property that changes on scroll is listed once, in one combined rule, so it animates in BOTH directions. Two separate `.elementor-56 .elementor-element.elementor-element-351bade7 { transition: ... }` blocks override each other rather than adding together. */ .elementor-56 .elementor-element.elementor-element-351bade7 { transition: background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease, padding .35s ease; } /* ---- 2. NAV LINKS AT TOP OF PAGE ---- Without this, the nav inherits --e-global-color-primary (#3D4A55, a dark body-text grey) and renders almost invisibly against the blue hero. Section 5 only ever set a SCROLLED colour, so there was no top-of-page state to switch from. */ .elementor-56 .elementor-element.elementor-element-351bade7 .elementor-nav-menu a.elementor-item { color: #FFFFFF; transition: color .3s ease; } .elementor-56 .elementor-element.elementor-element-351bade7 .elementor-nav-menu a.elementor-item:hover, .elementor-56 .elementor-element.elementor-element-351bade7 .elementor-nav-menu a.elementor-item.elementor-item-active { color: #FFB38A; /* pale orange reads on navy */ } /* ---- 3. DROPDOWN CHEVRON AT TOP OF PAGE ---- The arrow beside "Services" is a separate element from the link text, so section 2 never reaches it. All three of color, fill and stroke are set because Elementor renders the arrow as a Font Awesome in some versions and an inline in others - this covers both without having to check which. */ .elementor-56 .elementor-element.elementor-element-351bade7 .elementor-nav-menu .sub-arrow, .elementor-56 .elementor-element.elementor-element-351bade7 .elementor-nav-menu .sub-arrow i, .elementor-56 .elementor-element.elementor-element-351bade7 .elementor-nav-menu .sub-arrow svg { color: #FFFFFF; fill: #FFFFFF; stroke: #FFFFFF; transition: color .3s ease, fill .3s ease, stroke .3s ease; } .elementor-56 .elementor-element.elementor-element-351bade7 .elementor-nav-menu a.elementor-item:hover .sub-arrow, .elementor-56 .elementor-element.elementor-element-351bade7 .elementor-nav-menu a.elementor-item:hover .sub-arrow i, .elementor-56 .elementor-element.elementor-element-351bade7 .elementor-nav-menu a.elementor-item:hover .sub-arrow svg { color: #FFB38A; fill: #FFB38A; stroke: #FFB38A; } /* ---- 4. OPAL GLASS BACKGROUND (scrolled state) ---- Frosted glass = three ingredients together: a) semi-opaque white gradient (stops drift blue→violet for a pearly sheen) b) backdrop-filter blur, which frosts what scrolls beneath c) saturate() so colours behind the glass glow through Raise or lower the 0.88/0.82/0.85 alphas for more or less opacity. */ .elementor-56 .elementor-element.elementor-element-351bade7.elementor-sticky--effects { background: linear-gradient(120deg, rgba(255, 255, 255, 0.88) 0%, rgba(240, 248, 255, 0.82) 45%, rgba(248, 244, 255, 0.85) 100%); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); /* Safari */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 8px 32px rgba(0, 20, 40, 0.10); } /* ---- 5. NAV LINKS AND CHEVRON WHEN SCROLLED ---- On the light glass the white links would vanish, so they flip to BOS orange, with navy on hover. */ .elementor-56 .elementor-element.elementor-element-351bade7.elementor-sticky--effects .elementor-nav-menu a.elementor-item { color: #F85802; } .elementor-56 .elementor-element.elementor-element-351bade7.elementor-sticky--effects .elementor-nav-menu a.elementor-item:hover, .elementor-56 .elementor-element.elementor-element-351bade7.elementor-sticky--effects .elementor-nav-menu a.elementor-item.elementor-item-active { color: #05366E; } .elementor-56 .elementor-element.elementor-element-351bade7.elementor-sticky--effects .elementor-nav-menu .sub-arrow, .elementor-56 .elementor-element.elementor-element-351bade7.elementor-sticky--effects .elementor-nav-menu .sub-arrow i, .elementor-56 .elementor-element.elementor-element-351bade7.elementor-sticky--effects .elementor-nav-menu .sub-arrow svg { color: #F85802; fill: #F85802; stroke: #F85802; } .elementor-56 .elementor-element.elementor-element-351bade7.elementor-sticky--effects .elementor-nav-menu a.elementor-item:hover .sub-arrow, .elementor-56 .elementor-element.elementor-element-351bade7.elementor-sticky--effects .elementor-nav-menu a.elementor-item:hover .sub-arrow i, .elementor-56 .elementor-element.elementor-element-351bade7.elementor-sticky--effects .elementor-nav-menu a.elementor-item:hover .sub-arrow svg { color: #05366E; fill: #05366E; stroke: #05366E; } /* ---- 6. HEADER SHRINK ON SCROLL ---- Tighter padding and a slightly smaller logo, so the bar feels more compact once the user is reading. */ .elementor-56 .elementor-element.elementor-element-351bade7.elementor-sticky--effects { padding-top: 8px; padding-bottom: 8px; } .elementor-56 .elementor-element.elementor-element-351bade7 .elementor-widget-image img { transition: transform .35s ease; } .elementor-56 .elementor-element.elementor-element-351bade7.elementor-sticky--effects .elementor-widget-image img { transform: scale(0.85); } /* ---- 7. LOGO CROSS-FADE ---- Two stacked Image widgets. Set the CSS classes in each widget's Advanced → CSS Classes field: .bos-logo-white and .bos-logo-dark. White shows on the blue hero and fades out on scroll; dark fades in over the light glass. pointer-events stops the hidden logo stealing the homepage link click. DELETE THIS BLOCK if you are only using one logo. */ .elementor-56 .elementor-element.elementor-element-351bade7 .bos-logo-white, .elementor-56 .elementor-element.elementor-element-351bade7 .bos-logo-dark { transition: opacity .35s ease; } .elementor-56 .elementor-element.elementor-element-351bade7 .bos-logo-dark { opacity: 0; pointer-events: none; } .elementor-56 .elementor-element.elementor-element-351bade7.elementor-sticky--effects .bos-logo-white { opacity: 0; pointer-events: none; } .elementor-56 .elementor-element.elementor-element-351bade7.elementor-sticky--effects .bos-logo-dark { opacity: 1; pointer-events: auto; } /* ---- 8. CTA BUTTON SHEEN SWEEP ---- A skewed light streak parked off the left edge of the button, travelling right on hover. overflow:hidden clips it to the button shape. */ .elementor-56 .elementor-element.elementor-element-351bade7 .elementor-button { position: relative; overflow: hidden; } .elementor-56 .elementor-element.elementor-element-351bade7 .elementor-button::before { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .45) 50%, transparent 100%); transform: skewX(-20deg); transition: left .6s ease; } .elementor-56 .elementor-element.elementor-element-351bade7 .elementor-button:hover::before { left: 125%; } /* ---- 9. ACCESSIBILITY: REDUCED MOTION ---- Users with "reduce motion" set at OS level get instant state changes. Colours and opacity still apply; only movement goes. */ @media (prefers-reduced-motion: reduce) { .elementor-56 .elementor-element.elementor-element-351bade7, .elementor-56 .elementor-element.elementor-element-351bade7 *, .elementor-56 .elementor-element.elementor-element-351bade7::before, .elementor-56 .elementor-element.elementor-element-351bade7::after, .elementor-56 .elementor-element.elementor-element-351bade7 .elementor-button::before { transition: none !important; animation: none !important; } }/* End custom CSS */