.WhyUsHeader {
  background-color: var(--grey-darker);
  position: relative;
  overflow: hidden;
  opacity:1!important;
}
.WhyUsHeader .container {
  min-height: 419px;
  padding-top: 48px;
  padding-bottom: 162px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .WhyUsHeader .container {
    min-height: 500px;
    padding-top: 104px;
    padding-bottom: 104px;
  }
}
.WhyUsHeader .title {
  color: var(--white);
  font-size: 32px;
  line-height: 1.12;
  font-style: normal;
  font-weight: 300;
  text-align: left;
  letter-spacing: -1.5px;
  margin-bottom: 24px;
}
@media (min-width: 992px) {
  .WhyUsHeader .title {
    font-size: 64px;
    line-height: 1;
    font-weight: normal;
    max-width: 747px;
    margin-bottom: 32px;
  }
}
.WhyUsHeader .subtitle {
  color: var(--white);
  font-size: 20px;
  line-height: 1.2;
  font-style: normal;
  font-weight: normal;
  text-align: left;
  max-width: 574px;
  margin-right: auto;
}
.WhyUsHeader .subtitle p,
.WhyUsHeader .subtitle h1,
.WhyUsHeader .subtitle h2,
.WhyUsHeader .subtitle h3,
.WhyUsHeader .subtitle h4,
.WhyUsHeader .subtitle h5 {
  color: var(--white);
  font-size: 20px;
  line-height: 1.2;
  font-style: normal;
  font-weight: normal;
  text-align: left;
  margin: 0;
}
.WhyUsHeader .subtitle p + p {
  margin-top: 12px;
}
.WhyUsHeader .animation {
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.WhyUsHeader .animation_circle {
  position: absolute;
}
.WhyUsHeader .animation_circle-small {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("../../assets/images/circle-white.webp");
  z-index: 2;
}
.WhyUsHeader .animation_circle-small:nth-child(1){
  background-image: url("../../assets/images/hero-circle.webp");

}
.WhyUsHeader .animation_circle-small:nth-child(2){
  background-image: url("../../assets/images/circle-blue.webp");
}
.WhyUsHeader .animation_circle-large {
  display: block;
  border-radius: 100%;
  background-color: var(--grey);
  z-index: 1;
}
.WhyUsHeader .animation_circle-small:nth-of-type(1) {
  width: 90px;
  height: 90px;
  left: -92px;
  bottom: 39px;
  animation: WhyUsHeaderSmall1 1.5s 1s forwards;
}
@media (min-width: 992px) {
  .WhyUsHeader .animation_circle-small:nth-of-type(1) {
    width: 208px;
    height: 208px;
    right: 456px;
    top: -347px;
    left: auto;
    bottom: auto;
    animation-name: WhyUsHeaderSmall1Desktop;
  }
}
.WhyUsHeader .animation_circle-small:nth-of-type(2) {
  width: 176px;
  height: 176px;
  right: 99px;
  bottom: -178px;
  animation: WhyUsHeaderSmall2 1.5s 1s forwards;
}
@media (min-width: 992px) {
  .WhyUsHeader .animation_circle-small:nth-of-type(2) {
    width: 494px;
    height: 494px;
    right: 87px;
    top: -663px;
    bottom: auto;
    animation-name: WhyUsHeaderSmall2Desktop;
  }
}
.WhyUsHeader .animation_circle-small:nth-of-type(3) {
  width: 90px;
  height: 90px;
  right: -92px;
  bottom: 39px;
  animation: WhyUsHeaderSmall3 1.5s 1s forwards;
}
@media (min-width: 992px) {
  .WhyUsHeader .animation_circle-small:nth-of-type(3) {
    width: 208px;
    height: 208px;
    right: 17px;
    top: -178px;
    animation-name: WhyUsHeaderSmall3Desktop;
  }
}
.WhyUsHeader .animation_circle-large {
  width: 437px;
  height: 437px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -439px;
  animation: WhyUsHeaderLarge 1.5s 1s forwards;
}
@media (min-width: 992px) {
  .WhyUsHeader .animation_circle-large {
    width: 565px;
    height: 565px;
    bottom: -315px;
    right: 51px;
    left: auto;
    transform: none;
    animation-name: WhyUsHeaderLargeDesktop;
  }
}
.WhyUsHeader.v4 .container {
  padding-bottom: 184px;
}
@media (min-width: 992px) {
  .WhyUsHeader.v4 .container {
    padding-bottom: 44px;
  }
}
@media (min-width: 992px) {
  .WhyUsHeader.v4 .title {
    margin-bottom: 25px;
  }
}
@media (min-width: 992px) {
  .WhyUsHeader.v4 .subtitle {
    font-size: 16px;
    line-height: 1.25;
    max-width: 476px;
  }
}
@media (min-width: 992px) {
  .WhyUsHeader.v4 .subtitle p,
  .WhyUsHeader.v4 .subtitle h1,
  .WhyUsHeader.v4 .subtitle h2,
  .WhyUsHeader.v4 .subtitle h3,
  .WhyUsHeader.v4 .subtitle h4,
  .WhyUsHeader.v4 .subtitle h5 {
    font-size: 16px;
    line-height: 1.25;
    max-width: 476px;
  }
}
.WhyUsHeader.v4 .animation_circle-small:nth-of-type(1) {
  width: 214px;
  height: 214px;
  left: -236px;
  bottom: -18px;
  animation-name: WhyUsHeaderSmall1V4;
}
@media (min-width: 992px) {
  .WhyUsHeader.v4 .animation_circle-small:nth-of-type(1) {
    width: 208px;
    height: 208px;
    top: -210px;
    right: 460px;
    bottom: auto;
    left: auto;
    animation-name: WhyUsHeaderSmall1V4Desktop;
  }
}
.WhyUsHeader.v4 .animation_circle-small:nth-of-type(2) {
  width: 124px;
  height: 124px;
  right: 109px;
  bottom: 105%;
  top: auto;
  animation-name: WhyUsHeaderSmall2V4;
}
@media (min-width: 992px) {
  .WhyUsHeader.v4 .animation_circle-small:nth-of-type(2) {
    width: 428px;
    height: 428px;
    top: -456px;
    right: 132px;
    left: auto;
    bottom: auto;
    animation-name: WhyUsHeaderSmall2V4Desktop;
  }
}
.WhyUsHeader.v4 .animation_circle-small:nth-of-type(3) {
  width: 90px;
  height: 90px;
  right: -133px;
  bottom: 17px;
  top: auto;
  left: auto;
  animation-name: WhyUsHeaderSmall3V4;
}
@media (min-width: 992px) {
  .WhyUsHeader.v4 .animation_circle-small:nth-of-type(3) {
    width: 208px;
    height: 208px;
    right: -54px;
    bottom: -212px;
    top: auto;
    left: auto;
    animation-name: WhyUsHeaderSmall3V4Desktop;
  }
}
.WhyUsHeader.v4 .animation_circle-large {
  width: 437px;
  height: 437px;
  right: -171px;
  bottom: -489px;
  top: auto;
  left: auto;
  transform: none;
  animation-name: WhyUsHeaderLargeV4;
}
@media (min-width: 992px) {
  .WhyUsHeader.v4 .animation_circle-large {
    width: 1136px;
    height: 1136px;
    top: -878px;
    right: -841px;
    bottom: auto;
    left: auto;
    animation-name: WhyUsHeaderLargeV4Desktop;
  }
}
.WhyUsHeader.v1 .container {
  padding-bottom: 168px;
}
@media (min-width: 992px) {
  .WhyUsHeader.v1 .container {
    padding-bottom: 44px;
  }
}
@media (min-width: 992px) {
  .WhyUsHeader.v1 .title {
    margin-bottom: 30px;
  }
}
.WhyUsHeader.v1 .subtitle {
  max-width: 314px;
  margin-right: auto;
}
@media (min-width: 992px) {
  .WhyUsHeader.v1 .subtitle {
    max-width: 574px;
  }
}
@media (min-width: 992px) {
  .WhyUsHeader.v1 .subtitle p,
  .WhyUsHeader.v1 .subtitle h1,
  .WhyUsHeader.v1 .subtitle h2,
  .WhyUsHeader.v1 .subtitle h3,
  .WhyUsHeader.v1 .subtitle h4,
  .WhyUsHeader.v1 .subtitle h5 {
    max-width: 100%;
  }
}
.WhyUsHeader.v1 .animation_circle-small:nth-of-type(1) {
  width: 90px;
  height: 90px;
  left: -105%;
  bottom: 51px;
  animation-name: WhyUsHeaderSmall1V1;
}
@media (min-width: 992px) {
  .WhyUsHeader.v1 .animation_circle-small:nth-of-type(1) {
    width: 208px;
    height: 208px;
    top: -210px;
    right: 460px;
    bottom: auto;
    left: auto;
    animation-name: WhyUsHeaderSmall1V1Desktop;
  }
}
.WhyUsHeader.v1 .animation_circle-small:nth-of-type(2) {
  width: 176px;
  height: 176px;
  right: 42px;
  bottom: -105%;
  top: auto;
  animation-name: WhyUsHeaderSmall2V1;
}
@media (min-width: 992px) {
  .WhyUsHeader.v1 .animation_circle-small:nth-of-type(2) {
    width: 428px;
    height: 428px;
    top: -456px;
    right: 112px;
    left: auto;
    bottom: auto;
    animation-name: WhyUsHeaderSmall2V1Desktop;
  }
}
.WhyUsHeader.v1 .animation_circle-small:nth-of-type(3) {
  display: none;
}
.WhyUsHeader.v1 .animation_circle-large {
  width: 437px;
  height: 437px;
  right: -244px;
  bottom: -316px;
  top: auto;
  left: auto;
  transform: none;
  animation-name: WhyUsHeaderLargeV1;
}
@media (min-width: 992px) {
  .WhyUsHeader.v1 .animation_circle-large {
    width: 1136px;
    height: 1136px;
    top: -878px;
    right: -841px;
    bottom: auto;
    left: auto;
    animation-name: WhyUsHeaderLargeV1Desktop;
  }
}
.WhyUsHeader.v2 .container {
  padding-bottom: 32px;
}
@media (min-width: 992px) {
  .WhyUsHeader.v2 .container {
    padding-bottom: 104px;
  }
}
.WhyUsHeader.v2 .animation_circle-small:nth-of-type(1) {
  width: 234px;
  height: 234px;
  top: -240px;
  right: -240px;
  left: auto;
  bottom: auto;
  animation-name: WhyUsHeaderV2Small1;
}
@media (min-width: 992px) {
  .WhyUsHeader.v2 .animation_circle-small:nth-of-type(1) {
    width: 208px;
    height: 208px;
    right: -163px;
    top: 307px;
    animation-name: WhyUsHeaderV2Small1Desktop;
  }
}
.WhyUsHeader.v2 .animation_circle-small:nth-of-type(2) {
  display: none;
}
@media (min-width: 992px) {
  .WhyUsHeader.v2 .animation_circle-small:nth-of-type(2) {
    display: block;
    width: 386px;
    height: 386px;
    right: -918px;
    top: 359px;
    top: auto;
    left: auto;
    animation-name: WhyUsHeaderV2Small2Desktop;
  }
}
.WhyUsHeader.v2 .animation_circle-small:nth-of-type(3) {
  display: none;
}
.WhyUsHeader.v2 .animation_circle-large {
  width: 437px;
  height: 437px;
  top: 335px;
  left: -470px;
  bottom: auto;
  right: auto;
  transform: none;
  animation-name: WhyUsHeaderV2Large;
  opacity: 0.3;
}
@media (min-width: 992px) {
  .WhyUsHeader.v2 .animation_circle-large {
    width: 916px;
    height: 916px;
    right: -501px;
    top: -644px;
    left: auto;
    animation-name: WhyUsHeaderV2LargeDesktop;
    opacity: 1;
  }
}
.WhyUsHeader .kpis {
  margin-top: 64px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .WhyUsHeader .kpis {
    margin-top: 74px;
    flex-direction: row;
  }
}
.WhyUsHeader .kpis .column {
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .WhyUsHeader .kpis .column {
    flex-direction: row;
  }
}
.WhyUsHeader .item {
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(var(--RGB-white), 0.3);
  background-color: var(--grey-darker);
  margin-bottom: 16px;
  position: relative;
  padding: 24px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .WhyUsHeader .item {
    width: calc(33.33% - 16px);
    min-height: 257px;
    margin-bottom: 0;
    margin-left: auto;
  }
}
@media (min-width: 1400px) {
  .WhyUsHeader .item {
    width: calc(25% - 16px);
    max-width: 276px;
  }
}
.WhyUsHeader .item:first-child {
  margin-left: 0;
}
@media (min-width: 1400px) {
  .WhyUsHeader .item.big {
    width: calc(50% - 16px);
    max-width: 576px;
  }
}
.WhyUsHeader .item:after {
  content: "";
  display: block;
  width: 644px;
  height: 644px;
  border-radius: 100%;
  opacity: 0.3;
  background: var(--blue);
  filter: blur(50px);
  position: absolute;
  left: -394px;
  bottom: -558px;
  transition: all 0.25s ease-in-out;
  z-index: 0;
}
.WhyUsHeader .item .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-right: auto;
  margin-bottom: auto;
  position: relative;
  z-index: 1;
}
.WhyUsHeader .item .ico img {
  width: auto;
  max-height: 40px;
}
.WhyUsHeader .item .number {
  color: var(--white);
  font-size: 40px;
  line-height: 1.1;
  font-style: normal;
  font-weight: 500;
  text-align: left;
  display: block;
  width: 100%;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
@media (min-width: 992px) {
  .WhyUsHeader .item .number {
    font-size: 72px;
    line-height: 0.88;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -1.5px;
    text-align: left;
  }
}
.WhyUsHeader .item .text {
  color: var(--white);
  font-size: 18px;
  line-height: 1.11;
  font-style: normal;
  font-weight: 500;
  text-align: left;
  position: relative;
  z-index: 1;
}

@keyframes WhyUsHeaderLarge {
  to {
    bottom: -319px;
  }
}
@keyframes WhyUsHeaderLargeDesktop {
  to {
    width: 591px;
    height: 591px;
    right: 38px;
    bottom: -305px;
  }
}
@keyframes WhyUsHeaderSmall1 {
  to {
    left: 32px;
  }
}
@keyframes WhyUsHeaderSmall1Desktop {
  to {
    right: 456px;
    top: 208px;
  }
}
@keyframes WhyUsHeaderSmall2 {
  to {
    bottom: 34px;
  }
}
@keyframes WhyUsHeaderSmall2Desktop {
  to {
    right: 87px;
    top: -37px;
  }
}
@keyframes WhyUsHeaderSmall3 {
  to {
    right: 30px;
  }
}
@keyframes WhyUsHeaderSmall3Desktop {
  to {
    right: 17px;
    top: 208px;
  }
}
@keyframes WhyUsHeaderSmall1V4 {
  to {
    left: -36px;
  }
}
@keyframes WhyUsHeaderSmall2V4 {
  to {
    bottom: 49px;
  }
}
@keyframes WhyUsHeaderSmall3V4 {
  to {
    right: 33px;
  }
}
@keyframes WhyUsHeaderLargeV4 {
  to {
    bottom: -289px;
  }
}
@keyframes WhyUsHeaderSmall1V4Desktop {
  to {
    top: 0;
    right: 360px;
  }
}
@keyframes WhyUsHeaderSmall2V4Desktop {
  to {
    top: 56px;
  }
}
@keyframes WhyUsHeaderSmall3V4Desktop {
  to {
    right: 54px;
    bottom: 2px;
  }
}
@keyframes WhyUsHeaderLargeV4Desktop {
  to {
    top: -678px;
    right: -641px;
  }
}
@keyframes WhyUsHeaderSmall1V1 {
  to {
    left: 57px;
  }
}
@keyframes WhyUsHeaderSmall2V1 {
  to {
    bottom: 45px;
  }
}
@keyframes WhyUsHeaderLargeV1 {
  to {
    right: -204px;
    bottom: -276px;
  }
}
@keyframes WhyUsHeaderSmall1V1Desktop {
  to {
    top: 14px;
    right: 504px;
  }
}
@keyframes WhyUsHeaderSmall2V1Desktop {
  to {
    top: 58px;
  }
}
@keyframes WhyUsHeaderLargeV1Desktop {
  to {
    top: -678px;
    right: -641px;
  }
}
@keyframes WhyUsHeaderV2Small1 {
  to {
    top: -90px;
    right: -85px;
  }
}
@keyframes WhyUsHeaderV2Large {
  to {
    left: -155px;
  }
}
@keyframes WhyUsHeaderV2LargeDesktop {
  to {
    width: 1040px;
    height: 1040px;
    right: -563px;
    top: -706px;
  }
}
@keyframes WhyUsHeaderV2Small1Desktop {
  to {
    right: 408px;
    top: 29px;
  }
}
@keyframes WhyUsHeaderV2Small2Desktop {
  to {
    right: 40px;
    top: 29px;
  }
}