body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif, Outfit;
  background-color: var(--bg-light);
}

@font-face {
  font-family: 'Work Sans';
  src: url('/assets/fonts/WorkSans-VariableFont_wght.ttf') format('truetype');
}

.pricing-tab {
  padding: 0.5rem 1.5rem;
  font-family: 'Work Sans';
  font-size: 16px !important;
  border: 1px solid var(--primary-text-dark-disabled);
  border-radius: 152px;
  padding: 16px 24px 16px 24px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.pricing-text {
  font-size: 128px;
  letter-spacing: -7.3px;
  color: #3a3939;
}

.pricing-tab.active {
  background-color: var(--secondary-text);
  color: var(--primary-text-dark);
  border: 1px solid var(--primary-text-dark);
}

.pricing-tab:hover {
  border-color: var(--primary-text-dark);
}

.pricing-card {
  border: 1px solid var(--gray-90);
  padding: 1.5rem;
  height: 100%;
  background-color: transparent;
  transition: all 0.3s ease;
}

.pricing-card h2 {
  color: var(--primary-text-dark);
}

.pricing-card h3 {
  color: var(--primary-text-dark);
}

.pricing-card.selected {
  background-color: var(--primary-text-white);
}

.pricing-card .price {
  font-size: 2.5rem;
  font-family: Outfit;
  font-weight: 600;
  margin-bottom: 1rem;
}

.pricing-card .Get_started {}

.demo-img {
  width: 100%;
}

.demo-card .book-a-demo {
  background-color: var(--secondary-bg);
  color: var(--primary-text-white);
}

.demo-card .book-a-demo span {
  color: var(--primary-text-white) !important;
  letter-spacing: 0.5px !important;
}

.demo-card .book-a-demo:hover {
  background-color: var(--secondary-bg);
  color: var(--primary-text-white);
}

.see-all {
  box-shadow: none !important;
}

.btn-action {
  width: 100%;
  height: 56px;
  padding: 15px 15px 0px 15px;
  background: var(--primary-text-white);
  border-color: var(--primary-text-dark);
  border-radius: 0;
  font-weight: 500;
  margin-top: 2rem !important;
  transition: all 0.3s ease;
}

.demo-card {
  padding: 32px;
  background-color: var(--brand-yellow);
  border-bottom: 1px solid var(--primary-text-dark);
}

.btn-action span {
  letter-spacing: 0.5px !important;
}

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

.get-closing-pro {
  width: 235px;
  height: 56px;
  margin-top: 0px !important;
  padding: 26px 15px 0px 15px;
}

.btn-primary.btn-action {
  background: var(--primary-bg);
  border: none;
  color: var(--primary-text-white);
}

.btn-primary {
  background-color: var(--primary-bg);
  color: var(--primary-text-white);
  border: none;
}

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

#testimonial-container .numbered-section {
  display: none !important;
}

#testimonial-container .testimonial-heading {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

.form-switch .form-check-input {
  width: 29px !important;
  height: 18px !important;
}

.form-check-input:checked {
  background-color: var(--primary-bg) !important;
}

.pricing-details-grid {
  margin: 2rem 0;
}

.business-dollar-text {
  color: var(--primary-text);
}

.business-dollar-content-text {
  color: var(--secondary-text-muted) !important;
}

.business-icon-with-text {
  margin-left: 5px;
}

.grid-container {
  background-color: var(--bg-light);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--primary-text-dark-disabled);
}

.grid-item {
  border: 1px solid var(--primary-text-dark-disabled);
  padding: 16px;
  text-align: center;
  display: flex;
  align-items: stretch;
}

