*,p,h1,h2,h3,h4,li,ul {
    margin: 0;
    padding: 0;
    font-weight: inherit;
    box-sizing: border-box
}

*,:after,:before,header *,footer *,aside * {
    box-sizing: border-box
}

.main-wrapper {
    margin-top: -70px
}

.menu-sec {
    position: fixed;
    top: 55px;
    left: 0;
    width: 100%;
    padding: 0 30px;
    z-index: 2;
    background: #fff;
    border-bottom: 1px solid #ccc;
    display: none
}

.menu-sec.menu-active {
    display: block
}

.menu-list {
    display: flex;
    color: #000;
    justify-content: space-between;
    gap: 25px;
    width: max-content;
    margin: 0 auto
}

.menu-list-points {
    padding: 20px 0;
    position: relative;
    cursor: pointer;
    font: 16px / 1.2 var(--zf-primary-regular)
}

.menu-list-points.active {
    font-family: var(--zf-primary-semibold);
    color: #262626
}

.menu-list-points.active:before {
    width: 100%;
    height: 3px;
    background: #089949;
    content: '';
    left: 0;
    bottom: -1px;
    position: absolute
}

.act-btn.cta-btn {
    visibility: visible;
    opacity: 1
}

.banner-section {
    background-color: #14452e;
    overflow: hidden;
    position: relative
}

.banner-section::before {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/desk/images/zd-f-hub-dot-pattern.svg);
    opacity: .05;
    left: 0;
    top: 0;
    position: absolute
}

.banner-section-inner {
    padding: 175px 30px 130px;
    position: relative;
    width: 100%;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    min-width: 100%
}

.banner-section-inner::before {
    content: '';
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/desk/images/zd-f-hub-banner-left.svg);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: .3;
    background-repeat: no-repeat;
    display: none
}

.banner-section-inner::after {
    content: '';
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/desk/images/zd-f-hub-banner-right.svg);
    width: 540px;
    height: 480px;
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: .3;
    display: none
}

.grad-ball {
    position: absolute;
    width: 1000px;
    height: 1000px;
    border-radius: 50%;
    background-image: -webkit-radial-gradient(#dfff7d -100%,#2876ff00 65%);
    filter: blur(70px);
    top: -400px;
    right: 100px;
    opacity: .6
}

h1 {
    font: 64px/1.2 var(--zf-primary-bold);
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
    color: #fff5e7
}

.para-txt {
    font: 20px/1.7 var(--zf-primary-regular);
    padding: 15px 0
}

.inner-txt {
    font: 18px/1.6 var(--zf-primary-regular)
}

.banner-section .para-txt {
    color: #fff5e7;
    margin: 0 auto;
    text-align: center;
    max-width: 650px;
    padding-top: 15px;
    padding-bottom: 0
}

.banner-btn {
    margin: 30px auto 0;
    border-radius: 10px;
    display: block;
    width: max-content
}

.section-1 {
    background: #fff5e7;
    padding: 170px 30px 0
}

.title-flx-section {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    padding-bottom: 50px
}

.title-flx-lft {
    width: 50%
}

.lable-txt {
    font: 16px/1 var(--zf-primary-semibold);
    color: #dc698e;
    display: block;
    margin-bottom: 10px
}

h2 {
    font: 48px/1.1 var(--zf-secondary-medium)
}

.title-flx-lft h2 {
    max-width: 320px;
    position: relative
}

.title-flx-lft h2::after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 166px;
    height: 118px;
    right: 95px;
    top: -133px;
}

.s_webp .bg_lazy_loaded .title-flx-lft h2::after {
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/desk/images/zd-future-hub-icons.webp);
    background-size: 1400px auto;
    background-position: -774px -264px
}

.n_webp .bg_lazy_loaded .title-flx-lft h2::after {
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/desk/images/zd-future-hub-icons.png);
    background-size: 1400px auto;
    background-position: -774px -264px
}

.title-flx-rgt {
    width: 50%
}

.title-flx {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 30px
}

.flx-boxs {
    background-color: #fff;
    border-radius: 25px;
    position: relative;
    padding: 40px 40px 80px 30px;
    box-shadow: 0 6px 16.56px 1.44px rgba(0,0,0,0.06)
}

h3 {
    font: 24px/1.2 var(--zf-secondary-medium)
}

.learn-more-btn {
    color: #089949;
    font: 18px/1 var(--zf-primary-semibold)
}

