.cont-sec a,
.cont-wrap a {

    border-bottom: 1px solid
}

#block-system-main {

    overflow: hidden;
    width: 100%;
    margin-top: 0
}

h1 {

    font-size: 55px;
    margin-bottom: 25px
}

h2 {

    font-family: Zoho_Puvi_Bold;
    font-size: 48px
}

p {

    font-size: 18px
}

.signup-form-wrap .signup-box {

    background-color: #fcf7ec
}

.brown-begde h4 {

    font-size: 36px;
    padding-top: 55px;

    position: relative
}

.brown-begde h4:after {

    position: absolute;
    content: "";
    width: 50px;
    height: 48px;
    left: 0;
    top: 0;
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/directory/direc-sprite-icons-2x.png);
    background-size: auto 115px;
    background-repeat: no-repeat
}

.lang-ar .brown-begde h4:after {

    right: 0;
    left: auto
}

.brown-begde .zd-icon-authen::after {

    background-position: 0 -31px
}

.brown-begde .zd-icon-author::after {

    background-position: -57px -30px;
    width: 40px
}

.brown-begde .zd-icon-Analy:after {

    background-position: -104px -33px
}

.mobile-design {

    display: none
}

#block-system-main .brown-begde p {

    font-size: 20px;
    max-width: 410px;

    width: 100%
}

.brown-begde p>span {

    display: inline-block;
    font-size: 20px
}

.banner .content-wrap {

    max-width: 1280px;
    padding: 80px 0 0
}

.body-umain .banner-image-wrap.content-wrap {

    padding-top: 0
}

.banner-image {

    text-align: center;

    position: relative
}

.banner-image>ul {

    position: absolute;
    top: 0;
    width: 1800px;
    z-index: 2;
    height: 520px;
    left: 0;
    right: 0;
    margin: auto
}

.banner-image>ul .zd-sign img {

    max-width: 226px
}

.banner-image>ul .zd-photo img {

    max-width: 250px
}

body .banner-vid {

    position: relative;
    bottom: -16px;
    left: 0;
    right: 0;
    margin: auto;
    width: 1680px;
    z-index: 2;
    height: 100%
}

body.umain .banner-vid {

    bottom: -7px
}

.banner-image>ul li {

    position: absolute;
    z-index: 1;
    transition-property: all;
    transition-duration: .5s
}

.zd-icon-mobile {

    width: 47px;
    height: 85px;
    left: 21.9%;
    background-position: -100px 0;
    top: 96px;
    transform: rotate(720deg) scale(0);
    opacity: 0
}

.loaded .zd-icon-mobile {

    transform: rotate(0) scale(1);

    opacity: 1
}

.zd-icon-ntag {

    width: 298px;
    height: 41px;
    left: 360px;
    background-position: -633px -41px;
    bottom: 110px;
    opacity: 0
}

.loaded .zd-icon-ntag,
.banner-image .loaded .zd-photo {

    opacity: 1
}

.banner-image ul .zd-sign {

    left: -26px;
    z-index: -1;
    top: 150px;
    transform: rotate(-90deg);
    transform-origin: 100% 50%;
    opacity: 0
}

.banner-image ul.loaded .zd-sign {
    transform: rotate(0);
    transform-origin: 0 0;

    opacity: 1
}

.banner-image::before,
.banner-image::after {

    content: "";
    position: absolute
}

li[class*="zd-icon"],
.zd-icon-type li>span,
.zd-icon-compet li {

    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/directory/directory-sprints-icon.png);
    background-size: 932px auto;
    background-repeat: no-repeat
}

.banner-image .banner-image-wrap img {

    max-width: 664px;
    position: relative;
    z-index: 3;
    width: 100%;
    opacity: 0
}

.banner-image-wrap span {

    display: none;

    position: relative;
    top: 0
}

.banner-image-wrap span ul {

    position: absolute;
    z-index: 11;
    top: 140px;
    right: 32px;
    width: 420px;
    opacity: 0
}

.banner-image-wrap span ul li {

    width: 85px;
    height: 106.5px;
    background-color: white;
    display: inline-block;
    vertical-align: top;
    margin-left: 7px;
    margin-right: 7px;
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/directory/directory-inner-direc-2x.png);
    background-size: 345px auto;
    border-radius: 4px;
    -webkit-border-radius: 4px
}

.zd-asana {

    background-position: 0 0
}

.zd-g-suide {

    background-position: -86.5px 0
}

.zd-market {

    background-position: -172.5px 0
}

.zd-zen-sell {

    background-position: -259px 0
}

.zd-mail {

    background-position: 0 106.5px
}

.zd-purely {

    background-position: -86.5px 107px
}

.zd-gdocs {

    background-position: -173.5px 107px
}

.zd-zcreator {

    background-position: -260px 107px
}

.banner-image-wrap span ul li:nth-child(-n+4) {

    margin-bottom: 50px
}

.brown-begde .content-wrap {

    max-width: 1250px;
    padding: 80px 0 80px
}

.banner,
.bot-wrap,
.main-container,
.zp-mobile-section {

    background-color: #fcf7ec
}

.bot-wrap {

    padding: 30px 0 10px;
    overflow: hidden
}

.banner {

    position: relative
}

.banner .cont-sign .banner-cont-wrap p {

    max-width: 740px;
    margin-bottom: 26px;

}




.banner-cont-wrap p {

    font-size: 19px
}

.zwc-ctabtns p {

    display: none;

    margin-bottom: 0;

}

.lang-ar .signup-box {

    background-color: #fcf7ec
}

.body-umain h1 {

    margin-bottom: 20px
}

.banner .cont-sign {

    display: flex;
    flex-wrap: wrap;
    align-items: initial
}

.banner .cont-sign>.banner-cont-wrap,
.banner .cont-sign .signup-form-wrap {

    width: 50%;
    box-sizing: border-box
}

.banner .cont-sign .signup-form-wrap {

    position: relative;
    z-index: 4
}

.green-badge,
.green-badge::before {

    background-color: #0b5a50
}

.zb-firefox .green-badge,
.zb-firefox .green-badge::before {

    background-color: #0c5044
}

.zd-icon-type li>span {

    width: 122px;
    height: 124px;
    margin: auto;
    display: block;
    /*! background-color: red; */
    margin-bottom: 15px;
    opacity: 0
}

.zd-icon-type li.in-view>span {

    opacity: 1
}

.zd-icon-type li *,
.cta-wrap * {

    transform: translateY(50px);
    transition: all .5s .5s
}

.zd-icon-type li p {

    transition-delay: .9s
}

.zd-icon-type li.in-view *,
.cta-wrap.in-view * {

    transform: translateY(0)
}

