/**
 * =========================================================
 * DX Moving Services
 * =========================================================
 */

.dx-moving-services {
	width: 100%;
	background: #ffffff;
}

.dx-moving-services *,
.dx-moving-services *::before,
.dx-moving-services *::after {
	box-sizing: border-box;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.dx-moving-services__container {
	width: 100%;
	max-width: 1440px;

	margin: 0 auto;
	padding:  40px 40px;
}


/* =========================================================
   HEADING
   ========================================================= */

.dx-moving-services__heading {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 22px;

	margin-bottom: 4px;
}


.dx-moving-services__heading-line {
	width: 42px;
	height: 2px;

	flex: 0 0 42px;

	background: #f4511e;

	border-radius: 10px;
}


.dx-moving-services__heading h2 {
	margin: 0;
	padding: 0;

	color: #102653;

	font-family: inherit;
	font-size: 29px;
	font-weight: 800;
	line-height: 1.2;

	letter-spacing: -0.025em;

	text-align: center;
}


/* =========================================================
   SUBHEADING
   ========================================================= */

.dx-moving-services__subheading {
	margin: 0 0 14px;

	color: #52617a;

	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;

	text-align: center;
}


/* =========================================================
   GRID
   ========================================================= */

.dx-moving-services__grid {
	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 16px;
}


/* =========================================================
   CARD
   ========================================================= */

.dx-moving-services__card {
	display: flex;
	flex-direction: column;

	min-width: 0;

	background: #ffffff;

	border: 1px solid #dfe4e9;
	border-radius: 7px;

	overflow: hidden;

	text-decoration: none;

	box-shadow:
		0 2px 7px rgba(16, 38, 83, 0.025);

	transition:
		transform 0.22s ease,
		box-shadow 0.22s ease,
		border-color 0.22s ease;
}


.dx-moving-services__card--link {
	cursor: pointer;
}


.dx-moving-services__card--link:hover {
	transform: translateY(-3px);

	border-color: #d6dce3;

	box-shadow:
		0 9px 20px rgba(16, 38, 83, 0.10);
}


.dx-moving-services__card--link:focus-visible {
	outline: 2px solid #f4511e;
	outline-offset: 3px;
}


/* =========================================================
   IMAGE
   ========================================================= */

.dx-moving-services__image {
	width: 100%;
	height: 150px;

	background: #edf0f3;

	overflow: hidden;
}


.dx-moving-services__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transition: transform 0.35s ease;
}


.dx-moving-services__card--link:hover .dx-moving-services__image img {
	transform: scale(1.025);
}


/* =========================================================
   CONTENT
   ========================================================= */

.dx-moving-services__content {
	padding: 13px 17px 16px;

	background: #ffffff;
}


.dx-moving-services__content h3 {
	margin: 0 0 7px;
	padding: 0;

	color: #102653;

	font-family: inherit;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.25;

	letter-spacing: -0.015em;
}


.dx-moving-services__content p {
	margin: 0;
	padding: 0;

	color: #4e5c74;

	font-size: 15px;
	font-weight: 500;
	line-height: 1.55;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

	.dx-moving-services__container {
		max-width: 900px;

		padding-left: 20px;
		padding-right: 20px;
	}


	.dx-moving-services__grid {
		gap: 13px;
	}


	.dx-moving-services__image {
		height: 135px;
	}


	.dx-moving-services__content {
		padding: 12px 14px 15px;
	}


	.dx-moving-services__content h3 {
		font-size: 16px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.dx-moving-services__container {
		padding: 0 15px 30px;
	}


	.dx-moving-services__heading {
		gap: 12px;
	}


	.dx-moving-services__heading-line {
		width: 28px;
		flex-basis: 28px;
	}


	.dx-moving-services__heading h2 {
		font-size: 24px;
	}


	.dx-moving-services__subheading {
		margin-bottom: 16px;

		font-size: 14px;
	}


	.dx-moving-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: 10px;
	}


	.dx-moving-services__image {
		height: 125px;
	}


	.dx-moving-services__content {
		padding: 11px 12px 13px;
	}


	.dx-moving-services__content h3 {
		font-size: 15px;
	}


	.dx-moving-services__content p {
		font-size: 14px;
		line-height: 1.5;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

	.dx-moving-services__container {
		padding-left: 12px;
		padding-right: 12px;
	}


	.dx-moving-services__heading {
		gap: 9px;
	}


	.dx-moving-services__heading-line {
		width: 22px;
		flex-basis: 22px;

		height: 2px;
	}


	.dx-moving-services__heading h2 {
		font-size: 21px;
	}


	.dx-moving-services__subheading {
		font-size: 14px;
	}


	.dx-moving-services__grid {
		gap: 8px;
	}


	.dx-moving-services__image {
		height: 105px;
	}


	.dx-moving-services__content {
		padding: 10px 10px 12px;
	}


	.dx-moving-services__content h3 {
		margin-bottom: 5px;

		font-size: 14px;
	}


	.dx-moving-services__content p {
		font-size: 14px;
		line-height: 1.45;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.dx-moving-services__card,
	.dx-moving-services__image img {
		transition: none;
	}

}