.main-header {
  padding-top: 18px;
  padding-bottom: 18px;
}
.main-header .items-right {
  display: flex;
}
.main-header .navbar-right div ul {
  @apply hidden;
}
@screen lg {
  .main-header .navbar-right div ul {
    @apply flex;
  }
}
.main-header .items-left {
  z-index: 9999;
}
.main-header .items-left .brand {
  @apply text-2xl
        font-bold;
}
.main-header .items-left .brand .logo-invert {
  transition: all 0.4s ease-in-out;
}
.main-header .items-left .brand .logo-invert.active {
  @apply opacity-100;
}
.main-header .items-left .brand .logo.active {
  opacity: 0;
}
.main-header .items-left .brand img {
  @apply h-20
          w-auto;
}
.main-header .search-icon {
  @apply flex
      items-center
      p-0
      mr-2
      ml-8;
  height: 50px;
  z-index: 9999;
}
.main-header .search-icon svg {
  @apply h-5
        w-5;
}
.main-header div.navbar-right ul li {
  @apply ml-4
      justify-center
      px-4;
  padding-top: 10px;
  min-width: 100px;
  padding-bottom: 10px;
}
.main-header .navbar,
.main-header .navbar-right {
  @apply hidden
      items-center
      text-lg;
  z-index: 9989;
}
@screen md {
  .main-header .navbar,
.main-header .navbar-right {
    @apply flex;
  }
}
.main-header .navbar ul,
.main-header .navbar-right ul {
  @apply flex;
}
.main-header .navbar ul li,
.main-header .navbar-right ul li {
  @apply relative
          flex
          items-center
          ml-8;
}
.main-header .navbar ul li a,
.main-header .navbar-right ul li a {
  @apply font-medium
            text-base
            text-white;
}
.main-header .navbar ul li a:hover,
.main-header .navbar-right ul li a:hover {
  @apply opacity-50;
}
.main-header .navbar ul li.menu-item-has-children::after,
.main-header .navbar-right ul li.menu-item-has-children::after {
  @apply relative
              ml-2
              border-t-4
              border-l-4
              border-r-4
              border-transparent;
  border-top-color: white;
  content: "";
}
.main-header .navbar ul li ul,
.main-header .navbar-right ul li ul {
  @apply text-gray-800
            opacity-0
            flex
            pt-3
            pb-2
            flex-col
            absolute
            bg-white;
  top: 100%;
  min-width: 270px;
  z-index: 10;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.15s ease;
}
.main-header .navbar ul li ul li,
.main-header .navbar-right ul li ul li {
  @apply block
              p-0
              pt-1
              m-0;
}
.main-header .navbar ul li ul li:not(:last-child) a,
.main-header .navbar-right ul li ul li:not(:last-child) a {
  @apply border-b
                  border-gray-500;
}
.main-header .navbar ul li ul li a,
.main-header .navbar-right ul li ul li a {
  @apply block
                mx-4
                py-1;
}
.main-header .navbar ul li:hover ul,
.main-header .navbar-right ul li:hover ul {
  @apply opacity-100;
  transform: translateY(0);
  transition-duration: 0.25s;
  visibility: visible;
}

.header-2 .items-right,
.header-2 .navbar {
  @apply w-2/5;
}
.header-2 .items-right {
  @apply justify-end;
}
.header-2 .items-left {
  @apply text-center
      w-2/5;
}
@screen sm {
  .header-2 .items-left {
    @apply w-1/5;
  }
}
.header-2 .items-left img {
  @apply inline-block;
}