#banner-block {
  margin-top: 20px;
}
.banner-block__holder {
  background-color: var(--bg-primary-second);
  border-radius: 10px;
  position: relative;
  padding-top: 60px;
  padding-bottom: 90px;
  overflow: hidden;

  &::before {
    content: "";
    width: 600px;
    height: 100%;
    background-image: url("./images/bg.png");
    background-size: cover;
    position: absolute;
    left: 57%;
    top: 0;
    background-repeat: no-repeat;
  }
}
.banner-block__decorate-item {
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: var(--bg-primary-main);
  border-radius: 100%;
  z-index: 3;
}
.banner-block__content {
  position: relative;
  z-index: 3;
}
.banner-block__decorate-item:nth-child(1) {
  top: 20px;
  left: 20px;
}
.banner-block__decorate-item:nth-child(2) {
  top: 20px;
  right: 20px;
}
.banner-block__decorate-item:nth-child(3) {
  bottom: 20px;
  left: 20px;
}
.banner-block__decorate-item:nth-child(4) {
  bottom: 20px;
  right: 20px;
}
.banner-block__title {
  color: var(--text-primary-head);
  margin-bottom: 20px;
  max-width: 60%;

  span {
    padding: 0 10px;
    font-size: unset;
    font-weight: unset;
    line-height: unset;
    font-family: unset;
    position: relative;
    display: block;
    width: fit-content;

    &::after {
      content: "";
      background-color: #33637f24;
      border-radius: 40px;
      left: 0;
      top: 50%;
      width: 100%;
      height: 75%;
      position: absolute;
      transform: translateY(-50%);
    }
  }
}
.banner-block__background--mobile {
  display: none;
}
.banner-block__subtitle {
  max-width: 630px;
  color: var(--text-primary-main);
  margin-bottom: 40px;
}
.banner-block__info {
  display: flex;
  gap: 25px;
  align-items: center;
  margin-bottom: 65px;
}
.banner-block__text {
  max-width: 314px;
  color: var(--text-primary-main);

  span {
    text-decoration: underline;
  }
}
.banner-block__advantages {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.banner-block__advantage {
  padding: 20px 5px 20px 15px;
  background-color: var(--bg-primary-main);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.banner-block__advantage-icon {
  max-width: 66px;
  max-height: 66px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.banner-block__advantage-text {
  max-width: 218px;
  color: var(--text-primary-head);
}
.banner-block__background {
  max-width: 48.4%;
  /* max-height: 720px; */
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.banner-block__advantages-mobile {
  display: none;
}
@media (max-width: 1400px) {
	.banner-block__background {
		max-width: 38.4%;
	}
}
@media (max-width: 1024px) {
  .banner-block__holder {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .banner-block__decorate-item {
    display: none;
  }
	.banner-block__info {
		flex-direction: column-reverse;
		align-items: flex-start;
	}
}
@media (max-width: 768px) {
  #banner-block {
    margin-top: 10px;
  }
  .banner-block__info {
    margin-bottom: 0;
    flex-direction: column;
    gap: 15px;
    position: relative;
    z-index: 2;

    .btn {
      width: 100%;
    }

    .banner-block__text {
      max-width: 100%;
      padding: 0 30px;
    }
  }
  .container-bg .banner-block__advantages {
    display: none;
  }
  .banner-block__advantages-mobile {
    display: block;
    margin-top: 10px;

    .banner-block__advantages {
      gap: 10px;

      .banner-block__advantage {
        background-color: var(--bg-primary-second);
        flex-grow: 1;
      }
    }
  }
  .banner-block__title {
    margin-bottom: 10px;

    span {
      padding: 0;
      display: inline;
      &::after {
        display: none;
      }
    }
  }
  .banner-block__subtitle {
    font-weight: 400;
  }
  .banner-block__background {
    display: none;
  }
  .banner-block__background.banner-block__background--mobile {
    display: block;
    max-width: 100%;
    max-height: 280px;
    bottom: 18%;
    left: 0;
    right: 0;
  }
  .banner-block__subtitle.background-margin-mobail {
    margin-bottom: 247px;
  }
  .banner-block__advantage-text {
    max-width: 100%;
  }
}
@media (max-width: 550px) {
  .banner-block__holder {
    padding: 10px 0;
    &::before {
      background-image: url('./images/bg-mobile.png');
      width: 100%;
      left: 0;
      top: 7%;
      background-position: center;
      background-size: contain;
    }
  }
  .banner-block__advantage-icon {
    max-width: 36px;
    max-height: 36px;
  }
}