@font-face {
  font-family: Apfelgrotezk;
  src: url('../fonts/ApfelGrotezk-Regular.woff') format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Apfelgrotezk Brukt;
  src: url('../fonts/ApfelGrotezk-Brukt.woff') format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Prodigysans;
  src: url('../fonts/ProdigySans-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Prodigysans;
  src: url('../fonts/ProdigySans-Italic.ttf') format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Robotomono;
  src: url('../fonts/RobotoMono-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Robotomono;
  src: url('../fonts/RobotoMono-Light.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Romana;
  src: url('../fonts/OPTIRomanaRoman-Normal.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

.w-layout-hflex {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}

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

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

.header {
  z-index: 2;
  grid-column-gap: 1070px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  text-decoration: none;
  display: flex;
  position: fixed;
  top: 24px;
  left: 40px;
  right: 40px;
}

.frame-59845 {
  grid-column-gap: 16px;
  mix-blend-mode: difference;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
  position: static;
}

.vectors-wrapper {
  mix-blend-mode: exclusion;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 57px;
  text-decoration: none;
  display: flex;
}

.text {
  color: #dbd9cd;
  text-transform: uppercase;
  mix-blend-mode: exclusion;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Fragment Mono, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.vectors-wrapper-2 {
  opacity: 0;
  object-fit: cover;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  height: 60px;
  text-decoration: none;
  display: flex;
}

.body {
  background-color: #000;
  overflow: clip;
}

.contentbox {
  z-index: auto;
  grid-row-gap: 22px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 400px;
  padding-top: 4%;
  padding-bottom: 40px;
  padding-left: 40px;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.text-2 {
  color: #dbd9cd;
  letter-spacing: -.01em;
  mix-blend-mode: exclusion;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Romana, Georgia, sans-serif;
  font-size: 80px;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.text-3 {
  color: #d4b9cd;
  text-transform: uppercase;
  mix-blend-mode: exclusion;
  margin-top: 0;
  margin-bottom: 12.629px;
  font-family: Fragment Mono, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  text-decoration: none;
}

.text-4 {
  opacity: .75;
  color: #dbd9cd;
  text-transform: uppercase;
  mix-blend-mode: exclusion;
  margin-top: 0;
  margin-bottom: 12.629px;
  font-family: Fragment Mono, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  text-decoration: none;
}

.section {
  height: 100vh;
  padding: 0;
  position: relative;
}

.spline-scene {
  position: absolute;
  inset: 0% 0% auto;
}

.flex-block {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template: "Area Area-2 Area-3"
  / 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: stretch stretch;
  width: 100%;
  height: 600px;
  padding-top: 0%;
  display: grid;
  position: relative;
  top: 0;
  left: -12px;
}

.flex-block.flex-container {
  grid-template-columns: 1fr 1fr 1fr;
  width: 2700px;
  left: auto;
}

.display-container {
  mix-blend-mode: normal;
  border-top: 0 solid #565656;
  border-bottom: 12px solid #201814;
  border-left: 12px solid #201814;
  border-right: 12px #201814;
  width: 900px;
  max-width: none;
  height: 600px;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  position: relative;
  overflow: clip;
}

.code-embed {
  height: 0;
}

.play-button {
  grid-column-gap: 110px;
  grid-row-gap: 110px;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  background-color: #0000;
  background-image: linear-gradient(#0000001a, #0000001a);
  border: 1.4px solid #fff;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 22px 33px;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-3 {
  mix-blend-mode: difference;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 16px;
  text-decoration: none;
  display: flex;
}

.text-5 {
  color: #dbd9cd;
  letter-spacing: -.015em;
  mix-blend-mode: difference;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Fragment Mono, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.frame-59859 {
  grid-row-gap: 450px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 489px;
  text-decoration: none;
  display: flex;
}

.frame-59857 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-4 {
  mix-blend-mode: difference;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 103px;
  height: 32px;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-5 {
  mix-blend-mode: difference;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  text-decoration: none;
  display: flex;
}

.frame-59860 {
  grid-row-gap: 416px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.frame-59861 {
  opacity: .66;
  mix-blend-mode: difference;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 441px;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-6 {
  mix-blend-mode: difference;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  text-decoration: none;
  display: flex;
}

.previous-button {
  grid-row-gap: 16px;
  object-fit: fill;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.vectors-wrapper-7 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 96px;
  height: 115px;
  text-decoration: none;
  display: flex;
}

.text-6 {
  opacity: .5;
  color: #dbd9cd;
  text-align: center;
  text-transform: uppercase;
  mix-blend-mode: difference;
  margin-top: 0;
  margin-bottom: 12.629px;
  font-family: Fragment Mono, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  text-decoration: none;
}

.next-button {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-8 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 96px;
  height: 115px;
  text-decoration: none;
  display: flex;
}

.text-7 {
  opacity: .5;
  color: #dbd9cd;
  text-align: center;
  text-transform: uppercase;
  mix-blend-mode: difference;
  margin-top: 0;
  margin-bottom: 12.629px;
  font-family: Fragment Mono, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  text-decoration: none;
}

.div-block {
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: fixed;
  inset: auto 48px 32px;
}

.decor {
  grid-row-gap: 179px;
  mix-blend-mode: difference;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 14px;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: 40% auto 50% 24px;
}

.text-8 {
  color: #bbb;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Fragment Mono, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
  transform: rotate(90deg);
}

.vectors-wrapper-9 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 7px;
  height: 24px;
  text-decoration: none;
  display: flex;
}

.map {
  opacity: .5;
  mix-blend-mode: hard-light;
  border-radius: 0;
  width: 100%;
  margin-left: 0%;
}

.div-block-2 {
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 35%;
  display: flex;
  position: relative;
}

.travel-button {
  grid-column-gap: 110px;
  grid-row-gap: 110px;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  width: 78%;
  margin-top: 23px;
  margin-left: 20%;
  padding: 22px 33px;
  display: flex;
  position: relative;
  overflow: visible;
}

.map-wrap {
  width: 60%;
  display: flex;
  position: relative;
}

.decor-2 {
  box-sizing: border-box;
  grid-row-gap: 0px;
  aspect-ratio: auto;
  object-fit: fill;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  margin-top: 0%;
  margin-right: 24px;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: 45% 0% 0% auto;
  overflow: hidden;
}

.vectors-wrapper-10 {
  mix-blend-mode: exclusion;
  border: 1px solid #bbb;
  justify-content: center;
  align-items: center;
  width: .00000699382px;
  height: 100px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.vectors-wrapper-11 {
  mix-blend-mode: difference;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 10px;
  height: 80px;
  text-decoration: none;
  display: flex;
}

.spline-scene-2 {
  width: 978px;
  position: relative;
}

.image {
  z-index: -1;
  opacity: 0;
  mix-blend-mode: lighten;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0% 0% auto;
}

.code-embed-2 {
  height: 0;
  position: absolute;
}

.block-flex {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: stretch;
  width: 100%;
  height: 600px;
  display: grid;
  position: relative;
  left: -12px;
}

.block-flex.flex-container {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 2700px;
  left: auto;
  overflow: clip;
}

.image-2 {
  box-sizing: border-box;
  aspect-ratio: auto;
  vertical-align: top;
  object-fit: fill;
  flex: 0 auto;
  width: auto;
  max-width: 1200%;
  height: 610px;
  position: relative;
  overflow: visible;
}

.button-right {
  grid-column-gap: 10px;
  -webkit-backdrop-filter: blur(20.4px);
  backdrop-filter: blur(20.4px);
  background-color: #0000001a;
  border: 1.7px solid #de973d80;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  margin-right: 20px;
  padding: 10px;
  text-decoration: none;
  display: flex;
  position: fixed;
  inset: 48% 0% 0% auto;
  box-shadow: 0 7.2px 28.8px #e5ab6140;
}

.text-9 {
  color: #fff;
  letter-spacing: -.015em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Fragment Mono, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.button-left {
  grid-column-gap: 10px;
  -webkit-backdrop-filter: blur(20.4px);
  backdrop-filter: blur(20.4px);
  background-color: #0000001a;
  border: 1.7px solid #de973d80;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  margin-left: 20px;
  padding: 10px;
  text-decoration: none;
  display: flex;
  position: fixed;
  inset: 48% auto 0% 0%;
  box-shadow: 0 7.2px 28.8px #e5ab6140;
}

.text-10 {
  color: #fff;
  letter-spacing: -.015em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Fragment Mono, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.buttonleft {
  grid-column-gap: 10px;
  -webkit-backdrop-filter: blur(20.4px);
  backdrop-filter: blur(20.4px);
  background-color: #0000001a;
  border: 1.7px solid #de973d80;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  margin-left: 20px;
  padding: 10px;
  text-decoration: none;
  display: flex;
  position: fixed;
  inset: 48% auto 0% 0%;
  box-shadow: 0 7.2px 28.8px #e5ab6140;
}

.vectors-wrapper-12 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 19.9904px;
  height: 10.8096px;
  text-decoration: none;
  display: flex;
}

.image-3 {
  width: 400px;
  position: fixed;
  inset: 0% 0% auto;
}

.film-screen {
  z-index: 9;
  opacity: 0;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 2000px;
  height: 100%;
  display: flex;
  position: fixed;
  inset: 0% auto auto 0%;
}

.frame-59893 {
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 980px;
  text-decoration: none;
  display: flex;
}

.frame-59891 {
  grid-column-gap: 100px;
  opacity: .7;
  justify-content: flex-start;
  align-items: center;
  width: 868px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.vectors-wrapper-13 {
  mix-blend-mode: difference;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 25px;
  text-decoration: none;
  display: flex;
}

.frame-59890 {
  grid-column-gap: 48px;
  mix-blend-mode: difference;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-14 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 7px;
  text-decoration: none;
  display: flex;
}

.text-11 {
  color: #bbb;
  letter-spacing: -.2px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Fragment Mono, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.main {
  width: 800px;
  height: 450px;
  position: absolute;
  top: 0;
  left: 0;
}

.frame-59892 {
  opacity: .7;
  justify-content: space-between;
  align-items: center;
  width: 868px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.text-content {
  color: #bbb;
  text-align: center;
  letter-spacing: -.2px;
  text-transform: uppercase;
  mix-blend-mode: difference;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: 12.629px;
  font-family: Fragment Mono, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.overlay {
  z-index: 5;
  opacity: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #000000b3;
  width: 100vw;
  height: 100vh;
  position: fixed;
  inset: 0% auto auto 0%;
}

.image-box {
  border-radius: 0;
  width: 800px;
  height: 450px;
  position: relative;
  overflow: visible;
}

.text-container {
  width: 868px;
  height: 44px;
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 0 3%;
  position: relative;
  overflow: clip;
}

.code-embed-3 {
  height: 0;
}

.button {
  text-align: right;
  cursor: pointer;
  mix-blend-mode: difference;
  background-color: #0000;
  width: 190px;
  height: 48px;
  font-family: Fragment Mono, sans-serif;
  font-size: 13px;
  position: absolute;
  inset: auto 40px 40px auto;
}

.button-out {
  color: #bbb;
  text-align: center;
  mix-blend-mode: difference;
  background-color: #0000;
  width: 200px;
  height: 48px;
  font-family: Fragment Mono, sans-serif;
  font-size: 13px;
  position: relative;
}

.duplicate {
  width: 800px;
  height: 450px;
  position: absolute;
  top: 0;
  left: 0;
}

.container {
  width: 450px;
}

.frame-59896 {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-15 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 88px;
  height: 85px;
  text-decoration: none;
  display: flex;
}

.frame-59895 {
  grid-column-gap: 10px;
  -webkit-backdrop-filter: blur(20.4px);
  backdrop-filter: blur(20.4px);
  background-color: #0000001a;
  border: 1px solid #de973d80;
  border-radius: 30px;
  justify-content: center;
  align-items: center;
  width: 111px;
  height: 41px;
  padding: 10px;
  text-decoration: none;
  display: flex;
  box-shadow: 0 7.2px 28.8px #e5ab6140;
}

.text-13 {
  color: #dbd9cd;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Fragment Mono, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.music-btn {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
  position: fixed;
  inset: auto 40px 12px auto;
}

.vectors-wrapper-16 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 88px;
  height: 95px;
  text-decoration: none;
  display: flex;
  position: relative;
  right: -6px;
}

.frame-59898 {
  grid-column-gap: 10px;
  -webkit-backdrop-filter: blur(20.4px);
  backdrop-filter: blur(20.4px);
  cursor: pointer;
  background-color: #0000001a;
  border: 1px solid #de973d80;
  border-radius: 30px;
  justify-content: center;
  align-items: center;
  width: 111px;
  height: 41px;
  padding: 10px 6px;
  text-decoration: none;
  display: flex;
  box-shadow: 0 7.2px 28.8px #e5ab6140;
}

.text-14 {
  color: #dbd9cd;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Fragment Mono, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.code-embed-4 {
  height: 0;
}

.loader-overlay {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #000000e0;
  border: 1px #000000b3;
  width: 100vw;
  height: 100vh;
  position: fixed;
  inset: 0% auto auto 0%;
}

.loader {
  z-index: 12;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  opacity: 0;
  cursor: none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0% auto auto 0%;
}

.text-block {
  color: #dbd9cd;
  text-align: center;
  mix-blend-mode: difference;
  width: 200px;
  font-family: Fragment Mono, sans-serif;
  font-size: 12px;
  line-height: 16px;
}

.body-2 {
  background-color: #c2e619;
  display: block;
  overflow: clip;
}

.nav {
  grid-column-gap: 32px;
  mix-blend-mode: difference;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1422px;
  padding: 2px 40px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.text-15 {
  color: #fff;
  letter-spacing: -.01em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Instrumentsans Wdth Wght;
  font-size: 16px;
  font-weight: 400;
  line-height: 125%;
  text-decoration: none;
}

.group-5 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 4.78835px;
  height: 63.2929px;
  text-decoration: none;
  display: flex;
}

.text-16 {
  color: #fff;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Instrumentsans Wdth Wght;
  font-size: 16px;
  font-weight: 400;
  line-height: 125%;
  text-decoration: none;
}

.group-276 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1422px;
  height: 74.9871px;
  text-decoration: none;
  display: flex;
  position: absolute;
  top: -6px;
  left: 0;
}

.section-2 {
  justify-content: center;
  align-items: center;
  height: 12vh;
  padding-top: 32px;
  padding-bottom: 32px;
  display: flex;
  position: relative;
}

.nav-2 {
  z-index: 12;
  grid-column-gap: 32px;
  mix-blend-mode: difference;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1422px;
  padding: 2px 40px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.text-17 {
  color: #fff;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Instrumentsans Wdth Wght;
  font-size: 14px;
  font-weight: 400;
  line-height: 125%;
  text-decoration: none;
  position: static;
}

.group-277 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 3.79px;
  height: 63.2929px;
  text-decoration: none;
  display: flex;
}

.group-278 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1420.01px;
  height: 67.987px;
  text-decoration: none;
  display: flex;
  position: absolute;
  top: -.999999px;
  left: .995252px;
}

.section-3 {
  z-index: 2;
  background-color: #0000;
  height: 88vh;
  display: block;
  position: relative;
  overflow: clip;
}

.display {
  width: auto;
  height: 100%;
  position: relative;
}

.nav-3 {
  grid-column-gap: 28px;
  mix-blend-mode: difference;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1422px;
  padding: 2px 32px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.text-18 {
  color: #fff;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Instrumentsans Wdth Wght;
  font-size: 13px;
  font-weight: 400;
  line-height: 125%;
  text-decoration: none;
}

.group-279 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 3px;
  height: 49.2929px;
  text-decoration: none;
  display: flex;
}

.group-280 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1420.21px;
  height: 56.1764px;
  text-decoration: none;
  display: flex;
  position: absolute;
  top: -1px;
  left: 1.85504px;
}

.hidden {
  display: none;
}

.button-circle {
  z-index: 25;
  grid-column-gap: 10px;
  outline-offset: 0px;
  cursor: pointer;
  background-color: #ffffffdb;
  border: 0 #ffffff80;
  border-radius: 90px;
  outline: 6px solid #ffffff80;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  text-decoration: none;
  display: flex;
  position: absolute;
  bottom: auto;
  left: auto;
}

.arrow-right {
  mix-blend-mode: exclusion;
}

.arrow-down {
  object-fit: cover;
}

.div-block-3 {
  justify-content: flex-start;
  align-items: flex-end;
  width: 40%;
  height: 250px;
  padding-bottom: 104px;
  padding-left: 104px;
  display: flex;
  position: absolute;
  inset: auto auto 0% 0%;
}

.text-block-2 {
  color: #fff;
  mix-blend-mode: difference;
  font-family: Instrumentsans Wdth Wght;
  font-size: 28px;
  line-height: 34px;
}

.text-19 {
  grid-column-gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 688px;
  padding: 10px 28px;
  text-decoration: none;
  display: flex;
  position: absolute;
}

.text-20 {
  -webkit-backdrop-filter: blur();
  backdrop-filter: blur();
  color: #fff;
  letter-spacing: -.036em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 142px;
  font-weight: 400;
  line-height: 104%;
  text-decoration: none;
  position: absolute;
  top: -133px;
  left: 0;
}

.text-21 {
  color: #fff;
  letter-spacing: -.03em;
  mix-blend-mode: difference;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Instrumentsans Wdth Wght;
  font-size: 20px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
  position: relative;
}

.text-22 {
  grid-column-gap: 10px;
  mix-blend-mode: normal;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 688px;
  padding: 10px 28px 104px 104px;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: auto auto 0% 0%;
}

.spring {
  object-fit: cover;
  position: absolute;
  top: -128.503px;
  left: 1.18703px;
}

.div-block-4 {
  mix-blend-mode: difference;
  position: relative;
}

.text-23 {
  grid-column-gap: 10px;
  mix-blend-mode: difference;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 688px;
  padding: 10px 28px;
  font-family: Instrumentsans Wdth Wght;
  text-decoration: none;
  display: flex;
  position: relative;
  inset: auto auto 0% 0%;
}

.text-24 {
  color: #fff;
  letter-spacing: -.03em;
  mix-blend-mode: normal;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Instrumentsans Wdth Wght;
  font-size: 24px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
  position: static;
}

.frame-87 {
  z-index: 24;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 688px;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: auto auto 0% 0%;
}

.spring-2 {
  object-fit: cover;
}

.text-25 {
  grid-column-gap: 10px;
  mix-blend-mode: difference;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 28px;
  text-decoration: none;
  display: flex;
}

.text-26 {
  color: #fff;
  letter-spacing: -.03em;
  mix-blend-mode: normal;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Instrumentsans Wdth Wght;
  font-size: 24px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
  position: static;
}

.text-27 {
  grid-column-gap: 10px;
  mix-blend-mode: difference;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 28px;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: auto auto 0% 0%;
}

.text-28 {
  color: #fff;
  letter-spacing: -.03em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.frame-59899 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 688px;
  margin-bottom: 0;
  padding-bottom: 70px;
  padding-left: 48px;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: auto auto 0% 0%;
}

.text-29 {
  grid-column-gap: 10px;
  mix-blend-mode: difference;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 28px;
  text-decoration: none;
  display: flex;
}

.text-30 {
  color: #fff;
  letter-spacing: -.03em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Instrumentsans Wdth Wght;
  font-size: 22px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
  position: relative;
  top: -30px;
}

.frame-59900 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 688px;
  height: 33%;
  padding-bottom: 80px;
  padding-left: 48px;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: auto auto 0% 0%;
}

.rectangle-3 {
  filter: blur(20px);
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 688px;
  height: 133px;
  text-decoration: none;
  display: flex;
  position: absolute;
  top: 109.503px;
  left: 0;
}

.spring-3 {
  z-index: 22;
  object-fit: cover;
  position: relative;
}

.text-31 {
  z-index: 24;
  grid-column-gap: 10px;
  mix-blend-mode: difference;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 28px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.text-32 {
  z-index: 24;
  color: #fff;
  letter-spacing: -.03em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Instrumentsans Wdth Wght;
  font-size: 18px;
  font-weight: 400;
  line-height: 116%;
  text-decoration: none;
  position: relative;
  top: -20px;
  left: 10px;
}

.frame-60207 {
  grid-column-gap: 20px;
  flex: 0 auto;
  justify-content: space-between;
  align-self: center;
  align-items: flex-end;
  width: 100%;
  padding-left: 72px;
  padding-right: 72px;
  text-decoration: none;
  display: flex;
}

.frame-60208 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 4px;
  padding-bottom: 4px;
  text-decoration: none;
  display: flex;
}

.text-228 {
  color: #14191d;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.frame-60209 {
  grid-column-gap: 12px;
  flex: 0 auto;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.preloader {
  z-index: 9999;
  object-fit: fill;
  background-color: #e1f655;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  inset: 0%;
}

.vectors-wrapper-200 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 4px;
  height: 16px;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-175 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 5px;
  height: 5px;
  text-decoration: none;
  display: flex;
}

.frame-60210 {
  grid-column-gap: 20px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-81 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 21px;
  height: 20.9991px;
  font-size: 15px;
  line-height: 21px;
  text-decoration: none;
  display: flex;
}

.frame-59804 {
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 88px;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-80 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 5.58249px;
  height: 21.8648px;
  text-decoration: none;
  display: flex;
}

.frame-59800 {
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  padding-top: 32px;
  padding-left: 5vw;
  padding-right: 5vw;
  text-decoration: none;
  display: flex;
  position: fixed;
}

.navbar {
  width: 100%;
  transition: transform .4s ease-in-out;
  position: fixed;
  transform: translate(0);
}

.text-71 {
  color: #fff;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.text-71.textanimate {
  letter-spacing: .04em;
  padding-top: .2em;
  font-size: .875rem;
  line-height: 100%;
  display: block;
}

.frame-59803 {
  grid-column-gap: 32px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.frame-59897 {
  grid-column-gap: 8px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.text-229 {
  color: #e1f655;
  letter-spacing: .2px;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 0;
  margin-bottom: 0;
  font-size: .875rem;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.text-229:hover {
  text-decoration: underline;
}

._4916162n-12304454w {
  color: #e1f655;
  text-align: right;
  letter-spacing: .03em;
  text-transform: uppercase;
  width: 120px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 10px;
  font-weight: 300;
  line-height: 120%;
  text-decoration: none;
}

.cross-3 {
  object-fit: cover;
}

.rectangle-298 {
  background-color: #d9d9d9;
  background-image: url('../images/Rectangle-297.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 200px;
  height: 200px;
  min-height: 200px;
}

.frame-60214 {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  max-width: 400px;
  text-decoration: none;
  display: flex;
}

.hero-section {
  z-index: 11;
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  mix-blend-mode: normal;
  object-fit: fill;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  min-height: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 132px 32px 3vw;
  display: flex;
  position: relative;
  overflow: hidden;
}

.frame-style {
  object-fit: cover;
  overflow: hidden;
}

.text-231 {
  color: #fff;
  letter-spacing: -.035em;
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.image-4 {
  z-index: -1;
  opacity: .5;
  mix-blend-mode: color-dodge;
  width: 100%;
  max-width: 100%;
  display: block;
  position: absolute;
  inset: 10% 0% 0%;
}

.frame-60217 {
  grid-column-gap: 48px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 10px;
  font-weight: 300;
  text-decoration: none;
  display: flex;
}

.frame-60211 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.scroll-down {
  color: #e1f655;
  text-align: right;
  letter-spacing: .03em;
  text-transform: uppercase;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 120%;
  text-decoration: underline;
}

.code-embed-5 {
  display: flex;
}

.frame-60218 {
  grid-column-gap: 36px;
  grid-row-gap: 36px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  height: 100%;
  text-decoration: none;
  display: flex;
}

.frame-60212 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-230 {
  color: #e1f655;
  text-align: right;
  letter-spacing: .03em;
  text-transform: uppercase;
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 120%;
  text-decoration: none;
  display: flex;
  position: static;
}

.text-232 {
  color: #fff;
  text-align: right;
  letter-spacing: 0;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.frame-60213 {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  padding-top: 12px;
  text-decoration: none;
  display: flex;
}

.text-233 {
  color: #e1f655;
  text-align: justify;
  letter-spacing: .03em;
  text-transform: uppercase;
  width: 270px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 10px;
  font-weight: 300;
  line-height: 120%;
  text-decoration: none;
}

.frame-59805 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 89px;
  font-size: 11px;
  text-decoration: none;
  display: flex;
}

.frame-60216 {
  object-fit: cover;
  position: absolute;
  top: 10px;
  left: 0;
}

.lets-embark-on-11 {
  color: #fff;
  letter-spacing: -.035em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Prodigysans, Arial, sans-serif;
  font-size: 48px;
  font-style: italic;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.lets-embark-on-10 {
  color: #fff;
  letter-spacing: -.035em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.text-234 {
  color: #e1f655;
  text-align: right;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 10px;
  font-weight: 300;
  line-height: 120%;
  text-decoration: none;
}

.frame-60215 {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
  position: relative;
}

.bottom-bar {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1416px;
  text-decoration: none;
  display: flex;
}

.image-9 {
  z-index: 0;
  width: 80%;
  position: relative;
  inset: 0% auto 0% 0%;
}

.frame-60105 {
  grid-column-gap: 8px;
  mix-blend-mode: difference;
  background-color: #0000;
  border: .6px solid #ffffff73;
  border-top-color: #ffffff59;
  border-radius: 120px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 21px 32px 20px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.frame-60105:hover {
  -webkit-text-fill-color: inherit;
  mix-blend-mode: difference;
  background-color: #0000;
  background-clip: border-box;
}

.vectors-wrapper-109 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 2.5vw;
  height: auto;
  margin-top: 6px;
  text-decoration: none;
  display: flex;
  position: absolute;
  top: 3px;
  left: 0;
}

.text-108 {
  opacity: 1;
  color: #e1f655;
  text-align: right;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 300;
  line-height: 110%;
  text-decoration: none;
}

.texture {
  z-index: 1;
  opacity: .75;
  mix-blend-mode: soft-light;
  width: 70%;
  height: 80%;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.hidden-img {
  z-index: 2;
  opacity: 0;
  width: 100px;
  position: absolute;
  left: 40%;
}

.hidden-img:hover {
  opacity: 1;
}

.frame-59971 {
  grid-column-gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 76%;
  text-decoration: none;
  display: flex;
  position: relative;
}

.hello-my-name-is-yifan-i-enjoy-working-on-everything-digital-and-interactive-my-goal-for-each-design-project-is-to-create-one-of-a-kind-user-experience-that-is-both-memorable-and-delightful-1 {
  color: #fff;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.4vw;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.hello-my-name-is-yifan-i-enjoy-working-on-everything-digital-and-interactive-my-goal-for-each-design-project-is-to-create-one-of-a-kind-user-experience-that-is-both-memorable-and-delightful-1.italic-char {
  color: #fff;
  font-size: 3.4vw;
  line-height: 110%;
}

.service-row {
  grid-column-gap: 20px;
  border: 0 solid #fff;
  border-top: .6px solid #fff3;
  border-radius: 0;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 36px;
  padding-bottom: 36px;
  text-decoration: none;
  transition: padding .4s;
  display: flex;
  position: relative;
}

.service-row:hover {
  border-top-width: .6px;
  border-top-color: #ffffff80;
  border-bottom-color: #ffffff73;
  padding-left: 20px;
  padding-right: 20px;
}

.vectors-wrapper-171 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 3.58px;
  height: 14.0217px;
  text-decoration: none;
  display: flex;
}

.frame-60102 {
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-106 {
  color: #fff;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.text-106.textanimate-hover {
  color: #fff;
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.67vw;
}

.error-5bf47ab8-7fa0-56c2-925d-09a6f520625b {
  color: #fff;
  letter-spacing: -.04em;
  -webkit-text-stroke-color: #14191d;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 40px;
  font-size: 3.4vw;
  font-weight: 400;
  line-height: 115%;
  text-decoration: none;
}

.error-5bf47ab8-7fa0-56c2-925d-09a6f520625b.opacity {
  padding-bottom: 0;
}

.code-embed-6 {
  mix-blend-mode: difference;
  transform: rotate(0);
}

.section-11 {
  grid-column-gap: 130px;
  grid-row-gap: 130px;
  background-color: #0000;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  justify-content: center;
  place-items: flex-start stretch;
  padding: 180px 32px 140px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.frame-59975 {
  grid-row-gap: 64px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 58%;
  text-decoration: none;
  display: flex;
}

.cross {
  opacity: .56;
  object-fit: cover;
}

.text-107 {
  opacity: 1;
  color: #e1f655;
  text-align: right;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 300;
  line-height: 16px;
  text-decoration: none;
}

.frame-59976 {
  grid-row-gap: 0px;
  border-bottom: .6px solid #fff3;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
  position: relative;
}

.section-decor {
  z-index: 0;
  width: 75%;
  position: absolute;
  inset: auto auto 2% 0%;
}

.image-8 {
  position: relative;
  inset: auto auto 0% 0%;
}

.button_text {
  color: #fff;
  text-align: left;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.frame-60103 {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 8px;
  padding-right: 8px;
  text-decoration: none;
  display: flex;
}

.frame-59970 {
  z-index: 3;
  grid-row-gap: 88px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
  position: relative;
}

.frame-60104 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 4px;
  padding-bottom: 4px;
  text-decoration: none;
  display: flex;
}

.text-196 {
  color: #e1f655;
  text-align: right;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.text-105 {
  opacity: .6;
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 300;
  line-height: 16px;
  text-decoration: none;
}

.text-179 {
  color: #e1f655;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 300;
  line-height: 110%;
  text-decoration: none;
}

.frame-59972 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
  position: relative;
}

.i-have-extensive-experience-designing-web-and-mobile-products-across-various-industries-i-enjoy-working-with-different-clients-and-learning-about-how-i-can-use-design-to-help-their-businesses-check-out-some-of-the-projects-ive-had-the-pleasure-of-working-on {
  opacity: 1;
  color: #fff;
  letter-spacing: 0;
  width: 71%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
  display: block;
  position: relative;
}

.rectangle-285 {
  object-fit: cover;
}

.img-div {
  width: 23%;
  position: absolute;
  inset: auto auto 0% 0%;
}

.frame-59979 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.frame-59978 {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 4px;
  padding-bottom: 4px;
  text-decoration: none;
  display: flex;
}

.frame-60140 {
  grid-column-gap: 20px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-end;
  text-decoration: none;
  display: flex;
}

.my-name-is-yifan-1 {
  color: #fff;
  letter-spacing: -.02em;
  text-transform: none;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Prodigysans, Arial, sans-serif;
  font-size: 6vw;
  font-style: italic;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.main-text {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}

.my-name-is-yifan-0 {
  box-sizing: border-box;
  aspect-ratio: auto;
  color: #fff;
  letter-spacing: -.04em;
  text-transform: none;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  vertical-align: baseline;
  object-fit: fill;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 6vw;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
  display: inline;
  position: relative;
  overflow: visible;
}

.vectors-wrapper-199 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 5.2vw;
  height: auto;
  text-decoration: none;
  display: flex;
}

.text-227 {
  color: #e1f655;
  letter-spacing: .06em;
  text-transform: uppercase;
  width: 80%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.text-227.textanimate {
  text-align: justify;
  width: 73%;
}

.frame-60205 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 4px;
  padding-bottom: 4px;
  text-decoration: none;
  display: flex;
}

.frame-60203 {
  justify-content: space-between;
  align-items: flex-start;
  width: auto;
  margin-left: 5vw;
  margin-right: 5vw;
  padding-bottom: 80px;
  padding-left: 0;
  text-decoration: none;
  display: flex;
}

.div-block-6 {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding-left: 72px;
  padding-right: 72px;
  display: flex;
  position: relative;
}

.error-c707a555-e604-dcca-1bb2-77af4bf4b910 {
  color: #fff;
  width: 59%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.div-block-5 {
  z-index: 3;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  mix-blend-mode: difference;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.frame-60123 {
  grid-row-gap: 50px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 58%;
  text-decoration: none;
  display: flex;
}

.section-13 {
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  background-color: #0000;
  flex-flow: column;
  padding: 60px 32px 128px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.rectangle-297 {
  object-fit: cover;
}

.text-184 {
  color: #fff;
  letter-spacing: -.04em;
  text-transform: uppercase;
  mix-blend-mode: difference;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 6vw;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.frame-60120 {
  object-fit: cover;
  width: 2.6vw;
  height: auto;
}

.vectors-wrapper-164 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 74px;
  height: 74px;
  text-decoration: none;
  display: flex;
}

.frame-60119 {
  grid-column-gap: 29px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: visible;
}

.text-226 {
  color: #e1f655;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.text-wrapper {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding-left: 5vw;
  padding-right: 5vw;
  display: flex;
}

.frame-60204 {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 8px;
  padding-right: 8px;
  text-decoration: none;
  display: flex;
}

.frame-60099 {
  justify-content: space-between;
  align-items: flex-start;
  width: 58%;
  text-decoration: none;
  display: flex;
}

.frame-60206 {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 15px;
  text-decoration: none;
  display: flex;
}

.text-193 {
  color: #fff;
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 5.2vw;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.vectors-wrapper-170 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 3.5vw;
  height: auto;
  text-decoration: none;
  display: flex;
}

.text-194 {
  color: #fff;
  text-align: center;
  width: 68%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.frame-60219 {
  grid-column-gap: 8px;
  mix-blend-mode: difference;
  background-color: #0000;
  border: .6px solid #ffffff73;
  border-top-color: #ffffff59;
  border-radius: 120px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 21px 32px 20px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.frame-60219:hover {
  -webkit-text-fill-color: inherit;
  mix-blend-mode: difference;
  background-color: #0000;
  background-clip: border-box;
}

.frame-60088 {
  z-index: 3;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 24px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.frame-60198 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.frame-60192 {
  grid-column-gap: 20px;
  flex: 0 auto;
  justify-content: flex-start;
  align-self: center;
  align-items: flex-end;
  text-decoration: none;
  display: flex;
}

.rectangle-286 {
  object-fit: cover;
}

.vectors-wrapper-195 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 3.58px;
  height: 14.0217px;
  text-decoration: none;
  display: flex;
}

.frame-60193 {
  opacity: .56;
  object-fit: cover;
}

.frame-60138 {
  grid-column-gap: 10px;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.code-embed-7 {
  mix-blend-mode: difference;
  transform: rotate(0);
}

.frame-60139 {
  grid-column-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.image-284 {
  object-fit: cover;
  border-radius: .83vw;
  width: 6.25vw;
  height: auto;
}

.frame-60134 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 4px;
  padding-bottom: 4px;
  text-decoration: none;
  display: flex;
}

.frame-60191 {
  z-index: 3;
  border-top: .6px #fff3;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  text-decoration: none;
  display: flex;
  position: relative;
}

.vectors-wrapper-169 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 1.68vw;
  height: auto;
  text-decoration: none;
  display: flex;
}

.frame-60089 {
  opacity: .56;
  object-fit: cover;
}

.frame-60135 {
  grid-row-gap: 32px;
  opacity: 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.div-block-10 {
  border-top: .6px solid #ffffff40;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 1px;
  margin-left: 5vw;
  margin-right: 5vw;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  position: relative;
}

.scrollable-content {
  z-index: 10;
  grid-column-gap: 88px;
  grid-row-gap: 88px;
  flex-flow: column;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 45vh;
}

.frame-60136 {
  grid-column-gap: 64px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.frame-60137 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.frame-60199 {
  grid-column-gap: 20px;
  border: 0 solid #ffffff4d;
  border-top: .6px #ffffff4d;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
  text-decoration: none;
  display: flex;
}

.text-222 {
  color: #e1f655;
  text-align: right;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.video-headline {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  top: 0;
}

.text-224 {
  color: #fff;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.38vw;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.frame-60132 {
  z-index: 3;
  grid-column-gap: 40px;
  flex: 0 auto;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
  position: relative;
}

.videobox {
  box-sizing: border-box;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 35vh;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  position: fixed;
  inset: 35px 25% 35%;
  overflow: hidden;
}

.content-video {
  z-index: 11;
  grid-column-gap: 88px;
  grid-row-gap: 88px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 5vw 88px;
  transition: all 1s;
  display: flex;
  position: relative;
}

.cases-video {
  width: auto;
}

.frame-60133 {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 149px;
  padding-left: 8px;
  padding-right: 8px;
  text-decoration: none;
  display: flex;
}

.check-out-14 {
  color: #fff;
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 5.2vw;
  font-style: normal;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.blank-content {
  z-index: 1;
  width: 100%;
  height: 120vh;
  position: relative;
}

.text-192 {
  color: #fff;
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 5.2vw;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.image-285 {
  z-index: 0;
  opacity: .7;
  mix-blend-mode: overlay;
  width: 100%;
  padding-top: 10%;
  position: absolute;
}

.contentvideo {
  grid-row-gap: 0px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 82vh;
  min-height: auto;
  padding-left: 0;
  padding-right: 0;
  text-decoration: none;
  display: flex;
  position: sticky;
  top: 12vh;
}

.text-195 {
  color: #c7f566;
  text-align: right;
  letter-spacing: .03em;
  text-transform: uppercase;
  width: 149px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.principles-at-the-core-of-my-design-philosophy-0 {
  color: #14191d;
  letter-spacing: -.045em;
  -webkit-text-stroke-color: #14191d;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.4vw;
  font-weight: 400;
  line-height: 113%;
  text-decoration: none;
}

.frame-60160 {
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-220 {
  color: #14191d;
  text-align: center;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.div-block-8 {
  width: 100%;
}

.frame-60151 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 4px;
  padding-bottom: 4px;
  text-decoration: none;
  display: flex;
}

.frame-60153 {
  grid-column-gap: 32px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-205 {
  color: #14191d;
  letter-spacing: -.005em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.vectors-wrapper-177 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  text-decoration: none;
  display: flex;
}

.frame-60156 {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-right: 40px;
  text-decoration: none;
  display: flex;
}

.frame-60158 {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 4px;
  padding-bottom: 4px;
  text-decoration: none;
  display: flex;
}

.frame-60147 {
  grid-row-gap: 80px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-111 {
  color: #d3e467;
  letter-spacing: -.04em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.4vw;
  font-weight: 400;
  line-height: 113%;
  text-decoration: none;
}

.frame-60152 {
  grid-row-gap: 64px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 933px;
  text-decoration: none;
  display: flex;
}

.frame-60145 {
  grid-column-gap: 20px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-end;
  text-decoration: none;
  display: flex;
}

.error-a16cd536-7a25-1313-55d1-9ab88331bf1f {
  color: #14191d;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.frame-60155 {
  grid-column-gap: 1px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-201 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 5px;
  height: 5px;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-174 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 3.58px;
  height: 14.0217px;
  text-decoration: none;
  display: flex;
}

.frame-60154 {
  grid-row-gap: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-199 {
  color: #14191d;
  text-align: right;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.vectors-wrapper-176 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 5.58249px;
  height: 21.8648px;
  text-decoration: none;
  display: flex;
}

.principles-at-the-core-of-my-design-philosophy-1 {
  color: #14191d;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.4vw;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.frame-60189 {
  grid-column-gap: 8px;
  background-color: #0000;
  border: .6px solid #14191d;
  border-radius: 160px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 21px 32px 20px;
  text-decoration: none;
  display: flex;
}

.frame-60149 {
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 42%;
  max-width: 692px;
  text-decoration: none;
  display: flex;
}

.text-204 {
  color: #14191d;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.67vw;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.frame-60146 {
  grid-column-gap: 40px;
  flex: 0 auto;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.frame-60157 {
  grid-column-gap: 12px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.text-203 {
  color: #14191d;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  text-decoration: none;
}

.frame-60161 {
  object-fit: cover;
}

.frame-60150 {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 8px;
  padding-right: 8px;
  text-decoration: none;
  display: flex;
}

.frame-60148 {
  grid-column-gap: 80px;
  flex: 0 auto;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-201 {
  border-style: none;
  border-width: undefinedpx;
  color: #14191d;
  border-color: #ffffff80;
  width: 85%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.text-202 {
  color: #14191d;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.section-7 {
  z-index: 11;
  grid-column-gap: 104px;
  grid-row-gap: 104px;
  background-color: #e1f655;
  flex-flow: column;
  justify-content: center;
  align-items: flex-end;
  padding: 100px 32px;
  display: flex;
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}

.frame-60004 {
  grid-column-gap: 104px;
  border: 0 solid #ffffff80;
  border-top: .6px solid #fff3;
  border-bottom-color: #ffffff59;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 34px;
  padding-bottom: 34px;
  padding-right: 16px;
  text-decoration: none;
  transition: all .4s;
  display: flex;
}

.frame-60004:hover {
  grid-column-gap: 68px;
  background-color: #0000;
  border-top-color: #fff;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 20px;
  padding-right: 32px;
}

.frame-60220 {
  grid-column-gap: 8px;
  mix-blend-mode: difference;
  background-color: #0000;
  border: .6px solid #ffffff73;
  border-top-color: #ffffff59;
  border-radius: 120px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 21px 32px 20px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.frame-60220:hover {
  -webkit-text-fill-color: inherit;
  mix-blend-mode: difference;
  background-color: #0000;
  background-clip: border-box;
}

.frame-60003 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-121 {
  color: #fff;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.text-121.textanimate-hover {
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.67vw;
}

.frame-60001 {
  grid-column-gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
  position: relative;
}

.vectors-wrapper-122 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 46px;
  text-decoration: none;
  display: flex;
  position: absolute;
  top: 2px;
  left: 0;
}

.frame-60002 {
  grid-row-gap: 64px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.section-9 {
  z-index: 11;
  grid-column-gap: 72px;
  grid-row-gap: 72px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 90px 5vw;
  display: flex;
  position: relative;
}

.text-120 {
  opacity: .65;
  color: #fff;
  -webkit-text-stroke-color: white;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 300;
  line-height: 16px;
  text-decoration: none;
}

.vectors-wrapper-179 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 3.58px;
  height: 14.0217px;
  text-decoration: none;
  display: flex;
}

.frame-59726 {
  grid-column-gap: 104px;
  border: .6px solid #ffffff59;
  border-left: 0 solid #ffffff80;
  border-right: 0 solid #ffffff80;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 36px;
  padding-bottom: 36px;
  padding-right: 16px;
  text-decoration: none;
  transition: all .4s;
  display: flex;
}

.frame-59726:hover {
  grid-column-gap: 68px;
  padding-left: 20px;
  padding-right: 36px;
}

.frame-59997 {
  grid-column-gap: 9%;
  flex: 0 auto;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.frame-60163 {
  grid-column-gap: 20px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-end;
  text-decoration: none;
  display: flex;
}

.text-207 {
  color: #e1f655;
  text-align: right;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.frame-60162 {
  grid-column-gap: 80px;
  flex: 0 auto;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.frame-60000 {
  grid-row-gap: 96px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 75%;
  text-decoration: none;
  display: flex;
}

.error-c6d44742-94a3-85c2-2202-25579a1a79a5 {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.frame-60221 {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 8px;
  padding-right: 8px;
  text-decoration: none;
  display: flex;
}

.frame-60222 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 4px;
  padding-bottom: 4px;
  text-decoration: none;
  display: flex;
}

.error-c6d44742-94a3-85c2-2202-25579a1a799d {
  color: #fff;
  letter-spacing: -.045em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.4vw;
  font-weight: 400;
  line-height: 113%;
  text-decoration: none;
}

.text-235 {
  color: #e1f655;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 300;
  line-height: 110%;
  text-decoration: none;
}

.the-design-process-lies-at-the-heart-of-every-project-and-i-believe-that-a-solid-process-serves-as-the-cornerstone-for-unlocking-each-projects-full-potential-by-fostering-collaboration-creativity-and-clarity-from-conception-to-execution-1 {
  color: #fff;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.4vw;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.vectors-wrapper-180 {
  opacity: 0;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 86.8889px;
  height: 68px;
  text-decoration: none;
  display: flex;
}

.frame-60005 {
  grid-column-gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 258px;
  text-decoration: none;
  display: flex;
}

.svg-code {
  width: auto;
  transform: rotate(-45deg);
}

.frame-60164 {
  z-index: 2;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  text-decoration: none;
  display: flex;
  position: relative;
}

.frame-60197 {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.frame-60070 {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.div-block-12 {
  background-color: #e1f655;
  border-radius: 40px;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  padding-top: 2px;
  padding-left: 2px;
  display: flex;
}

.vectors-wrapper-202 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 5.2vw;
  height: auto;
  text-decoration: none;
  display: flex;
}

.frame-60175 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.frame-60196 {
  grid-column-gap: 16px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.text-213 {
  color: #111518;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.text-211 {
  color: #e1f655;
  text-align: right;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.text-211.textanimate {
  max-width: 80px;
}

.let-s-embark-3 {
  color: #fff;
  text-align: center;
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 5.6vw;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.text-219 {
  color: #111518;
  text-align: justify;
  letter-spacing: .03em;
  text-transform: uppercase;
  width: 40%;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 4px;
  font-size: 11px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.text-219.textanimate {
  width: 45%;
}

.frame-60181 {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 25%;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-196 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 1.94vw;
  height: auto;
  text-decoration: none;
  display: flex;
}

.frame-60174 {
  grid-row-gap: 28px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 2.7vw;
  text-decoration: none;
  display: flex;
}

.frame-60173 {
  grid-column-gap: 8px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.frame-60172 {
  grid-column-gap: 20px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.frame-60170 {
  z-index: 2;
  grid-column-gap: 0px;
  background-color: #fff;
  border-radius: 0;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  width: 71%;
  min-width: 880px;
  padding: 0;
  text-decoration: none;
  display: flex;
  position: relative;
}

.text-212 {
  color: #fff;
  text-align: center;
  width: 54%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.vectors-wrapper-192 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 4.6vw;
  height: auto;
  text-decoration: none;
  display: flex;
}

._49-1616-2n-123-0445-4w-2 {
  color: #111518;
  text-align: right;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.frame-60184 {
  grid-row-gap: 50px;
  object-fit: fill;
  flex-flow: column;
  flex: 0 auto;
  justify-content: space-between;
  align-self: stretch;
  align-items: flex-end;
  width: 35%;
  height: 100%;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-184 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 5.58249px;
  height: 21.8648px;
  text-decoration: none;
  display: flex;
}

.text-214 {
  color: #111518;
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 58px;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.let-s-collaborate-1 {
  color: #111518;
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4.7vw;
  font-style: normal;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.frame-60180 {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 25%;
  height: auto;
  text-decoration: none;
  display: flex;
}

.frame-60179 {
  grid-column-gap: 12px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.union2 {
  object-fit: cover;
}

.vectors-wrapper-197 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 3.5vw;
  height: auto;
  text-decoration: none;
  display: flex;
}

.frame-60183 {
  grid-column-gap: 7px;
  background-color: #e1f655;
  border-radius: 70px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  text-decoration: none;
  display: flex;
}

.text-218 {
  color: #2c243d;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.frame-60186 {
  grid-column-gap: 4px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.frame-60188 {
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 89px;
  text-decoration: none;
  display: flex;
}

.div-block-13 {
  object-fit: fill;
  width: .6px;
  height: 100%;
  display: block;
}

.span {
  font-size: 5.6vw;
}

.frame-60195 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-187 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 5px;
  height: 5px;
  text-decoration: none;
  display: flex;
}

.frame-60165 {
  grid-column-gap: 20px;
  flex: 0 auto;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.frame-60182 {
  grid-column-gap: 20px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  padding-top: 16px;
  text-decoration: none;
  display: flex;
}

.text-216 {
  opacity: .5;
  color: #111518;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.text-217 {
  color: #111518;
  letter-spacing: -.01em;
  text-transform: none;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.decor-2-2 {
  width: 8.1vw;
  height: auto;
}

.section-10 {
  z-index: 11;
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 120px 32px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.let-s-collaborate-0 {
  color: #111518;
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4.7vw;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.text-223 {
  color: #fff;
  text-align: center;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 5.6vw;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.frame-60194 {
  grid-column-gap: 64px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.frame-60185 {
  justify-content: space-between;
  align-items: flex-start;
  width: 80%;
  text-decoration: none;
  display: flex;
}

.let-s-embark-0 {
  color: #fff;
  text-align: center;
  letter-spacing: -.04em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 5.6vw;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.frame-60171 {
  grid-row-gap: 3.3vw;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 65%;
  min-width: 490px;
  height: 100%;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-189 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 12.8757px;
  height: 15.9999px;
  text-decoration: none;
  display: flex;
}

.frame-60178 {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 25%;
  text-decoration: none;
  display: flex;
}

.text-208 {
  color: #e1f655;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.text-208.textanimate {
  max-width: 80px;
}

.vectors-wrapper-191 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 3vw;
  height: 3vw;
  text-decoration: none;
  display: flex;
}

.frame-60187 {
  grid-column-gap: 16px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding-top: 1px;
  padding-bottom: 1px;
  text-decoration: none;
  display: flex;
}

.frame-60177 {
  grid-column-gap: 24px;
  border-top: .6px solid #11151829;
  border-bottom: .6px solid #11151829;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 1.38vw;
  padding-bottom: 1.38vw;
  text-decoration: none;
  display: flex;
}

.let-s-embark-1 {
  color: #fff;
  text-align: center;
  letter-spacing: -.04em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 5.6vw;
  font-style: normal;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.body-3 {
  background-color: #4b20d5;
}

.background-video {
  z-index: -2;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
}

.frame-60223 {
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  padding-top: 32px;
  padding-left: 32px;
  padding-right: 32px;
  text-decoration: none;
  display: flex;
}

.frame-60059 {
  grid-column-gap: 16px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.text-236 {
  color: #fff;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.frame-60058 {
  grid-column-gap: 8px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.union {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: 14.9994px;
  text-decoration: none;
  display: flex;
}

.text-237 {
  color: #fff;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.frame-60224 {
  grid-column-gap: 96px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.nav-links {
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: Robotomono, Arial, sans-serif;
  text-decoration: none;
  display: flex;
}

.link-item {
  grid-column-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.link-text {
  color: #e1f655;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 100%;
  text-decoration: none;
}

.frame-60055 {
  grid-column-gap: 8px;
  opacity: .6;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.frame-60060 {
  grid-column-gap: 7px;
  background-color: #e1f655;
  border-radius: 70px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  text-decoration: none;
  display: flex;
}

.text-239 {
  color: #2c243d;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.union-2 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 12.8757px;
  height: 15.9999px;
  text-decoration: none;
  display: flex;
}

.frame-60225 {
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  text-decoration: none;
  display: flex;
}

.frame-60226 {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 120px;
  height: 140px;
  text-decoration: none;
  display: flex;
}

.text-240 {
  color: #e1f655;
  letter-spacing: .03em;
  text-transform: uppercase;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 10px;
  font-weight: 300;
  line-height: 110%;
  text-decoration: none;
}

.frame-60063 {
  background-color: #6035e9;
  background-image: url('../images/6625ed85c9de8cf548319d83_20240421_214828-online-video-cutter.com.gif');
  background-position: 0 0;
  background-size: cover;
  width: 75px;
  height: 75px;
  overflow: hidden;
}

.frame-60227 {
  grid-column-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  width: 67%;
  max-width: none;
  text-decoration: none;
  display: flex;
}

.text-241 {
  color: #fff;
  letter-spacing: -.02em;
  width: 85%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 35px;
  font-weight: 400;
  line-height: 105%;
  text-decoration: none;
}

.accordion {
  border-bottom: .5px solid #ffffff40;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  text-decoration: none;
  display: flex;
}

.cordion_row {
  grid-row-gap: 0px;
  border: 0 solid #fff;
  border-top: .6px solid #ffffff40;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  padding-top: 28px;
  padding-bottom: 28px;
  text-decoration: none;
  display: flex;
}

.frame-60159 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-242 {
  color: #fff;
  letter-spacing: -.03em;
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.frame-60229 {
  justify-content: space-between;
  align-items: center;
  width: 67%;
  max-width: none;
  text-decoration: none;
  display: flex;
}

.text-243 {
  color: #fff;
  letter-spacing: -.02em;
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 29px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.text-243.textanimate-hover {
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 24px;
}

.cordion_btn {
  justify-content: space-between;
  align-items: center;
  width: 33px;
  text-decoration: none;
  display: flex;
}

.btn_change {
  color: #fff;
  text-align: right;
  letter-spacing: -.03em;
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.cordion_content {
  grid-column-gap: 24px;
  justify-content: flex-start;
  align-items: flex-end;
  width: 67%;
  max-width: none;
  text-decoration: none;
  display: flex;
}

.rectangle-301 {
  background-color: #d9d9d9;
  width: 246px;
  height: 164px;
  min-height: 164px;
}

.frame-60232 {
  grid-column-gap: 72px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  text-decoration: none;
  display: flex;
}

.text-245 {
  color: #fff;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 13.03px;
  text-decoration: none;
}

.text-246 {
  color: #e1f655;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 120%;
  text-decoration: none;
  display: flex;
}

.case-study-1 {
  color: #e1f655;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 120%;
  text-decoration: underline;
}

.code-embed-8 {
  height: 0;
  position: absolute;
}

.div-block-15 {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.frame-60064 {
  grid-column-gap: 5.69937px;
  background-color: #e1f655;
  border-radius: 56.9937px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 8.14196px 16.2839px;
  text-decoration: none;
  display: flex;
}

.text-247 {
  color: #2c243d;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.union-3 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 10.4834px;
  height: 13.0271px;
  text-decoration: none;
  display: flex;
}

.frame-60233 {
  grid-column-gap: 7px;
  background-color: #e1f655;
  border-radius: 70px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  margin-left: 33%;
  padding: 10px 20px;
  text-decoration: none;
  display: flex;
}

.text-248 {
  color: #2c243d;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.union-4 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 12.8757px;
  height: 15.9999px;
  text-decoration: none;
  display: flex;
}

.frame-60234 {
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  text-decoration: none;
  display: flex;
}

.frame-21282 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 3.25679px;
  padding-bottom: 3.25679px;
  text-decoration: none;
  display: flex;
}

.text-249 {
  color: #e1f655;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 10px;
  font-weight: 300;
  line-height: 110%;
  text-decoration: none;
}

.frame-60235 {
  grid-column-gap: 32px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.text-250 {
  color: #e1f655;
  text-align: right;
  letter-spacing: .03em;
  text-transform: uppercase;
  width: 222px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 10px;
  font-weight: 300;
  line-height: 110%;
  text-decoration: none;
}

.frame-59847 {
  object-fit: cover;
}

.frame-60236 {
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  text-decoration: none;
  display: flex;
}

.text-251 {
  color: #e1f655;
  text-align: justify;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 10px;
  font-weight: 300;
  line-height: 110%;
  text-decoration: none;
}

.frame-60118 {
  grid-column-gap: 32px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 933px;
  text-decoration: none;
  display: flex;
}

.frame-60237 {
  grid-row-gap: 32px;
  border: 0 solid #fff;
  border-top-width: .488518px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 450px;
  padding: 20px 4px;
  text-decoration: none;
  display: flex;
}

.text-252 {
  color: #fff;
  letter-spacing: -.02em;
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 29px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.text-253 {
  color: #fff;
  letter-spacing: .02em;
  text-transform: uppercase;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.text-254 {
  color: #fff;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.div-block-16 {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.frame-60238 {
  grid-column-gap: 7px;
  background-color: #e1f655;
  border-radius: 70px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  margin-left: 33%;
  padding: 10px 20px;
  text-decoration: none;
  display: flex;
}

.text-255 {
  color: #2c243d;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.union-5 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 12.8757px;
  height: 15.9999px;
  text-decoration: none;
  display: flex;
}

.frame-60190 {
  grid-column-gap: 3%;
  grid-row-gap: 48px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 67%;
  max-width: none;
  text-decoration: none;
  display: flex;
}

.frame-60239 {
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 48%;
  max-width: none;
  text-decoration: none;
  display: flex;
}

._01-uivisual-design {
  color: #fff;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 11px;
  font-weight: 300;
  line-height: 90%;
  text-decoration: none;
}

.frame-60240 {
  grid-row-gap: 6px;
  border-top: .6px solid #fff6;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding-top: 20px;
  text-decoration: none;
  display: flex;
}

.text-256 {
  color: #fff;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

._02-ux-design {
  color: #fff;
  letter-spacing: -.02em;
  text-transform: uppercase;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 11px;
  font-weight: 300;
  line-height: 90%;
  text-decoration: none;
}

.frame-60241 {
  grid-row-gap: 6px;
  border-top: .6px solid #fff6;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 12px;
  text-decoration: none;
  display: flex;
}

.text-257 {
  color: #fff;
  text-align: right;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.html {
  color: #fff;
  text-align: right;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.html.css.javascript {
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 24px;
}

.frame-60242 {
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  text-decoration: none;
  display: flex;
}

.text-258 {
  color: #14191d;
  text-align: justify;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.frame-60243 {
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 67%;
  max-width: none;
  text-decoration: none;
  display: flex;
}

.text-259 {
  color: #14191d;
  text-align: left;
  letter-spacing: -.035em;
  width: 90%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 35px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.text-260 {
  color: #14191d;
  text-align: left;
  letter-spacing: 0;
  width: 50%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
  display: block;
}

.frame-60244 {
  grid-column-gap: 3%;
  grid-row-gap: 32px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 67%;
  max-width: none;
  text-decoration: none;
  display: flex;
}

.frame-60110 {
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 47%;
  max-width: none;
  text-decoration: none;
  display: flex;
}

.text-261 {
  color: #14191d;
  letter-spacing: -.02em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 29px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.an-intuitive-design-anticipates-the-users-needs-and-preferences-leading-to-a-seamless-and-effortless {
  color: #14191d;
  letter-spacing: 0;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.frame-60245 {
  grid-column-gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.frame-60246 {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.text-262 {
  color: #14191d;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 24px;
  font-weight: 300;
  line-height: 120%;
  text-decoration: none;
}

.vectors-wrapper_22-1 {
  object-fit: cover;
  overflow: hidden;
}

.text-263 {
  color: #14191d;
  letter-spacing: -.02em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 27px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.frame-60247 {
  grid-column-gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 450px;
  height: 36px;
  text-decoration: none;
  display: flex;
}

.frame-60248 {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.text-264 {
  color: #14191d;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 24px;
  font-weight: 300;
  line-height: 120%;
  text-decoration: none;
}

.engaging-1 {
  object-fit: cover;
  overflow: hidden;
}

.text-265 {
  color: #14191d;
  letter-spacing: -.02em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.frame-60249 {
  grid-column-gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.frame-60250 {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.text-266 {
  color: #14191d;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 24px;
  font-weight: 300;
  line-height: 120%;
  text-decoration: none;
}

.vectors-wrapper_26-1 {
  object-fit: cover;
  overflow: hidden;
}

.text-267 {
  color: #14191d;
  letter-spacing: -.02em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 29px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.frame-60251 {
  grid-column-gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.frame-60252 {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.text-268 {
  color: #14191d;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 24px;
  font-weight: 300;
  line-height: 120%;
  text-decoration: none;
}

.empathetic-1 {
  object-fit: cover;
  overflow: hidden;
}

.text-269 {
  color: #14191d;
  letter-spacing: -.02em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.frame-60253 {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 64%;
  max-width: none;
  text-decoration: none;
  display: flex;
}

.frame-60254 {
  object-fit: cover;
}

.frame-60255 {
  grid-column-gap: 100px;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-270 {
  color: #e1f655;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 10px;
  font-weight: 300;
  line-height: 110%;
  text-decoration: none;
}

.text-271 {
  color: #fff;
  text-align: center;
  letter-spacing: -.03em;
  width: 83%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.text-272 {
  color: #e1f655;
  text-align: right;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 10px;
  font-weight: 300;
  line-height: 110%;
  text-decoration: none;
}

.text-273 {
  color: #fff;
  text-align: center;
  letter-spacing: 0;
  width: 61%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.frame-60256 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 689px;
  text-decoration: none;
  display: flex;
}

.frame-60256.div1 {
  border-right: .5px solid #0000004d;
  width: 72%;
  max-width: none;
}

.frame-60257 {
  border-bottom: .5px solid #0000004d;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 20px 20px 28px;
  text-decoration: none;
  display: flex;
}

.frame-60258 {
  grid-column-gap: 13.0271px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.text-274 {
  color: #14191d;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.frame-60259 {
  grid-column-gap: 6.51357px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.union-6 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 14.6554px;
  height: 14.6545px;
  text-decoration: none;
  display: flex;
}

.text-275 {
  color: #14191d;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.text-276 {
  color: #14191d;
  text-align: right;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.frame-60260 {
  grid-row-gap: 68px;
  border-bottom: .5px solid #0000004d;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 20px 20px 20px 28px;
  text-decoration: none;
  display: flex;
}

.frame-60261 {
  grid-column-gap: 10px;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-277 {
  color: #14191d;
  text-align: justify;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.frame-60201 {
  grid-row-gap: 64px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.frame-60262 {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-end;
  text-decoration: none;
  display: flex;
}

.text-278 {
  color: #14191d;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: underline;
}

.frame-60124 {
  object-fit: cover;
}

.frame-60200 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.frame-60263 {
  grid-column-gap: 14px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.frame-60264 {
  grid-row-gap: 6px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  text-decoration: none;
  display: flex;
}

.text-279 {
  color: #14191d;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.text-280 {
  color: #14191d;
  letter-spacing: .02em;
  text-transform: uppercase;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 110%;
  text-decoration: none;
}

.text-281 {
  color: #14191d;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Apfelgrotezk, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.frame-60121, .frame-60122 {
  grid-row-gap: 6px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  text-decoration: none;
  display: flex;
}

.mask-group {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 189.979px;
  height: 26.0543px;
  text-decoration: none;
  display: flex;
}

.frame-60115 {
  grid-column-gap: 7px;
  background-color: #e1f655;
  border-radius: 70px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  height: 38px;
  padding: 10px 20px;
  text-decoration: none;
  display: flex;
}

.text-282 {
  color: #14191d;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.union-7 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 12.8757px;
  height: 15.9999px;
  text-decoration: none;
  display: flex;
}

.frame-60265 {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  max-width: 279px;
  height: 490px;
  padding: 20px;
  text-decoration: none;
  display: flex;
}

.frame-60114 {
  grid-column-gap: 3.25679px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-283 {
  color: #14191d;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: underline;
}

.text-284 {
  color: #14191d;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.frame-60266 {
  grid-row-gap: 26px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  width: 44.5445px;
  text-decoration: none;
  display: flex;
}

.group {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 251.045px;
  height: 44.5445px;
  text-decoration: none;
  display: flex;
}

.group-281 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 21.5765px;
  height: 21.4935px;
  text-decoration: none;
  display: flex;
}

.frame-60267 {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  max-width: 279px;
  height: 490px;
  padding: 20px;
  text-decoration: none;
  display: flex;
}

.frame-60267.div2 {
  width: 28%;
  max-width: none;
  height: auto;
}

.frame-60268 {
  grid-column-gap: 3.25679px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-285 {
  color: #14191d;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: underline;
}

.text-286 {
  color: #14191d;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.frame-60269 {
  grid-row-gap: 26px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  width: 44.5445px;
  text-decoration: none;
  display: flex;
}

.group-282 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 251.045px;
  height: 44.5445px;
  text-decoration: none;
  display: flex;
}

.group-283 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 21.5765px;
  height: 21.4935px;
  text-decoration: none;
  display: flex;
}

.bottom {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  display: flex;
}

.image-enlarge {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: none;
  text-decoration: none;
  display: none;
}

.rectangle-302 {
  object-fit: cover;
}

.frame-60271 {
  grid-column-gap: 97px;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 11px;
  text-decoration: none;
  display: flex;
  position: absolute;
}

.text-287 {
  opacity: 1;
  color: #fff;
  text-align: justify;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 300;
  line-height: 120%;
  text-decoration: none;
}

.text-288 {
  opacity: .6;
  color: #fff;
  text-align: right;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.image-rotate {
  grid-column-gap: 8px;
  grid-row-gap: 12px;
  mix-blend-mode: normal;
  flex-flow: column;
  flex: 0 auto;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: auto;
  text-decoration: none;
  display: flex;
  position: relative;
}

.frame-60273 {
  grid-row-gap: 8.58932px;
  opacity: 1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  max-width: none;
  height: 150.313px;
  text-decoration: none;
  display: flex;
}

.frame-60274 {
  background-color: #000;
  position: relative;
  overflow: hidden;
}

.rotating-image {
  opacity: 1;
  object-fit: cover;
  background-color: #111;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: none;
  height: auto;
  text-decoration: none;
  display: flex;
  position: relative;
}

.subtract {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 289.89px;
  height: 196.874px;
  text-decoration: none;
  display: none;
  position: absolute;
  inset: 0;
}

.image-caption {
  z-index: 1;
  opacity: 1;
  color: #fff;
  text-align: justify;
  letter-spacing: .03em;
  text-transform: uppercase;
  mix-blend-mode: difference;
  width: 65%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Robotomono, Arial, sans-serif;
  font-size: 10px;
  font-weight: 300;
  line-height: 110%;
  text-decoration: none;
  display: flex;
  position: relative;
  inset: 5% auto auto 0%;
}

.frame-60275 {
  grid-row-gap: 8.58932px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 225.47px;
  height: auto;
  text-decoration: none;
  display: flex;
}

.div-block-17 {
  grid-column-gap: 90px;
  grid-row-gap: 90px;
  mix-blend-mode: normal;
  justify-content: space-between;
  align-items: center;
  width: 48%;
  display: flex;
}

.hero-sign {
  color: #fff;
  mix-blend-mode: normal;
  font-family: Prodigysans, Arial, sans-serif;
  font-size: 68px;
  font-weight: 300;
}

.swipe-overlay {
  z-index: 4;
  width: 100%;
  height: 100%;
  position: absolute;
}

.image-rotate-container {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  width: 44%;
  display: flex;
  position: relative;
}

.indicator {
  color: #e1f655;
  font-weight: 300;
  line-height: 14px;
}

.mobile-menu {
  display: none;
}

.mobile-show {
  display: none;
  overflow: hidden;
}

.close-btn {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 4px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.frame-60061 {
  grid-column-gap: 10px;
  object-fit: cover;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

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

.project-list {
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  background-color: #111;
  flex-flow: column;
  padding: 180px 32px 160px;
  display: flex;
}

@media screen and (min-width: 1280px) {
  .text-228.textanimate {
    font-family: Robotomono, Arial, sans-serif;
    font-weight: 400;
  }

  .preloader {
    display: none;
  }

  .navbar {
    z-index: 22;
  }

  ._4916162n-12304454w {
    width: 120px;
    font-size: 10px;
    font-weight: 300;
  }

  .rectangle-298 {
    width: 200px;
    height: 200px;
    min-height: 200px;
    position: relative;
  }

  .frame-60214 {
    width: 100%;
    max-width: 400px;
  }

  .hero-section {
    z-index: 4;
    grid-column-gap: 28px;
    grid-row-gap: 28px;
    padding: 132px 32px 20px;
  }

  .text-231 {
    letter-spacing: -.02em;
    font-size: 48px;
  }

  .image-4 {
    z-index: -1;
  }

  .frame-60217 {
    font-family: Robotomono, Arial, sans-serif;
    font-weight: 300;
  }

  .scroll-down {
    font-size: 12px;
  }

  .code-embed-5 {
    height: auto;
    display: flex;
    position: relative;
  }

  .frame-60218 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    max-width: none;
    height: 100%;
    position: relative;
  }

  .frame-60212 {
    padding-left: 28px;
    padding-right: 28px;
  }

  .text-230 {
    justify-content: flex-end;
    align-items: stretch;
    width: auto;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 12px;
    font-weight: 300;
    display: flex;
  }

  .text-232 {
    letter-spacing: 0;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 13px;
    position: relative;
  }

  .frame-60213 {
    padding-top: 12px;
  }

  .text-233 {
    width: 270px;
    font-size: 10px;
    font-weight: 300;
    position: relative;
  }

  .frame-59805 {
    justify-content: flex-start;
    align-items: flex-start;
    width: auto;
    height: auto;
    font-size: 11px;
  }

  .frame-60216 {
    width: 32px;
    height: 36px;
    top: 4px;
  }

  .lets-embark-on-11 {
    font-family: Prodigysans, Arial, sans-serif;
    font-size: 48px;
  }

  .lets-embark-on-10 {
    letter-spacing: -.02em;
    font-size: 48px;
    position: relative;
  }

  .text-234 {
    text-align: left;
    font-size: 10px;
    position: relative;
  }

  .frame-60215 {
    grid-row-gap: 4px;
    font-family: Apfelgrotezk, Arial, sans-serif;
  }

  .text-106.textanimate-hover {
    font-size: 1.68vw;
  }

  .section-11 {
    grid-column-gap: 130px;
    grid-row-gap: 130px;
    background-color: #0000;
    padding: 180px 32px 140px;
  }

  .i-have-extensive-experience-designing-web-and-mobile-products-across-various-industries-i-enjoy-working-with-different-clients-and-learning-about-how-i-can-use-design-to-help-their-businesses-check-out-some-of-the-projects-ive-had-the-pleasure-of-working-on {
    font-size: 13px;
  }

  .my-name-is-yifan-1 {
    letter-spacing: -.02em;
    font-family: Prodigysans, Arial, sans-serif;
    font-size: 6vw;
  }

  .my-name-is-yifan-0 {
    letter-spacing: -.02em;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 6vw;
  }

  .div-block-5 {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .section-13 {
    grid-column-gap: 120px;
    grid-row-gap: 120px;
    padding-top: 60px;
    padding-left: 32px;
    padding-right: 32px;
    overflow: hidden;
  }

  .text-184 {
    height: 100%;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 6vw;
  }

  .frame-60120 {
    width: 2.6vw;
  }

  .frame-60119 {
    overflow: visible;
  }

  .section-7 {
    grid-column-gap: 104px;
    grid-row-gap: 104px;
    justify-content: center;
    align-items: flex-end;
    padding-left: 32px;
    padding-right: 32px;
  }

  .frame-60170 {
    border-radius: 0;
    width: 71%;
    min-width: 0;
    padding: 0;
  }

  .section-10 {
    padding-left: 32px;
    padding-right: 32px;
  }

  .background-video {
    z-index: -2;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
  }

  .frame-60223 {
    max-width: none;
    padding-top: 32px;
    padding-left: 32px;
    padding-right: 32px;
  }

  .frame-60059 {
    font-family: Apfelgrotezk, Arial, sans-serif;
  }

  .text-236, .text-237 {
    font-size: 14px;
  }

  .frame-60224 {
    font-family: Robotomono, Arial, sans-serif;
  }

  .link-text {
    font-size: 12px;
    font-weight: 300;
  }

  .frame-60055 {
    font-size: 13px;
    font-weight: 300;
  }

  .text-239 {
    font-size: 12px;
  }

  .frame-60226 {
    height: 140px;
  }

  .text-240 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 10px;
    font-weight: 300;
    position: relative;
  }

  .frame-60063 {
    width: 75px;
    height: 75px;
  }

  .frame-60227 {
    width: 67%;
    max-width: none;
  }

  .text-241 {
    letter-spacing: -.02em;
    width: 85%;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 35px;
    line-height: 105%;
    position: relative;
  }

  .accordion {
    max-width: none;
  }

  .cordion_row {
    grid-row-gap: 0px;
    border-top-color: #ffffff40;
    padding-top: 28px;
  }

  .frame-60159 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .text-242 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 24px;
  }

  .frame-60229 {
    width: 67%;
    max-width: none;
  }

  .text-243.textanimate-hover {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 24px;
  }

  .cordion_btn {
    font-family: Apfelgrotezk, Arial, sans-serif;
  }

  .btn_change {
    font-size: 24px;
  }

  .cordion_content {
    width: 67%;
    max-width: none;
  }

  .rectangle-301 {
    width: 246px;
    height: 164px;
  }

  .text-245 {
    letter-spacing: .02em;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 13px;
  }

  .text-246 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 13px;
    font-weight: 300;
    display: flex;
  }

  .case-study-1 {
    font-size: 12px;
    font-weight: 300;
  }

  .div-block-15 {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    display: flex;
  }

  .frame-60233 {
    margin-left: 33%;
  }

  .text-248 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 12px;
  }

  .text-249 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 10px;
    font-weight: 300;
  }

  .frame-60235 {
    grid-column-gap: 32px;
    font-family: Robotomono, Arial, sans-serif;
    font-weight: 300;
  }

  .text-250 {
    width: 222px;
    font-size: 10px;
    font-weight: 300;
  }

  .text-251 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 10px;
    font-weight: 300;
  }

  .div-block-16 {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
    flex-flow: column;
    align-items: flex-start;
    display: flex;
  }

  .frame-60238 {
    margin-left: 33%;
  }

  .text-255 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 12px;
  }

  .frame-60190 {
    grid-column-gap: 3%;
    grid-row-gap: 48px;
    width: 67%;
    max-width: none;
  }

  .frame-60239 {
    border-top: 1px #fff6;
    width: 48%;
    max-width: none;
  }

  ._01-uivisual-design {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
    font-weight: 300;
  }

  .frame-60240 {
    border-top: .6px solid #fff6;
    width: 100%;
    padding-top: 20px;
    font-family: Apfelgrotezk, Arial, sans-serif;
  }

  .text-256 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 24px;
  }

  ._02-ux-design {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
    font-weight: 300;
  }

  .frame-60241 {
    grid-row-gap: 6px;
    border-top: .6px solid #fff6;
    width: 100%;
    padding-top: 20px;
  }

  .text-257 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 24px;
  }

  .html.css.javascript {
    font-size: 24px;
  }

  .frame-60242 {
    max-width: none;
  }

  .text-258 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 10px;
  }

  .frame-60243 {
    width: 67%;
    max-width: none;
  }

  .text-259 {
    letter-spacing: -.035em;
    width: 90%;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 35px;
    line-height: 105%;
  }

  .text-260 {
    letter-spacing: 0;
    width: 50%;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 13px;
  }

  .frame-60244 {
    grid-column-gap: 3%;
    grid-row-gap: 32px;
    width: 67%;
    max-width: none;
  }

  .frame-60110 {
    grid-row-gap: 12px;
    width: 47%;
    max-width: none;
  }

  .an-intuitive-design-anticipates-the-users-needs-and-preferences-leading-to-a-seamless-and-effortless {
    letter-spacing: 0;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 13px;
  }

  .text-262 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 24px;
  }

  .text-263 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 24px;
  }

  .text-264 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 24px;
  }

  .text-265 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 24px;
  }

  .text-266 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 24px;
  }

  .text-267 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 24px;
  }

  .text-268 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 24px;
  }

  .text-269 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 24px;
  }

  .frame-60253 {
    grid-row-gap: 24px;
    width: 64%;
    max-width: none;
  }

  .frame-60255 {
    grid-column-gap: 100px;
  }

  .text-270 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 10px;
    font-weight: 300;
  }

  .text-271 {
    width: 83%;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 48px;
  }

  .text-272 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 10px;
    font-weight: 300;
  }

  .text-273 {
    letter-spacing: 0;
    width: 61%;
    font-size: 13px;
  }

  .frame-60256.div1 {
    border-right: .5px solid #00000059;
    width: 72%;
    max-width: none;
  }

  .frame-60257 {
    border-bottom: .5px solid #00000059;
  }

  .text-274, .text-275 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 14px;
  }

  .text-276 {
    font-family: Robotomono, Arial, sans-serif;
  }

  .frame-60260 {
    border-bottom: .5px solid #00000059;
  }

  .text-277 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 10px;
  }

  .frame-60262 {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .text-278 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 48px;
  }

  .frame-60263 {
    width: auto;
  }

  .frame-60264 {
    grid-row-gap: 6px;
    width: auto;
  }

  .text-279 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 18px;
  }

  .text-280 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 10px;
  }

  .text-281 {
    font-size: 24px;
  }

  .frame-60121, .frame-60122 {
    grid-row-gap: 6px;
    width: auto;
  }

  .text-282 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 12px;
  }

  .frame-60267.div2 {
    width: 28%;
    max-width: none;
    height: auto;
  }

  .text-285 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 12px;
  }

  .rectangle-302 {
    height: 200px;
  }

  .div-block-17 {
    width: 48%;
  }

  .indicator {
    color: #e1f655;
    font-size: 12px;
    font-weight: 300;
    line-height: 100%;
  }

  .code-embed-9 {
    font-family: Robotomono, Arial, sans-serif;
    font-weight: 300;
  }

  .image-286 {
    position: relative;
  }

  .div-block-19 {
    width: 100%;
  }

  .project-list {
    background-color: #111;
    padding-left: 72px;
    padding-right: 72px;
  }
}

@media screen and (min-width: 1440px) {
  .preloader {
    display: none;
  }

  ._4916162n-12304454w {
    width: 120px;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
    font-weight: 300;
  }

  .rectangle-298 {
    width: 320px;
    height: 222px;
    min-height: 212px;
  }

  .frame-60214 {
    max-width: 420px;
  }

  .hero-section {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    mix-blend-mode: normal;
    padding: 132px 72px 20px;
  }

  .text-231 {
    letter-spacing: -.02em;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 56px;
  }

  .image-4 {
    opacity: .3;
    top: 48px;
  }

  .scroll-down {
    width: 100%;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 13px;
    display: flex;
    position: relative;
    overflow: visible;
  }

  .code-embed-5 {
    width: auto;
    height: auto;
    min-height: 0;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 10px;
    display: flex;
    position: relative;
  }

  .frame-60218 {
    z-index: 111;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    max-width: 100%;
    height: 100%;
    position: relative;
  }

  .frame-60212 {
    grid-column-gap: 28px;
    grid-row-gap: 28px;
    padding-left: 32px;
    padding-right: 32px;
  }

  .text-230 {
    object-fit: fill;
    flex: 0 auto;
    justify-content: flex-end;
    align-items: stretch;
    width: auto;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 13px;
    font-weight: 300;
    display: flex;
    position: relative;
  }

  .text-232 {
    letter-spacing: 0;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 15px;
  }

  .frame-60213 {
    padding-top: 12px;
  }

  .text-233 {
    width: 286px;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
    font-weight: 300;
    position: relative;
  }

  .frame-59805 {
    justify-content: flex-start;
    align-items: flex-start;
    width: auto;
  }

  .frame-60216 {
    align-self: auto;
    width: 40px;
    height: 45px;
    top: 8px;
  }

  .lets-embark-on-11, .lets-embark-on-10 {
    font-size: 56px;
  }

  .text-234 {
    text-align: left;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
    position: relative;
  }

  .frame-60215 {
    grid-column-gap: 3px;
    grid-row-gap: 3px;
    font-family: Prodigysans, Arial, sans-serif;
  }

  .bottom-bar {
    max-width: none;
  }

  .section-11 {
    grid-column-gap: 160px;
    grid-row-gap: 160px;
    padding: 200px 72px 160px;
  }

  .i-have-extensive-experience-designing-web-and-mobile-products-across-various-industries-i-enjoy-working-with-different-clients-and-learning-about-how-i-can-use-design-to-help-their-businesses-check-out-some-of-the-projects-ive-had-the-pleasure-of-working-on {
    font-size: 15px;
  }

  .my-name-is-yifan-1 {
    letter-spacing: -.03em;
    font-family: Prodigysans, Arial, sans-serif;
    font-size: 7vw;
  }

  .my-name-is-yifan-0 {
    letter-spacing: -.02em;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 7vw;
  }

  .div-block-5 {
    grid-column-gap: 28px;
    grid-row-gap: 28px;
  }

  .section-13 {
    grid-column-gap: 180px;
    grid-row-gap: 180px;
    padding: 80px 72px 140px;
    overflow: hidden;
  }

  .text-184 {
    font-size: 9.5vw;
  }

  .frame-60120 {
    width: 2.8vw;
    height: auto;
    position: relative;
    top: 16px;
  }

  .frame-60119 {
    overflow: visible;
  }

  .image-284 {
    width: 6.25vw;
  }

  .text-224 {
    font-size: 1.38vw;
  }

  .section-7 {
    grid-column-gap: 118px;
    grid-row-gap: 118px;
    justify-content: center;
    align-items: flex-end;
    padding: 140px 72px;
  }

  .frame-60170 {
    border-radius: 0;
    justify-content: flex-start;
    align-items: stretch;
    width: 71%;
    padding: 0;
  }

  .frame-60184 {
    width: 28%;
  }

  .section-10 {
    padding-top: 140px;
  }

  .background-video {
    z-index: -2;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
  }

  .frame-60223 {
    max-width: 100%;
    padding-top: 32px;
    padding-left: 72px;
    padding-right: 72px;
  }

  .frame-60059 {
    grid-column-gap: 20px;
    font-family: Apfelgrotezk, Arial, sans-serif;
  }

  .text-237 {
    font-size: 16px;
  }

  .nav-links {
    grid-row-gap: 15px;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 13px;
    font-weight: 300;
  }

  .link-item {
    font-size: 13px;
  }

  .link-text {
    opacity: 1;
    font-size: 13px;
    font-weight: 300;
  }

  .frame-60060 {
    font-family: Robotomono, Arial, sans-serif;
    font-weight: 400;
  }

  .text-239 {
    font-size: 13px;
  }

  .frame-60225 {
    justify-content: flex-start;
    align-items: stretch;
    max-width: 100%;
    height: 100%;
    position: relative;
  }

  .frame-60226 {
    grid-column-gap: 68px;
    grid-row-gap: 68px;
    flex: 0 auto;
    justify-content: space-between;
    align-items: flex-start;
    width: 33%;
    height: 100%;
    display: flex;
    position: relative;
  }

  .text-240 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
    font-weight: 300;
    position: relative;
  }

  .frame-60063 {
    width: 120px;
    height: 120px;
  }

  .frame-60227 {
    grid-column-gap: 0px;
    width: 67%;
    max-width: none;
    position: relative;
  }

  .text-241 {
    letter-spacing: -.005em;
    width: 85%;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 41px;
    font-weight: 400;
    line-height: 105%;
    position: relative;
  }

  .accordion {
    border-bottom: .6px solid #ffffff40;
    max-width: none;
  }

  .cordion_row {
    grid-row-gap: 0px;
    border-top-color: #ffffff40;
    padding-top: 26px;
    padding-bottom: 26px;
  }

  .frame-60159 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .text-242 {
    letter-spacing: .03em;
    width: 33%;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 27px;
  }

  .frame-60229 {
    width: 67%;
    max-width: none;
  }

  .text-243 {
    font-family: Prodigysans, Arial, sans-serif;
    font-size: 26px;
  }

  .text-243.textanimate-hover {
    letter-spacing: .006em;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 27px;
    font-weight: 400;
  }

  .cordion_btn {
    font-family: Prodigysans, Arial, sans-serif;
  }

  .btn_change {
    color: #fff;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 27px;
  }

  .cordion_content {
    width: 67%;
    max-width: none;
    padding-top: 0;
    padding-left: 3px;
  }

  .rectangle-301 {
    background-image: none;
    width: 300px;
    min-height: 200px;
  }

  .frame-60232 {
    font-family: Robotomono, Arial, sans-serif;
    font-weight: 300;
  }

  .text-245 {
    letter-spacing: .01em;
    width: 210px;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
  }

  .text-246 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 13px;
    font-weight: 300;
    display: flex;
    position: relative;
  }

  .case-study-1 {
    font-size: 13px;
    font-weight: 300;
  }

  .div-block-14 {
    display: block;
  }

  .div-block-15 {
    grid-column-gap: 64px;
    grid-row-gap: 64px;
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
    display: flex;
  }

  .frame-60064, .frame-60233 {
    margin-left: 33%;
  }

  .text-248 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 13px;
  }

  .frame-60234 {
    max-width: none;
  }

  .frame-21282 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
    font-weight: 300;
    line-height: 120%;
  }

  .text-249 {
    font-size: 11px;
    font-weight: 300;
    line-height: 120%;
  }

  .frame-60235 {
    grid-column-gap: 36px;
    letter-spacing: .03em;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
    font-weight: 300;
    line-height: 120%;
  }

  .text-250 {
    text-align: right;
    width: 249px;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
    font-weight: 300;
    line-height: 120%;
  }

  .frame-60236 {
    align-self: flex-start;
    max-width: none;
    position: relative;
  }

  .text-251 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
    font-weight: 300;
  }

  .frame-60118 {
    grid-column-gap: 2%;
    grid-row-gap: 28px;
    width: 67%;
    max-width: none;
    position: relative;
  }

  .frame-60237 {
    grid-column-gap: 32px;
    grid-row-gap: 28px;
    border-top-color: #fff9;
    flex-flow: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 49%;
    max-width: none;
    padding-top: 24px;
    padding-bottom: 0;
    position: relative;
  }

  .text-252 {
    width: 70%;
    font-family: Prodigysans, Arial, sans-serif;
    font-size: 26px;
  }

  .text-253 {
    text-align: right;
    letter-spacing: 0;
    text-transform: none;
    width: 84%;
    font-family: Prodigysans, Arial, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 120%;
  }

  .text-254 {
    text-align: right;
    letter-spacing: 0;
    text-transform: none;
    width: 84%;
    font-family: Prodigysans, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 120%;
  }

  .div-block-16 {
    grid-column-gap: 56px;
    grid-row-gap: 56px;
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
    display: flex;
  }

  .frame-60238 {
    aspect-ratio: auto;
    object-fit: fill;
    flex-flow: row;
    justify-content: center;
    width: auto;
    margin-left: 33%;
    font-family: Robotomono, Arial, sans-serif;
    display: flex;
    position: relative;
  }

  .text-255 {
    font-size: 13px;
  }

  .frame-60190 {
    grid-column-gap: 3%;
    grid-row-gap: 56px;
    width: 67%;
    min-width: 0;
    max-width: none;
    font-family: Prodigysans, Arial, sans-serif;
  }

  .frame-60239 {
    grid-column-gap: 0%;
    grid-row-gap: 12px;
    width: 48%;
    max-width: none;
  }

  ._01-uivisual-design {
    letter-spacing: .02em;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 13px;
    font-weight: 300;
  }

  .frame-60240 {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    border-top: .6px solid #fff6;
    width: 100%;
    padding-top: 28px;
  }

  .text-256 {
    letter-spacing: 0;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 27px;
    font-weight: 400;
  }

  ._02-ux-design {
    letter-spacing: .02em;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 13px;
    font-weight: 300;
  }

  .frame-60241 {
    grid-row-gap: 12px;
    border-top: .6px solid #fff6;
    width: 100%;
    padding-top: 28px;
  }

  .text-257 {
    letter-spacing: -.01em;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 27px;
  }

  .frame-60242 {
    max-width: none;
  }

  .text-258 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
  }

  .frame-60243 {
    grid-row-gap: 28px;
    width: 67%;
    max-width: none;
  }

  .text-259 {
    letter-spacing: -.02em;
    width: 94%;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 41px;
    line-height: 105%;
  }

  .text-260 {
    letter-spacing: 0;
    width: 50%;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 15px;
  }

  .frame-60244 {
    grid-column-gap: 3%;
    grid-row-gap: 40px;
    width: 67%;
    max-width: none;
  }

  .frame-60110 {
    grid-row-gap: 16px;
    width: 47%;
    max-width: none;
  }

  .text-261 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 27px;
  }

  .an-intuitive-design-anticipates-the-users-needs-and-preferences-leading-to-a-seamless-and-effortless {
    letter-spacing: 0;
    width: 93%;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 15px;
  }

  .frame-60245 {
    font-family: Apfelgrotezk, Arial, sans-serif;
  }

  .text-262 {
    font-family: Robotomono, Arial, sans-serif;
  }

  .text-263 {
    font-size: 27px;
  }

  .frame-60247 {
    font-family: Apfelgrotezk, Arial, sans-serif;
  }

  .text-264 {
    font-family: Robotomono, Arial, sans-serif;
  }

  .text-265 {
    font-size: 27px;
  }

  .frame-60249 {
    font-family: Apfelgrotezk, Arial, sans-serif;
  }

  .text-266 {
    font-family: Robotomono, Arial, sans-serif;
  }

  .text-267 {
    font-size: 27px;
  }

  .text-268 {
    font-family: Robotomono, Arial, sans-serif;
  }

  .text-269 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 27px;
  }

  .frame-60253 {
    width: 60%;
    max-width: none;
  }

  .frame-60255 {
    grid-column-gap: 90px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .text-270 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
    font-weight: 300;
  }

  .text-271 {
    letter-spacing: -.02em;
    width: 83%;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 56px;
  }

  .text-272 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
    font-weight: 300;
  }

  .text-273 {
    letter-spacing: 0;
    width: 59%;
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 15px;
  }

  .frame-60256 {
    border-right: .6px solid #14191d66;
    width: 72%;
    max-width: none;
  }

  .frame-60257 {
    border-top: 0 solid #14191d66;
    border-bottom: .6px solid #14191d66;
  }

  .text-275 {
    font-family: Apfelgrotezk, Arial, sans-serif;
  }

  .text-276 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 13px;
  }

  .frame-60260 {
    grid-row-gap: 72px;
    border-bottom: 1px solid #14191d66;
  }

  .text-277 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
  }

  .frame-60262 {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .text-278 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 56px;
  }

  .frame-60263 {
    min-width: 0;
  }

  .frame-60264 {
    grid-row-gap: 8px;
    width: auto;
  }

  .text-279 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 20px;
  }

  .text-280 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
  }

  .text-281 {
    font-family: Apfelgrotezk, Arial, sans-serif;
  }

  .frame-60121, .frame-60122 {
    grid-row-gap: 8px;
    width: auto;
  }

  .text-282 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 13px;
  }

  .frame-60267 {
    border-left: 0 solid #14191d66;
    width: 28%;
    max-width: none;
    height: 100%;
    min-height: 0;
    font-family: Robotomono, Arial, sans-serif;
    position: relative;
    bottom: auto;
  }

  .text-285 {
    letter-spacing: .005em;
    font-size: 13px;
  }

  .bottom {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px;
    display: flex;
  }

  .rectangle-302 {
    height: 200px;
  }

  .image-rotate {
    width: 100%;
    overflow: hidden;
  }

  .subtract {
    opacity: 0;
    background-color: #00000080;
    max-width: none;
    height: 100%;
    display: none;
  }

  .image-286 {
    width: 100%;
    height: 100%;
    position: relative;
  }
}

@media screen and (min-width: 1920px) {
  .rectangle-298 {
    width: 422px;
    height: 280px;
    min-height: 280px;
  }

  .frame-60214 {
    max-width: none;
  }

  .text-231 {
    font-size: 72px;
  }

  .scroll-down {
    font-size: 16px;
  }

  .frame-60212 {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .text-232 {
    width: 29%;
    font-size: 18px;
  }

  .frame-60213 {
    width: 100%;
  }

  .frame-60216 {
    width: 46px;
    height: 56px;
  }

  .lets-embark-on-11 {
    font-size: 72px;
  }

  .bottom-bar {
    max-width: none;
  }

  .section-11 {
    grid-column-gap: 188px;
    grid-row-gap: 188px;
  }

  .my-name-is-yifan-1, .my-name-is-yifan-0 {
    font-size: 8.5vw;
  }

  .section-13 {
    grid-column-gap: 210px;
    grid-row-gap: 210px;
    padding-top: 120px;
    padding-bottom: 160px;
    font-size: 14px;
  }

  .section-7 {
    padding-top: 160px;
    padding-bottom: 160px;
  }

  .frame-60170 {
    width: 71%;
  }

  .section-10 {
    padding-top: 160px;
    padding-bottom: 140px;
  }

  .text-236 {
    font-size: 22px;
  }

  .text-237 {
    font-size: 20px;
  }

  .nav-links, .link-item, .link-text, .text-239 {
    font-size: 16px;
  }

  .text-240 {
    font-size: 15px;
  }

  .text-241 {
    font-size: 52px;
  }

  .text-242, .text-243.textanimate-hover, .btn_change {
    font-size: 34px;
  }

  .text-245 {
    font-size: 18px;
  }

  .text-246, .case-study-1, .text-248 {
    font-size: 16px;
  }

  .text-251, ._01-uivisual-design {
    font-size: 15px;
  }

  .text-256 {
    font-size: 34px;
  }

  ._02-ux-design {
    font-size: 15px;
  }

  .text-257 {
    font-size: 34px;
  }

  .text-258 {
    font-size: 15px;
  }

  .text-259 {
    font-size: 52px;
  }

  .text-260 {
    font-size: 18px;
  }

  .frame-60110 {
    grid-row-gap: 20px;
  }

  .an-intuitive-design-anticipates-the-users-needs-and-preferences-leading-to-a-seamless-and-effortless {
    font-size: 18px;
  }

  .text-262, .text-263, .text-264, .text-265, .text-266, .text-267, .text-268, .text-269 {
    font-size: 34px;
  }

  .text-270 {
    font-size: 14px;
  }

  .text-271 {
    font-size: 72px;
  }

  .text-272 {
    font-size: 14px;
  }

  .text-273 {
    font-size: 18px;
  }

  .text-274 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 18px;
  }

  .text-275 {
    font-size: 18px;
  }

  .text-276 {
    font-size: 13px;
  }

  .frame-60260 {
    grid-row-gap: 90px;
  }

  .text-277 {
    font-size: 15px;
  }

  .frame-60201 {
    grid-row-gap: 80px;
  }

  .text-278 {
    font-size: 72px;
  }

  .frame-60264 {
    width: auto;
  }

  .text-279 {
    width: auto;
    font-size: 26px;
  }

  .text-280 {
    font-size: 15px;
  }

  .frame-60121, .frame-60122 {
    width: auto;
  }

  .text-282, .text-285 {
    font-size: 16px;
  }

  .text-287 {
    opacity: 1;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
    font-weight: 300;
  }

  .text-288 {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 11px;
    font-weight: 300;
  }

  .image-rotate {
    width: 100%;
  }
}

@media screen and (max-width: 991px) {
  .rectangle-298 {
    width: 180px;
    height: 180px;
    min-height: 180px;
  }

  .hero-section {
    mix-blend-mode: normal;
    padding-top: 80px;
    padding-bottom: 40px;
  }

  .text-231 {
    font-size: 40px;
  }

  .frame-60212 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .text-232 {
    letter-spacing: 0;
    font-size: 12px;
  }

  .frame-60213 {
    padding-top: 12px;
  }

  .frame-60216 {
    width: 28px;
    height: 30px;
    top: 6px;
  }

  .lets-embark-on-11 {
    font-size: 40px;
  }

  .lets-embark-on-10 {
    letter-spacing: -.02em;
    font-size: 40px;
  }

  .frame-60215 {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }

  .section-11 {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
    padding-top: 120px;
    padding-bottom: 90px;
  }

  .frame-59975 {
    width: 100%;
  }

  .frame-59972 {
    grid-column-gap: 88px;
    grid-row-gap: 88px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .i-have-extensive-experience-designing-web-and-mobile-products-across-various-industries-i-enjoy-working-with-different-clients-and-learning-about-how-i-can-use-design-to-help-their-businesses-check-out-some-of-the-projects-ive-had-the-pleasure-of-working-on {
    font-size: 13px;
  }

  .section-13 {
    padding-bottom: 100px;
  }

  .section-7 {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
  }

  .frame-60170 {
    flex-flow: column;
    width: 80%;
    min-width: 0;
  }

  .section-10 {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    padding-top: 100px;
    padding-bottom: 80px;
  }

  .frame-60224 {
    display: none;
    position: static;
  }

  .text-241 {
    font-size: 28px;
  }

  .cordion_row {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .text-242, .text-243.textanimate-hover, .btn_change {
    font-size: 18px;
  }

  .cordion_content {
    grid-column-gap: 20px;
  }

  .rectangle-301 {
    width: 144px;
    height: 96px;
    min-height: 96px;
  }

  .frame-60232 {
    grid-column-gap: 20px;
  }

  .text-245 {
    font-size: 12px;
  }

  .frame-60234 {
    max-width: none;
  }

  .frame-60190 {
    grid-row-gap: 40px;
  }

  .text-256 {
    font-size: 18px;
  }

  .text-257, .html.css.javascript {
    text-align: left;
    font-size: 18px;
  }

  .text-259 {
    letter-spacing: -.01em;
    width: 100%;
    font-size: 28px;
    line-height: 105%;
  }

  .text-260 {
    width: 80%;
    font-size: 12px;
  }

  .an-intuitive-design-anticipates-the-users-needs-and-preferences-leading-to-a-seamless-and-effortless {
    font-size: 12px;
  }

  .text-262 {
    font-size: 18px;
  }

  .text-263 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 18px;
  }

  .text-264, .text-265, .text-266, .text-267, .text-268, .text-269 {
    font-size: 18px;
  }

  .frame-60253 {
    width: 85%;
  }

  .frame-60255 {
    grid-column-gap: 40px;
  }

  .text-271 {
    font-size: 40px;
  }

  .text-273 {
    font-size: 12px;
  }

  .frame-60256.div1 {
    width: 100%;
  }

  .text-275 {
    font-size: 12px;
  }

  .text-278 {
    color: #14191d;
    font-size: 40px;
  }

  .frame-60264 {
    grid-row-gap: 4px;
  }

  .text-279, .text-281 {
    font-size: 15px;
  }

  .frame-60121, .frame-60122 {
    grid-row-gap: 4px;
  }

  .frame-60267.div2 {
    width: 100%;
  }

  .frame-60268 {
    color: #14191d;
    justify-content: flex-start;
    align-items: center;
  }

  .text-285, .text-286 {
    color: #14191d;
  }

  .frame-60269 {
    display: none;
  }

  .bottom {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }

  .frame-60273, .frame-60275 {
    height: 100px;
  }

  .div-block-17 {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
    width: 60%;
  }

  .hero-sign {
    font-size: 50px;
  }

  .mobile-menu {
    color: #e1f655;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 13px;
    text-decoration: none;
    display: flex;
  }

  .mobile-show {
    z-index: 44;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    background-color: #e1f655;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100vw;
    height: 100vh;
    padding: 48px 32px 42%;
    display: none;
    position: fixed;
  }

  .mobile-item {
    color: #14191d;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
  }

  .div-block-18 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    display: flex;
  }

  .close-btn {
    position: absolute;
    top: 40px;
    right: 32px;
  }
}

@media screen and (max-width: 767px) {
  .navbar {
    z-index: 33;
  }

  ._4916162n-12304454w {
    display: none;
  }

  .frame-60214 {
    justify-content: flex-start;
    align-items: flex-start;
    width: 90%;
    max-width: none;
    padding-bottom: 20px;
  }

  .hero-section {
    mix-blend-mode: normal;
    padding-left: 20px;
    padding-right: 20px;
  }

  .frame-style {
    display: none;
  }

  .scroll-down {
    font-size: 14px;
  }

  .frame-60218 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .frame-60212 {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .text-230 {
    font-size: 14px;
  }

  .text-232 {
    text-align: left;
    font-size: 15px;
  }

  .frame-60213 {
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 4px;
  }

  .text-233 {
    display: none;
  }

  .text-234 {
    font-size: 11px;
  }

  .my-name-is-yifan-1 {
    font-size: 8vw;
  }

  .my-name-is-yifan-0 {
    letter-spacing: -.02em;
    font-size: 8vw;
  }

  .section-13 {
    grid-column-gap: 110px;
    grid-row-gap: 110px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .frame-60120 {
    width: 5vw;
  }

  .section-7 {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .frame-60170 {
    width: 100%;
  }

  .section-10 {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
    padding: 80px 20px 65px;
  }

  .frame-60225 {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .frame-60226 {
    flex-flow: row;
    width: 100%;
    height: auto;
  }

  .text-240 {
    font-size: 11px;
  }

  .frame-60227 {
    width: 90%;
  }

  .text-241 {
    width: 100%;
  }

  .text-242 {
    display: none;
  }

  .frame-60229 {
    width: 100%;
  }

  .text-243.textanimate-hover, .btn_change {
    font-size: 20px;
  }

  .cordion_content {
    width: 100%;
  }

  .text-245 {
    font-size: 15px;
  }

  .text-246, .case-study-1, .text-248, .frame-21282 {
    font-size: 14px;
  }

  .text-249 {
    font-size: 11px;
  }

  .text-250 {
    font-size: 11px;
    display: none;
  }

  .frame-60236 {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
  }

  .frame-60238 {
    margin-left: 0%;
  }

  .text-255 {
    font-size: 14px;
  }

  .frame-60190 {
    width: 100%;
  }

  .text-256 {
    font-size: 20px;
  }

  ._02-ux-design {
    font-size: 14px;
  }

  .text-257, .html.css.javascript {
    font-size: 20px;
  }

  .frame-60242 {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .text-258 {
    font-size: 11px;
  }

  .frame-60243 {
    width: 100%;
  }

  .text-259 {
    width: 90%;
  }

  .text-260 {
    font-size: 15px;
  }

  .frame-60244 {
    width: 100%;
  }

  .frame-60110 {
    grid-row-gap: 12px;
  }

  .an-intuitive-design-anticipates-the-users-needs-and-preferences-leading-to-a-seamless-and-effortless {
    font-size: 15px;
  }

  .text-262, .text-263, .text-264, .text-265, .text-266, .text-267 {
    font-size: 20px;
  }

  .frame-60251 {
    grid-column-gap: 10px;
  }

  .text-268 {
    font-size: 21px;
  }

  .text-269 {
    font-size: 20px;
  }

  .frame-60253 {
    width: 90%;
  }

  .frame-60255 {
    width: 85%;
  }

  .text-270, .text-272 {
    display: none;
  }

  .text-273 {
    width: 71%;
    font-size: 15px;
  }

  .frame-60257 {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 20px;
  }

  .text-274 {
    font-size: 15px;
  }

  .union-6 {
    width: 18px;
    height: 18px;
  }

  .text-275 {
    font-size: 16px;
  }

  .text-276 {
    font-size: 14px;
  }

  .frame-60260 {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 20px;
  }

  .text-277 {
    font-size: 11px;
  }

  .frame-60263 {
    font-size: 18px;
  }

  .text-279 {
    font-size: 20px;
  }

  .text-280 {
    font-size: 14px;
  }

  .text-281 {
    font-size: 20px;
  }

  .text-282, .text-285 {
    font-size: 14px;
  }

  .text-286 {
    font-family: Apfelgrotezk, Arial, sans-serif;
  }

  .image-rotate {
    width: 100%;
    height: auto;
    max-height: 250px;
    overflow: hidden;
  }

  .div-block-17 {
    width: 100%;
  }

  .hero-sign {
    display: none;
  }

  .image-rotate-container {
    width: 84%;
  }

  .mobile-menu {
    display: flex;
  }

  .mobile-show {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .rectangle-298 {
    width: 180px;
    height: 180px;
    min-height: 180px;
  }

  .frame-60214 {
    grid-row-gap: 24px;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }

  .hero-section {
    padding: 80px 20px 40px;
  }

  .frame-style {
    display: block;
  }

  .text-231 {
    font-size: 40px;
  }

  .scroll-down {
    font-family: Robotomono, Arial, sans-serif;
    font-size: 14px;
    font-weight: 300;
  }

  .frame-60218 {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    max-width: none;
    height: 100%;
  }

  .frame-60212 {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: Apfelgrotezk, Arial, sans-serif;
  }

  .text-230 {
    width: auto;
    font-family: Robotomono, Arial, sans-serif;
    font-size: 14px;
    font-weight: 300;
    display: flex;
  }

  .text-232 {
    text-align: left;
    width: 93%;
    font-size: 15px;
  }

  .frame-60216 {
    top: 4px;
  }

  .lets-embark-on-11 {
    font-family: Prodigysans, Arial, sans-serif;
    font-size: 40px;
  }

  .lets-embark-on-10 {
    font-size: 40px;
  }

  .frame-60215 {
    grid-row-gap: 0px;
  }

  .bottom-bar {
    max-width: none;
  }

  .section-11 {
    padding: 40px 20px 48px;
  }

  .my-name-is-yifan-1, .my-name-is-yifan-0 {
    font-size: 12vw;
  }

  .div-block-5 {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .section-13 {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
    padding-top: 48px;
    padding-bottom: 90px;
  }

  .frame-60120 {
    width: 8vw;
  }

  .section-7 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .section-10 {
    padding-top: 68px;
    padding-bottom: 48px;
  }

  .background-video {
    z-index: -2;
    width: 100%;
    height: 100%;
    padding-top: 0;
    position: fixed;
    top: 0;
    bottom: 0;
  }

  .frame-60223 {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .text-236 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 15px;
  }

  .frame-60058 {
    font-family: Apfelgrotezk, Arial, sans-serif;
    font-size: 12px;
  }

  .text-237 {
    font-size: 15px;
  }

  .frame-60224 {
    display: none;
  }

  .frame-60226 {
    justify-content: space-between;
    align-items: flex-start;
  }

  .text-240 {
    font-size: 11px;
  }

  .frame-60063 {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .frame-60227 {
    width: 100%;
  }

  .cordion_content {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 180px;
    min-height: 0;
    max-height: none;
  }

  .frame-60233 {
    margin-left: 0%;
  }

  .text-251 {
    font-size: 11px;
  }

  .frame-60239 {
    width: 100%;
  }

  ._01-uivisual-design {
    font-size: 14px;
  }

  .text-259, .text-260, .frame-60110, .frame-60253, .frame-60255 {
    width: 100%;
  }

  .text-271 {
    width: 94%;
  }

  .text-273 {
    width: 90%;
  }

  .frame-60257 {
    padding-left: 18px;
    padding-right: 18px;
  }

  .text-276 {
    font-size: 12px;
  }

  .frame-60260 {
    grid-row-gap: 50px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .frame-60201 {
    grid-row-gap: 48px;
  }

  .frame-60200 {
    grid-column-gap: 28px;
    grid-row-gap: 28px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .text-279 {
    font-size: 18px;
  }

  .text-280 {
    font-size: 11px;
  }

  .text-281 {
    font-size: 18px;
  }

  .mask-group {
    display: none;
  }

  .bottom {
    padding-left: 18px;
    padding-right: 18px;
  }
}

#w-node-e3f1a1f3-d2aa-3d14-64d7-95ab3ea8cd57-11d88fb3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_917e73b4-8286-b244-7068-2d7f0be66e1f-11d88fb3 {
  justify-self: auto;
}

#w-node-a0d0e803-4fa8-2458-250b-f0c532939b7e-11d88fb3 {
  place-self: start;
}

#w-node-_6b7ce84d-6dae-745c-6e29-d9d0ba5dc36b-17db36c8, #w-node-e8477bdf-8292-2a87-ac32-e627c16dae58-17db36c8, #w-node-_1a5b34d0-ae82-04af-6d16-092782dfa945-17db36c8, #w-node-_8722d70c-17b5-844d-bd37-addd0629d4e9-17db36c8, #w-node-_8722d70c-17b5-844d-bd37-addd0629d4f0-17db36c8, #w-node-e11f1c04-c311-6e24-2b8d-8af56a6329b8-17db36c8, #w-node-_5b57a8e5-6b57-806f-57c6-d87c8b088ec6-17db36c8 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}


@font-face {
  font-family: 'Apfelgrotezk';
  src: url('../fonts/ApfelGrotezk-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apfelgrotezk Brukt';
  src: url('../fonts/ApfelGrotezk-Brukt.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Prodigysans';
  src: url('../fonts/ProdigySans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Prodigysans';
  src: url('../fonts/ProdigySans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Robotomono';
  src: url('../fonts/RobotoMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Robotomono';
  src: url('../fonts/RobotoMono-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Romana';
  src: url('../fonts/OPTIRomanaRoman-Normal.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}