/* Reset default margin and padding */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

/* Full-screen background styling */
.background {
    position: fixed; /* Fix the background to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('bg.webp'); /* Replace with your background image URL */
    background-size: cover; /* Cover the entire viewport */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
}

/* Logo styling */
.logo {
    position: absolute; /* Position the logo absolutely within the background */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust positioning to truly center it */
    max-width: 100%; /* Make the logo responsive */
    height: auto; /* Maintain aspect ratio */
}