just like on :
https://kriesi.at/support/topic/add-logo-to-full-screen-slider/#post-1480358
f.e.:
(and maybe a small drop-shadow to the png

#top .avia-fullwidth-slider::after {
  position: absolute;
  display: block;
  content: "";
  width: 18vw;
  height: 15.3vw;
  max-width: 411px;
  max-height: 349px;
  min-width: 200px;
  min-height: 170px;
  top: 120px;
  left: 80px;
  background-image: url(/wp-content/uploads/2025/03/Gathering-Barn-Banner-Logo-.png);
  background-repeat: no-repeat;
  background-size: calc(100% - 40px) calc(100% - 40px);
  background-position:center center;
  filter: drop-shadow(1px 1px 2px #666);
}

@media only screen and (max-width: 767px) {
  #top .avia-fullwidth-slider::after {
    top: 2vw;
    left: 2vw;
  }
}

but i see that the slider is not shown on mobile? And we had to place always a fallback image for videos?
dear mods – has this always been the case with Enfold?
It is unfortunate that we do not have the opportunity to decide for ourselves.

now we had top better find settings for relative dimension for your overlay image. …
and maybe it is better to have that only on bigger screens?

@media only screen and (min-width: 768px) {
  #top .avia-fullwidth-slider::after {
    position: absolute;
    display: block;
    content: "";
    width: 18vw;
    height: 15.3vw;
    max-width: 300px;
    max-height: 255px;
    top: 80px;
    left: 5vw;
    background-image: url(/wp-content/uploads/2025/03/Gathering-Barn-Banner-Logo-.png);
    background-repeat: no-repeat;
    background-size: calc(100% - 40px) calc(100% - 40px);
    background-position:center center;
    background-color: rgba(159, 171, 154, 0.5);
    backdrop-filter: blur(4px);
    border-radius:20px;
    border: 2px solid #9fab9a;
  }
}

and for extra large screens it might be best to have a max-width/-height
always stay the aspect ratio of your inserted image (in your case 1/0.85)

Sorry – now i see that you used the fullscreen slider! why?
Anyway – this is similiar to the other slider – but then the video is cropped on some screen width.

because your png isn’t transparent it does not make sense to have a limit of after pseudo-container:

#top .avia-fullscreen-slider:after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 150px;
  left: 50px;
  background-image: url(https://www.thegatheringbarn.co.uk/wp-content/uploads/2017/04/logo2.png);
  background-repeat: no-repeat;
  background-size: 200px;
  background-position: 20px 10px;
}

as menitoned above – use a custom class to better select.

PS: this page is transparent? why don’t you use the logo instead for “branding”

did you try ismaels code?
in your div there is no id – only a data-sender-form-id thats why i ask.

but: you see on ismaels code the callback – so this might be work as expected.
maybe a delegate : ‘a’,

is missing – just try first the code above.

please remember that ( this is definitly not the trouble with your scripts – but just to mention )

$(window).load(function() {

is deprecated since jQuery 3.x

you had to use now:

$(window).on('load', function(){

or use those icons inside a text-block element: see example page at the bottom.

[av_textblock fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' textblock_styling_align='' textblock_styling='' textblock_styling_gap='' textblock_styling_mobile='' size='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' fold_overlay_color='' fold_text_color='' fold_btn_color='theme-color' fold_btn_bg_color='' fold_btn_font_color='' size-btn-text='' av-desktop-font-size-btn-text='' av-medium-font-size-btn-text='' av-small-font-size-btn-text='' av-mini-font-size-btn-text='' fold_timer='' z_index_fold='' id='' custom_class='center-stars' template_class='' element_template='' one_element_template='' av_uid='av-psa03l' sc_version='1.0' admin_preview_bg='']
[av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='left' color='#eacf00' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-8z2voh' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='left' color='#eacf00' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-27dcl9d' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='left' color='#eacf00' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-1kvehwh' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='left' color='#eacf00' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-4al7hd' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='left' color='#eacf00' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-n9hech' sc_version='1.0' admin_preview_bg=''][/av_font_icon]
[/av_textblock]

btw: this handles visibility of that line:

#top .av-special-heading.blockquote .special-heading-border .special-heading-inner-border {
  opacity: 0.8;
}

du hast auch nicht erwähnt, dass du die subline oberhalb der Headings hast.

für dich jetzt zum Testen :

#top .av-special-heading.blockquote {
  display: grid;
  margin: 0;
  row-gap: 10px;
  grid-auto-flow: row;
  grid-template-columns: auto 1fr;
}

#top .av-special-heading.blockquote .av-special-heading-tag {
  grid-area: area1;
  padding-right: 20px
}

#top .av-special-heading.blockquote .special-heading-border {
  display: block;
  grid-area: area2;
}

#top .av-special-heading.blockquote .av-subheading_above {
  grid-area: area3;
  margin-bottom: 20px; 
}

#top .av-special-heading.blockquote {
  grid-template-areas: 
    "area3 area3" 
    "area1 area2";
}

