@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap");
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Roboto", sans-serif;
  color: #fff;
}

.hero__title {
  font-weight: 500;
  font-size: 3.2rem;
  line-height: 1.8rem;
  letter-spacing: 0.15rem;
}
.hero__description {
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 2.1rem;
  letter-spacing: 0.4px;
}
.hero__btn {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.8rem;
  letter-spacing: 1.5px;
}
.hero__title {
  text-transform: capitalize;
}

.body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  background-image: linear-gradient(240.93deg, #404040 -0.37%, #1b1b1b 101.45%);
}

.hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70vw;
  height: 90vh;
  max-width: 89rem;
  max-height: 90rem;
}
.hero--vanilla {
  color: #1b1b1b;
}
.hero__background {
  width: 100%;
  height: 100%;
  border-radius: 6rem;
  background-image: linear-gradient(64.5deg, #404040 2.1%, #1b1b1b 100.55%);
  box-shadow: 0px 2rem 3rem rgba(0, 0, 0, 0.15);
}
.hero__background--vanilla {
  color: #1b1b1b;
  background-image: linear-gradient(66.37deg, #ece1c9 2.16%, #9f8c5c 103.37%);
}
.hero__background--cherry {
  background-image: linear-gradient(66.37deg, #8f355a 2.16%, #5e2438 41.61%, #2c1316 103.37%);
}
.hero__background--orange-vanill {
  background-image: linear-gradient(66.37deg, #f0ae54 2.16%, #8b481e 103.37%);
}
.hero__can {
  max-width: 28rem;
  z-index: 2;
  position: absolute;
}
.hero__logo-container {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  display: block;
}
.hero__logo {
  width: 80vw;
  max-width: 140rem;
  height: 100%;
  margin-bottom: 3rem;
}
.hero__text-container {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 85%;
  max-width: 78rem;
  bottom: 6%;
}
.hero__title {
  margin-bottom: 4rem;
}
.hero__description {
  width: 21rem;
}
.hero__btn {
  z-index: 1;
  align-self: flex-end;
}
.hero__btn-img {
  position: absolute;
  right: 0;
  bottom: 0;
}

@media (max-width: 812px) {
  .hero {
    align-self: flex-end;
    overflow-x: hidden;
    flex-direction: column-reverse;
    width: 100vw;
    height: 100%;
  }
  .hero__background {
    border-radius: 6rem 6rem 0 0;
    height: 30rem;
  }
  .hero__logo-container {
    margin-top: 5rem;
    margin-bottom: -7rem;
    position: relative;
  }
  .hero__can {
    width: 50%;
    margin-bottom: -10rem;
    position: relative;
  }
  .hero__btn {
    z-index: 1;
    align-self: flex-end;
  }
  .hero__btn-img {
    max-width: 21rem;
  }
}




/*# sourceMappingURL=/style.78032849.css.map */