/* Overlay when menu opens */
        #menu-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 999;
        }

        /* Hamburger button */
		#hamburger-menu {
			position: relative;
			top: 50px;
			left: 0px;
			z-index: 1000;
			width: 35px;
			height: 35px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: calc(50% - 20px);
		}

		/* The 3 bars that make up the hamburger */
		.bar {
			display: block;
			position: absolute;
			width: 40px;
			height: 3px;
			background-color: #333;
			border-radius: 2px;
			transition: all 0.4s ease;
		}

		/* Position each bar */
		.bar1 {
			transform: translateY(-8px);
		}

		.bar2 {
			transform: translateY(0px);
		}

		.bar3 {
			transform: translateY(8px);
		}

		/* When .open is toggled, transform them into an X */
		.hamburger.open .bar1 {
			transform: rotate(45deg) translate(-5px, -6px);
		}

		.hamburger.open .bar2 {
			opacity: 0; /* Middle bar is hidden */
		}

		.hamburger.open .bar3 {
			transform: rotate(-45deg) translate(6px, -6px);
		}

        .hamburger-icon {
            font-size: 30px;
        }

        /* Side Menu */
        #side-menu {
            position: fixed;
            top: 0;
            right: -300px;
            width: 300px;
            height: 100%;
            background: #f8f8f8;
            transition: all 0.5s ease-in-out;
            z-index: 499;
			display: flex;
			justify-content: center;
			flex-direction: column;
        }
		#side-menu li {
			list-style:none;
		}
		#side-menu a svg {
			display:none; 
		}
		#side-menu li.has-submenu >  a  {
			position:relative; 
		}
		#side-menu li.has-submenu >  a > svg {
			display: block;
			position: absolute;
			left: 0;
			top: 30%;
			height: 15px;
		}

        #side-menu.active {
           /*  right: 250px; */
			transition: all 0.5s ease-in-out;
        }

        /* Close button */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 30px;
            cursor: pointer;
        }

        /* Menu items */
        .menu-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .menu-list li {
            padding: 10px 15px 0;
            position: static;
        }

        .menu-list a {
            text-decoration: none;
            color: #333;
            font-size: 22px;
            display: block;
			font-family: "assistant";
			font-weight:400;
        }
		
		#menu-main-menu {
			position: absolute;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: start;
			padding-top:160px;
			background:#f0f0f0;
			line-height:42px;
		}
		#menu-main-menu >  li  >  a  {
			color:#000000;
			transition: all ease 0.5s; 
		}
		#menu-main-menu >  li:hover  >  a  {
			color:#FBB732;
			transition: all ease 0.5s; 
		}


        /* Submenu Styles */
        #menu-main-menu .submenu {
			/* display: none; */
			display: flex;
			position: absolute;
			right: 300px;
			top: 0;
			background: #949494;
			width: 0;
			padding: 10px 0;
			height: 100%;
			justify-content: start;
			flex-direction: column;
			transition:all ease 0.5s; 
			z-index: -1;
			visibility: hidden;
			padding-top:160px;
			opacity:0;
        }
		
		#menu-main-menu .submenu li a {
			color:white;
			opacity:0.7;
			transition: all ease 0.5s; 
		}
		
		#menu-main-menu .submenu li:hover a {
			color:white;
			opacity:1;
			transition: all ease 0.5s; 
		}

        #menu-main-menu .submenu .submenu {
			position: absolute;
			right: 300px;
			top: 0;
			height: 100%;
			background: #7d7d7d;
			padding-top:160px;
        }
		#menu-main-menu .submenu .submenu li a {
			color:white;
			opacity:0.7;
			transition: all ease 0.5s; 
		}
		#menu-main-menu .submenu .submenu li:hover a  {
			color:white;
			opacity:1;
			transition: all ease 0.5s; 
		}
		
		
		#menu-main-menu .submenu li {

			visibility: hidden; /* Ensure it's not interactable */
			transition: opacity 0.3s ease-in-out 0.5s, visibility 0s linear 0.5s; /* 1s delay */
		}

		#menu-main-menu .has-submenu:hover > .submenu li {

			visibility: visible; /* Make it visible after 1s */
		}


        #menu-main-menu .has-submenu:hover > .submenu {
			visibility: visible;
			opacity:1;
			width:300px;
			transition:width ease 0.5s; 
        }
		#menu-main-menu .has-submenu .has-submenu:hover .submenu {
			visibility: visible;
			opacity:1;
			width:300px;
			transition:width ease 0.5s; 
        }

		@media only screen and (min-width: 800px) {
			#side_bar_holder,#side_bar {
				z-index:500;
				width: 260px !important;
				background: white;
			}
		}		
		@media only screen and (max-width: 1500px) {
 			#side-menu.active {
				/* right: 13%; */
				transition: all 0.5s ease-in-out;
			}
/*			.submenu {
				right:480px; 
			}
			.submenu .submenu {
				right: 780px;
			} */
		}