Apart from the fact that there must be a reason why it doesn’t work and it is certainly interesting to find out how to achieve it i still don’t quite understand why there has to be square brackets in a subject field. What terminology requires this notation there of all places – and could not be done by curved brackets?
I’m forced to use greater than and less than characters when I try to make proportions clear – there is no alternative to use them.

PS : i tested the normal keys on my mac ( it is option 5 and 6 ) in that subject field – and they work – and the e-mail i resceived do have those square brackets.
Where the above-mentioned greater than and less than are not transmitted!

Or : look to the docu: https://kriesi.at/documentation/enfold/icon/#download-fontello-or-flaticon-icons-included-in-enfold-demos

by the way: on the functions.php there are a lot of conditions for different scripts/styles – does the code only look to the closest conditon that is found?

Why i ask: i do want to change two scripts : sticky header and now lightbox . But on both there is only one $condition ( as in functions.php too )

function wp_change_parent_scripts() {
	global $avia_config;
	$vn = avia_get_theme_version();
	$options = avia_get_option();
	$child_theme_url = get_stylesheet_directory_uri();
	$min_js = avia_minify_extension( 'js' );
	
	wp_deregister_script( 'avia-sticky-header' );
	$condition  = ( isset( $options['header_position'] ) && $options['header_position'] == 'header_top' );
	$condition2 = ( isset( $options['header_sticky'] ) && $options['header_sticky'] == 'header_sticky' ) && $condition;
	avia_enqueue_script_conditionally( $condition2 , 'avia-sticky-header-child', "{$child_theme_url}/js/avia-snippet-sticky-header{$min_js}.js", array('avia-default'), $vn, true);
	
	wp_deregister_script( 'avia-lightbox-activation' );
	$condition = ! empty( $avia_config['use_standard_lightbox'] ) && ( 'disabled' != $avia_config['use_standard_lightbox'] );
  	avia_enqueue_script_conditionally( $condition , 'avia-lightbox-activation-child', "{$child_theme_url}/js/avia-snippet-lightbox{$min_js}.js", array('avia-default'), $vn, true);
}
add_action( 'wp_enqueue_scripts', 'wp_change_parent_scripts', 100 );

You want to have a different ratio than 1/2 – then look for having a child theme solution :
read the whole topic – but the two values to insert to the avia-sticky-header-script.js could be determined by: https://kriesi.at/support/topic/shrinking-of-header-amount-an-info/#post-1044887
example on that page is start on 100px – after shrinking the header-height should be: 40px …
PS: in the meantime ( enfold 5.4.1) it is line 78 and 91 to change

if you want to preserve the 1/2 ratio but only want to have a different logo height – you can set a different calculation on the same js – file on the line:

logo.css({'maxHeight': newH + 'px'});

This wasn’t meant as code for functions.php either; if I put something like this out there, I’ll write it explicitly.
It was what I found on the net as a suggestion, so you should better ask the developer of the plugin! The fact is that it has to do with the overflow-y of the background. Whether they have a hook for that or you can enter that in the callbacks at the plugin you have to ask the developer there.

Are these bookmarks the same that you have entered on enfold options ?
If so you can make your own social-bookmark shortcode – put this to your child-theme functions.php

function social_bookmarks_shortcode() {
  $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
  $social = avia_social_media_icons($social_args, false);
  return $social;
}
add_shortcode('social-bookmarks', 'social_bookmarks_shortcode');

and this to your quick css:

#footer .widget ul.social_bookmarks {
    display: inline-flex;
    gap: 0px 10px;
}

#footer .widget ul.social_bookmarks li {
    border: none
}

then you can use on your footer widgets a text widget to insert your social bookmarks by: [social-bookmarks]

try to give to the svg an absolute width not percent or vw, vh etc. pp.
this might be a huge value 1000px f.e. the surrounding container will then limit the size ( in most cases ).

for example :

#top #main img[src*=".svg"],
#top #main svg {
  width: 1000px;
}

another point could be on inline svgs, that your server does not show svgs in a correct content-type ( text/xml ) – it should be handled as : img/svg+xml
you can try to force it be htaccess file in your route directory :
put this to your htaccess file:
AddType image/svg+xml .svg .svgz

in addition to Ismaels code do not forget to remove those little paddings and margins ( on titles etc.)
the distance between the list items comes then from a margin-bottom:

.avia-icon-list .iconlist_content_wrap {
    padding: 0
}

ul.avia-icon-list li {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 0;
    margin-bottom: 50px;
}

ul.avia-icon-list li article {
    min-height: 45px;
    flex: 1 1 80%;
}

ul.avia-icon-list li article .av_iconlist_title {
    margin: 0 !important;
    top: 0
}

you do not have a child-theme in use?
for the custom class there is an extra input field on the advanced tab – developer settings : custom css class
But insert it without a dot in front

if not – try to place it at the end of the parent functions.php just before:

// here is a good place for it

require_once( 'functions-enfold.php' );

there is an extra comment on that :

/*
 *  register custom functions that are not related to the framework but necessary for the theme to run
 */

