/** menu style **/
.menu-header {
	display: flex;
	align-items: center;
	gap: 20px;
	border-bottom: 1px solid var(--borderColor);
	padding: 15px;
	position: sticky;
    top: 0;
    background: var(--bg-color);
}
.menu-header h3 {
	font-size: 20px;
	margin: 0;
}
.close-icon {
	display: flex;
	cursor: pointer;
}
.navigation-menu {
	display: flex;
	flex-direction: column;
	max-width: 500px;
	width: 100%;
	border-radius: 20px;
	background: var(--bg-color);
	opacity: 0;
	pointer-events: none;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%) scale(1.2);
	box-shadow: 0 0 10px var(--borderColor);
	padding: 20px 0;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 2;
}
.navigation-menu ul {
	list-style: none;
	padding: 0;
	width: 100%;
}
.navigation-menu img {
	width: 25px;
	height: 25px;
	transition: 0.3s;
	cursor: pointer;
	border-radius: 50%;
}
.parent-items li {
	padding: 15px;
	display: flex;
	flex-direction: column-reverse;
}
.parent-items li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.parent-items li div {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.parent-items li ul {
	margin-top: 20px;
	background: #f4f6f8;
	border-radius: 5px;
	display: none;
}
.parent-items li ul li ul {
	background-color: #e0e5e9;
}
.navigation-wrapper {
	overflow-x: hidden;
	max-height: 600px;
}
.parent-item .element {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px;
	font-size:18px;
}
.parent-item > div {
	display: none;
}
.sub-list {
    display: grid;
    gap: 20px;
    padding: 0px 20px;
    margin-top: 20px;
}
.child-item {
    padding: 10px;
    font-size: 18px;
    border-radius: 10px;
    transition: 0.3s;
}
.child-item a {
    display: block;
}
.child-item:hover {
	background-color: var(--hoverColor);
}
.navigation-menu.menu {
	max-width: 450px;
}
.navigation-menu img.active {
	transform: rotate(-90deg);
}
.parent-items li ul.active {
	display: revert;
}