.faq-item {
            margin: 10px 0;
            border: 1px solid #ccc;
            padding: 10px;
        }
        .question {
            cursor: pointer;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .arrow {
            transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth transition for rotation and opacity */
            font-size: 18px;
        }
        .answer {
            display: none;
            padding-top: 10px;
            overflow: hidden;
            transition: max-height 1s ease-out;
        }
        .answer.open {
            display: block;
            max-height: 200px;
        }
        .rotated {
            transform: rotate(180deg);
        }
        .fade {
            opacity: 0;
        }