/* =========================
   MOBILE VERSION
========================= */
.faq {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    line-height: 2.5rem;
    margin-bottom:4rem;
}

.faq h2 {
    margin-left:0;
    margin-right: auto;
}

.faq section {
    width:100%;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    border-radius:6px;
}

.faq section .faq-item {
    width: 100%;
}

.faq section .faq-item .question {
    padding:1.5rem 1rem;
    background-color: #f8f8f8;
    border: 1px solid #e8e8e8;
    border-radius:6px;
    position: relative;
    cursor: pointer;
    padding-right: 2rem;
}

.faq section .faq-item .question::after {
    content: "\2304";
    position: absolute;
    right: 2rem;
    top: 40%;
    transform: translateY(-50%);
    transition: transform 0.7s ease;
    display: inline-block;
    font-size: 2.4rem;
}

.faq section .faq-item.open .question::after {
    transform: rotate(180deg);
}

.faq section .faq-item .answer {
    max-height:0;
    overflow:hidden;
    transition: max-height 0.6s ease-out;
    background-color: rgba(11, 130, 147, 0.25);
    border-radius:6px;
}

.faq section .faq-item .answer-inner {
    display:block;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    /* max-height:50rem;
    padding:1.5rem 1rem; */
}

.faq section .faq-item .answer > .answer-inner:first-of-type {
    padding-top: 1.5rem;
}

.faq section .faq-item .answer > ul {
    list-style-type: disc;
    list-style-position: inside;
    /* width: fit-content; */
}

.faq section .faq-item .answer .answer-inner:last-of-type {
    padding-bottom: 1.5rem;
}

.faq section .faq-item .answer.open {
    max-height:30rem;
}

.faq section .faq-item .question {
    cursor:pointer;
}



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




/* =========================
   DESKTOP VERSION
========================= */

@media(min-width: 1024px) {
    .faq {
        width:70%;
    }
}


/* =========================
   BIG DESKTOP VERSION
========================= */
@media (min-width: 1440px) {
    .faq {
        width: 60vw;
    }
}