
.hero-section {
    background: #f8f9fb
}

.flex-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-section .content-wrap {
    padding-top: 50px
}

.banner-top {
    color: #09983a;
    text-transform: uppercase;
    font-family: var(--zf-primary-medium);
    margin: 0 auto 10px;
    font-size: 16px;
    letter-spacing: .5px;
    display: block;
    -webkit-font-smoothing: initial
}

.sec-line::after {
    content: "";
    position: relative;
    width: 40px;
    height: 1px;
    background-color: #f60014;
    display: block;
    margin: 22px auto 0
}

.hero-cont {
    position: relative;
    width: 100%;
    max-width: 880px;
    margin: 0 auto 10px
}

.hero-image img {
    vertical-align: bottom;
    width: 100%
}

.trustbrand-section {
    background: #1c83a5;
    padding-bottom: 180px
}

.trustbrand-section h2 {
    color: rgba(255,255,255,0.8);
    font-family: var(--zf-primary-medium);
    margin-bottom: 50px;
    font-size: 13px;
    letter-spacing: .5px
}

.trustbrand-inner ul {
    gap: 65px
}

.award-section {
    width: 97%;
    max-width: 1280px;
    margin: 0 auto;
    box-shadow: 5px 15px 45px rgba(101,111,144,0.0705882353);
    border: 1px solid #e7ebf0;
    border-radius: 20px;
    background: #fff;
    margin-top: -200px
}

.award-inner {
    padding: 40px 5px
}

.award-section .content-wrap {
    width: 92%
}

.award-top {
    background: #f2f4ff;
    border: 1px solid #e7ebf0;
    border-radius: 80px;
    padding: 20px 20px;
    margin-bottom: 40px;
    position: relative
}

.gartner {
    width: 30%;
    max-width: 310px;
    gap: 20px;
    justify-content: left;
    align-items: flex-start
}

.zwc-section a.learn-more {
    font-size: 14px;
    letter-spacing: .5px;
    font-family: var(--zf-primary-medium);
    line-height: 17px;
    border: 1px solid #086cb8;
    border-radius: 2px;
    padding: 16px 40px 16px 24px;
    position: relative;
    max-width: -moz-fit-content;
    max-width: fit-content;
    color: #056cb8;
    display: block;
}

.award-icon {
    background-position: -9px -358px;
    width: 51px;
    height: 63px
}

.gartner-info {
    max-width: 210px
}

.gartner-info p {
    font-size: 13px;
    line-height: 1.5
}

.award-top ul {
    gap: 20px;
    justify-content: right;
    width: 65%;
    align-items: flex-start
}

.award-top li {
    text-align: left;
    width: 22%;
    max-width: 210px
}

.award-wrap {
    position: relative;
    gap: 45px;
    align-items: flex-start
}

.award-wrap .leaf-before,.award-wrap .leaf-after {
    top: 50%;
    transform: translateY(-50%)
}

.awardbx {
    width: 25%;
    max-width: 220px;
    text-align: center;
    transition: .5s all linear
}

.award-section a {
    color: #333
}

.awardbx span {
    width: 80px;
    height: 80px;
    background-color: #e7edfa;
    display: block;
    border-radius: 10px;
    margin: 0 auto 16px
}

.awardbx:nth-child(2) span {
    background-color: #ffeded
}

.awardbx:nth-child(3) span {
    background-color: #e4f2fd
}

.awardbx:nth-child(4) span {
    background-color: #e6f6ff
}

.awardbx p,.award-top li {
    font-size: 14px;
    letter-spacing: 0;
    margin-bottom: 0;
    line-height: 1.5
}

.awardbx span::before {
    top: 50%;
    transform: translateY(-50%);
    margin: auto
}



.block-cont {
    width: 100%;
    position: relative;
    margin: 0 auto 40px;
    max-width: 780px
}

.tablist {
    width: 100%;
    margin: 0 auto 50px;
    gap: 80px;
    border-bottom: 1px solid #e7ebf0;
    position: relative
}

.fixed-top {
    position: sticky;
    top: 66px;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    margin-inline:auto}

.unique .tablist {
    background: #fff
}

.tablist li {
    font-size: 16px;
    letter-spacing: -0.07px;
    line-height: 1.5;
    width: 23%;
    max-width: 190px;
    padding: 20px 0 20px;
    -webkit-cursor: pointer;
    cursor: pointer;
    position: relative
}

.unique .tablist li:first-child {
    max-width: 230px
}

.unique .tablist li a {
    color: #333
}

.tablist li.active a {
    font-family: var(--zf-primary-medium);
    color: #1767c4
}

.unique .tablist li.active:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: #056cb8;
    left: 0;
    bottom: 0
}

.tabcont-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 50px
}

.tabcont-box {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 40px 50px;
    background: #f7f7ff;
    border: 1px solid #ebebf5;
    border-radius: 4px;
    transform: scale(0.98);
    position: relative
}

.unique .tabcont-box {
    position: sticky;
    top: 180px;
    transition: .2s all linear
}

.tab-cont {
    gap: 60px;
    border-bottom: 1px solid #e9e9f5;
    padding-bottom: 35px;
    margin-bottom: 35px
}

.tab-cont h3 {
    width: 39%;
    max-width: 385px
}

.tab-cont p {
    width: 52%;
    max-width: 600px;
    margin-bottom: 0
}

.expandlist {
    position: relative;
    gap: 7.5px;
    align-items: stretch;
    margin-bottom: 40px
}

.expandbx {
    width: 32.5%;
    max-width: 335px;
    background-color: #fff;
    box-shadow: 0 6px 10px rgba(223,233,250,0.2);
    border: 1px solid #e5e5f3;
    border-radius: 4px;
    transition: .5s all ease
}

.expandbx>a {
    width: 100%;
    padding: 20px 20px 20px 80px;
    display: inline-block
}

