/* Legacy layout theme rules. Palette values live in BrandIdentity and brand.css. */

    html[data-theme="dark"] .what-section {
        color: var(--text-color-light);
    }

    html[data-theme="dark"] .team-head {
        color: var(--text-color-light);
    }

    html[data-theme="dark"] .network-section {
        color: var(--text-color-light);
    }

    html[data-theme="dark"] .client-heading {
        color: var(--text-color-light);
    }

    html[data-theme="dark"] .client-card {
        background-color: var(--card-grey);
        color: var(--text-color-light);
    }

    html[data-theme="dark"] .partner-section .partner-image-container {
        background-color: var(--background-color)
    }

    html[data-theme="dark"] .partner-section {
        background-color: var(--section-purple);
    }

        html[data-theme="dark"] .partner-section .partner-content h2 {
            color: var(--text-color-light);
        }

        html[data-theme="dark"] .partner-section .partner-content p {
            color: var(--text-color-light);
        }

        html[data-theme="dark"] .partner-section .partner-content h4 {
            color: var(--text-color-light);
        }

        html[data-theme="dark"] .partner-section .partner-content .partner-custom-list span {
            color: var(--text-color-light);
        }

    html[data-theme="dark"] .thought-section .thought-image-container,
    html[data-theme="dark"] .thought-section .thought-image-container img {
        background-color: var(--section-purple)
    }

    html[data-theme="dark"] .Hero-insights {
        background-color: var(--background-color);
    }

        html[data-theme="dark"] .Hero-insights .Hero-insights-stat p {
            color: var(--text-color-light);
        }

    html[data-theme="dark"] .drive-timeline h2 {
        color: var(--text-color-light);
    }

    html[data-theme="dark"] .drive-timeline .drive-icons-row .drive-icon img {
        background-color: var(--background-color);
    }

    html[data-theme="dark"] .drive-timeline .drive-icons-row .drive-icon .drive-pulse-container .drive-inner-circle {
        border-radius: 50%;
    }

    html[data-theme="dark"] .drive-timeline .drive-icons-row .drive-icon .drive-pulse-container .drive-outer-circle {
        z-index: -1;
    }

    html[data-theme="dark"] .drive-timeline .drive-icons-row,
html[data-theme="dark"] .drive-timeline .drive-text-row {
        color: var(--text-color-light);
    }

    html[data-theme="dark"] .vision-container {
        background-color: var(--background-color);
        color: var(--text-color-light);
    }

        html[data-theme="dark"] .vision-container .vision-graphic {
            width: 45%;
            background-color: var(--card-grey);
        }

    html[data-theme="dark"] .vision-graphic .img-container {
        content: url("/images/about/3DrivingForces.png");
        width: 100%;
        background-size: contain;
        background-position: center;
        z-index: 2;
    }

    html[data-theme="dark"] .vision-container .vision-text-container .vision-text h3,
    html[data-theme="dark"] .vision-container .vision-text-container .vision-bottom-text h3 {
        color: var(--sl-light-green-ink);
    }

    html[data-theme="dark"] .Values-section {
        background-color: var(--section-purple);
    }

        html[data-theme="dark"] .Values-section .Values-text h2,
        html[data-theme="dark"] .Values-section .Values-text h3,
        html[data-theme="dark"] .Values-section .Values-text p {
            color: var(--text-color-light);
        }

        html[data-theme="dark"] .Values-section .Values-list .values-row::before {
            background-color: var(--card-grey);
        }

        html[data-theme="dark"] .Values-section .Values-list .values-row img {
            background-color: var(--section-purple);
        }

        html[data-theme="dark"] .Values-section .Values-list .values-row .values-content p {
            color: var(--text-color-light);
        }

    html[data-theme="dark"] .social-section .Social-text {
        background-color: var(--card-grey);
    }

        html[data-theme="dark"] .social-section .Social-text h2,
        html[data-theme="dark"] .social-section .Social-text p {
            color: var(--text-color-light);
        }

        html[data-theme="dark"] .social-section .Social-text h3 {
            color: var(--sl-light-green-ink);
        }

    html[data-theme="dark"] .social-semi-circle-container .small-circle {
        background-color: var(--card-grey);
    }

        html[data-theme="dark"] .social-semi-circle-container .small-circle p {
            color: var(--text-color-light);
        }

    html[data-theme="dark"] .diff-section {
        background-color: var(--background-color);
    }

        html[data-theme="dark"] .diff-section .services-focus-message {
            color: var(--text-color-light);
        }

    html[data-theme="dark"] .key-section .earthbg {
        background-color: var(--background-color);
    }

