section.zwc_voicebanner {
    padding: 110px 0;
    background: url(//cdn.zoho.com.cn/sites/zweb/images/voice/desktop-app/zwc_voicebanner.png) no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
    position: relative;
    z-index: 0
}

.zos-mac section.zwc_voicebanner {
    background: url(//cdn.zoho.com.cn/sites/zweb/images/voice/desktop-app/mac-bg.png) no-repeat;
    background-size: cover;
    opacity: 1
}

.zos-mac section.zwc_voicebanner:after {
    content: '';
    position: absolute;
    background-color: #040a1699;
    opacity: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3
}

.zwc-wrapper .content-wrap {
    max-width: 1200px
}

.zwc-wrapper h1 {
    font-size: 62px;
    line-height: 70px;
    width: 100%;
    max-width: 560px;
    font-family: var(--zf-primary-extrabold)
}

.zwc-wrapper h2 {
    font-size: 46px;
    font-family: var(--primaryfont-bold)
}

.zwc_voicebanner .flex-content p {
    font-size: 20px;
    max-width: 414px;
    margin-bottom: 40px
}

.voicebanner-inner,
.zwc_appfeatures-inner {
    display: flex;
    flex-flow: wrap;
    align-items: flex-start;
    justify-content: space-around
}

.voicebanner-inner .flex-content {
    margin-top: 40px
}

.voicebanner-inner .flex-content,
.voicebanner-inner .flex-image {
    width: 100%;
    max-width: 49%;
    position: relative
}

.voicebanner-inner .flex-image {
    text-align: center
}

.voicebanner-inner .img-wrap {
    position: relative;
    display: inline-block
}

.voicebanner-inner .img-wrap img:nth-child(1) {
    z-index: -1;
    position: absolute;
    top: 0;
    left: -90px;
    transform: translatex(25px);
    transition-duration: .5s;
    transition-property: all
}

.middle-animated .voicebanner-inner .img-wrap img:nth-child(1),
.middle-animated .voicebanner-inner .img-wrap img:nth-child(2),
.middle-animated .voicebanner-inner .img-wrap img:nth-child(3) {
    transform: translateX(0);
    transition: all 1s
}

.voicebanner-inner .img-wrap img:nth-child(2) {
    z-index: 2;
    margin-top: 30px;
    margin-left: 40px;
    transform: translatex(25px);
    transition-duration: .5s;
    transition-property: all
}

.voicebanner-inner .img-wrap img:nth-child(3) {
    z-index: 2;
    position: absolute;
    top: 200px;
    right: -51px;
    transform: translatex(25px);
    transition-duration: .5s;
    transition-property: all
}

.zwc_appstore-section .app-links a.app-store {
    background-position: -254px -35px;
    width: 145px;
    border: 1px solid #ffffff8a;
    border-radius: 6px
}

.zwc_appstore-section .app-links a {
    background: var(--common-elements) no-repeat;
    height: 41px;
    margin: 0;
    background-size: 800px auto;
    display: inline-block
}

.zwc_appstore-section .app-links a.g-play {
    background-position: -483px -34px;
    width: 154px
}

.zwc_appstore-section .app-links a.linux {
    background-position: 0 -76px;
    width: 106px
}

.zwc_desktopicons {
    width: 100%;
    max-width: 1122px;
    background: #ffffff1f 0 0 no-repeat;
    border-radius: 20px;
    padding: 16px 0;
    opacity: 1;
    margin: 100px auto 0;
    display: none
}

.zos-mac .zwc_desktopicons {
    display: block
}

.zwc_desktopicons ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px
}

.zwc_desktopicons ul li {
    text-indent: -99999999px;
    list-style: none;
    background: url(//cdn.zoho.com.cn/sites/zweb/images/voice/desktop-app/macapp-icons.png) no-repeat;
    background-size: 1000px auto;
    background-position: 0 0;
    width: 60px;
    height: 60px
}

.zwc_desktopicons ul li.macapp2 {
    background-position: -72px 0
}

.zwc_desktopicons ul li.macapp4 {
    background-position: -214px 0
}

.zwc_desktopicons ul li.macapp3 {
    background-position: -143px 0
}

.zwc_desktopicons ul li.macapp5 {
    background-position: -288px 0
}

.zwc_desktopicons ul li.macapp6 {
    background-position: -360px 0
}

.zwc_desktopicons ul li.macapp7 {
    background-position: -432px 0
}

.zwc_desktopicons ul li.macapp8 {
    background-position: -504px 0
}

.zwc_desktopicons ul li.macapp9 {
    background-position: -576px 0
}

.zwc_desktopicons ul li.macapp10 {
    background-position: -649px 0
}

.zwc_desktopicons ul li.macapp11 {
    background-position: -723px 0;
    position: relative
}

.zwc_desktopicons ul li.macapp11:after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 7px;
    height: 7px;
    background: #fff;
    border-radius: 100px
}

.pulse {
    animation: pulse 2s ease infinite
}

@keyframes pulse {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-10px)
    }

    60% {
        transform: translateY(-5px)
    }
}

