.faq-category-btn {
            transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.2s ease-in-out;
        }

        .faq-category-btn:hover {
            transform: translateY(-2px);
            /* افکت هاور */
        }

        .bg-gray-100 {
            background-color: #f3f4f6;
            /* رنگ خاکستری */
            color: #374151;
            /* رنگ متن خاکستری */
        }

        /* استایل‌های اضافی برای اطمینان از نمایش صحیح */
        .faq-item {
            display: none;
            /* در ابتدا همه مخفی باشند */
            opacity: 0;
            transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
            /* همان انیمیشن آکاردیون */
        }

        .faq-item.active {
            /* کلاسی که جاوا اسکریپت برای نمایش فعال دسته اضافه می‌کند */
            display: block;
            /* یا flex بسته به نیاز */
            opacity: 1;
        }

        .faq-answer {
            max-height: 0px;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out;
        }

        /* وقتی سوال باز است */
        .faq-question.open+.faq-answer {
            max-height: 500px;
            /* یک مقدار بزرگ که پاسخ را در بر بگیرد */
        }