/**=====================
     Header scss
==========================**/
.onhover-category-box {
  position: absolute;
  top: 0;
  left: 100%;
  background: $white;
  box-shadow: 0 0 8px #ddd;
  padding: 20px 25px;
  border-radius: 5px;
  width: 520px;
  height: 100%;
  overflow: auto;
  display: grid;
  grid-template-columns: auto auto;
  opacity: 0;
  visibility: hidden;
  margin-left: 14px;
  transition: all 0.3s ease-in-out;

  body.rtl & {
    margin-left: unset;
    margin-right: 14px;
  }

  @include mq-max(xl) {
    grid-template-columns: auto;
    display: block;
    width: 100%;

    .list-2 {
      margin-top: 15px;
    }
  }

  @include mq-max(md) {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    box-shadow: none;
    padding: 12px 11px;
    margin-top: 7px;
    opacity: 1;
    visibility: visible;
    margin-left: 0;
  }

  .category-title-box {
    margin-bottom: calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320)));
    display: flex;
    align-items: center;

    h5 {
      font-weight: 600;
    }
  }

  ul {
    @include flex_wrap($dis: flex,
      $wrap: wrap,
      $gap: calc(4px + (11 - 4) * ((100vw - 320px) / (1920 - 320))));

    li {
      position: relative;

      &::after {
        @include pos;
        @include center(vertical);
        left: 0;
        width: 5px;
        height: 5px;
        background-color: $content-color;
        border-radius: 100%;
      }

      a {
        margin-left: 13px;
      }
    }
  }
}