.learn-more-btn span {
    width: 10px;
    height: 2px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    background: #089949;
    transition: .35s
}

.learn-more-btn:hover span {
    transform: translateX(4px);
    -webkit-transform: translateX(4px)
}

.learn-more-btn span::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    transform: rotate(-45deg);
    top: -2px;
    right: 0;
    border-width: 0 2px 2px 0;
    border-style: solid solid;
    border-color: #089949 #089949;
    border-image: initial;
    border-left: 0;
    border-top: 0
}

.ful-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.flx-section {
    display: flex;
    max-width: 1280px;
    gap: 25px;
    margin: 0 auto -150px;
    position: relative;
    z-index: 1
}

.tab-show {
    display: none
}

.flx-section .flx-boxs {
    flex: 1
}

.s_webp .bg_lazy_loaded .sprite-images,.s_webp .bg_lazy_loaded .accord-title-cont .open-icon {
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/desk/images/zd-future-hub-icons.webp);
    background-size: 1400px auto
}

.n_webp .bg_lazy_loaded .sprite-images,.n_webp .bg_lazy_loaded .accord-title-cont .open-icon {
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/desk/images/zd-future-hub-icons.png);
    background-size: 1400px auto
}

.icons {
    display: block;
    width: 71px;
    min-width: 71px;
    height: 71px
}

.icon-1 {
    background-position: -10px -26px
}

.icon-2 {
    background-position: -90px -26px
}

.icon-3 {
    background-position: -166px -26px
}

.icon-4 {
    background-position: -243px -26px
}

.icon-5 {
    background-position: -15px -124px
}

.icon-6 {
    background-position: -95px -124px
}

.icon-7 {
    background-position: -178px -124px
}

.icon-8 {
    background-position: -260px -124px
}

.icon-9 {
    background-position: -340px -124px
}

.icon-10 {
    background-position: -418px -124px
}

.icon-11 {
    background-position: -15px -224px
}

.icon-12 {
    background-position: -97px -224px
}

.icon-13 {
    background-position: -183px -224px
}

.icon-14 {
    background-position: -270px -224px
}

.icon-15 {
    background-position: -354px -224px
}

.icon-16 {
    background-position: -22px -328px
}

.icon-17 {
    background-position: -104px -328px
}

.icon-18 {
    background-position: -186px -328px
}

.icon-19 {
    background-position: -267px -328px
}

.icon-20 {
    background-position: -356px -328px
}

.icon-21 {
    background-position: -440px -328px
}

.icon-22 {
    background-position: -524px -328px
}

.icon-23 {
    background-position: -22px -443px
}

.icon-24 {
    background-position: -106px -443px
}

.icon-25 {
    background-position: -188px -443px
}

.icon-26 {
    background-position: -276px -443px
}

.icon-27 {
    background-position: -22px -537px
}

.icon-28 {
    background-position: -106px -537px
}

.icon-29 {
    background-position: -188px -537px
}

.icon-30 {
    background-position: -276px -537px
}

.icon-31 {
    background-position: -365px -537px
}

.icon-32 {
    background-position: -440px -537px
}

.flx-section .flx-boxs h3,.customization-section h3,.app-detail-section h3 {
    padding: 10px 0
}

.arrow-icon {
    background-position: -648px -236px;
    width: 30px;
    height: 31px;
    display: inline-block;
    position: absolute;
    bottom: 25px;
    right: 30px;
    cursor: pointer
}

.section-2 {
    padding: 220px 30px 130px;
    position: relative;
    background: #fff
}

#omnichannel {
    padding-top: 130px
}

.cent-algn {
    text-align: center;
    display: block
}

.section-2 .para-txt,.section-4 .para-txt {
    padding: 15px 0
}

.flx-content {
    display: flex;
    max-width: 1280px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    padding-top: 60px
}

.support-content {
    background-color: #fff;
    border-radius: 20px;
    position: relative;
    padding: 20px 25px;
    box-shadow: 0 6px 16.56px 1.44px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 32%
}

.i18n-en .support-content {
    padding: 20px 55px 20px 25px
}

.support-title {
    display: flex;
    align-items: center
}

.support-title .icons {
    margin-right: 20px
}

.support-content .arrow-icon {
    position: static;
    min-width: 30px;
    display: block;
    margin-left: 20px
}

.support-content .arrow-icon {
    position: absolute;
    min-width: 30px;
    display: block;
    margin-left: 0;
    right: 25px;
    top: 50%;
    transform: translateY(-50%)
}

