/* Ensure body and html take full height */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* Prevents scrollbars if the image overflows */
}

/* Center Container Styling for Homepage */
.center-container-homepage {
    display: flex; /* Use flexbox to center content */
    justify-content: center; /* Horizontally center content */
    align-items: center; /* Vertically center content */
    height: 100vh; /* Full viewport height */
    width: 100vw; /* Full viewport width */
    margin: 0; /* Ensure no margin interferes */
    padding: 0; /* Ensure no padding interferes */
}

/* Image Container Styling for Homepage */
.image-container-homepage {
    display: flex; /* Use flexbox for image container */
    justify-content: center; /* Horizontally center image */
    align-items: center; /* Vertically center image */
    width: 500px; /* Fixed width */
    height: 1000px; /* Fixed height */
    overflow: hidden; /* Hide overflow if image is larger */
}

/* Image Styling for Homepage */
.centered-image-homepage {
    width: 100%; /* Make image fill the container's width */
    height: 100%; /* Make image fill the container's height */
    object-fit: cover; /* Ensure the image covers the container without distortion */
    display: block; /* Remove default inline spacing */
}