:root {
  --white: white;
  --black: black;
}

body {
  color: #333;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.body {
  background-color: #18192d;
  max-width: 100%;
  line-height: 32px;
}

.hero-title {
  color: #fff;
  text-align: center;
  letter-spacing: 8px;
  text-transform: uppercase;
  text-shadow: 0 0 16px #fbffff1a, 0 0 8px #dfeaeb80;
  font-family: Prototype, sans-serif;
  font-size: 24px;
  line-height: 130%;
}

.hero-paragraph {
  color: #fff;
  text-align: center;
  letter-spacing: .03em;
  flex-wrap: wrap;
  place-content: center;
  align-items: baseline;
  margin-top: 24px;
  padding-left: 60px;
  padding-right: 60px;
  font-family: Roboto, sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 32px;
  display: flex;
}

.hero.title-wrapper {
  padding-left: 70px;
  padding-right: 70px;
  position: relative;
}

.icon-star {
  width: 37px;
  height: 37px;
  position: absolute;
  top: -13px;
  left: 43px;
}

.hero-container {
  flex-wrap: wrap;
  align-content: flex-start;
  max-width: 1440px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.dapp-title-wrapper {
  color: #fff;
  letter-spacing: 5px;
  text-transform: uppercase;
  text-shadow: 0 0 8px #dfeaeb80, 0 0 16px #fbffff1a;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 24px;
  padding-right: 24px;
  font-family: Prototype, sans-serif;
  font-size: 23px;
  display: flex;
}

.dapp-title {
  display: inline-block;
}

.dapp-title.zklend {
  color: #cdbfff;
}

.dapp-title.institutional {
  color: #f6921e;
}

.dapp-text {
  letter-spacing: 1px;
  text-transform: none;
  text-shadow: none;
  padding-top: 8px;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 23px;
  display: inline-block;
}

.hero-column-left {
  flex-flow: wrap;
  justify-content: center;
  align-items: stretch;
  width: 65%;
  padding-left: 0;
  padding-right: 0;
  display: flex;
}

.hero-left-top-row {
  flex-wrap: wrap;
  place-content: center;
  align-items: center;
  width: 100%;
  height: 570px;
  display: flex;
  position: relative;
}

.hero-column-right {
  background-image: url('../images/stroke-grid.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: stretch;
  width: 35%;
  display: flex;
}

.dapp-cta {
  position: absolute;
}

.dapp-cta.zklend {
  background-image: url('../images/artemis-line-fade-p-500.png');
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 216px;
}

.dapp-cta.institutional {
  background-image: url('../images/apollo-line-fade.png');
  background-position: 90% 100%;
  background-repeat: no-repeat;
  background-size: 330px;
  width: 100%;
  height: 216px;
}

.dapp-cta.institutional.border-right {
  background-image: url('../images/apollo-line-fade-p-500_1.png');
  border-right: 1px solid #9798a3;
}

.hero-dapp-cta-container {
  flex-wrap: wrap;
  align-items: center;
  padding-left: 0;
  padding-right: 0;
  display: flex;
}

.dapp-logo-wrapper {
  align-items: center;
  width: 100%;
  height: 216px;
  display: flex;
  position: relative;
}

.dapp-text-wrapper {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 64px;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
}

.dapp-text-wrapper.institutional {
  justify-content: flex-end;
  position: relative;
}

.dapp-text-wrapper.institutional.border-right {
  border-right: 1px solid #9798a3;
  justify-content: center;
}

.dapp-text-wrapper.zklend {
  justify-content: center;
  position: relative;
}

.coming-soon {
  color: #fffc;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family: Roboto, sans-serif;
  font-size: 16px;
}

.protocol-subtitle {
  color: #cc98fe;
  text-align: center;
  letter-spacing: 4px;
  text-transform: uppercase;
  width: 100%;
  padding: 8px 48px 24px;
  font-family: Roboto, sans-serif;
  font-size: 20px;
}

.protocol-subtitle.zklend-institutional {
  color: #f6d37b;
}

.zklend-section {
  border-top: 1px solid #9798a3;
  border-bottom: 1px solid #9798a3;
  position: relative;
}

.zklend-container {
  border-left: 1px solid #9798a3;
  flex-direction: row;
  max-width: 1440px;
  height: 100%;
  min-height: 870px;
  max-height: 870px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.zklend-column-left {
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  padding-left: 50px;
  padding-right: 50px;
  display: flex;
}

.zklend-column-right {
  border-left: 1px solid #9798a3;
  align-items: center;
  padding-left: 0;
  padding-right: 0;
  display: flex;
}

.protocol-paragraph {
  color: #fffc;
  text-align: center;
  width: 100%;
  margin-bottom: 12px;
  padding-top: 12px;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 25.44px;
}

.dapp-section-cta-text {
  color: #fff;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-family: Prototype, sans-serif;
  font-size: 20px;
  display: inline-block;
}

.zklend-cta {
  border: 1px solid #fff;
  border-radius: 100px;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
  padding: 13px 30px;
  display: flex;
}

.zklend-cta.desktop {
  z-index: 100;
  cursor: pointer;
  position: relative;
}

.zklend-cta.mobile {
  display: none;
}

.zklend-left-top-row {
  flex-wrap: wrap;
  place-content: center;
  align-items: center;
  width: 100%;
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
}

.zklend-constellations-logo {
  padding-top: 24px;
  padding-bottom: 24px;
}

.footer {
  text-align: center;
  align-items: flex-start;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 40px;
  padding-bottom: 40px;
}

.footer-link-container {
  text-align: left;
  justify-content: flex-start;
  margin-bottom: 40px;
  display: flex;
}

.footer-link {
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 3px;
  font-family: Roboto, sans-serif;
  font-size: 13px;
  text-decoration: none;
  transition: all .4s;
  display: inline-block;
  position: relative;
}

.footer-link:hover {
  text-decoration: none;
}

.footer-link.dapp-title {
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
}

.list {
  color: #fff;
}

.link-column {
  padding-left: 24px;
  padding-right: 24px;
}

.social-icon {
  min-width: 32px;
  max-width: 32px;
  margin-right: 32px;
}

.social-icon-wrapper {
  grid-row-gap: 20px;
  text-align: left;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 0;
  display: flex;
}

.copyright {
  color: #fff;
  text-align: left;
  width: 100%;
  margin-top: auto;
  margin-left: 24px;
  padding-left: 64px;
  padding-right: 64px;
  font-family: Roboto, sans-serif;
  font-size: 10px;
}

.hero-paragraph-inline {
  text-align: left;
  font-size: 20px;
  line-height: 24px;
  display: inline;
}

.hero-paragraaph-inline-wrapper {
  margin-left: 5px;
  margin-right: 5px;
  display: inline;
  position: relative;
}

.text-ellipse {
  width: 120%;
  max-width: 200%;
  height: auto;
  position: absolute;
  top: -7px;
  left: -30px;
}

.hero-main-visual-container {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: block;
  position: relative;
}

.nav-item {
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  cursor: pointer;
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-decoration: none;
  transition: all .4s;
  display: inline-block;
  position: relative;
}

.nav-item:hover {
  text-decoration: none;
}

.nav-item.w--current {
  color: #fff;
}

.brand {
  background-image: url('../images/Logo-zkLend.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 80px;
  height: 70px;
  margin-left: 24px;
  margin-right: 24px;
}

.navbar {
  z-index: 990;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  transition: all .2s;
  display: flex;
  position: fixed;
  top: 0;
}

.nav-container {
  flex-wrap: nowrap;
  flex: 1;
  order: 0;
  justify-content: space-between;
  align-self: center;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
}

.nav-menu {
  text-align: right;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  margin-left: 24px;
  margin-right: 24px;
  display: flex;
}

.institutional-section {
  z-index: 0;
  border-bottom: 1px solid #9798a3;
  position: relative;
}

.institutional-container {
  border-right: 1px solid #9798a3;
  flex-direction: row-reverse;
  max-width: 1440px;
  height: 100%;
  min-height: 870px;
  max-height: 870px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.institutional-column-left {
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  padding-left: 50px;
  padding-right: 50px;
  display: flex;
}

.institutional-column-right {
  border-right: 1px solid #9798a3;
  align-items: center;
  padding-left: 0;
  padding-right: 0;
  display: flex;
}

.institutional-left-top-row {
  flex-wrap: wrap;
  place-content: center;
  align-items: center;
  width: 100%;
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
}

.institutional-logo {
  padding-top: 24px;
  padding-bottom: 24px;
}

.institutional-cta {
  border: 1px solid #fff;
  border-radius: 100px;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
  padding: 13px 30px;
  display: flex;
}

.institutional-cta.desktop {
  position: relative;
}

.institutional-cta.mobile {
  display: none;
}

.trusted-institutions-section {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 150px;
  padding-bottom: 150px;
  position: relative;
}

.section-title {
  color: #fff;
  text-align: center;
  letter-spacing: 9px;
  text-transform: uppercase;
  text-shadow: 0 0 8px #dfeaeb80, 0 0 16px #fbffff1a;
  font-family: Prototype, sans-serif;
  font-size: 32px;
}

.section-title.text-left {
  text-align: left;
}

.section-title.roadmap-title {
  text-align: left;
  max-width: 300px;
  position: absolute;
  bottom: 40px;
  left: 72px;
}

.section-title.institution-title {
  font-size: 24px;
}

.section-title.media-title, .section-title.securedby-title {
  margin-top: 80px;
  font-size: 24px;
}

.icon-wrapper {
  flex-wrap: wrap;
  max-width: 1200px;
  margin-top: 40px;
  padding-bottom: 40px;
  padding-left: 58px;
  padding-right: 58px;
  display: flex;
}

.institutions-partners-icon {
  object-fit: contain;
  width: auto;
  max-width: 220px;
  height: auto;
  min-height: 42px;
  max-height: 48px;
  overflow: hidden;
}

.institutions-partners-icon.oig {
  max-height: 50px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
}

.institutions-partners-icon.maven-capital {
  max-height: 44px;
}

.institutions-partners-icon.re7capital {
  max-height: 70px;
}

.institutions-partners-icon.primitive {
  max-height: 44px;
}

.icon-container {
  text-align: center;
  border-top: .5px solid #9798a3;
  border-left: .5px solid #9798a3;
  border-right: .5px #9798a3;
  flex-wrap: wrap;
  place-content: center;
  align-items: center;
  width: 25%;
  max-width: 300px;
  max-height: 87px;
  padding: 20px;
  display: flex;
  position: relative;
}

.icon-container.no-left-border {
  border-left-style: none;
}

.icon-container.no-left-border.no-top-border, .icon-container.no-top-border, .icon-container.mobile-no-left-border.no-top-border {
  border-top-style: none;
}

.table-star {
  width: 22px;
  position: absolute;
  top: -11px;
  right: -11.5px;
}

.table-star.mobile-only {
  display: none;
}

.token-distribution-section {
  height: 900px;
  margin: 80px auto 40px;
  position: relative;
}

.tokenomic-title-section {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}

.td-item-title {
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 0 16px #fbffff1a, 0 0 8px #dfeaeb80;
  font-family: Prototype, sans-serif;
  line-height: 22px;
  display: block;
  position: relative;
  top: auto;
  bottom: 0;
}

.td-item-title.td-2 {
  width: 80%;
}

.td-item-number {
  opacity: .5;
  color: #fff;
  font-family: Roboto, sans-serif;
  display: block;
}

.td-amount-wrapper {
  width: 200px;
  position: fixed;
}

.td-amount-wrapper.tdt-1 {
  position: absolute;
  top: 450px;
  right: 685px;
}

.td-amount-wrapper.td-4 {
  width: 200px;
  position: absolute;
  top: 313px;
  right: 61px;
}

.td-amount-wrapper.td-3 {
  position: absolute;
  top: 378px;
  right: 311px;
}

.td-amount-wrapper.td-2 {
  position: absolute;
  top: 390px;
  right: 485px;
}

.roadmap-section {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-image: url('../images/roadmap-grid.svg');
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  flex-wrap: nowrap;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: stretch;
  max-width: 1440px;
  margin-top: 120px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}

.roadmap-container {
  width: 100%;
  min-height: 560px;
  position: relative;
}

.roadmap-phrase-active {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  opacity: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: block;
  position: relative;
}

.roadmap-text-wrapper-phrase-1 {
  position: absolute;
  top: -169px;
  left: 343px;
}

.roadmap-phase-title {
  color: #54cdd6;
  letter-spacing: 7px;
  text-transform: uppercase;
  font-family: Prototype, sans-serif;
  font-size: 32px;
  display: inline-block;
}

.roadmap-phase-title.text-white {
  color: #fff;
}

.roadmap-paragraph {
  color: #fff;
  width: 325px;
  margin-top: 4px;
  margin-bottom: 4px;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}

.roadmap-dot-inactive {
  object-fit: contain;
  width: 65px;
}

.roadmap-dot-inactive.phrase-3 {
  position: absolute;
  top: 84px;
  left: 387px;
}

.roadmap-dot-inactive.phrase-4 {
  position: absolute;
  top: 413px;
  left: 834px;
}

.roadmap-dot-inactive.phrase-1 {
  position: absolute;
  top: 16px;
  left: 123px;
}

.roadmap-line-short {
  background-image: url('../images/roadmap-pointer-inactive.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  width: 435px;
  height: 130px;
  position: absolute;
}

.roadmap-line-short.phrase-3 {
  background-image: url('../images/roadmap-line-active-moible.svg');
  background-size: contain;
  width: 418px;
  position: absolute;
  top: 158px;
  left: 662px;
}

.roadmap-line-short.phrase-4 {
  position: absolute;
  top: 353px;
  left: 864px;
}

.roadmap-line-short.phrase-2 {
  top: 23px;
  left: 416px;
}

.roadmap-text-wrapper-phrase-2 {
  position: absolute;
  top: -8px;
  left: 520px;
}

.roadmap-phrase-inactive {
  opacity: .4;
  display: block;
}

.roadmap-text-wrapper-phrase-3 {
  position: absolute;
  top: 128px;
  left: 763px;
}

.roadmap-text-wrapper-phrase-4 {
  position: absolute;
  top: 322px;
  left: 964px;
}

.dapp-cta-section {
  border-top: 1px solid #9798a3;
  border-bottom: 1px solid #9798a3;
}

.mobile-menu-cta-column {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.link-zklend {
  width: 100%;
  height: 100%;
  text-decoration: none;
  position: relative;
}

.link-institutional {
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.tokenomic-visual-container {
  min-height: 1000px;
  position: relative;
}

.tokenomic-visual {
  width: 100%;
  max-width: 1440px;
  min-height: 1000px;
  max-height: 1000px;
  position: absolute;
  left: 45%;
  transform: translate(-50%);
}

.main-hero-section {
  margin-top: 86px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.hero-left-middle-border {
  width: 500%;
  height: 1px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.line-block {
  border-bottom: 1px solid #9798a3;
  width: 500%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.div-block-18-copy {
  border-bottom: 1px solid #9798a3;
  width: 500%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.modal-bg {
  z-index: 998;
  background-color: #000c;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: none;
  position: fixed;
  top: 0;
  overflow: hidden;
}

.modal-container {
  z-index: 999;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 20px;
  width: 100%;
  max-width: 920px;
  height: 100%;
  max-height: 490px;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 -3px 14px 10px #00000040;
}

.modal-container.modal-whitepaper {
  max-height: 570px;
  display: none;
}

.modal-wrapper {
  background-image: linear-gradient(287deg, #1b146499 12.8%, #5286d899 99%);
  border-radius: 20px;
  width: 100%;
  height: 100%;
  position: relative;
}

.close {
  z-index: 99;
  cursor: pointer;
  position: absolute;
  top: 40px;
  right: 60px;
}

.burger-menu-btn {
  display: none;
}

.tokenomic-key-visual {
  background-image: url('../images/tokenomic-key-visual.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  min-width: 2300px;
  max-width: 2300px;
  min-height: 1000px;
  max-height: 1000px;
  position: absolute;
  top: 0;
  right: 60px;
  overflow: visible;
}

.list-item {
  align-items: flex-start;
  min-width: 120px;
  display: flex;
}

.list-item.inactive {
  opacity: .5;
}

.roadmap-orbit-outter {
  object-fit: cover;
  background-image: url('../images/roadmap-orbit-outter.svg');
  background-position: 0 0;
  background-size: auto;
  width: auto;
  min-width: 980px;
  min-height: 500px;
  position: absolute;
  top: 0;
  left: 0;
}

.roadmap-line-tall {
  background-image: url('../images/roadmap-pointer.svg');
  background-repeat: no-repeat;
  background-size: contain;
  width: 530px;
  height: 200px;
  position: absolute;
  top: -139px;
  left: 151px;
}

.roadmap-line-tall.phrase-1 {
  background-image: url('../images/roadmap-pointer-tall-inactive.svg');
}

.roadmap-orbit-inner {
  background-image: url('../images/roadmap-orbit-inner.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: scroll;
  width: 100%;
  height: 520px;
  position: absolute;
  top: 30px;
}

.mobile-menu-overlay {
  display: none;
}

.hero-main-visual {
  width: 100%;
  min-width: 300px;
  max-width: 850px;
  height: 100%;
  min-height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.main-visual-animation {
  width: 120%;
  position: absolute;
  top: 52%;
  left: 49.7%;
  transform: translate(-50%, -50%);
}

.zklend-section-anchor, .institutional-section-anchor {
  position: absolute;
  top: -50px;
}

.token-distribution-section-anchor {
  position: absolute;
  top: -120px;
}

.roadmap-section-anchor {
  position: absolute;
  top: -280px;
}

.zklend-cta-bkg {
  z-index: -1;
  opacity: 0;
  background-image: linear-gradient(87deg, #4d25ff99 23%, #9744f199 64%);
  width: 100%;
  height: 100%;
  transition: all .4s;
  position: absolute;
  bottom: 0;
  left: 0;
}

.zklend-cta-bkg.rounded {
  background-image: linear-gradient(87deg, #4d25ff99 23%, #9744f199 64%);
  border-radius: 100px;
}

.institutional-cta-bkg {
  z-index: -1;
  opacity: 0;
  background-image: linear-gradient(87deg, #f6921e99 23%, #f0505499 64%);
  width: 100%;
  height: 100%;
  transition: all .4s;
  position: absolute;
  bottom: 0;
  left: 0;
}

.institutional-cta-bkg.rounded {
  border-radius: 100px;
}

.hero-section-anchor {
  position: absolute;
  top: -100px;
}

.notification-bar {
  background-image: linear-gradient(#5328f4cc, #5328f4cc);
  width: 100%;
  height: 32px;
}

.nav-wrapper {
  width: 100%;
}

.scam-label {
  color: #efd641;
  text-transform: uppercase;
  background-color: #292926;
  border-radius: 4px;
  margin-right: 16px;
  padding: 4px 8px;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  display: inline-block;
}

.notification-wrapper {
  justify-content: space-between;
  align-items: center;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
}

.scam-text {
  color: #fff;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  display: inline-block;
}

.notification-close-btn {
  cursor: pointer;
  width: 12px;
  height: 12px;
  margin-left: 16px;
}

.notification-content {
  margin-top: auto;
  margin-bottom: auto;
  line-height: 32px;
}

.modal-body {
  text-align: center;
  padding: 100px 60px 40px;
}

.whitepaper-header {
  color: #fff;
  text-align: left;
  letter-spacing: 7px;
  font-family: Prototype, sans-serif;
  font-size: 20px;
  line-height: 24px;
}

.whitepaper-body {
  color: #fff;
  text-align: left;
  height: 250px;
  margin-top: 32px;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  line-height: 23.85px;
  overflow: auto;
}

.whitepaper-download-btn {
  z-index: 0;
  color: #fff;
  letter-spacing: 6px;
  text-transform: uppercase;
  border: 1px solid #fff;
  border-radius: 30px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  padding: 13px 30px;
  font-family: Prototype, sans-serif;
  font-size: 20px;
  line-height: 31.8px;
  text-decoration: none;
  display: block;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%);
}

.starknet-logo {
  width: 100%;
  max-width: 120px;
  height: auto;
  margin-left: 6px;
  margin-right: 6px;
  position: relative;
  top: 5px;
  left: 4px;
}

.wp-subtitle {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
}

.wp-text {
  text-align: left;
  font-size: 12px;
  line-height: 15px;
}

.wp-bold {
  text-align: left;
  display: inline-block;
}

.wp-string {
  display: inline;
}

.wp-paragraph {
  padding-bottom: 8px;
  font-size: 12px;
  line-height: 15px;
}

.tokenomic-container {
  max-width: 400%;
  height: 100vh;
  min-height: 1000px;
  margin-bottom: 1000px;
  position: relative;
}

.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;
}

.institutional-blob {
  z-index: -5;
  opacity: .8;
  filter: blur(150px);
  background-image: radial-gradient(circle closest-corner, #f6921ecc 2.6%, #f6921e87 41.67%, #efd64138 101%);
  width: 600px;
  height: 450px;
  display: block;
  position: absolute;
  inset: auto auto 43px 440px;
}

.hero-blob {
  z-index: -5;
  opacity: .5;
  filter: blur(150px);
  background-image: radial-gradient(circle closest-corner, #54cdd6, #5286d8 46.35%, #182395);
  width: 850px;
  height: 450px;
  display: block;
  position: absolute;
  top: 78px;
  left: 35px;
}

.zklend-blob {
  z-index: -1;
  opacity: 1;
  filter: blur(400px);
  background-image: radial-gradient(circle closest-corner, #896aff, #572aff 41.15%, #1f0095);
  width: 600px;
  height: 350px;
  position: absolute;
  top: 0;
  left: -449px;
}

.institutions-blob {
  z-index: -1;
  opacity: 1;
  filter: blur(150px);
  background-image: radial-gradient(circle closest-corner, #5286d8b3, #896affb3 52.08%, #2700bab3);
  width: 1200px;
  height: 600px;
  position: absolute;
  top: -61px;
  bottom: 0;
  left: 0;
}

.tokenomic-blob {
  z-index: -1;
  opacity: 1;
  filter: blur(200px);
  background-image: radial-gradient(circle, #54cdd6, #5286d8 46.35%, #182395);
  width: 1200px;
  height: 800px;
  position: absolute;
  bottom: 50px;
  left: -450px;
}

.text-cta {
  color: #fff;
  letter-spacing: 3px;
  white-space: nowrap;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.arrow-right {
  width: 80px;
  height: auto;
  padding-left: 12px;
}

.cta-link-block {
  z-index: 100;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: #fff;
  cursor: pointer;
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  text-decoration: none;
  display: block;
  position: relative;
}

.dapp-section-cta-text-2 {
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: Prototype, sans-serif;
  font-size: 18px;
  display: inline-block;
}

.listing {
  margin-top: 4px;
  padding-left: 16px;
}

.roadmap-dot-active {
  object-fit: contain;
  width: 385px;
  display: block;
  position: absolute;
  top: 60px;
  left: 475px;
  transform: rotate(27deg);
}

.figure-disclaimer {
  opacity: .3;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  position: absolute;
  bottom: 250px;
  right: 80px;
}

.navbar-cta-text {
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family: Prototype, sans-serif;
  font-size: 16px;
}

.navbar-cta-link {
  justify-content: center;
  width: 100%;
  padding: 8px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.navbar-cta {
  border-radius: 50px;
  width: 215px;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}

.navbar-cta:hover {
  background-image: linear-gradient(270deg, #9744f199, #4d25ff99);
}

.hero-cta-title {
  color: #fff;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow: 0 0 8px #dfeaeb80;
  font-family: Prototype, sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.hero-cta-containers {
  text-align: center;
  flex-flow: column wrap;
  align-content: center;
  width: 100%;
  padding: 60px;
  display: flex;
}

.hero-cta-defi {
  color: #fff;
  letter-spacing: .2em;
  text-shadow: 0 0 16px #a087ffd6, 0 0 8px #dfeaeb80;
  border: 1px solid #fff;
  border-radius: 50px;
  min-width: 208px;
  padding: 10px 28px;
  font-family: Prototype, sans-serif;
  font-size: 16px;
  line-height: 16px;
  display: inline-block;
}

.hero-cta-defi.inactive {
  color: #9798a3;
  text-shadow: none;
  border-color: #9798a3;
}

.hero-cta {
  margin-top: 20px;
  text-decoration: none;
  position: relative;
}

.hero-cta.inactive {
  opacity: .8;
  cursor: default;
}

.soon-tag {
  opacity: .9;
  color: #efd641;
  letter-spacing: .15em;
  text-transform: uppercase;
  background-color: #535143eb;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 13px;
  display: inline-block;
  position: absolute;
  top: -7px;
  right: -17px;
}

.hero-cta-institutional {
  display: inline-block;
  position: relative;
}

.figure-section {
  z-index: 2;
  position: relative;
}

.figure-box {
  justify-content: center;
  width: auto;
  height: auto;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
  overflow: hidden;
}

.figure-value {
  color: #fff;
  letter-spacing: 5px;
  text-shadow: 0 0 16px #fbffff1a, 0 0 8px #dfeaeb80;
  font-family: Prototype, sans-serif;
  font-size: 32px;
}

.figure-unit {
  color: #b8b8b8;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 16px #fbffff1a, 0 0 8px #dfeaeb80;
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 8px;
  font-family: Prototype, sans-serif;
  font-size: 16px;
}

.protocol-title {
  color: #fff;
  text-align: center;
  letter-spacing: 8px;
  text-transform: uppercase;
  text-shadow: 0 0 16px #fbffff1a, 0 0 8px #dfeaeb80;
  word-break: break-all;
  width: 100%;
  padding: 0;
  font-family: Prototype, sans-serif;
  font-size: 32px;
  line-height: 1.4em;
}

.protocol-icon-container {
  flex-wrap: wrap;
  align-items: center;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
}

.protocol-icon-block {
  flex-flow: column wrap;
  place-content: center;
  align-self: flex-start;
  align-items: center;
  width: 50%;
  padding: 40px;
  display: flex;
}

.protocol-icon-block.zklend-institutional {
  width: 50%;
}

.feature-icon {
  text-align: center;
  height: 100px;
}

.icon-title {
  color: #ffffffb3;
  text-align: center;
  padding-top: 16px;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 25px;
}

.icon-paragraph {
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 8px #dfeaeb80, 0 0 16px #fbffff1a;
  padding-top: 12px;
  font-family: Prototype, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5em;
}

.media-icon {
  object-fit: contain;
  width: auto;
  max-width: 220px;
  height: auto;
  min-height: 24px;
  max-height: 27px;
  overflow: hidden;
}

.secure-containers {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: wrap;
  place-content: flex-start center;
  align-items: stretch;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 32px;
  padding-bottom: 32px;
  display: flex;
}

.secure-block {
  color: #fff;
  text-align: center;
  background-image: linear-gradient(#0b063d75, #0b063d99);
  border: 1px solid #9798a340;
  border-radius: 8px;
  width: 32%;
  max-width: 500px;
  padding: 24px 16px;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  line-height: 25.6px;
}

.secure-icon {
  width: 100%;
  max-width: 250px;
  min-height: 100px;
}

.secure-content {
  color: #ffffff80;
  padding-top: 8px;
  padding-bottom: 8px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 25.6px;
}

.secure-content.show-report {
  padding-bottom: 0;
  font-size: 13px;
}

.secure-cta {
  color: #ffffff80;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.1rem;
  display: inline-block;
}

.footer--soon-tag {
  color: #efd641;
  letter-spacing: 3px;
  background-image: linear-gradient(#efd64133, #efd64133);
  border-radius: 4px;
  align-items: center;
  margin-top: 5px;
  margin-left: 8px;
  padding: 4px 8px;
  font-family: Roboto, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 13px;
  display: flex;
}

.navbar-cta-arrow {
  justify-content: flex-end;
  align-items: center;
  margin-left: 12px;
  display: flex;
}

.navbar-cta-arrow-stroke {
  background-color: #fff;
  width: 30px;
  height: 2px;
  margin-right: -15px;
}

.hero-cta-bkg {
  z-index: -1;
  opacity: 0;
  background-image: linear-gradient(87deg, #4d25ff99 23%, #9744f199 64%);
  border-radius: 50px;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.navbar-cta-bkg-left {
  z-index: -1;
  background-image: linear-gradient(to right, #9744f199, #4d25ff99);
  position: absolute;
  inset: 0%;
}

.navbar-cta-bkg-right {
  z-index: -1;
  opacity: 0;
  background-image: linear-gradient(270deg, #9744f199, #4d25ff99);
  position: absolute;
  inset: 0%;
}

.div-block-6, .div-block-7 {
  width: 100px;
}

.div-block-8, .div-block-9 {
  height: 2px;
}

.div-block-10 {
  background-color: #0000;
}

.div-block-11, .div-block-12 {
  background-color: #fff;
}

.div-block-13 {
  background-color: #0000;
}

.div-block-14, .div-block-15, .div-block-16, .div-block-17 {
  background-color: #fff;
}

.div-block-18 {
  background-color: #fff;
  width: 100%;
  margin-right: -10px;
}

.div-block-19 {
  justify-content: flex-end;
  align-items: center;
  width: 20%;
  max-width: 300px;
  margin-left: 20px;
  display: flex;
}

.media-icon-container {
  text-align: center;
  border-top: .5px solid #9798a3;
  border-left: .5px solid #9798a3;
  border-right: .5px #9798a3;
  flex-wrap: wrap;
  place-content: center;
  align-items: center;
  width: 25%;
  max-width: 300px;
  max-height: 87px;
  padding: 20px;
  display: flex;
  position: relative;
}

.media-icon-container.no-left-border {
  border-left-style: none;
}

.media-icon-container.no-left-border.no-top-border, .media-icon-container.no-top-border, .media-icon-container.mobile-no-left-border.no-top-border {
  border-top-style: none;
}

.media-icon-wrapper {
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1200px;
  margin-top: 40px;
  padding-bottom: 40px;
  padding-left: 58px;
  padding-right: 58px;
  display: flex;
}

.partners-section-anchor {
  position: absolute;
  top: -50px;
}

.image {
  width: 15px;
  height: auto;
}

.image-2 {
  width: 160px;
  height: auto;
  margin-left: 24px;
  margin-right: 24px;
}

.div-block-20 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  margin-bottom: 24px;
  padding-left: 64px;
  padding-right: 64px;
  display: flex;
}

.div-block-21 {
  padding-left: 64px;
  padding-right: 64px;
}

.slider {
  width: 100%;
  max-width: 1440px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding-top: 32px;
  padding-bottom: 32px;
  position: relative;
  overflow: hidden;
}

.slide-track {
  grid-row-gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.slide {
  width: auto;
  height: auto;
}

.slide.mobile-only {
  display: none;
}

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

@media screen and (max-width: 991px) {
  .hero-title {
    letter-spacing: 6px;
    font-size: 22px;
    line-height: 28.6px;
  }

  .hero-paragraph {
    grid-row-gap: 0px;
    flex-wrap: wrap;
    place-content: center;
    padding-left: 30px;
    padding-right: 30px;
  }

  .hero.title-wrapper {
    padding-left: 30px;
    padding-right: 30px;
  }

  .icon-star {
    width: 34.5px;
    height: 34.5px;
    top: -11px;
    left: 35px;
  }

  .hero-column-left {
    width: 60%;
  }

  .hero-left-top-row {
    height: 550px;
  }

  .hero-column-right {
    width: 40%;
  }

  .dapp-text-wrapper.institutional.border-right, .dapp-text-wrapper.zklend {
    justify-content: center;
  }

  .coming-soon {
    font-size: 13px;
  }

  .protocol-subtitle {
    padding: 6px 12px 12px;
    font-size: 16px;
  }

  .protocol-subtitle.zklend-institutional {
    line-height: 1.5em;
  }

  .zklend-container {
    min-height: 768px;
  }

  .zklend-column-left {
    padding-left: 16px;
    padding-right: 16px;
  }

  .zklend-column-right {
    align-items: center;
  }

  .protocol-paragraph {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
    line-height: 1.5em;
  }

  .dapp-section-cta-text {
    white-space: nowrap;
    font-size: 16px;
  }

  .zklend-cta {
    width: 90%;
  }

  .zklend-left-top-row {
    height: 60%;
  }

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

  .footer-link {
    min-width: 0;
  }

  .footer-link.dapp-title {
    font-size: 16px;
    font-weight: 700;
  }

  .link-column {
    padding-left: 12px;
    padding-right: 12px;
  }

  .social-icon {
    max-width: 24px;
    margin-right: 24px;
  }

  .social-icon-wrapper {
    text-align: center;
    justify-content: center;
  }

  .copyright {
    text-align: center;
    margin-left: 0;
  }

  .hero-paragraph-inline {
    font-size: 19px;
    line-height: 30.21px;
  }

  .nav-item {
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 16px;
  }

  .brand {
    width: 70px;
    height: 60px;
    margin-left: 16px;
    margin-right: 16px;
  }

  .nav-menu {
    margin-left: 12px;
    margin-right: 12px;
  }

  .institutional-container {
    min-height: 768px;
  }

  .institutional-column-left {
    padding-left: 16px;
    padding-right: 16px;
  }

  .institutional-left-top-row {
    height: 60%;
  }

  .institutional-cta {
    width: 90%;
  }

  .trusted-institutions-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .section-title.roadmap-title {
    left: 50px;
  }

  .section-title.institution-title, .section-title.media-title, .section-title.securedby-title {
    font-size: 22px;
  }

  .institutions-partners-icon {
    width: 100%;
    min-height: 50px;
  }

  .td-amount-wrapper.tdt-1 {
    top: 468px;
    right: 508px;
  }

  .td-amount-wrapper.td-4 {
    top: 379px;
    right: 27px;
  }

  .td-amount-wrapper.td-3 {
    top: 416px;
    right: 189px;
  }

  .td-amount-wrapper.td-2 {
    top: 427px;
    right: 319px;
  }

  .roadmap-text-wrapper-phrase-1 {
    top: -77px;
    left: 199px;
  }

  .roadmap-phase-title {
    font-size: 26px;
  }

  .roadmap-paragraph {
    width: 230px;
    font-size: 12px;
    line-height: 18px;
  }

  .roadmap-dot-inactive {
    width: 63px;
  }

  .roadmap-dot-inactive.phrase-3 {
    top: 136px;
    left: 218px;
  }

  .roadmap-dot-inactive.phrase-4 {
    top: 400px;
    left: 408px;
  }

  .roadmap-dot-inactive.phrase-1 {
    top: 41px;
    left: 46px;
  }

  .roadmap-line-short {
    background-image: url('../images/roadmap-pointer-inactive-tablet.svg');
    width: 320px;
    height: 100px;
  }

  .roadmap-line-short.phrase-3 {
    width: 300px;
    top: 217px;
    left: 360px;
  }

  .roadmap-line-short.phrase-4 {
    top: 358px;
    left: 437px;
  }

  .roadmap-line-short.phrase-2 {
    top: 95px;
    left: 249px;
  }

  .roadmap-text-wrapper-phrase-2 {
    top: 66px;
    left: 323px;
  }

  .roadmap-text-wrapper-phrase-3 {
    top: 189px;
    left: 441px;
  }

  .roadmap-text-wrapper-phrase-4 {
    top: 330px;
    left: 510px;
  }

  .tokenomic-visual {
    left: 55%;
  }

  .tokenomic-key-visual {
    background-image: url('../images/tokenomic-key-visual.svg');
    background-repeat: no-repeat;
    background-size: contain;
    min-width: 1550px;
    right: 95px;
  }

  .list-item {
    min-width: 160px;
  }

  .roadmap-orbit-outter {
    background-image: url('../images/roadmap-orbit-outter-tablet.svg');
    background-position: 0%;
    background-repeat: no-repeat;
    min-width: 700px;
    min-height: 560px;
    left: -150px;
  }

  .roadmap-line-tall {
    background-image: url('../images/roadmap-pointer-tablet.svg');
    width: 350px;
    top: -91px;
    left: 115px;
  }

  .roadmap-line-tall.phrase-1 {
    top: -48px;
    left: 72px;
  }

  .roadmap-orbit-inner {
    background-image: url('../images/roadmap-orbit-inner-tablet.svg');
    top: 36px;
  }

  .scam-label, .scam-text {
    font-size: 11px;
    display: inline;
  }

  .text-cta {
    letter-spacing: 2px;
    font-size: 12px;
  }

  .arrow-right {
    width: 50px;
    padding-left: 8px;
  }

  .dapp-section-cta-text-2 {
    font-size: 12px;
  }

  .roadmap-dot-active {
    width: 385px;
    top: 94px;
    left: 170px;
    transform: rotate(43deg);
  }

  .navbar-cta-text {
    white-space: nowrap;
    font-size: 16px;
  }

  .navbar-cta {
    width: 180px;
  }

  .hero-cta-containers {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .protocol-title {
    font-size: 16px;
  }

  .protocol-icon-block {
    width: 50%;
    padding: 20px;
  }

  .icon-title {
    padding-top: 8px;
    font-size: 14px;
    line-height: 21px;
  }

  .icon-paragraph {
    font-size: 16px;
    line-height: 1.5em;
  }

  .media-icon {
    width: 100%;
  }

  .secure-containers {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .secure-block {
    width: 40%;
    padding: 16px 24px;
  }

  .secure-content {
    font-size: 14px;
    line-height: 1.4em;
  }

  .secure-cta {
    font-size: 14px;
  }

  .navbar-cta-arrow {
    display: none;
  }

  .navbar-menu-container {
    display: flex;
  }

  .div-block-20, .div-block-21 {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (max-width: 767px) {
  .hero-title {
    font-size: 16px;
  }

  .hero-paragraph {
    font-size: 14px;
    line-height: 20px;
  }

  .footer {
    padding: 40px 20px;
  }

  .nav-item {
    margin-left: 4px;
    margin-right: 4px;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 12px;
  }

  .navbar {
    border-bottom: 1px solid #9798a3;
  }

  .nav-menu {
    margin-left: 10px;
    margin-right: 10px;
  }

  .notification-bar {
    height: auto;
    min-height: 32px;
  }
}

@media screen and (max-width: 479px) {
  .hero-title {
    letter-spacing: 5px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7em;
  }

  .hero-paragraph {
    letter-spacing: 0;
    margin-top: 12px;
    padding-left: 24px;
    padding-right: 24px;
    font-size: 18px;
    font-weight: 300;
    line-height: 21px;
  }

  .hero.title-wrapper {
    padding-left: 24px;
    padding-right: 24px;
  }

  .icon-star {
    width: 30px;
    height: 30px;
    top: -13px;
    left: 21px;
  }

  .hero-container {
    margin-top: auto;
  }

  .dapp-title-wrapper {
    flex-wrap: wrap;
    align-items: flex-start;
    padding-left: 12px;
    padding-right: 12px;
    display: flex;
  }

  .dapp-title.zklend {
    font-size: 16px;
    line-height: 23px;
  }

  .dapp-title.institutional {
    font-size: 12px;
    line-height: 1.5em;
  }

  .dapp-text {
    padding-left: 0;
    font-size: 10px;
    line-height: 16px;
  }

  .hero-column-left {
    border-right: 1px #000;
    order: 1;
    width: 100%;
    margin-top: -160px;
  }

  .hero-left-top-row {
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .hero-column-right {
    background-image: url('../images/stroke-grid-mobile.svg');
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    order: -1;
    width: 100%;
    height: 620px;
  }

  .dapp-cta.zklend {
    background-image: url('../images/artemis-line-fade-mobille.svg');
    background-position: 89%;
    background-size: cover;
    height: 178px;
  }

  .dapp-cta.institutional {
    height: 178px;
  }

  .dapp-cta.institutional.border-right {
    border-right-style: none;
  }

  .hero-dapp-cta-container {
    flex-wrap: nowrap;
  }

  .dapp-logo-wrapper {
    height: 180px;
  }

  .dapp-text-wrapper {
    border-bottom: 1px solid #9798a3;
    height: 40px;
  }

  .dapp-text-wrapper.institutional {
    border-right: 1px solid #9798a3;
    flex-wrap: wrap;
    place-content: center;
  }

  .dapp-text-wrapper.institutional.border-right {
    border-bottom-style: none;
    border-right-style: none;
  }

  .dapp-text-wrapper.zklend {
    letter-spacing: 3px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .coming-soon {
    opacity: .5;
    font-size: 10px;
    line-height: 23px;
  }

  .protocol-subtitle {
    font-size: 15px;
    line-height: 20px;
  }

  .zklend-container {
    border-left-style: none;
    flex-wrap: wrap;
    min-height: 950px;
    max-height: none;
    padding-top: 48px;
  }

  .zklend-column-left {
    align-content: center;
  }

  .zklend-column-right {
    border-left-style: none;
    flex-wrap: wrap;
  }

  .protocol-paragraph {
    padding-left: 24px;
    padding-right: 24px;
    font-size: 13px;
    line-height: 20.67px;
  }

  .dapp-section-cta-text {
    text-align: center;
    width: 80%;
    font-size: 13px;
  }

  .zklend-cta {
    width: 218px;
    height: 40px;
  }

  .zklend-cta.desktop {
    display: none;
  }

  .zklend-cta.mobile {
    align-items: center;
    width: 245px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px 20px;
    display: flex;
  }

  .zklend-left-top-row {
    border-bottom-style: none;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }

  .zklend-constellations-logo {
    width: 180px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .footer {
    text-align: left;
    padding-left: 12px;
    padding-right: 12px;
  }

  .footer-link-container {
    flex-flow: wrap;
    justify-content: flex-start;
    margin-bottom: 0;
  }

  .footer-link {
    margin-bottom: 5px;
    font-size: 10px;
    line-height: 16px;
  }

  .link-column {
    width: auto;
    padding-bottom: 16px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .social-icon {
    min-width: 22px;
    max-width: 22px;
    margin-bottom: 24px;
    margin-right: 20px;
  }

  .social-icon-wrapper {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .copyright {
    text-align: center;
    order: 4;
    margin-left: 0;
    padding-left: 8px;
    padding-right: 8px;
  }

  .hero-paragraph-inline {
    font-size: 16px;
    line-height: 20px;
  }

  .text-ellipse {
    top: -6px;
  }

  .hero-main-visual-container {
    height: 100%;
    margin-top: 80px;
  }

  .brand {
    width: 50px;
    height: 50px;
    margin: auto auto auto 20px;
  }

  .brand.w--current {
    align-items: center;
    width: 50px;
    height: 50px;
    margin: auto auto auto 20px;
  }

  .navbar {
    border-bottom-style: none;
    height: 90px;
  }

  .nav-container {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 100%;
  }

  .nav-menu {
    display: none;
  }

  .institutional-container {
    border-right-style: none;
    flex-wrap: wrap;
    min-height: 850px;
    max-height: none;
    padding-top: 48px;
  }

  .institutional-column-right {
    border-right-style: none;
    flex-wrap: wrap;
  }

  .institutional-left-top-row {
    border-bottom-style: none;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }

  .institutional-logo {
    width: 180px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .institutional-cta {
    width: 218px;
    height: 40px;
  }

  .institutional-cta.desktop {
    display: none;
  }

  .institutional-cta.mobile {
    align-items: center;
    margin-top: 48px;
    margin-bottom: 48px;
    padding: 10px 20px;
    display: flex;
  }

  .trusted-institutions-section {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .section-title {
    padding-left: 32px;
    padding-right: 32px;
    font-size: 24px;
    line-height: 31px;
  }

  .section-title.text-left {
    margin-top: auto;
    margin-bottom: 15px;
    padding-left: 0;
    padding-right: 0;
  }

  .section-title.roadmap-title {
    text-align: right;
    width: 100%;
    max-width: 100%;
    margin-top: 120px;
    padding-right: 32px;
    inset: -52px auto auto;
  }

  .icon-wrapper {
    padding-left: 24px;
    padding-right: 24px;
  }

  .institutions-partners-icon {
    max-width: 100px;
    min-height: 46px;
  }

  .icon-container {
    width: 50%;
    max-height: 80px;
    padding: 15px;
  }

  .icon-container.no-left-border {
    border-right-style: none;
  }

  .icon-container.no-top-border {
    border-top-style: none;
  }

  .icon-container.no-top-border.mobile-no-left-border, .icon-container.no-top-border.no-left-border {
    border-left-style: none;
  }

  .icon-container.no-top-border.mobile-top-border {
    border-top-style: solid;
  }

  .icon-container.no-top-border.mobile-top-border.mobile-no-left-border {
    border-left-style: none;
  }

  .icon-container.mobile-no-left-border {
    border-left-style: none;
    border-right-style: solid;
  }

  .icon-container.mobile-no-left-border.no-top-border {
    border-top-style: solid;
  }

  .table-star {
    width: 17px;
    top: -8.5px;
    right: -9px;
  }

  .table-star.mobile, .table-star.mobile-hide {
    display: none;
  }

  .table-star.mobile-only {
    display: block;
  }

  .token-distribution-section {
    height: 1150px;
  }

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

  .td-item-title {
    font-size: 12px;
    line-height: 18px;
  }

  .td-item-number {
    font-size: 13px;
    line-height: 22px;
  }

  .td-amount-wrapper.tdt-1 {
    top: 100px;
    right: 72px;
  }

  .td-amount-wrapper.td-4 {
    width: 180px;
    top: 738px;
    right: 55px;
  }

  .td-amount-wrapper.td-3 {
    top: 494px;
    right: -46px;
  }

  .td-amount-wrapper.td-2 {
    width: 180px;
    top: 267px;
    right: -28px;
  }

  .roadmap-section {
    background-image: url('../images/roadmap-grid-mobile.svg');
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: auto;
    margin-top: 0;
    padding-top: 150px;
    top: 0;
  }

  .roadmap-container {
    min-height: 900px;
  }

  .roadmap-text-wrapper-phrase-1 {
    width: 150px;
    top: 92px;
    left: 142px;
  }

  .roadmap-phase-title {
    font-size: 20px;
    line-height: 24px;
  }

  .roadmap-paragraph {
    width: 100%;
    max-width: 200px;
    font-size: 13px;
    line-height: 20.67px;
  }

  .roadmap-paragraph.phrase-1 {
    width: 150px;
  }

  .roadmap-dot-inactive {
    width: 45px;
  }

  .roadmap-dot-inactive.phrase-3 {
    top: 404px;
    left: 74px;
  }

  .roadmap-dot-inactive.phrase-4 {
    top: 787px;
    left: 29px;
  }

  .roadmap-dot-inactive.phrase-1 {
    top: 190px;
    left: 17px;
  }

  .roadmap-line-short {
    width: 275px;
    height: 80px;
  }

  .roadmap-line-short.phrase-3 {
    top: 560px;
    left: 97px;
  }

  .roadmap-line-short.phrase-4 {
    top: 751px;
    left: 49px;
  }

  .roadmap-line-short.phrase-2 {
    top: 364px;
    left: 95px;
  }

  .roadmap-text-wrapper-phrase-2 {
    top: 338px;
    left: 160px;
  }

  .roadmap-text-wrapper-phrase-3 {
    top: 535px;
    left: 163px;
  }

  .roadmap-text-wrapper-phrase-4 {
    top: 727px;
    left: 117px;
  }

  .link-zklend {
    border-left: 1px #000;
  }

  .link-institutional {
    border-right: 1px #000;
  }

  .tokenomic-visual {
    padding-top: 40px;
  }

  .main-hero-section {
    border-top-style: none;
    margin-top: 13px;
  }

  .modal-container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .modal-container.modal-whitepaper {
    z-index: 1100;
    display: none;
  }

  .modal-wrapper {
    height: 100%;
  }

  .close {
    top: 30px;
    right: 20px;
  }

  .burger-menu-btn {
    width: 30px;
    height: auto;
    margin: auto 20px auto auto;
    display: block;
  }

  .burger-menu-btn.w--open {
    background-color: #0000;
  }

  .html-embed {
    display: none;
  }

  .tokenomic-key-visual {
    background-image: url('../images/tokenomic-key-visual-mobile.svg');
    background-size: contain;
    min-width: 800px;
    max-width: 800px;
    min-height: 1000px;
    max-height: 1000px;
    top: -230px;
    right: -80px;
  }

  .list-item {
    min-width: 80px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 10px;
    line-height: 14px;
  }

  .roadmap-orbit-outter {
    background-image: url('../images/roadmap-orbit-outter-mobile.svg');
    background-position: 0%;
    background-repeat: no-repeat;
    background-size: contain;
    width: 200px;
    min-width: 0;
    min-height: 1000px;
    left: 0;
  }

  .roadmap-line-tall {
    background-image: url('../images/roadmap-line-active-moible.svg');
    width: 275px;
    top: 98px;
    left: 42px;
  }

  .roadmap-line-tall.phrase-1 {
    top: 120px;
    left: 40px;
  }

  .roadmap-orbit-inner {
    background-image: url('../images/roadmap-orbit-inner-mobile.svg');
    background-position: 0%;
    background-size: contain;
    height: 850px;
    top: 80px;
  }

  .mobile-menu-overlay {
    z-index: 1000;
    background-color: #1b1464;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0;
    overflow: visible;
  }

  .mobile-menu-header {
    border-bottom: 1px solid #9798a3;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 24px;
    display: flex;
  }

  .mobile-menu-logo {
    width: 50px;
    height: 50px;
  }

  .mobile-menu-link {
    color: #fff;
    letter-spacing: 1px;
    border-bottom: 1px solid #9798a3;
    width: 100%;
    padding: 32px 40px;
    font-family: Roboto, sans-serif;
    font-size: 18px;
    line-height: 21px;
    text-decoration: none;
  }

  .menu-close-btn {
    cursor: pointer;
    width: 24px;
    height: 24px;
  }

  .hero-main-visual {
    width: 234px;
    top: 33%;
  }

  .roadmap-section-anchor {
    top: -100px;
  }

  .nav-wrapper {
    margin-bottom: auto;
  }

  .scam-label {
    margin-right: 4px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 10px;
  }

  .notification-wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }

  .scam-text {
    font-size: 10px;
    line-height: 0;
  }

  .notification-close-btn {
    width: 14px;
    height: 14px;
    margin-left: 8px;
  }

  .scam-text-container {
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 18px;
  }

  .modal-body {
    padding: 40px 20px 20px;
  }

  .whitepaper-header {
    font-size: 16px;
  }

  .whitepaper-body {
    height: 290px;
    margin-top: 20px;
  }

  .starknet-logo {
    max-width: 80px;
  }

  .tokenomic-container {
    padding-top: 100px;
  }

  .text-cta {
    text-align: center;
    width: 100%;
    font-size: 12px;
    line-height: 17px;
  }

  .arrow-right {
    width: 35px;
    height: 41px;
    display: none;
  }

  .cta-link-block {
    margin-top: 48px;
    margin-bottom: 48px;
  }

  .dapp-section-cta-text-2 {
    width: 80%;
    font-size: 13px;
  }

  .roadmap-dot-active {
    object-fit: fill;
    width: 280px;
    min-width: 280px;
    top: 488px;
    left: -41px;
    right: auto;
    transform: rotate(87deg);
  }

  .figure-disclaimer {
    bottom: 80px;
  }

  .link {
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 10px;
    line-height: 23px;
    text-decoration: none;
  }

  .soon-tag {
    padding: 4px 6px;
    font-size: 10px;
    top: -7px;
    right: -15px;
  }

  .figure-box {
    width: 415px;
    height: 50px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .figure-value {
    font-size: 20px;
    line-height: 1.5em;
  }

  .figure-unit {
    font-size: 12px;
  }

  .protocol-title {
    font-size: 15px;
    line-height: 20px;
  }

  .protocol-icon-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .protocol-icon-block {
    padding-left: 8px;
    padding-right: 8px;
  }

  .feature-icon {
    width: 50%;
  }

  .icon-title {
    font-size: 12px;
    line-height: 1.5em;
  }

  .icon-paragraph {
    font-size: 14px;
  }

  .media-icon {
    max-width: 100px;
    min-height: 46px;
  }

  .secure-block {
    width: 85%;
  }

  .footer--soon-tag {
    margin-top: -3px;
  }

  .div-block-19 {
    display: none;
  }

  .media-icon-container {
    width: 50%;
    max-height: 80px;
    padding: 15px;
  }

  .media-icon-container.no-left-border {
    border-right-style: none;
  }

  .media-icon-container.no-top-border {
    border-top-style: none;
  }

  .media-icon-container.no-top-border.mobile-no-left-border, .media-icon-container.no-top-border.no-left-border {
    border-left-style: none;
  }

  .media-icon-container.no-top-border.mobile-top-border {
    border-top-style: solid;
  }

  .media-icon-container.no-top-border.mobile-top-border.mobile-no-left-border {
    border-left-style: none;
  }

  .media-icon-container.mobile-no-left-border {
    border-left-style: none;
    border-right-style: solid;
  }

  .media-icon-container.mobile-no-left-border.no-top-border {
    border-top-style: solid;
  }

  .media-icon-container.mobile-bottom-border {
    border-bottom: .5px solid #9798a3;
  }

  .media-icon-wrapper {
    justify-content: flex-start;
    padding-left: 24px;
    padding-right: 24px;
  }

  .partners-section-anchor {
    top: -100px;
  }

  .div-block-20 {
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
  }

  .div-block-21 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .slider {
    width: 1440px;
    height: 70px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .slide-track {
    grid-row-gap: 0px;
    flex-wrap: nowrap;
    display: flex;
  }

  .slide {
    width: 415px;
    height: 50px;
  }

  .slide.mobile-only {
    display: block;
  }

  .mobile-menu-link-blog {
    color: #fff;
    letter-spacing: 1px;
    border-bottom: 1px solid #9798a3;
    width: 100%;
    padding: 32px 40px;
    font-family: Roboto, sans-serif;
    font-size: 18px;
    line-height: 21px;
    text-decoration: none;
  }
}


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