.home {
	display: flex;
	width: 100%;
	height: 80vh;
	justify-content: center;
	align-items: center;
	margin: 0 0 10rem 0;
}

.home .intro {
	width: 30%;
	height: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: left;
	text-align: left;
}

.home .intro div {
	display: flex;
}

.home .intro .title {
	font-size: 6rem;
	font-weight: 500;
	font-family: Cormorant Garamond, system-ui;
	color: var(--black);
	margin: 2rem 0 0 0;
}

.home .intro .cta {
	font-size: 2rem;
	font-weight: 300;
	color: var(--black);
	margin: 3rem 0 5rem 0;
}

.home .intro div a {
	font-size: 2rem;
	font-weight: 400;
	color: var(--base-color-light);
	background-color: var(--black);
	padding: 1rem 2rem 1rem 2rem;
	border: 0.2rem solid var(--black);
	transition: all 0.2s ease-in-out;
}

.home .intro div a:nth-child(2) {
	background-color: var(--base-color-light);
	color: var(--black);
	border: none;
}

.home .intro div a:nth-child(1):hover {
	background-color: var(--purple);
	border-color: var(--purple);
}

.home .intro div a:nth-child(2):hover {
	text-decoration: underline;
	text-decoration-thickness: 0.2rem;
}

.home .art {
	width: 45%;
}

.tools {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 14rem;
	background-color: var(--purple);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--base-color-mid);
}

.tools .container {
	align-items: center;
	justify-content: space-around;
	display: flex;
	width: 80%;
	height: 100%;
}

