/* Absolute Breakpoint Handling */
.elementor-widget-bp_navigation_mobile_0c75ac2b {
	display: none !important;
}

@media (max-width: 1024px) {
	.elementor-widget-bp_navigation_mobile_0c75ac2b {
		display: block !important;
	}
}

.bp-nav-mobile-wrapper {
	position: sticky; /* Reverted back to sticky */
	top: 8px;
    z-index: 9999;
	width: 100%;
	padding: 8px 0; /* Removed left/right padding (was 8px) */
	box-sizing: border-box;
    margin: 0; /* Reset margins */
}

.bp-nav-mobile-container {
    pointer-events: auto; /* Re-enable clicks for the actual nav */
	display: flex;
	flex-direction: column;
	background: rgba(113, 214, 221, 0.16) !important;
	backdrop-filter: blur(40.8px);
	-webkit-backdrop-filter: blur(40.8px);
	border-radius: 40px;
	width: 100%;
	padding: 8px 32px !important;
	box-sizing: border-box;
	transition: background 0.35s ease, padding 0.35s ease, border-radius 0.35s ease;
	overflow: hidden;
    margin: 0; /* Clear container margins */
}

/* Adjust padding for very small screens inside container */
@media (max-width: 480px) {
    .bp-nav-mobile-container {
        padding: 8px 16px !important; /* Reduce inner padding so logo has room */
    }
}

/* 
 * FIX FOR EXTRA GAP:
 * When absolute positioning was removed earlier, we saw the wrapper pushing content down.
 * Using absolute positioning on a pseudo element or changing how the dropdown expands 
 * helps avoid this in sticky. Let's make sure the expanded menu floats instead of pushing content.
 */
.bp-nav-mobile-container.is-open {
	background: rgba(0, 38, 44, 0.4) !important;
	padding-bottom: 40px !important;
}

/* Header Row */
.bp-nav-header-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between !important;
	width: 100%;
	box-sizing: border-box;
}

.bp-nav-logo {
	width: auto; /* Let it shrink */
	max-width: 200px;
	height: 68px;
	padding: 4px 0;
	display: flex;
	align-items: center;
	margin-right: 16px; /* Gap between logo and buttons */
}

@media (max-width: 380px) {
    .bp-nav-logo {
        max-width: 150px;
    }
}

.bp-nav-logo img {
	height: 60px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Actions Wrapper */
.bp-nav-actions {
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: center;
	margin-left: auto;
	margin-right: 0 !important;
	flex-shrink: 0;
}

/* Round Action Buttons */
.bp-nav-btn {
	position: relative !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	min-height: 56px !important;
	border-radius: 50% !important; /* Perfect circle */
	padding: 16px !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	border: none !important;
	cursor: pointer;
	outline: none;
	transition: opacity 0.2s ease, background 0.2s ease;
}

/* Adjust button size for very small screens if necessary to prevent crowding */
@media (max-width: 380px) {
    .bp-nav-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 12px !important;
    }
}

.bp-btn-mail {
	background: #EA664F !important;
	opacity: 1;
	z-index: 1;
}

.bp-nav-mobile-container.is-open .bp-btn-mail {
	opacity: 0 !important;
	pointer-events: none;
}

.bp-btn-toggle {
	background: rgba(113, 214, 221, 0.16) !important;
	z-index: 2;
}

.bp-btn-toggle svg {
	display: block;
}

.bp-btn-toggle.is-close-state {
	background: rgba(113, 214, 221, 0.16) !important;
}

/* CLOSE ICON COLOR: Light Blue */
.bp-btn-toggle.is-close-state svg,
.bp-btn-toggle.is-close-state path,
.bp-btn-toggle.is-close-state polyline {
	stroke: #71D6DD !important; /* Light blue hex */
	fill: none !important;
}

/* Menu Area (Expandable) */
.bp-nav-menu-area {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
	width: 100%;
}

/* To prevent the sticky container from pushing down the normal flow when expanded, 
   we can position the menu area absolutely when it opens, OR let it expand over the content.
   If it expands normally inside a sticky container, it will push content down if the sticky 
   wrapper height increases, UNLESS the wrapper height is constrained. */

.bp-nav-mobile-container.is-open .bp-nav-menu-area {
	/* Scroll functionality for inner panel */
	max-height: 85vh !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch;
}

/* Hide scrollbar for cleaner look */
.bp-nav-mobile-container.is-open .bp-nav-menu-area::-webkit-scrollbar {
	width: 0;
	background: transparent;
}

.bp-nav-slider {
	position: relative;
	width: 100%;
	display: flex;
	align-items: flex-start;
	padding-top: 40px; /* Gap between header and menu */
}

/* Levels */
.bp-nav-level {
	flex: 0 0 100%;
	width: 100%;
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
}

.bp-nav-level-1 {
	transform: translateX(0);
}

.bp-nav-level-2 {
	position: absolute;
	top: 40px;
	left: 100%; /* Initially offscreen to the right */
	transform: translateX(0);
	visibility: hidden;
}

.bp-nav-slider.show-level-2 .bp-nav-level-1 {
	transform: translateX(-100%);
	pointer-events: none;
	opacity: 0;
}

.bp-nav-slider.show-level-2 .bp-nav-level-2.active-sub {
	visibility: visible;
	transform: translateX(-100%); /* Slide in to view */
}

/* Level 1 Items */
.bp-nav-items {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
}

.bp-nav-link {
	font-family: 'ff-nuvo-web-pro', 'Nuvo OT', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	color: #FFFFFF !important;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	text-decoration: none !important;
	width: 100%;
}

.bp-nav-link:hover, .bp-nav-link:focus {
	color: #FFFFFF !important;
}

.bp-nav-text {
	flex: 1;
}

.bp-nav-icon svg {
	display: block;
}

/* Level 2 Items - Textual Back Button */
.bp-nav-back {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: #FFFFFF !important;
	font-family: 'ff-nuvo-web-pro', 'Nuvo OT', sans-serif !important;
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	text-decoration: none !important;
	width: auto !important;
	min-width: unset !important;
	margin-bottom: 24px;
}

.bp-nav-back span {
	color: #FFFFFF !important;
}

.bp-nav-divider {
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, 0.5);
	margin-bottom: 24px;
}

.bp-nav-category-title {
	font-family: 'ff-nuvo-web-pro', 'Nuvo OT', sans-serif !important;
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
	color: #00ADC6 !important;
	margin-bottom: 32px;
}

.bp-nav-subitems {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.bp-nav-sublink {
	font-family: 'ff-nuvo-web-pro', 'Nuvo OT', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	color: #FFFFFF !important;
	text-decoration: none !important;
}

/* CTA Button */
.bp-nav-cta-wrapper {
	margin-top: 40px;
	display: flex;
	justify-content: center;
	width: 100%;
}

.bp-nav-cta,
.bp-nav-cta * {
	background: #EA664F !important;
	border-radius: 72px !important;
	padding: 16px 40px !important;
	min-width: 240px !important;
	width: fit-content !important;
	margin: 0 auto;
	font-family: 'ff-nuvo-web-pro', 'Nuvo OT', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	color: #FFFFFF !important;
	text-align: center;
	text-decoration: none !important;
	display: inline-block;
	box-sizing: border-box;
}