/**=====================
    category css
==========================**/
.category-box {
  background-color: $top-header;
  margin: 0px auto;
  display: block;
  width: 100%;
  text-align: center;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  border: 1px solid $white-dark;
  position: relative;
  padding: calc(15px + (28 - 15) * ((100vw - 320px) / (1920 - 320))) 8px;
  z-index: 0;

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

    &::after {
      opacity: 1;
    }

    img {
      filter: invert(1) brightness(100);
    }

    h5 {
      color: $white;
    }

    .background-image {
      filter: none;
      opacity: 1;
      visibility: visible;
    }
  }

  img {
    filter: invert(1) brightness(100);
  }

  h5 {
    color: $white;
  }

  .background-image {
    filter: none;
    opacity: 1;
    visibility: visible;
  }

  img {
    width: calc(38px + (55 - 38) * ((100vw - 320px) / (1920 - 320))) !important;
    height: calc(38px + (55 - 38) * ((100vw - 320px) / (1920 - 320)));
    object-fit: contain;
    margin: 0 auto;
    transition: all 0.3s ease-in-out;
  }

  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    visibility: hidden;
    opacity: 0;
    filter: none;
  }

  h5 {
    color: #555555;
    margin-top: 12px;
    font-weight: 500;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 0;
    position: relative;
  }
}

.category-block {
  .category-image {
    margin: 0 auto;
    text-align: center;
    border: 1px solid $round-border;
    border-radius: 100%;
    width: 80px;
    height: 80px;
    @include flex_common;
    transition: 0.5s ease;

    &.svg-image {
      background-color: $white;

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

      svg {
        width: 50px;
        fill: var(--theme-color);
      }
    }
  }

  .category-details {
    margin-top: 15px;
    text-align: center;

    h5 {
      font-weight: 700;
      margin: 0 auto;
      transition: 0.5s ease;
      text-transform: uppercase;
      font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
      margin-bottom: -4px;
    }

    h6 {
      margin-bottom: -6px;
      margin-top: -4px;
    }
  }

  &:hover {
    .category-image {
      background-color: var(--theme-color);
      transition: all 0.5s ease;

      img {
        filter: brightness(0) invert(1);
        transition: all 0.5s ease;
      }

      svg {
        fill: $white;
        transition: all 0.5s ease;
      }
    }

    .category-details {
      h5 {
        color: var(--theme-color);
        transition: all 0.5s ease;
      }
    }
  }
}

.category-border {
  background-color: $border-grey;
  padding: 20px 10px;

  .border-padding {
    padding: 0 10px;
  }

  div {
    .category-banner {
      padding: 0;
      position: relative;
      overflow: hidden;

      img,
      .bg-size {
        transform: scale(1);
        transition: 0.5s ease;
      }

      &:hover {

        img,
        .bg-size {
          transform: scale(1.1) translateX(14px);
          transition: 0.5s ease;
        }

        h2 {
          color: var(--theme-color);
          transition: 0.5s ease;
        }
      }

      .category-box {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        @include flex_common;
        background-color: transparent;

        h2 {
          background-color: $white;
          display: inline-block;
          padding: 20px 35px;
          margin-bottom: 0;
          box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.13);
          transition: 0.5s ease;
          font-size: calc(14px + (36 - 14) * ((100vw - 320px) / (1920 - 320)));
        }
      }
    }
  }
}

