@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: #212121;
  --secondary-color: #ED1D24;
  --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);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
@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: 100%;
}

.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;
     /* Chrome, Safari */
      /* Firefox Mac */
    font-family: 'Noto Sans', sans-serif;
    color: #393939;
  }
}

.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%;
    position: relative;
  }
}
@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%;
    position: relative;
  }
}
.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);
  text-decoration: line-through;
}

.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(../img/banner/deal-section-bg.webp) no-repeat center center;
  background-size: contain; /* şəkilin bütün hissəsi görünür */
  background-attachment: scroll;
}

.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: 100%;
  }
}
@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: 20%;
  }
}

/*
    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;
  padding-top: 7px;
  padding-bottom: 7px;
}
.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;
  text-decoration: line-through;
}
@media only screen and (min-width: 992px) {
  .product__details--info__price .old__price {
    font-size: 1.8rem;
    text-decoration: line-through; /* üstündən xətt */
     /* istəyə görə rəng verə bilərsən */
  }
}
.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 */

.offcanvas__sub_menu{
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.offcanvas__sub_menu::-webkit-scrollbar{
  width: 6px;
}

.offcanvas__sub_menu::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 10px;
}

.offcanvas__sub_menu::-webkit-scrollbar-thumb:hover{
  background: #999;
}

.corner-icon{
    position:absolute;
    top:8px;
    right:8px; /* sol künc istəsən left:8px et */
    width:25px;
    height:25px;
    z-index:2;
    filter: brightness(0) saturate(100%) contrast(100%);
}
/* Yalnız staticcss class-ı üçün */
.staticcss > ul,
.staticcss > ol {
    margin-left: 20px !important;
    padding-left: 20px !important;
    color: #000 !important;
    font-size: 16px;
}

/* UL içindəki LI-lər */
.staticcss > ul > li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;  /* bullet üçün boşluq */
    list-style: none;    /* default bullet ləğv */
}

/* UL bullet-ləri */
.staticcss > ul > li::before {
    content: "•";        /* bullet simvolu */
    position: absolute;
    left: 0;
    color: #000;         /* bullet rəngi */
    font-weight: bold;
    font-size: 18px;
}

/* OL içindəki LI-lər */
.staticcss > ol > li {
    margin-bottom: 10px;
    color: #000 !important;
    font-size: 16px;
}






.section{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:60px;
    gap:40px;
}

.section.reverse{
    flex-direction:row-reverse;
}

.section-img img{
    width:100%;
    max-width:500px;
    border-radius:12px;
    display:block;
}

.section-text{
    flex:1;
    font-size:18px;
    line-height:1.7;
    color:#333;
}

/* MOBILE RESPONSIVE */
@media(max-width:768px){

    .section,
    .section.reverse{
        flex-direction:column;
        text-align:center;
    }

    .section-text{
        font-size:16px;
    }
}

.section{
    position:relative;
}

.year{
    position:absolute;
    top:-15px;
    left:-15px;
    background:#e53935;
    color:#fff;
    padding:10px 18px;
    font-weight:bold;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

/* reverse olanlarda sağ tərəf */
.section.reverse .year{
    left:auto;
    right:-15px;
}

/* mobil görünüş */
@media(max-width:768px){
    .year{
        left:auto;
        right:0;
        top:-10px;
    }
}

.hero-section {
    height: 80vh;               /* artıq çox hündür deyil */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    position: relative;
}

.hero-text {
    max-width: 900px;
    font-size: 32px;
    line-height: 1.6;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Mobil uyğunlaşma */
@media (max-width:768px){
    .hero-section {
        height: 50vh;           /* mobil üçün daha qısa */
    }
    .hero-text {
        font-size: 20px;
        line-height: 1.5;
    }
}

@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: #212121;
  --secondary-color: #ED1D24;
  --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);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
@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: 100%;
}

.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;
     /* Chrome, Safari */
      /* Firefox Mac */
    font-family: 'Noto Sans', sans-serif;
    color: #393939;
  }
}

.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%;
    position: relative;
  }
}
@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%;
    position: relative;
  }
}
.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);
  text-decoration: line-through;
}

.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(../img/banner/deal-section-bg.webp) no-repeat center center;
  background-size: contain; /* şəkilin bütün hissəsi görünür */
  background-attachment: scroll;
}

.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: 100%;
  }
}
@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: 20%;
  }
}

/*
    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;
  padding-top: 7px;
  padding-bottom: 7px;
}
.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;
  text-decoration: line-through;
}
@media only screen and (min-width: 992px) {
  .product__details--info__price .old__price {
    font-size: 1.8rem;
    text-decoration: line-through; /* üstündən xətt */
     /* istəyə görə rəng verə bilərsən */
  }
}
.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 */

