@import url(../constants.css);
.hero-wrapper {
    position: relative;
}
.hero-wrapper .layer {
    padding: 176px 0 100px;
    background: linear-gradient(360deg, rgba(6, 6, 9, 0.80) 2.91%, rgba(6, 6, 9, 0.00) 70%);
    border-radius: 0px 0px 64px 64px;
}
.hero-wrapper .layer h1{
    margin-bottom: 0;
    /* Heading/H1 */
    font-family: var(--heading);
    font-size: 64px;
    font-weight: 600;
    line-height: 110%; /* 76.8px */
}

.hero-wrapper .content {
    text-align: left;
}

.hero-wrapper .content a.btn {
    margin-top: 20px;
}

.hero-wrapper .content h1,
.hero-wrapper .content h6,
.hero-wrapper .content span,
.hero-wrapper .content li {
    font-family: var(--heading);
    color: var(--white);
}
.hero-wrapper .content p{
    color: var(--white);
    margin-bottom: 0;
    font-family: var(--text);
}

.hero-wrapper .content h1 {
    margin-bottom: 0;
    /* Heading/H1 */
    font-family: var(--heading);
    font-size: 64px;
    font-weight: 600;
    line-height: 120%; /* 76.8px */   
}

.hero-wrapper .content h6 {
    font-size: 31px;
    line-height: 54px;
    font-weight: 400;
}

.hero-wrapper .content p {
    font-size: 18px;
    line-height: 140%;
    font-weight: 400;
    margin-bottom: 24px;
}
@media screen and (max-width: 767px) {
    .hero-wrapper .content h1 {
        font-size: 48px;
    }
}