.textLeft {
  text-align: left;
}

.rankup-landing-page-child {
  width: 1440px;
  height: 765.8px;
  position: absolute;
  margin: 0 !important;
  bottom: -0.5px;
  left: calc(50% - 720px);
  z-index: 0;
}
.rankup-landing-page-item-mobile {
  width: 1300px;
  position: absolute;
  margin: 0 !important;
  top: 0;
  left: -560px;
  z-index: 1;
}

.rankup-landing-page-item {
  width: 1440px;
  height: 677px;
  position: absolute;
  margin: 0 !important;
  top: 0;
  left: 0;
  z-index: 1;
}

.rankup-landing-page-inner {
  width: 2088.8px;
  height: 1542.5px;
  position: absolute;
  margin: 0 !important;
  top: 1103.2px;
  right: 380px;
  border-radius: 69.3px;
  object-fit: contain;
  z-index: 2;
}
.rankup-1-icon {
  width: 127.6px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
}

.rankup-1-icon-mobile {
  width: 127.6px;
  text-align: center;
  position: relative;
  max-height: 100%;
  object-fit: cover;
}

.description,
.title {
  align-self: stretch;
  position: relative;
}
.title {
  margin: 0;
  font-size: inherit;
  line-height: 110%;
  font-weight: 600;
  font-family: inherit;
}
.description {
  font-size: var(--Body-2);
  line-height: 150%;
  font-family: var(--font-inter);
}
.description-slider-mobile {
  line-height: 150%;
}

.description-head-desktop {
  width: 480px;
}

.button-text {
  position: relative;
  font-size: var(--Button-1);
  font-family: var(--font-poppins);
  color: var(--Color-Content-W-White);
  text-align: left;
}
.icon-container {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.arrow {
  height: 32px;
  width: 32px;
  position: relative;
}
.button-container {
  cursor: pointer;
  border: 0;
  padding: 0 30px;
  background-color: var(--Color-Action-Green);
  height: 60px;
  border-radius: 38px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: var(--gap-16);
}
.left-container,
.text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.text-container {
  align-self: stretch;
  gap: 36px;
}

.left-container {
  flex: 1;
  gap: 54px;
  min-width: 312px;
}
.right-container-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: contain;
  min-width: 312px;
}
.main-container {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  gap: var(--gap-40);
  z-index: 3;
  text-align: left;
  font-size: var(--Title-4);
  color: var(--Color-Content-W-Primary);
  font-family: var(--font-poppins);
}
.header {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  line-height: 130%;
  font-weight: 600;
  font-family: inherit;
}
.vector-icon {
  width: 26.2px;
  position: relative;
  max-height: 100%;
}
.description1 {
  align-self: stretch;
  position: relative;
  line-height: 150%;
}
.container2,
.container3 {
  height: 180px;
  flex: 1;
  border-radius: 13.1px;
  background-color: var(--Color-Content-W-Surface-1);
  border: 0.9px solid var(--Color-Content-W-Border);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-32) var(--padding-20) var(--padding-32) var(--padding-32);
  gap: 17.5px;
  min-width: 238px;
}

.container,
.container1,
.header-container {
  align-self: stretch;
  display: flex;
  align-items: center;
}
.container1 {
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  gap: var(--gap-24);
  text-align: left;
  font-size: var(--Body-2);
  font-family: var(--font-inter);
}
.container,
.header-container {
  flex-direction: column;
  justify-content: flex-start;
}

/*
.container {
  gap: var(--gap-60);
  z-index: 4;
  text-align: center;
  font-size: var(--Title-3);
  color: var(--Color-Content-W-Primary);
  font-family: var(--font-poppins);
}*/



.header-container {
  gap: 23px;
}
.browser-bar {
  width: 577.4px;
  position: relative;
  border-radius: 6.6px 6.6px 0 0;
  background-color: var(--color-gainsboro-100);
  height: 23.8px;
  display: none;
}
.mac-close {
  width: 7.3px;
  height: 7.3px;
  position: relative;
  border-radius: 50%;
  background-color: var(--color-salmon);
  border: 0 solid var(--color-tomato);
  box-sizing: border-box;
  z-index: 1;
}

