@charset "UTF-8";
@font-face {
  font-family: "VistolSans";
  src: url("../font/vistol-sans/vistol-upright/VistolSans-Light.woff2") format("woff2");
  src: url("../font/vistol-sans/vistol-upright/VistolSans-Light.woff") format("woff");
  font-weight: 300;
}
@font-face {
  font-family: "VistolSans";
  src: url("../font/vistol-sans/vistol-upright/VistolSans-Regular.woff2") format("woff2");
  src: url("../font/vistol-sans/vistol-upright/VistolSans-Regular.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "VistolSans";
  src: url("../font/vistol-sans/vistol-upright/VistolSans-Medium.woff2") format("woff2");
  src: url("../font/vistol-sans/vistol-upright/VistolSans-Medium.woff") format("woff");
  font-weight: 500;
}
@font-face {
  font-family: "VistolSans";
  src: url("../font/vistol-sans/vistol-upright/VistolSans-SemiBold.woff2") format("woff2");
  src: url("../font/vistol-sans/vistol-upright/VistolSans-SemiBold.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "VistolSans";
  src: url("../font/vistol-sans/vistol-upright/VistolSans-Bold.woff2") format("woff2");
  src: url("../font/vistol-sans/vistol-upright/VistolSans-Bold.woff") format("woff");
  font-weight: 700;
}
:root {
  --clr-primary-400: #2F539B;
  --clr-error-400: #f01e00;
  --clr-input-100: #f0f0f2;
  --clr-neutral-100: #fff;
  --clr-neutral-200: #f5f5f5;
  --clr-neutral-300: #89898c;
  --clr-neutral-400: #88888c;
  --clr-neutral-500: #525254;
  --clr-neutral-600: #252526;
  --clr-neutral-700: #111827;
  --clr-neutral-900: #000;
  --clr-border-100: #eee;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-26: 1.625rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-38: 2.375rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --transition-250: all 250ms ease-in;
  --box-shadow-sm: 0px 0px 15px -3px rgba(0,0,0,0.2);
}

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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul {
  margin: 0;
  padding: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  font-family: "VistolSans", Fallback, sans-serif;
  font-weight: 400;
  background-color: var(--clr-neutral-100);
  color: var(--clr-neutral-600);
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

a {
  text-decoration: none;
  color: var(--clr-neutral-600);
}

/* Make images easier to work with */
img,
picture {
  font-style: italic;
  max-width: 100%;
  display: block;
}

.form-control:focus {
  box-shadow: none;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

.accordion-button:focus, .form-select:focus {
  z-index: 3;
  border-color: none;
  outline: 0;
  box-shadow: none;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.clr-primary-400 {
  color: #2F539B !important;
}

.bg-primary-400 {
  background-color: #2F539B !important;
}

.clr-error-400 {
  color: #f01e00 !important;
}

.bg-error-400 {
  background-color: #f01e00 !important;
}

.clr-input-100 {
  color: #f0f0f2 !important;
}

.bg-input-100 {
  background-color: #f0f0f2 !important;
}

.clr-neutral-100 {
  color: #fff !important;
}

.bg-neutral-100 {
  background-color: #fff !important;
}

.clr-neutral-200 {
  color: #f5f5f5 !important;
}

.bg-neutral-200 {
  background-color: #f5f5f5 !important;
}

.clr-neutral-300 {
  color: #89898c !important;
}

.bg-neutral-300 {
  background-color: #89898c !important;
}

.clr-neutral-400 {
  color: #88888c !important;
}

.bg-neutral-400 {
  background-color: #88888c !important;
}

.clr-neutral-500 {
  color: #525254 !important;
}

.bg-neutral-500 {
  background-color: #525254 !important;
}

.clr-neutral-600 {
  color: #252526 !important;
}

.bg-neutral-600 {
  background-color: #252526 !important;
}

.clr-neutral-700 {
  color: #111827 !important;
}

.bg-neutral-700 {
  background-color: #111827 !important;
}

.clr-neutral-900 {
  color: #000 !important;
}

.bg-neutral-900 {
  background-color: #000 !important;
}

.clr-border-100 {
  color: #eee !important;
}

.bg-border-100 {
  background-color: #eee !important;
}

.red-color {
  color: var(--clr-error-400);
}

.bg-gradient-gray {
  background: linear-gradient(179deg, #fff 80%, #f5f5f7);
}

.container-sm {
  max-width: 1000px;
}

.container-normal {
  max-width: 1200px;
}

.fs-14 {
  font-size: 0.875rem;
}

.fs-16 {
  font-size: 1rem;
}

.fs-17 {
  font-size: 1.0625rem;
}

.fs-18 {
  font-size: 1.125rem;
}

.fs-20 {
  font-size: 1.25rem;
}

.fs-22 {
  font-size: 1.375rem;
}

.fs-24 {
  font-size: 1.5rem;
}

.fs-26 {
  font-size: 1.625rem;
}

.fs-28 {
  font-size: 1.75rem;
}

.fs-32 {
  font-size: 2rem;
}

.fs-38 {
  font-size: 2.375rem;
}

.fs-40 {
  font-size: 2.5rem;
}

.fs-48 {
  font-size: 3rem;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

/* base typography */
p {
  font-size: var(--fs-18);
  font-weight: 300;
  color: var(--clr-neutral-400);
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  p {
    font-size: var(--fs-16);
  }
}

.section-heading {
  font-size: var(--fs-48);
  font-weight: 700;
  color: var(--clr-neutral-600);
  line-height: 1.4;
}
@media only screen and (max-width: 992px) {
  .section-heading {
    font-size: var(--fs-32);
  }
}
@media only screen and (max-width: 768px) {
  .section-heading {
    font-size: var(--fs-26);
  }
}

.heading-white {
  font-size: var(--fs-38);
  font-weight: 700;
  color: var(--clr-neutral-100);
  line-height: 1.5;
}
.heading-white--sm {
  font-size: var(--fs-32);
}

.heading-black {
  font-size: var(--fs-40);
  font-weight: 700;
  color: var(--clr-neutral-600);
  line-height: 1.5;
}
.heading-black--sm {
  font-size: var(--fs-32);
}
@media only screen and (max-width: 768px) {
  .heading-black--sm {
    font-size: var(--fs-28);
  }
}

/* Spacer */
.spacer-bottom-xs {
  padding-bottom: 30px;
}
.spacer-bottom-sm {
  padding-bottom: 30px;
}

.eq-spacer-sm {
  padding: 50px 0px;
}

.eq-spacer {
  padding: 50px 0px;
}

.eq-spacer-xl {
  padding: 165px 0px;
}

.spacer-top {
  padding-top: 75px;
}

@media only screen and (max-width: 992px) {
  .eq-spacer {
    padding: 40px 0px;
  }
  .eq-spacer-sm {
    padding: 30px 0px;
  }
}
/* Padding */
.px-100 {
  padding-inline: 100px;
}
@media only screen and (max-width: 992px) {
  .px-100 {
    padding-inline: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .px-100 {
    padding-inline: 15px;
  }
}

.pt-100 {
  padding-top: 100px;
}

#errorWrapper + .errorMessage {
  margin-top: 20px;
  display: block;
}

.errorMessage {
  font-size: var(--fs-14);
  font-weight: 300;
  color: var(--clr-error-400);
  padding-left: 12px;
}

.line-through {
  position: relative;
  line-height: 0;
  margin-bottom: 15px;
}

.line-through > * {
  position: relative;
  z-index: 2;
  background: var(--clr-neutral-200);
  display: inline-block;
  line-height: 1;
  padding: 0px 8px;
}

.line-through::after {
  content: "";
  width: 100%;
  background-color: transparent;
  display: block;
  height: 1px;
  border-top: 1px solid var(--clr-neutral-600);
  position: absolute;
  top: 50%;
  margin-top: -1px;
  z-index: 1;
}

.close-modal {
  cursor: pointer;
}

.reveiw-star-fill svg {
  fill: #f2a33c;
  stroke: #f2a33c;
}

.review-gallery-wrapper {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn.btn-anim i {
  font-size: 16px;
  height: 100%;
  left: 110px;
  padding-top: 10px;
  position: absolute;
  top: 3%;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 100%;
}

.btn.btn-anim .btn-text {
  position: relative;
  top: 0;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  color: var(--clr-neutral-100);
}

div.fileupload.btn {
  position: relative;
  background-color: var(--clr-neutral-600);
  border: 0px;
}

.fileupload input.uploads {
  cursor: pointer;
  filter: alpha(opacity=0);
  font-size: 20px;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  right: -3px;
  top: -3px;
  padding: 5px;
}

.obj-cover {
  object-fit: cover;
}

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

.scroll-margin-20 {
  scroll-margin: 20px;
}

.thumbnail {
  background: none;
  border: none;
}

.mb {
  margin-bottom: 20px;
}

.wholesale-image-container img {
  height: 300px;
  object-fit: cover;
  object-position: top;
  width: 100%;
}

.pagination {
  justify-content: center;
  margin-top: 40px;
  gap: 10px;
}
.pagination li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: var(--clr-neutral-200);
  color: var(--clr-neutral-600);
  border-radius: 50%;
}
.pagination li.active a {
  background-color: var(--clr-neutral-600);
  color: var(--clr-neutral-100);
}

.owl-carousel .owl-stage-outer {
  overflow-y: scroll;
}
.testimonial-section .owl-carousel .owl-stage-outer {
  overflow-y: hidden;
}

.owl-stage-outer::-webkit-scrollbar {
  display: none;
}

.owl-stage-outer {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Buttons */
.btn {
  font-family: "VistolSans";
  font-weight: 500;
  font-size: var(--fs-17);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 250ms ease-in;
}
.btn-white, .btn-black {
  border-radius: 100px;
  color: var(--clr-neutral-600);
  background-color: var(--clr-neutral-100);
  min-width: 144px;
  height: 48px;
}
.btn-white:hover, .btn-black:hover {
  color: var(--clr-neutral-100);
  background-color: var(--clr-neutral-600);
}
.btn-black {
  color: var(--clr-neutral-100);
  background-color: var(--clr-neutral-600);
}
.btn-black:hover {
  color: var(--clr-neutral-600);
  background-color: var(--clr-neutral-100);
}
.btn--sm {
  min-width: 112px;
  height: 36px;
}
.btn--hover-black:hover {
  color: var(--clr-neutral-100);
  background-color: var(--clr-neutral-600);
}
.btn--hover-white:hover {
  color: var(--clr-neutral-600);
  background-color: var(--clr-neutral-100);
}

.btn-black-r0 {
  font-size: 14px;
  height: 36px;
  color: var(--clr-neutral-100);
  background-color: var(--clr-neutral-600);
  border-radius: 0px;
}

.btn-close-text {
  font-size: var(--fs-18);
  font-weight: 300;
  color: var(--clr-neutral-600);
}

.addToListButton {
  background: var(--clr-neutral-300);
  color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 5px;
}

.btn-black-r-0 {
  background-color: var(--clr-neutral-600);
  color: var(--clr-neutral-100);
  border-radius: 8px;
  height: 42px;
  width: 100%;
  border: 0;
  outline: none;
}

.btn-newsletter, .add-to-cart-btn {
  background-color: var(--clr-neutral-600);
  color: var(--clr-neutral-100);
  border-radius: 8px;
  height: 42px;
  width: 100%;
  max-width: 130px;
  border: 0;
  outline: none;
}



.add-to-cart-btn {
  max-width: 170px;
}

.btn-newsletter:hover, .add-to-cart-btn:hover, .btn-black-r-0:hover {
  background-color: var(--clr-neutral-600);
  color: var(--clr-neutral-100);
}

.btn-view-all {
  padding-left: 0px;
  font-size: 18px;
  font-weight: 300;
  color: var(--clr-neutral-500);
}

.tippy-box {
  background-color: var(--clr-neutral-100);
  border: 1px solid var(--clr-neutral-300);
}

.tippy-content {
  padding: 0px;
}

.tippy-box[data-placement^=top] > .tippy-arrow:before {
  border-top-color: #c1c1c1;
  z-index: -1;
}

.popover-template {
  min-width: 260px;
}
.popover-template #popover-header {
  background: var(--clr-neutral-200);
  padding: 10px;
  border-radius: 4px;
  margin-right: 2px;
  color: var(--clr-neutral-600);
  font-size: 14px;
}

.modal-product-details .modal-header {
  border-bottom: 0px;
}
.modal-product-details .modal-footer {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  transition: translate(-50%);
  transform: translateX(-50%);
  background: #fff;
  z-index: 9;
  border-top: 0px;
}
.modal-product-details .modal-header-content h2 {
  font-size: var(--fs-40);
}

#hair-style .modal-gallery img {
  cursor: pointer;
  border-radius: 12px;
  object-fit: contain;
}

.reviews_reviews-box {
  max-width: 90%;
  margin: 0 auto;
}
.reviews_reviews-box img {
  border-radius: 12px;
}
@media only screen and (max-width: 768px) {
  .reviews_reviews-box img {
    height: 300px !important;
    object-fit: cover;
    object-position: top;
  }
  .reviews_reviews-box {
    max-width: 100%;
  }
  .reviews_reviews-box h4 {
    font-size: 16px;
  }
  .reviews_reviews-box h6 {
    font-size: 14px;
  }
}

.owl-nav {
  text-align: center;
  margin-top: 20px;
}
.owl-nav .owl-prev, .owl-nav .owl-next {
  font-size: 80px !important;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.4901960784) !important;
  margin: 0px 5px;
  box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  color: var(--clr-primary-400) !important;
  line-height: 65px !important;
}

/* Hari-system-start */
.hair-system-section .content {
  box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.2);
  padding: 40px 100px;
  border-radius: 20px;
}
@media only screen and (max-width: 992px) {
  .hair-system-section .content {
    padding: 20px 10px;
  }
}

.hair-system-box-row {
  padding-left: 20px;
}

.hair-system-box-row .col-md-6 {
  padding: 3px;
}

.hair-systems-box {
  position: relative;
}
.hair-systems-box .hair-systems-box-info {
  position: absolute;
  margin: 0px auto;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  padding: 50px 12%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
}
@media only screen and (max-width: 992px) {
  .hair-systems-box .hair-systems-box-info {
    padding: 10px 0px 20px 0px;
  }
}
.hair-systems-box img {
  height: 600px;
  object-fit: cover;
  width: 100%;
}

/* hair system men */
.hair-system-men-section .container {
  box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.2);
  padding: 40px 100px;
  border-radius: 20px;
  background-color: var(--clr-neutral-100);
}
@media only screen and (max-width: 992px) {
  .hair-system-men-section .container {
    padding: 20px;
  }
}

.hair-system-men-box-row img {
  height: 235px;
  width: auto;
  object-fit: cover;
  margin: 0 auto;
}
@media only screen and (max-width: 992px) {
  .hair-system-men-box-row img {
    height: 190px;
  }
  .hair-system-men-box-row h3 {
    font-size: 22px;
  }
}

/* testimonial */
.testimonial .owl-item img {
  max-height: 450px;
  object-fit: cover;
  object-position: center;
}

/*  Why richmane   */
.why-richmane .content {
  background-color: #ebebeb;
  padding: 40px 50px;
  border-radius: 12px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 1200px) {
  .why-richmane .content {
    padding: 40px 50px;
  }
}
@media only screen and (max-width: 768px) {
  .why-richmane .content {
    padding: 20px 10px;
  }
}
.why-richmane .why-richmane__three-wrapper ul {
  box-shadow: 4px 18px 14px -3px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 15px;
}
@media only screen and (max-width: 992px) {
  .why-richmane .why-richmane__three-wrapper ul {
    box-shadow: 0px 0px 14px -3px rgba(0, 0, 0, 0.2);
  }
}
.why-richmane .why-richmane__three-wrapper li {
  padding: 10px 0px;
  font-size: 18px;
}
.why-richmane .why-richmane__three-wrapper li i {
  padding-right: 10px;
  color: var(--clr-primary-400);
}

/* ========== Gallery  =================== */
.gallery .owl-dots {
  margin-top: 15px;
}

.gallery-item {
  position: relative;
}
.gallery-item .gallery_content {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 150px 0 40px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
}
@media only screen and (max-width: 768px) {
  .gallery-item img {
    height: 400px;
  }
}
.gallery-item .gallery_title, .gallery-item .gallery_country {
  text-align: center;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 0;
}
.gallery-item .gallery_country {
  font-size: 16px;
  font-weight: 400;
}

/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
}

.flip-container, .front, .back {
  width: 100%;
  height: 600px;
}

/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  background-color: var(--clr-neutral-900);
  padding: 20px;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
@media only screen and (max-width: 768px) {
  .back {
    padding: 15px;
  }
}

.video-section video {
  min-height: 400px;
  max-height: 400px;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.video-section .product-wrapper {
  background: hsla(0, 0%, 100%, 0.82);
  border-radius: 8px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 90%;
  transform: translateX(-50%);
  padding: 5px;
}
.video-section img {
  flex-basis: 20%;
}
.video-section .content-wrapper {
  flex-basis: 50%;
  margin-left: 10px;
}
.video-section .content-wrapper .product-name, .video-section .content-wrapper .price {
  font-size: 13px;
}
.video-section .row > div {
  padding: 0px 10px;
}
.video-section a {
  font-size: 14px;
  background-color: #fff;
  border-radius: 50px;
  flex-basis: 30%;
}
.video-section a:hover {
  background-color: #fff;
}

.tag_product {
  color: var(--clr-neutral-600);
  background: var(--clr-neutral-100);
  padding: 8px 18px;
  border: 2px solid #333;
  border-radius: 50px;
}
.tag_product--sale {
  background-color: #ed3e2f;
  border-color: #ed3e2f;
  color: var(--clr-neutral-100);
}

.filter .accordion-header {
  background-color: #f5f5f5;
  border-bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.filter .accordion-header button {
  background-color: transparent;
}
.filter .accordion-header button:not(.collapsed) {
  background-color: transparent;
}

.accordion--category .accordion-header {
  background-color: #f5f5f5;
  border-bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 20px;
}
.accordion--category .accordion-header a {
  font-size: var(--fs-18);
  color: var(--clr-neutral-500);
  font-weight: 500;
  flex-basis: 70%;
}
.accordion--category .accordion-header button {
  background-color: transparent;
  padding: 0px;
  flex-basis: 30%;
}
.accordion--category .accordion-header button:not(.collapsed) {
  background-color: transparent;
}

.popularity-wrapper select {
  max-width: 200px;
  margin-left: auto;
}

.shoppingguide_content .form-check {
  padding: 20px 35px;
  border: 1px solid #cacacc !important;
  color: var(--clr-neutral-600);
  border-radius: 12px;
}
.shoppingguide_content .form-check-input:checked {
  background-color: var(--clr-neutral-600);
  border: 1px solid var(--clr-neutral-600);
}
.shoppingguide_content .form-check-input:focus {
  box-shadow: none;
}
.shoppingguide_content .card.active {
  border-color: var(--clr-primary-400);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
.shoppingguide_content .shoppingguide_button-wrapper {
  text-align: center;
}

.sweat-wrapper button.active, .exercise-wrapper button.active {
  border-color: var(--clr-primary-400) !important;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.shoppingguide_data-wrapper img {
  object-fit: contain;
}

.product-details .breadcrumb li {
  color: var(--clr-neutral-500);
  font-weight: 300;
}
@media only screen and (max-width: 768px) {
  .product-details .breadcrumb li {
    font-size: var(--fs-14);
  }
  .product-details .breadcrumb li:last-child {
    padding-left: 0px;
  }
}
.product-details .breadcrumb a {
  font-weight: 300;
  color: var(--clr-neutral-500);
}
.product-details .product-tab > ul {
  border-bottom: 1px solid var(--clr-border-100);
  position: sticky;
  top: 120px;
  background: #fff;
  z-index: 1;
  padding-top: 10px;
}
@media only screen and (max-width: 768px) {
  .product-details .product-tab > ul {
    top: 55px;
  }
}
.product-details .product-tab li {
  padding-bottom: 10px;
  flex-basis: 33%;
}
.product-details .product-tab li a {
  font-size: var(--fs-20);
  font-weight: 300;
  color: var(--clr-neutral-600);
  cursor: pointer;
}
.product-details .product-tab li.active {
  border-bottom: 2px solid var(--clr-neutral-600);
}
.product-details #tab-shop {
  scroll-margin-top: 200px;
}
@media only screen and (max-width: 768px) {
  .product-details #tab-shop {
    scroll-margin-top: 110px;
  }
}
.product-details #tab-shop .accordion-button {
  font-size: var(--fs-20);
  color: var(--clr-neutral-600);
  font-weight: 400;
}
@media only screen and (max-width: 768px) {
  .product-details #tab-shop .accordion-button {
    padding-left: 0px;
  }
}
.product-details #tab-shop .accordion-button:not(.collapsed) {
  background-color: var(--clr-neutral-100);
  box-shadow: none;
}
.product-details #tab-shop .accordion-body {
  padding-top: 0px;
  padding-left: 0px;
}
@media only screen and (max-width: 768px) {
  .product-details #tab-shop .accordion-body {
    padding: 0px;
  }
}
.product-details #tab-shop .accordion-body h6 {
  font-size: var(--fs-18);
  color: var(--clr-neutral-300);
  font-weight: 300;
}
.product-details #tab-shop .hair-color-shades-warppaer h4 {
  font-size: var(--fs-18);
  font-weight: 300;
  color: var(--clr-neutral-600);
  padding-bottom: 5px;
}
.product-details .single-shade.active {
  border-bottom: 2px solid var(--clr-neutral-600);
}
.product-details .single-shade-wrapper {
  margin-left: -20px;
  flex-wrap: wrap;
}
@media only screen and (max-width: 768px) {
  .product-details .single-shade-wrapper {
    margin-left: 0px;
  }
}
.product-details .single-shade-wrapper .single-shade {
  flex-basis: 12.5%;
  text-align: center;
  cursor: pointer;
}
@media only screen and (max-width: 1200px) {
  .product-details .single-shade-wrapper .single-shade {
    flex-basis: 16%;
  }
}
.product-details .single-shade-wrapper img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 5px;
}
.product-details .single-shade-wrapper p {
  font-size: var(--fs-14);
  font-weight: 300;
  color: var(--clr-neutral-600);
}
.product-details .customize-pro-box.row {
  gap: 10px;
}
.product-details .customize-pro-box li {
  border: 1px solid var(--clr-neutral-400);
  border-radius: 12px;
  padding: 20px;
  min-height: 81px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}
