.modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 50;
            max-width: 90%;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }

        .modal.active {
            display: block;
        }

        .backdrop {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            z-index: 40;
        }

        .backdrop.active {
            display: block;
        }

        .faq-category {
            cursor: pointer;
        }

        .faq-content {
            display: none;
        }
        .faq-content{
            color: #7cafa3;

        }

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

        .faq-item.hidden {
            display: none;
        }

        @media (min-width: 640px) {
            .modal {
                width: 600px;
            }
        }