@font-face {
  font-family: "bebas_neueregular";
  src: url("font/bebasneue-regular-webfont.woff2") format("woff2"),
    url("font/bebasneue-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

:root {
  --blue: #113b47;
  --green: #59d261;
  --darkGreen: #097a5c;
  --black: #252525;
  --white: #fff;
}

* {
  padding: 0;
  margin: 0;
}

html {
  box-sizing: border-box;
}
body {
  font-family: "bebas_neueregular";
}
.logo {
  z-index: 2;
  position: relative;
}

.logo img {
  width: 120px;
  height: 120px;
}
.logo img {
  filter: drop-shadow(4px 6px 3px rgba(30, 30, 30, 0.306));
}

.nav {
  position: relative;
  padding: 2rem 3rem;
}

.header {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("images/hero-img.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom left;
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(11, 11, 11, 0.6),
    rgba(194, 191, 191, 0.2)
  );
}

.header-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.header-content h1 {
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 3px;
  position: relative;
  color: var(--darkGreen);
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
}

.kontakt-info {
  position: absolute;
  font-size: 32px;
  width: 100%;
  bottom: 3.5rem;
  letter-spacing: 1.25px;
  color: rgb(238, 232, 232);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.kontakt-info a {
  color: rgb(238, 232, 232);
  text-decoration: none;
}
.kontakt-info a:first-child {
  margin-left: 0.4rem;
}
.kontakt-info div {
  margin-left: 0.3rem;
  margin-right: 0.3rem;
  font-size: 16px;
}

.header-content h1:first-child {
  color: rgb(238, 232, 232);
}

.header-content h1:nth-of-type(2) {
  color: #97f89dcf;
}

.header-content h1:nth-of-type(3) {
  color: #59d261f0;
}

h1 {
  color: white;
}

@media (max-width: 993px) {
  .header {
    background-position: center 37%;
  }

  .logo img {
    width: 90px;
    height: 90px;
  }
  .nav {
    position: relative;
    padding: 1rem 1.5rem;
  }

  .kontakt-info {
    font-size: 28px;
    flex-direction: column;
  }

  .kontakt-info div {
    display: none;
  }

  .kontakt-info a:first-child {
    margin-left: 0rem;
  }
}

.socials a svg {
  width: 28px;
  height: 28px;
  display: block;
  position: relative;
  color: green;
  stroke: green;
}

.socials a svg {
  color: green;
  stroke: green;
  fill: rgb(248, 248, 248);
  opacity: 0.8;
}

.socials {
  display: flex;
  gap: 0.2rem;
  position: absolute;
  width: 100%;
  bottom: 1rem;
  color: rgb(238, 232, 232);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}