/**=====================
    Header css
==========================**/
header {
  background-color: $white;

  &.header-absolute {
    position: absolute;
    width: 100%;
    top: 62px;

    .main-menu {
      background-color: $white;

      .menu-left {
        .navbar {
          padding: 20px 45px 20px 0;
        }
      }

      .brand-logo {
        padding-block: 20px;

        img {
          width: 150px;
        }
      }
    }

    .pixelstrap {
      >li {
        >a {
          padding-block: 20px;

          &:hover,
          &:active,
          &:focus,
          &.highlighted {
            padding-block: 20px;
          }
        }
      }

      li {
        .lable-nav {
          top: 0;
        }
      }
    }

    .onhover-div {
      padding-block: 20px;
    }
  }

  &.header-gym {
    position: absolute;
    width: 100%;

    .main-menu {
      background-color: rgba($black, 0.8);
      padding: 0 15px;
      z-index: 1;

      .menu-left {
        .navbar {
          padding: 20px 45px 20px 0;

          i {
            color: $white;
          }
        }
      }

      .brand-logo {
        padding-block: 20px;
      }

      .onhover-div {
        .show-div {
          top: 70px;
        }
      }
    }

    .pixelstrap {
      >li {
        >a {
          padding-block: 20px;
          color: $white;

          &:hover,
          &:active,
          &:focus,
          &.highlighted {
            padding-block: 20px;
            color: $white;
          }
        }
      }
    }

    .onhover-div {
      padding-block: 20px;

      >div {
        img {
          filter: brightness(54);
        }
      }
    }

    .top-header {
      z-index: 9;
      position: relative;
      background: transparent;

      .header-contact {
        li {
          color: $white;

          i {
            color: $white;
          }
        }
      }

      .header-dropdown {
        li {
          color: $white;

          a {
            color: $white;

            i {
              color: $white;
              padding-right: 8px;
            }
          }
        }
      }

      &.blue-layout {
        border-bottom: 1px solid #223b7d;
      }
    }

    &.sticky {
      width: 100%;
      background-color: $black;
    }
  }

  &.header-black {
    background-color: $black;

    .main-menu {
      .menu-left {
        .navbar {
          padding: 20px 45px 20px 0;

          i {
            color: $white;
          }
        }
      }

      .brand-logo {
        padding-block: 20px;
      }
    }

    .pixelstrap {
      >li {
        >a {
          padding-block: 20px;
          color: $gray-90;

          &:hover,
          &:active,
          &:focus,
          &.highlighted {
            padding-block: 20px;
            color: $gray-90;
          }
        }
      }

      li {
        .lable-nav {
          top: 0;
        }
      }
    }

    .onhover-div {
      padding-block: 20px;

      >div {
        img {
          filter: brightness(54);
        }
      }
    }
  }

  &.header-5 {
    position: fixed;
    width: 100%;
    background-color: transparent;
    left: 0;
    top: 0;

    .top-header {
      background-color: transparent;

      .header-dropdown {
        >li {
          padding-top: 40px;
          padding-right: 0;
        }

        .onhover-dropdown {
          .onhover-show-div {
            top: 80px;
          }
        }
      }
    }

    .onhover-div {
      .show-div {
        top: 80px;
      }
    }

    &.container-med {
      .container-fluid {
        padding-inline: 50px;
      }
    }

    &.sticky {
      width: 100%;
      background-color: $white;
    }

    &.none-sticky {
      &.sticky {
        position: unset;
      }
    }

    &.left-sidebar-header {
      position: fixed;
      background-color: $white;
      z-index: 1;

      .container-fluid {
        padding-inline: 40px;
      }

      .onhover-div {
        padding-block: 20px;
      }

      .top-header {
        .header-dropdown {
          >li {
            padding-top: 20px;
          }
        }
      }

      .main-menu {
        .brand-logo {
          padding-block: 20px;
        }
      }
    }

    &.overlay-style {
      background-color: rgba($black, 0.28);
      z-index: 9;

      .pixelstrap {
        >li {
          >a {
            color: $white;

            &:hover,
            &:active {
              color: $white;
            }
          }
        }
      }
    }
  }

  &.header-6 {
    .top-header {
      background-color: var(--theme-color);

      .header-contact {
        li {
          color: $white;

          i {
            color: $white;
          }
        }
      }

      .header-dropdown {
        li {
          color: $white;

          a {
            color: $white;

            i {
              color: $white;
            }
          }
        }
      }
    }
  }

  &.header-7 {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    background-color: transparent;

    .main-menu {
      .menu-left {
        .navbar {
          padding: 25px 45px 25px 0;

          i {
            color: $white;
          }
        }
      }

      .brand-logo {
        padding-block: 25px;
      }
    }

    .onhover-div {
      padding-block: 25px;

      img {
        filter: brightness(100);
      }

      .show-div {
        img {
          filter: unset;
        }
      }

      &:hover {
        .show-div {
          transform: translateY(-23px);
        }
      }
    }

    .game-layout {
      background-color: rgba($black, 0.5);
    }

    .pixelstrap {
      &.sm-horizontal {
        >li {
          >a {
            color: $white;

            &:hover,
            &:active {
              color: $white;
            }
          }
        }
      }
    }

    .top-header {
      background-color: transparent;

      &.top-header-dark {
        .header-contact {
          li {
            color: $white;

            i {
              color: $white;
            }
          }
        }

        .header-dropdown {
          >li {
            color: $white;

            >a {
              color: $white;

              i {
                color: $white;
              }
            }
          }
        }
      }
    }
  }

  &.header-tools {
    position: absolute;
    width: 100%;
    top: 35px;
    z-index: 1;
    background-color: transparent;

    .container {
      padding-inline: 30px;

      &.rounded-5 {
        border-radius: 5px;
      }
    }

    .top-header {
      background-color: transparent;

      .container {
        background-color: var(--theme-color);
      }

      .header-contact {
        padding: 10px 0;

        li {
          color: $white;
        }
      }

      .header-dropdown {
        >li {
          @media (max-width: 1400px) {
            padding: 25px 0 25px 10px !important;
          }
        }

        li {
          color: $white;
          padding: 10px 25px;

          i {
            font-size: calc(21px + (25 - 21) * ((100vw - 320px) / (1920 - 320)));
            color: #6a6a6a;

            &:hover {
              color: var(--theme-color);
            }
          }
        }
      }
    }

    .logo-menu-part {
      >.container {
        background-color: $white;
        border-bottom: 2px solid var(--theme-color);
      }
    }

    .main-menu {
      .menu-left {
        .navbar {
          padding: 25px 45px 25px 0;
        }
      }

      .menu-right {
        .icon-nav {
          li {
            @media (max-width: 1400px) {
              padding-left: 4px;
            }
          }

          svg {
            width: unset;
            height: unset;
            font-size: calc(21px + 4 * (100vw - 320px) / 1600);
            color: #6a6a6a;

            &:hover {
              color: var(--theme-color);
            }
          }
        }
      }

      .brand-logo {
        padding-block: 25px;
      }
    }

    .pixelstrap {
      &.sm-horizontal {
        >li {
          >a {
            padding-block: 25px;

            &:hover,
            &:active,
            &:focus,
            &.highlighted {
              padding-block: 25px;
            }
          }
        }

        li {
          .lable-nav {
            top: 5px;
          }
        }
      }
    }

    .onhover-div {
      padding-block: 25px;
    }

    .cart_qty_cls {
      top: calc(19px + (16 - 19) * ((100vw - 320px) / (1920 - 320)));
    }

    &.sticky {
      background-color: $white;
      transition: none;

      .top-header {
        display: block;
      }

      .logo-menu-part {
        >.container {
          border-bottom: 0;
          padding: 0 12px;
        }
      }
    }

    &.header-style {
      &.top-relative {
        position: relative;
        width: 100%;
        top: 0;
        background-color: $white;
        box-shadow: 0 0 8px $round-border;

        .container {
          padding-inline: 15px;
        }
      }
    }
  }

  &.green-gradient {
    .top-header {
      background: var(--theme-color);
      background-image: linear-gradient(to right, var(--theme-color), var(--theme-color2));

      .header-contact {
        padding: 10px 0;

        li {
          color: $white;

          i {
            color: $white;
          }
        }
      }

      .header-dropdown {
        li {
          color: $white;
          padding: 10px 25px;

          a {
            color: $white;

            i {
              color: $white;
            }
          }
        }
      }
    }

    .pixelstrap {
      li {
        .lable-nav {
          background: var(--theme-color);
          background-image: linear-gradient(to right, var(--theme-color), var(--theme-color2));
        }
      }
    }
  }

  &.header-metro {
    position: absolute;
    width: 100%;
    background-color: transparent;

    .top-header {
      background-color: transparent;
      z-index: 1;
      position: relative;
    }

    .metro {
      background-color: $white;
      z-index: 1;
      position: relative;
    }
  }

  &.left-header {
    .top-header {
      padding-left: 300px;
      background-color: $white;

      .header-dropdown {

        .mobile-wishlist {
          img {
            display: block;
          }

          i {
            display: none;
          }
        }
      }
    }

    .onhover-div {
      padding-block: 15px;

      >div {
        img {
          width: 20px;
          height: auto;
        }
      }

      .show-div {
        top: 56px;
      }
    }

    .sidenav {
      left: 0;
      box-shadow: 0 0 1px 0 rgba($black, 0.25);

      .sidebar-back {
        display: none;
      }

      nav {
        background-color: $white;
      }

      .pixelstrap {
        >li {
          >a {
            padding: 10px 0 20px 0;
            background-color: $white;

            &:hover,
            &:focus,
            &.highlighted {
              padding: 10px 0 20px 0;
              background-color: $white;
            }
          }

          .lable-nav {
            top: -12px;
            background-color: $white-dark;

            &:before {
              border-top: 5px solid $color-red;
            }

            &.grey-lable {
              background-color: #4d6171;

              &:before {
                border-top: 5px solid #4d6171;
              }
            }
          }
        }
      }

      .left-sidebar_search {
        width: 100%;
        background-color: $white;

        input {
          height: 55px;
          width: 95%;
          border: none;
          padding-left: 15px;
          background-color: transparent;
        }

        .btn-search {
          position: absolute;
          right: 10px;
          top: 20px;
          border: none;
          background-color: transparent;
        }
      }

      .left-sidebar_center {
        padding: 40px 0 30px 30px;
        background-color: $white;
      }

      .bottom-section {
        padding: 70px 25px;

        .icon_settings {
          li {
            display: inline-block;
          }

          .shopping-cart {
            position: relative;

            .shopping-count {
              width: 18px;
              height: 18px;
              background-color: $color-red;
              color: $white;
              position: absolute;
              border-radius: 100%;
              @include flex_common;
              top: -7px;
              right: 7px;
            }
          }
        }

        ul {
          li {
            display: inline-block;
            padding: 8px 15px 8px 0;

            a {
              font-size: 16px;
              text-transform: capitalize;
              color: $dark-font;

              i {
                font-size: 18px;
                padding-right: 5px;
                color: $dark-font;
              }
            }
          }
        }

        .leftside_setting {

          .language,
          .currency {
            display: flex;

            h5 {
              margin-bottom: 0;
              text-transform: capitalize;
              color: #999;
              margin-top: 0;
            }

            select {
              margin-left: 10px;
              border: none;
              outline: none;
              text-transform: capitalize;
              color: $dark-font;
            }
          }

          h5 {
            margin-top: 10px;
          }
        }
      }

      .leftside_social {
        position: relative;
        width: 100%;
        padding: 30px;
        @include flex_common;
        border-top: 1px dashed $round-border;

        .footer-social {
          margin-top: 0;

          i {
            font-size: 18px;
          }

          li {
            padding: 10px;
          }
        }

        .call_us {
          h5 {
            text-align: center;

            span {
              display: block;
            }
          }
        }
      }
    }

    .main-menu {
      justify-content: flex-end;

      .brand-logo {
        @include flex_common;
        border-bottom: 1px dashed $round-border;
      }

      .menu-right {
        .header-dropdown {
          >li {
            img {
              width: 20px;
              height: auto;
            }
          }
        }

        .icon-nav {
          .onhover-div {
            >img {
              width: 20px;
              height: auto;
            }
          }
        }
      }

      .menu-left {
        .navbar {
          display: none;
        }

        .mobile-logo {
          display: none;
        }
      }
    }

    &.left-header-relative {
      position: sticky;
      top: 110px;
      z-index: 1;
      width: auto;
      box-shadow: none;

      .pixelstrap {
        >li {
          >a {
            text-align: right;
          }

          &:last-child {
            >a {
              padding-bottom: 0;
            }
          }
        }

        a {
          .sub-arrow {
            display: none;
          }
        }
      }

      .sidenav {
        position: relative;
        left: unset;
        top: unset;
        right: unset;
        height: auto;
        width: auto;
        box-shadow: none;
        z-index: 1;

        nav {
          z-index: 1;
          height: auto;
          overflow-y: unset !important;
        }

        .left-sidebar_center {
          padding: 0;
        }
      }

      .main-menu {
        justify-content: flex-end;
      }
    }

    &.left-header-sm {
      width: 240px;
      z-index: 1;

      .sidenav {
        top: calc(77px + (106 - 77) * ((100vw - 1199px) / (1920 - 1199)));
        z-index: 1;
        width: 240px;
        left: 0;

        .left-sidebar_center {
          padding: 0;
          background-color: $white;

          .pixelstrap {
            a {
              .sub-arrow {
                display: none;
              }
            }

            >li {
              border-bottom: 1px solid #f3f3f3;

              >a {
                padding: 10px 0 20px 0;
                text-align: center;

                img {
                  display: block;
                  margin-inline: auto !important;
                  width: 48px;
                  border: none;
                  margin-bottom: 8px;
                }
              }
            }
          }
        }
      }
    }
  }

  &.video-header {
    .top-header {
      background-color: var(--theme-color);

      .header-contact {
        padding: 10px 0;

        li {
          color: $white;
        }
      }

      .header-dropdown {
        li {
          padding: 10px 25px;
          color: $white;

          a {
            i {
              color: $white;
            }
          }
        }
      }
    }
  }

  &.marketplace {
    &.header-tools {
      position: relative;
      width: 100%;
      top: 0;

      &.sticky {
        position: fixed;
      }
    }

    .top-header {
      background-color: var(--theme-color);

      .header-contact {
        li {
          color: $white;
        }
      }

      .header-dropdown {
        li {
          color: $white;

          a {
            color: $white;

            i {
              color: $white;
            }
          }
        }
      }
    }
  }

  &.header-style {
    .top-header {
      .header-dropdown {
        >li {
          padding: 25px 0 25px 20px;
        }
      }
    }

    .onhover-div {
      .show-div {
        top: 53px;
      }
    }

    .onhover-dropdown {
      &:before {
        opacity: 0;
      }
    }
  }

  .blog-box {
    .blog-box-image {
      margin-bottom: 10px;
    }

    .blog-detail {
      h5 {
        margin-bottom: 0;
        font-weight: 500;
        transition: all 0.5s ease;
      }

      h6 {
        margin-bottom: 4px;
      }
    }

    &:hover {
      .blog-detail {
        h5 {
          color: var(--theme-color);
        }
      }
    }
  }
}

