@font-face {
  font-family: PM Grotesk;
  src: url('../fonts/PMGrotesk-Bold.otf') format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: PM Grotesk;
  src: url('../fonts/PMGrotesk-Light.otf') format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: PM Grotesk;
  src: url('../fonts/PMGrotesk-Medium.otf') format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: PM Grotesk;
  src: url('../fonts/PMGrotesk-Thin.otf') format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: PM Grotesk;
  src: url('../fonts/PMGrotesk-Regular.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: white;
  --black: black;
  --red: #eb412b;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-embed-youtubevideo {
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/youtube-placeholder.2b05e7d68d.svg');
  background-position: 50%;
  background-size: cover;
  width: 100%;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.w-embed-youtubevideo:empty {
  min-height: 75px;
  padding-bottom: 56.25%;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  background-color: var(--white);
  color: var(--black);
  letter-spacing: 0;
  font-family: PM Grotesk, sans-serif;
  font-size: 1vw;
  line-height: 1.6;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.28em;
  font-weight: 700;
  line-height: 1.4;
}

h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.5em;
  font-weight: 700;
  line-height: 1.4;
}

h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.19em;
  font-weight: 700;
  line-height: 1.4;
}

h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.88em;
  font-weight: 700;
  line-height: 1.4;
}

h5 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.67em;
  font-weight: 700;
  line-height: 1.4;
}

h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.46em;
  font-weight: 700;
  line-height: 1.4;
}

p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5em;
}

a {
  font-size: 1em;
  text-decoration: none;
}

label {
  margin-bottom: .3em;
  font-size: 1.25em;
  font-weight: 700;
  display: block;
}

blockquote {
  border-left: .3em solid #e2e2e2;
  margin-bottom: 1em;
  padding: 1em 2em 1em 1.7em;
  font-size: 1.2em;
  line-height: 1.6;
}

.container {
  z-index: 2;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 1.3em;
  position: relative;
}

