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

html{
	scroll-behavior: smooth;
}

img{
	width: 100%;
}

a{
	text-decoration:none;
}

:root{
  --dark-blue: #0d1539;
  --yellow: #f9d05e;
  --red: #f06477;
  --blue: #6b88f5;
  --purple: #805fa7;
  --light-gray: #f3f5fa;
  --light-yellow: #fdf2cd;
  --light-red: #f9c1c9;
  --light-blue: #c4cffb;
}

body{
	font-family: Outfit, sans-serif;
	font-weight: 400;
	color: var(--dark-blue);
	min-height: 100dvh;
	display: flex;
	flex: 1;
	flex-direction: column;
}

h1{
	font-weight: 900;
	font-size: 72px;
	line-height: 60px;
}

h2{
	font-weight: 800;
	font-size: 36px;
	line-height: 36px;
}

h3{
	font-weight: 500;
	font-size: 24px;
	line-height: 28px;
}

p{
	font-size: 18px;
	line-height: 21px;
}

main{
	padding-top: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
/*ALL----------------------------------------*/

/*HEADER------------------------------*/
#header{
	position: fixed;
	width: 100%;
	height: 100px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: white;
}

.header-logo{
	width: 128px;
	cursor: pointer;
	margin: 0 30px;
}
/*NAVIGATION--------------------*/
#header{
	display: flex;
	width: 100%;
	height: 100px;
	position: absolute;
	top: 0px;
}

.navbar{
	display: flex;
	align-items: center;
	margin-left: auto;
}

.navbar ul{
	display: flex;
}

.navbar-item{
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 30px;
}

.navbar-item span{
	position: relative;
	font-size: 18px;
	font-weight: 600;
	line-height: 21px;
	color: var(--dark-blue);
	cursor: pointer;
	padding: 0 0 5px 0;
}

.navbar-item span::after {
  	content: "";
  	position: absolute;
  	bottom: 0;
  	left: -6px;
	right: -6px;
	height: 3px;
	background-color: var(--yellow);
  
	transform: scaleX(0); 
	transform-origin: center;
	transition: transform 0.1s ease-in-out;
}

.navbar-item:not(.activepage) a:hover span::after {
	transform: scaleX(1);
}

.navbar-item.activepage span::after {
	transform: scaleX(1);
}
/*NAVIGATION--------------------*/
/*HEADER------------------------------*/

/*FOOTER------------------------------*/
#footer{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.copyright{
	margin-left: 50px;
}

.footer-logo{
	width: 380px;
}

.footer-socials{
	display: flex;
	align-items: center;
	gap: 25px;
	margin-right: 50px;
}

.footer-socials img{
	width: 30px;
	cursor: pointer;
}
/*FOOTER------------------------------*/

/*REUSABLE ELEMENTS-------------------*/
button.link-button{
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	overflow: hidden;
	width: max-content;
	border: none;
	border-radius: 32px;
	filter: drop-shadow(-3px 3px 5px rgba(0, 0, 0, 0.25));
	cursor: pointer;
	
	transition: padding 0.2s ease, background-color 0.2s ease, color 0.2s ease; 
}

button.link-button p{
	font-family: Outfit, sans-serif;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	white-space: nowrap;

	transition: color 0.2s ease;
}

button.link-button::after{
	font-family: Outfit, sans-serif;
	font-size: 18px;
	font-weight: 700;
	content: "\2794";
	display: inline-block;
	width: 0;
	margin-left: 0;
	opacity: 0;
	overflow: hidden;

	transition: width 0.2s ease, margin-left 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

button.link-button:hover::after{
	opacity: 1;
}
/*ELEMENTS----------------------------*/