/* pricing page design start here  */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url("https://cdn.jsdelivr.net/fontsource/fonts/google-sans@latest/latin-400-normal.woff2")
      format("woff2"),
    url("https://cdn.jsdelivr.net/fontsource/fonts/google-sans@latest/latin-400-normal.woff")
      format("woff");
}

.revechat_pp_main_heading h1 {
  color: var(--gray-light-mode-900-section-header, #181d27);
  text-align: center;

  /* Heading Web v3.0/h0 */
  font-family: var(--Typeface-Family-Heading, "Plus Jakarta Sans");
  font-size: var(--Typeface-Size-h0, 64px);
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 76.8px */
  letter-spacing: var(--Typeface-Letter-spacing-lg, -0.5px);
  padding: 132px 0px 0px 0px;
  margin: 0px;
}

:root {
  --active-color: #266aff; /* CHANGE THIS COLOR */
  --inactive-color: #eff2f4;
}
.slider-box {
  margin-bottom: 25px;
}

.slider_box_label .value {
  display: flex;
  padding: 0 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 30px;
  background: var(--Offwhite-Offwhite-60, #eff2f4);
  color: var(--Black, #253748);
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Medium");
  font-size: var(--Typeface-Size-body, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
}
.slider_box_input_scale {
  width: 100%;
}
.revechat_pp_ipt_rng .scale {
  display: flex;
  justify-content: space-between;
  padding: 0 9px; /* Half of thumb width (18px) */
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}
.revechat_pp_ipt_rng .scale span {
  width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  position: relative;
  color: var(--Gray-Gray-80, #6f8294);
  text-align: center;
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Regular");
  font-size: var(--Typeface-Size-caption, 12px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
.revechat_pp_ipt_rng .scale span::after {
  content: "";
  position: absolute;
  top: -18px; /* adjust position */
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='14' viewBox='0 0 1 14' fill='none'%3E%3Cpath d='M0.5 0.5L0.500001 13.5' stroke='%23EFF2F4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center;
  z-index: 1;
}
.revechat_pp_ipt_rng .scale span.active::after {
  content: "";
  position: absolute;
  top: -18px; /* adjust position */
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='14' viewBox='0 0 1 14' fill='none'%3E%3Cpath d='M0.5 0.5L0.500001 13.5' stroke='%23266AFF' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center;
  z-index: 1;
}
/* ===== RANGE STYLE ===== */
.revechat_pp_ipt_rng input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 10px;
  background: var(--inactive-color);
  outline: none;
}

/* Track fill using background gradient */
.revechat_pp_ipt_rng input[type="range"] {
  background: linear-gradient(
    to right,
    var(--active-color) 0%,
    var(--active-color) 50%,
    var(--inactive-color) 50%,
    var(--inactive-color) 100%
  );
  position: relative;
  z-index: 3;
}

/* Thumb */
.revechat_pp_ipt_rng input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: var(--active-color);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}

.revechat_pp_ipt_rng input[type="range"]::-moz-range-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: var(--active-color);
  cursor: pointer;
  border: none;
}

/* ===== Pricing Cards ===== */
.pricing_cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

@media only screen and (max-width: 767px) {
  .slider_box {
    flex-direction: column;
    align-items: start;
  }
  .slider_box_label {
    width: 100%;
  }
  .pricing_cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 20px; /* Space for scrollbar if visible */
    /* Hide scrollbar for cleaner look */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  .pricing_cards::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
  }

  .pricing_card {
    flex: 0 0 85%; /* Card takes 85% of screen width */
    min-width: 76%;
    scroll-snap-align: center;
    margin-right: 0; /* Gap handles spacing */
  }

  /* Ensure the first and last cards can be centered */
  .pricing_cards::after {
    content: "";
    flex: 0 0 7.5%; /* Half of the remaining space (100% - 85% = 15% / 2) */
  }
  .pricing_cards::before {
    content: "";
    flex: 0 0 7.5%;
  }
}
.pricing_hero {
  position: relative;
}
.pricing_hero .container,
.pricing_cta .container,
.pricing_addons .container,
.pricing_feature_table .container {
  max-width: 1170px;
}
.pricing_hero:before {
  content: "";
  position: absolute;
  top: -100px;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  background: url(https://www.botkart.com/wp-content/themes/revechat/images/pricing-cion/pricing-table-bg.webp);
  background-position: right center;
  background-repeat: no-repeat;
  z-index: -1;
}
.revechat_pp_ipt_rng {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  border-radius: 16px;
  border: 1px solid var(--gray-light-mode-300, #d5d7da);
  background: #fff;
}
.slider_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.slider_box {
  display: flex;
  align-items: center;
  gap: 16px;
}
.slider_box_label {
  display: flex;
  min-width: 298px;
  height: 20px;
  align-items: center;
  gap: 4px;
}
.revechat_pp_main_heading {
  width: 80%;
  margin: auto;
}
.revechat_pp_main_heading p {
  color: var(--gray-light-mode-700, #414651);
  text-align: center;
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Regular");
  font-size: var(--Typeface-Size-body-lg, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
  padding: 26px 0px 24px 0px;
}
.slider_box_label {
  color: var(--Black, #253748);
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Regular");
  font-size: var(--Typeface-Size-body, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}
.pricing_card {
  display: flex;
  padding: 40px 24px 24px 24px;
  flex-direction: column;
  flex: 1 0 0;
  border-radius: 16px;
  border: 1px solid #e6eaed;
  background: var(--White, #fff);
  position: relative;
}
.pricing_card .pricing_card_title h3 {
  color: var(--gray-light-mode-900-section-header, #181d27);
  text-align: center;
  font-family: var(--Typeface-Family-Heading, "Plus Jakarta Sans");
  font-size: var(--Typeface-Size-h5, 20px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 30px */
  letter-spacing: var(--Typeface-Letter-spacing-sm, 0);
}
.pricing_card .pricing_card_title p {
  color: var(--gray-light-mode-500, #717680);
  text-align: center;
  font-family: "InstrumentSans-Regular";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 138.462% */
}
.pricing_card_price .price span {
  color: var(--gray-light-mode-500, #717680);
  text-align: center;
  font-family: "InstrumentSans-Regular";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 138.462% */
}
.pricing_card_price .price p {
  color: var(--gray-light-mode-900-section-header, #181d27);
  font-family: "Plus Jakarta Sans";
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
  padding: 0px;
  margin: 0px;
}
.pricing_card_price {
  width: 100%;
  flex: 1;
}
.pricing_card_price .price .currency-symbol {
  color: var(--gray-light-mode-900-section-header, #181d27);
  text-align: center;
  font-family: "Google Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 48px; /* 150% */
}
.pricing_card_price .additional-seat-text .currency-symbol {
  color: var(--gray-light-mode-700, #414651);
  text-align: center;
  font-family: "Google Sans", sans-serif;
  font-size: var(--Typeface-Size-body, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}
.pricing_single_addon_tr .currency-symbol {
  color: var(--gray-light-mode-900-section-header, #181d27);
  text-align: right;
  font-family: "Google Sans", sans-serif;
  font-size: var(--Typeface-Size-h6, 20px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 30px */
  letter-spacing: var(--Typeface-Letter-spacing-sm, 0);
}
.table-price .currency-symbol {
  color: var(--grey-grey-20, #4d657c);
  font-family: "Google Sans", sans-serif;
  font-size: var(--Typeface-Size-caption, 12px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 18px */
  padding-left: 4px;
}
#plan-free {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 107%;
}
.all-features-btn-p {
  margin: 54px 0px 0px 0px;
}
.pricing_card_price .price,
.pricing_card_btn {
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: 100%;
}
.pricing_card_btn a {
  display: flex;
  height: 36px;
  padding: 5px 12px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  align-self: stretch;
  border-radius: 8px;
  background: var(--Blue-Blue-90---Base, #004fff);
  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Medium");
  font-size: var(--Typeface-Size-body-sm, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  text-decoration: none;
  width: 100%;
}
.pricing_cards .pricing_card:first-child .pricing_card_btn a {
  border-radius: 8px;
  background: var(--Offwhite-Offwhite-60, #eff2f4);
  color: var(--Gray-Gray-100, #4d657c);
}
.pricing_card ul {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 12px;
  padding: 0px;
  margin: 0px;
}
.pricing_card ul li {
  list-style: none;
  position: relative;
  padding-left: 24px;
  color: var(--gray-light-mode-700, #414651);
  font-family: "InstrumentSans-Regular";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}
.pricing_card ul li[data-tooltip] {
  color: var(--gray-light-mode-700, #414651);
  font-family: "InstrumentSans-Regular";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.pricing_card ul li:not([data-tooltip])::after {
  content: none;
}
.info-icon {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.info-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 30px;
  left: -24px;
  transform: translateX(-50%);
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 6px;
  opacity: 0;
  transition: 0.2s ease;
  pointer-events: none;
  transition: 0.2s ease;
  border-radius: var(--radius-md, 8px);
  background: var(--White, #fff);
  color: var(--Gray-Gray-100, #4d657c);
  font-family: "InstrumentSans-Regular";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  box-shadow: 0 3px 12px 0 rgba(67, 77, 101, 0.14);
  z-index: 10;
  width: 300px;
}

.info-icon:hover::after {
  opacity: 1;
}
.info-icon::before {
  content: "";
  display: block;
  position: absolute;
  left: 14%;
  bottom: 133%;
  width: 12px;
  height: 12px;
  transform: rotate(135deg);
  opacity: 0;
  transition: 0.2s ease;
  z-index: 11;
  background-color: #fff;
  z-index: 100;
}

.info-icon:hover::before {
  opacity: 1;
}

.pricing_card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11.8125 3.9375L5.6875 10.0625L2.625 7' stroke='%23A4A7AE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center;
  background-size: contain;
}
.pricing_features li {
  position: relative;
  cursor: pointer;
}
.pricing_features li::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 24px;
  bottom: 125%;
  border-radius: var(--radius-md, 8px);
  background: var(--White, #fff);
  color: var(--Gray-Gray-100, #4d657c);
  font-family: "InstrumentSans-Regular";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 150% */
  opacity: 0;
  visibility: hidden;
  transition: 0.2s ease;
  z-index: 10;
  display: flex;
  padding: var(--spacing-lg, 12px);
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 3px 12px 0 rgba(67, 77, 101, 0.14);
  width: 100%;
}
.tooltip-arrow {
  position: absolute;
  left: 40px;
  bottom: calc(125% - 6px);
  width: 12px;
  height: 12px;
  transform: rotate(135deg);
  opacity: 0;
  visibility: hidden;
  transition: 0.2s ease;
  z-index: 11;
  background-color: #fff;
}

.pricing_features li:hover::after,
.pricing_features li:hover .tooltip-arrow {
  opacity: 1;
  visibility: visible;
}

.p_features {
  color: var(--gray-light-mode-700, #414651);
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Medium");
  font-size: var(--Typeface-Size-body-sm, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  padding: 40px 0px 10px 0px;
}
.p_badge {
  display: flex;
  padding: 2px 6px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 40px;
  background: var(--Green-Green-10, #dcf5e8);
  display: inline-block;
  color: var(--Green-Green-100, #06763a);
  font-family: "InstrumentSans-Medium";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
}
.pricing_card_t {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 214px;
}
.pricing_card_price p:last-child {
  color: var(--gray-light-mode-700, #414651);
  text-align: center;

  /* Body-16PX/Regular */
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Regular");
  font-size: var(--Typeface-Size-body, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  text-align: center;
}
.pricing_cards .pricing_card:nth-child(3) {
  position: relative;
}
.pricing_cards .pricing_card:nth-child(3):after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  border-radius: 12px 12px 2px 2px;
  background: url(https://www.botkart.com/wp-content/themes/revechat/images/pricing-cion/Status.svg);
  background-repeat: no-repeat;
  display: flex;
  width: 97%;
  height: 24px;
  padding: 3px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Typeface-Family-Text, "InstrumentSans-SemiBold");
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 166.667% */
  text-transform: uppercase;
}
/* .pricing_card:nth-child(3) {
  content: "";
  width: 60px;
  height: 24px;
  display: block;
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 24' fill='none'%3E%3Cpath d='M0.334727 -0.016406L17.8228 -0.000875632L43.8228 31.9991L25.8205 31.9999L0.334727 -0.016406Z' fill='white' fill-opacity='0.2'/%3E%3Cpath d='M23.8203 0.00195312L33.8203 0.00195284L50.8232 20L50.8232 32L23.8203 0.00195312Z' fill='white' fill-opacity='0.2'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  position: absolute;
  top: 5px;
  right: 0px;
  z-index: 10;
} */
/* .pricing_cards .pricing_card:nth-child(3)::before {
  content: "";
  position: absolute;
  top: -6px;
  left: calc(50% + 54px);
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'%3E%3Cpath d='M5.5 2.03516L6.66673 5.74939L11 6.74944L6.66673 7.74949L5.5 11.4637L4.33327 7.74949L0 6.74944L4.33327 5.74939L5.5 2.03516Z' fill='%23ffffff'/%3E%3Cpath d='M12 0L12.6364 1.7727L15 2.25L12.6364 2.7273L12 4.5L11.3636 2.7273L9 2.25L11.3636 1.7727L12 0Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  z-index: 100;
  top: 8px;
} */
.pricing_cta .pricing_cta_inr {
  display: flex;
  padding: 32px 24px;
  flex-direction: column;
  align-items: center;
  border-radius: 16px;
  border: 1px solid var(--Offwhite-Offwhite-100, #e6eaed);
  background: var(--White, #fff);
  margin-top: 32px;
}
.pricing_cta_inr h2 {
  color: var(--gray-light-mode-900-section-header, #181d27);
  text-align: center;
  font-family: var(--Typeface-Family-Heading, "Plus Jakarta Sans");
  font-size: var(--Typeface-Size-h5, 24px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 36px */
  letter-spacing: var(--Typeface-Letter-spacing-sm, 0);
  padding: 0px 0px 8px 0px;
  margin: 0px;
}
.pricing_cta_inr p {
  color: var(--gray-light-mode-500, #717680);
  text-align: center;
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Regular");
  font-size: var(--Typeface-Size-body-lg, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
  padding: 0px;
  margin: 0px;
}
.pricing_cta_inr a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--Spacing-space-4, 16px);
  border-radius: var(--Spacing-space-3, 12px);
  color: var(--gray-light-mode-900-section-header, #181d27);
  font-family: "InstrumentSans-Medium";
  text-decoration: none;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  border-radius: 10px;
  border: 1px solid #6314ba;
  background: #fff;
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 32px 0px 0px 0px;
}
.pricing_addons {
  padding: 120px 0px 0px 0px;
}
.pricing_addons h2 {
  color: var(--gray-light-mode-900-section-header, #181d27);
  text-align: center;
  font-family: var(--Typeface-Family-Heading, "Plus Jakarta Sans");
  font-size: var(--Typeface-Size-h2, 36px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 46.8px */
  letter-spacing: var(--Typeface-Letter-spacing-md, -0.25px);
  padding: 0px 0px 24px 0px;
  margin: 0px;
}
.pricing_addons p {
  color: var(--gray-light-mode-700, #414651);
  text-align: center;
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Regular");
  font-size: var(--Typeface-Size-body-lg, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
  padding: 0px;
  margin: 0px;
}
.pricing_single_addon {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-radius: 12px;
  border: 1px solid var(--Off-white-Offwhite, #e6eaed);
  background: #fff;
  height: 100%;
}
.pricing_addons .col-sm-12 {
  margin-top: 24px;
}
.pricing_single_addon_t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.pricing_single_addon_tl {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pricing_single_addon_tl h3 {
  color: var(--gray-light-mode-900-section-header, #181d27);
  font-family: var(--Typeface-Family-Heading, "Plus Jakarta Sans");
  font-size: var(--Typeface-Size-h6, 20px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 30px */
  letter-spacing: var(--Typeface-Letter-spacing-sm, 0);
  padding: 0px;
  margin: 0px;
}
.pricing_single_addon p {
  overflow: hidden;
  color: var(--gray-light-mode-700, #414651);
  text-overflow: ellipsis;
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Regular");
  font-size: var(--Typeface-Size-body, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  text-align: start;
  padding: 0px;
  margin: 0px;
}
.pricing_single_addon_tr p {
  color: var(--gray-light-mode-900-section-header, #181d27);
  text-align: right;
  font-family: var(--Typeface-Family-Heading, "Plus Jakarta Sans");
  font-size: var(--Typeface-Size-h6, 20px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 30px */
  letter-spacing: var(--Typeface-Letter-spacing-sm, 0);
}
.pricing_single_addon_tr p span {
  color: var(--gray-light-mode-700, #414651);
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Regular");
  font-size: var(--Typeface-Size-body-sm, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
.pricing-table-wrapper {
  overflow-x: auto; /* horizontal scroll */
  margin: 0px;
  background: #fff;
}
.pricing_feature_table h2.features-title {
  color: var(--gray-light-mode-900-section-header, #181d27);
  text-align: center;
  font-family: var(--Typeface-Family-Heading, "Plus Jakarta Sans");
  font-size: var(--Typeface-Size-h2, 36px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 46.8px */
  letter-spacing: var(--Typeface-Letter-spacing-md, -0.25px);
  padding: 108px 0px 0px 0px;
  margin: 0px;
}
.pricing-table {
  width: 100%;
  border-collapse: separate; /* IMPORTANT */
  border-spacing: 0; /* remove gaps */
  border-radius: 10px;
  overflow: scroll;
  border: 1px solid var(--gray-light-mode-200, #e9eaeb);
  margin: 0px 0px 24px 0px;
  min-width: 800px;
  padding: 2px;
}
.pricing-table.first-table,
#sticky-header {
  width: 100%;
  border-collapse: separate;
  border-radius: 10px;
  overflow: hidden; /* makes radius visible */
  border: 1px solid var(--gray-light-mode-200, #ffffff);
  margin: 24px 0px;
  background-color: #fff;
}
.pricing-table.first-table thead tr,
#sticky-header tr {
  display: flex;
  width: 99%;
  gap: 16px;
  justify-content: space-between;
}
#sticky-header tr {
  padding-left: 14px;
}

.pricing-table th:first-child {
  padding: 8px 12px 10px 16px;
  width: 20%;
  border: none;
}
.pricing-table.first-table th:first-child {
  padding: 8px 12px 10px 0px;
}
.pricing-table th {
  padding: 8px 12px 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--gray-light-mode-200, #e9eaeb);
  width: 20%;
  color: var(--Black, #253748);
  text-align: left;
  font-family: var(--Typeface-Family-Heading, "Plus Jakarta Sans");
  font-size: var(--Typeface-Size-body, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
  letter-spacing: var(--Typeface-Letter-spacing-sm, 0);
}
.pricing-table th span {
  color: var(--grey-grey-20, #4d657c);
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Regular");
  font-size: var(--Typeface-Size-caption, 12px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 18px */
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
}

.pricing-table td {
  padding: 16px;
  text-align: center;
  width: 20%;
  background: linear-gradient(
    to left,
    #ffffff 0%,
    #ffffff 2%,
    #fafafa 2%,
    #fafafa 98%,
    #ffffff 98%,
    #ffffff 100%
  );
  border-top: 1px solid #e9eaeb;
  color: var(--gray-light-mode-500, #717680);
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Regular");
  font-size: var(--Typeface-Size-body-sm, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  border-right-width: 0px !important;
  border-left-width: 0px !important;
}
#sticky-header thead {
  padding: 0px;
}
.pricing-table tr:first-child td {
  border-top: none;
}
.pricing-table td:first-child {
  padding: 16px;
  text-align: center;
  width: 20%;
  background: linear-gradient(
    to left,
    #ffffff 0%,
    #ffffff 2%,
    #fafafa 2%,
    #fafafa 98%,
    #ffffff 98%,
    #ffffff 100%
  );
  color: var(--gray-light-mode-700, #414651);
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Regular");
  font-size: var(--Typeface-Size-body-sm, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}
.pricing-table td:last-child {
  padding: 16px;
  text-align: center;
  width: 20%;
  background: linear-gradient(
    to right,
    #ffffff 0%,
    #ffffff 2%,
    #fafafa 2%,
    #fafafa 100%
  );
}

.pricing-table tr {
  text-align: left;
  width: 20%;
}
.pricing-table tbody {
  border: 1px solid var(--gray-light-mode-200, #e9eaeb);
  border-radius: 16px;
}
.pricing-table tr td:first-child {
  padding: 16px;
  text-align: left;
  width: 20%;
  background: var(--gray-light-mode-50, #ffffff);
}

/* Sticky first header */
#sticky-header {
  position: fixed;
  top: -24px;
  display: none;
  z-index: 100;
  border: 1px solid transparent !important;
  padding: 80px 0px 12px 0px;
  background-color: #fff;
  border-radius: 0px;
}
#sticky-header th {
  background-color: #fff;
}
#sticky-header th:first-child {
  padding: 8px 12px 10px 0px;
}
/* Sticky first column */
.feature-col {
  position: sticky;
  left: 0;
  background: #fff;
  font-weight: 500;
  z-index: 10;
}

/* Plan name style */
.pricing-table th span {
  display: flex;
  font-size: 12px;
  color: #777;
  margin-top: 2px;
}
.pricing-cutoms-tik {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346627 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C16 6.94942 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608964C10.0909 0.206926 9.05058 0 8 0ZM11.44 6.088L7.784 10.888C7.70948 10.9848 7.61377 11.0633 7.50421 11.1173C7.39466 11.1714 7.27418 11.1997 7.152 11.2C7.03049 11.2007 6.91042 11.1736 6.80091 11.1209C6.69141 11.0683 6.59534 10.9913 6.52 10.896L4.568 8.408C4.50339 8.325 4.45576 8.23009 4.42783 8.12869C4.3999 8.02729 4.39221 7.92138 4.40521 7.817C4.41821 7.71263 4.45164 7.61184 4.5036 7.52039C4.55555 7.42893 4.62501 7.34861 4.708 7.284C4.87562 7.15351 5.08821 7.09495 5.299 7.12121C5.40337 7.13421 5.50416 7.16764 5.59561 7.21959C5.68707 7.27155 5.76739 7.341 5.832 7.424L7.136 9.088L10.16 5.088C10.2241 5.00395 10.3041 4.93335 10.3955 4.88023C10.4868 4.8271 10.5878 4.7925 10.6925 4.77838C10.7973 4.76427 10.9038 4.77092 11.0059 4.79797C11.1081 4.82501 11.204 4.87191 11.288 4.936C11.372 5.00008 11.4426 5.0801 11.4958 5.17147C11.5489 5.26284 11.5835 5.36377 11.5976 5.46852C11.6117 5.57326 11.6051 5.67976 11.578 5.78193C11.551 5.88411 11.5041 5.97995 11.44 6.064V6.088Z" fill="%2318A326"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}
.plan p {
  color: var(--gray-light-mode-700, #414651);
  text-align: center;

  /* Body-16PX/Regular */
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Regular");
  font-size: var(--Typeface-Size-body, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}
.plan p.additional-seat-text {
  padding: 0px 0px 24px 0px;
  margin: 0px;
}
.pay_yearly_or_mon {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.pay_yearly_or_mon ul {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
  margin: 0px;
  border-radius: 30px;
  background: var(--White, #fff);
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
  max-width: 240px;
  position: relative;
}
.pay_yearly_or_mon ul li {
  list-style: none;
}
.pay_yearly_or_mon ul li button {
  border: none;
  display: flex;
  padding: 4px 14px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 44px;
  color: var(--grey-grey-20, #4d657c);
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Regular");
  font-size: var(--Typeface-Size-body-sm, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  background-color: transparent;
  position: relative;
  height: 28px;
  margin: 4px;
  z-index: 2;
  transition: 0.3s;
}
.pay_yearly_or_mon ul li button.active {
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Medium");
  color: var(--Black, #253748);
  font-weight: 500;
}
.pay_yearly_or_mon .nav-indicator {
  position: absolute;
  bottom: 4px;
  height: calc(100% - 8px);
  border-radius: 44px;
  background: var(--Offwhite-Offwhite-60, #eff2f4);
  transition: all 0.3s ease;
  z-index: 1;
}
.pay_yearly_or_mon li span {
  display: inline-flex;
  padding: 2px 6px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 40px;
  background: var(--Green-v2-Green-90---Base, #079449);
  position: absolute;
  top: -20px;
  right: -45%;
  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Regular");
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
  letter-spacing: -0.12px;
}
.pay_yearly_or_mon ul li:nth-child(2) span:after {
  width: 50px;
  height: 50px;
  content: "";
  display: block;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="17" fill="none"><path d="M0.4783 15.6156C2.39559 9.95673 3.9986 5.68293 9.78449 4.4281C12.5462 3.82915 15.1254 5.04248 16.5803 7.88912C19.228 13.0693 10.7006 13.242 10.6335 8.60574C10.5106 0.10637 20.5711 -0.223065 25.9564 2.41723C27.5258 3.18666 29.2994 4.09322 30.777 5.03313C32.0586 5.8484 30.7804 4.45225 30.4223 3.96389C29.7589 3.05915 29.3812 2.06276 28.7327 1.17837C27.5979 -0.36917 28.5416 1.21723 29.095 1.89576C30.6823 3.84216 32.4423 5.14966 29.4158 5.90142C28.8067 6.05271 25.7634 7.10121 25.9541 6.65217C26.4947 5.3791 26.5086 3.54467 27.0755 2.39739C27.8516 0.826922 27.8349 -0.353368 27.6386 2.33896C27.5745 3.21743 27.4088 4.00889 27.3104 4.86164C27.1483 6.26694 27.6645 4.47347 27.6412 4.28049C27.5735 3.71997 28.0132 2.62772 27.8686 3.88096C27.8314 4.20361 27.4997 5.45989 27.6874 5.13009C28.2802 4.08876 28.0788 2.01973 28.5368 2.87643C28.9217 3.59638 28.7751 4.07009 28.368 4.69595C28.2295 4.90899 27.1656 5.28524 27.379 4.91044" stroke="%234D657C" stroke-linecap="round"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  right: 100%;
}
.pricing-table-wrapper .accordion-item {
  border: none !important;
}
.pricing-table-wrapper
  .accordion-panelsStayOpen
  .accordion-item
  .accordion-button {
  border: none;
  box-shadow: none;
  background-color: #fff;
  color: var(--Black, #253748);
  font-family: var(--Typeface-Family-Text, "InstrumentSans-SemiBold");
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px; /* 155.556% */
  padding: 12px 0px;
}
.pricing-table-wrapper
  .accordion-panelsStayOpen
  .accordion-item
  .accordion-body {
  padding: 0px;
}
.m_revechat_pricing_faq .accordion-body,
.m_revechat_pricing_faq .accordion-item,
.m_revechat_pricing_faq .accordion-button {
  background-color: transparent;
}
.m_revechat_pricing_faq .accordion-body {
  background-color: transparent;
  padding: 20px 0px 0px 0px;
}
.m_revechat_pricing_faq .accordion-body ul li,
.m_revechat_pricing_faq .accordion-body p {
  color: var(--gray-light-mode-700, #414651);
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Regular");
  font-size: var(--Typeface-Size-body-lg, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
  padding: 0px;
  margin: 0px;
}
.m_revechat_pricing_faq .accordion-button,
.m_revechat_pricing_faq .accordion-button:not(.collapsed) {
  color: var(--gray-light-mode-900-section-header, #181d27);
  font-family: var(--Typeface-Family-Heading, "Plus Jakarta Sans");
  font-size: var(--Typeface-Size-h6, 20px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 30px */
  letter-spacing: var(--Typeface-Letter-spacing-sm, 0);
  padding: 24px 0px;
  box-shadow: none;
  outline: none;
}
.m_revechat_livec_faq.m_revechat_pricing_faq h2 {
  color: var(--gray-light-mode-900-section-header, #181d27);
  text-align: center;
  font-family: var(--Typeface-Family-Heading, "Plus Jakarta Sans");
  font-size: var(--Typeface-Size-h2, 36px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 46.8px */
  letter-spacing: var(--Typeface-Letter-spacing-md, -0.25px);
  padding: 0px 0px 48px 0px;
  margin: 0px;
}
.pricing-section-heading {
  position: fixed;
  top: 100px;
  left: 16px;
  display: flex;
  width: 180px;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  border-radius: 10px;
  background: #fff;
  box-shadow:
    0 1px 3px 0 rgba(16, 24, 40, 0.1),
    0 1px 2px 0 rgba(16, 24, 40, 0.06);
  z-index: 100;
}
.pricing-section-heading ul {
  padding: 0px;
  margin: 0px;
  width: 100%;
}
.pricing-section-heading ul li {
  list-style: none;
  width: 100%;
}
.pricing-section-heading ul li a {
  list-style: none;
  display: flex;
  padding: 11px 12px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  color: var(--gray-light-mode-700, #414651);
  font-family: "InstrumentSans-Medium";
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 18px */
  letter-spacing: -0.2px;
  text-decoration: none;
  width: 100%;
}
.pricing-section-heading a.highlighted {
  border-radius: 6px;
  background: var(--Purple-Purple-20, #e2e1fe);
  color: #181d27;
}
.slider_box_label svg {
  margin-top: 2px;
}
.currency_switcher ul {
  display: flex;
  list-style: none;
  padding: 0;
  background: #f3f4f6;
  border-radius: 30px;
  padding: 4px;
}
.currency_switcher ul li button {
  border: none;
  background: none;
  padding: 8px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  transition: all 0.3s;
}
.currency_switcher ul li button.active {
  background: #fff;
  color: #004fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Slider Input Styles */
.slider_box #usersValue {
  max-width: 48px;
  min-width: 48px;
}
.slider-input {
  max-width: 82px;
  min-width: 82px;
  display: flex;
  padding: 0 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 30px;
  background: var(--Offwhite-Offwhite-60, #eff2f4);
  color: var(--Black, #253748);
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Medium");
  font-size: var(--Typeface-Size-body, 16px);
  font-style: normal;
  text-align: center;
  font-weight: 500;
  line-height: 150%; /* 24px */
  -moz-appearance: textfield;
  appearance: textfield;
}

.slider-input::-webkit-outer-spin-button,
.slider-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.slider-input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}
.all-features-btn-p a {
  color: var(--gray-light-mode-700, #414651);
  text-align: center;
  font-family: var(--Typeface-Family-Text, "InstrumentSans-Medium");
  font-size: var(--Typeface-Size-body-sm, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  display: flex;
  padding: 7px 0;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 40px;
  background: var(--gray-light-mode-100, #f5f5f5);
  text-decoration: none;
  position: absolute;
  bottom: 24px;
  width: 80%;
  margin: auto;
}
.m_revechat_pricing_faq {
  padding: 120px 0px;
}
.m_revechat_pricing_faq .accordion-button,
.m_revechat_pricing_faq .accordion-button:not(.collapsed) {
  background-color: transparent;
}
.m_revechat_pricing_faq .accordion-button:not(.collapsed) {
  border-bottom: none;
  padding: 24px 0px 0px 0px;
}
button#showMoreFeaturesBtn,
button#showLessFeaturesBtn {
  display: inline-flex;
  padding: 12px 20px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  border: 1px solid #6314ba;
  background: #fff;
  color: var(--gray-light-mode-900-section-header, #181d27);
  font-family: "InstrumentSans-Medium";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  margin-bottom: 120px;
  margin-top: 24px;
}
@media only screen and (max-width: 991px) {
  .pricing-section-heading {
    top: 60px;
    left: 16px;
    margin: auto;
    z-index: 9999;
    width: calc(100% - 32px);
  }
  .pricing-section-heading ul {
    display: flex;
  }
}
@media only screen and (max-width: 768px) {
  .pricing_addons p br {
    display: none;
  }
  .pricing_single_addon {
    height: auto;
  }
  #sticky-header {
    top: 24px;
  }
  .all-features-btn-p a {
    width: 90%;
  }
  .revechat_pp_main_heading {
    width: 100%;
  }
  .revechat_pp_main_heading h1 {
    font-size: 40px;
    padding: 150px 0px 0px 0px;
  }
  .revechat_pp_main_heading p {
    font-size: 16px;
    padding: 24px 0px;
  }
  .pricing-table {
    overflow: scroll;
  }
  .pay_yearly_or_mon li span {
    right: -22%;
  }
  .pricing_feature_table h2.features-title {
    font-size: var(--Typeface-Size-h2, 28px);
    padding-top: 60px;
  }
  .pricing_addons h2,
  .m_revechat_pricing_faq h2 {
    font-size: var(--Typeface-Size-h2, 28px);
  }
  .m_revechat_pricing_faq h2 {
    padding: 0px 0px 36px 0px;
  }
  .pricing_addons {
    padding: 60px 0px 0px 0px;
  }
  .scale span:nth-child(even):not(:last-child),
  .scale span:nth-last-child(2) {
    visibility: hidden;
  }
  .slider_container .slider_box:first-child .info-icon::after {
    left: -10px;
  }
  .slider_container .slider_box:last-child .info-icon::after {
    left: -110px;
  }
}
/* pricing page design end here  */