/* =============================
   Header
============================= */

.top-bar {
   padding: 10px 0;
   font-size: 16px;
}

.top-bar a {
   color: #000;
   display: inline-block;
   text-decoration: none;
}

.menuWrp-boxes {
   display: flex;
   justify-content: space-between;
}

span.cart-count {
   top: -9px;
   left: 15px;
   padding: 2px 8px;
   font-size: 12px;
}

.logo img {
   max-height: 45px;
}

.navbar-nav .nav-link {
   color: #1a1a5c;
   font-weight: 500;
   position: relative;
}

.navbar-nav .nav-link:hover {
   color: #ff9900;
}

.navbar-nav .nav-link::after {
   width: 0;
   left: 50%;
   height: 2px;
   background: #ff9900;
   content: "";
   position: absolute;
   bottom: 0;
   transition: .4s;
}

.navbar-nav .nav-link:hover::after {
   width: 100%;
   left: 0;
   height: 2px;
}

.navbar-nav {
   position: relative;
}

.navbar-nav li {
   position: relative;
}

.sub-menu {
   position: absolute;
   top: 100%;
   left: 0;
   min-width: 240px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0.25s;
   background: #fff;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   padding: 8px 0;
   z-index: 999;
   list-style: none;
}

.navbar-collapse.collapse.show {
   top: 0;
   left: 100px;
}

.sub-menu .sub-menu {
   top: 0;
   left: 100%;
   transform: translateX(10px);
}

.navbar-collapse.collapse.show .sub-menu .sub-menu {
   position: static;
}

.menu-item:hover>.sub-menu,
.menu-item.focused>.sub-menu {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.sub-menu .menu-item:hover>.sub-menu {
   transform: translateX(0);
}

.sub-menu li a {
   display: block;
   padding: 10px 16px;
   color: #333;
   transition: background 0.2s ease;
   font-size: 15px;
}

.sub-menu li a:hover {
   background: #f5f5f5;
}

.menu-item-has-children>a {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.menu-item-has-children>a::after {
   content: "\ea5f";
   font-family: "tabler-icons";
   font-size: 16px;
   transition: transform 0.25s ease;
}

.sub-menu .menu-item-has-children>a::after {
   content: "\ea61";
   transition: transform 0.25s ease;
   transform: translateX(84px);
   top: 10px;
}

.sub-menu .menu-item-has-children>a:hover::after {
   bottom: 0;
   top: auto;
   left: 0;
   transform: none;
   content: '';
}

header .search-box form {
   display: flex;
   gap: 10px;
}

header .search-box form input[type="submit"] {
   max-width: 100px;
}

.search-box input {
   width: 250px;
   border: 1px solid #ccc;
   padding: 5px 10px;
   outline: none;
   font-size: 14px;
}

.search-box button {
   background: #333;
   color: #fff;
   border: none;
   padding: 6px 12px;
   transition: .4s;
   font-size: 14px;
}

.search-box button:hover {
   background: #ff9900;
}

.cart {
   font-weight: 600;
}

#header_cart_trigger+.dropdown-menu {
   padding: 0;
}

span.ArchiPro-logo {
   max-width: 110px;
   width: 100%;
   display: inline-block;
}

span.sociallinks {
   display: flex;
   gap: 6px;
}

span.sociallinks i {
   font-size: 22px;
}

span.sociallinks a {
   width: 40px;
   height: 100%;
   display: flex;
   background: var(--color-primary);
   color: #fff;
   justify-content: center;
   align-items: center;
   border-radius: 6px;
   transition: .4s;
}

span.sociallinks a:hover {
   background: var(--color-secondary);
}

.logo-social-links {
   display: flex;
   gap: 24px;
}

.h_details {
   display: flex;
   align-items: center;
   gap: 20px;
}

.h_details a {
   font-size: 16px;
   display: flex;
   align-items: center;
   gap: 5px;
}

ul.navbar-nav {
   margin: 0 !important;
   display: flex;
   gap: 10px;
}

div#navMenu {
   justify-content: space-between;
}

ul.navbar-nav li {
   font-size: 17px;
   text-transform: capitalize;
}

@media (max-width: 991px) {
   .sub-menu {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      display: none;
      padding-left: 15px;
   }

   .sub-menu .sub-menu {
      position: static;
      transform: none;
   }

   .menu-item:hover>.sub-menu {
      opacity: 1;
      visibility: visible;
      transform: none;
   }

   .menu-item.is-open>.sub-menu {
      display: block;
   }

   .menu-item-has-children>a::after {
      content: "▸";
      float: right;
      transition: transform 0.2s ease;
   }

   .menu-item.is-open>a::after {
      transform: rotate(90deg);
   }

   .navbar-collapse.collapse.show {
      position: relative;
      left: 0;
   }
}

@media (max-width: 576px) {
   .menuWrp-boxes {
      padding: 0 25px;
   }

   .navbar-nav .nav-link::after {
      display: none;
   }
}