body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    overflow: hidden; /* Prevent scrollbars */
    position: relative; /* Make body a positioning context for content-overlay */
}

/* Container for the video with fixed height */
.video-background-fixed-height-container {
    position: relative; /* Crucial for positioning the video inside it */
    width: 100%; /* Full width */
    height: 400px; /* FIXED HEIGHT for the video area */
    overflow: hidden; /* Crop video if it extends beyond this area */
    /* If you want the video area to be at the top, no need for flex/absolute positioning here */
    background-color: black; /* Fallback background for video not loading */
}

#myVideo {
    position: absolute; /* Position relative to its parent .video-background-fixed-height-container */
    top: 0;
    left: 0;
    width: 100%; /* Take full width of its parent container */
    height:100%;
    object-fit: cover; /* Ensures video fills the space without distortion */
    z-index: -1; /* Puts the video behind content */
}

/* Overlay for the image - still covers the whole page to center the image */
.content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* Center horizontally */
   /*  align-items: center; Center vertically */
    z-index: 1; /* Puts content above the video */
}

.blur-section {
    position: absolute;
    top: 50%; /* Position it vertically in the middle of the video container */
    left: 10%; /* Position it 10% from the left of the video container */
    width: 80%; /* Make it span 80% of the video container's width */
    height: 30%; /* Make it span 30% of the video container's height */
    transform: translateY(-50%); /* Adjust to truly center vertically based on its own height */
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white background for visibility */

    /* The magic for the blur effect */
    backdrop-filter: blur(8px); /* Apply blur to content behind this element */
    -webkit-backdrop-filter: blur(8px); /* For Safari compatibility */

    z-index: 0; /* Placed above the video (-1) but below the centered image (1) */
    border-radius: 10px; /* Optional: adds a slight rounded corner */
}


.centered-image {
    width: 300px;
    height: 300px;
    max-width: 90%; /* Ensure image scales down on smaller screens */
    max-height: 90%; /* Ensure image scales down on smaller screens */
    object-fit: contain; /* Ensures the image fits within its dimensions */
    border-radius: 8px; /* Optional: adds a slight rounded corner to the image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: adds a subtle shadow */
}

/* Media queries for image responsiveness (video height is fixed) */
@media (max-width: 768px) {
    .centered-image {
        width: 250px;
        height: 250px;
    }
}

@media (max-width: 480px) {
    .centered-image {
        width: 180px;
        height: 180px;
    }
}