.top_wrapper_head {
	background-color: var(--bgColor3);
	padding: 7px 0px;
}

.top_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.top_left_head ul,
.top_right_head ul {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 15px;
}

.top_left_head ul li a,
.top_right_head ul li a {
	color: var(--peraColor2);
}

.top_left_head ul li a:hover{
	color: var(--activecolor1);
}
.top_right_head ul li a:hover{
	color: var(--activecolor1);
}

.top_left_head ul li a {
	display: flex;
	gap: 5px;
	align-items: center;
	justify-content: flex-start;
}

/*--------------------*/

.menu_bar_wrapper {
	padding: 10px 0;
}


/* Base Navigation Styles */

.custom-navbar {  
	position: sticky;
	top: 0;
	z-index: 1000;
}

.navbar-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Logo */
.navbar-logo img {
	max-height: 80px;
	width: auto;
	display: block;
}

/* Nav Menu Desktop */
.nav-list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-item {
	position: relative;
}

.nav-link {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 10px 16px;
	color: var(--headingColor1);
	text-decoration: none;
	font-weight: 500;
	font-size: var(--peraSize);
	transition: color 0.3s ease;
}

.nav-link:hover {
	color: var(--activecolor);
}

.arrow {
	display: inline-block;
	transition: transform 0.3s ease;
	font-size: 14px;
}





/* Multi-level Dropdown Styling (Desktop) */
.nav-item .dropdown-menu {
	position: absolute;
	top: 105%;
	left: 0;
	background-color: var(--bgColor2);
	min-width: 220px;
	list-style: none;
	padding: 10px 0;
	margin: 0;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	border: 1px solid var(--borderColor1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.3s ease;
	z-index: 99;
}

.nav-item.has-dropdown:hover > .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dropdown-menu li {
	position: relative;
}

.dropdown-menu a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
	color: var(--peraColor3);
	text-decoration: none;
	font-size: var(--font14);
	transition: background 0.3s ease, color 0.3s ease;
	line-height: normal;
}

.dropdown-menu a:hover {
	background-color: #f1f1f1;
	color: var(--activecolor);
}

/* Second Layer Dropdown (Nested Right Side) */
.dropdown-menu .sub-dropdown {
	top: 0;
	left: 100%;
	margin-top: -10px;
}

.dropdown-menu li.has-dropdown:hover > .sub-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Hamburger Icon Animation */
.hamburger-btn {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	z-index: 1002;
	flex-direction: column;
	justify-content: space-between;
	width: 40px;
	height: 36px;
}

.hamburger-btn .bar {
	display: block;
	width: 100%;
	height: 3px;
	background-color: var(--headingColor1);
	border-radius: 4px;
	transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Hamburger Open Motion Animation */
.hamburger-btn.active .bar-1 {
	transform: translateY(11.5px) rotate(45deg);
}

.hamburger-btn.active .bar-2 {
	opacity: 0;
	transform: translateX(-20px);
}

.hamburger-btn.active .bar-3 {
	transform: translateY(-11.5px) rotate(-45deg);
	transform: translateY(-5.5px) rotate(-43deg);
}

.order_online a.nav-link {
	background-color: #db2e25;
	border: 1px solid #db2e25;
	font-size: 18px;
	border-radius: 5px;
	color: var(--peraColor2);
	transition: 0.2s all ease;
}

.order_online a.nav-link:hover{
	background-color: #000;
	border: 1px solid #000;
}

.desktop_show{display: none;}

@media only screen and (min-width: 840px){
	.nav-item.has-dropdown:hover  .arrow{transform: rotate(180deg);}
}

/* Responsive Mobile Panel (Right to Left Slide) */

@media only screen and (max-width: 840px) {
	/*Menu Start*/
	.hamburger-btn {display: flex;}
	.nav-overlay {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.5);opacity: 0;visibility: hidden;transition: all 0.3s ease;z-index: 1000;}
	.nav-overlay.active {opacity: 1;visibility: visible;}
	.nav-menu {position: fixed;top: 0;right: -100%;width: 400px;background-color: var(--bgColor2);padding: 90px 20px 40px;box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);z-index: 1001;}
	.nav-menu.active {right: 0;}
	.nav-list {flex-direction: column;align-items: flex-start;gap: 0;width: 100%;height: calc(100vh - 87px);overflow: auto;padding-bottom: 30px;}
	.nav-item {width: 100%;border-bottom: 1px solid var(--bgColor3);}

/*	.nav-item:nth-last-child(1),
	.nav-item:nth-last-child(2),
	.nav-item:nth-last-child(3) {border-bottom: none;}*/
	
	.nav-link {justify-content: space-between;padding: 10px 5px;}

	/* Mobile Dropdown Behavior */

	.nav-item .dropdown-menu,
	.dropdown-menu .sub-dropdown {position: static;opacity: 1;visibility: visible;transform: none;box-shadow: none;border: none;display: none;background-color: var(--bgColor7);padding-left: 10px;}
	.nav-item.open > .dropdown-menu,
	.has-dropdown.open > .sub-dropdown {display: block;}
	.nav-item.open > .nav-link .arrow,
	.has-dropdown.open > a .arrow {transform: rotate(90deg);}

	.hamburger-btn.active {position: fixed;top: 20px;right: 20px;}
        
        

	/*Menu End*/

	.dropdown-menu a {padding: 8px 0px;border-top: 1px solid #cccccc5e;}
	.dropdown-menu a:hover {background-color: transparent;}
	.order_online a.nav-link {justify-content: center;}

	.top_right_head ul li a {width: 40px;height: 40px;background: var(--bgColor1);display: flex;align-items: center;justify-content: center;border-radius: 45px;}
	.top_right_head ul li a:hover {color: #fff;background: var(--bgColor3);}
	.top_right_head {width: 100%;}

	.mobile_hide {display: none;}
	.desktop_show {display: block;}

	.top_right_head ul {gap: 10px;width: 100%;justify-content: center;margin-top: 15px;}
	.top_head {justify-content: center;}

}

@media only screen and (max-width: 640px) {
	.navbar-logo img{max-height: 50px;}
	.nav-menu{padding: 70px 20px 40px;}
}

@media only screen and (max-width: 480px) {
	.nav-menu{width: calc(100% - 15px);}
}