/* ===== Section Theming: Dark & Light Sections ===== */
/* Apply .section--dark to any section with a dark (bg-1) background.
   All text-color overrides below are scoped to this class, so adding
   a new dark section only requires adding the class in HTML — no new CSS needed. */

/* Hero USP icons in brand bright green */
.start-section .icon-box7 .icons {
    color: var(--color-accent-green);
}

/* Hero video frame: rounded corners */
.start-section .col-lg-7 .relative {
    border-radius: 16px;
    overflow: hidden;
}

.start-section .col-lg-7 video {
    display: block;
    border-radius: 16px;
}

/* Hero headline: center the width-constrained block so it aligns with the
   subtitle and sub-headline (max-width utilities don't auto-center). */
.start-section .heading-title .title {
    margin-left: auto;
    margin-right: auto;
}

/* Ensure text-green.mask underline renders correctly when text spans multiple lines */
.faq-section .title .text-green.mask {
    display: inline-block;
}

/* --- General dark-section text overrides --- */
.section--dark .heading-title .des {
    color: var(--color-text-light);
}

.section--dark .heading-title .title,
.section--dark .tab-service-content .title,
.section--dark .tab-service-content h3.heading-title {
    color: var(--color-text-white-strong);
}

.section--dark .tab-service-content .des,
.section--dark .tab-service-content .icon-listing li p {
    color: var(--color-text-light);
}

/* --- Service tab nav within any dark section --- */
.section--dark .nav-tabs-service .nav-item .nav-link {
    color: var(--color-text-light-muted);
    border-bottom-color: var(--color-border-light-mid);
}

.section--dark .nav-tabs-service .nav-item .nav-link:hover,
.section--dark .nav-tabs-service .nav-item .nav-link.active {
    color: var(--color-accent-green);
}

.section--dark .nav-tabs-service .nav-item .nav-link.active {
    border-bottom-color: var(--color-accent-green);
}

.section--dark .nav-tabs-service .nav-item .nav-link i {
    color: var(--color-accent-green);
}