.mac-button-set {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 3.9px 0 0;
}
.mac-expand,
.mac-minimize {
  width: 7.3px;
  height: 7.3px;
  position: relative;
  border-radius: 50%;
  background-color: var(--color-goldenrod-100);
  border: 0 solid var(--color-goldenrod-200);
  box-sizing: border-box;
  z-index: 1;
}
.mac-expand {
  background-color: var(--color-lightgreen);
  border: 0 solid var(--color-forestgreen);
}
.mac-button-set2 {
  width: 11.9px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 3.9px var(--padding-4) 0 0;
  box-sizing: border-box;
}
.union-icon {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.rankup-1-icon1,
.tab-title {
  position: relative;
  flex-shrink: 0;
}
.rankup-1-icon1 {
  width: 6.8px;
  max-height: 100%;
  object-fit: cover;
  z-index: 2;
}
.tab-title {
  width: 66px;
  font-weight: 500;
  display: flex;
  align-items: center;
  z-index: 1;
  margin-left: -1.9px;
}
.inner-tab {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.mdi-close-icon,
.union-parent {
  position: relative;
  flex-shrink: 0;
}
.mdi-close-icon {
  height: 7.3px;
  width: 7.3px;
  overflow: hidden;
  z-index: 1;
}
.union-parent {
  width: 145.2px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 5.9px var(--padding-11) 4.6px 18px;
  box-sizing: border-box;
  gap: var(--gap-20);
}
.mdi-add-icon {
  height: 11.9px;
  width: 11.9px;
  position: absolute;
  margin: 0 !important;
  top: 3.9px;
  right: -11.9px;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 2;
}
.mac-buttons,
.tab {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.tab {
  position: relative;
  z-index: 1;
}
.mac-buttons {
  width: 577.4px;
  border-radius: 6.6px 6.6px 0 0;
  background-color: var(--color-gainsboro-100);
  padding: var(--padding-4) 7px 0;
  box-sizing: border-box;
  gap: 3.9px;
  max-width: 100%;
}
.mdi-arrow-back-icon {
  width: 10.6px;
  height: 10.6px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.nav-button-set {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 3.3px 0 0;
}
.mdi-arrow-back-icon1 {
  width: 10.6px;
  height: 10.6px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: contain;
}
.px-google-g-logo-1-icon {
  height: 6.6px;
  width: 6.6px;
  position: relative;
  object-fit: cover;
}
.url-text {
  width: 84px;
  position: relative;
  display: inline-block;
}
.search-area {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4.9px;
}
.mdi-star-border-icon {
  height: 9.9px;
  width: 9.9px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.search-bar {
  height: 17.2px;
  width: 465.8px;
  border-radius: 66px;
  border: 0.7px solid var(--color-lightskyblue);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 3px 7px var(--padding-2) var(--padding-6);
  gap: var(--gap-20);
  max-width: calc(100% - 98px);
}
.user-container-child {
  width: 0.7px;
  position: relative;
  border-right: 0.7px solid var(--color-lightgray);
  box-sizing: border-box;
  height: 8.6px;
}
.avatar {
  width: 11.9px;
  position: relative;
  border-radius: 50%;
  background-color: var(--Primary-nobul-teal-light);
  height: 11.9px;
}
.user-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6.6px;
}
.user-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.6px 0 0;
}
.navigation-buttons,
.url-bar {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}
.navigation-buttons {
  justify-content: flex-start;
  gap: 7.5px;
}
.url-bar {
  justify-content: flex-end;
  padding: 0 var(--padding-6) 0 7px;
  box-sizing: border-box;
  font-size: 7.1px;
  color: var(--color-black);
}
.divider-child {
  width: 578px;
  height: 0.7px;
  position: relative;
  border-top: 0.7px solid var(--color-gainsboro-200);
  box-sizing: border-box;
}
.upload-button {
  width: 54px;
  position: relative;
  font-weight: 500;
  display: inline-block;
}
.divider,
.upload-button-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.upload-button-wrapper {
  flex-direction: row;
  padding: 0 230px;
}
.divider {
  flex-direction: column;
  gap: 18.9px;
  font-size: 17.1px;
  color: var(--Rankup-Dark-B);
}
.chrome-desktop,
.desktop-mockup {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
}
.chrome-desktop {
  box-shadow: 0 2.6px 19.8px rgba(0, 0, 0, 0.1);
  border-radius: 6.6px;
  background-color: var(--Color-Content-W-Surface-1);
  overflow: hidden;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 0 344.6px;
  gap: 2.9px;
  flex-shrink: 0;
}
.desktop-mockup {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-32);
}
.image-icon,
.view-count-icon {
  position: relative;
  display: none;
}
.image-icon {
  width: 209.9px;
  border-radius: 9.8px;
  max-height: 100%;
  object-fit: cover;
}
.view-count-icon {
  width: 12.5px;
  background-color: var(--Color-Content-W-Surface-1);
  height: 12px;
}
.view-count {
  width: 6px;
  position: relative;
  line-height: 123.1%;
  font-weight: 500;
  display: inline-block;
  z-index: 5;
}
.view-count-icon-parent {
  width: 12.5px;
  background-color: var(--Color-Content-W-Surface-1);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2) var(--padding-1) var(--padding-4);
  box-sizing: border-box;
  z-index: 4;
}
.image-count {
  width: 12px;
  position: relative;
  line-height: 123.1%;
  font-weight: 500;
  display: inline-block;
  z-index: 5;
}
.image-count-icon-parent {
  width: 13.4px;
  background-color: var(--Color-Content-W-Surface-1);
  flex-direction: row;
  justify-content: flex-start;
  padding: 0 0 var(--padding-1) var(--padding-1);
  box-sizing: border-box;
  z-index: 4;
}
.counts,
.image-count-icon-parent,
.inner-preview {
  display: flex;
  align-items: flex-start;
}
.counts {
  flex-direction: column;
  justify-content: flex-start;
  gap: 13.5px;
}
.inner-preview {
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 52px;
}
.vote-icon {
  position: absolute;
  top: 6.2px;
  left: 1.6px;
  background-color: var(--Color-Content-W-Surface-1);
  width: 15.1px;
  height: 22.1px;
  z-index: 4;
}
.vote-count {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  font-size: inherit;
  line-height: 123.1%;
  font-weight: 500;
  font-family: inherit;
  display: inline-block;
  width: 100%;
  height: 100%;
  z-index: 5;
}
.vote-inner {
  height: 31px;
  width: 17px;
  position: relative;
}
.vote-area {
  border-radius: 9.8px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 8px 89px 83.8px 103px;
  background-image: url(./public/image1@2x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  z-index: 1;
  font-size: 25.2px;
}
.image-frame,
.main-image-icon {
  position: relative;
  border-radius: 9.8px;
}
.image-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 45.8px 0 10.1px;
  gap: 96.5px;
  background-image: url(./public/image@2x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  flex-shrink: 0;
  z-index: 3;
  margin-top: -322.5px;
  text-align: center;
  font-size: 8.9px;
  color: var(--color-darkslategray-200);
  font-family: var(--font-inter);
}
.main-image-icon {
  width: 424.5px;
  max-height: 100%;
  object-fit: cover;
  display: none;
  z-index: 0;
}
.question-container {
  width: 128.2px;
  height: 12.4px;
  position: absolute;
  margin: 0 !important;
  top: 40.8px;
  left: 22.4px;
  background-color: var(--color-whitesmoke-100);
  z-index: 4;
}
.question-text {
  width: 220px;
  position: relative;
  font-weight: 500;
  display: inline-block;
  z-index: 5;
}
.question-details {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2);
}
.vote-icon-small {
  width: 6.3px;
  position: relative;
  background-color: var(--Color-Content-W-Surface-1);
  height: 9.8px;
  display: none;
}
.vote-count-small {
  width: 5px;
  position: relative;
  line-height: 123.1%;
  font-weight: 500;
  display: inline-block;
  z-index: 5;
}
.rating-bar,
.rating-value {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.rating-value {
  background-color: var(--Color-Content-W-Surface-1);
  padding: 0.4px var(--padding-2) 0.4px 0;
  z-index: 4;
}
.rating-bar {
  padding: 0 72px;
}
.image-upload-container {
  width: 322.5px;
  position: relative;
  background-color: var(--Colors-Surface-S-02);
  height: 147.7px;
  display: none;
}
.list-connector-icon,
.list-connector-icon1,
.rankup-property-listers-01-1 {
  width: 82.5px;
  position: relative;
  border-radius: 5.4px;
  object-fit: cover;
  z-index: 5;
}
.list-connector-icon {
  max-height: 100%;
}
.list-connector-icon1,
.rankup-property-listers-01-1 {
  height: 82.5px;
}
.rankup-property-listers-01-1 {
  border-radius: 6.1px;
}
.feedback-area,
.rank-up-list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.rank-up-list {
  width: 322.5px;
  background-color: var(--Colors-Surface-S-02);
  flex-direction: row;
  padding: 32.5px var(--padding-6) 32.3px;
  box-sizing: border-box;
  gap: 4.2px;
  z-index: 4;
}
.feedback-area {
  flex-direction: column;
  gap: 25.6px;
  text-align: center;
  font-size: 7.1px;
  color: var(--color-lightslategray);
  font-family: var(--font-inter);
}
.rankup-property-listers-01-2 {
  width: 82.5px;
  height: 82.5px;
  position: absolute;
  margin: 0 !important;
  right: 52.1px;
  bottom: 74.1px;
  border-radius: 4.3px;
  object-fit: cover;
  z-index: 5;
}
.image-container,
.question-area,
.question-inner {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}
.question-inner {
  width: 424.5px;
  border-radius: 9.8px;
  flex-direction: column;
  align-items: flex-start;
  padding: 42.6px 23px 41.4px;
  box-sizing: border-box;
  position: relative;
  gap: 34.6px;
  background-image: url(./public/main-image@2x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  flex-shrink: 0;
  z-index: 3;
}
.image-container,
.question-area {
  width: 651.6px;
}
.question-area {
  flex-direction: row;
  align-items: flex-start;
  padding: 0 0 9.8px;
  box-sizing: border-box;
  margin-top: -322.5px;
  position: relative;
  font-size: 10.6px;
  color: var(--color-black);
  font-family: var(--font-archivo);
}
.image-container {
  height: 430.3px;
  flex-direction: column;
  align-items: flex-end;
}
.step-icon {
  width: 97px;
  height: 96px;
  position: relative;
}
.step-icon1,
.step-icon2 {
  width: 0;
  height: 69.8px;
  position: relative;
}
.step-icon2 {
  width: 97px;
  height: 97px;
}
.step-icons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.step-icons-container-mobile {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.step-1-number {
  align-self: stretch;
  position: relative;
  line-height: 150%;
  font-weight: 600;
}
.step-1-container,
.step-2-container {
  justify-content: flex-start;
  gap: var(--gap-8);
}
.step-1-container {
  width: 128.3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.step-2-container {
  width: 146.3px;
}
.step-2-container,
.step-3-container,
.step-text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.step-2-container,
.step-3-container,
.step-text-container-mobile {
  display: flex;
  align-items: flex-start;
}
.step-3-container {
  width: 159px;
  justify-content: flex-start;
  gap: var(--gap-8);
}

.step-text-container {
  align-self: stretch;
  justify-content: space-between;
  padding: var(--padding-20) 0;
  gap: 0;
}
.step-text-container > div {
  height: var(--item-size);
  justify-content: center !important;
  align-items: center !important;
}
.steps-container {
  --item-size: 96px;

  height: 429.6px;
  width: 283px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  font-size: var(--Title-2);
  color: var(--Rankup-Dark-B);
  font-family: var(--font-poppins);
}
.steps-container .step-icons-container {
  justify-content: space-between;
  padding: var(--padding-20) 0;
}
.steps-container .step-icons-container div.step-icon {
  --color: #ffffff;
  --bg-color: #3d4b66;

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: var(--item-size);
  height: var(--item-size);
  min-height: var(--item-size);
  cursor: pointer;
  color: var(--color);
  background-color: var(--bg-color);
}

.steps-container .step-icons-container div.step-icon svg path {
  fill: var(--color);
}

.step-text-container > .step-icon {
  cursor: pointer;
}

.steps-container .step-icons-container div.step-icon.active {
  --bg-color: var(--Rankup-red-dating);
}

.steps-container .step-icons-container div.step-icon.active circle,
.steps-container .step-icons-container div.step-icon.active path {
  transition: all 0.35s;
}
.steps-container .step-icons-container div.step-icon.active circle {
  fill: var(--Rankup-red-dating);
}
.steps-container .step-icons-container div.step-icon.active path {
  color: #3d4b66;
}
.steps-container .step-icons-container .step-icon-sperator {
  background-image: url("../icons/marketing-step-seperator.png");
  height: 69px;
  width: 3px;
  background-size: contain;
  background-repeat: repeat;
  background-position: top center;
}

.component-1,
.main-container1 {
  align-self: stretch;
  display: flex;
  max-width: 100%;
}
.component-1 {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  text-align: left;
  font-size: 6.6px;
  color: var(--color-darkslategray-100);
  font-family: var(--font-roboto);
}
.main-container1 {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-40);
  z-index: 5;
  text-align: center;
  font-size: var(--Title-3);
  color: var(--Color-Content-W-Primary);
  font-family: var(--font-poppins);
}
.upload-icon {
  width: 56.2px;
  position: relative;
  max-height: 100%;
}
.upload-your-listing {
  margin: 0;
}
.upload-instructions {
  align-self: stretch;
  position: relative;
}
.label {
  cursor: pointer;
}
.input {
  display: none;
}
.container5,
.container6,
.upload-container {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.upload-container {
  height: 300px;
  border-radius: 38px;
  border: 2px dashed var(--Rankup-red-dating);
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: var(--gap-20);
}
.container5,
.container6 {
  justify-content: flex-start;
}
.container6 {
  align-items: flex-start;
  gap: 32px;
  font-size: var(--Body-1);
  font-family: var(--font-inter);
}
.container5 {
  align-items: center;
  gap: var(--gap-60);
  z-index: 6;
  text-align: center;
  font-size: var(--Title-3);
  color: var(--Color-Content-W-Primary);
  font-family: var(--font-poppins);
}

.container51 {
  align-items: center;
  z-index: 6;
  text-align: center;
  font-size: var(--Title-3);
  color: var(--Color-Content-W-Primary);
  font-family: var(--font-poppins);
}

.icon-container1 {
  align-self: stretch;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.container9 {
  height: 240px;
  flex: 1;
  box-shadow: 0 1.7px 26.2px rgba(0, 0, 0, 0.15);
  border-radius: 13.1px;
  background-color: var(--Color-Content-W-Surface-1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-32);
  box-sizing: border-box;
  gap: var(--gap-18);
  min-width: 238px;
}
.statistic1 {
  margin: 0;
  align-self: stretch;
  height: 43px;
  position: relative;
  font-size: inherit;
  line-height: 130%;
  font-weight: 600;
  font-family: inherit;
  display: inline-block;
}

.statistic1-mobile {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  line-height: 130%;
  font-weight: 600;
  font-family: inherit;
  display: inline-block;
}

.container7,
.container8 {
  align-self: stretch;
  display: flex;
  align-items: center;
}
.container8 {
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  gap: var(--gap-24);
  text-align: left;
  color: var(--Color-Action-Green);
}
.container7 {
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-60);
  z-index: 7;
  text-align: center;
  font-size: var(--Title-3);
  color: var(--Color-Content-W-Primary);
  font-family: var(--font-poppins);
}
.description7 {
  width: 498.1px;
  font-size: var(--Body-2);
  line-height: 150%;
  font-family: var(--font-inter);
  display: inline-block;
}

.description7-mobile {
  font-size: var(--Body-2);
  line-height: 150%;
  font-family: var(--font-inter);
  display: inline-block;
  text-align: center;
}

.text-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-24);
}
.stat-description {
  align-self: stretch;
  position: relative;
  font-size: var(--Body-2);
  line-height: 150%;
  font-family: var(--font-inter);
  color: var(--Color-Content-W-Primary);
}

.stat-description-mobile {
  text-align: center;
  align-self: stretch;
  position: relative;
  font-size: var(--Body-2);
  line-height: 150%;
  font-family: var(--font-inter);
  color: var(--Color-Content-W-Primary);
}

.stat-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-8);
  min-width: 113px;
}
.stat-description1 {
  align-self: stretch;
  position: relative;
  font-size: var(--Body-2);
  letter-spacing: -0.01px;
  line-height: 150%;
  font-family: var(--font-inter);
  color: var(--Color-Content-W-Primary);
}
.left-section,
.stats-container {
  display: flex;
  align-items: flex-start;
}
.stats-container {
  align-self: stretch;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--gap-18);
  font-size: var(--Title-4);
  color: var(--Color-Action-Green);
}

