what kind of form is it? If you are using contact form 7 you can listen to wpcf7mailsent and after a time you can close the popup with it.
maybe your form got something similar.

for example you can close a magnificPopup by adding this to your popup function:

	document.addEventListener( 'wpcf7mailsent', function( event ) {
		setTimeout(function() {
			$.magnificPopup.close();
		}, 1000);
	}, false );

The place where you can insert the favicon to enfold options – there is a comment on the right side:

Specify a favicon for your site.
Accepted formats: .ico, .png, .gif

if you follow that link ( that two cards icon) you will see the browsersupport.
on the bottom :

so: better do not use svg as favicon!
if you like to use svg have a fallback solution: https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/

and you inserted that video with code-block element as described.
Please send me the link to your page. ( contact under my avatar )

___________

Solution for color-section and background-video:

First – you had to know what aspect ratio is your selfhosted video!
you had to insert this to the color-section when you fill out the elements options:

in most cases it will be a 16/9 video aspect ratio. – if not you can insert there a different value.

then have a look to: https://webers-testseite.de/html5-video-ben/

See what happens – when i switch off these height / min-heigt settings in dev-tools :

btw. i optimized those rules a little – and you do not need to shrink the menu items font-size – because it breaks to burger menu earlier.

So : better remove all the code from above – and insert instead:

#top #header .av-main-nav > li > a {
  font-size: 16px !important;
  padding: 0 12px !important;
}

@media only screen and (min-width: 1430px) {
  #header #header_main {
    width: 1430px;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 990px) {
  #header #header_main {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  #header #header_main > * {
    flex: 1 1 auto;
    align-self: center;
    width: unset;
  }
  #header #header_main .av-logo-container {
    flex-basis: calc(100% - 170px);
    flex-grow: 1;
    order: 1;
    max-width: unset;
  }
  #header #header_main .widget {
    margin-right: 50px;
    flex-grow: 0;
    flex-basis: 120px !important;
    order: 2;
    display: flex;
    justify-content: center;
  }
  #header #header_main #header_main_alternate {
    flex-basis: 100%;
    order: 3;
    border-top: none;
  }
}

@media only screen and (max-width: 989px) {
  #header #header_main {
    display: flex;
    flex-flow: wrap column-reverse;
  }
  #header #header_main .widget {
    margin-top: 0px;
    padding: 10px 0 !important;
  }
   #header_main .av-logo-container {
    height: 150px !important;
  }
  #header_main .inner-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 150px;
  }
  #header_main .inner-container > * {
    align-self: center;
  }

  #header_main .inner-container .main_menu {
    display: flex !important;
    align-items: center;
  }
  #header_main .inner-container .avia-standard-logo {
    width: 215px
  }
  #header_main .inner-container .main_menu .social_bookmarks  {
    top: 0;
    margin-top: 0 !important;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .main_menu {
    position: relative !important;
  }
}

and after doing that – try:

@media only screen and (max-width: 479px) {
  .html_header_transparency #top .avia-builder-el-0 .container, 
  .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
    padding-top: 25px;
  }
  @media only screen and (max-width: 476px) {
    #top .avia-caption-content {
      display: none!important
    }
  }
}

my solution – a little adjust of css from ismael – but easiest way is to remove it – and remove please the rule:

#header_main .widget {
  display: flex;
  align-items: center;
  margin-left: 85%;
  margin-top: 2%;
  position: absolute;
}

now try:

@media only screen and (min-width: 1430px) {
  #header #header_main {
    width: 1430px;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 990px) {
  #header #header_main {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  #header #header_main > * {
    flex: 1 1 auto;
    align-self: center;
    width: unset;
  }
  #header #header_main .av-logo-container {
    flex-basis: calc(100% - 170px);
    flex-grow: 1;
    order: 1;
    max-width: unset;
  }
  #header #header_main .widget {
    margin-right: 50px;
    flex-grow: 0;
    flex-basis: 120px !important;
    order: 2;
    display: flex;
    justify-content: center;
  }
  #header #header_main #header_main_alternate {
    flex-basis: 100%;
    order: 3;
    border-top: none;
  }
}

@media only screen and (max-width: 989px) {
  #header #header_main {
    display: flex;
    flex-flow: wrap column-reverse;
  }
  #header #header_main .widget {
    margin-top: 0px;
    padding: 10px 0 !important;
  }
}

sadly we loose with this the border-top of #header_main_alternate – or you can live with it that the border-top does not have the full screen-width.
then remove that border-top: none line.

if you follow that little link on enfold options:
(these two cards icon)

you will see on that wiki page a good overview; and in detail a browser support. Best Format seems to be png.
a svg has a bad support.

you can manually add them if you put this to your child-theme functions.php:

function add_icons_to_head(){
?>
  <link rel="icon" type="image/png" href="/wp-content/uploads/icons/your-favicon-image.png">
  <link rel="apple-touch-icon" type="image/png" href="/wp-content/uploads/icons/your-apple-touch-icon.png">
<?php
}
add_action('wp_head', 'add_icons_to_head');

You are free to select the names and paths of your PNGs.

On the extended Version – shure on free version see – here : https://wordpress.org/plugins/honeypot/

Automatic anti spam protection for following forms (Available in Free Version) . No setup required.