.agent-top-section {
    display: none
}

.zd-datafaq-cnt {
    text-align: left;
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 150px 0 0;
    max-width: 1280px;
    margin: 0 auto
}

.zd-faq-lftcnt {
    max-width: 700px;
    position: relative;
    width: 53%;
    height: 480px;
    text-align: center
}

.zd-faq-rgtcnt {
    max-width: 540px;
    width: 45%;
    overflow: hidden
}

.zd-faq-sec {
    border-top: 2px solid rgb(157,159,158,0.1);
    position: relative
}

.zd-faq-sec:first-child {
    border-top: 0;
    position: relative
}

.accord-title-cont {
    padding: 25px 40px 25px 0;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.zd-qus-tle {
    display: flex;
    align-items: center
}

.zd-qus-tle .icons {
    margin-right: 20px
}

.zd-faq-sec:first-child .accord-title-cont {
    padding-top: 0
}

.accord-title-cont .open-icon {
    content: '';
    background-position: -649px -295px;
    width: 23px;
    height: 23px;
    display: inline-block
}

.faq-act .accord-title-cont .open-icon {
    background-position: -601px -305px;
    width: 23px;
    height: 3px
}

.zd-qus-anssec {
    display: none;
    padding-bottom: 25px
}

.zd-qus-anssec .inner-txt {
    padding-bottom: 15px
}

.section-3 {
    background-color: #073c2c;
    padding: 130px 30px 0
}

.grn-clr {
    color: #70ffcd
}

.section-3 h2,.section-3 .para-txt {
    color: #fff5e7
}

.section-3 .para-txt {
    padding: 15px 0;
    max-width: 500px;
    margin: 0 auto
}

.learn-more-btn.ylw-clr {
    color: #d8ae52
}

.learn-more-btn.ylw-clr span {
    background: #d8ae52
}

.learn-more-btn.ylw-clr span::before {
    border-color: #d8ae52 #d8ae52
}

.section-3 .flx-section {
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 60px
}

.section-3 .flx-boxs {
    width: 23%;
    flex: unset
}

.section-4 {
    padding: 220px 30px 160px;
    position: relative;
    background: #fff
}

.automation-inner {
    padding-top: 130px;
    position: relative
}

.section-4 .para-txt {
    max-width: 400px
}

.section-4 .content-top-section {
    max-width: 1280px;
    margin: 0 auto
}

.section-4 .flx-section {
    flex-wrap: wrap;
    padding-top: 60px;
    justify-content: space-between;
    margin: 0 auto
}

.section-4 .flx-boxs {
    border-radius: 0;
    padding: 0;
    box-shadow: unset;
    width: 20%;
    flex: unset;
    display: flex;
    flex-direction: column
}

.section-4 .learn-more-btn {
    margin-top: auto
}

.section-4 .inner-txt {
    padding-bottom: 10px
}

.section-5 {
    padding: 0 30px 130px;
    background-color: #fff5e7
}

.customization-section {
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 130px
}

.cus-top,.cus-bottom {
    display: flex;
    gap: 20px;
    justify-content: space-between
}

.cus-top {
    align-items: center;
    padding-bottom: 20px
}

.cus-top-rgt,.cus-bottom-lft,.cus-bottom-rgt {
    display: flex;
    gap: 20px;
    max-width: calc(50% - 10px)
}

.cus-top-rgt .flx-boxs,.cus-bottom-lft .flx-boxs {
    flex: 1
}

.cus-bottom-rgt {
    width: 50%
}

.flx-boxs ul {
    padding-top: 10px
}

.flx-boxs ul li {
    position: relative;
    padding-left: 30px;
    font: 18px / 1.6 var(--zf-primary-regular);
    margin-bottom: 20px
}

.flx-boxs ul li:last-child {
    margin-bottom: 0
}

.flx-boxs ul li::before {
    content: '';
    background-position: -705px -249px;
    width: 14px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 10px
}

.s_webp .bg_lazy_loaded .flx-boxs ul li::before {
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/desk/images/zd-future-hub-icons.webp);
    background-size: 1400px auto
}

.n_webp .bg_lazy_loaded .flx-boxs ul li::before {
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/desk/images/zd-future-hub-icons.png);
    background-size: 1400px auto
}

.report-section {
    padding-top: 160px;
    max-width: 1280px;
    margin: 0 auto
}