.product-details .customize-pro-box li:hover {
  border-color: var(--clr-neutral-600);
}
.product-details .customize-pro-box h4 {
  font-size: var(--fs-18);
  font-weight: 300;
  padding-bottom: 5px;
}
.product-details .customize-pro-box .col-6 {
  flex-basis: 48% !important;
}
.product-details .customize-pro-box .col-12 {
  flex-basis: 100% !important;
}
.product-details .recommend-matches h4 {
  font-size: var(--fs-22);
  font-weight: 600;
  margin: 20px 0px;
}
.product-details .recommende-matches-box {
  border: 1px solid rgba(0, 0, 0, 0.062745098);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 10px;
  align-items: center;
}
.product-details .recommende-matches-box .checked-box {
  position: relative;
  flex-basis: 20%;
}
.product-details .recommende-matches-box .checked-box label {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 0;
  width: 28px;
}
.product-details .recommende-matches-box .checked-box label::after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 8px;
  transform: rotate(-45deg);
  width: 12px;
}
.product-details .recommende-matches-box .checked-box input {
  visibility: hidden;
}
.product-details .recommende-matches-box .checked-box input[type=checkbox]:checked + label {
  background-color: #66bb6a;
  border-color: #66bb6a;
}
.product-details .recommende-matches-box .checked-box input[type=checkbox]:checked + label:after {
  opacity: 1;
}
.product-details .recommende-matches-box .content {
  flex-basis: 40%;
  align-items: center;
}
.product-details .recommende-matches-box .content p {
  color: var(--clr-neutral-600);
}
.product-details .recommende-matches-box .price {
  text-align: right;
  flex-basis: 40%;
}

