/* common class */

.zwc-section {
    padding-block: 100px 110px;
}

.zwc-inner-wrap h1 {
    font-size: 80px;
    line-height: 1.1;
    font-family: var(--zf-primary-semibold);
    letter-spacing: -2.4px;
}

.zwc-inner-wrap h2 {
    font-size: 56px;
    line-height: 1.15;
    font-family: var(--zf-primary-semibold);
    letter-spacing: -0.24px;
}

.zwc-inner-wrap h3 {
    font-size: 40px;
    line-height: 1.15;
    font-family: var(--zf-primary-semibold);
    letter-spacing: -0.24px;
}

.zwc-inner-wrap h4 {
    font-size: 24px;
    line-height: 1.3;
    font-family: var(--zf-primary-semibold);
    letter-spacing: -0.24px;
}

.zwc-inner-wrap p {
    margin-bottom: 0;
}

.zwc-inner-wrap img {
    display: block;
}

.zwc-inner-wrap .content-wrap {
    max-width: 1320px;
}

.zwc-inner-wrap .slick-arrow::before,
.zwc-inner-wrap .slick-arrow::after {
    display: none;
}

.zwc-inline-blk {
    display: inline-block;
}

.zwc-inner-wrap a:not(.act-btn) {
    color: var(--zwc-link-clr);
}

.zwc-cta-btn-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.zwc-cta-btn-wrap a {
    padding: 16px 24px;
    font-size: 16px;
    font-family: var(--zf-primary-medium);
    border-width: 2px;
    border-radius: 4px;
}

.zwc-cta-btn-wrap a.cta-btn {
    background-color: #000000;
}

.zwc-cta-btn-wrap a.zwc-plans-btn {
    color: #000000;
    border: 2px solid #000000;
}

/* banner section */

.zwc-section.zwc-banner-section {
    position: relative;
    padding-top: 60px;
    padding-bottom: 0;
}

.zwc-inner-wrap .zwc-banner-section .content-wrap{
    max-width: 1512px;
}

.zwc-banner-wrap {
    position: relative;
    display: grid;
}

.zwc-banner-left-content {
    max-width: 820px;
    grid-area: 1/1/2/2;
    position: relative;
    z-index: 1;
    margin-left:100px;
}

.zwc-banner-left-content h1 {
    margin-bottom: 24px;
}

.zwc-banner-left-content h1 span:not(.zwc-inline-blk) {
    display: inline;
    color: #005EC2;
}

.zwc-banner-left-content p {
    max-width: 550px;
    font-size: 18px;
    font-family: var(--zf-primary-medium);
}

.zwc-banner-cta-wrap .zwc-plans-btn {
    background: #ffffff;
}

.zwc-banner-cta-wrap {
    margin-top: 40px;
}

.zwc-banner-image {
    grid-area: 1/1/2/2;
    justify-self: end;
    width: 100%;
    padding-top: 160px;
}

.zwc-banner-image img {
    border-radius: 0px 0px 30px 30px;
}

.zwc-inner-wrap .zwc-banner-mobile-img {
    display: none;
}

/* trusted brands section */

.zwc-trusted-brands-wrap h2 {
    text-align: center;
    font-family: var(--zf-primary-medium);
}

.zwc-inner-wrap .zwc-trusted-brands-wrap h2 {
    font-size: 24px;
    line-height: 1.5;
}

.zwc-trusted-brands-wrap h2>span {
    font-family: var(--zf-primary-bold);
}

.zwc-brand-logos-wrap {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    margin-top: 48px;
}

/* we get it section */

.zwc-we-get-it-section {
    position: relative;
}

.zwc-border-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
    display: inline-block;
    width: 100%;
    max-width: 860px;
    height: 1px;
    background: linear-gradient(90deg, #FFF 0%, #4C4C4C 49.73%, #FFF 100%);
}

.zwc-we-get-it-wrap {
    max-width: 870px;
    margin-inline: auto;
    text-align: center;
}

.zwc-we-get-it-wrap h2 {
    margin-bottom: 24px;
}

.zwc-we-get-it-wrap p {
    font-size: 20px
}

/* workplace apps section */

.zwc-workplace-apps-section {
    background-color: #000000;
    color: #ffffff;
    text-align: center;
}

.zwc-workplace-apps-wrap h2 {
    max-width: 750px;
    margin-inline: auto;
    margin-bottom: 24px;
}

.zwc-workplace-apps-wrap h2 span {
    color: #F0FF6A;
}

.zwc-workplace-apps-wrap p {
    font-size: 16px;
    font-family: var(--zf-primary-medium);
    max-width: 550px;
    margin-inline: auto;
}

.zwc-feature-product-list {
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    gap: 16px;
    width: 100%;
    text-align: center;
    margin-top: 56px;
}

.zwc-feature-product>span {
    position: relative;
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    justify-content: center;
    padding: 15px 15px;
    border-radius: 15px;
    background: #262626;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    transform: translateX(-30px);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
    cursor: auto;
}

.zwc-feature-product:nth-child(5)~.zwc-feature-product>span {
    transform: translateX(30px)
}

.animated .zwc-feature-product>span,
.animated .zwc-feature-product:nth-child(5)~.zwc-feature-product>span {
    transform: translateX(0);
    opacity: 1
}

.zwc-feature-product:nth-child(1)>span {
    transition-delay: .9s
}

.zwc-feature-product:nth-child(2)>span {
    transition-delay: .7s
}

.zwc-feature-product:nth-child(3)>span {
    transition-delay: .5s
}

.zwc-feature-product:nth-child(4)>span {
    transition-delay: .3s
}

.zwc-feature-product:nth-child(5)>span {
    transition-delay: .1s
}

.zwc-feature-product:nth-child(6)>span {
    transition-delay: .1s
}

.zwc-feature-product:nth-child(7)>span {
    transition-delay: .3s
}