.report-box {
    max-width: 1100px;
    margin: 50px auto 0;
    background: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 30px;
    overflow: hidden
}

.report-top {
    display: flex
}

.report-top .report-title-txt {
    width: 50%;
    padding: 55px 0;
    background-color: #0b5b42;
    border-right: 1px solid #7ea89b;
    font: 20px / 1.2 var(--zf-secondary-medium);
    color: #fff5e7;
    text-align: center
}

.report-top .report-title-txt span {
    display: block;
    font: 56px / 1.2 var(--zf-primary-semibold)
}

.report-top .report-title-txt-2 {
    background-color: #073c2c;
    border-right: 0
}

.report-list {
    padding: 45px 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 35px 45px;
    justify-content: center
}

.report-list li {
    width: max-content;
    padding-left: 40px;
    font: 24px / 1.2 var(--zf-primary-regular);
    position: relative
}

.report-list li::before {
    content: '';
    background-position: -598px -239px;
    width: 26px;
    height: 26px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.s_webp .bg_lazy_loaded .report-list li::before {
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/desk/images/zd-future-hub-icons.webp);
    background-size: 1400px auto
}

.n_webp .bg_lazy_loaded .report-list li::before {
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/desk/images/zd-future-hub-icons.png);
    background-size: 1400px auto
}

.integrations-section {
    padding-top: 160px;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.Integrations-lft {
    max-width: 500px
}

.Integrations-lft h2 {
    padding-bottom: 15px
}

.Integrations-rgt {
    max-width: 763px
}

.app-section {
    padding-top: 160px;
    max-width: 1280px;
    margin: 0 auto
}

.app-detail-section {
    max-width: 1280px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding-top: 120px
}

.app-box {
    background-color: #fff;
    border-radius: 30px;
    border: 1px solid #d1d1d1;
    padding: 90px 55px 45px;
    position: relative;
    text-align: center;
    width: 32%
}

.app-icon {
    position: absolute;
    width: 146px;
    height: 146px;
    border-radius: 50%;
    border: 1px solid #d1d1d1;
    left: calc(50% - 73px);
    top: -73px;
    background-color: #fff
}

.app-icon::after {
    content: '';
    position: absolute;
    background-position: -600px -133px;
    width: 66px;
    height: 82px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

.s_webp .bg_lazy_loaded .app-icon::after {
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/desk/images/zd-future-hub-icons.webp);
    background-size: 1400px auto
}

.n_webp .bg_lazy_loaded .app-icon::after {
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/desk/images/zd-future-hub-icons.png);
    background-size: 1400px auto
}

.radar-app .app-icon::after {
    background-position: -700px -134px;
    width: 65px;
    height: 80px
}

.ondemand-app .app-icon::after {
    background-position: -982px -299px;
    width: 78px;
    height: 74px
}

.ondemand-app .learn-more-btn,.radar-app .learn-more-btn,.desk-app .learn-more-btn {
    margin-top: 20px;
    display: block
}

.app-links {
    display: flex;
    justify-content: space-between;
    padding-top: 25px;
    max-width: 300px;
    margin: 0 auto
}

.appstore-icon {
    background-position: -970px -159px;
    width: 141px;
    height: 43px;
    display: inline-block
}

.playstore-icon {
    background-position: -1130px -159px;
    width: 141px;
    height: 43px;
    display: inline-block
}

.security-section {
    padding-top: 160px;
    max-width: 500px;
    margin: 0 auto
}

.footer-section {
    padding: 130px 30px;
    max-width: 880px;
    margin: 0 auto;
    text-align: center
}

.foot-title {
    font: 56px / 1.2 var(--zf-primary-bold);
    color: #0b5b42
}

.foot-btn-section {
    display: flex;
    gap: 40px;
    max-width: 640px;
    margin: 0 auto;
    padding-top: 55px
}

.foot-btn-section a {
    flex: 1;
    padding: 10px 0;
    align-items: center;
    justify-content: center
}

.foot-sign-btn {
    border-radius: 10px
}

.foot-plans-btn {
    background-color: #fff5e7;
    border: 1px solid #333;
    border-radius: 10px;
    color: #000;
    font: 15px / 1 var(--zf-primary-semibold);
    text-transform: uppercase;
    display: flex
}

.anim-init,.anim-init1 {
    transition: .7s opacity cubic-bezier(.25,.46,.45,.94),1s transform cubic-bezier(.25,.46,.45,.94)
}

