/**
 * =========================================================
 * DX Areas We Serve
 * =========================================================
 */


/* =========================================================
   BASE
   ========================================================= */

.dx-areas {
	position: relative;
	width: 100%;

	background: #ffffff;
}

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


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

.dx-areas__container {
	width: 100%;
	max-width: 1440px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
	padding: 28px 40px 35px;
}


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

.dx-areas__heading {
	margin: 0 0 18px;
	padding: 0;

	color: #102653;

	font-family: inherit;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;

	text-align: center;
}


/* =========================================================
   MAIN LOCATIONS
   ========================================================= */

.dx-areas__grid {
	display: grid;

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

	width: 100%;

	border: 1px solid #e1e5eb;
	border-radius: 10px;

	overflow: hidden;

	background: #ffffff;
}


/* =========================================================
   LOCATION
   ========================================================= */

.dx-areas__location {
	position: relative;

	min-height: 48px;

	padding: 12px 15px;

	display: flex;
	align-items: center;

	gap: 10px;

	color: #102653;

	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;

	text-decoration: none;

	background: #ffffff;
}


.dx-areas__location-icon {
	flex: 0 0 16px;

	width: 16px;
	height: 20px;

	display: flex;
	align-items: center;
	justify-content: center;
}


.dx-areas__location-icon svg {
	display: block;

	width: 17px;
	height: 17px;

	fill: none;
	stroke: #f4511e;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


.dx-areas__location-name {
	display: block;

	min-width: 0;

	overflow: hidden;

	text-overflow: ellipsis;
	white-space: nowrap;
}


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

.dx-areas__location:nth-child(5n + 1),
.dx-areas__location:nth-child(5n + 2),
.dx-areas__location:nth-child(5n + 3),
.dx-areas__location:nth-child(5n + 4) {
	border-right: 1px solid #e1e5eb;
}


/*
 * Horizontal divider after first row.
 */
.dx-areas__location:nth-child(-n + 5) {
	border-bottom: 1px solid #e1e5eb;
}


/* =========================================================
   LINK HOVER
   ========================================================= */

.dx-areas__location--link {
	cursor: pointer;

	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}


.dx-areas__location--link:hover {
	color: #f4511e;

	background: #fffaf7;
}


.dx-areas__location--link:hover
.dx-areas__location-name {
	color: #f4511e;
}


/* =========================================================
   MORE BUTTON
   ========================================================= */

.dx-areas__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 8px;

	margin: 18px auto 0;
	padding: 7px 15px;

	color: #102653;

	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	line-height: 20px;
	background: #FD9800;
	border: 0;

	cursor: pointer;

	transition:
		color 0.2s ease;
}


.dx-areas__more:hover {
	color: #fff;
}


.dx-areas__more-arrow {
	width: 17px;
	height: 17px;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: transform 0.3s ease;
}


.dx-areas__more-arrow svg {
	display: block;

	width: 15px;
	height: 15px;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* =========================================================
   EXPANDED AREA
   ========================================================= */

.dx-areas__expanded {
	max-height: 0;

	overflow: hidden;

	opacity: 0;
	width: 100%;
	transition:
		max-height 0.45s ease,
		opacity 0.3s ease;
}


.dx-areas__expanded.is-open {
	opacity: 1;
}


.dx-areas__expanded-heading {
	margin: 30px 0 15px;
	padding: 0;

	color: #102653;

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

	text-align: center;
}


.dx-areas__expanded-grid {
	display: grid;

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

	border: 1px solid #e1e5eb;
	border-radius: 10px;

	overflow: hidden;

	background: #ffffff;
}


/* =========================================================
   EXPANDED GRID DIVIDERS
   ========================================================= */

.dx-areas__expanded-grid .dx-areas__location {
	min-height: 46px;
}


.dx-areas__expanded-grid .dx-areas__location:nth-child(5n + 1),
.dx-areas__expanded-grid .dx-areas__location:nth-child(5n + 2),
.dx-areas__expanded-grid .dx-areas__location:nth-child(5n + 3),
.dx-areas__expanded-grid .dx-areas__location:nth-child(5n + 4) {
	border-right: 1px solid #e1e5eb;
}


.dx-areas__expanded-grid .dx-areas__location:nth-child(-n + 5) {
	border-bottom: 1px solid #e1e5eb;
}


/* =========================================================
   OPEN STATE
   ========================================================= */

.dx-areas__more.is-open
.dx-areas__more-arrow {
	transform: rotate(180deg);
}



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

@media (max-width: 1024px) {

	.dx-areas__container {
		padding: 25px 30px 35px;
	}


	.dx-areas__grid,
	.dx-areas__expanded-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}


	.dx-areas__location:nth-child(n) {
		border-right: 0;
		border-bottom: 1px solid #e1e5eb;
	}


	.dx-areas__location:nth-child(3n + 1),
	.dx-areas__location:nth-child(3n + 2) {
		border-right: 1px solid #e1e5eb;
	}


	.dx-areas__location:nth-last-child(-n + 3) {
		border-bottom: 0;
	}


	.dx-areas__heading {
		font-size: 25px;
	}

}


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

@media (max-width: 767px) {

	.dx-areas__container {
		padding: 24px 20px 32px;
	}


	.dx-areas__heading {
		margin-bottom: 15px;

		font-size: 23px;
	}


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

		border-radius: 8px;
	}


	.dx-areas__location {
		min-height: 46px;

		padding: 11px 12px;

		gap: 7px;

		font-size: 12px;
	}


	.dx-areas__location-icon {
		flex-basis: 14px;

		width: 14px;
		height: 18px;
	}


	.dx-areas__location-icon svg {
		width: 15px;
		height: 15px;
	}


	/*
	 * Mobile grid dividers.
	 */

	.dx-areas__location:nth-child(n) {
		border-right: 0;
		border-bottom: 1px solid #e1e5eb;
	}


	.dx-areas__location:nth-child(2n + 1) {
		border-right: 1px solid #e1e5eb;
	}


	.dx-areas__location:nth-last-child(-n + 2) {
		border-bottom: 0;
	}


	.dx-areas__more {
		margin-top: 14px;

		font-size: 12px;
	}


	.dx-areas__expanded-heading {
		margin-top: 25px;
		margin-bottom: 13px;

		font-size: 19px;
	}

}


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

@media (max-width: 480px) {

	.dx-areas__container {
		padding-left: 15px;
		padding-right: 15px;
	}


	.dx-areas__heading {
		font-size: 21px;
	}


	.dx-areas__location {
		min-height: 44px;

		padding: 10px 9px;

		font-size: 11px;
	}


	.dx-areas__location-icon {
		flex-basis: 13px;

		width: 13px;
	}


	.dx-areas__location-icon svg {
		width: 14px;
		height: 14px;
	}

}