html[data-theme="dark"] .key-section .earthbg {
    content: url('/images/services/EarthDark.svg');
}

html[data-theme="dark"] .key-section .earthbg img {
    background-color: var(--background-color);
}

html[data-theme="dark"] .key-section .key-head {

    background: linear-gradient( to bottom, var(--section-purple) calc(40px + (var(--circle-diameter) / 2)), transparent calc(40px + (var(--circle-diameter) / 2)) );
}

    html[data-theme="dark"] .key-section .key-head .small-circle,
    html[data-theme="dark"] .key-section .key-head .big-circle {
        background-color: var(--card-grey);
        color: var(--text-color-light);
    }

    html[data-theme="dark"] .key-section .key-head .circle-text {
        color: var(--text-color-light);
    }

html[data-theme="dark"] .carousel-section .carousel-head {
    color: var(--text-color-light);
}

html[data-theme="dark"] .carousel-section .carousel-inner-section .carousel-container .carousel-body .carousel-card .carousel-top-section,
html[data-theme="dark"] .carousel-section .carousel-inner-section .carousel-container .carousel-body .carousel-card .bottom-section {
    background-color: var(--card-grey);
    color: var(--text-color-light);
}

html[data-theme="dark"] .unique-topbg .unique-info-section {
    background: linear-gradient( to bottom, var(--section-purple) 40%, transparent 40% );
}

    html[data-theme="dark"] .unique-topbg .unique-info-section .unique-card {
        background-color: var(--background-color);
        color: var(--text-color-light);
    }

        html[data-theme="dark"] .unique-topbg .unique-info-section .unique-card .unique-card-content .unique-content-item .unique-icon-text p {
            color: var(--text-color-light);
        }

        html[data-theme="dark"] .unique-topbg .unique-info-section .unique-card .unique-card-content .unique-content-item .unique-icon {
            background-color: var(--background-color);
        }

html[data-theme="dark"] .services-container {
    background-color: var(--background-color);
    color: var(--text-color-light);
}

html[data-theme="dark"] .services-grid-container {
    background-color: var(--background-color);
    color: var(--text-color-light);
}

html[data-theme="dark"] .approach-container .approach-column {
    background-color: var(--card-grey);
    color: var(--text-color-light);
}

html[data-theme="dark"] .key-section .key-heading {
    color: var(--text-color-light);
}

html[data-theme="dark"] .services-container,
html[data-theme="dark"] .services-grid-container {
    background-color: var(--background-color);
    color: var(--text-color-light);
}

html[data-theme="dark"] .client-section {
    color: var(--text-color-light);
}

html[data-theme="dark"] .client-card-grid .client-card {
    background-color: var(--card-grey);
}

    html[data-theme="dark"] .client-card-grid .client-card .client-icon {
        background-color: var(--background-color);
    }

html[data-theme="dark"] .thought-section .thought-content .thought-contact-container,
html[data-theme="dark"] .thought-section .thought-content .thought-contact-container .thought-contact-heading,
html[data-theme="dark"] .thought-section .thought-content .thought-contact-container .thought-contact-inner .thought-image-container img,
html[data-theme="dark"] .thought-section .thought-content .thought-contact-container .thought-contact-inner .thought-card-body .thought-card-title,
html[data-theme="dark"] .thought-section .thought-content .thought-contact-container .thought-contact-inner .thought-card-body p,
html[data-theme="dark"] .thought-section .thought-content .thought-contact-container .thought-contact-inner .thought-card-body .thought-icon-container img {
    background-color: var(--background-color) !important;
    color: var(--text-color-light);
}

    html[data-theme="dark"] .thought-section .thought-content,
    html[data-theme="dark"] .thought-section .thought-content .thought-content-right .thought-content-right-inner,
    html[data-theme="dark"] .thought-section .thought-content .thought-content-right .thought-content-right-inner h2,
    html[data-theme="dark"] .thought-section .thought-content .thought-content-right .thought-content-right-inner p {
        background-color: var(--section-purple) !important;
        color: var(--text-color-light);
    }

html[data-theme="dark"] .key-services,
html[data-theme="dark"] .key-services .key-item {
    color: var(--text-color-light);
}

    html[data-theme="dark"] .key-services .key-item .key-img img {
        background-color: transparent;
    }

html[data-theme="dark"] .solution-section h2 {
    background-color: var(--background-color);
    color: var(--text-color-light);
}

html[data-theme="dark"] .solution-section .solution-container .solution-row .solution-item {
    background: linear-gradient(to top,var(--card-grey) 90%, transparent 80%);
    color: var(--text-color-light);
}

