@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Poppins:700,600,400|Mulish:400,700");
/* The following line is used to measure usage of this code. You can remove it if you want. */
@import url("https://px.animaapp.com/64ba49568ed3d27d1a667115.64ba49568ed3d27d1a667118.PJo8vu5.hcp.png");



.screen a {
  display: contents;
  text-decoration: none;
}

input:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

.navbar {
  align-items: center;
  align-self: stretch;
  background-color: var(--neutral---zircon);
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 20px 50px;
  position: relative;
  width: 100%;
}

.logo {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  position: relative;
}

.logo-mark {
  height: 32px;
  position: relative;
  width: 32px;
}

.landing-page {
  letter-spacing: 0;
  line-height: 27.3px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.span1 {
  color: var(--neutral---mine-shaft);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-l);
  font-weight: 400;
}

.navigation-menu {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 50px;
  justify-content: flex-end;
  position: relative;
}

.button-4 {
  align-items: center;
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  height: 30px;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
}

.highlighted-ct-as {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 20px;
  position: relative;
}

.button-5 {
  align-items: center;
  background-color: var(--cta---aqua-squeeze);
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  height: 60px;
  justify-content: center;
  padding: 16px 50px;
  position: relative;
  transition: all 0.3s ease;
}

.label-1 {
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
  width: fit-content;
}

.button {
  align-items: center;
  background-color: var(--cta---observatory);
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  height: 60px;
  justify-content: center;
  padding: 16px 50px;
  position: relative;
  transition: all 0.3s ease;
}

.rocket-launch {
  background-image: url(../img/rocketlaunch.svg);
  background-size: 100% 100%;
  height: 20px;
  position: relative;
  width: 20px;
}

.label-2 {
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
  width: fit-content;
}

.hero-section {
  align-items: center;
  background-color: var(--neutral---zircon);
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 120px 55px;
  position: relative;
  width: 1280px;
}

.ct-as {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 18px;
  position: relative;
}

.button-6 {
  align-items: center;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--cta---observatory);
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  height: 60px;
  justify-content: center;
  padding: 16px 50px;
  position: relative;
  transition: all 0.3s ease;
}

.hero-section-image {
  background-image: url(../img/-herosectionimage@2x.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 450px;
  position: relative;
  width: 450px;
}

.logo-bar {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 60px 55px;
  position: relative;
  width: 1280px;
}

.logos {
  align-items: center;
  align-self: stretch;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--deviders---grey-);
  border-top-style: solid;
  border-top-width: 1px;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 60px 0px;
  position: relative;
  width: 100%;
}

.client-logo {
  height: 27.96px;
  position: relative;
  width: 90px;
}

.client-logo-1 {
  height: 30.32px;
}

.client-logo-2 {
  height: 19.18px;
}

.client-logo-3 {
  height: 27px;
}

.client-logo-4 {
  height: 25.71px;
}

.headline-subhead {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 20px;
  position: relative;
  width: 100%;
}

.features {
  color: var(--black);
  font-weight: 700;
  line-height: 49.4px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.few-good-reasons-why {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 24px;
  position: relative;
  text-align: center;
}

.cards-row-1 {
  align-self: stretch;
  width: 100%;
}

.feature-card {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--cta---aqua-squeeze);
  border-radius: 20px;
  box-shadow: 34.85px 29.63px 48.34px #3265ff0d;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 30px;
  position: relative;
  width: 370px;
}

.x-info {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 30px;
  position: relative;
  width: 100%;
}

.magic-wand {
  height: 42px;
  position: relative;
  width: 42px;
}

.write-a-feature {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 600;
  line-height: 36.4px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.write-benefits-focus {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 24px;
  position: relative;
  text-align: center;
}

.button-1 {
  align-items: center;
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  height: 30px;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
}

.label-3 {
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
  width: fit-content;
}

.arrow-right {
  background-image: url(../img/arrowright.svg);
}

.bounding-box {
  height: 42px;
  position: relative;
  width: 42px;
}

.label-4 {
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
  width: fit-content;
}

.feature-card-1 {
  align-items: center;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--cta---aqua-squeeze);
  border-radius: 20px;
  box-shadow: 34.85px 29.63px 48.34px #3265ff0d;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 40px 30px;
  position: relative;
  width: 370px;
}