.onhover-dropdown {
  position: relative;
  font-size: 14px;

  .onhover-show-div {
    top: 68px;
    position: absolute;
    z-index: 10;
    background-color: $white;
    transition: all linear 0.3s;
    min-width: 160px;
    text-align: left;
    box-shadow: 0px 1px 2px 0px #cacaca;
    transform: translateY(30px);
    opacity: 0;
    visibility: hidden;
    right: 0;
    padding: 15px 20px;
    border-radius: 0 !important;

    &.product-page-full {
      z-index: 99999;
    }

    li {
      padding-left: 0;
      display: flex;
      font-size: 15px;
      padding-bottom: 5px;
      padding-left: 0 !important;

      a {
        color: #333;
        width: 100%;
        text-transform: capitalize;

        i {
          font-size: 19px !important;
        }
      }
    }
  }

  &:hover {
    .onhover-show-div {
      opacity: 1;
      transform: translateY(0px);
      visibility: visible;
    }
  }
}

.onhover-div {
  position: relative;
  padding-block: calc(15px + (30 - 15) * ((100vw - 575px) / (1920 - 575)));
  font-family: $font_0, $font_1;

  img,
  i {
    cursor: pointer;
  }

  .show-div {
    top: 100px;
    position: absolute;
    z-index: 9;
    background-color: $white;
    transition: all linear 0.3s;
    min-width: 236px;
    text-align: left;
    transform: translateY(30px);
    opacity: 0;
    visibility: hidden;
    right: 0;
    padding: 0;
    border-radius: 0 !important;
    box-shadow: 0 0 8px $round-border;

    @media (max-width: 1400px) {
      top: 80px;
    }

    @media (max-width: 1199px) {
      top: 70px;
    }
  }

  &:hover {
    .show-div {
      opacity: 1;
      transform: translateY(0px);
      visibility: visible;
    }
  }
}

