*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%;
  background-color: #FAFDFF; }

body {
  box-sizing: border-box; }

a {
  color: inherit;
  text-decoration: none; }

ul {
  list-style: none; }

::selection {
  background-color: #01B449;
  color: #fff; }

body {
  font-family: 'Helvetica Neue', Helvetica, Verdana, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.7;
  color: #1E2124; }

h1 {
  font-size: 3em;
  font-weight: 200; }

h2 {
  font-size: 3em;
  font-weight: 200; }

h4 {
  font-size: 1.8rem; }

.nav {
  font-family: 'DIN-Condensed-Bold', 'Helvetica Neue', Helvetica, sans-serif; }
  .nav__brand-name {
    color: #FAFDFF;
    font-size: 2.4rem; }
  .nav__list li a:hover {
    color: #FAFDFF; }

.main-header .call-to-action__button a {
  color: #1E2124; }

.main-header .call-to-action__button-info {
  font-size: 1rem; }

.services__article--list {
  font-size: 1.4rem; }

.company-info-container {
  font-weight: 300; }

.company-info .good-to-know {
  font-weight: 500; }

.stats {
  font-family: 'DIN-Condensed-Bold', 'Helvetica Neue', Helvetica, sans-serif; }
  .stats__element {
    line-height: 1; }
    .stats__element--value {
      font-size: 8rem; }
    .stats__element--info {
      font-size: 1.4rem; }

.contact h2 {
  font-family: 'DIN-Condensed-Bold', 'Helvetica Neue', Helvetica, sans-serif; }

.contact--number {
  font-size: 2.4rem; }

.contact--time {
  font-size: 2.4rem; }

.footer-container {
  font-size: 1.2rem;
  font-weight: 200;
  color: rgba(250, 253, 255, 0.8); }

.footer .madeby {
  color: rgba(250, 253, 255, 0.3); }

@font-face {
  font-family: 'DIN-Condensed-Bold';
  /*a name to be used later*/
  src: url("../fonts/DIN-Condensed-Bold.ttf");
  /*URL to font*/ }

@media (orientation: portrait) {
  h1 {
    font-size: 2.4rem; }
  h2 {
    font-size: 2.2rem; } }

.company-info {
  background-image: url("../images/roofs-01.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center bottom;
  background-size: cover; }
  .company-info-container {
    padding: 0 10vw; }
    .company-info-container p {
      margin-bottom: 1rem; }
    .company-info-container ul {
      list-style: disc;
      padding-left: 10vw; }
      .company-info-container ul li {
        margin-bottom: 1rem; }
  .company-info .good-to-know {
    margin-top: 3rem; }

@media (orientation: portrait) {
  .company-info-container {
    padding: 0 5vw; } }

.contact-bar {
  padding: 0 5vw;
  font-size: 1.2rem; }
  .contact-bar-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16.2rem, 1fr));
    grid-column-gap: 2rem;
    padding: 0.2rem;
    border-bottom: 1px solid #1E2124; }
  .contact-bar__title {
    text-align: start; }
  .contact-bar__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16.2rem, 1fr));
    grid-column-gap: 1rem;
    justify-items: end;
    align-items: center; }
    .contact-bar__list li a {
      padding: 0.1rem 0.5rem;
      border-radius: 0.2rem;
      border: 1px solid rgba(30, 33, 36, 0);
      transition: all ease 0.2s; }
      .contact-bar__list li a:hover {
        border: 1px solid #1E2124; }

@media (orientation: portrait) {
  .contact-bar {
    padding: 0 0.8rem; } }

.contact {
  background-color: #374B59;
  color: #FAFDFF;
  text-align: center; }
  .contact * {
    margin-top: 3rem; }
  .contact--map {
    display: grid; }
    .contact--map img {
      margin: 0 auto;
      width: 50vw;
      height: auto; }

@media (orientation: portrait) {
  .contact--map img {
    width: 80vw; } }

.footer {
  background-color: #1E2124;
  color: #FAFDFF;
  padding: 1rem;
  min-height: 5rem; }
  .footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    grid-gap: 2rem;
    align-items: center;
    justify-items: center; }
  .footer .s-m-container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 1rem;
    align-items: center; }
    .footer .s-m-container a {
      justify-self: end; }
      .footer .s-m-container a img {
        width: 3rem;
        height: auto; }

.main-header {
  min-height: 100vh;
  background-image: url("../images/hero.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center bottom;
  background-size: cover;
  background-color: #79A1BC;
  text-align: center; }
  .main-header section {
    padding-top: 3vh; }
  .main-header-container {
    padding-bottom: 50vw; }
  .main-header h1 {
    margin: 5vh auto 10vh auto;
    max-width: 50vw;
    color: #BEF0FF;
    text-shadow: 0.1rem 0.1rem 0.1rem #00000088; }
  .main-header .call-to-action__button {
    margin: 1rem; }
    .main-header .call-to-action__button a {
      padding: 0.6rem 1.2rem;
      border-radius: 0.2rem;
      border: 0.1rem solid #1E2124; }

@media (orientation: portrait) {
  .main-header-container {
    padding-bottom: 0; }
  .main-header h1 {
    text-shadow: none;
    max-width: 90vw; } }

.nav-container {
  padding: 1rem 5vw; }

.nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24.1rem, 1fr));
  align-items: center; }
  .nav-brand {
    display: grid;
    grid-template-columns: 10rem 1fr;
    justify-items: start;
    align-items: center;
    grid-gap: 1rem; }
  .nav__logo {
    width: 10rem;
    height: auto; }
  .nav__brand-name {
    min-width: 12rem; }
  .nav__list {
    display: flex;
    justify-content: end;
    flex-wrap: wrap; }
    .nav__list li {
      margin-left: 1rem; }
      .nav__list li a {
        padding: 0.1rem 0.5rem;
        border-radius: 0.2rem;
        border: 1px solid rgba(30, 33, 36, 0);
        transition: all ease 0.2s; }

.section {
  padding: 10vh 5vw; }
  .section h2 {
    margin: 0 auto 10vh auto;
    text-align: center; }

@media all and (max-width: 450px) {
  .section {
    padding: 10vh 2vw; } }

@media all and (max-width: 360px) {
  .main-header h1 {
    margin: 0 auto 8vh auto; }
  .main-header__section {
    padding: 5vh 2vw; } }

.services {
  background-color: #FAFDFF; }
  .services-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
    grid-column-gap: 3vw;
    grid-row-gap: 5rem; }
  .services__article--title {
    text-align: start;
    margin-bottom: 2rem; }
  .services__article--image {
    border-radius: 10rem;
    width: 15rem;
    box-shadow: 0 0.2rem 0.4rem #00000088; }
  .services__article-container {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 2rem; }
  .services__article--list li {
    margin-bottom: 1rem; }
    .services__article--list li:last-of-type {
      margin: 0; }

@media all and (max-width: 450px) {
  .services__article--image {
    width: 8rem; } }

.stats {
  background-color: #67181C;
  color: #B34B4D; }
  .stats-container {
    max-width: 90rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    grid-column-gap: 3rem;
    grid-row-gap: 5rem; }
  .stats__element {
    text-align: center; }

@media all and (min-width: 450px) {
  .stats-container {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }