/* ═══════════════════════════════════════════════════════════════ FOOTER LOGO — HVM Brand Integration assets/css/footer-logo.css Link in : ═══════════════════════════════════════════════════════════════ */ /* ═════════════════════════════════════════════════════════════ 1. LOGO LINK WRAPPER ═════════════════════════════════════════════════════════════ */ .footer-logo-link { display: inline-block; margin-bottom: 1.2rem; text-decoration: none; line-height: 0; } /* ═════════════════════════════════════════════════════════════ 2. LOGO IMAGE Logo sits in a white rounded card so the navy + red brand colors remain visible on the dark navy footer background. ═════════════════════════════════════════════════════════════ */ .footer-logo-img { display: block; height: 85px; width: auto; max-width: 240px; object-fit: contain; background: #ffffff; padding: 12px 18px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); transition: transform 0.3s ease, box-shadow 0.3s ease; } .footer-logo-link:hover .footer-logo-img { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); } /* ═════════════════════════════════════════════════════════════ 3. HIDE OLD TEXT LOGO (replaced by image) ═════════════════════════════════════════════════════════════ */ .footer-brand .logo-main { display: none !important; } /* ═════════════════════════════════════════════════════════════ 4. RESTYLE TAGLINE UNDER LOGO ═════════════════════════════════════════════════════════════ */ .footer-brand .logo-sub { font-family: var(--ff-body, 'DM Sans', sans-serif); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clr-red-lt, #d93a4c); line-height: 1.6; margin: 0; } /* ═════════════════════════════════════════════════════════════ 5. RESPONSIVE ═════════════════════════════════════════════════════════════ */ @media (max-width: 992px) { .footer-logo-img { height: 72px; padding: 10px 15px; } } @media (max-width: 600px) { .footer-logo-img { height: 65px; padding: 10px 14px; } } /* ═════════════════════════════════════════════════════════════ 5. for logo size ═════════════════════════════════════════════════════════════ */ .footer-logo img { width: 140px; height: auto; display: block; } .footer-desc { color: var(--clr-muted); font-size: 0.82rem; margin-top: 10px; max-width: 280px; line-height: 1.7; }