#block-panels-mini-product-menu,
.projects-banner {
    background: #f9e8f4;
}

.pb-left {
    max-width: 430px;
}

.pb-right {
    max-width: 500px;
    height: 500px;
    position: relative;
}

.blueprint-workflow-wrap {
    position: relative
}

.workflow-box {
    position: absolute;
    min-width: 110px;
    color: #fff;
    text-align: center;
    padding: 7px 25px;
    font-size: 14px;
    border-radius: 5px;
    transition: .5s all;
    border: 1px solid #d3afc8;
    z-index: 1;
}

.line-after:after,
.line-before:before {
    content: '';
    position: absolute;
    transition: .5s all;
    transform: translateX(-50%);
    z-index: -1;
}

.op-start {
    top: 0;
    left: 153px;
    color: #000;
    background: #fff;
    border-radius: 50px;
    opacity: 1;
    border-color: #cfa7c3;
}

.op-start.line-after:after {
    width: 2px;
    height: 50px;
    background: #CFA7C3;
    top: 36px;
    left: 50%;
}

.op-open {
    top: 87px;
    left: 151px;
    background: #fff;
    color: #000;
    border-color: #cfa7c3;
    opacity: 1;
}

.op-open.line-after:after {
    width: 2px;
    height: 50px;
    background: #CFA7C3;
    top: 36px;
    left: 50%;
}

.op-submit {
    top: 174px;
    left: 122px;
    background: #e839b2;
    border-color: #e839b2;
}

.op-submit.line-after:after {
    width: 2px;
    height: 50px;
    background: #CFA7C3;
    top: 36px;
    left: 50%;
}

.op-progress {
    top: 261px;
    left: 135px;
    background: #fff;
    color: #000;
}

.op-progress.active {
    opacity: 1 !important
}

.op-progress.line-after:after {
    width: 54px;
    height: 2px;
    background: #CFA7C3;
    top: 50%;
    left: 165px;
}

.op-progress.line-after:before {
    width: 61px;
    height: 2px;
    background: #CFA7C3;
    top: 50%;
    right: 108px;
}

.op-approve {
    top: 343px;
    left: 0;
    background: #20afe7;
    border-color: #1d9acb;
    padding: 0;
    cursor: pointer;
    width: 150px;
    padding: 0;
}

.active.op-approve {
    opacity: 1 !important;
    background: #F44FC1;
    border-color: #ED43B9;
    pointer-events: none;
}

.op-approve.line-after:after {
    width: 2px;
    background: #eedce9;
    top: 36px;
    left: 50%;
    height: 50px;
}

.active.op-approve.line-after:after {
    height: 50px
}

.op-approve.line-after:before {
    width: 2px;
    background: #CFA7C3;
    bottom: 36px;
    left: 50%;
    height: 63px;
}

.op-publish {
    top: 430px;
    left: 10px;
    background: #fff;
    color: #e0e0e0;
    border-color: #c7c7c7;
}

.active.op-publish {
    transition-delay: 1s;
    opacity: 1 !important;
    color: #000;
}

.active.op-publish .status-dot:before {
    background: #EA4B42;
}

.op-reject {
    top: 343px;
    left: 260px;
    width: 135px;
    background: #1fafe7;
    border-color: #1D9ACB;
    padding: 0;
    cursor: pointer;
}

.op-reject.active {
    opacity: 1 !important;
    background: #F44FC1;
    border-color: #ED43B9;
    color: #fff;
    pointer-events: none;
}

.op-reject.active svg,
.active.op-reject .act-reject:after,
.active.op-approve svg,
.active.op-approve .act-approve:after {
    display: none;
}

.op-reject.line-after:after,
.op-reject.line-before:before {
    width: 2px;
    background: #eedce9;
    left: 50%;
}

.op-reject.line-after:after {
    height: 50px;
    top: 36px;
}

.active.op-reject.line-after:after {
    background: #CFA7C3;
}

.active.op-reject.line-after:after,
.active.op-approve.line-after:after {
    background: #CFA7C3;
}

.op-reject.line-before:before {
    height: 62px;
    bottom: 36px;
    background: #CFA7C3;
}

.op-hold {
    top: 430px;
    left: 271px;
    background: #fff;
    color: #e0e0e0;
    border-color: #c7c7c7;
    z-index: 4;
}

.active.op-hold {
    opacity: 1 !important;
    transition-delay: .5s;
    border-color: #CFA7C3;
    color: #000;
}

.active.op-hold .status-dot:before {
    background: #B99997;
}

.op-hold.line-before:before {
    width: 55px;
    background: #eedce9;
    left: 118px;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    /* opacity: 0; */
}

.active.op-hold.line-before:before {
    transition-delay: 1s;
    height: 2px;
    background: #CFA7C3;
}

