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

.faq {
    position: relative;
    padding: 7rem 0;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f7f9fc 100%
    );
    overflow: hidden;
}

.faq::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:280px;
    height:280px;
    background:rgba(244,180,0,.08);
    border-radius:50%;
    filter:blur(10px);
}

.faq::after{
    content:"";
    position:absolute;
    bottom:-150px;
    left:-120px;
    width:320px;
    height:320px;
    background:rgba(10,56,87,.05);
    border-radius:50%;
}


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

.faq__wrapper{
    max-width:900px;
    margin:4rem auto 0;
    display:flex;
    flex-direction:column;
    gap:1rem;
    position:relative;
    z-index:2;
}


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

.faq-item{
    background:#ffffff;
    border:1px solid rgba(10,56,87,.08);
    border-radius:18px;
    overflow:hidden;
    transition:.35s ease;
}

.faq-item:hover{
    border-color:rgba(244,180,0,.45);
    box-shadow:0 18px 40px rgba(10,56,87,.08);
    transform:translateY(-2px);
}


/*==================================================
            REMOVE DEFAULT MARKER
==================================================*/

.faq-item summary{
    list-style:none;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}


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

.faq-item__question{

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:2rem;

    padding:1.5rem 1.8rem;

    cursor:pointer;

    font-size:1.05rem;
    font-weight:700;
    line-height:1.5;

    color:var(--color-primary);

    transition:.3s;
}

.faq-item__question:hover{
    color:var(--color-gold);
}


/*==================================================
                ICON
==================================================*/

.faq-item__icon{

    width:42px;
    height:42px;

    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(10,56,87,.06);

    color:var(--color-primary);

    transition:.35s;
}

.faq-item__icon i{
    transition:.35s;
}


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

.faq-item[open]{

    border-color:rgba(244,180,0,.45);

    box-shadow:0 20px 45px rgba(10,56,87,.08);

}

.faq-item[open]
.faq-item__icon{

    background:var(--color-gold);

    color:var(--color-primary);

}

.faq-item[open]
.faq-item__icon i{

    transform:rotate(45deg);

}

.faq-item[open]
.faq-item__question{

    color:var(--color-primary);

}


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

.faq-item__answer{

    padding:0 1.8rem 1.6rem;

    color:var(--color-text-light);

    line-height:1.9;

    font-size:.95rem;

}

.faq-item__answer p{

    margin:0;

}


/*==================================================
                MOBILE
==================================================*/

@media (max-width:768px){

    .faq{

        padding:5rem 0;

    }

    .faq__wrapper{

        margin-top:3rem;

    }

    .faq-item__question{

        padding:1.2rem;

        font-size:1rem;

        gap:1rem;

    }

    .faq-item__answer{

        padding:0 1.2rem 1.3rem;

        font-size:.9rem;

        line-height:1.8;

    }

    .faq-item__icon{

        width:38px;
        height:38px;

    }

}

@media (max-width:480px){

    .faq-item__question{

        font-size:.95rem;

    }

    .faq-item__icon{

        width:34px;
        height:34px;

    }

}