:root {
  --bg: #d5dbe4;
  --nav: #007a99;
  --nav-hover: #1d4464;
  --text: #000;
  --font-serif: Georgia, 'Times New Roman', Times, serif;
}

body {
  margin: 0 4%;
  background-color: var(--bg);
  color: var(--text);
}

h1 {
  font-family: Franklin Gothic Medium, 'Bold', Arial, sans-serif;
  margin-top: 3%;
  font-size: clamp( 36px, 4vw, 4vh)
}

p {
  font-size: 16pt;
  margin: 0 0 40px 40px;
}

ul.nav {
  font-family: Franklin Gothic Medium, 'Bold', Arial, sans-serif;
  font-size: larger;
  list-style: none;
  display: flex;
  margin: 0 0 4%;
  padding: 0;
  overflow: hidden;
  background-color: #007a99;
}

ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #1d4464;
}


img {
  margin-top: 6px;
  margin: 20px;
  width: 400px;
}

.image-box {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  display: flex;
  align-items: center;
}

.form-container{
  display: flex;
  flex-direction: column;
}

.form-row {
  display: flex;
  justify-content: start;
}

.form-row label {
  flex: 0 0 150px;
  margin-right: 15px; 
}

#message {
  display:flex;
  width: 400px;
  height: 80px;
}

figcaption {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: larger;
  margin: 0 0 40px 40px;
  text-align: center;
}

ul.services li{
  font-size: larger;
  margin: 0 100px 10px;
  text-align: left;
}