@font-face {
  font-family: "SF Pro Text";
  src: url("../fonts/SF-Pro-Text-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "SF Pro Text";
  src: url("../fonts/SF-Pro-Text-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Poppins-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Poppins-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  src: url("../fonts/Montserrat-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Roboto-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Roboto-Bold.woff2") format("woff2");
}

* {
  box-sizing: border-box;
}

html {
  font-size: 1rem;
}

.app-root {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: rgb(0 0 0);
  width: 120rem;
  height: 310.75rem;
  overflow: hidden;
  text-align: left;
  line-height: 5rem;
  letter-spacing: 0;
  white-space: nowrap;
  font-size: 3.75rem;
  font-weight: 700;
  margin: 0 auto;
}

.main-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 0rem 0rem 8.6875rem;
}

.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  background-color: rgb(0 0 0);
  padding: 5rem 0rem 9.9375rem;
  overflow: hidden;
  color: rgb(255 255 255);
  font-family: "SF Pro Text";
  background-image: url(../images/e499c6eda03102aae2e733db3cc8a05e.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.header-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  border-width: 0rem 0rem 0.0625rem;
  border-style: solid;
  border-color: rgb(255 255 255 / 0.2);
  background: rgb(0 0 0 / 0.8);
  padding: 1.25rem 47.4375rem 1.1875rem 20rem;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120rem;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.logo-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 0.5rem;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}

.logo-bg {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
}

.logo-wrapper {
  position: relative;
  border-radius: 0.5rem;
  box-shadow: inset 0px 1px 1px 0px rgb(255 255 255 / 0.62);
  background-color: rgb(0 0 0 / 0.3);
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  background-image: linear-gradient(
    156.47deg,
    rgb(24 140 186) 2.5%,
    rgb(62 42 141) 17.06%,
    rgb(8 0 20) 30.4%,
    rgb(8 0 20) 65.7%,
    rgb(46 31 104) 82.69%,
    rgb(159 49 140) 96.08%
  );
}

.logo-icon {
  display: flex;
  position: absolute;
  right: 0.5625rem;
  bottom: 0.375rem;
  flex-direction: row;
  align-items: flex-start;
  padding: 0.6875rem 0.25rem 0.5rem 0.5rem;
  width: 1.3125rem;
  height: 1.5rem;
  background-image: url(../images/226f40163365da3e4b9d354fe19f9e4c.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.logo-svg {
  width: 0.5rem;
  height: 0.375rem;
}

.logo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2.5rem;
}

.brand-name {
  margin: 0rem 0rem 0rem 1.25rem;
  vertical-align: baseline;
  line-height: 2rem;
  font-family: Poppins;
  font-size: 1.375rem;
  font-weight: 700;
  cursor: pointer;
  color: #ffffff;
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0rem 0rem 0rem 17.25rem;
  line-height: 1.625rem;
  font-family: "SF Pro Text";
  font-size: 1rem;
  font-weight: 600;
}

.tab-item {
  cursor: pointer;
}

.nav-link {
  flex-shrink: 0;
  vertical-align: baseline;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active,
.footer-nav-group a:hover {
  color: rgb(150 85 255);
}

.nav-link:not(:first-child) {
  margin-left: 2.5rem;
}

.hero-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  margin-top: 4.1875rem;
  margin-bottom: 0;
  gap: 4rem;
}

.hero-intro-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  white-space: normal;
}

.hero-headline {
  width: 48rem;
  vertical-align: baseline;
  line-height: 5rem;
  color: rgb(255 255 255);
  font-family: Montserrat;
  font-size: 3.75rem;
  font-weight: 700;
}

.hero-headline-highlight {
  margin: 0.625rem 0rem 0rem;
  background: linear-gradient(
    180deg,
    rgb(246 237 254) 23.56%,
    rgb(150 85 255) 100%
  );
  background-clip: text;
  width: 48rem;
  vertical-align: baseline;
  line-height: 5rem;
  color: transparent;
  font-family: Montserrat;
  font-size: 3.75rem;
  font-weight: 700;
  -webkit-background-clip: text;
}

.star-c-img {
  width: 3.6rem;
  height: 3.6rem;
}

.hero-subtext {
  margin: 2.5rem 0rem 0rem;
  width: 48.5625rem;
  vertical-align: baseline;
  line-height: 3.125rem;
  color: rgb(255 255 255);
  font-family: "SF Pro Text";
  font-size: 1.875rem;
  font-weight: 400;
  white-space: normal;
}

.download-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  margin: 6.25rem 26.25rem 0rem 0rem;
  padding: 1.625rem 2.75rem;
  white-space: nowrap;
  background-image: url(../images/f50bdceb20e9a6971e656eaa1ef89f49.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  user-select: none;
}

.app-store-btn {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 16.8125rem;
  min-width: 16.8125rem;
  height: 4.25rem;
  color: inherit;
  text-decoration: none;
}

.apple-icon-wrapper {
  position: relative;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
}

.apple-icon {
  position: absolute;
  top: 0;
  left: 0.25rem;
  width: 2.4375rem;
  height: 3rem;
}

.apple-icon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3rem;
}