.proudct_gallery-wrapper {
  flex-wrap: wrap;
}
.proudct_gallery-wrapper > a {
  cursor: pointer;
  flex-basis: 50%;
}
@media only screen and (max-width: 768px) {
  .proudct_gallery-wrapper > a {
    flex-basis: 25%;
  }
}

.tab-contents--p {
  padding-left: 16px;
}
@media only screen and (max-width: 768px) {
  .tab-contents--p {
    padding-left: 0px;
  }
}
.tab-contents--p > h2 {
  font-size: var(--fs-28);
  font-weight: 700;
  margin: 20px 0px;
}
@media only screen and (max-width: 768px) {
  .tab-contents--p > h2 {
    margin: 10px 0px;
  }
}
.tab-contents--p > p {
  font-size: var(--fs-16);
  margin-bottom: 16px;
}

#tab-description {
  scroll-margin-top: 200px;
}
@media only screen and (max-width: 768px) {
  #tab-description {
    scroll-margin-top: 110px;
  }
}
#tab-description th {
  font-family: Arial, Helvetica, sans-serif;
  width: 200px;
  height: 20px;
  text-align: left;
  font-weight: 600;
}
@media only screen and (max-width: 768px) {
  #tab-description th {
    width: 120px;
  }
}
#tab-description td {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
}

