@font-face{
	font-family: "Inter-Regular";
	src: url("font/Inter-Regular.otf");
}
@font-face{
	font-family: "Inter-Bold";
	src: url("font/Inter-Bold.otf");
}
section{
	width: 100%;
	padding: 0px 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 100px;
}
#img-margin{
	margin-top: -55px;
}
#project-agefa-intro-text h1, #project-agefa-color-text h2{
	color: #FAC07B;
}
section h1, section h2{
	font-family: "Inter-Bold";
	font-size: 40px;
	margin-top: 0px;
}
section p{
	font-family: "Inter-Regular";
	font-size: 19px;
	line-height: 25px;
}
p span{
	font-family: "Inter-Bold";
}
section#api-goodies{
	flex-wrap: wrap;
}
section#api-goodies img{
	width: 50%;
	display: contents;
}
#project-agefa-intro, section.api-img{
	padding: 80px;
}
#project-agefa-intro > img{
	width: 35%;
	max-width: 500px;
	height: auto;
	flex-shrink: 0;
}
#project-agefa-intro-text{
	color: white;
}
#project-agefa-intro-text a{
	color: #f97e38;
	text-decoration: underline;
}
#project-agefa-color-text{
	color: white;
}
#project-agefa-color > img{
	flex: 2;
	width: 60%;
	max-width: 600px;
	height: auto;
}
#project-agefa-logo{
	background-color: #EE7C3D;
}
#project-agefa-logo-text {
	position: relative;
	top: -65px;
}
#project-agefa-logo > img{
	width: 35%;
	max-width: 450px;
	height: auto;
	border-radius: 12px;
	flex-shrink: 0;
	position: relative;
	top: 50px;
}
#project-agefa-mobile img#mobile-trame{
	width: 10%;
	right: -350px;
}
#project-agefa-mobile img{
	width: 75%;
	position: relative;
	top: -125px;
}

@media screen and (max-width:1080px){
	section{
		flex-direction: column;
		padding: 50px;
		gap: 30px;
	}
	#project-agefa-intro, section.api-img{
		padding: 50px;
	}
	section#api-goodies img {
		object-fit: cover;
		display: block;
		height: 350px;
	}
	#project-agefa-logo-text, #project-agefa-logo > img, #project-agefa-mobile img {
		position: initial;
	}
	#project-agefa-logo > img {
		width: 45%;
	}
	#img-margin {
		margin-top: 0px;
	}
	#project-agefa-intro, #project-agefa-logo {
		flex-direction: column-reverse;
	}
	div.project-img img, #project-agefa-color > img, #project-agefa-intro > img, section#api-goodies img{
		width: 100%;
	}
	#project-agefa-mobile img#mobile-trame {
		display: none;
	}
}

@media screen and (max-width:1080px){
	section, #project-agefa-intro, section.api-img{
		padding: 30px;
	}
	#project-agefa-logo > img {
		width: 80%;
	}
	#project-agefa-mobile img{
		width: 100%
	}
}