@charset "UTF-8";
/*
  Template Name: Grocee - Organic Food HTML Template
  Author Name: Hook theme
  Author URL: https://themeforest.net/user/hooktheme
  Version: 1.0.0

  ----------------------------
  [Table of contents CSS] 
  ----------------------------

    1. Base CSS
    2. Header css
    3. Slider css
    4. Banner css 
    5. Product card css 
    6. Categories css
    7. Shipping css
    8. Blog css
    9. Testimonial css
    10. Brand logo css
    11. Accordion css
    12. Footer css 
    13. Quickview css
    14. Small Product css
    15. Single Product css 
    16. Product details css 
    17. Shop page css 
    18. Search filter css
    19. Privacy policy css
    20. Preloader css 
    21. Portfolio css
    22. Newsletter css 
    23. Newsletter popup css
    24. My account page css 
    25. Login page css
    26. Faq page css 
    27. Counterup css here
    28. Contact page css
    29. Compare page css 
    30. Checkout Page Css
    31. Cart page css
    32. Breadcrumb css 
    33. Blog details css
    34. About page css
    35. Error 404 page css 



/* 
    5. Product card css 
*/
.tab__btn--wrapper {
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media only screen and (min-width: 992px) {
  .tab__btn--wrapper {
    gap: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .tab__btn--wrapper {
    gap: 2.5rem;
  }
}

.tab__btn--link {
  font-weight: 600;
  font-family: var(--inter-fonts);
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--foreground-sub-color);
  padding: 3px 10px;
  border: 0;
  background: var(--body-background-color);
  border-radius: 5px;
  line-height: 2.4rem;
}

@media only screen and (min-width: 992px) {
  .tab__btn--link {
    font-size: 1.4rem;
    padding: 3px 12px;
    line-height: 2.6rem;
  }
}

.tab__btn--link:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
  text-decoration: underline;
}

.tab__btn--link.active {
  background: var(--secondary-color);
  color: var(--text-white-color);
  text-decoration: underline;
}

.product__card {
  border: 1px solid var(--border-color);
  border-radius: 5px;
}

