/* ============================================================ AMAR MURADNAGAR — Main Stylesheet Font: Hind Siliguri (Bengali) from Google Fonts Imported in index.html ============================================================ */ /* ── CSS VARIABLES ──────────────────────────────────────── */ :root { --orange: #D94F2B; --orange-dark: #B33A1A; --orange-light: #E8704A; --cream: #F2EDE6; --cream-light: #FAF7F3; --dark: #1C1208; --dark2: #2A1A0E; --mid: #4A2E1A; --text: #2A1A0E; --muted: #8C7060; --white: #FFFFFF; --border: rgba(217, 79, 43, 0.12); --line: rgba(42, 26, 14, 0.1); } /* ── RESET & BASE ───────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Hind Siliguri', sans-serif; background: var(--cream-light); color: var(--text); overflow-x: hidden; } /* ── NAVBAR ─────────────────────────────────────────────── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; background: rgba(250, 247, 243, 0.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); transition: all 0.3s; } nav.scrolled { background: rgba(28, 18, 8, 0.97); border-bottom-color: rgba(255, 255, 255, 0.06); } .nav-left { display: flex; align-items: center; gap: 12px; } .nav-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; } .nav-logo-img { height: 38px; width: auto; display: block; transition: opacity 0.25s, filter 0.25s; filter: brightness(0.92) saturate(1.1); } .nav-logo:hover .nav-logo-img { opacity: 0.85; } /* On dark scrolled nav — logo stays vivid */ nav.scrolled .nav-logo-img { filter: brightness(1.08) saturate(1.05); } .nav-center { display: flex; align-items: center; gap: 8px; position: absolute; left: 50%; transform: translateX(-50%); } .nav-link { font-size: 0.875rem; font-weight: 500; color: var(--mid); text-decoration: none; padding: 8px 14px; border-radius: 8px; transition: all 0.2s; } .nav-link:hover { color: var(--orange); background: rgba(217, 79, 43, 0.07); } nav.scrolled .nav-link { color: rgba(250, 247, 243, 0.65); } nav.scrolled .nav-link:hover { color: white; background: rgba(255, 255, 255, 0.08); } .nav-right { display: flex; align-items: center; gap: 10px; } /* Navbar Buttons */ .btn-login { display: inline-flex; align-items: center; gap: 8px; font-family: 'Hind Siliguri', sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--dark); padding: 8px 20px; border: 1.5px solid var(--line); border-radius: 100px; background: white; cursor: pointer; transition: all 0.2s; text-decoration: none; } .btn-login:hover { border-color: var(--orange); color: var(--orange); } /* Nav icon buttons — আমার আবেদন + notification bell */ .nav-icon-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 1.5px solid var(--orange); background: transparent; color: var(--orange); font-family: 'Hind Siliguri', sans-serif; font-size: 0.82rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.2s, border-color 0.2s, color 0.2s; white-space: nowrap; position: relative; } /* Application count badge on আমার আবেদন button */ .nav-app-badge { position: absolute; top: -7px; right: -8px; min-width: 16px; height: 16px; background: var(--orange); color: white; border-radius: 99px; font-size: 0.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; border: 1.5px solid white; pointer-events: none; } .nav-app-badge.hidden { display: none; } .nav-icon-btn:hover { background: rgba(217, 79, 43, 0.08); border-color: var(--orange-dark); color: var(--orange-dark); } nav.scrolled .nav-icon-btn { border-color: rgba(255, 255, 255, 0.3); color: rgba(250, 247, 243, 0.88); } nav.scrolled .nav-icon-btn:hover { border-color: white; color: white; background: rgba(255, 255, 255, 0.08); } .nav-icon-label { font-size: 0.8rem; } .nav-notif-wrap { position: relative; display: inline-flex; } .nav-notif-badge { position: absolute; top: -7px; right: -8px; min-width: 16px; height: 16px; background: var(--orange); color: white; border-radius: 99px; font-size: 0.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; } nav.scrolled .btn-login { background: transparent; border-color: rgba(255, 255, 255, 0.2); color: rgba(250, 247, 243, 0.8); } nav.scrolled .btn-login:hover { border-color: var(--orange-light); color: white; } .btn-emergency { display: inline-flex; align-items: center; gap: 10px; font-family: 'Hind Siliguri', sans-serif; color: white; background: var(--orange); padding: 7px 16px 7px 12px; border-radius: 100px; border: 2px solid rgba(255, 255, 255, 0.2); cursor: pointer; transition: background 0.2s, transform 0.2s; text-decoration: none; animation: emergPulse 2s ease-in-out infinite; } .btn-emergency:hover { background: var(--orange-dark); transform: scale(1.04); } .emerg-live-dot { width: 9px; height: 9px; background: white; border-radius: 50%; flex-shrink: 0; animation: liveDot 1.2s ease-in-out infinite; } @keyframes liveDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.55); } } .btn-emergency-inner { display: flex; flex-direction: column; line-height: 1.15; } .btn-emergency-label { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.8; } .btn-emergency-num { font-size: 0.88rem; font-weight: 800; letter-spacing: -0.01em; } @keyframes emergPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 79, 43, 0.7), 0 0 0 0 rgba(217, 79, 43, 0.3); } 60% { box-shadow: 0 0 0 7px rgba(217, 79, 43, 0.15), 0 0 0 14px rgba(217, 79, 43, 0); } } /* User Avatar & Dropdown */ .user-avatar { display: none; width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: white; font-weight: 700; font-size: 0.9rem; align-items: center; justify-content: center; cursor: pointer; border: 2px solid var(--orange-light); position: relative; } .user-dropdown { display: none; position: absolute; top: calc(100% + 12px); right: 0; min-width: 220px; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); padding: 8px; z-index: 300; } .user-avatar.open .user-dropdown { display: block; } .user-avatar.open { display: flex; } .dropdown-header { padding: 12px 16px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .dropdown-name { font-weight: 700; color: var(--dark); font-size: 0.95rem; } .dropdown-phone { font-size: 0.8rem; color: var(--muted); } .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 10px; font-size: 0.875rem; color: var(--text); cursor: pointer; transition: background 0.15s; text-decoration: none; } .dropdown-item:hover { background: var(--cream); color: var(--orange); } .dropdown-item.danger { color: #c0392b; } .dropdown-item.danger:hover { background: #fdf2f2; } /* ── LOGIN MODAL ─────────────────────────────────────────── */ .modal-overlay { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(28, 18, 8, 0.6); backdrop-filter: blur(8px); align-items: center; justify-content: center; } .modal-overlay.open { display: flex; } .modal { background: white; border-radius: 24px; width: 100%; max-width: 440px; max-height: calc(100dvh - 40px); position: relative; animation: modalIn 0.3s ease-out; margin: 20px; display: flex; flex-direction: column; overflow: hidden; } .modal-body { padding: 48px 40px; overflow-y: auto; flex: 1; } @keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border-radius: 50%; background: var(--cream); border: none; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: all 0.2s; } .modal-close:hover { background: var(--orange); color: white; } .modal-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; } .modal-logo-mark { width: 40px; height: 40px; background: var(--orange); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 1.1rem; } .modal-logo-text { font-size: 1.1rem; font-weight: 700; color: var(--dark); } .modal-title { font-size: 1.6rem; font-weight: 700; color: var(--dark); letter-spacing: -0.02em; margin-bottom: 6px; } .modal-sub { font-size: 0.9rem; color: var(--muted); margin-bottom: 32px; } .modal-tabs { display: flex; gap: 0; margin-bottom: 28px; background: var(--cream); border-radius: 12px; padding: 4px; } .modal-tab { flex: 1; padding: 10px; text-align: center; font-family: 'Hind Siliguri', sans-serif; font-size: 0.9rem; font-weight: 600; border: none; background: transparent; border-radius: 9px; cursor: pointer; color: var(--muted); transition: all 0.2s; } .modal-tab.active { background: white; color: var(--dark); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* Form elements (shared: modal + contact) */ .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .form-label { font-size: 0.8rem; font-weight: 600; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; } .form-input { padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 12px; font-family: 'Hind Siliguri', sans-serif; font-size: 1rem; color: var(--text); background: white; outline: none; transition: border-color 0.2s; } .form-input:focus { border-color: var(--orange); } .form-hint { font-size: 0.8rem; color: var(--muted); } .btn-submit { width: 100%; padding: 15px; background: var(--orange); color: white; font-family: 'Hind Siliguri', sans-serif; font-size: 1rem; font-weight: 700; border: none; border-radius: 100px; cursor: pointer; transition: background 0.2s; margin-top: 8px; } .btn-submit:hover { background: var(--orange-dark); } .modal-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 0.8rem; } .modal-divider::before, .modal-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } .register-panel { display: none; } .register-panel.active, .login-panel.active { display: block; } /* ── OTP FLOW ────────────────────────────────────────────── */ .hidden { display: none !important; } /* Steps — only .active step is shown */ .otp-step { display: none; } .otp-step.active { display: block; } /* Phone prefix wrapper */ .phone-input-wrap { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: white; transition: border-color 0.2s; } .phone-input-wrap:focus-within { border-color: var(--orange); } .phone-prefix { padding: 13px 12px 13px 16px; font-size: 1rem; color: var(--muted); font-weight: 600; background: var(--cream); border-right: 1.5px solid var(--line); white-space: nowrap; flex-shrink: 0; } .phone-input-wrap .form-input { border: none !important; border-radius: 0 !important; flex: 1; padding-left: 12px; box-shadow: none !important; } /* 6-digit OTP boxes */ .otp-boxes { display: flex; gap: 8px; justify-content: center; margin: 24px 0 8px; } .otp-box { width: 46px; height: 54px; border: 1.5px solid var(--line); border-radius: 12px; text-align: center; font-size: 1.5rem; line-height: 54px; font-weight: 700; font-family: 'Hind Siliguri', sans-serif; color: var(--dark); outline: none; transition: border-color 0.2s, box-shadow 0.2s; caret-color: var(--orange); background: white; } .otp-box:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(217, 79, 43, 0.12); } /* Countdown + resend row */ .otp-timer-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; } .otp-timer-label { font-size: 0.82rem; color: var(--muted); } .otp-timer { font-size: 1rem; font-weight: 700; color: var(--orange); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; } .otp-resend { background: none; border: none; color: var(--orange); font-family: 'Hind Siliguri', sans-serif; font-size: 0.88rem; font-weight: 600; cursor: pointer; padding: 4px 10px; border-radius: 6px; transition: background 0.2s; } .otp-resend:hover { background: rgba(217, 79, 43, 0.08); } /* Back button (step 2 → step 1) */ .otp-back-btn { background: none; border: none; color: var(--muted); font-family: 'Hind Siliguri', sans-serif; font-size: 0.84rem; cursor: pointer; padding: 0; margin-bottom: 20px; display: inline-block; transition: color 0.2s; } .otp-back-btn:hover { color: var(--orange); } /* Inline API error banner */ .otp-api-error { background: rgba(192, 57, 43, 0.08); border: 1px solid rgba(192, 57, 43, 0.22); color: #b83232; border-radius: 10px; padding: 10px 14px; font-size: 0.84rem; margin-bottom: 12px; line-height: 1.5; } /* Submit button loading / disabled state */ .btn-submit:disabled { opacity: 0.65; cursor: not-allowed; } /* ── SUCCESS SCREEN ──────────────────────────────────────── */ .otp-success { text-align: center; padding: 16px 0 24px; } .success-ring { width: 84px; height: 84px; margin: 0 auto; } .success-svg { width: 84px; height: 84px; display: block; } .success-svg circle { stroke: var(--orange); stroke-width: 2; stroke-dasharray: 166; stroke-dashoffset: 166; animation: mn-stroke-circle 0.55s ease-in-out 0.1s forwards; } .success-svg path { stroke: var(--orange); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: mn-stroke-check 0.38s ease-in-out 0.6s forwards; } @keyframes mn-stroke-circle { to { stroke-dashoffset: 0; } } @keyframes mn-stroke-check { to { stroke-dashoffset: 0; } } /* ── HERO ────────────────────────────────────────────────── */ .hero { height: 100vh; min-height: 600px; position: relative; overflow: hidden; display: flex; align-items: flex-end; } .hero-slider { position: absolute; inset: 0; z-index: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center 40px; background-repeat: no-repeat; opacity: 0; filter: brightness(0.72); transition: opacity 1.2s ease; } .hero-slide.active { opacity: 1; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(28, 18, 8, 0.92) 0%, rgba(28, 18, 8, 0.3) 50%, transparent 80% ); } .hero-content { position: relative; z-index: 2; padding: 0 40px 80px; max-width: 780px; opacity: 0; animation: heroIn 1s ease-out 0.2s forwards; } @keyframes heroIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--orange-light); margin-bottom: 20px; border: 1px solid rgba(232, 112, 74, 0.4); padding: 7px 16px; border-radius: 100px; } .hero-eyebrow span { width: 6px; height: 6px; background: var(--orange-light); border-radius: 50%; animation: blink 1.5s ease-in-out infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .hero-title { font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 700; color: white; line-height: 1; letter-spacing: -0.04em; margin-bottom: 20px; } .hero-title em { font-style: normal; color: var(--orange-light); display: block; } .hero-sub { font-size: 1.1rem; color: rgba(250, 247, 243, 0.65); line-height: 1.7; max-width: 500px; margin-bottom: 36px; font-weight: 300; } .hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .btn-hero-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--orange); color: white; padding: 15px 32px; border-radius: 100px; font-size: 1rem; font-weight: 700; text-decoration: none; font-family: 'Hind Siliguri', sans-serif; border: none; cursor: pointer; transition: all 0.2s; } .btn-hero-primary:hover { background: var(--orange-dark); transform: translateY(-2px); } .btn-hero-secondary { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(250, 247, 243, 0.3); color: rgba(250, 247, 243, 0.85); padding: 15px 28px; border-radius: 100px; font-size: 0.95rem; font-weight: 500; text-decoration: none; font-family: 'Hind Siliguri', sans-serif; background: transparent; cursor: pointer; transition: all 0.2s; } .btn-hero-secondary:hover { background: rgba(250, 247, 243, 0.1); } .hero-slides { position: absolute; bottom: 36px; right: 40px; display: flex; gap: 8px; z-index: 2; } .slide-dot { width: 32px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.3s; } .slide-dot.active { background: var(--orange); width: 48px; } /* ── EMERGENCY BANNER ────────────────────────────────────── */ .emergency { background: var(--dark); padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .emerg-left { display: flex; align-items: center; gap: 20px; } .emerg-icon { width: 42px; height: 42px; background: var(--orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 79, 43, 0.5); } 50% { box-shadow: 0 0 0 10px rgba(217, 79, 43, 0); } } .emerg-label { font-size: 0.7rem; color: var(--orange-light); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .emerg-number { font-size: 1.4rem; font-weight: 700; color: white; letter-spacing: -0.02em; } .emerg-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.08); margin: 0 8px; } .emerg-right { display: flex; gap: 10px; align-items: center; } .emerg-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--orange); color: white; padding: 10px 24px; border-radius: 100px; font-weight: 600; font-size: 0.875rem; font-family: 'Hind Siliguri', sans-serif; text-decoration: none; transition: background 0.2s; white-space: nowrap; } .emerg-btn:hover { background: var(--orange-light); } /* ── SECTION COMMONS ─────────────────────────────────────── */ section { padding: 80px 40px; } .eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; } .section-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; color: var(--dark); letter-spacing: -0.03em; line-height: 1.1; } .section-sub { font-size: 1rem; color: var(--muted); line-height: 1.7; max-width: 500px; margin-top: 12px; } .sec-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; gap: 40px; } .sec-header-text { flex: 1; } .see-all { display: inline-flex; align-items: center; gap: 6px; color: var(--orange); text-decoration: none; font-weight: 600; font-size: 0.875rem; white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color 0.2s; flex-shrink: 0; padding-bottom: 2px; } .see-all:hover { border-color: var(--orange); } /* ── ONBOARDING STRIP ────────────────────────────────────── */ .onboard-strip { background: var(--dark2); padding: 48px 40px; overflow: hidden; } .onboard-inner { display: flex; gap: 2px; } .onboard-slide { flex: 1; padding: 40px 36px; background: rgba(255, 255, 255, 0.04); border-top: 1px solid rgba(255, 255, 255, 0.06); transition: background 0.2s; cursor: pointer; } .onboard-slide:hover { background: rgba(217, 79, 43, 0.1); } .onboard-slide.highlighted { border-top-color: var(--orange); background: rgba(217, 79, 43, 0.08); } .onboard-num { font-size: 3.5rem; font-weight: 700; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.15); margin-bottom: 16px; line-height: 1; } .onboard-title { font-size: 1.3rem; font-weight: 700; color: white; line-height: 1.3; letter-spacing: -0.02em; margin-bottom: 10px; } .onboard-desc { font-size: 0.875rem; color: rgba(250, 247, 243, 0.45); line-height: 1.6; } /* ── SERVICES GRID ───────────────────────────────────────── */ .services-section { background: var(--cream-light); } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .svc-card { position: relative; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; background: var(--mid); } /* First and 7th card span 2 columns */ .svc-card:nth-child(1), .svc-card:nth-child(7) { grid-column: span 2; aspect-ratio: auto; min-height: 280px; } .svc-card-bg { position: absolute; inset: 0; background-size: contain; background-position: center; background-repeat: no-repeat; transition: filter 0.5s ease; filter: brightness(0.6); } .svc-card:hover .svc-card-bg { filter: brightness(0.75); } .svc-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 18, 8, 0.88) 0%, transparent 60%); } .svc-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px; display: flex; align-items: flex-end; justify-content: space-between; } .svc-icon { width: 40px; height: 40px; background: var(--orange); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; margin-bottom: 8px; flex-shrink: 0; } .svc-title { font-size: 0.95rem; font-weight: 700; color: white; line-height: 1.3; } .svc-card:nth-child(1) .svc-title, .svc-card:nth-child(7) .svc-title { font-size: 1.15rem; } .svc-arrow { width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; flex-shrink: 0; transition: all 0.2s; } .svc-card:hover .svc-arrow { background: var(--orange); border-color: var(--orange); } /* Locked overlay */ .svc-locked { position: absolute; inset: 0; background: rgba(28, 18, 8, 0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: opacity 0.3s; z-index: 5; } .svc-locked.hidden { opacity: 0; pointer-events: none; } .lock-icon { font-size: 1.6rem; } .lock-msg { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); text-align: center; padding: 0 20px; } .lock-btn { font-family: 'Hind Siliguri', sans-serif; font-size: 0.8rem; font-weight: 700; background: var(--orange); color: white; border: none; border-radius: 100px; padding: 7px 18px; cursor: pointer; transition: background 0.2s; } .lock-btn:hover { background: var(--orange-light); } /* Card gradient backgrounds */ .g1 { background: linear-gradient(135deg, #1a3020, #2d5a38); } .g2 { background: linear-gradient(135deg, #1a1e3a, #2d3060); } .g3 { background: linear-gradient(135deg, #3a1a20, #602d35); } .g4 { background: linear-gradient(135deg, #1e3020, #305a38); } .g5 { background: linear-gradient(135deg, #2a1e3a, #4a2d60); } .g6 { background: linear-gradient(135deg, #1a2a3a, #2d4a60); } .g7 { background: linear-gradient(135deg, #3a2a1e, #604a2d); } .g8 { background: linear-gradient(135deg, #1a1a1a, #3a2020); } .g9 { background: linear-gradient(135deg, #1e1a3a, #2e2d60); } .g10 { background: linear-gradient(135deg, #1a3030, #2d5a5a); } /* ── MY SERVICES LIST ────────────────────────────────────── */ .servlist-section { background: var(--cream-light); } .servlist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .servlist-item { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: white; border-radius: 16px; border: 1px solid var(--line); cursor: pointer; transition: all 0.2s; text-decoration: none; color: var(--text); } .servlist-item:hover { border-color: var(--orange); box-shadow: 0 4px 20px rgba(217, 79, 43, 0.1); } .servlist-icon-wrap { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; border: 1.5px solid rgba(217, 79, 43, 0.3); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: rgba(217, 79, 43, 0.05); } .servlist-info { flex: 1; } .servlist-title { font-size: 0.95rem; font-weight: 700; color: var(--dark); line-height: 1.3; } .servlist-form { font-size: 0.75rem; color: var(--muted); margin-top: 2px; } .servlist-status { font-size: 0.7rem; font-weight: 600; padding: 3px 10px; border-radius: 100px; display: inline-block; margin-top: 6px; } .status-in-progress { color: #1a5cb5; background: #e8f0fb; } .status-done { color: #1a7a3a; background: #e3f5eb; } .servlist-arrow { color: var(--orange); font-size: 0.9rem; flex-shrink: 0; } /* ── STATS BAR ───────────────────────────────────────────── */ .stats-bar { background: var(--orange); padding: 56px 40px; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .stat { padding: 32px; text-align: center; background: rgba(255, 255, 255, 0.08); transition: background 0.2s; } .stat:hover { background: rgba(255, 255, 255, 0.16); } .stat-n { font-size: 3rem; font-weight: 700; color: white; letter-spacing: -0.04em; line-height: 1; margin-bottom: 6px; } .stat-l { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); font-weight: 500; } /* ── ABOUT / MAP ─────────────────────────────────────────── */ .about-section { background: white; padding: 0; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; } .about-map { background: url('../images/map.png') center / cover no-repeat; min-height: 460px; } .about-content { padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; } .about-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; } .fact-item { padding: 20px; background: var(--cream-light); border-radius: 14px; } .fact-num { font-size: 1.8rem; font-weight: 700; color: var(--orange); letter-spacing: -0.03em; } .fact-label { font-size: 0.8rem; color: var(--muted); margin-top: 4px; font-weight: 500; } /* ── HERITAGE GALLERY ────────────────────────────────────── */ .heritage-section { background: var(--dark); padding: 80px 0 60px; } .heritage-header { padding: 0 40px 48px; } .heritage-section .eyebrow { color: var(--orange-light); } .heritage-section .section-title { color: white; } .heritage-section .section-sub { color: rgba(250, 247, 243, 0.45); } .heritage-gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 300px 220px; gap: 8px; padding: 0 40px; } .hg-item { position: relative; overflow: hidden; border-radius: 8px; cursor: pointer; background: var(--dark2); } .hg-featured { grid-column: span 2; grid-row: span 2; } .hg-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; } .hg-item:hover img { transform: scale(1.05); } .hg-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,18,8,0.85) 0%, rgba(28,18,8,0.10) 55%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; opacity: 0; transition: opacity 0.3s ease; } .hg-item:hover .hg-overlay { opacity: 1; } .hg-tag { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-light); margin-bottom: 6px; } .hg-title { font-size: 1rem; font-weight: 700; color: white; letter-spacing: -0.01em; line-height: 1.3; } .hg-featured .hg-title { font-size: 1.35rem; } .hg-zoom { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; background: var(--orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; } /* ── HERITAGE LIGHTBOX ───────────────────────────────────── */ .heritage-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(12, 7, 2, 0.96); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .heritage-lightbox.active { opacity: 1; pointer-events: all; } .hlb-inner { position: relative; max-width: 88vw; max-height: 85vh; display: flex; flex-direction: column; align-items: center; } .hlb-inner img { max-width: 88vw; max-height: 76vh; object-fit: contain; border-radius: 6px; display: block; transition: opacity 0.2s ease; box-shadow: 0 24px 80px rgba(0,0,0,.7); } .hlb-caption { margin-top: 18px; text-align: center; } .hlb-tag { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-light); margin-bottom: 6px; } .hlb-title { font-size: 1.15rem; font-weight: 700; color: white; } .hlb-close { position: absolute; top: 20px; right: 24px; width: 42px; height: 42px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; color: white; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 10; } .hlb-close:hover { background: var(--orange); border-color: var(--orange); } .hlb-prev, .hlb-next { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; color: white; font-size: 1.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s; z-index: 10; line-height: 1; } .hlb-prev { left: 24px; } .hlb-next { right: 24px; } .hlb-prev:hover, .hlb-next:hover { background: var(--orange); border-color: var(--orange); } .hlb-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 0.8rem; color: rgba(255,255,255,0.4); font-weight: 600; letter-spacing: 0.1em; } /* ── MP SECTION ──────────────────────────────────────────── */ .mp-section { display: grid; grid-template-columns: 1fr 1fr; background: var(--cream-light); } .mp-visual { background: url('../images/hero-banner.png') center / cover no-repeat; min-height: 560px; position: relative; } .mp-visual-overlay { position: absolute; inset: 0; background: linear-gradient(to right, transparent 40%, var(--cream-light) 100%); } .mp-content { padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; } .mp-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; } .mp-badge-dot { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; flex-shrink: 0; } .mp-badge-text { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); } .mp-quote { font-size: 1.5rem; font-weight: 700; color: var(--dark); line-height: 1.5; letter-spacing: -0.02em; margin-bottom: 24px; position: relative; } .mp-quote::before { content: '"'; font-size: 4rem; color: var(--orange); line-height: 0.8; display: block; margin-bottom: 8px; opacity: 0.35; font-family: Georgia, serif; } .mp-desc { font-size: 0.95rem; color: var(--muted); line-height: 1.8; margin-bottom: 32px; } /* ── NEWS ────────────────────────────────────────────────── */ .news-section { background: var(--dark); color: white; } .news-section .section-title { color: white; } .news-section .section-sub { color: rgba(250, 247, 243, 0.45); } .news-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2px; } .news-card { background: rgba(255, 255, 255, 0.04); padding: 28px; cursor: pointer; transition: background 0.2s; border-top: 2px solid transparent; } .news-card:hover { background: rgba(217, 79, 43, 0.07); } .news-card.featured { border-top-color: var(--orange); } .news-tag { display: inline-block; font-size: 1rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--orange-light); margin-bottom: 14px; } .news-title { font-size: 1rem; font-weight: 600; line-height: 1.5; color: white; margin-bottom: 14px; } .news-card.featured .news-title { font-size: 1.3rem; } .news-date { font-size: 0.75rem; color: rgba(250, 247, 243, 0.25); } .news-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; } /* ── NEWSLETTER ──────────────────────────────────────────── */ .nl-section { background: var(--cream-light); padding: 40px 40px; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .nl-quote-wrap { display: flex; flex-direction: row; align-items: center; text-align: center; gap: 12px; } .nl-quote-mark { font-size: 4rem; line-height: 1; font-family: Georgia, serif; color: var(--orange); opacity: 0.35; user-select: none; } .nl-quote-mark.nl-quote-close { line-height: 1; } .nl-title { font-size: 3.2rem; font-weight: 800; color: var(--dark); letter-spacing: -0.03em; line-height: 1.15; } .nl-sub { font-size: 0.9rem; color: var(--muted); margin-top: 4px; } .nl-form { display: flex; gap: 0; max-width: 420px; width: 100%; flex-shrink: 0; } .nl-input { flex: 1; padding: 13px 18px; border: 1.5px solid var(--line); border-right: none; border-radius: 100px 0 0 100px; font-family: 'Hind Siliguri', sans-serif; font-size: 0.95rem; background: white; outline: none; color: var(--text); } .nl-input:focus { border-color: var(--orange); } .nl-btn { padding: 13px 24px; background: var(--orange); color: white; font-family: 'Hind Siliguri', sans-serif; font-size: 0.875rem; font-weight: 700; border: none; border-radius: 0 100px 100px 0; cursor: pointer; transition: background 0.2s; white-space: nowrap; } .nl-btn:hover { background: var(--orange-dark); } /* ── CONTACT ─────────────────────────────────────────────── */ .contact-section { background: var(--dark); color: white; padding: 80px 40px; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .contact-section .section-title { color: white; } .contact-info { display: flex; flex-direction: column; gap: 28px; margin-top: 36px; } .ci-item { padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.06); } .ci-item:last-child { border-bottom: none; } .ci-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-light); margin-bottom: 6px; } .ci-value { font-size: 0.95rem; color: rgba(250, 247, 243, 0.7); line-height: 1.6; } .contact-form { display: flex; flex-direction: column; gap: 14px; } .cf-input, .cf-textarea { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 13px 16px; color: white; font-family: 'Hind Siliguri', sans-serif; font-size: 0.95rem; outline: none; resize: none; transition: border-color 0.2s; } .cf-input:focus, .cf-textarea:focus { border-color: var(--orange); } .cf-input::placeholder, .cf-textarea::placeholder { color: rgba(255, 255, 255, 0.2); } /* ── FOOTER ──────────────────────────────────────────────── */ footer { background: var(--dark); border-top: 1px solid rgba(255,255,255,0.06); padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .footer-logo { font-size: 0.95rem; font-weight: 700; color: var(--orange-light); } .footer-copy { font-size: 0.75rem; color: rgba(250, 247, 243, 0.25); } .footer-links { display: flex; gap: 20px; list-style: none; } .footer-links a { font-size: 0.8rem; color: rgba(250,247,243,0.3); text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: var(--orange-light); } /* ── SCROLL REVEAL ANIMATION ─────────────────────────────── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } /* ── RESPONSIVE ──────────────────────────────────────────── */ @media (max-width: 1024px) { nav { padding: 0 20px; } .nav-center { display: none; } .nav-right .btn-emergency { display: none; } section { padding: 56px 20px; } .services-grid { grid-template-columns: 1fr 1fr; } .svc-card:nth-child(1), .svc-card:nth-child(7) { grid-column: 1 / 3; } .about-grid { grid-template-columns: 1fr; } .mp-section { grid-template-columns: 1fr; } .mp-visual { min-height: 320px; } .mp-visual-overlay { background: linear-gradient(to bottom, transparent 50%, var(--cream-light)); } .mp-content { padding: 48px 24px; } .news-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr; gap: 48px; } .nl-section { flex-direction: column; gap: 24px; padding: 48px 20px; } .nl-form { max-width: 100%; width: 100%; } .emergency { padding: 16px 20px; flex-direction: column; align-items: flex-start; } .hero-content { padding: 0 20px 64px; } .servlist-grid { grid-template-columns: 1fr; } .onboard-inner { flex-direction: column; gap: 2px; } footer { flex-direction: column; text-align: center; padding: 28px 20px; } .stats-bar { padding: 40px 20px; } } @media (max-width: 400px) { #navMyApp { display: none !important; } .offcanvas-my-app { display: flex !important; } .modal-body { padding: 32px 20px; } .otp-box{ width: 38px; height: 45px; font-size: 1.2rem; line-height: 45px; } .otp-boxes{ gap: 5px; } /* Subscribe button → arrow only */ .nl-btn { padding: 13px 18px; font-size: 0; } .nl-btn::after { content: '→'; font-size: 1.1rem; line-height: 1; } /* Heritage gallery → full single column */ .heritage-gallery { grid-template-columns: 1fr; grid-template-rows: auto; gap: 6px; padding: 0 12px; } .heritage-gallery .hg-item { height: 200px; } .hg-featured { grid-column: 1; grid-row: auto; height: 240px; } } .offcanvas-my-app { display: none; } @media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } .svc-card:nth-child(1), .svc-card:nth-child(7) { grid-column: 1; } .stats-grid { grid-template-columns: 1fr 1fr; } .heritage-img { height: 300px; } .about-content { padding: 48px 20px; } .about-facts { grid-template-columns: 1fr 1fr; } .contact-section { padding: 56px 20px; } /* ── Heritage gallery mobile ───────────────────────── */ .heritage-section { padding: 48px 0 56px; } .heritage-header { padding: 0 20px 32px; } .heritage-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 180px; gap: 6px; padding: 0 16px 16px; } .hg-featured { grid-column: 1 / -1; /* full width */ grid-row: span 1; } /* always show overlay on mobile (no hover on touch) */ .hg-overlay { opacity: 1; background: linear-gradient(to top, rgba(28,18,8,0.80) 0%, rgba(28,18,8,0.08) 60%, transparent 100%); } .hg-zoom { display: none; } .hg-featured .hg-title { font-size: 1.1rem; } .hg-title { font-size: 0.85rem; } .hg-tag { font-size: 0.6rem; } } /* ── HAMBURGER BUTTON ────────────────────────────────────── */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 38px; height: 38px; background: transparent; border: none; cursor: pointer; padding: 4px; border-radius: 8px; transition: background 0.2s; z-index: 1001; order: 10; } .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--dark); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease; transform-origin: center; } nav.scrolled .nav-hamburger span { background: rgba(250, 247, 243, 0.9); } .nav-hamburger:hover { background: rgba(0,0,0,0.06); } .nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.active span:nth-child(2) { opacity: 0; width: 0; } .nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1024px) { .nav-hamburger { display: flex; } } /* ── OFFCANVAS BACKDROP ──────────────────────────────────── */ .offcanvas-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1099; opacity: 0; transition: opacity 0.3s ease; } .offcanvas-backdrop.open { display: block; opacity: 1; } /* ── OFFCANVAS PANEL ─────────────────────────────────────── */ .offcanvas-panel { position: fixed; top: 0; left: 0; width: 280px; max-width: 85vw; height: 100dvh; background: var(--cream-light, #faf7f3); z-index: 1100; display: flex; flex-direction: column; padding: 24px 20px 32px; gap: 0; box-shadow: 4px 0 24px rgba(0,0,0,0.14); transform: translateX(-105%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; } .offcanvas-panel.open { transform: translateX(0); } .offcanvas-close { align-self: flex-end; background: transparent; border: none; font-size: 1.25rem; color: var(--mid, #555); cursor: pointer; line-height: 1; padding: 4px 6px; border-radius: 6px; transition: background 0.2s, color 0.2s; } .offcanvas-close:hover { background: rgba(0,0,0,0.06); color: var(--dark); } .offcanvas-logo { display: flex; justify-content: center; padding: 12px 0 24px; } .offcanvas-logo img { height: 44px; width: auto; } .offcanvas-nav { position: relative; display: flex; flex-direction: column; gap: 4px; height: unset; } .offcanvas-link { font-family: 'Hind Siliguri', sans-serif; font-size: 1rem; font-weight: 500; color: var(--dark, #1a1a1a); text-decoration: none; padding: 12px 14px; border-radius: 10px; transition: background 0.18s, color 0.18s; } .offcanvas-link:hover { background: rgba(217, 79, 43, 0.08); color: var(--orange, #d94f2b); } .offcanvas-footer { padding-top: 28px; border-top: 1px solid var(--line, #e8e0d5); display: flex; justify-content: center; } .offcanvas-emergency { width: 100%; justify-content: center; font-size: 1rem; }