.float-button{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4C43CD;
    background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
    box-shadow: 2px 19px 31px rgba(0, 0, 0, 0.2);
    color: #fff;    
    line-height: 1em;
    font-family: Phantomsans, sans-serif;

} 


.float-picture{
    width: 130px;
    height: 130px;
    background:url('../img/zahid1.jpg') no-repeat 0;
    background-size: contain;
    box-shadow: 1px 2px 1px 1px rgba(0,0,0,0.2);
    border-radius: 50%;
}

.float-left {
    float: left;
    margin-right: 1rem;
}

.float-right {
    float: right;
    margin-left: 1rem;
}

.clear{
    clear: both;
}

.float-section {
    display: flow-root;
    padding: 1rem;
}

.float-skill{    
    width: 300px;
    height: 300px;
    color: white;
    background:url('../img/skills.png') no-repeat 0;
    background-size: contain;

}

.float-curve{
    width: 300px;
    height: 300px;
    background:url('../img/learning-curve.png') no-repeat 0;
    background-size: contain;

}

.float-architecture{
    width: 300px;
    height: 300px;
    background:url('../img/kiss.png') no-repeat 0;
    background-size: contain;

}


.float-kylin{
    width: 250px;
    height: 250px;
    background:url('../img/kylin_logo.png') no-repeat 0;
    background-size: contain;
}


.float-nifi{    
    width: 350px;
    height: 350px;
    color: white;
    background:url('../img/apache-nifi-logo.svg') no-repeat 0;
    background-size: contain;
}

.float-spark{    
    width: 200px;
    height: 200px;
    color: white;
    background:url('../img/spark.png') no-repeat 0;
    background-size: contain;
}

.float-opta{    
    width: 200px;
    height: 200px;
    color: white;
    background:url('../img/optaPlannerLogo200px.png') no-repeat 0;
    background-size: contain;
}