@import url("https://fonts.googleapis.com/css?family=Raleway:200,700|Source+Sans+Pro:300,600,300italic,600italic");

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Nova+Script&display=swap');

*{
	box-sizing: border-box;
}
		

html, 
body{ 
background-color:#16151a; 
color: #fff;  
font-size:16px;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
margin:0;
padding:0;
}


a{ 
	color:#a6f53b;
	text-decoration:none;
}


a:hover{
	color:#a6f53b;
	text-decoration: underline;

}


.highlight,
.activetext{
	color:#a6f53b !important;
}


h1, h2, h3, h4, h5, h6 {
	text-transform:uppercase;
}

h1{
	margin:-8px 0 0 0; padding:0; 
	 font-size:3rem;
	 font-weight:200;
}

h2{
	 font-size:1.6rem;
	 font-weight:400;
}
h3{
	 font-weight:500;
	font-size:1.5rem;
}


.topmenu{
		color: #ffffff;
		margin: 0 auto;
		text-transform: uppercase;
		padding:2rem;
		font-size:0.76rem;
		font-weight: 600;
		display: flex; 
		justify-content: space-between; 
		align-items:center;
		max-width: 1280px;
		width:100%;
	}
	
.topmenu .btn{
		font-size:0.85rem;
		font-weight: 500;
}

	.topmenu a:first-child{
	padding:8px 16px 8px 0;
	}
	.topmenu a{
	color: #ffffff;
	text-decoration:none;
	display:inline-block;
	padding:0.5rem 1rem;
	line-height:1rem;
	}

	.topmenu a:hover{
	color:#3fff2b;
	text-decoration:none;
	}

	.topmenu .btn:hover{
	color:black;
	}

	
	.topmenu a:nth-last-child(3) span:nth-child(1){
		display:inline;
	}
	
	.topmenu a:nth-last-child(3) span:nth-child(2){
		display:none;
	}
	 
	 .topmenu a:first-child span{
		 	 display:inline;
	 }
	.topmenu a:nth-last-child(2){
		margin-left:auto;
	} 


	
	.TopSection{
 max-width:1600px;
 margin:0 auto;
  background: radial-gradient(circle farthest-side at 30% 200%, rgba(200, 200, 255, 0.7) 10%, rgba(200, 200, 255, 0) 60%);
  height:770px;

}

.TopSection h1{
font-size:2.3rem; font-weight:300; text-transform: none;
}

.TopSection h1 span{
	font-weight:700;
}



.TopSection .container{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}

.TopSection .container>div{
	width:49%;
	position:relative;
	box-sizing:border-box;
}
.TopSection .container>div:nth-child(1){
z-index:1;
padding-top:2rem;
height:580px;}

.TopSection .container>div:nth-child(2){
position:relative;
z-index:0;
height:580px;
}

.TopSection .container>div:nth-child(4){
	padding-left:7rem;
}



.topanim{
height:580px;
width:980px;
position:absolute;
	z-index:1;
right:0;
pointer-events:none;
}

.topanimcontent{
	padding-top:160px;
	width:680px;
	position:absolute;
	z-index:2;
	top:0;
	left:auto;
	right:-80px;
}

		

		 
.subtitle{
	color:#999;
font-size:1.2rem;
font-weight: 200;
}


 .TopSection .container .btn{
	 padding:1rem 3rem;  font-weight:600;
 } 
 
.TopSection .container .btn-primary{
	 margin-right:4%;
 }
		


.topanimtitle{
	width:100%; margin-bottom:2rem; text-align:center;
	text-transform:uppercase;
	font-size:0.9rem;
}
.topanimtitle h2{
	font-weight:700;
	margin:0;
	padding:0;
}

.topanimilist{
	display:flex;
	flex-wrap:wrap;
	margin:0;
	padding:0;
	align-items: start;
	justify-content:space-between;
	text-transform:uppercase
}
 
.topanimilist li{
	width:49%;
	text-align:center;
	padding-top:1.6rem;
	padding-bottom:1.6rem;
	font-size:1.2rem;
	height:6rem;
	color:#a6f53b;
	display:block;
	position:relative;
	overflow:hidden;
	margin-bottom:1rem;
}

.topanimilist li span{
	font-size:0.7rem;
	color:#fff;
}
.topanimilist li:nth-child(2),
.topanimilist li:nth-child(4){
	margin-top:-2rem;
}
.topanimilist li:nth-child(odd){
	padding-right:1rem;
	padding-left:1rem;
}

.topanimilist li:nth-child(even){
	padding-right:1rem;
	padding-left:1rem;
}


