.pagewrapper * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.pagewrapper .content-wrap {
    max-width: 1170px;
    padding: 90px 0;
}


.act-btn {
    padding: 12px 30px;
}

h1,
h2,
h3 {
    font-family: var(--zf-primary-bold);
}


/*menu overwriiten*/
#mini-panel-product_menu .menu-icon-help-header .product-title a,
#mini-panel-product_menu .menu-icon-help-header+.product-nav-links li a,
#mini-panel-product_menu .product-nav-links .menu>li>a,
#mini-panel-product_menu .product-nav-links li .nolink,
.main-container-wrapper #mini-panel-product_menu .menu-icon-help-header .product-title a {
    color: #fff;
}

.expanded.dropdown .caret {
    border-color: #fff transparent transparent transparent;
}

.zw-product-header .content-wrap {
    z-index: 2;
}

/* common */
.flex-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.text-center {
    text-align: center;
}

.section-left,
.section-right {
    width: 50%;
}

.block-element {
    display: block;
}

/* common end*/
/* banner */
.banner {
    position: relative;
    color: #fff;
    z-index: 1;
}

.banner::before {
    content: "";
    position: absolute;
    background: var(--zcr-dark-bg);
    color: #fff;
    width: 100%;
    height: 125%;
    top: -25%;
    z-index: 0;
}

.banner .content-wrap {
    max-width: 1280px;
    padding-bottom: 180px;
}

.banner .flex-content {
    justify-content: space-between;
}

.banner .section-left,
.banner .section-right {
    width: 49%;
}

/* banner end*/
/* Trusted */
.zcr-tr-brand {
    position: relative;
    margin-top: -90px;
    z-index: 3;

}

.zcr-tr-brand h4 {
    text-align: center;
}

.zcr-tr-brand .content-wrap {
    padding-top: 0px;
}

