:root{
	--colorText:white;
	--colorBack:#5194A0;
}


@font-face{
	font-family: "Cabinet Grotesk Variable";
	src: url('../font/CabinetGrotesk-Variable.ttf') format('truetype')
}
@font-face{
	font-family: "Anonymous Pro";
	src: url('../font/Anonymous_Pro.ttf') format('truetype')
}



h1{
	color: #1C3855;
	display: flex;
	max-width: 57.5625rem;
	align-items: flex-start;
	font-family: "Cabinet Grotesk Variable";
	font-size: 2.5rem;
	font-style: normal;
	font-weight: 700;
	line-height: 2.8125rem; /* 112.5% */
	margin: 0;
	hyphens:none;
}

@media(max-width: 850px){
	h1{
		font-size: 2rem;
	}
}



main{
	display: flex;
	flex-direction: column;
	padding: 3.19rem 4.99rem 4.66rem 4.99rem;
	gap: 3.19rem;
}

@media(max-width:850px){
	main{
		padding: 2.8rem 3.99rem 3.5rem 3.99rem;
		gap: 2.8rem;
	}
}

.portfolioContainer{
	display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}




.project{
	display: flex;
padding: 30px;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap:30px;
border-radius: 20px;
border: 2px solid #5194A0;
width:32.5%;
align-self: stretch;
}

@media(max-width:1439px){
	.project{
		width:32%;
	}
}

@media(max-width:1180px){
	.project{
		width:49%;
	}
}

@media(max-width:957px){
	.project{
		width:48.5%;
	}
}

@media(max-width:800px){
	.project{
		width:100%;
	}
}


.project img{
	display: flex;
width: 100%;
align-items: center;
gap: 12.067px;
border-radius: 16.653px;
}

.model{
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
	
}



.modelTitle{

	color: #000;
	font-family: "Cabinet Grotesk Variable";
	
font-size: 38px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 105.263% */
}

@media(max-width:460px){
	.modelTitle{
		font-size: 27px;
	}
}



.modelText{
	color: #000;
font-family: "Cabinet Grotesk Variable";
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: 40px; /* 133.333% */
}

@media(max-width:460px){
	.modelText{
		font-size: 1.5rem;
	}
}



.linkProject{
	display: flex;
	padding: 12px 20px;
	justify-content: center;
	align-items: center;
	gap: 12px;
	border-radius: 23.36px;
	background: #000;

}

@media(max-width:394px){
	.linkProject{
		
	}
}

.linkProject:hover{
	background: #5C5C5C;
}

.linkProject p{
	color: #FFF;
font-family: "Abel";
font-size: 16.352px;
font-style: normal;
font-weight: 400;
line-height: 25.92px; /* 158.514% */
letter-spacing: 1.635px;
text-transform: uppercase;
}

.linkProject img{
	width: 28.032px;
height: 28.032px;
}