.grid-item .d-flex {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.grid-item h3 {
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #4a4a50;
  text-transform: uppercase;
  min-height: 42px;
  /* Set minimum height for title */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1.2;
}

.grid-item .price {
  font-family: "Outfit", sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #3a3939;
  margin: 8px 0;
  line-height: 1;
}

.grid-item p {
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  color: #4a4a50;
  margin: 0;
}

.enterprise-card {
  padding: 32px;
}

.enterprise-features li {
  color: #4a4a50;
  font-family: Outfit;
  font-weight: 400;
}

.enterprise-features li span {
  font-family: Outfit;
  font-weight: 400;
  font-size: 20px;
  color: var(--secondary-text-muted);
}

.enterprise-card h4 {
  color: #3a3939;
}

.slider-container {
  position: relative;
  width: 100%;
  padding-top: 100px;
  margin-top: 70px;
}

.slider-value {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  left: var(--slider-position, 50%);
  transform: translateX(-50%);
  top: 0;
  transition: left 0.2s ease;
  z-index: 20;
  /* Add this line */
}

.value {
  font-size: 120px;
  color: var(--primary-bg);
  font-weight: 500;
  margin-bottom: 8px;
  position: absolute;
  left: 70%;
  bottom: -50px;
  transition: left 0.3s ease;
  white-space: nowrap;
}

.arrows {
  color: var(--primary-bg);
}

.arrows-container {
  background: white;
  border-radius: 32px;
  padding: 8px;
  width: 56px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 8px;
  margin-bottom: 16px;
  position: relative;
  z-index: 20;
  /* Add this line */
}

.billing-toggle-text {
  color: var(--light-text);
}

.business-pricing-card-wrapper {
  border-right: 1px solid var(--gray-90);
}

.label {
  position: absolute;
  color: var(--primary-bg) !important;
  transform: translateY(-50%);
  top: 80%;
  transition: left 0.3s ease;
  left: 180px;
  white-space: nowrap;
  z-index: 30;
}

/* Add new styles for label position adjustment */
.slider-value[style*="--slider-position: 90%"] .label,
.slider-value[style*="--slider-position: 95%"] .label,
.slider-value[style*="--slider-position: 100%"] .label {
  left: -180px;
}

.tick-marks {
  position: relative;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: flex-end;
}

.tick-marks::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 16px;
  background-image: repeating-linear-gradient(to right,
      #C2C2C7 0px,
      #C2C2C7 1px,
      transparent 1px,
      transparent 18px);
  display: none;
}

.tick-marks span {
  width: 4%;
  display: inline-block;
  border-right: 1px solid #C2C2C7;
  height: 20px;
  position: relative;
}

.tick-marks span:first-child {
  border-left: 1px solid #C2C2C7;
}

/* .tick-marks span:after {
  position: absolute;
  content: '';
  width: 1px;
  height: 20px;
  background: #C2C2C7;
  left: 50%;
  bottom: 0px;
} */
.ticksMarks20.tick-marks span {
  width: 5%;
}

.book-demo-text {
  color: var(--secondary-text-muted);
}

.business-content-text {
  color: var(--primary-bg);
}

.tick-marks::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--slider-position, 50%);
  width: 34px;
  height: 176px;
  background: linear-gradient(var(--primary-bg), var(--primary-bg)) left center/3px 50px no-repeat,
    linear-gradient(var(--primary-bg), var(--primary-bg)) center/5px 1176px no-repeat,
    linear-gradient(var(--primary-bg), var(--primary-bg)) right center/3px 50px no-repeat #fffcf2;
  background-position: 0% 100%, 50% 100%, 100% 100%;
  transform: translateX(-50%);
  transition: left 0.2s ease;
  z-index: 10;
  /* Add this line */
}

.range-input {
  position: absolute;
  width: 100%;
  height: 48px;
  opacity: 0;
  cursor: pointer;
}

.tick-values {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: #4a4a50;
}

.ron-certified-toggle-2 {
  display: none !important;
}

#businessView {
  border: 1px solid var(--gray-90) !important;
}

#businessView .get-started-btn {
  width: 235px !important;
  height: 56px !important;
  margin-top: 0px !important;
  padding: 26px 15px 0px 15px !important;
}

#businessView .get-started-btn span {
  letter-spacing: 0.5px !important;
}

#businessView .billing-toggle span {
  color: var(--light-text) !important;
}

#businessView .seats-section span {
  color: var(--primary-bg) !important;
}

.subscription-details {
  padding-top: 1.5rem !important;
}

.seats-section {
  border-bottom: 1px solid var(--primary-text-dark-disabled) !important;
  padding-bottom: 1.5rem !important;
}

#closingView {
  border: 1px solid var(--gray-90);
}

.accordion-item {
  border-bottom: 1px solid var(--primary-text) !important;
  border-radius: 0px !important;
}

.contact-sales-btn-price {
  margin-top: 0 !important;
}

.e-sign-pricing {
  font-size: 14px;
  color: var(--secondary-text-muted);
  font-weight: 400;
}



@media (max-width: 1200px) {
  .pricing-text {
    font-size: 120px;
  }

  .container {
    max-width: 850px;
  }

  .pricing-card .price {
    font-size: 3rem;
  }

  .pricing-card .list-unstyled {
    min-height: 138px;
  }

  .pricing-card h3 {
    font-size: 1rem !important;
  }

  section#testimonial .hp-h1 {
    font-size: 4rem !important;
  }

  section#testimonial .hp-h1 br {
    display: none;
  }
}