.confetti {
  height: 42px;
  position: relative;
  width: 42px;
}

.label-5 {
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
  width: fit-content;
}

.our-metrics-tell-the-story {
  color: var(--black);
  font-weight: 700;
  line-height: 49.4px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.our-metrics-componen {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 20.8px;
  position: relative;
  text-align: center;
}

.metrics {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  gap: 30px;
  position: relative;
  width: 1170px;
}

.metric-item {
  align-items: center;
  background-color: var(--white);
  border-bottom-style: solid;
  border-bottom-width: 4px;
  border-color: var(--accent---mandys-pink);
  border-radius: 20px 20px 0px 0px;
  box-shadow: 34.85px 29.63px 48.34px #3265ff0d;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 5px;
  overflow: hidden;
  padding: 48px 16px;
  position: relative;
}

.number {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 700;
  line-height: 49.4px;
  margin-top: -4.00px;
  position: relative;
  text-align: center;
}

.label-6 {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 20.8px;
}

.label-7 {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 20.8px;
}

.label-8 {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 20.8px;
}

.label-9 {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 20.8px;
}

.highlighted-cta {
  align-items: center;
  background-color: var(--neutral---zircon);
  display: flex;
  flex: 0 0 auto;
  gap: 60px;
  justify-content: center;
  padding: 120px 55px;
  position: relative;
  width: 1280px;
}

.visuals {
  height: 450px;
  position: relative;
  width: 540px;
}

.overlap-group1 {
  height: 378px;
  position: relative;
  top: 33px;
  width: 501px;
}

.ellipse-1 {
  background-color: var(--accent---mandys-pink);
  border-radius: 189px;
  height: 378px;
  left: 91px;
  position: absolute;
  top: 0;
  width: 378px;
}

.ellipse-1-1 {
  border: 31.55px solid;
  border-color: var(--cta---observatory);
  border-radius: 94.5px/94px;
  height: 188px;
  left: 0;
  position: absolute;
  top: 4px;
  width: 189px;
}

.mobile-mockup {
  align-items: flex-end;
  border-radius: 10000px;
  display: flex;
  height: 378px;
  left: 91px;
  overflow: hidden;
  padding: 0 57px;
  position: absolute;
  top: 0;
  width: 378px;
}

.mobile-mockup-1 {
  border-radius: 100px;
  box-shadow: inset -2.71px -6.09px 4.74px #0000001a , 12.7px 17.14px 24.06px #00000026;
  height: 508px;
  margin-bottom: -214.69px;
  min-width: 264px;
}

.overlap-group {
  height: 517px;
  margin-top: -4.45px;
  position: relative;
  width: 276px;
}

.button-7 {
  background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(113.69, 111.32, 111.32) 54.62%, rgb(45, 45, 45) 100%);
  border: 0.06px solid;
  border-color: var(--deviders---grey-);
  border-radius: 3.48px;
  height: 65px;
  left: 267px;
  position: absolute;
  top: 107px;
  width: 8px;
}

.button-8 {
  background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(113.69, 111.32, 111.32) 54.62%, rgb(45, 45, 45) 100%);
  border: 0.06px solid;
  border-color: var(--deviders---grey-);
  border-radius: 3.48px;
  height: 47px;
  left: 0;
  position: absolute;
  top: 158px;
  width: 8px;
}

.button-9 {
  background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(113.69, 111.32, 111.32) 54.62%, rgb(45, 45, 45) 100%);
  border: 0.06px solid;
  border-color: var(--deviders---grey-);
  border-radius: 3.48px;
  height: 47px;
  left: 0;
  position: absolute;
  top: 104px;
  width: 8px;
}

.button-10 {
  background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(113.69, 111.32, 111.32) 54.62%, rgb(45, 45, 45) 100%);
  border: 0.06px solid;
  border-color: var(--deviders---grey-);
  border-radius: 3.48px;
  height: 21px;
  left: 0;
  position: absolute;
  top: 70px;
  width: 8px;
}

