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

.faq-hero{
min-height:70vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;

padding-top:140px;

background:
linear-gradient(
180deg,
rgba(250,204,21,.06),
transparent
);
}

.faq-hero-content{
max-width:800px;
}

.faq-hero h1{
margin-bottom:24px;
}

.faq-hero p{
max-width:650px;
margin:auto;
}

/* ========================================
SEARCH BAR
======================================== */

.faq-search{
padding:40px 8%;
}

.search-container{
max-width:820px;
margin:auto;

height:64px;

display:flex;
align-items:center;
gap:14px;

padding:0 22px;

background:#111;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;

box-shadow:0 14px 35px rgba(0,0,0,.25);
}

.search-container i{
color:var(--primary);
}

.search-container input{
flex:1;

height:100%;

border:none;
outline:none;

background:transparent;

color:#fff;
font-size:1rem;
}

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

.faq-categories{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;

padding:20px 8% 60px;
}

.faq-category{
height:46px;
padding:0 20px;

border-radius:999px;

border:1px solid rgba(255,255,255,.08);

background:#111;
color:#d1d5db;

font-weight:600;
cursor:pointer;

transition:.3s ease;
}

.faq-category:hover,
.faq-category.active{
background:var(--primary);
color:#000;
border-color:var(--primary);
}

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

.faq-list-section{
padding-top:0;
}

.faq-list{
max-width:1000px;
margin:0 auto;

display:flex;
flex-direction:column;
gap:18px;
}

.faq-item{
background:#111;

border:1px solid rgba(255,255,255,.08);

border-radius:20px;

overflow:hidden;

transition:.3s ease;

box-shadow:
0 10px 25px rgba(0,0,0,.15);
}

.faq-item:hover{
border-color:rgba(250,204,21,.35);
transform:translateY(-2px);
}

.faq-question{
width:100%;

background:none;
border:none;

padding:24px 28px;

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

gap:20px;

cursor:pointer;

color:#fff;
text-align:left;
}

.faq-question span{
font-size:1.05rem;
font-weight:700;
}

.faq-question i{
color:var(--primary);
transition:.3s ease;
}

.faq-answer{
display:none;

padding:0 28px 24px;
}

.faq-answer p{
color:#bdbdbd;
line-height:1.8;
}

.faq-item.open{
border-color:var(--primary);

box-shadow:
0 15px 40px rgba(250,204,21,.08);
}

.faq-item.open .faq-question i{
transform:rotate(45deg);
}

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

/* ========================================
CONTACT CTA
======================================== */

.faq-contact{
text-align:center;

padding-top:100px;
}

.faq-contact h2{
margin-bottom:16px;
}

.faq-contact p{
margin-bottom:32px;
}

.faq-contact-actions{
display:flex;
justify-content:center;
gap:16px;
}

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

@media(max-width:768px){

.faq-contact-actions{
flex-direction:column;
}

.faq-categories{
justify-content:flex-start;
overflow-x:auto;
flex-wrap:nowrap;
padding-bottom:40px;
}

.faq-question{
padding:20px;
}

.faq-answer{
padding:0 20px 20px;
}

}