.expandbx:hover {
    border-color: #b2e7ff;
    box-shadow: 0 13px 20px 0 #f1f1f1;
    transform: translate(0,-2px)
}

.expandbx p {
    font-size: 15px;
    letter-spacing: -0.07px;
    line-height: 25px;
    max-width: 90%
}

.expandbx h4 {
    font-size: 20px;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
    line-height: 20px
}

.expandbx h4::before {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 20px
}

.api::before {
    background-position: -158px -10px
}

.sdk::before {
    background-position: -201px -10px
}

.server::before {
    background-position: -243px -10px
}

.workflow::before {
    background-position: -287px -10px
}

.sigma::before {
    background-position: -329px -10px
}

.ver-plat::before {
    background-position: -371px -10px
}

h5 {
    font-family: var(--zf-primary-medium)
}

.expand-applist h5 {
    display: inline-block;
    margin: 0 auto 20px;
    text-transform: uppercase;
    position: relative;
    width: 100%
}

.expand-applist h5::before {
    position: absolute;
    content: "";
    width: 72%;
    height: 1px;
    background: #e9e9f5;
    left: 50%;
    transform: translateX(-50%);
    top: 8px;
    z-index: 0
}

.expand-applist h5>span {
    background: #f7f7ff;
    display: inline-block;
    padding: 0 20px;
    z-index: 1;
    position: relative
}

.expand-applist ul {
    gap: 50px
}

.expand-applist ul li {
    width: 84px;
    height: 27px
}



.tab-2 {
    background: #fffbf0;
    border: 1px solid #f9f0da
}

.tab-2 .tab-cont {
    border-bottom: 1px solid #f2ecdf
}

.tab-2 .expandbx {
    width: 49%;
    max-width: 505px
}

.tab-2 .expandbx>a {
    width: 100%;
    padding: 50px 20px 50px 90px;
    display: inline-block
}

.tab-2 .expandbx h4 {
    font-size: 24px;
    letter-spacing: -0.24px;
    line-height: 27px
}

.creator-logo::before {
    background-position: -413px -10px
}

.catalyst-logo::before {
    background-position: -456px -10px
}

.tab-2 .expandbx h4::before {
    left: 28px
}

.tab-2 .expandlist {
    margin-bottom: 50px
}

.tab-2.tabcont-box,.tab-4.tabcont-box {
    padding-bottom: 70px
}

.tab-2 .learn-more {
    margin: auto
}

.tab-3 {
    background: #effdfa;
    border: 1px solid #e1f0ed
}

.tab-3 .tab-cont {
    border-bottom: 1px solid #d8f0ea
}

.testimonial-wrap,.customer-detail {
    position: relative
}

.testimonial-box {
    gap: 110px;
    justify-content: left;
    align-items: flex-start;
    transition: .5s all ease
}

.block-section .testimonial-box {
    justify-content: center
}

.testimonial-left {
    width: 30%;
    max-width: 343px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(223,233,250,0.2);
    border: 1px solid #e4f2ee;
    border-radius: 8px;
    padding: 36px 36px
}



.tab-3 .customer-name::before {
    position: relative;
    left: 5px;
    top: 3px;
    display: inline-block
}

.testimonial-left p {
    font-size: 22px;
    letter-spacing: -0.22px;
    line-height: 32px
}

.tab-3 .testimonial-left p::before {
    background-position: -293px -357px;
    width: 89px;
    height: 102px;
    margin-bottom: 18px
}

.testimonial-contwrap {
    width: 52%;
    max-width: 600px
}

.testimonial-cont {
    font-size: 18px;
    letter-spacing: -0.18px;
    line-height: 30px
}

.testimonial-cont::before {
    content: "";
    width: 27px;
    height: 20px;
    display: block;
    margin: 0 0 16px;
    background-position: -870px -67px
}

.customer-detail {
    margin: 23px 0 33px
}

.customer-name {
    display: block;
    font-family: var(--zf-primary-medium);
    letter-spacing: 0;
    line-height: 1.4
}

.customer-desc {
    color: #333
}

.tab-3 .customer-name {
    display: flex;
    flex-direction: row-reverse;
    justify-content: left
}

.tab-4 {
    background: #fff4f4;
    border: 1px solid #f5e6e6
}

.tab-4 .tab-cont {
    border-bottom: 1px solid #f5e4e4
}

.context-wrap {
    gap: 88px
}

.context-img {
    width: 35%;
    max-width: 335px
}

.context-cont {
    width: 52%
}

.context-cont li::before {
    width: 6px;
    height: 6px;
    position: absolute;
    left: 0;
    border-radius: 50%;
    background-color: #ff1d1e;
    content: "";
    top: 14px
}

.context-cont li {
    font-size: 18px;
    letter-spacing: -0.18px;
    line-height: 30px;
    margin-bottom: 26px;
    position: relative;
    padding-left: 20px
}

.block1-section .sec-cont {
    opacity: .9
}

.block1-section {
    background-color: #085aac;
    padding-bottom: 280px
}

.block1-slider {
    margin-top: -280px
}

.bg-sec p,.bg-sec h2 {
    color: #fff
}

.block1-cont,.block2-cont {
    max-width: 780px
}

.block1-cont {
    margin: 0 auto 70px
}

.block2-cont {
    margin: 0 auto 40px
}

.block1-cont .sec-line::after {
    background-color: #70ebe7
}

.block1-sliderwrap {
    width: 100%;
    max-width: 1125px;
    margin: 0 auto;
    position: relative;
    transition: .5s all ease
}

.block1-slides h3 {
    max-width: 95%
}

.block1-slides {
    position: relative;
    width: 48%;
    max-width: 553px;
    background: #fff;
    border: 1px solid #e7ebf0;
    border-radius: 8px;
    padding: 40px 40px 40px 40px;
    margin: 0 5px;
    transition: .5s all ease
}

.slick-track {
    display: flex !important
}

.customer-video {
    position: relative;
    cursor: pointer
}

.customer-video img {
    width: 100%
}

