@font-face {
  font-family: Satoshi;
  src: url('../fonts/Satoshi-Black.woff2') format("woff2"), url('../fonts/Satoshi-Black.woff') format("woff"), url('../fonts/Satoshi-Black.ttf') format("truetype"), url('../fonts/Satoshi-Black.svg') format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: white;
  --black: black;
}

.hero {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  display: flex;
}

.coming-soon {
  flex-flow: column-reverse;
  flex: 0 auto;
  place-content: center;
  align-self: center;
  align-items: flex-end;
  width: auto;
  margin-top: 24%;
  display: flex;
}

.heading {
  color: #333333b8;
  text-align: center;
  letter-spacing: 1px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  margin-left: auto;
  margin-right: auto;
  font-family: Satoshi, Arial, sans-serif;
  font-size: 11px;
  font-weight: 300;
  display: flex;
}

.image {
  color: #c33333;
  flex: 0 auto;
  order: 1;
  align-self: flex-start;
  width: 600px;
  margin-bottom: 47px;
  display: block;
}

@media screen and (max-width: 991px) {
  .coming-soon {
    margin-top: 31%;
  }

  .heading {
    font-size: 11px;
  }

  .image {
    margin-bottom: 290px;
  }
}

@media screen and (max-width: 479px) {
  .coming-soon {
    margin-top: 41%;
  }

  .image {
    width: 280px;
    margin-bottom: 82px;
  }
}


@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Black.woff2') format('woff2'), url('../fonts/Satoshi-Black.woff') format('woff'), url('../fonts/Satoshi-Black.ttf') format('truetype'), url('../fonts/Satoshi-Black.svg') format('svg');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}