/* hire-google-ads-specialist-dubai.css — dark-theme (da-new-theme) color overrides
   for hire-google-ads-specialist-dubai.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 the "footerkeywords" family of ~38 UAE/Dubai long-tail pages —
   identical to top-digital-marketing-agencies-in-uae.php (the family canonical) for all 5
   standard sections, plus one bare/unclassed <table> sharing a page-local unscoped <style>
   block confirmed byte-for-byte identical to on-page-seo-services-dubai.php's block, so
   this file is a direct copy of on-page-seo-services-dubai.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 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
   <style> block (further down in the HTML source) hardcodes #222/#555/#444 text colors.
   Since that block appears AFTER this stylesheet's <link> in document order, an equal-
   specificity override here would lose the cascade — prefixing with .da-new-theme (already
   on <body>) bumps specificity so this wins regardless of source order. */
.da-new-theme .footerkeywords h1,
.da-new-theme .footerkeywords h2,
.da-new-theme .footerkeywords h3 {
    color: #ffffff;
}

.da-new-theme .footerkeywords p {
    color: #cbd5e1;
}

.da-new-theme .footerkeywords ul {
    color: #cbd5e1;
}

/* FAQ heading — main.css gives bare .heading8 h2 a near-black color
   (var(--ztc-text-text-2), #090b0e), invisible on dark. */
.heading8 h2 {
    color: #ffffff;
}

/* FAQ accordion cards — main.css hardcodes a bright red card background (#f40b0c) and a
   white button with near-black text (var(--ztc-text-text-1)/var(--ztc-text-text-2)) for
   this exact selector chain; converted to the site's standard dark-card treatment. */
.choose-section-area .accordian-tabs-area .accordion .accordion-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.18);
}

.choose-section-area .accordian-tabs-area .accordion .accordion-item h2 button,
.choose-section-area .accordian-tabs-area .accordion .accordion-item h2 button:not(.collapsed) {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}

/* CTA band — main.css gives .cta-author-area a light pink background (var(--ztc-bg-bg-14),
   #fff5f9); converted to the site's standard gradient CTA treatment. */
.cta3-section-area .cta-author-area {
    background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
}

/* Soft glow decorative PNGs have no dark-theme equivalent and read as faint smudges —
   same treatment already used on the hero3/hero5 family's identical CTA images block. */
.cta3-section-area .cta-author-area .images .bg1,
.cta3-section-area .cta-author-area .images .elements7 {
    display: none;
}

/* This page's CTA heading uses the bare .heading6 class (not .cta-header-area, which
   main.css already whitens elsewhere) — main.css gives it near-black text, invisible
   against the new purple/pink gradient background. */
.cta2-header.heading6 h2 {
    color: #ffffff;
}

.cta2-header.heading6 p {
    color: #cbd5e1;
}

/* .header-btn5 has no background and near-black text/border in main.css (a "ghost"
   button design meant for light backgrounds) — invisible against the dark theme.
   Recolored to the site's standard gradient-border pill, same as every other converted
   page's .header-btn5. */
.header-btn5 {
    background:
        linear-gradient(#060612, #060612) padding-box,
        linear-gradient(90deg, #7c3aed 0%, #c026d3 55%, #e11d48 100%) border-box;
    border: 2px solid transparent;
    color: #ffffff;
}

.header-btn5:hover {
    color: #ffffff;
}

/* "Let's Work Together" giant (146px) headings — hardcoded directly to black/near-black
   in main.css (.lets-work/.lets-work2), unlike every other heading class on the site. */
.lets-work {
    color: #ffffff;
}

.lets-work2 {
    color: rgba(255, 255, 255, 0.35);
}

/* Contact form — main.css styles these via bare element selectors (input[type=text/email],
   textarea) with a light #f4f4f4 background, which would affect every form sitewide if
   overridden unscoped; scoped to .form-section (this page's form wrapper) instead. */
.form-section label {
    color: #cbd5e1;
}

.form-section .input-area input[type="text"],
.form-section .input-area input[type="email"],
.form-section .input-area textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.25);
    color: #ffffff;
}

.form-section .input-area input::placeholder,
.form-section .input-area textarea::placeholder {
    color: #a0aec0;
}

/* Submit button — main.css's more specific button.header-btn11 selector (element+class)
   gives this a plain red pill (#f30b0b), overriding the neon-lime bare .header-btn11
   fix already applied elsewhere; recolored to the same gradient-pill family for
   consistency. border-image is cleared since the border shorthand alone won't reset it. */
.form-section button.header-btn11 {
    background:
        linear-gradient(#060612, #060612) padding-box,
        linear-gradient(90deg, #7c3aed 0%, #c026d3 55%, #e11d48 100%) border-box;
    border: 1px solid transparent;
    border-image: none;
    color: #ffffff;
}

/* Loading spinner — styled by a second inline <style> block further down the page (same
   later-in-DOM issue as .footerkeywords above); scoping under .form-section bumps
   specificity to win regardless of source order. */
.form-section .loader {
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top: 4px solid #7c3aed;
}

/* Comparison table ("Digital Advengers vs. Traditional Agencies" or similar) — appears on
   several but not all pages in this family, colored via inline style="" attributes on the
   <tr>/<th>/<td> elements themselves (background-color:#f2f2f2 header row, border:1px
   solid #ddd cells), so !important is required to beat them, same technique used for the
   hero5 family's inline background-image. Not present on this specific page, but kept
   here (harmless if unused) so every other "footerkeywords" family page with this same
   table can copy this file forward without re-deriving the fix. */
.comparison-table thead tr {
    background-color: rgba(124, 58, 237, 0.15) !important;
}

.comparison-table th,
.comparison-table td {
    border: 1px solid rgba(124, 58, 237, 0.18) !important;
}

.comparison-table th {
    color: #ffffff;
}

.comparison-table td {
    color: #cbd5e1;
}

/* Generic feature table — this page has one bare, unclassed <table> styled via a
   page-local, UNSCOPED <style> block (plain table/th/td/tr selectors, white card
   background, bright blue #0073e6 header, light zebra-stripe/hover tints). That block sits
   after this stylesheet's <link> in document order, so an equal-specificity override here
   would lose the cascade — scoping under .da-new-theme (already on <body>) bumps
   specificity to win regardless of source order, and scoping to .footerkeywords keeps the
   fix from touching any other table on the page. */
.da-new-theme .footerkeywords table {
    background-color: transparent;
    box-shadow: none;
    border: 1px solid rgba(124, 58, 237, 0.18);
}

.da-new-theme .footerkeywords th,
.da-new-theme .footerkeywords td {
    border-bottom: 1px solid rgba(124, 58, 237, 0.18);
}

.da-new-theme .footerkeywords th {
    background-color: rgba(124, 58, 237, 0.15);
    color: #ffffff;
}

.da-new-theme .footerkeywords td {
    color: #cbd5e1;
}

.da-new-theme .footerkeywords tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03);
}

.da-new-theme .footerkeywords tr:hover {
    background-color: rgba(124, 58, 237, 0.08);
}
