@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
	font-family: "Montserrat";
	font-size: 16px;
	color: white;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: #141414;
}

/* Desktop */
@media (min-width: 801px) {
	.info-banner {
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 50px;
		gap: 20px;
		background-color: #1F1F1F;
		border-bottom: 1px solid #4D4D4D;
	}
	
	.logo {
		z-index: 10;
		position: fixed;
		top: calc(50px + 20px);
		left: 20px;
		max-height: 40px;
	}
	
	.text-header {
		font-size: 1.2rem;
		font-weight: bold;
	}
	
	.text-title {
		font-size: 2rem;
		font-weight: bold;
	}
	
	.text {
		font-size: 1.5rem;
		line-height: 150%;
		text-align: center;
		font-weight: 300;
	}
	
	.landing-view {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.landing-view > .text {
		max-width: 700px;
	}
	
	.services-view {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 70vh;
		align-items: center;
		justify-content: center;
		gap: 50px;
	}

	.carousel {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 150px;
	}
	
	.carousel-card {
		display: flex;
		width: 250px;
		flex-direction: column;
		gap: 50px;
	}

	.carousel-card-icon {
		max-height: 100px;
		object-fit: contain;
	}
	
	.approach-view {
		width: 100vw;
		height: calc(100vh - 50px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 30px;
	}
	
	.approach-view > .text {
		max-width: 700px;
	}
	
	.footer {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100vw;
		height: 50px;
		background-color: #1F1F1F;
		border-top: 1px solid #4D4D4D;
	}
	
	.footer-logo {
		max-height: 20px;
	}
}

/* Mobile */
@media (max-width: 800px) {
	.info-banner {
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 50px;
		gap: 20px;
		background-color: #1F1F1F;
		border-bottom: 1px solid #4D4D4D;
	}
	
	.logo {
		z-index: 10;
		position: fixed;
		top: calc(50px + 20px);
		left: 50vw;
		max-height: 40px;
		transform: translateX(-50%);
	}
	
	.text-header {
		font-size: 1rem;
		font-weight: bold;
	}
	
	.text-title {
		font-size: 1.5rem;
		font-weight: bold;
	}
	
	.text {
		font-size: 1.2rem;
		line-height: 150%;
		text-align: center;
		font-weight: 300;
	}
	
	.landing-view {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
	}
	
	.services-view {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 70vh;
		align-items: center;
		justify-content: center;
		gap: 50px;
	}

	.carousel {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 150px;
	}
	
	.carousel-card {
		display: flex;
		width: 250px;
		flex-direction: column;
		gap: 50px;
	}

	.carousel-card-icon {
		max-height: 100px;
		object-fit: contain;
	}
	
	.approach-view {
		min-width: 100vw;
		height: calc(100vh - 50px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 30px;
		padding: 20px;
		padding-top: 100px;
		padding-bottom: 50px;
	}
	
	.footer {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100vw;
		height: 50px;
		background-color: #1F1F1F;
		border-top: 1px solid #4D4D4D;
	}
	
	.footer-logo {
		max-height: 20px;
	}
}