:root {
  --dark-blue: #203E4D;
  --light-blue: #4492AE;
  --beige: #e6e6e6;
  --green: #7ec5b5;
}

@font-face {
  font-family: betty;
  src: url(../fonts/Thinking_of_Betty.ttf);
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
nav {
  height: 6rem;
  background-color: var(--beige);
  display: flex;
}
.logo {
  height: 6rem;
  margin: auto;
  flex: 1;
}
.title {
  margin: auto;
  color: var(--dark-blue);
  flex: 1;
}
.title h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: betty, Montserrat, sans-serif;
}
.title p {
  font-weight: bold;
}
.promo-section, .conclusion-section {
  width: 90vw;
  margin: auto;
  margin-top: 1rem;
  text-align: center;
  border: var(--beige) solid 0.2rem;
  border-radius: 5px;
  background-color: var(--dark-blue);
  color: var(--beige);
  font-size: 2rem;
  align-items: center;
}
.read-more-section, .unique-section, .presentation-section, .leave-section, .price-section {
  width: 90vw;
  max-width: 80rem;
  margin: auto;
  margin-top: 1rem;
  font-size: 1.3rem;
  color: darkslategray;
}
.read-more-section img {
  float: right;
  width: 40vw;
  max-width: 40rem;
  margin: 1rem;
  border-radius: 1rem;
}
.read-more-section p, .unique-section p, .presentation-section p, .leave-section p, .price-section p, .conclusion-section p {
  padding-left: 1rem;
  padding-right: 1rem;
}
.hi {
  font-family: betty, Montserrat, sans-serif;
  font-weight: lighter;
  color:(var(--dark-blue))
}
.unique-section {
  align-items: center;
}
.usp {
  width: 90%;
  display: block;
  margin: 2rem auto;
  border-radius: 2rem;
  border: 0.2rem var(--green) solid;
}
.system-pitch {
  border: 0.2rem var(--dark-blue) solid;
  align-items: center;
  border-radius: 2rem;
  text-align: center;
  padding: 2rem;
}
footer {
  align-items: center;
  text-align: center;
  margin-top: 2rem;
  padding: 2rem;
  background-color: var(--beige);
  color: var(--dark-blue);
}
input[type=text] {
  width: 80%;
  display: block;
  margin: auto;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
input[type=submit] {
  background-color: var(--green);
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}
input[type=submit]:hover {
  background-color: var(--beige);
  color: var(--dark-blue)
}
.contact-form {
  max-width: 40rem;
  padding-bottom: 2rem;
}
label {
  font-size: 1rem;
}
.error-section {
  width: 90vw;
  margin: auto;
  margin-top: 1rem;
  text-align: center;
  border: var(--beige) solid 0.2rem;
  border-radius: 5px;
  background-color: crimson;
  color: white;
  font-size: 1.5rem;
  align-items: center;
}
.loading-section {
  width: 90vw;
  margin: auto;
  margin-top: 1rem;
  text-align: center;
  border: var(--beige) solid 0.2rem;
  border-radius: 5px;
  background-color: orange;
  color: black;
  font-size: 1.5rem;
  align-items: center;
}