Center logo with Burger icon on right

sorry i thought you like to have that look of your example page.
So maybe you try :

#top .av-burger-overlay-bg {
  z-index: 3;
  opacity: 1;
  background-image: url(https://sonoranwaters.armourcloud.io/wp-content/uploads/2025/04/Custom-Pool-Designer-and-Builder-in-Scottsdale-Sonoran-Waters-3-1.jpg);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  display: block;
  position: fixed;
}

#top .av-burger-overlay-inner {
  z-index: 3;
  opacity: 1;
  background-image: url(https://sonoranwaters.armourcloud.io/wp-content/uploads/2025/04/Sonoran-Waters-Logo_LONG.png);
  background-repeat: no-repeat;
  background-size: 450px;
  background-position: center top;
  background-color: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px)
}

you header settings and logo behaviour should be corrected generally.
Overlapping with burger icon etc. – that is something we can do for burger overlay then too.

and maybe this is nicer on transparency headers:

#top .av-main-nav-wrap {
  float: right;
  position: relative;
  z-index: 3;
  padding: 0  !important;
  margin: 0 0 0 15px !important;
}

.header_color.av_header_transparency .av-hamburger-inner, 
.header_color.av_header_transparency .av-hamburger-inner::before, 
.header_color.av_header_transparency .av-hamburger-inner::after {
  background-color: #FFF ;
}

#top .av_header_transparency .phone-info, 
#top .av_header_transparency .social_bookmarks li a {
  color: #FFF;
}

#top .av_header_glassy.av_header_transparency .avia-menu.av_menu_icon_beside {
  border: none !important;
}

First have a look at the burger opened layout – this is realy nearby your example page – isn’t is?

now your columns – best would be if the section got a custom class that no other sliders are influenced :

look for testing purpose:

@media only screen and (max-width: 767px) {
  #top .avia-content-slider-element-container .avia-content-slider-inner .slide-entry-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }

  #top .avia-content-slider-element-container .avia-content-slider-inner .slide-entry-wrap .slide-entry {
    flex: 1 1 100%;
    margin: 0 0 20px !important;
  }
}

the logo positioning with 37% on the left is not so advisable.

i would first make the header fixed even in between 768 and 989 px.
then make for the nav a determined width – f.e. 170px

#top .av-main-nav-wrap {
  float: right;
  position: relative;
  z-index: 3;
  padding: 0  !important;
  margin: 0 0 0 15px !important;
}

.header_color.av_header_transparency .av-hamburger-inner, 
.header_color.av_header_transparency .av-hamburger-inner::before, 
.header_color.av_header_transparency .av-hamburger-inner::after {
  background-color: #FFF !important; 
}

#top .av_header_transparency .phone-info, 
#top .av_header_transparency .social_bookmarks li a {
  color: #FFF !important;
}

#top .av_header_glassy.av_header_transparency .avia-menu.av_menu_icon_beside {
  border: none !important;
}

#top .main_menu {
  width: 170px
}

#top .logo {
  width: calc(100% - 170px);
  left: unset;
}

#top .logo img {
  left: 50%;
  transform: translateX(-50%)
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
  }
}

@media only screen and (max-width: 767px) {
  #header .social_bookmarks {
    display: none !important;
  }
}

on https://kriesi.at/support/topic/center-logo-with-burger-icon-on-right/#post-1481879 it is the setting now.
change font-size to 36px or something else.

#top #wrap_all #av-burger-menu-ul li {
  font-size: 36px !important;
}