Mobile responsive footer widgets and mobile navigation menus do not work togethe

Hello everybody,

I have a complicated CSS issue with my site that hampers the mobile repsonsive view of the footer.

Thats the CSS:

.service-section .post:hover {
    border-top: 3px solid #56c72b;
}

.hc_scrollup i {
    color: #56c72b;
    font-size: 14px;
}

.hc_scrollup {
    background-color: #00000000;
}
.site-footer {
    border-top: 3px solid #56c72b;
    border-bottom: 3px solid #56c72b;
}
element.style {
background-image: url(https://philippfalkenhagen.de/wp-content/uploads/2019/10/Reh-im-Mohnfeld-Startseite-1.jpg);
max-width: 100%;
height: 801px;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.service-section {
   
    border-bottom: 0px solid #e8e8e8;
  
}

description-box::before { bottom: -14px; }

@media (min-width: 600px){
       .navbar-custom{
	     background-color: transparent !important;
	     position: absolute !important;
	}
	#custom-collapse.collapse.navbar-collapse {
		background-color: transparent !important;
	}
}
@media (min-width: 600px) and (max-width: 767px) {
	.elementor-347 .elementor-element.elementor-element-141020fe:not(.elementor-motion-effects-element-type-background){
		height: 300px !important;
	}
}

.navbar-custom .navbar-nav li > a {
    position: relative;
    color: #ffffff;
    font-weight: 600;
    font-size: 20px;
    padding: 35px 17px;
    transition: all 0.3s ease-in-out 0s;
}

.navbar-custom .navbar-nav > .active > a, .navbar-custom .navbar-nav > .active > a:hover, .navbar-custom .navbar-nav > .active > a:focus {
    color: ffffff;
    background-color: #0000; 
}
.navbar-custom .navbar-nav > .active > a, .navbar-custom .navbar-nav > .active > a:hover, .navbar-custom .navbar-nav > .active > a:focus {
    color: #CECDCD;
    /* background-color: #56c72b; */
}
.site-footer {
    border-top: 3px solid #121212; 
    border-bottom: 3px solid #56c72b;
}
.site-footer {
    /* border-top: 3px solid #56c72b; */
    border-bottom: 3px solid #56c72b;
}

table a, table a:hover, table a:focus, a, a:hover, a:focus, dl dd a, dl dd a:hover, dl dd a:focus {
    color: #64646d;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: #64646d;
    margin: 0px 0 20px;
    font-weight: 600;
    word-wrap: break-word;
}
.service-section {
     background-color: #0000; 
    border-bottom: 1px solid #0000;
    padding: 70px 0 30px;
}
.navbar-custom .dropdown-menu > li > a {
    border-bottom: 1px dotted #121212 !important; }
@media (min-width: 400px){
.navbar-custom .dropdown .dropdown-menu {
    border-top: 2px solid #121212 !important;
    border-bottom: 2px solid #121212 !important; }}
.navbar-custom .navbar-nav > li > a:hover, 
.navbar-custom .navbar-nav .open > a, 
.navbar-custom .navbar-nav .open > a:hover{
     color: #56c72b !important; }
@media (max-width: 600px){
.navbar-custom .navbar-nav {
    background-color: #ffff !important; }
@media (min-width: 601px) {
.navbar-custom .dropdown .dropdown-menu {
background-color: #000fff ! important;
opacity: 0.5;
}
}
   .footer-sidebar {
           display: -webkit-inline-box !important;
   }
}
.site-footer {
    border-top: 3px solid #56c72b;
    border-bottom: 3px solid #56c72b;
}
@media (max-width: 600px) {
	.navbar-custom .navbar-nav li > a{
		color: #121212!important;
	}
}
#moove_gdpr_save_popup_settings_button span.moove_gdpr_icon span.gdpr-icon {
    position: relative;
    top: 14px;
    font-weight: 900;
	}

.hc_scrollup {
    border-radius: 0px;
    bottom: 0px;
    padding: 3px;
    display: none;
    height: 40px;
    opacity: 1;
    position: fixed;
    right: 26px;
    text-align: -webkit-right;
    width: 60px;
    overflow: hidden;
    z-index: 9999;
    color: #ffffff;
    font-size: 1.000rem;
    line-height: 1.9;
}

So if I have the code so the mobile navigation menu is white with black font and the font in the header on desktop and tablet white. But if i delete this code:

border-bottom: 2px solid #121212 !important; }

are the widgets in the footer mobile responisve but the background color of the mobile menu changes again to blue and is therefore no longer white. Can someone help me to solve it so that the background of the mobile navigation remains white and the footer mobile is responsive?

I post this post deliberately not in theme support, since the problem is based on my CSS changes.

Thank you very much, this problem has cost me so much time – without result.

Best regards

Philipp

The page I need help with: [log in to see the link]