/* ============================================================
   KW MEGA MENU — Complete CSS v5
   HTML structure:
     ul.header-nav-main
       └─ li.has-dropdown
            ├─ a.nav-top-link
            └─ ul.nav-dropdown          ← LEFT PANEL
                 └─ li.nav-dropdown-col
                      ├─ a              ← "Register"
                      └─ ul.nav-column  ← RIGHT PANEL
                           └─ li > a   ← "FAQ"
   ============================================================ */


/* ── Variables ──────────────────────────────────────────────── */

:root {
	--kw-gap:            31px;   /* header → dropdown vertical gap     */
	--kw-panel-py:       16px;    /* panel top/bottom padding           */
	--kw-panel-px:       16px;    /* panel left/right padding           */
	--kw-item-px:        16px;   /* <a> left/right inner padding       */
	--kw-item-py:        16px;   /* <a> top/bottom inner padding       */
	--kw-item-height:    44px;   /* <a> min-height                     */
	--kw-panel-w:        260px;  /* left panel total width             */
	--kw-panel-right-w:  240px;  /* right panel total width            */
	--kw-panel-gap:      12px;   /* gap between left and right panel   */
	--kw-radius:         10px;
	--kw-shadow:         0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	--kw-accent:         #52C1DE;
	--kw-hover-bg:       #152C320A;
	
	--kw-panel-w:        unset;  /* left panel total width             */
	--kw-panel-right-w:  unset;  /* right panel total width            */
}


/* ── Animation ──────────────────────────────────────────────── */

@keyframes kwFadeInDown {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════
   1. TOP-LEVEL NAV ITEMS
   ═══════════════════════════════════════════════════════════════ */

.header-nav-main > li.header-button{
	background: #021B47;
	border-radius: 8px;
}

.header-nav-main > li.header-button > a.nav-top-link,
.header-nav-main > li.header-button > a.nav-top-link:hover{
	color: #FFF !important;
	font-weight: 900 !important;
	font-size: 16px !important;
}

.header-nav-main > li.header-button:hover{
	color: #FFF !important;
}

.header-nav-main > li {
	margin: 0 5px;
	position: relative !important;
}

#masthead .header-nav-main.nav-left > li:not(.header-button):before{
	content: '';
    height: 3px;
    width: 100%;
    background: #52C1DE;
    left: 0;
    border: none;
    margin: 0;
    bottom: -19px;
    z-index: 0;
	transition: opacity 0.3s;
	display: block;
	position: absolute;
	opacity: 0;
}

#masthead .header-nav-main.nav-left > li:not(.header-button):hover:before,
#masthead .header-nav-main.nav-left > li:not(.header-button).current-menu-item:before{
    opacity: 1;
}

.header-nav-main > li > a.nav-top-link {
	display:        flex !important;
	align-items:    center;
	gap:            6px;
	height:         52px;
	padding:        0 18px !important;
	border-radius:  9px;
	font-weight:    600;
	font-size:      16px;
	line-height:    100%;
	text-transform: uppercase !important;
	color:          #555 !important;
	background:     transparent !important;
	transition:     background .18s ease, color .18s ease;
	position:       relative;
	white-space:    nowrap;
}

.header-nav-main > li > a.nav-top-link > i {
	display: none;
}

.header-nav-main > li > a.nav-top-link:hover,
.header-nav-main > li.current-dropdown > a.nav-top-link,
.header-nav-main > li.current-menu-item > a.nav-top-link {
	color:      #52C1DE !important;
}


.header-nav-main > li.header-button > a.nav-top-link:hover,
.header-nav-main > li.current-menu-item.header-button > a.nav-top-link{
	color: #FFF !important;
}

/* Bridge: invisible block filling the gap under the link
   so moving the cursor down into the panel doesn't close it */
.header-nav-main > li.has-dropdown > a.nav-top-link::after {
	content:    '';
	position:   absolute;
	top:        100%;
	left:       0;
	right:      0;
	height:     var(--kw-gap);
	background: transparent;
}


/* ═══════════════════════════════════════════════════════════════
   1b. PANEL TITLES (desktop only)
   Header injected by JS at the top of each panel showing the
   parent item's text. Mobile drawer is unaffected.
   ═══════════════════════════════════════════════════════════════ */

