/* =========================
   FAQ
========================= */

.faq{
  width:90%;
  max-width:1000px;

  margin:100px auto;
}

.faq-header{
  text-align:center;
  margin-bottom:45px;
}

.faq-header h2{
  font-size: 36px;
  color:#433733;
  margin-bottom:12px;
}

.faq-header p{
  color:#7c6d67;
}

.faq-container{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.faq-item{
  background:white;

  border-radius: 8px;

  overflow:hidden;

  box-shadow:0 8px 25px rgba(0,0,0,0.06);
}

.faq-question{
  width:100%;

  border:none;
  background:white;

  padding: 20px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  cursor:pointer;

  font-size:17px;
  font-weight:bold;

  color:#433733;
}

.faq-question span{
  font-size:24px;
  transition:0.3s;
}

.faq-answer{
  max-height:0;
  overflow:hidden;

  transition:0.3s ease;
}

.faq-answer p{
  padding:0 24px 24px;

  color:#72615b;
  line-height:1.7;
}

.faq-item.active .faq-answer{
  max-height:300px;
}

.faq-item.active .faq-question span{
  transform:rotate(45deg);
}


@media screen and (max-width: 468px) {

    .faq-header h2{
      font-size: 16px;
  }

  .faq-question{
    font-size:14px;
  }

  
}