@charset "UTF-8";
/*
  Template Name: Becute - Beauty and Cosmetics HTML Template
  Author Name: Hook theme
  Author URL: https://themeforest.net/user/hooktheme
  Version: 1.0.0

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

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

*/
/*
    1. Base CSS
*/
:root {
  --primary-color: #3C3836;
  --secondary-color: #0b6ab0;
  --hover-color: #ED1D24;
  --yellow-color: #FF9800;
  --foreground-color: #000000;
  --foreground-sub-color: #98928E;
  --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: #EDEDED;
  --frank-ruhl-fonts: 'Frank Ruhl Libre', serif;
  --karma-fonts: 'Karma', serif;
  --body-font-size: 1.5rem;
  --body-font-weight: 400;
  --body-line-height: 2.6rem;
  --headings-weight: 700;
  --transition: all 0.3s ease 0s;
  --container-fluid-offset: 12rem;
}

/* Common Style */
*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
          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(--karma-fonts);
  font-size: var(--body-font-size, 1.5rem);
  font-weight: var(--body-font-weight);
  font-style: normal;
  line-height: var(--body-line-height, 26px);
  position: relative;
  visibility: visible;
  overflow-x: hidden;
  color: var(--foreground-color);
  background-color: var(--background-color);
}

@media only screen and (max-width: 767px) {
  body {
    font-size: 1.4rem;
    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: var(--headings-weight);
  margin: 0;
  font-family: var(--frank-ruhl-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: 6rem;
  }
}

@media only screen and (min-width: 1366px) {
  h1,
  .h1 {
    font-size: 5.5rem;
    line-height: 7rem;
  }
}

@media only screen and (min-width: 1600px) {
  h1,
  .h1 {
    font-size: 6rem;
    line-height: 7.5rem;
  }
}

h2,
.h2 {
  font-size: 2rem;
  line-height: 2.6rem;
  font-weight: 600;
}

@media only screen and (min-width: 576px) {
  h2,
  .h2 {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}

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

@media only screen and (min-width: 1200px) {
  h2,
  .h2 {
    font-size: 2.8rem;
    line-height: 3.5rem;
  }
}

@media only screen and (min-width: 1366px) {
  h2,
  .h2 {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}

h3,
.h3 {
  font-size: 1.5rem;
  line-height: 2.4rem;
}

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

h4,
.h4 {
  font-size: 1.6rem;
  line-height: 2.6rem;
}

@media only screen and (min-width: 1200px) {
  h4,
  .h4 {
    font-size: 1.7rem;
    line-height: 2.8rem;
  }
}

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;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}

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

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

:focus-visible {
  -webkit-box-shadow: 0 0 5px 2px rgba(19, 19, 19, 0.15);
          box-shadow: 0 0 5px 2px rgba(19, 19, 19, 0.15);
}

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;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

label {
  -webkit-transition: var(--transition);
  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 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .d-lg-none {
    display: none;
  }
}

@media only screen and (max-width: 991px) {
  .d-md-none {
    display: none;
  }
  .d-md-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .col-md-order {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .col-sm-order {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .col-sm-2-order {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
  .row_md_reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

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

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

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

.swiper__nav--btn {
  width: 3.5rem;
  height: 3.5rem;
  background: inherit;
  border: 1px solid var(--secondary-color);
  background: var(--body-background-color);
  color: var(--secondary-color);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: 9;
}

@media only screen and (max-width: 479px) {
  .swiper__nav--btn {
    width: 3rem;
    height: 3rem;
  }
}

.swiper__nav--btn.swiper-button-disabled {
  background: inherit;
  color: var(--primary-color);
}

.swiper__nav--btn:hover {
  background: var(--secondary-color);
  color: var(--text-white-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: 0 !important;
}

.swiper-pagination-bullet {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--primary-color);
  opacity: 1;
  vertical-align: middle;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background: inherit;
  margin: 0 4px !important;
  position: relative;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--primary-color);
}

/*
  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;
  left: 0;
  right: 0;
  z-index: 9;
}

.primary__btn {
  font-weight: 500;
  display: inline-block;
  font-size: 1.3rem;
  line-height: 4.2rem;
  height: 3.8rem;
  padding: 0 2rem;
  letter-spacing: 0.2px;
  border-radius: 0.5rem;
  background: var(--secondary-color);
  color: var(--text-white-color);
  border: 0;
}

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

@media only screen and (min-width: 768px) {
  .primary__btn {
    line-height: 4.4rem;
    height: 4rem;
    padding: 0 2.2rem;
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 992px) {
  .primary__btn {
    font-size: 1.5rem;
    line-height: 4.8rem;
    height: 4.4rem;
    padding: 0 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .primary__btn {
    line-height: 5rem;
    height: 4.6rem;
    padding: 0 3.5rem;
  }
}

.gradient__text--color {
  background: -webkit-gradient(linear, left top, right top, from(#1066E7), to(#C81CC5));
  background: linear-gradient(to right, #1066E7 0%, #C81CC5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

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;
  -webkit-transform-origin: 66% 66%;
          transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  opacity: 0.7;
}

.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 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem;
}

.section__heading--desc {
  margin-top: 1.2rem;
}

#scroll__top {
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 99;
  outline: none;
  background-color: var(--secondary-color);
  color: var(--text-white-color);
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
          box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  line-height: 1;
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 50%;
  border: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#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;
  -webkit-transform: translateY(0);
          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-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__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;
}

.position__relative {
  position: relative;
}

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

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

.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;
  -webkit-transition: var(--transition);
  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;
}

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

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.animate-fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

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

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

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

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

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

@media only screen and (min-width: 1200px) {
  .section--padding {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

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

@media only screen and (min-width: 768px) {
  .section--nargin {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
}

/* 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;
}

.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;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  background-color: var(--body-background-color);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
}

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

.offcanvas__header.open {
  -webkit-transform: translateX(0);
          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%;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  opacity: 0;
  background-color: var(--bg-black-color);
}

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

.offcanvas__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 20px 15px;
}

.offcanvas__logo img {
  max-width: 9.5rem;
}

.offcanvas__close--btn {
  position: relative;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      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: "";
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  background-color: var(--bg-black-color);
}

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

/* 
    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: "";
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  background-color: var(--bg-black-color);
}

.offcanvas__sub_menu_toggle:not(.active)::after {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
          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;
  -webkit-box-shadow: 0 0 9px rgba(0, 0, 0, 0.12);
          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 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.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;
}

/*
    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;
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

@media only screen and (max-width: 575px) {
  .header__sticky.sticky {
    padding: 1.5rem 0.5rem;
  }
}

/*
   header topbar css here
*/
.header__topbar {
  padding: 8px 0;
}

@media only screen and (min-width: 768px) {
  .header__topbar {
    padding: 10px 0;
  }
}

/*
    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%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  opacity: 0.6;
}

.language__currency--link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--text-white-color);
  font-family: var(--jost-fonts);
  font-size: 1.5rem;
  line-height: 3.5rem;
}

.language__currency--link--icon__img {
  vertical-align: middle;
  margin-right: 5px;
}

.language__currency--link:hover span {
  color: var(--secondary-color);
}

.language__currency--link:hover svg {
  color: var(--secondary-color);
}

.language__currency--link svg {
  -webkit-transition: var(--transition);
  transition: var(--transition);
  margin-left: 5px;
}

.language__currency--link > * {
  pointer-events: none;
}

.currency__link--icon {
  margin-right: 6px;
}

.dropdown__switcher {
  position: absolute;
  z-index: 9;
  width: 100px;
  -webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  top: 100%;
  opacity: 0;
  visibility: hidden;
  margin-top: 16px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background: var(--body-background-color);
  border: 1px solid var(--border-color);
  border-radius: 5px;
}

.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;
  -webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  bottom: 100%;
  opacity: 0;
  visibility: hidden;
  margin-bottom: 15px;
  -webkit-transition: var(--transition);
  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: 15px 0;
}

.main__header.sticky {
  border-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .main__header {
    padding: 12px 0;
  }
}

@media only screen and (min-width: 1600px) {
  .main__header {
    padding: 16px 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: 767px) {
  .main__logo {
    padding-left: 4.5rem;
  }
}

@media only screen and (max-width: 575px) {
  .main__logo {
    padding-left: 12px;
  }
}

.main__logo--link {
  display: block;
}

.main__logo--img {
  max-width: 145px;
}

@media only screen and (min-width: 480px) {
  .main__logo--img {
    max-width: 160px;
  }
}

@media only screen and (min-width: 768px) {
  .main__logo--img {
    max-width: 100%;
  }
}

.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%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

.header__select--inner {
  border: 0;
  background: var(--body-background-color);
  height: 50px;
  padding: 0 32px 0 15px;
  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 35px 0 17px;
    font-size: 1.5rem;
  }
}

.header__search--form {
  position: relative;
  width: 360px;
}

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

@media only screen and (min-width: 1366px) {
  .header__search--form {
    width: 600px;
  }
}

.header__search--form label {
  width: 100%;
}

.header__search--input {
  width: 100%;
  border: 0;
  height: 46px;
  border-radius: 3rem;
  padding: 0 80px 0 22px;
  font-size: 1.5rem;
  font-weight: 500;
}

.header__search--input:focus::-webkit-input-placeholder {
  color: #000000;
}

@media only screen and (min-width: 1200px) {
  .header__search--input {
    height: 52px;
    padding: 0 80px 0 22px;
  }
}

.header__search--button {
  position: absolute;
  top: 4px;
  right: 8px;
  height: 38px;
  border: 1px solid var(--border-color);
  padding: 0 20px;
  border-radius: 2rem;
  background: var(--bg-offwhite-color);
  color: var(--body-text-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

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

@media only screen and (min-width: 1200px) {
  .header__search--button {
    padding: 0 22px;
    top: 5px;
    right: 9px;
    height: 42px;
  }
}

.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);
  -webkit-box-shadow: 0 -4px 27px rgba(62, 70, 120, 0.16);
          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;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

.predictive__search--box.active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--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);
  -webkit-transform: scale(1.3);
          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.5rem;
}

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

.header__account--btn {
  position: relative;
}

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

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

.items__count {
  position: absolute;
  left: 7px;
  top: -10px;
  width: 1.7rem;
  height: 1.7rem;
  font-size: 1.1rem;
  line-height: 2rem;
  background: var(--primary-color);
  text-align: center;
  border-radius: 50%;
  color: var(--text-white-color);
}

@media only screen and (min-width: 576px) {
  .items__count {
    left: 1.2rem;
    top: -1.1rem;
  }
}

/*
    main menu css here
*/
.header__menu.header__sticky--block {
  display: none !important;
}

.header__menu--wrapper {
  gap: 1.7rem;
}

@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__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.5rem;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2rem;
  color: var(--primary-color);
}

.header__menu--link.active {
  color: var(--secondary-color) !important;
}

.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;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  opacity: 0;
  background-color: var(--body-background-color);
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.header__sub--menu__link {
  font-size: 1.5rem;
  display: block;
  line-height: 2.2rem;
  padding: 8px 0;
  font-weight: 500;
  color: var(--primary-color);
}

.mega__menu--items {
  position: static;
}

.header__mega--menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      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;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  visibility: hidden;
  opacity: 0;
  background-color: var(--body-background-color);
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
          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: 19%;
}

.header__mega--menu__li.banner__child {
  width: 24%;
}

.header__mega--menu__banner {
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}

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

.header__mega--menu__banner--img {
  border-radius: 5px;
}

.header__mega--sub__menu--title {
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 1rem 0;
  font-weight: 500;
  color: var(--primary-color);
}

/*
    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;
  -webkit-transition: .4s;
  transition: .4s;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  overflow-y: auto;
  -webkit-box-shadow: 0 0 15px rgba(5, 0, 0, 0.1);
          box-shadow: 0 0 15px rgba(5, 0, 0, 0.1);
}

.offCanvas__minicart.active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(0);
          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);
  -webkit-transform: scale(1.3);
          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: -webkit-box;
  display: -ms-flexbox;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.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;
  font-weight: 600;
  line-height: 4.4rem;
  height: 4rem;
  margin-right: 13px;
}

.minicart__button--link:last-child {
  margin-right: 0;
}

/*
    home five header css
*/
@media only screen and (max-width: 991px) {
  .header__search--box__style {
    display: none;
  }
}

.header__search--box__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header__search--box__form input::-webkit-input-placeholder {
  color: var(--primary-color);
}

.header__search--box__form input::-moz-placeholder {
  color: var(--primary-color);
}

.header__search--box__form input:-ms-input-placeholder {
  color: var(--primary-color);
}

.header__search--box__form input:-moz-placeholder {
  color: var(--primary-color);
}

.header__search--box__button {
  border: 0;
  background: inherit;
  padding: 0;
}

.header__search--input__field {
  border: 0;
  background: var(--body-background-color);
  height: 3rem;
  color: var(--primary-color);
  padding: 0 1.5rem;
  width: 14rem;
  -webkit-box-shadow: inherit;
          box-shadow: inherit;
}

.menu__style--two .header__menu--link {
  color: var(--text-white-color);
}

.menu__style--two .header__menu--items:hover .header__menu--link {
  color: var(--primary-color) !important;
}

.header__sticky.sticky .header__menu--link {
  color: var(--primary-color);
}

.header__sticky.sticky .header__menu--items:hover .header__menu--link {
  color: var(--secondary-color) !important;
}

/*
    home six header css
*/
@media only screen and (max-width: 991px) {
  .header__topbar--inner.style6 {
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
}

.main__header--six {
  padding: 8px 0;
}

.menu__color--white .header__menu--link {
  color: var(--text-white-color);
}

.menu__color--white .header__menu--items:hover .header__menu--link {
  color: var(--foreground-color) !important;
}

.header__topbar--info {
  gap: 2.5rem;
}

.header__info--text {
  position: relative;
}

.header__info--text:last-child::before {
  display: none;
}

.header__info--text::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 1.5rem;
  background: var(--border-color);
  right: -14px;
  top: 50%;
  -webkit-transform: translatey(-50%) skew(-21deg);
          transform: translatey(-50%) skew(-21deg);
  opacity: .5;
}

.header__info--text a {
  color: var(--text-white-color);
}

.header__info--text a:hover {
  color: var(--secondary-color);
}

.header__top--link {
  gap: 2.5rem;
}

.header__top--right {
  gap: 2.5rem;
}

@media only screen and (max-width: 479px) {
  .header__top--right {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
  }
}

.header__link--menu {
  position: relative;
}

.header__link--menu::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 1.7rem;
  background: var(--body-background-color);
  left: -11px;
  top: 50%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  opacity: .6;
}

.header__link--menu__text {
  color: var(--text-white-color);
}

.header__link--menu__text:hover {
  color: var(--secondary-color);
}

.main__logo--img.sticky__block {
  display: none;
}

.header__sticky.sticky .header__account--btn.text-white {
  color: var(--primary-color) !important;
}

.header__sticky.sticky .header__account--btn.text-white:hover {
  color: var(--secondary-color) !important;
}

.header__sticky.sticky .main__logo--img.sticky__none {
  display: none;
}

.header__sticky.sticky .main__logo--img.sticky__block {
  display: block;
}

/* 
    3. Slider css 
*/
.hero__slider--items {
  background: url(../img/slider/home1-slider1-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  background-color: #DFF0F9;
  position: relative;
  padding: 30px 0 60px;
}

@media only screen and (min-width: 480px) {
  .hero__slider--items {
    padding: 40px 0 70px;
  }
}

@media only screen and (min-width: 768px) {
  .hero__slider--items {
    padding: 75px 0;
  }
}

@media only screen and (min-width: 992px) {
  .hero__slider--items {
    padding: 110px 0;
  }
}

@media only screen and (min-width: 1366px) {
  .hero__slider--items {
    padding: 135px 0;
  }
}

@media only screen and (min-width: 1600px) {
  .hero__slider--items {
    padding: 250px 0;
  }
}

@media only screen and (max-width: 767px) {
  .hero__slider--items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

.slider__maintitle {
  margin-bottom: 1.2rem;
}

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

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

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

.slider__content {
  position: relative;
  z-index: 9;
}

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

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

.slider__desc {
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-bottom: 1.8rem;
}

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

@media only screen and (min-width: 992px) {
  .slider__desc {
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin-bottom: 2.2rem;
  }
}

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

.hero__slider--layer {
  position: absolute;
  right: 20px;
  bottom: 0;
}

@media only screen and (min-width: 1366px) and (max-width: 1599px) {
  .hero__slider--layer {
    max-width: 63rem;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .hero__slider--layer {
    max-width: 53.8rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__slider--layer {
    max-width: 49rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__slider--layer {
    max-width: 40rem;
  }
}

@media only screen and (max-width: 767px) {
  .hero__slider--layer {
    position: inherit;
    right: inherit;
    padding: 0 6rem;
  }
}

@media only screen and (max-width: 479px) {
  .hero__slider--layer {
    padding: 0 4rem;
  }
}

@media only screen and (max-width: 499px) {
  .hero__slider--layer {
    padding: 0 3rem;
  }
}

.slider__layer--img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  display: block;
}

.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__subtitle {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.swiper-slide-active .slider__maintitle {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.swiper-slide-active .slider__desc {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.swiper-slide-active .slider__price {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.swiper-slide-active .slider__btn {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

.swiper-slide-active .slider__layer--img {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: 1.4s;
  transition: 1.4s;
}

.slider__pagination.swiper-pagination {
  bottom: 2rem !important;
}

@media only screen and (min-width: 768px) {
  .slider__pagination.swiper-pagination {
    bottom: 3rem !important;
  }
}

/*
    home two css
*/
.home__two--slider__items {
  background: url(../img/slider/home2-slider1-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  background-color: #DFF0F9;
}

.slider__items--inner {
  padding-top: 8rem;
}

@media only screen and (min-width: 575px) {
  .slider__items--inner {
    padding-top: 9rem;
  }
}

@media only screen and (min-width: 768px) {
  .slider__items--inner {
    padding-top: 8rem;
  }
}

@media only screen and (min-width: 992px) {
  .slider__items--inner {
    padding-top: 9rem;
  }
}

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

@media only screen and (min-width: 1600px) {
  .slider__items--inner {
    padding-top: 14rem;
  }
}

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

.slider__items--inner .slider__layer--img {
  margin: 0 0 0 auto;
}

@media only screen and (max-width: 767px) {
  .slider__items--inner .slider__layer--img {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 767px) {
  .slider__items--inner > .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .slider__layer--img.style2 {
    /*max-width: 47rem;*/
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider__layer--img.style2 {
    max-width: 40rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider__layer--img.style2 {
    max-width: 32rem;
  }
}

@media only screen and (max-width: 767px) {
  .slider__layer--img.style2 {
    max-width: 400px;
  }
}

@media only screen and (max-width: 575px) {
  .slider__layer--img.style2 {
    max-width: 350px;
  }
}

@media only screen and (max-width: 399px) {
  .slider__layer--img.style2 {
    max-width: 90%;
  }
}

/*
    home three css
*/
.home__three--slider__items {
  background: url(../img/slider/home3-slider1-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  background-color: #DFF0F9;
  padding: 3.5rem 0 6.5rem;
}

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

@media only screen and (min-width: 992px) {
  .home__three--slider__items {
    padding: 15rem 0;
  }
}

@media only screen and (min-width: 1366px) {
  .home__three--slider__items {
    padding: 16rem 0;
  }
}

@media only screen and (min-width: 1600px) {
  .home__three--slider__items {
    padding: 24rem 0;
  }
}

@media only screen and (max-width: 767px) {
  .home__three--slider__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

@media only screen and (min-width: 1366px) and (max-width: 1599px) {
  .hero__slider--layer.style3 {
    max-width: 49rem;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .hero__slider--layer.style3 {
    max-width: 42rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__slider--layer.style3 {
    max-width: 40rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__slider--layer.style3 {
    max-width: 35rem;
  }
}

/*
    home five slider css
*/
.home__five--slider__items {
  background: url(../img/slider/home5-slider1-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  padding: 3.5rem 0 6.5rem;
}

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

@media only screen and (min-width: 992px) {
  .home__five--slider__items {
    padding: 15rem 0;
  }
}

@media only screen and (min-width: 1366px) {
  .home__five--slider__items {
    padding: 17rem 0;
  }
}

@media only screen and (min-width: 1600px) {
  .home__five--slider__items {
    padding: 28rem 0;
  }
}

@media only screen and (max-width: 767px) {
  .home__five--slider__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

/* 
    6. Collection css
*/
.shop__collection--img {
  margin: 0 auto 1.2rem;
}

.shop__collection--title {
  margin-bottom: 0.3rem;
}

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

.shop__collection--link {
  display: block;
}

.shop__collection--title__style {
  position: absolute;
  bottom: 0;
  left: 2rem;
  right: 2rem;
  border: 1px solid var(--secondary-color);
  background: var(--body-background-color);
  height: 3.3rem;
  line-height: 3.1rem;
  border-radius: 0.5rem;
}

@media only screen and (min-width: 576px) {
  .shop__collection--title__style {
    height: 4rem;
    line-height: 4rem;
  }
}

@media only screen and (min-width: 992px) {
  .shop__collection--title__style {
    left: 2.5rem;
    right: 2.5rem;
    height: 4.5rem;
    line-height: 4.3rem;
  }
}

/* 
    5. Product card css 
*/
.product__tab--btn {
  margin-top: 2.5rem;
}

.tab__btn--wrapper {
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

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

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

.tab__btn--link {
  font-weight: 500;
  font-family: var(--inter-fonts);
  text-transform: capitalize;
  color: var(--foreground-sub-color);
  border: 0;
  background: var(--bg-offwhite-color);
  font-size: 1.3rem;
  padding: 3px 18px;
  border-radius: 22px;
  line-height: 2.6rem;
}

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

@media only screen and (min-width: 1200px) {
  .tab__btn--link {
    font-size: 1.5rem;
    padding: 8px 25px;
  }
}

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

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

.product__card {
  border-radius: 5px;
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  background: var(--body-background-color);
}

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

.product__card:hover .product__secondary--img {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1.02) translatex(-50%);
          transform: scale(1.02) translatex(-50%);
}

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

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

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

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

.product__card:hover .product__add--to__card {
  opacity: 1;
  visibility: visible;
  bottom: 1.4rem;
}

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

.product__card--thumbnail__link {
  position: relative;
}

.product__card--thumbnail__img {
  margin: 0 auto;
  width: 100%;
}

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

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

@media only screen and (max-width: 479px) {
  .product__card--title {
    line-height: 2.2rem;
  }
}

.product__card--title a {
  color: var(--primary-color);
}

.product__card--title a:hover {
  color: var(--secondary-color);
}

.product__card--btn {
  background: var(--secondary-color);
  color: var(--text-white-color);
  padding: 0 2rem;
  height: 3.8rem;
  line-height: 4.3rem;
  border-radius: 0.5rem;
  font-size: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .product__card--btn {
    font-size: 1.5rem;
    padding: 0 2.5rem;
    height: 4rem;
    line-height: 4.5rem;
  }
}

.product__card--btn:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
}

.product__card--btn svg {
  margin-left: 0.3rem;
}

.product__card--action {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  z-index: 9;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  top: 15px;
  right: 15px;
}

@media only screen and (max-width: 575px) {
  .product__card--action {
    opacity: 1;
    visibility: visible;
  }
}

.product__card--action__list {
  margin-bottom: 1rem;
}

.product__card--action__list:last-child {
  margin-bottom: 0;
}

.product__card--action__btn {
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  color: var(--primary-color);
  background: var(--bg-offwhite-color);
  border-radius: 50%;
  text-align: center;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
          box-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
}

@media only screen and (max-width: 575px) {
  .product__card--action__btn {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

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

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

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

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

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

.product__card--rating.mb-20 {
  margin-bottom: 2rem;
}

.product__add--to__card {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

@media only screen and (max-width: 575px) {
  .product__add--to__card {
    opacity: 1;
    visibility: visible;
    bottom: 1.5rem;
  }
}

.product__badge {
  width: 4rem;
  height: 2.2rem;
  font-size: 1.2rem;
  line-height: 2.6rem;
  background: var(--secondary-color);
  color: var(--text-white-color);
  font-family: var(--inter-fonts);
  position: absolute;
  top: 1.5rem;
  left: 0;
  text-align: center;
  border-radius: 0.4rem;
}

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

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

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

.old__price {
  color: var(--foreground-sub-color);
  margin-left: 0.6rem;
  line-height: 1.8rem;
  font-family: var(--inter-fonts);
  text-decoration: line-through;
  font-size: 1.4rem;
}

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

.rating {
  gap: 0.5rem;
}

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

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

.product__load--more {
  margin-top: 3rem;
}

@media only screen and (min-width: 768px) {
  .product__load--more {
    margin-top: 4rem;
  }
}

@media only screen and (min-width: 992px) {
  .product__load--more {
    margin-top: 6rem;
  }
}

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

.product__section--border {
  padding: 6rem 1rem 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--primary-color);
}

@media only screen and (min-width: 768px) {
  .product__section--border {
    padding: 6.5rem 1rem 2.5rem;
  }
}

.product__section--countdown {
  position: absolute;
  top: -15px;
  left: 1.6rem;
  padding: 0.5rem 0.8rem;
  background: var(--primary-color);
  border-radius: 1rem;
  gap: 0.6rem;
}

@media only screen and (min-width: 480px) {
  .product__section--countdown {
    top: -20px;
    left: 2rem;
    padding: 0.8rem 1rem;
  }
}

@media only screen and (min-width: 768px) {
  .product__section--countdown {
    top: -28px;
    left: 10rem;
    padding: 1rem 2rem;
    gap: 1.2rem;
  }
}

.product__section--countdown .countdown__item {
  text-align: center;
}

.product__section--countdown .countdown__number {
  font-size: 1.6rem;
  line-height: 1.6rem;
  font-weight: 500;
  color: var(--text-white-color);
}

@media only screen and (min-width: 768px) {
  .product__section--countdown .countdown__number {
    font-size: 2.2rem;
    line-height: 2rem;
  }
}

.product__section--countdown .countdown__text {
  font-size: 1.2rem;
  color: var(--text-white-color);
  text-transform: capitalize;
  line-height: 1.6rem;
}

@media only screen and (min-width: 768px) {
  .product__section--countdown .countdown__text {
    font-size: 1.4rem;
    line-height: 2rem;
  }
}

/* 
    14. Small Product css 
*/
.small__product--thumbnail {
  overflow: hidden;
  width: 125px;
}

@media only screen and (min-width: 1600px) {
  .small__product--thumbnail {
    width: 136px;
  }
}

.small__product--card {
  gap: 1.8rem;
  margin-bottom: 3rem;
}

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

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

.small__product--card:last-child {
  margin-bottom: 0;
}

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

.small__product--card .product__card--title {
  margin-bottom: 1.2rem;
}

@media only screen and (max-width: 1199px) {
  .small__product--card .product__card--title {
    margin-bottom: 0.8rem;
    font-size: 1.5rem;
    line-height: 2.4rem;
  }
}

.small__product--card .product__card--rating {
  margin-bottom: 0.8rem;
}

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

@media only screen and (min-width: 992px) {
  .small__product--step.margin__left {
    margin-left: 3rem;
  }
}

/* 
    15. Single Product css 
*/
.deal__product--section {
  background: url(../img/banner/banner-bg1.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  background-color: #EDF2FF;
}

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

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

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

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

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

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

.single__product--left {
  width: 100%;
  background: var(--bg-gray-color);
  padding: 2rem 1.5rem;
}

@media only screen and (min-width: 992px) {
  .single__product--left {
    width: 270px;
  }
}

@media only screen and (min-width: 1200px) {
  .single__product--left {
    width: 362px;
  }
}

@media only screen and (max-width: 991px) {
  .single__product--left {
    margin: 0 auto;
  }
}

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

@media only screen and (min-width: 992px) {
  .single__product--right {
    width: calc(100% - 295px);
  }
}

@media only screen and (min-width: 1200px) {
  .single__product--right {
    width: calc(100% - 389px);
  }
}

.single__product--inner {
  gap: 2rem;
}

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

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

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

.single__product--action {
  gap: 1rem;
  margin-bottom: 2rem;
}

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

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

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

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

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

.single__product--content {
  margin-bottom: 2.2rem;
}

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

.single__product--title {
  margin: 1.5rem 0;
  font-size: 2rem;
  line-height: 2.4rem;
}

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

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

.single__product--title a {
  color: var(--primary-color);
}

.single__product--title a:hover {
  color: var(--secondary-color);
}

.single__product--countdown {
  gap: 1.2rem;
  padding: 3rem 0 1rem;
}

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

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

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

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

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

.single__product--content__badge {
  background: var(--primary-color);
  color: var(--text-white-color);
  font-size: 1.2rem;
  line-height: 1.8rem;
  padding: 2px 10px;
  border-radius: 13px;
  margin-left: 12px;
}

.sigle__product--badge {
  width: 6rem;
  height: 6rem;
  line-height: 1.8rem;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.4rem;
  font-weight: 500;
}

.sigle__product--badge::before {
  position: absolute;
  content: "";
  left: 4px;
  right: 4px;
  top: 4px;
  bottom: 4px;
  border: 1px dashed #fff;
  border-radius: 50%;
}

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

@media only screen and (min-width: 992px) {
  .product__sold {
    margin: 2rem 0 3rem;
  }
}

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

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

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

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

.single__product--nav {
  padding: 0.2rem 0.5rem;
}

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

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

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

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

/* 
    4. Banner css 
*/
@media only screen and (max-width: 767px) {
  .video__banner--section.section--padding {
    padding-top: 0;
  }
}

@media only screen and (min-width: 768px) {
  .video__banner--section__thumbnail {
    height: 30rem;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

@media only screen and (min-width: 992px) {
  .video__banner--section__thumbnail {
    height: 41rem;
  }
}

@media only screen and (min-width: 1200px) {
  .video__banner--section__thumbnail {
    height: 51.5rem;
  }
}

@media only screen and (min-width: 1366px) {
  .video__banner--section__thumbnail {
    height: 55.5rem;
  }
}

.video__banner--wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

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

.video__banner--inner {
  gap: 3rem;
}

@media only screen and (min-width: 992px) {
  .video__banner--inner {
    gap: 5rem;
  }
}

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

@media only screen and (min-width: 768px) {
  .video__banner--box {
    width: 55%;
  }
}

@media only screen and (min-width: 1200px) {
  .video__banner--box {
    width: 60%;
  }
}

@media only screen and (min-width: 768px) {
  .video__banner--content {
    width: 40%;
    padding-bottom: 5rem;
  }
}

@media only screen and (min-width: 992px) {
  .video__banner--content {
    padding-bottom: 11rem;
  }
}

@media only screen and (min-width: 1200px) {
  .video__banner--content {
    padding-bottom: 14rem;
  }
}

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

.video__banner--content__title {
  font-size: 2rem;
  line-height: 2.6rem;
  margin-bottom: 1.3rem;
}

@media only screen and (min-width: 576px) {
  .video__banner--content__title {
    font-size: 2.2rem;
    line-height: 2.8rem;
    margin-bottom: 1.3rem;
  }
}

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

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

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

@media only screen and (min-width: 1366px) {
  .video__banner--content__title {
    font-size: 3.5rem;
    line-height: 4.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .video__banner--content__title {
    font-size: 4rem;
    line-height: 5.2rem;
  }
}

.video__banner--content__desc {
  font-size: 1.6rem;
  line-height: 2.6rem;
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .video__banner--content__desc {
    margin-bottom: 1.7rem;
  }
}

@media only screen and (min-width: 992px) {
  .video__banner--content__desc {
    font-size: 1.7rem;
    line-height: 2.8rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .video__banner--content__desc {
    font-size: 1.8rem;
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 1366px) {
  .video__banner--content__desc {
    font-size: 2rem;
    margin-bottom: 3.2rem;
  }
}

/*
    banner fullwidth css
*/
.banner__fullwidth--bg__thumbnail {
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .banner__fullwidth--bg__thumbnail {
    height: 390px;
  }
}

@media only screen and (min-width: 992px) {
  .banner__fullwidth--bg__thumbnail {
    height: 460px;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__fullwidth--bg__thumbnail {
    height: 560px;
  }
}

@media only screen and (min-width: 1366px) {
  .banner__fullwidth--bg__thumbnail {
    height: 633px;
  }
}

.banner__fullwidth--inner {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

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

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

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

@media only screen and (min-width: 1200px) {
  .banner__fullwidth--content {
    padding-left: 10rem;
  }
}

@media only screen and (max-width: 767px) {
  .banner__fullwidth--content {
    text-align: center;
    margin-top: 3rem;
  }
}

.banner__fullwidth--content__subtitle {
  font-family: var(--primary-color);
  font-weight: 400;
  margin-bottom: 1rem;
}

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

@media only screen and (min-width: 1200px) {
  .banner__fullwidth--content__subtitle {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 767px) {
  .banner__fullwidth--content__subtitle {
    line-height: 2rem;
  }
}

.banner__fullwidth--content__subtitle.mb-25 {
  margin-bottom: 2.5rem;
}

.banner__fullwidth--content__title {
  font-size: 2.2rem;
  line-height: 2.8rem;
  margin-bottom: 1.2rem;
}

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

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

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

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

@media only screen and (min-width: 1600px) {
  .banner__fullwidth--content__title {
    font-size: 4.5rem;
    line-height: 5rem;
  }
}

.banner__fullwidth--content__desc {
  margin-bottom: 1.6rem;
}

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

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

@media only screen and (min-width: 1200px) {
  .banner__fullwidth--content__desc {
    margin-bottom: 2.7rem;
  }
}

.banner__fullwidth--content.padding__right {
  padding-left: 0;
}

@media only screen and (min-width: 768px) {
  .banner__fullwidth--content.padding__right {
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__fullwidth--content.padding__right {
    padding-right: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__fullwidth--content.padding__right {
    padding-right: 10rem;
  }
}

/*
    banner box css
*/
.banner__box {
  overflow: hidden;
}

.banner__box:hover .banner__box--thumbnail {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

.banner__box--thumbnail {
  width: 100%;
}

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

@media only screen and (max-width: 479px) {
  .banner__box--content {
    left: 2rem;
    right: 1rem;
  }
}

.banner__box--content__title {
  font-weight: 400;
  margin-bottom: 1rem;
  color: var(--bg-black-color);
}

@media only screen and (min-width: 480px) {
  .banner__box--content__title {
    margin-bottom: 1.2rem;
  }
}

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

.banner__box--content__desc {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

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

.banner__box--content__btn.style2 {
  border: 1px solid var(--secondary-color);
  background: inherit;
  color: var(--secondary-color);
  line-height: 4rem;
}

@media only screen and (min-width: 768px) {
  .banner__box--content__btn.style2 {
    line-height: 4.4rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__box--content__btn.style2 {
    line-height: 4.8rem;
  }
}

.banner__box--content__btn.style2:hover {
  border-color: var(--hover-color);
  color: var(--hover-color);
}

/*
    advice banner css
*/
.advice__banner--thumbnail.height_225 {
  height: 22rem;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .advice__banner--thumbnail.height_225 {
    height: 20rem;
  }
}

@media only screen and (min-width: 992px) {
  .advice__banner--thumbnail.height_225 {
    height: 22.5rem;
  }
}

.advice__banner--content {
  position: absolute;
  top: 50%;
  left: 4rem;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  z-index: 9;
}

.advice__banner--content.banner__flex {
  gap: 1.5rem;
}

@media only screen and (min-width: 576px) {
  .advice__banner--content.banner__flex {
    gap: 2rem;
  }
}

@media only screen and (min-width: 768px) {
  .advice__banner--content.banner__flex {
    gap: 4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .advice__banner--content.banner__flex {
    gap: 6rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .advice__banner--content.banner__flex {
    width: 61%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .advice__banner--content.banner__flex {
    width: 69%;
    gap: 3rem;
  }
}

@media only screen and (max-width: 767px) {
  .advice__banner--content.banner__flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
  }
}

@media only screen and (max-width: 991px) {
  .advice__banner--content {
    left: 3rem;
    right: 3rem;
  }
}

@media only screen and (max-width: 767px) {
  .advice__banner--content {
    left: 1.5rem;
    right: 1.5rem;
  }
}

.advice__banner--title {
  margin-bottom: 1.2rem;
}

.advice__banner--btn {
  background: var(--primary-color);
  min-width: 130px;
}

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

.advice__banner--layer__img {
  position: absolute;
  top: 0;
  right: 1.2rem;
}

@media only screen and (min-width: 1200px) {
  .advice__banner--layer__img {
    right: 3.2rem;
  }
}

@media only screen and (max-width: 991px) {
  .advice__banner--layer__img {
    max-width: 18rem;
    top: 50%;
    -webkit-transform: translatey(-50%);
            transform: translatey(-50%);
  }
}

@media only screen and (max-width: 767px) {
  .advice__banner--layer__img {
    max-width: 9rem;
    top: 72%;
  }
}

@media only screen and (max-width: 479px) {
  .advice__banner--layer__img {
    max-width: 6rem;
    top: 77%;
  }
}

/*
    home two css
*/
.video__banner--box.width_100 {
  width: 100%;
}

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

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

@media only screen and (max-width: 767px) {
  .video__box--content {
    margin-top: 3rem;
    text-align: center;
  }
}

.video__box--content__title {
  margin-bottom: 1.5rem;
}

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

.video__box--content__desc {
  font-size: 1.5rem;
  margin-bottom: 1.7rem;
}

@media only screen and (min-width: 768px) {
  .video__box--content__desc {
    font-size: 1.6rem;
    margin-bottom: 2.2rem;
  }
}

/*
    grid banner css
*/
.grid__banner--title {
  margin-bottom: 1rem;
}

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

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

.grid__banner--desc {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  color: var(--primary-color);
}

@media only screen and (min-width: 768px) {
  .grid__banner--desc {
    margin-bottom: 2rem;
    font-size: 1.6rem;
  }
}

@media only screen and (min-width: 992px) {
  .grid__banner--desc {
    margin-bottom: 2.5rem;
    font-size: 1.7rem;
  }
}

@media only screen and (min-width: 1200px) {
  .grid__banner--desc {
    margin-bottom: 3.5rem;
    font-size: 1.9rem;
  }
}

@media only screen and (max-width: 575px) {
  .grid__banner--content {
    padding-top: 2.3rem;
    text-align: center;
  }
}

@media only screen and (min-width: 1200px) {
  .grid__banner--content.margin__left {
    margin-left: 4rem;
  }
}

/*
    fullwidth banner box css
*/
.fullwidth__banner--box__content {
  position: absolute;
  top: 50%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

.fullwidth__banner--box__content.left {
  left: 2rem;
}

@media only screen and (min-width: 768px) {
  .fullwidth__banner--box__content.left {
    left: 3rem;
  }
}

@media only screen and (min-width: 992px) {
  .fullwidth__banner--box__content.left {
    left: 15%;
  }
}

@media only screen and (min-width: 1200px) {
  .fullwidth__banner--box__content.left {
    left: 25%;
  }
}

@media only screen and (min-width: 1600px) {
  .fullwidth__banner--box__content.left {
    left: 35%;
  }
}

.fullwidth__banner--box__content.right {
  left: 2rem;
}

@media only screen and (min-width: 768px) {
  .fullwidth__banner--box__content.right {
    left: 3rem;
  }
}

@media only screen and (min-width: 992px) {
  .fullwidth__banner--box__content.right {
    left: 10%;
  }
}

@media only screen and (min-width: 1200px) {
  .fullwidth__banner--box__content.right {
    left: 12%;
  }
}

@media only screen and (min-width: 1600px) {
  .fullwidth__banner--box__content.right {
    left: 16%;
  }
}

.fullwidth__banner--box__subtitle {
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

@media only screen and (min-width: 768px) {
  .fullwidth__banner--box__subtitle {
    font-size: 1.6rem;
    line-height: 2rem;
    margin-bottom: 1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .fullwidth__banner--box__subtitle {
    font-size: 1.7rem;
  }
}

.fullwidth__banner--box__title {
  font-size: 1.8rem;
  line-height: 2.5rem;
  margin-bottom: 1.2rem;
  color: var(--foreground-color);
}

@media only screen and (min-width: 768px) {
  .fullwidth__banner--box__title {
    font-size: 2.2rem;
    line-height: 3rem;
    margin-bottom: 1.5rem;
  }
}

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

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

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

/*
    sidebar banner css
*/
.sidebar__banner--content {
  position: absolute;
  bottom: 3rem;
  left: 2rem;
  right: 2rem;
}

@media only screen and (min-width: 1200px) {
  .sidebar__banner--content {
    bottom: 4rem;
  }
}

.sidebar__banner--title {
  color: var(--foreground-color);
  margin-bottom: 1.2rem;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sidebar__banner--title {
    margin-bottom: 1.2rem;
    font-size: 2rem;
    line-height: 2.6rem;
  }
}

.sidebar__banner--subtitle {
  color: var(--primary-color);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

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

.sidebar__banner--btn {
  text-decoration: underline;
  line-height: 2rem;
  font-weight: 500;
}

.advice__banner--content.style2 {
  left: 3rem;
  right: 3rem;
  text-align: center;
}

.advice__banner--thumbnail.height_260 {
  height: 26rem;
  -o-object-fit: cover;
     object-fit: cover;
}

/*
    home four banner vss
*/
.banner__box--content__style {
  position: absolute;
  left: 2.5rem;
}

@media only screen and (min-width: 768px) {
  .banner__box--content__style {
    left: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__box--content__style {
    left: 4rem;
  }
}

.banner__box--content__style.top {
  top: 3rem;
}

@media only screen and (min-width: 1200px) {
  .banner__box--content__style.top {
    top: 4rem;
  }
}

.banner__box--content__style.middle {
  top: 50%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

.banner__box--content__style--subtitle {
  font-size: 1.6rem;
  line-height: 1.8rem;
  color: var(--primary-color);
  font-weight: 400;
  margin-bottom: 0.8rem;
}

@media only screen and (min-width: 992px) {
  .banner__box--content__style--subtitle {
    margin-bottom: 1rem;
  }
}

.banner__box--content__style--title {
  line-height: 3rem;
  margin-bottom: 1.6rem;
  color: var(--body-text-color);
}

@media only screen and (min-width: 768px) {
  .banner__box--content__style--title {
    line-height: 3.2rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__box--content__style--title {
    line-height: 3.5rem;
    margin-bottom: 2.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__box--content__style--title {
    line-height: 4rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 768px) {
  .banner__box--content__style--btn {
    line-height: 4.2rem;
    height: 3.8rem;
    padding: 0 1.8rem;
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__box--content__style--btn {
    line-height: 4.4rem;
    height: 4rem;
    padding: 0 2.2rem;
  }
}

.banner__box--content__style.right__side {
  left: auto;
  right: 4rem;
}

.grid__banner--product {
  position: relative;
  margin: -215px 3rem 0 auto;
}

@media only screen and (min-width: 992px) {
  .grid__banner--product {
    margin: -255px 4rem 0 auto;
  }
}

@media only screen and (min-width: 1200px) {
  .grid__banner--product {
    margin: -286px 8rem 0 auto;
  }
}

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

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .grid__banner--product.width__295 {
    width: 240px;
  }
}

.grid__banner--product .product__card--action {
  opacity: 1;
  visibility: visible;
  top: 20px;
  right: 20px;
}

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

.grid__banner--product .product__add--to__card {
  opacity: 1;
  visibility: visible;
  bottom: 18px;
}

.grid__banner--product:hover .product__add--to__card {
  bottom: 18px;
}

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

@media only screen and (min-width: 768px) {
  .grid__banner--content__style2 {
    margin: 0 0 0 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .grid__banner--content__style2 {
    margin: 0 0 0 5rem;
  }
}

@media only screen and (max-width: 767px) {
  .banner__fullwidth--thumbnail img {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 767px) {
  .banner_sm_height-250 {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 479px) {
  .banner_sm_height-250 {
    height: 25rem;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

/*
    collection banner  css
*/
.collection__banner--thumbnail.height_583 {
  height: 380px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (min-width: 576px) {
  .collection__banner--thumbnail.height_583 {
    height: 340px;
  }
}

@media only screen and (min-width: 768px) {
  .collection__banner--thumbnail.height_583 {
    height: 360px;
  }
}

@media only screen and (min-width: 1200px) {
  .collection__banner--thumbnail.height_583 {
    height: 460px;
  }
}

@media only screen and (min-width: 1366px) {
  .collection__banner--thumbnail.height_583 {
    height: 583px;
  }
}

.collection__banner--content {
  position: absolute;
  top: 50%;
  left: 3rem;
  right: 3rem;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

@media only screen and (min-width: 1200px) {
  .collection__banner--subtitle {
    font-size: 2rem;
  }
}

.collection__banner--subtitle.mb-20 {
  margin-bottom: 1.2rem;
}

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

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

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

@media only screen and (min-width: 1600px) {
  .collection__banner--title {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}

.collection__banner--title.mb-30 {
  margin-bottom: 2rem;
}

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

@media only screen and (min-width: 1200px) {
  .collection__banner--title.mb-30 {
    margin-bottom: 3rem;
  }
}

.collection__banner--desc {
  font-size: 1.5rem;
  line-height: 2.8rem;
}

@media only screen and (min-width: 768px) {
  .collection__banner--desc {
    font-size: 1.6rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .collection__banner--desc {
    font-size: 1.8rem;
    line-height: 3.2rem;
  }
}

.banner_col_left_47 {
  width: 47.2%;
}

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

.banner_col_right_52 {
  width: 52.8%;
}

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

/*
    home six banner css
*/
@media only screen and (min-width: 576px) and (max-width: 991px) {
  .banner__box--right__sidebar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2.5rem;
  }
}

@media only screen and (min-width: 576px) and (max-width: 991px) {
  .banner__box--right__sidebar .banner__box.mb-30 {
    margin-bottom: 0;
  }
}

.banner__box--content__style.style__right {
  left: auto;
  right: 2rem;
}

@media only screen and (min-width: 480px) {
  .banner__box--content__style.style__right {
    right: 3rem;
  }
}

.banner__box--content__style6--title {
  font-size: 1.8rem;
  line-height: 2.4rem;
  margin-bottom: 1.2rem;
}

@media only screen and (min-width: 992px) {
  .banner__box--content__style6--title {
    font-size: 2rem;
    line-height: 2.6rem;
    margin-bottom: 1.5rem;
  }
}

@media only screen and (max-width: 479px) {
  .banner__box--thumbnail.height_sm_u_220 {
    height: 22rem;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

/*
    countdown banner css
*/
.countdown__banner--bg {
  background: rgba(250, 238, 238, 0.9);
}

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

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

@media only screen and (min-width: 576px) {
  .countdown__content--title {
    font-size: 3rem;
    line-height: 3.5rem;
    margin-bottom: 1.2rem;
  }
}

@media only screen and (min-width: 768px) {
  .countdown__content--title {
    font-size: 3.5rem;
    line-height: 4rem;
  }
}

@media only screen and (min-width: 992px) {
  .countdown__content--title {
    font-size: 4rem;
    line-height: 4.5rem;
    margin-bottom: 1.5rem;
  }
}

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

.countdown__content--subtitle {
  font-size: 1.7rem;
  line-height: 2.2rem;
  color: var(--primary-color);
  font-weight: 500;
  margin-bottom: 1.6rem;
}

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

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

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

@media only screen and (min-width: 1200px) {
  .countdown__content--subtitle {
    font-size: 2.8rem;
    line-height: 3.3rem;
    margin-bottom: 2.5rem;
  }
}

.banner__price {
  margin-bottom: 2rem;
}

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

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

.banner__price .current__price {
  font-size: 2rem;
  line-height: 2.2rem;
  color: var(--primary-color);
}

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

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

.banner__price .old__price {
  font-size: 1.8rem;
  line-height: 2.2rem;
  margin-left: 1rem;
}

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

@media only screen and (min-width: 992px) {
  .banner__price .old__price {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}

.countdown__banner--style {
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media only screen and (min-width: 992px) {
  .countdown__banner--style {
    gap: 2rem;
    margin-bottom: 3rem;
  }
}

.countdown__banner--style .countdown__item {
  text-align: center;
}

.countdown__banner--style .countdown__number {
  width: 4.5rem;
  height: 4.5rem;
  line-height: 4.5rem;
  font-size: 1.6rem;
  background: var(--secondary-color);
  color: var(--text-white-color);
  border-radius: 50%;
  margin-bottom: 0.6rem;
}

@media only screen and (min-width: 576px) {
  .countdown__banner--style .countdown__number {
    width: 5rem;
    height: 5rem;
    line-height: 5rem;
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
  }
}

.countdown__banner--style .countdown__text {
  font-size: 1.4rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--primary-color);
  line-height: 2rem;
}

@media only screen and (min-width: 576px) {
  .countdown__banner--style .countdown__text {
    font-size: 1.5rem;
  }
}

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

.grid__banner__lookbook {
  top: 18%;
  left: 44%;
}

@media only screen and (min-width: 768px) {
  .grid__banner__lookbook {
    left: 40%;
  }
}

/* 
    8. Blog css
*/
.blog__section--bg {
    background: #f3f3f3;
}

.blog__card {
  -webkit-transition: var(--transition);
  transition: var(--transition);
  position: relative;
}

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

.blog__card:hover .blog__card--thumbnail::before {
  opacity: 0.8;
}

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

.blog__card--thumbnail::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  left: 0;
  top: 0;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: 1;
  pointer-events: none;
}

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

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

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

.blog__card--title a {
  color: var(--body-text-color);
}

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

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

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

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

.blog__card--link {
  color: var(--primary-color);
  line-height: 2rem;
  text-decoration: underline;
}

.blog__card--link:hover {
  text-decoration: underline;
}

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

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

.blog__meta {
  gap: 1.5rem;
  margin-bottom: 0.4rem;
}

@media only screen and (min-width: 768px) {
  .blog__meta {
    gap: 2rem;
    margin-bottom: 0.6rem;
  }
}

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

.blog__meta--text {
  color: var(--primary-color);
  line-height: 2.2rem;
  font-size: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .blog__meta--text {
    line-height: 2.4rem;
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .blog__sticky--content .blog__meta--text {
    font-size: 1.7rem;
  }
}

@media only screen and (min-width: 768px) {
  .blog__sticky--content .blog__card--title {
    font-size: 2rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .blog__sticky--content .blog__card--title {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
}

@media only screen and (min-width: 576px) and (max-width: 991px) {
  .blog__card--sidebar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 3rem;
  }
}

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

/* 
    9. Testimonial css
*/
.testimonial__bg {
  background: url(../img/banner/banner-fullwidth3.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

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

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

.testimonial__section--inner {
  padding-bottom: 5rem;
}

.testimonial__items {
  padding: 1.5rem;
  background: var(--body-background-color);
  border-radius: 5px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  position: relative;
}

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

.testimonial__desc {
  font-size: 1.4rem;
  line-height: 2.5rem;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  margin-bottom: 1rem;
}

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

.testimonial__author {
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

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

.testimonial__author__thumbnail {
  min-width: 7rem;
}

.testimonial__author--title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  margin-bottom: 0.2rem;
}

.testimonial__author--subtitle {
  font-size: 1.2rem;
  line-height: 2rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

@media only screen and (min-width: 992px) {
  .testimonial__author--subtitle {
    font-size: 1.3rem;
  }
}

.testimonial__vector--icon {
  margin: 0 1rem 0 auto;
}

.testimonial__pagination {
  bottom: 0 !important;
}

.testimonial__pagination .swiper-pagination-bullet {
  border: 1px solid var(--secondary-color);
}

.testimonial__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--secondary-color);
}

/*
    testimonial box css
*/
.testimonial__bg--three {
  background: url(../img/banner/banner-fullwidth6.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

.testimonial__bg--three.section--padding {
  padding-bottom: 5rem;
}

@media only screen and (min-width: 768px) {
  .testimonial__bg--three.section--padding {
    padding-bottom: 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .testimonial__bg--three.section--padding {
    padding-bottom: 8rem;
  }
}

.testimonial__box--thumbnail {
  margin-bottom: 2rem;
}

.testimonial__box--thumbnail img {
  margin: 0 auto;
}

.testimonial__box--desc {
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .testimonial__box--desc {
    font-size: 1.5rem;
    line-height: 2.8rem;
    margin-bottom: 1.6rem;
  }
}

@media only screen and (min-width: 992px) {
  .testimonial__box--desc {
    font-size: 1.6rem;
    line-height: 3.2rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .testimonial__box--desc {
    padding: 0 10rem;
  }
}

.testimonial__box--author__title {
  font-size: 1.8rem;
  line-height: 2.2rem;
  margin-bottom: 0.6rem;
}

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

.testimonial__box--author__subtitle {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

/* 
    7. Feature css
*/
.feature__inner {
  gap: 3rem;
}

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

.feature__items {
  gap: 1.5rem;
}

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

.feature__content--title {
  margin-bottom: 0.3rem;
}

.feature__content--desc {
  font-size: 1.4rem;
  color: var(--primary-color);
}

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

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

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

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

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

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

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

.newsletter__subscribe--input {
  width: 100%;
  height: 4.5rem;
  border: 1px solid transparent;
  color: var(--primary-color);
  background: var(--body-background-color);
  font-weight: 500;
  border-radius: 5px;
  padding: 0 105px 0 1.5rem;
  font-size: 1.4rem;
}

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

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

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

@media only screen and (min-width: 1366px) {
  .newsletter__subscribe--input {
    height: 5.5rem;
  }
}

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

.newsletter__subscribe--button:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
}

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

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

.newsletter__subscribe--input.style2 {
  background: var(--body-background-color);
  font-size: 1.4rem;
  font-weight: 500;
  padding: 0 114px 0 2rem;
  height: 5rem;
}

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

.newsletter__subscribe--button.style2 {
  background: var(--primary-color);
}

.newsletter__subscribe--button.style2:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}

.footer__newsletter {
  margin-top: 1.5rem;
}

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

/*
    home three newsletter css
*/
.newsletter__bg {
  background: var(--secondary-color);
  border-radius: 1rem;
}

.newsletter__inner {
  gap: 2.5rem;
  padding: 3rem 2rem;
}

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

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

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

.newsletter__content {
  gap: 2rem;
}

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

.newsletter__content--title {
  font-size: 1.8rem;
  line-height: 2rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
}

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

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

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

.newsletter__content--desc {
  font-size: 1.5rem;
  font-weight: 300;
}

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

@media only screen and (min-width: 1200px) {
  .newsletter__content--desc {
    font-size: 1.7rem;
  }
}

@media only screen and (max-width: 767px) {
  .newsletter__email--icon img {
    max-width: 4.5rem;
  }
}

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

.newsletter__form {
  position: relative;
  width: 100%;
}

@media only screen and (min-width: 576px) {
  .newsletter__form {
    width: 45rem;
  }
}

@media only screen and (min-width: 1200px) {
  .newsletter__form {
    width: 50rem;
  }
}

.newsletter__form--button {
  position: absolute;
  right: 0;
  top: 0;
  background: var(--primary-color);
  color: var(--text-white-color);
  border: 0;
  padding: 0 3rem;
  height: 100%;
  border-radius: 0 1rem 1rem 0;
}

@media only screen and (max-width: 575px) {
  .newsletter__form--button {
    padding: 0 1.5rem;
  }
}

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

.newsletter__form input::-webkit-input-placeholder {
  color: var(--text-white-color);
}

.newsletter__form input::-moz-placeholder {
  color: var(--text-white-color);
}

.newsletter__form input:-ms-input-placeholder {
  color: var(--text-white-color);
}

.newsletter__form input:-moz-placeholder {
  color: var(--text-white-color);
}

.newsletter__input--field {
  width: 100%;
  height: 4.5rem;
  border: 0;
  background: #D3967C;
  color: var(--text-white-color);
  padding: 0 11rem 0 2rem;
  border-radius: 1rem;
}

@media only screen and (min-width: 575px) {
  .newsletter__input--field {
    padding: 0 14rem 0 2rem;
  }
}

@media only screen and (min-width: 768px) {
  .newsletter__input--field {
    height: 5rem;
  }
}

/*
    home six newsletter css
*/
.newsletter__inner--style2 {
  padding: 5rem 0;
}

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

@media only screen and (min-width: 992px) {
  .newsletter__inner--style2 {
    padding: 7.5rem 0;
  }
}

.newsletter__bg2 {
  background: url(../img/banner/banner-fullwidth8.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

.newsletter__style2--form {
  width: 35rem;
  margin: 0 auto;
}

@media only screen and (max-width: 479px) {
  .newsletter__style2--form {
    width: 90%;
  }
}

.newsletter__style2--form input::-webkit-input-placeholder {
  color: var(--primary-color);
}

.newsletter__style2--form input::-moz-placeholder {
  color: var(--primary-color);
}

.newsletter__style2--form input:-ms-input-placeholder {
  color: var(--primary-color);
}

.newsletter__style2--form input:-moz-placeholder {
  color: var(--primary-color);
}

.newsletter__style2--input__field {
  width: 100%;
  height: 4.5rem;
  border: 0;
  background: var(--body-background-color);
  padding: 0 6.5rem 0 1.5rem;
  border-radius: 5px;
  color: var(--primary-color);
}

@media only screen and (min-width: 992px) {
  .newsletter__style2--input__field {
    height: 5.5rem;
  }
}

.newsletter__style2--button {
  position: absolute;
  right: 0;
  top: 0;
  border: 0;
  height: 100%;
  background: var(--primary-color);
  color: var(--text-white-color);
  padding: 0 1.2rem;
  border-radius: 0 5px 5px 0;
}

.newsletter__style2--button:hover {
  background: var(--secondary-color);
}

.newsletter__style2--content {
  margin-bottom: 2.2rem;
}

@media only screen and (min-width: 576px) {
  .newsletter__style2--content {
    margin-bottom: 2.5rem;
  }
}

.newsletter__style2--content__title {
  margin-bottom: 1.8rem;
}

.newsletter__style2--content__desc {
  font-size: 1.6rem;
  display: inline-block;
  width: 90%;
}

@media only screen and (min-width: 576px) {
  .newsletter__style2--content__desc {
    width: 80%;
  }
}

@media only screen and (min-width: 768px) {
  .newsletter__style2--content__desc {
    width: 62%;
  }
}

@media only screen and (min-width: 992px) {
  .newsletter__style2--content__desc {
    width: 40%;
  }
}

/* 
    12. Footer css 
*/
@media only screen and (max-width: 991px) {
  .footer__section {
    padding-bottom: 80px;
  }
}

.footer__bg {
  background: url(../img/banner/banner-fullwidth4.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

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

.footer__social {
  gap: 1rem;
  margin-top: 1.7rem;
}

.social__share--icon {
  width: 3.8rem;
  height: 3.8rem;
  background: var(--body-background-color);
  color: var(--primary-color);
  text-align: center;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

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

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

.footer__logo {
  margin-bottom: 0.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--desc {
  font-size: 1.5rem;
  margin-bottom: 0;
  color: var(--primary-color);
  margin-bottom: 0;
}

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

.footer__widget--title {
  margin-bottom: 2.2rem;
  font-weight: 600;
  position: relative;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: var(--primary-color);
  text-transform: uppercase;
}

@media only screen and (min-width: 768px) {
  .footer__widget--title {
    font-size: 1.7rem;
    line-height: 2.4rem;
    margin-bottom: 1.5rem;
  }
}

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

.footer__widget--title__arrowdown--icon {
  position: absolute;
  right: 0;
  top: 38%;
  -webkit-transition: .3s;
  transition: .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 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.footer__widget--menu__list {
  margin-bottom: 0.6rem;
}

@media only screen and (min-width: 768px) {
  .footer__widget--menu__list {
    margin-bottom: 0.8rem;
  }
}

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

.footer__widget--menu__text {
  line-height: 2.6rem;
  font-size: 1.5rem;
  color: var(--primary-color);
}

@media only screen and (min-width: 768px) {
  .footer__widget--menu__text {
    line-height: 2.8rem;
    font-size: 1.6rem;
  }
}

.footer__widget--info {
  margin-top: 1.7rem;
}

.footer__widget--info__icon {
  color: var(--primary-color);
}

.footer__widget--info_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.footer__widget--info_list:last-child {
  margin-bottom: 0;
}

.footer__widget--info__text {
  font-size: 1.5rem;
  line-height: 2.5rem;
  color: var(--primary-color);
}

@media only screen and (min-width: 768px) {
  .footer__widget--info__text {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}

.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;
  }
}

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

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

.footer__bottom--inenr {
  padding: 1.8rem 0;
}

@media only screen and (min-width: 992px) {
  .footer__bottom--inenr {
    padding: 2.2rem 0;
  }
}

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

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

@media only screen and (max-width: 767px) {
  .footer__payment.mt-30 {
    margin-top: 2rem;
  }
}

/*
    home six footer css
*/
.footer__bg--style2 {
  background: rgba(250, 238, 238, 0.9);
}

.footer__content--menu {
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

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

.footer__content--menu__link {
  text-transform: uppercase;
  font-weight: 500;
  color: var(--primary-color);
}

.main__footer--content .footer__logo {
  margin-bottom: 1rem;
}

@media only screen and (min-width: 576px) {
  .main__footer--content .footer__logo {
    margin-bottom: 1.5rem;
  }
}

.main__footer--content .footer__payment img {
  margin: 0 auto;
}

.main__footer--content .footer__social {
  margin-top: 0;
  margin-bottom: 2.5rem;
}

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

.footer__bottom--style {
  border-top: 1px solid #ddd;
}

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

.quickview__main--wrapper {
  max-width: 895px;
  position: relative;
  overflow: auto;
  cursor: default;
  padding: 25px;
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  pointer-events: inherit;
}

.modal-content.quickview__main__content {
  padding: 20px;
  border-radius: 10px;
  border: 0;
  max-height: 80vh;
  overflow: auto;
}

@media only screen and (max-width: 767px) {
  .modal-content.quickview__main__content {
    max-width: 550px;
  }
}

@media only screen and (max-width: 575px) {
  .modal-content.quickview__main__content {
    padding: 25px 15px;
  }
}

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

@media only screen and (max-width: 767px) {
  .modal-header.quickview_m_header {
    top: 10px;
    right: 10px;
  }
}

.quickview__header {
  position: absolute;
  padding: 0;
  top: 16px;
  right: 16px;
  z-index: 9;
}

@media only screen and (max-width: 767px) {
  .quickview__header {
    top: 10px;
    right: 10px;
  }
}

.quickview__close--btn {
  font-size: 1.8rem;
  padding: 0;
  width: 3.2rem;
  height: 3.2rem;
  line-height: 3.8rem;
  border-radius: 50%;
  font-weight: 700;
  border: 1px solid var(--border-color);
  background: var(--text-white-color);
  padding: 0 !important;
  margin: 0 !important;
  -webkit-box-shadow: inherit;
          box-shadow: inherit;
  color: #000000;
}

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

.quickview__close--btn:focus {
  -webkit-box-shadow: inherit !important;
          box-shadow: inherit !important;
}

.modal-body.quickview__inner {
  padding: 0;
}

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

[data-animation].is-visible .modal-dialog {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  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: 3.3rem;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--primary-color);
}

.quickview__value--quantity {
  width: 3.5rem;
  height: 3.5rem;
  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: 3.5rem;
  font-size: 1.7rem;
}

.quickview__cart--btn {
  height: 3.8rem;
  line-height: 3.8rem;
  padding: 0 25px;
  margin-left: 15px;
}

.quickview__social--title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 15px;
  color: var(--primary-color);
}

.quickview__social--list {
  margin-right: 10px;
}

.quickview__social--list:last-child {
  margin-right: 0;
}

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

.quickview__social--icon:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
}

@media only screen and (max-width: 767px) {
  .quickview__social--style3 {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-bottom: 1.5rem;
  }
}

/*
    lookbook css
*/
@media only screen and (min-width: 576px) {
  .lookbook__thumbnail {
    width: 49%;
  }
}

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

.lookbook__banner--right {
  background: rgba(250, 238, 238, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media only screen and (min-width: 576px) {
  .lookbook__banner--right {
    width: 51%;
  }
}

.lookbook__banner--content {
  padding-left: 3rem;
}

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

@media only screen and (min-width: 1200px) {
  .lookbook__banner--content {
    padding-left: 12rem;
  }
}

@media only screen and (min-width: 1366px) {
  .lookbook__banner--content {
    padding-left: 15rem;
  }
}

@media only screen and (max-width: 575px) {
  .lookbook__banner--content {
    text-align: center;
    padding: 5rem 2rem;
    width: 100%;
  }
}

.lookbook__banner--content__subtitle {
  font-size: 1.6rem;
  color: var(--primary-color);
  margin-bottom: 0.6rem;
}

@media only screen and (min-width: 992px) {
  .lookbook__banner--content__subtitle {
    font-size: 1.7rem;
    margin-bottom: 0.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .lookbook__banner--content__subtitle {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
}

.lookbook__banner--content__title {
  font-size: 2.2rem;
  line-height: 3rem;
  margin-bottom: 1rem;
}

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

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

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

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

.lookbook__banner--content__desc {
  font-size: 1.5rem;
  margin-bottom: 2.2rem;
}

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

@media only screen and (min-width: 992px) {
  .lookbook__banner--content__desc {
    font-size: 1.6rem;
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .lookbook__banner--content__desc {
    font-size: 1.7rem;
    margin-bottom: 3.5rem;
  }
}

.lookbook__banner--product {
  position: absolute;
  top: 50%;
  right: -7rem;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

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

.lookbook__banner--product .product__card--action {
  opacity: 1;
  visibility: visible;
  top: 20px;
  right: 20px;
}

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

.lookbook__banner--product .product__add--to__card {
  opacity: 1;
  visibility: visible;
  bottom: 18px;
}

.lookbook__banner--product:hover .product__add--to__card {
  bottom: 18px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .lookbook__banner--product.width__295 {
    width: 23.6rem;
  }
}

.lookbook__box {
  position: absolute;
  width: 3rem;
  height: 3rem;
}

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

.lookbook__box:hover .lookbook__product {
  opacity: 1;
  visibility: visible;
}

.lookbook__box.one {
  top: 10%;
  left: 25%;
}

@media only screen and (min-width: 992px) {
  .lookbook__box.one {
    top: 8%;
    left: 38%;
  }
}

@media only screen and (min-width: 1366px) {
  .lookbook__box.one {
    top: 8%;
    left: 38%;
  }
}

@media only screen and (min-width: 1600px) {
  .lookbook__box.one {
    left: 50%;
  }
}

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

.lookbook__box.two {
  left: 9rem;
  bottom: 13%;
}

@media only screen and (min-width: 1366px) {
  .lookbook__box.two {
    bottom: 12%;
    left: 13rem;
  }
}

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

.lookbook__box.three {
  top: 42%;
  right: 45%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

@media only screen and (min-width: 480px) {
  .lookbook__box.three {
    right: 40%;
    top: 50%;
  }
}

@media only screen and (min-width: 768px) {
  .lookbook__box.three {
    right: 50%;
  }
}

@media only screen and (min-width: 1366px) {
  .lookbook__box.three {
    right: 42%;
  }
}

@media only screen and (min-width: 1600px) {
  .lookbook__box.three {
    right: 34%;
  }
}

.lookbook__box--icon {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--body-background-color);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

.lookbook__box--icon::before {
  position: absolute;
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background: var(--secondary-color);
  border-radius: 50%;
  left: 0.7rem;
  top: 0.7rem;
}

@media only screen and (min-width: 992px) {
  .lookbook__box--icon::before {
    left: 1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;
  }
}

.lookbook__product {
  position: absolute;
  background: var(--body-background-color);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  width: 27rem;
  gap: 1.2rem;
  border-radius: 0.5rem;
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
  visibility: hidden;
  z-index: 9;
}

.lookbook__product.one {
  top: 5.5rem;
  left: -12rem;
}

@media only screen and (min-width: 992px) {
  .lookbook__product.one {
    top: 6.2rem;
    left: -11.3rem;
  }
}

.lookbook__product.one::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 17px solid var(--body-background-color);
  left: 50%;
  top: -17px;
  -webkit-transform: translatex(-50%);
          transform: translatex(-50%);
}

.lookbook__product.two {
  bottom: 6.2rem;
  top: auto;
  left: -11.3rem;
}

.lookbook__product.two::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 17px solid var(--body-background-color);
  left: 50%;
  bottom: -17px;
  -webkit-transform: translatex(-50%);
          transform: translatex(-50%);
}

.lookbook__product--thumbnail {
  width: 9rem;
}

.lookbook__product--content__title {
  font-size: 1.5rem;
  line-height: 1.8rem;
  margin-bottom: 0.5rem;
}

.lookbook__product--link {
  font-size: 1.4rem;
  line-height: 1.7rem;
  font-weight: 500;
  color: var(--foreground-sub-color);
  border-bottom: 1px solid var(--foreground-sub-color);
}

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

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

.accordion__items.active .accordion__items--button__icon--svg {
  -webkit-transform: rotate(180deg);
          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.5rem;
  font-weight: 600;
  position: relative;
}

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

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

.accordion__items--button__icon {
  width: 3rem;
  height: 3rem;
  background: var(--primary-color);
  color: var(--text-white-color);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transform: translatey(-50%);
          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 {
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

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

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

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

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

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

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

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

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

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

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

/* 
    10. Brand logo css
*/
.brang__logo--img {
  margin: 0 auto;
  opacity: 0.6;
}

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

.brand__logo--activation .swiper-wrapper {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* 
    31. 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;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

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

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

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

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

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

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

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

.product__view--label {
  font-weight: 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--icons {
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
  border-radius: 0.3rem;
  width: 3.7rem;
  height: 3.7rem;
  line-height: 1.1rem;
  margin-right: 10px;
  text-align: center;
  padding: 0;
}

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

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

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

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

.product__showing--count {
  color: var(--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;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  background-color: var(--body-background-color);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

.single__widget {
  margin-bottom: 3rem;
}

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

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

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

.widget__title {
  font-weight: 600;
  margin-bottom: 2rem;
  position: relative;
  color: var(--primary-color);
  padding-left: 1.2rem;
}

@media only screen and (min-width: 992px) {
  .widget__title {
    margin-bottom: 2.8rem;
    font-size: 2rem;
  }
}

.widget__title::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 2px;
  height: 2.5rem;
  background: var(--primary-color);
}

.widget__search--form {
  position: relative;
}

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

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

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

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

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

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

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

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

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

.widget__categories--menu__label {
  cursor: pointer;
  padding: 0.5rem 1rem;
  position: relative;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  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: 3rem;
}

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

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

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

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

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

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

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

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

.widget__form--check__label {
  cursor: pointer;
  line-height: 2.8rem;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border: 1px solid var(--border-color);
  background: var(--white-color);
  padding: 0.5rem 3rem 0.5rem 1.5rem;
  border-radius: 0.5rem;
  display: block;
  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%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  opacity: 0;
  cursor: pointer;
  z-index: 999;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.shop__sidebar--product .small__product--thumbnail {
  width: 100px;
}

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

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

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

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

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .shop__product--wrapper .rating__review--text {
    font-size: 1.1rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@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 {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.product__list--content .product__card--btn {
  display: inline-block;
  width: auto;
  border-radius: 5px;
  height: 4rem;
  line-height: 4rem;
  background: var(--primary-color);
  color: var(--text-white-color);
  font-weight: 500;
}

.product__list--content .product__card--btn:hover {
  background: var(--secondary-color);
}

.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.8rem;
  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: 4.4rem;
    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);
}

/* 
    33. About page css 
*/
.about__Section.mb-30 {
  margin-bottom: 3rem;
}

@media only screen and (max-width: 575px) {
  .about__Section.mb-30 {
    margin-bottom: 5rem;
  }
}

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

@media only screen and (min-width: 992px) {
  .about__thumbnail.padding__left {
    padding-left: 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .about__thumbnail.padding__left {
    padding-left: 9rem;
  }
}

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

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

@media only screen and (min-width: 1366px) {
  .about__content.padding__left {
    padding-left: 5rem;
  }
}

.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;
  }
}

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

.about__content--desc {
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-bottom: 1.7rem;
  color: var(--primary-color);
}

@media only screen and (min-width: 768px) {
  .about__content--desc {
    font-size: 1.5rem;
    line-height: 2.6rem;
    margin-bottom: 1.8rem;
  }
}

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

@media only screen and (min-width: 1366px) {
  .about__content--desc {
    font-size: 1.8rem;
    line-height: 3.2rem;
  }
}

.about__experience--text {
  position: absolute;
  top: 50%;
  left: 0;
  border: 1px solid var(--secondary-color);
  background: var(--body-background-color);
  border-radius: 0.5rem;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  padding: 1rem;
  width: 10rem;
}

@media only screen and (min-width: 768px) {
  .about__experience--text {
    width: 11rem;
  }
}

@media only screen and (min-width: 992px) {
  .about__experience--text {
    padding: 1.5rem;
    width: 15rem;
  }
}

@media only screen and (min-width: 1366px) {
  .about__experience--text {
    width: 16rem;
    padding: 2rem;
  }
}

@media only screen and (max-width: 575px) {
  .about__experience--text {
    left: 50%;
    -webkit-transform: translatex(-50%);
            transform: translatex(-50%);
  }
}

.about__experience--years {
  font-size: 3rem;
  line-height: 2.5rem;
  color: var(--primary-color);
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
}

@media only screen and (min-width: 768px) {
  .about__experience--years {
    font-size: 3.5rem;
    line-height: 2.5rem;
  }
}

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

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

.about__experience--years__inner {
  font-family: var(--frank-ruhl-fonts);
}

.about__experience--title {
  font-size: 1.3rem;
  font-weight: 500;
  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.8rem;
    line-height: 2.6rem;
  }
}

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

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

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

.team__social {
  gap: 1rem;
}

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

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

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

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

.team__content {
  padding: 1rem 0 0;
}

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

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

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

.team__content--title {
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1.7rem;
  line-height: 2rem;
  color: var(--primary-color);
}

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

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

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

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

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

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

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

.counterup__number {
  font-size: 2.5rem;
  line-height: 2.5rem;
  font-weight: 600;
  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;
  }
}

/* 
    16. Product details css 
*/
.product__details--media {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

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

.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.image__with--text__percent--content {
  font-weight: 600;
  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: 1.5rem;
  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: 1.2rem 0;
}

.product__details--summary__title {
  font-size: 1.6rem;
  font-weight: 600;
  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%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.product__tab--content__title {
  font-weight: 600;
  font-size: 1.7rem;
  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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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 {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

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

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

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

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

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

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

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

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

.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

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

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

.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;
}

/* 
    32. 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: 3rem;
    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(--primary-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;
  color: var(--text-white-color);
}

@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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

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

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

.blog__tags--media__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 1rem;
  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: 1rem;
}

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

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

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

.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%;
  -webkit-transform: translatey(-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 {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

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

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

@media only screen and (min-width: 992px) {
  .related__post--title {
    font-size: 1.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 {
  -webkit-transform: scale(1.03);
          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 a {
  color: var(--primary-color);
}

.post__article--content__title a:hover {
  color: var(--secondary-color);
}

.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%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

@media only screen and (min-width: 768px) {
  .blog__comment--title::before {
    height: 25px;
  }
}

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

.contact__section--heading__desc {
  color: var(--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;
  -webkit-box-shadow: 0 7px 20px rgba(0, 0, 0, 0.16);
          box-shadow: 0 7px 20px rgba(0, 0, 0, 0.16);
  padding: 2rem;
}

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

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

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

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

.contact__form--title {
  font-weight: 600;
  font-size: 1.8rem;
  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;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

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

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

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

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

@media only screen and (min-width: 1200px) {
  .contact__info {
    width: 46rem;
    padding: 5rem 6rem;
  }
}

@media only screen and (max-width: 991px) {
  .contact__info {
    position: inherit;
    top: inherit;
    -webkit-transform: inherit;
            transform: inherit;
    margin: 3rem auto 0;
    width: 100%;
  }
}

.contact__info--items {
  margin-bottom: 2.7rem;
}

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

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

.contact__info--icon {
  margin-right: 1.2rem;
  color: var(--text-white-color);
  padding-top: 0.8rem;
}

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

@media only screen and (max-width: 575px) {
  .contact__info--icon svg {
    width: 2.5rem;
  }
}

.contact__info--content__title {
  font-weight: 600;
}

@media only screen and (min-width: 992px) {
  .contact__info--content__title {
    font-size: 2rem;
    line-height: 2.8rem;
  }
}

.contact__info--content__desc {
  font-size: 1.5rem;
  line-height: 2.6rem;
  color: var(--text-white-color);
}

@media only screen and (min-width: 1200px) {
  .contact__info--content__desc {
    font-size: 1.6rem;
    line-height: 2.7rem;
  }
}

.contact__info--content__desc a {
  color: var(--text-white-color);
}

.contact__info--content__desc a:hover {
  color: var(--primary-color);
}

.contact__info--social__list {
  margin-right: 11px;
}

.contact__info--social__list:last-child {
  margin-right: 0;
}

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

.contact__info--social__icon:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
}

.contact__map--iframe {
  width: 100%;
  height: 250px;
  margin-bottom: -7px;
}

@media only screen and (min-width: 768px) {
  .contact__map--iframe {
    height: 320px;
  }
}

@media only screen and (min-width: 992px) {
  .contact__map--iframe {
    height: 400px;
  }
}

@media only screen and (min-width: 1200px) {
  .contact__map--iframe {
    height: 500px;
  }
}

/* 
    30. Cart page css 
*/
.cart__title {
  color: var(--primary-color);
}

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

.cart__table--inner {
  width: 100%;
  border-spacing: 0;
}

@media only screen and (max-width: 575px) {
  .cart__table--header {
    display: none;
  }
}

.cart__table--header__list {
  padding: 0 2rem 2rem 0;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.cart__table--body__list {
  border-bottom: 1px solid var(--border-color);
  padding: 2rem 2rem 2rem 0;
}

.cart__table--body__list:last-child {
  padding-right: 0;
}

@media only screen and (max-width: 575px) {
  .cart__table--body__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 2rem 0;
  }
}

.cart__thumbnail {
  max-width: 10rem;
  line-height: 1;
}

@media only screen and (max-width: 767px) {
  .cart__thumbnail {
    max-width: 8rem;
  }
}

.cart__content {
  padding-left: 1.5rem;
}

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

.cart__content--variant {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--foreground-sub-color);
  line-height: 2.2rem;
  font-size: 1.3rem;
}

.cart__content--variant:last-child {
  margin-bottom: 0;
}

.cart__content--title {
  margin-bottom: 0.5rem;
  line-height: 2.5rem;
}

.cart__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);
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
          box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  margin-right: 1.5rem;
  border-radius: 50%;
  padding: 0;
  border: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@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 {
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
          box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  padding: 2rem;
  background: var(--body-background-color);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

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

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

.cart__summary--total__table {
  width: 100%;
}

.coupon__code--title {
  font-size: 1.7rem;
  margin-bottom: 0.7rem;
  line-height: 2.4rem;
  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 {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.coupon__code--field__input {
  border: 1px solid var(--border-color);
  height: 3.8rem;
  padding: 0 1.5rem;
  border-radius: 2.4rem;
  font-size: 1.4rem;
  width: 150px;
}

@media only screen and (min-width: 768px) {
  .coupon__code--field__input {
    width: 160px;
  }
}

@media only screen and (min-width: 992px) {
  .coupon__code--field__input {
    width: 140px;
  }
}

@media only screen and (min-width: 1200px) {
  .coupon__code--field__input {
    width: 160px;
  }
}

.coupon__code--field__input:focus {
  border-color: var(--secondary-color);
}

.coupon__code--field__btn {
  margin-left: 1.5rem;
  font-size: 1.4rem;
  height: 3.8rem;
  line-height: 3.8rem;
}

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

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .coupon__code--field__btn {
    font-size: 1.3rem;
    height: 3.8rem;
    line-height: 3.8rem;
    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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.cart__summary--total__list:last-child {
  margin-bottom: 0;
}

.cart__summary--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;
  }
}

/*
   29. Checkout Page Css
*/
.checkout__breadcrumb {
  padding: 0;
  margin: 0;
}

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

.breadcrumb__link {
  font-size: 1.3rem;
  color: var(--secondary-color);
}

.readcrumb__chevron-icon {
  color: #737373;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0 0.6rem;
}

.order__summary--mobile__version {
  display: none;
}

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

.order__summary--toggle {
  width: 100%;
  text-align: left;
  background: var(--bg-offwhite-color);
  border: 0;
  border: 1px solid var(--border-color);
  padding: 1.2rem;
}

.order__summary--toggle__inner {
  width: 100%;
}

.order__summary--toggle__text {
  color: var(--secondary-color);
}

.order__summary--toggle__icon {
  color: var(--secondary-color);
  vertical-align: middle;
  line-height: 1.5rem;
  margin-right: 1rem;
}

.summary__table {
  width: 100%;
}

.summary__table--items {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

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

.summary__table--list:last-child {
  padding-right: 0;
}

details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

.order__summary--final__price {
  float: right;
  font-size: 1.5rem;
  font-weight: 600;
}

.order__summary--section {
  background: var(--bg-offwhite-color);
  padding: 3rem 1rem 1rem;
}

.checkout__checkbox {
  position: relative;
}

.checkout__checkbox--input {
  position: absolute;
  left: -1px;
  top: 4px;
  opacity: 0;
  cursor: pointer;
  z-index: 999;
}

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

.checkout__checkbox--input:checked ~ .checkout__checkbox--checkmark::before {
  display: block;
}

.checkout__checkbox--label {
  padding-left: 3rem;
  cursor: pointer;
  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);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

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

.checkout__input--label {
  display: inline-block;
  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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.checkout__sidebar {
  background: #FAFAFA;
  border: 1px solid var(--border-color);
  padding: 3rem 2.5rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

@media only screen and (max-width: 991px) {
  .checkout__sidebar {
    padding: 3rem 1.8rem;
  }
}

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

.product__thumbnail {
  width: 7rem;
  border: 1px solid var(--border-color);
  position: relative;
  line-height: 1;
}

.product__thumbnail--quantity {
  position: absolute;
  top: -6px;
  right: -5px;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  background: #7F7F7F;
  color: var(--text-white-color);
  text-align: center;
  border-radius: 50%;
  font-size: 1.2rem;
}

.product__description {
  padding-left: 1.5rem;
}

.product__description--name {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 600;
  opacity: 0.9;
}

.product__description--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 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.payment__history--list {
  margin-right: 1.5rem;
}

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

.payment__history--list:last-child {
  margin-right: 0;
}

@media only screen and (max-width: 1199px) {
  .payment__history--list {
    margin-right: 1rem;
  }
}

.payment__history--link {
  background: var(--body-background-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 0 1.2rem;
  font-size: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .payment__history--link {
    font-size: 1.6rem;
    padding: 0 2rem;
    height: 4.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;
  }
}

/* 
    23. My account page css 
*/
.my__account--section__inner {
  background: var(--body-background-color);
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
          box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  padding: 3rem 2rem;
}

@media only screen and (min-width: 1199px) {
  .my__account--section__inner {
    padding: 5rem 4rem;
  }
}

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

.account__left--sidebar {
  border-right: 1px solid var(--border-color);
  padding-right: 3rem;
  margin-right: 3rem;
  width: 18rem;
}

@media only screen and (min-width: 1199px) {
  .account__left--sidebar {
    padding-right: 5rem;
    margin-right: 5rem;
    width: 23rem;
  }
}

@media only screen and (max-width: 991px) {
  .account__left--sidebar {
    width: 100%;
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
  }
}

.account__wrapper {
  width: calc(100% - 18rem);
}

@media only screen and (min-width: 1199px) {
  .account__wrapper {
    width: calc(100% - 23rem);
  }
}

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

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

@media only screen and (max-width: 479px) {
  .account__menu {
    margin-right: 0;
  }
}

.account__menu--list {
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  margin-bottom: 1.5rem;
}

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

.account__menu--list 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;
  line-height: 4.3rem;
  border-radius: 2.5rem;
  margin-right: 1rem;
  font-size: 1.5rem;
}

.account__details--footer__btn:last-child {
  margin-right: 0;
}

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

.account__welcome--text {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

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

.account__content--title {
  font-weight: 600;
  font-size: 2rem;
  line-height: 2.8rem;
  color: var(--primary-color);
}

@media only screen and (min-width: 992px) {
  .account__content--title {
    font-size: 2.3rem;
    margin-bottom: 3rem;
  }
}

.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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 2rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 2rem;
  }
  .account__table--body__child:last-child {
    margin-bottom: 0;
  }
}

.account__table--body__child--items {
  border-bottom: 1px solid var(--border-color);
  padding: 1.7rem 2rem;
  color: var(--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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    border: 0;
  }
}

@media only screen and (max-width: 479px) {
  .account__table--body__child--items {
    padding: 0.5rem 0;
  }
}

/* 
    34. 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: 600;
  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;
  }
}

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

/* 
    24. Login page css 
*/
.account__login {
  background: var(--body-background-color);
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  -webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
          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;
  }
}

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

@media only screen and (max-width: 575px) {
  .account__login--remember .checkout__checkbox--checkmark {
    top: 0;
    top: 5px;
    -webkit-transform: inherit;
            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;
  -webkit-transform: translatey(-50%);
          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;
  }
}

/* 
    28. 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;
  }
}

/* 
    25. 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 {
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
          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;
  }
}

/* 
    19. Preloader css 
*/
.ctn-preloader {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          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;
  -webkit-transform: rotateY(-90deg);
          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 {
  -webkit-transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  -webkit-transform: translateX(-101%);
          transform: translateX(-101%);
}

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

/* Animación del preloader */
@-webkit-keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

/* Animación de las letras cargando del preloader */
@-webkit-keyframes letters-loading {
  0%,
  75%,
  100% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
  }
  25%,
  50% {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
@keyframes letters-loading {
  0%,
  75%,
  100% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
  }
  25%,
  50% {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
            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;
  }
}

/* 
    18. Privacy policy css 
*/
.privacy__policy--content {
  margin-bottom: 2rem;
}

.privacy__policy--content:last-child {
  margin-bottom: 0;
}

.privacy__policy--content__title {
  font-size: 2rem;
  line-height: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
  color: var(--primary-color);
}

@media only screen and (min-width: 768px) {
  .privacy__policy--content__title {
    font-size: 2.2rem;
    line-height: 2.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .privacy__policy--content__title {
    font-size: 2.5rem;
    line-height: 2.8rem;
    margin-bottom: 1.2rem;
  }
}

.privacy__policy--content__subtitle {
  font-size: 1.8rem;
  line-height: 2.5rem;
  margin-bottom: 0.8rem;
  font-weight: 500;
  color: var(--primary-color);
}

@media only screen and (min-width: 1600px) {
  .privacy__policy--content__subtitle {
    font-size: 2.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;
  }
}

/* 
    22. Newsletter popup css
*/
/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-animation] .newsletter__popup--inner {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s cubic-bezier(0.51, 0.92, 0.24, 1.15);
  transition: all 0.5s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}

[data-animation].newsletter__show .newsletter__popup--inner {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.newsletter__popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 1rem;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  z-index: 999;
}

.newsletter__popup.newsletter__show {
  visibility: visible;
  opacity: 1;
}

.newsletter__popup.newsletter__show .newsletter__popup--inner {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.newsletter__popup--inner {
  position: relative;
  width: 88%;
  max-height: 80vh;
  border-radius: 10px;
  background: var(--body-background-color);
  -webkit-box-shadow: 2px 0 20px rgba(0, 0, 0, 0.06);
          box-shadow: 2px 0 20px rgba(0, 0, 0, 0.06);
  overflow: auto;
  cursor: default;
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
  padding: 1.2rem;
}

@media only screen and (min-width: 576px) {
  .newsletter__popup--inner {
    width: 80%;
  }
}

@media only screen and (min-width: 768px) {
  .newsletter__popup--inner {
    width: 655px;
  }
}

@media only screen and (min-width: 992px) {
  .newsletter__popup--inner {
    width: 720px;
  }
}

@media only screen and (min-width: 1200px) {
  .newsletter__popup--inner {
    width: 760px;
  }
}

.newsletter__popup--close__btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--secondary-color);
  color: var(--text-white-color);
  line-height: 2.8rem;
  border: 0;
  text-transform: uppercase;
  font-size: 1.2rem;
  border-radius: 50%;
  padding: 0;
  width: 3rem;
  height: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.newsletter__popup--close__btn:hover {
  background: var(--primary-color);
}

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

.newsletter__popup--close__btn > * {
  pointer-events: none;
}

.newsletter__popup--thumbnail {
  width: 280px;
}

@media only screen and (min-width: 992px) {
  .newsletter__popup--thumbnail {
    width: 320px;
  }
}

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

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

.newsletter__popup--box__right {
  width: 100%;
  padding: 2.5rem 2rem;
  text-align: center;
}

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

@media only screen and (min-width: 768px) {
  .newsletter__popup--box__right {
    width: calc(100% - 280px);
    padding: 2.5rem 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .newsletter__popup--box__right {
    width: calc(100% - 320px);
    padding: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .newsletter__popup--box__right {
    width: calc(100% - 330px);
    padding: 2.5rem 3rem;
  }
}

.newsletter__popup--title {
  margin-bottom: 1.3rem;
  font-size: 2.2rem;
  line-height: 2.5rem;
  color: var(--primary-color);
}

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

.newsletter__popup--content--desc {
  color: var(--foreground-sub-color);
  display: inline-block;
  line-height: 2.4rem;
  font-size: 1.5rem;
  margin-bottom: 1.6rem;
}

@media only screen and (min-width: 768px) {
  .newsletter__popup--content--desc {
    line-height: 2.6rem;
    font-size: 1.5rem;
  }
}

.newsletter__popup--subscribe__input {
  width: 100%;
  height: 4rem;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 0 15px;
  font-size: 1.3rem;
}

.newsletter__popup--subscribe__input:focus {
  border-color: var(--secondary-color);
}

@media only screen and (min-width: 768px) {
  .newsletter__popup--subscribe__input {
    height: 4.5rem;
    font-size: 1.4rem;
  }
}

.newsletter__popup--subscribe__btn {
  width: 100%;
  height: 4rem;
  background: var(--secondary-color);
  color: var(--text-white-color);
  border: 0;
  padding: 0 2rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 5px;
  margin-top: 1.5rem;
}

.newsletter__popup--subscribe__btn:hover {
  background: var(--primary-color);
}

@media only screen and (min-width: 768px) {
  .newsletter__popup--subscribe__btn {
    height: 4.5rem;
  }
}

.newsletter__popup--footer {
  margin-top: 1.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.newsletter__popup--footer input {
  vertical-align: middle;
  margin-right: 0.8rem;
}

.newsletter__popup--dontshow__again--text {
  color: var(--foreground-sub-color);
  cursor: pointer;
  font-size: 1.4rem;
}

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

/* 
    35. Other section css
*/
.image__width--text {
  position: absolute;
  top: 50%;
  left: 3rem;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

@media only screen and (min-width: 768px) {
  .image__width--text__inner {
    padding-bottom: 5rem;
  }
}

@media only screen and (min-width: 992px) {
  .image__width--text__inner {
    padding-bottom: 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .image__width--text__inner {
    padding-bottom: 8rem;
  }
}

@media only screen and (max-width: 767px) {
  .image__width--text__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .image__width--text__thumbnail {
    max-width: 60rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .image__width--text__thumbnail {
    max-width: 52rem;
  }
}

.image__width--text__thumbnail.thumbnail2 {
  position: absolute;
  right: 0;
  bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .image__width--text__thumbnail.thumbnail2 {
    max-width: 50rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .image__width--text__thumbnail.thumbnail2 {
    max-width: 34rem;
  }
}

@media only screen and (max-width: 767px) {
  .image__width--text__thumbnail.thumbnail2 {
    position: inherit;
  }
}

@media only screen and (min-width: 768px) {
  .image__width--text {
    width: 67%;
  }
}

@media only screen and (min-width: 992px) {
  .image__width--text {
    left: 4rem;
    width: 64%;
  }
}

@media only screen and (min-width: 1366px) {
  .image__width--text {
    width: 68%;
  }
}

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

@media only screen and (max-width: 479px) {
  .image__width--text {
    left: 1rem;
    right: 1rem;
  }
}

.image__width--text__title {
  font-size: 2rem;
  line-height: 2.6rem;
  margin-bottom: 1rem;
}

@media only screen and (min-width: 480px) {
  .image__width--text__title {
    font-size: 2.2rem;
    line-height: 3rem;
    margin-bottom: 1.5rem;
  }
}

@media only screen and (min-width: 768px) {
  .image__width--text__title {
    font-size: 2.5rem;
  }
}

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

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

@media only screen and (min-width: 1366px) {
  .image__width--text__title {
    font-size: 3.5rem;
    margin-bottom: 2.5rem;
  }
}

.image__width--text__desc {
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-bottom: 1rem;
}

@media only screen and (min-width: 480px) {
  .image__width--text__desc {
    font-size: 1.6rem;
    line-height: 2.6rem;
    margin-bottom: 1.5rem;
  }
}

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

@media only screen and (min-width: 1200px) {
  .image__width--text__desc {
    font-size: 1.7rem;
    line-height: 3rem;
    margin-bottom: 2.5rem;
  }
}

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

.image__width--text__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
}

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

.image__width--text__link {
  font-size: 1.5rem;
  font-weight: 500;
  font-family: var(--frank-ruhl-fonts);
}

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

.image__width--text__link svg {
  margin-left: 0.5rem;
}

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

.bideo__play--icon {
  width: 5.5rem;
  height: 5.5rem;
  background: #F7EEDD;
  color: var(--secondary-color);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-animation: animate 2s linear infinite;
          animation: animate 2s linear infinite;
}

.bideo__play--icon:hover {
  color: var(--text-white-color);
  background: var(--primary-color);
}

.bideo__play--icon:hover {
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
}

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

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

.section__shape--img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.section__shape--img.two {
  bottom: 0;
  top: auto;
  right: 0;
  left: auto;
}

/*
  Before After css
*/
#comparison {
  width: 100%;
  padding-bottom: 43%;
  overflow: hidden;
  position: relative;
}

figure {
  position: absolute;
  background-image: url(../img/banner/banner5.webp);
  background-size: cover;
  font-size: 0;
  width: 100%;
  height: 143px;
  margin: 0;
}

@media only screen and (min-width: 400px) {
  figure {
    height: 171px;
  }
}

@media only screen and (min-width: 480px) {
  figure {
    height: 206px;
  }
}

@media only screen and (min-width: 576px) {
  figure {
    height: 235px;
  }
}

@media only screen and (min-width: 768px) {
  figure {
    height: 318px;
  }
}

@media only screen and (min-width: 992px) {
  figure {
    height: 415px;
  }
}

@media only screen and (min-width: 1200px) {
  figure {
    height: 503px;
  }
}

@media only screen and (min-width: 1366px) {
  figure {
    height: 542px;
  }
}

#divisor {
  background-image: url(../img/banner/banner4.webp);
  background-size: cover;
  position: absolute;
  width: 50%;
  -webkit-box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
          box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
  bottom: 0;
  height: 162px;
}

@media only screen and (min-width: 400px) {
  #divisor {
    height: 182px;
  }
}

@media only screen and (min-width: 480px) {
  #divisor {
    height: 217px;
  }
}

@media only screen and (min-width: 576px) {
  #divisor {
    height: 235px;
  }
}

@media only screen and (min-width: 768px) {
  #divisor {
    height: 318px;
  }
}

@media only screen and (min-width: 992px) {
  #divisor {
    height: 415px;
  }
}

@media only screen and (min-width: 1200px) {
  #divisor {
    height: 503px;
  }
}

@media only screen and (min-width: 1366px) {
  #divisor {
    height: 542px;
  }
}

#divisor::before, #divisor::after {
  content: '';
  position: absolute;
  right: -2px;
  width: 4px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
}

#divisor::before {
  top: 0;
  -webkit-box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
}

#divisor::after {
  bottom: 0;
  -webkit-box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
}

#handle {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  z-index: 1;
}

#handle::before, #handle::after {
  content: '';
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
}

#handle::before {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px;
}

#handle::after {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px;
}

input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  top: 50%;
  left: -25px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: transparent;
  width: calc(100% + 50px);
  z-index: 2;
}

input[type=range]:focus, input[type=range]:active {
  border: none;
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid white;
  -webkit-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
}

input[type=range]::-moz-range-track {
  -moz-appearance: none;
  height: 15px;
  width: 100%;
  background-color: transparent;
  position: relative;
  outline: none;
}

/*
  skin advice css 
*/
.skin__advice--content__title {
  margin-bottom: 1.6rem;
}

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

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

.skin__advice--content__desc {
  font-size: 1.4rem;
  line-height: 2.4rem;
  padding: 0;
  margin-bottom: 1rem;
}

@media only screen and (min-width: 576px) {
  .skin__advice--content__desc {
    font-size: 1.5rem;
    line-height: 2.6rem;
    padding: 0 2rem;
  }
}

@media only screen and (min-width: 768px) {
  .skin__advice--content__desc {
    font-size: 1.6rem;
    line-height: 3rem;
    padding: 0 5rem;
  }
}

@media only screen and (min-width: 992px) {
  .skin__advice--content__desc {
    font-size: 1.7rem;
    padding: 0 10rem;
    margin-bottom: 1.5rem;
  }
}

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

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

.skin__advice--content__subtitle {
  font-size: 1.7rem;
  line-height: 2.8rem;
  font-weight: 400;
}

@media only screen and (min-width: 768px) {
  .skin__advice--content__subtitle {
    font-size: 1.8rem;
    line-height: 3rem;
  }
}

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

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

/*
  home six css
*/
.img__width--right__sidebar {
  padding-left: 0;
}

@media only screen and (min-width: 1200px) {
  .img__width--right__sidebar {
    padding-left: 1rem;
  }
}

@media only screen and (min-width: 1366px) {
  .img__width--right__sidebar {
    padding-left: 3rem;
  }
}

@media only screen and (max-width: 991px) {
  .img__width--right__sidebar {
    padding-top: 2.5rem;
  }
}

.img__width--content__logo {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2rem 0 2.5rem;
}

@media only screen and (min-width: 480px) {
  .img__width--content__logo {
    gap: 2rem;
    margin: 2.2rem 0 2.8rem;
  }
}

@media only screen and (min-width: 768px) {
  .img__width--content__logo {
    gap: 2.5rem;
    margin: 2.8rem 0 3rem;
  }
}

@media only screen and (min-width: 992px) {
  .img__width--content__logo {
    margin: 3.2rem 0 3.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .img__width--content__logo {
    gap: 3rem;
    margin: 4.5rem 0 5.2rem;
  }
}

.img__width--logo__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
  width: 46%;
}

@media only screen and (min-width: 576px) {
  .img__width--logo__list {
    width: 48%;
  }
}

@media only screen and (min-width: 768px) {
  .img__width--logo__list {
    width: 30%;
  }
}

.img__width--logo__text {
  font-size: 1.6rem;
  color: var(--primary-color);
  font-weight: 500;
}

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

.img__width--banner__box {
  display: inline-block;
}

.img__width--content {
  margin-bottom: 3.5rem;
}

@media only screen and (min-width: 1200px) {
  .img__width--content {
    margin-bottom: 6.5rem;
  }
}

.img__width--content__title {
  font-size: 2.2rem;
  line-height: 3rem;
  margin-bottom: 1.2rem;
}

@media only screen and (min-width: 480px) {
  .img__width--content__title {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}

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

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

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

@media only screen and (min-width: 1366px) {
  .img__width--content__title {
    font-size: 5rem;
    line-height: 6.5rem;
  }
}

.img__width--content__desc {
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: var(--primary-color);
  margin-bottom: 0;
}

@media only screen and (min-width: 480px) {
  .img__width--content__desc {
    font-size: 1.5rem;
    line-height: 2.5rem;
  }
}

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

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

/* 
    9. instagram css
*/
.instagram__thumbnail {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

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

.instagram__thumbnail:hover::before {
  opacity: 0.8;
}

.instagram__thumbnail:hover .instagram__social--icon {
  opacity: 1;
}

.instagram__thumbnail::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  left: 0;
  top: 0;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: 9;
  pointer-events: none;
}

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

.instagram__thumbnail--img {
  width: 100%;
}

.instagram__social--icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translatey(-50%) translatex(-50%);
          transform: translatey(-50%) translatex(-50%);
  z-index: 9;
  color: var(--text-white-color);
  opacity: 0;
}

.instagram__social--icon:hover {
  color: var(--secondary-color);
}

/*
    parallax banner css
*/
.parallax__banner {
  height: 37rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media only screen and (min-width: 480px) {
  .parallax__banner {
    height: 40rem;
  }
}

@media only screen and (min-width: 576px) {
  .parallax__banner {
    height: 42rem;
  }
}

@media only screen and (min-width: 768px) {
  .parallax__banner {
    height: 52rem;
  }
}

@media only screen and (min-width: 992px) {
  .parallax__banner {
    height: 60rem;
  }
}

@media only screen and (min-width: 1200px) {
  .parallax__banner {
    height: 64rem;
  }
}

@media only screen and (min-width: 1366px) {
  .parallax__banner {
    height: 70rem;
  }
}

@media only screen and (min-width: 1600px) {
  .parallax__banner {
    height: 90rem;
  }
}

.parallax__bg {
  background: url(../img/banner/parallax-banner1.webp);
  background-repeat: no-repeat;
  background-position: 38%;
  background-size: cover;
  background-attachment: fixed;
}

@media only screen and (min-width: 768px) {
  .parallax__bg {
    background-position: center center;
  }
}

.parallax__bg2 {
  background: url(../img/banner/parallax-banner2.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.parallax__bg3 {
  background: url(../img/banner/parallax-banner3.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.parallax__bg4 {
  background: url(../img/banner/parallax-banner4.webp);
  background-repeat: no-repeat;
  background-position: 72%;
  background-size: cover;
  background-attachment: fixed;
}

@media only screen and (min-width: 768px) {
  .parallax__bg4 {
    background-position: center center;
  }
}

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

.parallax__banner--content.padding_top {
  padding-top: 4rem;
}

@media only screen and (min-width: 480px) {
  .parallax__banner--content.padding_top {
    padding-top: 5rem;
  }
}

.parallax__banner--content__title {
  font-size: 2.4rem;
  line-height: 3.4rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
}

@media only screen and (min-width: 480px) {
  .parallax__banner--content__title {
    font-size: 2.6rem;
    line-height: 3.7rem;
  }
}

@media only screen and (min-width: 576px) {
  .parallax__banner--content__title {
    font-size: 3rem;
    line-height: 4.2rem;
    margin-bottom: 1.5rem;
  }
}

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

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

@media only screen and (min-width: 1200px) {
  .parallax__banner--content__title {
    font-size: 4.5rem;
    line-height: 6rem;
  }
}

@media only screen and (min-width: 1366px) {
  .parallax__banner--content__title {
    font-size: 5rem;
    line-height: 6.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .parallax__banner--content__title {
    font-size: 5.5rem;
    line-height: 7rem;
  }
}

.parallax__banner--content__desc {
  font-size: 1.5rem;
  line-height: 2.6rem;
  margin-bottom: 1.6rem;
}

@media only screen and (min-width: 576px) {
  .parallax__banner--content__desc {
    font-size: 1.6rem;
    line-height: 2.8rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .parallax__banner--content__desc {
    font-size: 1.8rem;
    line-height: 2.8rem;
    margin-bottom: 2.5rem;
  }
}
/*# sourceMappingURL=style.css.map */