@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap");

:root {
  --site-primary-font: "Plus Jakarta Sans", sans-serif !important;
  --site-secondary-font: "Cormorant Garamond", serif!important;
  --site-tertiary-font: "Bricolage Grotesque", sans-serif !important;

  --site-primary-color: #ff5722;
  --site-secondary-color: #faebe4;
  --site-tertiary-color: #2255e8;
  --site-quaternary-color: #f15a25;
  --site-text-color: #1f1f1f;
  --site-text-muted-color: #808080;
  --site-button-text-color: #ffffff;
  --site-button-bg-color: #f15a25;
  --primary-accounting: #16b6aa;

  --bdcBg: #eef2f8;
  --bdcSurface: #ffffff;
  --bdcSurfaceAlt: #f7f9fc;
  --bdcBorder: #dde5ef;
  --bdcText: #0d1c2e;
  --bdcTextSub: #526070;
  --bdcTextMuted: #97a8ba;
  --bdcRadiusLg: 18px;
  --bdcRadiusMd: 10px;
  --bdcShadow: 0 2px 20px rgba(0, 40, 100, 0.08);

  --sSiteWhite: #ffffff;
  --sSiteOffWhite: #f4f6fb;
  --sSiteBorder: #e2e8f4;
  --sSiteBorderMid: #c8d3ec;
  --sSiteText: #0d1b4b;
  --sSiteTextMid: #4a5578;
  --sSiteTextMuted: #8a96b8;
  --sSiteGold: #f5a623;
  --sSiteOrange: #f15a25;
  --sSiteGreen: #17b26a;
  --sSiteGreenLt: #e6f9f1;
  --sSiteRed: #ef4444;
  --sSiteRadius: 18px;
  --sSiteRadiusSm: 12px;
  --sSiteRadiusXs: 8px;
}

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

body {
  font-family: var(--site-primary-font) !important;
}

.primaryFont {
  font-family: var(--site-primary-font) !important;
}

.secondaryFont {
  font-family: var(--site-secondary-font) !important;
}

.tertiaryFont {
  font-family: var(--site-tertiary-font) !important;
}

p {
  font-weight: 300;
}

.booking-bg-primary {
  background: var(--site-primary-color) !important;
  color: white !important;
}

.booking-bg-secondary {
  background: var(--site-secondary-color) !important;
}

.booking-color {
  color: var(--site-primary-color) !important;
}

.booking-primary-border {
  border: 2px solid var(--site-primary-color) !important;
}

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

.orenge-color {
  color: var(--site-primary-color) !important;
}

/* bizcard */
.bizcard-bg-primary {
  background: var(--site-primary-color) !important;
  color: white !important;
}

.bizcard-color {
  color: var(--site-primary-color) !important;
}

.bizcard-primary-border {
  border: 2px solid var(--site-primary-color) !important;
}

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

/* website */

.website-bg-primary {
  background: var(--site-primary-color) !important;
  color: white !important;
}

.booking-bg-secondary {
  background: var(--site-secondary-color) !important;
}

.website-color {
  color: var(--site-primary-color) !important;
}

.website-primary-border {
  border: 2px solid var(--site-primary-color) !important;
}

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

/* E-Invoicing */

.invoicing-bg-primary {
  background: var(--site-primary-color) !important;
  color: white !important;
}

.invoicing-bg-secondary {
  background: var(--site-secondary-color) !important;
}

.invoicing-color {
  color: var(--site-primary-color) !important;
}

.invoicing-primary-border {
  border: 2px solid var(--site-primary-color) !important;
}

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

/* Engager */

.engager-bg-primary {
  background: var(--site-primary-color) !important;
  color: white !important;
}

.engager-bg-secondary {
  background: var(--site-secondary-color) !important;
}

.engager-color {
  color: var(--site-primary-color) !important;
}

.engager-primary-border {
  border: 2px solid var(--site-primary-color) !important;
}

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

/* accounting */

.accounting-bg-primary {
  background: var(--primary-accounting) !important;
  color: white !important;
}

.accounting-bg-secondary {
  background: var(--site-secondary-color) !important;
}

.accounting-color {
  color: var(--primary-accounting) !important;
}

.accounting-primary-border {
  border: 2px solid var(--primary-accounting) !important;
}

.accounting-primary-border2 {
  border: 1px solid var(--primary-accounting) !important;
}

/* marketing */

.marketing-bg-primary {
  background: var(--primary-marketing) !important;
  color: white !important;
}

.marketing-bg-secondary {
  background: var(--secondary-marketing) !important;
}

.marketing-color {
  color: var(--primary-marketing) !important;
}

.marketing-primary-border {
  border: 2px solid var(--primary-marketing) !important;
}

.marketing-primary-border2 {
  border: 1px solid var(--primary-marketing) !important;
}

/* e payments */

.epayment-bg-primary {
  background: var(--site-primary-color) !important;
  color: white !important;
}

.epayment-bg-secondary {
  background: var(--site-secondary-color) !important;
}

.epayment-color {
  color: var(--site-primary-color) !important;
}

.epayment-primary-border {
  border: 2px solid var(--site-primary-color) !important;
}

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

.textBlack {
  color: #000;
}

.textBlack1 {
  color: #010101;
}

.textBlack2 {
  color: #313131;
}

.mutedText {
  color: #4b4b4b;
}

.mutedText1 {
  color: #605a5a;
}

.orangeText {
  color: var(--site-primary-color);
}

.greenColor1,
.greenColor1:hover {
  color: #517e64;
}

.primaryBg,
.primaryBg:hover {
  background-color: var(--site-primary-color);
  color: #fff;
}

.bizcardprimaryBg,
.bizcardprimaryBg:hover {
  background-color: #845fb0;
  color: #fff;
}

.linearLightBg {
  background: linear-gradient(122.57deg,
      #ffffff 0.44%,
      rgba(255, 255, 255, 0) 129.28%);
}

.secondaryBg,
.secondaryBg:hover {
  background-color: var(--site-primary-color);
  color: #fff;
}

.teritaryColor {
  color: #170b9c;
}

.websiteAllProduct a {
  color: #000 !important;
}

.bookingPrimary {
  color: var(--site-primary-color);
}

.bizcardPrimary {
  color: #845fb0;
}

.blackColor1 {
  color: #212121;
}

.teritaryBg,
.teritaryBg:hover {
  background-color: #3e31cf;
}

.blueDark {
  background-color: #000080;
}

.blueDarkText {
  color: #000080;
}

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

.secondaryBg3:hover {
  background-color: var(--site-primary-color);
}

.greenBg {
  background-color: #327e01;
}

.darkBlueBg {
  background-color: #3a1592;
}

.yellowBg1 {
  background-color: #ebaa28;
}

.greenBg1 {
  background-color: #1a9a2f;
}

.orangeBg,
.orangeBg:hover {
  background-color: var(--site-primary-color);
}

.secondaryColor {
  color: var(--site-primary-color);
}

.orangeColor {
  color: var(--site-primary-color);
}

.secondaryColor3 {
  color: var(--site-primary-color);
}

.secondaryColor1 {
  color: var(--site-primary-color);
}

.cursorPointer {
  cursor: pointer !important;
}

.secondaryColor2,
.secondaryColor2:hover {
  color: var(--site-primary-color);
}

.blackColor2 {
  color: #303030;
}

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

.pinkBg,
.pinkBg:hover {
  background-color: var(--site-primary-color);
}

.lightPurpleBg {
  background-color: #faf8ff;
}

.yellowBg {
  background-color: #f7a91b;
}

.infoBG {
  background-color: #53c8bf;
}

.blueBg {
  background-color: #3e31cf;
}

.mutedBg {
  background-color: #f6f6f6;
}

.darkBlueBg1,
.darkBlueBg1:hover {
  background-color: var(--site-primary-color);
}

.greenColor {
  color: #39b54a;
}

.yellowColor {
  color: #eb8307;
}

.blackColor {
  color: #1a181e;
}

.mutedColor {
  color: #595959;
}

.blackText {
  color: #4e4e4e;
}

.font18 {
  font-size: 18px;
  line-height: 24px;
}

.font300 {
  font-weight: 300;
}

.font400 {
  font-weight: 400;
}

.font500 {
  font-weight: 500;
}

.font600 {
  font-weight: 600;
}

.font700 {
  font-weight: 600;
}

.font800 {
  font-weight: 700;
}

.font300px {
  font-size: 300px;
  line-height: 210px;
}

.font225 {
  font-size: 190px;
  line-height: 210px;
}

.font150 {
  font-size: 150px;
  line-height: 183px;
}

.font125 {
  font-size: 125.64px;
  line-height: 147px;
}

.font80 {
  font-size: 80px;
  line-height: 80px;
}

.font72 {
  font-size: 72px;
  line-height: 72px;
}

.font60 {
  font-size: 60px;
  line-height: 50px;
}

.font42 {
  font-size: 42px;
  line-height: 50px;
}

.font40 {
  font-size: 40px;
  line-height: 47px;
}

.font36 {
  font-size: 36px;
  line-height: 36px;
}

.font34 {
  font-size: 34px;
  line-height: 40px;
}

.font32 {
  font-size: 32px;
  line-height: 37px;
}

.font30 {
  font-size: 30px;
  line-height: 35px;
}

.font26 {
  font-size: 26px;
  line-height: 30px;
}

.font24 {
  font-size: 24px;
  line-height: 28px;
}

.font21 {
  font-size: 21px;
  line-height: 27px;
}

.font20 {
  font-size: 20px;
  line-height: 30px;
}

.font16 {
  font-size: 16px;
  line-height: 24px;
}

.font14 {
  font-size: 14px;
  line-height: 17px;
}

.font12 {
  font-size: 12px;
  line-height: 14px;
}

.border2Left {
  border-left: 2px solid var(--site-primary-color);
}

.border2Top {
  border-top: 2px solid var(--site-primary-color);
}

.border2Right {
  border-right: 2px solid var(--site-primary-color);
}

.border2Bottom {
  border-bottom: 2px solid var(--site-primary-color);
}

.borderRadius0 {
  border-radius: 0px !important;
}

.borderRadius2 {
  border-radius: 8px !important;
}

.borderRadius10 {
  border-radius: 10px !important;
}

.card {
  border-radius: 10px;
}

.transparentBg {
  background-color: transparent;
}

.primaryBorder {
  border: 2px solid var(--site-primary-color);
}

.bottomBorder {
  height: 4px;
  background-color: #d9d9d9;
}

.filledBg {
  height: 4px;
  width: 90%;
}

.borderRadius50 {
  border-radius: 50px;
}

.border-primary {
  border-color: #3e31cf !important;
}

.border-primary td,
.border-secondary td,
.border-teritory td {
  border-width: 2px;
}

.border-teritory {
  border-color: var(--site-primary-color) !important;
}

.cardBoxShadow {
  box-shadow: -16.066408157348633px 48.410091400146484px 59.244873046875px 0px #514e782e;
  background: #ffffff80 !important;
}

.border-secondary {
  border-color: var(--site-primary-color) !important;
}

.primaryBorder2,
.primaryBorder2:hover {
  border: 1px solid #a3a3a3;
}

.orangeBackground p.font20.font500 {
  margin-top: 5px !important;
  margin-bottom: 25px !important;
}

.servicesSection.py-4 p.responsiveTextCenter {
  margin-top: 5px !important;
  margin-bottom: 25px !important;
}

#products p.font20.responsiveTextCenter {
  margin-top: 5px !important;
  margin-bottom: 25px !important;
}

div#gallery {
  max-width: 100% !important;
  padding-left: max(24px, calc(50vw - 640px)) !important;
  padding-right: max(24px, calc(50vw - 640px)) !important;
  margin-top: 70px;
  padding-top: 70px !important;
  padding-bottom: 70px !important;
  background-color: #f4f6fb;
  background-image: radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--site-primary-color) 6%, transparent) 0%, transparent 70%);
}

div#gallery p.font20.font500 {
  color: #6b7280 !important;
  margin-top: 5px !important;
}

.faqSection p.font20.font500.mt-3.mb-0 {
  margin-top: 5px !important;
}

div#verticals p.font20.font500 {
  margin-top: 5px !important;
}

.cardShadow {
  box-shadow: 0px 4px 20px 1px #00000040;
}

.borderRadius20 {
  border-radius: 20px !important;
}

.boxShadowNone {
  box-shadow: none !important;
}

.lightBoxShadow {
  box-shadow: 0px 4px 20px 0px #0000001a;
}

.socialIconShadow {
  box-shadow: 0px 4px 13px 0px #00000017;
}

.facebookColor {
  color: #596aff;
}

.twitterColor {
  color: #60e2ff;
}

.linkdinColor {
  color: #5c94d7;
}

.instaColor {
  color: #aa5c94;
}

.blueText {
  color: var(--site-primary-color);
}

.mutedColor2 {
  color: #424242;
}

.lightPurpleBg {
  background-color: #efe8ff;
}

a {
  text-decoration: none;
}

.mutedText2 {
  color: #8d8d8d;
}

.bgTransparent,
.bgTransparent td {
  background-color: transparent !important;
}

.w-20 {
  justify-content: center;
  /* display: flex; */
  width: 20%;
}

.h-80 {
  height: 80%;
}

.primaryBoxShadow {
  box-shadow: 0px 0px 20px 1px #ffd6df;
}

.zIndex2 {
  z-index: 2;
}

.articleLogo {
  height: 100px;
}

.articleText {
  border-bottom: 1px dashed rgb(196, 196, 196);
  padding-bottom: 20px;
}

.articleLink a {
  color: var(--site-primary-color);
  font-weight: 600;
  border-bottom: 1px dashed var(--site-primary-color);
}

.articleDownloadLink a {
  color: var(--site-primary-color);
  font-weight: 600;
  border-bottom: 1px dashed var(--site-primary-color);
}

.articleCard {
  height: 300px;
}

/* Wizard CSS */

.wizardHeading {
  font-weight: 500 !important;
  font-size: 19.5px;
  line-height: 29px;
  color: #242424;
}

.wizardSubmitButton {
  color: var(--site-primary-color);
  background-color: var(--site-primary-color);
  border: var(--site-primary-color);
  color: #ffffff;
  font-weight: 500;
  height: 50px;
}

.wizardSubmitButton:hover {
  background-color: var(--site-button-bg-color);
  border: var(--site-button-bg-color);
  color: #ffffff;
  font-weight: 500;
}

.cFilterWizard label {
  color: #727272 !important;
}

.bizGrid {
  height: 170px;
}

/* .instaWizard {
    background: #f6f4ff;
    border-radius: 5px;
    box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.05);
    padding: 20px;
} */

.loadLink {
  cursor: pointer;
  color: var(--site-primary-color) !important;
  font-weight: 600 !important;
  text-decoration: none;
}

.successMessage h5 {
  font-size: 20px !important;
  font-weight: 500 !important;
}

.card {
  border-radius: 10px;
}

.form-control {
  width: 100%;
  padding: 12px 16px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 0.95rem !important;
  color: #0c121d;
  transition: all 0.2s ease;
}

.form-select {
  padding: 10px 10px;
  border-radius: 10px;
}

.customButton {
  border-radius: 10px !important;
  padding: 10px 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

.customButton:hover {
  color: #ffffff !important;
  background-color: #140024 !important;
}

u.borderBottomDashed {
  border-bottom: 2px dashed #2e2e2e;
  text-decoration: none;
  margin-top: 15px;
  text-transform: lowercase !important;
}

.headerLogo {
  width: 125px;
}

/* main css start here */

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .verticalProduct .serviceCard .serviceActions .buyNowButton {
    padding: 8px 20px !important;
  }
}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

.borderBottom {
  border-bottom: 1px solid #d4d4d4;
}

.navbarCss {
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
}

.shape {
  position: relative;
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
  z-index: 1;
  background-color: var(--site-primary-color);
  height: 100%;
}

.shapeInner {
  position: absolute;
  /* clip-path: polygon(1% 1%, 90% 1%, 100% 50%, 90% 100%, 1% 100%); */
  clip-path: polygon(0% 0%, 90% 1%, 100% 50%, 90% 100%, 0% 100%);
  z-index: 2;
}

.custom-shape {
  position: relative;
  width: 100%;
  background-color: var(--site-primary-color);
  height: 100%;
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.border-span {
  width: 99.5%;
  height: 99.5%;
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
  z-index: 1;
}

.backgroundBg {
  background-image: url("../img/bgGradient.svg");
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 100px;
}

.bookingbackgroundBg {
  background-image: url("../img/booking-gradient.svg");
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 100px;
}

.custom {
  accent-color: #3e31cf !important;
  width: 25px;
  height: 25px;
  vertical-align: bottom;
  margin-right: 5px;
}

.height65 {
  height: 65px !important;
}

.mapBg {
  background-image: url("../img/Object.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.orangeBackground {
  background-image: url("https://bigdot.ai/assets/img/Group%20718.svg");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0px;
  margin-top: 0px !important;
}

.carousel-indicators [data-bs-target] {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #3e31cf;
}

.carousel-indicators {
  margin-bottom: 6rem !important;
}

.carousel-indicators .active {
  background-color: #3e31cf;
}

.top-25 {
  top: -25px;
}

.marginTopNegative {
  margin-top: -55px;
}

.marginTop-20 {
  margin-top: -20px;
}

.socialMedia a i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
}

.heroSectionBg {
  background-image: url("../img/hero-image.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.heroSectionBg .icon {
  height: 45px;
}

.marginLeft-65 {
  margin-left: -65px;
}

.bookingborderPrimary {
  border: 1px solid var(--site-primary-color);
}

.borderPrimary {
  border: 1px solid var(--site-primary-color);
}

.borderSecondary {
  border: 1px solid var(--site-primary-color);
}

.borderSecondary:hover {
  border: 1px solid var(--site-primary-color);
}

.borderPink {
  border: 1px solid var(--site-primary-color);
}

.borderPrimary1 {
  border: 1px solid var(--site-primary-color);
}

.heroSectionRightBG {
  background-image: url("../img/product/Group\ 47254.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.sidesPadding {
  padding: 90px 30px;
}

.bookingbeyondBg {
  background-image: url("../img/beyond-booking.svg");
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 120px;
}

.beyondBg {
  background-image: url("../img/product/Group\ 47255\ \(1\).svg");
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 120px;
}

.js-video-button {
  border-radius: 50%;
  animation: ripple-white 1s linear infinite;
  cursor: pointer;
}

#heroCaousel img {
  width: unset;
}

.userImg {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #fff;
}

@keyframes ripple-white {
  0% {
    box-shadow:
      0 0 0 0 rgb(58, 21, 147, 0.05),
      0 0 0 10px rgb(58, 21, 147, 0.05),
      0 0 0 20px rgb(58, 21, 147, 0.05);
  }

  100% {
    box-shadow:
      0 0 0 10px rgba(58, 21, 147, 0.05),
      0 0 0 20px rgba(58, 21, 147, 0.05),
      0 0 0 30px rgba(58, 21, 147, 0.05);
  }
}

@media (max-width: 420px) {
  .width70 {
    width: 50px;
  }
}

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  #heroCaousel img {
    width: unset;
    display: block;
    margin: auto;
  }

  #products .row.borderPrimary::before {
    top: -6px !important;
    left: -6px !important;
    right: -6px !important;
    bottom: -6px !important;
  }

  .servicesSection .row.m-0::before {
    top: -6px !important;
    left: -6px !important;
    right: -6px !important;
    bottom: -6px !important;
  }

  .orangeBackground .row.borderSecondary::before {
    top: -6px !important;
    left: -6px !important;
    right: -6px !important;
    bottom: -6px !important;
  }

  .sellAnywhereBeauty p.font20.font500.responsiveTextCenter {
    margin-bottom: 0px !important;
  }

  section#plans p.font16.font500.textBlack1.mb-0 {
    font-weight: 400;
  }

  .productGallery .card.border-0.w-100 p.mb-0 {
    font-size: 13px;
  }

  section.faqSection p.font20.font500.mt-3.mb-0 {
    margin-bottom: 0px !important;
  }

  .navbarCss .navbar-nav .nav-link i.fa-solid.fa-bars-staggered {
    display: block !important;
  }

  .font40,
  .font42 {
    font-size: 24px;
    line-height: 30px;
    padding-bottom: 4px !important;
  }

  .font34 {
    font-size: 22px;
    line-height: 40px;
  }

  .font24 {
    font-size: 18px;
    line-height: 22px;
  }

  .font60 {
    font-size: 28px;
    line-height: 40px;
  }

  .font26,
  .font20 {
    font-size: 16px;
    line-height: 22px;
  }

  .font18 {
    font-size: 15px;
    line-height: 20px;
  }

  .font125 {
    line-height: 95px;
    font-size: 80px;
  }

  .font150 {
    font-size: 92px;
    line-height: 113px;
  }

  .font20 {
    font-size: 14px !important;
    line-height: 20px !important;
    margin-top: 5px !important;
    font-weight: 400;
    margin-bottom: 15px !important;
  }

  .servicesSection.py-4 p.font20.font500.responsiveTextCenter {
    margin-bottom: 25px !important;
  }

  .responsiveFW700 {
    font-weight: 500;
  }

  .responsiveWidth100 {
    width: 100%;
  }

  .width70 {
    width: 70px;
  }

  .font21 {
    font-size: 13px;
    line-height: 16px;
  }

  .custom {
    width: 20px;
    height: 20px;
  }

  .carousel-indicators {
    margin-bottom: 3.5rem !important;
  }

  .font80 {
    line-height: 50px;
  }

  .responsiveFS22 {
    font-size: 20px !important;
    line-height: 30px !important;
  }

  .filledBg {
    height: 4px;
    width: 80% !important;
  }

  .bottomBorder {
    width: 100% !important;
  }

  .d-grid a.btn.btn-lg {
    padding: 10px 8px;
    font-size: 14px;
  }

  .d-grid a.btn.btn-lg .ms-2 {
    margin-left: 0.2rem !important;
  }

  .scrolldiv {
    overflow: auto;
    white-space: nowrap;
    display: block;
    margin-top: 0px !important;
    padding: 0px 5px;
  }

  .orangeBackground {
    padding: 25px 15px 0px;
    margin-top: 30px !important;
    background-attachment: fixed;
  }

  div#verticals {
    margin-top: 0px !important;
  }

  .scrolldiv .items {
    display: inline-block;
    width: 140px;
  }

  .font72 {
    font-size: 34px;
    line-height: 45px;
  }

  .sidesPadding {
    padding: 50px 20px 40px;
  }

  .font30 {
    font-size: 16px;
    line-height: 25px;
  }

  .backgroundBg {
    padding-top: 0px;
  }

  .bookingbackgroundBg {
    padding-top: 0px;
  }

  .font300px {
    font-size: 200px;
  }

  .font32 {
    font-size: 25px;
    line-height: 30px;
  }

  .caveatFont.textBlack1 {
    margin-top: 20px;
  }

  .heroSectionRightBG .col-md-6.col-6 {
    margin-bottom: 10px;
  }

  .heroSectionRightBG {
    margin-top: 15px !important;
  }

  .backgroundBg .btn.teritaryBg {
    margin-top: 0px !important;
  }

  .backgroundBg .row.pb-5 {
    padding-bottom: 30px !important;
  }

  .bookingbackgroundBg .btn.teritaryBg {
    margin-top: 0px !important;
  }

  .bookingbackgroundBg .row.pb-5 {
    padding-bottom: 30px !important;
  }

  .bookingHero {
    width: 325px;
    margin: 0 auto;
  }

  /* .col-md-6.mt-4.font600.blackColor {
    margin-top: 0px !important;
  } */

  .beyondBg {
    padding-top: 90px;
    padding-bottom: 0px !important;
    background-size: inherit;
  }

  .card.border-0.w-100 .darkBlueBg {
    text-align: left !important;
    padding: 12px 8px !important;
  }

  .heroSection .ProductPage {
    max-height: 290px;
  }

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

  .productGallery .card.border-0.w-100 .darkBlueBg a.text-white {
    font-size: 13px;
  }

  .card.border-0.w-100 .darkBlueBg a.text-white img.img-fluid {
    width: 12px;
  }

  .card.border-0.w-100 .yellowBg1 {
    text-align: center !important;
  }

  .card.border-0.w-100 .greenBg1 {
    background-color: #1a9a2f;
    text-align: center !important;
  }

  .font36 {
    font-size: 20px;
    line-height: 22px;
    margin-bottom: 5px;
  }

  /* Rahman Changes */
  .col-12.borderPink.p-lg-3.py-3 {
    margin-bottom: 15px;
  }

  .row.footerResponsive.pt-lg-5.pt-0.font16.font500 {
    display: flex;
    flex-direction: column;
  }

  .col-md-6.col-lg-4.bizcard-primary-border2.p-lg-4.py-3 {
    margin-bottom: 15px;
  }

  .col-md-6.col-lg-4.booking-primary-border2.p-lg-4.py-3 {
    margin-bottom: 15px;
  }
}

.font38 {
  font-size: 39px;
  line-height: 40px;
}

.navbarCss .navbar-nav .nav-link i.fa-solid.fa-bars-staggered {
  display: none;
}

.trangleBorder {
  width: 100%;
  height: 0;
  border-left: 133px solid transparent;
  border-right: 133px solid transparent;
  border-bottom: 50px solid var(--site-primary-color) ed;
}

.trangleBorderInside {
  width: 100%;
  height: 0;
  border-left: 133px solid transparent;
  border-right: 133px solid transparent;
  border-bottom: 50px solid #fff;
  padding: 2px !important;
  padding-bottom: 0px !important;
}

.marginTop-15 {
  margin-top: -15px;
}

/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (min-width: 767.98px) and (max-width: 1100px) {
  .carousel-indicators {
    margin-bottom: 3.5rem !important;
  }

  .bigdotLogoFooter {
    width: 80px !important;
  }

  .font18 {
    font-size: 14px;
    line-height: 18px;
  }

  .font150 {
    font-size: 92px;
    line-height: 113px;
  }

  .scrolldiv {
    overflow: auto;
    white-space: nowrap;
    display: block;
  }

  .scrolldiv .items {
    display: inline-block;
  }

  .font72 {
    font-size: 55px;
    line-height: 65px;
  }

  .font40 {
    font-size: 30px;
    line-height: 40px;
  }

  .font30 {
    font-size: 15px;
    line-height: 20px;
  }
}

