:root{
	--font-theme-01:"Proxima-Nova-Font";
	--font-theme-02:"Montserrat-Regular";
}

@font-face {
	font-family: "Proxima-Nova-Font";
	src: url("../fonts/Proxima-Nova-Font.otf");
	font-weight: normal;
	font-style: normal; 
}
@font-face {
	font-family: "Montserrat-Regular";
	src: url("../fonts/Montserrat/Montserrat-Regular.ttf");
	font-weight: normal;
	font-style: normal; 
}
@font-face {
	font-family: "Gilroy-Medium";
	src: url("../fonts/Gilroy/Gilroy-Medium.ttf");
	font-weight: normal;
	font-style: normal; 
}
@font-face {
	font-family: "Gilroy-Bold";
	src: url("../fonts/Gilroy/Gilroy-Bold.ttf");
	font-weight: normal;
	font-style: normal; 
}
/*** font css ***/
.font-theme-01{
	font-family: var(--font-theme-01);
}

body{
	background:#000;	
}
.container-max{
	max-width:1280px;
}
.header-section{
	background:none;
}
.header-section.header-fixed{
	background-color:rgba(0, 0, 0, 0.7);
	border-bottom:none;
}
.header-wrapper{
	padding:10px 20px;
	border-bottom: 1px solid #ededed40;	
	transition:all ease .3s;
	row-gap:10px;
}
.header-section.header-fixed .header-wrapper{
	border-bottom: 1px solid transparent;
	padding:10px 10px;
}
.menu li a{
	transition:all ease .6s;
	border:1px solid rgba(255,255,255,0);
	border-radius:10px;
	transition:all ease .3s;
	position:relative;
	overflow:hidden;
	display:block;
	font-size: 14px;
	font-weight:300;
}
.menu li a:hover{
	opacity:.65;
	color:#2feb5e;
}
.menu-item-has-children > a::before{
	content:'\ea4a';
	font-family: 'boxicons';
	position:absolute;
	top:50%;
	right:0;
	transform: translateY(-50%);
	background-color: transparent; 
	width:16px;
	height:16px;
	display:flex;
	justify-content:center;
	align-items:center;	
}
.menu-item-has-children > a::after{
	display:none !important;
}
.menu-item-has-children > a:hover::before{
	transform: translateY(-50%) rotate(180deg);
	opacity:1 !important;
}
/*.menu li a:before{
	content:'';
	position:absolute;
	top:0;
	left:-20px;
	width:0%;
	height:100%;
	background:rgb(152 160 255 / 35%);
	transform:skewX(-25deg);
	transition:all ease .3s;
}
.menu li a:hover:before{
	width:120%;
}
.menu li a:after{
	content:'';
	position:absolute;
	top:0;
	left:-20px;
	width:0%;
	height:100%;
	background:rgb(113 66 227 / 35%);
	transform:skewX(-25deg);
	transition:all ease .3s;
	z-index:-1;
}
.menu li a:hover:after{
	width:120%;
	left:auto;
	right:-20px;
}*/
.header-section.header-fixed .menu li a{
	/*border:1px solid #634da7;
	border-radius:10px;*/
	transition:all ease .3s;
}
.header-section.header-fixed .menu li a:hover{
	
}
.menu-area{
	width:100%;
}
.brand-middle-logo{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
}
.logo img{
	max-width:125px;
}
.mobile-logo{
	max-width:125px;
}
.download-app-now{
	width:auto;
	height:auto;
	padding:8pt 15pt;
	color:#17092c;
	font-size:14px;
	font-weight:500;
	text-transform:uppercase;
	background:#fff;
	border-radius:35px;
	transition:all ease .3s;
}
.download-app-now:hover{
	color:#999;
}
.select-lang-href{
	display:flex;
	align-items:center;
	gap:5px;
}
.select-lang-href a{
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	border:1px solid #fff;
	width:32px;
	height:32px;
	font-size:14px;
	font-weight:bold;
}
.select-lang-href a.active{
	background:#fff;
	color:#17092c;
}
@media (min-width: 768px) {
	.download-app-now{
		color:#fff;
		padding:10px 15pt;
		color:#17092c;
		font-weight:500;
		text-transform:uppercase;
	}
    .download-app-now span{
        display: inherit;
    }
	.download-app-now img{
		display:none;
	}
}
@media (max-width:991px){
	.header-section.header-fixed .menu li a{
		border:none;
	}
	.menu li a:last-child{
		border-bottom:1px solid rgba(255,255,255,.1);
	}
	.menu-area {
		width:auto;
	}
	.select-lang-href{
		padding:10px 25px 15px;
		width:100%;
	}
	.select-lang-href a{
		width:25px;
		height:25px;
		font-size:8pt;
	}
}
@media(max-width:1088px){
	/*.download-app-now{
		background:none;
		padding:10px;
	}
	.download-app-now span{
        display: none;
    }
	.download-app-now img{
		display:block;
	}*/
}