.anim-ele,.anim-eles {
    opacity: 0;
    transform: translateY(20px)
}

.lang-rtl .menu-sec {
    right: 0;
    left: unset
}

.lang-rtl .menu-list-points.active:before {
    right: 0;
    left: unset
}

.lang-rtl .banner-section::before {
    right: 0;
    left: unset
}

.lang-rtl .banner-section-inner {
    transform: translateX(50%);
    right: 50%;
    left: unset
}

.lang-rtl .banner-section-inner::before {
    right: 0;
    left: unset
}

.lang-rtl .banner-section-inner::after {
    left: 0;
    right: unset
}

.lang-rtl .grad-ball {
    left: 100px;
    right: unset
}

.lang-rtl h1 {
    text-align: center
}

.lang-rtl .title-flx-lft h2::after {
    left: -120px;
    right: unset
}

.lang-rtl .flx-boxs {
    padding: 40px 30px 80px 40px
}

.lang-rtl .learn-more-btn span {
    margin-right: 5px;
    margin-left: unset
}

.lang-rtl .learn-more-btn:hover span {
    transform: translateX(-4px)
}

.lang-rtl .learn-more-btn span::before {
    border-right: 0;
    border-left: unset;
    left: 0;
    right: unset;
    border-width: 0 2px 2px 0;
    border-style: solid solid;
    border-color: #089949 #089949;
    transform: rotate(135deg)
}

.lang-rtl .arrow-icon {
    left: 30px;
    right: unset;
    transform: scale(-1)
}

.lang-rtl .support-title .icons {
    margin-left: 20px;
    margin-right: unset
}

.lang-rtl .support-content .arrow-icon {
    margin-right: 20px;
    margin-left: unset
}

.lang-rtl .zd-datafaq-cnt {
    text-align: right
}

.lang-rtl .accord-title-cont {
    padding: 25px 0 25px 40px
}

.lang-rtl .zd-qus-tle .icons {
    margin-left: 20px;
    margin-right: unset
}

.lang-rtl .flx-boxs ul li {
    padding-right: 30px;
    padding-left: unset
}

.lang-rtl .flx-boxs ul li::before {
    right: 0;
    left: unset
}

.lang-rtl .report-top .report-title-txt {
    border-left: 1px solid #7ea89b;
    border-right: unset
}

.lang-rtl .report-top .report-title-txt-2 {
    border-left: 0;
    border-right: unset
}

.lang-rtl .report-list li {
    padding-right: 40px;
    padding-left: unset
}

.lang-rtl .report-list li::before {
    right: 0;
    left: unset
}

.lang-rtl .app-icon {
    right: calc(50% - 73px);
    left: unset
}

.lang-rtl .app-icon::after {
    transform: translate(50%,-50%);
    right: 50%;
    left: unset
}

.lang-rtl .learn-more-btn.ylw-clr span::before {
    border-color: #d8ae52 #d8ae52
}

.lang-rtl .banner-section .para-txt,.lang-rtl .cent-algn,.lang-rtl .zd-faq-lftcnt,.lang-rtl .report-top .report-title-txt,.lang-rtl .app-box,.lang-rtl .footer-section {
    text-align: center
}

.lang-rtl .banner-section .para-txt *,.lang-rtl .cent-algn *,.lang-rtl .zd-faq-lftcnt *,.lang-rtl .report-top .report-title-txt *,.lang-rtl .app-box *,.lang-rtl .footer-section * {
    text-align: center
}

.i18n-fr .title-flx-lft h2::after,.i18n-nl .title-flx-lft h2::after,.i18n-th .title-flx-lft h2::after,.i18n-fr-ca .title-flx-lft h2::after {
    right: -160px
}

.i18n-vi .title-flx-lft h2::after {
    right: -120px
}

.ful-wdth {
    width: 100%
}

@media only screen and (max-width: 1500px) {
    .banner-section-inner {
        width:1500px;
        margin: 0 auto
    }

    .lang-rtl .banner-section-inner {
        margin: 0 auto
    }
}

