@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese);

header,
body,
menu,
.hero,
.left,
.information-container,
.image-info-container,
.testimonial-container,
.quotee,
.cta-container,
.cta {
  display: flex;
}

/* header */
header {
  background-color: #1f2937;
  margin: 0px;
  justify-content: space-between;
  align-items: center;
  padding: 0% 10%;
}

.links {
  font-size: 18px;
}

.logo {
  color: #f9faf8;
  font-size: 24px;
  font-weight: 900;
}

a {
  padding: 10px;
  color: #e5e7eb;
  text-decoration: none;
}

/* misc lmnts */
body {
  font-family: Roboto, sans-serif;
  flex-direction: column;
  margin: 0px;
}

menu {
  list-style: none;
}

/* hero section */
.hero {
  background-color: #1f2937;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  padding: 50px;
}

.left {
  flex-direction: column;
  align-items: flex-start;
  flex-basis: 450px;
  gap: 15px;
}

/* maybe naming scheme a bit mid here but can chain? */
.main {
  font-size: 48px;
  font-weight: 800;
  color: #f9faf8;
}

.sub {
  font-size: 18px;
  color: #e5e7eb;
}

button {
  background-color: #3882f6;
  color: #f9faf8;
  border: none;
  padding: 8px 30px;
  border-radius: 10px;
  font-weight: 700;
  font-size: medium;
}

img.hero {
  object-fit: cover;
  width: 550px;
  height: 250px;
}

/* information */
.information-container {
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 125px;
}

.info-header {
  font-size: 36px;
  font-weight: 800;
  color: #1f2937;
  margin: 50px 0px;
  text-align: center;
}

.image-info-container {
  justify-content: center;
  gap: 50px;
}

.text {
  width: 200px;
  text-align: center;
}

img.info {
  object-fit: cover;
  width: 200px;
  height: 200px;
  border: 3px solid #3882f6;
  border-radius: 25px;
}

/* testimonial */
.testimonial-container {
  flex-direction: column;
  background-color: #e5e7eb;
  align-items: center;
  padding: 100px 0px;
}

.quote {
  font-size: 36px;
  font-weight: 300;
  font-style: italic;
  color: #1f2937;
  width: 900px;
}

.quotee {
  font-size: 25px;
  font-weight: 600;
  color: #1f2937;
  padding-left: 800px;
}

/* CTA */
.cta-container {
  justify-content: space-evenly;
  margin: 100px 0px;
}

.cta {
  align-items: center;
  gap: 175px;
  background-color: #3882f6;
  border-radius: 10px;
  padding: 50px 150px;
}

.cta-heading {
  font-size: 25px;
  font-weight: 700;
  color: #ffffff;
}

.cta-subtext {
  color: white;
}
.cta button {
  border: 2px solid #e5e7eb;
}

/* footer */
footer {
  background-color: #1f2937;
  text-align: center;
  padding: 35px 0px;
  color: #e5e7eb;
  font-weight: 400;
  font-size: 20px;
}