.faq-no{
    width: 56px;
    height: 56px;
    border-radius: 16px;
    color: rgba(73, 80, 87, 1);
    border: 1px solid rgba(173, 181, 189, 1);
    font-size: 18px;
}

.faq-content{
    margin-left: 93px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .3s ease, opacity .2s ease;
}

.faq-item.open .faq-content{
    max-height: 500px; /* adjust if answers can be taller */
    opacity: 1;
}

.faq-title{
    font-size: 24px;
}

/* interactivity */
.faq-item{ cursor: pointer; }
.faq-item .bi-chevron-down{ transition: transform .2s ease; }
.faq-item .bi-chevron-down.rotated{ transform: rotate(180deg); }

/* Desktop */
@media (min-width: 1024px) {
    .faq-container {
        padding: 0 270px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .faq-container {
        padding: 0 40px;
    }
    .faq-container h2{
        font-size: 32px;
    }
    .faq-content{
    margin-left: 50px;
    }
    .faq-title{
    font-size: 18px;
    }
    .faq-no{
    border-radius: 8px;
    width: 40px;
    height: 40px;
    font-size: 14px;
}
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .faq-container {
        padding: 0 100px;
    }
    .faq-title{
    font-size: 24px;
}
}