#tab-reviews {
  scroll-margin-top: 200px;
}
@media only screen and (max-width: 768px) {
  #tab-reviews {
    scroll-margin-top: 110px;
  }
}

.rating-box {
  background-color: var(--clr-neutral-200);
  padding: 40px 20px;
}
@media only screen and (max-width: 992px) {
  .rating-box {
    padding: 20px;
  }
}
.rating-box h2 {
  columns: var(--clr-neutral-500);
  font-size: 5rem;
  font-weight: 700;
}
.rating-box p {
  color: var(--clr-neutral-500);
  font-weight: 600;
}
.rating-box .star {
  text-align: right;
}
.rating-box .star-box {
  padding-right: 15px;
}
.rating-box .star-box svg {
  fill: var(--clr-neutral-400);
  stroke: var(--clr-neutral-400);
}
.rating-box .progress {
  background-color: rgba(0, 0, 0, 0.1);
  height: 5px;
}
.rating-box .progress-bar {
  background-color: var(--clr-neutral-400);
}

.review-box .name {
  font-weight: 600;
}
.review-box .review-time {
  font-size: var(--fs-14);
  color: var(--clr-neutral-400);
}
.review-box .purchased-item p {
  font-size: var(--fs-16);
  color: var(--clr-neutral-400);
}
.review-box .purchased-item-star svg {
  fill: #f2a33c;
  stroke: #f2a33c;
}
.review-box .user-review-image-wrap {
  gap: 10px;
}
.review-box .user-review-image-wrap a {
  width: 100px;
}
.review-box .user-review-image-wrap img {
  object-fit: contain;
}

.product-questions-section a {
  color: var(--clr-neutral-600);
}
.product-questions-section .row > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .product-questions-section .row > div {
    flex-direction: row;
    gap: 20px;
    margin-bottom: 10px;
    justify-content: flex-start;
  }
}
.product-questions-section img {
  width: 32px;
}
.product-questions-section button {
  padding: 0px;
}
.product-questions-section .question-content a {
  color: #004de5;
}

.product-wrapper a {
  color: var(--clr-neutral-600);
}

.fancybox__backdrop {
  background-color: var(--clr-neutral-100);
}

.fancybox__nav .is-next, .fancybox__nav .is-prev {
  color: var(--clr-neutral-100);
  background-color: var(--clr-neutral-300);
  width: 40px;
  height: 40px;
}
.fancybox__nav .f-button svg {
  width: 20px;
  width: 20px;
  stroke: var(--clr-neutral-100);
}

.fancybox__toolbar {
  border-bottom: 1px solid var(--clr-border-100);
}

.fancybox__footer {
  border-top: 1px solid var(--clr-border-100);
}

.modal-footer button {
  letter-spacing: 0.6px;
  font-weight: 400;
}

.modal-bottom-content img {
  object-fit: contain;
}

.hair-length-carousel {
  width: 200px;
  margin: auto;
  transform: rotate(90deg);
}
.hair-length-carousel .owl-item {
  width: 40px !important;
  border-radius: 8px;
}
.hair-length-carousel .owl-item.active {
  background-color: #f5f5f7;
  cursor: pointer;
}
.hair-length-carousel .item {
  transform: rotate(-90deg);
  will-change: transform;
  zoom: 1.05;
  -webkit-font-smoothing: antialiased;
  width: 48px;
  height: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hair-length-carousel .item h4 {
  font-size: var(--fs-28);
  font-weight: 400;
  padding: 0px 10px;
}
.hair-length-carousel .item span {
  font-size: var(--fs-18);
  font-weight: 300;
}

.swiperHairSize {
  max-width: 600px;
  width: 100%;
  height: 100px;
}

.swiperHairSize .swiper-slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.swiperHairSize .swiper-slide {
  opacity: 0.2;
}

.swiperHairSize .swiper-slide-active {
  background: #f4f4f4 !important;
  border-radius: 12px;
  opacity: 1;
}

.swiperHairSize .swiper-slide-next {
  opacity: 0.5;
}

.modal-gallery li > div {
  position: relative;
}

#hair-style .modal-gallery .active > div::after {
  content: "✓";
  position: absolute;
  color: #fff;
  top: 0;
  left: 70%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--clr-primary-400);
}

#greyHairType li {
  position: relative;
}

#greyHairType li.active::after {
  content: "✓";
  position: absolute;
  color: #fff;
  top: 0;
  left: 70%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--clr-primary-400);
}

.add-to-bag {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9;
  background-color: var(--clr-neutral-200);
}
.add-to-bag .priceWrapper span {
  font-weight: 700;
}

.add-to-whishlit {
  background-color: var(--clr-neutral-100) !important;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  border: 1px solid;
}
.add-to-whishlit svg {
  stroke: #ed3e2f;
  height: 25px;
  width: 25px;
}
.add-to-whishlit.active svg {
  fill: #ed3e2f;
}
.add-to-whishlit:hover {
  background-color: var(--clr-neutral-300);
}

.modal-product-details .customize-pro-box li {
  padding: 4px;
}
.modal-product-details .nav-curl::-webkit-scrollbar {
  display: none;
}
.modal-product-details .nav-curl {
  max-height: 400px;
  min-height: 400px;
  overflow-y: scroll;
}
.modal-product-details .tab-content {
  margin-top: 40px;
}
.modal-product-details .hair-modal-box-middle {
  max-width: 650px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 0;
  padding-bottom: 80px;
}
.modal-product-details .modal-gallery#menHairStyle {
  gap: 20px 0px;
}
.modal-body-content #greyHairType .content {

  align-items: flex-start !important;
  
}
.modal-product-details .nav-tabs {
  background-color: var(--clr-neutral-200);
  border-bottom: 0px;
  max-width: 330px;
  padding: 2px;
  border-radius: 14px;
  margin: 0 auto;
}
.modal-product-details .nav-tabs a {
  text-align: center;
  color: var(--clr-neutral-600);
  height: 43px;
  min-width: 163px;
  border-radius: 14px;
}
.modal-product-details .nav-tabs a.active {
  background: var(--clr-neutral-100);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0);
  color: var(--clr-neutral-600);
}

.view-all-content-wrapper {
  max-height: 250px;
  overflow: hidden;
}
.view-all-content-wrapper.active {
  max-height: 100%;
  overflow: inherit;
}

@media only screen and (max-width: 1200px) {
  .product-details .px-100 {
    padding-inline: 15px;
  }
}
.checkout-header {
  box-shadow: var(--box-shadow-sm);
}
.checkout-header .logo {
  object-fit: contain;
}

.checkout-left span.number {
  background: var(--clr-neutral-600);
  height: 40px;
  width: 40px;
  border-radius: 50%;
  color: var(--clr-neutral-100);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fs-24);
  margin-right: 10px;
  line-height: 0px;
}
.checkout-left .accordion-item {
  margin-bottom: 5px;
}
.checkout-left .accordion-button::after {
  content: none;
  width: 0;
  height: 0;
}
.checkout-left #identification p {
  color: var(--clr-neutral-300);
  font-size: var(--fz-14);
}
.checkout-left #identification p:last-child {
  color: var(--clr-neutral-600);
  font-size: var(--fz-18);
  padding-block: 10px;
}
.checkout-left #addressForm label.from-label {
  display: none;
}
.checkout-left #addressForm input {
  border: 0px;
  border-radius: 0px;
  border-bottom: 1px solid var(--clr-border-100);
  padding-left: 0px;
  padding-block: 10px;
}
.checkout-left #addressForm input[type=checkbox] {
  border: 1px solid var(--clr-neutral-600);
}
.checkout-left #addressForm select {
  border: 0px;
  border-radius: 0px;
  border-bottom: 1px solid var(--clr-border-100);
}
.checkout-left #addressForm select option {
  padding: 5px;
}
.checkout-left .form-check-input:checked {
  background-color: var(--clr-neutral-600);
}

#addressBox {
  position: relative;
}

#addressBox.active::after {
  content: "✓";
  position: absolute;
  color: #fff;
  top: 0;
  left: 0%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--clr-primary-400);
}

