/* ---------------------BASE--------------------- */
		
		.fa-angle-down { margin-left: 5px; }
		.text-center { text-align: center; }
		.p-0 { padding: 0 !important; }
		.pb-20 { padding-bottom: 20px; }
		.img-container { height: 350px; }
		.img-fit { height: 100%; width: 100%; object-fit: cover; transition: 0.3s; }
		.hover\:contrast:hover { filter: brightness(1.2); transition: 0.3s; }
		.mobile-menu-head, .burger-icon { display: none; }
		
		/* ---------------------Main CSS--------------------- */
		.aic { display: flex; flex-wrap: wrap; align-items: center;	}
		
		/* ---------------------Header--------------------- */
		.header { position: relative; display: block; width: 100%; z-index: 99; padding: 5px; box-shadow: 0 0 20px rgb(0 0 0 / 50%); background: linear-gradient(to right,#eff4f7,#edf8ff); color: #333; }
		.item-right { flex: 0 0 15%; }
		.item-left { flex: 0 0 85%; display: flex; column-gap: 15px; justify-content: flex-end; }

		/* ---------------------Main Menu--------------------- */
		.main-menu { display: flex; justify-content: start; align-items: center; column-gap: 20px; padding: 0; margin: 0; list-style: none;	}
		.main-menu > li > a { padding: 5px 0px 5px 10px; font-weight: 600; color: rgb(0 0 0); transition: color 0.3s; text-decoration: none; }
		.main-menu li:hover > a { color: #5e080f; }

		/* ---------------------SubMenu--------------------- */
		.sub-menu { position: absolute; padding: 7px; margin-top: 25px; background: white; box-shadow: 2px 50px 100px -20px rgb(0 0 0 / 50%); opacity: 0;
		 visibility: hidden; transition: 0.3s; }
		@media only screen and (min-width: 992px) {
		 .menu-with-submenu:hover .sub-menu { margin-top: 20px; opacity: 1; visibility: visible; }
		}
		.sub-menu a { position: relative; display: block; padding: 5px 15px 5px 10px; font-weight: 500; color: rgb(70 70 70); text-align: left; text-decoration: none; margin-bottom: 1px; }
		.sub-menu li:hover > a { background: #f9f9f9; }
		.single-column { min-width: 200px; max-width: 350px; list-style: none; border-radius: 0px 0px 3px 3px; border-top: 3px solid #9f313a; }
		
		/* ---------------------SubMenu 2--------------------- */
		.sub-menu2 { position: absolute; padding: 20px 30px; top:0; margin-left: 250px; background: white; box-shadow: 2px 50px 100px -20px rgb(0 0 0 / 50%); opacity: 0;
		 visibility: hidden; transition: 0.3s; }
		@media only screen and (min-width: 992px) {
		 .menu-with-submenu2:hover .sub-menu2 { margin-top: 0px; opacity: 1; visibility: visible; }
		}
		.sub-menu2 a { position: relative; display: block; padding: 5px 15px 5px 0px; font-weight: 500; color: rgb(70 70 70); text-align: left; }
		.double-column { min-width: 280px; max-width: 350px; list-style: none; }
		

		/* ---------------------Mega Menu--------------------- */
		.mega-menu { right: 50%; transform: translateX(50%); }
		.mega-menu-column-4 { display: flex; column-gap: 10px; max-width: 1100px; /* set to parrent contain position relative */ width: 100%; }
		.mega-menu-column-4 .mega-item { flex: 25%; }
		.mega-col-title { padding: 5px 0px; color: #5e080f; user-select: none; text-align: left; font-size: 22px; }
		.menu-list { padding: 0; margin: 0px 0px 15px 0px; list-style: none; }

		/* ---------------------Media--------------------- */
		@media only screen and (max-width: 992px) {
		 .item-left { order: 2; flex: 0 0 100%; }
		 .aic { justify-content: space-between; }
		 .main-menu { justify-content: center; }
		 .burger-icon { display: flex; align-items: center; justify-content: center; height: 30px; width: 30px; background: white; color: #5e080f; font-size: 17px;
		  border: 2px solid; border-radius: 5px; cursor: pointer; }
		 .item-left { align-items: center; }
		 .item-left a { display: flex; }
		 .main-menu { flex-wrap: wrap; align-content: flex-start; row-gap: 20px; column-gap: 0; width: 320px; height: 100%; position: fixed; top: 0; right: 0; 	  overflow-x: hidden; background: white; transform: translateX(100%); transition: 0.5s; }
		 .main-menu.active { transform: translateX(0); box-shadow: 0 0 15px rgb(138, 138, 138); }
		 .main-menu > li { width: 100%; }
		 .main-menu > li > a { position: relative; display: flex; padding-right: 20px; border-bottom: 1px solid rgb(0 0 0 / 10%); }
		 .main-menu > li > a i { transform: rotate(90deg); }
		 .mobile-menu-head { position: sticky; top: 0px; display: flex; justify-content: space-between; align-items: center; height: 50px; width: 100%; background: white; border-bottom: 1px solid rgb(0 0 0 / 10%); z-index: 100; }
		 .mobile-menu-head.active .go-back { display: flex; }
		 .go-back { display: none; justify-content: center; align-items: center; width: 50px; height: 50px; cursor: pointer; border-left: 1px solid rgb(0 0 0 / 10%);}
		 .mobile-menu-close { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; font-size: 20px; cursor: pointer; border-right: 1px solid rgb(0 0 0 / 10%); }
		 .sub-menu { display: none; position: absolute; top: 0; right: 0; max-width: auto; min-width: auto; width: 100%; height: 100%; margin: 0; padding: 70px 20px 20px 20px; overflow-y: auto; box-shadow: none; visibility: visible; opacity: 1; transform: translateX(0); z-index: 1; }
		 .sub-menu.active { display: block; }
		 .sub-menu2 { position: relative; padding: 20px 10px; background: white; top: 0; right: 0; margin-left: 0px; box-shadow: 2px 50px 100px -20px rgb(0 0 0 / 50%); visibility: visible; opacity: 1; transition: 0.3s; }
		 .mega-menu { flex-direction: column !important; }
		 .mega-item { flex: 0 0 100% !important; margin-bottom: 20px; }
		 .single-column { min-width: auto; max-width: auto; }
		 .double-column { min-width: auto; max-width: auto; }
		 .menu-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 50%); z-index: 0; opacity: 0; visibility: hidden; transition: 0.5s; }
		 .menu-backdrop.active { opacity: 1; visibility: visible; }
		}

		/* ===================================Sliding animation */
		@keyframes slideRight {
		 0% { opacity: 0; transform: translateX(-100%); }
		 100% { opacity: 1; transform: translateX(0); }
		}
		@keyframes slideLeft {
		 0% { opacity: 1; transform: translateX(0); }
		 100% { opacity: 0; transform: translateX(-100%); }
		}