@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
*/
body {
  background-color: #f8f5f0 !important;
  margin: 0;
  padding: 0;
 
}
:root {
  --primary-color: #123A32;
  --secondary-color: #123A32;
  --yellow-color: #02876f;
  --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: 600;
  --body-line-height: 2.6rem;
  --headings-weight: 700;
  --transition: all 0.3s ease 0s;
  --container-fluid-offset: 16rem;
}
h2{
  color:#123A32;
}
.color-scheme-1 {
  --secondary-color: #123A32;
}

.color-scheme-2 {
  --secondary-color: #123A32;
}

.color-scheme-3 {
  --secondary-color: #1e1e1e666;
}

.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);
}
.footer__widget--menu__text:hover{
  color:white !important;
}
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: 1300px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.offcanvas__account--items {
  padding: 28px 17px 20px;
}

.offcanvas__account--items__icon {
  width: 3rem;
  height: 3rem;
  text-align: center;
  background: var(--secondary-color);
  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: 40px;
    margin-bottom: 20px;
  }
  .main__header--inner{
    height: 80px;
  }
}

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

.main__logo--img{
  width:120px;
  height:auto;
}

@media (max-width:575px){
  .main__logo--img{
    width:95px;
    margin-top: 20px;
  }
}



.header__topbar {
  padding: 1.2rem 0;
  border-bottom: 1px solid #c6A75E;
}

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

.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.1rem 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: #123A32;
  font-weight: bold;
  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;
  color:var(--secondary-color)
}

.mega__menu--items {
  position: static;
}

.header__mega--menu {
  position: absolute;
  z-index: 99;
  top: 100%;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  margin-top: 20px;
  padding: 25px;
  list-style: none;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  visibility: hidden;
  opacity: 0;
  background-color: var(--white-color);
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.header__mega--menu__li {
  padding: 3px 15px;
  width: 20%;
}

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

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

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

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

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

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

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

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

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

.offCanvas__minicart {
  position: fixed;
  width: 310px;
  height: 100%;
  padding: 18px 15px 30px;
  background: var(--white-color);
  z-index: 999;
  right: 0;
  top: 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  overflow-y: auto;
  -webkit-box-shadow: 0 0 15px rgba(5, 0, 0, 0.1);
  box-shadow: 0 0 15px rgba(5, 0, 0, 0.1);
  visibility: hidden;
}

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

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

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

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

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

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

.minicart__title {
  font-weight: 600;
}

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

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

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

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

.minicart__product {
  margin-bottom: 17px;
}

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

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

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

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

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

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

.minicart__thumbnail a {
  display: block;
}

.minicart__thumbnail a img {
  display: block;
}

.minicart__text {
  width: calc(100% - 100px);
  padding-left: 10px;
}

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

.minicart__subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 2px;
}

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

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

.minicart__price {
  margin-bottom: 9px;
}

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

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

.minicart__quantity {
  margin-right: 15px;
}

