@charset "UTF-8";
/*
  Template Name: Amel - Electronics eCommerce 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. Preloader css 
    4. hero slider css
    5. banner css
    6. Feature css
    7. Collection css
    8. Product css
    9. Small product css
    10. brand logo css
    11. Blog css
    12. Footer css
    13. Newsletter css
    14. Quick view css
    15. Categories product css
    16. services css
    17. testimonial css
    18. Store css
    19. Shop page css
    20. Breadcrumb css 
    21. Product details css 
    22. Blog details css 
    23. About page css 
    24. Counter up css here
    25. Contact page css 
    26. Login page css 
    27. Portfolio css 
    28. Error 404 page css 
    29. Cart page css
    30. Checkout Page Css
    31. Compare page css 
    32. Faq page css
    33. Accordion css
    34. My account page css 
    35. Privacy policy css 

*/
/*
    1. Base CSS
*/
:root {
  --primary-color: #111111;
  --secondary-color: #161880;
  --secondary-color2: #ed1d24;
  --hover-color: #f6b924;
  --yellow-color: #ff9800;
  --foreground-color: #111111;
  --foreground-sub-color: #29323a;
  --body-text-color: #000000;
  --text-white-color: #fff;
  --body-background-color: #fff;
  --bg-offwhite-color: #f5f7ff;
  --bg-gray-color: #f5f8ff;
  --bg-black-color: #000000;
  --bg-light-dark-color: #1a1818;
  --border-color: #d9d9d9;
  --rubik-fonts: "Rubik", sans-serif;
  --body-font-size: 1.4rem;
  --body-font-weight: 400;
  --body-line-height: 2.5rem;
  --headings-weight: 700;
  --transition: all 0.3s ease 0s;
  --container-fluid-offset: 12rem;
}

/* Common Style */
*,
*::after,
*::before {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  min-height: 100%;
  margin: 0;
  font-size: 62.5%;
  padding: 0;
}

body {
  font-family: var(--rubik-fonts);
  font-size: var(--body-font-size, 1.4rem);
  font-weight: var(--body-font-weight);
  font-style: normal;
  line-height: var(--body-line-height, 2.5rem);
  position: relative;
  visibility: visible;
  overflow-x: hidden;
  color: var(--foreground-color);
  background-color: var(--background-color);
}
@media only screen and (max-width: 767px) {
  body {
    line-height: 2.4rem;
  }
}

[data-aos="fade-up"] {
  transform: translate3d(0, 40px, 0);
  -webkit-transform: translate3d(0, 40px, 0);
  -moz-transform: translate3d(0, 40px, 0);
  -ms-transform: translate3d(0, 40px, 0);
  -o-transform: translate3d(0, 40px, 0);
}

.tooltip {
  font-size: 1.3rem;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: 500;
  margin: 0;
  font-family: var(--rubik-fonts);
}