.zwc-feature-product:nth-child(8)>span {
    transition-delay: .5s
}

.zwc-feature-product:nth-child(9)>span {
    transition-delay: .7s
}

.zwc-feature-product:nth-child(10)>span {
    transition-delay: .9s
}

.zwc-feature-product:nth-child(n)>span:hover,
.zwc-feature-product:nth-child(n)>span:focus-visible {
    transition-delay: 0s;
    z-index: 1;
}

.zwc-feature-product .global-sprite-icon {
    background: var(--product-icons) no-repeat;
    background-size: var(--zp-i-bs);
    width: var(--zp-i-w);
    height: var(--zp-i-h);
    display: block;
    margin: 0 auto;
}

.zwc-feature-product .zmail-icon {
    background-position: var(--zp-mail-bp);
}

.zwc-feature-product .zworkdrive-icon {
    background-position: var(--zp-workdrive-bp);
}

.zwc-feature-product .zwriter-icon {
    background-position: var(--zp-writer-bp);
}

.zwc-feature-product .zsheet-icon {
    background-position: var(--zp-sheet-bp);
}

.zwc-feature-product .zshow-icon {
    background-position: var(--zp-show-bp);
}

.zwc-feature-product .zcliq-icon {
    background-position: var(--zp-cliq-bp);
}

.zwc-feature-product .zconnect-icon {
    background-position: var(--zp-connect-bp);
}

.zwc-feature-product .zvault-icon {
    background-position: var(--zp-vault-bp);
}

.zwc-feature-more {
    background: #262626;
}

.zwc-feature-more>span {
    display: grid;
    font-size: 18px;
    line-height: 1;
    gap: 1px;
    font-size: 18px;
    font-family: var(--secondaryfont-semibold);
    color: #8e8e8e;
}

.zwc-app-short-name {
    opacity: 0;
    max-width: 0;
    position: relative;
    color: #000;
    font-size: 18px;
    font-family: var(--zf-primary-semibold);
    transition: padding-left .3s ease, opacity .1s ease, max-width .3s ease;
}

.zwc-feature-product>span:hover,
.zwc-feature-product>span:focus-visible {
    grid-template-columns: max-content 1fr;
    background: #fff;
    transition: background .5s ease;
    transition-delay: 0s;
}

.zwc-feature-product>span.zwc-feature-more:hover {
    background: #262626;
}

.zwc-feature-product>span:hover .zwc-app-short-name,
.zwc-feature-product>span:focus-visible .zwc-app-short-name {
    opacity: 1;
    max-width: 215px;
    position: relative;
    padding-left: 8px;
    transition: padding-left .5s ease, opacity .5s ease, max-width .5s ease;
}

.zwc-app-pricing-link {
    position: relative;
    display: inline-block;
    padding-right: 30px;
    font-size: 16px;
    font-family: var(--zf-primary-semibold);
    margin-top: 48px;
}

.zwc-inner-wrap a.zwc-app-pricing-link {
    color: var(--zwc-link-clr-dark);
}

.zwc-pricing-link-arrow {
    display: inline-block;
    position: absolute;
    width: 25px;
}

.zwc-pricing-link-arrow::before,
.zwc-pricing-link-arrow::after {
    content: '';
    position: absolute;
    display: inline-block;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0;
}

.zwc-pricing-link-arrow::before {
    width: 10px;
    height: 10px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    border-color: var(--zwc-link-clr-dark);
    transform: rotateZ(-130deg);
}

.zwc-pricing-link-arrow::after {
    width: 14px;
    height: 2px;
    background: var(--zwc-link-clr-dark);
}


/* tools built section */

.zwc-tools-built-heading {
    max-width: 830px;
    text-align: center;
    margin-inline: auto;
}

.zwc-tools-built-heading h2 {
    max-width: 690px;
    margin-bottom: 24px;
    margin-inline: auto;
}

.zwc-tools-built-heading p {
    font-size: 20px;
    font-family: var(--zf-primary-regular);
}

.zwc-tools-built-tab {
    width: fit-content;
    position: relative;
    display: flex;
    padding: 4px;
    margin-top: 48px;
    margin-inline: auto;
    background-color: #F5F5F5;
    border-radius: 8px;
}

.zwc-tools-built-tab li:not(.slider-bg) {
    position: relative;
    z-index: 1;
}

