:focus {
  outline: none;
}

a, button {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  text-decoration: none;
}

body {
  background: #0B0B0C;
  color: #FFFFFF;
  font-family: "Gilroy";
  margin: 0;
}

* {
  -webkit-appearance: none;
  margin: 0;
}

.hero {
  height: 100vh;
  background-size: 1920px;
  background: url(../img/hero-bg.png);
  padding: 10vh 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: top;
}

.hero__container {
  max-width: 1170px;
  margin: 0px auto;
  width: 100%;
}

.hero__date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-size: cover;
  background: #fff;
  border-radius: 21px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 4px 22px 4px 3px;
}

.when {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 15px 11px 15px 11px;
  background: #0C1221;
  border-radius: 17px;
}

.when p {
  font-family: "Buyan";
  font-weight: 700;
  font-size: 47px;
  letter-spacing: 0.02em;
}

.when i:nth-child(2) {
  padding: 0 12px 0 14px;
}

.when i:nth-child(4) {
  padding: 0 0 0 42px;
}

.hero__date > p {
  font-family: "Buyan";
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 0.02em;
  color: #0C1221;
  padding: 0 0 0 14px;
  text-transform: uppercase;
}

.hero__title {
  max-width: 726px;
  padding: 2vh 0;
  font-size: 78px;
  line-height: 10vh;
  letter-spacing: 0.02em;
  font-family: "Buyan";
  background: url(https://wb-z.site/assets/css/image.png), -o-linear-gradient(187.55deg, #0C1423 -23.53%, rgba(12, 20, 35, 0) 32.4%), #FFFFFF;
  background: url(https://wb-z.site/assets/css/image.png), linear-gradient(262.45deg, #0C1423 -23.53%, rgba(12, 20, 35, 0) 32.4%), #FFFFFF;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  background-blend-mode: hard-light, normal, normal;
}

.hero__descr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.hero__descr i {
  padding: 0 17px 0 17px;
}

.hero__descr p {
  max-width: 535px;
  font-size: 24px;
  line-height: 139.5%;
  letter-spacing: 0.02em;
  font-weight: 500;
}

.hero__descr span {
  font-weight: 400;
  opacity: 0.5;
}

.hero__form {
  margin: 3vh 0;
  background: rgba(43, 49, 60, 0.52);
  border: 0.932854px solid rgba(181, 203, 231, 0.34);
  -webkit-backdrop-filter: blur(8.86211px);
  backdrop-filter: blur(8.86211px);
  border-radius: 17.7242px;
  /* display: table; */
  max-width: 785px;
  width: 100%;
  padding: 24px 15px 5px 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: auto !important;
}

.footer {
  background: #0B0B0C;
  padding: 40px 0;
}

.footer__text p {
  text-align: center;
  font-size: 19px;
  color: rgba(255, 255, 255, 0.37) !important;
  line-height: 105.5%;
  padding: 8px 0;
  letter-spacing: 0.02em;
}

@media only screen and (max-height: 800px) {
  .hero__form {
    margin: 29px 0 0;
  }

  .hero__title {
    padding: 16px 0;
    line-height: 102.5%;
  }

  .hero {
    padding: 82px 0 30px;
    height: auto;
  }
}
@media only screen and (min-height: 1080px) {
  .hero__form {
    margin: 38px 0;
  }

  .hero__title {
    padding: 22px 0;
    line-height: 107px;
  }

  .hero {
    padding: 108px 0;
    height: 1080px;
  }
}
@media screen and (max-width: 980px) and (min-width: 681px) {
  html {
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6);
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    width: calc(100%/0.6);
    height: calc(100%/1);
    min-width: 1200px;
  }
}
@media screen and (min-width: 981px) and (max-width: 1169px) {
  html {
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    width: calc(100%/0.75);
    height: calc(100%/1);
    min-width: 1200px;
  }
}
@media only screen and (max-width: 680px) {
  .hero__container {
    width: 90%;
  }

  .when p {
    font-size: 21px;
  }

  .hero__date > p {
    font-size: 16px;
    padding: 0 0 0 6.4px;
  }

  .when {
    padding: 4.5px 17px 4.5px 4px;
    border-radius: 7.7px;
  }

  .when i:nth-child(2) img {
    width: 11.5px;
    height: 11.5px;
  }

  .when i:nth-child(2) {
    padding: 0 5.5px 0 7.1px;
  }

  .when i:nth-child(4) img {
    width: 12px;
    height: 12px;
  }

  .when i:nth-child(4) {
    padding: 0 0 0 19.5px;
  }

  .hero__date {
    padding: 1.8px 9.6px 1.8px 2px;
    border-radius: 7.8px;
    margin: 0 auto;
  }

  .hero__title {
    font-size: 35px;
    text-align: center;
    max-width: 327px;
    margin: 0 auto;
    padding: 24px 0;
    line-height: 45.7px;
  }

  .hero__descr i {
    display: none;
  }

  .hero__descr p {
    font-size: 14px;
    max-width: 312px;
    margin: 0 auto;
    text-align: center;
  }

  .footer__text p {
    font-size: 14px;
  }

  .hero {
    height: auto;
    /* padding: 38px 0 760px; */
    /* background-image: url(../img/hero-bg-mob.png) !important; */
    background: #040c21;
    background-size: cover;
    background-position: bottom;
  }

  .hero__form {
    margin: 24px auto 0;
    max-width: 320px;
    padding: 15px 0 0;
  }
}
/* @media only screen and (max-width: 515px) {
  .hero {
    padding: 38px 0 600px !important;
  }
} */