/* --- Pricing + FAQ section layout --- */
.pricing-faq {
  background: #f6f7f4;
  padding: 80px 0;           /* top/bottom space inside the section */
  margin: 60px 0;            /* extra gap from the sections above/below */
}

/* Slightly tighter on tablets/phones */
@media (max-width: 991.98px) {
  .pricing-faq {
    padding: 56px 0;
    margin: 40px 0;
  }
}

/* Desktop alignment + equal height layout */
@media (min-width: 992px) {
  /* Make both boxes the same height */
  .pricing-faq .row {
    display: flex;
    align-items: stretch;
  }

  .pricing-faq .col-lg-5,
  .pricing-faq .col-lg-7 {
    display: flex;
  }

  .pricing-faq .pricing-card,
  .pricing-faq .faq-card {
    flex: 1;
    height: 100%;
  }

  /* Center FAQ column slightly toward middle */
  .pricing-faq .col-lg-7 {
    padding-left: 40px;
  }
}

/* Ensure consistent max width */
.pricing-faq .pricing-card,
.pricing-faq .faq-card {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* Pricing card: keep the CTA pinned to the bottom neatly */
.pricing-faq .pricing-card {
  display: flex;
  flex-direction: column;
}
.pricing-faq .pricing-card .pricing-cta {
  margin-top: auto; /* pushes the button to the bottom of the card */
}

/* FAQ card: normal flow so there’s no giant gap */
.pricing-faq .faq-card {
  display: block;            /* or: display:flex; flex-direction:column; justify-content:flex-start; */
  padding-top: 28px;         /* your preferred padding */
}

/* Add spacing between Pricing and FAQ on mobile/tablet */
@media (max-width: 991.98px) {
  .pricing-faq .col-lg-7 {
    margin-top: 40px; /* space between pricing and faq when stacked */
  }
}