@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  outline: 0 transparent;
  -webkit-overflow-scrolling: touch;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent; }
  *::-webkit-scrollbar {
    width: 14px; }
    *::-webkit-scrollbar-track {
      background: transparent;
      padding: 2px;
      background: #000; }
    *::-webkit-scrollbar-button {
      display: none; }
    *::-webkit-scrollbar-thumb {
      background: #474747;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      border: 4px solid #0b0121; }
      *::-webkit-scrollbar-thumb:hover {
        background: #555; }
  *::before, *::after {
    box-sizing: border-box; }

body,
input,
textarea,
select,
button {
  font-family: "Montserrat", sans-serif; }

body {
  background: #000;
  color: #ececec; }

header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1330px;
  backdrop-filter: blur(10px);
  z-index: 3;
  padding: 0 20px; }
  header .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 25px;
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.3); }
    header .content .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: auto; }
      header .content .logo img {
        width: 100%;
        height: auto;
        object-fit: cover; }
    header .content ul {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px; }

main {
  display: flex;
  flex-direction: column;
  align-items: center; }
  main section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 1200px;
    width: 100%;
    padding: 20px; }
    main section.banner {
      width: 100%;
      max-width: 100%;
      height: 100vh;
      gap: 20px;
      position: relative; }
      main section.banner .banner-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        gap: 20px;
        z-index: 23;
        -webkit-user-drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none; }
        main section.banner .banner-text h1 {
          font-size: 80px;
          font-weight: 600;
          text-align: center; }
          main section.banner .banner-text h1 .breathing-effect {
            display: flex;
            align-items: center;
            justify-content: center; }
            main section.banner .banner-text h1 .breathing-effect #t1,
            main section.banner .banner-text h1 .breathing-effect #t2,
            main section.banner .banner-text h1 .breathing-effect #t3,
            main section.banner .banner-text h1 .breathing-effect #t4,
            main section.banner .banner-text h1 .breathing-effect #t5,
            main section.banner .banner-text h1 .breathing-effect #t6,
            main section.banner .banner-text h1 .breathing-effect #t7,
            main section.banner .banner-text h1 .breathing-effect #t8,
            main section.banner .banner-text h1 .breathing-effect #t9,
            main section.banner .banner-text h1 .breathing-effect #t10,
            main section.banner .banner-text h1 .breathing-effect #t11,
            main section.banner .banner-text h1 .breathing-effect #t12,
            main section.banner .banner-text h1 .breathing-effect #t13 {
              animation: ta 2450ms infinite ease-in-out; }
            main section.banner .banner-text h1 .breathing-effect #t1 {
              animation-delay: 0ms; }
            main section.banner .banner-text h1 .breathing-effect #t2 {
              animation-delay: 100ms; }
            main section.banner .banner-text h1 .breathing-effect #t3 {
              animation-delay: 200ms; }
            main section.banner .banner-text h1 .breathing-effect #t4 {
              animation-delay: 300ms; }
            main section.banner .banner-text h1 .breathing-effect #t5 {
              animation-delay: 400ms; }
            main section.banner .banner-text h1 .breathing-effect #t6 {
              animation-delay: 500ms; }
            main section.banner .banner-text h1 .breathing-effect #t7 {
              animation-delay: 600ms; }
            main section.banner .banner-text h1 .breathing-effect #t8 {
              animation-delay: 700ms; }
            main section.banner .banner-text h1 .breathing-effect #t9 {
              animation-delay: 800ms; }
            main section.banner .banner-text h1 .breathing-effect #t10 {
              animation-delay: 900ms; }
            main section.banner .banner-text h1 .breathing-effect #t11 {
              animation-delay: 1000ms; }
            main section.banner .banner-text h1 .breathing-effect #t12 {
              animation-delay: 1100ms; }
            main section.banner .banner-text h1 .breathing-effect #t13 {
              animation-delay: 1200ms; }

