@font-face {
	font-family: 'Gilroy-Medium';
	src:url("../fonts/Gilroy_Font/Gilroy-Medium.ttf");
	font-weight: normal;
	font-style: normal;
}
.tubepay-bg{
	background:#0f0823;
}
.section-grid-01{
	display:flex;
	width:100%;
}
.section-grid-02{
	width:30%;
	min-height:80vh;
	background:url(../images/hue-saturation-bg.png);
	background-size:cover;
	position:relative;
}
.human-hand-img{
	position:absolute;
	bottom:0;
	left:30%;
}
.human-hand-img img{
	max-width:200px;
}
@media(min-width:768px){
	.human-hand-img img{
		max-width:100%;
	}
}
.card-display-img{
	position:absolute;
	top:20%;
	right:-20%;
}
.card-display-img img{
	max-width:200px;
}
.section-grid-03{
	width:70%;
	padding:3em 10em;
	position:relative;
	overflow:hidden;
	font-family: 'Gilroy-Medium';
}
.section-grid-03:before{
	content:'';
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
	background:linear-gradient(45deg, #ffffff00 55%, #3c208c);
}
.section-grid-03-title{
	font-size:5em;
	font-weight:bold;
	margin:60px 0;
	position:relative;
}
.crystal-star-01{
	position:absolute;
	top:20px;
	right:-60px;
}
.circle-01{
	position:absolute;
	top:-20px;
	left:-20px;
}
.intro-content-01{
	margin:30px 0;
	padding-left:100px;
	position:relative;
}
.little-stars{
	position:absolute;
	top:-10px;
	left:10px;
}
.intro-content-02{
}
.intro-card-grid{
	margin:auto;
	display:flex;
	justify-content:center;
	align-items:center;
	background:url(../images/intro-card.png) no-repeat;
	background-size:contain;
	background-position:center;
	max-width:200px;
	width:100%;
	height:200px;
	font-size:32px;
	font-weight:bold;	
}
.intro-content-02-02{
	margin-bottom:30px;
}
.section-grid-04{
	display:flex;
	align-items:center;
	position:relative;
	min-height:50vh;
	padding:0 3em;
	overflow:hidden;
}
.section-grid-04:before{
	content:'';
	position:absolute;
	top:20%;
	left:-15%;
	width:500px;
	height:500px;
	background:rgb(117 102 243 / 15%);
	filter: blur(15px);
    transform: rotate(45deg);
    border-radius: 50%;
}
.section-grid-04:after{
	content:'';
	position:absolute;
	top:0;
	right:-15%;
	width:500px;
	height:500px;
	background:rgb(117 102 243 / 15%);
	filter: blur(15px);
    transform: rotate(45deg);
    border-radius: 50%;
}
.section-grid-04-02{
	width:30%;
	position:relative;
}
.tubepay-cards{
	display:flex;
	align-items:center;
	justify-content:end;
}
.tubepay-cards img{
	max-width:100%;
}
.section-grid-04-03{
	width:70%;
	padding:10em;
	position:relative;
	z-index:1;
	font-family: 'Gilroy-Medium';
}
.section-grid-04-03-title{
	margin-bottom:30px;
	font-size:3em;
	font-weight:bold;
	position:relative;
}
.crystal-star-02{
	position:absolute;
	top:0;
	right:0;
}
.section-grid-05{
	padding:3em;
	font-family: 'Gilroy-Medium';
	position:relative;
	z-index:1;
}
.section-grid-05:before{
	content:'';
	position:absolute;
	left:50%;
	bottom:0;
	width:100%;
	height:100%;
	background:url(../images/glowing-circle-wave.png) no-repeat;
	background-size:cover;
	background-position:center;
	transform:translateX(-50%);
	z-index:-1;
}
.section-grid-05-title{
	font-size: 5em;
    font-weight: bold;
	max-width:650px;
	margin:auto;
    margin-bottom:30px;
    position: relative;
}
.section-grid-05-title:before{
	content:'';
	position:absolute;
	top:-20px;
	right:20%;
	width:100px;
	height:100px;
	background:url(../images/circle-02.png) no-repeat;
	background-size:cover;
}
.section-grid-05-content{
	max-width:650px;
	margin:0 auto 30px;
	text-align:center;
	position: relative;
}
.section-grid-05-content p{
	color:#fff;
}
.section-grid-05-desc{
	display:flex;
	gap:20px;
	max-width:1280px;
	margin:0 auto;
	position: relative;
}
.section-grid-05-desc-card{
	width:50%;
	border:2px solid #fff;
	border-radius:25px;
	padding:20px;
	background:linear-gradient(45deg, #b035ff8c , #141751d4 90%);
	font-family: 'Gilroy-Medium';
}
.section-grid-05-desc-card p{
	font-family: 'Gilroy-Medium';
	color:#fff;
}
.tubepay-icon{
	margin:20px auto;
	width:250px;
	text-align:center;
}
.tubepay-icon img{
	max-width:100%;
}
.crystal-star-03{
	position:absolute;
	left:0;
	top:10em;
}
.section-grid-06{
	padding:3em;
	background:#6804ff;
}
.section-grid-06-wrapper{
	max-width:1280px;
	margin:0 auto;	
}
.section-grid-06-logo{
	margin:30px 0;
}
@media (max-width:1148px){
	.section-grid-03{
		padding:3em 5em;
	}
}
@media (max-width:992px){
	body{
		font-size:14px;
	}
	.section-grid-03{
		padding:3em;
	}
	.intro-content-01{
		margin:15px 0;
	}
	.section-grid-04-03{
		padding:5em;
	}
	.tubepay-icon{
		width:100px;
	}
}
@media (max-width:720px){
	.human-hand-img{
		left:10%;
	}
}
@media (max-width:550px){
	.section-grid-01{
		flex-direction:column-reverse;
		overflow:hidden;
	}
	.section-grid-02{
		width:100%;
	}
	.section-grid-03{
		width:100%;
	}
	.section-grid-04{
		padding:3em;
		flex-direction:column-reverse;
	}
	.crystal-star-02{
		opacity:.65;
		max-width:100px;
	}
	.section-grid-04-02{
		width:60%;
	}
	.section-grid-04-03{
		padding:0;
		padding-bottom:3em;
		width:100%;
	}	
	.crystal-star-03{
		max-width:65px;
		opacity:.35;
	}
	.section-grid-05{
		overflow:hidden;
	}
	.section-grid-05-desc{
		flex-direction:column;
	}
	.section-grid-05-desc-card{
		width:100%;
	}
	
}