/* ═══════════════════════════════════════════════════════════════
   HERO VIDEO CONTROLS
   ═══════════════════════════════════════════════════════════════
   The hero video appearance is controlled by its INLINE style in index.html (line ~113).
   
   OPTION A (ACTIVE) — Natural dark blue (preserves original video color):
     style="filter: brightness(1.05) contrast(1.05); opacity: 0.85; mix-blend-mode: normal;"
   
   OPTION B — Glowing/lighter (screen blend lightens against dark #0a1225 bg):
     style="filter: invert(0) sepia(0.2) hue-rotate(319deg) saturate(1) brightness(1.9) contrast(0.8); opacity: 1; mix-blend-mode: screen;"
   
   OPTION C — Subtle teal glow:
     style="filter: sepia(0.3) hue-rotate(160deg) saturate(1.5) brightness(1.3) contrast(1.1); opacity: 0.9; mix-blend-mode: screen;"
   
   Key levers:
   - opacity: 0-1 (how visible the video is)
   - mix-blend-mode: normal (true color) | screen (lightens/glows) | overlay (contrast)
   - brightness(): >1 = lighter, <1 = darker
   - contrast(): >1 = more contrast
   - hue-rotate(): shifts color (degrees)
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   LIGHT SECTION VIDEO CONTROLS
   ═══════════════════════════════════════════════════════════════
   Light section videos use the same track-bg wave (horizontally flipped).
   Inline style in index.html sets: filter + opacity + mix-blend-mode: screen
   CSS below OVERRIDES opacity & blend-mode with !important:
   - opacity: controls visibility (0.35 = moderate, increase for more visible)
   - mix-blend-mode: multiply (darkens white bg with video) — required for white bg
   The inline "filter:" IS applied (not overridden) — controls color tint.
   ═══════════════════════════════════════════════════════════════ */

/* Background video layers */
.video-section-group,
.hero-header,
.container-fluid.bg-primary.feature {
    position: relative;
    overflow: hidden;
}

.video-section-group {
    background: #ffffff;
    isolation: isolate;
}

.video-section-group.video-group-light-2 {
    background: #f8f9fa;
}

.section-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    z-index: 0;
}


.container-fluid.bg-primary.feature .section-video-bg {
    opacity: 0.18 !important;
}

/* Shared section wrappers should sit above the video */
.video-section-group > .container-fluid,
.hero-header > .container,
.container-fluid.bg-primary.feature > .container {
    position: relative;
    z-index: 1;
}

/* Preserve existing content layering */
.hero-header #header-container,
.container-fluid.bg-primary.feature .container,
#About-us > .container,
#What-We-Do > .container,
#Our-Approach-container > .container,
#Our-Partners > .container,
.container-fluid.bg-light.py-5 > .container {
    position: relative;
    z-index: 1;
}

/* Light video groups: remove existing section decorative backgrounds so the shared video becomes the effect */
.video-group-light-1 #About-us,
.video-group-light-1 #What-We-Do,
.video-group-light-1 #Our-Approach-container,
.video-group-light-2 #Our-Partners,
.video-group-light-2 .coming-soon-section {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* Keep hero background image available underneath the video */
.hero-header {
    isolation: isolate;
}

/* Track record section: preserve full-height layout and keep video under content */
.container-fluid.bg-primary.feature {
    isolation: isolate;
    min-height: calc(100vh - 86px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.container-fluid.bg-primary.feature > .container {
    min-height: calc(100vh - 86px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

#expertise-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.container-fluid.bg-primary.feature .d-flex.rounded.p-3 {
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, rgba(10, 96, 115, 0.98), rgba(20, 24, 62, 0.98)) !important;
    backdrop-filter: none !important;
}

/* Ensure case-study / partner sections stay above the shared background video */
.coming-soon-section,
#Our-Partners {
    position: relative;
    z-index: 1;
}

/* Background videos on mobile — enabled (playsinline + muted allows autoplay on iOS/Android) */
/* To disable on mobile for performance, uncomment the rule below:
@media (max-width: 767.98px) {
    .section-video-bg {
        display: none !important;
    }
}
*/