/* ═══════════════════════════════════════════════════════════════════ LUXIOR LUXURY CARE — FULL MOBILE RESPONSIVE CSS v2 Saari 5 HTML files mein ke andar link karein: ═══════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── 1. HERO VIDEO — FULL COVER FIX (sabse important) Portrait mobile pe video cover karne ke liye width = 177.78vh ───────────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; width: 100%; height: 100vh; height: 100svh; min-height: 560px; display: flex; align-items: center; } /* Hero ka video wrapper div */ .hero > div:first-child { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; pointer-events: none !important; z-index: 0 !important; } /* Desktop + tablet — original approach thoda bada */ .hero > div:first-child iframe { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; /* Landscape: width se cover */ width: 120vw !important; height: 67.5vw !important; /* 120vw * 9/16 */ /* Fallback agar height se bada cover chahiye */ min-width: 177.78vh !important; /* 100vh * 16/9 — portrait ke liye */ min-height: 100vh !important; pointer-events: none !important; border: 0 !important; } /* Mobile portrait — yahan video chhoti aati thi */ @media (max-width: 768px) { .hero { height: 100vh !important; height: 100svh !important; min-height: 600px !important; } .hero > div:first-child iframe { /* Portrait mode: viewport height se scale karo */ width: 177.78vh !important; /* 100vh * 16/9 = full cover portrait */ height: 100vh !important; min-width: 177.78vh !important; min-height: 100% !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } } /* Hero overlay — text ke upar acha contrast */ .hero-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient( 135deg, rgba(26,26,26,.78) 0%, rgba(26,26,26,.50) 60%, rgba(26,26,26,.35) 100% ) !important; z-index: 1 !important; } /* Hero content z-index theek karo */ .hero-content { position: relative !important; z-index: 2 !important; } /* Hero scroll indicator */ .hero-scroll { position: absolute !important; z-index: 2 !important; } /* ───────────────────────────────────────────────────────────────── 2. HERO CONTENT — MOBILE TEXT & BUTTONS ───────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .hero-content { padding: 0 20px !important; padding-top: 72px !important; width: 100% !important; } .hero-title, .hero h1 { font-size: clamp(34px, 10vw, 54px) !important; line-height: 1.1 !important; margin-bottom: 16px !important; color: white !important; } .hero-sub { font-size: 10px !important; letter-spacing: 2px !important; line-height: 2.2 !important; margin-bottom: 28px !important; max-width: 100% !important; } .hero-btns { flex-direction: column !important; gap: 12px !important; width: 100% !important; } .hero-btns a, .hero-btns .btn-gold, .hero-btns .btn-outline { width: 100% !important; justify-content: center !important; text-align: center !important; padding: 15px 20px !important; } .hero-scroll { bottom: 24px !important; } } /* ───────────────────────────────────────────────────────────────── 3. NAVIGATION ───────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .nav-links, .nav-book { display: none !important; } .hamburger { display: flex !important; flex-direction: column; gap: 6px; cursor: pointer; } .nav-wrap { padding: 0 16px !important; height: 64px !important; } .nav-logo { height: 42px !important; } } /* Mobile Menu */ .mobile-menu { display: none; position: fixed; inset: 0; background: #fff; z-index: 1000; flex-direction: column; align-items: center; justify-content: center; gap: 28px; } .mobile-menu.open { display: flex !important; } .mob-close { position: absolute; top: 20px; right: 24px; font-size: 26px; cursor: pointer; background: none; border: none; color: #6B6460; } .mob-link { font-family: 'Josefin Sans', sans-serif; font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: #1A1A1A; text-decoration: none; padding: 6px 0; } .mob-link:hover { color: #A07040; } /* ───────────────────────────────────────────────────────────────── 4. FOOTER — EK SIDE AANE KI PROBLEM FIX Inline style override karne ke liye !important zaroori hai ───────────────────────────────────────────────────────────────── */ footer { overflow: hidden; } .footer-inner { max-width: 1280px; margin: 0 auto; } /* Tablet: 2 column */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px 32px !important; } } /* Mobile: 1 column — inline style override */ @media (max-width: 640px) { footer { padding: 56px 20px 32px !important; } .footer-grid { display: grid !important; grid-template-columns: 1fr !important; /* EK SIDE WALI PROBLEM FIX */ gap: 36px !important; width: 100% !important; margin-bottom: 36px !important; } /* Har footer column full width */ .footer-grid > div { width: 100% !important; max-width: 100% !important; } .footer-logo { height: 38px !important; margin-bottom: 14px !important; } .footer-desc { font-size: 13px !important; max-width: 100% !important; } .footer-head { font-size: 10px !important; margin-bottom: 14px !important; } .footer-links { gap: 10px !important; } .footer-contact { font-size: 13px !important; line-height: 2 !important; } .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 8px !important; padding-top: 20px !important; } .footer-copy { font-size: 9px !important; } } /* ───────────────────────────────────────────────────────────────── 5. VIDEO GRID (Index page — 3 videos row) ───────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .video-row { grid-template-columns: 1fr !important; gap: 3px !important; } } /* All YouTube embeds */ .vid-wrap { position: relative !important; width: 100% !important; padding-bottom: 56.25% !important; overflow: hidden !important; background: #111 !important; height: 0 !important; } .vid-wrap iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; } /* ───────────────────────────────────────────────────────────────── 6. SERVICES GRID ───────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 580px) { .svc-grid { grid-template-columns: 1fr !important; } .svc-main { grid-template-columns: 1fr !important; } .svc-card-body { padding: 24px 18px !important; } .svc-name { font-size: 22px !important; } } /* ───────────────────────────────────────────────────────────────── 7. PAGE HERO (Services, Gallery, About, Contact pages) ───────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .page-hero { padding: 110px 20px 56px !important; } .page-hero h1 { font-size: clamp(30px, 9vw, 50px) !important; line-height: 1.15 !important; } } /* ───────────────────────────────────────────────────────────────── 8. STATS ROW ───────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; } } @media (max-width: 480px) { .stat-n { font-size: 40px !important; } } /* ───────────────────────────────────────────────────────────────── 9. PROCESS STEPS ───────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .proc-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 36px !important; } .proc-grid::before { display: none !important; } } @media (max-width: 500px) { .proc-grid { grid-template-columns: 1fr !important; } } /* ───────────────────────────────────────────────────────────────── 10. GALLERY GRID ───────────────────────────────────────────────────────────────── */ @media (max-width: 860px) { .gal-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px) { .gal-grid { grid-template-columns: 1fr !important; } } /* ───────────────────────────────────────────────────────────────── 11. ABOUT GRID + VALUES ───────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr !important; gap: 48px !important; padding: 60px 0 !important; } .vals { grid-template-columns: 1fr !important; } .val { padding: 36px 24px !important; } } /* ───────────────────────────────────────────────────────────────── 12. CONTACT PAGE ───────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .contact-wrap { grid-template-columns: 1fr !important; } .c-left, .c-right { padding: 56px 24px !important; } .fr { grid-template-columns: 1fr !important; gap: 0 !important; } } @media (max-width: 580px) { .c-left, .c-right { padding: 48px 20px !important; } } /* ───────────────────────────────────────────────────────────────── 13. INLINE STYLE GRID OVERRIDES (for divs with inline grid) ───────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* 2-column inline grids → stack */ [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 40px !important; } } @media (max-width: 640px) { /* 4-column inline grids → single column (footer fix) */ [style*="grid-template-columns:2fr 1fr 1fr 1fr"], [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 32px !important; } /* Stats 4-col */ [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* Process + values 3-col */ [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; } } /* ───────────────────────────────────────────────────────────────── 14. BUTTONS — FULL WIDTH MOBILE ───────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .btn-gold, .btn-outline { width: 100% !important; justify-content: center !important; padding: 14px 16px !important; } /* CTA banner flex buttons */ div[style*="display:flex;gap:16px;justify-content:center"], div[style*="display: flex; gap: 16px; justify-content: center"] { flex-direction: column !important; align-items: stretch !important; padding: 0 20px !important; } } /* ───────────────────────────────────────────────────────────────── 15. REVIEWS CAROUSEL ───────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .rev-card { flex: 0 0 290px !important; padding: 24px 22px !important; } .rev-text { font-size: 15px !important; } } /* ───────────────────────────────────────────────────────────────── 16. WHATSAPP BUTTON ───────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .wa { bottom: 16px !important; right: 16px !important; } .wa-btn { width: 52px !important; height: 52px !important; } .wa-btn svg { width: 26px !important; height: 26px !important; } .wa-tip { display: none !important; } } /* ───────────────────────────────────────────────────────────────── 17. MARQUEE ───────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .marquee { padding: 12px 0 !important; } .marquee-i { font-size: 9px !important; padding: 0 18px !important; letter-spacing: 3px !important; } } /* ───────────────────────────────────────────────────────────────── 18. SECTION PADDING GLOBAL ───────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .section, .section-wide { padding: 60px 20px !important; } } /* ───────────────────────────────────────────────────────────────── 19. TYPOGRAPHY SCALE ───────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .h-xl { font-size: clamp(36px, 10vw, 60px) !important; } .h-lg { font-size: clamp(28px, 8vw, 48px) !important; } .h-md { font-size: clamp(22px, 6vw, 34px) !important; } } /* ───────────────────────────────────────────────────────────────── 20. ACCESSIBILITY — No animations for low-power mode ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-l, .reveal-r { opacity: 1 !important; transform: none !important; transition: none !important; } .marquee-t { animation: none !important; } .review-track { animation: none !important; } }