WP Comments
WP Registraton
BBPress Forum (bbpress.org)
Contact Form 7 (wordpress.org/plugins/contact-form-7)
Gravity Forms (For Non Ajax and Single Page/Step Form – gravityforms.com)
WPForms (wpforms.com)
Formidable Forms (formidableforms.com)
Caldera Forms (calderaforms.com)
Toolset Forms (toolset.com)
Elementor Forms (elementor.com)
Fluent Forms (fluentforms.com)
Divi Theme Contact Form (elegantthemes.com)
Theme My Login ( https://wordpress.org/plugins/theme-my-login/ )
WooCommerce Reviews Pro
GDPR compliant. No tracking, cookie storage or external server calls.

Sadly the enfold form isn’t supported in the free version – but i think contact form 7 is a better alternative – not only because of the addon: Conditional Fields for Contact Form 7

However, the question remains as to why this is the case for you. I use this setting relatively often and always had it so that even if an av-curtain-footer-container was in place, it was always part (child) of #main.

By the way, if you have two date pickers, one for the start date and one for the end date, you can restrict the second date picker so that it only allows dates that are later. For example, we can also remove weekends from the selection.

here in my example the minDate/maxDate are relative Values by +7 Days and +12 Month:

function my_datepicker_limits() {
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
(function($) { 
    setTimeout(function() {
        var $allDatepickers = $('.avia_datepicker');

        // Let's assume that the first avia_datepicker found is the start date
        var $startDateField = $allDatepickers.eq(0);
        // and the second avia_datepicker found the end date
        var $endDateField = $allDatepickers.eq(1);

        // Check whether we have found at least two datepicker fields
        if ($startDateField.length === 0 || $endDateField.length === 0) {
            console.warn('Could not find both Start and End datepicker fields. Ensure they are the first two .avia_datepicker elements.');
            return; // Exit script if not enough fields are found
        }

        // Find the container of the end date field (the <p> element in your structure)
        // This is the parent tag of the input field that also contains the label.
        var $endDateFieldContainer = $endDateField.parent('p.form_element');

        // Fallback if the container is not the <p> tag or is not found
        if (!$endDateFieldContainer.length) {
            $endDateFieldContainer = $endDateField; // Then we only hide the input field itself
        }

        function updateEndDatepickerState() {
            var selectedStartDate = $startDateField.datepicker('getDate');
            

            if (selectedStartDate) {
                // Optional: Add one day to ensure that the end date is at least one day after the start date.
                // then remove the backslashes of the next line
                // selectedStartDate.setDate(selectedStartDate.getDate() + 1);
              
                // If a start date is selected, display the end date field
                $endDateFieldContainer.css('display', 'block'); // Verwendet 'block', da <p> ein Block-Element ist

                $endDateField.datepicker('option', 'minDate', selectedStartDate);

                // Optional: Make sure that the end date is not before the start date.
                var currentEndDate = $endDateField.datepicker('getDate');
                if (currentEndDate && currentEndDate < selectedStartDate) {
                    $endDateField.datepicker('setDate', selectedStartDate);
                }

            } else {
                // If no start date is selected, hide the end date field
                $endDateFieldContainer.css('display', 'none');

                // Reset minDate of the end date date picker (e.g. to “today”)
                $endDateField.datepicker('option', 'minDate', 0);
            }
        }

        if ($startDateField.data('datepicker')) {
            $startDateField.datepicker('option', {
                beforeShowDay: $.datepicker.noWeekends,
                minDate: "+7d", 
                maxDate: "+12m",
                onSelect: function(dateText, inst) {
                    // Update the state when a date is selected
                    updateEndDatepickerState();
                },
                onClose: function(dateText, inst) {
                    // Update the state even when closing the data picker (for robustness)
                    updateEndDatepickerState();
                }
            });
        }

        if ($endDateField.data('datepicker')) {
            $endDateField.datepicker('option', {
                // beforeShowDay: $.datepicker.noWeekends,
                minDate: 0,
                maxDate: "+12m"
            });
        }

        // Execute the function once when loading the page to set the initial state
        updateEndDatepickerState();

    }, 500);
}(jQuery));
});
</script>
<?php
}
add_action('wp_footer', 'my_datepicker_limits', 20);

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

Edit here – because topic is closed:
This was also only intended as additional information. It is in case someone lands here via the search. They may have exactly this request.

this is the whole css for transparency fixed header on small screens ( if header_meta is present some height values had to be corrected ) from my testpage above:

@media only screen and (max-width:989px) {
  .responsive #top #wrap_all #header .container {
    width:95%;
    max-width:95%
  }
  #header {
    position:fixed !important;
    height:80px !important;
    max-height:80px !important
  }
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img,
  .responsive #top .logo svg {
    height:80px !important;
    max-height:80px !important;
    line-height:80px !important
  }
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height:80px !important;
    line-height:80px !important
  }
  #top .header_bg,
  .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color:transparent !important
  }
  .responsive.html_mobile_menu_tablet #top #wrap_all #header:not(.av_header_transparency) {
    background-color:#FFF !important
  }
  #top #header.header-scrolled .header_bg {
    background-color:#FFF !important
  }
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate,
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display:block !important
  }
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img,
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity:0
  }
  html:not(.html_header_transparency) #top .header_bg {
    background-color:#FFF !important
  }
  .responsive:not(.html_header_transparency).html_mobile_menu_tablet.html_header_top #top #main {
    padding-top:80px !important
  }
}

you can test it in dev tools by just make a copy of the jQuery script and put it in the console.
see: https://vimeo.com/1098726318/6ae8a411b5

but that comes from layout.css – no custom css at all:

#top .logo img.alternate {
  opacity: 0;
}

#top .av_header_transparency .logo a > img {
  opacity: 0;
}

#top .av_header_transparency .logo img.alternate {
  opacity: 1;
}