.search-overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  background-color: lighten($white, 5%);

  >div {
    height: 100%;
    width: 100%;
    @include flex_common;

    .overlay-content {
      width: 100%;

      .form-control {
        &:focus {
          box-shadow: none;
        }
      }

      input {
        background-color: transparent;
        border: 0;
        border-bottom: 2px solid lighten($black, 46.5%);
        border-radius: 0;
        padding: 20px 0;

        &::-webkit-input-placeholder {
          /* Chrome/Opera/Safari */
          color: lighten($black, 46.5%);
          font-size: 18px;
        }

        &::-moz-placeholder {
          /* Firefox 19+ */
          color: lighten($black, 46.5%);
          font-size: 18px;
        }

        &:-ms-input-placeholder {
          /* IE 10+ */
          color: lighten($black, 46.5%);
          font-size: 18px;
        }

        &:-moz-placeholder {
          /* Firefox 18- */
          color: lighten($black, 46.5%);
          font-size: 18px;
        }
      }

      button {
        position: absolute;
        top: 10px;
        background-color: transparent;
        border: 0;
        font-size: 24px;
        color: lighten($black, 46.5%);
        right: 10px;
      }
    }

    .closebtn {
      position: fixed;
      top: 10px;
      right: 25px;
      color: lighten($black, 46.5%);
      font-size: 40px;
      cursor: pointer;
    }
  }
}

.top-header {
  background-color: #333333;

  .right-nav-about {
    @include flex_common($dis: flex, $align: center, $justify: flex-end);
    height: 100%;
    padding: 10px 0;

    .right-nav-list {
      +.right-nav-list {
        .theme-form-select {
          .dropdown-toggle {
            padding-left: 12px;
            border-left: 1px solid #77777785;
            margin-left: 12px;
          }
        }
      }

      .theme-form-select {
        .dropdown-toggle {
          display: flex;
          font-weight: 500;
          color: $white;
          padding: 0;
          align-items: center;
          gap: 6px;
          border: unset;

          &::after {
            content: "\ea4e";
            @include font;
            border: unset;
            margin: 0;
            vertical-align: unset;
          }

          span {
            margin-top: 0;
            font-weight: 500;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
          }
        }

        .dropdown-menu {
          min-width: unset;
          border-color: $white-dark;
          border-radius: 0;

          .dropdown-item {
            margin-top: 0;
            font-weight: 500;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            text-align: left;

            &:active,
            &.active {
              background-color: var(--theme-color);
            }
          }

          span {
            margin-top: 0;
            font-weight: 500;
            font-size: 14px;
            gap: 10px;

            &.active,
            &:active {
              background-color: var(--theme-color);
            }
          }
        }
      }
    }
  }

  .header-contact {
    padding: 10px 0;

    li {
      color: #d9d9d9;
      font-size: 14px;
      padding-right: 25px;

      i {
        color: var(--theme-color);
        padding-left: 10px;
        margin-right: 7px;
        font-size: 14px;
        width: unset;
        height: unset;
        margin-top: -3px;
      }

      @media (max-width: 1399px) {
        padding: 0;

        &:first-child {
          display: none;
        }

        i {
          padding: 0;
        }
      }
    }
  }

  .header-dropdown {
    li {
      cursor: pointer;
      color: #f5f5f5;
      padding: 10px 25px;
      padding-right: 0;

      &:first-child {
        padding-right: 0;
      }

      a {
        text-transform: capitalize;
        color: #f5f5f5;
      }

      i {
        font-size: 16px;
        transition: all 0.5s ease;
      }

      span {
        padding-left: 5px;
      }

      ul {
        li {
          padding-block: 0;
        }
      }

      a {
        i {
          color: #f5f5f5;
          transition: all 0.5s ease;
        }

        &:hover {
          i {
            color: var(--theme-color);
            transition: all 0.5s ease;
          }
        }
      }

      &:hover {
        i {
          color: var(--theme-color);
          transition: all 0.5s ease;
        }
      }
    }

    .onhover-dropdown {
      .onhover-show-div {
        li {
          padding-left: 0;
          display: flex;
          font-size: 15px;
          padding-bottom: 5px;

          &:last-child {
            padding-bottom: 0;
          }

          a {
            color: $font-color;
          }
        }
      }
    }
  }

  .onhover-show-div {
    li {
      padding-left: 0;
      display: flex;
      font-size: 15px;
      padding-bottom: 5px;

      &:last-child {
        padding-bottom: 0;
      }

      a {
        color: $font-color;
      }
    }
  }

  &.top-header-dark {
    background-color: $dark-font;

    .header-contact {
      li {
        color: rgba(white, 0.8);

        i {
          color: rgba(white, 0.8);
        }
      }
    }

    .header-dropdown {
      li {
        color: rgba(white, 0.8);

        a {
          color: rgba(white, 0.8);

          i {
            color: rgba(white, 0.8);
          }

          &:hover {
            i {
              color: var(--theme-color);
            }
          }
        }
      }
    }
  }
}

