#root {
  margin: 0 auto;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

.typed-cursor {
  font-size: 4.5rem;
  color: var(--color-text);
}

[data-radix-scroll-area-viewport] > div {
  display: block !important;
  height: 100%;
}

.timeline-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.text-font {
  font-family: var(--text-font-family);
}
.bullet-point.is-visible {
  opacity: 0.8;
  transform: translateX(0);
}

.test_svg__colorPath {
  fill: yellow;
  fill: var(--accent) !important;
}

.icon-svg {
  width: 100%;
}

label {
  text-align: left;
}

::selection {
  background-color: black;
  color: white;
}

* {
  scroll-behavior: smooth;
}

.card {
  transform-style: preserve-3d;
  transition: transform 0.7s;
}

.card:hover {
  transform: rotateY(180deg);
}

[data-radix-scroll-area-viewport] > div {
  display: block !important;
  min-width: 100% !important;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% - 20px));
  }
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: '';
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(90deg, var(--background) 0%, transparent 100%);
}

.logos:after {
  right: 0;
  background: linear-gradient(270deg, var(--background) 0%, transparent 100%);
}

.logos {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 20px 0;
  background: linear-gradient(270deg, var(--background) 0%, transparent 2%, transparent 98%, var(--background) 100%);
}

.logos-track {
  position: relative;
  width: fit-content;
}

.logos-slide {
  display: flex;
  gap: 20px;
  width: fit-content;
}

.logos-slide.secondary {
  position: absolute;
  top: 0;
  left: calc(100% + 20px);
}

.logos-slide > div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.logos-slide svg,
.logos-slide img {
  height: 72px;
  width: 72px;
  margin: 0 30px;
}

.card-back {
  transform: rotateY(180deg);
}

form p[id$='-form-item-message'] {
  text-align: left;
}

.vertical-timeline {
  width: 100% !important;
  margin: 0 !important;
  min-width: 100% !important;
}

.vertical-timeline-element-date {
  color: var(--color-text);
  font-weight: 600 !important;
}

.vertical-timeline-element-date:nth-of-type(odd) {
  text-align: left;
}

.vertical-timeline-element-content-arrow {
  border-right: 7px solid var(--color-text) !important;
}

.vertical-timeline-element--work {
  color: var(--color-background);
}

.vertical-timeline-element-icon {
  box-shadow: 0 0 0 4px var(--color-background) !important;
}

.vertical-timeline:before {
  background-color: var(--color-text) !important;
}