.stats-container-mobile {
  flex-direction: row;
  font-size: var(--Title-4);
  color: var(--Color-Action-Green);
}

.left-section {
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--gap-40);
  min-width: 317px;
}
.right-section-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  min-width: 317px;
}
.main-container2 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: center;
  gap: var(--gap-24);
  z-index: 8;
  text-align: left;
  font-size: var(--Title-3);
  color: var(--Color-Content-W-Primary);
  font-family: var(--font-poppins);
}
.icon,
.name {
  position: relative;
}
.icon {
  width: 22.8px;
  max-height: 100%;
}
.name {
  line-height: 150%;
  font-weight: 600;
  display: inline-block;
  flex-shrink: 0;
}
.rating-icon {
  height: 20.8px;
  width: 89.5px;
  position: relative;
}
.name-and-rating-container {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.testimonial-text {
  align-self: stretch;
  position: relative;
  font-size: var(--Body-1);
  font-family: var(--font-inter);
  color: var(--Color-Content-W-Primary);
}
.testimonial-card {
  flex: 1;
  box-shadow: 0 1.7px 26.2px rgba(0, 0, 0, 0.15);
  border-radius: 13.1px;
  background-color: var(--Color-Content-W-Surface-1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--gap-24);
  min-width: 235px;
}

.testimonial-card {
  padding: 36px 32px;
  max-height: 100%;
}

.testimonial-card:hover {
  box-shadow: 0 1.7px 26.2px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
}

.testimonials-container {
  align-self: stretch;
  align-items: stretch;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 28.9px;
  text-align: left;
  font-size: var(--Title-2);
}

.page-nav-icon {
  height: 2px;
  width: 74px;
  position: relative;
  max-height: 100%;
}
.pagination-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-18);
}
.container12,
.rankup-landing-page {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.container12 {
  align-items: center;
  gap: var(--gap-60);
  z-index: 9;
  text-align: center;
  font-size: var(--Title-3);
  color: var(--Rankup-Dark-B);
  font-family: var(--font-poppins);
}

body:not(.device-desktip) .container12-child {
  width: 100vw;
  overflow: scroll;
  padding: 10px 10px;
}

body:not(.device-desktip) .container12-child > .testimonials-container {
  width: calc(
    (var(--item-count) * var(--item-size)) + ((var(--item-count) - 1) * var(--item-space))
  );
  gap: var(--item-space);
}

body:not(.device-desktip) .testimonial-card {
  padding: 36px 20px;
  max-height: 100%;
  min-width: 250px;
  width: 250px;
  max-width: 250px;
}

body:not(.device-desktip) .name {
  font-size: 12px;
}

.rankup-landing-page {
  background-color: var(--Color-Content-W-Surface-1);
  align-items: flex-start;
  padding: 80px 220px;
  box-sizing: border-box;
  position: relative;
  gap: 160px;
  max-width: 100%;
}
.popular-use-cases {
  position: relative;
  line-height: 140%;
  font-weight: 600;
}
.angle,
.label1 {
  position: relative;
}
.angle {
  width: 22px;
  height: 22px;
}
.label1 {
  line-height: 100%;
  font-weight: 600;
}
.label-container {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-6);
}
.arrow1 {
  width: 22px;
  position: relative;
  height: 22px;
  display: none;
}
.action,
.buttons {
  border-radius: var(--Spacing-CornerRadius-S);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.action {
  height: 44px;
  padding: 0 var(--padding-11);
  box-sizing: border-box;
}
.buttons {
  background-color: var(--Colors-Content-Subtle);
  overflow: hidden;
  text-align: left;
  font-size: var(--font-size-15);
}
.utility-column {
  align-self: stretch;
  border-bottom: 1px solid var(--Colors-Surface-Border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--Spacing-Padding-M) 0;
}
.about-layout {
  border-bottom: 1px solid var(--Colors-Action-Green);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--Spacing-Padding-S) 0;
}
.plus {
  width: 18px;
  position: relative;
  height: 18px;
  display: none;
}
.action1,
.buttons1,
.label-container1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.action1 {
  height: 32px;
  border-radius: var(--Spacing-Gap-XS);
}
.buttons1 {
  border-radius: var(--Spacing-CornerRadius-XS);
  overflow: hidden;
}
.about-area,
.button-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.button-list {
  overflow: hidden;
  justify-content: flex-start;
  gap: var(--Spacing-Padding-M);
  text-align: left;
  font-size: 13px;
  color: var(--Colors-Content-Secondary);
}
.about-area {
  justify-content: center;
  gap: var(--Spacing-Gap-L);
}
.about-area-parent,
.point-element {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.point-element {
  overflow: hidden;
  flex-direction: column;
  text-align: left;
  font-size: 13px;
  color: var(--Colors-Content-Secondary);
}
.about-area-parent {
  align-self: stretch;
  flex-direction: row;
  gap: var(--Gap-1);
  font-size: var(--font-size-15);
}
.area-gap-icon {
  width: 86.4px;
  max-height: 100%;
}
.hichapp-limited {
  position: relative;
  line-height: 150%;
  font-weight: 500;
}
.copyright-zone {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--Spacing-Padding-L) 0;
  gap: 0;
  text-align: left;
  font-size: 13px;
  color: var(--Colors-Content-Secondary);
}
.footer,
.root {
  display: flex;
  flex-direction: column;
}
.footer {
  align-self: stretch;
  height: 593px;
  background-color: var(--Colors-Surface-S-02);
  align-items: center;
  justify-content: center;
  padding: var(--Normal-Padding) 200px;
  box-sizing: border-box;
  gap: var(--Normal-Padding);
  text-align: center;
  font-size: 18px;
  color: var(--Colors-Content-Primary);
  font-family: var(--font-archivo);
}
.root {
  width: 100%;
  position: relative;
  align-items: flex-start;
  justify-content: flex-start;
  line-height: normal;
  letter-spacing: normal;
}

