/*-----------------------------------*\
  #FAQ'S PAGE HEADER
\*-----------------------------------*/

.page-header {
  background: url(../assets/practical1.jpg) center center/cover;
}

/*-----------------------------------*\
  #FAQ's
\*-----------------------------------*/

.faqs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 50vw;
  margin-bottom: 7rem;
}

.faq {
  background: var(--color-gray-0);
  width: 100%;
  cursor: pointer;
  align-self: flex-start;
  border-radius: var(--radius-3);
  transition: var(--transition);
}

.faq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

.faq p {
  padding: 1rem 2rem;
  border-top: 2px solid var(--color-gray-50);
  display: none;
}

.faq.show {
  background: var(--color-primary);
  color: var(--color-gray-0);
  transition: var(--transition);
}

.faq.show h5 {
  color: var(--color-gray-0);
}

.faq.show p {
  display: block;
}

.faq.show i {
  rotate: 180deg;
}

.faqs a {
  align-self: center;
  margin-top: 2rem;
}

/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/* ----------------- MEDIA QUERIES (large-medium screens) ----------------- */

@media (max-width: 991px) {
  .faqs {
    width: 70vw;
  }
}

/* ----------------- MEDIA QUERIES (medium screens) ----------------- */

@media (max-width: 767px) {
  .faqs {
    width: 80vw;
  }
}

/* ----------------- MEDIA QUERIES (small screens) ----------------- */

@media (max-width: 600px) {
  .faqs {
    width: 80%;
    margin: 4rem auto;
  }
}