.main-banner {
  background: #000;
  color: #fff;
  position: relative;
}
/*.main-banner .main-banner-bg {*/
/*  position: absolute;*/
/*  top: 50%;*/
/*  left: 50%;*/
/*  transform: translate(-50%, -50%);*/
/*  z-index: 1;*/
/*  width: 1768px;*/
/*  height: 1273px;*/
/*  background-image: url("../img/main-banner-bg.svg");*/
/*  background-position: center center;*/
/*  background-repeat: no-repeat;*/
/*  background-size: contain;*/
/*}*/
/*.main-banner .main-banner-bg {*/
/*  position: relative;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  display: block;*/
/*}*/
.main-banner .main-banner-bg {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-image: url("../img/main-banner-blend.png");
  mix-blend-mode: overlay;
  opacity: 0.4;
  z-index: 1;
}
.main-banner .main-banner-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
.main-banner .main-banner-bg-video .video-player {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 100vw;
  max-width: 3840px;
  min-width: 1920px;
  position: absolute;
  border: none;
  background-color: transparent;
}
.main-banner .inner {
  padding: 236px 0 100px;
  max-width: 1322px;
  min-height: 1065px;
  position: relative;
  z-index: 3;
}
.main-banner .sub-title {
  font-size: 28px;
  margin-bottom: 34px;
  margin-right: 56px;
  letter-spacing: 0.02em;
}
.main-banner .title1 {
  font-size: 147px;
  font-weight: 800;
  letter-spacing: 3px;
  line-height: 130px;
  margin-bottom: 15px;
  margin-right: 45px;
}
.main-banner .title2 {
  margin-bottom: 76px;
  text-transform: uppercase;
}
.main-banner .title2 .part1 {
  font-weight: 800;
  font-size: 52px;
}
.main-banner .title2 .part2 {
  font-weight: 600;
  font-size: 37px;
}
.main-banner .bottom-wr {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 10px;
}
.main-banner .scroll-bt {
  position: relative;
  z-index: 1;
  cursor: pointer;
  width: 160px;
  height: 160px;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 200;
  padding: 20px;
  text-align: center;
  transition: all 0.5s linear;
  color: #fff;
}
.main-banner .scroll-bt:hover {
  color: #000;
  border-color: transparent;
}
.main-banner .scroll-bt:not(:hover):before {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.1);
}
.main-banner .scroll-bt:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: #fff;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 2);
  border-radius: 50%;
}

