Events

/* Scoped Container to bypass WordPress Editor conflicts */ .mp-wrapper { all: initial; display: block; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 1200px; margin: 40px auto; padding: 0 20px; box-sizing: border-box; } .mp-wrapper * { box-sizing: border-box; } .mp-wrapper .mp-section-title { font-size: 28px; font-weight: 700; color: #111; margin-bottom: 25px; line-height: 1.2; } /* 3-Column Grid Layout */ .mp-wrapper .mp-packages-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 25px !important; width: 100% !important; } @media (max-width: 900px) { .mp-wrapper .mp-packages-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .mp-wrapper .mp-packages-grid { grid-template-columns: 1fr !important; } } /* Package Card */ .mp-wrapper .mp-package-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; margin: 0 !important; } .mp-wrapper .mp-package-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); } .mp-wrapper .mp-card-img-wrap { width: 100%; height: 350px; overflow: hidden; background: #f4f4f4; } .mp-wrapper .mp-card-img-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.3s ease; display: block !important; } .mp-wrapper .mp-package-card:hover .mp-card-img-wrap img { transform: scale(1.03); } /* Modal Popup Overlay */ .mp-modal-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(4px); display: flex !important; align-items: center !important; justify-content: center !important; z-index: 999999 !important; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; padding: 20px; } .mp-modal-overlay.active { opacity: 1 !important; visibility: visible !important; } /* Modal Container Box */ .mp-modal-container { background: #fff !important; width: 100% !important; max-width: 950px !important; border-radius: 16px !important; overflow: hidden !important; display: flex !important; position: relative !important; box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important; transform: scale(0.95); transition: transform 0.3s ease; max-height: 90vh !important; text-align: left !important; } .mp-modal-overlay.active .mp-modal-container { transform: scale(1) !important; } /* Close Button */ .mp-modal-close { position: absolute !important; top: 15px !important; right: 15px !important; background: #f0f2f5 !important; border: none !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; font-size: 18px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #333 !important; z-index: 10 !important; } .mp-modal-close:hover { background: #e2e6ea !important; } /* Modal Left Side (Image) */ .mp-modal-left { flex: 1 !important; background: #0f172a !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; overflow-y: auto !important; } .mp-modal-left img { max-width: 100% !important; max-height: 500px !important; border-radius: 8px !important; object-fit: contain !important; } /* Modal Right Side (Content & Details) */ .mp-modal-right { flex: 1.2 !important; padding: 35px 30px !important; overflow-y: auto !important; } .mp-modal-title { font-size: 24px !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 0 8px 0 !important; } .mp-modal-price { font-size: 20px !important; font-weight: 700 !important; color: #0073e6 !important; margin-bottom: 5px !important; } .mp-modal-subtitle { font-size: 13px !important; color: #666 !important; margin-bottom: 20px !important; border-bottom: 1px solid #eee !important; padding-bottom: 15px !important; } .mp-modal-desc { font-size: 14px !important; color: #444 !important; line-height: 1.6 !important; margin-bottom: 20px !important; } .mp-detail-row { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 14px !important; font-size: 14px !important; color: #333 !important; border-bottom: 1px dashed #eee !important; padding-bottom: 10px !important; } .mp-detail-row svg { width: 18px !important; height: 18px !important; fill: #0073e6 !important; flex-shrink: 0 !important; } .mp-sharing-info { font-size: 13px !important; color: #555 !important; background: #f8f9fa !important; padding: 12px !important; border-radius: 8px !important; margin-bottom: 25px !important; line-height: 1.5 !important; } .mp-modal-actions { display: flex !important; gap: 12px !important; align-items: center !important; } .mp-btn-customize { background: #0073e6 !important; color: #fff !important; border: none !important; padding: 12px 20px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 14px !important; cursor: pointer !important; flex: 1 !important; text-align: center !important; text-decoration: none !important; } .mp-btn-call { display: flex !important; align-items: center !important; gap: 8px !important; border: 2px solid #0073e6 !important; color: #0073e6 !important; padding: 10px 16px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 14px !important; text-decoration: none !important; background: transparent !important; } .mp-btn-call svg { width: 16px !important; height: 16px !important; fill: currentColor !important; } @media (max-width: 768px) { .mp-modal-container { flex-direction: column !important; max-height: 95vh !important; } .mp-modal-left { max-height: 250px !important; padding: 15px !important; } .mp-modal-right { padding: 20px !important; } } function openMpModal(modalId) { document.getElementById(modalId).classList.add('active'); document.body.style.overflow = 'hidden'; } function closeMpModal(modalId) { document.getElementById(modalId).classList.remove('active'); document.body.style.overflow = 'auto'; } function closeMpModalOutside(event, modalId) { if (event.target.classList.contains('mp-modal-overlay')) { closeMpModal(modalId); } } document.addEventListener('keydown', function(event) { if (event.key === 'Escape') { document.querySelectorAll('.mp-modal-overlay').forEach(modal => { modal.classList.remove('active'); }); document.body.style.overflow = 'auto'; } });