header {
  &.active {
    .sticky-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: $white;
      color: $title-color;
      box-shadow: 0 8px 10px rgba($title-color, 0.05);
      z-index: 3;
      padding: calc(15px + (24 - 15) * ((100vw - 320px) / (1920 - 320))) 0;


      .search-full {
        top: 48px;
      }

      &-2 {
        background-color: var(--theme-color);
        padding: 14px 0;
      }

      &-3 {
        padding: 14px 0;
      }
    }
  }

  .delivery-login-box {
    display: flex;
    align-items: center;
    cursor: default;
    font-size: 24px;

    .delivery-icon {
      .user-box {
        @include pseudowh($width: 40px, $height: 40px);
        border-radius: 100%;
        background-color: #f8f8f8;
        @include flex_common;
        overflow: hidden;
      }

      i {
        color: $title-color;
        font-size: 24px;
        cursor: pointer;

        @include mq-max(md) {
          font-size: 20px;
        }

        @include mq-max(4xl) {
          margin-right: 0;

          body.rtl & {
            margin-right: unset;
            margin-left: 0;
          }
        }
      }
    }

    .delivery-detail {
      margin-left: 12px;

      body.rtl & {
        margin-left: unset;
        margin-right: 12px;
      }

      @include mq-max(4xl) {
        display: none;
      }

      h6 {
        color: $content-color;
        margin-bottom: 3px;
        max-width: 140px;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
      }

      h5 {
        font-weight: 500;
        color: $title-color;
      }
    }
  }

  .timer-notification {
    color: $white;
    text-align: center;
    transition: all 0.3s ease-in-out;
    position: relative;

    @media (max-width: 1399px) {
      text-align: left;
    }

    h6 {
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;

      a {
        text-decoration: underline;
        font-weight: 600;
        display: inline-block;
        margin-left: 5px;
      }
    }
  }

  .header-notification {
    position: relative;

    &.remove {
      display: none;
    }

    .notification-slider {
      .timer-notification {
        @include mq-max(md) {
          width: 80%;
          margin: 0 auto;
        }
      }
    }

    .close-notification {
      @include center(vertical);
      position: absolute;
      right: 11px;
      padding: 0;
      color: $white;
      font-size: 14px;
      font-weight: 700;

      @include mq-max(sm) {
        top: 10px;
        transform: none;
      }

      span {
        @include mq-max(sm) {
          display: none;
        }
      }

      i {
        margin-left: 5px;
        margin-top: 1px;
      }
    }
  }

  .onhover-category-list {
    &:hover {
      .onhover-category-box {
        opacity: 1;
        visibility: visible;
        margin-left: 0;

        body.rtl & {
          margin-left: unset;
          margin-right: 0;
        }
      }
    }

    .list-1 {
      @include mq-max(md) {
        margin-bottom: 21px;
      }
    }

    .onhover-category-box {
      position: absolute;
      top: 0;
      left: 100%;
      background: $white;
      box-shadow: 0 0 8px #ddd;
      padding: 20px 25px;
      border-radius: 5px;
      width: 520px;
      height: 100%;
      overflow: auto;
      display: grid;
      grid-template-columns: auto auto;
      opacity: 0;
      visibility: hidden;
      margin-left: 14px;
      transition: all 0.3s ease-in-out;

      body.rtl & {
        margin-left: unset;
        margin-right: 14px;
      }

      @include mq-max(lg) {
        grid-template-columns: auto;
        display: block;
        width: 100%;

        .list-2 {
          margin-top: 15px;
        }
      }

      @include mq-max(md) {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        box-shadow: none;
        padding: 12px 11px;
        margin-top: 7px;
        opacity: 1;
        visibility: visible;
        margin-left: 0;
      }

      .category-title-box {
        margin-bottom: calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320)));
        display: flex;
        align-items: center;

        h5 {
          font-weight: 600;
        }
      }

      ul {
        @include flex_wrap($dis: flex,
          $wrap: wrap,
          $gap: calc(4px + (11 - 4) * ((100vw - 320px) / (1920 - 320))));

        li {
          position: relative;

          &::after {
            @include pos;
            @include center(vertical);
            left: 0;
            width: 5px;
            height: 5px;
            background-color: $content-color;
            border-radius: 100%;
          }

          a {
            margin-left: 13px;
          }
        }
      }
    }
  }

  .header-top {
    padding: 8px 0;
    background-color: var(--theme-color);

    &-2 {
      background-color: $title-color;
    }

    .top-left-header {
      display: flex;
      align-items: center;
      height: 100%;
      gap: 6px;

      a {
        display: flex;
        align-items: center;
        height: 100%;
        gap: 6px;
      }

      i {
        font-size: 18px;
      }

      span {
        margin-top: 1px;
        font-weight: 500;
      }
    }

    .about-list {
      @include flex_common($dis: flex, $align: center, $justify: flex-end);
      height: 100%;

      body.rtl & {
        padding-left: unset;
        padding-right: 0;
      }

      >li {
        display: flex;
        align-items: center;

        i {
          font-size: 18px;
          margin-right: 5px;

          body.rtl & {
            margin-right: unset;
            margin-left: 5px;
          }
        }

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

        +li {
          margin-left: 25px;
          position: relative;

          body.rtl & {
            margin-left: unset;
            margin-right: 25px;
          }

          &::after {
            @include pos;
            @include pseudowh($width: 2px, $height: 90%);
            left: -13px;
            background-color: rgba($white, 0.3);

            body.rtl & {
              left: unset;
              right: -13px;
            }
          }
        }

        .theme-form-select {
          padding: 0;
          background-color: transparent;
          color: $white;
          border: none;
          background-image: none;
          position: relative;

          .form-select {
            font-size: 14px;
            background-color: transparent;
            border: initial;
            color: white;
            padding: 0 18px 0 0;
            background-image: none;
            box-shadow: none;
          }

          &.select-arrow {
            position: relative;

            &::before {
              @include pos($pos: absolute, $content: "\ea4e");
              @include remixicon;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
              color: $white;
              display: block !important;
            }
          }

          .dropdown-toggle {
            font-size: 14px;
            font-weight: 500;
            color: white;
            padding: 0 18px 0 0;

            img {
              width: 20px;
              margin-right: 10px;

              body.rtl & {
                margin-right: unset;
                margin-left: 10px;
              }
            }

            &::after {
              content: none;
            }

            &:focus {
              box-shadow: none;
            }

            &::before {
              @include pos($pos: absolute, $content: "\ea4e");
              @include remixicon;
              @include center(vertical);
              right: 0;
              color: $white;
            }
          }

          .dropdown-menu {
            right: 0;

            body.rtl & {
              right: unset;
              left: 0;
            }

            &.sm-dropdown-menu {
              min-width: 100%;
            }

            li {
              display: block;

              +li {
                margin-left: 0;

                body.rtl & {
                  margin-left: unset;
                  margin-right: 0;
                }
              }

              .dropdown-item {
                display: flex;
                align-items: center;
                font-size: 14px;
                gap: 10px;

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

                &.active,
                &:active {
                  color: $title-color;
                  background-color: transparent;
                }

                img {
                  width: 20px;
                  margin-right: 10px;

                  body.rtl & {
                    margin-right: unset;
                    margin-left: 10px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .nav-about {
    padding: 10px 0;
    background-color: var(--theme-color);

    &-2 {
      background-color: $title-color;
    }
  }

  .top-nav {
    padding: 24px 0;

    @include mq-max(xl) {
      padding: 24px 0 12px;
    }

    @include mq-max(md) {
      padding: 14px 0 0;
    }

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

      @include mq-max(xl) {
        justify-content: normal;
      }

      @include mq-max(md) {
        justify-content: space-between;
      }

      .web-logo {
        display: flex;

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

        img {
          @include pseudowh($width: calc(120px + (162 - 120) * ((100vw - 320px) / (1920 - 320))),
            $height: auto);
          object-fit: contain;

          @include mq-max(md) {
            margin: 0 auto;
          }
        }

        h2 {
          font-size: calc(29px + (39 - 29) * ((100vw - 320px) / (1920 - 320)));
          object-fit: contain;
        }
      }

      .middle-box {
        display: flex;
        align-items: center;

        @include mq-max(md) {
          display: none;
        }

        .location-box {
          border-radius: 5px;
          border: 1px solid $border-color;
          display: flex;
          align-items: center;
          padding: 7px;
          margin-right: 13px;
          position: relative;
          cursor: pointer;

          body.rtl & {
            margin-right: unset;
            margin-left: 13px;
          }

          [class="dark"] & {
            border-color: #777;
          }

          @media (max-width: 1556px) {
            padding-right: 7px;

            body.rtl & {
              padding-right: 7px;
              padding-left: 7px;
            }
          }

          @media (max-width: 1300px) {
            display: none;
          }

          button {
            display: flex;
            align-items: center;
            padding: 0;

            &:focus {
              box-shadow: none;
            }

            .location-arrow {
              @include pseudowh($width: 35px, $height: 35px);
              @include flex_common;
              color: $content-color;
              background-color: #f3f5f9;
              border-radius: 5px;
              margin-right: 12px;

              body.rtl & {
                margin-right: unset;
                margin-left: 12px;
              }

              @media (max-width: 1300px) {
                margin-right: 0;

                body.rtl & {
                  margin-right: unset;
                  margin-left: 0;
                }
              }

              i {
                display: block;
                font-size: 18px;
              }
            }

            .locat-name {
              font-size: 16px;
              font-weight: 400;
              border: none;
              box-shadow: none;
              cursor: pointer;

              body.rtl & {
                padding: 0.375rem 0.75rem 0.375rem 2.25rem;
                background-position: left 0.75rem center;
              }

              @media (max-width: 1300px) {
                display: none;
              }

              html.dark & {
                background-image: url(../../images/down-arrow.svg);
                background-size: 20px;
              }
            }

            i {
              color: $content-color;

              body.rtl & {
                margin-left: unset;
                margin-right: 17px;
              }

              @media (max-width: 1300px) {
                display: none;
              }
            }
          }
        }

        .search-box {
          @include mq-max(xl) {
            display: none;
          }

          .input-group {
            z-index: 4;

            &::placeholder {
              font-size: 16px;
              font-weight: 400;
            }

            .form-control {
              width: 500px;
              border-right-color: transparent;
              border-radius: 0;
              border-color: $border-color;
              height: 51px;

              body.rtl & {
                border-radius: 0;
                border-left-color: transparent;
              }

              @media (max-width: 1812px) {
                width: 466px;
              }

              @media (max-width: 1346px) {
                width: 412px;
              }

              @media (max-width: 1306px) {
                width: 423px;
              }

              &:focus {
                border-color: $border-color;
                background-color: $white;
              }
            }

            button {
              background-color: #ffa53b;
              color: $white;
              height: 51px;
              padding: 14px 20px;
              border-radius: 5px;
              border: 1px solid #ffa53b;
              border-top-left-radius: 0;
              border-bottom-left-radius: 0;

              &.bg-theme {
                background-color: var(--theme-color);
                border-color: var(--theme-color);
              }

              &.search-button-2 {
                background-color: var(--theme-color);
                border-color: var(--theme-color);
              }

              body.rtl & {
                border-radius: 5px 0 0 5px !important;
              }

              i {
                font-size: 22px;
              }

              &.location-button {
                z-index: 2;
                border-radius: 5px 0 0 5px;
                border: 1px solid $border-color;
                border-right: none;
                display: flex;
                align-items: center;
                padding: 7px;
                margin-right: 0;
                position: relative;
                cursor: pointer;
                background-color: $white;
                color: $title-color;
                position: relative;

                body.rtl & {
                  border-radius: 0 5px 5px 0 !important;
                  border-right: 1px solid $border-color;
                  border-left: unset;
                }

                html.dark & {
                  border-color: rgba(119, 119, 119, 0.44);
                }

                select {
                  padding: 0 36px 0 12px;
                  background-position: right 2px center;
                  border: unset;
                  box-shadow: unset;

                  html.dark & {
                    background-color: #2a2d2d;
                    padding: 0 36px 0 12px;
                    color: #ddd;
                    background-position: right 2px center;
                    background-image: url("../../images/down-arrow.svg");
                    background-size: 20px;
                  }

                  body.rtl & {
                    padding: 0 12px 0 36px;
                    background-position: left 2px center;
                  }
                }
              }
            }
          }
        }
      }

      .rightside-box {
        @include mq-max(xl) {
          margin-left: auto;

          body.rtl & {
            margin-left: unset;
            margin-right: auto;
          }
        }

        @include mq-max(md) {
          margin-left: unset;

          body.rtl & {
            margin-left: unset;
            margin-right: unset;
          }
        }

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

          .mobile-search {
            i {
              line-height: 1;
              font-size: 24px;
              color: $title-color;
            }

            .input-group {
              a {
                padding: 0;
                z-index: unset;
              }
            }
          }

          body.rtl & {
            padding-left: unset;
            padding-right: 0;
          }

          .right-side {
            position: relative;
            padding-right: 30px;

            body.rtl & {
              padding-right: unset;
              padding-left: 30px;
            }

            @include mq-max(md) {
              // display: none;

              &:last-child {
                display: block;
              }
            }

            &:first-child {
              display: none;

              @include mq-max(xl) {
                display: block;
              }

              @include mq-max(md) {
                display: none;
              }
            }

            &:nth-child(2) {
              @media (max-width: 1660px) {
                display: none;
              }
            }

            &.search-icon {
              display: block;

              @media (max-width: 767px) {
                display: none;
              }

              a {
                padding: 0;
                font-size: 22px;
                color: $content-color;

                &:focus {
                  z-index: 0;
                }
              }
            }

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

              body.rtl & {
                padding-right: unset;
                padding-left: 0;
              }

              &::before {
                content: none;
              }
            }

            &::before {
              @include pos;
              @include center(vertical);
              @include pseudowh($width: 1px, $height: 24px);
              right: 14px;
              background-color: #eee;

              body.rtl & {
                right: unset;
                left: 14px;
              }
            }

            .header-badge {
              padding-right: 0;
            }

            .header-wishlist {
              i {
                line-height: 1;
                font-size: 24px;
                color: $content-color;

                @include mq-max(4xl) {
                  color: $title-color;
                }
              }

              &:focus {
                box-shadow: none;
              }

              span {
                @include pseudowh($width: 18px, $height: 18px);
                @include flex_common;
                background-color: #ff7272;
                font-size: 12px;
                padding: 0;
                border-radius: 2px;

                body.rtl & {
                  right: 0 !important;
                }
              }
            }
          }
        }
      }
    }
  }

  .onhover-dropdown {
    position: relative;

    &:hover {
      .onhover-div {
        opacity: 1;
        top: 50px;
        visibility: visible;
      }
    }

    .onhover-div {
      z-index: 0;
      overflow: hidden;
      position: absolute;
      top: 60px;
      right: -10px;
      background-color: $white;
      z-index: 1001;
      width: 360px;
      border-radius: 10px;
      padding: 0;
      box-shadow: -1px 0 10px 0 rgba($title-color, 0.07),
        5px 20px 40px 0 rgba($title-color, 0.04);
      opacity: 0;
      transition: all 0.3s ease-in-out;
      visibility: hidden;

      html.dark & {
        box-shadow: -1px 0 10px 0 rgba(137, 137, 137, 0.05),
          5px 20px 40px 0 rgba(137, 137, 137, 0.05);
      }

      .cart-title,
      .free,
      .progress {
        display: none;
      }

      .cart-list {
        >li {
          .drop-cart {
            .drop-contain {
              h5 {
                margin-bottom: 0 !important;
              }
            }

            .rating {
              margin-bottom: 5px;
            }
          }
        }
      }

      .qty-box {
        width: 108px;
        position: absolute;
        bottom: 0;
        right: 0;

        body.rtl & {
          right: unset;
          left: 0;
        }

        .input-group {
          border: 1px solid rgba(193, 193, 193, 0.3);
          background-color: #f8f8f8;

          button {
            width: 30px;
            height: 30px;

            &:hover {
              background-color: $white;

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

      .empty-cart-box {
        padding: 28px 22px;
      }

      &.fixed-cart {
        position: fixed;
        right: -900px;
        height: 100vh;
        top: 0;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        padding: 0;
        width: 400px;
        z-index: 10;

        @include mq-max(md) {
          width: 300px;
        }

        .sidebar-title {
          h4 {
            padding: 15px 15px 8px;
            display: flex;
            justify-content: space-between;
            width: 100%;
            color: rgba($content-color, 0.65);
            font-size: 16px;
          }
        }

        body.rtl & {
          right: unset;
          left: -420px;
        }

        .empty-cart-box {
          @include flex_common;
          flex-direction: column;
          height: 70%;
        }

        .bg-overlay {
          position: fixed;
          top: 0;
          left: 0;
          z-index: 1050;
          width: 100vw;
          height: 100vh;
          opacity: 0;
          visibility: hidden;
          background-color: $black;
          transition: 0.3s ease-in-out;
        }

        &.show {
          right: 0;

          body.rtl & {
            right: unset;
            left: 0;
          }

          .bg-overlay {
            opacity: 0.5;
            visibility: visible;
          }
        }

        .cart-title {
          @include flex_common($dis: flex,
            $align: center,
            $justify: space-between);
          padding: 20px 15px 20px;
          background-color: #f8f8f8;
          border-bottom: 1px solid #eee;
          margin-bottom: 20px;

          h4 {
            font-size: 20px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 5px;
          }

          a {
            line-height: 1;

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

        .cart-list {
          display: flex;
          flex-wrap: wrap;
          padding: 0;
          overflow: auto;
          padding: 15px;
          padding-top: 7px;
          max-height: calc(100vh - 247px - 85px - 78px - 34px);
        }

        .bottom-box {
          position: absolute;
          width: 100%;
          padding: 20px;
          bottom: 0;
          right: 0;
          max-width: 420px;
          border-top: 1px solid #c1c1c14f;
          background-color: #f8f8f8;

          .free {
            color: $content-color;
            display: block;
            margin-bottom: 9px;
          }

          .check-box {
            min-height: unset;
            padding: 0;
            margin-bottom: 20px;
            display: flex;
            align-items: flex-start;

            .checkbox_animated {
              width: 21px;
              height: 21px;
              border: unset;
              margin-right: 11px;

              &::after {
                top: 0;
                left: 0;
              }

              &::before {
                left: 5px;
                top: 6px;
                width: 11px;
                height: 6px;
              }
            }

            .form-check-label {
              color: $content-color;
              font-size: 14px;
            }
          }

          .progress {
            display: block;
            margin-top: calc(8px + (18 - 8) * ((100vw - 320px) / (1920 - 320)));
            height: calc(5px + (8 - 5) * ((100vw - 320px) / (1920 - 320)));
            background-color: #e6e7e9;
            border-radius: 100px;
            position: relative;
            overflow: unset;
            margin-bottom: calc(18px + (31 - 18) * ((100vw - 320px) / (1920 - 320)));

            .progress-bar {
              height: calc(5px + (8 - 5) * ((100vw - 320px) / (1920 - 320)));
              background-color: var(--theme-color);
              border-radius: 100px;
            }

            i {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 90px;
              width: calc(22px + (28 - 22) * ((100vw - 320px) / (1920 - 320)));
              height: calc(22px + (28 - 22) * ((100vw - 320px) / (1920 - 320)));
              border-radius: 100%;
              @include flex_common;
              background-color: var(--theme-color);
              color: white;
              font-size: calc(15px + (17 - 15) * ((100vw - 320px) / (1920 - 320)));
            }
          }
        }

        .pere-text-box {
          padding: 0 15px 12px;
          display: block;
        }

        .price-box {
          padding-block: calc(7px + (11 - 7) * ((100vw - 320px) / (1920 - 320)));
        }

        .progress {
          display: block;
          margin-block: calc(8px + (18 - 8) * ((100vw - 320px) / (1920 - 320)));
          height: calc(5px + (8 - 5) * ((100vw - 320px) / (1920 - 320)));
          background-color: #e6e7e9;
          border-radius: 100px;
          position: relative;
          overflow: unset;

          body.rtl & {
            direction: rtl;
          }

          .progress-bar {
            height: calc(5px + (8 - 5) * ((100vw - 320px) / (1920 - 320)));
            background-color: var(--theme-color);
            border-radius: 100px;
            position: relative;
            overflow: unset;
            max-width: 96%;
            min-width: 3%;
          }

          i {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: -16px;
            width: calc(22px + (28 - 22) * ((100vw - 320px) / (1920 - 320)));
            height: calc(22px + (28 - 22) * ((100vw - 320px) / (1920 - 320)));
            border-radius: 100%;
            @include flex_common;
            background-color: var(--theme-color);
            color: #ffffff;
            font-size: calc(15px + (17 - 15) * ((100vw - 320px) / (1920 - 320)));

            body.rtl & {
              right: unset;
              left: -16px;
            }
          }

          &.danger-progress {
            p {
              span {
                &.price {
                  color: #ff4f4f;
                }
              }
            }

            .progress-bar,
            i {
              background-color: #ff4f4f;
            }
          }

          &.warning-progress {
            p {
              span {
                &.price {
                  color: #ffa53b;
                }
              }
            }

            .progress-bar,
            i {
              background-color: #ffa53b;
            }
          }

          &.success-progress {
            p {
              span {
                &.price {
                  color: var(--theme-color);
                }
              }
            }

            .progress-bar,
            i {
              background-color: var(--theme-color);
            }
          }
        }

        .button-group {
          display: grid;
        }
      }

      .bottom-box {
        padding: 15px;
        border-top: 1px solid rgba(193, 193, 193, 0.3098039216);
      }

      body.rtl & {
        right: unset;
        left: 10px;
      }

      &-login {
        right: 0;
        width: 160px;
        padding: 10px;

        body.rtl & {
          right: unset;
          left: 0;
        }

        .user-box-name {
          @include flex_wrap($dis: flex, $wrap: wrap, $gap: 0);
          align-items: center;

          li {
            display: block;
            width: 100%;

            +li {
              padding-top: 8px;
              margin-top: 8px;
              border-top: 1px solid #eee;
            }

            a {
              color: $title-color;
              display: flex;
              align-items: center;
              position: relative;

              &:hover {
                &::after {
                  width: 40%;
                }
              }

              &::after {
                @include pos;
                @include pseudowh($width: 0, $height: 4px);
                bottom: 2px;
                left: 0;
                background-color: var(--theme-color);
                opacity: 0.3;
                border-radius: 50px;
                transition: all 0.3s ease-in-out;
                z-index: -1;

                body.rtl & {
                  left: unset;
                  right: 0;
                }
              }
            }
          }
        }
      }

      .cart-list {
        display: flex;
        flex-wrap: wrap;
        max-height: 300px;
        overflow: auto;
        padding: 15px;

        &::-webkit-scrollbar-track {
          border-radius: 10px;
          background-color: rgba(85, 85, 85, 0.14);
        }

        &::-webkit-scrollbar {
          width: 4px;
          background-color: #f5f5f5;
          border-radius: 50px;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background-color: var(--theme-color);
          opacity: 0.44;
        }

        >li {
          margin: 0;
          width: 100%;

          +li {
            margin-left: 0;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid $border-color;
          }

          &::after {
            content: none !important;
          }

          .drop-cart {
            @include flex_wrap($dis: flex, $wrap: nowrap, $gap: 15px);
            align-items: center;
            position: relative;

            &::after {
              content: none;
            }

            .drop-image {
              img {
                width: 87px;
                background: #f8f8f8;
                padding: 10px;
                height: 90px;
                object-fit: contain;

                html.dark & {
                  background: #1d1d22;
                }
              }
            }

            .drop-contain {
              width: calc(100% - 87px - 15px);
              padding-right: 40px;

              body.rtl & {
                padding-right: unset;
                padding-left: 40px;
              }

              h5 {
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                overflow: hidden;
                margin-bottom: 5px;
                font-size: calc(15px + (17 - 15) * ((100vw - 320px) / (1920 - 320)));
                color: $title-color;
                font-weight: 500;
              }

              .gram {
                display: inline-block;
                font-size: 13px;
                margin-top: 10px;
                color: $content-color;
                border: 1px solid rgba(193, 193, 193, 0.3);
                background-color: #f8f8f8;
                border-radius: 3px;
                padding: 3px 6px;
                font-weight: 400;

                a {
                  font-size: 14px;
                  color: rgba($content-color, 0.7);
                }
              }

              h6 {
                margin-top: 6px;
                display: flex;
                flex-wrap: nowrap;
                gap: 5px;
                align-items: flex-end;
                font-weight: 500;
                color: $title-color;
                font-size: 16px;

                span {
                  margin-top: -2px;
                  font-weight: normal;
                  color: $content-color;
                }
              }

              .close-button {
                background-color: transparent;
                border: none;
                padding: 0;
                color: rgba(74, 85, 104, 0.7);
                font-size: 12px;
                display: flex;
                margin-top: -3px;

                i {
                  font-size: 12px;
                }
              }

              .header-button-group {
                position: absolute;
                top: 0;
                right: 0;
                display: flex;
                align-items: center;
                gap: 6px;

                body.rtl & {
                  right: unset;
                  left: 0;
                }

                .delete-button,
                .edit-button {
                  color: $content-color;
                  width: 24px;
                  height: 24px;
                  background-color: #f8f8f8;
                  border: 1px solid #eee;
                  padding: 0;
                  font-size: 13px;
                  border-radius: 5px;
                  @include flex_common;
                }
              }
            }
          }
        }
      }

      .pere-text-box {
        display: none;
        border-bottom: 1px solid $border-color;
        padding: 20px 15px 20px;

        p {
          margin: 0;
          line-height: 1.5;
          color: rgba($content-color, 0.65);
          font-weight: 400;

          span {
            font-weight: 500;
            color: $title-color;

            &.price {
              color: var(--theme-color);
            }

            &.shipping {
              color: $title-color;
            }
          }
        }

        &.danger-progress {
          p {
            span {
              &.price {
                color: #ff4f4f;
              }
            }
          }

          .progress {

            .progress-bar,
            i {
              background-color: #ff4f4f;
            }
          }
        }

        &.warning-progress {
          p {
            span {
              &.price {
                color: #ffa53b;
              }
            }
          }

          .progress {

            .progress-bar,
            i {
              background-color: #ffa53b;
            }
          }
        }

        &.success-progress {
          p {
            span {
              &.price {
                color: var(--theme-color);
              }
            }
          }

          .progress {

            .progress-bar,
            i {
              background-color: var(--theme-color);
            }
          }
        }
      }

      .button-group {
        gap: calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320)));
        display: flex;
        margin-top: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));

        .cart-button {
          border: 2px solid var(--theme-color);
          color: var(--theme-color);
          padding: 10px;
          width: 100%;
          font-size: 16px;

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

      .price-box {
        @include flex_common($dis: flex,
          $align: center,
          $justify: space-between);
        margin: 0;
        padding: 0;

        h5 {
          font-size: 20px;
        }

        h4 {
          font-size: 20px;
          color: var(--theme-color);
          font-weight: 600;
        }
      }
    }
  }

  .search-full {
    width: 0;
    height: 0;
    background-color: #ffffff;
    position: fixed;
    top: 92px;
    right: 0;
    z-index: 3;
    transform: scale(0);
    display: flex;
    align-items: center;
    margin-inline: calc(12px + (160 - 12) * ((100vw - 320px) / (1920 - 320)));

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

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

    .search-suggestion-wrap {
      width: 100%;
    }

    .input-group {
      border: 1px solid #f0f3f8;

      html.dark & {
        border-color: rgba(119, 119, 119, 0.44);
      }

      .input-group-text {
        background-color: $white;
        border: none;
        display: flex;

        html.dark & {
          color: #ddd;
        }

        &.close-search {
          cursor: pointer;
          margin-left: 0 !important;
          margin-right: 1px;
        }

        svg {
          height: 18px;
        }
      }

      input {
        border: none;
      }
    }

    &.open {
      width: -webkit-fill-available;
      animation: zoomIn 0.5s ease-in-out;
      transform: scale(1);
    }

    &.show {
      .search-suggestion {
        padding: 10px;
        border: 1px solid #f0f3f8;
        height: max-content;
        max-height: 500px;
        transition: max-height 1000ms cubic-bezier(0.27, 0.7, 0, 0.99);
      }
    }
  }

  .header-nav {
    @include flex_common($dis: flex, $align: center, $justify: space-between);

    @include mq-max(md) {
      z-index: 3;
      position: relative;
      height: 0;
    }

    .header-nav-left {
      position: relative;

      .dropdown-category {
        @include flex_common;
        padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320))) calc(16px + (31 - 16) * ((100vw - 320px) / (1920 - 320)));
        background: var(--theme-color);
        color: #ffffff;
        border-radius: 5px;
        border: none;

        >div {
          @include flex_common;
        }

        @include mq-max(md) {
          display: none;
        }

        &-2 {
          background: linear-gradient(93.33deg, #222221 12.35%, #2f2f2d 99.38%);
        }

        i {
          line-height: 1;
          font-size: 23px;
          margin-right: calc(9px + (16 - 9) * ((100vw - 320px) / (1920 - 320)));

          body.rtl & {
            margin-right: unset;
            margin-left: calc(9px + (16 - 9) * ((100vw - 320px) / (1920 - 320)));
          }
        }

        span {
          font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 600;
          line-height: 1;
        }

        .dropdown {
          display: inline-block;

          &.custom-dropdown {
            position: unset;

            a {
              display: block;
              color: $white;
              text-decoration: none;
              transition: background 0.35s ease;
              font-family: $public-sans;
              font-weight: 500;
              font-size: 18px;
            }

            ul {
              display: none;
              border: 1px solid $border-color;
              border-radius: 5px;
              position: absolute;
              top: 53px;
              width: 100%;
              left: 0;
              background-color: $white;
              box-shadow: 0px 3px 4px rgba($black, 0.14);
              z-index: 999;

              .show {
                display: block;
              }

              @include mq-max(xl) {
                position: fixed;
                top: 0;
                left: 0;
                width: 320px;
              }

              li {
                display: flex;
                align-items: center;
                padding: 12px 14px;
                border-bottom: 1px solid $border-color;
                cursor: pointer;
                transition: background 0.35s ease;
                color: $title-color;

                img {
                  @include pseudowh($width: 25px, $height: 25px);
                  object-fit: contain;
                  margin-right: 6px;
                }

                &:last-child {
                  border-bottom: none;
                }

                &:focus,
                &:hover {
                  background-color: $border-color;
                }
              }
            }
          }
        }
      }

      &:hover {
        .category-dropdown {
          opacity: 1;
          visibility: visible;
          top: 63px;
          max-height: 450px;
          overflow: auto;
        }
      }

      .category-dropdown {
        position: absolute;
        top: 72px;
        left: 0;
        background-color: $white;
        box-shadow: 0 0 8px #ddd;
        z-index: 3;
        width: 300px;
        border-radius: 6px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out;

        body.rtl & {
          left: unset;
          right: 0;
        }

        @include mq-max(md) {
          @include pseudowh($width: calc(300px + (320 - 300) * ((100vw - 320px) / (1920 - 320))),
            $height: 100vh);
          position: fixed;
          top: 0;
          left: -320px;
          border-radius: 0;
          z-index: 10;
          padding: 0;
          opacity: 1;
          visibility: visible;
          transition: all 0.3s ease-in-out;
          box-shadow: none;

          body.rtl & {
            left: unset;
            right: -320px;
          }

          &.show {
            left: 0;

            body.rtl & {
              left: unset;
              right: 0;
            }
          }

          &:hover {
            opacity: 1;
            visibility: visible;
            top: 0;
          }
        }

        .category-title {
          display: none;

          @include mq-max(md) {
            @include flex_common($dis: flex,
              $align: center,
              $justify: space-between);
            padding: 20px 24px;
            border-bottom: 1px solid $border-color;
            box-shadow: 0 2px 10px -3px rgba($title-color, 0.1);
          }

          h5 {
            color: var(--theme-color);
            font-weight: 600;
          }
        }

        .category-list {
          @include flex_wrap($dis: flex, $wrap: wrap, $gap: 25px);
          padding: 20px 25px;

          li {
            display: block;
            width: 100%;
            margin: 0;

            a {
              @include flex_wrap($dis: flex, $wrap: wrap, $gap: 10px);
              align-items: center;
              color: $content-color;

              &:hover {
                h6 {
                  &::before {
                    width: 65px;
                  }
                }
              }

              img {
                @include pseudowh($width: 23px, $height: 23px);
                object-fit: contain;
              }

              h6 {
                font-size: 17px;
                font-weight: 500;
                position: relative;
                transition: all 0.3s ease-in-out;

                &:before {
                  @include pos;
                  @include pseudowh($width: 0, $height: 3px);
                  bottom: 0;
                  left: 0;
                  background-color: var(--theme-color);
                  opacity: 0.5;
                  transition: all 0.3s ease-in-out;

                  body.rtl & {
                    left: unset;
                    right: 0;
                  }
                }
              }

              .according-menu {
                margin-left: auto;

                body.rtl & {
                  margin-left: unset;
                  margin-right: auto;
                }
              }

              i {
                margin-left: auto;

                body.rtl & {
                  margin-left: unset;
                  margin-right: auto;
                }

                @include mq-max(md) {
                  display: none;
                }
              }
            }
          }
        }
      }
    }

    .header-nav-right {
      @include mq-max(md) {
        display: none;
      }

      .deal-button {
        color: var(--theme-color);
        padding: calc(6px + (15 - 6) * ((100vw - 320px) / (1920 - 320))) calc(11px + (20 - 11) * ((100vw - 320px) / (1920 - 320)));
        position: relative;
        border-radius: 5px;
        overflow: hidden;
        z-index: 0;

        &::before {
          @include pos;
          @include pseudowh;
          top: 0;
          left: 0;
          background-color: var(--theme-color);
          opacity: 0.1;
          z-index: -1;
        }

        i {
          margin-right: 10px;
          font-size: 24px;
          line-height: 1;

          body.rtl & {
            margin-right: unset;
            margin-left: 10px;
          }

          @include mq-max(2xl) {
            margin-right: 0;

            body.rtl & {
              margin-right: unset;
              margin-left: 0;
            }
          }
        }

        span {
          font-size: 16px;
          font-weight: 600;

          @include mq-max(2xl) {
            display: none;
          }
        }
      }
    }
  }

  &.header-compact {
    .top-nav {
      .navbar-top {
        justify-content: unset;

        .rightside-box {
          margin-left: auto;
          display: flex;
          align-items: center;

          body.rtl & {
            margin-left: unset;
            margin-right: auto;
          }
        }
      }
    }

    .location-box {
      padding-right: 10px;
    }
  }

  &.bg-theme {
    .navbar-light {
      .navbar-nav {
        .nav-link {
          color: $white !important;

          &:hover {
            color: $white !important;
          }
        }
      }
    }

    .top-nav {
      .navbar-top {
        .rightside-box {
          .right-side-menu {
            .right-side {
              &:before {
                background-color: rgba($white, 0.5);
              }

              .header-wishlist {
                i {
                  color: $white;
                }
              }

              .delivery-login-box {
                .delivery-detail {
                  h5 {
                    color: $white;
                  }

                  h6 {
                    color: rgba($white, 0.7);
                  }
                }

                .delivery-icon {
                  i {
                    color: $white;
                  }
                }
              }
            }
          }
        }
      }
    }

    .location-box {
      border-color: rgba($white, 0.5);

      button {
        i {
          color: $white;
        }

        .locat-name {
          color: $white;
        }

        .location-arrow {
          color: $white;
          background-color: rgba($white, 0.24);
        }
      }
    }
  }

  &.header-absolute {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    z-index: 1;

    &.bg-theme {
      background-color: transparent;
    }

    .navbar-expand-xl {
      .dropdown {
        &:hover {
          .dropdown-menu-2 {
            @media (min-width: 1200px) {
              body.rtl & {
                transform: translateX(-50%) translateY(0);
              }
            }
          }
        }
      }
    }
  }

  &.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100vw - 320px);
    z-index: 1;
    background-color: $white;
    margin-left: 320px;
    border-bottom: 1px solid $border-color;

    body.rtl & {
      left: unset;
      right: 0;
      margin-left: unset;
      margin-right: 320px;
    }

    @include mq-max(xl) {
      width: 100%;
      margin-left: 0;

      body.rtl & {
        margin-left: unset;
        margin-right: 0;
      }
    }

    .top-nav {
      padding: 18px 0;
    }
  }

  .location-box {
    border-radius: 5px;
    border: 1px solid $border-color;
    display: flex;
    align-items: center;
    padding: 7px;
    padding-right: 20px;
    margin-right: 13px;
    position: relative;

    body.rtl & {
      margin-right: unset;
      margin-left: 13px;
      padding-right: 7px;
      padding-left: 20px;
    }

    @include mq-max(xl) {
      margin-right: unset;
      margin-left: 13px;

      body.rtl & {
        margin-left: unset;
        margin-right: 13px;
      }
    }

    @media (max-width: 1556px) {
      padding-right: 7px;

      body.rtl & {
        padding-right: 7px;
        padding-left: 7px;
      }
    }

    @include mq-max(md) {
      display: none;
    }

    button {
      display: flex;
      align-items: center;
      padding: 0;

      &:focus {
        box-shadow: none;
      }

      .location-arrow {
        @include pseudowh($width: 35px, $height: 35px);
        @include flex_common;
        color: $content-color;
        background-color: #f3f5f9;
        border-radius: 5px;
        margin-right: 12px;

        body.rtl & {
          margin-right: unset;
          margin-left: 12px;
        }

        @media (max-width: 1300px) {
          margin-right: 0;

          body.rtl & {
            margin-right: unset;
            margin-left: 0;
          }
        }

        i {
          font-size: 18px;
        }
      }

      .locat-name {
        font-size: 16px;
        font-weight: 500;
        color: $title-color;

        @media (max-width: 1300px) {
          display: none;
        }
      }

      i {
        margin-left: 5px;
        color: $content-color;

        body.rtl & {
          margin-left: unset;
          margin-right: 17px;
        }

        @media (max-width: 1300px) {
          display: none;
        }
      }
    }
  }

}

body.home {
  header {
    &.header-gradient {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 1;

      .navbar-toggler-icon {
        color: #fff;

        i {
          margin-right: 1rem !important;
        }
      }

      .top-nav {
        .navbar-top {
          .rightside-box {
            .right-side-menu {
              .right-side {
                &::before {
                  background-color: #595959;
                }
              }
            }
          }
        }
      }

      .skeleton-menu {
        li {
          background: rgba(246, 247, 248, 0.05);
          background-image: linear-gradient(135deg, #3f4242 0%, rgba(237, 238, 241, 0.1) 20%, #3f4242 40%, #3f4242 100%);
        }
      }

      .navbar-light,
      .header-nav-middle {
        .navbar-nav {
          .nav-link {
            color: $white;
          }
        }
      }

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

      .dropdown {
        &::before {
          color: $white;
        }
      }

      .navbar-nav {
        .nav-item {
          .nav-link {
            color: $white !important;

            html.dark & {
              color: #ffffff;
            }

            @include mq-max(xl) {
              color: $title-color !important;
            }
          }

          .dropdown-menu {
            .nav-item {
              .nav-link {
                color: $title-color !important;
              }
            }
          }
        }
      }

      .top-nav {
        .navbar-top {
          .rightside-box {
            .right-side-menu {
              .right-side {
                .header-wishlist {
                  i {
                    color: $white;

                    html.dark & {
                      color: #ffffff;
                    }
                  }
                }

                .delivery-login-box {
                  .delivery-icon {
                    i {
                      color: $white;

                      html.dark & {
                        color: #ffffff;
                      }
                    }
                  }

                  .delivery-detail {

                    h6,
                    h5 {
                      color: rgba($white, 0.8);

                      html.dark & {
                        color: rgba(255, 255, 255, 0.8);
                      }
                    }
                  }
                }

                &.search-icon {
                  a {
                    color: #ffffff;
                  }
                }

                .search-suggestion-box {
                  ul {
                    >li {
                      .suggestion-category {
                        text-align: unset;

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

      .search-full {
        .input-group {
          border: unset;

          > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
            body.rtl & {
              border-radius: 0;
            }
          }

          .input-group-text {
            .form-control {
              body.rtl & {
                border-radius: 0;
              }
            }

            &.close-search {
              border-radius: 0 0.375rem 0.375rem 0 !important;

              body.rtl & {
                border-radius: 0.375rem 0 0 0.375rem !important;
              }
            }
          }
        }
      }
    }
  }
}

.cairo {
  header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;

    &.active {
      .navbar-nav {
        .nav-item {
          .nav-link {
            color: #222 !important;
          }
        }
      }

      .top-nav {
        .navbar-top {
          .rightside-box {
            .right-side-menu {
              .right-side {
                &:before {
                  background-color: #eee;
                }

                .delivery-login-box {
                  .delivery-detail {

                    h6,
                    h5 {
                      color: #4a5568 !important;
                    }
                  }
                }

                .header-wishlist {
                  i {
                    color: #4a5568 !important;
                  }
                }

                &.search-icon {
                  a {
                    color: #4a5568 !important;
                  }
                }
              }
            }
          }
        }
      }
    }

    .navbar-toggler-icon {
      color: #fff;

      i {
        margin-right: 1rem !important;
      }
    }

    .top-nav {
      .navbar-top {
        .rightside-box {
          .right-side-menu {
            .right-side {
              &::before {
                background-color: #595959;
              }
            }
          }
        }
      }
    }

    .skeleton-menu {
      li {
        background: rgba(246, 247, 248, 0.05);
        background-image: linear-gradient(135deg, #3f4242 0%, rgba(237, 238, 241, 0.1) 20%, #3f4242 40%, #3f4242 100%);
      }
    }

    .navbar-light,
    .header-nav-middle {
      .navbar-nav {
        .nav-link {
          color: $white;
        }
      }
    }

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

    .dropdown {
      &::before {
        color: $white;
      }
    }

    .navbar-nav {
      .nav-item {
        .nav-link {
          color: $white !important;

          html.dark & {
            color: #ffffff;
          }

          @include mq-max(xl) {
            color: $title-color !important;
          }
        }

        .dropdown-menu {
          .nav-item {
            .nav-link {
              color: $title-color !important;
            }
          }
        }
      }
    }

    .top-nav {
      .navbar-top {
        .rightside-box {
          .right-side-menu {
            .right-side {
              .header-wishlist {
                i {
                  color: $white;

                  html.dark & {
                    color: #ffffff;
                  }
                }
              }

              .delivery-login-box {
                .delivery-icon {
                  i {
                    color: $white;

                    html.dark & {
                      color: #ffffff;
                    }
                  }
                }

                .delivery-detail {

                  h6,
                  h5 {
                    color: rgba($white, 0.8);

                    html.dark & {
                      color: rgba(255, 255, 255, 0.8);
                    }
                  }
                }
              }

              &.search-icon {
                a {
                  color: #ffffff;
                }
              }

              .search-suggestion-box {
                ul {
                  >li {
                    .suggestion-category {
                      text-align: unset;

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

    .search-full {
      .input-group {
        border: unset;

        > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
          body.rtl & {
            border-radius: 0;
          }
        }

        .input-group-text {
          .form-control {
            body.rtl & {
              border-radius: 0;
            }
          }

          &.close-search {
            border-radius: 0 0.375rem 0.375rem 0 !important;

            body.rtl & {
              border-radius: 0.375rem 0 0 0.375rem !important;
            }
          }
        }
      }
    }
  }
}

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

  body.rtl & {
    left: 0;
  }

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

    @include mq-max(md) {
      width: 100%;
    }

    body.rtl & {
      padding: 0;
    }

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

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

        &::before {
          @include pos;
          @include pseudowh($width: 10px, $height: 10px);
          bottom: -15px;
          left: 50%;
          transform: translateX(-50%) rotate(45deg);
          background-color: $white;
          border-radius: 100%;
        }

        i {
          &.activated {
            display: inline-block;
          }

          &.deactivated {
            display: none;
          }
        }

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

      a {
        display: block;

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

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

        @include mq-max(2xs) {
          font-size: 13px;
        }

        i {
          display: inline-block;
          margin: 0 auto;
          font-size: calc(20px + (22 - 20) * ((100vw - 320px) / (1920 - 320)));
          color: $white;

          &.activated {
            display: none;
          }

          &.deactivated {
            display: inline-block;
          }
        }

        span {
          display: block;
          color: rgba($white, 0.8);
        }
      }
    }
  }
}

.header-2 {
  .navbar-top {
    display: flex;
    align-items: center;

    @include mq-max(xs) {
      justify-content: space-between;
    }

    .navbar-toggler {
      &:focus {
        box-shadow: none;
      }
    }
  }

  .search-box {
    display: none;

    @include mq-max(lg) {
      display: block;
      background-color: $white;
      padding: 6px;
      border-radius: 5px;
      border: 1px solid $content-color;
      text-align: right;
      margin-left: auto;

      a {
        @include flex_common;
        color: $black;

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

    @include mq-max(xs) {
      margin-left: unset;
    }
  }

  .dropdown-list {
    &.drop-state {
      margin-right: 20px;
      width: 100%;
      display: flex;
      align-items: center;

      @include mq-max(xl) {
        margin-right: 0;
      }
    }

    @include mq-max(lg) {
      background-color: transparent;
      margin: 0;
    }

    .location-icon {
      margin-right: 8px;
      display: flex;

      .iconly-Location {
        font-size: 25px;
      }
    }

    .dropdown {
      @include flex_common;

      .dropdown-toggle {
        padding-left: 0;
        font-size: 16px;
        display: flex;
        align-items: center;
        font-weight: 500;
        letter-spacing: 0.5px;
        position: relative;
        margin-top: 4px;

        &::after {
          display: none;
        }

        i {
          color: $black;
          margin-left: 5px;
        }
      }

      .dropdown-menu {
        min-width: 100%;

        li {
          display: block;
        }
      }
    }
  }

  .form-select {
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 0;
    font-family: $public-sans;
    color: $title-color;

    &:focus {
      border-color: transparent;
      box-shadow: none;
    }
  }

  .top-nav {
    padding: 14px 0;
    border-bottom: 1px solid $border-color;

    @include mq-max(md) {
      border-bottom: unset;
      padding-bottom: 0;
    }

    &-color {
      background-color: #ffe03e;
    }

    span {
      color: $title-color;

      i {
        font-size: 25px;
      }
    }

    .nav-logo {
      display: flex;
      font-size: calc(28px + (35 - 28) * ((100vw - 320px) / (1920 - 320)));
      color: var(--theme-color);
      font-weight: bolder;
      font-family: $public-sans;

      span {
        color: $title-color;
      }
    }

    .search-full {
      @include pseudowh($width: 0, $height: 0);
      background-color: $white;
      position: absolute;
      top: 40px;
      right: 0;
      z-index: 1;
      transform: scale(0);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;

      @include mq-max(2xs) {
        right: -5px;
      }

      .input-group {
        border: 1px solid #f0f3f8;
        box-shadow: 0px 3px 4px rgba($black, 0.14);

        .input-group-text {
          background-color: $white;
          border: none;
          color: $content-color;

          &.close-search {
            cursor: pointer;
          }
        }

        input {
          border: none;
          height: 50px;
        }
      }

      &.open {
        width: 100%;
        animation: zoomIn 0.5s ease-in-out;
        transform: scale(1);
        transition: all 0.3s ease;
        padding: 0 30px;

        @include mq-max(sm) {
          padding: 0 25px;
        }

        @include mq-max(xs) {
          padding: 0 15px;
        }

        @include mq-max(2xs) {
          @include center(horizontal);
          padding: 0;
          width: 95%;
        }
      }

      &.show {
        .search-suggestion {
          padding: 10px;
          border: 1px solid #f0f3f8;
          height: max-content;
          max-height: 500px;
          transition: max-height 1000ms cubic-bezier(0.27, 0.7, 0, 0.99);
        }
      }
    }

    .middle-box {
      display: inline-block;
      margin-left: calc(16px + (29 - 16) * ((100vw - 320px) / (1920 - 320)));

      body.rtl & {
        margin-left: unset;
        margin-right: calc(16px + (29 - 16) * ((100vw - 320px) / (1920 - 320)));
      }

      @include mq-max(2xl) {
        @include flex_common($dis: flex,
          $align: center,
          $justify: space-between);
        float: right;
      }

      @include mq-max(xl) {
        margin-left: 15px;
      }

      @include mq-max(lg) {
        display: none;
      }

      .center-box {
        display: flex;
        align-items: center;

        @include mq-max(lg) {
          display: none;
        }
      }

      .searchbar-box {
        position: relative;

        @include mq-max(lg) {
          display: none;
        }

        .search-button {
          @include center(vertical);
          @include flex_common;
          position: absolute;
          padding: 0 19px;
          right: 0;
          height: 100%;
          cursor: pointer;

          body.rtl & {
            right: unset;
            left: 0;
          }

          i {
            font-size: calc(18px + (25 - 18) * ((100vw - 320px) / (1920 - 320)));
            color: $content-color;
          }
        }

        input {
          @include pseudowh($width: 685px, $height: 45px);
          padding: 8px 60px 8px 18px;
          color: $title-color;
          border-color: #eee;
          font-size: 16px;

          body.rtl & {
            padding: 8px 18px 8px 60px;
          }

          @media (max-width: 1754px) {
            width: 630px;
          }

          @media (max-width: 1678px) {
            width: 580px;
          }

          @media (max-width: 1604px) {
            width: 529px;
          }

          @media (max-width: 1332px) {
            width: 483px;
          }

          @media (max-width: 1270px) {
            width: 436px;
          }

          @media (max-width: 1235px) {
            width: 415px;
          }

          &::placeholder {
            color: $content-color;
            font-size: 16px;
          }
        }
      }

      .location-box-2 {
        display: flex;
        align-items: center;
        margin-right: 20px;
        position: relative;

        body.rtl & {
          margin-right: unset;
          margin-left: 20px;
        }

        @include mq-max(xl) {
          margin-right: unset;
          margin-left: 0;
        }

        @include mq-max(md) {
          display: none;
        }

        button {
          display: flex;
          align-items: center;
          padding: 0;

          &:focus {
            box-shadow: none;
          }

          i {
            margin-right: 9px;
            font-size: 22px;

            body.rtl & {
              margin-right: unset;
              margin-left: 9px;
            }

            @media (max-width: 1556px) {
              margin-right: 0;
            }
          }

          span {
            font-size: 16px;

            @media (max-width: 1556px) {
              display: none;
            }
          }

          .down-arrow {
            margin-left: 10px;

            body.rtl & {
              margin-left: unset;
              margin-right: 10px;
            }

            @media (max-width: 1556px) {
              display: none;
            }
          }
        }
      }
    }
  }

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

    body.rtl & {
      margin-left: unset;
      margin-right: auto;
    }

    .dropdown-dollar {
      display: flex;
      align-items: center;
      margin-right: 22px;

      body.rtl & {
        margin-right: unset;
        margin-left: 22px;
      }

      @include mq-max(lg) {
        display: none;
      }

      .dropdown {
        position: relative;
        z-index: 1;

        .dropdown-toggle {
          font-size: 16px;
          display: flex;
          align-items: center;
          font-weight: 500;
          position: relative;
          border: none;
          background-color: transparent;
          padding: 0;

          i {
            margin-left: 8px;

            body.rtl & {
              margin-left: unset;
              margin-right: 8px;
            }
          }

          &::after {
            display: none;
          }
        }

        +.dropdown {
          margin-left: 23px;

          body.rtl & {
            margin-left: unset;
            margin-right: 23px;
          }

          &::after {
            @include pos;
            @include center(vertical);
            @include pseudowh($width: 1px, $height: 25px);
            left: -10px;
            background-color: $border-color;

            body.rtl & {
              left: unset;
              right: -10px;
            }
          }
        }

        .dropdown-menu {
          min-width: 100%;

          li {
            display: block;
          }
        }
      }
    }

    .wishlist-box {
      display: flex;
      align-items: center;

      .header-icon {
        @include pseudowh($width: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))),
          $height: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))));
        @include flex_common;
        font-size: 18px;
        border: 1px solid $border-color;
        background-color: $white;
        border-radius: 100%;
        padding: 10px;
        position: relative;

        +.header-icon {
          margin-left: 38px;

          &::after {
            @include pos;
            @include center(vertical);
            @include pseudowh($width: 1px, $height: 100%);
            left: -50%;
            background-color: $border-color;
          }
        }

        &.swap-icon {
          margin-left: 0;

          &::after {
            content: none;
          }
        }

        &.bag-icon {
          display: block;

          @include mq-max(xs) {
            display: none;
          }
        }

        &.search-box {
          display: none;

          @include mq-max(xl) {
            display: flex;

            +.header-icon {
              margin-left: 38px;

              &::after {
                @include pos;
                @include center(vertical);
                @include pseudowh($width: 1px, $height: 100%);
                left: -50%;
                background-color: $border-color;
              }
            }
          }
        }

        .badge-number {
          @include pseudowh($width: 18px, $height: 18px);
          @include flex_common;
          position: absolute;
          top: -10px;
          right: 0;
          background: var(--theme-color);
          font-weight: 600;
          color: #ffffff;
          border-radius: 100%;
          font-size: 10px;
        }

        i {
          color: $black;
          font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));

          &.iconly-Swap {
            transform: rotate(90deg);
          }
        }
      }
    }

    .option-list {
      >ul {
        display: flex;

        body.rtl & {
          padding-right: 0;
        }

        >li {
          position: relative;

          &:nth-of-type(5n-4) {
            +li {
              margin-left: 0;

              body.rtl & {
                margin-left: unset;
                margin-right: 0;
              }

              &::after {
                content: none;
              }
            }
          }

          @include mq-max(xl) {
            &:nth-of-type(5n-3) {
              display: block;

              +li {
                margin-left: 22px;

                body.rtl & {
                  margin-left: unset;
                  margin-right: 22px;
                }

                &::after {
                  content: "";
                }
              }
            }
          }

          @include mq-max(md) {
            &:not(:nth-last-of-type(5n-5)) {
              display: none;
            }
          }

          +li {
            margin-left: 37px;

            body.rtl & {
              margin-left: unset;
              margin-right: 37px;
            }

            @include mq-max(3xl) {
              margin-left: 22px;

              body.rtl & {
                margin-left: unset;
                margin-right: 22px;
              }
            }

            &::after {
              @include pos($pos: absolute, $content: unset);
              @include center(vertical);
              @include pseudowh($width: 1px, $height: 80%);
              left: -20px;
              background-color: $border-color;

              body.rtl & {
                left: unset;
                right: -20px;
              }

              @include mq-max(3xl) {
                left: -13px;

                body.rtl & {
                  left: unset;
                  right: -13px;
                }
              }
            }
          }

          .header-icon {
            @include pseudowh($width: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))),
              $height: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))));
            @include flex_common;
            font-size: 18px;
            border: 1px solid $border-color;
            background-color: $white;
            border-radius: 100%;
            padding: 10px;
            position: relative;

            +.header-icon {
              margin-left: 38px;

              &::after {
                @include pos;
                @include center(vertical);
                @include pseudowh($width: 1px, $height: 100%);
                left: -50%;
                background-color: $border-color;
              }
            }

            &.swap-icon {
              margin-left: 0;

              &::after {
                content: none;
              }
            }

            &.bag-icon {
              @include mq-max(xs) {
                display: none;
              }
            }

            &.search-box {
              display: none;

              @include mq-max(xl) {
                display: flex;

                +.header-icon {
                  margin-left: 38px;

                  &::after {
                    @include pos;
                    @include center(vertical);
                    @include pseudowh($width: 1px, $height: 100%);
                    left: -50%;
                    background-color: $border-color;
                  }
                }
              }
            }

            .badge-number {
              @include pseudowh($width: 18px, $height: 18px);
              @include flex_common;
              position: absolute;
              top: -10px;
              right: 0;
              background-color: var(--theme-color);
              font-weight: 600;
              color: white;
              border-radius: 100%;
              font-size: 10px;
            }

            i {
              color: $black;
              font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));

              &.ri-arrow-left-right-line {
                transform: rotateY(-180deg);
              }
            }
          }

          &:nth-last-child(-n + 2) {
            &::after {
              content: "";
            }
          }
        }
      }
    }

    .option-list-2 {
      display: flex;

      >li {
        position: relative;

        .header-icon {
          @include pseudowh($width: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))),
            $height: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))));
          @include flex_common;
          font-size: 18px;
          border: 1px solid $border-color;
          background-color: $white;
          border-radius: 100%;
          padding: 10px;
          position: relative;

          +.header-icon {
            margin-left: 38px;

            &::after {
              @include pos;
              @include center(vertical);
              @include pseudowh($width: 1px, $height: 100%);
              left: -50%;
              background-color: $border-color;
            }
          }

          .badge-number {
            @include pseudowh($width: 18px, $height: 18px);
            @include flex_common;
            position: absolute;
            top: -10px;
            right: 0;
            background-color: var(--theme-color);
            font-weight: 600;
            color: white;
            border-radius: 100%;
            font-size: 10px;
          }

          i {
            color: $black;
            font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));

            &.iconly-Swap {
              transform: rotate(90deg);
            }
          }
        }

        .user-box {
          @include flex_wrap($dis: flex, $wrap: nowrap, $gap: 12px);
          align-items: center;

          &:hover {
            .user-name {
              h4 {
                color: var(--theme-color);
              }
            }
          }

          .user-name {
            @media (max-width: 1660px) {
              display: none;
            }
          }
        }

        +li {
          margin-left: 37px;

          body.rtl & {
            margin-left: unset;
            margin-right: 37px;
          }

          @include mq-max(4xl) {
            margin-left: 22px;

            body.rtl & {
              margin-left: unset;
              margin-right: 22px;
            }
          }

          &::after {
            @include pos;
            @include center(vertical);
            @include pseudowh($width: 1px, $height: 80%);
            left: -20px;
            background-color: $border-color;
            content: unset;

            body.rtl & {
              left: unset;
              right: -20px;
            }

            @include mq-max(4xl) {
              left: -13px;

              body.rtl & {
                left: unset;
                right: -13px;
              }
            }
          }
        }
      }
    }

    .mobile-app {
      border: 1px solid var(--theme-color);
      border-radius: 5px;
      padding: 16px 18px;
      display: flex;
      align-items: center;
      margin-left: 18px;

      body.rtl & {
        margin-left: unset;
        margin-right: 18px;
      }

      .mobile-image {
        margin-right: 11px;

        body.rtl & {
          margin-right: unset;
          margin-left: 11px;
        }

        img {
          @include pseudowh($width: 15px, $height: auto);
        }
      }
    }

    .dropdown-user {
      display: flex;
      align-items: center;

      .user-detail {
        margin-left: 15px;

        @include mq-max(2xl) {
          display: none;
        }

        h6 {
          color: $content-color;
          font-size: 14px;
          font-weight: 400;
          margin-bottom: 2px;
        }

        h5 {
          color: $title-color;
          font-size: 16px;
          margin-bottom: 0;
        }
      }
    }
  }

  .right-nav {
    float: right;
    display: flex;
    align-items: center;
    margin-left: auto;

    body.rtl & {
      margin-left: unset;
      margin-right: auto;
    }

    @include mq-max(2xl) {
      display: none;
    }

    .nav-number {
      display: flex;
      align-items: center;

      @include mq-max(4xl) {
        display: none;
      }

      img {
        @include pseudowh($width: 32px, $height: 32px);
      }

      span {
        font-size: calc(18px + (27 - 18) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 500;
        margin-bottom: 0;
        margin-left: 8px;

        body.rtl & {
          margin-left: unset;
          margin-right: 8px;
        }
      }
    }

    .fire-button {
      display: flex;
      align-items: center;
      padding: 11px 38px;
      overflow: hidden;

      span {
        color: $white;
        margin-left: 7px;
        font-size: 16px;
        font-weight: 600;

        body.rtl & {
          margin-left: unset;
          margin-right: 7px;
        }
      }

      .fire {
        margin-top: -3px;
        position: relative;
        @include pseudowh($width: 20px, $height: 20px);
        background-color: transparent;
        z-index: 1;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }

  .header-nav-left {
    position: relative;

    .dropdown-category {
      @include flex_common;
      border: none;
      background-color: transparent;
      padding: 9px calc(16px + (31 - 16) * ((100vw - 320px) / (1920 - 320))) 9px 0;
      position: relative;

      body.rtl & {
        padding: 9px 0 9px calc(16px + (31 - 16) * ((100vw - 320px) / (1920 - 320)));
      }

      @include mq-max(xl) {
        padding: 0;
        border: unset;
      }

      @include mq-max(md) {
        display: none;
      }

      &::after {
        @include pos;
        @include pseudowh($width: 1px, $height: 100%);
        top: 0;
        right: 0;
        background-color: $border-color;

        body.rtl & {
          right: unset;
          left: 0;
        }

        @include mq-max(xl) {
          content: unset;
        }
      }

      >div {
        @include flex_common;
      }

      i {
        font-size: 23px;
        color: var(--theme-color);
        margin-right: 10px;

        body.rtl & {
          margin-right: unset;
          margin-left: 10px;
        }
      }

      span {
        font-size: 16px;
      }
    }

    &:hover {
      .category-dropdown {
        opacity: 1;
        visibility: visible;
        top: 63px;

        @include mq-max(xl) {
          top: 50px;
        }
      }
    }

    .category-dropdown {
      position: absolute;
      top: 72px;
      left: 0;
      background-color: $white;
      box-shadow: 0 0 8px #ddd;
      z-index: 2;
      width: 270px;
      border-radius: 6px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease-in-out;

      body.rtl & {
        left: unset;
        right: 0;
      }

      @include mq-max(md) {
        @include pseudowh($width: calc(300px + (320 - 300) * ((100vw - 320px) / (1920 - 320))),
          $height: 100vh);
        position: fixed;
        top: 0;
        left: -320px;
        border-radius: 0;
        z-index: 10;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transition: all 0.3s ease-in-out;
        box-shadow: none;

        body.rtl & {
          left: unset;
          right: -320px;
        }

        &.show {
          left: 0;

          body.rtl & {
            left: unset;
            right: 0;
          }
        }

        &:hover {
          opacity: 1;
          visibility: visible;
          top: 0;
        }
      }

      .category-title {
        display: none;

        @include mq-max(md) {
          @include flex_common($dis: flex,
            $align: center,
            $justify: space-between);
          padding: 20px 24px;
          border-bottom: 1px solid $border-color;
          box-shadow: 0 2px 10px -3px rgba($title-color, 0.1);
        }

        h5 {
          color: var(--theme-color);
          font-weight: 600;
        }
      }

      .category-list {
        @include flex_wrap($dis: flex, $wrap: wrap, $gap: 25px);
        padding: 20px 25px;

        li {
          display: block;
          width: 100%;
          margin-bottom: 0;

          .category-name {
            display: flex;
            align-items: center;
            color: $content-color;

            &:hover {
              h6 {
                letter-spacing: 0.3px;

                &::before {
                  width: 65px;
                }
              }
            }

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

            h6 {
              font-size: 17px;
              font-weight: 500;
              position: relative;
              margin-left: 10px;
              transition: all 0.3s ease-in-out;

              body.rtl & {
                margin-left: unset;
                margin-right: 10px;
              }

              &:before {
                @include pos;
                @include pseudowh($width: 0, $height: 3px);
                bottom: 0;
                left: 0;
                background-color: var(--theme-color);
                opacity: 0.5;
                transition: all 0.3s ease-in-out;

                body.rtl & {
                  left: unset;
                  right: 0;
                }
              }
            }

            i {
              margin-left: auto;

              @include mq-max(md) {
                display: none;
              }

              body.rtl & {
                margin-left: unset;
                margin-right: auto;
              }
            }

            .according-menu {
              margin-left: auto;

              body.rtl & {
                margin-left: unset;
                margin-right: auto;
              }
            }
          }

          a {
            display: flex;
            align-items: center;
            color: $content-color;

            &:hover {
              h6 {
                letter-spacing: 0.3px;

                &::before {
                  width: 65px;
                }
              }
            }

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

            h6 {
              font-size: 17px;
              font-weight: 500;
              position: relative;
              margin-left: 10px;
              transition: all 0.3s ease-in-out;

              body.rtl & {
                margin-left: unset;
                margin-right: 10px;
              }

              &:before {
                @include pos;
                @include pseudowh($width: 0, $height: 3px);
                bottom: 0;
                left: 0;
                background-color: var(--theme-color);
                opacity: 0.5;
                transition: all 0.3s ease-in-out;
              }
            }

            i {
              margin-left: auto;

              body.rtl & {
                margin-left: unset;
                margin-right: auto;
              }
            }
          }
        }
      }
    }
  }

  .dropdown-list {
    @include flex_common;
    font-family: $public-sans;

    @include mq-max(md) {
      display: none;
    }

    li {
      &:last-child {
        margin-right: 0;
      }

      +li {
        .dropdown {
          margin-left: 20px;

          &::after {
            @include pos;
            @include center(vertical);
            @include pseudowh($width: 1px, $height: 80%);
            left: -12px;
            background-color: rgba($white, 0.4);
          }
        }
      }

      &:first-child {
        &::after {
          content: none;
        }
      }

      .dropdown {
        .dropdown-toggle {
          width: auto;
          display: block;
          background-color: transparent;
          border-radius: 5px;
          font-weight: 500;
          font-size: unset;

          &:after {
            content: none;
          }

          span {
            font-weight: 400;
          }

          .fa-chevron-down {
            margin-left: 10px;
          }
        }

        .dropdown-menu {
          .dropdown-list {
            display: block;

            +.dropdown-list {
              margin-top: 10px;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }

  .about-list {
    font-family: $public-sans;

    @include mq-max(lg) {
      display: none;
    }

    li {
      position: relative;
      margin-left: 15px;
      font-size: 12px;
      font-weight: 500;

      &:first-child {
        margin-left: 0;

        &::after {
          content: none;
        }
      }

      &::after {
        @include pos;
        @include center(vertical);
        @include pseudowh($width: 1px, $height: 70%);
        left: -8px;
        background-color: rgba($white, 0.4);
      }
    }
  }
}

header.header-3 {
  .main-nav {
    @include mq-max(xl) {
      padding: 0;
    }
  }
}

.header-3 {
  .navbar-top {
    @include flex_common($dis: flex,
      $align: center,
      $justify: unset !important);

    @include mq-max(xs) {
      justify-content: space-between;
    }

    .navbar-toggler {
      &:focus {
        box-shadow: none;
      }
    }

    .support-box {
      @include flex_wrap($dis: flex, $wrap: nowrap, $gap: 9px);
      align-items: flex-start;

      @media (max-width: 1432px) {
        display: none;
      }

      .support-image {
        img {
          @include pseudowh($width: 33px, $height: auto);
        }
      }

      .support-number {
        text-align: right;

        h2 {
          font-size: 25px;
          color: $white;
        }

        h4 {
          color: $white;
          margin-top: 4px;
          font-weight: 500;
          font-size: 16px;
        }
      }
    }
  }

  .search-box {
    display: none;

    @include mq-max(lg) {
      display: block;
      background-color: $white;
      padding: 6px;
      border-radius: 5px;
      border: 1px solid $content-color;
      text-align: right;
      margin-left: auto;

      a {
        @include flex_common;
        color: $black;

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

    @include mq-max(xs) {
      margin-left: unset;
    }
  }

  .dropdown-list {
    &.drop-state {
      margin-right: 20px;
      width: 100%;
      display: flex;
      align-items: center;

      @include mq-max(xl) {
        margin-right: 0;
      }
    }

    @include mq-max(lg) {
      background-color: transparent;
      margin: 0;
    }

    .location-icon {
      margin-right: 8px;
      display: flex;

      .iconly-Location {
        font-size: 25px;
      }
    }

    .dropdown {
      @include flex_common;

      .dropdown-toggle {
        padding-left: 0;
        font-size: 16px;
        display: flex;
        align-items: center;
        font-weight: 500;
        letter-spacing: 0.5px;
        position: relative;
        margin-top: 4px;

        &::after {
          display: none;
        }

        i {
          color: $black;
          margin-left: 5px;
        }
      }

      .dropdown-menu {
        min-width: 100%;

        li {
          display: block;
        }
      }
    }
  }

  .form-select {
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 0;
    font-family: $public-sans;
    color: $title-color;

    &:focus {
      border-color: transparent;
      box-shadow: none;
    }
  }

  .top-nav {
    padding: 22px 0 20px 0;
    background-color: var(--theme-color);

    @include mq-max(xl) {
      border-bottom: unset;
    }

    .navbar-top {
      @include mq-max(md) {
        justify-content: normal;
      }
    }

    span {
      color: $title-color;

      i {
        font-size: 25px;
        margin-top: 2px;
        color: #fff;
        -webkit-text-fill-color: #fff;
      }
    }

    .nav-logo {
      display: flex !important;
      font-size: calc(28px + (35 - 28) * ((100vw - 320px) / (1920 - 320)));
      color: var(--theme-color);
      font-weight: bolder;
      font-family: $public-sans;

      span {
        color: $title-color;
      }
    }

    .search-full {
      @include pseudowh($width: 0, $height: 0);
      background-color: $white;
      position: absolute;
      top: 40px;
      right: 0;
      z-index: 1;
      transform: scale(0);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;

      @include mq-max(2xs) {
        right: -5px;
      }

      .input-group {
        border: 1px solid #f0f3f8;
        box-shadow: 0px 3px 4px rgba($black, 0.14);

        .input-group-text {
          background-color: $white;
          border: none;
          color: $content-color;

          &.close-search {
            cursor: pointer;
          }
        }

        input {
          border: none;
          height: 50px;
        }
      }

      &.open {
        width: 100%;
        animation: zoomIn 0.5s ease-in-out;
        transform: scale(1);
        transition: all 0.3s ease;
        padding: 0 30px;

        @include mq-max(sm) {
          padding: 0 25px;
        }

        @include mq-max(xs) {
          padding: 0 15px;
        }

        @include mq-max(2xs) {
          @include center(horizontal);
          padding: 0;
          width: 95%;
        }
      }

      &.show {
        .search-suggestion {
          padding: 10px;
          border: 1px solid #f0f3f8;
          height: max-content;
          max-height: 500px;
          transition: max-height 1000ms cubic-bezier(0.27, 0.7, 0, 0.99);
        }
      }
    }

    .middle-box {
      display: inline-block;
      margin-left: calc(16px + (29 - 16) * ((100vw - 320px) / (1920 - 320)));

      body.rtl & {
        margin-left: unset;
        margin-right: calc(16px + (29 - 16) * ((100vw - 320px) / (1920 - 320)));
      }

      @media (max-width: 1432px) {
        margin-left: auto;
      }

      @include mq-max(2xl) {
        @include flex_common($dis: flex,
          $align: center,
          $justify: space-between);
        margin-left: 25px;
        float: right;
      }

      @include mq-max(xl) {
        margin-left: 15px;
      }

      @include mq-max(lg) {
        margin-left: auto;
      }

      .center-box {
        display: flex;
        align-items: center;
      }

      @include mq-max(md) {
        display: block !important;
      }

      .searchbar-box-2 {
        position: relative;
        display: flex;
        align-items: stretch;
        width: 853px;
        border: 1px solid var(--theme-color);
        border-radius: 5px;

        .search-suggestion-wrap {
          width: calc(100% - 44px);
        }

        @media (max-width: 1742px) {
          width: 800px;
        }

        @media (max-width: 1668px) {
          width: 760px;
        }

        @media (max-width: 1610px) {
          width: 710px;
        }

        @media (max-width: 1544px) {
          width: 670px;
        }

        @include mq-max(lg) {
          display: none;
        }

        >* {
          border-radius: 6px 0 0 6px !important;

          body.rtl & {
            border-radius: 0 6px 6px 0 !important;
          }
        }

        .search-button {
          background-color: #ffb803;
          height: 100%;
          font-weight: 500;
          border-radius: 0 6px 6px 0;

          body.rtl & {
            border-radius: 6px 0 0 6px;
          }
        }

        .search-icon {
          font-size: 18px;
          background-color: $white;
          padding-left: 16px;
          padding-right: 5px;
          border-radius: 6px 0 0 6px;

          body.rtl & {
            padding-left: 5px;
            padding-right: 16px;
            border-radius: 0 6px 6px 0;
          }

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

        input {
          height: auto;
          padding: 8px;
          color: $title-color;
          border: none;
          font-size: 16px;
          z-index: 0;
          border-radius: 0 !important;

          body.rtl & {
            border-radius: 0 !important;
          }

          &:focus {
            box-shadow: 0px 3px 4px rgba($black, 0.14);
          }

          &::placeholder {
            color: $content-color;
            font-size: 16px;
          }
        }
      }

      .location-box-2 {
        display: flex;
        align-items: center;
        margin-right: 20px;
        position: relative;

        body.rtl & {
          margin-right: unset;
          margin-left: 20px;
        }

        @include mq-max(xl) {
          margin-right: unset;
          margin-left: 0;
        }

        button {
          display: flex;
          align-items: center;
          padding: 0;

          &:focus {
            box-shadow: none;
          }

          i {
            margin-right: 9px;
            font-size: 22px;
            color: $white;

            body.rtl & {
              margin-right: unset;
              margin-left: 9px;
            }

            @include mq-max(lg) {
              @include flex_common;
              @include pseudowh($width: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))),
                $height: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))));
              margin-right: 0;
            }
          }

          span {
            font-size: 16px;
            color: $white;

            @include mq-max(lg) {
              display: none;
            }

            i {
              margin-right: 9px;
              font-size: 22px;

              body.rtl & {
                margin-right: unset;
                margin-left: 9px;
              }

              @media (max-width: 1556px) {
                margin-right: 0;
              }
            }
          }

          .down-arrow {
            margin-left: 10px;
            color: $white;

            body.rtl & {
              margin-left: unset;
              margin-right: 10px;
            }

            @include mq-max(lg) {
              display: none;
            }
          }
        }
      }
    }
  }

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

    &.support-sidemenu {
      @media (max-width: 1432px) {
        display: none;
      }
    }

    body.rtl & {
      margin-left: unset;
      margin-right: auto;
    }

    @include mq-max(xl) {
      position: absolute;
      top: -51px;
      right: 0;

      body.rtl & {
        right: unset;
        left: 0;
      }
    }

    @include mq-max(md) {
      top: -50px;
    }

    .dropdown-dollar {
      display: flex;
      align-items: center;
      margin-right: 22px;

      @include mq-max(lg) {
        display: none;
      }

      .dropdown {
        position: relative;
        z-index: 0;

        .dropdown-toggle {
          font-size: 16px;
          display: flex;
          align-items: center;
          font-weight: 500;
          position: relative;
          border: none;
          background-color: transparent;
          padding: 0;

          i {
            margin-left: 8px;

            body.rtl & {
              margin-left: unset;
              margin-right: 8px;
            }
          }

          &::after {
            display: none;
          }
        }

        +.dropdown {
          margin-left: 23px;

          body.rtl & {
            margin-left: unset;
            margin-right: 23px;
          }

          &::after {
            @include pos;
            @include center(vertical);
            @include pseudowh($width: 1px, $height: 25px);
            left: -10px;
            background-color: $border-color;

            body.rtl & {
              left: unset;
              right: -10px;
            }
          }
        }

        .dropdown-menu {
          min-width: 100%;

          li {
            display: block;
          }
        }
      }
    }

    .wishlist-box {
      display: flex;
      align-items: center;

      .header-icon {
        @include pseudowh($width: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))),
          $height: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))));
        @include flex_common;
        font-size: 18px;
        border: 1px solid $border-color;
        background-color: $white;
        border-radius: 100%;
        padding: 10px;
        position: relative;

        +.header-icon {
          margin-left: 38px;

          &::after {
            @include pos;
            @include center(vertical);
            @include pseudowh($width: 1px, $height: 100%);
            left: -50%;
            background-color: $border-color;
          }
        }

        &.swap-icon {
          margin-left: 0;

          &::after {
            content: none;
          }
        }

        &.bag-icon {
          display: block;

          @include mq-max(xs) {
            display: none;
          }
        }

        &.search-box {
          display: none;

          @include mq-max(xl) {
            display: flex;

            +.header-icon {
              margin-left: 38px;

              &::after {
                @include pos;
                @include center(vertical);
                @include pseudowh($width: 1px, $height: 100%);
                left: -50%;
                background-color: $border-color;
              }
            }
          }
        }

        .badge-number {
          @include pseudowh($width: 18px, $height: 18px);
          @include flex_common;
          position: absolute;
          top: -10px;
          right: 0;
          background: var(--theme-color);
          font-weight: 600;
          color: #ffffff;
          border-radius: 100%;
          font-size: 10px;
        }

        i {
          color: $black;
          font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));

          &.iconly-Swap {
            transform: rotate(90deg);
          }
        }
      }
    }

    .option-list-2 {
      display: flex;

      body.rtl & {
        padding-right: 0;
      }
      .delivery-login-box {
        .delivery-icon {
          .user-box{
            margin: 0;
          }
        }
      }

      >li {
        position: relative;

        &:nth-of-type(5n-4) {
          display: none;

          +li {
            margin-left: 0;

            body.rtl & {
              margin-left: unset;
              margin-right: 0;
            }

            &::after {
              content: none;
            }
          }
        }

        @include mq-max(xl) {
          &:nth-of-type(5n-4) {
            display: block;

            +li {
              margin-left: 22px;

              body.rtl & {
                margin-left: unset;
                margin-right: 22px;
              }

              &::after {
                content: "";
              }
            }
          }
        }

        @include mq-max(md) {
          &:not(:nth-last-of-type(5n-5)) {
            display: none;
          }
        }

        .header-icon {
          @include pseudowh($width: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))),
            $height: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))));
          @include flex_common;
          font-size: 18px;
          border: 1px solid $border-color;
          background-color: $white;
          border-radius: 100%;
          padding: 10px;
          position: relative;

          @include mq-max(xl) {
            border: none;
            background-color: transparent;
          }

          +.header-icon {
            margin-left: 38px;

            &::after {
              @include pos;
              @include center(vertical);
              @include pseudowh($width: 1px, $height: 100%);
              left: -50%;
              background-color: $border-color;
            }
          }

          .badge-number {
            @include pseudowh($width: 18px, $height: 18px);
            @include flex_common;
            position: absolute;
            top: -10px;
            right: 0;
            background-color: var(--theme-color);
            font-weight: 600;
            color: white;
            border-radius: 100%;
            font-size: 10px;
          }

          .badge-light {
            @include mq-max(xl) {
              background-color: $white;
              color: var(--theme-color);
              top: -3px;
            }
          }

          i {
            color: $black;
            font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));

            &.iconly-Swap {
              transform: rotate(90deg);
            }

            @include mq-max(xl) {
              color: white;
            }
          }
        }

        +li {
          margin-left: 37px;

          body.rtl & {
            margin-left: unset;
            margin-right: 37px;
          }

          @include mq-max(4xl) {
            margin-left: 22px;

            body.rtl & {
              margin-left: unset;
              margin-right: 22px;
            }
          }

          &::after {
            @include pos;
            @include center(vertical);
            @include pseudowh($width: 1px, $height: 80%);
            left: -20px;
            background-color: $border-color;

            body.rtl & {
              left: unset;
              right: -20px;
            }

            @include mq-max(4xl) {
              left: -13px;

              body.rtl & {
                left: unset;
                right: -13px;
              }
            }

            @include mq-max(xl) {
              background-color: rgba($white, 0.2);
            }
          }
        }
      }
    }

    .user-box {
      @include flex_wrap($dis: flex, $wrap: nowrap, $gap: 12px);
      align-items: center;
      margin-left: 37px;
      position: relative;

      body.rtl & {
        margin-left: unset;
        margin-right: 37px;
      }

      @include mq-max(4xl) {
        margin-left: 22px;

        body.rtl & {
          margin-left: unset;
          margin-right: 22px;
        }
      }

      @include mq-max(md) {
        margin-left: 0;

        body.rtl & {
          margin-left: unset;
          margin-right: 0;
        }
      }

      &::after {
        @include pos;
        @include center(vertical);
        @include pseudowh($width: 1px, $height: 80%);
        left: -20px;
        background-color: $border-color;

        body.rtl & {
          left: unset;
          right: -20px;
        }

        @include mq-max(4xl) {
          left: -13px;

          body.rtl & {
            left: unset;
            right: -13px;
          }
        }

        @include mq-max(xl) {
          background-color: rgba($white, 0.2);
        }

        @include mq-max(md) {
          content: none;
        }
      }

      .header-icon {
        @include pseudowh($width: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))),
          $height: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))));
        @include flex_common;
        font-size: 18px;
        border: 1px solid $border-color;
        background-color: $white;
        border-radius: 100%;
        padding: 10px;
        position: relative;

        @include mq-max(xl) {
          border: none;
          background-color: transparent;
        }

        .badge-number {
          @include pseudowh($width: 18px, $height: 18px);
          @include flex_common;
          position: absolute;
          top: -10px;
          right: 0;
          background-color: var(--theme-color);
          font-weight: 600;
          color: white;
          border-radius: 100%;
          font-size: 10px;
        }

        i {
          color: $black;
          font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));

          @include mq-max(xl) {
            color: $white;
          }
        }
      }

      &:hover {
        .user-name {
          h4 {
            color: var(--theme-color);
          }
        }
      }

      .user-name {
        @media (max-width: 1660px) {
          display: none;
        }
      }
    }

    .mobile-app {
      position: relative;
      border-radius: 5px;
      padding: 16px 18px;
      display: flex;
      overflow: hidden;
      align-items: center;
      margin-left: 18px;
      color: var(--theme-color);

      &::before {
        @include pos;
        @include pseudowh;
        top: 0;
        left: 0;
        background-color: var(--theme-color);
        opacity: 0.1;
        z-index: -1;
      }

      body.rtl & {
        margin-left: unset;
        margin-right: 18px;
      }

      .mobile-image {
        margin-right: 11px;

        body.rtl & {
          margin-right: unset;
          margin-left: 11px;
        }

        img {
          @include pseudowh($width: 15px, $height: auto);
        }
      }
    }

    .dropdown-user {
      display: flex;
      align-items: center;

      .user-detail {
        margin-left: 15px;

        @include mq-max(2xl) {
          display: none;
        }

        h6 {
          color: $content-color;
          font-size: 14px;
          font-weight: 400;
          margin-bottom: 2px;
        }

        h5 {
          color: $title-color;
          font-size: 16px;
          margin-bottom: 0;
        }
      }
    }
  }

  .right-nav {
    float: right;
    display: flex;
    align-items: center;
    margin-left: auto;

    body.rtl & {
      margin-left: unset;
      margin-right: auto;
    }

    @include mq-max(2xl) {
      display: none;
    }

    .nav-number {
      display: flex;
      align-items: center;

      @include mq-max(4xl) {
        display: none;
      }

      img {
        @include pseudowh($width: 32px, $height: 32px);
      }

      span {
        font-size: calc(18px + (27 - 18) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 500;
        margin-bottom: 0;
        margin-left: 8px;

        body.rtl & {
          margin-left: unset;
          margin-right: 8px;
        }
      }
    }

    .fire-button {
      display: flex;
      align-items: center;
      padding: 11px 38px;
      overflow: hidden;

      span {
        color: $white;
        margin-left: 7px;
        font-size: 16px;
        font-weight: 500;

        body.rtl & {
          margin-left: unset;
          margin-right: 7px;
        }
      }

      .fire {
        @include pseudowh($width: 20px, $height: 20px);
        position: relative;
        background-color: transparent;
        z-index: 1;
      }
    }
  }

  .dropdown-category {
    @include flex_common;
    border: none;
    background-color: transparent;
    padding: 9px calc(16px + (31 - 16) * ((100vw - 320px) / (1920 - 320))) 9px 0;
    position: relative;

    body.rtl & {
      padding: 9px 0 9px calc(16px + (31 - 16) * ((100vw - 320px) / (1920 - 320)));
    }

    @include mq-max(xl) {
      display: none;
    }

    &::after {
      @include pos;
      @include pseudowh($width: 1px, $height: 100%);
      top: 0;
      right: 0;
      background-color: $border-color;

      body.rtl & {
        right: unset;
        left: 0;
      }
    }

    i {
      font-size: 23px;
      color: var(--theme-color);
      margin-right: 10px;

      body.rtl & {
        margin-right: unset;
        margin-left: 10px;
      }
    }

    span {
      font-size: 16px;
      margin-top: 4px;
    }
  }

  .dropdown-list {
    @include flex_common;
    font-family: $public-sans;

    @include mq-max(md) {
      display: none;
    }

    li {
      &:last-child {
        margin-right: 0;
      }

      +li {
        .dropdown {
          margin-left: 20px;

          &::after {
            @include pos;
            @include center(vertical);
            @include pseudowh($width: 1px, $height: 80%);
            left: -12px;
            background-color: rgba($white, 0.4);
          }
        }
      }

      &:first-child {
        &::after {
          content: none;
        }
      }

      .dropdown {
        .dropdown-toggle {
          width: auto;
          display: block;
          background-color: transparent;
          border-radius: 5px;
          font-weight: 500;
          font-size: unset;

          &:after {
            content: none;
          }

          span {
            font-weight: 400;
          }

          .fa-chevron-down {
            margin-left: 10px;
          }
        }

        .dropdown-menu {
          .dropdown-list {
            display: block;

            +.dropdown-list {
              margin-top: 10px;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }

  .about-list {
    font-family: $public-sans;

    @include mq-max(lg) {
      display: none;
    }

    li {
      position: relative;
      margin-left: 15px;
      font-size: 12px;
      font-weight: 500;

      &:first-child {
        margin-left: 0;

        &::after {
          content: none;
        }
      }

      &::after {
        @include pos;
        @include center(vertical);
        @include pseudowh($width: 1px, $height: 70%);
        left: -8px;
        background-color: rgba($white, 0.4);
      }
    }
  }

  .navbar-expand-xl {
    .dropdown:hover {
      .dropdown-menu-2 {
        @media (min-width: 1200px) {
          transform: translateY(0);
          left: 0;
        }
      }
    }
  }

  .navbar-top {
    .navbar-toggler {
      .navbar-toggler-icon {
        i {
          line-height: 1;
          margin-top: 0;
        }
      }
    }
  }
}

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

  i {
    @include flex_common;
    font-size: 30px;
    color: var(--theme-color);
    width: 70px;
    height: 70px;
    border-radius: 100%;
    padding: 20px;
    margin: 0 auto 10px;
    position: relative;
    overflow: hidden;

    &:after {
      @include pos;
      @include pseudowh;
      background-color: var(--theme-color);
      opacity: 0.1;
      left: 0;
      top: 0;
    }
  }

  img {
    width: 35%;
    margin-bottom: 20px;
  }

  h5 {
    font-weight: 500;
  }
}

.user-box-name {
  @include flex_wrap($dis: flex, $wrap: wrap, $gap: 0);
  align-items: center;

  li {
    display: block;
    width: 100%;

    +li {
      padding-top: 8px;
      margin-top: 8px;
      border-top: 1px solid #eee;
    }

    a {
      color: $title-color;
      display: flex;
      align-items: center;
      position: relative;

      &:hover {
        &::after {
          width: 40%;
        }
      }

      &::after {
        @include pos;
        @include pseudowh($width: 0, $height: 4px);
        bottom: 2px;
        left: 0;
        background-color: var(--theme-color);
        opacity: 0.3;
        border-radius: 50px;
        transition: all 0.3s ease-in-out;
        z-index: -1;

        body.rtl & {
          left: unset;
          right: 0;
        }
      }
    }
  }
}

.search-suggestion-wrap {
  display: flex;
  z-index: 2;

  .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: $light-gray;
        color: $title-color !important;
        font-size: 14px !important;
        padding: 7px 12px !important;
        text-align: center;
        border-radius: 5px;
        transition: all 0.5s ease;
        text-transform: capitalize;
        cursor: pointer;

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

      &.filter-skeleton {
        .skeleton__p {
          height: 35px;
          width: 80px;
          border-radius: 5px;
          margin-bottom: 0;
          background-color: $light-gray;
          background-image: linear-gradient(90deg,
              rgba($white, 0),
              rgba($white, 0.5),
              rgba($white, 0));
          background-size: 40px 100%;
          background-repeat: no-repeat;
          background-position: left -40px top 0;
          animation: shine 1s ease infinite;

          html.rtl & {
            background-color: #1d1d22;
            background-image: linear-gradient(90deg,
                rgba(255, 255, 255, 0),
                rgb(44 44 44 / 50%),
                rgba(255, 255, 255, 0));
          }
        }
      }
    }
  }
}

.search-suggestion-box {
  position: absolute;
  width: 100%;
  background-color: $white;
  left: 0;
  top: 61px;
  z-index: 4;
  border: 1px solid $border-color;
  border-radius: 7px;
  padding: 13px 16px;
  padding-right: 8px;
  box-shadow: 0 0 9px rgba(221, 221, 221, 0.7019607843);

  html.dark & {
    border-color: rgba(119, 119, 119, 0.44);
    box-shadow: -1px 0 10px 0 rgba(137, 137, 137, 0.05),
      5px 20px 40px 0 rgba(137, 137, 137, 0.05);
  }

  .skeleton-ul {
    .result-item {
      &:hover {
        background-color: transparent;
      }
    }

    .suggestion-image {
      width: 50px;
      height: 50px;
      background-color: #f8f8f8;
    }

    .suggestion-category {
      >div {
        flex-direction: column;
        gap: 5px;
        align-items: flex-start;
        margin-top: 0;
      }

      p {
        height: 16px;
        width: 100px;
        border-radius: 5px;
        margin-bottom: 0;
        background-color: #f8f8f8;
        background-image: linear-gradient(90deg,
            rgba(#fff, 0),
            rgba(#fff, 0.5),
            rgba(#fff, 0));
        background-size: 40px 100%;
        background-repeat: no-repeat;
        background-position: left -40px top 0;
        animation: shine 1s ease infinite;
        display: block;

        &:last-child {
          width: 240px;
        }

        &::before {
          display: none;
        }
      }
    }
  }

  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: #fff;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #19a3887a;
      border-radius: 100px;
      border: 3px solid #fff;
    }

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

      a {
        color: $title-color;
        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: $content-color;
          position: relative;

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

        a {
          color: $title-color !important;
          font-weight: 500;
          font-size: 16px !important;
        }
      }
    }
  }

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

  .result-item {

    &:hover,
    &.selected {
      background-color: rgba(25, 163, 136, 0.1);
    }

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

  .highlight {
    color: red;
  }

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

    h5 {
      font-size: 16px;
      color: $content-color;

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

  .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: $light-gray;
        color: $title-color !important;
        font-size: 14px !important;
        padding: 7px 12px !important;
        text-align: center;
        border-radius: 5px;
        transition: all 0.5s ease;
        text-transform: capitalize;
        cursor: pointer;

        &:hover {
          background-color: var(--theme-color);
          color: #fff !important;
        }
      }

      &.filter-skeleton {
        .skeleton__p {
          height: 35px;
          width: 80px;
          border-radius: 5px;
          margin-bottom: 0;
          background-color: $light-gray;
          background-image: linear-gradient(90deg,
              rgba($white, 0),
              rgba($white, 0.5),
              rgba($white, 0));
          background-size: 40px 100%;
          background-repeat: no-repeat;
          background-position: left -40px top 0;
          animation: shine 1s ease infinite;
        }
      }
    }
  }
}

@keyframes shine {
  to {
    background-position: right -40px top 0;
  }
}