/* ============================================================ mobile.css — Explicit Leather Group Yeh file SAARE pages ko mobile & tablet responsive banati hai Har page ke mein global.css ke BAAD yeh line add karo: ============================================================ */ /* ── Base ── */ *, *::before, *::after { box-sizing: border-box; } img { max-width: 100%; height: auto; display: block; } body { overflow-x: hidden; } /* ============================================================ HAMBURGER BUTTON — desktop par hidden, mobile par dikhega ============================================================ */ .hamburger, .nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; cursor: pointer; background: none; border: none; padding: 6px; flex-shrink: 0; } .hamburger span, .nav-hamburger span { display: block; width: 22px; height: 2px; background: #2A1A0E; transition: all 0.3s; border-radius: 1px; } .hamburger.open span:nth-child(1), .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2), .nav-hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3), .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ TABLET ≤ 1024px ============================================================ */ @media (max-width: 1024px) { /* --- Topbar --- */ .topbar { padding: 8px 24px !important; font-size: 10px !important; flex-wrap: wrap !important; gap: 5px !important; } .topbar-right { gap: 14px !important; flex-wrap: wrap !important; } /* --- Nav --- */ nav { padding: 0 24px !important; height: 66px !important; position: sticky !important; top: 0 !important; z-index: 999 !important; } /* Desktop nav links chhupao */ nav > ul, nav .nav-links { display: none !important; } /* Hamburger dikhao */ .hamburger, .nav-hamburger { display: flex !important; } /* Mobile nav dropdown */ .mobile-nav, nav .nav-links.open { display: none; flex-direction: column !important; position: fixed !important; top: 66px !important; left: 0 !important; width: 100% !important; background: rgba(245, 240, 232, 0.99) !important; backdrop-filter: blur(16px) !important; border-bottom: 2px solid #C8A96E !important; padding: 16px 0 24px !important; gap: 0 !important; z-index: 998 !important; box-shadow: 0 8px 32px rgba(42,26,14,0.12) !important; } .mobile-nav.open, nav .nav-links.open { display: flex !important; } .mobile-nav a, nav .nav-links.open li a { display: block !important; padding: 13px 28px !important; font-size: 12px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #2A1A0E !important; border-bottom: 1px solid rgba(200,169,110,0.2) !important; font-weight: 500 !important; } .mobile-nav a:last-child { border-bottom: none !important; } /* --- Hero --- */ .hero { grid-template-columns: 1fr !important; min-height: auto !important; } .hero-left { padding: 64px 32px 52px !important; } .hero-right { height: 380px !important; min-height: unset !important; } .hero-badge { left: 24px !important; bottom: 24px !important; } .hero-numbers { flex-wrap: wrap !important; gap: 24px !important; } /* --- About strip --- */ .about-strip { grid-template-columns: 1fr !important; gap: 48px !important; padding: 80px 32px !important; } .about-visual { height: 360px !important; } /* --- Products grid --- */ .pt-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } .products-teaser { padding: 80px 32px !important; } /* --- Sub/Companies grid --- */ .sub-grid, .companies-grid, .cg { grid-template-columns: repeat(2, 1fr) !important; gap: 3px !important; } .sub-section { padding: 80px 32px !important; } /* --- CTA Banner --- */ .cta-banner { grid-template-columns: 1fr !important; gap: 40px !important; padding: 70px 32px !important; } /* --- Stats --- */ .stats-banner { grid-template-columns: repeat(2, 1fr) !important; padding: 50px 32px !important; gap: 0 !important; } .stat-item { border-right: none !important; border-bottom: 1px solid rgba(200,169,110,0.15) !important; padding: 32px 20px !important; } .stat-item:nth-child(odd) { border-right: 1px solid rgba(200,169,110,0.15) !important; } .stat-item:nth-child(3), .stat-item:nth-child(4) { border-bottom: none !important; } /* --- 2-col sections --- */ .codetail, .inqsec, .contact-lux-grid, .two-col-grid, .overview-grid { grid-template-columns: 1fr !important; gap: 40px !important; padding: 70px 32px !important; } .dvis { height: 380px !important; } /* --- Products catalog --- */ .products-catalog { padding: 70px 32px !important; } .pg { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } .pphoto { height: 260px !important; } /* --- Footer --- */ footer { padding: 56px 32px 0 !important; } .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; } /* --- Contact --- */ .contact-main { padding: 80px 32px !important; } .contact-cta-box { padding: 64px 32px !important; margin-top: 64px !important; } .contact-lux-card { padding: 40px 32px !important; } } /* ============================================================ MOBILE ≤ 767px ============================================================ */ @media (max-width: 767px) { /* --- Topbar --- */ .topbar { flex-direction: column !important; align-items: flex-start !important; padding: 10px 16px !important; gap: 4px !important; font-size: 10px !important; } .topbar-right { flex-direction: column !important; gap: 3px !important; align-items: flex-start !important; } /* --- Nav --- */ nav { padding: 0 16px !important; height: 58px !important; } .mobile-nav, nav .nav-links.open { top: 58px !important; } .nav-logo { font-size: 16px !important; } .nav-logo span { display: none !important; } /* --- Page hero --- */ .page-hero { padding: 68px 16px 52px !important; } .page-hero h1 { font-size: clamp(26px, 9vw, 42px) !important; line-height: 1.12 !important; } .page-hero p { font-size: 15px !important; } .ph-eyebrow { flex-wrap: wrap !important; } .breadcrumb { font-size: 10px !important; margin-top: 20px !important; } /* --- Hero section (index) --- */ .hero-left { padding: 48px 16px 40px !important; } .hero h1 { font-size: clamp(32px, 9vw, 50px) !important; } .hero-sub { font-size: 15px !important; max-width: 100% !important; } .hero-actions { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .hero-right { height: 300px !important; } .hero-badge { left: 16px !important; bottom: 16px !important; padding: 14px 16px !important; } .hero-badge .num { font-size: 24px !important; } .hero-numbers { gap: 16px !important; margin-top: 28px !important; flex-wrap: wrap !important; } .hn .n { font-size: 20px !important; } /* --- Marquee --- */ .marquee-strip { padding: 11px 0 !important; } .marquee-item { font-size: 9.5px !important; padding: 0 18px !important; } /* --- Recognition banner --- */ .recognition-banner { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; padding: 18px 16px !important; } .rec-divider { display: none !important; } /* --- Section titles --- */ .section-title { font-size: clamp(22px, 7vw, 34px) !important; } .section-desc { font-size: 14px !important; } .section-header { margin-bottom: 32px !important; } /* --- About strip --- */ .about-strip { grid-template-columns: 1fr !important; gap: 32px !important; padding: 52px 16px !important; } .about-visual { height: 260px !important; } .av-year { top: 12px !important; right: 4px !important; padding: 10px !important; } .av-year .y { font-size: 20px !important; } /* --- Stats --- */ .stats-banner { grid-template-columns: 1fr !important; display: flex !important; flex-direction: column !important; padding: 0 !important; } .stat-item { border-right: none !important; border-bottom: 1px solid rgba(200,169,110,0.15) !important; padding: 28px 20px !important; width: 100% !important; min-width: unset !important; } .stat-item:last-child { border-bottom: none !important; } .stat-num { font-size: clamp(28px, 8vw, 40px) !important; } /* --- Products teaser --- */ .products-teaser { padding: 52px 16px !important; } .pt-grid { grid-template-columns: 1fr !important; gap: 18px !important; } .pt-visual { height: 220px !important; } /* --- Products catalog page --- */ .products-catalog { padding: 52px 16px !important; } .pg { grid-template-columns: 1fr !important; gap: 18px !important; margin-top: 28px !important; } .pphoto { height: 220px !important; } .pinfo { padding: 18px 16px !important; } .pname { font-size: 16px !important; } /* --- Companies / sub grid --- */ .sub-section { padding: 52px 16px !important; } .sub-grid, .companies-grid, .cg { grid-template-columns: 1fr !important; gap: 3px !important; } .sub-card { height: 300px !important; } .sub-card:last-child { grid-column: auto !important; } .sub-name { font-size: 18px !important; } /* --- CTA Banner --- */ .cta-banner { grid-template-columns: 1fr !important; gap: 32px !important; padding: 52px 16px !important; } .cta-banner::before { display: none !important; } .cta-h { font-size: clamp(26px, 8vw, 40px) !important; } .cta-sub { font-size: 15px !important; } /* --- codetail --- */ .codetail { grid-template-columns: 1fr !important; gap: 28px !important; padding: 52px 16px !important; } .dvis { height: 250px !important; } .dbadge { padding: 10px 12px !important; bottom: 12px !important; right: 12px !important; } .dbadge .n { font-size: 15px !important; } /* srow horizontal → vertical */ .srow { flex-direction: column !important; border: none !important; } .scell { border-right: none !important; border-bottom: 1px solid rgba(200,169,110,0.25) !important; padding: 14px 0 !important; display: flex !important; align-items: center !important; gap: 14px !important; text-align: left !important; } .scell:last-child { border-bottom: none !important; } .sv { font-size: 17px !important; min-width: 90px !important; } /* --- inqsec --- */ .inqsec { grid-template-columns: 1fr !important; gap: 32px !important; padding: 52px 16px !important; } .iform { padding: 20px 16px !important; } .iform input, .iform textarea { padding: 12px 14px !important; } .crow { gap: 10px !important; padding: 12px 0 !important; } .cico { width: 34px !important; height: 34px !important; font-size: 13px !important; } .cval { font-size: 13px !important; } /* --- Gallery slider --- */ .gallery-slider { margin-top: 22px !important; } .gs-slide { height: 230px !important; } .gs-arrow { width: 34px !important; height: 34px !important; font-size: 15px !important; } .gs-prev { left: 10px !important; } .gs-next { right: 10px !important; } .gs-counter { font-size: 9.5px !important; padding: 4px 8px !important; } /* --- Contact page --- */ .contact-main { padding: 52px 16px !important; } .contact-lux-grid { grid-template-columns: 1fr !important; gap: 28px !important; } .contact-lux-card { padding: 24px 16px !important; } .contact-heading { font-size: 26px !important; } .contact-cta-box { padding: 44px 16px !important; margin-top: 40px !important; } .contact-icon { width: 42px !important; height: 42px !important; font-size: 15px !important; } .contact-value { font-size: 13px !important; } /* --- dtags --- */ .dtags { gap: 6px !important; } .dtag { font-size: 9px !important; padding: 5px 10px !important; } /* --- Buttons --- */ .btn-primary { width: 100% !important; text-align: center !important; padding: 14px 20px !important; font-size: 11px !important; display: block !important; } .btn-ghost { font-size: 10.5px !important; } /* --- Footer --- */ footer { padding: 44px 16px 0 !important; } .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding-bottom: 32px !important; } .footer-bottom { flex-direction: column !important; gap: 6px !important; text-align: center !important; padding: 20px 0 !important; font-size: 10px !important; } .footer-brand-name { font-size: 18px !important; } /* --- Finish grid --- */ .finish-grid, .finishes-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } /* --- Photo hero grid --- */ .photo-hero-grid { grid-template-columns: 1fr !important; } .ph-item:first-child { grid-row: auto !important; } .ph-item { min-height: 180px !important; } /* --- Scroll top --- */ .scroll-top { bottom: 16px !important; right: 16px !important; width: 38px !important; height: 38px !important; font-size: 14px !important; } /* --- Highlights (about page) --- */ .hl-item { padding: 12px 14px !important; gap: 10px !important; } /* --- Company detail sections --- */ .company-intro, .cd-grid, .about-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding: 52px 16px !important; } } /* ============================================================ VERY SMALL MOBILE ≤ 400px ============================================================ */ @media (max-width: 400px) { .page-hero h1 { font-size: 24px !important; } .hero h1 { font-size: 28px !important; } .hero-right { height: 240px !important; } .hero-badge { display: none !important; } .gs-slide { height: 180px !important; } .pphoto { height: 180px !important; } .pt-visual { height: 180px !important; } .sub-card { height: 260px !important; } .stat-num { font-size: 26px !important; } .finish-grid, .finishes-grid { grid-template-columns: 1fr !important; } .topbar-right { flex-direction: column !important; gap: 2px !important; } .dvis { height: 200px !important; } }