<ul class="lg:flex flex-wrap navbar-nav">
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 relative group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary after:ml-1 after:-mt-1 after:inline-block after:size-3 after:bg-[url('../images/star.svg')] max-lg:after:hidden" href="javascript:void(0);">
			<span class="inline-block">Color Card</span>
			<i class="fas fa-chevron-right lg:!hidden !block size-7 !leading-7 text-center text-xs bg-black text-white float-end"></i>
		</a>
		<div class="lg:absolute bg-white block lg:left-0 lg:right-0 lg:p-4 max-lg:py-2.5 max-lg:border-t max-lg:border-gray-200 w-full lg:w-[320px] lg:opacity-0 lg:invisible lg:translate-y-10 z-10 mt-0 text-left lg:overflow-y-auto lg:h-auto lg:max-h-[calc(100vh-80px)] duration-500 lg:group-hover:opacity-100 lg:group-hover:visible lg:group-hover:translate-y-0 max-lg:hidden mega-menu">
			<div class="row">
				<div class="w-full">
					<a href="javascript:void(0);" class="block bg-blue-600 text-white rounded-md mb-2.5">
						<div class="p-4 flex">
							<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-codepen me-4">
								<polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"></polygon><line x1="12" y1="22" x2="12" y2="15.5"></line><polyline points="22 8.5 12 15.5 2 8.5"></polyline><polyline points="2 15.5 12 8.5 22 15.5"></polyline><line x1="12" y1="2" x2="12" y2="8.5"></line>
							</svg>
							<div>
								<h6 class="font-semibold mb-0">Proper Documentation</h6>
								<span class="text-sm">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
				</div>
				<div class="w-full">
					<a href="javascript:void(0);" class="block bg-blue-600 text-white rounded-md mb-2.5">
						<div class="p-4 flex">
							<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell me-4">
								<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
								<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
							</svg>
							<div>
								<h6 class="font-semibold mb-0">Notification</h6>
								<span class="text-sm">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
				</div>
				<div class="w-full">
					<a href="javascript:void(0);" class="block bg-yellow-600 text-white rounded-md">
						<div class="p-4 flex">
							<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star me-4">
								<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
							</svg>
							<div>
								<h6 class="font-semibold mb-0">Happy Clients</h6>
								<span class="text-sm">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
				</div>
			</div>
		</div>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 relative group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary after:ml-1 after:-mt-1 after:inline-block after:size-3 after:bg-[url('../images/star.svg')] max-lg:after:hidden" href="javascript:void(0);">
			<span class="inline-block">Light Card</span>
			<i class="fas fa-chevron-right lg:!hidden !block size-7 !leading-7 text-center text-xs bg-black text-white float-end"></i>
		</a>
		<div class="lg:absolute bg-white block lg:left-0 lg:right-0 lg:p-4 max-lg:py-2.5 max-lg:border-t max-lg:border-gray-200 w-full lg:w-[320px] lg:opacity-0 lg:invisible lg:translate-y-10 z-10 mt-0 text-left lg:overflow-y-auto lg:h-auto lg:max-h-[calc(100vh-80px)] duration-500 lg:group-hover:opacity-100 lg:group-hover:visible lg:group-hover:translate-y-0 max-lg:hidden mega-menu">
			<div class="row">
				<div class="w-full">
					<a href="javascript:void(0);" class="flex flex-col hover:bg-gray-100 rounded-md">
						<div class="p-4 flex">
							<i class="fa-brands fa-facebook me-4 text-3xl"></i>
							<div>
								<h6 class="font-semibold mb-0">Facebook</h6>
								<span class="text-sm">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
				</div>
				<div class="w-full">
					<a href="javascript:void(0);" class="flex flex-col hover:bg-gray-100 rounded-md">
						<div class="p-4 flex">
							<i class="fa-brands fa-twitter me-4 text-3xl"></i>
							<div>
								<h6 class="font-semibold mb-0">Twitter</h6>
								<span class="text-sm">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
				</div>
				<div class="w-full">
					<a href="javascript:void(0);" class="flex flex-col hover:bg-gray-100 rounded-md">
						<div class="p-4 flex">
							<i class="fa-brands fa-yahoo me-4 text-3xl"></i>
							<div>
								<h6 class="font-semibold mb-0">Yahoo</h6>
								<span class="text-sm">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
				</div>
			</div>
		</div>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 relative group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary after:ml-1 after:-mt-1 after:inline-block after:size-3 after:bg-[url('../images/star.svg')] max-lg:after:hidden" href="javascript:void(0);">
			<span class="inline-block">Image Card</span>
			<i class="fas fa-chevron-right lg:!hidden !block size-7 !leading-7 text-center text-xs bg-black text-white float-end"></i>
		</a>
		<div class="lg:absolute bg-white block lg:left-0 lg:right-0 lg:p-4 max-lg:py-2.5 max-lg:border-t max-lg:border-gray-200 w-full lg:w-[320px] lg:opacity-0 lg:invisible lg:translate-y-10 z-10 mt-0 text-left lg:overflow-y-auto lg:h-auto lg:max-h-[calc(100vh-80px)] duration-500 lg:group-hover:opacity-100 lg:group-hover:visible lg:group-hover:translate-y-0 max-lg:hidden mega-menu">
			<div class="row">
				<div class="w-full">
					<a href="javascript:void(0);" class="block px-4 py-6 text-white text-center relative overflow-hidden rounded-md after:h-full after:w-full after:left-0 after:top-0 after:absolute after:bg-black/25 mb-2.5" style="background-image: url('assets/images/posts/card/pic1.jpg'); background-position: center;">
						<div class="relative z-1">
							<h6 class="font-semibold leading-[1.4] mb-0">Fashion</h6>
						</div>
					</a>
				</div>
				<div class="w-full">
					<a href="javascript:void(0);" class="block px-4 py-6 text-white text-center relative overflow-hidden rounded-md after:h-full after:w-full after:left-0 after:top-0 after:absolute after:bg-black/25 mb-2.5" style="background-image: url('assets/images/posts/card/pic2.jpg'); background-position: center;">
						<div class="relative z-1">
							<h6 class="font-semibold leading-[1.4] mb-0">Shopping</h6>
						</div>
					</a>
				</div>
				<div class="w-full">
					<a href="javascript:void(0);" class="block px-4 py-6 text-white text-center relative overflow-hidden rounded-md after:h-full after:w-full after:left-0 after:top-0 after:absolute after:bg-black/25" style="background-image: url('assets/images/posts/card/pic3.jpg'); background-position: center;">
						<div class="relative z-1">
							<h6 class="font-semibold leading-[1.4] mb-0">Winter</h6>
						</div>
					</a>
				</div>
			</div>
		</div>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary after:ml-1 after:-mt-1 after:inline-block after:size-3 after:bg-[url('../images/star.svg')] max-lg:after:hidden" href="javascript:void(0);">
			<span class="inline-block">Left Banner</span>
			<i class="fas fa-chevron-right lg:!hidden !block size-7 !leading-7 text-center text-xs bg-black text-white float-end"></i>
		</a>
		<div class="lg:absolute bg-white block xl:left-20 lg:left-0 lg:right-0 xl:pe-12 lg:pe-[30px] max-lg:py-2.5 max-lg:border-t max-lg:border-gray-200 w-full xl:w-[calc(100%-160px)] xl:max-w-[calc(100%-160px)] lg:w-[1200px] lg:max-w-full lg:opacity-0 lg:invisible lg:translate-y-10 z-10 mt-0 text-left lg:overflow-y-auto lg:h-auto lg:max-h-[calc(100vh-80px)] duration-500 lg:group-hover:opacity-100 lg:group-hover:visible lg:group-hover:translate-y-0 max-lg:hidden mega-menu">
			<div class="row">
				<div class="lg:w-2/6 w-full lg:pe-6">
					<div class="card p-12 relative after:h-full after:w-full after:left-0 after:top-0 after:absolute after:bg-black/25 h-full text-white" style="background-image: url('assets/images/posts/middle/pic1.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;">
						<div class="relative z-1">
							<span class="text-2xl mb-2 block text-white">Game Zone</span>
							<p class="text-sm mb-4 font-base">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
						</div>
					</div>
				</div>
				<div class="lg:w-1/6 w-full py-4">
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Nav Links</span>
					<ul class="lg:mb-[15px]">
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 1</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 2</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-red-600/10 text-red-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> HOT</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 3</span>
							</a>
						</li>
					</ul>
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Nav Links</span>
					<ul class="lg:mb-[15px]">
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 1</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 2</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-orange-600/10 text-orange-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> NEW</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="lg:w-1/4 w-full py-4">
					<a href="javascript:void(0);" class="flex flex-col hover:bg-gray-100 rounded-md mb-0.5">
						<div class="p-4 flex">
							<i class="fa-brands fa-facebook me-4 text-3xl"></i>
							<div>
								<h6 class="font-semibold leading-[1.4] mb-0">Facebook</h6>
								<span class="text-sm">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
					<a href="javascript:void(0);" class="flex flex-col hover:bg-gray-100 rounded-md mb-0.5">
						<div class="p-4 flex">
							<i class="fa-brands fa-twitter me-4 text-3xl"></i>
							<div>
								<h6 class="font-semibold leading-[1.4] mb-0">Twitter</h6>
								<span class="text-sm">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
					<a href="javascript:void(0);" class="flex flex-col hover:bg-gray-100 rounded-md mb-0.5">
						<div class="p-4 flex">
							<i class="fa-brands fa-linkedin me-4 text-3xl"></i>
							<div>
								<h6 class="font-semibold leading-[1.4] mb-0">Linkedin</h6>
								<span class="text-sm">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
				</div>
				<div class="lg:w-1/4 w-full py-4">
					<a href="javascript:void(0);" class="block px-4 py-6 text-white mb-2.5 text-center rounded-md relative after:h-full after:w-full after:left-0 after:top-0 after:absolute after:bg-black/25" style="background-image: url('assets/images/posts/card/pic4.jpg'); background-position: center;">
						<div class="relative z-1">
							<h6 class="font-semibold leading-[1.4] mb-0">Galaxy</h6>
						</div>
					</a>
					<a href="javascript:void(0);" class="block px-4 py-6 text-white mb-2.5 text-center rounded-md relative after:h-full after:w-full after:left-0 after:top-0 after:absolute after:bg-black/25" style="background-image: url('assets/images/posts/card/pic5.jpg'); background-position: center;">
						<div class="relative z-1">
							<h6 class="font-semibold leading-[1.4] mb-0">PC Gaming</h6>
						</div>
					</a>
					<a href="javascript:void(0);" class="block px-4 py-6 text-white text-center rounded-md relative after:h-full after:w-full after:left-0 after:top-0 after:absolute after:bg-black/25" style="background-image: url('assets/images/posts/card/pic6.jpg'); background-position: center;">
						<div class="relative z-1">
							<h6 class="font-semibold leading-[1.4] mb-0">War Zone Landscape</h6>
						</div>
					</a>
				</div>
			</div>
		</div>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary after:ml-1 after:-mt-1 after:inline-block after:size-3 after:bg-[url('../images/star.svg')] max-lg:after:hidden" href="javascript:void(0);">
			<span class="inline-block">Right Banner</span>
			<i class="fas fa-chevron-right lg:!hidden !block size-7 !leading-7 text-center text-xs bg-black text-white float-end"></i>
		</a>
		<div class="lg:absolute bg-white block xl:left-20 lg:left-0 lg:right-0 xl:ps-12 lg:pt-12 xl:pr-4 lg:px-[30px] max-lg:py-2.5 max-lg:border-t max-lg:border-gray-200 w-full xl:w-[calc(100%-160px)] lg:w-[1200px] xl:max-w-[calc(100%-160px)] lg:max-w-full lg:opacity-0 lg:invisible lg:translate-y-10 z-10 mt-0 text-left lg:overflow-y-auto lg:h-auto lg:max-h-[calc(100vh-80px)] duration-500 lg:group-hover:opacity-100 lg:group-hover:visible lg:group-hover:translate-y-0 max-lg:hidden mega-menu">
			<div class="row">
				<div class="lg:w-1/6 w-full">
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Social Icons</span>
					<ul class="lg:mb-[15px]">
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<i class="fa-solid fa-basketball me-1"></i>
								<span class="link-hover">Dribbble</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<i class="fa-brands fa-facebook me-1"></i>
								<span class="link-hover">Facebook</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<i class="fa-brands fa-instagram me-1"></i>
								<span class="link-hover">Instagram</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<i class="fa-brands fa-linkedin me-1"></i>
								<span class="link-hover">Linkedin</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<i class="fa-brands fa-pinterest me-1"></i>
								<span class="link-hover">Pinterest</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<i class="fa-brands fa-behance me-1"></i>
								<span class="link-hover">Behance</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<i class="fa-brands fa-twitter me-1"></i>
								<span class="link-hover">Twitter</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<i class="fa-brands fa-tiktok me-1"></i>
								<span class="link-hover">Tiktok</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="lg:w-1/6 w-full">
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Nav Links</span>
					<ul class="lg:mb-[15px]">
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 1</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 2</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-orange-600/10 text-orange-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> NEW</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 3</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 4</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 5</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 6</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 7</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-red-600/10 text-red-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> HOT</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 8</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 9</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 10</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="lg:w-1/6 w-full">
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Nav Links</span>
					<ul class="lg:mb-[15px]">
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 1</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 2</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-orange-600/10 text-orange-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> NEW</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 3</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 4</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 5</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 6</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 7</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-red-600/10 text-red-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> HOT</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 8</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 9</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Nav Link 10</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="lg:w-1/2 w-full">
					<div class="row h-full">
						<div class="lg:w-2/6">
							<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Nav Links</span>
							<ul class="lg:mb-[15px]">
								<li class="relative group/second">
									<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative:w-2.5" href="javascript:void(0);">
										<span class="link-hover">Nav Link 1</span>
									</a>
								</li>
								<li class="relative group/second">
									<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative:w-2.5" href="javascript:void(0);">
										<span class="link-hover">Nav Link 2</span>
										<span class="text-tiny py-0.5 px-1 font-medium rounded bg-orange-600/10 text-orange-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> NEW</span>
									</a>
								</li>
								<li class="relative group/second">
									<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative:w-2.5" href="javascript:void(0);">
										<span class="link-hover">Nav Link 3</span>
									</a>
								</li>
							</ul>
						</div>
						<div class="lg:w-2/6">
							<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Nav Links</span>
							<ul class="lg:mb-[15px]">
								<li class="relative group/second">
									<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative:w-2.5" href="javascript:void(0);">
										<span class="link-hover">Nav Link 1</span>
									</a>
								</li>
								<li class="relative group/second">
									<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative:w-2.5" href="javascript:void(0);">
										<span class="link-hover">Nav Link 2</span>
										<span class="text-tiny py-0.5 px-1 font-medium rounded bg-orange-600/10 text-orange-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> NEW</span>
									</a>
								</li>
								<li class="relative group/second">
									<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative:w-2.5" href="javascript:void(0);">
										<span class="link-hover">Nav Link 3</span>
									</a>
								</li>
							</ul>
						</div>
						<div class="lg:w-2/6">
							<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Nav Links</span>
							<ul class="lg:mb-[15px]">
								<li class="relative group/second">
									<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative:w-2.5" href="javascript:void(0);">
										<span class="link-hover">Nav Link 1</span>
									</a>
								</li>
								<li class="relative group/second">
									<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative:w-2.5" href="javascript:void(0);">
										<span class="link-hover">Nav Link 2</span>
										<span class="text-tiny py-0.5 px-1 font-medium rounded bg-orange-600/10 text-orange-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> NEW</span>
									</a>
								</li>
								<li class="relative group/second">
									<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative:w-2.5" href="javascript:void(0);">
										<span class="link-hover">Nav Link 3</span>
									</a>
								</li>
							</ul>
						</div>
						<div class="w-full lg:!pe-0 flex items-end lg:pb-px">
							<img src="assets/images/bnr1.jpg" alt="">						
						</div>
					</div>
				</div>
			</div>
		</div>
	</li>
