@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,700;1,700&display=swap");

:root {
	--purple: #423758;
	--orange: #fc8b1a;
	--red: #ed6262;
	--indigo: #273c47;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
	font-family: "Nunito", "sans-serif";
}

body {
	width: 100%;
	height: 100%;
}

nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1em;
}

.lst {
	list-style: none;
	padding: 0;
	margin-right: 3em;
	display: flex;
	margin-left: auto;
	font-size: 24px;
	font-family: "Raleway";
	font-weight: 600;
}

li {
	margin-left: 1.5em;
}

.lst a {
	color: var(--purple);
	text-decoration: none;
	position: relative;
	padding-bottom: 2px;
	display: block;
	text-align: center;
}

.lst a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--orange);
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

.lst a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

.homeContent {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;
	height: 100vh;
	margin-top: 2em;
}

.homeCenter {
	display: inline-flex;
	margin-top: auto;
	margin-bottom: auto;
}

.logo {
	width: 33em;
}

.wave {
	width: 100%;
}

.waveBottom {
	margin-top: auto;
}

.sideImage {
	height: 18em;
	margin-left: 5em;
}

.home {
	height: 100vh;
}

.section {
	background-color: var(--purple);
	display: flex;
	flex-direction: column;

	width: 100%;
	margin-top: -1em;
}

.section h1 {
	color: var(--orange);
	font-size: 2.5em;
	margin-bottom: 1em;
	padding-left: 2em;
}

.listItem {
	display: flex;
	align-items: center;
}

.listItemText {
	color: white;
	font-size: 2em;
}

.redItalic {
	color: var(--red);
	font-style: italic;
}

.dot {
	font-size: 5em;
	color: var(--orange);
	margin-right: 0.3em;
}

.step {
	color: var(--orange);
	font-size: 2em;
	margin-right: 0.3em;
}

#works {
	background-color: white !important;
}

#works h1 {
	color: var(--purple);
}

#works .listItemText {
	color: var(--indigo);
}

.listItemIcon {
	width: 6em;
	margin-left: 1em;
}

.split {
	display: flex;
}

.leftSection {
	display: flex;
	flex-direction: column;
	width: 60%;
	padding-left: 2em;
}

.rightSection {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30%;
}

#typeText {
	font-size: 2em;
	background-color: rgba(252, 139, 26, 0.5);
}

#works {
	margin-bottom: 5em;
}

#partners {
	justify-content: center;
	padding-bottom: 3em;
}

.partnersGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
}

.partnerImage {
	justify-self: center;
	max-width: 250px;
}

::selection {
	background-color: rgba(252, 139, 26, 0.5);
}

@media (max-width: 920px) {
	.partnersGrid {
		grid-template-columns: repeat(2, 1fr);
	}
	.partnerImage {
		justify-self: center;
		max-width: 100px;
	}

	.section h1 {
		padding-left: 0.5em;
		font-size: 2em;
	}

	.leftSection {
		width: 100%;
		padding: 0 1em;
	}

	.listItemIcon {
		width: 4em;
	}

	.listItemText {
		font-size: 1.2em;
	}

	.split {
		flex-direction: column;
	}

	.rightSection {
		margin-top: 1em;
		width: 100%;
	}

	#typeText {
		font-size: 1.3em;
	}

	.lst {
		font-size: 20px;
		margin: 0 auto;
	}

	.homeCenter {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.logo {
		width: 20em;
	}
	.sideImage {
		margin: 0;
		margin-top: 1em;
	}

	.noMarg {
		margin: 0;
	}
}