/* ==========================================================
   MEHI ERP HEADER V6
   FULL REPLACEMENT CSS
========================================================== */

/* HIDE KADENCE HEADER */

#masthead,
.site-header,
.kadence-header-wrap,
.mobile-header-navigation,
.site-main-header-wrap{
	display:none !important;
}

/* ==========================================================
   ROOT
========================================================== */

:root{

	--primary:#2563EB;
	--secondary:#0EA5E9;

	--dark:#0B1220;
	--dark-light:#172033;

	--text:#334155;
	--text-light:#64748B;

	--border:#E2E8F0;
	--white:#FFFFFF;

}

/* ==========================================================
   TOP BAR
========================================================== */

.mehi-announcement-bar{

	height:42px;

	background:
	linear-gradient(
		90deg,
		#08111F,
		#0F172A,
		#172554
	);

	position:relative;

	overflow:hidden;

}

.mehi-announcement-bar:before{

	content:"";

	position:absolute;

	top:0;
	left:-120%;

	width:120%;
	height:100%;

	background:
	linear-gradient(
		90deg,
		transparent,
		rgba(255,255,255,.08),
		transparent
	);

	animation:shine 8s linear infinite;

}

@keyframes shine{

	100%{
		left:150%;
	}

}

.mehi-announcement-container{

	max-width:1700px;

	margin:auto;

	height:100%;

	padding:0 24px;

	display:flex;

	align-items:center;

	justify-content:space-between;

}

.announcement-left{

	display:flex;

	align-items:center;

	gap:18px;

}

.announcement-badge{

	display:flex;

	align-items:center;

	gap:10px;

	color:#fff;

	font-size:13px;

	font-weight:700;

}

.announcement-dot{

	width:8px;
	height:8px;

	border-radius:50%;

	background:#22C55E;

	box-shadow:
	0 0 0 8px rgba(34,197,94,.10);

}

.announcement-text{

	color:#CBD5E1;

	font-size:13px;

	font-weight:600;

}

.announcement-right{

	display:flex;

	align-items:center;

	gap:18px;

}

.announcement-right a{

	color:#fff;

	text-decoration:none;

	font-size:13px;

	font-weight:600;

}

/* ==========================================================
   HEADER
========================================================== */

#mehi-header{

	position:sticky;

	top:0;

	z-index:99999;

	background:
	rgba(255,255,255,.96);

	backdrop-filter:
	blur(18px);

	border-bottom:
	1px solid #E2E8F0;

}

.mehi-header-container{

	max-width:1700px;

	margin:auto;

	padding:0 24px;

	height:82px;

	display:grid;

	grid-template-columns:
	280px
	1fr
	auto;

	align-items:center;

	gap:24px;

}

/* ==========================================================
   LOGO
========================================================== */

.header-logo a{

	display:flex;

	align-items:center;

	gap:14px;

	text-decoration:none;

}

.header-logo img{

	height:56px;

	width:auto;

	object-fit:contain;

}

.logo-content{

	display:flex;

	flex-direction:column;

}

.logo-title{

	font-size:32px;

	font-weight:800;

	color:#0F172A;

	line-height:1;

	white-space:nowrap;

}

.logo-subtitle{

	font-size:11px;

	font-weight:700;

	color:#64748B;

	margin-top:4px;

	white-space:nowrap;

}

/* ==========================================================
   MENU
========================================================== */

.header-navigation{

	display:flex;

	justify-content:center;

}

.header-menu{

	list-style:none;

	display:flex;

	align-items:center;

	gap:34px;

	margin:0;
	padding:0;

}

.header-menu li{

	margin:0;

}

.header-menu a{

	text-decoration:none;

	color:#334155;

	font-size:15px;

	font-weight:700;

	white-space:nowrap;

	transition:.25s;

}

.header-menu a:hover{

	color:#2563EB;

}

/* ==========================================================
   RIGHT SIDE
========================================================== */

.header-right{

	display:flex;

	align-items:center;

	gap:12px;

}

/* SEARCH */

.header-search{

	width:240px;

}

.header-search form{

	height:48px;

	display:flex;

	align-items:center;

	border-radius:14px;

	border:1px solid #E2E8F0;

	background:#F8FAFC;

}

.header-search input{

	width:100%;

	border:none;

	outline:none;

	background:none;

	padding:0 16px;

	font-size:14px;

}

/* LOGIN */

.header-login-btn{

	height:48px;

	padding:0 18px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:14px;

	border:1px solid #E2E8F0;

	background:#fff;

	color:#334155;

	font-size:14px;

	font-weight:700;

}

