:root {
    --section-p-t: 100px;
    --section-p-b: 100px;
    --section-m-t: 100px;
    --section-m-t-60: 60px;
    --section-m-b: 100px;
}

img{
    display: block;
}
.zwc-main-sec{
    padding-top: var(--section-p-t);
    padding-bottom: var(--section-p-t);
}
.zwc-min-wrap{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.act-btn {
    padding: 13px 30px;
    border-radius: 3px;
    margin: 10px 0px 0px;
}
.zwc-survey-main h1 {
    font-family: var(--zf-secondary-semibold);
    font-size: 67px;
    max-width: 950px;
    margin: 0 auto 20px;
    letter-spacing: -1.3px;
}
.zwc-survey-main h2 {
    font-size: 48px;
    margin-bottom: 20px;
    font-family: var(--zf-secondary-bold);
    line-height: 1.2;
}
.zwc-survey-main h3 {
    font-size: 28px;
    font-family: var(--zf-secondary-medium
);
}
.zwc-survey-main h4 {
    font-size: 27px;
    font-family: var(--zf-secondary-bold);
}
.zwc-h2-wid{
    max-width: 800px;
}
.zwc-p-wid{
    max-width: 600px;
    margin-bottom: 0;
}
.zwc-flex{
    display: flex;
}
.zwc-2col-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.zwc-2col-inner h3{
    font-size: 32px;
}
.zwc-2col-inner {
    padding-top: var(--section-p-t);
}

.zwc-p-t-0{
    padding-top: 0;
}
.zwc-why-choose .zwc-p-t-0{
    margin-top: var(--section-m-t-60);
}
.zwc-why-choose .content-wrap{
    width: 100%;
}
.zwc-2col-inner h2 {
    font-size: 28px;
    max-width: 400px;
}
.zwc-2col-lft {
    max-width: 40%;
    width: 100%;
    position: relative;
    z-index: 1;
}
.zwc-2col-rht {
    max-width: 50%;
    width: 100%;
    position: relative;
    z-index: 1;
}
.zwc-2col-oc .zwc-2col-lft {
    order: 2;
}
p:last-child {
    margin-bottom: 0px;
}
/* ----- Banner Section ----- */
.zwc-survey-main h1 span{
    display: block;
}
.zwc-banner-sec {
    position: relative;
}
.zwc-banner-ctn {
    text-align: center;
    padding: 4em 0px 0;
}
.zwc-banner-img{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3em;
    gap: 30px;
}
.zwc-banner-rating{
    position: relative;
    left: 50px;
    bottom: -20px;
    width: 100%;
    max-width: 30%;
}
.zwc-banner-human{
    max-width: 34%;
    width: 100%;
}
.zwc-banner-img-inr{
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
    left: -70px;
    align-items: flex-end;
    bottom: 30px;
    max-width: 30%;
}
.zwc-banner-img-inr img{
    width: 100%;
}
.zwc-banner-img-inr img:first-child{
    max-width: 85%;
}
.zwc-banner-img-inr img:nth-child(2){
    max-width: 45%;
}
.zwc-banner-ctn p{
    font-family: var(--zf-secondary-medium);
    font-size: 18px;
    margin: 0 auto 0 auto;
    max-width: 700px;
}
.zwc-banner-ctn > a{
    margin-top: 30px;
}
.zwc-feature-icn{
    width: 70px;
    height: 70px;
    display:block;
    background-image: url(/sites/zweb/images/survey/product-experience/zsp-sprite.png);
    background-repeat: no-repeat;
    background-size: 436px;
    margin:0 auto 20px auto;
    transform: scale(0.9);
}
.zwc-feature{
    gap: 60px;
    margin-top: var(--section-m-t-60);
    flex-wrap: wrap;
    justify-content: space-between;
}
.zwc-enhance{
    background-position: 0 0;
}
.zwc-optimize{
    background-position: -78px 0;
}
.zwc-usability{
    background-position: -148px 0;
}
.zwc-improved{
    background-position: -223px 0;
}
.zwc-perception{
    background-position: -295px 2px;
}

.zwc-feature-inr p:last-child{
    margin-bottom: 0;
}
.zwc-benefits .zwc-2col-flex{
    align-items: flex-start;
    margin-top: var(--section-m-t-60);
}

.zwc-benefits .zwc-2col-lft{
    position: sticky;
    top: 100px;
    max-width: 50%;
}
.zwc-benefits .zwc-2col-rht{
    max-width: 45%;
}
.zwc-product-exp{
    display: block;
    margin: 0 auto;
    border-radius: 20px;
}
.zwc-exp{
    position: absolute;
    left: 0;
    bottom: 11%;
    border-radius: 15px;
}
.zwc-list-ctn{
    max-width: 460px;
}
.zwc-list-ctn li{
    padding-bottom: 45px;
}
.zwc-list-ctn li:last-child{
    padding-bottom: 0;
}
.zwc-list-ctn h3{
    font-family: var(--zf-secondary-medium);
}
.zwc-research{
    background-color: #17202A;
}
.zwc-research .zwc-min-wrap{
    max-width: 900px;
}
.zwc-research h2{
    font-size: 42px;
    font-family: var(--zf-secondary-regular);
    color: #fff;
    text-align: center;
    max-width: 100%;
}
.zwc-research h2 span{
    color: #17BC1A;
    font-family: var(--zf-secondary-medium);
    font-size: 53px;
}
.zwc-research-table-main {
    \: #fff;
    margin-top: 50px;
    padding-bottom: 30px;
    position: relative;
    width: 100%;
}
.zwc-research-table-main::before{
    content: '';
    position: absolute;
    inset: 0;
    transform: rotate(-2deg);
    background : transparent linear-gradient(129deg, #ADD7FA 0%, #BAFCDB 100%) 0% 0% no-repeat padding-box;
    z-index: -1;
}
.zwc-research .zwc-flex .zwc-research-table:nth-child(1) li{
    font-family: var(--zf-secondary-medium);
}
.zwc-research .zwc-flex .zwc-research-table:nth-child(2) li{
    margin: 0;
}
.zwc-research .zwc-flex .zwc-research-table:nth-child(2) li:first-child{
    padding-left: 0;
}
.zwc-research-table {
    /* max-width: 50%; */
    width: 100%;
}
.zwc-research-table li{
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    text-align: left;
    font-family: var(--zf-secondary-medium);
}
.zwc-research-table li span{
    width: 100%;
    max-width: 50%;
    display: block;
    padding: 20px 45px 20px 75px;
    position: relative;
    border-bottom: 1px solid #E6E1D6;
}
.zwc-research-table li span::before{
    content:'';
    position:absolute;
    margin-left: -45px;
    top: 17px;
    display:block;
    background-image: url(/sites/zweb/images/survey/product-experience/zsp-sprite.png);
    background-repeat:no-repeat;
    background-size: 386px;
    width: 31px;
    height: 31px;
}
.zwc-research-table li span:nth-child(1){
    background-color: #FFFAED;
    border-right: 1px solid #E6E1D6;
   
}
.zwc-research-table li span:nth-child(1)::before{
     background-position: -322px 0px;
}
.zwc-research-table li span:nth-child(2){
    background-color: #E4FDDD;
}
.zwc-research-table li span:nth-child(2)::before{
     background-position: -355px 0px;
}
.zwc-research-table li:first-child{
    background: #F4CB5E;
    max-width: 100%;
    border-right: 0;
}
.zwc-research-table li:first-child span:nth-child(1){
    background: #F6BE62;
    text-align:center;
    padding-left: 45px;
    border: 0;
}
.zwc-research-table li:first-child span::before {
   display:none;
}
.zwc-research-table li:first-child span:nth-child(2){
    background: #73E077;
    text-align:center;
    padding-left: 45px;
}
.zwc-research-table li:last-child{
    border: 0;
}
.zwc-research-table li b{
    font-family: var(--zf-secondary-semibold);
    font-size: 22px;
}
.zwc-experience .zwc-p-wid{
    margin: 0 auto;
    font-size: 20px;
}
.zwc-experience .content-wrap{
    background: transparent linear-gradient(131deg, #C7D9F5 0%, #C9F7DF 100%) 0% 0% no-repeat padding-box;
    padding: 6em;
    border-radius: 20px;
    margin-top: var(--section-m-t);
}
.zwc-experience h2, .zwc-experience .zwc-p-wid, .zwc-why-choose h2{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.zwc-experience h2{
    max-width: 700px;
}
.zwc-feature-inr {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    max-width: 320px;
    width: 100%;
    text-align: center;
}
.zwc-experience .zwc-feature{
    gap: 20px;
    justify-content: center;
}
.zwc-feature-inr h3{
    font-size: 22px;
    font-family: var(--zf-secondary-medium);
    margin-bottom: 0;
}

/* -------------- FAQ ------------- */
.faq-section{
    background: #D8EDFF;
}
.zwc-faq-sec .zwc-page-title{
    margin-bottom: 40px;
}
.zwc-faq-sec .zwc-page-title h2{
    font-size: 36px;
}
.faq-section h2{
   margin-bottom: var(--section-m-t-60);
   text-align: center;
}
.accordion {
    margin:0 auto;
    max-width: 880px;
}
.faq-content {
    transition: all .5s ease;
    background: #fff;
    border-radius: 10px;
    padding: 25px 25px 5px;
    margin-bottom: 15px;
    border: 1px solid transparent;
}
.faq-content.active {
    border-color: #4749E3;
    box-shadow: 0px 4px 12px #76767624;
}
.faq-content.active .faq-arrow{
    border-color:#4749E3;
}
.faq-content h3 {
    position: relative;
    font-size: 20px;
    cursor: pointer;
    transition: all .5s ease;
    padding: 0px 25px 0 50px;
    font-family: var(--zf-secondary-medium);
    padding-bottom: 20px;
    margin-bottom: 0;
}
.faq-content:last-child {
    margin-bottom: 0;
}
.accord-content {
    display: none;
    padding: 0 0px 20px 48px;
    max-width: 750px;
}
.accord-content span{
    font-family: var(--zf-primary-semibold);
    font-size: 15px;
}
.faq-content h3 span.faq-arrow {
    position: absolute;
    left: 15px;
    top: 0;
    width: 25px;
    height: 25px;
    transition: all .5s ease;
    transform: translate(-50%,4%) rotate(-90deg);
    border: 1.5px solid #000;
    border-radius: 50%;
}
.faq-content .faq-arrow::after, .faq-content .faq-arrow::before {
    content: '';
    position: absolute;
    display: block;
    right: -9px;
    width: 12px;
    height: 2px;
    background: #000;
    border-radius: 2px;
    transition: all .5s;
}
.faq-content .faq-arrow::before {
    top: 10px;
    right: 5px;
}
.faq-content .faq-arrow::after {
    right: inherit;
    left: 5px;
    transform: rotate(90deg);
    top: 10px;
}
.faq-content.active .faq-arrow::after, .faq-content.active .faq-arrow::before {
    background: #4749E3;
}
.faq-content.active span.faq-arrow:before {
    transform: rotate(-90deg);
}
.accord-content a{
    color: #000;
    text-decoration: underline;
}
.accord-content ul.number li, ul.list li {
    margin-bottom: 15px;
}
.accord-content ul li {
    padding: 10px 10px 10px 30px;
    position: relative;
}
.accord-content ul li::before {
    content: "";
    inset: 22px 0 0 4px;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
    position: absolute;
}
.accord-content ul li::after {
    content: "";
    inset: 18px 0 0 0;
    width: 18px;
    height: 18px;
    border: 1px dashed #808080;
    border-radius: 50%;
    position: absolute;
}
/* -------------- FAQ End ------------- */
.zwc-cta-sec .content-wrap {
    max-width: 1000px;
    margin: 0 auto;
}
.zwc-cta-sec {
    color: #fff;
    text-align: center;
    position: relative;
    background: #091324;
}
.zwc-product-types{
    background: #17202A;
    color: #fff;
}
.zwc-product-types h2{
    margin: 0 auto;
    text-align: center;
    max-width: 600px;
}
.zwc-spl-title{
    color: #23B561;
    display: block;
    text-align: center;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.1);
    padding: 3px 10px;
    font-family: var(--zf-secondary-medium);
    max-width: 260px;
    margin: 0 auto 10px;
}
/* Tab Section */
.zwc-tab-sec{
    background: var(--primary-color);
    color: #fff;
    border-radius: 15px;
    padding: 80px;
}
.zwc-tab-sec .zwc-page-title p{
    max-width: 600px;
    margin:15px auto 0 auto;
}
.zwc-tab-sec .zwc-page-title h2{
    font-size: 30px;
}
.zwc-left-tab-flex {
    display: flex;
    justify-content: space-evenly;
    gap: 60px;
    align-items: center;
    margin-top: var(--section-m-t-60);
}
.zwc-left-tab-nav {
    width: 100%;
    max-width: 45%;
}
.zwc-left-tab-nav li {
    position: relative;
    cursor: pointer;
    padding: 25px 30px 10px;
    border-bottom: 1px solid rgb(255, 255, 255, 0.1);
}
.zwc-left-tab-nav li button {
    margin: 0;
    padding-left: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: var(--zf-primary-semibold);
    font-size: 21px;
    cursor: pointer;
    color: rgb(255, 255, 255);
    position: relative;
    border: 0;
    padding-bottom: 20px;
    padding-left: 35px;
}
.zwc-left-tab-nav li button span{
    width: 22px;
    height: 15px;
    display: inline-block;
    background: url(/sites/zweb/images/survey/product-experience/zsp-arrow.svg) no-repeat 0 0 / 20px;
    margin-right: 12px;
    /* display: none; */
    position: absolute;
    left: 0;
    top: 5px;
}
.zwc-left-tab-nav li.active button span{
    filter: invert(1);
   
}
.zwc-left-tab-ctn {
    width: 100%;
    max-width: 40%;
    height: 607px;
    background: url(/sites/zweb/images/survey/product-experience/zsp-types-survey.jpg) no-repeat 0 center / contain;
    border-radius: 20px;
}
.zwc-left-hide {
    opacity: 0;
    height: 0px;
    position: relative;
}
.zwc-left-active {
    opacity: 1;
    transform: translateY(0px);
    position: relative;
    height: 100%;
}
.zwc-left-tab-image {
    max-width: 75%;
    margin: 0px auto;
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
    bottom: 50px;
    transform: translateX(20px);
    opacity: 0;
    overflow: hidden;
    left: -50px;
}
.zwc-left-active .zwc-left-tab-image{
    transform: translateX(0);
    opacity: 1;
    transition: all 0.5s ease-in-out 0s;
}
.zwc-left-tab-nav a{
    font-size: 14px;
    font-family: var(--zf-primary-regular);
    border-radius: 30px;
    margin: 20px 0;
    display: inline-block;
    padding: 8px 17px;
    color: #fff;
    border: 1px solid #fff;
}
@keyframes lineAnimation {
    0% {
        right: 100%;
    }
    
    100% {
        right: 0px;
    }
}
.zwc-left-tab-nav li p {
  margin-bottom: 20px;
  font-size: 16px;
}
.zwc-acc-ctn{
    display: none;
}

.zwc-ip-address{
    margin: 10px 0;
}
.zwc-two-col {
    gap: 10px;
}
.zwc-two-col .zwc-ctn-card {
    max-width: 100%;
    flex: 50% 1 1;
    background: var(--primary-color);
    color: #fff;
    padding: 80px 100px;
    border-radius: 10px;
}
.zwc-two-col .zwc-ctn-card h3{
    font-size: 40px;
}
.zwc-return-path .zwc-block-left{
    max-width: 750px;
    text-align: center;
    margin: 0 auto;
}
.zwc-path-icon{
    width: 60px;
    height: 60px;
    display: block;
    margin: 0 auto 15px auto;
    background: rgba(0, 0, 0, 0.5);
}
li.active {
    background: #fff;
    color: #000;
    border-radius: 10px;
}

li.active button {
    color: #000;
}
@media screen and (min-width: 767px) {
    .zwc-banner-human, .zwc-banner-rating, .zwc-banner-img-inr, 
    .zwc-product-exp, .zwc-exp, .zwc-2col-inner .zwc-2col-rht {
        opacity: 0;
    }
    .middle-animated .zwc-banner-human, .middle-animated .zwc-product-exp,
    .middle-animated .zwc-2col-inner .zwc-2col-rht {
        animation: 0.3s ease-out 0.3s 1 forwards running slideDown;
    }
    .middle-animated .zwc-banner-rating{
        animation: 0.5s ease-out 0.5s 1 forwards running slideLeft;
    }
    .middle-animated .zwc-banner-img-inr{
        animation: 0.5s ease-out 0.5s 1 forwards running slideRight;
    }
    .middle-animated .zwc-exp{
        animation: 0.5s ease-out 0.8s 1 forwards running slideLeft;

    }
    
    @keyframes slideDown {
        0% {
            visibility: hidden;
            opacity: 0;
            transform: translateY(30px);
        }

        100% {
            visibility: visible;
            opacity: 1;
            transform: translateY(0px);
        }
    }
    @keyframes slideLeft {
        0% {
            visibility: hidden;
            opacity: 0;
            transform: translateX(30px);
        }

        100% {
            visibility: visible;
            opacity: 1;
            transform: translateX(0px);
        }
    }
    @keyframes slideRight {
        0% {
            visibility: hidden;
            opacity: 0;
            transform: translateX(-30px);
        }

        100% {
            visibility: visible;
            opacity: 1;
            transform: translateX(0px);
        }
    }
    @keyframes floating {
        0%, 100% {
            transform: translateY(15px);
        }

        50% {
            transform: translateY(0px);
        }
    }
}
@media screen and (max-width: 1200px) {
    .zwc-survey-main h1{
        font-size: 58px;
    }
    .zwc-survey-main h2 {
        font-size: 42px;
    }    
   
    .zwc-research-table li {
        /* padding: 18px 60px; */
        max-width: 100%;
        margin: 0;
    }
    .zwc-research-table li:first-child span:first-child{
        padding-left:0 ;
    }
}
@media screen and (max-width: 1024px) {
    .zwc-survey-main h1{
        font-size: 48px;
        max-width: 700px;
    }
    .zwc-forms-main h2 {
        font-size: 36px;
        max-width: 100%;
    }
    :root {
        --section-p-t: 70px;
        --section-p-b: 70px;
        --section-m-t: 70px;
        --section-m-b: 70px;
        --section-m-t-60: 60px;
    }
    .zwc-banner-ctn{
        padding-top: 3em;
    }
    .zwc-2col-flex{
        flex-direction: column;
        gap: 30px;
    }

    .zwc-2col-lft, .zwc-2col-rht, .zwc-benefits .zwc-2col-lft, .zwc-benefits .zwc-2col-rht{
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
    }
    .zwc-benefits .zwc-2col-lft{
        position: relative;
        top: 0;
    }
    .zwc-list-ctn{
        max-width: 100%;
    }
    .zwc-secure p {
        max-width: 360px;
    }
    .zwc-left-tab-ctn{
        display: none;
    }
    .zwc-left-tab-nav {
        max-width: 600px;
    }
    .zwc-experience .content-wrap{
        padding: 3em 2em;
    }
    .zwc-2col-oc .zwc-2col-lft {
        order: 0;
    }
    .zwc-2col-rht img{
        margin: 0 auto;
    }
    .zwc-research-table li{
        /* gap: 20px; */
    }
}
@media screen and (max-width: 767px) {
    :root{
        --section-m-t-60: 40px;
    }
    .zwc-survey-main h1{
        font-size: 38px;
    }
    .zwc-survey-main h2 {
        font-size: 34px;
        text-align: center;
    }
    .zwc-p-wid{
        text-align: center;
    }
    .zwc-faq-sec .zwc-page-title h2 {
        font-size: 30px;
    }
    
    .zwc-survey-main .faq-content h3 {
        font-size: 18px;
        padding: 0 20px 20px 40px
    }
    .accord-content{
        padding-left: 40px;
    }
    .zwc-survey-main .zwc-feature-inr h3{
        font-size: 18px;
    }
    .accord-content ul li{
        font-size: 15px;
    }
    .zwc-banner-ctn{
        padding-bottom: 0;
    }
    .zwc-banner-img{
        position: inherit;
        margin-top: 20px;
    }
   
    .zwc-feature, .zwc-feature-inr.zwc-secure{
        gap: 40px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .zwc-secure p{
        max-width: 100%;
    }
    .zwc-feature-inr {
        max-width: 500px;
    }
    .zwc-feature-icn{
        margin-left: auto;
        margin-right: auto;
    }
    .zwc-age-group{
        max-width: 40%;
    }
    .zwc-nps-scroe{
        max-width: 50%;
    }
    .zwc-experience .zwc-feature-inr {
        padding: 30px;
    }
    .zwc-feature-inr.zwc-seamless img{
        left: 0;
    }
    .zwc-research-table li b{
        font-size: 18px;
    }
    .zwc-research-table li {
        /* padding: 12px 30px; */
    }
    .zwc-left-tab-nav li button{
        font-size: 18px;
    }
    .zwc-left-tab-nav li {
        padding-left:20px;
    }
    .zwc-banner-img-inr{
        max-width: 80%;
        bottom: 0;
        left: 0;
        margin: 2em 0 3em 0;
        align-items: center;
    }
    .zwc-banner-human, .zwc-banner-rating {
        display: none;
    }
    .zwc-banner-ctn p {
        font-size: 16px;
    }
    
    .zwc-research h2 span{
        font-size: 40px;
    }
    .zwc-exp {
        right: 0;
        bottom: 8%;
        margin: 0 auto;
        max-width: 80%;
    }
    .zwc-research-table li span {
        padding: 20px 18px 16px 57px;
    }
    .zwc-research .zwc-min-wrap{
        padding: 0;
    }
    .zwc-research-table-main{
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .zwc-research-table{
        width: 600px;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 480px){
    
    .zwc-survey-main h2 {
        font-size: 30px;
    }
    .zwc-survey-main h3 {
        font-size: 26px;
    }
    .zwc-faq-sec .zwc-page-title h2 {
        font-size: 26px;
    }
    .zwc-research-table li {
        /* padding: 12px 20px; */
        font-size: 16px;
    }
    .zwc-banner-img-inr{
        max-width: 100%;
    }
}