.BigDotPurchaseHeader .LanguageSection span#headerLanguage {
  border: 1px solid #fff;
  background: var(--site-primary-color);
}

.scrollImage {
  overflow: auto;
  white-space: nowrap;
  display: block;
}

.scrollImage .pluginsImage {
  display: inline-block;
}

/* megamenu css start here */

.navbar .has-megamenu {
  position: static !important;
}

.navbar .megamenu {
  left: 50% !important;
  right: auto !important;
  width: 720px !important;
  margin-top: 10px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.06);
  transform: translateX(-50%);
  padding: 0;
  overflow: hidden;
}

.megamenuInner {
  padding: 20px 24px 24px;
}

.megamenuSectionLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94a3b8;
  margin-bottom: 12px;
}

.megamenuItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s ease;
  margin-bottom: 2px;
}

.megamenuItem:hover {
  background: color-mix(in srgb, var(--site-primary-color) 10%, transparent);
  text-decoration: none;
}

.megamenuItem:hover .megamenuIcon {
  background: color-mix(in srgb, var(--site-primary-color) 20%, transparent);
}

.megamenuIcon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--site-primary-color) 10%, transparent);
  transition: background 0.15s ease;
}

.megamenuIcon i {
  font-size: 17px;
  color: var(--site-primary-color);
}

.megamenuContent h4 {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 2px;
  line-height: 1.3;
}

.megamenuContent p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.navbar-expand-lg .navbar-nav {
  position: initial;
}

.navbar li .dropdown-menu.fade-down {
  width: 100% !important;
}

.mat-mdc-form-field-infix.ng-tns-c3736059725-0 {
  padding: 10px !important;
}

.mdc-notched-outline {
  height: 45px !important;
}

.mat-mdc-form-field {
  height: 0px !important;
}

.mdc-text-field--outlined .mdc-text-field__input {
  padding: 10px 0px !important;
  font-size: 14px !important;
  color: #4e5255 !important;
}

.mat-mdc-form-field-infix.ng-tns-c3736059725-0 {
  padding: 0px 0px !important;
  font-size: 15px !important;
  color: #dee2e6 !important;
}

.sellAnywhereBeauty .font500.responsiveTextCenter.mt-3 {
  margin-top: 5px !important;
  margin-bottom: 0px !important;
}

.planSection p.font16.font500.textBlack1.mb-0 {
  margin-top: 10px;
}

.planSection p.font42.blackColor {
  margin-bottom: 10px !important;
}

.dropdown,
.dropdown-center,
.dropend,
.dropstart,
.dropup,
.dropup-center {
  position: initial;
}

.flatpickr-input {
  background-color: white !important;
  cursor: pointer;
}

.formHeight {
  height: 45px;
  border-radius: 4px;
}

.btn-whatsapp {
  background-color: #25d366;
  color: white;
  font-weight: 500;
  padding: 10px;
  border-radius: 4px;
}

.btn-whatsapp:hover {
  background-color: #128c7e;
  color: white;
}

.wizardFormHeading {
  font-weight: 500;
  font-size: 14px;
  color: #333;
}

/* megamenu css end here */

.socialIcon {
  width: 40px;
  height: 40px;
  padding-top: 10px;
  border-radius: 50%;
  box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.09);
  text-align: center;
}

/* Rahman changes */
img.img-fluid.pluginsImage {
  width: 115px;
  height: 115px;
}

.newsArticleSlide .col-md-6 {
  position: relative;
}

.newsArticleSlide .col-md-6:first-child {
  background-image: url("https://cdn.create.vista.com/api/media/small/203505026/stock-vector-morning-coffee-and-newspaper-on-table");
  background-size: cover;
  background-position: center;
  height: 500px;
}

.newsArticleSlide .col-md-6:last-child {
  background: var(--site-primary-color);
  height: 380px;
  margin-left: -50px;
  max-width: 600px;
  z-index: 1;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.newsArticleSlide .owl-carousel .item {
  padding: 20px;
  text-align: center;
}

.newsArticleSlide .owl-carousel .item img {
  width: 200px;
  display: block;
  margin: 0 auto;
}

@media (max-width: 575.98px) {
  .newsArticleSlide .col-md-6:last-child {
    margin-left: 0px;
  }

  .articleCard {
    height: 320px;
  }

  .articleText h5 {
    font-size: 16px;
  }

  .mobilePaddingNewsroom {
    padding: 20px 20px 20px 20px !important;
  }

  .articleLink a {
    font-size: 15px;
  }

  .articleDownloadLink a {
    font-size: 15px;
  }

  .newsArticleSlide .col-md-6:first-child {
    display: none;
  }

  .newsArticleSlide {
    padding: 0px 0px 0px 0px;
  }
}

.navbarCss .navbar-nav .nav-link i.fa-solid.fa-bars-staggered {
  display: none;
}

.navbarCss .navbar-nav li.nav-item a.nav-link {
  color: #000;
  font-size: 16px;
  font-weight: 500;
}

.bigdotUpiFooter p {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0px;
  line-height: 14px;
  text-align: right;
  font-size: 14px;
}

.borderTopColor.borderTop {
  border-top: 1px solid !important;
  align-items: center;
}

.navbar.borderBottom {
  border-bottom: 1px solid #d4d4d4;
}

.mainSection .WebsiteSection:nth-child(1) {
  text-align: left;
}

.mainSection .WebsiteSection:nth-child(2) {
  text-align: right;
}

@media (max-width: 767px) {
  .container .productThreePrimaryBorder:nth-child(3) {
    border-radius: 0px;
  }

  .productGallery ul#myTab {
    padding-bottom: 10px;
  }

  .productGallery .nav-tabs .nav-link {
    margin-bottom: 15px;
  }

  .navbar .megamenu {
    width: 100% !important;
    transform: initial;
    left: 0 !important;
    border-radius: 12px;
    margin-top: 6px;
  }

  .featuresList .iconText {
    margin-bottom: 15px;
  }

  .featuresList .iconText i {
    color: var(--site-primary-color);
    font-size: 16px;
  }

  .plansSection .featuresList {
    display: block;
    font-size: 15px;
    color: #1a1a1a;
    margin-bottom: 30px !important;
    background-color: #ffc6b4;
    width: 100% !important;
    border-radius: 10px;
  }

  .container .productThreePrimaryBorder:nth-child(5) {
    border-radius: 0px 0px 0px 10px;
  }

  .container .productThreeBgPrimary {
    border-radius: 10px 10px 0px 0px;
  }

  .container .row.productThreePrimaryBorder {
    border-radius: 0px 0px 10px 10px;
  }

  .container .productFourPrimaryBorder:nth-child(3) {
    border-radius: 0px;
  }

  .container .productFourPrimaryBorder:nth-child(5) {
    border-radius: 0px 0px 0px 10px;
  }

  .container .productFourBgPrimary {
    border-radius: 10px 10px 0px 0px;
  }

  .container .row.productFourPrimaryBorder {
    border-radius: 0px 0px 10px 10px;
  }

  .container .productFivePrimaryBorder:nth-child(3) {
    border-radius: 0px;
  }

  .container .productFivePrimaryBorder:nth-child(5) {
    border-radius: 0px 0px 0px 10px;
  }

  .container .productFiveBgPrimary {
    border-radius: 10px 10px 0px 0px;
  }

  .container .row.productFivePrimaryBorder {
    border-radius: 0px 0px 10px 10px;
  }

  .container .productSixPrimaryBorder:nth-child(3) {
    border-radius: 0px;
  }

  .container .productSixPrimaryBorder:nth-child(5) {
    border-radius: 0px 0px 0px 10px;
  }

  body .orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(2) {
    border-top: 1px solid var(--site-primary-color) !important;
    border-bottom: 1px solid var(--site-primary-color) !important;
    border-right: 0px !important;
    border-left: 0px !important;
  }

  body .orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(5) {
    border: 0px !important;
  }

  body .orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(8) {
    border-bottom: 1px solid var(--site-primary-color) !important;
    border-top: 1px solid var(--site-primary-color) !important;
    border-right: 0px !important;
    border-left: 0px !important;
  }

  .container .productSixBgPrimary {
    border-radius: 10px 10px 0px 0px;
  }

  .container .row.productSixPrimaryBorder {
    border-radius: 0px 0px 10px 10px;
  }

  .container .productSevenPrimaryBorder:nth-child(3) {
    border-radius: 0px;
  }

  .container .productSevenPrimaryBorder:nth-child(5) {
    border-radius: 0px 0px 0px 10px;
  }

  .container .productSevenBgPrimary {
    border-radius: 10px 10px 0px 0px;
  }

  .container .row.productSevenPrimaryBorder {
    border-radius: 0px 0px 10px 10px;
  }

  .container .productEightPrimaryBorder:nth-child(3) {
    border-radius: 0px;
  }

  .container .productEightPrimaryBorder:nth-child(5) {
    border-radius: 0px 0px 0px 10px;
  }

  .container .productEightBgPrimary {
    border-radius: 10px 10px 0px 0px;
  }

  .container .row.productEightPrimaryBorder {
    border-radius: 0px 0px 10px 10px;
  }

  .container .productNinePrimaryBorder:nth-child(3) {
    border-radius: 0px;
  }

  .container .productNinePrimaryBorder:nth-child(5) {
    border-radius: 0px 0px 0px 10px;
  }

  .container .productNineBgPrimary {
    border-radius: 10px 10px 0px 0px;
  }

  .container .row.productNinePrimaryBorder {
    border-radius: 0px 0px 10px 10px;
  }

  .navbarCss .navbar-nav .nav-link i.fa-solid.fa-bars-staggered {
    display: block !important;
  }

  .purchaseModalVideo button.closeBtn {
    right: 0px !important;
    font-size: 25px !important;
    top: -35px !important;
  }

  .heroSection .mainSection {
    display: block !important;
  }
}

.orangeBackground .content-wrapper .secondaryBg1.filledBg.w-75 {
  background-color: #f87d33 !important;
}

.orangeBackground .exploreLink {
  text-decoration: none;
  color: #f87d33;
  font-size: 16px;
  display: block;
  font-weight: 500;
  z-index: 1;
  position: relative;
  text-decoration: underline;
}

.productGallery .nav-tabs .nav-link {
  margin-right: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  background: #fff;
  border: 1px solid #e5e7eb !important;
  border-radius: 100px;
  padding: 8px 22px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.productGallery .nav-tabs .nav-link:hover {
  background: color-mix(in srgb, var(--site-primary-color) 6%, #fff);
  color: var(--site-primary-color);
  border-color: color-mix(in srgb, var(--site-primary-color) 30%, transparent) !important;
}

.productGallery ul#myTab {
  border: 0;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e9ecef;
  flex-wrap: wrap;
}

.productGallery .nav-tabs .nav-link.active {
  border: 1px solid transparent !important;
  background: var(--site-primary-color);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--site-primary-color) 35%, transparent);
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border: 0px;
  outline: initial;
}

.productGallery .productPreview {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: top;
}

.productGallery .darkBlueBg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 24px 16px 14px !important;
}

.productGallery .col-md-4:nth-child(1) .darkBlueBg {
  background: linear-gradient(to top, var(--site-primary-color) 0%, var(--site-primary-color) 45%, color-mix(in srgb, var(--site-primary-color) 40%, transparent) 80%, transparent 100%);
}

.productGallery .col-md-4:nth-child(2) .darkBlueBg {
  background: linear-gradient(to top, #9b6c00 0%, #b07d00 45%, rgba(176, 125, 0, 0.4) 80%, transparent 100%);
}

.productGallery .col-md-4:nth-child(3) .darkBlueBg {
  background: linear-gradient(to top, #0a5218 0%, #0d6b20 45%, rgba(13, 107, 32, 0.4) 80%, transparent 100%);
}

.productGallery .col-md-4:nth-child(4) .darkBlueBg {
  background: linear-gradient(to top, #280805 0%, #3a0b07 45%, rgba(58, 11, 7, 0.4) 80%, transparent 100%);
}

.productGallery .col-md-4:nth-child(5) .darkBlueBg {
  background: linear-gradient(to top, #800012 0%, #a00018 45%, rgba(160, 0, 24, 0.4) 80%, transparent 100%);
}

.productGallery .col-md-4:nth-child(6) .darkBlueBg {
  background: linear-gradient(to top, #2d0a55 0%, #3a0d6e 45%, rgba(58, 13, 110, 0.4) 80%, transparent 100%);
}

.productGallery .card.border-0.w-100 {
  position: relative;
  height: 300px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.productGallery .card.border-0.w-100:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14), 0 0 0 2px color-mix(in srgb, var(--site-primary-color) 20%, transparent);
}

.faqSection {
  padding: 30px 0;
}

.accordionItem .accordion-body {
  font-weight: 300;
  padding-top: 0px;
  font-size: clamp(12px, 1.1vw, 15px);
}

.faqSection .accordionButton {
  font-weight: 600;
  background-color: #fff;
  box-shadow: none !important;
  position: relative;
  color: #1a181f;
  font-size: 20px;
}

/* Default icon (+) */
.faqSection .accordionButton::after {
  content: "+";
  font-size: 24px;
  font-weight: 500;
  position: absolute;
  right: 10px;
  top: 45%;
  transform: translateY(-55%);
  color: var(--site-primary-color);
  background-image: none !important;
}

/* Active state icon (-) */
.accordionButton:not(.collapsed)::after {
  content: "-";
}

.accordionItem {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  border: 1px solid #d9d9d9;
}

.accordionItem .accordionHeader {
  margin: 0px;
}

.footerSection {
  border-top: 2px dashed #bcbcbc;
  margin-top: 15px;
  padding: 15px 0;
}

.orderingFooterSection {
  border-top: 2px dashed #bcbcbc;
  margin-top: 15px;
  padding: 15px 0;
}

.TermsAndConditions {
  text-align: right;
}

.TermsAndConditions a {
  color: #212529;
  font-size: 14px;
}

/* main css end here */

.BigDotPurchaseHeader {
  position: absolute;
  width: 100%;
  margin-top: 10px;
  z-index: 100;
}

.container.header {
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 100px;
}

.bigdotSalesHeader .container.header a.nav-link {
  color: #1a1a1a !important;
}

.BigDotPurchaseHeader .container.header a.nav-link {
  color: #fff;
}

.BigDotPurchaseHeader .LanguageSection p.text-white {
  color: #fff !important;
}

.bigdotSalesHeader .LanguageSection p.text-white {
  color: #1a1a1a !important;
}

.BigDotPurchaseHeader p#headerCartwrapper i {
  color: #fff !important;
}

.bigdotSalesHeader p#headerCartwrapper i {
  color: var(--site-primary-color) !important;
}

.BigDotPurchaseHeader .header a.navbar-brand img {
  width: 80px;
}

.LanguageSection span#headerLanguage {
  border-radius: 50px;
  background: var(--site-primary-color);
  width: 80px;
  font-size: 14px;
  padding: 6px 6px;
  color: #fff;
  cursor: pointer;
  margin-right: 10px;
}

.LanguageSection {
  display: flex;
  align-items: center;
}

.LanguageSection span#headerLanguage select#headerLanguage-dropdopwn {
  width: 80px;
  background-color: var(--site-primary-color);
  border: 0px;
  color: #fff;
  cursor: pointer;
}

.heroSection {
  background-color: color-mix(in srgb, var(--site-primary-color) 18%, #05020d);
  background-image:
    radial-gradient(ellipse 65% 55% at 15% 30%,
      color-mix(in srgb, var(--site-primary-color) 35%, transparent) 0%,
      transparent 70%),
    radial-gradient(ellipse 50% 45% at 85% 70%,
      color-mix(in srgb, var(--site-primary-color) 20%, transparent) 0%,
      transparent 70%),
    radial-gradient(ellipse 40% 35% at 50% 50%,
      color-mix(in srgb, var(--site-primary-color) 8%, transparent) 0%,
      transparent 70%);
  padding: 140px 0;
  color: white;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.heroSection::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.heroSection>* {
  position: relative;
  z-index: 1;
}

.heroSection .mainSection {
  display: flex;
  justify-content: space-between;
  margin: 40px 0px;
}

.mainSection .WebsiteSection p {
  margin-bottom: 5px !important;
  font-size: 16px;
}

.mainSection .WebsiteSection h3 {
  font-size: 40px;
  font-weight: 600;
}

.heroSection .searchBar .input-group {
  width: 100%;
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--site-primary-color);
  box-shadow: 0px 0px 18px var(--site-secondary-color);
}

.heroSection .searchBar input.form-control {
  padding: 12px;
}

/* .orangeBackground .row.borderSecondary {
    border-radius: 10px;
    overflow: hidden;
} */
.orangeBackground .row.borderSecondary {
  position: relative;
  border: 1px solid #f87d33;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0px 0px 20px #f87d33;
}

.orangeBackground .row.borderSecondary::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid #f87d33;
  border-radius: 10px;
  opacity: 0.8;
  box-shadow: 0px 4px 4px #f87d33;
}

.orangeBackground .col-12 .row.borderSecondary .col-md-6.col-lg-4.borderSecondary.p-lg-3.py-3 {
  border: 0px;
}

.orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(2) {
  border-right: 1px solid #f87d33 !important;
  border-left: 1px solid #f87d33 !important;
}

.orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(4) {
  border-top: 1px solid #f87d33 !important;
  border-bottom: 1px solid #f87d33 !important;
}

.orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(5) {
  border: 1px solid #f87d33 !important;
}

.orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(6) {
  border-top: 1px solid #f87d33 !important;
  border-bottom: 1px solid #f87d33 !important;
}

.orangeBackground .col-12 .row.borderSecondary .col-lg-4.col-md-6:nth-child(8) {
  border-right: 1px solid #f87d33 !important;
  border-left: 1px solid #f87d33 !important;
}

#products .row.borderPrimary {
  position: relative;
  border: 1px solid var(--site-primary-color);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 20px var(--site-primary-color);
}

#products .row.borderPrimary::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid var(--site-primary-color);
  border-radius: 10px;
  opacity: 0.8;
  z-index: -1;
  box-shadow: 0px 4px 4px var(--site-primary-color);
}

.col-12 .row.borderPrimary .col-lg-4.col-md-6.borderPrimary.p-lg-3.py-3 {
  border: 0px;
}

.col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(2) {
  border-right: 1px solid var(--site-primary-color) !important;
  border-left: 1px solid var(--site-primary-color) !important;
}

.col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(4) {
  border-top: 1px solid var(--site-primary-color) !important;
  border-bottom: 1px solid var(--site-primary-color) !important;
}

.col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(5) {
  border: 1px solid var(--site-primary-color) !important;
}

.col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(6) {
  border-top: 1px solid var(--site-primary-color) !important;
  border-bottom: 1px solid var(--site-primary-color) !important;
}

.col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(8) {
  border-right: 1px solid var(--site-primary-color) !important;
  border-left: 1px solid var(--site-primary-color) !important;
}

.heroSection .searchBar .input-group i {
  position: absolute;
  right: 10px;
  background-color: var(--site-primary-color);
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  border-radius: 100px;
  overflow: hidden;
  font-size: 15px;
}

.ProductPage {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  margin-top: 8px;
  max-height: 320px;
  padding: 10px 6px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

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

.ProductPage::-webkit-scrollbar-track {
  background: transparent;
}

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

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

.ProductPage ul li a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.ProductPage ul li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  margin-bottom: 2px;
  border-bottom: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ProductPage ul li:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ProductPage ul li:hover a {
  color: #fff;
}

.seeHowBtn {
  background-color: #2c2b2ba8;
  color: white;
  border-radius: 100px;
  padding: 10px 15px;
  font-size: 18px;
  margin-top: 30px;
  border: 2px solid var(--site-primary-color);
  box-shadow:
    0 0 10px color-mix(in srgb, var(--site-primary-color) 70%, transparent),
    0 0 20px color-mix(in srgb, var(--site-primary-color) 50%, transparent);
  transition: 0.3s;
}

.seeHowBtn:hover {
  background-color: #2c2b2ba8;
}

.servicesSection .serviceCard {
  background: #fff;
  padding: 20px 10px;
  text-align: center;
}

.servicesSection .row.m-0 {
  position: relative;
  border: 1px solid var(--site-primary-color);
  border-radius: 10px;
  padding: 4px;
  background: #fff;
  box-shadow: 0 0 20px rgba(255, 90, 31, 0.4);
  box-shadow: 0px 0px 20px var(--site-primary-color);
}

.servicesSection .row.m-0::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid var(--site-primary-color);
  border-radius: 10px;
  opacity: 0.8;
  z-index: -1;
  box-shadow: 0px 4px 4px var(--site-primary-color);
}

.serviceIcon img {
  width: 50px;
  height: 50px;
}

.servicesSection .serviceCard h3 {
  font-size: 1.25rem;
  margin: 10px 0;
  color: #333;
}

.servicesSection .serviceCard p {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.serviceCard .serviceActions .buyNowButton {
  background-color: var(--site-primary-color);
  color: white;
  border: none;
  padding: 8px 40px;
  cursor: pointer;
  border-radius: 100px;
  font-size: 16px;
  margin-bottom: 20px;
}

.serviceCard .serviceActions .buyNowButton:hover {
  background-color: var(--site-primary-color);
}

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

.serviceCard .serviceActions .exploreLink {
  text-decoration: none;
  color: var(--site-primary-color);
  font-size: 16px;
  display: block;
}

.serviceCard .serviceActions .exploreLink:hover {
  text-decoration: underline;
}

.servicesSection .serviceCard.col-md-3:nth-child(2) {
  border-right: 1px solid var(--site-primary-color);
  border-left: 1px solid var(--site-primary-color);
}

.servicesSection .serviceCard.col-md-3:nth-child(3) {
  border-right: 1px solid var(--site-primary-color);
}

/* Responsive design */
@media (max-width: 768px) {
  .servicesSection .serviceCard.col-md-3:nth-child(2) {
    border-top: 1px solid var(--site-primary-color);
    border-bottom: 1px solid var(--site-primary-color);
    border-right: 0px;
    border-left: 0px;
  }

  .servicesSection .serviceCard.col-md-3:nth-child(3) {
    border-right: 0px;
    border-bottom: 1px solid var(--site-primary-color);
  }

  .servicesSection .row {
    margin: 0px;
  }

  .BigDotPurchaseHeader .container.header {
    z-index: 1;
    margin-right: 10px;
    margin-left: 10px;
  }

  .BigDotPurchaseHeader.bigdotSalesHeader button.navbar-toggler i {
    color: var(--site-primary-color) !important;
  }

  .BigDotPurchaseHeader button.navbar-toggler i {
    color: #fff !important;
  }

  .BigDotPurchaseHeader div#navbarNav {
    background: var(--site-primary-color);
    padding: 10px;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 70px;
  }

  .BigDotPurchaseHeader span.navbar-toggler-icon {
    display: none;
  }

  .BigDotPurchaseHeader.bigdotSalesHeader .container.header a.nav-link {
    color: #fff !important;
  }

  .BigDotPurchaseHeader.bigdotSalesHeader button.navbar-toggler {
    border: 1px solid var(--site-primary-color);
  }

  .BigDotPurchaseHeader button.navbar-toggler {
    border: 1px solid #fff;
  }

  .btnBrochure {
    margin-top: 15px;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .BigDotPurchaseHeader .container.header {
    background-color: var(--site-primary-color);
    border-radius: 0px;
    z-index: 1;
  }

  .BigDotPurchaseHeader button.navbar-toggler {
    border-color: #fff;
  }

  .BigDotPurchaseHeader span.navbar-toggler-icon {
    display: none;
  }
}

.LanguageSection button.dropdown-toggle.font16:active {
  border: 0px;
}

.planSection .product-bg-primary {
  background-color: var(--site-primary-color);
}

.product-bg-primary {
  background-color: var(--site-primary-color);
}

.product-bg-primary:hover {
  background-color: var(--site-primary-color);
}

.product-primary-border {
  border: 2px solid var(--site-primary-color) !important;
}

.product-color {
  color: var(--site-primary-color) !important;
}

.planSection .product-color {
  color: var(--site-primary-color) !important;
}

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

.planSection .bottomBorder.w-20 {
  margin: 0 auto;
}

.startButton {
  background-color: var(--site-primary-color);
  color: white;
  font-size: 16px;
  padding: 10px 35px;
  border: none;
  border-radius: 30px;
  margin: 0px 0px 40px 0px;
  transition: 0.5s;
}

.planCard p {
  text-align: left;
}

.startButton:hover {
  background-color: var(--site-primary-color);
}

label {
  color: #334155;
  font-size: clamp(13px, 0.9vw, 14px) !important;
  margin-bottom: 1px !important;
}

.BigDotPurchaseHeader a.navbar-brand {
  background-color: #fff;
  width: 120px;
  text-align: center;
  border-radius: 100px;
  padding: 10px;
  margin-left: -5px !important;
}

.BigDotPurchaseHeader.bigdotSalesHeader a.navbar-brand {
  padding: 0px !important;
  width: auto !important;
}

.featuresList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  font-size: clamp(11px, 1.1vw, 16px);
  color: #1a1a1a;
  margin-bottom: 40px !important;
  background-color: var(--site-secondary-color);
  width: 80%;
  margin: 0 auto;
  padding: 8px;
  border-radius: 100px;
}

