.f-black h2,
.f-black p {
	color: black !important;
}

.auth-buttons {
	display: flex;
	gap: 1rem;
}

.btn {
	padding: 0.7rem 1rem;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 500;
}

.btn-primary {
	background-color: #2563eb;
	color: white !important;
	border: none;
	margin: 0 auto;
}

.btn-secondary {
	color: white;
	background: none;
	border: none;
}

.services-container {
	display: flex;
	background: linear-gradient(to right, rgb(15 23 42/var(--tw-bg-opacity, 1)) 50%, #f8f9fa 50%);
	background-color: #f8f9fa;
}

.service-card {
	flex: 1;
	padding: 5rem 2.5rem 0px 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	text-align: center;

}

.service-card.dark {
	color: white;
}

.service-card h2 {
	font-size: 2.5rem;
	font-weight: 600;
}

.service-card p {
	font-size: 16px;
	line-height: 1.6;
	opacity: 0.9;
	height: 7rem;
	text-align: center;
}

.screenshot {
	width: 100%;
	border-radius: 9px 9px 0 0;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
	.services-container {
		flex-direction: column;

		background: linear-gradient(to bottom, rgb(15 23 42/var(--tw-bg-opacity, 1)) 50%, #f8f9fa 50%);

	}

	.service-card {

		padding: 4rem 1rem;

	}

	.nav-links {
		display: none;
	}
}

@media (min-width: 1200px) {
	.services-container {

		margin: 0 6rem;
	}
}