:root{

/* =========================
   FAQ SECTION
========================= */

/* section */
--faq-padding:140px 0;
--faq-bg:rgba(255,122,24,0.05);
--faq-color:rgb(220, 219, 219);

/* head */
--faq-head-margin:50px;

--faq-title-size:clamp(34px,4vw,54px);
--faq-title-spacing:-1px;

--faq-text-margin:10px;
--faq-text-color:rgba(255,255,255,0.6);

/* list */
--faq-list-width:min(900px,92%);
--faq-list-gap:14px;

/* item */
--faq-item-border:
1px solid rgba(255,122,24,0.12);

--faq-item-radius:14px;

--faq-item-bg:
rgba(255,255,255,0.02);

--faq-item-transition:.3s ease;

--faq-item-hover:
rgba(255,122,24,0.25);

/* question */
--faq-question-padding:18px 20px;

--faq-question-size:15px;
--faq-question-weight:600;

--faq-question-color:#fff;

/* icon */
--faq-icon-size:22px;
--faq-icon-color:#ff7a18;
--faq-icon-transition:.3s ease;

--faq-icon-active:#ff9a3d;
--faq-icon-rotate:rotate(45deg);

/* answer */
--faq-answer-max:200px;

--faq-answer-padding:0 20px;
--faq-answer-padding-active:0 20px 18px;

--faq-answer-size:14px;
--faq-answer-line:1.7;

--faq-answer-color:
rgba(255,255,255,0.65);

--faq-answer-transition:.35s ease;

/* active */
--faq-active-shadow:
0 20px 50px rgba(0,0,0,0.4);

--faq-active-border:
rgba(255,122,24,0.3);

}



.faq{

padding:var(--faq-padding);

background:var(--faq-bg);

color:var(--faq-color);
}

.faq-head{

text-align:center;

margin-bottom:var(--faq-head-margin);
}

.faq-head h2{

font-size:var(--faq-title-size);

letter-spacing:var(--faq-title-spacing);
}

.faq-head p{

color:var(--faq-text-color);

margin-top:var(--faq-text-margin);
}

/* list */

.faq-list{

width:var(--faq-list-width);

margin:auto;

display:flex;

flex-direction:column;

gap:var(--faq-list-gap);
}

/* item */

.faq-item{

border:var(--faq-item-border);

border-radius:var(--faq-item-radius);

overflow:hidden;

background:var(--faq-item-bg);

transition:var(--faq-item-transition);
}

.faq-item:hover{

border-color:var(--faq-item-hover);
}

/* question */

.faq-question{

width:100%;

padding:var(--faq-question-padding);

background:none;

border:none;

color:var(--faq-question-color);

display:flex;

justify-content:space-between;

align-items:center;

font-size:var(--faq-question-size);

font-weight:var(--faq-question-weight);

cursor:pointer;
}

.faq-icon{

font-size:var(--faq-icon-size);

color:var(--faq-icon-color);

transition:var(--faq-icon-transition);
}

/* 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:var(--faq-answer-transition);
}

/* active */

.faq-item.active .faq-answer{

max-height:var(--faq-answer-max);

padding:var(--faq-answer-padding-active);
}

.faq-item.active .faq-icon{

transform:var(--faq-icon-rotate);

color:var(--faq-icon-active);
}

.faq-item.active{

box-shadow:var(--faq-active-shadow);

border-color:var(--faq-active-border);
}