body {
    width:100%;
    margin:0;
}

.hero {
    display:flex;
    color:white;
    flex-direction:column;
    height:100vh;
    padding:0 20vw;
    justify-content:center;
    background-size:cover;
    gap:25px;
    align-items: flex-start;
}


.hero h1 {
    font-size:2.5em;
    margin:0;
    padding:0;
    line-height:1;
    text-align:center;
}
.hero p {
    font-size:1.5em;
}

.home .hero {
    background-image:url("/assets/images/hero-image.png");
    width:100vw;
    position:relative;
    margin:0;
}

.home .hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Black overlay with 50% opacity */
    z-index: 1;
}

section {
    margin:10vw;
}

.hero .heading {
    z-index:1000;
}

.btn-group {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin-top:50px;
}


.btn-group .btn-primary {
    margin-right:50px;
}

.btn-group .btn-secondary {
    margin-left:50px;
}
.btn-primary, .btn-secondary  {
    width: min(150px, 20vw);
    height:min(75px, 10vw);
    font-weight:800;
    border-radius:6px;
}

.btn-primary {
    background-color:yellowgreen;
}

.btn-secondary {
    background-color: lightslategrey;
}