/* ===========================
   FAQ PREMIUM
   BUMBY
=========================== */



.faq-section {

    background:

    linear-gradient(

        180deg,

        var(--lavender),

        var(--cream)

    );

}





.faq-container {

    max-width:

    900px;


    margin:

    70px auto 0;

}





.faq-item {

    background:

    rgba(255,255,255,.75);


    border-radius:

    30px;


    margin-bottom:

    25px;


    overflow:hidden;


    border:

    1px solid rgba(255,255,255,.8);


    box-shadow:

    0 15px 35px rgba(80,50,70,.10);


    transition:

    transform .35s ease,

    box-shadow .35s ease;

}





.faq-item:hover {

    transform:

    translateY(-5px);


    box-shadow:

    var(--shadow-soft);

}





.faq-question {

    width:100%;


    border:none;


    background:none;


    padding:

    20px 30px;


    display:flex;


    justify-content:space-between;


    align-items:center;


    cursor:pointer;


    font-family:

    var(--font-body);


    font-size:

    1.3rem;


    font-weight:

    600;


    color:

    var(--dark);

}





.faq-question b {

    font-size:

    2rem;


    font-weight:

    400;


    color:

    var(--purple);


    transition:

    transform .35s ease;

}





.faq-answer {

    font-family:

    var(--font-body);


    font-size:

    1.2rem;


    font-weight:

    600;


    color:

    var(--dark);


    max-height:

    0;


    overflow:hidden;


    opacity:

    0;


    transform:

    translateY(-10px);


    transition:

    max-height .7s cubic-bezier(.22,1,.36,1),

    opacity .4s ease,

    transform .4s ease;

}





.faq-answer p {

    padding:

    0 35px 15px;


    margin:

    0;


    line-height:

    1.7;


    color:

    var(--brown);

}





.faq-item.active {

    box-shadow:

    0 25px 60px rgba(80,50,70,.15);

}





.faq-item.active .faq-answer {

    max-height:

    500px;


    opacity:

    1;


    transform:

    translateY(0);

}





.faq-item.active .faq-question b {

    transform:

    rotate(45deg);

}





@media(max-width:600px){


    .faq-container {

        margin-top:

        40px;

    }



    .faq-item {

        margin-bottom:

        18px;


        border-radius:

        25px;

    }



    .faq-question {

        padding:

        16px 18px;


        font-size:

        1.1rem;


        font-weight:

        600;

    }



    .faq-question b {

        font-size:

        1.6rem;

    }

    
    .faq-answer {


        font-size:

        1rem;


        font-weight:

        600;

    }



    .faq-answer p {

        padding:

        0 18px 18px;


        line-height:

        1.6;

    }


}

.faq-answer p{
    white-space: pre-line;
}

/* ===========================
   FAQ CATEGORIES
=========================== */

/* ===========================
   FAQ CATEGORIES
=========================== */

.faq-category{

    margin-bottom:25px;

}

.faq-category-title{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:none;

    border:none;

    cursor:pointer;

    padding:10px 5px;

    font-size:1.4rem;

    font-weight:700;

    color:var(--dark);

    transition:
        color .25s ease,
        transform .25s ease;

}

.faq-category-title:hover{

    color:var(--purple);

    transform:translateY(-3px);

}

.faq-category-title b{

    display:flex;

    justify-content:center;

    align-items:center;

    width:30px;

    height:30px;

    font-size:2rem;

    font-weight:300;

    transition:transform .35s cubic-bezier(.22,1,.36,1);

}

.faq-category.open .faq-category-title b{

    transform:rotate(45deg);

}

.faq-category-content{

    overflow:hidden;

    height:0;

    opacity:0;

}