.product__card:hover .product__card--thumbnail__img {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

.product__card:hover .product__secondary--img {
  opacity: 1;
  visibility: visible;
}

.product__card:hover .product__primary--img {
  opacity: 0;
  visibility: hidden;
}

.product__card:hover .swiper__nav--btn {
  opacity: 1;
  visibility: visible;
}

.product__card:hover .product__card--action {
  opacity: 1;
  visibility: visible;
  bottom: 35%;
}

.product__card:hover .product__card--action__btn {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.product__card:hover .product__card--price {
  opacity: 0;
  visibility: hidden;
}

.product__card:hover .product__card--footer {
  opacity: 1;
  visibility: visible;
  bottom: -15px;
}

.product__card--thumbnail {
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) {
  .product__card--thumbnail {
    padding: 2rem 2.5rem;
  }
}

.product__card--thumbnail__link {
  position: relative;
}

.product__card--thumbnail__img {
  width: 100%;
}

.product__card--content {
  padding: 0 1.5rem 2rem;
  position: relative;
}

@media only screen and (min-width: 1200px) {
  .product__card--content {
    padding: 0 2rem 2rem;
  }
}

.product__card--title {
  margin-bottom: 0.8rem;
}

@media only screen and (max-width: 479px) {
  .product__card--title {
    margin-bottom: 0.6rem;
    font-size: 1.6rem;
    line-height: 2.2rem;
  }
}

.product__card--footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  padding: 0 2rem 2rem;
  background: var(--body-background-color);
}

.product__card--footer::before {
  position: absolute;
  content: "";
  border: 1px solid var(--border-color);
  left: -1px;
  bottom: 0;
  right: -2px;
  border-top: 0;
  width: 101%;
  height: 100%;
  border-radius: 0 0 5px 5px;
  pointer-events: none;
}

.product__card--btn {
  text-transform: uppercase;
  font-size: 1.2rem;
  display: block;
  height: 3.5rem;
  line-height: 3.5rem;
  border-radius: 5px;
  text-align: center;
  padding: 0 1.5rem;
}

.product__card--btn svg {
  margin-right: 3px;
}

@media only screen and (min-width: 992px) {
  .product__card--btn {
    height: 3.8rem;
    line-height: 3.8rem;
    padding: 0 2rem;
  }
}

.product__card--action {
  position: absolute;
  left: 50%;
  -webkit-transform: translatex(-50%);
          transform: translatex(-50%);
  opacity: 0;
  visibility: visible;
  z-index: 9;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  bottom: 30%;
  gap: 0.8rem;
}

.product__card--action__btn {
  width: 3rem;
  height: 3rem;
  line-height: 2.8rem;
  color: var(--foreground-sub-color);
  background: var(--body-background-color);
  border-radius: 50%;
  text-align: center;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.product__card--action__btn:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}

@media only screen and (min-width: 576px) {
  .product__card--action__btn {
    width: 3.5rem;
    height: 3.5rem;
    line-height: 3.3rem;
  }
}

@media only screen and (min-width: 992px) {
  .product__card--action__btn {
    width: 4rem;
    height: 4rem;
    line-height: 3.8rem;
  }
}

.product__card--rating {
  margin-bottom: 1.1rem;
}

.product__card--price {
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.product__badge {
  width: 4rem;
  height: 4rem;
  font-size: 1.2rem;
  line-height: 4rem;
  background: var(--secondary-color);
  color: var(--text-white-color);
  font-family: var(--inter-fonts);
  position: absolute;
  top: 12px;
  right: 12px;
  text-align: center;
  border-radius: 50%;
}

.product__secondary--img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.current__price {
  color: var(--secondary-color);
  font-weight: 600;
  line-height: 1.8rem;
  font-family: var(--inter-fonts);
}

.old__price {
  color: var(--foreground-sub-color);
  margin-left: 0.8rem;
  line-height: 1.8rem;
  font-family: var(--inter-fonts);
}

.rating {
  gap: 0.5rem;
}

.rating__icon {
  color: var(--secondary-color);
}

.rating__review--text {
  font-size: 1.2rem;
  font-family: var(--inter-fonts);
  color: var(--foreground-sub-color);
}

/*
  home three product css
*/
.product__tab--btn__style3 {
  margin-top: 2.5rem;
}

@media only screen and (min-width: 768px) {
  .product__tab--btn__style3 {
    margin-top: 3rem;
  }
}

.product__tab--btn__style3 .tab__btn--link {
  background: var(--bg-offwhite-color);
  padding: 8px 2.4rem;
  border-radius: 20px;
  font-weight: 500;
  text-transform: capitalize;
}

.product__tab--btn__style3 .tab__btn--link.active {
  background: var(--secondary-color);
  text-decoration: inherit;
}

.product__tab--btn__style3 .tab__btn--link:hover {
  background: var(--secondary-color);
  text-decoration: inherit;
}

/*
  home four product css here
*/
.deals__product--card {
  border: 1px solid var(--secondary-color);
  padding: 2rem 1.5rem;
  border-radius: 5px;
}

@media only screen and (max-width: 991px) {
  .deals__product--card {
    margin-top: 3rem;
  }
}

.deals__product--card__thumbnail {
  margin-bottom: 2.2rem;
}

.deals__product--card__thumbnail--img {
  margin: 0 auto;
}

.deals__product--title {
  margin-bottom: 1.4rem;
}

.hurryup__text {
  font-size: 1.4rem;
}

.hurryup__text span {
  color: var(--secondary-color);
  font-weight: 600;
}

/* 
    14. Small Product css 
*/
.product__sidebar {
  border: 1px solid var(--secondary-color);
  background: var(--body-background-color);
  border-radius: 5px;
}

@media only screen and (max-width: 991px) {
  .product__sidebar {
    margin-top: 3rem;
  }
}

.small__product--header {
  background: var(--secondary-color);
}

.small__product--header__title {
  color: var(--text-white-color);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 4.5rem;
  padding: 0 1.8rem;
}

@media only screen and (min-width: 1200px) {
  .small__product--header__title {
    font-size: 1.8rem;
  }
}

.small__product--inner {
  padding: 0.3rem 1.2rem 1.2rem;
  max-height: 463px;
}

@media only screen and (min-width: 1200px) {
  .small__product--inner {
    padding: 0.5rem 1.5rem 1.5rem;
  }
}

@media only screen and (min-width: 1366px) {
  .small__product--inner {
    padding: 0.4rem 1.7rem 1.7rem;
  }
}

.small__product--inner .swiper-slide-active .small__product--card {
  border-top: 0;
}

.small__product--thumbnail {
  overflow: hidden;
}

@media only screen and (max-width: 1199px) {
  .small__product--thumbnail {
    width: 63px;
  }
}

@media only screen and (max-width: 767px) {
  .small__product--thumbnail {
    width: 85px;
  }
}

.small__product--card {
  gap: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
}

@media only screen and (min-width: 768px) {
  .small__product--card {
    gap: 1.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .small__product--card {
    gap: 1.5rem;
  }
}

@media only screen and (min-width: 1366px) {
  .small__product--card {
    gap: 2rem;
  }
}

.small__product--card:hover .small__product--thumbnail img {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

.small__product--card__title {
  margin-bottom: 0.3rem;
  font-size: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .small__product--card__title {
    font-size: 1.5rem;
  }
}

.small__product--card__price {
  margin-bottom: 0.4rem;
}

.small__product--card.style2 {
  gap: 2rem;
  padding: 1.5rem;
  border: 1px solid transparent;
  background: var(--body-background-color);
  border-radius: 5px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

@media only screen and (min-width: 576px) {
  .small__product--card.style2 {
    padding: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .small__product--card.style2 {
    gap: 3rem;
  }
}

.small__product--card.style2:hover {
  border-color: var(--secondary-color);
}

.small__product--card.style2 .small__product--rating {
  margin-bottom: 8px;
}

.small__product--swiper__btn {
  position: absolute;
  top: 35px;
  padding: 0;
  height: auto;
  right: 8px;
  width: auto;
  color: var(--text-white-color);
}

.small__product--swiper__btn::after {
  display: none;
}

.small__product--swiper__btn.swiper-button-prev {
  right: 34px;
  left: auto;
}

.small__product--swiper__btn.swiper-button-disabled {
  opacity: .55;
}

.small__product--section__bg {
  background: url(../img/banner/small-product-sectio-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

/* 
    15. Single Product css 
*/
.deal__section--bg {
  background: url(../img/banner/deal-section-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

.product__badge.style__left {
  left: 1rem;
  right: auto;
}

.product__badge--new {
  background: var(--secondary-color);
  color: var(--text-white-color);
  font-family: var(--inter-fonts);
  font-weight: 600;
  text-align: center;
  width: 5.2rem;
  height: 2.2rem;
  line-height: 2.2rem;
  font-size: 1.2rem;
  position: absolute;
  top: 1.2rem;
  right: 1.3rem;
  border-radius: 3px;
}

.single__product--wrapper {
  background: var(--body-background-color);
  border: 1px solid var(--secondary-color);
  padding: 2rem;
  border-radius: 5px;
}

@media only screen and (min-width: 768px) {
  .single__product--wrapper {
    padding: 2.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .single__product--wrapper {
    padding: 3rem 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .single__product--wrapper {
    padding: 3rem;
  }
}

.single__product--wrapper:hover .single__product--thumbnail__img {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

.single__product--wrapper:hover .swiper__nav--btn {
  opacity: 1;
  visibility: visible;
}

.single__product--topbar {
  gap: 2rem;
  margin-bottom: 2.5rem;
}

@media only screen and (min-width: 576px) {
  .single__product--topbar {
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 768px) {
  .single__product--topbar {
    gap: 3rem;
  }
}

@media only screen and (max-width: 575px) {
  .single__product--topbar {
    gap: 2.5rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.single__product--thumbnail {
  position: relative;
  overflow: hidden;
}

.single__product--thumbnail__preview {
  width: 100%;
}

@media only screen and (min-width: 576px) {
  .single__product--thumbnail__preview {
    width: 250px;
  }
}

@media only screen and (min-width: 768px) {
  .single__product--thumbnail__preview {
    width: 357px;
  }
}

.single__product--content {
  width: 100%;
}

@media only screen and (min-width: 576px) {
  .single__product--content {
    width: calc(100% - 250px);
  }
}

@media only screen and (min-width: 768px) {
  .single__product--content {
    width: calc(100% - 357px);
  }
}

@media only screen and (max-width: 575px) {
  .single__product--content {
    text-align: center;
  }
}

@media only screen and (max-width: 575px) {
  .single__product--content .product__card--rating {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.single__product--action {
  margin-top: 1.5rem;
  gap: 1rem;
}

@media only screen and (min-width: 768px) {
  .single__product--action {
    bottom: 3rem;
  }
}

@media only screen and (max-width: 575px) {
  .single__product--action {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.single__product--action__btn {
  width: 3.5rem;
  height: 3.4rem;
  line-height: 3rem;
  text-align: center;
  color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  border-radius: 5px;
}

.single__product--action__btn:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}

.single__product--cart__btn {
  height: 3.4rem;
  line-height: 3.4rem;
  padding: 0 1.5rem;
  background: var(--primary-color);
  font-size: 1.2rem;
  font-family: var(--inter-fonts);
  font-weight: 600;
  text-transform: capitalize;
  color: var(--text-white-color);
  border-radius: 5px;
}

.single__product--cart__btn:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}

.single__product--title {
  margin: 1.5rem 0;
}

.single__product--countdown {
  gap: 1.2rem;
}

@media only screen and (min-width: 768px) {
  .single__product--countdown {
    gap: 1.5rem;
  }
}

@media only screen and (max-width: 575px) {
  .single__product--countdown {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.single__product--countdown .countdown__item:hover .countdown__number {
  background: var(--secondary-color);
  color: var(--text-white-color);
}

.single__product--countdown .countdown__number {
  width: 4.5rem;
  height: 3.7rem;
  line-height: 3.7rem;
  background: var(--bg-offwhite-color);
  font-size: 1.4rem;
  font-family: var(--inter-fonts);
  font-weight: 600;
  text-align: center;
  border-radius: 3px;
}

.single__product--countdown .countdown__text {
  font-size: 1.4rem;
  font-family: var(--inter-fonts);
  font-weight: 500;
  color: var(--foreground-sub-color);
  text-align: center;
  text-transform: capitalize;
}

.product__sold {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  padding-bottom: 1.8rem;
  margin: 1.2rem 0 2rem;
}

@media only screen and (min-width: 576px) {
  .product__sold {
    padding-bottom: 2.1rem;
    margin: 1.5rem 0 2.2rem;
  }
}

.product__sold::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1.2rem;
  background: var(--bg-offwhite-color);
  left: 0;
  bottom: 0;
  border-radius: 3px;
}

.product__sold::after {
  position: absolute;
  content: "";
  width: 85%;
  height: 1.2rem;
  background: var(--secondary-color);
  left: 0;
  bottom: 0;
  border-radius: 3px;
}

.product__sold--text {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 500;
  font-family: var(--inter-fonts);
  color: var(--foreground-sub-color);
}

.product__sold--text__number {
  color: var(--body-text-color);
}

.single__product--nav {
  padding: 0 1.5rem;
}

.single__product--nav__items {
  border: 1px solid var(--border-color);
  padding: 1rem;
  cursor: pointer;
  border-radius: 5px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.single__product--nav__items:hover {
  border-color: var(--secondary-color);
}

@media only screen and (min-width: 768px) {
  .single__product--nav__items {
    padding: 1.3rem;
  }
}

.single__product--nav__thumbnail {
  margin: 0 auto;
}

.single__product--nav .swiper-slide-active .single__product--nav__items {
  border-color: var(--secondary-color);
}

/* 
    4. Banner css 
*/
.banner__items {
  border-radius: 5px;
}

.banner__thumbnail {
  overflow: hidden;
  width: 100%;
  border-radius: 5px;
}

.banner__thumbnail--img {
  width: 100%;
  border-radius: 5px;
}

.banner__thumbnail:hover .banner__thumbnail--img {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

.banner__content {
  position: absolute;
  top: 50%;
  left: 3rem;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  cursor: pointer;
  display: inline-block;
}

@media only screen and (min-width: 992px) {
  .banner__content {
    left: 5rem;
  }
}

.banner__content.right {
  right: 3rem;
  left: auto;
  text-align: center;
}

@media only screen and (min-width: 480px) {
  .banner__content.right {
    right: 5rem;
  }
}

.banner__content.style__right {
  right: 3rem;
  left: auto;
}

.banner__content.style__top {
  top: 3rem;
  -webkit-transform: inherit;
          transform: inherit;
  left: 2.5rem;
}

.banner__content--subtitle {
  font-family: var(--inter-fonts);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

@media only screen and (max-width: 991px) {
  .banner__content--subtitle {
    line-height: 2rem;
  }
}

.banner__content--title {
  color: var(--text-white-color);
  margin-bottom: 1rem;
}

@media only screen and (min-width: 992px) {
  .banner__content--title {
    margin-bottom: 10px;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__content--title {
    margin-bottom: 12px;
  }
}

@media only screen and (max-width: 991px) {
  .banner__content--title {
    line-height: 2.4rem;
    font-size: 1.7rem;
  }
}

.banner__content--title__inner {
  color: var(--secondary-color);
}

.banner__content--price {
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 600;
  color: var(--text-white-color);
  font-family: var(--inter-fonts);
  display: block;
}

@media only screen and (min-width: 992px) {
  .banner__content--price {
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__content--price {
    font-size: 2rem;
    line-height: 2.2rem;
  }
}

.banner__content--btn {
  font-weight: 700;
  color: var(--text-white-color);
  margin-top: 0.5rem;
  font-size: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .banner__content--btn {
    margin-top: 1rem;
    font-size: 1.5rem;
  }
}

.banner__content--btn svg {
  margin-left: 0.5rem;
}

.banner__content--btn:hover {
  color: var(--secondary-color);
}

.banner__badge {
  position: absolute;
  background: var(--secondary-color);
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  top: 50%;
  right: 2rem;
  width: 6rem;
  height: 6rem;
  padding: 7px;
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-family: var(--inter-fonts);
  font-weight: 500;
  color: var(--text-white-color);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

@media only screen and (min-width: 992px) {
  .banner__badge {
    right: 5rem;
  }
}

@media only screen and (max-width: 479px) {
  .banner__badge {
    display: none;
  }
}

.banner__badge::before {
  position: absolute;
  content: "";
  border: 1px dashed var(--body-background-color);
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  opacity: 0.6;
}

.banner__badge--style2 {
  -webkit-clip-path: polygon(0 19%, 97% 19%, 85% 49%, 100% 82%, 0 82%, 14% 51%);
  clip-path: polygon(0 19%, 97% 19%, 85% 49%, 100% 82%, 0 82%, 14% 51%);
  background: var(--secondary-color);
  color: var(--text-white-color);
  font-size: 1.1rem;
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 0.6rem;
}

@media only screen and (max-width: 767px) {
  .banner__sidebar {
    margin-top: 3rem;
  }
}

.banner__sidebar--badge {
  -webkit-transform: inherit;
          transform: inherit;
  bottom: -8px;
  right: -80px;
  top: auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__max--height {
    height: 160px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

@media only screen and (max-width: 479px) {
  .banner__max--height {
    height: 150px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

/*
    discount banner css here
*/
.discount__banner--thumbnail__img {
  height: 5.3rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.discount__banner--text {
  font-size: 1.6rem;
  font-weight: 600;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

@media only screen and (min-width: 992px) {
  .discount__banner--text {
    font-size: 1.8rem;
  }
}

@media only screen and (max-width: 479px) {
  .discount__banner--text {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}

/*
    home two banner css here
*/
.banner__content--style {
  right: 5rem;
  left: auto;
}

.banner__content--style .banner__content--subtitle {
  font-size: 1.2rem;
  line-height: 2rem;
  text-transform: uppercase;
}

.banner__content--style .banner__content--btn {
  font-weight: 600;
  line-height: 2rem;
  color: var(--secondary-color);
  text-decoration: underline;
}

.discount__banner--content {
  position: absolute;
  left: 2rem;
  top: 50%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

@media only screen and (min-width: 576px) {
  .discount__banner--content {
    left: 4rem;
  }
}

@media only screen and (min-width: 992px) {
  .discount__banner--content {
    left: 7rem;
  }
}

.discount__banner--content__subtitle {
  font-size: 1.4rem;
  line-height: 2rem;
  font-family: var(--inter-fonts);
  text-transform: uppercase;
  color: var(--body-text-color);
  margin-bottom: 1rem;
}

@media only screen and (min-width: 768px) {
  .discount__banner--content__subtitle {
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin-bottom: 1.3rem;
  }
}

@media only screen and (min-width: 992px) {
  .discount__banner--content__subtitle {
    margin-bottom: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .discount__banner--content__subtitle {
    font-size: 2rem;
    line-height: 2.4rem;
    margin-bottom: 1.8rem;
  }
}

.discount__banner--content__title {
  font-size: 2rem;
  line-height: 3rem;
  text-transform: uppercase;
  margin-bottom: 1.8rem;
}

@media only screen and (min-width: 768px) {
  .discount__banner--content__title {
    font-size: 2.5rem;
    line-height: 3rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 768px) {
  .discount__banner--content__title {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .discount__banner--content__title {
    font-size: 3.5rem;
    line-height: 4rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .discount__banner--content__title {
    font-size: 4.5rem;
    line-height: 5rem;
    margin-bottom: 3rem;
  }
}

@media only screen and (max-width: 991px) {
  .banner__sidebar.style2 {
    margin-top: 3rem;
  }
}

@media only screen and (max-width: 575px) {
  .discount__banner--img__height {
    height: 200px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

/*
    home 3 banner css
*/
.banner__content--style3 {
  left: 2.5rem;
}

@media only screen and (min-width: 576px) {
  .banner__content--style3 {
    left: 3.2rem;
  }
}

.banner__content--style3__subtitle {
  font-size: 1.1rem;
  line-height: 1.8rem;
  font-family: var(--inter-fonts);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

@media only screen and (min-width: 576px) {
  .banner__content--style3__subtitle {
    font-size: 1.2rem;
  }
}

.banner__content--style3__title {
  font-family: var(--rubik-fonts);
  font-size: 1.8rem;
  line-height: 2rem;
  margin-bottom: 1rem;
}

@media only screen and (min-width: 576px) {
  .banner__content--style3__title {
    font-size: 2rem;
    line-height: 2.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__content--style3__title {
    font-size: 2.3rem;
    line-height: 2.5rem;
    margin-bottom: 1.2rem;
  }
}

.banner__content--style3__btn {
  font-size: 1.3rem;
  line-height: 2rem;
  font-weight: 600;
  font-family: var(--inter-fonts);
  color: var(--text-white-color);
  border-bottom: 1px solid var(--text-white-color);
}

@media only screen and (min-width: 576px) {
  .banner__content--style3__btn {
    font-size: 1.4rem;
  }
}

/*
    video banner css here
*/
@media only screen and (max-width: 991px) {
  .banner__video--inner {
    padding-right: 170px;
  }
}

@media only screen and (max-width: 767px) {
  .banner__video--inner {
    padding-right: 0;
  }
}

.image__width--text {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  background: -webkit-gradient(linear, left top, right top, from(#FF5E03), to(#ED1D24));
  background: linear-gradient(to right, #FF5E03, #ED1D24);
  padding: 3.5rem 2.5rem;
  border-radius: 5px;
}

@media only screen and (min-width: 768px) {
  .image__width--text {
    width: 400px;
    padding: 3rem 2.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .image__width--text {
    width: 500px;
    padding: 5rem 3.5rem;
  }
}

@media only screen and (max-width: 767px) {
  .image__width--text {
    position: inherit;
    width: 100%;
    top: inherit;
    -webkit-transform: inherit;
            transform: inherit;
    margin-top: 3rem;
  }
}

.image__width--text__title {
  font-family: var(--rubik-fonts);
  color: var(--text-white-color);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 1200px) {
  .image__width--text__title {
    font-size: 3.5rem;
    line-height: 4.5rem;
    margin-bottom: 2rem;
  }
}

.image__width--text__desc {
  font-size: 1.4rem;
  color: var(--text-white-color);
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 1200px) {
  .image__width--text__desc {
    margin-bottom: 1.8rem;
  }
}

.image__width--text__btn {
  float: right;
  font-weight: 700;
  color: var(--text-white-color);
}

.image__width--text__btn:hover {
  color: var(--primary-color);
}

.banner__video--play {
  position: absolute;
  bottom: 3rem;
  left: 3rem;
  color: var(--text-white-color);
  font-size: 1.4rem;
  font-weight: 600;
}

.banner__video--play svg {
  margin-right: 4px;
}

/*
    home 4 banner css
*/
.banner__content--style4 {
  position: absolute;
  top: 50%;
  left: 3rem;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

.banner__content--style4.right {
  right: 4rem;
  left: auto;
}

.banner__content--style4__subtitle {
  font-weight: 600;
  color: var(--text-white-color);
  text-transform: uppercase;
  font-size: 1.3rem;
  line-height: 2rem;
  margin-bottom: 1rem;
}

@media only screen and (min-width: 576px) {
  .banner__content--style4__subtitle {
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__content--style4__subtitle {
    font-size: 1.5rem;
    line-height: 2.2rem;
    margin-bottom: 1.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__content--style4__subtitle {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
  }
}

@media only screen and (min-width: 1366px) {
  .banner__content--style4__subtitle {
    font-size: 1.8rem;
    line-height: 2.5rem;
  }
}

.banner__content--style4__subtitle span {
  color: var(--secondary-color);
}

.banner__content--style4__title {
  font-size: 1.8rem;
  line-height: 2.2rem;
  font-family: var(--rubik-fonts);
  color: var(--text-white-color);
  margin-bottom: 1.2rem;
}

@media only screen and (min-width: 576px) {
  .banner__content--style4__title {
    font-size: 2.2rem;
    line-height: 2.4rem;
    margin-bottom: 1.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__content--style4__title {
    font-size: 2.8rem;
    line-height: 3rem;
    margin-bottom: 1.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__content--style4__title {
    font-size: 3.2rem;
    line-height: 3.5rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 1366px) {
  .banner__content--style4__title {
    font-size: 4rem;
    line-height: 4rem;
  }
}

.banner__content--style4__title span {
  color: var(--secondary-color);
}

.banner__content--style4__title.font__style {
  font-size: 1.6rem;
  line-height: 2rem;
}

@media only screen and (min-width: 576px) {
  .banner__content--style4__title.font__style {
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__content--style4__title.font__style {
    font-size: 2.2rem;
    line-height: 2.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__content--style4__title.font__style {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}

@media only screen and (min-width: 1366px) {
  .banner__content--style4__title.font__style {
    font-size: 3rem;
    line-height: 3rem;
  }
}

.banner__content--style4__title2 {
  color: var(--text-white-color);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 2rem;
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 576px) {
  .banner__content--style4__title2 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__content--style4__title2 {
    font-size: 1.8rem;
    line-height: 2rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__content--style4__title2 {
    font-size: 2rem;
    line-height: 2rem;
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 1366px) {
  .banner__content--style4__title2 {
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-bottom: 4rem;
  }
}

.banner__content--style4__title2.font__style2 {
  font-size: 1.3rem;
  line-height: 2rem;
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 576px) {
  .banner__content--style4__title2.font__style2 {
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__content--style4__title2.font__style2 {
    font-size: 1.6rem;
    margin-bottom: 2.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__content--style4__title2.font__style2 {
    font-size: 1.8rem;
    line-height: 2.2rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1366px) {
  .banner__content--style4__title2.font__style2 {
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 3rem;
  }
}

@media only screen and (max-width: 479px) {
  .banner__content--style4__title2.font__style2 {
    display: none;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner__max--height4 {
    height: 450px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

@media only screen and (max-width: 479px) {
  .banner__max--height4 {
    height: 210px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.banner__content--style4__badge {
  font-size: 1.3rem;
  line-height: 2rem;
  background: var(--secondary-color);
  color: var(--text-white-color);
  font-family: var(--inter-fonts);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 992px) {
  .banner__content--style4__badge {
    font-size: 1.4rem;
    line-height: 2.2rem;
    padding: 3px 8px;
    margin-bottom: 2rem;
  }
}

@media only screen and (max-width: 479px) {
  .banner__content--style4__badge {
    display: none;
  }
}

.banner__price--style4 {
  margin-bottom: 1.2rem;
}

@media only screen and (min-width: 480px) {
  .banner__price--style4 {
    margin-bottom: 1.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__price--style4 {
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__price--style4 {
    margin-bottom: 2rem;
  }
}

.banner__content--style4__btn {
  font-size: 1.4rem;
  line-height: 3.8rem;
  height: 3.8rem;
  padding: 0 2.2rem;
}

@media only screen and (max-width: 767px) {
  .banner__content--style4__btn {
    line-height: 3.5rem;
    height: 3.5rem;
    padding: 0 1.8rem;
  }
}

/*
    home 5 banner css
*/
@media only screen and (max-width: 991px) {
  .banner__sidebar.style5 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 3rem;
    margin-top: 3rem;
  }
}

@media only screen and (max-width: 479px) {
  .banner__sidebar.style5 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

@media only screen and (max-width: 991px) {
  .banner__sidebar.style5 .banner__items.mb-30 {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 479px) {
  .banner__sidebar.style5 .banner__items {
    width: 100%;
  }
}

.banner__content--style5 {
  position: absolute;
  left: 2.5rem;
  top: 2rem;
}

@media only screen and (min-width: 1200px) {
  .banner__content--style5 {
    top: 3rem;
  }
}

.banner__content--style5.right {
  right: 2.5rem;
  left: auto;
}

.banner__content--style5__subtitle {
  font-size: 1.4rem;
  line-height: 2rem;
  margin-bottom: 0.5rem;
}

.banner__content--style5__title {
  font-family: var(--rubik-fonts);
  font-weight: 600;
}

.banner__content--style5__btn {
  color: var(--text-white-color);
  font-size: 1.3rem;
  text-transform: uppercase;
  line-height: 1.8rem;
  border-bottom: 1px solid var(--body-background-color);
  margin-top: 1rem;
}

.banner__content--style5__btn:hover {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

@media only screen and (min-width: 1200px) {
  .banner__content--style5__btn {
    font-size: 1.4rem;
    margin-top: 1.5rem;
  }
}

/* 
    8. Blog css
*/
.blog__section--inner {
  padding: 2px;
}

.view__all--link {
  font-size: 1.4rem;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
  line-height: 2rem;
}

@media only screen and (min-width: 576px) {
  .view__all--link {
    font-size: 1.6rem;
  }
}

.view__all--link::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background: var(--secondary-color);
  bottom: -13px;
  left: 0;
}

.blog__card {
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  position: relative;
}

@media only screen and (min-width: 768px) {
  .blog__card {
    padding: 2rem;
  }
}

.blog__card::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(#FCEEF2), to(#F5F5FE));
  background: linear-gradient(to top, #FCEEF2, #F5F5FE);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}

.blog__card:hover {
  border-color: var(--secondary-color);
}

.blog__card:hover::before {
  opacity: 1;
  visibility: visible;
}

.blog__card:hover .blog__card--social {
  opacity: 1;
  visibility: visible;
}

.blog__card:hover .blog__card--social .social__share--icon {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.blog__card:hover .blog__card--thumbnail__img {
  -webkit-transform: scale(1.06) rotate(2deg);
          transform: scale(1.06) rotate(2deg);
}

.blog__card--thumbnail {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

.blog__card--thumbnail__link {
  display: block;
  width: 100%;
}

.blog__card--thumbnail__img {
  width: 100%;
}

.blog__card--meta {
  font-size: 1.2rem;
  line-height: 2rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--foreground-sub-color);
  font-family: var(--inter-fonts);
  margin-bottom: 0.7rem;
}

.blog__card--meta__date {
  width: 5rem;
  height: 4.5rem;
  font-size: 1.3rem;
  font-weight: 600;
  background: var(--secondary-color);
  border-radius: 5px;
  color: var(--text-white-color);
  line-height: 1.7rem;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 12px;
  left: 12px;
}

@media only screen and (min-width: 768px) {
  .blog__card--meta__date {
    width: 6rem;
    height: 5rem;
    font-size: 1.5rem;
    line-height: 1.8rem;
  }
}

.blog__card--desc {
  color: var(--foreground-sub-color);
  margin-bottom: 1.2rem;
}

.blog__card--title {
  font-size: 1.7rem;
  line-height: 2.5rem;
  margin-bottom: 1rem;
}

@media only screen and (min-width: 480px) {
  .blog__card--title {
    font-size: 1.8rem;
    line-height: 2.6rem;
  }
}

@media only screen and (min-width: 1366px) {
  .blog__card--title {
    font-size: 2rem;
    line-height: 2.8rem;
    margin-bottom: 1.1rem;
  }
}

.blog__card--footer {
  gap: 2rem;
}

.blog__card--content {
  padding: 1.5rem 0 0;
}

.blog__card--btn__link {
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--inter-fonts);
}

.blog__card--btn__link svg {
  margin-left: 0.3rem;
}

.blog__card--social {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.blog__card--social .social__share--icon {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

/* 
    9. Testimonial css
*/
.testimonial__items--content {
  text-align: center;
}

.testimonial__items--thumbnail {
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  border: 1px solid var(--secondary-color);
  border-radius: 50%;
  opacity: 0.5;
}

.testimonial__items--desc {
  font-size: 1.5rem;
  line-height: 2.8rem;
  color: var(--body-text-color);
  max-width: 100%;
  margin: 0 auto 1.5rem;
}

@media only screen and (min-width: 576px) {
  .testimonial__items--desc {
    font-size: 1.6rem;
    line-height: 2.8rem;
    max-width: 85%;
    margin: 0 auto 1.8rem;
  }
}

@media only screen and (min-width: 992px) {
  .testimonial__items--desc {
    max-width: 64%;
  }
}

.testimonial__items--subtitle {
  font-size: 1.6rem;
  color: var(--foreground-sub-color);
}

.swiper-slide-active .testimonial__items--thumbnail {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.testimonial__active--two {
  margin-top: 2rem;
}

@media only screen and (min-width: 768px) {
  .testimonial__active--two {
    margin-top: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .testimonial__active--two {
    margin-top: 3rem;
  }
}

.testimonial__rating {
  margin-bottom: 1.5rem;
}

/* 
    7. Shipping css
*/
.shipping__inner {
  border: 1px solid var(--bg-light-dark-color);
  border-radius: 5px;
  margin-bottom: 5rem;
}

@media only screen and (max-width: 991px) {
  .shipping__inner {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 10px 0;
  }
}

@media only screen and (max-width: 575px) {
  .shipping__inner {
    gap: 1rem;
  }
}

.shipping__items {
  gap: 1.5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: auto;
  padding: 1rem;
  position: relative;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

@media only screen and (min-width: 576px) {
  .shipping__items {
    padding: 1.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .shipping__items {
    width: 25%;
    padding: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .shipping__items {
    gap: 1.7rem;
    padding: 2rem;
  }
}

.shipping__items::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 48px;
  background: var(--bg-light-dark-color);
  right: 0;
  top: 50%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

@media only screen and (max-width: 991px) {
  .shipping__items::before {
    display: none;
  }
}

.shipping__items:last-child::before {
  display: none;
}

.shipping__items:hover {
  background: var(--bg-light-dark-color);
}

.shipping__content--title {
  margin-bottom: 4px;
}

.shipping__content--desc {
  color: var(--foreground-sub-color);
  font-size: 1.4rem;
  line-height: 2rem;
  font-family: var(--inter-fonts);
}

/*
    home two shipping css
*/
.shipping__inner.style2 {
  border: 1px solid var(--border-color);
}

.shipping__items.style2::before {
  background: var(--border-color);
}

.shipping__items.style2:hover {
  background: var(--bg-offwhite-color);
}

/* 
    22. Newsletter css 
*/
.newsletter__area {
  padding-bottom: 4.2rem;
  border-bottom: 1px solid var(--bg-light-dark-color);
}

.newsletter__inner {
  gap: 3rem;
}

@media only screen and (max-width: 991px) {
  .newsletter__inner {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2.5rem;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
}

@media only screen and (max-width: 991px) {
  .newsletter__content {
    text-align: center;
  }
}

.newsletter__title {
  font-size: 2rem;
  line-height: 3rem;
  color: var(--text-white-color);
  margin-bottom: 0.8rem;
}

@media only screen and (min-width: 480px) {
  .newsletter__title {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 576px) {
  .newsletter__title {
    font-size: 2.5rem;
    line-height: 3.2rem;
  }
}

@media only screen and (min-width: 992px) {
  .newsletter__title {
    font-size: 3rem;
    line-height: 3.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .newsletter__title {
    font-size: 3.4rem;
    line-height: 4rem;
  }
}

@media only screen and (min-width: 1366px) {
  .newsletter__title {
    font-size: 3.6rem;
  }
}

.newsletter__desc {
  color: var(--foreground-sub-color);
}

@media only screen and (max-width: 575px) {
  .newsletter__subscribe {
    width: 100%;
  }
}

.newsletter__subscribe--form {
  width: 100%;
  position: relative;
}

@media only screen and (max-width: 575px) {
  .newsletter__subscribe--form {
    margin: 0 auto;
  }
}

@media only screen and (min-width: 480px) {
  .newsletter__subscribe--form {
    width: 90%;
  }
}

@media only screen and (min-width: 576px) {
  .newsletter__subscribe--form {
    width: 470px;
  }
}

@media only screen and (min-width: 1200px) {
  .newsletter__subscribe--form {
    width: 560px;
  }
}

.newsletter__subscribe--form input::-webkit-input-placeholder {
  color: var(--foreground-sub-color);
}

.newsletter__subscribe--form input::-moz-placeholder {
  color: var(--foreground-sub-color);
}

.newsletter__subscribe--form input:-ms-input-placeholder {
  color: var(--foreground-sub-color);
}

.newsletter__subscribe--form input:-moz-placeholder {
  color: var(--foreground-sub-color);
}

.newsletter__subscribe--input {
  width: 100%;
  height: 4.5rem;
  border: 1px solid transparent;
  color: var(--foreground-sub-color);
  background: var(--bg-light-dark-color);
  font-weight: 500;
  font-family: var(--inter-fonts);
  border-radius: 5px;
  padding: 0 130px 0 1.5rem;
}

.newsletter__subscribe--input:focus {
  border-color: var(--secondary-color);
  color: var(--text-white-color);
}

@media only screen and (min-width: 480px) {
  .newsletter__subscribe--input {
    padding: 0 140px 0 2rem;
    height: 4.8rem;
  }
}

@media only screen and (min-width: 992px) {
  .newsletter__subscribe--input {
    height: 5.5rem;
    padding: 0 155px 0 2rem;
  }
}

.newsletter__subscribe--button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border: 0;
  background: var(--secondary-color);
  padding: 0 1rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-white-color);
  border-radius: 0 5px 5px 0;
}

.newsletter__subscribe--button:hover {
  background: var(--body-background-color);
  color: var(--foreground-color);
}

@media only screen and (min-width: 576px) {
  .newsletter__subscribe--button {
    padding: 0 1.2rem;
    font-size: 1.3rem;
  }
}

@media only screen and (min-width: 992px) {
  .newsletter__subscribe--button {
    padding: 0 1.6rem;
    font-size: 1.4rem;
  }
}

/* 

/* 
    18. Search filter css
*/
.search__filter--area {
  padding: 2rem 1.5rem;
  border: 1px solid var(--secondary-color);
  border-radius: 5px;
  background: var(--body-background-color);
}

@media only screen and (min-width: 1200px) {
  .search__filter--area {
    padding: 2.5rem 1.8rem;
  }
}

@media only screen and (min-width: 1366px) {
  .search__filter--area {
    padding: 3rem 1.8rem;
  }
}

@media only screen and (max-width: 991px) {
  .search__filter--area {
    margin-top: 5rem;
  }
}

.search__filter--header {
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 1200px) {
  .search__filter--header {
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 1366px) {
  .search__filter--header {
    margin-bottom: 2.5rem;
  }
}

.search__filter--header__icon {
  min-width: 2.4rem;
}

.search__filter--title {
  font-size: 1.8rem;
  line-height: 2.2rem;
  margin-bottom: 0.8rem;
}

@media only screen and (min-width: 1200px) {
  .search__filter--title {
    font-size: 2rem;
    line-height: 2.2rem;
    margin-bottom: 1rem;
  }
}

@media only screen and (min-width: 1366px) {
  .search__filter--title {
    margin-bottom: 1.3rem;
  }
}

.search__filter--desc {
  font-size: 1.3rem;
  line-height: 2.3rem;
  color: var(--foreground-sub-color);
}

@media only screen and (min-width: 1200px) {
  .search__filter--desc {
    font-size: 1.4rem;
    line-height: 2.5rem;
  }
}

.search__filter--btn {
  width: 100%;
  height: 4rem;
  line-height: 4rem;
  border-radius: 5px;
}

@media only screen and (min-width: 1200px) {
  .search__filter--btn {
    height: 4.2rem;
    line-height: 4.2rem;
  }
}

@media only screen and (min-width: 1366px) {
  .search__filter--btn {
    height: 4.4rem;
    line-height: 4.4rem;
  }
}

.search__filter--select {
  margin-bottom: 1.2rem;
}

@media only screen and (min-width: 1200px) {
  .search__filter--select {
    margin-bottom: 1.7rem;
  }
}

@media only screen and (min-width: 1366px) {
  .search__filter--select {
    margin-bottom: 1.9rem;
  }
}

.search__filter--select:last-child {
  margin-bottom: 0;
}

.search__filter--select__field {
  width: 100%;
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
  -webkit-appearance: none;
  height: 4rem;
  font-size: 1.4rem;
  padding: 0 3.4rem 0 1.7rem;
  border-radius: 5px;
  cursor: pointer;
}

@media only screen and (min-width: 1200px) {
  .search__filter--select__field {
    font-size: 1.5rem;
    height: 4.2rem;
  }
}

@media only screen and (min-width: 1366px) {
  .search__filter--select__field {
    height: 4.4rem;
  }
}

/*
    home 3 search filter css
*/
.search__filter--inner {
  background: -webkit-gradient(linear, left top, right top, from(#FAEEF2), to(#F1F3FB));
  background: linear-gradient(to right, #FAEEF2, #F1F3FB);
  padding: 3rem 2rem;
  border-radius: 5px;
}

@media only screen and (min-width: 576px) {
  .search__filter--inner {
    padding: 3rem 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .search__filter--inner {
    padding: 3.3rem;
  }
}

.search__filter--form__style2 {
  gap: 2rem;
}

@media only screen and (min-width: 1200px) {
  .search__filter--form__style2 {
    gap: 3rem;
  }
}

@media only screen and (max-width: 991px) {
  .search__filter--form__style2 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.search__filter--width {
  width: 100%;
  margin-bottom: 0;
}

@media only screen and (min-width: 400px) {
  .search__filter--width {
    width: 46%;
  }
}

@media only screen and (min-width: 576px) {
  .search__filter--width {
    width: 30.2%;
  }
}

@media only screen and (min-width: 768px) {
  .search__filter--width {
    width: 22.8%;
  }
}

@media only screen and (min-width: 992px) {
  .search__filter--width {
    width: 16.66%;
  }
}

/*
    home 5 search filter css
*/
.search__filter--style5 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

@media only screen and (max-width: 991px) {
  .search__filter--style5 {
    position: inherit;
    padding-top: 5rem;
  }
}

@media only screen and (max-width: 767px) {
  .search__filter--style5 {
    padding-top: 3.6rem;
  }
}

.search__filter--inner.style5 {
  background: -webkit-gradient(linear, left top, right top, from(#fbd4df), to(#dee3f9));
  background: linear-gradient(to right, #fbd4df, #dee3f9);
}

/* 
    11. Accordion css
*/
.accordion__items.active {
  margin-bottom: 20px;
}

.accordion__items.active:last-child {
  margin-bottom: 0;
}

.accordion__items.active .accordion__items--button__icon {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  top: 28%;
  -webkit-transition: .4s;
  transition: .4s;
}

.accordion__items--body {
  display: none;
  padding: 0 20px;
}

.accordion__items--body__desc {
  font-size: 1.5rem;
  line-height: 2.8rem;
}

.accordion__items--button {
  border: 0;
  background: var(--body-background-color);
  width: 100%;
  padding: 13px 50px 13px 15px;
  text-align: left;
  margin-bottom: 15px;
  font-size: 1.5rem;
  font-weight: 600;
  position: relative;
}

@media only screen and (min-width: 576px) {
  .accordion__items--button {
    padding: 13px 60px 13px 25px;
  }
}

@media only screen and (min-width: 992px) {
  .accordion__items--button {
    padding: 15px 70px 15px 35px;
  }
}

@media only screen and (min-width: 1200px) {
  .accordion__items--button {
    padding: 24px 80px 24px 40px;
  }
}

.accordion__items--button__icon {
  width: 3rem;
  height: 3rem;
  background: var(--secondary-color);
  color: var(--text-white-color);
  padding: 5px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  -webkit-transition: .4s;
  transition: .4s;
}

@media only screen and (min-width: 768px) {
  .accordion__items--button__icon {
    right: 15px;
  }
}

@media only screen and (min-width: 992px) {
  .accordion__items--button__icon {
    right: 35px;
  }
}

.accordion__items--button > * {
  pointer-events: none;
}

/* 
    21. Portfolio css 
*/
.portfolio__items--thumbnail {
  border-radius: 5px;
}

.portfolio__items--thumbnail::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--secondary-color);
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: 9;
  pointer-events: none;
  border-radius: 5px;
}

.portfolio__items--thumbnail:hover::before {
  opacity: 0.7;
}

.portfolio__items--thumbnail:hover .portfolio__view--icon {
  opacity: 1;
  visibility: visible;
}

.portfolio__items--thumbnail__link {
  overflow: hidden;
  border-radius: 5px;
}

.portfolio__items--thumbnail:hover .portfolio__items--thumbnail__img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.portfolio__items--thumbnail__img {
  -webkit-transition: .3s;
  transition: .3s;
  border-radius: 5px;
}

.portfolio__view--icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translatey(-50%) translatex(-50%);
          transform: translatey(-50%) translatex(-50%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: 9;
}

.portfolio__view--icon__link {
  color: var(--text-white-color);
}

/* 
    10. Brand logo css
*/
.brand__section--inner {
  gap: 3rem;
  background: -webkit-gradient(linear, left top, right top, from(#FAEEF2), to(#F1F3FB));
  background: linear-gradient(to right, #FAEEF2, #F1F3FB);
  padding: 3rem 3rem;
  border-radius: 5px;
}

@media only screen and (max-width: 767px) {
  .brand__section--inner {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
}

.brang__logo--img {
  opacity: 0.5;
}

.brang__logo--img:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  opacity: 1;
}

@media only screen and (max-width: 479px) {
  .brang__logo--img {
    max-width: 125px;
  }
}

/*
    home three brand logo css
*/
.brand__section--style3 {
  background: url(../img/other/brand-section-bg3.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

.brand__section--inner__style3 {
  gap: 3rem;
}

@media only screen and (max-width: 767px) {
  .brand__section--inner__style3 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
}

/* 
    32. Breadcrumb css 
*/
.breadcrumb__bg {
  background-color: var(--bg-offwhite-color);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  padding: 2.5rem 0;
}

@media only screen and (min-width: 768px) {
  .breadcrumb__bg {
    padding: 3rem 0;
  }
}

.breadcrumb__content {
  position: relative;
}

.breadcrumb__content--title {
  margin-bottom: 12px;
  font-size: 2.2rem;
  line-height: 2.2rem;
}

@media only screen and (min-width: 768px) {
  .breadcrumb__content--title {
    margin-bottom: 15px;
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .breadcrumb__content--title {
    margin-bottom: 16px;
    font-size: 2.8rem;
    line-height: 2.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .breadcrumb__content--title {
    font-size: 3rem;
    line-height: 3rem;
  }
}

.breadcrumb__content--menu__items {
  position: relative;
  margin-right: 18px;
  padding-right: 20px;
  font-size: 15px;
  line-height: 22px;
}

.breadcrumb__content--menu__items:last-child {
  margin-right: 0;
  padding-right: 0;
}

.breadcrumb__content--menu__items:last-child::before {
  display: none;
}

.breadcrumb__content--menu__items::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 16px;
  background: var(--secondary-color);
  right: 0;
  top: 6px;
  border-radius: 5px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

/* 
    17. Shop page css 
*/
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .shop-col-width-lg-4 {
    width: 30%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .shop-col-width-lg-8 {
    width: 70%;
  }
}

.shop__header {
  padding: 1.5rem 2rem;
  border-radius: 0.5rem;
  background: var(--bg-offwhite-color);
  gap: 3rem;
}

@media only screen and (max-width: 1199px) {
  .shop__header {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    gap: 2rem;
  }
}

.product__view--mode {
  gap: 2.5rem;
}

@media only screen and (max-width: 767px) {
  .product__view--mode {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media only screen and (max-width: 479px) {
  .product__view--mode {
    gap: 1.5rem;
  }
}

.product__view--label {
  font-weight: 600;
  margin-right: 1.2rem;
}

@media only screen and (min-width: 992px) {
  .product__view--label {
    margin-right: 1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .product__view--label {
    margin-right: 2rem;
  }
}

.product__view--select {
  border: 1px solid var(--border-color);
  padding: 0.6rem 3rem 0.6rem 1.2rem;
  -webkit-appearance: none;
  cursor: pointer;
  border-radius: 0.5rem;
  background: var(--body-background-color);
}

.select.shop__header--select::before {
  right: 14px;
}

.product__grid--column__buttons--icons {
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
  border-radius: 0.3rem;
  width: 3.7rem;
  height: 3.7rem;
  line-height: 1.1rem;
  margin-right: 10px;
  text-align: center;
  padding: 0;
}

.product__grid--column__buttons--icons:last-child {
  margin-right: 0;
}

.product__grid--column__buttons--icons:hover {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.product__grid--column__buttons--icons.active {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.product__grid--column__buttons--icons > * {
  pointer-events: none;
}

.product__showing--count {
  color: var(--foreground-sub-color);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/*
    sidebar widget css here
*/
.offcanvas__filter--sidebar {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 300px;
  height: 100vh;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  background-color: var(--body-background-color);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
}

@media only screen and (min-width: 480px) {
  .offcanvas__filter--sidebar {
    max-width: 320px;
  }
}

.offcanvas__filter--sidebar.active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.widget__filter--btn {
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
  border-radius: 0.3rem;
  padding: 0.5rem 1.2rem;
}

@media only screen and (max-width: 479px) {
  .widget__filter--btn {
    margin-right: 2.5rem;
  }
}

.widget__filter--btn:hover {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.widget__filter--btn:hover span {
  color: var(--secondary-color);
}

.widget__filter--btn__icon {
  width: 20px;
}

.widget__filter--btn__text {
  font-weight: 600;
  font-size: 1.5rem;
  margin-left: 0.7rem;
}

.widget__filter--btn > * {
  pointer-events: none;
}

.offcanvas__filter--close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  margin: 25px;
  background: var(--white-color);
}

.offcanvas__filter--close:hover {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.offcanvas__filter--close__text {
  font-size: 1.5rem;
  font-weight: 600;
  margin-left: 8px;
}

.offcanvas__filter--close > * {
  pointer-events: none;
}

.shop__sidebar--widget {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.single__widget {
  margin-bottom: 3rem;
}

@media only screen and (min-width: 992px) {
  .single__widget {
    margin-bottom: 4rem;
  }
}

.single__widget:last-child {
  margin-bottom: 0;
}

.single__widget.widget__bg {
  padding: 2.5rem 2rem;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
}

.widget__title {
  font-weight: 600;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}

@media only screen and (min-width: 992px) {
  .widget__title {
    padding-bottom: 1.2rem;
    margin-bottom: 2.5rem;
  }
}

.widget__search--form {
  position: relative;
}

.widget__search--form__input {
  width: 100%;
  height: 5rem;
  padding: 0 6rem 0 1.2rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
}

@media only screen and (min-width: 992px) {
  .widget__search--form__input {
    font-size: 1.5rem;
  }
}

.widget__search--form__input:focus {
  border-color: var(--secondary-color);
}

.widget__search--form__btn {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  background: var(--secondary-color);
  color: var(--text-white-color);
  padding: 0;
  width: 4.5rem;
  height: 100%;
  border-radius: 0 0.5rem 0.5rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.widget__search--form__btn:hover {
  background: var(--secondary-color);
}

.widget__categories--menu__list {
  border: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
}

.widget__categories--menu__list:last-child {
  margin-bottom: 0;
}

.widget__categories--menu__list.active .widget__categories--menu__label {
  margin-bottom: 0;
}

.widget__categories--menu__list.active .widget__categories--menu__arrowdown--icon {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  top: 38%;
}

.widget__categories--menu__label {
  cursor: pointer;
  padding: 0.5rem 1rem;
  position: relative;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.widget__categories--menu__label:hover {
  color: var(--secondary-color);
}

.widget__categories--menu__label > * {
  pointer-events: none;
}

.widget__categories--menu__text {
  padding-left: 1.3rem;
}

.widget__categories--menu__img {
  width: 3rem;
}

.widget__categories--menu__arrowdown--icon {
  position: absolute;
  right: 1.5rem;
  top: 43%;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.widget__categories--sub__menu {
  display: none;
  padding: 1rem 0;
  border-top: 1px solid var(--border-color);
}

.widget__categories--sub__menu--list {
  margin-bottom: 0.8rem;
  padding: 0 1rem 0.8rem;
  border-bottom: 1px solid var(--border-color);
}

.widget__categories--sub__menu--list:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.widget__categories--sub__menu--img {
  width: 2.8rem;
}

.widget__categories--sub__menu--text {
  padding-left: 1.3rem;
  line-height: 2.8rem;
}

.widget__form--check__list {
  margin-bottom: 1rem;
  position: relative;
}

.widget__form--check__list:last-child {
  margin-bottom: 0;
}

.widget__form--check__label {
  cursor: pointer;
  line-height: 2.8rem;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border: 1px solid var(--border-color);
  background: var(--white-color);
  padding: 0.5rem 3rem 0.5rem 1.5rem;
  border-radius: 0.5rem;
  display: block;
}

.widget__form--check__label:hover {
  color: var(--secondary-color);
}

.widget__form--check__input {
  position: absolute;
  right: 1rem;
  top: 50%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  opacity: 0;
  cursor: pointer;
  z-index: 999;
}

.widget__form--check__input:checked ~ .widget__form--checkmark {
  background-color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
}

.widget__form--check__input:checked ~ .widget__form--checkmark::before {
  display: block;
}

.widget__form--checkmark {
  height: 1.8rem;
  width: 1.8rem;
  border: 1px solid var(--secondary-color);
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 50%;
  right: 1rem;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  background: var(--body-background-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.widget__form--checkmark::before {
  right: 0.5rem;
  top: 0.3rem;
  width: 0.5rem;
  height: 0.8rem;
  border: solid white;
  border-top-width: medium;
  border-right-width: medium;
  border-bottom-width: medium;
  border-left-width: medium;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
  position: absolute;
  display: none;
}

.price__filter--group {
  width: 46%;
}

.price__filter--label {
  font-weight: 600;
  margin-bottom: 0.6rem;
  display: inline-block;
}

@media only screen and (min-width: 992px) {
  .price__filter--label {
    font-size: 1.5rem;
  }
}

.price__filter--input {
  border: 1px solid var(--border-color);
  padding: 0.3rem 0.7rem;
}

.price__filter--currency {
  font-weight: 700;
  margin-right: 0.6rem;
}

.price__filter--btn {
  height: 4rem;
  line-height: 4rem;
}

.price__divider {
  font-size: 2rem;
  padding: 2.5rem 1rem 0;
}

.widget__tagcloud {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
}

.widget__tagcloud--link {
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
  padding: 0.5rem 1rem;
  line-height: 2.4rem;
  border-radius: 0.5rem;
  font-size: 1.4rem;
}

.widget__tagcloud--link:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-white-color);
}

.shop__sidebar--product .small__product--card {
  padding-top: 0;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-top: 0;
  border-bottom: 1px solid var(--border-color);
}

.shop__sidebar--product .small__product--card:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/*
    shop product wrapper css here
*/
@media only screen and (max-width: 991px) {
  .shop__product--wrapper .product__items--link {
    width: 100%;
  }
}

@media only screen and (max-width: 991px) {
  .shop__product--wrapper .product__items--img {
    width: 100%;
  }
}

.product__list {
  gap: 2rem;
  padding: 1.7rem;
}

@media only screen and (min-width: 576px) {
  .product__list {
    gap: 2.5rem;
    padding: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .product__list {
    gap: 3rem;
    padding: 3rem;
  }
}

@media only screen and (max-width: 479px) {
  .product__list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.product__list .product__card--price {
  opacity: 1;
  visibility: visible;
}

.product__list--thumbnail {
  width: 220px;
  padding: 0;
}

@media only screen and (min-width: 480px) {
  .product__list--thumbnail {
    width: 170px;
  }
}

@media only screen and (min-width: 768px) {
  .product__list--thumbnail {
    width: 190px;
  }
}

@media only screen and (min-width: 1200px) {
  .product__list--thumbnail {
    width: 270px;
  }
}

.product__list--content {
  width: 100%;
  padding: 0;
}

@media only screen and (min-width: 480px) {
  .product__list--content {
    width: calc(100% - 200px);
  }
}

@media only screen and (min-width: 768px) {
  .product__list--content {
    width: calc(100% - 212px);
  }
}

@media only screen and (min-width: 1200px) {
  .product__list--content {
    width: calc(100% - 270px);
  }
}

@media only screen and (max-width: 479px) {
  .product__list--content {
    text-align: center;
  }
}

.product__list--content .product__card--title {
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
}

@media only screen and (min-width: 768px) {
  .product__list--content .product__card--title {
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .product__list--content .product__card--title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
}

.product__list--content .product__card--rating {
  margin-bottom: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .product__list--content .product__card--rating {
    margin-bottom: 1.5rem;
  }
}

@media only screen and (max-width: 479px) {
  .product__list--content .product__card--rating {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.product__list--content .product__card--btn {
  display: inline-block;
}

.product__card--content__desc {
  line-height: 2.6rem;
}

@media only screen and (min-width: 1200px) {
  .product__card--content__desc {
    line-height: 2.8rem;
  }
}

@media only screen and (max-width: 767px) {
  .product__card--content__desc {
    display: none;
  }
}

.product__list--price {
  margin-bottom: 1rem;
}

@media only screen and (min-width: 1200px) {
  .product__list--price {
    margin-bottom: 1.2rem;
  }
}

.product__list--price .current__price {
  font-size: 1.6rem;
  line-height: 2.2rem;
}

@media only screen and (min-width: 992px) {
  .product__list--price .current__price {
    font-size: 1.8rem;
    line-height: 2.4rem;
  }
}

.product__list--price .old__price {
  font-size: 1.6rem;
  line-height: 2.2rem;
}

@media only screen and (min-width: 992px) {
  .product__list--price .old__price {
    font-size: 1.8rem;
    line-height: 2.4rem;
  }
}

/*
    pagination css here
*/
.pagination__area {
  padding: 1.5rem 2rem;
  margin-top: 3rem;
  background: var(--bg-offwhite-color);
  border-radius: 5px;
}

.pagination__list {
  margin-right: 0.8rem;
}

.pagination__list:last-child {
  margin-right: 0;
}

@media only screen and (min-width: 768px) {
  .pagination__list {
    margin-right: 1.2rem;
  }
}

.pagination__item {
  width: 3.4rem;
  height: 3.4rem;
  line-height: 3.2rem;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
}

@media only screen and (min-width: 768px) {
  .pagination__item {
    width: 4rem;
    height: 4rem;
    line-height: 3.8rem;
    font-size: 1.6rem;
  }
}

.pagination__item--current {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-white-color);
}

.pagination__item:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-white-color);
}

/* 
    34. About page css 
*/
@media only screen and (max-width: 991px) {
  .team__section.section--padding {
    padding-bottom: 6rem;
  }
}

@media only screen and (max-width: 767px) {
  .team__section.section--padding {
    padding-bottom: 4rem;
  }
}

@media only screen and (max-width: 991px) {
  .about__thumb {
    margin-bottom: 3rem;
  }
}

@media only screen and (max-width: 767px) {
  .about__thumb {
    margin-bottom: 2.5rem;
  }
}

.about__thumb--items {
  margin-right: 2rem;
}

.about__thumb--items:last-child {
  margin-right: 0;
}

.about__thumb--items:first-child {
  margin-top: 8rem;
}

@media only screen and (max-width: 991px) {
  .about__thumb--items:first-child {
    margin-top: 0;
  }
}

.about__thumb--play {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translatey(-50%) translatex(-50%);
          transform: translatey(-50%) translatex(-50%);
}

.about__thumb--play__icon {
  width: 4rem;
  height: 4rem;
  line-height: 3.5rem;
  text-align: center;
  background: var(--secondary-color);
  color: var(--text-white-color);
  border-radius: 50%;
}

.about__thumb--play__icon:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

@media only screen and (max-width: 575px) {
  .about__content {
    text-align: center;
  }
}

.about__content--subtitle {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2.2rem;
}

@media only screen and (min-width: 992px) {
  .about__content--subtitle {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}

.about__content--maintitle {
  font-weight: 700;
}

@media only screen and (min-width: 992px) {
  .about__content--maintitle {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .about__content--maintitle {
    font-size: 3rem;
    line-height: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .about__content--maintitle {
    font-size: 3.5rem;
    line-height: 4.4rem;
  }
}

.about__content--desc {
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: var(--text-gray-color);
}

.about__author--name {
  font-weight: 600;
  line-height: 2.6rem;
}

.about__author--rank {
  color: var(--light-color);
}

.about__author--signature {
  position: absolute;
  top: 50%;
  left: 105px;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

/*
    team member css
*/
.team__items:hover .team__thumb {
  border-color: var(--secondary-color);
}

.team__thumb {
  position: relative;
  line-height: 1;
  display: inline-block;
  border: 2px solid var(--border-color);
  padding: 0.3rem;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border-radius: 10px;
}

.team__thumb--img {
  border-radius: 10px;
}

.team__social {
  gap: 1rem;
}

@media only screen and (min-width: 1200px) {
  .team__social {
    gap: 1.2rem;
  }
}

.team__social--icon {
  width: 2.8rem;
  height: 2.8rem;
  text-align: center;
  background: var(--bg-offwhite-color);
  color: var(--body-text-color);
  line-height: 3rem;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.team__social--icon:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}

@media only screen and (min-width: 1200px) {
  .team__social--icon {
    width: 3rem;
    height: 3rem;
    line-height: 3.2rem;
  }
}

.team__content {
  padding: 1rem 0 0;
}

@media only screen and (max-width: 991px) {
  .team__content {
    padding: 0.8rem 0 0;
  }
}

.team__content--subtitle {
  color: var(--foreground-sub-color);
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 1.3rem;
}

@media only screen and (min-width: 767px) {
  .team__content--subtitle {
    font-size: 1.6rem;
    line-height: 2.2rem;
  }
}

.team__content--title {
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 1.7rem;
  line-height: 2rem;
}

@media only screen and (min-width: 992px) {
  .team__content--title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .team__content--title {
    font-size: 2rem;
    line-height: 2.2rem;
  }
}

/* 
    27. Counterup css here
*/
.counterup__banner__bg2 {
  background: var(--bg-offwhite-color);
}

.counterup__banner--inner {
  padding: 6rem 0;
  gap: 2.5rem;
}

@media only screen and (max-width: 767px) {
  .counterup__banner--inner {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.counterup__title {
  color: var(--foreground-sub-color);
  font-size: 1.5rem;
  line-height: 2.4rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

@media only screen and (min-width: 992px) {
  .counterup__title {
    font-size: 1.6rem;
    line-height: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .counterup__title {
    font-size: 1.8rem;
    line-height: 2.6rem;
    margin-bottom: 2rem;
  }
}

.counterup__number {
  font-size: 2.5rem;
  line-height: 2.5rem;
  font-weight: 600;
}

@media only screen and (min-width: 992px) {
  .counterup__number {
    font-size: 3rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .counterup__number {
    font-size: 4rem;
    line-height: 4rem;
  }
}

/* 
    16. Product details css 
*/
.product__details--section {
  padding-top: 3rem;
}

.product__details--media {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

@media only screen and (max-width: 767px) {
  .product__details--media {
    margin-bottom: 4.6rem;
  }
}

.product__media--preview__items {
  position: relative;
}

.product__media--preview__items--link {
  width: 100%;
  display: block;
}

.product__media--preview__items--img {
  width: 100%;
}

.product__media--view__icon {
  position: absolute;
  top: 2rem;
  left: 2rem;
}

.product__media--view__icon--link {
  width: 3.5rem;
  height: 3.5rem;
  line-height: 4.5rem;
  text-align: center;
  background: var(--secondary-color);
  border-radius: 50%;
  color: var(--text-white-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.product__media--view__icon--link:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
}

.product__media--view__icon.media__play {
  right: 2rem;
  left: auto;
}

.media__play--icon__link {
  color: var(--secondary-color);
}

.media__play--icon__link:hover {
  color: var(--primary-color);
}

.product__media--nav {
  margin-top: 2rem;
}

.product__media--nav__items {
  border: 1px solid var(--border-color);
  padding: 1.2rem;
  line-height: 1;
  border-radius: 5px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

@media only screen and (min-width: 768px) {
  .product__media--nav__items {
    padding: 0.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .product__media--nav__items {
    padding: 1rem;
  }
}

.product__media--nav__items--img {
  width: 100%;
  width: 100%;
  cursor: pointer;
}

.product__media--nav__items:hover {
  border-color: var(--secondary-color);
}

.image__with--text__percent--list {
  position: relative;
}

.image__with--text__percent--list::before {
  position: absolute;
  content: "";
  background: var(--border-color);
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.image__with--text__percent--list::after {
  position: absolute;
  content: "";
  background: var(--secondary-color);
  bottom: 0;
  left: 0;
  width: 58%;
  height: 4px;
}

.image__with--text__percent--top {
  padding-bottom: 1.7rem;
}

.image__with--text__percent--content {
  font-weight: 600;
}

.image__with--text__percent--list.two::after {
  width: 77%;
}

/*
    product details info css here
*/
@media only screen and (min-width: 768px) {
  .product__details--info {
    font-size: 1.6rem;
  }
}

.product__details--info__price .current__price {
  font-size: 1.6rem;
}

@media only screen and (min-width: 992px) {
  .product__details--info__price .current__price {
    font-size: 2rem;
  }
}

.product__details--info__price .old__price {
  font-size: 1.4rem;
  margin-left: 0.8rem;
}

@media only screen and (min-width: 992px) {
  .product__details--info__price .old__price {
    font-size: 1.8rem;
  }
}

.product__details--info__desc {
  font-size: 1.4rem;
}

@media only screen and (min-width: 992px) {
  .product__details--info__desc {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}

.product__details--info .product__card--rating {
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .product__details--info.style2 {
    margin-top: 3rem;
  }
}

.variant__buy--now__btn {
  width: 100%;
  font-size: 1.5rem;
  font-weight: 600;
}

@media only screen and (min-width: 768px) {
  .variant__buy--now__btn {
    font-size: 1.6rem;
  }
}

.product__variant--title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-right: 1rem;
}

.product__details--info__meta--list {
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
}

.product__details--info__meta--list:last-child {
  margin-bottom: 0;
}

.guarantee__safe--checkout__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

/*
    product details tab section css here
*/
.product__details--tab__section {
  background: var(--bg-offwhite-color);
}

.product__details--tab__section.sidebar__tab--section {
  padding: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .product__details--tab__section.sidebar__tab--section {
    padding: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .product__details--tab__section.sidebar__tab--section {
    padding: 3.5rem;
  }
}

.product__details--summary__wrapper {
  padding-bottom: 2rem;
}

.product__details--accordion__list {
  border-bottom: 1px solid var(--border-color);
}

.product__details--accordion__list:first-child {
  border-top: 1px solid var(--border-color);
}

.product__details--accordion__list:last-child {
  margin-bottom: 0;
}

.product__details--summary {
  padding: 1.2rem 0;
}

.product__details--summary__title {
  font-size: 1.6rem;
  font-weight: 600;
  position: relative;
  display: block;
}

@media only screen and (min-width: 768px) {
  .product__details--summary__title {
    font-size: 1.8rem;
  }
}

.product__details--summary__title svg {
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sidebar__tab--section .product__details--tab__list {
    margin-right: 3rem;
  }
  .sidebar__tab--section .product__details--tab__list:last-child {
    margin-right: 0;
  }
}

.product__details--tab__inner {
  background: var(--body-background-color);
  padding: 1.5rem 1.2rem;
}

@media only screen and (min-width: 480px) {
  .product__details--tab__inner {
    padding: 1.5rem;
  }
}

@media only screen and (min-width: 768px) {
  .product__details--tab__inner {
    padding: 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .product__details--tab__inner {
    padding: 3rem;
  }
}

@media only screen and (max-width: 767px) {
  .product__details--tab {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .product__details--tab.mb-30 {
    margin-bottom: 1.5rem;
  }
}

@media only screen and (max-width: 575px) {
  .product__details--tab {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.product__details--tab__list {
  font-size: 1.6rem;
  line-height: 2.6rem;
  margin-right: 5rem;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  position: relative;
  padding-bottom: 0.4rem;
  font-weight: 500;
}

.product__details--tab__list::before {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: var(--secondary-color);
  left: 50%;
  right: 50%;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  bottom: 0;
}

.product__details--tab__list.active {
  color: var(--secondary-color);
}

.product__details--tab__list.active::before {
  width: 100%;
  left: 0;
  right: 0;
}

.product__details--tab__list:hover {
  color: var(--secondary-color);
}

.product__details--tab__list:hover::before {
  width: 100%;
  left: 0;
  right: 0;
}

.product__details--tab__list:last-child {
  margin-right: 0;
}

@media only screen and (min-width: 768px) {
  .product__details--tab__list {
    font-size: 1.7rem;
  }
}

@media only screen and (min-width: 1200px) {
  .product__details--tab__list {
    font-size: 1.8rem;
  }
}

@media only screen and (max-width: 767px) {
  .product__details--tab__list {
    margin: 0 1rem 1.3rem;
  }
}

.product__tab--content__title {
  font-weight: 600;
  font-size: 1.7rem;
}

@media only screen and (min-width: 992px) {
  .product__tab--content__title {
    font-size: 1.8rem;
  }
}

.product__tab--content__desc {
  line-height: 2.6rem;
  color: var(--foreground-sub-color);
}

@media only screen and (min-width: 992px) {
  .product__tab--content__desc {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}

.product__tab--content__step.style2 {
  gap: 2rem;
}

@media only screen and (max-width: 767px) {
  .product__tab--content__step.style2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.product__tab--content__banner {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .product__tab--content__banner {
    width: 310px;
  }
}

@media only screen and (min-width: 992px) {
  .product__tab--content__banner {
    width: 410px;
  }
}

@media only screen and (min-width: 1200px) {
  .product__tab--content__banner {
    width: 460px;
  }
}

.product__tab--content__banner.style2 {
  width: 100%;
}

@media only screen and (min-width: 1200px) {
  .product__tab--content__banner.style2 {
    width: 360px;
  }
}

@media only screen and (min-width: 1366px) {
  .product__tab--content__banner.style2 {
    width: 460px;
  }
}

@media only screen and (max-width: 1199px) {
  .product__tab--content__flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.product__tab--content__right {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .product__tab--content__right {
    width: calc(100% - 300px);
    padding-left: 2.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .product__tab--content__right {
    width: calc(100% - 410px);
  }
}

@media only screen and (min-width: 1200px) {
  .product__tab--content__right {
    width: calc(100% - 460px);
  }
}

@media only screen and (max-width: 767px) {
  .product__tab--content__right {
    padding-top: 2rem;
  }
}

.product__tab--content__right.style2 {
  width: 100%;
  padding-left: 0;
  padding-top: 0;
}

@media only screen and (min-width: 1200px) {
  .product__tab--content__right.style2 {
    width: calc(100% - 360px);
  }
}

@media only screen and (min-width: 1366px) {
  .product__tab--content__right.style2 {
    width: calc(100% - 460px);
  }
}

.image__with--text__percent--list.three::after {
  width: 58%;
}

.image__with--text__percent--list.four::after {
  width: 69%;
}

.product__tab--percent__style .image__with--text__percent--list {
  width: 100%;
}

.product__tab--percent__style .image__with--text__percent--list:last-child {
  margin-top: 0;
}

@media only screen and (min-width: 768px) {
  .product__tab--percent__style .image__with--text__percent--list {
    width: 85%;
  }
}

@media only screen and (min-width: 1200px) {
  .product__tab--percent__style .image__with--text__percent--list {
    width: 80%;
  }
}

.product__reviews--header {
  position: relative;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
}

@media only screen and (min-width: 768px) {
  .product__reviews--header {
    padding-bottom: 2.5rem;
    margin-bottom: 3.5rem;
  }
}

@media only screen and (max-width: 575px) {
  .product__reviews--header {
    text-align: center;
  }
}

@media only screen and (max-width: 575px) {
  .reviews__ratting {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.reviews__summary--caption {
  color: var(--secondary-color);
  margin-left: 1.2rem;
}

.actions__newreviews--btn {
  position: absolute;
  right: 0;
  bottom: 2.2rem;
}

@media only screen and (max-width: 575px) {
  .actions__newreviews--btn {
    position: inherit;
    bottom: inherit;
    margin-top: 1rem;
  }
}

.reviews__comment--area {
  padding: 0 2rem;
  margin-bottom: 3rem;
}

@media only screen and (max-width: 767px) {
  .reviews__comment--area {
    padding: 0;
  }
}

.reviews__comment--thumb {
  width: 85px;
}

@media only screen and (max-width: 575px) {
  .reviews__comment--thumb {
    margin-bottom: 1rem;
  }
}

.reviews__comment--thumb img {
  display: block;
}

.reviews__comment--top {
  margin-bottom: 1rem;
}

.reviews__comment--content {
  width: 100%;
  position: relative;
}

@media only screen and (min-width: 576px) {
  .reviews__comment--content {
    width: calc(100% - 85px);
    padding-left: 1.5rem;
  }
}

@media only screen and (min-width: 768px) {
  .reviews__comment--content {
    padding-left: 2.5rem;
  }
}

.reviews__comment--content__date {
  border: 1px solid var(--border-color);
  padding: 0 1rem;
  border-radius: 5px;
  color: var(--foreground-sub-color);
  height: 3.8rem;
  line-height: 3.8rem;
  font-size: 1.4rem;
}

@media only screen and (min-width: 768px) {
  .reviews__comment--content__date {
    height: 4.2rem;
    line-height: 4rem;
    font-size: 1.5rem;
  }
}

@media only screen and (max-width: 479px) {
  .reviews__comment--content__date {
    padding: 0 0.7rem;
    font-size: 1.2rem;
    height: 3.6rem;
    line-height: 3.6rem;
  }
}

.reviews__comment--content__title {
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.reviews__comment--content__desc {
  margin-bottom: 0;
}

@media only screen and (min-width: 992px) {
  .reviews__comment--content__desc {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}

@media only screen and (max-width: 575px) {
  .reviews__comment--content .reviews__ratting {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.reviews__comment--list {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

.reviews__comment--list:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .reviews__comment--list {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (max-width: 575px) {
  .reviews__comment--list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.reviews__comment--list.margin__left {
  margin-left: 2.2rem;
}

@media only screen and (min-width: 400px) {
  .reviews__comment--list.margin__left {
    margin-left: 2.5rem;
  }
}

@media only screen and (min-width: 480px) {
  .reviews__comment--list.margin__left {
    margin-left: 3rem;
  }
}

@media only screen and (min-width: 992px) {
  .reviews__comment--list.margin__left {
    margin-left: 5rem;
  }
}

@media only screen and (max-width: 575px) {
  .reviews__comment--reply__title {
    text-align: center;
  }
}

.reviews__comment--reply__textarea {
  width: 100%;
  height: 100px;
  resize: none;
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
}

@media only screen and (min-width: 768px) {
  .reviews__comment--reply__textarea {
    height: 150px;
  }
}

@media only screen and (min-width: 992px) {
  .reviews__comment--reply__textarea {
    font-size: 1.5rem;
  }
}

.reviews__comment--reply__textarea:focus {
  border-color: var(--secondary-color);
}

.reviews__comment--reply__input {
  width: 100%;
  border: 1px solid var(--border-color);
  height: 5rem;
  border-radius: 0.5rem;
  padding: 0 1.5rem;
}

@media only screen and (min-width: 992px) {
  .reviews__comment--reply__input {
    font-size: 1.5rem;
  }
}

.reviews__comment--reply__input:focus {
  border-color: var(--secondary-color);
}

span.info__list--item-head {
  width: 12rem;
}

ul.additional__info_list {
  margin: 0;
  padding: 0;
}

li.additional__info_list--item:nth-child(even) {
  background: #fafafa;
}

li.additional__info_list--item {
  padding: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

span.info__list--item-content {
  line-height: 24px;
}

.product__details--gallery {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* 
    33. Blog details css 
*/
.blog__sidebar--widget {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

@media only screen and (max-width: 991px) {
  .blog__sidebar--widget.left {
    margin-top: 6rem;
  }
}

@media only screen and (max-width: 767px) {
  .blog__sidebar--widget.left {
    margin-top: 5rem;
  }
}

.blog__post--header.mb-30 {
  margin-bottom: 2.5rem;
}

@media only screen and (min-width: 992px) {
  .post__header--title {
    line-height: 4rem;
  }
}

.blog__post--meta {
  text-transform: capitalize;
}

@media only screen and (min-width: 992px) {
  .blog__post--meta {
    font-size: 1.5rem;
  }
}

.blog__post--meta__link {
  color: var(--secondary-color);
}

.blog__post--meta__link:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}

.blog__thumbnail {
  line-height: 1;
}

@media only screen and (max-width: 767px) {
  .blog__thumbnail.mb-30 {
    margin-bottom: 2rem;
  }
}

.blog__details--content__subtitle {
  line-height: 3rem;
}

@media only screen and (min-width: 992px) {
  .blog__details--content__subtitle {
    line-height: 3.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .blog__details--content__subtitle {
    line-height: 3.5rem;
  }
}

.blockquote__content {
  padding: 20px 30px;
  text-align: center;
  border-radius: 10px;
}

@media only screen and (min-width: 992px) {
  .blockquote__content {
    padding: 30px 40px;
  }
}

@media only screen and (min-width: 1200px) {
  .blockquote__content {
    padding: 40px 70px;
  }
}

@media only screen and (max-width: 767px) {
  .blockquote__content {
    margin: 0 0 2.5rem;
    padding: 1.5rem 2rem;
  }
}

.blockquote__content--desc {
  font-size: 1.7rem;
  line-height: 3rem;
  font-style: italic;
  font-weight: 500;
}

@media only screen and (min-width: 768px) {
  .blockquote__content--desc {
    font-size: 2rem;
    line-height: 3.4rem;
  }
}

.blog__tags--social__media {
  padding: 5rem 0;
}

@media only screen and (max-width: 1199px) {
  .blog__tags--social__media {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

@media only screen and (max-width: 1199px) {
  .blog__tags--media {
    margin-bottom: 2rem;
  }
}

@media only screen and (max-width: 575px) {
  .blog__tags--media {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.blog__tags--media__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 1rem;
}

@media only screen and (min-width: 992px) {
  .blog__tags--media__title {
    font-size: 1.6rem;
  }
}

@media only screen and (max-width: 575px) {
  .blog__tags--media__title {
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

.blog__tags--media__list {
  margin-right: 0.7rem;
}

.blog__tags--media__list:last-child {
  margin-right: 0;
}

.blog__tags--media__link {
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
  padding: 0.5rem 1.2rem;
  line-height: 2.5rem;
  border-radius: 0.3rem;
  text-transform: capitalize;
}

.blog__tags--media__link:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-white-color);
}

@media only screen and (max-width: 575px) {
  .blog__tags--media__link {
    padding: 0.4rem 0.8rem;
  }
}

.meta__deta {
  color: var(--foreground-sub-color);
  font-weight: 500;
  margin-top: 0.6rem;
  line-height: 2rem;
  font-size: 1.4rem;
}

.blog__social--media__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 1rem;
}

@media only screen and (min-width: 992px) {
  .blog__social--media__title {
    font-size: 1.6rem;
  }
}

.blog__social--media__list {
  margin-right: 1rem;
}

.blog__social--media__list:last-child {
  margin-right: 0;
}

.blog__social--media__link {
  width: 3rem;
  height: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--secondary-color);
  color: var(--text-white-color);
  border-radius: 50%;
}

.blog__social--media__link:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
}

@media only screen and (max-width: 575px) {
  .related__post--text {
    text-align: center;
  }
}

.related__post--items:hover .related__post--img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.related__post--thumb {
  line-height: 1;
  overflow: hidden;
}

.related__post--title {
  font-size: 1.6rem;
  line-height: 2.2rem;
}

@media only screen and (min-width: 992px) {
  .related__post--title {
    font-size: 1.8rem;
  }
}

.related__post--deta {
  font-size: 1.4rem;
  color: var(--light-color);
  line-height: 2.2rem;
}

@media only screen and (min-width: 992px) {
  .related__post--deta {
    font-size: 1.5rem;
  }
}

.comment__reply--btn {
  height: 3.6rem;
  line-height: 3.6rem;
  padding: 0 2rem;
}

@media only screen and (min-width: 768px) {
  .comment__reply--btn {
    height: 4rem;
    line-height: 4rem;
    padding: 0 2.5rem;
  }
}

.reviews__comment--content__title2 {
  font-weight: 600;
  line-height: 2.2rem;
  margin-bottom: 0.4rem;
}

.reviews__comment--content__date2 {
  font-size: 1.5rem;
  color: var(--foreground-sub-color);
}

@media only screen and (max-width: 575px) {
  .reviews__comment--reply__title.style2 {
    text-align: center;
  }
}

/*
    post article css here
*/
.post__article--items {
  gap: 1.6rem;
  margin-bottom: 2rem;
}

.post__article--items:last-child {
  margin-bottom: 0;
}

.post__article--items:hover .post__article--thumbnail__img {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

.post__article--thumbnail {
  width: 110px;
  border-radius: 5px;
  overflow: hidden;
}

.post__article--thumbnail__img {
  border-radius: 5px;
}

.post__article--content {
  width: calc(100% - 110px);
}

.post__article--content__title {
  font-size: 1.5rem;
}

/* 
    28. Contact page css 
*/
.contact__section--heading__maintitle {
  font-size: 2.8rem;
  line-height: 3rem;
  color: var(--secondary-color);
  margin-bottom: 1.5rem;
}

.contact__section--heading__desc {
  color: var(--foreground-sub-color);
  width: 90%;
  margin: 0 auto;
  font-size: 1.5rem;
  line-height: 2.6rem;
}

@media only screen and (min-width: 768px) {
  .contact__section--heading__desc {
    width: 75%;
  }
}

@media only screen and (min-width: 1200px) {
  .contact__section--heading__desc {
    font-size: 1.6rem;
    line-height: 2.8rem;
    width: 55%;
  }
}

.contact__form {
  background: var(--body-background-color);
  border-radius: 10px;
  -webkit-box-shadow: 0 7px 20px rgba(0, 0, 0, 0.16);
          box-shadow: 0 7px 20px rgba(0, 0, 0, 0.16);
  padding: 2rem;
}

@media only screen and (min-width: 576px) {
  .contact__form {
    padding: 3rem;
  }
}

@media only screen and (min-width: 768px) {
  .contact__form {
    padding: 4rem;
  }
}

@media only screen and (min-width: 992px) {
  .contact__form {
    margin-left: 36rem;
    padding: 5.5rem 3.5rem 5.5rem 10rem;
  }
}

@media only screen and (min-width: 1200px) {
  .contact__form {
    margin-left: 40rem;
  }
}

.contact__form--title {
  font-weight: 600;
  font-size: 1.8rem;
}

@media only screen and (min-width: 1200px) {
  .contact__form--title {
    font-size: 2.2rem;
  }
}

@media only screen and (max-width: 1199px) {
  .contact__form--title.mb-30 {
    margin-bottom: 2rem;
  }
}

.contact__form--label {
  display: block;
  margin-bottom: 8px;
}

.contact__form--label__star {
  color: var(--secondary-color);
}

.contact__form--input {
  width: 100%;
  height: 50px;
  padding: 5px 15px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.contact__form--input:focus {
  border-color: var(--secondary-color) !important;
}

.contact__form--textarea {
  width: 100%;
  height: 100px;
  padding: 12px 15px;
  border-radius: 8px;
  resize: none;
  border: 1px solid var(--border-color);
}

.contact__form--textarea:focus {
  border-color: var(--secondary-color) !important;
}

@media only screen and (min-width: 992px) {
  .contact__form--textarea {
    height: 120px;
  }
}

@media only screen and (min-width: 1200px) {
  .contact__form--textarea {
    height: 160px;
  }
}

.contact__info {
  background: var(--secondary-color);
  width: 46rem;
  padding: 2rem;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

@media only screen and (max-width: 575px) {
  .contact__info {
    width: 100%;
  }
}

@media only screen and (min-width: 576px) {
  .contact__info {
    padding: 3rem;
  }
}

@media only screen and (min-width: 768px) {
  .contact__info {
    padding: 4rem;
  }
}

@media only screen and (min-width: 992px) {
  .contact__info {
    width: 42rem;
    padding: 4rem 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .contact__info {
    width: 46rem;
    padding: 5rem 6rem;
  }
}

@media only screen and (max-width: 991px) {
  .contact__info {
    position: inherit;
    top: inherit;
    -webkit-transform: inherit;
            transform: inherit;
    margin: 3rem auto 0;
    width: 100%;
  }
}

.contact__info--items {
  margin-bottom: 2.7rem;
}

.contact__info--items:last-child {
  margin-bottom: 0;
}

@media only screen and (max-width: 575px) {
  .contact__info--items {
    margin-bottom: 2rem;
  }
}

.contact__info--icon {
  margin-right: 1.2rem;
  color: var(--text-white-color);
  padding-top: 0.8rem;
}

@media only screen and (min-width: 1200px) {
  .contact__info--icon {
    margin-right: 2rem;
  }
}

@media only screen and (max-width: 575px) {
  .contact__info--icon svg {
    width: 2.5rem;
  }
}

.contact__info--content__title {
  font-weight: 600;
}

@media only screen and (min-width: 992px) {
  .contact__info--content__title {
    font-size: 2rem;
    line-height: 2.8rem;
  }
}

.contact__info--content__desc {
  font-size: 1.5rem;
  line-height: 2.6rem;
  color: var(--text-white-color);
}

@media only screen and (min-width: 1200px) {
  .contact__info--content__desc {
    font-size: 1.6rem;
    line-height: 2.7rem;
  }
}

.contact__info--content__desc a {
  color: var(--text-white-color);
}

.contact__info--content__desc a:hover {
  color: var(--primary-color);
}

.contact__info--social__list {
  margin-right: 11px;
}

.contact__info--social__list:last-child {
  margin-right: 0;
}

.contact__info--social__icon {
  width: 3rem;
  height: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--body-background-color);
  color: var(--secondary-color);
  border-radius: 50%;
}

.contact__info--social__icon:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
}

.contact__map--iframe {
  width: 100%;
  height: 250px;
  margin-bottom: -7px;
}

@media only screen and (min-width: 768px) {
  .contact__map--iframe {
    height: 320px;
  }
}

@media only screen and (min-width: 992px) {
  .contact__map--iframe {
    height: 400px;
  }
}

@media only screen and (min-width: 1200px) {
  .contact__map--iframe {
    height: 500px;
  }
}

/* 
    31. Cart page css 
*/
@media only screen and (max-width: 575px) {
  .cart__title {
    text-align: center;
  }
}

.cart__table--inner {
  width: 100%;
  border-spacing: 0;
}

@media only screen and (max-width: 575px) {
  .cart__table--header {
    display: none;
  }
}

.cart__table--header__list {
  padding: 0 2rem 2rem 0;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.cart__table--header__list:last-child {
  padding-right: 0;
}

@media only screen and (min-width: 992px) {
  .cart__table--header__list {
    font-size: 1.5rem;
  }
}

.cart__table--header__list.text-right {
  text-align: right;
}

.cart__table--header__list.text-center {
  text-align: center;
}

@media only screen and (max-width: 575px) {
  .cart__table--body__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.cart__table--body__list {
  border-bottom: 1px solid var(--border-color);
  padding: 2rem 2rem 2rem 0;
}

.cart__table--body__list:last-child {
  padding-right: 0;
}

@media only screen and (max-width: 575px) {
  .cart__table--body__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 2rem 0;
  }
}

.cart__thumbnail {
  max-width: 10rem;
  line-height: 1;
}

@media only screen and (max-width: 767px) {
  .cart__thumbnail {
    max-width: 8rem;
  }
}

.cart__content {
  padding-left: 1.5rem;
}

@media only screen and (min-width: 1200px) {
  .cart__content {
    padding-left: 2rem;
  }
}

.cart__content--variant {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--foreground-sub-color);
  line-height: 2.2rem;
  font-size: 1.3rem;
}

.cart__content--variant:last-child {
  margin-bottom: 0;
}

.cart__content--title {
  margin-bottom: 0.5rem;
  line-height: 2.5rem;
}

.cart__remove--btn {
  font-weight: 600;
  width: 3rem;
  height: 3rem;
  text-align: center;
  line-height: 3rem;
  background: var(--body-background-color);
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
          box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  margin-right: 1.5rem;
  border-radius: 50%;
  padding: 0;
  border: 0;
}

@media only screen and (min-width: 992px) {
  .cart__remove--btn {
    margin-right: 3rem;
  }
}

.cart__remove--btn:hover {
  color: var(--secondary-color);
}

.cart__price {
  font-weight: 600;
}

@media only screen and (min-width: 992px) {
  .cart__price {
    font-size: 1.6rem;
  }
}

.continue__shopping {
  padding-top: 2rem;
}

.continue__shopping--link {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
}

@media only screen and (min-width: 992px) {
  .continue__shopping--link {
    font-size: 1.7rem;
  }
}

.continue__shopping--clear {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
  border: 0;
  padding: 0;
  background: inherit;
}

@media only screen and (min-width: 992px) {
  .continue__shopping--clear {
    font-size: 1.7rem;
  }
}

.continue__shopping--clear:hover {
  color: var(--secondary-color);
}

.cart__summary {
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
          box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  padding: 2rem;
  background: var(--body-background-color);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

@media only screen and (max-width: 991px) {
  .cart__summary {
    margin-top: 5.5rem;
  }
}

@media only screen and (max-width: 767px) {
  .cart__summary {
    margin-top: 4.5rem;
  }
}

.cart__summary--total__table {
  width: 100%;
}

.coupon__code--title {
  font-size: 1.7rem;
  margin-bottom: 0.7rem;
  line-height: 2.4rem;
}

@media only screen and (min-width: 992px) {
  .coupon__code--title {
    font-size: 2rem;
  }
}

.coupon__code--desc {
  color: var(--foreground-sub-color);
  margin-bottom: 1.5rem;
}

.coupon__code--field__input {
  border: 1px solid var(--border-color);
  height: 4rem;
  padding: 0 1.5rem;
  border-radius: 2.4rem;
  width: 100px;
}

@media only screen and (min-width: 768px) {
  .coupon__code--field__input {
    width: 160px;
  }
}

@media only screen and (min-width: 992px) {
  .coupon__code--field__input {
    width: 140px;
  }
}

@media only screen and (min-width: 1200px) {
  .coupon__code--field__input {
    width: 160px;
    height: 4.5rem;
  }
}

.coupon__code--field__input:focus {
  border-color: var(--secondary-color);
}

.coupon__code--field__btn {
  margin-left: 1.5rem;
}

@media only screen and (min-width: 1200px) {
  .coupon__code--field__btn {
    margin-left: 2rem;
  }
}

.cart__note--title {
  font-size: 1.7rem;
  margin-bottom: 0.7rem;
  line-height: 2.4rem;
}

@media only screen and (min-width: 992px) {
  .cart__note--title {
    font-size: 2rem;
  }
}

.cart__note--desc {
  color: var(--light-color);
  margin-bottom: 1.5rem;
}

.cart__note--textarea {
  border: 1px solid var(--border-color);
  height: 10rem;
  padding: 1rem;
  width: 100%;
  resize: none;
}

.cart__note--textarea:focus {
  border-color: var(--secondary-color);
}

.cart__summary--total__list {
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.cart__summary--total__list:last-child {
  margin-bottom: 0;
}

.cart__summary--footer__desc {
  font-size: 1.5rem;
  color: var(--foreground-sub-color);
  margin-bottom: 1.5rem;
}

.cart__summary--footer__btn {
  padding: 0 1.5rem;
}

@media only screen and (min-width: 1200px) {
  .cart__summary--footer__btn {
    padding: 0 2.5rem;
  }
}

@media only screen and (max-width: 767px) {
  .wishlist__cart--btn {
    padding: 0.5rem 1.2rem;
    height: auto;
    line-height: 2.4rem;
    border-radius: 5px;
    text-align: center;
  }
}

/*
   30. Checkout Page Css
*/
.checkout__breadcrumb {
  padding: 0;
  margin: 0;
}

@media only screen and (max-width: 767px) {
  .checkout__breadcrumb {
    margin-top: 2.5rem;
  }
}

.breadcrumb__link {
  font-size: 1.3rem;
  color: var(--secondary-color);
}

.readcrumb__chevron-icon {
  color: #737373;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0 0.6rem;
}

.order__summary--mobile__version {
  display: none;
}

@media only screen and (max-width: 767px) {
  .order__summary--mobile__version {
    display: block;
  }
}

.order__summary--toggle {
  width: 100%;
  text-align: left;
  background: var(--bg-offwhite-color);
  border: 0;
  border: 1px solid var(--border-color);
  padding: 1.2rem;
}

.order__summary--toggle__inner {
  width: 100%;
}

.order__summary--toggle__text {
  color: var(--secondary-color);
}

.order__summary--toggle__icon {
  color: var(--secondary-color);
  vertical-align: middle;
  line-height: 1.5rem;
  margin-right: 1rem;
}

.summary__table {
  width: 100%;
}

.summary__table--items {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.summary__table--list {
  padding: 1rem 2rem 1rem 0;
  border-bottom: 1px solid var(--border-color);
}

.summary__table--list:last-child {
  padding-right: 0;
}

details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

.order__summary--final__price {
  float: right;
  font-size: 1.5rem;
  font-weight: 600;
}

.order__summary--section {
  background: var(--bg-offwhite-color);
  padding: 3rem 1rem 1rem;
}

.checkout__checkbox {
  position: relative;
}

.checkout__checkbox--input {
  position: absolute;
  left: -1px;
  top: 4px;
  opacity: 0;
  cursor: pointer;
  z-index: 999;
}

.checkout__checkbox--input:checked ~ .checkout__checkbox--checkmark {
  background-color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
}

.checkout__checkbox--input:checked ~ .checkout__checkbox--checkmark::before {
  display: block;
}

.checkout__checkbox--label {
  padding-left: 3rem;
  cursor: pointer;
}

.checkout__checkbox--checkmark {
  height: 1.8rem;
  width: 1.8rem;
  border: 1px solid var(--border-color);
  border-radius: 0.3rem;
  display: block;
  position: absolute;
  top: 4px;
  left: 0;
  background: var(--body-background-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.checkout__checkbox--checkmark::before {
  left: 0.5rem;
  top: 0.3rem;
  width: 0.5rem;
  height: 0.8rem;
  border: solid white;
  border-top-width: medium;
  border-right-width: medium;
  border-bottom-width: medium;
  border-left-width: medium;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
  position: absolute;
  display: none;
}

.checkout__input--label {
  display: inline-block;
}

.checkout__input--label__star {
  color: var(--secondary-color);
}

.checkout__input--field {
  width: 100%;
  border: 1px solid var(--border-color);
  height: 4.5rem;
  padding: 0 1.5rem;
}

.checkout__input--field:focus {
  border-color: var(--secondary-color);
}

.checkout__notes--textarea__field {
  width: 100%;
  border: 1px solid var(--border-color);
  padding: 1rem 1.5rem 0.5rem;
  resize: none;
}

.checkout__notes--textarea__field:focus {
  border-color: var(--secondary-color);
}

@media only screen and (max-width: 991px) {
  .checkout__section--header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.section__header--title {
  font-size: 2rem;
  line-height: 2.2rem;
}

@media only screen and (min-width: 1200px) {
  .section__header--title {
    font-size: 2.2rem;
    line-height: 2.4rem;
  }
}

@media only screen and (max-width: 575px) {
  .section__header--title {
    margin-bottom: 0.8rem;
  }
}

.section__header--desc {
  margin-top: 0.5rem;
}

.layout__flex--item {
  color: var(--foreground-sub-color);
}

@media only screen and (max-width: 991px) {
  .layout__flex--item {
    margin-top: 1rem;
  }
}

.layout__flex--item__link {
  color: var(--secondary-color);
}

.section__shipping--address {
  padding: 3rem 0 2rem;
}

@media only screen and (min-width: 992px) {
  .section__shipping--address {
    padding: 4rem 0 3rem;
  }
}

.section__shipping--address.pt-10 {
  padding-top: 1rem;
}

.section__shipping--address.pt-0 {
  padding-top: 0;
}

.checkout__input--select {
  position: relative;
}

.checkout__input--select__field {
  width: 100%;
  height: 4.5rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--border-color);
  -webkit-appearance: none;
  cursor: pointer;
}

.checkout__input--select__field:focus {
  border-color: var(--secondary-color);
}

.previous__link--content {
  margin-left: 2rem;
  color: var(--secondary-color);
}

@media only screen and (max-width: 575px) {
  .previous__link--content {
    margin-left: 0;
    margin-top: 1rem;
  }
}

.checkout__footer {
  border: 0;
}

@media only screen and (max-width: 575px) {
  .checkout__content--step__footer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.checkout__sidebar {
  background: #FAFAFA;
  border: 1px solid var(--border-color);
  padding: 3rem 2.5rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

@media only screen and (max-width: 991px) {
  .checkout__sidebar {
    padding: 3rem 1.8rem;
  }
}

@media only screen and (max-width: 767px) {
  .checkout__sidebar {
    margin-top: 3rem;
  }
}

.product__thumbnail {
  width: 7rem;
  border: 1px solid var(--border-color);
  position: relative;
  line-height: 1;
}

.product__thumbnail--quantity {
  position: absolute;
  top: -6px;
  right: -5px;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  background: #7F7F7F;
  color: var(--text-white-color);
  text-align: center;
  border-radius: 50%;
  font-size: 1.2rem;
}

.product__description {
  padding-left: 1.5rem;
}

.product__description--name {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 600;
  opacity: 0.9;
}

.product__description--variant {
  font-size: 1.2rem;
  color: var(--foreground-sub-color);
  line-height: 2rem;
}

.checkout__product--table {
  margin-bottom: 2rem;
}

.checkout__product--table .cart__table--body__list {
  padding: 1rem 2rem 1rem 0;
}

.checkout__product--table .cart__table--body__list:last-child {
  padding-right: 0;
}

.checkout__discount--code {
  margin-bottom: 2.5rem;
}

.checkout__discount--code__input--field {
  width: 100%;
  border: 1px solid var(--border-color);
  height: 4rem;
  padding: 0 1.5rem;
}

.checkout__discount--code__input--field:focus {
  border-color: var(--secondary-color);
}

@media only screen and (min-width: 768px) {
  .checkout__discount--code__input--field {
    height: 4.5rem;
  }
}

.checkout__discount--code__btn {
  height: 4rem;
  line-height: 4rem;
  margin-left: 2rem;
  padding: 0 2.5rem;
  font-size: 1.4rem;
}

@media only screen and (min-width: 768px) {
  .checkout__discount--code__btn {
    height: 4.5rem;
    line-height: 4.5rem;
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .checkout__discount--code__btn {
    font-size: 1.6rem;
  }
}

.checkout__total {
  border-top: 1px solid var(--border-color);
  padding-top: 1.2rem;
}

.checkout__total--table {
  width: 100%;
}

.checkout__total--calculated__text {
  font-size: 1.3rem;
  color: var(--foreground-sub-color);
}

.checkout__total--title {
  color: var(--foreground-sub-color);
}

.checkout__total--footer__list {
  padding-top: 3rem;
  position: relative;
}

.checkout__total--footer__list::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background: #E4E4E4;
  top: 1.5rem;
  left: 0;
}

.checkout__total--footer__title {
  font-size: 1.6rem;
}

.checkout__total--footer__amount {
  font-size: 2.2rem;
  font-weight: 600;
}

.checkout__order--summary__title {
  font-size: 2rem;
  line-height: 2.2rem;
}

@media only screen and (min-width: 1200px) {
  .checkout__order--summary__title {
    font-size: 2.2rem;
    line-height: 2.4rem;
  }
}

.payment__history {
  margin-top: 2rem;
}

.payment__history--title {
  font-size: 2rem;
  line-height: 2.2rem;
}

@media only screen and (min-width: 1200px) {
  .payment__history--title {
    font-size: 2.2rem;
    line-height: 2.4rem;
  }
}

@media only screen and (max-width: 575px) {
  .payment__history--inner {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.payment__history--list {
  margin-right: 1.5rem;
}

@media only screen and (max-width: 1199px) {
  .payment__history--list {
    margin-bottom: 1rem;
  }
}

.payment__history--list:last-child {
  margin-right: 0;
}

@media only screen and (max-width: 1199px) {
  .payment__history--list {
    margin-right: 1rem;
  }
}

.payment__history--link {
  background: var(--body-background-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 0 1.2rem;
  font-size: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .payment__history--link {
    font-size: 1.6rem;
    padding: 0 2rem;
    height: 4.8rem;
    line-height: 4.6rem;
  }
}

.checkout__now--btn {
  width: 100%;
  text-align: center;
  font-size: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .checkout__now--btn {
    font-size: 1.6rem;
    height: 4.8rem;
    line-height: 4.6rem;
  }
}

.continue__shipping--btn {
  font-size: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .continue__shipping--btn {
    font-size: 1.6rem;
    height: 4.8rem;
    line-height: 4.6rem;
  }
}

/* 
    24. My account page css 
*/
.my__account--section__inner {
  background: var(--body-background-color);
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
          box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  padding: 3rem 2rem;
}

@media only screen and (min-width: 1199px) {
  .my__account--section__inner {
    padding: 5rem 4rem;
  }
}

@media only screen and (max-width: 991px) {
  .my__account--section__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.account__left--sidebar {
  border-right: 1px solid var(--border-color);
  padding-right: 3rem;
  margin-right: 3rem;
  width: 18rem;
}

@media only screen and (min-width: 1199px) {
  .account__left--sidebar {
    padding-right: 5rem;
    margin-right: 5rem;
    width: 23rem;
  }
}

@media only screen and (max-width: 991px) {
  .account__left--sidebar {
    width: 100%;
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
  }
}

.account__wrapper {
  width: calc(100% - 18rem);
}

@media only screen and (min-width: 1199px) {
  .account__wrapper {
    width: calc(100% - 23rem);
  }
}

@media only screen and (max-width: 991px) {
  .account__wrapper {
    width: 100%;
  }
}

@media only screen and (max-width: 991px) {
  .account__menu {
    width: 250px;
    margin-right: 3rem;
  }
}

@media only screen and (max-width: 479px) {
  .account__menu {
    margin-right: 0;
  }
}

.account__menu--list {
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  margin-bottom: 1.5rem;
}

.account__menu--list:last-child {
  margin-bottom: 0;
}

.account__menu--list:hover {
  color: var(--secondary-color);
}

.account__menu--list.active a {
  color: var(--secondary-color);
}

@media only screen and (min-width: 992px) {
  .account__menu--list {
    font-size: 1.6rem;
  }
}

.account__details.two {
  padding-top: 0;
}

@media only screen and (min-width: 992px) {
  .account__details {
    padding-top: 3rem;
  }
}

@media only screen and (max-width: 479px) {
  .account__details {
    padding-top: 3rem;
  }
}

.account__details--title {
  margin-bottom: 1rem;
}

.account__details--desc {
  color: var(--foreground-sub-color);
  line-height: 3rem;
  margin-bottom: 2rem;
  font-size: 1.5rem;
}

.account__details--link {
  color: var(--secondary-color);
  border-bottom: 1px solid var(--secondary-color);
  font-size: 1.5rem;
}

.account__details--link:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.new__address--btn {
  padding: 0 2.5rem;
}

@media only screen and (min-width: 992px) {
  .new__address--btn {
    font-size: 1.5rem;
  }
}

.account__details--footer {
  margin-top: 3rem;
}

.account__details--footer__btn {
  background: var(--body-background-color);
  border: 1px solid var(--primary-color);
  padding: 0 2.5rem;
  height: 4.5rem;
  line-height: 4.1rem;
  border-radius: 2.5rem;
  margin-right: 1rem;
  font-size: 1.5rem;
}

.account__details--footer__btn:last-child {
  margin-right: 0;
}

.account__details--footer__btn:hover {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.account__welcome--text {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

@media only screen and (min-width: 992px) {
  .account__welcome--text {
    font-size: 1.8rem;
    margin-bottom: 3rem;
  }
}

.account__content--title {
  font-weight: 600;
}

.account__table {
  width: 100%;
  border: 1px solid var(--border-color);
  border-spacing: 0;
  border-bottom: 0;
}

@media only screen and (max-width: 479px) {
  .account__table {
    border: 0;
  }
}

@media only screen and (max-width: 767px) {
  .account__table--header {
    display: none;
  }
}

.account__table--header__child--items {
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  padding: 1.7rem 1.3rem;
  font-size: 1.5rem;
}

.account__table--header__child--items:last-child {
  text-align: right;
}

@media only screen and (min-width: 1200px) {
  .account__table--header__child--items {
    font-size: 1.6rem;
    padding: 1.7rem 1.5rem;
  }
}

@media only screen and (max-width: 767px) {
  .account__table--body.mobile__none {
    display: none;
  }
}

.account__table--body.mobile__block {
  display: none;
}

@media only screen and (max-width: 767px) {
  .account__table--body.mobile__block {
    display: block;
  }
}

@media only screen and (max-width: 767px) {
  .account__table--body__child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 2rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 2rem;
  }
  .account__table--body__child:last-child {
    margin-bottom: 0;
  }
}

.account__table--body__child--items {
  border-bottom: 1px solid var(--border-color);
  padding: 1.7rem 2rem;
  color: var(--foreground-sub-color);
}

.account__table--body__child--items:last-child {
  text-align: right;
}

@media only screen and (max-width: 767px) {
  .account__table--body__child--items {
    padding: 0.5rem 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    border: 0;
  }
}

@media only screen and (max-width: 479px) {
  .account__table--body__child--items {
    padding: 0.5rem 0;
  }
}


/* 


/*# sourceMappingURL=style.css.map */