.category-bg {
  padding: 40px 50px;
  position: relative;
  z-index: 0;

  .image-block {
    img {
      width: 100%;
    }

    .video-sec {
      width: 100%;
      height: 48vh;
      position: relative;

      @media (max-width: 768px) {
        height: 38vh;
      }

      >div {
        position: absolute;
        z-index: -1;
        inset: 0px;
        overflow: hidden;
        background-size: cover;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: 0% 50%;
        background-image: none;
      }
    }

    &.even {
      &:after {
        bottom: 94%;
      }
    }

    &:after {
      content: "";
      position: absolute;
      background-color: var(--theme-color);
      height: 0;
      width: 40px;
      z-index: 1;
      right: 0;
      left: 0;
      margin: 0 auto;
      opacity: 0;
      transition: 0.5s ease;
      margin-top: -40px;
    }

    &:hover {
      &:after {
        opacity: 0.3;
        transition: 0.5s ease;
        height: 80px;
      }
    }
  }

  .contain-block {
    @include flex_common;
    text-align: center;
    height: 100%;
    background-color: $white;
    padding: 10px;

    &.even {
      &:after {
        top: 94%;
      }
    }

    &:after {
      content: "";
      position: absolute;
      background-color: var(--theme-color);
      height: 0;
      width: 40px;
      z-index: 1;
      right: 0;
      left: 0;
      margin: 0 auto;
      opacity: 0;
      transition: 0.5s ease;
      bottom: 94%;
    }

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

      h6 {
        span {
          color: var(--theme-color);
          transition: all 0.5s ease;
        }
      }

      .category-btn {
        background-image: linear-gradient(30deg, var(--theme-color) 50%, transparent 50%);
        border: 2px solid var(--theme-color);
        transition: all 0.5s ease;
      }

      &:after {
        opacity: 0.3;
        transition: all 0.5s ease;
        height: 80px;
      }
    }

    h2 {
      margin-bottom: 0;
      margin-top: 15px;
      transition: 0.5s ease;
      color: $dark-font;
      font-size: calc(16px + (36 - 16) * ((100vw - 320px) / (1920 - 320))) !important;

      @media (max-width: 991px) {
        font-size: 16px !important;
      }

      @media (max-width: 768px) {
        font-size: 14px !important;
      }
    }

    h6 {
      color: var(--theme-color);
      text-transform: uppercase;
      letter-spacing: 0.3em;
      line-height: 1;
      margin-bottom: 0;

      span {
        color: $grey-shade;
        letter-spacing: 0.03em;
        font-weight: 700;
        transition: all 0.5s ease;
      }
    }

    .category-btn {
      letter-spacing: 0.07em;
      margin-bottom: 25px;
      margin-top: 25px;
      transition: all 0.5s ease;
    }
  }

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

