:root {
	--scroll: 0;  
}



*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* font-size: clamp(1.125rem, 2vw, 1.25rem); */
	/* line-height: 1.5; */
}


.container-fluid{
	padding: 0;
}

.row {
	margin: 0;
}

body {
	background: #0b006d;
	padding: 0;
}

.btn {
	width: 100px;
}

.sp-btn{
	 background: #050035;
}

.navbar-brand img{
	width: 4rem;
}


.navbar .navbar-nav .nav-item {
    margin: 0 1rem;
}
.navbar .navbar-nav .nav-item:hover {
    border-bottom: 2px solid #050035;
}

.container__hero{
	background-image: url('../images/earnmoneyonline.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;	
	/* height: 80vh; */
	animation: fade-up 1s;
	animation-fill-mode: forwards;

}

/* .container__features {
	padding: 2rem 0;
} */

.hero_info {
	background: rgba(0, 0, 0, 0.8);
	margin: 10rem auto;
	margin-top: 14rem;
	width: 100%;
	height: inherit;
	padding: 2rem;
}

.card {
	background: #050035;
	padding: 1rem 0.5rem;
	color: #ffffff;
	position: relative;
}

.normal {
	animation: fade-card linear both;
	animation-timeline: view();
}

.delay {
	animation: fade linear both;
	animation-timeline: view();
}

.delay-2 {
	animation: fade-card linear both;
	animation-timeline: view();

}

.card:hover {
	border: 1px solid #00f7ff;
}

.card img {
	width: 10rem;
	height: 10rem;
	margin: 0 auto;
}

.arch_icon {
	width: 100px;
	height: 100px;
	background: #050035;
	border-radius: 50% ;
}

.map{
	background-color: black;
	background-image: url('../images/map.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	margin: 5rem auto;
	height: 20rem;
	animation: fade-down 1s linear both;
	animation-timeline: view();
}

footer {
	background: #050035;
	margin: 0;
	animation: fade 1s linear both;
	animation-timeline: view();
}


footer a:hover {
	color: #ffffff !important;
}





@keyframes fade-card {
	0% {
		opacity: 0;
		top:200px;
	}
	40% {
		opacity: 1;
		top:0px;
	}
}

@keyframes fade {
	0% {
		opacity: 0;
	}
	40% { 
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}




@keyframes fade-down {
	0% {
		opacity: 0;
		transform: translateY(-30px) scale(0.9);
	}

	50% {
		opacity: 1;
		transform: translateY(0px) scale(1);
	}

}

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(-30px) scale(0.9);
	}

	to {
		opacity: 1;
		transform: translateY(0px) scale(1);
	}

}

@keyframes sfade-up {
	0% {
		opacity: 0;
		transform: translateY(-30px) scale(0.9);
	}

	40% {
		opacity: 1;
		transform: translateY(0px) scale(1);
	}

}





/* Responsiveness  */

@media (min-width: 425px) {
	.hero_info {
		padding: 4rem;
		width: 70%;
	}

}



@media (min-width: 1024px) {
		.container__hero {
				height: 100vh;
	}

	.container__features,
.container__achievements,
		.container__map {
				height: 100vh;
				animation: sfade-up 1s;
				animation-fill-mode: forwards;
				animation-timeline: view();
	}
	.map{
		height: 35rem;
	}

}
@media (min-width: 1440px) {
	.hero_info {
		padding: 8rem;
	}
	.card {
		padding: 2rem;
		/* height: 35rem !important; */
	}
}