.zwc-tools-built-tab li button {
    color: #000000;
    font-size: 16px;
    font-family: var(--zf-primary-medium);
    padding: 16px 20px;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

.zwc-tools-built-tab li button.active {
    color: #ffffff;
    background-color: #000;
    border-radius: 8px;
    transition: background-color .1s ease .6s, color 0.6s ease;
}

.zwc-tools-built-tab .slider-bg {
    width: 192px;
    height: calc(100% - 8px);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    background-color: #000;
    border-radius: 8px;
    margin: auto 0;
    transition: width .4s linear, left .4s linear;
}

.zwc-tools-built-content-list {
    display: grid;
    gap: 100px;
    margin-top: 72px;
}

.zwc-tools-built-content {
    grid-area: 1/1/2/2;
    display: flex;
    align-items: start;
    gap: 60px;
    opacity: 0;
    visibility: hidden;
}

.zwc-tools-built-content.active {
    opacity: 1;
    visibility: visible;
}

.zwc-tools-built-left-content {
    width: 100%;
    max-width: 670px;
}

.zwc-tools-built-content-heading h3 {
    max-width: 540px;
    margin-bottom: 0;
}

.zwc-tools-built-left-content-list {
    display: grid;
    gap: 40px;
    max-width: 600px;
    margin-top: 56px;
}

.zwc-tools-built-left-content-list li {
    position: relative;
    padding-left: 50px;
}

.zwc-tools-built-left-content-list li h4 {
    margin-bottom: 16px;
}

.zwc-tools-built-list-icons {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 31px;
    height: 30px;
    background: url("/sites/zweb/images/workplace/small-business/small-business-sprite-icon.png") no-repeat;
    background-size: 185px auto;
}

.zwc-tools-built-list-icons.grade-security {
    background-position: 1px 0px;
}

.zwc-tools-built-list-icons.data-mining {
    background-position: -31px 0px;
}

.zwc-tools-built-list-icons.fav-apps {
    background-position: -155px 0px;
}

.zwc-tools-built-list-icons.file-types {
    background-position: -123px 0px;
}

.zwc-tools-built-list-icons.workplace-anywhere {
    background-position: -61px 0px;
}

.zwc-tools-built-list-icons.helpful-ai {
    background-position: -92px 0px;
}

.zwc-tools-built-image {
    justify-self: end;
    width: 100%;
    max-width: 590px;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    line-height: 0;
    border-radius: 20px;
    display: grid;
    align-items: end;
    justify-content: center;
    padding-inline: 40px;
    overflow: hidden;
    min-height: 480px;
}

.zwc-tools-built-image>img {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility .5s ease, transform .5s ease;
}

.zwc-tools-built-image.security-privacy {
    background-image: url("/sites/zweb/images/workplace/small-business/security-privacy-bg.png");
    align-items: end;
    padding-inline: 13%;
}

.zwc-tools-built-image.security-privacy img {
    transform: translateY(30px);
}

.zwc-tools-built-image.versatile-solution {
    background-image: url("/sites/zweb/images/workplace/small-business/integration-bg.png");
    align-items: center;
    padding-inline: 0px;
}

.zwc-tools-built-image.versatile-solution img {
    transform: translateY(30px);
}

.zwc-tools-built-image.convenient-and-effective {
    background-image: url("/sites/zweb/images/workplace/small-business/convenient-effective-bg.png");
    align-items: end;
    justify-content: end;
    padding-right: 0;
}

.zwc-tools-built-image.convenient-and-effective img {
    transform: translateX(30px);
}

.zwc-tools-built-content.active .zwc-tools-built-image img {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
}

/* pricing flexible plan section */

.zwc-pricing-flexible-plan-section {
    background: url("/sites/zweb/images/workplace/small-business/pricing-flexible-bg.png") no-repeat;
    background-size: cover;
    background-position: center bottom;
}

.zwc-pricing-flexible-plan-wrap {
    text-align: center;
    max-width: 840px;
    margin-inline: auto;
}

.zwc-pricing-flexible-plan-wrap h2 {
    margin-bottom: 24px;
}

.zwc-pricing-flexible-plan-wrap p {
    font-size: 20px;
    width: 95%;
    margin-inline: auto;
}


/* flexible plan pricing section */

.zwc-flexible-plan-section {
    background: #000000;
    color: #ffffff;
}

.zwc-flexible-plan-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.zwc-flexible-plan-left-content h2 {
    margin-bottom: 24px;
}

.zwc-flexible-plan-left-content h2 span {
    color: #F0FF6A;
}

.zwc-flexible-left-content p {
    font-size: 16px;
    font-family: var(--zf-primary-medium);
}

.zwc-flexible-plan-input-wrap {
    max-width: 590px;
    padding: 40px;
    margin-left: auto;
    border-radius: 16px;
    border: 1px solid #383838;
}

.zwc-flexible-plan-input-wrap.hidden {
    display: none;
}

.zwc-flexible-plan-input-wrap h3 {
    max-width: 330px;
    font-family: var(--zf-primary-medium);
    margin-bottom: 32px;
}

.zwc-inner-wrap .zwc-flexible-plan-input-wrap h3 {
    font-size: 24px;
}

.zwc-flexible-plan-count {
    position: relative;
}

.zwc-flexible-plan-count select,
.zwc-flexible-plan-select {
    width: 100%;
    position: relative;
    padding: 16px 24px;
    color: #fff;
    font-size: 18px;
    font-family: var(--zf-primary-regular);
    background: #1A1A1A;
    border: 1px solid rgba(135, 135, 135, 0.50);
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
}

.zwc-flexible-plan-select-wrap {
    display: grid;
    gap: 20px;
    margin-top: 30px;
}

.zwc-flexible-plan {
    display: flex;
    gap: 20px;
}

.zwc-flexible-plan.hidden {
    opacity: 0.6;
}

.zwc-flexible-select-plan-wrap {
    width: 100%;
    max-width: 370px;
    position: relative;
}

.zwc-flexible-plan.hidden .zwc-flexible-plan-select,
.zwc-flexible-plan.hidden .zwc-flexible-plan-count-input {
    cursor: not-allowed;
}

.zwc-select-arrow {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: -2px;
    bottom: 0;
    right: 30px;
    margin: auto 0;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: rotate(135deg);
    pointer-events: none;
}

.zwc-flexible-plan-count-input {
    max-width: 118px;
    color: #fff;
    font-size: 18px;
    font-family: var(--zf-primary-regular);
    background: #000;
    border-radius: 8px;
    border: 1px solid rgba(135, 135, 135, 0.50);
    padding: 16px 24px;
}

.zwc-flexible-plan-count.error select,
.zwc-flexible-plan-select.error,
.zwc-flexible-plan-count-input.error {
    border-color: #FF0405;
    outline: none;
    box-shadow: none;
}

.zwc-flexible-plan-count.error select:focus-visible,
.zwc-flexible-plan-select.error:focus-visible,
.zwc-flexible-plan-count-input.error:focus-visible {
    outline: 2px solid #0349ff;
    box-shadow: 0 6px 10px 0 rgba(3, 73, 255, 0.07);
    outline-offset: -1px;
}

.zwc-flexible-plan-error-message {
    color: #FF0405;
    font-size: 16px;
    font-family: var(--zf-primary-regular);
    margin-top: 24px;
}

.zwc-flexible-plan-calculate {
    font-size: 16px;
    font-family: var(--zf-primary-medium);
    color: #000;
    padding: 16px 20px;
    margin-top: 24px;
    background: #fff;
    border: none;
    border-radius: 4px;
    text-transform: uppercase;
    cursor: pointer;
}

.zwc-flexible-plan-calculate.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
    padding-right: 48px;
}

