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

.faq-hero{

padding-top:150px;

text-align:center;

background:linear-gradient(180deg,#F8FBFF,#fff);

}

.faq-content{

max-width:760px;

margin:auto;

}

.faq-search{

margin-top:35px;

position:relative;

}

.faq-search input{

width:100%;

padding:18px 20px 18px 55px;

border-radius:999px;

border:1px solid #ddd;

font-size:16px;

}

.faq-search i{

position:absolute;

left:22px;

top:50%;

transform:translateY(-50%);

color:#888;

}

/*=====================================
        FILTER
======================================*/

.faq-buttons{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.faq-btn{

padding:12px 24px;

border-radius:999px;

border:none;

background:#F1F5F9;

cursor:pointer;

font-weight:600;

}

.faq-btn.active{

background:var(--primary);

color:#fff;

}

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

.faq-list{

padding-top:20px;

}

.faq-item{

margin-bottom:20px;

overflow:hidden;

border-radius:20px;

}

.faq-question{

display:flex;

justify-content:space-between;

align-items:center;

padding:24px;

cursor:pointer;

}

.faq-question h3{

font-size:20px;

font-weight:600;

}

.faq-question i{

font-size:20px;

transition:.3s;

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .35s ease;

padding:0 24px;

}

.faq-answer p{

padding-bottom:24px;

line-height:1.8;

color:#64748B;

}

.faq-item.active .faq-answer{

max-height:250px;

}

.faq-item.active .faq-question i{

transform:rotate(45deg);

color:var(--primary);

}

/*=====================================
        EMPTY
======================================*/

.faq-empty{

padding:80px 20px;

text-align:center;

}

.faq-empty i{

font-size:70px;

color:var(--primary);

margin-bottom:20px;

}

.faq-empty h3{

margin-bottom:10px;

font-size:28px;

}

.faq-empty p{

color:#64748B;

}

/*=====================================
        ACTION BUTTONS
======================================*/

.faq-actions{

padding-bottom:30px;

}

.action-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

/*=====================================
        HELP SECTION
======================================*/

.faq-help{

background:linear-gradient(
135deg,
#07111F,
#0E1C31
);

}

.help-card{

padding:80px 40px;

text-align:center;

border-radius:30px;

background:rgba(255,255,255,.05);

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

backdrop-filter:blur(18px);

}

.help-card h2{

color:#fff;

font-size:42px;

margin:20px 0;

}

.help-card p{

color:#CBD5E1;

max-width:700px;

margin:auto;

line-height:1.9;

margin-bottom:40px;

}

.help-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

@media(max-width:768px){

.help-card{

padding:45px 25px;

}

.help-card h2{

font-size:30px;

}

}
/*=====================================
        ACTION BUTTONS
======================================*/

.faq-actions{

padding-top:20px;
padding-bottom:50px;

}

.action-buttons{

display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;

}

/*=====================================
        HELP SECTION
======================================*/

.faq-help{

background:linear-gradient(135deg,#07111F,#0E1C31);

}

.help-card{

padding:80px 40px;
text-align:center;
border-radius:30px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(18px);

}

.help-card h2{

color:#fff;
font-size:42px;
margin:20px 0;

}

.help-card p{

max-width:700px;
margin:auto;
margin-bottom:40px;
color:#CBD5E1;
line-height:1.8;

}

.help-buttons{

display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;

}

@media(max-width:768px){

.help-card{

padding:45px 25px;

}

.help-card h2{

font-size:30px;

}

}