h1,
h2,
h3,
h4,
h5 {
  font-family: "Lato", Arial, Helvetica, sans-serif;
}

p,
a {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 1rem;
}

/* HOME PAGE - SERVICES */

.services-panel:hover {
  cursor: pointer;
  /* background-color: rgba(228, 218, 61, 0.5) !important; */
}
.services-panel img {
  padding: 10px 20px;
  border-radius: 3%;
}

.services-panel:hover img {
  background-color: rgba(100, 100, 100, 0.4);;
  /* width: 35% !important; */
}

.services-panel:hover p {
  color: #fff !important;
}

.services-panel:hover h3 {
  font-weight: 600;
}

/* HERO STYLE */

.hero-base {
  height: 80vh;
  background-position: top;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-base h1 {
  font-size: 3rem;
  font-weight: 600;
}

.header-shadow {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 5%;
}

#hero-toiture {
  background-image: url("../img/services/toiture_hero.jpg");
}

#hero-zinguerie {
  background-image: url("../img/services/zinguerie_hero.jpg");
}

#hero-nettoyage {
  background-image: url("../img/services/nettoyage_hero.jpg");
  height: 95vh;
}

#hero-ravalement {
  background-image: url("../img/services/ravalement_hero.jpg");
  justify-content: center;
  align-items: center;
}

/* Above : phone landscape & smaller */
@media all and (min-width: 480px) {
  .hero-base {
    height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero-base h1 {
    font-size: 6rem;
  }

  #hero-ravalement {
    justify-content: start;
  }

  #hero-nettoyage .hero-sub-nettoyage {
    width: 50%;
    margin-left: 3rem;
  }

  #hero-zinguerie .hero-sub-zinguerie {
    width: 50%;
    margin-left: 3rem;
  }
}