:root {
    --zwc-primary-color: #334acc;
    --zwc-secondary-color: #0047ff;
    --zwc-brown-color: #b61619;
    --zwc-gary-color: #333;
    --zwc-gary-light-color: #fcfcfc;
    --zwc-black-color: #000;
    --zwc-white-color: #ffff;
    --zwc-alice-blue: #2247b4;
    --zwc-h1-text: clamp(26px,6.8vw,72px);
    --zwc-h2-text: clamp(24px,4.2vw,60px);
    --zwc-h3-text: clamp(21px,2.3vw,24px);
    --zwc-text-md: clamp(17px,1.6vw,24px);
    --zwc-text-2xl: clamp(24px,4.1vw,40px);
    --zwc-text-sm: clamp(15px,1vw,18px);
    --zwc-sprite-img: url(/sites/zweb/images/learn/features-new/zwc-sprite.svg);
    --zwc-padding-main: clamp(50px,8.5vw,120px)
}

.zwc-dflex {
    display: flex;
    flex-wrap: var(--zwc-wrap);
    justify-content: var(--zwc-just-c,space-between);
    gap: var(--zwc-gap,0);
    align-items: var(--zwc-align-i,center)
}

.zwc-cols>div,.zwc-cols>li {
    width: calc((100% - (var(--zwc-gap) * (var(--zwc-card-count) - 1))) / var(--zwc-card-count, 1))
}

.zwc-wrapper h1 {
    font-size: var(--zwc-h1-text);
    font-family: var(--primaryfont-semibold);
    line-height: 1.2
}

.zwc-wrapper h2 {
    font-size: var(--zwc-h2-text);
    font-family: var(--secondaryfont-bold);
    line-height: 1.2;
    margin-bottom: var(--zwc-h2-mb,20px);
    max-width: var(--zwc-max-w)
}

.zwc-wrapper h3 {
    font-size: var(--zwc-h3-text);
    font-family: var(--primaryfont-semibold)
}

.zwc-wrapper .content-wrap {
    max-width: var(--zwc-content-wap,1440px)
}

.zwc-wrapper p {
    font-size: clamp(16px,1.5vw,18px)
}

.zwc-wrapper p.zwc-m-size {
    font-size: clamp(16px,1.9vw,20px);
    margin-bottom: 16px
}

.act-btn.cta-btn {
    text-transform: capitalize;
    font-size: clamp(15px,2.7vw,18px);
    padding: 11px 32px;
    border-radius: 4px
}

.zwc-sprite-icon,.zwc-sprite-icon-aft::after,.zwc-sprite-icon-bef::before {
    background: var(--zwc-sprite-img) no-repeat var(--zwc-bg-pos,0 0);
    background-size: var(--zwc-bg-size,1077%) auto;
    display: inline-block
}

.zwc-sprite-icon-aft::after,.zwc-sprite-icon-bef::before {
    content: ""
}

.zwc-mb-0 {
    margin-bottom: 0
}

.zwc-row-rev {
    flex-direction: row-reverse
}

.zwc-col-dir {
    flex-direction: column
}

.zwc-block,.zwc-batch,.zwc-sub-titile {
    display: block
}

.zwc-rl-auto {
    margin-inline:auto}

.zwc-pos-relative,.zwc-sprite-icon-aft,.zwc-sprite-icon-bef {
    position: relative
}

.zwc-pos-absolute,.zwc-sprite-icon-aft::after,.zwc-sprite-icon-bef::before {
    position: absolute
}

.zw-product-header.zwph-white {
    background: var(--zwc-primary-color)
}

.zwc-banner-sec {
    padding: var(--zwc-padding-main) 0;
    --zwc-content-wap: 950px;
    text-align: center;
    background-color: var(--zwc-primary-color);
    color: var(--zwc-white-color)
}

.zwc-banner-sec p {
    font-size: var(--zwc-text-md);
    width: min(100%,740px)
}