.quantity__box {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.quantity__value {
  display: inline-block;
  border: 1px solid var(--border-color2);
  margin: 0px;
  width: 3.3rem;
  height: 3rem;
  text-align: center;
  padding: 0;
  background: var(--gray-color2);
  cursor: pointer;
  font-size: 2rem;
  font-weight: 500;
}

.quantity__value.decrease {
  margin-right: -4px;
  border-radius: 13px 0 0 13px;
}

.quantity__value.increase {
  margin-left: -4px;
  border-radius: 0 13px 13px 0;
}

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

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

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

.minicart__amount_list {
  margin-bottom: 10px;
}

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

.minicart__conditions {
  padding: 20px 0;
}

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

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

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

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

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

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

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

.main__logo--style2 {
  background: #2a2a2a;
  padding: 0 2rem;
  height: 7rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media only screen and (min-width: 1200px) {
  .main__logo--style2 {
    padding: 0 3rem;
    height: 7.8rem;
  }
}

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

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

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

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

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

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

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

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

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

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

.search__open--btn.style2 {
  width: 3.5rem;
  height: 3.5rem;
  background: #e0e0e0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
}

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

.minicart__open--btn__style2 {
  width: 3.5rem;
  height: 3.5rem;
  background: #e0e0e0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.header__social {
  margin-left: 3rem;
}

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

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

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

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

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

/*
    3. Slider CSS
*/
.slider__section--bg {
  background: url(../img/slider/home1-slider-bg.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;
  color:#173f36;
}

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

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

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

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

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

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

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

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

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

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

.bideo__play--icon {
  width: 4.5rem;
  height: 4.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--secondary-color);
  background: var(--white-color);
  border: 3px solid var(--secondary-color);
  position: relative;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-animation: animate 2s linear infinite;
  animation: animate 2s linear infinite;
  -webkit-transform: scale(1);
  transform: scale(1);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* .slider__section--bg3 {
  background: url(../img/allvideo/banner-5.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  height: 320px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
} */

.slider__section--bg3 {
  /* This adds a 50% black mask (rgba 0,0,0,0.5) over the image */
  background: 
  /* linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)), */
   linear-gradient(rgba(251, 243, 230, 0.2), rgba(247, 228, 195, 0.2)),
    url(../img/banner/banner-1.png);
  
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  
 
}
@media only screen and (min-width: 768px) {
  .slider__section--bg3 {
    height: 500px;
  }
}

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

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

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

@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.9rem;
  width: 100%;
  color:#c6A75E;
  font-size: 23px !important;
  line-height: 40px !important;
  font-weight: 500 !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.services__card--number {
  width: 5.3rem;
  height: 5.3rem;
  border: 1px solid var(--white-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media only screen and (max-width: 350px) {
  .project__card--content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.project__card--btn {
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid var(--secondary-color);
  color: var(--secondary-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.featured__product--card__icon {
  background: var(--secondary-color);
  color: var(--white-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto 1.2rem;
  width: 5.5rem;
  height: 5.5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.product__rating {
  margin-bottom: 1.6rem;
}

.rating__list {
  margin-right: 0.4rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.product__card--action__btn {
  width: 2.8rem;
  height: 2.8rem;
  color: var(--secondary-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
}

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

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

.product__card--action__btn svg {
  width: 2.8rem;
}

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

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

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

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

.deals__countdown .countdown__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  border: 1px solid var(--white-color);
  text-align: center;
  padding: 0.6rem 0;
  margin-right: 1rem;
  width: 60px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.display__banner--content__desc {
  width: 100%;
  margin: 0 auto 1.8rem;
  font-size: 16px;
  color: #1e1e1e;
}

@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: #123A32;
  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 #c6A75E;
  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 #c6A75E;
  color: #c6A75E;
  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: 145px;
  }
}

@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;
    font-size: 13px;
  }
}

.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/banner-1.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 5%;
  background-size: cover;
  height: 180px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

@media only screen and (min-width: 480px) {
  .breadcrumb__bg {
    height: 200px;
  }
}

@media only screen and (min-width: 576px) {
  .breadcrumb__bg {
    background-position: center center;
  }
}

@media only screen and (min-width: 768px) {
  .breadcrumb__bg {
    height: 230px;
  }
}

@media only screen and (min-width: 992px) {
  .breadcrumb__bg {
    height: 250px;
  }
}

@media only screen and (min-width: 1200px) {
  .breadcrumb__bg {
    height: 300px;
  }
}

@media only screen and (min-width: 1600px) {
  .breadcrumb__bg {
    height: 400px;
  }
}

.breadcrumb__content {
  position: relative;
}

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

@media only screen and (min-width: 1200px) {
  .breadcrumb__content--title {
    font-size: 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;
  }
}

/* 
    33. Quickview css 
*/
.modal {
  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;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.35s ease-in;
  transition: all 0.35s ease-in;
  z-index: 99;
}

.modal.is-visible {
  visibility: visible;
  opacity: 1;
}

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

.quickview__main--wrapper {
  position: relative;
  max-width: 880px;
  max-height: 80vh;
  border-radius: 10px;
  background: #fff;
  overflow: auto;
  cursor: default;
  padding: 25px;
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

@media only screen and (max-width: 767px) {
  .quickview__main--wrapper {
    max-width: 550px;
  }
}

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

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

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

.quickview__close--btn {
  font-size: 1.8rem;
  padding: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  font-weight: 700;
  border: 1px solid var(--border-color);
  background: var(--white-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

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

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

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

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

.quickview__thumb {
  position: relative;
}

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

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

.quickview__gallery--pagination {
  bottom: 5px !important;
}

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

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

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

.quickview__value--quantity {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 2.2rem;
  line-height: 3.3rem;
}

.quickview__value--quantity.decrease {
  border-radius: 17px 0 0 17px;
}

.quickview__value--quantity.increase {
  border-radius: 0 17px 17px 0;
}

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

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

.variant__wishlist--icon {
  margin-left: 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media only screen and (max-width: 991px) {
  .variant__wishlist--icon {
    margin-left: 1rem;
    font-size: 1.4rem;
  }
}

@media only screen and (max-width: 479px) {
  .variant__wishlist--icon {
    display: block;
    margin-left: 0;
    margin-top: 1rem;
  }
}

.quickview__value--quantity {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 2.2rem;
  line-height: 3.3rem;
}

.quickview__value--quantity.decrease {
  border-radius: 17px 0 0 17px;
}

.quickview__value--quantity.increase {
  border-radius: 0 17px 17px 0;
}

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

.quickview__cart--btn {
  height: 3.8rem;
  line-height: 3.8rem;
  padding: 0 17px;
  margin-left: 12px;
  font-size: 1.4rem;
}

@media only screen and (min-width: 992px) {
  .quickview__cart--btn {
    padding: 0 25px;
    margin-left: 15px;
    font-size: 1.5rem;
  }
}

.quickview__social--title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 15px;
}

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

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

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

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

.quickview__variant--wishlist__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
/*# sourceMappingURL=style.css.map */
/* logo */


/* header */
/* Fix for the multi-level dropdown overlap */
.header__sub--menu__items {
    position: relative; /* Parent must be relative */
}

/* Position the second level menu to the right of the first one */
.header__sub--menu__items .second-level {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 100%; /* This is the key: pushes it 100% to the right */
    width: 280px; /* Adjust based on your text length */
    background: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    z-index: 99;
    border-radius: 0 5px 5px 5px;
}


/* Ensure sub-menu links are block-level for easy clicking */
.header__sub--menu__link {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* First level Jewellery dropdown hidden initially */
.header__sub--menu {
    display: none;
}

/* Show Jewellery main list when active */
.header__menu--items.active > .header__sub--menu {
    display: block;
}

/* Second level hidden initially */
.second-level {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 260px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    z-index: 99;
}

/* Show second level when active */
.header__sub--menu__items.active > .second-level {
    display: block;
}

/* Parent relative */
.header__sub--menu__items {
    position: relative;
    cursor: pointer;
}

/* PLUS ICON STYLE */
.menu__plus--icon {
    font-size: 18px;
    margin-left: 5px;
}

/* categery */
:root {
  --primary-color: #123A32;
  --size: 230px; /* Big circle size */
}

.category-section {
  padding: 40px 0;
  /* background-color: #fff; */
}

.category-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  border-bottom: 2px solid #c8a96a;
}

.category-card {
  text-align: center;
  flex: 0 1 var(--size);
  margin-bottom: 30px;
}

/* Container to stack border and image */
.circle-container {
  position: relative;
  width: var(--size);
  height: var(--size);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The Animated Dashed Border */
.rotating-border {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: glowRotate 6s linear infinite;
}

/* Smooth Premium Glow Animation */
@keyframes glowRotate {
  0% {
    box-shadow:
      0 0 10px rgba(198,167,94,0.3),
      0 0 20px rgba(198,167,94,0.2),
      0 0 30px rgba(198,167,94,0.1);
    transform: rotate(0deg);
  }

  50% {
    box-shadow:
      0 0 20px rgba(198,167,94,0.5),
      0 0 40px rgba(198,167,94,0.4),
      0 0 60px rgba(198,167,94,0.2);
  }

  100% {
    box-shadow:
      0 0 10px rgba(198,167,94,0.3),
      0 0 20px rgba(198,167,94,0.2),
      0 0 30px rgba(198,167,94,0.1);
    transform: rotate(360deg);
  }
}

/* Image Wrapper */
.image-wrapper {
  width: calc(var(--size) - 20px); /* Gap for border */
  height: calc(var(--size) - 20px);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Text Styling */
.category-card h3 {
  font-size: 22px;
  color: #333;
  margin: 15px 0 5px;
  font-weight: 600;
}

.category-card a {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  position: relative;
}

/* Hover Effects */
.category-card:hover img {
  transform: scale(1.15); /* Zoom in image */
}

.category-card a:hover {
  text-decoration: underline;
}

/* Border Animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* product */

:root {
  --primary: #123A32;
  --bg-light: #fcf9f6;
  --text-dark: #222;
}

.featured-scroll-section {
  padding: 40px 0;
  /* background-color: var(--bg-light); */
  overflow: hidden;
}
.display__banner--section{
    padding: 40px 0;

}
.section-heading {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  color: var(--text-dark);
  margin-bottom: 50px;
  letter-spacing: 2px;
}

/* Viewport for the scroll */
.marquee-viewport {
  width: 100%;
  /* overflow: hidden; */
  position: relative;
}

/* The actual scrolling container */
.marquee-content {
  display: flex;
  gap: 80px;
  width: max-content;
  animation: scrollLinear 40s linear infinite; /* Adjust speed here */
}

/* Pause scroll on hover for user friendliness */
.marquee-viewport:hover .marquee-content {
  animation-play-state: paused;
}

.product-item {
  width: 320px;
  /* background: #fff; */
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  position: relative;
  transition: transform 0.3s ease;
}

.product-img-box {
  width: 100%;
  height: 320px;
  overflow: hidden;
  border-radius: 4px;
}

.product-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-badge {
  position: absolute;
  top: 25px;
  left: 25px;
  background: var(--primary);
  color: #fff;
  padding: 4px 12px;
  font-size: 11px;
  text-transform: uppercase;
  z-index: 10;
}

.product-details {
  padding-top: 15px;
  text-align: center;
}

.product-details h3 {
  font-size: 19px;
  margin-bottom: 8px;
  font-weight: 500;
  color: #1e1e1e;
}

.product-price {
  display: block;
  font-size: 18px;
  color: #c8a96a;
  font-weight: 700;
  margin-bottom: 12px;
}

.shop-btn {
  font-size: 16px;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid var(--primary);
  padding: 10px;
  transition: all 0.3s ease;
  background-color: #123A32;
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.shop-btn:hover {
  color: white;
}

@media (max-width: 576px) {

  .product-item{
    width: 100%;
  }

  .shop-btn{
    display: block;
    width: 100%;
    text-align: center;
  }
  .product-details h3{
  min-height: 48px;
}

}
/* Animation Logic */
@keyframes scrollLinear {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Moves by half of the total content width */
    transform: translateX(-50%);
  }
}

/* Product Image Hover Zoom */
.product-item:hover img {
  transform: scale(1.1);
}
/* --- RESPONSIVE STYLES --- */

/* 1. Tablet Styles (Screens under 1024px) */
@media screen and (max-width: 1024px) {
    :root {
        --size: 180px; /* Smaller circles for tablets */
    }

    .category-grid {
        flex-wrap: wrap; /* Allow items to drop to next line */
        gap: 20px;
        padding-bottom: 20px;
    }

    .product-item {
        width: 280px; /* Slightly narrower product cards */
    }

    .product-img-box {
        height: 280px;
    }
}

/* 2. Mobile Styles (Screens under 768px) */
@media screen and (max-width: 768px) {
    :root {
        --size: 150px; /* Even smaller circles for mobile */
    }

    .section-heading {
        font-size: 24px;
        margin-bottom: 30px;
    }

    /* Category Section Mobile */
    .category-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 items per row */
        gap: 15px;
        justify-items: center;
    }

    .category-card {
        margin-bottom: 20px;
    }

    .category-card h3 {
        font-size: 18px;
    }

    /* Product Section Mobile */
    .product-item {
        width: 240px; /* Scale down marquee items */
    }

    .product-img-box {
        height: 240px;
    }

    .product-details h3 {
        font-size: 16px;
    }

    .marquee-content {
        gap: 15px;
        animation-duration: 25s; /* Speed up slightly since path is shorter */
    }
}

/* 3. Small Mobile (Screens under 480px) */
@media screen and (max-width: 480px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr); /* Keep 2 per row but reduce text */
    }
    
    :root {
        --size: 140px;
    }

    .product-item {
        width: 200px;
    }

    .product-img-box {
        height: 200px;
    }
}
/* video */
:root {
    --primary-gold: #123A32;
    --dark-ebony: #1a1a1a;
}

.video-banner-section {
    width: 100%;
    height: 650px; /* Adjust height as needed */
    /* background: #fff; */
    overflow: hidden;
    padding: 30px;
}

.split-container {
    display: flex;
    height: 100%;
    width: 100%;
}

/* Video Side Styles */
.video-half {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.side-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay-tint {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(45deg, rgba(217, 111, 67, 0.1), transparent);
}

/* Content Side Styles */
.content-half {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    background: #fdfaf7; /* Soft cream background */
}

.content-wrapper {
    max-width: 500px;
}

.sub-title {
    color: var(--primary-gold);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    font-size: 14px;
    display: block;
    margin-bottom: 15px;
}

.main-title {
    font-size: 48px;
    line-height: 1.1;
    color: #123A32;
    margin-bottom: 20px;
}

.main-title span {
    font-style: italic;
    font-weight: 300;
}

.description {
    color: #1e1e1e;
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 16px;
}

/* Promo Box with Brand Color */
.promo-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    padding: 20px;
    background: #fff;
    border-left: 4px solid var(--primary-gold);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.offer-circle {
    background: var(--primary-gold);
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.percent { font-size: 16px; }
.off-text { font-size: 10px; }

.starting-label { font-size: 12px; color: black; margin: 0; }
.old-price { text-decoration: line-through; color: #bbb; margin-right: 10px; }
.new-price { font-size: 24px; color: var(--dark-ebony); font-weight: 700; }

/* Modern Button */
.modern-shop-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background:#123A32 ;
    color: #fff;
    padding: 18px 35px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0;
    transition: all 0.3s ease;
}

.modern-shop-btn:hover {
    background: var(--primary-gold);
    transform: translateY(-3px);
}

/* Responsive for Mobile */
@media (max-width: 992px) {
    .split-container { flex-direction: column; }
    .video-banner-section { height: auto; }
    .video-half { height: 300px; }
    .content-half { padding: 40px 20px; }
    .main-title { font-size: 32px; }
}
.footer__logo--img {
  width:100%;
  height:150px;
}
/* header */

/* .main__header{
  background-color: #123A32;
 
} */
 /* craft */

 .luxury-info-strip {
  text-align: center;
  padding: 60px 30px;
  max-width: 1000px;
  margin: 0 auto;
  /* background: #fffaf5; */
}

.divider-icon {
  font-size: 28px;
  color: #c8a96a;
  margin-bottom: 15px;

}

.luxury-title {
  font-size: 35px;
  font-weight: 600;
  margin-bottom: 15px;
}

.luxury-description {
  margin: auto;
  color: #555;
  font-size: 21px;
  line-height: 1.9;
}

.luxury-features {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.luxury-features span {
  font-size: 22px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.luxury-features i {
  color: #c8a96a;
  font-size: 25px;
}
@media (max-width: 767px) {

  .luxury-info-strip {
    padding: 40px 15px;
    width: 100%;
  }

  .luxury-title {
    font-size: 24px;
    line-height: 1.4;
  }

  .luxury-description {
    font-size: 16px;
    line-height: 1.7;
    padding: 0 5px;
  }

  .luxury-features {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .luxury-features span {
    font-size: 16px;
    justify-content: center;
    text-align: center;
  }

  .luxury-features i {
    font-size: 18px;
  }

}
/* newbanner */

/* =========================
   GLOBAL FONT SETUP
========================= */
body {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #555;
}

/* =========================
   HERO HEADLINE
========================= */
.main-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 45px;
  line-height: 1.2;
  margin-bottom: 18px;
}

/* Mobile Size */
@media (max-width: 768px) {
  .main-title {
    font-size: 28px;
  }
  .section-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 600;
}

/* =========================
   PRODUCT NAME
========================= */
.product-title {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 600;
}

/* =========================
   BODY TEXT
========================= */
.slider__content--desc {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 400;
  max-width: 450px;
}

/* =========================
   BUTTON STYLE
========================= */
.primary__btn {
  font-family: 'Poppins', sans-serif;
  /* font-weight: 500;
  font-size: 14px; */
  text-transform: uppercase; /* optional */
  /* letter-spacing: 1px;
  padding: 12px 28px;
  border-radius: 30px; */
}


.header__contact--info__list{
  font-size: 11px;
}
.slider__content--desc.style3{
  font-size: 16px;
  line-height: 30px;
}
.header__contact--info.style3 .header__contact--info__list:last-child{
  text-align: center;
}
}
html, body {
  width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}
/* =========================
   SECTION TITLES
========================= */
/* header */

/* Navigation Reset & Base Styles */
.custom-nav {
    padding: 10px 0;
}

.main-menu {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu__item {
    position: relative;
    padding: 15px;
}

.main-menu__link {
    text-decoration: none;
    font-size: 17px;
    color:#123A32;
    font-weight: 600 !important;
    text-transform: capitalize;
    transition: color 0.3s;
}

.main-menu__link:hover {
    color: #b19470; /* Elegant gold/brass color */
}

/* Mega Menu Container */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 40%;
    right:40%;
    transform: translateX(-10%);
    width: 900px; /* Adjust based on site width */
    background: #f8f5f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    border-top: 2px solid #2e4d44; /* Dark green accent like your logo */
}

.main-menu__item:hover .mega-menu {
    opacity: 1;
    visibility: visible;
}

.mega-menu__container {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.2fr 2fr;
    padding: 30px;
    gap: 20px;
}

/* Typography & Lists */
.mega-menu__title {
    font-size: 18px;
    color: #123A32;
    margin-bottom: 15px;
    font-weight: 600;
}

.mega-menu__list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.mega-menu__list li {
    margin-bottom: 8px;
    line-height: 28px;
}

.mega-menu__list a {
    text-decoration: none;
    color: #1e1e1e;
    font-size: 16px;
    transition: padding-left 0.2s;
}

.mega-menu__list a:hover {
    color: #b19470;
    padding-left: 5px;
}

.mega-menu__divider {
    height: 1px;
    background: #f0f0f0;
    margin: 15px 0;
}

/* Image Handling */
.mega-menu__image-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
}

.mega-menu__image-area img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    /* mask-image: linear-gradient(to right, transparent, black 20%);
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%); */
}
/* 1. Header Layout adjustments */
.header-container {
    display: flex;
    justify-content: space-between; /* Pushes Logo, Nav, and Icons apart */
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. Icons Section Styling */
.header-icons {
    display: flex;
    align-items: center;
    gap: 25px; /* Space between the icons */
    padding: 0 15px;
}

.icon-btn {
    text-decoration: none;
    color: #123A32; /* Matching your dark green theme */
    font-size: 20px; /* Matching your menu font size */
    position: relative;
    transition: color 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
}

.icon-btn:hover {
    color: #b19470; /* Gold/brass hover color */
    transform: translateY(-2px);
}

/* 3. Cart Badge Styling */
.cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: #123A32; /* Dark green background */
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 50%;
    min-width: 18px;
    text-align: center;
    border: 1px solid #ffffff; /* Contrast border */
}

/* 4. Fix for Navigation to stay centered */
.custom-nav {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}
/* mobilemenu */

/* --- Professional Mobile Menu Styles --- */

.mob-nav {
    background: #fff;
    width: 100%;
    max-width: 350px;
    height: 100vh;
    overflow-y: auto;
}

/* Header Area (Logo and Close Button) */
.mob-nav__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px; /* Aligned with menu items */
    border-bottom: 1px solid #f5f5f5;
}

.mob-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Main Item Container */
.mob-nav__item {
    border-bottom: 1px solid #f5f5f5;
}

/* THE FIX: Unified spacing for everything */
.mob-nav__link-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px; /* Vertical spacing and consistent 25px left-start */
    cursor: pointer;
    transition: background 0.3s ease;
}

.mob-nav__link-wrapper:hover {
    background-color: #fcfcfc;
}

/* Individual Links */
.mob-nav__link {
    text-decoration: none;
    color: #123A32;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 0; /* REMOVED: This was causing the unequal start */
    display: block;
    width: 100%;
}

/* Icon Styling (+ / -) */
.mob-nav__toggle-icon {
    position: relative;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mob-nav__toggle-icon::before,
.mob-nav__toggle-icon::after {
    content: '';
    position: absolute;
    background-color: #123A32;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Horizontal line */
.mob-nav__toggle-icon::before {
    width: 100%;
    height: 1.5px;
}

/* Vertical line (makes it a +) */
.mob-nav__toggle-icon::after {
    width: 1.5px;
    height: 100%;
}

/* When expanded, turn + into - */
.mob-nav__item.active > .mob-nav__link-wrapper .mob-nav__toggle-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

/* Sub-Menus */
.mob-nav__sub {
    list-style: none;
    padding: 0;
    background-color: #f9f9f9; /* Subtle contrast for depth */
    display: none; /* Controlled by JS */
}

.mob-nav__item.active > .mob-nav__sub {
    display: block;
}

.mob-nav__sub-link {
    text-decoration: none;
    color: #123A32;
    font-size: 15px;
    padding: 12px 40px; /* Pushed in to show hierarchy */
    display: block;
    border-bottom: 1px solid #eee;
}

/* Third Level (Deepest Menu) */
.mob-nav__inner-sub {
    list-style: none;
    padding: 0;
    background-color: #fff;
    display: none;
}

.mob-nav__sub-item.active > .mob-nav__inner-sub {
    display: block;
}

.mob-nav__inner-sub li a {
    text-decoration: none;
    color: #1e1e1e;
    font-size: 16px;
    padding: 10px 55px;
    display: block;
    transition: all 0.2s;
}

.mob-nav__inner-sub li a:hover {
    color: #b19470;
    background-color: #fffaf5;
}
.offcanvas__logo_link img{
  width:150px;
}
/* shop */


        :root {
            --ss-emerald: #1b3022;
            --ss-gold: #c5a059;
            --ss-cream: #f9f7f2;
            --ss-text: #1e1e1e;
            --ss-text-light: #666;
            --ss-light-gray: #f8f5f0;
            --ss-transition: all 0.3s ease;
        }

        body {  color: var(--ss-text); margin: 0; background-color: #f8f5f0; }

        .ss-layout { display: flex; gap: 30px; padding: 30px; max-width: 1350px; margin: 0 auto; }
        
        /* Sidebar Styles */
        .ss-sidebar { width: 200px; flex-shrink: 0; position: sticky; top: 20px; height: fit-content;}
        .ss-filter-widget { margin-bottom: 35px; border-bottom: 1px solid var(--ss-light-gray); padding-bottom: 25px; }
        .ss-filter-titletop { font-size:22px; margin-bottom: 18px;  color: var(--ss-emerald); font-weight: 600; }
        .ss-filter-title { font-size:18px; margin-bottom: 18px; color: var(--ss-emerald);font-weight: 600; }
        .ss-filter-list { list-style: none; padding: 0; margin: 0; }
        .ss-filter-list li { margin-bottom: 12px; display: flex; align-items: center; cursor: pointer; }
        .ss-filter-check { margin-right: 12px; transform: scale(1.2); cursor: pointer; }
        
        .ss-price-slider-wrapper { padding: 10px 0; }
        .ss-slider { width: 100%; accent-color: var(--ss-emerald); cursor: pointer; }
        .ss-price-labels { display: flex; justify-content: space-between; margin-top: 10px; font-weight: 600; font-size: 18px; }

        /* Main Content */
        .ss-main-content { flex-grow: 1; }
        .ss-shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; }
        .ss-result-count { font-size: 20px; color: var(--ss-text-light); }
        .ss-sort-select { border: 1px solid #ccc; padding: 10px 15px; border-radius: 0; font-size: 16px; outline: none; }
        .ss-filter-list label{font-size: 17px;}
        /* Product Grid - Equal Height Cards */
        .ss-product-grid { 
            display: grid; 
            grid-template-columns: repeat(4,1fr); 
            gap: 30px; 
        }

        .ss-product-card { 
            background: #f8f5f0; 
            display: flex; 
            width:250px;
            flex-direction: column; 
            border: 1px solid transparent;
            transition: var(--ss-transition);
        }
        .ss-product-card:hover { border-color: #f0f0f0; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

        .ss-product-image-wrapper { 
            position: relative; 
            overflow: hidden; 
            background: var(--ss-cream);
            aspect-ratio: 4/5; /* Ensures image container is always the same shape */
        }
        
        .ss-product-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        .ss-product-card:hover .ss-product-image { transform: scale(1.05); }

        .ss-wishlist-btn { 
            position: absolute; top: 15px; right: 15px; background: white; border: none; 
            border-radius: 50%; width: 35px; height: 35px; cursor: pointer; 
            box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 2; transition: var(--ss-transition);
            display: flex; align-items: center; justify-content: center; font-size: 18px; color: #ccc;
        }
        .ss-wishlist-btn.active { color: #e74c3c; }

        .ss-product-info { 
            padding: 20px 10px; 
            text-align: center; 
            flex-grow: 1; /* Pushes the button to the bottom */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .ss-product-name { font-size: 18px; margin: 0 0 10px 0; color: var(--ss-text); font-weight: 500; }
        .ss-product-price { font-weight: 700; color: var(--ss-emerald); font-size: 18px; margin-bottom: 15px; }

        .ss-add-cart { 
            width: 100%; background: var(--ss-emerald); color: white; border: none; 
            padding: 12px; cursor: pointer; text-transform: uppercase; 
            letter-spacing: 1.5px; font-weight: 600; font-size: 15px;
            transition: var(--ss-transition);
        }
        .ss-add-cart:hover { background: var(--ss-gold); }

        /* Load More */
        .ss-load-more-container { display: flex;justify-content: center; align-items: center; margin-top: 50px; }
        .ss-load-more { 
            padding: 14px 50px; border: 2px solid var(--ss-emerald); 
            background: transparent; color: var(--ss-emerald);
            cursor: pointer; font-weight: 700; text-transform: uppercase;
            letter-spacing: 1px; transition: var(--ss-transition);
        }
        .ss-load-more:hover { background: var(--ss-emerald); color: #fff; }
        .ss-load-more:disabled { border-color: #ccc; color: #ccc; cursor: not-allowed; }

        @media (max-width: 768px) {
            .ss-layout { flex-direction: column; padding: 20px; }
            .ss-sidebar { width: 100%; position: static; }
            .ss-result-count{font-size: 16px;}
            .ss-shop-toolbar{
              display: flex;flex-direction: column;
            }
            
        }

        @media(max-width:992px){

.ss-product-grid{
    grid-template-columns: repeat(2,1fr);
    gap:20px;
}

.ss-product-card{
    width:100%;
}

}

@media(max-width:576px){

.ss-product-grid{
    grid-template-columns: 1fr;
    gap:15px;
}

.ss-product-card{
    width:100%;
}

}
        /* BREADCRUMB CONTENT */

.breadcrumb__content{
    text-align:center;
    max-width:750px;
    margin:auto;
    padding:20px 15px;
}

/* TITLE */

.breadcrumb__content--title{
    font-size:42px;
    font-weight:600;
    color:#123A32;
    letter-spacing:1px;
    margin-bottom:10px;
    font-family: 'Playfair Display', serif;
    position:relative;
}

/* GOLD LINE BELOW TITLE */

.breadcrumb__content--title::after{
    content:"";
    width:60px;
    height:2px;
    background:#C6A75E;
    display:block;
    margin:12px auto 0;
}

/* DESCRIPTION */

.breadcrumb__description{
    font-size:16px;
    color:#1e1e1e;
    line-height:1.8;
    font-weight: 600;
    margin-top:15px;
    font-family:'Poppins', sans-serif;
}

@media(max-width:768px){

.breadcrumb__content--title{
    font-size:28px;
}

.breadcrumb__description{
    font-size:12px !important;
}

}
/* add to cart */

/* --- Side Drawer Base (Cart & Wishlist) --- */
.side-cart {
    position: fixed;
    top: 0;
    right: -110%; /* Ensures it's fully off-screen */
    width: 400px;  /* Default Desktop Width */
    max-width: 90vw; /* Won't exceed screen width on small devices */
    height: 100%;
    background: #ffffff;
    box-shadow: -10px 0 30px rgba(0,0,0,0.15);
    z-index: 2100;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), right 0.4s ease;
    display: flex;
    flex-direction: column;
}

.side-cart.open {
    right: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) { /* Tablet */
    .side-cart {
        width: 350px;
    }
}

@media (max-width: 480px) { /* Mobile */
    .side-cart {
        width: 100%; /* Full screen on mobile for better UX */
        max-width: 100%;
    }
    .cart-header {
        padding: 15px;
    }
}

/* --- Enhanced Header --- */
.cart-header {
    padding: 24px;
    background: #123A32;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cart-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.close-cart {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    font-size: 24px;
    cursor: pointer;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
}

.close-cart:hover {
    background: rgba(255,255,255,0.1);
    transform: rotate(90deg);
}

/* --- Items List Interior --- */
.cart-items-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    scrollbar-width: thin;
    scrollbar-color: #123A32 #f1f1f1;
}

.cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 15px;
    margin-bottom: 15px;
    padding: 15px;
    background: #fdfdfd;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    transition: 0.2s;
}

.cart-item:hover {
    border-color: #b19470;
}

.cart-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

.item-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.item-name {
    font-size: 14px;
    font-weight: 600;
    color: #123A32;
    margin-bottom: 5px;
}

.item-price {
    font-size: 13px;
    color: #b19470;
    font-weight: 500;
}

.remove-item {
    background: transparent;
    border: none;
    color: #ff6b6b;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;
    padding: 5px;
}

.remove-item:hover {
    transform: scale(1.2);
}

/* --- Premium Footer --- */
.cart-footer {
    padding: 25px;
    background: #f9f9f9;
    border-top: 1px solid #eee;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 700;
    color: #123A32;
}

.checkout-btn {
    width: 100%;
    background: #123A32;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s;
}

.checkout-btn:hover {
    background: #1b4d43;
    box-shadow: 0 4px 12px rgba(18, 58, 50, 0.2);
}

/* --- Overlay Logic --- */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px); /* Makes the background look premium */
    visibility: hidden;
    opacity: 0;
    z-index: 2050;
    transition: 0.3s;
}

.cart-overlay.show {
    visibility: visible;
    opacity: 1;
}
/* Color for active heart icon on product card */
.ss-wishlist-btn.active {
    color: #e74c3c;
    font-weight: bold;
}

/* Reusing your side-cart styles for side-wishlist */
#sideWishlist {
    /* Uses the same side-cart CSS provided earlier */
    border-top: 2px solid #b19470; /* Different accent color for wishlist */
}
/* --- Wishlist Sidebar Specifics --- */
#sideWishlist {
    border-left: 2px solid #b19470; /* Gold accent for wishlist sidebar */
}

/* Wishlist Move to Cart Button Styling */
#sideWishlist .ss-add-cart {
    background: #123A32;
    color: white;
    border: none;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;width:130px
}

#sideWishlist .ss-add-cart:hover {
    background: #b19470;
    transform: translateY(-2px);
}

/* Empty State Styling */
.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: #888;
}

.empty-state i {
    font-size: 50px;
    display: block;
    margin-bottom: 15px;
    color: #f0f0f0;
}

/* Responsive Grid for Wishlist Items */
@media (max-width: 480px) {
    #sideWishlist .cart-item {
        grid-template-columns: 70px 1fr; /* Image and content stack better on tiny screens */
    }
    
    #sideWishlist .item-name {
        font-size: 13px;
    }

    #sideWishlist .remove-item {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .cart-item {
        position: relative; /* For the absolute delete button */
    }
}

/* Scrollbar styling for a cleaner look */
#wishlistItems::-webkit-scrollbar {
    width: 5px;
}

#wishlistItems::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#wishlistItems::-webkit-scrollbar-thumb {
    background: #123A32;
    border-radius: 10px;
}
/* Container for the icons */
.header-icons {
    display: flex;
    align-items: center;
    gap: 20px; /* Space between Search, Heart, and Bag */
    padding: 10px;
}

/* Base style for each icon button */
.icon-btn {
    text-decoration: none;
    color: #123A32; /* Your signature dark green */
    font-size: 20px;
    position: relative; /* Crucial for positioning the badges */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, transform 0.2s ease;
}

.icon-btn:hover {
    color: #b19470; /* Elegant gold hover color */
    transform: translateY(-2px);
}

/* Badge Styling (The 0 count numbers) */
.wishlist-count, 
.cart-count {
    position: absolute;
    top: -8px;      /* Pulls it above the icon */
    right: -10px;    /* Pushes it to the right of the icon */
    background-color: #b19470; /* Gold for wishlist or use #123A32 for cart */
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%; /* Makes it a perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff; /* Adds a white ring to pop against the background */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Specific color for Cart badge to distinguish it */
.cart-count {
    background-color: #123A32;
}

/* Animation when something is added (optional) */
@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.bump {
    animation: pop 0.3s ease-out;
}

/* product details */



/* now0 */

:root {
    --primary-color: #b19470;
    --dark-text: #123A32;
    --light-gray: #f9f9f9;
}

.pd-container {
    display: flex;
    gap: 50px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    font-family: 'Poppins', sans-serif;
}

/* Image Section */
.pd-images-section { flex: 1.2; position: sticky; top: 20px; }
.pd-main-wrapper {
    background: var(--light-gray);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.pd-main-wrapper img { width: 100%; display: block; transition: 0.3s; }
.pd-thumbs { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; }
.pd-thumbs img {
    width: 80px; height: 80px; object-fit: cover;
    border-radius: 12px; cursor: pointer;
    border: 2px solid transparent; transition: 0.3s;
}
.active-thumb { border-color: var(--primary-color) !important; transform: scale(1.05); }

/* Content Section */
.pd-content-section { flex: 1; }
.category-tag { color: var(--primary-color); font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; }
#pdName { font-size: 32px; color: var(--dark-text); margin: 10px 0; }

.pd-price-box { margin: 20px 0; padding: 15px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.price-val { font-size: 28px; font-weight: 700; color: #000; }
.tax-info { display: block; font-size: 16px; color: #888; margin-top: 5px; }

.pd-description { line-height: 1.6; color: #636e72; font-size: 17px; }

.pd-highlights {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 25px 0;
}
.highlight-item { font-size: 16px; color: #444; display: flex; align-items: center; gap: 10px; }
.highlight-item i { color: var(--primary-color); }

.qty-selector { margin-bottom: 30px; }
.qty-selector label { display: block; font-weight: 600; margin-bottom: 10px; }
.qty-controls {
    display: inline-flex; align-items: center; border: 1px solid #ddd; border-radius: 30px; padding: 5px 15px;
}
.qty-controls button {
    background: none; border: none; font-size: 20px; cursor: pointer; width: 30px; color: var(--primary-color);
}
#pdQty { padding: 0 20px; font-weight: 700; min-width: 40px; text-align: center; }

.whatsapp-btn {
    width: 100%; background: #25D366; color: white; border: none; padding: 18px;
    border-radius: 35px; font-size: 18px; font-weight: 600; display: flex;
    justify-content: center; align-items: center; cursor: pointer; transition: 0.3s;
}
.whatsapp-btn:hover { background: #128C7E; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(37,211,102,0.3); }

.pd-trust-footer {
    display: flex; justify-content: space-between; margin-top: 40px; text-align: center;
}
.trust-box p { font-size: 11px; margin-top: 5px; font-weight: 600; color: #777; }

/* Responsive */
@media (max-width: 768px) {
    .pd-container { flex-direction: column; }
    .pd-images-section { position: relative; }
}




/* newabout */



/* aboutus */
/* --- Root & Reset --- */
:root {
    --ss-emerald: #123A32;
    --ss-gold: #b19470;
    --ss-gold-light: #d4c1a7;
    --ss-cream: #fdfbf7;
    --ss-white: #ffffff;
    --ss-text: #2d2d2d;
    --ss-text-light: #555555;
    --ss-transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--ss-white);
    color: var(--ss-text);
    line-height: 28px; /* Professional line height in px */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    line-height: 1.2;
}

p {
    font-size: 17px !important;
    color: var(--ss-text-light);
    font-weight: 300;
    margin-bottom: 2px;
    text-align: justify;
}
.vision-para{
  color:white;
}
/* --- Scroll Animation --- */
.ss-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: var(--ss-transition);
}

.ss-reveal.active {
    opacity: 1;
    transform: translateY(0);
}



/* --- Section 2: Story (About Us) --- */
.ss-story-container {
    padding: 120px 5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
}

.ss-image-overlap {
    position: relative;
}

.ss-main-img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    border-radius: 2px;
}

/* --- Optimized Floating Card --- */
.ss-floating-card {
    position: absolute;
    /* Changed bottom to auto and use top/transform for better control */
    top: 50%; 
    right: -60px;
    transform: translateY(-20%); /* Pulls the card down slightly */
    background: var(--ss-emerald);
    color: var(--ss-white);
    padding: 35px;
    width: 75%;
    box-shadow: 20px 20px 0px var(--ss-gold);
    z-index: 2;
    /* Add this to handle very long text */
    max-height: 90%; 
    overflow-y: auto; 
}

/* Custom Scrollbar for the card if text is HUGE */
.ss-floating-card::-webkit-scrollbar {
    width: 4px;
}
.ss-floating-card::-webkit-scrollbar-thumb {
    background: var(--ss-gold);
}

.ss-floating-card h3 { 
    font-size: 28px; 
    margin-bottom: 12px; 
    color: var(--ss-white); 
}

.ss-floating-card p { 
    color: #e0e0e0; 
    font-size: 14px !important; 
    line-height: 24px; 
    margin-bottom: 10px;
}

/* --- Improved Video Wrapper --- */
.ss-video-wrapper {
    position: relative;
    width: 100%;
    height: 550px; /* Increased height to balance the big content */
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Mobile Fix: Stack them instead of floating */
@media (max-width: 992px) {
    .ss-video-wrapper {
        height: 350px;
    }
    .ss-floating-card {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        transform: translateY(-50px); /* Overlap the video slightly */
        margin: 0 auto;
        box-shadow: 15px 15px 0px var(--ss-gold);
    }
    .ss-story-container {
        gap: 0; /* Tighten gap for mobile */
    }
}

.ss-section-tag {
    color: var(--ss-gold);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 17px;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 20px;
}

.ss-story-text h2 {
    font-size: 45px;
    margin-bottom: 30px;
    color: var(--ss-emerald);
}

/* --- Section 3: Offerings --- */
.ss-offer-bg {
    background-color: var(--ss-cream);
    padding: 120px 5%;
}

.ss-offer-header {
    text-align: center;
    margin-bottom: 80px;
}

.ss-offer-header h2 { font-size: 42px; color: var(--ss-emerald); }

.ss-grid-offer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto;
}

.ss-card-unique {
    background:#f1eeee;
    padding: 50px 35px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: var(--ss-transition);
}

.ss-card-unique:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(18, 58, 50, 0.1);
}

.ss-card-unique i {
    font-size: 35px;
    color: var(--ss-gold);
    margin-bottom: 25px;
    display: block;
}

.ss-card-unique h3 { font-size: 24px; margin-bottom: 15px; color: var(--ss-emerald); }

/* --- Section 4: Vision Split --- */
.ss-vision-split {
    display: flex;
    flex-wrap: wrap;
}

.ss-vision-half {
    flex: 1;
    min-width: 50%;
    padding: 100px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ss-dark-half {
    background-color: var(--ss-emerald);
    color: var(--ss-white);
}

.ss-vision-half h2 { font-size: 42px; margin-bottom: 30px; }
.ss-dark-half h2 { color: var(--ss-white); }

.ss-check-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.ss-check-item i {
    color: var(--ss-gold);
    margin-right: 18px;
    font-size: 20px;
    margin-top: 4px;
}

.ss-check-item span { font-size: 18px; font-weight: 400; }

/* --- Section 5: Footer --- */
.ss-footer-slogan {
    text-align: center;
    padding: 120px 20px;
    background: var(--ss-white);
}

.ss-brand-name { font-size: 64px; color: var(--ss-emerald); margin-bottom: 10px; }
.ss-gold-italic { font-style: italic; color: var(--ss-gold); font-size: 28px !important;text-align: center;font-weight: bold; }
.offer-para{
   color: black; font-size: 22px !important;text-align: center; margin-top: 20px;
}
/* =========================================
   TABLET VIEW (Max 1024px)
   ========================================= */
@media (max-width: 1024px) {
    .ss-story-container {
        grid-template-columns: 1fr;
        gap: 80px;
        padding: 80px 5%;
    }

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

    .ss-story-text h2 { font-size: 42px; }

    .ss-main-img { height: 500px; }

    .ss-floating-card {
        width: 80%;
        bottom: -30px;
        right: 10%;
        padding: 40px;
    }

    .ss-vision-half {
        min-width: 100%;
        padding: 80px 10%;
    }
}

/* =========================================
   MOBILE VIEW (Max 768px)
   ========================================= */
@media (max-width: 768px) {

    .ss-story-text h2 { font-size: 34px; }

    .ss-floating-card {
        position: static;
        width: 100%;
        margin-top: 70px;
        box-shadow: 15px 15px 0px var(--ss-gold);
    }

    .ss-offer-header h2 { font-size: 32px; }

    .ss-vision-half h2 { font-size: 32px; }

    .ss-brand-name { font-size: 48px; }

    .ss-gold-italic { font-size: 22px !important;font-weight: bold; }
    p {
    font-size: 15px !important;
   
}
}

/* =========================================
   SMALL MOBILE VIEW (Max 480px)
   ========================================= */
@media (max-width: 480px) {
    .ss-story-container { padding: 60px 5%; }
    
    .ss-story-text h2 { font-size: 28px; }
    
    .ss-main-img { height: 350px; }

    .ss-card-unique { padding: 40px 20px; }

    .ss-check-item span { font-size: 16px; }

    .ss-brand-name { font-size: 38px; }
}


.ss-main-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the video fill the area like an image */
    display: block;
}

/* Adds a subtle dark tint so the floating card pops more */
.ss-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg, 
        rgba(18, 58, 50, 0.2) 0%, 
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
}

/* Tablet & Mobile Adjustments for Video */
@media (max-width: 1024px) {
    .ss-video-wrapper {
        height: 500px;
    }
}

@media (max-width: 768px) {
    .ss-video-wrapper {
        height: 400px;
    }
}
/* video */

.marquee-viewport {
    overflow: hidden;
    width: 100%;
    padding: 5px 0;
    background-color:#123A32;
}

.marquee-content {
    display: flex;
    gap: 10px;
    animation: scroll 20s linear infinite;
}

.video-item {
    min-width: 320px;
    height: 350px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

.video-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* SCROLL ANIMATION */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* custom and gifing */
/* Color Palette & Variables */
:root {
  --primary-green: #1f3d2b;
  --gold-accent: #c8a96a;
  --soft-beige: #f5f1ed;
  --warm-white: #fdfbf9;
  --text-dark: #333333;
  --glass-bg: rgba(255, 255, 255, 0.7);
}

body {
  background-color: var(--soft-beige);
  color: var(--text-dark);
  margin: 0;
  overflow-x: hidden;
}

/* CONTAINER */
.cg-container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  text-align: center;
}
.cg-container .lastwork-para{
    text-align: center;
margin-top: 20px;
}
/* HERO SECTION */
.cg-hero {
  padding: 100px 0;
  background: url('../img/custom/banner.png') no-repeat center center/cover;
  position: relative;
}

.cg-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}



.cg-hero-text h1 {
  font-size: 3rem;
  color: var(--primary-green);
  line-height: 1.4;
  margin-bottom: 20px;
  text-align: left;
}

.cg-hero-text p {
  font-size: 18px !important;
  line-height: 1.8;
  margin-bottom: 30px;
}

.cg-btn {
  padding: 15px 35px;
  background: var(--primary-green);
  color: white;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.cg-btn:hover {
  background: var(--gold-accent);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(200, 169, 106, 0.4);
}

/* IMAGE STYLING */
.cg-img img {
  width: 100%;
  height: 350px !important; /* Fixed height for consistency */
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.5s ease;
}

.cg-img img:hover {
  transform: scale(1.02);
}

/* SECTION SPACING */
.cg-section {
  padding: 80px 0;
}

.cg-bg {
  background: #ede4dc;
}

.cg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

/* HOW IT WORKS STEPS */
.cg-steps div {
  background: white;
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  transition: 0.3s;
  font-size: 18px !important;
}

.cg-steps div:hover {
  border-left: 5px solid var(--gold-accent);
  padding-left: 25px;
}

.cg-steps span {
  background: var(--gold-accent);
  color: white;
  min-width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin-right: 15px;
  font-weight: bold;
}

/* CTA CARDS */
.cg-cta-box {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}

.cg-card {
  background: white;
  padding: 40px 20px;
  border-radius: 20px;
  width: 280px;
  text-align: center;
  transition: 0.4s ease;
  border: 1px solid #eee;
}

.cg-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.cg-icon {
  font-size: 40px;
  color: var(--primary-green);
  margin-bottom: 20px;
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
  .cg-hero-grid, .cg-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .cg-hero-text {
    order: 2;
  }
  
  .cg-hero-img {
    order: 1;
  }
}

/* Section Background and Padding */
.cg-section.cg-bg {
  background-color: #f3eae3; /* Soft warm sand tone */
  padding: 80px 0;
  overflow: hidden;
}

/* Grid Layout */
.cg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Typography */
.cg-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: #1f3d2b; /* Deep Signature Green */
  margin-bottom: 20px;
}

.cg-content p {
  font-size: 18px !important;
  line-height: 1.7;
  color: #444;
  margin-bottom: 15px;
}

/* Elegant Gifting List */
.cg-list {
  list-style: none;
  padding: 0;
  margin: 25px 0;
}

.cg-list li {
  display: flex;
  align-items: center;
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
  transition: transform 0.3s ease;
}

.cg-list li:hover {
  transform: translateX(10px); /* Subtle slide effect on hover */
}

/* Icon Styling */
.cg-list li i {
  width: 35px !important;
  height: 35px !important;
  background: white;
  color: #c8a96a; /* Luxury Gold */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin-right: 15px;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Image Presentation */
.cg-img img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.08);
  display: block;
}

/* Responsive for Mobile */
@media (max-width: 768px) {
  .cg-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }


  
  .cg-content h2 {
    font-size: 2rem;
  }
}

/* --- UPDATED RESPONSIVE DESIGN --- */

/* Tablet View (Max-width: 1024px) */
@media (max-width: 1024px) {
  .cg-hero-grid, 
  .cg-grid {
    gap: 30px; /* Reduce gap for tablets */
  }

  .cg-hero-text h1 {
    font-size: 2.5rem; /* Slightly smaller heading */
  }

  .cg-card {
    width: 30%; /* Three cards in a row on tablets */
    min-width: 200px;
  }
}

/* Mobile View (Max-width: 768px) */
@media (max-width: 768px) {
  /* Stack Grids */
  .cg-hero-grid, 
  .cg-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  /* Hero Section Adjustments */
  .cg-hero {
    padding: 60px 0;
  }

  .cg-hero-text h1 {
    font-size: 25px;
    text-align: center; /* Center text on mobile */
  }

  .cg-hero-text p {
    font-size: 16px !important;
  }

  /* Image Adjustments */
  .cg-img img {
    height: 300px !important; /* Slightly shorter on mobile */
    max-width: 100%;
  }

  /* Flip order so text comes after image in Hero if needed */
  .cg-hero-text {
    order: 2;
  }
  .cg-hero-img {
    order: 1;
  }

 

  /* CTA Cards - Stack them */
  .cg-cta-box {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .cg-card {
    width: 100%; /* Full width cards on mobile */
    max-width: 320px;
    padding: 30px 15px;
  }

  /* Steps Section */
  .cg-steps div {
    font-size: 16px !important;
    text-align: left; /* Keep steps text left-aligned for readability */
  }
}

/* Small Mobile View (Max-width: 480px) */
@media (max-width: 480px) {
  /* .cg-hero-text h1 {
    font-size: 1.8rem;
  } */

  .cg-btn {
    width: 100%; /* Make button full width on small phones */
    padding: 12px;
    font-size: 15px !important;
    margin-left: 0px !important;
  }
}

/* Responsive adjustments for Mobile */
@media (max-width: 768px) {
  .cg-list {
    display: inline-block; /* Wraps the list tightly so it can be centered as a block */
    text-align: left; 
    width: 100%;
    max-width: 300px; /* Adjust based on your longest text */
    margin: 25px auto;
  }
  .cg-content p{
    font-size: 16px !important;
  }
  .cg-list li {
    font-size: 17px;
  }
}

/* footer */

/* Container styling for the contact block */
.footer__contact--text {
    font-size: 15px;
    line-height: 1.8; /* Increased for better readability */
    color: #cbd5e1;   /* Soft grey/white for premium feel */
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif; /* Clean, modern font */
}

/* Styling the 'Phone:' and 'Email:' labels */
.footer__contact--text strong {
    color: #ffffff;   /* Pure white to make labels pop */
    font-weight: 600;
    margin-right: 5px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* Optional: Adding an icon-like feel or links */
.footer__contact--text a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer__contact--text a:hover {
    color: #ec1875; /* Use your brand accent color here */
}



/* Ensure the button itself doesn't have auto-margins */
.cg-btn {
    margin-left:-250px; /* Pushes everything else to the right */
    display: inline-block;
}