.header-nav-main li.kw-panel-title {
	display:        block !important;
	/* Match the item text's left inset: items have padding var(--kw-item-px)
	   inside their <a>, so we mirror that here. */
	padding:        12px 20px !important;
	margin:         0 0 6px !important;
	font-family:    'Inter', sans-serif !important;
	font-size:      18px !important;
	font-weight:    800 !important;
	line-height:    1 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	color:          #555 !important;
	border:         none !important;
	background:     transparent !important;
	list-style:     none !important;
	pointer-events: none !important;
	cursor:         default !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. LEFT PANEL  — ul.nav-dropdown
   ═══════════════════════════════════════════════════════════════ */

.header-nav-main > li.has-dropdown > ul.nav-dropdown {
	display:        block !important;
	visibility:     hidden !important;
	opacity:        0 !important;
	pointer-events: none !important;
	transform:      translateY(-6px) !important;
	transition:     opacity .2s ease, visibility .2s ease, transform .2s ease;

	position:   absolute !important;
	top:        calc(100% + var(--kw-gap)) !important;
	left:       0 !important;
	z-index:    9990 !important;

	width:      var(--kw-panel-w) !important;
	width:      max-content !important;
	/* min-width:  var(--kw-panel-w) !important; */
	max-width:  var(--kw-panel-w) !important;
	box-sizing: border-box !important;

	/* py/px split: top+bottom from --kw-panel-py,
	   left+right from --kw-panel-px.
	   These two values are the inset of list items
	   from the white card edge. */
	padding:       var(--kw-panel-py) var(--kw-panel-px) !important;

	background:    #fff !important;
	border-radius: var(--kw-radius) !important;
	box-shadow:    var(--kw-shadow) !important;
	margin:        0 !important;
	list-style:    none !important;
	border:        none !important;
}

.header-nav-main > li.has-dropdown.current-dropdown > ul.nav-dropdown {
	visibility:     visible !important;
	opacity:        1 !important;
	pointer-events: auto !important;
	transform:      translateY(0) !important;
	animation:      kwFadeInDown .2s ease forwards;
}

/* Kill Flatsome's dropdown arrows */
.header-nav-main > li.has-dropdown > ul.nav-dropdown::before,
.header-nav-main > li.has-dropdown > ul.nav-dropdown::after {
	display: none !important;
}
.nav-dropdown-has-arrow li.has-dropdown::after {
	display: none !important;
}

/* ── Override Flatsome's own nav-dropdown-default margin rule
   .nav-dropdown-default .nav-column li>a,
   .nav-dropdown.nav-dropdown-default>li>a { margin: 0 10px }
   That 10px horizontal margin pushes the <a> outside the panel.
   Reset it here so our padding controls the inset instead. ── */
.header-nav-main > li.has-dropdown > ul.nav-dropdown > li > a,
.header-nav-main > li.has-dropdown > ul.nav-dropdown .nav-column li > a {
	margin: 0 !important;
}


/* ── Left panel <li> ────────────────────────────────────────── */

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li:not(.kw-panel-title) {
	position:   relative !important;
	list-style: none !important;
	display:    block !important;
	/* width: auto means it fills the panel CONTENT box
	   (panel total width minus left+right padding).
	   That is already the correct inset — no extra magic needed. */
	width:      auto !important;
	margin:     0 !important;
	padding:    0 !important;
	box-sizing: border-box !important;
	float:      none !important;
	margin-bottom: 7px !important;
}

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li:not(.kw-panel-title):last-child{
	margin-bottom: 0 !important;
}

/* ── Left panel <a> ─────────────────────────────────────────── */

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li > a {
	display:     flex !important;
	align-items: center !important;
	gap:         10px;

	/* Fill the <li> width completely */
	width:      100% !important;
	box-sizing: border-box !important;

	/* Inner padding of the link itself */
	padding:       var(--kw-item-py) var(--kw-item-px) !important;
	border-radius: 10px !important;

	font-weight:    600;
	font-size:      18px;
	line-height:    100%;
	text-transform: none !important;
	white-space:    nowrap;
	color:          #2A2A2A !important;

	/* min-height keeps short labels from being squished */
	min-height: var(--kw-item-height) !important;
	height:     auto !important;
	background: transparent !important;
	border: none;
	transition: background .15s ease, color .15s ease;
}

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li > a:hover,
.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.current-dropdown > a {
	background: var(--kw-hover-bg) !important;
	color:      #1A1A1A !important;
}

/* Chevron on .nav-dropdown-col items only */
.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > a::after {
	content:     '' !important;
	margin-left: auto;
	flex-shrink: 0;
	width:       20px;
	height:      20px;
	background:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat !important;
	transition:  background-image .15s;
	position:    static !important;
	top:         auto !important;
	transform:   none !important;
}

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col:hover > a::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
}