.topanimilist li:before{
	content:'';
	position:absolute;
	z-index:-1;
	top:5px;
	bottom:-1px;
	left:0;
	width:600px;
	height:auto;
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.5);
background: radial-gradient(circle,rgba(180, 255, 100, 0) 20%, rgba(76, 113, 39, 0.2) 100%);
}

.topanimilist li:nth-child(odd):before{
	right:12px;
	left:auto;
	  box-shadow: 1px 2px 1px white;	transform: skewX(-20deg) rotate(-0.5deg);
}

.topanimilist li:nth-child(even):before{
	left:12px;
	right:auto;
	  box-shadow: -1px 2px 1px white;	transform: skewX(-20deg) rotate(0.5deg);
}


.sideimage{
	width: 500px;
	height:448px;
	position:relative;	    
	perspective: 1800px;
	perspective-origin: 50% 50%;
	z-index:4;
	margin-top:-230px;
}	
	
.sideimage img:first-child{
	width:640px;
	position:absolute;
	top:100px;
	left:-28px;
	z-index: 1;
	transform:  scaleX(1) scaleY(1) scaleZ(1) rotateX(17deg) rotateY(40deg) rotateZ(-13deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
	border-radius: 24px;
	border:4px solid #222124;
	background-color:#222124;
	outline:2px solid rgba(52, 52, 62, 0.7);
}

.sideimage img:last-child{
	width:640px;
	position:absolute;
	z-index: 2;
	top:0;
	left:120px;
	transform:  scaleX(1) scaleY(1) scaleZ(1) rotateX(17deg) rotateY(40deg) rotateZ(-13deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
	border-radius: 24px;
	border:4px solid #222124;
	background-color:#222124;
	outline:2px solid rgba(52, 52, 62, 0.7);
}





 .package{
	 padding:120px 0 7rem 0;
	 
 }  
 
.package .container{
   display:flex;
   align-items:center;
   justify-content:center;
}
.package .container>div:nth-child(1){
text-align:right;
}

.package .container>div:nth-child(1) .feature .feature-icon,
.package .container>div:nth-child(1) .feature{
	justify-content:end;
}

.package .container>div:nth-child(1),
.package .container>div:nth-child(3){
	width:35%;
}

	
.feature {
  display: flex;
  align-items: center;
  color: #e0e0e0;
  height:56px;
}


.feature-icon {
  display: flex;
  align-items: center;
  width: 74px;
  height: 42px;
}
   
   
 .twoinone{
	width:30%;
	 height:190px;
	 text-align:center;
	 position:relative;
	 margin:0 auto;
	 z-index:3;
	 box-sizing:border-box;
	 padding-top:24px;
 }
  .twoinone:before{
	  content:"";
	  display:block;
	 width:230px;
	 height:230px;
	 background-color:#fff;
	 position:absolute; 
	 z-index:-2;
	 transform: scaleY(0.7) rotate(-45deg);
	 top:50%;
	 left:50%;
	 margin-top:-115px;
	 margin-left:-115px;
	 border-radius:2.4rem;
  }
  
  
    .twoinone:after{
	  content:"";
	  display:block;
	 width:220px;
	 height:220px;
	 position:absolute; 
	 z-index:-1;
	 transform: scaleY(0.75) rotate(-45deg);
	 
  background-color:#16151a; 
	 top:50%;
	 left:50%;
	 margin-top:-110px;
	 margin-left:-110px;
	 border-radius:2rem;
  }
  
 
  .twoinone span:nth-child(1){
	  font-family: "Nova Script", system-ui;
	font-weight: 400;
	font-style: normal;
	font-size:6rem;
	display:block;
	height:6rem;
	padding-right:26px;
	letter-spacing:-8px;
  }
  
    .twoinone span:nth-child(2){
		font-size:0.85rem;
		color: #a6f53b;
		display:block;
	}
	 

.container{
	max-width: 1280px;
	width:100%;
	margin:0 auto;
	position:relative;
	padding:0 2rem;
	box-sizing: border-box;
}

.content{
	padding:0 5rem;
}

.about{
	display: flex; justify-content:space-between; gap:4rem;
	padding-bottom:3rem;
}

.about-example compo-3d{
	max-width:310px;
	margin:0 auto;
}

	 
	.message {
    padding: 0.7rem 1rem;
    margin: 1rem 0;
    border-radius: 0.5rem;
}

.success {
    background: #d4edda;
    color: #155724;
}

.error {
    background: #f8d7da;
    color: #721c24;
}
.userform{display:flex;}


.userform>div:nth-child(1){
	order:1;
	width:50%; 
	text-align:center;
}


	.userform>div:nth-child(2){
	width:50%;
	order:2;
	padding-right:2rem;
}

.userform>div ul{
	text-align:left;
}

.userform>div ul li{
	padding-top:1rem;
	padding-bottom:1rem;
	margin-left:2rem;
}

.userform button{
	text-transform:uppercase;
}



#usersection{
	padding: 8rem 0 0 0;
	position:relative;
	background-color: #1e1c23;
background: radial-gradient(circle farthest-side at 50% -120%, rgba(200, 200, 255, 0.7) 10%, #211e26 60%);
	}
	

	
	 .usersection-section-arrow{
	 position:absolute; z-index:2; left:50%; top: -2px;margin-left:-136px;

 }	
		
	.flex{
display: flex;
align-items: center;
justify-content: space-between;
	}



.header {
padding: 32px 0;
display: flex;
align-items: center;
gap: 16px;
}

.description {
color: #9aa4bf;
line-height: 1.6;
max-width: 560px;
}

.divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
margin: 24px 0;
}


.flexrow{
display:flex;
padding: 32px 0 0 0;
display: flex;
align-items: top;
justify-content: space-between;
width:420px;
}

.flexrow div{
height:160px;
text-align:center;
border-radius:18px;
}

form{
	text-align:left;
}

.label{
	color:#999;
}
label {
            display: block;
            margin-bottom: 0.4rem;
			padding:0 1rem;
            font-size: 0.9rem;
 
        }

input[type=text],
input[type=password],
input[type=email] {
            width: 100%;
			padding:1em;
			outline:none;
            border: 1px solid #333;
            outline: none;
			border-radius:8px;
            font-size: 1rem;
            transition: border 0.3s, box-shadow 0.3s;
			background-color:rgba(0,0,0,0);
			color:#ccc;
			margin-bottom:1em;
        }

        .input-group input:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
        }

        .form-actions {
            margin-top: 1.5rem;
        }

        
        .form-footer {
            margin-top: 1.2rem;
            color: #666;
        }
		
		
