static/style/help.css

.container {
    margin: 2%;
}


.faq {
    margin-bottom: 20px;
    position: relative;
    /* Required for arrow positioning */
}

.faq-question {
    cursor: pointer;
    font-weight: bold;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    position: relative;
    /* Required for arrow positioning */
}

.faq-answer {
    padding: 10px 15px;
    display: none;
}

.faq-answer.show {
    display: block;
}

.faq-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #ddd;
    position: absolute;
    /* Position the arrow */
    right: 10px;
    /* Place it on the right edge */
    top: 50%;
    transform: translateY(-50%);
    /* Vertical centering */
    transition: transform 0.3s ease-in-out;
}

.faq-answer.show .faq-arrow {
    transform: translateY(-50%) rotate(180deg);
    /* Rotate on expand */
}