.heading-section {
  background-color: var(--primary-color);
  margin-top: 52px;
}
.heading-section > h1 {
  color: var(--base-color);
  font-family: var(--font-sec);
  text-align: center;
  font-size: 28px;
  font-weight: 800;
}

.faqs {
  width: 90%;
  margin: 50px auto;
  padding: 20px;
  padding-top: 0px;
  font-family: var(--font-pri);
}

.faqs h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
}

details {
  border: 2px solid var(--primary-color);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 15px;
}

summary {
  background-color: var(--primary-color);
  color: var(--base-color);
  padding: 15px 20px;
  font-weight: 600;
  cursor: pointer;
  font-size: 1.1rem;
}

details[open] p {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  padding: 15px 20px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

@media screen and (min-width: 796px) {
  .faqs {
    width: 80%;
  }
  .heading-section {
    border: 4px solid var(--extra-color);
    margin-top: 0px;
  }
  .heading-section h1 {
    font-size: 42px;
  }
}