@charset "UTF-8";
/*
  Template Name: Rokon - Single Product eCommerce HTML Template
  Author Name: Hook theme
  Author URL: https://themeforest.net/user/hooktheme
  Version: 1.0.0

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

    1. Base CSS
    2. Header CSS
    3. Slider CSS
    4. Banner CSS
    5. About CSS
    6. Product CSS
    7. Project CSS
    8. Services CSS
    9. Product details css
    10. Counterup css
    11. Team css
    12. Blog css
    13. Blog Details Css
    14. Testimonial Css
    15. Newslette Css
    16. Accordion Css
    17. Breadcrumb Css
    18. Cart Page Css
    19. Checkout Page Css
    20. Compare Page Css
    21. Contact Page Css
    22. Faq Page Css
    23. Footer Page Css
    24. Instagram css 
    25. Login Page css 
    26. My Account Page css 
    27. Portfolio css 
    28. Preloader css
    29. Privacy Policy css
    30. Shop page css
    31. 404 page css  
    32. Newsletter popup css
    33. Quickview css 


*/
/*
    1. Base CSS
*/
:root {
  --primary-color: #222222;
  --secondary-color: #D72323;
  --yellow-color: #ffc107;
  --text-gray-color: #4A4C59;
  --white-color: #ffffff;
  --ofwhite-color: #E6E6E6;
  --black-color: #000000;
  --light-color: #a5a5a5;
  --light-color2: #aaaaaa;
  --dark-color: #242424;
  --sky-color: #647589;
  --border-color: #E4E4E4;
  --border-color2: #e4e4e4;
  --border-color3: #dddddd;
  --border-dark: #383434;
  --bg-gray-color: #f7f8fc;
  --gray-color: #ebebeb;
  --gray-color2: #f5f5f5;
  --roboto: 'Roboto', sans-serif;         // <--- Добавляем Roboto
  --work-sans: 'Work Sans', sans-serif;
  --body-font-size: 1.7rem;
  --body-font-weight: 400;
  --body-line-height: 2.6rem;
  --headings-weight: 700;
  --transition: all 0.3s ease 0s;
  --container-fluid-offset: 16rem;
}

.color-scheme-1 {
  --secondary-color: #D72323;
}

.color-scheme-2 {
  --secondary-color: #BF0D3E;
}

.color-scheme-3 {
  --secondary-color: #666666;
}

.color-primary-1 {
  --primary-color: #222222;
}

.color-primary-2 {
  --primary-color: #4A4C59;
}

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

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

body {
  font-family: var(--roboto);
  font-size: var(--body-font-size, 1.7rem);
  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(--black-color);
  background-color: var(--white-color);
}

@media only screen and (max-width: 1599px) {
  body {
    font-size: 1.6rem;
  }
}

@media only screen and (max-width: 991px) {
  body {
    font-size: 1.5rem;
    line-height: 2.4rem;
  }
}

@media only screen and (max-width: 767px) {
  body {
    font-size: 1.4rem;
  }
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: var(--headings-weight);
  margin: 0;
  font-family: var(--work-sans);
}

h1,
.h1 {
  font-size: 2.2rem;
  line-height: 3rem;
  font-weight: 700;
}

@media only screen and (min-width: 480px) {
  h1,
  .h1 {
    font-size: 2.6rem;
    line-height: 3.5rem;
  }
}

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

@media only screen and (min-width: 768px) {
  h1,
  .h1 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
}

@media only screen and (min-width: 992px) {
  h1,
  .h1 {
    font-size: 4rem;
    line-height: 4.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  h1,
  .h1 {
    font-size: 4.2rem;
    line-height: 5rem;
  }
}

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

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

h2,
.h2 {
  font-size: 2rem;
  line-height: 2.4rem;
  font-weight: 700;
}

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

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

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

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

@media only screen and (min-width: 1600px) {
  h2,
  .h2 {
    font-size: 4rem;
    line-height: 4.7rem;
  }
}

h3,
.h3 {
  font-size: 1.7rem;
  line-height: 2.4rem;
  font-weight: 700;
}

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

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

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

@media only screen and (min-width: 1600px) {
  h3,
  .h3 {
    font-size: 2.2rem;
    line-height: 3rem;
  }
}

h4,
.h4 {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2.8rem;
}

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

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

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

p,
.p {
  margin-top: 0;
  margin-bottom: 1.8rem;
  color: var(--text-gray-color);
}

@media only screen and (max-width: 767px) {
  p,
  .p {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}

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:hover {
  text-decoration: none;
  color: var(--secondary-color);
}

button,
input[type="submit"] {
  cursor: pointer;
  font-family: var(--font-lato);
  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;
}

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

.container,
.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.container {
  padding-right: 1.5rem;
  padding-left: 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;
}

@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: 960px;
  }
}

@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}

@media only screen and (min-width: 1400px) {
  .container {
    max-width: 1200px;
  }
}

.row {
  --bs-gutter-x: 3rem;
  --bs-gutter-y: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}

.row > * {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-bottom: var(--bs-gutter-y);
}

.col {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
}

.row-cols-auto > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 33.3333333333%;
}

.row-cols-4 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 16.6666666667%;
}

@media only screen and (min-width: 576px) {
  .col-sm {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0%;
            flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.6666666667%;
  }
}

@media only screen and (min-width: 768px) {
  .col-md {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0%;
            flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.6666666667%;
  }
}

@media only screen and (min-width: 992px) {
  .col-lg {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0%;
            flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-lg-4 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.6666666667%;
  }
}

@media only screen and (min-width: 1200px) {
  .col-xl {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0%;
            flex: 1 0 0%;
  }
  .row-cols-xl-auto > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xl-4 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.6666666667%;
  }
}

@media only screen and (min-width: 1600px) {
  .col-xxl {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0%;
            flex: 1 0 0%;
  }
  .row-cols-xxl-auto > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xxl-4 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.6666666667%;
  }
}

.col-auto {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: auto;
}

.col-1 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%;
}

