.header{
    background: #151515 url('../images/bg-intro.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}
.header::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}
.header .text-container{
    z-index: 20;
}
.header .roles{
    font-family: 'lora-regular',serif;
}
.header .social{
    bottom: 50px;
}
.about-image{
    width: 200px;
}
.services{
    background: url(../images/bg.jpg)no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}
.services .container{
    z-index: 10;
}
.services::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0,0.5);
}
@media(max-width:767px){
    .header .social i{
        font-size: 40px;
    }
    .header .roles{
        font-size: 18px !important;
    }
    .about-content {
        flex-direction: column;
      }
}