html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: "Lato", sans-serif;
  background-color: #000;
  color: #fff;
}

main {
  flex: 1 0 auto;
}

footer {
  background-color: #0e0e0e;
}

footer a:hover {
  text-decoration: underline;
}

.hero {
  position: relative;
  height: 500px;
  background: url('images/hero-bckg.png') center/cover no-repeat;
  overflow: hidden;
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  background: rgb(0 0 0 / 76%);
  z-index: 1;
}

.hero__stripe {
  position: absolute;
  top: 0;
  left: 51%;
  width: 7%;
  height: 100%;
  background-color: #0095FF;
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0 100%);
  z-index: 2;
  opacity: 0.9;
}

.hero .container {
  position: relative;
  z-index: 3;
  height: 100%;
}

.hero__text {
  max-width: 45%;
}

.hero__image {
  max-width: 45%;
}

.hero__image img {
  width: 100%;
  height: auto;
}

.hero__k {
    position: absolute;
      top: 15px;
      right: 2%;
      width: 108px;
      z-index: 4;
}

.hero__a {
    position: absolute;
      bottom: 50px;
      right: 8%;
      width: 100px;
      z-index: 4;
}

.hero__fish {
  position: absolute;
  top: 29%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: 100px;
  z-index: 4;
}