/* Video scrubbing container */
.video-scrubbing {
    position: relative;
    overflow: visible;
    min-height: 100vh; /* Use min-height instead of height */
    z-index: 1;
    isolation: isolate !important;
}

/* Divi video background container - default state */
.video-scrubbing .et_pb_section_video_bg {
    position: absolute !important; /* Default to absolute */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 0 !important;
    opacity: 0 !important; /* Hidden by default */
    visibility: hidden !important;
    transition: opacity 0.3s ease !important;
}

/* Video element */
.video-scrubbing .et_pb_section_video_bg video {
    position: absolute !important; /* Default to absolute */
    top: 50% !important;
    left: 50% !important;
    min-width: 100% !important;
    min-height: 100% !important;

    width: 100vw !important;
    height: 100vh !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
    background-color: #000;
}

/* Active video section - applied via JS */
.video-scrubbing.active .et_pb_section_video_bg {
    position: fixed !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.video-scrubbing.active .et_pb_section_video_bg video {
    position: fixed !important;
}

/* Make sure row content appears in front of video - stronger selectors */
.video-scrubbing > .et_pb_row,
.et_pb_section.video-scrubbing .et_pb_row {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    background: transparent !important;
	filter: none;
}

/* Make sure all content in rows is visible */
.video-scrubbing > .et_pb_row *,
.et_pb_section.video-scrubbing .et_pb_row * {
    position: relative !important;
    z-index: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
	filter: none;
}

/* Specific styling for text modules */
.video-scrubbing .et_pb_text,
.video-scrubbing .et_pb_text_inner,
.video-scrubbing .et_pb_text_inner p {
    position: relative !important;
    z-index: 200 !important;
    color: #ffffff !important; /* White text for visibility */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7) !important; /* Text shadow for better readability */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Additional styles for specific elements that might need extra help */
.video-scrubbing .et_pb_button,
.video-scrubbing .et_pb_image,
.video-scrubbing h1,
.video-scrubbing h2,
.video-scrubbing h3,
.video-scrubbing h4,
.video-scrubbing h5,
.video-scrubbing h6,
.video-scrubbing p {
    position: relative !important;
    z-index: 200 !important;
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure columns are visible */
.video-scrubbing .et_pb_column {
    position: relative !important;
    z-index: 100 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hide Divi video controls */
.video-scrubbing .mejs-controls,
.video-scrubbing .mejs-overlay-play {
    display: none !important;
}

/* Scroll container - positioned absolutely to align with section */
#video-scroll-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 500vh;
    z-index: 1;
    background: transparent;
    pointer-events: none; /* Allow scrolling through the container */
}

/* Fix for Divi's section padding */
.video-scrubbing.et_pb_section {
    padding: 0 !important;
}

/* Ensure the section takes up appropriate space */
.et_pb_section.video-scrubbing {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Add spacing between rows for better visibility */
.video-scrubbing .et_pb_row {
    margin-bottom: 50px !important;
    padding: 20px !important;
}

/* Optional: Add a semi-transparent background to rows for better text visibility */
.video-scrubbing .et_pb_row {
    background-color: rgba(0,0,0,0.3) !important;
    border-radius: 5px !important;
}

/* Make the video only visible when the section is in view */
.video-scrubbing {
    isolation: isolate !important;
}

/* Ensure all other sections have proper stacking */
.et_pb_section:not(.video-scrubbing) {
    position: relative !important;
    z-index: 5 !important;
    background-color: inherit;
}

/* Helper classes for different z-index levels if needed */
.z-index-20 { z-index: 20 !important; }
.z-index-30 { z-index: 30 !important; }
.z-index-40 { z-index: 40 !important; }
.z-index-50 { z-index: 50 !important; }

/* Helper classes for different background colors */
.bg-transparent { background-color: transparent !important; }
.bg-white { background-color: #ffffff !important; }
.bg-black { background-color: #000000 !important; }
.bg-gray { background-color: #f5f5f5 !important; }
.bg-dark { background-color: #333333 !important; }