Logo not displaying correctly on mobile / tablet

Hello,

My logo is displaying correctly on my MacBook, but it's breaking on mobile and tablet. Please see https://unettmedia.com/

I've tried adding some custom CSS found on other threads, but it's not working.

Please help ... it's driving me crazy !!!

Custom CSS being used:

/*show hamburger menu on desktop*/
@Media (min-width: 980px) {
.et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu {
display: none;
}
.et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu {
display: flex;
float: none;
margin: 0 6px;
align-items: center;
}
}
header#main-header.et-fixed-header, #main-header{
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
}
.mobile_menu_bar:before {
color: #000000;
}
@Media only screen and (max-width: 980px) {
#logo {
content: url("https://unettmedia.com/wp-content/uploads/2023/08/UM-Logo.svg");
}
}
@Media (max-width: 767px) {
#masthead {
min-height: unset;
}
}