.btn,
button{
	padding: 0.8rem 2rem; 
	display:inline-flex;
	line-height:1rem;
	align-items:center;
	outline:1px solid rgba(255,255,255,0.5);
	border:none;
	text-align:center; 
	color:white; 
	text-decoration:none; 
	border-radius:0.5rem;
	background: none;
	cursor:pointer;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
	font-size:1rem;

}

.btn-lg{
	
	padding: 1.2rem 4rem; 
}

.btn-warning{
background-color:#dc3545;
	text-transform:uppercase;
outline:none;
}


.btn-primary{
background-color:#a6f53b;
color:#000;
outline:none;
}

.btn-secondary{
	text-transform:uppercase;
}


.btn:hover,
button:hover{
background-color:#beff65;
color:#000;
outline:none !important;
text-decoration:none;
}
.btn:focus,
button:focus{
outline:none;
}

.light{
	background-color: #eee;
	color: black;
}


.light .btn,
.light button{
	outline:1px solid rgba(0,0,0,1);
	color:black;
}

.light a{
	color: green;
}

.light .btn:hover,
.light button:hover{
background-color:#4bc64b;
}
.btn:focus,
button:focus{
outline:none;
}


	.cardssection{
	padding: 116px 2rem 0 2rem;
	position:relative; 
	background-color: #211e26;
	}	

.cardszone{
 text-align:center; height:540px; position:relative;z-index:2;
 background: radial-gradient(circle farthest-side at 50% 100%, rgba(200, 200, 255, 0.7) 10%, rgba(200, 200, 255, 0) 60%);	position:relative; }

.cardsglow{
	width:100%;
	height:270px;
	position:absolute;
	top:auto;
	bottom:-80px;
	z-index:2;
	pointer-events:none;
background: #16151a;
background: radial-gradient(at center, rgba(200,200,255,0.17), rgba(200,200,255,0) 70%);
	
}

.cards{
	display:flex; 
	justify-content: space-between; 
	position:relative;
	margin-top:2rem;
}

.card{
	width:31%;
	border-radius:1.5rem;
	background-color:#151515;
	/*box-shadow: 0 0 20px rgba(0,0,0,.4);
	overflow:hidden;background: radial-gradient(circle farthest-side at 75% 50%, rgba(0, 0, 0, 0) 20%, rgba(0, 30, 0, 0.78) 100%);*/
position:relative;
	height:620px;
	box-sizing:border-box;
	padding:3rem 2rem 0 2rem;
}
 

.card ul{
	margin: 1rem 0 1.5rem 0;
	padding:0; 
	border-top:1px solid rgba(255,255,255,0.1);
	
}

