*, *:after, *:before {
	box-sizing: border-box;
}

body {
	color: rgb(0,16,29);
	background-color: white;
	font-size: 16px;
	margin: 0;
	padding: 0;
	font-family: 'Cormorant', serif;
	font-family: 'Poppins', sans-serif;
}

::selection {background: rgba(0,100,255, 0.7); color: rgb(0,16,29);}
::-moz-selection {background: rgba(0,100,255,0.7); color: rgb(0,16,29);}

h1, h2, h3 {
	font-family: 'Cormorant', serif;
	font-weight: 700;
	line-height: 100%;
	margin: 0;
}

h1 {
	font-size: 4.5em;
}

h2 {
	font-size: 3em;
}

h3 {
	font-size: 2em;
}

p, li {
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	line-height: 1.8;
}

.content {
	display: block;
	width: 100%;
	max-width: 1280px;
	margin: 72px auto;
}

.intro, .current, .project {
	padding: 64px 0;
	border-bottom: 1px solid rgba(0,16,29, .15);
}

.intro p, .intro h1 {
	width: 80%;
}

.intro p {
	font-size: 1.5em;
	margin: 32px 0;
}

.current {
	display: flex;
	flex-direction: row;
	gap: 64px;
}

.current div {
	width: 100%;
	flex-grow: 1;
}

.current div img {
	width: 100%;
}

.project {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center	;
	gap: 32px;
	width: 100%;
}

.project div:nth-last-child(1) p {
	margin-bottom: 0;
}

.text-wrapper {
	width: 70%;
	max-width: 832px;
}

.text-wrapper h2 {
	margin-top: 32px;
}

.text-wrapper img {
	width: 100%;
	margin-top: 32px;
}

.checkout {
	width: 100%;
	max-width: 1280px;
	text-align: center;
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 64px;
	justify-content: center
}

.checkout div {
	width: 100%;
	max-width: 360px;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
}

.checkout div img {
	width: 360px;
	filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.15));
}

.checkout h3 {
	border: 1px solid rgb(0,16,29);
	margin: 16px auto;
	width: 48px;
	height: 48px;
	padding: 6px;
	text-align: center;
	font-variant-numeric:lining-nums;
	border-radius: 100%;
}

.overview {
	display: flex;
	align-items: flex-start;
	flex-direction:row;
	gap: 64px;
}

.overview .column {
	margin-top: 0;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 32px;
}

.overview-item img {  
	max-width: 608px;
	object-fit:scale-down;
}

.award {
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 608px;
	gap: 32px;
	background: rgb(245,245,245);
	padding: 32px 48px;
}

.award img {
	width: 100%;
	min-width: 92px;
}

.overview .text-wrapper {
	width: 100%;
	max-width: 608px;
}

.overview h2, .award {
	margin-top: 32px;
}

.other h2 {
	margin-top: 0;
}

.other h2 {
	text-align: center;
}

.other p {
	text-align: center;
}

.other .overview {
	gap: 0;
}
.other .column {
	height: 100%;
	gap: 0;
	justify-content: space-between;
}

.other .overview img {
	width: 608px;
	object-fit: cover;
}

a:hover,
a:focus {
	text-decoration: none;
}

.btn {
	background: rgb(0,16,29);
	color: white;
	font-weight: 600;
	padding: 12px 32px;
	margin: 24px 0px;
	transition: background .25s ease-out;
	border-radius: 4px;
	text-decoration: none;
}

.btn:hover {
	background: rgb(0,100,255);
	color: white;
	text-decoration: none;
}


@media (max-width: 1024px) {
	h1 {
		font-size: 6em;
	}
}

@media (max-width: 414px) {

	.content {
		width: 90%;
		max-width: 360px;
		margin: 0 auto;
	}

	.intro p, .intro h1 {
		width: 100%;
	}

	.intro p {
		font-size: 1.2em;
		margin: 24px 0;
	}

	h1 {
		font-size: 3em;
	}
	
	h2 {
		font-size: 2em;
	}
	
	h3 {
		font-size: 1.6em;
	}

	.btn {
		width: 100%;
		display: block;
		text-align: center;
	}

	.intro, .current, .project {
		padding: 48px 0;
		gap: 32px;
	}

	.current {
		flex-direction: column;
	}

	.project img {
		width: 100%;
	}

	.text-wrapper {
		width: 100%;
	}
	.text-wrapper h2 {
		margin-top: 0;
	}
	.checkout {
		width: 100%;
		flex-direction: column;
		gap: 32px;
	}

	.checkout div {
		width: 100%;
	}

	.checkout div img {
		width: 100%;
	}

	.checkout h3 {
		width: 40px;
		height: 40px;
		padding: 6px;
	}

	.overview {
		flex-direction: column;
		gap: 16px;
	}

	.overview .column {
		margin-top: 0;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		gap: 16px;
	}

	.overview-item img {  
		width: 100%;
		object-fit:scale-down;
	}

	.award {
		flex-direction: column;
		gap: 16px;
		padding: 16px 20px;
		justify-content: center;
		align-items: center;
	}

	.award img {
		width: 100%;
		max-width: 64px;
	}

	.overview h2, .award {
		margin-top: 32px;
	}

	.other h2, .other p {
		text-align: left;
	}

	.other .column {
		height: 100%;
		gap: 0;
	}

	.other .overview img {
		width: 100%;
		object-fit: cover;
	}

}