.harish {
    background: 0;
    width: 100%;
    height: 100%
}

.harish::before {
    background-position: -197px -77px;
    width: 39px;
    height: 39px;
    position: absolute;
    margin: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-size: 1300px auto
}

.block1-slidecont .sec-line::after {
    margin: 16px 0 22px
}

.hiring>div {
    gap: 40px
}

.hiring>div.flex-wrap>div:nth-child(1) {
    width: 52%;
    max-width: 231px
}

.hiring>div.flex-wrap>div:nth-child(2) {
    width: 39%;
    max-width: 192px
}

.block1-slider .slick-slide {
    height: inherit !important
}

.block1-sliderwrap .arrow-next,.block1-sliderwrap .arrow-prev {
    background: #fff;
    border-radius: 100%;
    width: 45px;
    height: 45px;
    transition: ease all .2s;
    box-shadow: 0 5px 9px rgba(0,0,0,0.0980392157);
    top: 255px;
    position: absolute;
    -webkit-cursor: pointer;
    cursor: pointer
}

.block1-sliderwrap .slick-arrow.arrow-prev {
    left: -60px
}

.block1-sliderwrap .slick-arrow.arrow-next {
    right: -60px
}

.block1-sliderwrap .slick-prev:after,.block1-sliderwrap .slick-next:before,.block1-sliderwrap .slick-next:after {
    display: none
}

.arrow-next::after,.arrow-prev::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #333;
    position: absolute;
    right: 18px;
    top: 18px;
    border-bottom: 2px solid #333;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg)
}

.arrow-prev::after {
    left: 18px;
    transform: rotate(-225deg)
}

.block2-section .content-wrap {
    padding: 0 0 120px;
    width: 92%
}

.enterprisewrap .tablist {
    max-width: 1150px;
    margin: 0 auto 50px;
    gap: 70px
}

.enterprisewrap .tablist li {
    width: 21%;
    max-width: -moz-fit-content;
    max-width: fit-content
}

.enterprisewrap .tablist li.active {
    font-family: var(--zf-primary-medium);
    color: #056cb8
}

.activeline {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #1767c4;
    transition: left .3s,width .3s
}

.enterprisetab-left,.enterprisetab-right {
    width: 47%;
    max-width: 525px
}

.enterprisetab-right {
    width: 40%
}

.enterprisewrap .tabcont-box {
    border: 0;
    background: 0;
    padding: 0;
    height: auto;
    justify-content: space-between;
    align-items: flex-start;
    position: relative
}

.enterprisetab-left h3 {
    max-width: 85%
}

.custom-solution .enterprisetab-left h3 {
    max-width: 86%
}

.enterprisetab-left p {
    font-size: 18px;
    margin: 0 0 24px
}

.enterprisetab-left ul {
    justify-content: left;
    margin: 0 0 40px;
    gap: 15px
}

.productivity .enterprisetab-left ul {
    gap: 30px
}

.business .enterprisetab-left ul,.custom-solution .enterprisetab-left ul {
    gap: 35px
}


.mercedes-benz {
    background-position: -393px -62px;
    width: 113px;
    height: 31px
}

.enterprisewrap .testimonial-contwrap {
    width: 100%;
    max-width: 430px;
    padding-left: 50px
}

.enterprisewrap .testimonial-cont::before {
    position: absolute;
    left: 0;
    top: 6px
}

.enterprisewrap .tabcont-box::before,.block6-inner::before,.award-top::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 95%;
    background: #e7ebf0;
    display: inline-block;
    left: 54%;
    top: 0
}

.enterprisewrap .tabcont-box {
    display: none
}

.enterprisewrap .tabcont-box.active {
    display: flex
}

.customer-detail.cust-img {
    padding-left: 80px;
    margin: 30px 0 35px
}

.customer-detail.cust-img.sprite-before::before {
    width: 62px;
    height: 74px;
    position: absolute;
    left: 0;
    top: -10px
}

.testimonial-cont .customer-detail.cust-img.sprite-before::before {
    top: -8px
}

.testimonial-cont .customer-detail.cust-img {
    padding-left: 85px
}

.customer-detail.vinayaka {
    padding-left: 70px
}

.customer-detail.cust-img.vinayaka::before {
    background-position: -590px -191px;
    width: 52px;
    height: 62px
}

.ponnapa::before {
    background-position: -642px -191px
}

.amit::before {
    background-position: -704px -191px
}

.naveen::before {
    background-position: -766px -191px
}

.rupendra::before {
    background-position: -828px -191px
}

.kumar::before {
    background-position: -383px -356px
}


.iifl {
    background-position: -558px -63px;
    width: 67px;
    height: 28px
}



.bigbasket-tata {
    background-position: -774px -103px;
    width: 99px;
    height: 38px
}



.block3-section {
    background: #ebf5ff;
    border: 1px solid #e7ebf0;
    border-radius: 16px;
    width: 97%;
    max-width: 1160px;
    margin: 20px auto 68px;
    padding: 65px 18px 90px;
    z-index: 1 ; 
}

.block3-section .sec-line::after {
    margin: 22px auto 22px
}

.block3-cont {
    width: 100%;
    max-width: 500px;
    margin: 0 auto
}

.block3-cont .learn-more {
    margin: auto
}

.block3-section li {
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    width: 125px;
    position: absolute;
    transition: all 1.2s linear
}

.block3-section li:nth-child(1) {
    left: 12%;
    top: 10%;
    animation: floatY 6s ease-in-out infinite
}

.block3-section li:nth-child(2) {
    right: 12%;
    top: 11%;
    animation: floatY 7s ease-in-out infinite
}

.block3-section li:nth-child(3) {
    left: 0;
    top: 44%;
    animation: floatY 6s ease-in-out infinite
}

.block3-section li:nth-child(4) {
    right: 0;
    top: 45%;
    animation: floatY 3s ease-in-out infinite
}

