well – remove that second color section and put this to your quick css:

#top.page-id-238 #av_section_1 { 
  background-image: url(https://substratosfera.it/wp-content/uploads/2024/12/substrato_separatore.png), url(https://substratosfera.it/wp-content/uploads/2024/12/substrato_background_top-1.png);
  background-repeat: no-repeat;
  background-position: bottom left, 100% 0%;
  background-size: 130%, contain;
  background-attachment: scroll, fixed;
}

but : if i look to your logo – it might be a good idea to transform the upper part and the lower part as svg to a custom divider ;)
do you have your logo as verctor based file? – post a link please

or try instead:

#top.home #av-layout-grid-1 fieldset {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 5px;
}

#top.home #av-layout-grid-1 fieldset p {
  width: unset;
}

#top.home #av-layout-grid-1 fieldset p:first-of-type {
  width: 50%
}

#top.home #av-layout-grid-1 fieldset p:first-of-type input {
  border: 1px solid #be363c;
  border-radius: 26px 0 0 26px
}

#top.home #av-layout-grid-1 fieldset p .button {
  border-radius: 0 26px 26px 0;
}

and maybe you style that black box a bit too : change background-color and add some css :

.custom-black-box {
  background-color: rgba(0,0,0,0.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

try:

#top.home #av-layout-grid-1 fieldset {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 20px;
}

#top.home #av-layout-grid-1 fieldset p {
  width: unset;
}

#top.home #av-layout-grid-1 fieldset p:first-of-type {
  width: 50%
}

#top.home #av-layout-grid-1 fieldset p:first-of-type input {
  border: 1px solid #be363c;
}

is this an option for that special button:

#top.home #av-layout-grid-1 fieldset p .button{
  border-radius: 0 26px 26px 0
}

i did not compare both css rules , but you should know:
If there are two or more CSS rules that point to the same element, the selector with the highest specificity will “win”, and its style declaration will be applied to that HTML element. Every CSS selector has a position in the specificity hierarchy.

the #top selector has a high hierarchy – so that rule wins – and even by this – the ID wins.

Unfortunately, it is becoming more and more common to set a porperty value to !important in order to enforce a css rule. In many cases, it would only be necessary to adapt the selectors better.

as participant – i do not see your page – so hope Mike has a good idea. But keep in mind: better to place them fixed and to position them all top left.

And you only trust Mods ?

function ava_g_tag_custom_script() { 
?>
<!-- Google Tag Manager -->
<script>
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXX');
</script>
<!-- End Google Tag Manager -->  

<!-- Google Tag Manager (noscript) -->
<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) --> 
<?php
}
add_action('wp_head', 'ava_g_tag_custom_script');

the reason why this fails – is that a lot of participants do not use the code tag on posting snippets here : https://kriesi.at/support/topic/adding-google-tag-manager-in-enfold/#post-1473588

read here – replace your tag manager ID : https://kriesi.at/support/topic/adding-google-tag-manager-in-enfold/#post-1473587

Better you insert on logo input field the original size! – or at least a file that has a min height of 90px (your header starts at 88px height)
in this case ( your logo goes right to the outer borders of the png ) only a littel padding is needed:

.logo a img {
  padding: 2% 0;
}

i guess it is because you have inserted a recalculated format (300px x 50px) that is not bigger than the min-height of your setting.
If you put in a logo img that has a height of 100px – it will be o.k. from the beginning.

then you do not have to use this:

.logo a img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 0 
}

put this to your quick css – if you do not like to set custom classes or remove min-height option etc.
i address them by different selectors.
You can decide when the columns will break on change of that 900px / 899px values

@media only screen and (min-width: 900px) {
  #top.home #av_section_1 .entry-content-wrapper {
    display: grid !important;
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 899px) {
  #top.home #av_section_1  .entry-content-wrapper {
    grid-template-columns: 1fr;
  }
}

#top.home #av_section_1  .entry-content-wrapper:before,
#top.home #av_section_1  .entry-content-wrapper:after {
  display: none;
}

#top.home #av_section_1  .container {
  height: unset !important;
}

#top.home #av_section_1  .entry-content-wrapper .flex_column {
  width: unset !important;
  min-height: unset !important;
}

#top.home #av_section_1  .entry-content-wrapper .flex_column:nth-of-type(2) {
  align-self:  end;
  margin: 30px 0 0 !important;
}

#top.home #av_section_1  .entry-content-wrapper .flex_column:nth-of-type(1){
  align-self: start;
}

#top.home #av_section_1 .content {
  padding: 0 !important;
}