html[data-theme="dark"] .industry-section {
    color: var(--text-color-light);
}

html[data-theme="dark"] .approach-card {
    background-color: var(--card-grey);
    color: var(--text-color-light);
}

html[data-theme="dark"] .carousel-arrow {
    color: var(--text-color-light);
}

html[data-theme="dark"] .industry-section {
    color: var(--text-color-light);
    background-color: var(--section-purple)
}

html[data-theme="dark"] .service-section .services-container,
html[data-theme="dark"] .service-section .services-grid {
    background-color: var(--background-color);
    color: var(--text-color-light);
}

    html[data-theme="dark"] .service-section .services-grid .services-grid-item,
    html[data-theme="dark"] .service-section .services-grid .services-grid-item .services-subcards-row {
        background: linear-gradient(to bottom, var(--card-grey) 100%, var(--paper-raised-sl) 20%);
    }

html[data-theme="dark"] .services-grid .services-grid-item .services-number {
    background-color: var(--background-color);
}

html[data-theme="dark"] .services-grid .services-grid-item .services-top-row {
    background-color: var(--card-grey);
    color: var(--text-color-light);
}

html[data-theme="dark"] .client-section .client-heading {
    color: var(--text-color-light);
}

html[data-theme="dark"] .client-section .client-card-grid .client-card {
    background-color: var(--card-grey);
    color: var(--text-color-light);
}

html[data-theme="dark"] .thought-section .thought-contact-container,
html[data-theme="dark"] .thought-section .thought-contact-container .thought-contact-heading,
html[data-theme="dark"] .thought-section .thought-contact-container .thought-contact-inner .thought-card-body .thought-card-title,
html[data-theme="dark"] .thought-section .thought-contact-container .thought-contact-inner .thought-card-body p {
    background-color: var(--card-grey);
    color: var(--text-color-light);
}

html[data-theme="dark"] .thought-section,
html[data-theme="dark"] .thought-section .thought-content-right .thought-content-right-inner h2,
html[data-theme="dark"] .thought-section .thought-content-right .thought-content-right-inner p {
    background-color: var(--background-color);
    color: var(--text-color-light);
}

html[data-theme="dark"] .service-section .services-container {
    background-color: var(--card-grey);
    color: var(--text-color-light);
}

html[data-theme="dark"] .approach-section,
html[data-theme="dark"] .why-section {
    background-color: var(--background-color);
    color: var(--text-color-light);
}

    html[data-theme="dark"] .why-section .why-cards-wrapper .why-card .why-card-image {
        background-color: var(--background-color);
    }

        html[data-theme="dark"] .why-section .why-cards-wrapper .why-card .why-card-image img {
            background-color: transparent;
        }

html[data-theme="dark"] .offer-section .offer-container {
    color: var(--text-color-light);
}

html[data-theme="dark"] .offer-section .portfolio-card-container .portfolio-card {
    color: var(--text-color-light);
    border: none;
}

html[data-theme="dark"] .services-container {
    background-color: var(--background-color);
    color: var(--text-color-light);
}

html[data-theme="dark"] .talent-service-container,
html[data-theme="dark"] .talent-service-container .talent-service-left-col ul {
    background-color: var(--background-color);
    color: var(--text-color-light);
}

    html[data-theme="dark"] .talent-service-container .talent-service-right-col,
    html[data-theme="dark"] .talent-service-text-block-image img {
        background-color: var(--section-purple);
    }

html[data-theme="dark"] .thought-section .thought-contact-container,
html[data-theme="dark"] .thought-section .thought-contact-container .thought-contact-heading,
html[data-theme="dark"] .thought-section .thought-contact-container .thought-contact-inner .thought-card-body .thought-card-title,
html[data-theme="dark"] .thought-section .thought-contact-container .thought-contact-inner .thought-card-body p {
    background-color: var(--card-grey);
    color: var(--text-color-light);
}

html[data-theme="dark"] .thought-section,
html[data-theme="dark"] .thought-section .thought-content-right .thought-content-right-inner h2,
html[data-theme="dark"] .thought-section .thought-content-right .thought-content-right-inner p {
    background-color: var(--background-color);
    color: var(--text-color-light);
}

html[data-theme="dark"] .products-section h2,
html[data-theme="dark"] .products-content h2,
html[data-theme="dark"] .products-content p {
    color: var(--text-color-light);
}

html[data-theme="dark"] .new-releases h2 {
    color: var(--text-color-light);
}

html[data-theme="dark"] .careers-section h2,
html[data-theme="dark"] .careers-section p {
    color: var(--text-color-light);
}