.component-contact .contact-content-container {
	background-color: var(--global--color-light-gray);
}

.component-contact .contact-icon-container {
	background-color: var(--global--color-primary);
	text-align: center;
}

.component-contact .contact-title {
	color: var(--global--color-primary-dark);
	margin-bottom: 12px;
	letter-spacing: 0.01em;
}

.component-contact .contact-title-dark {
	color: var(--global--color-primary-dark);
}

.component-contact .contact-title-light {
	color: var(--global--color-primary);
}

.component-contact .contact-text {
	color: var(--global--color-dark-gray);
	font-size: 20px;
	line-height: 1.5;
}

@media (min-width: 992px) {
	.component-contact .contact-icon-container {
		height: 100%;
		max-width: 402px;
		position: absolute;
		width: 100%;
		right:0;
	}
	.component-contact .contact-icon-container,
	.component-contact .contact-content-container {
		padding-bottom: 100px;
		padding-top: 100px;
	}
	.component-contact .contact-content {
		max-width: calc(100% - 402px);
		min-height: 180px;
	}
	.component-contact .contact-title {
		font-size: 34px;
		line-height: 42px;
	}
}

@media (min-width: 1200px) {
	.component-contact .contact-content {
		max-width: 746px;
	}
}

@media (max-width: 991.98px) {
	.component-contact .contact-icon-container {
		padding-bottom: 45px;
		padding-top: 45px;
	}
	.component-contact .contact-content-container {
		padding-top: 36px;
		padding-bottom: 36px;
	}
	.component-contact .contact-title {
		font-size: 28px;
		line-height: 36px;
	}
}

@media (max-width: 991.98px) and (min-width: 576px) {
	.component-contact .contact-content-container {
		padding-left: 12px;
		padding-right: 12px;
	}
}