:root {
    --bs-light-bg-subtle: #f1f5f9; /* light mode color */
}

@media (prefers-color-scheme: dark) {
    :root {
        --bs-light-bg-subtle: #1f293a; /* dark mode color */
    }
}

    .section-with-overlay {
    position: relative;
    overflow: hidden;
}

        .section-with-overlay::before {
            content: "";
            position: absolute;
            inset: 0;
            /* dark tint at top, transparent at bottom */
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
            z-index: 1;
        }

    .section-with-overlay .container {
        position: relative;
        z-index: 2;
    }


.right-slant-shape:after {
    content: "";
    display: block;
    background-color: var(--bs-light-bg-subtle); /* dynamic in dark/light mode */
}