@media only screen and (max-width: 1300px) {
    .menu-nav-con {
        width:calc(100% - 30px);
        overflow: scroll;
        margin: 0 auto;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .app-box {
        padding: 90px 35px 45px
    }

    .menu-arrow {
        position: absolute;
        width: 0;
        height: 0;
        right: 10px;
        top: 23px;
        cursor: pointer;
        display: inline-block
    }

    .menu-arrow.left {
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-right: 9px solid #000;
        left: 10px
    }

    .menu-arrow.right {
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 9px solid #000
    }

    .lang-rtl .menu-nav-con {
        margin: 0 auto
    }

    .lang-rtl .menu-arrow {
        left: 10px;
        right: unset
    }

    .lang-rtl .menu-arrow.left {
        border-left: 9px solid #000;
        border-right: unset;
        right: 10px;
        left: unset
    }

    .lang-rtl .menu-arrow.right {
        border-right: 9px solid #000;
        border-left: unset
    }
}

@media only screen and (max-width: 1200px) {
    .menu-sec {
        top:0
    }

    .section-3 .flx-boxs {
        width: 31%;
        flex: unset
    }

    .app-detail-section {
        max-width: 900px;
        flex-wrap: wrap;
        gap: 45px;
        justify-content: center
    }

    .app-box {
        width: 47%
    }

    .ondemand-app {
        margin-top: 70px
    }

    .cus-top,.cus-bottom {
        display: block
    }

    .cus-top-lft {
        text-align: center
    }

    .cus-top-rgt {
        max-width: 100%;
        padding-top: 40px
    }

    .cus-bottom-lft {
        max-width: 100%
    }

    .cus-bottom-rgt {
        margin: 20px auto 0
    }

    .customization-section .flx-boxs {
        width: 50%
    }

    .support-content {
        width: 48%
    }

    .section-1 {
        padding: 130px 30px 0
    }

    .section-2 {
        padding: 150px 30px 130px
    }

    .section-4 {
        padding: 120px 30px 130px
    }

    .automation-inner {
        padding-top: 130px
    }

    .report-section,.integrations-section,.app-section,.security-section {
        padding-top: 130px
    }

    .app-box {
        padding: 80px 30px 40px
    }

    .lang-rtl .cus-bottom-rgt {
        margin: 20px auto 0
    }

    .lang-rtl .section-1 {
        padding: 130px 30px 0
    }

    .lang-rtl .section-2 {
        padding: 150px 30px 130px
    }

    .lang-rtl .section-4 {
        padding: 120px 30px 130px
    }

    .lang-rtl .app-box {
        padding: 80px 30px 40px
    }

    .lang-rtl .cus-top-lft {
        text-align: center
    }

    .lang-rtl .cus-top-lft * {
        text-align: center
    }
}

@media only screen and (max-width: 992px) {
    .banner-section-inner {
        padding:130px 30px 100px
    }

    .support-content .arrow-icon {
        margin-left: 20px
    }

    .banner-section-inner::before,.banner-section-inner::after {
        display: none
    }

    .title-flx-lft h2::after {
        display: none
    }

    h1 {
        font: 48px / 1.2 var(--zf-primary-bold);
        max-width: 650px
    }

    .section-3 .para-txt {
        max-width: 650px
    }

    h2 {
        font: 40px / 1.1 var(--zf-secondary-medium)
    }

    h3 {
        font: 22px / 1.2 var(--zf-secondary-medium)
    }

    .para-txt {
        font: 18px / 1.6 var(--zf-primary-regular);
        padding: 10px 0
    }

    .section-1 {
        padding: 90px 30px
    }

    .title-flx-section {
        display: block;
        padding-bottom: 0
    }

    .title-flx-lft {
        width: 100%;
        text-align: center
    }

    .title-flx-lft h2 {
        max-width: 500px;
        margin: 0 auto
    }

    .title-flx-rgt {
        width: 100%;
        margin-top: 40px
    }

    .flx-section {
        flex-wrap: wrap;
        margin: 0 auto
    }

    .section-1 .flx-section {
        padding-top: 40px;
        justify-content: center
    }

    .flx-section .flx-boxs {
        flex: unset;
        width: 48%
    }

    .section-2,.section-5,.section-4 {
        padding: 0 30px 90px
    }

    .section-3 {
        padding: 90px 30px
    }

    .customization-section {
        padding-top: 90px
    }

    .automation-inner {
        padding-top: 90px
    }

    #omnichannel {
        padding-top: 90px
    }

    .agent-top-section {
        display: block;
        padding-top: 90px
    }

    .zd-faq-lftcnt {
        display: none
    }

    .zd-datafaq-cnt {
        display: block;
        padding: 70px 0 0
    }

    .zd-faq-rgtcnt {
        max-width: 100%;
        width: 100%;
        overflow: hidden
    }

    .tab-show {
        display: block
    }

    .title-flx-rgt {
        display: none
    }

    .section-4 .flx-section {
        display: flex;
        gap: 50px 25px;
        margin: 0 auto;
        padding-top: 40px
    }

    .customization-section .flx-boxs {
        width: 100%;
        margin-bottom: 0
    }

    .report-section,.integrations-section,.app-section,.security-section {
        padding-top: 90px
    }

    .integrations-section {
        display: block
    }

    .Integrations-lft {
        max-width: 100%;
        text-align: center;
        margin: 0 auto
    }

    .Integrations-rgt {
        padding-top: 30px;
        margin: 0 auto
    }

    .app-detail-section {
        padding-top: 90px;
        gap: unset
    }

    .app-box {
        padding: 70px 30px 30px;
        max-width: 450px;
        margin: 0 auto
    }

    .app-icon {
        width: 110px;
        height: 110px;
        left: calc(50% - 55px);
        top: -55px
    }

    .app-icon::after {
        background-position: -816px -151px;
        width: 51px;
        height: 64px
    }

    .app-links {
        width: max-content;
        gap: 20px;
        margin: 0 auto
    }

    .radar-app .app-icon::after {
        background-position: -896px -152px;
        width: 52px;
        height: 62px
    }

    .ondemand-app .app-icon::after {
        background-position: -1098px -310px;
        width: 67px;
        height: 62px
    }

    .ondemand-app {
        margin-top: 100px
    }

    .footer-section {
        padding: 90px 30px;
        max-width: 880px;
        margin: 0 auto;
        text-align: center
    }

    .foot-title {
        font: 48px / 1.2 var(--zf-primary-bold)
    }

    .foot-btn-section {
        padding-top: 40px
    }

    .lang-rtl .banner-section-inner {
        padding: 130px 30px 100px
    }

    .lang-rtl .support-content .arrow-icon {
        margin-right: 20px;
        margin-left: unset
    }

    .lang-rtl .para-txt {
        padding: 10px 0
    }

    .lang-rtl .section-1 {
        padding: 90px 30px
    }

    .lang-rtl .title-flx-lft h2 {
        margin: 0 auto
    }

    .lang-rtl .flx-section {
        margin: 0 auto
    }

    .lang-rtl .section-2,.lang-rtl .section-5,.lang-rtl .section-4 {
        padding: 0 30px 90px
    }

    .lang-rtl .section-3 {
        padding: 90px 30px
    }

    .lang-rtl .zd-datafaq-cnt {
        padding: 70px 0 0
    }

    .lang-rtl .section-4 .flx-section {
        margin: 0 auto
    }

    .lang-rtl .Integrations-lft {
        margin: 0 auto
    }

    .lang-rtl .Integrations-rgt {
        margin: 0 auto
    }

    .lang-rtl .app-box {
        padding: 70px 30px 30px;
        margin: 0 auto
    }

    .lang-rtl .app-icon {
        right: calc(50% - 55px);
        left: unset
    }

    .lang-rtl .app-links {
        margin: 0 auto
    }

    .lang-rtl .footer-section {
        padding: 90px 30px;
        margin: 0 auto
    }

    .lang-rtl .title-flx-lft,.lang-rtl .Integrations-lft,.lang-rtl .footer-section {
        text-align: center
    }

    .lang-rtl .title-flx-lft *,.lang-rtl .Integrations-lft *,.lang-rtl .footer-section * {
        text-align: center
    }
}