/* Bridge on the <li>: covers the FULL gap between the <li> right
   edge and the right panel's left edge.
   Right panel left = calc(100% + panel-px + panel-gap) from <li> left,
   so from the <li> right edge the void is exactly panel-px + panel-gap. */
.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col::after {
	content:    '' !important;
	position:   absolute !important;
	top:        0 !important;
	bottom:     0 !important;
	right:      calc((var(--kw-panel-px) + var(--kw-panel-gap)) * -1) !important;
	width:      calc(var(--kw-panel-px) + var(--kw-panel-gap)) !important;
	background: transparent;
}


/* ═══════════════════════════════════════════════════════════════
   3. RIGHT PANEL  — ul.nav-column
   position:absolute anchored to the li.nav-dropdown-col.
   top = -(panel py) so the right panel's top edge aligns
   with the LEFT panel's visual top (compensates for the
   <li> being inside the panel's vertical padding).
   left = 100% of the <li> + panel gap.
   ═══════════════════════════════════════════════════════════════ */

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column {
	display:        block !important;
	visibility:     hidden !important;
	opacity:        0 !important;
	pointer-events: none !important;
	transform:      translateY(-4px) !important;
	transition:     opacity .15s ease, visibility .15s ease, transform .15s ease;

	position:  absolute !important;
	/* Offset upward by panel's top padding so both panels
	   share the same visual top edge */
	top:       calc(var(--kw-panel-py) * -1) !important;
	/* panel content width + panel right padding + inter-panel gap */
	left:      calc(100% + var(--kw-panel-px) + var(--kw-panel-gap)) !important;
	z-index:   9991 !important;

	width:      var(--kw-panel-right-w) !important;
	width:      max-content !important;
	min-width:  var(--kw-panel-right-w) !important;
	max-width:  var(--kw-panel-right-w) !important;
	box-sizing: border-box !important;

	padding:       var(--kw-panel-py) var(--kw-panel-px) !important;

	background:    #fff !important;
	border-radius: var(--kw-radius) !important;
	box-shadow:    var(--kw-shadow) !important;
	margin:        0 !important;
	list-style:    none !important;
	border:        none !important;
}

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col:hover > ul.nav-column {
	visibility:     visible !important;
	opacity:        1 !important;
	pointer-events: auto !important;
	transform:      translateY(0) !important;
	animation:      kwFadeInDown .18s ease forwards;
}


/* ── Right panel <li> ───────────────────────────────────────── */

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li:not(.kw-panel-title) {
	list-style: none !important;
	display:    block !important;
	width:      auto !important;
	margin:     0 !important;
	padding:    0 !important;
	box-sizing: border-box !important;
	float:      none !important;
	margin-bottom: 7px !important;
}

/* ── Right panel <a> ────────────────────────────────────────── */

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li > a {
	display:     flex !important;
	align-items: center !important;
	gap:         10px;

	width:      100% !important;
	box-sizing: border-box !important;

	padding:       var(--kw-item-py) var(--kw-item-px) !important;
	border-radius: 9px !important;

	font-weight:    600;
	font-size:      18px;
	line-height:    100%;
	text-transform: none !important;
	white-space:    nowrap;
	color:          #515151 !important;

	height:     auto !important;
	min-height: var(--kw-item-height) !important;
	background: transparent !important;
	transition: background .15s ease, color .15s ease;
	border: none;
}

/* Dot bullet — hidden when a menu icon is set on the item */
.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li > a::before {
	content:       '' !important;
	flex-shrink:   0;
	width:         7px;
	height:        7px;
	border-radius: 50%;
	background:    var(--kw-accent) !important;
	position:      static !important;
	top:           auto !important;
	transform:     none !important;
}

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li > a:has(> .ux-menu-icon)::before {
	display: none !important;
}

/* Sub-menu icon sizing/alignment — preserve aspect ratio at fixed height.
   filter inverts brightness while preserving hues so the SVG's white text
   reads as dark on our white panels; gradient strokes stay colored. */
.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li > a > .ux-menu-icon {
	flex-shrink: 0;
	width:       auto !important;
	height:      24px !important;
	max-width:   90px;
	object-fit:  contain;
	filter:      invert(1) hue-rotate(180deg);
}

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li > a:hover {
	background: var(--kw-hover-bg) !important;
	color:      #1A1A1A !important;
}