.metrics {
  position: relative;
  z-index: 1;
}
.metrics .inner {
  max-width: 1560px;
  padding-left: 5px;
}
.metrics .top-wr {
  position: relative;
}
.metrics .title {
  font-size: 44px;
  font-weight: 800;
  margin-bottom: 78px;
  max-width: 600px;
  letter-spacing: 0.008em;
}
.metrics .with-bc-gr-green strong {
  color: #000;
  position: relative;
  display: inline-block;
  margin: 0 0 0 3px;
}
.metrics .with-bc-gr-green strong::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: -8px;
  bottom: 0;
  right: -9px;
  left: -9px;
  border-radius: 7px;
  transform: rotate(0.98deg);
  background: linear-gradient(261.61deg, #FCFF67, #05E500, #FCFF67, #05E500, #FCFF67);
  animation: gradient 10s ease infinite;
  background-size: 300%;
}
.metrics .top-button {
  position: absolute;
  top: -16px;
  left: -5px;
  width: 284px;
  height: 284px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.metrics .top-button:hover .figure9 {
  transform: scale(1.1);
}
.metrics .top-button .figure8 {
  width: 100%;
  height: 100%;
  animation: rotate-animation 10s infinite linear;
}
.metrics .top-button .figure9 {
  position: absolute;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 2);
}
.metrics .row {
  display: flex;
  align-items: stretch;
}
.metrics .row2 {
  justify-content: flex-end;
  margin-bottom: 177px;
}
.metrics .col {
  border: 1px solid #fff;
  border-radius: 15px;
  width: 32.5%;
  margin-bottom: 1.3%;
  padding: 43px 40px 28px;
  min-height: 228px;
}
.metrics .col:not(:last-child) {
  margin-left: 1.28%;
}
.metrics [class*=-bc-]:before {
  top: -5px;
}
.metrics .col-title {
  font-size: 83.267px;
  font-weight: 800;
  margin-bottom: 16px;
}
.metrics .col-title .perc {
  font-size: 58.86px;
}
.metrics .col-text {
  font-size: 26px;
  letter-spacing: 0.02em;
}
.metrics .row1 .col:last-child {
  padding: 41px 40px 26px;
}
.metrics .row1 .col:last-child .col-title {
  padding-right: 3px;
}
.metrics .row1 .col:last-child .col-text {
  padding-right: 4px;
}
.metrics .row2 .col .col-title {
  padding-right: 8px;
}
.metrics .row2 .col .col-text {
  padding-right: 7px;
}
.metrics .row2 .col:first-child .col-title {
  padding-right: 3px;
  padding-top: 4px;
  letter-spacing: 0.02em;
}
.metrics .row2 .col:first-child .col-text {
  padding-right: 6px;
}
.metrics .bottom-wr {
  display: flex;
  align-items: flex-end;
  background: #fff url(../img/noise-bg1.webp) top left repeat;
  padding-top: 166px;
  padding-bottom: 114px;
  position: relative;
}
.metrics .bottom-wr .inner {
  width: 1560px;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.metrics .bottom-wr .figure1 {
  max-width: 58px;
  min-width: 58px;
  height: 58px;
  margin: 19px 5px 0 35px;
  transform: rotate(-180deg);
  background-image: url(../img/figure1_metrics.svg);
}
.metrics .bottom-wr .talk-button .figure3 {
  margin-right: 9px;
}
.metrics .bottom-wr .metrics_line {
  content: "";
  position: absolute;
  width: 693px;
  height: 316px;
  bottom: 33px;
  left: 0;
  background: url(../img/metrics_line.svg) no-repeat top center;
  background-size: contain;
}
.metrics .bottom-title {
  margin: 0 0 60px 17px;
  max-width: 810px;
  font-size: 96px;
  font-weight: 800;
  line-height: 96px;
  display: flex;
  color: #000;
}
.metrics .talk-button {
  color: #000;
}

@media all and (min-width: 769px) {
  .wrap {
    position: relative;
  }
  .wrap .shine-eff.-p1 {
    width: 600px;
    bottom: 150px;
    right: -5%;
    transform: rotate(-25deg);
  }
  .wrap .shine-eff.-p1:before, .wrap .shine-eff.-p1:after {
    width: 400px;
    height: 400px;
  }
  .wrap .shine-eff.-p1:before {
    background: radial-gradient(circle, rgb(243, 255, 1) 0%, transparent 70%);
  }
  .wrap .shine-eff.-p1:after {
    background: radial-gradient(circle, rgb(155, 255, 1) 0%, transparent 70%);
  }
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media all and (max-width: 768px) {
  .main-banner {
    padding-top: 67px;
  }
  .main-banner .inner {
    padding: 100px 5% 100px;
    min-height: 0;
  }
  .main-banner .main-banner-bg-video .video-player {
    top: auto;
    bottom: 0;
    left: 70%;
    transform: translate(-50%, 5%) matrix(-1, 0, 0, 1, 0, 0);
    width: 100%;
    min-width: 992px;
  }
  .main-banner .sub-title {
    font-size: 16px;
    margin: 0 30px 42px 0;
  }
  .main-banner:before {
    width: 13px;
    margin-left: 10px;
  }
  .main-banner .title1 {
    font-size: 89px;
    margin-right: 0;
    line-height: 92%;
  }
  .main-banner .title1 strong {
    color: #000;
    position: relative;
    display: inline-block;
    font-size: 78px;
    line-height: 76px;
    padding-left: 14px;
    transform: rotate(-2.47deg);
  }
  .main-banner .title1 strong::before {
    content: "";
    display: block;
    position: absolute;
    background: linear-gradient(270deg, #FAFF00 -1.15%, #8FFF00 101.14%);
    border-radius: 3px;
    left: 3px;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .main-banner .title1 .word_1 {
    font-size: 88px;
  }
  .main-banner .title1 .word_2 {
    font-size: 78px;
    margin-top: -14px;
  }
  .main-banner .title1 .word_3 {
    margin-top: -12px;
  }
  .main-banner .title2 {
    width: 100%;
    margin-bottom: 9.4117647059vw;
    margin-top: -6px;
  }
  .main-banner .title2 .part1 {
    font-size: 19px;
  }
  .main-banner .title2 .part2 {
    font-size: 14px;
  }
  .main-banner .scroll-bt {
    width: 130px;
    height: 130px;
    font-size: 14px;
    margin-top: 5px;
    margin-left: 9px;
  }
  .metrics .title {
    margin-bottom: 20px;
    font-size: 30px;
  }
  .metrics .top-button {
    display: none;
  }
  .metrics .col {
    width: 50%;
    min-height: 0;
    margin-bottom: 1.5%;
    padding: 3.5% 4%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px;
  }
  .metrics .col:not(:last-child) {
    margin-left: 2%;
  }
  .metrics .col-title {
    font-size: 31px;
    margin-bottom: 0;
  }
  .metrics .col-title .perc {
    font-size: 25px;
  }
  .metrics .col-text {
    font-size: 14px;
  }
  .metrics .row2 {
    margin-bottom: 90px;
  }
  .metrics .bottom-title {
    font-size: 40px;
    line-height: 42px;
    margin: 0 0 20px 10px;
  }
  .metrics .bottom-wr {
    padding-top: 90px;
    padding-bottom: 90px;
  }
  .metrics .bottom-wr .inner {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 437px;
  }
  .metrics .bottom-wr .inner .figure1 {
    max-width: 22px;
    min-width: 22px;
    height: 22px;
    margin: 10px 0 0 15px;
  }
  .metrics .bottom-wr .metrics_line {
    width: 300px;
    height: 160px;
    bottom: -10px;
    left: 4%;
  }
  .metrics .shine-eff.-p1 {
    top: 100px;
    left: -150px;
    transform: rotate(-55deg);
  }
  .metrics .shine-eff.-p2 {
    right: -150px;
    width: 300px;
    bottom: -10px;
    transform: rotate(-45deg);
  }
  .home-page .metrics .inner {
    padding: 0 4%;
  }
  .home-page .metrics .row1 .col {
    padding: 3.5% 4% 4.4%;
    margin-bottom: 1.9%;
  }
  .home-page .metrics .row1 .col:last-child .col-title {
    padding-right: 0;
  }
  .home-page .metrics .row1 .col:last-child .col-text {
    padding-right: 0;
  }
  .home-page .metrics .row1 .col-title {
    margin-bottom: 5px;
  }
  .home-page .metrics .row1 .col-text {
    padding-right: 0;
  }
  .home-page .metrics .row2 .col .col-text {
    padding-right: 0;
  }
  .home-page .metrics .row2 .col .col-title {
    margin-bottom: 5px;
    padding-right: 0;
  }
  .home-page .metrics .bottom-title {
    margin: 0 0 20px auto;
    max-width: 335px;
  }
  .home-page .metrics .talk-button {
    margin-left: 15px;
    margin-top: -4px;
  }
}
@media all and (max-width: 425px) {
  .main-banner .title1 {
    font-size: 20.7058823529vw;
    line-height: 18.8235294118vw;
  }
  .main-banner .title1 strong {
    font-size: 18.3529411765vw;
    line-height: 17.8823529412vw;
    padding-left: 3.2941176471vw;
  }
  .main-banner .title1 .word_1 {
    font-size: 20.7058823529vw;
  }
  .main-banner .title1 .word_2 {
    font-size: 18.3529411765vw;
    margin-top: -3.2941176471vw;
  }
  .main-banner .title1 .word_3 {
    margin-top: -1.6470588235vw;
    margin-right: -2.8235294118vw;
  }
  .main-banner .part1 {
    font-size: 4.4705882353vw;
  }
  .main-banner .part2 {
    font-size: 3.2941176471vw;
  }
  .main-banner .scroll-bt {
    width: 30.5882352941vw;
    height: 30.5882352941vw;
    font-size: 3.2941176471vw;
  }
  .metrics .bottom-wr {
    padding-top: 21.1764705882vw;
    padding-bottom: 21.1764705882vw;
  }
  .metrics .bottom-wr .inner .figure1 {
    max-width: 5.1764705882vw;
    min-width: 5.1764705882vw;
    height: 5.1764705882vw;
    margin: 2.3529411765vw 0 0 3.5294117647vw;
  }
  .metrics .bottom-wr .bottom-title {
    font-size: 9.4117647059vw;
    line-height: 9.8823529412vw;
  }
  .metrics .bottom-wr .metrics_line {
    width: 70.5882352941vw;
    height: 37.6470588235vw;
    bottom: -2.3529411765vw;
  }
  .metrics .bottom-wr .talk-button {
    width: 32.9411764706vw;
    height: 32.9411764706vw;
    font-size: 4.2352941176vw;
    line-height: 4.2352941176vw;
    padding: 5.8823529412vw;
  }
}
/*----------------------------------------------------------*/
@media all and (max-width: 1920px) and (min-width: 769px) {
  .metrics .col {
    min-height: 11.875vw;
    padding: 2.2395833333vw 2.0833333333vw 1.4583333333vw;
  }
  .metrics .col-title {
    font-size: 4.3229166667vw;
  }
  .metrics .col-title .perc {
    font-size: 3.065625vw;
  }
  .metrics .bottom-wr {
    padding-top: 8.6458333333vw;
    padding-bottom: 5.9375vw;
  }
  .metrics .bottom-wr .metrics_line {
    width: 36.09375vw;
    height: 16.4583333333vw;
    bottom: 1.71875vw;
  }
}
@media all and (max-width: 1600px) and (min-width: 769px) {
  .metrics .title {
    max-width: 37.5vw;
    font-size: 2.75vw;
  }
  .metrics .with-bc-gr-green strong::before {
    top: -0.5vw;
    right: -0.5625vw;
    left: -0.5625vw;
    border-radius: 0.4375vw;
  }
  .metrics .top-button {
    width: 17.8125vw;
    height: 17.8125vw;
  }
  .metrics .figure9 {
    width: 9.0625vw;
    height: 9.0625vw;
  }
  .metrics .bottom-title {
    font-size: 6vw;
    line-height: 5.9375vw;
    max-width: 50.625vw;
    margin: 0 0 3.75vw 1.0625vw;
  }
  .metrics .bottom-wr .inner {
    width: 97.5vw;
  }
  .metrics .bottom-wr .figure1 {
    max-width: 3.4375vw;
    min-width: 3.4375vw;
    height: 3.4375vw;
  }
}
@media all and (max-width: 1440px) and (min-width: 769px) {
  .main-banner .inner {
    max-width: none;
    min-height: 73.1034482759vw;
    padding: 15.8620689655vw 75px 6.8965517241vw 3%;
  }
  .main-banner .title1 {
    font-size: 10.1379310345vw;
    letter-spacing: 0.1379310345vw;
    line-height: 8.9655172414vw;
  }
  .main-banner .scroll-bt {
    width: 11.0344827586vw;
    height: 11.0344827586vw;
    padding: 1.3793103448vw;
  }
  .metrics .row2 {
    margin-bottom: 100px;
  }
}
@media all and (max-width: 1024px) and (min-width: 769px) {
  .main-banner .scroll-bt {
    font-size: 15px;
  }
  .metrics .col-text {
    font-size: 2.5390625vw;
  }
}






:root {
  --color1: 0, 64, 229;
  --color2: 0, 207, 235;
  --color3: 112, 0, 223;
  --color4: 255, 223, 250;
  --color5: 255, 255, 255;
  --color-interactive: 124, 149, 238;
  --circle-size: 80%;
  --blending: hard-light;
}
.gradient-bg {
  width: 100%;
  height: 100%;
  padding: 236px 0 100px;
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  top: 0;
  left: 0;
}

.gradient-bg svg {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
.gradient-bg .gradients-container {
  /*filter: url(#goo) blur(75px);*/
  filter: blur(75px);
  width: 100%;
  height: 100%;
  /*mix-blend-mode: color-dodge;*/
}
.gradient-bg .gradients-container.gradients-container-mobile {
  display: none;
}
.gradient-bg .g1 {
  position: absolute;
  /*background: radial-gradient(ellipse at center, rgba(0, 64, 229, 1) 0%, rgba(0, 64, 229, 0) 100%);*/
  background: radial-gradient(ellipse at top left,
  rgba(0, 64, 229, 1) 0%,
  rgba(0, 64, 229, 0.5) 80%,
  rgba(0, 0, 0, 0.05) 100%
  );
  /*background: rgba(0, 64, 229, 1) 0%;*/
  border-radius: 30%;
  width: 1340px;
  height: 583px;
  transform: rotate(-30.471deg);
  filter: blur(100px);
  top: 7%;
  left: 17%;
  transform-origin: center;
  animation: splitAndMerge 20s ease-in-out infinite;
  opacity: 1;
  mix-blend-mode: var(--blending);
}

.gradient-bg .g1::before,
.gradient-bg .g1::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: blue;
  border-radius: 50%;
  animation: splitParts 20s ease-in-out infinite;
}
.gradient-bg .g1::before {
  transform-origin: center left;
}
.gradient-bg .g1::after {
  transform-origin: center right;
}
.gradient-bg .g2 {
  position: absolute;
   /*background: radial-gradient(ellipse at center, rgba(var(--color2), 1) 0, rgba(var(--color2), 0) 100%) no-repeat;*/
  background: rgba(var(--color2), 1);
  width: 878.994px;
  height: 201.601px;
  transform: rotate(-30.471deg);
  filter: blur(100px);
  top: 26%;
  left: 13%;
  transform-origin: center center;
  opacity: 1;
  mix-blend-mode: var(--blending);
  animation: ovalToCircle2 20s ease-in-out infinite;
}
.gradient-bg .g3 {
  position: absolute;
  /*background: radial-gradient(ellipse at center, rgba(var(--color3), 1) 0, rgba(var(--color3), 0) 100%) no-repeat;*/
  background: rgba(var(--color3), 1);
  filter: blur(50px);
  transform: rotate(-30.471deg);
  width: 567px;
  height: 352px;
  border-radius: 30%;
  top: 28%;
  left: 20%;
  transform-origin: center center;
  opacity: 1;
  mix-blend-mode: var(--blending);
  /*animation: moveInCircle 30s ease-in-out infinite;*/
  animation: moveInCircle3 20s ease-in-out infinite;
}
.gradient-bg .g4 {
  position: absolute;
  /*background: radial-gradient(ellipse at center, rgba(var(--color4), 1) 0, rgba(var(--color4), 0) 100%) no-repeat;*/
  background: rgba(var(--color4), 1);
  filter: blur(50px);
  width: 289.093px;
  height: 112.788px;
  transform: rotate(-46.869deg);
  top: 43%;
  left: 22%;
  transform-origin: center center;
  opacity: 0.7;
  mix-blend-mode: var(--blending);
  animation: moveInCircleSmall 20s ease-in-out infinite;
}
.gradient-bg .g5 {
  position: absolute;
   /*background: radial-gradient(ellipse at center, rgba(var(--color5), 1) 0, rgba(var(--color5), 0) 100%) no-repeat;*/
  background: rgba(var(--color5), 1);
  width: 236.833px;
  height: 84.554px;
  transform: rotate(-29.869deg);
  top: 40%;
  left: 24%;
  transform-origin: center center;
  animation: moveInCircleLarge 80s ease-in-out infinite;
  opacity: 1;
  mix-blend-mode: var(--blending);
  /*animation: moveInCircle 30s ease-in-out infinite;*/
}
.gradient-bg .g6 {
  position: absolute;
  /*background: radial-gradient(ellipse at center, rgba(0, 64, 229, 1) 0%, rgba(0, 64, 229, 0) 100%);*/
  background: rgba(0, 64, 229, 1);
  border-radius: 30%;
  width: 1140px;
  height: 383px;
  transform: rotate(-30.471deg);
  top: 39%;
  left: 28%;
  transform-origin: center;
  opacity: 1;
  mix-blend-mode: var(--blending);
  animation: splitAndMerge 20s ease-in-out infinite;
}
.gradient-bg .g7 {
  position: absolute;
   /*background: radial-gradient(ellipse at center, rgba(var(--color2), 1) 0, rgba(var(--color2), 0) 100%) no-repeat;*/
  background: rgba(var(--color2), 1);
  width: 828.994px;
  height: 151.601px;
  border-radius: 100%;
  transform: rotate(-30.471deg);
  top: 56%;
  left: 24%;
  transform-origin: center center;
  opacity: 1;
  mix-blend-mode: var(--blending);
  animation: ovalToCircle2 20s ease-in-out infinite;
}
.gradient-bg .g8 {
  position: absolute;
  /*background: radial-gradient(ellipse at center, rgba(var(--color3), 1) 0, rgba(var(--color3), 1) 20%, rgba(var(--color3), 0) 100%) no-repeat;*/
  background: rgba(var(--color3), 1);
  width: 271.994px;
  height: 173.601px;
  border-radius: 0;
  transform: rotate(-54.5deg);
  transform-origin: center center;
  opacity: 1;
  mix-blend-mode: var(--blending);
  top: auto;
  left: auto;
  bottom: 5%;
  right: -44%;
  animation: moveInCircleSmall 30s ease-in-out infinite;
}
.gradient-bg .g9 {
  position: absolute;
  /*background: radial-gradient(ellipse at center, rgba(var(--color4), 1) 0, rgba(var(--color4), 0) 100%) no-repeat;*/
  background: rgba(var(--color4), 1);
  filter: blur(50px);
  width: 289.093px;
  height: 112.788px;
  transform: rotate(-46.869deg);
  top: 43%;
  left: 22%;
  transform-origin: center center;
  opacity: 0.7;
  mix-blend-mode: var(--blending);
  animation: moveInCircleSmall 20s ease-in-out infinite;
}
.gradient-bg .g10 {
  position: absolute;
  /*background: radial-gradient(ellipse at center, rgba(48, 241, 249, 1) 0, rgba(48, 241, 249, 0) 100%) no-repeat;*/
  background: rgba(48, 241, 249, 1);
  width: 236.833px;
  height: 104.554px;
  transform: rotate(-40.869deg);
  top: 63%;
  left: 40%;
  transform-origin: center center;
  opacity: 1;
  z-index: 14;
  mix-blend-mode: var(--blending);
  animation: moveInCircleSmall 30s ease-in-out infinite;
}
.gradient-bg .interactive {
  position: absolute;
  background: radial-gradient(ellipse at center, rgba(var(--color-interactive), 1) 0, rgba(var(--color-interactive), 0) 100%) no-repeat;
  mix-blend-mode: var(--blending);
  filter: blur(50px);
  width: 383.093px;
  height: 316.788px;
  top: 0;
  left: 0;
}
.gradient-bg .g1,
.gradient-bg .g2,
.gradient-bg .g3,
.gradient-bg .g4,
.gradient-bg .g5,
.gradient-bg .g6,
.gradient-bg .g7,
.gradient-bg .g8,
.gradient-bg .g9,
.gradient-bg .g10,
.gradient-bg .interactive {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.gradient-bg .g22 {
  position: absolute;
  /* background: radial-gradient(ellipse at center, rgba(var(--color2), 1) 0, rgba(var(--color2), 0) 100%) no-repeat; */
  background: rgba(0, 0, 0, 1);
  width: 744.601px;
  height: 313.601px;
  transform: rotate(-163deg);
  top: -20%;
  right: 1%;
  transform-origin: center center;
  opacity: 1;
  mix-blend-mode: var(--blending);
  animation: moveInCircle 30s ease-in-out infinite;
}
.gradient-bg .gblack_bottom {
  position: absolute;
  /* background: radial-gradient(ellipse at center, rgba(var(--color2), 1) 0, rgba(var(--color2), 0) 100%) no-repeat; */
  background: rgba(0, 0, 0, 1);
  width: 1544.601px;
  height: 713.601px;
  transform: rotate(-215deg);
  filter: blur(35px);
  bottom: -26%;
  right: -21%;
  transform-origin: center center;
  opacity: 1;
  mix-blend-mode: var(--blending);
}
.gradient-bg .gblack_left {
  position: absolute;
  /* background: radial-gradient(ellipse at center, rgba(var(--color2), 1) 0, rgba(var(--color2), 0) 100%) no-repeat; */
  background: rgba(0, 0, 0, 1);
  width: 344.601px;
  height: 150%;
  filter: blur(50px);
  top: 50%;
  transform: translateY(-50%);
  left: -12%;
  transform-origin: center center;
  opacity: 1;
  mix-blend-mode: var(--blending);
}
.gradient-bg .gblack_right {
  position: absolute;
  /* background: radial-gradient(ellipse at center, rgba(var(--color2), 1) 0, rgba(var(--color2), 0) 100%) no-repeat; */
  background: rgba(0, 0, 0, 1);
  width: 344.601px;
  height: 150%;
  filter: blur(50px);
  top: 50%;
  transform: translateY(-50%);
  right: -12%;
  transform-origin: center center;
  opacity: 1;
  mix-blend-mode: var(--blending);
}

@keyframes splitAndMerge {
  0% {
    transform: scale(1.0, 1.0) translate(0, 0) rotate(-30.471deg);
  }
  25% {
    transform: scale(0.8, 0.8) translate(-10%, -10%) rotate(-20.471deg);
  }
  50% {
    transform: scale(1.0, 1.0) translate(10%, 10%) rotate(-30.471deg);
    opacity: 0.5;
  }
  75% {
    transform: scale(0.8, 0.8) translate(-10%, -10%) rotate(-20.471deg);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0) rotate(-30.471deg);
    opacity: 1;
  }
}
@keyframes splitParts {
  0%, 100% {
    transform: scale(1) translateX(0);
  }
  25% {
    transform: scale(0.5) translateX(-20px);
  }
  50% {
    transform: scale(0.5) translateX(20px);
  }
  75% {
    transform: scale(1) translateX(0);
  }
}

@keyframes ovalToCircle2 {
  0% {
    transform: scale(1.0, 1.0) rotate(-30.471deg) translateX(0%) translateY(0%);
  }
  25% {
    transform: scale(1.2, 1.2) rotate(-20.471deg) translateX(-30%) translateY(-20%);
  }
  50% {
    transform: scale(1.0, 1.0) rotate(-20.471deg) translateX(0%) translateY(0%);
  }
  75% {
    transform: scale(1.2, 1.2) rotate(-20.471deg) translateX(30%) translateY(20%);
  }
  100% {
    transform: scale(1.0, 1.0) rotate(-30.471deg) translateX(0%) translateY(0%);
  }
}

@keyframes moveInCircle3 {
  0% {
    transform: rotate(-30.471deg) translateX(0%) translateY(0%);
  }
  50% {
    transform: rotate(-30.471deg) translateX(40%) translateY(40%);
  }
  50% {
    transform: rotate(-30.471deg) translateX(0%) translateY(0%);
  }
  50% {
    transform: rotate(-30.471deg) translateX(-40%) translateY(-40%);
  }
  100% {
    transform: rotate(-30.471deg) translateX(0%) translateY(0%);
  }
}

@keyframes moveInCircleSmall {
  0% {
    transform: rotate(0deg) translateX(0%) translateY(0%);
  }
  50% {
    transform: rotate(-180deg) translateX(30%) translateY(30%);
  }
  100% {
    transform: rotate(-360deg) translateX(0%) translateY(0%);
  }
}

@keyframes moveInCircleLarge {
  0% {
    transform: rotate(0deg) translateX(0%) translateY(0%);
  }
  25% {
    transform: rotate(180deg) translateX(50%) translateY(50%);
  }
  50% {
    transform: rotate(0deg) translateX(0%) translateY(0%);
  }
  75% {
    transform: rotate(-180deg) translateX(-50%) translateY(-50%);
  }
  100% {
    transform: rotate(360deg) translateX(0%) translateY(0%);
  }
}
@media all and (max-width: 1600px) and (min-width: 769px) {
  .gradient-bg .gblack_left {
    left: -18%;
  }
  .gradient-bg .gblack_right {
    right: -18%;
  }
}
@media all and (max-width: 1440px) and (min-width: 769px) {
  .gradient-bg {
    padding: calc(230 / 1450 * 100vw) 75px calc(100 / 1450 * 100vw) 3%;
  }
  .gradient-bg .gblack_left {
    width: 144.601px;
    left: -8%;
  }
  .gradient-bg .gblack_right {
    width: 144.601px;
    right: -8%;
  }
  .gradient-bg .gradients-container {
    filter: blur(calc(75 * 100vw / 1440));
  }
  .gradient-bg .g1 {
    width: calc(1340 * 100vw / 1440);
    height: calc(583 * 100vw / 1440);
    filter: blur(calc(100 * 100vw / 1440));
  }
  .gradient-bg .g2 {
    width: calc(878.994 * 100vw / 1440);
    height: calc(201.601 * 100vw / 1440);
    filter: blur(calc(100 * 100vw / 1440));
  }
  .gradient-bg .g3 {
    width: calc(567 * 100vw / 1440);
    height: calc(352 * 100vw / 1440);
    filter: blur(calc(50 * 100vw / 1440));
  }
  .gradient-bg .g4 {
    width: calc(289.093 * 100vw / 1440);
    height: calc(112.788 * 100vw / 1440);
    filter: blur(calc(50 * 100vw / 1440));
  }
  .gradient-bg .g5 {
    width: calc(236.833 * 100vw / 1440);
    height: calc(84.554 * 100vw / 1440);
    filter: blur(calc(50 * 100vw / 1440));
  }
  .gradient-bg .g6 {
    width: calc(1140 * 100vw / 1440);
    height: calc(383 * 100vw / 1440);
    filter: blur(calc(100 * 100vw / 1440));
  }
  .gradient-bg .g7 {
    width: calc(828.994 * 100vw / 1440);
    height: calc(151.601 * 100vw / 1440);
    filter: blur(calc(100 * 100vw / 1440));
  }
  .gradient-bg .g8 {
    width: calc(271.994 * 100vw / 1440);
    height: calc(173.601 * 100vw / 1440);
    filter: blur(calc(50 * 100vw / 1440));
  }
  .gradient-bg .g9 {
    width: calc(289.093 * 100vw / 1440);
    height: calc(112.788 * 100vw / 1440);
    filter: blur(calc(50 * 100vw / 1440));
  }
  .gradient-bg .g10 {
    width: calc(236.833 * 100vw / 1440);
    height: calc(104.554 * 100vw / 1440);
    filter: blur(calc(50 * 100vw / 1440));
  }
  .gradient-bg .interactive {
    width: calc(383.093 * 100vw / 1440);
    height: calc(316.788 * 100vw / 1440);
    filter: blur(calc(50 * 100vw / 1440));
  }
}

@media all and (max-width: 768px) {
  .gradient-bg {
    padding: 100px 5% 100px
  }
  .gradient-bg .gblack_left {
    display: none;
  }
  .gradient-bg .gblack_right {
    display: none;
  }
  .gradient-bg .gradients-container.gradients-container-desktop{
    display: none;
  }
  .gradient-bg .gradients-container.gradients-container-mobile{
    display: block;
  }
  .gradient-bg .gradients-container {
    filter: blur(32.14421844482422px);
    position: relative;
  }
  .gradient-bg .g1 {
    background: rgba(0, 64, 229, 1);
    /* background: radial-gradient(ellipse at center, rgba(0, 64, 229, 1) 0%, rgba(0, 64, 229, 0) 100%); */
    /* background: radial-gradient(ellipse at center, rgba(0, 64, 229, 1) 0%, rgba(0, 64, 229, 1) 20%, rgba(0, 64, 229, 0) 100%); */
    border-radius: 0;
    width: 484.073px;
    height: 135.133px;
    transform: rotate(-58.5deg);
    filter: blur(42.85895538330078px);
    top: auto;
    left: auto;
    bottom: -11%;
    right: -39%;
    /*animation: none;*/
  }
  .gradient-bg .g2 {
    /* background: radial-gradient(ellipse at center, rgba(var(--color2), 1) 0, rgba(var(--color2), 1) 20%, rgba(var(--color2), 0) 100%) no-repeat; */
    background: rgba(var(--color2), 1);
    border-radius: 0;
    width: 371.994px;
    height: 173.601px;
    transform: rotate(-61.5deg);
    filter: blur(42.14421844482422px);
    top: auto;
    left: auto;
    bottom: 3%;
    right: -12%;
    /*animation: none;*/
  }
  .gradient-bg .g3 {
    /*background: radial-gradient(ellipse at center, rgba(var(--color3), 1) 0, rgba(var(--color3), 1) 20%, rgba(var(--color3), 0) 100%) no-repeat;*/
    background: rgba(var(--color3), 1);
    transform: rotate(-55.5deg);
    width: 258.69px;
    height: 191.811px;
    border-radius: 100%;
    top: auto;
    left: auto;
    bottom: 8%;
    right: -7%;
    filter: brightness(1.5);
    /*animation: none;*/
  }
  .gradient-bg .g4 {
    /*background: radial-gradient(ellipse at center, rgba(var(--color4), 1) 0, rgba(var(--color4), 0) 100%) no-repeat;*/
    background: rgba(var(--color4), 1);
    filter: blur(21.42947769165039px);
    width: 162.975px;
    height: 39.404px;
    transform: rotate(-45.5deg);
    top: auto;
    left: auto;
    bottom: 26%;
    right: 10%;
    /*animation: none;*/
  }
  .gradient-bg .g5 {
    /*background: radial-gradient(ellipse at center, rgba(var(--color5), 1) 0, rgba(var(--color5), 0) 100%) no-repeat; */
    background: rgba(var(--color5), 1);
    width: 51.566px;
    height: 47.794px;
    transform: rotate(-48.869deg);
    filter: blur(12px);
    top: auto;
    left: auto;
    bottom: 29%;
    right: 22%;
    border-radius: 30%;
    /*animation: none;*/
    animation: moveInCircleSmall 20s ease-in-out infinite;
  }
  .gradient-bg .g6 {
    /*background: radial-gradient(ellipse at center, rgba(0, 64, 229, 1) 0%, rgba(0, 64, 229, 0) 100%);*/
    background: rgba(0, 64, 229, 1);
    width: 284.073px;
    height: 85.133px;
    transform: rotate(-51.471deg);
    top: auto;
    left: auto;
    bottom: -5%;
    right: -46%;
    /*animation: none;*/
    animation: splitAndMerge6 20s ease-in-out infinite;
  }
  .gradient-bg .g7 {
    /*background: radial-gradient(ellipse at center, rgba(var(--color2), 1) 0, rgba(var(--color2), 0) 100%) no-repeat;*/
    background: rgba(var(--color2), 1);
    width: 371.994px;
    height: 73.601px;
    border-radius: 0;
    transform: rotate(-54.5deg);
    /* filter: blur(100px); */
    top: auto;
    left: auto;
    bottom: 5%;
    right: -44%;
    /*animation: none;*/
    animation: ovalToCircle7 20s ease-in-out infinite;
  }
  .gradient-bg .g8 {
    /*background: radial-gradient(ellipse at center, rgba(var(--color3), 1) 0, rgba(var(--color3), 1) 20%, rgba(var(--color3), 0) 100%) no-repeat;*/
    background: rgba(var(--color3), 1);
    width: 287.994px;
    height: 73.601px;
    border-radius: 0;
    transform: rotate(-65.5deg);
    top: auto;
    left: auto;
    bottom: -8%;
    right: -33%;
    /*animation: none;*/
    animation: ovalToCircle8 20s ease-in-out infinite;
  }
  .gradient-bg .g9 {
    /*background: radial-gradient(ellipse at center, rgba(var(--color2), 1) 0, rgba(var(--color2), 0) 100%) no-repeat;*/
    background: rgba(var(--color2), 1);
    width: 115.093px;
    height: 133.788px;
    transform: rotate(-33.869deg);
    top: auto;
    left: auto;
    bottom: 6%;
    right: -6%;
    filter: brightness(1.5);
    /*animation: none;*/
  }
  .gradient-bg .g10 {
    /*background: radial-gradient(ellipse at center, rgba(48, 241, 249, 1) 0, rgba(48, 241, 249, 0) 100%) no-repeat;*/
    background: rgba(var(--color2), 1);
    width: 126.833px;
    height: 84.554px;
    transform: rotate(-40.869deg);
    top: auto;
    left: auto;
    bottom: 1%;
    right: -12%;
    filter: brightness(1.5);
    /*animation: none;*/
  }

  @keyframes splitAndMerge {
    0% {
      transform: translate(0, 0) rotate(-58.5deg);
    }
    75% {
      transform: translate(-10%, -10%) rotate(-58.5deg);
    }
    100% {
      transform: translate(0, 0) rotate(-58.5deg);
    }
  }
  @keyframes splitAndMerge6 {
    0% {
      transform: translate(0, 0) rotate(-51.471deg);
    }
    25% {
      transform: translate(-10%, -10%) rotate(-51.471deg);
    }
    50% {
      transform: translate(10%, 10%) rotate(-51.471deg);
      opacity: 0.5;
    }
    75% {
      transform: translate(-10%, -10%) rotate(-51.471deg);
    }
    100% {
      transform: translate(0, 0) rotate(-51.471deg);
      opacity: 1;
    }
  }
  @keyframes ovalToCircle2 {
    0% {
      transform: scale(1.0, 1.0) rotate(-61.5deg) translateX(0%) translateY(0%);
    }
    25% {
      transform: scale(0.8, 0.8) rotate(-51.5deg) translateX(-20%) translateY(-10%);
    }
    50% {
      transform: scale(1.0, 1.0) rotate(-61.5deg) translateX(0%) translateY(0%);
    }
    75% {
      transform: scale(0.8, 0.8) rotate(-71.5deg) translateX(20%) translateY(10%);
    }
    100% {
      transform: scale(1.0, 1.0) rotate(-61.5deg) translateX(0%) translateY(0%);
    }
  }
  @keyframes ovalToCircle7 {
    0% {
      transform: scale(1.0, 1.0) rotate(-54.5deg) translateX(0%) translateY(0%);
    }
    50% {
      transform: scale(1.2, 1.2) rotate(-64.5deg) translateX(20%) translateY(10%);
    }
    100% {
      transform: scale(1.0, 1.0) rotate(-54.5deg) translateX(0%) translateY(0%);
    }
  }
  @keyframes ovalToCircle8 {
    0% {
      transform: scale(1.0, 1.0) rotate(-65.5deg) translateX(0%) translateY(0%);
    }
    25% {
      transform: scale(0.8, 0.8) rotate(-55.5deg) translateX(-20%) translateY(-10%);
    }
    50% {
      transform: scale(1.0, 1.0) rotate(-65.5deg) translateX(0%) translateY(0%);
    }
    75% {
      transform: scale(0.8, 0.8) rotate(-75.5deg) translateX(20%) translateY(10%);
    }
    100% {
      transform: scale(1.0, 1.0) rotate(-65.5deg) translateX(0%) translateY(0%);
    }
  }
  @keyframes moveInCircle3 {
    0% {
      transform: scale(1.0, 1.0) rotate(-55.5deg) translateX(0%) translateY(0%);
    }
    50% {
      transform: scale(0.7, 0.7) rotate(-55.5deg) translateX(20%) translateY(20%);
    }
    50% {
      transform: scale(1.0, 1.0) rotate(-55.5deg) translateX(0%) translateY(0%);
    }
    50% {
      transform: scale(0.7, 0.7) rotate(-55.5deg) translateX(-20%) translateY(-20%);
    }
    100% {
      transform: scale(1.0, 1.0) rotate(-55.5deg) translateX(0%) translateY(0%);
    }
  }
  @keyframes moveInCircleSmall {
    0% {
      transform: scale(1.0, 1.0) rotate(0deg) translateX(0%) translateY(0%);
    }
    50% {
      transform: scale(0.8, 0.8) rotate(-180deg) translateX(10%) translateY(10%);
    }
    100% {
      transform: scale(1.0, 1.0) rotate(-360deg) translateX(0%) translateY(0%);
    }
  }
  @keyframes moveInCircleLarge {
    0% {
      transform: rotate(0deg) translateX(0%) translateY(0%);
    }
    50% {
      transform: rotate(-180deg) translateX(30%) translateY(30%);
    }
    100% {
      transform: rotate(360deg) translateX(0%) translateY(0%);
    }
  }
}/*# sourceMappingURL=home.css.map */