/* -------------------- */
/* Hero Page Css Design */
/* --------------------- */

.index-hero {
  height: 100vh;
  background-image: url(./images/hero/index-hero.jpg);
  background-size: cover;
  background-position: bottom;
  background-color: rgba(0, 0, 0, 0.9);
}
@media only screen and (max-width: 800px) {
  .index-hero {
    background-size: 800px 720px;
  }
}

@media only screen and (max-width: 520px) {
  .index-hero {
    background-size: 500px 720px;
  }
}

.services-hero {
  height: 90vh;
  background-image: url(./images/hero/services-hero.jpg);
  background-size: cover;
  background-position: bottom;
}

@media only screen and (max-width: 800px) {
  .services-hero {
    background-size: 800px 720px;
  }
}

@media only screen and (max-width: 520px) {
  .services-hero {
    background-size: 500px 720px;
  }
}

.about-hero {
  height: 90vh;
  background-image: url(./images/hero/about-hero.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 800px) {
  .about-hero {
    background-size: 800px 720px;
  }
}

@media only screen and (max-width: 520px) {
  .about-hero {
    background-size: 500px 720px;
  }
}

.career-hero {
  height: 90vh;
  background-image: url(./images/hero/career-hero.jpg);
  background-size: cover;
  background-position: bottom;
}

@media only screen and (max-width: 800px) {
  .career-hero {
    background-size: 800px 720px;
  }
}

@media only screen and (max-width: 520px) {
  .career-hero {
    background-size: 500px 720px;
  }
}

.contact-hero {
  height: 90vh;
  background-image: url(./images/hero/contact-hero.jpg);
  background-size: cover;
  background-position: center;
}

@media only screen and (max-width: 800px) {
  .contact-hero {
    background-size: 800px 720px;
  }
}

@media only screen and (max-width: 520px) {
  .contact-hero {
    background-size: 500px 720px;
  }
}