/* ═══════════════════════════════════════════════════════════════
   4. nav-dark (transparent/hero header)
   ═══════════════════════════════════════════════════════════════ */

.nav-dark .header-nav-main > li > a.nav-top-link {
	color: #fff !important;
}

.nav-dark .header-nav-main > li > a.nav-top-link:hover,
.nav-dark .header-nav-main > li.current-dropdown > a.nav-top-link {
	background: rgba(255,255,255,.12) !important;
	color:      #fff !important;
}


/* ═══════════════════════════════════════════════════════════════
   3b. THIRD PANEL  — ul.nav-column nested 3 levels deep
   Sits to the right of the second panel, mirroring the
   second-panel-to-first-panel relationship.
   The parent <li> needs position:relative so absolute
   positioning anchors to it (set below).
   ═══════════════════════════════════════════════════════════════ */

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li:not(.kw-panel-title) {
	position: relative !important;
}

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li > ul.nav-column {
	display:        block !important;
	visibility:     hidden !important;
	opacity:        0 !important;
	pointer-events: none !important;
	transform:      translateY(-4px) !important;
	transition:     opacity .15s ease, visibility .15s ease, transform .15s ease;

	position:  absolute !important;
	top:       calc(var(--kw-panel-py) * -1) !important;
	left:      calc(100% + var(--kw-panel-px) + var(--kw-panel-gap)) !important;
	z-index:   9992 !important;

	width:      max-content !important;
	min-width:  var(--kw-panel-right-w) !important;
	max-width:  var(--kw-panel-right-w) !important;
	box-sizing: border-box !important;

	padding:       var(--kw-panel-py) var(--kw-panel-px) !important;

	background:    #fff !important;
	border-radius: var(--kw-radius) !important;
	box-shadow:    var(--kw-shadow) !important;
	margin:        0 !important;
	list-style:    none !important;
	border:        none !important;
}

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li:hover > ul.nav-column {
	visibility:     visible !important;
	opacity:        1 !important;
	pointer-events: auto !important;
	transform:      translateY(0) !important;
	animation:      kwFadeInDown .18s ease forwards;
}

/* Bridge between 2nd and 3rd panel so the cursor can cross
   the gap without losing :hover */
.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li::after {
	content:    '' !important;
	position:   absolute !important;
	top:        0 !important;
	bottom:     0 !important;
	right:      calc((var(--kw-panel-px) + var(--kw-panel-gap)) * -1) !important;
	width:      calc(var(--kw-panel-px) + var(--kw-panel-gap)) !important;
	background: transparent;
	pointer-events: none;
}
.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li:hover::after {
	pointer-events: auto;
}

/* Chevron on 2nd-panel items that have a 3rd-level submenu */
.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li.menu-item-has-children > a::after {
	content:     '' !important;
	margin-left: auto;
	flex-shrink: 0;
	width:       20px;
	height:      20px;
	background:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat !important;
	position:    static !important;
}

/* ── 3rd panel <li> ─────────────────────────────────────────── */

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li > ul.nav-column > li:not(.kw-panel-title) {
	position:   relative !important;
	list-style: none !important;
	display:    block !important;
	width:      auto !important;
	margin:     0 !important;
	padding:    0 !important;
	box-sizing: border-box !important;
	float:      none !important;
	margin-bottom: 7px !important;
}

/* ── 3rd panel <a> ──────────────────────────────────────────── */

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li > ul.nav-column > li > a {
	display:     flex !important;
	align-items: center !important;
	gap:         10px;

	width:      100% !important;
	box-sizing: border-box !important;

	padding:       var(--kw-item-py) var(--kw-item-px) !important;
	border-radius: 9px !important;

	font-weight:    600;
	font-size:      18px;
	line-height:    100%;
	text-transform: none !important;
	white-space:    nowrap;
	color:          #515151 !important;

	height:     auto !important;
	min-height: var(--kw-item-height) !important;
	background: transparent !important;
	transition: background .15s ease, color .15s ease;
	border:     none;
}

/* Dot bullet — hidden when an icon is set */
.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li > ul.nav-column > li > a::before {
	content:       '' !important;
	flex-shrink:   0;
	width:         7px;
	height:        7px;
	border-radius: 50%;
	background:    var(--kw-accent) !important;
	position:      static !important;
	top:           auto !important;
	transform:     none !important;
}

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li > ul.nav-column > li > a:has(> .ux-menu-icon)::before {
	display: none !important;
}

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li > ul.nav-column > li > a > .ux-menu-icon {
	flex-shrink: 0;
	width:       auto !important;
	height:      24px !important;
	max-width:   90px;
	object-fit:  contain;
	filter:      invert(1) hue-rotate(180deg);
}

