// section Tittle
.section-tittle{
    span{
        color:#2b4b80;
        font-size: 16px;
        font-weight: 700;
        display: inline-block;
        position: relative;
        margin-bottom: 16px;
        &::before{
            position: absolute;
            width: 45px;
            height: 2px;
            content: "";
            background:#2b4b80;
            left: -60px;
            bottom: 0;
            top: 50%;
            transform: translateY(-50%);
            line-height: 1;
            margin-bottom: 20
        }

    }
    & h2{
        color: $heading_color;
        font-size: 50px;
        font-weight: 700;
        margin-bottom: 66px;
        line-height: 1.3;
        @media #{$md}{
			font-size: 45px;
            line-height: 1.3;
        } @media #{$sm}{
			font-size: 23px;
            line-height: 1.3;
        }
         @media #{$xs}{
			font-size: 23px;
            line-height: 1.3;
		}
    }
}


// what we will do start
.what-we-do{
    //shape // left shape
    position: relative;
    &::before{
        background-image: url(../img/shape/what_do.png);
        position: absolute;
        content: "";
        top: -187px;
        z-index: 1;
        background-repeat: no-repeat;
        left: 0px;
        max-width: 243px;
        max-height: 482px;
        width: 243px;
        height: 482px;
        @media #{$md}{
			display: none;
        } 
         @media #{$sm}{
			display: none;
		}
        @media #{$xs}{
			display: none;
		}
    }
    // Right shape
    &::after{
        background-image: url(../img/shape/what_do_right.png);
        position: absolute;
        content: "";
        bottom: -187px;
        z-index: -1;
        background-repeat: no-repeat;
        right: 0px;
        max-width: 351px;
        max-height: 461px;
        width: 351px;
        height: 461px;
        bottom: 125px;
        @media #{$lg}{
			display: none;
        }
         @media #{$md}{
			display: none;
        }
         @media #{$sm}{
			display: none;
		}
        @media #{$xs}{
			display: none;
		}
    }
    .single-do{
        @include transition(.3s);
        padding:56px 40px 69px;
        @media #{$lg}{
			padding: 41px 17px 63px;
        }
         @media #{$md}{
			padding: 41px 17px 63px;
        }
        @media #{$sm}{
			padding: 41px 17px 63px;
        } 
        @media #{$xs}{
			padding: 41px 17px 63px;
		}

       
        border-radius: 6px;
        .do-icon{
            span{
                font-size: 73px;
                margin-bottom: 20px;
                display: inline-block;
                color: $theme_color;
            }
        }
        .do-caption{
            h4{
                font-size: 24px;
                font-weight: 600;
                margin-bottom: 23px;
                @media #{$lg}{
                   font-size: 21px;
                }
            }
            p{
                margin-bottom: 40px;
                // padding: 0 40px;
                @media #{$xs}{ }
            }
        }
        .do-btn{
            a{
                color: #c5ccd8;
                text-transform: uppercase;
                font-size: 13px;
                font-weight: 500;
                @include transition(.3s);
                
                i{
                    background: #c5ccd8;
                    width: 24px;
                    height: 24px;
                    display: inline-block;
                    line-height: 24px;
                    color:#fff;
                    border-radius: 50%; 
                    margin-right: 7px;
                    @include transition(.3s);
                }
            }
        }
    }
}
// Hover
.single-do:hover {
    box-shadow: 0px 10px 30px 0px rgba(133, 66, 189, 0.1);
    .do-btn a {
        color: #7b40c0;
        
        & i{
            background:#7b40c0;
        }
    }
}
.single-do.active {
    box-shadow: 0px 10px 30px 0px rgba(133, 66, 189, 0.1);
    .do-btn a {
        color: #7b40c0;

        & i{
            background:#7b40c0;
        }
    }
}


// what we will do End