@media only screen and (min-width: 576px) {
  .col-sm-auto {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
}

@media only screen and (min-width: 768px) {
  .col-md-auto {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
}

@media only screen and (min-width: 992px) {
  .col-lg-auto {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
}

@media only screen and (min-width: 1200px) {
  .col-xl-auto {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
}

@media only screen and (min-width: 1400px) {
  .col-xxl-auto {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
}

@media (min-width: 992px) {
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
}

@media (min-width: 992px) {
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
}

@media (min-width: 1200px) {
  .offset-xl-0 {
    margin-left: 0;
  }
}

@media only screen and (max-width: 767px) {
  .row {
    margin-right: -10px;
    margin-left: -10px;
  }
  .row > * {
    padding-right: 10px;
    padding-left: 10px;
  }
}

@media only screen and (max-width: 479px) {
  .row {
    margin-right: -8px;
    margin-left: -8px;
  }
  .row > * {
    padding-right: 8px;
    padding-left: 8px;
  }
  .custom-col {
    width: 100%;
  }
}

@media only screen and (max-width: 400px) {
  .custom-col-2 {
    width: 100%;
  }
}

.row-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

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

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.align-items-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.align-self-center {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.justify-content-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.justify-content-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.d-none {
  display: none;
}

@media only screen and (min-width: 992px) {
  .d-lg-block {
    display: block !important;
  }
  .d-lg-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media only screen and (min-width: 1200px) {
  .d-xl-none {
    display: none;
  }
  .d-xl-block {
    display: block;
  }
  .d-xl-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media only screen and (min-width: 1600px) {
  .d-xxl-none {
    display: none;
  }
  .d-xxl-block {
    display: block;
  }
  .d-xxl-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

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

@media only screen and (max-width: 767px) {
  .d-sm-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;
  }
}

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

.display-block {
  display: block;
}

.primary__btn {
  font-weight: 400;
  display: inline-block;
  font-size: 1.4rem;
  line-height: 3.4rem;
  height: 3.4rem;
  padding: 0 1.5rem;
  letter-spacing: 0.2px;
  border-radius: 0.3rem;
  background: var(--secondary-color);
  color: var(--white-color);
  border: 0;
}

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

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

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

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

@media only screen and (min-width: 1600px) {
  .primary__btn {
    font-size: 1.8rem;
    line-height: 5.2rem;
    height: 5.2rem;
    padding: 0 3rem;
  }
}

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

.swiper__nav--btn {
  width: 4rem;
  height: 4rem;
  background: 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: 767px) {
  .swiper__nav--btn {
    width: 3.5rem;
    height: 3.5rem;
  }
}

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

.swiper__nav--btn:hover {
  background: var(--primary-color);
}

.swiper__nav--btn::after {
  background: url(../img/icon/left-arrow-angle.webp);
  width: 9px;
  height: 17px;
  font-size: 0;
}

.swiper__nav--btn.swiper-button-prev {
  left: 0;
}

.swiper__nav--btn.swiper-button-next {
  right: 0;
}

.swiper__nav--btn.swiper-button-next::after {
  background: url(../img/icon/right-arrow-angle.webp);
}

.swiper__nav--btn.style2 {
  top: 23px;
  right: 0;
  opacity: 1;
  visibility: visible;
  background: var(--primary-color);
  border-radius: 0.5rem;
}

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

.swiper__nav--btn.style2.swiper-button-prev {
  right: 6rem;
  left: auto;
}

@media only screen and (max-width: 575px) {
  .swiper__nav--btn.style2.swiper-button-prev {
    right: 4.5rem;
  }
}

.swiper-pagination {
  bottom: 0 !important;
}

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

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

.swiper-pagination-bullet::before {
  position: absolute;
  content: "";
  width: 1rem;
  height: 1rem;
  background: var(--secondary-color);
  top: 50%;
  left: 50%;
  -webkit-transform: translatey(-50%) translatex(-50%);
          transform: translatey(-50%) translatex(-50%);
  border-radius: 50%;
}

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

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

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

@media only screen and (min-width: 768px) {
  .section__heading--desc {
    width: 70%;
  }
}

@media only screen and (min-width: 992px) {
  .section__heading--desc {
    width: 60%;
  }
}

@media only screen and (min-width: 1200px) {
  .section__heading--desc {
    width: 52%;
  }
}

#scroll__top {
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 99;
  outline: none;
  background-color: var(--secondary-color);
  color: var(--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;
}

.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-white {
  color: var(--white-color) !important;
}

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

.text-black {
  color: var(--black-color) !important;
}

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

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

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

.bg__secondary2 {
  background: var(--secondary-color2);
}

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

.bg__white {
  background: var(--white-color);
}

.bg__black {
  background: #1d1c1c;
}

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

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

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

.position__relative {
  position: relative;
}

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

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

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

/* 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: 6rem;
  padding-bottom: 6rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.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: 992px) {
  .mb-30 {
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .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-8 {
  margin-bottom: 0.8rem;
}

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

/*
    2. Header CSS
*/
.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(--white-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(--black-color);
}

.offcanvas__inner {
  position: relative;
  height: 100%;
  width: 100%;
}

/* Offacnvas Logo */
.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__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(--black-color);
}

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

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

.offcanvas__menu_ul {
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

.offcanvas__menu_item {
  line-height: 1;
  display: block;
  padding: 15px 20px;
  text-transform: uppercase;
}

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

.offcanvas__sub_menu_item {
  line-height: 1;
  display: block;
  padding: 15px 0 15px 30px;
}

.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(--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 {
  padding: 28px 17px 20px;
}

.offcanvas__account--items__icon {
  width: 3rem;
  height: 3rem;
  text-align: center;
  background: var(--secondary-color);
  border-radius: 50%;
  color: var(--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__account--items__label {
  font-size: 1.5rem;
  font-weight: 600;
  margin-left: 6px;
}

.offcanvas__language--switcher {
  font-weight: 500;
  font-family: var(--font-poppins);
}

.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: 20px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background: var(--white-color);
}

.offcanvas__dropdown--language.active {
  opacity: 1;
  visibility: visible;
  margin-bottom: 12px;
}

.offcanvas__account--currency {
  position: relative;
  padding: 0 17px;
}

.offcanvas__account--currency__menu {
  font-family: var(--font-poppins);
  font-weight: 500;
}

.offcanvas__account--currency__submenu {
  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: 20px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background: var(--white-color);
}

.offcanvas__account--currency__submenu.active {
  opacity: 1;
  visibility: visible;
  margin-bottom: 12px;
}

.offcanvas__stikcy--toolbar {
  position: fixed;
  bottom: 0;
  background: var(--white-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: 10px 20px;
  display: none;
  visibility: hidden;
}

@media only screen and (min-width: 500px) {
  .offcanvas__stikcy--toolbar {
    padding: 10px 40px;
  }
}

@media only screen and (min-width: 768px) {
  .offcanvas__stikcy--toolbar {
    padding: 10px 60px;
  }
}

@media only screen and (max-width: 991px) {
  .offcanvas__stikcy--toolbar {
    display: block;
    visibility: visible;
  }
}

.offcanvas__stikcy--toolbar__btn {
  position: relative;
  text-align: center;
}

.offcanvas__stikcy--toolbar__btn:hover .offcanvas__stikcy--toolbar__icon {
  background: var(--primary-color);
  color: var(--white-color);
}

.offcanvas__stikcy--toolbar__btn > * {
  pointer-events: none;
}

.offcanvas__stikcy--toolbar__icon {
  width: 3rem;
  height: 3rem;
  text-align: center;
  background: var(--secondary-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;
  border-radius: 50%;
  color: var(--white-color);
  margin: 0 auto;
}

.offcanvas__stikcy--toolbar__label {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 6px;
}

.header__sticky.sticky {
  position: fixed;
  width: 100%;
  top: 0;
  background: var(--white-color);
  left: 0;
  z-index: 99;
  -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: 991px) {
  .main__logo {
    margin-right: -30px;
  }
}

@media only screen and (max-width: 575px) {
  .main__logo {
    margin-right: -20px;
  }
}

.main__logo--title {
  line-height: 2rem;
}

@media only screen and (max-width: 575px) {
  .main__logo--img {
    max-width: 120px;
  }
}

@media only screen and (max-width: 400px) {
  .main__logo--img {
    max-width: 110px;
  }
}

.header__topbar {
  padding: 1.2rem 0;
}

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

.header__contact--info__list {
  margin-right: 2.5rem;
  font-size: 1.3rem;
}

@media only screen and (max-width: 479px) {
  .header__contact--info__list {
    margin-right: 1.2rem;
  }
}

.header__contact--info__list:last-child {
  margin-right: 0;
}

.header__contact--info__icon {
  vertical-align: middle;
  margin-right: 0.3rem;
}

@media only screen and (max-width: 479px) {
  .header__contact--info__icon {
    margin-right: 0rem;
  }
}

.header__discount--text {
  font-size: 1.6rem;
}

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

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

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

@media only screen and (max-width: 991px) {
  .language__currency {
    padding: 20px;
  }
}

.language__currency--list {
  position: relative;
  margin-right: 2rem;
}

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

.language__switcher {
  font-size: 2rem;
}

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

.language__switcher--icon__img {
  vertical-align: middle;
  margin-right: 3px;
}

.language__switcher.style2 {
  color: var(--text-gray-color);
}

.language__switcher.style2:hover {
  color: var(--secondary-color2);
}

.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);
  top: 100%;
  opacity: 0;
  right: 0;
  visibility: hidden;
  margin-top: 28px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background: var(--white-color);
}

.dropdown__language.active {
  opacity: 1;
  visibility: visible;
  margin-top: 17px;
}

.language__items:last-child .language__text {
  border-bottom: 0;
}

.language__text {
  display: block;
  font-size: 1.4rem;
  padding: 10px 14px;
  background: var(--gray-color2);
  border-bottom: 1px solid var(--border-color2);
}

.language__text:hover {
  background: var(--primary-color);
  color: var(--white-color);
  border-color: var(--primary-color);
}

.account__currency {
  margin-right: 25px;
  position: relative;
}

@media only screen and (min-width: 1200px) {
  .account__currency {
    margin-right: 32px;
  }
}

.account__currency--link {
  font-size: 1.5rem;
  line-height: 2rem;
}

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

.account__currency--link.style2 {
  color: var(--text-gray-color);
}

.account__currency--link.style2:hover {
  color: var(--secondary-color2);
}

.dropdown__currency {
  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;
  right: 0;
  visibility: hidden;
  margin-top: 28px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background: var(--white-color);
}

.dropdown__currency.active {
  opacity: 1;
  visibility: visible;
  margin-top: 17px;
}

.currency__items:last-child .currency__text {
  border-bottom: 0;
}

.currency__text {
  display: block;
  font-size: 1.4rem;
  padding: 1rem 1.4rem;
  background: var(--gray-color2);
  border-bottom: 1px solid var(--border-color2);
}

.currency__text:hover {
  background: var(--primary-color);
  color: var(--white-color);
  border-color: var(--primary-color);
}

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

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

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

@media only screen and (max-width: 575px) {
  .header__account--items {
    margin-right: 1rem;
  }
}

@media only screen and (min-width: 992px) {
  .header__account--search__items.mobile__d--block {
    display: none;
  }
}

.header__account--btn {
  position: relative;
  color: var(--text-gray-color);
  text-align: center;
}

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

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

.items__count {
  position: absolute;
  right: -1.4rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  line-height: 2rem;
  background: var(--secondary-color);
  text-align: center;
  border-radius: 50%;
  color: var(--white-color);
}

.items__count.style2 {
  right: -1.4rem;
}

.items__count.wishlist__count {
  right: -0.7rem;
}

.predictive__search--title {
  margin-bottom: 15px;
}

@media only screen and (min-width: 992px) {
  .predictive__search--title {
    margin-bottom: 20px;
    font-size: 2.7rem;
    line-height: 3rem;
  }
}

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

.predictive__search--box {
  background: var(--white-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: 5rem;
  border: 1px solid var(--border-color2);
  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 (max-width: 576px) {
  .predictive__search--input {
    height: 45px;
  }
}

.predictive__search--button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 0;
  background: var(--secondary-color);
  border: 0;
  width: 6rem;
  text-align: center;
  color: var(--white-color);
  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;
}

.predictive__search--button:hover {
  background: var(--primary-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(--primary-color);
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.predictive__search--close__btn > * {
  pointer-events: none;
}

.header__bottom {
  -webkit-box-shadow: 0 3px 8px rgba(71, 71, 71, 0.16);
          box-shadow: 0 3px 8px rgba(71, 71, 71, 0.16);
}

.header__menu--items {
  margin-right: 3rem;
  position: relative;
  padding: 2rem 0;
}

@media only screen and (min-width: 992px) {
  .header__menu--items {
    margin-right: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .header__menu--items {
    margin-right: 3.8rem;
    padding: 2.5rem 0;
  }
}

@media only screen and (min-width: 1366px) {
  .header__menu--items {
    margin-right: 4rem;
  }
}

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

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

.header__menu--items:hover .header__menu--link {
  color: var(--secondary-color);
}

.header__menu--items:hover .header__menu--link::before {
  width: 100%;
  left: 0;
  right: 0;
}

.header__menu--items:hover .header__sub--menu {
  visibility: visible;
  margin-top: 0;
  opacity: 1;
}

.header__menu--items:hover .header__mega--menu {
  visibility: visible;
  margin-top: 0;
  opacity: 1;
}

.header__menu--link {
  font-size: 1.6rem;
  line-height: 2.7rem;
  font-weight: 500;
  color: var(--text-gray-color);
  position: relative;
}

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

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

.header__sub--menu {
  position: absolute;
  z-index: 99;
  top: 100%;
  left: 0;
  visibility: hidden;
  width: 220px;
  margin: 0;
  margin-top: 20px;
  padding: 20px;
  list-style: none;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  opacity: 0;
  background-color: var(--white-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;
  padding: 10px 0;
}

.mega__menu--items {
  position: static;
}

.header__mega--menu {
  position: absolute;
  z-index: 99;
  top: 100%;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  margin: 0;
  margin-top: 20px;
  padding: 25px;
  list-style: none;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  visibility: hidden;
  opacity: 0;
  background-color: var(--white-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__mega--menu__li {
  padding: 3px 15px;
  width: 20%;
}

.header__mega--menu__li.fullscreen__style {
  width: 100%;
  margin-top: 1.8rem;
}

.header__mega--subtitle {
  font-weight: 600;
  font-size: 1.6rem;
  margin-bottom: 15px;
}

.header__mega--sub__menu--title {
  font-size: 1.5rem;
  padding: 8px 0;
}

.header__mega--menu__banner {
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  margin-right: 2.5rem;
}

.header__mega--menu__banner:last-child {
  margin-right: 0;
}

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

.header__mega--menu__banner:hover::before {
  opacity: 0.5;
}

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

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

.offCanvas__minicart {
  position: fixed;
  width: 310px;
  height: 100%;
  padding: 18px 15px 30px;
  background: var(--white-color);
  z-index: 999;
  right: 0;
  top: 0;
  -webkit-transition: 0.4s;
  transition: 0.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);
  visibility: hidden;
}

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

@media only screen and (min-width: 1600px) {
  .offCanvas__minicart {
    padding: 20px 15px 33px;
  }
}

.minicart__header--top {
  margin-bottom: 10px;
}

.minicart__header--desc {
  font-size: 1.6rem;
  color: var(--text-gray-color);
}

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

.minicart__title {
  font-weight: 600;
}

.minicart__close--btn {
  padding: 0;
  background: inherit;
  border: 0;
  line-height: 1.5rem;
  color: var(--black-color);
}

.minicart__close--btn:hover {
  color: var(--primary-color);
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

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

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

.minicart__product {
  margin-bottom: 17px;
}

.minicart__product--items {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color2);
}

@media only screen and (min-width: 1600px) {
  .minicart__product--items {
    margin-top: 22px;
    padding-top: 22px;
  }
}

.minicart__product--remove {
  border: 0;
  padding: 0;
  background: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-decoration: underline;
  font-weight: 700;
  opacity: 0.7;
}

.minicart__product--remove:hover {
  color: var(--secondary-color);
}

.minicart__thumbnail {
  width: 100px;
  line-height: 1;
}

@media only screen and (min-width: 480px) {
  .minicart__thumbnail {
    width: 120px;
  }
}

.minicart__thumbnail a {
  display: block;
}

.minicart__thumbnail a img {
  display: block;
}

.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.5rem;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 2px;
}

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

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

.minicart__price {
  margin-bottom: 9px;
}

.minicart__price .current__price {
  font-size: 1.5rem;
}

.minicart__price .old__price {
  font-size: 1.4rem;
}

.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-color2);
  margin: 0px;
  width: 3.3rem;
  height: 3rem;
  text-align: center;
  padding: 0;
  background: var(--gray-color2);
  cursor: pointer;
  font-size: 2rem;
  font-weight: 500;
}

.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-color2);
  border-bottom: 1px solid var(--border-color2);
  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-color2);
  border-bottom: 1px solid var(--border-color2);
}

.minicart__amount_list {
  margin-bottom: 10px;
}

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

.minicart__conditions {
  padding: 20px 0;
}

.minicart__conditions--input {
  vertical-align: middle;
}

.minicart__conditions--label {
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-gray-color);
}

.minicart__conditions--link {
  color: var(--secondary-color);
  text-decoration: underline;
}

.minicart__conditions--link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.minicart__button--link {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 4.5rem;
  height: 4.5rem;
  margin-right: 14px;
}

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

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

.main__logo--style2 {
  background: #2a2a2a;
  padding: 0 2rem;
  height: 7rem;
  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: 1200px) {
  .main__logo--style2 {
    padding: 0 3rem;
    height: 7.8rem;
  }
}

@media only screen and (min-width: 1366px) {
  .main__logo--style2 {
    padding: 0 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .main__logo--style2 {
    padding: 0 7rem;
    height: 8.8rem;
  }
}

@media only screen and (max-width: 991px) {
  .main__logo--style2 {
    margin-right: -50px;
  }
}

@media only screen and (max-width: 575px) {
  .main__logo--style2 {
    margin-right: 0;
    padding: 0 1.5rem;
    height: 6rem;
  }
}

.header__contact--text {
  color: var(--white-color);
  background: var(--secondary-color);
  padding: 0 1.5rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  height: 7rem;
  line-height: 7rem;
}

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

@media only screen and (min-width: 1200px) {
  .header__contact--text {
    padding: 0 2.5rem;
    font-size: 1.6rem;
    height: 7.8rem;
    line-height: 7.8rem;
  }
}

@media only screen and (min-width: 1366px) {
  .header__contact--text {
    padding: 0 3rem;
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .header__contact--text {
    padding: 0 5rem;
    height: 8.8rem;
  }
}

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

.search__open--btn.style2 {
  width: 3.5rem;
  height: 3.5rem;
  background: #e0e0e0;
  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: 50%;
}

.minicart__open--btn.style2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.minicart__open--btn__style2 {
  width: 3.5rem;
  height: 3.5rem;
  background: #e0e0e0;
  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: 50%;
}

.minicart__items--count2 {
  left: 25px;
}

.minicart__open--price__count {
  font-size: 1.8rem;
  font-weight: 500;
  color: #767676;
  margin-left: 1.4rem;
}

@media only screen and (max-width: 1199px) {
  .minicart__open--price__count {
    display: none;
  }
}

.header__menu--items.style2 {
  margin-right: 2rem;
}

@media only screen and (min-width: 992px) {
  .header__menu--items.style2 {
    margin-right: 2.3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .header__menu--items.style2 {
    margin-right: 3rem;
  }
}

@media only screen and (min-width: 1366px) {
  .header__menu--items.style2 {
    margin-right: 4rem;
  }
}

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

.header__menu--link.style2 {
  font-size: 1.5rem;
}

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

@media only screen and (min-width: 1366px) {
  .header__menu--link.style2 {
    font-size: 1.8rem;
  }
}

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

@media only screen and (max-width: 479px) {
  .header__contact--info.style3 .header__contact--info__list {
    margin-right: 0;
    margin-bottom: 1.5rem;
  }
  .header__contact--info.style3 .header__contact--info__list:last-child {
    margin-bottom: 0;
  }
}

.header__social {
  margin-left: 3rem;
}

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

.header__social--list {
  margin-right: 1.5rem;
}

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

.header__social--list__icon {
  color: var(--white-color);
}

.header__social--list__icon:hover {
  color: var(--primary-color);
}

/*
    3. Slider CSS
*/
.slider__section--bg {
  background: url(../img/slider/home1-slider-bg.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

.hero__slider--items {
  position: relative;
  padding: 5rem 0;
}

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

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

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

.hero__slider--thumbnail__img {
  margin: 0 auto 2.5rem;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

@media only screen and (min-width: 768px) {
  .hero__slider--thumbnail__img {
    margin: 0 auto 4rem;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .hero__slider--thumbnail__img {
    max-width: 730px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__slider--thumbnail__img {
    max-width: 540px;
    margin: 0 auto 3rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__slider--thumbnail__img {
    max-width: 480px;
    margin: 0 auto 2.5rem;
  }
}

@media only screen and (max-width: 767px) {
  .hero__slider--thumbnail__img {
    max-width: 360px;
  }
}

@media only screen and (max-width: 479px) {
  .hero__slider--thumbnail__img {
    max-width: 100%;
    padding: 0 20px;
  }
}

.slider__content--maintitle {
  margin-bottom: 1.4rem;
}

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

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

.slider__content--desc {
  font-size: 1.5rem;
  line-height: 2.6rem;
  width: 88%;
  margin: 0 auto 1.5rem;
}

@media only screen and (min-width: 576px) {
  .slider__content--desc {
    font-size: 1.6rem;
    margin: 0 auto 1.8rem;
  }
}

@media only screen and (min-width: 768px) {
  .slider__content--desc {
    font-size: 1.6rem;
    line-height: 2.8rem;
    margin: 0 auto 2.2rem;
  }
}

@media only screen and (min-width: 992px) {
  .slider__content--desc {
    font-size: 1.7rem;
    line-height: 2.8rem;
    width: 70%;
    margin: 0 auto 3rem;
  }
}

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

@media only screen and (min-width: 1600px) {
  .slider__content--desc {
    font-size: 2rem;
    line-height: 3rem;
  }
}

.slider__play--bideo {
  margin-left: 2rem;
}

@media only screen and (min-width: 768px) {
  .slider__play--bideo {
    margin-left: 3.5rem;
  }
}

.bideo__play--icon {
  width: 4.5rem;
  height: 4.5rem;
  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: 50%;
  color: var(--secondary-color);
  background: var(--white-color);
  border: 3px solid var(--secondary-color);
  position: relative;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-animation: animate 2s linear infinite;
          animation: animate 2s linear infinite;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.bideo__play--icon:hover {
  background: var(--secondary-color);
  color: var(--white-color);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

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

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

@media only screen and (max-width: 767px) {
  .bideo__play--icon svg {
    width: 3.5rem;
  }
}

@-webkit-keyframes animate {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(215, 35, 35, 0.7);
            box-shadow: 0 0 0 0 rgba(215, 35, 35, 0.7);
  }
  40% {
    -webkit-box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
            box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
  }
  80% {
    -webkit-box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
            box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 rgba(255, 193, 7, 0);
            box-shadow: 0 0 0 rgba(255, 193, 7, 0);
  }
}

@keyframes animate {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(215, 35, 35, 0.7);
            box-shadow: 0 0 0 0 rgba(215, 35, 35, 0.7);
  }
  40% {
    -webkit-box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
            box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
  }
  80% {
    -webkit-box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
            box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 rgba(255, 193, 7, 0);
            box-shadow: 0 0 0 rgba(255, 193, 7, 0);
  }
}

.hero__slider--activation .swiper-button-prev {
  left: 1rem;
}

@media only screen and (min-width: 768px) {
  .hero__slider--activation .swiper-button-prev {
    left: 1rem;
  }
}

@media only screen and (min-width: 992px) {
  .hero__slider--activation .swiper-button-prev {
    left: 2rem;
  }
}

.hero__slider--activation .swiper-button-next {
  right: 1rem;
}

@media only screen and (min-width: 768px) {
  .hero__slider--activation .swiper-button-next {
    right: 1rem;
  }
}

@media only screen and (min-width: 992px) {
  .hero__slider--activation .swiper-button-next {
    right: 2rem;
  }
}

.slider__pagination.swiper-pagination {
  position: absolute;
  top: 50%;
  bottom: auto !important;
  width: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  left: 20px;
}

@media only screen and (min-width: 1200px) {
  .slider__pagination.swiper-pagination {
    left: 30px;
  }
}

@media only screen and (min-width: 1366px) {
  .slider__pagination.swiper-pagination {
    left: 80px;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__pagination.swiper-pagination {
    left: 120px;
  }
}

@media only screen and (max-width: 767px) {
  .slider__pagination.swiper-pagination {
    left: inherit;
    position: inherit;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    bottom: 23px !important;
    -webkit-transform: inherit;
            transform: inherit;
  }
}

@media only screen and (max-width: 767px) {
  .slider__pagination.swiper-pagination .swiper-pagination-bullet {
    width: 1.8rem;
    height: 1.8rem;
    margin: 0 0.3rem !important;
  }
}

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

.swiper-slide-active .hero__slider--thumbnail__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;
}

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

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

.swiper-slide-active .slider__content--btn {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.swiper-slide-active .slider__content--footer {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.home2__slider--items__bg {
  height: 300px;
  padding: 30px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.home2__slider--items__bg.one {
  background: url(../img/slider/home2-slider-bg.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

@media only screen and (max-width: 575px) {
  .home2__slider--items__bg.one {
    background-position: 20%;
  }
}

@media only screen and (max-width: 450px) {
  .home2__slider--items__bg.one {
    background-position: 33%;
  }
}

.home2__slider--items__bg.two {
  background: url(../img/slider/home2-slider-bg2.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

@media only screen and (max-width: 575px) {
  .home2__slider--items__bg.two {
    background-position: 20%;
  }
}

@media only screen and (max-width: 450px) {
  .home2__slider--items__bg.two {
    background-position: 33%;
  }
}

.home2__slider--items__bg.three {
  background: url(../img/slider/home2-slider-bg3.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

@media only screen and (max-width: 575px) {
  .home2__slider--items__bg.three {
    background-position: 20%;
  }
}

@media only screen and (max-width: 450px) {
  .home2__slider--items__bg.three {
    background-position: 33%;
  }
}

.home2__slider--items__bg.four {
  background: url(../img/slider/home2-slider-bg4.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

@media only screen and (max-width: 575px) {
  .home2__slider--items__bg.four {
    background-position: 20%;
  }
}

@media only screen and (max-width: 450px) {
  .home2__slider--items__bg.four {
    background-position: 33%;
  }
}

@media only screen and (min-width: 450px) {
  .home2__slider--items__bg {
    height: 320px;
  }
}

@media only screen and (min-width: 576px) {
  .home2__slider--items__bg {
    height: 400px;
  }
}

@media only screen and (min-width: 768px) {
  .home2__slider--items__bg {
    height: 430px;
  }
}

@media only screen and (min-width: 992px) {
  .home2__slider--items__bg {
    height: 530px;
  }
}

@media only screen and (min-width: 1200px) {
  .home2__slider--items__bg {
    height: 550px;
  }
}

@media only screen and (min-width: 1366px) {
  .home2__slider--items__bg {
    height: 570px;
  }
}

@media only screen and (min-width: 1600px) {
  .home2__slider--items__bg {
    height: 800px;
  }
}

@media only screen and (min-width: 768px) {
  .slider__content.style2 {
    margin-left: 4.5rem;
  }
}

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

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

@media only screen and (min-width: 1366px) {
  .slider__content.style2 {
    margin-left: 0;
  }
}

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

.slider__content--desc.style2 {
  margin: 0 0 2rem;
  width: 66%;
}

@media only screen and (min-width: 768px) {
  .slider__content--desc.style2 {
    width: 58%;
  }
}

@media only screen and (min-width: 992px) {
  .slider__content--desc.style2 {
    margin: 0 0 3rem;
    width: 55%;
  }
}

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

@media only screen and (min-width: 1366px) {
  .slider__pagination.style2.swiper-pagination {
    left: 20px;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__pagination.style2.swiper-pagination {
    left: 100px;
  }
}

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

.slider__section--bg3 {
  background: url(../img/slider/home3-slider-bg.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  height: 320px;
  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: 768px) {
  .slider__section--bg3 {
    height: 400px;
  }
}

@media only screen and (min-width: 992px) {
  .slider__section--bg3 {
    height: 470px;
  }
}

@media only screen and (min-width: 1200px) {
  .slider__section--bg3 {
    height: 500px;
  }
}

@media only screen and (min-width: 1366px) {
  .slider__section--bg3 {
    height: 530px;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__section--bg3 {
    height: 710px;
  }
}

@media only screen and (max-width: 991px) {
  .slider__section--bg3 {
    background-position: 15%;
  }
}

@media only screen and (max-width: 575px) {
  .slider__section--bg3 {
    background-position: 5%;
  }
}

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

.slider__content--desc.style3 {
  margin: 0 auto 1.5rem;
  width: 100%;
}

@media only screen and (min-width: 576px) {
  .slider__content--desc.style3 {
    margin: 0 auto 2rem;
    width: 90%;
  }
}

@media only screen and (min-width: 768px) {
  .slider__content--desc.style3 {
    margin: 0 0 2rem;
    width: 84%;
  }
}

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

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

.slider__section--bg4 {
  background: url(../img/slider/home4-slider-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

.hero__slider--items.style4 {
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
}

@media only screen and (min-width: 768px) {
  .hero__slider--items.style4 {
    height: 455px;
  }
}

@media only screen and (min-width: 992px) {
  .hero__slider--items.style4 {
    height: 530px;
  }
}

@media only screen and (min-width: 1200px) {
  .hero__slider--items.style4 {
    height: 600px;
  }
}

@media only screen and (min-width: 1366px) {
  .hero__slider--items.style4 {
    height: 650px;
  }
}

@media only screen and (min-width: 1600px) {
  .hero__slider--items.style4 {
    height: 900px;
  }
}

@media only screen and (max-width: 767px) {
  .hero__slider--items.style4 {
    padding: 5rem 0 5.5rem;
  }
}

.hero__slider--thumbnail__img.style4 {
  max-width: 200px;
}

@media only screen and (min-width: 768px) {
  .hero__slider--thumbnail__img.style4 {
    margin: inherit;
    max-width: 275px;
  }
}

@media only screen and (min-width: 992px) {
  .hero__slider--thumbnail__img.style4 {
    max-width: 320px;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 1200px) {
  .hero__slider--thumbnail__img.style4 {
    max-width: 350px;
  }
}

@media only screen and (min-width: 1366px) {
  .hero__slider--thumbnail__img.style4 {
    max-width: 380px;
  }
}

@media only screen and (min-width: 1600px) {
  .hero__slider--thumbnail__img.style4 {
    max-width: 480px;
  }
}

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

.slider__content--desc.style4 {
  width: 100%;
  margin: 0 0 2rem;
}

@media only screen and (min-width: 992px) {
  .slider__content--desc.style4 {
    width: 90%;
    margin: 0 0 3rem;
  }
}

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

.slider__pagination.style4.swiper-pagination {
  left: auto;
  right: 20px;
}

@media only screen and (min-width: 1200px) {
  .slider__pagination.style4.swiper-pagination {
    right: 30px;
  }
}

@media only screen and (min-width: 1366px) {
  .slider__pagination.style4.swiper-pagination {
    right: 60px;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__pagination.style4.swiper-pagination {
    right: 100px;
  }
}

@media only screen and (max-width: 767px) {
  .slider__pagination.style4.swiper-pagination {
    left: inherit;
    right: inherit;
    bottom: 23px !important;
  }
}

/*
    8. Services CSS
*/
.services__section--bg {
  background: url(../img/other/bg-shape1.webp);
}

.services__card {
  -webkit-box-shadow: 0 0 38px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 38px rgba(0, 0, 0, 0.05);
  position: relative;
  background: var(--white-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.services__card::after {
  position: absolute;
  content: "";
  background: url(../img/icon/services-card-shape.webp);
  width: 46px;
  height: 70px;
  right: 0;
  top: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

@media only screen and (min-width: 768px) {
  .services__card::after {
    width: 82px;
    height: 81px;
  }
}

.services__card::before {
  position: absolute;
  content: "";
  background: var(--secondary-color);
  top: 1rem;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.services__card:hover {
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.16);
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.16);
}

.services__card:hover::before {
  opacity: 0.8;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.services__card:hover .services__card--primary__icon {
  opacity: 0;
  visibility: hidden;
}

.services__card:hover .services__card--secondary__icon {
  opacity: 1;
  visibility: visible;
}

.services__card:hover .services__card--maintitle {
  color: var(--white-color);
}

.services__card:hover .services__card--desc {
  color: var(--white-color);
}

.services__card:hover .services__card--readmore {
  color: var(--white-color);
}

.services__card:hover .services__card--number {
  opacity: 1;
  visibility: visible;
}

.services__card--link {
  padding: 2rem;
  position: relative;
  z-index: 9;
}

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

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

@media only screen and (min-width: 1200px) {
  .services__card--link {
    padding: 4rem;
  }
}

.services__card--icon {
  position: relative;
  display: inline-block;
}

@media only screen and (max-width: 575px) {
  .services__card--icon img {
    max-width: 70px;
  }
}

@media only screen and (max-width: 479px) {
  .services__card--icon img {
    max-width: 56px;
  }
}

.services__card--secondary__icon {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}

.services__card--number {
  width: 5.3rem;
  height: 5.3rem;
  border: 1px solid var(--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;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

@media only screen and (max-width: 575px) {
  .services__card--number {
    width: 4.6rem;
    height: 4.6rem;
  }
}

.services__card--number__text {
  width: 4.5rem;
  height: 4.5rem;
  background-color: var(--white-color);
  color: var(--secondary-color);
  font-size: 2.6rem;
  font-weight: 500;
  border-radius: 50%;
  line-height: 4.5rem;
  text-align: center;
}

@media only screen and (max-width: 575px) {
  .services__card--number__text {
    width: 3.6rem;
    height: 3.6rem;
    line-height: 3.6rem;
    font-size: 2rem;
  }
}

.services__card--maintitle {
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.services__card--desc {
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.services__card--readmore {
  font-size: 1.6rem;
  font-weight: 500;
}

.services__card--readmore__svg {
  vertical-align: middle;
  margin-left: 0.3rem;
}

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

/*
    7. Project CSS
*/
.swiper:hover .swiper__nav--btn {
  opacity: 1;
  visibility: visible;
}

.project__section--bg {
  background: url(../img/other/bg-shape2.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

.project__card {
  background: var(--white-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.project__card:hover {
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px);
}

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

.project__card:hover .project__card--thumbnail::before {
  opacity: 0.47;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

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

.project__card--thumbnail::before {
  position: absolute;
  content: "";
  background: var(--secondary-color);
  left: 1rem;
  right: 1rem;
  top: 1rem;
  bottom: 1rem;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: 9;
}

.project__card--content {
  -webkit-box-shadow: 0 0 36px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 36px rgba(0, 0, 0, 0.05);
  padding: 2rem 1.2rem;
}

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

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

.project__card--content__title {
  margin-bottom: 0.3rem;
}

.project__card--content__subtitle {
  color: var(--secondary-color);
}

@media only screen and (max-width: 479px) {
  .project__card--content__subtitle {
    font-size: 1.3rem;
  }
}

@media only screen and (max-width: 575px) {
  .project__card--content {
    -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: 350px) {
  .project__card--content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.project__card--btn {
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid var(--secondary-color);
  color: var(--secondary-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;
  border-radius: 50%;
}

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

@media only screen and (min-width: 922px) {
  .project__card--btn {
    width: 4rem;
    height: 4rem;
  }
}

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

@media only screen and (max-width: 575px) {
  .project__card--btn {
    margin-top: 0.8rem;
  }
}

@media only screen and (max-width: 350px) {
  .project__card--btn {
    margin-top: 0;
  }
}

@media only screen and (max-width: 575px) {
  .project__tab--btn {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

@media only screen and (max-width: 575px) {
  .project__tab--btn.mb-40 {
    margin-bottom: 2.5rem;
  }
}

.project__tab--btn__list {
  font-weight: 500;
  color: #232323;
  cursor: pointer;
  padding: 0 1.5rem;
  height: 3rem;
  line-height: 3rem;
  margin-right: 0.5rem;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.project__tab--btn__list:last-child {
  margin-right: 0;
}

.project__tab--btn__list.active {
  background: var(--secondary-color);
  color: var(--white-color);
}

.project__tab--btn__list:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}

@media only screen and (min-width: 768px) {
  .project__tab--btn__list {
    height: 3.3rem;
    line-height: 3.3rem;
    padding: 0 2.2rem;
    margin-right: 0.8rem;
  }
}

@media only screen and (max-width: 575px) {
  .project__tab--btn__list {
    padding: 0 1.2rem;
    margin: 0 0.4rem 0.5rem;
  }
}

/*
    6. Product CSS
*/
@media only screen and (max-width: 991px) {
  .featured__product--list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

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

@media only screen and (max-width: 991px) {
  .featured__product--list .featured__product--card {
    margin-bottom: 3rem;
    margin-right: 2rem;
  }
  .featured__product--list .featured__product--card:last-child {
    margin-right: 0;
  }
}

@media only screen and (max-width: 419px) {
  .featured__product--list .featured__product--card {
    margin-right: 0;
  }
}

.featured__product--card {
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 1.5rem 1rem;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

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

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

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

@media only screen and (min-width: 1366px) {
  .featured__product--card {
    padding: 4rem 3rem;
  }
}

.featured__product--card:hover {
  border: 1px dashed var(--secondary-color);
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px);
}

.featured__product--card:hover .featured__product--card__icon {
  background: var(--primary-color);
}

.featured__product--card__icon {
  background: var(--secondary-color);
  color: var(--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;
  border-radius: 50%;
  margin: 0 auto 1.2rem;
  width: 5.5rem;
  height: 5.5rem;
}

@media only screen and (min-width: 992px) {
  .featured__product--card__icon {
    margin: 0 auto 2rem;
    width: 6rem;
    height: 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .featured__product--card__icon {
    margin: 0 auto 2.3rem;
  }
}

.featured__product--card__title {
  margin-bottom: 1rem;
}

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

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

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

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .featured__product--thumbnail__img {
    max-width: 233px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .featured__product--thumbnail__img {
    max-width: 240px;
  }
}

.current__price {
  font-size: 1.5rem;
  color: var(--secondary-color);
  font-weight: 500;
}

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

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

.current__price.style2 {
  font-size: 1.6rem;
}

.old__price {
  font-size: 1.4rem;
  color: var(--light-color);
  text-decoration: line-through;
  margin-left: 0.4rem;
  font-weight: 500;
}

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

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

.old__price.style2 {
  font-size: 1.4rem;
}

.price__divided {
  width: 1.2rem;
  height: 0.1rem;
  background: var(--light-color);
  vertical-align: middle;
  margin: 0 0.3rem;
}

.product__rating {
  margin-bottom: 1.6rem;
}

.rating__list {
  margin-right: 0.4rem;
}

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

.rating__list--icon {
  color: var(--yellow-color);
}

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

.product__card:hover .product__secondary--img {
  opacity: 1;
  visibility: visible;
}
/*
.product__card:hover .product__primary--img {
  opacity: 0;
  visibility: hidden;
}
*/
.product__card:hover .swiper__nav--btn {
  opacity: 1;
  visibility: visible;
}

.product__card:hover .product__card--action {
  opacity: 1;
  visibility: visible;
  bottom: 18px;
}

@media only screen and (min-width: 576px) {
  .product__card:hover .product__card--action {
    bottom: 22px;
  }
}

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

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

.product__card--content {
  padding: 1.5rem 1rem 2.2rem;
  -webkit-box-shadow: 0 0 36px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 36px rgba(0, 0, 0, 0.05);
}

@media only screen and (min-width: 480px) {
  .product__card--content {
    padding: 1.7rem 1.5rem 2.5rem;
  }
}

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

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

.product__card--meta__tag {
  color: var(--secondary-color);
  margin-bottom: 0.3rem;
}

@media only screen and (max-width: 479px) {
  .product__card--meta__tag {
    font-size: 1.3rem;
    line-height: 2rem;
  }
}

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

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

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

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

@media only screen and (max-width: 991px) {
  .product__card--btn {
    font-size: 1.4rem;
    height: 3.6rem;
    line-height: 3.6rem;
  }
}

@media only screen and (max-width: 479px) {
  .product__card--btn {
    font-size: 1.3rem;
    height: 3.2rem;
    line-height: 3.2rem;
    padding: 0 1.2rem;
  }
}

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

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

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

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

.product__card--action {
  position: absolute;
  bottom: 5px;
  left: 50%;
  -webkit-transform: translatex(-50%);
          transform: translatex(-50%);
  opacity: 0;
  visibility: visible;
  z-index: 9;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background: var(--white-color);
  padding: 4px 10px;
  border-radius: 22px;
}

@media only screen and (min-width: 400px) {
  .product__card--action {
    bottom: 8px;
    padding: 5px 10px;
  }
}

@media only screen and (min-width: 576px) {
  .product__card--action {
    bottom: 12px;
  }
}

.product__card--action__list {
  margin-right: 0.7rem;
}

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

.product__card--action__btn {
  width: 2.8rem;
  height: 2.8rem;
  color: var(--secondary-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;
  border-radius: 50%;
}

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

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

.product__card--action__btn svg {
  width: 2.8rem;
}
/*
.product__secondary--img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
*/
.deals__section--bg {
  background: url(../img/banner/banner-bg3.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

@media only screen and (max-width: 767px) {
  .deals__section--bg {
    background-position: 20%;
  }
}

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

.deals__countdown .countdown__item {
  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;
  border: 1px solid var(--white-color);
  text-align: center;
  padding: 0.6rem 0;
  margin-right: 1rem;
  width: 60px;
}

.deals__countdown .countdown__item:last-child {
  margin-right: 0;
}

@media only screen and (min-width: 768px) {
  .deals__countdown .countdown__item {
    padding: 0.8rem 0;
    margin-right: 1.2rem;
    width: 72px;
  }
}

@media only screen and (min-width: 992px) {
  .deals__countdown .countdown__item {
    padding: 1rem 0;
    margin-right: 1.5rem;
    width: 80px;
  }
}

@media only screen and (min-width: 1200px) {
  .deals__countdown .countdown__item {
    padding: 1.5rem 0;
    margin-right: 1.8rem;
    width: 90px;
  }
}

@media only screen and (min-width: 1366px) {
  .deals__countdown .countdown__item {
    padding: 1.8rem 0;
    margin-right: 2rem;
    width: 100px;
  }
}

.deals__countdown .countdown__text {
  font-weight: 500;
  color: var(--white-color);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  font-size: 1.2rem;
  line-height: 2rem;
}

@media only screen and (min-width: 768px) {
  .deals__countdown .countdown__text {
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
    line-height: 2.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .deals__countdown .countdown__text {
    margin-bottom: 0.7rem;
    font-size: 1.5rem;
    line-height: 2.2rem;
  }
}

@media only screen and (min-width: 1366px) {
  .deals__countdown .countdown__text {
    font-size: 1.6rem;
    line-height: 2.6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .deals__countdown .countdown__text {
    font-size: 1.7rem;
  }
}

.deals__countdown .countdown__number {
  font-size: 1.7rem;
  line-height: 2rem;
  color: var(--white-color);
  font-weight: 500;
}

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

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

@media only screen and (min-width: 1200px) {
  .deals__countdown .countdown__number {
    font-size: 2.8rem;
    line-height: 2.6rem;
  }
}

@media only screen and (min-width: 1366px) {
  .deals__countdown .countdown__number {
    font-size: 3.2rem;
    line-height: 2.8rem;
  }
}

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

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

@media only screen and (min-width: 1600px) {
  .deals__content--desc {
    line-height: 2.8rem;
  }
}

.deals__content--price .old__price {
  font-size: 1.6rem;
  color: var(--white-color);
  margin-left: 0;
}

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

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

.deals__content--price .current__price {
  font-size: 1.8rem;
  color: var(--white-color);
}

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

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

.deals__content--price .price__divided {
  height: 0.3rem;
  margin: 0 0.5rem;
  background: var(--white-color);
}

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

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

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

@media only screen and (max-width: 767px) {
  .deals__thumbnail--style3 {
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 0 3rem;
  }
}

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

/*
   4. Banner CSS
*/
.banner__section--bg {
  background: url(../img/banner/banner-bg1.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  position: relative;
}

.banner__section--bg::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #2A2A2A;
  opacity: 0.6;
  left: 0;
  bottom: 0;
}

@media only screen and (max-width: 479px) {
  .banner__video--play.mb-35 {
    margin-bottom: 2rem;
  }
}

.banner__video--play__icon {
  margin: 0 auto;
  background: inherit;
  color: var(--white-color);
  border: 3px solid var(--white-color);
  width: 5.5rem;
  height: 5.5rem;
}

@media only screen and (min-width: 992px) {
  .banner__video--play__icon {
    width: 6rem;
    height: 6rem;
  }
}

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

.banner__video--content {
  z-index: 9;
}

@media only screen and (max-width: 479px) {
  .banner__video--title {
    font-size: 1.9rem;
    line-height: 2.7rem;
  }
}

.banner__video--info {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1.8rem;
}

@media only screen and (min-width: 576px) {
  .banner__video--info {
    font-size: 1.6rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__video--info {
    font-size: 1.8rem;
    margin-bottom: 2.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__video--info {
    font-size: 2.2rem;
    margin-bottom: 3.8rem;
  }
}

.drone__position--img {
  position: absolute;
  bottom: -112px;
  right: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .drone__position--img {
    max-width: 410px;
    bottom: -66px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .drone__position--img {
    max-width: 320px;
    bottom: -66px;
  }
}

@media only screen and (max-width: 991px) {
  .drone__position--img {
    position: inherit;
    bottom: inherit;
    right: inherit;
    max-width: 350px;
    margin: 0 auto 3rem;
  }
}

@media only screen and (max-width: 575px) {
  .drone__position--img {
    max-width: 100%;
    padding: 0 3rem;
    margin: 0 auto 2.5rem;
  }
}

@media only screen and (max-width: 479px) {
  .drone__position--img {
    padding: 0 2rem;
  }
}

.display__banner--bg {
  background: url(../img/banner/banner-bg7.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  padding: 6rem 0;
  position: relative;
}

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

@media only screen and (min-width: 992px) {
  .display__banner--bg {
    padding: 8rem 0;
  }
}

@media only screen and (min-width: 1200px) {
  .display__banner--bg {
    padding: 9rem 0;
  }
}

.display__banner--bg::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #F2F2F2;
  left: 0;
  top: 0;
  opacity: 0.59;
}

.display__banner--content {
  background: rgba(255, 255, 255, 0.65);
  width: 90%;
  padding: 3rem 2rem;
  margin: 0 auto;
  position: relative;
  z-index: 9;
  border-radius: 10px;
}

@media only screen and (min-width: 768px) {
  .display__banner--content {
    width: 80%;
    padding: 4rem 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .display__banner--content {
    width: 68%;
    padding: 7rem 3rem;
  }
}

.display__banner--content__title {
  margin-bottom: 1.2rem;
}

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

.display__banner--content__desc {
  width: 100%;
  margin: 0 auto 1.8rem;
}

@media only screen and (min-width: 576px) {
  .display__banner--content__desc {
    width: 90%;
    margin: 0 auto 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .display__banner--content__desc {
    width: 80%;
    margin: 0 auto 2.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .display__banner--content__desc {
    width: 60%;
  }
}

/*
   11. Team css
*/
.team__card {
  -webkit-box-shadow: 0 0 36px rgba(0, 0, 0, 0.16);
          box-shadow: 0 0 36px rgba(0, 0, 0, 0.16);
}

.team__card:hover .team__card--thumbnail::before {
  opacity: 0.6;
}

.team__card:hover .team__card--thumbnail img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

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

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

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

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

.team__card--content {
  padding: 2rem 2.2rem;
}

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

.team__card--content__info {
  margin-top: 1.5rem;
}

.team__card--content__info--list {
  color: var(--text-gray-color);
  line-height: 2.6rem;
  margin-bottom: 0.5rem;
}

.team__card--content__info--list:last-child {
  margin-bottom: 0;
}

.team__card--content__info--icon {
  color: var(--secondary-color);
  margin-right: 0.3rem;
}

.team__section--bg {
  background: #F9F9FB;
}

/*
   10. Counterup css
*/
.single__counterup {
  -webkit-box-shadow: 0 0 36px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 36px rgba(0, 0, 0, 0.05);
  text-align: center;
  border: 2px solid transparent;
  padding: 1.6rem 0.6rem;
  border-radius: 4px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

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

@media only screen and (min-width: 400px) {
  .single__counterup {
    padding: 2rem 1rem;
  }
}

@media only screen and (min-width: 480px) {
  .single__counterup {
    padding: 2.5rem 1.2rem;
  }
}

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

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

.counterup__icon {
  margin-bottom: 0.2rem;
}

@media only screen and (min-width: 400px) {
  .counterup__icon {
    margin-bottom: 0.5rem;
  }
}

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

@media only screen and (max-width: 991px) {
  .counterup__icon svg {
    width: 50px;
  }
}

@media only screen and (max-width: 479px) {
  .counterup__icon svg {
    width: 42px;
  }
}

.counterup__title {
  margin-bottom: 1.2rem;
}

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

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

@media only screen and (max-width: 479px) {
  .counterup__title {
    font-size: 1.5rem;
    line-height: 2.2rem;
    margin-bottom: 1rem;
  }
}

.counterup__number {
  font-size: 2.4rem;
  line-height: 3rem;
  font-weight: 600;
  color: var(--secondary-color);
}

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

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

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

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

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

/*
   12. Blog css
*/
.blog__section--bg {
  background: #F9F9FB;
}

.blog__card {
  background: var(--white-color);
}

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

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

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

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

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

.blog__card--content {
  text-align: center;
  padding: 0.2rem 1.2rem 2.5rem;
}

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

@media only screen and (min-width: 1200px) {
  .blog__card--content {
    padding: 0.5rem 2.8rem 3.5rem;
  }
}

.blog__card--content.padding__style2 {
  padding: 0.2rem 1.2rem 0;
}

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

@media only screen and (min-width: 1200px) {
  .blog__card--content.padding__style2 {
    padding: 0.5rem 2.8rem 0;
  }
}

.blog__card--meta {
  -webkit-box-shadow: 0 0 57px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 57px rgba(0, 0, 0, 0.05);
  padding: 1.2rem 0.7rem;
  position: relative;
  background: var(--white-color);
  top: -15px;
  border-radius: 4px;
  z-index: 9;
}

.blog__card--meta__text {
  color: var(--text-gray-color);
  margin-right: 0.6rem;
  font-size: 1.2rem;
}

.blog__card--meta__text.text__secondary {
  color: var(--secondary-color);
}

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

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

@media only screen and (min-width: 1200px) {
  .blog__card--meta__text {
    font-size: 1.6rem;
  }
}

.blog__card--meta:last-child {
  margin-right: 0;
}

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

@media only screen and (min-width: 1200px) {
  .blog__card--meta {
    padding: 2rem 2.5rem;
    top: -25px;
  }
}

.blog__card--title {
  margin-bottom: 1.7rem;
}

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

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

.blog__card--btn {
  background: var(--white-color);
  border: 1px solid #DDDDDD;
  color: var(--text-gray-color);
  line-height: 3.8rem;
  height: 4rem;
  padding: 0 2rem;
}

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

@media only screen and (min-width: 768px) {
  .blog__card--btn {
    line-height: 4.3rem;
    height: 4.5rem;
    padding: 0 3rem;
  }
}

@media only screen and (min-width: 992px) {
  .blog__card--btn {
    line-height: 4.8rem;
    height: 5rem;
    padding: 0 3.5rem;
  }
}

.blog__card--content.style3 {
  padding: 0.2rem 1.2rem 0;
}

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

@media only screen and (min-width: 1600px) {
  .blog__card--content.style3 {
    padding: 0.5rem 2.8rem 0;
  }
}

.blog__card--meta.style3 {
  padding: 1.2rem 0.7rem;
}

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

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

.blog__card--page--content {
  padding: 0.2rem 1.2rem 0;
}

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

@media only screen and (min-width: 1200px) {
  .blog__card--page--content {
    padding: 0.5rem 2.8rem 0;
  }
}

.blog__card--content.blog__content--style {
  padding: 0.2rem 1.2rem 0;
}

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

@media only screen and (min-width: 1200px) {
  .blog__card--content.blog__content--style {
    padding: 0.5rem 1.3rem 0;
  }
}

@media only screen and (min-width: 1366px) {
  .blog__card--content.blog__content--style {
    padding: 0.5rem 2rem 0;
  }
}

@media only screen and (min-width: 1600px) {
  .blog__card--content.blog__content--style {
    padding: 0.5rem 2.8rem 0;
  }
}

@media only screen and (min-width: 1200px) {
  .blog__card--content.blog__content--style .blog__card--title {
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 1366px) {
  .blog__card--content.blog__content--style .blog__card--title {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .blog__card--content.blog__content--style .blog__card--meta {
    padding: 1.8rem 1rem;
    top: -18px;
  }
}

@media only screen and (min-width: 1366px) {
  .blog__card--content.blog__content--style .blog__card--meta {
    padding: 2rem 1.5rem;
    top: -24px;
  }
}

@media only screen and (min-width: 1600px) {
  .blog__card--content.blog__content--style .blog__card--meta {
    padding: 2rem 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .blog__card--content.blog__content--style .blog__card--meta__text {
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 1366px) {
  .blog__card--content.blog__content--style .blog__card--meta__text {
    font-size: 1.6rem;
  }
}

/*
   14. Testimonial Css
*/
.testimonial__inner {
  padding: 0.8rem;
}

.testimonial__card {
  -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, 0.07);
          box-shadow: 0 0 13px rgba(0, 0, 0, 0.07);
  padding: 2rem;
  border-radius: 0.5rem;
  position: relative;
}

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

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

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

.testimonial__card--thumbnail {
  margin-bottom: 1.5rem;
}

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

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

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

.testimonial__content--desc {
  font-style: italic;
  margin-bottom: 1rem;
}

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

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

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

.testimonial__icon {
  width: 6rem;
  height: 6rem;
  background: var(--secondary-color);
  color: var(--white-color);
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  border-radius: 5px 0 0;
}

.testimonial__icon--svg {
  position: absolute;
  left: 10px;
  top: 9px;
}

/*
   15. Newslette Css
*/
.newsletter__bg {
  background: url(../img/banner/banner-bg4.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  padding: 6rem 0;
  position: relative;
}

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

.newsletter__bg::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #24252A;
  left: 0;
  top: 0;
  opacity: 0.95;
}

@media only screen and (max-width: 767px) {
  .newsletter__content--title {
    margin-bottom: 2rem;
    text-align: center;
  }
}

.newsletter__subscribe--input {
  width: 100%;
  height: 4.3rem;
  border: 0;
  background: var(--white-color);
  padding: 0 12.5rem 0 2rem;
  border-radius: 2px;
  font-size: 1.4rem;
}

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

@media only screen and (max-width: 575px) {
  .newsletter__subscribe--input {
    padding: 0 12rem 0 1.2rem;
    font-size: 1.4rem;
  }
}

.newsletter__subscribe--input.style2 {
  height: 4.5rem;
  padding: 0 13.5rem 0 2rem;
}

@media only screen and (min-width: 768px) {
  .newsletter__subscribe--input.style2 {
    height: 4.5rem;
    padding: 0 13.5rem 0 2rem;
  }
}

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

.newsletter__subscribe--button {
  position: absolute;
  right: 0.5rem;
  top: 5px;
  height: 3.3rem;
  line-height: 3.3rem;
  font-size: 1.3rem;
  padding: 0 1rem;
}

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

.newsletter__subscribe--button__icon {
  vertical-align: middle;
  margin-left: 0.4rem;
}

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

.newsletter__subscribe--button.style2 {
  height: 3.6rem;
  text-transform: uppercase;
  font-size: 1.3rem;
  padding: 0 1.2rem;
  top: 4px;
}

@media only screen and (min-width: 992px) {
  .newsletter__subscribe--button.style2 {
    top: 5px;
    height: 4.5rem;
    font-size: 1.6rem;
    padding: 0 1.8rem;
  }
}

.newsletter__subscribe--form__style {
  width: 100%;
}

.footer__newsletter--desc {
  font-size: 1.4rem;
  color: var(--ofwhite-color);
}

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

@media only screen and (max-width: 1199px) {
  .footer__newsletter--input {
    padding: 0 1.4rem 0;
  }
}

@media only screen and (max-width: 1199px) {
  .footer__newsletter--button {
    position: inherit;
    top: inherit;
    right: inherit;
    margin-top: 1.5rem;
  }
}

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

.newsletter__bg2::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #24252A;
  left: 0;
  top: 0;
  opacity: 0.49;
}

.newsletter__content--title__style2 {
  margin-bottom: 2rem;
}

@media only screen and (min-width: 1200px) {
  .newsletter__content--title__style2 {
    font-size: 3.2rem;
    line-height: 4.2rem;
  }
}

.banner__video--play__icon.style4 {
  background: var(--white-color);
  border: 5px solid #c5c5c6;
  color: var(--secondary-color);
  margin-top: 1.5rem;
}

@media only screen and (min-width: 576px) {
  .banner__video--play__icon.style4 {
    margin-top: 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__video--play__icon.style4 {
    margin-top: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__video--play__icon.style4 {
    width: 7rem;
    height: 7rem;
  }
}

.banner__video--play__icon.style4:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}

/* 
    24. Instagram css 
*/
.instagram__thumbnail {
  overflow: hidden;
}

.instagram__thumbnail:hover .instagram__social--icon {
  -webkit-transform: translatey(-50%) translatex(-50%) scale(1);
          transform: translatey(-50%) translatex(-50%) scale(1);
}

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

.instagram__thumbnail:hover::before {
  opacity: 0.7;
}

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

.instagram__social--icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--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;
  border-radius: 50%;
  color: var(--secondary-color);
  -webkit-transform: translatey(-50%) translatex(-50%) scale(0);
          transform: translatey(-50%) translatex(-50%) scale(0);
  z-index: 9;
}

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

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

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

@media only screen and (max-width: 1199px) {
  .instagram__social--icon svg {
    width: 1.8rem;
  }
}

/*
   23. Footer Page Css
*/
.footer__bg {
  background: url(../img/other/footer-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

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

.main__footer {
  border-bottom: 1px solid #92918F;
  padding: 5.5rem 0 3.5rem;
}

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

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

.footer__social {
  margin-top: 2rem;
}

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

.social__shear--list {
  margin-right: 1.2rem;
}

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

@media only screen and (min-width: 575px) {
  .social__shear--list {
    margin-right: 1.6rem;
  }
}

.social__shear--list__icon {
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid #92918F;
  color: #92918F;
  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: 50%;
}

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

.footer__logo {
  margin-bottom: 1.5rem;
}

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

@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.4rem;
  color: var(--ofwhite-color);
  text-align:justify;
  -webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
}

@media only screen and (min-width: 768px) {
  .footer__widget--desc {
    font-size: 1.5rem;
	text-align:justify;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
  }
}

.footer__widget--title {
  margin-bottom: 2rem;
  font-weight: 600;
  position: relative;
  color: var(--white-color);
  font-size: 1.7rem;
  line-height: 2.2rem;
}

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

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

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

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

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

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

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

.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 {
  padding: 2.2rem 0;
}

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

.footer__bottom--desc {
  color: var(--ofwhite-color);
}

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

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

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

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

.footer__contact--map__frame {
  height: 182px;
  width: 100%;
}

.footer__contact--info__list {
  font-size: 1.4rem;
  color: var(--ofwhite-color);
  margin-bottom: 1rem;
}

.footer__contact--info__list:last-child {
  margin-bottom: 0;
}

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

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

.footer__social--list {
  margin-bottom: 1rem;
}

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

.footer__social--list__icon {
  font-size: 1.4rem;
  color: var(--ofwhite-color);
  line-height: 2.4rem;
}

@media only screen and (min-width: 768px) {
  .footer__social--list__icon {
    font-size: 1.5rem;
    line-height: 2.6rem;
  }
}

.footer__social--icon__svg {
  width: 3rem;
  vertical-align: middle;
}

/*
   16. Accordion Css
*/
@media only screen and (max-width: 767px) {
  .accordion__section--inner .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

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

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

.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--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(--secondary-color);
  color: var(--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;
}

/* 
    27. Portfolio css 
*/
.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;
}

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

.portfolio__items--thumbnail__link {
  overflow: hidden;
  display: block;
}

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

.portfolio__items--thumbnail:hover .portfolio__view--icon {
  -webkit-transform: translatey(-50%) translatex(-50%) scale(1);
          transform: translatey(-50%) translatex(-50%) scale(1);
}

.portfolio__items--thumbnail__img {
  -webkit-transition: .3s;
  transition: .3s;
  display: block;
}

.portfolio__view--icon {
  width: 4rem;
  height: 4rem;
  background: var(--white-color);
  color: var(--secondary-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;
  border-radius: 50%;
  z-index: 9;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translatey(-50%) translatex(-50%) scale(0);
          transform: translatey(-50%) translatex(-50%) scale(0);
}

.portfolio__view--icon svg {
  width: 2.7rem;
}

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

/*
   17. Breadcrumb Css
*/
.breadcrumb__bg {
  /*
  background: url(../img/banner/breadcrumb-bg.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 5%;
  background-size: cover;
  
  height: 180px;
  */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

@media only screen and (min-width: 480px) {
  .breadcrumb__bg {
    /*height: 200px;*/
  }
}

@media only screen and (min-width: 576px) {
  .breadcrumb__bg {
    background-position: center center;
  }
}

@media only screen and (min-width: 768px) {
  .breadcrumb__bg {
    /*height: 230px;*/
  }
}

@media only screen and (min-width: 992px) {
  .breadcrumb__bg {
    /*height: 250px;*/
  }
}

@media only screen and (min-width: 1200px) {
  .breadcrumb__bg {
    /*height: 300px;*/
  }
}

@media only screen and (min-width: 1600px) {
  .breadcrumb__bg {
    /*height: 400px;*/
  }
}

.breadcrumb__content {
  position: relative;
}

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

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

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

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

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

@media only screen and (min-width: 768px) {
  .breadcrumb__content--menu__items {
    font-size: 18px;
  }
}

.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: 10px;
  height: 2px;
  background: var(--secondary-color);
  right: -4px;
  top: 10px;
  /*
  top: 13%;
  -webkit-transform: translatey(-13%);
          transform: translatey(-13%);
	*/
}

/*
    5. About CSS
*/
.image__with--text__section {
  position: relative;
}

@media only screen and (min-width: 992px) {
  .image__with--text__thumbnail {
    padding-right: 2rem;
  }
}

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

@media only screen and (min-width: 1600px) {
  .image__with--text__thumbnail {
    padding-right: 4.5rem;
  }
}

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

.image__with--text__position--shape {
  position: absolute;
  top: 0;
  left: 3.5rem;
  z-index: -1;
}

@media only screen and (min-width: 1366px) and (max-width: 1599px) {
  .image__with--text__position--shape {
    max-width: 640px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .image__with--text__position--shape {
    max-width: 570px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .image__with--text__position--shape {
    max-width: 450px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .image__with--text__position--shape {
    max-width: 400px;
  }
}

@media only screen and (max-width: 767px) {
  .image__with--text__position--shape {
    width: auto;
    left: 0;
  }
}

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

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

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

.image__with--text__content--footer__desc {
  padding-left: 2rem;
}

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

@media only screen and (max-width: 767px) {
  .image__with--text__content--footer__desc {
    text-align: left;
  }
}

@media only screen and (max-width: 479px) {
  .image__with--text__content--footer__desc {
    padding-left: 0;
    padding-top: 2rem;
    text-align: center;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .image__with--text__content--footer img {
    max-height: 80px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .image__with--text__content--footer img {
    max-height: 50px;
    max-width: 90px;
  }
}

@media only screen and (max-width: 767px) {
  .image__with--text__content--footer img {
    max-width: 100px;
    max-height: 52px;
  }
}

@media only screen and (max-width: 479px) {
  .image__with--text__content--footer img {
    margin: 0 auto;
  }
}

.image__with--text__percent--list {
  padding-bottom: 1rem;
  position: relative;
  width: 75%;
}

@media only screen and (min-width: 768px) {
  .image__with--text__percent--list {
    padding-bottom: 1.2rem;
  }
}

@media only screen and (max-width: 767px) {
  .image__with--text__percent--list {
    width: 90%;
    margin: 0 auto 1.8rem;
  }
  .image__with--text__percent--list:last-child {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 479px) {
  .image__with--text__percent--list {
    width: 100%;
  }
}

.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--list.two::after {
  width: 77%;
}

.image__with--text__percent--content {
  font-size: 1.5rem;
  line-height: 2.4rem;
  font-weight: 500;
  color: var(--primary-color);
}

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

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

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

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

.about__content--desc.style2 {
  font-weight: 500;
}

.about__content--desc__list {
  color: var(--text-gray-color);
  line-height: 2.6rem;
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.5rem;
}

.about__content--desc__list:last-child {
  margin-bottom: 0;
}

.about__content--desc__list::before {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  background: var(--secondary-color);
  top: 8px;
  left: 0;
  border-radius: 50%;
}

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

.about__content--author__text {
  padding-left: 1.2rem;
}

@media only screen and (min-width: 480px) {
  .about__content--author__text {
    padding-left: 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .about__content--author__text {
    padding-left: 2.8rem;
  }
}

.about__content--author__name {
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin-bottom: 0.3rem;
}

@media only screen and (min-width: 992px) {
  .about__content--author__name {
    font-size: 1.7rem;
    line-height: 2.6rem;
  }
}

.about__content--author__rank {
  color: var(--text-gray-color);
  font-weight: 500;
}

.about__author--signature {
  margin-left: 1.5rem;
}

@media only screen and (min-width: 992px) {
  .about__author--signature {
    margin-left: 2.5rem;
  }
}

@media only screen and (max-width: 991px) {
  .about__author--signature {
    max-width: 85px;
  }
}

@media only screen and (max-width: 479px) {
  .about__author--signature {
    max-width: 82px;
    margin-left: 1.2rem;
  }
}

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

.image__with--text__section--bg {
  background: url(../img/banner/banner-bg6.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  position: relative;
}

.image__with--text__section--bg::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #2A2A2A;
  top: 0;
  left: 0;
  opacity: 0.81;
}

.image__with--text__thumbnail--style2 {
  position: relative;
  z-index: 9;
}

.image__with--text__thumbnail--img__style2 {
  margin: 0 auto;
}

.image__with--text__content--style2 {
  position: relative;
  z-index: 9;
}

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

@media only screen and (max-width: 767px) {
  .image__with--text__content--style2.style3 {
    text-align: left;
    margin-top: 0;
  }
}

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

@media only screen and (min-width: 1600px) {
  .image__with--text__title--style2 {
    font-size: 4rem;
    line-height: 5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .image__with--text__desc--style2 {
    width: 86%;
    line-height: 2.8rem;
  }
}

.image__with--text__content--price .old__price {
  font-size: 1.6rem;
  color: var(--white-color);
  margin-left: 0;
}

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

@media only screen and (min-width: 1200px) {
  .image__with--text__content--price .old__price {
    font-size: 2rem;
  }
}

.image__with--text__content--price .current__price {
  font-size: 1.8rem;
  color: var(--white-color);
}

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

@media only screen and (min-width: 1200px) {
  .image__with--text__content--price .current__price {
    font-size: 2.2rem;
  }
}

.image__with--text__content--price .price__divided {
  height: 0.3rem;
  margin: 0 0.5rem;
  background: var(--white-color);
}

.image__with--text__section--bg2 {
  background: url(../img/banner/banner-bg9.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 0%;
  background-size: cover;
  position: relative;
  height: 300px;
  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: 768px) {
  .image__with--text__section--bg2 {
    height: 350px;
    background-position: 10%;
  }
}

@media only screen and (min-width: 992px) {
  .image__with--text__section--bg2 {
    height: 410px;
    background-position: 0%;
  }
}

@media only screen and (min-width: 1200px) {
  .image__with--text__section--bg2 {
    height: 510px;
    background-position: center center;
  }
}

@media only screen and (min-width: 1600px) {
  .image__with--text__section--bg2 {
    height: 630px;
  }
}

@media only screen and (max-width: 575px) {
  .image__with--text__section--bg2 {
    background-size: auto;
  }
}

/* 
    30. Shop page css 
*/
.shop__header {
  padding: 1.5rem 2rem;
  border-radius: 0.5rem;
}

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

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

.product__view--mode__list {
  margin-right: 2rem;
}

.product__view--mode__list:last-child {
  margin-right: 0;
}

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

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

@media only screen and (min-width: 1366px) {
  .product__view--mode__list {
    margin-right: 3.5rem;
  }
}

@media only screen and (max-width: 991px) {
  .product__view--mode__list {
    margin-right: 0;
  }
}

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

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

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

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

.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(--white-color);
  font-size: 1.4rem;
}

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

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

.product__grid--column__buttons--icons {
  border: 1px solid var(--border-color);
  background: var(--white-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(--theme-color);
  border-color: var(--theme-color);
}

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

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

.product__showing--count {
  font-weight: 500;
  letter-spacing: 0.5px;
  font-size: 1.4rem;
}

@media only screen and (min-width: 992px) {
  .product__showing--count {
    font-size: 1.5rem;
    line-height: 2.6rem;
    margin-top: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .product__showing--count {
    line-height: 2.8rem;
    margin-left: 20px;
    margin-top: 0;
  }
}

@media only screen and (max-width: 479px) {
  .product__showing--count {
    text-align: center;
    width: 100%;
    margin-top: 1.2rem;
  }
}

.select {
  position: relative;
}

.select::before {
  border-bottom: 2px solid var(--black-color);
  border-right: 2px solid var(--black-color);
  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;
}

.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(--white-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);
}

@media only screen and (min-width: 1366px) {
  .offcanvas__filter--sidebar .small__product--title {
    font-size: 1.5rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

.single__widget {
  margin-bottom: 2.5rem;
}

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

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

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

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

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

.widget__search--form {
  position: relative;
}

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

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

.widget__search--form__btn {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  background: var(--secondary-color);
  color: var(--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(--primary-color);
}

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

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

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

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

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

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

.widget__categories--menu__text {
  padding-left: 1rem;
  font-size: 1.4rem;
}

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

.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: 1rem;
  line-height: 2.8rem;
  font-size: 1.4rem;
}

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

.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;
  font-size: 1.4rem;
}

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

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

.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(--white-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-color2);
  padding: 0.7rem 1rem;
}

.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--list {
  display: inline-block;
  margin: 0 7px 7px 0;
}

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

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

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

.small__product:hover .small__product--img {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}

.small__product--thumbnail {
  width: 7.5rem;
  overflow: hidden;
}

@media only screen and (min-width: 1366px) {
  .small__product--thumbnail {
    width: 9rem;
  }
}

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

.small__product--content {
  width: calc(100% - 7.5rem);
  padding-left: 1.2rem;
}

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

@media only screen and (min-width: 1600px) {
  .small__product--content {
    width: calc(100% - 10rem);
    padding-left: 1.8rem;
  }
}

.small__product--title {
  font-size: 1.4rem;
  line-height: 2.2rem;
  margin-bottom: 0.6rem;
}

@media only screen and (min-width: 1366px) {
  .small__product--title {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .small__product--title {
    font-size: 1.7rem;
  }
}

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

@media only screen and (min-width: 1366px) {
  .small__product--price {
    margin-bottom: 0.5rem;
  }
}

.small__product--price .current__price {
  font-size: 1.5rem;
  line-height: 2rem;
}

@media only screen and (min-width: 1366px) {
  .small__product--price .current__price {
    font-size: 1.6rem;
  }
}

.small__product--price .old__price {
  font-size: 1.4rem;
  line-height: 2rem;
}

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

@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 (max-width: 767px) {
  .product__card--list {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

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

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

@media only screen and (min-width: 400px) {
  .product__card--list__thumbnail {
    width: 170px;
  }
}

@media only screen and (min-width: 480px) {
  .product__card--list__thumbnail {
    width: 200px;
  }
}

@media only screen and (min-width: 768px) {
  .product__card--list__thumbnail {
    width: 270px;
  }
}

@media only screen and (min-width: 992px) {
  .product__card--list__thumbnail {
    width: 300px;
  }
}

@media only screen and (min-width: 1366px) {
  .product__card--list__thumbnail {
    width: 370px;
  }
}

.product__card--list__content {
  width: 100%;
  padding: 1.6rem 0 0 0;
  -webkit-box-shadow: inherit;
          box-shadow: inherit;
}

@media only screen and (min-width: 400px) {
  .product__card--list__content {
    width: calc(100% - 170px);
    padding: 0 0 0 1.5rem;
  }
}

@media only screen and (min-width: 480px) {
  .product__card--list__content {
    width: calc(100% - 200px);
    padding: 0 0 0 2rem;
  }
}

@media only screen and (min-width: 768px) {
  .product__card--list__content {
    width: calc(100% - 270px);
  }
}

@media only screen and (min-width: 992px) {
  .product__card--list__content {
    width: calc(100% - 300px);
    padding: 0 0 0 3rem;
  }
}

@media only screen and (min-width: 1366px) {
  .product__card--list__content {
    width: calc(100% - 370px);
  }
}

@media only screen and (max-width: 399px) {
  .product__card--list__content {
    text-align: center;
  }
}

.product__card--list__content .product__card--price {
  margin-bottom: 1rem;
}

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

@media only screen and (max-width: 767px) {
  .product__list--items__content--desc {
    display: none;
  }
}

.product__card--list__rating {
  margin-bottom: 1.5rem;
}

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

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

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

.rating__list--text {
  color: var(--text-gray-color);
  font-size: 1.4rem;
}

.pagination__area {
  padding: 1.5rem 2rem;
  margin-top: 3rem;
}

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

.pagination__list {
  margin-right: 1.2rem;
}

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

.pagination__item {
  width: 3.5rem;
  height: 3.5rem;
  line-height: 3.3rem;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  border-radius: 50%;
  border: 1px solid var(--border-color2);
  background: var(--white-color);
}

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

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

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

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .shop__header--style2 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .shop__header--style2 .product__showing--count {
    margin-top: 0;
  }
}

.widget__filter--btn.style2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/*
   9. Product details css
*/
.product__details--media {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
}

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

.product__media--right {
  width: calc(100% - 75px);
  padding-left: 1.7rem;
}

@media only screen and (min-width: 350px) {
  .product__media--right {
    width: calc(100% - 90px);
  }
}

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

@media only screen and (min-width: 425px) {
  .product__media--right {
    width: calc(100% - 110px);
  }
}

@media only screen and (min-width: 455px) {
  .product__media--right {
    width: calc(100% - 118px);
  }
}

@media only screen and (min-width: 480px) {
  .product__media--right {
    width: calc(100% - 90px);
    padding-left: 2rem;
  }
}

@media only screen and (min-width: 515px) {
  .product__media--right {
    width: calc(100% - 108px);
    padding-left: 2rem;
  }
}

@media only screen and (min-width: 576px) {
  .product__media--right {
    width: calc(100% - 100px);
    padding-left: 2rem;
  }
}

@media only screen and (min-width: 768px) {
  .product__media--right {
    width: calc(100% - 75px);
    padding-left: 3rem;
  }
}

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

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

.product__media--preview__items {
  position: relative;
}

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

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

.product__media--view__icon {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
}

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

.product__media--view__icon--link {
  width: 3.5rem;
  height: 3.5rem;
  text-align: center;
  background: var(--primary-color);
  border-radius: 2px;
  color: var(--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(--secondary-color);
  color: var(--white-color);
}

@media only screen and (min-width: 768px) {
  .product__media--view__icon--link {
    width: 4rem;
    height: 4rem;
  }
}

.product__badge {
  position: absolute;
  top: 0;
  left: 0;
}

.product__badge--items {
  width: 5rem;
  height: 2.3rem;
  background: var(--secondary-color);
  color: var(--white-color);
  font-size: 1.1rem;
  line-height: 2.3rem;
  text-align: center;
}

@media only screen and (min-width: 576px) {
  .product__badge--items {
    width: 5.2rem;
    height: 2.5rem;
    font-size: 1.2rem;
    line-height: 2.5rem;
  }
}

@media only screen and (min-width: 768px) {
  .product__badge--items {
    font-size: 1.5rem;
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
  }
}

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

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

.product__media--nav {
  width: 75px;
}

@media only screen and (min-width: 350px) {
  .product__media--nav {
    width: 90px;
  }
}

@media only screen and (min-width: 395px) {
  .product__media--nav {
    width: 100px;
  }
}

@media only screen and (min-width: 425px) {
  .product__media--nav {
    width: 110px;
  }
}

@media only screen and (min-width: 455px) {
  .product__media--nav {
    width: 118px;
  }
}

@media only screen and (min-width: 480px) {
  .product__media--nav {
    width: 90px;
  }
}

@media only screen and (min-width: 515px) {
  .product__media--nav {
    width: 108px;
  }
}

@media only screen and (min-width: 576px) {
  .product__media--nav {
    width: 100px;
  }
}

@media only screen and (min-width: 768px) {
  .product__media--nav {
    width: 75px;
  }
}

@media only screen and (min-width: 992px) {
  .product__media--nav {
    width: 85px;
  }
}

@media only screen and (min-width: 1200px) {
  .product__media--nav {
    width: 116px;
  }
}

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

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

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

@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;
  font-weight: 600;
}

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

.variant__buy--now__btn {
  width: 100%;
  height: 3.8rem;
  line-height: 3.8rem;
}

@media only screen and (min-width: 480px) {
  .variant__buy--now__btn {
    height: 4rem;
    line-height: 4rem;
  }
}

@media only screen and (min-width: 768px) {
  .variant__buy--now__btn {
    height: 4.2rem;
    line-height: 4.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .variant__buy--now__btn {
    height: 4.8rem;
    line-height: 4.8rem;
  }
}

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

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

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

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

.variant__color--value {
  width: 4rem;
  height: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 3px;
  margin-right: 10px;
  line-height: 1;
  cursor: pointer;
}

.variant__color--value:last-child {
  margin-right: 0;
}

.variant__color--value__img {
  border-radius: 3px;
  display: block;
}

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

.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.2rem;
  display: inline-block;
  border-radius: 5px;
  text-align: center;
  font-size: 1.5rem;
  cursor: pointer;
}

.product__details--tab__section {
  background: var(--bg-gray-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;
  }
}

@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(--white-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@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__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;
  }
}

.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-color2);
  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__ratting--list {
  margin-right: 0.4rem;
}

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

.reviews__ratting--icon {
  color: var(--yellow-color);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.reviews__comment--reply__textarea {
  width: 100%;
  height: 100px;
  resize: none;
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--border-color2);
  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-color2);
  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);
}

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

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

@media only screen and (min-width: 992px) {
  .product__media--nav.sidebar__style {
    width: 115px;
  }
}

@media only screen and (min-width: 1200px) {
  .product__media--nav.sidebar__style {
    width: 85px;
  }
}

@media only screen and (min-width: 1366px) {
  .product__media--nav.sidebar__style {
    width: 95px;
  }
}

@media only screen and (min-width: 1600px) {
  .product__media--nav.sidebar__style {
    width: 116px;
  }
}

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

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

@media only screen and (min-width: 1366px) {
  .product__media--right.sidebar__style {
    width: calc(100% - 95px);
  }
}

@media only screen and (min-width: 1600px) {
  .product__media--right.sidebar__style {
    width: calc(100% - 116px);
  }
}

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

@media only screen and (max-width: 1365px) {
  .product__tab--content__banner.sidebar__style {
    width: 100%;
    margin-bottom: 2.2rem;
  }
}

@media only screen and (max-width: 1365px) {
  .product__tab--content__right.sidebar__style {
    width: 100%;
    padding-left: 0;
  }
}

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

.product__media--right__horizontal {
  margin-bottom: 2.5rem;
}

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

.product__sidebar--widget {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
}

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

@media only screen and (max-width: 767px) {
  .product__sidebar--widget {
    margin-top: 60px;
  }
}

/*
   13. Blog Details Css
*/
.blog__wrapper--sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

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

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

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

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

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

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

@media only screen and (min-width: 1366px) {
  .post__header--title {
    line-height: 3.8rem;
    font-size: 3.2rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

.blog__tags--social__media {
  padding: 4.6rem 0 5.2rem;
}

@media only screen and (min-width: 768px) {
  .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: 575px) {
  .blog__tags--social__media {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

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

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

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

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

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

.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-color2);
  background: var(--white-color);
  padding: 0.5rem 1.2rem;
  line-height: 2.5rem;
  border-radius: 0.3rem;
  text-transform: capitalize;
}

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

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

.meta__deta {
  font-weight: 500;
  margin-top: 0.6rem;
  font-size: 1.5rem;
}

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

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

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

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

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

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

.related__post--heading__maintitle {
  font-size: 2rem;
}

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

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

.related__post--thumbnail {
  overflow: hidden;
}

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

@media only screen and (max-width: 575px) {
  .related__post--thumbnail a img {
    width: 100%;
  }
}

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

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

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

.related__post--deta {
  font-size: 1.5rem;
}

.comment__reply--btn {
  height: 3.4rem;
  line-height: 3.4rem;
  padding: 0 2rem;
  font-size: 1.4rem;
}

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

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

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

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

.reviews__comment--content__date2 {
  font-size: 1.5rem;
  color: var(--text-gray-color);
  margin-bottom: 0.8rem;
}

.reviews__comment--reply__title {
  font-size: 2rem;
}

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

/*
   21. Contact Page Css
*/
.contact__section--bg {
  background: url(../img/banner/banner-bg5.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

.contact__heading--desc {
  width: 100%;
}

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

.contact__form {
  background: var(--white-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: 768px) {
  .contact__form {
    padding: 3rem;
  }
}

.contact__form--title {
  font-weight: 600;
}

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

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

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

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

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

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

.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: 145px;
  }
}

.contact__form--textarea.style2 {
  height: 8rem;
}

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

@media only screen and (min-width: 1366px) {
  .contact__form--textarea.style2 {
    height: 150px;
  }
}

.contact__form--btn {
  width: 100%;
}

@media only screen and (min-width: 992px) {
  .contact__form--btn {
    font-size: 1.7rem;
  }
}

.contact__info {
  background: var(--secondary-color);
  padding: 2rem 1.5rem;
}

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

@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 {
    padding: 4rem 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .contact__info {
    padding: 5rem 6rem;
  }
}

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

.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(--white-color);
  padding-top: 0.8rem;
}

@media only screen and (min-width: 1200px) {
  .contact__info--icon {
    padding-top: 0.8rem;
  }
}

@media only screen and (max-width: 575px) {
  .contact__info--icon {
    padding-top: 0.3rem;
  }
}

@media only screen and (max-width: 575px) {
  .contact__info--icon svg {
    width: 2.5rem;
  }
}

@media only screen and (max-width: 479px) {
  .contact__info--icon svg {
    width: 2rem;
  }
}

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

@media only screen and (min-width: 1200px) {
  .contact__info--content__desc {
    font-size: 1.6rem;
    line-height: 2.7rem;
  }
}

.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(--white-color);
  color: var(--secondary-color);
  border-radius: 50%;
}

.contact__info--social__icon:hover {
  background: var(--primary-color);
  color: var(--white-color);
}

.contact__map--iframe {
  width: 100%;
  height: 200px;
  margin-bottom: -7px;
}

@media only screen and (min-width: 576px) {
  .contact__map--iframe {
    height: 250px;
  }
}

@media only screen and (min-width: 768px) {
  .contact__map--iframe {
    height: 300px;
  }
}

@media only screen and (min-width: 992px) {
  .contact__map--iframe {
    height: 400px;
  }
}

@media only screen and (min-width: 1200px) {
  .contact__map--iframe {
    height: 500px;
  }
}

@media only screen and (min-width: 1600px) {
  .contact__map--iframe {
    height: 600px;
  }
}

/*
   18. Cart Page Css
*/
.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-color2);
}

.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-center {
  text-align: center;
}

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

@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-color2);
  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;
  min-width: 20%;
}

@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;
  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;
  font-size: 1.5rem;
}

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

.cart__remove--btn {
  font-weight: 600;
  width: 3rem;
  height: 3rem;
  text-align: center;
  background: var(--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);
  margin-right: 1.5rem;
  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;
}

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

.cart__price {
  font-weight: 600;
}

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

.continue__shopping {
  padding-top: 2rem;
}

.continue__shopping--link {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--secondary-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(--secondary-color);
  border: 0;
  padding: 0;
  background: inherit;
}

@media only screen and (min-width: 992px) {
  .continue__shopping--clear {
    font-size: 1.7rem;
  }
}

.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(--white-color);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

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

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

.cart__summary--total__table {
  width: 100%;
}

.coupon__code--title {
  font-size: 1.7rem;
  margin-bottom: 0.7rem;
  line-height: 2.4rem;
}

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

.coupon__code--desc {
  margin-bottom: 1.5rem;
}

.coupon__code--field__input {
  border: 1px solid var(--border-color);
  height: 4.5rem;
  padding: 0 1rem;
  width: 100px;
}

@media only screen and (min-width: 768px) {
  .coupon__code--field__input {
    width: 160px;
  }
}

@media only screen and (min-width: 992px) {
  .coupon__code--field__input {
    width: 140px;
  }
}

@media only screen and (min-width: 1200px) {
  .coupon__code--field__input {
    width: 160px;
  }
}

@media only screen and (max-width: 575px) {
  .coupon__code--field__input {
    height: 4rem;
  }
}

.coupon__code--field__input:focus {
  border-color: var(--secondary-color);
}

.coupon__code--field__btn {
  height: 4.5rem;
  line-height: 4.5rem;
  padding: 0 2.5rem;
  margin-left: 2rem;
  font-size: 1.4rem;
}

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

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

@media only screen and (max-width: 575px) {
  .coupon__code--field__btn {
    height: 4rem;
    line-height: 4rem;
    padding: 0 1.8rem;
  }
}

.cart__note--title {
  font-size: 1.7rem;
  margin-bottom: 0.7rem;
  line-height: 2.4rem;
}

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

.cart__note--desc {
  margin-bottom: 1.5rem;
}

.cart__note--textarea {
  border: 1px solid var(--border-color);
  height: 10rem;
  padding: 1rem;
  width: 100%;
  resize: none;
}

.cart__note--textarea:focus {
  border-color: var(--secondary-color);
}

.cart__summary--total__list {
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.cart__summary--total__list:last-child {
  margin-bottom: 0;
}

.cart__summary--footer__desc {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.cart__summary--footer__btn {
  height: 4.5rem;
  line-height: 4.5rem;
  padding: 0 1.5rem;
}

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

@media only screen and (min-width: 1200px) {
  .cart__summary--footer__btn {
    padding: 0 2.5rem;
  }
}

@media only screen and (max-width: 575px) {
  .cart__summary--footer__btn {
    height: 4rem;
    line-height: 4rem;
    padding: 0 1.2rem;
  }
}

.wishlist__cart--btn {
  font-size: 1.4rem;
}

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

@media only screen and (max-width: 767px) {
  .wishlist__cart--btn {
    padding: 0.5rem 0.4rem;
    height: auto;
    line-height: 2.4rem;
    border-radius: 5px;
    text-align: center;
    font-size: 1.3rem;
    min-width: 95px;
  }
}

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

.breadcrumb__text {
  color: #737373;
  font-size: 1.3rem;
}

.breadcrumb__text.current {
  color: var(----black-color);
}

.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-gray-color);
  border: 0;
  border: 1px solid var(--border-color2);
  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-color2);
}

.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-gray-color);
  padding: 3rem 1rem 1rem;
}

.checkout__checkbox {
  position: relative;
}

.checkout__checkbox--input {
  position: absolute;
  left: -1px;
  top: 4px;
  opacity: 0;
  cursor: pointer;
  z-index: 999;
}

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

.checkout__checkbox--input:checked ~ .checkout__checkbox--checkmark::before {
  display: block;
}

.checkout__checkbox--label {
  padding-left: 3rem;
  cursor: pointer;
}

.checkout__checkbox--checkmark {
  height: 1.8rem;
  width: 1.8rem;
  border: 1px solid var(--border-color);
  border-radius: 0.3rem;
  display: block;
  position: absolute;
  top: 4px;
  left: 0;
  background: var(--white-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

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

.checkout__input--label {
  display: inline-block;
}

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

.checkout__input--field {
  width: 100%;
  border: 1px solid var(--border-color2);
  height: 4.5rem;
  padding: 0 1.5rem;
}

.checkout__input--field:focus {
  border-color: var(--secondary-color);
}

.checkout__notes--textarea__field {
  width: 100%;
  border: 1px solid var(--border-color2);
  padding: 1rem 1.5rem 0.5rem;
  resize: none;
}

.checkout__notes--textarea__field:focus {
  border-color: var(--secondary-color);
}

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

.section__header--title {
  font-size: 2rem;
  line-height: 2.2rem;
}

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

@media only screen and (max-width: 575px) {
  .section__header--title {
    margin-bottom: 0.8rem;
  }
}

.section__header--desc {
  margin-top: 0.5rem;
}

.layout__flex--item {
  color: var(--text-gray-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-color2);
  -webkit-appearance: none;
  cursor: pointer;
}

.checkout__input--select__field:focus {
  border-color: var(--secondary-color);
}

.previous__link--content {
  margin-left: 2rem;
  color: var(--secondary-color);
}

@media only screen and (max-width: 575px) {
  .previous__link--content {
    margin-left: 0;
    margin-top: 1rem;
  }
}

.checkout__footer {
  border: 0;
}

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

.checkout__sidebar {
  background: #FAFAFA;
  border: 1px solid var(--border-color2);
  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-color2);
  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(--white-color);
  text-align: center;
  border-radius: 50%;
  font-size: 1.2rem;
}

.product__description {
  padding-left: 1.5rem;
}

.product__description--name {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 600;
  opacity: 0.9;
}

.product__description--variant {
  font-size: 1.2rem;
  color: var(--light-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-color2);
  height: 4rem;
  padding: 0 1.5rem;
}

.checkout__discount--code__input--field:focus {
  border-color: var(--secondary-color);
}

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

.checkout__discount--code__btn {
  height: 4rem;
  line-height: 4rem;
  margin-left: 2rem;
  padding: 0 2.5rem;
  font-size: 1.4rem;
}

@media only screen and (min-width: 768px) {
  .checkout__discount--code__btn {
    height: 4.5rem;
    line-height: 4.5rem;
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .checkout__discount--code__btn {
    font-size: 1.6rem;
  }
}

.checkout__total {
  border-top: 1px solid var(--border-color2);
  padding-top: 1.2rem;
}

.checkout__total--table {
  width: 100%;
}

.checkout__total--calculated__text {
  font-size: 1.3rem;
  color: var(--text-gray-color);
}

.checkout__total--title {
  color: var(--text-gray-color);
}

.checkout__total--footer__list {
  padding-top: 3rem;
  position: relative;
}

.checkout__total--footer__list::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background: #E4E4E4;
  top: 1.5rem;
  left: 0;
}

.checkout__total--footer__title {
  font-size: 1.6rem;
}

.checkout__total--footer__amount {
  font-size: 2.2rem;
  font-weight: 600;
}

.checkout__order--summary__title {
  font-size: 2rem;
  line-height: 2.2rem;
}

@media only screen and (min-width: 1200px) {
  .checkout__order--summary__title {
    font-size: 2.2rem;
    line-height: 2.4rem;
  }
}

.payment__history {
  margin-top: 2rem;
}

.payment__history--title {
  font-size: 2rem;
  line-height: 2.2rem;
}

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

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

.payment__history--list {
  margin-right: 1.5rem;
}

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

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

@media only screen and (max-width: 1199px) {
  .payment__history--list {
    margin-right: 1rem;
  }
}

.payment__history--link {
  background: var(--white-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 0 1.2rem;
  font-size: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .payment__history--link {
    font-size: 1.6rem;
    padding: 0 2rem;
    height: 4.8rem;
    line-height: 4.6rem;
  }
}

.checkout__now--btn {
  width: 100%;
  text-align: center;
  font-size: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .checkout__now--btn {
    font-size: 1.6rem;
    height: 4.8rem;
    line-height: 4.6rem;
  }
}

.continue__shipping--btn {
  font-size: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .continue__shipping--btn {
    font-size: 1.6rem;
    height: 4.8rem;
    line-height: 4.6rem;
  }
}

/* 
    26. My Account Page css 
*/
.my__account--section__inner {
  background: var(--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);
  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-color2);
  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-color2);
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
  }
}

.account__wrapper {
  width: calc(100% - 18rem);
}

@media only screen and (min-width: 1199px) {
  .account__wrapper {
    width: calc(100% - 23rem);
  }
}

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

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

@media only screen and (max-width: 479px) {
  .account__menu {
    margin-right: 0;
  }
}

.account__menu--list {
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  margin-bottom: 1.5rem;
}

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

.account__menu--list:hover {
  color: var(--secondary-color);
}

.account__menu--list.active {
  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(--text-gray-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(--white-color);
  border: 1px solid var(--black-color);
  padding: 0 2.5rem;
  height: 4.5rem;
  line-height: 4.1rem;
  border-radius: 2.5rem;
  margin-right: 1rem;
  font-size: 1.5rem;
}

.account__details--footer__btn:last-child {
  margin-right: 0;
}

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

.account__welcome--text {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

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

.account__content--title {
  font-weight: 600;
}

.account__table {
  width: 100%;
  border: 1px solid var(--border-color2);
  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-color2);
  padding: 1.7rem 1rem;
  font-size: 1.5rem;
}

.account__table--header__child--items:last-child {
  text-align: right;
}

@media only screen and (min-width: 1200px) {
  .account__table--header__child--items {
    font-size: 1.6rem;
    padding: 1.7rem 1.5rem;
  }
}

@media only screen and (max-width: 767px) {
  .account__table--body.mobile__none {
    display: none;
  }
}

.account__table--body.mobile__block {
  display: none;
}

@media only screen and (max-width: 767px) {
  .account__table--body.mobile__block {
    display: block;
  }
}

@media only screen and (max-width: 767px) {
  .account__table--body__child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 2rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 2rem;
  }
  .account__table--body__child:last-child {
    margin-bottom: 0;
  }
}

.account__table--body__child--items {
  border-bottom: 1px solid var(--border-color2);
  padding: 1.7rem 2rem;
  color: var(--text-gray-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;
  }
}

/* 
    31. 404 page css 
*/
@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;
  }
}

@media only screen and (max-width: 575px) {
  .error__content--img {
    max-width: 100%;
    padding: 0 3rem;
  }
}

.error__content--title {
  font-weight: 600;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  line-height: 3rem;
}

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

@media only screen and (min-width: 768px) {
  .error__content--title {
    margin-bottom: 1.8rem;
    font-size: 3.3rem;
    line-height: 4rem;
  }
}

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

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

@media only screen and (min-width: 1366px) {
  .error__content--title {
    font-size: 5rem;
    line-height: 5.5rem;
  }
}

.error__content--desc {
  font-size: 1.5rem;
}

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

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

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

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

/* 
    25. Login Page css 
*/
.account__login {
  background: var(--white-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;
}

.account__login--header__desc {
  font-size: 1.5rem;
  font-weight: 600;
}

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

@media only screen and (min-width: 992px) {
  .account__login--input {
    font-size: 1.5rem;
    height: 5.2rem;
  }
}

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

@media only screen and (max-width: 767px) {
  .account__login--btn {
    height: 4.5rem;
    line-height: 4.5rem;
  }
}

@media only screen and (max-width: 575px) {
  .account__login--btn {
    height: 4rem;
    line-height: 4rem;
  }
}

.account__login--signup__text {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-gray-color);
}

.account__login--signup__text button {
  padding: 0;
  border: 0;
  background: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--secondary-color);
}

.account__login--signup__text button:hover {
  text-decoration: underline;
}

.account__login--forgot {
  font-weight: 600;
  color: var(--secondary-color);
  font-size: 1.5rem;
  padding: 0;
  border: 0;
  background: inherit;
}

@media only screen and (max-width: 575px) {
  .account__login--forgot {
    margin-top: 0.6rem;
  }
}

.account__login--forgot:hover {
  color: var(--primary-color);
}

@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 {
  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-color2);
  top: 50%;
  left: 0;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

.account__login--divide__text {
  padding: 0 0.8rem;
  background: var(--white-color);
  position: relative;
  font-weight: 500;
  color: var(--light-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.2rem;
  padding: 0 2.5rem;
  color: var(--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(--white-color);
}

.account__social--link.google {
  background: #E94235;
}

.account__social--link.google:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}

.account__social--link.twitter {
  background: #55ADEE;
}

.account__social--link.twitter:hover {
  background: var(--secondary-color);
  color: var(--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: 4rem;
    padding: 0 1.4rem;
  }
}

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

/*
   20. Compare Page Css
*/
.compare__heading--maintitle {
  font-size: 2rem;
}

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

.compare__table {
  border: 1px solid var(--border-color2);
  border-spacing: 0;
  border-bottom: 0;
}

.compare__table--items__child {
  padding: 1.2rem;
  border-left: 1px solid var(--border-color2);
  border-bottom: 1px solid var(--border-color2);
  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-color2);
  text-transform: uppercase;
  background: var(--gray-color2);
  font-size: 1.3rem;
}

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

.compare__product--title {
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-bottom: 1rem;
  text-align: center;
}

.compare__product--thumbnail {
  border-radius: 0.5rem;
}

.compare__remove {
  padding: 0;
  float: right;
  width: 100%;
  border: 0;
  background: inherit;
  text-align: center;
  color: var(--text-gray-color);
  margin-bottom: 5px;
}

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

.compare__description {
  color: var(--text-gray-color);
  padding: 0.5rem 0;
  font-size: 1.4rem;
  line-height: 2.6rem;
  text-align: center;
}

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

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

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

.compare__cart--btn {
  border-radius: 0.5rem;
  text-transform: uppercase;
  padding: 0 1.5rem;
  height: 3.8rem;
  line-height: 3.8rem;
  font-size: 1.3rem;
}

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

@media only screen and (min-width: 992px) {
  .compare__cart--btn {
    height: 4.2rem;
    line-height: 4.2rem;
    padding: 0 2.5rem;
  }
}

/*
   22. Faq Page Css
*/
.face__step {
  margin-bottom: 3.5rem;
  padding-bottom: 3rem;
}

.face__step:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.face__step--title {
  font-weight: 600;
}

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

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

/* 
    28. 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(--light-color2);
  border-top-color: var(--black-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(--light-color2);
  font-size: 3.5rem;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
  animation: letters-loading 5s infinite;
  color: var(--black-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(--white-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;
  }
}

/* 
    29. 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: 0.8rem;
}

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

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

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

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

/* 
    32. 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(--white-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);
}

@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: 730px;
  }
}

@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(--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: 4rem 2rem 2.2rem;
  text-align: center;
}

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

@media only screen and (min-width: 768px) {
  .newsletter__popup--box__right {
    width: calc(100% - 280px);
    padding: 3rem 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .newsletter__popup--box__right {
    width: calc(100% - 320px);
    padding: 4rem 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .newsletter__popup--box__right {
    width: calc(100% - 330px);
    padding: 4rem 3rem;
  }
}

.newsletter__popup--title {
  margin-bottom: 1.3rem;
}

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

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

.newsletter__popup--content--desc {
  color: var(--text-gray-color);
  display: inline-block;
  line-height: 2.4rem;
  font-size: 1.4rem;
  margin-bottom: 1.6rem;
}

@media only screen and (min-width: 768px) {
  .newsletter__popup--content--desc {
    line-height: 2.6rem;
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .newsletter__popup--content--desc {
    font-size: 1.6rem;
    margin-bottom: 2.2rem;
  }
}

.newsletter__popup--subscribe__input {
  width: 100%;
  height: 4rem;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 0 15px;
}

.newsletter__popup--subscribe__input:focus {
  border-color: var(--secondary-color);
}

@media only screen and (min-width: 768px) {
  .newsletter__popup--subscribe__input {
    height: 4.5rem;
  }
}

.newsletter__popup--subscribe__btn {
  width: 100%;
  height: 4rem;
  background: var(--secondary-color);
  color: var(--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;
}

.newsletter__popup--dontshow__again--text {
  color: var(--text-gray-color);
  cursor: pointer;
  font-size: 1.4rem;
}

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

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

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

.quickview__main--wrapper {
  max-width: 900px;
  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;
}

@media only screen and (max-width: 767px) {
  .quickview__main--wrapper {
    padding: 10px;
  }
}

.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;
  border-radius: 50%;
  font-weight: 700;
  border: 1px solid var(--border-color);
  background: var(--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;
}

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

.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(--theme-color);
  opacity: 1;
  border-radius: 2px;
  margin: 0 3px !important;
}

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

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

.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__variant--wishlist__svg {
  width: 22px;
  margin-right: 4px;
}

.variant__wishlist--icon {
  margin-left: 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media only screen and (max-width: 991px) {
  .variant__wishlist--icon {
    margin-left: 1rem;
    font-size: 1.4rem;
  }
}

@media only screen and (max-width: 479px) {
  .variant__wishlist--icon {
    display: block;
    margin-left: 0;
    margin-top: 1rem;
  }
}

.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 17px;
  margin-left: 12px;
  font-size: 1.4rem;
}

@media only screen and (min-width: 992px) {
  .quickview__cart--btn {
    padding: 0 25px;
    margin-left: 15px;
    font-size: 1.5rem;
  }
}

.quickview__social--title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 15px;
}

.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(--white-color);
  border-radius: 50%;
}

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

.quickview__variant--wishlist__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
/*# sourceMappingURL=style.css.map */

/* ===== Автоматические стили для тегов в материалах блога ===== */
.entry__blog h3 {
    font-size: 2rem;
    line-height: 2.8rem;
    margin-bottom: 2.5rem;
    font-weight: 700;
}

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

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

.entry__blog p {
    color: var(--text-gray-color);
    margin-bottom: 2rem;
    font-size: 1.5rem;
    line-height: 2.6rem;
}

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

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

.entry__blog blockquote {
    background: var(--bg-gray-color);
    padding: 2rem 3rem;
    margin-bottom: 3rem;
    border-radius: 1rem;
    text-align: center;
}

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

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

.entry__blog blockquote p {
    font-size: 1.6rem;
    line-height: 3rem;
    font-style: italic;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
    .entry__blog blockquote p {
        font-size: 1.8rem;
        line-height: 3.4rem;
    }
}

.entry__blog img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    margin: 2rem 0;
}

.entry__blog ul, 
.entry__blog ol {
    margin-bottom: 2rem;
    padding-left: 2rem;
}

.entry__blog li {
    color: var(--text-gray-color);
    font-size: 1.5rem;
    line-height: 2.8rem;
    margin-bottom: 0.8rem;
    list-style-type: disc;
}

.entry__blog li:last-child {
    margin-bottom: 0;
}

.entry__blog a {
    color: var(--secondary-color);
}

.entry__blog a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.entry__blog .blog__thumbnail {
    margin-bottom: 3rem;
}

.entry__blog .blog__thumbnail img {
    margin: 0;
    width: 100%;
}

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

@media only screen and (min-width: 768px) {
    .entry__blog .blog__post--header {
        margin-bottom: 3rem;
    }
}

.entry__blog .post__header--title {
    font-size: 2.2rem;
    line-height: 3rem;
    margin-bottom: 1.5rem;
}

@media only screen and (min-width: 768px) {
    .entry__blog .post__header--title {
        font-size: 2.5rem;
        line-height: 3.2rem;
    }
}

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

@media only screen and (min-width: 1200px) {
    .entry__blog .post__header--title {
        font-size: 3.2rem;
        line-height: 3.8rem;
    }
}

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

.entry__blog .blog__post--meta {
    font-size: 1.4rem;
    color: var(--text-gray-color);
    text-transform: capitalize;
}

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

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

.entry__blog .blog__post--meta__link:hover {
    text-decoration: underline;
}

.entry__blog .badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-size: 1.2rem;
    font-weight: 500;
    border-radius: 0.5rem;
    margin-left: 1rem;
    vertical-align: middle;
}

.entry__blog .badge.bg-warning {
    background: #ffc107;
    color: #000;
}

.entry__blog .badge.text-light {
    color: #fff;
}


/* ===== Автоматическое применение стилей к тегам в описании товара ===== */
/* Стили взяты из entry__blog для единообразного отображения контента */

/* Заголовки */
.product__tab--content h2,
.product__tab--content h3,
.product__tab--content h4 {
    font-weight: 700;
    margin-bottom: 2rem;
    font-family: var(--work-sans);
}

.product__tab--content h2 {
    font-size: 2rem;
    line-height: 2.8rem;
}

.product__tab--content h3 {
    font-size: 1.8rem;
    line-height: 2.6rem;
}

.product__tab--content h4 {
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2.4rem;
}

@media only screen and (min-width: 768px) {
    .product__tab--content h2 {
        font-size: 2.2rem;
        line-height: 3rem;
    }
    .product__tab--content h3 {
        font-size: 2rem;
        line-height: 2.8rem;
    }
}

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

/* Параграфы */
.product__tab--content p {
    color: var(--text-gray-color);
    margin-bottom: 2rem;
    font-size: 1.5rem;
    line-height: 2.6rem;
}

.product__tab--content p:last-child {
    margin-bottom: 0;
}

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

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

/* Списки (стили из entry__blog) */
.product__tab--content ul,
.product__tab--content ol {
    margin-bottom: 2rem;
    padding-left: 2.5rem;
}

.product__tab--content li {
    color: var(--text-gray-color);
    font-size: 1.5rem;
    line-height: 2.8rem;
    margin-bottom: 0.8rem;
    list-style-type: disc; /* Для ul */
}

.product__tab--content ol li {
    list-style-type: decimal; /* Для ol */
}

.product__tab--content li:last-child {
    margin-bottom: 0;
}

/* Вложенные списки */
.product__tab--content ul ul,
.product__tab--content ol ol,
.product__tab--content ul ol,
.product__tab--content ol ul {
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
}

/* Специальная обработка для списка с процентами из шаблона */
/* Оставляем классы, но добавляем базовые стили для списков внутри */
.product__tab--content .image__with--text__percent ul {
    padding-left: 0;
    margin-bottom: 0;
}

.product__tab--content .image__with--text__percent li {
    list-style-type: none; /* Убираем маркеры для этого специфичного списка */
    margin-bottom: 2rem; /* mb-20 эквивалент */
}

.product__tab--content .image__with--text__percent li:last-child {
    margin-bottom: 0;
}

/* Цитаты */
.product__tab--content blockquote {
    background: var(--bg-gray-color);
    padding: 2rem 2.5rem;
    margin: 2.5rem 0;
    border-radius: 1rem;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .product__tab--content blockquote {
        padding: 2.5rem 4rem;
        margin: 3rem 0;
    }
}

.product__tab--content blockquote p {
    font-size: 1.6rem;
    line-height: 3rem;
    font-style: italic;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
    .product__tab--content blockquote p {
        font-size: 1.8rem;
        line-height: 3.4rem;
    }
}

/* Изображения */
.product__tab--content img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    margin: 2rem 0;
}

.product__tab--content .product__tab--content__banner img {
    margin: 0; /* Для специфичного баннера из шаблона убираем отступы */
}

/* Ссылки */
.product__tab--content a {
    color: var(--secondary-color);
    text-decoration: none;
}

.product__tab--content a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Таблицы (на случай, если появятся) */
.product__tab--content table {
    width: 100%;
    margin-bottom: 2rem;
    border-collapse: collapse;
}

.product__tab--content th,
.product__tab--content td {
    padding: 1rem;
    border: 1px solid var(--border-color);
    text-align: left;
}

.product__tab--content th {
    background: var(--bg-gray-color);
    font-weight: 600;
}

/* Жирный текст */
.product__tab--content strong,
.product__tab--content b {
    font-weight: 700;
    color: var(--primary-color);
}

/* Курсив */
.product__tab--content em,
.product__tab--content i {
    font-style: italic;
}


/* ===== Выравнивание описания товара по ширине на всех разрешениях ===== */
.product__details--info__desc {
    text-align: justify;
    width: 100%;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
}

/* Для всех параграфов внутри описания товара */
.product__details--info__desc p {
    text-align: justify;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
    width: 100%;
    margin-bottom: 1.5rem; /* Сохраняем отступы между параграфами */
}

/* Убираем отступ у последнего параграфа */
.product__details--info__desc p:last-child {
    margin-bottom: 0;
}

/* Небольшие отступы по бокам на мобильных устройствах для лучшей читаемости */
@media only screen and (max-width: 767px) {
    .product__details--info__desc {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* ===== СТИЛИ ДЛЯ КОНТЕНТА В ОПИСАНИИ ТОВАРА ===== */
#description .product__tab--content,
.product__tab--content {
    /* Базовые стили для всего контента */
    font-size: 1.5rem;
    line-height: 2.6rem;
    color: var(--text-gray-color);
}

/* Заголовки в описании товара */
#description .product__tab--content h2,
.product__tab--content h2 {
    font-size: 2rem;
    line-height: 2.8rem;
    margin-bottom: 2rem;
    font-weight: 700;
    font-family: var(--work-sans);
    color: var(--primary-color);
}

#description .product__tab--content h3,
.product__tab--content h3 {
    font-size: 1.8rem;
    line-height: 2.6rem;
    margin-bottom: 1.8rem;
    font-weight: 700;
    font-family: var(--work-sans);
    color: var(--primary-color);
}

/* Параграфы в описании товара */
#description .product__tab--content p,
.product__tab--content p {
    margin-bottom: 2rem;
    line-height: 2.6rem;
    color: var(--text-gray-color);
    text-align: justify; /* Выравнивание по ширине */
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
    width: 100%;
}

#description .product__tab--content p:last-child,
.product__tab--content p:last-child {
    margin-bottom: 0;
}

/* Списки в описании товара */
#description .product__tab--content ul,
#description .product__tab--content ol,
.product__tab--content ul,
.product__tab--content ol {
    margin-bottom: 2rem;
    padding-left: 2.5rem;
}

#description .product__tab--content li,
.product__tab--content li {
    color: var(--text-gray-color);
    font-size: 1.7rem;
    line-height: 2.8rem;
    margin-bottom: 0.8rem;
    list-style-type: disc;
    text-align: justify;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
}

#description .product__tab--content ol li,
.product__tab--content ol li {
    list-style-type: decimal;
}

#description .product__tab--content li:last-child,
.product__tab--content li:last-child {
    margin-bottom: 0;
}

/* Ссылки в описании товара */
#description .product__tab--content a,
.product__tab--content a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
}

#description .product__tab--content a:hover,
.product__tab--content a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Жирный текст */
#description .product__tab--content strong,
#description .product__tab--content b,
.product__tab--content strong,
.product__tab--content b {
    font-weight: 700;
    color: var(--primary-color);
}

/* Адаптивность для описания товара */
@media only screen and (min-width: 768px) {
    #description .product__tab--content h2,
    .product__tab--content h2 {
        font-size: 2.2rem;
        line-height: 3rem;
    }
    
    #description .product__tab--content h3,
    .product__tab--content h3 {
        font-size: 2rem;
        line-height: 2.8rem;
    }
    
    #description .product__tab--content p,
    .product__tab--content p {
        font-size: 1.6rem;
        line-height: 2.8rem;
    }
}

@media only screen and (min-width: 992px) {
    #description .product__tab--content h2,
    .product__tab--content h2 {
        font-size: 2.5rem;
        line-height: 3.2rem;
    }
    
    #description .product__tab--content h3,
    .product__tab--content h3 {
        font-size: 2.2rem;
        line-height: 3rem;
    }
    
    #description .product__tab--content p,
    .product__tab--content p {
        font-size: 1.7rem;
        line-height: 3rem;
    }
}

/* Небольшие отступы на мобильных устройствах */
@media only screen and (max-width: 767px) {
    #description .product__tab--content,
    .product__tab--content {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* ===== СТИЛИ ДЛЯ МАТЕРИАЛОВ (БЛОГА) ===== */
.entry__blog {
    font-size: 1.5rem;
    line-height: 2.6rem;
    color: var(--text-gray-color);
}

/* Заголовки в материалах */
.entry__blog h2 {
    font-size: 2.2rem;
    line-height: 3rem;
    margin-bottom: 2rem;
    font-weight: 700;
    font-family: var(--work-sans);
    color: var(--primary-color);
}

.entry__blog h3 {
    font-size: 2rem;
    line-height: 2.8rem;
    margin-bottom: 1.8rem;
    font-weight: 700;
    font-family: var(--work-sans);
    color: var(--primary-color);
}

/* Параграфы в материалах */
.entry__blog p {
    margin-bottom: 2rem;
    line-height: 2.6rem;
    color: var(--text-gray-color);
    text-align: justify; /* Выравнивание по ширине */
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
    width: 100%;
}

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

/* Списки в материалах */
.entry__blog ul,
.entry__blog ol {
    margin-bottom: 2rem;
    padding-left: 2.5rem;
}

.entry__blog li {
    color: var(--text-gray-color);
    font-size: 1.5rem;
    line-height: 2.8rem;
    margin-bottom: 0.8rem;
    list-style-type: disc;
    text-align: justify;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
}

.entry__blog ol li {
    list-style-type: decimal;
}

.entry__blog li:last-child {
    margin-bottom: 0;
}

/* Вложенные списки */
.entry__blog ul ul,
.entry__blog ol ol,
.entry__blog ul ol,
.entry__blog ol ul {
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
}

/* Ссылки в материалах */
.entry__blog a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
}

.entry__blog a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Изображения в материалах */
.entry__blog img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    margin: 2rem 0;
    display: block;
}

/* Видео (iframe) в материалах */
.entry__blog iframe {
    width: 100%;
    min-height: 360px;
    border-radius: 1rem;
    margin: 2rem 0;
    display: block;
}

/* Жирный текст в материалах */
.entry__blog strong,
.entry__blog b {
    font-weight: 700;
    color: var(--primary-color);
}

/* Курсив в материалах */
.entry__blog em,
.entry__blog i {
    font-style: italic;
}

/* Нумерованные списки в специфичных блоках (как в примере с BMW) */
.entry__blog ol {
    margin-bottom: 2rem;
    padding-left: 2.5rem;
}

.entry__blog ol li {
    list-style-type: decimal;
    margin-bottom: 0.8rem;
}

/* Адаптивность для материалов */
@media only screen and (min-width: 768px) {
    .entry__blog {
        font-size: 1.6rem;
        line-height: 2.8rem;
    }
    
    .entry__blog h2 {
        font-size: 2.5rem;
        line-height: 3.2rem;
    }
    
    .entry__blog h3 {
        font-size: 2.2rem;
        line-height: 3rem;
    }
    
    .entry__blog p {
        font-size: 1.6rem;
        line-height: 2.8rem;
    }
    
    .entry__blog li {
        font-size: 1.6rem;
        line-height: 2.8rem;
    }
    
    .entry__blog iframe {
        min-height: 400px;
    }
}

@media only screen and (min-width: 992px) {
    .entry__blog h2 {
        font-size: 3rem;
        line-height: 3.6rem;
    }
    
    .entry__blog h3 {
        font-size: 2.5rem;
        line-height: 3.2rem;
    }
    
    .entry__blog p {
        font-size: 1.7rem;
        line-height: 3rem;
    }
    
    .entry__blog li {
        font-size: 1.7rem;
        line-height: 3rem;
    }
    
    .entry__blog iframe {
        min-height: 450px;
    }
}

@media only screen and (min-width: 1200px) {
    .entry__blog h2 {
        font-size: 3rem;
        line-height: 3.8rem;
    }
    
    .entry__blog h3 {
        font-size: 2.5rem;
        line-height: 3.4rem;
    }
    
    .entry__blog iframe {
        min-height: 500px;
    }
}

@media only screen and (min-width: 1600px) {
    .entry__blog h2 {
        font-size: 3.7rem;
        line-height: 4.5rem;
    }
    
    .entry__blog h3 {
        font-size: 3rem;
        line-height: 3.8rem;
    }
}

/* Отступы на мобильных для материалов */
@media only screen and (max-width: 767px) {
    .entry__blog {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .entry__blog iframe {
        min-height: 250px;
    }
}

@media only screen and (max-width: 479px) {
    .entry__blog iframe {
        min-height: 200px;
    }
}


/* ===== ВЫРАВНИВАНИЕ ТЕКСТА В СПИСКЕ ТОВАРОВ ===== */

/* Основной класс для описания в списке товаров */
.product__list--items__content--desc {
    text-align: justify;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
    width: 100%;
    color: var(--text-gray-color);
    font-size: 1.5rem;
    line-height: 2.6rem;
}

/* Если описание находится внутри других блоков */
.product__card--list__content .product__list--items__content--desc,
.product__card--content .product__list--items__content--desc {
    text-align: justify;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
    width: 100%;
}

/* Адаптивность для разных разрешений */
@media only screen and (min-width: 768px) {
    .product__list--items__content--desc {
        font-size: 1.6rem;
        line-height: 2.8rem;
    }
}

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

/* Небольшие отступы на мобильных устройствах */
@media only screen and (max-width: 767px) {
    .product__list--items__content--desc {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* Для очень маленьких экранов */
@media only screen and (max-width: 479px) {
    .product__list--items__content--desc {
        padding-left: 3px;
        padding-right: 3px;
        font-size: 1.4rem;
        line-height: 2.4rem;
    }
}

/* Если в будущем появятся списки внутри описания товара */
.product__list--items__content--desc ul,
.product__list--items__content--desc ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.product__list--items__content--desc li {
    text-align: justify;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
    margin-bottom: 0.5rem;
    list-style-type: disc;
}

.product__list--items__content--desc ol li {
    list-style-type: decimal;
}

.accordion__items--body__desc {
    text-align: justify;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
    width: 100%;
}

.reviews__comment--content__desc {
    text-align: justify;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
    width: 100%;
}

.product__details--media .product__media--right {
    width: 100%;
    padding-left: 0;
}

.product__details--media {
    align-items: flex-start;
}

/* ===== УСИЛЕННЫЕ СТИЛИ ДЛЯ КНОПОК ===== */

/* Основные стили для primary__btn - переопределяем для надежности */
.primary__btn {
    font-weight: 400;
    display: inline-block;
    font-size: 1.4rem;
    line-height: 3.4rem;
    height: 3.4rem;
    padding: 0 1.5rem;
    letter-spacing: 0.2px;
    border-radius: 0.3rem;
    background: var(--secondary-color);
    color: var(--white-color);
    border: 0;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    text-decoration: none;
    text-align: center;
}

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

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

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

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

@media only screen and (min-width: 1600px) {
    .primary__btn {
        font-size: 1.8rem;
        line-height: 5.2rem;
        height: 5.2rem;
        padding: 0 3rem;
    }
}

/* Стили для кнопки "Оформить заказ" на странице checkout */
.checkout__now--btn.primary__btn {
    width: 100%;
    background: var(--secondary-color);
    color: var(--white-color);
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: 0.5px;
    margin-top: 15px;
    padding: 0 1.5rem;
    height: 4.5rem;
    line-height: 4.5rem;
    border-radius: 0.5rem;
}

.checkout__now--btn.primary__btn:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Стили для кнопок в мини-корзине */
.minicart__button--link.primary__btn {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 4rem;
    height: 4rem;
    padding: 0 1.8rem;
    margin-right: 1rem;
    border-radius: 0.5rem;
}

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

.minicart__button--link.primary__btn:hover {
    transform: translateY(-2px);
}

@media only screen and (min-width: 768px) {
    .minicart__button--link.primary__btn {
        font-size: 1.5rem;
        line-height: 4.2rem;
        height: 4.2rem;
        padding: 0 2rem;
    }
}

/* Стили для кнопок в корзине (страница cart) */
.cart__summary--footer__btn.primary__btn {
    background: var(--secondary-color);
    font-weight: 600;
}

.cart__summary--footer__btn.primary__btn:hover {
    background: var(--primary-color);
}

/* Стили для кнопки удаления */
.cart__remove--btn {
    background: var(--white-color);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

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

.cart__remove--btn svg {
    width: 1.6rem;
    height: 1.6rem;
}

/* Стили для кнопок в мини-корзине при удалении */
.minicart__product--remove {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #999;
    cursor: pointer;
    padding: 0;
    margin-left: 1rem;
    text-decoration: underline;
}

.minicart__product--remove:hover {
    color: var(--secondary-color);
}

/* Стили для заблокированных кнопок */
.primary__btn:disabled,
.checkout__now--btn.primary__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

/* Стили для кнопки при загрузке */
.primary__btn.loading,
.checkout__now--btn.primary__btn.loading {
    position: relative;
    color: transparent;
}

.primary__btn.loading::after,
.checkout__now--btn.primary__btn.loading::after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: 50%;
    left: 50%;
    margin: -1rem 0 0 -1rem;
    border: 2px solid var(--white-color);
    border-top-color: transparent;
    border-radius: 50%;
    animation: button-spinner 0.6s linear infinite;
}

@keyframes button-spinner {
    to {
        transform: rotate(360deg);
    }
}