.logo-container {
    /* You can define the maximum width for the logo's area */
    max-width: 200px; /* Adjust this value as needed */
    margin: auto; /* Centers the container if it's smaller than the screen */
}

.logo {
    /* The core of responsiveness: the image will scale to 100% of its container's width */
    width: 100%;
    /* This ensures the image never exceeds its original (intrinsic) size */
    max-width: 34%; 
    /* This maintains the image's aspect ratio automatically */
    height: auto; 
    /* Ensures smooth scaling across different browsers */
    display: block;
}