/*
 * Lightweight code-generated background.
 * `.clsc-code-background` is applied automatically by services-background.js
 * to the Services section it auto-detects (or to a manually-added
 * "codeline-services-background" class, kept for backwards compatibility).
 */

.clsc-code-background {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #090909 !important;
}

.clsc-code-background,
.clsc-code-background h1,
.clsc-code-background h2,
.clsc-code-background h3,
.clsc-code-background h4,
.clsc-code-background h5,
.clsc-code-background h6,
.clsc-code-background p,
.clsc-code-background span,
.clsc-code-background li,
.clsc-code-background a,
.clsc-code-background .elementor-widget-container,
.clsc-code-background .elementor-heading-title,
.clsc-code-background .elementor-widget-text-editor,
.clsc-code-background .elementor-widget-text-editor *,
.clsc-code-background .elementor-widget-theme-post-content,
.clsc-code-background .elementor-widget-theme-post-content *,
.clsc-code-background .clsc-services-heading,
.clsc-code-background .clsc-services-copy,
.clsc-code-background .clsc-services-copy * {
    color: #ffffff !important;
}

.clsc-code-background .elementor-background-video-container,
.clsc-code-background .elementor-background-video-hosted,
.clsc-code-background .elementor-background-video-embed,
.clsc-code-background > .elementor-background-overlay {
    display: none !important;
}

.clsc-code-background > .clsc-code-background-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.clsc-code-background > :not(.clsc-code-background-canvas):not(.elementor-background-video-container):not(.elementor-background-overlay) {
    position: relative;
    z-index: 2;
}

/*
 * Services heading: elegant classic-serif look. font-size steps down at the
 * plugin's own tablet/mobile breakpoints (matching .clsc-card's).
 *
 * services-background.js only adds this class; the heading stays inside
 * its own Elementor widget. Layout (margin, padding, width, alignment) is
 * deliberately left to the Elementor widget and container controls, and
 * only applies inside the dark Services background.
 */
.clsc-code-background .clsc-services-heading {
    font-family: Georgia, "Times New Roman", serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-shadow: none;
    font-size: 40px;
}

@media (max-width: 1024px) {
    .clsc-code-background .clsc-services-heading {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .clsc-code-background .clsc-services-heading {
        font-size: 26px;
    }
}