@media (max-width: 768px) {
  .hp-h1 {
    font-size: var(--h4-font-size) !important;
    font-weight: 400 !important;
  }

  .testimonial-header {
    padding-right: 0px !important;
  }

  .pricing-tab {
    padding: 8px 16px 8px 16px !important;
  }

  .pricing-card h2 {
    font-size: 2rem !important;
  }

  .pricing-card .list-unstyled {
    min-height: auto;
  }

  .pricing-card .Get_started {
    margin-top: 2rem !important;
  }

  section#testimonial .hp-h1 {
    font-size: 3rem !important;
  }

  section#faq h2.hp-h1 {
    font-size: 3rem !important;
  }

  .pricing-text {
    font-size: 45px !important;
    letter-spacing: -2.5px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .pricing-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 15px !important;
  }

  .pricing-tab {
    font-size: 14px !important;
    padding: 12px 16px !important;
    white-space: nowrap !important;
    min-width: fit-content !important;
    font-family: 'Work Sans' !important;
    font-weight: 500 !important;
    color: #3a3939 !important;
  }

  .pricing-card-1 {
    margin-bottom: 30px !important;
  }

  .esign-pro-text {
    font-size: 32px !important;
  }

  .description {
    font-size: 16px !important;
  }

  .price {
    font-size: 48px !important;
  }

  .per-user-text {
    font-size: 14px !important;
  }

  .top-features-text {
    font-size: 16px !important;
  }

  .esign-icon {
    font-size: 24px !important;
  }

  .see-all {
    font-size: 20px !important;
  }

  /* Business View Mobile Styles */
  #businessView {
    border: none !important;
  }

  #businessView .col-lg-8 {
    padding: 1rem !important;
    border: none !important;
  }

  #businessView .billing-toggle {
    justify-content: start !important;
  }

  #businessView .label {
    top: 0px !important;
  }

  #businessView .get-started-btn {
    width: 100% !important;
  }

  /* Header section */
  .business-pricing-card-header {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .business-pricing-card-header h2 {
    font-size: 1.75rem !important;
  }

  .business-pricing-card-header p {
    font-size: 0.875rem !important;
  }

  .business-pricing-card-header .btn-action {
    width: 100% !important;
  }

  /* Subscription section */
  .subscription-details {
    padding-top: 1.5rem !important;
  }

  .subscription-details>div {
    flex-direction: column !important;
  }

  .price-section {
    width: 100% !important;
  }

  .price-section h3 {
    font-size: 2.5rem !important;
  }

  /* Pricing grid */
  .pricing-details-grid .grid-container {
    display: flex !important;
    flex-direction: column !important;
  }

  .grid-item {
    padding: 0.75rem !important;
    border-bottom: 1px solid var(--border-color) !important;
  }

  .grid-item h3 {
    font-size: 0.875rem !important;
    color: var(--text-secondary) !important;
  }

  .grid-item .price {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
  }

  .grid-item p {
    font-size: 0.75rem !important;
    color: var(--text-secondary) !important;
  }

  /* Features list */
  .features-list {
    padding-top: 1.5rem !important;
  }

  .feature-item {
    font-size: 0.875rem !important;
    display: flex !important;
    gap: 0.5rem !important;
    align-items: flex-start !important;
  }

  .feature-item i {
    font-size: 1rem !important;
  }

  /* Slider section */
  .seats-section {
    margin: 1.5rem 0 !important;
  }

  .slider-value {
    font-size: 1.25rem !important;
  }

  .range-input {
    width: 100% !important;
  }

  /* Toggle switches */
  .form-check-label {
    font-size: 0.875rem !important;
  }

  /* Closing View Mobile Styles */
  #closingView {
    border: none !important;
  }

  #closingView .col-lg-8 {
    padding: 1rem !important;
    border: none !important;
  }

  /* Header section */
  #closingView .business-pricing-card-header {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  #closingView .business-pricing-card-header h2 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }

  #closingView .business-pricing-card-header p {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
  }

  #closingView .business-pricing-card-header p br {
    display: none;
  }

  #closingView .btn-action {
    width: 100% !important;
    /* background-color: var(--primary-bg) !important; */
    margin-bottom: 1rem !important;
  }

  /* Subscription details */
  #closingView .subscription-details {
    padding-top: 1.5rem !important;
  }

  #closingView .subscription-details>div {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* Price section */
  #closingView .price-section {
    margin-bottom: 1rem !important;
  }

  #closingView .price-section .pricing-price-section {
    justify-content: start !important;
  }

  #closingView .ron-certified-toggle-2 {
    display: block !important;
  }

  #closingView .ron-certified-toggle {
    display: none !important;
  }

  #closingView .price-section h3 {
    font-size: 2.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  #closingView .billing-toggle {
    justify-content: flex-start !important;
    margin-top: 0.5rem !important;
  }

  /* Transaction slider */
  #closingView .seats-section {
    margin: 2rem 0 !important;
  }

  #closingView .seats-section h4 {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }

  #closingView .slider-value {
    align-items: center !important;
    margin-bottom: 1rem !important;
  }

  #closingView .slider-value .value {
    font-size: 80px !important;
    color: var(--primary-bg) !important;
    font-weight: 500 !important;
    bottom: -10px !important;
  }

  #closingView .slider-value .label {
    font-size: 0.875rem !important;
    top: 40% !important;
    /* left: 120px !important; */
  }

  /* Pricing grid */
  #closingView .pricing-details-grid {
    margin: 2rem 0 !important;
  }

  #closingView .grid-item:last-child {
    grid-column: 1 / -1 !important;
    /* Makes the last item span full width */
  }

  #closingView .grid-item h3 {
    font-size: 12px !important;
    color: #666666 !important;
    margin-bottom: 0.5rem !important;
    font-weight: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  #closingView .grid-item .price {
    font-size: 32px !important;
    font-weight: 500 !important;
    color: #2f2f33 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  #closingView .grid-item p {
    font-size: 12px !important;
    color: #666666 !important;
    margin-top: 0.25rem !important;
  }

  /* Special styling for the first grid item (NOTARIZATION) */
  #closingView .grid-item:first-child {
    grid-column: 1 / -1 !important;
    /* Makes the first item span full width */
    border-bottom: 1px solid #e5e5e6 !important;
  }

  /* Special styling for the last grid item (HIDDEN COSTS) */
  #closingView .grid-item:last-child {
    border-top: 1px solid #e5e5e6 !important;
  }

  /* Remove flex styling from grid items */
  #closingView .grid-item .d-flex {
    display: block !important;
  }

  #closingView .grid-item .d-flex.flex-column {
    gap: 0 !important;
  }

  /* Form switch */
  #closingView .form-check-input {
    margin-right: 0.5rem !important;
  }

  #closingView .form-check-label {
    font-size: 0.875rem !important;
  }

  /* Features list */
  #closingView .features-list {
    padding-top: 2rem !important;
    gap: 1rem !important;
  }

  #closingView .feature-item {
    font-size: 0.875rem !important;
    gap: 0.5rem !important;
  }

  #closingView .feature-item i {
    color: var(--primary-bg) !important;
  }

  /* Grid Styles for both Business and Closing View */
  #businessView .pricing-details-grid,
  #closingView .pricing-details-grid {
    margin: 2rem 0 !important;
  }

  #businessView .grid-container,
  #closingView .grid-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    border: 1px solid var(--primary-text-dark-disabled) !important;
    background-color: var(--bg-light) !important;
  }

  #businessView .grid-item,
  #closingView .grid-item {
    padding: 1rem !important;
    background-color: var(--bg-light) !important;
    text-align: center !important;
    gap: 0 !important;
  }

  #businessView .grid-item:first-child,
  #closingView .grid-item:first-child {
    grid-column: 1 / -1 !important;
    /* Makes the first item span full width */
    border-bottom: 1px solid var(--primary-text-dark-disabled) !important;
  }

  #businessView .grid-item:last-child,
  #closingView .grid-item:last-child {
    grid-column: 1 / -1 !important;
    /* Makes the last item span full width */
    border-top: 1px solid var(--primary-text-dark-disabled) !important;
  }

  #businessView .grid-item h3,
  #closingView .grid-item h3 {
    font-size: 12px !important;
    color: #666666 !important;
    margin-bottom: 0.5rem !important;
    font-weight: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  #businessView .grid-item .price,
  #closingView .grid-item .price {
    font-size: 32px !important;
    font-weight: 500 !important;
    color: #2f2f33 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  #businessView .grid-item p,
  #closingView .grid-item p {
    font-size: 12px !important;
    color: #666666 !important;
    margin-top: 0.25rem !important;
  }

  /* Remove flex styling from grid items */
  #businessView .grid-item .d-flex,
  #closingView .grid-item .d-flex {
    display: block !important;
  }

  #businessView .grid-item .d-flex.flex-column,
  #closingView .grid-item .d-flex.flex-column {
    gap: 0 !important;
  }

  /* testimonial */
  .testimonial-btn-first-icon,
  .testimonial-customer-text {
    display: none !important;
  }

  .testimonial-btn-second-icon {
    display: flex !important;
    justify-content: space-between !important;
  }

  .container {
    padding: 0px;
  }

  .demo-card {
    padding: 16px;
  }

  .ribbonOneSection {
    padding-top: 0px !important;
  }

  .borderBlock {
    border: 1px solid #2F2F33 !important;
  }

  .borderBlock .border-1 {
    border: 0px !important;
  }

  .enterprise-card.border-1 {
    border-top: 1px solid #2F2F33 !important;
  }

  div#esignView {
    border-bottom: 1px solid #2F2F33;
  }

  div#esignView .pricing-card-2 {
    margin-bottom: 35px;
  }

  .tick-marks.ticksMarks20::after {
    width: 36px;
  }

  .tick-marks.ticksMarks50::after {
    width: 8.5%;
  }
}