Centering the logo on mobile

first a few words: in a development phase in which you want to get help it would be nice to release the context menu button of the mouse on a website. Then it would be good if also optimization tools and merging were switched off; only then it is possible to localize the rules exactly which disturb.
Then you can also say exactly where rules and the also still important useless too much were set. That was also the case here. So now to the first attempt:

Get rid of some rules in your code :
f.e.: ( as i said i can not give advice because of merging tools )

@media only screen and (min-device-width :375px) and (max-device-width :736px) and (orientation :portrait){
	.responsive .logo img {
	height:130px!important;
	max-height:130px;
	width:300px;
	max-width:300px
	}
}

There must be similar rules that are for screenwidth less than 990px – they were set sometimes to important – thats why they disturb the real interaction.

my rules here are set to important – the only way to get them work because other logo rules ( container and image) are present too here:
maybe you can do it without important when the set of competing rules has been removed.

@media only screen and (min-width: 768px) and (max-width: 989px) {
	.responsive .logo {
	  position: absolute !important;
	  width: 100% !important;
	}

	.responsive .logo img {
	  max-width: inherit !important;
	  max-height: 250px !important;

	}
}

@media only screen and (max-width: 767px) {
	.responsive .logo {
	  position: relative !important;
	  width: 100% !important;
	}

	.responsive .logo img {
	  max-width: inherit !important;
	  max-height: 250px !important;
	  margin-top: 50px !important;
	}
}

btw: Is the placement of the shopping cart there wanted?
In the responsive case, when the screen width becomes small, I have placed it next to the other symbols at the top.

See Film: https://webers-testseite.de/celtic.mp4
PS : make the film fullscreen then you can see on top the screenwidth in px