/*======================================
FRAMEWORK 10 FAQ
======================================*/

.faq{

padding:var(--space-2xl) 0;

}

.faq-search{

max-width:650px;

margin:60px auto;

}

.faq-search input{

width:100%;

padding:20px;

border-radius:var(--radius-md);

border:none;

background:var(--glass);

color:var(--text);

font-size:18px;

}

.faq-wrapper{

max-width:900px;

margin:auto;

}

.faq-item{

margin-bottom:20px;

border-radius:var(--radius-lg);

overflow:hidden;

background:var(--glass);

border:1px solid var(--glass-border);

}

.faq-question{

width:100%;

padding:28px;

display:flex;

justify-content:space-between;

align-items:center;

background:none;

border:none;

color:var(--text);

font-size:22px;

cursor:pointer;

}

.faq-question span{

font-size:32px;

transition:var(--transition);

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:var(--transition);

}

.faq-answer p{

padding:0 28px 28px;

line-height:1.8;

color:var(--text-light);

}

.faq-item.active .faq-answer{

max-height:250px;

}

.faq-item.active span{

transform:rotate(45deg);

}


/* FAQ Hover */

.faq-item{
transition:var(--transition);
}

.faq-item:hover{
transform:translateY(-6px);
border-color:var(--secondary);
box-shadow:0 20px 50px rgba(0,229,255,.15);
}

.faq-question:hover{
background:rgba(255,255,255,.03);
}

.faq-question span{
transition:var(--transition);
}

.faq-item:hover .faq-question span{
color:var(--secondary);
transform:rotate(90deg);
}