.insert-your-screen-here {
  align-items: flex-start;
  border: 0.68px solid;
  border-color: var(--neutral---mine-shaft);
  border-radius: 40.62px;
  box-shadow: inset 0.68px 0.68px 1.35px #00000040;
  display: flex;
  height: 494px;
  left: 13px;
  overflow: hidden;
  padding: 0.3px 0.0px;
  position: absolute;
  top: 10px;
  width: 249px;
}

.insert-your-mockup-image-here {
  height: 287px;
  width: 249px;
}

.top-speaker {
  align-items: flex-start;
  background-color: var(--neutral---mine-shaft);
  border-radius: 67.69px;
  display: flex;
  gap: 3px;
  height: 18px;
  justify-content: flex-end;
  left: 97px;
  min-width: 81px;
  padding: 7.4px 18.3px;
  position: absolute;
  top: 17px;
}

.rectangle-10 {
  background-color: var(--celeste);
  border-radius: 5.42px;
  height: 3px;
  width: 37px;
}

.ellipse-1-2 {
  background-color: var(--celeste);
  border-radius: 1.35px;
  height: 3px;
  width: 3px;
}

.ellipse-2 {
  border: 31.55px solid;
  border-color: var(--accent---persimmon);
  border-radius: 53.5px;
  height: 107px;
  left: 394px;
  position: absolute;
  top: 271px;
  width: 107px;
}

.get-landing-page-ui-kit-today {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 700;
  line-height: 65.0px;
  margin-top: -1.00px;
  position: relative;
}

.break-the-figma-limi {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 31.5px;
  position: relative;
}

.label-10 {
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
  width: fit-content;
}

.arrow-left {
  background-image: url(../img/arrowright-3.svg);
}

.real-stories-from-satisfied-customers {
  align-self: stretch;
  color: var(--black);
  font-weight: 700;
  line-height: 49.4px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.see-how-our-landing {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 20.8px;
  position: relative;
  text-align: center;
}

.cards-row-2 {
  justify-content: center;
  width: 1170px;
}

.testimonial-card-1 {
  align-items: center;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--cta---aqua-squeeze);
  border-radius: 20px;
  box-shadow: 34.85px 29.63px 48.34px #3265ff0d;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 30px;
  padding: 40px 30px;
  position: relative;
}

