.bk-gradation {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex

}



@media only screen and (max-width: 767px) {

    .bk-gradation {

        -ms-flex-wrap:wrap;

        flex-wrap: wrap

    }

}










@media only screen and (max-width: 767px) {

    .bk-gradation .item-grid .line {

        display:none

    }

}



.bk-gradation .item-grid .dot-wrap {

   

    margin: 0 auto 24px

}



.bk-gradation .item-grid .dot-wrap .dot {

    background: #ee1d23;

}



.bk-gradation .item-grid .dot-wrap .dot::after,.bk-gradation .item-grid .dot-wrap .dot::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%,-50%);

    -ms-transform: translate(-50%,-50%);

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background: inherit

}



.bk-gradation .item-grid .dot-wrap .dot::before {

    width: 80px;

    height: 80px;

    opacity: .3

}



.bk-gradation .item-grid .dot-wrap .dot::after {

    width: 60px;

    height: 60px;

    opacity: .7

}



.bk-gradation .item-grid .dot-wrap .dot .count {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%,-50%);

    -ms-transform: translate(-50%,-50%);

    transform: translate(-50%,-50%);

    height: 40px;

    width: 40px;

    line-height: 40px;

    font-size: 16px;

    font-weight: 600;



    background: inherit;

    border-radius: 50%;

    text-align: center;

    z-index: 3;



}







.bk-gradation .item-grid .content.bg-black {

    background: #ee1d23;

    color: #fff

}



.bk-gradation .item-grid .content.bg-black::before {

    border-bottom-color: 

}



.bk-gradation .item-grid .content.bg-black h5 {

    color: #fff

}



.bk-gradation .item-grid .content h5.heading {

    font-size: 20px;

    margin-bottom: 12px

}

.bk-gradation .item-grid .services-item p{
    font-size: 16px;
}


.bk-gradation .item-grid:first-child .line {

    display: none

}











.bk-gradation .item-grid.custom-color--2 .dot-wrap .dot {

    background: #f55d4e

}



.bk-gradation .item-grid.custom-color--3 .dot-wrap .dot {

    background: #9013fe

}



.bk-gradation .item-grid.custom-color--4 .dot-wrap .dot {

    background: #7ed321

}



.bk-gradation .item-grid.custom-color--5 .dot-wrap .dot {

    background: #d0021b!important

}



.bk-gradation .item-grid.custom-color--6 .dot-wrap .dot {

    background: #f5a623!important

}



.bk-gradation .item-grid.custom-color--7 .dot-wrap .dot {

    background: #7ed321!important

}
.brook-gradation-area .bk-gradation .item-grid {
    box-shadow: 0px 0px 15px rgba(0,0,0,0.10);
    background: #fff;
    padding: 50px 45px;
    border-radius: 10px;
    position: relative;
}
.brook-gradation-area .bk-gradation .item-grid .patern-layer{
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0 10px 0 0;
    overflow: hidden;
}


@media only screen and (max-width: 736px){

    .bk-gradation .item-grid .content{

        max-width: 100%;

        padding: 20px;

    }

}