@font-face{
  font-family: 'Dilemma';
  src: url('assets/fonts/DilemmaDilemma--normal.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

@font-face{
  font-family: 'Dilemma Sans';
  src: url('assets/fonts/dilemma-sans-bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family: 'Dilemma Sans';
}

/* HERO SECTION */
.hero{
  width:100%;
  height:100vh;
  background-image:url('../../assets/images/banner.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 0%;
}

/* Dark overlay */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0);
}

/* Content */
.hero-content{
  position:relative;
  z-index:2;
  color:#fff;
  max-width: 95%;
}

.hero h1{
  font-size:3.5vw;
  line-height:1.1;
  margin-bottom:1rem;
}

.hero p{
  font-size:1.8vw;
  line-height:1.2;
  margin-bottom:2rem;
  font-family: 'Dilemma';
}

.hero a{
  display:inline-block;
  padding:0.7em 2.5em;
  background:#ffc800;
  color:#000;
  text-decoration:none;
  font-size:1.45rem;
  font-weight:bold;
  border-radius:0rem;
  transition:0.3s ease;
}

.hero span{
  display: block;
  font-size:1vw;
  line-height:1.2;
  margin-top:1rem;
  font-family: 'Dilemma';
}

/* Tablet */
@media (max-width: 991px){
  .hero-content{
    max-width:80%;
  }

  .hero h1{
    font-size:6vw;
  }

  .hero p{
    font-size:2.2vw;
  }
}

/* Mobile */
@media (max-width: 768px){
  .hero{
    height:100vh;
    background-image:url('../../assets/images/banner.png');
    padding:0 0%;
  }

  .hero-content{
    max-width:90%;
    margin-top: 30px;
  }

  .hero h1{
    font-size:2.2rem;
  }

  .hero p{
    font-size:1rem;
  }

  .hero a{
    width:100%;
    max-width: 14rem;
    padding:1rem 1.5rem;
    font-size:1rem;
  }

  .hero span{
    font-size:2.6vw;
  }
}

/* Very small phones */
@media (max-width: 480px){
  .hero h1{
    font-size:2.1rem;
  }

  .hero p{
    font-size:1.1rem;
  }
}

/* ---------- footer ---------- */
.footer{
  position: relative;
  z-index: 3;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #000;
}

.footer a{
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246,241,230,0.7);
  text-decoration: none;
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.footer a:hover{
  color: rgba(246,241,230,0.7);
  border-color: var(--gold-light);
}

.hero-logo{
  width: 12vw;
  max-width: 180px;
  min-width: 90px;
  height: auto;
  display: block;
  margin: 0 auto 4.5rem;
}

@media (max-width: 768px){
  .hero-logo{
    width: 34vw;
    max-width: 140px;
    min-width: 80px;
    margin-bottom: 3.5rem;
  }
}

@media (max-width: 480px){
  .footer{ padding: 18px 24px 22px; }
}