.client-info {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.person-details {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  position: relative;
  width: 100%;
}

.john-doe {
  align-self: stretch;
  color: var(--neutral900);
  font-weight: 600;
  line-height: 27.3px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.vice-president-google {
  align-self: stretch;
  color: var(--neutral700);
  font-weight: 400;
  line-height: 22.4px;
  position: relative;
  text-align: center;
}

.write-short-specifi {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 24px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.star-rating {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.star-icon {
  height: 25.1px;
  margin-bottom: -1.01px;
  margin-top: -1.00px;
  position: relative;
  width: 25.99px;
}

.testimonial-card {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--cta---aqua-squeeze);
  border-radius: 20px;
  box-shadow: 34.85px 29.63px 48.34px #3265ff0d;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  padding: 40px 30px;
  position: relative;
}

.pick-your-perfect-plan {
  color: var(--black);
  font-weight: 700;
  line-height: 49.4px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.find-the-perfect-pla {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 20.8px;
  position: relative;
  text-align: center;
}

.cards-row {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 30px;
  position: relative;
}

.text-1 {
  align-items: flex-start;
  gap: 24px;
}

.free {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 31.5px;
  margin-top: -1.00px;
  position: relative;
}

.price {
  color: var(--neutral---mine-shaft);
  font-weight: 700;
  line-height: 65.0px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.month {
  flex: 1;
  letter-spacing: 0;
  line-height: 25.6px;
  position: relative;
}

.short-description-goes-here {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 25.6px;
  position: relative;
}

.feature-details-in-plan {
  flex: 1;
  letter-spacing: 0;
  line-height: 20.8px;
  margin-top: -1.00px;
  position: relative;
}

.button-2 {
  align-items: center;
  align-self: stretch;
  background-color: var(--cta---aqua-squeeze);
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  height: 60px;
  justify-content: center;
  padding: 16px 50px;
  position: relative;
  transition: all 0.3s ease;
  width: 100%;
}

.label-11 {
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
  width: fit-content;
}

.x0 {
  color: var(--neutral---mine-shaft);
  font-weight: 700;
  line-height: 65.0px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.label-12 {
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
  width: fit-content;
}

.pricing-card-1 {
  align-items: flex-start;
  background-color: var(--cta---observatory);
  border-radius: 20px;
  box-shadow: 34.85px 29.63px 48.34px #3265ff0d;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 40px 30px;
  position: relative;
  width: 370px;
}

.special {
  align-self: stretch;
  color: var(--white);
  font-weight: 400;
  line-height: 31.5px;
  margin-top: -1.00px;
  position: relative;
}

.x75 {
  color: var(--white);
  font-weight: 700;
  line-height: 65.0px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.short-description-goes-here-1 {
  align-self: stretch;
  color: var(--white);
  font-weight: 400;
  line-height: 25.6px;
  position: relative;
}

.button-11 {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--cta---observatory);
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  height: 60px;
  justify-content: center;
  padding: 16px 50px;
  position: relative;
  transition: all 0.3s ease;
  width: 100%;
}

.label-13 {
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
  width: fit-content;
}

.arrow-right-1 {
  background-image: url(../img/arrowright-4.svg);
  background-size: 100% 100%;
  height: 20px;
  position: relative;
  width: 20px;
}

.team {
  align-items: flex-start;
  background-color: var(--neutral---zircon);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 60px;
  padding: 120px 55px;
  position: relative;
  width: 1280px;
}

.meet-our-team {
  color: var(--black);
  font-weight: 700;
  line-height: 49.4px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.get-to-know-the-face {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 24px;
  position: relative;
  text-align: center;
}

.member-card {
  align-items: center;
  background-color: var(--white);
  border-radius: 20px;
  box-shadow: 34.85px 29.63px 48.34px #3265ff0d;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  padding: 0px 0px 30px;
  position: relative;
  width: 370px;
}

.profile-image-placeholder-1 {
  align-self: stretch;
  height: 278px;
  position: relative;
  width: 100%;
}

.text-2 {
  align-items: center;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--deviders---grey-);
  gap: 6px;
  padding: 0px 30px 20px;
}

.lead-designer {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 25.6px;
  position: relative;
  text-align: center;
}

.social-links {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 16px;
  position: relative;
}

.social-icons {
  cursor: pointer;
  height: 32px;
  position: relative;
  width: 32px;
}

.john-doe-1 {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 600;
  line-height: 27.3px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.profile-image-placeholder-1-1 {
  align-self: stretch;
  height: 278px;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.highlighted-cta-1 {
  background-color: var(--neutral---zircon);
  display: flex;
  justify-content: center;
  padding: 60px 55px;
  width: 1280px;
}

.highlighted-cta-2 {
  background-color: var(--accent---mandys-pink);
  border-radius: 20px;
  display: inline-flex;
}

.content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 60px;
  position: relative;
  width: 586px;
}

.text-3 {
  align-items: flex-start;
  gap: 20px;
}

.break-the-figma-limi-1 {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 31.5px;
  position: relative;
}

.button-3 {
  align-items: center;
  background-color: var(--cta---observatory);
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  height: 60px;
  justify-content: center;
  padding: 16px 50px;
  position: relative;
  transition: all 0.3s ease;
}

.label-14 {
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
  width: fit-content;
}

.arrow-left-1 {
  background-image: url(../img/arrowright-5.svg);
  background-size: 100% 100%;
  height: 20px;
  position: relative;
  width: 20px;
}

.mockup {
  border-radius: 20px;
  height: 434px;
  overflow: hidden;
  position: relative;
  width: 584px;
}

.overlap-group1-1 {
  height: 860px;
  left: 18px;
  position: relative;
  top: -92px;
  width: 631px;
}

.ellipse-4 {
  border: 41px solid;
  border-color: var(--accent---persimmon);
  border-radius: 130.5px;
  height: 261px;
  left: 0;
  position: absolute;
  top: 330px;
  width: 261px;
}

.ellipse-5 {
  background-color: var(--cta---observatory);
  border-radius: 130.5px;
  height: 261px;
  left: 370px;
  position: absolute;
  top: 0;
  width: 261px;
}

.mobile-mockup-2 {
  border-radius: 20px;
  box-shadow: inset -3.86px -8.68px 6.75px #0000001a , 18.09px 24.42px 34.27px #00000026;
  height: 723px;
  left: 108px;
  min-width: 376px;
  position: absolute;
  top: 137px;
}

.overlap-group-1 {
  height: 736px;
  margin-top: -6.34px;
  position: relative;
  width: 393px;
}

.button-12 {
  background: linear-gradient(180deg, rgb(215.99, 215.99, 215.99) 0%, rgb(255, 255, 255) 54.62%, rgb(215.99, 215.99, 215.99) 100%);
  border: 0.08px solid;
  border-color: var(--deviders---grey-);
  border-radius: 4.96px;
  height: 92px;
  left: 381px;
  position: absolute;
  top: 152px;
  width: 12px;
}

.button-13 {
  background: linear-gradient(180deg, rgb(215.99, 215.99, 215.99) 0%, rgb(255, 255, 255) 54.62%, rgb(215.99, 215.99, 215.99) 100%);
  border: 0.08px solid;
  border-color: var(--deviders---grey-);
  border-radius: 4.96px;
  height: 67px;
  left: 0;
  position: absolute;
  top: 225px;
  width: 12px;
}

.button-14 {
  background: linear-gradient(180deg, rgb(215.99, 215.99, 215.99) 0%, rgb(255, 255, 255) 54.62%, rgb(215.99, 215.99, 215.99) 100%);
  border: 0.08px solid;
  border-color: var(--deviders---grey-);
  border-radius: 4.96px;
  height: 67px;
  left: 0;
  position: absolute;
  top: 148px;
  width: 12px;
}

.button-15 {
  background: linear-gradient(180deg, rgb(215.99, 215.99, 215.99) 0%, rgb(255, 255, 255) 54.62%, rgb(215.99, 215.99, 215.99) 100%);
  border: 0.08px solid;
  border-color: var(--deviders---grey-);
  border-radius: 4.96px;
  height: 30px;
  left: 0;
  position: absolute;
  top: 100px;
  width: 12px;
}

.insert-your-screen-here-1 {
  align-items: flex-start;
  border: 0.96px solid;
  border-color: var(--neutral---mine-shaft);
  border-radius: 57.85px;
  box-shadow: inset 0.96px 0.96px 1.93px #00000040;
  display: flex;
  height: 704px;
  left: 18px;
  overflow: hidden;
  position: absolute;
  top: 16px;
  width: 355px;
}

.insert-your-mockup-image-here-1 {
  height: 379px;
  margin-top: 0;
  object-fit: cover;
  width: 355px;
}

.top-speaker-1 {
  align-items: flex-end;
  background-color: var(--white);
  border-radius: 96.41px;
  display: flex;
  gap: 4px;
  height: 25px;
  justify-content: flex-end;
  left: 138px;
  min-width: 116px;
  padding: 10.6px 26.0px;
  position: absolute;
  top: 25px;
}

.rectangle-10-1 {
  background-color: var(--celeste);
  border-radius: 7.71px;
  height: 4px;
  width: 52px;
}

.ellipse-1-3 {
  background-color: var(--celeste);
  border-radius: 1.93px;
  height: 4px;
  width: 4px;
}

.contact-form {
  background-color: var(--neutral---zircon);
  display: flex;
  gap: 60px;
  justify-content: center;
  padding: 60px 55px;
  width: 1280px;
}

.contact-form-1 {
  align-items: flex-start;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--cta---aqua-squeeze);
  border-radius: 20px;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 60px;
  padding: 60px;
  position: relative;
}

.headline-subhead-1 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  position: relative;
  width: 100%;
}

.lets-get-in-touch {
  color: var(--neutral---mine-shaft);
  font-weight: 700;
  line-height: 49.4px;
  margin-top: -1.00px;
  position: relative;
  width: 465px;
}

.got-questions-about {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 24px;
  position: relative;
}

.contact-details {
  align-self: stretch;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-details-item {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

.contact-details-item-item {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  position: relative;
  width: 465px;
}

.phone-call {
  height: 24px;
  position: relative;
  width: 24px;
}

.envelope-simple {
  height: 24px;
  position: relative;
  width: 24px;
}

.helloanimaappcom {
  color: var(--neutral---mine-shaft);
  flex: 1;
  font-weight: 400;
  line-height: 24px;
  margin-top: -1.00px;
  position: relative;
}

.connect-with-us {
  color: var(--neutral---mine-shaft);
  font-weight: 600;
  line-height: 27.3px;
  margin-top: -1.00px;
  position: relative;
  width: 465px;
}

.input-fields-button {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 20px;
  margin-right: -505.00px;
  position: relative;
}

.input-fields {
  align-items: flex-start;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  width: 465px;
}

.input-field {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--deviders---grey-);
  border-radius: 20px;
  gap: 12px;
  height: 60px;
  padding: 8px 20px;
  width: 100%;
}

.user {
  height: 20px;
  position: relative;
  width: 20px;
}

.divider {
  background-color: var(--hawkes-blue);
  height: 20px;
  position: relative;
  width: 1px;
}

.full-name {
  background-color: transparent;
  border: 0;
  color: var(--neutral---mine-shaft);
  flex: 1;
  flex-grow: 1;
  font-weight: 400;
  line-height: 24px;
  padding: 0;
  position: relative;
}

.full-name::placeholder {
  color: #2d2d2d99;
}

.envelope-simple-1 {
  height: 20px;
  position: relative;
  width: 20px;
}

.email {
  background-color: transparent;
  border: 0;
  color: var(--neutral---mine-shaft);
  flex: 1;
  flex-grow: 1;
  font-weight: 400;
  line-height: 24px;
  padding: 0;
  position: relative;
}

.email::placeholder {
  color: #2d2d2d99;
}

.label-15 {
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
  width: fit-content;
}

.footer {
  align-items: center;
  align-self: stretch;
  background-color: var(--neutral---mine-shaft);
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  mix-blend-mode: normal;
  padding: 24px 60px;
  position: relative;
  width: 100%;
}

.x2023-anima-landing-page-ui-kit {
  color: var(--white);
  font-weight: 400;
  line-height: 20px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.arrow {
  background-size: 100% 100%;
  height: 20px;
  position: relative;
  width: 20px;
}

.cards-row-3 {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  gap: 30px;
  position: relative;
}

.check-9 {
  height: 20px;
  position: relative;
  width: 20px;
}

.client-logo-5 {
  position: relative;
  width: 90px;
}

.contact {
  align-items: flex-start;
  flex: 0 0 auto;
  position: relative;
}

.highlighted-cta-3 {
  align-items: flex-start;
  flex: 0 0 auto;
  position: relative;
}

.input {
  display: flex;
  position: relative;
}

.label-16 {
  position: relative;
  text-align: center;
}

.mobile-mockup-3 {
  align-items: flex-start;
  display: flex;
  justify-content: flex-end;
}

.person-details-3 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  position: relative;
  width: 100%;
}

.pricing-info-3 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  position: relative;
  width: 100%;
}

.star-icon-3 {
  height: 25.1px;
  margin-bottom: -1.01px;
  margin-top: -1.00px;
  position: relative;
  width: 25.99px;
}

.text-4 {
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.write-benefits-focus-3 {
  align-self: stretch;
  color: var(--neutral---mine-shaft);
  font-weight: 400;
  line-height: 24px;
  position: relative;
  text-align: center;
}