@font-face {
    font-family: 'FFF Acid Grotesk';
    src: url('../fonts/FFF-AcidGrotesk-Bold-TRIAL.woff2') format('woff2'),
        url('../fonts/FFF-AcidGrotesk-Bold-TRIAL.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kelsi';
    src: url('../fonts/Kelsi-Regular.woff2') format('woff2'),
        url('../fonts/Kelsi-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kelsi 1';
    src: url('../fonts/Kelsi1-fill.woff2') format('woff2'),
        url('../fonts/Kelsi1-fill.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'FFF Acid Grotesk';
    src: url('../fonts/FFF-AcidGrotesk-Regular-Italic-TRIAL.woff2') format('woff2'),
        url('../fonts/FFF-AcidGrotesk-Regular-Italic-TRIAL.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'FFF Acid Grotesk';
    src: url('../fonts/FFF-AcidGrotesk-Medium-TRIAL.woff2') format('woff2'),
        url('../fonts/FFF-AcidGrotesk-Medium-TRIAL.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'FFF Acid Grotesk';
    src: url('../fonts/FFF-AcidGrotesk-Medium-Italic-TRIAL.woff2') format('woff2'),
        url('../fonts/FFF-AcidGrotesk-Medium-Italic-TRIAL.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'FFF Acid Grotesk';
    src: url('../fonts/FFF-AcidGrotesk-Light-Italic-TRIAL.woff2') format('woff2'),
        url('../fonts/FFF-AcidGrotesk-Light-Italic-TRIAL.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'FFF Acid Grotesk';
    src: url('../fonts/FFF-AcidGrotesk-Light-TRIAL.woff2') format('woff2'),
        url('../fonts/FFF-AcidGrotesk-Light-TRIAL.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FFF Acid Grotesk';
    src: url('../fonts/FFF-AcidGrotesk-Bold-Italic-TRIAL.woff2') format('woff2'),
        url('../fonts/FFF-AcidGrotesk-Bold-Italic-TRIAL.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'FFF Acid Grotesk Ultra';
    src: url('../fonts/FFF-AcidGrotesk-UltraLight-TRIAL.woff2') format('woff2'),
        url('../fonts/FFF-AcidGrotesk-UltraLight-TRIAL.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FFF Acid Grotesk';
    src: url('../fonts/FFF-AcidGrotesk-Regular-TRIAL.woff2') format('woff2'),
        url('../fonts/FFF-AcidGrotesk-Regular-TRIAL.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FFF Acid Grotesk';
    src: url('../fonts/FFF-AcidGrotesk-Black-TRIAL.woff2') format('woff2'),
        url('../fonts/FFF-AcidGrotesk-Black-TRIAL.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FFF Acid Grotesk Ul Light It';
    src: url('../fonts/FFF-AcidGrotesk-UltraLight-Italic-TRIAL.woff2') format('woff2'),
        url('../fonts/FFF-AcidGrotesk-UltraLight-Italic-TRIAL.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'FFF Acid Grotesk';
    src: url('../fonts/FFF-AcidGrotesk-Black-Italic-TRIAL.woff2') format('woff2'),
        url('../fonts/FFF-AcidGrotesk-Black-Italic-TRIAL.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Veginia';
    src: url('../fonts/VeginiaRegular.woff2') format('woff2'),
        url('../fonts/VeginiaRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ***** Common Css **** */
:root {
    scroll-behavior: initial;
}

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}
a:hover,
a:focus,
a:active {
    text-decoration: none;
}
ol,
ul {
    margin: 0;
    padding: 0;
}
img {
    display: block;
}
a,button {
    transition: 0.4s linear;
    -webkit-transition: 0.4s linear;
    text-decoration: none;
}
figure{margin: 0;}
body {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    background: #000;
}

.main-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.container{
    max-width: 1230px;
}
.mobile-img{display: none;}
/* ***** End Common Css **** */



/* ***** Loader **** */
.loader-body {
    width: 100%;
    height: 100vh;
    background-color: #000;
    position: fixed;
    z-index: 200;
    visibility: visible;
    top: 0;
    left: 0;
    text-align: center;
    justify-content: center;
    align-content: center;
    transition: 0.5s all;
  }
  .loader {
    width: 100px;
    height: 100px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }
  .loader-body.done {
    visibility: hidden;
    opacity: 0;
  }
/* ***** End Loader **** */
  


/* **** Header **** */
.absolute-header header {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    background: transparent;
    z-index: 120;
}
header {
    padding: 65px 0 30px;
    transition: 0.4s linear;
    -webkit-transition: 0.4s linear;
}
.logo-box{
    margin: 0 auto;
    display: table;
}
.logo-box img{
    height: 43px;
}
/* **** End Header **** */

/* **** Hero Banner **** */
.hero-banner{
    padding: 200px 0 460px;
    position: relative;
    background: #000;
}
.hero-banner .container{
    position: relative;
    z-index: 5;
}
.hero-banner h1{
    font-family: 'Kelsi 1';
    font-style: normal;
    font-weight: 400;
    font-size: 172px;
    line-height: 93%;
    text-align: center;
    color: #FFFFFF;
    margin: 0 auto 40px;
    max-width: 1750px;
}
.hero-banner h1 span{
    
}
.hero-banner h1 br{display: none;}
.hero-banner h2{
    font-size: 35px;
    font-weight: 500;
    font-family: 'Nunito';
    color: #fff;
    text-align: center;
    line-height: 52px;
    margin: 0 auto 78px;
    max-width: 1100px;
}
.hero-banner .btn-group{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
}
.hero-banner .btn-group a{
    margin-right: 30px;
}
.hero-banner .btn-group a:last-child{
    margin: 0;
}
.hero-banner .btn-group a img{
    width: 220px;
}
.hero-banner .btn-group a:hover{
    opacity: 0.70;
}

img.hero-shap{
    width: 100%;
    position: absolute;
    bottom:-1px;
    left: 0;
    right: 0;
}
img.hero-shap-mobile{display:none;}
.scroll-btn{
    width: 53px;
    height: 53px;
    border-radius: 100%;
    border: 5px solid #C4077B;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom:13%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.scroll-btn:hover{
    background:#C4077B;
}
/* **** End Hero Banner **** */

/* **** Talk About Topics **** */
.talk-about-wrp{
    padding: 118px 0 182px;
    background: #fff;
    overflow: hidden;
}
.talk-about-wrp h2{
    font-size: 40px;
    font-weight: bold;
    color: #000;
    text-align: center;
    line-height: 124%;
    margin: 0 auto 95px;
    max-width: 440px;
    font-family: 'Open Sans';
    letter-spacing: -0.02em;
}
.talk-about-wrp h2 span{
    background: #FFE500;
    border-radius: 30px;
    padding: 3px 10px;
}
.talk-about-row{
    position: relative;
}
.talk-about-row img{
    width: 100%;
}

.talk-row{
    position: relative;
    max-width: 1305px;
    margin: 0 auto;
    display: flex;
}
.talk-mobilebox{
    margin: 0 auto;
    max-width: 339px;
    width: 30%;
}
.talk-mobilebox img{width: 100%;}
.talk-left-topics{
    width: 35%;
}

.talk-left-topics label{
    margin: 0;
    padding: 11px 16px;
    background: #C52F80;
    font-weight: normal;
    color: #fff;
    font-family: 'ABeeZee';
    position: absolute;
    top: 140px;
    left: 0;
    border-radius: 30px;
    font-size: 26px;
    line-height: 31px;
}
.talk-left-topics label.lbl2{
    background: #F13125;
    left: 285px;
    top: 115px;
    transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
}
.talk-left-topics label.lbl3{
    background: #0B4DE9;
    top: 200px;
    left: 220px;
}
.talk-left-topics label.lbl4{
    background: #85858F;
    top: 270px;
    left: 90px;
    transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
}
.talk-left-topics label.lbl5{
    background: #B654E7;
    top: 345px;
    left: 220px;
    transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
}
.talk-left-topics label.lbl6{
    background: #8B0E73;
    top: 300px;
    left: 350px;
}
.talk-left-topics label.lbl7{
    background: #EA8F0F;
    transform: rotate(-4deg);
    -webkit-transform: rotate(-4deg);
    top: 450px;
    left:30px;
}
.talk-left-topics label.lbl8{
    background: #1581F8;
    top: 500px;
    left: 250px;
    transform: rotate(-9deg);
    -webkit-transform: rotate(-9deg);
}
.talk-left-topics label.lbl9{
    background: #FFB800;
    transform: rotate(-18deg);
    -webkit-transform: rotate(-18deg);
    top: auto;
    bottom: 50px;
    left: 0;
}
.talk-left-topics label.lbl10{
    background: #2AA590;
    transform: rotate(-14deg);
    -webkit-transform: rotate(-14deg);
    bottom: 0;
    left: 150px;
    top: auto;
    font-size: 32px;
    font-family: 'Nunito';
    line-height: 54px;
    font-weight: 500;
    padding: 0 12px;
}

.talk-right-topics{
    width: 35%;
    position: relative;    
}
.talk-right-topics label{
    margin: 0;
    padding: 11px 16px;
    background: #2AA590;
    font-weight: normal;
    color: #fff;
    font-family: 'ABeeZee';
    position: absolute;
    top: 100px;
    left:-120px;
    border-radius: 30px;
    font-size: 26px;
    line-height: 31px;
}
.talk-right-topics label.lblr1{
    background: #1581F8;
    transform: rotate(13deg);
    -webkit-transform: rotate(13deg);
    right: 0;
    top: 90px;
    left: auto;
}
.talk-right-topics label.lblr2{
    background: #22C74A;
    transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    top: 180px;
    left: -10px;
}
.talk-right-topics label.lblr3{
    background: #9435C0;
    left: auto;
    right: 0;
    top: 240px;
    font-size: 32px;
    font-family: 'Nunito';
    line-height: 54px;
    font-weight: 500;
    padding: 0 12px;
}
.talk-right-topics label.lblr4{
    background: #1581F8;
    transform: rotate(26deg);
    -webkit-transform: rotate(26deg);
    top: 310px;
    left: -20px;
}
.talk-right-topics label.lblr5{
    background: #8B0E73;
    transform: rotate(9deg);
    -webkit-transform: rotate(9deg);
    top: 320px;
    left: 130px;
}
.talk-right-topics label.lblr6{
    background: #F13125;
    top: 420px;
    left: 40px;
}
.talk-right-topics label.lblr7{
    background: #FFB800;
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    right:20px;
    top: 420px;
    left: auto;
}
.talk-right-topics label.lblr8{
    background: #22C74A;
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    top: auto;
    bottom: 110px;
    left: 0;
}
.talk-right-topics label.lblr9{
    background: #EA8F0F;
    transform: rotate(-6deg);
    -webkit-transform: rotate(-6deg);
    top: auto;
    bottom: 100px;
    right: 40px;
    left: auto;
}
.talk-right-topics label.lblr10{
    background: #1581F8;
    transform: rotate(-2.7deg);
    -webkit-transform: rotate(-2.7deg);
    top: auto;
    bottom: 0px;
    right: 30px;
    left: auto;
}
img.topice-line{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
/* **** End Talk About Topics **** */

/* **** Make Friends **** */
.make-friend-wrp{
    padding: 215px 0;
}
.make-row{
    position: relative;
}
.make-row img{
    width: 100%;
}
.make-data{
    max-width: 400px;
    width: 100%;
    position: absolute;
    top: 55%;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.make-data h2{
    font-size: 48px;
    font-weight: bold;
    font-family: 'FFF Acid Grotesk';
    color: #fff;
    text-align: center;
    margin: 0 auto 15px;
    line-height: 109%;
    text-transform: capitalize;
}
.make-data h2 span{
    display: block;
    font-weight: 300;
}
.make-data p{
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    line-height: 128%;
    font-family: 'Nunito';
    text-align: center;
    margin: 0 auto;
}

.social-wrp{
    padding: 200px 0 100px;
    background: #000;
}
.social-block{
    display: flex;
}
.star-ic h3{
    margin: 0 35px 0 0;
    font-size: 400px;
    line-height: 400px;
    font-weight: bold;
    color: #fff;
    font-family: 'FFF Acid Grotesk';
}
.social-data h2{
    font-size: 96px;
    font-weight: bold;
    font-family: 'FFF Acid Grotesk';
    color: #fff;
    line-height: 109%;
    text-transform: capitalize;
    margin: 0 0 35px;
}
.social-data p{
    font-size: 40px;
    font-weight: 300;
    line-height: 109%;
    font-family: 'FFF Acid Grotesk';
    margin: 0;
    text-transform: capitalize;
    color: #fff;
}
.social-data p strong{
    font-weight: bold;
}


.connect-across-wrp{
    padding: 115px 0 150px; 
}
.connect-across-wrp .container{
    max-width: 1000px;
}
.connect-across-img img{
    width: 100%;
}
.connect-across-data{
    padding: 210px 0 0;
}
.connect-across-data h2{
    font-size: 56px;
    font-weight: bold;
    color: #fff;
    line-height: 109%;
    font-family: 'FFF Acid Grotesk';
    margin: 0 0 35px;
}
.connect-across-data p{
    font-size: 24px;
    font-weight:300;
    color: #fff;
    font-family: 'FFF Acid Grotesk';
    line-height: 128%;
    text-transform: capitalize;
    margin: 0;
}

.vibe-wrp{
    padding: 100px 0 150px;
    position: relative;
    background: #000;
}
.vibe-row{
    position: relative;
}
.vibe-block{
    background: url('../images/vibe-back.png') 0 0 no-repeat;
    background-size: cover;
    border-radius: 32px;
    padding: 96px 127px 96px 84px; 
    min-height: 571px;
}
.vibe-block h2{
    font-size: 64px;
    font-weight: bold;
    color: #fff;
    line-height: 109%;
    text-transform: capitalize;
    font-family: 'FFF Acid Grotesk';
    margin: 0 0 23px;
}
.vibe-block p{
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    line-height: 128%;
    margin: 0;
    font-family: 'Nunito';
}
.vide-imgbox{
    max-width: 381px;
    position: absolute;
    top: 50%;
    right:127px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.vide-imgbox img{
    width: 100%;
}
/* **** End Make Friends **** */

/* **** Private Groups **** */
.private-group-wrp{
    padding: 215px 0 100px;
    position: relative;
}
.private-group-wrp .container{
    max-width: 1062px;
}
.private-img img{
    width: 100%;
    border-radius: 255px;
}
.private-data{
    max-width: 830px;
    margin: -100px auto 0;
}
.private-data h2{
    font-family: 'Veginia';
    font-style: normal;
    font-weight: 400;
    font-size: 192px;
    line-height: 93%;
    text-align: center;
    color: #FFFFFF;
    margin: 0 auto 80px;
    text-transform: uppercase;
}
.private-data p{
    font-size: 24px;
    font-family: 'FFF Acid Grotesk';
    font-weight: normal;
    text-transform: capitalize;
    color: #fff;
    line-height: 26px;
    text-align: center;
    margin: 0 auto 60px;
}
.private-data img{
    margin: 0 auto;
    display: table;
}
/* **** End Private Groups **** */

/* **** Reply to Anyone **** */
.reply-wrp{
    padding: 105px 0 0;
}
.reply-block{
    padding: 76px 50px;
    background: linear-gradient(180deg, #FD3E40 -0.29%, #E4324D 26.55%, #A71670 84.21%, #960E7A 99.12%);
    border-radius: 77px;
}
.reply-title{
    margin: 0 0 230px;
}
.reply-title h2{
    font-size: 48px;
    font-weight: bold;
    color: #fff;
    font-family: 'FFF Acid Grotesk';
    line-height: 109%;
    margin: 0;
    padding: 0 50px 0 0;
    text-transform: capitalize;
}
.reply-title p{
    font-size: 24px;
    font-family: 'FFF Acid Grotesk';
    font-weight: normal;
    color: #fff;
    text-transform: capitalize;
    line-height: 125%;
    margin: 0;
    padding: 0 0 0 50px;
    max-width: 500px;
}

.replay-row ul{
    display: flex;
    flex-wrap: wrap;
}
.replay-row ul li{
    width: 33.33%;
    padding: 0 39px 0 29px;
    border-left: 4px solid #fff;
}
.replay-row ul li h3{
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    line-height: 132%;
    min-height: 50px;
    font-family: 'FFF Acid Grotesk';
    margin: 0 0 35px;
}
.replay-row ul li p{
    margin: 0;
    font-size: 24px;
    font-weight: normal;
    color: #fff;
    text-transform: capitalize;
    line-height: 131%;
    font-family: 'FFF Acid Grotesk';
}
/* **** End Reply to Anyone **** */

/* **** Download App **** */
.download-wrp{
    position: relative;
}
.download-wrp img{
    width: 100%;
}
.download-block{
    padding: 89px 66px 79px 58px;
    background: #fff;
    border-radius: 48.5px;
    max-width: 727px;
    margin: 0 auto;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    font-family: 'FFF Acid Grotesk';
}
.download-block h6{
    font-size: 32px;
    font-weight: normal;
    color: #000;
    line-height: 132%;
    margin: 0;
}
.download-block h2{
    font-size: 96px;
    line-height: 93%;
    font-weight: 900;
    color: #000;
    margin: 0 0 35px;
}
.download-block .btn-group{
    display: flex;
    align-items: center;
}
.download-block .btn-group a{
    margin-right: 25px;
}
.download-block .btn-group a:last-child{margin:0;}
.download-block .btn-group a img{
    border-radius: 48.5px;
}
.download-block .btn-group a:hover{
    opacity: 0.70;
}
/* **** End Download App **** */

/* **** Footer **** */
footer{
    padding: 84px 0 213px;
    border-top: 1px solid #E8E8E8;
}
.footer-logo img{
    height: 36px;
}
.quicklinks h3{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 32px;
}
.quicklinks ul li{
    margin: 0 0 16px;
}
.quicklinks ul li:last-child{
    margin: 0;
}
.quicklinks ul li.mobile-menu{display: none;}
.quicklinks ul li a{
    font-size: 16px;
    font-weight: 500;
    color:#fff;
    line-height: 160%;
    display: table;
}
.quicklinks ul li a:hover{
    color: #C4077B;
}

.copyright{
    padding: 100px 0 0;
}
.copyright .row{align-items: center;}
.copyright ul{
    display: flex;
    align-items: center;
}
.copyright ul li{
    margin-right: 20px;
}
.copyright ul li:last-child{
    margin: 0;
}
.copyright ul li a{
    font-size: 16px;
    font-weight: 500;
    color:#fff;
    line-height: 160%;
    display: block;
    position: relative;
}
.copyright ul li a:after{
    position: absolute;
    content: '';
    width: 1px;
    height: 80%;
    background: #fff;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.copyright ul li:last-child a:after{display: none;}
.copyright ul li a:hover{
    color: #C4077B;
}
.copyright p{
    text-align: right;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    margin: 0;
}

.mobile-img{display: none;}
/* **** End Footer **** */