.category-m {
  .category-wrapper {
    border: 1px solid $border;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    margin-bottom: 1px;

    >div {

      &:after,
      &:before {
        content: "";
        width: 1px;
        height: 0;
        position: absolute;
        transition: all 0.2s linear;
        background: var(--theme-color);
        transition-delay: 0s;
      }

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

      &:after {
        right: 0;
        bottom: 0;
      }
    }

    .bg-size {
      max-width: 100px;
      margin: 0 auto;
    }

    &:after,
    &:before {
      content: "";
      width: 0;
      height: 1px;
      position: absolute;
      transition: all 0.2s linear;
      background: var(--theme-color);
    }

    &:before {
      right: 0;
      top: 0;
    }

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

    &:hover {
      transition: all 0.5s ease;

      &:after,
      &:before {
        transition-delay: 0s;
        width: 100%;
      }

      >div {

        &:after,
        &:before {
          transition-delay: 0.2s;
          height: 100%;
        }
      }
    }

    img {
      display: inline;
      height: 140px;
      width: auto;
    }

    h4 {
      text-transform: uppercase;
      color: $grey-dark;
      font-weight: 700;
      margin-bottom: 0;
      padding-bottom: 25px;
      padding-top: 25px;
      line-height: 1.3;

      a {
        color: $grey-dark;
      }
    }

    .btn {
      margin-top: 20px;
    }

    .category-link {
      li {
        display: block;
        text-transform: capitalize;
        margin-top: 5px;

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

        a {
          color: $grey-link;

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

  &.w-bg {
    .category-wrapper {
      background-color: $white;
      border-color: transparent;
      padding: calc(14px + (30 - 14) * ((100vw - 320px) / (1920 - 320)));

      h4 {
        padding-top: 0;
        font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));
      }

      .bg-size {
        margin: 20px auto 0;
      }

      img {
        width: 140px;
        margin: 20px auto 0;
        height: 140px;
        object-fit: contain;
      }
    }
  }
}

.background {
  background-color: $border-grey;
  padding: 20px 10px;
  margin: 0;

  .contain-bg {
    width: 100%;
    background-color: $white;
    padding-top: 45px;
    padding-bottom: 45px;
    text-align: center;
    transition: all 0.5s ease;
    position: relative;
    z-index: 1;

    &:after {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: var(--theme-color);
      opacity: 0;
      transition: all 0.5s ease;
    }

    h4 {
      color: $dark-font;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 0;
      transition: all 0.5s ease;
    }

    &:hover {
      &:after {
        opacity: 0.07;
        transition: all 0.5s ease;
      }

      h4 {
        color: var(--theme-color);
        transition: all 0.5s ease;
      }
    }
  }
}

.img-category {
  text-align: center;

  .img-sec {
    border-radius: 100%;
    margin: 0 auto;
    width: 85%;
    border: 3px solid $white;
    transition: all 0.5s ease;
    background-color: #ededed;
  }

  h4 {
    text-transform: capitalize;
    margin-top: 12px;
    color: $black;
    font-weight: 600;
    display: inline-block;
    position: relative;
    z-index: 1;
    margin-bottom: 0;

    a {
      color: $black;
    }
  }

  .pattern-bg {
    background-image: url("../../images/vector-pattern/1.jpg");
    border-radius: 100%;
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background-position: 0 0;
    background-repeat: repeat-y;
    transition: all 0.5s ease;

    .img-sec {
      width: 100%;
      border: none !important;
    }

    &.bg2 {
      background-image: url("../../images/vector-pattern/2.jpg");
    }

    &.bg3 {
      background-image: url("../../images/vector-pattern/3.jpg");
    }

    &.bg4 {
      background-image: url("../../images/vector-pattern/4.jpg");
    }

    &.bg5 {
      background-image: url("../../images/vector-pattern/5.jpg");
    }

    &.bg6 {
      background-image: url("../../images/vector-pattern/6.jpg");
    }
  }

  &:hover,
  &.hover-effect {
    .img-sec {
      border: 3px solid var(--theme-color);
      transition: all 0.5s ease;
    }

    .pattern-bg {
      animation: 15s linear 0s infinite normal none running animatedBackground2;
      transition: all 0.5s ease;
    }
  }
}

.deal-category {
  position: relative;

  .deal-content {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    transform: translate(-50%, -50%);
    background-color: $white;
    text-align: center;
    @include flex_common;
    padding: 16px;

    h2 {
      text-transform: capitalize;
      font-size: 23px;
      letter-spacing: unset;
      line-height: 1.3;

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

      @media (max-width: 1600px) {
        font-size: 16px;
      }
    }
  }
}

.gradient-category {
  text-align: center;
  margin-top: 18px;

  .gradient-border {
    background: #654ea3;
    background: linear-gradient(to right, var(--theme-color), var(--theme-color2));
    padding: 3px;
    width: 100%;
    height: 220px;
    position: relative;
    z-index: 1;
    transform: scale(0.94);

    .img-sec {
      background-color: $grey3;
      width: calc(100% - 1px);
      transition: all 0.5s ease;
      height: 100%;
      position: relative;
      z-index: 1;

      &:after {
        content: "";
        background-image: url("../../images/wave-bg.jpg");
        background-position: 0 0;
        background-repeat: repeat-y;
        width: 100%;
        height: 100%;
        animation: animatedBackground2 15s linear infinite;
        transition: all 0.5s ease;
        position: absolute;
        left: 0;
        opacity: 0;
        top: 0;
        z-index: -1;
      }

      img {
        position: absolute;
        left: 50%;
        bottom: 0;
        z-index: 1;
        transform: translateX(-50%);
        height: calc(100% + 35px);
        object-fit: contain;
      }
    }
  }

  h4 {
    text-transform: capitalize;
    margin-top: 12px;
    color: $black;
    font-weight: 600;
    display: inline-block;
    position: relative;
    z-index: 1;
    margin-bottom: 0;
  }

  &:hover,
  &.hover-effect {
    .gradient-border {
      .img-sec {
        &:after {
          opacity: 1;
          transition: all 0.5s ease;
        }
      }
    }
  }
}

.category-slide {
  .img-category {
    h4 {
      font-size: 14px;
    }

    .img-sec {
      width: 65%;
    }
  }
}

.vector-category {
  padding-top: 0;
  margin-top: -70px;

  .container {
    background-color: $white;
    position: relative;
    padding-top: 30px;
    box-shadow: 0 0 20px #f1f1f1;
    padding-bottom: 30px;
  }

  .category-slide {
    .img-category {
      .img-sec {
        width: 108px;
        height: 108px;
        @include flex_common;
        background-color: $top-header;
        border-radius: 0;

        img,
        svg {
          width: 60px;
        }
      }
    }
  }

  &.vector-style-2 {
    padding-top: 30px;
    margin-top: 0;
    box-shadow: 0 0 8px $round-border;
    padding-bottom: 40px;

    .container {
      padding: 0;
      box-shadow: none;
    }

    .category-slide {
      .img-category {
        @include flex_common;

        h4 {
          margin: 0;
          color: $dark-grey;
          font-weight: 500;
          font-size: 16px;
        }

        .img-sec {
          width: 58px;
          height: 58px;
          margin-inline: 0 22px;

          img {
            width: 35px;
          }
        }
      }
    }
  }
}

.category-img-wrapper {
  .category-wrap {
    .category-content {
      text-align: center;
      padding-top: 14px;

      .bg-size,
      img {
        filter: none;
        transition: all 0.5s ease;
      }

      h3 {
        font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
        color: $black;
        text-transform: capitalize;
        font-weight: 700;
        margin-bottom: calc(0px + (4 - 0) * ((100vw - 320px) / (1920 - 320)));
      }

      a {
        color: $dark-silver;
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
      }

      &.top-content {
        padding-top: 0;
        padding-bottom: 14px;
      }
    }

    &:hover {

      .bg-size,
      img {
        filter: saturate(0.3);
        transition: all 0.5s ease;
      }
    }
  }
}

.category-style-1 {
  .category-block {
    .category-image {
      width: 85%;
      height: auto;
      border: none;
      border-radius: 0;
      position: relative;
      z-index: 1;

      @media (max-width: 1199px) {
        width: 100%;
      }

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

      img {
        width: auto;
      }
    }

    &:hover {
      .category-image {
        background-color: transparent;

        img {
          filter: none;
        }
      }
    }
  }
}

.button-dark {
  &.category-button {
    .btn {
      color: $white;
      border: none !important;
      background-color: $dark-top;
      display: flex;
      align-items: center;
      transition: all 0.5s ease;

      &:before {
        display: none;
      }

      img {
        width: 35px;
        transition: all 0.5s ease;
        margin-right: 14px;
      }

      &:hover {
        background-color: $dark-top;
        transition: all 0.5s ease;
      }
    }
  }
}

.category-rounded {
  .category-block {
    .category-details {
      h5 {
        padding: 2px 14px;
        display: inline-block;
        background-color: var(--theme-color);
        border-radius: 15px;
        color: $white;
        margin-bottom: 0;
      }
    }

    .category-image {
      &.svg-image {
        border-radius: 10px;
      }
    }
  }
}

.category-width {
  .category-block {
    .category-image {
      img {
        width: 40px;
      }
    }
  }
}

.vegetables-category {
  .category-boxes {
    text-align: center;
    width: 100%;
    margin: 0 auto;
    background-color: $top-header;
    padding: 18px;

    .img-sec {
      width: 42%;
      margin: 0 auto 12px;
      height: calc(60px + (90 - 60) * ((100vw - 320px) / (1920 - 320)));
      object-fit: contain;
      @include flex_common;

      img {
        transition: all 0.5s ease;
      }

      .skeleton-img-sec {
        display: none;
      }
    }

    h4 {
      margin-bottom: 0;
      color: $dark-font;
      line-height: 1.4;
      font-size: 16px;
    }

    &:hover {
      .img-sec {
        img {
          transform: scale(1.1);
          transition: all 0.5s ease;
        }
      }
    }
  }
}

.left-header {
  .menu-left {
    ul {
      li {
        display: flex;

        a {
          padding: 10px 0 20px 0;
          background-color: $white;
          color: #222;
          font-size: 16px;
          font-weight: 400;
          line-height: 23px;
          text-decoration: none;
          text-transform: uppercase;
          letter-spacing: 0.07em;
          text-align: right;
          width: 100%;
        }
      }
    }
  }
}

.marketplace-sidebar {
  ul {
    li {
      display: flex;

      a {
        padding: 10px 30px 8px 30px;
        background-color: $white;
        color: #222;
        font-size: 16px;
        font-weight: 400;
        line-height: 23px;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        width: 100%;
      }
    }
  }
}

.category-nft {
  padding-bottom: 0;

  .category-block {
    border: 1px solid #ddd;
    display: block;
    width: max-content;
    padding: calc(8px + (12 - 8) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 0;
    margin: 0 auto;

    &:hover {
      background-color: $top-header;
      transition: all 0.5s ease;

      .category-details {
        h5 {
          color: var(--theme-color);
          transition: all 0.5s ease;
        }
      }
    }
  }

  .category-image {
    margin: 0 auto;
    text-align: center;
    border: unset;
    border-radius: 100%;
    width: 110px;
    height: 80px;
    @include flex_common;
    transition: 0.5s ease;
    border-radius: 0;
    overflow: hidden;

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

  .category-details {
    margin-top: 3px;
    text-align: center;

    h5 {
      font-weight: 600;
      margin: 0 auto;
      letter-spacing: 1.1px;
      transition: all 0.5s ease;
      text-transform: uppercase;
      font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    }

    a {
      padding: 0;
      border: unset;
      box-shadow: unset;
      margin-top: 11px;
    }

    h6 {
      margin-bottom: -6px;
      margin-top: -4px;
    }
  }
}