.offcanvas__sub_menu{
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.offcanvas__sub_menu::-webkit-scrollbar{
  width: 6px;
}

.offcanvas__sub_menu::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 10px;
}

.offcanvas__sub_menu::-webkit-scrollbar-thumb:hover{
  background: #999;
}

.corner-icon{
    position:absolute;
    top:8px;
    right:8px; /* sol künc istəsən left:8px et */
    width:25px;
    height:25px;
    z-index:2;
    filter: brightness(0) saturate(100%) contrast(100%);
}
/* Yalnız staticcss class-ı üçün */
.staticcss > ul,
.staticcss > ol {
    margin-left: 20px !important;
    padding-left: 20px !important;
    color: #000 !important;
    font-size: 16px;
}

/* UL içindəki LI-lər */
.staticcss > ul > li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;  /* bullet üçün boşluq */
    list-style: none;    /* default bullet ləğv */
}

/* UL bullet-ləri */
.staticcss > ul > li::before {
    content: "•";        /* bullet simvolu */
    position: absolute;
    left: 0;
    color: #000;         /* bullet rəngi */
    font-weight: bold;
    font-size: 18px;
}

/* OL içindəki LI-lər */
.staticcss > ol > li {
    margin-bottom: 10px;
    color: #000 !important;
    font-size: 16px;
}






.section{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:60px;
    gap:40px;
}

.section.reverse{
    flex-direction:row-reverse;
}

.section-img img{
    width:100%;
    max-width:500px;
    border-radius:12px;
    display:block;
}

.section-text{
    flex:1;
    font-size:18px;
    line-height:1.7;
    color:#333;
}

/* MOBILE RESPONSIVE */
@media(max-width:768px){

    .section,
    .section.reverse{
        flex-direction:column;
        text-align:center;
    }

    .section-text{
        font-size:16px;
    }
}

.section{
    position:relative;
}

.year{
    position:absolute;
    top:-15px;
    left:-15px;
    background:#e53935;
    color:#fff;
    padding:10px 18px;
    font-weight:bold;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

/* reverse olanlarda sağ tərəf */
.section.reverse .year{
    left:auto;
    right:-15px;
}

/* mobil görünüş */
@media(max-width:768px){
    .year{
        left:auto;
        right:0;
        top:-10px;
    }
}

.hero-section {
    height: 80vh;               /* artıq çox hündür deyil */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    position: relative;
}

.hero-text {
    max-width: 900px;
    font-size: 32px;
    line-height: 1.6;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Mobil uyğunlaşma */
@media (max-width:768px){
    .hero-section {
        height: 50vh;           /* mobil üçün daha qısa */
    }
    .hero-text {
        font-size: 20px;
        line-height: 1.5;
    }
}
/* Hero Search Area Integration */
.hero__search--wrapper {
    max-width: 700px;
    margin: 0 auto 40px auto; /* Aşağıdakı yazı ilə məsafə */
    padding: 0 15px;
}

.hero__search--form {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 50px; /* Tam uzunsov görünüş */
    padding: 5px 10px 5px 25px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Modern dərinlik */
    transition: all 0.3s ease;
}

.hero__search--form:focus-within {
    border-color: #e31e24; /* LYNXauto-nun qırmızı rəngi ilə vurğu */
    box-shadow: 0 10px 30px rgba(227, 30, 36, 0.15);
}

.hero__search--input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    height: 50px;
    font-size: 16px;
    color: #333;
    box-shadow: none;
}

.hero__search--input::placeholder {
    color: #999;
}

.hero__search--btn {
    background: #e31e24; /* Saytın ana rəngi */
    color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Dairəvi düymə */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.hero__search--btn:hover {
    background: #c1171d;
}

.hero__search--btn svg {
    width: 20px;
    height: 20px;
}

/* Mobil cihazlar üçün tənzimləmə */
@media only screen and (max-width: 575px) {
    .hero__search--wrapper {
        margin-bottom: 25px;
    }
    .hero__search--input {
        height: 40px;
        font-size: 14px;
    }
    .hero__search--btn {
        width: 40px;
        height: 40px;
    }
}


/* --- Modal (Arxaplan) --- */
.contact-modal {
    display: none; 
    position: fixed;
    z-index: 99999; /* Sizin menyunun və digər hər şeyin üstündə olması üçün */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

/* --- Modal Qutusu --- */
@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: #212121;
  --secondary-color: #ED1D24;
  --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);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
@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: 100%;
}

.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;
     /* Chrome, Safari */
      /* Firefox Mac */
    font-family: 'Noto Sans', sans-serif;
    color: #393939;
  }
}

