.capabilities {
	text-align: center;
	background-color: #ffffff;
}

.capabilities .capabilities__header {
	max-width: 900px;
	margin: 0 auto 52px;
}

.capabilities .capabilities__header h2 {
	color: #032169;
}

.capabilities .capabilities__header .section__subtitle {
	margin: 20px auto 0;
	max-width: 877px;
}

.capabilities .capabilities__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 43px 37px;
	text-align: left;
}

.capabilities .capability-card {
	border-radius: 20px;
	padding: 41px 33px;
	background: linear-gradient(180deg, #f5f7ff 0%, #dce3ff 100%);
	box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.04);
	transition: 1s ease-in-out;
	text-decoration: none;
}

.capabilities .capability-card:hover {
	background: linear-gradient(275deg, #00309D 0%, #234CC6 57.32%, #002882 100%);
}

.capabilities .capability-card:hover>h4,
.capabilities .capability-card:hover>p {
	color: #fff;
}

.capabilities .capability-card:hover .capability-card__icon {
	background-color: #fff;
	background-image: unset;
}

.capabilities .capability-card:hover .capability-card__icon svg path {
	fill: #00309D;
}

.capabilities .capability-card--dark {
	background: linear-gradient(-82.24deg,
			rgb(0, 48, 157) 0%,
			rgb(35, 76, 198) 57.32%,
			rgb(0, 40, 130) 100%);
	color: #ffffff;
}

.capabilities .capability-card--dark p {
	color: #f4f4ff;
}

.capabilities .capability-card__icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10.6px;
	background-image: linear-gradient(-85deg,
			rgb(0, 48, 157) 0%,
			rgb(35, 76, 198) 57.32%,
			rgb(0, 40, 130) 100%);
	box-shadow: 0px 6px 14px rgba(13, 76, 205, 0.28);
	color: #ffffff;
	font-size: 22px;
	margin-bottom: 24px;
}

.capabilities .capability-card--dark .capability-card__icon {
	background-image: none;
	background-color: #ffffff;
	color: #0d4ccd;
}

.capabilities .capability-card h4 {
	font-size: 20px;
	font-weight: 500;
	color: #2d2d2d;
	margin-bottom: 10px;
}

.capabilities .capability-card--dark h4 {
	color: #ffffff;
}

.capabilities .capability-card p {
	font-size: 15px;
	line-height: 1.6;
	color: #3a3e50;
}

@media (max-width: 991px) {
	.capabilities .capabilities__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}

	.capabilities .capability-card {
		padding: 34px 28px;
	}
}

@media (max-width: 576px) {
	.capabilities .capabilities__grid {
		grid-template-columns: repeat(1, 1fr);
		gap: 20px;
	}
	.capabilities .capabilities__header {
		margin: 0 auto 30px;
	}
}