/* TITLE */
.faq-title {
  max-width:1000px;
  margin:40px auto 10px;
  padding:0 20px;
  margin-left: 90px;
  margin-bottom: 50px;
  margin-top: 95px;
}

.faq-title h1 {
  font-size: 2.2rem;
  font-weight:700;
}

/* FAQ */
 .faq-wrapper {
  width: 80%;
  margin: 20px auto 60px;
  padding: 0;
}


.faq-item {
  border:1px solid #e5e5e5;
  border-radius:10px;
  margin-bottom:12px;
  background:white;
  transition:0.3s;
  margin-bottom: 30px; /* gap increase */
}

.faq-question {
  padding:20px;
  cursor:pointer;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size: 20px;
}

.faq-question:hover {
  color:#ff5a00;
}

.arrow {
  font-size:22px;
  color:#999;
  transition:0.3s;
}

.faq-item.active .arrow {
  transform:rotate(90deg);
  color:#ff5a00;
}

.faq-item.active .faq-question {
  color:#ff5a00;
}

.faq-answer {
  display:none;
  padding:0 20px 20px;
  line-height:1.6;
  color:#555;
}

.faq-item.active .faq-answer {
  display:block;
}

/* CTA */
.faq-cta {
  max-width:1000px;
  margin:60px auto;
  padding:40px;
  background:#ffffff;
  border-radius:16px;
  text-align:center;
}

.cta-buttons {
  margin-top:20px;
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
}

.btn-primary {
  background:#ff5a00;
  color:white;
  padding:14px 28px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
}

.btn-primary,
.btn-outline {
  background:white;
  border:2px solid #ff5a00;
  color:#ff5a00;
  padding:14px 28px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  transition:0.25s ease;
}

.btn-primary:hover,
.btn-outline:hover {
  background:#ff5a00;
  color:white;
}


/* MOBILE */
@media(max-width:768px){
  .faq-hero{height:160px;}
  .faq-title h1{font-size:22px;}
}
@media (max-width:768px){

  /* reduce top spacing */
  .faq-hero{
    height:120px !important;
  }

  .faq-wrapper{
    margin-top:20px !important;
  }

  h1, .faq-title{
    margin-top:10px !important;
  }

  body{
    padding-top:0 !important;
  }

}