@media only screen and (max-width: 767px) {
    .menu-list {
        gap:15px
    }

    .menu-list-points {
        font: 14px / 1.2 var(--zf-primary-regular)
    }

    h1 {
        font: 32px / 1.2 var(--zf-primary-bold)
    }

    h2 {
        font: 28px / 1.1 var(--zf-secondary-medium)
    }

    h3 {
        font: 20px / 1.3 var(--zf-secondary-medium)
    }

    .banner-section-inner {
        padding: 100px 30px 70px;
        width: 100%
    }

    .section-1,.section-3 {
        padding: 65px 30px
    }

    .section-4,.section-5 {
        padding: 0 30px 65px
    }

    .customization-section {
        padding-top: 65px
    }

    .automation-inner {
        padding-top: 65px
    }

    .section-2 {
        padding: 0 30px 65px
    }

    #omnichannel {
        padding-top: 65px
    }

    .flx-section {
        display: block
    }

    .flx-section .flx-boxs {
        width: 100%
    }

    .flx-boxs {
        margin-bottom: 20px;
        padding: 30px 30px 60px 30px
    }

    .support-content {
        width: 100%
    }

    .agent-top-section {
        padding-top: 65px
    }

    .zd-datafaq-cnt {
        padding: 35px 0 0
    }

    .accord-title-cont {
        padding: 20px 20px 20px 0
    }

    .accord-title-cont .open-icon {
        margin-left: 20px
    }

    .app-detail-section {
        display: block
    }

    .app-box {
        width: 100%
    }

    .radar-app,.ondemand-app {
        margin-top: 100px
    }

    .section-3 .flx-section {
        padding-top: 45px
    }

    .section-4 .flx-section {
        display: block;
        padding-top: 15px
    }

    .section-4 .flx-boxs {
        margin-bottom: 30px
    }

    .section-4 .flx-boxs:last-child {
        margin-bottom: 0
    }

    .cus-top-rgt,.cus-bottom-lft {
        display: block
    }

    .cus-top {
        padding-bottom: 0
    }

    .report-section,.integrations-section,.app-section,.security-section {
        padding-top: 65px
    }

    .report-top {
        display: block
    }

    .report-top .report-title-txt {
        width: 100%;
        padding: 30px 0;
        font: 18px / 1.2 var(--zf-secondary-medium)
    }

    .report-top .report-title-txt span {
        font: 40px / 1.2 var(--zf-primary-semibold)
    }

    .report-list li {
        font: 18px / 1.2 var(--zf-primary-regular)
    }

    .report-list {
        padding: 30px
    }

    .app-icon {
        width: 110px;
        height: 110px;
        left: calc(50% - 55px);
        top: -55px
    }

    .footer-section {
        padding: 65px 30px
    }

    .foot-title {
        font: 32px / 1.2 var(--zf-primary-bold)
    }

    .foot-btn-section {
        gap: 15px;
        padding-top: 30px
    }

    .customization-section .flx-boxs {
        width: 100%;
        margin-bottom: 20px
    }

    .foot-btn-section a {
        padding: 10px 30px;
        width: max-content;
        max-width: max-content;
        margin: 0 auto
    }

    .lang-rtl .banner-section-inner {
        padding: 100px 30px 70px
    }

    .lang-rtl .section-1,.lang-rtl .section-3 {
        padding: 65px 30px
    }

    .lang-rtl .section-4,.lang-rtl .section-5 {
        padding: 0 30px 65px
    }

    .lang-rtl .section-2 {
        padding: 0 30px 65px
    }

    .lang-rtl .flx-boxs {
        padding: 30px 30px 60px 30px
    }

    .lang-rtl .zd-datafaq-cnt {
        padding: 35px 0 0
    }

    .lang-rtl .accord-title-cont {
        padding: 20px 0 20px 20px
    }

    .lang-rtl .accord-title-cont .open-icon {
        margin-right: 20px;
        margin-left: unset
    }

    .lang-rtl .report-top .report-title-txt {
        padding: 30px 0
    }

    .lang-rtl .report-list {
        padding: 30px
    }

    .lang-rtl .app-icon {
        right: calc(50% - 55px);
        left: unset
    }

    .lang-rtl .footer-section {
        padding: 65px 30px
    }

    .lang-rtl .foot-btn-section a {
        padding: 10px 30px;
        margin: 0 auto
    }

    .other-lang h3 {
        font: 16px / 1.3 var(--zf-secondary-medium)
    }
}

@media only screen and (max-width: 500px) {
    .report-list li {
        margin-bottom:25px
    }

    .report-list li:last-child {
        margin-bottom: 0
    }

    .report-list {
        display: block;
        justify-content: unset
    }

    .app-links {
        display: block
    }

    .app-links a {
        display: block;
        margin: 0 auto
    }

    .playstore-icon {
        margin-top: 15px !important
    }

    .foot-btn-section {
        display: block
    }

    .foot-btn-section a {
        display: block;
        max-width: 250px;
        margin: 0 auto;
        line-height: 1
    }

    .foot-plans-btn {
        margin-top: 15px !important
    }

    .app-box {
        padding: 70px 15px 30px
    }

    .lang-rtl .app-links a {
        margin: 0 auto
    }

    .lang-rtl .foot-btn-section a {
        margin: 0 auto
    }

    .lang-rtl .app-box {
        padding: 70px 15px 30px
    }
}