@import url(../constants.css);
.hero-wrapper {
    position: relative;
}
.hero-wrapper .layer {
    padding: 100px 0;
    background: rgba(0, 0, 0, 0.40);
}
.hero-wrapper .layer-blog {
    padding: 100px 0 0;
}

.hero-wrapper .content {
    width: 100%;
    margin: 0 auto;
}
/* .hero-wrapper:before {
    position: absolute;
    left: 0;
    height: 100%;
    width: 50%;
    content: '';
    background: var(--primary);
} */
.bgImageRT {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right 23% center;
}
.hero-wrapper .content{
    position: relative;
    z-index: 2;
}
.hero-wrapper .content .title {
    margin-bottom: 0;
}
.hero-wrapper .content .title > p{
    
}
.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 {
    /* Heading/H1 */
    font-family: var(--heading);
    font-size: 64px;
    font-weight: 700;
    line-height: 110%; /* 76.8px */   
}
.hero-wrapper .content .blog h1 {
    /* Heading/H1 */
    font-family: var(--heading);
    font-size: 48px;
    font-weight: 700;
    line-height: 120%; /* 76.8px */   
}
.hero-wrapper .content h6 {
    font-size: 31px;
    line-height: 54px;
    font-weight: 400;
}

.hero-wrapper .content p {
    font-size: 24px;
    line-height: 120%;
    font-weight: 700;
}
.hero-wrapper .image {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
  }
@media screen and (max-width: 767px) {
    .hero-wrapper .image {
        width: 70%;
    }
    .hero-wrapper .layer {
        padding: 50px 0;
    }
    .hero-wrapper .content h1 {
        font-size: 48px;
    }
}