.i18n-en h1 {
    font-size: 50px;
    line-height: 55px;
}

h1 {
    margin-bottom: 20px;
    letter-spacing: -0.6px;
    font-family: var(--zf-secondary-extrabold);
}

h2 {
    font-family: var(--zf-secondary-bold);
}

.i18n-en h2 {
    font-size: 38px;
    margin-bottom: 20px;
}

.common-section .content-wrap {
    max-width: 1280px;
}

.header-section {
    background: #1A1141;
    color: #fff;
    padding: 70px 0 100px 0;
    text-align: center;
    position: relative;
}

.zw-product-header {
    background: #1b1141;
}

h1+p {
    max-width: 900px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.zm-seo-header-left-img {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 22%;
}

.zm-seo-header-right-img {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    max-width: 25%;
}


/* zms-common-wrap */

.zms-common-wrap .zms-col.zms-col-left {
    width: 25%;
    position: relative;
}

.zca-role-section {
    margin-bottom: 120px;
}

.zms-common-wrap .zms-col.zms-col-right {
    width: 75%;
    padding-left: 5%;
}

.zms-col-left ul li {
    margin-bottom: 15px;
    cursor: pointer;
    padding: 6px 0;
    position: relative;
}

.zms-col-left ul {
    border-left: 1px solid rgb(112 112 112 / 20%);
    padding-left: 30px;
    position: sticky;
    top: 100px;
    margin-top: 120px;
}

.zms-col-left ul li.current {
    color: #385EFF;
    font-family: var(--zf-secondary-semibold);
}

.zms-col-left ul li.current:before {
    content: '';
    background: #385EFF;
    border-radius: 10px;
    height: 110%;
    width: 5px;
    position: absolute;
    left: -33px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.zms-common-wrap .content-wrap {
    display: flex;
    flex-wrap: wrap;
}

.zms-wrapper {
    padding: 70px;
}

.zca-role-section {
    background: #1A1141;
}

.zca-blue-sec {
    background: #1A1141;
    border-radius: 10px;
    color: #fff;
}
.zca-blue-sec h2 {
    color: #FFCE00;
}
footer {
    margin-top: 120px;
}

.zma-sec-icon {
    background: url(/sites/zweb/images/marketingautomation/zm-what-is-marketing-sprite.svg) no-repeat;
}

.zma-sec-icon1 {
    width: 35px;
    height: 35px;
    position: absolute;
    background-size: 280px auto;
    left: 0;
    bottom: 80px;
    background-position: 0 0;
}

.zma-sec-icon2 {
    width: 35px;
    height: 35px;
    position: absolute;
    background-size: 280px auto;
    right: 0;
    bottom: 120px;
    background-position: -37px 0px;
}

.header-section .content-wrap {
    position: relative;
}


/* zms-common-wrap end*/


/* zms-right-section */

.zms-invest-section .zms-wrapper {
    padding-top: 100px;
}


/* .zms-role-blocks {
    background: #FFF3C7 0% 0% no-repeat padding-box;
    box-shadow: 0px 4px 0px #EFD290;
    border-radius: 14px;
} */

.zms-role-each span {
    position: relative;
    display: block;
    width: 35px;
    height: 35px;
    margin: 0 auto;
    margin-bottom: 35px;
}

.zca-solution-section .zms-wrapper {
    min-height: 600px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    position: relative;
    text-align: center;
    margin-top: 120px;
    margin-bottom: 50px;
}

.zms-role-each {
    font-family: var(--zf-secondary-semibold);
    font-size: 14px;
    padding: 5px 15px 25px 15px;
    text-align: center;
    width: 150px;
    position: absolute;
    height: 156px;
    background: #FFF3C7 0% 0% no-repeat padding-box;
    border-radius: 14px;
    box-shadow: 0px 4px 0px #EFD290;
}

.zms-role-each span:before {
    content: '';
    width: 35px;
    height: 35px;
    position: absolute;
    background: url(/sites/zweb/images/marketingautomation/zm-what-is-marketing-sprite.svg) no-repeat;
    margin: auto;
    left: 0;
    right: 0;
    top: 25px;
    background-size: 280px auto;
}

.zms-role-each1 {
    left: 50px;
    top: 70px;
}

.zms-role-each2 {
    right: 50px;
    top: 70px;
    background: #D8E7FF 0% 0% no-repeat padding-box;
    box-shadow: 0px 4px 0px #C6D3E6;
}

.zms-role-each3 {
    left: 0;
    right: 0;
    margin: auto;
    top: 20px;
    background: #C5FAE8 0% 0% no-repeat padding-box;
    box-shadow: 0px 4px 0px #B5D9CD;
}

.zms-role-each4 {
    left: 50px;
    bottom: 70px;
    background: #FFD1CB 0% 0% no-repeat padding-box;
    box-shadow: 0px 4px 0px #E5C4C0;
}

.zms-role-each5 {
    right: 50px;
    bottom: 70px;
    background: #F0F5B3 0% 0% no-repeat padding-box;
    box-shadow: 0px 4px 0px #E4E6C9;
}

.zms-role-each6 {
    right: 0;
    margin: auto;
    bottom: 30px;
    left: 0;
    background: #DDCFFA 0% 0% no-repeat padding-box;
    box-shadow: 0px 4px 0px #C7BFD8;
}

.zca-solution-section .zms-wrapper h2 {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 15px;
    font-size: 36px;
}

.zms-role-each1 span:before {
    background-position: -73px 0px;
}

.zms-role-each2 span:before {
    background-position: -110px 0px;
}

.zms-role-each3 span:before {
    background-position: -146px 0px;
}

.zms-role-each4 span:before {
    background-position: -183px 0px;
}

.zms-role-each5 span:before {
    background-position: -221px 0px;
}

.zms-role-each6 span:before {
    background-position: -255px 0px;
    width: 27px;
}

.zca-automate-section {
    text-align: center;
    padding-top: 70px;
}

.zca-automate-section h2+p {
    max-width: 720px;
    margin: 0 auto;
    margin-bottom: 15px;
}

.zca-automate-block {
    display: flex;
    margin-top: 40px;
}

.zca-automate-each {
    box-shadow: 0px 4px 14px #0000001F;
    border-radius: 14px;
    background: #fff;
    width: 31%;
    padding: 40px 30px;
    text-align: left;
    margin: 1%;
}

.zca-automate-each h4 {
    font-size: 20px;
    font-family: var(--zf-secondary-bold);
}

.zca-automate-each p {
    font-size: 16px;
    margin-bottom: 0px;
}

.zca-automate-section .zms-wrapper {
    padding: 0;
}

.zca-lead-section .zms-wrapper {
    background: #E0F2FF;
    border-radius: 10px;
}

.zca-lead-section {
    margin-top: 100px;
}

.zca-lead-section h2 {
    font-size: 36px;
}

.zca-sales-section {
    margin-top: 20px;
}


/* zms-right-section-end */


/* animation code */

.transY1,
.transY2,
.transY3,
.transY4,
.transY5 {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: all 1s cubic-bezier(0.11, 0.16, 0.43, 0.86);
    transition: all 1s cubic-bezier(0.11, 0.16, 0.43, 0.86)
}

.zwe-om .transY1,
.zwe-om .transY2,
.zwe-om .transY3,
.zwe-om .transY4,
.zwe-om .transY5 {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.transY1 {
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms
}

.transY2 {
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms
}

.transY3 {
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms
}

.transY4 {
    -webkit-transition-delay: 800ms;
    transition-delay: 800ms
}

.transY5 {
    -webkit-transition-delay: 900ms;
    transition-delay: 900ms
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/*Right*/

@keyframes slideRight {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes slideRight {
    0% {
        visibility: hidden;
        opacity: 0;
        -webkit-transform: translateX(30px);
    }
    100% {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes slideRight {
    0% {
        visibility: hidden;
        opacity: 0;
        -moz-transform: translateX(30px);
    }
    100% {
        visibility: visible;
        opacity: 1;
        -moz-transform: translateX(0);
    }
}


/*slideUp*/

@keyframes slideUp {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes slideUp {
    0% {
        visibility: hidden;
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
    100% {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes slideUp {
    0% {
        visibility: hidden;
        opacity: 0;
        -moz-transform: translateY(-20px);
    }
    100% {
        visibility: visible;
        opacity: 1;
        -moz-transform: translateY(0);
    }
}


/*slideDown*/

@keyframes slideDown {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes slideDown {
    0% {
        visibility: hidden;
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
    100% {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes slideDown {
    0% {
        visibility: hidden;
        opacity: 0;
        -moz-transform: translateY(20px);
    }
    100% {
        visibility: visible;
        opacity: 1;
        -moz-transform: translateY(0);
    }
}


/*slideleft*/

@keyframes slideLeft {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes slideLeft {
    0% {
        visibility: hidden;
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
    100% {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes slideLeft {
    0% {
        visibility: hidden;
        opacity: 0;
        -moz-transform: translateX(-20px);
    }
    100% {
        visibility: visible;
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

.zca-mobile-ios {
    opacity: 0;
}

.zwe-ob .zca-header-banner {
    animation: slideLeft 0.8s ease-out 1s forwards;
}


/* animation code end*/


/* responsive */

@media screen and (max-width: 1440px) {
    .zm-seo-header-left-img {
        max-width: 20%;
    }
    .zm-seo-header-right-img {
        max-width: 25%;
    }
}

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

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

@media screen and (max-width: 1279px) {
    .zma-sec-icon1,
    .zma-sec-icon2 {
        display: none
    }
    .zm-seo-header-left-img,
    .zm-seo-header-right-img {
        display: none;
    }
    .zms-role-blocks {
        display: flex;
        flex-wrap: inherit;
        justify-content: space-around;
        margin-top: 25px;
    }
    .i18n-en h2 {
        font-size: 32px;
    }
    .zca-solution-section .zms-wrapper h2 {
        font-size: 34px;
    }
    .zca-solution-section .zms-wrapper {
        margin-top: 50px;
        margin-bottom: 0;
    }
    .zca-blue-sec {
        margin-bottom: 50px;
    }
    .zms-col-left ul li {
        font-size: 16px;
    }
    .zca-automate-each {
        width: 100%;
        margin: 0;
        margin-bottom: 25px;
    }
    .zca-automate-block {
        flex-wrap: wrap;
    }
    .zms-wrapper {
        padding: 60px;
    }
    .i18n-en h1 {
        font-size: 46px;
        line-height: 50px;
    }
    .zca-solution-section .zms-wrapper {
        padding-bottom: 30px;
    }
    .zca-automate-section {
        padding-top: 50px;
    }
}

@media screen and (max-width: 1199px) {
    .zms-col-left ul {
        top: 60px;
        margin-top: 80px;
    }
}

@media screen and (max-width: 1023px) {
    .zms-col-left ul {
        margin-top: 100px;
        top: 60px;
    }
    .zms-role-each {
        position: inherit;
        margin: 0;
        margin-bottom: 24px;
    }
}

@media screen and (max-width: 991px) {
    .i18n-en h2 {
        font-size: 32px;
    }
    .header-section {
        padding: 50px 0 90px 0;
    }
    .i18n-en h1 {
        font-size: 40px;
    }
    h1+p {
        max-width: 640px;
    }
    .zms-common-wrap .zms-col.zms-col-left,
    .zms-common-wrap .zms-col.zms-col-right {
        width: 100%;
        padding: 0;
    }
    .zms-col-left ul {
        padding: 0;
        border-left: none;
        text-align: center;
        position: inherit;
        margin-top: 80px;
        top: 0;
    }
    .zms-col-left ul li {
        display: inline-block;
        margin: 0 10px;
        margin-bottom: 10px;
    }
    .zms-col-left ul li.current {
        border-bottom: 1px solid;
    }
    .zms-col-left ul li.current:before,
    .zms-common-wrap .zms-col.zms-col-left {
        display: none;
    }
    .zms-wrapper {
        padding: 50px;
    }
    .zca-automate-section .zms-wrapper{
        padding: 0px 50px;
    }
    .zms-role-blocks {
        justify-content: center;
    }
    .zms-role-each {
        margin: 10px;
    }
    .zca-automate-section h2+p {
        max-width: 640px;
    }
    .i18n-en h2 {
        font-size: 30px;
    }
    footer {
        margin-top: 50px;
    }
    .zca-lead-section {
        margin-top: 80px;
    }
    .zca-solution-section .zms-wrapper {
        min-height: inherit;
    }
    .zca-automate-section {
        padding-top: 100px;
    }
}

@media screen and (max-width: 767px) {
    .header-section {
        padding: 30px 0 70px 0;
    }
    .i18n-en h1 {
        font-size: 38px;
        line-height: 1.2;
    }
    .zms-wrapper {
        padding: 40px 30px;
    }
    .zca-automate-section .zms-wrapper {
        padding: 0px 10px;
    }
    .i18n-en h2 {
        font-size: 28px;
    }
    .zca-blue-sec,
    .zca-lead-section .zms-wrapper {
        padding: 30px;
    }
    .zca-blue-sec h2,
    .zca-lead-section h2 {
        font-size: 26px;
    }
    .zca-automate-section {
        padding-top: 80px;
    }
    .zca-blue-sec{
        padding:0
    }
}

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

@media screen and (max-width: 480px) {
    .i18n-en h1 {
        font-size: 32px;
    }
    .zms-invest-section .zms-wrapper {
        padding-top: 80px;
    }
    .i18n-en h2 {
        font-size: 26px;
    }
    .zca-blue-sec h2,
    .zca-lead-section h2 {
        font-size: 24px;
    }
    .zca-lead-section .zms-wrapper {
        padding: 40px 30px;
    }
    .zca-solution-section .zms-wrapper h2 {
        font-size: 26px;
    }
}

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