.navigation-primary ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
.navigation-primary > ul > li {
   display: inline-block;
   position: relative;
}
.navigation-primary > ul > li > a {
   padding: 40px 16px;
   position: relative;
   transition: all 0.3s ease-out 0s;
   display: block;
   text-decoration: none;
   text-transform: capitalize;
   font-style: normal;
   font-family: Roboto, sans-serif;
   font-size: 16px;
   font-weight: 500;
   line-height: 22px;
}
.navigation-primary > ul > li > a:before {
   position: absolute;
   z-index: 1;
   content: "";
   height: 2px;
   background-color: #5a49f8;
   bottom: 26px;
   width: 0%;
   left: 0;
   right: 0;
   margin: 0 auto;
   -webkit-transition: all 0.5s ease-out;
   -o-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;
   background: currentColor;
}
.navigation-primary > ul > li > a:hover:before {
   width: 50%;
}

@media(min-width: 1026px) {
   .navigation-primary ul ul {
      position: absolute;
      top: 100%;
      left: 0;
      width: 170px;
      opacity:0;
      visibility:hidden;
      transition:all 0.4s;
   }
   .navigation-primary ul ul li a {
      padding: 10px;
      display: block;
      line-height: normal;
   }
   .navigation-primary ul li.has-submenu:hover > ul {
      opacity:1;
      visibility:visible;
   }

}

@media(max-width: 1199px) and (min-width: 1026px) {
   .navigation-primary > ul > li > a {
      padding-left: 8px;
      padding-right: 8px;
   }
}

@media(max-width: 1025px) {
   .navigation-primary > ul > li {
      display: block;
   }
   .navigation-primary > ul li {
      border-top: 1px dashed #ddd;
      line-height: 30px;
   }
   .navigation-primary > ul li a {
      transition: all 0.3s ease 0s;
      text-decoration: none;
      display: block;
      position: relative;
      color: #4c4b4b !important;
      font-size: 14px;
      font-weight: 500;
      padding: 5px 30px;
      line-height: 30px;
      text-transform: none;
      background: transparent !important;
   }
   .navigation-primary > ul li {
      position:relative;
   }
   .navigation-primary > ul li:before {
      content: "\f105";
      font-family: "Font Awesome 5 Free";
      font-size: 10px;
      font-weight: 900;
      color: #5a49f8;
      transition: all 0.3s ease-out;
      position: absolute;
      left: 14px;
      top: 5px;
   }
   .navigation-primary > ul > li > a:before {
      content: none !important;
   }
   .navigation-primary > ul li a:hover {
      color: #5a49f8 !important;
   }
   .navigation-primary ul ul {
      background: transparent !important;
   }
   .navigation-primary > ul ul li {
      padding-left: 10px;
   }
   .navigation-primary > ul ul li:before {
      left: 24px;
   }
   .navigation-primary ul ul {
      display:none;
   }
   .child-trigger {
      position: absolute;
      right: 0;
      width: 40px;
      height: 41px;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
   }
   .child-trigger:after {
      content: "+";
   }
   .child-open > .child-trigger:after {
      content: "-";
   }
}