:root {
	--mobile-bg: #49110f;
	--performance-bg: #3b462a;
	--custom-design-bg: #264875;
	--user-exp-bg: #983348;
	--seo-design-bg: #16292e;
	--pwa-design-bg: #015977;
}

/**********************************************************/
/**********************************************************/
/* ------------------- */
main {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: "features-section";
}
/**********************************************************/

/**********************************************************/

.features-section {
	grid-area: features-section;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(100vh, auto);
	grid-template-areas: "main-content-container";
}

.main-content-container {
	grid-area: main-content-container;
	background-color: rgb(106, 86, 86);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: "main-content";
	overflow: hidden;
}

/* ****************************** */
/* ****************************** */

.main-content h2 {
	font-size: var(--h2-font-size);
	font-family: var(--font-family-h2);
	text-align: center;
	margin-bottom: 1.5em;
	line-height: var(--line-height);
}

.main-content h3 {
	font-size: var(--h3-font-size);
	font-family: var(--font-family-h3);
	line-height: var(--line-height);
	text-align: center;
	margin-bottom: 1em;
	color: var(--font-colour-dark);
}

.main-content p {
	font-size: var(--p-font-size);
	font-family: var(--font-family-p);
	line-height: var(--line-height);
	margin-bottom: 1em;
	color: var(--font-colour-dark);
}

/* ****************************** */
/* ****************************** */

.main-content {
	grid-area: main-content;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(60em, auto) auto;
	grid-template-areas:
		"main-container-heading-container"
		"buttons-container";
	justify-content: center;
	align-content: start;
}

.main-content-heading-container {
	background-color: var(--heading-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	padding: 5em 1em;
}

.main-content-heading-container h2 {
	color: var(--font-colour-light);
}

.main-content-heading-container p {
	max-width: 38em;
	text-align: center;
	color: var(--font-colour-light);
}

.main-content-buttons-container {
	background-color: var(--main-bg-colour);
	grid-area: buttons-container;
	display: grid;
	grid-template-columns: minmax(auto, 60em) minmax(auto, 60em) minmax(
			auto,
			60em
		);
	grid-template-rows:
		minmax(60em, auto)
		minmax(60em, auto);
	grid-template-areas:
		"buttons-container-card-1 buttons-container-card-2 buttons-container-card-3"
		"buttons-container-card-4 buttons-container-card-5 buttons-container-card-6";
	justify-content: center;
	align-content: start;
	gap: 3em;
	padding: 3em;
}

.buttons-container-card-img-1,
.buttons-container-card-img-2,
.buttons-container-card-img-3,
.buttons-container-card-img-4,
.buttons-container-card-img-5,
.buttons-container-card-img-6 {
	max-width: 20em;
	border-radius: 50%;
	margin-bottom: 5em;
}

.buttons-container-card-img-1 {
	border: 0.3em solid #f78b03;
}
.buttons-container-card-img-2 {
	border: 0.3em solid #e1cdad;
}
.buttons-container-card-img-3 {
	border: 0.3em solid #b1cdce;
}
.buttons-container-card-img-4 {
	border: 0.3em solid #f8faf9;
}
.buttons-container-card-img-5 {
	border: 0.3em solid #c1dec8;
}
.buttons-container-card-img-6 {
	border: 0.3em solid #84c7c0;
}

.buttons-container-card-img-1 img,
.buttons-container-card-img-2 img,
.buttons-container-card-img-3 img,
.buttons-container-card-img-4 img,
.buttons-container-card-img-5 img,
.buttons-container-card-img-6 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
}

.buttons-container-card-1 {
	grid-area: buttons-container-card-1;
	background-color: var(--mobile-bg);
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 5em 1em;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	border: 0.3em solid #f78b03;
}

.buttons-container-card-2 {
	grid-area: buttons-container-card-2;
	background-color: var(--performance-bg);
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 5em 1em;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	border: 0.3em solid #e1cdad;
}
.buttons-container-card-3 {
	grid-area: buttons-container-card-3;
	background-color: var(--custom-design-bg);
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 5em 1em;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	border: 0.3em solid #b1cdce;
}
.buttons-container-card-4 {
	grid-area: buttons-container-card-4;
	background-color: var(--user-exp-bg);
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 5em 1em;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	border: 0.3em solid #f8faf9;
}
.buttons-container-card-5 {
	grid-area: buttons-container-card-5;
	background-color: var(--seo-design-bg);
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 5em 1em;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	border: 0.3em solid #c1dec8;
}
.buttons-container-card-6 {
	grid-area: buttons-container-card-6;
	background-color: var(--pwa-design-bg);
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 5em 1em;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	border: 0.3em solid #84c7c0;
}

