.faq-div{
    margin: 4% 0;
    padding: 5% 8%;
    border-radius: 20px;
    background-color: rgb(255 251 236);
}

    /* Individual FAQ box */
.faq-title{
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    color: black;
    margin-bottom: 2%;
}

.faq-item {
    transition: transform 0.15s ease;
}

.faq-item:hover {
    transform: translateY(-2px);
}



.faq-item p {
    margin: 0;
    padding: 0 20px 20px;
    line-height: 1.6;
    color: #444;
    animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Question */
/* Question row divider */
.faq-item summary {
    padding: 18px 50px 18px 20px; /* 👈 extra right padding for + */
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    white-space: normal;        /* allow wrapping */
    word-wrap: break-word;      /* break long words if needed */
    overflow-wrap: anywhere;    /* strongest wrapping rule */
}

/* Remove last divider (optional, if you want a clean bottom edge) */
.faq-item:last-child summary {
    border-bottom: none;
}

/* Remove default arrow in some browsers */
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Custom + symbol */
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* Change + to − when open */
.faq-item[open] summary::after {
    content: "−";
}

/* Hover effect */
.faq-item summary:hover {
    background-color: #f5f5f5;
}

@media (max-width: 600px) {
    .faq-item summary {
        font-size: 1rem;
        padding-right: 45px;
    }
}