.card ul li{
	border-bottom:1px solid rgba(255,255,255,0.1);
	margin: 0;
	padding:0.5rem 0;
	font-size:0.85rem;
	list-style-position:outside;
	list-style-type:none;
}

.card .btn{
	font-size:0.85rem;
	
}

.card .divider{
	margin: 8px 0;
}

.card:nth-child(1){
	overflow:hidden;
	z-index:5;
} 

.card:nth-child(1) .cardimg{
	filter:brightness(200%);
	display:flex;
	justify-content:space-between;
	height:400px;
	width:460px;
	margin: 1.7rem auto auto 2rem;
}

.card:nth-child(2){
	overflow:hidden;
	z-index:5;
} 

.card:nth-child(2) .cardimg{
	filter:brightness(130%) contrast(130%);
	display:flex;
	justify-content:space-between;
	height:370px;
	width:520px;
	margin: 2rem auto auto -200px;
}


.card:nth-child(3){ 
	z-index:4;
}  

.card:nth-child(3) .cardimg{
	filter:brightness(110%) contrast(130%);
	display:flex;
	justify-content:start;
	height:400px;
	width:540px;
	margin: 2rem auto auto -146px;
}



/*

section:nth-child(6){
	background-color: #eee;
	color:#000; 
padding:308px 0 92px 0; text-align:center;
}

section:nth-child(6) .btn{
	padding:1.4rem 3rem; margin-bottom:32px;text-transform:uppercase; letter-spacing:2px;
}*/

.openapp{
padding:0 0 92px 0; text-align:center;
}

.openapp ul{
	margin:0;
	padding:0;
}


.openapp li{
	margin:0;
	padding:0;
	list-style-type:none;
	 line-height:1.8rem; font-size:0.8rem;
}


.footer .container{
padding: 4rem; text-align:center; display:flex; align-items:center; justify-content:center;
font-size:0.85rem;
color:#999;
}

.about-content{
	width:60%;
}

.about-example{
	width:38%;
}


@media (max-width: 1060px) {

	
h1{
	 font-size:1.5rem;
}

h2{
	 font-size:1.3rem;
}
h3{
	font-size:1.2rem;
}



.topmenu{
padding:1rem 1rem 1.5rem 0.5rem;
}

.topmenu a:first-child span{
 display:none;
}
.topmenu a:first-child{	
	padding:0.5rem 0.5rem 0.5rem 0;
}
.topmenu a:nth-last-child(4){
	padding:0.5rem;
}

	.topmenu a:nth-last-child(3) span:nth-child(1){
	display:none;
}

.topmenu a:nth-last-child(3) span:nth-child(2){
	display:inline;
}

	.topmenu a:nth-last-child(2) span{
	display:none;
} 


	.TopSection{
  background: radial-gradient(circle farthest-side at 30% 200%, rgba(200, 200, 255, 0.7) 10%, rgba(200, 200, 255, 0) 60%);

height:auto;
}

.TopSection h1{
font-size:1.6rem; 
}
		 
.subtitle{
font-size:1rem;
}

 .TopSection>.container .btn{
	 padding:0.7rem 1.4rem;
	 width:46%;
	 justify-content:center;
	 
 } 
 


.TopSection .container>div{
	width:100%;
}
.TopSection .container>div:nth-child(1){
z-index:1;
padding:1rem 0 2rem 0;
height:auto;}

.TopSection .container>div:nth-child(2){
position:relative;
z-index:0;
height:360px;
width:280px;
	margin:0 auto;
}



.TopSection .container>div:nth-child(4){
	padding-left:0;
	order:3;
}

.TopSection .container>div:nth-child(3){
	order:4;
}


.topanim{
height:360px;
	width:520px;
position:absolute;
	z-index:1;
right:0;
pointer-events:none;
}



.topanimcontent{
	padding-top:130px;
	top:0;
	left:-48px;
	right:-48px;
	width:370px;
}

.topanimtitle h2{
	font-weight:700;
	margin:0;
	padding:0;
}


.topanimtitle{
	display:none;
}


.topanimilist li{
	width:49%;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	height:3rem;
	margin-bottom:0.7rem;
	font-size:0.9rem;
}

.topanimilist li span{
	font-size:0.6rem;
}

.topanimilist li:nth-child(odd){
	padding-right:1rem;
	padding-left:1rem;
}

.topanimilist li:nth-child(even){
	padding-right:1rem;
	padding-left:1rem;
}




.sideimage{
	width: 360px;
	height:240px;
	position:relative;	    
	perspective: 1800px;
	perspective-origin: 50% 50%;
	z-index:4;
	margin:3rem auto 0 auto;
}	
	
.sideimage img:first-child{
	width:360px;
	position:absolute;
	top:60px;
	left:-18px;
	z-index: 1;
	border-radius: 1rem;
}

.sideimage img:last-child{
	width:360px;
	position:absolute;
	z-index: 2;
	top:0;
	left:40px;
	border-radius: 1rem;
}







.container {
  padding: 0 1rem;
}

.toplogo{
	width:6rem;
	height:2rem;
}


.large{
	font-size:1.5rem;
}

	
	

.feature {
  height:56px;
}

/* Icons */
.feature-icon {
  display: flex;
  align-items: center;
  width: 28px;
  height: 24px;
  margin-right:0.5rem;
}

.feature-icon img{
	width:28px;
	height:24px;
}

 .package{
	 padding:5rem 0;
	 
 }
 
.package .container{
   display:flex;
   flex-wrap:wrap;
   align-items:center;
   justify-content:center;

}


.package .container>div:nth-child(1) .feature .feature-icon,
.package .container>div:nth-child(1) .feature{
	justify-content:end;
}

.package .container>div:nth-child(1),
.package .container>div:nth-child(3){
	width:45%;
	padding-top:2rem;
}


.package .container>div:nth-child(2){
	order:1;
	width:100%;
	
}

.package .container>div:nth-child(1){
	order:2;
	margin-right:1rem;
}

.package .container>div:nth-child(1) .feature-icon {
  margin-left:0.5rem;
  margin-right:0;
}

.package .container>div:nth-child(3){
	order:3;
	margin-left:1rem;
}



.twoinone{
 width:auto;
 height:160px;
 padding-top:32px;
}

.twoinone:before{
 width:170px;
 height:170px;
 margin-top:-80px;
 margin-left:-80px;
	 border-radius:2rem;
}

.twoinone:after{
 width:160px;
 height:160px;
 margin-top:-75px;
 margin-left:-75px;
	 border-radius:1.6rem;
}


.twoinone span:nth-child(1){
font-size:4rem;
height:4rem;
padding-right:16px;
letter-spacing:-4px;

}

.twoinone span:nth-child(2){
	font-size:0.65rem;
	color: #a6f53b;
	display:block;
padding-left:6px;
}






#usersection{
	padding: 6rem 0 4rem 0;
}
	
	
	

