body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-image: url('calgary.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column; /* Ensure vertical alignment */
}

.responsive-image {
    max-width: 60%; /* Increase the maximum width */
    height: auto; /* Maintain aspect ratio */
    max-height: 80vh; /* Allow it to grow taller but stay within the viewport */
    margin: auto; /* Centers the image */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    body {
        justify-content: flex-start; /* Align content to the top */
    }

    .container {
        justify-content: flex-start; /* Align container to the top */
        padding-top: 10px; /* Add some spacing from the top */
    }

    .responsive-image {
        max-width: 80%; /* Slightly larger logo for smaller screens */
        max-height: 80vh; /* Reduce height to fit better on smaller screens */
    }
}