main .hero-banner,
main .text-banner {
  background: var(--Dark-Navy-Blue, #090524);
  z-index: 3;
  position: relative;
}
main .text-banner{
    /* min-height: calc(100vh - 80px);
    padding-top: 80px;
    align-items: center; */
}

main .hero-banner::before,
main .text-banner::before {
  content: "";
  position: absolute;
  border-radius: 700px;
  background: linear-gradient(0deg, #4deaff 0%, #002bff 100%);
  filter: blur(250px);
  z-index: 3;
  height: 700px;
  width: 700px;
  left: -200px;
  bottom: -200px;
}
main .text-banner::before {
  right: -200px;
  left: auto;
}
main .hero-banner.banner-fixed,
main .hero-banner.banner-fixed .wrapper {
  align-items: flex-start;
  text-align: left;
}
main .hero-banner.banner-fixed .wrapper h1 {
  align-items: center;
  text-align: center;
  align-self: center;
}

main .hero-banner.banner-fixed::before,
main .hero-banner.banner-fixed.white::before {
  position: fixed !important;
}

#manifesto main .hero-banner-solution.title-center {
  z-index: 4;
}

.hero-banner.banner-fixed.wrp-s .wrapper {
  max-width: 898px;
  margin: 0 auto;
  padding: 25px 20px;
  gap: 0px;
}

.hero-banner.banner-fixed.wrp-s .wrapper p:last-child {
  margin-bottom: 0px;
}

.hero-banner.banner-fixed.wrp-s .wrapper h2 {
  width: 100%;
  margin: 0px;
  padding-bottom: 40px;
}
@media screen and (max-width: 1024px) {
  main .hero-banner.banner-fixed::before {
    position: fixed;
    opacity: var(--blur-opacity, 1); /* default 1 */
    transition: opacity 0.3s ease-out;
  }
}
main .hero-banner .wrapper,
main .hero-banner-solution.title-center .wrapper {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 901px;
  padding: 11.375rem 16.875rem 11.375rem 16.875rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}
main .hero-banner .wrapper .m-mask {
  background: url("../../img/M-logo.svg");
  -webkit-mask-image: url(../../img/M-logo.svg);
  mask-image: url(../../img/M-logo.svg);
  mask-size: 668.237px 393.489px;
  mask-repeat: no-repeat;
  width: 668.237px;
  height: 393.489px;
  position: absolute;
  z-index: 2;
}

main .hero-banner .wrapper .m-mask video {
  max-height: 100vh;
}

main .hero-banner .wrapper h1 {
  color: #fff;
  z-index: 3;
}
main .hero-banner .wrapper p,
main .hero-banner .wrapper p a,
main .hero-banner .wrapper a {
  color: var(--Powder-Blue, #aabadc);
}

@media screen and (max-width: 1024px) {
  main .hero-banner .wrapper {
    padding: 0 1.25rem 0 1.25rem;
    margin: auto;
  }

  main .hero-banner .wrapper .m-mask {
    top: 20%;
    mask-size: 336px 198px;
    width: 336px;
    height: 198px;
  }
}

main .hero-banner-solution {
  background: var(--Dark-Navy-Blue, #090524);
  z-index: 3;
  align-items: stretch;
}

main .hero-banner.banner-fixed .wrapper {
  max-width: 1130px;
  margin: 0 auto;
  padding: 50px 20px;
}
main .hero-banner.banner-fixed .wrapper p {
  font-size: 16px;
  text-align: left;
}
main .hero-banner.banner-fixed .wrapper h4 {
  text-align: left;
}

main .hero-banner-solution .wrapper .title-block {
  max-width: 80%;
  z-index: 3;
}
main .hero-banner-solution::before {
  content: "";
  position: absolute;
  border-radius: 700px;
  background: linear-gradient(0deg, #4deaff 0%, #002bff 100%);
  filter: blur(250px);
  z-index: 3;
  width: 700px;
  height: 700px;
  left: -200px;
  bottom: 0px;
}

main .hero-banner-solution .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  padding: 80px 0 0 0;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

main .hero-banner-solution .wrapper h1,
main .hero-banner-solution .wrapper h2 {
  color: #fff;
  padding-left: 40px;
  z-index: 3;
  text-align: left;
}
main .hero-banner-solution .wrapper h1 span,
main .hero-banner-solution .wrapper h2 span {
  background: linear-gradient(90deg, #006fff 0%, #aabadc 87.74%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
main .hero-banner-solution .wrapper .bottom-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
main .hero-banner-solution .wrapper .bottom-block hr {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(170, 186, 220, 0.4);
  margin: 0;
}
main .hero-banner-solution .wrapper .bottom-block .text-and-button {
  margin: 0;
  padding: 64px 40px;
  border-left: 1px solid rgba(170, 186, 220, 0.4);
}
main .hero-banner-solution .wrapper .bottom-block p {
  color: var(--Powder-Blue, #aabadc);
}


/* title-center */
main .hero-banner-solution.title-center .wrapper {
  padding: 0px;
} 

main .hero-banner-solution.title-center .wrapper h1,
main .hero-banner-solution.title-center .wrapper h2 {
  text-align: center;
  padding: 0px;
}

/* hero banner fixed white with text */

main .hero-banner.banner-fixed.white {
  flex-direction: column;
}

main .hero-banner.banner-fixed.white h2 {
  color: var(--Dark-Navy-Blue, #090524);
}  
main .hero-banner.banner-fixed.white p {
  color: var(--Dark-Navy-Blue, #090524);
  margin: 12px 0px;
  text-align: justify;
  font-size: 18px;
}

main .hero-banner.banner-fixed.white a {
  color: var(--Dark-Navy-Blue, #090524);
}

main .hero-banner.banner-fixed.white p:first-of-type {
  margin-top: 0px;
}


@media screen and (max-width: 1024px) {
  main .hero-banner .wrapper .m-mask {
    top: unset;
  }
  main .hero-banner .wrapper h1 {
    margin: auto;
  }
  main .hero-banner-solution.support-banner {
    padding-top: 0;
  }

  main .hero-banner-solution .wrapper {
    padding: 0;
  }

  main .hero-banner-solution .wrapper .m-mask {
    top: 20%;
    mask-size: 336px 198px;
    width: 336px;
    height: 198px;
  }
  main .hero-banner.banner-fixed .wrapper {
    max-width: 100%;
    padding: 50px 20px;
  }

  main .hero-banner-solution .wrapper .bottom-block {
    align-items: flex-start;
  }

  main .hero-banner-solution .wrapper .bottom-block .text-and-button {
    padding: 40px 20px 40px 40px;
    border-left: none;
  }

  main .hero-banner-solution .wrapper .bottom-block p.upper-text {
    max-width: 100%;
  }
  main .hero-banner-solution.support-banner::before {
    right: -200px;
    left: auto;
  }
  main .hero-banner-solution .wrapper .bottom-block p {
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 40px;
  }

  /*title center*/
  main .hero-banner-solution.title-center .wrapper {
    padding: 0px 40px;
  }

}
/**/