@layer components;

.testimonials-section {
  overflow: hidden;
  background-color: var(--color-white);
  padding-block: calc(var(--spacing) * 10);
}

@media (min-width: 48rem) {
  .testimonials-section {
    padding-block: calc(var(--spacing) * 14);
  }
}

@media (min-width: 64rem) {
  .testimonials-section {
    padding-block: calc(var(--spacing) * 28);
  }
}

@media (min-width: 80rem) {
  .testimonials-section {
    overflow: visible;
  }
}

.testimonials-block {
  margin-inline: auto;
  max-width: calc(var(--spacing) * 304);
}

.testimonials-list {
  position: relative;
  margin-top: calc(var(--spacing) * 8);
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(var(--spacing) * 3);
  padding-inline: calc(var(--spacing) * 4);
}

@media (min-width: 48rem) {
  .testimonials-list {
    margin-top: calc(var(--spacing) * 16);
  }
}

.testimonials-item {
  grid-column: span 6 / span 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border-radius: var(--radius-xl);
  background-color: var(--color-background-secondary);
  padding: calc(var(--spacing) * 3);
  opacity: 1;
  transform: none;
  box-shadow: 0 1px 2px var(--color-shadow-5), 0 10px 22px var(--color-primary-base-10);
}

@media (min-width: 48rem) {
  .testimonials-item {
    grid-column: span 3 / span 3;
  }
}

@media (min-width: 64rem) {
  .testimonials-item {
    grid-column: span 2 / span 2;
  }
}

@media (min-width: 80rem) {
  .testimonials-item {
    border-radius: var(--radius-2xl);
  }
}

.testimonials-figure {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: calc(var(--spacing) * 5);
}

.testimonials-block-2 {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: calc(var(--spacing) * 6);
  border-radius: var(--radius-xl);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 4);
}

.testimonials-block-3 {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}

.testimonials-text {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  color: var(--color-text-primary);
}

.testimonials-text-2 {
  font-size: var(--text-md);
  line-height: var(--tw-leading, var(--text-md--line-height));
  color: var(--color-text-secondary);
}

.testimonials-figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 3);
}

.testimonials-block-4 {
  display: flex;
  align-items: center;
  column-gap: calc(var(--spacing) * 3);
}

.testimonials-image {
  width: calc(var(--spacing) * 11);
  height: calc(var(--spacing) * 11);
  border-radius: 3.40282e38px;
}

.testimonials-block-5 {
  display: flex;
  align-items: center;
  gap: 1px;
}

.testimonials-icon {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  color: var(--color-yellow-400);
}

.content-section {
  padding-block: calc(var(--spacing) * 10);
}

@media (min-width: 48rem) {
  .content-section {
    padding-block: calc(var(--spacing) * 14);
  }
}

@media (min-width: 64rem) {
  .content-section {
    padding-block: calc(var(--spacing) * 28);
  }
}

.faq-list {
  margin-inline: auto;
  margin-top: calc(var(--spacing) * 10);
  max-width: calc(var(--spacing) * 165);
  padding-inline: calc(var(--spacing) * 4);
}

@media (min-width: 64rem) {
  .faq-list {
    margin-top: calc(var(--spacing) * 16);
  }
}

@media (min-width: 80rem) {
  .faq-list {
    padding-inline: calc(var(--spacing) * 0);
  }
}

.faq-item {
  border-radius: var(--radius-xl);
  background-color: var(--color-white);
  padding-inline: calc(var(--spacing) * 2);
  opacity: 1;
  transform: none;
}

@media (min-width: 48rem) {
  .faq-item {
    border-radius: 20px;
  }
}

.faq-block {
  overflow: hidden;
}

.faq-button {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 6);
  text-align: start;
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light);
  color: var(--color-text-primary);
}

.faq-button:focus-visible {
  outline-color: var(--color-primary-base);
}

.faq-icon {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
  flex-shrink: 0;
}

.faq-block-2 {
  margin-bottom: calc(var(--spacing) * 2);
  border-radius: var(--radius-xl);
  background-color: var(--color-background-secondary);
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 6);
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light);
  color: var(--color-text-secondary);
}

.cta-section {
  background-color: var(--color-white);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 10);
}

@media (min-width: 48rem) {
  .cta-section {
    padding-block: calc(var(--spacing) * 14);
  }
}

@media (min-width: 64rem) {
  .cta-section {
    padding-block: calc(var(--spacing) * 28);
  }
}

@media (min-width: 80rem) {
  .cta-section {
    padding-inline: calc(var(--spacing) * 0);
  }
}

.cta-block {
  position: relative;
  isolation: isolate;
  margin-inline: auto;
  display: flex;
  max-width: calc(var(--spacing) * 304);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  background-image: linear-gradient(var(--color-teal-50-40) 0%, var(--color-teal-50) 100%);
  background-size: cover;
  padding-block: calc(var(--spacing) * 10);
}

@media (min-width: 48rem) {
  .cta-block {
    border-radius: 28px;
    padding-block: calc(var(--spacing) * 14);
  }
}

@media (min-width: 64rem) {
  .cta-block {
    height: calc(var(--spacing) * 113);
  }
}

.cta-content {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: calc(var(--spacing) * 4);
  text-align: center;
}

@media (min-width: 64rem) {
  .cta-content {
    max-width: calc(var(--spacing) * 207.25);
  }
}

.cta-heading {
  width: 100%;
  max-width: 90%;
  font-size: var(--text-display-sm);
  line-height: var(--tw-leading, var(--text-display-sm--line-height));
  --tw-tracking: calc(0.96px * -1);
  letter-spacing: -0.96px;
  color: var(--color-text-primary);
}

@media (min-width: 48rem) {
  .cta-heading {
    max-width: 45%;
  }
}

@media (min-width: 64rem) {
  .cta-heading {
    max-width: calc(var(--spacing) * 162.5);
    font-size: var(--text-display-lg);
    line-height: var(--tw-leading, var(--text-display-lg--line-height));
  }
}

.cta-text {
  margin-top: calc(var(--spacing) * 2);
  max-width: calc(var(--spacing) * 100);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light);
  --tw-tracking: 0.48px;
  letter-spacing: 0.48px;
  color: var(--color-text-secondary);
}

@media (min-width: 48rem) {
  .cta-text {
    max-width: calc(var(--spacing) * 100);
  }
}

@media (min-width: 64rem) {
  .cta-text {
    margin-top: calc(var(--spacing) * 4);
    max-width: calc(var(--spacing) * 130);
    font-size: var(--text-md);
    line-height: var(--tw-leading, var(--text-md--line-height));
  }
}

.social-icon {
  width: calc(var(--spacing) * 4.5);
  height: calc(var(--spacing) * 4.5);
}