/* Container for the FAQ section */
.faq-container {
    font-family: var(--paragraph-font);
    max-width: 72rem; /* Equivalent to Tailwind's max-w-6xl */
    margin: 0 auto; /* Center the container */
    
}

/* FAQ section heading */
.faq-heading {
    text-align: center;
}

/* Individual FAQ item */
.faq-item {
    border-radius: 0.5rem; /* Rounded corners */
    transition: background-color 0.3s;
}

/* Hover effect for FAQ item */
.faq-item:hover {
    background-color: var(--light-color); /* Equivalent to hover:bg-blue-50 */
}

.faq-item p {
    text-align: left;
}

/* FAQ question button */
.faq-question {
    width: 100%;
    text-align: left;
    font-size: 1rem; /* Equivalent to text-base */
    font-weight: 600; /* Equivalent to font-semibold */
    padding: 1.25rem 1.5rem; /* Equivalent to py-5 px-6 */
    color: var(--dark-grey-color); /* #333 */
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
}

/* FAQ question text */
.faq-question-text {
    margin-right: 1rem; /* Equivalent to mr-4 */
}

/* FAQ icon */
.faq-icon {
    width: 1rem; /* Equivalent to w-4 */
    fill: currentColor; /* Use current text color */
    margin-left: auto;
    transform: rotate(-90deg);
    transition: transform 0.3s; /* Smooth transition for rotation */
}

/* Hidden class to hide FAQ answers */
.hidden {
    display: none;
}

/* FAQ answer container */
.faq-answer {
    overflow: hidden;
    transition: max-height 0.3s ease; /* Smooth transition */
    max-height: 0; /* Initially set max-height to 0 */
    transform: rotate(0deg); /* Start pointing to the right */
    padding: 0.50rem 1.5rem; /* Matching padding to align with .faq-question */
    color: var(--dark-grey-color); /* #333 */
}

/* Rotate the icon */
.faq-icon {
    transition: transform 0.3s ease; /* Smooth rotation */
}