@keyframes ta {
  from {
    font-weight: 100; }
  50% {
    font-weight: 800; }
  to {
    font-weight: 100; } }
        main section.banner .banner-text p {
          font-size: 18px;
          font-weight: 400;
          -webkit-user-drag: none;
          user-select: none;
          -moz-user-select: none;
          -webkit-user-select: none;
          -ms-user-select: none;
          width: 35%;
          text-align: center; }
      main section.banner .bg-banner {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        height: 100%; }
        main section.banner .bg-banner img {
          width: 1920px;
          max-width: 1920px;
          height: auto;
          object-fit: cover;
          overflow: hidden; }
    main section.showroom {
      height: 100vh;
      font-size: 36px;
      font-weight: 700; }
      main section.showroom p {
        font-size: 42px;
        color: #161616; }
    main section.features {
      justify-content: flex-end; }
      main section.features > h2 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
        height: auto;
        font-size: 48px;
        gap: 30px;
        -webkit-user-drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none; }
      main section.features .cards {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
        gap: 20px;
        padding-top: 100px; }
        main section.features .cards .horizontal {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 43%;
          gap: 20px; }
          main section.features .cards .horizontal .card {
            flex-direction: column-reverse;
            height: 100% !important; }
            main section.features .cards .horizontal .card:nth-child(1) {
              width: 35%; }
              main section.features .cards .horizontal .card:nth-child(1) .right .media {
                max-width: 220px; }
              main section.features .cards .horizontal .card:nth-child(1) .light-right {
                background: #41e88d; }
              main section.features .cards .horizontal .card:nth-child(1) .light-left {
                background: #7214ff; }
            main section.features .cards .horizontal .card:nth-child(2) {
              width: 65%;
              flex-direction: column;
              justify-content: flex-start; }
              main section.features .cards .horizontal .card:nth-child(2) .right {
                transform: translateY(10px); }
              main section.features .cards .horizontal .card:nth-child(2)::before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 2;
                background: linear-gradient(to top, #0e1330 0, transparent 60%); }
        main section.features .cards .card {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #0e1330;
          width: 100%;
          color: #ddd;
          position: relative;
          overflow: hidden;
          box-shadow: 0px 0px 0px 1px #282d45 inset;
          border-radius: 10px;
          padding: 50px;
          gap: 30px; }
          main section.features .cards .card.full {
            height: 40%; }
          main section.features .cards .card .left,
          main section.features .cards .card .right {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: auto;
            z-index: 1; }
          main section.features .cards .card .left h2 {
            display: flex;
            flex-direction: column;
            gap: 15px;
            font-size: 28px;
            font-weight: 700; }
            main section.features .cards .card .left h2 p {
              font-size: 14px;
              font-weight: 400;
              color: #ddd; }
          main section.features .cards .card .right .media {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: auto; }
            main section.features .cards .card .right .media img {
              width: 100%;
              height: auto;
              object-fit: cover; }
          main section.features .cards .card .light-left,
          main section.features .cards .card .light-right {
            width: 750px;
            height: 750px;
            background: #32cafd;
            position: absolute;
            top: 100%;
            left: 0%;
            transform: translate(-50%, -50%);
            z-index: 0;
            border-radius: 50%;
            opacity: 0.25;
            filter: blur(100px);
            animation: slide-diagonal-2 10s infinite alternate; }
          main section.features .cards .card .light-right {
            background: #7214ff;
            top: 0;
            left: 100%;
            animation: slide-diagonal 10s infinite alternate;
            z-index: 2; }
    main section.graphs {
      max-width: 100%;
      flex-direction: row;
      overflow-x: hidden;
      gap: 1.5rem;
      margin-top: 10rem;
      position: relative; }
      main section.graphs .title {
        position: absolute;
        top: 0;
        left: 53%;
        transform: translateX(-50%);
        max-width: 1200px;
        width: 100%;
        height: auto;
        padding: 0 20px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        z-index: 2; }
        main section.graphs .title h2 {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          font-size: 5rem;
          letter-spacing: -2px; }
      main section.graphs .col {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1.5rem; }
        main section.graphs .col .chart10,
        main section.graphs .col .chart1,
        main section.graphs .col .chart7 {
          position: relative; }
          main section.graphs .col .chart10:hover:before,
          main section.graphs .col .chart1:hover:before,
          main section.graphs .col .chart7:hover:before {
            opacity: 1;
            top: 20%; }
          main section.graphs .col .chart10::before,
          main section.graphs .col .chart1::before,
          main section.graphs .col .chart7::before {
            content: "";
            position: absolute;
            width: 1px;
            height: 86px;
            left: 0;
            top: 80%;
            z-index: 1;
            opacity: 0;
            background: linear-gradient(0deg, rgba(59, 56, 65, 0) 22.4%, #a594fd 60.94%, rgba(59, 56, 65, 0));
            transition: top 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.4s linear;
            will-change: transform, opacity; }
        main section.graphs .col .chart1 {
          margin-top: 3rem; }
          main section.graphs .col .chart1 .line1,
          main section.graphs .col .chart1 .line2 {
            visibility: hidden; }
          main section.graphs .col .chart1.animate .line1,
          main section.graphs .col .chart1.animate .line2 {
            visibility: visible;
            stroke-dasharray: 120%;
            stroke-dashoffset: 120%;
            animation: draw 2s forwards; }
          main section.graphs .col .chart1.clear .line1,
          main section.graphs .col .chart1.clear .line2 {
            visibility: visible;
            stroke-dasharray: 120%;
            stroke-dashoffset: 120%;
            animation: erase 2s forwards; }

@keyframes draw {
  to {
    stroke-dashoffset: 0; } }

@keyframes erase {
  from {
    stroke-dashoffset: 0;
    opacity: 1; }
  to {
    stroke-dashoffset: -100%;
    opacity: 0; } }
        main section.graphs .col .chart2 {
          margin-top: 3rem; }
        main section.graphs .col .chart5 {
          margin-top: 20rem; }
        main section.graphs .col .chart10 {
          margin-top: 12rem; }
        main section.graphs .col .chart8,
        main section.graphs .col .chart10 {
          scale: 0.65;
          opacity: 0.3; }
        main section.graphs .col .chart1,
        main section.graphs .col .chart2,
        main section.graphs .col .chart3,
        main section.graphs .col .chart4,
        main section.graphs .col .chart5,
        main section.graphs .col .chart6,
        main section.graphs .col .chart7,
        main section.graphs .col .chart8,
        main section.graphs .col .chart9,
        main section.graphs .col .chart10 {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          max-width: 253px;
          min-width: 253px;
          height: auto; }
          main section.graphs .col .chart1 img,
          main section.graphs .col .chart2 img,
          main section.graphs .col .chart3 img,
          main section.graphs .col .chart4 img,
          main section.graphs .col .chart5 img,
          main section.graphs .col .chart6 img,
          main section.graphs .col .chart7 img,
          main section.graphs .col .chart8 img,
          main section.graphs .col .chart9 img,
          main section.graphs .col .chart10 img {
            width: 100%;
            height: auto;
            -webkit-user-drag: none;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none; }
    main section.grid {
      gap: 1.5rem; }
      main section.grid > .top,
      main section.grid > .bottom {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%; }
        main section.grid > .top .card,
        main section.grid > .bottom .card {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          border-radius: 1.25rem;
          background: #101010;
          position: relative;
          transition: all; }
          main section.grid > .top .card:hover:before,
          main section.grid > .bottom .card:hover:before {
            opacity: 1;
            top: 20%; }
          main section.grid > .top .card::before,
          main section.grid > .bottom .card::before {
            content: "";
            position: absolute;
            width: 1px;
            height: 86px;
            left: 0;
            top: 80%;
            z-index: 1;
            opacity: 0;
            background: linear-gradient(0deg, rgba(59, 56, 65, 0) 22.4%, #a594fd 60.94%, rgba(59, 56, 65, 0));
            transition: top 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.4s linear;
            will-change: transform, opacity; }
          main section.grid > .top .card .left,
          main section.grid > .top .card .right,
          main section.grid > .bottom .card .left,
          main section.grid > .bottom .card .right {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
            height: auto; }
            main section.grid > .top .card .left span,
            main section.grid > .top .card .right span,
            main section.grid > .bottom .card .left span,
            main section.grid > .bottom .card .right span {
              color: #a594fd;
              font-size: 0.75rem;
              font-weight: 600;
              letter-spacing: 0.08em;
              margin-bottom: 1rem; }
            main section.grid > .top .card .left h2,
            main section.grid > .top .card .right h2,
            main section.grid > .bottom .card .left h2,
            main section.grid > .bottom .card .right h2 {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              text-align: center;
              font-size: 2.25rem;
              font-size: 600;
              gap: 1rem; }
              main section.grid > .top .card .left h2 p,
              main section.grid > .top .card .right h2 p,
              main section.grid > .bottom .card .left h2 p,
              main section.grid > .bottom .card .right h2 p {
                font-size: 1rem;
                font-weight: 400; }
          main section.grid > .top .card .right:hover svg,
          main section.grid > .bottom .card .right:hover svg {
            transform: perspective(150em) rotateY(0);
            transition: 600ms all; }
          main section.grid > .top .card .right svg,
          main section.grid > .bottom .card .right svg {
            transform: perspective(150em) rotateY(-15deg);
            transition: 600ms all; }
            main section.grid > .top .card .right svg g.zz,
            main section.grid > .bottom .card .right svg g.zz {
              animation: elevator 5s infinite; }

@keyframes elevator {
  0% {
    transform: matrix(1, 0, 0, 1, 329.875, 900);
    opacity: 0; }
  3% {
    opacity: 1; }
  28.571% {
    transform: matrix(1, 0, 0, 1, 329.875, 536);
    opacity: 0; }
  100% {
    transform: matrix(1, 0, 0, 1, 329.875, 536);
    opacity: 0; } }
          main section.grid > .top .card .left,
          main section.grid > .bottom .card .left {
            flex-direction: column;
            padding: 50px; }
      main section.grid > .bottom {
        gap: 1.5rem; }
        main section.grid > .bottom .card {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          padding: 30px;
          transition: 700ms transform; }
          main section.grid > .bottom .card:hover {
            transform: scale(1.02);
            transition: 700ms transform; }
          main section.grid > .bottom .card .head {
            display: flex;
            align-items: center;
            justify-content: center; }
            main section.grid > .bottom .card .head img {
              width: 55%;
              height: auto;
              object-fit: cover;
              margin-top: -20px; }
              main section.grid > .bottom .card .head img:first-child {
                opacity: 0.5;
                margin: 80px -50px 0 0; }
              main section.grid > .bottom .card .head img:last-child {
                margin-left: -50px;
                z-index: 2; }
          main section.grid > .bottom .card .bottom {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            width: 60%;
            gap: 15px;
            font-size: 16px;
            padding: 30px; }
            main section.grid > .bottom .card .bottom h5 {
              font-size: 0.75rem;
              font-weight: 600;
              letter-spacing: 0.08em;
              color: #a594fd; }
            main section.grid > .bottom .card .bottom h3 {
              font-size: 2.375rem;
              font-weight: 600;
              color: #f1f1ef; }
            main section.grid > .bottom .card .bottom p {
              font-size: 1.125rem;
              font-weight: 300;
              color: #a3a3a3; }