.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%;
    position: relative;
  }
}
@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%;
    position: relative;
  }
}
.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);
  text-decoration: line-through;
}

.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(../img/banner/deal-section-bg.webp) no-repeat center center;
  background-size: contain; /* şəkilin bütün hissəsi görünür */
  background-attachment: scroll;
}

.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: 100%;
  }
}
@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: 20%;
  }
}

/*
    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;
  padding-top: 7px;
  padding-bottom: 7px;
}
.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;
  text-decoration: line-through;
}
@media only screen and (min-width: 992px) {
  .product__details--info__price .old__price {
    font-size: 1.8rem;
    text-decoration: line-through; /* üstündən xətt */
     /* istəyə görə rəng verə bilərsən */
  }
}
.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 */

.offcanvas__sub_menu{
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.offcanvas__sub_menu::-webkit-scrollbar{
  width: 6px;
}

.offcanvas__sub_menu::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 10px;
}

.offcanvas__sub_menu::-webkit-scrollbar-thumb:hover{
  background: #999;
}

.corner-icon{
    position:absolute;
    top:8px;
    right:8px; /* sol künc istəsən left:8px et */
    width:25px;
    height:25px;
    z-index:2;
    filter: brightness(0) saturate(100%) contrast(100%);
}
/* Yalnız staticcss class-ı üçün */
.staticcss > ul,
.staticcss > ol {
    margin-left: 20px !important;
    padding-left: 20px !important;
    color: #000 !important;
    font-size: 16px;
}

/* UL içindəki LI-lər */
.staticcss > ul > li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;  /* bullet üçün boşluq */
    list-style: none;    /* default bullet ləğv */
}

/* UL bullet-ləri */
.staticcss > ul > li::before {
    content: "•";        /* bullet simvolu */
    position: absolute;
    left: 0;
    color: #000;         /* bullet rəngi */
    font-weight: bold;
    font-size: 18px;
}

/* OL içindəki LI-lər */
.staticcss > ol > li {
    margin-bottom: 10px;
    color: #000 !important;
    font-size: 16px;
}






.section{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:60px;
    gap:40px;
}

.section.reverse{
    flex-direction:row-reverse;
}

.section-img img{
    width:100%;
    max-width:500px;
    border-radius:12px;
    display:block;
}

.section-text{
    flex:1;
    font-size:18px;
    line-height:1.7;
    color:#333;
}

/* MOBILE RESPONSIVE */
@media(max-width:768px){

    .section,
    .section.reverse{
        flex-direction:column;
        text-align:center;
    }

    .section-text{
        font-size:16px;
    }
}

.section{
    position:relative;
}

.year{
    position:absolute;
    top:-15px;
    left:-15px;
    background:#e53935;
    color:#fff;
    padding:10px 18px;
    font-weight:bold;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

/* reverse olanlarda sağ tərəf */
.section.reverse .year{
    left:auto;
    right:-15px;
}

/* mobil görünüş */
@media(max-width:768px){
    .year{
        left:auto;
        right:0;
        top:-10px;
    }
}

.hero-section {
    height: 80vh;               /* artıq çox hündür deyil */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    position: relative;
}

.hero-text {
    max-width: 900px;
    font-size: 32px;
    line-height: 1.6;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Mobil uyğunlaşma */
@media (max-width:768px){
    .hero-section {
        height: 50vh;           /* mobil üçün daha qısa */
    }
    .hero-text {
        font-size: 20px;
        line-height: 1.5;
    }
}

@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: #212121;
  --secondary-color: #ED1D24;
  --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);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
@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: 5px;
  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: 100%;
}

.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;
    display: flex; /* Flexbox aktiv edilir */
    flex-direction: column; /* Elementlər alt-alta düzülür */
    align-items: center; /* Üfüqi olaraq mərkəzləşdirilir */
    text-decoration: none; /* Linkin alt xəttini yığışdırmaq üçün */
}
.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;
    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;
     /* Chrome, Safari */
      /* Firefox Mac */
    font-family: 'Noto Sans', sans-serif;
    color: #393939;
  }
}

.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.5rem;
    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%;
    position: relative;
  }
}
@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%;
    position: relative;
  }
}
.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: 100;
  visibility: visible;
}
.product__card:hover .product__card--footer {
  opacity: 1;
  visibility: visible;
  bottom: 2px;
}
.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;
  min-height: 177px;
}
@media only screen and (min-width: 1200px) {
  .product__card--content {
    padding: 0 2rem 2rem;
    min-height: 188px;
  }
}
.product__card--title {
  margin-bottom: 0.5rem;
}
@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: 0px 2rem 2rem;
  background: var(--body-background-color);
