CSS formatting for logo

I just need a bit of help with some custom css code, it should be straight forward but I cant get it to do exactly what I want.

If you look on this site I’m working on, https://vividoelectronics.com when you scroll down there is a sticky header at the top that changes color and the logo shrinks down. I want to increase the size of that shrunken logo a bit, but while keeping the header the same height.

If i go into debug mode and select that logo img.site-logo there is this css code

@media only screen and (min-width: 63.9375em)
.site-header.sticky .main-navigation, .site-header.sticky .site-tools, .site-header.sticky .site-branding img {
height: 44px;
line-height: 33px;
width: auto;
}

if I change the height to something bigger it makes the logo bigger, but it now doesnt align with the menu items and it also makes the header thicker which I don’t want. I cant seem to figure it out.

Any help would be greatly appreciated!