/*------------------------------------*\
    Flaunt JS Navigation
\*------------------------------------*/
.nav {position: relative;display: flex;width: 100%; align-items: center; flex: 1; justify-content: center;background: #f1f1f1;}
.nav-list { margin: 0; padding: 0;width: 100%; display: flex; justify-content: space-between;}
.nav-item { display: inline-block; position: relative; list-style: none;}
.nav-item>a { display: block; color: var(--primary); padding:8px 0; text-decoration: none; font-weight: 500; position: relative; font-size: 18px;}

.nav-item > a:hover, .nav-item:hover > a, .nav-item.active > a {color: var(--secondary);}
.nav-item > a:hover .submenu-arrow, .nav-item:hover>a .submenu-arrow { filter:none; opacity:1;}
.nav-item:hover>.nav-submenu { opacity: 1; top: 100%; visibility: visible;}
/* 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); border: 1px solid #E0E0E0;margin: 0;
  padding: 0; list-style: none; box-shadow: 0px 4px 19px 0px #00000024;border-radius: 8px; min-width: 253px;
}
.nav-submenu-item a {display: block; padding:8px 10px; border-bottom: 1px solid #f1f1f1;transition: all ease-in-out 0.3s 0s;text-decoration: none;font-size: 16px; color: var(--secondary);}
.nav-submenu-item:last-child a{ border: none;}
.nav-submenu-item a:hover {color: var(--primary)}

.nav-submenu-item .submenu-arrow {
  transform: rotate(-90deg);
}
.nav-submenu-item:hover > a .submenu-arrow {
  filter: none;
  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; right: 0;background: url(../images/nav.svg) no-repeat center center;
  background-size: 24px; height: 56px; width: 44px; z-index: 99;
}
.activeNav .nav-mobile {background: url(../images/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(../images/menu-arrow.svg) no-repeat center center;}
.nav-rotate {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/*------------------------------------*\
    Media Queries
\*------------------------------------*/
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .nav-mobile { display: block;}
  .nav {  position: static  }
 .nav-list { position: fixed;left: -400px; background: #fff;top: 0; z-index: 99; width: 370px; height: 100vh;overflow: auto;
    padding: 30px 0; transition: all ease-in-out 0.3s 0s;display: block;
  }
  .nav.activeNav::after { content: ""; background: #000;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: 15px; border-bottom: 1px solid #eaeaea;}
  .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; }
  .nav-item > a .submenu-arrow { display: none; }
  .nav-submenu.megaMenu { width: 100%; column-count: 1; column-gap: 0px; padding:0px;}
  .nav-submenu-item .submenu-arrow{ display: none;}
  .nav-submenu ul.nav-submenu {opacity: 1; visibility:visible; max-width:90%; border-radius:5px; border:1px solid #E0E0E0; background: #fff; margin: 15px auto;}
  .nav-submenu-item a{ padding: 10px;}


}

@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%; }
}