In my opinion, webp makes sense if you use it as a replacement for png. If you have an image without transparency, jpg is just as good.

Would you like to have an upward arrow to indicate a downward movement? … ( on top you are talking about scroll-top-link )
Does that really make sense?

if you only want to turn arround :

#top .scroll-down-link.avia-svg-icon svg:first-child {
  transform: scaleY(-1)
}

but now you are talking about down-open arrow – but isnt it the down-open arrow on default?

well i thought that webp is allready included to autolinkElements in avia-snippet-lightbox.js – there is a[href$=webp] in the list.
So what version of enfold do you run on that page? i guess it is in there since newer Enfold Versions.

Right-aligned to what? At the moment, it looks as if they are right-aligned to the line above. Or should it be right-aligned with the page content again, as is actually standard with Enfold?
(See here on the blog on the bottom)

where did you insert those snippets above? (child-theme functions.php ?)

what about my question: Can you insert the icon as symbol if you place an element ( icon ) to a page?
if this is not possible – then the upload or the creation on fontello is not well done.

What font-name do you see on Font-Manager (red underlined names) for that uploaded font:

btw. your code sometimes leads to show the social icons twice. Because the example of medical demo has the navigation below the logo container.
Then we have those social icons twice in the DOM

Therefore (menu below the logo) , it is better to define your code as follows:
( for those settings where the social bookmarks are not visible below 767 you had to adjust that code)

@media only screen and (max-width: 479px) {
  .responsive #top #wrap_all #header .main_menu > .social_bookmarks {
    display: block;
  }
}

if you like to have that on Enfold – Blog Layout – to choose the icons for “share on …”

function avia_add_social_share_link_arguments($args){
    $tripadvisor = array('tripadvisor' => array("encode" => true, "encode_urls" => false, "pattern" => "https://www.tripadvisor.com/", 'label' => __("Share on Trip Advisor", 'avia_framework')));
    $args = array_merge($tripadvisor, $args);  
    return $args;
}
add_filter('avia_social_share_link_arguments', 'avia_add_social_share_link_arguments', 10, 1);

here are some rulesets that belong to your question.

#top #header_main_alternate,
#top #header .av-main-nav > li > a {
  background-color: #aaa;
}

#top #header .av-main-nav > li > a,
top #wrap_all #header #menu-item-search > a{
  border-color: #fff  !important;
}

#top #header .av-main-nav > li > a .avia-menu-text {
  color: #333
}

#top #menu-item-search a.avia-svg-icon svg {
  z-index: 1;
  fill: #333 !important;
}

_____________
btw. dear mods : why is the search icon set to z-index: -1 on header_main_alternate on default ?

I would probably do things differently, especially when it comes to responsive layouts.
The grid box layout has several advantages, especially if you want the containers to be in different positions than in the DOM.
In this case, I would define the individual elements as special grid areas. You can choose the names of the areas freely, but some names are obvious choices.

The whole thing would then possibly respond as follows (however, this can also be customized to your requirements):

(click to enlarge)

The best thing would definitely be to remove the settings that are already set from your CSS, but for testing purposes, I think it will also work if you add this CSS to the end of your quick CSS.

i would change the settings for your widget divs to:

/* and change these values */
.phone {
  background-image: url(https://peter-test1.co.uk/wp-content/uploads/2025/09/phone-icon.png);
  background-repeat: no-repeat;
  background-position: left 4px;
  padding-left: 30px;
  padding-top: 0;
  font-size: 24px;
  color: #fff;
  overflow: visible !important;
  line-height: 30px;
}

.headlogos {
  background-image: url(https://peter-test1.co.uk/wp-content/uploads/2025/09/bda-hcpc-logos.png);
  background-repeat: no-repeat;
  display: block;
  width: 269px;
  height: 54px;
  background-position: center left;
  Float: left;
}

and grid-layout settings:

#top #header #header_main .container.av-logo-container .inner-container {
  display: grid !important;
  gap: 10px;
  grid-auto-flow: row;
  grid-template-columns: 210px 1fr;
  grid-template-areas: 
    "logo widget"
    "logo menu";
}

#top #header #header_main .container.av-logo-container .logo {
  grid-area: logo;
}

#top #header #header_main .container.av-logo-container .main_menu {
  grid-area: menu;
}

#top #header #header_main .container.av-logo-container .widget {
  grid-area: widget;
  justify-self: end;
}

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

#top #header #header_main .container.av-logo-container .widget:before,
#top #header #header_main .container.av-logo-container .widget:after {
  display: none;
}

@media only screen and (max-width: 1000px) {
  #top #header #header_main .container.av-logo-container .main_menu {
    justify-self: center
  }
}

@media only screen and (max-width: 889px) {
  .responsive #top #wrap_all .container {
    width: 95%;
    max-width: 95%;
  }
  #top #header #header_main .container.av-logo-container .inner-container {
    display: grid !important;
    gap: 10px;
    grid-auto-flow: row;
    grid-template-columns: 1fr 80px;
    justify-content: space-between;
    grid-template-areas: 
      "logo menu"
      "widget widget";
  }
  #top #header #header_main .container.av-logo-container .widget {
    justify-self: auto;
  }

  #top .topcontainer {
    display: flex;
    gap: 20px;
    flex-flow: row wrap;
    justify-content: space-between;
  }
}

@media only screen and (max-width: 605px) {
  #top .topcontainer {
    justify-content: center;
  }
} 

i guess both cells that are not displayed in responsive casse have only background-images and no content?

by the way – there is a possiblity to have on content an attribute f.e.:
(by the way both focus-visible and focus-within do not influence the click style !)

#top a.attachment:focus-visible:after {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(3px);
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 24px;
  color: #000;
  z-index: 5;
  content: attr(title);  
}

btw: You need to be more precise with the selector. Otherwise, it will address all anchors.

or
#top a.portfolio:focus-visible:after
etc.

you can use a pseudo-container on that div.avia-divider-svg – have a look in your DOM what is the specific class for your divider.
On my testpage it is: avia-divider-svg-reha-bad-hamm

because the bottom dividers are transformed – we had to rotate back your “superman”

https://webers-testseite.de/rbh-bogen/

PS: there is a transparent background-color on the pseudo-container after – that you can see where it is positioned. You had to remove that declaration.

Edit: Sorry did not read carefully your post.
You try to have a divider on grid-row – lets see … brainstorming …

Not only is it better for the positioning of the button, but if you want to limit the length of the excerpt, for example, the button will not disappear.

By the way, these downloaded files are located in:

/wp-content/uploads/dynamic_avia/avia_demo_files/

so maybe the docu had to be corrected to this new path too. (with dynamic_avia subfolder)

your construction path is then:

/wp-content/uploads/dynamic_avia/avia_demo_files/constuction/
    // and not
/wp-content/uploads/avia_demo_files/constuction/