/* =============================
EURORELINE MENU SYSTEM
CORRECTED VERSION
============================= */

.erm-header-wrap{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:99999;
	display:flex;
	flex-direction:column;
	transition:transform .35s ease, opacity .35s ease;
	will-change:transform;
}

.erm-header{
	position:relative;
	width:100%;
	display:flex;
	flex-direction:column;
}

/* IMPORTANT:
   hide class must affect the WRAPPER, not the inner header */
.erm-header-wrap.erm-hide{
	transform:translateY(-100%);
}

.erm-header.erm-hide{
	transform:none !important;
}

/* =============================
TOP BAR
============================= */

.erm-topbar{
	width:100%;
	min-height:35px;
	display:flex;
	align-items:center;
	position:relative;
	z-index:99998;
	font-size:13px;
	line-height:1.4;
}

.erm-topbar-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
	max-width:1400px;
	margin:auto;
	padding-left:24px;
	padding-right:24px;
	box-sizing:border-box;
	gap:20px;
}

.erm-topbar a{
	text-decoration:none;
	transition:.25s ease;
	color:inherit;
}

/* =============================
CONTAINER
============================= */

.erm-container{
	width:100%;
	max-width:1400px;
	margin:auto;
	padding-left:24px;
	padding-right:24px;
	box-sizing:border-box;
}

/* =============================
INNER FLEX LAYOUT
============================= */

.erm-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:100%;
	min-height:100%;
}

/* =============================
SECTIONS
============================= */

.erm-section{
	display:flex;
	align-items:center;
	min-width:0;
}

.align-left{
	justify-content:flex-start;
}

.align-center{
	justify-content:center;
}

.align-right{
	justify-content:flex-end;
}

.align-space-between{
	justify-content:space-between;
}

/* =============================
LOGO
============================= */

.erm-logo{
	display:inline-flex;
	align-items:center;
	text-decoration:none;
}

.erm-logo img{
	display:block;
	max-height:60px;
	width:auto;
	transition:.3s ease;
}

/* =============================
NAVIGATION
============================= */

.erm-nav{
	display:flex;
	gap:28px;
	list-style:none;
	margin:0;
	padding:0;
	align-items:center;
}

.erm-nav > li{
	list-style:none;
	position:relative;
}

.erm-nav a{
	text-decoration:none;
	font-weight:500;
	transition:.25s ease;
	color:inherit;
	white-space:nowrap;
}

/* =============================
NORMAL SUBMENU
============================= */

.erm-nav .sub-menu:not(.mega-panel){
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	min-width:220px;
	list-style:none;
	padding:12px 0;
	margin:0;
	box-shadow:0 10px 30px rgba(0,0,0,0.08);
	z-index:100000;
	flex-direction:column;
}

.erm-nav li:hover > .sub-menu:not(.mega-panel){
	display:flex;
}

.erm-nav .sub-menu:not(.mega-panel) li{
	padding:0;
	width:100%;
}

.erm-nav .sub-menu:not(.mega-panel) a{
	display:block;
	padding:10px 16px;
	color:#111;
}

/* =============================
MEGA MENU
============================= */

.erm-nav li.erm-mega-parent{
	position:relative;
}

.erm-nav li.erm-mega-parent:hover > .mega-panel{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
	pointer-events:auto;
}

.mega-panel{
	position:absolute;
	top:100%;
	left:0;
	background:#ffffff;
	padding:30px;
	display:grid;
	grid-template-columns:repeat(3, minmax(160px, 1fr));
	gap:20px;
	min-width:600px;
	margin:0;
	list-style:none;
	opacity:0;
	visibility:hidden;
	transform:translateY(15px);
	transition:.25s ease;
	box-shadow:0 20px 40px rgba(0,0,0,.15);
	z-index:100001;
	pointer-events:none;
}

.mega-panel li{
	list-style:none;
	padding:0;
	margin:0;
}

.mega-panel a{
	display:block;
	padding:6px 0;
	color:#222 !important;
	text-decoration:none;
	font-weight:500;
	white-space:normal;
	line-height:1.4;
}

.mega-panel a:hover{
	color:#1f5d8c !important;
}

/* =============================
BUTTON
============================= */

.erm-btn{
	display:inline-block;
	padding:10px 18px;
	background:#1f5d8c;
	color:#fff;
	border-radius:6px;
	text-decoration:none;
	transition:.3s ease;
	white-space:nowrap;
}

.erm-btn:hover{
	opacity:.85;
	color:#fff;
}

/* =============================
CUSTOM IMAGE
============================= */

.erm-image{
	max-height:40px;
	width:auto;
	display:block;
}

/* =============================
SPACER
============================= */

.erm-spacer{
	width:100%;
	height:1px;
}

/* =============================
LANGUAGE SWITCHER
============================= */

.erm-language-switcher{
	display:flex;
	align-items:center;
	gap:10px;
}

.erm-language-switcher a{
	display:inline-flex;
	align-items:center;
	text-decoration:none;
}

.erm-language-switcher img{
	display:block;
	width:auto;
	height:16px;
}

/* =============================
HAMBURGER
============================= */

.erm-mobile-toggle{
	display:none;
	flex-direction:column;
	cursor:pointer;
	gap:6px;
}

.erm-mobile-toggle span{
	width:28px;
	height:3px;
	background:#fff;
	transition:.3s ease;
	display:block;
}

.erm-header.scrolled .erm-mobile-toggle span{
	background:#111;
}

/* animation */

.erm-mobile-toggle.active span:nth-child(1){
	transform:rotate(45deg) translate(5px,6px);
}

.erm-mobile-toggle.active span:nth-child(2){
	opacity:0;
}

.erm-mobile-toggle.active span:nth-child(3){
	transform:rotate(-45deg) translate(5px,-6px);
}

/* =============================
MOBILE MENU PANEL
============================= */

.erm-mobile-menu{
	position:fixed;
	top:0;
	right:-100%;
	width:320px;
	max-width:88vw;
	height:100vh;
	background:#fff;
	transition:.35s ease;
	z-index:999999;
	padding:40px 25px;
	box-sizing:border-box;
	overflow-y:auto;
}

.erm-mobile-menu.open{
	right:0;
}

.erm-mobile-menu-inner{
	padding-top:40px;
}

.erm-mobile-nav{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	flex-direction:column;
	gap:20px;
}

.erm-mobile-nav li{
	list-style:none;
}

.erm-mobile-nav a{
	text-decoration:none;
	color:#111;
	font-size:18px;
}

.erm-mobile-nav .sub-menu{
	list-style:none;
	margin:10px 0 0 15px;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:10px;
}

/* =============================
OVERLAY EFFECT
============================= */

body.erm-menu-open{
	overflow:hidden;
}

/* =============================
SCROLLED SHADOW
============================= */

.erm-header.scrolled{
	box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

/* =============================
RESPONSIVE BREAKPOINT
============================= */

@media(max-width:768px){

	.erm-topbar{
		display:none;
	}

	.erm-inner{
		justify-content:space-between;
	}

	.erm-section{
		display:none;
	}

	.erm-section:first-child{
		display:flex;
		flex-basis:auto !important;
	}

	.erm-mobile-toggle{
		display:flex;
	}

	.erm-container{
		padding-left:18px;
		padding-right:18px;
	}

	.mega-panel{
		position:static;
		min-width:0;
		width:100%;
		padding:15px 0 0 0;
		box-shadow:none;
		grid-template-columns:1fr;
		gap:10px;
		opacity:1;
		visibility:visible;
		transform:none;
		pointer-events:auto;
		display:grid;
	}
}