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

.faq{
    background:var(--clrBackground);
}

.faq .container{
    display:flex;
    flex-direction:column;
    gap:var(--space64);
}

/*==================================================
                    SECTION HEADER
==================================================*/

.faq .sectionHeader{
    max-width:760px;
    margin:0 auto;
    text-align:center;
}

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

.faqList{

    display:flex;

    flex-direction:column;

    gap:1.25rem;

}

/*==================================================
                    FAQ ITEM
==================================================*/

.faqItem{

    background:var(--clrSurface);

    border-radius:var(--borderRadiusLg);

    border:1px solid rgba(17,24,39,.08);

    box-shadow:var(--shadowSm);

    overflow:hidden;

    transition:
        box-shadow .3s ease,
        border-color .3s ease;

}

/*==================================================
                    QUESTION
==================================================*/

.faqQuestion{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1.6rem 2rem;

    cursor:pointer;

    list-style:none;

    font-size:1.15rem;

    font-weight:700;

    color:var(--clrHeading);

}

.faqQuestion::-webkit-details-marker{

    display:none;

}

/*==================================================
                    ANSWER
==================================================*/

.faqAnswer{

    padding:0 2rem 2rem;

}

.faqAnswer p{

    margin:0;

    color:var(--clrBody);

    line-height:1.8;

}
/*==================================================
                FAQ TOGGLE ICON
==================================================*/

.faqQuestion::after{

    content:"+";

    display:grid;

    place-items:center;

    width:2rem;

    height:2rem;

    border-radius:50%;

    background:rgba(109,40,217,.08);

    color:var(--clrPrimary);

    font-size:1.35rem;

    font-weight:600;

    flex-shrink:0;

    transition:all .3s ease;

}

.faqItem[open] .faqQuestion::after{

    content:"−";

    background:var(--clrPrimary);

    color:#fff;

}
/*==================================================
                    FOOTER
==================================================*/

.faqFooter{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:var(--space24);

    max-width:650px;

    margin:0 auto;

}

.faqFooterText{

    margin:0;

    color:var(--clrBody);

}
/*==================================================
                    FAQ HOVER
==================================================*/

.faqItem{

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}

.faqItem:hover{

    transform:translateY(-4px);

    border-color:rgba(109,40,217,.2);

    box-shadow:var(--shadowMd);

}

.faqQuestion{

    transition:color .3s ease;

}

.faqItem:hover .faqQuestion{

    color:var(--clrPrimary);

}
/*==================================================
                OPEN STATE
==================================================*/

.faqItem[open]{

    border-color:rgba(109,40,217,.25);

    box-shadow:var(--shadowMd);

}

.faqItem[open] .faqQuestion{

    color:var(--clrPrimary);

}

/*==================================================
                ANSWER ANIMATION
==================================================*/

.faqAnswer{

    opacity:0;

    transform:translateY(-8px);

    transition:
        opacity .3s ease,
        transform .3s ease;

}

.faqItem[open] .faqAnswer{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
                FAQ RESPONSIVE
==================================================*/

@media (max-width:768px){

    .faq .container{

        gap:var(--space48);

    }

    .faqQuestion{

        padding:1.25rem 1.5rem;

        font-size:1rem;

    }

    .faqAnswer{

        padding:0 1.5rem 1.5rem;

    }

    .faqFooter{

        gap:var(--space20);

    }

    .faqFooter .btn{

        width:100%;

        justify-content:center;

    }

}