.block3-section li:nth-child(5) {
    left: 14%;
    top: 75%;
    animation: floatY 6s ease-in-out infinite
}

.block3-section li:nth-child(6) {
    right: 15%;
    top: 74%;
    animation: floatY 7s ease-in-out infinite
}

.block3-section li:hover {
    animation-play-state: paused
}

.block3-section li a {
    color: #333
}

.block3-section li span {
    width: 70px;
    height: 70px;
    display: block;
    background: #fff;
    border: 1px solid #f0f0f0;
    z-index: 0;
    position: relative;
    border-radius: 50%;
    margin: 0 auto 5px
}

.block3-section li span::after {
    content: "";
    width: 63px;
    height: 63px;
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 50%;
    z-index: 1;
    margin: auto;
    top: 50%;
    transform: translateY(-50%)
}

.block3-section li:nth-child(1) span::after {
    border: 1px solid #e4e5f7;
    background: #e9eaf8
}

.block3-section li:nth-child(2) span::after {
    border: 1px solid #fce7e7;
    background: #fdefeb
}

.block3-section li:nth-child(3) span::after {
    border: 1px solid #cdf0e6;
    background: #d7f4ec
}

.block3-section li:nth-child(4) span::after {
    border: 1px solid #f7e6d7;
    background: #ffedde
}

.block3-section li:nth-child(5) span::after {
    border: 1px solid #f5e2eb;
    background: #faedf4
}

.block3-section li:nth-child(6) span::after {
    border: 1px solid #e2eaf4;
    background: #e5eef8
}