dann siehst du schon mal wie es wird.

_____________

um es selektiver zu gestalten müsstest du diesen Headings noch eine benutzer Klasse hinzufügen.
um für beide Fälle gewappnet zu sein.
z.B: subline-above oder subline-below

dann :

/* === besides the heading === */

#top .av-special-heading.blockquote.subline-above,
#top .av-special-heading.blockquote.subline-below {
  display: grid;
  margin: 0;
  row-gap: 0px;   /*=== influences the distance between heading and subheading  ===*/
  grid-auto-flow: row;
  grid-template-columns: auto 1fr;
}

#top .av-special-heading.blockquote.subline-above .av-special-heading-tag,
#top .av-special-heading.blockquote.subline-below .av-special-heading-tag {
  grid-area: area1;
  padding-right: 20px
}

#top .av-special-heading.blockquote.subline-above .special-heading-border,
#top .av-special-heading.blockquote.subline-below .special-heading-border {
  display: block;
  grid-area: area2;
}

#top .av-special-heading.blockquote.subline-below .av-subheading_below {
  grid-area: area3;
  margin-top: -10px; /*=== if you like to have less distance between heading and subheading  ===*/
}

#top .av-special-heading.blockquote.subline-above .av-subheading_above {
  grid-area: area3;
  margin-bottom: 10px; /*=== if you like to have less distance between heading and subheading  ===*/
}

#top .av-special-heading.blockquote.subline-above  {
  grid-template-areas: 
    "area3 area3" 
    "area1 area2";
}

#top .av-special-heading.blockquote.subline-below  {
  grid-template-areas: 
    "area1 area2" 
    "area3 area3";
}

see: https://webers-testseite.de/bildvergleich/

important on animated gifs is that you enter the original file – not a recalculated smaller file.

Report please if google webmaster tools make a difference.

by the way: on former times it is better to place the anchor-tag inside the heading-tag (as enfold do with f.e. entry-title etc.)
since html5 / xhtml this is not mandatory. You can have it vice-versa:

function use_text_logo_only($logo){
    $link = apply_filters( 'avf_logo_link', home_url( '/' ) );
    $logo_tag = "h1";
    $logo_heading = "My Website Textlogo";
    $alt = get_bloginfo( 'name' );    
    $title = get_bloginfo( 'name' );
   
    $logo = '<a class="logo text-logo" href="'.$link.'" alt="'.$alt.'" title="'.$title.'"><'.$logo_tag.'>'  .$logo_heading.  '</'.$logo_tag.'></a>';
    return $logo;
}
add_filter('avf_logo_final_output','use_text_logo_only');

to aline that heading with f.e. navigation to the right some css is needed:

#top .logo.text-logo  {
  display: flex;
  justify-content: left;
  align-items: center;
  width: auto;
}

#top .logo.text-logo h1  {
  margin: 0 !important;
  font-size: 30px;
}

forget about that – use: https://kriesi.at/support/topic/how-to-make-the-text-logo-h1/#post-1479660
no subtext is needed!

on shrinking header you need:

#top .logo.text-logo,
#top .logo.text-logo a {
  display: flex;
  justify-content: left;
  align-items: center;
  width: auto;
  margin: 0 !important;
}

did you test that allready in a combination:
(on W3C it is allowed to have inside h-tag inline elements ( img, span …))

PS: https://www.seo-suedwest.de/4490-google-es-ist-ok-das-logo-einer-webseite-als-h1-ueberschrift-auszuzeichnen.html
and
https://www.youtube.com/watch?v=ZKN8B3yeFAQ&t=3192s

there is only a filter to change the whole logo tag – but the subtext stays at span.

function new_avf_logo_headline($headline) {
  $headline = "h1";
  return $headline;
}
add_filter( 'avf_logo_headline', 'new_avf_logo_headline', 10, 1);

but: that is something different.

you only have the chance then to change it in source-code : function-set-avia-frontend.php line 621:

$sub = "<span class='{$subclass}'>{$sub}</span>";

Du kannst es mit einem Accordion auch gut hinbekommen ( mit nur einem Toggle ), und hast dann sogar im Element selber Einfluss auf die Animationsgeschwindigkeit. Ausserdem ist der Button ( so du denn einen möchtest ) wahlweise ober- bzw. unterhalb platzierbar.
Zugegeben das ist etwas sehr gestyled – aber hier siehst du mal beide Anwendungen nebeneinander:
https://webers-testseite.de/fold-unfold-toggler/

Du kannst bei dem Fold/Unfold überigens den Verlauf wegnehmen; musst dann aber die Höhe so abpassen das ein Zeile nicht angeschnitten wird.

.avia-fold-unfold-section .av-fold-unfold-container::after {
  background: none !important;
}