<!
  -- Start product section -->
        <section class="product__section section--padding  pt-0">
            <div class="container">
                <div class="section__heading border-bottom mb-30">
                    <h2 class="section__heading--maintitle" style=" text-transform: math-auto; ">LYNXauto <span>Filrtlər</span></h2>
                </div>
                <div class="product__section--inner pb-15 product__swiper--activation swiper">
                    <div class="swiper-wrapper">
                        {custom category="13" template="/mod/swiper" available="global"  from="0" limit="7" order="rand" sort="desc"}

                    </
  div>
                    <div class="swiper__nav--btn swiper-button-next">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=" -chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
                    </div>
                    <div class="swiper__nav--btn swiper-button-prev">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=" -chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg>
                    </div>
                </div>
            </div>
        </section>
        <!-- End product section -->;
  opacity: 1;
  visibility: visible;
  bottom: 0%;
}
.product__card--footer::before {
  position: absolute;
  content: "";
  border: 0px solid var(--border-color);
  left: -2px;
  bottom: 0;
  right: -1px;
  border-top: 0;
  width: 100%;
  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);
  margin-bottom: 45px !important;
}

.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);
  text-decoration: line-through;
}

.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(../img/banner/deal-section-bg.webp) no-repeat center center;
  background-size: contain; /* şəkilin bütün hissəsi görünür */
  background-attachment: scroll;
}

.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: 100%;
  }
}
@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: 20%;
  }
}

/*
    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;
  padding-top: 7px;
  padding-bottom: 7px;
}
.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;
  text-decoration: line-through;
}
@media only screen and (min-width: 992px) {
  .product__details--info__price .old__price {
    font-size: 1.8rem;
    text-decoration: line-through; /* üstündən xətt */
     /* istəyə görə rəng verə bilərsən */
  }
}
.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 */

.offcanvas__sub_menu{
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.offcanvas__sub_menu::-webkit-scrollbar{
  width: 6px;
}

.offcanvas__sub_menu::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 10px;
}

.offcanvas__sub_menu::-webkit-scrollbar-thumb:hover{
  background: #999;
}

.corner-icon{
    position:absolute;
    top:8px;
    right:8px; /* sol künc istəsən left:8px et */
    width:25px;
    height:25px;
    z-index:2;
    filter: brightness(0) saturate(100%) contrast(100%);
}
/* Yalnız staticcss class-ı üçün */
.staticcss > ul,
.staticcss > ol {
    margin-left: 20px !important;
    padding-left: 20px !important;
    color: #000 !important;
    font-size: 16px;
}

/* UL içindəki LI-lər */
.staticcss > ul > li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;  /* bullet üçün boşluq */
    list-style: none;    /* default bullet ləğv */
}

/* UL bullet-ləri */
.staticcss > ul > li::before {
    content: "•";        /* bullet simvolu */
    position: absolute;
    left: 0;
    color: #000;         /* bullet rəngi */
    font-weight: bold;
    font-size: 18px;
}

/* OL içindəki LI-lər */
.staticcss > ol > li {
    margin-bottom: 10px;
    color: #000 !important;
    font-size: 16px;
}






.section{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:60px;
    gap:40px;
}

.section.reverse{
    flex-direction:row-reverse;
}

.section-img img{
    width:100%;
    max-width:500px;
    border-radius:12px;
    display:block;
}

.section-text{
    flex:1;
    font-size:18px;
    line-height:1.7;
    color:#333;
}

/* MOBILE RESPONSIVE */
@media(max-width:768px){

    .section,
    .section.reverse{
        flex-direction:column;
        text-align:center;
    }

    .section-text{
        font-size:16px;
    }
}

.section{
    position:relative;
}

