nav {
	height: 100%;
	display: inline-flex;
	align-items: center;
	width: 100%;
} 
    /* normal menu css */
    .primary_menu {
      text-align: center;
    }
    .main_menu > ul > li {
        display: inline-block;
        position: relative;
        /*margin: 0 -2px;*/
      }
      .main_menu ul li {
        position: relative;
      }
      
      .main_menu ul li a {
        position: relative;
        margin: 0;
        border: 0px;
        padding:0px 8px 0px 8px;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 2px;
        letter-spacing: 0.001rem;
        color:#222222;
      }
      .main_menu ul li a i {
        font-size: 13px;
        line-height: 100%;
        margin-top: 1px;
      }
      .main_menu ul li .active,
      .main_menu ul li:hover > a {
        background:var(--secondary);
        color:var(--gold);
      }
      /* Normal Dropdown menu */
      .main_menu ul li ul {
        width: 230px;
        background: #fff;
        transition: 0.5s;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
        padding: 0 0 10px;
      }
      

      .main_menu ul li ul > li > a {
        padding: 10px 10px;
        font-weight: 400;
        font-size: 15px;
        text-transform: none;
        color: #333;
        white-space: nowrap;
        letter-spacing: 0.01rem;
        font-family:var(--Primary-font);
        text-wrap: wrap;
      }
 
    .main_menu ul li ul > li > a:hover{background: #3e4095;color: #F2D85A;}
      
      .main_menu ul li ul li ul {
        left: 100%;
        top: 0;
      }

      .main_menu ul li ul > li > ul > li > a {
        padding: 8px 10px;
        letter-spacing: 0;
      }
      
      /* mega menu css */
      .mega_menu_dropdown {
        position: static !important;
      }
      .mega_menu {
        left: 0;
        right: 0;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        transition: 0.5s;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
      }
      .mega_menu_item {
        width: 25%;
        padding: 30px 20px;
      }
    
      .mega_menu_item3 {
        width:33.33%;
        padding: 10px 10px;
      }
      .main_menu ul li .mega_menu_item a {
        padding: 10px 0;
        color: #333;
        text-align: left;
        text-transform: none;
      }
      .main_menu ul li .mega_menu_item3 a {
        padding: 10px 0;
        color: #333;
        text-align: left;
        text-transform: none;
      }
      
      .main_menu ul li .mega_menu_item a:hover {
        color: var(--hover-color);
      }
      .mega_menu_item h3 {
        margin-bottom: 15px;
        text-align: left;
      }
      .mega_menu_item img {
        width: 100%;
      }
      
      /* demo_2 css */
      .mega_menu_demo_2 .mega_menu {
        left: 50%;
        transform: translateX(-50%);
        width: 1140px;
      }

      /* demo_3 css */
      .mega_menu_demo_3 .mega_menu {
        left: 50%;
        transform: translateX(-50%);
        width: 940px;
      }
      
      .mobile_btn {
        display: none;
      }
      
      /* responsive css */
      @media (min-width: 992px) and (max-width: 1199.98px) {
        .container {
          width: 960px;
        }
        .mega_menu_demo_2 .mega_menu {
          width: 940px;
        }
        .mega_menu_demo_3 .mega_menu {
          width: 640px;
        }
        .main_menu ul li ul {
          width: 150px;
        }
      }
      
      @media (min-width: 768px) and (max-width: 991.98px) {
        .container {
          width: 720px;
        }
        .mega_menu_demo_2 .mega_menu {
          width: 700px;
        }
        .mega_menu_demo_3 .mega_menu {
          width: 500px;
        }
        .main_menu ul li a {
          font-size: 15px;
          padding: 20px 16px;
        }
        .main_menu ul li ul {
          width: 150px;
        }
      }
      @media (min-width: 768px) {
        .main_menu ul li ul {
          visibility: hidden;
          opacity: 0;
          position: absolute;
          margin-top: 50px;
          text-align: left;
        }
        .main_menu ul li .mega_menu {
          visibility: hidden;
          opacity: 0;
          position: absolute;
          margin-top: 50px;
        }
        .main_menu ul li:hover > ul {
          visibility: visible;
          opacity: 1;
          margin-top: 0px;
          z-index: 99;
        }
        .main_menu ul li:hover > .mega_menu {
          visibility: visible;
          opacity: 1;
          margin-top: 0;
          z-index: 99;
        }
      }
      
      @media (max-width: 767.98px) {
        .mega_menu_demo_2 .mega_menu,
        .container {
          width: 100%;
        }
      
        nav {
          padding:10px 10px;
        }
        .mobile_btn {
          cursor: pointer;
          display: block;
          font-family: 'Line Awesome Free';
          font-weight: 900;
          color:#fff;
          font-size:26px;
          line-height: 100%;
          text-align: right;
        }
      
        .main_menu {
          display: none;
          width: 100%;
        }
      
        .main_menu ul li {
          display: block;
        }
     
        .main_menu ul li a {
          border-bottom: 1px solid #ddd;
        }
        .main_menu ul li ul {
          width: 100%;
        }
        .main_menu ul li ul li ul {
          left: 0;
          top: auto;
        }
      
        .mega_menu .mega_menu_item {
          width: 50%;
        }
        .main_menu ul li ul {
          display: none;
          transition: none;
        }
        .main_menu ul li .mega_menu {
          display: none;
          transition: none;
        }
      
        .mega_menu_demo_2 .mega_menu {
          transform: translateX(0);
        }
      }
      
      @media (max-width: 575.98px) {
        .mega_menu .mega_menu_item {
          width: 100%;
        }
      }
      

      
/* Responsive Menu Styles
----------------------------------------*/
/*Note: change the max-width asper your requirment and change the same in aceResponsiveMenu({resizeWidth: "768" }) function*/

@media screen and (max-width: 1399px) {
    .demo {
		width:96%;
		padding:2%;
    }

    .ace-responsive-menu {
        width:100%;
    }
    .ace-responsive-menu > li {
        border-bottom: 1px solid #242424;
        display:block;
    }   
    .ace-responsive-menu li a:hover {
        background: #272727 !important;
        color:#fff;
    }
    .ace-responsive-menu > li:first-child {
        border-top: 2px solid #FD5025;
    }    
    .ace-responsive-menu > li > a i {
        color: #FF5737;
    }
    .ace-responsive-menu > li > a > .arrow:before {
         content: " \276F";
		font-weight: 300;
		text-shadow: none;
		width: 10px;
		display: inline-block;
		transform: rotate(90deg);
    }
    li.menu-active > a > .arrow:before {
    content: " \276F";
    font-weight: 300;
    text-shadow: none;
    width: 10px;
    display: inline-block;
	transform: rotate(90deg);
    }
    .ace-responsive-menu li ul.sub-menu > li {
        width: 100%;
    }
    .ace-responsive-menu li ul.sub-menu li ul.sub-menu li a
        {
        padding-left: 30px;
    }  
    .ace-responsive-menu li ul.sub-menu li ul.sub-menu li ul.sub-menu li a 
       {
        padding-left: 50px;
    }  
    .ace-responsive-menu > li > ul.sub-menu {
        position: static;
    }
    .ace-responsive-menu > li > ul.sub-menu > li ul.sub-menu {
        position: static;
    }
    .ace-responsive-menu > li > ul.sub-menu > li ul.sub-menu > li ul.sub-menu {
        position: static;
    }
    .ace-responsive-menu li ul.sub-menu li.menu-active > a > .arrow:before {
          content: " \276F";
    font-weight: 300;
    text-shadow: none;
    width: 10px;
    display: inline-block;
	transform: rotate(90deg);
    }
}