.checkout-right img {
  object-fit: contain;
}
.checkout-right .cart-title {
  color: var(--clr-neutral-600);
  padding-bottom: 10px;
}
.checkout-right .accordion-button {
  padding: 0px;
}
.checkout-right .accordion-button::after {
  margin-left: 15px;
  background-size: 15px;
}
.checkout-right .cart-items {
  max-height: 200px;
  overflow-y: scroll;
  
}

.checkout-right .cart-items::-webkit-scrollbar {
  width: 5px;
 
}
.checkout-right .cart-items::-webkit-scrollbar-track {
 border-radius: 20px;
 box-shadow: inset 0 0 5px grey;
}

.checkout-right .cart-items::-webkit-scrollbar-thumb {
  background: rgb(107, 107, 107); 
  border-radius: 20px;
}
.checkout-right .cart-price {
  font-size: var(--fs-14);
}
.checkout-right .coupon-code-wrapper {
  padding: 15px 10px;
  background: var(--clr-neutral-100);
  border-radius: 0.375rem;
  border: 1px solid rgba(0, 0, 0, 0.1764705882);
}
.checkout-right label.from-label {
  display: none;
}
.checkout-right input {
  border: 0px;
  border-radius: 0px;
  border-bottom: 1px solid var(--clr-border-100);
  padding-left: 0px;
  padding-block: 10px;
}
.checkout-right #couponBox {
  border: 1px solid green;
  padding: 10px;
  border-radius: 8px;
}
.checkout-right .accordion-button:not(.collapsed) {
  background-color: transparent;
}
.checkout-right #couponCode {
  padding-top: 20px;
}
.checkout-right .cart-footer {
  background-color: var(--clr-neutral-100);
}

.tab-contents-sm h2 {
  margin-bottom: 10px;
}
.tab-contents-sm p {
  font-size: var(--fs-18);
}
.tab-contents-sm p:first-letter {
  font-size: 30px;
  line-height: 1.2;
}

.customize .customize-pro-box li {
  position: relative;
  padding: 10px;
}

.heading-customize {
  font-size: var(--fs-24);
  font-weight: 600;
  padding-bottom: 10px;
}

.customize-pro-box li {
  position: relative;
}

.nav-curl .customize-pro-box li.active::after {
  content: "✓";
  position: absolute;
  color: #fff;
  top: 0;
  left: 0%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--clr-primary-400);
}

section.faq-customzie .faq-card {
  box-shadow: none;
}

@media only screen and (max-width: 768px) {
  .custimize-description-img {
    flex-wrap: wrap;
  }
}
.accountSearch-wrapper .searchField-wrapper {
  position: relative;
}
.accountSearch-wrapper .searchField-wrapper input {
  padding: 10px 10px 10px 50px;
  border: 0px;
  width: 300px;
  max-width: 300px;
  border-radius: 8px;
  background-color: var(--clr-neutral-200);
}
@media only screen and (max-width: 992px) {
  .accountSearch-wrapper .searchField-wrapper input {
    width: 240px;
    padding: 10px 10px 10px 39px;
  }
}
.accountSearch-wrapper .searchField-wrapper .icon-wrapper {
  position: absolute;
  left: 10px;
  top: 25%;
}
.accountSearch-wrapper .searchButton {
  margin-left: 15px;
  min-width: 85px;
}
@media only screen and (max-width: 992px) {
  .accountSearch-wrapper .searchButton {
    min-width: 50px;
  }
}

.order-list-wrapper {
  position: relative;
}
.order-list-wrapper .order-list {
  position: relative;
  border: 1px solid var(--clr-neutral-400);
  padding: 20px 10px;
  border-radius: 8px;
}
.order-list-wrapper .title {
  font-size: var(--fs-14);
  color: var(--clr-neutral-400);
  padding-bottom: 7px;
}
.order-list-wrapper .order-data {
  font-size: var(--fs-18);
  font-weight: 600;
}
@media only screen and (max-width: 992px) {
  .order-list-wrapper {
    padding-inline: 10px;
  }
}

.accourdion-btn button {
  padding: 0px;
}

.order-detials-wrapper .order-detail-title {
  font-size: var(--fs-18);
  font-weight: 600;
  padding-bottom: 10px;
}

.iteam-detail-wrapper .item-heading {
  font-size: var(--fs-38);
  font-weight: 600;
}

#addressModal #sameAsBilling {
  border: 1px solid var(--clr-neutral-600);
}
#addressModal #sameAsBilling:checked {
  background-color: var(--clr-neutral-600);
}

.add-address {
  padding: 20px;
  width: 200px;
}

#addressBox {
  position: relative;
}

.addressCard {
  position: absolute;
  inset: 0;
  background-color: var(--clr-neutral-200);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.account-information-wrapper {
  display: flex;
  justify-content: center;
}
.account-information-wrapper table {
  max-width: 400px;
}
.account-information-wrapper table th {
  font-size: var(--fs-20);
}
.account-information-wrapper table td {
  color: var(--clr-neutral-400);
  font-size: var(--fs-20);
}

#editAccountInformation {
  padding: 10px;
  border-radius: 50px;
  display: block;
  width: 200px;
  margin: 0 auto;
}

#accountForm .password-eye {
  position: absolute;
  top: 70%;
  right: 30px;
  transform: translateY(-50%);
  color: var(--clr-neutral-300);
}

.whislist-content-wrapper img {
  object-fit: contain;
}
.whislist-content-wrapper .btn-remove {
  position: absolute;
  top: 20px;
  right: 20px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: var(--clr-neutral-300);
  border: 0px;
}
.whislist-content-wrapper .btn-remove svg {
  stroke: var(--clr-neutral-100);
}

.whislist-content-wrapper .btn-black{
  font-size: 16px;
  height: 40px;
}

.women-image-section .image-box {
  background: var(--clr-primary-400);
  text-align: center;
  padding: 30px;
  border-radius: 25px;
}
.women-image-section .image-box img {
  border-radius: 8px;
  margin: 0 auto;
  object-fit: cover;
  width: 100%;
}
.women-image-section .image-box h4 {
  padding-top: 15px;
  color: var(--clr-neutral-100);
}

.reset-password-wrapper {
  max-width: 600px;
  margin: 0 auto;
  margin-top: 40px;
  border-color: var(--clr-neutral-600);
}
.reset-password-wrapper .password-eye {
  position: absolute;
  top: 71%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--clr-neutral-300);
}

/* flex start */
/* =========== header Start  =============== */
body.open {
  overflow: hidden;
}

#overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 400ms ease-in-out;
}

#overlay.open {
  display: block;
  opacity: 1;
  transition: opacity 400ms ease-in-out;
  z-index: 100;
  visibility: visible;
}

.primary-header {
  position: sticky;
  top: 0px;
  z-index: 99;
  background-color: var(--clr-neutral-100);
  transition: all 250ms ease-in;
}
.primary-header svg {
  cursor: pointer;
}
.primary-header .btn-cart {
  cursor: pointer;
}
.primary-header .container-fluid {
  padding: 0px 40px;
}
.primary-header .logo img {
  object-fit: contain;
  transition: all 250ms ease-in;
}
.primary-header .cart-wrap {
  position: relative;
}
.primary-header .count-number {
  position: absolute;
  font-size: 12px;
  width: 14px;
  height: 14px;
  border-radius: 100px;
  bottom: -3px;
  right: -4px;
  text-align: center;
  line-height: 16px;
  background-color: var(--clr-neutral-200);
}
.primary-header nav {
  padding: 10px;
  background-color: #f3f3f3;
  border-radius: 8px;
  transition: all 250ms ease-in;
  position: relative;
}
.primary-header nav > ul li {
  padding: 0px 16px;
  position: relative;
}
@media only screen and (max-width: 992px) {
  .primary-header nav > ul li {
    padding: 0px 10px;
  }
}
.primary-header nav > ul li :hover nav > ul a::before {
  width: 100%;
}
.primary-header nav > ul a {
  font-size: 18px;
  font-weight: 300;
  color: var(--clr-neutral-600);
}
@media only screen and (max-width: 992px) {
  .primary-header nav > ul a {
    font-size: 14px;
  }
}
.primary-header .nav-list:hover .nav-link::before {
  width: 100%;
}
.primary-header .nav-link {
  position: relative;
}
.primary-header .nav-link::before {
  content: "";
  left: 0;
  width: 0;
  height: 2px;
  background: #252526;
  border-radius: 4px;
  bottom: 0;
  position: absolute;
  transition: width 0.5s;
  -moz-transition: width 0.5s;
  -webkit-transition: width 0.5s;
  -o-transition: width 0.5s;
}
.primary-header .nav-link::after {
  display: none;
}