.zd-icon-type li:nth-child(1)>span {

    background-position: -214px 0
}

.zd-icon-type li:nth-child(2)>span {

    background-position: -336px 20px;
    width: 137px
}

.zd-icon-type li:nth-child(3)>span {

    background-position: -477px 26px;
    width: 156px
}

.brown-begde {

    background-color: #8b630c;
    padding: 60px 0 60px;
    overflow: hidden
}

.brown-begde,
.green-badge {

    color: white
}

.green-badge {

    position: relative;
    padding-top: 69px
}

.green-badge .content-wrap {

    max-width: 1120px;
    padding: 60px 0 120px
}

.body-umain .green-badge .content-wrap {

    padding-top: 100px
}

.zd-icon-type h3 {

    font-size: 32px;
    transition-delay: .7s
}

.zd-icon-type {

    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
    justify-content: space-around
}

.zd-icon-type li {

    width: 33%;
    box-sizing: border-box;
    text-align: center;
    padding: 5px 50px 5px 80px
}

.lang-ar .zd-icon-type li * {

    text-align: center
}

.brown-begde li {

    width: 695px
}

.brown-begde .cont-wrap li {

    width: 100%;
    max-width: 480px
}

.brown-begde .cont-wrap li {

    height: 580px;
    position: relative;
    opacity: .4;
    transition: all .5s
}

.brown-begde .cont-wrap li:nth-child(2) {

    max-width: 340px;

    width: 100%
}

.brown-begde .cont-wrap li.active {

    opacity: 1
}

.brown-begde .cont-wrap li img {

    display: none
}

.brown-begde li img {

    width: 100%;
    transition: all .5s linear;
    position: relative;

    z-index: 1
}

.brown-begde li.active img {

    z-index: 1
}

.brown-begde li>span {

    position: absolute;
    transform: translateY(-50%);
    top: 50%
}

.image-wrap ul li {

    transition: all .5s ease-in;
    position: absolute;
    opacity: 0
}

.image-wrap ul li:nth-child(1) img {

    position: relative;
    top: -80px
}

.inner-cont-wrap {

    position: relative;
    top: 90px
}

.inner-cont-wrap.fixed {

    position: fixed;
    top: 240px;

    width: 100%
}

.inner-cont-wrap.attach {

    position: absolute;
    bottom: 470px;
    width: 100%;
    top: unset
}

.inner-cont-wrap ul {

    width: 100%
}

.image-wrap li.active {

    opacity: 1
}

.content-wrap.int-wrap {

    max-width: 1170px;
    text-align: center;
    overflow: unset;
    padding: 80px 0 40px
}

.lang-ar .content-wrap.int-wrap * {

    text-align: center
}

.zgo-passless {

    background: #010230;
    overflow: hidden
}

.zgo-img {

    max-width: 250px;
    background: #343558;
    height: 320px;
    margin: 0 auto;
    border: 2px solid #000;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    -webkit-border-radius: 20px 20px 0 0;
    box-shadow: 0 0 0 2px #fff;
    -webkit-box-shadow: 0 0 0 2px #fff;
    position: relative;
    color: #fff
}

.zgo-img:before {

    content: '';
    position: absolute;
    width: 80px;
    height: 20px;
    left: 0;
    right: 0;
    margin: auto;
    border: 1px solid #fff;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px
}

.content-wrap.oneauth {

    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    padding: 30px 0 0;
    overflow: unset
}

.content-wrap.oneauth::after {

    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #000014;
    z-index: 1;
    left: calc(57% - 70px);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    top: 0;
    bottom: 0;
    margin: auto
}

.lang-ar .content-wrap.oneauth::after {

    right: 20%;
    left: auto
}

.content-wrap.oneauth ul.oneauth-feature {

    display: flex;
    flex-wrap: wrap;
    margin-top: 35px;
    overflow: unset;
    transform: scale(0.6)
}

.content-wrap.oneauth ul.oneauth-feature li {

    width: 95px;
    height: 100px;
    margin-right: 35px;
    margin-bottom: 15px;
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/directory/direc-sprite-icons-2x.png);
    background-size: auto 110px;
    background-repeat: no-repeat;
    overflow: unset;
    position: absolute;
    transition: all 1s ease;
    opacity: 0
}

.content-wrap.oneauth ul.oneauth-feature li:nth-child(1) {

    background-position: -249px 0;
    background-size: auto 100px;
    left: -180px;
    top: -230px;
    transform: translate(302px, 370px)
}

.content-wrap.oneauth ul.oneauth-feature li:nth-child(2) {

    background-position: -349px 0;
    background-size: auto 100px;
    right: -180px;
    top: -280px;
    transform: translate(-277px, 430px)
}

.content-wrap.oneauth ul.oneauth-feature li:nth-child(3) {

    background-position: -448px 0;
    background-size: auto 100px;
    left: -320px;
    top: 100px;
    transform: translate(437px, 10px)
}

.content-wrap.oneauth ul.oneauth-feature li:nth-child(4) {

    background-position: -601px -6px;
    width: 134px;
    right: -330px;
    top: 170px;
    transform: translate(-400px, -100px)
}

.content-wrap.oneauth.middle-animated ul.oneauth-feature li {
    transform: translate(0, 0);

    opacity: 1
}

.oneauth .img-sec {

    width: 50%;
    padding: 150px 100px 0 0
}

.img-sec .oneauth {

    position: absolute;
    width: 100%;
    text-align: center;
    top: 120px
}

.img-sec .oneauth h4 {

    font-size: 19px;
    margin-bottom: 6px;
    line-height: 1
}

.img-sec .txt-wrap {

    margin-top: 80px
}

.lang-ar .img-sec .txt-wrap * {

    text-align: center
}

.img-sec .oneauth p {

    font-size: 13px;
    width: 100%;
    margin: 0
}

.auth-img {

    position: relative
}

.auth-img em {

    position: absolute;
    border-radius: 50%;
    -webkit-border-radius: 50%
}

.auth-img em,
.oneauth-icon {

    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    background-color: #eceaff;
    border-radius: 100%;
    -webkit-border-radius: 100%
}

.auth-img .zd-circle-1 {

    width: 100px;
    height: 100px;
    background-color: #3e4078;
    z-index: 99;
    transform: scale(0.8);
    top: -10px;
    animation: ripple 2s 1s ease-out infinite
}

.auth-img .zd-circle-2 {

    width: 100px;
    height: 100px;
    background-color: #3e4078;
    z-index: 98;
    transform: scale(0.8);
    animation: ripple 2s ease-out infinite;
    top: -10px
}

