/*------ banner --------*/
.sec-hmbanner {
  line-height: 0;
  position: relative;
  height: 750px;
  overflow: hidden;
  & .js-hmbanner {
    height: 100%;
    & .slick-list,
    .slick-track,
    .slick-slide,
    .slick-slide > div {
      height: 100%;
    }
    & .slick-dots {
      bottom: 45px;
      margin: 0;
    }
    & li.slick-active button {
      background-color: var(--white);
      border: 0;
    }

    & .slick-prev {
      left: 20px;
    }
    & .slick-next {
      right: 20px;
    }
  }
}
.banner-overlay {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    to right,
    rgba(20, 44, 117, 0.75) 0%,
    rgba(20, 44, 117, 0.01) 99%,
    rgba(20, 44, 117, 0) 100%
  );
  & .container {
    width: 100%;
    & .banner-content {
      max-width: 680px;
      & .banner-heading,
      p {
        color: var(--white);
      }
      & .banner-heading {
        font-size: 52px;
        line-height: 1.2;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 25px;
        font-family: "Roboto Condensed";
      }
      & p {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 25px;
      }
      & .btnlist {
        justify-content: flex-start;
        margin: 0;
        gap: 15px;
        a:last-child {
          margin: 0;
        }
        & a.button {
          padding: 16px 22px;
          margin: 0;
        }
      }
    }
  }
}
.banner-item {
  position: relative;
  height: 100%;
  z-index: 1;
  & > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  &:not(:nth-child(-n + 1)) {
    display: none;
  }
}

.banner-video-item {
  position: relative;
  height: 100%;
  display: block;
  padding-bottom: 51.25%;
  width: 100%;
}
.banner-video-item video {
  position: absolute;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 1980px;
  width: 100%;
  min-width: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
  .small-banner {
    display: none;
  }
}
/* SHOP */
.shop-listing {
  margin-right: calc(-50vw + (100% - 390px) / 2);
  position: relative;
  margin-bottom: 50px;
  & .shop-block {
    margin-bottom: 50px;
  }
}
.shop-tab {
  position: relative;
  & .resp-tabs-list {
    position: absolute;
    right: 0;
    top: -100px;
  }
}
/*  Offer */
.get-offer-section {
  padding: 20px 0;
  & .coupon-wrap {
    display: inline-flex;
    flex: 1;
    align-items: center;
    border-left: 1px solid rgb(20 44 117 / 15%);
    padding-left: 30px;
    gap: 20px;
    flex-wrap: wrap;
    > a {
      font-size: 14px;
      text-decoration: underline;
      &:hover {
        color: var(--theme);
      }
    }
  }
  & p,
  label {
    font-size: 26px;
    color: var(--dark-blue);
    line-height: 1.2;
  }
  & .coupon-text {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 26px;
    color: var(--theme);
    padding: 10px 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--theme);
    border-radius: 5px;
  }
}

.get-offer-text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  width: 59%;
  & .offer-title {
    font-size: 32px;
    color: var(--theme);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-left: 15px;
  }
  & p {
    margin-left: 30px;
  }
}
/*------------media query-------*/
@media (max-width: 1899.98px) {
}

@media (max-width: 1599.98px) {
  .shop-tab {
    & .resp-tabs-list {
      position: relative;
      right: 0;
      top: inherit;
    }
  }

  .banner-overlay {
    & .container {
      & .banner-content {
        & .banner-heading {
          font-size: 46px;
        }
      }
    }
  }
  .get-offer-text {
    width: 65%;
  }
  .get-offer-section {
    & p,
    label {
      font-size: 22px;
    }
  }
}

@media (max-width: 1439.98px) {
  .sec-hmbanner {
    height: 700px;
  }
  .banner-overlay {
    & .container {
      & .banner-content {
        & .banner-heading {
          font-size: 40px;
        }
      }
    }
  }
  .get-offer-text {
    width: 60%;
    & .offer-title {
      font-size: 30px;
    }
    & p {
      margin-left: 97px;
    }
    & .coupon-wrap {
      padding-left: 30px;
    }
  }
  .get-offer-section {
    & .coupon-text {
      padding: 10px 16px;
    }
    & .coupon-wrap {
      padding-left: 20px;
      gap: 10px;
    }
  }
}

