/* 
* Definitions for the breakpoints

1920 =>   >1920px  =>  standard 
1200 =>   < 1919x  =>  desptop-down
992 =>    < 1119px =>  laptop-down
768 =>    < 991px  =>  tablet-down
544 =>    < 767px  =>  mobile-down

*/
:root {
  --clr-bg: #000;
  --clr-ft: #fff;
  --clr-highlight: rgb(76 171 255);
  --clr-signet: rgb(0 136 255);
  --glow-clr: 0 135 255;
  --clr-glow-small: rgb(var(--glow-clr) / 0.5);
  --clr-glow-big: rgb(var(--glow-clr) / 0.8);
  --blur-glow-small: 50px;
  --blur-glow-big: 200px;
  --size-blur-small: 200px;
  --size-blur-big: 450px;
  --ft-size-heading: 5rem;
  --ft-size-subheading: 2.5rem;
  --ft-size-content: 1.125rem;
  --ft-size-button: 0.875rem;
  --size-padding-y: 4.6875rem;
  --size-padding-x: 1.5rem;
  --size-button-padding-y: 0.55rem;
  --size-button-padding-x: 1.25rem;
  --canvas-size: 350px;
  --canvas-margin-left: 0;
}
@media (max-width: 1919px) {
  :root {
    --ft-size-heading: 3.75rem;
    --ft-size-subheading: 1.875rem;
  }
}
@media (max-width: 1199px) {
  :root {
    --ft-size-heading: 3.75rem;
    --ft-size-subheading: 1.875rem;
    --ft-size-button: 0.875rem;
  }
}
@media (max-width: 991px) {
  :root {
    --ft-size-heading: 3rem;
    --ft-size-subheading: 1.5rem;
    --ft-size-content: 1rem;
    --ft-size-button: 0.875rem;
    --canvas-size: 290px;
  }
}
@media (max-width: 767px) {
  :root {
    --ft-size-heading: 2.5rem;
    --ft-size-subheading: 1.5rem;
    --ft-size-content: 1rem;
    --ft-size-button: 0.875rem;
  }
}

[data-element=lottie],
[data-element=grafik-side-image],
[data-element=grafik-top],
[data-element=grafik-bottom],
[data-element=signet-image] {
  will-change: transform, opacity;
}

