/*--------------------------------------------------------------
# Page FAQ
--------------------------------------------------------------*/

.page-faq {
  /* Section FAQs
--------------------------------------------- */

  .section-faq {
    > .wrapper {
      max-width: var(--max-w-xl);
      margin: 0 auto;
      padding: var(--padding-xxl) 24px;

      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 3rem;

      @media (min-width: 960px) {
        gap: 4.5rem;
      }
    }

    .title {
      margin-bottom: 1.5rem;
      font-size: var(--font-3xl);
      line-height: 1.2;
      font-weight: bold;
    }

    .faqs .faq-item details {
      margin-bottom: 1.5rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid var(--base-100);
    }

    .faqs .faq-item details summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1.5rem;
    }

    .faqs .faq-item details summary .question {
      font-weight: bold;
    }

    .faqs .faq-item details summary .symbol::after {
      width: 2.75rem;
      height: 2.75rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 100%;
      background-color: var(--primary-100);
      content: "\e313";
    }

    .faqs .faq-item details[open] summary .symbol::after {
      content: "\e316";
    }

    .faqs .faq-item details .content {
      margin: 1.5rem 0;
      max-width: var(--max-w-md);

      .answer p:not(:last-of-type) {
        margin-bottom: 1.5rem;
      }
    }
  }
}