/* assets/base.css
   ========================================================================== */

/* a,
a:link,
a:visited,
a:active {
  color: var(--text-white-color);
} */

a:hover,
a:focus {
  color: var(--link-hover-color);
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap');

:root {
  /* ── Typography ── */
  --font-heading: 'Playfair Display', serif;
  --font-body-family: 'Poppins', sans-serif;
  --font-body-scale: 1.0;
  --font-body-size: 1.6rem;
  --font-body-weight: 400;
  --headings-weight: 700;
  --frank-ruhl-fonts: 'Frank Ruhl Libre', serif;
  --karma-fonts: 'Karma', serif;
  --body-font-size: 1.5rem;
  --body-font-weight: 400;
  --body-line-height: 2.6rem;

  /* Typography Scale Tokens */
  --text-xs: 1.2rem;
  --text-sm: 1.4rem;
  --text-md: 1.6rem;
  --text-lg: 1.8rem;
  --text-xl: 2.2rem;
  --text-2xl: 2.8rem;
  --text-3xl: 3.6rem;
  --text-display: clamp(3rem, 4vw, 5rem);

  /* ── Colors (final/live values — matches what the site currently shows) ── */
  --primary-color: #3C3836;
  --secondary-color: #bcadae;
  --hover-color: #ED1D24;
  --yellow-color: #FF9800;
  --foreground-color: #800020;
  --foreground-sub-color: #98928E;
  --body-text-color: #800020;
  --text-white-color: #fff;
  --body-background-color: #f5f1ec;
  --bg-offwhite-color: #F5F7FF;
  --bg-gray-color: #F5F8FF;
  --bg-black-color: #800020;
  --bg-light-dark-color: #1a1818;
  --burgundy-color: #800020;
  --border-color: #DAD2CE;
  --link-color: #2a2624;
  --link-hover-color: #800020;

  /* ── Spacing Scale ── */
  --space-1: 0.5rem;
  /* 5px */
  --space-2: 1.0rem;
  /* 10px */
  --space-3: 1.5rem;
  /* 15px */
  --space-4: 2.0rem;
  /* 20px */
  --space-5: 3.0rem;
  /* 30px */
  --space-6: 4.0rem;
  /* 40px */
  --space-7: 6.0rem;
  /* 60px */
  --space-8: 8.0rem;
  /* 80px */

  /* ── Radii ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);

  /* ── Transitions (final/live value) ── */
  --transition-fast: all 0.2s ease;
  --transition: all 0.3s ease 0s;
  --transition-slow: all 0.5s ease;

  --page-width: 1200px;
  --container-fluid-offset: 12rem;
}

/* ==========================================================================
   ANKARA DESIGN SYSTEM PRIMITIVES
   ========================================================================== */

/* ── Layout Container System ── */
.layout-full {
  width: 100%;
  margin-inline: auto;
}

.layout-wide {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  width: 100%;
}

.layout-container,
.layout-default {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  width: 100%;
}

.layout-narrow {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  width: 100%;
}

/* ── Section System ── */
.section {
  padding-block: var(--space-6);
}

.section--compact {
  padding-block: var(--space-4);
}

.section--spacious {
  padding-block: var(--space-7);
}

.section--light {
  background-color: var(--body-background-color);
  color: var(--body-text-color);
}

.section--offwhite {
  background-color: var(--bg-offwhite-color);
  color: var(--body-text-color);
}

.section--dark {
  background-color: var(--primary-color);
  color: var(--text-white-color);
}

.section--flush {
  padding-block: 0;
}

/* ── Button System ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 2.4rem;
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1.4;
}

.btn-primary {
  background: var(--primary-color);
  color: #ffffff !important;
  border-color: var(--primary-color);
}

.btn-primary:hover {
  background: var(--hover-color);
  border-color: var(--hover-color);
  color: #ffffff !important;
}

.btn-outline {
  background: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color) !important;
}

.btn-outline:hover {
  background: var(--primary-color);
  color: #ffffff !important;
}

.btn-dark {
  background: #1a1a1a;
  color: #ffffff !important;
  border-color: #1a1a1a;
}

.btn-dark:hover {
  background: #333333;
  color: #ffffff !important;
}

.btn-light {
  background: #ffffff;
  color: var(--primary-color) !important;
  border-color: #ffffff;
}

.btn-light:hover {
  background: var(--bg-offwhite-color);
  color: var(--hover-color) !important;
}

.btn-full {
  width: 100%;
  display: flex;
}

.btn-sm {
  padding: 0.8rem 1.6rem;
  font-size: var(--text-xs);
}

.btn-lg {
  padding: 1.6rem 3.2rem;
  font-size: var(--text-md);
}

/* ── Card System ── */
.card {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}

.card:hover .card-media img {
  transform: scale(1.04);
}

.card-content {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-meta {
  font-size: var(--text-xs);
  color: var(--foreground-sub-color);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card-footer {
  padding-top: var(--space-3);
  margin-top: auto;
  border-top: 1px solid var(--border-color);
}

/* ── Shared Header & Navigation Primitives ── */
.main__logo--img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.offcanvas__logo--img {
  height: 50px;
  width: auto;
  object-fit: contain;
}

.footer__logo--img {
  height: 70px;
  width: auto;
  object-fit: contain;
}

.header__menu--link--sale {
  color: #d9534f !important;
  font-weight: 600 !important;
}

.currency-option {
  color: #000000 !important;
}

/* ── Minicart Drawer Component System ── */
.minicart__drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.minicart__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-4);
}

.minicart__title {
  font-family: var(--font-body-family);
  font-size: 2.4rem;
  color: var(--primary-color);
  font-weight: 500;
  margin: 0;
}

.minicart__close-btn {
  background: none;
  border: none;
  font-size: 2.4rem;
  cursor: pointer;
  color: var(--primary-color);
  line-height: 1;
  padding: 0;
}

.minicart__items-list {
  flex: 1;
  overflow-y: auto;
  padding-right: var(--space-2);
}

.minicart__footer {
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

.minicart__note-section {
  margin-bottom: var(--space-4);
}

.minicart__note-label {
  font-family: var(--font-body-family);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-color);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  letter-spacing: 0.2em;
}

.minicart__note-textarea {
  width: 100%;
  height: 80px;
  padding: var(--space-2);
  border: 1px solid var(--border-color);
  font-family: var(--font-body-family);
  font-size: 1.3rem;
  color: var(--primary-color);
  resize: vertical;
  outline: none;
  border-radius: var(--radius-sm);
}

.minicart__subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.minicart__subtotal-label {
  font-family: var(--font-body-family);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.minicart__subtotal-price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-color);
}