.steps-section {
  --section-content-height: 550px;

  height: calc(300vh + var(--section-content-height));
  justify-content: flex-start;
}
.steps-section > div {
  position: sticky;
  top: calc((100vh - var(--section-content-height)) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#steps-section .steps-section-image {
  position: relative;
}
#steps-section .steps-section-image img {
  opacity: 0;
  visibility: hidden;
  max-width: 100%;
  height: unset !important;
  transition: all 0.35s;
}
#steps-section .steps-section-image img:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#steps-section[data-step="1"] img[data-for="1"] {
  opacity: 1;
  visibility: visible;
}
#steps-section[data-step="2"] img[data-for="2"] {
  opacity: 1;
  visibility: visible;
}
#steps-section[data-step="3"] img[data-for="3"] {
  opacity: 1;
  visibility: visible;
}
.header-realestate,
.rankup-landing-page {
  --padding-horizontal: 220px;

  padding-left: var(--padding-horizontal) !important;
  padding-right: var(--padding-horizontal) !important;
}

@media screen and (max-width: 1800px) {
  .rankup-landing-page {
    background: url(../img/dating/red-bg-desktop.svg) no-repeat left top -10vh/ 100vw auto;
  }
}

@media screen and (max-width: 1600px) {
  .rankup-landing-page {
    background: url(../img/dating/red-bg-desktop.svg) no-repeat left top -10vh/ 120vw auto;
  }
}

