@pink: #ec008c;

.mixin-btn() {
    cursor: pointer;
    font-size: 18px;
    line-height: 23px;
    color: #ffffff;
    padding: 10px 35px;
    display: inline-block;
    border: none;
    text-decoration: none;
    /*
    background: #fff;
    border:solid 2px #ec008c;
    color:#ec008c;
    */
    &:hover,
    &:active{
        background: #ec008c;
        text-decoration: none;
        color: #ffffff;
    }
    &[disabled]{
        background: #cbcaca;
        border:none;
        color:#fff;
    }
}

.btn-gray {
    background: #cbcaca;
    .mixin-btn();
}
.btn-pink {
    background: #ec008c;
    .mixin-btn();
}

.main-heading{
    text-transform: uppercase;
}

.service-description{
    padding-top: 40px;
    border-bottom: solid 5px #cbcaca;
    margin-bottom: 35px;
    background: #fff;
    .service-content{
        margin-left:4.75%;
        margin-right:4.75%;
        width:90.5%;
        margin-bottom: 30px;
        background: #fff;
        .h1,
        h1{
            color:#ec008c;
            font-size: 30px;
            border-bottom: solid 5px #cbcaca;
            line-height: 40px;
            font-weight: normal;
            margin-bottom: 25px;
            margin-top: 0;
        }
        .h2,h2{
            color:#ec008c;
            font-size: 18px;
            line-height: 24px;
            margin-top: 30px;
            margin-bottom: 15px;
            padding-right: 20px;
        }
        p:not(.help-block) {
            color:#000;
            font-size: 14px;
            line-height: 17px;
            margin-bottom: 17px;
            padding-right: 20px;
            &.add-text{
                color: #999999;
                font-size: 11px;
                font-style: italic;
            }
        }
        ul{
            padding-left: 0;
            padding-right: 20px;
            &.pagination{
                padding-right: 0;
            }
            li{
                background: url(../../images/ai/ul-pink.png) no-repeat 1px 10px;
                line-height: 17px;
                font-size: 14px;
                padding: 8px 0 8px 21px;
                list-style: none;
                .underline{
                    border-bottom: solid 1px #999;
                }
            }
        }
        .publish-date{
            border-top: solid 1px #cbcaca;
            text-align: right;
            display: block;
            padding-top: 10px;
        }
        .news{
            .publish-date{
                border-top: none;
            }
            .news-item{
                padding:10px 0;
                &+.news-item{
                    border-top: solid 2px #cbcaca;
                }
            }
        }
        .tags{
            margin: 10px 0;
            .tag-item{
                &+ .tag-item{
                    margin-left: 10px;
                }
            }
        }
    }
}

.before-after-block{
    padding-bottom: 60px;
    h2, .h2 {
        font-size: 30px;
        font-weight: 700;
        line-height: 1.2;
    }
    p {
        font-size: 16px !important;
    }

    .bg-wrapper{
        background: #e6e7e8;
        padding: 5px 15px;
        margin-bottom: 85px;
    }
    .img-wrap{
        text-align:center;
    }
    h2,.h2{
        margin-bottom: 20px;
        padding: 0 15px
    }
    p{
        color:#231f20;
        margin-bottom: 20px;
        padding: 0 15px;
    }
    img{
        max-width:100%;
        height:auto;
    }
}

.btn-pink-big {
    color: white;
    font-size: 18px;
    padding: 12px 22px;
    border-radius: 24px;
    background: @pink;
    display: inline-block;
    margin-bottom: 80px;
    text-transform: uppercase;

    &:hover,
    &:focus {
        color: white;
        text-decoration: none;
    }
}

@media (max-width: 1030px) {
    .service-description{
        .service-content,.service-sidebar{
            //width:47%;
            //margin-left:3%;
            p{
                padding-right: 0;
            }
        }
    } 
}

@media (max-width: 767px) {
    .main-heading{
        color:#fff;
        font-size: 19px;
        font-weight: bold;
        line-height: 23px;
        padding: 9px 18px;
        background: #ed008c;
        display: block;
        margin: 0;
    }
    .service-description{
        .service-content{
            width:96%;
            margin-left:2%;
            margin-right:2%;
        }
    }
}

@media (max-width: 767px) {
    .before-after-block {
        .bg-wrapper {
            margin-bottom: 30px;
        }
        .img-wrap {
            background: url(../../images/landings/whatsapp/bg-map.png) center no-repeat;
            background-size: contain;
        }
    }
}

@media (max-width: 767px) {
    .before-after-block{
        .img-wrap{
            background: none;
        }
        .img-part{
            width:100%;
            padding: 0;
            float:none;
        }
    }
}

@media (max-width: 600px) {
    .main-wrap{
        background: none;
    }
    .service-description{
        padding-top: 0;
        .service-content{
            width:95%;
            margin-left:2.5%;
            margin-right:2.5%;
            .h1,
            h1{
                color:#fff;
                font-size: 19px;
                font-weight: bold;
                line-height: 23px;
                padding: 9px 18px;
                margin: 0 -2.6% 10px;
                background: #ed008c;
                border-bottom:none;
            }
            h2,.h2{
                font-size: 12px;
                line-height: 16px;
                margin-top: 20px;
                margin-bottom: 10px;
            }
            p,ul li{
                font-size: 13px;
                line-height: 15px;
            }
            ul li{
                padding: 6px 0 6px 21px;
            }
        }
    }
}