:root {
  --color-primary: #f9ed69;
  --color-secondary: #dc953d;
  --color-tertiary: #b83b5e;
  --color-quaternary: #46174b;
  --color-quinary: #090909;
  --color-white: #fff;
  --color-black: #000;
  --radius: 1em;
  --gap-100: 0.5rem;
  --gap-200: 1rem;
  --gap-300: 2rem;
  --gap-500: 3rem;
  --letter-spacing-300: 0.1rem;
  --letter-spacing-400: 0.2rem;
  --font-weight-400: 100;
  --font-weight-500: 400;
  --font-weight-600: 500;
  --font-size-400: 1rem;
  --font-size-700: 1.5rem;
  --font-size-900: 2rem;
  --shadow-dark: 0 2rem 6rem rgba(0, 0, 0, .3);
  --shadow-light: 0 2rem 5rem rgba(0, 0, 0, .06);
  --width: 100vw;
  --height: 100vh;
  --aspect: calc($JSWidth / $JSWidth);
  --hypot: 150vmax;
  --angle: -30deg;
}

@property --why-us-li-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #000;
}
@property --overview-card-bg-wideness {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  position: relative;
  padding: 0;
  margin: 0;
  min-height: 100dvh;
  font-size: 100%;
  font-family: "Segoe UI", sans-serif;
  font-weight: var(--font-weight-400);
  color: var(--color-white);
}

.background {
  position: absolute;
  background-color: var(--color-black);
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}
.background .beam {
  position: absolute;
  top: 100vh;
  width: calc(var(--hypot) * 1.1);
  aspect-ratio: 10/1;
  max-height: 30vh;
  background: linear-gradient(-1deg, transparent 85%, var(--color-black) 90%), linear-gradient(1deg, var(--color-black) 10%, transparent 15%), linear-gradient(var(--color-black) 2%, var(--color-secondary) 2%, var(--color-secondary) 98%, var(--color-black) 98%);
  background-repeat: no-repeat;
  background-size: 700% 100%, 700% 100%, 100% 100%;
  transform-origin: bottom left;
  rotate: 0 0 1 var(--angle);
  animation: moveBeam 0.75s infinite;
}
.background .beam-particles {
  position: absolute;
  width: 100%;
  height: 100vh;
}
.background .beam-particles .beam-particle {
  position: absolute;
  width: clamp(0.1vmin, 0.5vmax, 2vmin);
  aspect-ratio: 1/1;
  background: radial-gradient(var(--color-secondary), var(--color-black) 75%);
  border-radius: 50%;
  animation: moveBeam 0.75s infinite;
}
.background .beam-particles .beam-particle:nth-child(1) {
  top: 95%;
  left: 5%;
}
.background .beam-particles .beam-particle:nth-child(4) {
  top: 68%;
  left: 35%;
}
.background .beam-particles .beam-particle:nth-child(5) {
  top: 60%;
  left: 45%;
}
.background .beam-particles .beam-particle:nth-child(6) {
  top: 49%;
  left: 55%;
}
.background .beam-particles .beam-particle:nth-child(8) {
  top: 31%;
  left: 75%;
}
.background .beam-particles .beam-particle:nth-child(2) {
  top: 103%;
  left: 19%;
}
.background .beam-particles .beam-particle:nth-child(3) {
  top: 96%;
  left: 29%;
}
.background .beam-particles .beam-particle:nth-child(7) {
  top: 61%;
  left: 69%;
}
.background .beam-particles .beam-particle:nth-child(9) {
  top: 46%;
  left: 89%;
}
.background .beam-particles .beam-particle:nth-child(10) {
  top: 36%;
  left: 99%;
}

@keyframes moveBeam {
  10% {
    translate: -0.25px 0.75px;
  }
  20% {
    translate: -1.25px 0.75px;
  }
  30% {
    translate: -0.25px -0.25px;
  }
  40% {
    translate: 0.75px 0.75px;
  }
  50% {
    translate: 0.75px 0.75px;
  }
  60% {
    translate: -0.25px 0.75px;
  }
  70% {
    translate: -0.25px -1.25px;
  }
  80% {
    translate: -0.25px 0.75px;
  }
  90% {
    translate: 0.75px -0.25px;
  }
  100% {
    translate: -1.25px -0.25px;
  }
}
.mouse-parallax {
  transform-style: preserve-3d;
}
.mouse-parallax > * {
  transform: translateZ(12px);
}

