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

.ri-header{
	position:sticky;
	top:0;
	left:0;
	width:100%;
	z-index:9999;
	background:#fff;
	border-bottom:1px solid #edf1f7;
	transition:all .35s ease;
}

.ri-header.scrolled{
	box-shadow:0 15px 45px rgba(0,0,0,.08);
	backdrop-filter:blur(12px);
}

/*==================================================
NAVBAR
==================================================*/

.ri-navbar{

	height:84px;

	display:flex;

	align-items:center;

	justify-content:space-between;

	gap:40px;

}

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

.ri-logo{

	flex:0 0 220px;

}

.ri-logo img{

	max-height:52px;

	width:auto;

	display:block;

}

.ri-site-title{

	font-size:30px;

	font-weight:800;

	color:#24346E;

	text-decoration:none;

}

/*==================================================
NAVIGATION
==================================================*/

.ri-navigation{

	flex:1;

	display:flex;

	justify-content:center;

}

.ri-menu{

	display:flex;

	align-items:center;

	gap:40px;

	list-style:none;

	margin:0;

	padding:0;

}

.ri-menu li{

	position:relative;

}

.ri-menu li a{

	display:block;

	padding:10px 0;

	font-size:16px;

	font-weight:600;

	color:#111827;

	text-decoration:none;

	transition:.3s;

}

.ri-menu li a:hover{

	color:#EC222A;

}

.current-menu-item>a{

	color:#EC222A !important;

}

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

.ri-header-actions{

	display:flex;

	align-items:center;

	gap:18px;

}

/*==================================================
SEARCH
==================================================*/

.ri-search-btn{

	width:46px;

	height:46px;

	border:none;

	border-radius:50%;

	background:#F4F7FB;

	cursor:pointer;

	display:flex;

	align-items:center;

	justify-content:center;

	transition:.3s;

}

.ri-search-btn:hover{

	background:#24346E;

	color:#fff;

}

/*==================================================
LOGIN
==================================================*/

.ri-login{

	font-weight:700;

	color:#111827;

	text-decoration:none;

	transition:.3s;

}

.ri-login:hover{

	color:#EC222A;

}

/*==================================================
BUTTON
==================================================*/

.ri-btn{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	padding:14px 28px;

	border-radius:14px;

	font-size:15px;

	font-weight:700;

	text-decoration:none;

	transition:.35s;

}

.ri-btn-primary{

	background:#EC222A;

	color:#fff;

}

.ri-btn-primary:hover{

	background:#24346E;

	transform:translateY(-3px);

	box-shadow:0 18px 35px rgba(36,52,110,.22);

}

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

.ri-mobile-toggle{

	display:none;

	width:48px;

	height:48px;

	border:none;

	background:none;

	cursor:pointer;

	position:relative;

}

.ri-mobile-toggle span{

	display:block;

	width:26px;

	height:2px;

	background:#111827;

	margin:6px auto;

	border-radius:20px;

	transition:.3s;

}

.ri-mobile-toggle.active span:nth-child(1){

	transform:translateY(8px) rotate(45deg);

}

.ri-mobile-toggle.active span:nth-child(2){

	opacity:0;

}

.ri-mobile-toggle.active span:nth-child(3){

	transform:translateY(-8px) rotate(-45deg);

}

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

@media(max-width:1100px){

	.ri-navigation{

		position:fixed;

		top:84px;

		left:-100%;

		width:300px;

		height:calc(100vh - 84px);

		background:#fff;

		padding:40px 30px;

		box-shadow:15px 0 35px rgba(0,0,0,.08);

		transition:.35s;

		justify-content:flex-start;

	}

	.ri-navigation.active{

		left:0;

	}

	.ri-menu{

		flex-direction:column;

		align-items:flex-start;

		gap:25px;

		width:100%;

	}

	.ri-header-actions{

		display:none;

	}

	.ri-mobile-toggle{

		display:block;

	}

}

@media(max-width:768px){

	.ri-logo{

		flex:1;

	}

	.ri-navbar{

		height:74px;

	}

	.ri-navigation{

		top:74px;

		height:calc(100vh - 74px);

	}

}

body.menu-open{

	overflow:hidden;

}