@font-face {
  font-family: 'Bakbak One';
  src: url('fonts/BakbakOneRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


body {
  font-family: 'Babak One', sans-serif;
}

h1 {
  font-weight: 700;
}

.landing-page {
    min-height: 100vh;
    background: url('images/background.png') no-repeat center center/cover;
    padding: 60px 20px;
  }

.logo {
  margin-bottom: 5rem;
  width: 300px;
}

.headline {
  font-family: 'Babak One', sans-serif;
  margin-bottom: 10rem;
}
  
/* Buttons */
.btn-red {
  background-color: #e53935;
  color: #fff;
  font-weight: bold;
  border-radius: 30px;
  padding: 12px 24px;
  border: none;

  /* padding: 0.75rem 2rem; */
  font-size: 1.5rem;
  /* border-radius: 0.5rem; */
}

.btn-red:hover {
  background-color: #c62828;
}

.btn-blue {
  background-color: #2196f3;
  color: #fff;
  font-weight: bold;
  border-radius: 30px;
  padding: 12px 24px;
  border: none;
}

.btn-blue:hover {
  background-color: #1976d2;
}

.btn-green {
  background-color: #43a047;
  color: #fff;
  font-weight: bold;
  border-radius: 30px;
  padding: 12px 24px;
  border: none;
}

.btn-green:hover {
  background-color: #2e7d32;
}

.click-wording {
  font-family: 'Babak One', sans-serif;
  font-size: 25px;
}

.btn-custom-red {
  background-image: url('images/button-red-background.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: white;
  font-weight: 700;
  font-size: 30px;
  padding: 12px 24px;
  width: 300px;
  height: 100px;
  border-radius: 10px;
  border: none;
  text-align: center;
  line-height: 75px;
}
.btn-custom-red:hover {
  filter: brightness(1.1);
}

.btn-custom-blue {
  background-image: url('images/button-blue-background.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: white;
  font-weight: 700;
  font-size: 30px;
  padding: 12px 24px;
  width: 300px;
  height: 100px;
  border-radius: 10px;
  border: none;
  text-align: center;
  line-height: 75px;
}
.btn-custom-red:hover {
  filter: brightness(1.1);
}

.btn-custom-green {
  background-image: url('images/button-green-background.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: white;
  font-weight: 700;
  font-size: 30px;
  padding: 12px 24px;
  width: 300px;
  height: 100px;
  border-radius: 10px;
  border: none;
  text-align: center;
  line-height: 75px;
}
.btn-custom-red:hover {
  filter: brightness(1.1);
}


/* mobile */

@media (max-width: 768px) {
  .landing-page {
    padding: 20px 10px;
  }

  .logo {
    /* width: 180px; */
    margin-bottom: 2rem;
  }

  .headline {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
  }

  .click-wording {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
  }

  .btn-custom-red,
  .btn-custom-blue,
  .btn-custom-green {
    font-size: 1rem;
    width: 100%;
    max-width: 240px;
    height: 55px;
    line-height: 55px;
    padding: 0;
    margin: 0 auto;
    display: block;
  }
}