/* ========================================================= TANTRAVA — Design System A living-flame / temple-gold identity: near-black ground, ember red, worn temple gold, warm parchment ink. ========================================================= */ /* No external @import — system fonts only. An @import to a remote stylesheet is render-blocking: if that network request hangs (firewall, proxy, offline machine, security software doing HTTPS interception) the whole page can sit blank until it times out. Using local system fonts means the page never depends on the network to render. */ :root { /* --- Colour tokens --- */ --void: #0a0605; --void-soft: #150d0a; --ash: #1d1310; --ash-2: #271a14; --maroon: #3d0c0c; --ember: #c1121f; --ember-bright: #ff5f4d; --gold: #cf9a3e; --gold-bright: #f2c96a; --gold-dim: #7d6329; --parchment: #efe3ce; --parchment-dim: #cabb9c; --ink: #f4ece0; /* --- Type (system fonts — no network dependency) --- */ --f-display: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; --f-heading: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; --f-body-en: Georgia, 'Times New Roman', 'Nirmala UI', serif; --f-body-hi: 'Nirmala UI', 'Mangal', 'Noto Sans Devanagari', Georgia, serif; --f-ui: 'Segoe UI', 'Nirmala UI', Tahoma, Arial, sans-serif; --radius: 4px; --container: 1240px; --header-h: 84px; } /* html[lang toggle] swaps body copy typeface for readability */ html[data-lang="hi"] { --f-body: var(--f-body-hi); } html[data-lang="en"] { --f-body: var(--f-body-en); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; } body { margin: 0; background: var(--void); color: var(--ink); font-family: var(--f-body, var(--f-body-en)); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; width: 100%; } img { max-width: 100%; display: block; } img[loading="lazy"] { transition: opacity 0.3s ease-in-out; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* language visibility helpers: elements carry both langs, CSS shows one. IMPORTANT: scoped to "body [lang]", never bare "[lang]" — the tag itself carries lang="en", and an unscoped [lang="en"] selector would match and hide the root, blanking the entire page. */ body [lang="en"] { display: none; } body [lang="hi"] { display: none; } html[data-lang="en"] body [lang="en"] { display: revert; } html[data-lang="hi"] body [lang="hi"] { display: revert; } html[data-lang="en"] body span[lang="en"], html[data-lang="en"] body em[lang="en"] { display: inline; } html[data-lang="hi"] body span[lang="hi"], html[data-lang="hi"] body em[lang="hi"] { display: inline; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ========================================================= Background texture — ember field ========================================================= */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 900px 500px at 15% -5%, rgba(193, 18, 31, .18), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 10%, rgba(207, 154, 62, .10), transparent 55%), radial-gradient(ellipse 800px 600px at 50% 100%, rgba(61, 12, 12, .35), transparent 60%); } /* ========================================================= Typography ========================================================= */ h1, h2, h3, h4 { font-family: var(--f-heading); color: var(--gold-bright); margin: 0 0 .5em; font-weight: 600; letter-spacing: .02em; overflow-wrap: break-word; word-break: break-word; } html[data-lang="hi"] h1, html[data-lang="hi"] h2, html[data-lang="hi"] h3, html[data-lang="hi"] h4 { font-family: var(--f-body-hi); font-weight: 700; letter-spacing: 0; } .eyebrow { font-family: var(--f-ui); text-transform: uppercase; letter-spacing: .28em; font-size: 12px; color: var(--ember-bright); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 500; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--ember-bright); display: block; } p { color: var(--parchment); } .lead { font-size: clamp(0.98rem, 2.8vw, 1.25rem); color: var(--parchment); } .small { font-size: .85rem; color: var(--parchment-dim); font-family: var(--f-ui); } /* Divider glyph — the signature flame-yantra ornament */ .ornament { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 56px auto; max-width: 420px; color: var(--gold-dim); } .ornament::before, .ornament::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim)); } .ornament::after { background: linear-gradient(90deg, var(--gold-dim), transparent); } .ornament svg { width: 28px; height: 28px; flex-shrink: 0; } /* ========================================================= Header ========================================================= */ #site-header { position: sticky; top: 0; z-index: 100; background: rgba(10, 6, 5, .88); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(207, 154, 62, .22); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 20px; } .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand img { height: 56px; width: auto; filter: drop-shadow(0 0 10px rgba(193, 18, 31, .35)); } .brand-text { font-family: var(--f-display); line-height: 1; } .brand-text .name { font-size: 1.5rem; color: var(--gold-bright); display: block; letter-spacing: .06em; } .brand-text .tag { font-family: var(--f-ui); font-size: .62rem; letter-spacing: .22em; color: var(--parchment-dim); text-transform: uppercase; } nav#main-nav { display: flex; align-items: center; gap: 2px; font-family: var(--f-ui); font-size: .86rem; } nav#main-nav>ul { display: flex; align-items: center; } nav#main-nav>ul>li { position: relative; } nav#main-nav>ul>li>a, nav#main-nav>ul>li>button.nav-toggle { display: flex; align-items: center; gap: 5px; padding: 14px 14px; color: var(--parchment); font-weight: 500; letter-spacing: .02em; background: none; border: none; font-size: .86rem; } html[data-lang="hi"] nav#main-nav { font-size: .92rem; } nav#main-nav>ul>li>a:hover, nav#main-nav>ul>li:hover>button.nav-toggle, nav#main-nav>ul>li.current>a { color: var(--gold-bright); } nav#main-nav .chev { width: 9px; height: 9px; transition: transform .2s; opacity: .7; } nav#main-nav li:hover .chev { transform: rotate(180deg); } .mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--ash); border: 1px solid rgba(207, 154, 62, .25); border-radius: var(--radius); padding: 18px; width: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; box-shadow: 0 24px 50px rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; translate: 0 8px; transition: .18s ease; } nav#main-nav li:hover .mega { opacity: 1; visibility: visible; translate: 0 0; } .mega a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 3px; font-size: .85rem; color: var(--parchment); } .mega a:hover { background: rgba(207, 154, 62, .1); color: var(--gold-bright); } .mega a svg { flex-shrink: 0; opacity: .65; } .mega a:hover svg { opacity: 1; } .header-actions { display: flex; align-items: center; gap: 14px; } .lang-toggle { display: flex; border: 1px solid var(--gold-dim); border-radius: 99px; overflow: hidden; font-family: var(--f-ui); } .lang-toggle button { background: none; border: none; color: var(--parchment-dim); font-size: .78rem; padding: 7px 14px; letter-spacing: .05em; } .lang-toggle button.active { background: var(--gold); color: var(--void); font-weight: 600; } .menu-btn { display: none; background: none; border: 1px solid var(--gold-dim); border-radius: 6px; padding: 8px 10px; list-style: none; cursor: pointer; z-index: 205; } .menu-btn::-webkit-details-marker { display: none; } .menu-btn svg { width: 22px; height: 22px; stroke: var(--gold-bright); transition: transform .2s; } .mobile-menu[open] .menu-btn { border-color: var(--gold-bright); background: rgba(207, 154, 62, .18); } /* Mobile nav drawer panel */ .mobile-menu { position: relative; } .mobile-menu[open]::before { content: ""; position: fixed; inset: 0; background: rgba(6, 3, 2, .78); backdrop-filter: blur(4px); z-index: 199; cursor: pointer; } .mobile-menu .drawer-panel { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(340px, 88vw); background: linear-gradient(180deg, var(--void-soft), var(--ash)); border-left: 1px solid rgba(207, 154, 62, .3); padding: 20px 18px max(40px, env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 200; box-shadow: -20px 0 50px rgba(0, 0, 0, .7); display: flex; flex-direction: column; gap: 4px; } /* Header bar inside drawer */ .drawer-panel .drawer-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid rgba(207, 154, 62, .2); } .drawer-panel .drawer-title { font-family: var(--f-display); font-size: 1.15rem; color: var(--gold-bright); letter-spacing: .05em; } .drawer-close-btn { background: none; border: 1px solid rgba(207, 154, 62, .3); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--gold-bright); cursor: pointer; flex-shrink: 0; transition: all .2s ease; } .drawer-close-btn:hover { background: rgba(207, 154, 62, .15); border-color: var(--gold); } .drawer-close-btn svg { width: 16px; height: 16px; stroke: var(--gold-bright); } /* Top-level links in drawer */ .drawer-panel>a { display: flex; align-items: center; padding: 12px 10px; color: var(--parchment); font-family: var(--f-ui); font-size: .95rem; font-weight: 500; border-radius: 6px; border-bottom: 1px solid rgba(207, 154, 62, .1); transition: all .18s ease; } .drawer-panel>a:hover, .drawer-panel>a:focus { background: rgba(207, 154, 62, .1); color: var(--gold-bright); padding-left: 14px; } /* Main dropdowns (Solutions details) */ .drawer-panel details { border: none; padding: 0; margin: 2px 0; } .drawer-panel details summary { font-family: var(--f-ui); color: var(--gold-bright); font-weight: 600; font-size: .95rem; padding: 12px 10px; border-radius: 6px; list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; background: rgba(207, 154, 62, .06); border: 1px solid rgba(207, 154, 62, .18); transition: all .18s ease; } .drawer-panel details summary::-webkit-details-marker { display: none; } .drawer-panel details summary:hover { background: rgba(207, 154, 62, .12); } .drawer-panel details[open]>summary { background: rgba(207, 154, 62, .15); border-color: var(--gold); color: var(--gold-bright); } .drawer-panel details summary .chev { width: 14px; height: 14px; stroke: var(--gold-bright); transition: transform .2s ease; opacity: .85; } .drawer-panel details[open]>summary .chev { transform: rotate(180deg); } /* Sub-links container inside mobile drawer Solutions */ .drawer-panel .sub-links { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 8px 8px; margin: 6px 0; border-left: 2px solid rgba(207, 154, 62, .25); } .drawer-panel .sub-links a, .drawer-panel details > div > a { display: flex; align-items: center; gap: 10px; font-family: var(--f-ui); font-size: .88rem; font-weight: 500; color: var(--parchment); padding: 9px 12px; border-radius: 6px; background: rgba(15, 10, 8, 0.6); border: 1px solid rgba(207, 154, 62, 0.15); transition: all .18s ease; text-decoration: none; } .drawer-panel .sub-links a:hover, .drawer-panel .sub-links a:focus, .drawer-panel details > div > a:hover, .drawer-panel details > div > a:focus { background: rgba(207, 154, 62, 0.16); color: var(--gold-bright); border-color: rgba(207, 154, 62, 0.35); padding-left: 16px; } .drawer-panel .sub-links a svg, .drawer-panel details > div > a svg { flex-shrink: 0; color: var(--gold-bright); } /* Level 2 Category details inside Solutions */ .drawer-panel details div details summary { font-size: .88rem; font-weight: 500; color: var(--parchment); padding: 10px 12px; margin: 4px 0; background: rgba(10, 6, 5, .5); border: 1px solid rgba(207, 154, 62, .15); border-radius: 6px; } .drawer-panel details div details summary:hover { background: rgba(207, 154, 62, .1); color: var(--gold-bright); } .drawer-panel details div details summary svg { flex-shrink: 0; margin-right: 8px; color: var(--gold-bright); } /* Level 3 Remedy links */ .drawer-panel details div details div { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 6px 12px; margin: 4px 0 6px 12px; border-left: 2px solid rgba(207, 154, 62, .22); } .drawer-panel details div details div a { display: flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-size: .84rem; color: var(--parchment-dim); padding: 7px 10px; border-radius: 4px; border: none; transition: all .18s ease; } .drawer-panel details div details div a::before { content: "•"; color: var(--gold-dim); font-size: .8rem; margin-right: 2px; } .drawer-panel details div details div a:hover { color: var(--gold-bright); background: rgba(207, 154, 62, .12); padding-left: 14px; } /* ========================================================= Buttons ========================================================= */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-ui); font-weight: 500; font-size: .86rem; letter-spacing: .05em; padding: 14px 30px; border-radius: 2px; border: 1px solid transparent; transition: .2s; } .btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s ease; } .btn:hover svg { transform: scale(1.1); } .btn-primary { background: linear-gradient(135deg, var(--ember), var(--ember-bright)); color: #fff; box-shadow: 0 8px 24px rgba(193, 18, 31, .35); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(193, 18, 31, .5); } .btn-outline { border-color: var(--gold); color: var(--gold-bright); } .btn-outline:hover { background: rgba(207, 154, 62, .1); } .btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: var(--void); font-weight: 600; } .btn-gold:hover { transform: translateY(-2px); } .btn-sm { padding: 9px 18px; font-size: .78rem; } /* ========================================================= Hero ========================================================= */ .hero { position: relative; padding: 90px 0 70px; overflow: hidden; background: radial-gradient(circle at 50% 15%, rgba(193, 18, 31, .28), transparent 55%), radial-gradient(circle at 80% 80%, rgba(207, 154, 62, .14), transparent 50%); background-size: 140% 140%, 140% 140%; animation: heroGradientShift 14s ease-in-out infinite alternate; } @keyframes heroGradientShift { 0% { background-position: 50% 10%, 80% 80%; } 50% { background-position: 35% 25%, 65% 70%; } 100% { background-position: 55% 5%, 90% 90%; } } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(70px); } .hero::before { width: 460px; height: 460px; left: -140px; top: -120px; background: radial-gradient(circle, rgba(193, 18, 31, .55), transparent 70%); animation: heroOrbFloat1 11s ease-in-out infinite; } .hero::after { width: 400px; height: 400px; right: -120px; bottom: -140px; background: radial-gradient(circle, rgba(207, 154, 62, .45), transparent 70%); animation: heroOrbFloat2 13s ease-in-out infinite; } @keyframes heroOrbFloat1 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .65; } 50% { transform: translate(70px, 50px) scale(1.25); opacity: 1; } } @keyframes heroOrbFloat2 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .55; } 50% { transform: translate(-60px, -40px) scale(1.2); opacity: .9; } } .hero-embers { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } .hero-embers span { position: absolute; bottom: -20px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, var(--gold-bright), var(--ember) 70%, transparent); box-shadow: 0 0 8px 2px rgba(226, 67, 47, .6); animation-name: emberRise; animation-timing-function: ease-in; animation-iteration-count: infinite; opacity: 0; } @keyframes emberRise { 0% { transform: translateY(0) translateX(0) scale(.6); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-460px) translateX(30px) scale(1.1); opacity: 0; } } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; } .hero h1 { font-size: clamp(1.75rem, 5.2vw, 3.6rem); line-height: 1.1; margin-bottom: 22px; } .hero h1 .accent { color: var(--ember-bright); -webkit-text-fill-color: var(--ember-bright); } .hero p.lead { max-width: 520px; margin-bottom: 34px; } .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; } .hero-art { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; } .hero-art .ring { position: absolute; width: 110%; padding-top: 110%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(207, 154, 62, 0), rgba(193, 18, 31, .5), rgba(207, 154, 62, 0) 30%); filter: blur(2px); animation: spin 26s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hero-art img { position: relative; width: 78%; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6)); } .hero-notice { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 26px; max-width: 360px; width: 100%; box-sizing: border-box; padding: 12px 16px; background: rgba(10, 6, 5, .6); border: 1px solid var(--ember-bright); border-radius: 6px; font-family: var(--f-ui); font-size: .84rem; letter-spacing: .02em; color: var(--parchment); box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 0 1px rgba(226, 67, 47, .15); animation: noticePulse 3s ease-in-out infinite; } .hero-notice svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--ember-bright); } @keyframes noticePulse { 0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 0 1px rgba(226, 67, 47, .15); } 50% { box-shadow: 0 8px 28px rgba(0, 0, 0, .45), 0 0 0 4px rgba(226, 67, 47, .28); } } .hero-dikshya { position: relative; z-index: 1; margin-top: 14px; max-width: 360px; width: 100%; box-sizing: border-box; padding: 14px 16px; background: rgba(15, 10, 8, .75); border: 1px solid var(--gold); border-radius: 8px; font-family: var(--f-ui); font-size: .84rem; letter-spacing: .01em; color: var(--parchment); box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 0 1px rgba(207, 154, 62, .2); text-align: left; } .hero-dikshya-title { display: flex; align-items: center; gap: 8px; color: var(--gold-bright); font-size: .92rem; font-weight: 700; margin-bottom: 6px; } .hero-dikshya-title svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold-bright); } .hero-dikshya p { margin: 0 0 10px 0; font-size: .82rem; line-height: 1.48; color: var(--parchment-dim); } .dikshya-wa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: var(--void) !important; font-weight: 700; font-size: .84rem; border-radius: 6px; border: 1px solid var(--gold-bright); box-shadow: 0 4px 12px rgba(207, 154, 62, 0.3); text-decoration: none; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .dikshya-wa-btn:hover { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); transform: translateY(-1px); color: var(--void) !important; box-shadow: 0 6px 16px rgba(242, 201, 106, 0.45); } @media (max-width:900px) { .hero-notice, .hero-dikshya { max-width: 100%; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; } .hero-notice { font-size: 0.88rem; padding: 14px 16px; } .hero-dikshya { font-size: 0.88rem; padding: 16px; } .hero-dikshya-title { font-size: 0.98rem; margin-bottom: 8px; } .hero-dikshya p { font-size: 0.86rem; line-height: 1.5; margin-bottom: 12px; } .dikshya-wa-btn { display: flex; width: 100%; box-sizing: border-box; justify-content: center; padding: 11px 18px; font-size: 0.9rem; font-weight: 700; text-align: center; } } /* Solve-strip: quick issue chips under hero */ .solve-strip { border-top: 1px solid rgba(207, 154, 62, .18); border-bottom: 1px solid rgba(207, 154, 62, .18); padding: 22px 0; overflow: hidden; } .solve-track { display: flex; gap: 14px; width: max-content; animation: marquee 34s linear infinite; } .solve-strip:hover .solve-track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .chip { font-family: var(--f-ui); font-size: .82rem; color: var(--parchment); border: 1px solid var(--gold-dim); padding: 9px 18px; border-radius: 99px; white-space: nowrap; display: flex; align-items: center; gap: 8px; } .chip svg { flex-shrink: 0; color: var(--gold-bright); } .chip::before { display: none; } /* ========================================================= Sections ========================================================= */ section { position: relative; z-index: 1; padding: 90px 0; } .section-head { max-width: 700px; margin-bottom: 50px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head h2 { font-size: clamp(1.35rem, 3.8vw, 2.5rem); } /* Category / mandala grid */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px; } .cat-card { background: linear-gradient(160deg, var(--ash), var(--ash-2)); border: 1px solid rgba(207, 154, 62, .18); border-radius: var(--radius); padding: 0; transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: hidden; display: flex; flex-direction: column; } .cat-card::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: .3s ease; background: radial-gradient(circle at 85% -10%, rgba(193, 18, 31, .35), transparent 60%); pointer-events: none; } .cat-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 20px 40px rgba(0, 0, 0, .5), 0 0 20px rgba(207, 154, 62, 0.25); } .cat-card:hover::after { opacity: 1; } .cat-thumb { position: relative; width: 100%; height: 180px; overflow: hidden; background: var(--void); } .cat-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .4s ease; display: block; } .cat-card:hover .cat-thumb img { transform: scale(1.08); } .cat-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, rgba(29, 19, 16, 0.95) 100%); } .cat-card .icon-wrap { position: absolute; bottom: 12px; left: 20px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(10, 6, 5, 0.85); border: 1px solid var(--gold-dim); backdrop-filter: blur(4px); margin-bottom: 0; transition: transform .3s ease, border-color .3s ease, background-color .3s ease; } .cat-card .icon-wrap svg { width: 22px; height: 22px; stroke: var(--gold-bright); fill: none; } .cat-body { padding: 18px 22px 22px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .cat-card h3 { font-size: 1.2rem; margin-bottom: 8px; color: var(--ink); transition: color .25s ease; } .cat-card:hover h3 { color: var(--gold-bright); } .cat-card p { font-size: .92rem; color: var(--parchment-dim); margin-bottom: 16px; line-height: 1.5; } .cat-card .go { font-family: var(--f-ui); font-size: .8rem; font-weight: 600; letter-spacing: .05em; color: var(--ember-bright); display: inline-flex; align-items: center; gap: 6px; transition: gap .25s ease, color .25s ease; } .cat-card:hover .go { gap: 10px; color: var(--gold-bright); } /* Solutions list (inside category / solution pages) */ .sol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; } .sol-card { background: var(--ash); border: 1px solid rgba(207, 154, 62, .15); padding: 24px; border-radius: var(--radius); transition: .2s; } .sol-card:hover { border-color: var(--gold); transform: translateY(-3px); } .sol-card h4 { font-size: 1.05rem; margin-bottom: 8px; color: var(--gold-bright); font-family: var(--f-heading); } html[data-lang="hi"] .sol-card h4 { font-family: var(--f-body-hi); } .sol-card p { font-size: .92rem; color: var(--parchment-dim); margin-bottom: 14px; } /* Cards general */ .card { background: var(--ash); border: 1px solid rgba(207, 154, 62, .16); border-radius: var(--radius); padding: 26px; } /* Benefit list w/ flame bullets */ .flame-list { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; } .flame-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--parchment); font-size: .98rem; } .flame-list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 4px; stroke: var(--ember-bright); fill: none; } /* Breadcrumb */ .breadcrumb { font-family: var(--f-ui); font-size: .78rem; color: var(--parchment-dim); padding: 20px 0; display: flex; gap: 8px; flex-wrap: wrap; } .breadcrumb a { color: var(--gold); } .breadcrumb span { opacity: .5; } /* Page header banner (inner pages) */ .page-banner { padding: 60px 0 40px; text-align: center; background: radial-gradient(ellipse 700px 300px at 50% 0%, rgba(193, 18, 31, .25), transparent 70%); border-bottom: 1px solid rgba(207, 154, 62, .15); } .page-banner h1 { font-size: clamp(1.75rem, 4vw, 2.8rem); } .page-banner p { max-width: 600px; margin: 0 auto; color: var(--parchment-dim); } /* Goddess (Dasha Mahavidya) grid + detail */ .goddess-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 24px; } .goddess-card { text-align: center; padding: 28px 20px; background: linear-gradient(160deg, var(--ash), #1c120e); border: 1px solid rgba(207, 154, 62, .22); border-radius: var(--radius); position: relative; overflow: hidden; transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .goddess-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(193, 18, 31, .2), transparent 70%); pointer-events: none; opacity: .5; transition: opacity .3s ease; } .goddess-card:hover { transform: translateY(-8px); border-color: var(--gold-bright); box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 24px rgba(193, 18, 31, .25); } .goddess-card:hover::before { opacity: 1; } .goddess-card .num { font-family: var(--f-ui); color: var(--gold-bright); font-size: .75rem; letter-spacing: .14em; font-weight: 600; text-transform: uppercase; background: rgba(207, 154, 62, .12); border: 1px solid rgba(207, 154, 62, .3); padding: 4px 14px; border-radius: 99px; margin-bottom: 16px; position: relative; z-index: 2; } .goddess-card img { width: 140px; height: 140px; object-fit: contain; margin: 0 auto 16px; display: block; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 14px rgba(193, 18, 31, 0.3)); transition: transform .35s ease, filter .35s ease; position: relative; z-index: 2; } .goddess-card:hover img { transform: scale(1.1) translateY(-4px); filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 20px rgba(207, 154, 62, 0.45)); } .goddess-card h3 { font-family: var(--f-heading); font-size: 1.25rem; color: var(--gold-bright); margin: 6px 0 4px; font-weight: 600; position: relative; z-index: 2; } .goddess-card .epithet { font-family: var(--f-ui); font-size: .8rem; color: var(--ember-bright); letter-spacing: .02em; font-weight: 500; margin-bottom: 12px; position: relative; z-index: 2; } .goddess-card .beej-tag { font-family: var(--f-body-hi); font-size: .85rem; color: var(--parchment-dim); background: rgba(10, 6, 5, .6); border: 1px dashed rgba(207, 154, 62, .3); padding: 4px 10px; border-radius: 4px; margin-bottom: 14px; width: 100%; position: relative; z-index: 2; } .goddess-card .explore-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-ui); font-size: .78rem; font-weight: 600; color: var(--gold); letter-spacing: .04em; margin-top: auto; position: relative; z-index: 2; transition: color .2s ease, transform .2s ease; } .goddess-card:hover .explore-btn { color: var(--gold-bright); transform: translateX(3px); } .mantra-box { font-family: var(--f-body-hi); font-size: clamp(1rem, 3.5vw, 1.35rem); text-align: center; color: var(--gold-bright); background: var(--void-soft); border: 1px dashed var(--gold-dim); border-radius: var(--radius); padding: 20px 14px; margin: 20px 0; word-break: break-word; overflow-wrap: anywhere; } /* Product grid */ .prod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; } .prod-card { background: var(--ash); border: 1px solid rgba(207, 154, 62, .16); border-radius: var(--radius); overflow: hidden; transition: .25s; color: var(--ink); display: block; text-decoration: none; } .prod-card:hover { border-color: var(--gold); transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); color: var(--ink); } .prod-media { aspect-ratio: auto; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 30%, rgba(193, 18, 31, .3), var(--void-soft) 70%); overflow: hidden; } .prod-media svg { width: 56%; height: 56%; } .prod-media img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .prod-body { padding: 22px; } .prod-body h3 { font-size: 1.1rem; margin-bottom: 6px; } .price, .prod-body .price { font-family: var(--f-ui); color: var(--gold-bright); font-weight: 700; font-size: 1.1rem; margin: 10px 0; } .prod-body p { font-size: .9rem; color: var(--parchment-dim); } /* Gallery */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; } .gal-tile { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; position: relative; border: 1px solid rgba(207, 154, 62, .18); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ash), var(--maroon) 140%); cursor: pointer; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .gal-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .gal-tile:hover img { transform: scale(1.06); } .gal-tile:hover { border-color: var(--gold-bright); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); } .gal-tile .zoom-icon { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(10, 6, 5, 0.75); border: 1px solid var(--gold); color: var(--gold-bright); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.75); transition: all 0.3s ease; z-index: 3; pointer-events: none; } .gal-tile:hover .zoom-icon { opacity: 1; transform: scale(1); } .gal-tile .cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 14px 12px; font-family: var(--f-ui); font-size: .85rem; background: linear-gradient(to top, rgba(10, 6, 5, .9) 0%, rgba(10, 6, 5, 0.4) 70%, transparent 100%); color: var(--parchment); z-index: 2; } /* ========================================================= Photo Lightbox Modal System ========================================================= */ .lightbox-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .lightbox-modal.active { opacity: 1; visibility: visible; } .lightbox-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(8, 4, 3, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .lightbox-content { position: relative; z-index: 2; width: 92%; max-width: 1100px; height: 88vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .lightbox-stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 10px 0; } .lightbox-image { max-width: 100%; max-height: calc(88vh - 80px); object-fit: contain; border-radius: 8px; border: 1px solid rgba(207, 154, 62, 0.35); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.85); transition: opacity 0.2s ease, transform 0.2s ease; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(20, 12, 10, 0.85); border: 1px solid var(--gold); color: var(--gold-bright); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.25s ease; } .lightbox-nav:hover { background: var(--gold); color: var(--obsidian); box-shadow: 0 0 20px rgba(207, 154, 62, 0.7); transform: translateY(-50%) scale(1.1); } .lightbox-nav:active { transform: translateY(-50%) scale(0.95); } .lightbox-prev { left: -20px; } .lightbox-next { right: -20px; } @media (max-width: 768px) { .lightbox-content { width: 96%; height: 90vh; } .lightbox-prev { left: 6px; } .lightbox-next { right: 6px; } .lightbox-nav { width: 44px; height: 44px; background: rgba(20, 12, 10, 0.9); } } .lightbox-close { position: absolute; top: -12px; right: -12px; width: 44px; height: 44px; border-radius: 50%; background: rgba(20, 12, 10, 0.9); border: 1px solid var(--gold); color: var(--gold-bright); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 12; transition: all 0.25s ease; } .lightbox-close:hover { background: #c0392b; border-color: #e74c3c; color: #fff; transform: scale(1.1); } .lightbox-footer { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 750px; padding: 10px 20px; background: rgba(20, 12, 10, 0.85); border: 1px solid rgba(207, 154, 62, 0.25); border-radius: 25px; color: var(--parchment); } .lightbox-caption { font-family: var(--f-ui); font-size: 0.95rem; font-weight: 500; color: var(--gold-bright); } .lightbox-counter { font-family: var(--f-ui); font-size: 0.85rem; color: var(--parchment-dim); background: rgba(0, 0, 0, 0.5); padding: 4px 12px; border-radius: 12px; } .gal-tile.video::before { content: ""; position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--gold); background: rgba(10, 6, 5, .5); } .gal-tile.video::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--gold-bright); margin-left: 5px; } /* ========================================================= Featured Video Hero & Shorts Showcase System ========================================================= */ /* Featured Widescreen 16:9 Video Hero Banner */ .featured-video-hero { background: linear-gradient(135deg, var(--ash-2), var(--void-soft)); border: 1px solid rgba(207, 154, 62, 0.4); border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(242, 201, 106, 0.15); margin: 0 auto 48px; max-width: 940px; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .featured-video-hero:hover { border-color: var(--gold-bright); box-shadow: 0 20px 48px rgba(207, 154, 62, 0.25); } .featured-video-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--void); border-bottom: 1px solid rgba(207, 154, 62, 0.25); } @supports not (aspect-ratio: 16 / 9) { .featured-video-screen { height: 0; padding-top: 56.25%; } } .featured-video-screen iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .featured-video-meta { padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: rgba(21, 13, 10, 0.95); } .featured-video-text { display: flex; flex-direction: column; gap: 6px; } .badge-featured { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-family: var(--f-ui); text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px; border-radius: 20px; background: linear-gradient(135deg, rgba(207, 154, 62, 0.25), rgba(193, 18, 31, 0.25)); color: var(--gold-bright); border: 1px solid rgba(242, 201, 106, 0.4); } .badge-featured svg { color: var(--gold-bright); } .featured-video-title { font-family: var(--f-heading); font-size: 1.35rem; color: var(--parchment); margin: 0; line-height: 1.3; } /* Shorts Section Grid */ .shorts-showcase-head { text-align: center; margin-top: 40px; margin-bottom: 24px; } .shorts-grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; justify-items: center; align-items: stretch; } @media (max-width: 991px) { .shorts-grid-container { grid-template-columns: repeat(3, 1fr); gap: 16px; } } @media (max-width: 768px) { .shorts-grid-container { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 480px) { .shorts-grid-container { grid-template-columns: repeat(2, 1fr); gap: 10px; } .short-card { max-width: 100%; } .short-card-body { padding: 10px 8px; } .short-card-title { font-size: 0.85rem; line-height: 1.25; } .short-card-link { font-size: 0.75rem; } } .short-card { width: 100%; max-width: 240px; background: linear-gradient(145deg, var(--ash), var(--void-soft)); border: 1px solid rgba(207, 154, 62, 0.3); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; margin: 0 auto; } .short-card:hover { transform: translateY(-5px); border-color: var(--gold-bright); box-shadow: 0 14px 36px rgba(207, 154, 62, 0.25); } .short-screen { position: relative; width: 100%; aspect-ratio: 9 / 16; background: var(--void); overflow: hidden; } @supports not (aspect-ratio: 9 / 16) { .short-screen { height: 0; padding-top: 177.77%; } } .short-screen iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .short-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--ash-2); border-top: 1px solid rgba(207, 154, 62, 0.2); flex-grow: 1; } .short-badge { align-self: flex-start; font-size: 0.68rem; font-family: var(--f-ui); text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 4px; background: rgba(193, 18, 31, 0.3); color: var(--gold-bright); border: 1px solid rgba(207, 154, 62, 0.35); } .short-card-title { font-family: var(--f-heading); font-size: 0.95rem; color: var(--parchment); margin: 0; line-height: 1.3; } .short-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-family: var(--f-ui); color: var(--gold-bright); text-decoration: none; margin-top: auto; padding-top: 4px; transition: color 0.2s ease; } .short-card-link:hover { color: var(--parchment); text-decoration: underline; } /* Accordion (used for goddess detail & FAQ-like content) */ .accordion-item { border-bottom: 1px solid rgba(207, 154, 62, .18); } .accordion-item summary { list-style: none; padding: 20px 4px; display: flex; justify-content: space-between; align-items: center; font-family: var(--f-ui); color: var(--gold-bright); font-weight: 500; } .accordion-item summary::-webkit-details-marker { display: none; } .accordion-item .body { padding: 0 4px 20px; } /* Forms */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-grid .full { grid-column: 1/-1; } label { font-family: var(--f-ui); font-size: .78rem; color: var(--parchment-dim); display: block; margin-bottom: 6px; letter-spacing: .03em; } input, textarea { width: 100%; background: var(--void-soft); border: 1px solid rgba(207, 154, 62, .3); color: var(--ink); padding: 13px 14px; border-radius: 3px; font-family: var(--f-ui); font-size: .9rem; } select { width: 100%; background: var(--void-soft); border: 1px solid rgba(207, 154, 62, .3); color: var(--ink); padding: 13px 40px 13px 14px; border-radius: 3px; font-family: var(--f-ui); font-size: .9rem; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cf9a3e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; cursor: pointer; } input:focus, textarea:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); } textarea { resize: vertical; min-height: 120px; } /* Stat strip */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 20px; text-align: center; } .stats .stat b { display: block; font-family: var(--f-display); font-size: 2.1rem; color: var(--gold-bright); } .stats .stat span { font-family: var(--f-ui); font-size: .78rem; color: var(--parchment-dim); text-transform: uppercase; letter-spacing: .1em; } /* Two-col alternating content blocks (About) */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .split .visual { width: 100%; aspect-ratio: auto; border-radius: var(--radius); display: block; overflow: visible; } .split .visual svg { width: 44%; opacity: .75; } .split .visual img { width: 100%; height: auto; object-fit: contain; object-position: top center; border-radius: var(--radius); } /* CTA band */ .cta-band { background: linear-gradient(120deg, var(--maroon), var(--void)); border-top: 1px solid rgba(207, 154, 62, .25); border-bottom: 1px solid rgba(207, 154, 62, .25); text-align: center; padding: 70px 0; } .cta-band h2 { margin-bottom: 14px; } .cta-band p { max-width: 520px; margin: 0 auto 30px; } /* ========================================================= Footer ========================================================= */ #site-footer { background: var(--void-soft); border-top: 1px solid rgba(207, 154, 62, .2); padding: 70px 0 30px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; margin-bottom: 50px; } .footer-grid h3, .footer-grid h5 { font-family: var(--f-ui); color: var(--gold-bright); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; } .footer-grid ul { display: flex; flex-direction: column; gap: 10px; } .footer-grid a { font-size: .9rem; color: var(--parchment-dim); font-family: var(--f-ui); } .footer-grid a:hover { color: var(--gold-bright); } .footer-brand img { height: 64px; margin-bottom: 16px; } .footer-brand p { font-size: .9rem; color: var(--parchment-dim); max-width: 280px; } .footer-bottom { border-top: 1px solid rgba(207, 154, 62, .15); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--f-ui); font-size: .78rem; color: var(--parchment-dim); } .disclaimer { font-family: var(--f-ui); font-size: .72rem; color: var(--parchment-dim); opacity: .7; max-width: 900px; margin-top: 14px; line-height: 1.7; } /* ========================================================= WhatsApp floating button ========================================================= */ #wa-float { position: fixed; bottom: 26px; right: 26px; z-index: 150; display: flex; align-items: center; gap: 10px; background: #25D366; color: #0a2f16; padding: 14px 20px 14px 14px; border-radius: 99px; box-shadow: 0 10px 30px rgba(37, 211, 102, .45); font-family: var(--f-ui); font-weight: 600; font-size: .86rem; animation: wa-pulse 2.6s ease-in-out infinite; } #wa-float svg { width: 26px; height: 26px; } @keyframes wa-pulse { 0%, 100% { box-shadow: 0 10px 30px rgba(37, 211, 102, .45); } 50% { box-shadow: 0 10px 44px rgba(37, 211, 102, .7); } } @media (max-width:640px) { #wa-float span { display: none; } #wa-float { padding: 14px; } } /* Alternating section background */ .alt-band { background: var(--void-soft); border-top: 1px solid rgba(207, 154, 62, .15); border-bottom: 1px solid rgba(207, 154, 62, .15); } /* ========================================================= Responsive Media Queries ========================================================= */ @media (max-width:1080px) { .footer-grid { grid-template-columns: 1fr 1fr; } .hero-grid { grid-template-columns: 1fr; gap: 36px; } .hero-art { order: -1; width: 100%; max-width: 460px; margin: 0 auto; } } @media (max-width:860px) { nav#main-nav, .lang-toggle.desktop-only { display: none; } .menu-btn { display: flex; align-items: center; justify-content: center; } .split { grid-template-columns: 1fr; gap: 30px; } .form-grid { grid-template-columns: 1fr; } } @media (min-width:861px) { .mobile-menu { display: none; } } @media (max-width:768px) { input, select, textarea { font-size: 16px !important; } } @media (max-width:600px) { body { font-size: 16px; } section { padding: 50px 0; } .container { padding: 0 16px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .brand-text .name { font-size: 1.2rem; } .brand img { height: 44px; } :root { --header-h: 68px; } .page-banner { padding: 40px 0 28px; } .split .visual { max-width: 300px; width: 100%; margin: 0 auto; aspect-ratio: auto; } .sol-hero-card { padding: 20px 16px; } .sol-visual-container { padding: 24px 16px; } .attr-box { grid-template-columns: 1fr; padding: 14px; } } @media (max-width:580px) { .contact-cards-grid { grid-template-columns: 1fr !important; } .footer-bottom { flex-direction: column; text-align: center; gap: 8px; } } @media (max-width:480px) { .hero-cta { flex-direction: column; width: 100%; gap: 12px; } .hero-cta .btn { width: 100%; justify-content: center; text-align: center; } .hero-art { width: 100%; max-width: 100%; margin: 0 auto; } .hero-art img { max-width: 200px; width: 60%; } .hero-art .ring { width: 220px; height: 220px; padding-top: 0; } .brand-text .name { font-size: 1.05rem; } .brand-text .tag { font-size: 0.56rem; letter-spacing: 0.14em; } .brand img { height: 38px; } #site-header .header-inner { padding: 0 4px; gap: 10px; } .header-actions { gap: 8px; } .goddess-grid { grid-template-columns: 1fr; } .prod-grid { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: 1fr; } .sitemap-grid { grid-template-columns: 1fr; } .process-steps { grid-template-columns: 1fr; } .spec-grid { grid-template-columns: 1fr; } } @media (max-width:640px) { #wa-float span { display: none; } #wa-float { padding: 14px; bottom: 20px; right: 20px; padding-bottom: max(14px, env(safe-area-inset-bottom)); } } /* ========================================================= Visual Enhancements & Icon Layout Helpers ========================================================= */ /* Hero Trust Feature Bar */ .hero-trust-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(207, 154, 62, .2); } .trust-item { display: flex; align-items: center; gap: 12px; } .trust-item .trust-icon { width: 42px; height: 42px; border-radius: 50%; background: rgba(207, 154, 62, .1); border: 1px solid rgba(207, 154, 62, .3); color: var(--gold-bright); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .trust-item .trust-icon svg { width: 20px; height: 20px; } .trust-item .trust-title, .trust-item h3, .trust-item h4 { font-size: .88rem; margin: 0 0 2px; color: var(--gold-bright); font-family: var(--f-ui); font-weight: 600; } .trust-item p { font-size: .76rem; margin: 0; color: var(--parchment-dim); font-family: var(--f-ui); line-height: 1.3; } /* Glowing icon wrappers on cards */ .cat-card .icon-wrap, .prod-card .prod-media { transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease; } .cat-card:hover .icon-wrap { transform: scale(1.08); background: rgba(193, 18, 31, .25); color: var(--gold-bright); } /* ========================================================= Solution Detail Page Visuals & Info Grid ========================================================= */ .sol-hero-card { background: linear-gradient(160deg, var(--ash), #1c120e); border: 1px solid rgba(207, 154, 62, .28); border-radius: var(--radius); padding: 32px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5); } .sol-visual-container { background: linear-gradient(145deg, rgba(207, 154, 62, 0.08), rgba(193, 18, 31, 0.12)); border: 1px solid rgba(207, 154, 62, 0.28); border-radius: 14px; padding: 36px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; height: 100%; } .sol-visual-container::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(207, 154, 62, 0.22), transparent 70%); pointer-events: none; } .sol-visual-icon { width: 84px; height: 84px; border-radius: 50%; background: rgba(10, 6, 5, 0.75); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--gold-bright); margin-bottom: 20px; box-shadow: 0 0 28px rgba(207, 154, 62, 0.4); transition: transform .3s ease, box-shadow .3s ease; } .sol-visual-icon:hover { transform: scale(1.08) rotate(4deg); box-shadow: 0 0 40px rgba(207, 154, 62, 0.65); } .sol-visual-icon svg { width: 44px; height: 44px; stroke: var(--gold-bright); } .sol-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px dashed rgba(207, 154, 62, 0.25); } .sol-info-item { display: flex; align-items: center; gap: 10px; background: rgba(10, 6, 5, 0.45); border: 1px solid rgba(207, 154, 62, 0.2); padding: 10px 14px; border-radius: 8px; } .sol-info-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold-bright); } .sol-info-item .info-text { display: flex; flex-direction: column; } .sol-info-item span.label { font-family: var(--f-ui); font-size: 0.72rem; color: var(--parchment-dim); } .sol-info-item span.val { font-family: var(--f-ui); font-size: 0.84rem; font-weight: 600; color: var(--parchment); } .sol-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; } .sol-card .sol-card-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(207, 154, 62, 0.1); border: 1px solid rgba(207, 154, 62, 0.25); display: flex; align-items: center; justify-content: center; color: var(--gold-bright); margin-bottom: 14px; } .sol-card .sol-card-icon svg { width: 20px; height: 20px; } .sol-card .sol-card-btn { font-family: var(--f-ui); font-size: 0.78rem; font-weight: 600; color: var(--gold-bright); display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; transition: transform .2s ease, color .2s ease; } .sol-card:hover .sol-card-btn { transform: translateX(4px); color: var(--ember-bright); } .prod-card:hover .prod-media { border-color: var(--gold); box-shadow: 0 0 20px rgba(207, 154, 62, .25); } /* Specification & Checklist Grid (Products & Solutions) */ .spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; margin: 24px 0; } .spec-card { background: var(--ash); border: 1px solid rgba(207, 154, 62, .2); border-radius: var(--radius); padding: 16px 20px; display: flex; align-items: flex-start; gap: 14px; } .spec-card .spec-icon { width: 36px; height: 36px; border-radius: 4px; background: rgba(193, 18, 31, .18); border: 1px solid rgba(193, 18, 31, .4); color: var(--ember-bright); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .spec-card .spec-icon svg { width: 18px; height: 18px; } .spec-card h5 { margin: 0 0 3px; font-family: var(--f-ui); font-size: .85rem; color: var(--gold-bright); font-weight: 600; } .spec-card p { margin: 0; font-size: .82rem; color: var(--parchment-dim); line-height: 1.4; } /* Checklist Items */ .check-list { margin: 20px 0; padding: 0; list-style: none; } .check-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: .92rem; color: var(--parchment); } .check-list li svg { width: 18px; height: 18px; color: var(--gold-bright); flex-shrink: 0; margin-top: 3px; } /* Goddess Attributes Box */ .attr-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 14px; margin: 24px 0; padding: 18px; background: rgba(21, 13, 10, .7); border: 1px solid rgba(207, 154, 62, .25); border-radius: var(--radius); text-align: left; } .attr-item { display: flex; align-items: flex-start; gap: 10px; } .attr-item .attr-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(207, 154, 62, .15); color: var(--gold-bright); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .attr-item .attr-icon svg { width: 16px; height: 16px; } .attr-item .attr-label { font-family: var(--f-ui); font-size: .72rem; color: var(--parchment-dim); text-transform: uppercase; letter-spacing: .05em; display: block; } .attr-item .attr-value { font-family: var(--f-ui); font-size: .88rem; color: var(--gold-bright); font-weight: 600; display: block; } /* Step Process Flow */ .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; margin: 36px 0; } .step-card { background: var(--ash); border: 1px solid rgba(207, 154, 62, .2); border-radius: var(--radius); padding: 24px; position: relative; overflow: hidden; } .step-card::before { content: attr(data-step); position: absolute; top: -10px; right: 12px; font-family: var(--f-display); font-size: 4rem; font-weight: 700; color: rgba(207, 154, 62, .07); pointer-events: none; } .step-card .step-icon { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--ember), var(--ember-bright)); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: 0 4px 14px rgba(193, 18, 31, .3); } .step-card .step-icon svg { width: 22px; height: 22px; } .step-card h3 { font-size: 1.1rem; margin-bottom: 8px; } .step-card p { font-size: .88rem; color: var(--parchment-dim); margin: 0; line-height: 1.5; } /* Communication / Contact Grid */ .contact-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 18px; margin-bottom: 40px; } .contact-card { background: var(--ash); border: 1px solid rgba(207, 154, 62, .25); border-radius: var(--radius); padding: 22px; text-align: center; transition: transform .2s ease, border-color .2s ease; display: flex; flex-direction: column; align-items: center; } .contact-card:hover { transform: translateY(-3px); border-color: var(--gold-bright); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); } .contact-card .c-icon { width: 50px; height: 50px; border-radius: 50%; background: rgba(207, 154, 62, .12); border: 1px solid rgba(207, 154, 62, .3); color: var(--gold-bright); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: background .2s ease, border-color .2s ease, transform .2s ease; } a.contact-card { text-decoration: none; color: inherit; } a.contact-card:hover .c-icon { background: rgba(207, 154, 62, .24); border-color: var(--gold-bright); transform: scale(1.08); } .contact-card .c-icon svg { width: 24px; height: 24px; } .contact-card h3, .contact-card h4 { font-size: 1rem; margin: 0 0 6px; } .contact-card p { font-size: .85rem; color: var(--parchment-dim); margin: 0 0 14px; } /* Sitemap Cards Grid */ .sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; } .sitemap-card { background: var(--ash); border: 1px solid rgba(207, 154, 62, .2); border-radius: var(--radius); padding: 24px; } .sitemap-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(207, 154, 62, .18); } .sitemap-card-head .s-icon { width: 36px; height: 36px; border-radius: 4px; background: rgba(193, 18, 31, .2); border: 1px solid rgba(193, 18, 31, .4); color: var(--ember-bright); display: flex; align-items: center; justify-content: center; } .sitemap-card-head .s-icon svg { width: 18px; height: 18px; } .sitemap-card-head h3 { font-size: 1.1rem; margin: 0; } .sitemap-card ul { display: flex; flex-direction: column; gap: 8px; } .sitemap-card ul a { display: flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-size: .88rem; color: var(--parchment); padding: 5px 0; transition: color .18s ease; } .sitemap-card ul a:hover { color: var(--gold-bright); } .sitemap-card ul a::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-dim); display: block; } /* Gallery Filter Bar */ .filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; } .filter-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px; border: 1px solid rgba(207, 154, 62, .3); background: var(--ash); color: var(--parchment-dim); font-family: var(--f-ui); font-size: .82rem; font-weight: 500; transition: all .2s ease; } .filter-btn svg { width: 15px; height: 15px; } .filter-btn:hover, .filter-btn.active { background: var(--gold); color: var(--void); border-color: var(--gold-bright); font-weight: 600; } /* Badge tags */ .badge-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: rgba(207, 154, 62, .15); border: 1px solid rgba(207, 154, 62, .3); color: var(--gold-bright); font-family: var(--f-ui); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .badge-tag svg { width: 12px; height: 12px; } /* Solution detail page visual image top-clipping fix */ .visual img, .sol-hero-card img { width: 100% !important; max-height: 440px !important; object-fit: contain !important; object-position: top center !important; background: #0e0705 !important; display: block !important; } /* Ensure top of detail page images is NEVER hidden or cropped */ .visual, .split .visual { aspect-ratio: auto !important; overflow: visible !important; } .visual img, .sol-hero-card img, .split .visual img { width: 100% !important; height: auto !important; object-fit: contain !important; object-position: top center !important; display: block !important; } /* ========================================================= STUNNING UI REVAMP: ABOUT SUMMARY SECTION (#about-summary) ========================================================= */ .about-summary-section { position: relative; background: radial-gradient(circle at 80% 50%, rgba(61, 12, 12, 0.35) 0%, rgba(21, 13, 10, 0.95) 60%, var(--void) 100%); padding: 85px 0; border-top: 1px solid rgba(207, 154, 62, 0.15); border-bottom: 1px solid rgba(207, 154, 62, 0.15); overflow: hidden; } .about-summary-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--gold-bright) 50%, transparent 100%); opacity: 0.4; } .about-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; } .about-content h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1.28; margin-top: 12px; margin-bottom: 18px; color: var(--ink); } .about-lead { font-size: 1.05rem; line-height: 1.7; color: var(--parchment); margin-bottom: 28px; } /* Feature Highlights Grid */ .about-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; } .highlight-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(207, 154, 62, 0.18); border-radius: 8px; transition: all 0.3s ease; } .highlight-item:hover { background: rgba(207, 154, 62, 0.06); border-color: rgba(242, 201, 106, 0.4); transform: translateY(-2px); } .hl-icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(207, 154, 62, 0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hl-text strong { display: block; font-size: 0.84rem; font-family: var(--f-ui); color: var(--ink); line-height: 1.2; } .hl-text small { display: block; font-size: 0.72rem; color: var(--parchment-dim); margin-top: 2px; } /* Upgraded Stat Cards */ .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; } .stat-card { background: linear-gradient(145deg, rgba(39, 26, 20, 0.7), rgba(21, 13, 10, 0.9)); border: 1px solid rgba(207, 154, 62, 0.22); border-radius: 10px; padding: 18px 12px; text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-bright), transparent); opacity: 0.5; } .stat-card:hover { border-color: var(--gold-bright); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(207, 154, 62, 0.15); } .stat-num { display: block; font-family: var(--f-display); font-size: 2.2rem; color: var(--gold-bright); line-height: 1; margin-bottom: 6px; text-shadow: 0 0 15px rgba(242, 201, 106, 0.2); } .stat-label { font-family: var(--f-ui); font-size: 0.76rem; color: var(--parchment-dim); text-transform: uppercase; letter-spacing: 0.08em; } /* Gold Shine CTA Button */ .btn-gold-shine { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; background: linear-gradient(135deg, #cf9a3e 0%, #b37e28 100%); color: var(--void) !important; font-family: var(--f-ui); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; border-radius: 6px; border: 1px solid var(--gold-bright); box-shadow: 0 4px 15px rgba(207, 154, 62, 0.25); transition: all 0.3s ease; cursor: pointer; text-decoration: none; } .btn-gold-shine:hover { background: linear-gradient(135deg, #f2c96a 0%, #cf9a3e 100%); box-shadow: 0 6px 22px rgba(242, 201, 106, 0.4); transform: translateY(-2px); color: var(--void) !important; } /* Visual Card & Sacred Yantra Visual */ .about-visual-card { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; width: 100%; } .sacred-yantra-wrap { position: relative; width: 100%; max-width: 560px; min-height: 520px; aspect-ratio: 1 / 1; background: radial-gradient(circle at center, rgba(75, 15, 15, 0.6) 0%, rgba(29, 19, 16, 0.9) 65%, var(--void) 100%); border: 1.5px solid rgba(242, 201, 106, 0.4); border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), inset 0 0 40px rgba(207, 154, 62, 0.12); overflow: hidden; padding: 30px 24px 100px; } .yantra-glow { position: absolute; width: 75%; height: 75%; background: radial-gradient(circle, rgba(242, 201, 106, 0.25) 0%, rgba(193, 18, 31, 0.2) 50%, transparent 80%); filter: blur(30px); pointer-events: none; animation: pulseGlow 6s ease-in-out infinite alternate; } @keyframes pulseGlow { 0% { transform: scale(0.88); opacity: 0.6; } 100% { transform: scale(1.18); opacity: 1; } } .sacred-yantra-svg { width: 88%; height: 88%; max-height: 380px; filter: drop-shadow(0 0 16px rgba(207, 154, 62, 0.35)); } .consecration-badge { position: absolute; bottom: 24px; left: 24px; right: 24px; background: linear-gradient(135deg, rgba(22, 13, 10, 0.95) 0%, rgba(10, 6, 5, 0.98) 100%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1.5px solid rgba(242, 201, 106, 0.55); border-radius: 16px; padding: 18px 24px; display: flex; align-items: center; gap: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 24px rgba(207, 154, 62, 0.25); transition: all 0.3s ease; } .consecration-badge:hover { border-color: var(--gold-bright); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(242, 201, 106, 0.4); transform: translateY(-2px); } .badge-icon { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 201, 106, 0.3) 0%, rgba(207, 154, 62, 0.12) 100%); border: 1.5px solid rgba(242, 201, 106, 0.7); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 16px rgba(242, 201, 106, 0.25); } .badge-icon svg { width: 28px; height: 28px; } .badge-title { display: block; font-family: var(--f-display); font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--gold-bright); font-weight: 700; line-height: 1.25; letter-spacing: 0.01em; text-shadow: 0 0 12px rgba(242, 201, 106, 0.3); } .badge-sub { display: block; font-family: var(--f-ui); font-size: clamp(0.85rem, 1.3vw, 0.96rem); color: var(--parchment); font-weight: 500; margin-top: 4px; } /* Responsive tweaks */ @media (max-width: 992px) { .about-highlights { grid-template-columns: 1fr; gap: 10px; } } @media (max-width: 768px) { .about-split { grid-template-columns: 1fr; gap: 36px; } .about-summary-section { padding: 55px 0; } .about-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; } .stat-card { padding: 14px 8px; } .stat-num { font-size: 1.7rem; } .stat-label { font-size: 0.68rem; } .split .visual.about-visual-card, .about-visual-card { max-width: 100% !important; width: 100% !important; margin: 0 !important; } .sacred-yantra-wrap { max-width: 100% !important; width: 100% !important; min-height: 480px; aspect-ratio: auto; padding: 35px 20px 24px; flex-direction: column; box-sizing: border-box; } .sacred-yantra-svg { width: 85%; max-height: 300px; } .consecration-badge { position: relative; bottom: auto; left: auto; right: auto; width: 100% !important; margin-top: 24px; padding: 16px 18px; gap: 14px; box-sizing: border-box; } .badge-icon { width: 48px; height: 48px; } .badge-icon svg { width: 24px; height: 24px; } .badge-title { font-size: 1.1rem; } .badge-sub { font-size: 0.85rem; } } /* ========================================================= STUNNING WHY CHOOSE US SECTION (.why-us-section) ========================================================= */ .why-us-section { padding: 85px 0; background: radial-gradient(circle at 50% 30%, rgba(39, 26, 20, 0.4) 0%, var(--void) 80%); border-top: 1px solid rgba(207, 154, 62, 0.12); border-bottom: 1px solid rgba(207, 154, 62, 0.12); } .why-us-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 45px; } .why-card { background: linear-gradient(145deg, rgba(39, 26, 20, 0.6) 0%, rgba(15, 9, 7, 0.9) 100%); border: 1.5px solid rgba(207, 154, 62, 0.22); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); position: relative; } .why-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, var(--gold-bright), transparent); opacity: 0; transition: opacity 0.35s ease; z-index: 3; } .why-card:hover { border-color: rgba(242, 201, 106, 0.55); transform: translateY(-5px); box-shadow: 0 18px 40px rgba(207, 154, 62, 0.15), 0 10px 35px rgba(0, 0, 0, 0.6); } .why-card:hover::before { opacity: 1; } .why-thumb { position: relative; width: 100%; height: 200px; overflow: hidden; } .why-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.6s ease; } .why-card:hover .why-thumb img { transform: scale(1.08); } .why-thumb::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, rgba(15, 9, 7, 0.95) 0%, transparent 100%); } .why-icon { position: absolute; bottom: 14px; left: 20px; width: 48px; height: 48px; border-radius: 12px; background: rgba(15, 9, 7, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1.5px solid rgba(242, 201, 106, 0.5); display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 2; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); } .why-icon svg { width: 24px; height: 24px; } .why-body { padding: 22px 20px 24px; display: flex; flex-direction: column; flex: 1; } .why-body h3 { font-family: var(--f-display); font-size: 1.2rem; color: var(--gold-bright); margin-bottom: 8px; line-height: 1.3; } .why-body p { font-family: var(--f-ui); font-size: 0.88rem; line-height: 1.6; color: var(--parchment); margin: 0; } @media (max-width: 992px) { .why-us-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 600px) { .why-us-grid { grid-template-columns: 1fr; gap: 18px; } .why-thumb { height: 180px; } .why-body { padding: 18px 16px 20px; } } /* ========================================================= WordPress Blog API Overlay (Compact Mini Cards + Radiant Glow) ========================================================= */ .sacred-yantra-wrap { position: relative; width: 100%; max-width: 560px; min-height: auto; background: radial-gradient(circle at center, rgba(75, 15, 15, 0.7) 0%, rgba(29, 19, 16, 0.95) 65%, var(--void) 100%); border: 1.5px solid rgba(242, 201, 106, 0.5); border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), inset 0 0 50px rgba(207, 154, 62, 0.18); overflow: hidden; padding: 22px 18px 26px; } .sacred-yantra-svg.yantra-bg-mode { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; height: 95%; max-height: 480px; opacity: 0.22; pointer-events: none; filter: drop-shadow(0 0 16px rgba(207, 154, 62, 0.35)); } .wp-blog-mini-overlay { position: relative; z-index: 2; width: 100%; margin-top: 0; margin-bottom: 0; } .wp-mini-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(18, 12, 10, 0.88); border: 1px solid rgba(242, 201, 106, 0.5); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; backdrop-filter: blur(14px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(207, 154, 62, 0.3); flex-wrap: nowrap; } .wp-mini-title { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-bright); font-family: var(--f-heading); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.02em; text-shadow: 0 0 10px rgba(242, 201, 106, 0.4); white-space: nowrap; flex-shrink: 0; } .wp-mini-title > span { white-space: nowrap; } .wp-mini-title svg { color: var(--gold-bright); flex-shrink: 0; } .wp-mini-all-link { font-size: 0.76rem; color: var(--gold); text-decoration: none; font-weight: 600; white-space: nowrap; flex-shrink: 0; transition: color 0.2s ease; } .wp-mini-all-link:hover { color: var(--gold-bright); text-decoration: underline; } .wp-mini-cards-list { display: flex; flex-direction: column; gap: 9px; } /* Stunning Floating Card with Radiant Golden Glow */ .wp-mini-card { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(26, 17, 14, 0.88) 0%, rgba(15, 10, 8, 0.92) 100%); border: 1px solid rgba(242, 201, 106, 0.35); border-radius: 10px; padding: 9px 12px; text-decoration: none; backdrop-filter: blur(14px); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(207, 154, 62, 0.2), inset 0 0 12px rgba(242, 201, 106, 0.04); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden; } .wp-mini-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, #f2c96a, #cf9a3e); box-shadow: 0 0 8px #f2c96a; opacity: 0.8; transition: opacity 0.3s ease; } .wp-mini-card:hover { background: linear-gradient(135deg, rgba(38, 24, 19, 0.95) 0%, rgba(22, 14, 11, 0.98) 100%); border-color: #f2c96a; transform: translateY(-2px) scale(1.015); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7), 0 0 26px rgba(242, 201, 106, 0.45), inset 0 0 20px rgba(242, 201, 106, 0.08); } .wp-mini-card:hover::before { opacity: 1; box-shadow: 0 0 12px #f2c96a; } .wp-mini-thumb { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; max-width: 38px !important; max-height: 38px !important; border-radius: 6px; object-fit: cover !important; flex-shrink: 0; border: 1px solid rgba(242, 201, 106, 0.5); box-shadow: 0 0 10px rgba(207, 154, 62, 0.4); display: block; } .wp-mini-thumb-placeholder { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; max-width: 38px !important; max-height: 38px !important; border-radius: 6px; flex-shrink: 0; border: 1px solid rgba(242, 201, 106, 0.4); background: rgba(207, 154, 62, 0.15); display: flex; align-items: center; justify-content: center; color: var(--gold-bright); box-shadow: 0 0 10px rgba(207, 154, 62, 0.25); } .wp-mini-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .wp-mini-post-title { font-family: var(--f-ui); font-size: 0.82rem; font-weight: 600; color: var(--ink); line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; transition: color 0.25s ease, text-shadow 0.25s ease; } .wp-mini-card:hover .wp-mini-post-title { color: #f2c96a; text-shadow: 0 0 8px rgba(242, 201, 106, 0.3); } .wp-mini-meta { font-size: 0.68rem; color: var(--parchment-dim); display: flex; align-items: center; gap: 6px; } .wp-mini-tag { color: var(--gold); font-weight: 600; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.03em; } .wp-mini-arrow { color: var(--gold); flex-shrink: 0; font-size: 0.85rem; font-weight: bold; transition: transform 0.2s ease, color 0.2s ease; } .wp-mini-card:hover .wp-mini-arrow { color: var(--gold-bright); transform: translateX(3px); } .wp-blog-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 15px; color: var(--parchment-dim); font-size: 0.8rem; gap: 10px; } .wp-blog-spinner { width: 24px; height: 24px; border: 2px solid rgba(207, 154, 62, 0.2); border-top-color: var(--gold-bright); border-radius: 50%; animation: wpSpin 0.8s linear infinite; } @keyframes wpSpin { to { transform: rotate(360deg); } }