Burger and Social Media icons position on Mobile view

Hello, could you please help me with the CSS code. I’m not sure if I have it right to center the burger icon and the social media icons, from top to bottom, and keep them in the middle of the header. Right now, the icons are too high. Thanks!

https://jackdalten.armourcloud.io/

/* Mobile-only: make logo larger */
@media only screen and (max-width: 767px) {
#top .logo img {
max-height: 110px; /* adjust: 75–95px */
}
}

@media only screen and (max-width: 767px) {
#top .av-burger-menu-main {
top: 50% !important;
transform: translateY(-50%) !important;
margin-top: 55px !important; /* small nudge only */
}
}

/* Show & align social icons on mobile */
@media only screen and (max-width: 767px) {
#top .social_bookmarks {
display: flex !important;
align-items: center;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
margin-top: 55px; /* match burger offset */
z-index: 100;
}

#top .social_bookmarks li {
margin: 0 6px;
}
}