@media screen and (max-width: 1500px) {
  .rankup-landing-page {
    background: url(../img/dating/red-bg-desktop.svg) no-repeat left top -10vh/ 120vw auto;
  }
}

@media screen and (max-width: 1400px) {
  .rankup-landing-page {
    background: url(../img/dating/red-bg-desktop.svg) no-repeat left top -10vh/ 125vw auto;
  }

  .image-container,
  .steps-container {
    flex: 1;
  }
  .component-1,
  .testimonials-container {
    flex-wrap: wrap;
  }
  .rankup-landing-page {
    padding-top: 34px;
    padding-bottom: 34px;
    box-sizing: border-box;
  }

  .slider-pictures-container {
    flex-direction: column-reverse;
    width: 100%;
  }
  .steps-container {
  }
  .slider-pictures-container .steps-container,
  .slider-pictures-container .steps-container > div {
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
  }
  .steps-container .step-icons-container .step-icon-sperator {
    width: unset;
    height: 3px;
    flex-grow: 1;
    background-image: url("../icons/marketing-step-seperator2.png");
  }
  .slider-pictures-container .steps-container > div {
    padding: 0 !important;
  }
  .slider-pictures-container .step-text-container > div {
    height: unset;
    width: var(--item-size);
    text-align: center;
  }
  .slider-pictures-container .steps-section-image {
    text-align: center;
    margin-top: 40px;
  }
  .slider-pictures-container .steps-section-image img {
    margin: 0 !important;
  }
  .slider-pictures-container .steps-section-image img:not(:first-child) {
    left: 50% !important;
    transform: translateX(-50%);
  }

  .slider-pictures-container .step-text-container > div > div:first-child {
    display: none;
  }
  .slider-pictures-container .step-text-container > div > div:last-child {
    font-size: 15px;
  }
}