.featuresList .iconText {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.featuresList .iconText i {
  color: var(--site-primary-color);
  font-size: 18px;
}

.BuildYourPlanBtn button {
  border: 1px solid var(--site-primary-color);
  padding: 10px 35px;
  font-size: 16px;
  border-radius: 100px;
  color: var(--site-primary-color);
  background-color: #fff;
  margin-top: 30px;
  margin-bottom: 30px;
  transition: 0.5s;
}

.BuildYourPlanBtn button:hover {
  background-color: var(--site-primary-color);
  color: #fff;
}

.planSection {
  padding: 50px 0;
  background-color: var(--site-secondary-color);
  text-align: center;
}

.planCard {
  position: relative;
  background: #fff;
  color: #1a1a2e;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
  height: 100%;
  overflow: hidden;
}

.planCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--site-primary-color);
  border-radius: 16px 16px 0 0;
}

.planCard:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.planBadge {
  display: inline-block;
  background: color-mix(in srgb, var(--site-primary-color) 12%, transparent);
  color: var(--site-primary-color);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: 0.3px;
}

.planTitle {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  text-align: left;
}

.planFeatures {
  margin: 4px 0 0;
  padding: 0;
}

.planFeatureItem {
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
}

.planFeatureIcon {
  color: var(--site-primary-color);
  font-size: 14px;
}

.planPrice {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  text-align: left;
}

.planCurrency {
  font-size: 16px;
  font-weight: 500;
  color: #64748b;
}