.main-menu {
  position: relative;
  @include flex_common($dis: flex, $align: center, $justify: space-between);

  &.product-full-page {
    z-index: 9999;
  }

  .brand-logo {
    display: inline-block;
    padding-block: calc(15px + (35 - 15) * ((100vw - 575px) / (1920 - 575)));

    img {
      width: calc(110px + (176 - 110) * ((100vw - 320px) / (1920 - 320)));
    }
  }

  .menu-left {
    display: flex;
    align-items: center;

    .navbar {
      display: inline-block;
      padding: 30px 45px 30px 0;

      @media (max-width: 1400px) {
        padding-right: 17px;
      }

      svg {
        width: unset;
        height: unset;
        font-size: 28px;
        color: $dark-font;
        cursor: pointer;
        font-weight: 600;
      }

      &.white-navbar {
        svg {
          width: unset;
          height: unset;
          color: $white;
        }
      }
    }
  }

  .menu-right {
    display: flex;
    align-items: center;
    float: right;

    .icon-nav {
      display: inline-block;

      li {
        padding-left: calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320)));

        >svg {
          cursor: pointer;
        }

        @media (max-width: 578px) {

          &:nth-child(2),
          &:first-child {
            display: none;
          }
        }
      }

      .delivery-area {
        display: flex;
        align-items: center;

        >div {
          display: flex;
          align-items: center;
          padding: 12px;
          background-color: var(--theme-color);
          color: $white;
          border-radius: 5px;
        }

        i {
          margin-right: 5px;
          font-size: 16px;
        }

        h6 {
          margin-bottom: 0;
          color: $white;
          font-size: 16px;
        }
      }

      .onhover-div {
        .empty-cart-box {
          text-align: center;

          .empty-icon {
            width: 50px;
            height: 50px;
            background-color: $top-header;
            border-radius: 100%;
            @include flex_common;
            margin: 0 auto 4px;

            svg {
              width: unset;
              height: unset;
              color: var(--theme-color);
            }
          }
        }

        .show-div {
          &.shopping-cart {
            padding: 15px 15px;
            min-width: 330px;
            left: unset;
            right: 0;

            .sidebar-title {
              text-align: right;
              margin-bottom: 10px;

              a {
                color: var(--theme-color);
              }
            }

            .cart_top,
            .success-box {
              display: none;
            }

            .cart_product {
              max-height: 240px;
              overflow: auto;
              padding-right: 10px;

              &::-webkit-scrollbar {
                width: 4px;
                height: 7px;
              }

              &::-webkit-scrollbar-thumb {
                background: var(--theme-color);
              }

              &::-webkit-scrollbar-track {
                background: #eaeaea;
              }
            }

            li {
              position: relative;
              width: 100%;

              +li {
                padding-top: 10px;
                margin-top: 10px;
                border-top: 1px solid $white-dark;
              }

              .form-control {
                border-color: #eee !important;
              }

              .media {
                img {
                  height: 90px;
                  width: 90px;
                  object-fit: contain;

                  &.me-3 {
                    margin: 0 !important;
                  }
                }

                .media-body {
                  align-self: center;
                  position: relative;
                  padding-left: 12px;

                  h4 {
                    color: $font-color;
                    width: 70%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    line-height: 1.1;
                    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
                    font-weight: 600;

                    span {
                      color: $grey;
                      font-size: 16px;
                    }
                  }
                }
              }

              .close-circle {
                position: absolute;
                top: 0;
                right: 0;
                display: flex;
                align-items: center;
                gap: 7px;

                button,
                a {
                  padding: 0;
                  box-shadow: none;
                  border: none;
                  background-color: transparent;
                }

                i,
                svg {
                  color: $grey-light;
                  transition: all 0.3s ease-in-out;
                  font-size: 18px;

                  &:hover {
                    color: $black;
                    transition: all 0.3s ease-in-out;
                  }
                }
              }

              .total {
                border-top: 1px solid $border-grey;
                border-bottom: 1px solid $border-grey;
                padding-block: 10px;

                h5 {
                  text-transform: capitalize;
                  margin-bottom: 0;
                  color: $header-font;

                  span {
                    float: right;
                  }
                }
              }

              .buttons {
                display: flex;
                align-items: center;
                gap: 10px;

                a {
                  font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
                  border-radius: 0;
                  color: $white;
                  text-transform: capitalize;
                  font-weight: 600;
                  transition: all 0.25s ease-in-out;
                  width: 100%;
                  padding: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) calc(15px + (29 - 15) * ((100vw - 320px) / (1920 - 320)));
                  background-color: var(--theme-color);
                  border: 1px solid var(--theme-color);

                  &:hover {
                    color: var(--theme-color);
                    background-color: transparent;
                  }
                }

                .checkout {
                  float: right;
                }
              }
            }

            .cart_total {
              margin-top: 15px;

              li {
                border: none;
                padding: 0;
                margin: 0;
              }
            }
          }

          &.setting {
            padding: 15px 20px 20px;
            min-width: 175px;
            right: 0;
            left: unset;

            h6 {
              font-size: 16px;
              text-transform: capitalize;
              color: $font-color;
              font-weight: 700;
              margin-bottom: 0;
              margin-top: 5px;

              &:first-child {
                margin-top: 0;
              }
            }

            ul {
              li {
                display: flex;
                padding-bottom: 0;
                padding-left: 17px;
                padding-top: 5px;

                a {
                  color: $font-color;
                  font-weight: 400;
                  font-size: 16px;
                  display: flex;
                  align-items: center;
                  gap: 6px;
                  text-transform: capitalize;
                }
              }
            }
          }

          li {
            padding: 0;

            .form-control {
              border-radius: 0;

              &:focus {
                border: 1px solid #ced4da;
                box-shadow: none;
              }
            }

            .search-btn {
              padding: 8px 12px;
              background-color: var(--theme-color);
              color: $white;
            }
          }
        }
      }

      &.white-icon {
        .onhover-div {
          img {
            filter: brightness(5);
          }

          .show-div {
            img {
              filter: none;
            }
          }
        }
      }
    }
  }
}

