.zwc-comm-wrap {
    background: transparent radial-gradient(closest-side at 50% 50%, #2B0958 0%, #0E0629 100%) 0% 0% no-repeat padding-box;
}
.story-type-filter-wrap ul li:first-child {
    margin-left: 0;
}
.story-type-filter-wrap {
    display: inline-block;
    text-align: left;
    float: left;
    z-index: 1;
    position: relative;
}
.header-section {
    /* background: transparent radial-gradient(closest-side at 50% 50%, #2B0958 0%, #0E0629 100%) 0% 0% no-repeat padding-box; */
    padding: 60px 0 20px 0;
    color: #fff;
}

.zw-product-header {
    background: #0e072a;
}

.zwc-header-warp {
    display: flex;
}

h1 {
    font-size: 58px;
    max-width: 640px;
    line-height: 1.2;
}

h1 span {
    background: rgb(235, 76, 67);
    background-image: linear-gradient(90deg, rgba(235, 76, 67, 1) 0%, rgba(249, 215, 117, 1) 60%, rgba(119, 242, 112, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.zwc-header-warp .column.left p {
    max-width: 560px;
    margin-bottom: 30px;
}

.zwc-header-warp .column.left {
    width: 55%;
    padding-right: 5%;
    padding-top: 20px;
}

.zwc-header-warp .column.right {
    width: 40%;
    opacity: 0;
}

.zcs-common-video .zcs-watch-video {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
    text-align: center;
    margin: 0 auto;
    font-family: var(--zf-primary-semibold);
    z-index: 2;
}

.zcs-watch-play {
    text-indent: -9999px;
    text-wrap: nowrap;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    width: 50px;
    height: 50px;
    position: relative;
    margin-bottom: 10px;
}

.zcs-watch-play:before {
    content: '';
    left: 4px;
    right: 0;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 21px solid #fff;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
}

.zcs-watch-play:after {
    content: '';
    left: 0;
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 100%;
    position: absolute;
}

.zsc-main-box .zcs-common-video {
    position: relative;
}

.zsc-commmon-box {
    position: absolute;
}

.zsc-middle-box .zcs-common-video-inner img {
    max-height: 380px;
}

.zsc-last-box .zcs-common-video-inner img {
    max-height: 350px;
}

.zsc-boxs {
    position: relative;
}

.img-wrap {
    max-width: 300px;
    width: 100%;
    display: inline-block;
    margin-left: 100px;
}

.zsc-boxs {
    position: relative;
    width: 100%;
    display: inline-block;
}

.zsc-middle-box {
    left: 265px;
    top: 25px;
    z-index: 2;
}

.zsc-last-box {
    left: 335px;
    top: 40px;
    z-index: 1;
}

.zsc-main-box {
    z-index: 3;
    position: relative;
}

.zsc-commmon-box {
    position: absolute;
}

.zsc-main-box .zcs-box-video {
    width: 300px;
}

.zsc-middle-box .zcs-box-video,
.zsc-last-box .zcs-box-video {
    width: 300px;
}

.zsc-cus-testimonials {
    color: #fff;
    background: #2c5fde;
    padding: 30px 10px;
    border-radius: 20px;
    position: relative;
    max-width: 660px;
    z-index: 2;
}

.zsc-cus-each p:after {
    content: '';
    width: 50px;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #ffe430;
}

.zsc-cus-each p:first-child {
    position: relative;
    padding-bottom: 25px;
}

.zsc-cus-each p+span {
    font-size: 15px;
}

.zsc-cus-testimonials .slick-dots {
    text-align: left;
    margin-bottom: 0;
    margin-top: 5px;
}

.slick-dots li.slick-active {
    background: #ffe430;
    border: 1px solid #ffe430;
}

.slick-dots li {
    border: 1px solid #fff;
    background: #ffffff;
}

.zsc-cus-testimonials .slick-dotted.slick-slider {
    margin-bottom: 0;
}

.cus-testi-secton {
    opacity: 0;
}

.cus-testi-secton:after {
    content: '';
    position: absolute;
    height: 1px;
    background: #01164b;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    top: -45px;
    margin: auto;
}

.batches-sec {
    display: flex;
    max-width: 510px;
    padding: 0 40px;
    position: relative;
    justify-content: space-between;
    margin: 50px 0 30px 0;
    align-items: center;
}

.batches-sec:before {
    content: '';
    background: url(/sites/zweb/images/marketingautomation/customers/leaf.png) no-repeat;
    background-size: 42px auto;
    background-position: 0 0;
    height: 90px;
    width: 45px;
    position: absolute;
    left: 5px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    top: -5px;
}

.batches-sec:after {
    content: '';
    background: url(/sites/zweb/images/marketingautomation/customers/leaf.png) no-repeat;
    background-size: 42px auto;
    position: absolute;
    right: 10px;
    height: 90px;
    width: 45px;
    top: -5px;
}

.batches-each {
    text-align: center;
}

.batches-each:first-child {
    padding-left: 40px;
}

.batches-sec .zsc-icon {
      background-image:url(/sites/zweb/images/otherbrandlogos/g2-leader-small-business-winter-2025.png);
    height: 80px;
    display: inline-block;
    text-wrap: nowrap;
    text-indent: 100%;
    overflow: hidden;
    background-repeat:no-repeat;
    background-size: 70px;
    width: 70px;
}


.batches-each2 .zsc-icon {
   background-image:url(/sites/zweb/images/otherbrandlogos/crozdesk-trusted-vendor-award-2024.png);
}

.batches-each3 .zsc-icon {
   background-image:url(/sites/zweb/images/otherbrandlogos/crozdesk-quality-choice-2024.png);
}

.batches-each4 .zsc-icon {
   background-image:url(/sites/zweb/images/otherbrandlogos/g2-mid-market-leader-asia-winter-2025.png);
}

.batches-each:last-child {
    padding-right: 40px;
}
.zsc-cus-testimonials:before,.zsc-cus-testimonials:after{
    content: '';
    width: 220px;
    height: auto;
    position: absolute;
    top: 0px;
    bottom: 0;
    margin: auto;
    background-size: contain;
    background-image: url(/sites/zweb/images/marketingautomation/customers/hexogon.svg);
    left: -100px;
      background-repeat: no-repeat;

}
.zsc-cus-testimonials::after {
    right: -100px;
    transform: rotate(180deg);
    left:auto;
}

.cus-testi-secton {
    padding-bottom: 50px;
    position: relative;
}

.zsc-main-box .zcs-common-video-inner {
    cursor: pointer;
}

.cutomer-stories-outer {
    background: #0e0629;
    padding-top: 50px;
}

@keyframes slideLeft {
    0% {
        transform: translateX(-30px);
        opacity: 0
    }

    100% {
        transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(-30px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        opacity: 1
    }
}

@-moz-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(-30px);
            opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.zwe-om .zwc-header-warp .column.right {
    animation: slideLeft 1s ease-out 1s forwards;
}

.zsc-main-box .slick-slide.slick-active {
    animation: slideLeft 0.5s ease-out
}

.zsc-middle-box .slick-slide.slick-active {
    animation: slideLeft 1s ease-out;
}

.zsc-last-box .slick-slide.slick-active {
    animation: slideLeft 1.5s ease-out;
}

.zwe-ob.cus-testi-secton {
    animation: fadeIn 1s ease-out 1.5s forwards;
}
@media only screen and (max-width: 1560px) {
    .img-wrap {
        margin-left: 50px;
    }
}

@media only screen and (max-width: 1440px) {
    .img-wrap {
        margin-left: 0;
    }
    h1 {
        font-size: 52px;
    }
    .cus-testi-secton .content-wrap {
        max-width: 950px;
    }
    .zsc-last-box {
        left: 320px;
    }
    .zsc-middle-box {
        left: 250px;
    }
}

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

@media only screen and (max-width: 1365px) {
    .zwc-header-warp .column.right {
        width: 45%;
    }
    .img-wrap {
        margin-left: 100px;
    }
    .zsc-last-box,
    .zsc-middle-box {
        display: none;
    }
}

@media only screen and (max-width: 1279px) {
    h1 {
        font-size: 48px;
    }
    .cus-testi-secton .content-wrap {
        max-width: 600px;
        margin: 0 auto;
    }
    .zsc-cus-testimonials {
        margin: 0 auto;
    }
    .img-wrap {
        margin-left: 50px;
    }
}

@media only screen and (max-width: 991px) {
    h1 {
        font-size: 42px;
    }
    .zwc-header-warp {
        flex-direction: column;
    }
    .zwc-header-warp .column.right,
    .zwc-header-warp .column.left {
        padding: 0;
        width: 100%;
    }
    .zwc-header-warp .column.left {
        text-align: center;
    }
    h1 {
        margin: 0 auto;
        max-width: 650px;
        margin-bottom: 25px;
    }
    h1 br {
        display: none;
    }
    .zwc-header-warp .column.left p {
        margin: 0 auto;
        margin-bottom: 25px;
    }
    .batches-sec {
        margin: 0 auto;
        margin-top: 50px;
    }
    .zsc-commmon-box {
        position: inherit;
    }
    .img-wrap {
        margin: 0 auto;
        display: block;
        margin-top: 70px;
    }
    .cus-testi-secton {
        margin-top: 30px;
    }
    .zsc-cus-testimonials:after,
    .zsc-cus-testimonials:before,
    .cus-testi-secton:after {
        display: none;
    }
    .zsc-cus-testimonials {
        padding: 40px;
        text-align: center;
    }
    .zsc-cus-each p:after {
        left: 0;
        right: 0;
        margin: auto;
    }
    .zsc-cus-testimonials .slick-dots {
        text-align: center;
    }
    .batches-sec:before,
    .batches-sec:after {
        display: none;
    }
    .zsc-main-box .slick-slide.slick-active {
        animation: none
    }
}

@media only screen and (max-width: 767px) {
    .batches-sec:before,
    .batches-sec:after {
        display: none;
    }
    .batches-each:first-child {
        padding-left: 0;
    }
    .batches-each:last-child {
        padding-right: 0;
    }
    .batches-each {
        margin: 0 5px;
    }
    .batches-sec {
        padding: 0;
        max-width: 330px;
        /* flex-wrap: wrap; */
    }
    .zwe-ob.cus-testi-secton {
        animation: none;
    }
    .cus-testi-secton {
        opacity: 1;
    }
}

@media screen and (max-width: 640px){
.story-type-filter-wrap {
    display: block;
    float: none;
    text-align: center;
}
.filter-wrap {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}
}