:root {
    --base-font-size: 20px;
}

.offcanvas {
    transition: transform 0.3s ease-in-out;
}

.offcanvas-end {
    width: 100vw !important;
    max-width: 500px !important;
}

@media (min-width: 500px) {
    .offcanvas-end {
        width: 500px !important;
    }
}



.accordion-button {
    background-color: var(--gray-lightest);
    color: #333;
}

    .accordion-button:not(.collapsed) {
        background-color: var(--gray-dark);
        color: var(--white);
    }

    /* Remove or Change Focus Glow */
    .accordion-button:focus {
        box-shadow: 0 0 0 0.25rem var(--white);
        box-shadow: none;
    }

    /* Hover State for Better UX */
    .accordion-button:hover {
        background-color: var(--gray-dark);
        color: #fff;
    }