.header-style-1 {
  .main-menu {
    z-index: 1;

    .brand-logo {
      padding-block: 5px;
    }

    .menu-left {
      .navbar {
        padding: 20px 45px 20px 0;
      }
    }

    .menu-right {
      .icon-nav {
        .onhover-div {
          .show-div {
            top: 63px;
          }
        }
      }
    }
  }

  .onhover-div {
    padding-block: 5px;
  }

  .top-header {
    background-color: var(--theme-color);

    .header-contact {
      padding: 10px 0;
    }

    .header-dropdown {
      li {
        padding: 10px 0;

        +li {
          padding-left: 25px;
        }
      }
    }

    .header-dropdown {
      li {
        color: $white;

        i {
          color: $white;
        }
      }
    }

    .header-contact {
      li {
        color: $white;

        svg {
          color: $white;
        }
      }
    }

    .right-nav-about {
      .right-nav-list {
        +.right-nav-list {
          .theme-form-select {
            .dropdown-toggle {
              border-left-color: rgba(#fff, 0.32);
            }
          }
        }
      }
    }
  }

  .pixelstrap {
    >li {

      >a,
      a:hover,
      a:active {
        padding-block: 15px;
      }

      ul {
        li {
          a {
            padding: 5px 35px;

            &:hover,
            &:active {
              padding: 5px 35px;
            }
          }
        }
      }
    }
  }

  .upper-menu {
    &.pixelstrap {
      a {
        padding-block: 10px;
        padding-right: 35px;
      }
    }
  }

  .cart_qty_cls {
    top: -3px;
    right: -6px;
  }

  .navbar {
    .nav-link {
      padding-right: 25px;
      white-space: nowrap;
      color: #222222;
      font-size: 17px;
      font-weight: 500;
      line-height: 1.3;
      text-decoration: none;
      text-transform: unset;
      padding-block: 15px;
      letter-spacing: unset;
    }

    .nav-item {
      &.active {
        .nav-link {
          color: var(--theme-color);
        }
      }
    }
  }

  &.sticky {
    .main-menu {
      .menu-left {
        .navbar {
          padding: 10px 45px 10px 0px;
        }
      }
    }
  }
}

.header-style-2 {
  .top-part {
    background-color: var(--theme-color);
  }

  .top-header {
    .header-dropdown {
      >li {
        img {
          filter: invert(1);
        }
      }
    }
  }

  .invert-cls {
    filter: invert(1);
  }

  .bottom-part {
    background-color: #006d75;

    .main-nav-center {
      @include flex_common;
    }
  }

  .pixelstrap {
    >li {
      >a {
        color: $white;

        &:hover,
        &:active {
          color: $white;
        }
      }
    }
  }
}

.header-style-4 {
  box-shadow: 0 0 4px rgba($black, 0.25);
  margin-bottom: 2px;

  .main-menu {
    .menu-left {
      .navbar {
        padding: 25px 45px 25px 0;
      }
    }

    .brand-logo {
      padding-block: 25px;
    }
  }

  .pixelstrap {
    >li {
      >a {
        padding-block: 30px;

        &:hover,
        &:active {
          padding-block: 30px;
        }
      }
    }
  }

  .onhover-div {
    padding-block: 30px;
  }
}

.header-style-5 {
  .form_search {
    overflow: unset;
    border-radius: 0;

    .nav-search {
      padding-right: 51px;
    }
  }

  .search-suggestion-box {
    top: 56px;
    margin: 0;
  }

  .cart_qty_cls {
    top: calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320)));
  }

  &.style-classic {
    .form_search {
      border-radius: 0;

      button {
        border-radius: 0;
      }
    }

    .bottom-part {
      background-color: transparent;
      margin-bottom: -20px;
      position: relative;
      z-index: 1;

      .category-menu {
        .toggle-sidebar {
          padding-top: 18px;
        }
      }

      .main-nav-center {
        .sm {
          >li {
            >a {
              padding-top: 20px;
              padding-bottom: 20px;
            }
          }
        }
      }

      .container {
        padding: 0;
        background-color: $white;
      }

      .pixelstrap {
        >li {
          >a {
            color: #222;

            &:hover,
            &:active {
              color: #222;
            }
          }
        }
      }
    }

    .main-menu {
      .brand-logo {
        padding-top: 35px;
        padding-bottom: 35px;
      }
    }

    .top-header {
      .header-dropdown {
        >li {
          padding: 15px 25px;
          padding-right: 0;
        }
      }
    }
  }

  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }

  .bottom-part {
    background-color: #4d4d4d;

    .category-menu {
      @include flex_common;

      .toggle-sidebar {
        background-color: var(--theme-color);
        display: block !important;
        width: 100%;
        text-align: center;
        height: 100%;
        padding-top: 18px;
        color: $white;
        cursor: pointer;

        svg {
          display: inline-block;
          margin-right: 10px;
          font-size: 16px;
          width: unset;
          height: unset;
          margin-top: -5px;
        }

        h5 {
          display: inline-block;
          color: $white;
          font-size: 19px;
          text-transform: capitalize;
        }
      }
    }

    .pixelstrap {
      >li {
        >a {
          color: $white;

          &:hover,
          &:active {
            color: $white;
          }
        }
      }
    }

    &.bottom-light {
      background-color: transparent;
      padding-top: 16px;
      border-top: 1px solid $round-border;

      .category-menu {
        .toggle-sidebar {
          padding-top: 12px;
        }
      }

      .main-nav-center {
        .sm {
          >li {
            >a {
              padding-block: 14px;
            }
          }
        }
      }

      .pixelstrap {
        >li {
          >a {
            color: #222222;

            &:hover,
            &:active {
              color: #222222;
            }
          }
        }
      }
    }
  }

  &.style-light {
    .bottom-part {
      .category-menu {
        .toggle-sidebar {
          color: $black;
          background-color: $white;
          border: 1px solid $round-border;
          border-top: none;
          border-bottom: none;
          padding-top: 18px;

          h5 {
            color: $black;
            font-weight: 600;
          }
        }
      }

      &.bottom-light {
        padding-top: 0;

        .main-nav-center {
          .sm> {
            li {
              >a {
                padding-block: 20px;
              }
            }
          }
        }
      }
    }
  }

  &.color-style {
    background-color: var(--theme-color2);

    .form_search {
      border-radius: 5px;

      button {
        background-color: var(--theme-color);

        i {
          color: $white;
        }
      }
    }

    .cart_qty_cls {
      background: var(--theme-color);
    }

    .toggle-nav {
      padding-block: 30px;
    }

    .main-menu {
      .menu-left {
        .navbar {
          i {
            color: $white;
          }
        }
      }

      .menu-right {
        .icon-nav {
          li {
            img {
              filter: invert(1);
            }

            ul {
              img {
                filter: invert(0);
              }
            }
          }
        }
      }

      .brand-logo {
        padding-block: 25px;
      }

      .onhover-div {
        padding-block: 30px;
      }
    }

    .top-header {
      background-color: var(--theme-color1);

      &.top-header-theme {
        background-color: var(--theme-color2);
        border-bottom: 1px solid #506177;

        .header-contact {
          li {
            i {
              font-size: 15px;
            }
          }
        }
      }

      .header-dropdown {
        >li {
          padding: 30px 25px;
          padding-right: 0;
        }
      }
    }

    .bottom-part {
      background-color: var(--theme-color2);

      .pixelstrap.sm-vertical {
        >li {
          >a {
            color: #222222;

            &:hover,
            &:active {
              color: #222222;
            }
          }
        }
      }

      .category-menu {
        .toggle-sidebar {
          background-color: var(--theme-color);
          padding-top: 12px;
        }
      }
    }

    .header-options {
      span {
        background: none;
        color: rgba($white, 0.85);
        -webkit-text-fill-color: unset;
      }
    }

    &.style-classic {
      .form_search {
        border-radius: 0;

        button {
          border-radius: 0;
        }
      }

      .bottom-part {
        background-color: transparent;
        margin-bottom: -20px;
        position: relative;
        z-index: 1;

        .category-menu {
          .toggle-sidebar {
            padding-top: 18px;
          }
        }

        .main-nav-center {
          .sm {
            >li {
              >a {
                padding-block: 20px;
              }
            }
          }
        }

        .container {
          padding: 0;
          background-color: $white;
        }

        .pixelstrap {
          >li {
            >a {
              color: #222;

              &:hover,
              &:active {
                color: #222;
              }
            }
          }
        }
      }

      .main-menu {
        .brand-logo {
          padding-block: 35px;
        }
      }

      .top-header {
        .header-dropdown {
          >li {
            padding: 15px 25px;
            padding-right: 0;
          }
        }
      }
    }
  }

  &.border-style {
    .bottom-part {
      &.bottom-light {
        border-bottom: 1px solid $round-border;
        border-top: none;
        padding-top: 0;
      }
    }

    .main-menu {
      z-index: 1;

      .brand-logo {
        padding-block: 10px;
      }

      .menu-right {
        .icon-nav {
          >li {
            padding-block: 30px;
          }
        }
      }
    }

    .onhover-div {
      padding-block: 25px;

      .show-div {
        top: 83px;
      }
    }
  }
}