.zwc-flexible-plan-calculate.loading::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 0;
    bottom: 0;
    margin-block: auto;
    width: 16px;
    height: 16px;
    border: 2px solid #000;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.zwc-flexible-plan-result-wrap.hidden {
    display: none;
}

.zwc-flexible-plan-result-content {
    max-width: 672px;
    padding: 32px;
    background-color: #000;
    border-radius: 10px;
    border: 1px solid #383838;
}

.zwc-plan-result-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.zwc-plan-result-header h3 {
    font-size: 32px;
    color: #f5f5f5;
    margin-bottom: 0;
}

.zwc-close-icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: auto;
    cursor: pointer;
    border: none;
    background: transparent;
}

.zwc-close-icon::before,
.zwc-close-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: #A8A8A8;
    border-radius: 2px;
}

.zwc-close-icon::before {
    width: 2px;
    height: 16px;
    transform: translate(-50%, -50%) rotate(45deg);
}

.zwc-close-icon::after {
    width: 16px;
    height: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
}

.zwc-flexible-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    margin-top: 16px;
}

.zwc-flexible-plan-table-header {
    border: 1px solid #333;
    border-bottom: none;
    font-variant-ligatures: normal;
}

.zwc-flexible-plan-table-header th {
    color: #e6f28c;
    padding: 12px;
    font-size: 16px;
    font-family: var(--zf-primary-bold);
    background: #282828;
    font-variant-ligatures: normal;
}

.zwc-flexible-plan-table-header th:not(.plan-name) {
    text-align: center;
}

.zwc-flexible-plan-table-row {
    background: #000000;
    border: 1px solid #282828;
    border-top: none;
}

.zwc-flexible-plan-table-row td {
    color: #ffffff;
}

.zwc-flexible-plan-table-row td,
.zwc-quote-total td {
    font-variant-ligatures: normal;
    border: 1px solid #333;
    padding: 12px;
    font-size: 16px;
}

.zwc-flexible-plan-table-row td:not(.plan-name) {
    text-align: center;
}

.zwc-quote-total td {
    color: #e6f28c;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 12px;
    background: #000;
    border: 1px solid #333;
}

.zwc-download-pdf-wrap {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: space-between;
    margin-top: 32px;
}

.zwc-download-pdf-wrap span {
    font-size: 16px;
    font-family: var(--zf-primary-regular);
}

.zwc-download-pdf-btn {
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: #fff;
    border: none;
    padding: 16px 24px;
    border-radius: 4px;
    font-size: 16px;
    font-family: var(--zf-primary-medium);
    flex-shrink: 0;
}

.zwc-download-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    margin-left: 10px;
    overflow: hidden;
}

.zwc-download-icon::after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 10px;
    border: 2px solid #000;
    border-top: 0;
    left: 0;
    bottom: 0;
    margin-inline: auto;
    border-radius: 0px 0px 4px 4px;
}

.zwc-download-arrow::before,
.zwc-download-arrow::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
}

.zwc-download-arrow::before {
    width: 8px;
    height: 8px;
    top: 4px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    border-color: #000;
    transform: rotateZ(-45deg);
}

.zwc-download-arrow::after {
    width: 2px;
    height: 11px;
    top: 0px;
    background: #000;
}

