.hero .hero-background .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--background-color), transparent 70%) 0%, 
        color-mix(in srgb, var(--background-color), transparent 70%) 100%);
}
.hero p {
  color: rgba(255, 255, 255, 0.9);
}
.step-number i {
  font-size: 2rem;
}

.dark-background {
    --background-color: #252424;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #28323a;
    --contrast-color: #ffffff;
}

.service-details .service-sidebar .service-info .info-list .info-item {
    display: block;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

/* Use site accent color for Bootstrap primary buttons site-wide (articles, sidebar, cards, etc.) */
.btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--contrast-color);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: color-mix(in srgb, var(--accent-color), #000 12%);
    border-color: color-mix(in srgb, var(--accent-color), #000 12%);
    color: var(--contrast-color);
}

.btn-outline-primary {
    color: var(--accent-color);
    border-color: var(--accent-color);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--contrast-color);
}

/* Article/service sidebar: ticket button uses theme primary (accent), not inverted */
.service-details .service-sidebar .contact-card .contact-content .btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--contrast-color);
}
.service-details .service-sidebar .contact-card .contact-content .btn-primary:hover,
.service-details .service-sidebar .contact-card .contact-content .btn-primary:focus,
.service-details .service-sidebar .contact-card .contact-content .btn-primary:active {
    background-color: color-mix(in srgb, var(--accent-color), #000 12%);
    border-color: color-mix(in srgb, var(--accent-color), #000 12%);
    color: var(--contrast-color);
}