.wobble-illustration {
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.64,.57,.67,1.53);
  animation-duration: .7s;
  display: inline-block;
  animation-play-state: paused;
}

textarea.svelte-fycflg, input:focus[type=email].svelte-fycflg, input:focus[type=text].svelte-fycflg {
  padding: 8px;
}

textarea.svelte-fycflg:focus, input.svelte-fycflg:focus {
  outline-color: var(--dark-pink);
  outline-offset: -1px;
}

.hero-height {
  height: calc(100vh - 14rem);
}

.hero-z-index {
  z-index: 20!important;
}

.case-wiggle g {
  transform-origin: center!important;
  transform: rotate(-20deg)!important;
}

.case-wiggle {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
}

.case-pattern-show {
  visibility: visible!important;
}

.case-wiggle svg {
  width: 120vw;
  height: 100%;
}

#waveH, #waveH2, #waveH3 {
  fill: none;
  stroke-width: 240;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #f8db43;
  animation-timing-function: cubic-bezier(.25,.1,.25,1);
  animation: svelte-upmwk7-hideshow 2s;
  animation-delay: 2s;
  animation-play-state: running;
  animation-fill-mode: forwards;
}

@media (max-width: 768px) {
  .hero-height {
    height: 30vh;
  }

}

@keyframes svelte-upmwk7-hideshow {
  0% {
    stroke-width: 240;
  }

  to {
    stroke-width: 0;
  }

}

@keyframes svelte-upmwk7-hideshow-mobile {
  0% {
    stroke-width: 100;
  }

  to {
    stroke-width: 0;
  }

}

#waveH {
  transform: translate(-5%,45%)!important;
}

#waveH2 {
  transform: translateY(95%)!important;
}

#waveH3 {
  transform: translateY(-5%)!important;
}

.walking.svelte-1x7vecd {
  left: 0vw;
  transform: translate(calc(0vw - 360px)) scaleX(1);
  animation: svelte-1x7vecd-walk-animation 55s;
  animation-direction: normal;
  animation-iteration-count: infinite;
}

@media (max-width: 1080px) {
  .walking.svelte-1x7vecd {
    filter: brightness(1.06) contrast(1.03);
    left: 0vw;
    transform: translate(calc(0vw - 360px)) scaleX(1);
    animation: svelte-1x7vecd-walk-animation 25s ease-in-out;
    animation-direction: normal;
    animation-iteration-count: infinite;
  }

}

@media (max-width: 380px) {
  .walking.svelte-1x7vecd {
    filter: brightness(1.1) contrast(1.07);
    left: 0vw;
    transform: translate(calc(0vw - 200px)) scaleX(1);
    animation: svelte-1x7vecd-walk-animation-mobile 20s ease-in-out;
    animation-direction: normal;
    animation-iteration-count: infinite;
  }

}

@keyframes svelte-1x7vecd-walk-animation {
  0% {
    transform: translate(calc(0vw - 360px)) scaleX(1);
  }

  50% {
    transform: translate(100vw) scaleX(1);
  }

  50.1% {
    transform: translate(100vw) scaleX(-1);
  }

  99% {
    transform: translate(calc(0vw - 600px)) scaleX(-1);
  }

  to {
    transform: translate(calc(0vw - 600px)) scaleX(1);
  }

}

@keyframes svelte-1x7vecd-walk-animation-mobile {
  0% {
    transform: translate(calc(0vw - 200px)) scaleX(1);
  }

  50% {
    transform: translate(100vw) scaleX(1);
  }

  50.1% {
    transform: translate(100vw) scaleX(-1);
  }

  99% {
    transform: translate(calc(0vw - 200px)) scaleX(-1);
  }

  to {
    transform: translate(calc(0vw - 200px)) scaleX(1);
  }

}

.gif-image.svelte-1x7vecd {
  left: 30%;
  transform: translate(-30%);
}

.underline-custom, .underline-custom-2 {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 3px;
  cursor: pointer;
}

@media only screen and (max-width: 1024px) {
  .underline-custom, .underline-custom-2 {
    text-underline-offset: 2px;
    text-decoration-thickness: 2px;
  }

}

.color1-h, .color2-h, .color3-h, .color4-h, .color5-h, .color6-h, .color7, .color8 {
  animation-timing-function: linear;
  animation-duration: .4s;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
}

.color1-h {
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-name: colorO;
}

.color2-h {
  animation-delay: .1s;
  animation-name: colorO;
}

.color3-h {
  animation-delay: .2s;
  animation-name: colorY;
}

.color4-h {
  animation-delay: .3s;
  animation-name: colorG;
}

.color5-h {
  animation-delay: .4s;
  animation-name: colorPu;
}

.color6-h {
  animation-delay: .5s;
  animation-name: colorO;
}

.color7-h {
  animation-delay: .6s;
  animation-name: colorY;
}

.color8-h {
  animation-delay: .7s;
  animation-name: colorG;
}

@keyframes colorO {
  0%, to {
    color: var(--dark-orange);
  }

  50% {
    color: var(--bright-purple);
  }

}

@keyframes colorPu {
  0%, to {
    color: var(--dark-orange);
  }

  50% {
    color: var(--dark-pink);
  }

}

@keyframes colorG {
  0%, to {
    color: var(--dark-orange);
  }

  50% {
    color: #d8f6c9;
  }

}

@keyframes colorY {
  0%, to {
    color: var(--dark-orange);
  }

  50% {
    color: #f8db43;
  }

}

.logo-select:hover {
  filter: invert(43%) sepia(28%) saturate(4876%) hue-rotate(357deg) brightness(100%) contrast(110%);
}

.blog-rich-text p {
  padding-bottom: 12px;
}

.image-single {
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .1s ease-in-out;
}

.image-single:first-child {
  opacity: 1;
}

.project-grid {
  grid-template-areas: "a1 a2" "a3 a3";
}

@media only screen and (max-width: 1024px) {
  .project-grid {
    grid-template-areas: "a1" "a2" "a3";
  }

  .large-height {
    aspect-ratio: 3/2!important;
  }

}

.large-height {
  aspect-ratio: 16/7;
}

.area-1 {
  grid-area: a1;
  width: 100%;
}

.area-2 {
  grid-area: a2;
  width: 100%;
}

.area-3 {
  grid-area: a3;
  width: calc(100% + 2px);
}

.project-header {
  transition: .3s all ease-in;
}

.case-title-show {
  opacity: 1;
  transition: .1s opacity;
}

h2.svelte-17aviyq:first-letter {
  color: #fd6115;
}

.services-right li a:hover {
  color: var(--dark-orange);
}

.team-member:hover .profile-1 {
  opacity: 0;
}

.team-member.svelte-62k1sl video:where(.svelte-62k1sl) {
  border-radius: 100%;
}

.image-single.svelte-zzs7m8 {
  position: absolute;
}

.video-contain iframe {
  box-sizing: border-box;
  width: 177.77777778vh;
  height: 56.25%;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}