/* =========================
   FAQ MODERN LEGAL DESIGN
   15px base / max 1480px
   ========================= */

.pf-faq{
    background:#F6F8FB;
    font-size:15px;
    color:#334155;
    padding:30px 20px;
}

.pf-faq__container{
    max-width:1480px;
    margin:0 auto;
}

/* SECTION TITLE */
.pf-faq__title{
    font-size:28px;
    font-weight:700;
    color:#0F172A;
    margin:24px 0 18px;
}

/* LIST */
.pf-faq__list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* ITEM */
.pf-faq__item{
    background:#FFFFFF;
    -border:1px solid #E2E8F0;
    border-radius:16px;
    overflow:hidden;
    transition:.2s ease;
}

.pf-faq__item:hover{
    border-color:#D6DBF5;
    box-shadow:0 10px 25px rgba(15,23,42,0.06);
}

/* QUESTION */
.pf-faq__question{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;

    padding:18px 20px;
    cursor:pointer;

    color:#0F172A;
    font-weight:600;

    transition:.2s ease;
}

.pf-faq__question:hover{
    background:#EEF2FF;
}

/* TEXT */
.pf-faq__question-text{
    flex:1;
}

/* TOGGLE */
.pf-faq__toggle{
    display:flex;
    align-items:center;
    gap:10px;

    color:#5A50C8;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}

/* ICON */
.pf-faq__toggle-icon{
    width:28px;
    height:28px;
    border-radius:10px;

    background:#EEF2FF;
    -border:1px solid #D6DBF5;

    position:relative;
    transition:.2s ease;
}

/* plus */
.pf-faq__toggle-icon:before,
.pf-faq__toggle-icon:after{
    content:"";
    position:absolute;
    background:#5A50C8;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.pf-faq__toggle-icon:before{
    width:10px;
    height:2px;
}

.pf-faq__toggle-icon:after{
    width:2px;
    height:10px;
}

/* ANSWER */
.pf-faq__answer{
    display:none;
    padding:18px 20px 18px;
    color:#64748B;
    line-height:1.7;
}

/* ACTIVE STATE */
.pf-faq__item.active .pf-faq__answer{
    display:block;
}

.pf-faq__item.active .pf-faq__toggle-icon:after{
    opacity:0;
}

/* ANIMATION */
.pf-faq__answer{
    animation:pfFaqFade .25s ease;
}

@keyframes pfFaqFade{
    from{opacity:0; transform:translateY(-4px);}
    to{opacity:1; transform:translateY(0);}
}

/* MOBILE */
@media (max-width:768px){

    .pf-faq{
        padding:24px 14px;
    }

    .pf-faq__title{
        font-size:22px;
    }

    .pf-faq__question{
        padding:16px;
        font-size:14px;
    }

    .pf-faq__answer{
        padding:0 16px 16px;
        font-size:14px;
    }

}