lacks the phantom "section-padding" companion class the canonical page has, which is irrelevant since the fix below targets the bare .footerkeywords selector) to top-digital-marketing-agencies-in-uae.php, so this file is a direct copy of top-digital-marketing-agencies-in-uae.css. */ /* Hero banner — .custom-hero-banner is a real content image (marketing graphic), not a decorative filler bitmap, but its baked-in light background reads jarring against the dark theme, and the section below it (.footerkeywords) has zero top padding (see below), so the white banner cut hard into the black section with no transition. Two overlays fix both: a subtle full-coverage scrim tones down the whiteness while keeping the photo and the white info-cards on it legible, and a bottom gradient fades smoothly into the page's #0a0a0a background instead of a hard seam. Sized separately for the 700px desktop and 220px mobile (main.css:29188) banner heights so the fade doesn't swallow the image on mobile. */ .custom-hero-banner { position: relative; } .custom-hero-banner::before { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, 0.28); pointer-events: none; } .custom-hero-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 280px; background: linear-gradient(to bottom, rgba(10, 10, 10, 0) 0%, #0a0a0a 90%); pointer-events: none; } @media (max-width: 767px) { .custom-hero-banner::after { height: 90px; } } /* .footerkeywords has zero top padding on this page (no "section-padding" companion class at all here, unlike the canonical page where the class is present but undefined in main.css — same net effect either way), sitting flush against the hero banner's bottom edge. Restoring spacing using the site's clamp() convention. */ .footerkeywords { padding-top: clamp(3rem, 6vw, 5rem); } /* Article body — main.css doesn't style bare .footerkeywords at all; the page's own inline