/*------------------------------------*\
    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:33px 25px; font-weight: 600; font-family: var(--family-title);transition:all ease-in-out 0.3s 0s; border-bottom:6px solid transparent;}
.nav-item > a:hover, .nav-item:hover > a {color:#eaeaea; border-color: var(--primary);}
.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);margin: 0;
  padding: 20px; list-style: none; box-shadow:0 13px 48px rgba(0,0,0,.15);border-radius: 0px 5px 5px 5px; min-width: 253px;
}
.nav-submenu-item a {display:block; padding:10px 15px;transition:all ease-in-out 0.3s 0s; color:var(--secondary); font-size: 15px; font-weight: 500;}
.nav-submenu-item:last-child a{ border: none;}
.nav-submenu-item a:hover, .nav-submenu-item:hover>a {color: var(--primary)}

.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; right:20px;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 18px;}
}
@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;}
.nav-item > a .submenu-arrow { display: none; }
.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: var(--bs-white); margin: 15px auto; padding:15px 5px;}
.nav-submenu-item a{ padding: 10px; border: none;}
.nav-list li.d-lg-none { padding: 20px 0; border-top: 5px solid #eaeaea; margin-top: 10px; border-radius: 0;  }
.nav-item > a:hover, .nav-item:hover > a { color: var(--primary); border-color: var(--primary); }
.nav-submenu ul .nav-submenu-item:not(:last-child) a { border-bottom: 1px solid #f1f1f1;}

}

@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%; }
 .nav-mobile { right: 15px; height: 76px;}

}