@charset "UTF-8";
/*
  Template Name: Grocee - Organic Food HTML Template
  Author Name: Hook theme
  Author URL: https://themeforest.net/user/hooktheme
  Version: 1.0.0

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

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

*/
/*
    1. Base CSS
*/
:root {
  --primary-color: #AEB3B7;
  --secondary-color: #019BDB;
  --third-color: #F78B1F;
  --foreground-color: #121416;
  --foreground-sub-color: #898686;
  --body-text-color: #000000;
  --text-white-color: #fff;
  --body-background-color: #fff;
  --bg-offwhite-color: #F7F7F7;
  --bg-black-color: #000000;
  --bg-light-dark-color: #1a1818;
  --border-color: #E5E5E5;
  --open-sans-fonts: "Open Sans", sans-serif;
  --rubik-fonts: "Rubik", sans-serif;
  --inter-fonts: "Inter", sans-serif;
  --body-font-size: 1.5rem;
  --body-font-weight: 400;
  --body-line-height: 2.8rem;
  --headings-weight: 700;
  --transition: all 0.3s ease 0s;
  --container-fluid-offset: 12rem;
}

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

html {
  scroll-behavior: smooth;
}

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

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

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

.tooltip {
  font-size: 1.3rem;
}

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

h1,
.h1 {
  font-size: 2.2rem;
  line-height: 3.2rem;
}
@media only screen and (min-width: 480px) {
  h1,
.h1 {
    font-size: 2.8rem;
    line-height: 3.7rem;
  }
}
@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: 5rem;
  }
}
@media only screen and (min-width: 1200px) {
  h1,
.h1 {
    font-size: 4.5rem;
    line-height: 5rem;
  }
}
@media only screen and (min-width: 1366px) {
  h1,
.h1 {
    font-size: 5rem;
    line-height: 5.5rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ul {
  margin: 0;
  padding: 0;
}

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

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

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

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

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

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

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

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

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

/*
  Swiper navigation css
*/
.swiper__nav--btn.card__swiper--nav {
  opacity: 1;
  visibility: visible;
  top: -33px;
}
@media only screen and (min-width: 768px) {
  .swiper__nav--btn.card__swiper--nav {
    top: -38px;
  }
}
@media only screen and (min-width: 1200px) {
  .swiper__nav--btn.card__swiper--nav {
    top: -48px;
  }
}
@media only screen and (min-width: 1600px) {
  .swiper__nav--btn.card__swiper--nav {
    top: -60px;
  }
}
.swiper__nav--btn.card__swiper--nav.swiper-button-prev {
  right: 3.7rem;
  left: auto;
}

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

.swiper__nav--btn {
  width: 3.5rem;
  height: 3.5rem;
  background: inherit;
  border: 1px solid var(--secondary-color);
  background: var(--body-background-color);
  color: var(--secondary-color);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 9;
}
@media only screen and (max-width: 479px) {
  .swiper__nav--btn {
    width: 3rem;
    height: 3rem;
  }
}
.swiper__nav--btn.swiper-button-disabled {
  background: inherit;
  color: var(--primary-color);
}
.swiper__nav--btn:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}
.swiper__nav--btn::after {
  display: none;
}
.swiper__nav--btn.swiper-button-prev {
  left: 0;
}
.swiper__nav--btn.swiper-button-next {
  right: 0;
}
.swiper__nav--btn.swiper-button-next::after {
  display: none;
}

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

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

/*
  default css here
*/
.modal-backdrop.show {
  opacity: 0.7;
}

.switcher__mode--btn > .moon__icon {
  display: block;
}

.switcher__mode--btn .sun__icon {
  display: none;
}

.switcher__mode--btn.active > .moon__icon {
  display: none;
}

.switcher__mode--btn.active > .sun__icon {
  display: block;
}

.primary__btn {
  font-weight: 600;
  display: inline-block;
  font-size: 1.3rem;
  line-height: 3.8rem;
  height: 3.8rem;
  padding: 0 2rem;
  letter-spacing: 0.2px;
  border-radius: 2.4rem;
  background: var(--secondary-color);
  color: var(--text-white-color);
  border: 0;
}
.primary__btn:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
}
@media only screen and (min-width: 768px) {
  .primary__btn {
    line-height: 4rem;
    height: 4rem;
    padding: 0 2.2rem;
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 992px) {
  .primary__btn {
    font-size: 1.5rem;
    line-height: 4.2rem;
    height: 4.2rem;
    padding: 0 2.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .primary__btn {
    line-height: 4.6rem;
    height: 4.6rem;
    padding: 0 3rem;
  }
}

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

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

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

.section__heading {
  padding-bottom: 1.2rem;
  position: relative;
}
.section__heading::before {
  position: absolute;
  content: "";
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--secondary-color);
  left: 0;
  top: 1px;
  border-radius: 50%;
}
@media only screen and (min-width: 768px) {
  .section__heading::before {
    top: 3px;
  }
}
.section__heading::after {
  position: absolute;
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  background: var(--secondary-color);
  left: 7px;
  top: 8px;
  border-radius: 50%;
}
@media only screen and (min-width: 768px) {
  .section__heading::after {
    top: 10px;
  }
}
.section__heading--maintitle {
  text-transform: uppercase;
  padding-left: 3.4rem;
}
.section__heading--maintitle span {
  font-weight: 400;
}
.section__heading--flex {
  flex-wrap: wrap;
  gap: 2rem;
}
.section__heading--desc {
  margin-top: 1.2rem;
}
.section__heading.style2 {
  padding-bottom: 0;
}
.section__heading.style2 .section__heading--maintitle {
  padding-left: 0;
  text-transform: capitalize;
}
@media only screen and (min-width: 1200px) {
  .section__heading.style2 .section__heading--maintitle {
    font-size: 2.6rem;
    line-height: 3.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .section__heading.style2 .section__heading--maintitle {
    font-size: 2rem;
    line-height: 2.6rem;
  }
}
.section__heading.style2::before {
  display: none;
}
.section__heading.style2::after {
  display: none;
}

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

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

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

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

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

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

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

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

.overflow-hidden {
  overflow: hidden;
}

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

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

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

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

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

.bg__black {
  background: #1d1c1c;
}

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

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

.position__relative {
  position: relative;
}

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

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

.border-0 {
  border: none;
}

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

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

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

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

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

.width-100 {
  width: 100%;
}

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

.display-block {
  display: block;
}

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

.tab_pane {
  display: none;
  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;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}
.animate-fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

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

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

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

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

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

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

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

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

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

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

.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 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;
  transition: var(--transition);
  transform: translateX(-100%);
  background-color: var(--body-background-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 480px) {
  .offcanvas__header {
    max-width: 320px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.offcanvas__account--items {
  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(--text-white-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.offcanvas__account--items__label {
  font-size: 1.5rem;
  font-weight: 600;
  margin-left: 6px;
}

.offcanvas__account--wrapper {
  gap: 2.5rem;
  padding: 0 2.5rem;
}

.offcanvas__account--currency {
  position: relative;
}
.offcanvas__account--currency__menu {
  font-weight: 500;
  gap: 5px;
}
.offcanvas__account--currency__menu > * {
  pointer-events: none;
}
.offcanvas__account--currency__submenu {
  position: absolute;
  z-index: 9;
  width: 100px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  bottom: 100%;
  opacity: 0;
  visibility: hidden;
  margin-bottom: 15px;
  transition: var(--transition);
  background: var(--body-background-color);
}
.offcanvas__account--currency__submenu.active {
  opacity: 1;
  visibility: visible;
  margin-bottom: 8px;
}

/*
    Offcanvas mobile stikcy toolbar css here
*/
.offcanvas__stikcy--toolbar {
  position: fixed;
  bottom: 0;
  background: var(--body-background-color);
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.12);
  padding: 10px 20px;
  display: none;
}
@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;
  }
}
.offcanvas__stikcy--toolbar__btn {
  position: relative;
  text-align: center;
}
.offcanvas__stikcy--toolbar__btn:hover .offcanvas__stikcy--toolbar__icon {
  background: var(--secondary-color);
  color: var(--white-color);
}
.offcanvas__stikcy--toolbar__btn > * {
  pointer-events: none;
}
.offcanvas__stikcy--toolbar__btn.minicart__open--btn {
  flex-direction: column;
}
.offcanvas__stikcy--toolbar__icon {
  width: 3rem;
  height: 3rem;
  text-align: center;
  background: var(--theme-color);
  line-height: 3.8rem;
  border-radius: 50%;
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.offcanvas__stikcy--toolbar__label {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 6px;
}

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

/*
   header topbar css here
*/
.header__topbar {
  padding: 8px 0;
}
@media only screen and (min-width: 768px) {
  .header__topbar {
    padding: 10px 0;
  }
}
@media only screen and (max-width: 991px) {
  .header__topbar--inner {
    justify-content: center !important;
  }
}

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

.header__info--list {
  position: relative;
}
.header__info--list::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 85%;
  background: var(--border-color);
  right: -11px;
  top: 50%;
  transform: translatey(-50%);
}
.header__info--list:last-child::before {
  display: none;
}
.header__info--link {
  font-size: 1.2rem;
  font-weight: 500;
  font-family: var(--inter-fonts);
  line-height: 1.8rem;
}
.header__info--link svg {
  margin-right: 0.2rem;
}
.header__info--link.text-white:hover {
  color: var(--secondary-color) !important;
}

.header__top--right {
  gap: 2rem;
}
@media only screen and (max-width: 575px) {
  .header__top--right {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.5rem 0;
  }
}
.header__top--link {
  gap: 2rem;
}

.social__share {
  gap: 1.5rem;
}

.header__link--menu {
  position: relative;
}
@media only screen and (max-width: 575px) {
  .header__link--menu:last-child::before {
    display: none;
  }
}
.header__link--menu::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 85%;
  background: var(--border-color);
  right: -11px;
  top: 50%;
  transform: translatey(-50%);
}
.header__link--menu__text {
  font-size: 1.3rem;
  font-weight: 500;
  font-family: var(--inter-fonts);
}
.header__link--menu__text svg {
  margin-right: 0.2rem;
}
.header__link--menu__text.text-white:hover {
  color: var(--secondary-color) !important;
}

/*
    main header css here
*/
.main__header {
  padding: 11px 0;
}
@media only screen and (min-width: 768px) {
  .main__header {
    padding: 12px 0;
  }
}
@media only screen and (min-width: 1600px) {
  .main__header {
    padding: 16px 0;
  }
}
.main__header--inner {
  gap: 3rem;
}

.main__logo--link {
  display: block;
}
.main__logo--img {
  max-width: 145px;
  display: block;
}
@media only screen and (min-width: 480px) {
  .main__logo--img {
    max-width: 160px;
  }
}
@media only screen and (min-width: 768px) {
  .main__logo--img {
    max-width: 100%;
  }
}
.main__logo--title {
  line-height: 1;
}

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

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

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

.header__search--form {
  border: 1px solid var(--border-color);
}
.header__search--box {
  position: relative;
  width: 330px;
}
@media only screen and (min-width: 1200px) {
  .header__search--box {
    width: 400px;
  }
}
@media only screen and (min-width: 1366px) {
  .header__search--box {
    width: 462px;
  }
}
.header__search--input {
  width: 100%;
  border: 0;
  height: 52px;
  border-radius: 0 5px 5px 0;
  padding: 0 70px 0 16px;
}
.header__search--input:focus::-webkit-input-placeholder {
  color: #000000;
}
.header__search--button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border: 0;
  padding: 0 20px;
  border-radius: 0 5px 5px 0;
}
.header__search--button:hover {
  background: var(--secondary-color);
}
@media only screen and (min-width: 1200px) {
  .header__search--button {
    padding: 0 22px;
  }
}

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

/*
    header account css here
*/
.header__account.header__sticky--block {
  display: none;
}
.header__account--items {
  margin-left: 12px;
}
.header__account--items:first-child {
  margin-left: 0;
}
@media only screen and (min-width: 768px) {
  .header__account--items {
    margin-left: 15px;
  }
}
@media only screen and (min-width: 992px) {
  .header__account--search__items.mobile__d--block {
    display: none;
  }
}
.header__account--btn {
  position: relative;
}
.header__account--btn:hover {
  color: var(--secondary-color);
}
.header__account--btn > * {
  pointer-events: none;
}

@media only screen and (min-width: 576px) {
  .header__minicart--items {
    margin-left: 1.8rem;
  }
}
@media only screen and (min-width: 992px) {
  .header__minicart--items {
    margin-left: 25px;
  }
}

.minicart__open--btn {
  display: flex;
  align-items: center;
}

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

.minicart__btn--text {
  padding-left: 2rem;
  font-family: var(--rubik-fonts);
  font-size: 1.5rem;
  line-height: 1.6rem;
}
.minicart__btn--text__price {
  font-size: 1.2rem;
  color: var(--secondary-color);
}
@media only screen and (max-width: 991px) {
  .minicart__btn--text {
    display: none;
  }
}

/*
    categories menu css here
*/
.categories__menu {
  width: 225px;
  position: relative;
}
@media only screen and (max-width: 991px) {
  .categories__menu.mobile-v-none {
    display: none;
  }
}
.categories__menu.mobile-v-block {
  display: none;
}
@media only screen and (max-width: 991px) {
  .categories__menu.mobile-v-block {
    display: block;
  }
}
@media only screen and (min-width: 1200px) {
  .categories__menu {
    width: 255px;
  }
}
@media only screen and (max-width: 991px) {
  .categories__menu {
    width: 100%;
  }
}
.categories__menu--header {
  height: 42px;
  padding: 0 14px;
  cursor: pointer;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .categories__menu--header {
    height: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .categories__menu--header {
    height: 55px;
  }
}
@media only screen and (min-width: 1600px) {
  .categories__menu--header {
    height: 65px;
  }
}
.categories__menu--header.active .categories__arrowdown--icon {
  transform: rotate(180deg);
}
.categories__menu--title {
  font-size: 1.3rem;
  margin-left: 16px;
  line-height: 2.2rem;
  text-transform: uppercase;
  font-weight: 600;
}
@media only screen and (min-width: 768px) {
  .categories__menu--title {
    font-size: 1.4rem;
    margin-left: 22px;
  }
}
.categories__menu--svgicon {
  width: 19px;
  vertical-align: middle;
  opacity: 0.5;
  margin-right: 10px;
}
.categories__menu--right__arrow--icon {
  float: right;
  opacity: 0.7;
}
.categories__menu--items {
  position: relative;
}
.categories__menu--items:last-child .categories__menu--link {
  border-bottom: 0;
}
.categories__menu--items:hover .categories__submenu {
  opacity: 1;
  visibility: visible;
  top: 0;
}
@media only screen and (max-width: 991px) {
  .categories__menu--items:hover .categories__submenu {
    top: 100%;
  }
}
.categories__menu--link {
  display: block;
  color: var(--body-text-color);
  border-bottom: 1px solid var(--border-color);
  line-height: 2.2rem;
  font-size: 1.5rem;
  padding: 1rem 1.7rem;
}
@media only screen and (min-width: 992px) {
  .categories__menu--link {
    line-height: 2rem;
    font-size: 1.5rem;
    padding: 0.8rem 1.7rem;
  }
}
@media only screen and (min-width: 1366px) {
  .categories__menu--link {
    padding: 1rem 1.7rem;
  }
}
@media only screen and (min-width: 1600px) {
  .categories__menu--link {
    line-height: 2.3rem;
    font-size: 1.5rem;
    padding: 1.2rem 1.7rem;
  }
}
.categories__menu--link:hover {
  background: var(--bg-offwhite-color);
  border-color: var(--bg-offwhite-color);
}

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

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

.dropdown__categories--menu {
  position: absolute;
  z-index: 9;
  width: 100%;
  border: 2px solid var(--secondary-color);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  top: 100%;
  margin-top: 20px;
  transition: var(--transition);
  background: var(--body-background-color);
}

/*  
    Categories submenu css here
*/
.categories__submenu {
  position: absolute;
  top: 1.5rem;
  left: 100%;
  background-color: var(--body-background-color);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  width: 50rem;
  padding: 2rem;
  z-index: 9;
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  gap: 3rem;
  flex-wrap: wrap;
}
@media only screen and (min-width: 992px) {
  .categories__submenu {
    width: 65rem;
  }
}
@media only screen and (min-width: 1200px) {
  .categories__submenu {
    width: 80rem;
  }
}
@media only screen and (max-width: 991px) {
  .categories__submenu {
    width: 100%;
    left: 0;
    top: 125%;
    flex-direction: column;
  }
}
.categories__submenu.style2 .categories__submenu--items {
  width: 22%;
}
.categories__submenu--items {
  width: 30%;
}
@media only screen and (max-width: 991px) {
  .categories__submenu--items {
    width: 100%;
    position: relative;
  }
}
.categories__submenu--items__text {
  font-size: 1.5rem;
  line-height: 2.5rem;
  display: block;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.8rem;
  margin-bottom: 1.2rem;
}
@media only screen and (min-width: 1200px) {
  .categories__submenu--items__text {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 991px) {
  .categories__submenu--items__text {
    padding: 1.1rem 3.5rem 1.1rem 3.5rem;
    background: var(--bg-offwhite-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
  }
}
.categories__submenu--child__items {
  padding: 0.7rem 0;
}
@media only screen and (max-width: 991px) {
  .categories__submenu--child__items {
    padding: 0;
  }
}
.categories__submenu--child__items--link {
  line-height: 2.5rem;
  font-weight: 500;
}
@media only screen and (max-width: 991px) {
  .categories__submenu--child__items--link {
    padding: 1.1rem 3.5rem 1.1rem 4.5rem;
    background: var(--bg-offwhite-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
    display: block;
    color: var(--body-text-color);
  }
}

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

.category__sub--menu {
  display: none;
}

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

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

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

/*
  End categories menu css here
*/
.header__right--area {
  width: calc(100% - 225px);
  display: none !important;
}
@media only screen and (min-width: 992px) {
  .header__right--area {
    display: flex !important;
  }
}
@media only screen and (min-width: 1200px) {
  .header__right--area {
    width: calc(100% - 260px);
  }
}

/*
    main menu css here
*/
.header__menu {
  padding-left: 30px;
}
.header__menu.header__sticky--block {
  display: none !important;
}
.header__menu--wrapper {
  gap: 1.3rem;
}
@media only screen and (min-width: 1200px) {
  .header__menu--wrapper {
    gap: 2rem;
  }
}
.header__menu--items {
  position: relative;
}
.header__menu--items:last-child .header__menu--link::before {
  display: none;
}
.header__menu--items:hover .header__menu--link {
  color: var(--secondary-color) !important;
  border-color: var(--secondary-color);
}
.header__menu--items:hover .header__sub--menu {
  visibility: visible;
  margin-top: 1.4rem;
  opacity: 1;
}
.header__menu--items:hover .header__mega--menu {
  visibility: visible;
  margin-top: 2px;
  opacity: 1;
}
.header__menu--link {
  font-size: 1.4rem;
  line-height: 3.5rem;
  padding: 0 0.8rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 2rem;
  position: relative;
}
.header__menu--link::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 1.7rem;
  background: #CCCCCC;
  right: -11px;
  top: 50%;
  transform: translatey(-50%);
  opacity: 0.3;
}
.header__menu--link.active {
  color: var(--secondary-color) !important;
  border-color: var(--secondary-color);
}
@media only screen and (min-width: 1200px) {
  .header__menu--link {
    font-size: 1.5rem;
    padding: 0 1.2rem;
  }
}

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

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

.mega__menu--items {
  position: static;
}

.header__mega--menu {
  position: absolute;
  z-index: 9;
  top: 100%;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  margin-top: 20px;
  padding: 20px;
  list-style: none;
  transition: var(--transition);
  visibility: hidden;
  opacity: 0;
  background-color: var(--body-background-color);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}
.header__mega--menu__li {
  padding: 3px 15px;
  width: 25%;
}
.header__mega--menu__li.fullscreen__style {
  width: 100%;
  margin-top: 1.8rem;
  gap: 3rem;
}
.header__mega--menu__banner {
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}
.header__mega--menu__banner:hover .header__mega--menu__banner--img {
  transform: scale(1.03);
}
.header__mega--menu__banner--img {
  border-radius: 5px;
}

.header__mega--sub__menu--title {
  font-size: 1.5rem;
  padding: 1rem 0;
  font-weight: 500;
}

/*
    End main menu css here
*/
/*
    currency css here
*/
.account__currency {
  margin-right: 25px;
  position: relative;
}
@media only screen and (min-width: 1200px) {
  .account__currency {
    margin-right: 32px;
  }
}
.account__currency--link {
  display: flex;
  align-items: center;
  color: var(--text-white-color);
  font-size: 1.4rem;
  line-height: 3.5rem;
}
.account__currency--link:hover span {
  color: var(--secondary-color);
}
.account__currency--link:hover svg {
  color: var(--secondary-color);
}
.account__currency--link svg {
  transition: var(--transition);
  margin-left: 5px;
}
.account__currency--link > * {
  pointer-events: none;
}

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

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

.currency__items:first-child .currency__text {
  border-radius: 5px 5px 0 0;
}
.currency__items:last-child .currency__text {
  border-bottom: 0;
  border-radius: 0 0 5px 5px;
}

.currency__text {
  display: block;
  font-size: 1.3rem;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-color);
}
.currency__text:hover {
  background: var(--bg-offwhite-color);
  border-color: var(--bg-offwhite-color);
}

/*
    language css here
*/
.language__currency {
  border: 1px solid var(--secondary-color);
  padding: 0 1rem;
  border-radius: 2rem;
}
@media only screen and (min-width: 1200px) {
  .language__currency {
    padding: 0 1.2rem;
  }
}
.language__currency--list {
  position: relative;
  margin-right: 10px;
  padding-right: 10px;
}
@media only screen and (min-width: 1200px) {
  .language__currency--list {
    margin-right: 12px;
    padding-right: 12px;
  }
}
.language__currency--list:last-child {
  margin-right: 0;
  padding-right: 0;
}
.language__currency--list:last-child::before {
  display: none;
}
.language__currency--list::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 1.7rem;
  background: var(--body-background-color);
  right: 0;
  top: 50%;
  transform: translatey(-50%);
  opacity: 0.6;
}

.language__switcher {
  display: flex;
  align-items: center;
  color: var(--text-white-color);
  font-size: 1.4rem;
  line-height: 3.5rem;
}
.language__switcher--icon__img {
  vertical-align: middle;
  margin-right: 5px;
}
.language__switcher:hover span {
  color: var(--secondary-color);
}
.language__switcher:hover svg {
  color: var(--secondary-color);
}
.language__switcher svg {
  transition: var(--transition);
  margin-left: 5px;
}

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

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

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

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

.language__text {
  display: block;
  font-size: 1.3rem;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-color);
}
.language__text:hover {
  background: var(--bg-offwhite-color);
  border-color: var(--bg-offwhite-color);
}

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

.minicart__header--top {
  margin-bottom: 10px;
}
.minicart__header--desc {
  font-size: 1.6rem;
  color: var(--foreground-sub-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(--secondary-color);
  transform: scale(1.3);
}
.minicart__close--btn > * {
  pointer-events: none;
}

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

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

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

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

.minicart__subtitle {
  font-size: 1.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;
}

.minicart__price {
  margin-bottom: 9px;
}

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

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

.minicart__quantity {
  margin-right: 15px;
}

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

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

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

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

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

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

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

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

/*
    home 3 header css
*/
.language__currency--list.style2::before {
  background: var(--primary-color);
}

.account__currency--link.text-black {
  color: var(--primary-color);
}
.account__currency--link.text-black:hover {
  -moz-columns: var(--secondary-color);
       columns: var(--secondary-color);
}

.language__switcher.text-black {
  color: var(--primary-color);
}
.language__switcher.text-black:hover {
  -moz-columns: var(--secondary-color);
       columns: var(--secondary-color);
}

.header__menu.style3 {
  padding-left: 0;
}

.language__currency.style3 {
  border: 0;
  padding: 0;
}
.language__currency.style3 .account__currency--link {
  line-height: 2.5rem;
}
.language__currency.style3 .language__switcher {
  line-height: 2.5rem;
}

/*
    home 4 header css here
*/
.header__menu--style4 {
  padding-left: 0;
}

.header__bottom--inner__style3 {
  border-top: 1px solid var(--border-color);
  padding: 1.3rem 0;
}

.language__currency.style4 .language__currency--list::before {
  background: #6C757D;
}
.language__currency.style4 .account__currency--link {
  font-weight: 600;
}
.language__currency.style4 .language__switcher {
  font-weight: 600;
}

/*
    home five header css
*/
.social__share--icon.text-white:hover {
  color: var(--secondary-color) !important;
}

/* 
    3. Slider css 
*/
.hero__slider--items {
  position: relative;
  display: flex;
  align-items: center;
  height: auto;
  justify-content: center;
  gap: 30px;
  padding: 4rem 2rem;
}
@media only screen and (min-width: 576px) {
  .hero__slider--items {
    gap: 35px;
    padding: 0 3rem;
    height: 300px;
  }
}
@media only screen and (min-width: 768px) {
  .hero__slider--items {
    height: 350px;
    gap: 50px;
  }
}
@media only screen and (min-width: 992px) {
  .hero__slider--items {
    height: 450px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero__slider--items {
    height: 450px;
  }
}
@media only screen and (min-width: 1366px) {
  .hero__slider--items {
    height: 490px;
  }
}
@media only screen and (min-width: 1600px) {
  .hero__slider--items {
    height: 552px;
  }
}
@media only screen and (max-width: 575px) {
  .hero__slider--items {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
}

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

@media only screen and (min-width: 992px) {
  .hero__slider--ml {
    margin-left: 255px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero__slider--ml {
    margin-left: 280px;
  }
}

.slider__content {
  position: relative;
  z-index: 9;
}
@media only screen and (max-width: 575px) {
  .slider__content {
    text-align: center;
  }
}

.slider__subtitle {
  font-size: 1.4rem;
  font-weight: 600;
  font-family: var(--inter-fonts);
  margin-bottom: 0.5rem;
}

.slider__maintitle {
  text-decoration: underline;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 576px) {
  .slider__maintitle {
    margin-bottom: 1.8rem;
  }
}
@media only screen and (min-width: 992px) {
  .slider__maintitle {
    margin-bottom: 2.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__maintitle {
    margin-bottom: 2.6rem;
  }
}
.slider__maintitle--inner__text {
  font-family: var(--rubik-fonts);
  font-weight: 400;
  text-decoration: underline;
}
@media only screen and (min-width: 992px) {
  .slider__maintitle--inner__text {
    font-size: 3.4rem;
    line-height: 4rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__maintitle--inner__text {
    font-size: 3.8rem;
    line-height: 4.2rem;
  }
}

.slider__price--text {
  font-family: var(--inter-fonts);
  font-weight: 600;
  display: block;
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
  line-height: 2rem;
}
@media only screen and (min-width: 576px) {
  .slider__price--text {
    margin-bottom: 1.8rem;
    font-size: 1.8rem;
    line-height: 2.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__price--text {
    margin-bottom: 2.5rem;
    font-size: 2.2rem;
    line-height: 2.4rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__price--text {
    font-size: 2.6rem;
    line-height: 2.8rem;
    margin-bottom: 3rem;
  }
}

.slider__btn svg {
  margin-left: 0.3rem;
}

@media only screen and (max-width: 1199px) {
  .hero__slider--layer {
    max-width: 385px;
  }
}
@media only screen and (max-width: 991px) {
  .hero__slider--layer {
    max-width: 360px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__slider--layer {
    max-width: 290px;
  }
}

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

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

.swiper-slide-active .slider__subtitle {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.swiper-slide-active .slider__maintitle {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.swiper-slide-active .slider__maintitle--style2 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.swiper-slide-active .slider__desc {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
.swiper-slide-active .slider__price--text {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
.swiper-slide-active .slider__btn {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
.swiper-slide-active .slider__layer--img {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transition: 1.4s;
}

.hero__slider--activation .swiper__nav--btn.swiper-button-prev {
  left: 1.5rem;
}
.hero__slider--activation .swiper__nav--btn.swiper-button-next {
  right: 1.5rem;
}

/*
    home two css here
*/
.slider__section--bg2 {
  background: url(../img/slider/home2-slider-shape-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
@media only screen and (max-width: 991px) {
  .slider__section--bg2 {
    padding-top: 3rem;
  }
}

.hero__slider--layer__style2 {
  position: absolute;
  bottom: 25px;
  right: 15px;
}
@media only screen and (max-width: 1199px) {
  .hero__slider--layer__style2 {
    max-width: 390px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__slider--layer__style2 {
    max-width: 270px;
  }
}
@media only screen and (max-width: 575px) {
  .hero__slider--layer__style2 {
    position: inherit;
    bottom: inherit;
    right: inherit;
    padding: 0 2rem;
  }
}

.home2-slider1-bg {
  background: url(../img/slider/home2-slider1-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  border-radius: 5px;
}

.hero__slider--items__style2 {
  position: relative;
  height: 340px;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .hero__slider--items__style2 {
    height: 385px;
  }
}
@media only screen and (min-width: 992px) {
  .hero__slider--items__style2 {
    height: 456px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero__slider--items__style2 {
    height: 493px;
  }
}
@media only screen and (min-width: 1366px) {
  .hero__slider--items__style2 {
    height: 530px;
  }
}
@media only screen and (max-width: 575px) {
  .hero__slider--items__style2 {
    flex-direction: column-reverse;
    gap: 3rem;
    height: auto;
    padding: 4rem 0;
  }
}

@media only screen and (min-width: 576px) {
  .slider__content.style2 {
    padding-left: 4.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__content.style2 {
    padding-left: 5.5rem;
  }
}

.slider__maintitle--style2 {
  margin-bottom: 1.2rem;
}
@media only screen and (min-width: 992px) {
  .slider__maintitle--style2 {
    font-size: 3.2rem;
    line-height: 4.2rem;
    margin-bottom: 1.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__maintitle--style2 {
    font-size: 4.5rem;
    line-height: 5.5rem;
    margin-bottom: 2.2rem;
  }
}
@media only screen and (max-width: 767px) {
  .slider__maintitle--style2 {
    font-size: 2.5rem;
    line-height: 3.3rem;
  }
}
@media only screen and (max-width: 575px) {
  .slider__maintitle--style2 {
    font-size: 2.2rem;
    line-height: 3.2rem;
    margin-bottom: 1rem;
  }
}

.slider__desc {
  margin-bottom: 1.8rem;
}
@media only screen and (min-width: 576px) {
  .slider__desc {
    margin-bottom: 2.2rem;
  }
}
@media only screen and (min-width: 992px) {
  .slider__desc {
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__desc {
    margin-bottom: 3rem;
  }
}

/*
    home 3 slider css
*/
.slider__section--bg3 {
  background: url(../img/slider/home3-slider-section-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

.hero__slider--items__style3 {
  gap: 2.5rem;
  height: auto;
}
@media only screen and (min-width: 576px) {
  .hero__slider--items__style3 {
    gap: 3rem;
    height: 350px;
  }
}
@media only screen and (min-width: 768px) {
  .hero__slider--items__style3 {
    gap: 4rem;
    height: 440px;
  }
}
@media only screen and (min-width: 992px) {
  .hero__slider--items__style3 {
    height: 550px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero__slider--items__style3 {
    height: 600px;
  }
}
@media only screen and (min-width: 1366px) {
  .hero__slider--items__style3 {
    height: 620px;
  }
}
@media only screen and (min-width: 1600px) {
  .hero__slider--items__style3 {
    height: 750px;
  }
}
@media only screen and (max-width: 575px) {
  .hero__slider--items__style3 {
    flex-wrap: wrap;
    flex-direction: column-reverse;
    padding: 5rem 0 7rem;
  }
}

@media only screen and (max-width: 1199px) {
  .hero__slider--layer__style3 {
    max-width: 470px;
  }
}
@media only screen and (max-width: 991px) {
  .hero__slider--layer__style3 {
    max-width: 340px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__slider--layer__style3 {
    max-width: 240px;
  }
}

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

.slider__subtitle.style3 {
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
  line-height: 2.3rem;
  text-transform: uppercase;
}
@media only screen and (min-width: 576px) {
  .slider__subtitle.style3 {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 768px) {
  .slider__subtitle.style3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    line-height: 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .slider__subtitle.style3 {
    font-size: 2rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__subtitle.style3 {
    font-size: 2.2rem;
    margin-bottom: 1.7rem;
  }
}
@media only screen and (min-width: 1366px) {
  .slider__subtitle.style3 {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}

.slider__maintitle.style3 {
  font-size: 2.6rem;
  line-height: 2.8rem;
  text-transform: uppercase;
  text-decoration: none;
}
@media only screen and (min-width: 480px) {
  .slider__maintitle.style3 {
    font-size: 2.8rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 576px) {
  .slider__maintitle.style3 {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }
}
@media only screen and (min-width: 768px) {
  .slider__maintitle.style3 {
    font-size: 4rem;
    line-height: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  .slider__maintitle.style3 {
    font-size: 5rem;
    line-height: 5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__maintitle.style3 {
    font-size: 6rem;
    line-height: 6rem;
  }
}
@media only screen and (min-width: 1366px) {
  .slider__maintitle.style3 {
    font-size: 7rem;
    line-height: 7rem;
  }
}

.slider__desc.style3 {
  font-size: 1.5rem;
  margin-bottom: 1.8rem;
}
@media only screen and (min-width: 576px) {
  .slider__desc.style3 {
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .slider__desc.style3 {
    font-size: 1.6rem;
    margin-bottom: 2.4rem;
  }
}
@media only screen and (min-width: 992px) {
  .slider__desc.style3 {
    font-size: 1.8rem;
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__desc.style3 {
    font-size: 2rem;
    margin-bottom: 3.5rem;
  }
}

/*
    home 4 slider css here
*/
.slider4__items--bg1 {
  background: url(../img/slider/home4-slider1-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  position: relative;
}

.hero__slider--items.style4 {
  height: auto;
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .hero__slider--items.style4 {
    height: 450px;
  }
}
@media only screen and (min-width: 992px) {
  .hero__slider--items.style4 {
    height: 510px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero__slider--items.style4 {
    height: 540px;
  }
}
@media only screen and (min-width: 1366px) {
  .hero__slider--items.style4 {
    height: 580px;
  }
}
@media only screen and (min-width: 1600px) {
  .hero__slider--items.style4 {
    height: 740px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__slider--items.style4 {
    flex-direction: column-reverse;
    height: auto;
    padding: 4rem 0 6.5rem;
  }
}

.hero__slider--layer__style4 {
  position: absolute;
  right: 0;
}
@media only screen and (min-width: 1366px) and (max-width: 1599px) {
  .hero__slider--layer__style4 {
    max-width: 720px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .hero__slider--layer__style4 {
    width: 600px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__slider--layer__style4 {
    width: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__slider--layer__style4 {
    width: 400px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__slider--layer__style4 {
    position: inherit;
    padding: 0 4rem;
  }
}
@media only screen and (max-width: 479px) {
  .hero__slider--layer__style4 {
    padding: 0 2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .hero__slider--layer__style4.style__right {
    right: 5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .hero__slider--layer__style4.style__right {
    right: 9rem;
  }
}

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

.slider__subtitle.style4 {
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  color: var(--secondary-color);
}
@media only screen and (min-width: 576px) {
  .slider__subtitle.style4 {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 992px) {
  .slider__subtitle.style4 {
    font-size: 1.8rem;
    margin-bottom: 1.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__subtitle.style4 {
    font-size: 2rem;
    line-height: 2.2rem;
    margin-bottom: 2rem;
  }
}

.slider__maintitle.style4 {
  text-decoration: inherit;
  text-transform: uppercase;
  font-family: var(--rubik-fonts);
  font-size: 2rem;
  line-height: 2.8rem;
  margin-bottom: 1.2rem;
}
@media only screen and (min-width: 400px) {
  .slider__maintitle.style4 {
    font-size: 2.2rem;
    line-height: 3rem;
  }
}
@media only screen and (min-width: 480px) {
  .slider__maintitle.style4 {
    font-size: 2.5rem;
    line-height: 3.2rem;
  }
}
@media only screen and (min-width: 576px) {
  .slider__maintitle.style4 {
    font-size: 2.8rem;
    line-height: 3.5rem;
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .slider__maintitle.style4 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  .slider__maintitle.style4 {
    font-size: 4rem;
    line-height: 5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__maintitle.style4 {
    font-size: 4.8rem;
    line-height: 6rem;
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .slider__maintitle.style4 {
    font-size: 5.2rem;
    line-height: 6.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .slider__maintitle.style4 {
    font-size: 6.2rem;
    line-height: 7.5rem;
  }
}

.slider__desc.style4 {
  font-size: 1.4rem;
  margin-bottom: 2rem;
}
@media only screen and (min-width: 480px) {
  .slider__desc.style4 {
    font-size: 1.5rem;
  }
}
@media only screen and (min-width: 576px) {
  .slider__desc.style4 {
    margin-bottom: 2.2rem;
  }
}
@media only screen and (min-width: 992px) {
  .slider__desc.style4 {
    font-size: 1.6rem;
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .slider__desc.style4 {
    margin-bottom: 3.5rem;
  }
}

/*
    home five slider css
*/
.slider__thumbnail--img__style5 {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 1366px) and (max-width: 1599px) {
  .slider__thumbnail--img__style5 {
    height: 570px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .slider__thumbnail--img__style5 {
    height: 520px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider__thumbnail--img__style5 {
    height: 470px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider__thumbnail--img__style5 {
    height: 320px;
  }
}

.hero__content--style5 {
  position: absolute;
  top: 16%;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 3rem;
}
@media only screen and (min-width: 992px) {
  .hero__content--style5 {
    top: 20%;
  }
}
@media only screen and (min-width: 1200px) {
  .hero__content--style5 {
    top: 22%;
  }
}
@media only screen and (max-width: 767px) {
  .hero__content--style5 {
    position: inherit;
    top: inherit;
    margin-top: 4.3rem;
  }
}
.hero__content--style5__title {
  font-size: 2.5rem;
  line-height: 3.7rem;
  font-weight: 600;
  font-family: var(--rubik-fonts);
}
@media only screen and (min-width: 480px) {
  .hero__content--style5__title {
    font-size: 3rem;
    line-height: 4.2rem;
  }
}
@media only screen and (min-width: 768px) {
  .hero__content--style5__title {
    font-size: 3.5rem;
    line-height: 4.8rem;
  }
}
@media only screen and (min-width: 992px) {
  .hero__content--style5__title {
    font-size: 4rem;
    line-height: 5.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .hero__content--style5__title {
    font-size: 4.5rem;
    line-height: 6rem;
  }
}
@media only screen and (min-width: 1366px) {
  .hero__content--style5__title {
    font-size: 5rem;
    line-height: 6.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .hero__content--style5__title {
    font-size: 6rem;
    line-height: 7.5rem;
  }
}

/* 
    6. Categories css
*/
.categories__card {
  background: var(--bg-offwhite-color);
  border-radius: 5px;
  transition: var(--transition);
  height: 100%;
}
.categories__card:hover {
  background: var(--secondary-color);
}
.categories__card:hover .categories__icon {
  color: var(--text-white-color);
}
.categories__card:hover .categories__title {
  color: var(--text-white-color);
}
.categories__card:hover .categories__subtitle {
  color: var(--text-white-color);
}
.categories__card--link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 1.2rem;
}
@media only screen and (min-width: 1200px) {
  .categories__card--link {
    padding: 1.5rem;
  }
}

.categories__icon {
  margin-bottom: 1.2rem;
}

.categories__title {
  font-size: 1.5rem;
  line-height: 2.4rem;
  font-family: var(--rubik-fonts);
  margin-bottom: 0.6rem;
  transition: var(--transition);
}

.categories__subtitle {
  font-size: 1.4rem;
  line-height: 2rem;
  font-family: var(--rubik-fonts);
  color: var(--foreground-sub-color);
}

/*
    Sidebar categorie css
*/
.sidebar__category {
  padding: 1rem;
  background: url(../img/other/category-sidebar-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  border-radius: 5px;
}
@media only screen and (min-width: 1200px) {
  .sidebar__category {
    padding: 1.5rem;
  }
}
@media only screen and (max-width: 991px) {
  .sidebar__category {
    margin-top: 3rem;
  }
}

.choose__category--content {
  padding: 2rem 1.5rem;
}
@media only screen and (min-width: 1200px) {
  .choose__category--content {
    padding: 2.5rem 2rem;
  }
}
.choose__category--title {
  font-size: 2rem;
  margin-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
  .choose__category--title {
    margin-bottom: 2.6rem;
  }
}
.choose__category--menu__list {
  margin-bottom: 1.8rem;
}
@media only screen and (min-width: 576px) {
  .choose__category--menu__list {
    margin-bottom: 2.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .choose__category--menu__list {
    margin-bottom: 2.5rem;
  }
}
.choose__category--menu__list:last-child {
  margin-bottom: 0;
}
.choose__category--menu__list:hover .choose__category--menu__icon {
  color: var(--secondary-color);
}
.choose__category--menu__list:hover .choose__category--menu__link {
  color: var(--secondary-color);
  text-decoration: underline;
}
.choose__category--menu__icon {
  color: var(--foreground-sub-color);
  margin-right: 0.2rem;
  transition: var(--transition);
}
@media only screen and (min-width: 1200px) {
  .choose__category--menu__icon {
    margin-right: 0.4rem;
  }
}
.choose__category--menu__link {
  font-size: 1.5rem;
  line-height: 2.4rem;
  font-family: var(--inter-fonts);
  color: var(--foreground-sub-color);
  font-weight: 500;
}
@media only screen and (min-width: 1200px) {
  .choose__category--menu__link {
    font-size: 1.6rem;
    line-height: 2.6rem;
  }
}
.choose__category--banner .banner__thumbnail {
  width: auto;
  display: inline-block;
}
@media only screen and (max-width: 767px) {
  .choose__category--banner .banner__thumbnail {
    width: 100%;
  }
}
.choose__category--banner .banner__thumbnail--img {
  width: auto;
}
@media only screen and (max-width: 767px) {
  .choose__category--banner .banner__thumbnail--img {
    width: 100%;
  }
}

/*
    categories banner css
*/
.category__banner--content {
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
  left: 2.5rem;
}
.category__banner--subtitle {
  font-size: 1.2rem;
  line-height: 1.8rem;
  font-weight: 600;
  font-family: var(--inter-fonts);
}
.category__banner--title {
  font-size: 1.6rem;
  font-family: var(--rubik-fonts);
  color: var(--text-white-color);
  text-transform: uppercase;
}
@media only screen and (min-width: 1200px) {
  .category__banner--title {
    font-size: 2rem;
  }
}
.category__banner--desc {
  font-size: 1.2rem;
  color: var(--foreground-sub-color);
  font-weight: 500;
  font-family: var(--inter-fonts);
  margin-bottom: 0;
  line-height: 2rem;
}
@media only screen and (min-width: 1200px) {
  .category__banner--desc {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}
.category__banner--price {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2rem;
}
@media only screen and (min-width: 1200px) {
  .category__banner--price {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}

/*
    home two categories card css
*/
.categories__card.style2 {
  border: 1px solid var(--border-color);
  background: inherit;
}
.categories__card.style2:hover {
  border-color: var(--secondary-color);
}
.categories__card--link__style2 {
  gap: 2rem;
  padding: 1.8rem 1.5rem;
}
@media only screen and (min-width: 480px) {
  .categories__card--link__style2 {
    gap: 1.3rem;
    padding: 1.8rem 1rem;
  }
}
@media only screen and (min-width: 1200px) {
  .categories__card--link__style2 {
    gap: 2.2rem;
    padding: 2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .categories__card--link__style2 {
    gap: 2.5rem;
    padding: 2rem 2.5rem;
  }
}

.categories__content--title {
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
@media only screen and (min-width: 1200px) {
  .categories__content--title {
    font-size: 1.8rem;
    line-height: 2.2rem;
  }
}
.categories__content--subtitle {
  font-size: 1.4rem;
  line-height: 2rem;
  color: var(--body-text-color);
}

/*
    categories shop card css
*/
.categories__shop--inner {
  display: flex;
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  flex-wrap: wrap;
}
.categories__shop--card {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition);
  width: 50%;
}
.categories__shop--card:hover {
  background: var(--bg-offwhite-color);
}
@media only screen and (min-width: 480px) {
  .categories__shop--card {
    width: 33.33%;
  }
}
@media only screen and (min-width: 768px) {
  .categories__shop--card {
    width: 25%;
  }
}
.categories__shop--card__link {
  padding: 2rem;
  text-align: center;
}
.categories__shop--card .categories__content--title {
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
}
@media only screen and (min-width: 1200px) {
  .categories__shop--card .categories__content--title {
    font-size: 1.6rem;
  }
}
.categories__shop--card .categories__content--subtitle {
  color: var(--foreground-sub-color);
}

/*
    home 3 categories css
*/
.categories__inner--style3 {
  gap: 2rem;
  flex-wrap: wrap;
}
@media only screen and (min-width: 576px) {
  .categories__inner--style3 {
    gap: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .categories__inner--style3 {
    gap: 3rem;
  }
}

.categories__card--style3 {
  border: 1px solid var(--border-color);
  width: 45%;
  border-radius: 5px;
  transition: var(--transition);
}
@media only screen and (min-width: 400px) {
  .categories__card--style3 {
    width: 46%;
  }
}
@media only screen and (min-width: 576px) {
  .categories__card--style3 {
    width: 29.7%;
  }
}
@media only screen and (min-width: 768px) {
  .categories__card--style3 {
    width: 22.3%;
  }
}
@media only screen and (min-width: 992px) {
  .categories__card--style3 {
    width: 17.8%;
  }
}
@media only screen and (min-width: 1366px) {
  .categories__card--style3 {
    width: 18%;
  }
}
.categories__card--style3 .categories__thumbnail--img {
  margin: 0 auto;
}
.categories__card--style3:hover {
  border-color: var(--secondary-color);
}

.categories__content.style3 {
  padding-top: 1.3rem;
}
.categories__content.style3 .categories__content--subtitle {
  color: var(--foreground-sub-color);
}

/* 
    5. Product card css 
*/
.tab__btn--wrapper {
  gap: 1rem;
  flex-wrap: wrap;
}
@media only screen and (min-width: 992px) {
  .tab__btn--wrapper {
    gap: 1.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .tab__btn--wrapper {
    gap: 2.5rem;
  }
}
.tab__btn--link {
  font-weight: 600;
  font-family: var(--inter-fonts);
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--foreground-sub-color);
  padding: 3px 10px;
  border: 0;
  background: var(--body-background-color);
  border-radius: 5px;
  line-height: 2.4rem;
}
@media only screen and (min-width: 992px) {
  .tab__btn--link {
    font-size: 1.4rem;
    padding: 3px 12px;
    line-height: 2.6rem;
  }
}
.tab__btn--link:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
  text-decoration: underline;
}
.tab__btn--link.active {
  background: var(--secondary-color);
  color: var(--text-white-color);
  text-decoration: underline;
}

.product__card {
  border: 1px solid var(--border-color);
  border-radius: 5px;
}
.product__card:hover .product__card--thumbnail__img {
  transform: scale(1.02);
}
.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: 35%;
}
.product__card:hover .product__card--action__btn {
  transform: scale(1);
}
.product__card:hover .product__card--price {
  opacity: 0;
  visibility: hidden;
}
.product__card:hover .product__card--footer {
  opacity: 1;
  visibility: visible;
  bottom: -15px;
}
.product__card--thumbnail {
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) {
  .product__card--thumbnail {
    padding: 2rem 2.5rem;
  }
}
.product__card--thumbnail__link {
  position: relative;
}
.product__card--thumbnail__img {
  width: 100%;
}
.product__card--content {
  padding: 0 1.5rem 2rem;
  position: relative;
}
@media only screen and (min-width: 1200px) {
  .product__card--content {
    padding: 0 2rem 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--footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  padding: 0 2rem 2rem;
  background: var(--body-background-color);
}
.product__card--footer::before {
  position: absolute;
  content: "";
  border: 1px solid var(--border-color);
  left: -1px;
  bottom: 0;
  right: -2px;
  border-top: 0;
  width: 101%;
  height: 100%;
  border-radius: 0 0 5px 5px;
  pointer-events: none;
}
.product__card--btn {
  text-transform: uppercase;
  font-size: 1.2rem;
  display: block;
  height: 3.5rem;
  line-height: 3.5rem;
  border-radius: 5px;
  text-align: center;
  padding: 0 1.5rem;
}
.product__card--btn svg {
  margin-right: 3px;
}
@media only screen and (min-width: 992px) {
  .product__card--btn {
    height: 3.8rem;
    line-height: 3.8rem;
    padding: 0 2rem;
  }
}
.product__card--action {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  opacity: 0;
  visibility: visible;
  z-index: 9;
  transition: 0.5s;
  bottom: 30%;
  gap: 0.8rem;
}
.product__card--action__btn {
  width: 3rem;
  height: 3rem;
  line-height: 2.8rem;
  color: var(--foreground-sub-color);
  background: var(--body-background-color);
  border-radius: 50%;
  text-align: center;
  transform: scale(0.5);
  transition: 0.5s;
}
.product__card--action__btn:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}
@media only screen and (min-width: 576px) {
  .product__card--action__btn {
    width: 3.5rem;
    height: 3.5rem;
    line-height: 3.3rem;
  }
}
@media only screen and (min-width: 992px) {
  .product__card--action__btn {
    width: 4rem;
    height: 4rem;
    line-height: 3.8rem;
  }
}
.product__card--rating {
  margin-bottom: 1.1rem;
}
.product__card--price {
  transition: var(--transition);
}

.product__badge {
  width: 4rem;
  height: 4rem;
  font-size: 1.2rem;
  line-height: 4rem;
  background: var(--secondary-color);
  color: var(--text-white-color);
  font-family: var(--inter-fonts);
  position: absolute;
  top: 12px;
  right: 12px;
  text-align: center;
  border-radius: 50%;
}

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

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

.old__price {
  color: var(--foreground-sub-color);
  margin-left: 0.8rem;
  line-height: 1.8rem;
  font-family: var(--inter-fonts);
}

.rating {
  gap: 0.5rem;
}
.rating__icon {
  color: var(--secondary-color);
}

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

/*
  home three product css
*/
.product__tab--btn__style3 {
  margin-top: 2.5rem;
}
@media only screen and (min-width: 768px) {
  .product__tab--btn__style3 {
    margin-top: 3rem;
  }
}
.product__tab--btn__style3 .tab__btn--link {
  background: var(--bg-offwhite-color);
  padding: 8px 2.4rem;
  border-radius: 20px;
  font-weight: 500;
  text-transform: capitalize;
}
.product__tab--btn__style3 .tab__btn--link.active {
  background: var(--secondary-color);
  text-decoration: inherit;
}
.product__tab--btn__style3 .tab__btn--link:hover {
  background: var(--secondary-color);
  text-decoration: inherit;
}

/*
  home four product css here
*/
.deals__product--card {
  border: 1px solid var(--secondary-color);
  padding: 2rem 1.5rem;
  border-radius: 5px;
}
@media only screen and (max-width: 991px) {
  .deals__product--card {
    margin-top: 3rem;
  }
}

.deals__product--card__thumbnail {
  margin-bottom: 2.2rem;
}
.deals__product--card__thumbnail--img {
  margin: 0 auto;
}

.deals__product--title {
  margin-bottom: 1.4rem;
}

.hurryup__text {
  font-size: 1.4rem;
}
.hurryup__text span {
  color: var(--secondary-color);
  font-weight: 600;
}

/* 
    14. Small Product css 
*/
.product__sidebar {
  border: 1px solid var(--secondary-color);
  background: var(--body-background-color);
  border-radius: 5px;
}
@media only screen and (max-width: 991px) {
  .product__sidebar {
    margin-top: 3rem;
  }
}

.small__product--header {
  background: var(--secondary-color);
}
.small__product--header__title {
  color: var(--text-white-color);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 4.5rem;
  padding: 0 1.8rem;
}
@media only screen and (min-width: 1200px) {
  .small__product--header__title {
    font-size: 1.8rem;
  }
}
.small__product--inner {
  padding: 0.3rem 1.2rem 1.2rem;
  max-height: 463px;
}
@media only screen and (min-width: 1200px) {
  .small__product--inner {
    padding: 0.5rem 1.5rem 1.5rem;
  }
}
@media only screen and (min-width: 1366px) {
  .small__product--inner {
    padding: 0.4rem 1.7rem 1.7rem;
  }
}
.small__product--inner .swiper-slide-active .small__product--card {
  border-top: 0;
}
.small__product--thumbnail {
  overflow: hidden;
}
@media only screen and (max-width: 1199px) {
  .small__product--thumbnail {
    width: 63px;
  }
}
@media only screen and (max-width: 767px) {
  .small__product--thumbnail {
    width: 85px;
  }
}
.small__product--card {
  gap: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
}
@media only screen and (min-width: 768px) {
  .small__product--card {
    gap: 1.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .small__product--card {
    gap: 1.5rem;
  }
}
@media only screen and (min-width: 1366px) {
  .small__product--card {
    gap: 2rem;
  }
}
.small__product--card:hover .small__product--thumbnail img {
  transform: scale(1.03);
}
.small__product--card__title {
  margin-bottom: 0.3rem;
  font-size: 1.4rem;
}
@media only screen and (min-width: 1200px) {
  .small__product--card__title {
    font-size: 1.5rem;
  }
}
.small__product--card__price {
  margin-bottom: 0.4rem;
}
.small__product--card.style2 {
  gap: 2rem;
  padding: 1.5rem;
  border: 1px solid transparent;
  background: var(--body-background-color);
  border-radius: 5px;
  transition: var(--transition);
}
@media only screen and (min-width: 576px) {
  .small__product--card.style2 {
    padding: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .small__product--card.style2 {
    gap: 3rem;
  }
}
.small__product--card.style2:hover {
  border-color: var(--secondary-color);
}
.small__product--card.style2 .small__product--rating {
  margin-bottom: 8px;
}

.small__product--swiper__btn {
  position: absolute;
  top: 35px;
  padding: 0;
  height: auto;
  right: 8px;
  width: auto;
  color: var(--text-white-color);
}
.small__product--swiper__btn::after {
  display: none;
}
.small__product--swiper__btn.swiper-button-prev {
  right: 34px;
  left: auto;
}
.small__product--swiper__btn.swiper-button-disabled {
  opacity: 0.55;
}

.small__product--section__bg {
  background: url(../img/banner/small-product-sectio-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

/* 
    15. Single Product css 
*/
.deal__section--bg {
  background: url(/site/img/index/kamp2.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

.product__badge.style__left {
  left: 1rem;
  right: auto;
}
.product__badge--new {
  background: var(--secondary-color);
  color: var(--text-white-color);
  font-family: var(--inter-fonts);
  font-weight: 600;
  text-align: center;
  width: 5.2rem;
  height: 2.2rem;
  line-height: 2.2rem;
  font-size: 1.2rem;
  position: absolute;
  top: 1.2rem;
  right: 1.3rem;
  border-radius: 3px;
}

.single__product--wrapper {
  background: var(--body-background-color);
  border: 1px solid var(--secondary-color);
  padding: 2rem;
  border-radius: 5px;
}
@media only screen and (min-width: 768px) {
  .single__product--wrapper {
    padding: 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .single__product--wrapper {
    padding: 3rem 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .single__product--wrapper {
    padding: 3rem;
  }
}
.single__product--wrapper:hover .single__product--thumbnail__img {
  transform: scale(1.03);
}
.single__product--wrapper:hover .swiper__nav--btn {
  opacity: 1;
  visibility: visible;
}
.single__product--topbar {
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media only screen and (min-width: 576px) {
  .single__product--topbar {
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 768px) {
  .single__product--topbar {
    gap: 3rem;
  }
}
@media only screen and (max-width: 575px) {
  .single__product--topbar {
    gap: 2.5rem;
    flex-wrap: wrap;
  }
}
.single__product--thumbnail {
  position: relative;
  overflow: hidden;
}
.single__product--thumbnail__preview {
  width: 100%;
}
@media only screen and (min-width: 576px) {
  .single__product--thumbnail__preview {
    width: 250px;
  }
}
@media only screen and (min-width: 768px) {
  .single__product--thumbnail__preview {
    width: 357px;
  }
}
.single__product--content {
  width: 100%;
}
@media only screen and (min-width: 576px) {
  .single__product--content {
    width: calc(100% - 250px);
  }
}
@media only screen and (min-width: 768px) {
  .single__product--content {
    width: calc(100% - 357px);
  }
}
@media only screen and (max-width: 575px) {
  .single__product--content {
    text-align: center;
  }
}
@media only screen and (max-width: 575px) {
  .single__product--content .product__card--rating {
    justify-content: center;
  }
}
.single__product--action {
  margin-top: 1.5rem;
  gap: 1rem;
}
@media only screen and (min-width: 768px) {
  .single__product--action {
    bottom: 3rem;
  }
}
@media only screen and (max-width: 575px) {
  .single__product--action {
    justify-content: center;
  }
}
.single__product--action__btn {
  width: 3.5rem;
  height: 3.4rem;
  line-height: 3rem;
  text-align: center;
  color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  border-radius: 5px;
}
.single__product--action__btn:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}
.single__product--cart__btn {
  height: 3.4rem;
  line-height: 3.4rem;
  padding: 0 1.5rem;
  background: var(--primary-color);
  font-size: 1.2rem;
  font-family: var(--inter-fonts);
  font-weight: 600;
  text-transform: capitalize;
  color: var(--text-white-color);
  border-radius: 5px;
}
.single__product--cart__btn:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}
.single__product--title {
  margin: 1.5rem 0;
}
.single__product--countdown {
  gap: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .single__product--countdown {
    gap: 1.5rem;
  }
}
@media only screen and (max-width: 575px) {
  .single__product--countdown {
    justify-content: center;
  }
}
.single__product--countdown .countdown__item:hover .countdown__number {
  background: var(--secondary-color);
  color: var(--text-white-color);
}
.single__product--countdown .countdown__number {
  width: 4.5rem;
  height: 3.7rem;
  line-height: 3.7rem;
  background: var(--bg-offwhite-color);
  font-size: 1.4rem;
  font-family: var(--inter-fonts);
  font-weight: 600;
  text-align: center;
  border-radius: 3px;
}
.single__product--countdown .countdown__text {
  font-size: 1.4rem;
  font-family: var(--inter-fonts);
  font-weight: 500;
  color: var(--foreground-sub-color);
  text-align: center;
  text-transform: capitalize;
}

.product__sold {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding-bottom: 1.8rem;
  margin: 1.2rem 0 2rem;
}
@media only screen and (min-width: 576px) {
  .product__sold {
    padding-bottom: 2.1rem;
    margin: 1.5rem 0 2.2rem;
  }
}
.product__sold::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1.2rem;
  background: var(--bg-offwhite-color);
  left: 0;
  bottom: 0;
  border-radius: 3px;
}
.product__sold::after {
  position: absolute;
  content: "";
  width: 85%;
  height: 1.2rem;
  background: var(--secondary-color);
  left: 0;
  bottom: 0;
  border-radius: 3px;
}
.product__sold--text {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 500;
  font-family: var(--inter-fonts);
  color: var(--foreground-sub-color);
}
.product__sold--text__number {
  color: var(--body-text-color);
}

.single__product--nav {
  padding: 0 1.5rem;
}
.single__product--nav__items {
  border: 1px solid var(--border-color);
  padding: 1rem;
  cursor: pointer;
  border-radius: 5px;
  transition: var(--transition);
}
.single__product--nav__items:hover {
  border-color: var(--secondary-color);
}
@media only screen and (min-width: 768px) {
  .single__product--nav__items {
    padding: 1.3rem;
  }
}
.single__product--nav__thumbnail {
  margin: 0 auto;
}
.single__product--nav .swiper-slide-active .single__product--nav__items {
  border-color: var(--secondary-color);
}

/* 
    4. Banner css 
*/
.banner__items {
  border-radius: 5px;
}

.banner__thumbnail {
  overflow: hidden;
  width: 100%;
  border-radius: 5px;
}
.banner__thumbnail--img {
  width: 100%;
  border-radius: 5px;
}
.banner__thumbnail:hover .banner__thumbnail--img {
  transform: scale(1.03);
}

.banner__content {
  position: absolute;
  top: 50%;
  left: 3rem;
  transform: translatey(-50%);
  cursor: pointer;
  display: inline-block;
}
@media only screen and (min-width: 992px) {
  .banner__content {
    left: 5rem;
  }
}
.banner__content.right {
  right: 3rem;
  left: auto;
  text-align: center;
}
@media only screen and (min-width: 480px) {
  .banner__content.right {
    right: 5rem;
  }
}
.banner__content.style__right {
  right: 3rem;
  left: auto;
}
.banner__content.style__top {
  top: 3rem;
  transform: inherit;
  left: 2.5rem;
}
.banner__content--subtitle {
  font-family: var(--inter-fonts);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
@media only screen and (max-width: 991px) {
  .banner__content--subtitle {
    line-height: 2rem;
  }
}
.banner__content--title {
  color: var(--text-white-color);
  margin-bottom: 1rem;
}
@media only screen and (min-width: 992px) {
  .banner__content--title {
    margin-bottom: 10px;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content--title {
    margin-bottom: 12px;
  }
}
@media only screen and (max-width: 991px) {
  .banner__content--title {
    line-height: 2.4rem;
    font-size: 1.7rem;
  }
}
.banner__content--title__inner {
  color: var(--secondary-color);
}
.banner__content--price {
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 600;
  color: var(--text-white-color);
  font-family: var(--inter-fonts);
  display: block;
}
@media only screen and (min-width: 992px) {
  .banner__content--price {
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content--price {
    font-size: 2rem;
    line-height: 2.2rem;
  }
}
.banner__content--btn {
  font-weight: 700;
  color: var(--text-white-color);
  margin-top: 0.5rem;
  font-size: 1.4rem;
}
@media only screen and (min-width: 1200px) {
  .banner__content--btn {
    margin-top: 1rem;
    font-size: 1.5rem;
  }
}
.banner__content--btn svg {
  margin-left: 0.5rem;
}
.banner__content--btn:hover {
  color: var(--secondary-color);
}

.banner__badge {
  position: absolute;
  background: var(--secondary-color);
  transform: translatey(-50%);
  top: 50%;
  right: 2rem;
  width: 6rem;
  height: 6rem;
  padding: 7px;
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-family: var(--inter-fonts);
  font-weight: 500;
  color: var(--text-white-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media only screen and (min-width: 992px) {
  .banner__badge {
    right: 5rem;
  }
}
@media only screen and (max-width: 479px) {
  .banner__badge {
    display: none;
  }
}
.banner__badge::before {
  position: absolute;
  content: "";
  border: 1px dashed var(--body-background-color);
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  opacity: 0.6;
}
.banner__badge--style2 {
  -webkit-clip-path: polygon(0 19%, 97% 19%, 85% 49%, 100% 82%, 0 82%, 14% 51%);
  clip-path: polygon(0 19%, 97% 19%, 85% 49%, 100% 82%, 0 82%, 14% 51%);
  background: var(--secondary-color);
  color: var(--text-white-color);
  font-size: 1.1rem;
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 0.6rem;
}

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

.banner__sidebar--badge {
  transform: inherit;
  bottom: -8px;
  right: -80px;
  top: auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__max--height {
    height: 160px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
@media only screen and (max-width: 479px) {
  .banner__max--height {
    height: 150px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

/*
    discount banner css here
*/
.discount__banner--thumbnail__img {
  height: 5.3rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.discount__banner--text {
  font-size: 1.6rem;
  font-weight: 600;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translatey(-50%);
}
@media only screen and (min-width: 992px) {
  .discount__banner--text {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 479px) {
  .discount__banner--text {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}

/*
    home two banner css here
*/
.banner__content--style {
  right: 5rem;
  left: auto;
}
.banner__content--style .banner__content--subtitle {
  font-size: 1.2rem;
  line-height: 2rem;
  text-transform: uppercase;
}
.banner__content--style .banner__content--btn {
  font-weight: 600;
  line-height: 2rem;
  color: var(--secondary-color);
  text-decoration: underline;
}

.discount__banner--content {
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translatey(-50%);
}
@media only screen and (min-width: 576px) {
  .discount__banner--content {
    left: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  .discount__banner--content {
    left: 7rem;
  }
}
.discount__banner--content__subtitle {
  font-size: 1.4rem;
  line-height: 2rem;
  font-family: var(--inter-fonts);
  text-transform: uppercase;
  color: var(--body-text-color);
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .discount__banner--content__subtitle {
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin-bottom: 1.3rem;
  }
}
@media only screen and (min-width: 992px) {
  .discount__banner--content__subtitle {
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .discount__banner--content__subtitle {
    font-size: 2rem;
    line-height: 2.4rem;
    margin-bottom: 1.8rem;
  }
}
.discount__banner--content__title {
  font-size: 2rem;
  line-height: 3rem;
  text-transform: uppercase;
  margin-bottom: 1.8rem;
}
@media only screen and (min-width: 768px) {
  .discount__banner--content__title {
    font-size: 2.5rem;
    line-height: 3rem;
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .discount__banner--content__title {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .discount__banner--content__title {
    font-size: 3.5rem;
    line-height: 4rem;
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .discount__banner--content__title {
    font-size: 4.5rem;
    line-height: 5rem;
    margin-bottom: 3rem;
  }
}

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

@media only screen and (max-width: 575px) {
  .discount__banner--img__height {
    height: 200px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

/*
    home 3 banner css
*/
.banner__content--style3 {
  left: 2.5rem;
}
@media only screen and (min-width: 576px) {
  .banner__content--style3 {
    left: 3.2rem;
  }
}
.banner__content--style3__subtitle {
  font-size: 1.1rem;
  line-height: 1.8rem;
  font-family: var(--inter-fonts);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 576px) {
  .banner__content--style3__subtitle {
    font-size: 1.2rem;
  }
}
.banner__content--style3__title {
  font-family: var(--rubik-fonts);
  font-size: 1.8rem;
  line-height: 2rem;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 576px) {
  .banner__content--style3__title {
    font-size: 2rem;
    line-height: 2.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content--style3__title {
    font-size: 2.3rem;
    line-height: 2.5rem;
    margin-bottom: 1.2rem;
  }
}
.banner__content--style3__btn {
  font-size: 1.3rem;
  line-height: 2rem;
  font-weight: 600;
  font-family: var(--inter-fonts);
  color: var(--text-white-color);
  border-bottom: 1px solid var(--text-white-color);
}
@media only screen and (min-width: 576px) {
  .banner__content--style3__btn {
    font-size: 1.4rem;
  }
}

/*
    video banner css here
*/
@media only screen and (max-width: 991px) {
  .banner__video--inner {
    padding-right: 170px;
  }
}
@media only screen and (max-width: 767px) {
  .banner__video--inner {
    padding-right: 0;
  }
}

.image__width--text {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translatey(-50%);
  background: linear-gradient(to right, #FF5E03, #ED1D24);
  padding: 3.5rem 2.5rem;
  border-radius: 5px;
}
@media only screen and (min-width: 768px) {
  .image__width--text {
    width: 400px;
    padding: 3rem 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .image__width--text {
    width: 500px;
    padding: 5rem 3.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .image__width--text {
    position: inherit;
    width: 100%;
    top: inherit;
    transform: inherit;
    margin-top: 3rem;
  }
}
.image__width--text__title {
  font-family: var(--rubik-fonts);
  color: var(--text-white-color);
  font-weight: 500;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 1200px) {
  .image__width--text__title {
    font-size: 3.5rem;
    line-height: 4.5rem;
    margin-bottom: 2rem;
  }
}
.image__width--text__desc {
  font-size: 1.4rem;
  color: var(--text-white-color);
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 1200px) {
  .image__width--text__desc {
    margin-bottom: 1.8rem;
  }
}
.image__width--text__btn {
  float: right;
  font-weight: 700;
  color: var(--text-white-color);
}
.image__width--text__btn:hover {
  color: var(--primary-color);
}

.banner__video--play {
  position: absolute;
  bottom: 3rem;
  left: 3rem;
  color: var(--text-white-color);
  font-size: 1.4rem;
  font-weight: 600;
}
.banner__video--play svg {
  margin-right: 4px;
}

/*
    home 4 banner css
*/
.banner__content--style4 {
  position: absolute;
  top: 50%;
  left: 3rem;
  transform: translatey(-50%);
}
.banner__content--style4.right {
  right: 4rem;
  left: auto;
}
.banner__content--style4__subtitle {
  font-weight: 600;
  color: var(--text-white-color);
  text-transform: uppercase;
  font-size: 1.3rem;
  line-height: 2rem;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 576px) {
  .banner__content--style4__subtitle {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 992px) {
  .banner__content--style4__subtitle {
    font-size: 1.5rem;
    line-height: 2.2rem;
    margin-bottom: 1.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content--style4__subtitle {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 1366px) {
  .banner__content--style4__subtitle {
    font-size: 1.8rem;
    line-height: 2.5rem;
  }
}
.banner__content--style4__subtitle span {
  color: var(--secondary-color);
}
.banner__content--style4__title {
  font-size: 1.8rem;
  line-height: 2.2rem;
  font-family: var(--rubik-fonts);
  color: var(--text-white-color);
  margin-bottom: 1.2rem;
}
@media only screen and (min-width: 576px) {
  .banner__content--style4__title {
    font-size: 2.2rem;
    line-height: 2.4rem;
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .banner__content--style4__title {
    font-size: 2.8rem;
    line-height: 3rem;
    margin-bottom: 1.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content--style4__title {
    font-size: 3.2rem;
    line-height: 3.5rem;
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .banner__content--style4__title {
    font-size: 4rem;
    line-height: 4rem;
  }
}
.banner__content--style4__title span {
  color: var(--secondary-color);
}
.banner__content--style4__title.font__style {
  font-size: 1.6rem;
  line-height: 2rem;
}
@media only screen and (min-width: 576px) {
  .banner__content--style4__title.font__style {
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 992px) {
  .banner__content--style4__title.font__style {
    font-size: 2.2rem;
    line-height: 2.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content--style4__title.font__style {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}
@media only screen and (min-width: 1366px) {
  .banner__content--style4__title.font__style {
    font-size: 3rem;
    line-height: 3rem;
  }
}
.banner__content--style4__title2 {
  color: var(--text-white-color);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 2rem;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 576px) {
  .banner__content--style4__title2 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .banner__content--style4__title2 {
    font-size: 1.8rem;
    line-height: 2rem;
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content--style4__title2 {
    font-size: 2rem;
    line-height: 2rem;
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 1366px) {
  .banner__content--style4__title2 {
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-bottom: 4rem;
  }
}
.banner__content--style4__title2.font__style2 {
  font-size: 1.3rem;
  line-height: 2rem;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 576px) {
  .banner__content--style4__title2.font__style2 {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content--style4__title2.font__style2 {
    font-size: 1.6rem;
    margin-bottom: 2.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__content--style4__title2.font__style2 {
    font-size: 1.8rem;
    line-height: 2.2rem;
    margin-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 1366px) {
  .banner__content--style4__title2.font__style2 {
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 3rem;
  }
}
@media only screen and (max-width: 479px) {
  .banner__content--style4__title2.font__style2 {
    display: none;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner__max--height4 {
    height: 450px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
@media only screen and (max-width: 479px) {
  .banner__max--height4 {
    height: 210px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.banner__content--style4__badge {
  font-size: 1.3rem;
  line-height: 2rem;
  background: var(--secondary-color);
  color: var(--text-white-color);
  font-family: var(--inter-fonts);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 992px) {
  .banner__content--style4__badge {
    font-size: 1.4rem;
    line-height: 2.2rem;
    padding: 3px 8px;
    margin-bottom: 2rem;
  }
}
@media only screen and (max-width: 479px) {
  .banner__content--style4__badge {
    display: none;
  }
}

.banner__price--style4 {
  margin-bottom: 1.2rem;
}
@media only screen and (min-width: 480px) {
  .banner__price--style4 {
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .banner__price--style4 {
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .banner__price--style4 {
    margin-bottom: 2rem;
  }
}

.banner__content--style4__btn {
  font-size: 1.4rem;
  line-height: 3.8rem;
  height: 3.8rem;
  padding: 0 2.2rem;
}
@media only screen and (max-width: 767px) {
  .banner__content--style4__btn {
    line-height: 3.5rem;
    height: 3.5rem;
    padding: 0 1.8rem;
  }
}

/*
    home 5 banner css
*/
@media only screen and (max-width: 991px) {
  .banner__sidebar.style5 {
    display: flex;
    gap: 3rem;
    margin-top: 3rem;
  }
}
@media only screen and (max-width: 479px) {
  .banner__sidebar.style5 {
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 991px) {
  .banner__sidebar.style5 .banner__items.mb-30 {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 479px) {
  .banner__sidebar.style5 .banner__items {
    width: 100%;
  }
}

.banner__content--style5 {
  position: absolute;
  left: 2.5rem;
  top: 2rem;
}
@media only screen and (min-width: 1200px) {
  .banner__content--style5 {
    top: 3rem;
  }
}
.banner__content--style5.right {
  right: 2.5rem;
  left: auto;
}
.banner__content--style5__subtitle {
  font-size: 1.4rem;
  line-height: 2rem;
  margin-bottom: 0.5rem;
}
.banner__content--style5__title {
  font-family: var(--rubik-fonts);
  font-weight: 600;
}
.banner__content--style5__btn {
  color: var(--text-white-color);
  font-size: 1.3rem;
  text-transform: uppercase;
  line-height: 1.8rem;
  border-bottom: 1px solid var(--body-background-color);
  margin-top: 1rem;
}
.banner__content--style5__btn:hover {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}
@media only screen and (min-width: 1200px) {
  .banner__content--style5__btn {
    font-size: 1.4rem;
    margin-top: 1.5rem;
  }
}

/* 
    8. Blog css
*/
.blog__section--inner {
  padding: 2px;
}

.view__all--link {
  font-size: 1.4rem;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
  line-height: 2rem;
}
@media only screen and (min-width: 576px) {
  .view__all--link {
    font-size: 1.6rem;
  }
}
.view__all--link::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background: var(--secondary-color);
  bottom: -13px;
  left: 0;
}

.blog__card {
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  transition: var(--transition);
  position: relative;
}
@media only screen and (min-width: 768px) {
  .blog__card {
    padding: 2rem;
  }
}
.blog__card::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(to top, #FCEEF2, #F5F5FE);
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
.blog__card:hover {
  border-color: var(--secondary-color);
}
.blog__card:hover::before {
  opacity: 1;
  visibility: visible;
}
.blog__card:hover .blog__card--social {
  opacity: 1;
  visibility: visible;
}
.blog__card:hover .blog__card--social .social__share--icon {
  transform: scale(1);
}
.blog__card:hover .blog__card--thumbnail__img {
  transform: scale(1.06) rotate(2deg);
}
.blog__card--thumbnail {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}
.blog__card--thumbnail__link {
  display: block;
  width: 100%;
}
.blog__card--thumbnail__img {
  width: 100%;
}
.blog__card--meta {
  font-size: 1.2rem;
  line-height: 2rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--foreground-sub-color);
  font-family: var(--inter-fonts);
  margin-bottom: 0.7rem;
}
.blog__card--meta__date {
  width: 5rem;
  height: 4.5rem;
  font-size: 1.3rem;
  font-weight: 600;
  background: var(--secondary-color);
  border-radius: 5px;
  color: var(--text-white-color);
  line-height: 1.7rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 12px;
  left: 12px;
}
@media only screen and (min-width: 768px) {
  .blog__card--meta__date {
    width: 6rem;
    height: 5rem;
    font-size: 1.5rem;
    line-height: 1.8rem;
  }
}
.blog__card--desc {
  color: var(--foreground-sub-color);
  margin-bottom: 1.2rem;
}
.blog__card--title {
  font-size: 1.7rem;
  line-height: 2.5rem;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 480px) {
  .blog__card--title {
    font-size: 1.8rem;
    line-height: 2.6rem;
  }
}
@media only screen and (min-width: 1366px) {
  .blog__card--title {
    font-size: 2rem;
    line-height: 2.8rem;
    margin-bottom: 1.1rem;
  }
}
.blog__card--footer {
  gap: 2rem;
}
.blog__card--content {
  padding: 1.5rem 0 0;
}
.blog__card--btn__link {
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--inter-fonts);
}
.blog__card--btn__link svg {
  margin-left: 0.3rem;
}

.blog__card--social {
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.blog__card--social .social__share--icon {
  transform: scale(0);
  transition: 0.5s;
}

/* 
    9. Testimonial css
*/
.testimonial__items--content {
  text-align: center;
}
.testimonial__items--thumbnail {
  transform: scale(0.6);
  border: 1px solid var(--secondary-color);
  border-radius: 50%;
  opacity: 0.5;
}
.testimonial__items--desc {
  font-size: 1.5rem;
  line-height: 2.8rem;
  color: var(--body-text-color);
  max-width: 100%;
  margin: 0 auto 1.5rem;
}
@media only screen and (min-width: 576px) {
  .testimonial__items--desc {
    font-size: 1.6rem;
    line-height: 2.8rem;
    max-width: 85%;
    margin: 0 auto 1.8rem;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial__items--desc {
    max-width: 64%;
  }
}
.testimonial__items--subtitle {
  font-size: 1.6rem;
  color: var(--foreground-sub-color);
}

.swiper-slide-active .testimonial__items--thumbnail {
  transform: scale(1);
  opacity: 1;
}

.testimonial__active--two {
  margin-top: 2rem;
}
@media only screen and (min-width: 768px) {
  .testimonial__active--two {
    margin-top: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial__active--two {
    margin-top: 3rem;
  }
}

.testimonial__rating {
  margin-bottom: 1.5rem;
}

/* 
    7. Shipping css
*/
.shipping__inner {
  border: 1px solid var(--bg-light-dark-color);
  border-radius: 5px;
  margin-bottom: 5rem;
}
@media only screen and (max-width: 991px) {
  .shipping__inner {
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    padding: 10px 0;
  }
}
@media only screen and (max-width: 575px) {
  .shipping__inner {
    gap: 1rem;
  }
}

.shipping__items {
  gap: 1.5rem;
  justify-content: center;
  width: auto;
  padding: 1rem;
  position: relative;
  transition: var(--transition);
}
@media only screen and (min-width: 576px) {
  .shipping__items {
    padding: 1.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .shipping__items {
    width: 25%;
    padding: 1.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .shipping__items {
    gap: 1.7rem;
    padding: 2rem;
  }
}
.shipping__items::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 48px;
  background: var(--bg-light-dark-color);
  right: 0;
  top: 50%;
  transform: translatey(-50%);
}
@media only screen and (max-width: 991px) {
  .shipping__items::before {
    display: none;
  }
}
.shipping__items:last-child::before {
  display: none;
}
.shipping__items:hover {
  background: var(--bg-light-dark-color);
}

.shipping__content--title {
  margin-bottom: 4px;
}
.shipping__content--desc {
  color: var(--foreground-sub-color);
  font-size: 1.4rem;
  line-height: 2rem;
  font-family: var(--inter-fonts);
}

/*
    home two shipping css
*/
.shipping__inner.style2 {
  border: 1px solid var(--border-color);
}

.shipping__items.style2::before {
  background: var(--border-color);
}
.shipping__items.style2:hover {
  background: var(--bg-offwhite-color);
}

/* 
    22. Newsletter css 
*/
.newsletter__area {
  padding-bottom: 4.2rem;
  border-bottom: 1px solid var(--bg-light-dark-color);
}

.newsletter__inner {
  gap: 3rem;
}
@media only screen and (max-width: 991px) {
  .newsletter__inner {
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: center !important;
  }
}

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

.newsletter__title {
  font-size: 2rem;
  line-height: 3rem;
  color: var(--text-white-color);
  margin-bottom: 0.8rem;
}
@media only screen and (min-width: 480px) {
  .newsletter__title {
    font-size: 2.2rem;
  }
}
@media only screen and (min-width: 576px) {
  .newsletter__title {
    font-size: 2.5rem;
    line-height: 3.2rem;
  }
}
@media only screen and (min-width: 992px) {
  .newsletter__title {
    font-size: 3rem;
    line-height: 3.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .newsletter__title {
    font-size: 3.4rem;
    line-height: 4rem;
  }
}
@media only screen and (min-width: 1366px) {
  .newsletter__title {
    font-size: 3.6rem;
  }
}

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

@media only screen and (max-width: 575px) {
  .newsletter__subscribe {
    width: 100%;
  }
}
.newsletter__subscribe--form {
  width: 100%;
  position: relative;
}
@media only screen and (max-width: 575px) {
  .newsletter__subscribe--form {
    margin: 0 auto;
  }
}
@media only screen and (min-width: 480px) {
  .newsletter__subscribe--form {
    width: 90%;
  }
}
@media only screen and (min-width: 576px) {
  .newsletter__subscribe--form {
    width: 470px;
  }
}
@media only screen and (min-width: 1200px) {
  .newsletter__subscribe--form {
    width: 560px;
  }
}
.newsletter__subscribe--form input::-webkit-input-placeholder {
  color: var(--foreground-sub-color);
}
.newsletter__subscribe--form input::-moz-placeholder {
  color: var(--foreground-sub-color);
}
.newsletter__subscribe--form input:-ms-input-placeholder {
  color: var(--foreground-sub-color);
}
.newsletter__subscribe--form input:-moz-placeholder {
  color: var(--foreground-sub-color);
}
.newsletter__subscribe--input {
  width: 100%;
  height: 4.5rem;
  border: 1px solid transparent;
  color: var(--foreground-sub-color);
  background: var(--bg-light-dark-color);
  font-weight: 500;
  font-family: var(--inter-fonts);
  border-radius: 5px;
  padding: 0 130px 0 1.5rem;
}
.newsletter__subscribe--input:focus {
  border-color: var(--secondary-color);
  color: var(--text-white-color);
}
@media only screen and (min-width: 480px) {
  .newsletter__subscribe--input {
    padding: 0 140px 0 2rem;
    height: 4.8rem;
  }
}
@media only screen and (min-width: 992px) {
  .newsletter__subscribe--input {
    height: 5.5rem;
    padding: 0 155px 0 2rem;
  }
}
.newsletter__subscribe--button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border: 0;
  background: var(--secondary-color);
  padding: 0 1rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-white-color);
  border-radius: 0 5px 5px 0;
}
.newsletter__subscribe--button:hover {
  background: var(--body-background-color);
  color: var(--foreground-color);
}
@media only screen and (min-width: 576px) {
  .newsletter__subscribe--button {
    padding: 0 1.2rem;
    font-size: 1.3rem;
  }
}
@media only screen and (min-width: 992px) {
  .newsletter__subscribe--button {
    padding: 0 1.6rem;
    font-size: 1.4rem;
  }
}

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

.footer__bg {
  background: var(--bg-black-color);
}

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

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

.social__share--icon__style2 {
  width: 3.8rem;
  height: 3.8rem;
  line-height: 3.6rem;
  background: var(--body-background-color);
  color: var(--foreground-sub-color);
  text-align: center;
  border-radius: 50%;
}
.social__share--icon__style2:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}
@media only screen and (min-width: 1200px) {
  .social__share--icon__style2 {
    width: 4.2rem;
    height: 4.2rem;
    line-height: 3.8rem;
  }
}

@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;
  margin-bottom: 0;
  color: var(--foreground-sub-color);
}
@media only screen and (min-width: 768px) {
  .footer__widget--desc {
    font-size: 1.5rem;
  }
}
.footer__widget--title {
  margin-bottom: 2.2rem;
  font-weight: 600;
  position: relative;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: var(--text-white-color);
  font-family: var(--rubik-fonts);
  text-transform: uppercase;
}
@media only screen and (min-width: 480px) {
  .footer__widget--title {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 576px) {
  .footer__widget--title {
    font-size: 1.7rem;
  }
}
@media only screen and (min-width: 768px) {
  .footer__widget--title {
    font-size: 1.8rem;
    line-height: 2.4rem;
    margin-bottom: 1.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .footer__widget--title {
    line-height: 2.6rem;
    margin-bottom: 2rem;
  }
}
.footer__widget--title__arrowdown--icon {
  position: absolute;
  right: 0;
  top: 38%;
  transition: 0.3s;
  display: none;
}
@media only screen and (max-width: 767px) {
  .footer__widget--title__arrowdown--icon {
    display: block;
  }
}
.footer__widget.active {
  padding-bottom: 3rem;
}
.footer__widget.active .footer__widget--title__arrowdown--icon {
  transform: rotate(180deg);
}
.footer__widget--menu__list {
  margin-bottom: 0.6rem;
}
@media only screen and (min-width: 768px) {
  .footer__widget--menu__list {
    margin-bottom: 0.8rem;
  }
}
.footer__widget--menu__list:last-child {
  margin-bottom: 0;
}
.footer__widget--menu__text {
  line-height: 2.6rem;
  font-size: 1.4rem;
  color: var(--foreground-sub-color);
}
@media only screen and (min-width: 768px) {
  .footer__widget--menu__text {
    line-height: 2.8rem;
    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 {
  border-top: 1px solid var(--bg-light-dark-color);
}
.footer__bottom--inenr {
  padding: 1.8rem 0;
}
@media only screen and (max-width: 991px) {
  .footer__bottom--inenr {
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center !important;
  }
}

.copyright__content {
  font-size: 1.6rem;
  font-family: var(--rubik-fonts);
  color: var(--text-white-color);
}
.copyright__content--link {
  color: var(--text-white-color);
}
.copyright__content--link:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}
@media only screen and (max-width: 767px) {
  .copyright__content {
    text-align: center;
  }
}

/*
    home five footer css
*/
.footer__bg5 {
  background: linear-gradient(to right, #F1F2FA, #FCEDF1);
}

.footer__color--style .newsletter__area {
  border-bottom: 1px solid var(--border-color);
}
.footer__color--style .newsletter__title {
  color: var(--foreground-color);
}
.footer__color--style .newsletter__subscribe--input {
  background: var(--body-background-color);
}
.footer__color--style .footer__widget--title {
  color: var(--foreground-color);
}
.footer__color--style .footer__widget--desc {
  color: var(--foreground-color);
}
.footer__color--style .social__share--icon__style2 {
  border: 1px solid var(--border-color);
  color: var(--foreground-color);
  line-height: 3.4rem;
}
@media only screen and (min-width: 1200px) {
  .footer__color--style .social__share--icon__style2 {
    line-height: 3.6rem;
  }
}
.footer__color--style .social__share--icon__style2:hover {
  color: var(--text-white-color);
  border-color: var(--secondary-color);
}
.footer__color--style .footer__widget--menu__text {
  color: var(--foreground-color);
}
.footer__color--style .footer__widget--menu__text:hover {
  color: var(--secondary-color);
}
.footer__color--style .footer__bottom {
  border-top: 1px solid var(--border-color);
}
.footer__color--style .copyright__content {
  color: var(--foreground-color);
}
.footer__color--style .copyright__content--link {
  color: var(--foreground-color);
}
.footer__color--style .copyright__content--link:hover {
  color: var(--secondary-color);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.variant__wishlist--icon {
  display: flex;
  align-items: center;
}

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

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

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

.quickview__social--title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 15px;
}
.quickview__social--list {
  margin-right: 10px;
}
.quickview__social--list:last-child {
  margin-right: 0;
}
.quickview__social--icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary-color);
  color: var(--text-white-color);
  border-radius: 50%;
}
.quickview__social--icon:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
}

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

/* 
    18. Search filter css
*/
.search__filter--area {
  padding: 2rem 1.5rem;
  border: 1px solid var(--secondary-color);
  border-radius: 5px;
  background: var(--body-background-color);
}
@media only screen and (min-width: 1200px) {
  .search__filter--area {
    padding: 2.5rem 1.8rem;
  }
}
@media only screen and (min-width: 1366px) {
  .search__filter--area {
    padding: 3rem 1.8rem;
  }
}
@media only screen and (max-width: 991px) {
  .search__filter--area {
    margin-top: 5rem;
  }
}
.search__filter--header {
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 1200px) {
  .search__filter--header {
    margin-bottom: 2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .search__filter--header {
    margin-bottom: 2.5rem;
  }
}
.search__filter--header__icon {
  min-width: 2.4rem;
}
.search__filter--title {
  font-size: 1.8rem;
  line-height: 2.2rem;
  margin-bottom: 0.8rem;
}
@media only screen and (min-width: 1200px) {
  .search__filter--title {
    font-size: 2rem;
    line-height: 2.2rem;
    margin-bottom: 1rem;
  }
}
@media only screen and (min-width: 1366px) {
  .search__filter--title {
    margin-bottom: 1.3rem;
  }
}
.search__filter--desc {
  font-size: 1.3rem;
  line-height: 2.3rem;
  color: var(--foreground-sub-color);
}
@media only screen and (min-width: 1200px) {
  .search__filter--desc {
    font-size: 1.4rem;
    line-height: 2.5rem;
  }
}
.search__filter--btn {
  width: 100%;
  height: 4rem;
  line-height: 4rem;
  border-radius: 5px;
}
@media only screen and (min-width: 1200px) {
  .search__filter--btn {
    height: 4.2rem;
    line-height: 4.2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .search__filter--btn {
    height: 4.4rem;
    line-height: 4.4rem;
  }
}

.search__filter--select {
  margin-bottom: 1.2rem;
}
@media only screen and (min-width: 1200px) {
  .search__filter--select {
    margin-bottom: 1.7rem;
  }
}
@media only screen and (min-width: 1366px) {
  .search__filter--select {
    margin-bottom: 1.9rem;
  }
}
.search__filter--select:last-child {
  margin-bottom: 0;
}
.search__filter--select__field {
  width: 100%;
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
  -webkit-appearance: none;
  height: 4rem;
  font-size: 1.4rem;
  padding: 0 3.4rem 0 1.7rem;
  border-radius: 5px;
  cursor: pointer;
}
@media only screen and (min-width: 1200px) {
  .search__filter--select__field {
    font-size: 1.5rem;
    height: 4.2rem;
  }
}
@media only screen and (min-width: 1366px) {
  .search__filter--select__field {
    height: 4.4rem;
  }
}

/*
    home 3 search filter css
*/
.search__filter--inner {
  background: linear-gradient(to right, #FAEEF2, #F1F3FB);
  padding: 3rem 2rem;
  border-radius: 5px;
}
@media only screen and (min-width: 576px) {
  .search__filter--inner {
    padding: 3rem 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .search__filter--inner {
    padding: 3.3rem;
  }
}

.search__filter--form__style2 {
  gap: 2rem;
}
@media only screen and (min-width: 1200px) {
  .search__filter--form__style2 {
    gap: 3rem;
  }
}
@media only screen and (max-width: 991px) {
  .search__filter--form__style2 {
    flex-wrap: wrap;
  }
}

.search__filter--width {
  width: 100%;
  margin-bottom: 0;
}
@media only screen and (min-width: 400px) {
  .search__filter--width {
    width: 46%;
  }
}
@media only screen and (min-width: 576px) {
  .search__filter--width {
    width: 30.2%;
  }
}
@media only screen and (min-width: 768px) {
  .search__filter--width {
    width: 22.8%;
  }
}
@media only screen and (min-width: 992px) {
  .search__filter--width {
    width: 16.66%;
  }
}

/*
    home 5 search filter css
*/
.search__filter--style5 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
@media only screen and (max-width: 991px) {
  .search__filter--style5 {
    position: inherit;
    padding-top: 5rem;
  }
}
@media only screen and (max-width: 767px) {
  .search__filter--style5 {
    padding-top: 3.6rem;
  }
}

.search__filter--inner.style5 {
  background: linear-gradient(to right, #fbd4df, #dee3f9);
}

/* 
    11. Accordion css
*/
.accordion__items.active {
  margin-bottom: 20px;
}
.accordion__items.active:last-child {
  margin-bottom: 0;
}
.accordion__items.active .accordion__items--button__icon {
  transform: rotate(180deg);
  top: 28%;
  transition: 0.4s;
}
.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(--body-background-color);
  width: 100%;
  padding: 13px 50px 13px 15px;
  text-align: left;
  margin-bottom: 15px;
  font-size: 1.5rem;
  font-weight: 600;
  position: relative;
}
@media only screen and (min-width: 576px) {
  .accordion__items--button {
    padding: 13px 60px 13px 25px;
  }
}
@media only screen and (min-width: 992px) {
  .accordion__items--button {
    padding: 15px 70px 15px 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(--text-white-color);
  padding: 5px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translatey(-50%);
  transition: 0.4s;
}
@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 > * {
  pointer-events: none;
}

/* 
    21. Portfolio css 
*/
.portfolio__items--thumbnail {
  border-radius: 5px;
}
.portfolio__items--thumbnail::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--secondary-color);
  top: 0;
  left: 0;
  opacity: 0;
  transition: var(--transition);
  z-index: 9;
  pointer-events: none;
  border-radius: 5px;
}
.portfolio__items--thumbnail:hover::before {
  opacity: 0.7;
}
.portfolio__items--thumbnail:hover .portfolio__view--icon {
  opacity: 1;
  visibility: visible;
}
.portfolio__items--thumbnail__link {
  overflow: hidden;
  border-radius: 5px;
}
.portfolio__items--thumbnail:hover .portfolio__items--thumbnail__img {
  transform: scale(1.05);
}
.portfolio__items--thumbnail__img {
  transition: 0.3s;
  border-radius: 5px;
}

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

/* 
    10. Brand logo css
*/
.brand__section--inner {
  gap: 3rem;
  background: linear-gradient(to right, #FAEEF2, #F1F3FB);
  padding: 3rem 3rem;
  border-radius: 5px;
}
@media only screen and (max-width: 767px) {
  .brand__section--inner {
    flex-wrap: wrap;
    justify-content: center !important;
  }
}

.brang__logo--img {
  opacity: 0.5;
}
.brang__logo--img:hover {
  transform: scale(1.05);
  opacity: 1;
}
@media only screen and (max-width: 479px) {
  .brang__logo--img {
    max-width: 125px;
  }
}

/*
    home three brand logo css
*/
.brand__section--style3 {
  background: url(../img/other/brand-section-bg3.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

.brand__section--inner__style3 {
  gap: 3rem;
}
@media only screen and (max-width: 767px) {
  .brand__section--inner__style3 {
    flex-wrap: wrap;
    justify-content: center !important;
  }
}

/* 
    32. Breadcrumb css 
*/
.breadcrumb__bg {
  background-color: var(--bg-offwhite-color);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  position: relative;
  padding: 2.5rem 0;
}
@media only screen and (min-width: 768px) {
  .breadcrumb__bg {
    padding: 3rem 0;
  }
}

.breadcrumb__content {
  position: relative;
}
.breadcrumb__content--title {
  margin-bottom: 12px;
  font-size: 2.2rem;
  line-height: 2.2rem;
}
@media only screen and (min-width: 768px) {
  .breadcrumb__content--title {
    margin-bottom: 15px;
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .breadcrumb__content--title {
    margin-bottom: 16px;
    font-size: 2.8rem;
    line-height: 2.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .breadcrumb__content--title {
    font-size: 3rem;
    line-height: 3rem;
  }
}
.breadcrumb__content--menu__items {
  position: relative;
  margin-right: 18px;
  padding-right: 20px;
  font-size: 15px;
  line-height: 22px;
}
.breadcrumb__content--menu__items:last-child {
  margin-right: 0;
  padding-right: 0;
}
.breadcrumb__content--menu__items:last-child::before {
  display: none;
}
.breadcrumb__content--menu__items::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 16px;
  background: var(--secondary-color);
  right: 0;
  top: 6px;
  border-radius: 5px;
  transform: rotate(30deg);
}

/* 
    17. Shop page css 
*/
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .shop-col-width-lg-4 {
    width: 30%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .shop-col-width-lg-8 {
    width: 70%;
  }
}

.shop__header {
  padding: 1.5rem 2rem;
  border-radius: 0.5rem;
  background: var(--bg-offwhite-color);
  gap: 3rem;
}
@media only screen and (max-width: 1199px) {
  .shop__header {
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 2rem;
  }
}

.product__view--mode {
  gap: 2.5rem;
}
@media only screen and (max-width: 767px) {
  .product__view--mode {
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
  }
}
@media only screen and (max-width: 479px) {
  .product__view--mode {
    gap: 1.5rem;
  }
}
.product__view--label {
  font-weight: 600;
  margin-right: 1.2rem;
}
@media only screen and (min-width: 992px) {
  .product__view--label {
    margin-right: 1rem;
  }
}
@media only screen and (min-width: 1200px) {
  .product__view--label {
    margin-right: 2rem;
  }
}
.product__view--select {
  border: 1px solid var(--border-color);
  padding: 0.6rem 3rem 0.6rem 1.2rem;
  -webkit-appearance: none;
  cursor: pointer;
  border-radius: 0.5rem;
  background: var(--body-background-color);
}

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

.product__grid--column__buttons--icons {
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
  border-radius: 0.3rem;
  width: 3.7rem;
  height: 3.7rem;
  line-height: 1.1rem;
  margin-right: 10px;
  text-align: center;
  padding: 0;
}
.product__grid--column__buttons--icons:last-child {
  margin-right: 0;
}
.product__grid--column__buttons--icons:hover {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.product__grid--column__buttons--icons.active {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.product__grid--column__buttons--icons > * {
  pointer-events: none;
}

.product__showing--count {
  color: var(--foreground-sub-color);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/*
    sidebar widget css here
*/
.offcanvas__filter--sidebar {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 300px;
  height: 100vh;
  transition: var(--transition);
  transform: translateX(-100%);
  background-color: var(--body-background-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
}
@media only screen and (min-width: 480px) {
  .offcanvas__filter--sidebar {
    max-width: 320px;
  }
}
.offcanvas__filter--sidebar.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.widget__filter--btn {
  border: 1px solid var(--border-color);
  background: var(--body-background-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: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  margin: 25px;
  background: var(--white-color);
}
.offcanvas__filter--close:hover {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}
.offcanvas__filter--close__text {
  font-size: 1.5rem;
  font-weight: 600;
  margin-left: 8px;
}
.offcanvas__filter--close > * {
  pointer-events: none;
}

.shop__sidebar--widget {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.single__widget {
  margin-bottom: 3rem;
}
@media only screen and (min-width: 992px) {
  .single__widget {
    margin-bottom: 4rem;
  }
}
.single__widget:last-child {
  margin-bottom: 0;
}
.single__widget.widget__bg {
  padding: 2.5rem 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
}

.widget__title {
  font-weight: 600;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  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: 5rem;
  padding: 0 6rem 0 1.2rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
}
@media only screen and (min-width: 992px) {
  .widget__search--form__input {
    font-size: 1.5rem;
  }
}
.widget__search--form__input:focus {
  border-color: var(--secondary-color);
}
.widget__search--form__btn {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  background: var(--secondary-color);
  color: var(--text-white-color);
  padding: 0;
  width: 4.5rem;
  height: 100%;
  border-radius: 0 0.5rem 0.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget__search--form__btn:hover {
  background: var(--secondary-color);
}

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

.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;
  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;
}
.widget__form--check__label:hover {
  color: var(--secondary-color);
}
.widget__form--check__input {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translatey(-50%);
  opacity: 0;
  cursor: pointer;
  z-index: 999;
}
.widget__form--check__input:checked ~ .widget__form--checkmark {
  background-color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
}
.widget__form--check__input:checked ~ .widget__form--checkmark::before {
  display: block;
}

.widget__form--checkmark {
  height: 1.8rem;
  width: 1.8rem;
  border: 1px solid var(--secondary-color);
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translatey(-50%);
  background: var(--body-background-color);
  transition: var(--transition);
}
.widget__form--checkmark::before {
  right: 0.5rem;
  top: 0.3rem;
  width: 0.5rem;
  height: 0.8rem;
  border: solid white;
  border-top-width: medium;
  border-right-width: medium;
  border-bottom-width: medium;
  border-left-width: medium;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  content: "";
  position: absolute;
  display: none;
}

.price__filter--group {
  width: 46%;
}
.price__filter--label {
  font-weight: 600;
  margin-bottom: 0.6rem;
  display: inline-block;
}
@media only screen and (min-width: 992px) {
  .price__filter--label {
    font-size: 1.5rem;
  }
}
.price__filter--input {
  border: 1px solid var(--border-color);
  padding: 0.3rem 0.7rem;
}
.price__filter--currency {
  font-weight: 700;
  margin-right: 0.6rem;
}
.price__filter--btn {
  height: 4rem;
  line-height: 4rem;
}

.price__divider {
  font-size: 2rem;
  padding: 2.5rem 1rem 0;
}

.widget__tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.widget__tagcloud--link {
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
  padding: 0.5rem 1rem;
  line-height: 2.4rem;
  border-radius: 0.5rem;
  font-size: 1.4rem;
}
.widget__tagcloud--link:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-white-color);
}

.shop__sidebar--product .small__product--card {
  padding-top: 0;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-top: 0;
  border-bottom: 1px solid var(--border-color);
}
.shop__sidebar--product .small__product--card:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/*
    shop product wrapper css here
*/
@media only screen and (max-width: 991px) {
  .shop__product--wrapper .product__items--link {
    width: 100%;
  }
}
@media only screen and (max-width: 991px) {
  .shop__product--wrapper .product__items--img {
    width: 100%;
  }
}

.product__list {
  gap: 2rem;
  padding: 1.7rem;
}
@media only screen and (min-width: 576px) {
  .product__list {
    gap: 2.5rem;
    padding: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .product__list {
    gap: 3rem;
    padding: 3rem;
  }
}
@media only screen and (max-width: 479px) {
  .product__list {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.product__list .product__card--price {
  opacity: 1;
  visibility: visible;
}

.product__list--thumbnail {
  width: 220px;
  padding: 0;
}
@media only screen and (min-width: 480px) {
  .product__list--thumbnail {
    width: 170px;
  }
}
@media only screen and (min-width: 768px) {
  .product__list--thumbnail {
    width: 190px;
  }
}
@media only screen and (min-width: 1200px) {
  .product__list--thumbnail {
    width: 270px;
  }
}

.product__list--content {
  width: 100%;
  padding: 0;
}
@media only screen and (min-width: 480px) {
  .product__list--content {
    width: calc(100% - 200px);
  }
}
@media only screen and (min-width: 768px) {
  .product__list--content {
    width: calc(100% - 212px);
  }
}
@media only screen and (min-width: 1200px) {
  .product__list--content {
    width: calc(100% - 270px);
  }
}
@media only screen and (max-width: 479px) {
  .product__list--content {
    text-align: center;
  }
}
.product__list--content .product__card--title {
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
}
@media only screen and (min-width: 768px) {
  .product__list--content .product__card--title {
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .product__list--content .product__card--title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
}
.product__list--content .product__card--rating {
  margin-bottom: 1.4rem;
}
@media only screen and (min-width: 1200px) {
  .product__list--content .product__card--rating {
    margin-bottom: 1.5rem;
  }
}
@media only screen and (max-width: 479px) {
  .product__list--content .product__card--rating {
    justify-content: center;
  }
}
.product__list--content .product__card--btn {
  display: inline-block;
}

.product__card--content__desc {
  line-height: 2.6rem;
}
@media only screen and (min-width: 1200px) {
  .product__card--content__desc {
    line-height: 2.8rem;
  }
}
@media only screen and (max-width: 767px) {
  .product__card--content__desc {
    display: none;
  }
}

.product__list--price {
  margin-bottom: 1rem;
}
@media only screen and (min-width: 1200px) {
  .product__list--price {
    margin-bottom: 1.2rem;
  }
}
.product__list--price .current__price {
  font-size: 1.6rem;
  line-height: 2.2rem;
}
@media only screen and (min-width: 992px) {
  .product__list--price .current__price {
    font-size: 1.8rem;
    line-height: 2.4rem;
  }
}
.product__list--price .old__price {
  font-size: 1.6rem;
  line-height: 2.2rem;
}
@media only screen and (min-width: 992px) {
  .product__list--price .old__price {
    font-size: 1.8rem;
    line-height: 2.4rem;
  }
}

/*
    pagination css here
*/
.pagination__area {
  padding: 1.5rem 2rem;
  margin-top: 3rem;
  background: var(--bg-offwhite-color);
  border-radius: 5px;
}

.pagination__list {
  margin-right: 0.8rem;
}
.pagination__list:last-child {
  margin-right: 0;
}
@media only screen and (min-width: 768px) {
  .pagination__list {
    margin-right: 1.2rem;
  }
}

.pagination__item {
  width: 3.4rem;
  height: 3.4rem;
  line-height: 3.2rem;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
}
@media only screen and (min-width: 768px) {
  .pagination__item {
    width: 4rem;
    height: 4rem;
    line-height: 3.8rem;
    font-size: 1.6rem;
  }
}
.pagination__item--current {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-white-color);
}
.pagination__item:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-white-color);
}

/* 
    34. About page css 
*/
@media only screen and (max-width: 991px) {
  .team__section.section--padding {
    padding-bottom: 6rem;
  }
}
@media only screen and (max-width: 767px) {
  .team__section.section--padding {
    padding-bottom: 4rem;
  }
}

@media only screen and (max-width: 991px) {
  .about__thumb {
    margin-bottom: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .about__thumb {
    margin-bottom: 2.5rem;
  }
}
.about__thumb--items {
  margin-right: 2rem;
}
.about__thumb--items:last-child {
  margin-right: 0;
}
.about__thumb--items:first-child {
  margin-top: 8rem;
}
@media only screen and (max-width: 991px) {
  .about__thumb--items:first-child {
    margin-top: 0;
  }
}

.about__thumb--play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translatey(-50%) translatex(-50%);
}
.about__thumb--play__icon {
  width: 4rem;
  height: 4rem;
  line-height: 3.5rem;
  text-align: center;
  background: var(--secondary-color);
  color: var(--text-white-color);
  border-radius: 50%;
}
.about__thumb--play__icon:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
  transform: scale(1.1);
}

@media only screen and (max-width: 575px) {
  .about__content {
    text-align: center;
  }
}
.about__content--subtitle {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2.2rem;
}
@media only screen and (min-width: 992px) {
  .about__content--subtitle {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}
.about__content--maintitle {
  font-weight: 700;
}
@media only screen and (min-width: 992px) {
  .about__content--maintitle {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .about__content--maintitle {
    font-size: 3rem;
    line-height: 4rem;
  }
}
@media only screen and (min-width: 1600px) {
  .about__content--maintitle {
    font-size: 3.5rem;
    line-height: 4.4rem;
  }
}
.about__content--desc {
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: var(--text-gray-color);
}

.about__author--name {
  font-weight: 600;
  line-height: 2.6rem;
}
.about__author--rank {
  color: var(--light-color);
}
.about__author--signature {
  position: absolute;
  top: 50%;
  left: 105px;
  transform: translatey(-50%);
}

/*
    team member css
*/
.team__items:hover .team__thumb {
  border-color: var(--secondary-color);
}

.team__thumb {
  position: relative;
  line-height: 1;
  display: inline-block;
  border: 2px solid var(--border-color);
  padding: 0.3rem;
  transition: var(--transition);
  border-radius: 10px;
}
.team__thumb--img {
  border-radius: 10px;
}

.team__social {
  gap: 1rem;
}
@media only screen and (min-width: 1200px) {
  .team__social {
    gap: 1.2rem;
  }
}
.team__social--icon {
  width: 2.8rem;
  height: 2.8rem;
  text-align: center;
  background: var(--bg-offwhite-color);
  color: var(--body-text-color);
  line-height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team__social--icon:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}
@media only screen and (min-width: 1200px) {
  .team__social--icon {
    width: 3rem;
    height: 3rem;
    line-height: 3.2rem;
  }
}

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

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

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

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

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

/* 
    16. Product details css 
*/
.product__details--section {
  padding-top: 3rem;
}

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

.product__media--preview__items {
  position: relative;
}
.product__media--preview__items--link {
  width: 100%;
  display: block;
}
.product__media--preview__items--img {
  width: 100%;
}
.product__media--view__icon {
  position: absolute;
  top: 2rem;
  left: 2rem;
}
.product__media--view__icon--link {
  width: 3.5rem;
  height: 3.5rem;
  line-height: 4.5rem;
  text-align: center;
  background: var(--secondary-color);
  border-radius: 50%;
  color: var(--text-white-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product__media--view__icon--link:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
}
.product__media--view__icon.media__play {
  right: 2rem;
  left: auto;
}

.media__play--icon__link {
  color: var(--secondary-color);
}
.media__play--icon__link:hover {
  color: var(--primary-color);
}

.product__media--nav {
  margin-top: 2rem;
}
.product__media--nav__items {
  border: 1px solid var(--border-color);
  padding: 1.2rem;
  line-height: 1;
  border-radius: 5px;
  transition: var(--transition);
}
@media only screen and (min-width: 768px) {
  .product__media--nav__items {
    padding: 0.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .product__media--nav__items {
    padding: 1rem;
  }
}
.product__media--nav__items--img {
  width: 100%;
  width: 100%;
  cursor: pointer;
}
.product__media--nav__items:hover {
  border-color: var(--secondary-color);
}

.image__with--text__percent--list {
  position: relative;
}
.image__with--text__percent--list::before {
  position: absolute;
  content: "";
  background: var(--border-color);
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
}
.image__with--text__percent--list::after {
  position: absolute;
  content: "";
  background: var(--secondary-color);
  bottom: 0;
  left: 0;
  width: 58%;
  height: 4px;
}

.image__with--text__percent--top {
  padding-bottom: 1.7rem;
}

.image__with--text__percent--content {
  font-weight: 600;
}

.image__with--text__percent--list.two::after {
  width: 77%;
}

/*
    product details info css here
*/
@media only screen and (min-width: 768px) {
  .product__details--info {
    font-size: 1.6rem;
  }
}
.product__details--info__price .current__price {
  font-size: 1.6rem;
}
@media only screen and (min-width: 992px) {
  .product__details--info__price .current__price {
    font-size: 2rem;
  }
}
.product__details--info__price .old__price {
  font-size: 1.4rem;
  margin-left: 0.8rem;
}
@media only screen and (min-width: 992px) {
  .product__details--info__price .old__price {
    font-size: 1.8rem;
  }
}
.product__details--info__desc {
  font-size: 1.4rem;
}
@media only screen and (min-width: 992px) {
  .product__details--info__desc {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}
.product__details--info .product__card--rating {
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .product__details--info.style2 {
    margin-top: 3rem;
  }
}

.variant__buy--now__btn {
  width: 100%;
  font-size: 1.5rem;
  font-weight: 600;
}
@media only screen and (min-width: 768px) {
  .variant__buy--now__btn {
    font-size: 1.6rem;
  }
}

.product__variant--title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-right: 1rem;
}

.product__details--info__meta--list {
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
}
.product__details--info__meta--list:last-child {
  margin-bottom: 0;
}

.guarantee__safe--checkout__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

/*
    product details tab section css here
*/
.product__details--tab__section {
  background: var(--bg-offwhite-color);
}
.product__details--tab__section.sidebar__tab--section {
  padding: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .product__details--tab__section.sidebar__tab--section {
    padding: 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .product__details--tab__section.sidebar__tab--section {
    padding: 3.5rem;
  }
}

.product__details--summary__wrapper {
  padding-bottom: 2rem;
}

.product__details--accordion__list {
  border-bottom: 1px solid var(--border-color);
}
.product__details--accordion__list:first-child {
  border-top: 1px solid var(--border-color);
}
.product__details--accordion__list:last-child {
  margin-bottom: 0;
}

.product__details--summary {
  padding: 1.2rem 0;
}
.product__details--summary__title {
  font-size: 1.6rem;
  font-weight: 600;
  position: relative;
  display: block;
}
@media only screen and (min-width: 768px) {
  .product__details--summary__title {
    font-size: 1.8rem;
  }
}
.product__details--summary__title svg {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translatey(-50%);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sidebar__tab--section .product__details--tab__list {
    margin-right: 3rem;
  }
  .sidebar__tab--section .product__details--tab__list:last-child {
    margin-right: 0;
  }
}

.product__details--tab__inner {
  background: var(--body-background-color);
  padding: 1.5rem 1.2rem;
}
@media only screen and (min-width: 480px) {
  .product__details--tab__inner {
    padding: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .product__details--tab__inner {
    padding: 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .product__details--tab__inner {
    padding: 3rem;
  }
}

@media only screen and (max-width: 767px) {
  .product__details--tab {
    flex-wrap: wrap;
  }
  .product__details--tab.mb-30 {
    margin-bottom: 1.5rem;
  }
}
@media only screen and (max-width: 575px) {
  .product__details--tab {
    justify-content: center;
  }
}
.product__details--tab__list {
  font-size: 1.6rem;
  line-height: 2.6rem;
  margin-right: 5rem;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  padding-bottom: 0.4rem;
  font-weight: 500;
}
.product__details--tab__list::before {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: var(--secondary-color);
  left: 50%;
  right: 50%;
  transition: var(--transition);
  bottom: 0;
}
.product__details--tab__list.active {
  color: var(--secondary-color);
}
.product__details--tab__list.active::before {
  width: 100%;
  left: 0;
  right: 0;
}
.product__details--tab__list:hover {
  color: var(--secondary-color);
}
.product__details--tab__list:hover::before {
  width: 100%;
  left: 0;
  right: 0;
}
.product__details--tab__list:last-child {
  margin-right: 0;
}
@media only screen and (min-width: 768px) {
  .product__details--tab__list {
    font-size: 1.7rem;
  }
}
@media only screen and (min-width: 1200px) {
  .product__details--tab__list {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 767px) {
  .product__details--tab__list {
    margin: 0 1rem 1.3rem;
  }
}

.product__tab--content__title {
  font-weight: 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(--foreground-sub-color);
}
@media only screen and (min-width: 992px) {
  .product__tab--content__desc {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}

.product__tab--content__step.style2 {
  gap: 2rem;
}
@media only screen and (max-width: 767px) {
  .product__tab--content__step.style2 {
    flex-direction: column;
  }
}

.product__tab--content__banner {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .product__tab--content__banner {
    width: 310px;
  }
}
@media only screen and (min-width: 992px) {
  .product__tab--content__banner {
    width: 410px;
  }
}
@media only screen and (min-width: 1200px) {
  .product__tab--content__banner {
    width: 460px;
  }
}
.product__tab--content__banner.style2 {
  width: 100%;
}
@media only screen and (min-width: 1200px) {
  .product__tab--content__banner.style2 {
    width: 360px;
  }
}
@media only screen and (min-width: 1366px) {
  .product__tab--content__banner.style2 {
    width: 460px;
  }
}

@media only screen and (max-width: 1199px) {
  .product__tab--content__flex {
    flex-direction: column;
  }
}

.product__tab--content__right {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .product__tab--content__right {
    width: calc(100% - 300px);
    padding-left: 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .product__tab--content__right {
    width: calc(100% - 410px);
  }
}
@media only screen and (min-width: 1200px) {
  .product__tab--content__right {
    width: calc(100% - 460px);
  }
}
@media only screen and (max-width: 767px) {
  .product__tab--content__right {
    padding-top: 2rem;
  }
}
.product__tab--content__right.style2 {
  width: 100%;
  padding-left: 0;
  padding-top: 0;
}
@media only screen and (min-width: 1200px) {
  .product__tab--content__right.style2 {
    width: calc(100% - 360px);
  }
}
@media only screen and (min-width: 1366px) {
  .product__tab--content__right.style2 {
    width: calc(100% - 460px);
  }
}

.image__with--text__percent--list.three::after {
  width: 58%;
}
.image__with--text__percent--list.four::after {
  width: 69%;
}

.product__tab--percent__style .image__with--text__percent--list {
  width: 100%;
}
.product__tab--percent__style .image__with--text__percent--list:last-child {
  margin-top: 0;
}
@media only screen and (min-width: 768px) {
  .product__tab--percent__style .image__with--text__percent--list {
    width: 85%;
  }
}
@media only screen and (min-width: 1200px) {
  .product__tab--percent__style .image__with--text__percent--list {
    width: 80%;
  }
}

.product__reviews--header {
  position: relative;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
}
@media only screen and (min-width: 768px) {
  .product__reviews--header {
    padding-bottom: 2.5rem;
    margin-bottom: 3.5rem;
  }
}
@media only screen and (max-width: 575px) {
  .product__reviews--header {
    text-align: center;
  }
}

@media only screen and (max-width: 575px) {
  .reviews__ratting {
    justify-content: center;
  }
}

.reviews__summary--caption {
  color: var(--secondary-color);
  margin-left: 1.2rem;
}

.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(--foreground-sub-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 {
    justify-content: flex-start;
  }
}
.reviews__comment--list {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}
.reviews__comment--list:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .reviews__comment--list {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
  }
}
@media only screen and (max-width: 575px) {
  .reviews__comment--list {
    flex-direction: column;
  }
}
.reviews__comment--list.margin__left {
  margin-left: 2.2rem;
}
@media only screen and (min-width: 400px) {
  .reviews__comment--list.margin__left {
    margin-left: 2.5rem;
  }
}
@media only screen and (min-width: 480px) {
  .reviews__comment--list.margin__left {
    margin-left: 3rem;
  }
}
@media only screen and (min-width: 992px) {
  .reviews__comment--list.margin__left {
    margin-left: 5rem;
  }
}

@media only screen and (max-width: 575px) {
  .reviews__comment--reply__title {
    text-align: center;
  }
}
.reviews__comment--reply__textarea {
  width: 100%;
  height: 100px;
  resize: none;
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
}
@media only screen and (min-width: 768px) {
  .reviews__comment--reply__textarea {
    height: 150px;
  }
}
@media only screen and (min-width: 992px) {
  .reviews__comment--reply__textarea {
    font-size: 1.5rem;
  }
}
.reviews__comment--reply__textarea:focus {
  border-color: var(--secondary-color);
}
.reviews__comment--reply__input {
  width: 100%;
  border: 1px solid var(--border-color);
  height: 5rem;
  border-radius: 0.5rem;
  padding: 0 1.5rem;
}
@media only screen and (min-width: 992px) {
  .reviews__comment--reply__input {
    font-size: 1.5rem;
  }
}
.reviews__comment--reply__input:focus {
  border-color: var(--secondary-color);
}

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

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

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

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

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

.product__details--gallery {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* 
    33. Blog details css 
*/
.blog__sidebar--widget {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
@media only screen and (max-width: 991px) {
  .blog__sidebar--widget.left {
    margin-top: 6rem;
  }
}
@media only screen and (max-width: 767px) {
  .blog__sidebar--widget.left {
    margin-top: 5rem;
  }
}

.blog__post--header.mb-30 {
  margin-bottom: 2.5rem;
}

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

.blog__post--meta {
  text-transform: capitalize;
}
@media only screen and (min-width: 992px) {
  .blog__post--meta {
    font-size: 1.5rem;
  }
}
.blog__post--meta__link {
  color: var(--secondary-color);
}
.blog__post--meta__link:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}

.blog__thumbnail {
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .blog__thumbnail.mb-30 {
    margin-bottom: 2rem;
  }
}

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

.blockquote__content {
  padding: 20px 30px;
  text-align: center;
  border-radius: 10px;
}
@media only screen and (min-width: 992px) {
  .blockquote__content {
    padding: 30px 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .blockquote__content {
    padding: 40px 70px;
  }
}
@media only screen and (max-width: 767px) {
  .blockquote__content {
    margin: 0 0 2.5rem;
    padding: 1.5rem 2rem;
  }
}
.blockquote__content--desc {
  font-size: 1.7rem;
  line-height: 3rem;
  font-style: italic;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .blockquote__content--desc {
    font-size: 2rem;
    line-height: 3.4rem;
  }
}

.blog__tags--social__media {
  padding: 5rem 0;
}
@media only screen and (max-width: 1199px) {
  .blog__tags--social__media {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media only screen and (max-width: 1199px) {
  .blog__tags--media {
    margin-bottom: 2rem;
  }
}
@media only screen and (max-width: 575px) {
  .blog__tags--media {
    flex-direction: column;
    align-items: flex-start;
  }
}
.blog__tags--media__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 1rem;
}
@media only screen and (min-width: 992px) {
  .blog__tags--media__title {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 575px) {
  .blog__tags--media__title {
    margin-right: 0;
    margin-bottom: 1rem;
  }
}
.blog__tags--media__list {
  margin-right: 0.7rem;
}
.blog__tags--media__list:last-child {
  margin-right: 0;
}
.blog__tags--media__link {
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
  padding: 0.5rem 1.2rem;
  line-height: 2.5rem;
  border-radius: 0.3rem;
  text-transform: capitalize;
}
.blog__tags--media__link:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-white-color);
}
@media only screen and (max-width: 575px) {
  .blog__tags--media__link {
    padding: 0.4rem 0.8rem;
  }
}

.meta__deta {
  color: var(--foreground-sub-color);
  font-weight: 500;
  margin-top: 0.6rem;
  line-height: 2rem;
  font-size: 1.4rem;
}

.blog__social--media__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 1rem;
}
@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: flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary-color);
  color: var(--text-white-color);
  border-radius: 50%;
}
.blog__social--media__link:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
}

@media only screen and (max-width: 575px) {
  .related__post--text {
    text-align: center;
  }
}
.related__post--items:hover .related__post--img {
  transform: scale(1.05);
}
.related__post--thumb {
  line-height: 1;
  overflow: hidden;
}
.related__post--title {
  font-size: 1.6rem;
  line-height: 2.2rem;
}
@media only screen and (min-width: 992px) {
  .related__post--title {
    font-size: 1.8rem;
  }
}
.related__post--deta {
  font-size: 1.4rem;
  color: var(--light-color);
  line-height: 2.2rem;
}
@media only screen and (min-width: 992px) {
  .related__post--deta {
    font-size: 1.5rem;
  }
}

.comment__reply--btn {
  height: 3.6rem;
  line-height: 3.6rem;
  padding: 0 2rem;
}
@media only screen and (min-width: 768px) {
  .comment__reply--btn {
    height: 4rem;
    line-height: 4rem;
    padding: 0 2.5rem;
  }
}

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

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

/*
    post article css here
*/
.post__article--items {
  gap: 1.6rem;
  margin-bottom: 2rem;
}
.post__article--items:last-child {
  margin-bottom: 0;
}
.post__article--items:hover .post__article--thumbnail__img {
  transform: scale(1.03);
}
.post__article--thumbnail {
  width: 110px;
  border-radius: 5px;
  overflow: hidden;
}
.post__article--thumbnail__img {
  border-radius: 5px;
}
.post__article--content {
  width: calc(100% - 110px);
}
.post__article--content__title {
  font-size: 1.5rem;
}

/* 
    28. Contact page css 
*/
.contact__section--heading__maintitle {
  font-size: 2.8rem;
  line-height: 3rem;
  color: var(--secondary-color);
  margin-bottom: 1.5rem;
}
.contact__section--heading__desc {
  color: var(--foreground-sub-color);
  width: 90%;
  margin: 0 auto;
  font-size: 1.5rem;
  line-height: 2.6rem;
}
@media only screen and (min-width: 768px) {
  .contact__section--heading__desc {
    width: 75%;
  }
}
@media only screen and (min-width: 1200px) {
  .contact__section--heading__desc {
    font-size: 1.6rem;
    line-height: 2.8rem;
    width: 55%;
  }
}

.contact__form {
  background: var(--body-background-color);
  border-radius: 10px;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.16);
  padding: 2rem;
}
@media only screen and (min-width: 576px) {
  .contact__form {
    padding: 3rem;
  }
}
@media only screen and (min-width: 768px) {
  .contact__form {
    padding: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  .contact__form {
    margin-left: 36rem;
    padding: 5.5rem 3.5rem 5.5rem 10rem;
  }
}
@media only screen and (min-width: 1200px) {
  .contact__form {
    margin-left: 40rem;
  }
}
.contact__form--title {
  font-weight: 600;
  font-size: 1.8rem;
}
@media only screen and (min-width: 1200px) {
  .contact__form--title {
    font-size: 2.2rem;
  }
}
@media only screen and (max-width: 1199px) {
  .contact__form--title.mb-30 {
    margin-bottom: 2rem;
  }
}
.contact__form--label {
  display: block;
  margin-bottom: 8px;
}
.contact__form--label__star {
  color: var(--secondary-color);
}
.contact__form--input {
  width: 100%;
  height: 50px;
  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: 100px;
  padding: 12px 15px;
  border-radius: 8px;
  resize: none;
  border: 1px solid var(--border-color);
}
.contact__form--textarea:focus {
  border-color: var(--secondary-color) !important;
}
@media only screen and (min-width: 992px) {
  .contact__form--textarea {
    height: 120px;
  }
}
@media only screen and (min-width: 1200px) {
  .contact__form--textarea {
    height: 160px;
  }
}

.contact__info {
  background: var(--secondary-color);
  width: 46rem;
  padding: 2rem;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translatey(-50%);
}
@media only screen and (max-width: 575px) {
  .contact__info {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) {
  .contact__info {
    padding: 3rem;
  }
}
@media only screen and (min-width: 768px) {
  .contact__info {
    padding: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  .contact__info {
    width: 42rem;
    padding: 4rem 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .contact__info {
    width: 46rem;
    padding: 5rem 6rem;
  }
}
@media only screen and (max-width: 991px) {
  .contact__info {
    position: inherit;
    top: inherit;
    transform: inherit;
    margin: 3rem auto 0;
    width: 100%;
  }
}
.contact__info--items {
  margin-bottom: 2.7rem;
}
.contact__info--items:last-child {
  margin-bottom: 0;
}
@media only screen and (max-width: 575px) {
  .contact__info--items {
    margin-bottom: 2rem;
  }
}

.contact__info--icon {
  margin-right: 1.2rem;
  color: var(--text-white-color);
  padding-top: 0.8rem;
}
@media only screen and (min-width: 1200px) {
  .contact__info--icon {
    margin-right: 2rem;
  }
}
@media only screen and (max-width: 575px) {
  .contact__info--icon svg {
    width: 2.5rem;
  }
}

.contact__info--content__title {
  font-weight: 600;
}
@media only screen and (min-width: 992px) {
  .contact__info--content__title {
    font-size: 2rem;
    line-height: 2.8rem;
  }
}
.contact__info--content__desc {
  font-size: 1.5rem;
  line-height: 2.6rem;
  color: var(--text-white-color);
}
@media only screen and (min-width: 1200px) {
  .contact__info--content__desc {
    font-size: 1.6rem;
    line-height: 2.7rem;
  }
}
.contact__info--content__desc a {
  color: var(--text-white-color);
}
.contact__info--content__desc a:hover {
  color: var(--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: flex;
  align-items: center;
  justify-content: center;
  background: var(--body-background-color);
  color: var(--secondary-color);
  border-radius: 50%;
}
.contact__info--social__icon:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
}

.contact__map--iframe {
  width: 100%;
  height: 250px;
  margin-bottom: -7px;
}
@media only screen and (min-width: 768px) {
  .contact__map--iframe {
    height: 320px;
  }
}
@media only screen and (min-width: 992px) {
  .contact__map--iframe {
    height: 400px;
  }
}
@media only screen and (min-width: 1200px) {
  .contact__map--iframe {
    height: 500px;
  }
}

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

.cart__table--inner {
  width: 100%;
  border-spacing: 0;
}
@media only screen and (max-width: 575px) {
  .cart__table--header {
    display: none;
  }
}
.cart__table--header__list {
  padding: 0 2rem 2rem 0;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
.cart__table--header__list:last-child {
  padding-right: 0;
}
@media only screen and (min-width: 992px) {
  .cart__table--header__list {
    font-size: 1.5rem;
  }
}
.cart__table--header__list.text-right {
  text-align: right;
}
.cart__table--header__list.text-center {
  text-align: center;
}
@media only screen and (max-width: 575px) {
  .cart__table--body__items {
    display: flex;
    flex-direction: column;
  }
}
.cart__table--body__list {
  border-bottom: 1px solid var(--border-color);
  padding: 2rem 2rem 2rem 0;
}
.cart__table--body__list:last-child {
  padding-right: 0;
}
@media only screen and (max-width: 575px) {
  .cart__table--body__list {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
  }
}

.cart__thumbnail {
  max-width: 10rem;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .cart__thumbnail {
    max-width: 8rem;
  }
}

.cart__content {
  padding-left: 1.5rem;
}
@media only screen and (min-width: 1200px) {
  .cart__content {
    padding-left: 2rem;
  }
}
.cart__content--variant {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--foreground-sub-color);
  line-height: 2.2rem;
  font-size: 1.3rem;
}
.cart__content--variant:last-child {
  margin-bottom: 0;
}
.cart__content--title {
  margin-bottom: 0.5rem;
  line-height: 2.5rem;
}

.cart__remove--btn {
  font-weight: 600;
  width: 3rem;
  height: 3rem;
  text-align: center;
  line-height: 3rem;
  background: var(--body-background-color);
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  margin-right: 1.5rem;
  border-radius: 50%;
  padding: 0;
  border: 0;
}
@media only screen and (min-width: 992px) {
  .cart__remove--btn {
    margin-right: 3rem;
  }
}
.cart__remove--btn:hover {
  color: var(--secondary-color);
}

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

.continue__shopping {
  padding-top: 2rem;
}
.continue__shopping--link {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
}
@media only screen and (min-width: 992px) {
  .continue__shopping--link {
    font-size: 1.7rem;
  }
}
.continue__shopping--clear {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
  border: 0;
  padding: 0;
  background: inherit;
}
@media only screen and (min-width: 992px) {
  .continue__shopping--clear {
    font-size: 1.7rem;
  }
}
.continue__shopping--clear:hover {
  color: var(--secondary-color);
}

.cart__summary {
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  padding: 2rem;
  background: var(--body-background-color);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
@media only screen and (max-width: 991px) {
  .cart__summary {
    margin-top: 5.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .cart__summary {
    margin-top: 4.5rem;
  }
}
.cart__summary--total__table {
  width: 100%;
}

.coupon__code--title {
  font-size: 1.7rem;
  margin-bottom: 0.7rem;
  line-height: 2.4rem;
}
@media only screen and (min-width: 992px) {
  .coupon__code--title {
    font-size: 2rem;
  }
}
.coupon__code--desc {
  color: var(--foreground-sub-color);
  margin-bottom: 1.5rem;
}
.coupon__code--field__input {
  border: 1px solid var(--border-color);
  height: 4rem;
  padding: 0 1.5rem;
  border-radius: 2.4rem;
  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;
    height: 4.5rem;
  }
}
.coupon__code--field__input:focus {
  border-color: var(--secondary-color);
}
.coupon__code--field__btn {
  margin-left: 1.5rem;
}
@media only screen and (min-width: 1200px) {
  .coupon__code--field__btn {
    margin-left: 2rem;
  }
}

.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 {
  color: var(--light-color);
  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: flex;
  justify-content: space-between;
}
.cart__summary--total__list:last-child {
  margin-bottom: 0;
}

.cart__summary--footer__desc {
  font-size: 1.5rem;
  color: var(--foreground-sub-color);
  margin-bottom: 1.5rem;
}
.cart__summary--footer__btn {
  padding: 0 1.5rem;
}
@media only screen and (min-width: 1200px) {
  .cart__summary--footer__btn {
    padding: 0 2.5rem;
  }
}

@media only screen and (max-width: 767px) {
  .wishlist__cart--btn {
    padding: 0.5rem 1.2rem;
    height: auto;
    line-height: 2.4rem;
    border-radius: 5px;
    text-align: center;
  }
}

/*
   30. Checkout Page Css
*/
.checkout__breadcrumb {
  padding: 0;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .checkout__breadcrumb {
    margin-top: 2.5rem;
  }
}

.breadcrumb__link {
  font-size: 1.3rem;
  color: var(--secondary-color);
}

.readcrumb__chevron-icon {
  color: #737373;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0 0.6rem;
}

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

.order__summary--toggle {
  width: 100%;
  text-align: left;
  background: var(--bg-offwhite-color);
  border: 0;
  border: 1px solid var(--border-color);
  padding: 1.2rem;
}
.order__summary--toggle__inner {
  width: 100%;
}
.order__summary--toggle__text {
  color: var(--secondary-color);
}
.order__summary--toggle__icon {
  color: var(--secondary-color);
  vertical-align: middle;
  line-height: 1.5rem;
  margin-right: 1rem;
}

.summary__table {
  width: 100%;
}
.summary__table--items {
  flex-direction: row;
  align-items: center;
}
.summary__table--list {
  padding: 1rem 2rem 1rem 0;
  border-bottom: 1px solid var(--border-color);
}
.summary__table--list:last-child {
  padding-right: 0;
}

details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

.order__summary--final__price {
  float: right;
  font-size: 1.5rem;
  font-weight: 600;
}

.order__summary--section {
  background: var(--bg-offwhite-color);
  padding: 3rem 1rem 1rem;
}

.checkout__checkbox {
  position: relative;
}
.checkout__checkbox--input {
  position: absolute;
  left: -1px;
  top: 4px;
  opacity: 0;
  cursor: pointer;
  z-index: 999;
}
.checkout__checkbox--input:checked ~ .checkout__checkbox--checkmark {
  background-color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
}
.checkout__checkbox--input:checked ~ .checkout__checkbox--checkmark::before {
  display: block;
}
.checkout__checkbox--label {
  padding-left: 3rem;
  cursor: pointer;
}

.checkout__checkbox--checkmark {
  height: 1.8rem;
  width: 1.8rem;
  border: 1px solid var(--border-color);
  border-radius: 0.3rem;
  display: block;
  position: absolute;
  top: 4px;
  left: 0;
  background: var(--body-background-color);
  transition: var(--transition);
}
.checkout__checkbox--checkmark::before {
  left: 0.5rem;
  top: 0.3rem;
  width: 0.5rem;
  height: 0.8rem;
  border: solid white;
  border-top-width: medium;
  border-right-width: medium;
  border-bottom-width: medium;
  border-left-width: medium;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  content: "";
  position: absolute;
  display: none;
}

.checkout__input--label {
  display: inline-block;
}
.checkout__input--label__star {
  color: var(--secondary-color);
}
.checkout__input--field {
  width: 100%;
  border: 1px solid var(--border-color);
  height: 4.5rem;
  padding: 0 1.5rem;
}
.checkout__input--field:focus {
  border-color: var(--secondary-color);
}

.checkout__notes--textarea__field {
  width: 100%;
  border: 1px solid var(--border-color);
  padding: 1rem 1.5rem 0.5rem;
  resize: none;
}
.checkout__notes--textarea__field:focus {
  border-color: var(--secondary-color);
}

@media only screen and (max-width: 991px) {
  .checkout__section--header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.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(--foreground-sub-color);
}
@media only screen and (max-width: 991px) {
  .layout__flex--item {
    margin-top: 1rem;
  }
}
.layout__flex--item__link {
  color: var(--secondary-color);
}

.section__shipping--address {
  padding: 3rem 0 2rem;
}
@media only screen and (min-width: 992px) {
  .section__shipping--address {
    padding: 4rem 0 3rem;
  }
}
.section__shipping--address.pt-10 {
  padding-top: 1rem;
}
.section__shipping--address.pt-0 {
  padding-top: 0;
}

.checkout__input--select {
  position: relative;
}
.checkout__input--select__field {
  width: 100%;
  height: 4.5rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--border-color);
  -webkit-appearance: none;
  cursor: pointer;
}
.checkout__input--select__field:focus {
  border-color: var(--secondary-color);
}

.previous__link--content {
  margin-left: 2rem;
  color: var(--secondary-color);
}
@media only screen and (max-width: 575px) {
  .previous__link--content {
    margin-left: 0;
    margin-top: 1rem;
  }
}

.checkout__footer {
  border: 0;
}

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

.checkout__sidebar {
  background: #FAFAFA;
  border: 1px solid var(--border-color);
  padding: 3rem 2.5rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
@media only screen and (max-width: 991px) {
  .checkout__sidebar {
    padding: 3rem 1.8rem;
  }
}
@media only screen and (max-width: 767px) {
  .checkout__sidebar {
    margin-top: 3rem;
  }
}

.product__thumbnail {
  width: 7rem;
  border: 1px solid var(--border-color);
  position: relative;
  line-height: 1;
}
.product__thumbnail--quantity {
  position: absolute;
  top: -6px;
  right: -5px;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  background: #7F7F7F;
  color: var(--text-white-color);
  text-align: center;
  border-radius: 50%;
  font-size: 1.2rem;
}

.product__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(--foreground-sub-color);
  line-height: 2rem;
}

.checkout__product--table {
  margin-bottom: 2rem;
}
.checkout__product--table .cart__table--body__list {
  padding: 1rem 2rem 1rem 0;
}
.checkout__product--table .cart__table--body__list:last-child {
  padding-right: 0;
}

.checkout__discount--code {
  margin-bottom: 2.5rem;
}
.checkout__discount--code__input--field {
  width: 100%;
  border: 1px solid var(--border-color);
  height: 4rem;
  padding: 0 1.5rem;
}
.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-color);
  padding-top: 1.2rem;
}
.checkout__total--table {
  width: 100%;
}
.checkout__total--calculated__text {
  font-size: 1.3rem;
  color: var(--foreground-sub-color);
}
.checkout__total--title {
  color: var(--foreground-sub-color);
}

.checkout__total--footer__list {
  padding-top: 3rem;
  position: relative;
}
.checkout__total--footer__list::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background: #E4E4E4;
  top: 1.5rem;
  left: 0;
}
.checkout__total--footer__title {
  font-size: 1.6rem;
}
.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 {
    flex-wrap: wrap;
  }
}
.payment__history--list {
  margin-right: 1.5rem;
}
@media only screen and (max-width: 1199px) {
  .payment__history--list {
    margin-bottom: 1rem;
  }
}
.payment__history--list:last-child {
  margin-right: 0;
}
@media only screen and (max-width: 1199px) {
  .payment__history--list {
    margin-right: 1rem;
  }
}
.payment__history--link {
  background: var(--body-background-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 0 1.2rem;
  font-size: 1.4rem;
}
@media only screen and (min-width: 1200px) {
  .payment__history--link {
    font-size: 1.6rem;
    padding: 0 2rem;
    height: 4.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;
  }
}

/* 
    24. My account page css 
*/
.my__account--section__inner {
  background: var(--body-background-color);
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  padding: 3rem 2rem;
}
@media only screen and (min-width: 1199px) {
  .my__account--section__inner {
    padding: 5rem 4rem;
  }
}
@media only screen and (max-width: 991px) {
  .my__account--section__inner {
    flex-direction: column;
  }
}

.account__left--sidebar {
  border-right: 1px solid var(--border-color);
  padding-right: 3rem;
  margin-right: 3rem;
  width: 18rem;
}
@media only screen and (min-width: 1199px) {
  .account__left--sidebar {
    padding-right: 5rem;
    margin-right: 5rem;
    width: 23rem;
  }
}
@media only screen and (max-width: 991px) {
  .account__left--sidebar {
    width: 100%;
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
  }
}

.account__wrapper {
  width: calc(100% - 18rem);
}
@media only screen and (min-width: 1199px) {
  .account__wrapper {
    width: calc(100% - 23rem);
  }
}
@media only screen and (max-width: 991px) {
  .account__wrapper {
    width: 100%;
  }
}

@media only screen and (max-width: 991px) {
  .account__menu {
    width: 250px;
    margin-right: 3rem;
  }
}
@media only screen and (max-width: 479px) {
  .account__menu {
    margin-right: 0;
  }
}
.account__menu--list {
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-weight: 600;
  cursor: pointer;
  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 a {
  color: var(--secondary-color);
}
@media only screen and (min-width: 992px) {
  .account__menu--list {
    font-size: 1.6rem;
  }
}

.account__details.two {
  padding-top: 0;
}
@media only screen and (min-width: 992px) {
  .account__details {
    padding-top: 3rem;
  }
}
@media only screen and (max-width: 479px) {
  .account__details {
    padding-top: 3rem;
  }
}
.account__details--title {
  margin-bottom: 1rem;
}
.account__details--desc {
  color: var(--foreground-sub-color);
  line-height: 3rem;
  margin-bottom: 2rem;
  font-size: 1.5rem;
}
.account__details--link {
  color: var(--secondary-color);
  border-bottom: 1px solid var(--secondary-color);
  font-size: 1.5rem;
}
.account__details--link:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.new__address--btn {
  padding: 0 2.5rem;
}
@media only screen and (min-width: 992px) {
  .new__address--btn {
    font-size: 1.5rem;
  }
}

.account__details--footer {
  margin-top: 3rem;
}
.account__details--footer__btn {
  background: var(--body-background-color);
  border: 1px solid var(--primary-color);
  padding: 0 2.5rem;
  height: 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-color);
  border-spacing: 0;
  border-bottom: 0;
}
@media only screen and (max-width: 479px) {
  .account__table {
    border: 0;
  }
}
@media only screen and (max-width: 767px) {
  .account__table--header {
    display: none;
  }
}
.account__table--header__child--items {
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  padding: 1.7rem 1.3rem;
  font-size: 1.5rem;
}
.account__table--header__child--items:last-child {
  text-align: right;
}
@media only screen and (min-width: 1200px) {
  .account__table--header__child--items {
    font-size: 1.6rem;
    padding: 1.7rem 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .account__table--body.mobile__none {
    display: none;
  }
}
.account__table--body.mobile__block {
  display: none;
}
@media only screen and (max-width: 767px) {
  .account__table--body.mobile__block {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .account__table--body__child {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 2rem;
  }
  .account__table--body__child:last-child {
    margin-bottom: 0;
  }
}
.account__table--body__child--items {
  border-bottom: 1px solid var(--border-color);
  padding: 1.7rem 2rem;
  color: var(--foreground-sub-color);
}
.account__table--body__child--items:last-child {
  text-align: right;
}
@media only screen and (max-width: 767px) {
  .account__table--body__child--items {
    padding: 0.5rem 2rem;
    display: flex;
    justify-content: space-between;
    border: 0;
  }
}
@media only screen and (max-width: 479px) {
  .account__table--body__child--items {
    padding: 0.5rem 0;
  }
}

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

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

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

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

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

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

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

.compare__product--title {
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-bottom: 1rem;
}

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

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

.compare__description {
  color: var(--foreground-sub-color);
  padding: 0.5rem 0;
}

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

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

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

/* 
    26. 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;
  font-size: 2rem;
}
@media only screen and (max-width: 767px) {
  .face__step--title.mb-30 {
    margin-bottom: 2.2rem;
  }
}
@media only screen and (min-width: 992px) {
  .face__step--title {
    font-size: 2.2rem;
  }
}

.faq__accordion--btn {
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
  padding: 1.8rem 6rem 1.8rem 2rem;
  font-size: 1.5rem;
  border-radius: 0.5rem;
}
.faq__accordion--btn .accordion__items--button__icon {
  right: 1.5rem;
}
@media only screen and (max-width: 767px) {
  .faq__accordion--btn .accordion__items--button__icon {
    margin-bottom: 1.2rem;
  }
}
@media only screen and (min-width: 768px) {
  .faq__accordion--btn {
    font-size: 1.6rem;
  }
}
.faq__accordion--btn > * {
  pointer-events: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Animación del preloader */
@-webkit-keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
/* Animación de las letras cargando del preloader */
@-webkit-keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
@keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
/* Tamaño de portatil hacia atras (portatil, tablet, celular) */
@media screen and (max-width: 767px) {
  /* Preloader */
  /* Spinner cargando */
  .ctn-preloader .animation-preloader .spinner {
    height: 8em;
    width: 8em;
  }
  /* Texto cargando */
  .ctn-preloader .animation-preloader .txt-loading {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 500px) {
  .ctn-preloader .animation-preloader .spinner {
    height: 7em;
    width: 7em;
  }
}
/* 
    19. Privacy policy css 
*/
.privacy__policy--content {
  margin-bottom: 2rem;
}
.privacy__policy--content:last-child {
  margin-bottom: 0;
}
.privacy__policy--content__title {
  font-size: 2rem;
  line-height: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .privacy__policy--content__title {
    font-size: 2.2rem;
    line-height: 2.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .privacy__policy--content__title {
    font-size: 2.5rem;
    line-height: 2.8rem;
    margin-bottom: 1.2rem;
  }
}
.privacy__policy--content__subtitle {
  font-size: 1.8rem;
  line-height: 2.5rem;
  margin-bottom: 0.8rem;
  font-weight: 500;
}
@media only screen and (min-width: 1600px) {
  .privacy__policy--content__subtitle {
    font-size: 2.2rem;
    line-height: 2.5rem;
    margin-bottom: 1rem;
  }
}
.privacy__policy--content__desc {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 2.6rem;
}
@media only screen and (min-width: 1200px) {
  .privacy__policy--content__desc {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}

/* 
    23. Newsletter popup css
*/
/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-animation] .newsletter__popup--inner {
  opacity: 0;
  visibility: hidden;
  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;
  transition-delay: 0.2s;
}

.newsletter__popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: all 1s ease-in-out;
  z-index: 999;
}
.newsletter__popup.newsletter__show {
  visibility: visible;
  opacity: 1;
}
.newsletter__popup.newsletter__show .newsletter__popup--inner {
  transform: translateY(0);
}
.newsletter__popup--inner {
  position: relative;
  width: 88%;
  max-height: 80vh;
  border-radius: 10px;
  background: var(--body-background-color);
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.06);
  overflow: auto;
  cursor: default;
  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: 720px;
  }
}
@media only screen and (min-width: 1200px) {
  .newsletter__popup--inner {
    width: 760px;
  }
}
.newsletter__popup--close__btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--secondary-color);
  color: var(--text-white-color);
  line-height: 2.8rem;
  border: 0;
  text-transform: uppercase;
  font-size: 1.2rem;
  border-radius: 50%;
  padding: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: 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: 3rem 2rem 2.2rem;
  text-align: center;
}
@media only screen and (min-width: 576px) {
  .newsletter__popup--box__right {
    padding: 3rem 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: 3rem 2.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .newsletter__popup--box__right {
    width: calc(100% - 330px);
    padding: 3rem 3rem;
  }
}
.newsletter__popup--title {
  margin-bottom: 1.3rem;
}
@media only screen and (min-width: 992px) {
  .newsletter__popup--title {
    margin-bottom: 2rem;
  }
}
.newsletter__popup--content--desc {
  color: var(--foreground-sub-color);
  display: inline-block;
  line-height: 2.4rem;
  font-size: 1.5rem;
  margin-bottom: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .newsletter__popup--content--desc {
    line-height: 2.6rem;
    font-size: 1.5rem;
  }
}
.newsletter__popup--subscribe__input {
  width: 100%;
  height: 4rem;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 0 15px;
}
.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(--text-white-color);
  border: 0;
  padding: 0 2rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 5px;
  margin-top: 1.5rem;
}
.newsletter__popup--subscribe__btn:hover {
  background: var(--primary-color);
}
@media only screen and (min-width: 768px) {
  .newsletter__popup--subscribe__btn {
    height: 4.5rem;
  }
}
.newsletter__popup--footer {
  margin-top: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.newsletter__popup--footer input {
  vertical-align: middle;
  margin-right: 0.8rem;
}
.newsletter__popup--dontshow__again--text {
  color: var(--foreground-sub-color);
  cursor: pointer;
  font-size: 1.4rem;
}
@media only screen and (min-width: 768px) {
  .newsletter__popup--dontshow__again--text {
    font-size: 1.6rem;
  }
}/*# sourceMappingURL=style.css.map */