/* top-digital-marketing-agencies-in-uae.css — dark-theme (da-new-theme) color overrides for top-digital-marketing-agencies-in-uae.php. Loaded after main.css/home-new.css; same-specificity selectors here win via source order. Colors/backgrounds/borders only — no layout, sizing, content, or structural changes. This page belongs to a previously-unconverted "footerkeywords" template shared by ~38 UAE/Dubai long-tail pages (not one of the 4 hero1-5 US-city families), so this is fresh authoring rather than a copy-forward. The .cta3-section-area sub-block reuses the same gradient/button treatment already established on the hero3/hero5 US-city pages. */ /* 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 is compound-classed with "section-padding" in the markup, but that class is never defined anywhere in main.css (a phantom/leftover class) — so this section had zero top padding, sitting flush against the hero banner's bottom edge. Restoring the spacing the class name implied, 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