.planCartBtn {
  background: var(--site-primary-color);
  border: none;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.planCartBtn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.exploreBanner {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
  border-radius: 10px;
  padding: 15px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  flex-wrap: wrap;
}

.exploreText {
  font-size: 16px;
  font-weight: 500;
}

.btnBrochure {
  background: #fff;
  color: var(--site-primary-color);
  font-size: 14px;
  font-weight: 500;
  border-radius: 30px;
  padding: 6px 18px;
  border: none;
  transition: all 0.3s ease-in-out;
}

.btnBrochure:hover {
  background: #f1f1f1;
  color: var(--site-primary-color);
}

.vertical-bg-primary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.vertical-primary-border2 {
  border: 1px solid var(--site-primary-color);
}

.vertical-color {
  color: var(--site-primary-color);
}

.vertical-primary-border {
  border: 1px solid var(--site-primary-color);
}

.vertical-primary-border:hover {
  border: 1px solid var(--site-primary-color);
}

.vertical-bg-primary:hover {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalPages .serviceCard .serviceActions .buyNowButton {
  background-color: var(--site-primary-color);
  padding: 8px 50px;
  border-radius: 100px;
}

.verticalPages.servicesSection .row {
  border: 1px solid var(--site-primary-color);
}

.verticalPages .serviceCard .serviceActions .exploreLink {
  color: var(--site-primary-color);
}

.verticalPages.servicesSection .serviceCard {
  border-right: 1px solid var(--site-primary-color);
}

.verticalPages.servicesSection .serviceCard:last-child {
  border-right: 0px;
}

.servicesSection.verticalPages.py-4 .website-bg-primary {
  background: var(--site-primary-color) !important;
  color: white !important;
}

.verticalProduct .serviceCard .serviceActions .buyNowButton {
  padding: 10px 50px;
  border-radius: 100px;
}

.verticalProduct.servicesSection .serviceCard {
  border-right: 1px solid var(--site-primary-color);
}

.verticalProduct.servicesSection .serviceCard:last-child {
  border-right: 0px;
}

.verticalPageOne.exploreBanner {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageOne .btnBrochure {
  color: var(--site-primary-color);
}

@media (max-width: 767px) {
  .verticalPages.servicesSection .serviceCard {
    border-bottom: 1px solid var(--site-primary-color);
  }

  .LanguageSection p#headerCartwrapper i {
    color: #fff !important;
  }

  #cartCountIcon {
    right: -15px !important;
    top: -10px;
    background: #fff !important;
    color: var(--site-primary-color) !important;
  }

  .productGallery .col-md-4.mt-4.mt-lg-4.d-flex {
    margin-top: 0px !important;
    margin-bottom: 15px;
  }

  .col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(2) {
    border-right: 0px !important;
    border-left: 0px !important;
    border-top: 1px solid var(--site-primary-color) !important;
    border-bottom: 1px solid var(--site-primary-color) !important;
  }

  .col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(8) {
    border-right: 0px !important;
    border-left: 0px !important;
    border-top: 1px solid var(--site-primary-color) !important;
    border-bottom: 1px solid var(--site-primary-color) !important;
  }

  .col-12 .row.borderPrimary .col-lg-4.col-md-6:nth-child(5) {
    border: 0px !important;
  }

  .BigDotPurchaseHeader nav.navbar {
    padding: 0px;
  }

  .seeHowBtn {
    margin-top: 0px;
  }

  .verticalPages.servicesSection .serviceCard:last-child {
    border-bottom: 0px;
  }

  .verticalProduct.servicesSection .serviceCard {
    border-bottom: 1px solid var(--site-primary-color);
  }

  .verticalProduct.servicesSection .serviceCard:last-child {
    border-bottom: 0px;
  }

  .productGallery .card.border-0.w-100 {
    height: 200px;
  }

  .verticalProduct .serviceCard .serviceActions .buyNowButton {
    padding: 8px 40px !important;
  }

  .getEssentialBtn {
    margin-top: 15px;
  }
}

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

.marketingText {
  font-size: 18px;
  font-weight: bold;
  color: var(--site-primary-color);
  /* purple */
  display: flex;
  align-items: center;
  gap: 10px;
}

.marketingText .dot {
  height: 8px;
  width: 8px;
  background-color: var(--site-secondary-color);
  /* orange-red */
  border-radius: 50%;
  display: inline-block;
}

.getEssentialBtn {
  text-align: center;
  width: 100%;
  background-color: var(--site-primary-color);
  border-radius: 100px;
  color: #fff;
  padding: 10px;
}

.getEssentialBtn:hover {
  background-color: var(--site-primary-color);
  color: #fff;
}

.bigdotYourCard {
  padding: 10px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
}

.btnCardSubmit a.d-block {
  width: 100%;
  background: var(--site-primary-color);
  padding: 12px;
  font-weight: 600;
  color: #fff !important;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

.getOffer {
  padding: 15px 10px;
  align-items: center;
  border-radius: 8px;
}

.getOffer i {
  font-size: 30px;
  margin-right: 15px;
}

.extraOptions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}

.optBtn {
  background-color: #ffffff;
  border: 1px solid #ddd;
  padding: 15px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;

  /* Box ki size fix rakhte hain taaki hover pe hile nahi */
  width: 120px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Icon hamesha center mein rahega */
.optBtn i {
  color: var(--site-primary-color);
  font-size: 30px;
  transition: transform 0.3s ease;
}

/* Text ko by default chhupa denge */
.optBtn span {
  display: block;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  margin-top: 0;
}

.optBtn:hover span {
  opacity: 1;
  max-height: 50px;
  margin-top: 8px;
}

.planCardBox {
  background: #f8fafc;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  max-width: 100%;
}

.planTenureLabel {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.planTenureSelect {
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 36px 8px 12px;
  font-size: 14px;
  color: #1a1a2e;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}

.planTenureSelect:focus {
  border-color: var(--site-primary-color);
}

.optBtn:hover i {
  transform: translateY(-5px);
}

.optBtn:hover {
  background-color: #f9f9f9;
  border-color: var(--site-primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.getOffer.promoCard {
  background: #fff;
  padding: 15px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  border: 1px solid #e2e8f0;
}

/* Hover Effect */
.getOffer.promoCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--site-primary-color);
  border-color: #fff;
}

.promoIcon {
  background: rgba(255, 255, 255, 0.2);
  width: 50px;
  height: 50px;
  display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  border-radius: 10px;
  margin-bottom: 10px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.promoIcon i {
  font-size: 28px !important;
  margin-right: 0 !important;
}

.promoCode {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.promoDesc {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selectedPlan .planCard {
  padding-bottom: 30px;
}

.changePlanButton {
  width: 100%;
  padding: 10px;
  border: 0px;
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
}

.selectedPlan .planCard {
  padding-bottom: 40px;
}

/* .exploreBanner.secondaryBg3 {
    background: var(--site-primary-color);
    border: 2px solid var(--site-secondary-color);
}

.exploreBanner.secondaryBg3 .btnBrochure {
    color: var(--site-secondary-color);
} */

/* Product page 3 theme css start here */

section#plans .productThreeColor {
  color: var(--site-primary-color);
}

section#plans .productThreeBgPrimary {
  background-color: var(--site-primary-color);
  border-radius: 10px 0px 0px 10px;
}

.productThreeColor {
  color: var(--site-primary-color);
}

.productThreeBgPrimary {
  background-color: var(--site-primary-color);
  border-radius: 10px 0px 0px 10px;
}

.productThreePrimaryBorder:nth-child(3) {
  border-radius: 0px 10px 0px 0px;
}

.productThreePrimaryBorder:nth-child(6) {
  border-radius: 0px 0px 10px 0px;
}

.row.productThreePrimaryBorder {
  border-radius: 0px 10px 10px 0px;
}

.productThreeBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.border3BottomSolid {
  border-bottom: 2px solid var(--site-primary-color);
  text-decoration: none;
}

.productThreePrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.productThreePrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.productPageThree {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.exploreBanner.productPageThree .btnBrochure {
  color: var(--site-primary-color);
}

/* Product page 3 theme css end here */

/* Product page 4 theme css start here */

.planSection .productFourColor {
  color: var(--site-primary-color);
}

.planSection .productFourBgPrimary {
  background-color: var(--site-primary-color);
  border-radius: 10px 0px 0px 10px;
}

.productFourColor {
  color: var(--site-primary-color);
}

.productFourBgPrimary {
  background-color: var(--site-primary-color);
  border-radius: 10px 0px 0px 10px;
}

.productFourPrimaryBorder:nth-child(3) {
  border-radius: 0px 10px 0px 0px;
}

.productFourPrimaryBorder:nth-child(6) {
  border-radius: 0px 0px 10px 0px;
}

.row.productFourPrimaryBorder {
  border-radius: 0px 10px 10px 0px;
}

.productFourBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.border4BottomSolid {
  border-bottom: 2px solid var(--site-primary-color);
  text-decoration: none;
}

.productFourPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.productFourPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.productPageFour {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.exploreBanner.productPageFour .btnBrochure {
  color: var(--site-primary-color);
}

/* Product page 4 theme css end here */

/* Product page 5 theme css start  here */

.planSection .productFiveColor {
  color: var(--site-primary-color);
}

.planSection .productFiveBgPrimary {
  background-color: var(--site-primary-color);
  border-radius: 10px 0px 0px 10px;
}

.productFiveColor {
  color: var(--site-primary-color);
}

.productFiveBgPrimary {
  background-color: var(--site-primary-color);
  border-radius: 10px 0px 0px 10px;
}

.productFivePrimaryBorder:nth-child(3) {
  border-radius: 0px 10px 0px 0px;
}

.productFivePrimaryBorder:nth-child(6) {
  border-radius: 0px 0px 10px 0px;
}

.row.productFivePrimaryBorder {
  border-radius: 0px 10px 10px 0px;
}

.productFiveBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.border5BottomSolid {
  border-bottom: 2px solid var(--site-primary-color);
  text-decoration: none;
}

.productFivePrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.productFivePrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.productPageFive {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.exploreBanner.productPageFive .btnBrochure {
  color: var(--site-primary-color);
}

/* Product page 5 theme css end here */

/* Product page 6 theme css start  here */

.planSection .productSixColor {
  color: var(--site-primary-color);
}

.planSection .productSixBgPrimary {
  background-color: var(--site-primary-color);
  border-radius: 10px 0px 0px 10px;
}

.productSixColor {
  color: var(--site-primary-color);
}

.productSixBgPrimary {
  background-color: var(--site-primary-color);
  border-radius: 10px 0px 0px 10px;
}

.productSixPrimaryBorder:nth-child(3) {
  border-radius: 0px 10px 0px 0px;
}

.productSixPrimaryBorder:nth-child(6) {
  border-radius: 0px 0px 10px 0px;
}

.row.productSixPrimaryBorder {
  border-radius: 0px 10px 10px 0px;
}

.productSixBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.border6BottomSolid {
  border-bottom: 2px solid var(--site-primary-color);
  text-decoration: none;
}

.productSixPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.productSixPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.productPageSix {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.exploreBanner.productPageSix .btnBrochure {
  color: var(--site-primary-color);
}

/* Product page 6 theme css end here */

/* Product page 7 theme css start  here */
.planSection .productSevenColor {
  color: var(--site-primary-color);
}

.planSection .productSevenBgPrimary {
  background-color: var(--site-primary-color);
  border-radius: 10px 0px 0px 10px;
}

.productSevenColor {
  color: var(--site-primary-color);
}

.productSevenBgPrimary {
  background-color: var(--site-primary-color);
  border-radius: 10px 0px 0px 10px;
}

.productSevenPrimaryBorder:nth-child(3) {
  border-radius: 0px 10px 0px 0px;
}

.productSevenPrimaryBorder:nth-child(6) {
  border-radius: 0px 0px 10px 0px;
}

.row.productSevenPrimaryBorder {
  border-radius: 0px 10px 10px 0px;
}

.productSevenBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.border7BottomSolid {
  border-bottom: 2px solid var(--site-primary-color);
  text-decoration: none;
}

.productSevenPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.productSevenPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.productPageSeven {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.exploreBanner.productPageSeven .btnBrochure {
  color: var(--site-primary-color);
}

/* Product page 7 theme css end here */

/* Product page 8 theme css start  here */

.productEightColor {
  color: var(--site-primary-color);
}

.productEightBgPrimary {
  background-color: var(--site-primary-color);
  border-radius: 10px 0px 0px 10px;
}

.productEightPrimaryBorder:nth-child(3) {
  border-radius: 0px 10px 0px 0px;
}

.productEightPrimaryBorder:nth-child(6) {
  border-radius: 0px 0px 10px 0px;
}

.row.productEightPrimaryBorder {
  border-radius: 0px 10px 10px 0px;
}

.productEightBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.border8BottomSolid {
  border-bottom: 2px solid var(--site-primary-color);
  text-decoration: none;
}

.productEightPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.productEightPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.productPageEight {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.exploreBanner.productPageEight .btnBrochure {
  color: var(--site-primary-color);
}

/* Product page 8 theme css end here */

/* Product page 9 theme css start  here */
.planSection .productNineColor {
  color: var(--site-primary-color);
}

.planSection .productNineBgPrimary {
  background-color: var(--site-primary-color);
  border-radius: 10px 0px 0px 10px;
}

.productNineColor {
  color: var(--site-primary-color);
}

.productNineBgPrimary {
  background-color: var(--site-primary-color);
  border-radius: 10px 0px 0px 10px;
}

.productNineBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.productNinePrimaryBorder:nth-child(3) {
  border-radius: 0px 10px 0px 0px;
}

.productNinePrimaryBorder:nth-child(6) {
  border-radius: 0px 0px 10px 0px;
}

.row.productNinePrimaryBorder {
  border-radius: 0px 10px 10px 0px;
}

.border9BottomSolid {
  border-bottom: 2px solid var(--site-primary-color);
  text-decoration: none;
}

.productNinePrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.productNinePrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.productPageNine {
  background: linear-gradient(90deg,
      var(--site-tertiary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.exploreBanner.productPageNine .btnBrochure {
  color: var(--site-primary-color);
}

/* Product page 9 theme css end here */

/* vertical page 1 theme css start here */

.marketingText.verticalDotOne {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotOne .dot {
  background-color: #000;
}

.sellAnywhereBeauty.featuredVerticalPgae {
  background-color: var(--site-secondary-color);
}

/* vertical page 1 theme css end here */

/* vertical page 2 theme css start here */

.marketingText.verticalDotTwo {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotTwo .dot {
  background-color: #000;
}

.verticalTwoColor {
  color: var(--site-primary-color);
}

.verticalTwoBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalTwoBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalTwoPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalTwoPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageTwo {
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageTwo .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 3 theme css end here */

.marketingText.verticalDotThree {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotThree .dot {
  background-color: #000;
}

.verticalThreeColor {
  color: var(--site-primary-color);
}

.verticalThreeBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalThreeBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalThreePrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalThreePrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPagethree {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPagethree .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 3 theme css end here */

/* vertical page 4 theme css end here */

.marketingText.verticalDotFour {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotFour .dot {
  background-color: #000;
}

.verticalFourColor {
  color: var(--site-primary-color);
}

.verticalFourBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalFourBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalFourPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalFourPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageFour {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageFour .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 4 theme css end here */

/* vertical page 5 theme css end here */

.marketingText.verticalPageFive {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalPageFive .dot {
  background-color: #000;
}

.verticalFiveColor {
  color: var(--site-primary-color);
}

.verticalFiveBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalFiveBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalFivePrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalFivePrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageFive {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageFive .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 5 theme css end here */

/* vertical page 6 theme css end here */

.marketingText.verticalDotSix {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotSix .dot {
  background-color: #000;
}

.verticalSixColor {
  color: var(--site-primary-color);
}

.verticalSixBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalSixBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalSixPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalSixPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageSix {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageSix .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 6 theme css end here */

/* vertical page 7 theme css end here */

.marketingText.verticalDotSeven {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotSeven .dot {
  background-color: #000;
}

.verticalSevenColor {
  color: var(--site-primary-color);
}

.verticalSevenBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalSevenBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalSevenPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalSevenPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageSeven {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageSeven .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 7 theme css end here */

/* vertical page 8 theme css end here */

.marketingText.verticalDotEight {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotEight .dot {
  background-color: #000;
}

.verticalEightColor {
  color: var(--site-primary-color);
}

.verticalEightBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalEightBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalEightPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalEightPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageEight {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageEight .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 8 theme css end here */

/* vertical page 9 theme css end here */

.marketingText.verticalDotNine {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotNine .dot {
  background-color: #000;
}

.verticalNineColor {
  color: var(--site-primary-color);
}

.verticalNineBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalNineBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalNinePrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalNinePrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageNine {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageNine .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 9 theme css end here */

/* vertical page 10 theme css end here */

.marketingText.verticalDotTen {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotTen .dot {
  background-color: #000;
}

.verticalTenColor {
  color: var(--site-primary-color);
}

.verticalTenBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalTenBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalTenPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalTenPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageTen {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageTen .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 10 theme css end here */

/* vertical page 11 theme css end here */

.marketingText.verticalDotEleven {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotEleven .dot {
  background-color: #000;
}

.verticalElevenColor {
  color: var(--site-primary-color);
}

.verticalElevenBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalElevenBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalElevenPrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalElevenPrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageEleven {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageEleven .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 11 theme css end here */

/* vertical page 12 theme css end here */

.marketingText.verticalDotTwelve {
  margin: 10px 0px;
  color: var(--site-primary-color);
}

.marketingText.verticalDotTwelve .dot {
  background-color: #000;
}

.verticalTwelveColor {
  color: var(--site-primary-color);
}

.verticalTwelveBgPrimary {
  background-color: var(--site-primary-color);
  color: #fff;
}

.verticalTwelveBgPrimary:hover {
  background-color: var(--site-primary-color);
}

.verticalTwelvePrimaryBorder {
  border: 1px solid var(--site-primary-color);
}

.verticalTwelvePrimaryBorder:hover {
  border: 1px solid var(--site-primary-color);
}

.exploreBanner.verticalPageTwelve {
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-secondary-color));
  border: 2px solid var(--site-primary-color);
}

.verticalPageTwelve .btnBrochure {
  color: var(--site-primary-color);
}

/* vertical page 12 theme css end here */

.flip {
  animation: flip 1.5s ease-in-out;
}

@keyframes flip {
  0% {
    transform: rotateX(90deg);
    opacity: 0;
  }

  50% {
    transform: rotateX(0deg);
    opacity: 1;
  }

  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

.purchaseModalVideo {
  position: relative;
}

.purchaseModalVideo button.closeBtn {
  position: absolute;
  z-index: 1;
  border: 0px;
  right: -35px;
  font-size: 30px;
  background-color: transparent;
  color: #fff;
  top: -7px;
}

::-webkit-scrollbar {
  width: 6px;
  height: 8px;
}

.accordionItem .accordion-body a {
  color: var(--site-primary-color);
}

::-webkit-scrollbar-thumb {
  background: var(--site-primary-color) !important;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.BigDotPurchaseHeader .dropdown-menu.show {
  left: auto;
}

.trustedSection {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

.trustedSection .avatarGroup {
  display: flex;
  align-items: center;
}

.trustedSection .avatarGroup img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ffff;
  margin-left: -10px;
}

.trustedSection .avatarGroup img:first-child {
  margin-left: 0;
}

.trustedSection .trustedText {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* header color the css start here */

.BigDotPurchaseHeader.dbcHeader {
  position: relative;
}

.BigDotPurchaseHeader.dbcHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.websiteHeader {
  position: relative;
}

.BigDotPurchaseHeader.websiteHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.ecommerceHeader {
  position: relative;
}

.BigDotPurchaseHeader.ecommerceHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.bookingHeader {
  position: relative;
}

.BigDotPurchaseHeader.bookingHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.invoicingHeader {
  position: relative;
}

.BigDotPurchaseHeader.invoicingHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.engagerHeader {
  position: relative;
}

.BigDotPurchaseHeader.engagerHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.flipbookHeader {
  position: relative;
}

.BigDotPurchaseHeader.flipbookHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.onelinkHeader {
  position: relative;
}

.BigDotPurchaseHeader.onelinkHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.accountingHeader {
  position: relative;
}

.BigDotPurchaseHeader.accountingHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.EpaymentsHeader {
  position: relative;
}

.BigDotPurchaseHeader.EpaymentsHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.marketplaceHeader {
  position: relative;
}

.BigDotPurchaseHeader.marketplaceHeader .header {
  background-color: var(--site-primary-color);
}

/* header color the css start here */

@media screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (min-resolution: 144dpi) {
  .container.header a.nav-link {
    color: #fff;
    font-size: 14px;
  }

  .plansSection .featuresList {
    width: 90%;
  }

  .BigDotPurchaseHeader .header a.navbar-brand img {
    width: 60px;
  }

  .LanguageSection span#headerLanguage {
    font-size: 14px;
    padding: 2px 4px;
    border: 1px solid #fff;
    opacity: 1;
    box-shadow: none;
  }

  .BigDotPurchaseHeader div#navbarNav p.text-white.mb-0.cursorPointer {
    border: 1px solid #fff;
    padding: 2px 12px;
    border-radius: 1000px;
    color: #fff !important;
  }

  button.btn.text-white.dropdown-toggle {
    font-size: 14px;
  }

  .container.header {
    padding: 8px 20px;
    border-radius: 100px;
  }

  .heroSection {
    padding: 100px 0;
  }

  .mainSection .WebsiteSection h3 {
    font-size: 30px;
    font-weight: 600;
  }

  .heroSection .searchBar .input-group i {
    right: 6px;
    padding: 8px;
    font-size: 12px;
  }

  .seeHowBtn {
    padding: 8px 15px;
    font-size: 14px;
    margin-top: 0px;
  }

  .trustedSection .avatarGroup img {
    width: 25px;
    height: 25px;
  }

  .heroSection .searchBar input.form-control {
    padding: 8px;
    font-size: 14px;
  }

  .trustedSection {
    margin-top: 35px;
  }

  .trustedSection .trustedText {
    font-size: 14px;
  }

  .ProductPage ul li {
    padding: 7px 10px;
  }

  .ProductPage ul li a {
    font-size: 13px;
  }

  .font16 {
    font-size: 14px;
    line-height: 20px;
  }

  .font20 {
    font-size: 16px;
    line-height: 22px;
  }

  /* .servicesSection .serviceCard h3 {
    font-size: 16px;
  } */

  .servicesSection .serviceCard p {
    font-size: 14px;
  }

  .serviceCard .serviceActions .buyNowButton {
    padding: 5px 40px;
    font-size: 15px;
  }
}

.sellAnywhereBeauty.accountingFeatured {
  background-color: var(--site-secondary-color);
}

.sellAnywhereBeauty.bookingFeatured {
  background-color: var(--site-secondary-color);
}

.sellAnywhereBeauty.my-4.digitalBusinessCardFeatured {
  background-color: var(--site-secondary-color);
}

.sellAnywhereBeauty.my-4.ecommerceFeatured {
  background-color: var(--site-secondary-color);
}

.sellAnywhereBeauty.my-4.einvoicingFeatured {
  background-color: var(--site-secondary-color);
}

.sellAnywhereBeauty.my-4.engagerFeatured {
  background-color: var(--site-secondary-color);
}

.sellAnywhereBeauty.my-4.marketplacePromotionFeatured {
  background-color: var(--site-secondary-color);
}

.sellAnywhereBeauty.my-4.websiteFeatured {
  background-color: var(--site-secondary-color);
}

.LanguageBox {
  font-size: 15px;
  padding: 5px;
  width: 100%;
  margin-left: 10px;
  border: 2px solid var(--site-primary-color);
  border-radius: 5px;
  cursor: pointer;
  margin: 0px 0px 10px;
}

.planLanguage {
  display: inline-block;
  margin-bottom: 50px;
}

.verticalPages.servicesSection .row.m-0::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid var(--site-primary-color);
  border-radius: 10px;
  opacity: 0.8;
  z-index: -1;
  box-shadow: 0px 4px 4px var(--site-primary-color);
}

.verticalPages.servicesSection .row.m-0 {
  position: relative;
  border: 1px solid var(--site-primary-color);
  border-radius: 10px;
  padding: 4px;
  background: #fff;
  box-shadow: 0 0 20px var(--site-primary-color);
}

.verticalPages.servicesSection .serviceCard.col-md-3:nth-child(2) {
  border-right: 1px solid var(--site-primary-color);
  border-left: 1px solid var(--site-primary-color);
}

.verticalPages.servicesSection .serviceCard.col-md-3:nth-child(3) {
  border-right: 1px solid var(--site-primary-color);
}

.BigDotPurchaseHeader.automobilesHeader {
  position: relative;
}

.BigDotPurchaseHeader.automobilesHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.bakeryHeader {
  position: relative;
}

.BigDotPurchaseHeader.bakeryHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.beautyspaHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.beautyspaHeader {
  position: relative;
}

.BigDotPurchaseHeader.doctorsHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.doctorsHeader {
  position: relative;
}

.BigDotPurchaseHeader.giftflowersHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.giftflowersHeader {
  position: relative;
}

.BigDotPurchaseHeader.hotelsHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.hotelsHeader {
  position: relative;
}

.BigDotPurchaseHeader.localservicesHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.localservicesHeader {
  position: relative;
}

.BigDotPurchaseHeader.realestateHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.realestateHeader {
  position: relative;
}

.BigDotPurchaseHeader.restaurantsHeader .header {
  background: var(--site-primary-color);
}

.BigDotPurchaseHeader.restaurantsHeader {
  position: relative;
}

.BigDotPurchaseHeader.schoolsHeader .header {
  background: linear-gradient(135deg,
      var(--school-primary-green) 0%,
      #43a047 100%);
  box-shadow: 0 15px 35px rgba(46, 125, 50, 0.25);
  z-index: 123;
}

.BigDotPurchaseHeader.schoolsHeader {
  position: relative;
}

.tourtravelsHeader .header {
  background: var(--site-primary-color);
}

.BigDotPurchaseHeader.tourtravelsHeader {
  position: relative;
}

.BigDotPurchaseHeader.tutorsHeader .header {
  background-color: var(--site-primary-color);
}

.BigDotPurchaseHeader.tutorsHeader {
  position: relative;
}

.checkBelowBtn {
  background-color: #ffd9cd;
  font-size: 16px;
  margin-left: 10px;
  padding: 5px 10px;
  border-radius: 10px;
  color: var(--site-primary-color);
}

img.arrowBottom {
  margin-left: 5px;
  padding-top: 40px;
  width: 50px;
}

p#headerCartwrapper {
  position: relative;
  margin: 0px 15px 0px;
}

#cartCountIcon {
  right: -15px;
  top: -10px;
  background: var(--site-primary-color);
  color: #fff;
}

.mat-mdc-text-field-wrapper {
  height: 45px;
  border-radius: 10px;
}

/* =========================================
   School Landing Page CSS Starts Here
   ========================================= */

/* Scoped Variables */
:root {
  --school-primary-secondary: #e6f4e7;
  --school-primary-green: var(--site-primary-color);
  --school-bg-light: #f8f9fa;
  --school-text-dark: #212529;
  --school-text-muted: #6c757d;
  --school-font-main: "Montserrat", sans-serif;
}

.schoolLandingBody {
  font-family: var(--school-font-main);
  background-color: #fff;
  color: var(--school-text-dark);
}

/* Navbar Scopes */
.schoolNavbar {
  background-color: transparent;
  /* Assuming clean header like PDF */
  transition: all 0.3s ease;
}

.schoolBrandSubtitle {
  color: #ffffff;
  font-weight: 500;
}

.schoolLogoIcon {
  color: var(--school-primary-green);
  font-size: 1.5rem;
}

.schoolNavLink {
  font-size: 15px;
  padding: 0.5rem 1rem !important;
}

.schoolNavLink:hover {
  color: var(--school-primary-green) !important;
}

/* Buttons */
.schoolBtnOrange {
  background-color: var(--school-primary-green);
  border: 2px solid var(--school-primary-green);
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.schoolBtnOrange:hover {
  background-color: var(--school-primary-green);
  border-color: var(--school-primary-green);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(102 187 106);
}

.schoolBtnWhatsApp {
  background-color: var(--school-primary-green);
  border: 2px solid var(--school-primary-green);
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.schoolBtnWhatsApp:hover {
  background-color: #236526;
  border-color: #236526;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

/* Hero Section */
.schoolHeroSection {
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

.schoolHeroTitle {
  font-weight: 800;
  color: #2c2c2c;
  line-height: 1.2;
}

.schoolHeroSubtext {
  font-size: 1.15rem;
  line-height: 1.6;
}

.schoolHeroBtn {
  font-size: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.schoolHeroImageWrapper {
  perspective: 1000px;
}

.schoolHeroImgElement {
  transition: transform 0.5s ease;
}

.schoolHeroImgElement:hover {
  transform: rotateY(-2deg) rotateX(2deg);
}

/* Section Title */
.schoolSectionTitle {
  position: relative;
  padding-bottom: 15px;
  font-weight: 800;
  color: #2c2c2c;
}

.schoolSectionTitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--school-primary-secondary);
  border-radius: 2px;
}

/* Features Cards */
.schoolFeaturesSection {
  background-color: #f8f9fa;
  /* Light grey bg */
}

.schoolFeatureCard {
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.schoolFeatureCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.schoolFeatureIconBox {
  min-width: 60px;
  height: 60px;
  background-color: rgba(46, 125, 50, 0.1);
  /* Light green tint */
  color: var(--school-primary-green);
}

.headerBigDotLogo {
  width: 110px;
}

/* Tools & Support */
.schoolToolsSection {
  background-color: #fff;
}

.schoolToolCard {
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.schoolToolCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.schoolToolIconWrapper {
  width: 80px;
  height: 80px;
  background-color: var(--school-primary-secondary);
  color: var(--school-primary-green);
}

.schoolSupportBanner {
  background: linear-gradient(135deg,
      var(--school-primary-green) 0%,
      var(--school-primary-secondary) 100%);
  box-shadow: 0 15px 35px rgba(46, 125, 50, 0.25);
}

.schoolSupportVisual img {
  max-height: 250px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

/* Footer Banner */
.schoolFooterSection {
  background-color: #fff;
  padding-bottom: 4rem !important;
}

.schoolFooterCard {
  background-color: var(--school-primary-secondary);
  /* Very light grey/blue tint */
}

.schoolFooterTitle {
  color: #2c2c2c;
  font-weight: 800;
}

.schoolFooterDisclaimer {
  color: #6c757d;
  font-size: 0.9rem;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .schoolHeroTitle {
    font-size: 2rem;
  }

  .schoolSupportBanner {
    text-align: center;
  }

  .schoolHeroImageWrapper {
    margin-top: 3rem;
  }
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes floatMascot {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(2deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes pulseButton {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(102 187 106);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(239, 127, 26, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 127, 26, 0);
  }
}

.schoolSupportContent p.text-white-50 {
  color: #fff !important;
}

.schoolFadeInUp {
  animation: fadeInUp 0.8s ease-out both;
}

.schoolDelay100 {
  animation-delay: 0.1s;
}

.schoolDelay200 {
  animation-delay: 0.2s;
}

.schoolDelay300 {
  animation-delay: 0.3s;
}

.schoolMascotFloat {
  animation: floatMascot 4s ease-in-out infinite;
}

.schoolPulseBtn {
  animation: pulseButton 2s infinite;
}

.schoolHeroImgElement {
  /* Existing transition */
  transition: transform 0.5s ease;
  animation: fadeInUp 1s ease-out 0.3s both;
}

/* Update Hero Background */
.schoolHeroSection {
  background:
    linear-gradient(to right,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.85) 50%,
      rgba(255, 255, 255, 0.6) 100%),
    url("https://dkzxkcjlbnjui.cloudfront.net/uploads/bigdotpurchase/image/school_hero_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 6rem;
  padding-bottom: 6rem;
  margin-top: -96px;
}

/* School Demo Modal Styles removed */
.navbar-toggler:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* =========================================
   beauty spa landing page css starts here
   ========================================= */

/* Scoped Variables for Beauty Spa */
:root {
  --beautySpa-primary: #d39340;
  --beautySpa-accent: #ffeed6;
  --beautySpa-bg-warm: #ffeed6;
  --beautySpa-text-dark: #3a2a2a;
  --beautySpa-text-muted: #7a6a6a;
  --beautySpa-font-main: "Montserrat", sans-serif;
}

/* Body */
.beautySpaLandingBody {
  font-family: var(--beautySpa-font-main);
  background-color: #fff;
  color: var(--beautySpa-text-dark);
}

/* Navbar / Header */
.beautySpaSiteHeader .header {
  background: linear-gradient(135deg,
      var(--beautySpa-primary) 0%,
      var(--beautySpa-bg-warm) 200%);
}

.beautySpaSiteHeader {
  z-index: 100;
  position: relative;
}

.beautySpaBrandSubtitle {
  color: #ffffff;
  font-weight: 500;
}

.beautySpaNavLink {
  font-size: 15px;
  padding: 0.5rem 1rem !important;
}

.beautySpaNavLink:hover {
  color: var(----beautySpa-text-dark) !important;
}

/* Primary Button (Orchid) */
.beautySpaBtnPrimary {
  background-color: var(--beautySpa-primary);
  border: 2px solid var(--beautySpa-primary);
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.beautySpaBtnPrimary:hover {
  background-color: #a85d9a;
  border-color: #a85d9a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(199, 125, 186, 0.35);
}

/* WhatsApp Button (Green) */
.beautySpaBtnWhatsApp {
  background-color: var(--beautySpa-primary);
  border: 2px solid var(--beautySpa-primary);
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.beautySpaBtnWhatsApp:hover {
  background-color: #236526;
  border-color: #236526;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

/* Hero Section */
.beautySpaHeroSection {
  background: var(--beautySpa-bg-warm);
  background:
    linear-gradient(to right,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 254, 0.55) 0%,
      rgba(255, 255, 255, 0.6) 100%),
    url("https://dkzxkcjlbnjui.cloudfront.net/uploads/bigdotpurchase/image/landing-beauty-spa-bgimage.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 6rem;
  padding-bottom: 6rem;
  margin-top: -96px;
  position: relative;
  overflow: hidden;
}

.beautySpaHeroTitle {
  font-weight: 800;
  color: var(--beautySpa-text-dark);
  line-height: 1.3;
  font-size: 50px;
}

.beautySpaHeroSubtext {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--beautySpa-text-muted);
}

.beautySpaHeroBtn {
  font-size: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.beautySpaHeroImageWrapper {
  perspective: 1000px;
}

.beautySpaHeroImgElement {
  transition: transform 0.5s ease;
  animation: beautySpaFadeInUpKf 1s ease-out 0.3s both;
}

.beautySpaHeroImgElement:hover {
  transform: rotateY(-2deg) rotateX(2deg);
}

/* Section Title */
.beautySpaSectionTitle {
  position: relative;
  padding-bottom: 15px;
  font-weight: 800;
  color: var(--beautySpa-text-dark);
}

.beautySpaSectionTitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg,
      var(--beautySpa-primary),
      var(--beautySpa-accent));
  border-radius: 2px;
}

.beautySpaSupportContent .text-white-50 {
  color: #fff !important;
}

/* Features Section */
.beautySpaFeaturesSection {
  background-color: var(--beautySpa-bg-warm);
}

.beautySpaFeatureCard {
  transition: all 0.3s ease;
  border: 1px solid rgba(199, 125, 186, 0.08) !important;
}

.beautySpaFeatureCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(199, 125, 186, 0.12) !important;
}

.beautySpaFeatureIconBox {
  min-width: 60px;
  height: 60px;
  background-color: var(--beautySpa-accent);
  color: var(--beautySpa-primary);
}

/* Tools & Support Section */
.beautySpaToolsSection {
  background-color: #fff;
}

.beautySpaToolCard {
  transition: all 0.3s ease;
  border: 1px solid rgba(199, 125, 186, 0.06) !important;
}

.beautySpaToolCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(199, 125, 186, 0.12) !important;
}

.beautySpaToolIconWrapper {
  width: 80px;
  height: 80px;
  background-color: var(--beautySpa-accent);
  color: var(--beautySpa-primary);
}

/* Support Banner */
.beautySpaSupportBanner {
  background: linear-gradient(135deg,
      var(--beautySpa-primary) 0%,
      var(--beautySpa-accent) 100%);
  box-shadow: 0 15px 35px rgba(199, 125, 186, 0.25);
}

.beautySpaSupportVisual img {
  max-height: 250px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

/* Footer Banner */
.beautySpaFooterSection {
  background-color: #fff;
  padding-bottom: 4rem !important;
}

.beautySpaFooterCard {
  background-color: var(--beautySpa-bg-warm);
  border: 1px solid rgba(199, 125, 186, 0.1);
}

.beautySpaFooterTitle {
  color: var(--beautySpa-text-dark);
  font-weight: 800;
}

.beautySpaFooterDisclaimer {
  color: var(--beautySpa-text-muted);
  font-size: 0.9rem;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
  .beautySpaHeroTitle {
    font-size: 2rem;
  }

  .schoolFooterCard {
    padding: 20px 10px !important;
  }

  .beautySpaSupportBanner {
    text-align: center;
  }

  .beautySpaHeroImageWrapper {
    margin-top: 3rem;
  }

  .schoolBtnWhatsApp i {
    margin-right: 5px !important;
    vertical-align: middle;
  }

  .schoolBtnWhatsApp {
    padding: 10px 5px !important;
    font-size: 15px;
  }

  .schoolBtnOrange {
    font-size: 15px !important;
    padding: 10px 5px !important;
  }

  .schoolSupportContent .d-flex.gap-3 {
    display: block !important;
  }
}

.schoolBtnOrange i {
  vertical-align: middle;
  font-size: 24px;
}

.schoolBtnWhatsApp i {
  font-size: 24px;
}

@media (max-width: 420px) {
  .schoolBtnWhatsApp {
    padding: 10px 5px !important;
    font-size: 12px;
  }

  .schoolBtnOrange {
    font-size: 12px !important;
    padding: 10px 5px !important;
  }
}

/* Animations */
@keyframes beautySpaFadeInUpKf {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes beautySpaFloatMascotKf {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(2deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes beautySpaPulseButtonKf {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(199, 125, 186, 0.7);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(199, 125, 186, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(199, 125, 186, 0);
  }
}

.beautySpaFadeInUp {
  animation: beautySpaFadeInUpKf 0.8s ease-out both;
}

.beautySpaDelay200 {
  animation-delay: 0.2s;
}

.beautySpaMascotFloat {
  animation: beautySpaFloatMascotKf 4s ease-in-out infinite;
}

.beautySpaPulseBtn {
  animation: beautySpaPulseButtonKf 2s infinite;
}

/* =========================================
   beauty spa landing page css ends here
   ========================================= */
/* =========================================
   Real Estate Landing Page CSS Starts Here
   ========================================= */

/* Scoped Variables for Real Estate */
:root {
  --realState-primary: #0056b3;
  --realState-secondary: #e7f1ff;
  /* Light Blue */
  --realState-accent: var(--site-primary-color);
  --realState-text-dark: #242424;
  --realState-text-muted: #666666;
  --realState-font-main: "Google Sans Flex", sans-serif;
}

/* Body */
.realStateLandingBody {
  font-family: var(--realState-font-main);
  background-color: #fff;
  color: var(--realState-text-dark);
}

/* Header */
.realStateHeader .header {
  background: linear-gradient(135deg,
      var(--realState-primary) 0%,
      var(--realState-accent) 100%);
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.2);
}

.realStateHeader {
  position: relative;
  z-index: 100;
}

/* Buttons */
.realStateBtnMain {
  background-color: var(--realState-primary);
  border: 2px solid var(--realState-primary);
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 10px 25px;
  border-radius: 5px;
}

.realStateBtnMain:hover {
  background-color: var(--realState-accent);
  border-color: var(--realState-accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.35);
}

.realStateBtnWhatsApp {
  background-color: #25d366;
  border: 2px solid #25d366;
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 10px 25px;
  border-radius: 5px;
}

.realStateBtnWhatsApp:hover {
  background-color: #128c7e;
  border-color: #128c7e;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* Hero Section */
.realStateHeroSection {
  background-image: url("https://dkzxkcjlbnjui.cloudfront.net/uploads/bigdotpurchase/image/landing-real-state-bg-image.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 10rem;
  padding-bottom: 6rem;
  margin-top: -96px;
  position: relative;
}

.realStateHeroTitle {
  font-weight: 800;
  color: var(--realState-text-dark);
  font-size: 3.5rem;
  line-height: 1.2;
}

.realStateHeroSubtext {
  font-size: 1.2rem;
  color: var(--realState-text-muted);
  margin-bottom: 2rem;
}

/* Feature Cards */
.realStateFeaturesSection {
  background-color: var(--realState-secondary);
  padding: 4rem 0;
}

.realStateFeatureCard {
  background: #fff;
  border: 1px solid rgba(0, 86, 179, 0.1);
  border-radius: 10px;
  padding: 2rem;
  transition: all 0.3s ease;
  height: 100%;
}

.realStateFeatureCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 86, 179, 0.1);
}

.realStateFeatureIconBox {
  background-color: var(--realState-secondary);
  color: var(--realState-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 1.5rem;
  padding: 15px;
}

/* Tools Section */
.realStateToolsSection {
  padding: 4rem 0;
  background-color: #fff;
}

.realStateToolCard {
  text-align: center;
  padding: 2rem;
  border: 1px solid #eee;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.realStateToolCard:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-color: var(--realState-primary);
}

.realStateToolIconWrapper {
  width: 70px;
  height: 70px;
  margin: 0 auto 1.5rem;
  background-color: var(--realState-secondary);
  color: var(--realState-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.8rem;
}

/* Support Banner */
.realStateSupportSection {
  background: linear-gradient(135deg,
      var(--realState-primary) 0%,
      var(--realState-accent) 100%);
  color: #fff;
  padding: 2rem 0;
  border-radius: 20px;
  margin: 4rem 0;
}

/* Footer Banner */
.realStateFooterSection {
  background-color: #fff;
  padding: 4rem 0;
  border-top: 1px solid #eee;
}

.realStateFooterCard {
  background-color: var(--realState-secondary);
  padding: 2rem;
  border-radius: 10px;
  height: 100%;
}

.realStateFooterTitle {
  font-weight: 700;
  color: var(--realState-primary);
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .realStateHeroTitle {
    font-size: 40px;
  }

  .realStateSupportContent .d-flex.gap-3 {
    justify-content: center;
  }

  .realStateSupportContent {
    text-align: center;
  }

  .realStateSupportVisual {
    text-align: center;
  }

  .realStateSupportVisual .img-fluid {
    width: 300px;
  }

  .realStateSupportSection {
    padding: 0px 0px 30px;
    margin: 1rem 0;
  }
}

/* Animations */
@keyframes realStateFadeInUpKf {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes realStateFloatMascotKf {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(2deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes realStatePulseButtonKf {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 86, 179, 0.7);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(0, 86, 179, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 86, 179, 0);
  }
}

.realStateFadeInUp {
  animation: realStateFadeInUpKf 0.8s ease-out both;
}

.realStateMascotFloat {
  animation: realStateFloatMascotKf 4s ease-in-out infinite;
}

.realStatePulseButton {
  animation: realStatePulseButtonKf 2s infinite;
}

.realStateBrandSubtitle {
  color: #fff;
}

/* =========================================
   automobile landing page css starts here
   ========================================= */

:root {
  --automobile-primary: #a11818;
  --automobile-accent: #f8f9fa;
  --automobile-bg-dark: #1a1a1a;
  --automobile-text-dark: #2c2c2c;
  --automobile-text-muted: #6c757d;
  --automobile-font-main: "Google Sans Flex", sans-serif;
}

.automobileHeader a.navbar-brand img {
  width: 70px;
}

.automobileHeader .header {
  background: linear-gradient(135deg,
      var(--automobile-primary) 0%,
      #6e1010 100%);
  box-shadow: 0 4px 12px rgba(161, 24, 24, 0.2);
}

.automobileHeader {
  position: relative;
  z-index: 100;
}

.automobileBrandSubtitle {
  color: #fff;
  font-weight: 500;
  margin-left: 10px;
}

.automobileNavLink {
  font-size: 15px;
  padding: 0.5rem 1rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.automobileNavLink:hover {
  color: #fff !important;
}

.automobileBtnPrimary {
  background-color: var(--automobile-primary);
  border: 2px solid var(--automobile-primary);
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.automobileBtnPrimary:hover {
  background-color: #8a1414;
  border-color: #8a1414;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(161, 24, 24, 0.35);
}

.automobileBtnWhatsApp {
  background-color: var(--automobile-primary);
  border: 2px solid var(--automobile-primary);
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.automobileBtnWhatsApp:hover {
  background-color: #236526;
  border-color: #236526;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

.automobileHeroSection {
  background:
    linear-gradient(to right,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.85) 50%,
      rgba(255, 255, 255, 0.6) 100%),
    url("https://dkzxkcjlbnjui.cloudfront.net/uploads/bigdotpurchase/image/landing-auto-mobiles-hero-bg-image.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: -96px;
  position: relative;
  overflow: hidden;
  padding: 150px 0px 100px;
}

.automobileHeroTitle {
  font-weight: 800;
  color: var(--automobile-text-dark);
  line-height: 1.2;
  font-size: 50px;
}

.automobileHeroSubtext {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--automobile-text-muted);
}

.automobileHeroBtn {
  font-size: 1rem;
  padding: 0.8rem 2rem;
}

.automobileHeroImageWrapper {
  perspective: 1000px;
}

.automobileHeroImgElement {
  transition: transform 0.5s ease;
  animation: automobileFadeInUpKf 1s ease-out 0.3s both;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
}

.automobileSectionTitle {
  position: relative;
  padding-bottom: 15px;
  font-weight: 800;
  color: var(--automobile-text-dark);
  text-align: center;
}

.automobileSectionTitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--automobile-primary);
  border-radius: 2px;
}

.automobileFeaturesSection {
  background-color: #fcfcfc;
  padding: 5rem 0;
}

.automobileFeatureCard {
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: #fff;
  height: 100%;
  border-radius: 15px !important;
}

.automobileFeatureCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.automobileFeatureIconBox {
  min-width: 60px;
  height: 60px;
  background-color: rgba(161, 24, 24, 0.1);
  color: var(--automobile-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.automobileToolsSection {
  background-color: #fff;
  padding: 5rem 0;
}

.automobileToolCard {
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  text-align: center;
  height: 100%;
  border-radius: 15px !important;
}

.automobileToolCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.automobileToolIconWrapper {
  width: 80px;
  height: 80px;
  background-color: rgba(161, 24, 24, 0.05);
  color: var(--automobile-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
}

.automobileSupportBanner {
  background: linear-gradient(135deg,
      var(--automobile-primary) 0%,
      #6e1010 100%);
  box-shadow: 0 15px 35px rgba(161, 24, 24, 0.25);
  border-radius: 20px;
  padding: 3rem;
  color: #fff;
}

.automobileFooterSection {
  background-color: #fff;
  padding: 5rem 0;
}

.automobileFooterCard {
  background-color: #f8f9fa;
  border-radius: 30px;
  padding: 4rem;
  text-align: center;
}

.automobilePulseBtn {
  animation: automobilePulseButtonKf 2s infinite;
}

@keyframes automobileFadeInUpKf {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes automobilePulseButtonKf {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(161, 24, 24, 0.7);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(161, 24, 24, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(161, 24, 24, 0);
  }
}

@media (max-width: 768px) {
  .automobileHeader div#navbarNav {
    background: var(--site-primary-color);
    padding: 10px;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 65px;
  }

  section.automobileHeroSection {
    padding-right: 10px;
    padding-left: 10px;
  }

  .automobileFooterSection {
    padding: 2rem 0;
  }

  .automobileSupportContent {
    text-align: center;
  }

  .automobileSupportContent .d-flex.gap-3 {
    justify-content: center;
  }

  .automobileHeader .header {
    margin: 0px 10px;
  }

  .automobileFooterCard {
    padding: 30px 20px;
  }

  .automobileHeroTitle {
    font-size: 30px;
  }
}

/* Restaurants landing page css starts here */

.restaurantsBrandSubtitle {
  color: #ff5722;
  font-weight: 600;
  margin-left: 10px;
  font-size: 14px;
}

.restaurantsHeroSection {
  background:
    linear-gradient(rgba(255, 255, 255, 0.8), rgb(255 190 169)),
    url("https://dkzxkcjlbnjui.cloudfront.net/uploads/bigdotpurchase/image/landing-restaurants-hero-bg-image.png");
  background-size: cover;
  background-position: center;
  padding: 150px 0 100px;
  margin-top: -100px;
}

.restaurantsHeroImageWrapper .restaurantsHeroImgElement {
  width: 100%;
}

.restaurantsHeroTitle {
  color: #2d3436;
  font-weight: 800;
  line-height: 1.2;
}

.restaurantsHeroSubtext {
  font-size: 18px;
  color: #636e72;
}

.restaurantsBtnOrange {
  background-color: #ff5722;
  border: none;
  color: white !important;
  transition: all 0.3s ease;
}

.restaurantsBtnOrange:hover {
  background-color: #e64a19;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 87, 34, 0.3);
}

.restaurantsBtnWhatsApp {
  background-color: #25d366;
  border: none;
  color: white !important;
  transition: all 0.3s ease;
}

.restaurantsBtnWhatsApp:hover {
  background-color: #128c7e;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

.restaurantsSectionTitle {
  color: #2d3436;
  position: relative;
  padding-bottom: 15px;
}

.restaurantsSectionTitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #ff5722;
}

.restaurantsFeatureCard {
  transition: all 0.3s ease;
  border-radius: 20px !important;
  background: white;
}

.restaurantsFeatureCard:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.restaurantsFeatureIconBox {
  background: var(--site-secondary-color);
  width: 60px;
  height: 60px;
  min-width: 60px;
}

.restaurantsFeatureIcon {
  color: #ff5722;
}

.restaurantsToolCard {
  transition: all 0.3s ease;
  border-radius: 20px !important;
  background: white;
}

.restaurantsToolCard:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.restaurantsToolIconWrapper {
  background: #ff5722;
  width: 80px;
  height: 80px;
}

.restaurantsToolIcon {
  color: white;
}

.restaurantsSupportBanner {
  background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%);
}

.restaurantsMascotFloat {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

.restaurantsFooterCard {
  background: var(--site-secondary-color);
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.05);
}

.restaurantsSupportVisual img.img-fluid {
  width: 400px;
}

.restaurantsFooterTitle {
  color: #2d3436;
}

.restaurantsPulseBtn {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .restaurantsHeroSection {
    padding: 150px 0 100px;
    text-align: center;
  }

  .restaurantsHeroTitle {
    font-size: 1.8rem;
  }

  .restaurantsHeroSubtext {
    font-size: 16px;
  }
}

/* hotel landing page css starts here */

:root {
  --primary-hotel: #c5a059;
  --hotel-bg: #0f172a;
  --hotel-card-bg: #1e293b;
  --hotel-gold: #c5a059;
  --hotel-gold-hover: #d4af37;
  --hotel-border: #334155;
  --hotel-text: #f1f5f9;
  --hotel-text-muted: #94a3b8;
}

.hotelLandingBody {
  background-color: var(--hotel-bg);
  color: var(--hotel-text);
}

.hotelBrandSubtitle {
  color: #fff;
  margin-left: 10px;
  font-size: 18px;
}

.BigDotPurchaseHeader.hotelHeader .container.header {
  background: var(--hotel-gold);
}

.hotelHeroSection {
  background:
    linear-gradient(rgb(147 159 189 / 70%), rgb(130 144 173 / 70%)),
    url("https://dkzxkcjlbnjui.cloudfront.net/uploads/bigdotpurchase/image/landing-hotels-hero-bg-image.png");
  background-size: cover;
  background-position: center;
  padding: 120px 0;
}

.hotelHeroTitle {
  color: #f8fafc;
  font-weight: 800;
  line-height: 1.2;
}

.hotelHeroSubtext {
  font-size: 18px;
}

.hotelBtnGold {
  background-color: var(--hotel-gold);
  border: none;
  color: var(--hotel-card-bg) !important;
  transition: all 0.3s ease;
}

.hotelBtnGold:hover {
  background-color: var(--hotel-gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(197, 160, 89, 0.3);
}

.hotelBtnOutline {
  background-color: transparent;
  border: 2px solid var(--hotel-gold);
  color: var(--hotel-gold) !important;
  transition: all 0.3s ease;
}

.hotelBtnOutline:hover {
  border-color: var(--hotel-border);
  color: var(--hotel-gold) !important;
}

.hotelSectionTitle {
  color: #f8fafc;
  position: relative;
  padding-bottom: 15px;
}

.hotelSectionTitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--hotel-gold);
}

.hotelFeatureCard {
  background: var(--hotel-card-bg);
  border: 1px solid var(--hotel-border) !important;
  transition: all 0.3s ease;
  border-radius: 15px !important;
}

.hotelFeatureCard:hover {
  transform: translateY(-5px);
  border-color: var(--hotel-gold) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.hotelFeatureIconBox {
  background: rgba(197, 160, 89, 0.1);
  width: 50px;
  height: 50px;
  min-width: 50px;
}

.hotelFeatureIcon {
  color: var(--hotel-gold);
}

.hotelToolCard {
  background: var(--hotel-card-bg);
  border: 1px solid var(--hotel-border) !important;
  transition: all 0.3s ease;
  border-radius: 15px !important;
}

.hotelToolCard:hover {
  background: var(--hotel-border);
}

.hotelToolIconWrapper {
  background: var(--hotel-gold);
  width: 60px;
  height: 60px;
}

.hotelToolIcon {
  color: var(--hotel-card-bg);
}

.hotelSupportBanner {
  background: linear-gradient(135deg,
      var(--hotel-card-bg) 0%,
      var(--hotel-bg) 100%);
  border: 1px solid var(--hotel-border);
}

.hotelMascotFloat {
  animation: hotelFloat 4s ease-in-out infinite;
}

@keyframes hotelFloat {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0px);
  }
}

.hotelFooterCard {
  background: var(--hotel-card-bg);
  border: 1px solid var(--hotel-border);
}

.hotelFooterTitle {
  color: #f8fafc;
}

.hotelSupportVisual img.img-fluid {
  width: 400px;
}

.hotelHeroImageWrapper img.img-fluid {
  width: 100%;
}

@media (max-width: 768px) {
  .hotelHeroSection {
    padding: 60px 0;
    text-align: center;
  }

  .hotelHeroTitle {
    font-size: 2rem;
  }
}

/* modern bakeries landing page css starts here */
:root {
  --bakeryPrimary: #5d4037;
  --bakerySecondary: #f5ebe0;
  --bakeryAccent: #d4a373;
  --bakeryText: #3e2723;
  --bakeryMuted: #795548;
  --bakeryCardBg: #ffffff;
  --bakeryBorder: #e3d5ca;
  --bakeryGold: #bc6c25;
}

.bakeryLandingBody {
  background-color: #fefae0;
  color: var(--bakeryText);
}

.bakeryHeader {
  padding: 10px 0;
}

.bakeryBrandSubtitle {
  color: var(--bakerySecondary);
  font-size: 0.9rem;
  margin-left: 10px;
  border-left: 1px solid var(--bakerySecondary);
  padding-left: 10px;
}

.bakeryNavLink {
  color: var(--bakerySecondary) !important;
  font-weight: 500;
}

.bakeryNavLink:hover {
  color: var(--bakeryAccent) !important;
}

.bakeryHeroSection {
  background:
    linear-gradient(rgba(254, 250, 224, 0.9), rgba(254, 250, 224, 0.9)),
    url("https://dkzxkcjlbnjui.cloudfront.net/uploads/bigdotpurchase/image/landing-modern-bakeries-hero-bg-image.png");
  background-size: cover;
  background-position: center;
  padding: 180px 0 120px;
  margin-top: -125px;
}

.bakeryHeroTitle {
  font-family: "Cormorant Garamond", serif;
  color: var(--bakeryPrimary);
  font-weight: 800;
}

.bakeryHeroSubtext {
  color: var(--bakeryMuted);
  font-size: 1.1rem;
}

.bakeryBtnBrown {
  background-color: var(--bakeryPrimary);
  color: white !important;
  border: none;
  transition: all 0.3s ease;
}

.bakeryBtnBrown:hover {
  background-color: var(--bakeryText);
  transform: translateY(-2px);
}

.bakeryBtnWhatsApp {
  background-color: #25d366;
  color: white !important;
  border: none;
  transition: all 0.3s ease;
}

.bakeryBtnWhatsApp:hover {
  background-color: #128c7e;
  transform: translateY(-2px);
}

.bakerySectionTitle {
  font-family: "Cormorant Garamond", serif;
  color: var(--bakeryPrimary);
  position: relative;
  padding-bottom: 15px;
}

.bakerySectionTitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: var(--bakeryAccent);
}

.bakeryFeatureCard {
  background: var(--bakeryCardBg);
  border: 1px solid var(--bakeryBorder) !important;
  border-radius: 15px !important;
  transition: all 0.3s ease;
}

.bakeryFeatureCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(93, 64, 55, 0.1) !important;
  border-color: var(--bakeryAccent) !important;
}

.bakeryFeatureIconBox {
  background: var(--bakerySecondary);
  width: 50px;
  height: 50px;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.bakeryFeatureIcon {
  color: var(--bakeryPrimary);
}

.bakeryToolCard {
  background: var(--bakeryCardBg);
  border: 1px solid var(--bakeryBorder) !important;
  border-radius: 20px !important;
  transition: all 0.3s ease;
}

.bakeryToolCard:hover {
  background: var(--bakerySecondary);
}

.bakeryToolIconWrapper {
  background: var(--bakeryPrimary);
  color: white;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.bakerySupportBanner {
  background: linear-gradient(135deg,
      var(--bakeryPrimary) 0%,
      var(--bakeryMuted) 100%);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  padding: 3rem;
}

.bakeryMascotFloat {
  animation: bakeryFloat 5s ease-in-out infinite;
}

@keyframes bakeryFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

.bakeryFooterSection {
  background-color: #faedcd;
  padding: 80px 0;
}

.bakeryFooterCard {
  background: white;
  padding: 60px;
  border-radius: 30px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}

.bakeryPulseBtn {
  animation: bakeryPulse 2s infinite;
}

@keyframes bakeryPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .bakeryHeroTitle {
    font-size: 2.5rem;
  }

  .bakeryFooterCard {
    padding: 30px;
  }
}

/* smart qr sticker landing page css starts here */
:root {
  --qrPrimary: #0f172a;
  --qrSecondary: #f59e0b;
  --qrAccent: #3b82f6;
  --qrBg: #020617;
  --qrCardBg: #1e293b;
  --qrTextColor: #f8fafc;
  --qrMutedColor: #94a3b8;
  --qrBorder: #334155;
}

.qrLandingBody {
  background-color: var(--qrBg);
  color: var(--qrTextColor);
}

.qrBrandSubtitle {
  color: var(--qrSecondary);
  font-size: 0.9rem;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--qrSecondary);
}

.qrNavLink {
  color: var(--qrTextColor) !important;
  font-weight: 500;
}

.qrNavLink:hover {
  color: var(--qrSecondary) !important;
}

.qrHeroSection {
  background:
    radial-gradient(circle at 80% 20%,
      rgba(59, 130, 246, 0.2),
      transparent 40%),
    radial-gradient(circle at 20% 80%,
      rgba(245, 158, 11, 0.15),
      transparent 40%),
    linear-gradient(135deg, #020617 0%, #0f172a 100%);
  padding: 250px 0 120px;
  margin-top: -125px;
  position: relative;
  overflow: hidden;
}

.qrHeroSection::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
  pointer-events: none;
}

.qrHeroTitle {
  font-size: 3.5rem;
  background: linear-gradient(to right, #fff, var(--qrSecondary));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.qrHeroSubtext {
  color: var(--qrMutedColor);
  font-size: 1.25rem;
}

.qrBtnGold {
  background: var(--qrSecondary);
  color: var(--qrPrimary) !important;
  border: none;
  font-weight: 700;
  transition: all 0.3s ease;
}

.qrBtnGold:hover {
  background: #fbbf24;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
  transform: translateY(-2px);
}

.qrSectionTitle {
  color: #fff;
  position: relative;
  display: inline-block;
}

.qrSectionTitle::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--qrSecondary);
  border-radius: 2px;
}

.qrUseCaseCard {
  background: var(--qrCardBg);
  border: 1px solid var(--qrBorder) !important;
  border-radius: 20px !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.qrUseCaseCard:hover {
  transform: translateY(-10px);
  border-color: var(--qrSecondary) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.qrIconBox {
  background: rgba(59, 130, 246, 0.1);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 20px !important;
  margin: 0 auto;
}

.qrIconBox i {
  color: var(--qrSecondary);
}

.qrBenefitsList {
  list-style: none;
  padding-left: 0;
}

.qrBenefitsList li {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.qrBenefitsList li i {
  color: var(--qrSecondary);
  margin-right: 12px;
}

.qrFooterSection {
  background: #000;
  padding: 80px 0;
}

.qrFooterCard {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid var(--qrBorder);
  padding: 60px;
  border-radius: 40px;
  text-align: center;
}

@media (max-width: 991px) {
  .qrHeroTitle {
    font-size: 2.8rem;
  }

  .qrFooterCard {
    padding: 20px;
  }

  .getOffer.promoCard {
    margin-bottom: 20px;
  }
}

body .mat-mdc-text-field-wrapper {
  width: 100%;
  z-index: 0;
  border-radius: 8px !important;
  padding: 0px 15px !important;
  border: 1.5px solid #e2e8f0;
  height: 48px;
}

.mat-mdc-form-field .mdc-notched-outline__leading,
.mat-mdc-form-field .mdc-notched-outline__notch,
.mat-mdc-form-field .mdc-notched-outline__trailing {
  border: transparent !important;
}

.mdc-notched-outline__leading {
  display: none;
}

.waveSection {
  display: none;
}

.orangeBackground {
  position: relative;
}

.orangeBackground svg {
  width: 100% !important;
  display: block !important;
  height: 100% !important;
}

.productGallery .row {
  justify-content: center;
}

/* Seller Site Checkout Page CSS Starts Here */

.sSCheckoutPage {
  background: var(--bdcBg);
  min-height: 100vh;
}

.sSCheckoutShell {
  max-width: 880px;
  margin: 0 auto;
}

.sSCheckoutLogoBar {
  padding: 30px 0 24px;
}

.sSCheckoutLogo {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bdcText);
  letter-spacing: -0.5px;
}

.sSCheckoutLogoAccent {
  color: var(--site-secondary-color);
}

.sSCheckoutSecureBadge {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--bdcTextMuted);
  letter-spacing: 0.2px;
}

.sSCheckoutSecureBadge i {
  color: #22a355;
}

.sSCheckoutStepper {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px;
}

.sSCheckoutStepUnit {
  display: flex;
  align-items: flex-start;
  flex: 1;
}

.sSCheckoutStepUnit:last-child {
  flex: 0 0 auto;
}

.sSCheckoutStepBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-width: 64px;
}

.sSCheckoutStepCircle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bdcSurface);
  border: 2px solid var(--bdcBorder);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bdcTextMuted);
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.sSCheckoutStepName {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--bdcTextMuted);
  transition: color 0.3s;
  white-space: nowrap;
}

.sSCheckoutStepTrack {
  flex: 1;
  height: 2px;
  background: var(--bdcBorder);
  border-radius: 2px;
  margin: 21px 10px 0;
  position: relative;
  overflow: hidden;
}

.sSCheckoutStepFill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg,
      var(--site-secondary-color),
      var(--site-primary-color));
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Stepper state modifiers */
.sSCheckoutStepIsActive .sSCheckoutStepCircle {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(0, 86, 179, 0.12);
}

.sSCheckoutStepIsActive .sSCheckoutStepName {
  color: var(--site-primary-color);
}

.sSCheckoutStepIsDone .sSCheckoutStepCircle {
  background: #22a355;
  border-color: #22a355;
  color: #fff;
}

.sSCheckoutStepIsDone .sSCheckoutStepName {
  color: #22a355;
}

.sSCheckoutCard {
  background: var(--bdcSurface);
  border-radius: var(--bdcRadiusLg);
  box-shadow: var(--bdcShadow);
  border: 1px solid var(--bdcBorder);
  overflow: hidden;
  margin-bottom: 32px;
}

.sSCheckoutCardInner {
  padding: 40px 44px;
}

.sSCheckoutH1 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--bdcText);
  letter-spacing: -0.5px;
  margin-bottom: 6px;
  line-height: 1.2;
}

.sSCheckoutSub {
  font-size: 0.9rem;
  color: var(--bdcTextSub);
  margin-bottom: 32px;
}

.sSCheckoutLabel {
  display: block;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--bdcTextSub);
  margin-bottom: 7px;
}

.sSCheckoutField {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--bdcBorder);
  border-radius: var(--bdcRadiusMd);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--bdcText);
  background: var(--bdcSurfaceAlt);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}

.sSCheckoutField::placeholder {
  color: var(--bdcTextMuted);
  font-weight: 400;
}

.sSCheckoutField:focus {
  border-color: var(--site-secondary-color);
  box-shadow: 0 0 0 3px rgba(56, 181, 254, 0.14);
  background: #fff;
}

.sSCheckoutFieldBad {
  border-color: #dc3545;
}

.sSCheckoutFieldBad:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}

.sSCheckoutErr {
  font-size: 0.74rem;
  color: #dc3545;
  font-weight: 600;
  margin-top: 5px;
  display: none;
}

.sSCheckoutErrOn {
  display: block;
}

.sSCheckoutBtnBack {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--bdcRadiusMd);
  border: 1.5px solid var(--bdcBorder);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bdcTextSub);
  cursor: pointer;
  transition: all 0.2s;
}

.sSCheckoutBtnBack:hover {
  background: var(--bdcSurfaceAlt);
  border-color: #c0ccda;
  color: var(--bdcText);
}

.sSCheckoutBtnNext {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--bdcRadiusMd);
  border: none;
  background: var(--site-secondary-color);
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(56, 181, 254, 0.35);
}

.sSCheckoutBtnNext:hover {
  background: #1da3f5;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(56, 181, 254, 0.42);
}

.sSCheckoutBtnSkip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 20px;
  border-radius: var(--bdcRadiusMd);
  border: 1.5px dashed var(--bdcBorder);
  background: transparent;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bdcTextMuted);
  cursor: pointer;
  transition: all 0.2s;
}

.sSCheckoutBtnSkip:hover {
  border-color: var(--bdcTextSub);
  color: var(--bdcTextSub);
}

.sSCheckoutPanel {
  display: none;
}

.sSCheckoutPanelOn {
  display: block;
}

.sSCheckoutAddonGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.sSCheckoutAddonTile {
  border: 1.5px solid var(--bdcBorder);
  border-radius: var(--bdcRadiusLg);
  padding: 18px 16px 16px;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
  background: var(--bdcSurface);
}

.sSCheckoutAddonTile:hover {
  border-color: var(--site-secondary-color);
  box-shadow: 0 4px 20px rgba(0, 86, 179, 0.1);
}

.sSCheckoutAddonTileOn {
  border-color: var(--site-primary-color);
  background: #f0f5ff;
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.07);
}

.sSCheckoutAddonTopRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.sSCheckoutAddonIcon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: #eef4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--site-primary-color);
  transition:
    background 0.2s,
    color 0.2s;
}

.sSCheckoutAddonTileOn .sSCheckoutAddonIcon {
  background: var(--site-primary-color);
  color: #fff;
}

.sSCheckoutAddonCheck {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--bdcBorder);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: transparent;
  transition: all 0.2s;
  flex-shrink: 0;
}

.sSCheckoutAddonTileOn .sSCheckoutAddonCheck {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
  color: #fff;
}

.sSCheckoutAddonTitle {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bdcText);
  margin-bottom: 5px;
}

.sSCheckoutAddonDesc {
  font-size: 0.78rem;
  color: var(--bdcTextSub);
  line-height: 1.5;
  margin-bottom: 10px;
}

.sSCheckoutAddonPriceRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sSCheckoutAddonPrice {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--site-secondary-color);
}

.sSCheckoutAddonPill {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: #fff3ef;
  color: var(--site-tertiary-color);
  border-radius: 5px;
  padding: 2px 7px;
  text-transform: uppercase;
}

.sSCheckoutReviewLayout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 28px;
  align-items: start;
}

.sSCheckoutLeadBox {
  border: 1.5px solid var(--bdcBorder);
  border-radius: var(--bdcRadiusLg);
  overflow: hidden;
  margin-bottom: 24px;
}

.sSCheckoutLeadRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--bdcBorder);
}

.sSCheckoutLeadRow:last-child {
  border-bottom: none;
}

.sSCheckoutLeadIconWrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #eef4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-primary-color);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.sSCheckoutLeadKey {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bdcTextMuted);
}

.sSCheckoutLeadVal {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bdcText);
}

.sSCheckoutPromoWrap {
  display: flex;
}

.sSCheckoutPromoField {
  border-radius: var(--bdcRadiusMd) 0 0 var(--bdcRadiusMd);
  border-right: none;
  flex: 1;
}

.sSCheckoutPromoField:focus {
  border-right: none;
}

.sSCheckoutPromoApply {
  padding: 0 22px;
  border-radius: 0 var(--bdcRadiusMd) var(--bdcRadiusMd) 0;
  border: 1.5px solid var(--bdcBorder);
  border-left: none;
  background: var(--bdcText);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.2s;
}

.sSCheckoutPromoApply:hover {
  background: #1a2d48;
}

.sSCheckoutPromoChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.sSCheckoutPromoChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1.5px solid var(--bdcBorder);
  background: var(--bdcSurfaceAlt);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--bdcTextSub);
  cursor: pointer;
  transition: all 0.2s;
}

.sSCheckoutPromoChip:hover {
  border-color: var(--site-secondary-color);
  color: var(--site-primary-color);
  background: #f0f9ff;
}

.sSCheckoutPromoChipUsed {
  border-color: #22a355;
  background: #eafaf2;
  color: #1a7a40;
}

.sSCheckoutPromoFeedback {
  font-size: 0.77rem;
  font-weight: 600;
  margin-top: 8px;
  display: none;
}

.sSCheckoutPromoOk {
  color: #1a7a40;
  display: block;
}

.sSCheckoutPromoFail {
  color: #dc3545;
  display: block;
}

.sSCheckoutTerms {
  font-size: 0.75rem;
  color: var(--bdcTextMuted);
  line-height: 1.65;
  margin-bottom: 20px;
}

.sSCheckoutTerms a {
  color: var(--site-secondary-color);
  font-weight: 600;
  text-decoration: none;
}

.sSCheckoutTerms a:hover {
  text-decoration: underline;
}

.sSCheckoutOrderBox {
  background: var(--bdcSurfaceAlt);
  border: 1.5px solid var(--bdcBorder);
  border-radius: var(--bdcRadiusLg);
  padding: 22px 20px;
}

.sSCheckoutOrderBoxTitle {
  font-size: 1rem;
  font-weight: 800;
  color: var(--bdcText);
  margin-bottom: 16px;
}

.sSCheckoutOrderPlanTag {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eef4ff;
  border-radius: var(--bdcRadiusMd);
  padding: 10px 13px;
  margin-bottom: 16px;
}

.sSCheckoutOrderDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--site-secondary-color);
  flex-shrink: 0;
}

.sSCheckoutOrderPlanLabel {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSCheckoutOrderRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 0.84rem;
}

.sSCheckoutOrderRowLabel {
  color: var(--bdcTextSub);
  font-weight: 500;
}

.sSCheckoutOrderRowVal {
  font-weight: 700;
  color: var(--bdcText);
}

.sSCheckoutOrderRowDisc {
  color: #22a355;
}

.sSCheckoutOrderHr {
  border: none;
  border-top: 1px solid var(--bdcBorder);
  margin: 10px 0;
}

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

.sSCheckoutOrderTotalLabel {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bdcText);
}

.sSCheckoutOrderTotalAmt {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--site-secondary-color);
  letter-spacing: -0.5px;
  line-height: 1;
}

.sSCheckoutOrderNote {
  font-size: 0.7rem;
  color: var(--bdcTextMuted);
  text-align: right;
  margin-top: 4px;
}

.sSCheckoutTrustList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.sSCheckoutTrustItem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--bdcTextMuted);
  font-weight: 500;
}

.sSCheckoutTrustItem i {
  color: #22a355;
  font-size: 0.85rem;
}

.sSCheckoutSuccess {
  text-align: center;
  padding: 56px 40px;
  display: none;
}

.sSCheckoutSuccessOn {
  display: block;
}

.sSCheckoutSuccessOrb {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg,
      var(--site-secondary-color) 0%,
      var(--site-primary-color) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: #fff;
  margin: 0 auto 24px;
  box-shadow: 0 8px 28px rgba(0, 86, 179, 0.22);
}

.sSCheckoutSuccessTitle {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--bdcText);
  margin-bottom: 10px;
}

.sSCheckoutSuccessBody {
  font-size: 0.9rem;
  color: var(--bdcTextSub);
  margin-bottom: 28px;
  line-height: 1.7;
}

.sSCheckoutSuccessEm {
  font-weight: 700;
  color: var(--bdcText);
}

@media (max-width: 767px) {
  .sSCheckoutCardInner {
    padding: 24px 18px;
  }

  .sSCheckoutAddonGrid {
    grid-template-columns: 1fr;
  }

  .sSCheckoutReviewLayout {
    grid-template-columns: 1fr;
  }

  .sSCheckoutStepName {
    display: none;
  }

  .sSCheckoutH1 {
    font-size: 1.4rem;
  }
}

/* Checkout flow 06 march 2026 */

.sSitePage {
  min-height: 100vh;
  color: #0d1b4b;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px 140px;
  gap: 18px;
  position: relative;
  overflow-x: hidden;
}

.sSiteProductsIcon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--site-secondary-color);
}

.serviceIcon .sSiteProductsIcon {
  margin: 0 auto;
}

.sSiteProductsIcon i {
  font-size: 28px;
  color: var(--site-primary-color);
}

.sSiteBlob {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.sSiteBlob1 {
  width: 650px;
  height: 650px;
  background: radial-gradient(circle,
      rgba(24, 71, 212, 0.09) 0%,
      transparent 70%);
  top: -220px;
  left: -180px;
}

.sSiteBlob2 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle,
      rgba(74, 123, 245, 0.07) 0%,
      transparent 70%);
  bottom: -100px;
  right: -100px;
}

.sSiteBlob3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle,
      rgba(245, 166, 35, 0.05) 0%,
      transparent 70%);
  top: 45%;
  left: 60%;
}

.sSiteLogoWrap {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  animation: sSiteFadeDown 0.4s ease both;
}

.sSiteLogoText {
  font-size: 22px;
  font-weight: 800;
  color: var(--site-primary-color);
  display: flex;
  align-items: center;
  gap: 1px;
}

.sSiteLogoDot {
  color: var(--site-primary-color);
}

.sSiteLogoSub {
  font-size: 10px;
  color: #8a96b8;
  letter-spacing: 0.6px;
}

.sSiteProgressWrap {
  width: 100%;
  max-width: 700px;
  position: relative;
  animation: sSiteFadeDown 0.5s ease 0.1s both;
}

.sSiteProgSteps {
  display: flex;
  gap: 5px;
}

.sSiteProgSeg {
  flex: 1;
  height: 5px;
  border-radius: 10px;
  background: #e2e8f4;
  overflow: hidden;
}

.sSiteProgFill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg,
      var(--site-primary-color),
      var(--site-tertiary-color));
  width: 0%;
  transition: width 0.5s ease;
}

.sSiteProgSeg.sSiteDone .sSiteProgFill {
  width: 100%;
}

.sSiteProgSeg.sSiteActive .sSiteProgFill {
  width: 100%;
  animation: sSiteFillBar 0.6s ease 0.1s both;
}

@keyframes sSiteFillBar {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

.sSiteProgressLabel {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #8a96b8;
}

.sSiteProgressLabelCurrent {
  color: var(--site-primary-color);
}

.sSiteCard {
  width: 100%;
  max-width: 700px;
  background: #ffffff;
  border-radius: 18px;
  border: 1.5px solid #e2e8f4;
  box-shadow:
    0 4px 40px rgba(24, 71, 212, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  position: relative;
}

.sSiteStep {
  display: none;
}

.sSiteStep.sSiteActive {
  display: block;
  animation: sSiteRiseIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sSiteRiseIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.99);
  }

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

.sSiteContent {
  padding: 24px 28px 20px;
}

.sSiteActions {
  padding: 0 28px 28px;
}

.sSiteStepHeader {
  padding: 28px 28px 0;
}

.sSitePlanChip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 28px 0;
}

.sSitePlanChipInner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--site-secondary-color);
  border: 1px solid rgba(24, 71, 212, 0.18);
  border-radius: 40px;
  padding: 7px 16px 7px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--site-primary-color);
}

.sSitePlanChipDot {
  width: 18px;
  height: 18px;
  background: var(--site-primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #fff;
  flex-shrink: 0;
}

.sSiteStepTitle {
  font-size: 22px;
  font-weight: 800;
  color: var(--site-primary-color);
  margin-bottom: 5px;
}

.sSiteStepSubtitle {
  font-size: 13px;
  color: #8a96b8;
  margin-bottom: 0;
  line-height: 1.6;
}

.sSitePlanGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 20px 28px;
}

.sSitePlanCardFull {
  grid-column: 1 / -1;
}

.sSitePlanLabel {
  cursor: pointer;
  display: block;
  width: 100%;
}

.sSitePlanLabel input[type="radio"] {
  display: none;
}

.sSitePlanCardInner {
  border: 2px solid #e2e8f4;
  background: #ffffff;
  padding: 16px 18px;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  min-height: 68px;
}

.sSitePlanLabel:hover .sSitePlanCardInner {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(24, 71, 212, 0.1);
}

.sSitePlanLabel input:checked+.sSitePlanCardInner {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
  box-shadow:
    0 0 0 1px var(--site-primary-color),
    0 8px 24px -8px rgba(24, 45, 100, 0.18);
  transform: translateY(-2px);
}

.sSitePlanCardMeta {
  flex: 1;
}

.sSitePlanName {
  font-size: 14px;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 2px;
}

.sSitePlanSubtitle {
  font-size: 12px;
  color: #8a96b8;
}

.sSitePlanPrice {
  font-size: 15px;
  font-weight: 800;
  color: var(--site-primary-color);
  white-space: nowrap;
  margin-left: 10px;
}

.sSitePlanPriceSuffix {
  font-size: 11px;
  font-weight: 500;
  color: #8a96b8;
}

.sSiteCurrentBadge {
  position: absolute;
  top: -16px;
  left: 14px;
  background: var(--site-quaternary-color);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sSiteBestBadge {
  display: inline-block;
  background: rgba(23, 178, 106, 0.12);
  color: #17b26a;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 3px;
}

.sSiteTeamInputWrap {
  padding: 0 28px 16px;
  display: none;
}

.sSiteTeamInputWrap.sSiteVisible {
  display: block;
}

.sSiteFormGroup {
  margin-bottom: 0;
}

.sSiteFormLabel {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #4a5578;
  margin-bottom: 7px;
}

.sSiteFormField {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  font-size: 14px;

  font-weight: 500;
  color: var(--site-primary-color);
  background: #fafbff;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}

.sSiteFormField::placeholder {
  color: #8a96b8;
  font-weight: 400;
}

.sSiteFormField:focus {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px rgba(24, 71, 212, 0.1);
  background: #fff;
}

.sSiteFormFieldBad {
  border-color: #ef4444 !important;
}

.sSiteFormFieldBad:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.sSiteFormErr {
  font-size: 11px;
  font-weight: 600;
  color: #ef4444;
  margin-top: 5px;
  display: none;
}

.sSiteFormErrOn {
  display: block;
}

.sSiteVisualImgContainer {
  width: 100%;
  margin-bottom: 30px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}

.sSiteVisualImg {
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.sSiteVisualImg:hover {
  transform: scale(1.03);
}

.sSiteVisualHero {
  padding: 24px 28px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 155px;
}

.sSiteNfcCardVisual {
  width: 185px;
  height: 115px;
  border-radius: 14px;
  background: linear-gradient(135deg,
      var(--site-primary-color) 0%,
      var(--site-primary-color) 100%);
  box-shadow:
    0 20px 50px rgba(24, 71, 212, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transform: rotate(-4deg) translateY(4px);
  transition: transform 0.45s ease;
  z-index: 2;
}

.sSiteNfcCardVisual:hover {
  transform: rotate(-1deg) translateY(-4px);
}

.sSiteNfcCardVisual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.13) 0%,
      transparent 50%,
      rgba(255, 255, 255, 0.04) 100%);
}

.sSiteCardVariantB {
  transform: rotate(2deg);
}

.sSiteCardVariantB:hover {
  transform: rotate(0deg) translateY(-4px);
}

.sSiteCardChip {
  position: absolute;
  top: 16px;
  left: 13px;
  width: 28px;
  height: 20px;
  background: linear-gradient(135deg, #d4af70, #f5d98a, #b8962e);
  border-radius: 4px;
  overflow: hidden;
}

.sSiteCardChip::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(139, 101, 20, 0.4);
  border-radius: 2px;
}

.sSiteCardNfcIcon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
}

.sSiteNfcWave {
  position: absolute;
  border: 1.5px solid #fff;
  border-radius: 50%;
  opacity: 0;
  animation: sSiteNfcPulse 2.2s ease infinite;
}

.sSiteNfcWave1 {
  width: 10px;
  height: 10px;
  top: 9px;
  right: 9px;
  animation-delay: 0s;
}

.sSiteNfcWave2 {
  width: 18px;
  height: 18px;
  top: 5px;
  right: 5px;
  animation-delay: 0.3s;
}

.sSiteNfcWave3 {
  width: 26px;
  height: 26px;
  top: 1px;
  right: 1px;
  animation-delay: 0.6s;
}

@keyframes sSiteNfcPulse {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }

  40% {
    opacity: 0.6;
  }

  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

.sSiteCardNameLine {
  position: absolute;
  bottom: 14px;
  left: 13px;
  right: 13px;
}

.sSiteCardName {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.sSiteCardTitle {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.3px;
}

.sSiteCardBigdotLogo {
  font-size: 7px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.3);
  position: absolute;
  bottom: 8px;
  right: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.sSiteStickerVisual {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0f4ff, #e2eaff);
  border: 3px solid var(--site-secondary-color);
  box-shadow: 0 8px 24px rgba(24, 71, 212, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  transform: translateX(-14px) translateY(-10px);
  transition: transform 0.4s ease;
  flex-shrink: 0;
}

.sSiteStickerVisual:hover {
  transform: translateX(-14px) translateY(-16px);
}

.sSiteStickerInner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg,
      var(--site-primary-color) 0%,
      var(--site-tertiary-color) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.sSiteStickerInner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.25) 0%,
      transparent 50%);
}