.badge-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.btn-subtitle {
  vertical-align: baseline;
  line-height: 1.75rem;
  font-size: 1.25rem;
  font-weight: 400;
}

.btn-title {
  vertical-align: baseline;
  line-height: 2.5rem;
  font-size: 1.875rem;
  font-weight: 700;
}

.hero-phone-container {
  position: relative;
  width: 27.375rem;
  height: 55.875rem;
}

.phone-mockup {
  position: absolute;
  bottom: 0.75rem;
  left: 1.125rem;
  border-radius: 3.3125rem;
  width: 25rem;
  height: 54.1875rem;
  overflow: hidden;
}

.phone-screen {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  background: rgb(17 17 17);
  width: 25rem;
  height: 54.1875rem;
  backdrop-filter: blur(1rem);
}

.app-top-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  padding: 0rem 0rem 13.125rem;
  text-align: center;
  line-height: 1.5625rem;
  font-family: Roboto;
  font-size: 1.3125rem;
  font-weight: 900;
  background-image: url(../images/ab2cf398f8b6155c1115b44be724a683.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.status-bar {
  width: 25rem;
  height: 2.9375rem;
}

.app-header-title {
  margin: 1.1875rem 0rem 0rem;
  padding: 0.6875rem 0rem;
  width: 25rem;
  height: 2.9375rem;
  vertical-align: baseline;
}

.app-create-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  margin: 17.1875rem 8rem 0rem;
  padding: 0.75rem 2.5rem 0.75rem 2.5625rem;
  text-align: left;
  line-height: 1.4375rem;
  font-family: "SF Pro Text";
  font-size: 1.1875rem;
  font-weight: 600;
  background-image: url(../images/90ea8bbd94dfdd4a155990fa1b399c4c.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0.125rem 0.375rem rgb(0 0 0 / 0.5));
}

.app-create-text {
  vertical-align: baseline;
  text-shadow: 0px 1px 2px rgb(100 6 158 / 0.25);
}

.app-search-bar {
  margin: 11.5rem 0rem 0rem;
  width: 25rem;
  height: 2.25rem;
}

.app-content-image {
  position: absolute;
  top: 8.1875rem;
  left: 1.75rem;
  width: 21.5625rem;
  height: 27.6875rem;
}

.app-bottom-dock {
  display: flex;
  position: absolute;
  bottom: 3.625rem;
  left: 1.0625rem;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.3125rem 0rem 0rem;
  width: 26.8125rem;
  height: 8.625rem;
}

.dock-item {
  position: relative;
  width: 6.1875rem;
  height: 8.25rem;
}

.dock-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 6.1875rem;
  height: 8.25rem;
}

.dock-active-dot-wrapper {
  display: flex;
  position: absolute;
  top: -0.3125rem;
  right: -0.3125rem;
  flex-direction: row;
  align-items: center;
  border-width: 0.0625rem;
  border-style: solid;
  border-radius: 50%;
  border-color: rgb(255 255 255 / 0.5);
  background: rgb(119 67 255);
  width: 1.1875rem;
  height: 1.1875rem;
}

.dock-active-dot {
  width: 1.1875rem;
  height: 1.1875rem;
  overflow: hidden;
}

.dock-profile-pic {
  width: 6.1875rem;
  height: 8.25rem;
}

.phone-frame {
  position: absolute;
  bottom: 0.0625rem;
  left: 0;
  width: 27.375rem;
  height: 55.9375rem;
}

