.task-section{
position: relative;
padding: 105px 0px 50px;
background-color: #443986;
}
.task-section:before{
position: absolute;
content: '';
left: 0px;
top: 0px;
width: 30%;
height: 100%;
display: block;
background-color: #ffffff;
}
.task-section .image-column{
position: relative;
margin-bottom: 40px;
}
.task-section .image-column .inner-column{
position: relative;
margin-right: 20px;
margin-left: -250px;
}
.task-section .image-column .inner-column .image{
position: relative;
overflow: hidden;
}
.task-section .image-column .inner-column .image::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
display: block;
content: '';
width: 0;
height: 0;
background: rgba(255, 255, 255,.2);
border-radius: 0%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.task-section .image-column .inner-column .image:hover::before {
-webkit-animation: circle .95s;
animation: circle .95s;
}
.task-section .image-column .inner-column .image img{
position: relative;
width:100%;
display: block;
}
.task-section .content-column{
position: relative;
}
.task-section .content-column .inner-column{
position: relative;
margin-right: -115px;
padding-left: 40px;
}
.task-section .content-column .inner-column .title{
position: relative;
color:var(--theme-color);
font-size: 13px;
font-weight: 700;
margin-bottom: 8px;
text-transform: uppercase;
}
.task-section .content-column .inner-column h2{
position: relative;
color:#ffffff;
font-size: 48px;
font-weight: 600;
line-height: 1.3em;
margin-bottom: 45px;
}
.task-section .content-column .inner-column .btn-box{
position: relative;
margin-left: 58px;
margin-top: 50px;
}