/* MAIN CTA */

.header-demo-btn{

	height:52px;

	padding:0 24px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:16px;

	color:#fff;

	font-size:14px;

	font-weight:800;

	background:
	linear-gradient(
		135deg,
		#2563EB,
		#0EA5E9
	);

	box-shadow:
	0 15px 35px rgba(37,99,235,.18);

}

/* ==========================================================
   MOBILE ACTIONS
========================================================== */

.mobile-actions{

	display:none;

	align-items:center;

	gap:8px;

}

.mobile-call,
.mobile-whatsapp{

	width:42px;
	height:42px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:12px;

	background:
	linear-gradient(
		135deg,
		#2563EB,
		#0EA5E9
	);

	font-size:18px;

}

.mobile-toggle{

	width:44px;
	height:44px;

	border:none;

	background:#F1F5F9;

	border-radius:12px;

	cursor:pointer;

}

.mobile-toggle span{

	display:block;

	width:20px;

	height:2px;

	background:#0F172A;

	margin:5px auto;

}

/* ==========================================================
   MOBILE MENU
========================================================== */

#mobileMenu{

	position:fixed;

	inset:0;

	background:
	linear-gradient(
		180deg,
		#08111F,
		#0F172A
	);

	z-index:999999;

	transform:translateX(100%);

	transition:.35s;

}

#mobileMenu.active{

	transform:translateX(0);

}

.mobile-menu-inner{

	padding:24px;

}

.mobile-menu-top{

	display:flex;

	align-items:center;

	justify-content:space-between;

	margin-bottom:24px;

}

.mobile-menu-logo{

	display:flex;

	align-items:center;

	gap:12px;

	color:#fff;

	font-size:22px;

	font-weight:800;

}

.mobile-menu-logo img{

	height:42px;

	width:auto;

}

.mobile-menu-top button{

	border:none;

	background:none;

	color:#fff;

	font-size:30px;

}

.mobile-search{

	margin-bottom:25px;

}

.mobile-search input{

	width:100%;

	height:54px;

	border:none;

	border-radius:14px;

	padding:0 16px;

}

.mobile-menu-list{

	list-style:none;

	margin:0;
	padding:0;

}

.mobile-menu-list li{

	margin-bottom:18px;

}

.mobile-menu-list a{

	color:#fff;

	text-decoration:none;

	font-size:18px;

	font-weight:700;

	display:block;

}

.mobile-cta{

	margin-top:30px;

	display:flex;

	flex-direction:column;

	gap:12px;

}

.mobile-demo-btn{

	height:54px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:14px;

	font-size:15px;

	font-weight:800;

	color:#fff;

	background:
	linear-gradient(
		135deg,
		#2563EB,
		#0EA5E9
	);

}

.mobile-support-btn{

	height:54px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:14px;

	font-size:15px;

	font-weight:700;

	color:#fff;

	border:1px solid rgba(255,255,255,.15);

}

/* ==========================================================
   HOVER
========================================================== */

.header-demo-btn,
.header-login-btn,
.mobile-demo-btn{

	transition:.25s;

}

.header-demo-btn:hover,
.header-login-btn:hover,
.mobile-demo-btn:hover{

	transform:translateY(-2px);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1250px){

	.header-search{
		display:none;
	}

}

@media(max-width:1100px){

	.header-navigation,
	.header-right{

		display:none;

	}

	.mobile-actions{

		display:flex;

		justify-self:end;

	}

	.mehi-header-container{

		grid-template-columns:
		1fr
		auto;

		height:72px;

	}

}

@media(max-width:768px){

	.mehi-announcement-bar{

		display:none;

	}

	.mehi-header-container{

		padding:0 16px;

		height:68px;

	}

	.header-logo img{

		height:42px;

	}

	.logo-title{

		font-size:24px;

	}

	.logo-subtitle{

		display:none;

	}

}



.active-link{
    color:#2563EB !important;
}

.submenu-toggle{
    float:right;
    font-size:18px;
    font-weight:700;
    margin-left:12px;
    color:#60A5FA;
    cursor:pointer;
}

.mobile-menu-list .sub-menu{
    display:none;
    padding-left:16px;
    padding-top:12px;
}

.mobile-menu-list .submenu-open > .sub-menu{
    display:block;
}

.mobile-menu-list .submenu-open > a{
    color:#60A5FA !important;
}

.announcement-text{
    transition:.3s;
}