@media (max-width: 1199.98px) {
  .banner-overlay {
    & .container {
      & .banner-content {
        & .banner-heading {
          font-size: 36px;
        }
      }
    }
  }
  .sec-hmbanner {
    height: 600px;
    .js-hmbanner,
    .slick-list,
    .slick-track,
    slick-slide,
    .slick-slide > div,
    .banner-item {
      height: 100%;
    }
  }

  .get-offer-text {
    & .offer-title {
      font-size: 28px;
    }
  }
}

@media (max-width: 991.98px) {
  .sec-hmbanner {
    height: 550px;
  }
  .banner-item {
    text-align: center;
  }
  .banner-overlay {
    & .container {
      & .banner-content {
        & .btnlist {
          justify-content: center;
        }
      }
    }
  }
  .get-offer-section {
    & .coupon-text {
      font-size: 24px;
    }
  }

  .get-offer-text {
    > img {
      width: 50px;
    }
    & .offer-title {
      font-size: 22px;
    }
    & p {
      margin-left: 65px;
    }
    & p,
    label {
      font-size: 18px;
    }
  }
  .get-offer-section {
    & p,
    label {
      font-size: 18px;
    }
  }
  .shop-listing {
    margin-bottom: 40px;
  }
  .banner-overlay {
    & .container {
      & .banner-content {
        & .banner-heading {
          font-size: 32px;
        }
      }
    }
  }
  .get-offer-text {
    & .offer-title {
      font-size: 20px;
    }
  }
}

@media (max-width: 767.98px) {
  .sec-hmbanner {
    height: 500px;
  }
  .desk-banner {
    display: none !important;
  }
  .banner-overlay {
    & .container {
      & .banner-content {
        & .banner-heading {
          font-size: 28px;
        }
      }
    }
  }
  .shop-tab {
    & .resp-tabs-list {
      overflow-x: scroll;
      display: flex !important;
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-y: hidden;
      padding-bottom: 10px;
      & li {
        min-width: 165px;
        text-align: center;
      }
    }
  }
  .get-offer-text {
    justify-content: center;
    width: 100%;
  }
  .get-offer-section {
    & .coupon-wrap {
      padding-left: 0;
      border-left: 0;
      margin-top: 15px;
      justify-content: center;
    }
    & .coupon-text {
      font-size: 20px;
    }
  }
  .get-offer-section {
    & p,
    label {
      font-size: 16px;
    }
  }
  .shop-listing {
    margin-bottom: 30px;
  }
}

@media (max-width: 575.98px) {
  .sec-hmbanner {
    height: 450px;
  }

  .get-offer-section {
    justify-content: center;
    & .coupon-wrap {
      margin-top: 15px;
    }
    & .coupon-text {
      font-size: 16px;
      padding: 6px 10px;
    }
  }
  .get-offer-text {
    justify-content: center;
    & > img {
      width: 40px;
      display: block;
      margin-bottom: 0;
      margin-right: 10px;
    }

    & .offer-title {
      font-size: 22px;
      letter-spacing: 0.3px;
    }
    & p {
      margin-left: 0px;
    }
    & p,
    label {
      font-size: 16px;
    }
  }
  .get-offer-text {
    & .offer-title {
      font-size: 18px;
      margin-left: 0px;
    }
  }
  .banner-overlay {
    & .container {
      & .banner-content {
        & .banner-heading {
          margin-bottom: 15px;
        }
        & p {
          font-size: 16px;
          margin-bottom: 20px;
        }
        & .banner-heading {
          font-size: 24px;
        }
        & .btnlist {
          & a.button {
            padding: 10px 15px;
          }
        }
      }
    }
  }
  .get-offer-section {
    & p,
    label {
      font-size: 16px;
    }
  }
}

.dark-bg.content-wrapper ul li {
  color: var(--white);
}
.woocommerce ul.products[class*="columns-"] .slick-slide li.product {
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  display: flex !important;
  flex-wrap: wrap;
}

@media (max-width: 1599.98px) {
}

@media (max-width: 1439.98px) {
}
@media (max-width: 1199.98px) {
}
@media (max-width: 991.98px) {
}
@media (max-width: 767.98px) {
}
@media (max-width: 576.98px) {
}