.zcr-tb-list {
    padding: 30px;
    border-radius: 20px;
    background: #fff;
    -webkit-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* Trusted */
/* digital workplace */
.digital-workplace h2 {
    font-size: 50px;
}

.digital-workplace .flex-content {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

/* digital workplace end*/
/* how to create  */
.how-to-create .section-left {
    width: 40%;
}

.how-to-create .section-right {
    position: relative;
    width: 60%;
    z-index: 1;
}

.how-to-create p {
    font-family: var(--primaryfont-semibold);
    margin: 0;
}

.how-to-create .section-right>div {
    width: 31%;
}

.how-to-create .section-right.flex-content {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.sprite-icon>h3::before,
.sprite-icon>div>h3::before,
.how-to-create .sprite-icon>div>p::before,
.why-creator .sprite-icon>li>p::before,
.automate-box>h4::before {
    content: "";
    position: relative;
    background: url(/sites/zweb/images/creator/digital-workplace-icon-sprite.svg) no-repeat;
    background-size: 400px auto;
    margin-bottom: 20px;
    display: block;
    width: 40px;
    height: 40px;
    z-index: 2;
}

.sprite-icon>li>p::before {
    margin: 0 auto 15px;
}

.sprite-icon>h3::before,
.sprite-icon>div>h3::before {
    background-size: 500px auto;
    height: 50px;
    width: 50px;
}

.sprite-icon .icon2::before {
    background-position: -50px 0px;
}

.sprite-icon .icon3::before {
    background-position: -99px 0;
}

.sprite-icon .icon4::before {
    background-position: -150px 0;
}

.sprite-icon .icon5::before {
    background-position: -200px 0;
}

.how-to-create .sprite-icon .icon6::before {
    background-position: -199px -1px;
}

.how-to-create .sprite-icon .icon7::before {
    background-position: -280px 1px;
}

.how-to-create .sprite-icon .icon8::before {
    background-position: -320px 0px;
}

.how-to-create .sprite-icon .icon9::before {
    background-position: -39px -39px;

}

.how-to-create .sprite-icon .icon10::before {
    background-position: -238px 1px;

}

.how-to-create .sprite-icon .icon11::before {
    background-position: 1px -40px;
}

.how-to-create .sprite-icon .icon12::before {
    background-position: -360px 0;
}

.why-creator .sprite-icon .icon13::before {
    background-position: -81px -40px;
}

.why-creator .sprite-icon .icon14::before {
    background-position: -120px -40px;
}

.why-creator .sprite-icon .icon15::before {

    background-position: -160px -40px;
}

.why-creator .sprite-icon .icon16::before {
    background-position: -200px -40px;
}

.why-creator .sprite-icon .icon17::before {
    background-position: -240px -40px;
    ;
}

.why-creator .sprite-icon .icon18::before {
    background-position: -280px -40px;
    ;
}

.why-creator .sprite-icon .icon19::before {
    background-position: -320px -40px;
}

.why-creator .sprite-icon .icon20::before {
    background-position: -360px -40px;
}

.why-creator .sprite-icon .icon21::before {
    background-position: -0px -80px;
}

.why-creator .sprite-icon .icon22::before {
    background-position: -40px -80px;
}

.fist-cloum>div,
.second-cloum>div,
.third-cloum>div {
    background-color: #FFFFFF;
    margin-bottom: 20px;
    padding: 30px 35px;
    border-radius: 10px;
    -webkit-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    color: #000000;
}

.how-to-create .section-right:before,
.how-to-create .section-right:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    left: 50%;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
}

.how-to-create .section-right:before {
    width: 500px;
    height: 500px;
    background: #ecf2ff80;
    top: -50px;
}

.how-to-create .section-right:after {
    width: 300px;
    height: 300px;
    background: #fdfdfde6;
    top: 40px;
}

/* how to create  end*/
/* why-creator */
.why-creator {
    background: var(--zcr-dark-bg);
    color: #fff;
    text-align: center;
}

.why-creator p {
    max-width: 800px;
    margin: 20px auto;
}

.why-creator .flex-content {
    -webkit-box-align: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.why-creator ul li {
    width: 18%;
    border-radius: 10px;
    border: 1px solid;
    margin: 10px;
    padding: 20px;
}

.why-creator li span {
    margin: auto;
}

.revolutionize {
    max-width: 800px;
    margin: 0 auto;
}

.revolutionize .content-wrap {
    padding-top: 0px;
}

.revolutionize.build {
    padding: 90px 0px 0px;
}

/* why-creator */
/* Need digital Workplace */
.need-digital-workplce .content-wrap {
    max-width: 1000px;
    padding-top: 0px;
}

.need-digital-workplce .flex-content {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-part-two {
    width: 48%;
}

.need-digital-workplce .flex-part-two:first-child {
    position: relative;
}

.need-digital-workplce .flex-part-two:first-child svg {
    position: relative;
    left: 290px;
    top: 20px;
    z-index: 1;
    width: auto;
    height: auto;
}

.flex-part-three {
    -webkit-box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
    box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    margin-top: 30px;
}

.flex-part-three.img-prt {
    padding: 0px;
}

.flex-part-three.img-prt img {
    position: relative;
    top: 7px;
    border-radius: 0px 0px 20px 20px;
}

.flex-part-three.img-prt>div {
    padding: 30px;

}

/* End Need digital Workplace */
/* automate-process */

.automate-process .flex-content {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
}

.automate-process h2 {
    max-width: 900px;
    margin: 0px auto 15px;
}

.automate-box {
    width: 30%;
    padding: 30px;
    background: #fbfbfb;
    margin: 15px;
    box-shadow: rgb(111 111 111 / 11%) 0px 7px 29px 0px;
}

.automate-box .icon23::before {
    background-position: -80px -80px;
}

.automate-box .icon24::before {
    background-position: -120px -80px;
}

.automate-box .icon25::before {
    background-position: -160px -80px;
}

.automate-box .icon26::before {
    background-position: -200px -80px;
}

.automate-box .icon27::before {
    background-position: -240px -80px;
}

.automate-box .icon28::before {
    background-position: -280px -80px;
}

/* automate-process */
.testimony {
    padding-top: 90px;
}

.testimony .content-wrap {
    background: #000;
    color: #fff;
    border-radius: 15px;
}

.testimonial {
    text-align: center;
    margin: 20px auto 0;
}

img.casestudy-logo {
    max-width: 120px;
}

.data-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: inherit;
    margin: 30px auto;
    justify-content: center;
}

.box {
    width: 44%;
    border: 1px dashed #a8a8a8;
    max-width: 200px;
    padding: 10px 10px 0;
}

.box span {
    font-size: 30px;
    font-family: var(--zf-secondary-bold);
}

.testimonial p {
    font-size: 15px;
}

.testimonial .testi-user {
    font-family: var(--zf-primary-semibold);
}

.testimonial .data-wrapper p {
    font-size: 16px;
    font-family: var(--zf-primary-semibold)
}

.slick-initialized .slick-slide {
    outline: none;
}

.testimonial p {
    font-size: 20px;
}

.testimonial-content {
    max-width: 1000px;
    margin: 0px auto 20px;
    padding: 0px 50px;
}

p.testimonial-content {
    margin-top: 0px !important;
}

.testimonial-img {
    position: relative;
    margin: 0 auto;
    background: url(/sites/zweb/images/creator/testimonial-img.png) no-repeat;
    background-size: 400px auto;
    margin-bottom: 20px;
    display: block;
    width: 206px;
    height: 72px;
    z-index: 2;
}

.testimonial-img.aboitiz {
    background-position: -205px;
    width: 200px;
}

/* slider */

.bottom-sec {
    text-align: center;
    background-color: #F7F7F7;
    overflow: hidden;

}

.bottom-sec h2 {
    margin-bottom: 50px;
}

.bottom-box-item {
    width: 100%;
}

.bottom-box-one,
.bottom-box-two,
.bottom-box-three {
    width: 30%;
    margin: 15px;
}

.bottom-box-one iframe {
    border-radius: 10px;
}

.bottom-box-one img,
.bottom-box-two img,
.bottom-box-three img {
    border-radius: 10px;
    min-height: 170px;
    max-height: 170px;
}

.bottom-box-one h5,
.bottom-box-two h5,
.bottom-box-three h5 {
    color: #000;
    text-align: left;
    margin-top: 20px;

}

.bottom-slider .slick-prev {
    left: -10%;
}

.bottom-slider .slick-next {
    right: -10%;
}

.bottom-slider .slick-next,
.bottom-slider .slick-prev {
    width: 40px;
    height: 40px;
    border: 1px solid #000;
    border-radius: 50%;
}

.slick-next:after,
.slick-next:before,
.slick-prev:after,
.slick-prev:before {
    background: #fff;
}

.bottom-slider .slick-next,
.bottom-slider .slick-prev {
    top: 45%
}

.bottom-slider .slick-next:after,
.bottom-slider .slick-next:before,
.bottom-slider .slick-prev:after,
.bottom-slider .slick-prev:before {
    height: 12px;
}

.bottom-slider .slick-prev:before {
    top: 9px;
    left: 17px;
}

.bottom-slider .slick-prev:after {
    bottom: 9px;
    left: 17px;
}

.bottom-slider .slick-next:before {
    top: 9px;
    right: 17px;
}

.bottom-slider .slick-next:after {
    bottom: 9px;
    right: 17px;
}

.bottom-sec .slick-slide {
    text-align: left;
}

/* Free ready to use */

.ready-to-use {
    overflow: hidden;
}

.ready-to-use h2 {
    text-align: center;
}

.ready-to-use .zcr-btn-clr {
    margin-top: 40px;
}

.ready-to-use p.text-center {
    max-width: 600px;
    margin: 0 auto 20px;
}

.app-slider-list {
    margin: 40px 0 0px;
    position: relative;
}

.app-slider-list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.app-slider-list ul li {
    width: 23%;
    border-radius: 10px;
    padding: 20px;

}

.app-slider-list ul li p,
.app-slider-list ul li h4 {
    color: #000;
    margin-left: 15px;
    text-align: left;
}













.slick-next.slick-disabled,
.slick-prev.slick-disabled {
    opacity: 0;
    cursor: auto;
}

.slide-one {
    background-color: #e6eaff;
}

.slide-two {
    background-color: #e0f6ff;
}

.slide-three {
    background-color: #ffebe9;
}

.slide-four {
    background-color: #fff5e2;
}

.app-sprite-icon {
    display: block;
    position: relative;
    width: 66px;
    height: 66px;
    margin-bottom: 15px;
    margin: 15px;
}

.app-sprite-icon:before {
    content: "";
    position: absolute;
    display: block;
    background: url(/sites/zweb/images/creator/solutions/apps-icon-sprite.png) no-repeat;
    background-size: 750px auto;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

}

.it-asset-tracker::before {
    background-position: -527px -72px;
    width: 70px;
    height: 80px;
}

.project-tracker::before {
    background-position: -606px -78px;
    width: 65px;
    height: 70px;
}

.appointment-mgnt::before {
    background-position: -387px -77px;
    width: 60px;
    height: 70px;
}

.employee-mgnt::before {
    background-position: -448px -72px;
    width: 80px;
    height: 80px;
}

/* End Free ready to use */
/* cta */
.bottom-cta {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}






/*FAQ*/

.faq h2 {
    text-align: center;
    margin-bottom: 60px;
}

.faq h2:before {
    display: block;
    content: '';
    background: url(/sites/zweb/images/creator/home/red-faq-icon.png) no-repeat;
    width: 90px;
    height: 70px;
    background-size: 100%;
    margin: auto;
}

.faq-wrap {
    max-width: 980px;
    margin: auto;
}

.faq-item {
    border-bottom: 1px solid #d3d3d3;
}

.faq-item:first-child .faq-ans {
    display: block;
}

.faq-ans {
    display: none;
    padding-bottom: 10px;
    padding-left: 42px;
}

.faq-item h4 {
    margin-bottom: 0;
    font-family: var(--zf-secondary-medium);
    padding: 20px 0px 20px 40px;
    cursor: pointer;
    position: relative;
    font-size: 20px;
    color: #000;
}

.faq-item h4:hover {
    color: #555;
}

.faq-item h4:before,
.faq-item h4:after {
    content: '';
    position: absolute;
    background: #ea5154;
}

.faq-item:hover h4:before,
.faq-item:hover h4:after {
    background: #555;
}

.faq-item h4:before {
    left: 0px;
    top: 35px;
    height: 2px;
    width: 16px;
}

.faq-item h4:after {
    left: 7px;
    width: 2px;
    top: 28px;
    height: 15px;
}

.faq-item.active h4:after {
    height: 0px;
}

.block3 .zicon:before {
    position: absolute;
    left: -100px;
    top: 13px;
}

.zicon:before {
    display: block;
    content: '';
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
}

@-webkit-keyframes float1 {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px)
    }

    to {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@keyframes float1 {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px)
    }

    to {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@-webkit-keyframes float2 {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }

    to {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@keyframes float2 {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }

    to {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}
.testimony .slick-prev{
    left: 10px;
}
.testimony .slick-next {
    right: 10px;
}
.bottom-sec .slick-next:after,
.bottom-sec .slick-next:before,
.bottom-sec .slick-prev:after,
.bottom-sec .slick-prev:before{
background-color:#000;
}
@media all and (min-width:1200px) {

    .inup1,
    .inup2,
    .inup3,
    .inup4,
    .inup5,
    .inup6 {
        -webkit-transform: translate3d(0px, 40px, 0);
        transform: translate3d(0px, 40px, 0);
        -webkit-transition: -webkit-transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.3);
        transition: -webkit-transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.3);
        -o-transition: transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.3);
        transition: transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.3);
        transition: transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.3), -webkit-transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.3);
    }

    .in-view .inup1,
    .in-view .inup2,
    .in-view .inup3,
    .in-view .inup4,
    .in-view .inup5,
    .in-view .inup6 {
        -webkit-transform: translate3d(0px, 0px, 0);
        transform: translate3d(0px, 0px, 0);
    }

    .fadeinup1,
    .fadeinup2,
    .fadeinup3,
    .fadeinup4,
    .fadeinup5,
    .fadeinup6,
    .fadeinup7,
    .fadeinup8,
    .fadeinup9 {
        -webkit-transform: translate3d(0px, 60px, 0);
        transform: translate3d(0px, 60px, 0);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-transition: opacity 1s ease-in, -webkit-transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.2);
        transition: opacity 1s ease-in, -webkit-transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.2);
        -o-transition: opacity 1s ease-in, transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.2);
        transition: opacity 1s ease-in, transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.2);
        transition: opacity 1s ease-in, transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.2), -webkit-transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.2);
    }

    .fadeindown1 {
        -webkit-transform: translate3d(0px, -60px, 0);
        transform: translate3d(0px, -60px, 0);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-transition: opacity 1s ease-in, -webkit-transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.2);
        transition: opacity 1s ease-in, -webkit-transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.2);
        -o-transition: opacity 1s ease-in, transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.2);
        transition: opacity 1s ease-in, transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.2);
        transition: opacity 1s ease-in, transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.2), -webkit-transform 1s cubic-bezier(0.39, 0.575, 0.565, 1.2);
    }

    .in-view .fadeinup1,
    .in-view .fadeinup2,
    .in-view .fadeinup3,
    .in-view .fadeinup4,
    .in-view .fadeinup5,
    .in-view .fadeinup6,
    .in-view .fadeinup7,
    .in-view .fadeinup8,
    .in-view .fadeinup9,
    .in-view .fadeindown1,
    .in-view .fadeindown2,
    .in-view .fadeindown3,
    .in-view .fadeindown4 {
        -webkit-transform: translate3d(0px, 0px, 0);
        transform: translate3d(0px, 0px, 0);
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    .fadeindown1,
    .fadeinup1,
    .inup1,
    .bnrimg1,
    .bnrimg4 {
        -webkit-transition-delay: 100ms;
        -o-transition-delay: 100ms;
        transition-delay: 100ms;
    }

    .fadeindown2,
    .fadeinup2,
    .inup2,
    .bnrimg2,
    .bnrimg5 {
        -webkit-transition-delay: 300ms;
        -o-transition-delay: 300ms;
        transition-delay: 300ms;
    }

    .fadeindown3,
    .fadeinup3,
    .inup3,
    .bnrimg3,
    .bnrimg6 {
        -webkit-transition-delay: 500ms;
        -o-transition-delay: 500ms;
        transition-delay: 500ms;
    }

    .fadeinup4,
    .inup4 {
        -webkit-transition-delay: 700ms;
        -o-transition-delay: 700ms;
        transition-delay: 700ms
    }

    .fadeinup5,
    .inup5 {
        -webkit-transition-delay: 900ms;
        -o-transition-delay: 900ms;
        transition-delay: 900ms
    }

    .fadeinup6,
    .inup6 {
        -webkit-transition-delay: 1100ms;
        -o-transition-delay: 1100ms;
        transition-delay: 1100ms
    }

    .fadeinup7,
    .inup7 {
        -webkit-transition-delay: 1300ms;
        -o-transition-delay: 1300ms;
        transition-delay: 1300ms
    }

    .fadeinup8,
    .inup8 {
        -webkit-transition-delay: 1500ms;
        -o-transition-delay: 1500ms;
        transition-delay: 1500ms
    }

    .fadeinup9,
    .inup9 {
        -webkit-transition-delay: 1700ms;
        -o-transition-delay: 1700ms;
        transition-delay: 1700ms
    }
}