.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li > ul.nav-column > li > a:hover {
	background: var(--kw-hover-bg) !important;
	color:      #1A1A1A !important;
}

/* ═══════════════════════════════════════════════════════════════
   4b. NARROW DESKTOP (850px – 1100px)
   Top-nav and dropdown panels are tightened so 3-panel
   cascades + the top-level menu both fit. JS shift then
   centers the cascade in the viewport.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 850px) and (max-width: 1100px) {

	/* Top-level nav — tighter spacing & smaller text so more items fit */
	.header-nav-main > li {
		margin: 0 2px;
	}
	.header-nav-main > li > a.nav-top-link {
		padding:   0 10px !important;
		font-size: 14px;
		height:    44px;
	}
	.header-nav-main > li.header-button > a.nav-top-link {
		font-size: 14px;
	}

	/* Panels — tighter spacing only. Widths stay natural (max-content);
	   the JS shrink kicks in only if the cascade actually overflows. */
	:root {
		--kw-panel-gap: 8px;
		--kw-panel-px:  12px;
		--kw-panel-py:  12px;
		--kw-item-px:   12px;
		--kw-item-py:   12px;
	}
}


/* ═══════════════════════════════════════════════════════════════
   5. MOBILE — hand back to Flatsome accordion below 849px
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 849px) {

	.header-nav-main > li.has-dropdown > ul.nav-dropdown,
	.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column,
	.header-nav-main > li.has-dropdown > ul.nav-dropdown > li.nav-dropdown-col > ul.nav-column > li > ul.nav-column {
		position:   static  !important;
		visibility: visible !important;
		opacity:    1       !important;
		pointer-events: auto !important;
		transform:  none    !important;
		box-shadow: none    !important;
		animation:  none    !important;
		border-radius: 0   !important;
		width:      auto    !important;
		min-width:  unset   !important;
		max-width:  unset   !important;
		display:    none    !important;
	}

}


/* ═══════════════════════════════════════════════════════════════
   6. MOBILE DRAWER (#main-menu.mobile-sidebar)
   Per-level toggleable submenus with consistent hierarchy.
   ═══════════════════════════════════════════════════════════════ */

#main-menu.mobile-sidebar ul.nav.nav-sidebar,
#main-menu.mobile-sidebar ul.sub-menu {
	padding: 0 !important;
	margin:  0 !important;
	list-style: none !important;
}

/* All items as block rows */
#main-menu.mobile-sidebar li {
	position: relative !important;
	border: none !important;
	margin:  0 !important;
	padding: 0 !important;
}

/* Items with children: flex-wrap so the toggle button sits inline
   beside the link (matching the link's row height, not the whole
   expanded subtree). Submenu wraps to a new flex line below. */
#main-menu.mobile-sidebar li.menu-item-has-children {
	display:    flex !important;
	flex-wrap:  wrap !important;
	align-items: stretch !important;
}
#main-menu.mobile-sidebar li.menu-item-has-children > a {
	flex:           1 1 auto !important;
	width:          auto !important;
	padding-right:  12px !important;
}
#main-menu.mobile-sidebar li.menu-item-has-children > ul.sub-menu {
	flex:     0 0 100% !important;
	max-width: 100% !important;
}

/* Divider between TOP-LEVEL items only */
#main-menu.mobile-sidebar ul.nav-sidebar > li + li {
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Link styling — reset Flatsome's variable sizes */
#main-menu.mobile-sidebar li > a {
	display:        flex !important;
	align-items:    center !important;
	gap:            12px !important;
	width:          100% !important;
	box-sizing:     border-box !important;
	padding:        14px 50px 14px 16px !important; /* right pad reserved for toggle */
	font-weight:    500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color:          #fff !important;
	background:     transparent !important;
	border:         none !important;
	transition:     background .15s ease, color .15s ease !important;
}

/* Typography per depth */
#main-menu.mobile-sidebar ul.nav-sidebar > li > a {
	font-size:      18px !important;
	font-weight:    700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	padding-top:    18px !important;
	padding-bottom: 18px !important;
}
#main-menu.mobile-sidebar li li > a            { font-size: 16px !important; padding-left: 32px !important; }
#main-menu.mobile-sidebar li li li > a         { font-size: 15px !important; padding-left: 48px !important; }
#main-menu.mobile-sidebar li li li li > a      { font-size: 14px !important; padding-left: 64px !important; }

