/***** CONTACT US *****/
.contact-us {
	position: relative;
	z-index: 10;
	overflow: hidden;
}

.contact-us::after {
	content: '';
	background-image: url('../../images/services_all/contant-form-mobile.png');
	position: absolute;
	background-repeat: no-repeat;
	background-size: cover;
	right: 0;
	bottom: -80px;
	width: 100%;
	height: 310px;
	z-index: -1;
}

.contact-us-wrapper {
	gap: 4px;
}

.contact-icons .form-check {
	padding-left: 0;
	margin: 0;
}

.contact-icons .form-check:hover .form-check-label {
	background-color: var(--primary-blue);
	color: white;
	border-color: var(--primary-blue) !important;
}

.contact-icons .form-check:hover .form-check-label i {
	color: white;
}

.contact-icons .form-check-label {
	transition: all .2s ease;
	display: block;
}

.contact-icons .form-check-label i {
	color: var(--grey-2);
	font-size: 32px;
}

.contact-icons .form-check-input:checked ~ .form-check-label {
	background-color: var(--primary-blue);
	color: white;
	border-color: var(--primary-blue) !important;
}

.form-check-input[type=checkbox] {
	border-width: 2px;
}

.contact-icons .form-check-input:checked ~ .form-check-label i {
	color: white;
}

.contact-us .form-control {
	border-radius: 0;
	padding: 13px 16px;
}

.contact-us .form-control:focus {
	box-shadow: none;
	border-color: var(--primary-blue);
	color: var(--secondary-blue-dark);
}

.contact-form-button {
	width: 100%;
}

.option {
	display: none;
}

.option .form-check {
	display: flex;
	align-items: center;
	gap: 10px;
	transition: color .2s ease;
}

.contact-options .form-check:hover label,
.contact-options .form-check:hover input {
	cursor: pointer;
}

.option .form-check .form-check-label {
	color: var(--grey-text-color); 
	transition: color .2s ease;
}

.option .form-check:hover .form-check-label {
	color: var(--primary-blue); 
}

.option .form-check-input:checked {
	background-color: var(--primary-blue);
}

.option .form-check-input:checked + .form-check-label {
	color: black;
}

.option .form-check:hover .form-check-input:checked + .form-check-label {
	color: var(--primary-blue);
}

.option .form-check-input:focus {
	box-shadow: none;
	border-color: var(--primary-blue);
}

.contact-options[data-active-button = 'web-mobile-software'] .option-development {
	display: block
}

.contact-options[data-active-button = 'business-support'] .option-business {
	display: block
}

.contact-options[data-active-button = 'brand-identity'] .option-brand-identity {
	display: block
}

.contact-options[data-active-button = 'marketing-and-content'] .option-marketing {
	display: block
}


.contact-info-section .col-12 {
	max-width: 450px;
	margin: 0 auto;
}

.contact-info-section .info-box-middle {
	border: 1px solid var(--grey-2);
	border-left: 0;
	border-right: 0;
}

.contact-info-section .info-box .icon {
	font-size: 24px;
	color: var(--primary-blue);
}

.contact-info-section .info-box .info-title {
	font-size: 18px;
}

@media (min-width: 768px) {
	.contact-us::after {
		background-image: url('../../images/services_all/contant-form.png');
		right: -30%;
		top: 0;
		bottom: auto;
		width: 540px;
		height: 100%;
	}

	.contact-us-wrapper {
		gap: 50px;
	}

	.contact-info-section .info-box .icon {
		font-size: 28px;
	}

	.contact-info-section .info-box .info-title {
		font-size: 18px;
	}

	.contact-info-section .info-box-middle {
		border: 1px solid var(--grey-2);
		border-top: 0;
		border-bottom: 0;
	}
}

@media (min-width: 1024px) {
	.contact-us::after {
		right: -20%;
	}

	.contact-us-wrapper {
		gap: 80px;
	}
}

@media (min-width: 1200px) {
	.contact-us-wrapper {
		gap: 110px;
	}

	.contact-us::after {
		right: -10%;
	}

	.contact-form-button {
		width: auto;
	}

	.contact-info-section .info-box .icon {
		font-size: 32px;
	}
}


@media (min-width: 1600px) {
	.contact-us::after {
		right: 0%;
	}
}