/*------------------------------------------------------------------
Project: Zen Mart App
Author: The_Krishna       
Last change: 14/08/2024 
Primary use: Zen Mart Mobile App PWA
-------------------------------------------------------------------*/
/*----------------Table of contents Start---------------------------
1.Default CSS
2.Splashscreen CSS
3.Onboarding CSS
4.Let Get Started CSS
5.Sign Up CSS
6.Sign In CSS
7.Otp CSS
8.Finger Print CSS
9.Preferred Language CSS
10.Choose Interest CSS
11.Delete Account CSS
12.Deactive Account CSS
13.Delete Deactive Account CSS
14.Invite Friend CSS
15.Contact Us CSS
16.Feedback CSS
17.Faq CSS
18.Homescreen1 CSS
19.Category1 CSS
20.Hot Deal Week CSS
21.Best Seller CSS
22.Tabbar CSS
23.Single Clothes CSS
24.About Us CSS
25.Data Privacy CSS
26.Notification Setting CSS
27.Marketing Preference CSS
28.Setting CSS
29.Category2 CSS
30.Search CSS
31.Empty Order CSS
32.Active Order CSS
33.Track Order CSS
34.Payment Method CSS
35.Checkout CSS
36.Promo Voucher CSS
37.Choose Method CSS
38.Payment Processing Modal CSS
39.Leave Review CSS
40.Filter CSS
41.Add New Address2 CSS
42.Add New Card CSS
43.Account CSS
44.Profile Edit CSS
45.Homescreen2 CSS
46.Rating Review CSS
47.Wallet CSS
48.Cart CSS
49.Notification CSS

---------Table of contents End-----------------------------------*/

/*------------------------ [Color codes] ------------------------                    
Background: #FBF2E9, #12151C, #FC342F, #00D061, #FFFFFF, #FFAA01
Content: #12151C, #FC342F, #FFFFFF, #00D061    
paragraph p: #464849, #12151C  
-------------------------------------------------------------------*/

/************************ 1.Default CSS ***************************/
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  height: 100%;
}
*,
::after,
::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
a:focus,
a {
  outline: none;
  text-decoration: none;
  cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}
body {
  max-width: 600px;
  margin: 0 auto;
  height: 100%;
}
svg {
  vertical-align: middle;
}
input {
  outline-width: 0;
  outline-offset: 0;
  outline: 0;
}
textarea {
  outline-width: 0;
  outline-offset: 0;
  outline: 0;
}
ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.container {
  padding: 0 16px;
}
.pt-4 {
  padding-top: 4px !important;
}
.pt-8 {
  padding-top: 8px;
}
.pt-16 {
  padding-top: 16px;
}
.pt-12 {
  padding-top: 12px !important;
}
.pt-24 {
  padding-top: 24px;
}
.pt-32 {
  padding-top: 32px !important;
}
.mt-4 {
  margin-top: 4px !important;
}
.mt-8 {
  margin-top: 8px;
}
.mt-12 {
  margin-top: 12px;
}
.mt-16 {
  margin-top: 16px !important;
}
.mt-24 {
  margin-top: 24px;
}
.mt-32 {
  margin-top: 32px;
}
.border-radius,
.sign-up-btn a,
.icons_main a,
.sign-in-btn a,
.input-wrapper {
  border-radius: 12px;
}