.zwc-batch {
    color: var(--zwc-black-color);
    font-family: var(--primaryfont-bold);
    width: fit-content;
    margin-bottom: 6px;
    font-size: 16px
}

.zwc-btn-arrow {
    font-size: 16px;
    font-family: var(--primaryfont-semibold);
    color: var(--zwc-secondary-color)
}

.zwc-btn-arrow::after {
    --zwc-sprite-img: none;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--zwc-secondary-color);
    border-bottom: 2px solid var(--zwc-secondary-color);
    transform: rotate(-45deg);
    top: 5px;
    right: -25px
}

.zwc-btn-arrow::before {
    --zwc-sprite-img: none;
    width: 15px;
    border-bottom: 2px solid var(--zwc-secondary-color);
    right: -25px;
    top: 9px
}

ul.zwc-list-cards {
    --zwc-card-count: 3;
    --zwc-gap: 20px;
    margin-top: 40px;
    --zwc-align-i: normal;
    --zwc-wrap: wrap;
    --zwc-just-c: start
}

ul.zwc-list-cards li {
    border: 1px solid #e4e6e9;
    border-radius: 8px;
    padding: 91px clamp(20px,2.1vw,40px) clamp(20px,2.1vw,40px);
    background: var(--zwc-white-color)
}

ul.zwc-list-cards p {
    font-size: 16px
}

.zwc-sub-titile {
    font-size: 18px;
    color: var(--zwc-black-color);
    font-family: var(--primaryfont-bold);
    margin-bottom: 24px
}

.zwc-link-container button {
    background-color: var(--zwc-gary-light-color);
    border: 1px solid #ededed;
    padding: 16px 16px 16px 22px;
    width: 100%;
    text-align: left;
    font-size: var(--zwc-text-sm);
    border-radius: 4px;
    font-family: var(--zf-secondary-medium);
    cursor: pointer
}

.zwc-link-container button.zwc-active {
    background-color: var(--zwc-alice-blue);
    color: var(--zwc-white-color)
}

.zwc-link-container li:not(:last-child) {
    margin-bottom: 10px
}

.zwc-image-content {
    margin-top: 40px
}

.zwc-testimonial {
    background-color: var(--zwc-brown-color);
    color: var(--zwc-white-color);
    padding-right: clamp(30px,5vw,91px);
    --zwc-align-i: end;
    --zwc-gap: clamp(20px,3vw,54px)
}

.zwc-testimonial p {
    font-size: var(--zwc-text-md);
    margin-bottom: clamp(20px,2.5vw,50px)
}

.zwc-testimonial h3,.zwc-testimonial .zwc-test-name {
    margin-bottom: 0;
    font-family: var(--secondaryfont-bold)
}

.zwc-testimonial .zwc-test-name {
    font-size: 16px
}

.zwc-testimonial .zwc-test-content-wrap {
    padding: clamp(30px,5vw,74px) 0
}

.zwc-testimonial img {
    vertical-align: bottom
}

.zwc-section-1 {
    padding: 60px 0 0
}

.zwc-section-1>.content-wrap {
    --zwc-align-i: start
}

.zwc-section-1 h2 {
    --zwc-h2-text: var(--zwc-text-2xl);
    --zwc-h2-mb: 16px
}

.zwc-section-1 .zwc-lhs {
    width: 264px;
    position: sticky;
    top: 90px
}

.zwc-section-1 .zwc-rhs {
    width: calc(100% - 302px)
}

.zwc-cards-list {
    padding-inline:clamp(20px,2.1vw,40px);background-color: var(--zwc-bg-color)
}

.zwc-cards-list:first-child {
    margin-top: 51px
}

.zwc-cards-list:not(:last-child) {
    margin-bottom: 60px
}

.zwc-cards-list.zwc-card-3,.zwc-cards-list.zwc-card-5,.zwc-cards-list.zwc-card-6,.zwc-cards-list.zwc-card-7,.zwc-cards-list.zwc-card-8 {
    padding-block:clamp(20px,2.9vw,60px);border-radius: 8px
}