.oneauth-icon {

    width: 50px;
    height: 50px;
    /*! background-color: red; */
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/directory/direc-sprite-icons-2x.png);
    background-size: auto 52px;
    background-position: -75px -2px;
    z-index: 99;
    position: absolute;
    transform: translateY(-10%)
}

.oneauth .cont-sec {
    width: 50%;
    box-sizing: border-box;
    padding: 60px 0 60px 100px;

    color: white
}

.lang-ar .oneauth .cont-sec {

    padding-left: 0;
    padding-right: 60px
}

.oneauth .img-sec,
.oneauth .cont-sec {

    position: relative;
    z-index: 2
}

.oneauth .img-sec {

    /*! opacity:0; */

}

.bottom-animated.oneauth .img-sec {

    opacity: 1;
    transition: all .5s .5s
}

.oneauth .cont-sec p {

    max-width: 100%
}

.zp-mobile-section {

    padding: 100px 0
}

.zp-mobile-section .content-wrap {

    max-width: 1100px
}

.zd-mobile-wrap {

    display: flex;
    align-items: center
}

.zright-wrap {

    width: 55%;
    padding: 0 0 0 30px
}

.m-apps-poster-img img {

    border: 3px solid;
    border-radius: 30px;
    -webkit-border-radius: 30px
}

.md1 {

    margin: 50px 40px 0 0
}

.m-apps-poster-img img.md2 {

    border-color: #ccc
}

.m-apps-poster-img {

    display: flex
}

.zleft-wrap {

    width: 45%
}

.zleft-wrap p {

    max-width: 400px;
    margin: 0 0 30px
}

.zbtm-section {

    background: #fcf7ec;
    text-align: center;
    padding: 60px 0 100px
}

.zbtm-section p {

    max-width: 500px;
    margin: 0 auto
}

.bot-wrap>p {

    margin: 20px auto 60px
}

.bot-wrap h5 {

    color: #014e41;
    font-size: 17px;
    opacity: 0
}

.bot-wrap h5.in-view {

    opacity: 1;
    transition: all .5s
}

#scrol-ani .content-wrap,
.zd-icon-compet {

    display: flex;
    flex-wrap: wrap;
    overflow: unset
}

#scrol-ani .content-wrap>div {

    position: relative
}

#scrol-ani .content-wrap>.cont-wrap {

    width: 45%
}

#scrol-ani .content-wrap>.image-wrap {

    width: 55%
}

.zd-icon-compet {

    margin: 30px 0 100px
}

.cta-wrap.in-view p+p {

    margin-top: 35px
}

.intgration ul {

    text-align: center;
    width: 100%;
    position: relative;
    height: 200px;
    margin: 60px auto 80px
}

