:root {
  --black: black;
  --white: white;
  --deep-sky-blue: #49a3d3;
  --midnight-blue: #000337;
  --gold: #ffc827;
  --alice-blue: #cde3f7;
  --deep-sky-blue-2: #61c5fd;
  --salmon: #fe7961;
  --tan: #e0c29a;
}

h1 {
  color: #000;
  width: 100%;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 38px;
  font-weight: 700;
  line-height: 44px;
}

h2 {
  color: #000;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 300;
  line-height: 36px;
}

._404-page {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100dvh;
  display: flex;
  position: static;
  inset: 0;
  overflow: hidden;
}

.happy-crane {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 50%;
  padding-bottom: 25%;
  padding-left: 0;
  position: relative;
}

._404-heading {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  color: var(--black);
  margin-bottom: 0;
}

.cloud-1 {
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-image: var(--image-31705d35);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  padding-bottom: 50%;
  position: absolute;
  inset: 0;
}

.cloud-2 {
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-image: var(--image-317e74b6);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  padding-bottom: 50%;
  position: absolute;
  inset: 0;
}

.building {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  background-image: var(--image-11e4b544);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  padding-bottom: 50%;
  position: absolute;
  inset: 0;
  transform: none;
}

.laptop {
  z-index: 2;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-image: var(--image-48de13ea);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  padding-bottom: 50%;
  position: absolute;
  inset: 0;
}

.browser-window {
  z-index: 3;
  opacity: 1;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  transform-origin: 50% 22% 0px;
  text-align: center;
  transform-style: preserve-3d;
  background-image: var(--image-i7a890c0a);
  background-repeat: no-repeat;
  background-size: contain;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
  transform: none;
}

.crane-bottom {
  z-index: 1;
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-origin: 100% 100%;
  background-image: var(--image-i1ec7a81);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  padding-bottom: 50%;
  position: absolute;
  inset: 0;
}

.crane-top {
  z-index: 4;
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-origin: 75% 50% 0px;
  transform-style: preserve-3d;
  background-image: var(--image-i59b870db);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  padding-bottom: 50%;
  position: absolute;
  inset: 0;
  transform: none;
}

.chat-form {
  opacity: 0;
  flex: 1;
  width: 100%;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  display: block;
  overflow: hidden;
}

.get-in-touch-button {
  border: 12px solid #f9f9f9;
  border-radius: 0 0 20px 20px;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  transition: height .2s;
  display: block;
  overflow: hidden;
}

.close-messages-click-area {
  z-index: 999999;
  opacity: 0;
  cursor: pointer;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
  min-height: 60px;
  display: none;
  position: absolute;
  inset: auto 0 0;
}

.flex-center-full {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.project-link {
  z-index: 5;
  opacity: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 24px;
  margin-right: 24px;
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-3vw)scale(.25);
}

.shadow-normal {
  z-index: 0;
  opacity: 1;
  background-color: #0000;
  border-radius: 4px;
  display: none;
  position: absolute;
  inset: 0;
  box-shadow: 0 18px 24px -4px #0000001f;
}

.shadow-hover {
  z-index: 0;
  opacity: 0;
  background-color: #0000;
  border-radius: 4px;
  display: none;
  position: absolute;
  inset: 0;
  box-shadow: 0 18px 4vw -4px #0000003d;
}

.portfolio-image {
  filter: blur(13px);
  border-radius: 4px;
  transition: filter .3s cubic-bezier(.439, 1.937, .509, -.239);
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scale(1.05);
}

.original-image {
  opacity: 1;
  background-color: #0000;
  border-radius: 4px;
  justify-content: center;
  align-items: flex-start;
  height: 200px;
  margin: 1vw 0;
  display: flex;
  position: relative;
  inset: 0;
  overflow: hidden;
}

.body {
  background-color: #000;
  padding: 0 40px 40px;
}

.rotate-right {
  opacity: 1;
  filter: saturate(0%);
  transform-origin: 50%;
  transform: rotate(90deg)scale(.5);
}

.fade-bottom {
  background-image: linear-gradient(#fff0, #fff);
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.navbar {
  text-align: center;
  background-color: #000;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0;
}

.image {
  width: 150px;
  height: 150px;
}

.div-block {
  padding: 0;
}

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

.div-block-2 {
  height: 100vh;
}

.lottie-animation {
  height: 80vh;
}

html.w-mod-js [data-ix="scroll-indication-2"] {
  transform: translate(0, 100vh);
}

html.w-mod-js [data-ix="fade-in-out"] {
  opacity: 0;
  transform: translate(0, 10vh)scale(.75);
}

html.w-mod-js [data-ix="fade-in-on-view"], html.w-mod-js [data-ix="step-1-define-the-problem"], html.w-mod-js [data-ix="step-2-collect-information"], html.w-mod-js [data-ix="step-3-brainstorm"], html.w-mod-js [data-ix="step-4-develop-solutions"], html.w-mod-js [data-ix="step-5-gather-feedback"] {
  opacity: 0;
}

@media screen and (max-width: 991px) {
  h1 {
    margin-top: 0;
    margin-bottom: .5em;
    font-size: 14px;
    line-height: 1.2em;
  }

  h2 {
    margin-top: 0;
    font-size: 12px;
    line-height: 1.2em;
  }

  ._404-page {
    height: 80dvh;
  }

  .happy-crane {
    width: 90%;
    padding-bottom: 45%;
  }

  ._404-heading {
    font-size: 4.04vw;
  }

  .original-image {
    margin-top: 12vw;
    margin-bottom: 8vw;
  }

  .image {
    width: 120px;
    height: 120px;
  }

  .lottie-animation {
    height: 70vh;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    margin-bottom: .5em;
    line-height: 1.2em;
  }

  ._404-page {
    height: 60dvh;
  }

  .original-image {
    margin-top: 10vw;
    margin-bottom: 10vw;
  }

  .image {
    width: 90px;
    height: 90px;
  }

  .div-block {
    margin-top: 60px;
  }

  .lottie-animation {
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 479px) {
  h1 {
    margin-bottom: .5em;
    line-height: 1.2em;
  }

  ._404-page {
    height: 40vh;
    margin-top: 0;
    overflow: visible;
  }

  .original-image {
    margin-top: 15vw;
    margin-bottom: 20vw;
  }

  .body {
    overflow: hidden;
  }

  .navbar {
    padding-left: 0;
  }

  .image {
    width: 80px;
    height: 80px;
  }

  .div-block {
    margin-top: 60px;
  }
}