if you load jQuery in your footer try to give to the script above a priority: 999 f.e.
so the last line is then:
add_action('wp_footer', 'custom_script', 999);

or if you try that link from mike – now the footer got 6 columns (Enfold 5.6) option – then change to:

function ava_re_register_footer_widgets(){
	$footer_columns = avia_get_option( 'footer_columns', '6' );
	for( $i = 1; $i <= $footer_columns; $i++ ){	
		unregister_sidebar('av_footer_' . $i );
		register_sidebar( array(
			'name'		=> 'Footer - Column ' . $i,
			'before_widget'	=> '<section id="%1$s" class="widget clearfix %2$s">',
			'after_widget'	=> '<span class="seperator extralight-border"></span></section>',
			'before_title'	=> '<p class="widgettitle">',
			'after_title'	=> '</p>',
			'id'		=> 'av_footer_' . $i
		) );
	}
}
add_action( 'widgets_init', 'ava_re_register_footer_widgets', 11 );

and if you realy mean “mobile” and not small screen width – you can use the class on html that enfold adds for mobile-devices: avia_mobile

then you may have only a css rule without the media query or if you like to preserve the initial color for bigger screens ( ipad pro or bigger tabletts ) in a combination of both:

@media only screen and (max-width: 767px) { 
	html.avia_mobile {
	    background-color: #eeece9;
	}
}

by the way: i guess you have zipped your font-files on mac OSX System – because the hidden files are uploaded too.
…/uploads/avia_fonts/type_fonts/macosx/._codec-pro-bold.ttf etc.

You can avoid this – there is for example in BetterZip an Option : zip for “PC”

2nd: your hamburger icon is white on white ground ! – maybe you change it to:

#top .header_color div .av-hamburger-inner, 
#top .header_color div .av-hamburger-inner::before, 
#top .header_color div .av-hamburger-inner::after {
  background-color: #1a63ae;
}

long time ago – and your code here on https://kriesi.at/support/topic/search-products-pages-and-posts-enfold/#post-1158002
i use too and posted it here – because i did not found it via search function.

But now i got one problem – how to show the search results page as grid – if attachments are also listed. The known changes in search.php do not work with attachments – and even if i change the custom-query there too – no effort.
I have already asked Günter – but I do not want to overuse his friendliness and accommodation. Maybe you have an idea what it could be.

Yes of course; however, you may need to create the gradient via css.
Header layout would be logo center – menu below
as you can see here on a demo-page: https://kriesi.at/themes/enfold-medical/

But for your logo I would suggest to divide it into a brand and sub-text – like it is here in the forum.
Then you have the possibility with smaller screen widths (mobile devices etc.) to react to the smaller space. E.g. by placing the slogans below the logo or hiding them like here in the forum.

If you got this layout – the nav background is in a header_main_alternate container – so try:

#top #header_main_alternate {
  background: #ca5fb4;
  background: -webkit-linear-gradient(left,  #fc6267 0%,#ca5fb4 50%,#995dfa 100%);
  background: linear-gradient(to right,  #fc6267 0%,#ca5fb4 50%,#995dfa 100%); 
}

but then you need the font to be white ?
and with such a big first-level menu – i would break the hamburger at 990px

@media only screen and (min-width: 990px) {
  #top #header .av-main-nav > li > a .avia-menu-text,
  #top #header .av-main-nav > li > a {
    color: #fff
  }

  #top #avia-menu {
    display:flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
}

etc. but it would be better to see the page – to give exact advice

sorry – i’m participant as you are – so you had to wait til mods are here.

edit those heading element you can find on styling tab at the bottom. : Spacing – and there bottom-padding
on default this is 10px – maybe it is enough vor you to set it to 0px ( negative paddings do not exist )

If those headings are of the same tag ( h2, h3 etc. ) you can use instead of two headings one with a <br> inside
Ignore the warning here – it will work – then you can manage the distance as line-height.

next: if these are two special headings following each other – they following will do have a margin-top value of 50px
so try:

#top .av-special-heading.el_after_av_heading {
  margin-top: 20px 
}

Well you had to know that the custom class goes to the upper container of the image (avia-image-container )
but you like to have that on the image ( the img has that class: avia_image )

#top .careersimage .avia_image {
  border-radius: 5px;  /*** 5px is very small - but it is up to you ***/
}

i hope that if the selector includes one ID ( #top) an important will not be necessary.

with the new enfold – you can set the shrink amount to 10% – maybe Günter will be persuaded to include the 1% mark in the list there. In that case, a reduction would be hardly noticeable, and the classes would then be set anyway.

btw. i’m not willing to check pages that are not secured bei SSL ( TLS ) ;)

or leave the header as it is- no shrink and set your own scroll event on the header
this to child-theme functions.php:
you had to set in this calculation the rgb values!

function bg_color_on_scroll(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
(function($){
  var tStart = 30, // Start transition at 30px from top
      tEnd = 250,   // End at 250px
      cStart = [255, 255, 255],  // White
      cEnd = [255, 215, 0],   // Gold
      cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[2] - cStart[2]];

    $(".header_color .header_bg").css('background-color', 'rgb('+cStart+')');  // take over the start point

    $(document).scroll(function() {
        var p = ($(this).scrollTop() - tStart) / (tEnd - tStart); // % of transition
        p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1]
        var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)];
        $(".header_color .header_bg").css('background-color', 'rgb(' + cBg.join(',') +')');
    });
})(jQuery); 
});
</script>
<?php
}
add_action('wp_footer', 'bg_color_on_scroll');

you see the parameters you can change? – the var values
and the selector ( .header_color .header_bg ) on the bottom might differ to yours – as mentioned above your page is not https.

So – if you follow my instructions – also at the example page – you can see that it works. Even though I do not think this is recommendable.

First of all, you don’t seem to have grasped the difference between classes and ids.
So if you follow the description you will see that I have assigned an ID to the button row and not a class.

There is no option on the button-row element to give different classes or id’s to the single button in a row.
You are only able to do that for the wrapping container. That is the reason for the first snippet:
It passes this assigned ID to the child elements ( avia-button) in combination with an index, so that each avia-button now has a unique ID.

( click to enlarge the image:)

on that screenshot you see that the ID of the button row will be found on each button ( part of that row ) as a unique ID for each Button with a littel addendum ( – button1; -butten2 etc. )

As already mentioned above, you could of course select the individual buttons in the row by count them.
an expression like this will do the selection too: #abc .avia-button:nth-of-type(1) .avia_iconbox_title

__________________________________

Here now my closing comment:

It is generally not recommended to include an H1 tag within an anchor tag. The H1 tag is typically used to indicate the main heading of a webpage, and it is best to reserve it for that purpose. Using an H1 tag within an anchor tag could be seen as a misuse of the tag, and could potentially harm your SEO efforts. Additionally, search engines may not be able to understand the context of the H1 tag if it is used in this way.
It is best to stick to using anchor tags for linking purposes, and using H1 tags for headings.

If you only like to have bigger font-sizes inside a “button” – there are other better and easier ways to obtain it.

This can happen quickly, especially with numerous css rules within a media query. That’s why I usually write the empty media query statement first, including the closing brackets, and then write the rules that have to go in there.

it is up to you – what width is your favorite – but a littel bit more place seems to avoid a lot of troubles.
Edit: looks nicer now – on my point of view!

may i ask you another question: this is intentional : content width: 1130px ?
this is a very small value – isn’t it?
And it is a fallback value of enfold – if there are some css errors ;)
or if you do not set it to responsive behavior – choosen on “general layout” : Responsive Site