$(document).ready(function () {

    let images = $(".fade-in-img");

    setTimeout(fadeInImages(images), 1000);

    var mobile_img = $(".mobile-about-us-img");

    setTimeout(showSequentially(0), 1000);

    function showSequentially(index) {
        if (index < mobile_img.length) {
            // Fade in the image
            $(mobile_img[index]).css({ top: 0, opacity: 1 });

            // Call the function recursively for the next image
            setTimeout(function () {
                showSequentially(index + 1);
            }, 500); // Adjust the timeout value as needed
        }
    }
    // var images = $('.world-img');

    // // Function to fade in images from the top
    // function fadeInFromTop(index) {
    //     if (index < images.length) {
    //         // Fade in the image
    //         $(images[index]).css({ top: 0, opacity: 1 });

    //         // Call the function recursively for the next image
    //         setTimeout(function () {
    //             fadeInFromTop(index + 1);
    //         }, 1000); // Adjust the timeout value as needed
    //     }
    // }

    // // Start the fading in sequence with the first image
    // fadeInFromTop(0);
});

function fadeInImages(images) {
    images.each(function (index) {
        $(this).delay(1000 * index).fadeIn(1000); // Delay each image by 2 seconds * its index
    });
}