$(document).ready(function() {
        // Handle toggle button click
        $('.navbar-toggle').click(function() {
            $('#bs-example-navbar-collapse-1').collapse('toggle');

            // Change button state (toggle between hamburger and "X")
            $(this).toggleClass('active');
        });

        // Close menu and reset toggle icon when a menu item is clicked (for screens <= 991px)
        $('#bs-example-navbar-collapse-1 a').click(function() {
            if ($(window).width() <= 991) {
                $('#bs-example-navbar-collapse-1').collapse('hide'); // Close the menu
                $('.navbar-toggle').removeClass('active').addClass('collapsed'); // Reset to hamburger icon
            }
        });

        // Reset the toggle button to hamburger when the menu is hidden
        $('#bs-example-navbar-collapse-1').on('hidden.bs.collapse', function() {
            $('.navbar-toggle').removeClass('active').addClass('collapsed'); // Ensure hamburger icon
        });

        // Switch to "X" icon when the menu is shown
        $('#bs-example-navbar-collapse-1').on('shown.bs.collapse', function() {
            $('.navbar-toggle').removeClass('collapsed').addClass('active'); // Change to "X" icon
        });

        // Scroll to section and reset toggle button when internal links (with #) are clicked
        $('a[href^="#"]').on('click', function() {
            if ($(window).width() <= 991) {
                $('#bs-example-navbar-collapse-1').collapse('hide'); // Close the menu
                $('.navbar-toggle').removeClass('active').addClass('collapsed'); // Reset to hamburger icon
            }
        });
    });