.bg-violet {
  --tw-bg-opacity: 1;
  background-color: rgb(227, 237, 252);
}

.hero-background-wrapper{
  position: absolute;
  top: 0;
  right: 50%;
  width: 50vw;
  height: 100%;
}

.hero-background-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-triangle-blue{
  position: absolute;
  bottom: -233px;
  right: 39%;
  width: 70vw;
  height: 300px;
  background-color: #3F5BEC;
  transform: rotate(12deg);
}

.hero-triangle-grey{
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 264px;
    height: 130%;
    background-color: #E3EDFC;
    transform: translateX(-60%) rotate(-20deg);
}

.hero-block-grey{
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100%;
    background-color: #E3EDFC;
}

.form-violet-block{
  position: absolute;
  top: 640px;
  right: 302px;
  width: 500px;
  height: 306px;
  background-color: #3F5BEC;
  transform: rotate(161deg);
}

.form-grey-block{
    position: absolute;
    top: -240px;
    right: -200px;
    width: 828px;
    height: 623px;
    background-color: #D9D9D9;
    transform: rotate(-110deg);
    overflow: hidden;
}

.form-image-block{
  position: absolute;
  width: 110%;
  height: 110%;
  top: -72px;
  left: -274px;
  transform: rotate(110deg);
}

.form-image-block-filter{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(19, 27, 65, 0.24);
}

@media (max-width: 677px) {
  .hero-title{
    font-size: 40px;
    margin-bottom: 16px;
  }

  .hero-text{
    margin-bottom: 24px;
  }

  .hero-button-wrapper{
    flex-direction: column;
    gap: 1rem;
  }

  .hero-button{
    max-width: 266px;
    width: 100%;
  }

  .hero-triangle-blue{
    bottom: -247px;
    right: 57%;
  }

  .form-violet-block{
    display: none;
  }

  .form-grey-block{
      display: none;
  }

  .form-wrapper{
    padding: 32px 24px 48px 24px;
  }

  .form-title{
    font-size: 32px;
    margin-bottom: 56px;
  }

  .hero-subtitle,
  .form-subtitle {
    font-size: 14px;
  }

  .form-subtitle {
    margin-bottom: 16px;
  }

  .form-label-text{
    font-size: 14px;
  }

  .form-input{
    padding: 12px 16px;
  }
}

.hero-background-filter{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(227, 237, 252, 0.80);
}

@media (min-width: 1024px) {
  .hero-background-filter{
    display: none;
  }
}

@media (max-width: 1200px) {
  .form-image-block-filter{
    background-color: rgba(227, 237, 252, 0.80);
  }
}

.team-item{
  padding: 32px;
  width: 100%;
}

@media (min-width: 768px) {
  .team-item{
      width: calc((100% - 1 * 32px) / 2);
  }
}

@media (min-width: 1024px) {
  .team-item{
      width: calc((100% - 3 * 32px) / 4);
  }
}

.team-social-link{
  color: #462CE9;
  display: flex;
}

.team-social-link:hover,
.team-social-link:focus{
  scale: 1.1;
}

.team-social-link svg{
  fill: currentColor;
}