/*------------------------------------*\
    Flaunt JS Navigation
\*------------------------------------*/
.nav {position: relative;display: flex;width: 100%; align-items: center; flex: 1; justify-content: center;}
.nav-list { margin: 0; padding: 0;}
.nav-item { display: inline-block; position: relative; list-style: none;}
.nav-item a {display: block; color: var(--bs-white); padding:0 12px; font-weight:500;transition:all ease-in-out 0.3s 0s;font-size:16px; text-transform: uppercase;}
header.sticky .nav-item > a{ padding:32px 15px; }
.nav-item > a:hover, .nav-item:hover > a {color:var(--hover-accent);}
.nav-item:hover>.nav-submenu { opacity: 1; top: 45px; visibility: visible;}
header.sticky .nav-item:hover > .nav-submenu { top: 89px;}
/* Navigation submenu */
.nav-submenu { display: block; z-index: 1; position: absolute;opacity: 0;visibility: hidden; left: 0;top: calc(100% + 30px);
  transition: all ease-in-out 0.4s 0s; width: auto;background:var(--bs-white);margin: 0;
  padding: 10px 20px; list-style: none; box-shadow: 5px 5px 10px 0px #0003; border-radius:5px; min-width: 253px;
}
.nav-submenu-item a {display:block; padding:10px 0;transition:all ease-in-out 0.3s 0s; color:var(--secondary); font-size: 16px; font-weight: 600;}
.nav-submenu-item:last-child a{ border: none;}
.nav-submenu-item a:hover, .nav-submenu-item:hover>a {color:var(--hover-accent)}

.nav-submenu-item .submenu-arrow {
  transform: rotate(-90deg);
  filter: brightness(100%) invert();
  margin-left: 15px;
}
.nav-submenu-item:hover > a .submenu-arrow {
  opacity: 1;
}
.nav-submenu ul.nav-submenu{ opacity: 0;visibility: hidden; left: 100%; top:4px;}
.nav-submenu .nav-submenu-item {
  position: relative;
}
.nav-submenu .nav-submenu-item:hover ul.nav-submenu {
  opacity: 1;
  visibility: visible;
}
/* Mobile navigation */
.nav-mobile { display: none;cursor: pointer; position: absolute; top: 0px; left:15px;background: url(../assets/nav.svg) no-repeat center center; background-size: 24px; height: 56px; width: 44px; z-index: 99;
}
.activeNav .nav-mobile {background: url(../assets/closeMenu.svg) no-repeat center center; background-size: 24px;
  left: 380px;right: auto; position: fixed;
}

/* Mobile navigation, clickable area for revealing <ul> */
.nav-click {position: absolute;top: 0; right: 0; display: none;height: 49px;width: 50px;cursor: pointer;}
.nav-click i {display: block; height: 48px; width: 48px; background: url(../assets/menu-arrow-down.svg) no-repeat center center; filter: brightness(0);}
.nav-rotate {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/*------------------------------------*\
    Media Queries
\*------------------------------------*/
@media(max-width:1400px){
  .nav-item>a{padding: 25px 9px;}
}
@media only screen and (min-width: 320px) and (max-width: 991px) {
  .nav-mobile { display: block;}
  .nav {  position: static  }
 .nav-list { position: fixed;left: -400px; background: var(--bs-white);top: 0; z-index: 99; width: 370px; height: 100vh;overflow: auto;
    padding: 30px 0; transition: all ease-in-out 0.3s 0s;
  }
  .nav.activeNav::after { content: ""; background: var(--secondary);width: 100%; height: 100%;position: fixed;opacity: .8; left: 0;
    top: 0; z-index: 9;   
  }
.activeNav .nav-list { left: 0;}
.nav-item { width: 100%; float: none;}
.nav-item > a {padding: 10px 25px;  border: none; color: var(--body-color);}
.nav-click { display: block; }
.nav-item:hover .nav-submenu { display: none; }
.nav-submenu {position: static; width: 100%; background: #f5f5f5;opacity: 1; visibility: visible; display: none;
  border-radius: 0;box-shadow: none; border: none; border-bottom: 1px solid #eaeaea; transition: inherit; padding: 0;}
.nav-item > a .submenu-arrow { display: none; }
.nav-submenu-item .submenu-arrow{ display: none;}
.nav-submenu ul.nav-submenu {opacity: 1; visibility:visible; background:rgba(255,255,255,.8); margin: 6px 0; padding:0px;}
.nav-submenu-item a{ padding: 8px 25px; border: none;}
.nav-list li.d-lg-none { padding: 20px 0; border-top:1px solid #eaeaea; margin-top: 10px; border-radius: 0;  }
.nav-item > a:hover, .nav-item:hover > a { color: var(--hover-accent);}
.nav-submenu ul .nav-submenu-item:not(:last-child) a { border-bottom: 1px solid #f1f1f1;}
header.sticky .nav-item > a {	padding: 10px 25px;}
.nav-submenu-item a { font-weight: 500; text-transform: capitalize;}
.nav-submenu ul .nav-submenu-item a {
	font-size: 15px;
	color: rgba(0,0,0,5);
}
}

@media only screen and (min-width: 320px) and (max-width: 767px) {

 .activeNav .nav-mobile {left: auto; right: 0; position: fixed;}
 .nav-list { left: -100%; width: 90%; }

}