ul.accordion-list {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 20px;
    margin: 0;
    list-style: none;
    background-color: #fff;
    border-radius: 10px;

    li {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        background-color: #fff;
        padding: 20px;
        margin: 0 auto 15px auto;
        border: 1px solid #eee;
        border-radius: 5px;
        cursor: pointer;

        &.active {
            h3 {
                &:after {
                    transform: rotate(315deg);
                }
            }
        }

        h3 {
            font-weight: 700;
            position: relative;
            display: block;
            width: 100%;
            height: auto;
            padding: 0 0 0 0;
            margin: 0;
            font-size: 14px;
            letter-spacing: 0.01em;
            cursor: pointer;

            &:after {
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%) rotate(135deg);
                width: 8px;
                height: 8px;
                border-left: 2px solid #333; /* Left line of the arrow */
                border-bottom: 2px solid #333; /* Bottom line of the arrow */
                transform-origin: center;
                transition: all 0.3s ease-in-out; /* Smooth animation */
            }
        }

        div.answer {
            position: relative;
            display: block;
            width: 100%;
            height: auto;
            margin: 0;
            padding: 0;
            cursor: pointer;

            p {
                position: relative;
                display: block;
                font-weight: 300;
                /* padding: 15px 0 0 0; */
                cursor: pointer;
                line-height: 150%;
                margin: 0 0 15px 0;
                font-size: 14px;
            }
        }
    }
}