/* Navbar logo size only */
#mainNav .navbar-brand img {
    height: 70px;   /* normal logo size */
    width: auto;
    transition: height 0.3s ease;
}

/* Shrink logo on scroll */
#mainNav.navbar-shrink .navbar-brand img {
    height: 50px;
}

/* Default navbar background with opacity */
#mainNav {
    background-color: rgba(0, 0, 0, 0.7); /* black 50% opacity */
    transition: background-color 0.3s ease;
}

/* When the page scrolls, it gets the "navbar-shrink" class */
#mainNav.navbar-shrink {
    background-color: rgba(0, 0, 0, 0.95); /* darker when scrolling */
}