.sSiteStickerWaves {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sSiteArc {
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-bottom: none;
  border-radius: 50% 50% 0 0;
}

.sSiteArc1 {
  width: 8px;
  height: 4px;
}

.sSiteArc2 {
  width: 14px;
  height: 7px;
}

.sSiteArc3 {
  width: 20px;
  height: 10px;
}

.sSiteStickerDot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  margin-top: 1px;
}

.sSiteTapVisual {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: white;
  border: 1px solid #e2e8f4;
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  color: #4a5578;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  animation: sSiteFloatBob 3s ease-in-out infinite;
}

.sSiteFloatBadge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #f5a623;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3);
  animation: sSiteFloatBob 2.5s ease-in-out infinite 0.5s;
}

@keyframes sSiteFloatBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.sSiteHeadline {
  font-size: 25px;
  font-weight: 800;
  color: var(--site-primary-color);
  line-height: 1.2;
  margin-bottom: 18px;
}

.sSiteHeadlineAccent {
  color: var(--site-primary-color);
}

.sSiteSocialProof {
  display: flex;
  align-items: center;
  background: var(--site-secondary-color);
  border: 1px solid rgba(24, 71, 212, 0.1);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
}

.sSiteProofStat {
  flex: 1;
  text-align: center;
}

.sSiteProofNumber {
  font-size: 20px;
  font-weight: 800;
  color: var(--site-primary-color);
  line-height: 1;
}

