@charset "utf-8";

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

/*meet-bob*/
.meet-bob{
	margin: 128px auto 0;
}
.meet-bob .row{
	margin-bottom: 80px;
}
.meet-bob .row div:first-child{
	width: 60%;
}
.meet-bob h2{
	margin-bottom: 24px;
}
.meet-bob p{
	margin-bottom: 8px;
}
.meet-bob .CTA{
	margin-top: 32px;
}
.frame{
	width: 400px;
	aspect-ratio: 4/3;
	background: url("../img/webp/bob.webp");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.product-video{
	width: 100%;
	aspect-ratio: 16/9;
	background-color: white;
	border-radius: 16px;
	box-shadow: var(--slight-shadow);
	overflow: hidden;
}
iframe{
	width: inherit;
	aspect-ratio: 16/9;
}

/*app-showcase*/
.app-showcase{
	margin: 160px auto;
}
.app-showcase h2{
	width: 100%;
	text-align: center;
}
.app-showcase img{
	width: 100%;
	max-width: 500px;
	display: block;
	margin: 80px auto 40px;
}
.app-showcase .row div{
	width: 32%;
	padding: 40px;
	background-color: white;
	box-shadow: var(--shadow);
	border-radius: 16px;
}
.app-showcase h3{
	margin-bottom: 16px;
}

/*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: 1000px){
	.app-showcase .row{
		flex-wrap: wrap;
	}
	.app-showcase .row div{
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	.app-showcase .row div:nth-child(2){
		margin: 40px auto;
	}
}

@media screen and (max-width: 768px){
	.frame{
		display: none;
	}
	.meet-bob .row div:first-child{
		width: 100%;
	}
}