.minicart__tax-note {
  font-size: 1.2rem;
  color: var(--foreground-sub-color);
  text-align: center;
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.minicart__checkout-btn {
  display: block;
  width: 100%;
  padding: 1.6rem;
  background: var(--primary-color, #800020);
  color: #ffffff !important;
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-weight: 600;
  text-decoration: none;
}

.minicart__checkout-btn:hover {
  background: var(--hover-color, #5c001a);
  color: #ffffff !important;
}

.minicart__button {
  padding-bottom: var(--space-4);
}


/*
  Template Name: Becute - Jewelry, Cosmetics and Beauty eCommerce HTML Template
  Author Name: Hook theme
  Author URL: https://themeforest.net/user/hooktheme
  Version: 1.0.0

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

    1. Base CSS
    2. Header css
    3. Slider css
    4. Banner css 
    5. Product card css 
    6. Collection 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. Privacy policy css
    19. Preloader css 
    20. Portfolio css
    21. Newsletter css 
    22. Newsletter popup css
    23. My account page css 
    24. Login page css
    25. Faq page css 
    26. Counterup css here
    27. Contact page css
    28. Compare page css 
    29. Checkout Page Css
    30. Cart page css
    31. Breadcrumb css 
    32. Blog details css
    33. About page css
    34. Error 404 page css 
    35. Other section css

*/
/*
    1. Base CSS
*/

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

html {
  scroll-behavior: smooth;
}

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

/* Hide css */
.hide {
  display: none;
}

@media only screen and (max-width: 767px) {
  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;
  font-family: var(--frank-ruhl-fonts);
}

h1,
.h1 {
  font-size: 2.2rem;
  line-height: 3.2rem;
}

@media only screen and (min-width: 480px) {

  h1,
  .h1 {
    font-size: 2.3rem;
    line-height: 3.3rem;
  }
}

@media only screen and (min-width: 576px) {

  h1,
  .h1 {
    font-size: 2.4rem;
    line-height: 3.4rem;
  }
}

@media only screen and (min-width: 768px) {

  h1,
  .h1 {
    font-size: 3rem;
    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: 6rem;
  }
}

@media only screen and (min-width: 1366px) {

  h1,
  .h1 {
    font-size: 5.5rem;
    line-height: 7rem;
  }
}

@media only screen and (min-width: 1600px) {

  h1,
  .h1 {
    font-size: 6rem;
    line-height: 7.5rem;
  }
}

h2,
.h2 {
  font-size: 2rem;
  line-height: 2.6rem;
  font-weight: 600;
}

@media only screen and (min-width: 576px) {

  h2,
  .h2 {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}

@media only screen and (min-width: 992px) {

  h2,
  .h2 {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 1200px) {

  h2,
  .h2 {
    font-size: 2.8rem;
    line-height: 3.5rem;
  }
}

@media only screen and (min-width: 1366px) {

  h2,
  .h2 {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}

h3,
.h3 {
  font-size: 1.5rem;
  line-height: 2.4rem;
}

@media only screen and (min-width: 992px) {

  h3,
  .h3 {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}

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

/* 
@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;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}

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

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

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

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

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

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

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

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

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

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

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

ul {
  margin: 0;
  padding: 0;
}

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

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

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

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

/* ── Universal Shopify 1200px Page & Header/Footer Alignment Rule ── */

@media only screen and (min-width: 1200px) {

  .container,
  .page-width,
  .main__header--inner,
  .header__topbar--inner,
  .header__bottom--inner,
  .footer__layout,
  .footer__bottom--inner,
  .breadcrumb__section,
  .product__details--section,
  .product__details--tabs-section,
  .product__related,
  .about__section,
  .contact__section,
  .cart__section,
  .account__section,
  .shop__section,
  .home__shop--container,
  .home-outlet,
  .home-testimonials,
  .home-services,
  .home-fabrics-teaser,
  .heritage-culture-section,
  .home-shop-by-style,
  .home-sale-promo,
  .privacy__section {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
  }
}

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

/* ── Layout Shift (CLS) Prevention & Skeleton Reserve Heights ── */
.hero-section {
  min-height: 500px;
  background-color: #800020;
}

.home-categories {
  min-height: 380px;
}

.home-category-grid {
  min-height: 320px;
}

.bag-of-the-month {
  min-height: 420px;
}

.home-fabrics-teaser {
  min-height: 360px;
}

.fabrics-grid {
  min-height: 280px;
}

.heritage-culture-section {
  min-height: 400px;
}

.home-shop-by-style {
  min-height: 420px;
}

.style-grid {
  min-height: 360px;
}

.home-statement {
  min-height: 350px;
  background-color: #800020;
}

.home-testimonials {
  min-height: 280px;
}

.home-services {
  min-height: 180px;
}

.services-grid {
  min-height: 140px;
}

/* ── Smooth Image Loading & Transition ── */
img {
  transition: opacity 0.3s ease-in-out;
}

img:not(.loaded) {
  opacity: 0.85;
}

img.loaded {
  opacity: 1;
}

/* ── Skeleton Shimmer Loaders (Sketches) ── */
.skeleton-card {
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
}

.skeleton-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(90deg, #f0eae4 0%, #faf6f2 50%, #f0eae4 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite ease-in-out;
  border-radius: 8px;
}

.skeleton-text {
  height: 16px;
  background: linear-gradient(90deg, #f0eae4 0%, #faf6f2 50%, #f0eae4 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite ease-in-out;
  border-radius: 4px;
  margin-top: 10px;
  width: 80%;
}

.skeleton-text.short {
  width: 45%;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

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

/* ── Reset & Body Grid ── */
html {
  font-size: 62.5%;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-body-family);
  font-size: calc(var(--font-body-scale) * var(--font-body-size, 1.6rem));
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale, 1));
  color: #2a2624;
  background-color: var(--body-background-color);
}

@media only screen and (min-width: 768px) {
  body {
    --font-body-scale: 1.066;
    /* 1.6rem body text size on desktop */
  }
}

/* main */
.main-content {
  display: grid;
  gap: 3.5rem;
}



/* ── Header ── */
ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main__header {
  display: flex;
  justify-content: center;
  padding-block: 1.4rem;
  padding-inline: var(--space-4);
  width: 100%;
}

.main__header--inner {
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
}

@media only screen and (min-width: 768px) {
  .main__header {
    padding-block: 1.6rem;
  }

  .main__header .main__header--inner {
    padding-inline: 1rem;
  }
}

.header__menu--wrapper,
.header__account--wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Desktop/mobile nav visibility */
.header__menu,
.header__account--search__items {
  display: none;
}

@media only screen and (min-width: 992px) {

  .header__menu,
  .header__account--search__items {
    display: block;
  }

  .offcanvas__header--menu__open {
    display: none;
  }
}

/* ── Footer ── */
.footer__layout {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: space-between;
  gap: 3rem;
  padding-block: 1.5rem;
  padding-inline: 1.5rem;
}


@media only screen and (min-width: 768px) {
  .footer__layout {
    padding-inline: 4.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .footer__layout {
    grid-template-columns: 2.5fr 1.5fr 1.5fr 2.5fr;
    gap: 4rem;
    padding-inline: 2.5rem;
  }
}

/* ── Flex Utilities ── */
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

/* ── Gap Scale ── */
.gap-1 {
  gap: var(--space-1);
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-5 {
  gap: var(--space-5);
}

.gap-6 {
  gap: var(--space-6);
}

.gap-7 {
  gap: var(--space-7);
}

.gap-8 {
  gap: var(--space-8);
}

/* ── Generic Responsive Grid ── */
.grid {
  display: grid;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media only screen and (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media only screen and (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 992px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media only screen and (min-width: 768px) {
  .grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (min-width: 992px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Text Alignment ── */
.text-center {
  text-align: center;
}

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

/* ── Shop: Sidebar + Content ── */
.shop__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media only screen and (min-width: 992px) {
  .shop__layout {
    grid-template-columns: 280px 1fr;
  }
}

/* ── Cart: Items + Summary ── */
.cart__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media only screen and (min-width: 992px) {
  .cart__layout {
    grid-template-columns: 2fr 1fr;
  }
}

/* ── Checkout: Form + Order Summary ── */
.checkout__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media only screen and (min-width: 992px) {
  .checkout__layout {
    grid-template-columns: 3fr 2fr;
  }
}

/* ── About: Story Columns ── */
.about__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media only screen and (min-width: 768px) {
  .about__layout {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Swatch Items (migrated from index.html inline <style>) ── */
.swatch-item {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}

.swatch-item.active {
  border-color: #fff;
  box-shadow: 0 0 0 1px var(--primary-color);
}

.swatch-item.large {
  width: 3rem;
  height: 3rem;
}

/* Sticky Toolbar Fix */
.offcanvas__sticky--toolbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Typography Utilities */
.text-white {
  color: #fff !important;
}

/* Basic Display Utilities (Bootstrap polyfills) */
.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-flex {
  display: flex !important;
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }

  .d-md-block {
    display: block !important;
  }

  .d-md-flex {
    display: flex !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }

  .d-lg-block {
    display: block !important;
  }

  .d-lg-flex {
    display: flex !important;
  }
}


/* ==========================================
   IMPORTED FROM STYLE.CSS
   ========================================== */
/*
  Template Name: Becute - Jewelry, Cosmetics and Beauty eCommerce HTML Template
  Author Name: Hook theme
  Author URL: https://themeforest.net/user/hooktheme
  Version: 1.0.0

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

    1. Base CSS
    2. Header css
    3. Slider css
    4. Banner css 
    5. Product card css 
    6. Collection 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. Privacy policy css
    19. Preloader css 
    20. Portfolio css
    21. Newsletter css 
    22. Newsletter popup css
    23. My account page css 
    24. Login page css
    25. Faq page css 
    26. Counterup css here
    27. Contact page css
    28. Compare page css 
    29. Checkout Page Css
    30. Cart page css
    31. Breadcrumb css 
    32. Blog details css
    33. About page css
    34. Error 404 page css 
    35. Other section css

*/
/*
    1. Base CSS
*/

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







/* Hide css */
.hide {
  display: none;
}



[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;
  font-family: var(--font-heading);
}

h1,
.h1 {
  font-size: 2.2rem;
  line-height: 3.2rem;
}

@media only screen and (min-width: 480px) {

  h1,
  .h1 {
    font-size: 2.3rem;
    line-height: 3.3rem;
  }
}

@media only screen and (min-width: 576px) {

  h1,
  .h1 {
    font-size: 2.4rem;
    line-height: 3.4rem;
  }
}

@media only screen and (min-width: 768px) {

  h1,
  .h1 {
    font-size: 3rem;
    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: 6rem;
  }
}

@media only screen and (min-width: 1366px) {

  h1,
  .h1 {
    font-size: 5.5rem;
    line-height: 7rem;
  }
}

@media only screen and (min-width: 1600px) {

  h1,
  .h1 {
    font-size: 6rem;
    line-height: 7.5rem;
  }
}

h2,
.h2 {
  font-size: 2rem;
  line-height: 2.6rem;
  font-weight: 600;
}

@media only screen and (min-width: 576px) {

  h2,
  .h2 {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}

@media only screen and (min-width: 992px) {

  h2,
  .h2 {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 1200px) {

  h2,
  .h2 {
    font-size: 2.8rem;
    line-height: 3.5rem;
  }
}

@media only screen and (min-width: 1366px) {

  h2,
  .h2 {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}

h3,
.h3 {
  font-size: 1.5rem;
  line-height: 2.4rem;
}

@media only screen and (min-width: 992px) {

  h3,
  .h3 {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}

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

@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;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-decoration: none;
  color: var(--primary-color);
}

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

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

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

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

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

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

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

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

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

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

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

ul {
  margin: 0;
  padding: 0;
}

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

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

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


@media only screen and (max-width: 1199px) {
  .col-lg-order {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  .d-lg-none {
    display: none;
  }
}

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

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

  .col-md-order {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  .d-md-block {
    display: block;
  }

  .d-md-2-block {
    display: block !important;
  }

  .d-md-u-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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .col-sm-order {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  .d-sm-u-block {
    display: block !important;
  }
}

@media only screen and (max-width: 575px) {
  .d-sm-2-none {
    display: none;
  }

  .d-sm-2-block {
    display: block;
  }

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

  .col-sm-2-order {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
}

@media only screen and (max-width: 479px) {
  .d-sm-3-none {
    display: none;
  }
}

@media only screen and (max-width: 575px) {
  .custom-col {
    width: 50%;
  }
}

@media only screen and (max-width: 479px) {
  .custom-col {
    width: 50%;
  }
}

@media only screen and (max-width: 991px) {
  .row-md-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

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

@media only screen and (max-width: 767px) {
  .row_sm_reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

@media only screen and (max-width: 575px) {
  .row_sm_u_reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

/*
  Swiper navigation css
*/
.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;
  -webkit-transition: var(--transition);
  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(--primary-color);
  opacity: 1;
  vertical-align: middle;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background: inherit;
  margin: 0 4px !important;
  position: relative;
}

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

/*
  default css here
*/
.no-gutter {
  margin-right: 0;
  margin-left: 0;
}

.no-gutter>[class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

.position__sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.header__transparent {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 9;
}





@media only screen and (min-width: 768px) {}

@media only screen and (min-width: 992px) {}

@media only screen and (min-width: 1200px) {}

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


/* Footer column widths */
/* .footer__col--wide {
  flex: 2 1 300px;
}

.footer__col--narrow {
  flex: 1 1 150px;
} */

/* Footer logo image */
.footer__logo--img {
  height: 70px;
  width: auto;
  object-fit: contain;
  filter: brightness(1.1);
}

/* Social icons list */
.footer__widget--social__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__widget {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


/* Footer menu list */
.footer__widget--menu.footer__widget--inner {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}


/* Footer bottom container */
.footer__bottom {
  padding-block: 1.5rem;
  padding-inline: 1.5rem;
  border-top: 1px solid var(--border-color);
}

.footer__bottom--inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: left;
  gap: 1rem;
  font-size: 1.8rem;
}

@media only screen and (min-width: 768px) {
  .footer__bottom--inner {
    flex-direction: row;
  }

  .footer__bottom {
    padding-inline: 2.5rem;
  }
}

/* Payment badge */
.footer__payment--label {
  font-size: 1.8rem;
  opacity: 0.6;
}

/* Footer contact list */
.footer__widget--contact__list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__widget--contact__list--items {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
}

.footer__widget--contact__list--items a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.footer__widget--contact__list--items a:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}

/* Newsletter form */
.footer__newsletter--form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.footer__newsletter--form label {
  display: block;
}

.footer__newsletter--input {
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--border-color);
  background: transparent;
  font-size: 1.4rem;
  color: var(--primary-color);
  outline: none;
  width: 80%;
  transition: border-color 0.2s;
}

.footer__newsletter--input:focus {
  border-color: var(--secondary-color);
}

.footer__newsletter--input::placeholder {
  color: var(--foreground-sub-color);
}

.footer__newsletter--btn {
  align-self: flex-start;
}

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

.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;
  -webkit-transform-origin: 66% 66%;
  transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  opacity: 0.7;
}

.section__heading--subtitle {
  font-size: 1.1rem;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--bg-offwhite-color);
  color: var(--primary-color);
  padding: 2px 2.5rem;
  border-radius: 2rem;
  line-height: 2.4rem;
  margin-bottom: 1.4rem;
}

.section__heading--maintitle {
  font-weight: 600;
  color: var(--primary-color);
}

.section__heading--flex {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 2rem;
}

.section__heading--desc {
  margin-top: 1.2rem;
}

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

#scroll__top:hover {
  background: var(--primary-color);
}

@media only screen and (max-width: 991px) {
  #scroll__top {
    bottom: 75px;
  }
}

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

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

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

.width__295 {
  width: 295px;
}

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

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

.bg__black {
  background: #800020;
}

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

.text__hover {
  color: var(--hover-color);
}

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

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

.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;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.tab_pane:not(.show) {
  opacity: 0;
}

.tab_pane.show {
  opacity: 1;
}

.tab_pane.active {
  display: block;
}

html,
body {
  overflow-x: clip;
  max-width: 100vw;
}

body.overlay__active,
.mobile_menu_open,
.predictive__search--box_active,
.offCanvas__minicart_active,
.offcanvas__filter--sidebar_active {
  overflow: hidden !important;
}

body.overlay__active::before,
.predictive__search--box_active::before,
.mobile_menu_open::before,
.offCanvas__minicart_active::before,
.offcanvas__filter--sidebar_active::before {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  content: "";
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
  cursor: pointer;
}



@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.animate-fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}



/* Section margin */
.section--nargin {
  margin-top: 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;
}

.mt-30 {
  margin-top: 3rem;
}

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

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

@media only screen and (min-width: 992px) {
  .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: 3.5rem;
  }
}

.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_5 {
  margin-bottom: 0.5rem;
}

.mb-8 {
  margin-bottom: 0.8rem;
}

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

/*
    2. Header css
*/
/*
    offcanvas header css
*/
.header__sticky.sticky .offcanvas__header--menu__open--btn {
  color: var(--body-text-color) !important;
}

.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: 10000;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 300px;
  height: 100vh;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  background-color: var(--body-background-color);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
}

@media only screen and (min-width: 480px) {
  .offcanvas__header {
    max-width: 320px;
  }
}

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

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

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

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

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

.offcanvas__logo img {
  max-width: 9.5rem;
}

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

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

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

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

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

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

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

.offcanvas__menu_item {
  line-height: 1;
  display: block;
  padding: 15px 20px;
  text-transform: uppercase;
  color: var(--primary-color);
}

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

/* 
    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;
  color: var(--foreground-color);
}

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

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

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

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

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

.offcanvas__account--items {
  margin-top: 2rem;
  padding: 0 1.5rem;
}

.offcanvas__account--signup__btn,
.offcanvas__account--items__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--primary-color);
  padding: 0.8rem 0;
  text-decoration: none;
  transition: color 0.2s ease;
}

.offcanvas__account--signup__btn svg,
.offcanvas__account--items__btn svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  flex-shrink: 0;
}

.offcanvas__account--signup__btn:hover,
.offcanvas__account--items__btn:hover {
  color: var(--secondary-color);
}

/*
    Offcanvas mobile sticky toolbar css here
*/
.offcanvas__sticky--toolbar {
  position: fixed;
  bottom: 0;
  background: var(--body-background-color);
  left: 0;
  right: 0;
  z-index: 99;
  -webkit-box-shadow: 0 0 9px rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.12);
  padding: 14px 20px;
  display: none;
}

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

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

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

.offcanvas__sticky--toolbar__btn {
  position: relative;
  text-align: center;
  transition: transform 0.2s ease;
}

.offcanvas__sticky--toolbar__btn:hover {
  transform: translateY(-2px);
}

.offcanvas__sticky--toolbar__btn:hover .offcanvas__sticky--toolbar__icon,
.offcanvas__sticky--toolbar__btn:active .offcanvas__sticky--toolbar__icon,
.offcanvas__sticky--toolbar__btn.active .offcanvas__sticky--toolbar__icon {
  background: #5c0017 !important;
  color: #ffffff !important;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(92, 0, 23, 0.4);
}

.offcanvas__sticky--toolbar__btn:hover .offcanvas__sticky--toolbar__label,
.offcanvas__sticky--toolbar__btn:active .offcanvas__sticky--toolbar__label,
.offcanvas__sticky--toolbar__btn.active .offcanvas__sticky--toolbar__label {
  color: var(--primary-color, #800020) !important;
  font-weight: 700;
}

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

.offcanvas__sticky--toolbar__btn.minicart__open--btn {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.offcanvas__sticky--toolbar__icon {
  width: 3.4rem;
  height: 3.4rem;
  text-align: center;
  background: var(--bg-black-color);
  border-radius: 50%;
  color: #ffffff !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(128, 0, 32, 0.25);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.offcanvas__sticky--toolbar__label {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 6px;
  color: var(--text-color, #2a2624);
  transition: color 0.2s ease;
}

.offcanvas__sticky--toolbar .items__count {
  left: 2.3rem;
  top: -9px;
  background: #800020;
  border: 2px solid #ffffff;
}

/*
    header sticky css here
*/
.header__sticky.sticky {
  position: fixed;
  width: 100%;
  top: 0;
  background: var(--bg-offwhite-color) !important;
  z-index: 1000;
  left: 0;
  padding: 1rem 0.5rem;
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

@media only screen and (max-width: 768px) {
  .header__sticky.sticky {
    padding-inline: 1.5rem;
    padding-block: 1.5rem;
  }
}

/*
   header topbar css here
*/
.header__topbar {
  padding: 8px 0;
}

@media only screen and (min-width: 768px) {
  .header__topbar {
    padding: 10px 0;
  }
}

/*
    language currency css here
*/
.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%;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
  opacity: 0.6;
}

.language__currency--link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--text-white-color);
  font-family: var(--jost-fonts);
  font-size: 1.5rem;
  line-height: 3.5rem;
  background-color: transparent;
  border: none !important;

}

.localization-form:only-child .button,
.localization-form:only-child .localization-form__select {
  margin: 1rem 1rem 0.5rem;
  flex-grow: 1;
}


.language__currency--link--icon__img {
  vertical-align: middle;
  margin-right: 5px;
}

.language__currency--link:hover span {
  color: var(--secondary-color);
}

.language__currency--link:hover svg {
  color: var(--secondary-color);
}

.language__currency--link svg {
  -webkit-transition: var(--transition);
  transition: var(--transition);
  margin-left: 5px;
}

.language__currency--link>* {
  pointer-events: none;
}

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

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

.dropdown__switcher.active {
  opacity: 1;
  visibility: visible;
  margin-top: 11px;
}

.dropdown__switcher--items:first-child .dropdown__switcher--text {
  border-radius: 5px 5px 0 0;
}

.dropdown__switcher--items:last-child .dropdown__switcher--text {
  border-bottom: 0;
  border-radius: 0 0 5px 5px;
}

.dropdown__switcher--text {
  display: block;
  font-size: 1.3rem;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-color);
}

.dropdown__switcher--active {
  text-decoration: underline;
}

.dropdown__switcher--text:hover {
  background: var(--bg-offwhite-color);
  border-color: var(--bg-offwhite-color);
}

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

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

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

/* 
quantity icon button
 */
.quantity__button {
  width: calc(4.5rem / var(--font-body-scale));
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--foreground-sub-color));
  padding: 0;
}

.quantity__button svg {
  width: 1rem;
  pointer-events: none;
}

/*
    main header css here
*/


.main__logo--link {
  display: block;
}

.main__logo--img {
  max-width: 145px;
}

@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
*/
.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%;
  -webkit-transform: translatey(-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 {
  position: relative;
  width: 360px;
}

@media only screen and (min-width: 1200px) {
  .header__search--form {
    width: 400px;
  }
}

@media only screen and (min-width: 1366px) {
  .header__search--form {
    width: 600px;
  }
}

.header__search--form label {
  width: 100%;
}

.header__search--input {
  width: 100%;
  border: 0;
  height: 46px;
  border-radius: 3rem;
  padding: 0 80px 0 22px;
  font-size: 1.5rem;
  font-weight: 500;
}

.header__search--input:focus::-webkit-input-placeholder {
  color: #800020;
}

@media only screen and (min-width: 1200px) {
  .header__search--input {
    height: 52px;
    padding: 0 80px 0 22px;
  }
}

.header__search--button {
  position: absolute;
  top: 4px;
  right: 8px;
  height: 38px;
  border: 1px solid var(--border-color);
  padding: 0 20px;
  border-radius: 2rem;
  background: var(--bg-offwhite-color);
  color: var(--body-text-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.header__search--button:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-white-color);
}

@media only screen and (min-width: 1200px) {
  .header__search--button {
    padding: 0 22px;
    top: 5px;
    right: 9px;
    height: 42px;
  }
}

.predictive__search--title {
  margin-bottom: 20px;
  color: var(--primary-color);
}

@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);
  -webkit-box-shadow: 0 -4px 27px rgba(62, 70, 120, 0.16);
  box-shadow: 0 -4px 27px rgba(62, 70, 120, 0.16);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 10001;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
}

.predictive__search--box.active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.predictive__search--box__inner {
  padding: 20px 16px;
  text-align: center;
}

@media only screen and (min-width: 576px) {
  .predictive__search--box__inner {
    padding: 22px 50px;
  }
}

@media only screen and (min-width: 768px) {
  .predictive__search--box__inner {
    padding: 30px 80px;
  }
}

@media only screen and (min-width: 992px) {
  .predictive__search--box__inner {
    padding: 30px 150px;
  }
}

.predictive__search--form {
  width: 100%;
  position: relative;
}

.predictive__search--input {
  width: 100%;
  height: 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: #800020;
}

@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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: var(--bg-black-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);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

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

/*
    header bottom css here
*/
.header__bottom--inner {
  gap: 2.3rem;
}

@media only screen and (min-width: 1200px) {
  .header__bottom--inner {
    gap: 3rem;
  }
}

/*
    header account css here
*/
.header__account.header__sticky--block {
  display: none;
}

.header__account--wrapper {
  gap: 1.5rem;
}

@media only screen and (min-width: 992px) {
  .header__account--wrapper {
    gap: 2rem;
  }
}

.header__account--btn {
  position: relative;
}

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

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

.items__count {
  position: absolute;
  left: 7px;
  top: -12px;
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
  line-height: 2rem;
  background: var(--bg-black-color);
  text-align: center;
  border-radius: 50%;
  color: var(--text-white-color);
}


@media only screen and (min-width: 576px) {
  .items__count {
    left: 1.2rem;
    top: -1.1rem;
  }
}


/*
    main menu css here
*/
.header__menu.header__sticky--block {
  display: none !important;
}

.header__menu--wrapper {
  gap: 1.7rem;
}

@media only screen and (min-width: 1200px) {
  .header__menu--wrapper {
    gap: 3.5rem;
  }
}

.header__menu--items {
  position: relative;

}

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

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

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

.header__menu--link {
  font-size: 1.5rem;
  line-height: 3.5rem;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2rem;
}


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

.header__sub--menu {
  position: absolute;
  z-index: 9;
  top: 100%;
  left: 0;
  visibility: hidden;
  width: 230px;
  margin: 0;
  margin-top: 10px;
  padding: 20px;
  list-style: none;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  opacity: 0;
  background-color: var(--body-background-color);
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.header__sub--menu__link {
  font-size: 1.5rem;
  display: block;
  line-height: 2.2rem;
  padding: 8px 0;
  font-weight: 500;
  color: var(--primary-color);
}

.mega__menu--items {
  position: static;
}



.header__mega--menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-grow: 1;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 962px;
  margin: 0 auto;
}

.header__mega--menu__wrapper {
  position: absolute;
  z-index: 9;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 0;
  margin-top: 10px;
  padding: 20px;
  list-style: none;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  visibility: hidden;
  opacity: 0;
  background-color: var(--body-background-color);
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.menu-grow {
  display: flex;
}

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

@media only screen and (min-width: 1366px) {
  .header__mega--menu {
    max-width: 1260px;
  }
}

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

.header__mega--menu__li.banner__child {
  width: 24%;
}

.header__mega--menu__banner {
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}

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

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

.header__mega--sub__menu--title {
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 1rem 0;
  font-weight: 500;
  color: var(--primary-color);
}

/*
    End main menu css here
*/
.header__coupon--text {
  font-family: var(--jost-fonts);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-white-color);
  border-left: 1px solid #234283;
  padding: 1.5rem 0 1.5rem 2rem;
}

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

/*
    minicart css here
*/
.offCanvas__minicart {
  position: fixed;
  width: 380px;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  padding: 20px 20px 20px;
  background: var(--body-background-color);
  z-index: 1070;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  -webkit-transition: .4s;
  transition: .4s;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  overflow-y: auto;
  -webkit-box-shadow: 0 0 15px rgba(5, 0, 0, 0.15);
  box-shadow: 0 0 15px rgba(5, 0, 0, 0.15);
}

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

@media only screen and (max-width: 479px) {
  .offCanvas__minicart {
    width: 100vw;
    padding: 16px 16px 20px;
  }
}

.minicart__header {
  flex: 0 0 auto;
}

.minicart__empty--text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.minicart__product {
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow-y: auto;
  margin-bottom: 12px;
  padding-right: 5px;
  -webkit-overflow-scrolling: touch;
}

.minicart__product::-webkit-scrollbar {
  width: 4px;
}

.minicart__product::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.minicart__amount {
  flex: 0 0 auto;
}

.minicart__button {
  display: flex;
  gap: 10px;
}

.minicart__header--top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 15px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--border-color, #eee) !important;
}

.minicart__header--desc {
  font-size: 1.5rem;
  color: var(--foreground-sub-color);
}

.minicart__title {
  font-weight: 600 !important;
  font-size: 2.2rem !important;
  color: var(--primary-color) !important;
  margin: 0 !important;
}

.minicart__close--btn {
  padding: 4px 8px !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 2.4rem !important;
  line-height: 1 !important;
  color: var(--black-color) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

.minicart__close--btn:hover {
  color: var(--secondary-color) !important;
  background: rgba(0, 0, 0, 0.06) !important;
  transform: scale(1.1) !important;
}

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

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

.minicart__product {}

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

.minicart__product--remove {
  border: 0;
  padding: 0;
  background: transparent;
  font-size: 1.0rem;
  text-transform: capitalize;
  text-decoration: none !important;
  font-weight: 500;
  color: #777;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.minicart__product--remove:hover {
  color: #ED1D24;
  text-decoration: none !important;
}

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

.minicart__subtitle a {
  color: var(--primary-color);
}

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

.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: -webkit-box;
  display: -ms-flexbox;
  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__amount_list span {
  font-size: 1.5rem;
}

.minicart__conditions {
  padding: 20px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.minicart__conditions--input {
  vertical-align: middle;
  margin-right: 0.8rem;
}

.minicart__conditions--label {
  font-weight: 500;
  letter-spacing: 0.5px;
  font-size: 1.5rem;
  color: var(--primary-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: 4.4rem;
  height: 4rem;
  margin-right: 13px;
}

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

/*
    home five header css
*/
@media only screen and (max-width: 991px) {
  .header__search--box__style {
    display: none;
  }
}

.header__search--box__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.header__search--box__form input::-webkit-input-placeholder {
  color: var(--primary-color);
}

.header__search--box__form input::-moz-placeholder {
  color: var(--primary-color);
}

.header__search--box__form input:-ms-input-placeholder {
  color: var(--primary-color);
}

.header__search--box__form input:-moz-placeholder {
  color: var(--primary-color);
}

.header__search--box__button {
  border: 0;
  background: inherit;
  padding: 0;
}

.header__search--input__field {
  border: 0;
  background: var(--body-background-color);
  height: 3rem;
  color: var(--primary-color);
  padding: 0 1.5rem;
  width: 14rem;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
}

.menu__style--two .header__menu--link {
  color: var(--text-white-color);
}

.menu__style--two .header__menu--items:hover .header__menu--link {
  color: var(--primary-color) !important;
}

.header__sticky.sticky .header__menu--link {
  color: var(--primary-color);
}

.header__sticky.sticky .header__menu--items:hover .header__menu--link {
  color: var(--secondary-color) !important;
}

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

.main__header--six {
  padding: 8px 0;
}


.site__main {
  display: grid;
  gap: 2rem;
  padding-inline: 1rem;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

@media only screen and (min-width: 768px) {
  .site__main {
    gap: 4rem;
  }
}

.site__main>* {
  min-width: 0;
  box-sizing: border-box;
}

.site__main>* :last-child {
  margin-bottom: 0;
}



.menu__color--white .header__menu--link {
  color: var(--text-white-color);
}

.menu__color--white .header__menu--items:hover .header__menu--link {
  color: var(--foreground-color) !important;
}

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

.header__info--text {
  position: relative;
}

.header__info--text:last-child::before {
  display: none;
}

.header__info--text::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 1.5rem;
  background: var(--border-color);
  right: -14px;
  top: 50%;
  -webkit-transform: translatey(-50%) skew(-21deg);
  transform: translatey(-50%) skew(-21deg);
  opacity: .5;
}

.header__info--text a {
  color: var(--text-white-color);
}

.header__info--text a:hover {
  color: var(--secondary-color);
}

.header__top--link {
  gap: 2.5rem;
}

.header__top--right {
  gap: 2.5rem;
}

@media only screen and (max-width: 479px) {
  .header__top--right {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
  }
}

.header__link--menu {
  position: relative;
}

.header__link--menu::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 1.7rem;
  background: var(--body-background-color);
  left: -11px;
  top: 50%;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
  opacity: .6;
}

.header__link--menu__text {
  color: var(--text-white-color);
}

.header__link--menu__text:hover {
  color: var(--secondary-color);
}

.main__logo--img.sticky__block {
  display: none;
}

.header__sticky.sticky .header__account--btn.text-white {
  color: var(--primary-color) !important;
}

.header__sticky.sticky .header__account--btn.text-white:hover {
  color: var(--secondary-color) !important;
}

.header__sticky.sticky .main__logo--img.sticky__none {
  display: none;
}

.header__sticky.sticky .main__logo--img.sticky__block {
  display: block;
}

/* 
    3. Slider css 
*/
.hero__slider--items {
  background: url(home1-slider1-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  background-color: #DFF0F9;
  position: relative;
}

/* 
@media only screen and (min-width: 480px) {
  .hero__slider--items {
    padding: 40px 0 70px;
  }
}

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

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

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

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

@media only screen and (max-width: 767px) {
  .hero__slider--items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

/* .slider__maintitle {
  margin-bottom: 1.2rem;
} */

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

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

@media only screen and (min-width: 1200px) {
  .slider__maintitle {
    margin-bottom: 2.5rem;
  } */
/* } */

.slider__content {
  position: relative;
  z-index: 9;
}

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



.slider__desc {
  font-size: 1.4rem;
  line-height: 2.4rem;
}

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

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

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

.hero__slider--layer {
  position: absolute;
  right: 20px;
  bottom: 0;
}

@media only screen and (min-width: 1366px) and (max-width: 1599px) {
  .hero__slider--layer {
    max-width: 63rem;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .hero__slider--layer {
    max-width: 53.8rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__slider--layer {
    max-width: 49rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__slider--layer {
    max-width: 40rem;
  }
}

@media only screen and (max-width: 767px) {
  .hero__slider--layer {
    position: inherit;
    right: inherit;
    padding: 0 6rem;
  }
}

@media only screen and (max-width: 479px) {
  .hero__slider--layer {
    padding: 0 4rem;
  }
}

@media only screen and (max-width: 499px) {
  .hero__slider--layer {
    padding: 0 3rem;
  }
}

.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.2s;
  animation-delay: 0.2s;
}

.swiper-slide-active .slider__maintitle {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

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

.swiper-slide-active .slider__price {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.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);
  -webkit-transition: 1.4s;
  transition: 1.4s;
}

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

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

/*
    home two css
*/
.home__two--slider__items {
  background: url(../img/slider/home2-slider1-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  background-color: #DFF0F9;
}

.slider__items--inner {
  padding-top: 8rem;
}

@media only screen and (min-width: 575px) {
  .slider__items--inner {
    padding-top: 9rem;
  }
}

@media only screen and (min-width: 768px) {
  .slider__items--inner {
    padding-top: 8rem;
  }
}

@media only screen and (min-width: 992px) {
  .slider__items--inner {
    padding-top: 9rem;
  }
}

@media only screen and (min-width: 1200px) {
  .slider__items--inner {
    padding-top: 10rem;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__items--inner {
    padding-top: 14rem;
  }
}

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

.slider__items--inner .slider__layer--img {
  margin: 0 0 0 auto;
}

@media only screen and (max-width: 767px) {
  .slider__items--inner .slider__layer--img {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 767px) {
  .slider__items--inner>.row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .slider__layer--img.style2 {
    max-width: 47rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider__layer--img.style2 {
    max-width: 40rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider__layer--img.style2 {
    max-width: 32rem;
  }
}

@media only screen and (max-width: 767px) {
  .slider__layer--img.style2 {
    max-width: 400px;
  }
}

@media only screen and (max-width: 575px) {
  .slider__layer--img.style2 {
    max-width: 350px;
  }
}

@media only screen and (max-width: 399px) {
  .slider__layer--img.style2 {
    max-width: 90%;
  }
}

/*
    home three css
*/
.home__three--slider__items {
  background: url(../img/slider/home3-slider1-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  background-color: #DFF0F9;
  padding: 3.5rem 0 6.5rem;
}

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

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

@media only screen and (min-width: 1366px) {
  .home__three--slider__items {
    padding: 16rem 0;
  }
}

@media only screen and (min-width: 1600px) {
  .home__three--slider__items {
    padding: 24rem 0;
  }
}

@media only screen and (max-width: 767px) {
  .home__three--slider__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

@media only screen and (min-width: 1366px) and (max-width: 1599px) {
  .hero__slider--layer.style3 {
    max-width: 49rem;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .hero__slider--layer.style3 {
    max-width: 42rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__slider--layer.style3 {
    max-width: 40rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__slider--layer.style3 {
    max-width: 35rem;
  }
}

/*
    home five slider css
*/
.home__five--slider__items {
  background: url(../img/slider/home5-slider1-bg.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  padding: 3.5rem 0 6.5rem;
}

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

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

@media only screen and (min-width: 1366px) {
  .home__five--slider__items {
    padding: 17rem 0;
  }
}

@media only screen and (min-width: 1600px) {
  .home__five--slider__items {
    padding: 28rem 0;
  }
}

@media only screen and (max-width: 767px) {
  .home__five--slider__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

/* 
    6. Collection css
*/
.shop__collection--img {
  margin: 0 auto 1.2rem;
}

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

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

.shop__collection--link {
  display: block;
}

.shop__collection--title__style {
  position: absolute;
  bottom: 0;
  left: 2rem;
  right: 2rem;
  border: 1px solid var(--secondary-color);
  background: var(--body-background-color);
  height: 3.3rem;
  line-height: 3.1rem;
  border-radius: 0.5rem;
}

@media only screen and (min-width: 576px) {
  .shop__collection--title__style {
    height: 4rem;
    line-height: 4rem;
  }
}

@media only screen and (min-width: 992px) {
  .shop__collection--title__style {
    left: 2.5rem;
    right: 2.5rem;
    height: 4.5rem;
    line-height: 4.3rem;
  }
}

/* 
    5. Product card css 
*/
.product__tab--btn {
  margin-top: 2.5rem;
}

.tab__btn--wrapper {
  gap: 1rem;
  -ms-flex-wrap: wrap;
  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: 2rem;
  }
}

.tab__btn--link {
  font-weight: 500;
  font-family: var(--inter-fonts);
  text-transform: capitalize;
  color: var(--foreground-sub-color);
  border: 0;
  background: var(--bg-offwhite-color);
  font-size: 1.3rem;
  padding: 3px 18px;
  border-radius: 22px;
  line-height: 2.6rem;
}

@media only screen and (min-width: 992px) {
  .tab__btn--link {
    font-size: 1.4rem;
    padding: 3px 18px;
  }
}

@media only screen and (min-width: 1200px) {
  .tab__btn--link {
    font-size: 1.5rem;
    padding: 8px 25px;
  }
}

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

.tab__btn--link.active {
  background: var(--primary-color);
  color: var(--text-white-color);
}

.product__card {
  border-radius: 5px;
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  background: var(--body-background-color);
}

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

.product__card:hover .product__secondary--img {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1.02) translatex(-50%);
  transform: scale(1.02) translatex(-50%);
}

.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 {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.product__card:hover .product__add--to__card {
  opacity: 1;
  visibility: visible;
  bottom: 1.4rem;
}

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

.product__card--thumbnail__link {
  position: relative;
}

.product__card--thumbnail__img {
  margin: 0 auto;
  width: 100%;
}

.product__card--content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1.5rem 1.5rem;
}

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

@media only screen and (max-width: 479px) {
  .product__card--title {
    line-height: 2.2rem;
  }
}

.product__card--title a {
  color: var(--foreground-color);
}

.product__card--title a:hover {
  color: var(--primary-color);
}

.product__card--btn {
  margin: 0;
  background: var(--secondary-color);
  color: var(--text-white-color);
  padding: 0.8rem 1rem;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;


}


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

.product__card--btn svg {
  margin-left: 0.3rem;
}

.product__card--action {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  z-index: 9;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  top: 15px;
  right: 15px;
}

@media only screen and (max-width: 575px) {
  .product__card--action {
    opacity: 1;
    visibility: visible;
  }
}

.product__card--action__list {
  margin-bottom: 1rem;
}

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

.product__card--action__btn {
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  color: var(--primary-color);
  background: var(--bg-offwhite-color);
  border-radius: 50%;
  text-align: center;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
}

@media only screen and (max-width: 575px) {
  .product__card--action__btn {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.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.2rem;
    height: 3.2rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 992px) {
  .product__card--action__btn {
    width: 3.4rem;
    height: 3.4rem;
    line-height: 3.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .product__card--action__btn {
    width: 3.8rem;
    height: 3.8rem;
    line-height: 4rem;
  }
}

.product__card--rating {
  margin-bottom: 1.1rem;
}

.product__card--rating.mb-20 {
  margin-bottom: 2rem;
}

.product__add--to__card {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

@media only screen and (max-width: 575px) {
  .product__add--to__card {
    opacity: 1;
    visibility: visible;
    bottom: 1.5rem;
  }
}

.product__badge {
  width: auto;
  height: 2.2rem;
  font-size: 1.2rem;
  line-height: 2.2rem;
  padding: 0 8px;
  background: #ED1D24;
  color: var(--text-white-color);
  font-family: var(--inter-fonts);
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  text-align: center;
  border-radius: 0.4rem;
  font-weight: 600;
  z-index: 2;
}

.product__card--badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 4px 8px !important;
  line-height: 1.4 !important;
  height: auto !important;
  border-radius: 0.4rem !important;
  z-index: 2;
  text-transform: uppercase;
}

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

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

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

.old__price {
  color: var(--foreground-sub-color);
  margin-left: 0.6rem;
  line-height: 1.8rem;
  font-family: var(--inter-fonts);
  text-decoration: line-through;
  font-size: 1.4rem;
}

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

.rating {
  gap: 0.5rem;
}

.rating__icon {
  color: var(--yellow-color);
}

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





.product__swiper--column4.padding {
  padding: 0 0.5rem 1rem;
}

.product__section--border {
  padding: 6rem 1rem 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--primary-color);
}

@media only screen and (min-width: 768px) {
  .product__section--border {
    padding: 6.5rem 1rem 2.5rem;
  }
}

.product__section--countdown {
  position: absolute;
  top: -15px;
  left: 1.6rem;
  padding: 0.5rem 0.8rem;
  background: var(--primary-color);
  border-radius: 1rem;
  gap: 0.6rem;
}

@media only screen and (min-width: 480px) {
  .product__section--countdown {
    top: -20px;
    left: 2rem;
    padding: 0.8rem 1rem;
  }
}

@media only screen and (min-width: 768px) {
  .product__section--countdown {
    top: -28px;
    left: 10rem;
    padding: 1rem 2rem;
    gap: 1.2rem;
  }
}

.product__section--countdown .countdown__item {
  text-align: center;
}

.product__section--countdown .countdown__number {
  font-size: 1.6rem;
  line-height: 1.6rem;
  font-weight: 500;
  color: var(--text-white-color);
}

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

.product__section--countdown .countdown__text {
  font-size: 1.2rem;
  color: var(--text-white-color);
  text-transform: capitalize;
  line-height: 1.6rem;
}

@media only screen and (min-width: 768px) {
  .product__section--countdown .countdown__text {
    font-size: 1.4rem;
    line-height: 2rem;
  }
}

/* 
    14. Small Product css 
*/
.small__product--thumbnail {
  overflow: hidden;
  width: 125px;
}

@media only screen and (min-width: 1600px) {
  .small__product--thumbnail {
    width: 136px;
  }
}

.small__product--card {
  gap: 1.8rem;
  margin-bottom: 3rem;
}

@media only screen and (min-width: 768px) {
  .small__product--card {
    gap: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .small__product--card {
    gap: 2rem;
  }
}

.small__product--card:last-child {
  margin-bottom: 0;
}

.small__product--card:hover .small__product--thumbnail img {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}

.small__product--card .product__card--title {
  margin-bottom: 1.2rem;
}

@media only screen and (max-width: 1199px) {
  .small__product--card .product__card--title {
    margin-bottom: 0.8rem;
    font-size: 1.5rem;
    line-height: 2.4rem;
  }
}

.small__product--card .product__card--rating {
  margin-bottom: 0.8rem;
}

@media only screen and (min-width: 1200px) {
  .small__product--card .product__card--rating {
    margin-bottom: 1.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .small__product--step.margin__left {
    margin-left: 3rem;
  }
}

/* 
    15. Single Product css 
*/
.deal__product--section {
  background: url(../img/banner/banner-bg1.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  background-color: #EDF2FF;
}

.single__product--wrapper {
  background: var(--body-background-color);
  border: 1px solid var(--secondary-color);
  padding: 1.8rem;
  border-radius: 5px;
  gap: 3rem;
}

@media only screen and (min-width: 992px) {
  .single__product--wrapper {
    gap: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .single__product--wrapper {
    padding: 2.2rem;
  }
}

@media only screen and (max-width: 991px) {
  .single__product--wrapper {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

.single__product--wrapper:hover .single__product--thumbnail__img {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}

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

.single__product--left {
  width: 100%;
  background: var(--bg-gray-color);
  padding: 2rem 1.5rem;
}

@media only screen and (min-width: 992px) {
  .single__product--left {
    width: 270px;
  }
}

@media only screen and (min-width: 1200px) {
  .single__product--left {
    width: 362px;
  }
}

@media only screen and (max-width: 991px) {
  .single__product--left {
    margin: 0 auto;
  }
}

.single__product--right {
  width: 100%;
}

@media only screen and (min-width: 992px) {
  .single__product--right {
    width: calc(100% - 295px);
  }
}

@media only screen and (min-width: 1200px) {
  .single__product--right {
    width: calc(100% - 389px);
  }
}

.single__product--inner {
  gap: 2rem;
}

@media only screen and (min-width: 768px) {
  .single__product--inner {
    gap: 3rem;
  }
}

@media only screen and (max-width: 575px) {
  .single__product--inner {
    gap: 2.5rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

.single__product--thumbnail {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.single__product--action {
  gap: 1rem;
  margin-bottom: 2rem;
}

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

.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--content {
  margin-bottom: 2.2rem;
}

@media only screen and (min-width: 992px) {
  .single__product--content {
    margin-bottom: 3rem;
  }
}

.single__product--title {
  margin: 1.5rem 0;
  font-size: 2rem;
  line-height: 2.4rem;
}

@media only screen and (min-width: 576px) {
  .single__product--title {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 992px) {
  .single__product--title {
    font-size: 2.5rem;
    line-height: 2.8rem;
  }
}

.single__product--title a {
  color: var(--primary-color);
}

.single__product--title a:hover {
  color: var(--secondary-color);
}

.single__product--countdown {
  gap: 1.2rem;
  padding: 3rem 0 1rem;
}

@media only screen and (min-width: 768px) {
  .single__product--countdown {
    gap: 1.5rem;
  }
}

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

.single__product--countdown .countdown__item:hover .countdown__number {
  background: var(--primary-color);
  color: var(--text-white-color);
}

.single__product--countdown .countdown__number {
  width: 4.5rem;
  height: 3.7rem;
  line-height: 3.7rem;
  background: var(--body-background-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;
}

.single__product--content__badge {
  background: var(--primary-color);
  color: var(--text-white-color);
  font-size: 1.2rem;
  line-height: 1.8rem;
  padding: 2px 10px;
  border-radius: 13px;
  margin-left: 12px;
}

.sigle__product--badge {
  width: 6rem;
  height: 6rem;
  line-height: 1.8rem;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 500;
}

.sigle__product--badge::before {
  position: absolute;
  content: "";
  left: 4px;
  right: 4px;
  top: 4px;
  bottom: 4px;
  border: 1px dashed #fff;
  border-radius: 50%;
}

.product__sold {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  padding-bottom: 2.3rem;
  margin: 1.5rem 0 2rem;
}

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

.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(--primary-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.2rem 0.5rem;
}

.single__product--nav__items {
  border: 1px solid var(--border-color);
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 5px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.single__product--nav__items:hover {
  border-color: var(--primary-color);
}

.single__product--nav__thumbnail {
  margin: 0 auto;
}

.single__product--nav .swiper-slide-active .single__product--nav__items {
  border-color: var(--primary-color);
}

/* 
    4. Banner css 
*/
@media only screen and (max-width: 767px) {
  .video__banner--section.section--padding {
    padding-top: 0;
  }
}

@media only screen and (min-width: 768px) {
  .video__banner--section__thumbnail {
    height: 30rem;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

@media only screen and (min-width: 992px) {
  .video__banner--section__thumbnail {
    height: 41rem;
  }
}

@media only screen and (min-width: 1200px) {
  .video__banner--section__thumbnail {
    height: 51.5rem;
  }
}

@media only screen and (min-width: 1366px) {
  .video__banner--section__thumbnail {
    height: 55.5rem;
  }
}

.video__banner--wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

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

.video__banner--inner {
  gap: 3rem;
}

@media only screen and (min-width: 992px) {
  .video__banner--inner {
    gap: 5rem;
  }
}

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

@media only screen and (min-width: 768px) {
  .video__banner--box {
    width: 55%;
  }
}

@media only screen and (min-width: 1200px) {
  .video__banner--box {
    width: 60%;
  }
}

@media only screen and (min-width: 768px) {
  .video__banner--content {
    width: 40%;
    padding-bottom: 5rem;
  }
}

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

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

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

.video__banner--content__title {
  font-size: 2rem;
  line-height: 2.6rem;
  margin-bottom: 1.3rem;
}

@media only screen and (min-width: 576px) {
  .video__banner--content__title {
    font-size: 2.2rem;
    line-height: 2.8rem;
    margin-bottom: 1.3rem;
  }
}

@media only screen and (min-width: 768px) {
  .video__banner--content__title {
    line-height: 3rem;
  }
}

@media only screen and (min-width: 992px) {
  .video__banner--content__title {
    font-size: 2.5rem;
    line-height: 3.5rem;
    margin-bottom: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .video__banner--content__title {
    font-size: 3rem;
    line-height: 4rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 1366px) {
  .video__banner--content__title {
    font-size: 3.5rem;
    line-height: 4.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .video__banner--content__title {
    font-size: 4rem;
    line-height: 5.2rem;
  }
}

.video__banner--content__desc {
  font-size: 1.6rem;
  line-height: 2.6rem;
  margin-bottom: 1.5rem;
}

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

@media only screen and (min-width: 992px) {
  .video__banner--content__desc {
    font-size: 1.7rem;
    line-height: 2.8rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .video__banner--content__desc {
    font-size: 1.8rem;
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 1366px) {
  .video__banner--content__desc {
    font-size: 2rem;
    margin-bottom: 3.2rem;
  }
}

/*
    banner fullwidth css
*/
.banner__fullwidth--bg__thumbnail {
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .banner__fullwidth--bg__thumbnail {
    height: 390px;
  }
}

@media only screen and (min-width: 992px) {
  .banner__fullwidth--bg__thumbnail {
    height: 460px;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__fullwidth--bg__thumbnail {
    height: 560px;
  }
}

@media only screen and (min-width: 1366px) {
  .banner__fullwidth--bg__thumbnail {
    height: 633px;
  }
}

.banner__fullwidth--inner {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media only screen and (max-width: 767px) {
  .banner__fullwidth--inner {
    position: inherit;
    top: inherit;
    -webkit-transform: inherit;
    transform: inherit;
    margin-top: 3rem;
  }
}

@media only screen and (min-width: 768px) {
  .banner__fullwidth--content {
    padding-left: 1rem;
  }
}

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

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

@media only screen and (max-width: 767px) {
  .banner__fullwidth--content {
    text-align: center;
    margin-top: 3rem;
  }
}

.banner__fullwidth--content__subtitle {
  font-family: var(--primary-color);
  font-weight: 400;
  margin-bottom: 1rem;
}

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

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

@media only screen and (max-width: 767px) {
  .banner__fullwidth--content__subtitle {
    line-height: 2rem;
  }
}

.banner__fullwidth--content__subtitle.mb-25 {
  margin-bottom: 2.5rem;
}

.banner__fullwidth--content__title {
  font-size: 2.2rem;
  line-height: 2.8rem;
  margin-bottom: 1.2rem;
}

@media only screen and (min-width: 576px) {
  .banner__fullwidth--content__title {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 768px) {
  .banner__fullwidth--content__title {
    font-size: 3rem;
    line-height: 3.5rem;
    margin-bottom: 1.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__fullwidth--content__title {
    font-size: 3.5rem;
    line-height: 4rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__fullwidth--content__title {
    font-size: 4rem;
    line-height: 4.5rem;
    margin-bottom: 2rem;
  }
}

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

.banner__fullwidth--content__desc {
  margin-bottom: 1.6rem;
}

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

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

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

.banner__fullwidth--content.padding__right {
  padding-left: 0;
}

@media only screen and (min-width: 768px) {
  .banner__fullwidth--content.padding__right {
    padding-right: 1rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__fullwidth--content.padding__right {
    padding-right: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__fullwidth--content.padding__right {
    padding-right: 10rem;
  }
}

/*
    banner box css
*/
.banner__box {
  overflow: hidden;
}

.banner__box:hover .banner__box--thumbnail {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}

.banner__box--thumbnail {
  width: 100%;
}

.banner__box--content {
  position: absolute;
  top: 50%;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
  left: 3rem;
}

@media only screen and (max-width: 479px) {
  .banner__box--content {
    left: 2rem;
    right: 1rem;
  }
}

.banner__box--content__title {
  font-weight: 400;
  margin-bottom: 1rem;
  color: var(--bg-black-color);
}

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

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

.banner__box--content__desc {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

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

.banner__box--content__btn.style2 {
  border: 1px solid var(--secondary-color);
  background: inherit;
  color: var(--secondary-color);
  line-height: 4rem;
}

@media only screen and (min-width: 768px) {
  .banner__box--content__btn.style2 {
    line-height: 4.4rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__box--content__btn.style2 {
    line-height: 4.8rem;
  }
}

.banner__box--content__btn.style2:hover {
  border-color: var(--hover-color);
  color: var(--hover-color);
}

/*
    advice banner css
*/
.advice__banner--thumbnail.height_225 {
  height: 22rem;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .advice__banner--thumbnail.height_225 {
    height: 20rem;
  }
}

@media only screen and (min-width: 992px) {
  .advice__banner--thumbnail.height_225 {
    height: 22.5rem;
  }
}

.advice__banner--content {
  position: absolute;
  top: 50%;
  left: 4rem;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
  z-index: 1;
}

.advice__banner--content.banner__flex {
  gap: 1.5rem;
}

@media only screen and (min-width: 576px) {
  .advice__banner--content.banner__flex {
    gap: 2rem;
  }
}

@media only screen and (min-width: 768px) {
  .advice__banner--content.banner__flex {
    gap: 4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .advice__banner--content.banner__flex {
    gap: 6rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .advice__banner--content.banner__flex {
    width: 61%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .advice__banner--content.banner__flex {
    width: 69%;
    gap: 3rem;
  }
}

@media only screen and (max-width: 767px) {
  .advice__banner--content.banner__flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }
}

@media only screen and (max-width: 991px) {
  .advice__banner--content {
    left: 3rem;
    right: 3rem;
  }
}

@media only screen and (max-width: 767px) {
  .advice__banner--content {
    left: 1.5rem;
    right: 1.5rem;
  }
}

.advice__banner--title {
  margin-bottom: 1.2rem;
}

.advice__banner--btn {
  background: var(--primary-color);
  min-width: 130px;
}

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

.advice__banner--layer__img {
  position: absolute;
  top: 0;
  right: 1.2rem;
}

@media only screen and (min-width: 1200px) {
  .advice__banner--layer__img {
    right: 3.2rem;
  }
}

@media only screen and (max-width: 991px) {
  .advice__banner--layer__img {
    max-width: 18rem;
    top: 50%;
    -webkit-transform: translatey(-50%);
    transform: translatey(-50%);
  }
}

@media only screen and (max-width: 767px) {
  .advice__banner--layer__img {
    max-width: 9rem;
    top: 72%;
  }
}

@media only screen and (max-width: 479px) {
  .advice__banner--layer__img {
    max-width: 6rem;
    top: 77%;
  }
}

/*
    home two css
*/
.video__banner--box.width_100 {
  width: 100%;
}

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

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

@media only screen and (max-width: 767px) {
  .video__box--content {
    margin-top: 3rem;
    text-align: center;
  }
}

.video__box--content__title {
  margin-bottom: 1.5rem;
}

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

.video__box--content__desc {
  font-size: 1.5rem;
  margin-bottom: 1.7rem;
}

@media only screen and (min-width: 768px) {
  .video__box--content__desc {
    font-size: 1.6rem;
    margin-bottom: 2.2rem;
  }
}

/*
    grid banner css
*/
.grid__banner--title {
  margin-bottom: 1rem;
}

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

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

.grid__banner--desc {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  color: var(--primary-color);
}

@media only screen and (min-width: 768px) {
  .grid__banner--desc {
    margin-bottom: 2rem;
    font-size: 1.6rem;
  }
}


@media only screen and (min-width: 992px) {
  .grid__banner--desc {
    margin-bottom: 2.5rem;
    font-size: 1.7rem;
  }
}

@media only screen and (min-width: 1200px) {
  .grid__banner--desc {
    margin-bottom: 3.5rem;
    font-size: 1.9rem;
  }
}

@media only screen and (max-width: 575px) {
  .grid__banner--content {
    padding-top: 2.3rem;
    text-align: center;
  }
}

@media only screen and (min-width: 1200px) {
  .grid__banner--content.margin__left {
    margin-left: 4rem;
  }
}

/*
    fullwidth banner box css
*/
.fullwidth__banner--box__content {
  position: absolute;
  top: 50%;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
}

.fullwidth__banner--box__content.left {
  left: 2rem;
}

@media only screen and (min-width: 768px) {
  .fullwidth__banner--box__content.left {
    left: 3rem;
  }
}

@media only screen and (min-width: 992px) {
  .fullwidth__banner--box__content.left {
    left: 15%;
  }
}

@media only screen and (min-width: 1200px) {
  .fullwidth__banner--box__content.left {
    left: 25%;
  }
}

@media only screen and (min-width: 1600px) {
  .fullwidth__banner--box__content.left {
    left: 35%;
  }
}

.fullwidth__banner--box__content.right {
  left: 2rem;
}

@media only screen and (min-width: 768px) {
  .fullwidth__banner--box__content.right {
    left: 3rem;
  }
}

@media only screen and (min-width: 992px) {
  .fullwidth__banner--box__content.right {
    left: 10%;
  }
}

@media only screen and (min-width: 1200px) {
  .fullwidth__banner--box__content.right {
    left: 12%;
  }
}

@media only screen and (min-width: 1600px) {
  .fullwidth__banner--box__content.right {
    left: 16%;
  }
}

.fullwidth__banner--box__subtitle {
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

@media only screen and (min-width: 768px) {
  .fullwidth__banner--box__subtitle {
    font-size: 1.6rem;
    line-height: 2rem;
    margin-bottom: 1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .fullwidth__banner--box__subtitle {
    font-size: 1.7rem;
  }
}

.fullwidth__banner--box__title {
  font-size: 1.8rem;
  line-height: 2.5rem;
  margin-bottom: 1.2rem;
  color: var(--foreground-color);
}

@media only screen and (min-width: 768px) {
  .fullwidth__banner--box__title {
    font-size: 2.2rem;
    line-height: 3rem;
    margin-bottom: 1.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .fullwidth__banner--box__title {
    font-size: 2.5rem;
    line-height: 3.5rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .fullwidth__banner--box__title {
    font-size: 3.5rem;
    line-height: 4.5rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1366px) {
  .fullwidth__banner--box__title {
    font-size: 4rem;
    line-height: 5rem;
  }
}

/*
    sidebar banner css
*/
.sidebar__banner--content {
  position: absolute;
  bottom: 3rem;
  left: 2rem;
  right: 2rem;
}

@media only screen and (min-width: 1200px) {
  .sidebar__banner--content {
    bottom: 4rem;
  }
}

.sidebar__banner--title {
  color: var(--foreground-color);
  margin-bottom: 1.2rem;
}

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

.sidebar__banner--subtitle {
  color: var(--primary-color);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

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

.sidebar__banner--btn {
  text-decoration: underline;
  line-height: 2rem;
  font-weight: 500;
}

.advice__banner--content.style2 {
  left: 3rem;
  right: 3rem;
  text-align: center;
}

.advice__banner--thumbnail.height_260 {
  height: 26rem;
  -o-object-fit: cover;
  object-fit: cover;
}

/*
    home four banner vss
*/
.banner__box--content__style {
  position: absolute;
  left: 2.5rem;
}

@media only screen and (min-width: 768px) {
  .banner__box--content__style {
    left: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__box--content__style {
    left: 4rem;
  }
}

.banner__box--content__style.top {
  top: 3rem;
}

@media only screen and (min-width: 1200px) {
  .banner__box--content__style.top {
    top: 4rem;
  }
}

.banner__box--content__style.middle {
  top: 50%;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
}

.banner__box--content__style--subtitle {
  font-size: 1.6rem;
  line-height: 1.8rem;
  color: var(--primary-color);
  font-weight: 400;
  margin-bottom: 0.8rem;
}

@media only screen and (min-width: 992px) {
  .banner__box--content__style--subtitle {
    margin-bottom: 1rem;
  }
}

.banner__box--content__style--title {
  line-height: 3rem;
  margin-bottom: 1.6rem;
  color: var(--body-text-color);
}

@media only screen and (min-width: 768px) {
  .banner__box--content__style--title {
    line-height: 3.2rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__box--content__style--title {
    line-height: 3.5rem;
    margin-bottom: 2.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .banner__box--content__style--title {
    line-height: 4rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 768px) {
  .banner__box--content__style--btn {
    line-height: 4.2rem;
    height: 3.8rem;
    padding: 0 1.8rem;
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__box--content__style--btn {
    line-height: 4.4rem;
    height: 4rem;
    padding: 0 2.2rem;
  }
}

.banner__box--content__style.right__side {
  left: auto;
  right: 4rem;
}

.grid__banner--product {
  position: relative;
  margin: -215px 3rem 0 auto;
}

@media only screen and (min-width: 992px) {
  .grid__banner--product {
    margin: -255px 4rem 0 auto;
  }
}

@media only screen and (min-width: 1200px) {
  .grid__banner--product {
    margin: -286px 8rem 0 auto;
  }
}

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

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .grid__banner--product.width__295 {
    width: 240px;
  }
}

.grid__banner--product .product__card--action {
  opacity: 1;
  visibility: visible;
  top: 20px;
  right: 20px;
}

.grid__banner--product .product__card--action__btn {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.grid__banner--product .product__add--to__card {
  opacity: 1;
  visibility: visible;
  bottom: 18px;
}

.grid__banner--product:hover .product__add--to__card {
  bottom: 18px;
}

@media only screen and (max-width: 575px) {
  .grid__banner--left__sidebar {
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 768px) {
  .grid__banner--content__style2 {
    margin: 0 0 0 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .grid__banner--content__style2 {
    margin: 0 0 0 5rem;
  }
}

@media only screen and (max-width: 767px) {
  .banner__fullwidth--thumbnail img {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 767px) {
  .banner_sm_height-250 {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 479px) {
  .banner_sm_height-250 {
    height: 25rem;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

/*
    collection banner  css
*/
.collection__banner--thumbnail.height_583 {
  height: 380px;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 576px) {
  .collection__banner--thumbnail.height_583 {
    height: 340px;
  }
}

@media only screen and (min-width: 768px) {
  .collection__banner--thumbnail.height_583 {
    height: 360px;
  }
}

@media only screen and (min-width: 1200px) {
  .collection__banner--thumbnail.height_583 {
    height: 460px;
  }
}

@media only screen and (min-width: 1366px) {
  .collection__banner--thumbnail.height_583 {
    height: 583px;
  }
}

.collection__banner--content {
  position: absolute;
  top: 50%;
  left: 3rem;
  right: 3rem;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
}

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

.collection__banner--subtitle.mb-20 {
  margin-bottom: 1.2rem;
}

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

@media only screen and (min-width: 1200px) {
  .collection__banner--subtitle.mb-20 {
    margin-bottom: 2rem;
  }
}

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

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

.collection__banner--title.mb-30 {
  margin-bottom: 2rem;
}

@media only screen and (min-width: 768px) {
  .collection__banner--title.mb-30 {
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .collection__banner--title.mb-30 {
    margin-bottom: 3rem;
  }
}

.collection__banner--desc {
  font-size: 1.5rem;
  line-height: 2.8rem;
}

@media only screen and (min-width: 768px) {
  .collection__banner--desc {
    font-size: 1.6rem;
    line-height: 3rem;
  }
}

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

.banner_col_left_47 {
  width: 47.2%;
}

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

.banner_col_right_52 {
  width: 52.8%;
}

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

/*
    home six banner css
*/
@media only screen and (min-width: 576px) and (max-width: 991px) {
  .banner__box--right__sidebar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2.5rem;
  }
}

@media only screen and (min-width: 576px) and (max-width: 991px) {
  .banner__box--right__sidebar .banner__box.mb-30 {
    margin-bottom: 0;
  }
}

.banner__box--content__style.style__right {
  left: auto;
  right: 2rem;
}

@media only screen and (min-width: 480px) {
  .banner__box--content__style.style__right {
    right: 3rem;
  }
}

.banner__box--content__style6--title {
  font-size: 1.8rem;
  line-height: 2.4rem;
  margin-bottom: 1.2rem;
}

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

@media only screen and (max-width: 479px) {
  .banner__box--thumbnail.height_sm_u_220 {
    height: 22rem;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

/*
    countdown banner css
*/
.countdown__banner--bg {
  background: rgba(250, 238, 238, 0.9);
}

@media only screen and (max-width: 767px) {
  .countdown__content {
    padding-top: 2.5rem;
  }
}

.countdown__content--title {
  font-size: 2.5rem;
  line-height: 3rem;
  margin-bottom: 1rem;
}

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

@media only screen and (min-width: 768px) {
  .countdown__content--title {
    font-size: 3.5rem;
    line-height: 4rem;
  }
}

@media only screen and (min-width: 992px) {
  .countdown__content--title {
    font-size: 4rem;
    line-height: 4.5rem;
    margin-bottom: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .countdown__content--title {
    font-size: 4.5rem;
    line-height: 5rem;
  }
}

.countdown__content--subtitle {
  font-size: 1.7rem;
  line-height: 2.2rem;
  color: var(--primary-color);
  font-weight: 500;
  margin-bottom: 1.6rem;
}

@media only screen and (min-width: 576px) {
  .countdown__content--subtitle {
    font-size: 1.8rem;
    line-height: 2.5rem;
  }
}

@media only screen and (min-width: 768px) {
  .countdown__content--subtitle {
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .countdown__content--subtitle {
    font-size: 2.5rem;
    line-height: 3rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .countdown__content--subtitle {
    font-size: 2.8rem;
    line-height: 3.3rem;
    margin-bottom: 2.5rem;
  }
}

.banner__price {
  margin-bottom: 2rem;
}

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

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

.banner__price .current__price {
  font-size: 2rem;
  line-height: 2.2rem;
  color: var(--primary-color);
}

@media only screen and (min-width: 576px) {
  .banner__price .current__price {
    font-size: 2.2rem;
    line-height: 2.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__price .current__price {
    font-size: 2.5rem;
    line-height: 2.8rem;
  }
}

.banner__price .old__price {
  font-size: 1.8rem;
  line-height: 2.2rem;
  margin-left: 1rem;
}

@media only screen and (min-width: 576px) {
  .banner__price .old__price {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .banner__price .old__price {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}

.countdown__banner--style {
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media only screen and (min-width: 992px) {
  .countdown__banner--style {
    gap: 2rem;
    margin-bottom: 3rem;
  }
}

.countdown__banner--style .countdown__item {
  text-align: center;
}

.countdown__banner--style .countdown__number {
  width: 4.5rem;
  height: 4.5rem;
  line-height: 4.5rem;
  font-size: 1.6rem;
  background: var(--secondary-color);
  color: var(--text-white-color);
  border-radius: 50%;
  margin-bottom: 0.6rem;
}

@media only screen and (min-width: 576px) {
  .countdown__banner--style .countdown__number {
    width: 5rem;
    height: 5rem;
    line-height: 5rem;
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
  }
}

.countdown__banner--style .countdown__text {
  font-size: 1.4rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--primary-color);
  line-height: 2rem;
}

@media only screen and (min-width: 576px) {
  .countdown__banner--style .countdown__text {
    font-size: 1.5rem;
  }
}

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

.grid__banner__lookbook {
  top: 18%;
  left: 44%;
}

@media only screen and (min-width: 768px) {
  .grid__banner__lookbook {
    left: 40%;
  }
}

/* 
    8. Blog css
*/
.blog__section--bg {
  background: #FDFAF6;
}

.blog__card {
  -webkit-transition: var(--transition);
  transition: var(--transition);
  position: relative;
}

.blog__card:hover .blog__card--thumbnail__img {
  -webkit-transform: scale(1.06) rotate(2deg);
  transform: scale(1.06) rotate(2deg);
}

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

.blog__card--thumbnail {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

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

.blog__card--thumbnail__link {
  display: block;
  width: 100%;
}

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

.blog__card--title {
  font-size: 1.7rem;
  line-height: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.blog__card--title a {
  color: var(--body-text-color);
}

.blog__card--title a:hover {
  color: var(--secondary-color);
}

@media only screen and (min-width: 480px) {
  .blog__card--title {
    font-size: 1.7rem;
    line-height: 2.6rem;
  }
}

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

@media only screen and (min-width: 1366px) {
  .blog__card--title {
    font-size: 2rem;
    line-height: 3rem;
  }
}

.blog__card--link {
  color: var(--primary-color);
  line-height: 2rem;
  text-decoration: underline;
}

.blog__card--link:hover {
  text-decoration: underline;
}

.blog__card--content {
  padding: 1.5rem 0 0;
}

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

.blog__meta {
  gap: 1.5rem;
  margin-bottom: 0.4rem;
}

@media only screen and (min-width: 768px) {
  .blog__meta {
    gap: 2rem;
    margin-bottom: 0.6rem;
  }
}

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

.blog__meta--text {
  color: var(--primary-color);
  line-height: 2.2rem;
  font-size: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .blog__meta--text {
    line-height: 2.4rem;
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .blog__sticky--content .blog__meta--text {
    font-size: 1.7rem;
  }
}

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

@media only screen and (min-width: 1200px) {
  .blog__sticky--content .blog__card--title {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
}

@media only screen and (min-width: 576px) and (max-width: 991px) {
  .blog__card--sidebar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 3rem;
  }
}

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

/* 
    9. Testimonial css
*/
.testimonial__bg {
  background: url(banner-fullwidth3.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

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

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

.testimonial__section--inner {
  padding-bottom: 5rem;
}

.testimonial__items {
  padding: 1.5rem;
  background: var(--body-background-color);
  border-radius: 5px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  position: relative;
}

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

.testimonial__desc {
  font-size: 1.4rem;
  line-height: 2.5rem;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  margin-bottom: 1rem;
}

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

.testimonial__author {
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 992px) {
  .testimonial__author {
    gap: 1.5rem;
  }
}

.testimonial__author__thumbnail {
  min-width: 7rem;
}

.testimonial__author--title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  margin-bottom: 0.2rem;
}

.testimonial__author--subtitle {
  font-size: 1.2rem;
  line-height: 2rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

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

.testimonial__vector--icon {
  margin: 0 1rem 0 auto;
}

.testimonial__pagination {
  bottom: 0 !important;
}

.testimonial__pagination .swiper-pagination-bullet {
  border: 1px solid var(--secondary-color);
}

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

/*
    testimonial box css
*/
.testimonial__bg--three {
  background: url(../img/banner/banner-fullwidth6.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

.testimonial__bg--three.section--padding {
  padding-bottom: 5rem;
}

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

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

.testimonial__box--thumbnail {
  margin-bottom: 2rem;
}

.testimonial__box--thumbnail img {
  margin: 0 auto;
}

.testimonial__box--desc {
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .testimonial__box--desc {
    font-size: 1.5rem;
    line-height: 2.8rem;
    margin-bottom: 1.6rem;
  }
}

@media only screen and (min-width: 992px) {
  .testimonial__box--desc {
    font-size: 1.6rem;
    line-height: 3.2rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .testimonial__box--desc {
    padding: 0 10rem;
  }
}

.testimonial__box--author__title {
  font-size: 1.8rem;
  line-height: 2.2rem;
  margin-bottom: 0.6rem;
}

@media only screen and (min-width: 768px) {
  .testimonial__box--author__title {
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 1rem;
  }
}

.testimonial__box--author__subtitle {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

/* 
    7. Feature css
*/
.feature__inner {
  gap: 3rem;
}

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

.feature__items {
  gap: 1.5rem;
}

@media only screen and (min-width: 1200px) {
  .feature__items {
    gap: 1.8rem;
  }
}

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

.feature__content--desc {
  font-size: 1.4rem;
  color: var(--primary-color);
}

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

/* 
    21. Newsletter css 
*/
@media only screen and (max-width: 575px) {
  .newsletter__subscribe {
    width: 100%;
  }
}

.newsletter__subscribe--form {
  width: 100%;
  position: relative;
}

.newsletter__subscribe--form input::-webkit-input-placeholder {
  color: var(--primary-color);
}

.newsletter__subscribe--form input::-moz-placeholder {
  color: var(--primary-color);
}

.newsletter__subscribe--form input:-ms-input-placeholder {
  color: var(--primary-color);
}

.newsletter__subscribe--form input:-moz-placeholder {
  color: var(--primary-color);
}

.newsletter__subscribe--input {
  width: 100%;
  height: 4.5rem;
  border: 1px solid transparent;
  color: var(--primary-color);
  background: var(--body-background-color);
  font-weight: 500;
  border-radius: 5px;
  padding: 0 105px 0 1.5rem;
  font-size: 1.4rem;
}

.newsletter__subscribe--input:focus {
  border-color: var(--secondary-color);
  color: var(--primary-color);
}

@media only screen and (min-width: 480px) {
  .newsletter__subscribe--input {
    height: 4.8rem;
  }
}

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

@media only screen and (min-width: 1366px) {
  .newsletter__subscribe--input {
    height: 5.5rem;
  }
}

.newsletter__subscribe--button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border: 0;
  background: var(--secondary-color);
  padding: 0 1rem;
  font-size: 1.4rem;
  text-transform: capitalize;
  font-weight: 500;
  color: var(--text-white-color);
  border-radius: 5px;
}

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

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

@media only screen and (min-width: 992px) {
  .newsletter__subscribe--button {
    padding: 0 1.8rem;
    font-size: 1.5rem;
  }
}

.newsletter__subscribe--input.style2 {
  background: var(--body-background-color);
  font-size: 1.4rem;
  font-weight: 500;
  padding: 0 114px 0 2rem;
  height: 5rem;
}

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

.newsletter__subscribe--button.style2 {
  background: var(--primary-color);
}

.newsletter__subscribe--button.style2:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}

.footer__newsletter {
  margin-top: 1.5rem;
}

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

/*
    home three newsletter css
*/
.newsletter__bg {
  background: var(--secondary-color);
  border-radius: 1rem;
}

.newsletter__inner {
  gap: 2.5rem;
  padding: 3rem 2rem;
}

@media only screen and (min-width: 576px) {
  .newsletter__inner {
    padding: 3rem;
  }
}

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

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

.newsletter__content {
  gap: 2rem;
}

@media only screen and (max-width: 575px) {
  .newsletter__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }
}

.newsletter__content--title {
  font-size: 1.8rem;
  line-height: 2rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
}

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

@media only screen and (min-width: 992px) {
  .newsletter__content--title {
    font-size: 2.2rem;
    line-height: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .newsletter__content--title {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}

.newsletter__content--desc {
  font-size: 1.5rem;
  font-weight: 300;
}

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

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

@media only screen and (max-width: 767px) {
  .newsletter__email--icon img {
    max-width: 4.5rem;
  }
}

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

.newsletter__form {
  position: relative;
  width: 100%;
}

@media only screen and (min-width: 576px) {
  .newsletter__form {
    width: 45rem;
  }
}

@media only screen and (min-width: 1200px) {
  .newsletter__form {
    width: 50rem;
  }
}

.newsletter__form--button {
  position: absolute;
  right: 0;
  top: 0;
  background: var(--primary-color);
  color: var(--text-white-color);
  border: 0;
  padding: 0 3rem;
  height: 100%;
  border-radius: 0 1rem 1rem 0;
}

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

.newsletter__form--button:hover {
  background: var(--bg-light-dark-color);
}

.newsletter__form input::-webkit-input-placeholder {
  color: var(--text-white-color);
}

.newsletter__form input::-moz-placeholder {
  color: var(--text-white-color);
}

.newsletter__form input:-ms-input-placeholder {
  color: var(--text-white-color);
}

.newsletter__form input:-moz-placeholder {
  color: var(--text-white-color);
}

.newsletter__input--field {
  width: 100%;
  height: 4.5rem;
  border: 0;
  background: #D3967C;
  color: var(--text-white-color);
  padding: 0 11rem 0 2rem;
  border-radius: 1rem;
}

@media only screen and (min-width: 575px) {
  .newsletter__input--field {
    padding: 0 14rem 0 2rem;
  }
}

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

/*
    home six newsletter css
*/
.newsletter__inner--style2 {
  padding: 5rem 0;
}

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

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

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

.newsletter__style2--form {
  width: 35rem;
  margin: 0 auto;
}

@media only screen and (max-width: 479px) {
  .newsletter__style2--form {
    width: 90%;
  }
}

.newsletter__style2--form input::-webkit-input-placeholder {
  color: var(--primary-color);
}

.newsletter__style2--form input::-moz-placeholder {
  color: var(--primary-color);
}

.newsletter__style2--form input:-ms-input-placeholder {
  color: var(--primary-color);
}

.newsletter__style2--form input:-moz-placeholder {
  color: var(--primary-color);
}

.newsletter__style2--input__field {
  width: 100%;
  height: 4.5rem;
  border: 0;
  background: var(--body-background-color);
  padding: 0 6.5rem 0 1.5rem;
  border-radius: 5px;
  color: var(--primary-color);
}

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

.newsletter__style2--button {
  position: absolute;
  right: 0;
  top: 0;
  border: 0;
  height: 100%;
  background: var(--primary-color);
  color: var(--text-white-color);
  padding: 0 1.2rem;
  border-radius: 0 5px 5px 0;
}

.newsletter__style2--button:hover {
  background: var(--secondary-color);
}

.newsletter__style2--content {
  margin-bottom: 2.2rem;
}

@media only screen and (min-width: 576px) {
  .newsletter__style2--content {
    margin-bottom: 2.5rem;
  }
}

.newsletter__style2--content__title {
  margin-bottom: 1.8rem;
}

.newsletter__style2--content__desc {
  font-size: 1.6rem;
  display: inline-block;
  width: 90%;
}

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

@media only screen and (min-width: 768px) {
  .newsletter__style2--content__desc {
    width: 62%;
  }
}

@media only screen and (min-width: 992px) {
  .newsletter__style2--content__desc {
    width: 40%;
  }
}

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

.footer__bg {
  background: url(banner-fullwidth4.webp);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

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

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

.social__share--icon {
  width: 3.8rem;
  height: 3.8rem;
  background: var(--body-background-color);
  color: var(--primary-color);
  text-align: center;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

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

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


.footer__widget--desc {
  font-size: 1.6rem;
  margin-bottom: 0;
  color: var(--primary-color);
}

.footer__widget--title {
  font-weight: 600;
  position: relative;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: var(--primary-color);
  text-transform: uppercase;
}

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

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

.footer__widget--title__arrowdown--icon {
  position: absolute;
  right: 0;
  top: 38%;
  -webkit-transition: .3s;
  transition: .3s;
  display: none;
}

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

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

.footer__widget.active .footer__widget--title__arrowdown--icon {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}



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

.footer__widget--menu__text {
  line-height: 2.6rem;
  font-size: 1.5rem;
}

.footer__widget--menu__text:hover {
  color: var(--bg-black-color);
}

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

.footer__widget--info {
  margin-top: 1.7rem;
}

.footer__widget--info__icon {
  color: var(--foreground-color);
}

.footer__widget--info_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

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

.footer__widget--info__text {
  font-size: 1.5rem;
  line-height: 2.5rem;
  color: var(--primary-color);
}

@media only screen and (min-width: 768px) {
  .footer__widget--info__text {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}

.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--inenr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1.8rem 0;
}

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

@media only screen and (max-width: 991px) {
  .footer__bottom--inenr {
    flex-direction: row;
  }
}



@media only screen and (max-width: 767px) {
  .footer__payment.mt-30 {
    margin-top: 2rem;
  }
}

/*
    home six footer css
*/
.footer__bg--style2 {
  background: rgba(250, 238, 238, 0.9);
}

.footer__content--menu {
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

@media only screen and (min-width: 576px) {
  .footer__content--menu {
    gap: 3rem;
    margin-bottom: 3rem;
  }
}

.footer__content--menu__link {
  text-transform: uppercase;
  font-weight: 500;
  color: var(--primary-color);
}



.main__footer--content .footer__payment img {
  margin: 0 auto;
}

.main__footer--content .footer__social {
  margin-top: 0;
  margin-bottom: 2.5rem;
}

@media only screen and (min-width: 576px) {
  .main__footer--content .footer__social {
    margin-bottom: 3rem;
  }
}

.footer__bottom--style {
  border-top: 1px solid #ddd;
}

.footer__map {
  margin-top: 1.5rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.footer__map iframe {
  width: 100%;
  height: 16rem;
  border: 0;
  display: block;
}

/* Maps grid — one map per location, side-by-side on desktop */
.footer__maps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.footer__map--item {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.footer__map--iframe-wrap {
  overflow: hidden;
  height: 14rem;
  width: 100%;
}

.footer__map--iframe-wrap iframe {
  width: 100%;
  height: calc(14rem + 130px);
  border: 0;
  display: block;
  margin-top: -65px;
}

.footer__map--label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--foreground-color);
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid var(--border-color);
}

.footer__map--label svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--primary-color);
}

@media (max-width: 575px) {
  .footer__maps-grid {
    grid-template-columns: 1fr;
  }
}

.footer__map--link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  font-size: 1.3rem;
  color: var(--foreground-color);
}

.footer__map--link,
.footer__map--link a {
  color: var(--primary-color);
}

.footer__map--link:hover {
  color: var(--primary-color);
}

.footer__map--link svg {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--primary-color);
}

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

.quickview__main--wrapper {
  max-width: 895px;
  position: relative;
  overflow: auto;
  cursor: default;
  padding: 25px;
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  pointer-events: inherit;
}

.modal-content.quickview__main__content {
  padding: 20px;
  border-radius: 10px;
  border: 0;
  max-height: 80vh;
  overflow: auto;
}

@media only screen and (max-width: 767px) {
  .modal-content.quickview__main__content {
    max-width: 550px;
  }
}

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

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

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

/* ══ Quickview Sidebar ══ */
.offCanvas__quickview {
  position: fixed;
  top: 0;
  right: -42rem;
  width: 40rem;
  max-width: 92vw;
  height: 100%;
  background: var(--bg-offwhite-color);
  z-index: 9999;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding: 3rem;
  display: flex;
  flex-direction: column;
}

.offCanvas__quickview.open {
  right: 0;
}

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

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

.quickview__close--btn {
  font-size: 1.8rem;
  padding: 0;
  width: 3.2rem;
  height: 3.2rem;
  line-height: 3.8rem;
  border-radius: 50%;
  font-weight: 700;
  border: 1px solid var(--border-color);
  background: var(--text-white-color);
  padding: 0 !important;
  margin: 0 !important;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
  color: #800020;
}

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

.quickview__close--btn:focus {
  -webkit-box-shadow: inherit !important;
  box-shadow: inherit !important;
}

.modal-body.quickview__inner {
  padding: 0;
}

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

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

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

.quickview__thumb {
  position: relative;
}

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

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

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

.quickview__gallery--pagination .swiper-pagination-bullet {
  width: 2rem;
  height: 0.6rem;
  background: var(--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: 6rem;
  height: 3.5rem;
  padding: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 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: 3.3rem;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--primary-color);
}

.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;
  color: var(--primary-color);
}

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

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

.quickview__social--icon {
  width: 3rem;
  height: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: var(--secondary-color);
  color: var(--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 {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
  }
}

/*
    lookbook css
*/
@media only screen and (min-width: 576px) {
  .lookbook__thumbnail {
    width: 49%;
  }
}

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

.lookbook__banner--right {
  background: rgba(250, 238, 238, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media only screen and (min-width: 576px) {
  .lookbook__banner--right {
    width: 51%;
  }
}

.lookbook__banner--content {
  padding-left: 3rem;
}

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

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

@media only screen and (min-width: 1366px) {
  .lookbook__banner--content {
    padding-left: 15rem;
  }
}

@media only screen and (max-width: 575px) {
  .lookbook__banner--content {
    text-align: center;
    padding: 5rem 2rem;
    width: 100%;
  }
}

.lookbook__banner--content__subtitle {
  font-size: 1.6rem;
  color: var(--primary-color);
  margin-bottom: 0.6rem;
}

@media only screen and (min-width: 992px) {
  .lookbook__banner--content__subtitle {
    font-size: 1.7rem;
    margin-bottom: 0.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .lookbook__banner--content__subtitle {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
}

.lookbook__banner--content__title {
  font-size: 2.2rem;
  line-height: 3rem;
  margin-bottom: 1rem;
}

@media only screen and (min-width: 768px) {
  .lookbook__banner--content__title {
    font-size: 2.5rem;
    line-height: 3.2rem;
    margin-bottom: 1.2rem;
  }
}

@media only screen and (min-width: 992px) {
  .lookbook__banner--content__title {
    font-size: 3rem;
    line-height: 3.5rem;
    margin-bottom: 1.5rem;
  }
}

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

@media only screen and (min-width: 1366px) {
  .lookbook__banner--content__title {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}

.lookbook__banner--content__desc {
  font-size: 1.5rem;
  margin-bottom: 2.2rem;
}

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

@media only screen and (min-width: 992px) {
  .lookbook__banner--content__desc {
    font-size: 1.6rem;
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .lookbook__banner--content__desc {
    font-size: 1.7rem;
    margin-bottom: 3.5rem;
  }
}

.lookbook__banner--product {
  position: absolute;
  top: 50%;
  right: -7rem;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
}

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

.lookbook__banner--product .product__card--action {
  opacity: 1;
  visibility: visible;
  top: 20px;
  right: 20px;
}

.lookbook__banner--product .product__card--action__btn {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.lookbook__banner--product .product__add--to__card {
  opacity: 1;
  visibility: visible;
  bottom: 18px;
}

.lookbook__banner--product:hover .product__add--to__card {
  bottom: 18px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .lookbook__banner--product.width__295 {
    width: 23.6rem;
  }
}

.lookbook__box {
  position: absolute;
  width: 3rem;
  height: 3rem;
}

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

.lookbook__box:hover .lookbook__product {
  opacity: 1;
  visibility: visible;
}

.lookbook__box.one {
  top: 10%;
  left: 25%;
}

@media only screen and (min-width: 992px) {
  .lookbook__box.one {
    top: 8%;
    left: 38%;
  }
}

@media only screen and (min-width: 1366px) {
  .lookbook__box.one {
    top: 8%;
    left: 38%;
  }
}

@media only screen and (min-width: 1600px) {
  .lookbook__box.one {
    left: 50%;
  }
}

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

.lookbook__box.two {
  left: 9rem;
  bottom: 13%;
}

@media only screen and (min-width: 1366px) {
  .lookbook__box.two {
    bottom: 12%;
    left: 13rem;
  }
}

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

.lookbook__box.three {
  top: 42%;
  right: 45%;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
}

@media only screen and (min-width: 480px) {
  .lookbook__box.three {
    right: 40%;
    top: 50%;
  }
}

@media only screen and (min-width: 768px) {
  .lookbook__box.three {
    right: 50%;
  }
}

@media only screen and (min-width: 1366px) {
  .lookbook__box.three {
    right: 42%;
  }
}

@media only screen and (min-width: 1600px) {
  .lookbook__box.three {
    right: 34%;
  }
}

.lookbook__box--icon {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--body-background-color);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

.lookbook__box--icon::before {
  position: absolute;
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background: var(--secondary-color);
  border-radius: 50%;
  left: 0.7rem;
  top: 0.7rem;
}

@media only screen and (min-width: 992px) {
  .lookbook__box--icon::before {
    left: 1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;
  }
}

.lookbook__product {
  position: absolute;
  background: var(--body-background-color);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  width: 27rem;
  gap: 1.2rem;
  border-radius: 0.5rem;
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
  visibility: hidden;
  z-index: 9;
}

.lookbook__product.one {
  top: 5.5rem;
  left: -12rem;
}

@media only screen and (min-width: 992px) {
  .lookbook__product.one {
    top: 6.2rem;
    left: -11.3rem;
  }
}

.lookbook__product.one::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 17px solid var(--body-background-color);
  left: 50%;
  top: -17px;
  -webkit-transform: translatex(-50%);
  transform: translatex(-50%);
}

.lookbook__product.two {
  bottom: 6.2rem;
  top: auto;
  left: -11.3rem;
}

.lookbook__product.two::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 17px solid var(--body-background-color);
  left: 50%;
  bottom: -17px;
  -webkit-transform: translatex(-50%);
  transform: translatex(-50%);
}

.lookbook__product--thumbnail {
  width: 9rem;
}

.lookbook__product--content__title {
  font-size: 1.5rem;
  line-height: 1.8rem;
  margin-bottom: 0.5rem;
}

.lookbook__product--link {
  font-size: 1.4rem;
  line-height: 1.7rem;
  font-weight: 500;
  color: var(--foreground-sub-color);
  border-bottom: 1px solid var(--foreground-sub-color);
}

/* 
    11. Accordion css
*/
.accordion__items.active {
  margin-bottom: 20px;
}

.accordion__items.active:last-child {
  margin-bottom: 0;
}

.accordion__items.active .accordion__items--button__icon--svg {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.accordion__items--body {
  display: none;
  padding: 0 20px;
}

.accordion__items--body__desc {
  font-size: 1.5rem;
  line-height: 2.8rem;
}

.accordion__items:last-child .accordion__items--button {
  margin-bottom: 0;
}

.accordion__items--button {
  border: 0;
  background: var(--white-color);
  width: 100%;
  padding: 13px 60px 13px 25px;
  text-align: left;
  margin-bottom: 15px;
  font-size: 1.5rem;
  font-weight: 600;
  position: relative;
}

@media only screen and (min-width: 992px) {
  .accordion__items--button {
    padding: 13px 70px 13px 35px;
  }
}

@media only screen and (min-width: 1200px) {
  .accordion__items--button {
    padding: 24px 80px 24px 40px;
  }
}

.accordion__items--button__icon {
  width: 3rem;
  height: 3rem;
  background: var(--primary-color);
  color: var(--text-white-color);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
}

@media only screen and (min-width: 768px) {
  .accordion__items--button__icon {
    right: 15px;
  }
}

@media only screen and (min-width: 992px) {
  .accordion__items--button__icon {
    right: 35px;
  }
}

.accordion__items--button__icon--svg {
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.accordion__items--button>* {
  pointer-events: none;
}

/* 
    20. 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;
  -webkit-transition: var(--transition);
  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 {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.portfolio__items--thumbnail__img {
  -webkit-transition: .3s;
  transition: .3s;
  border-radius: 5px;
}

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

.portfolio__view--icon__link {
  color: var(--text-white-color);
}

/* 
    10. Brand logo css
*/
.brang__logo--img {
  margin: 0 auto;
  opacity: 0.6;
}

.brang__logo--img:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  opacity: 1;
}

.brand__logo--activation .swiper-wrapper {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* 
    31. Breadcrumb css 
*/
.breadcrumb {
  padding-inline: 1.5rem;
  padding-block: 1.5rem;
}

.breadcrumb__bg {
  background: var(--bg-offwhite-color);
  padding: 2rem 0;
}

.breadcrumb__content {
  position: relative;
}

.breadcrumb__content--title {
  font-family: var(--font-heading) !important;
  font-size: clamp(3.2rem, 4vw, 4.8rem) !important;
  line-height: 1.2 !important;
  color: var(--foreground-color) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0.8rem !important;
}

.breadcrumb__content--menu__items {
  position: relative;
  margin-right: 18px;
  padding-right: 18px;
  font-size: 15px;
  line-height: 24px;
}

.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: 15px;
  background: var(--secondary-color);
  right: 0;
  top: 4px;
  border-radius: 5px;
  -webkit-transform: rotate(30deg);
  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 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    gap: 2rem;
  }
}

/* .product__view--mode {
  gap: 2.5rem;
} */

/* @media only screen and (max-width: 767px) {
  .product__view--mode {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media only screen and (max-width: 479px) {
  .product__view--mode {
    gap: 1.5rem;
  }
} */

.product__view--label {
  font-weight: 500;
  margin-right: 1.2rem;
  font-size: 1.5rem;
  color: var(--primary-color);
}

@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-inline: .5rem;
  padding-block: 1rem;
  -webkit-appearance: none;
  cursor: pointer;
  border-radius: 0.5rem;
  background: var(--body-background-color);
  font-size: 1.4rem;
}

.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(--primary-color);
  font-size: 1.5rem;
  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;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  background-color: var(--body-background-color);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
}

/* add to cart css */
.added-to-cart {
  text-align: center;
  font-size: 1.7rem;
  color: rgba(3, 128, 3, 0.896);
  margin: 0;
}

@media only screen and (min-width: 480px) {
  .offcanvas__filter--sidebar {
    max-width: 320px;
  }
}

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



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

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

.widget__filter--btn__icon {
  width: 20px;
}

.widget__filter--btn__text {
  font-weight: 600;
  font-size: 1.5rem;
  margin-left: 0.7rem;
}

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

.offcanvas__filter--close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  margin: 25px;
  background: var(--white-color);
}

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

.offcanvas__filter--close__text {
  font-size: 1.5rem;
  font-weight: 600;
  margin-left: 8px;
}

.offcanvas__filter--close>* {
  pointer-events: none;
}

.single__widget {
  margin-bottom: 3rem;
}

.list_btn {
  margin-top: 1rem;
}

@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;
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
}

.widget__title {
  font-weight: 600;
  margin-bottom: 2rem;
  position: relative;
  color: var(--primary-color);
  padding-left: 1.2rem;
}

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

.widget__title::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 2px;
  height: 2.5rem;
  background: var(--primary-color);
}

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

/* customer css */
.customer:not(.account):not(.order) {
  margin: 0 auto;
  padding-left: 1.5rem;
  max-width: 33.4rem;
  padding-right: 1.5rem;
  text-align: center;
}


@media screen and (min-width: 750px) {
  .customer:not(.account):not(.order) {
    max-width: 47.8rem;
  }
}

.customer>h1,
.customer__title {
  margin-top: 0;
}

.customer form {
  margin-top: 0;
}

.customer button {
  margin: 4rem 0 1.5rem;
}

.customer ul {
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding-left: 4.4rem;
  text-align: left;
  margin-bottom: 4rem;
}

.customer ul a {
  display: inline;
}

.customer strong {
  font-weight: normal;
  color: rgb(var(--foreground-sub-color));
}

.customer h2.form__message {
  font-size: calc(var(--font-heading-scale) * 1.8rem);
}

@media only screen and (min-width: 750px) {
  .customer h2.form__message {
    font-size: calc(var(--font-heading-scale) * 2.2rem);
  }
}

.customer .field {
  margin: 2rem 0 0 0;
}

.customer .field:first-of-type {
  margin-top: 0;
}

/* Customer Table */
.customer table {
  table-layout: auto;
  border-collapse: collapse;
  border-bottom: 0.01rem solid var(--border-color);
  box-shadow: none;
  width: 100%;
  font-size: 1.6rem;
  position: relative;

}

table {
  display: table;
  border-collapse: separate;
  box-sizing: border-box;
  text-indent: initial;
  border-spacing: 2px;
  border-color: rgb(124, 122, 124);
}


@media screen and (min-width: 750px) {
  .customer table {
    border: none;
    box-shadow: 0 0 2px rgba(151, 150, 150, 0.7);

  }
}

@media screen and (forced-colors: active) {
  .customer table {
    border-top: 0.1rem solid rgba(151, 150, 150, 0.7);
    border-bottom: 0.1rem solid rgba(151, 150, 150, 0.7);
  }
}

.customer tbody {
  color: var(--bg-black-color);
}

.customer th,
.customer td {
  font-weight: 400;
  line-height: 1;
  border: none;
  padding: 0;
}

@media screen and (min-width: 750px) {
  .customer td {
    padding-right: 2.2rem;
  }
}

.customer tbody td {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.customer td:empty {
  display: initial;
}

.customer thead th {
  font-size: 1.2rem;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
}

.customer tbody td:first-of-type {
  padding-top: 4rem;
}

@media screen and (min-width: 750px) {

  .customer th,
  .customer td:first-of-type {
    text-align: left;
    padding-left: 0;
    padding-right: 2.2rem;
  }

  .customer thead th,
  .customer tbody td {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }

  .customer th:first-of-type,
  .customer td:first-of-type {
    padding-left: 2.2rem;
  }

  .customer tbody td {
    vertical-align: top;
  }

  .customer tbody td:first-of-type {
    padding-top: 2.4rem;
  }
}

.customer tbody td:last-of-type {
  padding-bottom: 4rem;
}

@media screen and (min-width: 750px) {
  .customer tbody td:last-of-type {
    padding-bottom: 0;
  }
}

.customer tbody tr {
  border-top: 0.01rem solid var(--border-color);
}

@media screen and (min-width: 750px) {
  .customer tbody tr:first-of-type {
    border-top: none;
  }
}

@media screen and (forced-colors: active) {
  .customer tbody tr {
    border-top: 0.1rem solid transparent;
  }
}

.customer tfoot td:first-of-type,
.customer tfoot td {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.customer tfoot td:first-of-type {
  text-align: left;
}

.customer tfoot tr:first-of-type td {
  padding-top: 4rem;
}

@media screen and (min-width: 750px) {

  .customer tfoot tr:first-of-type td,
  .customer tfoot tr:first-of-type th {
    padding-top: 2.4rem;
  }
}

.customer tfoot tr:last-of-type td {
  padding-bottom: 4rem;
}

@media screen and (min-width: 750px) {

  .customer tfoot tr:last-of-type td,
  .customer tfoot tr:last-of-type th {
    padding-bottom: 2.4rem;
  }
}

/* works around colspan phantom border issues */
.customer thead::after,
.customer tfoot::before {
  content: ' ';
  height: 0.1rem;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  background: rgb(229, 226, 229);
}

@media screen and (forced-colors: active) {

  .customer thead::after,
  .customer tfoot::before {
    background: CanvasText;
  }
}

/* mobile table overrides */
@media screen and (max-width: 749px) {

  .customer thead,
  .customer th,
  .customer tfoot td:first-of-type {
    display: none;
  }

  .customer td {
    display: flex;
    text-align: right;
  }

  .customer td::before {
    color: var(--bg-light-dark-color);
    content: attr(data-label);
    font-size: 1.4rem;
    padding-right: 2rem;
    text-transform: uppercase;
    flex-grow: 1;
    text-align: left;
  }

  .customer td:first-of-type {
    display: flex;
    align-items: center;
  }

  .customer tr {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
  }
}

.customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease .1s;
}

.underlined-link,
.customer a,
.inline-richtext a {
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
}

.underlined-link,
.customer a {
  color: var(--bg-light-dark-color);
}

.inline-richtext a,
.rte.inline-richtext a {
  color: currentColor;
}

.underlined-link:hover,
.customer a:hover,
.inline-richtext a:hover {
  color: var(--secondary-color);
  text-decoration-thickness: 0.2rem;
}



/* Pagination */
.customer .pagination {
  margin-top: 5rem;
  margin-bottom: 7rem;
}

@media screen and (min-width: 990px) {
  .customer .pagination {
    margin-top: 7rem;
    margin-bottom: 10rem;
  }
}

.customer .pagination ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.customer .pagination li {
  flex: 1 1;
  max-width: 4rem;
}

.customer .pagination li:not(:last-child) {
  margin-right: 1rem;
}

.customer .pagination li :first-child {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 4rem;
  width: 100%;
  padding: 0;
  text-decoration: none;
}

.customer .pagination li :first-child svg {
  height: 0.6rem;
}

.customer .pagination li:first-of-type svg {
  margin-left: -0.2rem;
  transform: rotate(90deg);
}

.customer .pagination li:last-of-type svg {
  margin-right: -0.2rem;
  transform: rotate(-90deg);
}

.customer .pagination li [aria-current]::after {
  content: '';
  display: block;
  width: 2rem;
  height: 0.01rem;
  position: absolute;
  bottom: 0.08rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: currentColor;
}

/* Login */
.login a {
  display: block;
  margin: 0 auto;
  width: fit-content;
}

.login a[href='#recover'] {
  margin-left: 0;
  margin-right: 0;
}

.login .field+a {
  margin-top: 1rem;
}

.login p {
  margin: 1.5rem 0;
}

.login h3 {
  margin-top: 1.5rem;
  text-align: left;
  font-size: calc(var(--font-heading-scale) * 1.6rem);
}

#customer_login_guest button {
  margin-top: 0;
}

#recover,
#recover+div {
  display: none;
}

#recover:target {
  display: block;
}

#recover:target+div {
  display: block;
}

#recover:target~#login,
#recover:target~#login+div {
  display: none;
}

#recover,
#login {
  scroll-margin-top: 20rem;
}

#recover {
  margin-bottom: 0;
}

.activate button[name='decline'],
.addresses li>button,
.addresses form button[type] {
  background-color: var(--color-background), var(--alpha-button-background);
  color: var(--color-link);
}


@media only screen and (min-width: 750px) {
  .activate button[name='decline'] {
    margin-top: inherit;
    margin-left: 1rem;
  }
}

/* Account/Order */
:is(.account, .order) {
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media screen and (min-width: 750px) {
  :is(.account, .order) {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

@media screen and (min-width: 990px) {
  :is(.account, .order)>div:nth-of-type(2) {
    display: flex;
    margin-top: 5rem;
  }
}

@media screen and (min-width: 990px) {
  :is(.account, .order)>div:nth-of-type(2)>div:first-of-type {
    flex-grow: 1;
    padding-right: 3.2rem;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .order>div:nth-of-type(2)>div:last-of-type {
    display: flex;
  }

  .order>div:nth-of-type(2)>div:last-of-type div {
    padding-right: 3.2rem;
  }
}

:is(.account, .order) p {
  margin: 0 0 2rem;
  font-size: 1.6rem;
}

:is(.account, .order) h1 {
  margin-bottom: 1rem;
}

:is(.account, .order) h2 {
  margin-top: 4rem;
  margin-bottom: 1rem;
}

@media screen and (min-width: 990px) {
  :is(.account, .order) h2 {
    margin-top: 0;
  }
}

.account h1+a {
  display: inline-flex;
  align-items: center;
}

.account a svg {
  width: 1.5rem;
  margin-bottom: -0.03rem;
  margin-right: 1rem;
}

@media screen and (min-width: 750px) {

  .account thead th:last-child,
  .account td:last-child {
    text-align: right;
  }

  .account table td:first-of-type {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
}

.account table td:first-of-type a {
  padding: 0.5rem 1rem;
  text-decoration: none;
  box-shadow: 0 0 0 0.2rem rgba(151, 150, 150, 0.7);
  border: 0.1rem solid transparent;
  font-size: 1.5rem;
  border-radius: 5px;
}

.account table td:first-of-type a:hover {
  box-shadow: 0 0 0 0.2rem var(--secondary-color);
  text-decoration-thickness: 0.2rem;
}

.order td:first-of-type {
  align-items: initial;
}

@media screen and (min-width: 750px) {

  .order thead th:nth-last-child(-n + 3),
  .order td:nth-last-child(-n + 3) {
    text-align: right;
  }
}

.order tfoot tr:last-of-type td,
.order tfoot tr:last-of-type th {
  font-size: 2.2rem;
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}

@media screen and (min-width: 750px) {

  .order tfoot tr:last-of-type td,
  .order tfoot tr:last-of-type th {
    padding-bottom: 2.4rem;
  }
}

.order tfoot tr:last-of-type td:before {
  font-size: 2.2rem;
}

.order table p,
.order>div:nth-of-type(2)>div:first-of-type h2,
.order>div:nth-of-type(2)>div:last-of-type h2+p {
  margin-bottom: 0;
}

.order>div:nth-of-type(2)>div:first-of-type h2~p {
  margin-bottom: 0;
  font-size: 1.4rem;
}

.order>div:nth-of-type(2)>div:first-of-type h2~p:last-of-type {
  margin-bottom: 3rem;
}

.order .item-props {
  font-size: 1.4rem;
  margin-top: 0.05px;
  display: flex;
  flex-direction: column;
}


.order .item-props>span {
  word-break: break-all;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.order .fulfillment {
  width: fit-content;
  border: 0.01rem solid var(--foreground-sub-color);
  padding: 1rem;
  margin-top: 1rem;
  font-size: 1.4rem;
  text-align: left;
}

.order .fulfillment a {
  margin: 0.7rem 0;
}

.order .fulfillment span {
  display: block;
}

.order .cart-discount {
  display: block;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

@media screen and (min-width: 750px) {
  .order td .cart-discount {
    display: none;
  }
}

.order tbody ul {
  list-style: none;
  font-size: 1.2rem;
  text-align: right;
  padding-left: 0;
  margin-top: 1rem;
  margin-bottom: 0;
}

@media screen and (min-width: 750px) {
  .order tbody ul {
    text-align: left;
  }
}

.order table a {
  line-height: calc(1 + 0.3 / var(--font-body-scale));
}

.order tbody tr:first-of-type td:first-of-type>div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

@media screen and (min-width: 750px) {
  .order tbody tr:first-of-type td:first-of-type>div {
    align-items: flex-start;
  }
}

.order .properties {
  font-size: 1.4rem;
  margin-top: 1rem;
}

.order .properties span {
  display: block;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.order svg {
  width: 1.1rem;
  color: rgb(var(--foreground-sub-color));
  margin-right: 0.5rem;
}

.order dl {
  margin: 0;
}

.order dd {
  margin-left: 0;
  line-height: calc(1 + 0.3 / var(--font-body-scale));
}

.order dd s {
  color: rgba(var(--foreground-sub-color), 0.7);
}

.order .unit-price {
  font-size: 1.1rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  margin-top: 0.2rem;
  text-transform: uppercase;
  color: rgba(var(--foreground-sub-color), 0.7);
}

.order .regular-price {
  font-size: 1.3rem;
}

/* Addresses */
.addresses li>button {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.addresses li>button+button,
.addresses form button+button {
  margin-top: 0rem;
}

@media screen and (min-width: 750px) {
  .addresses li>button:first-of-type {
    margin-top: 3rem;
  }
}

.addresses form button:first-of-type {
  margin-right: 1rem;
}

label[for='AddressCountryNew'],
label[for='AddressProvinceNew'] {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}

.addresses form {
  display: flex;
  flex-flow: row wrap;
}

.addresses form>div {
  width: 100%;
  text-align: left;
}

.addresses ul {
  list-style: none;
  padding-left: 0;
  text-align: center;
}

li[data-address] {
  margin-top: 5rem;
}

.addresses [aria-expanded='false']~div[id] {
  display: none;
}

.addresses [aria-expanded='true']~div[id] {
  display: block;
}

.addresses h2 {
  text-align: left;
}

li[data-address]>h2 {
  text-align: center;
  font-size: calc(var(--font-heading-scale) * 1.8rem);
  margin-bottom: 0;
}

@media only screen and (min-width: 750px) {
  li[data-address]>h2 {
    font-size: calc(var(--font-heading-scale) * 2.2rem);
  }
}

.addresses ul p {
  margin-bottom: 0;
}

.addresses input[type='checkbox'] {
  margin-top: 2rem;
  margin-left: 0;
}

@media only screen and (min-width: 750px) {
  .addresses form>div:nth-of-type(1) {
    margin-right: 2rem;
  }

  .addresses form>div:nth-of-type(2) {
    margin-top: 0;
  }

  .addresses form>div:nth-of-type(1),
  .addresses form>div:nth-of-type(2) {
    box-sizing: border-box;
    flex-basis: calc(50% - 1rem);
  }
}

.addresses form>div:nth-of-type(7),
.addresses form>div:nth-of-type(7)+div[id] {
  margin-top: 1.5rem;
}


/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.customer .field {
  display: flex;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem;
  margin: var(--inputs-border-width);
  transition: box-shadow var(--duration-short) ease;
}

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: calc(var(--inputs-border-width) + 2rem);
  top: calc(1rem + var(--inputs-border-width));
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease,
    font-size var(--duration-short) ease;
  color: rgba(var(--foreground-sub-color), 0.75);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input:focus~.field__label,
.field__input:not(:placeholder-shown)~.field__label,
.field__input:-webkit-autofill~.field__label,
.customer .field input:focus~label,
.customer .field input:not(:placeholder-shown)~label,
.customer .field input:-webkit-autofill~label {
  font-size: 1rem;
  top: calc(var(--inputs-border-width) + 0.5rem);
  left: calc(var(--inputs-border-width) + 2rem);
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

.field__button>svg {
  height: 2.5rem;
  width: 2.5rem;
}

.field__input:-webkit-autofill~.field__button,
.field__input:-webkit-autofill~.field__label,
.customer .field input:-webkit-autofill~label {
  color: #800020;
}


@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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.widget__search--form__btn:hover {
  background: var(--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 {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  top: 38%;
}

.widget__categories--menu__label {
  cursor: pointer;
  padding: 0.5rem 1rem;
  position: relative;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  font-size: 1.5rem;
  color: var(--body-text-color);
}

.widget__categories--menu__label:hover {
  color: var(--secondary-color);
}

.widget__categories--menu__label>* {
  pointer-events: none;
}

.widget__categories--menu__text {
  padding-left: 1.3rem;
}

.widget__categories--menu__img {
  width: 3rem;
}

.widget__categories--menu__arrowdown--icon {
  position: absolute;
  right: 1.5rem;
  top: 43%;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.widget__categories--sub__menu {
  display: none;
  padding: 1rem 0;
  border-top: 1px solid var(--border-color);
}

.widget__categories--sub__menu--list {
  margin-bottom: 0.8rem;
  padding: 0 1rem 0.8rem;
  border-bottom: 1px solid var(--border-color);
}

.widget__categories--sub__menu--list:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.widget__categories--sub__menu--img {
  width: 2.8rem;
}

.widget__categories--sub__menu--text {
  padding-left: 1.3rem;
  line-height: 2.8rem;
  font-size: 1.4rem;
}

.widget__form--check__list {
  margin-bottom: 1rem;
  position: relative;
}

.widget__form--check__list:last-child {
  margin-bottom: 0;
}

.widget__form--check__label {
  cursor: pointer;
  line-height: 2.8rem;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border: 1px solid var(--border-color);
  background: var(--white-color);
  padding: 0.5rem 3rem 0.5rem 1.5rem;
  border-radius: 0.5rem;
  display: block;
  color: var(--body-text-color);
  font-size: 1.5rem;
}

.widget__form--check__label:hover {
  color: var(--secondary-color);
}

.widget__form--check__input {
  position: absolute;
  right: 1rem;
  top: 50%;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
  opacity: 0;
  cursor: pointer;
  z-index: 999;
}

.widget__form--check__input:checked~.widget__form--checkmark {
  background-color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
}

.widget__form--check__input:checked~.widget__form--checkmark::before {
  display: block;
}

.widget__form--checkmark {
  height: 1.8rem;
  width: 1.8rem;
  border: 1px solid var(--secondary-color);
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 50%;
  right: 1rem;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
  background: var(--body-background-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.widget__form--checkmark::before {
  right: 0.5rem;
  top: 0.3rem;
  width: 0.5rem;
  height: 0.8rem;
  border: solid white;
  border-top-width: medium;
  border-right-width: medium;
  border-bottom-width: medium;
  border-left-width: medium;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
  position: absolute;
  display: none;
}

.price__filter--group {
  width: 46%;
}

.price__filter--label {
  font-weight: 600;
  margin-bottom: 0.6rem;
  display: inline-block;
}

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

.price__filter--input {
  border: 1px solid var(--border-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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px;
}

.widget__tagcloud--link {
  border: 1px solid var(--border-color);
  background: var(--body-background-color);
  color: var(--primary-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--thumbnail {
  width: 100px;
}

.shop__sidebar--product .small__product--card {
  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%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .shop__product--wrapper .rating__review--text {
    font-size: 1.1rem;
  }
} */

.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 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    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: 245px;
  }
}

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

@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__list--price {
  margin-bottom: 1rem;
}

.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 {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.product__list--content .product__card--btn {
  display: inline-block;
  width: auto;
  border-radius: 5px;
  height: 4rem;
  line-height: 4rem;
  background: var(--primary-color);
  color: var(--text-white-color);
  font-weight: 500;
}

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

.product__card--content__desc {
  line-height: 2.6rem;
  font-size: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .product__card--content__desc {
    line-height: 2.8rem;
    font-size: 1.5rem;
  }
}

@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;
  border-radius: 5px;
}

.pagination {
  display: block;
  width: 100%;
}

.pagination__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  list-style: none;
  padding: 0;
  margin: 0;
}


@media only screen and (min-width: 768px) {
  .customer h2.form__message {
    font-size: 2.2rem;
  }
}

.pagination__item {
  width: 3.4rem;
  height: 3.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--foreground-color);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
  color: var(--bg-offwhite-color);
}

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

.pagination__item--current {
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: var(--text-white-color) !important;
}

.pagination__item:hover:not(:disabled) {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-white-color);
}

/* 
    33. About page css 
*/
.about__Section.mb-30 {
  margin-bottom: 3rem;
}

@media only screen and (max-width: 575px) {
  .about__Section.mb-30 {}
}

@media only screen and (min-width: 768px) {
  .about__thumbnail.padding__left {
    padding-left: 4rem;
  }
}

@media only screen and (min-width: 992px) {
  .about__thumbnail.padding__left {
    padding-left: 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .about__thumbnail.padding__left {
    padding-left: 9rem;
  }
}

@media only screen and (max-width: 575px) {
  .about__content {
    padding-top: 2.5rem;
    text-align: center;
  }
}

@media only screen and (min-width: 768px) {
  .about__content.padding__left {
    padding-left: 2rem;
  }
}

@media only screen and (min-width: 1366px) {
  .about__content.padding__left {
    padding-left: 5rem;
  }
}

.about__content--subtitle {
  font-size: 1.6rem;
  line-height: 2.1rem;
  margin-bottom: 0.8rem;
  font-weight: 500;
  color: var(--secondary-color);
}

@media only screen and (min-width: 768px) {
  .about__content--subtitle {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .about__content--subtitle {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}

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

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

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

.about__content--desc {
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-bottom: 1.7rem;
  color: var(--primary-color);
}

@media only screen and (min-width: 768px) {
  .about__content--desc {
    font-size: 1.5rem;
    line-height: 2.6rem;
    margin-bottom: 1.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .about__content--desc {
    font-size: 1.7rem;
    line-height: 3rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 1366px) {
  .about__content--desc {
    font-size: 1.8rem;
    line-height: 3.2rem;
  }
}

.about__experience--text {
  position: absolute;
  top: 50%;
  left: 0;
  border: 1px solid var(--secondary-color);
  background: var(--body-background-color);
  border-radius: 0.5rem;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
  padding: 1rem;
  width: 10rem;
}

@media only screen and (min-width: 768px) {
  .about__experience--text {
    width: 11rem;
  }
}

@media only screen and (min-width: 992px) {
  .about__experience--text {
    padding: 1.5rem;
    width: 15rem;
  }
}

@media only screen and (min-width: 1366px) {
  .about__experience--text {
    width: 16rem;
    padding: 2rem;
  }
}

@media only screen and (max-width: 575px) {
  .about__experience--text {
    left: 50%;
    -webkit-transform: translatex(-50%);
    transform: translatex(-50%);
  }
}

.about__experience--years {
  font-size: 3rem;
  line-height: 2.5rem;
  color: var(--primary-color);
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
}

@media only screen and (min-width: 768px) {
  .about__experience--years {
    font-size: 3.5rem;
    line-height: 2.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .about__experience--years {
    font-size: 4rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 1366px) {
  .about__experience--years {
    font-size: 5rem;
    line-height: 4rem;
  }
}

.about__experience--years__inner {
  font-family: var(--frank-ruhl-fonts);
}

.about__experience--title {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 2rem;
}

@media only screen and (min-width: 768px) {
  .about__experience--title {
    font-size: 1.4rem;
    line-height: 2.2rem;
  }
}

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

@media only screen and (min-width: 1366px) {
  .about__experience--title {
    font-size: 1.8rem;
    line-height: 2.6rem;
  }
}

/*
    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;
  -webkit-transition: var(--transition);
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.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: 600;
  margin-bottom: 1rem;
  font-size: 1.7rem;
  line-height: 2rem;
  color: var(--primary-color);
}

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

/* 
    26. 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 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

.counterup__title {
  color: var(--primary-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;
    margin-bottom: 1.8rem;
  }
}

.counterup__number {
  font-size: 2.5rem;
  line-height: 2.5rem;
  font-weight: 600;
  color: var(--primary-color);
}

@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--media {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

@media (max-width: 768px) {
  .product__details--media {
    position: relative;
  }
}


.single__product--preview.bg__gray {
  padding: 1rem;
  border-radius: 1rem;
}

.product__media--preview__items--img {
  width: 100%;
}

.product__media--preview__items {
  position: relative;
}

.product__media--preview {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-offwhite-color, #faf6f0);
}

.product-zoom-trigger {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  padding: 6px 14px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 8;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-zoom-trigger:hover {
  background: #800020;
  color: #ffffff;
  border-color: #800020;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(128, 0, 32, 0.3);
}

.product-zoom-trigger svg {
  stroke: currentColor;
  transition: transform 0.25s ease;
}

.product-zoom-trigger:hover svg {
  transform: scale(1.15);
}

@media (max-width: 768px) {
  .product-zoom-trigger {
    padding: 8px;
    border-radius: 50%;
    top: 10px;
    right: 10px;
  }

  .product-zoom-trigger .zoom-trigger-text {
    display: none;
  }
}

/* ── Hide GLightbox description/caption box on product zoom ── */
.glightbox-container .gslide-description,
.glightbox-container .gdesc-inner,
.glightbox-container .gslide-title,
.glightbox-container .gslide-desc {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Refined Product Zoom Lightbox Sizing & Aesthetics ── */
.glightbox-container .ginner-container {
  max-width: 85vw !important;
  max-height: 85vh !important;
  height: 85vh !important;
  margin: auto !important;
}

.glightbox-container .gslide-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 85vw !important;
  max-height: 85vh !important;
  box-shadow: none !important;
}

.glightbox-container .gslide-image img {
  max-height: 78vh !important;
  max-width: 78vw !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45) !important;
  margin: auto !important;
}

@media (max-width: 768px) {
  .glightbox-container .ginner-container {
    max-width: 92vw !important;
    max-height: 85vh !important;
    height: 85vh !important;
  }

  .glightbox-container .gslide-image img {
    max-height: 78vh !important;
    max-width: 90vw !important;
    border-radius: 8px !important;
  }
}

.product__media--view__icon--link.icon-play {
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.product__media--view__icon--link.video {
  display: block;
  padding-bottom: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: unset;
}


.product__media--view__icon--link.video video,
.product__media--view__icon--link.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.icon__play--icon {
  width: 5rem;
  height: 5rem;
  margin: auto;
  border: 2px solid #ddd;
  color: var(--secondary-color);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.icon__play {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translatey(-50%) translatex(-50%);
  transform: translatey(-50%) translatex(-50%);



}

.product__media--view__icon--link:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
}

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

.product__media--nav__items {
  position: relative;
  border: 1px solid var(--border-color);
  padding: 1.2rem;
  line-height: 1;
  border-radius: 5px;
  -webkit-transition: var(--transition);
  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: 0.8rem;
  }
}

.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;
  color: var(--primary-color);
}

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

/*
    product details info css here
*/
@media only screen and (min-width: 768px) {
  .product__details--info {
    font-size: 1.6rem;
  }
}

.product__details--info__price .current__price {
  font-size: 1.6rem;
}

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

.product__details--info__price .old__price {
  font-size: 1.4rem;
  margin-left: 0.8rem;
}

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

.product__details--info__title {
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: var(--primary-color);
}

@media only screen and (min-width: 576px) {
  .product__details--info__title {
    font-size: 2rem;
  }
}

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

.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: 600;
  color: var(--primary-color);
  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.5rem;
  color: var(--primary-color);
}

/*
    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;
  color: var(--primary-color);
}

@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%;
  -webkit-transform: translatey(-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 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .product__details--tab.mb-30 {
    margin-bottom: 1.5rem;
  }
}

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

.product__details--tab__list {
  font-size: 1.6rem;
  line-height: 2.6rem;
  margin-right: 5rem;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  position: relative;
  padding-bottom: 0.4rem;
  font-weight: 500;
}

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

.product__details--tab__list.active {
  color: var(--secondary-color);
}

.product__details--tab__list.active::before {
  width: 100%;
  left: 0;
  right: 0;
}

.product__details--tab__list:hover {
  color: var(--secondary-color);
}

.product__details--tab__list:hover::before {
  width: 100%;
  left: 0;
  right: 0;
}

.product__details--tab__list:last-child {
  margin-right: 0;
}

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

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

@media only screen and (max-width: 767px) {
  .product__details--tab__list {
    margin: 0 1rem 1.3rem;
  }
}

.product__tab--content__title {
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--body-text-color);
}

@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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.product__tab--content__banner {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .product__tab--content__banner {
    width: 310px;
  }
}

@media only screen and (min-width: 992px) {
  .product__tab--content__banner {
    width: 410px;
  }
}

@media only screen and (min-width: 1200px) {
  .product__tab--content__banner {
    width: 460px;
  }
}

.product__tab--content__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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    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 {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

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

@media only screen and (max-width: 1199px) {
  .reviews__summary--caption {
    font-size: 12px;
  }
}

.actions__newreviews--btn {
  position: absolute;
  right: 0;
  bottom: 2.2rem;
  font-size: 1.3rem;
  height: 3.8rem;
  line-height: 3.8rem;
  padding: 0 1.5rem;
}

@media only screen and (max-width: 575px) {
  .actions__newreviews--btn {
    position: inherit;
    bottom: inherit;
    margin-top: 1rem;
  }
}

.reviews__comment--area {
  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: 2rem;
  }
}

.reviews__comment--content__date {
  border: 1px solid var(--border-color);
  padding: 0 1rem;
  border-radius: 5px;
  color: var(--foreground-sub-color);
  height: 3.4rem;
  line-height: 3.4rem;
  font-size: 1.3rem;
}

@media only screen and (min-width: 768px) {
  .reviews__comment--content__date {
    height: 3.6rem;
    line-height: 3.6rem;
    font-size: 1.3rem;
  }
}

@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;
  color: var(--primary-color);
}

.reviews__comment--content__desc {
  margin-bottom: 0;
}

@media only screen and (min-width: 992px) {
  .reviews__comment--content__desc {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}

@media only screen and (max-width: 575px) {
  .reviews__comment--content .reviews__ratting {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
}

.reviews__comment--list {
  border-bottom: 1px solid var(--border-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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.reviews__comment--list.margin__left {
  margin-left: 2.2rem;
}

@media only screen and (min-width: 400px) {
  .reviews__comment--list.margin__left {
    margin-left: 2.5rem;
  }
}

@media only screen and (min-width: 480px) {
  .reviews__comment--list.margin__left {
    margin-left: 3rem;
  }
}

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

.reviews__comment--reply__title {
  color: var(--primary-color);
}

@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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

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

@media only screen and (max-width: 991px) {
  .shop__sidebar--widget.product_d_widget {
    margin-top: 5rem;
  }
}

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

@media only screen and (max-width: 767px) {
  .product__details--gallery {
    margin-bottom: 2.3rem;
  }
}

.product__sidebar--column4.padding {
  padding: 0 0.5rem 1rem;
}

/* 
    32. 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: 5rem;
  }
}

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

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

.post__header--title {
  font-size: 2rem;
  line-height: 2.8rem;
  color: var(--primary-color);
}

@media only screen and (min-width: 768px) {
  .post__header--title {
    font-size: 2.2rem;
    line-height: 3rem;
  }
}

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

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

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

.blog__details--content__subtitle {
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 500;
  color: var(--primary-color);
}

@media only screen and (min-width: 576px) {
  .blog__details--content__subtitle {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
}

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

@media only screen and (min-width: 992px) {
  .blog__details--content__subtitle {
    font-size: 2.2rem;
    line-height: 3rem;
  }
}

.blog__details--content__desc {
  font-size: 1.4rem;
}

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

@media only screen and (max-width: 575px) {
  .blog__details--content__desc {
    line-height: 2.6rem;
  }
}

.blockquote__content {
  padding: 20px 30px;
  text-align: center;
  border-radius: 10px;
  background: var(--primary-color);
}

@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.4rem;
  line-height: 2.7rem;
  font-style: italic;
  font-weight: 500;
  color: var(--text-white-color);
}

@media only screen and (min-width: 576px) {
  .blockquote__content--desc {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}

@media only screen and (min-width: 768px) {
  .blockquote__content--desc {
    font-size: 1.6rem;
    line-height: 3rem;
  }
}

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

.blog__tags--social__media {
  padding: 5rem 0;
}

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

@media only screen and (max-width: 1199px) {
  .blog__tags--media {
    margin-bottom: 2rem;
  }
}

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

.blog__tags--media__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: 1rem;
  color: var(--primary-color);
}

@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;
  font-size: 1.4rem;
  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;
  color: var(--primary-color);
}

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

.blog__social--media__list {
  margin-right: 1rem;
}

.blog__social--media__list:last-child {
  margin-right: 0;
}

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

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

.related__post--area {}

.related__post--heading__maintitle {
  font-size: 1.8rem;
  line-height: 2.6rem;
  color: var(--primary-color);
  position: relative;
  padding-left: 1.5rem;
}

@media only screen and (min-width: 576px) {
  .related__post--heading__maintitle {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 768px) {
  .related__post--heading__maintitle {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .related__post--heading__maintitle {
    font-size: 2.4rem;
    line-height: 3rem;
  }
}

.related__post--heading__maintitle::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 22px;
  background: var(--primary-color);
  left: 0;
  top: 50%;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
}

@media only screen and (min-width: 768px) {
  .related__post--heading__maintitle::before {
    height: 25px;
  }
}

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

.related__post--items:hover .related__post--img {
  -webkit-transform: scale(1.05);
  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.7rem;
  }
}

.related__post--title a {
  color: var(--primary-color);
}

.related__post--title a:hover {
  color: var(--secondary-color);
}

.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.2rem;
  line-height: 3.2rem;
  padding: 0 1.5rem;
}

@media only screen and (min-width: 768px) {
  .comment__reply--btn {
    height: 3.3rem;
    line-height: 3.3rem;
    padding: 0 2rem;
    font-size: 1.4rem;
  }
}

.reviews__comment--area2 {}

.reviews__comment--content__title2 {
  font-weight: 600;
  line-height: 2.2rem;
  margin-bottom: 0.4rem;
  color: var(--primary-color);
}

.reviews__comment--content__date2 {
  font-size: 1.3rem;
  color: var(--foreground-sub-color);
}

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

.blog__comment--btn {
  height: 4rem;
  line-height: 4rem;
  font-size: 1.5rem;
}

/*
    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 {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}

.post__article--thumbnail {
  width: 110px;
  border-radius: 5px;
  overflow: hidden;
}

@media only screen and (min-width: 1200px) {
  .post__article--thumbnail {
    width: 130px;
  }
}

.post__article--thumbnail__img {
  border-radius: 5px;
}

.post__article--content {
  width: calc(100% - 105px);
}

@media only screen and (min-width: 1200px) {
  .post__article--content {
    width: calc(100% - 130px);
  }
}

.post__article--content__title a {
  color: var(--primary-color);
}

.post__article--content__title a:hover {
  color: var(--secondary-color);
}

.blog__comment--title {
  font-size: 1.8rem;
  line-height: 2.6rem;
  color: var(--primary-color);
  position: relative;
  padding-left: 1.5rem;
}

@media only screen and (min-width: 576px) {
  .blog__comment--title {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 768px) {
  .blog__comment--title {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .blog__comment--title {
    font-size: 2.4rem;
    line-height: 3rem;
  }
}

.blog__comment--title::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 22px;
  background: var(--primary-color);
  left: 0;
  top: 50%;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
}

@media only screen and (min-width: 768px) {
  .blog__comment--title::before {
    height: 25px;
  }
}

/* 
    27. 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(--primary-color);
  width: 100%;
  margin: 0 auto;
  font-size: 1.5rem;
  line-height: 2.6rem;
}

@media only screen and (min-width: 576px) {
  .contact__section--heading__desc {
    width: 90%;
  }
}

@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;
  -webkit-box-shadow: 0 7px 20px rgba(0, 0, 0, 0.16);
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.16);
  padding: 2rem;
}

@media only screen and (min-width: 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;
  color: var(--primary-color);
}

@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;
  font-size: 1.5rem;
  color: var(--primary-color);
}

.contact__form--label__star {
  color: var(--secondary-color);
}

.contact__form--input {
  width: 100%;
  height: 45px;
  padding: 5px 15px;
  border-radius: 8px;
  font-size: 1.4rem;
  border: 1px solid var(--border-color);
}

.contact__form--input:focus {
  border-color: var(--secondary-color) !important;
}

@media only screen and (min-width: 768px) {
  .contact__form--input {
    height: 50px;
  }
}

.contact__form--textarea {
  width: 100%;
  height: 100px;
  padding: 12px 15px;
  border-radius: 8px;
  resize: none;
  border: 1px solid var(--border-color);
  font-size: 1.4rem;
}

.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;
  -webkit-transform: translatey(-50%);
  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;
    -webkit-transform: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: var(--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;
  }
}

/* 
    30. Cart page css 
*/
.cart__title {
  color: var(--primary-color);
}

@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);
  color: var(--primary-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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.cart__table--body__list {
  border-bottom: 1px solid var(--border-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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 2rem 0;
  }
}

.cart__thumbnail {
  max-width: 10rem;
  line-height: 1;
}

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

.cart__content {
  padding-left: 1.5rem;
}

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

.cart__content--variant {
  display: block;
  margin-bottom: 0.5rem;
  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__content--title a {
  color: var(--primary-color);
}

.cart__content--title a:hover {
  color: var(--secondary-color);
}

.cart__remove--btn {
  font-weight: 600;
  min-width: 3rem;
  height: 3rem;
  background: var(--body-background-color);
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  margin-right: 1.5rem;
  border-radius: 50%;
  padding: 0;
  border: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@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;
  color: var(--primary-color);
}

@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 {
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  padding: 2rem;
  background: var(--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;
  color: var(--primary-color);
}

@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;
  font-size: 1.4rem;
}

@media only screen and (max-width: 991px) {
  .coupon__code--field {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

.coupon__code--field__input {
  border: 1px solid var(--border-color);
  height: 3.8rem;
  padding: 0 1.5rem;
  border-radius: 2.4rem;
  font-size: 1.4rem;
  width: 150px;
}

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

.coupon__code--field__input:focus {
  border-color: var(--secondary-color);
}

.coupon__code--field__btn {
  margin-left: 1.5rem;
  font-size: 1.4rem;
  height: 3.8rem;
  line-height: 3.8rem;
}

@media only screen and (min-width: 1200px) {
  .coupon__code--field__btn {
    margin-left: 2rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .coupon__code--field__btn {
    font-size: 1.3rem;
    height: 3.8rem;
    line-height: 3.8rem;
    padding: 0 1rem;
  }
}

.cart__note--title {
  font-size: 1.7rem;
  margin-bottom: 0.7rem;
  line-height: 2.4rem;
  color: var(--primary-color);
}

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

.cart__note--desc {
  color: var(--light-color);
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
}

.cart__note--textarea {
  border: 1px solid var(--border-color);
  height: 10rem;
  padding: 1rem;
  width: 100%;
  resize: none;
}

.cart__note--textarea:focus {
  border-color: var(--secondary-color);
}

.cart__summary--total__list {
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.cart__summary--total__list:last-child {
  margin-bottom: 0;
}

.cart__summary--total__title {
  font-size: 1.4rem;
  color: var(--primary-color);
}

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

.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;
  font-size: 1.4rem;
  height: 3.8rem;
  line-height: 3.8rem;
}

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

.wishlist__cart--btn {
  line-height: 4rem;
  height: 4rem;
  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;
  }
}

/*
   29. 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 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.summary__table--list {
  padding: 1rem 2rem 1rem 0;
  border-bottom: 1px solid var(--border-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;
  color: var(--primary-color);
  font-size: 1.4rem;
}

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

.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);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.checkout__checkbox--checkmark::before {
  left: 0.5rem;
  top: 0.3rem;
  width: 0.5rem;
  height: 0.8rem;
  border: solid white;
  border-top-width: medium;
  border-right-width: medium;
  border-bottom-width: medium;
  border-left-width: medium;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
  position: absolute;
  display: none;
}

.checkout__input--label {
  display: inline-block;
  font-size: 1.4rem;
  color: var(--primary-color);
}

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

.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;
  font-size: 1.3rem;
}

@media only screen and (min-width: 1200px) {
  .checkout__input--field {
    font-size: 1.4rem;
  }
}

.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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

.checkout__header--title {
  font-size: 2rem;
  line-height: 2.2rem;
  color: var(--primary-color);
}

@media only screen and (min-width: 1200px) {
  .checkout__header--title {
    font-size: 2.2rem;
    line-height: 2.4rem;
  }
}

@media only screen and (max-width: 575px) {
  .checkout__header--title {
    margin-bottom: 0.8rem;
  }
}

.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;
  font-size: 1.4rem;
}

.checkout__input--select__field:focus {
  border-color: var(--secondary-color);
}

.previous__link--content {
  margin-left: 2rem;
  color: var(--secondary-color);
}

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

.checkout__footer {
  border: 0;
}

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

.checkout__sidebar {
  background: #FAFAFA;
  border: 1px solid var(--border-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--name a {
  color: var(--primary-color);
}

.product__description--name a:hover {
  color: var(--secondary-color);
}

.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;
  font-size: 1.4rem;
}

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

.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.2rem;
    line-height: 4.2rem;
    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;
  color: var(--primary-color);
}

.checkout__total--footer__amount {
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary-color);
}

.checkout__order--summary__title {
  font-size: 2rem;
  line-height: 2.2rem;
  color: var(--primary-color);
}

@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: 1.8rem;
  line-height: 2.2rem;
  color: var(--primary-color);
}

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

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

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

@media only screen and (max-width: 1199px) {
  .payment__history--list {
    margin-bottom: 1rem;
  }
}

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

@media only screen and (max-width: 1199px) {
  .payment__history--list {
    margin-right: 1rem;
  }
}

.payment__history--link {
  background: var(--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.4rem;
    line-height: 4.4rem;
  }
}

.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.4rem;
    line-height: 4.4rem;
  }
}

/* 
    23. My account page css 
*/
.my__account--section__inner {
  background: var(--body-background-color);
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
  padding: 3rem 2rem;
}

@media only screen and (min-width: 1199px) {
  .my__account--section__inner {
    padding: 5rem 4rem;
  }
}

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

.account__left--sidebar {
  border-right: 1px solid var(--border-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;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  margin-bottom: 1.5rem;
}

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

.account__menu--list a {
  color: var(--primary-color);
}

.account__menu--list a: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(--primary-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: 4rem;
  line-height: 4.3rem;
  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;
  font-size: 2rem;
  line-height: 2.8rem;
  color: var(--primary-color);
}

@media only screen and (min-width: 992px) {
  .account__content--title {
    font-size: 2.3rem;
    margin-bottom: 3rem;
  }
}

.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;
  color: var(--primary-color);
}

.account__table--header__child--items:last-child {
  text-align: right;
}

@media only screen and (min-width: 1200px) {
  .account__table--header__child--items {
    font-size: 1.6rem;
    padding: 1.7rem 1.5rem;
  }
}

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

.account__table--body.mobile__block {
  display: none;
}

@media only screen and (max-width: 767px) {
  .account__table--body.mobile__block {
    display: block;
  }
}

@media only screen and (max-width: 767px) {
  .account__table--body__child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 2rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 2rem;
  }

  .account__table--body__child:last-child {
    margin-bottom: 0;
  }
}

.account__table--body__child--items {
  border-bottom: 1px solid var(--border-color);
  padding: 1.7rem 2rem;
  color: var(--primary-color);
}

.account__table--body__child--items:last-child {
  text-align: right;
}

@media only screen and (max-width: 767px) {
  .account__table--body__child--items {
    padding: 0.5rem 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border: 0;
  }
}

@media only screen and (max-width: 479px) {
  .account__table--body__child--items {
    padding: 0.5rem 0;
  }
}

/* 
    34. 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;
  color: var(--primary-color);
}

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

/* 
    24. Login page css 
*/
.account__login {
  background: var(--body-background-color);
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  -webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}

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

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

.account__login--header__title {
  font-weight: 600;
  color: var(--primary-color);
}

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

.account__login--header__desc {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-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 {
  gap: 0.5rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
}

.account__login--signup__text .button {
  padding: 0;
  border: 0;
  background: inherit;
  font-weight: 600;
  color: var(--secondary-color);
}

.account__login--forgot {
  float: right;
  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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
}

@media only screen and (max-width: 575px) {
  .account__login--remember .checkout__checkbox--checkmark {
    top: 0;
    top: 5px;
    -webkit-transform: inherit;
    transform: inherit;
  }
}

.login__remember--label {
  color: var(--primary-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;
  -webkit-transform: translatey(-50%);
  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: 4.6rem;
  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: 4.4rem;
    padding: 0 1.4rem;
  }
}

/* 
    28. 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;
  color: var(--primary-color);
}

@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;
  color: var(--primary-color);
}

.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(--primary-color);
}

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

.compare__description {
  color: var(--primary-color);
  padding: 0.5rem 0;
  font-size: 1.4rem;
}

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

.compare__product--price {
  color: var(--primary-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;
  }
}

/* 
    25. Faq page css 
*/
.face__step {
  margin-bottom: 3.5rem;
  padding-bottom: 3.8rem;
}

.face__step:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.face__step--title {
  font-weight: 600;
  font-size: 2rem;
  line-height: 2.5rem;
  color: var(--primary-color);
}

@media only screen and (max-width: 767px) {
  .face__step--title.mb-30 {
    margin-bottom: 2.2rem;
  }
}

.faq__accordion--btn {
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.1);
  padding: 1.8rem 6rem 1.8rem 2rem;
  font-size: 1.5rem;
  border-radius: 0.5rem;
  color: var(--body-text-color);
}

.faq__accordion--btn .accordion__items--button__icon {
  right: 1rem;
}

@media only screen and (min-width: 768px) {
  .faq__accordion--btn .accordion__items--button__icon {
    right: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .faq__accordion--btn .accordion__items--button__icon {
    right: 2rem;
  }
}

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

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

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

.ctn-preloader .animation-preloader .spinner {
  -webkit-animation: spinner 1s infinite linear;
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  border: 4px solid var(--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;
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  -webkit-animation: letters-loading 5s infinite;
}

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

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

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

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

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

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

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

.ctn-preloader .loader-section {
  background: var(--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 {
  -webkit-transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  -webkit-transform: translateX(-101%);
  transform: translateX(-101%);
}

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

/* Animación del preloader */
@-webkit-keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

@keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

/* Animación de las letras cargando del preloader */
@-webkit-keyframes letters-loading {

  0%,
  75%,
  100% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}

@keyframes letters-loading {

  0%,
  75%,
  100% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}

/* Tamaño de portatil hacia atras (portatil, tablet, celular) */
@media screen and (max-width: 767px) {

  /* Preloader */
  /* Spinner cargando */
  .ctn-preloader .animation-preloader .spinner {
    height: 8em;
    width: 8em;
  }

  /* Texto cargando */
  .ctn-preloader .animation-preloader .txt-loading {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 500px) {
  .ctn-preloader .animation-preloader .spinner {
    height: 7em;
    width: 7em;
  }
}

/* 
    18. 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;
  color: var(--primary-color);
}

@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;
  color: var(--primary-color);
}

@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.4rem;
  margin-bottom: 1.5rem;
  line-height: 2.6rem;
}

@media only screen and (min-width: 1200px) {
  .privacy__policy--content__desc {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}

/* 
    22. Newsletter popup css
*/
/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-animation] .newsletter__popup--inner {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s cubic-bezier(0.51, 0.92, 0.24, 1.15);
  transition: all 0.5s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}

[data-animation].newsletter__show .newsletter__popup--inner {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.newsletter__popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 1rem;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  z-index: 999;
}

.newsletter__popup.newsletter__show {
  visibility: visible;
  opacity: 1;
}

.newsletter__popup.newsletter__show .newsletter__popup--inner {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.newsletter__popup--inner {
  position: relative;
  width: 88%;
  max-height: 80vh;
  border-radius: 10px;
  background: var(--body-background-color);
  -webkit-box-shadow: 2px 0 20px rgba(0, 0, 0, 0.06);
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.06);
  overflow: auto;
  cursor: default;
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
  padding: 1.2rem;
}

@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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.newsletter__popup--close__btn:hover {
  background: var(--primary-color);
}

@media only screen and (min-width: 992px) {
  .newsletter__popup--close__btn {
    width: 3.2rem;
    height: 3.2rem;
  }
}

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

.newsletter__popup--thumbnail {
  width: 280px;
}

@media only screen and (min-width: 992px) {
  .newsletter__popup--thumbnail {
    width: 320px;
  }
}

@media only screen and (min-width: 1200px) {
  .newsletter__popup--thumbnail {
    width: 330px;
  }
}

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

.newsletter__popup--box__right {
  width: 100%;
  padding: 2.5rem 2rem;
  text-align: center;
}

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

@media only screen and (min-width: 768px) {
  .newsletter__popup--box__right {
    width: calc(100% - 280px);
    padding: 2.5rem 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .newsletter__popup--box__right {
    width: calc(100% - 320px);
    padding: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .newsletter__popup--box__right {
    width: calc(100% - 330px);
    padding: 2.5rem 3rem;
  }
}

.newsletter__popup--title {
  margin-bottom: 1.3rem;
  font-size: 2.2rem;
  line-height: 2.5rem;
  color: var(--primary-color);
}

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

.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;
  font-size: 1.3rem;
}

.newsletter__popup--subscribe__input:focus {
  border-color: var(--secondary-color);
}

@media only screen and (min-width: 768px) {
  .newsletter__popup--subscribe__input {
    height: 4.5rem;
    font-size: 1.4rem;
  }
}

.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: 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;
  }
}

/* 
    35. Other section css
*/
.image__width--text {
  position: absolute;
  top: 50%;
  left: 3rem;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
}

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

@media only screen and (min-width: 768px) {
  .image__width--text__inner {
    padding-bottom: 5rem;
  }
}

@media only screen and (min-width: 992px) {
  .image__width--text__inner {
    padding-bottom: 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .image__width--text__inner {
    padding-bottom: 8rem;
  }
}

@media only screen and (max-width: 767px) {
  .image__width--text__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 3rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .image__width--text__thumbnail {
    max-width: 60rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .image__width--text__thumbnail {
    max-width: 52rem;
  }
}

.image__width--text__thumbnail.thumbnail2 {
  position: absolute;
  right: 0;
  bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .image__width--text__thumbnail.thumbnail2 {
    max-width: 50rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .image__width--text__thumbnail.thumbnail2 {
    max-width: 34rem;
  }
}

@media only screen and (max-width: 767px) {
  .image__width--text__thumbnail.thumbnail2 {
    position: inherit;
  }
}

@media only screen and (min-width: 768px) {
  .image__width--text {
    width: 67%;
  }
}

@media only screen and (min-width: 992px) {
  .image__width--text {
    left: 4rem;
    width: 64%;
  }
}

@media only screen and (min-width: 1366px) {
  .image__width--text {
    width: 68%;
  }
}

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

@media only screen and (max-width: 479px) {
  .image__width--text {
    left: 1rem;
    right: 1rem;
  }
}

.image__width--text__title {
  font-size: 2rem;
  line-height: 2.6rem;
  margin-bottom: 1rem;
}

@media only screen and (min-width: 480px) {
  .image__width--text__title {
    font-size: 2.2rem;
    line-height: 3rem;
    margin-bottom: 1.5rem;
  }
}

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

@media only screen and (min-width: 992px) {
  .image__width--text__title {
    font-size: 2.8rem;
    line-height: 3.2rem;
    margin-bottom: 2rem;
  }
}

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

@media only screen and (min-width: 1366px) {
  .image__width--text__title {
    font-size: 3.5rem;
    margin-bottom: 2.5rem;
  }
}

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

@media only screen and (min-width: 480px) {
  .image__width--text__desc {
    font-size: 1.6rem;
    line-height: 2.6rem;
    margin-bottom: 1.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .image__width--text__desc {
    font-size: 1.7rem;
    line-height: 2.8rem;
    margin-bottom: 1.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .image__width--text__desc {
    font-size: 1.7rem;
    line-height: 3rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1366px) {
  .image__width--text__desc {
    font-size: 1.8rem;
    margin-bottom: 3rem;
  }
}

.image__width--text__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
}

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

.image__width--text__link {
  font-size: 1.5rem;
  font-weight: 500;
  font-family: var(--frank-ruhl-fonts);
}

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

.image__width--text__link svg {
  margin-left: 0.5rem;
}

.bideo__play {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translatey(-50%) translatex(-50%);
  transform: translatey(-50%) translatex(-50%);
}

.bideo__play--icon {
  width: 5.5rem;
  height: 5.5rem;
  background: #F7EEDD;
  color: var(--secondary-color);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-animation: animate 2s linear infinite;
  animation: animate 2s linear infinite;
}

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

.bideo__play--icon:hover {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}

@-webkit-keyframes animate {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(201, 127, 95, 0.7);
    box-shadow: 0 0 0 0 rgba(201, 127, 95, 0.7);
  }

  40% {
    -webkit-box-shadow: 0 0 0 50px rgba(201, 127, 95, 0);
    box-shadow: 0 0 0 50px rgba(201, 127, 95, 0);
  }

  80% {
    -webkit-box-shadow: 0 0 0 50px rgba(201, 127, 95, 0);
    box-shadow: 0 0 0 50px rgba(201, 127, 95, 0);
  }

  100% {
    -webkit-box-shadow: 0 0 0 rgba(201, 127, 95, 0);
    box-shadow: 0 0 0 rgba(201, 127, 95, 0);
  }
}

@keyframes animate {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(201, 127, 95, 0.7);
    box-shadow: 0 0 0 0 rgba(201, 127, 95, 0.7);
  }

  40% {
    -webkit-box-shadow: 0 0 0 50px rgba(201, 127, 95, 0);
    box-shadow: 0 0 0 50px rgba(201, 127, 95, 0);
  }

  80% {
    -webkit-box-shadow: 0 0 0 50px rgba(201, 127, 95, 0);
    box-shadow: 0 0 0 50px rgba(201, 127, 95, 0);
  }

  100% {
    -webkit-box-shadow: 0 0 0 rgba(201, 127, 95, 0);
    box-shadow: 0 0 0 rgba(201, 127, 95, 0);
  }
}

.section__shape--img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.section__shape--img.two {
  bottom: 0;
  top: auto;
  right: 0;
  left: auto;
}

/*
  Before After css
*/
#comparison {
  width: 100%;
  padding-bottom: 43%;
  overflow: hidden;
  position: relative;
}

figure {
  position: absolute;
  background-image: url(////banner5.webp);
  background-size: cover;
  font-size: 0;
  width: 100%;
  height: 143px;
  margin: 0;
}

@media only screen and (min-width: 400px) {
  figure {
    height: 171px;
  }
}

@media only screen and (min-width: 480px) {
  figure {
    height: 206px;
  }
}

@media only screen and (min-width: 576px) {
  figure {
    height: 235px;
  }
}

@media only screen and (min-width: 768px) {
  figure {
    height: 318px;
  }
}

@media only screen and (min-width: 992px) {
  figure {
    height: 415px;
  }
}

@media only screen and (min-width: 1200px) {
  figure {
    height: 503px;
  }
}

@media only screen and (min-width: 1366px) {
  figure {
    height: 542px;
  }
}

#divisor {
  background-image: url(///banner4.webp);
  background-size: cover;
  position: absolute;
  width: 50%;
  -webkit-box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
  bottom: 0;
  height: 162px;
}

@media only screen and (min-width: 400px) {
  #divisor {
    height: 182px;
  }
}

@media only screen and (min-width: 480px) {
  #divisor {
    height: 217px;
  }
}

@media only screen and (min-width: 576px) {
  #divisor {
    height: 235px;
  }
}

@media only screen and (min-width: 768px) {
  #divisor {
    height: 318px;
  }
}

@media only screen and (min-width: 992px) {
  #divisor {
    height: 415px;
  }
}

@media only screen and (min-width: 1200px) {
  #divisor {
    height: 503px;
  }
}

@media only screen and (min-width: 1366px) {
  #divisor {
    height: 542px;
  }
}

#divisor::before,
#divisor::after {
  content: '';
  position: absolute;
  right: -2px;
  width: 4px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
}

#divisor::before {
  top: 0;
  -webkit-box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
}

#divisor::after {
  bottom: 0;
  -webkit-box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
}

#handle {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
}

#handle::before,
#handle::after {
  content: '';
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
}

#handle::before {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px;
}

#handle::after {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px;
}

input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  top: 50%;
  left: -25px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: transparent;
  width: calc(100% + 50px);
  z-index: 2;
}

input[type=range]:focus,
input[type=range]:active {
  border: none;
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid white;
  -webkit-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
}

input[type=range]::-moz-range-track {
  -moz-appearance: none;
  height: 15px;
  width: 100%;
  background-color: transparent;
  position: relative;
  outline: none;
}

/*
  skin advice css 
*/
.skin__advice--content__title {
  margin-bottom: 1.6rem;
}

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

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

.skin__advice--content__desc {
  font-size: 1.4rem;
  line-height: 2.4rem;
  padding: 0;
  margin-bottom: 1rem;
}

@media only screen and (min-width: 576px) {
  .skin__advice--content__desc {
    font-size: 1.5rem;
    line-height: 2.6rem;
    padding: 0 2rem;
  }
}

@media only screen and (min-width: 768px) {
  .skin__advice--content__desc {
    font-size: 1.6rem;
    line-height: 3rem;
    padding: 0 5rem;
  }
}

@media only screen and (min-width: 992px) {
  .skin__advice--content__desc {
    font-size: 1.7rem;
    padding: 0 10rem;
    margin-bottom: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .skin__advice--content__desc {
    font-size: 1.8rem;
    line-height: 3.2rem;
    margin-bottom: 1.8rem;
  }
}

@media only screen and (min-width: 1366px) {
  .skin__advice--content__desc {
    font-size: 2rem;
  }
}

.skin__advice--content__subtitle {
  font-size: 1.7rem;
  line-height: 2.8rem;
  font-weight: 400;
}

@media only screen and (min-width: 768px) {
  .skin__advice--content__subtitle {
    font-size: 1.8rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 992px) {
  .skin__advice--content__subtitle {
    font-size: 2rem;
    line-height: 3.2rem;
  }
}

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

/*
  home six css
*/
.img__width--right__sidebar {
  padding-left: 0;
}

@media only screen and (min-width: 1200px) {
  .img__width--right__sidebar {
    padding-left: 1rem;
  }
}

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

@media only screen and (max-width: 991px) {
  .img__width--right__sidebar {
    padding-top: 2.5rem;
  }
}

.img__width--content__logo {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2rem 0 2.5rem;
}

@media only screen and (min-width: 480px) {
  .img__width--content__logo {
    gap: 2rem;
    margin: 2.2rem 0 2.8rem;
  }
}

@media only screen and (min-width: 768px) {
  .img__width--content__logo {
    gap: 2.5rem;
    margin: 2.8rem 0 3rem;
  }
}

@media only screen and (min-width: 992px) {
  .img__width--content__logo {
    margin: 3.2rem 0 3.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .img__width--content__logo {
    gap: 3rem;
    margin: 4.5rem 0 5.2rem;
  }
}

.img__width--logo__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.5rem;
  width: 46%;
}

@media only screen and (min-width: 576px) {
  .img__width--logo__list {
    width: 48%;
  }
}

@media only screen and (min-width: 768px) {
  .img__width--logo__list {
    width: 30%;
  }
}

.img__width--logo__text {
  font-size: 1.6rem;
  color: var(--primary-color);
  font-weight: 500;
}

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

.img__width--banner__box {
  display: inline-block;
}

.img__width--content {
  margin-bottom: 3.5rem;
}

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

.img__width--content__title {
  font-size: 2.2rem;
  line-height: 3rem;
  margin-bottom: 1.2rem;
}

@media only screen and (min-width: 480px) {
  .img__width--content__title {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 768px) {
  .img__width--content__title {
    font-size: 3rem;
    line-height: 3.5rem;
    margin-bottom: 1.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .img__width--content__title {
    font-size: 3.5rem;
    line-height: 4rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .img__width--content__title {
    font-size: 4rem;
    line-height: 5.5rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1366px) {
  .img__width--content__title {
    font-size: 5rem;
    line-height: 6.5rem;
  }
}

.img__width--content__desc {
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: var(--primary-color);
  margin-bottom: 0;
}

@media only screen and (min-width: 480px) {
  .img__width--content__desc {
    font-size: 1.5rem;
    line-height: 2.5rem;
  }
}

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

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

/* 
    9. instagram css
*/
.instagram__thumbnail {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

.instagram__thumbnail:hover .instagram__thumbnail--img {
  -webkit-transform: scale(1.06) rotate(2deg);
  transform: scale(1.06) rotate(2deg);
}

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

.instagram__thumbnail:hover .instagram__social--icon {
  opacity: 1;
}

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

.instagram__thumbnail--link {
  display: block;
  width: 100%;
}

.instagram__thumbnail--img {
  width: 100%;
}

.instagram__social--icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translatey(-50%) translatex(-50%);
  transform: translatey(-50%) translatex(-50%);
  z-index: 9;
  color: var(--text-white-color);
  opacity: 0;
}

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

/*
    parallax banner css
*/
.parallax__banner {
  height: 37rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media only screen and (min-width: 480px) {
  .parallax__banner {
    height: 40rem;
  }
}

@media only screen and (min-width: 576px) {
  .parallax__banner {
    height: 42rem;
  }
}

@media only screen and (min-width: 768px) {
  .parallax__banner {
    height: 52rem;
  }
}

@media only screen and (min-width: 992px) {
  .parallax__banner {
    height: 60rem;
  }
}

@media only screen and (min-width: 1200px) {
  .parallax__banner {
    height: 64rem;
  }
}

@media only screen and (min-width: 1366px) {
  .parallax__banner {
    height: 70rem;
  }
}

@media only screen and (min-width: 1600px) {
  .parallax__banner {
    height: 90rem;
  }
}

.parallax__bg {
  background: url(../img/banner/parallax-banner1.png);
  background-repeat: no-repeat;
  background-position: 38%;
  background-size: cover;
  background-attachment: fixed;
}

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

.parallax__bg2 {
  background: url(../img/banner/parallax-banner2.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.parallax__bg3 {
  background: url(../img/banner/parallax-banner3.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.parallax__bg4 {
  background: url(../img/banner/parallax-banner4.png);
  background-repeat: no-repeat;
  background-position: 72%;
  background-size: cover;
  background-attachment: fixed;
}

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

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

.parallax__banner--content.padding_top {
  padding-top: 4rem;
}

@media only screen and (min-width: 480px) {
  .parallax__banner--content.padding_top {
    padding-top: 5rem;
  }
}

.parallax__banner--content__title {
  font-size: 2.4rem;
  line-height: 3.4rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
}

@media only screen and (min-width: 480px) {
  .parallax__banner--content__title {
    font-size: 2.6rem;
    line-height: 3.7rem;
  }
}

@media only screen and (min-width: 576px) {
  .parallax__banner--content__title {
    font-size: 3rem;
    line-height: 4.2rem;
    margin-bottom: 1.5rem;
  }
}

@media only screen and (min-width: 768px) {
  .parallax__banner--content__title {
    font-size: 3.5rem;
    line-height: 5rem;
  }
}

@media only screen and (min-width: 992px) {
  .parallax__banner--content__title {
    font-size: 4rem;
    line-height: 5.5rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .parallax__banner--content__title {
    font-size: 4.5rem;
    line-height: 6rem;
  }
}

@media only screen and (min-width: 1366px) {
  .parallax__banner--content__title {
    font-size: 5rem;
    line-height: 6.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .parallax__banner--content__title {
    font-size: 5.5rem;
    line-height: 7rem;
  }
}

.parallax__banner--content__desc {
  font-size: 1.5rem;
  line-height: 2.6rem;
  margin-bottom: 1.6rem;
}

@media only screen and (min-width: 576px) {
  .parallax__banner--content__desc {
    font-size: 1.6rem;
    line-height: 2.8rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .parallax__banner--content__desc {
    font-size: 1.8rem;
    line-height: 2.8rem;
    margin-bottom: 2.5rem;
  }
}

/*# sourceMappingURL=style.css.map */
/* ========================================================
   CUSTOM SHOPIFY-STYLE LAYOUT (CSS GRID / FLEXBOX)
   ======================================================== */

.shopify-grid {
  display: grid;
  gap: 30px;
}




.footer-grid {
  grid-template-columns: 1fr;
}

@media only screen and (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 992px) {
  .footer-grid {
    grid-template-columns: 3fr 2fr 2fr 3fr;
  }
}

/* Standard Flex Utility */
.shopify-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.shopify-flex-align-center {
  align-items: center;
}

.shopify-flex-justify-between {
  justify-content: space-between;
}

/* Override image text section for grid */
.image__width--text__section .shopify-grid {
  grid-template-columns: 1fr;
}

@media only screen and (min-width: 992px) {
  .image__width--text__section .shopify-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

/* ========================================================
   IMAGE FIT & OVERFLOW FIXES
   ======================================================== */

/* Product card thumbnail - contain image within fixed ratio box */
.product__card--thumbnail {
  overflow: hidden;
  position: relative;
}

.product__card--thumbnail__link {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.product__card--thumbnail__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease;
}

.product__card--thumbnail__link:hover .product__primary--img {
  transform: scale(1.05);
}

/* Shop collection card images - circular category thumbs */
.shop__collection--img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto 1rem;
}

/* Banner box images - full cover */
.banner__box--thumbnail,
.banner__fullwidth--thumbnail img,
.video__banner--section__thumbnail,
.video__banner--box__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Image width section thumbnails */
.image__width--text__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* General safety: no image should overflow its container */
img {
  max-width: 100%;
  height: auto;
}

/* Hero slider images */
.hero__slider--section img,
.hero__slider--thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================================
   GLOBAL IMAGE BORDER RADIUS - 5px on all images
   ======================================================== */

img {
  border-radius: 5px;
}

/* Override for circular category images - keep them round */
.shop__collection--img {
  border-radius: 50%;
}

/* Override for logo */
.main__logo--link img,
.offcanvas__logo--link img {
  border-radius: 0;
}

/* ========================================================
   PAGE-LEVEL GRID LAYOUT
   body > header / main / footer
   ======================================================== */



body.body .header__section {
  position: absolute !important;
  top: 6rem;
  left: 0;
  right: 0;
  z-index: 120;
  width: 100%;
  background: transparent;
  transition: all 0.3s ease;
}

/* @media (min-width: 767px) {
  body.body .header__section {
    top: 6rem;

  }
} */

body.body .footer__section {
  width: 100%;
}

/* ========================================================
   OVERFLOW OVERLAP FIX
   ======================================================== */

.video__banner--wrapper {
  position: relative !important;
}

.video__banner--section {
  padding-bottom: 50px !important;
}

/* ========================================================
   FLEXBOX IMAGE BLOWOUT FIX
   ======================================================== */

.shopify-flex>div {
  max-width: 100%;
}

.banner__fullwidth--thumbnail {
  max-width: 100%;
  overflow: hidden;
  border-radius: 5px;
}

.banner__fullwidth--thumbnail img {
  width: 100%;
  height: auto !important;
  max-height: 500px;
  /* safety limit */
  object-fit: cover;
}

/* ========================================================
   FULL-WIDTH BANNER FIX
   ======================================================== */

.banner__fullwidth--section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 80px;
  padding-bottom: 80px;
}

.banner__fullwidth--inner {
  position: relative !important;
  top: auto !important;
  transform: none !important;
}

/* ========================================================
   SECTION VERTICAL SPACING (FLEXBOX + GAP)
   ======================================================== */

.shopify-section-flex {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}




/* ========================================================
   SECTION-BY-SECTION FLEX + GAP (CORRECT APPROACH)
   Apply flex column+gap to the section's OWN inner wrapper,
   not the Bootstrap .container which controls horizontal padding
   ======================================================== */

/* Each section's primary content wrapper stacks vertically */
.product__section--inner,
.shop__collection--inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Section headings: zero margins, gap from parent handles spacing */
.section__heading {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* 'Load More' button area � no top margin, gap handles it */
.product__load--more {
  margin-top: 0 !important;
}



/* Inner flex for sections that have heading + content + CTA stacked */
.section__flex--column {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* When a flex row has items that should grow to fill space */
.shopify-flex .shopify-flex-grow {
  flex-grow: 1;
  min-width: 0;
}

.primary__btn {
  font-weight: 500;
  display: inline-block;
  font-size: 1.3rem;
  line-height: 4.2rem;
  height: 3.8rem;
  padding: 0 2rem;
  letter-spacing: 0.2px;
  border-radius: 0.5rem;
  background: #800020;
  color: var(--text-white-color);
  border: 0;
}

.primary__btn:hover {
  background: #800020;
}

@media only screen and (min-width: 768px) {
  .primary__btn {
    line-height: 4.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.8rem;
    height: 4.4rem;
    padding: 0 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .primary__btn {
    line-height: 5rem;
    height: 4.6rem;
    padding: 0 3.5rem;
  }
}

/* ========================================================
   MINIMALIST CATEGORIES SECTION
   ======================================================== */


.home-category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media only screen and (min-width: 768px) {
  .home-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.category-block {
  overflow: hidden;
  background: var(--bg-offwhite-color);
  border-radius: 4px;
}

.category-link {
  display: block;
  text-decoration: none;
}

.category-image-wrap {
  aspect-ratio: 1/1;
  overflow: hidden;
  position: relative;
}

.category-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.category-link:hover .category-image-wrap img {
  transform: scale(1.05);
}

.category-text-wrap {
  padding: 1.5rem 0;
  text-align: center;
}

.category-title {
  font-family: var(--frank-ruhl-fonts);
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary-color);
  margin: 0 0 0.5rem 0;
}

.category-action {
  font-family: var(--karma-fonts);
  font-size: 1.3rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s;
}

.category-link:hover .category-action {
  color: var(--hover-color);
}

/* ========================================================
   MINIMALIST TESTIMONIALS SECTION
   ======================================================== */
.home-testimonials {
  background: #f8f8f8;
  padding: 5rem 0;
  max-width: 1440px;
  margin: 0 auto;
}

.home-testimonials .section__heading--maintitle {
  font-family: var(--frank-ruhl-fonts, 'Frank Ruhl Libre', serif);
  font-size: 3rem;
  color: var(--primary-color);
}

.testimonial__swiper {
  padding-bottom: 5rem;
  position: relative;
}

.testimonial__swiper .swiper-pagination {
  bottom: 0;
  text-align: center;
}

.testimonial__swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--primary-color);
  opacity: 0.3;
}

.testimonial__swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

.testimonial-card {
  background: #fff;
  padding: 4rem 3rem;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.testimonial-card .stars {
  color: #800020;
  font-size: 1.4rem;
  margin-bottom: 2rem;
  letter-spacing: 3px;
}

.testimonial-card p {
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--foreground-sub-color);
  margin-bottom: 3rem;
  font-style: italic;
}

.testimonial-card h4 {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-color);
}

/* ========================================================
   HERO SLIDER – CONTENT WRAPPER (FLEX + GAP)
   ======================================================== */
.hero__content-wrapper {
  display: flex;
  width: 100%;
}








/* ========================================================
   Custom Mini Cart Layout & Header Extras (Full Responsive Screen Adherence)
   ======================================================== */
body.offCanvas__minicart_active {
  overflow: hidden !important;
}

body.offCanvas__minicart_active::before {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  content: "" !important;
  background: rgba(0, 0, 0, 0.6) !important;
  z-index: 99990 !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

.offCanvas__minicart {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 380px !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  padding: 20px 20px 20px !important;
  background: var(--body-background-color) !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  -webkit-transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15) !important;
}

@media only screen and (max-width: 479px) {
  .offCanvas__minicart {
    width: 100vw !important;
    padding: 16px 16px 16px !important;
  }
}

.minicart__header {
  flex: 0 0 auto !important;
}

.minicart__header--top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 1.2rem !important;
  border-bottom: 1px solid var(--border-color) !important;
  margin-bottom: 1.5rem !important;
}

.minicart__title {
  font-family: var(--karma-fonts) !important;
  font-size: 2.2rem !important;
  color: var(--primary-color) !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.minicart__close--btn {
  background: none !important;
  border: none !important;
  font-size: 2.4rem !important;
  cursor: pointer !important;
  color: var(--primary-color) !important;
  line-height: 1 !important;
}

.minicart__empty--text {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.minicart__product {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  margin-bottom: 1rem !important;
  padding-right: 5px !important;
  -webkit-overflow-scrolling: touch !important;
}

.minicart__product::-webkit-scrollbar {
  width: 4px;
}

.minicart__product::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.minicart__amount {
  flex: 0 0 auto !important;
  border-top: 1px solid var(--border-color) !important;
  padding-top: 1.2rem !important;
  margin-top: auto !important;
}

.cart__note {
  margin-bottom: 1rem !important;
}

.cart__note h4 {
  font-family: var(--karma-fonts) !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: var(--primary-color) !important;
  text-transform: uppercase !important;
  margin-bottom: 0.5rem !important;
  letter-spacing: 0.15em !important;
}

.cart__note--input {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 50px !important;
  max-height: 60px !important;
  padding: 0.8rem !important;
  border: 1px solid var(--border-color) !important;
  font-family: var(--karma-fonts) !important;
  font-size: 1.2rem !important;
  color: var(--primary-color) !important;
  resize: none !important;
  outline: none !important;
}

.minicart__amount_list {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 0.6rem !important;
}

.minicart__amount_list span:first-child {
  font-family: var(--karma-fonts) !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

#minicart-subtotal {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--primary-color) !important;
}

.minicart__amount>p {
  font-size: 1.1rem !important;
  color: var(--foreground-sub-color) !important;
  text-align: center !important;
  margin-bottom: 1rem !important;
  line-height: 1.4 !important;
}

.minicart__button {
  flex: 0 0 auto !important;
  padding-bottom: 0.5rem !important;
  display: flex !important;
  gap: 1rem !important;
}

.minicart__button--link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  height: 4.2rem !important;
  line-height: 1 !important;
  padding: 0 1rem !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

.minicart__button--link:not(.checkout__btn) {
  background: #fff !important;
  color: var(--primary-color) !important;
  border: 1.5px solid var(--primary-color) !important;
}

.minicart__button--link.checkout__btn {
  background: #800020 !important;
  color: #fff !important;
  border: 1.5px solid #5c001a !important;
}

/* ========================================================
   Gestalt Law of Proximity & Minicart Item Layout (No Inline CSS)
   ======================================================== */
.is-hidden {
  display: none !important;
}

/* Minicart Item Card */
.minicart__product--items {
  display: flex !important;
  gap: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.minicart__thumb {
  width: 7rem !important;
  height: 7rem !important;
  flex-shrink: 0 !important;
  background: var(--bg-gray-color) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.minicart__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.minicart__text {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.minicart__text--top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 0.8rem !important;
}

.minicart__subtitle {
  font-family: var(--karma-fonts) !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  margin: 0 0 0.4rem 0 !important;
}

.minicart__subtitle a {
  color: var(--primary-color) !important;
  text-decoration: none !important;
}

.color__variant {
  display: block !important;
  font-size: 1.2rem !important;
  color: var(--foreground-sub-color) !important;
  margin-bottom: 0.2rem !important;
}

.made-to-measure-badge {
  color: var(--secondary-color) !important;
  background: rgba(212, 168, 67, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  margin-top: 0.3rem;
}

.minicart__product--remove {
  background: none !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  padding: 0.2rem 0.6rem !important;
  font-size: 1.4rem !important;
  cursor: pointer !important;
  color: var(--foreground-sub-color) !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
}

.minicart__product--remove:hover {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.minicart__text--bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-top: 0.8rem !important;
}

.quantity__box {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

.quantity__value {
  width: 2.5rem !important;
  height: 2.8rem !important;
  background: none !important;
  border: none !important;
  font-size: 1.4rem !important;
  color: var(--primary-color) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.quantity__number {
  width: 3rem !important;
  height: 2.8rem !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid var(--border-color) !important;
  border-right: 1px solid var(--border-color) !important;
  font-size: 1.3rem !important;
  color: var(--primary-color) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.minicart__current--price {
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: var(--primary-color) !important;
}

/* Gestalt Law of Proximity: Product Card Content */
.product__card--content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  /* Tight proximity between title, swatches, price */
  padding-top: 1.2rem;
}

.product__card--title {
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.3;
}

.product-card__swatches {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.2rem;
  align-items: center;
}

.swatch-btn {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  padding: 0;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
  background: none;
  transition: border-color 0.2s ease;
}

.swatch-btn.is-active {
  border-color: var(--primary-color);
}

.swatch-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product__card--price {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.2rem;
}

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

.old__price {
  font-size: 1.3rem;
  text-decoration: line-through;
  color: var(--foreground-sub-color);
}

/* Gestalt Law of Proximity: Form Controls */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Tight proximity between label and input */
  margin-bottom: 2rem;
  /* Larger gap between separate input groups */
}

.form-label {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary-color);
}

.form-input {
  width: 100%;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: inherit;
  font-size: 1.4rem;
  box-sizing: border-box;
  background: #fff;
  color: var(--foreground-color);
}

/* Product Card Action Buttons Overlay & Crisp 3:4 Aspect Ratio Fix */
.product__card--thumbnail {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 3 / 4 !important;
  width: 100% !important;
  background: var(--bg-gray-color, #f5f1ec) !important;
  border-radius: 6px !important;
}

.product__card--thumbnail__link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

.product__card--thumbnail__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.product__card--action-btn {
  position: absolute !important;
  bottom: 1.2rem !important;
  width: 4rem !important;
  height: 4rem !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: var(--primary-color) !important;
  border: 1px solid var(--border-color) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  opacity: 0 !important;
  transform: translateY(10px) !important;
  z-index: 5 !important;
}

.product__card--action-btn.js-cart-add-btn {
  right: 6rem !important;
}

.product__card--action-btn.js-quickview-btn {
  right: 1.2rem !important;
}

.product__card:hover .product__card--action-btn {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.product__card--action-btn:hover {
  background: var(--primary-color) !important;
  color: #ffffff !important;
  border-color: var(--primary-color) !important;
  transform: scale(1.08) !important;
}

/* Logos */
.main__logo--img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.offcanvas__logo--img {
  height: 50px;
  width: auto;
  object-fit: contain;
}

/* ========================================================
   Scroll-Aware Header — Global (all pages)
   ======================================================== */

/* Default state for all pages: solid white header */

/* Transparent header pages (homepage, our story) */
.transparent__header {
  background: transparent !important;
  border-bottom: none !important;
}

/* When transparent header page has not been scrolled:
   - Icons and links are white to show over the hero image */
body.body .header__section {
  position: absolute !important;
  left: 0;
  width: 100%;
  z-index: 999;
  background: transparent !important;
}

.transparent__header .header__menu--link,
.transparent__header .header__account--btn,
.transparent__header .header__account--btn__icon,
.transparent__header .offcanvas__header--menu__open--svg {
  color: var(--text-white-color);
}

.transparent__header .header__topbar {
  display: none;
}

/* Scrolled state (applies to ALL pages) */
.header--scrolled .header__topbar {
  display: none !important;
}

.header--scrolled .main__header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  transition: background 0.3s, box-shadow 0.3s;
  z-index: 9998;
}

/* On scroll, all icons go dark (overrides the white from transparent mode) */
.header--scrolled .header__menu--link,
.header--scrolled .header__account--btn,
.header--scrolled .header__account--btn__icon,
.header--scrolled .offcanvas__header--menu__open--svg {
  color: var(--primary-color);
}

/* -- Header Topbar & Rotating Announcement Slider System -- */
.header__topbar {
  padding: 6px 1rem;
  background: var(--bg-black-color);
  width: 100%;
  position: relative;
  z-index: 100;
}

.header__topbar--inner {
  min-height: 38px;
  height: 38px;
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1.5rem;
}

.topbar-left-spacer {
  width: 70px;
  flex-shrink: 0;
  display: block;
}

@media (max-width: 767px) {
  .topbar-left-spacer {
    display: none;
    width: 0;
  }
}

#announcement-text {
  position: relative;
  height: 38px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  margin: 0;
}

.announcement-slider-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.announcement-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 0.5rem;
  text-align: center;
}

.announcement-slide span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}

.announcement-slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .announcement-slide {
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 767px) {
  .announcement-slide {
    padding-inline: 0.2rem;
  }
}

@media (max-width: 480px) {
  .announcement-slide {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
  }
}

/* -- Checkout Delivery Announcement Banner -- */
.checkout-banner-announcement {
  background: var(--bg-offwhite-color, #faf6f0);
  border: 1px solid var(--border-color, #e8e0d8);
  border-left: 4px solid #800020;
  border-radius: 8px;
  padding: 1.2rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

@media (min-width: 768px) {
  .checkout-banner-announcement {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
}

.checkout-banner-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.header__topbar--currency {
  width: auto;
  flex-shrink: 0;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.currency-switcher {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.15rem 0.5rem;
  outline: none;
  transition: background 0.2s ease;
}

.currency-switcher:hover,
.currency-switcher:focus {
  background: rgba(255, 255, 255, 0.22);
}

.currency-switcher option {
  color: #800020;
}


/* ── Two-column header mega-menu ── */
.header__sub--menu.mega-menu {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  min-width: 420px;
  width: 420px;
  padding: 2rem 2.5rem;
}

.mega-menu .mega-col {
  padding: 0;
}

.mega-menu__heading {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-color);
  margin-bottom: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mega-col__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-col__list .header__sub--menu__items {
  margin-bottom: 0.4rem;
}

.mega-col__list .header__sub--menu__link {
  padding: 0.4rem 0;
  font-size: 1.4rem;
  line-height: 2rem;
}

/* ── Floating Contact Cluster ── */
.floating-contact-cluster {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.floating-contact-toggle {
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  border: none;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.45);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-contact-toggle:hover {
  background: #20ba5a;
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.55);
}

.floating-contact-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  opacity: 0;
  transform: scale(0.8) translateY(2rem);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.floating-contact-cluster.active .floating-contact-menu {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.floating-contact-btn {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s, box-shadow 0.2s;
}

.floating-contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.floating-contact-call {
  background: #1a9c53;
}

.floating-contact-call:hover {
  background: #158244;
}

.floating-contact-whatsapp {
  background: #25d366;
}

.floating-contact-whatsapp:hover {
  background: #1da851;
}

@media only screen and (max-width: 991px) {
  .floating-contact-cluster {
    bottom: calc(75px + 1.2rem);
    right: 1.5rem;
  }
}

@media only screen and (max-width: 479px) {
  .floating-contact-cluster {
    bottom: calc(75px + 1.2rem + env(safe-area-inset-bottom, 0px));
    right: 1.2rem;
  }

  .floating-contact-toggle {
    width: 5rem;
    height: 5rem;
  }

  .floating-contact-btn {
    width: 4.4rem;
    height: 4.4rem;
  }
}

/* ── Visit Our Outlet ── */
.home-outlet {
  background-color: #f5f1ec;
  padding-inline: 2.5rem;
  padding-block: 1.5rem;
}

.outlet__wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.outlet-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.outlet-header .outlet-subtitle {
  display: inline-block;
  color: #D4A843;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #D4A843;
}

.outlet-header .outlet-title {
  font-size: clamp(2.8rem, 4vw, 4rem);
  line-height: 1.1;
  color: #3C3836;
}

.outlet-header .outlet-desc {
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 44ch;
  color: #800020;
}

.outlet-cta {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.outlet-cta.primary__btn {
  padding: 1.3rem 3rem;
  font-size: 1.3rem;
  display: flex;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
  -webkit-transition: background-color 0.2s, color 0.2s;
  -o-transition: background-color 0.2s, color 0.2s;
  transition: background-color 0.2s, color 0.2s;
}

.outlet-slider-wrap {
  display: grid;
  gap: 2rem;
  overflow: visible;
}

.outlet-swiper {
  width: 100%;
  padding-bottom: 40px;
}

.outlet-slide {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.outlet-slide img,
.outlet-slide video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.outlet-slide-video {
  position: relative;
}

.outlet-slide-video video {
  -o-object-fit: cover;
  object-fit: cover;
}

.outlet-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s, transform 0.15s;
}

.outlet-video-play-btn:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: translate(-50%, -50%) scale(1.08);
}

.outlet-video-play-btn::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}

.outlet-slide-video.is-playing .outlet-video-play-btn {
  display: none;
}

.outlet-swiper .swiper-button-prev,
.outlet-swiper .swiper-button-next {
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  top: calc(50% - 20px);
}

.outlet-swiper .swiper-button-prev::after,
.outlet-swiper .swiper-button-next::after {
  font-size: 14px;
}

.outlet-swiper .swiper-pagination {
  bottom: 0;
}

.outlet-swiper .swiper-pagination-bullet {
  background: #3C3836;
  opacity: 0.3;
}

.outlet-swiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: #D4A843;
}