@font-face {
  font-family: Lexend;
  src: url('../fonts/Lexend-VariableFont_wght.woff2') format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-color-2: #f775ab;
  --brand-color-1: #0a0a0a;
  --brand-color-3: #5d7aab;
}

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

.container-1200px-ai-friend {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 25px;
  padding-right: 25px;
}

.flex-32-ai-friend {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  display: flex;
}

.flex-32-ai-friend.flex-left-ai-friend {
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-32-ai-friend.flex-center-ai-friend {
  justify-content: flex-start;
  align-items: center;
}

.section-ai-friend {
  padding-top: 60px;
  padding-bottom: 60px;
}

.section-ai-friend.hero {
  padding-top: 80px;
  padding-bottom: 0;
  position: relative;
}

.ai-friend-page-wrapper {
  font-family: Lexend, Arial, sans-serif;
  position: relative;
  overflow: hidden;
}

.hero-img-ai-friend {
  max-width: 400px;
}

.hero-container-ai-friend {
  justify-content: center;
  align-items: center;
  display: flex;
}

.navbar-ai-friend {
  z-index: 15;
  padding-top: 20px;
  position: absolute;
  inset: 0% 0% auto;
}

.navbar-container-ai-friend {
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 25px;
  padding-right: 25px;
  display: flex;
}

.navbar-logo-ai-friend {
  max-width: 200px;
}

.cta-btn-ai-friend {
  background-color: var(--brand-color-2);
  color: #fff;
  letter-spacing: .05rem;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 14px 24px;
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 700;
  transition: box-shadow .2s, opacity .2s;
}

.cta-btn-ai-friend:hover {
  opacity: .75;
  box-shadow: 0 2px 5px #0000006e;
}

.cta-btn-ai-friend.v2 {
  background-color: #ff57bf;
}

.flex-40-ai-friend {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}

.flex-40-ai-friend.flex-center-ai-friend {
  z-index: 10;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.flex-16-ai-friend {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}

.flex-16-ai-friend.flex-center-ai-friend {
  justify-content: flex-start;
  align-items: center;
}

.flex-16-ai-friend.flex-left-ai-friend {
  justify-content: flex-start;
  align-items: flex-start;
}

.h1-ai-friend {
  color: var(--brand-color-1);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 36px;
  font-weight: 300;
  line-height: 1.2;
}

.h1-ai-friend.text-align-center-ai-friend {
  text-align: center;
}

.h1-ai-friend.footer-variant {
  color: #0a0a0a;
  text-align: center;
}

.paragraph-ai-friend {
  color: #7a7a7a;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.4;
}

.paragraph-ai-friend.text-align-center-ai-friend {
  text-align: center;
}

.paragraph-ai-friend.text-align-center-ai-friend.v2 {
  color: #7a7a7a;
  max-width: 750px;
}

.paragraph-ai-friend.text-style-light-ai-friend {
  font-weight: 300;
}

.paragraph-ai-friend.text-style-light-ai-friend.text-align-center-ai-friend.v3 {
  color: #0a0a0a;
  max-width: 550px;
}

.paragraph-ai-friend.text-style-light-ai-friend.text-align-center-ai-friend.v4 {
  color: #0a0a0a;
}

.paragraph-ai-friend.text-style-light-ai-friend.text-color-grey-ai-friend {
  color: #2f2f2f;
}

.paragraph-ai-friend.text-style-light-ai-friend.v3 {
  color: #001e51;
}

.paragraph-ai-friend.text-style-light-ai-friend.v2 {
  color: #7a7a7a;
}

.paragraph-ai-friend.text-style-light-ai-friend.v4 {
  color: #ff99cf;
}

.paragraph-ai-friend.is-small-ai-friend {
  font-size: 16px;
}

.paragraph-ai-friend.footer-variant {
  color: #0a0a0a;
  text-align: center;
  max-width: 460px;
}

.paragraph-ai-friend.footer-variant.is-small {
  color: #0a0a0a;
  font-size: 12px;
}

.features-box-ai-friend {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-image: linear-gradient(#ffebf5, #fff9ed);
  border-radius: 12px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-left: 40px;
  padding-right: 40px;
  display: grid;
}

.flex-12-ai-friend {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.flex-12-ai-friend.flex-left-ai-friend {
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-12-ai-friend.flex-center-ai-friend {
  justify-content: flex-start;
  align-items: center;
}

.h2-ai-friend {
  color: var(--brand-color-1);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 32px;
  font-weight: 400;
}

.h2-ai-friend.text-align-center-ai-friend {
  text-align: center;
}

.h2-ai-friend.text-align-center-ai-friend.span-brand-2 {
  color: var(--brand-color-2);
}

.h2-ai-friend.text-align-center-ai-friend.v2 {
  color: #001e51;
  text-transform: uppercase;
}

.h2-ai-friend.text-align-center-ai-friend.v3 {
  color: #001e51;
}

.h2-ai-friend.text-align-center-ai-friend._1 {
  color: var(--brand-color-2);
}

.h2-ai-friend.v2 {
  color: #ff99cf;
}

.h3-ai-friend {
  color: var(--brand-color-1);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
}

.h3-ai-friend.flex-feature {
  color: #0a0a0a;
}

.h3-ai-friend.span-brand-2 {
  color: var(--brand-color-2);
}

.h3-ai-friend.faq-title {
  color: #0a0a0a;
}

.flex-8-ai-friend {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}

.flex-8-ai-friend.flex-center-ai-friend {
  justify-content: flex-start;
  align-items: center;
}

.feature-row-ai-friend {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.checkmark-icon {
  color: #ff99cf;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
}

.price-tag-ai-friend {
  color: #ff99cf;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}

.text-style-light-ai-friend {
  font-weight: 300;
}

.text-span-2 {
  color: #0a0a0a;
}

.feature-img-ai-friend {
  object-fit: cover;
}

.feature-col-2-ai-friend {
  margin-top: -40px;
}

.feature-col-1-ai-friend {
  padding-top: 40px;
  padding-bottom: 40px;
}

.flex-48-ai-friend {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: column;
  display: flex;
}

.flex-48-ai-friend.flex-center-ai-friend {
  justify-content: flex-start;
  align-items: center;
}

.max-width-820 {
  max-width: 820px;
}

.grid-why-ai {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 1100px;
  display: grid;
}

.why-ai-box {
  background-color: #fff;
  background-image: linear-gradient(#ffebf5, #fff9ed);
  border-radius: 12px;
  padding: 32px;
}

.max-width-700 {
  z-index: 10;
  max-width: 700px;
  position: relative;
}

.app-features-wrapper {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.app-features-inner-wrap {
  z-index: 10;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 940px;
  display: flex;
  position: relative;
}

.ai-app-previews {
  max-width: 500px;
}

.app-feature-div {
  text-align: center;
  max-width: 250px;
  position: absolute;
  inset: -3% auto auto 0%;
}

.app-feature-div._2 {
  top: 33%;
  left: 0%;
}

.app-feature-div._3 {
  top: 72%;
  left: 4%;
}

.app-feature-div._1 {
  top: -4%;
  left: -5%;
}

.app-feature-div._4 {
  inset: 2% -2% auto auto;
}

.app-feature-div._5 {
  inset: 38% 5% auto auto;
}

.app-feature-div._6 {
  inset: auto 16% -6% auto;
}

.icon-app-feature-ai-friend {
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  display: flex;
}

.app-feature-btn-wrap {
  z-index: 10;
  margin-top: 32px;
  position: relative;
}

.app-features-bg-img {
  z-index: -1;
  opacity: .8;
  max-width: 130%;
  position: absolute;
  inset: -4% auto 0%;
}

.meet-box {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  background-image: linear-gradient(#ffebf5, #fff9ed);
  border-radius: 12px;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  box-shadow: 0 2px 5px 1px #0003;
}

.meet-col-1 {
  max-width: 350px;
}

.meet-col-2 {
  padding-top: 40px;
  padding-bottom: 40px;
  padding-right: 40px;
}

.signature-img {
  max-width: 180px;
}

.text-weight-medium-ai-friend {
  font-weight: 500;
}

.img-wrap-meet._1 {
  z-index: 2;
  margin-top: -39px;
  margin-bottom: -26px;
  position: relative;
  transform: rotate(-9deg);
}

.img-wrap-meet._2 {
  z-index: 1;
  margin-bottom: -30px;
  position: relative;
  transform: rotate(11deg);
}

.img-meet {
  aspect-ratio: 1;
  border: 1px solid #fff;
  border-radius: 12px;
  box-shadow: 2px 8px 19px #0000001a, 10px 32px 34px #00000017, 22px 73px 46px #0000000d, 40px 129px 54px #00000003;
}

.expand-line {
  background-color: #ff99cf;
  width: 16px;
  height: 1px;
}

.expand-line.vertical {
  width: 1px;
  height: 16px;
  position: absolute;
}

.expandable-open {
  transform-origin: 50% 0;
}

.expandable-content {
  width: 100%;
  height: auto;
  margin-right: 24px;
}

.expand-space {
  height: 16px;
}

.expandable-item {
  cursor: pointer;
  border-top: 1px solid #00000026;
  justify-content: space-between;
  align-items: flex-start;
  height: auto;
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
}

.expandable-item.first-item {
  border-top-style: none;
  padding-top: 0;
}

.expand-icon-wrap {
  border: 2px solid #ff99cf;
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  margin-top: -4px;
  display: flex;
}

.faq-wrap {
  max-width: 950px;
}

.footer-container {
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  background-color: #fededf;
  background-image: linear-gradient(#ffebf5, #fff9ed 44%, #fff 88%);
  border-radius: 14px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  display: flex;
}

.socials-footer-wrap-ai-friend {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  display: flex;
}

.social-icon-link-ai-friend {
  color: #ff99cf;
  width: 24px;
  height: 24px;
  transition: all .2s, opacity .2s;
}

.social-icon-link-ai-friend:hover {
  opacity: .7;
  color: #000;
}

.social-icon-embed-ai-friend {
  justify-content: center;
  align-items: center;
  display: flex;
}

.bold-text {
  font-weight: 500;
}

.image {
  z-index: -1;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 0%;
}

.meet-ai-label {
  color: #ff99cf;
  letter-spacing: .1rem;
  border: 1px solid #ff99cf;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  font-size: 18px;
  display: flex;
}

.text-span-3 {
  color: #ff99cf;
}

@media screen and (max-width: 991px) {
  .section-ai-friend.hero {
    padding-top: 100px;
  }

  .navbar-logo-ai-friend {
    max-width: 180px;
  }

  .cta-btn-ai-friend {
    padding: 12px 20px;
    font-size: 16px;
  }

  .paragraph-ai-friend {
    font-size: 16px;
  }

  .features-box-ai-friend {
    padding-left: 24px;
    padding-right: 24px;
  }

  .feature-col-1-ai-friend {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .why-ai-box {
    padding: 24px;
  }

  .app-features-inner-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .ai-app-previews {
    max-width: 300px;
  }

  .app-feature-div {
    margin-left: auto;
    margin-right: auto;
    position: static;
  }

  .app-feature-btn-wrap {
    margin-top: 0;
  }

  .app-features-bg-img {
    object-fit: cover;
    max-width: 200%;
    top: -14%;
  }

  .meet-box {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
    flex-flow: column;
    display: flex;
  }

  .meet-col-1 {
    max-width: 100%;
    display: flex;
  }

  .meet-col-2 {
    order: -1;
    padding: 24px 24px 0;
  }

  .img-wrap-meet._1 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .img-wrap-meet._2 {
    margin-bottom: 0;
  }

  .meet-ai-label {
    padding: 8px 20px;
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {
  .section-ai-friend {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .section-ai-friend.hero {
    padding-top: 100px;
    padding-bottom: 0;
  }

  .hero-img-ai-friend {
    max-width: 350px;
  }

  .flex-40-ai-friend {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .features-box-ai-friend {
    flex-flow: column;
    display: flex;
  }

  .feature-img-ai-friend {
    max-width: 250px;
  }

  .grid-why-ai {
    grid-template-columns: 1fr 1fr;
  }

  .app-features-wrapper {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .footer-container {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
  }

  .image {
    width: auto;
    max-width: 200%;
    top: -19%;
    left: -56%;
  }
}

@media screen and (max-width: 479px) {
  .container-1200px-ai-friend {
    padding-left: 20px;
    padding-right: 20px;
  }

  .section-ai-friend.footer {
    padding-top: 0;
  }

  .hero-img-ai-friend {
    max-width: 100%;
  }

  .navbar-logo-ai-friend {
    max-width: 140px;
  }

  .cta-btn-ai-friend {
    padding: 10px 16px;
    font-size: 14px;
  }

  .h1-ai-friend {
    font-size: 30px;
  }

  .h1-ai-friend.footer-variant {
    max-width: 250px;
  }

  .paragraph-ai-friend {
    font-size: 14px;
  }

  .paragraph-ai-friend.footer-variant.is-small {
    max-width: 195px;
  }

  .h2-ai-friend {
    font-size: 24px;
    line-height: 1.2;
  }

  .h3-ai-friend {
    font-size: 18px;
  }

  .h3-ai-friend.flex-feature {
    flex-flow: column;
    display: flex;
  }

  .feature-row-ai-friend {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .checkmark-icon {
    width: 18px;
    height: 18px;
    margin-top: 1px;
  }

  .price-tag-ai-friend {
    font-size: 26px;
  }

  .feature-img-ai-friend {
    max-width: 200px;
  }

  .feature-col-2-ai-friend {
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .grid-why-ai {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    flex-flow: column;
    display: flex;
  }

  .why-ai-box {
    padding: 18px;
  }

  .icon-app-feature-ai-friend {
    width: 48px;
    height: 48px;
  }

  .app-features-bg-img {
    width: 200%;
    max-width: 200%;
    top: -3%;
  }

  .signature-img {
    max-width: 150px;
  }

  .expand-line {
    flex: none;
  }

  .expand-line.vertical {
    transform-origin: 50%;
    flex: none;
  }

  .expandable-content {
    flex: 0 auto;
    max-width: none;
  }

  .expand-icon-wrap {
    flex: none;
    width: 24px;
    height: 24px;
  }

  .footer-container {
    padding: 24px;
  }

  .image {
    top: 2%;
  }
}

#w-node-_48169692-9ce7-cc19-9058-88e2ea66a027-0cb7b8cf {
  align-self: center;
}

#w-node-a9ad03cf-909f-bc67-7d69-c82db4464327-0cb7b8cf {
  align-self: end;
}

#w-node-_7766714f-c05b-5f3a-24cf-953782f88ef3-0cb7b8cf {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_8d49c98f-8fe0-ca09-a856-7ae69b0e333a-0cb7b8cf, #w-node-_8731290b-1a90-22ce-28b4-bf0366a6cc43-0cb7b8cf {
  align-self: center;
}

@media screen and (max-width: 991px) {
  #w-node-_83f99783-f0d9-685e-4c80-4bc8892c8a4d-0cb7b8cf {
    order: -9999;
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: center;
  }
}


@font-face {
  font-family: 'Lexend';
  src: url('../fonts/Lexend-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}