.contactSection {
	display: flex;
	padding: 0px var(--deviceWidthPaddingSize);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	align-self: stretch;
	background: var(--white);
}

.contactSection h2 {
	color: #002518;
	font-family: "Literata";
	font-size: var(--xXLargeSize);
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.contactSection .contactSectionContainer {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 100px;
	align-self: stretch;
}

.contactSection .contactSectionContainer .contactDetail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	flex: 1 0 0;
}

.contactSection .contactSectionContainer .contactDetail .contactDetailImg {
	width: 50px;
	height: 50px;
}

.contactSection .contactSectionContainer .contactDetail .contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0px;
	flex: 1 0 0;
}

.contactSection .contactSectionContainer .contactDetail .contact p.contactName,
.contactSection .contactSectionContainer .contactDetail .contact p.contactInfo {
	align-self: stretch;
	color: var(--brandGreen);
	text-align: center;
	font-family: "Lato";
	font-size: var(--largeSize);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.contactSection .contactSectionContainer .contactDetail .contact p.contactInfo {
	font-size: var(--mediumSize);
}

.contactSection
	.contactSectionContainer
	.contactDetail
	.contact
	p.contactInfo
	a {
	color: var(--brandGreen);
	text-decoration: underline;
}

/* Tablet */
@media (max-width: 768px) {
	.contactSection .contactSectionContainer {
		flex-wrap: wrap;
		gap: 20px;
	}

	.contactSection .contactSectionContainer .contactDetail {
		min-width: calc(100% / 3);
		align-self: center;
	}
}

/* Mobile  */
@media (max-width: 600px) {
	.contactSection .contactSectionContainer .contactDetail {
		min-width: 50%;
		align-self: center;
	}
}