Grand Celebration Package | Premium Photo Gallery<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: linear-gradient(145deg, #fef7e8 0%, #fff5e6 100%);\n font-family: system-ui, 'Segoe UI', 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;\n color: #2e241f;\n scroll-behavior: smooth;\n }\n\n \/* Main container *\/\n .gallery-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 2rem 1.5rem 3rem;\n }\n\n \/* Header & package branding *\/\n .package-header {\n text-align: center;\n margin-bottom: 3rem;\n position: relative;\n }\n\n .package-header h1 {\n font-size: 3rem;\n font-weight: 700;\n background: linear-gradient(135deg, #c28a3b, #e6b86e, #b5722a);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n letter-spacing: -0.01em;\n text-shadow: 2px 2px 10px rgba(0,0,0,0.05);\n margin-bottom: 0.5rem;\n }\n\n .package-subtitle {\n font-size: 1.2rem;\n color: #6b4c2c;\n border-top: 2px solid #f3d9b1;\n display: inline-block;\n padding-top: 0.75rem;\n font-weight: 500;\n letter-spacing: 0.3px;\n }\n\n .package-badge {\n display: inline-block;\n background: #f5e2c1;\n backdrop-filter: blur(4px);\n padding: 0.4rem 1.2rem;\n border-radius: 60px;\n font-size: 0.85rem;\n font-weight: 600;\n color: #9b6a3c;\n margin-top: 1rem;\n border: 1px solid rgba(193, 137, 64, 0.3);\n }\n\n \/* gallery grid *\/\n .photo-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 1.8rem;\n margin-top: 1rem;\n }\n\n \/* gallery card *\/\n .gallery-card {\n background: white;\n border-radius: 1.5rem;\n overflow: hidden;\n box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.12), 0 8px 12px -6px rgba(0, 0, 0, 0.05);\n transition: all 0.35s cubic-bezier(0.2, 0, 0, 1);\n cursor: pointer;\n position: relative;\n }\n\n .gallery-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 28px 36px -16px rgba(0, 0, 0, 0.2);\n }\n\n .img-wrapper {\n width: 100%;\n height: 280px;\n overflow: hidden;\n background: #f2e5d4;\n position: relative;\n }\n\n .img-wrapper img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n display: block;\n }\n\n .gallery-card:hover .img-wrapper img {\n transform: scale(1.03);\n }\n\n .card-caption {\n padding: 1rem 1rem 1.2rem;\n background: white;\n }\n\n .card-caption p {\n font-weight: 500;\n color: #4f3620;\n font-size: 0.95rem;\n letter-spacing: 0.3px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .card-caption i {\n font-style: normal;\n font-size: 1.1rem;\n }\n\n \/* lightbox \/ modal *\/\n .lightbox-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.92);\n backdrop-filter: blur(10px);\n z-index: 2000;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n transition: opacity 0.25s ease;\n opacity: 0;\n }\n\n .lightbox-modal.active {\n display: flex;\n animation: fadeIn 0.25s forwards;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .modal-content {\n position: relative;\n max-width: 90vw;\n max-height: 85vh;\n text-align: center;\n }\n\n .modal-image {\n max-width: 100%;\n max-height: 75vh;\n border-radius: 1.5rem;\n box-shadow: 0 25px 45px rgba(0, 0, 0, 0.4);\n border: 2px solid rgba(255, 215, 150, 0.4);\n background: #2a241e;\n }\n\n .modal-caption {\n margin-top: 1rem;\n color: #faeac6;\n font-weight: 500;\n background: rgba(0, 0, 0, 0.6);\n display: inline-block;\n padding: 0.5rem 1.2rem;\n border-radius: 60px;\n backdrop-filter: blur(8px);\n font-size: 0.9rem;\n letter-spacing: 0.3px;\n }\n\n .close-modal {\n position: absolute;\n top: -40px;\n right: -10px;\n background: rgba(30, 20, 15, 0.7);\n border: none;\n color: white;\n font-size: 2rem;\n cursor: pointer;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.2s;\n backdrop-filter: blur(5px);\n font-weight: 300;\n }\n\n .close-modal:hover {\n background: #c17b3a;\n transform: scale(1.05);\n }\n\n .nav-btn {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(0, 0, 0, 0.6);\n border: none;\n color: #ffeaCD;\n font-size: 2.4rem;\n width: 52px;\n height: 52px;\n border-radius: 60px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.2s;\n backdrop-filter: blur(6px);\n font-weight: 400;\n line-height: 1;\n }\n\n .nav-btn:hover {\n background: #c0823ee0;\n color: white;\n }\n\n .prev-btn {\n left: 20px;\n }\n\n .next-btn {\n right: 20px;\n }\n\n .counter {\n position: absolute;\n bottom: -50px;\n left: 50%;\n transform: translateX(-50%);\n background: #2e241faa;\n backdrop-filter: blur(8px);\n padding: 0.4rem 1rem;\n border-radius: 50px;\n color: #fbe6bf;\n font-size: 0.85rem;\n font-weight: 500;\n white-space: nowrap;\n }\n\n @media (max-width: 720px) {\n .photo-grid {\n gap: 1rem;\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n }\n .img-wrapper {\n height: 240px;\n }\n .package-header h1 {\n font-size: 2.2rem;\n }\n .nav-btn {\n width: 40px;\n height: 40px;\n font-size: 1.8rem;\n }\n .prev-btn {\n left: 5px;\n }\n .next-btn {\n right: 5px;\n }\n .close-modal {\n top: -30px;\n right: -5px;\n width: 38px;\n height: 38px;\n font-size: 1.6rem;\n }\n }\n\n @media (max-width: 480px) {\n .gallery-container {\n padding: 1rem 1rem 2rem;\n }\n .img-wrapper {\n height: 200px;\n }\n }\n\n footer {\n text-align: center;\n margin-top: 4rem;\n font-size: 0.8rem;\n color: #b38b60;\n border-top: 1px solid #eedbbc;\n padding-top: 2rem;\n }\n\n \/* loading shimmer subtle *\/\n .img-wrapper img {\n background: #e7d9ca;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"gallery-container\">\n <div class=\"package-header\">\n <h1>\u2728 GRAND CELEBRATION PACKAGE \u2728<\/h1>\n <div class=\"package-subtitle\">Timeless moments \u2022 Luxury details \u2022 Unforgettable joy<\/div>\n <div class=\"package-badge\">\ud83d\udcf8 Exclusive Photo Gallery<\/div>\n <\/div>\n\n \n <div id=\"photoGrid\" class=\"photo-grid\"><\/div>\n <footer>\n <span>\ud83c\udf1f Grand Celebration Package \u2014 Every frame tells a story of elegance & happiness<\/span>\n <\/footer>\n<\/div>\n\n\n<div id=\"lightboxModal\" class=\"lightbox-modal\">\n <div class=\"modal-content\">\n <button class=\"close-modal\" id=\"closeModalBtn\" aria-label=\"Close\">\u2715<\/button>\n <button class=\"nav-btn prev-btn\" id=\"prevBtn\" aria-label=\"Previous\">\u2039<\/button>\n <img id=\"modalImage\" class=\"modal-image\" alt=\"Enlarged celebration moment\">\n <button class=\"nav-btn next-btn\" id=\"nextBtn\" aria-label=\"Next\">\u203a<\/button>\n <div id=\"modalCaption\" class=\"modal-caption\"><\/div>\n <div id=\"imageCounter\" class=\"counter\"><\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ ----- IMAGE GALLERY DATA (URLs + enriching captions) -----\n const imageUrls = [\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/whatsapp-image-2026-05-19-at-22.04.29.jpeg\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/blue-1-1.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/whatsapp-image-2025-06-22-at-23-52-17.jpeg\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/princess.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/syafiq.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/muhaymin-1.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/whatsapp-image-2025-06-22-at-23-53-03.jpeg\"\n ];\n\n \/\/ thoughtful descriptions matching each image vibe\n const imageDescriptions = [\n \"\u2728 Elegant Table & Golden Accents \u2014 Grand Reception Vibe\",\n \"\ud83d\udc99 Serene Blue Fantasy \u2014 Dreamy D\u00e9cor Details\",\n \"\ud83c\udf89 Joyful Laughter & Candid Celebrations\",\n \"\ud83d\udc51 Princess Fairytale Moment \u2014 Pure Magic\",\n \"\ud83c\udf1f Syafiq\u2019s Stylish Portrait \u2014 Confidence & Charm\",\n \"\ud83d\ude0a Muhaymin\u2019s Radiant Smile \u2014 Heartfelt Celebration\",\n \"\ud83e\udd42 Toast to Love \u2014 Unforgettable Evening Glow\"\n ];\n\n \/\/ Additional short alt labels (fallback)\n const altLabels = [\n \"Elegant table setting\",\n \"Blue decorative theme\",\n \"Joyful celebration crowd\",\n \"Princess theme moment\",\n \"Stylish portrait\",\n \"Happy guest smile\",\n \"Candid champagne toast\"\n ];\n\n \/\/ ----- DOM elements -----\n const gridContainer = document.getElementById('photoGrid');\n const modal = document.getElementById('lightboxModal');\n const modalImg = document.getElementById('modalImage');\n const modalCaption = document.getElementById('modalCaption');\n const counterSpan = document.getElementById('imageCounter');\n const closeBtn = document.getElementById('closeModalBtn');\n const prevBtn = document.getElementById('prevBtn');\n const nextBtn = document.getElementById('nextBtn');\n\n let currentIndex = 0;\n\n \/\/ ----- render gallery dynamically -----\n function buildGallery() {\n if (!gridContainer) return;\n\n gridContainer.innerHTML = '';\n imageUrls.forEach((url, idx) => {\n const card = document.createElement('div');\n card.className = 'gallery-card';\n card.setAttribute('data-index', idx);\n\n const imgWrapper = document.createElement('div');\n imgWrapper.className = 'img-wrapper';\n\n const img = document.createElement('img');\n img.src = url;\n img.alt = altLabels[idx] || `Grand Celebration moment ${idx + 1}`;\n img.loading = 'lazy';\n \/\/ optional error handling to avoid broken image placeholder\n img.onerror = function() {\n this.style.opacity = '0.6';\n this.style.background = '#d9c6ae';\n this.alt = 'Image loading issue, but celebration spirit shines!';\n };\n\n imgWrapper.appendChild(img);\n\n const captionDiv = document.createElement('div');\n captionDiv.className = 'card-caption';\n const captionP = document.createElement('p');\n \/\/ using a tiny emoji indicator + description\n captionP.innerHTML = `<span style=\"font-size:1.1rem;\">\ud83d\udcf7<\/span> ${imageDescriptions[idx]}`;\n captionDiv.appendChild(captionP);\n\n card.appendChild(imgWrapper);\n card.appendChild(captionDiv);\n\n \/\/ open lightbox on click\n card.addEventListener('click', (e) => {\n e.stopPropagation();\n openLightbox(idx);\n });\n\n gridContainer.appendChild(card);\n });\n }\n\n \/\/ ----- LIGHTBOX FUNCTIONS -----\n function openLightbox(index) {\n if (!modal || !modalImg) return;\n currentIndex = index;\n updateModalContent();\n modal.classList.add('active');\n document.body.style.overflow = 'hidden'; \/\/ prevent background scroll\n }\n\n function updateModalContent() {\n if (!modalImg || !modalCaption || !counterSpan) return;\n const imgSrc = imageUrls[currentIndex];\n modalImg.src = imgSrc;\n modalImg.alt = imageDescriptions[currentIndex] || `Celebration snapshot ${currentIndex+1}`;\n modalCaption.textContent = imageDescriptions[currentIndex];\n counterSpan.textContent = `${currentIndex+1} \/ ${imageUrls.length} \u00b7 Grand Celebration`;\n }\n\n function closeLightbox() {\n if (!modal) return;\n modal.classList.remove('active');\n document.body.style.overflow = '';\n \/\/ reset image src to avoid flickering\n }\n\n function nextImage() {\n currentIndex = (currentIndex + 1) % imageUrls.length;\n updateModalContent();\n }\n\n function prevImage() {\n currentIndex = (currentIndex - 1 + imageUrls.length) % imageUrls.length;\n updateModalContent();\n }\n\n \/\/ keyboard navigation\n function handleKeyDown(e) {\n if (!modal.classList.contains('active')) return;\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n nextImage();\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault();\n prevImage();\n } else if (e.key === 'Escape') {\n e.preventDefault();\n closeLightbox();\n }\n }\n\n \/\/ ----- setup lightbox event listeners -----\n function initLightboxControls() {\n if (closeBtn) closeBtn.addEventListener('click', closeLightbox);\n if (nextBtn) nextBtn.addEventListener('click', (e) => { e.stopPropagation(); nextImage(); });\n if (prevBtn) prevBtn.addEventListener('click', (e) => { e.stopPropagation(); prevImage(); });\n \n \/\/ close modal when clicking on background overlay (but not on image\/buttons)\n if (modal) {\n modal.addEventListener('click', (e) => {\n if (e.target === modal) {\n closeLightbox();\n }\n });\n }\n \n window.addEventListener('keydown', handleKeyDown);\n }\n\n \/\/ extra smooth preload of first few images (optional)\n function preloadCriticalImages() {\n \/\/ preload first 3 images for smoother lightbox experience\n const preloadLimit = Math.min(3, imageUrls.length);\n for (let i = 0; i < preloadLimit; i++) {\n const link = document.createElement('link');\n link.rel = 'preload';\n link.as = 'image';\n link.href = imageUrls[i];\n document.head.appendChild(link);\n }\n }\n\n \/\/ tiny additional hover details: add grace note\n function applyFineTuning() {\n \/\/ Add a simple style for dynamic loading, ensure images look cohesive\n const style = document.createElement('style');\n style.textContent = `\n .gallery-card {\n transition: all 0.3s ease;\n }\n .modal-image {\n transition: transform 0.2s;\n }\n `;\n document.head.appendChild(style);\n }\n\n \/\/ ----- final initialization -----\n function init() {\n buildGallery();\n initLightboxControls();\n preloadCriticalImages();\n applyFineTuning();\n \/\/ edge: ensure modal does not stay open if orientation changes\n window.addEventListener('resize', () => {\n if (modal.classList.contains('active')) {\n \/\/ re-center, just keep as is\n }\n });\n }\n\n \/\/ start everything when DOM ready\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', init);\n } else {\n init();\n }\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\">\n <title>Elegant Bliss Package | Photo Gallery<\/title>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: linear-gradient(145deg, #fef9f5 0%, #fff7f2 100%);\n font-family: 'Inter', sans-serif;\n color: #2e241f;\n scroll-behavior: smooth;\n }\n\n \/* main container *\/\n .gallery-wrapper {\n max-width: 1400px;\n margin: 0 auto;\n padding: 2rem 2rem 4rem;\n }\n\n \/* header area \u2013 elegant bliss branding *\/\n .elegant-header {\n text-align: center;\n margin-bottom: 3rem;\n position: relative;\n }\n\n .elegant-header h1 {\n font-family: 'Playfair Display', serif;\n font-size: 3.2rem;\n font-weight: 600;\n letter-spacing: -0.02em;\n background: linear-gradient(135deg, #b77d5c, #d9a87c, #bf8a6a);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n margin-bottom: 0.5rem;\n text-shadow: 0 2px 5px rgba(0,0,0,0.02);\n }\n\n .elegant-header .subhead {\n font-size: 1rem;\n font-weight: 400;\n color: #8b6c58;\n letter-spacing: 2px;\n text-transform: uppercase;\n background: rgba(230, 210, 195, 0.3);\n display: inline-block;\n padding: 0.4rem 1.2rem;\n border-radius: 40px;\n backdrop-filter: blur(2px);\n font-weight: 500;\n }\n\n .separator {\n width: 80px;\n height: 2px;\n background: linear-gradient(90deg, #e6c8b4, #bc8f72, #e6c8b4);\n margin: 1rem auto 0;\n border-radius: 2px;\n }\n\n \/* gallery grid \u2013 square cards, uniform luxury *\/\n .photo-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.8rem;\n margin-top: 2rem;\n }\n\n \/* card style *\/\n .gallery-card {\n position: relative;\n background: #ffffffcc;\n backdrop-filter: blur(2px);\n border-radius: 28px;\n overflow: hidden;\n box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.02);\n transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);\n cursor: pointer;\n }\n\n .gallery-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 24px 40px -12px rgba(80, 50, 35, 0.2);\n }\n\n \/* square image container with elegant frame *\/\n .image-frame {\n aspect-ratio: 1 \/ 1;\n width: 100%;\n overflow: hidden;\n background: #f2e8e0;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .image-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease, filter 0.3s ease;\n filter: brightness(0.98) contrast(1.02);\n }\n\n .gallery-card:hover .image-frame img {\n transform: scale(1.05);\n filter: brightness(1.02) contrast(1.05);\n }\n\n \/* optional caption area \u2013 clean minimal *\/\n .card-caption {\n padding: 1rem 1rem 1.2rem;\n text-align: center;\n background: rgba(255, 252, 245, 0.9);\n font-size: 0.85rem;\n font-weight: 500;\n letter-spacing: 0.3px;\n color: #5e3e2c;\n border-top: 1px solid #f0e2d6;\n font-family: 'Inter', sans-serif;\n }\n\n .card-caption span {\n display: inline-block;\n font-size: 0.7rem;\n background: #f5e8de;\n padding: 0.2rem 0.8rem;\n border-radius: 20px;\n color: #a26947;\n }\n\n \/* ========= LIGHTBOX MODAL ========= *\/\n .lightbox-modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(18, 12, 8, 0.92);\n backdrop-filter: blur(12px);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 2000;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .lightbox-modal.active {\n display: flex;\n opacity: 1;\n }\n\n .lb-container {\n position: relative;\n max-width: 90vw;\n max-height: 90vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n animation: fadeUp 0.35s ease;\n }\n\n @keyframes fadeUp {\n from {\n opacity: 0;\n transform: translateY(25px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .lb-image-wrapper {\n background: rgba(35, 25, 20, 0.5);\n border-radius: 32px;\n padding: 8px;\n box-shadow: 0 35px 60px rgba(0, 0, 0, 0.4);\n }\n\n .lb-image {\n display: block;\n max-width: 82vw;\n max-height: 78vh;\n object-fit: contain;\n border-radius: 26px;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n background: #1e1712;\n }\n\n \/* lightbox controls *\/\n .lb-controls {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 2rem;\n margin-top: 1.4rem;\n }\n\n .lb-btn {\n background: rgba(255, 248, 240, 0.2);\n backdrop-filter: blur(4px);\n border: 1px solid rgba(255, 235, 215, 0.5);\n width: 48px;\n height: 48px;\n border-radius: 60px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 1.8rem;\n color: #f9e4d4;\n cursor: pointer;\n transition: all 0.2s;\n font-weight: 300;\n }\n\n .lb-btn:hover {\n background: rgba(210, 160, 120, 0.6);\n border-color: #ffefdd;\n color: white;\n transform: scale(1.03);\n }\n\n .close-lb {\n position: absolute;\n top: -12px;\n right: -12px;\n background: #2a1c14;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.7rem;\n color: #ecdacb;\n cursor: pointer;\n transition: 0.2s;\n border: 1px solid #c8aa8e;\n backdrop-filter: blur(3px);\n }\n\n .close-lb:hover {\n background: #ab7b5a;\n color: white;\n transform: rotate(90deg);\n }\n\n .lb-counter {\n background: rgba(0, 0, 0, 0.55);\n padding: 0.4rem 1rem;\n border-radius: 60px;\n font-size: 0.85rem;\n font-weight: 500;\n color: #f2e0d2;\n letter-spacing: 0.5px;\n }\n\n \/* footer *\/\n .grace-footer {\n text-align: center;\n margin-top: 4rem;\n font-size: 0.8rem;\n color: #b5896e;\n border-top: 1px solid #eedbcb;\n padding-top: 2rem;\n font-weight: 400;\n }\n\n \/* mobile refinements *\/\n @media (max-width: 680px) {\n .gallery-wrapper {\n padding: 1rem 1.2rem 2.5rem;\n }\n .elegant-header h1 {\n font-size: 2.3rem;\n }\n .photo-grid {\n gap: 1.2rem;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n }\n .lb-btn {\n width: 42px;\n height: 42px;\n font-size: 1.4rem;\n }\n .close-lb {\n width: 38px;\n height: 38px;\n font-size: 1.4rem;\n top: -8px;\n right: -8px;\n }\n }\n\n \/* loading subtle *\/\n .image-frame img {\n transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.4, 1.1);\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"gallery-wrapper\">\n <div class=\"elegant-header\">\n <h1>Elegant Bliss Package<\/h1>\n <div class=\"subhead\">Timeless moments \u00b7 curated with grace<\/div>\n <div class=\"separator\"><\/div>\n <p style=\"margin-top: 1rem; font-size: 0.95rem; font-weight: 400; color: #9f7b62; max-width: 500px; margin-left: auto; margin-right: auto;\">A visual symphony of refined aesthetics & romantic storytelling<\/p>\n <\/div>\n\n \n <div id=\"elegantGalleryGrid\" class=\"photo-grid\"><\/div>\n <div class=\"grace-footer\">\n <i class=\"fas fa-camera\" style=\"margin-right: 6px;\"><\/i> Elegant Bliss collection \u2014 each image tells a story\n <\/div>\n<\/div>\n\n\n<div id=\"lightboxModal\" class=\"lightbox-modal\">\n <div class=\"lb-container\">\n <div class=\"close-lb\" id=\"closeLightboxBtn\">\n <i class=\"fas fa-times\"><\/i>\n <\/div>\n <div class=\"lb-image-wrapper\">\n <img decoding=\"async\" id=\"lightboxImg\" class=\"lb-image\" alt=\"Elegant bliss enlarged view\" src=\"\">\n <\/div>\n <div class=\"lb-controls\">\n <div class=\"lb-btn\" id=\"prevImageBtn\"><i class=\"fas fa-chevron-left\"><\/i><\/div>\n <div class=\"lb-counter\" id=\"imageCounter\">1 \/ 10<\/div>\n <div class=\"lb-btn\" id=\"nextImageBtn\"><i class=\"fas fa-chevron-right\"><\/i><\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ ==== All image URLs provided (exactly 10) ====\n const imageUrls = [\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/safari-1.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/whatsapp-image-2026-02-19-at-18.36.29.jpeg\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/whatsapp-image-2024-12-27-at-02-28-51.jpeg\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/whatsapp-image-2025-12-04-at-11-12-43.jpeg\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/untitled-design-4.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/untitled-product-image-5.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/barbieqq-1.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/untitled-design-9-1.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/cillian.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/amelia.png\"\n ];\n\n \/\/ Elegant descriptive alt texts based on filename context\n const altTexts = [\n \"Safari elegance \u2013 golden hour bliss\",\n \"Intimate celebration \u2013 elegant bliss moment\",\n \"Romantic decor bliss \u2013 pastel serenity\",\n \"Candlelit atmosphere \u2013 timeless bliss\",\n \"Floral masterpiece \u2013 blissful design\",\n \"Luxury product shot \u2013 elegant touch\",\n \"Barbieque chic \u2013 playful elegance\",\n \"Soft textures & blissful harmony\",\n \"Cillian \u2013 refined masculine elegance\",\n \"Amelia \u2013 sophisticated radiance\"\n ];\n\n \/\/ gallery container\n const galleryContainer = document.getElementById(\"elegantGalleryGrid\");\n \/\/ lightbox elements\n const modal = document.getElementById(\"lightboxModal\");\n const lightboxImg = document.getElementById(\"lightboxImg\");\n const closeBtn = document.getElementById(\"closeLightboxBtn\");\n const prevBtn = document.getElementById(\"prevImageBtn\");\n const nextBtn = document.getElementById(\"nextImageBtn\");\n const counterSpan = document.getElementById(\"imageCounter\");\n\n let currentIndex = 0; \/\/ track which image is opened in lightbox\n\n \/\/ ========== CREATE GALLERY CARDS ==========\n function buildGallery() {\n galleryContainer.innerHTML = \"\";\n imageUrls.forEach((url, idx) => {\n const card = document.createElement(\"div\");\n card.className = \"gallery-card\";\n card.setAttribute(\"data-index\", idx);\n \n \/\/ image square frame\n const frame = document.createElement(\"div\");\n frame.className = \"image-frame\";\n const img = document.createElement(\"img\");\n img.src = url;\n img.alt = altTexts[idx] || `Elegant Bliss image ${idx+1}`;\n img.loading = \"lazy\";\n \/\/ graceful fallback if image fails to load\n img.onerror = function() {\n this.src = \"https:\/\/placehold.co\/600x600\/f7ede5\/bc8f72?text=Elegant+Bliss\";\n this.alt = \"Preview unavailable\";\n };\n frame.appendChild(img);\n \n \/\/ subtle caption line (just an elegant hint)\n const captionDiv = document.createElement(\"div\");\n captionDiv.className = \"card-caption\";\n const captionText = document.createElement(\"span\");\n \/\/ short display: show index + refined style\n captionText.textContent = `\u2726 ${altTexts[idx].substring(0, 30)}${altTexts[idx].length > 30 ? \"\u2026\" : \"\"}`;\n captionDiv.appendChild(captionText);\n \n card.appendChild(frame);\n card.appendChild(captionDiv);\n \n \/\/ lightbox trigger on click\n card.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n openLightbox(idx);\n });\n \n galleryContainer.appendChild(card);\n });\n }\n \n \/\/ ========== LIGHTBOX LOGIC ==========\n function openLightbox(index) {\n if (!imageUrls.length) return;\n currentIndex = (index + imageUrls.length) % imageUrls.length;\n updateLightboxImage();\n modal.classList.add(\"active\");\n document.body.style.overflow = \"hidden\"; \/\/ prevent background scroll\n \/\/ small accessibility\n modal.setAttribute(\"aria-hidden\", \"false\");\n }\n \n function updateLightboxImage() {\n if (!lightboxImg) return;\n const newUrl = imageUrls[currentIndex];\n lightboxImg.src = newUrl;\n lightboxImg.alt = altTexts[currentIndex] || `Elegant Bliss view ${currentIndex+1}`;\n counterSpan.textContent = `${currentIndex+1} \/ ${imageUrls.length}`;\n \/\/ preload adjacent for smoother experience? optional prefetch\n }\n \n function nextImage() {\n currentIndex = (currentIndex + 1) % imageUrls.length;\n updateLightboxImage();\n }\n \n function prevImage() {\n currentIndex = (currentIndex - 1 + imageUrls.length) % imageUrls.length;\n updateLightboxImage();\n }\n \n function closeLightbox() {\n modal.classList.remove(\"active\");\n document.body.style.overflow = \"\";\n modal.setAttribute(\"aria-hidden\", \"true\");\n \/\/ optionally clear image src to reduce memory? but not necessary\n }\n \n \/\/ keyboard navigation (when modal active)\n function handleKeyDown(e) {\n if (!modal.classList.contains(\"active\")) return;\n if (e.key === \"Escape\") {\n closeLightbox();\n } else if (e.key === \"ArrowRight\") {\n nextImage();\n } else if (e.key === \"ArrowLeft\") {\n prevImage();\n }\n }\n \n \/\/ close on backdrop click (click on modal background but not on lb-container inner)\n function backdropClose(e) {\n if (e.target === modal) {\n closeLightbox();\n }\n }\n \n \/\/ attach all event listeners\n function bindLightboxEvents() {\n if (closeBtn) closeBtn.addEventListener(\"click\", closeLightbox);\n if (nextBtn) nextBtn.addEventListener(\"click\", nextImage);\n if (prevBtn) prevBtn.addEventListener(\"click\", prevImage);\n if (modal) modal.addEventListener(\"click\", backdropClose);\n window.addEventListener(\"keydown\", handleKeyDown);\n }\n \n \/\/ additional initial quality: ensure images that fail to load get a fallback but keep elegance\n \/\/ optional subtle preload of first images not needed but improves.\n \n \/\/ Wait for DOM fully loaded and initialize everything\n document.addEventListener(\"DOMContentLoaded\", () => {\n buildGallery();\n bindLightboxEvents();\n \/\/ preload first 2 images for faster lightbox experience (optional)\n const preloadLinks = imageUrls.slice(0, 3);\n preloadLinks.forEach(url => {\n const link = document.createElement('link');\n link.rel = 'preload';\n link.as = 'image';\n link.href = url;\n document.head.appendChild(link);\n });\n });\n \n \/\/ small touch: handle any broken modal image inside lightbox (if broken, replace gracefully)\n if (lightboxImg) {\n lightboxImg.addEventListener(\"error\", function() {\n if (lightboxImg.src !== \"https:\/\/placehold.co\/1200x800\/f2e4da\/b57a54?text=Elegant+Bliss+Preview\") {\n lightboxImg.src = \"https:\/\/placehold.co\/1200x800\/f2e4da\/b57a54?text=Elegant+Bliss+Preview\";\n lightboxImg.alt = \"Image preview unavailable, but bliss remains\";\n }\n });\n }\n \n \/\/ dynamic resize smoothness: ensure modal stays centered\n window.addEventListener('resize', () => {\n if (modal.classList.contains('active')) {\n \/\/ re-center, nothing heavy needed, CSS handles.\n }\n });\n \n \/\/ optional: add subtle animation on card load\n if (galleryContainer) {\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = \"1\";\n entry.target.style.transform = \"translateY(0)\";\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.05 });\n \n \/\/ apply initial style to cards once added.\n setTimeout(() => {\n const allCards = document.querySelectorAll('.gallery-card');\n allCards.forEach(card => {\n card.style.opacity = \"0\";\n card.style.transform = \"translateY(12px)\";\n card.style.transition = \"opacity 0.5s cubic-bezier(0.2, 0.9, 0.4, 1), transform 0.4s ease\";\n observer.observe(card);\n });\n }, 50);\n }\n<\/script>\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Grand Celebration Package | Premium Photo Gallery \u2728 GRAND CELEBRATION PACKAGE \u2728 Timeless moments \u2022 Luxury details \u2022 Unforgettable joy \ud83d\udcf8 Exclusive Photo Gallery \ud83c\udf1f Grand Celebration Package \u2014 Every frame tells a story of elegance & happiness \u2715 \u2039 \u203a Elegant Bliss Package | Photo Gallery Elegant Bliss Package Timeless moments \u00b7 curated with […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18"}],"version-history":[{"count":4,"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions\/49"}],"wp:attachment":[{"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n\n \n \n Grand Celebration Package | Premium Photo Gallery<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: linear-gradient(145deg, #fef7e8 0%, #fff5e6 100%);\n font-family: system-ui, 'Segoe UI', 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;\n color: #2e241f;\n scroll-behavior: smooth;\n }\n\n \/* Main container *\/\n .gallery-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 2rem 1.5rem 3rem;\n }\n\n \/* Header & package branding *\/\n .package-header {\n text-align: center;\n margin-bottom: 3rem;\n position: relative;\n }\n\n .package-header h1 {\n font-size: 3rem;\n font-weight: 700;\n background: linear-gradient(135deg, #c28a3b, #e6b86e, #b5722a);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n letter-spacing: -0.01em;\n text-shadow: 2px 2px 10px rgba(0,0,0,0.05);\n margin-bottom: 0.5rem;\n }\n\n .package-subtitle {\n font-size: 1.2rem;\n color: #6b4c2c;\n border-top: 2px solid #f3d9b1;\n display: inline-block;\n padding-top: 0.75rem;\n font-weight: 500;\n letter-spacing: 0.3px;\n }\n\n .package-badge {\n display: inline-block;\n background: #f5e2c1;\n backdrop-filter: blur(4px);\n padding: 0.4rem 1.2rem;\n border-radius: 60px;\n font-size: 0.85rem;\n font-weight: 600;\n color: #9b6a3c;\n margin-top: 1rem;\n border: 1px solid rgba(193, 137, 64, 0.3);\n }\n\n \/* gallery grid *\/\n .photo-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 1.8rem;\n margin-top: 1rem;\n }\n\n \/* gallery card *\/\n .gallery-card {\n background: white;\n border-radius: 1.5rem;\n overflow: hidden;\n box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.12), 0 8px 12px -6px rgba(0, 0, 0, 0.05);\n transition: all 0.35s cubic-bezier(0.2, 0, 0, 1);\n cursor: pointer;\n position: relative;\n }\n\n .gallery-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 28px 36px -16px rgba(0, 0, 0, 0.2);\n }\n\n .img-wrapper {\n width: 100%;\n height: 280px;\n overflow: hidden;\n background: #f2e5d4;\n position: relative;\n }\n\n .img-wrapper img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n display: block;\n }\n\n .gallery-card:hover .img-wrapper img {\n transform: scale(1.03);\n }\n\n .card-caption {\n padding: 1rem 1rem 1.2rem;\n background: white;\n }\n\n .card-caption p {\n font-weight: 500;\n color: #4f3620;\n font-size: 0.95rem;\n letter-spacing: 0.3px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .card-caption i {\n font-style: normal;\n font-size: 1.1rem;\n }\n\n \/* lightbox \/ modal *\/\n .lightbox-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.92);\n backdrop-filter: blur(10px);\n z-index: 2000;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n transition: opacity 0.25s ease;\n opacity: 0;\n }\n\n .lightbox-modal.active {\n display: flex;\n animation: fadeIn 0.25s forwards;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .modal-content {\n position: relative;\n max-width: 90vw;\n max-height: 85vh;\n text-align: center;\n }\n\n .modal-image {\n max-width: 100%;\n max-height: 75vh;\n border-radius: 1.5rem;\n box-shadow: 0 25px 45px rgba(0, 0, 0, 0.4);\n border: 2px solid rgba(255, 215, 150, 0.4);\n background: #2a241e;\n }\n\n .modal-caption {\n margin-top: 1rem;\n color: #faeac6;\n font-weight: 500;\n background: rgba(0, 0, 0, 0.6);\n display: inline-block;\n padding: 0.5rem 1.2rem;\n border-radius: 60px;\n backdrop-filter: blur(8px);\n font-size: 0.9rem;\n letter-spacing: 0.3px;\n }\n\n .close-modal {\n position: absolute;\n top: -40px;\n right: -10px;\n background: rgba(30, 20, 15, 0.7);\n border: none;\n color: white;\n font-size: 2rem;\n cursor: pointer;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.2s;\n backdrop-filter: blur(5px);\n font-weight: 300;\n }\n\n .close-modal:hover {\n background: #c17b3a;\n transform: scale(1.05);\n }\n\n .nav-btn {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(0, 0, 0, 0.6);\n border: none;\n color: #ffeaCD;\n font-size: 2.4rem;\n width: 52px;\n height: 52px;\n border-radius: 60px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.2s;\n backdrop-filter: blur(6px);\n font-weight: 400;\n line-height: 1;\n }\n\n .nav-btn:hover {\n background: #c0823ee0;\n color: white;\n }\n\n .prev-btn {\n left: 20px;\n }\n\n .next-btn {\n right: 20px;\n }\n\n .counter {\n position: absolute;\n bottom: -50px;\n left: 50%;\n transform: translateX(-50%);\n background: #2e241faa;\n backdrop-filter: blur(8px);\n padding: 0.4rem 1rem;\n border-radius: 50px;\n color: #fbe6bf;\n font-size: 0.85rem;\n font-weight: 500;\n white-space: nowrap;\n }\n\n @media (max-width: 720px) {\n .photo-grid {\n gap: 1rem;\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n }\n .img-wrapper {\n height: 240px;\n }\n .package-header h1 {\n font-size: 2.2rem;\n }\n .nav-btn {\n width: 40px;\n height: 40px;\n font-size: 1.8rem;\n }\n .prev-btn {\n left: 5px;\n }\n .next-btn {\n right: 5px;\n }\n .close-modal {\n top: -30px;\n right: -5px;\n width: 38px;\n height: 38px;\n font-size: 1.6rem;\n }\n }\n\n @media (max-width: 480px) {\n .gallery-container {\n padding: 1rem 1rem 2rem;\n }\n .img-wrapper {\n height: 200px;\n }\n }\n\n footer {\n text-align: center;\n margin-top: 4rem;\n font-size: 0.8rem;\n color: #b38b60;\n border-top: 1px solid #eedbbc;\n padding-top: 2rem;\n }\n\n \/* loading shimmer subtle *\/\n .img-wrapper img {\n background: #e7d9ca;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"gallery-container\">\n <div class=\"package-header\">\n <h1>\u2728 GRAND CELEBRATION PACKAGE \u2728<\/h1>\n <div class=\"package-subtitle\">Timeless moments \u2022 Luxury details \u2022 Unforgettable joy<\/div>\n <div class=\"package-badge\">\ud83d\udcf8 Exclusive Photo Gallery<\/div>\n <\/div>\n\n \n <div id=\"photoGrid\" class=\"photo-grid\"><\/div>\n <footer>\n <span>\ud83c\udf1f Grand Celebration Package \u2014 Every frame tells a story of elegance & happiness<\/span>\n <\/footer>\n<\/div>\n\n\n<div id=\"lightboxModal\" class=\"lightbox-modal\">\n <div class=\"modal-content\">\n <button class=\"close-modal\" id=\"closeModalBtn\" aria-label=\"Close\">\u2715<\/button>\n <button class=\"nav-btn prev-btn\" id=\"prevBtn\" aria-label=\"Previous\">\u2039<\/button>\n <img id=\"modalImage\" class=\"modal-image\" alt=\"Enlarged celebration moment\">\n <button class=\"nav-btn next-btn\" id=\"nextBtn\" aria-label=\"Next\">\u203a<\/button>\n <div id=\"modalCaption\" class=\"modal-caption\"><\/div>\n <div id=\"imageCounter\" class=\"counter\"><\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ ----- IMAGE GALLERY DATA (URLs + enriching captions) -----\n const imageUrls = [\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/whatsapp-image-2026-05-19-at-22.04.29.jpeg\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/blue-1-1.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/whatsapp-image-2025-06-22-at-23-52-17.jpeg\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/princess.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/syafiq.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/muhaymin-1.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/whatsapp-image-2025-06-22-at-23-53-03.jpeg\"\n ];\n\n \/\/ thoughtful descriptions matching each image vibe\n const imageDescriptions = [\n \"\u2728 Elegant Table & Golden Accents \u2014 Grand Reception Vibe\",\n \"\ud83d\udc99 Serene Blue Fantasy \u2014 Dreamy D\u00e9cor Details\",\n \"\ud83c\udf89 Joyful Laughter & Candid Celebrations\",\n \"\ud83d\udc51 Princess Fairytale Moment \u2014 Pure Magic\",\n \"\ud83c\udf1f Syafiq\u2019s Stylish Portrait \u2014 Confidence & Charm\",\n \"\ud83d\ude0a Muhaymin\u2019s Radiant Smile \u2014 Heartfelt Celebration\",\n \"\ud83e\udd42 Toast to Love \u2014 Unforgettable Evening Glow\"\n ];\n\n \/\/ Additional short alt labels (fallback)\n const altLabels = [\n \"Elegant table setting\",\n \"Blue decorative theme\",\n \"Joyful celebration crowd\",\n \"Princess theme moment\",\n \"Stylish portrait\",\n \"Happy guest smile\",\n \"Candid champagne toast\"\n ];\n\n \/\/ ----- DOM elements -----\n const gridContainer = document.getElementById('photoGrid');\n const modal = document.getElementById('lightboxModal');\n const modalImg = document.getElementById('modalImage');\n const modalCaption = document.getElementById('modalCaption');\n const counterSpan = document.getElementById('imageCounter');\n const closeBtn = document.getElementById('closeModalBtn');\n const prevBtn = document.getElementById('prevBtn');\n const nextBtn = document.getElementById('nextBtn');\n\n let currentIndex = 0;\n\n \/\/ ----- render gallery dynamically -----\n function buildGallery() {\n if (!gridContainer) return;\n\n gridContainer.innerHTML = '';\n imageUrls.forEach((url, idx) => {\n const card = document.createElement('div');\n card.className = 'gallery-card';\n card.setAttribute('data-index', idx);\n\n const imgWrapper = document.createElement('div');\n imgWrapper.className = 'img-wrapper';\n\n const img = document.createElement('img');\n img.src = url;\n img.alt = altLabels[idx] || `Grand Celebration moment ${idx + 1}`;\n img.loading = 'lazy';\n \/\/ optional error handling to avoid broken image placeholder\n img.onerror = function() {\n this.style.opacity = '0.6';\n this.style.background = '#d9c6ae';\n this.alt = 'Image loading issue, but celebration spirit shines!';\n };\n\n imgWrapper.appendChild(img);\n\n const captionDiv = document.createElement('div');\n captionDiv.className = 'card-caption';\n const captionP = document.createElement('p');\n \/\/ using a tiny emoji indicator + description\n captionP.innerHTML = `<span style=\"font-size:1.1rem;\">\ud83d\udcf7<\/span> ${imageDescriptions[idx]}`;\n captionDiv.appendChild(captionP);\n\n card.appendChild(imgWrapper);\n card.appendChild(captionDiv);\n\n \/\/ open lightbox on click\n card.addEventListener('click', (e) => {\n e.stopPropagation();\n openLightbox(idx);\n });\n\n gridContainer.appendChild(card);\n });\n }\n\n \/\/ ----- LIGHTBOX FUNCTIONS -----\n function openLightbox(index) {\n if (!modal || !modalImg) return;\n currentIndex = index;\n updateModalContent();\n modal.classList.add('active');\n document.body.style.overflow = 'hidden'; \/\/ prevent background scroll\n }\n\n function updateModalContent() {\n if (!modalImg || !modalCaption || !counterSpan) return;\n const imgSrc = imageUrls[currentIndex];\n modalImg.src = imgSrc;\n modalImg.alt = imageDescriptions[currentIndex] || `Celebration snapshot ${currentIndex+1}`;\n modalCaption.textContent = imageDescriptions[currentIndex];\n counterSpan.textContent = `${currentIndex+1} \/ ${imageUrls.length} \u00b7 Grand Celebration`;\n }\n\n function closeLightbox() {\n if (!modal) return;\n modal.classList.remove('active');\n document.body.style.overflow = '';\n \/\/ reset image src to avoid flickering\n }\n\n function nextImage() {\n currentIndex = (currentIndex + 1) % imageUrls.length;\n updateModalContent();\n }\n\n function prevImage() {\n currentIndex = (currentIndex - 1 + imageUrls.length) % imageUrls.length;\n updateModalContent();\n }\n\n \/\/ keyboard navigation\n function handleKeyDown(e) {\n if (!modal.classList.contains('active')) return;\n if (e.key === 'ArrowRight') {\n e.preventDefault();\n nextImage();\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault();\n prevImage();\n } else if (e.key === 'Escape') {\n e.preventDefault();\n closeLightbox();\n }\n }\n\n \/\/ ----- setup lightbox event listeners -----\n function initLightboxControls() {\n if (closeBtn) closeBtn.addEventListener('click', closeLightbox);\n if (nextBtn) nextBtn.addEventListener('click', (e) => { e.stopPropagation(); nextImage(); });\n if (prevBtn) prevBtn.addEventListener('click', (e) => { e.stopPropagation(); prevImage(); });\n \n \/\/ close modal when clicking on background overlay (but not on image\/buttons)\n if (modal) {\n modal.addEventListener('click', (e) => {\n if (e.target === modal) {\n closeLightbox();\n }\n });\n }\n \n window.addEventListener('keydown', handleKeyDown);\n }\n\n \/\/ extra smooth preload of first few images (optional)\n function preloadCriticalImages() {\n \/\/ preload first 3 images for smoother lightbox experience\n const preloadLimit = Math.min(3, imageUrls.length);\n for (let i = 0; i < preloadLimit; i++) {\n const link = document.createElement('link');\n link.rel = 'preload';\n link.as = 'image';\n link.href = imageUrls[i];\n document.head.appendChild(link);\n }\n }\n\n \/\/ tiny additional hover details: add grace note\n function applyFineTuning() {\n \/\/ Add a simple style for dynamic loading, ensure images look cohesive\n const style = document.createElement('style');\n style.textContent = `\n .gallery-card {\n transition: all 0.3s ease;\n }\n .modal-image {\n transition: transform 0.2s;\n }\n `;\n document.head.appendChild(style);\n }\n\n \/\/ ----- final initialization -----\n function init() {\n buildGallery();\n initLightboxControls();\n preloadCriticalImages();\n applyFineTuning();\n \/\/ edge: ensure modal does not stay open if orientation changes\n window.addEventListener('resize', () => {\n if (modal.classList.contains('active')) {\n \/\/ re-center, just keep as is\n }\n });\n }\n\n \/\/ start everything when DOM ready\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', init);\n } else {\n init();\n }\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\">\n <title>Elegant Bliss Package | Photo Gallery<\/title>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: linear-gradient(145deg, #fef9f5 0%, #fff7f2 100%);\n font-family: 'Inter', sans-serif;\n color: #2e241f;\n scroll-behavior: smooth;\n }\n\n \/* main container *\/\n .gallery-wrapper {\n max-width: 1400px;\n margin: 0 auto;\n padding: 2rem 2rem 4rem;\n }\n\n \/* header area \u2013 elegant bliss branding *\/\n .elegant-header {\n text-align: center;\n margin-bottom: 3rem;\n position: relative;\n }\n\n .elegant-header h1 {\n font-family: 'Playfair Display', serif;\n font-size: 3.2rem;\n font-weight: 600;\n letter-spacing: -0.02em;\n background: linear-gradient(135deg, #b77d5c, #d9a87c, #bf8a6a);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n margin-bottom: 0.5rem;\n text-shadow: 0 2px 5px rgba(0,0,0,0.02);\n }\n\n .elegant-header .subhead {\n font-size: 1rem;\n font-weight: 400;\n color: #8b6c58;\n letter-spacing: 2px;\n text-transform: uppercase;\n background: rgba(230, 210, 195, 0.3);\n display: inline-block;\n padding: 0.4rem 1.2rem;\n border-radius: 40px;\n backdrop-filter: blur(2px);\n font-weight: 500;\n }\n\n .separator {\n width: 80px;\n height: 2px;\n background: linear-gradient(90deg, #e6c8b4, #bc8f72, #e6c8b4);\n margin: 1rem auto 0;\n border-radius: 2px;\n }\n\n \/* gallery grid \u2013 square cards, uniform luxury *\/\n .photo-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.8rem;\n margin-top: 2rem;\n }\n\n \/* card style *\/\n .gallery-card {\n position: relative;\n background: #ffffffcc;\n backdrop-filter: blur(2px);\n border-radius: 28px;\n overflow: hidden;\n box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.02);\n transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);\n cursor: pointer;\n }\n\n .gallery-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 24px 40px -12px rgba(80, 50, 35, 0.2);\n }\n\n \/* square image container with elegant frame *\/\n .image-frame {\n aspect-ratio: 1 \/ 1;\n width: 100%;\n overflow: hidden;\n background: #f2e8e0;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .image-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease, filter 0.3s ease;\n filter: brightness(0.98) contrast(1.02);\n }\n\n .gallery-card:hover .image-frame img {\n transform: scale(1.05);\n filter: brightness(1.02) contrast(1.05);\n }\n\n \/* optional caption area \u2013 clean minimal *\/\n .card-caption {\n padding: 1rem 1rem 1.2rem;\n text-align: center;\n background: rgba(255, 252, 245, 0.9);\n font-size: 0.85rem;\n font-weight: 500;\n letter-spacing: 0.3px;\n color: #5e3e2c;\n border-top: 1px solid #f0e2d6;\n font-family: 'Inter', sans-serif;\n }\n\n .card-caption span {\n display: inline-block;\n font-size: 0.7rem;\n background: #f5e8de;\n padding: 0.2rem 0.8rem;\n border-radius: 20px;\n color: #a26947;\n }\n\n \/* ========= LIGHTBOX MODAL ========= *\/\n .lightbox-modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(18, 12, 8, 0.92);\n backdrop-filter: blur(12px);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 2000;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .lightbox-modal.active {\n display: flex;\n opacity: 1;\n }\n\n .lb-container {\n position: relative;\n max-width: 90vw;\n max-height: 90vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n animation: fadeUp 0.35s ease;\n }\n\n @keyframes fadeUp {\n from {\n opacity: 0;\n transform: translateY(25px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .lb-image-wrapper {\n background: rgba(35, 25, 20, 0.5);\n border-radius: 32px;\n padding: 8px;\n box-shadow: 0 35px 60px rgba(0, 0, 0, 0.4);\n }\n\n .lb-image {\n display: block;\n max-width: 82vw;\n max-height: 78vh;\n object-fit: contain;\n border-radius: 26px;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n background: #1e1712;\n }\n\n \/* lightbox controls *\/\n .lb-controls {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 2rem;\n margin-top: 1.4rem;\n }\n\n .lb-btn {\n background: rgba(255, 248, 240, 0.2);\n backdrop-filter: blur(4px);\n border: 1px solid rgba(255, 235, 215, 0.5);\n width: 48px;\n height: 48px;\n border-radius: 60px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 1.8rem;\n color: #f9e4d4;\n cursor: pointer;\n transition: all 0.2s;\n font-weight: 300;\n }\n\n .lb-btn:hover {\n background: rgba(210, 160, 120, 0.6);\n border-color: #ffefdd;\n color: white;\n transform: scale(1.03);\n }\n\n .close-lb {\n position: absolute;\n top: -12px;\n right: -12px;\n background: #2a1c14;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.7rem;\n color: #ecdacb;\n cursor: pointer;\n transition: 0.2s;\n border: 1px solid #c8aa8e;\n backdrop-filter: blur(3px);\n }\n\n .close-lb:hover {\n background: #ab7b5a;\n color: white;\n transform: rotate(90deg);\n }\n\n .lb-counter {\n background: rgba(0, 0, 0, 0.55);\n padding: 0.4rem 1rem;\n border-radius: 60px;\n font-size: 0.85rem;\n font-weight: 500;\n color: #f2e0d2;\n letter-spacing: 0.5px;\n }\n\n \/* footer *\/\n .grace-footer {\n text-align: center;\n margin-top: 4rem;\n font-size: 0.8rem;\n color: #b5896e;\n border-top: 1px solid #eedbcb;\n padding-top: 2rem;\n font-weight: 400;\n }\n\n \/* mobile refinements *\/\n @media (max-width: 680px) {\n .gallery-wrapper {\n padding: 1rem 1.2rem 2.5rem;\n }\n .elegant-header h1 {\n font-size: 2.3rem;\n }\n .photo-grid {\n gap: 1.2rem;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n }\n .lb-btn {\n width: 42px;\n height: 42px;\n font-size: 1.4rem;\n }\n .close-lb {\n width: 38px;\n height: 38px;\n font-size: 1.4rem;\n top: -8px;\n right: -8px;\n }\n }\n\n \/* loading subtle *\/\n .image-frame img {\n transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.4, 1.1);\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"gallery-wrapper\">\n <div class=\"elegant-header\">\n <h1>Elegant Bliss Package<\/h1>\n <div class=\"subhead\">Timeless moments \u00b7 curated with grace<\/div>\n <div class=\"separator\"><\/div>\n <p style=\"margin-top: 1rem; font-size: 0.95rem; font-weight: 400; color: #9f7b62; max-width: 500px; margin-left: auto; margin-right: auto;\">A visual symphony of refined aesthetics & romantic storytelling<\/p>\n <\/div>\n\n \n <div id=\"elegantGalleryGrid\" class=\"photo-grid\"><\/div>\n <div class=\"grace-footer\">\n <i class=\"fas fa-camera\" style=\"margin-right: 6px;\"><\/i> Elegant Bliss collection \u2014 each image tells a story\n <\/div>\n<\/div>\n\n\n<div id=\"lightboxModal\" class=\"lightbox-modal\">\n <div class=\"lb-container\">\n <div class=\"close-lb\" id=\"closeLightboxBtn\">\n <i class=\"fas fa-times\"><\/i>\n <\/div>\n <div class=\"lb-image-wrapper\">\n <img decoding=\"async\" id=\"lightboxImg\" class=\"lb-image\" alt=\"Elegant bliss enlarged view\" src=\"\">\n <\/div>\n <div class=\"lb-controls\">\n <div class=\"lb-btn\" id=\"prevImageBtn\"><i class=\"fas fa-chevron-left\"><\/i><\/div>\n <div class=\"lb-counter\" id=\"imageCounter\">1 \/ 10<\/div>\n <div class=\"lb-btn\" id=\"nextImageBtn\"><i class=\"fas fa-chevron-right\"><\/i><\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ ==== All image URLs provided (exactly 10) ====\n const imageUrls = [\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/safari-1.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/whatsapp-image-2026-02-19-at-18.36.29.jpeg\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/whatsapp-image-2024-12-27-at-02-28-51.jpeg\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/whatsapp-image-2025-12-04-at-11-12-43.jpeg\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/untitled-design-4.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/untitled-product-image-5.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/barbieqq-1.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/untitled-design-9-1.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/cillian.png\",\n \"https:\/\/eventhingsg.wordpress.com\/wp-content\/uploads\/2026\/05\/amelia.png\"\n ];\n\n \/\/ Elegant descriptive alt texts based on filename context\n const altTexts = [\n \"Safari elegance \u2013 golden hour bliss\",\n \"Intimate celebration \u2013 elegant bliss moment\",\n \"Romantic decor bliss \u2013 pastel serenity\",\n \"Candlelit atmosphere \u2013 timeless bliss\",\n \"Floral masterpiece \u2013 blissful design\",\n \"Luxury product shot \u2013 elegant touch\",\n \"Barbieque chic \u2013 playful elegance\",\n \"Soft textures & blissful harmony\",\n \"Cillian \u2013 refined masculine elegance\",\n \"Amelia \u2013 sophisticated radiance\"\n ];\n\n \/\/ gallery container\n const galleryContainer = document.getElementById(\"elegantGalleryGrid\");\n \/\/ lightbox elements\n const modal = document.getElementById(\"lightboxModal\");\n const lightboxImg = document.getElementById(\"lightboxImg\");\n const closeBtn = document.getElementById(\"closeLightboxBtn\");\n const prevBtn = document.getElementById(\"prevImageBtn\");\n const nextBtn = document.getElementById(\"nextImageBtn\");\n const counterSpan = document.getElementById(\"imageCounter\");\n\n let currentIndex = 0; \/\/ track which image is opened in lightbox\n\n \/\/ ========== CREATE GALLERY CARDS ==========\n function buildGallery() {\n galleryContainer.innerHTML = \"\";\n imageUrls.forEach((url, idx) => {\n const card = document.createElement(\"div\");\n card.className = \"gallery-card\";\n card.setAttribute(\"data-index\", idx);\n \n \/\/ image square frame\n const frame = document.createElement(\"div\");\n frame.className = \"image-frame\";\n const img = document.createElement(\"img\");\n img.src = url;\n img.alt = altTexts[idx] || `Elegant Bliss image ${idx+1}`;\n img.loading = \"lazy\";\n \/\/ graceful fallback if image fails to load\n img.onerror = function() {\n this.src = \"https:\/\/placehold.co\/600x600\/f7ede5\/bc8f72?text=Elegant+Bliss\";\n this.alt = \"Preview unavailable\";\n };\n frame.appendChild(img);\n \n \/\/ subtle caption line (just an elegant hint)\n const captionDiv = document.createElement(\"div\");\n captionDiv.className = \"card-caption\";\n const captionText = document.createElement(\"span\");\n \/\/ short display: show index + refined style\n captionText.textContent = `\u2726 ${altTexts[idx].substring(0, 30)}${altTexts[idx].length > 30 ? \"\u2026\" : \"\"}`;\n captionDiv.appendChild(captionText);\n \n card.appendChild(frame);\n card.appendChild(captionDiv);\n \n \/\/ lightbox trigger on click\n card.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n openLightbox(idx);\n });\n \n galleryContainer.appendChild(card);\n });\n }\n \n \/\/ ========== LIGHTBOX LOGIC ==========\n function openLightbox(index) {\n if (!imageUrls.length) return;\n currentIndex = (index + imageUrls.length) % imageUrls.length;\n updateLightboxImage();\n modal.classList.add(\"active\");\n document.body.style.overflow = \"hidden\"; \/\/ prevent background scroll\n \/\/ small accessibility\n modal.setAttribute(\"aria-hidden\", \"false\");\n }\n \n function updateLightboxImage() {\n if (!lightboxImg) return;\n const newUrl = imageUrls[currentIndex];\n lightboxImg.src = newUrl;\n lightboxImg.alt = altTexts[currentIndex] || `Elegant Bliss view ${currentIndex+1}`;\n counterSpan.textContent = `${currentIndex+1} \/ ${imageUrls.length}`;\n \/\/ preload adjacent for smoother experience? optional prefetch\n }\n \n function nextImage() {\n currentIndex = (currentIndex + 1) % imageUrls.length;\n updateLightboxImage();\n }\n \n function prevImage() {\n currentIndex = (currentIndex - 1 + imageUrls.length) % imageUrls.length;\n updateLightboxImage();\n }\n \n function closeLightbox() {\n modal.classList.remove(\"active\");\n document.body.style.overflow = \"\";\n modal.setAttribute(\"aria-hidden\", \"true\");\n \/\/ optionally clear image src to reduce memory? but not necessary\n }\n \n \/\/ keyboard navigation (when modal active)\n function handleKeyDown(e) {\n if (!modal.classList.contains(\"active\")) return;\n if (e.key === \"Escape\") {\n closeLightbox();\n } else if (e.key === \"ArrowRight\") {\n nextImage();\n } else if (e.key === \"ArrowLeft\") {\n prevImage();\n }\n }\n \n \/\/ close on backdrop click (click on modal background but not on lb-container inner)\n function backdropClose(e) {\n if (e.target === modal) {\n closeLightbox();\n }\n }\n \n \/\/ attach all event listeners\n function bindLightboxEvents() {\n if (closeBtn) closeBtn.addEventListener(\"click\", closeLightbox);\n if (nextBtn) nextBtn.addEventListener(\"click\", nextImage);\n if (prevBtn) prevBtn.addEventListener(\"click\", prevImage);\n if (modal) modal.addEventListener(\"click\", backdropClose);\n window.addEventListener(\"keydown\", handleKeyDown);\n }\n \n \/\/ additional initial quality: ensure images that fail to load get a fallback but keep elegance\n \/\/ optional subtle preload of first images not needed but improves.\n \n \/\/ Wait for DOM fully loaded and initialize everything\n document.addEventListener(\"DOMContentLoaded\", () => {\n buildGallery();\n bindLightboxEvents();\n \/\/ preload first 2 images for faster lightbox experience (optional)\n const preloadLinks = imageUrls.slice(0, 3);\n preloadLinks.forEach(url => {\n const link = document.createElement('link');\n link.rel = 'preload';\n link.as = 'image';\n link.href = url;\n document.head.appendChild(link);\n });\n });\n \n \/\/ small touch: handle any broken modal image inside lightbox (if broken, replace gracefully)\n if (lightboxImg) {\n lightboxImg.addEventListener(\"error\", function() {\n if (lightboxImg.src !== \"https:\/\/placehold.co\/1200x800\/f2e4da\/b57a54?text=Elegant+Bliss+Preview\") {\n lightboxImg.src = \"https:\/\/placehold.co\/1200x800\/f2e4da\/b57a54?text=Elegant+Bliss+Preview\";\n lightboxImg.alt = \"Image preview unavailable, but bliss remains\";\n }\n });\n }\n \n \/\/ dynamic resize smoothness: ensure modal stays centered\n window.addEventListener('resize', () => {\n if (modal.classList.contains('active')) {\n \/\/ re-center, nothing heavy needed, CSS handles.\n }\n });\n \n \/\/ optional: add subtle animation on card load\n if (galleryContainer) {\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = \"1\";\n entry.target.style.transform = \"translateY(0)\";\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.05 });\n \n \/\/ apply initial style to cards once added.\n setTimeout(() => {\n const allCards = document.querySelectorAll('.gallery-card');\n allCards.forEach(card => {\n card.style.opacity = \"0\";\n card.style.transform = \"translateY(12px)\";\n card.style.transition = \"opacity 0.5s cubic-bezier(0.2, 0.9, 0.4, 1), transform 0.4s ease\";\n observer.observe(card);\n });\n }, 50);\n }\n<\/script>\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Grand Celebration Package | Premium Photo Gallery \u2728 GRAND CELEBRATION PACKAGE \u2728 Timeless moments \u2022 Luxury details \u2022 Unforgettable joy \ud83d\udcf8 Exclusive Photo Gallery \ud83c\udf1f Grand Celebration Package \u2014 Every frame tells a story of elegance & happiness \u2715 \u2039 \u203a Elegant Bliss Package | Photo Gallery Elegant Bliss Package Timeless moments \u00b7 curated with […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18"}],"version-history":[{"count":4,"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions\/49"}],"wp:attachment":[{"href":"https:\/\/eventhing-studio.shop\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}