</ul>

<ul className="nav navbar-nav">
    {megaMenu2.map(({ label, className, submenu }, index) => {
    if (!className.includes("full-width")) {
        return (
        <li key={index} className={className}>
            <Link to={"#"}>
            <span>{label}</span>
            <i className="fas fa-chevron-down tabindex"></i>
            </Link>
            <div className="sub-menu sub-menu-md p-lg-3 py-3">
            <div className="row">
                {submenu?.map(({ icon, title, text, bg, img }, inde) => {
                if (bg) {
                    return (
                    <div className="col-lg-12" key={inde}>
                        <Link to={"#"} className={\`card p-0  border-0 text-white m-b10 \${bg}\`}>
                        <div className="card-body d-flex">
                            <div dangerouslySetInnerHTML={{ __html: icon }}></div>
                            <div className="clearfix">
                            <h6 className="card-title m-b0">{title}</h6>
                            <span className="small">{text}</span>
                            </div>
                        </div>
                        </Link>
                    </div>
                    );
                } else if (img) {
                    return (
                    <div className="col-lg-12">
                        <Link to={"#"}
                        className="card px-3 py-4 text-white border-0 m-b10 text-center card-overlay bg-opacity-25"
                        style={{ backgroundImage: \`url(\${img})\`, backgroundPosition: "center" }}
                        >
                        <div className="overlay-content">
                            <h6 className="card-title m-b0">{title}</h6>
                        </div>
                        </Link>
                    </div>
                    );
                } else {
                    return (
                    <div className="col-lg-12">
                        <Link to={"#"} className="card p-0 card-hover border-0">
                        <div className="card-body d-flex">
                            <i className={icon}></i>
                            <div className="clearfix">
                            <h6 className="card-title m-b0">{title}</h6>
                            <span className="small">{text}</span>
                            </div>
                        </div>
                        </Link>
                    </div>
                    );
                }
                })}
            </div>
            </div>
        </li>
        );
    } else if (className.includes("full_width1")) {
        return (
        <li className={className}>
            <Link to={"#"}>
            <span>Left Banner</span>
            <i className="fas fa-chevron-down tabindex"></i>
            </Link>
            <div className="mega-menu ps-lg-0 py-lg-0">
            <div className="row">
                <div className="col-lg-4 pe-lg-4">
                <div
                    className="card p-5 rounded-0 border-0 m-b3 card-overlay bg-opacity-50 h-100 text-white"
                    style={{ backgroundImage: \`url(\${IMAGES.middle_pic1})\`, backgroundPosition: "center", backgroundRepeat: "no-repeat", backgroundSize: "cover" }}
                >
                    <div className="overlay-content">
                    <span className="card-title h4 m-b2 d-block text-white">Game Zone</span>
                    <p className="small">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    </div>
                </div>
                </div>
                <div className="col-lg-2 py-3">
                <span className="menu-title">Nav Links</span>
                <ul className="list-hover3">
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 1</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 2</span>
                        <span className="badge rounded bg-danger light">
                        <i className="fa-solid fa-circle"></i> HOT
                        </span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 3</span>
                    </Link>
                    </li>
                </ul>
                <span className="menu-title">Nav Links</span>
                <ul className="list-hover3">
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 1</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 2</span>
                        <span className="badge rounded bg-primary light">
                        <i className="fa-solid fa-circle"></i> NEW
                        </span>
                    </Link>
                    </li>
                </ul>
                </div>
                <div className="col-lg-3 py-3">
                <Link to={"#"} className="card p-0 card-hover border-0 m-b2">
                    <div className="card-body d-flex">
                    <i className="fa-brands fa-facebook me-3 m-t1 fs-2"></i>
                    <div className="clearfix">
                        <h6 className="card-title m-b0">Facebook</h6>
                        <span className="small">XMEGA Menu Elements</span>
                    </div>
                    </div>
                </Link>
                <Link to={"#"} className="card p-0 card-hover border-0 m-b2">
                    <div className="card-body d-flex">
                    <i className="fa-brands fa-twitter me-3 m-t1 fs-2"></i>
                    <div className="clearfix">
                        <h6 className="card-title m-b0">Twitter</h6>
                        <span className="small">XMEGA Menu Elements</span>
                    </div>
                    </div>
                </Link>
                <Link to={"#"} className="card p-0 card-hover border-0 m-b2">
                    <div className="card-body d-flex">
                    <i className="fa-brands fa-linkedin me-3 m-t1 fs-2"></i>
                    <div className="clearfix">
                        <h6 className="card-title m-b0">Linkedin</h6>
                        <span className="small">XMEGA Menu Elements</span>
                    </div>
                    </div>
                </Link>
                </div>
                <div className="col-lg-3 py-3">
                <Link to={"#"}
                    className="card px-3 py-4 text-white border-0 m-b10 text-center card-overlay bg-opacity-25"
                    style={{ backgroundImage: \`url(\${IMAGES.card_pic1})\`, backgroundPosition: "center" }}
                >
                    <div className="overlay-content">
                    <h6 className="card-title m-b0">Galaxy</h6>
                    </div>
                </Link>
                <Link to={"#"}
                    className="card px-3 py-4 text-white border-0 m-b10 text-center card-overlay bg-opacity-25"
                    style={{ backgroundImage: \`url(\${IMAGES.card_pic2})\`, backgroundPosition: "center" }}
                >
                    <div className="overlay-content">
                    <h6 className="card-title m-b0">PC Gaming</h6>
                    </div>
                </Link>
                <Link to={"#"}
                    className="card px-3 py-4 text-white border-0 text-center card-overlay bg-opacity-25"
                    style={{ backgroundImage: \`url(\${IMAGES.card_pic3})\`, backgroundPosition: "center" }}
                >
                    <div className="overlay-content">
                    <h6 className="card-title m-b0">War Zone Landscape</h6>
                    </div>
                </Link>
                </div>
            </div>
            </div>
        </li>
        );
    } else {
        return (
        <li className={className}>
            <Link to={"#"}>
            <span>Right Banner</span>
            <i className="fas fa-chevron-down tabindex"></i>
            </Link>
            <div className="mega-menu pb-lg-0 pe-lg-3">
            <div className="row">
                <div className="col-lg-2">
                <span className="menu-title">Social Icons</span>
                <ul className="list-hover3">
                    <li>
                    <Link to={"#"}>
                        <i className="fa-solid fa-basketball me-1"></i>
                        <span>Dribbble</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <i className="fa-brands fa-facebook me-1"></i>
                        <span>Facebook</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <i className="fa-brands fa-instagram me-1"></i>
                        <span>Instagram</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <i className="fa-brands fa-linkedin me-1"></i>
                        <span>Linkedin</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <i className="fa-brands fa-pinterest me-1"></i>
                        <span>Pinterest</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <i className="fa-brands fa-behance me-1"></i>
                        <span>Behance</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <i className="fa-brands fa-twitter me-1"></i>
                        <span>Twitter</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <i className="fa-brands fa-tiktok me-1"></i>
                        <span>Tiktok</span>
                    </Link>
                    </li>
                </ul>
                </div>
                <div className="col-lg-2">
                <span className="menu-title">Nav Links</span>
                <ul className="list-hover3">
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 1</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 2</span>
                        <span className="badge rounded bg-primary light">
                        <i className="fa-solid fa-circle"></i> NEW
                        </span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 3</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 4</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 5</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 6</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 7</span>
                        <span className="badge rounded bg-danger light">
                        <i className="fa-solid fa-circle"></i> HOT
                        </span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 8</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 9</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 10</span>
                    </Link>
                    </li>
                </ul>
                </div>
                <div className="col-lg-2">
                <span className="menu-title">Nav Links</span>
                <ul className="list-hover3">
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 1</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 2</span>
                        <span className="badge rounded bg-primary light">
                        <i className="fa-solid fa-circle"></i> NEW
                        </span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 3</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 4</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 5</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 6</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 7</span>
                        <span className="badge rounded bg-danger light">
                        <i className="fa-solid fa-circle"></i> HOT
                        </span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 8</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 9</span>
                    </Link>
                    </li>
                    <li>
                    <Link to={"#"}>
                        <span>Nav Link 10</span>
                    </Link>
                    </li>
                </ul>
                </div>
                <div className="col-lg-6">
                <div className="row h-100">
                    <div className="col-lg-4 m-b3">
                    <span className="menu-title">Nav Links</span>
                    <ul className="list-hover3">
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 1</span>
                        </Link>
                        </li>
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 2</span>
                            <span className="badge rounded bg-primary light">
                            <i className="fa-solid fa-circle"></i> NEW
                            </span>
                        </Link>
                        </li>
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 3</span>
                        </Link>
                        </li>
                    </ul>
                    </div>
                    <div className="col-lg-4 m-b3">
                    <span className="menu-title">Nav Links</span>
                    <ul className="list-hover3">
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 1</span>
                        </Link>
                        </li>
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 2</span>
                            <span className="badge rounded bg-primary light">
                            <i className="fa-solid fa-circle"></i> NEW
                            </span>
                        </Link>
                        </li>
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 3</span>
                        </Link>
                        </li>
                    </ul>
                    </div>
                    <div className="col-lg-4">
                    <span className="menu-title">Nav Links</span>
                    <ul className="list-hover3">
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 1</span>
                        </Link>
                        </li>
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 2</span>
                            <span className="badge rounded bg-primary light">
                            <i className="fa-solid fa-circle"></i> NEW
                            </span>
                        </Link>
                        </li>
                        <li>
                        <Link to={"#"}>
                            <span>Nav Link 3</span>
                        </Link>
                        </li>
                    </ul>
                    </div>
                    <div className="col-lg-12 pe-lg-0 d-flex align-items-end pb-lg-1">
                    <img src={IMAGES.bnr1} alt="" />
                    </div>
                </div>
                </div>
            </div>
            </div>
        </li>
        );
    }
    })}
</ul>

<ul class="nav navbar-nav">
  @for(item of menuItem; track item; let i = $index){
  <li class="has-mega-menu sub-menu-down {{ item.class }}">
	 <a [routerLink]="item.route"><span>{{ item.title }}</span>
		@if(item.badge){
		   <span class="badge badge-drop bg-{{ item.badge.color }} {{ item.badge.style }}">{{ item.badge.text }}</span> 
		}
		@if(item.subMenu){
		   <i class="fas fa-chevron-down tabindex"></i>
		}
	 </a>
	 @if(item.subMenu){
	 <div [ngClass]="item.style ? item.style : 'sub-menu sub-menu-md p-lg-3 py-3'">
		<div class="row">
		   @for(subitem of item?.subMenu; track subitem; let subitemIndex = $index){
			  @if(subitemIndex == 0 && subitem.subitemGrid && subitem.image){
				 <div class="{{ subitem.subitemGrid }}">
					<div class="card p-5 rounded-0 border-0 m-b3 card-overlay bg-opacity-50 h-100 text-white" style="background-image: url('{{subitem.image}}'); background-position: center; background-repeat: no-repeat; background-size: cover;">
					   <div class="overlay-content">
						  <span class="card-title h4 m-b2 d-block text-white">{{ subitem.title }}</span>
						  <p class="small">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
					   </div>
					</div>
				 </div>
			  } @else {
				 <div class="{{ subitem.subitemGrid?subitem.subitemGrid:'col-lg-12'}} ">
					@if(item.style && subitem.subitemGrid != 'col-lg-6'){
					   @if(subitem.subitemType == 'icon'){
						  @for(subSubItem of subitem?.subsubMenu; track subSubItem; let subIndex = $index){
						  <a href="javascript:void(0);" class="card p-0 card-hover border-0 m-b2">
							 <div class="card-body d-flex">
								<i class="{{ subSubItem.icon }} me-3 m-t1 fs-2"></i>
								<div class="clearfix">
								   <h6 class="card-title m-b0">{{ subSubItem.title }}</h6>
								   <span class="small">{{ subSubItem.desc }}</span>
								</div>
							 </div>
						  </a>
						  }
					   } @else if(subitem.subitemType == 'image') { 
						  @for(subSubItem of subitem?.subsubMenu; track subSubItem; let subIndex = $index){
						  <a href="javascript:void(0);" class="card px-3 py-4 text-white border-0 m-b10 text-center card-overlay bg-opacity-25" style="background-image: url('{{ subSubItem.image }}'); background-position: center;">
							 <div class="overlay-content">
								<h6 class="card-title m-b0">{{ subSubItem.title }}</h6>
							 </div>
						  </a>
						  }
					   } @else {
						  <span class="menu-title">{{ subitem.title }}</span>
						  <ul class="list-hover3">
							 @for(subSubItem of subitem?.subsubMenu; track subSubItem; let subIndex = $index){
							 <li>
								<a [routerLink]="subSubItem.route">
								   <i *ngIf="subSubItem.icon" class="{{ subSubItem.icon }} me-1"></i>
								   <span>{{ subSubItem.title }}</span>
								   @if(subSubItem.subsubMenuBadge){
									  <span class="badge rounded bg-{{ subSubItem.subsubMenuBadge.color }} light"><i class="fa-solid fa-circle"></i> {{ subSubItem.subsubMenuBadge.text }}</span>
								   }
								</a>
							 </li>
							 }
						  </ul>
						  @if(subitem.subsubMenu2){
						  <span class="menu-title">{{ subitem.title2 }}</span>
						  <ul class="list-hover3">
							 <li>
								@for(subSubItem of subitem?.subsubMenu2; track subSubItem; let subIndex = $index){
								   <a [routerLink]="subSubItem.route">
									  <span>{{ subSubItem.title }}</span>
									  @if(subSubItem.subsubMenuBadge){
										 <span class="badge rounded bg-{{ subSubItem.subsubMenuBadge.color }} light"><i class="fa-solid fa-circle"></i> {{ subSubItem.subsubMenuBadge.text }}</span>
									  }
								   </a>
								}
							 </li>
						  </ul>
						  }  
					   }
					} @else if(subitem.subitemGrid == 'col-lg-6'){ 
					   <div class="row h-100">
						  <div *ngFor="let e of [].constructor(3);" class="col-lg-4 m-b3">
							 <span class="menu-title">{{ subitem.title }}</span>
							 <ul class="list-hover3">
								@for(subSubItem of subitem?.subsubMenu; track subSubItem; let subIndex = $index){
								<li>
								   <a href="javascript:void(0);">
									  <i *ngIf="subSubItem.icon" class="{{ subSubItem.icon }} me-1"></i>
									  <span>{{ subSubItem.title }}</span>
									  @if(subSubItem.subsubMenuBadge){
										 <span class="badge rounded bg-{{ subSubItem.subsubMenuBadge.color }} light"><i class="fa-solid fa-circle"></i> {{ subSubItem.subsubMenuBadge.text }}</span>
									  }
								   </a>
								</li>
								}
							 </ul>
						  </div>
						  <div class="col-lg-12 pe-lg-0 d-flex align-items-end pb-lg-1">
							 <img src="images/bnr1.jpg" alt="">						
						  </div>
					   </div>
					} @else {
					   <a href="javascript:void(0);" class="card p-0 border-0 {{ subitem.subMenuClass }}" [ngStyle]="subitem.image ? {'background-image': 'url(' + subitem.image + ')', 'background-position': 'center'} : {}">                                
						  @if(subitem.image){
							 <div class="overlay-content">
								<h6 class="card-title m-b0">{{ subitem.title }}</h6>
							 </div>
						  } @else {
							 <div class="card-body d-flex">
								<span *ngIf="subitem.svg" [innerHTML]="sanitizeSvg(subitem.svg)"></span>
								<i *ngIf="subitem.icon" class="{{ subitem.icon }} me-3 m-t1 fs-2"></i>
								<div class="clearfix">
								   <h6 class="card-title m-b0">{{ subitem.title }}</h6>
								   <span class="small">{{ subitem.desc }}</span>
								</div>
							 </div>
						  }
					   </a>
					}
				 </div>
			  }
		   }
		</div>
	 </div>
	 }
  </li>
  }
</ul>
						

<ul class="lg:flex flex-wrap navbar-nav">
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 relative group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary after:ml-1 after:-mt-1 after:inline-block after:size-3 after:bg-[url('../images/star.svg')] max-lg:after:hidden" href="javascript:void(0);">
			<span class="inline-block">Demo</span>
			<i class="fas fa-chevron-right lg:!hidden !block size-7 !leading-7 text-center text-xs bg-black text-white float-end"></i>
		</a>
		<div class="lg:absolute bg-white block lg:left-0 lg:right-0 lg:p-4 max-lg:py-2.5 max-lg:border-t max-lg:border-gray-200 w-full lg:w-max lg:max-w-max lg:opacity-0 lg:invisible lg:translate-y-10 z-10 mt-0 text-left lg:overflow-y-auto lg:h-auto lg:max-h-[calc(100vh-80px)] duration-500 lg:group-hover:opacity-100 lg:group-hover:visible lg:group-hover:translate-y-0 max-lg:hidden mega-menu">
			<ul class="lg:flex flex-wrap -mx-[15px]">
				<li class="px-[15px] flex-1 min-w-44 xl:w-64 lg:w-44 relative">
					<a href="javascript:void(0);" class="lg:py-[5px] lg:text-center group/second">
						<img src="assets/images/posts/interior/pic1.jpg" alt="/" class="rounded duration-500 group-hover/second:-translate-y-[5px] max-lg:hidden">
						<span class="block lg:text-center lg:py-[15px] py-1 font-title lg:font-semibold lg:text-black text-gray-600 lg:text-base text-sm">Interior Room</span>
					</a>
				</li>
				<li class="px-[15px] flex-1 min-w-44 xl:w-64 lg:w-44 relative">
					<a href="javascript:void(0);" class="lg:py-[5px] lg:text-center group/second">
						<img src="assets/images/posts/interior/pic2.jpg" alt="/" class="rounded duration-500 group-hover/second:-translate-y-[5px] max-lg:hidden">
						<span class="block lg:text-center lg:py-[15px] py-1 font-title lg:font-semibold lg:text-black text-gray-600 lg:text-base text-sm">Living Room</span>
					</a>
				</li>
				<li class="px-[15px] flex-1 min-w-44 xl:w-64 lg:w-44 relative">
					<a href="javascript:void(0);" class="lg:py-[5px] lg:text-center group/second">
						<img src="assets/images/posts/interior/pic3.jpg" alt="/" class="rounded duration-500 group-hover/second:-translate-y-[5px] max-lg:hidden">
						<span class="block lg:text-center lg:py-[15px] py-1 font-title lg:font-semibold lg:text-black text-gray-600 lg:text-base text-sm">Modern Entryway</span>
					</a>
				</li>
			</ul>
		</div>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary after:ml-1 after:-mt-1 after:inline-block after:size-3 after:bg-[url('../images/star.svg')] max-lg:after:hidden" href="javascript:void(0);">
			<span class="inline-block">Fixed Menu</span>
			<i class="fas fa-chevron-right lg:!hidden !block size-7 !leading-7 text-center text-xs bg-black text-white float-end"></i>
		</a>
		<div class="lg:absolute bg-white block xl:left-20 lg:left-0 lg:right-0 xl:p-12 lg:p-[30px] max-lg:py-2.5 max-lg:border-t max-lg:border-gray-200 lg:w-[1200px] lg:max-w-[1200px] w-auto max-w-full lg:opacity-0 lg:invisible lg:translate-y-10 z-10 mt-0 text-left lg:overflow-y-auto lg:h-auto lg:max-h-[calc(100vh-80px)] duration-500 lg:group-hover:opacity-100 lg:group-hover:visible lg:group-hover:translate-y-0 max-lg:hidden mega-menu">
			<ul class="lg:flex flex-wrap -mx-[15px]">
				<li class="px-[15px] flex-1 lg:min-w-44 lg:w-4/6 relative">
					<ul class="lg:flex flex-wrap mb-[15px]">
						<li class="relative lg:w-4/12 w-full">
							<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Shop Structure</span>
							<ul class="lg:mb-[15px]">
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Shop Standard</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Shop List</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Shop With Category</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Shop Filters Top Bar</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Shop Sidebar</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Shop Style 1</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Shop Style 2</span></a></li>
							</ul>
						</li>
						<li class="relative lg:w-4/12 w-full">
							<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Product Structure</span>
							<ul class="lg:mb-[15px]">
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Default</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Thumbnail</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Grid Media</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Carousel</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Full Width</span></a></li>
							</ul>
						</li>
						<li class="relative lg:w-4/12 w-full">
							<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Shop Pages</span>
							<ul class="lg:mb-[15px]">				
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Wishlist</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Cart</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Checkout</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Compare</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Order Tracking</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">My Account</span></a></li>
								<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);"><span class="link-hover">Registration</span></a></li>
							</ul>
						</li>
						<li class="border border-gray-200 p-[15px] lg:flex items-center lg:mt-[25px] mt-5 relative lg:w-full">
							<div class="pr-[5px]">
								<h4 class="text-2xl font-medium mb-[5px]">Deal of the month</h4>
								<p class="text-sm text-gray-600">Yes! Send me exclusive offers, personalised, and unique gift ideas, tips for shopping on Pixio <a href="javascript:void(0);" class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative">View All Products</a></p>
							</div>
							<div class="sale-countdown">
								<div class="flex countdown">
									<div class="lg:mx-[5px] mx-[3px] text-center date">
										<span class="lg:text-xxl text-base bg-gray-200 lg:size-[50px] lg:leading-[50px] size-10 leading-10 rounded lg:mb-1 mb-0.5 mx-auto block font-medium font-title" id="days"></span>
										<span class="lg:text-xs text-tiny font-normal uppercase font-title">Days</span>
									</div>
									<div class="lg:mx-[5px] mx-[3px] text-center date">
										<span class="lg:text-xxl text-base bg-gray-200 lg:size-[50px] lg:leading-[50px] size-10 leading-10 rounded lg:mb-1 mb-0.5 mx-auto block font-medium font-title" id="hours"></span>
										<span class="lg:text-xs text-tiny font-normal uppercase font-title">Hours</span>
									</div>
									<div class="lg:mx-[5px] mx-[3px] text-center date">
										<span class="lg:text-xxl text-base bg-gray-200 lg:size-[50px] lg:leading-[50px] size-10 leading-10 rounded lg:mb-1 mb-0.5 mx-auto block font-medium font-title" id="minutes"></span>
										<span class="lg:text-xs text-tiny font-normal uppercase font-title">Minutess</span>
									</div>
									<div class="lg:mx-[5px] mx-[3px] text-center date">
										<span class="lg:text-xxl text-base bg-gray-200 lg:size-[50px] lg:leading-[50px] size-10 leading-10 rounded lg:mb-1 mb-0.5 mx-auto block font-medium font-title" id="seconds"></span>
										<span class="lg:text-xs text-tiny font-normal uppercase font-title">Second</span>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</li>
				<li class="px-[15px] lg:flex-[0_0_34%] lg:w-4/12 min-w-44 relative">
					<div class="lg:pl-5 max-lg:mt-2.5">
						<img src="assets/images/posts/large/pic2.png" alt="" class="w-full rounded-2xl">
					</div>
				</li>
			</ul>
		</div>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary after:ml-1 after:-mt-1 after:inline-block after:size-3 after:bg-[url('../images/star.svg')] max-lg:after:hidden" href="javascript:void(0);">
			<span class="inline-block">Media Menu</span>
			<i class="fas fa-chevron-right lg:!hidden !block size-7 !leading-7 text-center text-xs bg-black text-white float-end"></i>
		</a>
		<div class="lg:absolute bg-white block xl:left-20 lg:left-0 lg:right-0 lg:ps-12 lg:pt-12 lg:pr-4 max-lg:py-2.5 max-lg:border-t max-lg:border-gray-200 w-full xl:w-[calc(100%-160px)] xl:max-w-[calc(100%-160px)] lg:w-[1200px] lg:max-w-full lg:opacity-0 lg:invisible lg:translate-y-10 z-10 mt-0 text-left lg:overflow-y-auto lg:h-auto lg:max-h-[calc(100vh-80px)] duration-500 lg:group-hover:opacity-100 lg:group-hover:visible lg:group-hover:translate-y-0 max-lg:hidden mega-menu">
			<ul class="lg:flex flex-wrap -mx-[15px]">
				<li class="px-[15px] flex-[0_0_80%] min-w-44 w-4/5 relative">
					<ul class="flex flex-wrap">
						<li class="relative lg:w-1/5 w-full lg:text-center lg:px-2.5">
							<a href="javascript:void(0);" class="block lg:text-center mb-5">
								<img src="assets/images/posts/small/pic1.png" alt="/" class="w-[150px] mx-auto max-w-full mb-[5px] rounded-md max-lg:hidden">
								<span class="text-sm text-gray-600 block mb-[5px]">Media Menu 1</span>
							</a>
						</li>
						<li class="relative lg:w-1/5 w-full lg:text-center lg:px-2.5">
							<a href="javascript:void(0);" class="block lg:text-center mb-5">
								<img src="assets/images/posts/small/pic2.png" alt="/" class="w-[150px] mx-auto max-w-full mb-[5px] rounded-md max-lg:hidden">
								<span class="text-sm text-gray-600 block mb-[5px]">Media Menu 2</span>
							</a>
						</li>
						<li class="relative lg:w-1/5 w-full lg:text-center lg:px-2.5">
							<a href="javascript:void(0);" class="block lg:text-center mb-5">
								<img src="assets/images/posts/small/pic3.png" alt="/" class="w-[150px] mx-auto max-w-full mb-[5px] rounded-md max-lg:hidden">
								<span class="text-sm text-gray-600 block mb-[5px]">Media Menu 3</span>
							</a>
						</li>
						<li class="relative lg:w-1/5 w-full lg:text-center lg:px-2.5">
							<a href="javascript:void(0);" class="block lg:text-center mb-5">
								<img src="assets/images/posts/small/pic4.png" alt="/" class="w-[150px] mx-auto max-w-full mb-[5px] rounded-md max-lg:hidden">
								<span class="text-sm text-gray-600 block mb-[5px]">Media Menu 4</span>
							</a>
						</li>
						<li class="relative lg:w-1/5 w-full lg:text-center lg:px-2.5">
							<a href="javascript:void(0);" class="block lg:text-center mb-5">
								<img src="assets/images/posts/small/pic5.png" alt="/" class="w-[150px] mx-auto max-w-full mb-[5px] rounded-md max-lg:hidden">
								<span class="text-sm text-gray-600 block mb-[5px]">Media Menu 5</span>
							</a>
						</li>
						<li class="relative lg:w-1/5 w-full lg:text-center lg:px-2.5">
							<a href="javascript:void(0);" class="block lg:text-center mb-5">
								<img src="assets/images/posts/small/pic6.png" alt="/" class="w-[150px] mx-auto max-w-full mb-[5px] rounded-md max-lg:hidden">
								<span class="text-sm text-gray-600 block mb-[5px]">Media Menu 6</span>
							</a>
						</li>
						<li class="relative lg:w-1/5 w-full lg:text-center lg:px-2.5">
							<a href="javascript:void(0);" class="block lg:text-center mb-5">
								<img src="assets/images/posts/small/pic7.png" alt="/" class="w-[150px] mx-auto max-w-full mb-[5px] rounded-md max-lg:hidden">
								<span class="text-sm text-gray-600 block mb-[5px]">Media Menu 7</span>
							</a>
						</li>
						<li class="relative lg:w-1/5 w-full lg:text-center lg:px-2.5">
							<a href="javascript:void(0);" class="block lg:text-center mb-5">
								<img src="assets/images/posts/small/pic8.png" alt="/" class="w-[150px] mx-auto max-w-full mb-[5px] rounded-md max-lg:hidden">
								<span class="text-sm text-gray-600 block mb-[5px]">Media Menu 8</span>
							</a>
						</li>
						<li class="relative lg:w-1/5 w-full lg:text-center lg:px-2.5">
							<a href="javascript:void(0);" class="block lg:text-center mb-5">
								<img src="assets/images/posts/small/pic9.png" alt="/" class="w-[150px] mx-auto max-w-full mb-[5px] rounded-md max-lg:hidden">
								<span class="text-sm text-gray-600 block mb-[5px]">Media Menu 9</span>
							</a>
						</li>
						<li class="relative lg:w-1/5 w-full lg:text-center lg:px-2.5">
							<a href="javascript:void(0);" class="block lg:text-center mb-5">
								<img src="assets/images/posts/small/pic10.png" alt="/" class="w-[150px] mx-auto max-w-full mb-[5px] rounded-md max-lg:hidden">
								<span class="text-sm text-gray-600 block mb-[5px]">Media Menu 10</span>
							</a>
						</li>
					</ul>
				</li>
				<li class="px-[15px] flex-[0_0_20%] min-w-44 w-1/5 lg:pl-[30px] relative after:absolute after:h-[calc(100%+70px)] after:left-0 after:-top-[50px] after:bg-gray-200 after:w-px">
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Portfolio Details</span>
					<ul class="lg:mb-[15px]">
						<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">Nav Link 1</a></li>
						<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">Nav Link 2</a></li>
						<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">Nav Link 3</a></li>
						<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">Nav Link 4</a></li>
						<li class="relative"><a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">Nav Link 5</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</li>
</ul>

<ul className="nav navbar-nav">
    {megaMenu3.map(({ label, submenu, className }, index) => (
        <li className={className} key={index}>
            <Link to={"#"}>
            <span>{label}</span>
            <i className="fas fa-chevron-down tabindex"></i>
            </Link>
            {className.includes("menu-left") ? (
            <div className="mega-menu">
                <ul className="demo-menu">
                {submenu?.map(({ img, label }, inde) => (
                    <li>
                    <Link to={"#"} key={inde}>
                        <img src={img} alt="/" className="rounded" />
                        <span className="menu-title">{label}</span>
                    </Link>
                    </li>
                ))}
                </ul>
            </div>
        ) : (
        <>
            {className.includes("fixed_menu") ? (
            <div className="mega-menu menu-media-right">
                <ul>
                <li className="side-left">
                    <ul>
                    {submenu?.map(({ label, child }, ind) => (
                        <li key={ind}>
                        <span className="menu-title">{label}</span>
                        <ul className="list-hover5">
                            {child?.map(({ label }) => (
                            <li>
                                <Link to={"#"}>
                                <span>{label}</span>
                                </Link>
                            </li>
                            ))}
                        </ul>
                        </li>
                    ))}
                    <li className="month-deal">
                        <div className="clearfix p-r5">
                        <h4 className="m-b5">Deal of the month</h4>
                        <p className="m-b0">
                            Yes! Send me exclusive offers, personalised, and unique gift ideas, tips for shopping on Pixio{" "}
                            <Link to={"#"}>View All Products</Link>
                        </p>
                        </div>
                        <div className="sale-countdown">
                        <div className="countdown">
                            <div className="date">
                            <span className="time days">{timer.days}</span>
                            <span className="work-time">Days</span>
                            </div>
                            <div className="date">
                            <span className="time hours">{timer.hours}</span>
                            <span className="work-time">Hours</span>
                            </div>
                            <div className="date">
                            <span className="time mins">{timer.minutes}</span>
                            <span className="work-time">Minutess</span>
                            </div>
                            <div className="date">
                            <span className="time secs">{timer.seconds}</span>
                            <span className="work-time">Second</span>
                            </div>
                        </div>
                        </div>
                    </li>
                    </ul>
                </li>
                <li className="side-right">
                    <div className="adv-media">
                    <img src={IMAGES.large_pic2} alt="" />
                    </div>
                </li>
                </ul>
            </div>
            ) : (
            <div className="mega-menu menu-media-left">
                <ul>
                <li className="side-left">
                    <ul className="portfolio-nav-link">
                    {submenu.map(({ label, img }, ind) => (
                        <li key={ind}>
                        <Link to={"#"}>
                            <img src={img} alt="/" className="rounded" />
                            <span>{label}</span>
                        </Link>
                        </li>
                    ))}
                    </ul>
                </li>
                <li className="side-right line-left">
                    <span className="menu-title">Portfolio Details</span>
                    <ul>
                    {[1, 2, 3, 4].map((el) => (
                        <li>
                        <Link to={"#"}>Nav Link {el}</Link>
                        </li>
                    ))}
                    </ul>
                </li>
                </ul>
            </div>
            )}
        </>
        )}
    </li>
    ))}
</ul>

<ul class="nav navbar-nav">
  @for(item of menuItem; track item; let i = $index){
  <li class="has-mega-menu sub-menu-down {{ item.class }}">
	 <a [routerLink]="item.route ? [item.route] : []">
		<span>{{ item.title }}</span>
		@if(item.badge){
		   <span class="badge badge-drop bg-{{ item.badge.color }} {{ item.badge.style }}">{{ item.badge.text }}</span> 
		}
		@if(item.subMenu){
		   <i class="fas fa-chevron-down tabindex"></i>
		}
	 </a>
	 @if(item.subMenu){
		@if(item.type == 'type-1'){
		<div class="mega-menu">
		   <ul class="demo-menu">
			  @for(subitem of item?.subMenu; track subitem;){
			  <li>
				 <a [routerLink]="subitem.route ? [subitem.route] : []">
					<img src="{{ subitem.image }}" alt="/" class="rounded">
					<span class="menu-title">{{ subitem.title }}</span>
				 </a>
			  </li>
			  }
		   </ul>
		</div>
		} @else if(item.type == 'type-2') {
		   <div class="mega-menu menu-media-right">
			  <ul>
				 <li class="side-left">
					<ul>
					@for(subitem of item?.subMenu; track subitem; let subitemIndex = $index){
					   @if(subitem.countdown){
						  <li class="month-deal">
							 <div class="clearfix p-r5">
								<h4 class="m-b5">{{ subitem.title }}</h4>
								<p class="m-b0">Yes! Send me exclusive offers, personalised, and unique gift ideas, tips for shopping on Pixio <a [routerLink]="subitem.route ? [subitem.route] : []">View All Products</a></p>
							 </div>
							 <div class="sale-countdown">
								<div class="countdown" *ngIf="countdown$ | async as countdown">
								   <div *ngIf="countdown.days" class="date">
									  <span class="time days">{{ countdown.days }}</span>
									  <span class="work-time">Days</span>
								   </div>
								   <div *ngIf="countdown.hours" class="date">
									  <span class="time hours">{{ countdown.hours }}</span>
									  <span class="work-time">Hours</span>
								   </div>
								   <div *ngIf="countdown.minutes" class="date">
									  <span class="time mins">{{ countdown.minutes }}</span>
									  <span class="work-time">Minutess</span>
								   </div>
								   <div *ngIf="countdown.seconds" class="date">
									  <span class="time secs">{{ countdown.seconds }}</span>
									  <span class="work-time">Second</span>
								   </div>
								</div>
							 </div>
						  </li>
					   } @else {
						  <li>
							 <span class="menu-title">{{ subitem.title }}</span>
							 <ul class="list-hover5">
								@for(subSubItem of subitem?.subsubMenu; track subSubItem;){
								<li>
								   <a [routerLink]="subSubItem.route ? [subSubItem.route] : []">
								   <span>{{ subSubItem.title }} </span>
								   @if(subSubItem.subsubMenuBadge){
									  <span class="badge rounded bg-{{ subSubItem.subsubMenuBadge.color }} light"><i class="fa-solid fa-circle"></i> {{ subSubItem.subsubMenuBadge.text }}</span>
								   }
								   </a>
								</li>
								}
							 </ul>
						  </li>
					   }
					}
					</ul>
				 </li>
				 <li class="side-right">
					<div class="adv-media">
					   <img src="images/posts/large/pic2.png" alt="">
					</div>
				 </li>
			  </ul>
		   </div>
		} @else if(item.type == 'type-3') {
		   <div class="mega-menu menu-media-left">
			  <ul>
				 @for(subitem of item?.subMenu; track subitem;){
				 <li class="{{ subitem.subMenuclass }}">
					<span *ngIf="subitem.title" class="menu-title">{{ subitem.title }}</span>
					<ul class="{{ subitem.subMenuclass == 'side-left'?'portfolio-nav-link':'' }}">
					   @for(subSubItem of subitem?.subsubMenu; track subSubItem;){
					   <li>
						  <a href="javascript:void(0);">
							 <img *ngIf="subSubItem.image" src="{{ subSubItem.image }}" alt="/" class="rounded">
							 <span>{{ subSubItem.title }}</span>
						  </a>
					   </li>
					   }
					</ul>
				 </li>
				 }
			  </ul>
		   </div>
		}
	 }
  </li>
  }
</ul>
						

<ul class="lg:flex flex-wrap navbar-nav">
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary after:ml-1 after:-mt-1 after:inline-block after:size-3 after:bg-[url('../images/star.svg')] max-lg:after:hidden" href="javascript:void(0);">
			<span class="inline-block">Images</span>
			<span class="ml-[5px] inline-block size-2 rounded-full bg-orange-600 animate-wave-orange"></span>
			<i class="fas fa-chevron-right lg:!hidden !block size-7 !leading-7 text-center text-xs bg-black text-white float-end"></i>
		</a>
		<div class="lg:absolute bg-white block xl:left-20 lg:left-0 lg:right-0 lg:p-4 max-lg:py-2.5 max-lg:border-t max-lg:border-gray-200 w-full xl:w-[calc(100%-160px)] xl:max-w-[calc(100%-160px)] lg:w-[1200px] lg:max-w-full lg:opacity-0 lg:invisible lg:translate-y-10 z-10 mt-0 text-left lg:overflow-y-auto lg:h-auto lg:max-h-[calc(100vh-80px)] duration-500 lg:group-hover:opacity-100 lg:group-hover:visible lg:group-hover:translate-y-0 max-lg:hidden mega-menu">
			<div class="row g-3">
				<div class="md:w-1/4 w-1/2"><img class="rounded-md w-full" src="assets/images/posts/industry/pic1.jpg" alt=""></div>
				<div class="md:w-1/4 w-1/2"><img class="rounded-md w-full" src="assets/images/posts/industry/pic2.jpg" alt=""></div>
				<div class="md:w-1/4 w-1/2"><img class="rounded-md w-full" src="assets/images/posts/industry/pic3.jpg" alt=""></div>
				<div class="md:w-1/4 w-1/2"><img class="rounded-md w-full" src="assets/images/posts/industry/pic4.jpg" alt=""></div>
			</div>
		</div>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary after:ml-1 after:-mt-1 after:inline-block after:size-3 after:bg-[url('../images/star.svg')] max-lg:after:hidden" href="javascript:void(0);">
			<span class="inline-block">Slider</span>
			<i class="fas fa-chevron-right lg:!hidden !block size-7 !leading-7 text-center text-xs bg-black text-white float-end"></i>
		</a>
		<div class="lg:absolute bg-white block xl:left-20 lg:left-0 lg:right-0 xl:p-12 lg:p-[30px] max-lg:py-2.5 max-lg:border-t max-lg:border-gray-200 w-full xl:w-[calc(100%-160px)] xl:max-w-[calc(100%-160px)] lg:w-[1200px] lg:max-w-full lg:opacity-0 lg:invisible lg:translate-y-10 z-10 mt-0 text-left lg:overflow-y-auto lg:h-auto lg:max-h-[calc(100vh-80px)] duration-500 lg:group-hover:opacity-100 lg:group-hover:visible lg:group-hover:translate-y-0 max-lg:hidden mega-menu">
			<div class="swiper menu-swiper" id="xMenuSwiper">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img class="rounded-md w-full" src="assets/images/posts/plants/pic1.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img class="rounded-md w-full" src="assets/images/posts/plants/pic2.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img class="rounded-md w-full" src="assets/images/posts/plants/pic3.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img class="rounded-md w-full" src="assets/images/posts/plants/pic4.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img class="rounded-md w-full" src="assets/images/posts/plants/pic1.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img class="rounded-md w-full" src="assets/images/posts/plants/pic2.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img class="rounded-md w-full" src="assets/images/posts/plants/pic3.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img class="rounded-md w-full" src="assets/images/posts/plants/pic4.jpg" alt="">
					</div>
				</div>
				<div class="swiper-pagination !relative mt-[30px]"></div>
				<div class="swiper-button-prev after:hidden !size-[35px] !min-w-[35px] !text-white bg-black/30 rounded-full hover:bg-orange-600"><i class="fa-solid fa-arrow-left"></i></div>
				<div class="swiper-button-next after:hidden !size-[35px] !min-w-[35px] !text-white bg-black/30 rounded-full hover:bg-orange-600"><i class="fa-solid fa-arrow-right"></i></div>
			</div>
		</div>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary after:ml-1 after:-mt-1 after:inline-block after:size-3 after:bg-[url('../images/star.svg')] max-lg:after:hidden" href="javascript:void(0);">
			<span class="inline-block">Accordion</span>
			<span class="ml-[5px] inline-block text-blue-600 badge-icon">
				<i class="fa-solid fa-circle-question"></i>
			</span>
			<i class="fas fa-chevron-right lg:!hidden !block size-7 !leading-7 text-center text-xs bg-black text-white float-end"></i>
		</a>
		<div class="lg:absolute bg-white block xl:left-20 lg:left-0 lg:right-0 xl:p-12 lg:p-[30px] max-lg:py-2.5 max-lg:border-t max-lg:border-gray-200 w-full xl:w-[calc(100%-160px)] xl:max-w-[calc(100%-160px)] lg:w-[1200px] lg:max-w-full lg:opacity-0 lg:invisible lg:translate-y-10 z-10 mt-0 text-left lg:overflow-y-auto lg:h-auto lg:max-h-[calc(100vh-80px)] duration-500 lg:group-hover:opacity-100 lg:group-hover:visible lg:group-hover:translate-y-0 max-lg:hidden mega-menu">
			<div class="myAccordion" id="accordionExample">
				<div class="accordion-item">
					<h2 class="accordion-header open">
						<button class="accordion-button">
							Accordion Item #1
						</button>
						<span class="arrow active">
							<i class="fa-solid fa-chevron-up"></i>
							<i class="fa-solid fa-chevron-down"></i>
						</span>
					</h2>
					<div class="accordion-content active">
						<div class="content-inner">
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
						</div>
					</div>
				</div>
				<div class="accordion-item">
					<h2 class="accordion-header">
						<button class="accordion-button">
							Accordion Item #2
						</button>
						<span class="arrow">
							<i class="fa-solid fa-chevron-up"></i>
							<i class="fa-solid fa-chevron-down"></i>
						</span>
					</h2>
					<div class="accordion-content">
						<div class="content-inner">
							<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
						</div>
					</div>
				</div>
				<div class="accordion-item">
					<h2 class="accordion-header">
						<button class="accordion-button">
							Accordion Item #3
						</button>
						<span class="arrow">
							<i class="fa-solid fa-chevron-up"></i>
							<i class="fa-solid fa-chevron-down"></i>
						</span>
					</h2>
					<div class="accordion-content">
						<div class="content-inner">
							<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
						</div>
					</div>
				</div>
			</div>
		</div>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 relative group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary after:ml-1 after:-mt-1 after:inline-block after:size-3 after:bg-[url('../images/star.svg')] max-lg:after:hidden" href="javascript:void(0);">
			<span class="inline-block">Offcanvas</span>
			<span class="ml-[5px] inline-block text-red-600 badge-icon">
				<i class="fa-solid fa-circle-exclamation"></i>
			</span>
			<i class="fas fa-chevron-right lg:!hidden !block size-7 !leading-7 text-center text-xs bg-black text-white float-end"></i>
		</a>
		<ul class="lg:absolute bg-white block lg:left-0 lg:py-5 max-lg:py-2.5 max-lg:border-t max-lg:border-gray-200 w-full lg:w-[220px] lg:opacity-0 lg:invisible lg:translate-y-10 z-10 mt-0 text-left lg:overflow-y-auto duration-500 lg:group-hover:opacity-100 lg:group-hover:visible lg:group-hover:translate-y-0 max-lg:hidden sub-menu">
			<li class="relative">
				<a class="block relative text-sm text-gray-600 font-normal py-[5px] lg:px-[30px] duration-500 hover:text-primary" href="javascript:void(0);" data-drawer="#offcanvas-left" data-drawer-placement="left" ><span class="link-hover">Offcanvas Left</span></a>
			</li>
			<li class="relative">
				<a class="block relative text-sm text-gray-600 font-normal py-[5px] lg:px-[30px] duration-500 hover:text-primary" href="javascript:void(0);" data-drawer="#offcanvas-top" data-drawer-placement="top"><span class="link-hover">Offcanvas Top</span></a>
			</li>
			<li class="relative">
				<a class="block relative text-sm text-gray-600 font-normal py-[5px] lg:px-[30px] duration-500 hover:text-primary" href="javascript:void(0);" data-drawer="#offcanvas-right" data-drawer-placement="right"><span class="link-hover">Offcanvas Right</span></a>
			</li>
			<li class="relative">
				<a class="block relative text-sm text-gray-600 font-normal py-[5px] lg:px-[30px] duration-500 hover:text-primary" href="javascript:void(0);" data-drawer="#offcanvas-bottom" data-drawer-placement="bottom"><span class="link-hover">Offcanvas Bottom</span></a>
			</li>
		</ul>
	</li>
</ul>

<ul className="nav navbar-nav">
    {megaMenu4.map(({ label, className, icon, submenu }, index) => (
        <li className={className} key={index}>
            <Link to={"#"}>
            <span>{label}</span>
            <span className={icon}></span>
            <i className="fas fa-chevron-down tabindex"></i>
            </Link>
            {!label.includes("Offcanvas") ? (
            <div className="mega-menu">
            {label.includes("Images") && (
            <div className="row g-3">
                {submenu.map(({ img }, index) => (
                <div className="col-md-3 col-6" key={index}>
                    <img className="rounded w-100" src={img} alt="" />
                </div>
                ))}
            </div>
            )}
            {label.includes("Slider") && (
            <Swiper
                className="swiper menu-swiper"
                id="xMenuSwiper"
                slidesPerView={4}
                spaceBetween={30}
                speed={1500}
                loop={true}
                modules={[Navigation, Autoplay, Pagination]}
                navigation={{ nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" }}
                autoplay={{
                delay: 1500,
                }}
                pagination={{
                el: ".swiper-pagination",
                dynamicBullets: true,
                }}
            >
                {submenu.map(({ img }, inde) => (
                <SwiperSlide key={inde} className="swiper-slide">
                    <img className="rounded w-100" src={img} alt="" />
                </SwiperSlide>
                ))}
                <div className="swiper-pagination m-t30"></div>
                <div className="swiper-button-prev button-black">
                <i className="fa-solid fa-arrow-left"></i>
                </div>
                <div className="swiper-button-next button-black">
                <i className="fa-solid fa-arrow-right"></i>
                </div>
            </Swiper>
            )}
            {label.includes("Accordion") && (
            <Accordion defaultActiveKey="0">
                {submenu.map(({ label }, ind) => (
                <Accordion.Item eventKey={ind} key={ind}>
                    <Accordion.Header>{label}</Accordion.Header>
                    <Accordion.Body>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
                    anim id est laborum.
                    </Accordion.Body>
                </Accordion.Item>
                ))}
            </Accordion>
            )}
        </div>
        ) : (
        <ul className="sub-menu list-hover4">
            {submenu.map(({ label }, ind) => (
            <li key={ind}>
                <Link to={"#"}  data-bs-toggle="offcanvas" >
                <span>{label}</span>
                </Link>
            </li>
            ))}
        </ul>
        )}
    </li>
    ))}
</ul>

<ul class="nav navbar-nav">
  @for(item of menuItem; track item; let i = $index){
  <li class="sub-menu-down {{ item.class }}">
	 <a [routerLink]="item.route ? [item.route] : []">
		<span>{{ item.title }}</span>
		@if(item.badge){
		   @if(item.badge.icon){
			  <i class="m-l5 badge-icon {{ item.badge.icon }} text-{{ item.badge.color }}"></i>
		   } @else {
			  <span class="m-l5 badge-blank badge-wave wave-primary bg-{{ item.badge.color }}">{{ item.badge.text }}</span> 
		   }
		}
		@if(item.subMenu){
		   <i class="fas fa-chevron-down tabindex"></i>
		}
	 </a>
	 @if(item.subMenu){
		@if(item.type == 'type-1'){
		   <div class="mega-menu">
			  <div class="row g-3">
				 @for(subitem of item?.subMenu; track subitem;){
				 <div class="col-md-3 col-6"><img class="rounded w-100" src="{{ subitem.image }}" alt=""></div>
				 }
			  </div>
		   </div>
		} @else if(item.type == 'type-2'){
		   <div class="mega-menu">
			  <div class="swiper menu-swiper" id="xMenuSwiper">
				 <div class="swiper-wrapper">
					@for(subitem of item?.subMenu; track subitem;){
					<div class="swiper-slide">
					   <img class="rounded w-100" src="{{ subitem.image }}" alt="">
					</div>
					}                      
				 </div>
				 <div class="swiper-pagination m-t30"></div>
				 <div class="swiper-button-prev button-black"><i class="fa-solid fa-arrow-left"></i></div>
				 <div class="swiper-button-next button-black"><i class="fa-solid fa-arrow-right"></i></div>
			  </div>
		   </div>
		} @else if(item.type == 'type-3'){
		   <div class="mega-menu">
			  <div ngbAccordion [closeOthers]="true">
			  @for(subitem of item?.subMenu; track subitem; let i = $index){
					<div ngbAccordionItem [collapsed]="i !== 0">
					   <h2 ngbAccordionHeader>
						  <button ngbAccordionButton>{{ subitem.title }}</button>
					   </h2>
					   <div ngbAccordionCollapse>
						  <div ngbAccordionBody>
							 <ng-template>
								<div [innerHTML]="subitem.desc"></div>
							 </ng-template>
						  </div>
					   </div>
					</div>
				 }
			  </div>
		   </div>
		} @else if(item.type == 'type-4'){
		   <ul class="sub-menu list-hover4">
			  @for(subitem of item?.subMenu; track subitem;){
				<li>
				  <a href="javascript:void(0);" 
					 (click)="openCanvas(content, subitem.offcanvas?.position )" 
					 [attr.data-hover]="subitem.title">
					<span>{{ subitem.title }}</span>
				  </a>
				  <ng-template #content let-offcanvas>
					@if(subitem.offcanvas?.search){
					   <div class="xmenu-search container py-30 m-auto">
						  <h5 *ngIf="subitem.offcanvas?.canvasTitle" class="offcanvas-title mb-3" id="offcanvasRightLabel">{{ subitem.offcanvas?.canvasTitle }}</h5>
						  <form action="#">
							 <div class="search-group">
								<input name="search" value="" type="text" class="form-control" placeholder="Type to search">
								<button type="button" class="search-btn"><i class="fa fa-search"></i></button>
							 </div>
						  </form>
					   </div>
					} @else {
					<div class="offcanvas-header">
					  <h4 class="offcanvas-title">{{ subitem.offcanvas?.canvasTitle }}</h4>
					  <button type="button" class="btn-close" aria-label="Close" (click)="offcanvas.dismiss('Cross click')"></button>
					</div>
					<div class="offcanvas-body">
					   <div [innerHTML]="subitem.offcanvas?.canvasDesc"></div>
					</div>
					}
				  </ng-template>
				</li>
			  }
		   </ul>
		}
	 } 
  </li>
  }
</ul>
						

<ul class="lg:flex flex-wrap navbar-nav">
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 relative group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary after:ml-1 after:-mt-1 after:inline-block after:size-3 after:bg-[url('../images/star.svg')] max-lg:after:hidden" href="javascript:void(0);">
			<span class="inline-block">Menu Left</span>
			<span class="ml-[5px] inline-block text-red-600 badge-icon">
				<i class="fa-solid fa-circle-exclamation"></i>
			</span>
			<i class="fas fa-chevron-right lg:!hidden !block size-7 !leading-7 text-center text-xs bg-black text-white float-end"></i>
		</a>
		<div class="lg:absolute bg-white block lg:left-0 lg:right-0 xl:p-12 lg:p-[30px] max-lg:py-2.5 max-lg:border-t max-lg:border-gray-200 w-full lg:w-max lg:max-w-max lg:opacity-0 lg:invisible lg:translate-y-10 z-10 mt-0 text-left lg:overflow-y-auto lg:h-auto lg:max-h-[calc(100vh-80px)] duration-500 lg:group-hover:opacity-100 lg:group-hover:visible lg:group-hover:translate-y-0 max-lg:hidden mega-menu">
			<ul class="lg:flex flex-wrap -mx-[15px]">
				<li class="px-[15px] flex-1 min-w-44 xl:w-64 w-full relative">
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Pages</span>
					<ul class="lg:mb-[15px]">
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">About Us</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-orange-600/10 text-orange-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> NEW</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">About Me</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Pricing Table</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-black/10 text-black"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> NEW</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Our Gift Vouchers</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">What We Do</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Faqs 1</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Faqs 2</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-green-600/10 text-green-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> NEW</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Our Team</span>
							</a>
						</li>
					</ul>
				</li>
				<li class="px-[15px] flex-1 min-w-44 xl:w-64 w-full relative">
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Contact Us</span>
					<ul class="lg:mb-[15px]">
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Contact Us 1</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Contact Us 2</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-red-600/10 text-red-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> HOT</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Contact Us 3</span>
							</a>
						</li>
					</ul>
				</li>
				<li class="px-[15px] flex-1 min-w-44 xl:w-64 w-full relative">
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Web Pages</span>
					<ul class="lg:mb-[15px]">
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Error 404 1</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-yellow-600/10 text-yellow-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> Warning</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Error 404 2</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Coming Soon</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-blue-600/10 text-blue-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> Info</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Under Construction</span>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 relative group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary after:ml-1 after:-mt-1 after:inline-block after:size-3 after:bg-[url('../images/star.svg')] max-lg:after:hidden" href="javascript:void(0);">
			<span class="inline-block">Menu Center</span>
			<i class="fas fa-chevron-right lg:!hidden !block size-7 !leading-7 text-center text-xs bg-black text-white float-end"></i>
		</a>
		<div class="lg:absolute bg-white block lg:left-1/2 lg:-translate-x-1/2 lg:right-0 xl:p-12 lg:p-[30px] max-lg:py-2.5 max-lg:border-t max-lg:border-gray-200 w-full lg:w-max lg:max-w-max lg:opacity-0 lg:invisible lg:translate-y-10 z-10 mt-0 text-left lg:overflow-y-auto lg:h-auto lg:max-h-[calc(100vh-80px)] duration-500 lg:group-hover:opacity-100 lg:group-hover:visible lg:group-hover:translate-y-0 max-lg:hidden mega-menu">
			<ul class="lg:flex flex-wrap -mx-[15px]">
				<li class="px-[15px] flex-1 min-w-44 xl:w-64 w-full relative">
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Pages</span>
					<ul class="lg:mb-[15px]">
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">About Us</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">About Me</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-orange-600/10 text-orange-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> NEW</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Pricing Table</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Our Gift Vouchers</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">What We Do</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Faqs 1</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Faqs 2</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-red-600/10 text-red-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> HOT</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Our Team</span>
							</a>
						</li>
					</ul>
				</li>
				<li class="px-[15px] flex-1 min-w-44 xl:w-64 w-full relative">
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Contact Us</span>
					<ul class="lg:mb-[15px]">
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Contact Us 1</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Contact Us 2</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-green-600/10 text-green-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> UPDATE</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Contact Us 3</span>
							</a>
						</li>
					</ul>
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Web Pages</span>
					<ul class="lg:mb-[15px]">
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Error 404 1</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Error 404 2</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Coming Soon</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Under Construction</span>
							</a>
						</li>
					</ul>
				</li>
				<li class="px-[15px] flex-1 min-w-44 xl:w-64 w-full relative">
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Banner Style</span>
					<ul class="lg:mb-[15px]">				
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Banner with BG Color</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Banner with Image</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Banner with Video</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Banner with Kanbern</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-blue-600/10 text-blue-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> Info</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Banner Small</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Banner Medium</span>
							</a>
							</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Banner Large</span>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 relative group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary after:ml-1 after:-mt-1 after:inline-block after:size-3 after:bg-[url('../images/star.svg')] max-lg:after:hidden" href="javascript:void(0);">
			<span class="inline-block">Menu Right</span>
			<span class="ms-2 text-red-600 animate-badgeZoom inline-block">
				<i class="fa-solid fa-fire-flame-curved"></i>
			</span>
			<i class="fas fa-chevron-right lg:!hidden !block size-7 !leading-7 text-center text-xs bg-black text-white float-end"></i>
		</a>
		<div class="lg:absolute bg-white block lg:left-auto lg:right-0 xl:p-12 lg:p-[30px] max-lg:py-2.5 max-lg:border-t max-lg:border-gray-200 w-full lg:w-max lg:max-w-max lg:opacity-0 lg:invisible lg:translate-y-10 z-10 mt-0 text-left lg:overflow-y-auto lg:h-auto lg:max-h-[calc(100vh-80px)] duration-500 lg:group-hover:opacity-100 lg:group-hover:visible lg:group-hover:translate-y-0 max-lg:hidden mega-menu">
			<ul class="lg:flex flex-wrap -mx-[15px]">
				<li class="px-[15px] flex-1 min-w-44 xl:w-64 w-full relative">
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Pages</span>
					<ul class="lg:mb-[15px]">
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">About Us</span> 
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-orange-600/10 text-orange-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> NEW</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">About Me</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Pricing Table</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Our Gift Vouchers</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">What We Do</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Faqs 1</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Faqs 2</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-green-600/10 text-green-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> NEW</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Our Team</span>
							</a>
						</li>
					</ul>
				</li>
				<li class="px-[15px] flex-1 min-w-44 xl:w-64 w-full relative">
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Contact Us</span>
					<ul class="lg:mb-[15px]">
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Contact Us 1</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-yellow-600/10 text-yellow-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> Warning</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Contact Us 2</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Contact Us 3</span>
							</a>
						</li>
					</ul>
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Web Pages</span>
					<ul class="lg:mb-[15px]">
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Error 404 1</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Error 404 2</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-green-600/10 text-green-600"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> NEW</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Coming Soon</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Under Construction</span>
							</a>
						</li>
					</ul>
				</li>
				<li class="px-[15px] flex-1 min-w-44 xl:w-64 w-full relative">
					<span class="text-black block text-base font-semibold pb-2.5 font-title max-lg:hidden">Banner Style</span>
					<ul class="lg:mb-[15px]">				
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Banner with BG Color</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Banner with Image</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Banner with Video</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Banner with Kanbern</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Banner Small</span>
								<span class="text-tiny py-0.5 px-1 font-medium rounded bg-black/10 text-black"><i class="fa-solid fa-circle text-[7px] -translate-y-0.5 mr-0.5"></i> NEW</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Banner Medium</span>
							</a>
						</li>
						<li class="relative group/second">
							<a class="block py-1 text-sm text-gray-600 duration-500 hover:text-primary relative" href="javascript:void(0);">
								<span class="link-hover">Banner Large</span>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</li>
	</ul>

<ul className="nav navbar-nav">
	{megaMenu5.map(({ className, label, icon, submenu }, index) => (
	<li className={\`\${className} \${dropdown == index ? "open" : ""}\`} key={index}>
		<Link to={"#"} onClick={() => dropdownHandler(index)}>
		<span>{label}</span>
		<i className={icon}></i>
		<i className="fas fa-chevron-down tabindex"></i>
		</Link>
		<div className="mega-menu">
		<ul>
			{submenu.map(({ label, child, blog }: any, inde) => (
			<li key={inde}>
				<span className="menu-title">{label}</span>
				<ul className="list-hover3">
				{!blog &&
					child.map(({ label }: any, ind: number) => (
					<li key={ind}>
						<Link to={"#"}>
						<span>{label}</span>
						</Link>
					</li>
					))}
				{blog &&
					blog?.map(({ child, children }: any, ind: number) => (
					<>
						<li key={ind}>
						<span className="menu-title">{child}</span>
						<ul className="list-hover1">
							{children.map(({ label }: any) => (
							<li>
								<Link to={"#"}>{label}</Link>
							</li>
							))}
						</ul>
						</li>
					</>
					))}
				</ul>
			</li>
			))}
		</ul>
		</div>
	</li>
	))}
</ul>

<ul class="nav navbar-nav">
  @for(item of menuItem; track item; let i = $index){
	 <li class="has-mega-menu sub-menu-down auto-width {{ item.class }}">
		<a [routerLink]="item.route ? [item.route] : []">
		   <span>{{ item.title }}</span>
		   @if(item.badge){
			  @if(item.badge.icon){
				 <i class="{{ item.badge.icon }} ms-2 badge-icon badge-zoom d-inline-block text-{{ item.badge.color }}"></i>
			  } @else {
				 <span class="m-l5 badge-blank badge-wave wave-primary bg-{{ item.badge.color }}">{{ item.badge.text }}</span> 
			  }
		   }
		   @if(item.subMenu){
			  <i class="fas fa-chevron-down tabindex"></i>
		   }
		</a>
		@if(item.subMenu){
		<div class="mega-menu">
		   <ul>
			  @for(subitem of item?.subMenu; track subitem;){
			  <li>
				 <span class="menu-title">{{ subitem.title }}</span>
				 <ul class="list-hover3">
					@for(subSubItem of subitem?.subsubMenu; track subSubItem;){
					<li>
					   <a [routerLink]="subSubItem.route ? [subSubItem.route] : []">
						  <span>{{ subSubItem.title }}</span>
						  @if(subSubItem.subsubMenuBadge){
							 <span class="badge rounded bg-{{ subSubItem.subsubMenuBadge.color }} light"><i class="fa-solid fa-circle"></i> {{ subSubItem.subsubMenuBadge.text }}</span>
						  }
					   </a>
					</li>
					}
				 </ul>
				 @if(subitem.subsubMenu2){
					<span class="menu-title">{{ subitem.title2 }}</span>
					<ul class="list-hover3">
					   @for(subSubItem2 of subitem?.subsubMenu2; track subSubItem2;){
					   <li>
						  <a [routerLink]="subSubItem2.route">
							 <span>{{ subSubItem2.title }}</span>
							 @if(subSubItem2.subsubMenuBadge){
								<span class="badge rounded bg-{{ subSubItem2.subsubMenuBadge.color }} light"><i class="fa-solid fa-circle"></i> {{ subSubItem2.subsubMenuBadge.text }}</span>
							 }
						  </a>
					   </li>
					   }
					</ul>
				 }  
			  </li>
			  }
		   </ul>
		</div>
		}
	 </li>
  }
</ul>
						

<ul class="lg:flex flex-wrap navbar-nav">
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 relative group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary" href="javascript:void(0);">
			<span class="inline-block">Nav 1</span>
			<span class="inline-block size-2 rounded-full ml-[5px] bg-orange-600"></span>
		</a>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 relative group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary" href="javascript:void(0);">
			<span class="inline-block">Nav 2</span>
		</a>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 relative group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary" href="javascript:void(0);">
			<span class="inline-block">Nav 3</span>
			<span class="inline-block size-2 rounded-full ml-[5px] bg-blue-600"></span>
		</a>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 relative group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary" href="javascript:void(0);">
			<span class="inline-block">Nav 4</span>
		</a>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 relative group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary" href="javascript:void(0);">
			<span class="inline-block">Nav 5</span>
			<span class="inline-block size-2 rounded-full ml-[5px] bg-red-600"></span>
		</a>
	</li>
	<li class="lg:inline-block block max-lg:border-b max-lg:border-gray-200 relative group">
		<a class="lg:py-6 py-2 xl:px-4 lg:px-2 relative lg:inline-block block text-base/[29px] font-medium hover:text-primary" href="javascript:void(0);">
			<span class="inline-block">Nav 6</span>
		</a>
	</li>
</ul>

<ul className="nav navbar-nav">
  {[1, 2, 3, 4, 5, 6].map((el, index) => (
    <li key={index}>
      <Link to={"#"}>
        <span>Nav {el}</span>
        <span
          className={\`badge-blank m-l5 \${
            index == 2 ? "bg-info" : 
            index == 0 ? "bg-primary" : 
            index == 4 ? "bg-danger" : ""
          }\`}
        ></span>
      </Link>
    </li>
  ))}
</ul>

<ul class="nav navbar-nav">
  @for(item of menuItem; track item; let i = $index){
  <li>
	 <a [routerLink]="item.route ? [item.route] : []">
		<span>{{ item.title }}</span>
		@if(item.badge){
		   @if(item.badge.icon){
			  <i class="{{ item.badge.icon }} ms-2 badge-icon badge-zoom d-inline-block text-{{ item.badge.color }}"></i>
		   } @else {
			  <span class="badge-blank m-l5 bg-{{ item.badge.color }}"></span> 
		   }
		}
	 </a>
  </li>
  }
</ul>