/* =========================================================
 * Tech Resolve — Website Why Us
 * ======================================================= */

.tr-website-why-us {
	padding:
		clamp(105px, 10vw, 175px)
		var(--tr-gutter);

	color: #0c1912;

	background: #f4f6f3;
}


.tr-website-why-us__shell {
	width: min(100%, var(--tr-container));
	margin: 0 auto;
}


/* =========================================================
 * Header
 * ======================================================= */

.tr-website-why-us__header {
	display: grid;
	grid-template-columns:
		minmax(0, 1.12fr)
		minmax(330px, .88fr);
	align-items: end;
	gap: clamp(50px, 8vw, 120px);

	margin-bottom: 65px;
}


.tr-website-why-us__eyebrow {
	display: block;

	margin-bottom: 17px;

	color: #08b95d;

	font-size: 9px;
	font-weight: 800;
	letter-spacing: .15em;
}


.tr-website-why-us__header h2 {
	max-width: 870px;
	margin: 0;

	font-size: clamp(43px, 5.2vw, 74px);
	font-weight: 800;
	line-height: .99;
	letter-spacing: -.053em;
}


.tr-website-why-us__header > p {
	margin: 0;

	color: #69756e;

	font-size: 14px;
	line-height: 1.78;
}


/* =========================================================
 * Comparison
 * ======================================================= */

.tr-website-why-us__comparison {
	overflow: hidden;

	background: #fff;

	border: 1px solid #dfe5e1;
	border-radius: 23px;

	box-shadow:
		0 30px 90px rgba(10,28,18,.06);
}


.tr-website-why-us__comparison-head {
	display: grid;
	grid-template-columns:
		1fr
		1fr;

	margin-left: 70px;

	background: #f8faf8;

	border-bottom: 1px solid #e3e8e5;
}


.tr-website-why-us__comparison-head > div {
	padding: 17px 22px;

	color: #929d97;

	font-size: 8px;
	font-weight: 800;
	letter-spacing: .13em;
}


.tr-website-why-us__comparison-head > div:last-child {
	color: #08b95d;

	border-left: 1px solid #e3e8e5;
}


/* =========================================================
 * Rows
 * ======================================================= */

.tr-website-why-us__row {
	display: grid;
	grid-template-columns:
		48px
		minmax(0, 1fr)
		80px
		minmax(0, 1fr);
	align-items: center;
	gap: 11px;

	min-height: 92px;
	padding: 0 21px;

	border-bottom: 1px solid #e5e9e7;

	transition:
		background 180ms ease;
}


.tr-website-why-us__row:hover {
	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(25,224,120,.045)
		);
}


.tr-website-why-us__number {
	color: #08b95d;

	font-size: 9px;
	font-weight: 800;
}


.tr-website-why-us__typical,
.tr-website-why-us__techresolve {
	display: flex;
	align-items: center;
	gap: 11px;

	font-size: 12px;
}


.tr-website-why-us__typical {
	color: #8a948f;
}


.tr-website-why-us__typical > i {
	width: 7px;
	height: 7px;

	background: #d7ddda;

	border-radius: 50%;
}


.tr-website-why-us__techresolve {
	color: #14231b;
}


.tr-website-why-us__techresolve > i {
	width: 7px;
	height: 7px;

	background: #19e078;

	border-radius: 50%;

	box-shadow:
		0 0 0 5px rgba(25,224,120,.08);
}


.tr-website-why-us__techresolve strong {
	font-weight: 700;
}


/* =========================================================
 * Switch
 * ======================================================= */

.tr-website-why-us__switch {
	display: flex;
	align-items: center;
	gap: 8px;
}


.tr-website-why-us__switch > span,
.tr-website-why-us__switch > i {
	width: 6px;
	height: 6px;

	border-radius: 50%;
}


.tr-website-why-us__switch > span {
	background: #d4dcd7;
}


.tr-website-why-us__switch > i {
	background: #19e078;
}


.tr-website-why-us__switch::before {
	content: "";

	flex: 1;

	height: 1px;

	background:
		linear-gradient(
			to right,
			#d8dfdb,
			#19e078
		);
}


/* =========================================================
 * Closing
 * ======================================================= */

.tr-website-why-us__closing {
	display: grid;
	grid-template-columns:
		minmax(200px, .35fr)
		minmax(0, 1fr);
	align-items: center;
	gap: 40px;

	padding:
		clamp(30px, 4vw, 50px);

	background:
		#07120e;
}


.tr-website-why-us__closing > div {
	display: flex;
	align-items: center;
	gap: 10px;
}


.tr-website-why-us__closing > div > span {
	width: 7px;
	height: 7px;

	background: #19e078;

	border-radius: 50%;

	box-shadow:
		0 0 0 6px rgba(25,224,120,.07);
}


.tr-website-why-us__closing > div strong {
	color: #19e078;

	font-size: 8px;
	letter-spacing: .13em;
}


.tr-website-why-us__closing h3 {
	max-width: 790px;
	margin: 0;

	color: #fff;

	font-size: clamp(26px, 3.4vw, 48px);
	font-weight: 750;
	line-height: 1.04;
	letter-spacing: -.04em;
}


@media (max-width: 780px) {

	.tr-website-why-us__header,
	.tr-website-why-us__closing {
		grid-template-columns: 1fr;
	}


	.tr-website-why-us__comparison-head {
		display: none;
	}


	.tr-website-why-us__row {
		grid-template-columns:
			32px
			1fr;
	}


	.tr-website-why-us__switch {
		display: none;
	}


	.tr-website-why-us__techresolve {
		grid-column: 2;
	}

}