.sSiteProofLabel {
  font-size: 11px;
  color: #8a96b8;
  margin-top: 4px;
  line-height: 1.4;
}

.sSiteProofDivider {
  width: 1px;
  height: 38px;
  background: rgba(24, 71, 212, 0.12);
}

.sSiteBenefitsRow {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}

.sSiteBenefitChip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--site-secondary-color);
  border: 1px solid rgba(24, 71, 212, 0.1);
  border-radius: 12px;
  padding: 11px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--site-primary-color);
  text-align: center;
  line-height: 1.3;
  transition: all 0.2s;
}

.sSiteBenefitChip:hover {
  background: var(--site-secondary-color);
  border-color: rgba(24, 71, 212, 0.22);
  transform: translateY(-2px);
}

.sSiteBenefitIcon {
  font-size: 17px;
}

.sSiteProductLabel {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--site-primary-color);
  margin-bottom: 4px;
}

.sSiteProductHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 5px;
}

.sSiteProductTitle {
  font-size: 21px;
  font-weight: 800;
  color: var(--site-primary-color);
}

.sSitePriceBadge {
  background: var(--site-primary-color);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  padding: 8px 15px;
  border-radius: 12px;
  text-align: right;
  flex-shrink: 0;
}

.sSitePriceBadgeSub {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.6;
  display: block;
}

.sSiteProductDesc {
  font-size: 13px;
  color: #8a96b8;
  margin-bottom: 18px;
  line-height: 1.6;
}

.sSitePlacementVisual {
  background: linear-gradient(135deg, #0d1b4b 0%, #1847d4 100%);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.sSitePlacementVisual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%);
}

.sSitePlacementItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.sSitePlacementIcon {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  transition: all 0.22s;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}

.sSitePlacementItem:hover .sSitePlacementIcon {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-3px);
}

.sSitePlacementItem.sSiteActive .sSitePlacementIcon {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.55);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.sSitePlacementLabel {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.sSitePlacementSaveBadge {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: #f5a623;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.sSitePlacementHint {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}

.sSiteSectionLabelRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sSiteSectionLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8a96b8;
}

.sSiteSelectedCount {
  color: var(--site-primary-color);
}

.sSitePlacementOpts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 12px;
}

.sSiteOptCard {
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  padding: 13px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #ffffff;
  position: relative;
}

.sSiteOptCard:hover {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
}

.sSiteOptCard.sSiteSelected {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
  box-shadow: 0 0 0 1px var(--site-primary-color);
}

.sSiteOptCardRow {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  text-align: left;
}

.sSiteOptCardRowIcon {
  font-size: 21px;
  flex-shrink: 0;
}

.sSiteOptCardCheck {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border: 1.5px solid #e2e8f4;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: white;
  transition: all 0.2s;
}

.sSiteOptCardRow .sSiteOptCardCheck {
  position: static;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  order: 999;
  margin-left: auto;
}

.sSiteOptCard.sSiteSelected .sSiteOptCardCheck {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
}

.sSiteOptCard.sSiteSelected .sSiteOptCardCheck::after {
  content: "\2714";
}

.sSiteOptCardIcon {
  font-size: 21px;
  margin-bottom: 6px;
}

.sSiteOptCardName {
  font-size: 12px;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 2px;
}

.sSiteOptCardSub {
  font-size: 10px;
  color: #8a96b8;
}

.sSiteCustomQty {
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}

.sSiteCustomQtyLabel {
  flex: 1;
}

.sSiteCustomQtyTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--site-primary-color);
}

.sSiteCustomQtySub {
  font-size: 11px;
  color: #8a96b8;
}

.sSiteQtyControls {
  display: flex;
  align-items: center;
  gap: 11px;
}

.sSiteQtyBtn {
  width: 32px;
  height: 32px;
  border: 1.5px solid #e2e8f4;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: #4a5578;
  transition: all 0.15s;
  font-family: inherit;
}

.sSiteQtyBtn:hover {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
  background: var(--site-secondary-color);
}

.sSiteQtyValue {
  font-size: 16px;
  font-weight: 800;
  color: var(--site-primary-color);
  min-width: 26px;
  text-align: center;
}

.sSiteCartMini {
  border: 1.5px dashed #e2e8f4;
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  background: #fafbff;
}

.sSiteCartMiniLeft {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sSiteCartMiniEmoji {
  font-size: 20px;
}

.sSiteCartMiniTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--site-primary-color);
}

.sSiteCartMiniSub {
  font-size: 11px;
  color: #8a96b8;
}

.sSiteCartMiniPrice {
  font-size: 20px;
  font-weight: 800;
  color: var(--site-primary-color);
}

.sSiteFeaturesRow {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.sSiteFeatureChip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #4a5578;
}

.sSiteFeatureIcon {
  font-size: 13px;
}

/* Card & CXO hero visuals */
.sSiteCardHero {
  background: linear-gradient(135deg, #0d1b4b, #1847d4);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
  min-height: 112px;
}

.sSiteCardHero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%);
}

.sSiteCardHeroLabel {
  background: white;
  border: 1px solid #e2e8f4;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #4a5578;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
}

.sSiteCxoHero {
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
  min-height: 122px;
}

.sSiteCxoHero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%,
      rgba(212, 175, 55, 0.15) 0%,
      transparent 60%);
}

.sSiteMetalCard {
  width: 162px;
  height: 100px;
  border-radius: 11px;
  background: linear-gradient(135deg,
      #c0c0c0 0%,
      #e8e8e8 30%,
      #a8a8a8 50%,
      #d4d4d4 70%,
      #c0c0c0 100%);
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  transform: rotate(-3deg);
  transition: transform 0.4s ease;
  flex-shrink: 0;
}

.sSiteMetalCard:hover {
  transform: rotate(0deg) scale(1.05);
}

.sSiteMetalCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 40%,
      rgba(255, 255, 255, 0.1) 70%,
      transparent 100%);
}

.sSiteMetalCardChip {
  position: absolute;
  top: 16px;
  left: 13px;
  width: 26px;
  height: 18px;
  background: linear-gradient(135deg, #d4af37, #f5d98a, #b8962e);
  border-radius: 3px;
}

.sSiteMetalCardName {
  position: absolute;
  bottom: 16px;
  left: 13px;
  font-size: 9px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.5px;
}

.sSiteMetalCardTitle {
  position: absolute;
  bottom: 7px;
  left: 13px;
  font-size: 8px;
  color: rgba(0, 0, 0, 0.5);
}

.sSiteGoldBadge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #d4af37, #f5d98a);
  color: #5a3e00;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.sSiteCxoTagline {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  position: relative;
  z-index: 1;
  max-width: 110px;
  line-height: 1.5;
}

.sSiteCxoTaglineAccent {
  color: #f5d98a;
  font-size: 18px;
  display: block;
  margin-bottom: 4px;
}

.sSiteAddonGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.sSiteAddonTile {
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  padding: 16px 14px;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
  background: #ffffff;
  position: relative;
}

.sSiteAddonTile:hover {
  border-color: var(--site-primary-color);
  box-shadow: 0 4px 20px rgba(24, 71, 212, 0.1);
}

.sSiteAddonTile.sSiteAddonOn {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
  box-shadow:
    0 0 0 1px var(--site-primary-color),
    0 4px 16px rgba(24, 71, 212, 0.12);
}

.sSiteAddonTopRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.sSiteAddonIconWrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--site-secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--site-primary-color);
  transition:
    background 0.2s,
    color 0.2s;
}

.sSiteAddonTile.sSiteAddonOn .sSiteAddonIconWrap {
  background: var(--site-primary-color);
  color: #fff;
}

.sSiteAddonCheck {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #e2e8f4;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
  transition: all 0.2s;
  flex-shrink: 0;
}

.sSiteAddonTile.sSiteAddonOn .sSiteAddonCheck {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
  color: #fff;
}

.sSiteAddonTitleRow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.sSiteAddonTitle {
  font-size: 13px;
  font-weight: 700;
  color: #000;
}

.sSiteAddonPill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: rgba(245, 90, 37, 0.1);
  color: var(--site-quaternary-color);
  border-radius: 5px;
  padding: 2px 7px;
  text-transform: uppercase;
}

.sSiteAddonDesc {
  font-size: 12px;
  color: #8a96b8;
  line-height: 1.5;
  margin-bottom: 8px;
}

.sSiteAddonPrice {
  font-size: 13px;
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteReviewLayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sSiteLeadBox {
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
}

.sSiteLeadRow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-bottom: 1px solid #e2e8f4;
}

.sSiteLeadRow:last-child {
  border-bottom: none;
}

.sSiteLeadIconWrap {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--site-secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-primary-color);
  font-size: 13px;
  flex-shrink: 0;
}

.sSiteLeadKey {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #8a96b8;
}

.sSiteLeadVal {
  font-size: 13px;
  font-weight: 600;
  color: #000;
}

/* ── Promo code ── */
.sSitePromoWrap {
  display: flex;
  margin-bottom: 10px;
}

.sSitePromoField {
  flex: 1;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f4;
  border-right: none;
  border-radius: 12px 0 0 12px;
  font-size: 13px;

  font-weight: 500;
  color: var(--site-primary-color);
  background: #fafbff;
  outline: none;
  transition: border-color 0.2s;
}

.sSitePromoField:focus {
  border-color: var(--site-primary-color);
}

.sSitePromoApply {
  padding: 0 20px;
  border-radius: 0 12px 12px 0;
  border: 1.5px solid #e2e8f4;
  border-left: none;
  background: var(--site-primary-color);
  color: #fff;

  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.sSitePromoApply:hover {
  background: var(--site-primary-color);
}

.sSitePromoChips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
}

.sSitePromoChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f4;
  background: #f4f6fb;
  font-size: 12px;
  font-weight: 700;
  color: #4a5578;
  cursor: pointer;
  transition: all 0.2s;
}

.sSitePromoChip:hover {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
  background: var(--site-secondary-color);
}

.sSitePromoChip.sSitePromoUsed {
  border-color: #17b26a;
  background: #e6f9f1;
  color: #1a7a40;
}

.sSitePromoFeedback {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  display: none;
}

.sSitePromoOk {
  display: block;
  color: #1a7a40;
}

.sSitePromoFail {
  display: block;
  color: #ef4444;
}

.sSiteOrderBox {
  background: #f4f6fb;
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  padding: 18px 16px;
}

.sSiteOrderBoxTitle {
  font-size: 14px;
  font-weight: 800;
  color: #000;
  margin-bottom: 14px;
}

.sSiteOrderPlanTag {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--site-secondary-color);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 13px;
}

.sSiteOrderDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--site-primary-color);
  flex-shrink: 0;
}

.sSiteOrderPlanLabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteOrderRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
}

.sSiteOrderRowLabel {
  color: #4a5578;
  font-weight: 500;
}

.sSiteOrderRowVal {
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteOrderRowDisc {
  color: #17b26a !important;
}

.sSiteOrderHr {
  border: none;
  border-top: 1px solid #e2e8f4;
  margin: 9px 0;
}

.sSiteOrderTotalRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 4px;
}

.sSiteOrderTotalLabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteOrderTotalAmt {
  font-size: 26px;
  font-weight: 800;
  color: #000;
  line-height: 1;
}

.sSiteOrderNote {
  font-size: 10px;
  color: #8a96b8;
  text-align: right;
  margin-top: 3px;
}

.sSiteTrustList {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
}

.sSiteTrustItem {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #8a96b8;
  font-weight: 500;
}

.sSiteTrustItem i {
  color: #17b26a;
  font-size: 12px;
}

.sSiteTerms {
  font-size: 11px;
  color: #8a96b8;
  line-height: 1.65;
  margin-bottom: 18px;
}

.sSiteTerms a {
  color: var(--site-primary-color);
  font-weight: 600;
  text-decoration: none;
}

.sSiteTerms a:hover {
  text-decoration: underline;
}

.sSiteSuccess {
  padding: 52px 28px;
  display: none;
  text-align: center;
}

.sSiteSuccess.sSiteSuccessOn {
  display: block;
  animation: sSiteRiseIn 0.5s ease both;
}

.sSiteSuccessOrb {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg,
      var(--site-tertiary-color) 0%,
      var(--site-primary-color) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #fff;
  margin: 0 auto 22px;
  box-shadow: 0 8px 28px rgba(24, 71, 212, 0.25);
  animation: sSiteSuccessBounce 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes sSiteSuccessBounce {
  from {
    transform: scale(0.5);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.sSiteSuccessTitle {
  font-size: 24px;
  font-weight: 800;
  color: var(--site-primary-color);
  margin-bottom: 8px;
}

.sSiteSuccessBody {
  font-size: 14px;
  color: #4a5578;
  line-height: 1.7;
  margin-bottom: 26px;
}

.sSiteSuccessEm {
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteBtnPrimary {
  width: 100%;
  background: linear-gradient(135deg,
      var(--site-primary-color) 0%,
      var(--site-tertiary-color) 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 16px 20px;

  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 6px 24px rgba(24, 71, 212, 0.28);
  transition: all 0.2s;
  margin-bottom: 11px;
  position: relative;
  overflow: hidden;
}

.sSiteBtnPrimary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.12) 0%,
      transparent 60%);
  pointer-events: none;
}

.sSiteBtnPrimary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(24, 71, 212, 0.38);
}

.sSiteBtnPrimary:active {
  transform: scale(0.98);
}

.sSiteBtnPrimaryLeft {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.sSiteBtnPrimaryTitle {
  font-size: 14px;
  font-weight: 700;
}

.sSiteBtnPrimarySub {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.7;
}

.sSiteBtnArrow {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.sSiteBtnRowSecondary {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 11px;
}

.sSiteBtnBack {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f4;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #4a5578;
  transition: all 0.2s;
  flex-shrink: 0;
  font-family: inherit;
}

.sSiteBtnBack:hover {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
  transform: translateX(-2px);
}

.sSiteBtnSecondary {
  flex: 1;
  background: transparent;
  border: 1.5px solid #e2e8f4;
  border-radius: 12px;
  padding: 12px 16px;

  font-size: 13px;
  font-weight: 600;
  color: #8a96b8;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.sSiteBtnSecondary:hover {
  border-color: #4a5578;
  color: #4a5578;
}

.sSiteBtnOutline {
  width: 100%;
  background: transparent;
  border: 2px dashed var(--site-primary-color);
  border-radius: 12px;
  padding: 13px 16px;

  font-size: 13px;
  font-weight: 700;
  color: var(--site-primary-color);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 11px;
}

.sSiteBtnOutline:hover {
  background: var(--site-secondary-color);
}

.sSiteSkipNote {
  text-align: center;
  font-size: 11px;
  color: #8a96b8;
  line-height: 1.6;
}

.sSiteSkipNoteStrong {
  color: #4a5578;
  font-weight: 600;
}

.sSiteCartBubble {
  position: fixed;
  bottom: 26px;
  right: 26px;
  background: var(--site-primary-color);
  color: white;
  padding: 12px 18px;
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(13, 27, 75, 0.3);
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  z-index: 1000;

  font-weight: 700;
  font-size: 14px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  animation: sSiteFadeUp 0.5s ease 0.5s both;
}

.sSiteCartBubble:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(13, 27, 75, 0.38);
}

.sSiteCartBubbleIcon {
  width: 28px;
  height: 28px;
  background: var(--site-secondary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.sSiteCartBubblePulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #17b26a;
  animation: sSitePulseGreen 2s ease infinite;
}

@keyframes sSitePulseGreen {
  0% {
    box-shadow: 0 0 0 0 rgba(23, 178, 106, 0.4);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(23, 178, 106, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(23, 178, 106, 0);
  }
}

.sSiteModalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.sSiteModalOverlay.sSiteActive {
  opacity: 1;
  pointer-events: auto;
}

.sSiteCartModal {
  position: fixed;
  bottom: 84px;
  right: 26px;
  width: 360px;
  background: white;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);
  border: 1px solid #e2e8f4;
  padding: 22px;
  z-index: 999;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: bottom right;
}

.sSiteCartModal.sSiteActive {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.sSiteCartModalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1.5px solid var(--site-secondary-color);
}

.sSiteCartModalTitle {
  font-size: 16px;
  font-weight: 800;
  color: var(--site-primary-color);
}

.sSiteCloseBtn {
  width: 30px;
  height: 30px;
  border: none;
  background: #f4f6fb;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a5578;
  font-size: 12px;
  transition: background 0.2s;
  font-family: inherit;
}

.sSiteCloseBtn:hover {
  background: var(--site-secondary-color);
  color: var(--site-primary-color);
}

.sSiteModalItem {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px dashed #e2e8f4;
  font-size: 13px;
}

.sSiteModalItem:last-child {
  border-bottom: none;
}

.sSiteModalItemName {
  font-weight: 600;
  color: var(--site-primary-color);
}

.sSiteModalItemPrice {
  font-weight: 700;
  color: var(--site-primary-color);
}

.sSiteModalTotalRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-top: 13px;
  border-top: 1.5px solid var(--site-secondary-color);
}

.sSiteModalTotalLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #8a96b8;
}

.sSiteModalTotal {
  font-size: 24px;
  font-weight: 800;
  color: var(--site-primary-color);
}

.sSiteSecureNote {
  text-align: center;
  font-size: 11px;
  color: #8a96b8;
  margin-top: 8px;
}

.sSiteFooter {
  font-size: 11px;
  color: #8a96b8;
  position: relative;
  z-index: 10;
}

@keyframes sSiteFadeDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

@keyframes sSiteFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

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

@media (max-width: 600px) {
  .sSiteContent {
    padding: 20px 18px 16px;
  }

  .sSiteActions {
    padding: 0 18px 24px;
  }

  .sSiteStepHeader {
    padding: 22px 18px 0;
  }

  .sSitePlanGrid {
    padding: 16px 18px;
    grid-template-columns: 1fr;
  }

  .sSitePlanCardFull {
    grid-column: 1;
  }

  .sSiteHeadline {
    font-size: 22px;
  }

  .sSiteBenefitsRow {
    flex-wrap: wrap;
  }

  .sSiteBenefitChip {
    min-width: calc(50% - 4px);
    flex: none;
  }

  .sSiteAddonGrid {
    grid-template-columns: 1fr;
  }

  .sSiteReviewLayout {
    grid-template-columns: 1fr;
  }

  .sSiteCartModal {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }

  .sSiteCartModal.sSiteActive {
    transform: translateY(0);
  }

  .sSiteCartBubble {
    bottom: 100px;
    right: 10px;
    justify-content: center;
    width: auto;
  }
}

/* checkout flow css ends 06 march 2026 */

.sSCheckoutField.is-invalid {
  border-color: #dc3545;
  background-color: #fff8f8;
}

.sSCheckoutField.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.sSitePromoChip.sSiteAddonTileSelected {
  background: linear-gradient(135deg,
      var(--site-primary-color) 0%,
      var(--site-tertiary-color) 100%) !important;
  color: white !important;
  border-color: var(--site-primary-color) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

.sSiteOptCard.sSiteOptCardSelected {
  border-color: var(--site-primary-color) !important;
  /* background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.1) 0%,
    rgba(118, 75, 162, 0.1) 100%
  ) !important; */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

.sSiteOptCard.sSiteOptCardSelected .sSiteOptCardCheck {
  opacity: 1;
  background: linear-gradient(135deg,
      var(--site-primary-color) 0%,
      var(--site-tertiary-color) 100%);
}

/* Error highlight for form fields */
input.error,
textarea.error,
select.error,
div.error {
  border: 1px solid #dc3545 !important;
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}

/* Error message text */
.bdPagesProOnboardFieldError,
.bdPagesOnboardFieldError {
  display: block !important;
  color: #dc3545 !important;
  font-size: 0.85rem;
  margin-top: 4px;
}

/* Profession suggestions dropdown */
.bdPagesProOnboardInputWrap {
  position: relative;
}

.bdPagesProOnboardSuggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bdPagesProOnboardSuggestionItem {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9rem;
}

.bdPagesProOnboardSuggestionItem:hover {
  background: #f0f0f0;
}

/* OTP Dialog */
.bdPagesProOnboardOtpOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdPagesProOnboardOtpDialog {
  background: #fff;
  border-radius: 16px;
  padding: 40px 32px;
  max-width: 460px;
  width: 90%;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.bdPagesProOnboardOtpClose {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #999;
}

.bdPagesProOnboardOtpIcon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.bdPagesProOnboardOtpTitle {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.bdPagesProOnboardOtpDesc {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.bdPagesProOnboardOtpPhone {
  font-weight: 600;
  color: #333;
}

.bdPagesProOnboardOtpInput {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  text-align: center;
  border: 2px solid #ddd;
  border-radius: 10px;
  outline: none;
}

.bdPagesProOnboardOtpInput:focus {
  border-color: #0055cc;
}

.bdPagesProOnboardOtpSubmit {
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  background: var(--bdOnboard-gold);
  color: #000000;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.bdPagesProOnboardOtpSubmit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Step 4: BizCard CTA buttons ── */
.bdPagesProOnboardBizCardActions {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.bdPagesProOnboardBizCardBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.bdPagesProOnboardBizCardBtn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  text-decoration: none;
}

.bdPagesProOnboardBizCardBtnPrimary {
  background: var(--site-primary-color);
  color: #fff;
  border: none;
}

.bdPagesProOnboardBizCardBtnOutline {
  background: transparent;
  color: var(--site-primary-color);
  border: 1.5px solid var(--site-primary-color);
}

/* ── Step 4: Upgrade band (above LinkedIn card) ── */
.bdPagesProOnboardUpgradeBand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin-bottom: 24px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--site-primary-color) 8%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--site-primary-color) 30%, transparent);
  flex-wrap: wrap;
}

.bdPagesProOnboardUpgradeBandLeft {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bdPagesProOnboardUpgradeBandIcon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--site-primary-color);
  color: #fff;
  font-size: 16px;
}

.bdPagesProOnboardUpgradeBandTitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--bdOnboard-text, #1a1a2e);
  line-height: 1.3;
  margin-bottom: 2px;
}

.bdPagesProOnboardUpgradeBandSub {
  font-size: 12px;
  color: var(--bdOnboard-silver, #64748b);
  line-height: 1.4;
}

.bdPagesProOnboardUpgradeBandBtn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  background: var(--site-primary-color);
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.bdPagesProOnboardUpgradeBandBtn:hover {
  opacity: 0.88;
  text-decoration: none;
  color: #fff;
}

/* ── Completion panel: button group ── */
.bdPagesProOnboardCompBtnGroup {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 20px;
}

.bdPagesProOnboardCompBtn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  border: none;
}

.bdPagesProOnboardCompBtn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.bdPagesProOnboardCompBtnPrimary {
  background: #9a7a2e;
  color: #fff;
}

.bdPagesProOnboardCompBtnOutline {
  background: transparent;
  color: #9a7a2e;
  border: 1.5px solid #9a7a2e;
}

/* ── Completion panel upgrade band (golden scheme) ── */
.bdPagesProOnboardCompUpgradeBand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  margin-top: 16px;
  border-radius: 14px;
  width: 100%;
  background: linear-gradient(135deg, #fdf8ee 0%, #fef3d0 100%);
  border: 1.5px solid #d4a843;
  flex-wrap: wrap;
  text-align: left;
}

.bdPagesProOnboardCompUpgradeBandLeft {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.bdPagesProOnboardCompUpgradeIcon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #c9922a, #e8b84b);
  color: #fff;
  font-size: 18px;
}

.bdPagesProOnboardCompUpgradeTitle {
  font-size: 13px;
  font-weight: 700;
  color: #7a5a1e;
  line-height: 1.3;
  margin-bottom: 3px;
}

.bdPagesProOnboardCompUpgradeSub {
  font-size: 12px;
  color: #a07830;
  line-height: 1.4;
}

.bdPagesProOnboardCompUpgradeBtn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, #c9922a, #e8b84b);
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(201, 146, 42, 0.35);
}

.bdPagesProOnboardCompUpgradeBtn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}

/* ============================================
   FLIPBOOK PAGE STYLES (/flipbook)
   ============================================ */

/* ── Hero Label ── */
.fbHeroLabel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  border: 1.5px solid var(--site-secondary-color);
  background: var(--site-secondary-color);
  padding: 0.35rem 0.9rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.fbLabelDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--site-primary-color);
  flex-shrink: 0;
}

.fbHeroSubtext {
  max-width: 480px;
  line-height: 1.8;
}

/* ── Trust Avatars ── */
.fbTrustAvatars {
  display: flex;
}

.fbAvatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-right: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
}

