@charset "utf-8";

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


/*usecases*/
.usecase .row {
	margin-bottom: 80px;
}
.usecase .row:first-child{
	margin-top: 128px;
}
.usecase .row:nth-child(2n){
	flex-direction: row-reverse;
}
.usecase .row:last-child{
	margin-bottom: 160px;
}
.usecase .row div:first-child{
	width: 36%;
	aspect-ratio: 1/1;
	border-radius: 16px;
	overflow: hidden;
}
.usecase .row img{
	width: 100%;
}
.usecase .row div:last-child{
	width: 60%;
}
.usecase .row h2{
	margin-bottom: 24px;
}
form{
	display: flex;
}
.usecase .row input{
	flex-grow: 1;
	border: 1px solid var(--yellow);
	border-right: 1px solid transparent;
	border-radius: 8px 0 0 8px;
	padding: 16px;
}
.usecase .row input::placeholder{
	color: var(--dark-blue);
}


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


/*responsive*/
@media screen and (max-width: 768px) {
	.usecase .row:nth-child(n){
		flex-wrap: wrap;
		flex-direction: row;
	}
	.usecase .row div:nth-child(n){
		width: 80%;
		margin: 0 auto;
	}
	.usecase .row div:first-child{
		margin-bottom: 40px;
	}
	h2{
		text-align: center;
	}
	form{
		display: block;
		text-align: center;
	}
	.usecase .row input{
		border-right: 1px solid var(--yellow);
		width: 100%;
		border-radius: 8px;
	}
	.CTA-form{
		border-radius: 8px;
		margin-top: 16px;
	}
	
}