@font-face {
  font-family: Recoleta;
  src: url('../fonts/recoleta-regular-7eb49619205b759292e7ec0a78a61e6c.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Sf Pro Text;
  src: url('../fonts/sf-pro-text-regular-404e4373cba1344d28a4a257152ac8b8.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: white;
  --black: #101010;
  --mid-grey: #878787;
  --silver: #c3c3c3;
  --orange-red: #3575eb;
}

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

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

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

body {
  background-color: var(--white);
  color: var(--black);
  letter-spacing: 0;
  font-family: Sf Pro Text, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: Recoleta, sans-serif;
  font-size: 6em;
  font-weight: 400;
  line-height: 1.1;
}

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

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

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

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

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

p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1.6;
}

a {
  margin-right: 20px;
  font-size: 1em;
  text-decoration: none;
}

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

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

.container {
  width: 100%;
  max-width: 100em;
  margin-left: auto;
  margin-right: auto;
  padding: 8em 13em;
}

.container.is-hero {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  display: flex;
}

.container.is-hero.bottom {
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 10vh;
  padding: 4em 13em;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

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

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

.hero-section {
  z-index: 1;
  opacity: 1;
  position: fixed;
  inset: 0% 0% auto;
}

.mid-grey {
  color: var(--mid-grey);
  display: inline-block;
}

.light-grey {
  color: var(--silver);
  display: inline-block;
}

.hero_shape {
  background-image: url('../images/hero-shape.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: .3em;
  display: inline-block;
}

.hero_heading {
  font-family: Recoleta, sans-serif;
  font-size: 4.9em;
}

.hero_heading.links {
  color: var(--orange-red);
  font-size: 3em;
}

.hero_heading.link {
  color: var(--black);
  margin-top: 20px;
  margin-right: 0;
  font-size: 2em;
  display: inline-block;
}

.hero_heading.getintouch {
  font-size: 4.6em;
}

.work-section {
  z-index: 2;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.work_wrap {
  grid-column-gap: 5.6em;
  grid-row-gap: 5.6em;
  opacity: 1;
  border: 1px #000;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  width: 60.5em;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.work_left {
  transform-origin: 100% 0;
}

.work_right {
  transform-origin: 0 0;
}

.work_card {
  text-align: center;
  width: 100%;
  margin-bottom: 5.5em;
}

.work_img {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 1.7em;
  padding-top: 131%;
  transition: all .5s cubic-bezier(.77, 0, .175, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.work_photo {
  object-fit: cover;
  flex: 0 auto;
  width: 100%;
  max-width: none;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
  inset: 0%;
}

.work_img-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(16, 16, 16, 0.15);
  pointer-events: none;
}

.work_img-badge svg {
  width: 22px;
  height: 22px;
  display: block;
}

.work_img-badge path {
  fill: var(--orange-red);
}

.work_title {
  font-family: Recoleta, sans-serif;
  font-size: 1.4em;
  line-height: 1.8;
}

.work_sub-title {
  opacity: .41;
  font-size: 1.1em;
}

.sticky-wrapper {
  z-index: 2;
  position: relative;
}

.sticky_spacer {
  height: 100vh;
}

.trigger-wrapper {
  z-index: -1;
  padding-top: 100vh;
  position: absolute;
  inset: 0% 0% auto;
}

.trigger {
  width: 100%;
  height: 100vh;
}

.work_photo-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.heading {
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: Recoleta, sans-serif;
  font-size: 1.3em;
}

.div-block {
  margin-bottom: 24px;
}

.field-label {
  margin-bottom: .9em;
  font-family: Recoleta, sans-serif;
}

.submit-button {
  background-color: var(--orange-red);
  border-radius: 8px;
  margin-right: 0;
  font-family: Recoleta, sans-serif;
  font-size: .8vw;
}

.text-field {
  border-radius: 8px;
  margin-bottom: 20px;
}

.text-span {
  color: var(--orange-red);
}

.text-span-2, .text-span-3 {
  color: var(--mid-grey);
}

.text-span-4, .text-span-5 {
  color: var(--orange-red);
}

.link-block {
  margin-right: 14px;
}

.link-block-2 {
  margin-left: 14px;
  margin-right: 10px;
}

.heading-wrapper {
  text-align: left;
  margin-top: 140px;
  margin-bottom: 0;
  padding-left: 0%;
  padding-right: 0%;
}

.projectname {
  color: var(--black);
  text-align: left;
  letter-spacing: -0.02em;
  margin-bottom: 0;
  font-family: Recoleta, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.15;
}

.projectname.platform {
  font-size: 36px;
}

.projectsubhead {
  color: var(--mid-grey);
  text-align: left;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.main-heading {
  color: var(--black);
  text-align: left;
  letter-spacing: -0.01em;
  margin-top: 16px;
  margin-bottom: 20px;
  font-family: Recoleta, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.35;
}

.case-study-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.case-tag {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid rgba(16, 16, 16, 0.12);
  border-radius: 999px;
  font-family: Sf Pro Text, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--black);
  background: #fff;
}

.refresh-tag {
  color: #0c1017;
  text-align: center;
  background-color: #acff5a;
  border-radius: 20px;
  margin-right: 10px;
  padding: 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
  display: inline-block;
  box-shadow: 0 4px 13px #00000026;
}

.refresh-tag.loko {
  box-shadow: none;
  color: var(--black);
  -webkit-text-stroke-width: .5px;
  background-color: #f384da;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
}

.refresh-tag.myndr {
  box-shadow: none;
  color: #fff;
  background-color: #1275de;
  font-weight: 400;
}

.refresh-tag.hive {
  box-shadow: none;
  color: var(--black);
  -webkit-text-stroke-width: .5px;
  background-color: #ffc573;
  font-weight: 400;
}

.refresh-tag.sync {
  box-shadow: none;
  color: #fff;
  background-color: #ff334b;
  font-weight: 400;
}

.refresh-tag.bottlepay {
  box-shadow: none;
  color: var(--black);
  -webkit-text-stroke-width: .5px;
  background-color: #d1d4f0;
  font-weight: 400;
}

.refresh-tag.nydig {
  box-shadow: none;
  background-color: #04d1b8;
}

.refresh-tag.moodys {
  box-shadow: none;
  color: #fff;
  background-color: #0a5cb8;
  font-weight: 400;
}

.paragraph {
  color: var(--black);
  text-align: left;
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
}

.paragraph.caption {
  margin-top: 40px;
}

.case-study-note {
  margin: 12px 0 28px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mid-grey);
}

.construction-notice {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
}

.construction-notice__toggle {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: var(--orange-red);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(53, 117, 235, 0.35);
  transition: padding 0.25s ease, gap 0.25s ease;
  overflow: hidden;
}

.construction-notice__toggle:hover,
.construction-notice__toggle:focus-visible {
  padding: 14px 20px;
  gap: 10px;
}

.construction-notice__icon {
  width: 28px;
  height: 28px;
  flex: none;
  display: block;
}

.construction-notice__icon path {
  fill: #fff;
}

.construction-notice__label {
  font-family: Sf Pro Text, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.25s ease, opacity 0.2s ease;
}

.construction-notice__toggle:hover .construction-notice__label,
.construction-notice__toggle:focus-visible .construction-notice__label {
  max-width: 220px;
  opacity: 1;
}

.experience-item__note {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mid-grey);
}

.paragraph._404 {
  text-align: center;
}

.mask-2 {
  border-radius: 20px;
  min-height: 420px;
  overflow: hidden;
}

.container-6 {
  text-align: left;
  margin-top: 180px;
  margin-bottom: 100px;
}

.columns-9 {
  border-radius: 0;
  overflow: hidden;
}

.icon-3 {
  background-color: var(--orange-red);
  color: #fff;
  text-align: center;
  border-radius: 50px;
  min-width: 60px;
  min-height: 60px;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 20px;
  line-height: 60px;
  display: inline-block;
}

.icon-3.bp {
  background-color: var(--white);
  color: var(--black);
}

.container-7 {
  text-align: left;
  margin-top: 220px;
}

.youtube {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 20px;
  display: block;
  overflow: hidden;
}

.image-12 {
  width: 100%;
}

.slide-17 {
  background-image: url('../images/Explanarion4.png');
  background-position: 0 0;
  background-size: 100%;
}

.slide-17.bottlepay {
  border-radius: 20px;
}

.slide-17.loko {
  background-image: url('../images/04.png');
  background-size: cover;
  border-radius: 20px;
}

.left-arrow-2 {
  min-height: 580px;
  margin-top: 0;
  margin-bottom: 0;
}

.left-arrow-2.mobile {
  min-width: 110px;
  min-height: 420px;
}

.left-arrow-2._1 {
  min-width: 110px;
}

.slide-16 {
  background-image: url('../images/Health.jpeg'), url('../images/03.png');
  background-position: 0 0, 0 0;
  background-size: cover, cover;
}

.slide-16.loko {
  background-image: url('../images/03.png');
  background-position: 0 0;
  background-size: 100%;
  border-radius: 20px;
}

.slide-16.bottlepay {
  background-image: url('../images/Explanarion3.png');
  background-position: 0 0;
  background-size: cover;
  border-radius: 20px;
}

.slide-19 {
  background-image: url('../images/image-72.png');
  background-position: 0 0;
  background-size: cover;
  border-radius: 20px;
}

.slide-7 {
  background-color: #fff;
  background-image: url('../images/2.png');
  background-position: 0 0;
  background-size: cover;
}

.slide-6 {
  background-color: #fff;
  background-image: url('../images/1.png');
  background-position: 0 0;
  background-size: cover;
  padding-bottom: 0;
}

.slide-15 {
  background-image: url('../images/Congestion.jpeg'), url('../images/02.png');
  background-position: 0 0, 0 0;
  background-size: cover, cover;
}

.slide-15.loko {
  background-image: url('../images/02.png');
  background-position: 0 0;
  background-size: cover;
  border-radius: 20px;
}

.slide-15.bottlepay {
  background-image: url('../images/Explanarion2.png');
  background-position: 0 0;
  background-size: cover;
  border-radius: 20px;
}

.heading-7 {
  color: var(--black);
  text-align: left;
  margin-bottom: 24px;
  font-family: Recoleta, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
}

.slider-2 {
  z-index: 0;
  background-color: #fff;
  border-radius: 20px;
  min-height: 0;
  margin-top: 20px;
  margin-bottom: 160px;
  padding-top: 0;
  padding-bottom: 0;
  overflow: visible;
}

.slider-2.bottlepay {
  min-height: 803px;
}

.slide-9 {
  background-color: #fff;
  background-image: url('../images/4.png');
  background-position: 0 0;
  background-size: cover;
}

.slide-nav-2 {
  margin-top: 0;
  position: relative;
  inset: auto 0% 0%;
}

.slide-10 {
  background-color: #fff;
  background-image: url('../images/5.png');
  background-position: 0 0;
  background-size: cover;
}

.slide-8 {
  background-color: #fff;
  background-image: url('../images/3.png');
  background-position: 0 0;
  background-size: cover;
}

.heading-6 {
  color: var(--black);
  text-align: left;
  margin-bottom: 16px;
  font-family: Recoleta, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
}

.heading-6.password {
  text-align: center;
  margin-top: -20px;
  font-size: 26px;
}

.slide-12 {
  background-color: #fff;
  background-image: url('../images/7.png');
  background-position: 0 0;
  background-size: cover;
}

.mask-4 {
  min-height: 590px;
}

.slide-20 {
  background-image: url('../images/Frame-44.png');
  background-position: 0 0;
  background-size: cover;
}

.columns-6 {
  margin-top: 40px;
  margin-left: 0;
  margin-right: 0;
}

.slide-11 {
  background-color: #fff;
  background-image: url('../images/6.png');
  background-position: 0 0;
  background-size: cover;
}

.mask3 {
  min-height: 460px;
}

.mask3.loko {
  border-radius: 20px;
  min-height: 580px;
}

.mask3.bottlepay {
  min-height: 803px;
}

.right-arrow-2 {
  min-height: 580px;
  margin-top: 0;
  margin-bottom: 0;
}

.right-arrow-2.mobile {
  text-align: center;
  min-width: 110px;
  min-height: 420px;
  margin-left: 0;
  padding-left: 0;
  display: block;
}

.right-arrow-2._1 {
  min-width: 110px;
}

.smallhead {
  color: var(--orange-red);
  font-family: Recoleta, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
}

.slide-14 {
  background-image: url('../images/Environmental.jpeg');
  background-position: 0 0;
  background-size: cover;
}

.slide-14.loko {
  background-image: url('../images/01.png');
  background-position: 0 0;
  background-size: 100%;
  border-radius: 20px;
}

.slide-14.bottlepay {
  background-image: url('../images/Explanarion1.png');
  background-position: 0 0;
  background-size: cover;
  border-radius: 20px;
}

.container-11 {
  text-align: left;
  margin-bottom: 300px;
}

.image-23 {
  text-align: center;
  background-color: #fff;
  border-radius: 20px;
  max-width: 100%;
  margin-top: 40px;
  padding: 40px;
}

.icon-4 {
  background-color: var(--orange-red);
  color: #fff;
  border-radius: 70px;
  min-width: 60px;
  min-height: 60px;
  margin-left: 20px;
  line-height: 60px;
}

.icon-4.bp {
  background-color: var(--white);
  color: var(--black);
}

.section-3 {
  margin-top: 220px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.heading-27 {
  color: var(--black);
  font-size: 38px;
  font-weight: 400;
  line-height: 50px;
}

.slide-18 {
  background-image: url('../images/05.png');
  background-position: 0 0;
  background-size: cover;
  border-radius: 20px;
}

.slide-13 {
  background-color: #fff;
  background-image: url('../images/8.png');
  background-position: 0 0;
  background-size: cover;
}

.email-icon {
  color: #2063ff;
  background-color: #7343dd33;
  border: 1px solid #0000;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  padding: 10px;
}

.email-icon.dribbble {
  background-color: #e14d8133;
  padding-top: 7px;
}

.logo {
  color: var(--black);
  align-items: center;
  gap: 12px;
  padding: 15px 15px 15px 0;
  font-family: Lato, sans-serif;
  font-size: 24px;
  line-height: 30px;
  display: flex;
}

.logo:hover {
  color: var(--black);
  text-decoration: none;
}

.nav-back-icon {
  opacity: 1;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  display: block;
}

.dribbble-icon {
  padding: 0;
}

.text-block {
  color: #296dff;
  text-align: left;
  letter-spacing: 1px;
  border-bottom: 0 solid #000;
  font-size: 30px;
  font-weight: 400;
}

.text-block.refresh {
  color: var(--black);
  font-family: Recoleta, sans-serif;
  font-weight: 700;
}

.nav-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 2.25fr max-content max-content max-content;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  place-content: end flex-start;
  place-items: center stretch;
  width: auto;
  margin: 0 0 0 0%;
  padding: 10px 0 0;
  list-style-type: none;
  display: grid;
}

.linkedin-icon {
  text-align: center;
  max-height: 20px;
}

.sticky-nav {
  z-index: 1;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  background-color: #fff;
  padding: 0 0 10px;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.sticky-nav.refresh {
  object-fit: fill;
  background-color: #ffffffb3;
  left: auto;
}

.container-4 {
  text-align: left;
  padding-left: 0;
  display: block;
}

.link-block-9 {
  text-align: center;
  background-color: #08448930;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  padding: 9px 10px 10px;
}

.image-24 {
  display: none;
}

.list-item-2 {
  margin-left: 0;
  padding-left: 0;
}

.projectname-2 {
  color: #f384da;
  text-align: left;
  letter-spacing: 2px;
  margin-bottom: 0;
  font-weight: 500;
}

.projectname-2.myndr {
  color: var(--orange-red);
}

.main-heading-2 {
  color: var(--black);
  text-align: left;
  letter-spacing: 4px;
  margin-top: 10px;
  margin-bottom: 27px;
  font-size: 60px;
  font-weight: 500;
  line-height: 70px;
}

.section-4 {
  margin-top: 220px;
}

.heading-28 {
  color: #f384da;
  text-align: left;
  font-size: 28px;
  font-weight: 500;
}

.heading-28.myndr {
  color: #c775ff;
}

.paragraph-2 {
  color: #fffc;
  text-align: left;
  font-weight: 400;
}

.grid-3 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "Area";
  grid-auto-flow: column;
  place-content: stretch;
  place-items: center;
  margin-top: 100px;
}

.galleryimage {
  width: 750px;
  height: 500px;
}

.galleryimage._1, .galleryimage._2, .galleryimage.heading-3, .galleryimage._4 {
  border-radius: 20px;
  width: auto;
  max-width: 91%;
  height: auto;
  margin: 20px;
}

.column-16 {
  border-radius: 20px;
}

.container-12 {
  text-align: left;
  margin-top: 180px;
  margin-bottom: 100px;
}

.column-2 {
  padding-left: 30px;
}

.heading-29 {
  color: #f384da;
  text-align: left;
  margin-bottom: 40px;
  font-weight: 500;
}

.heading-29.myndr {
  color: #c775ff;
}

.column-15 {
  object-fit: fill;
  border-radius: 20px;
  overflow: visible;
}

.heading-30 {
  color: #f384da;
  text-align: left;
  font-size: 28px;
  font-weight: 500;
}

.heading-30.myndr {
  color: #c775ff;
}

.image-16 {
  border-radius: 20px;
  width: 100%;
  overflow: hidden;
}

.image-15 {
  background-color: #fff;
  border-radius: 20px;
  width: auto;
  height: auto;
  margin-bottom: 20px;
  padding-left: 20px;
}

.image-31, .image-29 {
  border-radius: 20px;
}

.image-30 {
  border-radius: 20px;
  min-width: 100%;
}

.columns-3 {
  margin-bottom: 140px;
}

.tiiqu-features {
  text-align: left;
  border-radius: 20px;
  width: 100%;
  margin: 20px 0 0;
  display: inline-block;
  overflow: hidden;
  box-shadow: 1px 1px 14px 6px #0000000f;
}

.tiiqu-features.lg-re {
  box-shadow: none;
  border-radius: 20px;
  margin-top: 10px;
  overflow: hidden;
}

.link {
  color: #296dff;
}

.columns-4 {
  margin-bottom: 100px;
}

.heading-31 {
  color: #f384da;
  text-align: left;
  font-size: 28px;
  font-weight: 500;
}

.heading-31.myndr {
  color: #c775ff;
}

.projectname-3 {
  color: #f384da;
  text-align: left;
  letter-spacing: 2px;
  margin-bottom: 0;
  font-weight: 500;
}

.projectname-3.hive {
  color: #a87b37;
}

.main-heading-3 {
  color: #fff;
  text-align: left;
  letter-spacing: 4px;
  margin-top: 10px;
  margin-bottom: 27px;
  font-size: 60px;
  font-weight: 500;
  line-height: 70px;
}

.container-8 {
  margin-top: 100px;
}

.container-13 {
  text-align: left;
  margin-top: 180px;
  margin-bottom: 100px;
}

.image-33 {
  border-radius: 20px;
  overflow: hidden;
}

.heading-32 {
  color: #f384da;
  text-align: left;
  margin-bottom: 40px;
  font-weight: 500;
}

.heading-32.hive {
  color: #fcc46f;
}

.html-embed-2 {
  border-radius: 20px;
  min-height: 50px;
  max-height: 719px;
  overflow: hidden;
}

.image-10 {
  border-radius: 20px;
  width: 100%;
  margin-top: 20px;
}

.heading-33 {
  color: #f384da;
  text-align: left;
  font-size: 28px;
  font-weight: 500;
}

.heading-33.hive {
  color: #fcc46f;
}

.projectname-4 {
  color: #f384da;
  text-align: left;
  letter-spacing: 2px;
  margin-bottom: 0;
  font-weight: 500;
}

.projectname-4.sync {
  color: #f97087;
}

.main-heading-4 {
  color: #fff;
  text-align: left;
  letter-spacing: 4px;
  margin-top: 10px;
  margin-bottom: 27px;
  font-size: 60px;
  font-weight: 500;
  line-height: 70px;
}

.container-14 {
  text-align: left;
  margin-top: 180px;
  margin-bottom: 100px;
}

.image-34 {
  width: 100%;
}

.heading-34 {
  color: #f384da;
  text-align: left;
  margin-bottom: 40px;
  font-weight: 500;
}

.heading-34.sync {
  color: #f97087;
}

.youtube-4 {
  border-radius: 20px;
  overflow: hidden;
}

.heading-35 {
  color: #f384da;
  text-align: left;
  font-size: 28px;
  font-weight: 500;
}

.heading-35.sync {
  color: #f97087;
}

.youtube-3 {
  border-radius: 20px;
  overflow: hidden;
}

.container-15 {
  text-align: left;
  margin-top: 180px;
  margin-bottom: 100px;
}

.heading-36 {
  color: #f384da;
  text-align: left;
  margin-bottom: 40px;
  font-weight: 500;
}

.heading-36.sync {
  color: #f97087;
}

.heading-37 {
  color: #f384da;
  text-align: left;
  font-size: 28px;
  font-weight: 500;
}

.heading-37.sync {
  color: #f97087;
}

.youtube-5 {
  border-radius: 20px;
  overflow: hidden;
}

.features {
  margin-bottom: 0;
}

.image-35 {
  border-radius: 20px;
}

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

  p,
  .paragraph {
    font-size: 17px;
  }

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

  .work_card {
    font-size: 1.4em;
  }

  .heading-wrapper {
    margin-top: 115px;
    padding-left: 2%;
    padding-right: 2%;
  }

  .projectname,
  .projectname.platform {
    font-size: 32px;
  }

  .main-heading {
    font-size: 24px;
  }

  .refresh-tag {
    font-size: 12px;
    line-height: 24px;
  }

  .refresh-tag.loko {
    flex: none;
    font-size: 12px;
    line-height: 24px;
  }

  .refresh-tag.hive {
    flex: none;
    height: auto;
  }

  .refresh-tag.sync {
    flex: none;
    align-self: auto;
    height: auto;
  }
}

@media screen and (max-width: 767px) {
  .hero-section, .work-section {
    position: relative;
  }

  .work_wrap {
    grid-column-gap: 5vw;
    grid-row-gap: 5vw;
  }

  .work_card {
    margin-bottom: 9vw;
  }

  .sticky_spacer {
    display: none;
  }

  .heading-wrapper {
    margin-top: 220px;
    padding-left: 5%;
    padding-right: 5%;
  }

  .main-heading {
    margin-top: 70px;
    font-size: 38px;
    line-height: 43px;
  }

  .section-3 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .text-block.refresh {
    padding-left: 20px;
  }

  .nav-grid {
    grid-column-gap: 20px;
    text-align: center;
    grid-template-rows: repeat(auto-fit, 50px);
    grid-template-columns: minmax(358px, .25fr) max-content max-content max-content;
    width: 568px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .sticky-nav {
    width: 100vw;
    position: fixed;
    inset: 0% auto auto 0%;
  }

  .main-heading-2 {
    margin-top: 70px;
    font-size: 38px;
    line-height: 43px;
  }

  .section-4 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .main-heading-3, .main-heading-4 {
    margin-top: 70px;
    font-size: 38px;
    line-height: 43px;
  }

  .features {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 479px) {
  body {
    font-size: 16px;
  }

  p,
  .paragraph {
    font-size: 16px;
  }

  .container.is-hero {
    height: auto;
    padding-top: 16.9em;
    padding-bottom: 0;
  }

  .container.is-hero.bottom {
    padding-top: 0;
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .hero_heading {
    font-size: 13vw;
  }

  .work_wrap {
    display: block;
  }

  .heading-wrapper {
    margin-top: 140px;
    padding-left: 10%;
    padding-right: 10%;
  }

  .main-heading {
    letter-spacing: 0;
    margin-top: 12px;
    font-size: 22px;
    line-height: 1.35;
  }

  .projectname,
  .projectname.platform {
    font-size: 28px;
  }

  .heading-6,
  .heading-7 {
    font-size: 20px;
  }

  .refresh-tag.loko {
    overflow: hidden;
  }

  .mask-2 {
    min-height: auto;
    max-height: 136px;
  }

  .container-6 {
    opacity: 1;
    padding-left: 0;
    padding-right: 0;
  }

  .icon-3 {
    min-width: 32px;
    min-height: 32px;
    margin-left: auto;
    font-size: 14px;
    line-height: 32px;
  }

  .slide-17 {
    background-size: contain;
  }

  .left-arrow-2 {
    min-height: 100px;
    max-height: 175px;
  }

  .left-arrow-2.mobile {
    min-height: 136px;
    max-height: 136px;
  }

  .left-arrow-2._1 {
    max-height: 200px;
  }

  .slide-16 {
    background-position: -9px 13px, 0 0;
    background-size: auto 147px, cover;
  }

  .slide-16.loko, .slide-7 {
    background-size: contain;
  }

  .slide-6 {
    background-position: 0 0;
    background-size: contain;
  }

  .slide-15 {
    background-position: -9px 14px, 0 0;
    background-size: auto 147px, cover;
  }

  .slide-15.loko {
    background-size: contain;
  }

  .heading-7 {
    margin-bottom: 10px;
    font-size: 20px;
  }

  .slider-2 {
    background-color: #0000;
    min-height: auto;
    margin-bottom: 0;
  }

  .slide-9 {
    background-size: contain;
  }

  .slide-nav-2 {
    opacity: 0;
    margin-top: 20px;
    padding-top: 0;
  }

  .slide-10, .slide-8 {
    background-size: contain;
  }

  .heading-6 {
    font-size: 20px;
  }

  .slide-12 {
    background-size: contain;
  }

  .mask-4 {
    min-height: 90px;
    max-height: 200px;
  }

  .slide-20 {
    background-position: 50%;
    background-size: auto 200px;
  }

  .slide-11 {
    background-size: contain;
  }

  .mask3 {
    min-height: 170px;
    max-height: 170px;
  }

  .mask3.loko {
    max-width: 100%;
    min-height: 0;
    max-height: 170px;
  }

  .right-arrow-2 {
    min-height: 170px;
    max-height: 175px;
  }

  .right-arrow-2.mobile {
    min-height: 136px;
    max-height: 136px;
  }

  .right-arrow-2._1 {
    max-height: 200px;
  }

  .slide-14 {
    background-position: 65% 32%;
    background-size: auto 146px;
  }

  .slide-14.loko {
    background-size: contain, cover;
    min-height: 8px;
    max-height: none;
    overflow: visible;
  }

  .container-11 {
    margin-bottom: 0;
  }

  .icon-4 {
    min-width: 32px;
    min-height: 32px;
    margin-right: auto;
    font-size: 14px;
    line-height: 32px;
  }

  .section-3 {
    margin-top: 100px;
  }

  .heading-27 {
    font-size: 20px;
    line-height: 30px;
  }

  .slide-18, .slide-13 {
    background-size: contain;
  }

  .email-icon, .list-item, .dribbble-icon {
    opacity: 0;
  }

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

  .text-block.refresh {
    font-size: 16px;
    line-height: 24px;
  }

  .nav-grid {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: 50px;
    grid-template-columns: minmax(200px, 1fr) 1fr 1fr 1fr;
    grid-auto-flow: row;
    width: 100vw;
  }

  .linkedin-icon {
    opacity: 0;
  }

  .sticky-nav {
    padding: 0;
  }

  .container-4 {
    max-width: 320vw;
    overflow: visible;
  }

  .main-heading-2 {
    letter-spacing: 0;
    margin-top: 20px;
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
  }

  .section-4 {
    margin-top: 100px;
  }

  .heading-28 {
    font-size: 20px;
  }

  .container-12 {
    opacity: 1;
    padding-left: 0;
    padding-right: 0;
  }

  .container-12.lg-wires {
    opacity: 0;
    height: 0;
    margin-top: 20px;
    margin-bottom: 0;
  }

  .heading-29 {
    margin-bottom: 10px;
    font-size: 20px;
  }

  .heading-30, .heading-31 {
    font-size: 20px;
  }

  .main-heading-3 {
    letter-spacing: 0;
    margin-top: 20px;
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
  }

  .container-13 {
    opacity: 1;
    padding-left: 0;
    padding-right: 0;
  }

  .heading-32 {
    margin-bottom: 10px;
    font-size: 20px;
  }

  .heading-33 {
    font-size: 20px;
  }

  .main-heading-4 {
    letter-spacing: 0;
    margin-top: 20px;
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
  }

  .container-14 {
    opacity: 1;
    padding-left: 0;
    padding-right: 0;
  }

  .heading-34 {
    margin-bottom: 10px;
    font-size: 20px;
  }

  .heading-35 {
    font-size: 20px;
  }

  .container-15 {
    opacity: 1;
    padding-left: 0;
    padding-right: 0;
  }

  .heading-36 {
    margin-bottom: 10px;
    font-size: 20px;
  }

  .heading-37 {
    font-size: 20px;
  }
}

#w-node-f78a0280-39c3-fe27-a3f7-98d8d15e5255-d15e5252 {
  justify-self: auto;
}

#w-node-_6ed6ed27-9c58-bf33-12ef-b264c80891b6-207f3799 {
  grid-area: Area;
  justify-self: end;
}

#w-node-_6ed6ed27-9c58-bf33-12ef-b264c80891b7-207f3799 {
  justify-self: start;
}

#w-node-_6ed6ed27-9c58-bf33-12ef-b264c80891b8-207f3799 {
  justify-self: end;
}

#w-node-_6ed6ed27-9c58-bf33-12ef-b264c80891b9-207f3799 {
  justify-self: start;
}

@media screen and (max-width: 479px) {
  #w-node-f78a0280-39c3-fe27-a3f7-98d8d15e5255-d15e5252 {
    justify-self: start;
  }
}


@font-face {
  font-family: 'Recoleta';
  src: url('../fonts/recoleta-regular-7eb49619205b759292e7ec0a78a61e6c.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sf Pro Text';
  src: url('../fonts/sf-pro-text-regular-404e4373cba1344d28a4a257152ac8b8.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Site footer */
.site-footer {
  width: 100%;
  padding: 2.5em 0 3.5em;
  position: relative;
  z-index: 3;
  background: #fff;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35em 0.55em;
}

.site-footer a {
  margin-right: 0;
  font-size: 1.05em;
  line-height: 1.4;
  color: var(--mid-grey);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: var(--black);
}

.site-footer__sep {
  font-size: 1.05em;
  color: var(--silver);
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .site-footer {
    padding: 3em 6vw 4.5em;
  }

  .site-footer a,
  .site-footer__sep {
    font-size: 3.2vw;
  }
}