.container {
  position: relative;
  display: flow-root;
  width: 100%;
  min-height: 200vh;
  padding: 0 1rem;
}
.container .hero {
  height: 100dvh;
}
.container .hero .heading {
  display: grid;
  font-size: var(--font-size-900);
  grid-template-columns: clamp(10%, 20em, 50%) 1fr;
}
.container .hero .heading .main-heading {
  width: 100%;
  display: flow-root;
  font-weight: var(--font-weight-400);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.4em;
}
.container .hero .heading .sub-heading {
  display: flex;
  align-items: center;
  font-size: 0.8em;
  font-weight: var(--font-weight-400);
}
.container .hero .overview {
  display: flow-root;
  width: 100%;
  font-size: var(--font-size-700);
}
.container .hero .overview .overview-heading, .container .hero .overview .overview-footing {
  display: flow-root;
  width: 100%;
  font-weight: var(--font-weight-400);
  text-align: center;
  text-transform: uppercase;
}
.container .hero .overview .overview-card-wrapper {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--gap-300);
  height: calc(var(--height) / 1.45);
  aspect-ratio: 2.05/1;
}
.container .hero .overview .overview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-100);
  height: 100%;
  aspect-ratio: 2.1/1;
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: 0 0 2rem -1rem color-mix(in srgb, var(--color-white) 10%, transparent);
  backdrop-filter: blur(10px);
  overflow: hidden;
  cursor: pointer;
  transition: 0.15s ease-in-out background-color;
  animation-name: change-bg-wideness-reverse;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  background-color: transparent;
  --overview-card-bg-wideness: 0%;
  background-image: linear-gradient(color-mix(in srgb, transparent 10%, transparent) 0%, transparent calc(50% - var(--overview-card-bg-wideness)), transparent calc(50% + var(--overview-card-bg-wideness)), color-mix(in srgb, transparent 10%, transparent) 100%), linear-gradient(color-mix(in srgb, var(--color-quinary) 60%, transparent) 0%, var(--color-quinary) 50%, color-mix(in srgb, var(--color-quinary) 60%, transparent) 100%);
  border: 1px solid color-mix(in srgb, transparent 5%, transparent);
}
@keyframes change-bg-wideness {
  from {
    --overview-card-bg-wideness: 0%;
  }
  to {
    --overview-card-bg-wideness: 25%;
  }
}
@keyframes change-bg-wideness-reverse {
  from {
    --overview-card-bg-wideness: 25%;
  }
  to {
    --overview-card-bg-wideness: 0%;
  }
}
.container .hero .overview .overview-card:hover, .container .hero .overview .overview-card:focus-within {
  animation-name: change-bg-wideness;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.container .hero .overview .overview-card--digital {
  background-image: linear-gradient(color-mix(in srgb, green 10%, transparent) 0%, transparent calc(50% - var(--overview-card-bg-wideness)), transparent calc(50% + var(--overview-card-bg-wideness)), color-mix(in srgb, green 10%, transparent) 100%), linear-gradient(color-mix(in srgb, var(--color-quinary) 60%, transparent) 0%, var(--color-quinary) 50%, color-mix(in srgb, var(--color-quinary) 60%, transparent) 100%);
  border: 1px solid color-mix(in srgb, green 5%, transparent);
}
.container .hero .overview .overview-card--digital:hover, .container .hero .overview .overview-card--digital:focus-within {
  animation-name: change-bg-wideness;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.container .hero .overview .overview-card--print {
  background-image: linear-gradient(color-mix(in srgb, gold 10%, transparent) 0%, transparent calc(50% - var(--overview-card-bg-wideness)), transparent calc(50% + var(--overview-card-bg-wideness)), color-mix(in srgb, gold 10%, transparent) 100%), linear-gradient(color-mix(in srgb, var(--color-quinary) 60%, transparent) 0%, var(--color-quinary) 50%, color-mix(in srgb, var(--color-quinary) 60%, transparent) 100%);
  border: 1px solid color-mix(in srgb, gold 5%, transparent);
}
.container .hero .overview .overview-card--print:hover, .container .hero .overview .overview-card--print:focus-within {
  animation-name: change-bg-wideness;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.container .hero .overview .overview-card--internet {
  background-image: linear-gradient(color-mix(in srgb, violet 10%, transparent) 0%, transparent calc(50% - var(--overview-card-bg-wideness)), transparent calc(50% + var(--overview-card-bg-wideness)), color-mix(in srgb, violet 10%, transparent) 100%), linear-gradient(color-mix(in srgb, var(--color-quinary) 60%, transparent) 0%, var(--color-quinary) 50%, color-mix(in srgb, var(--color-quinary) 60%, transparent) 100%);
  border: 1px solid color-mix(in srgb, violet 5%, transparent);
}
.container .hero .overview .overview-card--internet:hover, .container .hero .overview .overview-card--internet:focus-within {
  animation-name: change-bg-wideness;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.container .hero .overview .overview-card .overview-card-heading, .container .hero .overview .overview-card .overview-card-content {
  display: flow-root;
  width: 70%;
  margin: 0;
  text-align: center;
}
.container .hero .overview .overview-card .overview-card-heading {
  font-size: 1.2em;
  font-weight: var(--font-weight-600);
  color: var(--color-white);
}
.container .hero .overview .overview-card .overview-card-content {
  color: var(--color-white);
}
.container .hero .overview .overview-card .overview-card-icon-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 0.3s ease-in-out transform;
}
.container .hero .overview .overview-card .overview-card-icon-wrapper .overview-card-icon {
  position: absolute;
  width: 10%;
  stroke: var(--color-white);
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) transform;
}
.container .hero .overview .overview-card .overview-card-icon-wrapper .overview-card-icon--p1 {
  top: 14%;
  left: 14%;
  rotate: 15deg;
  scale: 1.4;
  stroke: var(--color-white);
  opacity: 0.2;
}
.container .hero .overview .overview-card .overview-card-icon-wrapper .overview-card-icon--p2 {
  bottom: 9.6%;
  left: 24%;
  rotate: -20deg;
  scale: 1.2;
  stroke: var(--color-white);
  opacity: 0.4;
}
.container .hero .overview .overview-card .overview-card-icon-wrapper .overview-card-icon--p3 {
  top: 14.3%;
  right: 11%;
  rotate: -20deg;
  scale: 1.1;
  stroke: var(--color-white);
  opacity: 0.3;
}
.container .hero .overview .overview-card:hover .overview-card-icon-wrapper .overview-card-icon, .container .hero .overview .overview-card:focus-within .overview-card-icon-wrapper .overview-card-icon {
  transform-origin: center;
}
.container .hero .overview .overview-card:hover .overview-card-icon-wrapper .overview-card-icon--p1, .container .hero .overview .overview-card:focus-within .overview-card-icon-wrapper .overview-card-icon--p1 {
  transform: translate(-20%, -50%) rotate(10deg) scale(1.45);
}
.container .hero .overview .overview-card:hover .overview-card-icon-wrapper .overview-card-icon--p2, .container .hero .overview .overview-card:focus-within .overview-card-icon-wrapper .overview-card-icon--p2 {
  transform: translate(-80%, 50%) rotate(-20deg) scale(1.35);
}
.container .hero .overview .overview-card:hover .overview-card-icon-wrapper .overview-card-icon--p3, .container .hero .overview .overview-card:focus-within .overview-card-icon-wrapper .overview-card-icon--p3 {
  transform: translate(-10%, -50%) rotate(10deg) scale(1.5);
}
.container .content .calltoaction {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-500) 0;
  gap: var(--gap-300);
  font-size: var(--font-size-700);
}
.container .content .calltoaction span {
  display: flow-root;
  font-weight: var(--font-weight-400);
  text-align: center;
  letter-spacing: var(--letter-spacing-400);
}
.container .content .calltoaction button {
  display: flow-root;
  padding: 1rem 4em 1rem 2rem;
  border: none;
  font-size: inherit;
  border-radius: 100vmax;
  background: url("../../assets/rocket.svg") no-repeat -250% 55%, var(--color-secondary) 0 0;
  background-size: 60%;
  color: var(--color-black);
  font-weight: var(--font-weight-500);
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  transition: 0.5s ease-in-out background;
}
.container .content .calltoaction button:hover, .container .content .calltoaction button:focus-within {
  background-position: calc(100% - 1.5em) 55%, 0 0;
  background-size: 2em;
  background-color: var(--color-primary);
}
.container .content .content-heading {
  display: flow-root;
  font-size: var(--font-size-700);
  font-weight: var(--font-weight-600);
  text-align: center;
}
.container .content .why-us-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: var(--gap-300);
}
.container .content .why-us-list .content-heading {
  grid-column: 1/span 3;
  text-align: center;
}
@keyframes changeColor {
  from {
    --why-us-li-color: var(--color-primary);
  }
  to {
    --why-us-li-color: var(--color-secondary);
  }
}
.container .content .why-us-list .why-us-li {
  animation: linear 5s infinite alternate changeColor;
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: var(--gap-100);
  padding: var(--gap-300);
  background: linear-gradient(-45deg, transparent 25%, color-mix(in srgb, var(--why-us-li-color) 10%, transparent) 50%, transparent 75%) 30% 30%/200% 200% no-repeat;
  background-position: 30% 30%;
  border-radius: var(--radius);
  transition: 2s ease-in-out background-position;
}
.container .content .why-us-list .why-us-li .li-icon {
  width: 75%;
  margin: auto;
  grid-row: 1/span 2;
  opacity: 0.9;
  transform: translateZ(14px);
}
.container .content .why-us-list .why-us-li .li-icon--stroke {
  stroke: var(--color-white);
}
.container .content .why-us-list .why-us-li .li-icon--fill {
  fill: var(--color-white);
}
.container .content .why-us-list .why-us-li .li-heading {
  font-size: var(--font-size-700);
  font-weight: var(--font-weight-600);
  text-align: center;
  letter-spacing: var(--letter-spacing-400);
  transform: translateZ(12px);
}
.container .content .why-us-list .why-us-li .li-content {
  font-weight: var(--font-weight-400);
  text-align: center;
  letter-spacing: var(--letter-spacing-300);
  line-height: 1.5em;
  color: var(--color-white);
  opacity: 0.8;
  max-width: 80%;
  margin: 0 auto;
  transform: translateZ(5px);
}
.container .content .why-us-list .why-us-li:hover, .container .content .why-us-list .why-us-li:focus-within {
  background-position: 35% 35%;
}
.container .content .process {
  position: relative;
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: var(--gap-500);
  padding-top: var(--gap-500);
  overflow: clip;
}
.container .content .process .sticky-slide {
  position: sticky;
  top: var(--gap-300);
  height: calc(var(--height) / 2);
}
.container .content .process .sticky-slide .process-heading {
  display: flow-root;
  font-size: var(--font-size-900);
  font-weight: var(--font-weight-600);
  text-align: center;
  margin-block: var(--gap-200);
}
.container .content .process .sticky-slide .ps-icons {
  position: relative;
  display: flow-root;
  width: 100%;
  height: calc(var(--height) / 2 - (var(--gap-200) * 2 + var(--font-size-900)));
  overflow: clip;
}
.container .content .process .sticky-slide .ps-icons .ps-box {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset var(--color-black) 0 0 50px 60px;
}
.container .content .process .sticky-slide .ps-icons .ps-svg {
  position: absolute;
  top: 55%;
  left: 50%;
  translate: -50% -50%;
  width: 50%;
}
.container .content .process .sticky-slide .ps-icons .ps-svg--stroke {
  stroke: var(--color-secondary);
}
.container .content .process .scroll-slide {
  position: relative;
  margin-top: calc(var(--gap-200) * 2 + var(--font-size-900));
  display: grid;
  grid-row-gap: var(--gap-500);
  font-size: var(--font-size-700);
  font-weight: var(--font-weight-400);
  transform-style: preserve-3d;
}
.container .content .process .scroll-slide .ps-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-300);
  padding: var(--gap-300);
  width: 100%;
  height: calc(var(--height) / 2);
  border-radius: var(--radius);
  transform: perspective(5000px) rotateX(50deg);
  background-color: color-mix(in srgb, var(--color-white) 10%, transparent);
  background-color: color-mix(in srgb, color-mix(in srgb, var(--color-primary) calc(var(--index) / var(--count) * 100%), var(--color-secondary) calc((1 - var(--index) / var(--count)) * 100%)) 10%, transparent);
}
.container .content .process .scroll-slide .ps-section .ps-heading {
  font-size: var(--font-size-700);
  font-weight: var(--font-weight-600);
  text-align: center;
  letter-spacing: var(--letter-spacing-400);
  margin: 0;
}
.container .content .process .scroll-slide .ps-section .ps-content {
  font-weight: var(--font-weight-400);
  text-align: center;
  letter-spacing: var(--letter-spacing-300);
  color: var(--color-white);
  opacity: 0.8;
  max-width: 80%;
  margin: 0 auto;
}

/*# sourceMappingURL=main.css.map */