/* ==========================================================
   FAQ SECTION - THEOCHEM.CC
========================================================== */

.faq-wrap{
    max-width:900px;
    margin:0 auto;
}

.faq-heading{
    font-size:2rem;
    font-weight:700;
    margin-bottom:8px;
}

.faq-sub{
    color:var(--md-default-fg-color--light);
    margin-bottom:24px;
    font-size:14px;
}

/* --------------------------------------------------------- */

.faq-item{
    background:var(--md-default-bg-color);
    border:1px solid rgba(59,130,246,.18);
    border-radius:12px;
    margin-bottom:12px;
    overflow:hidden;
    transition:all .25s ease;
}

.faq-item:hover{
    border-color:#3b82f6;
}

.faq-item.open{
    border-color:#3b82f6;
}

/* --------------------------------------------------------- */

.faq-question{
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    padding:15px 20px;
    user-select:none;
}

/* Question text */

.faq-question-text{
    flex:1;
    font-size:15px;
    font-weight:500;
    line-height:1.45;
    color:var(--md-default-fg-color);
}

/* Chevron */

.faq-chevron{
    color:#60a5fa;
    font-size:16px;
    margin-left:15px;
    transition:transform .25s ease,color .25s ease;
}

.faq-item.open .faq-chevron{
    transform:rotate(90deg);
    color:#3b82f6;
}

/* --------------------------------------------------------- */

.faq-answer-wrap{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}

.faq-answer{
    padding:0 20px 18px 20px;
    color:var(--md-default-fg-color--light);
    font-size:14px;
    line-height:1.7;
}

/* --------------------------------------------------------- */

.faq-answer strong{
    color:var(--md-default-fg-color);
}

.faq-answer ul{
    margin:10px 0;
    padding-left:20px;
}

.faq-answer li{
    margin:6px 0;
}

/* --------------------------------------------------------- */

.faq-answer a{
    color:#60a5fa;
    text-decoration:none;
    font-weight:600;
    transition:.2s;
}

.faq-answer a:hover{
    color:#93c5fd;
    text-decoration:underline;
}

/* --------------------------------------------------------- */

@media (max-width:768px){

    .faq-question{
        padding:14px 16px;
    }

    .faq-question-text{
        font-size:15px;
    }

    .faq-answer{
        padding:0 16px 16px;
        font-size:14px;
    }

}