.zwc_desktopicons ul li.macapp12 {
    background-position: -798px 0
}

.zwc_desktopicons ul li.macapp13 {
    background-position: -871px 0
}

.zwc_desktopicons ul li.macapp14 {
    background-position: -942px 0
}

section.zwc_appfeatures {
    padding: 120px 0;
    position: relative
}

.zwc_appfeatures-inner {
    align-items: flex-start
}

.flex-image,
.flex-content {
    width: 100%;
    max-width: 50%
}

.flex-image {
    position: sticky;
    top: 70px
}

.flex-image h2 {
    max-width: 440px;
    text-align: center;
    margin-bottom: 40px
}

.feature_content {
    border-radius: 10px;
    padding: 50px;
    background: #f8faff;
    margin-bottom: 11px
}

.feature_content.zwc_two {
    background: #fff8f2
}

.feature_content.zwc_three {
    background: #ebfff3
}

.feature_content.zwc_four {
    background: #f5f2ff
}

.feature_content.zwc_five {
    background: #ebf7ff
}

section.zwc_appstore-section {
    background: #f6f6f6;
    padding: 110px 0;
    text-align: center
}

section.zwc_appstore-section h2 {
    width: 100%;
    max-width: 782px;
    margin: 0 auto 40px
}

span.zwc_icon {
    position: relative;
    margin: 0
}

span.zwc_icon:before {
    content: '';
    position: absolute;
    background: #86a4f0;
    width: 13px;
    height: 13px;
    margin-top: 14px;
    border-radius: 10px
}

.zwc-content {
    padding-left: 30px
}

.zwc-content p {
    margin-bottom: 0
}

.zwc_two span.zwc_icon::before {
    background: #f0a96c
}

.zwc_three span.zwc_icon::before {
    background: #92e8b4
}

.zwc_four span.zwc_icon::before {
    background: #7d5ceb
}

.zwc_five span.zwc_icon::before {
    background: #69b8ed
}

.download-link {
    cursor: pointer;
    background: #f0483e;
    padding-left: 1.25em;
    padding-right: 1.25em;
    color: #fff;
    border-radius: 3px;
    font-family: var(--zf-primary-regular);
    font-size: 1em;
    line-height: 3.2;
    display: inline-block;
    box-shadow: 0 3px 15px rgb(0 0 0 / 15%);
    position: relative
}

.download-btn {
    position: relative;
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.zwc_appstore-inner .download-btn{
    justify-content: center; 
}

.download-btn a {
    padding: 8px 21px;
    border: 1px solid #ffffff8c;
    border-radius: 35px;
    background: #ffffff2b;
    color: #fff;
    margin-right: 2px;
    font-size: 15px
}

.zwc-mac,
.zwc-windows,
.zwc-linux {
    display: none;
    position: relative
}

.zos-mac .zwc-mac,
.zos-windows .zwc-windows,
.zos-linux .zwc-linux {
    display: block
}

.downloadwrapper .active {
    display: block
}

.zwc_appstore-section .zwc-mac,
.zwc_appstore-section .zwc-windows,
.zwc_appstore-section .zwc-linux {
    border: 1px solid #ddd;
    border-radius: 10px;
    display: block;
    padding: 40px;
    background: #fff;
    width: 100%;
    max-width: 330px
}

.zwc_appstore-inner .app-links {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center
}

.zwc_appstore-section .download-btn a {
    border: 1px solid #000;
    border-radius: 5px;
    background: #ffffff2b;
    color: #000;
    margin-right: 0;
    height: auto;
}

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

    .voicebanner-inner,
    .zwc_appfeatures-inner {
        justify-content: space-evenly
    }
}

@media only screen and (max-width: 1200px) {
    section.zwc_voicebanner {
        padding: 80px 0 90px
    }

    .zwc_voicebanner .img-wrap img {
        transform: scale(0.7)
    }

    .feature_content {
        padding: 30px
    }

    .zwc_desktopicons {
        margin: 40px 0 80px
    }

    .flex-image h2 {
        margin: 0 auto 20px
    }

    .flex-image {
        text-align: center
    }
}

@media only screen and (max-width: 1100px) {
    .zwc-wrapper h1 {
        font-size: 46px;
        line-height: 60px
    }

    .zwc-wrapper h2 {
        font-size: 40px
    }

    span.zwc_icon:before {
        margin-top: 10px
    }

    .voicebanner-inner .img-wrap img:nth-child(2) {
        margin-top: 30px;
        margin-left: 0
    }

    .voicebanner-inner .img-wrap img:nth-child(3) {
        right: -21px
    }

    .zwc_desktopicons ul {
        gap: 0;
        flex-wrap: wrap
    }

    .zwc_desktopicons ul li {
        transform: scale(0.8)
    }

    .zwc_desktopicons {
        margin: 50px auto 0;
        max-width: 900px
    }

    section.zwc_appstore-section {
        padding: 80px 0
    }

    section.zwc_appstore-section h2 {
        max-width: 720px;
        margin: 0 auto 40px
    }
}

