/****** Start Common Styles *******/

/********** Branding ***********/

/* 
	Blue: #677cb5
	Silver: #e9e9e9
	Black: #212529
*/

body {
	font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	color: #212529;
	background: #e9e9e9;
	margin: 0;
}
h1, h2, h3 { 
	line-height: 1.1;
	margin: 0 0 .7em;
}
p { 
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 1.3em;
}
a {
	color: #677cb5;
	text-decoration: none;
}
a:hover {
	color: #212529;
	text-decoration: underline; 
}
h1 { 
	font-size: clamp(2.2rem, 4.6vw, 3.2rem); 
}
h2 { 
	font-size: 1.8rem; 
}
h3 { 
	font-size: 1.6rem; 
}
h4 { 
	font-size: 1.4rem; 
}


/******* End Common Styles ********/


/****** Start Hero Section *******/
header.hero {
    display: grid;
    align-content: space-evenly;
    justify-content: center;
}
.hero {
	width: 95%;
	height: 100vh;
	text-align: center;
	background: #e9e9e9;
	color: #212529;
	margin: 0 auto;
	padding: 30px 0;
}
.hero .title img {
    margin-bottom: 26px;
    max-width: 220px;
}
.hero .subhead {
  color: #212529;
  font-size: 1.125rem;
  margin: 12px 0 24px;
}
.btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
}
.btn-primary {
  background: #0f766e;
  color: #fff;
}
/******* End Hero Section ********/

/****** Start Contact Section *******/



/******* End Contact Section ********/

/****** Start Media Queries *******/

@media (min-width: 767px) {
	
	h1, h2, h3 { 
		line-height: 1.2;
		margin: 0 0 .75em;
	}
	p { 
		font-size: 1.125rem;
		line-height: 1.7;
		margin: 0 0 1.5em;
	}
	h1 { 
		font-size: clamp(2.5rem, 5vw, 3.5rem); 
	}
	h2 { 
		font-size: 2rem; 
	}
	h3 { 
		font-size: 1.8rem; 
	}
	h4 { 
		font-size: 1.6rem; 
	}	
	.hero {
		width: 90%;
		padding: 50px 0;
	}
	.hero .title img {
		margin-bottom: 32px;
		max-width: 288px;
	}
	.features, .pricing {
		gap:32px
	}
}
/******* End Media Queries ********/