h1 { margin: 30px 0 30px; text-align: center; }

.faq-container { margin: 0 auto; max-width: 600px; }

.faq { background-color: transparent; border: 1px solid #9fa4a8; border-radius: 10px; margin: 20px 0; overflow: hidden; padding: 30px; position: relative; transition: 0.3s ease; cursor: pointer; }

    .faq.active { background-color: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1); }

        .faq.active::before,
        .faq.active::after { color: #2ecc71; content: "\f075"; font-family: "Font Awesome 6 Free"; font-size: 7rem; left: 20px; opacity: 0.2; position: absolute; top: 20px; z-index: 0; }

        .faq.active::before { color: #3498db; left: -30px; top: -10px; transform: rotateY(180deg); }

.faq-title { margin: 0 35px 0 0; }

.faq-text { display: none; margin: 30px 0 0; }

.faq.active .faq-text { display: block; }

.faq-toggle { align-items: center; background-color: transparent; border: 0; border-radius: 50%; display: flex; font-size: 1rem; height: 30px; justify-content: center; padding: 0; position: absolute; right: 30px; top: 30px; width: 30px; }
    .faq-toggle .fa-times,
    .faq.active .faq-toggle .fa-chevron-down { display: none; }

.faq.active .faq-toggle .fa-times { color: #fff; display: block; }

.faq-toggle .fa-chevron-down { display: block; }

.faq.active .faq-toggle { background-color: #9fa4a8; }