.tools .container .tool {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tools .container .tool p {
	font-size: 2.4rem;
	color: var(--base-color-light);
}

.tools .container .tool img {
	margin: 0 2rem 0 0;
}

.services {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.services .header {
	width: 80%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.services .header .title {
	font-size: var(--title-font-size);
	font-weight: 600;
	font-family: Cormorant Garamond, system-ui;
	display: flex;
	align-items: center;
	margin: 5rem 0 5rem 0;
}

.services .header .index {
	font-size: 2rem;
	font-weight: 400;
	color: var(--brown);
	margin: 10rem 0 0 auto;
	text-transform: uppercase;
}

.services .cards {
	width: 90%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	justify-items: center;
	align-items: center;
}

.services .card {
	height: 40rem;
	width: 35rem;
	display: flex;
	flex-direction: column;
	padding: 2rem 3rem 2rem 3rem;
	color: var(--base-color-light);
	background-color: var(--base-color-dark);
	border-radius: 0.5rem;
	position: relative;
	box-shadow: 0.5rem 0.5rem 0.3rem #00000040;
}

.services .card img {
	position: absolute;
	height: auto;
	left: 50%;
	transform: translateX(-50%);
}

.services .card:nth-child(1) img {
	width: 12rem;
	top: -10rem;
}

.services .card:nth-child(2) img {
	width: 20rem;
	top: -5rem;
}

.services .card:nth-child(3) img {
	width: 16rem;
	top: -10rem;
}

.services .card:nth-child(4) img {
	width: 18rem;
	top: -5rem;
}

.services .card:nth-child(1) {
	background-color: var(--orange);
}

.services .card:nth-child(2) {
	background-color: var(--purple);
}

.services .card:nth-child(3) {
	background-color: var(--green);
}

.services .card:nth-child(4) {
	background-color: var(--red);
}

.services .card .card-number {
	font-size: 2rem;
	font-weight: 600;
	margin: 0 0 1.5rem 0;
}

.services .card .card-title {
	width: 80%;
	font-size: 4.5rem;
	font-weight: 600;
	font-family: Cormorant Garamond, system-ui;
	line-height: 1;
}

.services .card .separator {
	width: 100%;
	height: 0.1rem;
	background-color: var(--base-color-light);
	margin: 1rem auto 1rem auto;
}

.services .cards .card ul {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.services .cards .card ul li {
	list-style: disc;
}

.services .cards .card ul p {
	font-size: 2rem;
	margin: 0 0 0.5rem 1rem;
}

.portfolio {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--base-color-mid);
}

.portfolio .container {
	width: 85%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto 20rem auto;
}

.portfolio .container .header {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 0.2rem solid var(--base-color-dark);
	margin: 10rem auto 5rem 0;
}

.portfolio .container .header .title {
	height: 10rem;
	display: flex;
	align-items: center;
	font-size: var(--title-font-size);
	font-family: Cormorant Garamond, system-ui;
}

.portfolio .container .header .index {
	font-size: 2rem;
	font-weight: 400;
	color: var(--brown);
	margin: 0 0 0 auto;
	text-transform: uppercase;
}

.portfolio .container ul {
	width: 100%;
	height: 80%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem;
	justify-items: center;
	align-items: center;
	margin: 0 0 2rem 0;
}

.portfolio .container ul li {
	width: 100%;
	min-height: 55rem;
	margin: 0 0 5rem 0;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	transition: all 0.2s ease-in-out;
}

.portfolio .container ul li a img {
	width: 100%;
	margin: 0 0 0.5rem 0;
}

.portfolio .container ul li a div {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: left;
	justify-content: space-between;
}

.portfolio .container ul li a div .name {
	font-size: 3rem;
	font-weight: 500;
	color: var(--black);
}

.portfolio .container ul li a div .tag {
	font-size: 2rem;
	color: var(--gray);
	text-transform: uppercase;
}

.about {
	width: 100%;
	height: 120vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.about .left {
	width: 40%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: auto;
	font-size: 2rem;
}

.about .left .header {
	display: flex;
	flex-direction: column;
}

.about .left .header .title {
	font-size: 6rem;
	margin: 0 0 2rem 0;
	font-family: Cormorant Garamond, system-ui;
}

.about .left .header .index {
	font-size: 2rem;
	font-weight: 400;
	color: var(--brown);
	margin: 0 0 3rem 0;
	text-transform: uppercase;
}

.about .left .description {
	font-size: 2rem;
	font-weight: 300;
	margin: 3rem 0 4rem 0;
}

.about .left .highlights {
	height: 20rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	font-size: 2.5rem;
}

.about .left .highlights div {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-top: 0.2rem solid var(--base-color-dark);
}

.about .left .highlights div p {
	margin: 0 0 1rem 0;
	font-family: Cormorant Garamond, system-ui;
}

.about .left .highlights div p:first-child {
	font-size: 4rem;
	font-weight: 300;
}

.about .right {
	width: 40%;
	height: 100%;
	display: flex;
	justify-content: center;
	margin: auto;
}

.about .right img {
	height: 80%;
	width: auto;
	margin: auto 2rem auto 2rem;
	border: 0.3rem solid var(--brown);
	border-radius: 0.5rem;
}

.text-highlight {
	text-decoration: underline;
	text-decoration-thickness: 0.3rem;
	margin: 0 0 0 1.5rem;
	font-style: italic;
}

.purple {
	color: var(--purple);
}

@media (orientation: portrait) {
	.home .intro {
		width: 90%;
	}

	.home .intro .title,
	.home .intro .cta {
		text-align: left;
	}

	.home .intro div {
		margin: 0 0 5rem 0;
	}

	.home .intro div a {
		margin: 2rem;
	}

	.home .intro .title {
		font-size: 2.4rem;
		margin: 0 3rem 3rem 3rem;
	}

	.portfolio .container ul li {
		width: 34rem;
		height: 34.5rem;
	}

	.portfolio .container ul li a div .name {
		font-size: 1.8rem;
	}

	.portfolio .container ul li a div .tag {
		font-size: 1rem;
	}

	.home .intro .cta {
		font-size: 2rem;
		margin: 0 3rem 3rem 3rem;
	}

	.tools {
		height: 5rem;
	}

	.tools .container {
		width: 80%;
	}

	.tools .container .tool p {
		font-size: 1.6rem;
	}

	.services {
		height: 150vh;
	}

	.services .cards ul {
		display: flex;
		flex-direction: column;
	}

	.portfolio {
		height: 350vh;
	}

	.portfolio .container ul {
		height: 90%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	.contact .links {
		width: 80%;
	}

	.contact .links a {
		margin: 2rem auto 2rem auto;
	}
}