/* change your menu color here */
:root {
   --color1: #6d6e71;
}

/* Colors select as menu name */
.color-color1 {
   color: var(--color1) !important;
}


.bg-color1 {
   background-color: var(--color1) !important;
}


/* menu Colors */
body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu > div > ul > li.menu-color-color1:hover > a,
body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu > div > ul > li.menu-color-color1.active > a,
#primary-menu ul li.menu-color-color1 ul li:hover > a,
#primary-menu ul li.menu-color-color1 ul li.active > a,
#primary-menu ul li.menu-color-color1 ul li:hover > a {
   color: var(--color1) !important;
}

.navbar-nav.nav-sm .nav-link:hover,
.navbar-nav.nav-sm .nav-link.active {
   color: #FFF;
}

.bg-color-color1.nav-link:hover,
.menu-color-color1 > a::before,
.bg-color-color1.nav-link.active {
   background: var(--color1) !important;
}

#primary-menu .container > ul > li > a {
   letter-spacing: 0;
   font-weight: 500 !important;
   -webkit-transition: color .4s ease;
   -o-transition: color .4s ease;
   transition: color .4s ease;
}
/*#primary-menu ul .menu-color-color1 ul:not(.mega-menu-column),
#primary-menu ul li .menu-color-color1 .mega-menu-content {
   border-top-color: var(--color1) !important; 
}*/

#primary-menu ul li .mega-menu-content.style-2 ul.mega-menu-column > li.mega-menu-title > a {
   font-size: 14px;
   margin-bottom: 5px;
}

#primary-menu ul li .mega-menu-content.style-2 ul.mega-menu-column > li.mega-menu-title {
   margin-top: 10px;
}

#primary-menu ul li .mega-menu-content.style-2 ul li > a {
   padding-top: 4px;
   padding-bottom: 4px;
}

@media (min-width: 992px) {
   #primary-menu .container ul ul li > a {
      font-size: 14px;
      text-transform: none;
      font-weight: 400;
      padding: 6px 20px;
   }

   #primary-menu .container ul ul li:hover > a ,
      #primary-menu .container ul ul li.active > a {
      padding-left: 25px;
   }
}

.nav-link {
   color: #333;
}

.navbar-nav.nav-sm .nav-link {
   color: #444;
   font-size: 12px;
   font-weight: 400;
   padding: 2px 6px;
   line-height: 21px;
   margin: 4px 2px;
   border-radius: 2px;
   font-family: 'Roboto', sans-serif;
   -webkit-transition: all .3s ease;
   -o-transition: all .3s ease;
   transition: all .3s ease;
}

.navbar-light .navbar-nav .dropdown-toggle::after {
   display: none;
}

.line-xs {
   margin: 4px 0 20px;
   border-bottom: 3px solid #EEE;
}

   .line-xs:after {
      top: 100%;
      left: 30px;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba(51,51,51,0);
      border-top-color: #EEE;
      border-width: 8px;
      margin-left: -8px;
      z-index: 1;
      background: none;
   }

   .line-xs.line-color1 {
      border-bottom-color: var(--color1) !important;
   }

      .line-xs.line-color1:after {
         border-top-color: var(--color1) !important;
      }


#primary-menu div ul li > a::before {
   content: '';
   position: absolute;
   top: 0px;
   left: 0;
   width: 100%;
   height: 1px;
   -webkit-transform: scale3d(0, 0, 0);
   transform: scale3d(0, 0, 0);
   -webkit-transition: -webkit-transform 0.1s;
   transition: transform 0.1s;
   -webkit-transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
   transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
}

#primary-menu div ul li:hover > a::before,
#primary-menu div ul li.active > a::before {
   -webkit-transform: scale3d(1, 3, 1);
   transform: scale3d(1, 3, 1);
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
}

#primary-menu.style-2 > div > ul > li:first-child > a {
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 10px;
}