.currency-language-box {
  max-height: 18px;
}
.currency-language-box .btn:first-child {
  position: relative;
  padding-right: 16px;
  border-radius: 0px;
}
.currency-language-box .btn:first-child::before {
  content: "";
  position: absolute;
  left: 100%;
  width: 1px;
  height: 18px;
  background-color: var(--clr-neutral-200);
}
.currency-language-box .btn {
  padding: 0;
  font-size: 16px;
  font-weight: 300;
}
.currency-language-box .dolor-icon {
  display: inline-block;
  margin-right: 5px;
  border: 2px solid var(--clr-neutral-300);
  border-radius: 50%;
  font-size: 14px;
  height: 18px;
  line-height: 18px;
  min-width: 18px;
}

.mega-menu {
  width: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1019607843);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background-color: hsla(0, 0%, 100%, 0.92);
  min-height: 123px;
  height: 100%;
  overflow-y: auto;
}
.mega-menu > ul {
  width: 100%;
  max-width: 1000px;
  margin: 36px auto 0;
}
.mega-menu > ul > li {
  display: flex;
}
.mega-menu .close {
  cursor: pointer;
}
.mega-menu .mega-menu__list {
  max-width: 215px;
  width: 100%;
}
.mega-menu .mega-menu__list ul {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  width: 100%;
  text-align: start;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1019607843);
  padding-bottom: 30px;
}
.mega-menu .mega-menu__list li {
  padding: 18px 10px;
}
.mega-menu .mega-menu__list li:hover, .mega-menu .mega-menu__list li.active {
  background-color: #f5f5f7;
  border-radius: 8px;
}
.mega-menu .mega-menu__list li a {
  text-transform: capitalize;
}
.mega-menu a.view-all-product {
  display: flex;
  font-size: var(--fs-14);
}
.mega-menu a.view-all {
  font-size: 14px;
  color: var(--clr-neutral-300);
}
.mega-menu .large-product-img, .mega-menu .large-product-img img, .mega-menu .small-product-img, .mega-menu .small-product-img img {
  border-radius: 8px;
  background: #f5f5f7;
}
.mega-menu .large-product-wrap {
  flex-basis: 40%;
  width: 100%;
}
.mega-menu .large-product .large-product-content {
  padding: 20px 0;
  text-align: center;
}
.mega-menu .large-product .large-product-content p {
  font-size: 14px;
  color: var(--clr-neutral-300);
}
.mega-menu .small-product-wrap {
  flex-basis: 60%;
  margin-left: auto;
  gap: 5px;
}

.mega-menu .dropdown-wrapper{
  /* padding: 20px 50px;
    flex-wrap: wrap;
    justify-content: space-around; */

}

.mega-menu .category-wrapper{
  padding-top: 10px;
  /* width: 25%; */
 
}
.mega-menu .category-wrapper a{
  font-size: 16px;
 
}

.mega-menu .category-wrapper h4{
 
  padding-bottom: 10px;
}
.mega-menu .category-wrapper h4 a{
  font-size: 20px;
  font-weight: 600;
  color: var(--clr-primary-400);
}
.mega-menu .category-wrapper li{
  padding-left: 0px;
  padding-bottom: 10px;
  
}
.mega-menu .category-wrapper li a:hover{
  font-weight: 500;
  
}
.small-product {
  width: 100%;
  max-width: 145px;
  background: #fff;
  height: 270px;
  border-radius: 8px;
  display: block;
  padding-left: 10px;
}

.small-product .small-product-content {
  padding: 15px;
  text-align: center;
}
.small-product .small-product-content p {
  font-size: 14px;
  color: var(--clr-neutral-300);
}

.mega-menu-show {
  position: absolute;
  inset: 0px auto auto 0px;
  margin: 0px;
  transform: translate3d(0px, 30px, 0px);
}

.mega-menu.scrolled {
  transform: translate3d(0px, 30px, 0px);
}

.logo img.scrolled {
  height: 60px;
  transition: all 250ms ease-in;
}

.primary-header.scrolled {
  padding-top: 5px;
  transition: all 250ms ease-in;
}

.primary-nav.scrolled {
  margin-top: 8px;
  transition: all 250ms ease-in;
}

.bottom-section .help-btn {
  background: hsla(0, 0%, 100%, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1019607843);
  border-radius: 7px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  font-size: 14px;
  text-align: center;
  color: #252526;
  width: 145px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  line-height: 1.3;
}

/*  ============== Mobile Header ================ */
.hamburger {
  width: 50px;
  height: 30px;
  transition-duration: 0.5s;
}

.hamburger .icon {
  transition-duration: 0.5s;
  position: absolute;
  height: 2px;
  width: 20px;
  top: 28px;
  background-color: #212121;
}

.hamburger .icon:before {
  transition-duration: 0.5s;
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #212121;
  content: "";
  top: -8px;
}

.hamburger .icon:after {
  transition-duration: 0.5s;
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #212121;
  content: "";
  top: 8px;
}

.hamburger.open .icon {
  transition-duration: 0.5s;
  background: transparent;
}

.hamburger.open .icon:before {
  transform: rotateZ(45deg) scaleX(1.25) translate(4px, 4px);
}

.hamburger.open .icon:after {
  transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
}

.hamburger:hover {
  cursor: pointer;
}

.mobile-logo img {
  object-fit: contain;
  margin: auto;
}

.search-wrapper {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  transition: all 300ms ease-in;
  z-index: 999;
  background-color: var(--clr-neutral-100);
  height: 100%;
}
.search-wrapper .search-top {
  padding: 10px 15px;
  border-bottom: 1px solid var(--clr-neutral-200);
}
.search-wrapper .search-form {
  position: relative;
  flex-basis: 90%;
}
.search-wrapper .search-icon {
  position: absolute;
  left: 10px;
  top: 6px;
}
.search-wrapper .sear-icon > svg {
  color: var(--clr-neutral-300);
}
.search-wrapper .search-input {
  font-size: var(--fs-14);
  font-weight: 300;
  width: 100%;
  border: 0px;
  border-radius: 8px;
  padding: 5px 10px 5px 40px;
  min-height: 36px;
  color: var(--clr-neutral-300);
  background-color: var(--clr-input-100);
}
.search-wrapper .search-bottom {
  padding: 10px 25px;
}
.search-wrapper .search-wrapper-heading {
  font-size: var(--fs-14);
  color: var(--clr-neutral-300);
}
.search-wrapper .search-suggestion li {
  padding: 15px 0px;
  border-bottom: 1px solid var(--clr-neutral-200);
}
.search-wrapper .search-suggestion li a {
  color: var(--clr-neutral-600);
  font-size: var(--fs-14);
  font-weight: 300;
}

.search-close {
  cursor: pointer;
}

.search-wrapper.open {
  right: 0%;
  overflow-x: hidden;
  transition: all 500ms ease-in-out;
}

.mobile-header-wrapper {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--clr-neutral-100);
  z-index: 99;
}

.mobile-header {
  padding: 10px 15px;
}
.mobile-header > div {
  flex-basis: 33.33%;
}
.mobile-header .cart-wrapper > div {
  padding: 0px 8px;
}
.mobile-header .mobile-cart {
  position: relative;
}
.mobile-header .count-number {
  position: absolute;
  font-size: 12px;
  width: 14px;
  height: 14px;
  border-radius: 100px;
  bottom: -3px;
  right: 4px;
  text-align: center;
  line-height: 16px;
  background-color: var(--clr-neutral-200);
}

.mobile-search-popup {
  background: #fff;
  box-shadow: unset;
  height: 100vh;
  left: unset;
  right: -100%;
  top: 0;
  z-index: 99;
}

.mobile-nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 56px;
  height: 0px;
  overflow-y: hidden;
  transition: all 300ms ease-in-out;
  background-color: var(--clr-input-100);
  z-index: 99;
}
.mobile-nav .accordion-button {
  font-size: var(--fs-18);
  font-weight: 300;
  width: 20%;
  padding: 0px;
}
.mobile-nav .accordion-button::after {
  background-size: var(--fs-16);
}
.mobile-nav .accordion-button:focus {
  border-color: var(--clr-input-100);
  box-shadow: none;
}
.mobile-nav .accordion-item {
  padding: 15px;
  align-items: center;
}
.mobile-nav .accordion-item a {
  display: inline-block;
  width: 78%;
  font-size: var(--fs-18);
  font-weight: 300;
}
.mobile-nav .subLink a{
  color: #696969;
}
.mobile-nav_bottom {
  padding-left: 30px;
}
.mobile-nav_bottom li {
  font-weight: 300;
  color: var(--clr-neutral-600);
  margin: 25px 0px;
}
.mobile-nav .accordion-button:not(.collapsed) {
  background-color: var(--clr-neutral-100);
  color: var(--clr-neutral-600);
  box-shadow: none;
}
.mobile-nav .help-btn {
  font-size: 14px !important;
  width: 48% !important;
  height: 55px;
  margin-right: 5px;
}

