styles.css

* {
  font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    sans-serif;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  font-size: 1rem;
}

/* Utility classes */
.bg-primary {
  background-color: #000 !important;
}

.blue-bg {
  background-color: #c6f9ec;
}

.main-heading {
  font-size: 5rem;
  line-height: 6rem;
  margin: 3.5rem auto 1.5rem;
  font-weight: 900;
  width: 80%;
}
.width-regular {
  width: 80%;
  margin: 0 auto;
}

.contentWrapper {
  margin: 0 auto;
}
.map-container {
  background-color: #c6f9ec;
  padding: 1rem 0;
}

.map-frame-container {
  width: 30rem;
  margin: 0 auto;
}

/* Layout Styling */
nav .container-fluid {
  width: 80%;
}
p {
  font-size: 1.9rem;
  line-height: 2.5rem;
  width: 80%;
  margin: 2rem auto;
}
.messages {
  display: flex;
  align-items: center;
  background-color: #ffd699;
}
.messages-container {
  display: flex;
  margin: 0 auto;
}
.navbar-brand {
  font-size: 2.5rem;
}
footer {
  padding: 2rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  display: flex;
  flex-direction: column;
}
footer h4 {
  font-size: 1.9rem;
  margin-bottom: 0;
}
footer h4:first-child {
  margin-bottom: 1rem;
}
footer p {
  margin: 0.5rem auto;
}

.contact-us {
  color: #fff;
}

.contact-us:hover {
  color: #fff;
  opacity: 75%;
}
/* Responsive styling */
@media only screen and (max-width: 650px) {
  .main-heading {
    font-size: 4.5rem;
    line-height: 5rem;
    width: 95%;
  }
  p {
    font-size: 2rem;
    line-height: 2.3rem;
    width: 95%;
  }
  .messages-icon {
    display: none;
  }
}
@media only screen and (min-width: 650px) {
  .map-frame-container {
    width: 50rem;
  }
}
@media only screen and (min-width: 1200px) {
  .messages-container,
  .main-heading,
  .container-fluid,
  p {
    width: 65%;
  }
  .map-frame-container {
    width: 65rem;
  }
}
@media only screen and (min-width: 1600px) {
  .messages-container,
  .main-heading,
  .container-fluid,
  p {
    width: 55%;
  }
  .map-frame-container {
    width: 80rem;
  }
}
@media only screen and (min-width: 2000px) {
  .messages-icon {
    width: 10%;
  }
  .contentWrapper > p:last-of-type {
    text-align: center !important;
  }
}