.phone-glass {
  position: absolute;
  top: 0;
  left: 0;
  width: 27.375rem;
  height: 55.875rem;
}

.section-portraits {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
  padding: 4.25rem 18.6875rem 4.25rem 20rem;
  min-width: 120rem;
  height: 68.75rem;
  overflow: hidden;
  color: rgb(255 255 255);
}

.portrait-image-wrapper {
  position: relative;
  width: 33.6875rem;
  height: 60.25rem;
}

.portrait-image {
  position: absolute;
  top: 0;
  right: -1.5rem;
  width: 38.75rem;
  height: 60.1875rem;
}

.portrait-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 33.6875rem;
  height: 60.25rem;
}

.feature-text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: flex-start;
  line-height: 5rem;
  white-space: nowrap;
  font-family: Montserrat;
  font-size: 3.75rem;
  font-weight: 700;
}

.title-white {
  vertical-align: baseline;
  color: rgb(255 255 255);
}

.title-gradient {
  background: linear-gradient(
    180deg,
    rgb(246 237 254) 23.56%,
    rgb(150 85 255) 100%
  );
  background-clip: text;
  vertical-align: baseline;
  color: transparent;
  -webkit-background-clip: text;
  line-height: 5rem;
  white-space: nowrap;
  font-family: Montserrat;
  font-size: 3.75rem;
  font-weight: 700;
}

.colunm-flex {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.title-gradient2 {
  background: linear-gradient(
    180deg,
    rgb(246 237 254) 23.56%,
    rgb(150 85 255) 100%
  );
  background-clip: text;
  vertical-align: baseline;
  color: transparent;
  -webkit-background-clip: text;
  line-height: 5rem;
  white-space: nowrap;
  font-family: Montserrat;
  font-size: 3.75rem;
  font-weight: 700;
}

.subtitle-large {
  margin: 0.625rem 0rem 0rem;
  vertical-align: baseline;
  line-height: 5rem;
  white-space: nowrap;
  font-family: Montserrat;
  font-size: 3.75rem;
  font-weight: 700;
  color: rgb(255 255 255);
}

.subtitle-large2 {
  margin: 0.625rem 0rem 0rem;
  vertical-align: baseline;
  line-height: 5rem;
  white-space: nowrap;
  font-family: Montserrat;
  font-size: 3.75rem;
  font-weight: 700;
  color: rgb(255 255 255);
}

.section-text {
  margin: 2.5rem 0rem 0rem;
  width: 41.125rem;
  vertical-align: baseline;
  line-height: 3.125rem;
  white-space: normal;
  font-family: "SF Pro Text";
  font-size: 1.875rem;
  font-weight: 400;
}

.section-styles {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-self: stretch;
  justify-content: space-between;
  padding: 2.5rem 10.5rem 2.5rem 20rem;
  min-width: 120rem;
  overflow: hidden;
}

.styles-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin: 16.5rem 0rem 0rem;
}

.section-text-white {
  margin: 2.5rem 0rem 0rem;
  width: 38.25rem;
  vertical-align: baseline;
  line-height: 3.125rem;
  white-space: normal;
  color: rgb(255 255 255);
  font-family: "SF Pro Text";
  font-size: 1.875rem;
  font-weight: 400;
}

.styles-collage {
  width: 51.25rem;
  height: 63.75rem;
}

.section-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  padding: 16.25rem 20.0625rem 16.25rem 20rem;
  overflow: hidden;
  color: transparent;
  font-family: Montserrat;
}

.title-center-gradient {
  background: linear-gradient(
    180deg,
    rgb(246 237 254) 23.56%,
    rgb(150 85 255) 100%
  );
  background-clip: text;
  vertical-align: baseline;
  -webkit-background-clip: text;
  line-height: 1.3;
  font-family: Montserrat;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 80px; /* 133.333% */
}

.steps-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
  margin-top: 9.375rem;
  margin-bottom: 0;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.step-num {
  vertical-align: baseline;
  line-height: 5rem;
  white-space: nowrap;
  color: rgb(193 153 254);
  font-family: Montserrat;
  font-size: 4.375rem;
  font-weight: 700;
}