.mobile-nav.open {
  overflow-y: scroll;
  transition: all 500ms ease-in-out;
  height: 100%;
}

@media only screen and (min-width: 762px) {
  .search-wrapper {
    top: 0px;
    max-width: 400px;
  }
}
.nav-login {
  position: fixed;
  right: -200%;
  top: 0;
  z-index: 999;
  background-color: var(--clr-neutral-100);
  height: 100%;
  transition: all 300ms ease-in-out;
  padding: 20px 15px;
}
.nav-login .nav-tabs {
  border-bottom: 0px;
}
.nav-login .nav-item {
  text-align: center;
  flex-basis: 50%;
}
.nav-login .nav-link {
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--clr-neutral-300);
  border: 0px;
  border-bottom: 3px solid #eee;
}
.nav-login .nav-link.active {
  border: 0px;
  border-bottom: 3px solid var(--clr-neutral-600);
  color: var(--clr-primary-600);
}
.nav-login .login-close {
  position: absolute;
  top: -10px;
  right: 10px;
}
.nav-login .login-close svg {
  color: var(--clr-neutral-300);
}
.nav-login form {
  margin-top: 40px;
}
.nav-login form label {
  display: none;
  font-size: var(--fs-14);
  color: var(--clr-neutral-600);
  font-weight: 300;
}
.nav-login .form-check-label {
  display: block;
}
.nav-login input {
  border: 0px;
  border-bottom: 1px solid var(--clr-border-100);
  border-radius: 0;
  outline: none;
  color: #333;
  font-size: 16px;
  font-weight: 300;
  height: 40px;
}
.nav-login input::placeholder {
  font-size: 14px;
  font-weight: 300;
  color: var(--clr-neutral-300);
}
.nav-login .form-control:focus {
  outline: none;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid var(--clr-border-100);
}
.nav-login .forget-password {
  font-size: var(--fs-14);
  color: var(--clr-primary-300);
  text-decoration: underline;
}
.nav-login .password-eye {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--clr-neutral-300);
}
.nav-login .form-check-input[type=radio], .nav-login input[type=checkbox] {
  border: 1px solid var(--clr-neutral-600);
  width: 14px;
  height: 14px;
}
.nav-login .form-check-input:checked {
  background-color: var(--clr-neutral-600);
}
.nav-login .form-check-input:focus {
  box-shadow: none;
}
.nav-login .btn-black-r0 {
  font-size: 14px;
  height: 36px;
  color: var(--clr-neutral-100);
  background-color: var(--clr-neutral-600);
  border-radius: 0px;
}
.nav-login #login form {
  margin-top: 30px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--clr-border-100);
}
.nav-login .create-account-wrapper {
  padding-top: 40px;
}
.nav-login .create-account-wrapper h3 {
  font-size: var(--fs-16);
  color: var(--clr-neutral-600);
  padding-bottom: 10px;
  font-weight: 700;
}
.nav-login .create-account-wrapper p {
  font-size: var(--fs-14);
  column-rule: var(--clr-neutral-300);
  padding-bottom: 20px;
}
.nav-login .account-benefits-wrapper {
  margin-top: 20px;
}
.nav-login .account-benefits-wrapper h3 {
  font-size: var(--fs-16);
  color: var(--clr-neutral-600);
  padding-bottom: 10px;
  font-weight: 700;
}
.nav-login .account-benefits-wrapper li {
  margin-bottom: 8px;
}
.nav-login .account-benefits-wrapper svg {
  margin-right: 10px;
  color: var(--clr-neutral-600);
}
.nav-login .account-benefits-wrapper span {
  font-size: var(--fs-14);
  color: var(--clr-neutral-300);
}
.nav-login .account-benefits-wrapper .first_order {
  color: var(--clr-neutral-600);
  font-weight: 700;
}

.btn-profile, .profile-close {
  cursor: pointer;
}

.nav-login.open {
  right: 0%;
  overflow-x: hidden;
  transition: all 500ms ease-in-out;
}

@media only screen and (min-width: 762px) {
  .nav-login {
    max-width: 400px;
  }
  .nav-login div#login {
    max-width: 320px;
  }
  .nav-login form {
    max-width: 320px;
  }
  #registrationForm input[type=date] {
    max-width: 350px;
  }
  .nav-login .btn-black-r0 {
    width: 330px !important;
  }
}
.login-header img {
  object-fit: contain;
}

.login-wrapper #loginForm, .login-wrapper #registrationForm, .login-wrapper #forgetForm, .login-wrapper #verficationForm {
  border: 1px solid #969696;
  padding: 20px;
  box-shadow: var(--box-shadow-sm);
  border-radius: 12px;
  margin-bottom: 30px;
}
.login-wrapper .password-eye {
  position: absolute;
  top: 70%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--clr-neutral-300);
}
.login-wrapper .password-eye.error {
  top: 40%;
}

.hero-banner {
  min-height: 500px;
 
}
.hero-banner .banner-carousel .item{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.hero-banner .banner-carousel .img{
  max-height: 500px;
}



@media only screen and (max-width: 992px) {
  .hero-banner  {
    min-height: 400px;
  }
}
@media only screen and (max-width: 768px) {
  .hero-banner {
    min-height: 200px;
  }
}




.video-banner {
  margin-bottom: -10px;
}
.video-banner .home--video {
  max-height: 500px;
  height: 100%;
}

.cart-items-wrapper {
  position: fixed;
  right: -200%;
  top: 0;
  z-index: 999;
  background-color: var(--clr-neutral-100);
  width: 100%;
  height: 100%;
  transition: all 300ms ease-in-out;
  padding-block: 20px;
}
.cart-items-wrapper h4 {
  font-size: var(--fs-24);
  font-weight: 300;
  color: var(--clr-neutral-600);
}
.cart-items-wrapper svg {
  cursor: pointer;
  color: var(--clr-neutral-300);
}
.cart-items-wrapper .cart-header {
  padding-bottom: 20px;
  padding-inline: 15px;
}

.cart-items-wrapper.open {
  right: 0%;
  overflow-x: hidden;
  transition: all 500ms ease-in-out;
}

.product-list {
  padding-inline: 15px;
}
.product-list th {
  width: 50%;
}
.product-list th, .product-list td {
  text-align: left;
  padding-inline: 20px;
}
.product-list .mini-cart-item {
  border: 0px;
}
.product-list .mini-cart-title {
  font-size: var(--fs-18);
  font-weight: 600;
  padding-bottom: 10px;
  color: var(--clr-neutral-600);
  text-align: left;
}
.product-list .mini-cart-price {
  color: var(--clr-neutral-600);
  font-size: var(--fs-20);
  font-weight: 600;
  text-align: left;
}

.loading-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--clr-neutral-100);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-wrapper-btn {
  position: relative;
}

.mini-cart-footer .price-details, .mini-cart-footer .price-total {
  margin: 0px;
}
.mini-cart-footer th {
  width: 70%;
}
.mini-cart-footer th, .mini-cart-footer td {
  background-color: transparent;
  text-align: left;
  padding-inline: 20px;
}
.mini-cart-footer .price-total a.btn {
  width: 100%;
}
.mini-cart-footer .min-cart_footer-text {
  padding-block: 10px;
  font-size: var(--fs-16);
}

@media only screen and (min-width: 762px) {
  .cart-items-wrapper {
    max-width: 400px;
  }
  .cart-items-wrapper .btn-black-r0 {
    width: 330px !important;
  }
}
.product-section, .hair-system-men-section {
  overflow-x: hidden;
}

.hair-system-section {
  overflow: hidden;
}

.product-section {
  padding: 20px 40px;
}

.product-box-col {
  padding: 3px;
}

