@charset "utf-8";

#header a{
	color: var(--dark-blue);
}

/*storytime*/

.story{
	margin-top: 128px;
}
.frame{
	width: 360px;
	aspect-ratio: 1/1;
	border-radius: 16px;
	overflow: hidden;
}
.story .frame{
	background: url("../img/webp/founders.webp");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.story .row div:first-child{
	width: 60%;
}
.story h2{
	margin-bottom: 24px;
}
.story p{
	margin-bottom: 8px;
}
.story .CTA{
	margin-top: 32px;
}

/*values*/
.values{
	margin: 160px auto;
	position: relative;
}
.values h2{
	text-align: center;
	margin-bottom:80px;
}
.values .row{
	align-items: flex-start;
}
.value{
	width: 32%;
	background-color: white;
	border-radius: 16px;
	box-shadow: var(--slight-shadow);
	padding: 40px;
	text-align: center;
	cursor: pointer;
}
.value img{
	height: 160px;
	display: block;
	margin: 0 auto 40px;
}
.value p{
	height: 0;
	transform-origin: center;
	opacity: 0;
	transition: all .1s ease-in-out;
}
.value.active img{
	opacity: 0;
	height: 0;
}
.value.active p{
	opacity: 1;
	height: auto;
}
.value.active h3{
	margin-bottom: 16px;
}

/*company culture (NB : most of the CSS for this section is from the story section aboive)*/
.culture .row{
	flex-direction: row-reverse;
}
.story.culture .frame{
	background: url("../img/webp/team.webp");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/*conversion*/
.conversion{
	padding: 40px;
	background-color: white;
	box-shadow: var(--shadow);
	border-radius: 16px;
	text-align: center;
	margin: 160px auto;
}
.conversion h2{
	margin-bottom: 40px;
}

/*responsive*/
@media screen and (max-width:768px){
	.row{
		flex-wrap: wrap;
	}
	/*story*/
	.story .row{
		text-align: center;
	}
	.story .row div:first-child{
		width: 100% ;
		margin-bottom: 40px;
	}
	.frame{
		margin: 0 auto;
	}
	/*Values*/
	.value{
		width: 80%;
		margin: 0 auto;
	}
	.value:nth-child(2){
		margin: 40px auto;
	}
}