/* Page-specific styles for solution-healthcare-mental-wellness-ai-store */
/* Add overrides here — never edit compat.css for page-specific changes */

/* ---------- "Why Users Love It" ----------
   The photo is 544x514 natural but rendered 318x300: compat.css caps images
   inside anything named "*-item*" to max-height:300px, and this row carries
   Bootstrap's align-items-center, which contains the literal text "-item".
   Uncapped it sits properly against the copy beside it. */
.bgcolor .row.align-items-center img.rounded {
  max-height: none !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

/* ---------- Testimonials ----------
   The markup asks for a flex row (`d-flex align-items-center`), but
   compat.css's .testimonial-layout turns it into an auto-fit grid
   (repeat(auto-fit, minmax(250px, 1fr))). With three children that produced
   three 380px columns stretched across the full 1200px container - photo
   stranded far left, quote marooned in the middle, arrows pinned to the far
   right, all stretched to a 446px-tall row. Honour the markup's intent: a
   centred, compact flex row that's only as tall as its content. */
.testimonial-layout {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 2rem;
  max-width: 940px;
  margin-inline: auto;
}

.testimonial-layout > * {
  min-width: 0;
}

.testimonial-layout .testimonial-text {
  margin-bottom: 0;
}

/* keep the progress bar / "see all review" row on the same measure as the
   quote above it rather than spanning the full container width. .see-all is
   uppercase with wide letter-spacing and was being squeezed by the full-width
   progress bar beside it, so "SEE ALL REVIEW ->" broke onto two lines. */
.testimonial-section .d-flex.justify-content-between {
  max-width: 940px;
  margin-inline: auto;
  margin-top: 1rem !important;
}

.testimonial-section .see-all {
  flex: none;
  white-space: nowrap;
}

/* ---------- FAQ ----------
   Each question is an <h5> with no font-size or margin rule of its own, so it
   fell back to the browser default: a 1.67em top margin (23px) above a 13.9px
   heading - smaller than the answer underneath it, with a big gap above.
   That plus the answer's own bottom margin and the item padding put every
   entry at 130px tall. Tighten the rhythm and let the question actually read
   as the heading. */
.faq-section .faq-item h5 {
  margin-top: 0;
  margin-bottom: .35rem;
  font-size: 1.05rem;
  color: var(--navy);
}

.faq-section .faq-item .faq-answer {
  margin-bottom: 0;
  color: var(--slate);
}

.faq-section .faq-item {
  padding-top: .7rem !important;
  padding-bottom: .7rem !important;
}