document.addEventListener("DOMContentLoaded", function() {
    const dropDown = document.getElementById('accessibilitesDropDown');
    const dropDownArrowUp = document.querySelector('.arrowUp');
    const dropDownArrowDown = document.querySelector('.arrowDown');

    document.getElementById('openAccessibilitiesDropDown').addEventListener('click', function() {
        dropDown.classList.toggle('visible');
        dropDownArrowUp.classList.toggle('hidden');
        dropDownArrowDown.classList.toggle('hidden');
        
        // Add mt-3 class immediately when dropdown is opened
        if (dropDown.classList.contains('visible')) {
            dropDown.classList.add('mt-3');
        } else {
            // Delay the removal of mt-3 class when dropdown is closed
            setTimeout(function() {
                dropDown.classList.remove('mt-3');
            }, 800); // Same duration as transition in CSS
        }
    });
});