if it is always the same gradient you like to insert – then you can add it via jQuery script
f.e.: a color-section with custom class: add-gradient

function add_gradient_to_section_bg_image() { 
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
(function($){
	$('.avia-section.add-gradient').each(function() {
		var bgImg = $(this).css('background-image');
		var bgPos = $(this).css('background-position');
		if($(this).hasClass('av-parallax-section')){
			$(this).css('background-image', 'linear-gradient( to top, #8D005B 0%, #8D005B 90%, black 50%, black 100% )');
			$(this).find('.av-parallax-inner').css('background-color', 'transparent');
		}
		if($(this).hasClass('avia-bg-style-fixed')){
			var headerHeight = $("#header").height();
			$(this).css({
			'background-image' : ''+bgImg+' ,linear-gradient( to top, #8D005B 0%, #8D005B 90%, black 50%, black 100% )',
			'background-position' : '  '+bgPos+' , 0px '+headerHeight+'px',
			'background-color' : 'black',
			});
		} 
		else {	
			$(this).css('background-image', ''+bgImg+' ,linear-gradient( to top, #8D005B 0%, #8D005B 90%, black 50%, black 100% )');
		}
	}); 
})(jQuery);
});
</script>
<?php 
}
add_action('wp_footer', 'add_gradient_to_section_bg_image');

But: but the background-repeat/background-size will be the same as the alb settings for the image. So if you like to have different settings for the gradient – we had to add additional script.
for example: for fixed positioning we had to shift the gradient from top to header-height distance if the section is the first element

see: https://enfold.webers-webdesign.de/two-bg-images/

https://webers-testseite.de/multiple-background-images/

the order of naming in the rule determines the layer order !
a background-color had to be placed in the rule as last

or try: https://webers-testseite.de/sticky-sidebar/

btw. this could be transfered to columns inside color-sections too.
https://webers-testseite.de/sticky-elements/

can you show me a link to the image you like to influence?

maybe a clip-path is a nice solution:
https://bennettfeely.com/clippy/

the clip-path is like a “keyhole” through which you can see. Look: https://webers-testseite.de/clippy/

long time ago i managed to implement a second footer row.
on Enfold Options you will see:

On widgets your will have :

you will need for it a child-theme footer.php a child-theme functions.php snippet and less code for quick css.

The snippet is:

/***** insert the options dialog to Enfold Footer segment. Just after the other footer_columns ****/
function my_avf_option_page_data_add_elements( array $avia_elements = array() ){
  $slug = 'footer';
  $id = 'footer_columns';
  
  $new_element =  array(
  "slug"  => "footer",
  "name"  => __("Footer Columns Two", 'avia_framework'),
  "desc"  => __("How many columns should be displayed in your second footer", 'avia_framework'),
  "id"  => "footer_two_columns",
  "required"  => array( 'display_widgets_socket', '{contains_array}all;nosocket' ),
  "type"  => "select",
  "std"   => "4",
  "subtype" => array(
    __('1', 'avia_framework') =>'1',
    __('2', 'avia_framework') =>'2',
    __('3', 'avia_framework') =>'3',
    __('4', 'avia_framework') =>'4',
    __('5', 'avia_framework') =>'5',
    __('6', 'avia_framework') =>'6')
  );
  
  $found = false;
  $index = 0;
  
  foreach( $avia_elements as $key => $element ){
  $index++;
    if( isset( $element['id'] ) &&  ( $element['id'] == $id ) && isset( $element['slug'] ) && ( $element['slug'] == $slug ) ) { 
      $found = true;
      break;
    }
  } 
  if(! $found ){ 
    $avia_elements[] = $new_element;
  }
  else {
    $avia_elements = array_merge( array_slice( $avia_elements, 0, $index ), array( $new_element ), array_slice( $avia_elements, $index ));
  }
  return $avia_elements;
}
add_filter( 'avf_option_page_data_init', 'my_avf_option_page_data_add_elements', 10, 1 );

/*** Register new footer widget areas */
function footer_two_widgets_init() {
  $footer_two_columns = avia_get_option( 'footer_two_columns', '6' );
  for ($i = 1; $i <= $footer_two_columns; $i++){
    register_sidebar(array(
      'name' => 'Second-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' => '<h3 class="widgettitle">', 
      'after_title' => '</h3>', 
      'id'=>'av_footer_two_'.$i
    ));
  }
}
add_action( 'widgets_init', 'footer_two_widgets_init' );

#footer .container > div {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
}

#second-column-row {
  position: relative;
  margin-top: 10px;
}

the edited footer.php can be found ( on basis of Enfold 5.4 ) : PasteBin

PS – same here – but this will generate your android icons too : https://realfavicongenerator.net/
It is the same implementation as mentioned above – but for the android icons there will be a site.webmanifest ( or some xml files ) file in additon

<link rel="manifest" href="/wp-content/uploads/icons/site.webmanifest">

Google yourself a little – there are many online favicon generators – one will definitly fit to your needs
how to insert it into the head area is described above.