.sph {
  background-color: var(--clr-bg);
  color: var(--clr-ft);
  padding-inline: var(--size-padding-x);
  padding-block: var(--size-padding-y);
  min-height: 600px;
  overflow: clip;
  /**
  *
  * * Content Wrapper 
  *
  */
  /**
  *
  * Button Wrapper 
  *
  */
  /**
  *
  * * Grafik-Wrapper 
  *
  */
}
@media (max-width: 767px) {
  .sph {
    text-align: center;
  }
}
.sph .sph-wrapper {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  display: grid;
  gap: 0;
  grid-template-rows: auto;
  grid-template-columns: 40% 20% 40%;
  grid-auto-columns: 1fr;
}
@media (max-width: 1919px) {
  .sph .sph-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .sph .sph-wrapper {
    grid-template-columns: 1fr;
  }
}
.sph .sph-content-wrapper-outer {
  grid-area: 1/1/1/3;
}
@media (max-width: 767px) {
  .sph .sph-content-wrapper-outer {
    display: contents;
  }
}
@media (max-width: 767px) {
  .sph .sph-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.sph .sph-grafik-wrapper {
  grid-area: 1/3/2/4;
}
@media (max-width: 1919px) {
  .sph .sph-grafik-wrapper {
    grid-area: 1/2/2/3;
  }
}
@media (max-width: 767px) {
  .sph .sph-grafik-wrapper {
    grid-area: auto;
    margin-inline: auto;
  }
}
.sph .sph-heading {
  font-size: var(--ft-size-heading);
  font-variation-settings: "wght" 900;
  font-weight: 900;
  line-height: 1.375;
  will-change: transform, opacity;
}
@media (max-width: 767px) {
  .sph .sph-heading {
    line-height: 1;
    margin-bottom: 1rem;
  }
}
.sph .sph-subheading {
  margin-bottom: 2.4rem;
  max-width: 21em;
  color: var(--clr-highlight);
  font-size: var(--ft-size-subheading);
  font-variation-settings: "wght" 275;
  font-weight: 275;
  line-height: 1.35;
  will-change: transform, opacity;
}
@media (max-width: 1919px) {
  .sph .sph-subheading {
    margin-bottom: 1.5625rem;
    max-width: 20em;
  }
}
@media (max-width: 1199px) {
  .sph .sph-subheading {
    max-width: 18em;
  }
}
@media (max-width: 767px) {
  .sph .sph-subheading {
    line-height: 1.65;
  }
}
.sph .sph-content {
  max-width: 600px;
  font-size: var(--ft-size-content);
  font-variation-settings: "wght" 400;
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 3.125rem;
  will-change: transform, opacity;
}
@media (max-width: 1919px) {
  .sph .sph-content {
    max-width: 500px;
  }
}
@media (max-width: 1199px) {
  .sph .sph-content {
    max-width: 26.875rem;
  }
}
@media (max-width: 991px) {
  .sph .sph-content {
    max-width: 23em;
    margin-bottom: 2.3rem;
  }
}
.sph .sph-button-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.56rem;
  flex-wrap: wrap;
}
@media (max-width: 991px) {
  .sph .sph-button-wrapper {
    max-width: 25rem;
  }
}
@media (max-width: 767px) {
  .sph .sph-button-wrapper {
    justify-content: center;
    gap: 1rem;
    grid-area: 3/1/3/1;
    max-width: 100%;
  }
}
.sph .sph-button-wrapper .sph-button {
  padding: var(--size-button-padding-y) var(--size-button-padding-x);
  background-color: transparent;
  color: white;
  text-decoration: none;
  border-radius: 100px;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  font-size: var(--ft-size-button);
  border: 1px solid white;
  font-variation-settings: "wght" 400;
  font-weight: 400;
  min-height: 39px;
  will-change: transform, opacity;
}
.sph .sph-button-wrapper .sph-button.highlight {
  background-color: white;
  color: var(--clr-bg);
}
.sph .sph-button-wrapper .sph-button:hover {
  background-color: var(--clr-btn-bg, var(--clr-signet));
  border-color: var(--clr-btn-bg, var(--clr-signet));
  color: white;
}
.sph .sph-grafik-wrapper {
  isolation: isolate;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-content: start;
  align-items: center;
  /*     opacity: 0;
  pointer-events: none; */
}
.sph .sph-grafik-wrapper > div {
  grid-area: 1/1/2/2;
}
.sph .sph-grafik-wrapper .sph-grafik-wrapper-inner {
  justify-self: start;
  position: relative;
  margin-top: 40px;
  margin-left: -10px;
}
@media (max-width: 1919px) {
  .sph .sph-grafik-wrapper .sph-grafik-wrapper-inner {
    margin-top: 51px;
    margin-left: 8px;
  }
}
@media (max-width: 1199px) {
  .sph .sph-grafik-wrapper .sph-grafik-wrapper-inner {
    justify-self: center;
    margin-left: 20%;
  }
}
@media (max-width: 991px) {
  .sph .sph-grafik-wrapper .sph-grafik-wrapper-inner {
    justify-self: start;
    margin-left: 40px;
    align-self: end;
    bottom: -32px;
  }
}
@media (max-width: 767px) {
  .sph .sph-grafik-wrapper .sph-grafik-wrapper-inner {
    bottom: 0;
    left: -18px;
    margin-bottom: 120px;
  }
}
.sph .sph-lottie-canvas {
  width: var(--canvas-size);
  height: var(--canvas-size);
  margin-left: var(--canvas-margin-left);
}
@media (max-width: 1199px) {
  .sph .sph-lottie-canvas {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .sph .sph-lottie-canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-width: var(--canvas-size);
    max-height: var(--canvas-size);
  }
}
.sph .sph-grafik-top,
.sph .sph-grafik-bottom {
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  position: absolute;
  white-space: nowrap;
}
.sph .sph-grafik-top .arrow-circle,
.sph .sph-grafik-top .arrow-path,
.sph .sph-grafik-bottom .arrow-circle,
.sph .sph-grafik-bottom .arrow-path {
  stroke: white;
}
.sph .sph-grafik-top .arrow-circle, .sph .sph-grafik-top .arrow-head,
.sph .sph-grafik-bottom .arrow-circle,
.sph .sph-grafik-bottom .arrow-head {
  fill: white;
}
.sph .sph-grafik-top .arrow-path,
.sph .sph-grafik-bottom .arrow-path {
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sph .sph-grafik-top .arrow-svg,
.sph .sph-grafik-bottom .arrow-svg {
  width: 50px;
  height: 35px;
}
.sph .sph-grafik-top img,
.sph .sph-grafik-bottom img {
  width: 131px;
  height: 64px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 1199px) {
  .sph .sph-grafik-top img,
  .sph .sph-grafik-bottom img {
    width: 88px;
    height: 34px;
  }
}
@media (max-width: 767px) {
  .sph .sph-grafik-top,
  .sph .sph-grafik-bottom {
    display: grid;
    grid-template-column: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .sph .sph-grafik-text {
    grid-column: 1/3;
  }
}
.sph .sph-grafik-top {
  top: -57px;
  right: -65px;
}
.sph .sph-grafik-top svg, .sph .sph-grafik-top .arrow-wrapper {
  margin-top: 16px;
  margin-left: 25px;
  margin-right: 17px;
}
@media (max-width: 1919px) {
  .sph .sph-grafik-top {
    justify-content: center;
    margin-left: -2%;
  }
}
@media (max-width: 1199px) {
  .sph .sph-grafik-top {
    right: 0;
    top: -36px;
  }
}
.sph .sph-grafik-bottom {
  bottom: -45px;
  left: -60px;
}
.sph .sph-grafik-bottom img {
  position: relative;
  bottom: -10px;
}
.sph .sph-grafik-bottom svg {
  margin-top: -16px;
  margin-left: 17px;
  margin-right: 25px;
}
@media (max-width: 1199px) {
  .sph .sph-grafik-bottom {
    bottom: -25px;
    left: -20px;
  }
}
@media (max-width: 767px) {
  .sph .sph-grafik-bottom .sph-grafik-text {
    margin-top: 16px;
  }
}
.sph .sph-grafik-side {
  position: absolute;
  right: -140px;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 1919px) {
  .sph .sph-grafik-side {
    right: -100px;
  }
}
@media (max-width: 1199px) {
  .sph .sph-grafik-side {
    display: none;
  }
}
.sph .sph-scale-right,
.sph .sph-scale-bottom {
  font-size: 0.875rem;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sph .sph-scale-right {
  top: -5px;
  bottom: 0;
  right: -44px;
  height: 100%;
}
.sph .sph-scale-right .sph-scale-svg {
  width: 10px;
  height: 100%;
}
.sph .sph-scale-right .sph-scale-number {
  writing-mode: vertical-lr;
}
.sph .sph-scale-bottom {
  flex-flow: column;
  left: 0;
  right: 0;
  bottom: -35px;
}
.sph .sph-scale-bottom .sph-scale-svg {
  width: 98%;
  height: 10px;
}
.sph .sph-glow-wrapper {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
}
.sph .sph-glow-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.sph .sph-glow-small,
.sph .sph-glow-big {
  grid-area: 1/1/2/2;
  border-radius: 100%;
}
.sph .sph-glow-small {
  width: var(--size-blur-small);
  height: var(--size-blur-small);
  filter: blur(var(--blur-glow-small));
  background-color: var(--clr-glow-small);
}
.sph .sph-glow-big {
  width: var(--size-blur-big);
  height: var(--size-blur-big);
  filter: blur(var(--blur-glow-big));
  background-color: var(--clr-glow-big);
}
.sph .sph-signet-image {
  grid-area: 1/1/1/1;
}

:root {
  --clr-highlight: rgb(13 195 204);
  --glow-clr: 11 160 167;
  --clr-signet: var(--clr-highlight);
  --canvas-margin-left: 95px;
  --clr-btn-bg: rgb(11 160 167);
}

/*
!  Remove this in production 
*/
@font-face {
  font-family: "Nunito Sans";
  src: url("/fonts/NunitoSans.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variation-settings: "wght" 400;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}/*# sourceMappingURL=style.css.map */