.userform{
	flex-wrap:wrap;
}

.userform>div:nth-child(2) h3{
	display:none;
}
.userform>div:nth-child(1){
		width:100%;
	order:2;
	padding-top:2rem;
}
.userform>div:nth-child(1) ul{
}

.userform>div:nth-child(1) ul li{
	margin:0;
}

.userform>div:nth-child(2) .divider{
	display:none;
}
	.userform>div:nth-child(2){
		
		width:100%;
	order:1;
}
.userform form{
	display:block;
}
.userform .btn-primary{
	display:block;
	margin: 0 auto;
}

.form-footer{
	text-align:center;
	
}

.cardssection{
	padding: 0;
}

.cardszone{
 height:auto;
 background: radial-gradient(circle farthest-side at 50% 200%, rgba(200, 200, 255, 0.7) 10%, rgba(200, 200, 255, 0) 60%);
	height:1640px;}
 
 
.cardsglow{

	bottom:-120px;
background: radial-gradient(at center, rgba(200,200,255,0.17), rgba(200,200,255,0) 60%);
	
}

.cards{
	display:block; 
}

.card{
	width:100%;
	border-radius:0.7rem;
	height:540px;
	margin:0 auto 2rem auto;
	max-width:320px;
	padding:2rem 1.5rem 0 1.5rem;
}
	


.card:nth-child(1) .cardimg{
	height:280px;
	width:310px;
	margin: 1.7rem auto auto 1rem;
}

.card:nth-child(1) .cardimg img:nth-child(1){
	margin-top:1.5rem;
}

.card:nth-child(2) .cardimg{
	height:280px;
	width:360px;
	margin: 1.7rem auto auto -48px;
}

.card:nth-child(2) .cardimg img:nth-child(2){
	margin-top:1.5rem;
}

.card:nth-child(3) .cardimg{
	height:300px;
	width:320px;
	margin: 1.7rem auto auto auto;
}


	.footer .container{
	padding:2rem 1rem 3rem 1rem; 
	font-size:0.7rem;
	}

	.container{
	font-size:0.85rem;
	}

	.content{
	padding:0 1rem 4rem 1rem;
	}

	.about{
		display:block;
	}

	.about-content,
	.about-example{
		width:100%;
	}
	.about-example compo-3d{
		height:360px;
	}
}