@media screen and (max-width: 1200px) {
  .rankup-landing-page {
    background: url(../img/dating/red-bg-desktop.svg) no-repeat left top / 140vw auto;
  }

  .container {
    gap: var(--gap-30);
  }
  .image-container {
    min-width: 100%;
  }
  .container12,
  .container5,
  .container7 {
    gap: var(--gap-30);
  }
  .rankup-landing-page {
    padding-top: var(--padding-22);
    padding-bottom: var(--padding-22);
    box-sizing: border-box;
  }
}
@media screen and (max-width: 930px) {
  .steps-section > div {
    top: min(calc((100vh - var(--section-content-height)) / 2), 20px);
  }
  .steps-container {
    --item-size: 65px;
  }
  .step-text-container > div {
    --item-size: 100px;
  }

  .steps-section {
    --section-content-height: 550px;

    height: unset;
    justify-content: flex-start;
  }

  #steps-section .steps-section-image img:not(:first-child) {
    position: unset;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #steps-section .steps-section-image img {
    opacity: 1;
    visibility: visible;
    max-width: 100%;
    height: unset !important;
    transition: all 0.35s;
  }

  .slider-pictures-container .steps-section-image img:not(:first-child) {
    left: 0 !important;
    transform: unset;
  }
}

#mobile-only-show {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 100000;
  width: 100vw;
  background: red;

  transform: translateZ(0);
}