.zwc-cards-list.zwc-card-3,.zwc-cards-list.zwc-card-7 {
    --zwc-bg-color: #fcf5f5
}

.zwc-cards-list.zwc-card-5 {
    --zwc-bg-color: #2247b4
}

.zwc-cards-list.zwc-card-5 .zwc-text-content,.zwc-cards-list.zwc-card-5 .zwc-text-content .zwc-btn-arrow {
    color: var(--zwc-white-color)
}

.zwc-cards-list.zwc-card-5 .zwc-text-content::before,.zwc-cards-list.zwc-card-5 .zwc-text-content .zwc-btn-arrow::before,.zwc-cards-list.zwc-card-5 .zwc-text-content::after,.zwc-cards-list.zwc-card-5 .zwc-text-content .zwc-btn-arrow::after {
    border-color: var(--zwc-white-color)
}

.zwc-cards-list.zwc-card-5 .zwc-batch {
    color: var(--zwc-white-color)
}

.zwc-cards-list.zwc-card-6,.zwc-cards-list.zwc-card-8 {
    --zwc-bg-color: #f7f7ff
}

.zwc-cards-list.zwc-card-3 {
    padding-bottom: 16%
}

.zwc-cards-list.zwc-card-3 .zwc-image-content {
    right: 3%;
    bottom: 6%;
    max-width: 60%
}

.zwc-cards-list.zwc-card-4 p {
    width: min(100%,790px)
}

.zwc-cards-list.zwc-card-4 .zwc-image-content {
    right: -1%;
    bottom: -3%;
    max-width: 42%
}

.zwc-cards-list:not(:first-child,.zwc-card-4,.zwc-card-7,.zwc-card-9) p {
    width: min(100%,890px)
}

.zwc-cards-list li.zwc-sprite-icon-aft::after {
    width: var(--zwc-sp-w,50px);
    height: var(--zwc-sp-h,45px);
    top: 30px;
    left: 40px
}

.zwc-cards-list.zwc-card-1 .zwc-list-cards li:nth-child(2)::after {
    --zwc-bg-pos: 10% 0%;
    --zwc-bg-size: 1327%;
    --zwc-sp-w: 40px
}

.zwc-cards-list.zwc-card-1 .zwc-list-cards li:nth-child(3)::after {
    --zwc-bg-pos: 18.3% -1.3%;
    --zwc-bg-size: 1203%;
    --zwc-sp-w: 43px
}

.zwc-cards-list.zwc-card-2 ul {
    margin-top: 10px
}

.zwc-cards-list.zwc-card-2 li:nth-child(1)::after {
    --zwc-bg-pos: 27% -1%;
    --zwc-bg-size: 1262%;
    --zwc-sp-w: 44px
}

.zwc-cards-list.zwc-card-2 li:nth-child(2)::after {
    --zwc-bg-pos: 35.8% 0;
    --zwc-bg-size: 1221%;
    --zwc-sp-w: 45px
}

.zwc-cards-list.zwc-card-2 li:nth-child(3)::after {
    --zwc-bg-pos: 44.7% -0.9%;
    --zwc-bg-size: 1232%;
    --zwc-sp-w: 43px
}

.zwc-cards-list.zwc-card-3 li:nth-child(1)::after {
    --zwc-bg-pos: 52.7% -3.4%;
    --zwc-bg-size: 1412%;
    --zwc-sp-w: 36px
}

.zwc-cards-list.zwc-card-3 li:nth-child(2)::after {
    --zwc-bg-pos: 60.6% -1.2%;
    --zwc-bg-size: 1320%;
    --zwc-sp-w: 40px
}

.zwc-cards-list.zwc-card-3 li:nth-child(3)::after {
    --zwc-bg-pos: 69.8% -3.3%;
    --zwc-bg-size: 1130%;
    --zwc-sp-w: 45px
}

