:root {
    --section-gap: clamp(50px, 7vw, 100px);
    --title-mb: 60px;
    --h1-size: clamp(30px, 3.8vw, 56px);
    --h2-size: clamp(28px, 3.2vw, 48px);
    --h3-size: clamp(24px, 2.7vw, 40px);
    --h4-size: clamp(20px, 2.2vw, 32px);
    --h5-size: clamp(18px, 1.8vw, 24px);
    --light-bg-anchor-clr: #0047FF;
    --dark-bg-anchor-clr: #6691FF;
    --light-red-bg: #ffe6e6;
    --red-bg: #ac1c17;
    --blue-bg: #11355c;
}

/* header-section */

.zw-template-inner {
    text-wrap: pretty;
}

.header-section {
    padding: 100px 0 100px 0;
    background-color: var(--light-red-bg);
}

.header-section .header-wrap {
    display: flex;
}

.header-wrap .zwc-span-block {
    display: inline-block;
}

.header-section .header-wrap .column.right {
    width: 51%;
    padding-left: 5%;
}

.content-wrap {
    max-width: 1170px;
}

.i18n-en h1 {
    font-size: var(--h1-size);
    letter-spacing: -1px;
    line-height: calc(var(--h1-size) + 10px);
}

.header-section .header-wrap .column.left {
    width: 49%;
}

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

h1 {
    margin-bottom: 20px;
    font-family: var(--zf-primary-bold);
}

p {
    text-wrap: pretty;
}

.header-section .header-wrap .column.left p {
    line-height: 32px;
    max-width: 540px;
    margin-bottom: 25px;
    letter-spacing: -0.36px;
}

.header-section .act-btn.cta-btn {
    /* margin-right: 15px; */
}

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

.i18n-en .zwc-btn-wrap .act-btn {
    margin: 0;
}

.zwc-custom-btn {
    border: 2px solid #000;
    color: #000;
}

.zc-sms-women {
    max-width: 45%;
    margin-top: 10%;
    margin-right: 10%;
}

.zc-sms-men {
    max-width: 43%;
    margin: 0 auto;
    margin-right: 0;
    position: relative;
    top: -70px;
}

.header-img-wrap {
    width: 98%;
    position: relative;
    margin: 0 auto;
    max-width: 500px;
}

.zc-sms-contact-list {
    position: absolute;
    max-width: 27%;
    left: -13%;
    bottom: -5%;
}

.zc-sms-promocode {
    position: absolute;
    max-width: 35%;
    right: -13%;
    top: -40%;
    bottom: 0;
    margin: auto;
}

.sms-icon {
    background: url(/sites/zweb/images/campaigns/zc-sms-sprite-image.svg) no-repeat;
}

.head-icon1 {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 70px;
    left: -30px;
    background-size: 250px auto;
    background-position: -28px -10px;
}

.head-icon2 {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: -30px;
    background-size: 250px auto;
    background-position: -52px -10px;
}

.head-icon3 {
    background: url(/sites/zweb/images/campaigns/zc-sms-top-arrow.svg) no-repeat;
    width: 34%;
    height: 22%;
    position: absolute;
    top: 8%;
    left: 30%;
    background-size: contain;
}

/* header-section-end */
/* power up start*/
.zwc-power-up {
    padding-block: var(--section-gap);
    background: var(--blue-bg);
    color: #ffff;
}

.zwc-power-up>div {
    max-width: 880px;
    text-align: center;
}

.zwc-power-up h2 {
    max-width: 800px;
    margin-inline: auto;
}

/*power up end*/
/* message-section */

.common-section {
    padding: var(--section-gap) 0;
}

.message-section .content-wrap {
    max-width: 1280px;
    background: var(--light-red-bg);
    color: #000;
    padding: clamp(50px, 7vw, 100px) clamp(60px, 7.5vw, 120px);
    box-sizing: border-box;
    border-radius: 10px;
}

.i18n-en h2 {
    font-size: var(--h2-size);
    letter-spacing: -0.8px;
}

