*, html, body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

header{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    background-color: rgb(136, 0, 0);
    color: white;
}

h2{
    margin: 10px;
}

a{
    background-color: rgb(136, 0, 0);
    color: white;
    text-decoration: none;
    padding: 5px;
    border-radius: 5px;
    &:hover{
        background-color: rgb(90, 0, 0);
    }
    p{
        margin: 10px;
    }
}

.row{
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.topRow{
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 3px solid black;
    margin-bottom: 25px;
}

.smallCard{
    text-align: center;
    width: 300px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.card{
    width: 350px;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 5px solid black;
    margin: 10px;
    padding: 10px;
    position: relative;
    img{
        width: 100%;
    }
    p{
        margin: 10px;
    }
}

.step{
    position: absolute;
    top: -20px;
    left: -20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    padding: 5px;
    background-color: rgb(34, 124, 241);
    border-radius: 50%;
    color: white;
    font-size: 24px;
}

.code{
    width: auto;
    height: auto;
}

pre{
    padding: 5px;
    font-family: monospace;
    background-color: rgb(46, 46, 46);
    color: white;
}

:root{
  --hk-accent:#e1510a;
  --hk-dark:#1f1f1f;
}
.text-accent{color:var(--hk-accent)!important;}
.btn-primary{background:var(--hk-accent);border-color:var(--hk-accent);}
.btn-primary:hover{filter:brightness(0.95);}

/* HERO */
.hk-hero{background:linear-gradient(180deg,#101010, #1b1b1b); color:#fff; padding:64px 0;}
.hk-hero-figure{position:relative;}
.hk-hero-badge{
  position:absolute; left:12px; bottom:12px; right:12px;
  background:rgba(0,0,0,.65); color:#fff; border-radius:.75rem; padding:.75rem 1rem;
}
.hk-hero-proof{
  position:absolute; top:12px; left:12px; 
  background:#000; color:#fff; border-radius:999px; padding:.4rem .8rem; font-weight:700;
}

/* ICON CARDS */
.hk-iconcard{
  background:#2a2a2a; border-radius:1rem; padding:1rem; height:100%;
}
.hk-iconcard .hk-ic{font-size:1.75rem; line-height:1; margin-bottom:.4rem;}

/* GENERIC CONTENT CARDS */
.hk-card{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1.25rem; height:100%;
  transition:transform .12s ease, box-shadow .12s ease;
}
.hk-card:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.06);}

/* TESTIMONIALS */
.hk-quote{background:#fff; border-left:4px solid var(--hk-accent); padding:1rem 1.25rem; border-radius:.5rem; margin-bottom:1rem;}
.hk-showcase{background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.25rem;}

/* EVENTS */
.hk-event{background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.25rem; height:100%;}
.badge-dark{background:#222;}

/* LOCATIONS */
.hk-location{background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem 1.25rem; display:flex; justify-content:space-between; align-items:center;}

/* FINAL CTA */
.hk-cta{background:linear-gradient(135deg, var(--hk-accent), #000); color:#fff; padding:64px 0;}