/*
 * Page: what-we-do
 * WordPress Page ID: 269
 * Load this file ONLY on this specific page
 */

.wrapper.clearfix {
display:none;
}

.tp-info-card-section {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 20px;
	margin:-45px 0 40px 0;
	padding:0;
	box-sizing: border-box;
}

.tp-info-card {
	flex: 1 1 300px;
	z-index:-10;
}

.tp-info-card-content {
	width:352px;
	height:160px;
	border-radius: 12px;
	padding: 25px;
	text-align: center;
	font-size: 16px;
	color:#666;
	line-height: 1.6;
	border:solid 1px #f5f5f5;
}

.tp-blue-bg {
	background-color: #ebf9fb;
}

.tp-neutral-bg {
	background-color: #f5f5f5;
}

@media (max-width: 1269px) {
	.tp-info-card-content {
		width:297px;
		height:120px;
		padding: 20px;
		font-size: 13px;
	}
}

@media (max-width: 1019px) {
	.tp-info-card-content {
		width:236px;
		height:140px;
	}
}

@media (max-width: 762px) {
	.tp-info-card-content {
		width:212px;
		height:150px;
		font-size: 12px;
	}
}

@media (max-width: 683px) {
	.tp-info-card-content {
		width:170px;
		height:190px;
	}
}

@media (max-width: 573px) {
	.tp-info-card-content {
		width:150px;
		height:230px;
	}
}

@media (max-width: 512px) {
	.tp-info-card-content {
		width:140px;
		height:180px;
		padding: 10px;
	}
}

@media (max-width: 434px) {
	.tp-info-card-content {
		width:120px;
		height:210px;
		padding: 5px;
	}
}

@media (max-width: 397px) {
	.tp-info-card-content {
		width:100px;
		height:260px;
		padding: 5px;
	}
}

/* v24: stack the three cards under the diagram, full width, readable type.
   Keep this block last so it wins over the shrinking rules above. */
@media (max-width: 767px) {
	.tp-info-card-section {
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		gap: 16px;
		margin: 10px 0 30px;
	}

	.tp-info-card {
		flex: 0 0 auto;
		width: 100%;
		max-width: 340px;
	}

	.tp-info-card-content {
		width: 100%;
		height: auto;
		padding: 22px 20px;
		font-size: 16px;
	}

	.tp-info-card-content p {
		font-size: 16px;
		line-height: 1.5;
	}
}