.step-title-wrapper {
  position: relative;
  margin: 1.25rem 0rem 0rem;
  width: 9.375rem;
  height: 5rem;
  line-height: 5rem;
  white-space: nowrap;
  color: rgb(255 255 255);
  font-family: Montserrat;
  font-size: 2.5rem;
  font-weight: 700;
}

.step-title-wrapper .step-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 9.375rem;
  height: 5rem;
  vertical-align: baseline;
}

.step-item > .step-title {
  margin: 1.25rem 0rem 0rem;
  vertical-align: baseline;
  line-height: 5rem;
  white-space: nowrap;
  color: rgb(255 255 255);
  font-family: Montserrat;
  font-size: 2.5rem;
  font-weight: 700;
}

.step-desc {
  margin: 1.25rem 0rem 0rem;
  width: 20.5375rem;
  vertical-align: baseline;
  line-height: 3.125rem;
  white-space: normal;
  color: rgb(255 255 255);
  font-family: "SF Pro Text";
  font-size: 1.875rem;
  font-weight: 400;
}

.footer-section {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-self: stretch;
  padding: 0rem 0rem 0.5rem;
}

.footer-content {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: flex-start;
  padding: 6.25rem 20rem;
  background-image: url(../images/ad2c41024f0ad7a31ceedf1929328e8b.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-brand-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
  min-width: 13.75rem;
  height: 5rem;
  line-height: 5rem;
  color: rgb(255 255 255);
  font-family: Montserrat;
  font-size: 2.5rem;
  font-weight: 700;
}

.footer-logo-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 0.75rem;
  overflow: hidden;
}

.footer-logo-bg {
  position: relative;
  border-radius: 0.75rem;
  box-shadow: inset 0px 1px 1px 0px rgb(255 255 255 / 0.62);
  background-color: rgb(0 0 0 / 0.3);
  width: 3.75rem;
  height: 3.75rem;
  overflow: hidden;
  background-image: linear-gradient(
    156.47deg,
    rgb(24 140 186) 2.5%,
    rgb(62 42 141) 17.06%,
    rgb(8 0 20) 30.4%,
    rgb(8 0 20) 65.7%,
    rgb(46 31 104) 82.69%,
    rgb(159 49 140) 96.08%
  );
}

.footer-logo-icon {
  display: flex;
  position: absolute;
  right: 0.8125rem;
  bottom: 0.625rem;
  flex-direction: row;
  align-items: flex-start;
  padding: 1rem 0.375rem 0.75rem 0.8125rem;
  width: 1.9375rem;
  height: 2.3125rem;
  background-image: url(../images/c6953f89d9aae668f32e7b83458e2a00.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.footer-logo-svg {
  width: 0.75rem;
  height: 0.5625rem;
}

.footer-logo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.75rem;
  height: 3.75rem;
}

.footer-brand-name {
  vertical-align: baseline;
}

.footer-tagline-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin: 1.25rem 2.625rem 0rem 0rem;
  line-height: 2.5rem;
  color: rgb(202 202 202);
  font-family: "SF Pro Text";
  font-size: 1.5rem;
  font-weight: 400;
}

.footer-tagline {
  margin: 1.25rem 0rem 0rem;
  vertical-align: baseline;
}

.footer-nav-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0rem 0rem 0rem 20.5625rem;
}

.footer-nav-group:last-child {
  margin-left: 21.75rem;
}

.footer-nav-title {
  vertical-align: baseline;
  line-height: 5rem;
  color: rgb(255 255 255);
  font-family: Montserrat;
  font-size: 2.5rem;
  font-weight: 700;
}

.footer-link {
  margin: 1.25rem 0rem 0rem;
  vertical-align: baseline;
  line-height: 2.5rem;
  color: rgb(202 202 202);
  font-family: "SF Pro Text";
  font-size: 1.5rem;
  font-weight: 400;
  text-decoration: none;
}

.footer-link-last {
  margin: 1.25rem 0rem 0rem;
  vertical-align: baseline;
  line-height: 2.5rem;
  color: rgb(202 202 202);
  font-family: "SF Pro Text";
  font-size: 1.5rem;
  font-weight: 400;
  text-decoration: none;
}

.contactUs {
  margin: 1.25rem 0rem 0rem;
  vertical-align: baseline;
  line-height: 2.5rem;
  color: rgb(202 202 202);
  font-family: "SF Pro Text";
  font-size: 1.5rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}