.buttons-container-card-1,
.buttons-container-card-2,
.buttons-container-card-3,
.buttons-container-card-4,
.buttons-container-card-5,
.buttons-container-card-6 {
	opacity: 0;
}

.buttons-container-card-1 h3,
.buttons-container-card-2 h3,
.buttons-container-card-3 h3,
.buttons-container-card-4 h3,
.buttons-container-card-5 h3,
.buttons-container-card-6 h3 {
	color: var(--font-colour-light);
	margin-bottom: 1.5em;
}

.buttons-container-card-1 button,
.buttons-container-card-2 button,
.buttons-container-card-3 button,
.buttons-container-card-4 button,
.buttons-container-card-5 button,
.buttons-container-card-6 button {
	padding: 1em;
	border-radius: 20px;
	border: none;
	font-size: var(--mq-a-font-size);
	color: var(--font-colour-dark);
	cursor: pointer;
}

.buttons-container-card-1 button,
.buttons-container-card-2 button,
.buttons-container-card-3 button,
.buttons-container-card-4 button,
.buttons-container-card-5 button,
.buttons-container-card-6 button {
	color: var(--font-colour-dark);
	background-color: var(--content-bg-colour);
	font-family: var(--font-family-p);
	transition: all 0.3s ease-in-out;
}

.buttons-container-card-1 button:hover,
.buttons-container-card-2 button:hover,
.buttons-container-card-3 button:hover,
.buttons-container-card-4 button:hover,
.buttons-container-card-5 button:hover,
.buttons-container-card-6 button:hover {
	color: var(--content-bg-colour);
	background-color: var(--font-colour-dark);
}

/* ****************************** */
/* ****************************** */

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes templateOpen {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0%);
	}
}

@keyframes templateClose {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(100%);
	}
}

@media (max-width: 1440px) {
	.main-content h2 {
		font-size: var(--mq-h2-font-size);
	}

	.main-content h3 {
		font-size: var(--mq-h3-font-size);
	}

	.main-content p {
		font-size: var(--mq-p-font-size);
	}

	.main-content {
		grid-template-rows: minmax(40em, auto) auto;
	}

	.main-content-buttons-container {
		background-color: var(--main-bg-colour);
		grid-area: buttons-container;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows:
			minmax(35em, auto)
			minmax(35em, auto);
		grid-template-areas:
			"buttons-container-card-1 buttons-container-card-2 buttons-container-card-3"
			"buttons-container-card-4 buttons-container-card-5 buttons-container-card-6";
		justify-content: center;
		align-content: start;
		gap: 3em;
		padding: 3em;
	}

	.buttons-container-card-img-1,
	.buttons-container-card-img-2,
	.buttons-container-card-img-3,
	.buttons-container-card-img-4,
	.buttons-container-card-img-5,
	.buttons-container-card-img-6 {
		max-width: 17em;
	}
}

@media (max-width: 1024px) {
	.main-content-buttons-container {
		background-color: var(--main-bg-colour);
		grid-area: buttons-container;
		display: grid;
		grid-template-columns: minmax(auto, 40em) minmax(auto, 40em);
		grid-template-rows:
			minmax(50em, auto)
			minmax(50em, auto)
			minmax(50em, auto);
		grid-template-areas: "buttons-container-card-1 buttons-container-card-2" "buttons-container-card-3 buttons-container-card-4" "buttons-container-card-5 buttons-container-card-6";
		justify-content: center;
		align-content: start;
		gap: 3em;
		padding: 3em;
	}
}

@media (max-width: 768px) {
	.main-content-buttons-container {
		background-color: var(--main-bg-colour);
		grid-area: buttons-container;
		display: grid;
		grid-template-columns: minmax(auto, 40em);
		grid-template-rows:
			minmax(50em, auto)
			minmax(50em, auto)
			minmax(50em, auto)
			minmax(50em, auto)
			minmax(50em, auto)
			minmax(50em, auto);
		grid-template-areas:
			"buttons-container-card-1"
			"buttons-container-card-2"
			"buttons-container-card-3"
			"buttons-container-card-4"
			"buttons-container-card-5"
			"buttons-container-card-6";
		justify-content: center;
		align-content: start;
		gap: 3em;
		padding: 1em;
	}
}