:root {
	--wave-blue: #0077be;
	--wave-cyan: #00bcd4;
	--wave-dark: #004c6d;
	--gradient-start: #0077be;
	--gradient-end: #00bcd4;
}

body {
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	min-height: 100vh;
}

.container {
	animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

h1 {
	animation: fadeInDown 1s ease-out;
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}

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

.card {
	border: none;
	border-radius: 20px;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	background: white;
	overflow: hidden;
	position: relative;
}

	.card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 5px;
		background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
		transform: scaleX(0);
		transition: transform 0.4s ease;
	}

	.card:hover {
		transform: translateY(-15px) scale(1.02);
		box-shadow: 0 20px 60px rgba(0, 119, 190, 0.25) !important;
	}

		.card:hover::before {
			transform: scaleX(1);
		}

.border-primary.border-4 {
	border: 3px solid var(--wave-blue) !important;
	box-shadow: 0 0 30px rgba(0, 119, 190, 0.3);
}

	.border-primary.border-4::before {
		background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
		height: 8px;
		transform: scaleX(1);
	}

.badge {
	border-radius: 50px;
	padding: 8px 20px;
	font-size: 0.9rem;
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}
}

.display-5 {
	color: var(--wave-dark);
	transition: all 0.3s ease;
}

.card:hover .display-5 {
	transform: scale(1.05);
	color: var(--wave-blue);
}

.btn {
	border-radius: 50px;
	padding: 12px 30px;
	font-weight: 600;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

	.btn::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.3);
		transform: translate(-50%, -50%);
		transition: width 0.6s, height 0.6s;
	}

	.btn:hover::before {
		width: 300px;
		height: 300px;
	}

	.btn:hover {
		transform: scale(1.05);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	}

.btn-primary {
	background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	border: none;
}

.btn-outline-primary {
	border: 2px solid var(--wave-blue);
	color: var(--wave-blue);
}

	.btn-outline-primary:hover {
		background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
		border-color: transparent;
		color: white;
	}

.bi-check-circle-fill {
	transition: all 0.3s ease;
}

.card:hover .bi-check-circle-fill {
	transform: scale(1.2);
}

ul li {
	transition: all 0.3s ease;
}

.card:hover ul li {
	transform: translateX(5px);
}

.spinner-border {
	width: 3rem;
	height: 3rem;
}

@media (max-width: 768px) {
	.card:hover {
		transform: translateY(-10px) scale(1.01);
	}
}