/* F.A.Q container */
.faq_container{
    padding: 80px 150px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* Specific category */
.faq_category{
    display: flex;
    gap: 100px;
    justify-content: center;
}

/* Category title */
.faq_category_title{
    min-width: 210px;
    height: 50px;
    padding: 10px 20px;
    border-top: 2px solid var(--purple1);
}

/* Questions/answers container */
.faq_category_questions_answers{
    width: 700px;
    border-radius: 5px;
    border: 1px solid var(--grey2);  
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 20px 5px 20px;
}

/* Plus sign */
.faq_category_questions_answers .question::after{
    content: "\002B";
    font-size: 20px;
    transition: transform .2s ease;
    color: black;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}

/* Minus sign */
.faq_category_questions_answers .question.active::after {
    content: "\2212";
    color: var(--purple1);
}

/* Plus/minus sign */
.faq_category_questions_answers .question.active::after, .faq_category_questions_answers .question::after {
    font-size: 25px;
}

/* Question */
.faq_category_questions_answers .question {
    cursor: pointer;
    position: relative;
    margin-bottom: 15px;
}

/* card transition when expanded/collapsed */
.faq_category_questions_answers .answer{
    max-height: 0;
    transition: max-height .4s ease;
    overflow: hidden;
    color: var(--grey1);
    width: 100%;
    text-wrap: balance;
}

/* Question */
.question-text{
    font-weight: 500;
    font-size: 16px;
    padding-right: 30px;
    display: inline-block;
}

/* Questions/answers container */
.faq_category_questions_answers:has(.active){
    padding: 20px;
}

/* Specific category container */
.specific_category_faq{
    display: flex;
    flex-direction: column;
    gap: 20px;
}


@media screen and (max-width:1199px){

    /* Questions/answers container */
    .faq_category_questions_answers {
        width: 600px;
    }

    /* Question text */
    .question-text{
        font-size: 17px;
    }

    /* Answer text */
    .answer{
        font-size: 13px;
    }

}

@media screen and (max-width:1000px){

    /* Specific category */
    .faq_category{
        flex-direction: column;
        gap: 15px;
    }

    /* Whole F.A.Q container */
    .faq_container{
        padding: 80px 100px;
    }

    /* Questions/answers */
    .faq_category_questions_answers{
        width: 100%;
    }

    /* Category title */
    .faq_category_title{
        width: fit-content;
        min-width: unset;
        height: 40px;
        min-width: 150px;
    }

    /* Category title text */
    .faq_category_title > .h3{
        font-size: 18px;
        text-align: center;
    }

    /* Answer */
    .answer{
        text-wrap: initial;
    }
}

@media screen and (max-width:767px){

    /* Whole F.A.Q container */
    .faq_container{
        padding: 50px 50px;
    }

    /* F.A.Q card question section when expanded */
    .faq_category_questions_answers .question.active::after, .faq_category_questions_answers .question::after{
        font-size: 23px;
    }
    /* F.A.Q card question section */
    .faq_category_questions_answers  {
        width: 100%
    }

    /* F.A.Q card container */
    .faq_category_questions_answers {
        padding: 20px 20px 5px 20px;
    }

    /* Active(expanded) container */
    .faq_category_questions_answers:has(.active) {
        padding: 20px;
    }

    /* F.A.Q card question section */
    .question-text{
        font-size: 14px;
        font-weight: 500;
    }

    /* F.A.Q card answer section */
    .answer{
        font-size: 14px;
    }
}

@media screen and (max-width:460px){

    /* Whole F.A.Q container */
    .faq_container{
        padding: 50px 20px;
    }

}