@import '_global.css';

* {
	font-family: 'Poppins', sans-serif;
}

header {
	background: rgb(24,25,80);
	background: linear-gradient(180deg, rgba(24,25,80,1) 0%, rgba(9,9,121,1) 15%, rgba(24,25,80,0) 100%);
	height: 264px;
	transition: all ease-in-out .3s;
	z-index: 5;
}

header.scroll {
	background: rgb(24,25,80);
	height: 93px;
}

#home .logo {
	width: 236px;
}

#down {
	background: url('../img/circles.png') no-repeat center bottom;
	background-size: 100% auto;
}

#down .logo {
	width: 165px;
}

.line {
	margin-left: -10%;
	margin-top: -70px;
	width: 120%;
}

.video2 {
	background-image: url(../img/video2.jpg);
}

.line-after:after {
	background: #CED2EB;
	border-radius: 4px;
	content: '';
	display: block;
	height: 7px;
	margin: 30px auto;
	width: 60px;
}

.line-after-w:after {
	background: #FFF;
	border-radius: 4px;
	content: '';
	display: block;
	height: 7px;
	right: -40px;
	margin-top: -3px;
	top: 50%;
	position: absolute;
	width: 60px;
}

.shadow-blue {
	box-shadow: 0 15px 35px rgba(72, 141, 255, .26);
}

.arrow-next:after {
	background: url('../img/arrow.svg') no-repeat center center;
	background-size: contain;
	content: '';
	height: 50px;
	margin-top: -25px;
	position: absolute;
	right: -20px;
	top: 50%;
	width: 28px;
}

.mt-50 {
	margin-top: -100px;
}

#ecosystem {
	background-image: url(../img/bg-map.svg);
	border-radius: 60px 0 60px 0;
}

.line-top {
	background: #8300A0;
	border-radius: 8px 8px 0 0;
	height: 57px;
	width: 16px;
}

#roadmap .date {
	margin-top: -15px;
}

#roadmap .date:after {
	background-image: url(../img/ico-tick.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 12px auto;
	border-radius: 50%;
	content: '';
	display: block;
	height: 32px;
	position: absolute;
	top: 0;
	width: 32px;
}

#roadmap .date:before {
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	top: 20px;
	width: 16px;
}

#roadmap .date-start:before { right: -20px; }
#roadmap .date-start:after { right: -28px; }
#roadmap .date-end:before { left: -20px; }
#roadmap .date-end:after { left: -28px; }

#roadmap .date-1:before { background-color: #C36FFF; }
#roadmap .date-1:after { background-color: #6E277E; }

#roadmap .date-2:before { background-color: #C36FFF; }
#roadmap .date-2:after { background-color: #AC37FF; }

#roadmap .date-3:before { background-color: #C36FFF; }
#roadmap .date-3:after { background-color: #AC37FF; }

#roadmap .date-4:before { background-color: #4EBAEE; }
#roadmap .date-4:after { background-color: #0C91D1; }

#roadmap .date-5:before { background-color: #1475A4; }
#roadmap .date-5:after { background-color: #0C91D1; }

#roadmap .date-6:before { background-color: #1475A4; border-radius: 0 0 8px 8px; }
#roadmap .date-6:after { background-color: #0C91D1; }

#roadmap .date-7:before { height: calc(100% + 45px); top: -35px; }
#roadmap .date-7:before, #roadmap .date-8:before, #roadmap .date-9:before { background-color: #F1F1F1; }
#roadmap .date-7:after, #roadmap .date-8:after, #roadmap .date-9:after { background-color: #FFF; border: 1px solid #001A45; }
#roadmap .date-9:before { border-radius: 0 0 8px 8px; height: 60% }


#roadmap .date-1 h4 { color: #6E277E; }
#roadmap .date-2 h4 { color: #AC37FF; }
#roadmap .date-3 h4 { color: #0C91D1; }
#roadmap .date-4 h4 { color: #1475A4; }
#roadmap .date-5 h4 { color: #095072; }
#roadmap .date-6 h4 { color: #1475A4; }
#roadmap .date-7 h4, #roadmap .date-8 h4, #roadmap .date-9 h4 { color: #095072; }


.team {
	background: rgb(217,217,217);
	background: linear-gradient(180deg, rgba(217,217,217,0) 50%, rgba(131,0,160,1) 100%);
}


.btn-gradient {
	background: rgb(23,75,156);
	background: linear-gradient(145deg, rgba(23,75,156,1) 0%, rgba(140,47,212,1) 100%);
}

.bg-light-2 {
	background-color: #CED2EB !important;
}


footer {
	border-radius: 80px 80px 0 0;
}

#ecosystem .ico {
	width: 123px;
}

#distribution .progress {
	width: 300px;
}

#team .arrow {
	width: 28px;
}

@media( max-width: 767px ) {
	header button {
		width: 35px;
	}
	header button span {
		height: 2px;
	}

	header nav {
		background: rgb(9,9,121);
		height: 100%;
		position: fixed;
		right: -250px;
		top: 0;
		transition: all ease-in-out .3s;
		width: 250px;
	}

	header nav.view {
		right: 0;
	}

	#home .logo {
		width: 200px;
	}

	.line {
		margin-left: 5%;
		margin-top: -7px;
		width: 90%;
	}

	#down {
		background-size: auto 100%;
	}

	#down .logo {
		width: 85px;
	}

	.arrow-next:after {
		left: 50%;
		margin-left: -10px;
		margin-top: 30px;
		right: inherit;
		top: inherit;
		transform: rotate(90deg);
	}

	.mt-50 {
		margin-top: -60px;
	}

	#ecosystem .ico {
		width: 80px;
	}

	.line-after-w:after {
		right: -16px;
		width: 30px;
	}

	#distribution .progress {
		width: 120px;
	}

	#team .arrow {
		width: 18px;
	}

	#contact .input-group input {
		border-radius: 20px 0 0 20px;
	}
}