.grid-01{
	background:url(../images/bg-grid-01.png) no-repeat;
	background-size:cover;
	min-height:80vh;
	margin-top:-86px;
	padding-top:100px;
	/*padding-bottom:100px;*/
	overflow:hidden;
	position:relative;
}
.grid-01-container{
	width:100%;
	display:flex;
}
.grid-01-left{
	width:20%;
}
.grid-01-middle{
	width:60%;
	position:relative;
	overflow:hidden;
}
.grid-01-right{
	width:20%;
}
.page-down-list{
	margin:20px 0 35px;
}
.page-down-list ul{
	margin:0;
	padding:0;
}
.page-down-list li{
	display:block;
	list-style:none;
}
.page-down-list li a{
	display:block;
	padding:10px;
	padding-left:20px;
	color:#fff;
	font-size:12px;
	font-weight:300;
	text-decoration:none;
	transition:all ease .3s;
	position:relative;
	font-family:var(--font-theme-01);
}
.page-down-list li a:before{
	content:'';
	position:absolute;
	left:10px;
	top:12px;
	width:2px;
	height:12px;
	background:#fff;
	transform:rotate(135deg);
	transition:all ease .3s;
}
.page-down-list li a:hover:before{
	transform:rotate(0deg);
	width:8px;
	height:8px;
	top:15px;
	background:rgba(255,255,255,.5);
}
.page-down-list li a:hover{
	font-weight:bold;
	color:rgba(255,255,255,.5);
	padding-left:30px;
}
.box-two{	
	margin-bottom:50pt;
	border:2px solid #fff;
	border-radius:25px;	
	position:relative;
}
.cube-element-3{
	position:absolute;
	bottom:-52px;
	left:-25px;
	max-width:85px;
	z-index:1;
	animation-name:cube-element-3-floating;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transition:all ease .3s;
}
@keyframes cube-element-3-floating {
	0%   {bottom:-52px;}
	25%  {bottom:-49px;opacity:.35;filter:blur(1px);}
	50%  {bottom:-52px;}
	75%  {bottom:-49px;opacity:.35;filter:blur(1px);}
	100% {bottom:-52px;}
}
.box-two-content-body{
	min-height:360px;
	padding:20pt;
	position:relative;
	transition:all ease .3s;
}
.box-two-content-body:before{
	content:'';
	position:absolute;
	right:15px;
	bottom:10%;
	width:20px;
	height:50%;
	background:url(../images/line.png) no-repeat;
	background-size:contain;
	background-position:bottom;
	transition:all ease .3s;
}
.page{
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	display: none;
}

.active{
	display: block;
	opacity: 1;
}
.box-number{
	font-weight:bold;
	font-size:22pt;
	font-family: "Rajdhani", sans-serif;
	color:#fff;
	position:relative;
	display:inline-block;
	padding-right:15px;
}
.box-number:before{
	content:'';
	position:absolute;
	bottom:50%;
	right:0;
	width:5px;
	height:15px;
	background:#fff;
	transform:skewX(45deg) translateY(50%);
}
.box-two-02{
	display:flex;
	align-items:center;
	justify-content:space-between;
	color:#fff;
	margin:10px 0;
}
.box-two-02-02{
	font-size:20pt;
	font-weight:bold;
}
.platform-icon-img{
	max-width:36px;
}
.box-two-content{
	padding:0 30pt 0 0;
	margin-bottom:30pt;
	font-size:14px;
	color:#fff;
	text-align:-webkit-left;
	background:transparent;
	border-radius:25px;
}
.box-two-content p{
	font-family:var(--font-theme-02);
	font-size:9pt;
	line-height:22px;
}
.btn-more{
	display:inline-block;
	transition:all ease .3s;
}
.btn-more img{
	max-width:100px;
	transition:all ease .3s;
}
.btn-more:hover img{
	opacity:.35;
}
.box-two-content-body#page2{
	min-height:360px;
	padding:20pt;
	position:relative;
	transition:all ease .3s;
	background:#fff;
	border-radius:25px;
}
.box-two-content-body#page2:before{
	background:url(../images/line-2.png) no-repeat;
}
.box-two-content-body#page2 .box-number{
	color:#000;
}
.box-two-content-body#page2 .box-number:before{
	background:#000;
}
.box-two-content-body#page2 .box-two-content p{
	color:#000;
}
/*** mobile view box two ***/
.box-two-content-body#page2-m{
	min-height:360px;
	padding:20pt;
	position:relative;
	transition:all ease .3s;
	background:#fff;
	border-radius:25px;
}
.box-two-content-body#page2-m:before{
	background:url(../images/line-2.png) no-repeat;
}
.box-two-content-body#page2-m .box-number{
	color:#000;
}
.box-two-content-body#page2-m .box-number:before{
	background:#000;
}
.box-two-content-body#page2-m .box-two-content p{
	color:#000;
}

