@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;
  --rubik: "Rubik", sans-serif;
  --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(--rubik);
  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);
}

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

/* 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;
  cursor: pointer;
  transition: all 0.3s ease;
}

.offcanvas__close--btn:hover {
  transform: translateX(-2px);
}

.offcanvas__close--btn::before,
.offcanvas__close--btn::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  content: "";
  background-color: var(--black-color);
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Top arrow line */
.offcanvas__close--btn::before {
  transform: translate(-50%, -50%) translate(2px, -3px) rotate(-45deg);
}

/* Bottom arrow line */
.offcanvas__close--btn::after {
  transform: translate(-50%, -50%) translate(2px, 3px) rotate(45deg);
}

/* Hover effects */
.offcanvas__close--btn:hover::before {
  transform: translate(-50%, -50%) translate(1px, -3px) rotate(-45deg);
}

.offcanvas__close--btn:hover::after {
  transform: translate(-50%, -50%) translate(1px, 3px) rotate(45deg);
}

/* Active/pressed state */
.offcanvas__close--btn:active {
  transform: translateX(-1px) scale(0.95);
}

.offcanvas__close--btn:active::before {
  transform: translate(-50%, -50%) translate(3px, -3px) rotate(-45deg);
}

.offcanvas__close--btn:active::after {
  transform: translate(-50%, -50%) translate(3px, 3px) rotate(45deg);
}

/* Optional: Add a subtle background on hover */
.offcanvas__close--btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

/* Focus state for accessibility */
.offcanvas__close--btn:focus {
  outline: 2px solid var(--black-color);
  outline-offset: 2px;
}

/* Alternative version with a more pronounced arrow */
.offcanvas__close--btn.arrow-style::before,
.offcanvas__close--btn.arrow-style::after {
  width: 10px;
  height: 2px;
}

.offcanvas__close--btn.arrow-style::before {
  transform: translate(-50%, -50%) translate(3px, -2px) rotate(-45deg);
}

.offcanvas__close--btn.arrow-style::after {
  transform: translate(-50%, -50%) translate(3px, 2px) rotate(45deg);
}

.offcanvas__close--btn.arrow-style:hover::before {
  transform: translate(-50%, -50%) translate(2px, -2px) rotate(-45deg);
}

.offcanvas__close--btn.arrow-style:hover::after {
  transform: translate(-50%, -50%) translate(2px, 2px) 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);
  line-height: 3.8rem;
  border-radius: 50%;
  color: var(--white-color);
}

.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;
height: 48px !important;
  }
}

@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;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

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

@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: 5px 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;
    padding-right: 0 !important;
  }
}

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

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

.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/hero.webp);
  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;
  bottom: 23px !important;
  left: 50%;
  width: auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  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: translateX(-50%);
  transform: translateX(-50%);
}

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

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

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

@media only screen and (max-width: 767px) {
  .slider__pagination.swiper-pagination {
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    bottom: 23px !important;
  }
}

  .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/hero.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: right;
  background-size: contain;
}

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

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

.home2__slider--items__bg.two {
  background: url(../img/products/2/Jumbo-Bags.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: right;
  background-size: contain;
}

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

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

.home2__slider--items__bg.three {
  background: url(../img/products/3/Jumbo-U-2-Bag.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: right;
  background-size: contain;
}

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

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

.home2__slider--items__bg.four {
  background: url(../img/products/4/U-2-Panel-Jumbo-Bag.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: right;
  background-size: contain;
}

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

@media only screen and (max-width: 450px) {
  .home2__slider--items__bg.four {
    background-position: 50%;
  }
}
.home2__slider--items__bg.five {
  background: url(../img/products/5/Conductive-C-Type-Fibc-Bags.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: right;
  background-size: contain;
}

@media only screen and (max-width: 575px) {
  .home2__slider--items__bg.five {
    background-position: 50%;
  }
}
.slider__section--bg2 {
  background-color: antiquewhite;
}
@media only screen and (max-width: 450px) {
  .home2__slider--items__bg.five {
    background-position: 50%;
  }
}

.home2__slider--items__bg.six {
  background: url(../img/products/6/C-Type-Fibc-Bags.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: right;
  background-size: contain;
}

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

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

@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: 50%;
  }
}

@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.webp);
  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%;
aspect-ratio:1/1;
}

.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-color: #232031 !important;
  background: url(../img/hero.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: right;
  background-size: contain;
}

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

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

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

.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-color: #14222e !important;
  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);
}

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

.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: 0.3s;
  transition: 0.3s;
  display: none;
}

@media only screen and (max-width: 767px) {
  .footer__widget--title__arrowdown--icon {
    display: block;
  }
}

.footer__widget.active {
  padding-bottom: 3rem;
}

.footer__widget.active .footer__widget--title__arrowdown--icon {
  -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: 0.3s;
  transition: 0.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.webp); */
  background-color:antiquewhite;
  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: 5rem;
    line-height: 6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .breadcrumb__content--title {
    font-size: 6rem;
    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: 50%;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
}

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

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

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