.block3-section li span::before {
    z-index: 2;
    width: 31px;
    height: 29px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

.block3-section li span.passwrd::before {
    background-position: -207px -151px;
    height: 25px
}

.block3-section li span.multi-fac::before {
    background-position: -243px -149px;
    width: 24px
}

.block3-section li span.endpoint::before {
    background-position: -369px -148px;
    width: 30px
}

.block3-section li span.data-enc::before {
    background-position: -273px -149px;
    width: 28px
}

.block3-section li span.single-sign::before {
    background-position: -337px -149px
}

.block3-section li span.id-access::before {
    background-position: -306px -149px;
    height: 31px;
    width: 27px
}

.block4-section {
    background: #f8f9fb;
    position: relative;
    border-top: 1px solid #e7ebf0
}

.block4-cont {
    width: 100%;
    max-width: 847px;
    margin: 0 auto 70px
}

.block4bxwrap {
    gap: 40px 90px;
    align-items: stretch
}

.block4bx {
    width: 45%;
    max-width: 500px;
    padding-left: 80px;
    transform: translateY(20px);
    transition: .5s all linear
}

.block4bx h3::before {
    position: absolute;
    left: 0;
    top: 5px
}

.b4-ico-1::before {
    background-position: -405px -194px;
    width: 57px;
    height: 57px
}

.b4-ico-2::before {
    background-position: -465px -194px;
    width: 59px;
    height: 59px
}

.b4-ico-3::before {
    background-position: -531px -194px;
    width: 55px;
    height: 57px
}

.block4bx .b4-ico-4::before {
    background-position: -350px -193px;
    left: 10px
}

.block4bx p {
    font-size: 18px;
    letter-spacing: 0;
    line-height: 1.6
}

.block5-section {
    background-color: #1c83a5;
    color: #fff;
    padding-bottom: 100px
}

.zwc-section.block5-section a.learn-more {
    border: 1px solid #fff;
    color: #fff;
    margin: auto;
    padding: 16px 40px 16px 24px;
    max-width: -moz-fit-content;
    max-width: fit-content
}

.block5-section a.learn-more::after {
    border-right: 1.5px solid #fff;
    border-top: 1.5px solid #fff
}

.block5-cont {
    width: 100%;
    max-width: 840px;
    margin: 65px auto 85px
}

.block5-cont p {
    max-width: 89%;
    margin: 0 auto 40px;
    color: rgba(255,255,255,0.9)
}

.bg-sec .block5bxwrap h3 {
    color: var(--primary-color)
}

.bg-sec .block5bxwrap p {
    color: #333;
    font-size: 18px;
    letter-spacing: -0.08px;
    line-height: 30px
}

.block5wrap {
    background: #fff;
    box-shadow: 0 13px 28px rgba(162,177,201,0.0784313725);
    border: 1px solid #e7ebf0;
    border-radius: 20px;
    padding: 75px 80px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100%
}

.block5bxwrap {
    gap: 80px;
    align-items: stretch;
    border-bottom: 1px solid #e7ebf0;
    padding-bottom: 50px
}

.block5bx {
    width: 30%;
    max-width: 300px
}

.block5bx h3::before {
    margin: 0 0 15px
}

.securitybadges {
    gap: 26px;
    margin: 60px 0 0;
    position: relative
}

.securitybadges li {
    width: 114px;
    height: 60px;
    display: block;
    position: relative
}



.securitybadges li.ism {
    background-position: 1px 0
}

.securitybadges li.pim {
    background-position: -114px 0
}

.securitybadges li.csm {
    background-position: -229px 0
}

.securitybadges li.pdc {
    background-position: -343px 0
}

.securitybadges li.qms {
    background-position: -457px 0
}

.securitybadges li.aic {
    background-position: -485px 0;
    width: 72px;
    height: 72px;
    background-size: 700px auto
}

.securitybadges li.gdpr {
    background-position: -285px -71px;
    width: 72px;
    height: 72px;
    background-size: 700px auto
}

.securitybadges li.hippa {
    background-position: -0 -71px;
    background-size: 700px auto;
    height: 69px;
    width: 80px
}

.securitybadges .leaf-before,.securitybadges .leaf-after,.award-wrap .leaf-before,.award-wrap .leaf-after {
    width: 42px;
    height: 84px;
    background-position: -10px -269px;
    position: absolute;
    left: 0
}

.securitybadges li.leaf-after,.award-wrap .leaf-after {
    right: 0;
    left: unset;
    transform: scaleX(-1)
}

.award-wrap .leaf-after {
    transform: translateY(-50%) scaleX(-1)
}

.block6-section {
    padding-top: 440px;
    background: #f8f9fb;
    border-bottom: 1px solid #e7ebf0;
    padding-bottom: 160px
}

.zwc-section.block6-section a.learn-more {
    max-width: -moz-fit-content;
    max-width: fit-content;
    padding: 16px 40px 16px 24px
}

.block6-inner {
    gap: 88px;
    align-items: stretch
}

.block6-inner::before {
    height: 80%
}

.block6bx {
    width: 48%;
    max-width: 560px;
    padding: 50px 24px;
    transform: translateY(30px);
    transition: .5s all linear
}

.block6bx h3 {
    letter-spacing: -1.19px;
    line-height: 40px;
    max-width: 83%
}

.block6bx .sec-line::after {
    margin: 15px 0 30px
}

.block6-inner::before,.award-top::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

.award-top::before {
    height: 60%;
    left: 32%;
    width: 1px;
    background: rgba(201,208,222,0.7)
}

.trust-teams {
    margin: 50px 0 40px
}

.expand-applist h5,.trust-teams h5 {
    font-size: 12px
}

.trust-teams .flex-wrap {
    justify-content: left;
    gap: 22px
}

.trust-teams li {
    width: 106px;
    height: 26px
}



.block7-section .content-wrap.bg-sec {
    background: #085aac;
    box-shadow: 0 2px 23px rgba(0,0,0,0.0901960784);
    border-radius: 10px;
    z-index: 2;
    margin-top: -145px;
    padding: 80px 40px
}

.counterbx span {
    color: #fff;
    display: inline-block;
    font-size: 50px;
    letter-spacing: -0.9px;
    line-height: 60px
}

.counter-section {
    gap: 80px;
    align-items: flex-start;
    padding: 0 50px
}

.counter-section p {
    color: rgba(255,255,255,0.9);
    margin-bottom: 0
}

.counter-section .sec-line::after {
    margin: 25px 0 10px;
    width: 30px;
    background: rgba(255,255,255,0.3)
}

.bottom-section {
    background: #fff
}

.bottom-inner {
    position: relative;
    width: 100%;
    max-width: 820px;
    margin: 0 auto 60px
}

.mandelaimg {
    text-align: center;
    line-height: 0;
    overflow: hidden;
    height: 125px
}

.mandelaimg img {
    animation: rotate-360 40s infinite linear
}

@keyframes rotate-360 {
    0% {
        transform: rotateZ(0)
    }

    100% {
        transform: rotateZ(360deg)
    }
}

@media screen and (min-width: 1200px) and (max-height:759px) {
    .unique .tablist-wrap {
        display:none
    }

    .unique .tabcont-box {
        position: unset
    }
}

@media screen and (min-width: 1200px) {
    .tabcont-box {
        height:620px
    }

    body .block2-section .content-wrap {
        padding: 120px 0 120px
    }

    .lang-en .zmain-container h1 {
        font-size: 60px;
        line-height: 1.2;
        letter-spacing: -2px;
        margin-bottom: 20px
    }

    .lang-en .zmain-container h2 {
        font-size: 50px;
        line-height: 1.2;
        letter-spacing: -1.5px
    }

    .lang-en .bottom-section h2 {
        font-size: 44px;
        margin-bottom: 10px
    }

    .lang-en .trustbrand-section h2 {
        font-size: 13px;
        letter-spacing: .5px;
        line-height: normal
    }

    .lang-en .zmain-container h3 {
        font-size: 30px;
        letter-spacing: -0.6px;
        line-height: 1.3
    }

    .lang-en .block4-section h3 {
        font-size: 30px;
        letter-spacing: -0.6px;
        line-height: 1.4
    }

    .lang-en .block6bx h3 {
        font-size: 36px;
        letter-spacing: -0.8px;
        line-height: 1.3
    }

    .lang-en .zmain-container h5 {
        font-size: 12px;
        letter-spacing: .42px;
        line-height: 17px
    }

    .sec-cont {
        font-size: 20px;
        letter-spacing: -0.2px;
        line-height: 1.6;
        margin-bottom: 20px
    }

    .hero-cont .sec-cont {
        margin-bottom: 30px
    }

    .hero-section .grn-txt {
        font-size: 14px;
        letter-spacing: .42px
    }

    .hero-cont p,.block-cont p {
        max-width: 90%;
        margin-inline:auto}

    .tab-cont p {
        font-size: 18px;
        letter-spacing: -0.08px
    }

    .block3-cont p {
        font-size: 18px;
        letter-spacing: 0;
        margin-bottom: 30px
    }

    .counter-section p {
        font-size: 18px
    }

    .in-view.block6bx,.in-view.block4bx {
        transform: translateY(0)
    }

    .delay1 {
        transition-delay: .1s
    }

    .delay2 {
        transition-delay: .2s
    }

    .delay3 {
        transition-delay: .3s
    }

    .delay4 {
        transition-delay: .4s
    }

    @keyframes floatY {
        0% {
            transform: translateY(-12px)
        }

        50% {
            transform: translateY(0)
        }

        100% {
            transform: translateY(-12px)
        }
    }

    .trust-teams .flex-wrap {
        gap: 25px
    }

    .trust-teams li {
        transform: scale(1.1)
    }

    .block6bx:nth-child(2) {
        max-width: 570px
    }

    .bottom-section .sec-cont {
        letter-spacing: 0
    }
}

@media only screen and (max-width: 1440px) {
    .award-wrap {
        gap:15px
    }

    .banner-top {
        font-size: 15px
    }

    .block1-slides {
        padding: 40px 40px
    }

    .block1-sliderwrap .slick-arrow.arrow-prev {
        left: -50px
    }

    .block1-sliderwrap .slick-arrow.arrow-next {
        right: -50px
    }

    .block5wrap {
        padding: 50px 40px
    }

    .block5bxwrap {
        gap: 40px;
        padding-bottom: 40px;
        justify-content: space-evenly
    }

    .securitybadges {
        gap: 18px
    }

    .block6-section {
        padding-top: 400px
    }

    .block6bx {
        width: 45%
    }

    .counter-section {
        gap: 60px
    }

    .lang-en .zmain-container h1 {
        font-size: 44px;
        letter-spacing: -1px
    }

    .lang-en .zmain-container h2 {
        font-size: 40px;
        letter-spacing: -1px
    }

    .lang-en .trustbrand-section h2 {
        font-size: 13px;
        letter-spacing: .5px
    }

    .lang-en .zmain-container h3 {
        font-size: 28px;
        letter-spacing: 0
    }

    .hero-cont {
        max-width: 790px
    }

    .block4-cont {
        max-width: 745px
    }

    .sec-cont,.block3-cont p {
        font-size: 18px
    }

    .gartner-info p,.award-top li {
        font-size: 14px;
        line-height: 1.4
    }

    .award-top li {
        letter-spacing: -0.2px
    }

    .context-cont li {
        font-size: 16px
    }

    .counter-section p {
        font-size: 18px
    }

    .expandbx p {
        max-width: 100%
    }

    .awardbx {
        width: 21%
    }

    .sec-line::after {
        margin: 18px auto 0
    }

    .enterprisewrap .tablist {
        gap: 60px
    }

    .bottom-inner {
        max-width: 620px
    }

    .block6bx h3 {
        max-width: 75%
    }
}

@media only screen and (max-width: 1199px) {
    .zmain-container .content-wrap {
        width:95%;
        padding: 0 0 80px
    }

    body .zmain-container .pb {
        padding-bottom: 80px
    }

    body .zmain-container .pt {
        padding-top: 80px
    }

    body .zmain-container .mb {
        margin-bottom: 80px
    }

    body .zmain-container .mt {
        margin-top: 80px
    }

    .lang-en .zmain-container h1 {
        font-size: 36px;
        letter-spacing: -1px
    }

    .lang-en .zmain-container h2 {
        font-size: 32px;
        letter-spacing: -1px
    }

    .lang-en .trustbrand-section h2 {
        font-size: 13px;
        letter-spacing: .5px
    }

    .lang-en .zmain-container h3 {
        font-size: 24px;
        letter-spacing: 0
    }

    .sales-btn {
        font-size: 14px
    }

    .counter-section {
        gap: 35px
    }

    .hero-cont {
        max-width: 700px
    }

    .block-cont {
        max-width: 540px
    }

    .unique .tablist-wrap {
        display: none
    }

    .unique .tabcont-box {
        position: unset;
        top: unset;
        box-shadow: none
    }

    .tabcont-box {
        transform: scale(1)
    }

    .enterprisewrap .tablist li {
        font-size: 13px
    }

    .testimonial-box {
        gap: 80px
    }

    .testimonial-left p {
        font-size: 18px
    }

    .tab-cont h3 {
        width: 34%
    }

    .hiring>div.flex-wrap>div:nth-child(1) {
        width: 48%
    }

    .block1-sliderwrap {
        width: 93.5%
    }

    .productivity .enterprisetab-left ul,.business .enterprisetab-left ul,.custom-solution .enterprisetab-left ul {
        gap: 14px
    }

    .block4-cont {
        max-width: 500px;
        margin: 0 auto 40px
    }

    .block5-cont {
        max-width: 720px
    }

    .block5-cont p {
        margin: 0 auto 25px
    }

    .securitybadges li.leaf-before {
        left: -20px
    }

    .securitybadges li.leaf-after {
        right: -20px
    }

    .context-cont {
        width: 53%
    }

    .trust-teams .flex-wrap {
        gap: 15px
    }

    .counterbx span {
        font-size: 40px
    }

    .bottom-inner {
        max-width: 520px
    }

    .block6-section {
        padding: 350px 0 180px
    }
}

@media only screen and (max-width: 1130px) and (min-width:1071px) {
    .award-top::before {
        left:33%
    }
}

@media only screen and (max-width: 1080px) {
    .trustbrand-inner ul {
        gap:40px
    }

    .banner-top {
        font-size: 14px
    }

    .gartner-info {
        width: 69%
    }

    .tablist {
        gap: 35px
    }

    .securitybadges li.leaf-before,.securitybadges li.leaf-after,.award-wrap .leaf-before,.award-wrap .leaf-after {
        display: none
    }

    .block6bx {
        padding: 40px 25px 40px 0
    }

    .securitybadges {
        gap: 8px;
        margin: 40px 0 0
    }

    .block6-inner::before {
        left: 49%
    }

    .expandbx h4 {
        font-size: 18px
    }

    .block6-inner {
        margin-top: 20px
    }
}

@media only screen and (max-width: 991px) {
    .zmain-container .content-wrap {
        width:95%
    }

    .block {
        display: inline
    }

    .trustbrand-section,.block2-section {
        padding-bottom: unset
    }

    .trustbrand-section h2 {
        margin-bottom: 50px
    }

    .award-top::before,.enterprisewrap .tablist {
        display: none
    }

    .award-top {
        flex-direction: column;
        gap: 30px;
        border-radius: 10px;
        padding: 30px 10px 50px
    }

    .gartner,.award-top ul,.tab-cont h3,.tab-cont p,.testimonial-left,.testimonial-contwrap,.context-img,.context-cont {
        width: 100%;
        justify-content: center
    }

    .context-cont {
        max-width: 500px
    }

    .enterprisetab-left,.enterprisetab-right {
        width: 100%;
        margin-inline:auto}

    .award-section,.block3-section {
        width: 100%;
        margin-top: 0;
        border-radius: 0
    }

    .award-wrap::before,.award-wrap::after,.enterprisewrap .tabcont-box::before,.block6-inner::before,.award-top::before {
        display: none
    }

    .hero-cont {
        max-width: 720px;
        margin-bottom: 30px
    }

    .unique .tabcont-box {
        top: unset
    }

    .tab-cont {
        flex-direction: column;
        text-align: center;
        gap: 0
    }

    .tab-cont h3 {
        max-width: 430px
    }

    .tab-cont p,.expandbx p {
        font-size: 16px;
        margin-inline:auto}

    .expandbx {
        width: 48%
    }

    .tab-2 .expandbx>a {
        padding: 50px 20px 50px 85px
    }

    .expand-applist ul {
        gap: 20px
    }

    .counterbx span {
        font-size: 36px
    }

    .tab-2 .expandbx h4 {
        font-size: 19px
    }

    .testimonial-left,.testimonial-contwrap {
        width: 100%;
        text-align: center;
        margin: auto
    }

    .testimonial-box {
        gap: 40px
    }

    .testimonial-cont::before {
        margin: 0 auto 16px
    }

    .tab-3 .customer-name {
        justify-content: center
    }

    .customer-detail {
        margin: 20px 0 20px
    }

    .testimonial-contwrap .learn-more {
        margin: auto
    }

    .tab-3 .testimonial-left p::before {
        margin: 0 auto 16px
    }

    .context-wrap {
        gap: 20px
    }

    .block1-cont,.block2-cont {
        max-width: 600px;
        margin: 0 auto 40px
    }

    .block1-sliderwrap {
        width: 90%;
        max-width: 555px
    }

    .enterprisewrap .tabcont-box {
        flex-direction: column;
        text-align: center;
        gap: 65px;
        margin-bottom: 5px
    }

    .enterprisewrap .tabcont-box:not(.enterprisewrap .tabcont-box:last-child)::after,.block6bx:first-child::after {
        position: relative;
        content: '';
        width: 90%;
        margin-inline:auto;height: 1px;
        background: #e7ebf0;
        display: block
    }

    .block6bx:first-child::after {
        left: 0;
        right: 0;
        margin: 40px auto 0;
        position: absolute
    }

    .enterprisetab-left h3,.block1-slides h3,.block5-cont p,.custom-solution .enterprisetab-left h3,.block6bx h3 {
        max-width: 100%
    }

    .enterprisetab-left ul {
        justify-content: center
    }

    .enterprisewrap .tabcont-box {
        display: flex;
        max-width: 480px
    }

    .zwc-section a.learn-more {
        margin: auto
    }

    .block1-slider a.learn-more.no-border {
        margin-left: 0
    }

    .enterprisewrap .testimonial-contwrap {
        padding-left: 0;
        max-width: 510px
    }

    .enterprisewrap .testimonial-cont::before {
        position: relative;
        top: 0
    }

    .customer-detail.cust-img.sprite-before::before {
        position: relative;
        margin: auto
    }

    .customer-detail.cust-img {
        padding-left: 0;
        margin: 30px 0 25px
    }

    .zwc-section.block3-section.mb {
        margin-bottom: 0
    }

    .block3-section li:nth-child(1) {
        left: 5%;
        top: 5%;
        width: 115px
    }

    .block3-section li:nth-child(2) {
        right: 5%;
        top: 5%
    }

    .block3-section li:nth-child(5) {
        left: 10%
    }

    .block3-section li:nth-child(6) {
        right: 10%
    }

    .block3-section li:nth-child(3) {
        left: -3%
    }

    .block3-section li:nth-child(4) {
        right: -3%
    }

    .block4bxwrap {
        gap: 30px
    }

    .block4bx {
        padding-left: 70px;
        width: 46%
    }

    .block5-cont {
        max-width: 520px
    }

    .block5-cont h2 {
        max-width: 70%;
        margin-inline:auto}

    .block5-section {
        padding-bottom: 80px
    }

    .block6-section {
        padding-top: unset;
        padding-bottom: 140px
    }

    .block5wrap {
        position: relative
    }

    .block5bxwrap {
        flex-direction: column;
        text-align: center;
        align-items: center
    }

    .block5bx {
        width: 100%;
        max-width: 510px
    }

    .block5bx h3::before {
        margin: 0 auto 15px
    }

    .block6-inner {
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin-top: 0
    }

    .block6bx {
        width: 100%;
        max-width: 460px;
        text-align: center;
        padding: 40px 0 40px 0
    }

    .trust-teams {
        margin: 40px 0 35px
    }

    .trust-teams .flex-wrap {
        justify-content: center
    }

    .block6bx .greenbx-txt {
        margin: 0 auto 15px
    }

    .block6bx .sec-line::after {
        margin: 22px auto 22px
    }

    .block1-slides .customer-detail.cust-img.sprite-before::before {
        margin: 0
    }

    .counterbx {
        width: 100%;
        max-width: 120px
    }
}

@media only screen and (max-width: 767px) {
    .zmain-container .content-wrap {
        width:90%;
        padding: 0 0 60px
    }

    .award-top li {
        width: 100%
    }

    .zmobile-menu-new-content ul {
        display: none
    }

    .zcommon-link-container {
        padding-top: 65px
    }

    .zw-product-header .content-wrap {
        padding: 10px 0 10px
    }

    .zw-product-header {
        display: block
    }

    body .zmain-container .pb {
        padding-bottom: 60px
    }

    body .zmain-container .pt {
        padding-top: 60px
    }

    body .zmain-container .mb {
        margin-bottom: 60px
    }

    body .zmain-container .mt {
        margin-top: 60px
    }

    body .hero-section .content-wrap {
        padding-top: 40px
    }

    .z-bottom-cta-menu>a {
        display: block !important
    }

    .award-wrap {
        gap: 30px
    }

    .expandbx {
        max-width: 345px
    }

    .awardbx,.expandbx,.tab-2 .expandbx,.block4bx {
        width: 100%
    }

    .expandbx,.tab-2 .expandbx,.block4bx {
        text-align: center;
        padding: 20px 10px 25px
    }

    .expandbx h4::before,.tab-2 .expandbx h4::before,.block4bx h3::before {
        position: relative;
        left: 0;
        margin: 0 auto 10px
    }

    .expandbx>a,.tab-2 .expandbx>a {
        padding: 5px
    }

    .block3-section li {
        position: relative
    }

    .block3-section {
        padding: 0 15px 0
    }

    .block3-section li:nth-child(1),.block3-section li:nth-child(2),.block3-section li:nth-child(3),.block3-section li:nth-child(4),.block3-section li:nth-child(5),.block3-section li:nth-child(6) {
        left: unset;
        right: unset;
        top: unset
    }

    .block3-inner ul {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
        margin: 30px auto 0
    }

    .block4bxwrap {
        gap: 30px
    }

    .block4bx {
        padding: 0
    }

    .block7-section .content-wrap.bg-sec {
        margin-top: 80px
    }

    .block6-section {
        padding-bottom: 0
    }
}

@media only screen and (max-width: 610px) {
    .award-top ul {
        flex-direction:column
    }

    .award-top li {
        width: 100%;
        max-width: 300px;
        margin-inline:auto}

    .block1-sliderwrap .slick-arrow.arrow-prev,.block1-sliderwrap .slick-arrow.arrow-next {
        display: none !important
    }

    .block1-sliderwrap,.hiring>div.flex-wrap>div:nth-child(1) {
        width: 100%
    }

    .hiring>div.flex-wrap>div:nth-child(1) {
        max-width: 100%
    }

    .hiring>div.flex-wrap>div:nth-child(2) {
        display: none
    }

    .block5-cont h2 {
        max-width: 100%
    }
}

@media only screen and (max-width: 480px) {
    .testimonial-left {
        padding:35px 15px
    }

    .tabcont-box {
        padding: 40px 20px 40px
    }

    .block1-slides {
        padding: 20px 20px
    }

    .counter-section {
        padding: 0;
        gap: 0
    }

    .counter-section p {
        font-size: 16px
    }

    .block7-section .content-wrap.bg-sec {
        padding: 60px 10px
    }

    .counterbx {
        max-width: 280px;
        display: flex;
        justify-content: left;
        align-items: center;
        gap: 20px;
        margin-inline:auto;width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1215686275);
        padding: 10px 0 10px
    }

    .block5wrap {
        padding: 50px 20px
    }

    .counter-section .sec-line::after {
        display: none
    }

    .countval {
        width: 115px;
        text-align: right
    }
}