.header-style-6 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  background-color: transparent;
}

.header-style-7 {
  border-bottom: 1px solid $round-border;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1;

  .onhover-div {
    &:hover {
      .show-div {
        transform: translateY(-20px);
      }
    }
  }

  .main-menu {
    justify-content: unset;

    .menu-left {
      .navbar {
        padding: 30px 45px 30px 0;
      }
    }

    .brand-logo {
      padding-block: 25px;
    }
  }

  .pixelstrap {

    a,
    a:hover,
    a:active {
      padding-block: 32px;
    }
  }

  .onhover-div {
    padding-block: 30px;
  }
}

.top-header {
  &.top-header-theme {
    background-color: var(--theme-color);

    .header-dropdown {
      li {
        color: $white;

        i,
        a {
          color: $white;

          &:hover {
            i {
              color: $white;
            }
          }
        }
      }
    }

    .navbar-nav {
      >li {
        >a {
          padding-block: 19px;
        }
      }
    }

    .bottom-part {
      .category-menu {
        .toggle-sidebar {
          color: $black;
          background-color: $white;
          border-inline: 1px solid $white-dark;
          padding-block: 18px;
          @include flex_common($dis: flex !important, $align: center, $justify: center);

          h5 {
            color: $black;
            font-weight: 600;
          }
        }
      }

      &.bottom-light {
        padding-top: 0;

        .main-nav-center {
          .sm> {
            li {
              >a {
                padding-block: 20px;
                background-color: $white;
              }
            }
          }
        }
      }
    }
  }
}

.header-theme-color {
  .header-style-5 {
    background-color: var(--theme-color2);

    .main-menu {
      .menu-right {
        .icon-nav {
          svg {
            color: $white;
          }
        }
      }
    }

    .navbar-expand-xl {
      .navbar-nav {
        >.nav-item {
          >a {
            color: $white !important;

            &:hover {
              background-color: transparent;
            }
          }
        }
      }
    }

    .top-header {
      background-color: var(--theme-color2);
      border-bottom: 1px solid #506177;
    }

    .bottom-part {
      &.bottom-light {
        padding-top: 0;
        border-top: none;
      }
    }

    .add_to_cart {
      .cart-inner {
        .cart_top {
          .close-cart {
            svg {
              color: #222;
            }
          }
        }

        .cart_media {
          .close-circle {

            button,
            a {
              svg {
                color: #222;
              }
            }
          }
        }

        .qty-box {
          .input-group {
            span {
              button {
                svg {
                  color: #222;
                }
              }
            }
          }
        }

        .empty-cart-box {
          .icon {
            svg {
              color: #6a6a6a;
            }
          }
        }
      }
    }
  }

  footer {
    background-color: #394868 !important;
  }
}

.header-2 {
  .brand-logo {
    img {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 30px;

      @media (max-width: 1199px) {
        position: relative;
        left: unset;
        transform: none;
        top: unset;
      }
    }
  }

  .cart_qty_cls {
    top: calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320)));
  }

  .main-menu {
    @media (max-width: 1199px) {
      margin-bottom: -20px;
    }
  }
}

.marketplace-sidebar {
  &.sidenav {
    height: unset;
    width: unset;
    position: relative;
    z-index: 1;
    top: unset;
    left: unset;
    transition: all 0.5s ease;

    nav {
      z-index: 0;
      height: auto;
      overflow-y: unset !important;
    }

    ul {
      li {
        a {
          cursor: pointer;
          background-color: $top-header;

          &:hover {
            color: var(--theme-color);
          }
        }
      }
    }

    .pixelstrap {
      >li {
        >a {
          padding: 10px 30px 8px 30px;

          &:hover,
          &:focus {
            padding: 10px 30px 8px 30px;
          }
        }
      }

      &.sm-vertical {
        a {
          .sub-arrow {
            margin-top: -14px;
          }
        }
      }
    }

    .sm-vertical {
      background-color: $top-header;
      padding: 10px 0;
    }

    &.fixed-sidebar {
      position: absolute;
      top: 66px;
      width: calc(100% - 30px);
      z-index: 1;
      display: none;

      .sm-vertical {
        background-color: $white;
        border: 1px solid $round-border;
      }
    }
  }

  .sticky-sidebar {
    position: sticky;
    top: 50px;
    z-index: 1;
  }
}

header {
  &.sticky {
    position: fixed;
    width: 100vw;
    top: 0;
    z-index: 9;
    box-shadow: 0 0 5px rgba($black, 0.12);
    transition: all 0.3s ease;

    .top-header {
      display: none;
      transition: all 0.3s ease;
    }

    .main-menu {
      .brand-logo {
        padding-block: 25px;
      }
    }
  }
}