.fbAvatarA { background: var(--site-primary-color); }
.fbAvatarB { background: #e04010; }
.fbAvatarC { background: #ff7a52; }
.fbAvatarD { background: #c93e0f; }

/* ── Book Visual ── */
.fbBookScene {
  position: relative;
  width: 300px;
  height: 390px;
}

.fbBook {
  width: 100%;
  height: 100%;
  position: relative;
}

.fbBookBack {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 3px 12px 12px 3px;
  background: var(--site-secondary-color);
  border: 1px solid rgba(255, 87, 34, 0.15);
  transform: translateX(-8px) translateZ(0);
}

.fbBookCover {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 3px 12px 12px 3px;
  background: #fff;
  border: 1px solid rgba(255, 87, 34, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.8rem;
  box-shadow: 4px 6px 24px rgba(255, 87, 34, 0.12);
}

.fbCoverPattern {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 28px,
    rgba(255, 87, 34, 0.03) 28px,
    rgba(255, 87, 34, 0.03) 29px
  );
  pointer-events: none;
}

.fbCoverTag {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  font-weight: 600;
  margin-bottom: 0.8rem;
  position: relative;
}

.fbCoverTitle {
  font-size: 1.45rem;
  font-weight: 800;
  color: #1f1f1f;
  line-height: 1.2;
  margin-bottom: 0.4rem;
  position: relative;
}

.fbCoverSub {
  font-size: 0.78rem;
  color: #666;
  position: relative;
}

.fbCoverDivider {
  width: 36px;
  height: 2px;
  background: var(--site-primary-color);
  margin: 1rem 0;
  position: relative;
}

.fbCoverImages {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.fbImgBlock {
  border-radius: 4px;
  animation: fbShimmer 3s ease-in-out infinite;
}

.fbImgBlock:nth-child(1) { background: #faebe4; animation-delay: 0s; }
.fbImgBlock:nth-child(2) { background: #fde8df; animation-delay: 0.4s; }
.fbImgBlock:nth-child(3) { background: #fff0ea; animation-delay: 0.8s; }
.fbImgBlock:nth-child(4) { background: #fce5da; animation-delay: 1.2s; }

@keyframes fbShimmer {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.fbCoverFooter {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.fbPageDots {
  display: flex;
  gap: 3px;
}

.fbDot {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #e0e0e0;
}

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

/* ── Page Flip Animation ── */
.fbFlipPage {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  top: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  animation: fbFlipPage 6s ease-in-out infinite;
  pointer-events: none;
}

.fbFlipFront,
.fbFlipBack {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 0 12px 12px 0;
  border: 1px solid rgba(255, 87, 34, 0.12);
}

.fbFlipFront { background: #fff8f5; }
.fbFlipBack { background: #fff3ee; transform: rotateY(180deg); }

@keyframes fbFlipPage {
  0%, 30% { transform: rotateY(0deg); }
  50%, 80% { transform: rotateY(-160deg); }
  100% { transform: rotateY(0deg); }
}

/* ── Floating Badges ── */
.fbBadge {
  position: absolute;
  background: #fff;
  border: 1.5px solid var(--site-secondary-color);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  font-size: 0.75rem;
  box-shadow: 0 4px 16px rgba(255, 87, 34, 0.1);
  animation: fbFloat 5s ease-in-out infinite;
}

.fbBadge1 { top: -18px; right: -50px; animation-delay: 0s; }
.fbBadge2 { bottom: 40px; right: -65px; animation-delay: 2.5s; }
.fbBadge3 { bottom: -10px; left: -45px; animation-delay: 1.2s; }

@keyframes fbFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-7px); }
}

.fbBadgeValue {
  display: block;
  font-weight: 700;
  color: var(--site-primary-color);
  font-size: 1rem;
}

.fbBadgeLabel {
  color: #666;
  font-size: 0.7rem;
}

/* ── Ticker ── */
.fbTicker {
  border-top: 1px solid #ffe8e0;
  border-bottom: 1px solid #ffe8e0;
  padding: 0.9rem 0;
  overflow: hidden;
  background: var(--site-secondary-color);
}

.fbTickerTrack {
  display: flex;
  gap: 2.5rem;
  animation: fbTicker 22s linear infinite;
  white-space: nowrap;
}

.fbTickerItem {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  font-weight: 500;
}

.fbTickerDot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--site-primary-color);
  flex-shrink: 0;
}

@keyframes fbTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Section Label ── */
.fbSectionLabel {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.fbSectionLabelCenter {
  display: flex;
  justify-content: center;
}

.fbTextRelaxed {
  line-height: 1.85;
}

/* ── What Is Cards ── */
.fbWhatCards {
  border: 1.5px solid #ffe8e0;
  border-radius: 14px;
  overflow: hidden;
}

.fbWhatCard {
  padding: 1.6rem 1.8rem;
  border-bottom: 1px solid #ffe8e0;
  background: #fff;
  transition: background 0.2s;
}

.fbWhatCard:last-child {
  border-bottom: none;
}

.fbWhatCard:hover {
  background: #fff8f6;
}

.fbWhatNum {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

/* ── Features Grid ── */
.fbFeaturesSection {
  background: #fff8f6;
  border-top: 1px solid #ffe8e0;
  border-bottom: 1px solid #ffe8e0;
}

.fbFeaturesGrid {
  border: 1.5px solid #ffe8e0;
  border-radius: 14px;
  overflow: hidden;
}

.fbFeatureCard {
  padding: 2rem;
  background: #fff;
  border-right: 1px solid #ffe8e0;
  border-bottom: 1px solid #ffe8e0;
  transition: background 0.2s;
}

.fbFeatureCard:hover {
  background: #fff8f6;
}

.fbFeatureCard:nth-child(3n) {
  border-right: none;
}

.fbFeatureCard:nth-last-child(-n+3) {
  border-bottom: none;
}

.fbFeatureIcon {
  width: 44px;
  height: 44px;
  border: 1.5px solid #ffe8e0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--site-secondary-color);
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
}

/* ── Use Cases ── */
.fbUsecaseCard {
  border: 1.5px solid #ffe8e0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.fbUsecaseCard:hover {
  transform: translateY(-4px);
  border-color: var(--site-primary-color);
  box-shadow: 0 8px 28px rgba(255, 87, 34, 0.12);
}

.fbUsecaseThumb {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.fbUsecaseThumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.8), transparent 60%);
}

.fbUc1 { background: linear-gradient(135deg, #ffe0d4, #ffc4a8); }
.fbUc2 { background: linear-gradient(135deg, #ffecd6, #ffd4a8); }
.fbUc3 { background: linear-gradient(135deg, #ffddd4, #ffb89a); }
.fbUc4 { background: linear-gradient(135deg, #ffe8d4, #ffcfaa); }

.fbUsecaseIcon {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border: 1.5px solid rgba(255, 87, 34, 0.25);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  font-size: 1.4rem;
}

/* ── How It Works ── */
.fbHowSection {
  background: #fff8f6;
  border-top: 1px solid #ffe8e0;
  border-bottom: 1px solid #ffe8e0;
}

.fbStepsRow {
  position: relative;
}

.fbStepsLine {
  position: absolute;
  top: 28px;
  left: 22%;
  right: 22%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--site-secondary-color), var(--site-secondary-color), transparent);
  z-index: 0;
}

.fbStep {
  padding: 0 1.5rem;
}

.fbStepNum {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--site-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--site-primary-color);
  margin: 0 auto 1.5rem;
  background: #fff;
  position: relative;
  z-index: 1;
}

/* ── NFC Mockup ── */
.fbNfcMockup {
  position: relative;
  width: 280px;
  height: 280px;
}

.fbNfcCard {
  width: 270px;
  height: 168px;
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid #ffe8e0;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(255, 87, 34, 0.1);
  transform: rotate(-4deg);
}

.fbNfcPattern {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 24px,
    rgba(255, 87, 34, 0.03) 24px, rgba(255, 87, 34, 0.03) 25px
  );
}

.fbNfcName {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1f1f1f;
  position: relative;
}

.fbNfcRole {
  font-size: 0.75rem;
  color: #888;
  position: relative;
}

.fbNfcChip {
  position: absolute;
  bottom: 1.3rem;
  right: 1.5rem;
  width: 32px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
}

.fbNfcBrand {
  position: absolute;
  bottom: 1.3rem;
  left: 1.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--site-primary-color);
  font-weight: 700;
  text-transform: uppercase;
}

.fbTapRipple {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 87, 34, 0.45);
  animation: fbRipple 2.5s ease-out infinite;
}

.fbTapRipple::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(255, 87, 34, 0.2);
  animation: fbRipple 2.5s ease-out infinite 0.6s;
}

@keyframes fbRipple {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

.fbPhone {
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 100px;
  height: 180px;
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid #ffe8e0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: rotate(3deg);
  box-shadow: 0 4px 20px rgba(255, 87, 34, 0.08);
}

.fbPhoneNotch {
  height: 20px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fbPhoneBar {
  width: 28px;
  height: 4px;
  border-radius: 3px;
  background: #e0e0e0;
}

.fbPhoneScreen {
  flex: 1;
  padding: 7px;
  background: #fff8f6;
}

.fbPhonePage {
  border-radius: 5px;
  height: 100%;
  background: #fff;
  border: 1px solid #ffe8e0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
}

.fbPhoneLine {
  width: 80%;
  height: 4px;
  border-radius: 2px;
  background: #e8e8e8;
}

.fbPhoneLineAccent {
  background: var(--site-secondary-color);
  border: 1px solid rgba(255, 87, 34, 0.3);
}

.fbPhoneLineShort {
  width: 50%;
}

/* ── CTA Section ── */
.fbCtaSection {
  background: var(--site-secondary-color);
  border-top: 1px solid #ffe8e0;
  border-bottom: 1px solid #ffe8e0;
}

.fbCtaSubtext {
  max-width: 440px;
  line-height: 1.8;
}

/* ============================================
   ONELINK PAGE STYLES (/onelink)
   ============================================ */

/* ── Hero ── */
/* .olHeroSection {
  background: #faf8f5;
  padding-top: 5rem;
} */

.olHeroInner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 4rem 4rem 5rem;
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  gap: 4rem;
}

.olHeroEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  margin-bottom: 2rem;
}

.olHeroTitle {
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  font-weight: 800;
  line-height: 0.97;
  letter-spacing: -0.03em;
  color: #1a1714;
  margin-bottom: 1.8rem;
}

.olHeroTitleAccent {
  color: var(--site-primary-color);
  display: block;
}

.olHeroTitleOutline {
  -webkit-text-stroke: 2px #1a1714;
  color: transparent;
  display: block;
}

.olHeroBody {
  font-size: 1.05rem;
  font-weight: 300;
  color: #4a4640;
  line-height: 1.8;
  max-width: 480px;
  margin-bottom: 2.8rem;
}

.olHeroActions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.olBtnRound {
  border-radius: 100px !important;
}

.olHeroStats {
  margin-top: 3.5rem;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.olStatNum {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1a1714;
  line-height: 1;
}

.olStatLabel {
  font-size: 0.78rem;
  color: #8a857e;
  margin-top: 0.2rem;
  font-weight: 300;
}

.olStatDivider {
  width: 1px;
  height: 40px;
  background: rgba(20, 18, 16, 0.2);
  flex-shrink: 0;
}

/* ── Phone Mockup ── */
.olPhoneWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.olPhoneOuter {
  width: 270px;
  background: #1a1714;
  border-radius: 38px;
  padding: 10px;
  position: relative;
  box-shadow: 0 40px 80px rgba(20, 18, 16, 0.18), 0 8px 24px rgba(20, 18, 16, 0.1);
}

.olPhoneInner {
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  min-height: 540px;
  position: relative;
}

.olPhoneStatus {
  background: #1a1714;
  padding: 10px 24px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.olPhoneNotch {
  width: 66px;
  height: 20px;
  background: #1a1714;
  border-radius: 0 0 12px 12px;
}

.olPhoneContent {
  padding: 0 0 20px;
  background: #f9f7f4;
}

.olPhoneCover {
  height: 110px;
  background: linear-gradient(135deg, #1a1714, #2d2a24);
  position: relative;
  overflow: hidden;
}

.olPhoneCoverPattern {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 14px,
    rgba(255, 87, 34, 0.08) 14px, rgba(255, 87, 34, 0.08) 15px
  );
}

.olPhoneAvatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(135deg, var(--site-primary-color), #f0a060);
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
}

.olPhoneProfile {
  padding: 40px 18px 10px;
  text-align: center;
}

.olPhoneName {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a1714;
}

.olPhoneHandle {
  font-size: 0.7rem;
  color: #8a857e;
  margin-top: 2px;
}

.olPhoneBio {
  font-size: 0.7rem;
  color: #4a4640;
  margin-top: 6px;
  line-height: 1.5;
  padding: 0 4px;
}

.olPhoneSocials {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.olSocialIcon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(20, 18, 16, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: #4a4640;
  background: #fff;
}

.olPhoneLinks {
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.olPhoneLinkBtn {
  background: #fff;
  border: 1px solid rgba(20, 18, 16, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  text-decoration: none;
}

.olPhoneLinkBtn:hover {
  transform: translateY(-1px);
  border-color: rgba(20, 18, 16, 0.2);
}

.olLinkIcon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.olLinkIconOrange { background: #fff0eb; }
.olLinkIconGreen  { background: #ebf5eb; }
.olLinkIconBlue   { background: #ebf0ff; }
.olLinkIconPurple { background: #f2ebff; }

.olLinkText { flex: 1; }

.olLinkTitle {
  font-size: 0.72rem;
  font-weight: 500;
  color: #1a1714;
  line-height: 1.2;
}

.olLinkSub {
  font-size: 0.62rem;
  color: #8a857e;
  margin-top: 1px;
}

.olLinkArrow {
  font-size: 0.8rem;
  color: #8a857e;
}

.olPhoneBigdot {
  text-align: center;
  margin-top: 10px;
  font-size: 0.58rem;
  color: #8a857e;
  letter-spacing: 0.06em;
}

/* ── Phone Floats ── */
.olPhoneFloat {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(20, 18, 16, 0.2);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.75rem;
  box-shadow: 0 4px 16px rgba(20, 18, 16, 0.08);
  animation: olFloatY 5s ease-in-out infinite;
}

.olPhoneFloatF1 { top: -18px; right: -58px; animation-delay: 0s; }
.olPhoneFloatF2 { bottom: 60px; right: -62px; animation-delay: 2s; }
.olPhoneFloatF3 { bottom: 0; left: -52px; animation-delay: 1s; }

@keyframes olFloatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.olFloatVal {
  font-weight: 700;
  font-size: 1rem;
  color: #1a1714;
  letter-spacing: -0.02em;
  display: block;
}

.olFloatLbl {
  font-size: 0.66rem;
  color: #8a857e;
  font-weight: 300;
}

/* ── Strip / Ticker ── */
.olStrip {
  background: #1a1714;
  padding: 0.95rem 0;
  overflow: hidden;
}

.olStripInner {
  display: flex;
  gap: 2.5rem;
  animation: olStripScroll 22s linear infinite;
  white-space: nowrap;
}

.olStripItem {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.4);
}

.olStripDot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--site-primary-color);
  flex-shrink: 0;
}

@keyframes olStripScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Shared Section Layout ── */
.olSectionWrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 6rem 4rem;
}

.olEyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  font-weight: 500;
  margin-bottom: 1rem;
}

.olSectionTitle {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.07;
  color: #1a1714;
  margin-bottom: 1.2rem;
}

/* ── VS Section ── */
.olVsSection {
  background: #f0ede7;
  border-top: 1px solid rgba(20, 18, 16, 0.1);
  border-bottom: 1px solid rgba(20, 18, 16, 0.1);
}

.olVsGrid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 3.5rem;
}

.olVsColHead {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.olVsColHeadAccent { color: var(--site-primary-color); }
.olVsColHeadMuted  { color: #8a857e; }

.olVsColSub {
  font-size: 0.8rem;
  color: #8a857e;
  margin-bottom: 2rem;
  font-weight: 300;
}

.olVsRow {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.9rem 0;
  border-bottom: 0.5px solid rgba(20, 18, 16, 0.1);
  font-size: 0.875rem;
}

.olVsRow:last-child { border-bottom: none; }

.olVsIcon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.olVsIconYes { background: #e8f5e9; color: #2e7d32; }
.olVsIconNo  { background: #ffebee; color: #c62828; }
.olVsIconMid { background: #fff8e1; color: #f57f17; }

.olVsText {
  color: #4a4640;
  line-height: 1.5;
  font-weight: 300;
}

.olVsText strong {
  color: #1a1714;
  font-weight: 500;
}

.olVsDivider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-top: 2rem;
  color: #8a857e;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.olVsDividerLine {
  width: 1px;
  flex: 1;
  background: rgba(20, 18, 16, 0.2);
}

.olVsBadge {
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--site-primary-color);
  letter-spacing: -0.02em;
}

/* ── Features Grid ── */
.olFeaturesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: rgba(20, 18, 16, 0.1);
  border: 1px solid rgba(20, 18, 16, 0.1);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 3.5rem;
}

.olFeatCard {
  background: #faf8f5;
  padding: 2.2rem;
  transition: background 0.2s;
}

.olFeatCard:hover { background: #fff; }

.olFeatNum {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8a857e;
  margin-bottom: 1.6rem;
}

.olFeatAccentBar {
  width: 24px;
  height: 2px;
  background: var(--site-primary-color);
  margin-bottom: 1.1rem;
}

.olFeatTitle {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1a1714;
  margin-bottom: 0.6rem;
}

.olFeatDesc {
  font-size: 0.875rem;
  color: #4a4640;
  line-height: 1.7;
  font-weight: 300;
}

/* ── Use Cases ── */
.olUcSection {
  background: #f0ede7;
  border-top: 1px solid rgba(20, 18, 16, 0.1);
  border-bottom: 1px solid rgba(20, 18, 16, 0.1);
}

.olUcGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.olUcCard {
  background: #fff;
  border: 1px solid rgba(20, 18, 16, 0.1);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.olUcCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(20, 18, 16, 0.1);
}

.olUcThumb {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.olUc1 { background: #fff0eb; }
.olUc2 { background: #f0f5ff; }
.olUc3 { background: #f0fff4; }
.olUc4 { background: #fdf5e0; }

.olUcEmoji {
  font-size: 2rem;
  position: relative;
  z-index: 1;
}

.olUcBody { padding: 1.1rem 1.3rem 1.4rem; }

.olUcTitle {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1a1714;
  margin-bottom: 0.4rem;
}

.olUcDesc {
  font-size: 0.78rem;
  color: #4a4640;
  font-weight: 300;
  line-height: 1.6;
}

/* ── How It Works ── */
.olHowGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.olHowStepsList {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2.5rem;
}

.olHowStep {
  display: flex;
  gap: 1.4rem;
  padding: 1.8rem 0;
  border-bottom: 0.5px solid rgba(20, 18, 16, 0.1);
  transition: padding-left 0.2s;
  cursor: default;
}

.olHowStep:last-child { border-bottom: none; }
.olHowStep:hover { padding-left: 0.5rem; }

.olHowStepNum {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--site-primary-color);
  flex-shrink: 0;
  padding-top: 3px;
  min-width: 28px;
  letter-spacing: 0.05em;
}

.olHowStepTitle {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1a1714;
  margin-bottom: 0.4rem;
}

.olHowStepDesc {
  font-size: 0.875rem;
  color: #4a4640;
  font-weight: 300;
  line-height: 1.7;
}

.olHowVisual {
  background: #f0ede7;
  border: 1px solid rgba(20, 18, 16, 0.1);
  border-radius: 20px;
  padding: 2.4rem;
  position: relative;
  overflow: hidden;
}

.olHowVisualUrl {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1a1714;
  line-height: 1.2;
  margin-bottom: 1.4rem;
}

.olHowVisualUrlAccent { color: var(--site-primary-color); }

.olHowVisualTags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.olHowTag {
  background: #fff;
  border: 1px solid rgba(20, 18, 16, 0.2);
  border-radius: 100px;
  padding: 0.3rem 0.85rem;
  font-size: 0.75rem;
  color: #4a4640;
}

.olHowTagAccent {
  background: var(--site-primary-color);
  color: #fff;
  border-color: var(--site-primary-color);
}

/* ── NFC Section (dark) ── */
.olNfcSection {
  background: #1a1714;
}

.olNfcInner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 6rem 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.olNfcEyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  font-weight: 500;
  margin-bottom: 1rem;
}

.olNfcTitle {
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #f5f2ed;
  margin-bottom: 1.3rem;
}

.olNfcBody {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(245, 242, 237, 0.6);
  line-height: 1.8;
  max-width: 440px;
  margin-bottom: 2.4rem;
}

.olBtnLight {
  display: inline-block;
  background: #f5f2ed;
  color: #1a1714;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.9rem 2.2rem;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}

.olBtnLight:hover {
  background: #fff;
  transform: translateY(-2px);
  color: #1a1714;
}

.olNfcVisual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.olNfcCardMock {
  width: 230px;
  height: 142px;
  background: #1e1c18;
  border-radius: 12px;
  border: 0.5px solid rgba(245, 242, 237, 0.12);
  padding: 1.3rem;
  position: relative;
  overflow: hidden;
  transform: rotate(-4deg);
  flex-shrink: 0;
}

.olNfcCardMock::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 18px,
    rgba(255, 87, 34, 0.04) 18px, rgba(255, 87, 34, 0.04) 19px
  );
}

.olNfcCardName {
  font-size: 0.88rem;
  font-weight: 700;
  color: #f5f2ed;
  position: relative;
}

.olNfcCardRole {
  font-size: 0.68rem;
  color: rgba(245, 242, 237, 0.4);
  font-weight: 300;
  position: relative;
}

.olNfcCardBrand {
  position: absolute;
  bottom: 1.1rem;
  left: 1.3rem;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-primary-color);
  font-weight: 600;
}

.olNfcArrowWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.olNfcArrow {
  font-size: 1.4rem;
  color: rgba(245, 242, 237, 0.3);
}

.olNfcArrowLabel {
  font-size: 0.62rem;
  color: rgba(245, 242, 237, 0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

.olMiniPhone {
  width: 86px;
  height: 148px;
  background: #2a2723;
  border-radius: 16px;
  border: 0.5px solid rgba(245, 242, 237, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: rotate(2deg);
  flex-shrink: 0;
}

.olMiniPhoneBar {
  height: 13px;
  background: #1a1814;
  display: flex;
  align-items: center;
  justify-content: center;
}

.olMiniBar {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: #2a2723;
}

.olMiniScreen {
  flex: 1;
  background: #f9f7f4;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.olMiniAvatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--site-primary-color), #f0a060);
  margin: 3px auto 2px;
}

.olMiniName {
  width: 58%;
  height: 4px;
  border-radius: 3px;
  background: #1a1714;
  margin: 0 auto;
}

.olMiniBtn {
  height: 13px;
  border-radius: 7px;
  background: #fff;
  border: 0.5px solid rgba(20, 18, 16, 0.1);
}

/* ── CTA Section ── */
.olCtaSection {
  background: #faf8f5;
  border-top: 1px solid rgba(20, 18, 16, 0.1);
}

.olCtaInner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 7rem 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.olCtaTitle {
  font-size: clamp(2.4rem, 3.5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: #1a1714;
  margin-bottom: 1.3rem;
}

.olCtaTitleOutline {
  -webkit-text-stroke: 2px #1a1714;
  color: transparent;
}

.olCtaBody {
  font-size: 1rem;
  font-weight: 300;
  color: #4a4640;
  line-height: 1.8;
  margin-bottom: 0;
  max-width: 420px;
}

.olCtaRight {
  background: #f0ede7;
  border: 1px solid rgba(20, 18, 16, 0.2);
  border-radius: 20px;
  padding: 2.4rem;
}

.olCtaFormLabel {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1714;
  margin-bottom: 0.35rem;
}

.olCtaFormSub {
  font-size: 0.8rem;
  color: #8a857e;
  margin-bottom: 1.6rem;
  font-weight: 300;
}

.olCtaInputRow {
  display: flex;
  gap: 0;
  border: 1px solid rgba(20, 18, 16, 0.2);
  border-radius: 100px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 0.8rem;
}

.olCtaInputPrefix {
  padding: 0.8rem 0 0.8rem 1.3rem;
  font-size: 0.9rem;
  color: #8a857e;
  white-space: nowrap;
  display: flex;
  align-items: center;
  font-weight: 300;
}

.olCtaInput {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.8rem 0.5rem;
  font-size: 0.9rem;
  color: #1a1714;
  background: transparent;
  font-weight: 400;
}

.olCtaSubmit {
  padding: 0.8rem 1.3rem;
  background: var(--site-primary-color);
  color: #fff;
  border: none;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 100px;
  margin: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.olCtaSubmit:hover { background: var(--site-quaternary-color); }

.olCtaLinkHint {
  font-size: 0.74rem;
  color: #8a857e;
  margin-bottom: 1.3rem;
}

.olCtaLinkHintBold { color: #1a1714; }

.olCtaFeatList {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.olCtaFeatItem {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: #4a4640;
  font-weight: 300;
}

.olCtaFeatDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--site-primary-color);
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .olHeroInner {
    grid-template-columns: 1fr;
    padding: 3rem 2rem 4rem;
  }

  .olPhoneWrap { display: none; }

  .olSectionWrap { padding: 4.5rem 2rem; }

  .olVsGrid { grid-template-columns: 1fr; }
  .olVsDivider { display: none; }

  .olFeaturesGrid { grid-template-columns: 1fr 1fr; }

  .olUcGrid { grid-template-columns: 1fr 1fr; }

  .olHowGrid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .olNfcInner {
    grid-template-columns: 1fr;
    padding: 4.5rem 2rem;
  }

  .olNfcVisual { display: none; }

  .olCtaInner {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 4.5rem 2rem;
  }

  .olHeroStats {
    flex-wrap: wrap;
    gap: 2rem;
  }
}

@media (max-width: 640px) {
  .olFeaturesGrid { grid-template-columns: 1fr; }
  .olUcGrid { grid-template-columns: 1fr; }
  .olStatDivider { display: none; }
}

/* ============================================
   SHOP PAGE (/shop)
   ============================================ */
:root {
  --shopNavy: #1c2d64;
  --shopNavyDeep: #131f47;
  --shopNavyNight: #0b1230;
  --shopBlue: #2255e8;
  --shopBlueBright: #3a6cff;
  --shopOrange: #f15a25;
  --shopOrangeWarm: #ff7a3d;
  --shopOrangeSoft: #fff1e9;
  --shopCream: #fbf6f0;
  --shopCreamDeep: #f4ece1;
  --shopGreen: #21d4a8;
  --shopGreenDeep: #1d8b8e;
  --shopGold: #ffc857;
  --shopPurple: #b65cdc;
  --shopInk: #0d1428;
  --shopInkSoft: #2a3556;
  --shopMuted: #6b748f;
  --shopLine: #e6e9f2;
  --shopLineSoft: #f0f2f8;
  --shopBg: #fafbff;
  --shopShadowSm: 0 1px 2px rgba(11, 18, 48, 0.06), 0 2px 6px rgba(11, 18, 48, 0.04);
  --shopShadowMd: 0 4px 12px rgba(11, 18, 48, 0.08), 0 12px 32px rgba(11, 18, 48, 0.08);
  --shopShadowLg: 0 24px 60px rgba(11, 18, 48, 0.18);
  --shopRadiusSm: 10px;
  --shopRadiusMd: 16px;
  --shopRadiusLg: 24px;
  --shopRadiusPill: 999px;
  --shopNavH: 70px;
}

app-shop {
  display: block;
  background: var(--shopBg);
  color: var(--shopInk);
  font-family: var(--site-primary-font);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

app-shop a { color: inherit; text-decoration: none; }
app-shop button { font-family: inherit; cursor: pointer; }

/* ====== PROMO BANNER ====== */
.shopPromoBanner {
  background: linear-gradient(135deg, #f15a25 0%, #ff7a3d 50%, #f15a25 100%);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 16px;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.005em;
}
.shopPromoBanner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  opacity: 0.5;
}
.shopPromoInner {
  position: relative;
  gap: 14px;
}
.shopPromoIcon {
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}
.shopPromoText {
  gap: 8px;
}
.shopPromoText strong {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.shopPromoDivider {
  opacity: 0.4;
  font-weight: 300;
}
.shopPromoCta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #d6431a;
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12.5px;
  transition: transform 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.shopPromoCta:hover {
  transform: translateX(2px);
  background: #fff5ee;
  color: #d6431a;
}
.shopPromoCta svg { transition: transform 0.2s ease; }
.shopPromoCta:hover svg { transform: translateX(2px); }
@media (max-width: 600px) {
  .shopPromoBanner { padding: 9px 14px; font-size: 12.5px; }
  .shopPromoInner { gap: 10px; }
  .shopPromoDivider { display: none; }
  .shopPromoText { gap: 6px; }
}

/* ====== NAV ====== */
.shopNav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--shopLine);
  padding: 13px 0;
  height: var(--shopNavH);
}
.shopNavInner {
  height: 100%;
}
.shopNavLogo img {
  height: 32px;
  width: auto;
  display: block;
}
.shopNavSearch {
  position: relative;
  max-width: 540px;
}
.shopNavSearch input.form-control {
  width: 100%;
  padding: 10px 16px 10px 42px !important;
  border: 1.5px solid var(--shopLine);
  font-size: 14px;
  background: var(--shopBg);
  color: var(--shopInk);
  outline: none;
  transition: all 0.2s ease;
  box-shadow: none;
  height: auto;
}
.shopNavSearch input.form-control:focus {
  border-color: var(--shopOrange);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(241, 90, 37, 0.08);
}
.shopNavSearchIcon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--shopMuted);
  pointer-events: none;
  z-index: 2;
}
.shopNavLink {
  font-size: 14px;
  font-weight: 500;
  color: var(--shopInkSoft);
  padding: 8px 14px;
  border-radius: var(--shopRadiusPill);
  transition: background 0.2s ease, color 0.2s ease;
}
.shopNavLink:hover {
  background: var(--shopCream);
  color: var(--shopNavy);
}
.shopNavCart {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--shopCream);
  color: var(--shopNavy);
  transition: background 0.2s ease;
}
.shopNavCart:hover { background: var(--shopOrangeSoft); }
.shopNavCartCount {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 19px;
  height: 19px;
  background: var(--shopOrange);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.shopNavGetStarted {
  background: var(--shopNavy);
  color: #fff;
  padding: 9px 18px;
  border-radius: var(--shopRadiusPill);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.2s ease;
  display: inline-flex;
  align-items: center;
}
.shopNavGetStarted:hover {
  background: var(--shopBlue);
  color: #fff;
}

/* ====== HEADER ====== */
.shopHeader {
  background: linear-gradient(135deg, var(--shopNavyDeep) 0%, var(--shopNavy) 100%);
  color: #fff;
  padding: 56px 0 40px;
  position: relative;
  overflow: hidden;
}
.shopHeader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.shopHeader::after {
  content: "";
  position: absolute;
  top: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(241, 90, 37, 0.25), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.shopHeaderInner { position: relative; }
.shopBreadcrumb {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 18px;
}
.shopBreadcrumb a { color: rgba(255, 255, 255, 0.65); }
.shopBreadcrumb a:hover { color: #fff; }
.shopBreadcrumbCurrent { color: #fff; font-weight: 600; }
.shopBreadcrumbSep { color: rgba(255, 255, 255, 0.3); }
.shopTitleRow { gap: 30px; }
.shopTitle {
  font-family: var(--site-secondary-font);
  font-weight: 500;
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #fff;
}
.shopTitle em { font-style: italic; color: var(--shopOrange); }
.shopSub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 520px;
  line-height: 1.5;
}
.shopStats { gap: 32px; }
.shopStat { text-align: right; }
.shopStatNum {
  font-family: var(--site-secondary-font);
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
}
.shopStatUnit {
  color: var(--shopOrange);
  font-family: var(--site-primary-font);
  font-size: 16px;
}
.shopStatLbl {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 6px;
}
@media (max-width: 768px) {
  .shopStats { width: 100%; gap: 20px; }
  .shopStat { text-align: left; }
}

/* ====== TOOLBAR ====== */
.shopToolbar {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--shopLine);
  padding: 16px 0;
  position: sticky;
  top: var(--shopNavH);
  z-index: 70;
  backdrop-filter: blur(10px);
}
.shopToolbarMobileBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--shopLine);
  border-radius: var(--shopRadiusPill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--shopNavy);
  background: #fff;
  transition: border-color 0.2s ease;
}
.shopToolbarMobileBtn:hover { border-color: var(--shopNavy); }
.shopToolbarResults {
  font-size: 13.5px;
  color: var(--shopMuted);
}
.shopToolbarResults strong { color: var(--shopInk); font-weight: 600; }
.shopToolbarSort .form-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--shopLine);
  background-color: #fff;
  padding: 8px 32px 8px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--shopNavy);
  cursor: pointer;
  outline: none;
  width: auto;
  min-width: 180px;
  box-shadow: none;
}
.shopViewToggle {
  background: var(--shopCream);
  border-radius: var(--shopRadiusPill);
  padding: 4px;
  border: 1px solid var(--shopLine);
}
.shopViewBtn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--shopMuted);
  background: transparent;
  border: none;
  transition: all 0.2s ease;
}
.shopViewBtnActive { background: var(--shopNavy); color: #fff; }

/* ====== BODY ====== */
.shopBody {
  padding: 32px 0 80px;
}

/* ====== SIDEBAR ====== */
.shopSidebar {
  position: sticky;
  top: calc(var(--shopNavH) + 70px);
  max-height: calc(100vh - var(--shopNavH) - 90px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--shopLine) transparent;
}
.shopSidebar::-webkit-scrollbar { width: 4px; }
.shopSidebar::-webkit-scrollbar-thumb { background: var(--shopLine); border-radius: 2px; }
.shopSidebarHead {
  font-family: var(--site-primary-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shopMuted);
  padding: 0 12px;
  margin-bottom: 12px;
}
.shopCatList { margin: 0 0 24px; padding: 0; }
.shopCatItem { margin-bottom: 2px; }
.shopCatLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--shopRadiusMd);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--shopInkSoft);
  transition: all 0.2s ease;
}
.shopCatLink:hover {
  background: var(--shopCream);
  color: var(--shopNavy);
}
.shopCatLinkActive {
  background: var(--shopNavy) !important;
  color: #fff !important;
}
.shopCatLinkActive .shopCatCount {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.shopCatLinkActive .shopCatIcon {
  background: rgba(255, 255, 255, 0.15);
  color: var(--shopOrange);
}
.shopCatLinkLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.shopCatIcon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--shopCreamDeep);
  color: var(--shopNavy);
  transition: all 0.2s ease;
}
.shopCatLink:hover .shopCatIcon {
  background: var(--shopOrangeSoft);
  color: var(--shopOrange);
}
.shopCatName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shopCatCount {
  font-size: 11.5px;
  font-weight: 700;
  background: var(--shopCream);
  color: var(--shopMuted);
  padding: 2px 8px;
  border-radius: var(--shopRadiusPill);
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.shopSidebarDivider {
  border: none;
  height: 1px;
  background: var(--shopLine);
  margin: 4px 14px 16px;
}
.shopHelpCard {
  background: linear-gradient(135deg, var(--shopOrangeSoft), #ffe4d0);
  border-radius: var(--shopRadiusMd);
  padding: 22px;
  border: 1px solid rgba(241, 90, 37, 0.2);
  margin: 0 6px;
}
.shopHelpCardIcon {
  width: 36px;
  height: 36px;
  background: var(--shopOrange);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.shopHelpCard h4 {
  font-family: var(--site-secondary-font);
  font-size: 19px;
  font-weight: 600;
  color: var(--shopNavy);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.shopHelpCard p {
  font-size: 12.5px;
  color: var(--shopInkSoft);
  line-height: 1.5;
  margin: 0 0 14px;
}
.shopHelpBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--shopNavy);
  color: #fff;
  padding: 9px 14px;
  border-radius: var(--shopRadiusPill);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.2s ease;
}
.shopHelpBtn:hover {
  background: var(--shopBlue);
  color: #fff;
}
.shopSidebarOffcanvas {
  width: 320px;
  max-width: 90%;
}
.shopSidebarCloseTitle {
  font-family: var(--site-secondary-font);
  font-size: 22px;
  font-weight: 600;
  color: var(--shopNavy);
}

/* ====== MAIN ====== */
.shopMain { min-width: 0; }
.shopCatSection {
  margin-bottom: 56px;
  scroll-margin-top: calc(var(--shopNavH) + 80px);
}
.shopCatSectionHead {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--shopLine);
}
.shopCatSectionIcon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.shopCsIcon1 { background: linear-gradient(135deg, #2255e8, #4d7cff); }
.shopCsIcon2 { background: linear-gradient(135deg, #f15a25, #ff8255); }
.shopCsIcon3 { background: linear-gradient(135deg, #21d4a8, #4ee3bd); }
.shopCsIcon4 { background: linear-gradient(135deg, #b65cdc, #d68dff); }
.shopCsIcon5 { background: linear-gradient(135deg, #ffc857, #f1a012); color: #4a3300; }
.shopCsIcon6 { background: linear-gradient(135deg, #1c2d64, #2c4180); }
.shopCsIcon7 { background: linear-gradient(135deg, #2255e8, #1c2d64); }
.shopCsIcon8 { background: linear-gradient(135deg, #f15a25, #b6306b); }
.shopCatSectionTitle {
  font-family: var(--site-secondary-font);
  font-size: 30px;
  font-weight: 600;
  color: var(--shopNavy);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.shopCatSectionMeta {
  font-size: 13px;
  color: var(--shopMuted);
  margin: 4px 0 0;
}
.shopCatSectionLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--shopBlue);
  font-weight: 600;
  font-size: 13.5px;
  transition: gap 0.2s ease;
}
.shopCatSectionLink:hover {
  gap: 10px;
  color: var(--shopBlue);
}

/* ====== SUBCAT CHIPS ====== */
.shopSubcatChips { margin-bottom: 22px; }
.shopSubcatChip {
  padding: 8px 16px;
  border-radius: var(--shopRadiusPill);
  font-size: 13px;
  font-weight: 600;
  color: var(--shopInkSoft);
  background: #fff;
  border: 1.5px solid var(--shopLine);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shopSubcatChip:hover {
  border-color: var(--shopNavy);
  color: var(--shopNavy);
}
.shopSubcatChipActive {
  background: var(--shopNavy);
  color: #fff;
  border-color: var(--shopNavy);
}
.shopSubcatChipActive:hover { color: #fff; }
.shopChipCount {
  background: var(--shopCream);
  color: var(--shopMuted);
  padding: 1px 7px;
  border-radius: var(--shopRadiusPill);
  font-size: 11px;
  font-weight: 700;
}
.shopSubcatChipActive .shopChipCount {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* ====== PRODUCT CARDS ====== */
.shopPc {
  background: #fff;
  border: 1px solid var(--shopLine);
  border-radius: var(--shopRadiusMd);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.shopPc:hover {
  transform: translateY(-3px);
  box-shadow: var(--shopShadowMd);
  border-color: var(--shopBlue);
}
.shopPcArt {
  height: 140px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.shopPcArtIcon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  backdrop-filter: blur(8px);
}

.shopArtBlue { background: linear-gradient(135deg, #2255e8, #4d7cff); }
.shopArtOrange { background: linear-gradient(135deg, #f15a25, #ff8255); }
.shopArtGreen { background: linear-gradient(135deg, #21d4a8, #4ee3bd); }
.shopArtPurple { background: linear-gradient(135deg, #b65cdc, #d68dff); }
.shopArtGold { background: linear-gradient(135deg, #ffc857, #f1a012); }
.shopArtGold .shopPcArtIcon { color: #4a3300; }
.shopArtNavy { background: linear-gradient(135deg, #1c2d64, #2c4180); }
.shopArtDeep { background: linear-gradient(135deg, #2255e8, #1c2d64); }
.shopArtRose { background: linear-gradient(135deg, #f15a25, #b6306b); }
.shopArtTeal { background: linear-gradient(135deg, #1d8b8e, #21d4a8); }
.shopArtViolet { background: linear-gradient(135deg, #5b2d6e, #b65cdc); }

.shopPcBadges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
}
.shopPcBadge {
  background: #fff;
  color: var(--shopNavy);
  padding: 3px 9px;
  border-radius: var(--shopRadiusPill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--shopShadowSm);
}
.shopPcBadge_hot { background: var(--shopOrange); color: #fff; }
.shopPcBadge_new { background: var(--shopGreen); color: #fff; }
.shopPcBadge_sale { background: var(--shopGold); color: #4a3300; }
.shopPcQuick {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--shopNavy);
  opacity: 0;
  transform: translateY(-3px);
  transition: all 0.2s ease;
}
.shopPc:hover .shopPcQuick { opacity: 1; transform: translateY(0); }
.shopPcQuick:hover { background: var(--shopOrange); color: #fff; }
.shopPcBody {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.shopPcCat {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--shopOrange);
}
.shopPcName {
  font-family: var(--site-secondary-font);
  font-size: 20px;
  font-weight: 600;
  color: var(--shopNavy);
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.shopPcDesc {
  font-size: 13px;
  color: var(--shopMuted);
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
}
.shopPcRating {
  font-size: 12px;
  color: var(--shopMuted);
  margin-top: 2px;
}
.shopPcStars { color: var(--shopGold); display: inline-flex; gap: 1px; }
.shopPcRating strong { color: var(--shopInk); font-weight: 600; }
.shopPcFoot {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--shopLineSoft);
}
.shopPcPriceRow {
  display: flex;
  flex-direction: column;
}
.shopPcPriceStrike {
  font-size: 11.5px;
  color: var(--shopMuted);
  text-decoration: line-through;
}
.shopPcPriceNum {
  font-family: var(--site-secondary-font);
  font-size: 20px;
  font-weight: 600;
  color: var(--shopNavy);
  letter-spacing: -0.005em;
  line-height: 1;
}
.shopPcPriceNum small {
  font-family: var(--site-primary-font);
  font-size: 12px;
  color: var(--shopMuted);
  font-weight: 500;
  margin-left: 2px;
}
.shopPcPriceFrom {
  font-size: 10.5px;
  color: var(--shopMuted);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.shopPcAdd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 14px;
  background: var(--shopCream);
  color: var(--shopNavy);
  border-radius: var(--shopRadiusPill);
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.2s ease;
  flex-shrink: 0;
  border: none;
}
.shopPcAdd:hover { background: var(--shopOrange); color: #fff; }
.shopPcAddAdded { background: var(--shopGreen); color: #fff; }
.shopPcAddAdded:hover { background: var(--shopGreen); color: #fff; }
.shopPcAdd svg { width: 12px; height: 12px; }

/* ====== STICKY CART ====== */
.shopStickyCart {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--shopNavy);
  color: #fff;
  padding: 11px 14px 11px 22px;
  border-radius: var(--shopRadiusPill);
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 18px 50px rgba(11, 18, 48, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
  z-index: 70;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: calc(100% - 32px);
}
.shopStickyCartIn { transform: translateX(-50%) translateY(0); }
.shopScIconWrap {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.shopScCount {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--shopOrange);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--shopNavy);
}
.shopScInfo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.shopScName {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.2;
}
.shopScPrice {
  font-family: var(--site-secondary-font);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}
.shopScCheckout {
  background: var(--shopOrange);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--shopRadiusPill);
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  transition: background 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shopScCheckout:hover {
  background: var(--shopOrangeWarm);
  color: #fff;
}
@media (max-width: 600px) {
  .shopStickyCart { padding: 9px 11px 9px 16px; gap: 12px; }
  .shopScName { display: none; }
  .shopScPrice { font-size: 17px; }
}

/* ====== FOOTER ====== */
.shopFooter {
  background: var(--shopNavyNight);
  color: rgba(255, 255, 255, 0.7);
  padding: 56px 0 28px;
}
.shopFooterTop {
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0;
}
.shopFooterLogo {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  margin-bottom: 12px;
}
.shopFooterTagline {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
  max-width: 320px;
}
.shopFooterCol h4 {
  font-family: var(--site-primary-font);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  margin: 0 0 14px;
}
.shopFooterCol ul li { margin-bottom: 8px; }
.shopFooterCol a {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.2s ease;
}
.shopFooterCol a:hover { color: #fff; }
.shopFooterBottom {
  padding-top: 22px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}
.shopFooterBottom a {
  color: rgba(255, 255, 255, 0.5);
  margin-left: 16px;
}
.shopFooterBottom a:hover { color: #fff; }

/* ====== REVEAL ANIMATION ====== */
.shopReveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.shopRevealIn {
  opacity: 1;
  transform: translateY(0);
}

/* ====== RESPONSIVE ====== */
@media (max-width: 991.98px) {
  .shopBody { padding-top: 16px; }
  .shopSidebar {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}
@media (max-width: 600px) {
  .shopHeader { padding: 40px 0 32px; }
  .shopCatSection { margin-bottom: 40px; }
  .shopCatSectionTitle { font-size: 24px; }
  .shopCatSectionIcon { width: 38px; height: 38px; }
}