/* common */
:root{
    --highlighter: #0047FF;
}

.pagewrapper {
    --h1-font-size: 60px;
    --h2-font-size: 52px;
    --h3-font-size: 40px;
    --h4-font-size: 26px;
    --para-bigfont-size: 20px;
    --para-font-size: 16px;
}

.pagewrapper .content-wrap {
    max-width: 1170px;
    padding: 90px 0;
}
.pagewrapper p {
    font-size: var(--para-font-size);
}
.zw-product-header .content-wrap {
    z-index: 2;
}

.pagewrapper .act-btn {
    padding: 12px 30px;
}
.grey-clr{
    background: #F5F5F5;
}
.zcr-blk-elmt{
    display: block;
}
/* end common */
/* banner */
.zcr-bnr-sec,
.zcr-bnr-inner,
.zcr-bnr-inner>div,
.zcr-bnr-img-wrap{
    position: relative;
}
.zcr-bnr-sec .content-wrap {
    max-width: 1280px;
}
.zcr-bnr-inner {
    display: flex;
    align-items: center;
    align-items: flex-start;
    gap: 30px;
}

.zcr-bnr-inner>* {
    width: 50%;
}

.zcr-bnr-inner h1 {
    font-size: var(--h1-font-size);
    letter-spacing: -1.76px;
    font-family: var(--primaryfont-semibold);
}

.zcr-bnr-inner p {
    max-width: 520px;
}
.zcr-bnr-img-wrap,
.zcr-bnr-img-wrap img {
    z-index: 1;
}

.zcr-bnr-img-wrap img {
    display: block;
}

.text-scroll {
    margin-bottom: 15px;
    overflow: hidden;
    height: 32px;
    position: relative;
    font-size: 20px;
    text-transform: uppercase;
}

.zcr-bnr-left .text-scroll>span {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    transition: transform 0.5s ease;
    text-align: left;
    width: 100%;
    height: auto;
    font-size: 22px;
    font-family: var(--zf-primary-semibold);
}

.zcr-bnr-left .text-scroll>span.zwc-is-active {
    transform: translate(0%);
}

.zcr-bnr-left .text-scroll>span.zwc-is-active~span {
    transform: translateY(100%);
}

.zcp-text-blue {
    color: #1D9BFF;
}

.zcp-text-blue-dark {
    color: #9746E7;
}

.zcp-text-green {
    color: #18BB3C;
}

.zcp-text-red {
    color: #F27419;
}
.snd-img{
    position: absolute;
    width: 100%;
    bottom: -20%;
    left: 10%;
    z-index: 1;
}