.product-box {
  position: relative;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
  padding: 0px 20px;
}
.product-box img {
  height: 170px;
  object-fit: contain;
  width: 100%;
}
.product-box .product-box-info {
  width: 100%;
  padding: 0px 20px 20px;
}
@media only screen and (max-width: 768px) {
  .product-box {
    padding: 7px 10px;
  }
}
.product-box h5 {
  font-size: 22px;
  color: var(--clr-neutral-600);
}
@media only screen and (max-width: 1200px) {
  .product-box h5 {
    font-size: 18px;
  }
}
@media only screen and (max-width: 768px) {
  .product-box h5 {
    font-size: 18px;
  }
}

.myaccount-wrapper {
  position: fixed;
  right: -200%;
  top: 0;
  z-index: 999;
  background-color: var(--clr-neutral-100);
  width: 100%;
  height: 100%;
  transition: all 300ms ease-in-out;
  padding: 20px 15px;
}
.myaccount-wrapper .myaccount-avatar {
  background-color: var(--clr-neutral-200);
  height: 55px;
  width: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}
.myaccount-wrapper .myaccount-avatar p {
  font-size: var(--fs-38);
  font-weight: 700;
  color: #999;
}
.myaccount-wrapper .myaccount-close {
  position: absolute;
  top: -10px;
  right: 10px;
  cursor: pointer;
}
.myaccount-wrapper .myaccount-close svg {
  color: var(--clr-neutral-300);
}
.myaccount-wrapper .content p {
  font-size: var(--fs-18);
  color: var(--clr-neutral-600);
}
.myaccount-wrapper ul {
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--clr-border-100);
  border-bottom: 3px solid var(--clr-border-100);
}
.myaccount-wrapper ul a {
  border-bottom: 1px solid var(--clr-border-100);
  color: var(--clr-neutral-600);
  font-weight: 500;
  padding: 15px 0px;
}

.myaccount-wrapper.open {
  right: 0%;
  overflow-x: hidden;
  transition: all 500ms ease-in-out;
}

@media only screen and (min-width: 762px) {
  .myaccount-wrapper {
    max-width: 400px;
  }
}
.newsletter-section {
  border-bottom: 1px solid #bababf;
}

.newsletter_form input {
  height: 42px;
  min-width: 300px;
  border-radius: 8px;
  border: none;
  box-shadow: none;
  font-size: 16px;
  color: #252526;
  padding: 0 12px;
  background: #fff;
  outline: none;
  padding-inline: 10px;
}
@media only screen and (max-width: 768px) {
  .newsletter_form input {
    min-width: 210px;
  }
}

.primary-footer {
  background: #f3f3f3;
  padding-top: 50px;
  padding-bottom: 30px;
}
.primary-footer .footer-top {
  padding-bottom: 40px;
}
@media only screen and (max-width: 768px) {
  .primary-footer {
    padding-top: 30px;
  }
  .primary-footer .footer-top {
    padding-bottom: 20px;
  }
}
.primary-footer .container-fluid {
  padding: 0px 40px;
}
@media only screen and (max-width: 768px) {
  .primary-footer .container-fluid {
    padding: 0px 15px;
  }
}
.primary-footer .footer-heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-neutral-600);
  padding-bottom: 15px;
}
@media only screen and (max-width: 768px) {
  .primary-footer .footer-heading {
    padding-bottom: 10px;
  }
}
.primary-footer .footer-links li {
  padding: 3px 0px;
}
.primary-footer .footer-links li a {
  font-weight: 300;
  color: var(--clr-neutral-500);
}
.primary-footer .footer-contact-list {
  font-size: 16px;
}
.primary-footer .footer-contact-list li {
  padding: 3px;
}
.primary-footer .footer-contact-list li a {
  font-size: 20px;
  font-weight: 300;
  color: var(--clr-neutral-500);
}
.primary-footer .footer-contact-list i {
  padding-right: 10px;
  font-size: var(--fs-14);
}

.socail-icons-list li {
  padding: 10px 10px;
}
.socail-icons-list a {
  font-size: 20px;
  color: var(--clr-neutral-600);
}

.footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.1019607843);
  padding-top: 10px;
}
.footer-bottom .left li {
  padding-inline: 5px;
}
.footer-bottom .left a {
  font-size: 14px;
  font-weight: 300;
  color: var(--clr-neutral-500);
}
@media only screen and (max-width: 768px) {
  .footer-bottom ul {
    flex-wrap: wrap;
  }
  .footer-bottom ul li {
    flex-basis: 100%;
  }
}


 /* ====================== Shop By Category ===================== */  

 .show-by-category-section a{
  border: 5px solid var(--clr-primary-400);
  border-radius: 12px;
  padding: 3px;
  text-align: center;
  display: inline-block;
  width: 100%;
 }
 .show-by-category-section .container {
  max-width: 1600px;
  
 }
 
 .show-by-category-section a h6{
  font-size: 24px;
  color: var(--clr-primary-400);
  padding-block: 10px 5px;

 }
 .show-by-category-section a p{
  font-size: 24px;
  font-weight: 600;
  color: var(--clr-primary-400);
  

 }
 .show-by-category-section img{

  max-width: 200px;
  min-height: 180px;
  object-fit: cover;
  max-height: 180px;
  width: 100%;
  border-radius: 8px;

 }

 /* ====================== Customize Section ===================== */  


 .customize-section h5{

  font-size: 2.25rem;
  font-weight: 600;

 }
 .customize-section h6{

  padding-bottom: 20px;
  font-size: 1.25rem;
  font-weight: 600;

 }

 .customize-section .background-img{
  min-height: 400px;
 }
 .customize-section .customize-wrapper {
  box-shadow: 10px 8px 12px 5px rgba(0, 0, 0, 0.3);
    margin-bottom: 40px;
    padding: 20px 15px;
    border-radius: 12px;
    
 }
 .customize-section ul p {

  flex: 1 0 30% ;
  font-size: 18px;
  color: var(--clr-primary-400);
  padding-bottom: 15px;
  display: flex;
  align-items: center;


 }
 .customize-section p.last-element{
  text-align: right;
  font-size: 18px;
  color: var(--clr-primary-400);
 }

 .customize-section a:hover {
transition: 200ms ease-in;
  background-color: transparent;
  border: 1px solid #000;
  color: #000;

 }
 .background-img{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 12px;

 }


 /* Popular Product section */

 .Popular-product-section img{
  min-height: 180px;
  max-height: 180px;
  margin: 0 auto;

 }

 /* Why Richmane  */

 .why-richmane-three-wrapper > div > ul{
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    padding: 20px 15px;
    border-radius: 12px;
 }
 .why-richmane-three-wrapper li{
  display: flex;
  align-items: center;
  gap: 10px ;
  color: var(--clr-primary-400);
  padding-bottom: 10px;
  
 }


 /* Righs Customzie Button */

 .right-customize-button{
  position: fixed;
  bottom: 80px;
  width: 44px;
  right: 0;
  height: 250px;
  background-color: var(--clr-primary-400);
  z-index: 6;
  color: #fff;
  letter-spacing: 1px;
  cursor: pointer;
 }

 .right-customize-button .inner-wrapper .image-wrapper{
  padding-top: 14px;
  margin-left: 5px;
 }
 .right-customize-button .inner-wrapper img{
  width: 30px;
  transform: rotate(90deg);
 }
 .right-customize-button .inner-wrapper a{
  transform: rotate(360deg);
  width: 36px;
  writing-mode: vertical-rl;
  padding: 2px;
  height: 200px;
  vertical-align: middle;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  -webkit-margin-after: 0;
  margin-block-end: 0;
  -webkit-margin-before: 0;
  margin-block-start: 0;
  color: #fcfcfc;
  display: inline-block;
 
 }

 /* Saloon Patner */
 #requestKit .modal-dialog{
  max-width: 800px;
 }


 /* Customer Transforamtion   */
.customer-transformation-wrapper .background-image{
  min-height: 400px;
  max-height: 400px;
  /* min-width: 00px; */
  /* max-width: 300px; */
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
}

  
 
.customer-transformation-wrapper .product-wrapper  {
  background: hsla(0, 0%, 100%, 0.82);
    border-radius: 8px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    padding: 5px;
}

.customer-transformation-wrapper .product-wrapper p{
  font-size: var(--fz-16);
}

.customer-tranforamtion-video-banner{
  background-color: #000;
}
.customer-tranforamtion-video-banner video{
  width: 100%;
    height: 500px;
}
 @media only screen and (max-width: 768px) {
  .show-by-category-section .container .row  > div{
    padding-inline: 5px;

  }




}
/*# sourceMappingURL=style.css.map */