.nav_ico{display:block;width:4rem;cursor: pointer;}
.main_nav ul li{float:left; margin:0;position:relative;font-size:1.6rem; font-weight:400;position:relative;}
.main_nav ul li a{color:white;display:block;padding:0.8rem 2rem;transition: all 0.3s ease-out;}
.main_nav ul li:first-child a{padding-left:0}
.main_nav ul li:hover > a{color: var(--white)}
.main_nav ul li i{position: absolute;right:1rem;top:1.1rem;color: var(--white);}
.main_nav ul li:hover > i{ color: var(--bgSecondary)}
.main_nav ul ul{position: absolute;left: 0;top:100%;white-space: nowrap;opacity: 0;transition: all 0.3s ease-out;pointer-events: none; z-index:1000}
.main_nav ul ul li{float: none;margin:0;border-bottom: 1px solid var(--white); min-width:25rem; font-size:1.5rem;}
.main_nav ul ul li:first-child a{padding-left:2rem}
.main_nav > ul > li > ul:after{content: "";position: absolute;bottom: 100%;height: 16px;width: 100%;left: 0;}
.main_nav ul ul ul{left: 100%;top:0;}
.main_nav ul li:hover > ul{opacity: 1;pointer-events: auto;}
.main_nav ul ul li a{background:var(--darkbg);}
.main_nav ul li:hover ul li:hover > a{color:var(--white);background:var(--bgSecondary);}
.main_nav ul ul li i{transform: rotate(-90deg);}
.main_nav ul ul li:hover i{color:var(--white);}


@media screen and (min-width:1024px){
  .nav_ico,  #menuTrigger{display:none;} 
}

/*This Media Query use for Mobile View*/
@media screen and (max-width:1023px){
  .nav_ico{display:block;position:relative;z-index:10;color:var(--darkbg);font-size:3.6rem; width:100%;} 
  .nav_ico i{position:absolute; top:-5rem; right:2rem;}
  .main_nav{position: fixed;left: 0;top:4.3rem;padding:0;background:var(--bgPrimary);z-index: 5;height:calc(100vh - 5.6rem);overflow: auto;width:calc(100% - 8rem);transition: all 0.3s ease-out;transform: translateX(-100%); font-size:1.4rem;}
  .main_nav ul li {float:none;margin: 0 !important;padding: 0 !important;border-bottom:1px solid var(--darkbg);}  
  .main_nav ul li a{display:block;color:var(--white);padding:1rem;}
  .main_nav ul li:first-child a{padding-left:1rem}
  .main_nav > ul > li:hover > a{background:var(--bgSecondary);color:var(--white);} 
  .main_nav ul ul{position:static;pointer-events: auto;opacity:1;height:0;overflow:hidden;}
  .main_nav ul ul li a,  .main_nav ul ul li:first-child a{padding-left:3rem;}
  .main_nav ul ul ul li a,  .main_nav ul ul ul li:first-child a{padding-left:6rem;}
  .main_nav ul ul ul ul li a,  .main_nav ul ul ul ul li:first-child a{padding-left:9rem;}
  .main_nav ul li:hover > ul {height: auto;}
  .main_nav ul li i{right: 1rem !important; }
  .main_nav ul li:hover > i{ color: var(--white) }
  .main_nav ul ul li i{transform: rotate(0deg);}
  #menuTrigger{opacity:0;position:fixed;width: 0;height: 0;margin: 0}
  #menuTrigger:checked + .main_nav{transform: translateX(0%);}
}

/*This Media Query use for iPad Portrait View*/
@media only screen and (min-width:768px) and (max-width:1023px){
	.nav_ico{color:var(--light); font-size:2.5rem}
	.nav_ico i{position:absolute; top:1.3rem; right:2rem;}
	.main_nav{top:11.8rem;height:calc(100vh - 10rem); width:calc(100% - 40rem);}
}