.oi-section{
    background: url('../images/innitiatives_bg.png') no-repeat center center / cover;
    padding: 5em 1em;
}
.oi-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.oi-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 230px;
    max-width: 100%;
    height: 330px;
    position: relative;
    margin-bottom: 20px;

}
.oi-item::after{
    content: url('../images/innitiatives_hover.png');
    display: block;
    position: absolute;
    right: -1px;
    bottom: -5px;
    opacity: 0;
    transition: all 0.6s ease;
}
.oi-item:hover::after{
    opacity: 1;
}
.oi-item.oi-bg1{
    background-image: url('../images/lahore.png');
}
.oi-item.oi-bg2{
    background-image: url('../images/rawalpindi.png');
}
.oi-item.oi-bg3{
    background-image: url('../images/multan.png');
}
.oi-item.oi-bg4{
    background-image: url('../images/faisalabad.png');
}
.oi-item.oi-bg5{
    background-image: url('../images/other_cities.png');
}
.oi-item .oi-title{
    font: 20px poppinsB;
    color: #fff;
    text-transform: uppercase;
}

/* Our Services */
.os-section{
    background: url('../images/servicesbg.png') no-repeat center center / 100% 100%;
    /* padding: 5em 0; */
    margin-top: -1px;
}
.os-wrap{}
.os-items{
    display: flex;
    flex-wrap: wrap;
    /* justify-content: ; */
}
.os-item{
    flex-grow: 0;
    flex-shrink: 0;
    background: url('../images/service_bg.png') no-repeat center center / contain;
    display: block;
    width: 176px;
    height: 90px;
    padding: 1em;
    text-decoration: none !important;
    margin: 0 20px 20px 0;
    font: 12px poppinsB;
    color: #003a6d;
    transition: all 0.6s ease;
}
.os-item:hover{
    background-image: url('../images/service_bg_hvr.png');
    color: #fff;
    box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.20);
    -webkit-box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.20);
    -moz-box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.20);
}
/* Reponsive*/
@media screen and (max-width: 576px){}
@media screen and (max-width: 768px){
    .os-section {
        background-size: cover;
        background-position: right bottom;
    }
    .os-wrap {
        padding: 3em;
    }
}
@media screen and (min-width: 576px){}
@media screen and (min-width: 768px){
    .os-wrap {
        padding: 3em 1em 5em 2em;
    }
}
@media screen and (min-width: 992px){
    .os-wrap {
        padding: 5em 3em 5em 5em;
    }
}
@media screen and (min-width: 1200px){}