/* banner ends */
/* what-sec */
.what-sec{
    background:#09127D;
    width: 95%;
    margin: -65px auto 65px;
    color: #fff;
  }
  .what-sec .content-wrap{
    max-width: 1280px;
    padding: 120px 0px 0px;
  }
  .what-sec h2{
    font-size: var(--h2-font-size);
  }

  .what-sec-cnt{
    max-width: 580px;
  }
  .what-sec-img{
    position: relative;
    bottom: -60px;
    margin-top: -60px;
    display: flex;
    justify-content: right;
   
  }
  .what-sec-img>div{
    max-width: 700px;

  }
  .what-sec-img>div img{
    display: block;
    border: 5px solid #000;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
  /* what-sec */
/* tab sec */

.zcr-tab-top-cnt {
    text-align: center;
}
.zcr-tab-sec .content-wrap{
    max-width: 1800px;
    width: 100%;
    margin: 0 auto;
}
.zcr-tab .grid-elmt{
    max-width: 1170px;
    margin: 0 auto;
}

.zcr-tab-top-cnt h2 {
    font-size: var(--h2-font-size);
    max-width: 800px;
    margin: 0 auto 20px;
}

.zcr-tab-top-cnt p {
    max-width: 450px;
    margin: 0 auto 50px;
}

.zcr-tab-list-wrap {
    background: #fff;
    position: sticky;
    top: 65px;
    z-index: 1;
    padding: 20px 0;
}

.zcr-tab-list {
    position: relative;
    display: flex;
    justify-content: space-between;
    max-width: 550px;
    margin: 0 auto;
    --highlighter-width: 185px;
    --highlighter-left-position: 0;
}

.zcr-tab-list::before {
    content: "";
    background: var(--highlighter);
    width: var(--highlighter-width);
    height: 2px;
    position: absolute;
    bottom: -5px;
    left: var(--highlighter-left-position);
    transition: all .5s;
}

.zcr-tab-list li {
    font-size: var(--para-bigfont-size);
    font-family: var(--primaryfont-semibold);
    cursor: pointer;
}

.zcr-tab-list li.active {
    color: var(--highlighter);
}

.zcr-tab{
    padding: 80px 0px;
}

.zcr-tab-cnt {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 30px;
}

.zcr-tab-cnt h3 {
    font-size: var(--h3-font-size);
    font-family: var(--zf-primary-medium);
}


.zcr-tab-cnt h4 {
    font-size: var(--h4-font-size);
}
.zcr-tab-cnt p{
    max-width: 400px;
    margin: 0 auto ;
}

.zcr-tab video {
    border-radius: 6px;
    display: block;
    margin: 0 auto;
    border-radius: 16px;
    border: 1px solid  #F5F5F5;
    box-shadow: 12px 56px 112px -20px rgba(0, 0, 0, 0.18);
}
.zcr-tab .grid-elmt{
    display: grid;
    grid-template-columns:1fr 2fr;
    align-items: center;
    margin-top: 60px;
    gap: 80px;
}
.zcr-cnt-list>div p{
    margin-bottom: 0px;
}
.zcr-cnt-list>div{
    padding: 15px 0px;
    border-bottom: 1px solid #e1e1e1;
}
.zcr-cnt-list>div:first-child{
    padding-top: 0px;
}
.zcr-cnt-list>div h4{
    position: relative;
    margin-bottom: 10px;
    padding-top:40px;
}
.zcr-cnt-list>div h4::before, .zcr-symbiosis-flex h3::before{
    content: "";
    position: absolute;
    background: url(/sites/zweb/images/creator/features/metrics-sprite.svg);
    background-size: 478px auto;
    width: 30px;
    height: 30px;
    top: 0px;
    left: 0px;

}
/* .zcr-tab.grey-clr{
    position: relative;
}
.zcr-tab.grey-clr:before{
    content: "";
    position: absolute;
    width: 1800px;
    height: 100%;
    background: #f5f5f5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
} */
.zcr-cnt-list>div:last-child{
    border-bottom: none;
}
.zcr-cnt-list>div:nth-child(2) h4::before{
    background-position: -30px 0px;
}
.zcr-cnt-list>div:nth-child(3) h4::before{
    background-position: -60px 0px;
}
.zcr-cnt-list>div:nth-child(4) h4::before{
    background-position: -90px 0px;
}
.zcr-cnt-list>div:nth-child(5) h4::before{
    background-position: -110px 0px;
}
.second-prt-sec .zcr-cnt-list>div:nth-child(1) h4::before{
    background-position: -123px -1px;
}
.second-prt-sec .zcr-cnt-list>div:nth-child(2) h4::before{
    background-position: -155px -1px;
}
.second-prt-sec .zcr-cnt-list>div:nth-child(3) h4::before{
    background-position: -185px -1px;
}
.second-prt-sec .zcr-cnt-list>div:nth-child(4) h4::before{
    background-position: -217px -1px;
}
.second-prt-sec .zcr-cnt-list>div:nth-child(5) h4::before{
    background-position: -248px -1px;
}
.third-prt-sec .zcr-cnt-list>div:nth-child(1) h4::before{
    background-position: -248px -1px;
}
.third-prt-sec .zcr-cnt-list>div:nth-child(2) h4::before{
    background-position: -279px -1px;
}
.third-prt-sec .zcr-cnt-list>div:nth-child(3) h4::before{
    background-position: -309px -1px;
}



/* Elevation/x-large */

.zcr-tab.right-prt .grid-elmt{
    grid-template-columns:2fr 1fr;
}
.zcr-tab.right-prt .grid-elmt .zcr-cnt-list{
    order: 1;
}

/* tab sec ends */
/* symbiosis sec */

.zcr-symbiosis-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 70px;
}