.chrome-picker svg {
  fill: white !important;
  margin-left: 10px !important;
  background: transparent !important;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.roll:hover .btn .hidden {
  display: block;
}

.roll:hover {
  cursor: pointer;
}

.roll:hover .arrow-right {
  right: 1.25rem;
}

.roll:hover .arrow-left {
  left: 1.35rem;
}

.roll:hover .btn {
  padding: 0.5em;
  background-color: var(--accent);
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #000000;
  z-index: 0;
  overflow: hidden;
}

.background span {
  width: 1vmin;
  height: 1vmin;
  border-radius: 1vmin;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-duration: 45;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.background span:nth-child(0) {
  color: #6363e3;
  top: 78%;
  left: 18%;
  animation-duration: 55s;
  animation-delay: -9s;
  transform-origin: -13vw 4vh;
  box-shadow: 2vmin 0 0.8131970459160824vmin currentColor;
}
.background span:nth-child(1) {
  color: #6363e3;
  top: 54%;
  left: 60%;
  animation-duration: 24s;
  animation-delay: -20s;
  transform-origin: 14vw -19vh;
  box-shadow: 2vmin 0 1.2315330674480638vmin currentColor;
}
.background span:nth-child(2) {
  color: #374072;
  top: 15%;
  left: 54%;
  animation-duration: 17s;
  animation-delay: -6s;
  transform-origin: -6vw 16vh;
  box-shadow: 2vmin 0 0.7272367365839976vmin currentColor;
}
.background span:nth-child(3) {
  color: #374072;
  top: 23%;
  left: 23%;
  animation-duration: 10s;
  animation-delay: -18s;
  transform-origin: 22vw -13vh;
  box-shadow: 2vmin 0 0.9087691883794027vmin currentColor;
}
.background span:nth-child(4) {
  color: #374072;
  top: 32%;
  left: 86%;
  animation-duration: 38s;
  animation-delay: -5s;
  transform-origin: -20vw -8vh;
  box-shadow: -2vmin 0 0.57169844189776vmin currentColor;
}
.background span:nth-child(5) {
  color: #6363e3;
  top: 36%;
  left: 64%;
  animation-duration: 39s;
  animation-delay: -15s;
  transform-origin: 11vw 21vh;
  box-shadow: 2vmin 0 0.33550886043280426vmin currentColor;
}
.background span:nth-child(6) {
  color: #1835db;
  top: 97%;
  left: 50%;
  animation-duration: 43s;
  animation-delay: -15s;
  transform-origin: -15vw -6vh;
  box-shadow: -2vmin 0 0.33763402329432823vmin currentColor;
}
.background span:nth-child(7) {
  color: #6363e3;
  top: 69%;
  left: 56%;
  animation-duration: 11s;
  animation-delay: -13s;
  transform-origin: 8vw -10vh;
  box-shadow: -2vmin 0 0.9813477175864149vmin currentColor;
}
.background span:nth-child(8) {
  color: #1835db;
  top: 14%;
  left: 42%;
  animation-duration: 10s;
  animation-delay: -13s;
  transform-origin: 16vw 0vh;
  box-shadow: 2vmin 0 1.2241182670221358vmin currentColor;
}
.background span:nth-child(9) {
  color: #1835db;
  top: 23%;
  left: 71%;
  animation-duration: 22s;
  animation-delay: -31s;
  transform-origin: -15vw -19vh;
  box-shadow: -2vmin 0 0.8491010327844526vmin currentColor;
}
.background span:nth-child(10) {
  color: #1835db;
  top: 62%;
  left: 44%;
  animation-duration: 14s;
  animation-delay: -23s;
  transform-origin: -24vw 5vh;
  box-shadow: -2vmin 0 0.36233145429577385vmin currentColor;
}
.background span:nth-child(11) {
  color: #6363e3;
  top: 2%;
  left: 1%;
  animation-duration: 43s;
  animation-delay: -13s;
  transform-origin: -13vw -11vh;
  box-shadow: -2vmin 0 0.490083843892672vmin currentColor;
}
.background span:nth-child(12) {
  color: #1835db;
  top: 53%;
  left: 35%;
  animation-duration: 12s;
  animation-delay: -1s;
  transform-origin: 5vw 4vh;
  box-shadow: -2vmin 0 0.882141709302267vmin currentColor;
}
.background span:nth-child(13) {
  color: #374072;
  top: 37%;
  left: 16%;
  animation-duration: 30s;
  animation-delay: -2s;
  transform-origin: 3vw 16vh;
  box-shadow: -2vmin 0 0.256808084702586vmin currentColor;
}
.background span:nth-child(14) {
  color: #1835db;
  top: 57%;
  left: 79%;
  animation-duration: 51s;
  animation-delay: -39s;
  transform-origin: -23vw 19vh;
  box-shadow: -2vmin 0 1.204287061392618vmin currentColor;
}
.background span:nth-child(15) {
  color: #374072;
  top: 38%;
  left: 72%;
  animation-duration: 14s;
  animation-delay: -7s;
  transform-origin: 9vw 22vh;
  box-shadow: 2vmin 0 0.6178575868904712vmin currentColor;
}
.background span:nth-child(16) {
  color: #374072;
  top: 67%;
  left: 30%;
  animation-duration: 53s;
  animation-delay: -29s;
  transform-origin: 13vw -8vh;
  box-shadow: 2vmin 0 1.1079702745463862vmin currentColor;
}
.background span:nth-child(17) {
  color: #374072;
  top: 49%;
  left: 71%;
  animation-duration: 15s;
  animation-delay: -14s;
  transform-origin: -14vw -10vh;
  box-shadow: -2vmin 0 0.3369176878336455vmin currentColor;
}
.background span:nth-child(18) {
  color: #6363e3;
  top: 2%;
  left: 17%;
  animation-duration: 55s;
  animation-delay: -27s;
  transform-origin: -17vw -3vh;
  box-shadow: 2vmin 0 0.47512631990084vmin currentColor;
}
.background span:nth-child(19) {
  color: #6363e3;
  top: 91%;
  left: 46%;
  animation-duration: 45s;
  animation-delay: -48s;
  transform-origin: 11vw -9vh;
  box-shadow: -2vmin 0 1.1552984828055146vmin currentColor;
}
.background span:nth-child(20) {
  color: #6363e3;
  top: 50%;
  left: 94%;
  animation-duration: 47s;
  animation-delay: -14s;
  transform-origin: -10vw -24vh;
  box-shadow: 2vmin 0 1.1403634141208503vmin currentColor;
}
.background span:nth-child(21) {
  color: #374072;
  top: 78%;
  left: 61%;
  animation-duration: 24s;
  animation-delay: -12s;
  transform-origin: 15vw -7vh;
  box-shadow: -2vmin 0 0.9872853952722898vmin currentColor;
}
.background span:nth-child(22) {
  color: #1835db;
  top: 4%;
  left: 36%;
  animation-duration: 25s;
  animation-delay: -43s;
  transform-origin: 14vw 15vh;
  box-shadow: -2vmin 0 0.7156080597177044vmin currentColor;
}
.background span:nth-child(23) {
  color: #1835db;
  top: 7%;
  left: 77%;
  animation-duration: 44s;
  animation-delay: -47s;
  transform-origin: 19vw -1vh;
  box-shadow: 2vmin 0 0.7022504606810263vmin currentColor;
}
.background span:nth-child(24) {
  color: #6363e3;
  top: 19%;
  left: 59%;
  animation-duration: 14s;
  animation-delay: -11s;
  transform-origin: -1vw 8vh;
  box-shadow: 2vmin 0 0.38088785879841813vmin currentColor;
}
.background span:nth-child(25) {
  color: #1835db;
  top: 31%;
  left: 51%;
  animation-duration: 43s;
  animation-delay: -20s;
  transform-origin: 12vw 7vh;
  box-shadow: -2vmin 0 0.5154697153292531vmin currentColor;
}
.background span:nth-child(26) {
  color: #1835db;
  top: 94%;
  left: 83%;
  animation-duration: 53s;
  animation-delay: -15s;
  transform-origin: 3vw 8vh;
  box-shadow: 2vmin 0 1.0581378840312223vmin currentColor;
}
.background span:nth-child(27) {
  color: #6363e3;
  top: 20%;
  left: 73%;
  animation-duration: 53s;
  animation-delay: -50s;
  transform-origin: -2vw -20vh;
  box-shadow: 2vmin 0 0.2714331599975137vmin currentColor;
}
.background span:nth-child(28) {
  color: #374072;
  top: 57%;
  left: 99%;
  animation-duration: 7s;
  animation-delay: -36s;
  transform-origin: 11vw -13vh;
  box-shadow: -2vmin 0 0.28718775716741285vmin currentColor;
}
.background span:nth-child(29) {
  color: #374072;
  top: 7%;
  left: 48%;
  animation-duration: 36s;
  animation-delay: -9s;
  transform-origin: 5vw 10vh;
  box-shadow: 2vmin 0 1.062677021674361vmin currentColor;
}
.background span:nth-child(30) {
  color: #374072;
  top: 89%;
  left: 92%;
  animation-duration: 27s;
  animation-delay: -48s;
  transform-origin: -16vw 23vh;
  box-shadow: 2vmin 0 1.1843856822634962vmin currentColor;
}
.background span:nth-child(31) {
  color: #374072;
  top: 78%;
  left: 41%;
  animation-duration: 29s;
  animation-delay: -34s;
  transform-origin: -7vw -1vh;
  box-shadow: -2vmin 0 1.2314361162541279vmin currentColor;
}
.background span:nth-child(32) {
  color: #374072;
  top: 6%;
  left: 76%;
  animation-duration: 39s;
  animation-delay: -46s;
  transform-origin: -2vw -5vh;
  box-shadow: 2vmin 0 0.5283431193574595vmin currentColor;
}
.background span:nth-child(33) {
  color: #374072;
  top: 19%;
  left: 80%;
  animation-duration: 53s;
  animation-delay: -50s;
  transform-origin: 16vw -10vh;
  box-shadow: 2vmin 0 0.5421526192947239vmin currentColor;
}
.background span:nth-child(34) {
  color: #1835db;
  top: 22%;
  left: 10%;
  animation-duration: 39s;
  animation-delay: -6s;
  transform-origin: -11vw 3vh;
  box-shadow: 2vmin 0 0.26148149745916194vmin currentColor;
}
.background span:nth-child(35) {
  color: #374072;
  top: 92%;
  left: 17%;
  animation-duration: 52s;
  animation-delay: -33s;
  transform-origin: -10vw -1vh;
  box-shadow: 2vmin 0 0.851047594813297vmin currentColor;
}
.background span:nth-child(36) {
  color: #1835db;
  top: 52%;
  left: 8%;
  animation-duration: 52s;
  animation-delay: -26s;
  transform-origin: -16vw 17vh;
  box-shadow: 2vmin 0 0.8298992417925533vmin currentColor;
}
.background span:nth-child(37) {
  color: #374072;
  top: 84%;
  left: 89%;
  animation-duration: 55s;
  animation-delay: -12s;
  transform-origin: -14vw 10vh;
  box-shadow: -2vmin 0 0.9723867333379985vmin currentColor;
}
.background span:nth-child(38) {
  color: #6363e3;
  top: 65%;
  left: 90%;
  animation-duration: 40s;
  animation-delay: -11s;
  transform-origin: -19vw 13vh;
  box-shadow: -2vmin 0 1.117355643261673vmin currentColor;
}
.background span:nth-child(39) {
  color: #1835db;
  top: 42%;
  left: 15%;
  animation-duration: 17s;
  animation-delay: -5s;
  transform-origin: 4vw 25vh;
  box-shadow: -2vmin 0 0.860051744851255vmin currentColor;
}
.background span:nth-child(40) {
  color: #374072;
  top: 43%;
  left: 21%;
  animation-duration: 47s;
  animation-delay: -32s;
  transform-origin: -1vw -7vh;
  box-shadow: -2vmin 0 0.543203759926653vmin currentColor;
}
.background span:nth-child(41) {
  color: #6363e3;
  top: 67%;
  left: 80%;
  animation-duration: 20s;
  animation-delay: -28s;
  transform-origin: 1vw 21vh;
  box-shadow: 2vmin 0 1.1963604214238641vmin currentColor;
}
.background span:nth-child(42) {
  color: #374072;
  top: 25%;
  left: 45%;
  animation-duration: 47s;
  animation-delay: -11s;
  transform-origin: 0vw 5vh;
  box-shadow: -2vmin 0 0.9901677759303129vmin currentColor;
}
.background span:nth-child(43) {
  color: #1835db;
  top: 15%;
  left: 53%;
  animation-duration: 46s;
  animation-delay: -49s;
  transform-origin: 2vw 14vh;
  box-shadow: 2vmin 0 1.115200110750241vmin currentColor;
}
.background span:nth-child(44) {
  color: #374072;
  top: 16%;
  left: 4%;
  animation-duration: 45s;
  animation-delay: -48s;
  transform-origin: 17vw -18vh;
  box-shadow: -2vmin 0 0.778735553658289vmin currentColor;
}
.background span:nth-child(45) {
  color: #1835db;
  top: 88%;
  left: 43%;
  animation-duration: 25s;
  animation-delay: -19s;
  transform-origin: -22vw -21vh;
  box-shadow: -2vmin 0 0.2975727363675873vmin currentColor;
}
.background span:nth-child(46) {
  color: #6363e3;
  top: 61%;
  left: 16%;
  animation-duration: 9s;
  animation-delay: -4s;
  transform-origin: -15vw -11vh;
  box-shadow: 2vmin 0 1.2329253600164276vmin currentColor;
}
.background span:nth-child(47) {
  color: #6363e3;
  top: 51%;
  left: 34%;
  animation-duration: 17s;
  animation-delay: -49s;
  transform-origin: 10vw 24vh;
  box-shadow: 2vmin 0 0.9482829539181219vmin currentColor;
}
.background span:nth-child(48) {
  color: #6363e3;
  top: 21%;
  left: 2%;
  animation-duration: 33s;
  animation-delay: -42s;
  transform-origin: 20vw 12vh;
  box-shadow: -2vmin 0 0.7076939554054038vmin currentColor;
}
.background span:nth-child(49) {
  color: #6363e3;
  top: 7%;
  left: 94%;
  animation-duration: 23s;
  animation-delay: -30s;
  transform-origin: -3vw -10vh;
  box-shadow: -2vmin 0 0.2702661989738262vmin currentColor;
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

@media (max-width: 639px) {
  .logos::before,
  .logos::after {
    width: 70px;
  }

  .logos-slide svg,
  .logos-slide img {
    height: 48px;
    width: 48px;
  }
}


@media (max-width: 1023px) {
  .heading {
    font-size: 32px;
  }
}


:root {
  --heading-font-family: 'Inter';
  --heading-font-size-base: 32px;
  --heading-variant: 'gradient-line';
  --text-font-family: 'Inter';
  --text-font-size-base: 16px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Animation utility classes */
.animate-fadeIn {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-fadeInUp {
  animation: fadeInUp 0.5s ease-out forwards;
}

.animate-fadeInDown {
  animation: fadeInDown 0.5s ease-out forwards;
}

.animate-fadeInLeft {
  animation: fadeInLeft 0.5s ease-out forwards;
}

.animate-fadeInRight {
  animation: fadeInRight 0.5s ease-out forwards;
}

/* Animation delays */
.delay-0 {
  animation-delay: 0s;
}
.delay-100 {
  animation-delay: 0.1s;
}
.delay-200 {
  animation-delay: 0.2s;
}
.delay-300 {
  animation-delay: 0.3s;
}
.delay-400 {
  animation-delay: 0.4s;
}
.delay-500 {
  animation-delay: 0.5s;
}
.delay-600 {
  animation-delay: 0.6s;
}
.delay-700 {
  animation-delay: 0.7s;
}
.delay-800 {
  animation-delay: 0.8s;
}
.delay-900 {
  animation-delay: 0.9s;
}
.delay-1000 {
  animation-delay: 1s;
}

/* Timeline-specific animation classes */
.timeline-item:nth-child(1) {
  animation-delay: 0s;
}
.timeline-item:nth-child(2) {
  animation-delay: 0.1s;
}
.timeline-item:nth-child(3) {
  animation-delay: 0.2s;
}
.timeline-item:nth-child(4) {
  animation-delay: 0.3s;
}
.timeline-item:nth-child(5) {
  animation-delay: 0.4s;
}
.timeline-item:nth-child(6) {
  animation-delay: 0.5s;
}
.timeline-item:nth-child(7) {
  animation-delay: 0.6s;
}
.timeline-item:nth-child(8) {
  animation-delay: 0.7s;
}

.bullet-point:nth-child(1) {
  animation-delay: 0.2s;
}
.bullet-point:nth-child(2) {
  animation-delay: 0.3s;
}
.bullet-point:nth-child(3) {
  animation-delay: 0.4s;
}
.bullet-point:nth-child(4) {
  animation-delay: 0.5s;
}
.bullet-point:nth-child(5) {
  animation-delay: 0.6s;
}
.bullet-point:nth-child(6) {
  animation-delay: 0.7s;
}
.bullet-point:nth-child(7) {
  animation-delay: 0.8s;
}
.bullet-point:nth-child(8) {
  animation-delay: 0.9s;
}
