:root { --navy-deepest: #030812; --navy-dark: #071527; --navy-rich: #0d223c; --navy-card: #122b4d; --navy-border: rgba(30, 64, 110, 0.45); --royal-blue: #1255cc; --royal-blue-light: #2563eb; --royal-blue-glow: rgba(37, 99, 235, 0.3); --gold-light: #fff3b0; --gold-primary: #ffd700; --gold-amber: #f59e0b; --gold-deep: #b45309; --saffron-vibrant: #ff7b00; --saffron-deep: #c2410c; --diwali-ruby: #dc2626; --gold-gradient: linear-gradient(135deg, #fff3b0 0%, #ffd700 35%, #f59e0b 70%, #b45309 100%); --saffron-gradient: linear-gradient(135deg, #ff9a3d 0%, #ff5a1f 50%, #c2410c 100%); --festive-shimmer: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%); --navy-glass-card: rgba(7, 21, 39, 0.82); --surface-white: #ffffff; --surface-cream: #faf8f5; --surface-muted: #f1f5f9; --border-light: #e2e8f0; --border-subtle: #edf2f7; --text-main: #0f172a; --text-muted: #475569; --text-light: #94a3b8; --text-white: #ffffff; --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-heading: 'Outfit', sans-serif; --font-regal: 'Cinzel', serif; --font-festive: 'Playfair Display', Georgia, serif; --font-ornate: 'Cinzel Decorative', serif; --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.12); --shadow-gold: 0 10px 30px rgba(245, 158, 11, 0.28); --shadow-diwali: 0 14px 40px rgba(255, 123, 0, 0.22); --shadow-floating: 0 16px 45px rgba(3, 8, 18, 0.25); --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-fast: 0.2s ease; --transition-normal: 0.35s var(--ease-smooth); --transition-slow: 0.6s var(--ease-smooth); --header-height: 80px; --app-bar-height: 64px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); background-color: var(--surface-cream); color: var(--text-main); line-height: 1.6; overflow-x: hidden; position: relative; } body.intro-active { overflow: hidden !important; } .diwali-sparkles-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 99990; opacity: 0.85; } img, picture, svg { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; transition: var(--transition-fast); } button, input, select, textarea { font: inherit; color: inherit; outline: none; border: none; background: none; } button { cursor: pointer; -webkit-tap-highlight-color: transparent; } button:active { transform: scale(0.97); } ul { list-style: none; } .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; } .py-section { padding: 96px 0; } .diwali-sparkles-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.55; } .diwali-regal-text { font-family: var(--font-regal); letter-spacing: -0.5px; font-weight: 700; } .diwali-stylized-title { font-family: var(--font-regal); font-size: clamp(2.1rem, 3.6vw, 2.9rem); font-weight: 800; color: var(--navy-dark); line-height: 1.25; letter-spacing: -0.5px; } .gradient-saffron-gold { background: linear-gradient(135deg, #b45309 0%, #ea580c 25%, #f59e0b 60%, #ffd700 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.25)); } .diwali-flame-text { background: linear-gradient(135deg, #ffd700 0%, #ff8400 50%, #ff3d00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; filter: drop-shadow(0 2px 14px rgba(255, 132, 0, 0.4)); } .sub-label-diwali { display: inline-block; font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #b45309; background: rgba(254, 243, 199, 0.9); border: 1px solid rgba(245, 158, 11, 0.5); padding: 6px 18px; border-radius: var(--radius-full); box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15); margin-bottom: 14px; } .sub-label-diwali.gold-glow-pill { color: var(--gold-light); background: rgba(245, 158, 11, 0.2); border-color: rgba(255, 215, 0, 0.45); box-shadow: 0 0 16px rgba(255, 215, 0, 0.25); } .diwali-ornament-divider { display: flex; align-items: center; gap: 14px; margin: 12px 0 20px; } .diwali-ornament-divider.align-left { justify-content: flex-start; } .diwali-ornament-divider.mini { margin: 10px 0 16px; } .divider-line { width: 50px; height: 2px; background: linear-gradient(90deg, transparent, #f59e0b, transparent); border-radius: var(--radius-full); } .divider-line.gold { background: linear-gradient(90deg, transparent, #ffd700, transparent); } .diya-glow-icon { font-size: 1.25rem; display: inline-block; animation: diyaFlicker 2s infinite alternate ease-in-out; filter: drop-shadow(0 0 10px rgba(255, 184, 0, 0.7)); } @keyframes diyaFlicker { 0% { transform: scale(0.95); filter: drop-shadow(0 0 6px #f59e0b); } 50% { transform: scale(1.08) translateY(-2px); filter: drop-shadow(0 0 16px #ff7b00); } 100% { transform: scale(1.02); filter: drop-shadow(0 0 12px #ffd700); } } .festive-pulse { animation: festiveBadgePulse 2.4s infinite ease-in-out; } @keyframes festiveBadgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); } } .intro-overlay { position: fixed; inset: 0; z-index: 999999; background: radial-gradient(circle at center, #0a1f38 0%, #050e1a 70%, #02060d 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: opacity 0.35s ease-out, visibility 0.35s ease-out; pointer-events: all; cursor: pointer; } .intro-overlay.fade-out { opacity: 0; visibility: hidden; pointer-events: none; } .intro-glow-backdrop { position: absolute; width: 650px; height: 650px; background: radial-gradient(circle, rgba(255, 184, 0, 0.28) 0%, rgba(255, 123, 0, 0.16) 40%, rgba(18, 85, 204, 0.08) 65%, transparent 75%); border-radius: 50%; filter: blur(55px); animation: pulse-glow 3s infinite alternate ease-in-out; pointer-events: none; } .intro-particles { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 15% 25%, rgba(255, 226, 159, 0.85), transparent), radial-gradient(2px 2px at 80% 30%, rgba(255, 255, 255, 0.8), transparent), radial-gradient(2.5px 2.5px at 45% 80%, rgba(255, 184, 0, 0.95), transparent), radial-gradient(1.5px 1.5px at 70% 75%, rgba(255, 226, 159, 0.8), transparent); background-size: 320px 320px; opacity: 0.75; animation: float-particles 22s linear infinite; pointer-events: none; } .intro-diwali-mandala-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 440px; height: 440px; max-width: 90vw; max-height: 90vw; pointer-events: none; z-index: 6; animation: spinMandala 26s linear infinite; } .mandala-svg { width: 100%; height: 100%; filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.45)); } @keyframes spinMandala { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .intro-diya-compass { position: absolute; z-index: 7; pointer-events: none; transition: opacity 0.5s ease; } .intro-diya-compass.north { top: calc(50% - 215px); left: 50%; transform: translateX(-50%); } .intro-diya-compass.south { bottom: calc(50% - 215px); left: 50%; transform: translateX(-50%); } .intro-diya-compass.east { right: calc(50% - 215px); top: 50%; transform: translateY(-50%); } .intro-diya-compass.west { left: calc(50% - 215px); top: 50%; transform: translateY(-50%); } .intro-diya-compass .diya-glow-icon { font-size: 2.2rem; filter: drop-shadow(0 0 14px #ff7b00) drop-shadow(0 0 28px #ffd700); } .intro-center-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 10; text-align: center; padding: 24px; } .flying-logo-wrapper { position: relative; width: 290px; max-width: 82vw; background: #ffffff; padding: 18px 28px; border-radius: 24px; box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45), 0 0 45px rgba(245, 158, 11, 0.45); border: 1.5px solid rgba(255, 215, 0, 0.5); transform-origin: center center; transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease-out, border-radius 0.35s ease-out; } .flying-logo-img { width: 100%; height: auto; object-fit: contain; display: block; border-radius: 12px; } .logo-aura-ring { position: absolute; inset: -6px; border-radius: 30px; border: 2px solid transparent; background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 94, 0, 0.8)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; animation: ring-rotate 4s linear infinite; } .logo-sparkle-shine { position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); transform: skewX(-25deg); animation: logo-shine 2.2s infinite ease-in-out; } @keyframes pulse-glow { 0% { transform: scale(0.9); opacity: 0.6; } 100% { transform: scale(1.15); opacity: 0.95; } } @keyframes ring-rotate { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } @keyframes logo-shine { 0% { left: -100%; } 35%, 100% { left: 160%; } } @keyframes float-particles { 0% { transform: translateY(0); } 100% { transform: translateY(-320px); } } .top-announcement-bar { position: relative; z-index: 10000; width: 100%; height: 38px; background: linear-gradient(90deg, #020710 0%, #081628 50%, #020710 100%); border-bottom: 1px solid rgba(255, 215, 0, 0.28); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .top-bar-container { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; max-width: 1320px; margin: 0 auto; } .top-bar-left { display: flex; align-items: center; gap: 10px; overflow: hidden; } .flash-sale-badge { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.5px; background: linear-gradient(135deg, #ffd700 0%, #ff7b00 100%); color: #040914; padding: 2px 9px; border-radius: var(--radius-full); box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4); white-space: nowrap; } .top-bar-text { font-size: 0.78125rem; font-weight: 500; color: rgba(255, 255, 255, 0.88); letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top-bar-right { display: flex; align-items: center; gap: 18px; white-space: nowrap; } .top-bar-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78125rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); transition: all var(--transition-fast); } .top-bar-link:hover { color: var(--gold-primary); transform: translateY(-1px); } .top-wa-link { color: #25D366; } .top-wa-link:hover { color: #2bf075; filter: drop-shadow(0 0 6px rgba(37, 211, 102, 0.6)); } .site-header { position: sticky; top: 0; left: 0; width: 100%; height: var(--header-height); z-index: 9999; background: linear-gradient(180deg, #071527 0%, #030a14 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 2px solid rgba(255, 215, 0, 0.35); box-shadow: 0 8px 32px rgba(2, 6, 13, 0.45); transition: all var(--transition-normal); } .site-header.scrolled { background: linear-gradient(180deg, #040d18 0%, #02060d 100%); border-bottom-color: rgba(255, 215, 0, 0.55); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65); } .header-container { max-width: 1320px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; } .header-logo-link { display: flex; align-items: center; position: relative; z-index: 10; } .header-logo-box { height: 64px; display: flex; align-items: center; border-radius: 12px; transition: transform var(--transition-fast); } .header-logo-box:hover { transform: scale(1.03); } .header-brand-logo { height: 100%; width: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } .desktop-nav { display: flex; align-items: center; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-link { font-size: 0.9375rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); position: relative; padding: 8px 0; transition: color var(--transition-fast); } .nav-link:hover, .nav-link.active { color: var(--gold-primary); text-shadow: 0 0 12px rgba(255, 215, 0, 0.6); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2.5px; background: var(--gold-gradient); border-radius: var(--radius-full); box-shadow: 0 0 8px rgba(255, 215, 0, 0.8); transition: width var(--transition-normal); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-badge-pill { font-size: 0.6875rem; font-weight: 700; background: var(--gold-gradient); color: #3b2800; padding: 2px 8px; border-radius: var(--radius-full); margin-left: 4px; vertical-align: middle; text-transform: uppercase; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4); } .header-actions { display: flex; align-items: center; gap: 16px; } .btn-quote-header { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; background: var(--gold-gradient); color: #1a1200; font-size: 0.9375rem; font-weight: 800; border-radius: var(--radius-full); border: 1px solid rgba(255, 215, 0, 0.7); box-shadow: 0 4px 18px rgba(255, 215, 0, 0.35); transition: all var(--transition-normal); } .btn-quote-header:hover { background: linear-gradient(135deg, #ffffff 0%, #ffd700 100%); color: #030812; box-shadow: 0 6px 24px rgba(255, 215, 0, 0.6); transform: translateY(-2px); } .btn-arrow-icon { width: 16px; height: 16px; transition: transform var(--transition-fast); } .btn-quote-header:hover .btn-arrow-icon { transform: translateX(4px); } .header-mobile-wa-btn { display: none; align-items: center; gap: 6px; padding: 7px 14px; background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); color: #ffffff; border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: 700; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 4px 14px rgba(37, 211, 102, 0.38); transition: all var(--transition-fast); } .header-mobile-wa-btn:hover { transform: scale(1.05); box-shadow: 0 6px 18px rgba(37, 211, 102, 0.55); } .mobile-toggle-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.08); padding: 10px; border: 1px solid rgba(255, 215, 0, 0.4); transition: all var(--transition-fast); } .mobile-toggle-btn:hover { background: rgba(255, 215, 0, 0.15); border-color: var(--gold-primary); } .hamburger-bar { display: block; width: 100%; height: 2.5px; background-color: #ffd700; border-radius: var(--radius-full); transition: all var(--transition-fast); } .mobile-drawer-overlay { position: fixed; inset: 0; background: rgba(3, 8, 18, 0.7); backdrop-filter: blur(8px); z-index: 99998; opacity: 0; visibility: hidden; transition: all var(--transition-normal); } .mobile-drawer-overlay.active { opacity: 1; visibility: visible; } .mobile-drawer { position: fixed; top: 0; right: -320px; width: 320px; max-width: 85vw; height: 100%; background: #ffffff; z-index: 99999; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; transition: right var(--transition-slow); } .mobile-drawer.active { right: 0; } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border-light); } .drawer-logo { height: 38px; width: auto; } .drawer-close-btn { font-size: 2rem; line-height: 1; color: var(--navy-dark); padding: 4px; } .drawer-body { padding: 20px 24px; display: flex; flex-direction: column; height: 100%; overflow-y: auto; } .drawer-festive-banner { font-size: 0.75rem; font-weight: 700; color: #b45309; background: #fef3c7; padding: 8px 12px; border-radius: var(--radius-sm); text-align: center; margin-bottom: 20px; border: 1px dashed #f59e0b; } .drawer-links { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; } .drawer-link { font-size: 1.0625rem; font-weight: 600; color: var(--navy-dark); padding: 8px 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-subtle); } .drawer-link:hover { color: var(--royal-blue); } .link-arrow { color: var(--text-light); font-size: 1rem; } .drawer-badge { font-size: 0.6875rem; font-weight: 700; background: var(--gold-gradient); color: #3b2800; padding: 3px 8px; border-radius: var(--radius-full); } .drawer-cta-box { margin-top: auto; display: flex; flex-direction: column; gap: 16px; } .drawer-contact-info { font-size: 0.8125rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 6px; } .drawer-contact-info a { color: var(--royal-blue); font-weight: 600; } .hero-section { position: relative; margin-top: 0; background: var(--navy-deepest); overflow: hidden; } .hero-slider-container { position: relative; width: 100%; aspect-ratio: 1828 / 860; max-height: calc(100vh - var(--header-height)); min-height: 480px; overflow: hidden; background: var(--navy-deepest); } .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.9s var(--ease-smooth), transform 1.2s var(--ease-smooth); transform: scale(1.02); } .hero-slide.active { opacity: 1; visibility: visible; transform: scale(1); z-index: 2; } .hero-slide-anchor { display: block; width: 100%; height: 100%; position: relative; cursor: pointer; } .hero-picture, .hero-slide-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .hero-slide.active .hero-slide-img { animation: subtleZoom 7s ease-out infinite alternate; } @keyframes subtleZoom { 0% { transform: scale(1); } 100% { transform: scale(1.04); } } .hero-banner-shine { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); transform: skewX(-25deg); pointer-events: none; } .hero-slide.active .hero-banner-shine { animation: bannerShineSweep 5s infinite ease-in-out; } @keyframes bannerShineSweep { 0% { left: -100%; } 40%, 100% { left: 160%; } } .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(7, 21, 39, 0.7); color: #ffffff; border: 1px solid rgba(255, 215, 0, 0.4); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; z-index: 20; transition: all var(--transition-fast); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } .slider-arrow:hover { background: var(--gold-gradient); color: #1a1300; border-color: transparent; transform: translateY(-50%) scale(1.08); } .slider-prev { left: 24px; } .slider-next { right: 24px; } .slider-indicators { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 12px; } .indicator-pill { display: block; width: 44px; height: 6px; padding: 0; background: rgba(255, 255, 255, 0.28); backdrop-filter: blur(8px); border: 1px solid rgba(255, 215, 0, 0.35); border-radius: var(--radius-full); overflow: hidden; cursor: pointer; transition: all 0.35s var(--ease-smooth); } .indicator-pill.active { width: 74px; background: rgba(255, 255, 255, 0.45); border-color: var(--gold-primary); box-shadow: 0 0 16px rgba(255, 215, 0, 0.75); } .pill-progress-track { width: 100%; height: 100%; margin: 0; background: transparent; border-radius: var(--radius-full); overflow: hidden; position: relative; } .pill-progress-bar { display: block; height: 100%; width: 0%; background: var(--gold-gradient); border-radius: var(--radius-full); transition: width 0.1s linear; } .indicator-pill.active .pill-progress-bar { width: 100%; transition: width 4.5s linear; } .hero-trust-bar { background: #ffffff; border-bottom: 1px solid var(--border-light); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); position: relative; z-index: 30; } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 24px 0; } .trust-item { display: flex; align-items: center; gap: 16px; padding: 8px 12px; border-radius: var(--radius-md); transition: transform var(--transition-fast); } .trust-item:hover { transform: translateY(-2px); } .trust-icon-box { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; background: #fffbeb; border: 1px solid #fef3c7; color: #d97706; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .trust-item:hover .trust-icon-box { background: var(--navy-dark); color: var(--gold-primary); border-color: var(--gold-primary); } .trust-text { display: flex; flex-direction: column; } .trust-title { font-size: 0.9375rem; font-weight: 700; color: var(--navy-dark); line-height: 1.3; } .trust-desc { font-size: 0.8125rem; color: var(--text-muted); } .section-categories { background: var(--surface-cream); position: relative; } .section-header-split { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; gap: 24px; } .btn-royal-outline { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: #ffffff; color: var(--royal-blue); font-weight: 700; font-size: 0.9375rem; border: 1.5px solid var(--royal-blue); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); transition: all var(--transition-normal); } .btn-royal-outline:hover { background: var(--royal-blue); color: #ffffff; box-shadow: var(--royal-blue-glow); transform: translateY(-2px); } .categories-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } .category-card { position: relative; background: #ffffff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 16px; text-align: center; transition: all var(--transition-normal); display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03); } .category-card:hover { transform: translateY(-8px); border-color: var(--gold-amber); box-shadow: 0 18px 40px rgba(245, 158, 11, 0.15); } .category-image-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #f8fafc; border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .category-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal); } .category-card:hover .category-img { transform: scale(1.08); } .category-badge { position: absolute; top: 8px; right: 8px; font-size: 0.6875rem; font-weight: 700; background: var(--navy-dark); color: #ffffff; padding: 2px 8px; border-radius: var(--radius-full); } .category-badge.gold-badge { background: var(--gold-gradient); color: #3b2800; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); } .category-badge.royal-badge { background: var(--royal-blue); color: #ffffff; } .category-name { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--navy-dark); margin-bottom: 4px; } .category-items-count { font-size: 0.75rem; color: var(--text-muted); line-height: 1.3; } .category-tap-link { position: absolute; inset: 0; z-index: 5; } .section-diwali-banner { position: relative; background: var(--navy-dark); overflow: hidden; min-height: 500px; display: flex; align-items: center; } .diwali-banner-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; } .diwali-banner-wide-img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .diwali-gradient-curtain { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(3, 8, 18, 0.96) 0%, rgba(7, 21, 39, 0.82) 50%, rgba(7, 21, 39, 0.25) 100% ); } .diwali-content-wrap { position: relative; z-index: 10; padding: 60px 0; } .diwali-glass-card { max-width: 580px; background: rgba(7, 21, 39, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 215, 0, 0.45); padding: 42px; border-radius: var(--radius-xl); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(245, 158, 11, 0.2); color: #ffffff; } .diwali-mini-badge { display: inline-block; font-family: var(--font-regal); font-size: 0.8125rem; font-weight: 700; letter-spacing: 2px; color: var(--gold-primary); margin-bottom: 12px; } .diwali-heading { font-size: clamp(2.1rem, 3.4vw, 2.85rem); font-weight: 800; line-height: 1.2; color: #ffffff; margin-bottom: 12px; } .diwali-lead { font-size: 1.0625rem; color: rgba(255, 255, 255, 0.85); line-height: 1.6; margin-bottom: 24px; } .diwali-meta-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .diwali-meta-pills span { font-size: 0.8125rem; font-weight: 600; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); padding: 6px 14px; border-radius: var(--radius-full); } .diwali-btn-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .btn-gold-solid { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--gold-gradient); color: #2b1f00; font-size: 0.9375rem; font-weight: 700; border-radius: var(--radius-full); box-shadow: var(--shadow-gold); transition: all var(--transition-normal); } .btn-gold-solid:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(245, 158, 11, 0.5); } .btn-whatsapp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; background: rgba(37, 211, 102, 0.15); color: #25d366; font-size: 0.9375rem; font-weight: 700; border: 1.5px solid #25d366; border-radius: var(--radius-full); transition: all var(--transition-normal); } .btn-whatsapp-pill:hover { background: #25d366; color: #ffffff; transform: translateY(-2px); } .section-why-us { background: #ffffff; } .why-us-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px; align-items: start; } .why-us-left { position: sticky; top: 110px; } .why-us-highlight-box { display: flex; align-items: center; gap: 20px; background: #f8fafc; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin: 30px 0; } .highlight-number { font-family: var(--font-regal); font-size: 3.25rem; font-weight: 800; color: var(--royal-blue); line-height: 1; } .highlight-desc strong { font-size: 1.0625rem; color: var(--navy-dark); display: block; } .highlight-desc span { font-size: 0.875rem; color: var(--text-muted); } .btn-navy-pill { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; background: var(--navy-dark); color: #ffffff; font-size: 0.9375rem; font-weight: 700; border-radius: var(--radius-full); transition: all var(--transition-normal); } .btn-navy-pill:hover { background: var(--royal-blue); transform: translateY(-2px); box-shadow: var(--shadow-md); } .why-us-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .why-card { background: #ffffff; padding: 30px; border-radius: var(--radius-lg); border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); transition: all var(--transition-normal); } .why-card:hover { transform: translateY(-6px); border-color: var(--gold-amber); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08); } .why-card-icon { width: 56px; height: 56px; border-radius: 14px; background: #eff6ff; color: var(--royal-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: all var(--transition-fast); } .why-card:hover .why-card-icon { background: var(--navy-dark); color: var(--gold-primary); } .why-card-title { font-size: 1.125rem; font-weight: 700; color: var(--navy-dark); margin-bottom: 10px; } .why-card-text { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; } .section-featured-products { background: var(--surface-cream); } .product-filter-tabs { display: flex; gap: 8px; background: #ffffff; padding: 6px; border-radius: var(--radius-full); box-shadow: var(--shadow-sm); } .filter-tab-btn { padding: 8px 18px; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); border-radius: var(--radius-full); transition: all var(--transition-fast); } .filter-tab-btn.active, .filter-tab-btn:hover { background: var(--navy-dark); color: var(--gold-light); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .product-card { background: #ffffff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition-normal); display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04); } .product-card:hover { transform: translateY(-8px); border-color: var(--gold-amber); box-shadow: 0 20px 45px rgba(245, 158, 11, 0.14); } .product-thumb-box { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #f8fafc; overflow: hidden; } .product-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .product-card:hover .product-img { transform: scale(1.06); } .product-flag { position: absolute; top: 14px; left: 14px; font-size: 0.75rem; font-weight: 700; background: var(--navy-dark); color: #ffffff; padding: 4px 12px; border-radius: var(--radius-full); z-index: 5; } .product-flag.gold-flag { background: var(--gold-gradient); color: #382500; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35); } .product-flag.blue-flag { background: var(--royal-blue); color: #ffffff; } .quick-view-btn { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 9px 18px; background: rgba(7, 21, 39, 0.92); color: #ffffff; font-size: 0.8125rem; font-weight: 600; border-radius: var(--radius-full); backdrop-filter: blur(10px); transition: all var(--transition-normal); z-index: 5; } .product-card:hover .quick-view-btn { bottom: 16px; } .quick-view-btn:hover { background: var(--gold-primary); color: #1a1300; } .product-details { padding: 22px; display: flex; flex-direction: column; flex-grow: 1; } .product-category-tag { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--royal-blue); letter-spacing: 1px; margin-bottom: 6px; } .product-title { font-family: var(--font-heading); font-size: 1.1875rem; font-weight: 700; color: var(--navy-dark); margin-bottom: 6px; } .product-subtitle { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 18px; flex-grow: 1; } .product-footer-row { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--border-subtle); } .product-price-info { display: flex; flex-direction: column; } .moq-label { font-size: 0.6875rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; } .price-val { font-size: 1.0625rem; font-weight: 800; color: var(--navy-dark); } .price-val em { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); font-style: normal; } .product-btn-group { display: flex; align-items: center; gap: 8px; } .btn-product-quote { padding: 8px 14px; background: var(--surface-muted); color: var(--navy-dark); font-size: 0.8125rem; font-weight: 700; border-radius: var(--radius-full); border: 1px solid var(--border-light); transition: all var(--transition-fast); } .product-card:hover .btn-product-quote { background: #071527; color: var(--gold-primary); border-color: rgba(255, 215, 0, 0.4); } .btn-product-wa { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); color: #ffffff; font-size: 0.8125rem; font-weight: 700; border-radius: var(--radius-full); text-decoration: none; box-shadow: 0 2px 10px rgba(37, 211, 102, 0.3); transition: all var(--transition-fast); } .btn-product-wa:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(37, 211, 102, 0.5); color: #ffffff; } .products-whatsapp-banner { margin-top: 56px; background: linear-gradient(135deg, #071527 0%, #0d223c 60%, #030812 100%); border: 1.5px solid rgba(255, 215, 0, 0.35); border-radius: var(--radius-xl); padding: 36px 44px; display: flex; align-items: center; justify-content: space-between; gap: 32px; box-shadow: 0 16px 45px rgba(0, 0, 0, 0.3), 0 0 35px rgba(245, 158, 11, 0.15); } .pwa-tag { display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; color: #25D366; margin-bottom: 8px; } .pwa-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: #ffffff; margin-bottom: 8px; } .pwa-desc { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.8); max-width: 680px; line-height: 1.6; } .pwa-btn { flex-shrink: 0; padding: 14px 28px; font-size: 1rem; } .section-how-it-works { background: radial-gradient(circle at 50% 15%, #0f2b4c 0%, #071527 50%, #030812 100%); color: #ffffff; position: relative; overflow: hidden; } .section-how-it-works .section-heading { color: #ffffff; } .section-how-it-works .section-subtext { color: rgba(255, 255, 255, 0.8); } .pipeline-engine-container { position: relative; margin-top: 40px; } .pipeline-track { position: relative; height: 4px; background: rgba(255, 255, 255, 0.12); margin: 0 80px 48px; border-radius: var(--radius-full); } .pipeline-track-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #ffd700, #ff7b00, #ffd700); background-size: 200% 100%; animation: pulseConduit 3s linear infinite; border-radius: var(--radius-full); } @keyframes pulseConduit { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .pipeline-node { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: #071527; border: 2px solid var(--gold-primary); color: var(--gold-primary); font-size: 0.8125rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); z-index: 5; transition: all var(--transition-fast); } .pipeline-node.node-1 { left: 0%; } .pipeline-node.node-2 { left: 33.33%; } .pipeline-node.node-3 { left: 66.66%; } .pipeline-node.node-4 { left: 100%; } .conceptual-stages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; z-index: 2; } .concept-stage-card { background: rgba(13, 34, 60, 0.7); border: 1px solid rgba(255, 215, 0, 0.25); border-radius: 22px; padding: 28px 22px; backdrop-filter: blur(16px); display: flex; flex-direction: column; transition: all 0.35s var(--ease-smooth); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); position: relative; overflow: hidden; } .concept-stage-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold-gradient); opacity: 0.6; transition: opacity 0.3s; } .concept-stage-card:hover { transform: translateY(-8px); border-color: rgba(255, 215, 0, 0.65); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 215, 0, 0.25); } .concept-stage-card:hover::before { opacity: 1; } .stage-top-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .stage-step-pill { font-size: 0.6875rem; font-weight: 800; letter-spacing: 1.5px; color: var(--gold-primary); background: rgba(255, 215, 0, 0.15); border: 1px solid rgba(255, 215, 0, 0.4); padding: 3px 10px; border-radius: var(--radius-full); } .stage-time-tag { font-size: 0.75rem; font-weight: 600; color: #38bdf8; } .stage-visual-graphic { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; } .concept-icon-aura { width: 58px; height: 58px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 123, 0, 0.15) 100%); border: 1px solid rgba(255, 215, 0, 0.35); display: flex; align-items: center; justify-content: center; color: var(--gold-primary); box-shadow: 0 4px 16px rgba(255, 215, 0, 0.15); transition: transform var(--transition-fast); } .concept-stage-card:hover .concept-icon-aura { transform: scale(1.08) rotate(3deg); background: var(--gold-gradient); color: #1a1200; } .concept-chip-stack { display: flex; flex-direction: column; gap: 6px; } .mini-chip { display: inline-block; font-size: 0.6875rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); padding: 4px 10px; border-radius: var(--radius-sm); white-space: nowrap; } .stage-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: #ffffff; margin-bottom: 10px; } .stage-desc { font-size: 0.84375rem; color: rgba(255, 255, 255, 0.75); line-height: 1.55; margin-bottom: 20px; flex-grow: 1; } .stage-card-action { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .stage-wa-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 700; color: #25D366; transition: all var(--transition-fast); } .stage-wa-link:hover { color: #4ef389; transform: translateX(3px); } .stage-quote-btn { font-size: 0.8125rem; font-weight: 700; color: var(--gold-primary); display: inline-flex; align-items: center; gap: 6px; transition: all var(--transition-fast); } .stage-quote-btn:hover { color: #ffffff; text-shadow: 0 0 10px rgba(255, 215, 0, 0.6); } .stage-guarantee { font-size: 0.75rem; font-weight: 700; color: #a3e635; display: inline-flex; align-items: center; gap: 4px; } .pipeline-cta-banner { margin-top: 56px; background: rgba(7, 21, 39, 0.85); border: 1.5px solid rgba(255, 215, 0, 0.4); border-radius: var(--radius-xl); padding: 36px 44px; display: flex; align-items: center; justify-content: space-between; gap: 32px; box-shadow: 0 16px 45px rgba(0, 0, 0, 0.4), 0 0 35px rgba(255, 215, 0, 0.18); } .pipeline-cta-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: #ffffff; margin-bottom: 6px; } .pipeline-cta-desc { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.78); max-width: 640px; } .pipeline-cta-buttons { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } box-shadow: var(--royal-blue-glow); transition: all var(--transition-normal); } .btn-royal-solid:hover { background: #0f44ad; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(18, 85, 204, 0.4); } .section-testimonials { position: relative; background: #06172d; overflow: hidden; color: #ffffff; } .festive-rangoli-corner { position: absolute; width: 280px; height: 280px; background-image: radial-gradient(circle, rgba(255, 184, 0, 0.15) 0%, transparent 70%); pointer-events: none; } .festive-rangoli-corner.top-left { top: -80px; left: -80px; } .festive-rangoli-corner.bottom-right { bottom: -80px; right: -80px; } .testimonials-header-center { text-align: center; margin-bottom: 40px; } .client-logos-wrapper { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; margin-bottom: 60px; padding: 16px 24px; background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-full); border: 1px solid rgba(255, 215, 0, 0.2); max-width: 900px; margin-left: auto; margin-right: auto; } .client-logo-pill { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.7); transition: all var(--transition-fast); } .client-logo-pill:hover { color: #ffffff; transform: scale(1.06); } .logo-tata { color: #38bdf8; } .logo-infosys { color: #38bdf8; } .logo-accenture { color: #a855f7; } .logo-wipro { color: #34d399; } .logo-hcl { color: #f43f5e; } .testimonials-slider-box { position: relative; max-width: 820px; margin: 0 auto; padding: 0 60px; } .testimonials-slides { position: relative; min-height: 200px; } .testi-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, transform 0.5s ease; transform: translateY(16px); text-align: center; } .testi-slide.active { position: relative; opacity: 1; visibility: visible; transform: translateY(0); } .quote-mark { font-family: var(--font-festive); font-size: 4rem; line-height: 1; color: var(--gold-primary); margin-bottom: -10px; } .testi-quote-text { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-style: italic; line-height: 1.6; color: #f1f5f9; margin-bottom: 24px; } .testi-author-info { display: flex; flex-direction: column; gap: 4px; } .author-name { font-size: 1.0625rem; font-weight: 700; color: var(--gold-light); } .author-role { font-size: 0.875rem; color: rgba(255, 255, 255, 0.65); } .testi-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .testi-arrow:hover { background: var(--gold-primary); color: #1a1300; } .testi-prev { left: 0; } .testi-next { right: 0; } .testi-dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; } .testi-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); cursor: pointer; transition: all var(--transition-fast); } .testi-dot.active { background: var(--gold-primary); width: 26px; border-radius: var(--radius-full); } .section-banner-10 { position: relative; background: var(--navy-deepest); overflow: hidden; } .banner-10-container { position: relative; width: 100%; } .banner-10-clean-link { display: block; position: relative; width: 100%; overflow: hidden; cursor: pointer; } .banner-10-img { width: 100%; height: auto; max-height: 480px; object-fit: cover; object-position: center; display: block; transition: transform 0.8s var(--ease-smooth); } .banner-10-clean-link:hover .banner-10-img { transform: scale(1.02); } .section-stats-bar { background: #ffffff; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: 40px 0; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat-box { display: flex; align-items: center; gap: 18px; padding: 12px; } .stat-icon-wrap { width: 54px; height: 54px; flex-shrink: 0; border-radius: 14px; background: #eff6ff; color: var(--royal-blue); display: flex; align-items: center; justify-content: center; } .stat-info { display: flex; flex-direction: column; } .stat-counter { font-family: var(--font-heading); font-size: 1.875rem; font-weight: 800; color: var(--navy-dark); line-height: 1.1; } .stat-title { font-size: 0.875rem; color: var(--text-muted); } .site-footer { background: var(--navy-dark); color: #ffffff; padding-top: 80px; padding-bottom: 30px; } .footer-top-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 48px; margin-bottom: 60px; } .footer-logo-wrap { height: 84px; background: #ffffff; padding: 8px 18px; border-radius: 14px; display: inline-block; margin-bottom: 24px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.25); border: 1px solid rgba(255, 215, 0, 0.4); transition: transform var(--transition-fast); } .footer-logo-wrap:hover { transform: scale(1.04); } .footer-logo { height: 100%; width: auto; object-fit: contain; display: block; } .footer-tagline { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.7); line-height: 1.6; margin-bottom: 24px; max-width: 340px; } .footer-socials { display: flex; gap: 12px; margin-bottom: 24px; } .social-icon { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #ffffff; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.15); transition: all var(--transition-fast); } .social-icon:hover { background: var(--royal-blue); border-color: var(--royal-blue); transform: translateY(-2px); } .btn-replay-intro { font-size: 0.8125rem; font-weight: 600; color: var(--gold-light); background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(255, 215, 0, 0.35); padding: 6px 14px; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 6px; transition: all var(--transition-fast); } .btn-replay-intro:hover { background: var(--gold-primary); color: #1a1300; } .footer-col-title { font-size: 1.0625rem; font-weight: 700; color: #ffffff; margin-bottom: 20px; position: relative; } .footer-links-list, .footer-contact-list { display: flex; flex-direction: column; gap: 12px; } .footer-links-list a { font-size: 0.875rem; color: rgba(255, 255, 255, 0.65); } .footer-links-list a:hover { color: var(--gold-light); padding-left: 4px; } .footer-contact-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); } .footer-contact-list svg { color: var(--gold-primary); flex-shrink: 0; margin-top: 2px; } .footer-contact-list a:hover { color: #ffffff; } .footer-bottom-bar { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.5); } .floating-whatsapp-container { position: fixed; bottom: 28px; left: 24px; z-index: 9990; } .floating-whatsapp-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #25d366; box-shadow: 0 10px 25px rgba(37, 211, 102, 0.45); transition: transform var(--transition-normal); } .floating-whatsapp-btn:hover { transform: scale(1.1); } .whatsapp-pulse-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #25d366; animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } @keyframes pulse-ring { 0% { transform: scale(0.95); opacity: 0.8; } 50% { transform: scale(1.25); opacity: 0.3; } 100% { transform: scale(1.4); opacity: 0; } } .whatsapp-tooltip { position: absolute; left: 72px; background: var(--navy-dark); color: #ffffff; font-size: 0.75rem; font-weight: 700; white-space: nowrap; padding: 6px 12px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-8px); transition: all var(--transition-fast); } .floating-whatsapp-btn:hover .whatsapp-tooltip { opacity: 1; visibility: visible; transform: translateX(0); } .floating-chat-container { position: fixed; bottom: 28px; right: 24px; z-index: 9990; } .chat-auto-prompt { position: absolute; bottom: 74px; right: 0; width: 310px; background: #ffffff; border-radius: var(--radius-lg); padding: 16px; box-shadow: 0 16px 40px rgba(4, 13, 24, 0.2); border: 1px solid var(--border-light); display: flex; gap: 12px; align-items: flex-start; opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.95); transition: all var(--transition-normal); z-index: 9992; } .chat-auto-prompt.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .prompt-close-btn { position: absolute; top: 8px; right: 10px; font-size: 1.125rem; color: var(--text-light); line-height: 1; } .prompt-avatar { position: relative; width: 40px; height: 40px; flex-shrink: 0; } .prompt-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 1.5px solid var(--gold-primary); } .online-indicator { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; background: #10b981; border: 2px solid #ffffff; border-radius: 50%; } .prompt-content { display: flex; flex-direction: column; } .prompt-sender { font-size: 0.8125rem; color: var(--navy-dark); } .prompt-message { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.4; margin: 4px 0 8px; } .btn-prompt-open { font-size: 0.75rem; font-weight: 700; color: var(--royal-blue); text-align: left; } .floating-chat-btn { position: relative; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, #071527 0%, #1255cc 100%); color: #ffffff; box-shadow: 0 10px 30px rgba(18, 85, 204, 0.4); display: flex; align-items: center; justify-content: center; transition: transform var(--transition-normal); border: 1px solid rgba(255, 215, 0, 0.4); } .floating-chat-btn:hover { transform: scale(1.08); } .chat-icon-close { display: none; font-size: 1.75rem; line-height: 1; } .floating-chat-btn.active .chat-icon-front { display: none; } .floating-chat-btn.active .chat-icon-close { display: block; } .chat-unread-badge { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%; background: #ef4444; color: #ffffff; font-size: 0.6875rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .chat-window { position: absolute; bottom: 80px; right: 0; width: 380px; height: 520px; background: #ffffff; border-radius: var(--radius-lg); box-shadow: var(--shadow-floating); border: 1px solid var(--border-light); display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95); transition: all var(--transition-normal); z-index: 9995; } .chat-window.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .chat-window-header { background: var(--navy-dark); color: #ffffff; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 215, 0, 0.2); } .chat-header-agent { display: flex; align-items: center; gap: 12px; } .chat-agent-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; background: #ffffff; padding: 2px; } .chat-agent-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .online-dot { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: #10b981; border: 2px solid var(--navy-dark); } .chat-agent-name { font-size: 0.9375rem; font-weight: 700; color: #ffffff; } .chat-agent-status { font-size: 0.75rem; color: #94a3b8; } .chat-minimize-btn { font-size: 1.5rem; color: #94a3b8; padding: 4px; } .chat-messages-container { flex-grow: 1; padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; background: #f8fafc; } .chat-bubble { max-width: 82%; padding: 12px 16px; border-radius: 16px; font-size: 0.875rem; line-height: 1.45; animation: fadeIn 0.3s ease; } .chat-bubble.bot { background: #ffffff; color: var(--navy-dark); align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); border: 1px solid var(--border-subtle); } .chat-bubble.user { background: var(--royal-blue); color: #ffffff; align-self: flex-end; border-bottom-right-radius: 4px; } .chat-timestamp { display: block; font-size: 0.6875rem; color: var(--text-light); margin-top: 4px; } .typing-dots { display: flex; align-items: center; gap: 4px; padding: 8px 12px; } .typing-dot { width: 6px; height: 6px; background: #94a3b8; border-radius: 50%; animation: bounce 1.2s infinite ease-in-out; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; } .chat-quick-actions { display: flex; gap: 8px; padding: 8px 14px; background: #ffffff; border-top: 1px solid var(--border-light); overflow-x: auto; scrollbar-width: none; } .chat-quick-actions::-webkit-scrollbar { display: none; } .quick-chip { padding: 6px 12px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; color: var(--navy-dark); white-space: nowrap; transition: all var(--transition-fast); } .quick-chip:hover { background: var(--navy-dark); color: #ffffff; border-color: var(--navy-dark); } .chat-input-form { display: flex; align-items: center; padding: 10px 14px; background: #ffffff; border-top: 1px solid var(--border-light); gap: 10px; } .chat-user-input { flex-grow: 1; padding: 10px 14px; background: #f8fafc; border: 1px solid var(--border-light); border-radius: var(--radius-full); font-size: 0.875rem; } .chat-user-input:focus { border-color: var(--royal-blue); background: #ffffff; } .chat-send-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--royal-blue); color: #ffffff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--transition-fast); } .chat-send-btn:hover { background: #0f44ad; } .mobile-app-bottom-bar { display: none; position: fixed; bottom: 0; left: 0; width: 100%; height: var(--app-bar-height); background: rgba(7, 21, 39, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 215, 0, 0.3); z-index: 99998; align-items: center; justify-content: space-around; padding: 0 8px; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4); } .app-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: rgba(255, 255, 255, 0.65); padding: 6px 12px; border-radius: var(--radius-sm); transition: all var(--transition-fast); cursor: pointer; } .app-tab.active, .app-tab:hover { color: var(--gold-primary); } .app-tab-icon { display: flex; align-items: center; justify-content: center; } .diwali-emoji-tab { font-size: 1.25rem; animation: diyaFlicker 2s infinite ease-in-out; } .app-tab-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.5px; } [data-reveal="fade-up"] { opacity: 0; transform: translateY(32px); filter: blur(4px); transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth), filter 0.8s var(--ease-smooth); } [data-reveal="fade-up"].revealed { opacity: 1; transform: translateY(0); filter: blur(0); } [data-reveal="scale-up"] { opacity: 0; transform: scale(0.92); filter: blur(4px); transition: opacity 0.85s var(--ease-smooth), transform 0.85s var(--ease-smooth), filter 0.85s var(--ease-smooth); } [data-reveal="scale-up"].revealed { opacity: 1; transform: scale(1); filter: blur(0); } [data-reveal="slide-right"] { opacity: 0; transform: translateX(-35px); transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth); } [data-reveal="slide-right"].revealed { opacity: 1; transform: translateX(0); } [data-reveal="stagger"] > * { opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth); } [data-reveal="stagger"].revealed > * { opacity: 1; transform: translateY(0); } [data-reveal="stagger"].revealed > *:nth-child(1) { transition-delay: 0.05s; } [data-reveal="stagger"].revealed > *:nth-child(2) { transition-delay: 0.12s; } [data-reveal="stagger"].revealed > *:nth-child(3) { transition-delay: 0.19s; } [data-reveal="stagger"].revealed > *:nth-child(4) { transition-delay: 0.26s; } [data-reveal="stagger"].revealed > *:nth-child(5) { transition-delay: 0.33s; } [data-reveal="stagger"].revealed > *:nth-child(6) { transition-delay: 0.40s; } .modal-backdrop { position: fixed; inset: 0; background: rgba(3, 8, 18, 0.75); backdrop-filter: blur(8px); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: all var(--transition-normal); } .modal-backdrop.open { opacity: 1; visibility: visible; } .modal-dialog { width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; background: #ffffff; border-radius: var(--radius-lg); box-shadow: var(--shadow-floating); border: 1px solid var(--border-light); transform: translateY(20px) scale(0.96); transition: transform var(--transition-normal); } .modal-dialog.modal-large { max-width: 840px; } .modal-backdrop.open .modal-dialog { transform: translateY(0) scale(1); } .modal-content { position: relative; padding: 36px; } .modal-close-btn { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%; background: #f1f5f9; font-size: 1.5rem; line-height: 1; color: var(--navy-dark); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .modal-close-btn:hover { background: #e2e8f0; } .modal-header { margin-bottom: 24px; } .modal-badge { font-family: var(--font-regal); font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; color: var(--gold-deep); text-transform: uppercase; } .modal-title { font-size: 1.5rem; font-weight: 700; color: var(--navy-dark); margin-top: 4px; } .modal-sub { font-size: 0.875rem; color: var(--text-muted); } .quote-form { display: flex; flex-direction: column; gap: 16px; } .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 0.8125rem; font-weight: 700; color: var(--navy-dark); } .form-group input, .form-group select, .form-group textarea { padding: 12px 14px; background: #f8fafc; border: 1px solid var(--border-light); border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--text-main); transition: all var(--transition-fast); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { background: #ffffff; border-color: var(--royal-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } .budget-pills-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .budget-pill { position: relative; cursor: pointer; } .budget-pill input { position: absolute; opacity: 0; } .budget-pill span { display: block; padding: 8px 6px; text-align: center; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; color: var(--text-muted); transition: all var(--transition-fast); } .budget-pill input:checked + span { background: var(--navy-dark); color: var(--gold-primary); border-color: var(--gold-primary); } .modal-secure-note { text-align: center; font-size: 0.75rem; color: var(--text-light); margin-top: 12px; } .product-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; } .product-mockup-stage { position: relative; background: #f8fafc; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1 / 1; } .modal-product-img { width: 100%; height: 100%; object-fit: cover; } .live-logo-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(3, 8, 18, 0.6); backdrop-filter: blur(4px); padding: 8px 16px; border-radius: var(--radius-sm); border: 1px dashed var(--gold-primary); } .live-logo-overlay span { color: var(--gold-light); font-size: 0.875rem; font-weight: 800; letter-spacing: 2px; } .simulator-box { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; } .simulator-box label { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); } .simulator-box input { padding: 10px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); font-size: 0.875rem; } .modal-info-col { display: flex; flex-direction: column; } .modal-tag { font-size: 0.75rem; font-weight: 700; color: var(--royal-blue); letter-spacing: 1.5px; } .modal-prod-title { font-size: 1.625rem; font-weight: 700; color: var(--navy-dark); margin: 4px 0 8px; } .modal-prod-price { font-size: 1.25rem; font-weight: 800; color: var(--navy-dark); margin-bottom: 14px; } .modal-prod-price span { font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); } .modal-prod-desc { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 24px; } .modal-specs-list { background: #f8fafc; padding: 16px; border-radius: var(--radius-md); margin-bottom: 28px; display: flex; flex-direction: column; gap: 8px; } .spec-item { font-size: 0.8125rem; color: var(--text-main); } .modal-cta-group { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; } .toast-container { position: fixed; top: 100px; right: 24px; z-index: 999999; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--navy-dark); color: #ffffff; padding: 14px 20px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border-left: 4px solid var(--gold-primary); font-size: 0.875rem; display: flex; align-items: center; gap: 12px; animation: slideInRight 0.35s ease; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @media (max-width: 1200px) { .categories-grid { grid-template-columns: repeat(3, 1fr); } .footer-top-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 992px) { .desktop-nav { display: none; } .desktop-only { display: none !important; } .header-container { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; } .mobile-toggle-btn { display: flex; order: 1; z-index: 15; } .header-logo-link { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12; margin: 0; } .header-logo-box { height: 48px; } .header-actions { order: 3; display: flex; align-items: center; z-index: 15; } .header-mobile-wa-btn { display: inline-flex; align-items: center; gap: 6px; } .why-us-layout { grid-template-columns: 1fr; } .why-us-left { position: static; } .products-grid { grid-template-columns: repeat(2, 1fr); } .pipeline-track { margin: 0 20px 40px; } .conceptual-stages-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .trust-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { :root { --header-height: 68px; } body { padding-bottom: 70px; } .top-announcement-bar { height: auto; min-height: 32px; padding: 4px 0; } .top-bar-container { padding: 0 12px; gap: 8px; } .top-bar-left { max-width: 68%; } .top-bar-text { font-size: 0.6875rem; } .top-bar-link { font-size: 0.75rem; padding: 2px 4px; } .top-link-text { display: none; } .mobile-app-bottom-bar { display: flex; } .py-section { padding: 54px 0; } .header-logo-box { height: 46px; } .header-mobile-wa-btn { padding: 6px 12px; font-size: 0.75rem; } .header-mobile-wa-btn .btn-wa-text { display: inline-block; } .hero-slider-container { aspect-ratio: 941 / 1672; min-height: 480px; max-height: 88vh; width: 100%; } .hero-picture, .hero-slide-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .slider-arrow { display: flex; width: 38px; height: 38px; background: rgba(7, 21, 39, 0.8); border: 1px solid rgba(255, 215, 0, 0.5); backdrop-filter: blur(12px); z-index: 25; } .slider-prev { left: 8px; } .slider-next { right: 8px; } .slider-indicators { bottom: 14px; gap: 8px; z-index: 25; } .indicator-pill { width: 34px; height: 5px; } .indicator-pill.active { width: 56px; } .section-header-split { flex-direction: column; align-items: flex-start; gap: 16px; } .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .category-card { padding: 12px; } .category-name { font-size: 0.9375rem; } .products-grid { grid-template-columns: 1fr; gap: 20px; } .product-footer-row { flex-direction: column; align-items: flex-start; gap: 12px; } .product-btn-group { width: 100%; justify-content: space-between; } .product-btn-group .btn-product-quote, .product-btn-group .btn-product-wa { flex: 1; justify-content: center; text-align: center; } .products-whatsapp-banner { flex-direction: column; text-align: center; padding: 28px 20px; gap: 20px; } .pwa-btn { width: 100%; justify-content: center; } .product-filter-tabs { overflow-x: auto; width: 100%; scrollbar-width: none; } .diwali-glass-card { padding: 24px; border-radius: var(--radius-lg); } .why-us-grid { grid-template-columns: 1fr; } .pipeline-track { display: none; } .conceptual-stages-grid { grid-template-columns: 1fr; gap: 20px; } .concept-stage-card { padding: 24px 20px; border-radius: var(--radius-lg); border-left: 4px solid var(--gold-primary); } .pipeline-cta-banner { flex-direction: column; text-align: center; padding: 28px 20px; gap: 20px; } .pipeline-cta-buttons { width: 100%; flex-direction: column; } .pipeline-cta-buttons .btn-gold-solid, .pipeline-cta-buttons .btn-whatsapp-pill { width: 100%; justify-content: center; } .client-logos-wrapper { gap: 20px; padding: 12px; } .testimonials-slider-box { padding: 0 10px; } .testi-arrow { display: none; } .banner-10-img { min-height: 220px; } .stats-grid { grid-template-columns: 1fr; gap: 16px; } .footer-logo-wrap { height: 72px; } .footer-top-grid { grid-template-columns: 1fr; gap: 36px; } .footer-bottom-bar { flex-direction: column; gap: 10px; text-align: center; } .product-modal-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .budget-pills-selector { grid-template-columns: repeat(2, 1fr); } .floating-whatsapp-container { bottom: 78px; left: 16px; } .floating-chat-container { bottom: 78px; right: 16px; } .floating-whatsapp-btn { width: 52px; height: 52px; } .floating-chat-btn { width: 54px; height: 54px; } .chat-window { width: calc(100vw - 32px); right: -8px; bottom: 74px; height: 480px; } } .section-pipeline, .section-categories, .section-diwali-banner, .section-why-us, .section-products, .section-how-it-works, .section-testimonials, .section-banner-10, .section-stats-bar, .section-contact-quote, .site-footer { content-visibility: auto; contain-intrinsic-size: 1px 650px; } .hero-slider-container, .hero-slide-img, .intro-overlay, .flying-logo-wrapper { will-change: transform, opacity; transform: translateZ(0); } .hero-slider-container{aspect-ratio:1828/860;max-height:none;min-height:0} .hero-picture,.hero-slide-img{object-fit:cover;object-position:center} @media(max-width:850px){.hero-slider-container{aspect-ratio:941/1672;max-height:none;min-height:0}} .product-filter-tabs,.filter-tab-btn{display:none!important} .trusted{background:#fff;padding:44px 0 48px;border-bottom:1px solid var(--border-light);overflow:hidden;position:relative;z-index:30} .trusted-head{text-align:center;margin-bottom:26px;padding:0 20px} .trusted-head h2{font-family:var(--font-heading);font-size:clamp(1.3rem,3vw,1.9rem);color:var(--navy-dark);margin-top:6px} .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .marquee-track{display:flex;width:max-content;animation:marq 30s linear infinite;will-change:transform} .marquee:hover .marquee-track{animation-play-state:paused} .logo-card{flex:0 0 auto;width:210px;height:100px;margin-right:22px;display:grid;place-items:center;padding:16px 22px;background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s,border-color .3s} .logo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-gold);border-color:var(--gold-amber)} .logo-card img{max-height:66px;max-width:100%;width:auto;object-fit:contain} @keyframes marq{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.marquee-track{animation:none}.marquee{overflow-x:auto}} .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease-smooth),box-shadow .35s,border-color .35s} .pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-diwali);border-color:rgba(245,158,11,.55)} .pcard-img{position:relative;display:block;width:100%;aspect-ratio:1/1;background:#f4ece1;overflow:hidden;cursor:zoom-in;border:0;padding:0} .pcard-img img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease-smooth)} .pcard:hover .pcard-img img{transform:scale(1.05)} .pcard-no{position:absolute;top:10px;left:10px;font:800 .72rem var(--font-heading);letter-spacing:.08em;color:#fff;background:rgba(7,21,39,.82);padding:4px 10px;border-radius:6px} .pcard-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;flex:1} .pcard-body h3{font-family:var(--font-heading);font-size:1.12rem;color:var(--navy-dark)} .pcard-body p{font-size:.84rem;color:var(--text-muted);line-height:1.5} .btn-enq{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:10px;font:700 .86rem var(--font-sans);color:var(--navy-deepest);background:var(--gold-gradient);box-shadow:0 6px 16px rgba(245,158,11,.25);transition:transform .2s,box-shadow .2s} .btn-enq:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold)} .pcard-body .btn-enq{margin-top:10px} .section-cta-row{display:flex;justify-content:center;margin-top:40px} .page-hero{position:relative;overflow:hidden;background:radial-gradient(900px 400px at 85% -10%,rgba(245,158,11,.22),transparent 60%),radial-gradient(700px 360px at 0% 110%,rgba(37,99,235,.28),transparent 60%),linear-gradient(135deg,#030812,#0d223c 60%,#122b4d);color:#fff;padding:76px 0 84px} .page-hero .container{position:relative;z-index:2;text-align:center} .crumbs{display:inline-flex;gap:8px;align-items:center;font-size:.8rem;color:#cbd5e1;margin-bottom:14px} .crumbs a{color:var(--gold-primary)} .page-hero h1{font-family:var(--font-heading);font-weight:800;font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.1;margin-bottom:14px} .page-hero h1 span{background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent} .page-hero p.lead{max-width:680px;margin:0 auto;color:#d6deea;font-size:clamp(.95rem,2vw,1.1rem)} .page-hero .diwali-ornament-divider{margin:18px auto} .page-hero.left .container{text-align:left}.page-hero.left p.lead{margin:0}.page-hero.left .diwali-ornament-divider{margin-left:0} .hero-diya{position:absolute;font-size:3rem;opacity:.16;animation:floaty 6s ease-in-out infinite} @keyframes floaty{50%{transform:translateY(-14px)}} .about-split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center} .about-collage{position:relative;min-height:480px} .about-collage img{position:absolute;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:6px solid #fff;object-fit:cover;background:#f4ece1} .about-collage .c1{width:68%;aspect-ratio:1;top:0;left:0}.about-collage .c2{width:54%;aspect-ratio:1;bottom:0;right:0} .years-badge{position:absolute;z-index:3;left:6%;bottom:6%;width:150px;height:150px;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--gold-gradient);color:var(--navy-deepest);box-shadow:var(--shadow-gold);border:5px solid #fff} .years-badge b{font:800 2.6rem/1 var(--font-heading)}.years-badge span{font:700 .72rem var(--font-sans);letter-spacing:.1em;text-transform:uppercase} .about-text p{color:var(--text-muted);margin:14px 0} .tick-list{list-style:none;display:grid;gap:10px;margin:18px 0 26px} .tick-list li{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:var(--navy-dark)} .tick-list li::before{content:"✓";flex:0 0 22px;height:22px;border-radius:50%;background:var(--gold-gradient);color:var(--navy-deepest);display:grid;place-items:center;font-size:.8rem;font-weight:800;margin-top:2px} .values-band{background:var(--navy-dark);color:#fff} .values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .value-card{padding:28px 22px;border:1px solid rgba(255,215,0,.22);border-radius:var(--radius-lg);background:rgba(255,255,255,.04);text-align:center} .value-card .ic{font-size:2rem;margin-bottom:10px}.value-card h3{font-family:var(--font-heading);color:var(--gold-primary);margin-bottom:6px}.value-card p{font-size:.9rem;color:#cbd5e1} .visit-card{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);background:#fff;border:1px solid var(--border-light)} .visit-info{padding:40px}.visit-info h3{font-family:var(--font-heading);font-size:1.6rem;margin-bottom:12px} .visit-info li{list-style:none;display:flex;gap:12px;margin:14px 0;color:var(--text-muted)}.visit-info a{color:var(--royal-blue);font-weight:600} .visit-map{min-height:320px}.visit-map iframe{width:100%;height:100%;min-height:320px;border:0} .zz{display:grid;gap:64px} .zz-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .zz-row:nth-child(even) .zz-media{order:2} .zz-media{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);background:#f4ece1;aspect-ratio:1/1;border:6px solid #fff;outline:1px solid var(--border-light)} .zz-media img{width:100%;height:100%;object-fit:contain} .zz-num{font:800 clamp(3.4rem,8vw,6rem)/1 var(--font-heading);background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9} .zz-body h2{font-family:var(--font-heading);font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--navy-dark);margin:2px 0 10px} .zz-body p{color:var(--text-muted);margin-bottom:16px} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px} .chip{font-size:.78rem;font-weight:700;padding:6px 12px;border-radius:6px;background:#fff7e0;color:var(--gold-deep);border:1px solid rgba(245,158,11,.35)} .zz-body .btn-enq{display:inline-flex;margin:0} .occ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .occ-card{padding:28px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:.35s} .occ-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-diwali)} .occ-card::after{content:"";position:absolute;right:-30px;top:-30px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(255,215,0,.28),transparent 70%)} .occ-card .ic{font-size:2.2rem;margin-bottom:10px}.occ-card h3{font-family:var(--font-heading);color:var(--navy-dark);margin-bottom:6px}.occ-card p{font-size:.92rem;color:var(--text-muted)} .kit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .kit-card{border-radius:var(--radius-xl);overflow:hidden;background:var(--navy-dark);color:#fff;box-shadow:var(--shadow-lg);display:flex;flex-direction:column} .kit-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#f4ece1} .kit-mosaic img{aspect-ratio:1;width:100%;object-fit:cover} .kit-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1} .kit-body h3{font-family:var(--font-heading);color:var(--gold-primary)}.kit-body p{font-size:.88rem;color:#cbd5e1} .kit-body .btn-enq{margin-top:12px;align-self:flex-start} .brand-band{background:linear-gradient(135deg,#fff7e0,#ffe9b8)} .brand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .brand-item{background:#fff;border-radius:var(--radius-lg);padding:24px;text-align:center;box-shadow:var(--shadow-sm);border:1px solid rgba(245,158,11,.3)} .brand-item .ic{font-size:2rem}.brand-item h3{font:700 1.02rem var(--font-heading);margin:8px 0 4px;color:var(--navy-dark)}.brand-item p{font-size:.85rem;color:var(--text-muted)} .split-form{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start} .split-form .sticky{position:sticky;top:110px} .form-card{background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:34px;box-shadow:var(--shadow-lg);position:relative} .form-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:var(--gold-gradient)} .form-card h3{font-family:var(--font-heading);font-size:1.5rem;color:var(--navy-dark);margin-bottom:4px} .form-card .sub{color:var(--text-muted);font-size:.9rem;margin-bottom:20px} .lead-form{display:grid;gap:16px} .lead-form .form-group{display:flex;flex-direction:column;gap:6px} .lead-form label{font-weight:700;font-size:.85rem;color:var(--navy-dark)} .lead-form input{width:100%;padding:14px 16px;font-size:1rem;background:#f8fafc;border:1.5px solid var(--border-light);border-radius:10px;min-height:50px} .lead-form input:focus{background:#fff;border-color:var(--royal-blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)} .lead-form .hp{position:absolute;left:-9999px;opacity:0;height:0;width:0} .lead-form .btn-gold-solid{width:100%;justify-content:center;min-height:52px} .lead-form .note{font-size:.78rem;color:var(--text-light);text-align:center} .contact-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:-52px;position:relative;z-index:5} .c-card{display:flex;flex-direction:column;gap:6px;background:#fff;border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-lg);border:1px solid var(--border-light);transition:.3s} .c-card:hover{transform:translateY(-5px);border-color:var(--gold-amber)} .c-card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;background:var(--gold-gradient)} .c-card b{font-family:var(--font-heading);color:var(--navy-dark)}.c-card span{font-size:.9rem;color:var(--text-muted);word-break:break-word} .contact-split{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:stretch} .map-card{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--border-light);display:flex;flex-direction:column;background:#fff;min-height:420px} .map-card iframe{flex:1;width:100%;min-height:340px;border:0} .map-card .addr{padding:18px 22px;font-size:.92rem;color:var(--text-muted)} .map-card .addr b{color:var(--navy-dark);display:block;font-family:var(--font-heading)} .modal-note{font-size:.8rem;color:var(--text-muted);margin-bottom:14px} .bg-cream{background:var(--surface-cream)}.bg-white{background:#fff} .center{text-align:center}.mt-s{margin-top:8px} @media(max-width:1100px){.pgrid{grid-template-columns:repeat(3,1fr)}.values-grid,.brand-grid,.contact-cards{grid-template-columns:repeat(2,1fr)}.about-split,.split-form,.contact-split{gap:36px}} @media(max-width:900px){ .about-split,.split-form,.contact-split,.zz-row,.visit-card{grid-template-columns:1fr} .zz-row:nth-child(even) .zz-media{order:0}.zz{gap:44px}.zz-row{gap:22px} .occ-grid,.kit-grid{grid-template-columns:repeat(2,1fr)} .about-collage{min-height:420px;max-width:520px;margin:0 auto 10px}.split-form .sticky{position:static} } @media(max-width:768px){ .pgrid{grid-template-columns:repeat(2,1fr);gap:12px}.pcard-body{padding:12px}.pcard-body h3{font-size:.98rem}.pcard-body p{display:none}.btn-enq{padding:10px 8px;font-size:.8rem} .page-hero{padding:48px 0 60px}.contact-cards{margin-top:-34px;gap:12px}.c-card{padding:16px}.c-card .ic{width:38px;height:38px} .form-card{padding:24px 18px}.visit-info{padding:26px 20px} .logo-card{width:150px;height:78px;margin-right:14px;padding:12px 16px}.logo-card img{max-height:48px} .trusted{padding:30px 0 34px}.values-grid,.brand-grid{gap:12px}.value-card{padding:20px 14px} .py-section{padding:56px 0}.container{padding:0 16px} } @media(max-width:560px){.occ-grid,.kit-grid{grid-template-columns:1fr}.contact-cards{grid-template-columns:1fr 1fr}.values-grid,.brand-grid{grid-template-columns:1fr 1fr}.years-badge{width:112px;height:112px}.years-badge b{font-size:2rem}} @media(max-width:360px){.contact-cards{grid-template-columns:1fr}} body{padding-bottom:env(safe-area-inset-bottom)} html.no-intro #intro-overlay{display:none!important}html.no-intro body.intro-active{overflow:auto!important} .toast.error{border-left:4px solid #dc2626}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .hero-trust-wrap{position:relative;z-index:30;background:#fff}