.intgration ul li {

    display: inline-block;
    position: absolute;
    padding-top: 64px;
    min-width: 80px;
    text-align: center;
    font-size: 15px;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.intgration ul li.zcliq.zhome::before,
.intgration ul li::after,
.intgration ul li.zcliq.zhome span::after,
.cont ul li::before,
.right-img .cont-wrap .cont h2::before,
.left-img .cont-wrap .cont h2::before {

    content: "";
    position: absolute
}

.right-img .cont-wrap .cont h2::before,
.left-img .cont-wrap .cont h2::before {

    width: 48px;
    height: 48px;
    top: -65px;
    left: 0
}

.intgration ul li.zcliq.zhome::before,
.intgration ul li::after {

    content: "";
    position: absolute;
    width: 40px;
    height: 1px;
    border-bottom: 1px solid #0a0000
}

.intgration ul li.zcliq.zhome::before {

    left: -20px
}

.intgration ul li.zcliq.zhome::after {

    right: -20px
}

.intgration ul li.zcliq.zhome::before,
.intgration ul li.zcliq.zhome::after {

    top: -40px;
    bottom: 0;
    margin: auto
}

.intgration ul li::after {

    top: 29px;
    margin: auto
}

.intgration ul li:nth-child(-n+4)::after {

    left: -46px
}

.intgration ul li:nth-last-child(-n+4)::after {

    right: -40px
}

.intgration ul li.zcliq.zhome span::after {

    background: url(//cdn.zoho.com.cn/sites/zweb/images/directory/directory-icon1.png) no-repeat left top;
    background-size: auto 65px;
    top: 0;
    bottom: 35px;
    width: 65px;
    height: 65px;
    left: 0;
    right: 0;
    margin: auto
}

li.zcliq.zhome {

    width: 200px;
    padding-top: 80px;
    transform: scale(0);
    transition: all .5s
}

.intgration ul li:not(.zhome)::before,
.intgration ul li.zcliq.zhome span::before {

    content: "";
    position: absolute;
    width: 64px;
    height: 64px;
    left: 0;
    right: 0;
    top: 0;
    margin: auto
}

.intgration ul li:not(.zhome)::before {

    box-sizing: border-box;
    background: url(//cdn.zoho.com.cn/sites/zweb/images/commonroot/integration-icons-sprite-2x.png) no-repeat left top;
    background-size: 1600px auto
}

.intgration ul li.zcliq.zhome span::before {

    width: 160px;
    height: 160px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    box-shadow: 0 0 15px #dfdfdf
}

.intgration ul li.zcliq.zhome span {
    display: block;

    padding-top: 100px
}

.intgration ul li.dropbox,
.intgration ul li.crashlytics,
.intgration ul li.mailchimp,
.intgration ul li.trello {

    right: unset;
    transform: translate(75%, 25%);
    opacity: 0;
    transition: all 1s cubic-bezier(0.47, 0, 0.75, 0.72)
}

.intgration ul li>em {

    width: 10px;
    top: 24px;
    height: 10px;
    background-color: #000;
    display: inline-block;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    position: absolute
}

.intgration ul li.dropbox>em {

    left: -54px
}

.intgration ul li.zpeople>em {

    right: -44px
}

.intgration ul li.dropbox {

    left: 0;
    top: 0
}

.intgration ul li.crashlytics {

    left: 11%
}

.intgration ul li.mailchimp {

    left: 22%
}

.intgration ul li.trello {

    left: 33%
}

.intgration ul li.zendesk {

    right: 33%
}

.intgration ul li.zcrm {

    right: 22%
}

.intgration ul li.zdesk {

    right: 10%
}

.intgration ul li.zpeople {

    right: 0
}

.intgration ul li.dropbox::before {

    background-position: -832px 0
}

.intgration ul li.crashlytics::before {

    background-position: -1475px -324px
}

.intgration ul li.mailchimp::before {

    background-position: -770px 0
}

.intgration ul li.trello::before {

    background-position: -575px 0
}

.intgration ul li.zendesk,
.intgration ul li.zcrm,
.intgration ul li.zdesk,
.intgration ul li.zpeople {

    left: unset;
    transform: translate(-75%, 25%);
    opacity: 0;
    transition: all 1s cubic-bezier(0.47, 0, 0.75, 0.72)
}

.animated.intgration li.zcliq.zhome {

    transform: scale(1)
}

.animated.intgration ul li.dropbox,
.animated.intgration ul li.zpeople,
.animated.intgration ul li.crashlytics,
.animated.intgration ul li.zdesk,
.animated.intgration ul li.mailchimp,
.animated.intgration ul li.zcrm,
.animated.intgration ul li.trello,
.animated.intgration ul li.zendesk {
    transform: translate(0, 25%);

    opacity: 1
}

.animated.intgration ul li.dropbox,
.animated.intgration ul li.zpeople {

    transition-delay: 1s
}

.animated.intgration ul li.crashlytics,
.bottom-animated.intgration ul li.zdesk {

    transition-delay: .8s
}

.animated.intgration ul li.mailchimp,
.bottom-animated.intgration ul li.zcrm {

    transition-delay: .6s
}

.animated.intgration ul li.trello,
.animated.intgration ul li.zendesk {

    transition-delay: .4s
}

.intgration ul li.zendesk::before {

    background-position: -64px -193px
}

.intgration ul li.zcrm::before {

    background-position: -1540px -324px
}

.intgration ul li.zdesk::before {

    background-position: -126px -133px
}

.intgration ul li.zpeople::before {

    background-position: -1088px -66px
}

li.in-view {

    transform: rotate(0) scale(1);

    opacity: 1
}

.body-umain .banner .cont-sign>.banner-cont-wrap {

    padding-right: 0;
    margin: auto
}

.body-umain .zwc-ctabtns p {

    display: block
}

.body-umain .banner .cont-sign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    position: relative;
    z-index: 4
}

.body-umain .banner .cont-sign h1+p {

    margin-left: auto;
    text-align: center;
    margin-bottom: 40px;
    margin-right: auto
}

.body-umain .banner .cont-sign {

    justify-content: center
}

.body-umain .banner .content-wrap {

    text-align: center
}

.body-umain .banner .cont-sign>.banner-cont-wrap {

    padding-right: 0;
    margin: auto;
    width: 80%
}

.green-badge::before {

    position: absolute;
    content: "";
    width: 100%;
    height: 260px;
    top: -170px
}

.body-umain .green-badge::before {

    height: 200px;
    top: -179px
}

.zw-product-header {

    background: #fbf7ec
}

.contracts-cta-center .watch-btn:after {

    border-left: 9px solid #3546c9;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    left: 13px;
    top: 17px
}

.watch-btn:after {

    left: 14px;
    top: 18px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #226db4;

}

.watch-btn:after,
.watch-btn:before {

    position: absolute;
    content: ''

}

.watch-btn:before {

    width: 32px;
    height: 32px;
    border: 2px solid #226db4;
    left: 0;
    top: 7px;
    border-radius: 100%
}

span.act-btn.watch-btn.vimvideo {

    padding: 10px 0 10px 39px;
    color: #226db4;

}

a.act-btn.talkus {

    border: 2px solid #333;
    color: #333;

}

.zwc-ctabtns {

    display: flex;
    gap: 10px;

}

.zwc-featpoints {

    display: none;

}

.zwc-featpoints ul {

    position: relative;
    margin-bottom: 30px;
    display: flex;
    flex-flow: wrap;

}

.zwc-featpoints ul li {

    width: 100%;
    max-width: 48%;
    padding-left: 23px;
    position: relative;
    padding-bottom: 17px;
    text-align: left;

}

.body-umain .zwc-ctabtns {

    justify-content: center;

}

.body-umain .zwc-featpoints ul li {

    width: 100%;
    max-width: 20%;

}

.zwc-featpoints ul li:before {

    content: '';
    position: absolute;
    background: #09793b;
    width: 15px;
    height: 15px;
    top: 6px;
    left: 0;
    border-radius: 100px;

}

.zwc-featpoints ul li:after {

    content: '';
    position: absolute;
    left: 6px;
    top: 7px;
    height: 9px;
    width: 5px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(40deg);

}

.i18n-ar .brown-begde h4:after {
    right: 0;
    left: unset;
}

.i18n-ar .zd-icon-mobile {
    right: 21.9%;
    left: unset;
}

.i18n-ar .zd-icon-ntag {
    right: 360px;
    left: unset;
}

.i18n-ar .banner-image ul .zd-sign {
    right: -26px;
    left: unset;
}

.i18n-ar .banner-image-wrap span ul {
    left: 32px;
    right: unset;
}

.i18n-ar .banner-image-wrap span ul li {
    margin-left: 7px;
    margin-right: 7px;
}

.i18n-ar .zd-icon-type li {
    text-align: center;
    padding: 5px 80px 5px 50px;
}

.i18n-ar .zgo-img {
    border-radius: 20px 0 0 20px;
}

.i18n-ar .zgo-img:before {
    border-radius: 0 10px 10px 0;
    left: 0;
    right: 0;
}

.i18n-ar .content-wrap.oneauth::after {
    right: calc(57% - 70px);
    left: unset;
}

.i18n-ar .content-wrap.oneauth ul.oneauth-feature li {
    margin-left: 35px;
    margin-right: unset;
}

.i18n-ar .oneauth .img-sec {
    padding: 150px 0 0 100px;
}

.i18n-ar .auth-img em,
.i18n-ar .oneauth-icon {
    left: 0;
    right: 0;
}

.i18n-ar .oneauth .cont-sec {
    padding: 60px 100px 60px 0;
}

.i18n-ar .zright-wrap {
    padding: 0 30px 0 0;
}

.i18n-ar .md1 {
    margin: 50px 0 0 40px;
}

.i18n-ar .intgration ul {
    text-align: center;
}

.i18n-ar .intgration ul li {
    text-align: center;
    left: 0;
    right: 0;
}

.i18n-ar .right-img .cont-wrap .cont h2::before,
.i18n-ar .left-img .cont-wrap .cont h2::before {
    right: 0;
    left: unset;
}

.i18n-ar .intgration ul li.zcliq.zhome::before {
    right: -20px;
    left: unset;
}

.i18n-ar .intgration ul li.zcliq.zhome::after {
    left: -20px;
    right: unset;
}

.i18n-ar .intgration ul li:nth-child(-n+4)::after {
    right: -46px;
    left: unset;
}

.i18n-ar .intgration ul li:nth-last-child(-n+4)::after {
    left: -40px;
    right: unset;
}

.i18n-ar .intgration ul li.zcliq.zhome span::after {
    left: 0;
    right: 0;
}

.i18n-ar .intgration ul li:not(.zhome)::before,
.i18n-ar .intgration ul li.zcliq.zhome span::before {
    left: 0;
    right: 0;
}

.i18n-ar .intgration ul li.dropbox,
.i18n-ar .intgration ul li.crashlytics,
.i18n-ar .intgration ul li.mailchimp,
.i18n-ar .intgration ul li.trello {
    transform: translate(-75%, 25%);
    left: unset;
    right: unset;
}

.i18n-ar .intgration ul li.dropbox>em {
    right: -54px;
    left: unset;
}

.i18n-ar .intgration ul li.zpeople>em {
    left: -44px;
    right: unset;
}

.i18n-ar .intgration ul li.dropbox {
    right: 0;
    left: unset;
}

.i18n-ar .intgration ul li.crashlytics {
    right: 11%;
    left: unset;
}

.i18n-ar .intgration ul li.mailchimp {
    right: 22%;
    left: unset;
}

.i18n-ar .intgration ul li.trello {
    right: 33%;
    left: unset;
}

.i18n-ar .intgration ul li.zendesk {
    left: 33%;
    right: unset;
}

.i18n-ar .intgration ul li.zcrm {
    left: 22%;
    right: unset;
}

.i18n-ar .intgration ul li.zdesk {
    left: 10%;
    right: unset;
}

.i18n-ar .intgration ul li.zpeople {
    left: 0;
    right: unset;
}

.i18n-ar .body-umain .banner .cont-sign>.banner-cont-wrap {
    padding-left: 0;
    padding-right: unset;
}

.i18n-ar .body-umain .banner .cont-sign h1+p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.i18n-ar .body-umain .banner .cont-sign>.banner-cont-wrap {
    padding-left: 0;
    padding-right: unset;
}

.i18n-ar .contracts-cta-center .watch-btn:after {
    border-right: 9px solid #3546c9;
    border-left: unset;
    right: 13px;
    left: unset;
}

.i18n-ar .watch-btn:after {
    border-right: 7px solid #226db4;
    border-left: unset;
    right: 14px;
    left: unset;
}

.i18n-ar .watch-btn:before {
    right: 0;
    left: unset;
}

.i18n-ar span.act-btn.watch-btn.vimvideo {
    padding: 10px 39px 10px 0;
}

.i18n-ar .zwc-featpoints ul li {
    text-align: right;
    padding-right: 23px;
    padding-left: unset;
}

.i18n-ar .zwc-featpoints ul li:before {
    right: 0;
    left: unset;
}

.i18n-ar .zwc-featpoints ul li:after {
    border-left: 2px solid #fff;
    border-right: unset;
    right: 6px;
    left: unset;
}

.i18n-ar .custom-cta {
    text-align: center;
}

.i18n-ar .custom-cta * {
    text-align: center;
}

.i18n-ar .banner-image,
.i18n-ar .content-wrap.int-wrap,
.i18n-ar .img-sec .oneauth,
.i18n-ar .zbtm-section,
.i18n-ar .body-umain .banner .content-wrap {
    text-align: center;
}

.i18n-ar.umain h1 {
    text-align: center;
}

.i18n-ar .banner-image *,
.i18n-ar .content-wrap.int-wrap *,
.i18n-ar .img-sec .oneauth *,
.i18n-ar .zbtm-section *,
.i18n-ar .body-umain .banner .content-wrap * {
    text-align: center;
}

@media screen and (min-width: 1600px) {

    .banner-vid {
        bottom: 0
    }

    .content-wrap.oneauth::after {
        width: 1800px
    }

}

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

    .banner-vid {
        bottom: -35px
    }

    .banner-image::before {
        width: 100%;
        height: 726px;
        left: 0;
        background-size: contain;
        top: 7px
    }

    .green-badge .content-wrap {
        padding-top: 0
    }

    .banner-image>ul {
        width: 120%
    }

    .zd-icon-mobile {
        left: 21%
    }

    .loaded .zd-icon-comp {
        top: -1%;
        right: 26%
    }

    .intgration ul li span {
        font-size: 12px
    }

    .intgration ul li::after,
    .intgration ul li.zcliq.zhome::before,
    .intgration ul li em {
        display: none
    }

    .i18n-ar .banner-image::before {
        right: 0;
        left: unset;
    }

    .i18n-ar .zd-icon-mobile {
        right: 21%;
        left: unset;
    }

    .i18n-ar .loaded .zd-icon-comp {
        left: 26%;
        right: unset;
    }
}

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

    .banner .content-wrap {
        max-width: 1100px;
        padding-top: 30px;
        padding-bottom: 50px
    }

    .banner-vid {
        bottom: 100px
    }

}

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

    .brown-begde .inner-cont-wrap li {
        width: 530px
    }

}

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

    h1 {
        font-size: 42px;
        margin-bottom: 20px
    }

    .banner-image {
        display: none
    }

    .green-badge .content-wrap {
        padding-top: 80px
    }

    .green-badge::before {
        display: none
    }

    .oneauth .cont-sec {
        padding: 60px 20px 60px 50px
    }

    .zgo-img {
        margin: 0 0 0 auto
    }

    .zd-mobile-wrap {
        flex-direction: column;
        max-width: 560px;
        margin: 0 auto
    }

    .zleft-wrap {
        width: 100%;
        text-align: center;
        max-width: 450px;
        margin: 0 auto
    }

    .zleft-wrap p {
        max-width: 100%;
        margin: 0 auto 30px
    }

    .zright-wrap {
        width: 100%;
        padding: 40px 0 0 0
    }

    .i18n-ar .oneauth .cont-sec {
        padding: 60px 50px 60px 20px;
    }

    .i18n-ar .zgo-img {
        margin: 0 auto 0 0;
    }

    .i18n-ar .zd-mobile-wrap {
        margin: 0 auto;
    }

    .i18n-ar .zleft-wrap {
        margin: 0 auto;
    }

    .i18n-ar .zleft-wrap p {
        margin: 0 auto 30px;
    }

    .i18n-ar .zright-wrap {
        padding: 40px 0 0 0;
    }

    .i18n-ar .zleft-wrap {
        text-align: center;
    }

    .i18n-ar .zleft-wrap * {
        text-align: center;
    }
    .brown-begde .cont-wrap li {
        width: 100%;
        max-width: 400px;
    }
}

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

    .lang-ar.non-umain .banner .cont-sign>.banner-cont-wrap * {
        text-align: center
    }

    #block-system-main p {
        line-height: 1.5
    }

    .body-umain .zwc-featpoints ul li {
        width: 100%;
        max-width: 30%;
    }

    .banner .cont-sign .zwc-ctabtns p {
        display: block;
        margin-bottom: 0;
    }

    .zd-icon-type h3 {
        font-size: 28px
    }

    .zd-icon-type li.in-view>span {
        margin-bottom: 20px
    }

    h2 {
        font-size: 38px
    }

    .inner-cont-wrap.attach {
        bottom: 420px
    }

    .banner .cont-sign>.banner-cont-wrap,
    .banner .cont-sign .signup-form-wrap {
        width: 100%;
        text-align: center;
        max-width: 720px;
        margin: auto;
        padding-right: 0
    }

    .zwc-ctabtns {
        justify-content: center;
    }

    .image-wrap ul li:nth-child(1) img {
        position: relative;
        top: -120px;
    }

    .watch-btn:before {
        top: 5px;
    }

    .watch-btn:after {
        top: 16px;
    }

    .banner .cont-sign .signup-form-wrap {
        display: none
    }

    .banner-image::before,
    .banner-image>ul {
        display: none
    }

    .banner .content-wrap.banner-image-wrap {
        padding-top: 0
    }

    .zwc-featpoints ul li,
    .body-umain .zwc-featpoints ul li {
        text-align: left;
        width: 100%;
        max-width: 32%;
    }

    .body-umain .banner .content-wrap {
        padding-bottom: 50px;
        padding-top: 30px
    }

    .banner .content-wrap {
        padding-bottom: 90px;
    }

    .banner-image-wrap span {
        top: 0
    }

    .green-badge .content-wrap {
        padding: 80px 0 80px
    }

    .green-badge {
        padding-top: 0px
    }

    .brown-begde {
        background-color: #8b630c;
        padding: 40px 0 40px
    }

    .inner-cont-wrap.fixed {
        top: 100px
    }

    .brown-begde li.active img {
        transform: translateY(60px);
        z-index: 1
    }

    .brown-begde .inner-cont-wrap li {
        width: 410px
    }

    .brown-begde .cont-wrap li {
        height: 390px;
        max-width: 400px
    }

    #block-system-main .brown-begde p {
        font-size: 18px;
        max-width: 74%
    }

    .zd-icon-type li {
        padding: 5px 20px
    }

    .bottom-animated.intgration li.zcliq.zhome {
        transform: scale(0.6)
    }

    .intgration li.zcliq.zhome span {
        font-size: 18px
    }

    .intgration ul li.dropbox,
    .intgration ul li.crashlytics,
    .intgration ul li.mailchimp,
    .intgration ul li.trello {
        transform: translate(75%, 25%) scale(0.8)
    }

    .bottom-animated .intgration ul li.dropbox,
    .bottom-animated .intgration ul li.zpeople,
    .bottom-animated .intgration ul li.crashlytics,
    .bottom-animated .intgration ul li.zdesk,
    .bottom-animated .intgration ul li.mailchimp,
    .bottom-animated .intgration ul li.zcrm,
    .bottom-animated .intgration ul li.trello,
    .bottom-animated .intgration ul li.zendesk {
        transform: translate(0, 17%) scale(0.8)
    }

    .bottom-animated .intgration li.zcliq.zhome {
        transform: translate(0, -2%) scale(0.7)
    }

    .intgration ul {
        margin-bottom: 30px
    }

    .content-wrap.oneauth {
        flex-direction: column-reverse
    }

    .content-wrap.oneauth::after {
        display: none
    }

    .zgo-img {
        margin: 0 auto
    }

    .oneauth .img-sec {
        width: 100%;
        padding: 150px 0 0 0
    }

    .oneauth .cont-sec {
        width: 100%;
        padding: 50px 0 20px;
        text-align: center;
        max-width: 600px
    }

    .zleft-wrap {
        max-width: 400px
    }

    .i18n-ar .banner .cont-sign>.banner-cont-wrap,
    .i18n-ar .banner .cont-sign .signup-form-wrap {
        margin: auto;
        padding-left: 0;
        padding-right: unset;
    }

    .i18n-ar .zwc-featpoints ul li,
    .i18n-ar .body-umain .zwc-featpoints ul li {
        text-align: right;
    }

    .i18n-ar .green-badge .content-wrap {
        padding: 80px 0 80px;
    }

    .i18n-ar .brown-begde {
        padding: 40px 0 40px;
    }

    .i18n-ar .zd-icon-type li {
        padding: 5px 20px;
    }

    .i18n-ar .intgration ul li.dropbox,
    .i18n-ar .intgration ul li.crashlytics,
    .i18n-ar .intgration ul li.mailchimp,
    .i18n-ar .intgration ul li.trello {
        transform: translate(-75%, 25%) scale(0.8);
    }

    .i18n-ar .bottom-animated .intgration ul li.dropbox,
    .i18n-ar .bottom-animated .intgration ul li.zpeople,
    .i18n-ar .bottom-animated .intgration ul li.crashlytics,
    .i18n-ar .bottom-animated .intgration ul li.zdesk,
    .i18n-ar .bottom-animated .intgration ul li.mailchimp,
    .i18n-ar .bottom-animated .intgration ul li.zcrm,
    .i18n-ar .bottom-animated .intgration ul li.trello,
    .i18n-ar .bottom-animated .intgration ul li.zendesk {
        transform: translate(0, 17%) scale(0.8);
    }

    .i18n-ar .bottom-animated .intgration li.zcliq.zhome {
        transform: translate(0, -2%) scale(0.7);
    }

    .i18n-ar .zgo-img {
        margin: 0 auto;
    }

    .i18n-ar .oneauth .img-sec {
        padding: 150px 0 0 0;
    }

    .i18n-ar .oneauth .cont-sec {
        padding: 50px 0 20px;
    }

    .i18n-ar .banner .cont-sign>.banner-cont-wrap,
    .i18n-ar .banner .cont-sign .signup-form-wrap,
    .i18n-ar .oneauth .cont-sec {
        text-align: center;
    }

    .i18n-ar .banner .cont-sign>.banner-cont-wrap *,
    .i18n-ar .banner .cont-sign .signup-form-wrap *,
    .i18n-ar .oneauth .cont-sec * {
        text-align: center;
    }
    .zwc-ctabtns {
        flex-wrap: wrap;
        justify-content: center;
    }
    .brown-begde p>span { 
        font-size: 18px;
    }
}

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

    h2 {
        font-size: 32px
    }

    .non-umain .banner .cont-sign>.banner-cont-wrap {
        margin-top: 20px;
        margin-bottom: 20px
    }

    .body-umain .banner .content-wrap {
        padding-top: 50px;
        padding-bottom: 60px;
    }

    .banner .content-wrap.banner-image-wrap {
        max-width: 480px
    }

    .brown-begde h4::after,
    .lang-ar .brown-begde h4:after {
        left: 0;
        right: 0;
        margin: auto
    }

    .banner-image-wrap span ul {
        transform: scale(0.7);
        top: 60px;
        right: -30px
    }

    .body-umain .banner .cont-sign>.banner-cont-wrap {
        width: 100%
    }

    .zd-icon-compet li {
        margin-right: 30px
    }

    .bot-wrap .content-wrap {
        padding: 30px 0 30px
    }

    .lang-ar .bot-wrap .content-wrap * {
        text-align: center
    }

    .lang-ar .oneauth .cont-sec {
        padding: 0
    }

    .content-wrap.int-wrap {
        max-width: 500px
    }

    .content-wrap.oneauth ul.oneauth-feature {
        text-align: center;
        margin-top: 30px;
        margin-bottom: 40px;
        justify-content: center;
        max-width: 400px;
        margin: auto;
        width: 100%
    }

    .oneauth .cont-sec p {
        max-width: 100%
    }

    .content-wrap.oneauth ul.oneauth-feature li {
        width: 93px;
        margin: auto;
        transform: scale(0.8)
    }

    .content-wrap.oneauth ul.oneauth-feature li:nth-child(4) {
        width: 132px
    }

    .content-wrap.oneauth::after,
    .lang-ar .content-wrap.oneauth::after {
        width: 130%;
        left: -15%;
        right: 0;
        margin: auto;
        height: 70%;
        bottom: unset;
        top: 0
    }

    .zd-icon-type li {
        width: 100%
    }

    .zd-icon-type {
        max-width: 300px;
        margin: auto;
        text-align: center
    }

    .intgration {
        display: none
    }

    .mobile-design {
        display: block
    }

    .mobile-design img {
        max-width: 420px;
        width: 90%;
        margin-top: 20px
    }

    .zd-icon-type li:nth-child(1)>span {
        position: relative;
        left: 15px
    }

    .lang-ar .zd-icon-type li>span {
        margin-left: auto;
        margin-right: auto
    }

    #scrol-ani .content-wrap>div.image-wrap {
        display: none
    }

    #scrol-ani .content-wrap>.cont-wrap {
        max-width: 420px;
        margin: auto;
        text-align: center;
        width: 100%
    }

    #block-system-main .brown-begde p {
        max-width: 100%
    }

    #scrol-ani .content-wrap>div img {
        max-width: 400px;
        margin: auto;
        transform: translateY(0)
    }

    .brown-begde .cont-wrap li {
        height: unset;
        width: 100%;
        max-width: 100%
    }

    .brown-begde h4 {
        font-size: 32px
    }

    .brown-begde .cont-wrap li:not(:first-child) {
        margin-top: 60px
    }

    .brown-begde .cont-wrap li {
        max-width: 100% !important
    }

    .lang-ar .brown-begde .cont-wrap li * {
        text-align: center
    }

    .brown-begde li>span {
        position: relative;
        top: 0
    }

    .brown-begde .cont-wrap li img {
        display: block
    }

    .brown-begde {
        padding: 0
    }

    .zd-icon-compet {
        margin: 20px 0 90px
    }

    .oneauth .img-sec img {
        max-width: 360px;
        width: 90%;
        margin: auto
    }

    .img-sec .oneauth {
        top: 120px
    }

    .img-sec .txt-wrap {
        margin-top: 100px
    }

    .zleft-wrap {
        max-width: 480px
    }

    .zp-mobile-section {
        padding: 80px 0 40px
    }

    .zwc-featpoints ul li,
    .body-umain .zwc-featpoints ul li {
        text-align: left;
        width: 100%;
        max-width: 48%;
    }



    .body-umain .banner .cont-sign h1+p {
        margin-bottom: 30px;
    }

    .i18n-ar .brown-begde h4::after,
    .i18n-ar .lang-ar .brown-begde h4:after {
        margin: auto;
        left: 0;
        right: 0;
    }

    .i18n-ar .banner-image-wrap span ul {
        left: -30px;
        right: unset;
    }

    .i18n-ar .zd-icon-compet li {
        margin-left: 30px;
        margin-right: unset;
    }

    .i18n-ar .bot-wrap .content-wrap {
        padding: 30px 0 30px;
    }

    .i18n-ar .content-wrap.oneauth ul.oneauth-feature {
        margin: auto;
    }

    .i18n-ar .content-wrap.oneauth ul.oneauth-feature li {
        margin: auto;
    }

    .i18n-ar .content-wrap.oneauth::after,
    .i18n-ar .lang-ar .content-wrap.oneauth::after {
        margin: auto;
        left: 0;
        right: -15%;
    }

    .i18n-ar .zd-icon-type {
        margin: auto;
    }

    .i18n-ar .zd-icon-type li:nth-child(1)>span {
        right: 15px;
        left: unset;
    }

    .i18n-ar #scrol-ani .content-wrap>.cont-wrap {
        margin: auto;
    }

    .i18n-ar #scrol-ani .content-wrap>div img {
        margin: auto;
    }

    .i18n-ar .brown-begde {
        padding: 0;
    }

    .i18n-ar .zd-icon-compet {
        margin: 20px 0 90px;
    }

    .i18n-ar .oneauth .img-sec img {
        margin: auto;
    }

    .i18n-ar .zp-mobile-section {
        padding: 80px 0 40px;
    }

    .i18n-ar .zwc-featpoints ul li,
    .i18n-ar .body-umain .zwc-featpoints ul li {
        text-align: right;
    }

    .i18n-ar .content-wrap.oneauth ul.oneauth-feature,
    .i18n-ar .zd-icon-type,
    .i18n-ar #scrol-ani .content-wrap>.cont-wrap {
        text-align: center;
    }

    .i18n-ar .content-wrap.oneauth ul.oneauth-feature *,
    .i18n-ar .zd-icon-type *,
    .i18n-ar #scrol-ani .content-wrap>.cont-wrap * {
        text-align: center;
    }

}

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

    h1 {
        font-size: 27px
    }

    h2 {
        font-size: 24px;
    }

    .banner-cont-wrap p,
    p {
        font-size: 16px;
    }

    #block-system-main p {
        font-size: 17px
    }

    .zd-icon-type li span {
        transform: scale(0.9)
    }

    .content-wrap.oneauth ul.oneauth-feature {
        max-width: 320px
    }

    .zd-icon-type li.in-view *,
    .cta-wrap.in-view * {
        transform: translateY(0)
    }

    .img-sec .oneauth {
        transform: scale(0.8);
        top: 100px
    }

    .img-sec .oneauth h4 {
        font-size: 32px;
        margin-bottom: 10px
    }

    #block-system-main .img-sec .oneauth p {
        font-size: 14px
    }

    .banner-image-wrap span ul li:nth-child(4),
    .banner-image-wrap span ul li:nth-child(8) {
        display: none
    }

    .banner-image-wrap span ul {
        width: 400px;
        top: 20px;
        right: -60px
    }

    .green-badge .content-wrap {
        padding-top: 70px;
        padding-bottom: 50px
    }

    #block-system-main .brown-begde p,
    .brown-begde p>span {
        font-size: 16px
    }

    .bot-wrap .content-wrap {
        text-align: center;
        width: 80%;
        overflow: revert
    }

    .lang-ar .content-wrap.oneauth::after {
        left: auto;
        right: auto
    }

    .zd-icon-compet {
        text-align: center;
        justify-content: center
    }

    .zd-icon-compet li>span {
        left: 0;
        right: 0;
        margin: auto;
        min-width: unset
    }

    .zd-icon-compet li {
        margin-right: 0;
        margin: 0 10px;
        height: 40px
    }

    .zd-icon-compet li:last-child {
        margin-left: 10px
    }

    .zd-icon-compet li>span {
        transform: translateX(-5px)
    }

    .zd-icon-compet li:nth-child(4) span,
    .zd-icon-compet li:nth-child(5) span {
        bottom: -39px
    }

    .m-apps-poster-img {
        display: grid;
        gap: 4%;
        grid-template-columns: 48% 48%
    }

    .zp-mobile-section {
        padding: 50px 0
    }

    .oneauth .img-sec {
        padding: 0
    }

    .zwc-featpoints ul li,
    .body-umain .zwc-featpoints ul li {
        text-align: left;
        width: 100%;
        max-width: 80%;
        margin: 0 auto;
    }

    .zgo-img {
        transform: scale(.8);
        transform-origin: center bottom
    }

    .content-wrap.oneauth ul.oneauth-feature li:nth-child(1) {
        top: -160px
    }

    .content-wrap.oneauth ul.oneauth-feature li:nth-child(2) {
        top: -120px
    }

    .content-wrap.oneauth ul.oneauth-feature li:nth-child(3) {
        left: -220px
    }

    .content-wrap.oneauth ul.oneauth-feature li:nth-child(4) {
        right: -240px
    }

    .oneauth .cont-sec p {
        max-width: 270px;
        margin: 0 auto 20px
    }

    .zleft-wrap h2 {
        max-width: 300px;
        margin: 0 auto 20px
    }

    .m-apps-poster-img img {
        border-radius: 15px
    }

    .zbtm-section {
        padding: 40px 0 70px
    }

    .zbtm-section h2 {
        max-width: 300px;
        margin: 0 auto 20px
    }

    .zbtm-section p {
        max-width: 380px
    }

    .zwc-ctabtns {
        gap: 20px;
    }

    .act-btn {
        padding: 8px 20px;
    }

    .banner .content-wrap {
        padding-bottom: 40px;
    }

    .i18n-ar .banner-image-wrap span ul {
        left: -60px;
        right: unset;
    }

    .i18n-ar .zd-icon-compet li>span {
        margin: auto;
        left: 0;
        right: 0;
    }

    .i18n-ar .zd-icon-compet li {
        margin: 0 10px;
        margin-left: 0;
        margin-right: unset;
    }

    .i18n-ar .zd-icon-compet li:last-child {
        margin-right: 10px;
        margin-left: unset;
    }

    .i18n-ar .zd-icon-compet li>span {
        transform: translateX(5px);
    }

    .i18n-ar .zp-mobile-section {
        padding: 50px 0;
    }

    .i18n-ar .oneauth .img-sec {
        padding: 0;
    }

    .i18n-ar .zwc-featpoints ul li,
    .i18n-ar .body-umain .zwc-featpoints ul li {
        text-align: right;
        margin: 0 auto;
    }

    .i18n-ar .content-wrap.oneauth ul.oneauth-feature li:nth-child(3) {
        right: -220px;
        left: unset;
    }

    .i18n-ar .content-wrap.oneauth ul.oneauth-feature li:nth-child(4) {
        left: -240px;
        right: unset;
    }

    .i18n-ar .oneauth .cont-sec p {
        margin: 0 auto 20px;
    }

    .i18n-ar .zleft-wrap h2 {
        margin: 0 auto 20px;
    }

    .i18n-ar .zbtm-section {
        padding: 40px 0 70px;
    }

    .i18n-ar .zbtm-section h2 {
        margin: 0 auto 20px;
    }

    .i18n-ar .act-btn {
        padding: 8px 20px;
    }

    .i18n-ar .bot-wrap .content-wrap,
    .i18n-ar .zd-icon-compet {
        text-align: center;
    }

    .i18n-ar .bot-wrap .content-wrap *,
    .i18n-ar .zd-icon-compet * {
        text-align: center;
    }
}

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

    .banner-image-wrap span ul {
        width: 360px;
        right: -45px
    }

    .zd-icon-compet li:last-child {
        display: none
    }

    .banner-image-wrap span ul li:nth-child(-n+4) {
        margin-bottom: 30px
    }

    .zd-icon-compet {
        text-align: center
    }

    .i18n-ar .banner-image-wrap span ul {
        left: -45px;
        right: unset;
    }

    .i18n-ar .zd-icon-compet {
        text-align: center;
    }

    .i18n-ar .zd-icon-compet * {
        text-align: center;
    }
}

@media only screen and (min-width: 481px) {

    .footer-sec-wrap {
        padding-bottom: 0;
        /* display: none */
    }

}

.custom-cta {

    background: #f0483e;
    color: #fff;
    display: inline-block;
    font-family: var(--zf-primary-semibold), sans-serif;
    padding: 8px 30px;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    border: 1px solid transparent;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1;
    font-size: 15px
}

@media screen and (min-width: 1100px) {

    .act-btn,
    .custom-cta {
        padding: 11px 32px;
        font-size: 18px
    }

    /*

  .footer-sec-wrap {

    display: none

  }
*/
    .i18n-ar .act-btn,
    .i18n-ar .custom-cta {
        padding: 11px 32px;
    }
}

@keyframes ripple {

    0% {
        opacity: 5.5;
        transform: scale(0.5)
    }

    100% {
        opacity: 0;
        transform: scale(1.4)
    }

}