/* Country gate: the "Use Cases" footer column is Canada-only. Hidden unless the geo flag confirms Canada (geo-callassist-on on , set by navbar.js on every page that renders this footer). Default-hidden via :not() so the non-Canada majority (and no-JS crawlers) never see it; shares the callAssistVisible rule. */ html:not(.geo-callassist-on) .footer-usecases { display: none !important; } /* ============================================================ * Shared site footer — matches the HOMEPAGE footer look. * * Self-contained on purpose: it contains ONLY `.footer*` rules with the * dark theme colors baked in, so it can be dropped onto any page (homepage, * solutions, standalone) and restyle ONLY the footer. * * It deliberately EXCLUDES the global `* { margin:0 }` reset and any * page-level styles, so loading it on the solutions pages restyles ONLY the * footer, nothing else. * ============================================================ */ .footer, .footer * { box-sizing: border-box; } .footer { width: 100%; /* Pull up 1px to cover the sub-pixel gap above the footer, which otherwise reveals the light page background as a thin white "separator" line. */ margin: -1px auto 0; position: relative; z-index: 1; background: #000; color: #e0d6c8; padding: 80px 20px 40px; overflow: hidden; } .footer-container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 120px; align-items: start; padding-bottom: 60px; } .footer-brand { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; padding-left: 100px; color: #e0d6c8; } .footer-logo { position: relative; display: inline-flex; align-items: center; } .footer-logo img { width: 150px; height: auto; object-fit: contain; /* The logo asset is a dark wordmark; invert it to bright white so it reads clearly on the dark footer. Swap for a light logo asset when available. */ filter: brightness(0) invert(1); } .footer-email { display: flex; align-items: center; gap: 10px; color: #c0b6a8; text-decoration: none; font-size: 16px; transition: color 0.3s ease; justify-content: flex-start; /* Keep the icon + email address on ONE line — the long address must never wrap below the icon on narrow screens. */ white-space: nowrap; } .footer-email:hover { color: #25d366; } .footer-email svg { flex-shrink: 0; } .footer-links { display: grid; grid-template-columns: repeat(3, max-content); gap: 56px 64px; padding-left: 120px; } .footer-column { display: flex; flex-direction: column; gap: 24px; } .footer-heading { font-size: 18px; font-weight: 100; color: #fafafa; margin: 0 0 8px; } .footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; /* Pin line-height so row spacing is identical on every page — solutions pages set a larger base line-height (1.6) that the
  • s would otherwise inherit, making the footer links look more spaced there than on the homepage. */ line-height: 1.3; } .footer-link, .footer a { color: #c0b6a8; text-decoration: none; transition: color 0.3s ease; display: inline-block; } /* font-size + nowrap live on .footer-link ONLY (specificity 0,1,0) so the mobile @media overrides below can win. If font-size were on the shared `.footer-link, .footer a` rule, the `.footer a` part (0,1,1) would beat every `.footer-link` override and the mobile size would never apply. */ .footer-link { font-size: 14px; line-height: 1.3; white-space: nowrap; } /* reset.css forces `a.footer-link { min-height:44px }` on touch devices (WCAG tap target). That pins every footer option to a 44px-tall row on mobile, which is why gap/font tweaks looked like they did nothing. Opt the footer links out with a more specific selector (0,2,1 beats reset's 0,1,1). */ @media (pointer: coarse) { /* Tappable row for each footer link, text vertically centred. Kept at 32px (tighter than the 44px WCAG minimum) because the full-height rows made the stacked mobile footer links look too far apart. */ .footer a.footer-link { min-height: 32px; display: flex; align-items: center; } } .footer-link:hover, .footer a:hover, .footer-link:active, .footer a:active { color: inherit; } .footer:after { content: "Unit No. 1501, 15th Floor, Signature Tower, AIPL Joy Central, Sector - 65, Gurugram, Haryana \2013 122101 \A \00A9 2026 MySmartAssistant. Powered by AIVO Technologies Pvt Ltd. All Rights Reserved"; display: block; white-space: pre-line; text-align: center; color: #6b6b6b; font-size: 14px; margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.25); } .footer-social { display: flex; justify-content: flex-start; align-items: center; gap: 16px; margin-top: 4px; } .footer-social a img { width: 32px; height: 32px; transition: transform 0.3s ease, opacity 0.3s ease; } .footer-social a:hover img { transform: scale(1.1); opacity: 0.8; } @media (max-width: 1024px) { .footer-container { grid-template-columns: 1fr; gap: 60px; } /* Footer stacks to one column here — centre the brand block (logo + support email + social) instead of leaving the desktop 100px left padding, which pushed it to the right of the now full-width column. */ .footer-brand { padding-left: 0; align-items: center; text-align: center; } .footer-email, .footer-social { justify-content: center; } .footer-links { padding-left: 0; gap: 48px; justify-content: center; } /* Reduce option font + spacing once the footer stacks (tablet / narrow). */ .footer-column { gap: 14px; } .footer-list { gap: 6px; } .footer-link { font-size: 14px; } } @media (max-width: 768px) { .footer { padding: 60px 20px 30px; } .footer-container { gap: 50px; display: flex; flex-direction: column; text-align: center; align-items: center; } .footer-brand { align-items: center; padding-left: 0; } .footer-logo img { width: 140px; } .footer-links { grid-template-columns: 1fr; justify-items: center; gap: 30px; width: 100%; max-width: 100%; padding-left: 0; text-align: center; } .footer-column { align-items: center; } .footer-list { align-items: center; } .footer-email { font-size: 15px; justify-content: center; } .footer-social { justify-content: center; } .footer-list { gap: 4px; } .footer-link { font-size: 12px; } } @media (max-width: 480px) { .footer { padding: 50px 20px 30px; } .footer-container { gap: 40px; padding-bottom: 40px; } .footer-brand { gap: 20px; } .footer-logo img { width: 130px; } .footer-links { gap: 26px; max-width: 100%; } .footer-column { gap: 18px; padding-left: 0; } .footer-heading { font-size: 17px; margin-bottom: 6px; } .footer-list { gap: 2px; } .footer-link { font-size: 11px; } .footer:after { font-size: 12px; margin-top: 30px; padding-top: 20px; } }