@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

*
{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	user-select: none;
    scroll-behavior: smooth;
    transition: 0.5s ease-in-out;
}

::-webkit-scrollbar{
  color: white;
  background: white;
  width: 5px;
}
::-webkit-scrollbar-track{
  background: white;
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom right, #202020, #404040);
}
::-webkit-scrollbar-thumb:hover {
  background: #101010;
}

body
{
	width: 100%;
	height: 100vh;
	background: #F9F9F9;
}

.container
{
	width: 100%;
	height: 100vh;
	background: linear-gradient(to bottom right, #303030, #202020);
}

.navbar
{
	padding: 10px;
}

.navbar img
{
	max-width: 10%;
}

.text-container
{
	width: 100%;
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
}

.text, .description
{
	place-items: center;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

span
{
	font-weight: 100;
}

.text-1
{
	font-family: 'Montserrat';
	color: white;
	font-weight: bold;
	font-size: 50px;
}

.description
{
	font-family: 'Lato';
	color: white;
	font-weight: bold;
	font-size: 20px;
}

.getstarted
{
	margin: 30px 0px;
}

.getstarted a
{
	width: 100%;
	height: auto;
	padding: 10px;
	color: white;
	border: 1px solid #fff;
	font-size: 20px;
	text-decoration: none;
	font-family: 'Montserrat';
	border-radius: 50px;
}

.getstarted a:hover
{
	border: 1px solid green;
	color: white;
	font-weight: 500;
}

#about-us .about-text,
#about-us .picture {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

#about-us.in-view .about-text,
#about-us.in-view .picture {
  opacity: 1;
  transform: translateY(0);
}


#about-us
{
	color: white;
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100vh;
	background: linear-gradient(to top left, #101010, #303030);
}

.about-text
{
	border: 2px solid #101010;
	padding: 50px;
	font-family: 'Montserrat';
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 50%;
	height: auto;
}

.description-about 
{
	filter: drop-shadow(1px 1px 1px #000);
	padding: 10px;
	margin: 20px 0px;
	text-align: justify;
	font-weight: 500;
}

.title-about
{
	filter: drop-shadow(1px 1px 1px #000);
	text-align: center;
	width: 100%;
	height: auto;
	padding: 10px;
	font-weight: 600;
	font-size: 30px;
}

.picture
{
	border: 2px solid #101010;
	width: 50%;
	height: 100%;
	background-image: url('../images/lastlogo.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.learn-more
{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	height: auto;
}

.learn-more a
{
	font-size: 20px;
	width: 50%;
	padding: 10px;
	color: white;
	border: 1px solid #fff;
	text-decoration: none;
	font-family: 'Montserrat';
	border-radius: 50px;
}

.learn-more a:hover
{
	border: 1px solid green;
	font-weight: 500;
}

#mission
{
	width: 100%;
	height: auto;
	background: linear-gradient(to top left, #202020, #404040);
}

.title-head
{
	border: 2px solid #101010;
	background: #202020;
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.title-head p
{
	font-family: 'Montserrat';
	font-size: 30px;
	color: white;
}

.list
{
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	background: linear-gradient(to top left, #202020, #404040);
}

.vision, .mission
{
	width: 50%;
	padding: 10px;	
}

.vision-title, .mission-title
{
	color: white;
	font-weight: 400;
	text-align: center;
	font-size: 20px;
	font-family: 'Montserrat';
	background: #101010;
	padding: 10px;
}

.list-desc
{
	text-align: justify;
	width: 100%;
	height: auto;
	padding: 20px;
	border: 2px solid #101010;
	color: white;
	font-family: 'Montserrat';
	background: none;
}

#apps
{
	width: 100%;
	height: auto;
	background: linear-gradient(to top left, #202020, #404040);
}

.container-apps
{
	padding: 10px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.applications
{
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 10px;
	border: 2px solid #101010;
}

.applications img
{
	border: 2px solid #fff;
	border-radius: 10px;
}

.app-name
{
	font-size: 20px;
	margin: 10px 0px;
	color: white;
	font-family: 'Montserrat';
	font-weight: 600;
}

.app-desc, .app-version
{
	text-align: center;
	font-size: 12px;
	color: white;
	font-family: 'Montserrat';
	font-weight: 600;
}

.redirect
{
	width: 100%;
	margin: 10px 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.redirect a
{
	text-align: center;
	text-decoration: none;
	width: 50%;
	border-radius: 50px;
	border: 1px solid #fff;
	color: white;
	padding: 10px;
	font-family: 'Montserrat';
	font-weight: 500;
}

.redirect a:hover
{
	border: 1px solid green;
}

.socials
{
	gap: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	width: 100%;
	height: auto;
	padding: 10px;
	background: linear-gradient(to top left, #202020, #404040);
}

.socialmedias
{
	gap: 5px;
}

.socialmedias i
{
	color: white;
	font-size: 20px;
}
.socialmedias a
{
	color: white;
	font-size: 20px;
	font-weight: 500;
	text-decoration: none;
	font-family: 'Montserrat';
}

@media(max-aspect-ratio: 16/9)
{
	.container
	{
		width: 100%;
		height: 100vh;
		background: linear-gradient(to top right, #505050, #202020);
	}

	.navbar
	{
		padding: 10px;
	}

	.navbar img
	{
		max-width: 20%;
	}

	.text-container
	{
		width: 100%;
		top: 50%;
		left: 50%;
		position: absolute;
		transform: translate(-50%, -50%);
	}

	.text, .description
	{
		place-items: center;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	span
	{
		font-weight: 100;
	}

	.text-1
	{
		font-family: 'Montserrat';
		color: white;
		font-weight: bold;
		font-size: 60px;
	}

	.description
	{
		font-family: 'Lato';
		color: white;
		font-weight: bold;
		font-size: 25px;
	}

	.getstarted
	{
		margin: 50px 0px;
	}

	.getstarted a
	{
		width: 100%;
		height: auto;
		padding: 20px;
		color: white;
		border: 1px solid #fff;
		font-size: 40px;
		text-decoration: none;
		font-family: 'Montserrat';
		border-radius: 50px;
	}

	.getstarted a:hover
	{
		border: 1px solid green;
		color: white;
	}

	#about-us
	{
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		background: linear-gradient(to top left, #101010, #303030);
	}

	.about-text
	{
		padding: 30px;
		font-family: 'Montserrat';
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: auto;
	}

	.description-about 
	{
		font-size: 25px;
		filter: drop-shadow(1px 1px 1px #000);
		padding: 10px;
		margin: 20px 0px;
		text-align: justify;
		font-weight: 500;
	}

	.title-about
	{
		filter: drop-shadow(1px 1px 1px #000);
		text-align: center;
		width: 100%;
		height: auto;
		padding: 10px;
		font-weight: 600;
		font-size: 45px;
	}

	.picture
	{
		width: 100%;
		height: 100%;
		background-image: url('../images/lastlogo.png');
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.learn-more
	{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50%;
		height: auto;
	}

	.learn-more a
	{
		font-size: 40px;
		width: 100%;
		padding: 10px;
		color: white;
		border: 1px solid #fff;
		text-decoration: none;
		font-family: 'Montserrat';
		border-radius: 50px;
	}

	.learn-more a:hover
	{
		border: 1px solid green;
		font-weight: 500;
	}

	#mission
	{
		width: 100%;
		height: auto;
		background: linear-gradient(to top left, #202020, #404040);
	}

	.title-head
	{
		border: 2px solid #101010;
		background: #202020;
		padding: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title-head p
	{
		font-family: 'Montserrat';
		font-size: 30px;
		color: white;
	}

	.list
	{
		padding: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: linear-gradient(to top left, #202020, #404040);
	}

	.vision, .mission
	{
		width: 100%;
		padding: 10px;	
	}

	.vision-title, .mission-title
	{
		color: white;
		font-weight: 400;
		text-align: center;
		font-size: 20px;
		font-family: 'Montserrat';
		background: #101010;
		padding: 10px;
	}

	.list-desc
	{
		text-align: justify;
		width: 100%;
		height: auto;
		padding: 20px;
		border: 2px solid #101010;
		color: white;
		font-family: 'Montserrat';
		background: none;
	}

	#apps
	{
		width: 100%;
		height: auto;
		background: linear-gradient(to top left, #202020, #404040);
	}

	.container-apps
	{
		padding: 10px;
		display: grid;
		grid-template-columns: repeat(1, 3fr);
		gap: 10px;
	}

	.applications
	{
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 10px;
		border: 2px solid #101010;
	}

	.applications img
	{
		border: 2px solid #fff;
		border-radius: 10px;
	}

	.app-name
	{
		font-size: 30px;
		margin: 10px 0px;
		color: white;
		font-family: 'Montserrat';
		font-weight: 600;
	}

	.app-desc, .app-version
	{
		text-align: center;
		font-size: 20px;
		color: white;
		font-family: 'Montserrat';
		font-weight: 600;
	}

	.redirect
	{
		width: 50%;
		margin: 10px 0px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.redirect a
	{
		text-align: center;
		text-decoration: none;
		width: 50%;
		border-radius: 50px;
		border: 1px solid #fff;
		color: white;
		padding: 10px;
		font-size: 20px;
		font-family: 'Montserrat';
		font-weight: 500;
	}

	.redirect a:hover
	{
		border: 1px solid green;
	}

	.socials
	{
		gap: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		width: 100%;
		height: auto;
		padding: 10px;
		background: linear-gradient(to top left, #202020, #404040);
	}

	.socialmedias
	{
		gap: 5px;
	}

	.socialmedias i
	{
		color: white;
		font-size: 20px;
	}
	.socialmedias a
	{
		color: white;
		font-size: 20px;
		font-weight: 500;
		text-decoration: none;
		font-family: 'Montserrat';
	}
}