.sign-up-btn button {
  border-radius: 12px !important;
}
.color-black,
.delete-txt {
  color: var(--2, #12151c) !important;
}
#about-us-main,
#data-privacy-main,
#setting-main,
#best-seller-main,
#category1-main,
#feature-product-main,
#choose-brand-main,
#new-arrival,
#clothes-main,
#invite-friend-main,
#contact-us-main,
#notification-setting-main,
#rating-review,
#hot-deal-week,
#active-order-main,
#order-track-main,
#promo-voucher-main,
#marketing-preference-main,
#language-main,
#faq-main {
  padding-bottom: 20px;
}
#account-created-main,
#let-get-started-main,
#sign-up-main,
#delete-account-main,
#delete-account-main,
#delete-deactivate-main,
#feedback-main,
#onboarding,
#homescreen-main,
#homescreen2-main,
#recent-search-screen-main,
#empty-order-main,
#leave-review-main {
  padding-bottom: 80px;
}
#checkout-main,
#choose-payment-main,
#choose-delivery-partner,
#choose-delivery-main,
#add-new-address1-main,
#add-new-address2-main,
#add-new-card,
#account-main,
#profile-edit-main,
#wishlist-main,
#wallet-main,
#verify-main,
#fingerprint-main,
#choose-interest-main,
#search-screen-main,
#search-not-found-main,
#filter-main,
#empty-cart-main,
#delivery-address-main,
#select-promo-voucher-main,
#security-main {
  padding-bottom: 100px;
}
.language-main-preferred {
  padding-bottom: 80px;
}
.green-bg {
  background: var(--5, #00d061) !important;
}
.red-bg {
  background: #fc342f !important;
}
.yellow-bg {
  background: var(--4, #ffaa01) !important;
}
.color-red {
  color: #fc342f !important;
}
.display-flex,
.sign-up-btn a,
.sign-in-btn a,
.footer ul,
.otp-section,
.timer-counter-content,
.finger-print-bottom,
.opt-border,
.language-sec-wrap,
#language-main .form-check-input:checked + label,
.seller-slide-top-content,
.home-page-favourite {
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-radio-sel-friend,
.featured-slide-top,
.home-page-featured-favourite,
.marquee-img-main,
.brands-img,
.home-page-arrival-favourite,
.category1-img,
.hot-week-favourite,
.hot-deal-img,
.brand-details,
.bottom-tabbar a,
.single-slider-btn-prev,
.single-slider-btn-next {
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-clothes-favourite,
.custom-radio-sel-size,
.col-deatils,
.product__minus span,
.product__plus span,
.shape,
.notification-option-switch,
.setting-icon,
.home3-cate-img,
.clear-all a,
.delete-btn-wrap,
.order-cancle-btn a,
.yes-cancel-btn a,
.track1,
.track-boder,
.track-boder2,
.bank-img,
.partner-logo,
.redeem-txt a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.splash-btn,
.custom-slider-btn,
.opt-border,
.scan,
.home1-tab-img img,
.clear-all,
.sk-fading-circle,
.home3-cate-img {
  margin-left: auto;
  margin-right: auto;
}
.footer,
.main-wrap,
.fixed,
.single-clothes-bottom {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  max-width: 600px;
  margin: 0 auto;
  z-index: 99;
}
.scan .fingerprint::before,
.homescreen-third-wrapper:before,
.shop-now2-sec,
#splashscreen,
.onboarding-bg-img1,
.onboarding-bg-img {
  background-size: cover;
  background-repeat: no-repeat;
}
#msform fieldset:not(:first-of-type) {
  display: none;
}
::-webkit-scrollbar {
  display: none;
}
#homescreen2-main,
#homescreen-main,
#category1-main,
#single-clothes-main,
#empty-cart-main,
#checkout-main,
#delivery-address-main {
  overflow-y: scroll;
}

/************************ 2.Splashscreen CSS ***************************/
#splashscreen {
  background-image: url(../images/splashscreen/splashscreen-bg-img.png);
  background-position: top;
  width: 100%;
  height: 100%;
  position: relative;
}
.overlay-splashscreen {
  position: absolute;
  opacity: 0.85;
  background: linear-gradient(180deg, rgba(18, 21, 28, 0) 0%, #12151c 100%);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.logo-tile h1,
.onboarding-content h1,
.onboarding-content h2,
.get-started-content h1,
.sign-up-content h1,
.contact-txt h1 {
  color: var(--2, #12151c);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
}
.onboarding-content h1,
.onboarding-content h2,
.get-started-content h1,
.sign-up-content h1 {
  line-height: 40px;
}
.onboarding-content p,
.logo-tile p,
.get-started-content p,
.footer ul li a,
.sign-up-content p,
.footer-chec-txt,
.block-footer p,
.forget-btn a,
.resend-otp,
.open-email-skip-btn a,
.delete-txt,
.friend-name,
.contact-txt p,
.homescreen-title p,
.view-all-txt,
.order-txt {
  color: var(--3, #464849);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
.splash-btn {
  width: fit-content;

  background: var(--6, #fc342f);
  margin-top: 48px;
  margin-bottom: 30px;
}
.splash-btn a {
  background: var(--6, #fc342f);
  color: var(--1, #fff) !important;
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  border-radius: 12px;
  padding: 12px 44px;
}
.site-content {
  width: 100%;
  height: 100%;
}

/************************ 3.Onboarding CSS ***************************/
.background {
  background: #fbf2e9;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.onboarding-bg-img2 {
  position: absolute;
  bottom: 0;
}
.skip-btn1 a,
.or-section p,
.contact-us-no {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
.onboarding-main-content {
  position: relative;
  padding-top: 20px;
}
.oval-frame {
  border: 10px solid white;
  border-radius: 50%;
  box-shadow: 0px 0px 32px 0px rgba(18, 21, 28, 0.16);
  z-index: 0;
  position: relative;
}
.onboarding-content {
  padding: 40px 16px 0 16px;
}
#onboarding .splash-btn {
  margin-left: 16px;
  margin-right: 0;
  position: fixed;
  bottom: 0;
  margin-bottom: 20px;
}
.custom-slider-btn {
  bottom: 35px;
  position: fixed;
  z-index: 2;
  padding: 0;
  list-style: none;
  height: fit-content;
  justify-content: end !important;
  width: fit-content;
  margin-bottom: 0;
  right: -25%;
}
.custom-slider-btn .active {
  width: 30px !important;
  border: 2px solid #12151c !important;
  background: transparent !important;
}
.custom-slider-dots {
  width: 12px !important;
  height: 12px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 2px solid rgb(18 21 28 / 24%) !important;
  margin-left: 8px !important;
}
#onboarding .carousel-item {
  transition: none !important;
}
.Ellipse1,
.Ellipse2,
.Ellipse3,
.Ellipse4 {
  position: absolute;
  width: 162px;
  height: 174px;
}
.Ellipse1 {
  top: 0;
  left: 0;
  animation: changeColor1 10s linear infinite;
}
.Ellipse2 {
  top: 0;
  right: 0;
  animation: changeColor1 10s linear infinite;
}
.Ellipse3 {
  left: 0;
  top: 50%;
  animation: changeColor2 10s linear infinite;
}
.Ellipse4 {
  top: 50%;
  right: 0;
  animation: changeColor3 10s linear infinite;
}
@keyframes changeColor1 {
  0%,
  20% {
    background-color: #ffaa01;
    filter: blur(125px);
  }
  40% {
    background-color: #00d061;
    filter: blur(125px);
  }
  60% {
    background-color: #fc342f;
    filter: blur(125px);
  }
  80%,
  100% {
    background-color: #ffaa01;
    filter: blur(125px);
  }
}
@keyframes changeColor2 {
  0%,
  20% {
    background-color: #00d061;
    filter: blur(125px);
  }
  40% {
    background-color: #fc342f;
    filter: blur(125px);
  }
  60% {
    background-color: #ffaa01;
    filter: blur(125px);
  }
  80%,
  100% {
    background-color: #00d061;
    filter: blur(125px);
  }
}
@keyframes changeColor3 {
  0%,
  20% {
    background-color: #fc342f;
    filter: blur(125px);
  }
  40% {
    background-color: #ffaa01;
    filter: blur(125px);
  }
  60% {
    background-color: #00d061;
    filter: blur(125px);
  }
  80%,
  100% {
    background-color: #fc342f;
    filter: blur(125px);
  }
}
.img2 {
  animation-delay: 2s;
}
.img3 {
  animation-delay: 4s;
}
@keyframes fadeInOut {
  0%,
  33.33%,
  100% {
    opacity: 0;
  }
  16.66%,
  50% {
    opacity: 1;
  }
}
.background .img1,
.background .img2,
.background .img3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  animation: fadeInOut 6s infinite;
}
.background .img2 {
  object-fit: contain !important;
}
.carousel-item.active .img1 {
  opacity: 1;
}
.carousel-item.active .img2 {
  opacity: 1;
}
.carousel-item.active .img3 {
  opacity: 1;
}
.skip-btn1 {
  padding: 0 16px;
}

/************************ 4.Let Get Started CSS ***************************/
.red,
.yellow,
.green,
.red1 {
  position: absolute;
  width: 162px;
  height: 174px;
}
.red,
.red1 {
  animation: changeColor1 10s linear infinite;
}
.red {
  right: 0;
  top: 0;
}
.red1 {
  left: 0;
  top: 0;
}
.yellow {
  left: 0;
  top: 50%;
  animation: changeColor2 10s linear infinite;
}
.green {
  bottom: 0;
  right: 0;
  animation: changeColor3 10s linear infinite;
}
.icons_main a {
  background: var(--1, #fff);
  padding: 20px;
}
.icons_main {
  gap: 16px;
}
.social-media-sec h2,
.timer-counter-content,
.category-txt h3 {
  color: var(--2, #12151c);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
}
.sign-up-btn a,
.sign-up-btn button,
.sign-in-btn button,
.sign-in-btn a {
  width: 100%;
  background: var(--6, #fc342f);
  padding: 12px 0;
  margin: auto;
  max-width: 600px;
  color: var(--1, #fff);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.sign-in-btn a {
  background: var(--2, #12151c);
}
.arrow {
  padding: 0px 8px;
}

/************************ 5.Sign Up CSS ***************************/
.back-btn a {
  display: block;
  width: 24px;
  height: 24px;
}
.name-txt,
.custom-lbl-feedback {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
}
.custom-lbl-feedback {
  width: 100%;
}
input {
  border: none;
  outline: none;
  width: 100%;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
}
.link-button:hover {
  text-decoration: none;
}

::placeholder {
  color: rgb(182, 182, 182) !important;
  opacity: 1; /* Firefox */
}

.input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px;
  background: #ffffff;
  column-gap: 12px;
  margin-top: 4px;
}
.input-wrapper input,
.print-txt p,
.language-name-wrap p,
.feedback-email input,
.custom-select-subject select,
.custom-textarea .search-text {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.input-wrapper input::placeholder {
  color: var(--3, #464849);
}
.search-text::placeholder {
  color: var(--3, #464849) !important;
}
#eye,
#eye1 {
  color: #464849;
  display: flex;
  align-items: center;
}
.footer-checkbox-input {
  position: absolute;
  opacity: 0;
  width: fit-content;
}
.footer-checkbox-input + .footer-chec-txt {
  position: relative;
  cursor: pointer;
  padding: 0;
}
.footer-checkbox-input + .footer-chec-txt:before {
  content: "";
  margin-right: 12px;
  display: inline-block;
  vertical-align: text-top;
  width: 22px;
  height: 22px;
  border: 2px solid #12151c;
  border-radius: 8px;
}
.footer-checkbox-input:checked + .footer-chec-txt:before {
  background: black;
  border: none;
}
.footer-checkbox-input:checked + .footer-chec-txt:after {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  background: white;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white,
    4px -6px 0 white, 4px -8px 0 white;
  transform: rotate(45deg);
}
.or-section p:before,
.or-section p:after {
  background: #ffffff;
  content: "";
  display: inline-block;
  height: 2px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}
.or-section p:after {
  left: 8px;
  margin-right: -50%;
}
.or-section p:before {
  right: 8px;
  margin-left: -50%;
}
.or-section p {
  overflow: hidden;
}

/************************ 6.Sign In CSS ***************************/
.remember-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.onboarding-bg-img1 {
  background-image: url(../images/splashscreen/left-img-bg.png);
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
}
.onboarding-bg-img {
  background-image: url(../images/splashscreen/white-bg-img.png);
  background-position: right;
  width: 100%;
  height: 100%;
  position: absolute;
}

/************************ 7.Otp CSS ***************************/
.otp-section input {
  width: 48px;
  height: 60px;
  text-align: center;
  padding: 10px;
  border-radius: 12px;
  background: var(--1, #fff);
  border: 0;
  color: var(--2, #12151c);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
}
.otp-section {
  column-gap: 11px;
}
.otp-section input:focus {
  border-radius: 12px;
  border: 1px solid var(--5, #00d061);
  background: var(--1, #fff);
  box-shadow: 0px 0px 12px 0px rgba(18, 21, 28, 0.24);
}
.filled {
  border-radius: 12px;
  border: 1px solid var(--2, #12151c) !important;
  background: var(--1, #fff);
}
.otp-timer {
  display: inline-block;
  padding: 25px 18px;
  position: relative;
  height: 100px;
  width: 100px;
}
.otp-timer .border {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-radius: 50%;
  border: 2px dashed #12151c !important;
}
.otp-left {
  color: var(--3, #464849);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
.opt-border {
  border: 2px dashed #12151c !important;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.counter-sec {
  margin-top: 130px;
}
.fixed1 {
  padding-bottom: 80px;
}
.otp-section1 input {
  width: 75px;
}

/************************ 8.Finger Print CSS ***************************/
.scanner_main {
  padding-top: 90px;
}
.scan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(../images/finger-print/print-border.png);
  width: 220px;
  height: 220px;
  background-repeat: no-repeat;
  background-size: cover;
}
.scan .fingerprint {
  position: relative;
  width: 220px;
  height: 220px;
  background: url(../images/finger-print/finger-print-img.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.scan .fingerprint::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/finger-print/finger-print-img.png);
  background-repeat: no-repeat;
  background-size: cover;
  animation: animate 4s ease-in-out infinite;
  filter: brightness(0) saturate(100%) invert(54%) sepia(75%) saturate(7079%)
    hue-rotate(344deg) brightness(102%) contrast(98%);
}
.scan .fingerprint::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #ffffff;
  border-radius: 8px;
  filter: drop-shadow(0 0 20px #00d061) drop-shadow(0 0 60px #00d061);
  animation: animate_line 4s ease-in-out infinite;
}
@keyframes animate_line {
  0%,
  100% {
    top: 0%;
  }

  50% {
    top: 100%;
  }
}
@keyframes animate {
  0%,
  100% {
    height: 0%;
  }

  50% {
    height: 100%;
  }
}
.skip-btn a {
  background: var(--2, #12151c) !important;
}
.finger-print-bottom {
  gap: 16px;
}
.sign-up-btn.skip-btn,
.sign-up-btn.contine-btn {
  width: 100%;
}

/************************ 9.Preferred Language CSS ***************************/
.language-sec-wrap {
  gap: 4px;
}
.language-name-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.language-img {
  border-radius: 12px;
  background: var(--1, #fff);
  padding: 8px;
}
.language-name {
  width: 100%;
  border-radius: 12px;
  background: var(--1, #fff);
  padding: 12px;
}
#language-main .form-check-input[type="radio"],
#language-main .form-check-input:checked[type="radio"],
#choose-interest-main .lang-sec input[type="checkbox"] {
  display: none !important;
}
#language-main .form-check-input + label {
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid #12151c;
  border-radius: 8px;
}
#language-main .form-check-input:checked + label {
  background-color: #00d061;
  color: white;
  font-size: 18px;
  border: 2px solid transparent;
}
#language-main .form-check-input:checked + label::after {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-size: 16px;
  color: white;
  font-weight: 600;
}

/************************ 10.Choose Interest CSS ***************************/
#choose-interest-main .select-lang-sec {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
#choose-interest-main .custom-radio-sel-lang {
  padding: 11px 16px;
  cursor: pointer;
  border-radius: 12px;
  background: var(--1, #fff);
}
.category-txt p,
#choose-interest-main .custom-radio-sel-lang,
.seller-price-txt1,
.brands-content p {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
}
#choose-interest-main .lang-sec input[type="checkbox"]:checked + label {
  border-radius: 12px;
  background: var(--5, #00d061);
  color: var(--1, #fff);
}

/************************ 11.Delete Account CSS ***************************/
.header-wrap-home {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  position: relative;
  z-index: 9;
  background: white;
}
.delete-account-top h1,
.header-name p,
.deactive-account-sec h1,
#delete-deactivate-main .checkout-modal-lbl,
.review-txt p,
.posted-txt {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.delete-account-top p,
.deactivate-step p,
.deactivate-step-list li,
.delete-content p,
#delete-deactivate-main .checkout-modal-lbl span {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.deactivate-step-list li {
  color: var(--3, #464849) !important;
}
.delete-account-sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 2px solid #f5f5f5;
}
.lang-list,
.deactivate-content {
  border-radius: 12px;
  background: var(--1, #fff);
  padding: 16px;
}
.delete-account-trapping p,
.category1-title p {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
.delete-select input {
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid #12151c;
  border-radius: 8px;
  margin-top: 0;
}
#delete-account-main .form-check-input:checked[type="radio"] {
  margin-right: 5px;
}
#delete-deactivate-main .form-check-input:checked[type="radio"],
#delete-account-main .form-check-input:checked[type="radio"] {
  outline: 2px solid #00d061;
  outline-offset: 4px;
  background: #00d061;
  border: 0;
  width: 13px;
  height: 13px;
}
.form-check-input:focus {
  border-color: #12151c;
  outline: 0;
  box-shadow: none !important;
}
.form-check-input:active {
  filter: none;
}
.background1 {
  background: #fbf2e9;
  height: calc(100% - 46px);
  width: 100%;
  position: relative;
  overflow: hidden;
}
.delete-account {
  position: relative;
}

/************************ 12.Deactive Account CSS ***************************/
.deactivate-step-list {
  list-style-type: disc;
  padding: revert;
}

/************************ 13.Delete Deactive Account CSS ***************************/
#delete-deactivate-main .custom-radio {
  position: relative;
  margin-bottom: 0;
  border-radius: 12px;
  background: var(--1, #fff);
  padding: 16px !important;
  display: flex;
}
#delete-deactivate-main .custom-radio input {
  outline: 2px solid #12151c;
  outline-offset: 4px;
  border: 0;
  width: 13px;
  height: 13px;
}
#delete-deactivate-main .checkout-modal-lbl {
  display: inline-grid !important;
}
#delete-deactivate-main .checkout-modal-lbl span {
  color: var(--3, #464849);
}
.first-sec {
  padding-right: 20px;
}

/************************ 14.Invite Friend CSS ***************************/
.invite-friend-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 40px;
  background: var(--1, #fff);
  padding: 8px 16px 8px 8px;
}
.friend-invite,
.account-edit {
  margin-left: auto;
}
.invite-img img {
  border-radius: 50px;
}
.friend-select input {
  display: none;
}
.friend-select input[type="checkbox"]:checked + label {
  border-radius: 16px;
  border: 2px solid var(--6, #fc342f);
  background: var(--6, #fc342f);
  color: var(--1, #fff);
}
.custom-radio-sel-friend {
  width: 61px;
  height: 34px;
  border-radius: 16px;
  border: 2px solid var(--6, #fc342f);
  cursor: pointer;
  color: var(--6, #fc342f);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
}
.friend-no a {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}
.friend-no {
  margin-top: 4px;
}

/************************ 15.Contact Us CSS ***************************/
.contact-us-mobile-btn {
  border-radius: 8px;
  background: var(--1, #fff);
  padding: 12px;
}
.contact-us-no {
  padding-left: 12px;
}

/************************ 16.Feedback CSS  ***************************/
.feedback-email input,
.custom-select-subject select,
.custom-textarea {
  border-radius: 12px;
  background-color: var(--1, #fff);
  padding: 14px;
  width: 100%;
  border: 0;
}
.arrow-icon {
  background: url(../svg/up-arrow.svg) no-repeat;
  background-position: 96% center;
  appearance: none;
}
select:focus-visible {
  outline: 0;
}
textarea {
  resize: none;
}
.feedback-email input::placeholder,
.custom-select-subject select::placeholder,
.custom-textarea::placeholder {
  color: var(--3, #464849);
}

/************************ 17.Faq CSS ***************************/
.nested-accordion {
  cursor: pointer;
  position: relative;
  border-radius: 12px;
  background: var(--1, #fff);
  padding: 16px;
}
.review-time p {
  color: var(--3, #666);
  font-family: Lato;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.nested-accordion h3 {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  text-overflow: ellipsis;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.nested-accordion .comment {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
.nested-accordion h3.selected {
  color: #fc342f;
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.nested-accordion h3:before {
  content: url(../svg/faq-plus.svg);
  position: absolute;
  right: 16px;
  color: #fc342f;
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.faq-txt1:before {
  content: url(../svg/up-arrow.svg) !important;
}
.nested-accordion h3.selected:before {
  content: url(../svg/faq-minus.svg);
}
.faq-txt1.selected:before {
  content: url(../svg/down-arrow.svg) !important;
}
.faq-txt1:before {
  content: url(../svg/up-arrow.svg) !important;
}
.nested-accordion.border-bottom-faq {
  border-bottom: 2px solid #f5f5f5;
  border-radius: 0;
}

/************************ 18.Homescreen1 CSS ***************************/
#homescreen-main .yellow {
  top: 0%;
}
#homescreen-main .green {
  position: absolute;
  z-index: -1;
}
#homescreen2-main .red {
  bottom: -30% !important;
  top: unset;
}
.homescreen-title h1,
.homescreen-category h2,
.seller-title h2,
.modal-txt,
.review-sec h1,
.filter-category-txt {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
}
.search-wrap {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.search-btn {
  background: #fc342f;
  padding: 12px;
  border-radius: 12px;
}
.search-text {
  background: white;
  border-radius: 12px;
  border: 0;
  color: var(--3, #464849) !important;
}
.form-control:focus {
  box-shadow: none !important;
}
.category-img img {
  border: 10px solid white;
  border-radius: 50%;
  box-shadow: 0px 0px 32px 0px rgba(18, 21, 28, 0.16);
}
.category-txt h3 {
  font-weight: 600;
}
.category-txt p {
  color: var(--3, #464849);
}
.homescreen-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
  width: 100%;
  padding-right: 16px;
  padding-left: 16px;
}
.homescreen-category h2 {
  padding: 0 16px;
}
.seller-sec-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.seller-slide-top-content {
  border-radius: 12px;
  background: var(--1, #fff);
  width: 200px;
  height: 240px;
  position: relative;
}
.seller-slide-top-content img {
  mix-blend-mode: multiply;
  border-radius: 12px;
}
.home-page-favourite a {
  display: flex;
}
.home-page-favourite {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  background: #f5f5f5;
  position: absolute;
  top: 10px;
  right: 10px;
}
.item-bookmark.active {
  content: url(../svg/fill-heart.svg);
  height: 20px;
  width: 20px;
}
.seller-txt-sec {
  border-radius: 4px;
  background: #000;
  padding: 8px;
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.seller-name {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}
.seller-bottom-price {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.sale-txt {
  color: var(--1, #fff);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}
.seller-price-txt2,
.featured-name {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  text-decoration-line: line-through;
}
.seller-star {
  padding-right: 4px;
}
.seller-sec-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 16px;
  padding-left: 16px;
  padding-right: 16px;
}
.seller-price-txt2 {
  margin-left: 8px;
}
.featured-slide-top {
  width: 100%;
  height: 140px;
  border-radius: 12px;
  background: var(--1, #fff);
  position: relative;
}
.home-page-featured-favourite {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  background: #f5f5f5;
  position: absolute;
  top: 4px;
  right: 4px;
}
.featured-name {
  text-decoration-line: none;
  overflow: hidden;
  width: 140px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.homescreen1-featured-bottom,
.brands-bottom {
  display: flex;
  align-items: center;
  justify-content: start;
  column-gap: 16px;
  width: 100%;
  padding-right: 16px;
  padding-left: 16px;
}
.featured-slide-top img {
  mix-blend-mode: multiply;
  border-radius: 12px;
}
.home-page-featured-favourite a {
  display: flex;
}
.shopping-bg-img {
  width: 100%;
}
.logos {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  display: flex;
}
.marquee-img-main p {
  margin-left: 20px;
  color: var(--1, #fff);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.marquee__content {
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  align-items: center;
  padding: 10px 0;
}
.marquee-img-main {
  gap: 20px;
}
.marquue-flower {
  width: 20px;
}
.logos2 {
  background: var(--11, #00d061);
  transform: rotate(-8deg);
  overflow: hidden;
  width: 105%;
  left: -8px;
}
.logos1 {
  background: var(--10, #f97316);
  transform: rotate(8deg);
  width: 105%;
  left: -8px;
  top: -45px;
}
.logos-slide {
  animation: 70s slide infinite linear;
}
.logos-slide2 {
  animation: 70s slide2 infinite linear;
}
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes slide2 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
.homescreen-third-wrapper {
  border-radius: 12px;
  background: var(--2, #12151c);
  width: 100%;
  height: 100%;
  position: relative;
}
.homescreen-third-wrapper:before {
  content: "";
  background-image: url(../images/homescreen1/offer1.png);
  position: absolute;
  background-position: center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
  mix-blend-mode: soft-light;
}
.homescreen-third-wrapper-content {
  display: flex;
  justify-content: space-between;
  padding: 16px 16px 0px 16px;
  position: relative;
}
.special-offer1 h2 {
  color: var(--4, #ffaa01);
  font-family: "IBM Plex Sans";
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
}
.special-offer1 h3 {
  color: var(--1, #fff);
  font-family: "IBM Plex Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
}
.special-offer1 {
  padding-bottom: 16px;
}
.homescreen1-offer-img {
  position: absolute;
  right: 0;
  bottom: 0px;
}
.special-offer1 p {
  color: var(--1, #fff);
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
.home1-shop-now-btn a,
.shop-now-btn a {
  border-radius: 4px;
  background: var(--6, #fc342f);
  padding: 6px 12px;
  width: fit-content;
}
.home1-shop-now-btn a,
.shop-now-btn a {
  color: var(--1, #fff);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
.brands-img {
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}
.shop-now2-sec {
  background-image: url(../images/homescreen1/shop-now1.png);
  max-width: 100%;
  position: relative;
  padding: 32px 0;
}
.homescreen-seventh-wrapper h3 {
  color: var(--1, #fff);
  font-family: "IBM Plex Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
}
.homescreen-seventh-wrapper p {
  color: var(--1, #fff);
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
.slide-shop-now2 .carousel-indicators {
  margin: 0;
  right: 16px !important;
  bottom: 44px !important;
  justify-content: end !important;
  z-index: 1 !important;
}
.show-now2-custom-btn {
  outline-offset: 2px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 13px;
  border: 2px solid #fff !important;
  background: transparent !important;
  opacity: 1 !important;
}
.show-now2-custom-btn.active {
  width: 24px !important;
  background: white !important;
}
.shopping-img {
  position: relative;
}
.waves-img {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;
}
.tab-home1-txt2 {
  color: var(--6, #fc342f);
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}
.tab-home1-txt3 {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}
.custom-home1-tab-btn {
  padding: 5px 10px;
  color: var(--3, #464849);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  border-radius: 12px !important;
  border: 2px solid var(--2, #12151c) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.3) 100%
  ) !important;
  backdrop-filter: blur(2px);
}
.custom-home1-tab-btn.active {
  border: 2px solid transparent;
  background: #000 !important;
  color: white;
}
.custom-home1-tab-btn:hover {
  color: #000 !important;
}
.custom-home1-tab-btn.active:hover {
  color: white !important;
}
#homepage1-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 16px;
  padding-right: 16px;
  flex-wrap: nowrap;
}
.home-page-arrival-favourite {
  width: 28px;
  height: 28px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-page-arrival-favourite a {
  display: flex;
  background: white;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}
.homepage1-tab-details-wrapper {
  display: flex;
  gap: 16px;
}
.home1-tab-details-full {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.tab-home1-txt1 {
  overflow: hidden;
  color: var(--2, #12151c);
  text-overflow: ellipsis;
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.home1-tab-img img {
  border-radius: 12px;
  mix-blend-mode: multiply;
  display: flex;
}
.home1-tab-img {
  border-radius: 12px;
  background: var(--1, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rating-homescreen1 {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
.homepage-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: linear-gradient(180deg, rgba(18, 21, 28, 0) 23.86%, #12151c 100%);
}
.img-txt {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  margin: 0 auto;
  color: var(--1, #fff);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  line-height: 30px;
  width: 100%;
  padding: 0 16px;
}

/************************ 19.Category1 CSS ***************************/
.category1-title h3,
.moreless-button,
.partner-title h3,
.cart-title.code-txt h3 {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.category1-title p {
  margin-top: 2px;
}
.category1-img {
  border-radius: 12px;
  background: var(--1, #fff);
}
.category1-img img {
  mix-blend-mode: darken;
  border-radius: 12px;
}
.category1-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/************************ 20.Hot Deal Week CSS ***************************/
.hot-top-content {
  position: relative;
}
.hot-week-favourite {
  background: #f5f5f5;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  right: 4px;
}
.hot-week-favourite a {
  display: flex;
}
.hot-bottom-content p {
  overflow: hidden;
  color: var(--2, #12151c);
  text-overflow: ellipsis;
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.hot-deal-img {
  border-radius: 8px;
  background: var(--1, #fff);
}
.hot-rate-price span {
  color: var(--6, #fc342f);
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}
.hot-star-rate span:last-child {
  color: var(--2, #12151c);
  text-align: right;
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}
.hot-rating-sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hot-deal-week-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.hot-deal-img img {
  border-radius: 8px;
  mix-blend-mode: darken;
}

/************************ 21.Best Seller CSS ***************************/
#best-seller-main .seller-slide-top-content {
  width: auto;
  height: auto;
}
#best-seller-main .seller-name {
  display: -webkit-box;
  width: 163px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-details {
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
}
.brands-content p {
  color: var(--2, #12151c);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
.choose-brand-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/************************ 22.Tabbar CSS ***************************/
nav {
  display: flex;
  align-items: center;
  width: 100%;
  height: 56px;
  justify-content: space-between;
  column-gap: 24px;
  border-radius: 28px;
  background: linear-gradient(
    92deg,
    rgba(18, 21, 28, 0.64) 0%,
    rgba(18, 21, 28, 0.4) 100%
  );
  box-shadow: 0px 24px 12px -20px rgba(18, 21, 28, 0.16);
  backdrop-filter: blur(4px);
}
.bottom-tabbar a {
  color: inherit;
  text-decoration: none;
  position: relative;
  width: 100%;
  height: 40px;
  border-radius: 20px;
}
.bottom-tabbar a svg {
  width: 18px;
  height: 18px;
  transition: margin 0.2s ease-out;
}
.bottom-tabbar a span {
  opacity: 0;
  display: none;
}
.bottom-tabbar a.active {
  background: white;
  padding-left: 12px;
  padding-right: 22px;
}
.bottom-tabbar a.active span {
  visibility: visible;
  opacity: 1;
  transition: all 0.2s ease-out;
  margin-left: 12px;
  display: block;
  color: var(--6, #fc342f);
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
}
.bottom-tabbar a.active img {
  filter: brightness(0) saturate(100%) invert(37%) sepia(71%) saturate(7494%)
    hue-rotate(347deg) brightness(113%) contrast(104%);
}
.bottom-tabbar a:first-child {
  margin-left: 12px;
}
.bottom-tabbar a:last-child {
  margin-right: 12px;
}
.bottom-tabbar a.active svg {
  margin-right: 0;
}
.bottom-tabbar-full {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
  max-width: 600px;
  margin: auto;
  padding: 16px;
  z-index: 99;
}

/************************ 23.Single Clothes CSS ***************************/
.white-arrow img {
  filter: brightness(0) saturate(100%) invert(99%) sepia(6%) saturate(1898%)
    hue-rotate(170deg) brightness(115%) contrast(100%);
}
.single-slider-btn-prev,
.single-slider-btn-next {
  width: 32px;
  height: 56px;
  border-radius: 0px 12px 12px 0px;
  background: var(--2, #12151c);
  opacity: 1;
  top: 50%;
  transform: translate(0px, -50%);
}
.single-slider-btn-prev {
  left: -3%;
}
.single-slider-btn-next {
  right: -3%;
}
.single-clothes-slide-img img {
  mix-blend-mode: darken;
  max-width: 100%;
}
.single-clothes-slide-img {
  border-radius: 24px;
  background: var(--1, #fff);
  text-align: center;
}
.single-clothes-favourite {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--7, #f5f5f5);
}
.single-clothes-sold {
  border-radius: 8px;
  background: var(--7, #f5f5f5);
  padding: 3px 8px;
  width: fit-content;
}
.single-clothes-sold p {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
}
.single-clothes-sold {
  border-radius: 8px;
  background: var(--7, #f5f5f5);
  padding: 3px 8px;
  width: fit-content;
  position: absolute;
  top: 12px;
  left: 12px;
}
.single-clothes-favourite a {
  display: flex;
}
.single-clothes-details h1 {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
}
.des-txt2 {
  display: inline;
}
.des-txt2,
.privacy-first-content p,
.privacy-content p,
.manage-data-title p,
.marketing-content p,
.setting-lanuage,
.checkout-no a,
.cart-title p {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.moretext {
  display: none;
}
.overview-txt h2 {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.view-all-txt {
  font-weight: 600;
}
.review-first-sec {
  width: auto;
  height: auto;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  backdrop-filter: blur(2px);
}
.rev1-txt {
  color: var(--2, #12151c);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
}
.rev2-txt,
.seller-price-txt3 {
  color: var(--3, #464849);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
}
.review-star-sec ul {
  display: flex;
}
.additional-info-content {
  display: flex;
  width: 100%;
}
.additional-info-content div:first-child,
.additional-info-content div:last-child {
  width: 50%;
}
.additional-info-content div:last-child:before {
  content: ":";
  position: absolute;
  left: -12px;
  color: #464849;
}
.additional-info-content div:last-child {
  position: relative;
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.additional-info-content div:first-child {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
.clothes-size-sec,
.cloths-color-sec {
  display: flex;
  gap: 11px;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
}
.clothes-size input {
  display: none;
}
.custom-radio-sel-size {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border-radius: 20px;
  border: 2px solid var(--3, #464849);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  backdrop-filter: blur(2px);
}
.custom-radio-sel-size,
.partner-title p {
  color: var(--3, #464849);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
.clothes-size input[type="radio"]:checked + label {
  border-radius: 20px;
  background: var(--2, #12151c);
  border: 2px solid transparent;
  color: var(--1, #fff);
}
.color-wrap label {
  border-radius: 20px;
  position: relative;
  border: 1px solid var(--7, #f5f5f5);
}
.color-wrap input[type="radio"] {
  appearance: none;
}
.col-deatils {
  height: 40px;
  width: 40px;
  position: relative;
}
.color-wrap input:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url(../svg/right-tick.svg);
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
}
.color-wrap input[type="radio"]:checked:after {
  opacity: 1;
}
.color1 {
  background: var(--2, #12151c);
}
.color2 {
  background: var(--1, #fff);
}
.color3 {
  background: #ff0000;
}
.color4 {
  background: #ff005c;
}
.color5 {
  background: #6e39b3;
}
.color6 {
  background: #4700a4;
}
.color7 {
  background: #0031ff;
}
.color-wrap p {
  color: var(--3, #464849);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
  margin-top: 4px;
}
.color-wrap {
  width: 40px;
}
.you-may-like-sec-content {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 16px;
  padding-left: 16px;
  padding-right: 16px;
}
.single-increment {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-incre {
  display: flex;
  column-gap: 4px;
}
.product__minus span,
.product__plus span {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--2, #12151c);
}
.product__input {
  width: 40px;
  height: 24px;
  background: white;
  text-align: center;
  border-radius: 4px;
  border: 1px solid var(--2, #12151c);
}
.price-sec1,
.history-title p {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
.price-sec2 {
  color: var(--5, #00d061);
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.single-clothes-bottom {
  background: var(--1, #fff);
  box-shadow: 0px -4px 4px 0px rgba(18, 21, 28, 0.04);
  padding: 16px;
}
#single-clothes-main {
  padding-bottom: 140px;
}
.progress-row {
  display: flex;
  align-items: center;
}
.progress-bar {
  flex-grow: 1;
  height: 6px;
  overflow: hidden;
  margin-right: 10px;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  backdrop-filter: blur(2px);
}
.progress-bar div {
  height: 100%;
  background-color: #333;
  width: 0;
  transition: width 0.5s;
  border-radius: 12px;
}
.percentage {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 10px;
  width: 30px;
  text-align: right;
}
.review-progress {
  display: flex;
  gap: 16px;
  width: 100%;
}
.rating {
  width: 80%;
}
.review-first-sec-wrap {
  width: 20%;
}
.review-wrap {
  display: flex;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  height: 14px;
}
.progress-content {
  width: 80%;
}
.review-star-content {
  width: 20%;
  text-align: end;
}

/************************ 24.About Us CSS ***************************/
.about-us-content-top h2 {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
.about-content {
  border-radius: 12px;
  background: var(--1, #fff);
  padding: 16px;
}
.about-us-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 8px;
}
.shape {
  width: 74px;
  height: 74px;
  border-radius: 37px;
  cursor: pointer;
}
.youtube-bg {
  background: rgb(255 0 0 / 7%);
}
.twitter-bg {
  background: rgb(29 161 242 / 7%);
}
.instragram-bg {
  background: linear-gradient(
    225deg,
    rgb(110 62 255 / 7%) 0%,
    rgb(224 49 77 / 7%) 47.92%,
    rgb(254 215 84 / 7%) 100%
  );
}
.facebook-bg {
  background: rgb(59 89 153 / 7%);
}
.about-social-txt {
  color: var(--3, #464849);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}
.about-content.about-content1 {
  padding: 12px;
}

/************************ 25.Data Privacy CSS ***************************/
.privacy-content h3,
.manage-data-title h3 {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.data-privacy {
  display: flex;
  justify-content: space-between;
}
.delete-select {
  display: flex;
  align-items: center;
}
#data-privacy-main .form-check-input:checked[type="radio"] {
  outline: 2px solid #00d061;
  outline-offset: 4px;
  background: #00d061;
  border: 0;
  width: 11px;
  height: 11px;
  margin-right: 5px;
}
.delete-account-bottom input {
  width: 20px;
  height: 20px;
  outline: 2px solid #12151c;
  outline: 0;
  margin: 0;
  background: transparent;
}

/************************ 26.Notification Setting CSS ***************************/
.notification-option-wrap {
  border-radius: 12px;
  background: var(--1, #fff);
  padding: 16px;
}
.notification-option-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #f5f5f5;
}
.notification-option-switch .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.notification-option-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 4px;
  right: 0;
  bottom: 0;
  border: 1px solid rgb(102 102 102 / 20%);
  border-radius: 40px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.notification-option-switch input:checked + .slider {
  background: #00d061;
  border: 1px solid transparent;
}
.notification-option-switch .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  background: #fff;
  border-radius: 22px;
  left: 0px;
  bottom: 0px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 22px;
  border: 0.5px solid #f0f0f0;
  box-shadow: 0px 3px 1px 0px rgba(0, 0, 0, 0.05),
    0px 1px 1px 0px rgba(0, 0, 0, 0.08), 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
}
.notification-option-switch input:checked + .slider:before {
  transform: translateX(16px);
}
.notification-option-name p {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

/************************ 27.Marketing Preference CSS ***************************/
.marketing-content h2 {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.send-txt {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.email-txt p {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
.border-bottom1 {
  border-bottom: 1px solid #f5f5f5;
}

/************************ 28.Setting CSS ***************************/
.send-money-contact-tab {
  display: flex;
  align-items: center;
  column-gap: 16px;
  padding: 8px 12px 8px 8px;
  border-radius: 12px;
  background: var(--1, #fff);
}
.setting-icon {
  width: 48px;
  height: 48px;
  background: rgb(0 208 97 / 8%);
  border-radius: 8px;
}
.contact-star {
  margin-left: auto;
}
.setting-title h3 {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
.setting-lanuage {
  display: inline-flex;
  margin-right: 16px;
}
.red-bg-opacity {
  background: rgb(252 52 47 / 8%);
}

/************************ 29.Category2 CSS ***************************/
.category2-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.home3-third-wrapper {
  padding: 5px 5px 8px 5px;
  border-radius: 37px 37px 4px 4px;
  background: #ffffff;
  margin-left: auto;
  margin-right: auto;
}
.home3-cate-img {
  width: 64px;
  height: 64px;
  border-radius: 64px;
  border: 2px solid var(--7, #f5f5f5);
  background: var(--1, #fff);
}
.home3-third-wrapper p {
  color: var(--2, #12151c);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 15px;
}

/************************ 30.Search CSS ***************************/
.white-icon {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(16deg) brightness(110%) contrast(101%);
}
.black-icon {
  filter: brightness(0) saturate(100%);
}
.search-iconn {
  border-radius: 8px;
  background: #ffffff;
  border: none;
  padding: 14px 0 14px 16px !important;
}
.recent-history-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.white-border {
  border-bottom: 2px solid white;
  border-radius: 1px;
}
.clear-all {
  border-radius: 12px;
  background: var(--6, #fc342f);
  box-shadow: 0px 24px 12px -20px rgba(252, 52, 47, 0.8);
  position: fixed;
  width: 164px;
  left: 0;
  right: 0;
  bottom: 0;
  margin-bottom: 16px;
}
.clear-all a {
  color: var(--1, #fff);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  width: 164px;
  height: 48px;
}
#search-not-found-main .search-text {
  color: var(--2, #12151c) !important;
}
#search-not-found-main .search-text::placeholder {
  color: var(--2, #12151c) !important;
}
.cancel-icon a {
  display: flex;
}

/************************ 31.Empty Order CSS ***************************/
#empty-order-tab {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 12px;
  width: 100%;
}
#empty-order-tab li {
  width: 33.33%;
}
.empty-order-content-tab-btn {
  width: 100%;
  overflow: hidden;
  text-wrap: nowrap;
  color: var(--3, #464849);
  text-align: center;
  text-overflow: ellipsis;
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  border-radius: 12px !important;
  border: 2px solid var(--2, #12151c) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  backdrop-filter: blur(2px);
  padding: 6px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.empty-order-content-tab-btn.active {
  background: var(--5, #00d061) !important;
  border: 2px solid transparent !important;
}
.empty-order-content-tab-btn:hover {
  color: var(--3, #464849);
}

/************************ 32.Active Order CSS ***************************/
.active-order-content {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  border-bottom: 2px solid white;
  padding-bottom: 16px;
}
.order-second-content-wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  column-gap: 8px;
}
.delete-btn {
  display: flex;
  align-items: center;
  justify-content: end;
}
.delete-btn-wrap {
  width: 36px;
  height: 36px;
  border-radius: 36px;
  background: var(--1, #fff);
}
.active-img {
  border-radius: 12px;
  background: var(--1, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.active-second-title p {
  overflow: hidden;
  color: var(--2, #12151c);
  text-overflow: ellipsis;
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.order-size-wrap {
  display: flex;
  gap: 16px;
}
.order-third-content-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.track-order-btn a {
  color: var(--1, #fff);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
.track-order-btn {
  border-radius: 4px;
  background: var(--2, #12151c);
  padding: 6px 8px;
  display: flex;
}
.size-txt p {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}
.third-price p {
  color: var(--6, #fc342f);
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
.active-img img {
  mix-blend-mode: multiply;
  border-radius: 12px;
}
.order-cancle-btn a {
  border-radius: 50%;
  background: var(--6, #fc342f);
  height: 64px;
  width: 64px;
}
.order-cancle-btn {
  display: flex;
  justify-content: center;
}
.modal-cancel-bottom-bottom h2 {
  color: var(--2, #12151c);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
}
.cancel-txt,
.cart-title h3,
.payment-title h3 {
  color: var(--2, #12151c);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.refund-txt,
.review-sec p {
  color: var(--3, #464849);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
.refund-txt span {
  color: var(--6, #fc342f);
}
.yes-cancel-btn a {
  color: var(--1, #fff);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  padding: 12px 0;
  border-radius: 12px;
  background: var(--4, #ffaa01);
  width: 100%;
}
.yes-cancel-btn.no-cancel-btn a {
  background: var(--2, #12151c);
}
#order-cancel-modal,
#order-confirmed-modal,
#payment-processing-modal,
#order-failed-modal,
#review-posted-modal,
#logout-modal,
#cart-product-modal,
#order-arrived-modal {
  background: linear-gradient(
    180deg,
    rgba(18, 21, 28, 0.56) 0%,
    rgba(18, 21, 28, 0.24) 100%
  );
  backdrop-filter: blur(4px);
}
#order-cancel-modal .modal-body,
#order-confirmed-modal .modal-body,
#payment-processing-modal .modal-body,
#order-failed-modal .modal-body,
#review-posted-modal .modal-body,
#logout-modal .modal-body,
#cart-product-modal .modal-body,
#order-arrived-modal .modal-body {
  padding: 32px 16px;
  border-radius: 24px;
  background: var(--10, #fbf2e9);
}
#order-cancel-modal .modal-content,
#order-confirmed-modal .modal-content,
#payment-processing-modal .modal-content,
#order-failed-modal .modal-content,
#review-posted-modal .modal-content,
#logout-modal .modal-content,
#cart-product-modal .modal-content,
#order-arrived-modal .modal-content {
  border-radius: 24px;
  background: var(--10, #fbf2e9);
  border: 0;
}
#order-cancel-modal .modal-dialog,
#order-confirmed-modal .modal-dialog,
#payment-processing-modal .modal-dialog,
#order-failed-modal .modal-dialog,
#review-posted-modal .modal-dialog,
#logout-modal .modal-dialog,
#cart-product-modal .modal-dialog,
#order-arrived-modal .modal-dialog {
  margin: auto;
  padding: 16px;
}

/************************ 33.Track Order CSS ***************************/
.track-order2-full {
  display: flex;
  justify-content: center;
  column-gap: 50px;
}
.track1,
.track-boder,
.track-boder2 {
  margin-top: 12px;
}
.track1,
.track-boder,
.track-boder2 {
  position: relative;
}
.track1:before {
  content: "";
  position: absolute;
  height: 5px;
  width: 56px;
  left: 88%;
  border-bottom: 2px dashed;
}
.track-boder:before {
  content: "";
  position: absolute;
  height: 5px;
  width: 30px;
  left: 80%;
  border-bottom: 2px dashed;
}
.track-boder2:before {
  content: "";
  position: absolute;
  height: 5px;
  width: 56px;
  left: 90%;
  border-bottom: 2px dashed #c4c4c4;
}
.track-boder2:after {
  content: "";
  position: absolute;
  height: 5px;
  width: 30px;
  right: 84%;
  border-bottom: 2px dashed #c4c4c4;
}
.track-order2-wrapper:last-child .track1:before {
  display: none;
}
.track-order-title span {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.order-status-details {
  border-radius: 12px;
  background: var(--1, #fff);
  padding: 12px;
}
.track-order-title span:first-child {
  margin-right: 12px;
}
.track-order-title {
  display: flex;
  align-items: center;
  border-bottom: 2px solid #f5f5f5;
  padding-bottom: 16px;
}
.order-status-sec {
  display: flex;
  align-items: center;
}
.order1 {
  position: relative;
}
.order1::before {
  content: "";
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  border-left: 2px dashed black;
  height: 40px;
  margin-top: 14px;
}
.order2 {
  margin-left: 12px;
}
.order-txt1 {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
}
.order-txt2 {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  margin-top: 4px;
}
.order3 {
  margin-left: auto;
}
.order-txt3 {
  color: var(--3, #464849);
  text-align: right;
  font-family: "IBM Plex Sans";
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
}

/************************ 34.Payment Method CSS ***************************/
.transfer-first {
  display: flex;
  align-items: center;
  column-gap: 16px;
  border-radius: 12px;
  background: var(--1, #fff);
  padding: 12px;
}
.bank-img {
  border-radius: 4px;
  border: 2px solid var(--7, #f5f5f5);
  width: 74px;
  height: 48px;
}
.bank-active-sec {
  margin-left: auto;
}
.bank-details h2 {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.bank-details p {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  margin-top: 4px;
}
.pay-txt1 {
  color: var(--5, #00d061);
  text-align: right;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
.not-connect {
  color: var(--4, #ff484d);
}

/************************ 35.Checkout CSS ***************************/
.first-order-sec,
.second-order-sec {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cart-add-btn,
.checkout-cancel,
.partner-price {
  margin-left: auto;
}
.second-order-sec,
.delivery-address-content {
  border-bottom: 2px solid #f5f5f5;
  padding-bottom: 12px;
  border-radius: 1px;
}
.checkout-second,
.checkout-second1,
.first-order-sec {
  border-radius: 12px;
  background: var(--1, #fff);
  padding: 12px;
}
.partner-logo {
  width: 64px;
  height: 64px;
  border-radius: 50px;
  border: 2px solid var(--7, #f5f5f5);
}
.partner-bottom-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.green-border {
  border: 2px solid var(--5, #00d061);
}
.checkout-cancel img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(39%) saturate(5847%)
    hue-rotate(346deg) brightness(113%) contrast(98%);
}
.checkout-review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.checkout-review span:first-child {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}
.checkout-review span:last-child {
  color: var(--2, #12151c);
  text-align: right;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
}
.checkout-review.border-checkout {
  border-bottom: 2px solid #f5f5f5;
  padding: 12px 0;
}
.default-txt {
  border-radius: 4px;
  background: var(--5, #00d061);
  padding: 2px 8px;
}
.default-txt p {
  color: var(--1, #fff);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
}

/************************ 36.Promo Voucher CSS ***************************/
.redeem-txt a {
  border-radius: 8px;
  background: var(--2, #12151c);
  padding: 12px;
  color: var(--1, #fff);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.enter-code input {
  border-radius: 8px !important;
  background: var(--7, #f5f5f5);
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  border: 0;
  padding: 12px;
}
.promocode-content {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.enter-code {
  width: 100%;
}
.enter-code input:focus {
  background: var(--7, #f5f5f5) !important;
}
.border-green,
.selected-border {
  border: 2px solid #00d061 !important;
}
#promo-voucher-main .border-green {
  border: 2px solid var(--2, #12151c) !important;
}
#choose-delivery-main .checkout-second,
#promo-voucher-main .checkout-second,
#select-promo-voucher-main .checkout-second,
#choose-delivery-partner .checkout-second,
#delivery-address-main .checkout-second {
  border: 2px solid transparent;
}
#select-promo-voucher-main .border-green .partner-logo {
  border: 2px solid var(--5, #00d061);
  background: var(--1, #fff) !important;
}
#select-promo-voucher-main .border-green .partner-logo img.white-icon {
  filter: brightness(0) saturate(100%);
}
.partner-bottom-wrap {
  align-items: unset;
}
#choose-delivery-partner .partner-bottom-wrap {
  align-items: unset;
}
.partner-price p {
  color: var(--6, #fc342f);
  text-align: right;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
#choose-delivery-partner .border-green .partner-price p {
  color: var(--5, #00d061);
}
#choose-delivery-partner .partner-logo img {
  mix-blend-mode: darken;
}
#promo-voucher-main .redeem-txt {
  width: fit-content;
}

/************************ 37.Choose Method CSS ***************************/
#choose-payment-main .delete-select {
  margin-left: auto;
}
.delete-account-bottom {
  border-radius: 12px;
  background: var(--1, #fff);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid transparent;
}
#choose-payment-main .delete-account-bottom input {
  width: 20px;
  height: 20px;
  outline: 2px solid #00d061;
  outline-offset: 0px;
  outline: 0;
  margin: 0;
}
#choose-payment-main .form-check-input:checked[type="radio"] {
  outline: 2px solid #00d061;
  outline-offset: 4px;
  background: #00d061;
  border: 0;
  width: 11px;
  height: 11px;
  margin-right: 5px;
}
.delivery-address-content {
  display: flex;
  justify-content: space-between;
}

/************************ 38.Payment Processing Modal CSS ***************************/
.sk-fading-circle {
  width: 64px;
  height: 64px;
  position: relative;
}
.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-fading-circle .sk-circle:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #12151c;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
@keyframes sk-circleFadeDelay {
  0%,
  39%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

/************************ 39.Leave Review CSS ***************************/
.review-sec {
  border-radius: 12px;
  background: var(--1, #fff);
  padding: 24px 16px;
}
.star-rating {
  direction: rtl;
  text-align: center;
  cursor: default;
}
.star-rating input[type="radio"] {
  display: none;
}
.star-rating label {
  color: #f97316;
  font-size: 2rem;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input[type="radio"]:checked ~ label {
  color: rgb(249 115 22 / 24%);
}
.product-rate-commentsec {
  position: relative;
}
.product-comment {
  width: 100%;
  border-radius: 8px;
  resize: none;
  background: #f0f0f0;
  position: relative;
}
.product-textarea1 {
  width: 100%;
  resize: none;
  height: 135px;
  border: none;
  padding: 16px;
  background: #f0f0f0;
  border-radius: 8px;
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
#image-label,
#video-label {
  display: none;
}
.leave-review-sec {
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-wrap-sec {
  border-radius: 12px;
  background: var(--1, #fff);
  padding: 12px;
}
.add-image {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 4px;
  background: var(--1, #fff);
  border-radius: 5px;
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
}
input[type="file"] {
  display: none;
}
.icon {
  margin-right: 8px;
}
.comment-bottom-btn {
  display: flex;
  gap: 16px;
  padding: 16px;
}
.add-image-sec,
.add-video-sec {
  display: block;
}

/************************ 40.Filter CSS ***************************/
.filter-modal .pricing-slider .irs-slider {
  height: 22px;
  width: 22px;
  background: #ffffff;
  border: 2px solid #00d061;
  z-index: 0;
}
.filter-modal .pricing-slider .irs-line {
  height: 4px;
  border: none;
  background: #ffffff;
  border-radius: 2px;
}
.filter-modal .pricing-slider .irs-bar {
  height: 4px;
  border: none;
  background: #00d061;
  border-radius: 2px;
}
.filter-modal .pricing-slider .irs-min,
.filter-modal .pricing-slider .irs-max {
  display: none;
}
.filter-sec input[type="radio"] {
  display: none;
}
.filter-modal span.irs-to,
.filter-modal span.irs-from {
  display: flex;
  top: -10px;
  justify-content: center;
  border-radius: 5px;
  align-items: center;
  z-index: 2;
}
.filter-modal .pricing-slider .irs-from,
.filter-modal .pricing-slider .irs-to {
  background-color: #000;
  width: 34px;
  height: 20px;
  color: var(--1, #fff);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 12px;
}
.filter-modal span.irs-to:before,
.filter-modal span.irs-from:before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  background: #000;
  bottom: -4px;
  rotate: 137deg;
  z-index: -1;
  border-radius: 5px;
}
.irs {
  height: 50px;
}
.rating-sec {
  border-radius: 12px;
  border: 2px solid var(--2, #12151c);
  backdrop-filter: blur(2px);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 32px;
}
.filter-rating-screen-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 12px;
  padding-right: 12px;
}
.rating-sec.active {
  border-radius: 12px;
  background: var(--2, #12151c);
}
.filter-star-img {
  margin-right: 5px;
  height: 16px;
  display: flex;
}
.rating-sec.active .filter-txt {
  color: white;
}
.filter-txt {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

/************************ 41.Add New Address2 CSS ***************************/
.iti__arrow:before {
  content: url(../svg/up-arrow.svg) !important;
  position: absolute;
  left: 0;
  top: 0px;
  padding-left: 20px;
  margin-left: 12px !important;
  cursor: pointer;
}
.iti__arrow {
  border: 0 !important;
  margin-left: 12px !important;
}
.mobile-form {
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}
.sign-in-custom-input {
  border: none;
  background: transparent;
  width: 100%;
  padding-left: 12px;
  color: var(--3, #67696b);
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.iti__selected-dial-code {
  display: none;
}
#mobile_code {
  margin-left: 20px;
  padding-right: 0;
}
.iti--separate-dial-code .iti__selected-flag {
  background-color: transparent !important;
}
.iti {
  display: flex !important;
}
.form-details-sign-in {
  border-radius: 8px;
  background: #f0f0f0;
  padding: 12px;
  display: flex;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.location-img {
  position: relative;
  text-align: center;
}
.location-pin {
  position: absolute;
  bottom: 25%;
  left: 40%;
}
.map-img {
  border-radius: 24px;
}

/************************ 42.Add New Card CSS ***************************/
.demo-visa {
  background-image: url(../images/payment-method/visa-card.png);
  background-position: center;
  background-repeat: no-repeat;
  max-height: 200px;
  height: 100%;
  max-width: 343px;
  width: 100%;
  margin: 0 auto;
  border-radius: 24px;
  padding: 24px;
}
.card-hidden-number {
  color: var(--1, #fff);
  font-family: "IBM Plex Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 1px;
}
.card-name-jessica {
  width: 100%;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--1, #fff);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.card-date-cvv {
  color: var(--1, #fff);
  text-align: right;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.new_password_input .form-item input {
  border-radius: 12px;
  background: var(--1, #fff);
  border: navajowhite;
  padding: 12px 16px;
  margin-top: 8px;
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.info-person {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
}
.new_password_input .form-item input::placeholder {
  color: #212b46;
}
.ui-datepicker-header a.ui-datepicker-next {
  right: 0;
  background: url(../svg/right-arrow.svg);
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 50%;
}
.ui-datepicker-header a.ui-datepicker-prev {
  left: 0;
  background: url(../svg/right-arrow.svg);
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 50%;
  transform: rotate(180deg);
}
.ui-datepicker-header a > span {
  display: none;
}
#ui-datepicker-div {
  display: none;
  background-color: #fff;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
  margin-top: 0.25rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.ui-datepicker-calendar thead th {
  padding: 0.25rem 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 400;
  color: #78909c;
}
.ui-datepicker-calendar tbody td {
  width: 2.5rem;
  text-align: center;
  padding: 0;
}
div#ui-datepicker-div {
  z-index: 500 !important;
}
.ui-datepicker-calendar tbody td a {
  display: block;
  border-radius: 0.25rem;
  line-height: 2rem;
  transition: 0.3s all;
  color: #546e7a;
  font-size: 0.875rem;
  text-decoration: none;
}
.ui-datepicker-calendar tbody td a:hover {
  background-color: rgb(252 52 47 / 40%);
}
.ui-datepicker-calendar tbody td a.ui-state-active {
  background-color: #fc342f;
  color: white;
}
.ui-datepicker-header a.ui-corner-all {
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 2rem;
  height: 2rem;
  margin: 0.5rem;
  border-radius: 0.25rem;
  transition: 0.3s all;
}
.ui-datepicker-title {
  text-align: center;
  line-height: 32px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}
.expiry-date.mt-16 {
  display: flex;
  column-gap: 16px;
}
.card-name-jessica-main-sub {
  display: flex;
  align-items: center;
  gap: 30px;
}
.date-number-cvv {
  display: flex;
  align-items: center;
  gap: 16px;
}

/************************ 43.Account CSS ***************************/
.account-top-sec {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  background: var(--1, #fff);
  padding: 12px;
}
.account-edit img {
  width: 24px;
  height: 24px;
  display: flex;
}
.account-img img {
  border-radius: 50%;
}

/************************ 44.Profile Edit CSS ***************************/
.profile-edit-img {
  text-align: center;
  position: relative;
  width: 120px;
  height: 120px;
  margin: auto;
}
.profile-edit-img img {
  border-radius: 60px;
  max-width: 200px;
  max-height: 200px;
  width: 100%;
  height: auto;
}
.image-input {
  position: absolute;
  bottom: 6px;
  right: 0px;
}
.image-input input {
  display: none;
}
.image-button {
  background: black;
  padding: 8px;
  border-radius: 20px;
  cursor: pointer;
}
.custom-icon-edit {
  position: absolute;
  right: 16px;
  top: 35%;
  cursor: pointer;
}
.arrow-icon1 {
  background-position: 100% center;
  padding: 0 0 0 6px !important;
}

/************************ 45.Homescreen2 CSS ***************************/
#homescreen2-main .search-text {
  height: 48px;
}
.search-text {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
#homescreen2-main .logos1 {
  transform: none;
  top: 0;
}
#homescreen2-main .shop-now2-sec {
  background-image: url(../images/homescreen2/shop-now1.png);
}
#homescreen2-main .homescreen-third-wrapper {
  background: var(--4, #ffaa01);
}
#homescreen2-main .homescreen1-offer-img img {
  width: 100%;
}

/************************ 46.Rating Review CSS ***************************/
#rating-review .review-progress {
  border-bottom: 2px solid white;
  padding-bottom: 24px;
}
.rating-second-sec-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.rating-review-sec {
  width: 50%;
  border-radius: 12px;
  border: 2px solid var(--2, #12151c);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  backdrop-filter: blur(2px);
  text-align: center;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.rating-review-sec span {
  color: var(--3, #464849);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
.rating-review ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.rating-review ul li {
  display: inline-block;
}
.review-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.review1 {
  margin-left: auto;
}
.review img {
  border-radius: 50%;
}
.review-time {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 12px;
}
.review-para {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}
.review-helpful-sec-full {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid hsl(222deg 22% 9% / 8%);
  border-top: 1px solid hsl(222deg 22% 9% / 8%);
  padding: 8px 0;
}
.helpful-txt {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
}
.rating-review {
  display: flex;
  align-items: center;
  gap: 16px;
}
.like-txt1 {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
}
.review h4 {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
.review-img-sec.mt-12 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-img-sec img {
  border-radius: 12px;
}

/************************ 47.Wallet CSS ***************************/
.Wallet-first-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wallet-title {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
}
.wallet-txt2 {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
.payment-method-checkoutpage-full {
  display: flex;
  padding: 0 16px;
  gap: 8px;
}
.check-select-mode input[type="radio"] {
  display: none;
}
.payment-custom-radio {
  width: 70px;
  height: 49px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
}

/************************ 48.Cart CSS ***************************/
.edit-cart-btn {
  border-radius: 36px;
  background: var(--2, #12151c);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit-cart-btn img {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cart-main .delete-btn {
  margin-left: auto;
}
.tooltip-button {
  position: relative;
  padding: 10px 20px;
}
.total-checkout-order p:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 10px;
  border-style: solid;
  border-color: #fc342f #fc342f00 #fc342f00 #88888800;
}
.total-checkout-order p {
  background-color: #fc342f;
  color: #fff;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  color: var(--1, #fff);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.total-checkout-order {
  position: fixed;
  left: 0;
  right: 0;
  max-width: 288px;
  margin-left: auto;
  margin-right: auto;
  bottom: 90px;
  padding: 0 16px;
}
#cart-main {
  padding-bottom: 160px;
}
.cart-modal-title h2 {
  color: var(--2, #12151c);
  text-align: center;
  font-family: "IBM Plex Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
}
#cart-product-modal .overview-txt h2 {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
}
#cart-product-modal .modal-dialog {
  position: fixed !important;
  bottom: 0 !important;
  left: 0% !important;
  right: 0% !important;
  margin-bottom: 0 !important;
}
.border-bottom-modal {
  border-top: 2px solid white;
  border-bottom: 2px solid white;
  padding-bottom: 24px;
  margin-top: 24px;
}
#cart-product-modal .finger-print-bottom {
  padding-bottom: 24px;
}
#cart-product-modal .modal-body {
  border-radius: 24px 24px 0px 0 !important;
}
.account-name h3 {
  color: var(--2, #12151c);
  text-overflow: ellipsis;
  font-family: "IBM Plex Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.account-name p {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

/************************ 49.Notification CSS ***************************/
.notification-deatails {
  border-radius: 12px;
  background: var(--1, #fff);
  padding: 12px;
  margin-top: 8px;
}
.notification-deatails h3 {
  overflow: hidden;
  color: var(--2, #12151c);
  text-overflow: ellipsis;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  display: -webkit-box;
  width: 319px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.notification-deatails p {
  color: var(--3, #464849);
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  margin-top: 8px;
}
.noti-time {
  color: var(--2, #12151c);
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
}
.menu-sidebar .btn-close:focus {
  box-shadow: none !important;
}
/************************ 50.Preloader CSS ***************************/
.preloader {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  background: -o-radial-gradient(circle, #333, #000) no-repeat;
  background: radial-gradient(circle, #333, #000) no-repeat;
  z-index: 999;
  text-align: center;
  overflow: hidden;
  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;
}
.opposites {
  position: relative;
  width: 60px;
  height: 60px;
}
.opposites {
  animation: opposites 2.5s ease-out 0s infinite;
}
.tl,
.tr,
.br,
.bl {
  width: 30px;
  height: 30px;
  position: absolute;
}
.tl,
.tr {
  top: 0;
}
.tr,
.br {
  left: 30px;
}
.tl,
.br {
  animation: tlbr 2.5s ease-out 0s infinite;
}
.br,
.bl {
  top: 30px;
}
.tl,
.bl {
  left: 0;
}
.tr,
.bl {
  animation: trbl 2.5s ease-out 0s infinite;
}
.tl {
  background: #fc342f;
  transform-origin: bottom right;
}
.tr {
  background: #00d061;
  transform-origin: bottom left;
}
.br {
  background: #ffaa01;
  transform-origin: top left;
}
.bl {
  background: #ffffff;
  transform-origin: top right;
}
@keyframes tlbr {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(90deg);
  }
  40% {
    transform: rotate(90deg);
  }
  60% {
    transform: rotate(0);
  }
}
@keyframes trbl {
  20% {
    transform: rotate(0);
  }
  40% {
    transform: rotate(90deg);
  }
  60% {
    transform: rotate(90deg);
  }
  80% {
    transform: rotate(0);
  }
}
@keyframes opposites {
  80% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}