:root { --navy: #080b27; --navy-light: #10143d; --blue: #3156d3; --blue-light: #8ea7ff; --white: #ffffff; --black: #101218; --text: #182033; --muted: #667085; --light-bg: #f7f8fb; --border: #e5e7eb; --container: 1200px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "DM Sans", sans-serif; color: var(--text); background: var(--white); line-height: 1.5; overflow-x: hidden; } img { max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } .container { width: min(var(--container), calc(100% - 64px)); margin: 0 auto; } /* ================= HEADER ================= */ .header { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; color: white; } .nav-container { height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 30px; } .logo { display: flex; align-items: center; gap: 10px; font-family: "Manrope", sans-serif; font-weight: 600; white-space: nowrap; } .logo-mark { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.35); border-radius: 10px; font-size: 17px; font-weight: 800; } .logo-text { font-size: 15px; letter-spacing: 0.5px; } .logo-text strong { font-weight: 800; } .navigation { display: flex; align-items: center; gap: 34px; } .navigation a { font-size: 14px; color: rgba(255,255,255,0.75); transition: color 0.25s ease; } .navigation a:hover { color: white; } .nav-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border: 1px solid rgba(255,255,255,0.25); border-radius: 100px; font-size: 14px; font-weight: 600; transition: 0.25s ease; } .nav-button:hover { background: white; color: var(--navy); border-color: white; } .menu-button { display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,0.25); background: transparent; color: white; border-radius: 10px; font-size: 20px; cursor: pointer; } /* ================= HERO ================= */ .hero { min-height: 100vh; position: relative; isolation: isolate; background: var(--navy); color: white; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .hero-background { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; background-image: linear-gradient( 90deg, rgba(8,11,39,0.98) 0%, rgba(8,11,39,0.91) 28%, rgba(8,11,39,0.58) 52%, rgba(8,11,39,0.30) 75%, rgba(8,11,39,0.20) 100% ), linear-gradient( 180deg, rgba(8,11,39,0.30), rgba(8,11,39,0.20) 50%, rgba(8,11,39,0.75) 100% ), url("images/outdoor-ads/garden-ads/garden-ad-01.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; animation: heroVisualIn 1.2s ease-out both; } .hero-background::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 78% 35%, rgba(142,167,255,0.18), transparent 28% ); pointer-events: none; } .hero-background::after { content: ""; position: absolute; width: 600px; height: 600px; right: -170px; top: 100px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 0 0 80px rgba(255,255,255,0.025), 0 0 0 160px rgba(255,255,255,0.018); } /* HERO CONTENT SPACING FIX Extra bottom space keeps the hero buttons separated from the bottom statistics bar. */ .hero-content { position: relative; padding-top: 80px; padding-bottom: 125px; z-index: 5; animation: heroContentIn 0.9s ease-out both; } .hero-label { display: inline-flex; margin-bottom: 28px; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--blue-light); } .hero h1 { max-width: 900px; font-family: "Manrope", sans-serif; font-size: clamp(52px, 7vw, 92px); line-height: 0.95; letter-spacing: -4px; font-weight: 800; margin-bottom: 30px; } .hero h1 span { color: var(--blue-light); } .hero-content > p { max-width: 610px; color: rgba(255,255,255,0.78); font-size: 18px; line-height: 1.7; margin-bottom: 38px; } .hero-buttons { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; z-index: 10; } .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 58px; padding: 0 28px; border-radius: 100px; background: white; color: var(--navy); font-size: 14px; font-weight: 700; box-shadow: 0 15px 40px rgba(0,0,0,0.20); transition: 0.25s ease; } .primary-button span { font-size: 20px; } .primary-button:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,0.28); } .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 26px; border: 1px solid rgba(255,255,255,0.35); border-radius: 100px; color: white; font-size: 14px; font-weight: 600; background: rgba(255,255,255,0.04); transition: 0.25s ease; } .secondary-button:hover { background: white; color: var(--navy); } .hero-bottom { position: absolute; bottom: 0; left: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,0.16); z-index: 4; } .hero-bottom > div { min-height: 105px; padding: 22px 32px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(255,255,255,0.16); } .hero-bottom > div:last-child { border-right: 0; } .hero-bottom strong { font-family: "Manrope", sans-serif; font-size: 20px; font-weight: 800; margin-bottom: 5px; } .hero-bottom span { font-size: 12px; color: rgba(255,255,255,0.62); } /* ================= ANIMATION ================= */ @keyframes heroContentIn { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroVisualIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } } /* ================= GENERAL SECTIONS ================= */ .section { padding: 120px 0; } .section-label { display: block; margin-bottom: 18px; font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--blue); } .section h2 { font-family: "Manrope", sans-serif; font-size: clamp(42px, 5vw, 68px); line-height: 1; letter-spacing: -3px; color: var(--navy); } .section-heading { display: grid; grid-template-columns: 1fr 0.6fr; gap: 60px; align-items: end; margin-bottom: 70px; } .section-heading > p { color: var(--muted); font-size: 16px; line-height: 1.8; max-width: 430px; } /* ================= ABOUT ================= */ .about { background: white; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; } .about-text { padding-top: 40px; } .about-text p { max-width: 550px; color: var(--muted); font-size: 18px; line-height: 1.8; margin-bottom: 28px; } .about-text strong { color: var(--navy); } .text-link { display: inline-flex; font-size: 14px; font-weight: 700; color: var(--blue); transition: 0.25s ease; } .text-link:hover { transform: translateX(5px); } /* ================= BUSINESSES ================= */ .businesses { background: var(--light-bg); } .business-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .business-card { position: relative; padding: 45px; min-height: 430px; background: white; border: 1px solid var(--border); border-radius: 22px; overflow: hidden; transition: 0.35s ease; } .business-card:hover { transform: translateY(-8px); box-shadow: 0 25px 60px rgba(8,11,39,0.10); border-color: rgba(49,86,211,0.25); } .business-card.featured { background: var(--navy); color: white; } .business-card.featured h3 { color: white; } .business-card.featured p { color: rgba(255,255,255,0.62); } .card-number { position: absolute; top: 35px; right: 38px; font-size: 12px; font-weight: 800; color: var(--blue); } .featured .card-number { color: var(--blue-light); } .business-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; margin-bottom: 35px; border-radius: 14px; background: #eef2ff; color: var(--blue); font-size: 24px; } .featured .business-icon { background: rgba(255,255,255,0.08); color: var(--blue-light); } .business-card h3 { font-family: "Manrope", sans-serif; font-size: 30px; letter-spacing: -1px; color: var(--navy); margin-bottom: 16px; } .business-card p { max-width: 460px; color: var(--muted); font-size: 15px; line-height: 1.7; margin-bottom: 24px; } .business-card ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 28px; } .business-card li { font-size: 12px; color: var(--muted); } .featured li { color: rgba(255,255,255,0.58); } .business-card li::before { content: "•"; margin-right: 7px; color: var(--blue); } .card-link { font-size: 13px; font-weight: 700; color: var(--blue); } .featured .card-link { color: var(--blue-light); } /* ================= PROJECTS CARD HEIGHT ================= */ #projects .business-card { min-height: 360px; } /* ================= OUTDOOR ADS ================= */ .outdoor-showcase { background: #f7f8fb; width: 100%; overflow: hidden; } .outdoor-showcase .container { width: min(1200px, calc(100% - 64px)); margin: 0 auto; } .ad-category { display: grid !important; grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr) !important; gap: 60px !important; align-items: center !important; width: 100%; padding: 75px 0 !important; border-top: 1px solid var(--border); } .ad-category.reverse { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr) !important; } .ad-category.reverse .ad-category-info { order: 2; } .ad-category.reverse .ad-gallery { order: 1; } .ad-category-info { width: 100%; min-width: 0; } .ad-number { display: block; margin-bottom: 22px; font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--blue); } .ad-category-info h3 { font-family: "Manrope", sans-serif; font-size: clamp(38px, 4vw, 58px); line-height: 0.98; letter-spacing: -3px; color: var(--navy); margin-bottom: 22px; } .ad-category-info p { max-width: 400px; color: var(--muted); font-size: 16px; line-height: 1.75; margin-bottom: 25px; } /* ================= GALLERY ================= */ .ad-gallery { display: grid !important; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr) !important; grid-template-rows: 230px 230px !important; gap: 14px !important; width: 100% !important; height: 474px !important; min-height: 0 !important; overflow: hidden; } .ad-image { position: relative !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; border-radius: 18px; background: #dce4ff; } .ad-image.main-image { grid-row: span 2 !important; height: 474px !important; } .ad-image img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; padding: 0 !important; transition: transform 0.6s ease; } .ad-image:hover img { transform: scale(1.05); } .ad-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, transparent 55%, rgba(8,11,39,0.20) ); } /* ================= OUTDOOR CTA ================= */ .outdoor-cta { margin-top: 45px; padding: 55px; border-radius: 25px; background: var(--navy); color: white; display: flex; align-items: center; justify-content: space-between; gap: 40px; } .outdoor-cta .section-label { color: var(--blue-light); margin-bottom: 12px; } .outdoor-cta h3 { max-width: 700px; font-family: "Manrope", sans-serif; font-size: clamp(30px, 4vw, 50px); line-height: 1.05; letter-spacing: -2px; } .outdoor-cta h3 span { color: var(--blue-light); } /* ================= CLIENTS ================= */ /* Clients uses less top padding than the normal sections so the navigation does not open with excessive empty white space. */ .clients { background: white; padding-top: 45px; } .center { text-align: center; } .clients h2 { margin-bottom: 70px; } .client-list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .client-list .client-card { min-height: 170px; display: flex; align-items: center; justify-content: center; padding: 28px; background: white; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .client-list .client-card img { width: 200px; height: 100px; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; display: block; transition: transform 0.3s ease; } .client-list .client-card:hover { position: relative; z-index: 2; transform: translateY(-4px); box-shadow: 0 18px 40px rgba(8,11,39,0.08); } .client-list .client-card:hover img { transform: scale(1.04); } /* ================= CONTACT ================= */ /* CONTACT SECTION Matches the current index.html: .contact-section .contact-content .contact-actions .contact-button .contact-button-label .contact-button-value .whatsapp */ .contact-section { padding: 120px 0; background: var(--navy); color: white; position: relative; overflow: hidden; } .contact-section::before { content: ""; position: absolute; width: 600px; height: 600px; right: -220px; top: -220px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 0 0 80px rgba(255,255,255,0.018), 0 0 0 160px rgba(255,255,255,0.012); pointer-events: none; } .contact-section .container { position: relative; z-index: 2; } .contact-content { display: grid; grid-template-columns: 1fr 0.65fr; gap: 90px; align-items: center; padding: 70px; border: 1px solid rgba(255,255,255,0.12); border-radius: 28px; background: radial-gradient( circle at 85% 20%, rgba(142,167,255,0.12), transparent 32% ), rgba(255,255,255,0.025); box-shadow: 0 30px 80px rgba(0,0,0,0.18); } .contact-content > div:first-child { min-width: 0; } .contact-section .section-label { display: block; margin-bottom: 20px; color: var(--blue-light); } .contact-section h2 { font-family: "Manrope", sans-serif; font-size: clamp(48px, 6vw, 82px); line-height: 0.95; letter-spacing: -4px; color: white; margin-bottom: 30px; } .contact-section p { max-width: 560px; color: rgba(255,255,255,0.62); font-size: 17px; line-height: 1.75; margin: 0; } .contact-actions { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .contact-button { min-height: 78px; display: flex; flex-direction: column; justify-content: center; padding: 16px 24px; border: 1px solid rgba(255,255,255,0.18); border-radius: 16px; color: white; background: rgba(255,255,255,0.035); transition: *background* 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .contact-button:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.35); transform: translateY(-3px); } .contact-button-label { display: block; margin-bottom: 5px; color: var(--blue-light); font-size: 10px; font-weight: 800; letter-spacing: 1.8px; } .contact-button-value { display: block; font-family: "Manrope", sans-serif; font-size: 17px; font-weight: 700; color: white; } /* ================= WHATSAPP ================= */ .contact-button.whatsapp { background: white; border-color: white; color: var(--navy); } .contact-button.whatsapp:hover { background: #f2f4ff; border-color: #f2f4ff; } .contact-button.whatsapp .contact-button-label { color: var(--blue); } .contact-button.whatsapp .contact-button-value { color: var(--navy); } /* ================= FOOTER ================= */ .footer { background: #05071c; color: white; padding-top: 80px; } .footer-top { display: grid; grid-template-columns: 1fr 0.7fr; gap: 80px; padding-bottom: 70px; } .footer-brand .logo { margin-bottom: 20px; } .footer-brand p { max-width: 300px; color: rgba(255,255,255,0.45); font-size: 14px; } .footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .footer-links h4 { margin-bottom: 18px; font-size: 13px; } .footer-links a { display: block; margin-bottom: 10px; font-size: 13px; color: rgba(255,255,255,0.45); transition: color 0.25s ease; } .footer-links a:hover { color: white; } .footer-bottom { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.35); font-size: 12px; } /* ================= TABLET ================= */ @media (max-width: 1000px) { .navigation { gap: 20px; } .nav-button { display: none; } .hero { min-height: 850px; } .hero h1 { font-size: clamp(54px, 8vw, 82px); } .about-grid { gap: 50px; } .section-heading { grid-template-columns: 1fr 0.8fr; gap: 35px; } .business-card { padding: 35px; } } /* ================= MOBILE ================= */ @media (max-width: 900px) { .container { width: calc(100% - 40px); } .navigation { display: none; } .menu-button { display: flex; align-items: center; justify-content: center; } .hero { min-height: 850px; } .hero-background { background-image: linear-gradient( 180deg, rgba(8,11,39,0.38), rgba(8,11,39,0.55) 45%, rgba(8,11,39,0.94) 88% ), url("images/outdoor-ads/garden-ads/garden-ad-01.jpg"); background-position: 62% center; } .hero-content { padding-top: 100px; padding-bottom: 125px; } .hero h1 { max-width: 700px; font-size: clamp(50px, 11vw, 78px); letter-spacing: -3px; } .hero-bottom { grid-template-columns: repeat(3, 1fr); } .hero-bottom > div { padding: 18px; } .section { padding: 90px 0; } .section-heading { grid-template-columns: 1fr; gap: 25px; margin-bottom: 50px; } .about-grid { grid-template-columns: 1fr; gap: 20px; } .about-text { padding-top: 0; } .business-grid { grid-template-columns: 1fr; } .ad-category, .ad-category.reverse { grid-template-columns: 1fr !important; gap: 35px !important; padding: 55px 0 !important; } .ad-category.reverse .ad-category-info { order: 1; } .ad-category.reverse .ad-gallery { order: 2; } .ad-gallery { width: 100% !important; height: 430px !important; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important; grid-template-rows: 210px 210px !important; } .ad-image.main-image { height: 430px !important; } .outdoor-cta { flex-direction: column; align-items: flex-start; padding: 40px 30px; } /* CLIENTS - TABLET / MOBILE */ .client-list { grid-template-columns: repeat(2, 1fr); } /* CONTACT - TABLET / MOBILE */ .contact-section { padding: 90px 0; } .contact-content { grid-template-columns: 1fr; gap: 50px; padding: 50px 40px; } .contact-section h2 { font-size: clamp(48px, 10vw, 72px); } /* FOOTER - TABLET / MOBILE */ .footer-top { grid-template-columns: 1fr; gap: 50px; } } /* ================= SMALL MOBILE ================= */ @media (max-width: 600px) { .container { width: calc(100% - 28px); } .nav-container { height: 75px; } .logo-mark { width: 34px; height: 34px; } .logo-text { font-size: 13px; } .hero { min-height: 820px; } .hero-background { background-position: 62% center; } .hero-content { padding-top: 100px; padding-bottom: 120px; } .hero-label { margin-bottom: 22px; } .hero h1 { font-size: 53px; line-height: 0.98; letter-spacing: -2.8px; margin-bottom: 25px; } .hero-content > p { font-size: 15px; line-height: 1.65; margin-bottom: 28px; } .hero-buttons { flex-direction: column; align-items: stretch; } .primary-button, .secondary-button { width: 100%; } .hero-bottom { grid-template-columns: repeat(3, 1fr); } .hero-bottom > div { min-height: 90px; padding: 12px 10px; } .hero-bottom strong { font-size: 14px; } .hero-bottom span { font-size: 9px; line-height: 1.3; } .section { padding: 75px 0; } .section h2 { font-size: 43px; letter-spacing: -2px; } .business-card { padding: 30px; min-height: auto; } .business-card h3 { font-size: 26px; } .business-card ul { grid-template-columns: 1fr; } .outdoor-showcase .container { width: calc(100% - 28px); } .ad-category, .ad-category.reverse { gap: 28px !important; padding: 50px 0 !important; } .ad-category-info h3 { font-size: 42px; letter-spacing: -2px; } .ad-category-info p { font-size: 15px; } .ad-gallery { height: 420px !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: 250px 155px !important; gap: 10px !important; } .ad-image.main-image { grid-column: span 2 !important; grid-row: auto !important; height: 250px !important; } .ad-image:not(.main-image) { height: 155px !important; } .outdoor-cta { margin-top: 25px; padding: 35px 25px; border-radius: 20px; } .outdoor-cta h3 { font-size: 32px; } .outdoor-cta .primary-button { width: 100%; } /* CLIENTS - MOBILE */ .clients { padding-top: 55px; } .client-list { grid-template-columns: 1fr 1fr; } .client-list .client-card { min-height: 140px; padding: 15px; } .client-list .client-card img { width: 200px; height: 100px; max-width: 100%; } /* PROJECTS - MOBILE */ #projects .business-card { min-height: auto; } /* CONTACT - MOBILE */ .contact-section { padding: 75px 0; } .contact-content { gap: 40px; padding: 40px 25px; border-radius: 22px; } .contact-section h2 { font-size: 48px; letter-spacing: -3px; } .contact-section p { font-size: 15px; line-height: 1.65; } .contact-button { min-height: 72px; padding: 14px 18px; } .contact-button-value { font-size: 15px; } /* FOOTER - MOBILE */ .footer { padding-top: 60px; } .footer-links { grid-template-columns: repeat(2, 1fr); gap: 25px; } .footer-bottom { min-height: 100px; flex-direction: column; align-items: flex-start; justify-content: center; } } /* ================= EXTRA SMALL ================= */ @media (max-width: 380px) { .hero h1 { font-size: 47px; } .hero-bottom strong { font-size: 12px; } .hero-bottom span { font-size: 8px; } .ad-category-info h3 { font-size: 38px; } .client-list .client-card { min-height: 130px; padding: 10px; } .client-list .client-card img { width: 180px; height: 90px; } /* CONTACT - EXTRA SMALL */ .contact-content { padding: 35px 20px; } .contact-section h2 { font-size: 43px; letter-spacing: -2.5px; } .contact-button-value { font-size: 14px; } } /* ===================================================== NGB BUSINESSES — MODERN INTERACTIVE DESIGN Scoped only to the Businesses section. Existing sections and project cards remain unchanged. ===================================================== */ .businesses .section-heading h2 .business-heading-accent { color: var(--blue); } .businesses .business-grid { gap: 20px; } .businesses .business-card { min-height: 560px; padding: 28px 32px 34px; display: flex; flex-direction: column; isolation: isolate; background: #ffffff; border: 1px solid #dfe5f2; border-radius: 22px; box-shadow: 0 8px 28px rgba(8, 11, 39, 0.025); transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, transform 0.45s ease, color 0.45s ease; } .businesses .business-card::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: 0; background: radial-gradient(circle at 78% 20%, rgba(142, 167, 255, 0.23), transparent 28%), linear-gradient(135deg, #123baf 0%, #071b68 100%); transition: opacity 0.45s ease; } .businesses .business-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35; background-image: linear-gradient(rgba(49, 86, 211, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(49, 86, 211, 0.055) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, black, transparent 80%); transition: opacity 0.45s ease; } .businesses .business-card:hover { transform: translateY(-7px); border-color: #3156d3; box-shadow: 0 26px 65px rgba(8, 36, 125, 0.22); color: #ffffff; } .businesses .business-card:hover::before { opacity: 1; } .businesses .business-card:hover::after { opacity: 0.18; } .businesses .business-icon { position: relative; z-index: 4; flex: 0 0 auto; width: 50px; height: 50px; margin-bottom: 0; border: 1px solid rgba(49, 86, 211, 0.08); transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.4s ease; } .businesses .business-card:hover .business-icon { background: rgba(255, 255, 255, 0.12); color: #ffffff; border-color: rgba(255, 255, 255, 0.22); transform: translateY(-2px); } .businesses .business-card h3, .businesses .business-card p, .businesses .business-card ul, .businesses .business-card .card-link { position: relative; z-index: 4; transition: color 0.4s ease; } .businesses .business-card h3 { margin-top: 18px; margin-bottom: 13px; font-size: clamp(25px, 2.25vw, 32px); } .businesses .business-card p { max-width: 520px; margin-bottom: 22px; } .businesses .business-card ul { margin-top: auto; margin-bottom: 27px; padding-top: 10px; } .businesses .business-card:hover h3 { color: #ffffff; } .businesses .business-card:hover p, .businesses .business-card:hover li { color: rgba(255, 255, 255, 0.76); } .businesses .business-card:hover li::before { color: #b8c8ff; } .businesses .business-card:hover .card-link { color: #ffffff; } .businesses .business-card .card-link { display: inline-flex; align-items: center; width: fit-content; margin-top: auto; } /* Visual animation area inside each card. */ .business-art { position: relative; z-index: 1; width: 100%; height: 190px; margin-top: -4px; margin-bottom: 3px; overflow: hidden; border-radius: 16px; background: linear-gradient(180deg, rgba(246, 249, 255, 0.9), rgba(255, 255, 255, 0.25)); transition: background 0.45s ease, opacity 0.45s ease; } .business-art::before, .business-art::after { content: ""; position: absolute; pointer-events: none; } .business-art::before { inset: 0; background: radial-gradient(circle at 50% 45%, rgba(49, 86, 211, 0.14), transparent 36%), linear-gradient(transparent 96%, rgba(49, 86, 211, 0.15) 97%); background-size: auto, 100% 24px; } .business-art::after { width: 150%; height: 1px; left: -25%; top: 52%; background: linear-gradient(90deg, transparent, rgba(49, 86, 211, 0.4), transparent); animation: businessSweep 5s linear infinite; } .business-card:hover .business-art { background: rgba(4, 22, 87, 0.34); } .business-card:hover .business-art::before { background: radial-gradient(circle at 50% 45%, rgba(142, 167, 255, 0.22), transparent 38%), linear-gradient(transparent 96%, rgba(255, 255, 255, 0.12) 97%); background-size: auto, 100% 24px; } .art-label { position: absolute; top: 18px; right: 8px; z-index: 3; color: #7381a8; font-size: 9px; line-height: 2; letter-spacing: 3px; text-align: left; } .business-card:hover .art-label { color: rgba(255, 255, 255, 0.7); } .art-glow { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: rgba(49, 86, 211, 0.14); filter: blur(15px); animation: businessPulse 4s ease-in-out infinite; } .building { position: absolute; bottom: 22px; width: 42px; border: 1px solid rgba(49, 86, 211, 0.2); border-bottom: 0; background: linear-gradient(180deg, rgba(142, 167, 255, 0.5), rgba(49, 86, 211, 0.05)); animation: buildingFloat 5s ease-in-out infinite; } .building:nth-of-type(1) { left: 10%; height: 65px; animation-delay: 0.1s; } .building:nth-of-type(2) { left: 23%; height: 95px; animation-delay: 0.6s; } .building:nth-of-type(3) { left: 37%; height: 125px; animation-delay: 1.1s; } .building:nth-of-type(4) { left: 51%; height: 150px; animation-delay: 1.6s; } .building::after { content: ""; position: absolute; inset: 10px 8px; background: repeating-linear-gradient(180deg, rgba(49, 86, 211, 0.32) 0 2px, transparent 2px 12px); } .art-line { position: absolute; display: block; height: 2px; transform-origin: left center; background: linear-gradient(90deg, transparent, #3156d3, #8ea7ff); animation: artLineMove 4s ease-in-out infinite; } .growth-line { left: 8%; top: 122px; width: 70%; transform: rotate(-24deg); } .core { position: absolute; left: 50%; top: 48%; width: 62px; height: 62px; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid rgba(49, 86, 211, 0.55); background: linear-gradient(135deg, rgba(142, 167, 255, 0.55), rgba(49, 86, 211, 0.1)); box-shadow: 0 0 35px rgba(49, 86, 211, 0.2); animation: coreRotate 12s linear infinite; } .core::after { content: ""; position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(-45deg); color: #3156d3; font-size: 16px; font-weight: 800; } .node { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #3156d3; box-shadow: 0 0 0 5px rgba(49, 86, 211, 0.08), 0 0 20px rgba(49, 86, 211, 0.35); animation: nodePulse 2.8s ease-in-out infinite; } .node:nth-of-type(1) { left: 17%; top: 45%; } .node:nth-of-type(2) { left: 29%; top: 20%; animation-delay: .7s; } .node:nth-of-type(3) { right: 24%; top: 25%; animation-delay: 1.2s; } .node:nth-of-type(4) { right: 13%; bottom: 22%; animation-delay: 1.8s; } .billboard { position: absolute; left: 22%; top: 45px; width: 145px; height: 75px; border: 5px solid #7381a8; border-radius: 4px; background: linear-gradient(135deg, #ffffff, #dbe5ff); box-shadow: 0 12px 0 -8px #7381a8; transform: perspective(300px) rotateY(-15deg) rotateZ(-4deg); animation: billboardFloat 5s ease-in-out infinite; } .billboard::before { content: "YOUR\A BRAND\A HERE"; white-space: pre; position: absolute; inset: 0; display: grid; place-items: center; color: #3156d3; font-size: 13px; font-weight: 800; line-height: 1.05; text-align: center; } .billboard::after { content: ""; position: absolute; left: 50%; top: 100%; width: 6px; height: 58px; background: #7381a8; transform: translateX(-50%); } .light-trail { position: absolute; left: -10%; bottom: 25px; width: 120%; height: 3px; background: linear-gradient(90deg, transparent, #8ea7ff, #3156d3, transparent); box-shadow: 0 12px 0 rgba(49, 86, 211, 0.25), 0 -12px 0 rgba(142, 167, 255, 0.25); transform: rotate(-5deg); animation: lightTrailMove 3.5s linear infinite; } .road { position: absolute; left: 5%; right: 5%; bottom: 5px; height: 118px; clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%); background: linear-gradient(165deg, #dbe5ff, #8ea7ff 45%, #3156d3); opacity: 0.65; } .road-line { position: absolute; left: 50%; bottom: 15px; width: 5px; height: 88px; transform: translateX(-50%) perspective(100px) rotateX(20deg); background: repeating-linear-gradient(180deg, #ffffff 0 16px, transparent 16px 30px); animation: roadMove 2.5s linear infinite; } .sign { position: absolute; right: 22%; top: 26px; width: 52px; height: 52px; border: 5px solid #3156d3; border-radius: 8px; background: #ffffff; transform: rotate(45deg); animation: signFloat 4s ease-in-out infinite; } .sign::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: #3156d3; font-size: 28px; font-weight: 800; transform: rotate(-45deg); } .business-card:hover .building, .business-card:hover .billboard, .business-card:hover .sign, .business-card:hover .core { filter: brightness(1.25); } .business-card:hover .road { background: linear-gradient(165deg, rgba(255,255,255,.35), #3156d3 45%, #071b68); } .business-card:hover .node, .business-card:hover .art-line, .business-card:hover .light-trail { background: #ffffff; } @keyframes businessSweep { 0% { transform: translateX(-15%); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(15%); opacity: 0; } } @keyframes businessPulse { 0%, 100% { transform: scale(0.9); opacity: .55; } 50% { transform: scale(1.2); opacity: 1; } } @keyframes buildingFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes artLineMove { 0%, 100% { opacity: .35; filter: blur(.2px); } 50% { opacity: 1; filter: blur(0); } } @keyframes coreRotate { from { transform: translate(-50%, -50%) rotate(45deg); } to { transform: translate(-50%, -50%) rotate(405deg); } } @keyframes nodePulse { 0%, 100% { transform: scale(.8); opacity: .55; } 50% { transform: scale(1.45); opacity: 1; } } @keyframes billboardFloat { 0%, 100% { transform: perspective(300px) rotateY(-15deg) rotateZ(-4deg) translateY(0); } 50% { transform: perspective(300px) rotateY(-15deg) rotateZ(-4deg) translateY(-5px); } } @keyframes lightTrailMove { from { transform: translateX(-8%) rotate(-5deg); } to { transform: translateX(8%) rotate(-5deg); } } @keyframes roadMove { from { background-position: 0 0; } to { background-position: 0 30px; } } @keyframes signFloat { 0%, 100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(45deg) translateY(-5px); } } @media (prefers-reduced-motion: reduce) { .businesses .business-card, .business-art::after, .art-glow, .building, .art-line, .core, .node, .billboard, .light-trail, .road-line, .sign { animation: none !important; } } @media (max-width: 900px) { .businesses .business-card { min-height: 520px; } .business-art { height: 175px; } } @media (max-width: 600px) { .businesses .business-card { min-height: 510px; padding: 24px 24px 28px; } .business-art { height: 160px; margin-top: 0; } .businesses .business-card h3 { font-size: 26px; } .art-label { right: 2px; font-size: 8px; letter-spacing: 2px; } .billboard { left: 14%; transform: perspective(300px) rotateY(-15deg) rotateZ(-4deg) scale(.88); } } /* ================= FINAL LAYOUT SAFETY FIX ================= */ html, body { width: 100%; min-width: 0; margin: 0; } .container { margin-left: auto !important; margin-right: auto !important; } .section-heading > div, .about-text, .business-card { min-width: 0; } .section-heading h2 { text-align: left; } /* ========================================================= FINAL ALIGNMENT REPAIR Fixes section content appearing only on the right side. Keep this block at the very end of style.css. ========================================================= */ .section-heading { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr) !important; align-items: end !important; gap: 60px !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .section-heading > div { grid-column: 1 !important; width: 100% !important; min-width: 0 !important; justify-self: start !important; margin-left: 0 !important; margin-right: 0 !important; } .section-heading > p { grid-column: 2 !important; width: 100% !important; min-width: 0 !important; justify-self: end !important; margin-left: 0 !important; margin-right: 0 !important; } .about-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 100px !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .about-grid > .about-text { width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .about-grid > .about-text:first-child { grid-column: 1 !important; } .about-grid > .about-text:last-child { grid-column: 2 !important; } @media (max-width: 900px) { .section-heading { grid-template-columns: minmax(0, 1fr) !important; gap: 25px !important; } .section-heading > div, .section-heading > p { grid-column: 1 !important; width: 100% !important; } .about-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; } .about-grid > .about-text:first-child, .about-grid > .about-text:last-child { grid-column: 1 !important; } } /* ========================================================= FINAL CONTACT + MOBILE INTERACTION FIX Added without changing the existing site design. ========================================================= */ .contact-section { padding: 70px 0 !important; min-height: auto; display: flex; align-items: center; } .contact-section .container { width: min(1200px, calc(100% - 64px)); margin-left: auto !important; margin-right: auto !important; } .contact-content { padding: 52px 60px !important; margin: 0 auto; align-items: center; } .contact-actions { gap: 14px; } .contact-button { position: relative; overflow: hidden; min-height: 76px; background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)) !important; border: 1px solid rgba(255,255,255,0.17) !important; color: white; transform: translateY(0); transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease; } .contact-button::before { content: ""; position: absolute; top: -80%; left: -55%; width: 45%; height: 260%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); transform: rotate(18deg) translateX(-180%); opacity: 0; pointer-events: none; } .contact-button::after { content: ""; position: absolute; width: 150px; height: 150px; right: -80px; bottom: -100px; border-radius: 50%; background: rgba(49,86,211,0.22); filter: blur(20px); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .contact-button:hover { transform: translateY(-4px); background: linear-gradient(135deg, rgba(49,86,211,0.42), rgba(49,86,211,0.16)) !important; border-color: rgba(142,167,255,0.65) !important; box-shadow: 0 18px 45px rgba(0,0,0,0.22), 0 0 35px rgba(49,86,211,0.14); } .contact-button:hover::before { opacity: 1; animation: contactLightSweep 1.2s ease-out forwards; } .contact-button:hover::after { opacity: 1; } .contact-button:nth-child(1):hover { background: linear-gradient(135deg, rgba(49,86,211,0.48), rgba(49,86,211,0.16)) !important; border-color: rgba(142,167,255,0.75) !important; box-shadow: 0 18px 45px rgba(49,86,211,0.20); } .contact-button:nth-child(2):hover { background: linear-gradient(135deg, rgba(74,105,220,0.48), rgba(74,105,220,0.15)) !important; border-color: rgba(150,170,255,0.75) !important; box-shadow: 0 18px 45px rgba(74,105,220,0.20); } .contact-button:nth-child(3):hover { background: linear-gradient(135deg, rgba(32,150,105,0.48), rgba(32,150,105,0.15)) !important; border-color: rgba(85,205,160,0.70) !important; box-shadow: 0 18px 45px rgba(32,150,105,0.20); } .contact-button:nth-child(4):hover { background: linear-gradient(135deg, rgba(100,80,190,0.48), rgba(100,80,190,0.15)) !important; border-color: rgba(170,155,255,0.70) !important; box-shadow: 0 18px 45px rgba(100,80,190,0.20); } .contact-button.whatsapp { background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)) !important; border-color: rgba(255,255,255,0.17) !important; color: white !important; } .contact-button.whatsapp .contact-button-label { color: var(--blue-light) !important; } .contact-button.whatsapp .contact-button-value { color: white !important; } .contact-button:hover .contact-button-value { transform: translateX(4px); } .contact-button-value { position: relative; z-index: 2; transition: transform 0.3s ease, color 0.3s ease; } .contact-button-label { position: relative; z-index: 2; transition: color 0.3s ease; } .contact-button:nth-child(3):hover .contact-button-label { color: #75e0b6 !important; } .contact-button:nth-child(3):hover .contact-button-value { color: white !important; } @keyframes contactLightSweep { 0% { transform: rotate(18deg) translateX(-180%); } 100% { transform: rotate(18deg) translateX(500%); } } /* ========================================================= MOBILE BUSINESS CARD ACTIVE STATE The existing desktop hover design remains unchanged. JavaScript can add .is-active on touch devices. ========================================================= */ .businesses .business-card.is-active { transform: translateY(-4px); border-color: rgba(142,167,255,0.65); box-shadow: 0 22px 55px rgba(8,36,125,0.20); } .businesses .business-card.is-active::before { opacity: 1; } .businesses .business-card.is-active::after { opacity: 0.18; } .businesses .business-card.is-active .business-icon { background: rgba(255,255,255,0.12); color: #ffffff; border-color: rgba(255,255,255,0.22); } .businesses .business-card.is-active .business-art { background: rgba(4,22,87,0.34); } .businesses .business-card.is-active h3 { color: #ffffff; } .businesses .business-card.is-active p, .businesses .business-card.is-active li { color: rgba(255,255,255,0.76); } .businesses .business-card.is-active li::before { color: #b8c8ff; } .businesses .business-card.is-active .card-link { color: #ffffff; } .businesses .business-card.is-active .building, .businesses .business-card.is-active .billboard, .businesses .business-card.is-active .sign, .businesses .business-card.is-active .core { filter: brightness(1.25); } .businesses .business-card.is-active .road { background: linear-gradient(165deg, rgba(255,255,255,.35), #3156d3 45%, #071b68); } .businesses .business-card.is-active .node, .businesses .business-card.is-active .art-line, .businesses .business-card.is-active .light-trail { background: #ffffff; } @media (max-width: 900px) { .contact-section { padding: 55px 0 !important; } .contact-section .container { width: calc(100% - 40px); } .contact-content { padding: 42px 35px !important; gap: 38px; align-items: stretch; } .contact-actions { width: 100%; } .contact-button { min-height: 74px; } .businesses .business-card.is-active { transform: translateY(-3px); } .contact-button.is-active { transform: translateY(-3px); background: linear-gradient(135deg, rgba(49,86,211,0.42), rgba(49,86,211,0.15)) !important; border-color: rgba(142,167,255,0.65) !important; box-shadow: 0 16px 40px rgba(49,86,211,0.18); } .contact-button:nth-child(3).is-active { background: linear-gradient(135deg, rgba(32,150,105,0.48), rgba(32,150,105,0.15)) !important; border-color: rgba(85,205,160,0.70) !important; box-shadow: 0 16px 40px rgba(32,150,105,0.18); } .contact-button:nth-child(4).is-active { background: linear-gradient(135deg, rgba(100,80,190,0.48), rgba(100,80,190,0.15)) !important; border-color: rgba(170,155,255,0.70) !important; } .contact-button.is-active::before { opacity: 1; animation: contactLightSweep 1.2s ease-out forwards; } .contact-button.is-active::after { opacity: 1; } .contact-button.is-active .contact-button-value { transform: translateX(4px); } } @media (max-width: 600px) { .contact-section { padding: 42px 0 !important; } .contact-section .container { width: calc(100% - 28px); } .contact-content { padding: 35px 22px !important; gap: 30px; border-radius: 22px; } .contact-actions { gap: 11px; } .contact-button { min-height: 70px; padding: 14px 18px; border-radius: 14px; } .contact-button-label { font-size: 9px; } .contact-button-value { font-size: 15px; } } @media (max-width: 380px) { .contact-content { padding: 30px 18px !important; } .contact-button { min-height: 67px; padding: 13px 15px; } .contact-button-value { font-size: 14px; } } /* ========================================================= NGB CONTACT BUTTONS FINAL ICON POSITION + ANIMATION FIX ========================================================= */ /* Main contact card */ .contact-actions .contact-button { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; box-sizing: border-box !important; gap: 20px !important; overflow: hidden !important; } /* Text section */ .contact-actions .contact-button-text { position: relative !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } /* Icon MUST stay on the right */ .contact-actions .contact-icon { position: relative !important; flex: 0 0 48px !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; margin-left: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(142, 167, 255, 0.28) !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.035) !important; color: var(--blue-light, #8ea7ff) !important; z-index: 5 !important; transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease !important; } /* Icon SVG */ .contact-actions .contact-icon svg { width: 22px !important; height: 22px !important; display: block !important; flex-shrink: 0 !important; stroke: currentColor !important; fill: none !important; stroke-width: 1.7 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } /* WhatsApp icon is filled */ .contact-actions .whatsapp-icon svg { fill: currentColor !important; stroke: none !important; } /* ========================================================= HOVER — ONLY THE SELECTED CARD CHANGES ========================================================= */ .contact-actions .contact-button:hover { transform: translateY(-2px); } /* Icon hover */ .contact-actions .contact-button:hover .contact-icon { transform: scale(1.06); background: rgba(255, 255, 255, 0.10) !important; border-color: rgba(142, 167, 255, 0.65) !important; color: #ffffff !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20), 0 0 22px rgba(70, 105, 255, 0.18) !important; } /* WhatsApp gets its own hover colour */ .contact-actions .contact-button.whatsapp:hover { background: rgba(30, 180, 95, 0.12) !important; border-color: rgba(30, 180, 95, 0.50) !important; } .contact-actions .contact-button.whatsapp:hover .contact-icon { color: #5ee39b !important; background: rgba(30, 180, 95, 0.14) !important; border-color: rgba(30, 180, 95, 0.55) !important; box-shadow: 0 8px 24px rgba(30, 180, 95, 0.12), 0 0 22px rgba(30, 180, 95, 0.16) !important; } /* ========================================================= PHONE ANIMATION ========================================================= */ .contact-call .contact-icon svg { animation: ngbPhoneRing 3.5s ease-in-out infinite; } @keyframes ngbPhoneRing { 0%, 70%, 100% { transform: rotate(0deg); } 74% { transform: rotate(-7deg); } 78% { transform: rotate(7deg); } 82% { transform: rotate(-5deg); } 86% { transform: rotate(4deg); } 90% { transform: rotate(0deg); } } /* ========================================================= ALTERNATE PHONE ANIMATION ========================================================= */ .contact-alt .contact-icon svg { animation: ngbPhoneFloat 3s ease-in-out infinite; } @keyframes ngbPhoneFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* ========================================================= WHATSAPP ANIMATION ========================================================= */ .contact-actions .whatsapp-icon svg { animation: ngbWhatsapp 3s ease-in-out infinite; } @keyframes ngbWhatsapp { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ========================================================= EMAIL ANIMATION ========================================================= */ .contact-email .contact-icon svg { animation: ngbEmail 3.5s ease-in-out infinite; } @keyframes ngbEmail { 0%, 100% { transform: translateY(0) rotate(0deg); } 40% { transform: translateY(-2px) rotate(-3deg); } 60% { transform: translateY(-2px) rotate(3deg); } } /* ========================================================= SMALL PULSE DOT ========================================================= */ .contact-actions .icon-pulse { position: absolute !important; width: 7px !important; height: 7px !important; right: 5px !important; top: 5px !important; border-radius: 50% !important; background: currentColor !important; opacity: 0 !important; pointer-events: none !important; animation: ngbIconPulse 3s ease-out infinite !important; } @keyframes ngbIconPulse { 0% { transform: scale(0.5); opacity: 0; } 15% { opacity: 0.75; } 65% { transform: scale(2.3); opacity: 0; } 100% { transform: scale(2.3); opacity: 0; } } /* Alternate phone signal */ .contact-actions .icon-signal { position: absolute !important; width: 7px !important; height: 7px !important; right: 5px !important; top: 5px !important; border: 1px solid currentColor !important; border-radius: 50% !important; opacity: 0 !important; animation: ngbSignal 2.8s ease-out infinite !important; } @keyframes ngbSignal { 0% { transform: scale(0.5); opacity: 0; } 20% { opacity: 0.8; } 100% { transform: scale(2.5); opacity: 0; } } /* ========================================================= MOBILE — ICON STAYS ON SAME ROW ========================================================= */ @media (max-width: 768px) { .contact-actions { width: 100% !important; } .contact-actions .contact-button { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; min-height: 78px !important; padding: 14px 14px 14px 18px !important; } .contact-actions .contact-button-text { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; } .contact-actions .contact-icon { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; margin-left: auto !important; } .contact-actions .contact-icon svg { width: 20px !important; height: 20px !important; } } /* ========================================================= SMALL MOBILE — 360px / 390px DEVICES ========================================================= */ @media (max-width: 480px) { .contact-actions .contact-button { min-height: 72px !important; padding: 12px 12px 12px 15px !important; gap: 10px !important; } .contact-actions .contact-icon { flex: 0 0 42px !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; border-radius: 11px !important; } .contact-actions .contact-icon svg { width: 19px !important; height: 19px !important; } } /* ========================================================= VERY SMALL PHONES ========================================================= */ @media (max-width: 360px) { .contact-actions .contact-button { gap: 8px !important; padding-left: 13px !important; padding-right: 10px !important; } .contact-actions .contact-icon { flex-basis: 40px !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; } } /* ============================================================ NGB GROUPS — BUSINESS CARDS SPACING + ANIMATION FINAL OVERRIDE ============================================================ */ /* ------------------------------------------------------------ 1. BUSINESS GRID ------------------------------------------------------------ */ .business-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; align-items: start !important; } /* ------------------------------------------------------------ 2. BUSINESS CARD ------------------------------------------------------------ */ .business-grid .business-card { position: relative !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; height: auto !important; min-height: 0 !important; padding: 28px 32px 26px !important; box-sizing: border-box !important; overflow: hidden !important; border-radius: 24px !important; background: #ffffff !important; border: 1px solid rgba(22, 23, 79, 0.10) !important; color: #10112f !important; transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease, transform 0.45s ease, box-shadow 0.45s ease !important; } /* Decorative animated layer */ .business-grid .business-card::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 0 !important; opacity: 0 !important; background: linear-gradient( 115deg, transparent 15%, rgba(74, 103, 255, 0.08) 42%, rgba(74, 103, 255, 0.18) 50%, rgba(74, 103, 255, 0.05) 58%, transparent 85% ) !important; background-size: 220% 100% !important; transition: opacity 0.45s ease !important; animation: ngbCardLightSweep 5s linear infinite !important; } @keyframes ngbCardLightSweep { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } } /* Keep all actual content above decoration */ .business-grid .business-card > * { position: relative !important; z-index: 2 !important; } /* ------------------------------------------------------------ 3. CARD HOVER ------------------------------------------------------------ */ .business-grid .business-card:hover { background: #273b91 !important; color: #ffffff !important; border-color: rgba(91, 122, 255, 0.70) !important; transform: translateY(-6px) !important; box-shadow: 0 24px 60px rgba(22, 23, 79, 0.20), 0 0 35px rgba(55, 91, 220, 0.14) !important; } .business-grid .business-card:hover::before { opacity: 1 !important; } /* ------------------------------------------------------------ 4. ICON ------------------------------------------------------------ */ .business-grid .business-icon { width: 52px !important; height: 52px !important; min-width: 52px !important; margin-bottom: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 15px !important; transition: transform 0.4s ease, background 0.4s ease, color 0.4s ease, border-color 0.4s ease !important; } .business-grid .business-card:hover .business-icon { transform: translateY(-3px) rotate(-3deg) !important; background: rgba(255, 255, 255, 0.14) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.22) !important; } /* ------------------------------------------------------------ 5. ARTWORK AREA FIXES LARGE EMPTY SPACE ------------------------------------------------------------ */ .business-grid .business-art { position: relative !important; width: 100% !important; height: 190px !important; min-height: 190px !important; max-height: 190px !important; margin: 0 0 22px !important; flex: 0 0 190px !important; overflow: hidden !important; border-radius: 18px !important; box-sizing: border-box !important; } /* ------------------------------------------------------------ 6. HEADING ------------------------------------------------------------ */ .business-grid .business-card h3 { margin-top: 0 !important; margin-bottom: 12px !important; line-height: 1.08 !important; flex: 0 0 auto !important; } /* ------------------------------------------------------------ 7. DESCRIPTION ------------------------------------------------------------ */ .business-grid .business-card > p { margin-top: 0 !important; margin-bottom: 18px !important; line-height: 1.65 !important; flex: 0 0 auto !important; } /* ------------------------------------------------------------ 8. BULLET LIST THIS REMOVES THE HUGE GAP ------------------------------------------------------------ */ .business-grid .business-card > ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 24px !important; row-gap: 8px !important; margin: 0 0 20px !important; padding: 0 !important; flex: 0 0 auto !important; } .business-grid .business-card > ul li { margin: 0 !important; padding: 0 !important; line-height: 1.45 !important; } /* ------------------------------------------------------------ 9. CARD LINK NO ARTIFICIAL BOTTOM GAP ------------------------------------------------------------ */ .business-grid .business-card .card-link { display: inline-flex !important; align-items: center !important; align-self: flex-start !important; margin-top: 0 !important; padding-top: 0 !important; line-height: 1.3 !important; flex: 0 0 auto !important; transition: transform 0.3s ease, color 0.3s ease !important; } .business-grid .business-card:hover .card-link { color: #ffffff !important; transform: translateX(5px) !important; } /* ------------------------------------------------------------ 10. CARD TEXT ON HOVER ------------------------------------------------------------ */ .business-grid .business-card:hover h3, .business-grid .business-card:hover p, .business-grid .business-card:hover li, .business-grid .business-card:hover .card-link { color: #ffffff !important; } /* ------------------------------------------------------------ 11. CORPORATE ART ANIMATION ------------------------------------------------------------ */ .business-grid .corporate-art .building { animation: ngbBuildingFloat 4s ease-in-out infinite !important; } .business-grid .corporate-art .building:nth-of-type(2) { animation-delay: -1s !important; } .business-grid .corporate-art .building:nth-of-type(3) { animation-delay: -2s !important; } .business-grid .corporate-art .building:nth-of-type(4) { animation-delay: -3s !important; } @keyframes ngbBuildingFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .business-grid .corporate-art .growth-line { animation: ngbGrowthLine 3s ease-in-out infinite !important; } @keyframes ngbGrowthLine { 0%, 100% { opacity: 0.35; transform: scaleX(0.82); } 50% { opacity: 1; transform: scaleX(1); } } /* ------------------------------------------------------------ 12. TECH ART ANIMATION ------------------------------------------------------------ */ .business-grid .tech-art .node { animation: ngbTechNode 2.8s ease-in-out infinite !important; } .business-grid .tech-art .node:nth-of-type(2) { animation-delay: -0.7s !important; } .business-grid .tech-art .node:nth-of-type(3) { animation-delay: -1.4s !important; } .business-grid .tech-art .node:nth-of-type(4) { animation-delay: -2.1s !important; } @keyframes ngbTechNode { 0%, 100% { transform: scale(0.85); opacity: 0.55; } 50% { transform: scale(1.25); opacity: 1; } } .business-grid .tech-art .core { animation: ngbTechCore 3s ease-in-out infinite !important; } @keyframes ngbTechCore { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } } /* ------------------------------------------------------------ 13. OUTDOOR ADS ART ANIMATION ------------------------------------------------------------ */ .business-grid .outdoor-art .billboard { animation: ngbBillboardPulse 4s ease-in-out infinite !important; } @keyframes ngbBillboardPulse { 0%, 100% { transform: scale(1); opacity: 0.78; } 50% { transform: scale(1.035); opacity: 1; } } .business-grid .outdoor-art .light-trail { animation: ngbLightTrail 3.2s linear infinite !important; } @keyframes ngbLightTrail { 0% { transform: translateX(-35%); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(135%); opacity: 0; } } /* ------------------------------------------------------------ 14. ROAD SAFETY ART ANIMATION ------------------------------------------------------------ */ .business-grid .safety-art .road-line { animation: ngbRoadMove 2.2s linear infinite !important; } @keyframes ngbRoadMove { 0% { transform: translateX(-20%); } 100% { transform: translateX(20%); } } .business-grid .safety-art .sign { animation: ngbSafetySign 2.8s ease-in-out infinite !important; } @keyframes ngbSafetySign { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* ------------------------------------------------------------ 15. ART LABEL ANIMATION ------------------------------------------------------------ */ .business-grid .business-art .art-label { transition: letter-spacing 0.4s ease, opacity 0.4s ease !important; } .business-grid .business-card:hover .business-art .art-label { letter-spacing: 0.24em !important; opacity: 1 !important; } /* ------------------------------------------------------------ 16. MOBILE ------------------------------------------------------------ */ @media (max-width: 768px) { .business-grid { grid-template-columns: 1fr !important; gap: 18px !important; } .business-grid .business-card { padding: 22px 20px 22px !important; border-radius: 20px !important; transform: none !important; } .business-grid .business-art { height: 170px !important; min-height: 170px !important; max-height: 170px !important; flex-basis: 170px !important; margin-bottom: 18px !important; } .business-grid .business-card h3 { margin-bottom: 10px !important; } .business-grid .business-card > p { margin-bottom: 15px !important; } .business-grid .business-card > ul { margin-bottom: 17px !important; column-gap: 16px !important; row-gap: 7px !important; } /* Mobile has no mouse hover. Keep the animated artwork running continuously. */ .business-grid .business-art *, .business-grid .business-card::before { animation-play-state: running !important; } /* Touch feedback. */ .business-grid .business-card:active { background: #273b91 !important; color: #ffffff !important; border-color: rgba(91, 122, 255, 0.65) !important; transform: scale(0.985) !important; } .business-grid .business-card:active h3, .business-grid .business-card:active p, .business-grid .business-card:active li, .business-grid .business-card:active .card-link { color: #ffffff !important; } } /* ------------------------------------------------------------ 17. SMALL MOBILE ------------------------------------------------------------ */ @media (max-width: 480px) { .business-grid .business-card { padding: 20px 17px 20px !important; } .business-grid .business-art { height: 150px !important; min-height: 150px !important; max-height: 150px !important; flex-basis: 150px !important; margin-bottom: 16px !important; border-radius: 16px !important; } .business-grid .business-card > ul { grid-template-columns: 1fr 1fr !important; column-gap: 12px !important; } } /* ------------------------------------------------------------ 18. ACCESSIBILITY ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .business-grid .business-card, .business-grid .business-card::before, .business-grid .business-art *, .business-grid .business-icon, .business-grid .card-link { animation: none !important; transition: none !important; } } /* ============================================================ NGB GROUPS — VISIBLE PREMIUM BUSINESS CARD ANIMATIONS FINAL VERSION ============================================================ */ /* ------------------------------------------------------------ COMMON ------------------------------------------------------------ */ .business-grid .business-card { position: relative !important; isolation: isolate !important; overflow: hidden !important; } /* Animated background layer */ .business-grid .business-card::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; opacity: 0.75 !important; transition: opacity 0.5s ease, filter 0.5s ease !important; } /* Keep all card content above animation */ .business-grid .business-card > * { position: relative !important; z-index: 5 !important; } /* ============================================================ 01 — NGB CORPORATES Moving architectural / business growth lines ============================================================ */ .business-grid .business-card:has(.corporate-art)::after { background: /* moving glow */ radial-gradient( circle at 15% 80%, rgba(49, 86, 211, 0.14), transparent 24% ), /* diagonal growth lines */ repeating-linear-gradient( 145deg, transparent 0px, transparent 45px, rgba(49, 86, 211, 0.075) 46px, rgba(49, 86, 211, 0.075) 47px, transparent 48px, transparent 90px ), /* architectural grid */ linear-gradient( 90deg, transparent 0%, rgba(49, 86, 211, 0.04) 50%, transparent 100% ), repeating-linear-gradient( 0deg, transparent 0px, transparent 34px, rgba(49, 86, 211, 0.055) 35px, transparent 36px ); background-size: 180% 180%, 220% 220%, 180% 100%, 100% 100%; animation: ngbCorporateMove 9s linear infinite !important; } @keyframes ngbCorporateMove { 0% { background-position: 0% 100%, -100% 100%, 0% 0%, 0 0; } 50% { background-position: 70% 20%, 20% 0%, 100% 0%, 0 20px; } 100% { background-position: 150% -30%, 120% -100%, 0% 0%, 0 0; } } /* ============================================================ 02 — NGB TECH SOLUTIONS Digital grid + moving nodes ============================================================ */ .business-grid .business-card:has(.tech-art)::after { background: /* glowing node 1 */ radial-gradient( circle at 20% 25%, rgba(49, 86, 211, 0.32) 0px, rgba(49, 86, 211, 0.14) 5px, transparent 16px ), /* glowing node 2 */ radial-gradient( circle at 75% 70%, rgba(49, 86, 211, 0.28) 0px, rgba(49, 86, 211, 0.10) 5px, transparent 18px ), /* digital grid */ repeating-linear-gradient( 90deg, transparent 0px, transparent 39px, rgba(49, 86, 211, 0.075) 40px, transparent 41px ), repeating-linear-gradient( 0deg, transparent 0px, transparent 39px, rgba(49, 86, 211, 0.065) 40px, transparent 41px ), /* digital sweep */ linear-gradient( 115deg, transparent 25%, rgba(49, 86, 211, 0.12) 48%, rgba(142, 167, 255, 0.16) 50%, rgba(49, 86, 211, 0.08) 52%, transparent 75% ); background-size: 300px 300px, 350px 350px, 100% 100%, 100% 100%, 250% 250%; animation: ngbTechMove 7s linear infinite !important; } @keyframes ngbTechMove { 0% { background-position: 0% 0%, 100% 100%, 0 0, 0 0, 180% 0%; } 50% { background-position: 40% 50%, 60% 30%, 20px 0, 0 20px, 0% 100%; } 100% { background-position: 100% 100%, 0% 0%, 0 0, 0 0, -180% 100%; } } /* ============================================================ 03 — NGB OUTDOOR ADS Visibility / moving light sweep ============================================================ */ .business-grid .business-card:has(.outdoor-art)::after { background: /* strong moving light */ linear-gradient( 115deg, transparent 20%, rgba(49, 86, 211, 0.04) 38%, rgba(49, 86, 211, 0.22) 49%, rgba(142, 167, 255, 0.20) 51%, rgba(49, 86, 211, 0.05) 62%, transparent 80% ), /* advertising visibility rays */ repeating-linear-gradient( 165deg, transparent 0px, transparent 70px, rgba(49, 86, 211, 0.065) 71px, transparent 73px ), /* horizontal visibility lines */ repeating-linear-gradient( 0deg, transparent 0px, transparent 52px, rgba(49, 86, 211, 0.045) 53px, transparent 54px ); background-size: 250% 250%, 180% 180%, 100% 100%; animation: ngbOutdoorMove 6s linear infinite !important; } @keyframes ngbOutdoorMove { 0% { background-position: 180% 0%, 0% 100%, 0 0; } 50% { background-position: 0% 100%, 60% 20%, 0 25px; } 100% { background-position: -180% 0%, 120% -50%, 0 0; } } /* ============================================================ 04 — NGB ROAD SAFETY Road lanes + directional movement ============================================================ */ .business-grid .business-card:has(.safety-art)::after { background: /* central road glow */ linear-gradient( 90deg, transparent 0%, rgba(49, 86, 211, 0.03) 30%, rgba(49, 86, 211, 0.13) 48%, rgba(142, 167, 255, 0.16) 50%, rgba(49, 86, 211, 0.13) 52%, rgba(49, 86, 211, 0.03) 70%, transparent 100% ), /* road lane markings */ repeating-linear-gradient( 90deg, transparent 0px, transparent 70px, rgba(49, 86, 211, 0.08) 71px, rgba(49, 86, 211, 0.08) 73px, transparent 74px ), /* diagonal road direction */ repeating-linear-gradient( 155deg, transparent 0px, transparent 85px, rgba(49, 86, 211, 0.06) 86px, transparent 88px ); background-size: 240% 100%, 100% 100%, 180% 180%; animation: ngbSafetyMove 7s linear infinite !important; } @keyframes ngbSafetyMove { 0% { background-position: 180% 0%, 0 0, -100% 100%; } 50% { background-position: 0% 0%, 35px 0, 0% 0%; } 100% { background-position: -180% 0%, 0 0, 100% -100%; } } /* ============================================================ HOVER Animation becomes slightly stronger ONLY on selected card ============================================================ */ .business-grid .business-card:hover::after { opacity: 1 !important; filter: brightness(1.15) !important; } /* ============================================================ BLUE HOVER CARD Keep animation visible against blue background ============================================================ */ .business-grid .business-card:hover:has(.corporate-art)::after, .business-grid .business-card:hover:has(.tech-art)::after, .business-grid .business-card:hover:has(.outdoor-art)::after, .business-grid .business-card:hover:has(.safety-art)::after { mix-blend-mode: screen !important; opacity: 0.55 !important; } /* ============================================================ MOBILE Animation MUST continue without hover ============================================================ */ @media (max-width: 768px) { .business-grid .business-card::after { opacity: 0.72 !important; animation-play-state: running !important; } .business-grid .business-card:active::after { opacity: 1 !important; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .business-grid .business-card::after { animation: none !important; } } /* ========================================================= /* ===================================================== NGB GROUPS — PREMIUM FOOTER UPGRADE Final footer override ===================================================== */ .footer { position: relative; overflow: hidden; background: radial-gradient( circle at 15% 20%, rgba(49, 86, 211, 0.14), transparent 32% ), radial-gradient( circle at 85% 75%, rgba(49, 86, 211, 0.10), transparent 30% ), #05071c; color: #ffffff; padding: 88px 0 0; isolation: isolate; } /* ================= FOOTER BACKGROUND GRID ================= */ .footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18; background-image: linear-gradient( rgba(142, 167, 255, 0.07) 1px, transparent 1px ), linear-gradient( 90deg, rgba(142, 167, 255, 0.07) 1px, transparent 1px ); background-size: 70px 70px; mask-image: linear-gradient( to bottom, black, transparent 92% ); -webkit-mask-image: linear-gradient( to bottom, black, transparent 92% ); z-index: -3; } /* ================= FOOTER GLOW ================= */ .footer-glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: -2; opacity: 0.18; animation: footerGlowMove 9s ease-in-out infinite alternate; } .footer-glow-one { top: -150px; left: -100px; background: #3156d3; } .footer-glow-two { right: -130px; bottom: -160px; background: #3156d3; animation-delay: -4s; } /* ================= FOOTER MAIN ================= */ .footer-main { display: grid; grid-template-columns: minmax(280px, 1.8fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) minmax(220px, 1.2fr); gap: 60px; padding-bottom: 72px; } /* ================= BRAND ================= */ .footer-brand { max-width: 390px; } .footer-logo { display: inline-flex; align-items: center; margin-bottom: 25px; position: relative; } .footer-logo-image { display: block; width: 190px; max-width: 100%; height: auto; object-fit: contain; } .footer-tagline { margin: 0 0 18px; color: #ffffff; font-family: "Manrope", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.5px; } .footer-description { max-width: 360px; margin: 0 0 28px; color: rgba(255, 255, 255, 0.48); font-size: 14px; line-height: 1.8; } /* ================= FOOTER CTA ================= */ .footer-cta { display: inline-flex; align-items: center; gap: 12px; padding: 12px 17px; border: 1px solid rgba(142, 167, 255, 0.24); border-radius: 12px; background: rgba(255, 255, 255, 0.035); color: #ffffff; font-size: 13px; font-weight: 600; transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .footer-cta span { color: #8ea7ff; font-size: 17px; transition: transform 0.3s ease; } .footer-cta:hover { background: rgba(49, 86, 211, 0.18); border-color: rgba(142, 167, 255, 0.5); transform: translateY(-3px); box-shadow: 0 12px 35px rgba(49, 86, 211, 0.16); } .footer-cta:hover span { transform: translate(3px, -3px); } /* ================= FOOTER COLUMNS ================= */ .footer-column { display: flex; flex-direction: column; align-items: flex-start; } .footer-column h4 { position: relative; margin: 4px 0 24px; color: #ffffff; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; } .footer-column h4::after { content: ""; display: block; width: 24px; height: 2px; margin-top: 10px; border-radius: 10px; background: #3156d3; } .footer-column > a { position: relative; display: inline-flex; align-items: center; margin-bottom: 13px; color: rgba(255, 255, 255, 0.47); font-size: 13px; line-height: 1.5; transition: color 0.25s ease, transform 0.25s ease; } .footer-column > a::before { content: ""; width: 0; height: 1px; margin-right: 0; background: #8ea7ff; transition: width 0.25s ease, margin-right 0.25s ease; } .footer-column > a:hover { color: #ffffff; transform: translateX(3px); } .footer-column > a:hover::before { width: 8px; margin-right: 7px; } /* ================= CONNECT ================= */ .footer-connect { padding-left: 8px; } .footer-contact-link { flex-direction: column; align-items: flex-start !important; gap: 3px; margin-bottom: 17px !important; } .footer-contact-link::before { display: none; } .footer-contact-link span { color: #6f8ff2; font-size: 9px; font-weight: 800; letter-spacing: 1.5px; } .footer-contact-link:hover { transform: translateX(0) !important; } /* ================= DIVIDER ================= */ .footer-divider { width: 100%; height: 1px; background: linear-gradient( 90deg, rgba(255,255,255,0), rgba(255,255,255,0.13) 20%, rgba(255,255,255,0.13) 80%, rgba(255,255,255,0) ); } /* ================= FOOTER BOTTOM ================= */ .footer-bottom { min-height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; border-top: 0; color: rgba(255, 255, 255, 0.34); font-size: 11px; } .footer-copyright { justify-self: start; } .footer-location { justify-self: center; color: rgba(255, 255, 255, 0.3); font-size: 11px; } .footer-top-link { justify-self: end; display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.5); font-size: 11px; transition: color 0.25s ease, transform 0.25s ease; } .footer-top-link span { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; color: #8ea7ff; transition: background 0.25s ease, border-color 0.25s ease; } .footer-top-link:hover { color: #ffffff; transform: translateY(-2px); } .footer-top-link:hover span { background: rgba(49,86,211,0.2); border-color: rgba(142,167,255,0.4); } /* ================= FOOTER ANIMATION ================= */ @keyframes footerGlowMove { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(35px, 20px, 0) scale(1.12); } } /* ================= TABLET ================= */ @media (max-width: 1000px) { .footer-main { grid-template-columns: 1.5fr 1fr 1fr; gap: 45px; } .footer-brand { grid-column: 1 / -1; max-width: 600px; } .footer-connect { padding-left: 0; } } /* ================= MOBILE ================= */ @media (max-width: 700px) { .footer { padding-top: 65px; } .footer-main { display: grid; grid-template-columns: 1fr 1fr; gap: 45px 28px; padding-bottom: 50px; } .footer-brand { grid-column: 1 / -1; max-width: 100%; } .footer-logo-image { width: 170px; } .footer-tagline { font-size: 22px; } .footer-description { max-width: 100%; } .footer-column h4 { margin-bottom: 20px; } .footer-column > a { font-size: 12px; } .footer-bottom { min-height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 0 28px; } .footer-copyright, .footer-location, .footer-top-link { justify-self: auto; } .footer-top-link { margin-top: 4px; } } /* ================= EXTRA SMALL ================= */ @media (max-width: 430px) { .footer-main { grid-template-columns: 1fr; } .footer-brand { grid-column: auto; } .footer-column { width: 100%; } .footer-description { font-size: 13px; } .footer-cta { font-size: 12px; } }/* ===================================================== NGB LOGO — HEADER SIZE FIX ===================================================== */ .header .ngb-logo { display: block; width: 145px; height: auto; max-width: 145px; max-height: 48px; object-fit: contain; object-position: left center; } /* Keep header logo properly aligned */ .header .logo { display: inline-flex; align-items: center; width: 145px; height: 55px; overflow: visible; } /* ================= MOBILE ================= */ @media (max-width: 900px) { .header .ngb-logo { width: 125px; max-width: 125px; max-height: 42px; } .header .logo { width: 125px; height: 48px; } }/* ===================================================== NGB LOGO — FOOTER ===================================================== */ .footer-logo-image { display: block; width: 175px; height: auto; max-width: 175px; max-height: 55px; object-fit: contain; filter: brightness(1.18) saturate(1.08); } @media (max-width: 700px) { .footer-logo-image { width: 155px; max-width: 155px; } }