body{
	font-family:'Manrope',sans-serif;
	background:#f5f8fd;
	overflow-x:hidden;
}

.gradient-bg{
	position:fixed;
	inset:0;
	z-index:-2;
	background:
			radial-gradient(circle at 20% 15%, rgba(79,142,247,.18), transparent 30%),
			radial-gradient(circle at 85% 10%, rgba(31,95,175,.16), transparent 30%),
			radial-gradient(circle at 50% 90%, rgba(13,55,106,.08), transparent 35%),
			#f5f8fd;
}

.grid-bg{
	position:fixed;
	inset:0;
	z-index:-1;
	background-image:
			linear-gradient(rgba(13,55,106,.04) 1px, transparent 1px),
			linear-gradient(90deg, rgba(13,55,106,.04) 1px, transparent 1px);
	background-size:42px 42px;
}

.glass{
	background:rgba(255,255,255,.72);
	backdrop-filter:blur(20px);
	border:1px solid rgba(255,255,255,.6);
	box-shadow:
			0 25px 60px rgba(13,55,106,.08);
}

.blob{
	position:absolute;
	border-radius:9999px;
	filter:blur(90px);
	animation:float 14s ease-in-out infinite;
}

.blob1{
	width:350px;
	height:350px;
	background:#4F8EF7;
	opacity:.12;
	top:-100px;
	left:-100px;
}

.blob2{
	width:320px;
	height:320px;
	background:#0D376A;
	opacity:.10;
	bottom:-80px;
	right:-80px;
	animation-delay:4s;
}

@keyframes float{
	0%,100%{
		transform:translateY(0px);
	}
	50%{
		transform:translateY(35px);
	}
}

.progress-bar{
	animation:load 3s ease forwards;
}

@keyframes load{
	from{
		width:0;
	}
	to{
		width:85%;
	}
}

.service-card{
	transition:.35s;
}

.service-card:hover{
	transform:translateY(-8px);
	box-shadow:0 25px 60px rgba(31,95,175,.15);
}

.fade{
	opacity:0;
	transform:translateY(25px);
	animation:fade .8s ease forwards;
}

.fade:nth-child(2){animation-delay:.15s;}
.fade:nth-child(3){animation-delay:.3s;}
.fade:nth-child(4){animation-delay:.45s;}

@keyframes fade{
	to{
		opacity:1;
		transform:none;
	}
}