.box-three{
	min-height:120px;
	padding:20pt;
	margin-bottom:30pt;
	position:relative;	
	overflow:hidden;
	border-radius:15px;
	background:rgba(100,100,100,.35);
	z-index:1;
}
.box-three-02{
	display:flex;
	align-items:center;
	justify-content:space-between;
	color:#fff;
	margin:10px 0;
}
.box-three-content{
	padding:0 30pt 0 0;
	margin-bottom:10pt;
	font-size:14px;
	color:#fff;
	text-align:-webkit-left;
}
.box-three-content p{
	font-family: var(--font-theme-02);
    font-size: 9pt;
    line-height: 22px;
}
.bracket-video{
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	width: 100%;
    height: 100%;
    object-fit: cover;
}
.grid-middle-video{
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	max-width:100%;
	width: 100%;
    height:120%;
    object-fit: cover;
}
.grid-01-middle-body{
	padding:50pt;
}
.grid-middle-intro{
	min-height:400px;
	position:relative;
	z-index:1;
	margin-bottom:100pt;
}
.intro-slogan{
	display:flex;
	align-items:center;
	gap:30px;
	margin-bottom:35pt;
	text-transform:uppercase;
	font-family:var(--font-theme-02);
	color:#fff;
	letter-spacing:1px;
}
.star-icon-img{
	max-width:52px;
}
.middle-intro-title h4{
	font-weight:300;
	font-size:40pt;
	font-family:var(--font-theme-02);
}
.middle-intro-title h3{
	font-size:50pt;
	font-family: "Proxima-Nova-Font";
}
.linking-you{
	margin:30pt 0;
	display:inline-block;
	color:#fff;
	font-family: "Proxima-Nova-Font";
	font-size:15pt;
	border:1px solid #fff;
	border-radius:30px;
	padding:15px 30px;
}
.cube-element-2 img{
	max-width:60px;
	animation-name:cube-element-2-floating;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transition:all ease .3s;
}
@keyframes cube-element-2-floating{
	0%{transform:rotate(0deg);margin-bottom:0;}
	50%{transform:rotate(25deg);margin-bottom:10px;}
	100%{transform:rotate(0deg);margin-bottom:0;}
}
.grid-middle-text{
	position:relative;
	z-index:1;
}
.grid-middle-text p{
	font-family:var(--font-theme-02);
}
.grid-middle-text h4{
	font-family:var(--font-theme-02);
	font-weight:300;
}
.box-one{
	min-height: 120px;
    padding: 20pt;
	margin-bottom:30pt;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background: rgba(100, 100, 100, .35);
    z-index: 1;
}
.cube-element-1{
	position: absolute;
    top:20px;
    right:20px;
    max-width: 85px;
	animation-name:cube-element-1-floating;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transition:all ease .3s;
}
@keyframes cube-element-1-floating{
	0%{transform:rotate(0deg);top:20px}
	50%{transform:rotate(25deg);top:10px}
	100%{transform:rotate(0deg);top:20px}
}
.box-one-content{
	padding: 0 30pt 0 0;
    margin-bottom: 30pt;
    font-size: 14px;
    color: #fff;
    text-align: -webkit-left;
}
.box-one-content p{
	font-family: var(--font-theme-02);
    font-size: 9pt;
    line-height: 22px;
}
.box-one-content h3{
	font-family: "Proxima-Nova-Font";
	font-weight:300;
}
.box-four{
	margin-bottom:30pt;
    border: 2px solid #fff;
    border-radius: 25px;
    position: relative;
}
.box-four-content-body{
	min-height: 360px;
    padding: 20pt;
    position: relative;
}
.box-four-02 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    margin: 10px 0;
}
.box-four-02-02{
	font-size:36px;
}
.box-four-content{
	padding: 0 ;
    margin-bottom: 10pt;
    font-size: 14px;
    color: #fff;
    text-align: -webkit-left;
}
.box-four-content p{
	font-family: var(--font-theme-02);
    font-size: 9pt;
    line-height: 22px;
}
.mobile-view-grid{
	display:none;
}
@media(max-width:1360px){
	.grid-middle-video{
		max-width:100%;
	}
}
@media (max-width:991px){
	.grid-middle-video{
		opacity:.35;
	}
	.grid-01-container{
		flex-wrap: wrap;
	}
	.grid-01-middle{
		width:100%;
	}
	.grid-01-left, .grid-01-right{
		display:none;
	}
	.grid-middle-intro{
		margin-bottom:50pt;
	}
	.mobile-view-grid{
		display:block;
	}
	.page-down-list li a{
		font-size:12pt;
	}
	.grid-01-middle-body{
		padding:5px;
	}
	.cube-element-2 img{
		transition: none;
		animation: none;
	}
	.hyperx-token{
		margin:30pt 0;
		order:1;
		max-width:300px;
	}
	.mwg-03{
		order:2;
	}
	.mwg-04{
		order:3;
	}
}
@media (max-width:550px){
	.linking-you{
		font-size:16px;
		padding:15px;
		width: 100%;
        text-align: center;
	}
}
/*** grid 02 ***/
.grid-02{
	padding:50pt 0 100pt;
	min-height:60vh;
	background:linear-gradient(0deg,#100e1e, #9377f2, #241c59, #fbfcfd, #4e338f 65%, #050314);
	position:relative;
}
.img-crystal-glass-01{
	position:absolute;
	top:30pt;
	left:0;
	max-width:200px;
	animation-name:crystal-01-floating;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transition:all ease .3s
}
.img-crystal-glass-02{
	position:absolute;
	bottom:30pt;
	right:0;
	max-width:200px;
	animation-name:crystal-02-floating;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transition:all ease .3s;
}
@keyframes crystal-01-floating{
	0%{top:30px}
	50%{top:20px}
	100%{top:30px}
}
@keyframes crystal-02-floating{
	0%{bottom:30px}
	50%{bottom:20px}
	100%{bottom:30px}
}
.grid-02-header{
	text-align:center;
	margin-bottom:30pt;
}
.grid-02-headline{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 auto 35pt;
	gap:15px;
}
.grid-02-headline h3{
	margin-bottom:0;
	font-weight:bold;
	font-size:3em;
	letter-spacing:2px;
	color:#fff;
	font-family: var(--font-theme-01);
}
.icon-antenna{
	max-width:100px;
}
.grid-02-headline-02{
	border:2px solid #fff;
	border-radius:50px;
	padding:15px;
	color:#fff;
	font-size:20pt;
	font-family:var(--font-theme-01);
	max-width:520px;
	margin:0 auto 60pt;
}
.evolution-card{
	padding:15px;
	border:2px solid #fff;
	border-radius:15px;
	background:linear-gradient(0deg, #42318b, #8c7cd3);
	min-height:200px;
}
.evolution-card-img{
	max-width:165px;
	margin:15pt auto;
}
.evolution-card-img img{
	max-width:100%;
}
.evolution-card p{
	font-family:var(--font-theme-02);
	font-size:10pt;
	letter-spacing:1px;
	color:#fff;
	text-align:center;
}
.evolution-card-title{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:15px;	
	margin-bottom:15px;
}
.evolution-card-title h3{
	font-size:36px;
	font-family:var(--font-theme-01);
	text-align:center;
	letter-spacing:2.4px;
	margin-bottom:0;
	text-shadow:0 0 5px rgba(0,0,0,.35);
}
.year-range{
	padding:5px 20pt;
	border:1px soldi #fff;
	border-radius:15px;
	color:#fff;
	text-align:center;
	font-family:var(--font-theme-01);
	letter-spacing:2px;
	background:#312e3d;
}
.border-line {
	border: 3px solid transparent;
    border-radius:10px;
    background:linear-gradient(to right, #312e3d, #312e3d), linear-gradient(90deg, #f9b6e6, #bf3cff);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}
@media (max-width:992px){
	.grid-02-headline h3{
		font-size:3em;
	}
	.icon-antenna{
		max-width:65px;
	}
	.img-crystal-glass-01{
		max-width:65px;
	}
}
@media (max-width:768px){
	.icon-antenna{
		max-width:60px;
	}
	.grid-02-headline h3{
		font-size:2em;
	}
	.grid-02-headline-02{
		font-size:10pt;
		max-width:360px;
	}
}

/*** grid 03 ***/
.img-crystal-glass-03{
	position:absolute;
	bottom:30pt;
	left:0;
	max-width:200px;
	animation-name: crystal-03-floating;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transition:all ease .3s;
}
@keyframes crystal-03-floating{
	0%{bottom:30px}
	50%{bottom:20px}
	100%{bottom:30px}
}
.grid-03{
	padding:50pt 0 100pt;
	min-height:80vh;
	background:#100e1e;
	position:relative;
}
.grid-03:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../images/texture-bg.png) no-repeat;
	background-size:100%;
	background-position:center top;
}
.grid-03-header{
	text-align:center;
	margin-bottom:30pt;
	position:relative;
	display:flex;
	justify-content:center;
}
.grid-03-headline-02{
	border:2px solid #fff;
	border-radius:50px;
	padding:10px 35px;
	color:#fff;
	font-size:20pt;
	font-family:var(--font-theme-01);
	margin:0 auto 60pt;	
}
.tech-innov-card{
	margin-bottom:15pt;
	border-radius:25px;
	position:relative;
	border:1px solid #fff;
	padding:20pt;
	transition:all ease .3s;
	position:relative;
	overflow:hidden;
}
.tech-innov-card-01:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../images/tech-innov-card-01-bg.png) no-repeat;
	background-size:cover;
	background-position:center;
	transition:all ease .3s;
}
.tech-innov-card-02:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../images/tech-innov-card-02-bg.png) no-repeat;
	background-size:cover;
	background-position:center;
	transition:all ease .3s;
}
.tech-innov-card-03:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../images/tech-innov-card-03-bg.png) no-repeat;
	background-size:cover;
	background-position:center;
	transition:all ease .3s;
}
.tech-innov-card h3{
	font-family:var(--font-theme-01);
	font-weight:bold;
	letter-spacing:2px;
	text-shadow:0 0 5px rgba(0,0,0,.65);
	margin-bottom:15pt;
	position:relative;
}
.tech-innov-card p{
	color:#fff;
	font-family:var(--font-theme-02);
	position:relative;
}
.icon-signal-img{
	display:block;
	max-width:165px;
	margin:15pt auto;
	position:relative;
}
.tech-innov-card-numbering{
	margin-bottom:20pt;
	width:45px;
	height:45px;
	border-radius:50%;
	background:#000;
	color:#fff;
	font-size:20pt;
	font-family:var(--font-theme-01);
	font-weight:bold;
	display:flex;
	justify-content:center;
	align-items:center;
	box-shadow:0 0 10px rgba(255,255,255,.35);
	position:relative;
	transition:all ease .3s;
}
.tech-innov-card-02 h3{
	text-align:right;
}
.tech-innov-card-02 p{
	text-align:right;
}
.tech-innov-card:hover .tech-innov-card-numbering{
	background:#fff;
	color:#000;
	box-shadow:0 0 20px rgba(255,255,255,.35);
}
.tech-innov-card-01:hover:before, .tech-innov-card-02:hover:before, .tech-innov-card-03:hover:before{
	width:110%;
	left:-20px;
	opacity:.5;
	filter:blur(3px);
}
/*** grid 04 ***/
.grid-04{
	padding:50pt 0 100pt;
	background:#100e1e;
	position:relative;
	overflow:hidden;
}
.grid-04:before{
	content:'';
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:50%;
	background:linear-gradient(0deg, #9377f2, #100e1e);
}
.grid-04-header{
	max-width:650px;
	text-align:center;
	margin:0 auto;
	margin-bottom:30pt;
	position:relative;
	display:flex;
	justify-content:center;
}
.grid-04-headline-02{
	border:2px solid #fff;
	border-radius:50px;
	padding:10px 35px;
	color:#fff;
	font-size:20pt;
	font-family:var(--font-theme-01);
	margin:0 auto 60pt;		
}
.grid-04-body{
	position:relative;
	padding-bottom:50pt;
}
.phone-img{
	text-align:center;	
}
.phone-img img{
	max-width:450px;
}

.grid-04-content-01{
	max-width:350px;
	position:absolute;
	top:30px;
	right:0;
}
.grid-04-content-01 h4{
	font-family:var(--font-theme-01);
	font-size:20pt;
	letter-spacing:2px;
	color:#fff;
}
.grid-04-content-01 p{
	font-family:var(--font-theme-02);
	font-size:12px;
	letter-spacing:1px;
	color:#fff;
}
.arrow-left-img, .arrow-right-img{
	max-width:40px;
	margin-bottom:15pt;
	transition:all ease .3s;
}
.grid-04-content-02{
	max-width:350px;
	position:absolute;
	top:100px;
	left:0;
	text-align:right;
}
.grid-04-content-02 h4{
	font-family:var(--font-theme-01);
	font-size:20pt;
	letter-spacing:2px;
	color:#fff;
}
.grid-04-content-02 p{
	font-family:var(--font-theme-02);
	font-size:12px;
	letter-spacing:1px;
	color:#fff;
}
.grid-04-content-03{
	max-width:350px;
	position:absolute;
	top:350px;
	right:35px;
}
.grid-04-content-03 h4{
	font-family:var(--font-theme-01);
	font-size:20pt;
	letter-spacing:2px;
	color:#fff;
}
.grid-04-content-03 p{
	font-family:var(--font-theme-02);
	font-size:12px;
	letter-spacing:1px;
	color:#fff;
}
.grid-04-content-04{
	max-width:350px;
	position:absolute;
	top:450px;
	left:50px;
	text-align:right;
}
.grid-04-content-04 h4{
	font-family:var(--font-theme-01);
	font-size:20pt;
	letter-spacing:2px;
	color:#fff;
}
.grid-04-content-04 p{
	font-family:var(--font-theme-02);
	font-size:12px;
	letter-spacing:1px;
	color:#fff;
}
@media (max-width:992px){
	.phone-img img{
		max-width:360px;
	}
	.grid-04-content-wrapper{
		display:flex;
		flex-wrap:wrap;
	}
}
@media (max-width:900px){
	.grid-04-content-01, .grid-04-content-02, .grid-04-content-03, .grid-04-content-04{
		position:relative;
		padding:15pt;
		max-width:50%;
		top:0;
		left:0;
	}
	.grid-04-content-01 .arrow-left-img, .grid-04-content-03 .arrow-left-img{
		transform:rotate(180deg);
	}
}
@media (max-width:550px){
	.grid-04-content-01, .grid-04-content-02, .grid-04-content-03, .grid-04-content-04{
		max-width:100%;
		text-align:left;
	}
}
/*** footer ***/
.footer{
	background:linear-gradient(180deg, #9377f2, #c3bbf1, #fff);
}
.footer-desc{
	margin-bottom:30pt;
	max-width:320px;
	font-family:var(--font-theme-02);
	font-size:8pt;
	font-weight:600;
	letter-spacing:1.2px;
	color:#11101f;
}
.copyright-by{
	font-family: "Gilroy-Medium";
	font-size:10pt;
	color:#0f0e1b;
}
.all-right-reserve{
	font-family: "Gilroy-Bold";
	font-size:10pt;
	color:#0f0e1b;	
}
.scrollToTop{
	background:#12FF76;
	color:#0b5c20;
}

/*** new css ***/
.section-01{
	background-size:cover;
	min-height:100vh;
	margin-top:-86px;
	padding-top:100px;
	overflow:hidden;
	position:relative;	
	display: flex;
    flex-flow: column;
    gap: 0px;
    height: min-content;
    overflow: visible;
}
.main-text-header{
	display:flex;
	flex-direction:column;
	gap:10px;
	justify-content:start;
	align-items:center;
	position:relative;
	padding-top:60px;
}
.main-welcome-grid{
	display:flex;
	flex-direction:column;
	gap:10px;
	justify-content:start;
	align-items:center;
	min-height:60vh;
	position:relative;
	padding-top:60px;
	padding-bottom:100px;
}
.mwg-01{
	display:block;
	max-width:450px;
	padding:0 15px;
	width:100%;
	font-size:16pt;
	color:#fff;	
	text-align:center;
	margin-bottom:15px;
}
.mwg-02{
	font-size:24pt;
	font-weight:bold;
	text-align:center;
	letter-spacing:1.2px;
	color:#fff;
	margin-bottom:15pt;
	padding:15px;
}
.start-now-app{
	padding:10pt 15pt;
	border-radius:35px;
	color:#000;
	background:#2FEB5E;
	transition:all ease .3s;
	display:flex;
	align-items:center;
	gap:5px;
}
.start-now-app:hover{
	opacity:.65;
	color:#000;
}
.icon-arrow-slide{
	width:16px;
}
.spinning-logo-wrapper{
	max-width:50%;
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	margin:0 auto;
}
.hyperx-token{
	width:520px;
	display:inline-block;
	margin:100pt auto;
	height: min-content;
    overflow: visible;
    padding: 0px;
    position: sticky;
    top:50pt;
	left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.coin-wrapper {
	perspective: 800px;
}

.coin-image {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform .1s ease-out;
}
.mwg-03{
	text-align:start;
	max-width:40%;
	margin-right:100px;
}
.mwg-04{
	text-align:end;
	max-width:40%;
	margin-left:100px;
}
.section-02{
	padding:100pt 0;
	min-height:80vh;
	position:relative;
	background:url(../images/blackhole-bg.jpg) no-repeat;
	background-position:center;
	background-color:#000;
	background-size:cover;
	overflow:hidden;
}
.blackhole-bg{
	position:absolute;
	left:50%;
	top:0;
	transform:translateX(-50%);
	width:100%;
	max-width:65%;
}
.section-toplabel{
	padding:10px 15pt;
	background:rgba(0,0,0,.35);
	border-radius:20px;
	border:1px solid #222;
	display:inline-block;
	margin-bottom:15pt;
	color:#aaa;
}
.section-wrapper{
	position:relative;
	text-align:center;
}
.section-heading{
	font-size:2em;
	font-weight:bold;
	margin-bottom:30pt;
}
.multichain-protocol-grid{
	margin:30pt 0;
	position:relative;
}
.mcp-middle-div{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.mcp-top-div{
	position:absolute;
	top:44%;
	left:50%;
	transform:translate(-45%,-50%);
	width:25%;
}
.section-02-grid ul{
	margin:0;
	padding:0;
	display:flex;
	justify-content:space-between;
	gap:10px;
}
.section-02-grid li{
	width:30%;
	min-height:300px;
	border:1px solid #222;
	border-radius:15px;
	/*background:linear-gradient(90deg, #000, #2b8750, #000);*/	
	background:#000;
	padding:15pt;
	position:relative;
	overflow:hidden;
}
.section-02-grid li:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	/*background:linear-gradient(45deg, #2b8750, #1b743f 50%, #000);*/
	background:conic-gradient(from 0deg at 50% 50%, rgba(0, 11, 20, 0) 132.542deg, rgb(0, 252, 76) 178.714deg, rgba(0, 11, 20, 0) 228.015deg);
	animation-name: rotate-bg;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	transition:all ease .3s;
	animation-timing-function: linear;
}
@keyframes rotate-bg {
	0%{transform:rotate(0deg) scale(2);opacity:.35;}
	100%{transform:rotate(360deg) scale(2);opacity:.15;}
}
.ecosystem-logo{
	width:125px;
	height:125px;
	padding:10pt;
	border-radius:50%;
	border:1px solid #2FEB5E;
	display:block;
	margin:10pt auto;
	position:relative;
}
.ecosystem-title{
	font-size:20pt;
	font-weight:bold;
	color:#2FEB5E;
	text-transform:uppercase;
	position:relative;
}
.ecosystem-content{
	position:relative;
}
.section-03{
	padding:100pt 0;
	min-height:80vh;
	position:relative;	
}
.dualflow-grid{
	display:flex;
	align-items:center;
	gap:25pt;
	margin:30pt 0;
	margin-top:60pt;
	position:relative;
}
.db-content{
	width:80%;
	text-align:start;
}
.dualflow-one{
	width:50%;
	display:flex;
	align-items:center;
	justify-content: space-around;
	position:relative;
}
.dualflow-one-block02{
	position:relative;
}
.dualflow-one-block02:before{
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:250px;
	height:250px;
	border-radius:50%;
	background:linear-gradient(90deg,#2b8750, #000 60%);
	animation-name: rotate-round-bg01;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	transition:all ease .3s;
	animation-timing-function: linear;
}
@keyframes rotate-round-bg01 {
	0%{transform:translate(-50%,-50%) rotate(0deg);}
	100%{transform:translate(-50%,-50%) rotate(360deg);}
}
.dualflow-one-block02-inner{
	position:relative;
	width:165px;
	height:165px;
	border-radius:50%;
	padding:10px;
	background:rgba(0,0,0,.65);
	border:1px solid #2FEB5E;
	font-size:14px;
	display: flex;
    flex-direction: column;
    justify-content: center;
}
.dg-img{
	display:block;
	margin:10px auto;
	max-width:36px;
}
.dg-1, .dg-2, .dg-3{
	display:flex;
	align-items:center;
	justify-content:end;
	gap:10px;
	margin-bottom:15pt;
}
.dg-1 .db-content, .dg-2 .db-content, .dg-3 .db-content{
	text-align:end;
}
.dualflow-one-block01{
	position:relative;
	width:60%;
}
.icon-dg{
	width:36px;
	height:36px;
	border-radius:50%;
	background:rgba(50,50,50,.65);
	display:flex;
	align-items:center;
	justify-content:center;
}
.icon-dg img{
	max-width:25px;
}
.dualflow-two{
	width:50%;
	display:flex;
	align-items:center;
	justify-content: space-around;
	flex-direction: row-reverse;
	position:relative;
}
.dualflow-two-block02{
	position:relative;
}
.dualflow-two-block02:before{
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:250px;
	height:250px;
	border-radius:50%;
	background:linear-gradient(90deg, #000 60%, #2b8750);
	animation-name: rotate-round-bg;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	transition:all ease .3s;
	animation-timing-function: linear;
}
@keyframes rotate-round-bg {
	0%{transform:translate(-50%,-50%) rotate(0deg);}
	100%{transform:translate(-50%,-50%) rotate(360deg);}
}
.dualflow-two-block02-inner{
	position:relative;
	width:165px;
	height:165px;
	border-radius:50%;
	padding:10px;
	background:rgba(0,0,0,.65);
	border:1px solid #2FEB5E;
	font-size:80%;
}
.dg-4, .dg-5, .dg-6{
	display:flex;
	align-items:center;
	justify-content:start;
	gap:10px;
	margin-bottom:15pt;
	flex-direction: row-reverse;
}
.dg-img-arrow{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:100%;
	max-width:36px;
	z-index:1;
	transition:all ease .3s;
}
.section-03{
	padding: 100pt 0;
    min-height: 60vh;
    position: relative;
}
.core-map-grid ul{
	margin:0;
	padding:0;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:5px;
}
.core-map-grid li{
	width:22.22%;
	list-style:none;
	display:block;
	border:1px solid #12FF76;
	border-radius:25px;
	padding:10pt;
	background:linear-gradient(42deg, #000 40%, #2b8750);
}
.core-map-card{
	width:100%;
}
.cmc-top{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.cmc-top-number{
	font-size:32pt;
	font-weight:#fff;
}
.cmc-top-icon{
	width:60px;
}
.cmc-top-icon img{
	width:100%;
	max-width:100%;
	-webkit-filter: drop-shadow(5px 15px 25px #12FF76);
	filter: drop-shadow(5px 15px 25px #12FF76);
}
.cmc-content{
	width:100%;
	display:block;
	text-align:start;
	margin-top:15px;
}
.cmc-content h4{
	font-size:20px;
	color:#12FF76;
	margin-bottom:0;
}
.cmc-des{
	font-size:18px;
	font-weight:bold;
	color:#fff;
}
.section-04{
	padding:60pt 0;
	min-height:60vh;
	position:relative;	
}
.token-utility-grid{
	display:flex;
	align-items:center;
	gap:5px;
}
.tug-01{
	width:50%;
	height: fit-content;
	display:flex;
	justify-content:space-between;
	position:relative;
}
.tug-01-grid{
	display:flex;
	flex-direction:column;
	justify-content:space-evenly;
	width:50%;
}
.tug-card{
	display:flex;
	gap:15px;
	text-align:start;
	position:relative;
}
.tug-card:before{
	content:'';
	position:absolute;
	top:50%;
	left:-30px;
	transform:translateY(-50%);
	width:16px;
	height:16px;
	border-radius:50%;
	background:#12FF76;
}
.tug-card:after{
	content:'';
	position:absolute;
	top:50%;
	left:-90px;
	transform:translateY(-50%);
	width:60px;
	height:2px;
	background:linear-gradient(90deg, transparent, #fff);
}
.tugc01{
	margin-left:-30px;
}
.tugc02{
	padding-left:30px;
}
.tugc04{
	margin-left:-30px;
}
.tug-card h4{
	font-size:18px;
	font-weight:300;
	margin-bottom:0;
}
.tug-card h3{
	font-size:24px;
}
.tug-card-icon{
	width:22px;
	height:22px;
}
.tug-card-icon img{
	width:100%;
	max-width:100%;
}
.tug-02{
	width:50%;
}
.tug-logo{
	display:block;
	margin:20pt auto;
}
.color-theme{
	color:#12FF76;
}	
.half-face-token{
	max-height:520px;
	width:50%;
}
.tug-label{
	padding:10pt 20pt;
	border:1px solid #12FF76;
	border-radius:15px;
	color:#12FF76;
}
.coverage-block-grid{
	display:flex;
	align-items:center;
	gap:10px;
}
.cbg-left{
	width:50%;
}
.cbgc-01{
	width:100%;
	min-height:330px;
	border-radius:35px;
	background:rgba(255,255,255,.35);
	overflow:hidden;
	position:relative;
}
.cbgc-bottom{
	position:absolute;
	left:25pt;
	bottom:25pt;
	font-size:20px;
	font-weight:bold;
	color:#fff;
}
.cbgc-bottom-icon{
	width:52px;
	height:52px;
	border-radius:50%;
}
.cbg-right{
	width:50%;
}
.cbg-right ul{
	margin:0;
	padding:0;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:5px;
	row-gap:10px;
}
.cbg-right li{
	width:48%;
	min-height:220px;
	border-radius:15px;
	position:relative;
	border:1px solid #222;
}
.cbgc-02{
	background:url(../images/cbgc-02.jpg) no-repeat;
	background-size:cover;
	background-position:center;
}
.cbgc-03{
	background:url(../images/cbgc-03.jpg) no-repeat;
	background-size:cover;
	background-position:center;
}
.cbgc-04{
	background:url(../images/cbgc-04.jpg) no-repeat;
	background-size:cover;
	background-position:center;
}
.cbgc-05{
	background:url(../images/cbgc-05.jpg) no-repeat;
	background-size:cover;
	background-position:center;
}
.section-05{
	padding: 100pt 0;
    min-height: 60vh;
    position: relative;
}
.exploreus-grid ul{
	margin:0;
	padding:0;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:5px;
	row-gap:10px;
}
.exploreus-grid li{
	width:20%;
	border:1px solid #444;
	border-radius:10px;
	text-align:center;
}
.exploreus-grid li a{
	display:block;
	padding:15pt 10pt;
	transition:all ease .3s;
	overflow:hidden;
	border-radius:10px;
	background:transparent;
	position:relative;
}
.exploreus-grid li a:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:linear-gradient(42deg, #00000000 40%, #2b875000);
	transition:all ease .3s;
}
.exploreus-grid li a:hover:before{
	background:linear-gradient(42deg, #000 40%, #2b8750);
}
.exploreus-grid li a img{
	max-width:100px;
	position:relative;
}
.section-06{
	padding:100pt 0;
	min-height:60vh;
	position:relative;	
}
.light-up-grid{
	padding:30pt;
	width:100%;
	min-height:500px;
	background:#65FF86;
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content:center;
	gap:15pt;
	transition:all ease .3s;
	box-shadow:0px 35px 50px #65FF86;
	position:relative;
}
.light-up-grid:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#65FF86;
	filter:blur(30px);
	transition:all ease .3s;
}
.light-up-grid:hover:before{
	filter:blur(100px);
}
.light-up-grid h4{
	color:#000;
	font-size:26pt;
	position:relative;
}
.light-up-grid p{
	color:#000;
	position:relative;
}
.section-footer{
	padding:20pt 0;
	border-top:1px solid #222;
}
.footer-icon{
	display:inline-block;
	margin:0 10px;
	max-width:22px;
	transition:all ease .3s;
}
.footer-icon:hover{
	opacity:.5;
}
@media(max-width:1280px){
	.dualflow-one-block02:before, .dualflow-two-block02:before{
		width:220px;
		height:220px;
	}
}
@media(max-width:991px){
	.mwg-03{
		text-align:center;
		max-width:none;
	}
	.mwg-04{
		margin-top:300pt;
		text-align:center;
		max-width:none;
	}
	.main-welcome-grid{
		min-height:80vh;
	}
	.hyperx-token{
		margin:30pt auto 200pt;
		transform:translateX(0%) translateY(35%);
        width: 100%;
        max-width: 100%;
	}
	.coin-image{
		max-width:50%;
		display:block;
		margin:0 auto;
	}
	.blackhole-bg{
		max-width:100%;
	}
	.dualflow-grid{
		flex-direction:column;
		gap:60pt;
	}
	.dualflow-one{
		flex-direction:column;
	}
	.dualflow-one-block02{
		margin-top:30pt;
	}
	.dualflow-two{		
		flex-direction:column-reverse;
	}
	.dualflow-two-block02{
		margin-top:-35pt;
	}
	.dg-img-arrow{
		transform:translate3d(-50%, 0, 0) rotateZ(90deg);
	}
	.dg-1, .dg-2, .dg-3{
		flex-direction:row-reverse;
		justify-content:center;
	}
	.dg-1 .db-content, .dg-2 .db-content, .dg-3 .db-content{
		text-align:start;
	}
	.dualflow-one-block01{
		margin-top:40pt;
		width:100%;
	}
	.dg-4, .dg-5, .dg-6{
		justify-content:center;
	}
	.core-map-grid ul{
		row-gap:10pt;
	}
	.core-map-grid li{
		width:46.66%;
	}
	.dg-img{
		max-width:25px;
	}	
}
@media(max-width:768px){
	.section-02, .section-03, .section-04, .section-05, .section-06{
		padding:30pt 0;
	}
	.section-02-grid ul{
		flex-wrap:wrap;
		row-gap:10pt;
		justify-content:center;
	}
	.section-02-grid li{
		width:46.66%;
	}
	.token-utility-grid{
		flex-direction: column-reverse;
		row-gap:30pt;
	}
	.tug-01, .tug-02{
		width:100%;
	}
	.coverage-block-grid{
		flex-direction:column;
	}
	.cbgc-01{
		min-height:auto;
	}
	.cbg-left, .cbg-right{
		width:100%;
	}
	.exploreus-grid li{
		width:46%;
	}
}
@media(max-width:500px){
	.section-02-grid ul{
		flex-direction:column;
	}
	.section-02-grid li{
		width:100%;
	}
	.ecosystem-logo{
		width:65px;
		height:65px;
	}
	.dualflow-one, .dualflow-two{
		width:100%;
	}
	.core-map-grid li{
		width:100%;
	}
	.tug-card h3{
		font-size:20px;
	}
	.cbgc-bottom{
		left:15pt;
		bottom:15pt;
		font-size:16px;
	}
	.cbg-right li{
		width:100%;
	}
}
/*** horizontal scroll slide css ***/
.scroll-container {
	height:200vh; /* Make container tall enough for sticky effect */
}
.sticky-section {
	position: sticky;
	top: 0;
	height: 100vh;
	background: #000;
	overflow: hidden;
	display:flex;
	align-items:center;
	justify-content:center;
}
.scroll-horizontal-wrapper{
	display:block;
	position:relative;
	margin:auto;
	width:100%;
	height:50%;
}
.grid-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: 
		linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px);
	background-size: 50px 50px;
	animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
	0% { transform: translate(0, 0); }
	100% { transform: translate(50px, 50px); }
}
.flowchart-header {
	position: absolute;
	top:0;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	z-index: 10;
}
.flowchart-tag {
	background: rgba(255, 255, 255, 0.1);
	padding: 8px 20px;
	border-radius: 25px;
	font-size: 0.9rem;
	font-weight: 500;
	margin-bottom: 20px;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	display: inline-block;
}
.flowchart-title {
	font-size: 2.8rem;
	font-weight: 300;
	letter-spacing: 3px;
}
.slides-viewport {
	position: absolute;
	top:35%;
	bottom:0;
	left: 50%;
	transform: translate(-50%, 0);
	width: 95%;
	max-width:800px;
	height: 300px;
	overflow: hidden;
}
.slides-container {
	display: flex;
	width: 320%;
	height: 100%;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: transform;
}
.slide {
	width: 20%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
}
.step-card {
	background:url(../images/flowmap-card-bg.jpg) no-repeat;
	background-position:center top;
	border: 2px solid #00ff88;
	border-radius: 16px;
	padding: 25px;
	width: 100%;
	max-width:100%;
	height: 200px;
	display: flex;
	align-items: center;
	backdrop-filter: blur(20px);
	box-shadow: 
		0 10px 30px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(0, 255, 136, 0.1);
	transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	transform: scale(0.85);
	opacity: 0.4;
	will-change: transform, opacity;
}
.step-card.active {
	transform: scale(1);
	opacity: 1;
	border-color: #00ff88;
	box-shadow: 
		0 20px 50px rgba(0, 0, 0, 0.7),
		0 0 0 1px rgba(0, 255, 136, 0.3),
		0 0 20px rgba(0, 255, 136, 0.2);
}
/* Preview slides styling */
.slide:nth-child(n+1) .step-card {
	border-color: rgba(0, 255, 136, 0.5);
}
.slide:nth-child(n+1) .step-card:not(.active) {
	transform: scale(0.9);
	opacity: 0.6;
}
/* Mobile responsive adjustments */
@media (max-width: 768px) {
	.slides-viewport {
		width: 100%;
		padding: 0 20px;
	}
	
	.slide {
		padding: 0 8px;
	}
	
	.step-card {
		max-width: 280px;
		height: 180px;
		padding: 20px;
	}
	
	.step-number {
		font-size: 2.5rem;
	}
	
	.step-description {
		font-size: 1.2rem;
	}
	
	.step-icon-container {
		width: 60px;
		height: 60px;
		font-size: 1.5rem;
	}
	
	.flowchart-title {
		font-size: 2rem;
	}
	
	.intro-content h1 {
		font-size: 2.5rem;
	}
	
	.overview-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 480px) {
	.step-card {
		max-width: 250px;
		height:100%;
		padding: 15px;
	}
	
	.step-content {
		gap: 15px;
	}
	
	.step-number {
		font-size: 2rem;
	}
	
	.step-description {
		font-size: 1.1rem;
	}
	
	.flowchart-title {
		font-size: 1.8rem;
	}
	
	.intro-content h1 {
		font-size: 2rem;
	}
	
	.intro-content p {
		font-size: 1.1rem;
	}
	.scroll-horizontal-wrapper{
		height:90vh;
	}
	.slides-viewport{
		bottom:40%;
		transform: translate(-50%, 50%);
	}
	.flowchart-header{
		top:10%;
	}
}
.step-content {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 25px;
}
.step-icon-container {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	background: rgba(0, 255, 136, 0.1);
	border: 2px solid rgba(0, 255, 136, 0.3);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	transition: all 0.6s ease;
	position: relative;
}
.step-card.active .step-icon-container {
	background: rgba(0, 255, 136, 0.2);
	border-color: #00ff88;
	box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}
.step-text {
	flex: 1;
}
.step-number {
	font-size: 3.5rem;
	font-weight: 100;
	color: #444;
	margin-bottom: 5px;
	line-height: 1;
	transition: color 0.6s ease;
}
.step-card.active .step-number {
	color: #00ff88;
}
.step-label {
	font-size: 1rem;
	color: #666;
	margin-bottom: 8px;
	font-weight: 400;
	transition: color 0.6s ease;
}
.step-card.active .step-label {
	color: #00ff88;
}
.step-description {
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.3;
	color: #ccc;
}
.progress-container {
	position: absolute;
	bottom: 60px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}
.progress-dots {
	display: flex;
	gap: 12px;
}
.progress-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	transition: all 0.4s ease;
	cursor: pointer;
}
.progress-dot.active {
	background: #00ff88;
	box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}
.progress-text {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
}
.completion-indicator {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: #00ff88;
	font-size: 0.9rem;
	opacity: 0;
	transition: opacity 0.5s ease;
	text-align: center;
}
.completion-indicator.show {
	opacity: 1;
}
.next-section {
	background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px;
}
.next-section h2 {
	font-size: 3rem;
	margin-bottom: 20px;
	color: #00ff88;
}
.next-section p {
	font-size: 1.2rem;
	color: #ccc;
	max-width: 600px;
	line-height: 1.6;
}
.arrow-indicator {
	position: absolute;
	right: 30px;
	top:80%;
	transform: translateY(-50%);
	color: rgba(0, 255, 136, 0.6);
	font-size: 1.5rem;
	opacity: 0;
	transition: all 0.4s ease;
	background:rgba(100,100,100,.15);
	border-radius:50%;
	    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.step-card.active .arrow-indicator {
	opacity: 1;
	transform: translateY(-50%) translateX(10px);
}