.container.is-loader-top {
  color: var(--white);
  mix-blend-mode: normal;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.container.is-loader-bottom {
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}

.container.is-hero {
  color: var(--red);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100svh;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  display: block;
  position: sticky;
  top: 0;
}

.style_item {
  border-bottom: .1em solid #bdbdbd;
  padding: 2em 0;
}

.html {
  width: 0;
  height: 0;
  position: absolute;
  inset: 0% 0% auto;
  overflow: hidden;
}

.global-styles {
  position: fixed;
  inset: 0% 0% auto;
}

.rich-text p {
  margin-top: 0;
  margin-bottom: 1.6em;
}

.rich-text h1 {
  margin-top: 0;
  margin-bottom: .2em;
  font-size: 3.28em;
}

.rich-text h2 {
  margin-top: 0;
  margin-bottom: .2em;
  font-size: 2.5em;
}

.rich-text h3 {
  margin-top: 0;
  margin-bottom: .3em;
  font-size: 2.19em;
}

.rich-text h4 {
  margin-top: 0;
  margin-bottom: .4em;
  font-size: 1.88em;
}

.rich-text h5 {
  margin-top: 0;
  margin-bottom: .6em;
  font-size: 1.67em;
}

.rich-text h6 {
  margin-top: 0;
  margin-bottom: .7em;
  font-size: 1.46em;
}

.loader {
  z-index: 1000;
  color: var(--black);
  background-color: #3b2fad;
  background-image: none;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  height: 100vh;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
  overflow: hidden;
}

.page-wrapper {
  width: 100%;
  font-size: 1em;
  position: relative;
  overflow: visible;
}

.main-wrapper {
  position: relative;
}

.h1 {
  font-size: 3.28em;
  line-height: 1.2;
}

.h2 {
  font-size: 2.5em;
  line-height: 1.2;
}

.h3 {
  font-size: 2.19em;
  line-height: 1.3;
}

.h4 {
  font-size: 1.88em;
  line-height: 1.3;
}

.h5 {
  font-size: 1.67em;
  line-height: 1.3;
}

.h6 {
  font-size: 1.46em;
}

.form_input {
  border: 1px solid #0003;
  border-radius: 0;
  height: 3em;
  margin-bottom: 1em;
  padding: 0 .9em;
  font-size: 1.25em;
}

.display {
  font-size: 4.38em;
  line-height: 1.1;
}

.form_submit {
  font-size: 1.25em;
}

.loader_top {
  z-index: 2;
  color: var(--red);
  border-bottom: 2px solid #fff;
  display: none;
  position: relative;
}

.loader_bottom {
  width: 100%;
}

.loader_p {
  color: var(--white);
  text-transform: uppercase;
  font-size: 1.82em;
  line-height: 1;
}

.loader_p.is-right {
  text-align: right;
  display: block;
}

.loader_progress {
  z-index: 1;
  background-color: #086ce4;
  width: 0%;
  height: 100%;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.loader_number {
  color: var(--white);
  padding-bottom: .14em;
  font-size: 12em;
  font-weight: 700;
  line-height: .55;
}

.trigger {
  width: 0;
  height: 0;
  padding: 0;
  display: none;
  position: fixed;
  inset: 0% auto auto 0%;
}

.section {
  background-image: linear-gradient(103deg, #086ce4 38%, #08bce4 77%);
  width: 100%;
  max-width: 100%;
  height: 300vh;
  display: flex;
  position: relative;
}

.hero_title {
  letter-spacing: -.05em;
  padding-bottom: .3em;
  font-size: 12em;
  font-weight: 500;
  line-height: .8;
}

.body {
  font-family: Montserrat, sans-serif;
  overflow-x: hidden;
}

.image {
  width: auto;
  height: 100%;
  display: block;
}

.image.logomark {
  z-index: 300;
  object-fit: contain;
  height: 100%;
  display: block;
  position: relative;
}

.container-2 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: none;
  display: flex;
  position: relative;
}

.hero-logo-right {
  box-sizing: content-box;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: 0% 50%;
  width: auto;
  height: 100%;
  display: block;
}

.container-3 {
  width: 400px;
  max-width: none;
  height: 400px;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  position: relative;
}

.image-2 {
  height: 41.6185%;
}

.container-4 {
  width: auto;
  max-width: none;
  height: 72px;
}

.image-3 {
  height: 100%;
  display: none;
}

.imgl1 {
  z-index: 1;
  width: auto;
  height: 100%;
  display: none;
  position: relative;
}

.container-5 {
  width: 100%;
  max-width: none;
  height: 173px;
  position: fixed;
  top: auto;
  left: auto;
}

.img2 {
  z-index: 2;
  width: auto;
  height: 100%;
  display: none;
  position: relative;
}

.img3 {
  z-index: 3;
  width: auto;
  height: 100%;
  display: none;
  position: relative;
}

.img4 {
  z-index: 4;
  width: auto;
  height: 100%;
  display: none;
  position: relative;
}

.img5 {
  z-index: 5;
  width: auto;
  height: 100%;
  display: none;
  position: relative;
}

.img6 {
  z-index: 6;
  width: auto;
  height: 100%;
  display: none;
  position: relative;
}

.img7 {
  z-index: 7;
  width: auto;
  height: 100%;
  display: none;
  position: relative;
}

.container-6 {
  cursor: pointer;
  max-width: none;
}

.container-6.hero-cont-mobile {
  display: none;
}

.container-7 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: none;
  height: 100%;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  overflow: hidden;
}

.image-4 {
  object-fit: contain;
  max-width: none;
  height: 246px;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cursorwrapper {
  z-index: 99;
  pointer-events: none;
  mix-blend-mode: exclusion;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0%;
}

.cursor {
  background-color: #5f33ea;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 75px;
  height: 75px;
  display: flex;
}

.text-block {
  color: var(--black);
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  display: none;
}

.section-2 {
  color: var(--white);
  background-color: #000;
  flex-flow: column;
  align-items: center;
  height: auto;
  display: block;
  position: relative;
  overflow: visible;
}

.sec2-top {
  z-index: 90;
  background-color: #fff;
  width: 100%;
  max-width: none;
  height: 33.33%;
  display: none;
  position: absolute;
  inset: 0%;
}

.sec2-mid {
  z-index: 90;
  background-color: #fff;
  width: 100%;
  max-width: none;
  height: 33.33%;
  display: none;
  position: absolute;
  inset: 33.33% 0% 0;
}

.sec2-bot {
  z-index: 90;
  background-color: #fff;
  width: 100%;
  max-width: none;
  height: 33.33%;
  display: none;
  position: absolute;
  inset: auto 0% 0%;
}

.container-8 {
  width: 30px;
  height: 30px;
  position: absolute;
  inset: auto 0% 0%;
}

.container-9 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: none;
  height: 100dvh;
  padding: 50px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.background-video {
  z-index: 0;
  width: 100%;
  height: 100%;
  transition: opacity .2s;
  position: absolute;
  inset: 0%;
}

.menu-outer {
  z-index: 3;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: #1a1b1e66;
  border: 1px solid #222325;
  border-radius: 100px;
  flex-direction: column;
  width: 40%;
  max-width: 100%;
  padding: 9px;
  display: flex;
  position: fixed;
  inset: auto 30% 0%;
}

.menu-expand {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  background-color: #1a1b1e;
  border-radius: 23px;
  flex-direction: column;
  max-width: 100%;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.menu-expand-header {
  color: #313235;
  border-bottom: 1px solid #222325;
  margin-top: 24px;
  margin-left: 24px;
  margin-right: 24px;
  padding-bottom: 13px;
  font-size: 10px;
  line-height: 120%;
}

.menu-expand-content {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-items: center;
  margin-bottom: 24px;
  margin-left: 24px;
  margin-right: 24px;
  display: grid;
}

.menu-expand-link {
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 142.857%;
  text-decoration: none;
  transition: all .2s ease-in-out;
}

.menu-expand-link:hover {
  text-decoration: underline;
}

.menu-inner {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: #1a1b1e;
  border-radius: 92px;
  justify-content: space-between;
  width: 100%;
  padding: 12px;
  display: flex;
  overflow: auto;
}

.menu-link {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: #fff;
  cursor: pointer;
  border: 1px solid #222325;
  border-radius: 80px;
  flex: none;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 114.286%;
  text-decoration: none;
  transition: background-color .2s ease-in-out;
  display: flex;
}

.menu-link:hover {
  background-color: #36353a;
}

.menu-link.get-in-touch {
  background-color: #36353a;
  transition: color .2s ease-in-out, background-color .2s ease-in-out;
}

.menu-link.get-in-touch:hover {
  color: #111;
  background-color: #fff;
}

.nav {
  z-index: 5;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60%;
  display: block;
  position: fixed;
  inset: auto 20% 20px;
}

.nav_logo {
  flex: none;
  width: 36px;
}

.button_primary {
  grid-column-gap: 8px;
  color: #fff;
  background-color: #3b2fad;
  border: 1px #fff;
  border-radius: 20px;
  justify-content: space-between;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color .2s;
  display: flex;
  box-shadow: 0 -2px 4px #0000001a;
}

.button_primary:hover {
  background-color: #3b2fad99;
}

.menu_line {
  background-color: #ededed;
  width: 16px;
  height: 2px;
}

.menu {
  grid-row-gap: 4px;
  cursor: pointer;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  transition: background-color .2s;
  display: none;
}

.menu:hover {
  background-color: #1a1d22;
  align-items: center;
}

.nav_row-link {
  color: #cacaca;
  text-decoration: none;
  transition: color .2s;
}

.nav_row-link:hover {
  color: #fff;
}

.flex_h-10 {
  grid-column-gap: 10px;
  display: flex;
}

.flex_h-10.center-left {
  grid-column-gap: 32px;
  align-items: center;
}

.nav_link {
  grid-column-gap: 8px;
  color: #ededed;
  border: 1px #0000;
  border-radius: 12px;
  align-items: center;
  padding: 12px 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: color .2s;
  display: flex;
}

.nav_link:hover {
  box-shadow: none;
  color: #006ae4;
  background-color: #0000;
  border-style: none;
  border-color: #1a1d22;
}

.nav_link.w--current {
  color: #fff;
}

.nav_row {
  grid-row-gap: 10px;
  flex-direction: column;
  display: none;
}

.social {
  grid-column-gap: 16px;
  flex-flow: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  display: flex;
}

.social_link {
  opacity: .8;
  transition: opacity .2s;
}

.social_link:hover {
  opacity: 1;
}

.grid_nav {
  grid-column-gap: 16px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  place-items: center stretch;
  width: 100%;
  display: flex;
}

.nav_row-links {
  grid-row-gap: 8px;
  flex-direction: column;
  display: flex;
}

.nav_big {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #3b2fad;
  border-radius: 20px;
  padding: 20px 16px;
  display: none;
  position: absolute;
  inset: auto 0% 70px;
}

.nav_inner {
  z-index: 10;
  grid-column-gap: 10px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #ffffff1f;
  border: 1px solid #ffffff4d;
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 10px 10px 16px;
  display: flex;
  position: relative;
  box-shadow: 0 0 5px #cfc8c86b;
}

.nav_title {
  color: #888fa0;
  text-transform: uppercase;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s;
}

.nav_title:hover {
  color: #ededed;
}

.nav_title.hide-dasktop {
  display: none;
}

.container-10 {
  z-index: 1;
  background-color: #0006;
  background-image: linear-gradient(0deg, #000 3%, #0000 35%);
  width: 100%;
  max-width: none;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.heading {
  z-index: 3;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 2px 3px 10px #00000080;
  width: 60%;
  margin-left: 0;
  font-size: 2em;
  font-weight: 400;
  display: block;
  position: relative;
}

.heading.big {
  text-align: left;
  font-size: 7em;
}

.heading-2 {
  z-index: 3;
  color: var(--white);
  position: relative;
}

.container-11 {
  z-index: 3;
  mix-blend-mode: normal;
  background-color: #006ae4;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  max-width: none;
  margin-left: -30px;
  display: flex;
  position: absolute;
  inset: 10% 0% auto;
  overflow: visible;
  transform: rotate(3deg);
}

.container-11.negative {
  mix-blend-mode: normal;
  color: #006ae4;
  background-color: #fff;
  margin-left: -30px;
  display: flex;
  transform: rotate(-3deg);
}

.container-12 {
  width: 100%;
  max-width: none;
  height: 100%;
}

.heading-3 {
  mix-blend-mode: normal;
  flex: none;
  margin-right: 20px;
  font-size: 2em;
  font-weight: 700;
}

.image-5 {
  z-index: 3;
  width: 200px;
  margin-left: 0;
  position: relative;
}

.container-13, .container-14 {
  width: 100%;
  max-width: none;
  display: flex;
}

.container-15 {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 100dvh;
  padding-left: 10%;
  padding-right: 10%;
  display: flex;
  position: relative;
}

.container-16 {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: none;
  display: flex;
  overflow: hidden;
}

.heading-4 {
  color: var(--black);
  flex: none;
  margin-right: 15px;
  font-size: 10em;
}

.heading-4.empty {
  color: var(--white);
  font-weight: 400;
}

.container-17 {
  width: 100%;
  max-width: none;
  display: flex;
}

.heading-5 {
  color: var(--black);
  text-align: center;
  font-weight: 400;
  position: sticky;
  top: 10px;
}

.italic-text {
  text-shadow: 1px 1px 5px #006ae4b3;
  color: #006ae4;
  font-style: normal;
  font-weight: 500;
}

.container-18 {
  width: 100%;
  max-width: none;
  min-height: 80vh;
  padding-top: 5vh;
  padding-bottom: 0;
  position: static;
  top: 5%;
  bottom: 5%;
}

.container-19 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  width: 100%;
  max-width: none;
  height: 100%;
  display: flex;
}

.s-header {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.s-header-content {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}

.s-header-caption {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  align-items: center;
  display: flex;
}

.heading-6 {
  text-align: center;
  -webkit-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, #0072ff, #00c6ff 64%);
  -webkit-background-clip: text;
  background-clip: text;
  width: 100%;
  margin-bottom: 78px;
  font-size: 2em;
  font-weight: 300;
}

.heading-6.different-gradient {
  background-image: linear-gradient(135deg, #3c30ae, #3880f5 64%);
}

.heading-6.different-gradient.upper {
  display: none;
}

.s-caption {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  outline-offset: 0px;
  border-radius: 18px;
  outline: 1.5px #ffffff1f;
  justify-content: center;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
}

.text-block-2 {
  color: var(--white);
  text-align: center;
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  margin-bottom: 78px;
  font-size: 9em;
  font-weight: 600;
}

.text-block-2.portfolio {
  opacity: 1;
  color: var(--white);
  -webkit-text-stroke-width: 0px;
  font-size: 3em;
  font-weight: 300;
}

.text-block-2.smaller {
  font-size: 5em;
}

.text-block-2.clickable {
  text-shadow: 0 3px 10px #000000e6;
  cursor: pointer;
  color: #fff;
  margin-bottom: 0;
  font-size: 6em;
  font-weight: 800;
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: ease;
  display: block;
  position: absolute;
}

.text-block-2.clickable.no-bottom-margin {
  text-shadow: none;
  color: #fff;
  margin-bottom: 0;
  font-size: 4em;
  display: none;
}

.s-stat-containet {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.s-stat {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  margin-bottom: 78px;
  display: flex;
}

.s-stat.second {
  opacity: 1;
  position: static;
}

.stat-text {
  text-align: center;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(#fff 23%, #3880f5 62%, #3c30ae 82%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 7.5em;
  font-weight: 400;
}

.stat-subtext {
  text-align: center;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(0deg, #ffffff59 20%, #fff 65%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 2em;
  font-weight: 600;
}

.container-20 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  justify-content: center;
  place-items: flex-start center;
  width: 100%;
  max-width: none;
  height: auto;
  padding-bottom: 100px;
  padding-left: 10%;
  padding-right: 10%;
  display: flex;
  position: relative;
}

.heading-7 {
  position: sticky;
  top: 20px;
}

.heading-8 {
  text-align: center;
  width: 100%;
  margin-bottom: 78px;
  font-size: 2em;
  font-weight: 300;
  position: static;
  top: 10px;
}

.heading-8.upper {
  display: none;
}

.container-21 {
  background-image: linear-gradient(0deg, #000, #0000), linear-gradient(#000, #0000);
  width: 40%;
  max-width: none;
  height: 100%;
}

.gradient-span {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, #0072ff, #00c6ff 64%);
  -webkit-background-clip: text;
  background-clip: text;
}

.gradient-span.different-gradient {
  background-image: linear-gradient(135deg, #3c30ae, #3880f5 64%);
}

.container-22 {
  width: 100%;
  max-width: none;
  min-height: 100vh;
}

.project-box {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  cursor: pointer;
  background-image: linear-gradient(#000000d9, #000000d9), url('../images/exit-festival-2018.webp');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: none;
  height: 90vh;
  padding: 5% 10%;
  display: flex;
  position: relative;
}

.project-box.atp {
  z-index: 1;
  background-image: linear-gradient(#000000d9, #000000d9), url('../images/Screenshot_5.webp');
  margin-bottom: 0;
}

.project-box.eac {
  background-image: linear-gradient(#000000d9, #000000d9), url('../images/pexels-ajaybhargavguduru-863988.webp');
  margin-bottom: 0;
}

.project-box.rammstein {
  background-image: linear-gradient(#000000e6, #000000e6), url('../images/Rammstein-Belgrade-by-Getty-Images.webp');
  margin-bottom: 0;
}

.project-box.ed-sheeran {
  background-image: linear-gradient(#000c, #000c), url('../images/52.webp');
  background-size: auto, contain;
  margin-bottom: 0;
}

.project-box.zamfira {
  z-index: 1;
  background-image: linear-gradient(#000000d9, #000000d9), url('../images/3-1-1.jpg.webp');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  margin-bottom: 0;
}

.project-box.team {
  background-image: linear-gradient(#000000d9, #000000d9), url('../images/Hanna-Achievements.webp');
  margin-bottom: 100px;
}

.project-box.vnl {
  background-image: linear-gradient(#000000d9, #000000d9), url('../images/VNL-25.webp');
}

.heading-9 {
  text-align: center;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, #0072ff, #00c6ff 64%);
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 400;
}

.project-box-overlay-one {
  background-image: linear-gradient(#00000080, #00000080), url('../images/exit-festival-2018.webp');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  width: 90%;
  height: 90%;
  display: block;
  position: absolute;
  inset: 50% 0% 0% 50%;
  transform: translate(-50%, -50%);
}

.project-box-overlay-one.atp {
  z-index: 2;
  background-image: linear-gradient(#00000080, #00000080), url('../images/Screenshot_5.webp');
  width: 90%;
}

.project-box-overlay-one.eac {
  background-image: linear-gradient(#00000080, #00000080), url('../images/pexels-ajaybhargavguduru-863988.webp');
  width: 90%;
}

.project-box-overlay-one.rammstein {
  background-image: linear-gradient(#000c, #000c), url('../images/Rammstein-Belgrade-by-Getty-Images.webp');
  width: 90%;
}

.project-box-overlay-one.ed-sheeran {
  background-image: linear-gradient(#00000080, #00000080), url('../images/52.webp');
  background-position: 0 0, 50%;
  background-size: auto, contain;
  width: 90%;
}

.project-box-overlay-one.zamfira {
  z-index: 2;
  background-image: linear-gradient(#00000080, #00000080), url('../images/3-1-1.jpg.webp');
  background-position: 0 0, 50%;
  background-size: auto, cover;
}

.project-box-overlay-one.team {
  z-index: 2;
  filter: blur(2px);
  background-image: linear-gradient(#00000080, #00000080), url('../images/Hanna-Achievements.webp');
}

.project-box-overlay-one.vnl {
  background-image: linear-gradient(#00000080, #00000080), url('../images/VNL-25.webp');
}

.project-box-overlay-two {
  background-image: url('../images/exit-festival-2018.webp');
  background-size: cover;
  width: 80%;
  height: 80%;
  display: block;
  position: absolute;
  inset: 50% 0% 0% 50%;
  transform: translate(-50%, -50%);
}

.project-box-overlay-two.atp {
  z-index: 3;
  background-image: url('../images/Screenshot_5.webp');
  justify-content: flex-end;
  align-items: flex-start;
  width: 80%;
  display: flex;
}

.project-box-overlay-two.eac {
  background-image: url('../images/pexels-ajaybhargavguduru-863988.webp');
  justify-content: flex-end;
  align-items: flex-start;
  width: 80%;
  display: flex;
}

.project-box-overlay-two.rammstein {
  background-image: url('../images/Rammstein-Belgrade-by-Getty-Images.webp');
  justify-content: flex-end;
  align-items: flex-start;
  width: 80%;
  display: flex;
}

.project-box-overlay-two.ed-sheeran {
  background-image: url('../images/52.webp');
  background-position: 50% 100%;
  justify-content: flex-end;
  align-items: flex-start;
  width: 80%;
  display: flex;
}

.project-box-overlay-two.zamfira {
  z-index: 3;
  background-image: url('../images/3-1-1.jpg.webp');
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}

.project-box-overlay-two.team {
  z-index: 3;
  filter: none;
  background-image: url('../images/Blurred-Achievements-Hanna.webp');
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}

.project-box-overlay-two.vnl {
  background-image: url('../images/VNL-25.webp');
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}

.project-box-text-overlay {
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: exclusion;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  display: block;
  position: absolute;
  inset: auto 0%;
}

.project-box-text-overlay.ed {
  mix-blend-mode: difference;
  color: #b1d0fe;
  font-weight: 400;
}

.project-box-heading {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  font-size: 10em;
  position: static;
  right: 0;
}

.project-box-heading.lower {
  text-align: right;
  margin-left: auto;
  margin-right: auto;
  font-size: 10em;
  left: auto;
  right: auto;
}

.project-heading-box {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.project-heading-box.lower {
  flex-flow: row;
  justify-content: flex-end;
  align-items: center;
}

.click-box {
  background-color: #3c30ae;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 15px;
  font-weight: 700;
  display: none;
}

.click-box.visible {
  display: flex;
}

.paragraph {
  color: var(--white);
  text-align: left;
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 1.2em;
  display: none;
}

.hanna-full-logo {
  width: 70vw;
  display: none;
}

.hero-l1, .hero-l2 {
  height: 100%;
  display: none;
  position: absolute;
  inset: 0%;
}

.image-6 {
  height: 100%;
  display: block;
  position: absolute;
  inset: 0%;
}

.hero-l3, .hero-l4, .hero-l5, .hero-l6, .hero-l7, .hero-l8, .hero-l9, .hero-l10, .hero-l11, .hero-l12, .hero-l13, .hero-l14, .hero-l15, .hero-l16, .hero-final-layer {
  height: 100%;
  display: none;
  position: absolute;
  inset: 0%;
}

.image-7 {
  object-fit: contain;
  width: 30px;
}

.text-block-3 {
  width: auto;
  font-size: 1.3em;
}

.loader-no-click {
  z-index: 1001;
  position: absolute;
  inset: 0%;
}

.next-page-overlay {
  z-index: 2147483647;
  justify-content: center;
  align-items: flex-start;
  width: 100vw;
  max-width: none;
  height: 100vh;
  display: none;
  position: fixed;
  inset: 0%;
}

.npo-l {
  background-image: linear-gradient(#fff, #fff);
  width: 20vw;
  height: 100vh;
}

.npo-l._1, .npo-l._2, .npo-l._3, .npo-l._4, .npo-l._5 {
  background-image: linear-gradient(#3b2fad, #3b2fad);
}

.visiblecursorwrapper {
  z-index: 99;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  transition: all .2s;
  display: none;
  position: fixed;
  inset: 0%;
}

.visiblecursorwrapper.active {
  display: flex;
}

.visiblecursor {
  background-color: #5f33ea;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 75px;
  height: 75px;
  display: flex;
}

.project-big {
  z-index: 99;
  background-color: #000;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  max-width: none;
  height: 100vh;
  min-height: 100vh;
  padding-left: 50px;
  padding-right: 50px;
  display: flex;
  position: fixed;
  inset: 0%;
  overflow: hidden;
}

.project-big.atp {
  z-index: 100;
  flex-flow: column;
  height: auto;
  padding-top: 5%;
  padding-left: 5%;
  padding-right: 5%;
  display: none;
  overflow-y: scroll;
}

.project-big.eac {
  z-index: 100;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  height: auto;
  padding-top: 5%;
  padding-left: 5%;
  padding-right: 5%;
  display: none;
  overflow-y: scroll;
}

.project-big.rammstein, .project-big.edsheeran, .project-big.zamfira {
  z-index: 100;
  flex-flow: column;
  height: auto;
  padding-top: 5%;
  padding-left: 5%;
  padding-right: 5%;
  display: none;
  overflow-y: scroll;
}

.project-big.portfolio {
  flex-flow: column;
  display: none;
  overflow-y: scroll;
}

.project-big.portfolio.hannna-portfolio {
  z-index: 100;
  display: none;
  overflow-y: hidden;
}

.project-big.portfolio.jovana {
  z-index: 100;
  display: flex;
}

.project-big.vnl {
  display: none;
}

.heading-10 {
  color: var(--white);
  text-align: left;
  font-size: 2em;
  font-weight: 300;
}

.text-block-4 {
  color: var(--white);
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, #3c30ae, #3880f5 64%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 1.5em;
  font-weight: 300;
}

.quick-stack {
  width: 80%;
}

.slider {
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: auto;
  display: flex;
}

.slide {
  text-align: center;
  width: auto;
  height: auto;
}

.mask {
  height: auto;
}

.slide-nav {
  display: none;
}

.image-8 {
  vertical-align: middle;
}

.text-block-5 {
  color: var(--red);
}

.project-big-left {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.project-big-left.portfolio {
  opacity: 1;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 20vh;
  margin-top: 30px;
}

.project-big-right {
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-top: 50px;
  margin-bottom: 50px;
  display: flex;
}

.project-big-right.dejan {
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  position: relative;
}

.project-big-right-left {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
  position: static;
  top: 0;
}

.project-big-right-right {
  flex-flow: column;
  width: 40%;
  height: 100%;
  display: flex;
}

.image-9 {
  object-fit: contain;
  border-radius: 20px;
  height: 100%;
  margin-top: 0;
  margin-right: 30px;
}

.div-block {
  width: 100%;
  height: 300px;
}

.background-video-2 {
  z-index: 5;
  border-radius: 20px;
  flex: none;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.project-big-image-container-left {
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 300px;
  padding-bottom: 30px;
  display: flex;
  position: relative;
  top: 0;
  overflow-x: scroll;
}

.project-big-image-container-right {
  width: 100%;
  position: relative;
  top: 0;
}

.close-project-x {
  width: 40px;
  height: 40px;
  position: fixed;
  inset: 25px 25px auto auto;
}

.close-project-x.dejan {
  z-index: 999;
  position: fixed;
}

.video {
  border-radius: 20px;
  margin-top: 20px;
}

.background-video-3 {
  object-fit: contain;
  border-radius: 20px;
  width: 100%;
  margin-top: 20px;
}

.tabs {
  width: 100%;
}

.tab-link {
  background-color: #0000;
  width: 50%;
  display: flex;
}

.tab-link:hover {
  background-color: #fff3;
}

.tab-link.w--current {
  background-color: #ffffff1a;
  border-radius: 0;
}

.tab-link.w--current:hover {
  background-color: #fff3;
}

.tabs-menu {
  display: flex;
}

.tab-link-image {
  filter: grayscale();
  object-fit: cover;
  border-radius: 50%;
  flex: none;
  width: 120px;
  height: 120px;
}

.text-block-6 {
  color: var(--white);
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, #3c30ae, #3880f5 64%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 1.3em;
}

.div-block-2 {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 20px;
  display: flex;
}

.heading-11 {
  color: var(--white);
  font-size: 2em;
  font-weight: 300;
}

.services-list {
  max-width: none;
  list-style-type: none;
}

.services-text {
  letter-spacing: 0;
  margin-bottom: -.5rem;
  font-size: 1.5em;
  font-weight: 300;
  line-height: 1.2;
}

.services-image {
  border-radius: 20px;
  width: 75%;
  max-width: 35rem;
}

.services-block {
  color: #fff;
  -webkit-text-stroke-color: white;
  border-bottom: 1px solid #ffffff4d;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-end;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  text-decoration: none;
  transition: all .3s;
  display: flex;
  position: relative;
}

.services-item {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.services-list-wrapper {
  width: 100%;
  max-width: none;
}

.services-list-wrapper.dejan, .services-list-wrapper.jovana {
  display: none;
}

.service-number-wrapper {
  color: #fff;
  flex: 0 auto;
  align-items: center;
  max-width: none;
  margin-left: 0;
  margin-right: 4.6875em;
  display: flex;
}

.services-number {
  white-space: nowrap;
  margin-left: 0;
  font-size: .75rem;
  font-weight: 300;
  line-height: 1.4;
}

.services-image-wrapper {
  z-index: 999999999;
  justify-content: center;
  align-items: center;
  width: 40%;
  max-width: none;
  height: 80vh;
  margin-top: 5%;
  margin-left: 60%;
  margin-right: 0;
  display: none;
  position: fixed;
  inset: 0%;
}

.image-10 {
  filter: grayscale();
  object-fit: cover;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

.container-23 {
  max-width: none;
  margin-left: 20px;
}

.team-box {
  width: 100%;
  margin-bottom: 78px;
  display: flex;
}

.team-person-tab {
  cursor: pointer;
  width: 50%;
  padding: 10px 30px;
  display: flex;
}

.team-person-tab:hover {
  background-color: #fff3;
}

.container-24 {
  background-color: #000;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 30vh;
  padding-bottom: 100px;
  padding-left: 10%;
  padding-right: 10%;
  display: flex;
}

.paragraph-2 {
  color: var(--white);
  padding-bottom: .14em;
  font-size: 6em;
  font-weight: 700;
  line-height: .55;
}

.switch-overlay {
  z-index: 9999;
  background-color: #0000;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  max-width: none;
  height: auto;
  display: none;
  position: fixed;
  inset: 0%;
  transform: none;
}

.switch-block {
  background-color: #3b2fad;
  width: 100%;
  height: 14.3%;
}

.switch-block.second {
  background-color: #3b2fad;
}

.swap-overlay {
  z-index: 2147483647;
  pointer-events: none;
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: none;
  height: auto;
  display: flex;
  position: fixed;
  inset: 0%;
}

.swap-1 {
  background-color: #3b2fad54;
  border-radius: 50%;
  width: 0;
  height: 0;
  position: absolute;
}

.swap-2 {
  background-color: #3b2fadab;
  border-radius: 50%;
  width: 0;
  height: 0;
  position: absolute;
}

.swap-3 {
  background-color: #3b2fad;
  border-radius: 50%;
  width: 0;
  height: 0;
  position: absolute;
}

.lightbox-link {
  z-index: 999999;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: none;
  position: relative;
}

.div-block-3 {
  width: 50%;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
}

.div-block-4 {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  height: 100%;
  display: flex;
}

.image-11 {
  object-fit: cover;
  border-radius: 20px;
  width: 30%;
  height: 400px;
}

.image-12 {
  object-fit: cover;
  width: 50%;
  height: 400px;
}

.blured-overlay {
  border-radius: 20px;
  width: 30%;
  height: 400px;
  position: relative;
}

.image-13 {
  object-fit: cover;
  border-radius: 20px;
  width: 100%;
  height: 100%;
}

.blured-overlay-overlay {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.div-block-5 {
  background-color: #3b2fad;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 75px;
  height: 75px;
  padding: 20px;
  display: flex;
}

.heading-12 {
  color: var(--white);
  font-size: 2em;
}

.heading-13 {
  color: var(--white);
  font-size: 4em;
  font-weight: 600;
}

.image-14 {
  width: 300px;
  position: absolute;
  top: 23.188px;
  left: 128px;
}

.image-14:hover {
  z-index: 6;
}

.image-15 {
  width: 350px;
  transition: z-index .2s;
  position: absolute;
  top: 170.188px;
  left: 193.5px;
}

.image-15:hover {
  z-index: 6;
}

.image-16 {
  width: 320px;
  position: absolute;
  top: -25.812px;
  left: 494.5px;
}

.image-17 {
  width: 400px;
  position: absolute;
  top: 213.188px;
}

.image-18 {
  width: 300px;
  position: absolute;
  top: 126.188px;
  right: 220px;
}

.image-19 {
  width: 250px;
  position: absolute;
  top: 297.188px;
  right: 210px;
}

.portfolio-cards-wrapper {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.portfolio-card-item {
  z-index: 8;
  width: 17rem;
  height: 17rem;
  position: absolute;
  inset: 0%;
}

.portfolio-card-item:hover {
  z-index: 100;
  width: 20rem;
  height: 20rem;
  transform: scale(1.2);
}

.portfolio-card-item._01 {
  transform-origin: 0 0;
  width: 20rem;
  height: 20rem;
  transition: all .2s;
  transform: rotate(20deg);
}

.portfolio-card-item._01:hover {
  transform: rotate(20deg);
  scale: 1.3 !important;
}

.portfolio-card-item._02 {
  transform-origin: 0 0;
  width: 20rem;
  height: 20rem;
  transition: all .2s;
  transform: rotate(-35deg);
}

.portfolio-card-item._02:hover {
  transform: rotate(-35deg);
  scale: 1.3 !important;
}

.portfolio-card-item._03 {
  transform-origin: 0 0;
  width: 20rem;
  height: 20rem;
  transition: all .2s;
  transform: rotate(-80deg);
}

.portfolio-card-item._03:hover {
  transform: rotate(-80deg);
  scale: 1.3 !important;
}

.portfolio-card-item._04 {
  transform-origin: 0 0;
  width: 20rem;
  height: 20rem;
  transition: all .2s;
  transform: rotate(-125deg);
}

.portfolio-card-item._04:hover {
  transform: rotate(-125deg);
  scale: 1.3 !important;
}

.portfolio-card-item._05 {
  transform-origin: 0 0;
  width: 20rem;
  height: 20rem;
  transition: all .2s;
  transform: rotate(-170deg);
}

.portfolio-card-item._05:hover {
  transform: rotate(-170deg);
  scale: 1.3 !important;
}

.portfolio-card-item._06 {
  transform-origin: 0 0;
  width: 20rem;
  height: 20rem;
  transition: all .2s;
  transform: rotate(135deg);
}

.portfolio-card-item._06:hover {
  transform: rotate(135deg);
  scale: 1.3 !important;
}

.portfolio-card-item._07 {
  z-index: 9;
  transform-origin: 0 0;
  width: 20rem;
  height: 20rem;
  transition: all .2s;
  transform: rotate(110deg);
}

.portfolio-card-item._07:hover {
  z-index: 100;
  transform: rotate(110deg);
  scale: 1.3 !important;
}

.portfolio-card-item._08 {
  z-index: 9;
  transform-origin: 0 0;
  width: 20rem;
  height: 20rem;
  transition: all .2s;
  transform: rotate(65deg);
}

.portfolio-card-item._08:hover {
  z-index: 100;
  transform: rotate(65deg);
  scale: 1.3 !important;
}

.portfolio-image {
  width: 100%;
  height: 100%;
}

.portfolio-image.flipped, .portfolio-image.flipped-2 {
  transform: rotate(90deg);
}

.portfolio-image.flipped-3 {
  transform: rotate(180deg);
}

.portfolio-image.flipped-4 {
  transform: rotate(-90deg);
}

.image-21 {
  width: 100%;
  height: 100%;
}

.card-image-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0% auto auto;
}

.portfolio-holder {
  z-index: 101;
  object-fit: cover;
  background-color: #000;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 10rem;
  height: 10rem;
  padding: 15px;
  display: flex;
  position: absolute;
}

.image-23 {
  filter: none;
  object-fit: cover;
  border-radius: 0%;
  width: 70%;
  height: 70%;
}

.div-block-6 {
  background-image: none;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 600px;
  display: flex;
  overflow: hidden;
}

.grid {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
}

.image-24 {
  object-fit: cover;
  border-radius: 20px;
  width: 100%;
  height: 400px;
}

.after-loader {
  z-index: 98;
  background-color: #3b2fad;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 250vw;
  height: 250vw;
  display: none;
  position: fixed;
  inset: 50% 0% 0% 50%;
  transform: translate(-50%, -50%);
}

.after-loader._2 {
  z-index: 96;
  background-color: #3b2fad54;
}

.after-loader._3 {
  z-index: 97;
  background-color: #3b2fadab;
}

.zvuk-box {
  display: none;
}

.sound-control-box {
  cursor: pointer;
  background-color: #3c30ae;
  border: 1px solid #ffffff4d;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  transition: all .2s;
  display: flex;
  position: fixed;
  inset: auto 20px 20px auto;
  box-shadow: 0 0 5px #0003;
}

.sound-control-box:hover {
  opacity: .8;
  transform: none;
}

.sound-control-box.pojacaj {
  z-index: 5;
  box-shadow: none;
  background-color: #0000;
  border-style: none;
  width: auto;
  height: auto;
  padding: 5px;
  display: flex;
  position: static;
}

.sound-control-box.utisaj {
  z-index: 5;
  box-shadow: none;
  background-color: #0000;
  border-style: none;
  width: 32px;
  height: 32px;
  display: none;
  position: static;
}

.startmusic {
  cursor: pointer;
  flex: none;
  width: 30px;
  height: 30px;
  display: none;
}

.stopmusic {
  cursor: pointer;
  flex: none;
  width: 30px;
  height: 30px;
}

.div-block-7 {
  cursor: pointer;
  background-color: #3c30ae;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 250px;
  margin-left: 30px;
  transition: all .2s;
  display: flex;
  box-shadow: 0 2px 10px 2px #0000008c;
}

.div-block-7:hover {
  scale: 1.2;
}

.image-25 {
  cursor: pointer;
  width: 100%;
  height: 100%;
  transition: all .2s;
  display: block;
}

.div-block-8 {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 22em;
  height: 22em;
  transition: all .2s;
  display: flex;
}

.div-block-8:hover {
  scale: 1.1;
}

.text-block-container {
  width: 100%;
  max-width: none;
  padding-top: 78px;
  padding-left: 10%;
  padding-right: 10%;
}

.div-block-9 {
  z-index: 6;
  opacity: .3;
  flex-flow: column;
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: absolute;
  inset: auto 0% 0% auto;
}

.div-block-9.upper-left {
  opacity: .5;
  inset: 10% auto auto 0%;
}

.div-block-9.bottom-right {
  opacity: .5;
  bottom: 10%;
}

.citat {
  color: var(--white);
  font-size: 1.5em;
  font-style: italic;
  font-weight: 300;
}

.paragraph-3 {
  color: var(--white);
}

.div-9-overlay {
  background-image: radial-gradient(circle farthest-side, #0000 76%, #00000080);
  position: absolute;
  inset: 0%;
}

.white-play-image {
  width: 50px;
  height: 50px;
}

.no-pay-overlay {
  z-index: 2147483647;
  pointer-events: none;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
  inset: 0%;
}

.nopaytext {
  text-align: center;
  font-size: 2.5rem;
}

@media screen and (max-width: 991px) {
  body {
    font-size: .619375em;
  }

  .container {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .loader {
    justify-content: center;
    align-items: center;
  }

  .loader_top {
    border-top: 2px solid #000;
    position: absolute;
    inset: 0% 0% auto;
  }

  .cursorwrapper {
    display: none !important;
  }

  .button_primary {
    display: none;
  }

  .menu {
    display: flex;
  }

  .flex_h-10.center-left {
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .nav_link, .nav_link.w--current {
    display: none;
  }

  .project-box-overlay-two.vnl {
    background-position: 50%;
  }

  .project-box-heading, .project-box-heading.lower {
    font-size: 8em;
  }

  .project-big.atp, .project-big.portfolio.hannna-portfolio {
    display: none;
  }

  .services-text {
    margin-bottom: 0;
    font-size: 3.25rem;
  }

  .services-image {
    width: 100%;
    max-width: none;
  }

  .services-block {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-number-wrapper {
    margin-bottom: 1rem;
    margin-right: 0;
  }

  .services-image-wrapper {
    z-index: -1;
    width: 100%;
    height: auto;
    margin-left: 0%;
    display: block;
    position: static;
  }

  .portfolio-card-item._01, .portfolio-card-item._02, .portfolio-card-item._03, .portfolio-card-item._04, .portfolio-card-item._05, .portfolio-card-item._06, .portfolio-card-item._07, .portfolio-card-item._08 {
    width: 16rem;
    height: 16rem;
  }

  .grid {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr 1fr;
  }

  .image-24 {
    height: 350px;
  }

  .after-loader {
    width: 300vw;
    height: 300vw;
    display: none;
  }

  .div-block-9.upper-left {
    top: 2%;
  }

  .div-block-9.bottom-right {
    bottom: 2%;
  }
}

@media screen and (max-width: 767px) {
  .hero_title {
    font-size: 17vw;
  }

  .cursorwrapper {
    display: none !important;
  }

  .menu-expand-content {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .button_primary {
    display: none;
  }

  .menu {
    display: flex;
  }

  .flex_h-10.center-left {
    justify-content: space-between;
    width: 100%;
  }

  .nav_link {
    display: none;
  }

  .grid_nav {
    max-height: 65vh;
    overflow: scroll;
  }

  .nav_inner {
    grid-column-gap: 10px;
    justify-content: space-between;
  }

  .nav_title.hide-dasktop {
    display: block;
  }

  .project-box-heading, .project-box-heading.lower {
    font-size: 6em;
  }

  .project-big.atp, .project-big.eac, .project-big.zamfira, .project-big.portfolio.hannna-portfolio {
    display: none;
  }

  .services-text {
    font-size: 2.25rem;
  }

  .services-block {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .services-number {
    margin-right: 0;
    font-size: 1.25rem;
    left: 1.5rem;
  }

  .portfolio-card-item._01, .portfolio-card-item._02, .portfolio-card-item._03, .portfolio-card-item._04, .portfolio-card-item._05, .portfolio-card-item._06, .portfolio-card-item._07, .portfolio-card-item._08 {
    width: 13rem;
    height: 13rem;
  }

  .grid {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr;
  }

  .image-24 {
    height: 500px;
  }

  .after-loader {
    width: 300vw;
    height: 300vw;
  }

  .div-block-9.upper-left {
    top: 5%;
  }

  .div-block-9.bottom-right {
    bottom: 5%;
  }
}

@media screen and (max-width: 479px) {
  .container.is-hero {
    height: 100dvh;
  }

  .loader_number {
    font-size: 40vw;
  }

  .section {
    height: 300dvh;
  }

  .container-2.cont-2-mob {
    height: 150px;
  }

  .container-3 {
    width: 300px;
    max-width: 100%;
    height: 300px;
  }

  .container-4 {
    width: 100%;
    height: 20.571px;
  }

  .container-5 {
    height: 150px;
  }

  .container-6 {
    display: block;
  }

  .container-6.hero-cont-mobile {
    width: auto;
    max-width: 100%;
    display: block;
  }

  .cursorwrapper {
    display: none !important;
  }

  .sec2-top, .sec2-mid, .sec2-bot {
    display: none;
  }

  .nav {
    width: 90vw;
    display: flex;
    left: 5vw;
    right: auto;
  }

  .button_primary {
    display: none;
  }

  .menu {
    display: flex;
  }

  .menu:hover {
    background-color: #0000;
  }

  .flex_h-10.center-left {
    grid-column-gap: 15px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .nav_row {
    grid-row-gap: 10px;
  }

  .social {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    flex-flow: row;
    justify-content: center;
  }

  .social_link.inv {
    display: none;
  }

  .grid_nav {
    flex-flow: column;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .nav_big {
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
  }

  .nav_inner {
    width: 70%;
  }

  .nav_title {
    color: #fff;
  }

  .nav_title.hide-dasktop {
    font-size: 1rem;
    font-weight: 500;
  }

  .nav_title.hide-dasktop.smaller_nav_title {
    font-size: .9rem;
  }

  .nav_title.hide-dasktop.hideall {
    display: none;
  }

  .heading {
    width: 100%;
  }

  .image-5 {
    width: 150px;
  }

  .heading-6 {
    width: 100%;
    font-size: 2em;
  }

  .text-block-2 {
    -webkit-text-stroke-width: 1px;
    font-size: 4em;
  }

  .text-block-2.clickable {
    font-size: 4.5em;
  }

  .stat-text {
    font-size: 4em;
  }

  .project-box {
    overflow: hidden;
  }

  .project-box.atp {
    background-image: linear-gradient(to bottom, null, null), url('../images/Screenshot_5.webp');
    background-position: 0 0, 60%;
  }

  .project-box.eac {
    background-image: linear-gradient(to bottom, null, null), url('../images/pexels-ajaybhargavguduru-863988.webp');
    background-position: 0 0, 100%;
  }

  .project-box.ed-sheeran {
    background-image: linear-gradient(to bottom, null, null), url('../images/52.webp');
    background-position: 0 0, 50% 100%;
  }

  .project-box-overlay-one.atp {
    background-image: linear-gradient(to bottom, null, null), url('../images/Screenshot_5.webp');
    background-position: 0 0, 60%;
  }

  .project-box-overlay-one.eac {
    background-image: linear-gradient(to bottom, null, null), url('../images/pexels-ajaybhargavguduru-863988.webp');
    background-position: 0 0, 100%;
  }

  .project-box-overlay-one.ed-sheeran {
    background-image: linear-gradient(to bottom, null, null), url('../images/52.webp');
    background-position: 0 0, 50% 100%;
  }

  .project-box-overlay-two.atp {
    background-position: 60%;
  }

  .project-box-overlay-two.eac {
    background-position: 100%;
  }

  .project-box-overlay-two.rammstein, .project-box-overlay-two.zamfira {
    background-position: 50%;
  }

  .project-box-heading, .project-box-heading.lower {
    font-size: 3.5em;
  }

  .hanna-full-logo {
    width: 90vw;
  }

  .text-block-3, .project-big.atp, .project-big.eac, .project-big.rammstein {
    display: none;
  }

  .heading-10 {
    text-align: center;
    font-size: 3em;
  }

  .project-big-left {
    justify-content: flex-start;
    align-items: center;
    padding-top: 60px;
  }

  .background-video-2.ed {
    min-height: 500px;
  }

  .close-project-x {
    z-index: 6;
  }

  .tab-link-image {
    width: 70px;
    height: 70px;
  }

  .text-block-6 {
    text-align: center;
  }

  .div-block-2 {
    justify-content: center;
    align-items: center;
    padding-left: 0;
  }

  .services-text {
    font-family: Montserrat, sans-serif;
    font-size: 28px;
  }

  .services-image {
    display: block;
  }

  .services-block {
    opacity: 1;
  }

  .service-number-wrapper {
    margin-bottom: 8px;
  }

  .services-number {
    font-size: 14px;
  }

  .services-image-wrapper {
    margin-top: 32px;
  }

  .team-box {
    flex-flow: column;
  }

  .team-person-tab {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }

  .team-person-tab.dejan {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-bottom: 30px;
  }

  .div-block-6 {
    height: 200px;
  }

  .grid {
    grid-template-rows: auto auto auto auto auto auto auto;
    grid-template-columns: 1fr;
  }

  .image-24 {
    height: 260px;
  }

  .after-loader {
    width: 300vw;
    height: 300vw;
    display: none;
  }

  .sound-control-box.pojacaj {
    box-shadow: none;
    background-color: #0000;
    border-style: none;
    flex: none;
    width: 32px;
    height: 32px;
    display: flex;
    position: static;
  }

  .sound-control-box.utisaj {
    box-shadow: none;
    background-color: #0000;
    border-style: none;
    width: 32px;
    height: 32px;
    display: none;
    position: static;
  }

  .startmusic {
    width: 32px;
    height: 32px;
  }

  .image-25 {
    width: 100%;
    height: 100%;
    display: inline-block;
  }

  .div-block-8 {
    width: 20em;
    height: 20em;
  }

  .div-block-9.upper-left {
    top: 6%;
  }

  .div-block-9.bottom-right {
    bottom: 3%;
  }

  .citat {
    text-align: left;
  }
}

#w-node-b801b9f5-e40c-7df2-e21e-1d09816fe282-122e67bc, #w-node-b801b9f5-e40c-7df2-e21e-1d09816fe28c-122e67bc, #w-node-b801b9f5-e40c-7df2-e21e-1d09816fe2a4-122e67bc {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-b801b9f5-e40c-7df2-e21e-1d09816fe2a6-122e67bc {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_3051e280-9ba6-1cc5-66ac-11b3e590a5fc-122e67bc {
  grid-area: span 2 / span 1 / span 2 / span 1;
}

#w-node-a66274a1-daa9-cd17-da04-4f725f3b57c0-122e67bc {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_862ae285-97c2-f834-3f5d-779f288fd722-122e67bc {
  grid-area: span 2 / span 1 / span 2 / span 1;
}

#w-node-a66274a1-daa9-cd17-da04-4f725f3b57c2-122e67bc, #w-node-a66274a1-daa9-cd17-da04-4f725f3b57c3-122e67bc {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

@media screen and (max-width: 991px) {
  #w-node-_3051e280-9ba6-1cc5-66ac-11b3e590a5fc-122e67bc {
    grid-row: span 2 / span 2;
  }
}


@font-face {
  font-family: 'PM Grotesk';
  src: url('../fonts/PMGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PM Grotesk';
  src: url('../fonts/PMGrotesk-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PM Grotesk';
  src: url('../fonts/PMGrotesk-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PM Grotesk';
  src: url('../fonts/PMGrotesk-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PM Grotesk';
  src: url('../fonts/PMGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}