* {
	box-sizing: border-box
}

body {
    display: flex;
    justify-content: center;
    background: white;
    align-items:center;
}

.mainContainer {
    width: 100%;
    border-radius: 40px;
}

.overallContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 40px;
    background: #FFF;
    width: 100%;
}

.howdyHeader {
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: 40px;
    border-top-left-radius: 40px;
    background: white;
    width: 100%;
}

.headerInnerDiv {
    height: 100%;
    width: 100%;
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: space-between;
    align-items: center;
}

.headerButton {
    border-radius: 12px;
    background: var(--color-primary-600-main, #4D6DFB);
}

.getTheApp{
	justify-content: center; align-items: center; gap: 16px; display: none;
}

.heroContainer {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.heroContent {
    display: flex;
    flex-direction: column;
    padding-left: 24px;
    padding-top: 32px;
    padding-right: 24px;
    justify-content: center;
    align-items: center;
    /* align-self: stretch; */
    background: #FFF;
    /* height: 652px; */
    gap: 16px;
    /* border: 1px solid green; */
}

.heroContentLeft {
    display: flex;
    /* border: 1px solid blue; */
    padding-top: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    flex: 1 0 0;
    width: 100%;
    align-self: stretch;
    /* width: 548px; */
}

.heroContentLeftTextContainer {
    display: flex;
    padding-bottom: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}

.hero-background-blur-test {
    border-radius: var(--radius-full, 9999px);
    opacity: 0.24;
    background: linear-gradient(345deg, #7EF7E3 -22.62%, #728CFF 12.2%, #F77EEB 61.64%);
    filter: blur(28px);
    position: absolute;
    top: 415px;
    /* right: -186px;
    bottom: -152px; */
    width: 100%;
    height: 287px;
    /* border: 5px solid red; */
}

.qrSectionTop {
    display: none;
    align-items: flex-start;
    gap: 24px;
}

.qrSection {
    display: none;
    align-items: flex-start;
    gap: 24px;
    max-width: 344px;
}

.qrContainer {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;

}

.qrCode {
    width: 104px;
    height: 104px;
    aspect-ratio: 1/1;
    border-radius: 17.333px;
}

.downloadAppleMobile{
	display:none;
    justify-content: center;
    align-items:center;
    width:100%;
}

.downloadAppleMobileBottom{
	display:none;
    justify-content: center;
    align-items:center;
    width:100%;
    padding-top:24px;
}

/* eventually you'll need the android download divs and set their display to none here */

.appStoreButtonContainer {
    width: 160px;
    height: 44px;
}

.svgmargin-icon {
    width: 25px;
    height: 16px;
    left: 2.50px;
}

.heroContentRight {
    display: none;
    justify-content: center;
    background-image: url('/images/heroContentRight2x.png');
    background-repeat: no-repeat;
    backdrop-filter: blur(20px);
    background-size: contain;
    width: 100%;
    height: 300px;
    /* border: 1px solid red; */
    /* height: 593px; */
    /* width: 682px; */
}

.heroContentRightNoBackground{
    display: flex;
    justify-content: center;
    /* margin-left: 10px; */
    width: 100%;
    /* padding-right: 40px; */
    /* padding-left: 40px; */
    padding: auto;
    z-index: 1;
}

.featureSection {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
}

.feelClose {
    font-family: "Be Vietnam Pro";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    /* 63.8px */
    letter-spacing: -2.32px;
    /* background: linear-gradient(-8deg, #7ef7e3 2.5%, #728cff 31.53%, #f77eeb); */
    background: linear-gradient(309deg, #7EF7E3 6.15%, #728CFF 7%, #F77EED 95.38%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.whenApart {
    color: #232834;
    font-family: "Be Vietnam Pro";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -2.32px;
    color: var(--Color-Neutral-900, #232834);
    font-family: "Be Vietnam Pro";
}

.howIsItDifferent {
    color: var(--Color-Neutral-600, #8B8D93);
    text-align: center;
    font-family: "Be Vietnam Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 22.4px */
    text-transform: uppercase;
}

.spontaneous {
    color: var(--Color-Neutral-900, #232834);
    text-align: center;

    /* Heading/H2/Bold */
    font-family: "Be Vietnam Pro";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 43.2px */
}

.secondSection {
    display: flex;
    flex-direction: column;
    padding-top: 56px;
    padding-bottom: 56px;
    padding-left: 24px;
    padding-right: 24px;
    /* padding: 64px 142px; */
    /* padding-top: 56px;
    padding-left: 24px;
    padding-right: 24px; */
    justify-content: center;
    align-items: center;
    /* gap: 393px; */
    /* align-self: stretch; */
    background: #FFF;
    /* z-index: 1; */
}

.secondSectionInner {
    display: flex;
    align-self: stretch;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    /* height: 137.1145px; */
    gap: 16px;
}

.conversationSection {
    display: flex;
    position: relative;
    flex-direction: column;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 56px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    background: white;
    overflow: hidden;
    width: 100%;
}

.conversationInner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.conversationInnerLeftTextContainer {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.shortSpont {
    width: 100%;
    position: relative;
    font-size: 18px;
    line-height: 140%;
    font-weight: 500;
    font-family: 'Be Vietnam Pro';
    color: #000;
    text-align: left;
    display: inline-block;
    opacity: 0.6;
}

.conversationInnerLeft {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.conversationInnerRight {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* height: 620px; */
    padding-bottom: 0px;
    padding-top: 45px;
    z-index: 1;
}

.conversationInnerRightImageContainer {
    /* max-width: 457.197px;
height: 493.727px; */
    flex-shrink: 0;
}

.conversationInnerLeftTop {
    color: var(--Color-Neutral-900, #232834);

    width: 100%;

    /* Heading/H2/Bold */
    font-family: "Be Vietnam Pro";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    /* 43.2px */
}

.campfireBold {
    opacity: 0.8;
    color: var(--Color-Neutral-950, #13161D);

    /* Heading/H5/Normal */
    font-family: "Be Vietnam Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
}

.conversationInnerLeftBottom {
    color: var(--Color-Neutral-950, #13161D);

    /* Heading/H5/Normal */
    font-family: "Be Vietnam Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
}

.notAnotherSocialNetwork {
    display: flex;
    flex-direction: column;
    /*padding: 64px 142px;*/
    padding-right: 24px;
    /* padding-top: 64px; */
    /* padding-bottom: 64px; */
    padding-left: 24px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    position:relative;
}

.notAnotherSocialNetworkBackgroundMobile{
    width: 100%;
    height: 188px;
    position: absolute;
    left: -69px;
    top: 50.11px;
    border-radius: var(--radius-full, 9999px);
    opacity: 0.24;
    background: linear-gradient(320deg, #7EF7E3 -21.62%, #728CFF 27.2%, #F77EEB 61.64%);
    filter: blur(94px);
}

.notAnotherSocialNetworkImageDiv{
	z-index:1;
    order: 2;
}

.featureBackground {
    /* display: none; */
    width: 100%;
    height: 171px;
    position: absolute;
    left: -72px;
    top: 280.30885px;
    border-radius: 452px;
    opacity: 0.33;
    background: linear-gradient(320deg, #7EF7E3 -21.62%, #728CFF 27.2%, #F77EEB 61.64%);
    filter: blur(134px);
    z-index: 1;
}

.notAnotherSocialNetworkInnerFrame {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 0px;
    width: 100%;
}

.notAnotherSocialNetworkRightTextSection {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.notAnotherSocialNetworkRightTextContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    align-self: stretch;
    width: 100%;
}

.notAnotherSocialNetworkRightTextContainerInner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    justify-content: center;
    width: 100%;
}

.notAnotherSocialNetworkRightTopText {
    color: var(--Color-Neutral-900, #232834);

    /* Heading/H2/Bold */
    font-family: "Be Vietnam Pro";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    /* 43.2px */
    padding-bottom: 0px;
    padding-top: 25px;
}

.notAnotherSocialNetworkRightBottomText {
    color: var(--Color-Neutral-950, #13161D);
    width: 100%;
    opacity: 0.8;
    /* Heading/H5/Normal */
    font-family: "Be Vietnam Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
}

.everyoneSection {
    display: flex;
    flex-direction: column;
    /* padding-left: 24px;
    padding-right: 24px; */
    /* padding-bottom: 128px; */
    justify-content: center;
    align-items: center;
    align-self: stretch;
    width: 100%;
    position: relative;
    /* border: 2px solid blue; */
}

.everyoneSectionFrame {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /* gap: 114px; */
    /* padding-left: 24px;
    padding-right: 24px; */
    width: 100%;
}

.everyoneSectionTextContainer {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-top: 30px;
}

.everyoneSectionTextContainerInner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    width: 100%;
}

.everyoneSectionTextTop {
    color: var(--Color-Neutral-900, #232834);
    align-self: stretch;
    /* Heading/H2/Bold */
    font-family: "Be Vietnam Pro";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    /* 43.2px */
}

.everyoneSectionTextBottomFeatureList {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}

.everyoneSectionTextBottomFeatureListItem {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.everyoneSectionTextBottomFeatureListItemIconContainer {
    display: flex;
    width: 38px;
    height: 38px;
    padding: 2.477px 2.478px 2.48px 2.479px;
    justify-content: center;
    align-items: center;
}

.everyoneSectionTextBottomFeatureListItemIconContainerInner {
    display: flex;
    padding: 6.609px;
    justify-content: center;
    align-items: center;
    gap: 6.609px;
    border-radius: 72.696px;
    backdrop-filter: blur(8.260869979858398px);
}

.everyoneSectionFeatureListItemText {
    color: var(--Color-Neutral-950, #13161D);

    /* Heading/H5/Normal */
    font-family: "Be Vietnam Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
}

.everyoneSectionRightPanel {
    /* width: 80%; */
    /* height: 779px; */
    z-index: 1;

}

.bottomContainerWithFooter {
    height: 607px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
}

.bottomDownloadContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 284px;
    width: 100%;
    border: 1px solid black;
    gap: 16px;
}

.bottomDownloadBox {
    display: flex;
    /* border: 1px solid red; */
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    max-width: 344px;
    height: 220px;
}

.bottomDownload {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.bottomDownloadItem {
    max-width: 160px;
    height: 172px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid black;
}

.bottomDownloadQRCode {
    display: flex;
    width: 104px;
    height: 104px;
    justify-content: center;
    align-items: center;
}

.bottomDownloadButton {
    width: 160px;
    height: 44px;
}

.talkPeople {
    font-family: Be Vietnam Pro;
    font-weight: 600;
    font-size: 36px;
    line-height: 120%;
    letter-spacing: -2%;
    text-align: center;
    /* height: 48px; */
    width: 100%;
}

.alignTop {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 96px;
    max-width: 238px;
}

.alignBottom {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 284px;
    max-width: 828px;
}

.howdyFooter {
    height: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* border: 1px solid green; */
    justify-content: center;
    align-items: center;
    padding-top: 80px;
}

.howdyFooterContainer {
    display: flex;
    width: 100%;
    height: 16px;
    justify-content: space-between;
}

.howdyCopyright {
    font-family: Be Vietnam Pro;
    max-width: 353px;
    font-weight: 400;
    font-size: 12px;
    line-height: 120%;
    letter-spacing: -0.1%;
    color: var(--Color-Neutral-950, #8B8D93);
    z-index:1;
}

.howdyLinksOld {
    display: flex;
    justify-content: space-between;
    max-width: 329px;
    height: 16px;
    font-family: Be Vietnam Pro;
    font-weight: 400;
    font-size: 12px;
    line-height: 130%;
    letter-spacing: -0.1%;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;
    gap: 24px;
}

.howdyLinks {
	display: flex;
	justify-content: space-between;
	max-width: 100dvw;
	height: 16px;
	gap: 24px;
    z-index: 1;
}

.howdyLink{
    color: var(--Color-Neutral-950, #8B8D93);
	font-family: "Be Vietnam Pro";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 130%; /* 15.6px */
	letter-spacing: -0.012px;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}

.footerBackgroundContainer {
    position: relative;
    overflow: hidden;
}

.footerSection {
    display: flex;
    /* position: relative; */
    /* padding: 72px 0px 24px 0px; */
    padding-top: 44px;
    padding-left: 24px;
    padding-right: 24px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    width: 100%;
    background: white;
}

.howdyButtonGradient {
    position: absolute;
    width: 219px;
    height: 98px;
    flex-shrink: 0;
    border-radius: 16px;
    border: 1px solid #D9D9D9;
    opacity: 0.4;
    background: linear-gradient(72deg, #F77EEB 4.04%, #728CFF 67.05%, #7EF7E3 99.31%, #F77EEB 128.76%);
    filter: blur(10px);
}

.footerBackgroudShapeOval {
    /* display: none; */
    width: 1837px;
    height: 472px;
    position: absolute;
    right: -246px;
    bottom: -325.778px;
    border-radius: var(--radius-full, 9999px);
    opacity: 0.24;
    background: linear-gradient(320deg, #7EF7E3 -21.62%, #728CFF 27.2%, #F77EEB 61.64%);
    filter: blur(52px);
}

.footerBackgroundRight {
    /* display: none; */
    width: 737.718px;
    height: 686.888px;
    position: absolute;
    right: -486.113px;
    bottom: -552.226px;
    border-radius: var(--radius-full, 9999px);
    opacity: 0.24;
    background: linear-gradient(320deg, #7EF7E3 -21.62%, #728CFF 27.2%, #F77EEB 61.64%);
    filter: blur(78px);
}

.footerBackgroundLeft {
    /* display: none; */
    width: 677.9px;
    height: 706.682px;
    transform: rotate(-19.219deg);
    position: absolute;
    left: -354px;
    bottom: -552.227px;
    border-radius: var(--radius-full, 9999px);
    opacity: 0.24;
    background: linear-gradient(320deg, #7EF7E3 -21.62%, #728CFF 27.2%, #F77EEB 61.64%);
    filter: blur(78px);
}

.footerContent {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
}

.footerTextContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 20px;
}

.credits {
    padding-top: 40px;
    padding-bottom: 24px;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    background: white;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.creditsRow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}