.zwc-download-pdf-btn.loading .zwc-download-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    animation: upload-arrow-animation 1s ease infinite forwards;
}
@keyframes upload-arrow-animation {
    0% {
        transform: translateY(-50px) scale(.7);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

/* compaliance section */

.zwc-compliance-wrap {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 40px;
    max-width: 1160px;
    margin-inline: auto;
}

.zwc-compliance-left-content {
    max-width: 550px;
}

.zwc-compliance-left-content h2 {
    margin-bottom: 24px;
}

.zwc-compliance-left-content p {
    font-size: 20px;
}

.zwc-compliance-logos-wrap {
    display: grid;
    gap: 30px;
    grid-template-columns: max-content max-content;
    justify-content: center;
    place-items: center;
}

/* customer review section */

.zwc-customer-review-section {
    background: #f5f5f5;
}

.zwc-customer-review-section .content-wrap {
    max-width: 1142px;
}

.zwc-customer-review-heading {
    max-width: 590px;
    text-align: center;
    margin-inline: auto;
}

.zwc-customer-review-icon {
    display: inline-block;
    width: 101px;
    height: 97px;
    margin-bottom: 16px;
    background-image: url("/sites/zweb/images/workplace/small-business/testimonial-icon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.zwc-customer-review-heading h2 {
    margin-bottom: 16px;
}

.zwc-customer-review-heading p {
    font-size: 20px;
}

.zwc-customer-case-study {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 72px;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    padding: 64px 56px;
    margin-top: 56px;
}

.zwc-customer-review-left-sec {
    border-right: 1px solid #B5B5B5;
}

.zwc-customer-review-left-sec p {
    position: relative;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.5;
    font-family: var(--secondaryfont-semibold);
    margin-right: 30px;
}

.zwc-customer-readmore {
    display: inline-block;
    font-size: 16px;
    font-family: var(--secondaryfont-semibold);
    margin-top: 24px;
}

.zwc-arrow-icon {
    display: inline-block;
    position: absolute;
    width: 21px;
}

.zwc-arrow-icon::before,
.zwc-arrow-icon::after {
    content: '';
    position: absolute;
    display: inline-block;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0;
}

.zwc-arrow-icon::before {
    width: 8px;
    height: 8px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    border-color: #0047FF;
    transform: rotateZ(-130deg);
}

.zwc-arrow-icon::after {
    width: 12px;
    height: 2px;
    background: #0047FF;
}

.zwc-case-study-logo {
    justify-self: center;
}

.zwc-case-study-logo img {
    margin-inline: auto;
}

.zwc-case-study-logo div {
    margin-top: 32px;
    text-align: center;
}

.zwc-customer-name,
.zwc-customer-role,
.zwc-customer-count {
    display: block;
}

.zwc-customer-name {
    font-size: 20px;
    font-family: var(--zf-primary-semibold);
}

.zwc-customer-role,
.zwc-customer-count {
    font-size: 16px;
    font-family: var(--zf-primary-medium);
}

.zwc-customer-count {
    color: #D10000;
}


/* faq section */

.zwc-faq-wrap {
    max-width: 840px;
    margin-inline: auto;
}

.zwc-faq-wrap h2 {
    margin-bottom: 32px;
    text-align: center;
}

.zwc-faq-list li:not(:last-child) {
    border-bottom: 1px solid #B5B5B5;
}

.zwc-faq-list li {
    padding-block: 40px;
    cursor: pointer;
}

.zwc-faq-list li:last-child {
    padding-bottom: 0px;
}

.zwc-faq-section h3 {
    margin-bottom: 0;
    font-size: 20px;
}

.zwc-faq-list h3 button {
    position: relative;
    width: 100%;
    color: #000;
    font-size: 24px;
    font-family: var(--zf-primary-semibold);
    cursor: pointer;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0 30px 0 0;
    margin: 0;
}

.zwc-faq-list li:last-child h3 button,
.zwc-faq-list li:last-child p {
    padding-bottom: 0;
}

.zwc-faq-list li p {
    padding-top: 16px;
    padding-right: 40px;
    font-family: var(--zf-primary-medium);
}

.zwc-faq-list li h3 button.active {
    color: var(--zwc-link-clr);
}

.zwc-faq-desc:not(.active) {
    display: none;
}

.zwc-faq-accordion-icon {
    position: absolute;
    right: 0;
    top: 5px;
    width: 20px;
    height: 20px;
}

.zwc-faq-accordion-icon:before,
.zwc-faq-accordion-icon:after {
    content: "";
    width: 12px;
    height: 3px;
    display: block;
    background: #000000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.zwc-faq-accordion-icon:after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform .25s linear;
}

.zwc-faq-list h3 button.active .zwc-faq-accordion-icon:after {
    transform: translate(-50%, -50%);
}

.zwc-faq-list h3 button.active .zwc-faq-accordion-icon:after,
.zwc-faq-list h3 button.active .zwc-faq-accordion-icon::before {
    background: var(--zwc-link-clr);
}

/* footer section */

.zwc-section.zwc-footer-section {
    padding: 70px 20px 80px 20px;
}

.zwc-footer-section {
    max-width: 1320px;
    width: 90%;
    margin-inline: auto;
    background: url("/sites/zweb/images/workplace/small-business/footer-banner.png") no-repeat;
    background-size: cover;
    background-position: right bottom;
    text-align: center;
    margin-bottom: 80px;
    border-radius: 20px;
}

.zwc-footer-wrap {
    max-width: 670px;
    text-align: left;
}

.zwc-footer-wrap h2 {
    margin-bottom: 16px;
}

.zwc-footer-wrap p {
    font-size: 20px;
}

.zwc-bottom-cta-wrap {
    margin-top: 32px;
}

.zwc-bottom-cta-wrap .zwc-plans-btn{
    background: #e1fffc;
}

@media screen and (max-width: 1440px) {
    .zwc-inner-wrap h1 {
        font-size: 72px;
    }

    .zwc-banner-left-content {
        max-width: 730px;
        margin-left: 60px;
    }
}

@media screen and (max-width: 1280px) {
    .zwc-section {
        padding-block: 90px 100px;
    }

    .zwc-inner-wrap h1 {
        font-size: 64px;
    }

    .zwc-inner-wrap h2 {
        font-size: 48px;
    }

    .zwc-inner-wrap h3 {
        font-size: 32px;
    }

    .zwc-banner-left-content {
        max-width: 640px;
    }

    .zwc-banner-left-content p {
        max-width: 470px;
    }

    .zwc-workplace-apps-wrap h2 {
        max-width: 660px;
    }

    .zwc-tools-built-heading {
        max-width: 780px;
    }

    .zwc-tools-built-heading h2 {
        max-width: 600px;
    }

    .zwc-tools-built-heading p {
        font-size: 18px;
    }

    .zwc-tools-built-left-content {
        max-width: 525px;
    }

    .zwc-flexible-plan-wrap {
        grid-template-columns: 0.9fr 1.1fr;
    }
}

@media screen and (max-width: 1199px) {

    .zwc-feature-product>span:hover .zwc-app-short-name,
    .zwc-feature-product>span:focus-visible .zwc-app-short-name {
        position: absolute;
        bottom: -55px;
        background: #fff;
        padding: 5px 20px;
        border-radius: 10px;
        max-width: max-content;
        pointer-events: none;
        justify-self: center;
        opacity: 1;
        transition: none;
    }

    .zwc-feature-product>span {
        overflow: inherit;
    }

    .zwc-feature-product>span:hover {
        grid-template-columns: auto;
        background: #fff;
    }

    .zwc-app-short-name {
        transition: none;
    }

    .zwc-feature-product>span.zwc-feature-more:hover {
        background-color: #262626;
    }

    .zwc-tools-built-image {
        max-width: 480px;
    }

    .zwc-flexible-plan-wrap {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .zwc-flexible-plan-left-content {
        max-width: 610px;
        text-align: center;
        margin-inline: auto;
    }

    .zwc-flexible-plan-input-wrap {
        margin-inline: auto;
    }

    .zwc-flexible-plan-result-wrap {
        max-width: 670px;
        margin-inline: auto;
    }

    .zwc-footer-section {
        width: 95%;
    }

    .zwc-banner-left-content {
        margin-left: 15px;
    }

    .zwc-banner-image {
        padding-top: 187px;
    }
}

@media screen and (max-width: 1080px) {
    .zwc-banner-left-content {
        margin-left: 0px;
    }

}

@media screen and (max-width: 991px) {
    .zwc-section {
        padding-block: 80px 90px;
    }

    .zwc-inner-wrap h1 {
        font-size: 56px;
    }

    .zwc-inner-wrap h2 {
        font-size: 40px;
    }

    .zwc-inner-wrap h3 {
        font-size: 28px;
    }

    .zwc-inner-wrap h4 {
        font-size: 20px
    }

    .zwc-section.zwc-banner-section {
        padding-top: 50px;
    }

    .zwc-banner-wrap {
        gap: 48px;
    }

    .zwc-banner-left-content {
        max-width: 590px;
        text-align: center;
        margin-inline: auto;
    }

    .zwc-banner-left-content h1 {
        margin-bottom: 16px;
    }

    .zwc-banner-left-content p {
        max-width: 570px;
        margin-inline: auto;
    }

    .zwc-banner-cta-wrap {
        justify-content: center;
        margin-top: 32px;
    }

    .zwc-banner-image {
        max-width: 550px;
        grid-area: unset;
        padding-top: 0;
        margin-inline: auto;
    }

    .zwc-inner-wrap .zwc-banner-desktop-img {
        display: none;
    }

    .zwc-inner-wrap .zwc-banner-mobile-img {
        display: block;
        border-radius: 16px;
    }

    .zwc-inner-wrap .zwc-trusted-brands-wrap h2 {
        font-size: 20px;
    }

    .zwc-brand-logos-wrap {
        max-width: 590px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 40px 40px;
        margin-top: 32px;
        margin-inline: auto;
    }

    .zwc-border-line {
        max-width: 720px;
    }

    .zwc-we-get-it-wrap {
        max-width: 790px;
    }

    .zwc-we-get-it-wrap h2 {
        margin-bottom: 16px;
    }

    .zwc-we-get-it-wrap p {
        font-size: 18px;
    }

    .zwc-workplace-apps-wrap h2 {
        max-width: 540px;
        margin-bottom: 16px;
    }

    .zwc-feature-product-list {
        max-width: 490px;
        margin-inline: auto;
    }

    .zwc-app-short-name {
        font-size: 16px;
    }

    .zwc-feature-product>span:hover .zwc-app-short-name,
    .zwc-feature-product>span:focus-visible .zwc-app-short-name {
        padding: 5px 10px;
        border-radius: 4px;
    }

    .zwc-tools-built-heading {
        max-width: 590px;
    }

    .zwc-tools-built-heading h2 {
        max-width: 490px;
        margin-bottom: 15px;
    }

    .zwc-tools-built-heading p {
        font-size: 17px;
        max-width: 670px;
        margin-inline: auto;
        font-family: var(--zf-primary-regular);
    }

    .zwc-tools-built-tab {
        display: none;
    }

    .zwc-tools-built-content-list {
        gap: 48px;
        margin-top: 48px;
        justify-content: center;
    }

    .zwc-tools-built-content {
        flex-direction: column;
        gap: 56px;
        background-color: #f5f5f5;
        border-radius: 16px;
        padding: 48px 40px;
        text-align: center;
        grid-area: unset;
        visibility: visible;
        opacity: 1;
    }

    .zwc-tools-built-left-content {
        max-width: 480px;
        margin-inline: auto;
    }

    .zwc-tools-built-left-content-list {
        gap: 32px;
        margin-top: 32px;
    }

    .zwc-tools-built-left-content-list li {
        padding-left: 0;
    }

    .zwc-tools-built-list-icons {
        position: relative;
        margin-bottom: 10px;
    }

    .zwc-tools-built-image {
        max-width: 400px;
        padding-top: 20px;
        border-radius: 8px;
        margin-inline: auto;
        min-height: 290px;
    }

    .zwc-tools-built-image.security-privacy {
        padding-inline: 24%;
    }

    .zwc-tools-built-image>img,
    .zwc-tools-built-image.versatile-solution img {
        opacity: 1;
        visibility: visible;
        transform: translate(0, 0);
    }

    .zwc-tools-built-image.versatile-solution img {
        padding-bottom: 20px;
    }

    .zwc-pricing-flexible-plan-wrap {
        max-width: 680px;
    }

    .zwc-pricing-flexible-plan-wrap h2 {
        margin-bottom: 16px;
    }

    .zwc-pricing-flexible-plan-wrap p {
        font-size: 18px;
    }

    .zwc-flexible-plan-wrap {
        gap: 48px;
    }

    .zwc-flexible-plan-left-content {
        max-width: 510px;
    }

    .zwc-compliance-wrap {
        grid-template-columns: 1fr;
        max-width: 650px;
        text-align: center;
        gap: 56px;
    }

    .zwc-compliance-left-content {
        margin-inline: auto;
    }

    .zwc-compliance-left-content h2 {
        margin-bottom: 16px;
    }

    .zwc-compliance-left-content p {
        font-size: 18px;
    }

    .zwc-customer-review-heading {
        max-width: 420px;
    }

    .zwc-customer-review-heading p {
        font-size: 18px;
    }

    .zwc-customer-case-study {
        grid-template-columns: 1fr;
        text-align: center;
        max-width: 600px;
        padding: 48px;
        margin-inline: auto;
        gap: 48px;
    }

    .zwc-customer-review-left-sec {
        border: none;
    }

    .zwc-customer-review-left-sec p {
        margin-inline: auto;
    }

    .zwc-case-study-logo div {
        margin-top: 24px;
    }

    .zwc-faq-list li {
        padding-block: 32px;
    }

    .zwc-faq-list h3 button {
        font-size: 20px;
    }

    .zwc-footer-section {
        background-position: left bottom;
    }

    .zwc-footer-wrap {
        max-width: 610px;
        text-align: center;
        margin-inline: auto;
    }

    .zwc-footer-wrap h2 {
        margin-bottom: 10px;
    }

    .zwc-footer-wrap p {
        font-size: 18px;
    }

    .zwc-bottom-cta-wrap {
        justify-content: center;
        margin-top: 24px;
    }
}

@media screen and (max-width: 767px) {
    .zwc-section {
        padding-block: 70px 80px;
    }

    .zwc-cta-btn-wrap {
        gap: 16px;
    }

    .zwc-cta-btn-wrap a {
        font-size: 15px;
        padding: 8px 16px;
    }

    .zwc-section.zwc-banner-section {
        padding-top: 40px;
    }

    .zwc-inner-wrap h1 {
        font-size: 40px;
    }

    .zwc-inner-wrap h2 {
        font-size: 32px;
    }

    .zwc-inner-wrap p {
        line-height: 1.5;
    }

    .zwc-banner-left-content {
        max-width: 470px;
    }

    .zwc-banner-left-content h1 {
        max-width: 410px;
        margin-inline: auto;
    }

    .zwc-banner-left-content p {
        font-size: 16px;
        font-family: var(--zf-primary-regular);
    }

    .zwc-banner-cta-wrap {
        margin-top: 24px;
    }

    .zwc-banner-image {
        max-width: 440px;
    }

    .zwc-inner-wrap .zwc-trusted-brands-wrap h2 {
        font-size: 18px;
    }

    .zwc-brand-logos-wrap {
        gap: 40px 30px;
        max-width: 510px;
    }

    .zwc-brand-logos-wrap img {
        width: 90px;
    }

    .zwc-border-line {
        max-width: 100%;
        width: 60%;
    }

    .zwc-we-get-it-wrap p {
        font-size: 16px;
        max-width: 510px;
        margin-inline: auto;
    }

    .zwc-workplace-apps-wrap h2 {
        max-width: 430px;
    }

    .zwc-feature-product-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, 1fr);
        max-width: 660px;
        margin-inline: auto;
        margin-top: 40px;
        gap: 10px 8px;
    }

    .zwc-feature-product:last-child {
        height: 100%;
    }

    .zwc-feature-product>span,
    .zwc-feature-product:nth-child(5)~.zwc-feature-product>span {
        transform: translateX(0px);
        transition-delay: 0s;
        opacity: 1;
    }

    .zwc-feature-product>span {
        padding: 10px 12px;
        border-radius: 8px;
        height: 100%;
    }

    .zwc-feature-more>span {
        display: block;
    }

    .zwc-feature-product:nth-child(n)>span {
        transition-delay: 0s;
    }

    .zwc-feature-product>span,
    .zwc-feature-product>span:hover {
        grid-template-columns: max-content 1fr;
    }

    .zwc-app-short-name,
    .zwc-feature-product>span:hover .zwc-app-short-name,
    .zwc-feature-product>span:focus-visible .zwc-app-short-name {
        position: relative;
        bottom: unset;
        max-width: max-content;
        opacity: 1;
        color: #ffff;
        padding: 0 0 0 10px;
        font-size: 15px;
        font-family: var(--zf-primary-medium);
        background-color: #262626;
        justify-self: left;
    }

    .zwc-feature-product>span:hover {
        background-color: #262626;
    }

    .zwc-tools-built-heading {
        max-width: 510px;
    }

    .zwc-tools-built-heading h2 {
        max-width: 360px;
    }

    .zwc-tools-built-content {
        border-radius: 8px;
    }

    .zwc-tools-built-heading p {
        font-size: 16px;
    }

    .zwc-tools-built-content-list {
        margin-top: 40px;
    }

    .zwc-pricing-flexible-plan-wrap {
        max-width: 600px;
    }

    .zwc-pricing-flexible-plan-wrap p {
        font-size: 16px;
    }

    .zwc-flexible-plan-section .content-wrap {
        width: 95%;
    }

    .zwc-flexible-plan-wrap {
        padding-inline: 24px;
        border-radius: 8px
    }

    .zwc-flexible-plan-left-content {
        max-width: 400px;
    }

    .zwc-flexible-plan-right-content {
        width: calc(100% - 0px);
        overflow: hidden;
        margin-inline: auto;
    }

    .zwc-flexible-plan-left-content h2 {
        margin-bottom: 16px;
    }

    .zwc-flexible-plan-input-wrap {
        padding-inline: 24px;
        max-width: 470px;
        border-radius: 8px;
    }

    .zwc-flexible-plan-input-wrap h3 {
        margin-bottom: 24px;
    }

    .zwc-inner-wrap .zwc-flexible-plan-input-wrap h3 {
        font-size: 20px;
    }

    .zwc-flexible-plan-select-wrap {
        gap: 16px;
        margin-top: 24px;
    }

    .zwc-flexible-plan-count select,
    .zwc-flexible-plan-select,
    .zwc-flexible-plan-count-input {
        padding: 12px 16px;
        font-size: 15px;
    }

    .zwc-flexible-plan-count-input {
        max-width: 100px;
    }

    .zwc-flexible-plan-calculate {
        padding: 12px 16px;
        font-size: 15px;
    }

    .zwc-select-arrow {
        right: 15px;
    }

    .zwc-flexible-plan-result-content {
        padding: 24px;
    }

    .zwc-flexible-table-wrap {
        overflow-x: auto;
    }

    .zwc-download-pdf-wrap {
        flex-direction: column;
        gap: 16px;
        align-items: start;
    }

    .zwc-compliance-wrap {
        gap: 40px;
    }

    .zwc-compliance-left-content {
        max-width: 480px;
    }

    .zwc-compliance-left-content h2 {
        margin-inline: auto;
        max-width: 320px;
    }

    .zwc-compliance-left-content p {
        font-size: 16px;
    }


    .zwc-compliance-logos-wrap img {
        max-width: 100px;
    }

    .zwc-compliance-logos-wrap {
        gap: 20px;
    }

    .zwc-customer-review-icon {
        height: 77px;
    }

    .zwc-customer-review-heading h2 {
        max-width: 360px;
        margin-inline: auto;
    }

    .zwc-customer-review-heading p {
        font-size: 16px;
    }

    .zwc-customer-case-study {
        margin-top: 40px;
        padding: 40px;
    }


    .zwc-faq-wrap h2 {
        margin-bottom: 24px;
    }

    .zwc-customer-review-left-sec p {
        font-size: 16px;
    }

    .zwc-faq-list li p {
        padding-right: 0px;
        font-family: var(--zf-primary-regular);
    }

    .zwc-footer-section {
        width: 90%;
        border-radius: 10px;
    }

    .zwc-footer-wrap p {
        font-size: 16px;
    }
}

@media screen and (max-width: 480px) {
    .zwc-section {
        padding-block: 60px 70px;
    }

    .zwc-section.zwc-banner-section {
        padding-top: 30px;
    }

    .zwc-inner-wrap h1 {
        font-size: 30px;
        letter-spacing: -1.64px;
    }

    .zwc-inner-wrap h2 {
        font-size: 24px;
    }

    .zwc-inner-wrap h3 {
        font-size: 20px;
    }

    .zwc-inner-wrap h4 {
        font-size: 18px;
    }

    .zwc-cta-btn-wrap {
        flex-direction: column;
        align-items: center;
    }

    .zwc-banner-left-content h1 {
        max-width: 320px;
        margin-bottom: 10px;
    }

    .zwc-workplace-apps-wrap h2 {
        max-width: 320px;
    }

    .zwc-workplace-apps-wrap p {
        font-size: 15px;
        font-family: var(--zf-primary-regular);
    }

    .zwc-feature-product-list {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(9, 1fr);
        max-width: 280px;
        gap: 16px;
        margin-top: 32px;
    }

    .zwc-feature-product:last-child {
        grid-area: unset;
    }

    .zwc-feature-product>span {
        padding: 8px 10px;
        border-radius: 4px;
    }

    .zwc-app-pricing-link {
        margin-top: 40px;
    }

    .zwc-tools-built-heading h2 {
        max-width: 290px;
    }

    .zwc-tools-built-content {
        padding: 32px 16px;
    }

    .zwc-tools-built-heading p {
        font-size: 15px;
    }

    .zwc-tools-built-left-content-list li h4 {
        font-size: 17px;
        max-width: 210px;
        margin-inline: auto;
    }

    .zwc-tools-built-content-list {
        margin-top: 32px;
        gap: 32px;
    }

    .zwc-pricing-flexible-plan-wrap h2 {
        margin-bottom: 12px;
    }

    .zwc-pricing-flexible-plan-wrap p {
        font-size: 15px;
    }

    .zwc-flexible-plan-section .content-wrap {
        width: 100%;
    }

    .zwc-flexible-plan-wrap {
        border-radius: 0px;
        padding-inline: 8px;
        gap: 40px;
    }

    .zwc-flexible-plan-left-content h2 {
        max-width: 270px;
        margin-inline: auto;
    }

    .zwc-flexible-plan-input-wrap {
        padding: 16px 12px;
        max-width: 400px;
    }

    .zwc-flexible-plan {
        gap: 10px;
    }

    .zwc-flexible-plan-count-input {
        max-width: 65px;
    }

    .zwc-flexible-plan-result-content {
        padding: 16px;
        border-radius: 4px;
    }

    .zwc-inner-wrap .zwc-flexible-plan-input-wrap h3 {
        font-size: 16px;
        max-width: 200px;
        margin-bottom: 20px;
    }

    .zwc-flexible-plan-count select,
    .zwc-flexible-plan-select,
    .zwc-flexible-plan-count-input {
        padding: 10px 12px;
        font-size: 14px;
    }

    .zwc-select-arrow {
        width: 8px;
        height: 8px;
        border-width: 1px;
    }

    .zwc-flexible-plan-calculate {
        padding: 12px 12px;
        font-size: 14px;
    }

    .zwc-flexible-plan-table-header th,
    .zwc-flexible-plan-table-row td,
    .zwc-quote-total td {
        font-size: 14px;
    }

    .zwc-download-pdf-wrap>span {
        font-size: 14px;
    }

    .zwc-download-pdf-btn {
        padding: 12px 16px;
        font-size: 14px;
    }

    .zwc-compliance-left-content p {
        font-size: 15px;
    }

    .zwc-customer-review-heading {
        max-width: 290px;
    }

    .zwc-customer-readmore {
        font-size: 15px;
    }

    .zwc-customer-review-left-sec p {
        font-size: 15px;
        font-family: var(--zf-primary-medium);
    }

    .zwc-customer-case-study {
        border-radius: 8px;
        padding: 32px 24px;
        gap: 32px;
    }

    .zwc-case-study-logo div {
        margin-top: 16px;
    }

    .zwc-customer-name {
        font-size: 17px;
    }

    .zwc-customer-role,
    .zwc-customer-count {
        font-size: 14px;
    }

    .zwc-faq-list li {
        padding-block: 24px;
    }

    .zwc-faq-list h3 button {
        font-size: 18px;
        line-height: 1.4;
    }

    .zwc-footer-wrap p {
        font-size: 15px;
    }

    .zwc-faq-wrap h2 {
        margin-bottom: 10px;
    }

    .zwc-footer-section {
        width: 100%;
        border-radius: 0px;
        margin-bottom: 0;
    }
}