.op-reopen {
    top: 87px;
    right: 0;
    padding: 0;
    background: #fff;
    color: #e0e0e0;
    border-color: #c7c7c7;
}

.active.op-reopen {
    transition-delay: 2s;
    opacity: 1;
    background: #F44FC1;
    border-color: #E839B2;
    color: #fff;
}

.op-reopen.line-after:after,
.op-reopen.line-before:before {
    height: 2px;
    background: #eedce9;
    top: 50%;
    transform: translateY(-50%)
}

.op-reopen.line-after:after {
    top: 36px;
    width: 2px;
    left: 50%;
    height: 325px;
    transform: translateX(-50%);
    z-index: -3;
}

.active.op-reopen.line-after:after {
    transition-delay: 1.5s;
    width: 2px;
    background: #CFA7C3;
}

.op-reopen.line-before:before {
    left: initial;
    right: 111px;
    width: 127px;
}

.active.op-reopen.line-before:before {
    transition-delay: 2.5s;
    width: 127px;
    background: #CFA7C3;
}

.op-reject span,
.op-approve span,
.op-reopen span {
    position: relative;
    display: block;
    padding: 7px 30px;
    z-index: 1
}

.op-approve span,
.op-reject span {
    padding: 7px 20px;
}

.op-reject span:after,
.op-approve span:after {
    content: '';
    mix-blend-mode: screen;
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.pb-right ul {
    display: flex;
    position: absolute;
    top: 0;
    right: 0
}

.pb-right ul li {
    text-transform: capitalize;
    color: #959595;
    position: relative;
    z-index: 1;
    padding: 0 0 0 40px;
    cursor: pointer
}

.pb-right ul li:after,
.pb-right ul li:before {
    content: '';
    position: absolute;
    top: 8px;
    left: 20px;
    width: 10px;
    height: 10px;
    cursor: pointer;
    border-radius: 50%;
    z-index: -1
}

.act-approve:after,
.act-approve:before {
    background: rgb(248 27 27);
}

.act-approve:before {
    animation-duration: 1.1s
}

.active.act-approve:after,
.active.act-approve:before {
    animation: none
}

.act-approve.active {
    color: #fff
}

.act-reject:after,
.act-reject:before {
    background: #f81b1b;
}

.act-reject:before {
    animation-duration: 1.1s
}

.active.act-reject:after,
.active.act-reject:before {
    animation: none
}

.active.act-reject {
    color: #fff
}

.op-start .triangle {
    top: 82px;
    border-top-color: #cfa7c3;
}

.op-open .triangle {
    top: 82px;
    border-top-color: #cfa7c3;
}

.op-submit .triangle {
    top: 82px;
    border-top-color: #cfa7c3;
}

.op-progress .triangle {
    top: 76px;
    border-top-color: #cfa7c3;
    margin-left: 123px;
}

.op-approve .triangle {
    top: -6px;
    border-top-color: #cfa7c3;
}

.op-publish .triangle {
    top: -6px;
    border-top-color: #eedce9;
    margin-left: -1px;
}

.active.op-publish .triangle {
    border-top-color: #cfa7c3;
}

.op-reject .triangle {
    top: 81px;
    border-top-color: #eedce9;
}

.active.op-reject .triangle {
    border-top-color: #cfa7c3;
}

.op-hold .triangle {
    margin-left: 109px;
    top: -307px;
    transform: rotate(180deg);
    z-index: 6;
    border-top-color: #eedce9;
}

.active.op-hold .triangle {
    border-top-color: #cfa7c3;
}

.op-reopen .triangle {
    transform: rotate(90deg);
    margin-left: -185px;
    top: 16px;
    border-top-color: #eedce9;
}

.active.op-reopen .triangle {
    border-top-color: #cfa7c3;
}

.fea-content-wrap {
    max-width: 400px;
}

.fea-content-wrap p:last-child {
    margin: 0
}

.fea-content-wrap p a {
    font-family: var(--zf-secondary-semibold);
    margin: 15px 0 0;
    display: inline-block
}

.fea-image-wrap {
    max-width: 680px;
    z-index: 1;
}

.fea-image-wrap img:nth-child(1) {
    opacity: .4;
    height: 600px;
    filter: blur(1.5px);
    position: relative;
    left: 30px;
}

.fea-image-wrap img:nth-child(2) {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition-duration: .5s;
    transition-property: all;
    max-width: 450px;
    width: 100%;
    opacity: 0;
    box-shadow: 0 0 20px 10px rgb(0 0 0 / 0.1);
}

.animated .fea-image-wrap img:nth-child(2) {
    opacity: 1;
}

.design-workflow img:nth-child(2) {
    max-width: 400px;
    margin: 30px 0 0 30px
}

.loop-people img:nth-child(2) {
    max-width: 420px;
    margin: -15px 0 0 10px
}

.automate-action img:nth-child(2) {
    max-width: 420px;
    margin: -20px 0 0 17px
}

.why-feature-wrap ul li:before {
    background-image: url(//www.zohowebstatic.com/sites/zweb/images/projects/features/blueprint-sprite.png);
    background-size: auto 80px;
}

.why-feature-wrap ul li:nth-child(1):before {
    background-position: 0 0;
}

.why-feature-wrap ul li:nth-child(2):before {
    background-position: -80px 0
}

.why-feature-wrap ul li:nth-child(3):before {
    background-position: -162px 0
}

.why-feature-wrap ul li:nth-child(4):before {
    background-position: -242px 0;
    /* width: 80px; */
}

.why-feature-wrap ul li:nth-child(5):before {
    background-position: -300px 0
}

.feature-testimonail-wrap {
    background: url(//www.zohowebstatic.com/sites/zweb/images/projects/features/blueprint-testimonial-bg.png) repeat, #371326;
    color: #fff;
}

.feature-testimonail-wrap h3:before {
    background: url(//www.zohowebstatic.com/sites/zweb/images/projects/features/blueprint-testimonial-person.png) no-repeat 0 0;
    background-size: cover;
}

.feature-testimonail-wrap h5 {
    color: #e52873;
}

.feature-testimonail-wrap h5 span {
    color: #fff;
}

@media screen and (max-width:992px) {
    .pb-left {
        margin: 0 auto;
        text-align: center;
        max-width: 660px
    }
    .fea-content-wrap {
        max-width: 510px;
    }
    .img-left .fea-content-wrap {
        margin-right: auto
    }
    .fea-image-wrap {
        order: 1;
        text-align: center;
        margin: 30px 0 0
    }
    .fea-image-wrap img:nth-child(1) {
        display: none
    }
    .fea-image-wrap img:nth-child(2) {
        position: static;
        transform: translate(0, 0);
        margin: 0;
        opacity: 1
    }
    .why-feature-wrap ul li:before {
        background-size: auto 60px;
    }
    .why-feature-wrap ul li:nth-child(2):before {
        background-position: -60px 0
    }
    .why-feature-wrap ul li:nth-child(3):before {
        background-position: -122px 0
    }
    .why-feature-wrap ul li:nth-child(4):before {
        background-position: -182px 0;
        width: 59px;
    }
}

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

@media screen and (max-width:420px) {
    .why-feature-wrap ul li:before {
        background-size: auto 40px;
    }
    .why-feature-wrap ul li:nth-child(2):before {
        background-position: -40px 0
    }
    .why-feature-wrap ul li:nth-child(3):before {
        background-position: -81px 0
    }
    .why-feature-wrap ul li:nth-child(4):before {
        background-position: -120px 0;
        width: 41px
    }
}

svg {
    position: absolute;
    width: 40px;
    height: 40px;
    margin: auto;
    top: -20px;
    left: -20px;
    z-index: 1;
}

.status-dot {
    padding-left: 15px;
    position: relative;
}

.status-dot:before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #E4E4E4;
}

.op-open .status-dot:before {
    background: #46AEEA;
}

.op-progress .status-dot:before {
    background: #40CEB2;
}

.pop-reject,
.pop-publish {
    background: #000;
    padding: 15px 25px 13px 35px;
    color: #fff;
    position: absolute;
    border-radius: 6px;
    font-size: 16px;
    z-index: 10;
    display: none;
    opacity: 0;
    transition: .5s all;
    top: 250px;
    left: 50px;
}

.pop-reject.active,
.pop-publish.active {
    display: block;
    opacity: 1;
}

.pop-reject span {
    color: #FF3A2D;
}

.pop-publish span {
    color: #0FB845;
    font-weight: var(--primaryfont-bold);
}

.triangle {
    width: 5px;
    height: 5px;
    border-top: solid 5px rgb(200, 30, 50);
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}


/* Other Lang  */

.other-lang .pb-right {
    background: url(//www.zohowebstatic.com/sites/zweb/images/projects/features/blueprint-banner.png) no-repeat center;
    background-size: 100%;
}

.other-lang .blueprint-workflow-wrap {
    display: none;
}

.other-lang .pb-left {
    max-width: 450px;
}

.zw-product-header {
    background-color: #f9e8f4;
}

.i18n-ar .fea-image-wrap {
    max-width: 560px;
}

.feature-testimonail-wrap h3, .feature-testimonail-wrap h5 {
    padding: 0 180px 20px 0;
    width: auto;
}

.i18n-ar .feature-testimonail-wrap h3:before {
    left: auto;
    right: 0;
}

.i18n-ar .projects-footer, .i18n-ar .projects-footer * {
    text-align: center;
}