/* =========================
PAGE BANNER
========================= */

.page-banner{
  background:
  linear-gradient(135deg, rgba(15,23,42,0.85), rgba(108,59,255,0.85)),
  url('/images/hero2.jpg');
  background-size:cover;
  background-position:center;
  padding:160px 0 90px;
  text-align:center;
  color:#fff;
}

.page-banner h1{
  font-size:54px;
  font-weight:800;
}

.page-banner p{
  margin-top:15px;
  color:#e2e8f0;
  max-width:700px;
  margin:auto;
}

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

.faq-container{
  max-width:900px;
  margin:auto;
}

.faq-item{
  background:#fff;
  margin-bottom:20px;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.05);
  transition:0.3s;
}

.faq-item:hover{
  box-shadow:0 20px 50px rgba(108,59,255,0.15);
}

.faq-question{
  width:100%;
  padding:22px 25px;
  background:none;
  border:none;
  text-align:left;
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  position:relative;
}

/* PLUS ICON */
.faq-question::after{
  content:"+";
  position:absolute;
  right:25px;
  font-size:22px;
  color:#6C3BFF;
  transition:0.3s;
}

/* ANSWER */
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:0.4s ease;
  padding:0 25px;
}

.faq-answer p{
  padding-bottom:20px;
  color:#475569;
  line-height:1.7;
}

/* ACTIVE STATE (JS USE) */
.faq-item.active .faq-answer{
  max-height:200px;
}

.faq-item.active .faq-question::after{
  content:"−";
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

.page-banner h1{
  font-size:34px;
}

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

}