.zwc-cards-list.zwc-card-3 li:nth-child(4)::after {
    --zwc-bg-pos: 79.4% -4%;
    --zwc-bg-size: 1135%;
    --zwc-sp-w: 45px
}

.zwc-cards-list.zwc-card-4 li:nth-child(1)::after {
    --zwc-bg-pos: 88.8% -4%;
    --zwc-bg-size: 1166%;
    --zwc-sp-w: 42px
}

.zwc-cards-list.zwc-card-4 li:nth-child(2)::after {
    --zwc-bg-pos: 97.4% -5%;
    --zwc-bg-size: 1237%;
    --zwc-sp-w: 40px
}

.zwc-cards-list.zwc-card-5 ul {
    margin-top: -30px
}

.zwc-cards-list.zwc-card-5 li:nth-child(1)::after {
    --zwc-bg-pos: 0.3% 50%;
    --zwc-bg-size: 1175.1%;
    --zwc-sp-w: 48px
}

.zwc-cards-list.zwc-card-5 li:nth-child(2)::after {
    --zwc-bg-pos: 9.4% 51%;
    --zwc-bg-size: 1298%;
    --zwc-sp-w: 44px
}
.zwc-cards-list.zwc-card-5 li:nth-child(3)::after {
       --zwc-bg-pos: 100.9% 101%;
       --zwc-bg-size: 1220%;
       --zwc-sp-w: 46px;
}

.zwc-cards-list.zwc-card-5 li:nth-child(4)::after {
    --zwc-bg-pos: 17.6% 50%;
    --zwc-bg-size: 1434%;
    --zwc-sp-w: 38px
}

.zwc-cards-list.zwc-card-5 li:nth-child(5)::after {
    --zwc-bg-pos: 25.4% 50%;
    --zwc-bg-size: 1217%;
    --zwc-sp-w: 44px
}
.zwc-cards-list.zwc-card-5 li:nth-child(6)::after {
    --zwc-bg-pos: 41.9% 50.5%;
    --zwc-bg-size: 1438%;
    --zwc-sp-w: 39px
}
.zwc-cards-list.zwc-card-5 li:nth-child(7)::after {
    --zwc-bg-pos: 34.1% 50.5%;
    --zwc-bg-size: 1347%;
    --zwc-sp-w: 41px;
}

.zwc-cards-list.zwc-card-6 li:nth-child(1)::after {
    --zwc-bg-pos: 49.1% 50.7%;
    --zwc-bg-size: 1476%;
    --zwc-sp-w: 36px
}

.zwc-cards-list.zwc-card-6 li:nth-child(2)::after {
    --zwc-bg-pos: 57% 50.4%;
    --zwc-bg-size: 1253%;
    --zwc-sp-w: 43px
}

.zwc-cards-list.zwc-card-6 li:nth-child(3)::after {
    --zwc-bg-pos: 65.7% 50.8%;
    --zwc-bg-size: 1221%;
    --zwc-sp-w: 44px
}

.zwc-cards-list.zwc-card-6 li:nth-child(4)::after {
    --zwc-bg-pos: 73.7% 49.1%;
    --zwc-bg-size: 1403%;
    --zwc-sp-w: 36px
}

.zwc-cards-list.zwc-card-6 li:nth-child(5)::after {
    --zwc-bg-pos: 82.8% 50.5%;
    --zwc-bg-size: 1127%;
    --zwc-sp-w: 48px
}

.zwc-cards-list.zwc-card-7 li:nth-child(1)::after {
    --zwc-bg-pos: 91.1% 51.7%;
    --zwc-bg-size: 1356%;
    --zwc-sp-w: 42px
}

.zwc-cards-list.zwc-card-7 li:nth-child(2)::after {
    --zwc-bg-pos: 98.3% 50.7%;
    --zwc-bg-size: 1458%;
    --zwc-sp-w: 38px
}

