/* FAQ Accordion Styles */
.faq-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Ensure the section stands out if on a different background, 
       but aiming for transparency if body is dark. 
       If body is white, this won't fix the page background. 
       Assuming we need to handle the container's layout primarily. */
}

/* Ensure the parent page has a dark background if not already set globally.
   This might be aggressive, but "Foto 2" is dark. 
   Safest is to set it on the container's parent if possible, 
   but since we control this component, we can try to influence the immediate area 
   or assume the user wants this section dark. */

.faq-title {
    font-family: "Sora", sans-serif;
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    margin-bottom: 20px;
    /* Adding text shadow for better legibility if needed */
}

/* The gradient card */
.faq-list {
    width: 100%;
    background: linear-gradient(90deg, rgb(166, 225, 250) -20%, rgb(236, 193, 150) 20%, rgb(133, 142, 162) 80%, rgb(73, 112, 169) 100%);
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    padding: 30px 40px;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    /* Center the text */
    align-items: center;
    position: relative;
    list-style: none;
    color: #0d0d0d;
    /* Dark text for contrast on gradient */
    transition: background-color 0.2s ease;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.faq-icon {
    position: absolute;
    left: 40px;
    /* Aligned to the left */
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.3s ease;
}



.faq-item[open] .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 20px 40px 30px 40px;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    /* Center aligned answer text */
    color: #1a1a1a;
    max-width: 800px;
    /* Prevent text from getting too wide in the answer */
    margin: 0 auto;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .faq-title {
        font-size: 32px;
    }

    .faq-question {
        padding: 24px 20px 24px 60px;
        /* More space for icon on left */
        justify-content: flex-start;
        /* Left align on mobile for better readability? Or keep centered? */
        text-align: left;
    }

    .faq-icon {
        left: 20px;
    }

    .faq-answer {
        padding: 0 20px 24px 20px;
        text-align: left;
    }
}