.hero{
    position: relative;
    height:100vh;
    width:100%;
}

.heroBGImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.heroGrid, .heroCircle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.heroGrid {
    background-image: linear-gradient(90deg,#80808012 1px,#0000 1px),linear-gradient(#80808012 1px,#0000 1px);
    background-color: black;
    background-position: center;
    background-size: 24px 24px;
}

.heroCircle{
    background-image: radial-gradient(circle 800px at 50% 200px,#050505,transparent);
}

.heroText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.heroChevron {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
}

.heroChevron svg {
    width: 80%;
    height: 80%;
}

body{
    background-color: black;
}

.heroWord1 h1 {
    font-family: 'PlayFair Display';
    color: white;
    margin: unset;
    text-align: center;
    font-size: 7em;
    line-height: 80%;
}

.heroWord2 h1 {
    color: #a1a1aa;
    font-family: 'PlayFair Display';
    margin: unset;
    text-align: center;
    font-size: 7em;
    font-style: italic;
}

.heroTextDescription h2 {
    font-family: 'Inter';
    color: white;
    padding: 0 10%;
    text-align: center;
    font-weight: 400;
    font-size: 2.2em;
}

.heroTextDescription h2 {
    font-family: 'Inter';
    color: white;
    padding: 0 10%;
    text-align: center;
    font-weight: 200;
    font-size: 2.2em;
}

.heroTextDescription h2 strong {
    color: #a1a1aa;
    font-weight: 600;
}

.heroTextLocation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}