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

/* Colors

dark blue: #00183b
blue: #2e45cc
magenta: #eb54c5
dark-white: #f8f9fa

*/

/* CSS Reset */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	max-width: 100%;
}

html{
	height: 100dvh;
	font-family: "Montserrat", sans-serif;
	background-color: #f8f9fa;
}

/* Header */
header{
	height: 74px;
	padding: 0px 25px;
	background-color: #00183b;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	position: sticky;
	top: 0;
	left: 0;
	z-index: 74;
}

.header-links ul{
	list-style: none;
	
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
}

header a{
	text-decoration: none;
	color: #f8f9fa;
	font-size: 18px;
}

header a:hover{
	text-decoration: underline;
}

.header-menu-btn{
	background-color: #00183b;
	color: #f8f9fa;
	outline: none;
	border: none;
	font-size: 22px;
	cursor: pointer;

	display: none;
}

/* Main */
.container{
	width: 90%;
	margin: 0px auto;
}

.section{
	padding: 20px;	
	scroll-margin-top: 74px;
}

.section-title{
	text-align: center;
	color: #2e45cc;
}

.section-container{
	padding: 30px 0px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
}

/* Footer */
footer{
	padding: 50px;
	background-color: #00183b;
	color: #f8f9fa;
	text-align: center;
}

footer a{
	color: #f8f9fa;
}

.footer-copyright{
	margin-bottom: 20px;
}

.footer-links{
	list-style: none;
}

.footer-link{
	margin-bottom: 10px;
}

.footer-sub-links {
	width: 100%;

	display: flex;
	justify-content: center;
}

.footer-sub-links ul{
	list-style: none;
	display: flex;
	gap: 10px;
}

.footer-sub-links a{
	font-size: 12px;
}

/* Responsive Navbar */
@media (max-width: 800px){
	.header-links{
		display: none;
	}

	.header-links.active{
		width: 100%;
		background-color: #00183b;

		position: absolute;
		top: 74px;
		left: 0;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.header-links.active ul{
		padding: 0px 20px 20px 20px;
	}

	.header-menu-btn{
		display: block;
	}	
}