/*** GLOBAL SETTING ***/
*{ margin: 0; padding: 0;}
body { margin: 0; padding:0; font:normal 18px 'Barlow', sans-serif; color:#fff; line-height:normal; position:relative;  background: #1d212c;}

/*** GLOBAL SELECTORS ***/
a{ color:#fff; text-decoration: none;}
a:hover{ color:#fff;} 

/*Main Content*/
.container{ width: min(480px, 90%); margin:0 auto;}
img { width: auto; height: auto; max-width: 100%;}

body, html{ width:100%; height:100%; padding: 0; margin: 0;}

#wrapper{ background: #1d212c; position: relative; }

.sectionheight{ position: relative; height:calc(100vh - 70px)}
.sectionheight::before, #wrapper::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000;}

.headersection{ background: url(../images/header-bg-img.jpg) no-repeat top center; background-size: cover; padding:6vh 0 7vh; position: relative; text-align: center;}
.headersection::before{ content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 157px; background: linear-gradient(0deg, rgba(6,7,10,1) 0%, rgba(255,255,255,0) 100%);}
.headersection::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(6,7,10,1) 100%);}
.headersection .logo{ position: relative; z-index: 1;}
.headersection h1{ font-size:1.6vw; font-weight: 600; line-height: 33px; font-family: 'Noto Sans', sans-serif; text-transform: uppercase; position: relative; z-index: 1; margin-top: 20px;}

.socialsec{ background: #1d212c; overflow: hidden; margin-top:-4vw;}
.socialsec ul{ margin: 40px 0 50px;}
.socialsec ul li{ display: inline-block; vertical-align: top; width: 100%; box-sizing: border-box; font-size: 0; position: relative;}
.socialsec ul li.right{ text-align: right; margin-top: -30px;}
.socialsec ul li::before{ content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #161923;}
.socialsec ul li.right::before{ content: ""; position: absolute; top: 0; left: 99%; width: 100%; height: 100%; background: #161923;}
.socialsec ul li a{ padding:2.3vh 5% 2.3vh 10.5%; box-sizing: border-box; display: inline-block; width: 44%; background: #161923; position: relative; font-size: 18px; font-weight: 500; text-transform: uppercase; text-align: left; z-index:1;}
.socialsec ul li a::before{ content: ""; position: absolute; top: 50%; left: 10px; transform: translateY(-50%);}
.socialsec ul li a.fb::before{ background: url(../images/fb-icon.png) no-repeat top; width: 28px; height: 26px;}
.socialsec ul li a.ln::before{ background: url(../images/ln-icon.png) no-repeat top; width: 28px; height: 22px;}
.socialsec ul li a.insta::before{ background: url(../images/insta-icon.png) no-repeat top; width: 28px; height: 24px;}
.socialsec ul li a.twt::before{ background: url(../images/twt-icon.png) no-repeat top; width: 28px; height: 23px;}
.socialsec ul li a.yt::before{ background: url(../images/yt-icon.png) no-repeat top; width: 28px; height: 21px;}
.socialsec ul li a.mail::before{ background: url(../images/mail-icon.png) no-repeat top; width: 28px; height: 16px;}
.socialsec ul li a.playstore::before{ background: url(../images/play-store.png) no-repeat top; width: 28px; height: 23px;}
.socialsec ul li a::after{ content: ""; position: absolute; top: 0; right: -9%; background: url(../images/social-bg-img.png) no-repeat top; width: 13%; height: 100%; background-size: contain;}
.socialsec ul li.right a::after{ content: ""; position: absolute; top: 0; left: -9%; background: url(../images/social-right-bg-img.png) no-repeat top; width: 13%; height: 100%; background-size: cover;}

.footersec{ background: #ee1f46; text-align: center; position: fixed; bottom: 0; left: 0; width: 100%; right:0; height: 70px;   line-height: 70px;}
.footersec a{ padding-left: 60px; font-size: 22px; font-weight: 500; position: relative;}
.footersec a::before{ content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; background: url(../images/web-icon.png) no-repeat top; width: 43px; height: 43px; background-size: contain;}

/*  */
.headersection .container {position: relative; z-index: 1;}
.waitlistbtn a {display: inline-block; font-size: 20px; font-weight: 500; color: #fff; font-family: 'Barlow'; line-height: 15px; text-align: center; background: #ee2047; border-radius: 5px; padding: 15px 22px; box-sizing: border-box; text-decoration: none; transition: 0.5s ease; margin-top: 10px; }
.waitlistbtn a:hover {background: #1d212c; color: #fff;}
.headersection h1 {font-size: 15px;}
/*  */
.signupbtn {margin-top: 10px;}
.signupbtn ul {margin-top: 15px; display: flex; flex-wrap: wrap; align-items: center; font-size: 0; position: relative; justify-content: center; gap: 0 15px;}
.signupbtn ul li a.android {background: url(../images/playstore-icon.png) no-repeat center;}
.signupbtn ul li a.register {background: url(../images/register-icon.png) no-repeat center;}
.signupbtn ul li a.ios {background: url(../images/ios-icon.png) no-repeat center;}

.signupbtn ul li a {background: #ee2248; text-align: center; border-radius: 5px; box-sizing: border-box; display: block; transition: 0.3s ease; background-color: #000 !important; background-size: 60% !important; width: 55px; height: 50px; box-shadow: 0 0 5px rgb(238 31 70 / 54%);}
.signupbtn ul li a:hover {box-shadow: 0 0 5px rgb(238 31 70);}

@media only screen and ( max-width: 415px){
    .socialsec ul li a{ width: 43%;}
    .socialsec ul li a::before{ left: 5px;}
    .headersection h1{ font-size: 22px; line-height: 30px;}
	.headersection { padding:7vh 0;}
}
@media only screen and ( max-width: 401px){
    .headersection .logo{ width: 90%; margin: 0 auto;}
    .footersec a{ padding-left: 55px;}
    .socialsec ul li a{ padding: 23px 5% 23px 12%; font-size: 16px;}
    .socialsec ul li a::after{ height: 100% !important;}
}
@media only screen and ( max-width: 376px){
    .headersection{ padding: 30px 0;}
    .waitlistbtn a {width: 100%; font-size: 18px; padding: 15px 10px;}
    .socialsec ul li a{ font-size: 13px; padding: 10px 3% 10px 12%;}
}
@media only screen and ( max-width: 361px){
    .headersection h1{ font-size: 19px; line-height: 27px;}
    .footersec a{ font-size: 18px; padding-left: 45px;}
    .footersec a::before{ width: 38px; height: 38px;}
    
}
@media only screen and ( max-width: 320px){
    
}