@media screen and (min-width: 826px) {
  .steps-container svg {
    transform: scale(1.5);
  }
}

@media screen and (max-width: 825px) {
  .mobile-size {
    font-size: 21px;
  }

  #mobile-only-show {
    display: block;
  }
  .steps-section > div {
  }

  .steps-container {
    --item-size: 48px;
    --text-width: 102px;
    --horizontal-pdding: calc((var(--text-width) - var(--item-size)) / 2);
  }
  .slider-pictures-container .step-text-container > div {
    width: var(--text-width);
  }
  .slider-pictures-container div.step-icon:first-child {
    margin-left: var(--horizontal-pdding);
  }
  .slider-pictures-container div.step-icon:last-child {
    margin-right: var(--horizontal-pdding);
  }

  .container7-mobile {
    margin-bottom: 80px;
  }

  .title {
    font-size: 35px;
    line-height: 39px;
  }
  .text-container {
    gap: var(--gap-18);
  }
  .left-container {
    gap: 27px;
  }
  .main-container {
    gap: var(--gap-20);
  }
  .upload-button-wrapper {
    padding-left: 115px;
    padding-right: 115px;
    box-sizing: border-box;
  }
  .main-container1 {
    gap: var(--gap-20);
  }
  .container6 {
    gap: var(--gap-16);
  }
  .stats-container {
    flex-wrap: wrap;
  }
  .left-section {
    gap: var(--gap-20);
  }
  .pagination-container {
    flex-wrap: wrap;
  }
  .rankup-landing-page {
    gap: 80px;
    padding-top: var(--padding-20);
    padding-bottom: var(--padding-20);
    box-sizing: border-box;
  }

  .rankup-landing-page,
  .header-realestate {
    --padding-horizontal: 32px;
  }
}