.zwc-cards-list.zwc-card-7 li:nth-child(3)::after {
    --zwc-bg-pos: 0.2% 98.7%;
    --zwc-bg-size: 1148%;
    --zwc-sp-w: 48px
}

.zwc-cards-list.zwc-card-7 li:nth-child(4)::after {
    --zwc-bg-pos: 9.6% 100.6%;
    --zwc-bg-size: 1221%;
    --zwc-sp-w: 44px
}

.zwc-cards-list.zwc-card-8 li:nth-child(1)::after {
    --zwc-bg-pos: 18.7% 100%;
    --zwc-bg-size: 1090%;
    --zwc-sp-w: 50px
}

.zwc-cards-list.zwc-card-8 li:nth-child(2)::after {
    --zwc-bg-pos: 28.7% 100.8%;
    --zwc-bg-size: 1089%;
    --zwc-sp-w: 50px
}

.zwc-cards-list.zwc-card-8 li:nth-child(3)::after {
    --zwc-bg-pos: 38.3% 102%;
    --zwc-bg-size: 1259%;
    --zwc-sp-w: 40px
}

.zwc-cards-list.zwc-card-8 li:nth-child(4)::after {
    --zwc-bg-pos: 47.1% 105.6%;
    --zwc-bg-size: 1217%;
    --zwc-sp-w: 42px
}

.zwc-cards-list.zwc-card-8 li:nth-child(5)::after {
    --zwc-bg-pos: 56.5% 102.1%;
    --zwc-bg-size: 1128%;
    --zwc-sp-w: 47px
}

.zwc-cards-list.zwc-card-8 li:nth-child(6)::after {
    --zwc-bg-pos: 64.8% 100.1%;
    --zwc-bg-size: 1428%;
    --zwc-sp-w: 39px
}

.zwc-cards-list.zwc-card-9 li:nth-child(1)::after {
    --zwc-bg-pos: 73.5% 101.6%;
    --zwc-bg-size: 1140%;
    --zwc-sp-w: 48px
}

.zwc-cards-list.zwc-card-9 li:nth-child(2)::after {
    --zwc-bg-pos: 82.6% 102.4%;
    --zwc-bg-size: 1182%;
    --zwc-sp-w: 46px
}

.zwc-cards-list.zwc-card-9 li:nth-child(3)::after {
    --zwc-bg-pos: 91.9% 102%;
    --zwc-bg-size: 1166%;
    --zwc-sp-w: 46px
}

.zwc-footer {
    text-align: center;
    padding: var(--zwc-padding-main) 0;
    --zwc-content-wap: 1200px;
    --zwc-h2-mb: 30px
}

@media only screen and (max-width: 1280px) {
    ul.zwc-list-cards {
        --zwc-card-count:2
    }

    .zwc-cards-list.zwc-card-3 .zwc-image-content,.zwc-cards-list.zwc-card-4 .zwc-image-content {
        position: unset;
        max-width: 70%;
        margin-inline:auto}

    .zwc-cards-list.zwc-card-3 {
        padding-bottom: clamp(20px,2.9vw,60px)
    }
}

@media only screen and (max-width: 1199px) {
    .zwc-section-1 .zwc-lhs {
        top:20px
    }
}

@media only screen and (max-width: 1024px) {
    .zwc-section-1 .zwc-lhs {
        display:none
    }

    .zwc-section-1 .zwc-rhs {
        width: 100%
    }
}

@media only screen and (max-width: 767px) {
    .zwc-wrapper .content-wrap {
        --zwc-content-wap:500px
    }

    ul.zwc-list-cards {
        --zwc-card-count: 1
    }

    .zwc-cards-list.zwc-card-3 {
        padding-bottom: 20px
    }

    .zwc-testimonial .zwc-test-content-wrap {
        padding: 0
    }

    .zwc-testimonial {
        flex-direction: column;
        padding: 20px;
        --zwc-align-i: center
    }
}