/* Tap / current state — accent text only, no background tint */
#main-menu.mobile-sidebar li > a:hover,
#main-menu.mobile-sidebar li > a:active,
#main-menu.mobile-sidebar li > a:focus,
#main-menu.mobile-sidebar li.current-menu-item > a,
#main-menu.mobile-sidebar li.current-menu-ancestor > a {
	color: var(--kw-accent) !important;
}

/* Icons — square icons render at 28px; wide logos preserve aspect ratio at 28px tall */
#main-menu.mobile-sidebar li > a > img.ux-sidebar-menu-icon,
#main-menu.mobile-sidebar li > a > img.ux-menu-icon {
	width:      auto !important;
	height:     28px !important;
	max-width:  110px;
	margin:     0 !important;
	object-fit: contain !important;
	flex-shrink: 0;
}

/* Toggle button — inline flex sibling of the link so it
   matches just that row's height (not the expanded subtree). */
#main-menu.mobile-sidebar li.menu-item-has-children > .toggle {
	position:   static !important;
	flex:       0 0 50px !important;
	align-self: stretch !important;
	display:    flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border:     none !important;
	color:      #fff !important;
	cursor:     pointer;
	padding:    0 !important;
	margin:     0 !important;
	transition: background .15s ease;
}
#main-menu.mobile-sidebar li.menu-item-has-children > .toggle .icon-angle-down {
	font-size: 18px;
	transition: transform .2s ease;
	display: inline-block;
}
#main-menu.mobile-sidebar li.menu-item-has-children[aria-expanded="true"] > .toggle .icon-angle-down,
#main-menu.mobile-sidebar li.menu-item-has-children.active > .toggle .icon-angle-down {
	transform: rotate(180deg);
}

/* Submenu visibility — collapsed by default at every depth.
   Flatsome uses .active on top-level toggles; our manually-added
   toggles use aria-expanded. Match both. */
#main-menu.mobile-sidebar li.menu-item-has-children > ul.sub-menu {
	display: none !important;
}
#main-menu.mobile-sidebar li.menu-item-has-children[aria-expanded="true"] > ul.sub-menu,
#main-menu.mobile-sidebar li.menu-item-has-children.active > ul.sub-menu {
	display: block !important;
}

@media (max-width: 849px){
	#main-menu.mobile-sidebar li > a{
		line-height: 1.2;
	}
}



.header-nav-main > li.wpml-ls-item{
    border: 1px solid #D2D2D2;
	border-radius: 8px;
}

.header-nav-main > li.wpml-ls-item > a > .wpml-ls-native{
	display: none;
}

.header-nav-main > li.wpml-ls-item > a > .icon-angle-down {
	font-size: 0; /* hide the font icon glyph */
	width: 14px;
	height: 9px;
	display: inline-block;
	background-image: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2721_38501)'%3E%3Cpath d='M6.99922 5.60078L10.8992 1.70078C11.0826 1.51745 11.3159 1.42578 11.5992 1.42578C11.8826 1.42578 12.1159 1.51745 12.2992 1.70078C12.4826 1.88411 12.5742 2.11745 12.5742 2.40078C12.5742 2.68411 12.4826 2.91745 12.2992 3.10078L7.69922 7.70078C7.59922 7.80078 7.49089 7.87161 7.37422 7.91328C7.25755 7.95495 7.13255 7.97578 6.99922 7.97578C6.86589 7.97578 6.74089 7.95495 6.62422 7.91328C6.50755 7.87161 6.39922 7.80078 6.29922 7.70078L1.69922 3.10078C1.51589 2.91745 1.42422 2.68411 1.42422 2.40078C1.42422 2.11745 1.51589 1.88411 1.69922 1.70078C1.88255 1.51745 2.11589 1.42578 2.39922 1.42578C2.68255 1.42578 2.91588 1.51745 3.09922 1.70078L6.99922 5.60078Z' fill='%23515151'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2721_38501'%3E%3Crect width='9' height='14' fill='white' transform='matrix(0 1 -1 0 14 0)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 9px;
	opacity: 1;
}

.header-nav-main > li.wpml-ls-item .wpml-ls-flag{
	width: 29px;
	height: 29px;
	object-fit: cover;
	border-radius: 30px;
}




/* The mobile-sidebar rules formerly here are generated from PHP so they share
   one breakpoint with the footer menus — see IPS_MENU_BREAKPOINT in functions.php. */