*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .hero,
  .install,
  .battery,
  .korrosion,
  .ebike {
    padding: 1em 0; /* Adjust padding for smaller screens */
  }

  .primary-title {
    font-size: 1.5rem; /* Reduce the font size for mobile */
  }

  .section-title {
    font-size: 2rem; /* Adjust the font size for mobile section titles */
  }

  .container2 {
    flex-direction: column; /* Stack the social and contact sections for mobile */
  }
}

.logo {
  position: absolute; /* Position the logo absolutely within the header */
  top: 20px; /* Adjust the top position as needed */
  left: 20px; /* Adjust the left position as needed */
  width: 150px; /* Adjust the width to make the logo smaller */
  height: 100px;
}

.hero , .install ,.battery ,.korrosion ,.ebike{
  color: white;
  text-align: center;
  padding: 15em 0;
  background: #001E50;
}



.paragraph {
  line-height: 120%;
  font-family: 'Alumni Sans';
  font-size: 30px;
  color: #eee;
font-weight: 700;

}


body {
    width: 145%;
margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3,
p {
  margin: 0;
}

section {
  padding: 7em 0;

}

.container1{
  position: relative;

}

.containera {
  position: relative;
  background-image: url('img/segeln2.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 20px;
}
.containerb {
  position: relative;
  background-image: url('img/install.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 20px;
}
.containerc {
  position: relative;
  background-image: url('img/battery.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 20px;
}
.containerd {
  position: relative;
  background-image: url('img/korrosion.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 20px;
}
.containere {
  position: relative;
  background-image: url('img/ebike.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 20px;
}
.container {
  width: 85%;
  max-width: 65em;
  margin: 0 auto;
}

.split {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1em;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.split > * {
  -ms-flex-preferred-size: 30%;
      flex-basis: 30%;
  min-width: 15em;
}

.spacing > * + * {
  margin-top: var(--spacer, 2rem);
}

.primary-title {
  font-size: 2rem;
 
  line-height: 1;
  text-transform: uppercase;
}

.section-title {
  text-align: center;
  font-size: clamp(2.5rem, calc(5vw + 1rem), 4rem);
  line-height: 1;
  color: white;
  margin-bottom: 5rem;
}

@supports (background-blend-mode: multiply) {
  .hero {
    background: url(img/segeln.jpg), radial-gradient(#748BAD,#001E50);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .install {
    background: url(img/install.jpg), radial-gradient(#748BAD,#001E50);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
  }
  
  .battery {
    background: url(img/battery.jpg), radial-gradient(#748BAD,#001E50);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .battery {
    background: url(img/battery.jpg), radial-gradient(#748BAD,#001E50);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .korrosion {
    background: url(img/korrosion.jpg), radial-gradient(#748BAD,#001E50);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .ebike {
    background: url(img/ebike.jpg), radial-gradient(#748BAD,#001E50);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
  }
}

.featured {
  background: #eee;
}

.hero {
  --clr-accent: #001E50;
}

footer{
  display: flex;
  justify-content: center;
}

.container2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #001E50;
  height: 50vh;

}

.social {
  text-align: center;
    flex: 1;
  color: white;
}

.kontakt {
  text-align: center;
  flex: 1;
  color: white;
}