:root {
  --main-color: #323fbb;
  --accent-color: #009f93;
  --accent-bg-color: #037171;
  --bg-color: #f4f4f9;
  --dark-color: #181d27;
}

.faq.main {
  background-color: white;
  padding-block: 2rem;
  border-radius: 10px;
  filter: drop-shadow(0 0 0.75rem rgba(194, 194, 194, 0.418));
  margin-inline: 0.5rem;
}
.faq-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-text > h1 {
  font-size: 40px;
}

.faq-text > sub {
  color: var(--accent-color);
}

.accordion-container-faq {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1rem;
}

.accordion {
  background-color: #f1f1f1;

  color: #0f0f0f;
  cursor: pointer;
  padding-block: 1rem;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  font-weight: bold;
  transition: background-color 0.3s;

  display: flex;
  align-items: center;
  gap: 1rem;
}

.accordion > svg {
  margin-left: 1rem;
}

.accordion:hover {
  background-color: #ccc;
}

.accordian-button {
  border: none;
  padding: 0;
  background-color: transparent;
  margin: 0;
  font-size: 16px;
}

/* Active class for the accordion button */
.accordion.active {
  background-color: #ccc;
}

/* Panel content with animation */
.panel {
  background-color: #f1f1f1;
  max-height: 0; /* Collapsed by default */
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.panel > p {
  margin-block: 1rem;
  margin-left: 1rem;
}

.accordian-button {
  color: var(--dark-color);
}
@media (max-width: 1000px) {
  .panel > p {
    margin-inline: 0;
    margin-inline: 1rem;
    font-size: 14px;
    margin-block: 0.5rem;
  }

  .accordion {
    padding-block: 0.75rem;
  }
  .accordian-button {
    font-size: 14px;
  }

  .faq-text > h1 {
    font-size: 32px;
  }
}
/* 300 & 400 */

@media (max-width: 768px) {
  .faq-text > h1 {
    font-size: 28px;
  }
  .accordian-button {
    text-align: start;
  }
}