const data = [
            {
                "image": "img/Khimjis_House_Of_Travel_Oman40-2-800x440.jpg",
                "title": "Salalah Discovery",
                "duration": "3 Nights/4 Days",
                "link": "salalah-discovery.php"
            },
            {
                "image": "img/Khimjis_House_Of_Travel_Oman13-2-800x440.jpg",
                "title": "Highlights of Oman",
                "duration": "09 Nights/10 Days",
                "link": "highlights-of-oman.php"
            },
            {
                "image": "img/Cover-Image-800x440.jpg",
                "title": "OMAN WILDERNESS",
                "duration": "05 Nights/06 Days",
                "link": "oman-wilderness.php"
            },
            {
                "image": "img/Khimjis_House_Of_Travel_Oman45-1-800x440.jpg",
                "title": "Musandam and Khasab Explorer",
                "duration": "03 Nights/04 Days",
                "link": "musandam-and-khasab-explorer.php"
            },
            {
                "image": "img/Khimjis_House_Of_Travel_Oman5-2-800x440.jpg",
                "title": "Oman Short Break",
                "duration": "04 Nights/05 Days",
                "link": "oman-short-break.php"
            },
            {
                "image": "img/Khimjis_House_Of_Travel_Oman2-3-800x440.jpg",
                "title": "Dubai and Oman Combo",
                "duration": "07 nights/08 Days",
                "link": "dubai-and-oman-combo.php"
            },
            {
                "image": "img/Khimjis_House_Of_Travel_Oman21-3-800x440.jpg",
                "title": "Natural Landscapes",
                "duration": "06 Nights/07 Days",
                "link": "natural-landscapes.php"
            },
            {
                "image": "img/Khimjis_House_Of_Travel_Oman29-2-800x440.jpg",
                "title": "Historical Oman",
                "duration": "04 Nights/05 Days",
                "link": "historical-oman.php"
            }
        ];

        const contentContainer = document.getElementById('culturalpackagewrap');

        data.forEach(item => {
            const row = document.createElement('div');
            row.className = 'row g-0 mb-4';

            // Add the loader initially
            row.innerHTML = `
                <div class="col-lg-8">
                    <div class="loader-container">
                        <div class="loader"></div>
                    </div>
                </div>
                <div class="col-lg-4 bg-white d-flex align-items-center">
                    <div class="p-4">
                        <div class="fw-600 display-6 lh-1">${item.title}</div>
                        <div class="h4 pb-2"><em>${item.duration}</em></div>
                        <a href="${item.link}" class="btn btn-secondary rounded-0">
                            Find out more <i class="las la-angle-right"></i>
                        </a>
                    </div>
                </div>
            `;
            contentContainer.appendChild(row);

            const img = new Image();
            img.src = item.image;
            img.className = 'img-fluid w-100';

           
            img.onload = function() {
                row.querySelector('.col-lg-8').innerHTML = '';
                row.querySelector('.col-lg-8').appendChild(img);
            };
        });