/* seo-company-in-detroit.css — dark-theme (da-new-theme) color overrides for
   seo-company-in-detroit.php
   Loaded after main.css/home-new.css; same-specificity selectors here win via source order.
   Colors/backgrounds/borders/display-none-on-decorative-images only — no layout, sizing,
   content, or structural changes. This page is structurally identical to
   seo-agency-dallas.php (same .hero4-section-area/.heading7/.works-author-boxarea/
   .about3-section-area/.service2-boxarea/.testimonial/.cta4-section-area/.bg-2/.heading2
   classes, only city-specific copy/images differ — confirmed via a full class-name diff),
   so this file is a direct copy of seo-agency-dallas.css, including its .bg-2 gap-bug
   fix and .heading2 fix. */

/* Hero — .hero4-section-area's background is a plain light CSS color (not a bitmap), so a
   straight override works. Reuses the same dark radial-gradient formula already used on
   about.php/contact-us.php/digital-marketing-agency-in-new-york-city.php's heroes. */
.hero4-section-area {
    background: radial-gradient(120% 120% at 50% 0%, rgba(124, 58, 237, 0.18) 0%, rgba(10, 10, 10, 0) 60%), #0a0a0a;
}

.heading7 h1 {
    color: #ffffff;
}

.heading7 h1 span {
    color: #c026d3;
}

.heading7 p {
    color: #cbd5e1;
}

.header-btn16 {
    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-btn16:hover {
    color: #ffffff;
}

.header-btn16 span {
    background: #7c3aed;
    color: #ffffff;
}

/* Decorative accent PNGs (soft white-to-pastel glow/ripple graphics, confirmed by visual
   inspection) have no dark-theme equivalent asset and would read as faint white smudges
   against the new dark sections — hidden via display:none, the same treatment already used
   for the hero-bg bitmap on digital-marketing-agency-in-new-york-city.css. Purely decorative,
   no informational content. .about-bg1/.about-bg2/.cta-bg1/.cta-bg2 are position:absolute so
   hiding them doesn't affect layout, but .bg-2 (the hero ripple wrapper) sits in normal flow
   with its own hardcoded height (main.css:5465-5469, height:360px) — hiding just the <img>
   inside left an empty reserved 360px box and a large gap before the next section, so the
   whole .bg-2 wrapper is hidden instead, collapsing that space. */
.bg-2,
.about-bg1,
.about-bg2,
.cta-bg1,
.cta-bg2 {
    display: none;
}

/* "Unlock New Opportunities" intro + 4-card row */
.heading8 h2 {
    color: #ffffff;
}

.heading8 p {
    color: #cbd5e1;
}

.works4-section-area .works-author-boxarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.18);
}

.works4-section-area .works-author-boxarea .icons {
    background: rgba(255, 255, 255, 0.08);
}

.works4-section-area .works-author-boxarea .content-area a {
    color: #ffffff;
}

.works4-section-area .works-author-boxarea .content-area p {
    color: #cbd5e1;
}

/* About #1 / About #2 ("Best SEO Company" / "Why Choose Us") */
.heading6 h2 {
    color: #ffffff;
}

.heading6 p {
    color: #cbd5e1;
}

.about3-section-area .about-header-area .list-area ul li {
    color: #cbd5e1;
}

/* Services grid, 9 cards */
.service3-section-area .service2-boxarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.18);
}

.service3-section-area .service2-boxarea .icons {
    background: rgba(255, 255, 255, 0.08);
}

.service3-section-area .service2-boxarea .content a {
    color: #ffffff;
}

.service3-section-area .service2-boxarea .content p {
    color: #cbd5e1;
}

/* Section headings using the shared .heading2 wrapper (services grid / testimonials /
   contact section headings, depending on the page) — missed in the initial pass; main.css
   only gives this class dark text (#090b0e h2, #3d4c5e p), invisible against the dark page.
   The CTA band's .cta-header-area h2/p already has its own more-specific white override in
   main.css and is unaffected by this addition. */
.heading2 h2 {
    color: #ffffff;
}

.heading2 p {
    color: #cbd5e1;
}

/* Testimonials (identical shared classes/fix already used on
   digital-marketing-agency-in-new-york-city.css, reused verbatim) */
.testimonial {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.18);
}

.testimonial .quote {
    color: #c026d3;
}

.testimonial p {
    color: #cbd5e1;
}

.testimonial .name {
    color: #ffffff;
}

.testimonial .designation {
    color: #a0aec0;
}

.carousel-control-prev,
.carousel-control-next {
    background-color: rgba(255, 255, 255, 0.08);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: none;
}

/* Closing CTA band */
.cta4-section-area,
.cta4-section-area .cta-header-area {
    background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
}