.svg-icon-menu {
  .pixelstrap {
    >li {
      >a {
        img {
          width: 38px;
          background-color: $white;
          border-radius: 100%;
          border: 1px solid #d2d2d2;
          padding: 2px;
        }
      }
    }
  }

  &.wo-bg {
    .pixelstrap {
      >li {
        >a {
          display: flex;
          align-items: center;

          img,
          svg {
            background-color: transparent;
            border-radius: 0;
            border: none;
            width: 38px;
            height: 38px;
            padding: 5px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}

.text-light-header {
  .pixelstrap {
    >li {
      >a {
        color: #cecece !important;
      }
    }
  }

  .onhover-div {
    >div {
      img {
        filter: invert(0.9) !important;
      }
    }
  }

  .top-header {
    .header-dropdown {
      >li {
        img {
          filter: invert(0.9) !important;
        }
      }
    }
  }

  header {
    .navbar {
      &.navbar-expand-xl {
        .navbar-nav {
          .nav-item {
            &.dropdown {
              >a {
                color: $dark-link;
              }
            }
          }
        }
      }
    }
  }
}

.header-compact {
  .top-header {
    background-color: var(--theme-color);

    .header-contact {
      li {
        color: #fff;

        svg {
          color: $white;
        }
      }
    }
  }

  .main-menu {
    .brand-logo {
      padding-block: 25px 20px;

      img {
        width: calc(130px + (170 - 130) * ((100vw - 320px) / (1920 - 320)));
      }
    }
  }

  .menu-row {
    display: flex;
    align-items: center;

    .delivery-area {
      margin-right: 25px;
    }
  }

  .onhover-div {
    padding-block: 15px;
  }

  .form_search {
    border-radius: 0;
    height: 42px;
    box-shadow: 0 0 0 1px #e2e2e2;
    background-color: $top-header;

    input {
      height: 42px;
      padding-right: 45px;
    }

    button {
      top: 1px;
      right: 1px;
      width: 40px;
      height: 40px;

      i {
        font-size: 16px;
      }
    }
  }

  .delivery-area {
    display: flex;
    align-items: center;
    position: relative;
    padding: 6px 17px;
    z-index: 0;
    border: 1px dashed #fcebe2;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--theme-color);
      opacity: 0.12;
      z-index: -1;
    }

    svg {
      margin-right: 10px;
      width: 18px;
    }

    div {
      display: flex;
      align-items: center;

      h5,
      h6 {
        margin-bottom: 0;
      }

      h6 {
        margin-right: 5px;
      }
    }
  }

  .pixelstrap {

    a,
    a:hover,
    a:active {
      font-size: 14px;
    }
  }

  .top-header {
    .header-contact {
      padding: 10px 0;
    }

    .header-dropdown {
      li {
        padding: 10px 25px;

        &:last-child {
          padding-right: 0;
        }
      }
    }
  }

  .right-nav-about {
    .right-nav-list {
      +.right-nav-list {
        .theme-form-select {
          .dropdown-toggle {
            border-color: rgba(255, 255, 255, 0.5215686275);
          }
        }
      }
    }
  }

  .bottom-part {
    padding-bottom: 0;
  }

  .main-nav-center {
    .sm {
      >li {
        >a {
          padding-block: 10px;
        }
      }
    }
  }

  .onhover-div {
    .show-div {
      top: 60px;
    }
  }
}

/* sticky header */
header {
  &.sticky {
    position: fixed !important;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9;
    box-shadow: 0 0 5px rgba($black, 0.12);
    transition: all 0.3s ease;

    .top-header {
      display: none;
      transition: all 0.3s ease;
    }

    &.header-style-5 {
      &.style-classic {
        .bottom-part {
          display: none;
          transition: all 0.3s ease;
        }
      }
    }
  }
}

.left-arrow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.right-arrow {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 10px;
  width: 100%;
  background-color: $white;
  z-index: 2;
  overflow: hidden;
  box-shadow: 0 -3px 10px 0px rgba($black, 0.08);

  ul {
    display: flex;
    width: 100%;
    margin: 0 auto;

    li {
      width: 100%;
      text-align: center;

      &.active {
        transition: 0.3s ease;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          width: 10px;
          height: 10px;
          bottom: -15px;
          left: 50%;
          transform: translateX(-50%) rotate(45deg);
          background-color: var(--theme-color);
          border-radius: 100%;
        }

        svg {
          width: unset;
          height: unset;
          color: #222;

          &.activated {
            display: inline-block;
          }

          &.deactivated {
            display: none;
          }
        }

        span {
          color: $dark-font;
          font-weight: 600;
        }
      }

      svg {
        display: inline-block;
        margin: 0 auto;
        font-size: calc(20px + (22 - 20) * ((100vw - 320px) / (1920 - 320)));
        color: #6a6a6a;
        width: unset;
        height: unset;
      }

      span {
        display: block;
        color: rgba($dark-font, 0.8);
        font-weight: 500;
      }

      a {
        display: inline-block;
        position: relative;

        img {
          display: block;
          margin: 0px auto;
        }

        &.active,
        &:hover {
          color: $dark-font;
        }

        @media (max-width: 360px) {
          font-size: 13px;
        }

        svg {
          display: inline-block;
          margin: 0 auto;
          font-size: calc(20px + (22 - 20) * ((100vw - 320px) / (1920 - 320)));
          color: #6a6a6a;
          width: unset;
          height: unset;
        }

        span {
          display: block;
          color: rgba($dark-font, 0.8);
          font-weight: 500;
        }

        .cart_qty_cls {
          color: $white;
        }
      }
    }
  }
}

.search-suggestion-box {
  position: absolute;
  width: 100%;
  background-color: $white;
  left: 0;
  top: calc(33px + (41 - 33) * ((100vw - 579px) / (1920 - 579)));
  z-index: 4;
  border: 1px solid $white-dark;
  border-radius: 0;
  padding: 13px 16px;
  padding-right: 8px;
  box-shadow: 0 0 9px rgba(221, 221, 221, 0.7019607843);

  ul {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 7px;
    max-height: 368px;

    &::-webkit-scrollbar {
      width: 10px;
    }

    &::-webkit-scrollbar-track {
      background: $white;
    }

    &::-webkit-scrollbar-thumb {
      background-color: var(--theme-color);
      opacity: 0.4;
      border: 3px solid $white;
    }

    >li {
      display: flex;
      align-items: center;
      gap: 10px;

      a {
        color: #000;
        font-size: 16px;
      }

      .suggestion-image {
        display: flex;
        align-items: center;
        gap: 8px;

        img {
          width: 52px;
          height: 52px;
          object-fit: contain;
        }
      }

      .suggestion-category {
        text-align: unset;

        >div {
          flex-wrap: wrap;
          gap: 2px 0;
          display: flex;
          align-items: center;
          margin-top: 3px;
        }

        p {
          margin: 0;
          color: #4a5568;
          position: relative;

          a {
            font-weight: 400;
            color: #4a5568 !important;
            font-size: 14px !important;
          }

          +p {
            &::before {
              content: "|";
              font-size: 15px;
              color: #4a5568;
              margin-inline: 6px;
            }
          }
        }

        a {
          color: #222 !important;
          font-weight: 500;
          font-size: 16px !important;
        }
      }
    }
  }

  .result-item {
    padding: 8px;
    cursor: pointer;
  }

  .result-item {
    z-index: 0;
    position: relative;

    &:hover,
    &.selected {
      &::before {
        opacity: 0.1;
      }
    }

    &.dark-code {
      background-color: #333;
      color: $white;
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--theme-color);
      opacity: 0;
      z-index: -1;
    }
  }

  .highlight {
    color: red;
  }

  .not-found-box {
    text-align: center;

    h5 {
      font-size: 16px;
      color: #4a5568;

      span {
        font-weight: 600;
        color: #222;
      }
    }
  }

  .recent-search-section {
    .page-title {
      font-size: 14px !important;
      color: #999;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;

      a {
        font-size: 14px !important;
      }
    }

    .filter-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;

      >a {
        background-color: #f8f8f8;
        color: #222 !important;
        font-size: 14px !important;
        padding: 7px 12px !important;
        text-align: center;
        border-radius: 0;
        transition: all 0.5s ease;
        text-transform: capitalize;
        cursor: pointer;

        &:hover {
          background-color: var(--theme-color);
          color: $white !important;
        }
      }
    }

    &:empty {
      display: none;
    }
  }
}

.header-style-light {
  .header-style-5 {
    .navbar {
      &.navbar-expand-xl {
        .navbar-nav {
          .nav-item {
            &.dropdown {
              >a {
                padding-block: 19px;

                @media (max-width: 1199px) {
                  padding-block: 0;
                }
              }
            }
          }
        }
      }
    }

    .navbar-nav {
      >li {
        >a {
          padding-block: 19px;

          @media (max-width: 1199px) {
            padding-block: 0;
          }
        }
      }
    }

    .bottom-part {
      .category-menu {
        .toggle-sidebar {
          color: $black;
          background-color: $white;
          border-inline: 1px solid $round-border;
          padding-block: 18px;

          h5 {
            color: $black;
            font-weight: 600;
          }
        }
      }

      &.bottom-light {
        padding-top: 0;

        .main-nav-center {
          .sm> {
            li {
              >a {
                padding-block: 20px;
                background-color: $white;
              }
            }
          }
        }
      }
    }
  }
}

body {
  &.home {
    header {
      &.header-5 {
        position: absolute;
        width: 100%;
        background-color: transparent;

        .top-header {
          background-color: transparent;

          .header-dropdown {
            >li {
              padding-top: 40px;
              padding-right: 0;
            }

            .onhover-dropdown {
              .onhover-show-div {
                top: 80px;
              }
            }

            .onhover-show-div {
              top: 80px;
            }
          }
        }

        .onhover-div {
          .show-div {
            top: 80px;
          }
        }

        &.container-med {
          .container-fluid {
            padding-inline: 50px;
          }
        }

        &.sticky {
          width: 100%;
          background-color: $white;
        }

        &.none-sticky {
          &.sticky {
            position: unset;
          }
        }

        &.left-sidebar-header {
          position: fixed;
          background-color: $white;
          z-index: 1;

          .container-fluid {
            padding-inline: 40px;
          }

          .onhover-div {
            padding-block: 20px;
          }

          .top-header {
            .header-dropdown {
              >li {
                padding-top: 20px;
              }
            }
          }

          .main-menu {
            .brand-logo {
              padding-block: 20px;
            }
          }
        }

        &.overlay-style {
          background-color: rgba($black, 0.28);
          z-index: 1;

          &.sticky {
            background-color: #25221e;
          }

          .main-menu {
            .brand-logo {
              position: relative;
              padding-block: 20px !important;
            }
          }

          .top-header {
            border-bottom: 1px solid rgba($white, 18%);
          }

          .navbar-nav {
            >li {
              >a {
                color: $white;

                @media (max-width: 1199px) {
                  color: #222;
                }
              }
            }
          }

          .add_to_cart {
            .cart-inner {
              .qty-box {
                .input-group {
                  span {
                    button {
                      svg {
                        color: #333333;
                      }
                    }
                  }
                }
              }

              .cart_media {
                .close-circle {

                  button,
                  a {
                    svg {
                      color: #333333;
                    }
                  }
                }
              }

              .empty-cart-box {
                .icon {
                  svg {
                    color: #6a6a6a;
                  }
                }
              }

              .cart_top {
                .close-cart {
                  svg {
                    color: #333333;
                  }
                }
              }
            }
          }

          .main-menu {
            .brand-logo {
              position: relative;

              @media (max-width: 577px) {
                padding-block: 20px !important;
              }
            }

            .menu-right {
              .icon-nav {
                svg {
                  color: $white;
                }
              }
            }
          }

          .navbar {
            &.navbar-expand-xl {
              .navbar-nav {
                .nav-item {
                  &.dropdown {
                    >a {
                      color: $white;

                      @media (max-width: 1199px) {
                        color: #222;
                      }
                    }
                  }

                  >.dropdown-menu {
                    >.nav-item {
                      .nav-link {
                        color: #222;
                      }
                    }
                  }
                }
              }
            }
          }

          .pixelstrap {
            >li {
              >a {
                color: $white;

                @media (max-width: 1199px) {
                  color: #222;
                }

                &:hover,
                &:active {
                  color: $white;
                }
              }
            }
          }
        }
      }
    }
  }

  &.christmas {
    header {
      position: absolute;
      width: 100%;
      z-index: 1;
      background-color: transparent;

      @media (max-width: 767px) {
        position: relative;
      }

      &.sticky {
        position: relative;
        width: 100%;
        background-color: $white;

        .top-header {
          display: none;
        }
      }

      &.header-5 {
        &.overlay-style {
          background-color: #c1272d;

          @media (max-width: 991px) {
            background-color: #c1272d !important;
          }

          &.fixed {
            background-color: #c1272d;
          }
        }
      }

      .navbar-nav {
        >li {
          >a {
            color: $white;

            @media (max-width: 1199px) {
              color: #222 !important;
            }
          }
        }
      }

      .toggle-nav {
        svg {
          color: $white;
        }
      }

      .navbar {
        &.navbar-expand-xl {
          .navbar-nav {
            .nav-item {
              &.dropdown {
                >a {
                  color: $white;

                  @media (max-width: 1199px) {
                    color: #222;
                  }
                }
              }
            }
          }
        }
      }

      .main-menu {
        .menu-right {
          .icon-nav {
            svg {
              color: $white;
            }
          }
        }
      }

      .top-header {
        .header-contact {
          li {
            color: $white;
            font-size: 16px;

            svg {
              color: $white;
            }
          }
        }

        .right-nav-about {
          .right-nav-list {
            +.right-nav-list {
              .theme-form-select {
                .dropdown-toggle {
                  border-color: rgba(255, 255, 255, 0.5215686275);
                }
              }
            }
          }
        }
      }
    }
  }

  &.digital-download {
    header {
      &.header-5 {
        &.overlay-style {
          background-color: transparent;

          &.sticky {
            background: rgb(29, 32, 49);
            background: linear-gradient(48deg, rgba(29, 32, 49, 1) 0%, rgba(39, 33, 55, 1) 100%);
          }
        }
      }
    }
  }

  &.single-product {
    header {
      &.header-5 {
        &.overlay-style {
          background-color: transparent;

          .top-header {
            display: none;
          }

          &.sticky {
            background: rgb(9, 9, 21);
            background: linear-gradient(90deg, rgba(9, 9, 21, 1) 0%, rgba(64, 46, 62, 1) 100%);

            .navbar-nav {
              >li {
                >a {
                  color: $white;
                }
              }
            }

            .navbar {
              &.navbar-expand-xl {
                .navbar-nav {
                  .nav-item {
                    &.dropdown {
                      >a {
                        color: $white;
                      }
                    }
                  }
                }
              }
            }

            .main-menu {
              .menu-right {
                .icon-nav {
                  i {
                    color: $white;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.header-style-1 .border-top-cls {
  border-top: 1px solid #eee;
}