.trustbrand-inner{padding-top: 80px;padding-bottom: 80px;}




.tab-wrapper {
    background-color: #fff;
    /* border-radius: 10px; */
    margin-bottom: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .tab-header {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
  }
  
  .tab-header .tab-btn {
    padding: 15px 9px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    z-index: 1;
    /* border: 1px solid #6a00fb; */
    background-color: transparent;
    transition: all 0.3s ease;
  }
  .tab-header .tab-btn:focus {
    outline: none;
  }
  .tab-header .tab-btn i {
    margin-right: 5px;
    font-size: 10px;
  }
  .tab-header .tab-btn:hover,
  .tab-header .tab-btn.active {
    color: #b11f27;
  }
  
  .tab-header .underline {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    width: 0;
    transform-origin: left;
    background-color: #b11f27;
    transition: all 0.3s ease;
  }
  
  .tab-body {
    display: flex;
    overflow: hidden;
  }
  .tab-body .tab-content {
    min-width: 100%;
    padding: 20px;
    font-size: 12px;
    transition: all 0.3s;
    text-align: justify;
  }
  .tab-wrapper[rounded] {
    border-radius: 10px;
  }
  .tab-header[full-width] .tab-btn {
    flex: 1;
    text-align: center;
  }
  .tab-header[background] {
    background-color: #6a00fb;
  }
  .tab-header[background] .tab-btn {
    color: #fff;
  }
  .tab-header[background] .tab-btn.active {
    color: #6a00fb;
  }
  .tab-header[background] .tab-btn.active:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: #fff;
  }
  .tab-header[background] .underline {
    background-color: #fff;
    height: 100%;
    bottom: 0;
  }
  .tab-header[border] .tab-btn {
    border: 1px solid #e5e5e5;
  }
  .tab-header[border] .tab-btn.active {
    border: 1px solid #6a00fb;
  }
  .tab-header[border] .tab-btn.active {
    color: #fff;
  }
  .tab-header[border] .underline {
    height: 100%;
    bottom: 0;
  }
  
  /* Credits */
  
  .credits {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 10px;
    font-size: 12px;
    color: #fff;
    background-color: #6a00fb;
  }
  .credits a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
  }
  .credits a:hover {
    text-decoration: underline;
  }
  

  .tab-bg{margin: 20px auto 68px;}

  .tab-content p{ font-size: 16px;}

  .tab-content h4 {
    font-size: 24px;
    line-height: 32px; font-weight: 400;
}




#counter{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 40px 0px;
    width: 100%;
  }
  #counter .item{
    background: #fff;
    width: 100%;
    padding: 20px 20px;
    margin: 10px;
    text-align: center;
    /* border-radius: 20px;
    -webkit-box-shadow: 0px 0px 38px -8px rgba(0,0,0,0.34);
  -moz-box-shadow: 0px 0px 38px -8px rgba(0,0,0,0.34);
  box-shadow: 0px 0px 38px -8px rgba(0,0,0,0.34); */
  } 
  #counter .item .count{
    color: #e8b12d;
    margin-bottom: 5px;
    font-size: 40px;
  }
  #counter .item h3{
    color: #4f4e28;
    text-transform: capitalize;font-size: 21px;
  }

  section.olc-brand h3::after, section h1:after
 {
    content: "";
    width: 30px;
    height: 1px;
    background-color: #fff;
    display: none;
    margin-top: 20px;
}