#hero-block {

  position: relative;

  z-index: 0;

  padding-top: 40px;

}

#hero-block .hero__title {

  max-width: 750px;

}

#hero-block .hero__descr {

  margin-bottom: 40px;

}

#hero-block .hero__descr p,

#hero-block .hero__descr li {

  font-family: var(--fontFamily);

  font-weight: 400;

  font-size: 20px;

  line-height: 125%;

  letter-spacing: 0%;

  color: var(--mainTextPrimary);

}

#hero-block .hero__btn {

  margin-bottom: 30px;

  width: 360px;

  max-width: 100%;

}

#hero-block .hero__bg {

  position: absolute;

  top: 0;

  right: 0;

  width: 100%;

  height: 740px;

  z-index: -1;

}

#hero-block .advantages__list {

  display: grid;

  grid-template-columns: repeat(2, 360px);

  gap: 30px;

  margin-bottom: 20px;

}

#hero-block .advantages__item {

  background: var(--bgSecondary);

  border-radius: 15px;

  padding: 10px;

  display: flex;

  align-items: center;

  gap: 10px;

}

#hero-block .advantages__item-icon {

  width: 40px;

  height: 40px;

  min-width: 40px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 10px;

  background: var(--bg);

}

#hero-block .advantages__item-icon svg,

#hero-block .advantages__item-icon Img {

  max-width: 20px;

  max-height: 20px;

  min-width: 20px;

}

#hero-block .benefits__list {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 30px;

}

#hero-block .benefits__item {

  background: var(--bgSecondary);

  border-radius: 10px;

  padding: 20px;

}

#hero-block .benefits__item-icon {

  width: 60px;

  height: 60px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 10px;

  background: var(--bg);

  margin-bottom: 10px;

}

#hero-block .benefits__item-icon svg,

#hero-block .benefits__item-icon img {

  max-width: 30px;

  max-height: 30px;

  min-width: 30px;

}

#hero-block .benefits__item-title {

  margin-bottom: 5px;

}

@media screen and (max-width: 1500px) {

  #hero-block .hero__bg {

    width: 130%;

  }

}

@media screen and (max-width: 1140px) {

  #hero-block .hero__bg {

    width: 150%;

  }

  #hero-block .benefits__list {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media screen and (max-width: 840px) {

  #hero-block .hero__bg {

    display: none;

  }

  #hero-block .advantages__list {

    grid-template-columns: 1fr 1fr;

  }

}

@media screen and (max-width: 550px) {

  #hero-block .advantages__list, #hero-block .benefits__list {

    grid-template-columns: 1fr;

  }

  #hero-block .hero__btn {
    width: 100%;
  }

}/*# sourceMappingURL=block.css.map */