@media screen and (max-width: 450px) {
  .stat-description1 {
    font-size: 15px;
  }

  .rankup-landing-page {
    background: url("../img/dating/red-bg-desktop.svg") no-repeat left top/auto 60vh;
  }

  .container5 {
    margin-bottom: 40px;
  }

  .main-container2 {
    margin-bottom: 48px;
  }

  .main-container1 {
    margin-bottom: 62px;
  }

  .header,
  .title {
    font-size: var(--font-size-26);
    line-height: 29px;
  }
  .header {
    font-size: 21px;
  }
  .header + .description {
    font-size: 15px;
  }

  .mac-buttons {
    flex-wrap: wrap;
  }
  .upload-button-wrapper {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .vote-count {
    font-size: 20px;
    line-height: 25px;
  }
  .question-inner {
    gap: 17px;
  }
  .image-container {
    height: auto;
  }
  .statistic1 {
    font-size: var(--font-size-22);
    line-height: 29px;
  }
  .rankup-landing-page {
    gap: var(--gap-40);

    padding-top: 42px;
    padding-left: 32px;
    padding-right: 32px;

    box-sizing: border-box;
  }

  .mobile-size {
    font-size: 21px;
  }
}

@media screen and (max-width: 370px) {
  .rankup-landing-page {
    background: url("../img/dating/red-bg-desktop.svg") no-repeat left top/auto 60vh;
  }

  .rankup-landing-page {
    padding-left: 16px;
    padding-right: 16px;
  }
  .steps-container {
    --text-width: calc(((100vw - 32px) / 3) - 16px);
  }
}

.container1 > div.container3:hover,
.container1 > div.container2:hover {
  box-shadow: 0 1.7px 26.2px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
  cursor: pointer;
}

.container1 > div.container2:hover svg path {
  transition: all 0.4s ease;
  fill: #29cc5f;
}

.container1 > div.container3:hover svg path {
  transition: all 0.4s ease;
  fill: #29cc5f;
}

div.items-wrapper > article {
  box-shadow: 0 1.7px 26.2px rgba(0, 0, 0, 0.1) !important;
}

/*
body:not(.device-desktip) {
  @media (max-width: 576px) {
    .slider-picture {
      width: 327px;
      height: 228px;
    }

    .slider-pictures-container {
      flex-direction: column-reverse;
    }

    .steps-container {
      flex-direction: column;
    }

    .step-icons-container {
      flex-direction: row;
    }

    .step-text-container {
      flex-direction: row;
    }

    .steps-section-image {
      max-width: 100%;
    }

    .steps-container {
      flex-direction: column;
    }

    .step-text-container-mobile {
      justify-content: space-between;
      width: 100%;
    }

    .mobile-text-center {
      text-align: center;
    }

    .mobile-margin-auto {
      margin: auto;
    }

    .container-mobile-spacing {
      margin-bottom: 80px;
    }

    .header-mobile-spacing {
      margin-bottom: 32px;
    }

    .container12 {
      margin-bottom: 48px;
    }
  }
}

@media screen and (min-width: 1240px) {
  .main-container img {
    margin-top: 40px;
  }
}

@media screen and (min-width: 900px) and(max-width: 1024px) {
  .rankup-landing-page {
    background: url("../img/dating/red-bg-desktop.svg") no-repeat left top/auto 75vh;
  }
  
}


@media screen and (min-width: 826px) and (max-width: 1540px) {
  .rankup-landing-page {
    gap: 80px;
    margin-bottom: 60px;
  }
}

@media (min-width: 901px) {
  #steps-section .steps-section-image .steps-container {
    display: none;
  }


}
@media screen and (max-width: 900px) {
  .rankup-landing-page {
    background: url("../img/dating/red-bg-desktop.svg") no-repeat left top/auto 60vh;
  }

  .steps-container {
    height: unset;
  }

  .steps-section-image .steps-container:not(.only-desktop):not(:first-child) {
    margin-bottom: 40px !important;
  }

  .slider-pictures-container .steps-container {
    margin-bottom: 0;
  }

  .steps-section-image img:not(.only-desktop):not(:last-child) {
    margin-bottom: 40px !important;
  }

  .steps-section-image .steps-container:nth-child(2) .step-icon.active,
  .steps-section-image .steps-container:nth-child(4) .step-icon.active {
    background-color: #3d4b66;
  }

  .steps-section-image .steps-container:nth-child(2) .step-icon:nth-child(3) {
    background-color: var(--Rankup-red-dating);
  }

  .steps-section-image .steps-container:nth-child(4) .step-icon:nth-child(5) {
    background-color: var(--Rankup-red-dating);
  }



  .steps-container .step-icon:nth-child(1)::after {
    content: "1";
  }

  
  .steps-container .step-icon:nth-child(3)::after {
    content: "2";
  }

  .steps-container .step-icon:nth-child(5)::after {
    content: "3";
  }

  .steps-container .step-icon svg {
    display: none;
  }
}

@media screen and (min-width: 800px) and (max-width: 900px) {
  .rankup-landing-page {
    background: url("../img/dating/red-bg-desktop.svg") no-repeat left top/auto 65vh;
  }
}

@media screen and (max-width: 700px) {
  .rankup-landing-page {
    background: url("../img/dating/red-bg-desktop.svg") no-repeat left top/auto 55vh;
  }
}

@media screen and (max-width: 600px) {
  .rankup-landing-page {
    background: url("../img/dating/red-bg-desktop.svg") no-repeat left top/auto 50vh;
  }
}

@media screen and (max-width: 450px) {
  .rankup-landing-page {
    background: url("../img/dating/red-bg-desktop.svg") no-repeat left top/auto 50vh;
  }
}

@media screen and (max-width: 390) {
  .rankup-landing-page {
    background: url("../img/dating/red-bg-desktop.svg") no-repeat left top/auto 45vh;
  }
}
*/