@media only screen and (max-width: 950px) {
    section.zwc_voicebanner:after {
        background: #00000059;
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1
    }

    .voicebanner-inner .img-wrap {
        margin-top: 60px
    }

    .voicebanner-inner,
    .zwc_appfeatures-inner {
        justify-content: space-evenly;
        flex-flow: column;
        align-items: center;
        text-align: center
    }

    .app-links>a {
        margin: 0 auto
    }

    .flex-image {
        position: relative;
        margin-bottom: 30px
    }

    .flex-image,
    .flex-content {
        width: 100%;
        max-width: 70%;
        margin: 0 auto
    }

    .zwc-content {
        padding-left: 0;
        padding-top: 30px
    }

    .flex-image {
        position: inherit;
        margin-bottom: 60px !important
    }
}

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

    .voicebanner-inner .flex-content,
    .voicebanner-inner .flex-image {
        width: 100%;
        max-width: 100%
    }

    .zwc-wrapper h1,
    .zwc_voicebanner .flex-content p {
        margin: 0 auto 20px;
        max-width: 570px
    }

    section.zwc_voicebanner,
    section.zwc_appfeatures,
    section.zwc_appstore-section {
        padding: 50px 0
    }

    .zwc_desktopicons ul {
        gap: 8px;
        flex-wrap: wrap
    }

    .zwc_appstore-inner .app-links {
        gap: 15px;
        align-items: initial
    }

    .other-lang .download-btn a {
        padding: 8px 10px;
    }

    .download-btn {
        justify-content: center;
    }

    .zwc_appstore-section .zwc-mac,
    .zwc_appstore-section .zwc-windows,
    .zwc_appstore-section .zwc-linux {
        padding: 40px 20px;
    }

    .download-btn a {
        font-size: 14px;
    }

    .download-btn {
        flex-flow: wrap;
    }
}

@media only screen and (max-width: 767px) {
    .zwc-wrapper h1 {
        font-size: 40px
    }

    .zwc_voicebanner .flex-content p {
        font-size: 16px;
        max-width: 484px
    }

    .zwc_appfeatures .img-wrap {
        margin-bottom: 30px
    }

    .zwc-wrapper h2 {
        font-size: 32px
    }

    section.zwc_appstore-section h2 {
        max-width: 550px
    }

    .download-link {
        font-size: 15px;
        line-height: 50px
    }

    .zwc_appstore-inner .app-links {
        gap: 10px;
        flex-flow: column
    }

    .zwc_appstore-section .zwc-mac,
    .zwc_appstore-section .zwc-windows,
    .zwc_appstore-section .zwc-linux {
        display: block;
        margin: 10px auto 0
    }

    .voicebanner-inner .flex-content {
        margin-top: 0
    }
}

@media only screen and (max-width: 640px) {
    .zwc-wrapper h1 {
        font-size: 33px;
        line-height: 40px
    }

    .zwc-wrapper h2 {
        font-size: 28px
    }

    .zwc_voicebanner .flex-content p {
        max-width: 304px
    }

    .zwc-wrapper h1,
    .zwc_voicebanner .flex-content p {
        margin: 0 auto 10px
    }

    .voicebanner-inner .img-wrap img:nth-child(1) {
        left: -40px
    }

    .voicebanner-inner .img-wrap img:nth-child(2) {
        margin-left: 30px
    }

    .zwc_desktopicons ul {
        gap: 5px
    }

    .app-links>a {
        margin: 9px auto;
        text-align: center;
        display: block
    }

    .flex-image,
    .flex-content {
        max-width: 90%
    }

    .voicebanner-inner .img-wrap {
        margin-top: 20px
    }
}

@media only screen and (max-width: 550px) {
    .voicebanner-inner .img-wrap img:nth-child(2) {
        margin-left: 10px;
        margin-top: 60px;
        transform: scale(0.8) !important
    }

    .zwc_desktopicons {
        margin: 10px auto 0
    }

    .voicebanner-inner .img-wrap img:nth-child(1) {
        left: -30px;
        z-index: 0;
        transform: scale(0.8) !important
    }

    .voicebanner-inner .img-wrap img:nth-child(3) {
        right: -20px;
        transform: scale(0.8) !important
    }
}

.i18n-pt-br .zw-product-header,
.i18n-de .zw-product-header,
.i18n-nl .zw-product-header {
    display: none
}