@media all and (min-width:1400px) {
    .i18n-en h1 {
        font-size: 50px
    }

    .i18n-en h2 {
        font-size: 36px
    }

    .digital-workplace h2,
    .automate-process h2 {
        font-size: 48px;
    }

}

@media all and (min-width:992px) and (max-width:1199px) {
    .pagewrapper .content-wrap {
        width: 94%;
    }

}

@media all and (max-width:1199px) {

    /* Need digital Workplace */
    .need-digital-workplce .flex-part-two:first-child svg {
        display: none;
    }

    .need-digital-workplce .flex-content:last-child {
        margin-top: 0;
    }

    /* end Need digital Workplace */
    /* how to create   */
    .how-to-create .section-left {
        width: 30%;
    }

    .how-to-create .section-right {
        width: 70%;
    }

    /* how to create end  */
}

@media all and (max-width:991px) {
    .pagewrapper .content-wrap {
        padding: 70px 0;
    }

    /* <!digital workplace  */
    .section-left,
    .section-right {
        width: 48%;
    }

    .digital-workplace .flex-content {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        align-items: center;
    }

    .digital-workplace h2 {
        font-size: 42px;
    }

    /* <!digital workplace  */
    /* Free ready to use */
    .app-slider-list ul li {
        width: 45%;
        margin-bottom: 20px;
    }

    .app-slider-list {
        margin-bottom: 0px;
    }

    .feature2 .content-wrap {
        padding-top: 30px;
    }

    .app-slider-list ul li a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .app-slider-list ul li p {
        width: 50%;
        margin: 0px;
    }

    .app-sprite-icon {
        margin: 0px 0px 15px 0px;
    }

    .why-creator ul li {
        width: 25%;
    }

    .app-slider-list ul li p,
    .app-slider-list ul li h4 {
        text-align: left;
        width: 100%;
        margin-left: 0px;
    }

    /* Free ready to use */
    /* trusted brands */
    .zcr-tr-brand ul li:nth-child(7),
    .zcr-tr-brand ul li:nth-child(8),
    .zcr-tr-brand ul li:nth-child(9),
    .zcr-tr-brand ul li:nth-child(10) {
        display: none;
    }

    /* end trusted brands */
    /* how to create   */
    .how-to-create h2 {
        text-align: center;
        margin-bottom: 70px;
    }

    .how-to-create .section-left {
        width: 100%;
    }

    .how-to-create .section-right {
        width: 100%;
    }

    .how-to-create .section-right:before,
    .how-to-create .section-right:after {
        display: none;
    }

    /* how to create end  */
    /* automate-process */
    .automate-box {
        width: 45%;
    }

    /* automate-process end*/

    .bottom-box-one h5,
    .bottom-box-two h5,
    .bottom-box-three h5 {
        text-align: center;
    }

    .bottom-sec .slick-slide {
        text-align: center;
    }

}

