styles.css

body,
    html {
      height: 100%;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

    .hero-image {
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/background1.jpg);
      height: 100%;
      background-position:55% 55%;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      opacity: 95%;
      /* filter: grayscale(100%); */
    }

    .hero-text {
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
    }

    .hero-text button {
      border: none;
      outline: 0;
      display: inline-block;
      padding: 10px 25px;
      color: black;
      background-color: #ddd;
      text-align: center;
      cursor: pointer;
    }

    .hero-text button:hover {
      background-color: #555;
      color: white;
    }
    .btn-space {
      margin-right: 5px;
      margin-bottom: 5px !important;
  }