/* Babylon Elements: site-wide styles Elementor cannot set on its own widgets. */

/* Mobile Call Bar: fixed to the bottom of the screen on phones only. */
.bs-callbar { display: none; grid-template-columns: 1fr 1fr; }
.bs-callbar a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 10px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; line-height: 1.2; }
.bs-callbar a:first-child { background-color: #F4B400; color: #0B1830; }
.bs-callbar a:last-child { background-color: #0B1830; color: #FFFFFF; }
.bs-callbar svg { width: 17px; height: 17px; fill: currentColor; }
.bs-callbar i { font-size: 17px; }
.elementor-editor-active .bs-callbar { display: grid; }
@media (max-width: 767px) {
	.bs-callbar { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
	.elementor-editor-active .bs-callbar { position: static; }
	body:has(.bs-callbar) { padding-bottom: 56px; }
	body.bs-has-cookie:has(.bs-callbar) { padding-bottom: calc(56px + var(--bs-cookie-h, 0px)); }
	/* The widget's own box takes no room in the footer. */
	.elementor-widget-babylon-mobile-call-bar { margin: 0 !important; }
}

/* Top bar: "24/7" in gold; the service area text is left out on phones. */
.bs-topbar-text strong { color: #F4B400; font-weight: 600; }
.bs-topbar-text p { margin: 0; }
@media (max-width: 767px) { .bs-hide-mobile { display: none; } }

/* Our Services dropdown: padded rows that highlight on hover, as in the design. */
.bs-dropdown-links .elementor-icon-list-item > a,
.bs-dropdown-links .elementor-icon-list-item > span { display: block; padding: 10px 20px; transition: background-color .2s, color .2s; }
.bs-dropdown-links .elementor-icon-list-item > a:hover { background-color: #F3F6FA; }
.bs-dropdown-links .elementor-icon-list-icon { display: none; }
/* In the tablet and phone menu the dropdown sits on navy: lighter text, indented rows. */
@media (max-width: 1024px) {
	.bs-main-menu .e-n-menu-content > .e-con { width: 100% !important; background-color: #142341 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; }
	.bs-main-menu .bs-dropdown-links .elementor-icon-list-text { color: rgba(255, 255, 255, .8) !important; }
	.bs-main-menu .bs-dropdown-links .elementor-icon-list-item > a { padding: 12px 20px 12px 36px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
	.bs-main-menu .bs-dropdown-links .elementor-icon-list-item > a:hover { background-color: rgba(255, 255, 255, .04); }
	.bs-main-menu .bs-dropdown-links .elementor-icon-list-item > a:hover .elementor-icon-list-text { color: #F4B400 !important; }
}

/* Language list (GTranslate) under the globe icon in the top bar. */
.bs-topbar-icons { position: relative; }
.bs-lang.e-con { position: static !important; }
.bs-lang-toggle { cursor: pointer; }
.bs-lang-toggle:focus-visible .elementor-icon { outline: 2px solid #F4B400; outline-offset: 2px; }
.bs-lang.is-open .bs-lang-toggle .elementor-icon { background-color: #F4B400 !important; fill: #0B1830 !important; color: #0B1830 !important; }
.bs-lang.is-open .bs-lang-toggle .elementor-icon svg { fill: #0B1830 !important; }
.bs-lang-menu.e-con { position: absolute !important; top: calc(100% + 10px); right: 0; z-index: 9999; width: 220px !important; padding: 8px !important; border-radius: 12px; background: #FFFFFF; box-shadow: 0 24px 50px -18px rgba(11,24,48,.55); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; }
.bs-lang-menu.e-con::before { content: ""; position: absolute; top: -6px; right: 22px; width: 12px; height: 12px; background: #FFFFFF; transform: rotate(45deg); border-radius: 2px; }
.bs-lang.is-open .bs-lang-menu { opacity: 1; visibility: visible; transform: none; }
.bs-lang-menu .gtranslate_wrapper, .bs-lang-menu [id^="gt-wrapper"] { display: grid; gap: 2px; }
.bs-lang-menu .gtranslate_wrapper a, .bs-lang-menu [id^="gt-wrapper"] a { display: block; padding: 9px 12px; border-radius: 8px; font-family: "Barlow", sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; color: #0F172A !important; text-decoration: none; transition: background-color .2s, color .2s; }
.bs-lang-menu .gtranslate_wrapper a:hover, .bs-lang-menu [id^="gt-wrapper"] a:hover { background: #F3F6FA; color: #0E78B8 !important; }
.bs-lang-menu a.gt-current-lang { background: #FFF8E1; font-weight: 700; }
.bs-lang-menu br { display: none; }
.bs-lang-menu a[data-bs-label] { display: flex !important; align-items: center; gap: 10px; }
.bs-lang-menu a[data-bs-label] img { width: 24px; height: 16px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(11,24,48,.08); }
.bs-lang-menu.e-con { width: 250px !important; }

/* Cookie notice (text from the client's current site). */
.bs-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9995; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; background: rgba(7,16,31,.97); color: rgba(255,255,255,.88); box-shadow: 0 -10px 30px rgba(0,0,0,.25); font-family: "Barlow", sans-serif; font-size: 15px; line-height: 1.45; }
.bs-cookie[hidden] { display: none; }
body.bs-has-cookie { padding-bottom: var(--bs-cookie-h, 0px); }
.bs-cookie p { margin: 0; }
.bs-cookie-ok { flex: none; border: 0; border-radius: 40px; padding: 10px 24px; background: linear-gradient(180deg, #FFC933, #F4B400); color: #0B1830; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.bs-cookie-ok:hover, .bs-cookie-ok:focus { background: #FFC933; color: #0B1830; }

/* Back-to-top button. */
.bs-totop { position: fixed; right: 22px; bottom: 22px; z-index: 9990; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: #F4B400; color: #0B1830; box-shadow: 0 12px 26px -10px rgba(244,180,0,.8); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility .25s, background-color .2s; }
.bs-totop svg { width: 20px; height: 20px; }
.bs-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.bs-totop:hover, .bs-totop:focus { background: #FFC933; color: #0B1830; }
body.bs-has-cookie .bs-totop { bottom: 86px; }
@media (max-width: 767px) {
	/* Above the phone call bar (56px). */
	.bs-cookie { bottom: 56px; flex-direction: column; align-items: stretch; text-align: center; gap: 10px; padding: 14px 18px; font-size: 14px; }
	.bs-totop { right: 14px; bottom: 70px; width: 42px; height: 42px; }
	body.bs-has-cookie .bs-totop { bottom: 190px; }
}

/* Scroll reveal (reveal.js): soft fade-up, once. */
.bs-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.bs-reveal.is-in { opacity: 1; transform: none; }

/* Sticky header: a soft shadow once the page scrolls. */
.elementor-sticky--effects { box-shadow: 0 14px 34px -14px rgba(0,0,0,.6); }

/* Linked photos (Our Services): gentle zoom on hover. */
.bs-frame a { display: block; overflow: hidden; border-radius: 10px; }
.bs-frame a img { transition: transform .6s ease; }
.bs-frame a:hover img { transform: scale(1.04); }

/* Cookie notice on phones: one compact row. */
@media (max-width: 767px) {
	.bs-cookie { flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 12px !important; padding: 10px 14px !important; font-size: 13px !important; }
	.bs-cookie-ok { padding: 8px 16px; font-size: 14px; }
	body.bs-has-cookie .bs-totop { bottom: 140px; }
}

/* Small laptops (1025-1260px): the six-item menu needs the room; the phone stays in the top bar. */
@media (min-width: 1025px) and (max-width: 1260px) {
	.bs-header-call { display: none !important; }
}

/* Blog page: the "coming soon" line shows only while the post grid is empty. */
.bs-blog-empty { display: none; }
body:not(:has(.bs-blog-grid .elementor-post)) .bs-blog-empty { display: block; }

/* Header menu stays on one row, even for the moment before the web fonts are ready (the wider
   fallback font used to push the six items onto two rows while a page was loading). */
@media (min-width: 1025px) {
	[data-elementor-type="header"] .e-n-menu { --n-menu-heading-wrap: nowrap; }
	[data-elementor-type="header"] .e-n-menu-heading { flex-wrap: nowrap !important; }
	[data-elementor-type="header"] .e-n-menu-title { white-space: nowrap; }
}