h1,
.h1 {
  font-size: 2.2rem;
  line-height: 3.2rem;
}
@media only screen and (min-width: 480px) {
  h1,
  .h1 {
    font-size: 2.3rem;
    line-height: 3.3rem;
  }
}
@media only screen and (min-width: 576px) {
  h1,
  .h1 {
    font-size: 2.4rem;
    line-height: 3.4rem;
  }
}
@media only screen and (min-width: 768px) {
  h1,
  .h1 {
    font-size: 3rem;
    line-height: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  h1,
  .h1 {
    font-size: 4rem;
    line-height: 5rem;
  }
}
@media only screen and (min-width: 1200px) {
  h1,
  .h1 {
    font-size: 4.5rem;
    line-height: 5.5rem;
  }
}
@media only screen and (min-width: 1366px) {
  h1,
  .h1 {
    font-size: 5.5rem;
    line-height: 6.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  h1,
  .h1 {
    font-size: 6rem;
    line-height: 7rem;
  }
}

h2,
.h2 {
  font-size: 1.8rem;
  line-height: 2.4rem;
}
@media only screen and (min-width: 768px) {
  h2,
  .h2 {
    font-size: 1.8rem;
    line-height: 2.4rem;
  }
}
@media only screen and (min-width: 992px) {
  h2,
  .h2 {
    font-size: 2rem;
    line-height: 2.6rem;
  }
}

h3,
.h3 {
  font-size: 1.4rem;
  line-height: 2.2rem;
}

h4,
.h4 {
  font-size: 1.4rem;
  line-height: 2.2rem;
}

h5,
.h5 {
  font-weight: 400;
}

h6,
.h6 {
  font-weight: 400;
}

p,
.p {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 1200px) {
  p,
  .p {
    margin-bottom: 1.5rem;
  }
}

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

a,
button {
  display: inline-block;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}

a,
button,
img,
input,
textarea {
  transition: var(--transition);
}

*:focus {
  outline: none;
  box-shadow: none;
}

a:focus {
  text-decoration: none;
  outline: none;
}

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

a:hover {
  text-decoration: none;
  color: var(--secondary-color);
}

button,
input[type="submit"] {
  cursor: pointer;
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
}

input[type="number"] {
  -moz-appearance: textfield;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

span {
  display: inline-block;
  transition: var(--transition);
}

label {
  transition: var(--transition);
  display: block;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  opacity: 1;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
}

ul {
  margin: 0;
  padding: 0;
}

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

li {
  list-style: none;
  line-height: 1;
}

hr {
  border-top-width: 2px;
}

@media only screen and (min-width: 576px) {
  .container {
    max-width: 576px;
  }
}
@media only screen and (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media only screen and (min-width: 992px) {
  .container {
    max-width: 992px;
  }
}
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}
@media only screen and (min-width: 1366px) {
  .container {
    max-width: 1290px;
  }
}
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding-right: var(--bs-gutter-x, 1.5rem);
  padding-left: var(--bs-gutter-x, 1.5rem);
}

.container-fluid {
  --offset-fluid: 1.5rem;
  padding-right: var(--offset-fluid);
  padding-left: var(--offset-fluid);
}
@media only screen and (min-width: 992px) {
  .container-fluid {
    --offset-fluid: 3rem;
  }
}
@media only screen and (min-width: 1366px) {
  .container-fluid {
    --offset-fluid: calc(var(--container-fluid-offset) / 4.5);
  }
}
@media only screen and (min-width: 1600px) {
  .container-fluid {
    --offset-fluid: calc(var(--container-fluid-offset) / 2.5);
  }
}
@media only screen and (min-width: 1800px) {
  .container-fluid {
    --offset-fluid: var(--container-fluid-offset);
  }
}
.container-fluid.width-100 {
  --offset-fluid: 0;
}

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

.row > * {
  padding-right: 1rem;
  padding-left: 1rem;
}
@media only screen and (min-width: 992px) {
  .row > * {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media only screen and (max-width: 1199px) {
  .col-lg-order {
    order: 1;
  }
  .d-lg-none {
    display: none;
  }
}
@media only screen and (max-width: 991px) {
  .d-md-none {
    display: none;
  }
  .d-md-flex {
    display: flex;
  }
  .col-md-order {
    order: 1;
  }
  .d-md-block {
    display: block;
  }
  .d-md-2-block {
    display: block !important;
  }
  .d-md-u-block {
    display: block !important;
  }
}
@media only screen and (max-width: 767px) {
  .d-sm-u-none {
    display: none;
  }
  .d-sm-block {
    display: block;
  }
  .d-sm-flex {
    display: flex;
  }
  .col-sm-order {
    order: 1;
  }
  .d-sm-u-block {
    display: block !important;
  }
}
@media only screen and (max-width: 575px) {
  .d-sm-2-none {
    display: none;
  }
  .d-sm-2-block {
    display: block;
  }
  .d-sm-2-flex {
    display: flex;
  }
  .col-sm-2-order {
    order: 1;
  }
}
@media only screen and (max-width: 479px) {
  .d-sm-3-none {
    display: none;
  }
}
@media only screen and (max-width: 575px) {
  .custom-col {
    width: 50%;
  }
}
@media only screen and (max-width: 479px) {
  .custom-col {
    width: 100%;
  }
}

@media only screen and (max-width: 991px) {
  .row_md_reverse {
    flex-direction: column-reverse;
  }
}
@media only screen and (max-width: 767px) {
  .row_sm_reverse {
    flex-direction: column-reverse;
  }
}

@media only screen and (max-width: 575px) {
  .row_sm_u_reverse {
    flex-direction: column-reverse;
  }
}

@media only screen and (max-width: 767px) {
  .mobile_v_none {
    display: none !important;
  }
}

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

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

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

/*
  Swiper navigation css
*/
.swiper:hover .swiper__nav--btn {
  opacity: 1;
  visibility: visible;
}

.swiper__nav--btn {
  width: 2.8rem;
  height: 2.8rem;
  background: inherit;
  border: 0;
  background: var(--hover-color);
  color: var(--text-white-color);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 9;
  margin-top: 0;
  transform: translatey(-50%);
}
.swiper__nav--btn.swiper-button-disabled {
  background: #e3e3e3;
  color: var(--primary-color);
}
.swiper__nav--btn:hover {
  background: #e3e3e3;
  color: var(--primary-color);
}
.swiper__nav--btn::after {
  display: none;
}
.swiper__nav--btn.swiper-button-prev {
  left: 0;
}
.swiper__nav--btn.swiper-button-next {
  right: 0;
}
.swiper__nav--btn.swiper-button-next::after {
  display: none;
}

/*
  Swiper pagination css
*/
.swiper-pagination {
  bottom: 1.5rem !important;
}

.swiper-pagination-bullet {
  width: 1.2rem;
  height: 1.2rem;
  background: #adabab;
  opacity: 1;
  vertical-align: middle;
  transition: var(--transition);
  margin: 0 4px !important;
  position: relative;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--hover-color);
  width: 3rem;
  border-radius: 5rem;
}

/*
  default css here
*/
.no-gutter {
  margin-right: 0;
  margin-left: 0;
}

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.position__sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.header__transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  transition: 0.3s;
}

.header__transparent:hover {
  background: var(--body-background-color);
}

.primary__btn {
  display: inline-block;
  font-size: 1.3rem;
  line-height: 3.5rem;
  height: 3.5rem;
  padding: 0 1.8rem;
  letter-spacing: 0.2px;
  border-radius: 0.5rem;
  background: var(--hover-color);
  color: var(--body-text-color);
  border: 0;
}
.primary__btn:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}
@media only screen and (min-width: 768px) {
  .primary__btn {
    line-height: 3.8rem;
    height: 3.8rem;
    padding: 0 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .primary__btn {
    line-height: 4rem;
    height: 4rem;
    padding: 0 2rem;
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 1200px) {
  .primary__btn {
    font-size: 1.5rem;
    line-height: 4.3rem;
    height: 4.3rem;
    padding: 0 2.2rem;
  }
}
@media only screen and (min-width: 1600px) {
  .primary__btn {
    line-height: 4.5rem;
    height: 4.5rem;
    padding: 0 2.5rem;
  }
}

.hover__color {
  color: var(--hover-color);
}

.footer__bg {
  background: #f8f8f8;
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.border__top--bottom {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

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

select {
  word-wrap: normal;
  font-family: var(--font-lato);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
}

.select {
  position: relative;
}
.select::before {
  border-bottom: 2px solid #201e1e;
  border-right: 2px solid #201e1e;
  content: "";
  display: block;
  height: 7px;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px;
  transform-origin: 66% 66%;
  opacity: 0.7;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

.section__heading--subtitle {
  font-size: 1.1rem;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--bg-offwhite-color);
  color: var(--primary-color);
  padding: 2px 2.5rem;
  border-radius: 2rem;
  line-height: 2.4rem;
  margin-bottom: 1.4rem;
}
.section__heading--maintitle {
  font-weight: 600;
  color: var(--primary-color);
}
.section__heading--flex {
  flex-wrap: wrap;
  gap: 2rem;
}
.section__heading--desc {
  margin-top: 1.2rem;
}

@media only screen and (max-width: 991px) {
  .row-md-reverse {
    flex-direction: column-reverse;
  }
}
#scroll__top {
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 99;
  outline: none;
  background-color: var(--secondary-color);
  color: var(--text-white-color);
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transform: translateY(50px);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  line-height: 1;
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#scroll__top:hover {
  background: var(--primary-color);
}
@media only screen and (max-width: 991px) {
  #scroll__top {
    bottom: 75px;
  }
}

#scroll__top.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

#scroll__top svg {
  width: 25px;
  line-height: 1;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
}

.width__295 {
  width: 295px;
}

.line-height-35 {
  line-height: 3.5rem;
}

.line-height-1 {
  line-height: 1;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.overflow-hidden {
  overflow: hidden;
}

.break {
  word-break: break-word;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.text-ofwhite {
  color: var(--ofwhite-color);
}

.bg__primary {
  background: var(--primary-color);
}

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

.bg__hover {
  background: var(--hover-color);
}

.bg__black {
  background: #1d1c1c;
}

.bg__gray {
  background: var(--bg-gray-color);
}

.text__hover {
  color: var(--hover-color);
}

.text__primary {
  color: var(--primary-color);
}

.text__secondary {
  color: var(--secondary-color) !important;
}

.text__secondary2 {
  color: var(--secondary-color2) !important;
}

.position__relative {
  position: relative;
}

.border-bottom {
  border-bottom: 1px solid var(--border-color) !important;
}

.border {
  border: 1px solid var(--border-color) !important;
}

.border-bottom-light {
  border-bottom: 1px solid #40598d;
}

.border-0 {
  border: none;
}

.border-radius-5 {
  border-radius: 0.5rem;
}

.border-radius-10 {
  border-radius: 1rem;
}

.border-radius-20 {
  border-radius: 2rem;
}

.border-radius-30 {
  border-radius: 3rem;
}

.border-radius-50 {
  border-radius: 50%;
}

.width-100 {
  width: 100%;
}

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

.display-block {
  display: block;
}

/* Tab */
.tab_content {
  display: block;
}

.tab_pane {
  display: none;
  transition: var(--transition);
}

.tab_pane:not(.show) {
  opacity: 0;
}

.tab_pane.show {
  opacity: 1;
}

.tab_pane.active {
  display: block;
}

body.overlay__active,
.mobile_menu_open,
.predictive__search--box_active,
.offCanvas__minicart_active,
.offcanvas__filter--sidebar_active {
  overflow-y: hidden;
}

body.overlay__active::before,
.predictive__search--box_active::before,
.mobile_menu_open::before,
.offCanvas__minicart_active::before,
.offcanvas__filter--sidebar_active::before {
  position: absolute;
  content: "";
  background: #000;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 0.5;
  cursor: crosshair;
}

.font-weight-500 {
  font-weight: 500 !important;
}

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

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}
.animate-fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/* Section padding */
.section--padding {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media only screen and (min-width: 768px) {
  .section--padding {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

/* Section margin */
.section--margin {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

/* Padding */
.p-0 {
  padding: 0;
}

.pt-0 {
  padding-top: 0;
}

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

.pb-15 {
  padding-bottom: 1.5rem;
}

.pb-20 {
  padding-bottom: 2rem;
}

/* Margin */
.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mt-30 {
  margin-top: 3rem;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-60 {
  margin-bottom: 3.5rem;
}
@media only screen and (min-width: 768px) {
  .mb-60 {
    margin-bottom: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  .mb-60 {
    margin-bottom: 6rem;
  }
}

.mb-55 {
  margin-bottom: 3.5rem;
}
@media only screen and (min-width: 992px) {
  .mb-55 {
    margin-bottom: 5.5rem;
  }
}

.mb-50 {
  margin-bottom: 2.5rem;
}
@media only screen and (min-width: 768px) {
  .mb-50 {
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb-50 {
    margin-bottom: 4rem;
  }
}
@media only screen and (min-width: 1600px) {
  .mb-50 {
    margin-bottom: 5rem;
  }
}

.mb--n50 {
  margin-bottom: -2.5rem;
}
@media only screen and (min-width: 768px) {
  .mb--n50 {
    margin-bottom: -3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb--n50 {
    margin-bottom: -4rem;
  }
}
@media only screen and (min-width: 1600px) {
  .mb--n50 {
    margin-bottom: -5rem;
  }
}

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

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

.mb-35 {
  margin-bottom: 2.5rem;
}
@media only screen and (min-width: 768px) {
  .mb-35 {
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb-35 {
    margin-bottom: 3.5rem;
  }
}

.mb-30 {
  margin-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
  .mb-30 {
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .mb-30 {
    margin-bottom: 3rem;
  }
}

.mb--n30 {
  margin-bottom: -2rem;
}
@media only screen and (min-width: 992px) {
  .mb--n30 {
    margin-bottom: -2.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .mb--n30 {
    margin-bottom: -3rem;
  }
}

.mb-28 {
  margin-bottom: 2rem;
}
@media only screen and (min-width: 992px) {
  .mb-28 {
    margin-bottom: 2.3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb-28 {
    margin-bottom: 2.8rem;
  }
}

.mb--n28 {
  margin-bottom: -2rem;
}
@media only screen and (min-width: 992px) {
  .mb--n28 {
    margin-bottom: -2.3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb--n28 {
    margin-bottom: -2.8rem;
  }
}

.mb--n25 {
  margin-bottom: -1.8rem;
}
@media only screen and (min-width: 992px) {
  .mb--n25 {
    margin-bottom: -2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb--n25 {
    margin-bottom: -2.5rem;
  }
}

.mb-25 {
  margin-bottom: 1.8rem;
}
@media only screen and (min-width: 992px) {
  .mb-25 {
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mb-25 {
    margin-bottom: 2.5rem;
  }
}

.mb-20 {
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .mb-20 {
    margin-bottom: 2rem;
  }
}

.mb-18 {
  margin-bottom: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .mb-18 {
    margin-bottom: 1.8rem;
  }
}

.mb-15 {
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .mb-15 {
    margin-bottom: 1.5rem;
  }
}

.mb-12 {
  margin-bottom: 1rem;
}
@media only screen and (min-width: 992px) {
  .mb-12 {
    margin-bottom: 1.2rem;
  }
}

.mb-10 {
  margin-bottom: 0.8rem;
}
@media only screen and (min-width: 992px) {
  .mb-10 {
    margin-bottom: 1rem;
  }
}

.mb-5 {
  margin-bottom: 0.5rem;
}

.mb_5 {
  margin-bottom: 0.5rem;
}

.mb-8 {
  margin-bottom: 0.8rem;
}

.mr-30 {
  margin-right: 3rem;
}

/*
    2. Header css
*/
/*
    offcanvas header css
*/
.header__sticky.sticky .offcanvas__header--menu__open--btn {
  color: var(--body-text-color) !important;
}
.header__sticky.sticky .menu__padding--style .header__menu--items {
  padding: 2rem 0;
}

.offcanvas__header--menu__open {
  line-height: 1;
  display: none;
}
@media only screen and (max-width: 991px) {
  .offcanvas__header--menu__open {
    display: block;
  }
}
.offcanvas__header--menu__open--svg {
  width: 32px;
}
.offcanvas__header--menu__open--btn > * {
  pointer-events: none;
}

.offcanvas__header {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 300px;
  height: 100vh;
  transition: var(--transition);
  transform: translateX(-100%);
  background-color: var(--body-background-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 480px) {
  .offcanvas__header {
    max-width: 320px;
  }
}

.offcanvas__header.open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.offcanvas__header.open ~ .offcanvas-overlay {
  visibility: visible;
  opacity: 0.75;
}

.offcanvas-overlay {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  transition: var(--transition);
  opacity: 0;
  background-color: var(--bg-black-color);
}

.offcanvas__inner {
  position: relative;
  height: 100%;
  padding-bottom: 5rem;
}

.offcanvas__logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 15px;
}
.offcanvas__logo img {
  max-width: 9.5rem;
}

.offcanvas__close--btn {
  position: relative;
  align-self: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  text-indent: -9999px;
  border: none;
  background-color: transparent;
}

.offcanvas__close--btn::before,
.offcanvas__close--btn::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  content: "";
  transform: rotate(45deg);
  background-color: var(--bg-black-color);
}

.offcanvas__close--btn::after {
  transform: rotate(-45deg);
}

.main__header--sticky {
  display: none;
}
.main__header--sticky.sticky {
  display: block;
}

/* 
      offcanvas Menu css 
    */
.offcanvas__menu {
  overflow-y: auto;
  height: 100%;
}

.offcanvas__menu_ul {
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 300px;
}

.offcanvas__menu_li {
  position: relative;
  border-bottom: 1px solid var(--border-color);
}

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

.offcanvas__menu_item {
  line-height: 1;
  display: block;
  padding: 15px 20px;
  text-transform: uppercase;
  color: var(--primary-color);
}

/* 
      offcanvas Sub Menu 
  */
.offcanvas__sub_menu {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offcanvas__sub_menu_li {
  position: relative;
  border-top: 1px solid var(--border-color);
}

.offcanvas__sub_menu_item {
  line-height: 1;
  display: block;
  padding: 15px 0 15px 30px;
  color: var(--primary-color);
}

.offcanvas__sub_menu_item ~ .offcanvas__sub_menu .offcanvas__sub_menu_item {
  padding-left: 40px;
}

.offcanvas__sub_menu_toggle {
  font-size: 20px;
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  width: 4rem;
  height: 4.6rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
}

.offcanvas__sub_menu_toggle::before,
.offcanvas__sub_menu_toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  content: "";
  transition: var(--transition);
  transform: translateX(-50%) translateY(-50%);
  background-color: var(--bg-black-color);
}

.offcanvas__sub_menu_toggle:not(.active)::after {
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}

.offcanvas__account--items {
  margin-top: 2rem;
  padding: 0 1.5rem;
}
.offcanvas__account--items__btn {
  color: var(--secondary-color);
  gap: 0.5rem;
}

/*
      Offcanvas mobile sticky toolbar css here
  */
.offcanvas__sticky--toolbar {
  position: fixed;
  bottom: 0;
  background: var(--body-background-color);
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.12);
  padding: 14px 20px;
  display: none;
}
@media only screen and (min-width: 500px) {
  .offcanvas__sticky--toolbar {
    padding: 14px 40px;
  }
}
@media only screen and (min-width: 768px) {
  .offcanvas__sticky--toolbar {
    padding: 14px 60px;
  }
}
@media only screen and (max-width: 991px) {
  .offcanvas__sticky--toolbar {
    display: block;
  }
}
.offcanvas__sticky--toolbar__btn {
  position: relative;
  text-align: center;
}
.offcanvas__sticky--toolbar__btn:hover .offcanvas__sticky--toolbar__icon {
  background: var(--primary-color);
  color: var(--text-white-color);
}
.offcanvas__sticky--toolbar__btn > * {
  pointer-events: none;
}
.offcanvas__sticky--toolbar__btn.minicart__open--btn {
  flex-direction: column;
}
.offcanvas__sticky--toolbar__icon {
  width: 3.2rem;
  height: 3.2rem;
  text-align: center;
  background: var(--secondary-color);
  border-radius: 50%;
  color: var(--text-white-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.offcanvas__sticky--toolbar__label {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 6px;
}
.offcanvas__sticky--toolbar .items__count {
  left: 2.3rem;
  top: -9px;
}

@media only screen and (max-width: 575px) {
  .header__account--btn.minicart__open--btn {
    right: 6px;
  }
}

/*
      header sticky css here
  */
.header__sticky.sticky {
  position: fixed;
  width: 100%;
  top: 0;
  background: var(--body-background-color);
  left: 0;
  z-index: 99;
  padding: 1rem 0.5rem;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
  transition: 0.3s;
}
@media only screen and (max-width: 991px) {
  .header__sticky.sticky {
    padding: 1.5rem 0.5rem;
  }
}
.header__sticky.sticky .header__account--btn.text-white {
  color: var(--foreground-colo) !important;
}

.sticky .sticky__block {
  display: block;
}
.sticky .sticky__none {
  display: none;
}

.sticky__block {
  display: none;
}

/*
     header topbar css here
  */
.header__topbar {
  padding: 8px 0;
}
@media only screen and (max-width: 575px) {
  .header__topbar {
    padding: 12px 0;
  }
}
@media only screen and (max-width: 575px) {
  .header__topbar--inner {
    flex-direction: column;
    gap: 1.2rem;
  }
}

.header__top--account {
  position: relative;
  margin-right: 1.2rem;
  padding-right: 1.2rem;
}
.header__top--account::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 1.7rem;
  background: var(--body-background-color);
  right: 0;
  top: 50%;
  transform: translatey(-50%);
  opacity: 0.6;
}
.header__top--account__link:hover {
  color: var(--hover-color) !important;
}

/*
      language currency css here
  */
.language__currency--list {
  position: relative;
  margin-right: 10px;
  padding-right: 10px;
}
@media only screen and (min-width: 1200px) {
  .language__currency--list {
    margin-right: 12px;
    padding-right: 12px;
  }
}
.language__currency--list:last-child {
  margin-right: 0;
  padding-right: 0;
}
.language__currency--list:last-child::before {
  display: none;
}
.language__currency--list::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 1.7rem;
  background: var(--body-background-color);
  right: 0;
  top: 50%;
  transform: translatey(-50%);
  opacity: 0.6;
}
.language__currency--link {
  display: flex;
  align-items: center;
}
.language__currency--link:hover span {
  color: var(--hover-color);
}
.language__currency--link:hover svg {
  color: var(--hover-color);
}
.language__currency--link svg {
  transition: var(--transition);
  margin-left: 5px;
}
.language__currency--link > * {
  pointer-events: none;
}

.language__icon {
  vertical-align: middle;
  margin-right: 0.4rem;
}

.dropdown__switcher {
  position: absolute;
  z-index: 9;
  width: 100px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  top: 100%;
  opacity: 0;
  visibility: hidden;
  margin-top: 16px;
  transition: var(--transition);
  background: var(--body-background-color);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  right: 0;
}
.dropdown__switcher.active {
  opacity: 1;
  visibility: visible;
  margin-top: 11px;
}
.dropdown__switcher--items:first-child .dropdown__switcher--text {
  border-radius: 5px 5px 0 0;
}
.dropdown__switcher--items:last-child .dropdown__switcher--text {
  border-bottom: 0;
  border-radius: 0 0 5px 5px;
}
.dropdown__switcher--text {
  display: block;
  font-size: 1.3rem;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-color);
}
.dropdown__switcher--text:hover {
  background: var(--bg-offwhite-color);
  border-color: var(--bg-offwhite-color);
}

.offcanvas__language--switcher {
  font-weight: 500;
}

.offcanvas__dropdown--language {
  position: absolute;
  z-index: 9;
  width: 100px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  bottom: 100%;
  opacity: 0;
  visibility: hidden;
  margin-bottom: 15px;
  transition: var(--transition);
  background: var(--body-background-color);
}
.offcanvas__dropdown--language.active {
  opacity: 1;
  visibility: visible;
  margin-bottom: 8px;
}

/*
      main header css here
  */
.main__header {
  padding: 1.5rem 0;
}
.main__header.sticky {
  border-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .main__header {
    padding: 2rem 0;
  }
}
@media only screen and (min-width: 1600px) {
  .main__header {
    padding: 2.5rem 0;
  }
}
.main__header--inner {
  gap: 3rem;
}
@media only screen and (max-width: 575px) {
  .main__header--inner {
    gap: 1.5rem;
  }
}

@media only screen and (max-width: 991px) {
  .main__logo {
    padding-left: 6rem;
  }
}
@media only screen and (max-width: 767px) {
  .main__logo {
    padding-left: 4.5rem;
  }
}
@media only screen and (max-width: 575px) {
  .main__logo {
    padding-left: 0;
  }
}
.main__logo--link {
  display: block;
}
.main__logo--title {
  line-height: 1;
}

/*
      Search box css here
  */
.header__select--categories {
  position: relative;
}
.header__select--categories::after {
  position: absolute;
  content: "";
  background: var(--border-color);
  width: 0.2rem;
  height: 3rem;
  right: 0;
  top: 50%;
  transform: translatey(-50%);
}

.header__select--inner {
  border: 0;
  background: var(--body-background-color);
  height: 4.5rem;
  padding: 0 3.2rem 0 1.5rem;
  border-radius: 5px 0 0 5px;
  -webkit-appearance: none;
  cursor: pointer;
  font-size: 1.4rem;
}
@media only screen and (min-width: 1200px) {
  .header__select--inner {
    padding: 0 3.5rem 0 1.7rem;
    font-size: 1.5rem;
  }
}

.header__search--form {
  border: 1px solid var(--border-color);
  padding: 2px;
  background: var(--body-background-color);
}
.header__search--box {
  position: relative;
  width: 380px;
}
@media only screen and (min-width: 1200px) {
  .header__search--box {
    width: 400px;
  }
}
.header__search--input {
  width: 100%;
  border: 0;
  height: 4.5rem;
  border-radius: 0 5px 5px 0;
  padding: 0 110px 0 16px;
}
.header__search--input:focus::-webkit-input-placeholder {
  color: #000000;
}
@media only screen and (min-width: 1200px) {
  .header__search--input {
    padding: 0 120px 0 16px;
  }
}
.header__search--button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border: 0;
  padding: 0 1.5rem;
  border-radius: 0.5rem;
  background: var(--secondary-color);
}
.header__search--button:hover {
  background: var(--hover-color);
}
@media only screen and (min-width: 1200px) {
  .header__search--button {
    padding: 0 22px;
  }
}
.header__search--button.bg__hover {
  background: var(--hover-color);
}
.header__search--button.bg__hover:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}

.predictive__search--title {
  margin-bottom: 20px;
  color: var(--primary-color);
}
@media only screen and (min-width: 768px) {
  .predictive__search--title {
    margin-bottom: 22px;
  }
}
@media only screen and (min-width: 1200px) {
  .predictive__search--title {
    margin-bottom: 30px;
  }
}
.predictive__search--box {
  background: var(--body-background-color);
  box-shadow: 0 -4px 27px rgba(62, 70, 120, 0.16);
  position: relative;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
  transition: all 0.3s ease 0s;
  transform: translateY(-100%);
}
.predictive__search--box.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.predictive__search--box__inner {
  padding: 20px 16px;
  text-align: center;
}
@media only screen and (min-width: 576px) {
  .predictive__search--box__inner {
    padding: 22px 50px;
  }
}
@media only screen and (min-width: 768px) {
  .predictive__search--box__inner {
    padding: 30px 80px;
  }
}
@media only screen and (min-width: 992px) {
  .predictive__search--box__inner {
    padding: 30px 150px;
  }
}
.predictive__search--form {
  width: 100%;
  position: relative;
}
.predictive__search--input {
  width: 100%;
  height: 4.5rem;
  border: 1px solid var(--border-color);
  padding: 0 80px 0 15px;
  font-size: 1.6rem;
  font-weight: 400;
  border-radius: 5px;
}
.predictive__search--input:focus {
  border-color: var(--secondary-color);
}
.predictive__search--input:focus::-webkit-input-placeholder {
  color: #000000;
}
@media only screen and (min-width: 1200px) {
  .predictive__search--input {
    height: 5rem;
  }
}
.predictive__search--button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 0;
  border: 0;
  width: 6rem;
  text-align: center;
  border-radius: 0 5px 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
}
.predictive__search--button:hover {
  background: var(--secondary-color);
}
.predictive__search--close__btn {
  position: absolute;
  top: 20px;
  right: 40px;
  padding: 0;
  border: 0;
  background: inherit;
}
@media only screen and (max-width: 576px) {
  .predictive__search--close__btn {
    right: 15px;
  }
}
.predictive__search--close__btn:hover {
  color: var(--secondary-color);
  transform: scale(1.3);
}
.predictive__search--close__btn > * {
  pointer-events: none;
}

/*
      header bottom css here
  */
.header__bottom--inner {
  gap: 2.3rem;
}
@media only screen and (min-width: 1200px) {
  .header__bottom--inner {
    gap: 3rem;
  }
}

/*
      header account css here
  */
.header__account.header__sticky--block {
  display: none;
}
.header__account--wrapper {
  gap: 1.8rem;
}
@media only screen and (min-width: 576px) {
  .header__account--wrapper {
    gap: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .header__account--wrapper {
    gap: 2rem;
  }
}
.header__account--btn {
  position: relative;
}
.header__account--btn:hover {
  color: var(--hover-color);
}
.header__account--btn:hover span {
  color: var(--hover-color);
}
.header__account--btn > * {
  pointer-events: none;
}
@media only screen and (max-width: 1199px) {
  .header__account--btn__text {
    display: none;
  }
}

.items__count {
  position: absolute;
  left: 7px;
  top: -10px;
  width: 1.7rem;
  height: 1.7rem;
  font-size: 1.1rem;
  line-height: 2rem;
  background: var(--hover-color);
  text-align: center;
  border-radius: 50%;
  color: var(--body-text-color) !important;
}
@media only screen and (min-width: 576px) {
  .items__count {
    left: 0.8rem;
    top: -0.8rem;
  }
}

/*
      main menu css here
  */
.header__menu.header__sticky--block {
  display: none !important;
}
.header__menu--wrapper {
  gap: 2.5rem;
}
@media only screen and (min-width: 1200px) {
  .header__menu--wrapper {
    gap: 3.5rem;
  }
}
.header__menu--items {
  position: relative;
  padding: 1.2rem 0;
}
.header__menu--items:hover .header__menu--link {
  color: var(--secondary-color) !important;
}
.header__menu--items:hover .header__menu--link::before {
  width: 100%;
}
.header__menu--items:hover .header__sub--menu {
  visibility: visible;
  margin-top: 0;
  opacity: 1;
}
.header__menu--items:hover .header__mega--menu__wrapper {
  visibility: visible;
  margin-top: 0;
  opacity: 1;
}
.header__menu--link {
  font-size: 1.5rem;
  line-height: 3.1rem;
  text-transform: capitalize;
  border-radius: 2rem;
  color: var(--primary-color);
  position: relative;
}
.header__menu--link::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0.1rem;
  background: #161880;
  transition: var(--transition);
  bottom: 0;
  left: 0;
}

.menu_border--none .header__menu--link::before {
  display: none;
}

.menu__arrowdown--icon {
  margin-left: 3px;
}

.header__sub--menu {
  position: absolute;
  z-index: 9;
  top: 100%;
  left: 0;
  visibility: hidden;
  width: 230px;
  margin: 0;
  margin-top: 10px;
  padding: 20px;
  list-style: none;
  transition: var(--transition);
  opacity: 0;
  background-color: var(--body-background-color);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}
.header__sub--menu__link {
  font-size: 1.4rem;
  display: block;
  line-height: 2.2rem;
  padding: 8px 0;
  color: var(--primary-color);
}

.mega__menu--items {
  position: static;
}

.header__mega--menu {
  display: flex;
  flex-wrap: wrap;
  max-width: 962px;
  margin: 0 auto;
}
.header__mega--menu__wrapper {
  position: absolute;
  z-index: 9;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 0;
  margin-top: 10px;
  padding: 20px;
  list-style: none;
  transition: var(--transition);
  visibility: hidden;
  opacity: 0;
  background-color: var(--body-background-color);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}
@media only screen and (min-width: 1200px) {
  .header__mega--menu {
    max-width: 1170px;
  }
}
@media only screen and (min-width: 1366px) {
  .header__mega--menu {
    max-width: 1260px;
  }
}
.header__mega--menu__li {
  padding: 3px 15px;
  width: 18%;
}
.header__mega--menu__li.banner__child {
  width: 28%;
}
.header__mega--menu__banner {
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}
.header__mega--menu__banner:hover .header__mega--menu__banner--img {
  transform: scale(1.03);
}
.header__mega--menu__banner--img {
  border-radius: 5px;
}

.header__mega--sub__menu--title {
  font-size: 1.4rem;
  line-height: 2rem;
  padding: 0.8rem 0;
  color: var(--primary-color);
}

.header__mega--menu__banner__btn {
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
  left: 3rem;
}

/*
      End main menu css here
  */
.header__coupon--text {
  font-family: var(--jost-fonts);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-white-color);
  border-left: 1px solid #234283;
  padding: 1.5rem 0 1.5rem 2rem;
}
@media only screen and (max-width: 767px) {
  .header__coupon--text {
    display: none;
  }
}

/*
      minicart css here
  */
.offCanvas__minicart {
  position: fixed;
  width: 302px;
  height: 100%;
  padding: 20px 15px 33px;
  background: var(--body-background-color);
  z-index: 999;
  right: 0;
  top: 0;
  transition: 0.4s;
  transform: translateX(100%);
  overflow-y: auto;
  box-shadow: 0 0 15px rgba(5, 0, 0, 0.1);
}
.offCanvas__minicart.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
@media only screen and (min-width: 480px) {
  .offCanvas__minicart {
    width: 375px;
  }
}

.minicart__header--top {
  margin-bottom: 10px;
}
.minicart__header--desc {
  font-size: 1.5rem;
  color: var(--foreground-sub-color);
}

.minicart__title {
  font-weight: 500;
  font-size: 1.8rem;
  color: var(--primary-color);
}

.minicart__close--btn {
  padding: 0;
  background: inherit;
  border: 0;
  line-height: 1.5rem;
  color: var(--black-color);
}
.minicart__close--btn:hover {
  color: var(--secondary-color);
  transform: scale(1.3);
}
.minicart__close--btn > * {
  pointer-events: none;
}

.minicart__close--icon {
  width: 22px;
}

.minicart__product {
  margin-bottom: 17px;
}
.minicart__product--items {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border-color);
}
.minicart__product--remove {
  border: 0;
  padding: 0;
  background: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-decoration: underline;
  font-weight: 500;
  color: var(--primary-color);
  opacity: 0.7;
}
.minicart__product--remove:hover {
  color: var(--secondary-color);
}

.minicart__thumb {
  width: 100px;
  line-height: 1;
}
@media only screen and (min-width: 480px) {
  .minicart__thumb {
    width: 120px;
  }
}

.minicart__text {
  width: calc(100% - 100px);
  padding-left: 10px;
}
@media only screen and (min-width: 480px) {
  .minicart__text {
    width: calc(100% - 120px);
    padding-left: 13px;
  }
}

.minicart__subtitle {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 2px;
}
.minicart__subtitle a {
  color: var(--primary-color);
}

.color__variant {
  opacity: 0.8;
  margin-bottom: 4px;
  line-height: 20px;
  font-size: 1.5rem;
}

.minicart__price {
  margin-bottom: 9px;
}

.minicart__current--price {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--secondary-color);
}

.minicart__old--price {
  font-size: 1.3rem;
  color: var(--foreground-sub-color);
  font-weight: 500;
  margin-left: 4px;
  text-decoration: line-through;
}

.minicart__quantity {
  margin-right: 15px;
}

.quantity__box {
  text-align: center;
  display: flex;
}

.quantity__value {
  display: inline-block;
  border: 1px solid var(--border-color);
  margin: 0px;
  width: 3.3rem;
  height: 3rem;
  text-align: center;
  padding: 0;
  background: var(--bg-offwhite-color);
  cursor: pointer;
  font-size: 2rem;
  font-weight: 700;
}
.quantity__value.decrease {
  margin-right: -4px;
  border-radius: 13px 0 0 13px;
}
.quantity__value.increase {
  margin-left: -4px;
  border-radius: 0 13px 13px 0;
}

input.quantity__number {
  text-align: center;
  border: none;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin: 0px;
  width: 3.3rem;
  height: 3rem;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.minicart__amount {
  padding: 13px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.minicart__amount_list {
  margin-bottom: 10px;
}
.minicart__amount_list:last-child {
  margin-bottom: 0;
}
.minicart__amount_list span {
  font-size: 1.5rem;
}

.minicart__conditions {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.minicart__conditions--input {
  vertical-align: middle;
  margin-right: 0.8rem;
}
.minicart__conditions--label {
  font-weight: 500;
  letter-spacing: 0.5px;
  font-size: 1.5rem;
  color: var(--primary-color);
}
.minicart__conditions--link {
  color: var(--primary-color);
  text-decoration: underline;
}
.minicart__conditions--link:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}

.minicart__button--link {
  font-size: 1.4rem;
  line-height: 4rem;
  height: 4rem;
  margin-right: 13px;
}
.minicart__button--link:last-child {
  margin-right: 0;
}

@media only screen and (max-width: 767px) {
  .support__contact {
    display: none;
  }
}
.support__contact p a {
  font-weight: 500;
}
.support__contact p a:hover {
  color: var(--hover-color);
}
.support__contact p a.hover_color:hover {
  color: var(--secondary-color);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .support__contact p span.support__contact--text {
    display: none;
  }
}

.categories__menu {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .categories__menu {
    width: 270px;
  }
}
@media only screen and (min-width: 992px) {
  .categories__menu {
    width: 260px;
  }
}
@media only screen and (max-width: 767px) {
  .categories__menu {
    width: 100%;
  }
}
.categories__menu--header {
  background: var(--secondary-color);
  height: 42px;
  padding: 0 14px;
  cursor: pointer;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .categories__menu--header {
    height: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .categories__menu--header {
    height: 55px;
  }
}
.categories__menu--header.active .categories__arrowdown--icon {
  transform: rotate(180deg);
}
.categories__menu--header.bg__primary {
  background: var(--primary-color);
}
.categories__menu--title {
  font-size: 1.4rem;
  margin-left: 16px;
  line-height: 2.2rem;
}
@media only screen and (min-width: 768px) {
  .categories__menu--title {
    margin-left: 18px;
  }
}
.categories__menu--svgicon {
  width: 19px;
  vertical-align: middle;
  opacity: 0.5;
  margin-right: 10px;
}
.categories__menu--right__arrow--icon {
  float: right;
  opacity: 0.7;
}
.categories__menu--items {
  position: relative;
}
.categories__menu--items:last-child .categories__menu--link {
  border-bottom: 0;
}
.categories__menu--items:hover .categories__submenu {
  opacity: 1;
  visibility: visible;
  top: 0;
}
@media only screen and (max-width: 991px) {
  .categories__menu--items:hover .categories__submenu {
    top: 100%;
  }
}
.categories__menu--link {
  display: block;
  font-size: 1.5rem;
  padding: 1.3rem 1.7rem;
  background: var(--bg-offwhite-color);
  border-bottom: 1px solid var(--border-color);
}
.categories__menu--link:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
  border-color: var(--secondary-color);
}

@media only screen and (max-width: 767px) {
  .categories__list--icon {
    width: 18px;
  }
}

.categories__arrowdown--icon {
  position: absolute;
  right: 15px;
  top: 44%;
  transition: 0.3s;
}

.dropdown__categories--menu {
  position: absolute;
  z-index: 9;
  width: 100%;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  top: 100%;
  opacity: 0;
  visibility: hidden;
  margin-top: 30px;
  transition: var(--transition);
  background: var(--body-background-color);
}
.dropdown__categories--menu.active {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}

.categories__submenu {
  position: absolute;
  top: 1.5rem;
  left: 100%;
  background-color: var(--body-background-color);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  width: 50rem;
  padding: 2rem;
  z-index: 9;
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 992px) {
  .categories__submenu {
    width: 65rem;
  }
}
@media only screen and (min-width: 1200px) {
  .categories__submenu {
    width: 72rem;
  }
}
@media only screen and (max-width: 991px) {
  .categories__submenu {
    width: 100%;
    left: 0;
    top: 125%;
    flex-direction: column;
  }
}
.categories__submenu--items {
  width: 22%;
  margin-right: 2.5rem;
}
@media only screen and (max-width: 991px) {
  .categories__submenu--items {
    width: 100%;
    margin-right: 0;
    position: relative;
  }
}
.categories__submenu--items:last-child {
  margin-right: 0;
}
.categories__submenu--items__text {
  font-size: 1.5rem;
  line-height: 2.5rem;
  display: block;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.8rem;
  margin-bottom: 1.2rem;
}
@media only screen and (min-width: 1200px) {
  .categories__submenu--items__text {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 991px) {
  .categories__submenu--items__text {
    padding: 1.1rem 3.5rem 1.1rem 3.5rem;
    background: var(--bg-offwhite-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
  }
}
.categories__submenu--child__items {
  padding: 0.7rem 0;
}
@media only screen and (max-width: 991px) {
  .categories__submenu--child__items {
    padding: 0;
  }
}
.categories__submenu--child__items--link {
  line-height: 2.5rem;
  color: var(--foreground-sub-color);
}
@media only screen and (min-width: 1200px) {
  .categories__submenu--child__items--link {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 991px) {
  .categories__submenu--child__items--link {
    padding: 1.1rem 3.5rem 1.1rem 4.5rem;
    background: var(--bg-offwhite-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
    display: block;
    color: var(--bg-black-color);
  }
}

.category__mobile--menu {
  display: none;
}
@media only screen and (max-width: 991px) {
  .category__mobile--menu {
    display: block;
    max-height: 360px;
    overflow-y: auto;
  }
}

.category__sub--menu {
  display: none;
}

.category__sub--menu_toggle {
  font-size: 20px;
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0.8rem;
  width: 4rem;
  height: 4.6rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
}

.category__sub--menu_toggle::before,
.category__sub--menu_toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  content: "";
  transition: var(--transition);
  transform: translateX(-50%) translateY(-50%);
  background-color: var(--bg-black-color);
}

.category__sub--menu_toggle:not(.active)::after {
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}

/*
    home Three css
  */
.menu__padding--style .header__menu--items {
  padding: 2.7rem 0;
}

@media only screen and (max-width: 991px) {
  .main__header.p-0 {
    padding: 1.8rem 0 !important;
  }
}

/*
    home four header css
  */
@media only screen and (max-width: 991px) {
  .header__section.header__transparent {
    position: inherit;
  }
}
@media only screen and (max-width: 991px) {
  .header__section.header__transparent.border__bottom {
    border-bottom: 0;
  }
}

.header__menu--items:hover .header__mega--menu__wrapper.header__design--four {
  margin-top: 1px;
}

.header__mega--menu__wrapper.header__design--four {
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.15);
}

/* 
    3. Preloader css 
*/
.ctn-preloader {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
  pointer-events: none;
}

.ctn-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}

.ctn-preloader .animation-preloader .spinner {
  -webkit-animation: spinner 1s infinite linear;
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  border: 4px solid var(--border-color);
  border-top-color: var(--bg-light-dark-color);
  height: 9em;
  margin: 0 auto 3.5em auto;
  width: 9em;
}

.ctn-preloader .animation-preloader .txt-loading {
  font-weight: 900;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--foreground-sub-color);
  font-size: 3.5rem;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
  animation: letters-loading 5s infinite;
  color: var(--body-text-color);
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: rotateY(-90deg);
  -webkit-animation: letters-loading 5s infinite;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading {
  color: rgba(0, 0, 0, 0.2);
  position: relative;
}

.ctn-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(2):before {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.ctn-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(3):before {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.ctn-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(4):before {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.ctn-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(5):before {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.ctn-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(6):before {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.ctn-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(7):before {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.ctn-preloader .loader-section {
  background: var(--body-background-color);
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}

.ctn-preloader .loader-section.section-left {
  left: 0;
}

.ctn-preloader .loader-section.section-right {
  right: 0;
}

.loaded .animation-preloader {
  opacity: 0;
  transition: 0.5s ease-out;
  -webkit-transition: 0.5s ease-out;
  -moz-transition: 0.5s ease-out;
  -ms-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
}

.loaded .loader-section.section-left {
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  transform: translateX(-101%);
}

.loaded .loader-section.section-right {
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  transform: translateX(101%);
}

/* Animación del preloader */
@-webkit-keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
/* Animación de las letras cargando del preloader */
@-webkit-keyframes letters-loading {
  0%,
  75%,
  100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
@keyframes letters-loading {
  0%,
  75%,
  100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
/* Tamaño de portatil hacia atras (portatil, tablet, celular) */
@media screen and (max-width: 767px) {
  /* Preloader */
  /* Spinner cargando */
  .ctn-preloader .animation-preloader .spinner {
    height: 8em;
    width: 8em;
  }
  /* Texto cargando */
  .ctn-preloader .animation-preloader .txt-loading {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 500px) {
  .ctn-preloader .animation-preloader .spinner {
    height: 7em;
    width: 7em;
  }
}
/*
    4. hero slider css
*/
.hero__slider--section.mb-30 {
  margin-bottom: 3rem;
}

.hero__slider--container {
  gap: 3rem;
}
@media only screen and (max-width: 991px) {
  .hero__slider--container {
    flex-wrap: wrap;
  }
}

@media only screen and (max-width: 767px) {
  .hero__slider--inner {
    padding-bottom: 4.5rem;
  }
}

.slideshow__content {
  position: absolute;
  top: 50%;
  left: 2.5rem;
  transform: translatey(-50%);
}
@media only screen and (min-width: 768px) {
  .slideshow__content {
    left: 5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slideshow__content {
    left: 7rem;
  }
}
@media only screen and (max-width: 767px) {
  .slideshow__content {
    text-align: center;
    position: inherit;
    top: inherit;
    transform: inherit;
    left: inherit;
    margin-top: 3rem;
  }
}

@media only screen and (max-width: 991px) {
  .slider__content--maintitle.mb-20 {
    margin-bottom: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .slider__content--maintitle.mb-20 {
    margin-bottom: 1.2rem;
  }
}
@media only screen and (max-width: 767px) {
  .slider__content--maintitle.mb-50 {
    margin-bottom: 2rem;
  }
}
.slider__content--maintitle span {
  font-weight: 400;
}
@media only screen and (max-width: 767px) {
  .slider__content--maintitle.text-white {
    color: var(--primary-color) !important;
  }
}
.slider__content--subtitle {
  font-size: 1.7rem;
  line-height: 2.2rem;
  font-weight: 400;
}
@media only screen and (min-width: 768px) {
  .slider__content--subtitle {
    font-size: 1.8rem;
    line-height: 2.2rem;
  }
}
@media only screen and (min-width: 992px) {
  .slider__content--subtitle {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__content--subtitle {
    font-size: 2.2rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 1366px) {
  .slider__content--subtitle {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
}
.slider__content--subtitle.d-flex {
  gap: 1.2rem;
}
@media only screen and (max-width: 767px) {
  .slider__content--subtitle.d-flex {
    justify-content: center;
  }
}
.slider__content--price {
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 600;
  color: var(--secondary-color);
}
.slider__content--price.mb-40 {
  margin-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
  .slider__content--price {
    font-size: 1.8rem;
    line-height: 2.5rem;
  }
  .slider__content--price.mb-40 {
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .slider__content--price.mb-40 {
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__content--price {
    font-size: 2rem;
  }
  .slider__content--price.mb-40 {
    margin-bottom: 3.5rem;
  }
}
@media only screen and (min-width: 1366px) {
  .slider__content--price {
    font-size: 2.2rem;
  }
  .slider__content--price.mb-40 {
    margin-bottom: 4rem;
  }
}
.slider__content--price__text {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--primary-color);
  margin-right: 0.5rem;
}
@media only screen and (min-width: 768px) {
  .slider__content--price__text {
    font-size: 1.5rem;
  }
}
.slider__content--badge {
  background: var(--hover-color);
  line-height: 3rem;
  padding: 0 1.2rem;
  font-size: 1.3rem;
  border-radius: 2rem;
}
.slider__content--desc {
  font-size: 1.6rem;
  line-height: 2.3rem;
  opacity: 0.7;
}
@media only screen and (min-width: 768px) {
  .slider__content--desc {
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 992px) {
  .slider__content--desc {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__content--desc {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 1600px) {
  .slider__content--desc {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .slider__content--desc.text-white {
    color: var(--primary-color) !important;
  }
}
@media only screen and (max-width: 575px) {
  .slider__content--desc.mb-40 {
    margin-bottom: 2rem;
  }
}

.slideshow__media img {
  width: 100%;
}
.slideshow__media img.height_515 {
  height: 260px;
  -o-object-fit: cover;
  object-fit: cover;
  height: auto;
}
@media only screen and (min-width: 768px) {
  .slideshow__media img.height_515 {
    height: 370px;
  }
}
@media only screen and (min-width: 992px) {
  .slideshow__media img.height_515 {
    height: 408px;
  }
}
@media only screen and (min-width: 1200px) {
  .slideshow__media img.height_515 {
    height: 438px;
  }
}
@media only screen and (min-width: 1366px) {
  .slideshow__media img.height_515 {
    height: 482px;
  }
}
@media only screen and (min-width: 1600px) {
  .slideshow__media img.height_515 {
    height: 515px;
  }
}
.slideshow__media img.height_650 {
  -o-object-fit: cover;
  object-fit: cover;
}
@media only screen and (min-width: 768px) {
  .slideshow__media img.height_650 {
    height: 35rem;
  }
}
@media only screen and (min-width: 992px) {
  .slideshow__media img.height_650 {
    height: 42rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slideshow__media img.height_650 {
    height: 50rem;
  }
}
@media only screen and (min-width: 1366px) {
  .slideshow__media img.height_650 {
    height: 55rem;
  }
}
@media only screen and (min-width: 1600px) {
  .slideshow__media img.height_650 {
    height: 65rem;
  }
}

@media only screen and (max-width: 767px) {
  .slider__pagination {
    bottom: 0 !important;
  }
}

/*
    home two slider css
*/
.slideshow__container {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translatey(-50%);
}
@media only screen and (max-width: 767px) {
  .slideshow__container {
    text-align: center;
    position: inherit;
    top: inherit;
    transform: inherit;
    left: inherit;
    margin-top: 3rem;
  }
}

.slider__sticker--img {
  position: absolute;
  top: -30px;
  left: 49%;
}
@media only screen and (max-width: 1599px) {
  .slider__sticker--img {
    max-width: 20rem;
  }
}
@media only screen and (max-width: 1199px) {
  .slider__sticker--img {
    max-width: 14rem;
    top: 0;
  }
}
@media only screen and (max-width: 991px) {
  .slider__sticker--img {
    max-width: 10rem;
  }
}
@media only screen and (max-width: 767px) {
  .slider__sticker--img {
    max-width: 8rem;
    top: 30px;
    left: 20%;
  }
}
@media only screen and (max-width: 479px) {
  .slider__sticker--img {
    max-width: 6rem;
  }
}

/*
    home three slider css
*/
.slider__sticker--img.style2 {
  width: auto !important;
  top: 3rem;
  left: 11%;
  right: auto;
}
@media only screen and (min-width: 768px) {
  .slider__sticker--img.style2 {
    top: 3rem;
    left: auto;
    right: 8%;
  }
}
@media only screen and (min-width: 992px) {
  .slider__sticker--img.style2 {
    top: 6rem;
    right: 12%;
  }
}
@media only screen and (max-width: 1599px) {
  .slider__sticker--img.style2 {
    max-width: 12rem;
  }
}
@media only screen and (max-width: 1365px) {
  .slider__sticker--img.style2 {
    max-width: 10rem;
  }
}
@media only screen and (max-width: 991px) {
  .slider__sticker--img.style2 {
    max-width: 8rem;
  }
}
@media only screen and (max-width: 767px) {
  .slider__sticker--img.style2 {
    max-width: 6rem;
  }
}

.slideshow__media img.height_770 {
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}
@media only screen and (min-width: 768px) {
  .slideshow__media img.height_770 {
    height: 37rem;
  }
}
@media only screen and (min-width: 992px) {
  .slideshow__media img.height_770 {
    height: 44rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slideshow__media img.height_770 {
    height: auto;
  }
}
@media only screen and (min-width: 1600px) {
  .slideshow__media img.height_770 {
    height: 77rem;
  }
}

/*
    home four slider css
*/
.slider__sticker--img.style3 {
  width: auto !important;
  top: 28%;
}
@media only screen and (max-width: 1365px) {
  .slider__sticker--img.style3 {
    max-width: 14rem;
  }
}
@media only screen and (max-width: 1199px) {
  .slider__sticker--img.style3 {
    max-width: 10rem;
  }
}
@media only screen and (max-width: 991px) {
  .slider__sticker--img.style3 {
    max-width: 7rem;
  }
}

@media only screen and (min-width: 992px) {
  .slideshow__container.padding-top-100 {
    padding-top: 10rem;
  }
}

.slideshow__media img {
  transform: scale(1.1);
}
.slideshow__media img.height_870 {
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}
@media only screen and (min-width: 768px) {
  .slideshow__media img.height_870 {
    height: 39rem;
  }
}
@media only screen and (min-width: 992px) {
  .slideshow__media img.height_870 {
    height: 52rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slideshow__media img.height_870 {
    height: 62rem;
  }
}
@media only screen and (min-width: 1366px) {
  .slideshow__media img.height_870 {
    height: auto;
  }
}

.swiper-slide-active .slideshow__media img {
  transform: scale(1);
}

.swiper-slide-active .slider__content > * {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.swiper-slide-active .slider__content--subtitle {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.swiper-slide-active .slider__content--maintitle {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.swiper-slide-active .slider__content--price {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.swiper-slide-active .slider__content--desc {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.swiper-slide-active .slider__content--btn {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

/*
    5. banner css
*/
@media only screen and (min-width: 992px) {
  .hero__slider--banner.min-width-322 {
    min-width: 25rem;
  }
}
@media only screen and (min-width: 1200px) {
  .hero__slider--banner.min-width-322 {
    min-width: 27rem;
  }
}
@media only screen and (min-width: 1366px) {
  .hero__slider--banner.min-width-322 {
    min-width: 30rem;
  }
}
@media only screen and (min-width: 1600px) {
  .hero__slider--banner.min-width-322 {
    min-width: 32rem;
  }
}
@media only screen and (max-width: 767px) {
  .hero__slider--banner.min-width-322 {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 991px) {
  .hero__slider--banner {
    display: flex;
    gap: 3rem;
    width: 100%;
  }
  .hero__slider--banner .banner__items {
    width: 50%;
  }
  .hero__slider--banner .banner__items.mb-30 {
    margin-bottom: 0;
  }
}

.banner__items {
  overflow: hidden;
}
.banner__items:hover .text--with__banner--media {
  transform: scale(1.03);
}

.banner__content--position {
  position: absolute;
  top: 50%;
  left: 2.5rem;
  transform: translatey(-50%);
}
@media only screen and (min-width: 1200px) {
  .banner__content--position {
    left: 2.8rem;
  }
}
@media only screen and (max-width: 479px) {
  .banner__content--position {
    left: 2rem;
  }
}

@media only screen and (max-width: 991px) {
  .text--with__banner--media {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .text--with__banner--media.height_sm_200 {
    height: 20rem;
    -o-object-fit: cover;
    object-fit: cover;
  }
}
@media only screen and (max-width: 479px) {
  .text--with__banner--media.height_sm_u_200 {
    height: 20rem;
    -o-object-fit: cover;
    object-fit: cover;
  }
}
@media only screen and (max-width: 479px) {
  .text--with__banner--media.height_sm_u_250 {
    height: 25rem;
    -o-object-fit: cover;
    object-fit: cover;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .text--with__banner--media.height_md_280 {
    height: 28rem;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

.banner__content--title {
  font-size: 1.7rem;
  line-height: 2.3rem;
  font-weight: 500;
  color: var(--primary-color);
}
@media only screen and (min-width: 480px) {
  .banner__content--title {
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 992px) {
  .banner__content--title {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content--title {
    font-size: 2.2rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__content--title.mb-15 {
    margin-bottom: 2rem;
  }
}
@media only screen and (max-width: 479px) {
  .banner__content--title.mb-15 {
    font-size: 1.5rem;
  }
}
.banner__content--title.font-50 {
  font-size: 2.2rem;
  line-height: 3rem;
}
@media only screen and (min-width: 480px) {
  .banner__content--title.font-50 {
    font-size: 2.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .banner__content--title.font-50 {
    font-size: 3rem;
    line-height: 3.8rem;
  }
}
@media only screen and (min-width: 992px) {
  .banner__content--title.font-50 {
    font-size: 3.5rem;
    line-height: 4.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content--title.font-50 {
    font-size: 4rem;
    line-height: 5.5rem;
  }
}
@media only screen and (min-width: 1366px) {
  .banner__content--title.font-50 {
    font-size: 5rem;
    line-height: 6.2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .banner__content--title {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}
.banner__content--title.line-height-35 {
  line-height: 2.5rem;
}
@media only screen and (min-width: 576px) {
  .banner__content--title.line-height-35 {
    line-height: 3rem;
  }
}
@media only screen and (min-width: 992px) {
  .banner__content--title.line-height-35 {
    line-height: 3.5rem;
  }
}
.banner__content--desc {
  line-height: 2.2rem;
  color: var(--foreground-sub-color);
  width: 80%;
}
@media only screen and (min-width: 576px) {
  .banner__content--desc {
    width: 75%;
  }
}
@media only screen and (min-width: 992px) {
  .banner__content--desc {
    width: 74%;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content--desc {
    width: 62%;
  }
}
.banner__content--desc.width-100 {
  width: 100%;
}
.banner__content--desc.font-18 {
  font-size: 1.5rem;
  line-height: 2.6rem;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .banner__content--desc.font-18 {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 992px) {
  .banner__content--desc.font-18 {
    font-size: 1.7rem;
    line-height: 3rem;
    width: 80%;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content--desc.font-18 {
    font-size: 1.8rem;
    line-height: 3.2rem;
  }
}
@media only screen and (max-width: 1365px) {
  .banner__content--desc.mb-25 {
    margin-bottom: 2rem;
  }
}
@media only screen and (max-width: 1365px) {
  .banner__content--desc.mb-30 {
    margin-bottom: 2.5rem;
  }
}
@media only screen and (max-width: 991px) {
  .banner__content--desc.mb-30 {
    margin-bottom: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .banner__content--desc.mb-30 {
    margin-bottom: 1.5rem;
  }
}
@media only screen and (max-width: 991px) {
  .banner__content--desc.tablet_u_none {
    display: none;
  }
}
.banner__content--btn {
  padding: 0 2rem;
}
@media only screen and (max-width: 767px) {
  .banner__content--btn {
    padding: 0 1.5rem;
  }
}
.banner__content--subtitle {
  font-size: 1.6rem;
  color: var(--foreground-sub-color);
  font-weight: 500;
}
@media only screen and (max-width: 479px) {
  .banner__content--subtitle {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
.banner__content--subtitle.text__hover {
  color: var(--hover-color);
}
.banner__content--price {
  font-size: 1.8rem;
  color: var(--secondary-color);
  font-weight: 600;
  margin-left: 0.5rem;
}
.banner__content--price.hover__color {
  color: var(--hover-color);
}

.banner__bg {
  background: url(../img/banner/banner-bg-1.png);
  padding: 6rem 0;
}
@media only screen and (min-width: 768px) {
  .banner__bg {
    padding: 3rem 0;
  }
}

.banner__layer--thumbnail.text-right .banner__layer--media {
  margin: 0 0 0 auto;
}

.banner__badge {
  width: 8rem;
  height: 8rem;
  background: var(--hover-color);
  position: absolute;
  top: 76%;
  left: 38%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: translatey(-50%);
}
@media only screen and (min-width: 992px) {
  .banner__badge {
    width: 9rem;
    height: 9rem;
    top: 68%;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__badge {
    width: 11rem;
    height: 11rem;
  }
}
@media only screen and (min-width: 1366px) {
  .banner__badge {
    top: 50%;
    left: 48%;
  }
}
.banner__badge--text {
  font-size: 1.4rem;
  line-height: 2.5rem;
  color: var(--text-white-color);
}
@media only screen and (min-width: 992px) {
  .banner__badge--text {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__badge--text {
    font-size: 1.8rem;
    line-height: 3rem;
  }
}
.banner__badge--text__inner {
  font-size: 1.6rem;
  display: block;
  font-weight: 500;
}
@media only screen and (min-width: 992px) {
  .banner__badge--text__inner {
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__badge--text__inner {
    font-size: 2.2rem;
  }
}
.banner__badge.discount {
  width: 7.2rem;
  height: 7.2rem;
  top: 64%;
  left: 45%;
  background: var(--body-background-color);
  border: 2px solid var(--hover-color);
}
@media only screen and (min-width: 992px) {
  .banner__badge.discount {
    width: 8.2rem;
    height: 8.2rem;
  }
}

.badge__discount--text {
  color: var(--primary-color);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2rem;
}
@media only screen and (min-width: 992px) {
  .badge__discount--text {
    font-size: 2.2rem;
    line-height: 2.4rem;
  }
}
.badge__discount--text__inner {
  font-size: 1.3rem;
  font-weight: 400;
}
@media only screen and (min-width: 992px) {
  .badge__discount--text__inner {
    font-size: 1.4rem;
  }
}

.col_width_65 {
  width: 65%;
}
@media only screen and (max-width: 767px) {
  .col_width_65 {
    width: 50%;
  }
}
@media only screen and (max-width: 575px) {
  .col_width_65 {
    width: 100%;
  }
}

.col_width_35 {
  width: 35%;
}
@media only screen and (max-width: 767px) {
  .col_width_35 {
    width: 50%;
  }
}
@media only screen and (max-width: 575px) {
  .col_width_35 {
    width: 100%;
  }
}

/*
    home two banner css
*/
.banner__content.style2 {
  top: 1.5rem;
  left: 2.5rem;
  transform: inherit;
  position: absolute;
}
@media only screen and (min-width: 768px) {
  .banner__content.style2 {
    top: 2rem;
    left: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content.style2 {
    top: 3rem;
  }
}

.banner__style--title {
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 400;
  color: var(--text-white-color);
  margin-bottom: 0.5rem;
}
@media only screen and (min-width: 576px) {
  .banner__style--title {
    font-size: 2.2rem;
    line-height: 3.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__style--title {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
}
@media only screen and (min-width: 1366px) {
  .banner__style--title {
    font-size: 3rem;
    line-height: 4rem;
  }
}
.banner__style--title span {
  color: var(--hover-color);
  font-weight: 500;
}
.banner__style--title span.color__secondary {
  color: var(--secondary-color);
}

.banner__bg2 {
  background: url(../img/banner/banner-bg-2.png);
  padding: 3rem 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media only screen and (max-width: 767px) {
  .banner__bg2 {
    padding: 6rem 0;
  }
}

.banner__deals--content__subtitle {
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: var(--hover-color);
}
@media only screen and (min-width: 576px) {
  .banner__deals--content__subtitle {
    font-size: 1.8rem;
    line-height: 2.6rem;
  }
}
@media only screen and (min-width: 768px) {
  .banner__deals--content__subtitle {
    font-size: 2rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 992px) {
  .banner__deals--content__subtitle {
    font-size: 2.2rem;
    line-height: 3rem;
  }
}

.banner__countdown--title {
  font-size: 1.6rem;
}
@media only screen and (min-width: 576px) {
  .banner__countdown--title {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 767px) {
  .banner__countdown .countdown__wrapper {
    justify-content: center;
  }
}
.banner__countdown .countdown__item {
  width: 6rem;
  padding: 0.3rem;
  background: var(--body-background-color);
  border: 1px solid var(--hover-color);
  text-align: center;
  border-radius: 0 1rem;
}
@media only screen and (min-width: 576px) {
  .banner__countdown .countdown__item {
    width: 6.5rem;
    padding: 0.3rem;
  }
}
@media only screen and (min-width: 768px) {
  .banner__countdown .countdown__item {
    width: 7rem;
    padding: 0.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .banner__countdown .countdown__item {
    width: 8rem;
  }
}
.banner__countdown .countdown__number {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5rem;
}
@media only screen and (min-width: 992px) {
  .banner__countdown .countdown__number {
    font-size: 1.6rem;
    line-height: 1.6rem;
  }
}
@media only screen and (min-width: 992px) {
  .banner__countdown .countdown__number {
    font-size: 1.8rem;
    line-height: 1.8rem;
  }
}
.banner__countdown .countdown__text {
  font-size: 1.3rem;
  line-height: 1.5rem;
  opacity: 0.7;
  text-transform: capitalize;
}
@media only screen and (min-width: 992px) {
  .banner__countdown .countdown__text {
    font-size: 1.4rem;
    line-height: 1.6rem;
  }
}

/*
    home three banner css
*/
.banner__content--style3__desc {
  line-height: 2rem;
}
.banner__content--style3__title {
  font-size: 1.8rem;
  line-height: 2.5rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 768px) {
  .banner__content--style3__title {
    font-size: 2rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content--style3__title {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
}
@media only screen and (max-width: 1199px) {
  .banner__content--style3__title.mb-20 {
    margin-bottom: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .banner__content--style3__title.mb-20 {
    margin-bottom: 1.2rem;
  }
}
.banner__content--style3__btn {
  line-height: 3.3rem;
  height: 3.3rem;
  padding: 0 1.5rem;
}
@media only screen and (min-width: 768px) {
  .banner__content--style3__btn {
    line-height: 3.8rem;
    height: 3.8rem;
    padding: 0 1.8rem;
  }
}

.banner__bg3 {
  background: url(../img/banner/banner-bg-3.png);
  padding: 6rem 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media only screen and (min-width: 768px) {
  .banner__bg3 {
    padding: 5rem 0;
  }
}

@media only screen and (min-width: 992px) {
  .banner__content.padding-left-100 {
    padding-left: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content.padding-left-100 {
    padding-left: 10rem;
  }
}

/*
    home four banner css
*/
.sidebar__banner--content {
  position: absolute;
  left: 2rem;
  right: 2rem;
  top: 3rem;
}
@media only screen and (min-width: 768px) {
  .sidebar__banner--content {
    left: 2.5rem;
    right: 2.5rem;
  }
}
.sidebar__banner--content__subtitle {
  font-size: 1.3rem;
  line-height: 1.5rem;
}
.sidebar__banner--content__title {
  font-size: 1.8rem;
  line-height: 2.8rem;
}
@media only screen and (min-width: 768px) {
  .sidebar__banner--content__title {
    font-size: 2rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 1366px) {
  .sidebar__banner--content__title {
    font-size: 2.3rem;
    line-height: 3.2rem;
  }
}
.sidebar__banner--content__desc {
  font-size: 1.3rem;
  line-height: 2.3rem;
  font-weight: 500;
  color: var(--foreground-sub-color);
}
.sidebar__banner--content__btn {
  font-size: 1.1rem;
  height: 3.2rem;
  line-height: 3.2rem;
  padding: 0 1.2rem;
  font-weight: 500;
}
.sidebar__banner--content__btn.bg__white {
  background: var(--body-background-color);
  color: var(--primary-color);
}
.sidebar__banner--content__btn.bg__white:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}

.deals__banner--content.position-absolute {
  top: 50%;
  left: 0;
  right: 0;
  transform: translatey(-50%);
}
@media only screen and (max-width: 767px) {
  .deals__banner--content.position-absolute {
    position: inherit !important;
    transform: inherit;
    margin-top: 3rem;
  }
}

.banner__countdown.style2 .countdown__item {
  border-radius: 1rem;
}

.banner__content--title.mb-40 {
  margin-bottom: 2rem;
}
@media only screen and (min-width: 992px) {
  .banner__content--title.mb-40 {
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content--title.mb-40 {
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 1366px) {
  .banner__content--title.mb-40 {
    margin-bottom: 4rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__countdown.mb-50 {
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__countdown.mb-50 {
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 1366px) {
  .banner__countdown.mb-50 {
    margin-bottom: 5rem;
  }
}

.banner__section--media img.height-640 {
  -o-object-fit: cover;
  object-fit: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner__section--media img.height-640 {
    height: 40rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__section--media img.height-640 {
    height: 370px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 991px) {
  .product__sidebar--banner {
    display: flex;
    gap: 3rem;
    justify-content: center;
  }
  .product__sidebar--banner .banner__items.mb-30 {
    margin-bottom: 0;
  }
}

.banner__flex--column2 {
  gap: 3rem;
}
@media only screen and (max-width: 767px) {
  .banner__flex--column2 {
    flex-direction: column;
  }
}

/*
    6. Feature css
*/
.feature__inner {
  padding: 3rem 2rem;
  border-radius: 1rem;
}
@media only screen and (min-width: 1200px) {
  .feature__inner {
    padding: 3.5rem;
  }
}
@media only screen and (max-width: 1199px) {
  .feature__inner {
    flex-wrap: wrap;
    gap: 3rem;
  }
}

.feature__items {
  gap: 2rem;
  position: relative;
}
.feature__items::before {
  position: absolute;
  content: "";
  width: 0.1rem;
  height: 3.8rem;
  background: var(--border-color);
  top: 50%;
  right: -3.5rem;
  transform: translatey(-50%);
}
@media only screen and (max-width: 991px) {
  .feature__items::before {
    display: none;
  }
}
.feature__items:last-child::before {
  display: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .feature__items:nth-child(3)::before {
    display: none;
  }
}

.feature__content--title {
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.feature__content--desc {
  color: var(--foreground-sub-color);
}

/*
    7. Collection css
*/
.collection__card--link {
  gap: 1rem;
  border: 1px solid var(--border-color);
  padding: 0.5rem 1.2rem;
  border-radius: 1rem;
}
@media only screen and (max-width: 575px) {
  .collection__card--link {
    justify-content: center;
    padding: 0.5rem 1rem;
  }
}
.collection__card--link:hover {
  border-color: var(--hover-color);
}
@media only screen and (min-width: 992px) {
  .collection__card--link {
    gap: 1.5rem;
    padding: 0.5rem 1.5rem;
  }
}
.collection__card--title {
  color: var(--primary-color);
}

.advice__area {
  padding: 2rem 0;
}
@media only screen and (min-width: 992px) {
  .advice__area {
    padding: 2.5rem 0;
  }
}

/*
    8. Product css
*/
.section__heading {
  background: var(--bg-offwhite-color);
  padding: 1.2rem 2rem 1.2rem 4rem;
  position: relative;
}
.section__heading::before {
  position: absolute;
  content: "";
  width: 1rem;
  height: 100%;
  background: var(--hover-color);
  left: 0;
  top: 0;
  border-radius: 0.6rem 0 0 0.6rem;
}
@media only screen and (max-width: 991px) {
  .section__heading {
    padding: 1.2rem 2rem 1.2rem 2.5rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section__heading.d-flex {
    gap: 2rem;
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 767px) {
  .section__heading.d-flex {
    padding: 0;
    background: inherit;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 2rem;
  }
  .section__heading.d-flex::before {
    display: none;
  }
}
@media only screen and (max-width: 479px) {
  .section__heading--title {
    font-size: 1.7rem;
  }
}

.product_swiper-padding {
  padding: 0.5rem 0.5rem 7rem;
}
@media only screen and (max-width: 767px) {
  .product_swiper-padding {
    padding: 0.5rem 0.5rem 6.5rem;
  }
}

.product__card {
  background: var(--body-background-color);
  border-radius: 5px;
  transition: var(--transition);
}
.product__card--thumbnail {
  overflow: hidden;
  border-radius: 5px 5px 0 0;
}
.product__card--thumbnail:hover .product__thumbnail--media {
  transform: scale(1.02);
}
.product__card--thumbnail:hover .secondary__img {
  opacity: 1;
  visibility: visible;
}
.product__card:hover {
  box-shadow: 0px 0 8px 0 rgba(0, 0, 0, 0.17);
  border-radius: 5px 5px 0 0;
}
.product__card:hover .product__card--action {
  opacity: 1;
  visibility: visible;
}
.product__card:hover .product__card--action__btn {
  transform: scale(1);
}
.product__card:hover .product__card--hover {
  max-height: 8.5rem;
  padding: 0 1.5rem 2rem;
  top: 100%;
  opacity: 1;
  visibility: visible;
  border-radius: 0 0 5px 5px;
  box-shadow: 0px 5px 12px 0 rgba(0, 0, 0, 0.12);
}
@media only screen and (min-width: 768px) {
  .product__card:hover .product__card--hover {
    padding: 0 2rem 2rem;
  }
}
.product__card--title {
  font-size: 1.5rem;
  line-height: 2.4rem;
  margin-bottom: 0.8rem;
}
@media only screen and (min-width: 992px) {
  .product__card--title {
    font-size: 1.6rem;
  }
}
.product__card--title a:hover {
  color: var(--secondary-color2);
}
.product__card--content {
  padding: 2rem;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .product__card--content {
    padding: 1.5rem;
  }
}
.product__card--content__inner {
  position: relative;
}
.product__card--rating {
  margin-bottom: 0.5rem;
}

.current__price {
  color: var(--secondary-color2);
  font-size: 1.5rem;
  font-weight: 500;
}
@media only screen and (max-width: 767px) {
  .current__price {
    font-size: 1.4rem;
  }
}

.old__price {
  font-size: 1.5rem;
  color: var(--foreground-sub-color);
  text-decoration: line-through;
  margin-left: 0.8rem;
}
@media only screen and (max-width: 767px) {
  .old__price {
    font-size: 1.4rem;
  }
}

.product__thumbnail--media {
  width: 100%;
  margin: 0 auto;
}

.secondary__img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.product__card--action {
  position: absolute;
  top: 2rem;
  right: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.product__card--action__list {
  margin-bottom: 0.8rem;
}
.product__card--action__list:last-child {
  margin-bottom: 0;
}
.product__card--action__btn {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--bg-offwhite-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transform: scale(0);
}
.product__card--action__btn:hover {
  background: var(--hover-color);
}

.product__card--hover {
  padding: 0 2rem;
  position: absolute;
  top: 80%;
  left: 0;
  right: 0;
  transition: var(--transition);
  max-height: 0;
  background: var(--body-background-color);
  z-index: 9;
  opacity: 0;
  visibility: hidden;
}
@media only screen and (max-width: 767px) {
  .product__card--hover {
    padding: 0 1.5rem;
  }
}

.rating {
  gap: 0.4rem;
}
.rating__icon {
  color: var(--yellow-color);
}

.rating__review--text {
  font-size: 1.3rem;
  line-height: 2rem;
  color: var(--foreground-sub-color);
  margin-left: 0.5rem;
}

.product__card--btn {
  background: var(--hover-color);
  height: 3.6rem;
  line-height: 3.6rem;
  display: block;
  text-align: center;
  border-radius: 0.5rem;
}
.product__card--btn:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}
@media only screen and (min-width: 768px) {
  .product__card--btn {
    height: 4rem;
    line-height: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  .product__card--btn {
    height: 4.3rem;
    line-height: 4.3rem;
  }
}

.product__tab--btn {
  gap: 0.5rem;
}
@media only screen and (min-width: 768px) {
  .product__tab--btn {
    padding-right: 8rem;
  }
}

.tab__btn--link {
  border: 0;
  padding: 0 1.2rem;
  height: 3.2rem;
  line-height: 3.2rem;
  background: transparent;
  font-size: 1.4rem;
  border-radius: 2rem;
}
.tab__btn--link.active {
  background: var(--hover-color);
}
.tab__btn--link:hover {
  background: var(--hover-color);
}
@media only screen and (min-width: 768px) {
  .tab__btn--link {
    height: 3.5rem;
    line-height: 3.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .tab__btn--link {
    padding: 0 2rem;
    height: 3.7rem;
    line-height: 3.7rem;
    font-size: 1.5rem;
  }
}

.product_swiper_btn {
  position: absolute;
  top: 30px;
  right: 22px;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .product_swiper_btn {
    top: 16px;
    right: 10px;
  }
}
.product_swiper_btn .swiper__nav--btn {
  opacity: 1;
  visibility: visible;
}
.product_swiper_btn .swiper__nav--btn.swiper-button-next {
  right: 0;
}
.product_swiper_btn .swiper__nav--btn.swiper-button-prev {
  left: auto;
  right: 3.5rem;
}

.product--stock-counter {
  margin-top: 1.5rem;
}

.stock--progressbar {
  width: 100%;
  height: 6px;
  background: #d9d9d9;
  border-radius: 5px;
}

span.progressbar-percentage {
  height: 100%;
  background-color: var(--secondary-color2);
  display: block;
  border-radius: 5px;
}

.product__items--sold__stocks {
  padding-top: 1rem;
}

.product__items--sold__stocks--text {
  line-height: 1.8rem;
  color: var(--foreground-sub-color);
}

.product__countdown {
  gap: 2rem;
}
.product__countdown .countdown__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.product__countdown .countdown__number {
  font-size: 1.5rem;
  font-weight: 500;
}
.product__countdown .countdown__text {
  color: var(--foreground-sub-color);
  text-transform: capitalize;
}
.product__countdown--title {
  font-size: 1.5rem;
}
@media only screen and (min-width: 992px) {
  .product__countdown--title {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 575px) {
  .product__countdown {
    gap: 1rem;
    flex-direction: column;
    align-items: flex-start !important;
  }
}

.countdown__wrapper {
  gap: 1.2rem;
}

/*
    home four product css
*/
.product__tab--btn.padding_right_0 {
  padding-right: 0;
}

.product__countdown--bg {
  background: var(--hover-color);
  padding: 0.8rem 1.5rem;
  border-radius: 0.5rem;
}
@media only screen and (max-width: 399px) {
  .product__countdown--bg {
    padding: 0.5rem;
  }
}

@media only screen and (max-width: 991px) {
  .section__heading--style2.d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 2rem;
  }
}

/*
    9. Small product css
*/
.small__product--card {
  border: 1px solid var(--hover-color);
  padding: 1.5rem;
  border-radius: 0.5rem;
  transition: 0.3s;
}
.small__product--card:hover {
  border-color: var(--secondary-color2);
}
.small__product--card:hover .secondary__img {
  opacity: 1;
  visibility: visible;
}
.small__product--card .product__thumbnail--media {
  background: var(--body-background-color);
}
.small__product--card__thumbnail {
  width: 7.8rem;
}
@media only screen and (min-width: 480px) {
  .small__product--card__thumbnail {
    width: 8.8rem;
  }
}
.small__product--card__content {
  width: calc(100% - 7.8rem);
  padding: 0 0 0 1.5rem;
}
@media only screen and (min-width: 480px) {
  .small__product--card__content {
    width: calc(100% - 8.8rem);
    padding: 0 0 0 2rem;
  }
}
@media only screen and (max-width: 479px) {
  .small__product--card__content .rating__review--text {
    display: none;
  }
}

/*
    10. brand logo css
*/
.brand__section--bg {
  background: var(--bg-offwhite-color);
}

.brand__logo--activation .swiper-wrapper {
  align-items: center;
}

.brang__logo--img {
  margin: 0 auto;
  opacity: 0.5;
}
@media only screen and (max-width: 480px) {
  .brang__logo--img {
    max-width: 110px;
  }
}
.brang__logo--img:hover {
  transform: scale(1.05);
  opacity: 1;
}

/*
    11. Blog css
*/
.blog_swiper-column4 {
  padding: 0 0.5rem 1rem;
}

.blog__card {
  background: var(--body-background-color);
  transition: 0.3s;
  border-radius: 0.5rem;
}
.blog__card:hover {
  box-shadow: 0px 6px 8px 0 rgba(0, 0, 0, 0.13);
}
.blog__card--thumbnail {
  overflow: hidden;
  border-radius: 5px 5px 0 0;
}
@media only screen and (max-width: 767px) {
  .blog__card--thumbnail img {
    width: 100%;
  }
}
.blog__card--thumbnail:hover img {
  transform: scale(1.03);
}
.blog__card--content {
  padding: 1.5rem 1.5rem 2rem;
}
@media only screen and (min-width: 480px) and (max-width: 991px) {
  .blog__card--meta {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1rem;
  }
}
.blog__card--meta__icon {
  margin-right: 0.3rem;
}
.blog__card--meta__text {
  font-size: 1.3rem;
  color: var(--foreground-sub-color);
}
.blog__card--title {
  font-size: 1.6rem;
  line-height: 2.5rem;
}
@media only screen and (min-width: 992px) {
  .blog__card--title {
    font-size: 1.7rem;
    line-height: 2.6rem;
  }
}
.blog__card--title a:hover {
  color: var(--hover-color);
}
.blog__card--desc {
  font-size: 1.5rem;
  line-height: 2.7rem;
}

.blog_swiper_btn {
  top: 26px;
}

/*
    home three blog css
*/
.blog__card--content__style2 {
  padding: 2rem 0 0;
}

.blog__card--author__img {
  margin-right: 1rem;
}

.blog_swiper-column3 .blog__card {
  box-shadow: inherit;
}

.blog__card--read__more {
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--secondary-color);
}
.blog__card--read__more:hover {
  color: var(--hover-color);
}
.blog__card--read__more svg {
  margin-left: 0.3rem;
}

.blog__page--wrapper .blog__card {
  box-shadow: inherit;
}

/*
    12. Footer css
*/
@media only screen and (max-width: 991px) {
  .main__footer.section--padding {
    padding-bottom: 5rem;
  }
}
@media only screen and (max-width: 767px) {
  .main__footer.section--padding {
    padding-bottom: 3.5rem;
  }
}

@media only screen and (max-width: 991px) {
  .footer__section {
    padding-bottom: 8.5rem;
  }
}

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

@media only screen and (max-width: 991px) {
  .footer__widget {
    margin-bottom: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .footer__widget {
    margin-bottom: 0;
  }
}
.footer__widget--title {
  font-size: 1.7rem;
  line-height: 2.4rem;
  position: relative;
  color: var(--foreground-color);
  margin-bottom: 2.4rem;
}
@media only screen and (min-width: 768px) {
  .footer__widget--title {
    margin-bottom: 2rem;
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 992px) {
  .footer__widget--title {
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .footer__widget--title {
    font-size: 2rem;
  }
}
.footer__widget--title__arrowdown--icon {
  position: absolute;
  right: 0;
  top: 38%;
  transition: 0.3s;
  display: none;
}
@media only screen and (max-width: 767px) {
  .footer__widget--title__arrowdown--icon {
    display: block;
  }
}
.footer__widget.active {
  padding-bottom: 3rem;
}
.footer__widget.active .footer__widget--title__arrowdown--icon {
  transform: rotate(180deg);
}
.footer__widget--button {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  content: "";
  color: transparent;
  border: 0;
  background-color: transparent;
}
@media only screen and (max-width: 767px) {
  .footer__widget--button {
    visibility: visible;
  }
}
.footer__widget--menu li {
  margin-bottom: 1.2rem;
}
.footer__widget--menu li:last-child {
  margin-bottom: 0;
}
.footer__widget--menu li a {
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: var(--foreground-sub-color);
}
.footer__widget--menu li a:hover {
  color: var(--hover-color);
}
@media only screen and (min-width: 1200px) {
  .footer__widget--menu li a {
    font-size: 1.6rem;
  }
}
.footer__widget--desc {
  font-size: 1.5rem;
  line-height: 2.7rem;
  margin-bottom: 0;
  color: var(--foreground-sub-color);
}

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

.footer__bottom {
  border-top: 1px solid var(--border-color);
  padding: 2rem 0;
}
.footer__bottom.section--padding {
  padding: 5rem 0;
}
@media only screen and (max-width: 767px) {
  .footer__bottom.section--padding {
    padding: 3rem 0;
  }
}
.footer__bottom--inner {
  gap: 2rem;
}
@media only screen and (max-width: 1199px) {
  .footer__bottom--inner {
    flex-direction: column;
  }
}

.footer__widget--info {
  margin-top: 2rem;
}
.footer__widget--info_list {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.4rem;
}
.footer__widget--info_list:last-child {
  margin-bottom: 0;
}
.footer__widget--info_list svg {
  color: var(--foreground-sub-color);
}
.footer__widget--info_list a {
  color: var(--foreground-sub-color);
}
.footer__widget--info_list a:hover {
  color: var(--hover-color);
}
.footer__widget--info_list.mb-20 {
  margin-bottom: 2rem;
}

.social__share {
  gap: 1.5rem;
  margin-top: 2rem;
}
.social__share--icon:hover {
  color: var(--hover-color);
}

.copyright__content {
  font-size: 1.5rem;
  color: var(--foreground-sub-color);
}
@media only screen and (max-width: 1199px) {
  .copyright__content {
    text-align: center;
  }
}
.copyright__content a:hover {
  color: var(--hover-color);
}

.footer__bottom--menu {
  gap: 2.5rem;
}
.footer__bottom--menu li a {
  color: var(--foreground-sub-color);
  font-size: 1.5rem;
}
.footer__bottom--menu li a:hover {
  color: var(--hover-color);
}
@media only screen and (max-width: 479px) {
  .footer__bottom--menu li a {
    font-size: 1.4rem;
  }
}

/*
    home 2 footer css
*/
.footer__tag {
  flex-wrap: wrap;
  gap: 1.5rem;
}
@media only screen and (min-width: 480px) {
  .footer__tag {
    gap: 1.8rem;
  }
}
@media only screen and (min-width: 576px) {
  .footer__tag {
    gap: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .footer__tag {
    padding: 0 8rem;
  }
}
.footer__tag li {
  line-height: 2rem;
  position: relative;
}
@media only screen and (min-width: 576px) {
  .footer__tag li {
    line-height: 2.3rem;
  }
}
.footer__tag li::before {
  position: absolute;
  content: "";
  height: 1.3rem;
  width: 0.1rem;
  background: var(--primary-color);
  right: -6px;
  transform: skew(-25deg) translatey(-50%);
  top: 49%;
}
@media only screen and (min-width: 480px) {
  .footer__tag li::before {
    right: -7px;
  }
}
@media only screen and (min-width: 576px) {
  .footer__tag li::before {
    height: 1.6rem;
  }
}
.footer__tag--link {
  font-size: 1.4rem;
}
@media only screen and (min-width: 480px) {
  .footer__tag--link {
    font-size: 1.5rem;
  }
}
.footer__tag--link:hover {
  color: var(--hover-color);
}

/*
    13. Newsletter css
*/
.footer__newsletter {
  margin-top: 2rem;
}

.newsletter__subscribe--form {
  gap: 1.5rem;
}
@media only screen and (max-width: 1599px) {
  .newsletter__subscribe--form {
    flex-direction: column;
  }
}
.newsletter__subscribe--form label {
  position: relative;
}
.newsletter__subscribe--form label svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translatey(-50%);
}
.newsletter__subscribe--input {
  width: 190px;
  height: 4.5rem;
  border: 1px solid var(--border-color);
  font-size: 1.3rem;
  padding: 0 1rem 0 3rem;
  border-radius: 0.5rem;
}
@media only screen and (max-width: 1599px) {
  .newsletter__subscribe--input {
    width: 100%;
  }
}
.newsletter__subscribe--input.width-100 {
  width: 100%;
}
@media only screen and (max-width: 991px) {
  .newsletter__subscribe--input.width-100 {
    height: 4rem;
  }
}
.newsletter__subscribe--input:focus {
  border-color: var(--secondary-color);
}
.newsletter__subscribe--button {
  border: 0;
  background: var(--secondary-color);
  height: 4.5rem;
  padding: 0 1.5rem;
  color: var(--text-white-color);
  border-radius: 0.5rem;
}
.newsletter__subscribe--button:hover {
  background: var(--hover-color);
}
@media only screen and (max-width: 1599px) {
  .newsletter__subscribe--button {
    width: 150px;
  }
}

/*
    home three newsletter css
*/
@media only screen and (min-width: 576px) {
  .newsletter__content {
    position: absolute;
    top: 50%;
    left: 3rem;
    transform: translatey(-50%);
  }
}
@media only screen and (min-width: 768px) {
  .newsletter__content {
    left: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  .newsletter__content {
    left: 6rem;
  }
}
@media only screen and (max-width: 575px) {
  .newsletter__content {
    text-align: center;
    margin-top: 3rem;
  }
}
@media only screen and (max-width: 479px) {
  .newsletter__content button.primary__btn {
    max-width: 10rem;
    margin: 0 auto;
  }
}

.newsletter__subscribe--svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translatey(-50%);
}

.newsletter__subscribe--style__form {
  gap: 2rem;
}
@media only screen and (max-width: 575px) {
  .newsletter__subscribe--style__form {
    justify-content: center;
  }
}
@media only screen and (max-width: 479px) {
  .newsletter__subscribe--style__form {
    flex-direction: column;
  }
}
.newsletter__subscribe--style__form label.width-300 {
  width: 100%;
}
@media only screen and (min-width: 400px) {
  .newsletter__subscribe--style__form label.width-300 {
    width: 27rem;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 480px) {
  .newsletter__subscribe--style__form label.width-300 {
    width: 20rem;
  }
}
@media only screen and (min-width: 768px) {
  .newsletter__subscribe--style__form label.width-300 {
    width: 25rem;
  }
}
@media only screen and (min-width: 992px) {
  .newsletter__subscribe--style__form label.width-300 {
    width: 30rem;
  }
}

.newsletter__subtitle {
  gap: 1rem;
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: var(--hover-color);
}
@media only screen and (min-width: 768px) {
  .newsletter__subtitle {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 992px) {
  .newsletter__subtitle {
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .newsletter__subtitle {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 575px) {
  .newsletter__subtitle {
    justify-content: center;
  }
}
@media only screen and (max-width: 767px) {
  .newsletter__subtitle.mb-30 {
    margin-bottom: 1.5rem;
  }
}

.newsletter__title {
  font-size: 1.8rem;
  line-height: 2.8rem;
}
@media only screen and (min-width: 400px) {
  .newsletter__title {
    font-size: 2rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 768px) {
  .newsletter__title {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .newsletter__title {
    font-size: 3.3rem;
    line-height: 4.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .newsletter__title {
    font-size: 4rem;
    line-height: 6rem;
  }
}

/*
    home four newsletter css
*/
.newsletter__section--bg {
  background: url(../img/banner/banner-bg-5.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.newsletter__inner--flex {
  gap: 2rem;
}
@media only screen and (max-width: 1365px) {
  .newsletter__inner--flex {
    flex-direction: column;
  }
}
@media only screen and (min-width: 576px) {
  .newsletter__inner--flex {
    gap: 3rem;
  }
}

.newsletter__content--left {
  position: relative;
  gap: 2rem;
  margin-right: 3rem;
  padding-right: 3rem;
}
@media only screen and (max-width: 991px) {
  .newsletter__content--left {
    gap: 1.5rem;
    margin-right: 0;
    padding-right: 0;
  }
  .newsletter__content--left::before {
    display: none;
  }
}
.newsletter__content--left::before {
  position: absolute;
  content: "";
  width: 0.1rem;
  height: 3rem;
  background: var(--foreground-sub-color);
  right: 0;
  top: 50%;
  transform: translatey(-50%);
}
@media only screen and (min-width: 1366px) {
  .newsletter__content--left::before {
    height: 5rem;
  }
}

@media only screen and (max-width: 991px) {
  .newsletter__content--style4 {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }
}
.newsletter__content--style4__title {
  font-size: 1.6rem;
  line-height: 2.2rem;
}
@media only screen and (min-width: 768px) {
  .newsletter__content--style4__title {
    font-size: 1.8rem;
    line-height: 2.4rem;
  }
}

/* 
    14. Quickview css
*/
.modal {
  background: rgba(0, 0, 0, 0.6);
}

.quickview__main--wrapper {
  max-width: 895px;
  position: relative;
  overflow: auto;
  cursor: default;
  padding: 25px;
  transform: translateY(-50px);
  transition: var(--transition);
  pointer-events: inherit;
}
@media only screen and (max-width: 575px) {
  .quickview__main--wrapper {
    padding: 15px;
  }
}

.modal-content.quickview__main__content {
  padding: 20px;
  border-radius: 10px;
  border: 0;
  max-height: 80vh;
  overflow: auto;
}
@media only screen and (max-width: 575px) {
  .modal-content.quickview__main__content {
    padding: 5px;
  }
}

.modal-header.quickview_m_header {
  padding: 0;
  position: absolute;
  top: 16px;
  right: 16px;
  border: 0;
  z-index: 9;
}

.modal.is-visible {
  visibility: visible;
  opacity: 1;
}
.modal.is-visible .quickview__main--wrapper {
  transform: translateY(0);
}

.quickview__header {
  position: absolute;
  padding: 0;
  top: 16px;
  right: 16px;
  z-index: 9;
  border-bottom: 0;
}
@media only screen and (max-width: 767px) {
  .quickview__header {
    top: 10px;
    right: 10px;
  }
}

.quickview__close--btn {
  font-size: 1.8rem;
  padding: 0 !important;
  width: 3.2rem;
  height: 3.2rem;
  line-height: 3.4rem;
  border-radius: 50%;
  font-weight: 700;
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.quickview__close--btn:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-white-color);
}

/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-animation] .modal-dialog {
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}

[data-animation].is-visible .modal-dialog {
  opacity: 1;
  transition-delay: 0.2s;
}

@media only screen and (max-width: 767px) {
  .quickview__gallery {
    margin-bottom: 20px;
  }
}

.quickview__thumb {
  position: relative;
}
.quickview__thumb--link {
  width: 100%;
  border-radius: 8px;
  display: block;
}
.quickview__thumb--img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.quickview__gallery--pagination {
  bottom: 5px !important;
}
.quickview__gallery--pagination .swiper-pagination-bullet {
  width: 2rem;
  height: 0.6rem;
  background: var(--primary-color);
  opacity: 1;
  border-radius: 2px;
  margin: 0 3px !important;
}
.quickview__gallery--pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--secondary-color);
}

.variant__color--value {
  width: 3.5rem;
  height: 3.5rem;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  margin-right: 10px;
  line-height: 1;
  cursor: pointer;
}
.variant__color--value:last-child {
  margin-right: 0;
}
.variant__color--value__img {
  border-radius: 5px;
}

.variant__color--list input[type="radio"] + label {
  border: 1px solid var(--border-color);
}
.variant__color--list input[type="radio"] + label:hover {
  border: 1px solid var(--secondary-color);
}

.variant__color--list {
  margin-right: 10px;
}
.variant__color--list input[type="radio"] {
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}
.variant__color--list input[type="radio"]:checked + label {
  border: 1px solid var(--secondary-color);
}
.variant__color--list:last-child {
  margin-right: 0;
}

.variant__input--fieldset {
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  border: none;
  margin: 0;
  padding: 0;
}

.variant__size--list input[type="radio"] + label {
  border: 1px solid var(--border-color);
}
.variant__size--list input[type="radio"] + label:hover {
  border: 1px solid var(--secondary-color);
  color: var(--secondary-color);
}

.variant__size--list {
  margin-right: 13px;
}
.variant__size--list:last-child {
  margin-right: 0;
}
.variant__size--list input[type="radio"] {
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}
.variant__size--list input[type="radio"]:checked + label {
  border: 1px solid var(--secondary-color);
  color: var(--secondary-color);
}
.variant__size--value {
  width: 4.7rem;
  height: 3.2rem;
  line-height: 2.8rem;
  display: inline-block;
  border-radius: 5px;
  text-align: center;
  font-size: 1.5rem;
  cursor: pointer;
}

.quickview__variant--wishlist__svg {
  width: 22px;
  margin-right: 7px;
}

.variant__wishlist--icon {
  display: flex;
  align-items: center;
  color: var(--primary-color);
}

.quickview__value--quantity {
  width: 3.5rem;
  height: 4rem;
  font-size: 2.2rem;
  line-height: 3.3rem;
}
.quickview__value--quantity.decrease {
  border-radius: 17px 0 0 17px;
}
.quickview__value--quantity.increase {
  border-radius: 0 17px 17px 0;
}

input.quickview__value--number {
  height: 4rem;
  font-size: 1.7rem;
}

.quickview__cart--btn {
  height: 4rem;
  line-height: 4rem;
  padding: 0 25px;
  margin-left: 15px;
}
.quickview__cart--btn svg {
  margin-right: 0.8rem;
}

.quickview__social--title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 15px;
  color: var(--primary-color);
}
.quickview__social--list {
  margin-right: 15px;
}
.quickview__social--list:last-child {
  margin-right: 0;
}
@media only screen and (max-width: 575px) {
  .quickview__social--list {
    margin-right: 6px;
  }
}
.quickview__social--icon {
  color: var(--primary-color);
}
.quickview__social--icon:hover {
  color: var(--secondary-color);
}
.quickview__social--icon svg {
  min-width: 2rem;
}
.quickview__social--icon.facebook {
  color: #4460a0;
}
.quickview__social--icon.twitter {
  color: #00aaec;
}
.quickview__social--icon.pinterest {
  color: #cc2127;
}
.quickview__social--icon.instagram {
  color: #bb398b;
}

.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(--hover-color);
  border-radius: 50%;
  color: var(--text-white-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product__media--view__icon--link:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}

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

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

/*
    15. Categories product css
*/
.categories_swiper_btn {
  top: 25px;
}

.product__categories--wrapper {
  padding: 1rem 0.5rem;
}
.product__categories--card {
  text-align: center;
  border: 1px solid #d9d9d9;
  padding: 1rem 1rem 1.8rem;
  border-radius: 1rem;
  transition: 0.3s;
}
@media only screen and (min-width: 400px) {
  .product__categories--card {
    padding: 1rem 1.5rem 1.8rem;
  }
}
.product__categories--card:hover {
  box-shadow: 0px 3px 13px 0 rgba(0, 0, 0, 0.08);
}
.product__categories--card__media img {
  margin: 0 auto;
}
.product__categories--card__content {
  padding-top: 1.5rem;
}
@media only screen and (min-width: 576px) {
  .product__categories--card__content {
    padding-top: 2rem;
  }
}
.product__categories--card__title {
  font-size: 1.6rem;
  color: var(--foreground-color);
}
@media only screen and (min-width: 768px) {
  .product__categories--card__title {
    font-size: 1.7rem;
  }
}
.product__categories--card__subtitle {
  font-size: 1.4rem;
  line-height: 1.8rem;
  margin-top: 0.8rem;
  color: var(--foreground-sub-color);
}

/*
    home three categories css
*/
.product__categories--flex {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .product__categories--flex {
    gap: 3rem;
  }
}
.product__categories--flex .product__categories--card {
  width: 100%;
  padding: 1.5rem 1rem;
}
@media only screen and (min-width: 320px) {
  .product__categories--flex .product__categories--card {
    width: 46%;
  }
}
@media only screen and (min-width: 400px) {
  .product__categories--flex .product__categories--card {
    width: 47%;
  }
}
@media only screen and (min-width: 480px) {
  .product__categories--flex .product__categories--card {
    width: 30%;
  }
}
@media only screen and (min-width: 576px) {
  .product__categories--flex .product__categories--card {
    width: 30.5%;
    padding: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .product__categories--flex .product__categories--card {
    width: 21.8%;
    padding: 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .product__categories--flex .product__categories--card {
    width: 17.4%;
  }
}
@media only screen and (min-width: 1200px) {
  .product__categories--flex .product__categories--card {
    width: 17.8%;
  }
}
@media only screen and (min-width: 1366px) {
  .product__categories--flex .product__categories--card {
    width: 18%;
  }
}

.section__heading--style2__subtitle {
  gap: 1.2rem;
  font-size: 1.6rem;
  line-height: 2.5rem;
  color: var(--hover-color);
}
@media only screen and (min-width: 768px) {
  .section__heading--style2__subtitle {
    gap: 1.5rem;
    font-size: 1.7rem;
  }
}
@media only screen and (min-width: 992px) {
  .section__heading--style2__subtitle {
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .section__heading--style2__subtitle {
    font-size: 2rem;
  }
}
.section__heading--style2__title {
  font-size: 1.8rem;
  line-height: 2.5rem;
}
@media only screen and (min-width: 480px) {
  .section__heading--style2__title {
    font-size: 2.2rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 768px) {
  .section__heading--style2__title {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .section__heading--style2__title {
    font-size: 3rem;
    line-height: 4rem;
  }
}
@media only screen and (min-width: 1200px) {
  .section__heading--style2__title {
    font-size: 3.2rem;
    line-height: 4.3rem;
  }
}

/*
    home four css
*/
.product__categories--items {
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  transition: 0.3s;
}
.product__categories--items:hover {
  box-shadow: 0 4px 23px 0 rgba(0, 0, 0, 0.13);
  border: 1px solid transparent;
}
.product__categories--items__link {
  padding: 1rem;
}
@media only screen and (min-width: 768px) {
  .product__categories--items__link {
    padding: 1.5rem;
  }
}
@media only screen and (max-width: 575px) {
  .product__categories--items__link.d-flex {
    flex-direction: column;
  }
}
.product__categories--items__media {
  width: 12rem;
}
@media only screen and (min-width: 768px) {
  .product__categories--items__media {
    width: 13rem;
  }
}
@media only screen and (min-width: 1200px) {
  .product__categories--items__media {
    width: 14.5rem;
  }
}
@media only screen and (max-width: 575px) {
  .product__categories--items__media {
    width: auto;
  }
}
.product__categories--items__content {
  width: calc(100% - 12rem);
  padding-left: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .product__categories--items__content {
    width: calc(100% - 13rem);
    padding-left: 1.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .product__categories--items__content {
    width: calc(100% - 14.5rem);
  }
}
@media only screen and (max-width: 575px) {
  .product__categories--items__content {
    width: 100%;
    padding-left: 0;
    padding-top: 1.5rem;
    text-align: center;
  }
}
.product__categories--tag li {
  font-size: 1.3rem;
  line-height: 1.8rem;
  margin-bottom: 0.6rem;
}
@media only screen and (min-width: 768px) {
  .product__categories--tag li {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
  }
}
.product__categories--tag li:last-child {
  margin-bottom: 0;
}
.product__categories--tag li span {
  color: var(--foreground-sub-color);
}
.product__categories--tag li span:hover {
  color: var(--hover-color);
}

/*
    16. services css
*/
.services__card {
  border: 1px solid var(--border-color);
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  transition: 0.3s;
}
@media only screen and (min-width: 576px) {
  .services__card {
    padding: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .services__card {
    padding: 2rem;
  }
}
.services__card:hover {
  border-color: var(--hover-color);
}
.services__card--media img {
  margin: 0 auto;
}
.services__card--title {
  font-size: 1.4rem;
  line-height: 2.2rem;
}
@media only screen and (min-width: 576px) {
  .services__card--title {
    font-size: 1.5rem;
    line-height: 2.3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .services__card--title {
    font-size: 1.6rem;
    line-height: 2.5rem;
  }
}

.services__box {
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.17);
  padding: 3rem;
  border-radius: 1rem;
  text-align: center;
}

/*
    17. testimonial css
*/
.testimonial__bg {
  background: #fefce8;
}

.testimonial__items {
  background: var(--body-background-color);
  padding: 1.5rem;
  border-radius: 1rem;
}
@media only screen and (min-width: 576px) {
  .testimonial__items {
    padding: 2rem;
  }
}

.testimonial__author {
  gap: 1.2rem;
}
.testimonial__author--thumb {
  border: 1px solid var(--hover-color);
  border-radius: 50%;
}
.testimonial__author--title {
  font-size: 1.6rem;
  line-height: 2rem;
  margin-bottom: 0.5rem;
}
@media only screen and (min-width: 576px) {
  .testimonial__author--title {
    font-size: 1.8rem;
  }
}
.testimonial__author--subtitle {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: var(--foreground-sub-color);
}
@media only screen and (min-width: 576px) {
  .testimonial__author--subtitle {
    font-size: 1.4rem;
  }
}

.testimonial__content--desc {
  font-size: 1.4rem;
  line-height: 2.5rem;
  color: #949494;
}
@media only screen and (min-width: 576px) {
  .testimonial__content--desc {
    font-size: 1.5rem;
  }
}

.testimonial__code--icon {
  text-align: right;
}

.testimonial_swiper_btn {
  top: 52px;
}
@media only screen and (min-width: 480px) {
  .testimonial_swiper_btn {
    top: 70px;
  }
}

/*
    18. Store css
*/
.store__thumbnail {
  gap: 2rem;
}
@media only screen and (min-width: 992px) {
  .store__thumbnail {
    gap: 3rem;
  }
}

.store__media {
  border: 1px solid var(--hover-color);
  border-radius: 0.5rem;
}
.store__media img {
  border-radius: 0.5rem;
}

.store__content {
  padding-top: 2.5rem;
}
.store__content--top {
  gap: 3rem;
}
@media only screen and (min-width: 992px) {
  .store__content--top {
    gap: 5rem;
  }
}
.store__content--title {
  font-size: 1.6rem;
  line-height: 2.4rem;
}
@media only screen and (min-width: 992px) {
  .store__content--title {
    font-size: 1.8rem;
  }
}
.store__content--footer {
  gap: 3rem;
}
@media only screen and (max-width: 399px) {
  .store__content--footer {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start !important;
  }
}
.store__content--desc {
  color: #64748b;
  font-size: 1.5rem;
  line-height: 2rem;
}

/* 
    19. 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 {
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 2rem;
  }
}

.product__view--mode {
  gap: 2.5rem;
}
@media only screen and (max-width: 767px) {
  .product__view--mode {
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
  }
}
@media only screen and (max-width: 479px) {
  .product__view--mode {
    gap: 1.5rem;
  }
}
.product__view--label {
  font-weight: 500;
  margin-right: 1.2rem;
  font-size: 1.5rem;
  color: var(--primary-color);
}
@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);
  font-size: 1.4rem;
}

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

.product__grid--column__buttons {
  gap: 1rem;
}
.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;
  text-align: center;
  padding: 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(--primary-color);
  font-size: 1.5rem;
  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;
  transition: var(--transition);
  transform: translateX(-100%);
  background-color: var(--body-background-color);
  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;
  transform: translateX(0);
}
.offcanvas__filter--sidebar__inner {
  padding: 1rem 2rem 3rem;
}

.widget__filter--btn {
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
  border-radius: 0.5rem;
  padding: 0.5rem 1.2rem;
}
.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: flex;
  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;
}

.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;
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
}

.widget__title {
  font-weight: 600;
  position: relative;
  color: var(--primary-color);
  font-size: 1.7rem;
  border-bottom: 1px solid var(--hover-color);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
}
@media only screen and (min-width: 992px) {
  .widget__title {
    margin-bottom: 2.5rem;
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .widget__title {
    font-size: 2rem;
  }
}

.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: flex;
  align-items: center;
  justify-content: center;
}
.widget__search--form__btn:hover {
  background: var(--hover-color);
}

.widget__categories--menu__list {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
  padding-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 {
  transform: rotate(180deg);
  top: 38%;
}
.widget__categories--menu__label {
  cursor: pointer;
  position: relative;
  transition: var(--transition);
  font-size: 1.5rem;
  color: var(--body-text-color);
}
.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: 2.5rem;
}
.widget__categories--menu__arrowdown--icon {
  position: absolute;
  right: 1.5rem;
  top: 43%;
  transition: var(--transition);
}
.widget__categories--sub__menu {
  display: none;
  padding: 1.5rem 1.2rem 0;
}
.widget__categories--sub__menu--list {
  padding: 1rem 0;
  border-top: 1px solid var(--border-color);
}
.widget__categories--sub__menu--list:last-child {
  padding-bottom: 0;
}
.widget__categories--sub__menu--img {
  width: 2.8rem;
}
.widget__categories--sub__menu--text {
  padding-left: 1.3rem;
  line-height: 2.8rem;
  font-size: 1.4rem;
}

.widget__form--check__list {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  position: relative;
}
.widget__form--check__list:last-child {
  margin-bottom: 0;
}
.widget__form--check__label {
  cursor: pointer;
  line-height: 2.8rem;
  transition: var(--transition);
  background: var(--white-color);
  display: block;
  color: var(--body-text-color);
  font-size: 1.5rem;
}
.widget__form--check__label:hover {
  color: var(--secondary-color);
}
.widget__form--check__input {
  position: absolute;
  right: 1rem;
  top: 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;
  transform: translatey(-50%);
  background: var(--body-background-color);
  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;
  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: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.widget__tagcloud--link {
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
  color: var(--primary-color);
  padding: 0.5rem 1.5rem;
  line-height: 2rem;
  border-radius: 2rem;
  font-size: 1.3rem;
}
.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: 0 0 2rem;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid var(--border-color);
  gap: 1.5rem;
}
.shop__sidebar--product .small__product--thumbnail {
  width: 7rem;
}

/*
    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%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .shop__product--wrapper .rating__review--text {
    font-size: 1.1rem;
  }
}

@media only screen and (max-width: 479px) {
  .product__list {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.product__list .product__card--price {
  opacity: 1;
  visibility: visible;
}

.product__list--thumbnail {
  width: 100%;
  padding: 0;
}
@media only screen and (min-width: 480px) {
  .product__list--thumbnail {
    width: 190px;
  }
}
@media only screen and (min-width: 768px) {
  .product__list--thumbnail {
    width: 280px;
  }
}
@media only screen and (min-width: 992px) {
  .product__list--thumbnail {
    width: 250px;
  }
}
@media only screen and (min-width: 1200px) {
  .product__list--thumbnail {
    width: 320px;
  }
}

.product__list--content {
  width: 100%;
  padding: 1.5rem;
}
@media only screen and (min-width: 480px) {
  .product__list--content {
    width: calc(100% - 190px);
    padding: 1.5rem 1.5rem 1.5rem 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .product__list--content {
    width: calc(100% - 280px);
    padding: 1.5rem 1.5rem 1.5rem 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .product__list--content {
    width: calc(100% - 250px);
  }
}
@media only screen and (min-width: 1200px) {
  .product__list--content {
    width: calc(100% - 320px);
    padding: 1.5rem 1.5rem 1.5rem 3rem;
  }
}
@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__list--price {
  margin-bottom: 1rem;
}
.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 {
    justify-content: center;
  }
}
.product__list--content .product__card--btn {
  display: inline-block;
  width: auto;
  border-radius: 5px;
  height: 4rem;
  line-height: 4rem;
}

.product__card--content__desc {
  line-height: 2.6rem;
  font-size: 1.4rem;
}
@media only screen and (min-width: 1200px) {
  .product__card--content__desc {
    line-height: 2.8rem;
    font-size: 1.5rem;
  }
}
@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);
}

/*
    shop no sidebar css
*/
.shop__no--sidebar__header {
  gap: 4rem;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .shop__no--sidebar__header {
    gap: 2rem;
    flex-direction: column;
  }
}
@media only screen and (max-width: 767px) {
  .shop__no--sidebar__header {
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
  }
}
@media only screen and (max-width: 575px) {
  .shop__no--sidebar__header {
    justify-content: center !important;
  }
}

.horizontal__shop--filter {
  gap: 4rem;
}
@media only screen and (max-width: 767px) {
  .horizontal__shop--filter.mobile_v_none {
    display: none !important;
  }
}

.horizontal__widget--dropdown {
  position: absolute;
  top: 4rem;
  left: 0;
  z-index: 9;
  background: var(--body-background-color);
  width: 25rem;
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--border-color);
}
.horizontal__widget--dropdown .widget__categories--menu__list:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.horizontal__widget--dropdown .widget__form--check__list:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.horizontal__widget--dropdown.shortig {
  width: 20rem;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .horizontal__widget--dropdown.brand {
    right: 0;
    left: auto;
  }
}

.horizontal__filter--arrowdown__icon {
  margin-left: 1rem;
}

.horizontal__filter--widget__title {
  font-size: 1.7rem;
  cursor: pointer;
  transition: 0.3s;
}
@media only screen and (max-width: 575px) {
  .horizontal__filter--widget__title {
    font-size: 1.6rem;
  }
}
.horizontal__filter--widget__title:hover {
  text-decoration: underline;
  color: var(--hover-color);
}

.horizontal__shop--header__sidebar {
  gap: 3rem;
}

.filter__sorting--items {
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 1.2rem;
}
.filter__sorting--items:last-child {
  margin-bottom: 0;
}

/* 
    20. Breadcrumb css 
*/
.breadcrumb__bg {
  background: var(--bg-offwhite-color);
  padding: 2rem 0;
}

.breadcrumb__content {
  position: relative;
}
.breadcrumb__content--title {
  margin-bottom: 8px;
  color: var(--primary-color);
  font-size: 2rem;
  line-height: 2.2rem;
  font-weight: 600;
}
@media only screen and (min-width: 992px) {
  .breadcrumb__content--title {
    margin-bottom: 10px;
    font-size: 2.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .breadcrumb__content--title {
    font-size: 2.7rem;
    line-height: 2.8rem;
  }
}
.breadcrumb__content--menu__items {
  position: relative;
  margin-right: 18px;
  padding-right: 18px;
  font-size: 15px;
  line-height: 24px;
}
.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: 15px;
  background: var(--secondary-color);
  right: 0;
  top: 4px;
  border-radius: 5px;
  transform: rotate(30deg);
}

/* 
    21. Product details css 
*/
details > summary {
  list-style: none;
}

.product__details--media {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
@media only screen and (max-width: 767px) {
  .product__details--media {
    margin-bottom: 4.6rem;
  }
}
@media only screen and (min-width: 1200px) {
  .product__details--media {
    padding-right: 2rem;
  }
}

.single__product--preview.bg__gray {
  padding: 1rem;
  border-radius: 1rem;
}

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

.product__media--preview__items {
  position: relative;
}
.product__media--preview__items--link {
  display: block;
}
.product__media--preview__items--img {
  margin: 0 auto;
}
.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: flex;
  align-items: 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;
  padding: 0 1rem;
}
.product__media--nav__items {
  border: 1px solid var(--border-color);
  padding: 1.2rem;
  line-height: 1;
  border-radius: 5px;
  transition: var(--transition);
  cursor: pointer;
}
@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: 0.8rem;
  }
}
.product__media--nav__items--img {
  margin: 0 auto;
  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;
  color: var(--primary-color);
}

.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__title {
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 576px) {
  .product__details--info__title {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .product__details--info__title {
    font-size: 2.2rem;
  }
}
.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: 600;
  color: var(--primary-color);
  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: 2rem;
  color: var(--primary-color);
}

/*
    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: 2rem 0;
}
.product__details--summary__title {
  font-size: 1.6rem;
  font-weight: 400;
  position: relative;
  display: block;
  color: var(--primary-color);
}
@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%;
  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 {
    flex-wrap: wrap;
  }
  .product__details--tab.mb-30 {
    margin-bottom: 1.5rem;
  }
}
@media only screen and (max-width: 575px) {
  .product__details--tab {
    justify-content: center;
  }
}
.product__details--tab__list {
  font-size: 1.6rem;
  line-height: 2.6rem;
  margin-right: 5rem;
  cursor: pointer;
  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%;
  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: 400;
  font-size: 1.7rem;
  color: var(--body-text-color);
}
@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 {
    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 {
    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 {
    justify-content: center;
  }
}

.reviews__summary--caption {
  color: var(--secondary-color);
  margin-left: 1.2rem;
}
@media only screen and (max-width: 1199px) {
  .reviews__summary--caption {
    font-size: 12px;
  }
}

.actions__newreviews--btn {
  position: absolute;
  right: 0;
  bottom: 2.2rem;
  font-size: 1.3rem;
  height: 3.8rem;
  line-height: 3.8rem;
  padding: 0 1.5rem;
}
@media only screen and (max-width: 575px) {
  .actions__newreviews--btn {
    position: inherit;
    bottom: inherit;
    margin-top: 1rem;
  }
}

.reviews__comment--area {
  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: 2rem;
  }
}
.reviews__comment--content__date {
  border: 1px solid var(--border-color);
  padding: 0 1rem;
  border-radius: 5px;
  color: var(--foreground-sub-color);
  height: 3.4rem;
  line-height: 3.4rem;
  font-size: 1.3rem;
}
@media only screen and (min-width: 768px) {
  .reviews__comment--content__date {
    height: 3.6rem;
    line-height: 3.6rem;
    font-size: 1.3rem;
  }
}
@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;
  color: var(--primary-color);
}
.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 {
    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 {
    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;
  }
}

.reviews__comment--reply__title {
  color: var(--primary-color);
}
@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: flex;
  align-items: center;
}

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

.product__details--gallery {
  position: -webkit-sticky;
  position: sticky;
  top: 70px;
}
@media only screen and (max-width: 767px) {
  .product__details--gallery {
    margin-bottom: 2.3rem;
  }
}

.product__sidebar--column4.padding {
  padding: 0 0.5rem 1rem;
}

/* 
    22. 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: 5rem;
  }
}

@media only screen and (max-width: 575px) {
  .blog__post--header {
    text-align: center;
  }
}
.blog__post--header.mb-30 {
  margin-bottom: 2.5rem;
}

.post__header--title {
  font-size: 2rem;
  line-height: 2.8rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 768px) {
  .post__header--title {
    font-size: 2.2rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 992px) {
  .post__header--title {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .post__header--title {
    font-size: 2.8rem;
    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;
  }
}

@media only screen and (max-width: 575px) {
  .blog__details--content {
    text-align: center;
  }
}
.blog__details--content__subtitle {
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 500;
  color: var(--primary-color);
}
@media only screen and (min-width: 576px) {
  .blog__details--content__subtitle {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 768px) {
  .blog__details--content__subtitle {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .blog__details--content__subtitle {
    font-size: 2.2rem;
    line-height: 3rem;
  }
}
.blog__details--content__desc {
  font-size: 1.4rem;
}
@media only screen and (min-width: 768px) {
  .blog__details--content__desc {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 575px) {
  .blog__details--content__desc {
    line-height: 2.6rem;
  }
}

.blockquote__content {
  padding: 20px 30px;
  text-align: center;
  border-radius: 10px;
  background: var(--bg-gray-color);
}
@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.4rem;
  line-height: 2.7rem;
  font-style: italic;
  font-weight: 500;
}
@media only screen and (min-width: 576px) {
  .blockquote__content--desc {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 768px) {
  .blockquote__content--desc {
    font-size: 1.6rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .blockquote__content--desc {
    font-size: 1.7rem;
  }
}

.blog__tags--social__media {
  padding: 5rem 0;
}
@media only screen and (max-width: 1199px) {
  .blog__tags--social__media {
    flex-direction: column;
    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 {
    flex-direction: column;
    align-items: flex-start;
  }
}
.blog__tags--media__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 1rem;
  color: var(--primary-color);
}
@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;
  font-size: 1.4rem;
  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;
  color: var(--primary-color);
}
@media only screen and (min-width: 992px) {
  .blog__social--media__title {
    font-size: 1.6rem;
  }
}
.blog__social--media__list {
  margin-right: 1.5rem;
}
.blog__social--media__list:last-child {
  margin-right: 0;
}
.blog__social--media__link {
  color: var(--primary-color);
}
.blog__social--media__link:hover {
  color: var(--hover-color);
}

.related__post--area {
  margin-bottom: 5rem;
}
.related__post--heading__maintitle {
  font-size: 1.8rem;
  line-height: 2.6rem;
  color: var(--primary-color);
  position: relative;
  padding-left: 1.5rem;
}
@media only screen and (min-width: 576px) {
  .related__post--heading__maintitle {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .related__post--heading__maintitle {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .related__post--heading__maintitle {
    font-size: 2.4rem;
    line-height: 3rem;
  }
}
.related__post--heading__maintitle::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 22px;
  background: var(--primary-color);
  left: 0;
  top: 50%;
  transform: translatey(-50%);
}
@media only screen and (min-width: 768px) {
  .related__post--heading__maintitle::before {
    height: 25px;
  }
}
@media only screen and (max-width: 575px) {
  .related__post--text {
    text-align: center;
  }
}
.related__post--items:hover .related__post--img {
  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.7rem;
  }
}
.related__post--title a {
  color: var(--primary-color);
}
.related__post--title a:hover {
  color: var(--secondary-color);
}
.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.2rem;
  line-height: 3.2rem;
  padding: 0 1.5rem;
}
@media only screen and (min-width: 768px) {
  .comment__reply--btn {
    height: 3.3rem;
    line-height: 3.3rem;
    padding: 0 2rem;
    font-size: 1.4rem;
  }
}

.reviews__comment--area2 {
  margin-bottom: 5rem;
}

.reviews__comment--content__title2 {
  font-weight: 600;
  line-height: 2.2rem;
  margin-bottom: 0.4rem;
  color: var(--primary-color);
}
.reviews__comment--content__date2 {
  font-size: 1.3rem;
  color: var(--foreground-sub-color);
}

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

.blog__comment--btn {
  height: 4rem;
  line-height: 4rem;
  font-size: 1.5rem;
}

/*
    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 {
  transform: scale(1.03);
}
.post__article--thumbnail {
  width: 110px;
  border-radius: 5px;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) {
  .post__article--thumbnail {
    width: 130px;
  }
}
.post__article--thumbnail__img {
  border-radius: 5px;
}
.post__article--content {
  width: calc(100% - 105px);
}
@media only screen and (min-width: 1200px) {
  .post__article--content {
    width: calc(100% - 130px);
  }
}
.post__article--content__title {
  font-size: 1.6rem;
}
.post__article--content__title a {
  color: var(--primary-color);
}
.post__article--content__title a:hover {
  color: var(--secondary-color);
}
.post__article--content .meta__deta {
  color: var(--foreground-sub-color);
  font-weight: 400;
  margin-top: 0.8rem;
}

.blog__comment--title {
  font-size: 1.8rem;
  line-height: 2.6rem;
  color: var(--primary-color);
  position: relative;
  padding-left: 1.5rem;
}
@media only screen and (min-width: 576px) {
  .blog__comment--title {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .blog__comment--title {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .blog__comment--title {
    font-size: 2.4rem;
    line-height: 3rem;
  }
}
.blog__comment--title::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 22px;
  background: var(--primary-color);
  left: 0;
  top: 50%;
  transform: translatey(-50%);
}
@media only screen and (min-width: 768px) {
  .blog__comment--title::before {
    height: 25px;
  }
}

/* 
    23. About page css 
*/
@media only screen and (max-width: 991px) {
  .about__section--inner {
    flex-direction: column;
    gap: 3rem;
  }
}

.about__thumbnail {
  width: 100%;
}
@media only screen and (min-width: 576px) {
  .about__thumbnail {
    padding-bottom: 3rem;
  }
}
@media only screen and (min-width: 768px) {
  .about__thumbnail {
    width: 52rem;
  }
}
@media only screen and (min-width: 992px) {
  .about__thumbnail {
    width: 52rem;
  }
}
@media only screen and (min-width: 1200px) {
  .about__thumbnail {
    width: 59rem;
    padding-bottom: 5rem;
  }
}
.about__thumbnail--items {
  display: inline-block;
  position: relative;
  border-radius: 1rem;
}
@media only screen and (max-width: 479px) {
  .about__thumbnail--items {
    padding-right: 5rem;
  }
}
.about__thumbnail--items.active::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--bg-black-color);
  left: 0;
  top: 0;
  border-radius: 1rem;
  opacity: 0.7;
  transition: var(--transition);
}
.about__thumbnail--items.two {
  position: absolute;
  bottom: 0;
  right: 0;
}
@media only screen and (max-width: 575px) {
  .about__thumbnail--items.two {
    max-width: 300px;
  }
}
@media only screen and (max-width: 479px) {
  .about__thumbnail--items.two {
    max-width: 223px;
    padding-right: 0;
  }
}

.about__content {
  width: 100%;
}
@media only screen and (min-width: 992px) {
  .about__content {
    width: calc(100% - 52rem);
    padding-left: 5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .about__content {
    width: calc(100% - 59rem);
    padding-left: 6rem;
  }
}
@media only screen and (min-width: 1366px) {
  .about__content {
    padding-left: 10rem;
  }
}
@media only screen and (max-width: 575px) {
  .about__content {
    text-align: center;
  }
}
.about__content--subtitle {
  font-size: 1.6rem;
  line-height: 2.1rem;
  margin-bottom: 0.8rem;
  font-weight: 500;
  color: var(--secondary-color);
}
@media only screen and (min-width: 768px) {
  .about__content--subtitle {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
}
@media only screen and (min-width: 1200px) {
  .about__content--subtitle {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}
.about__content--title {
  margin-bottom: 1.4rem;
}
@media only screen and (min-width: 768px) {
  .about__content--title {
    margin-bottom: 1.6rem;
    font-size: 2.2rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 992px) {
  .about__content--title {
    font-size: 2.4rem;
    line-height: 3.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .about__content--title {
    margin-bottom: 2rem;
    font-size: 2.6rem;
    line-height: 3.5rem;
  }
}
.about__content--desc {
  font-size: 1.4rem;
  line-height: 2.8rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 768px) {
  .about__content--desc {
    font-size: 1.5rem;
    line-height: 3rem;
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .about__content--desc {
    margin-bottom: 2.2rem;
  }
}
.about__content--btn {
  margin-top: 1.5rem;
}
@media only screen and (min-width: 992px) {
  .about__content--btn {
    margin-top: 3rem;
  }
}

.about__experience--text {
  position: absolute;
  top: 3.5rem;
  right: 0;
  border: 1px solid var(--secondary-color);
  background: var(--body-background-color);
  border-radius: 0.5rem;
  padding: 1rem 2rem;
}
@media only screen and (min-width: 992px) {
  .about__experience--text {
    padding: 1.5rem;
  }
}
@media only screen and (min-width: 1366px) {
  .about__experience--text {
    padding: 2rem 3rem;
  }
}
@media only screen and (max-width: 575px) {
  .about__experience--text {
    top: 3rem;
    transform: inherit;
  }
}

.about__experience--years {
  font-size: 3rem;
  line-height: 2.5rem;
  color: var(--primary-color);
  font-weight: 600;
  display: block;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .about__experience--years {
    font-size: 3rem;
    line-height: 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .about__experience--years {
    font-size: 3rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 1366px) {
  .about__experience--years {
    font-size: 3.5rem;
    line-height: 4rem;
  }
}
.about__experience--years__inner {
  font-family: var(--frank-ruhl-fonts);
}

.about__experience--title {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 2rem;
}
@media only screen and (min-width: 768px) {
  .about__experience--title {
    font-size: 1.4rem;
    line-height: 2.2rem;
  }
}
@media only screen and (min-width: 992px) {
  .about__experience--title {
    font-size: 1.5rem;
    line-height: 2.4rem;
  }
}
@media only screen and (min-width: 1366px) {
  .about__experience--title {
    font-size: 1.6rem;
    line-height: 2.6rem;
  }
}

.bideo__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translatey(-50%) translatex(-50%);
  transition: var(--transition);
}
.bideo__play--icon {
  width: 5.5rem;
  height: 5.5rem;
  background: #f7eedd;
  color: var(--secondary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-animation: animate 2s linear infinite;
  animation: animate 2s linear infinite;
}
.bideo__play--icon:hover {
  color: var(--text-white-color);
  background: var(--hover-color);
}
.bideo__play--icon:hover {
  transform: scale(1.08);
}

@-webkit-keyframes animate {
  0% {
    box-shadow: 0 0 0 0 rgba(201, 127, 95, 0.7);
  }
  40% {
    box-shadow: 0 0 0 50px rgba(201, 127, 95, 0);
  }
  80% {
    box-shadow: 0 0 0 50px rgba(201, 127, 95, 0);
  }
  100% {
    box-shadow: 0 0 0 rgba(201, 127, 95, 0);
  }
}

@keyframes animate {
  0% {
    box-shadow: 0 0 0 0 rgba(201, 127, 95, 0.7);
  }
  40% {
    box-shadow: 0 0 0 50px rgba(201, 127, 95, 0);
  }
  80% {
    box-shadow: 0 0 0 50px rgba(201, 127, 95, 0);
  }
  100% {
    box-shadow: 0 0 0 rgba(201, 127, 95, 0);
  }
}
/*
    team member css
*/
.team__items:hover .team__thumb::before {
  opacity: 0.6;
}
.team__items:hover .team__thumb--img {
  transform: scale(1.1);
}
.team__items:hover .team__social {
  bottom: 3rem;
  opacity: 1;
}

.team__thumb {
  position: relative;
  line-height: 1;
  display: inline-block;
  transition: var(--transition);
  border-radius: 1rem;
  overflow: hidden;
  width: 100%;
}
.team__thumb--img {
  border-radius: 10px;
  width: 100%;
}
.team__thumb::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  left: 0;
  top: 0;
  border-radius: 1rem;
  opacity: 0;
  transition: 0.3s;
  z-index: 9;
}

.team__social {
  gap: 1.2rem;
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  justify-content: center;
  transition: 0.3s;
  opacity: 0;
  z-index: 9;
}
@media only screen and (min-width: 1200px) {
  .team__social {
    gap: 1.5rem;
  }
}
.team__social--icon {
  text-align: center;
  color: var(--text-white-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team__social--icon:hover {
  color: var(--hover-color);
}

.team__content {
  padding: 0.8rem 0 0;
  text-align: center;
}
@media only screen and (max-width: 991px) {
  .team__content {
    padding: 0.5rem 0 0;
  }
}
.team__content--subtitle {
  color: var(--foreground-sub-color);
  font-size: 1.3rem;
  line-height: 2rem;
}
@media only screen and (min-width: 767px) {
  .team__content--subtitle {
    font-size: 1.4rem;
  }
}
.team__content--title {
  font-weight: 400;
  margin-bottom: 0.5rem;
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 992px) {
  .team__content--title {
    font-size: 1.7rem;
  }
}
@media only screen and (min-width: 1200px) {
  .team__content--title {
    font-size: 1.8rem;
  }
}

.testimonial__bg--gray {
  background: var(--bg-offwhite-color);
}

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

.counterup__banner--inner {
  padding: 5rem 0;
  gap: 2.5rem;
}
@media only screen and (max-width: 767px) {
  .counterup__banner--inner {
    flex-wrap: wrap;
  }
}

.counterup__title {
  color: var(--primary-color);
  font-size: 1.5rem;
  line-height: 2.4rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
}
@media only screen and (min-width: 992px) {
  .counterup__title {
    font-size: 1.6rem;
    line-height: 2.5rem;
    margin-bottom: 1.8rem;
  }
}

.counterup__number {
  font-size: 2.5rem;
  line-height: 2.5rem;
  font-weight: 500;
  color: var(--primary-color);
}
@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;
  }
}

/* 
    25. Contact page css 
*/
.contact__section--heading__maintitle {
  font-size: 2.4rem;
  line-height: 2.8rem;
  color: var(--secondary-color);
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .contact__section--heading__maintitle {
    font-size: 2.8rem;
    line-height: 3rem;
  }
}
.contact__section--heading__desc {
  color: var(--primary-color);
  width: 100%;
  margin: 0 auto;
  font-size: 1.5rem;
  line-height: 2.6rem;
}
@media only screen and (min-width: 576px) {
  .contact__section--heading__desc {
    width: 90%;
  }
}
@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;
  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;
  color: var(--primary-color);
}
@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;
  font-size: 1.5rem;
  color: var(--primary-color);
}
.contact__form--label__star {
  color: var(--secondary-color);
}
.contact__form--input {
  width: 100%;
  height: 45px;
  padding: 5px 15px;
  border-radius: 8px;
  font-size: 1.4rem;
  border: 1px solid var(--border-color);
}
.contact__form--input:focus {
  border-color: var(--secondary-color) !important;
}
@media only screen and (min-width: 768px) {
  .contact__form--input {
    height: 50px;
  }
}
.contact__form--textarea {
  width: 100%;
  height: 100px;
  padding: 12px 15px;
  border-radius: 8px;
  resize: none;
  border: 1px solid var(--border-color);
  font-size: 1.4rem;
}
.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;
  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;
    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(--hover-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: flex;
  align-items: 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: 330px;
  margin-bottom: -7px;
}
@media only screen and (min-width: 480px) {
  .contact__map--iframe {
    height: 410px;
  }
}
@media only screen and (min-width: 768px) {
  .contact__map--iframe {
    height: 450px;
  }
}
@media only screen and (min-width: 992px) {
  .contact__map--iframe {
    height: 500px;
  }
}
@media only screen and (min-width: 1200px) {
  .contact__map--iframe {
    height: 600px;
  }
}
@media only screen and (min-width: 1366px) {
  .contact__map--iframe {
    height: 700px;
  }
}

.map__content--box {
  position: absolute;
  width: 35rem;
  background: var(--body-background-color);
  padding: 2.5rem;
  top: 50%;
  transform: translatey(-50%);
  left: 17%;
  border-radius: 1rem;
}
@media only screen and (min-width: 992px) {
  .map__content--box {
    padding: 3rem;
  }
}
.map__content--box.active {
  display: none;
}
@media only screen and (min-width: 768px) {
  .map__content--box {
    width: 42rem;
  }
}
@media only screen and (max-width: 479px) {
  .map__content--box {
    display: none;
  }
}

.map__content--step {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
}
@media only screen and (min-width: 992px) {
  .map__content--step {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }
}
.map__content--step:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.map__content--title {
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
}
.map__content--title svg {
  margin-right: 0.5rem;
}
.map__content--desc {
  font-size: 1.4rem;
  line-height: 2.8rem;
  color: #868686;
  margin-bottom: 0;
}

.map__link {
  margin-top: 2rem;
}

.map__close--btn {
  position: absolute;
  right: 15px;
  top: 1.5rem;
  padding: 0;
  border: 0;
  background: inherit;
  line-height: 1.3rem;
}

/* 
    26. Login page css 
*/
.account__login {
  background: var(--body-background-color);
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 576px) {
  .account__login {
    padding: 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .account__login {
    padding: 3rem;
  }
}
.account__login--header__title {
  font-weight: 600;
  color: var(--primary-color);
}
@media only screen and (min-width: 992px) {
  .account__login--header__title {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}
.account__login--header__desc {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
}
.account__login--input {
  width: 100%;
  height: 4.8rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0 1.5rem;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .account__login--input {
    height: 5.2rem;
  }
}
@media only screen and (min-width: 992px) {
  .account__login--input {
    font-size: 1.5rem;
  }
}
.account__login--input:focus {
  border-color: var(--secondary-color);
}
.account__login--btn {
  width: 100%;
  border-radius: 0.5rem;
  font-size: 1.5rem;
}
@media only screen and (min-width: 992px) {
  .account__login--btn {
    font-size: 1.7rem;
  }
}
.account__login--signup__text {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
}
.account__login--signup__text button {
  padding: 0;
  border: 0;
  background: inherit;
  font-weight: 600;
  color: var(--secondary-color);
}
.account__login--forgot {
  font-weight: 600;
  color: var(--secondary-color);
  font-size: 1.5rem;
  border: 0;
  padding: 0;
  background: inherit;
}
@media only screen and (max-width: 575px) {
  .account__login--forgot {
    margin-top: 0.6rem;
  }
}
@media only screen and (max-width: 767px) {
  .account__login.register {
    margin-top: 3rem;
  }
}

.account__login--remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media only screen and (max-width: 575px) {
  .account__login--remember__forgot {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media only screen and (max-width: 575px) {
  .account__login--remember .checkout__checkbox--checkmark {
    top: 0;
    top: 5px;
    transform: inherit;
  }
}

.login__remember--label {
  color: var(--primary-color);
  font-size: 1.3rem;
  font-weight: 600;
}
@media only screen and (min-width: 992px) {
  .login__remember--label {
    font-size: 1.5rem;
  }
}

.account__login--divide {
  text-align: center;
  position: relative;
  padding: 1rem 0;
}
.account__login--divide::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 0.1rem;
  background: var(--border-color);
  top: 50%;
  left: 0;
  transform: translatey(-50%);
}
.account__login--divide__text {
  padding: 0 0.8rem;
  background: var(--body-background-color);
  position: relative;
  font-weight: 500;
  color: var(--foreground-sub-color);
}
@media only screen and (min-width: 992px) {
  .account__login--divide__text {
    font-size: 1.5rem;
  }
}

.account__social--link {
  height: 4.2rem;
  line-height: 4.6rem;
  padding: 0 2.5rem;
  color: var(--text-white-color);
  border-radius: 0.5rem;
  font-weight: 600;
  margin-right: 1rem;
}
.account__social--link.facebook {
  background: #4867aa;
}
.account__social--link.facebook:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}
.account__social--link.google {
  background: #e94235;
}
.account__social--link.google:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}
.account__social--link.twitter {
  background: #55adee;
}
.account__social--link.twitter:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}
.account__social--link:last-child {
  margin-right: 0;
}
@media only screen and (min-width: 768px) {
  .account__social--link {
    padding: 0 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .account__social--link {
    padding: 0 3.2rem;
    margin-right: 1.2rem;
    font-size: 1.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .account__social--link {
    padding: 0 4.5rem;
    margin-right: 2rem;
  }
}
@media only screen and (max-width: 575px) {
  .account__social--link {
    height: 4rem;
    line-height: 4.4rem;
    padding: 0 1.4rem;
  }
}

/* 
    27. Portfolio css 
*/
.portfolio__items--thumbnail {
  border-radius: 5px;
}
.portfolio__items--thumbnail::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--hover-color);
  top: 0;
  left: 0;
  opacity: 0;
  transition: var(--transition);
  z-index: 9;
  pointer-events: none;
  border-radius: 5px;
}
.portfolio__items--thumbnail:hover::before {
  opacity: 0.5;
}
.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 {
  transform: scale(1.05);
}
.portfolio__items--thumbnail__img {
  transition: 0.3s;
  border-radius: 5px;
}

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

/* 
    28. Error 404 page css 
*/
.error__content--img {
  margin: 0 auto 4rem;
}
@media only screen and (max-width: 1199px) {
  .error__content--img {
    max-width: 600px;
  }
}
@media only screen and (max-width: 767px) {
  .error__content--img {
    max-width: 450px;
    margin: 0 auto 3rem;
  }
}
@media only screen and (max-width: 575px) {
  .error__content--img {
    max-width: 100%;
    padding: 0 3rem;
    margin: 0 auto 2.5rem;
  }
}
.error__content--title {
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  line-height: 2.6rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 576px) {
  .error__content--title {
    margin-bottom: 1.5rem;
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 768px) {
  .error__content--title {
    margin-bottom: 1.8rem;
    font-size: 2.8rem;
    line-height: 3.2rem;
  }
}
@media only screen and (min-width: 992px) {
  .error__content--title {
    font-size: 3rem;
    line-height: 3.5rem;
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .error__content--title {
    font-size: 3.2rem;
    line-height: 4rem;
    margin-bottom: 2rem;
  }
}
.error__content--desc {
  color: var(--foreground-sub-color);
  font-size: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .error__content--desc {
    font-size: 1.6rem;
    line-height: 2.2rem;
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .error__content--desc {
    font-size: 1.7rem;
    line-height: 2.3rem;
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .error__content--desc {
    font-size: 1.8rem;
    line-height: 2.5rem;
    margin-bottom: 3rem;
  }
}
.error__content--btn {
  background: var(--secondary-color);
  color: var(--text-white-color);
}
@media only screen and (min-width: 992px) {
  .error__content--btn {
    font-size: 1.6rem;
  }
}
.error__content--btn:hover {
  background: var(--hover-color);
  color: var(--primary-color);
}

/* 
    29. Cart page css 
*/
.cart__title {
  color: var(--primary-color);
}
@media only screen and (max-width: 575px) {
  .cart__title {
    text-align: center;
  }
}

@media only screen and (max-width: 767px) {
  .cart__table.mb-50 {
    margin-bottom: 5rem;
  }
}
.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);
  color: var(--primary-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: flex;
    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: flex;
    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__content--title a {
  color: var(--primary-color);
}
.cart__content--title a:hover {
  color: var(--secondary-color);
}

.cart__remove--btn {
  font-weight: 600;
  min-width: 3rem;
  height: 3rem;
  background: var(--body-background-color);
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  margin-right: 1.5rem;
  border-radius: 50%;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@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;
  color: var(--primary-color);
}
@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--total__table {
  width: 100%;
}
.cart__summary--topbar {
  gap: 3rem;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 575px) {
  .cart__summary--topbar {
    flex-direction: column;
  }
}

.cart__summary--footer__btn--aera {
  gap: 3rem;
}

.coupon__code--title {
  font-size: 1.7rem;
  margin-bottom: 0.7rem;
  line-height: 2.4rem;
  color: var(--primary-color);
}
@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;
  font-size: 1.4rem;
}
@media only screen and (max-width: 991px) {
  .coupon__code--field {
    justify-content: space-between;
  }
}
.coupon__code--field__input {
  border: 1px solid var(--border-color);
  height: 4.2rem;
  padding: 0 1.5rem;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  width: 100%;
}
@media only screen and (min-width: 992px) {
  .coupon__code--field__input {
    width: 300px;
  }
}
@media only screen and (min-width: 1200px) {
  .coupon__code--field__input {
    width: 400px;
  }
}
.coupon__code--field__input:focus {
  border-color: var(--secondary-color);
}
.coupon__code--field__btn {
  margin-top: 2rem;
  font-size: 1.4rem;
  height: 3.8rem;
  line-height: 3.8rem;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .coupon__code--field__btn {
    font-size: 1.3rem;
    padding: 0 1rem;
  }
}

.cart__note--title {
  font-size: 1.7rem;
  margin-bottom: 0.7rem;
  line-height: 2.4rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 992px) {
  .cart__note--title {
    font-size: 2rem;
  }
}
.cart__note--desc {
  color: var(--light-color);
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
}
.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: flex;
  justify-content: space-between;
}
.cart__summary--total__list:last-child {
  margin-bottom: 0;
}
.cart__summary--total__title {
  font-size: 1.4rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 768px) {
  .cart__summary--total__title {
    font-size: 1.5rem;
  }
}

.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;
  font-size: 1.4rem;
  height: 3.8rem;
  line-height: 3.8rem;
}
@media only screen and (min-width: 1200px) {
  .cart__summary--footer__btn {
    padding: 0 2.5rem;
  }
}

.wishlist__cart--btn {
  line-height: 4rem;
  height: 4rem;
  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;
  }
}

.estimate__shipping {
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 3.5rem 2rem 2.5rem;
  position: relative;
}
@media only screen and (min-width: 576px) {
  .estimate__shipping {
    padding: 5rem 3rem;
  }
}
@media only screen and (max-width: 575px) {
  .estimate__shipping--list {
    width: 100%;
  }
}

.estimate__shipping--title {
  position: absolute;
  top: -25px;
  left: 50%;
  font-size: 2.4rem;
  line-height: 2.8rem;
  transform: translatex(-50%);
  background: var(--body-background-color);
  padding: 1rem 3rem;
}
@media only screen and (max-width: 575px) {
  .estimate__shipping--title {
    padding: 0.5rem 1rem;
    transform: inherit;
    left: 3rem;
    right: 3rem;
    text-align: center;
    font-size: 2rem;
  }
}

.estimate__shipping--inner {
  gap: 2.5rem;
  flex-wrap: wrap;
}
@media only screen and (min-width: 576px) {
  .estimate__shipping--inner {
    gap: 3rem;
  }
}

.estimate__shipping--select__field {
  height: 5rem;
  border: 1px solid var(--border-color);
  width: 100%;
  border-radius: 3rem;
  padding: 0 3.5rem 0 1.5rem;
  -webkit-appearance: none;
}
@media only screen and (min-width: 576px) {
  .estimate__shipping--select__field {
    width: 22rem;
  }
}
@media only screen and (min-width: 768px) {
  .estimate__shipping--select__field {
    width: 28rem;
  }
}
.estimate__shipping--select__field:focus {
  border-color: var(--secondary-color);
}

.estimate__shipping--code__field {
  height: 5rem;
  border: 1px solid var(--border-color);
  width: 100%;
  border-radius: 3rem;
  padding: 0 2rem;
}
.estimate__shipping--code__field:focus {
  border-color: var(--secondary-color);
}
@media only screen and (min-width: 576px) {
  .estimate__shipping--code__field {
    width: 22rem;
  }
}
@media only screen and (min-width: 768px) {
  .estimate__shipping--code__field {
    width: 28rem;
  }
}

.estimate__shipping--button {
  height: 5rem;
  width: 100%;
  border-radius: 3rem;
  padding: 0 2rem;
  background: var(--hover-color);
  font-size: 1.6rem;
  font-weight: 500;
  border: 0;
}
.estimate__shipping--button:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}
@media only screen and (min-width: 576px) {
  .estimate__shipping--button {
    width: 22rem;
  }
}
@media only screen and (min-width: 768px) {
  .estimate__shipping--button {
    width: 28rem;
  }
}

.estimate__shipping {
  margin-top: 7rem;
}

/*
   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 {
  flex-direction: row;
  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;
  color: var(--primary-color);
  font-size: 1.4rem;
}
@media only screen and (min-width: 768px) {
  .checkout__checkbox--label {
    font-size: 1.5rem;
  }
}

.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);
  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;
  transform: rotate(45deg);
  content: "";
  position: absolute;
  display: none;
}

.checkout__input--label {
  display: inline-block;
  font-size: 1.4rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 1200px) {
  .checkout__input--label {
    font-size: 1.5rem;
  }
}
.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;
  font-size: 1.3rem;
}
@media only screen and (min-width: 1200px) {
  .checkout__input--field {
    font-size: 1.4rem;
  }
}
.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 {
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
  }
}

.checkout__header--title {
  font-size: 2rem;
  line-height: 2.2rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 1200px) {
  .checkout__header--title {
    font-size: 2.2rem;
    line-height: 2.4rem;
  }
}
@media only screen and (max-width: 575px) {
  .checkout__header--title {
    margin-bottom: 0.8rem;
  }
}

.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;
  font-size: 1.4rem;
}
.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 {
    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__thumbnail a img {
  margin: 0 auto;
}

.product__description {
  padding-left: 1.5rem;
}
.product__description--name {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 600;
  opacity: 0.9;
}
.product__description--name a {
  color: var(--primary-color);
}
.product__description--name a:hover {
  color: var(--secondary-color);
}
.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;
  font-size: 1.4rem;
}
.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.4rem;
  }
}
.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.2rem;
    line-height: 4.2rem;
    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;
  color: var(--primary-color);
}
.checkout__total--footer__amount {
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary-color);
}

.checkout__order--summary__title {
  font-size: 2rem;
  line-height: 2.2rem;
  color: var(--primary-color);
}
@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: 1.8rem;
  line-height: 2.2rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 1200px) {
  .payment__history--title {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}
@media only screen and (max-width: 575px) {
  .payment__history--inner {
    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.4rem;
    line-height: 4.4rem;
  }
}

.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.4rem;
    line-height: 4.4rem;
  }
}

/* 
    31. Compare page css 
*/
.compare__table {
  border: 1px solid var(--border-color);
  border-spacing: 0;
  border-bottom: 0;
}
.compare__table--items__child {
  padding: 1.2rem;
  border-left: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}
.compare__table--items__child:first-child {
  border-left: 0;
}
@media only screen and (max-width: 991px) {
  .compare__table--items__child {
    min-width: 200px;
  }
}
.compare__table--items__child--header {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  background: var(--bg-offwhite-color);
  text-align: center;
  color: var(--primary-color);
}
@media only screen and (max-width: 1199px) {
  .compare__table--items__child--header {
    font-size: 1.4rem;
  }
}

.compare__product--title {
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.compare__product--thumb {
  border-radius: 0.5rem;
  margin: 0 auto;
}

.compare__remove {
  padding: 0;
  float: right;
  width: 100%;
  border: 0;
  background: inherit;
  text-align: center;
  color: var(--primary-color);
}
.compare__remove:hover {
  color: var(--secondary-color);
}

.compare__description {
  color: var(--primary-color);
  padding: 0.5rem 0;
  font-size: 1.4rem;
}

.compare__instock {
  text-transform: uppercase;
  font-size: 1.3rem;
}

.compare__product--price {
  color: var(--primary-color);
}

.compare__cart--btn {
  border-radius: 0.5rem;
  text-transform: uppercase;
  padding: 0 2rem;
  height: 4rem;
  line-height: 4rem;
  font-size: 1.3rem;
}
@media only screen and (min-width: 992px) {
  .compare__cart--btn {
    height: 4.2rem;
    line-height: 4.2rem;
    padding: 0 2.5rem;
  }
}

/* 
    32. Faq page css 
*/
.face__step {
  margin-bottom: 3.5rem;
  padding-bottom: 3.8rem;
}
.face__step:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.face__step--title {
  font-weight: 600;
  font-size: 2rem;
  line-height: 2.5rem;
  color: var(--primary-color);
}
@media only screen and (max-width: 767px) {
  .face__step--title.mb-30 {
    margin-bottom: 2.2rem;
  }
}

.faq__accordion--btn {
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
  padding: 1.8rem 6rem 1.8rem 2rem;
  font-size: 1.5rem;
  border-radius: 0.5rem;
  color: var(--body-text-color);
}
.faq__accordion--btn .accordion__items--button__icon {
  right: 1rem;
}
@media only screen and (min-width: 768px) {
  .faq__accordion--btn .accordion__items--button__icon {
    right: 1.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .faq__accordion--btn .accordion__items--button__icon {
    right: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .faq__accordion--btn {
    font-size: 1.7rem;
  }
}

/* 
    33. Accordion css
*/
.accordion__items.active {
  margin-bottom: 20px;
}
.accordion__items.active:last-child {
  margin-bottom: 0;
}
.accordion__items.active .accordion__items--button__icon--svg {
  transform: rotate(180deg);
}
.accordion__items--body {
  display: none;
  padding: 0 20px;
}
.accordion__items--body__desc {
  font-size: 1.5rem;
  line-height: 2.8rem;
}
.accordion__items:last-child .accordion__items--button {
  margin-bottom: 0;
}
.accordion__items--button {
  border: 0;
  background: var(--white-color);
  width: 100%;
  padding: 13px 60px 13px 25px;
  text-align: left;
  margin-bottom: 15px;
  font-size: 1.6rem;
  font-weight: 500;
  position: relative;
}
@media only screen and (min-width: 992px) {
  .accordion__items--button {
    padding: 15px 70px 15px 30px;
  }
}
.accordion__items--button__icon {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--primary-color);
  color: var(--text-white-color);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translatey(-50%);
}
@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__icon--svg {
  transition: var(--transition);
  width: 1.8rem;
  height: 1.8rem;
}
.accordion__items--button > * {
  pointer-events: none;
}

/* 
    34. My account page css 
*/
.my__account--section__inner {
  background: var(--body-background-color);
  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 {
    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: 500;
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 1.5rem;
}
.account__menu--list:last-child {
  margin-bottom: 0;
}
.account__menu--list a {
  color: var(--primary-color);
}
.account__menu--list a: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(--primary-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: 4rem;
  border-radius: 2.5rem;
  margin-right: 1rem;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.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: 500;
  font-size: 1.8rem;
  line-height: 2.3rem;
  color: var(--primary-color);
}
@media only screen and (min-width: 992px) {
  .account__content--title {
    font-size: 2rem;
    margin-bottom: 2.5rem;
  }
}

.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;
  color: var(--primary-color);
}
.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: flex;
    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(--primary-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: flex;
    justify-content: space-between;
    border: 0;
  }
}
@media only screen and (max-width: 479px) {
  .account__table--body__child--items {
    padding: 0.5rem 0;
  }
}

/* 
    35. Privacy policy css 
*/
.privacy__policy--content {
  margin-bottom: 2rem;
}
.privacy__policy--content:last-child {
  margin-bottom: 0;
}
.privacy__policy--content__title {
  font-size: 1.8rem;
  line-height: 2.3rem;
  margin-bottom: 1rem;
  font-weight: 400;
  color: var(--primary-color);
}
@media only screen and (min-width: 768px) {
  .privacy__policy--content__title {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .privacy__policy--content__title {
    font-size: 2.2rem;
    line-height: 2.5rem;
    margin-bottom: 1.2rem;
  }
}
.privacy__policy--content__subtitle {
  font-size: 1.7rem;
  line-height: 2.5rem;
  margin-bottom: 0.8rem;
  font-weight: 400;
  color: var(--primary-color);
}
@media only screen and (min-width: 1600px) {
  .privacy__policy--content__subtitle {
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 1rem;
  }
}
.privacy__policy--content__desc {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  line-height: 2.6rem;
}
@media only screen and (min-width: 1200px) {
  .privacy__policy--content__desc {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
} /*# sourceMappingURL=style.css.map */