.year{
    position:absolute;
    top:-15px;
    left:-15px;
    background:#e53935;
    color:#fff;
    padding:10px 18px;
    font-weight:bold;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

/* reverse olanlarda sağ tərəf */
.section.reverse .year{
    left:auto;
    right:-15px;
}

/* mobil görünüş */
@media(max-width:768px){
    .year{
        left:auto;
        right:0;
        top:-10px;
    }
}

.hero-section {
    height: 80vh;               /* artıq çox hündür deyil */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    position: relative;
}

.hero-text {
    max-width: 900px;
    font-size: 32px;
    line-height: 1.6;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Mobil uyğunlaşma */
@media (max-width:768px){
    .hero-section {
        height: 50vh;           /* mobil üçün daha qısa */
    }
    .hero-text {
        font-size: 20px;
        line-height: 1.5;
    }
}
/* Hero Search Area Integration */
.hero__search--wrapper {
    max-width: 700px;
    margin: 0 auto 40px auto; /* Aşağıdakı yazı ilə məsafə */
    padding: 0 15px;
}

.hero__search--form {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 50px; /* Tam uzunsov görünüş */
    padding: 5px 10px 5px 25px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Modern dərinlik */
    transition: all 0.3s ease;
}

.hero__search--form:focus-within {
    border-color: #e31e24; /* LYNXauto-nun qırmızı rəngi ilə vurğu */
    box-shadow: 0 10px 30px rgba(227, 30, 36, 0.15);
}

.hero__search--input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    height: 50px;
    font-size: 16px;
    color: #333;
    box-shadow: none;
}

.hero__search--input::placeholder {
    color: #999;
}

.hero__search--btn {
    background: #e31e24; /* Saytın ana rəngi */
    color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Dairəvi düymə */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.hero__search--btn:hover {
    background: #c1171d;
}

.hero__search--btn svg {
    width: 20px;
    height: 20px;
}

/* Mobil cihazlar üçün tənzimləmə */
@media only screen and (max-width: 575px) {
    .hero__search--wrapper {
        margin-bottom: 25px;
    }
    .hero__search--input {
        height: 40px;
        font-size: 14px;
    }
    .hero__search--btn {
        width: 40px;
        height: 40px;
    }
}


/* --- Modal (Arxaplan) --- */
.contact-modal {
    display: none; 
    position: fixed;
    z-index: 99999; /* Sizin menyunun və digər hər şeyin üstündə olması üçün */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

/* --- Modal (Arxaplan) --- */
.contact-modal {
    display: none; 
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 24, 39, 0.6); /* Daha tünd, rəsmi arxaplan */
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}

/* --- Modal Qutusu --- */
.contact-modal-content {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px; /* Daha kəskin korporativ kənarlar */
    width: 90%;
    max-width: 440px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    position: relative;
    animation: modalFadeIn 0.3s ease-out;
    font-family: 'Inter', sans-serif;
    text-align: left; /* Ciddi sənəd formatı üçün sola yaslama */
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Bağlama (X) Düyməsi --- */
.contact-close-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 24px;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.2s;
    line-height: 1;
}

.contact-close-btn:hover { color: #111827; }

/* --- Başlıq Hissəsi --- */
.contact-header {
    margin-bottom: 30px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 15px;
}

.contact-header h2 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 600;
    color: #111827;
}

.contact-header p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

/* --- Əlaqə Məlumatları Siyahısı --- */
.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 35px;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #f3f4f6;
    border-radius: 8px;
    color: #4b5563;
    font-size: 16px;
    flex-shrink: 0;
}

.info-text span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.info-text p, .info-text a {
    margin: 0;
    color: #111827;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s;
}

.info-text a:hover { color: #2563eb; }

/* --- Alt Hissə (Sosial və WP) --- */
.contact-bottom-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

/* Rəsmi WhatsApp Düyməsi */
.contact-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    color: #374151 !important;
    transition: all 0.2s ease;
}

.contact-social-btn:hover {
    border-color: #25D366;
    color: #25D366 !important;
    background-color: #f6fdf9;
}

/* Sizin SVG İkonlarınız üçün dizayn */
.contact-social-icons {
    display: flex;
    gap: 10px;
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px; /* Dairəvi yox, daha ciddi dördkünc */
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #6b7280 !important; /* SVG-nin rəngini idarə edir */
    text-decoration: none;
    transition: all 0.2s ease;
}

.contact-icon:hover {
    background-color: #111827;
    border-color: #111827;
    color: #ffffff !important; /* Üzərinə gələndə ağarır */
    transform: translateY(-2px);
}

/* Səhifələmə konteyneri */
.pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Bütün səhifə nömrələri üçün ümumi dizayn (Ağ və Qara) */
.pages a, 
.pages span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    background-color: #ffffff;
    border: 2px solid #000000;
    border-radius: 4px;
    color: #000000;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
}

/* Kliklənə bilən səhifələrə (a teqlərinə) mausla yaxınlaşdıqda */
.pages a:hover {
    background-color: #000000;
    color: #ffffff;
    cursor: pointer;
}

/* Aktiv olan səhifə (span teqi) - Qırmızı dizayn */
.pages span {
    background-color: #d32f2f; /* Canlı qırmızı */
    border-color: #d32f2f;
    color: #ffffff;
    cursor: default;
    box-shadow: 0 3px 6px rgba(211, 47, 47, 0.3);
}