.zcr-symbiosis-flex,
.zcr-symbiosis-flex>div {
    position: relative;
}
.zcr-symbiosis-flex>div {
    width: 48%;
    max-width: 450px;
    border-radius: 10px;
    padding:50px;
    background: #fff;
    transform: translateY(60px);
    transition: transform 1s cubic-bezier(0.39,0.575,0.565,1.2);
}


.middle-animated .zcr-symbiosis-flex>div {
    transform: translateY(0);
}

.middle-animated .zcr-symbiosis-flex>div:last-child {
    transition-delay: 500ms;
}
.zcr-symbiosis-inner h2 {
    font-size: var(--h2-font-size);
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.zcr-symbiosis-flex h3 {
    position: relative;
    padding-top: 40px;
    font-size: var(--h4-font-size);
}
.zcr-symbiosis-flex>div p{
    margin-bottom: 0px;
}
.zcr-symbiosis-flex>div:nth-child(1) h3::before{
    background-position: -341px 0px;
}
.zcr-symbiosis-flex>div:nth-child(2) h3::before{
    background-position: -376px -1px;
    width: 31px;
}
.zcr-symbiosis-flex>div:nth-child(3) h3::before{
    background-position: -413px -1px;
}
.zcr-symbiosis-flex>div:nth-child(4) h3::before{
    background-position: -446px -1px;
    width: 32px;
}


/* symbiosis sec ends */
/* bottom cta sec ends */
.zcr-btm-cta-sec .content-wrap {
    padding-top: 0px;

}
.zcr-btm-cta-inner{
    text-align: center;
}

.zcr-btm-cta-inner h2 {
    font-size: var(--h2-font-size);
    line-height: 1.1;
    letter-spacing: -1.6px;
    margin-bottom: 40px;
}

/* bottom cta sec ends */

@media (max-width: 1440px) {

    /* common */
    .pagewrapper {
        --h1-font-size: 54px;
        --h2-font-size: 44px;
        --h3-font-size: 44px;
    }

    /* common ends */
    .what-sec{
        width: 100%;
    }
    /* banner */


    .zcr-bnr-inner::before {
        max-width: 700px;
        right: -100px;
        bottom: -120px;
    }

    /* banner ends */
    .zcr-tab .grid-elmt{
        width: 95%;
    }
    /* symbiosis sec */
    .zcr-symbiosis-inner h2 {
        margin-bottom: 70px;
    }

    /* symbiosis sec ends */
    /* bottom cta sec */
    .zcr-btm-cta-inner h2 {
        max-width: 610px;
        margin: 0 auto 40px;
    }

    /* bottom cta sec ends */
}

@media (max-width: 1199px) {
    .pagewrapper {
        --h1-font-size: 50px;
    }
    .zcr-bnr-sec .content-wrap{
        padding: 90px 0px;
    }

    /* banner */
    .zcr-bnr-left{
        margin-bottom: 40px;
    }

    .zcr-bnr-inner::before {
        display: none;
    }

    .zcr-bnr-img-wrap {
        margin: 0 auto;
    }
    .snd-img{
        left: 0%;
    }

    /* banner ends */
    .zcr-tab-top-cnt h2 {
        max-width: 600px;
    }
    /* symbiosis sec */
    .zcr-symbiosis-flex>div {
        max-width: 400px;
        padding: 60px 50px;
    }

    /* symbiosis sec ends */
}

@media (max-width: 991px) {


    /* common */
    .pagewrapper {
        --h1-font-size: 50px;
        --h2-font-size: 40px;
        --h3-font-size: 30px;
        --h4-font-size: 24px;
    }

    .pagewrapper .content-wrap {
        max-width: 700px;
        padding: 70px 0;
        width: 90%;
    }

    /* common */
    .zcr-tab-inner .grey-clr{
        background: none;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    /* banner */
    .zcr-bnr-inner h1 {
        max-width: 600px;
    }
    .snd-img{
        max-width: 350px;
        bottom: -5%;
        left: 20%;
    }

    .zcr-bnr-inner p {
        font-size: var(--para-font-size);
    }

    .zcr-bnr-inner{
        display: block;
    }
    .zcr-bnr-inner>*{
        width: 100%;
    }
    .zcr-bnr-img-wrap{
        max-width: 450px;
        margin: 0px;
    }
      
    /* banner ends */
    .what-sec-img{
        bottom: 0px;
        margin-top: 40px;
        justify-content: left;
    }
    .what-sec{
        margin: 0px auto;
    }
    /* symbiosis sec */

    .zcr-symbiosis-flex>div {
        max-width: 350px;
        padding: 40px;
    }

    .zcr-symbiosis-flex h3 {
        max-width: 200px;
    }
    .zcr-symbiosis-inner h2 {
        text-align: left;
    }

    /* symbiosis sec ends */

    /* tab sec */
    .zcr-tab-cnt h3{
        color: var(--highlighter);
    }
    .zcr-tab-cnt{
        text-align: left;
        margin: 0 0px 30px;
    }
    .zcr-tab-cnt p{
        margin: 0px;
    }

    .zcr-tab-list-wrap{
        display: none;

    }

    .zcr-tab-top-cnt {
        text-align: left;
    }

    .zcr-tab-top-cnt :is( h2) {
        margin: 0 0 20px;
    }

    .zcr-tab-top-cnt p{
        margin: 0px;
    }

    .zcr-tab-cnt {
        display: inherit;
    }
    .zcr-cnt-list>div p{
        max-width: 450px;
    }
    .zcr-tab .grid-elmt, .zcr-tab.right-prt .grid-elmt{
        grid-template-columns: 1fr;
        gap: 50px;
        max-width: 550px;
        margin: 0px;
    }
    .zcr-tab{
        padding: 60px 0px;
    }
    .zcr-cnt-list>div{
        padding: 20px 0px;
    }
    .zcr-tab video{
        border: 1px solid #e8e8e8;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }
  
    .zcr-cnt-list{
        order: 1;
    }
    .zcr-tab.third-prt-sec{
        padding-bottom: 0px;
    }
    /* tab sec ends */
    /* bottom cta sec */
 
    .zcr-btm-cta-inner h2 {
        max-width: 410px;
    }

    /* bottom cta sec ends */
}

@media (max-width: 767px) {

    /* common */
    .pagewrapper {
        --h1-font-size: 46px;
        --h2-font-size: 34px;
        --h3-font-size: 26px;
        --h4-font-size: 22px;

    }
 
    

    .pagewrapper .content-wrap {
        max-width: 600px;
        padding: 60px 0;
    }

    /* common end */
    /* banner */
    .zcr-bnr-left {
        width: 100%;
        max-width: 520px;
    }

    /* end banner */
    
    /* symbiosis sec */
    .zcr-symbiosis-inner h2 {
        margin-bottom: 40px;
    }

    .zcr-symbiosis-flex {
        justify-content: left;
        margin-top: 50px;
        gap: 20px;
    }

    .zcr-symbiosis-flex>div {
        width: 100%;
        max-width: 320px;
        padding: 40px 30px;
        transform: none;
    }
    /* symbiosis sec ends */
    /* bottom cta sec */
    .zcr-btm-cta-inner {
        text-align: left;
    }

    .zcr-btm-cta-inner h2 {
        margin: 0 0 20px;
    }
    .zcr-btm-cta-sec  .content-wrap{
        padding-top: 30px;
    }

    /* bottom cta sec ends */

    .zpr-bnr,
    .bnr-cnt .text-scroll>span {
        text-align: left;
    }

    .zcp-bnr-desc,
    .bnr-cnt .text-scroll>span {
        font-size: 16px;
    }
}

@media (max-width: 480px) {

    /* common */
    .pagewrapper {
        --h1-font-size: 44px;
        --h2-font-size: 32px;
        --h3-font-size: 24px;
        --h4-font-size: 20px;
    }
    /* common end */
    .snd-img{
        max-width: 350px;
        bottom: -5%;
        left: 0%;
    }
    /* symbiosis sec */
    .zcr-symbiosis-flex>div {
        padding: 35px 25px;
    }

    /* symbiosis sec ends */
}