/* ============================================================= mega-menu.css Styles for: - Experiences Mega Menu - Destinations Mega Menu (same shared classes) - Write a Review Modal stars - Contact Cards (Call Us / WhatsApp / Email) How to use: Add this in your , after Bootstrap: ============================================================= */ /* ============================================================ SHARED MEGA MENU WRAPPER ============================================================ */ .exp-mega-wrapper { position: relative; } /* ============================================================ MEGA MENU DROPDOWN BOX ============================================================ */ .exp-mega-box { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 720px; background: #fff; border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.13), 0 4px 16px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.07); z-index: 9999; overflow: hidden; display: none; flex-direction: row-reverse; /* right panel (category list) appears on the right visually */ } .exp-mega-box.open { display: flex !important; animation: expFadeIn 0.22s cubic-bezier(0.2, 0, 0.1, 1); } @keyframes expFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ============================================================ RIGHT PANEL — Category List (Honeymoon / Hill Station / Group / Getaway OR Tamil Nadu / Kerala) ============================================================ */ .exp-mega-right { list-style: none; margin: 0; padding: 10px 0; width: 210px; min-width: 210px; background: #f7f8fa; border-left: 1px solid #ebebeb; } .exp-cat-item { display: flex; align-items: center; gap: 10px; padding: 14px 20px; cursor: pointer; font-size: 15px; /* standard nav-level readable size */ font-weight: 600; color: #2d2d2d; transition: background 0.18s, color 0.18s; border-left: 3px solid transparent; line-height: 1.3; } .exp-cat-item:hover, .exp-cat-item.active { background: #fff; color: var(--bs-primary, #ff6e40); border-left-color: var(--bs-primary, #ff6e40); } .exp-cat-icon { font-size: 18px; line-height: 1; } .exp-cat-arrow { margin-left: auto; font-size: 11px; color: #bbb; transition: color 0.15s; } .exp-cat-item.active .exp-cat-arrow, .exp-cat-item:hover .exp-cat-arrow { color: var(--bs-primary, #ff6e40); } /* ============================================================ LEFT PANEL — Sub-category Links (switches dynamically when right-side category is hovered) ============================================================ */ .exp-mega-left { flex: 1; padding: 24px 28px; min-height: 260px; } /* Each sub-panel is hidden by default; .active one shows */ .exp-sub-content { display: none; } .exp-sub-content.active { display: block; animation: subFade 0.18s ease; } @keyframes subFade { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } /* Section label above the links (e.g. "HONEYMOON TOURS") */ .exp-sub-heading { font-size: 11px; /* intentionally small — decorative uppercase label */ font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; color: #aaa; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1.5px solid #f0f0f0; } /* Individual tour/package links */ .exp-mega-left a { display: block; padding: 9px 0; font-size: 15px; /* standard readable link size */ font-weight: 500; color: #3a3a3a; text-decoration: none; border-bottom: 1px solid #f5f5f5; transition: color 0.15s, padding-left 0.15s; line-height: 1.4; letter-spacing: 0.1px; } .exp-mega-left a:last-child { border-bottom: none; } .exp-mega-left a:hover { color: var(--bs-primary, #ff6e40); padding-left: 8px; } /* ============================================================ MOBILE RESPONSIVE (≤ 991px) ============================================================ */ @media (max-width: 991px) { .exp-mega-box.open { position: static; transform: none; width: 100%; flex-direction: column; box-shadow: none; border-radius: 0; border: none; border-top: 1px solid #eee; animation: none; } .exp-mega-right { width: 100%; border-left: none; border-bottom: 1px solid #eee; display: flex; flex-wrap: wrap; padding: 8px; } .exp-cat-item { width: calc(50% - 8px); border: 1px solid #eee; border-radius: 8px; margin: 4px; font-size: 14px; border-left: 3px solid transparent; } .exp-mega-left { padding: 16px; } .exp-mega-left a { font-size: 14px; } } /* ============================================================ CONTACT CARDS (Call Us / WhatsApp / Email Us) Used in the Enquiry section sidebar ============================================================ */ .contact-card-new { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); border: 1px solid rgba(0, 0, 0, 0.05); transition: transform 0.25s, box-shadow 0.25s; } .contact-card-new:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); } .contact-card-icon-wrap { width: 54px; height: 54px; min-width: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; } /* Gradient icon colours */ .call-icon { background: linear-gradient(135deg, #ff6e40, #ff9a3c); color: #fff; } .wa-icon { background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; } .email-icon { background: linear-gradient(135deg, #4a90d9, #1e5fa8); color: #fff; } .contact-card-body { display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .contact-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #999; } .contact-card-value { font-size: 15px; font-weight: 700; color: #222; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.15s; } .contact-card-value:hover { color: var(--bs-primary, #ff6e40); } .contact-card-hint { font-size: 11.5px; color: #aaa; } /* ============================================================ WRITE A REVIEW — Star Rating ============================================================ */ .review-star { font-size: 28px; color: #ddd; cursor: pointer; transition: color 0.15s, transform 0.15s; } .review-star.lit, .review-star:hover { color: #ffc107; transform: scale(1.15); } /* ═══ Explore Packages Modal ═══ */ /* ── Overlay ── */ .epk-overlay { display: none; position: fixed; inset: 0; background: rgba(13, 27, 42, 0.55); backdrop-filter: blur(4px); z-index: 10500; align-items: center; justify-content: center; padding: 16px; } .epk-overlay.open { display: flex; animation: epkFadeIn 0.25s ease; } @keyframes epkFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── Panel ── */ .epk-panel { background: #fff; border-radius: 20px; width: 100%; max-width: 680px; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 32px 80px rgba(13, 27, 42, 0.28), 0 8px 24px rgba(0,0,0,0.12); animation: epkSlideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes epkSlideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ── Header ── */ .epk-header { background: linear-gradient(135deg, #0d1b2a 0%, #1a3a5c 100%); padding: 22px 24px 20px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .epk-header-inner { display: flex; align-items: center; gap: 14px; } .epk-icon { font-size: 32px; line-height: 1; background: rgba(255,255,255,0.12); border-radius: 12px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; } .epk-label { font-size: 11px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 1.4px; margin: 0 0 4px; } .epk-title { font-size: 20px; font-weight: 700; color: #fff; margin: 0; } .epk-close { background: rgba(255,255,255,0.12); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; flex-shrink: 0; } .epk-close:hover { background: rgba(255,255,255,0.22); } /* ── Body (scrollable) ── */ .epk-body { padding: 20px 24px; overflow-y: auto; flex: 1; } .epk-body::-webkit-scrollbar { width: 5px; } .epk-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; } /* ── Package Card ── */ .epk-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1.5px solid #eee; border-radius: 12px; margin-bottom: 10px; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; background: #fafafa; } .epk-card:last-child { margin-bottom: 0; } .epk-card:hover { border-color: #ff6e40; box-shadow: 0 4px 18px rgba(255,110,64,0.12); transform: translateY(-2px); background: #fff; color: inherit; text-decoration: none; } .epk-card-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .epk-card-num { width: 34px; height: 34px; background: linear-gradient(135deg, #ff6e40, #ff9a3c); color: #fff; font-size: 13px; font-weight: 700; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .epk-card-info { min-width: 0; } .epk-card-name { font-size: 15px; font-weight: 600; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-bottom: 3px; } .epk-card-meta { font-size: 12px; color: #888; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .epk-card-tag { background: #f0f4ff; color: #4a6cf7; border-radius: 4px; padding: 1px 7px; font-size: 11px; font-weight: 600; } .epk-card-arrow { color: #bbb; font-size: 16px; flex-shrink: 0; transition: color 0.2s, transform 0.2s; } .epk-card:hover .epk-card-arrow { color: #ff6e40; transform: translateX(3px); } /* Coming soon pill */ .epk-card.coming-soon { opacity: 0.6; cursor: default; pointer-events: none; } .epk-card.coming-soon .epk-card-tag { background: #f5f5f5; color: #aaa; } /* ── Footer ── */ .epk-footer { padding: 14px 24px 18px; border-top: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; flex-wrap: wrap; background: #fafafa; } .epk-footer-note { font-size: 13px; color: #666; margin: 0; } .epk-footer-note a { color: #ff6e40; font-weight: 600; text-decoration: none; } .epk-footer-note a:hover { text-decoration: underline; } .epk-enquire-btn { background: linear-gradient(135deg, #ff6e40, #ff9a3c); color: #fff; border: none; border-radius: 50px; padding: 9px 22px; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; white-space: nowrap; } .epk-enquire-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(255,110,64,0.35); } /* ── Mobile ── */ @media (max-width: 575px) { .epk-panel { border-radius: 16px 16px 0 0; max-height: 92vh; } .epk-overlay { align-items: flex-end; padding: 0; } .epk-body { padding: 16px; } .epk-header { padding: 18px 16px; } .epk-footer { padding: 12px 16px 20px; } .epk-card-name { font-size: 14px; } .epk-title { font-size: 17px; } }