:root {
    /* =========================
   FAQ VARIABLES
========================= */

/* section */
--faq-padding:120px;

--faq-bg:
linear-gradient(
180deg,
#0b0c0e 100%
);

/* wrapper */
--faq-wrapper-width:900px;

/* header */
--faq-header-margin:50px;

--faq-title-size:44px;
--faq-title-weight:900;
--faq-title-color:#fff;
--faq-title-spacing:-1px;

--faq-subtitle-margin:10px;
--faq-subtitle-color:#9aa3ad;

/* list */
--faq-list-gap:12px;

/* item */
--faq-item-border:
rgba(255,255,255,0.08);

--faq-item-bg:
rgba(255,255,255,0.02);

--faq-item-radius:14px;

/* question */
--faq-question-padding:18px 20px;

--faq-question-color:#d5d4d4;
--faq-question-size:15px;
--faq-question-weight:800;

/* ONLY COLOR CHANGED */
--faq-icon-size:20px;
--faq-icon-color:#4f86c6;

/* answer */
--faq-answer-padding:0 20px;

--faq-answer-color:#9aa3ad;
--faq-answer-size:14px;
--faq-answer-line:1.7;

--faq-answer-active-padding:
0 20px 18px;

--faq-answer-max:200px;

/* mobile */
--faq-mobile-title:32px;
}



/* =========================
   FAQ SECTION
========================= */

.faq{

padding:var(--faq-padding) 0;

background:
var(--faq-bg);

}

.faq-wrapper{

max-width:
var(--faq-wrapper-width);

margin:auto;

}

.faq-header{

text-align:center;

margin-bottom:
var(--faq-header-margin);

}

.faq-header h2{

font-size:
var(--faq-title-size);

font-weight:
var(--faq-title-weight);

color:
var(--faq-title-color);

letter-spacing:
var(--faq-title-spacing);

}

.faq-header p{

margin-top:
var(--faq-subtitle-margin);

color:
var(--faq-subtitle-color);

}

.faq-list{

display:flex;

flex-direction:column;

gap:
var(--faq-list-gap);

}

/* ITEM */

.faq-item{

border:
1px solid var(--faq-item-border);

background:
var(--faq-item-bg);

border-radius:
var(--faq-item-radius);

overflow:hidden;

}

/* QUESTION */

.faq-question{

width:100%;

padding:
var(--faq-question-padding);

background:none;

border:none;

color:
var(--faq-question-color);

font-weight:
var(--faq-question-weight);

font-size:
var(--faq-question-size);

display:flex;

justify-content:space-between;

align-items:center;

cursor:pointer;

}

.faq-question span{

font-size:
var(--faq-icon-size);

color:
var(--faq-icon-color);

transition:.3s;

}

/* ANSWER */

.faq-answer{

max-height:0;

overflow:hidden;

padding:
var(--faq-answer-padding);

color:
var(--faq-answer-color);

font-size:
var(--faq-answer-size);

line-height:
var(--faq-answer-line);

transition:.3s ease;

}

/* ACTIVE */

.faq-item.active .faq-answer{

max-height:
var(--faq-answer-max);

padding:
var(--faq-answer-active-padding);

}

.faq-item.active .faq-question span{

transform:rotate(45deg);

}

/* MOBILE */

@media(max-width:768px){

.faq-header h2{

font-size:
var(--faq-mobile-title);

}

}