Header is behaving different on laptop and on mobile

Hi Team,

The header on the pages behave differently on laptop and on mobile.

I have the following CSS code, if i remove “height: 100px!important;” there will be overlap of header and body on laptop browser but works fine on mobile.

Kindly let me know how to fix this.

#agama-header-image .header-image{
height: 450px;
}
path.divider-fill{
display: none!important;
}
body:not(.home) #agama-header-image .header-image{
background-image: none!important;
height: 100px!important;
}
/*body:not(.home) #particles-js{
display: none!important;
}*/

#agama-primary-nav {
width: auto !important;
}

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