/* Custom CSS to allow the logo to scale automatically within a max height */
.navbar-brand img.logo {
    height: auto !important;     /* Try to make height automatic based on aspect ratio */
    width: auto !important;      /* Ensure width scales proportionally */
    max-height: 100px !important; /* Set a desired maximum height (e.g., 80px, 100px, 120px). This will kick in if 'auto' makes it too big or if its parent container is taller than expected. */
}

/* Custom CSS for the Footer Logo */
footer img {
    height: auto !important;     /* Allow natural height */
    width: auto !important;      /* Maintain aspect ratio */
    max-height: 80px !important; /* Adjust this value for desired size, e.g., 80px, 100px */
    /* You might also want to center it if it's the only element in its column, e.g.: */
    /* display: block; */
    /* margin: 0 auto; */
}