@media all and (max-width:767px) {
    .pagewrapper .content-wrap {
        padding: 60px 0;
        max-width: 600px;
    }

    .flex-part-three.img-prt img {
        display: none;
    }

    .banner .section-left,
    .banner .section-right {
        width: 100%;
    }

    .banner .section-right {
        margin-top: 30px;
    }

    .digital-workplace .content-wrap,
    .bottom-cta .content-wrap {
        padding: 0px;
    }

    .ready-to-use .zcr-btn-clr {
        margin-top: 20px;
    }

    .how-to-create .section-right:before {
        margin: 0 auto;
    }

    .flex-part-two,
    .section-left,
    .section-right {
        width: 100%;
    }

    .banner img {
        max-width: 300px;
        margin: 0 auto;
    }

    .section-right.flex-content {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .how-to-create .section-right ul {
        width: 50%;
    }

    .app-slider-list ul li {
        width: 100%;
        padding-left: 20px;
    }

    /* automate-process */
    .automate-box {
        width: 100%;
    }

    /* automate-process end*/
    .why-creator ul li {
        width: 100%;
        max-width: 400px;
    }

    .how-to-create .section-right>div {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }

    .digital-workplace h2 {
        font-size: 25px;
    }

    .how-to-create h2 {
        margin-bottom: 30px;
    }

    .testimony h2 {
        padding: 0px 30px;
    }

    .testimonial p {
        font-size: 16px;
    }

    .testimonial-content {
        padding: 0 20px;
    }

    .sprite-icon>h3::before,
    .sprite-icon>div>h3::before,
    .how-to-create .sprite-icon>div>p::before,
    .why-creator .sprite-icon>li>p::before,
    .automate-box>h4::before {
        position: absolute;
        margin: 0px 20px 0px 0px;
        left: 0px;
        top: 0px;
    }

    .fist-cloum>div p,
    .second-cloum>div p,
    .third-cloum>div p,
    .automate-process h4,
    .need-digital-workplce h3,
    .why-creator ul li p {
        position: relative;
    }

    .second-cloum>div p,
    .automate-process h4,
    .why-creator ul li p {
        padding: 10px 0 10px 60px;
    }

    .third-cloum>div p,
    .fist-cloum>div p {
        padding: 0px 0 0px 60px;
    }

    .automate-process h4,
    .need-digital-workplce h3 {
        padding: 10px 0 10px 70px;
    }

    .why-creator ul li p {
        text-align: left;
    }

    .why-creator p {
        margin: 5px;
    }

    .why-creator ul {
        margin-top: 25px;
    }

    .how-to-create .block-element {
        display: inline-block;
    }




}

@media all and (max-width:460px) {
    .how-to-create .section-right ul {
        width: 100%;
    }

    .why-creator ul li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .how-to-create .section-right>div {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .automate-process h4,
    .need-digital-workplce h3 {
        padding: 0px 0px 14px 70px;
    }

    .fist-cloum>div p,
    .second-cloum>div p,
    .automate-process h4,
    .why-creator ul li p {
        padding: 0px 0px 14px 60px;
    }

    .third-cloum>div p {
        padding: 0 0 0px 60px;
    }

    .need-digital-workplce h3 {
        font-size: 19px;
    }
}