.message-section .table-wrap {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.message-section .table-wrap .column.left {
    padding-right: 5%;
}

.message-section h2 {
    margin-bottom: 20px;
}

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

.message-section .table-wrap .column.left p {
    max-width: 360px;
}

.message-section .table-wrap .column {
    width: 50%;
}

.message-wrap ul li {
    margin-bottom: 30px;
    position: relative;
}

/* .message-wrap ul li:before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    background: url(/sites/zweb/images/campaigns/zc-sms-sprite-image.svg) no-repeat;
    background-size: 200px auto;
    background-position: 1px -6px;
    left: -35px;
    top: 2px;
} */

.message-wrap ul li:last-child {
    margin-bottom: 0;
}

.common-section.message-section {
    padding-top: 20px;
}

/* message-section end*/
/* personalize-section */

.equal-section .table-wrap {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.personalize-section h2 {
    margin-bottom: 60px;
    max-width: 750px;
    margin-inline: auto;
    text-align: center;
}

.measure-section .table-wrap .right {
    padding-left: 5%;
    width: 60%;
}

.equal-section .table-wrap h2 {
    max-width: 430px;
    margin-bottom: 25px;
}

.equal-section .table-wrap .column.left {
    width: 40%;
}

.equal-wrap {
    position: relative;
    max-width: 90%;
    margin: 0 0 0 auto;
}

.equal-section .table-wrap .column.right {
    width: 60%;
}

.zc-sms-merge-tags {
    max-width: 95%;
    display: block;
    margin: 0 0 0 auto;
}

/* personalize-section end*/
/* automate-section */

.equal-section .table-wrap h2 {
    max-width: 360px;
    margin-bottom: 20px;
}

/* .auto-block {
    background: #FFF5E5;
    padding: 60px 60px;
    border-radius: 20px;
    border: 1px solid #f0e5d0;
    max-width: 520px;
    margin-inline: auto;
} */

.automate-section h2 {
    padding-top: 10px;
}

.common-section.automate-section {
    padding-top: 120px;
}

.automate-section .equal-wrap {
    margin: 0;
}

.automate-section .zc-sms-merge-tags {
    margin: 0 auto 0 0;
}

/* automate-section end*/
/* measure-section */

.measure-section {
    background: #F5F5F5;
    border-radius: 10px;
    margin: 0 150px;
}

.common-section.measure-section {
    margin-top: 40px;
}

.measure-section.equal-section .table-wrap h2 {
    max-width: 100%;
}

.measure-icon {
    width: 50px;
    height: 50px;
    display: block;
    margin-bottom: 25px;
    position: relative;
}

.measure-wrap {
    display: flex;
    padding-top: 10px;
}

.measure-box h3 {
    font-size: 22px;
    margin-bottom: 10px;
    line-height: 1;
}

.measure-icon1 {
    background: #d7cdfb;
    border-radius: 10px;
}

.measure-icon2 {
    background: #afe9ff;
    border-radius: 10px;
}

.measure-box p {
    font-size: 17px;
    margin-bottom: 0;
}

.measure-box {
    width: 46%;
}

.measure-box.measure-box1 {
    margin-right: 13%;
}

.measure-icon:before {
    content: "";
    background: url(/sites/zweb/images/campaigns/zc-sms-sprite-image.svg) no-repeat;
    background-size: 250px auto;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.measure-icon1:before {
    background-position: -187px 0px;
}

.measure-icon2:before {
    background-position: -219px 0px;
}

/* measure-section end*/
/* bottom-cta-section */

.bottom-cta-section {
    text-align: center;
    background: var(--light-red-bg);
}

.bottom-cta-section h2 {
    max-width: 830px;
    margin: 0 auto 20px;
    /* margin-bottom: 10px; */
}

/* bottom-cta-section end*/
.zwc-complaint {
    margin-block: var(--section-gap);
}

.zwc-complaint-head {
    max-width: 960px;
    margin-inline: auto;
    text-align: center;
}

.zwc-comp-box-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.zwc-comp-box-wrap>div {
    border-radius: 10px;
    background: var(--light-red-bg);
    flex: 1 1 calc(50% - 20px);
    padding: 40px 80px;
    position: relative;
    border: none;
}

.zwc-complaint-box h3 {
    text-align: center;
    margin-block: calc(var(--section-gap) / 2);
}

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

.zwc-comp-box-wrap h4 {
    position: relative;
}

.message-wrap li {
    padding-left: 35px;
}

.zwc-complaint-box h4::before,
.message-wrap ul li::before,
.zwc-tones::before {
    content: "";
    width: 22px;
    height: 22px;
    background: #41B452;
    position: absolute;
    left: -35px;
    top: 5px;
    border-radius: 50%;
}

.zwc-complaint-box h4::after,
.message-wrap ul li::after,
.zwc-tones::after {
    content: "";
    border: 1px solid #fff;
    border-width: 0 2px 2px 0;
    position: absolute;
    width: 6px;
    height: 12px;
    left: -27px;
    top: 9px;
    transform: rotate(45deg);
}

.message-section .message-wrap li::before {
    left: 0;
}

.message-section .message-wrap li::after {
    left: 8px;
}

.zwc-zia-tone .zwc-tones {
    padding-left: 25px;
}

.zwc-zia-tone .zwc-tones::before {
    width: 16px;
    height: 16px;
    left: 0;
}

.zwc-zia-tone .zwc-tones::after {
    width: 4px;
    height: 8px;
    left: 6px;
    top: 8px;
}

.zwc-power {
    background: var(--blue-bg);
    color: #fff;
    padding-block: var(--section-gap);
    text-align: center;
}

.zwc-step-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding-block: calc(var(--section-gap) / 2);
}

.zwc-step-box>div {
    text-align: left;
    /* flex: 1 1 calc(25% - 10px); */
    border-radius: 8px;
    /* border: 1px solid #284266; */
    background: #fff;
    padding: 50px;
    max-width: 350px;
    min-width: 280px;
}

.zwc-power .content-wrap {
    max-width: 1500px;
}

.zwc-power h2 {
    max-width: 830px;
    margin-inline: auto;
}

.zwc-power a {
    color: #fff;
    border-bottom: 1px solid #fff;
}

.zwc-scalable {
    background: var(--red-bg);
    color: #fff;
    width: 1280px;
    margin: 50px auto;
    padding: 50px 50px 30px;
    border-radius: 10px;
    text-align: center;
    max-width: 95%;
}

/* .zwc-scalable h2 {
    max-width: 620px;
    margin-inline: auto;
} */

.zwc-scalable span {
    font-style: italic;
    font-size: 18px;
    width: 100%;
    display: inline-block;
    margin-top: clamp(30px, 3.5vw, 50px);
}

.dark-btn {
    background: #fff;
    color: #000;
    padding: 16px 60px 16px 30px;
    border-radius: 30px;
    display: inline-block;
    position: relative;
    line-height: normal;
}

.dark-btn::before {
    content: "";
    position: absolute;
    width: 13px;
    height: 1px;
    background: #000;
    right: 38px;
    top: 27px;
}

.dark-btn::after {
    content: "";
    border: 1px solid #000;
    width: 7px;
    height: 7px;
    position: absolute;
    transform: rotate(45deg);
    border-width: 1px 1px 0 0;
    right: 38px;
    top: 24px;
}

.zwc-power h3 {
    font-size: 22px;
    color: var(--red-bg);
    letter-spacing: -0.44px;
    line-height: normal;
    padding-top: 70px;
}

.zwc-step-box p {
    color: #000;
}

.scroll-sec {
    position: relative;
    margin-top: 50px;
}

.scroll-sec:before {
    content: "";
    background: linear-gradient(to right,
            #fdfdfd 0%,
            #ffffff 50%,
            rgb(255 255 255 / 40%) 80%,
            rgb(237 237 155 / 10%) 100%);
    left: -5px;
    margin: auto;
    position: absolute;
    height: 100%;
    width: 50px;
    z-index: 1;
    top: 0;
}

.scroll-sec:after {
    content: "";
    background: linear-gradient(to left,
            #ffffff 0%,
            #ffffff 50%,
            rgb(255 255 255 / 40%) 80%,
            rgb(237 237 155 / 10%) 100%);
    right: -5px;
    margin: auto;
    position: absolute;
    height: 100%;
    width: 50px;
    z-index: 0;
    top: 0;
}

.scroll-more ul li {
    display: flex;
    align-items: center;
    border: 1px solid #E4E9EF;
    padding: 5px 60px;
    height: 92px;
}

.scroll-more ul li img {
    max-width: 550px;
    transition: ease all 0.5s;
}

.scroll-more ul {
    display: grid;
    grid-template-columns: max-content;
    grid-auto-flow: column;
    animation: marquee1 25s linear infinite;
}

.scroll-more ul,
.scroll-more2 ul {
    animation-play-state: running;
}

.scroll-more ul.paused,
.scroll-more2 ul.paused {
    animation-play-state: paused;
}

@keyframes marquee1 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes marquee2 {
    0% {
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        transform: translate3d(0%, 0, 0);
    }
}

.zwc-integrate {
    background: #fff;
    margin-bottom: var(--section-gap);
    max-width: 1070px;
    margin-inline: auto;
}

.zwc-integrate p {
    max-width: 630px;
    margin-inline: auto;
    text-align: center;
}

.zwc-integrate .content-wrap {
    overflow-x: hidden;
}

.scroll-more {
    align-items: center;
    gap: 10px;
    margin-block: 10px;
    display: grid;
    grid-template-columns: max-content;
    grid-auto-flow: column;
}

.scroll-more2 ul {
    animation-name: marquee2;
}

.zwc-integrate h2 {
    text-align: center;
}

.zwc-step-box h3 {
    position: relative;
}

.zwc-step-box h3::before {
    content: "";
    background: url("/sites/zweb/images/campaigns/sms-campaign/sms-sprite.svg");
    width: 53px;
    height: 52px;
    position: absolute;
    top: 0;
    background-size: 220px auto;
}

.zwc-step-box1 h3::before {
    background-position: -4px -7px;
}

.zwc-step-box2 h3::before {
    background-position: -59px -8px;
}

.zwc-step-box3 h3::before {
    background-position: -115px -9px;
    width: 58px;
}

.zwc-step-box4 h3::before {
    background-position: -175px -8px;
    width: 44px;
}


.transY1,
.transY2,
.transY3,
.transY4,
.transY5,
.transY6 {
    -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);
}

.middle-animated .transY1,
.middle-animated .transY2,
.middle-animated .transY3,
.middle-animated .transY4,
.middle-animated .transY5,
.middle-animated .transY6 {
    -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;
}

.transY6 {
    -webkit-transition-delay: 1100ms;
    transition-delay: 1100ms;
}

/*slideUp*/

@keyframes slideUp {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: translateY(-40px);
    }

    100% {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes slideUp {
    0% {
        visibility: hidden;
        opacity: 0;
        -webkit-transform: translateY(-40px);
    }

    100% {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes slideUp {
    0% {
        visibility: hidden;
        opacity: 0;
        -moz-transform: translateY(-40px);
    }

    100% {
        visibility: visible;
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

/*slideUp*/
/*slideUp*/

@keyframes slideDown {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes slideDown {
    0% {
        visibility: hidden;
        opacity: 0;
        -webkit-transform: translateY(40px);
    }

    100% {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes slideDown {
    0% {
        visibility: hidden;
        opacity: 0;
        -moz-transform: translateY(40px);
    }

    100% {
        visibility: visible;
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

/*slideUp*/
/*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);
    }
}

/*slideleft*/
/*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);
    }
}

@-webkit-keyframes dash {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes dash {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes zeven {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, -20px);
        transform: translate(0, -20px);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes zeven {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, -20px);
        transform: translate(0, -20px);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@-webkit-keyframes zodd {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, 20px);
        transform: translate(0, 20px);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes zodd {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, 20px);
        transform: translate(0, 20px);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

.head-icon3,
.zc-sms-contact-list,
.zc-sms-promocode,
.head-icon1,
.head-icon2 {
    opacity: 0;
}

.after-load .zc-sms-women {
    animation: zeven 5s linear 1s infinite;
}

.after-load .zc-sms-men {
    animation: zodd 5s linear 1s infinite;
}

.after-load .head-icon3 {
    animation: slideLeft 1s ease-out 0.4s forwards;
}

.after-load .zc-sms-contact-list {
    animation: slideUp 1s ease-out 0.8s forwards;
}

.after-load .zc-sms-promocode {
    animation: slideDown 1s ease-out 0.6s forwards;
}

.after-load .head-icon1 {
    animation: slideLeft 1s ease-out 0.5s forwards;
}

.after-load .head-icon2 {
    animation: slideRight 1s ease-out 0.8s forwards;
}

.playPause {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 0;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    outline: 0;
    display:none;
}

.playPause::before,
.playPause::after {
    content: '';
    background: #fff;
    display: inline-block;
    width: 4px;
    height: 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.playPause::before {
    left: 18px
}

.playPause::after {
    left: 9px
}

.playPause.paused::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    background: transparent;
    border-style: solid;
    border-width: 7px 0 7px 10px;
    border-color: transparent transparent transparent #fff;
    top: 50%;
    left: 57%;
    position: absolute;
    transform: translate(-50%, -50%)
}

.playPause.paused::after {
    content: none
}

/* zia-section */

.zwc-zia-section {
    background: var(--red-bg);
    color: #fff;
}

.zwc-zia-intro {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.zwc-zia-intro h2 {
    margin-bottom: 20px;
}

.zwc-zia-intro .zwc-span-block {
    display: inline-block;
}

.zwc-zia-intro .zwc-span-block::after {
    content: "";
    background-image: url(/sites/zweb/images/campaigns/whatsapp-marketing-ai-icon.svg);
    display: inline-block;
    width: clamp(25px, 3.5vw, 40px);
    height: clamp(25px, 3.5vw, 40px);
    background-size: clamp(25px, 3.5vw, 40px);
    margin-left: clamp(10px, 1.2vw, 15px);
    background-position: center;
    background-repeat: no-repeat;
}

.zwc-tone-header {
    font-family: var(--zf-primary-semibold);
}

/* 
.zwc-zia-intro p {
    max-width: 640px;
    margin: 0 auto;
} */

.zwc-zia-card {
    display: flex;
    align-items: stretch;
    gap: clamp(55px, 5.3vw, 100px);
    background: var(--light-red-bg);
    border-radius: 24px;
    padding: clamp(60px, 4vw, 80px);
    margin-top: 60px;
    color: #000;
}

/* copy sits at the top, tabs are pushed to the bottom of the column so they
   line up with the foot of the image */
.zwc-zia-card .column.left {
    width: 48%;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* the column stretches to the card height, so centre the image inside it */
.zwc-zia-card .column.right {
    width: 52%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* the blocks are laid side by side then pulled back onto the same spot with a
   negative margin, so they overlap while all three stay in flow - the row
   measures the tallest one, so the card holds one height with none set */
.zwc-zia-texts {
    display: flex;
}

.zwc-zia-content {
    flex: 0 0 100%;
    max-width: 100%;
    margin-right: -100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.zwc-zia-content.zwc-current {
    opacity: 1;
    visibility: visible;
}

.zwc-zia-content span {
    display: none;
}

.zwc-zia-content h3 {
    margin-bottom: 16px;
}

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

.zwc-zia-content p+p,
.zwc-zia-tone {
    margin-top: 16px;
}

.zwc-zia-tone {
    text-align: left;
    max-width: 340px;
    /* margin-inline: auto; */
}

.zwc-tone-header {
    max-width: 120px;
    /* margin-inline: auto; */
}

.zwc-zia-content ul {
    display: flex;
    max-width: 340px;
    flex-wrap: wrap;
    align-items: center;
    margin-inline: auto;
    gap: 10px 30px;
    justify-content: center;
}

.zwc-zia-content li {
    width: 150px;
    position: relative;
}

/* bullet drawn inline so the list still reads right when centred below 1024 */
.zwc-zia-content ul {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.zwc-zia-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    padding-top: 40px;
}

.zwc-zia-tabs button {
    background: transparent;
    color: var(--red-bg);
    border: 1px solid var(--red-bg);
    border-radius: 30px;
    padding: 8px 22px;
    font-size: 15px;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}

.zwc-zia-tabs button.zwc-current {
    background: var(--red-bg);
    color: #fff;
}

.zwc-zia-visual {
    display: none;
    width: 100%;
}

.zwc-zia-visual.zwc-current {
    display: block;
}

.zwc-zia-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.zwc-zia-foot {
    max-width: 700px;
    margin: 60px auto 0;
    text-align: center;
}

.zwc-zia-foot h3 {
    margin-bottom: 16px;
}

/* zia-section end */

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

    .measure-box.measure-box1 {
        margin-right: 5%;
    }

    .measure-section {
        margin: 0 60px;
    }

    .measure-section .content-wrap {
        max-width: 1040px;
    }
}

@media only screen and (max-width: 1280px) {
    .measure-section {
        margin: 0px;
    }
}

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

    .zc-sms-contact-list {
        left: -40px;
    }

    .header-img-wrap {
        margin-top: 50px;
    }

    .zc-sms-promocode {
        display: none;
    }

    /* .message-section .content-wrap {
        padding: 80px 100px;
    } */

    .message-section .table-wrap {
        display: block;
    }

    .message-section .table-wrap .column.left,
    .message-section .table-wrap .column.right {
        width: 100%;
        padding: 0;
    }

    .message-section .table-wrap .column.right {
        padding-top: 30px;
    }

    .message-section h2 {
        max-width: 100%;
        text-align: center;
    }

    .message-wrap ul {
        max-width: fit-content;
        margin-inline: auto;
    }

    .message-section .table-wrap .column.left p {
        max-width: 100%;
    }

    .personalize-section .equal-wrap {
        max-width: 450px;
        margin: 0 auto;
    }

    .zc-sms-merge-tags {
        max-width: 100%;
    }

    .common-section.automate-section {
        padding-top: 60px;
    }

    /* .auto-block {
        padding: 50px 40px;
    } */

    .common-section.measure-section {
        margin-top: 0;
    }

    /* .common-section {
        padding: 100px 0;
    } */

    .header-section {
        padding: 100px 0 80px 0;
    }

    .zwc-step-box>div {
        padding: 30px;
    }
}

/* zia-section - tabs collapse into a stacked list, JS moves each image
   under its own block so nothing is duplicated in the markup */
@media only screen and (max-width: 1024px) {

    .zwc-zia-card {
        display: block;
        padding: 40px 30px;
        border-radius: 16px;
    }

    .zwc-zia-card .column.left,
    .zwc-zia-card .column.right {
        display: block;
        width: 100%;
    }

    .zwc-zia-tabs {
        display: none;
    }

    .zwc-zia-texts {
        display: block;
        text-align: center;
    }


    .zwc-zia-visual img {
        max-width: clamp(350px, 65vw, 550px);
        margin-inline: auto;
    }

    .zwc-zia-tone {
        margin-inline: auto;
    }

    .zwc-tone-header {
        margin-inline: auto;
    }

    .zwc-zia-content {
        margin-right: 0;
        max-width: 550px;
        margin-inline: auto;
        opacity: 1;
        visibility: visible;
    }

    .zwc-zia-content:not(:first-child) {
        margin-top: 50px;
    }

    .zwc-zia-content span {
        display: block;
        /* text-align: left; */
        font-family: var(--zf-primary-semibold);
        color: var(--red-bg);
        margin-bottom: 12px;
    }

    .zwc-zia-content .zwc-zia-visual {
        display: block;
        max-width: 560px;
        margin: 24px auto 0;
    }
}

@media only screen and (max-width: 991px) {
    .zwc-btn-wrap {
        justify-content: center;
        align-items: center;
    }

    .zwc-inline-txt {
        display: inline;
    }

    .header-section .header-wrap {
        flex-direction: column;
        gap: 30px;
    }

    .header-section .header-wrap .column.left,
    .header-section .header-wrap .column.right {
        width: 100%;
        text-align: center;
    }

    .header-section {
        padding: 60px 0 80px 0;
    }

    h1 br {
        display: none;
    }

    h1 {
        max-width: 580px;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .header-section .header-wrap .column.left p {
        margin: 0 auto;
        margin-bottom: 25px;
        max-width: 520px;
    }

    .common-section.automate-section {
        padding: 0;
    }

    .common-section.message-section {
        padding-top: 0;
    }

    .message-section .table-wrap {
        display: block;
    }

    .message-section .table-wrap .column.left,
    .message-section .table-wrap .column.right {
        width: 100%;
        padding: 0;
    }

    .message-section h2 {
        max-width: 100%;
    }

    .message-wrap ul {
        /* padding-left: 25px; */
    }

    /* .message-section .content-wrap {
        padding: 80px 80px;
    } */

    .message-section .table-wrap .column.left p {
        max-width: 100%;
        text-align: center;
    }

    .message-section .table-wrap .column.left {
        text-align: center;
    }

    .message-section h2 {
        text-align: center;
    }

    .message-wrap ul {
        display: inline-block;
        text-align: left;
        max-width: 500px;
    }

    .message-section .table-wrap .column.right {
        padding-top: 30px;
    }

    .equal-section .table-wrap {
        display: block;
    }

    .equal-section .table-wrap .column.right {
        margin-bottom: 60px;
    }

    .equal-section .table-wrap .column.left,
    .equal-section .table-wrap .column.right {
        width: 100%;
        padding: 0;
    }

    .equal-section .table-wrap h2 {
        margin: 0 auto;
        text-align: center;
        max-width: 545px;
        margin-bottom: 20px;
    }

    .equal-section .table-wrap .column.left p {
        text-align: center;
        max-width: 640px;
        margin-inline: auto;
    }

    /* .auto-block {
        margin: 0 auto;
        animation: 0;
        margin-top: 30px;
    } */

    .measure-section.equal-section .table-wrap h2 {
        max-width: 500px;
    }

    .measure-box.measure-box1 {
        margin: 0 2%;
        text-align: center;
    }

    .measure-icon {
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .measure-box h3 {
        text-align: center;
    }

    .measure-box p {
        text-align: center;
        max-width: 300px;
        margin: 0 auto;
    }

    .measure-wrap {
        padding-top: 60px;
        justify-content: center;
    }

    .zwc-comp-box-wrap>div {
        padding: 40px 20px 40px 50px;
        min-width: 200px;
    }

    .zwc-step-box>div {
        padding: 30px 20px 20px;
    }

    .zwc-scalable {
        padding: 30px 10px;
    }

    .zwc-power-up>div {
        max-width: 600px;
    }
}

@media only screen and (max-width: 767px) {
    :root {
        /* --section-gap: 50px;
        --h1-size: 35px;
        --h2-size: 30px;
        --h3-size: 25px;
        --h4-size: 23px;
        --h5-size: 17px */
    }

    .header-section .header-wrap .column.left p {
        line-height: 28px;
    }

    .header-section .act-btn.cta-btn {
        /* margin-bottom: 20px; */
    }

    /* .message-section .content-wrap {
        padding: 70px 50px;
    } */

    .measure-box.measure-box1 {
        width: 50%;
    }

    /* .common-section {
        padding: 80px 0;
    } */

    .equal-section .table-wrap h2 {
        padding-top: 0;
    }

    h1 {
        /* max-width: 440px; */
    }

    .header-section {
        padding: 40px 0 50px 0;
    }

    .message-wrap ul li {
        font-size: 15px;
    }

    .message-section .table-wrap .column.right {
        padding-top: 20px;
    }
}

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

    .message-section .content-wrap {
        padding: 60px 30px;
    }

    /* .auto-block {
        text-align: center;
        padding: 50px 20px;
    } */

    .measure-box,
    .measure-box.measure-box1,
    .measure-box.measure-box2 {
        width: 100%;
        margin: 0;
    }

    .measure-wrap {
        display: block;
    }

    .measure-box p {
        max-width: 90%;
    }

    .measure-box.measure-box1 {
        margin-bottom: 50px;
    }

    .message-section h2 {
        font-size: 24px;
    }

    .bottom-cta-section p {
        max-width: 310px;
        margin: 0 auto;
        margin-bottom: 15px;
    }

    .zwc-comp-box-wrap {
        flex-direction: column;
    }
}

@media screen and (min-width: 1280px) {
    .zw-template-inner p {
        font-size: 18px;
    }
}

@media screen and (min-width: 992px) {
    .inverse-table .left {
        order: 2;
    }

    .equal-section .inverse-table .right {
        padding-left: 0;
        padding-right: 5%;
    }
}

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

    .personalize-section .zc-sms-merge-tags,
    .automate-section .zc-sms-merge-tags {
        margin: 0 auto;
    }

    .automate-section .equal-wrap {
        margin: 0 auto;
    }

    .personalize-section h3,
    .automate-section h3 {
        text-align: center;
    }

    h3 {
        font-size: 26px;
    }
}


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

    .personalize-section h3,
    .automate-section h3 {
        text-align: center;
    }
}

/* Other-lang */
.other-lang .bottom-cta-section {
    background-color: #fff;
}

.i18n-ar .header-section .header-wrap .column.right,
.i18n-ar .header-section .header-wrap .column.right *,
.i18n-ar .equal-section .table-wrap .column.right,
.i18n-ar .equal-section .table-wrap .column.right * {
    direction: ltr;
    text-align: left;
}

.i18n-ar .personalize-section .table-wrap .column.right,
.i18n-ar .personalize-section .table-wrap .column.right *,
.i18n-ar .automate-section .table-wrap .column.right,
.i18n-ar .automate-section .table-wrap .column.right * {
    direction: ltr;
    text-align: right;
}

.i18n-ar .header-section .header-wrap .column.right {
    padding-left: 0;
    padding-right: 5%;
}

.i18n-ar .header-section .act-btn.cta-btn {
    margin-right: 0;
}

.i18n-ar .message-wrap ul li {
    padding-right: 35px;
}

.i18n-ar .message-wrap ul li:before {
    right: 0;
    top: 5px;
}

.i18n-ar .auto-block {
    margin-left: 0;
}

.i18n-ar .message-section .table-wrap .column.left {
    padding-right: 0;
    padding-left: 5%;
}

.i18n-ar .personalize-section .table-wrap .column.right {
    padding-left: 0;
    padding-right: 5%;
    width: 60%;
}

.i18n-ar .equal-section .table-wrap .column.left {
    padding-right: 0;
    padding-left: 5%;
}

.i18n-ar .equal-section .table-wrap .column.right {
    padding-left: 0;
    padding-right: 5%;
    width: 60%;
}

.i18n-ar .measure-section .table-wrap .column.right,
.i18n-ar .measure-section .table-wrap .column.right * {
    text-align: right;
}

.i18n-ar .measure-icon {
    margin-left: auto;
}

.i18n-ar .bottom-cta-section,
.i18n-ar .bottom-cta-section * {
    direction: ltr;
    text-align: center;
}

.i18n-ar .header-section .header-wrap .column.left {
    padding-left: 3%;
}

@media only screen and (max-width: 991px) {
    .i18n-ar .auto-block {
        margin-left: auto;
    }

    .i18n-ar .header-section .header-wrap .column.left {
        padding: 0;
    }

    .i18n-ar .header-section,
    .i18n-ar .header-section * {
        direction: ltr;
        text-align: center;
    }

    .i18n-ar .message-section .table-wrap .column.left p {
        text-align: right;
    }

    .i18n-ar .message-section .table-wrap .column.left,
    .i18n-ar .equal-section .table-wrap .column.left {
        padding: 0;
    }

    .i18n-ar .equal-section .table-wrap .column.right {
        padding: 0;
        width: 100%;
    }

    .i18n-ar .measure-section .table-wrap .column.right,
    .i18n-ar .measure-section .table-wrap .column.right * {
        text-align: center;
    }
}

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

    .i18n-ar .equal-section .table-wrap .column.right,
    .i18n-ar .equal-section .table-wrap .column.right * {
        text-align: center;
    }

    .i18n-ar .message-wrap ul {
        padding-left: 0;
    }
}

@media screen and (max-width: 480px) {
    .zwc-btn-wrap {
        flex-direction: column;
    }
}

/* Other-lang end*/