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

.faq-section{

    padding:100px 20px;

    background:#f8f8fb;
}

.faq-container{

    max-width:1100px;

    margin:auto;
}

.faq-tag{

    display:block;

    width:max-content;

    margin:0 auto 20px;

    padding:8px 18px;

    border-radius:30px;

    background:#f0ebff;

    color:#7c3aed;

    font-size:15px;

    font-weight:600;
}

.faq-title{

    text-align:center;

    font-size:50px;

    font-weight:700;

    color:#222;

    margin-bottom:60px;
}



/* FAQ CARD */

.faq-item{

    background:#fff;

    border-radius:18px;

    margin-bottom:18px;

    box-shadow:0 8px 30px rgba(0,0,0,.06);

    overflow:hidden;

    transition:.3s;
}


/* ACTIVE CARD */

.faq-item.active{

    background:linear-gradient(
        135deg,
        #f8770e,
        #daa981
    );

    color:white;
}


.faq-question{

    width:100%;

    border:none;

    background:none;

    display:flex;

    align-items:center;

    gap:18px;

    padding:28px 30px;

    cursor:pointer;

    text-align:left;

    font-size:26px;

    font-weight:600;

    color:inherit;
}


/* ICON */

.icon{

    min-width:40px;

    width:40px;

    height:40px;

    border-radius:50%;

    background:white;

    color:#f8770e;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

    flex-shrink:0;
}


/* ANSWER */

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

    padding:0 88px;

    font-size:17px;

    line-height:1.8;
}


.faq-item.active .faq-answer{

    max-height:300px;

    padding:0 88px 30px;
}


.faq-item.active .faq-question{

    color:white;
}


/*=========================
 TABLET
=========================*/

@media(max-width:991px){

.faq-title{

    font-size:42px;
}

.faq-question{

    font-size:20px;

    padding:22px;
}

.faq-answer{

    padding:0 70px;
}

.faq-item.active .faq-answer{

    padding:0 70px 25px;
}

}


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

@media(max-width:768px){

.faq-section{

    padding:40px 15px;
}

.faq-title{

    font-size:34px;

    line-height:1.2;
}

.faq-question{

    font-size:17px;

    padding:18px;
}

.icon{

    width:34px;

    height:34px;

    min-width:60px;

    font-size:20px;
}

.faq-answer{

    padding:0 20px 0 70px;

    font-size:15px;
}

.faq-item.active .faq-answer{

    padding:0 20px 20px 70px;
}

}