/* FAQ Container */
.faq-container,
.faqs-container {
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  margin: 0 auto;
  padding: var(--Space-5, 20px) var(--Space-10, 40px);
}

.faqs-title-container {
  display: flex;
  padding: var(--Space-4, 16px) 0px var(--Space-8, 32px) 0px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--Space-2, 8px);
  align-self: stretch;
}

/* FAQ Title */
.faqs-title {
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: 40px;
  font-weight: var(--Body-Font-Weight-Strong, 600);
  color: var(--On-background-Brand-Default, #231f20);
  margin-bottom: var(--Space-5, 20px);
  text-align: center;
}

/* FAQ Content */
.faqs-content-container {
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Large, 20px);
  line-height: 1.7;
  color: var(--On-background-Brand-Default, #231f20);
}

.faqs-content-container p {
  margin-bottom: var(--Space-6, 24px);
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Large, 20px);
  font-weight: var(--Body-Font-Weight-Regular, 400);
  line-height: 150%;
}

/* FAQ Cards */
.faqs-content .card {
  border: 1px solid var(--Background-Global-Secondary, #faf5f0);
  border-radius: var(--Radius-sm, 4px);
  margin-bottom: var(--Space-5, 20px);
  background: #ffffff;
}

.faqs-content .card-header {
  background: var(--Background-Global-Secondary, #faf5f0);
  border-bottom: 1px solid var(--Background-Global-Secondary, #faf5f0);
  padding: var(--Space-4, 16px);
}

.faqs-content .card-header h5 {
  margin: 0;
}

.faqs-content .card-header button {
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Large, 20px);
  font-weight: var(--Body-Font-Weight-Strong, 600);
  color: var(--On-background-Brand-Default, #231f20);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  width: 100%;
  line-height: 150%;
}

.faqs-content .card-header button:hover,
.faqs-content .card-header button:focus {
  color: var(--Background-Brand-Primary, #520f09);
  text-decoration: none;
}

.faqs-content .card-body {
  padding: var(--Space-5, 20px);
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Large, 20px);
  font-weight: var(--Body-Font-Weight-Regular, 400);
  line-height: 150%;
  color: var(--On-background-Brand-Default, #231f20);
}

.faqs-content .card-body p {
  margin-bottom: var(--Space-6, 24px);
}

.faqs-content .card-body ul,
.faqs-content .card-body ol {
  margin-bottom: var(--Space-6, 24px);
  padding-left: var(--Space-8, 32px);
}

.faqs-content .card-body li {
  margin-bottom: var(--Space-2, 8px);
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Large, 20px);
  font-weight: var(--Body-Font-Weight-Regular, 400);
  line-height: 150%;
}

/* Mobile Responsive */
@media (max-width: 575px) {
  .faq-container,
  .faqs-container {
    padding: var(--Space-3, 12px) var(--Space-4, 16px);
  }

  .faqs-title-container {
    margin-bottom: var(--Space-3, 12px);
  }

  .faqs-title {
    font-size: 24px;
    margin-bottom: var(--Space-3, 12px);
  }

  .faqs-content-container p,
  .faqs-content .card-body p,
  .faqs-content .card-body li {
    font-size: var(--Body-Size-Medium, 18px);
  }

  .faqs-content .card-header button {
    font-size: var(--Body-Size-Medium, 18px);
  }

  .faqs-content .card-body {
    font-size: var(--Body-Size-Medium, 18px);
  }

  .faqs-content .card-body ul,
  .faqs-content .card-body ol {
    padding-left: var(--Space-5, 20px);
  }
}

/* Tablet Responsive */
@media (min-width: 576px) and (max-width: 991px) {
  .faq-container,
  .faqs-container {
    padding: var(--Space-4, 16px) var(--Space-5, 20px);
  }

  .faqs-title {
    font-size: 32px;
  }

  .faqs-content-container p,
  .faqs-content .card-body p,
  .faqs-content .card-body li {
    font-size: var(--Body-Size-Medium, 18px);
  }

  .faqs-content .card-header button {
    font-size: var(--Body-Size-Medium, 18px);
  }

  .faqs-content .card-body {
    font-size: var(--Body-Size-Medium, 18px);
  }
}

/* Desktop Responsive */
@media (min-width: 992px) {
  .faq-container,
  .faqs-container {
    padding: var(--Space-5, 20px) var(--Space-10, 40px);
  }

  .faqs-title {
    font-size: 40px;
    margin-bottom: var(--Space-4, 16px);
  }

  .faqs-title-content-separator-container hr {
    margin: var(--Space-10, 40px) auto;
  }

  .faqs-content-container p,
  .faqs-content .card-body p,
  .faqs-content .card-body li {
    font-size: var(--Body-Size-Large, 20px);
  }

  .faqs-content .card-header button {
    font-size: var(--Body-Size-Large, 20px);
  }

  .faqs-content .card-body {
    font-size: var(--Body-Size-Large, 20px);
  }
}