.logo {
    width: 100%;        /* Takes full width of its container */
    max-width: 700px;   /* Will not exceed 700px on larger screens */
    height: auto;       /* Maintains aspect ratio */
    float: right;       /* Keeps it floated on the right */
}

/* Optional: On small screens, remove float to center the logo */
@media (max-width: 768px) {
    .logo {
        float: none;
        display: block;
        margin: 0 auto;  /* Centers the image */
    }
}