.zw-page-30132 .zw-product-header {
    background-color: #F5C5C5;
}
.cta-btn {
    padding: 15px 30px;
    border-radius: 5px;
}

/* banner section styles starts */

.zwc-banner-section{
    position: relative;
    padding: 88px 0;
    overflow: hidden;
    background-image: linear-gradient(181deg, #F5C5C5 0.95%, #C5DEEF 102.69%);
}
.zwc-banner-section h1{
    font-size: 63px;
    font-family: var(--secondaryfont-semibold);
}
.zwc-banner-section p{
    font-size: 19px;
    margin-bottom: 38px;
}
.zwc-banner-section .zwc-row{
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.zwc-banner-section .zwc-content{
    flex-basis: 50%;
    width: auto;
    max-width: 600px;
}
.zwc-banner-section .zwc-image{
    position: relative;
    flex-basis: 50%;
}

.zwc-banner-section .zwc-image img.zwc-img-1{
    position: absolute;
    left: 9%;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 41%;
    border-radius: 13px;
    box-shadow: 0px 0px 13px #00000021;
}
.zwc-banner-section .zwc-image img.zwc-img-2{
    position: relative;
    left: 42%;
    width: 47%;
    bottom: -113px;
}
.zwc-banner-section span.icon{
    position: absolute;
    background-image: url(/sites/zweb/images/salesiq/telegram/sprit-icons.png);
    background-size: 459px;
    background-repeat: no-repeat;
}
.zwc-banner-section span.icon.icon-1{
    width: 50px;
    height: 58px;
    background-position: -99px 1px;
    top: -9%;
    left: 26%;
}

.zwc-banner-section span.icon.icon-2{
    width: 19px;
    height: 22px;
    background-position: -162px -1px;
    top: 11%;
    right: 33%;
    background-size: 512px;
}

.zwc-banner-section span.icon.icon-3{
    width: 51px;
    height: 52px;
    top: 30%;
    border: 1px solid #fff;
    right: 12%;
    background-color: #efefef;
    background-size: 34px;
    background-position: center;
    transform: rotate(-20deg);
    box-shadow: 1px 1px 5px #00000026;
    border-radius: 7px;
    background-image: url(/sites/zweb/images/otherbrandlogos/telegram-icon.svg);
}

.zwc-banner-section span.icon.icon-4{
    width: 39px;
    height: 39px;
    background-position: -56px -3px;
    bottom: 18%;
    right: 4%;
    background-size: 431px;
    transform: rotate(-20deg);
    border-radius: 7px;
}

.zwc-banner-section span.icon.icon-5{
    width: 39px;
    height: 39px;
    background-position: 6px -3px;
    bottom: -8%;
    left: 35%;
    background: url(/sites/zweb/images/salesiq/images/emoji-wink.png) no-repeat;
    background-size: cover;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(120);
    animation-name: winkanimate;
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    transform: rotate(-22deg);
}

@keyframes winkanimate {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 0 -6125px
    }
}

.zwc-banner-section span.icon.icon-6{
    width: 31px;
    height: 28px;
    background-position: -27px -3px;
    bottom: -16%;
    left: 19%;
    background-size: 431px;
}

/* banner section styles ends */

/* gradient section styles starts */

.gradient-green-sec{
    background-image: linear-gradient(90deg, #EFEFE1 0.01%, #E9EEE2 123.32%, #E0ECE4 163.58%);
    position: relative;
}
.gradient-green-sec img{
    width: 33%;
    padding: 0 44px;
}
.gradient-green-sec .content-wrap{
    display: flex;
    justify-content: flex-end;
}

/* gradient section styles ends */


/* features sectio styels starts */
.zwc-features-section{
    background-color: #FDF8F7;
    padding: 88px 0;
}
.zwc-features-section .zwc-card-wrapper{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}
.zwc-features-section .zwc-card{
    width: 46%;
    padding: 50px;
    margin: 15px 17px;
    background-color: #fff;
    border-radius: 17px;
    box-shadow: 0px 14px 34px 0px rgba(0, 0, 0, 0.05);
}
.zwc-features-section h3{
    font-size: 34px;
    width: 94%;
}
.zwc-features-section p{
    font-size: 18px;
    width: 95%;
    min-height: 128px;
}
.zwc-features-section .zwc-card-image{
    background-image: url(/sites/zweb/images/salesiq/telegram/sprit-icons.png);
    background-repeat: no-repeat;
    width: 70px;
    height: 83px;
}
.zwc-features-section .zwc-card-image-1{
    background-position: -295px -3px;
    background-size: 600px;
}
.zwc-features-section .zwc-card-image-2{
    background-position: -365px -3px;
    background-size: 600px;
}
.zwc-features-section .zwc-card-image-3{
    background-position: -441px -3px;
    background-size: 600px;
}
.zwc-features-section .zwc-card-image-4{
    background-position: -517px -3px;
    background-size: 600px;
    width: 85px;
}
/* features sectio styels ends */


/* cta setcion styles starts */

.zwc-cta-section{
    background-image:linear-gradient(91deg, #270123 -27.44%, #0D181E 107.35%);
    text-align: center;
    padding: 60px 0;
}

.zwc-cta-section h2{
    color: #fff;
    font-size: 44px;
    width: 61%;
    margin: 0 auto 31px;
}

/* cta setcion styles ends */


/* responsive styles starts */
@media screen and (max-width:1440px){
    .zwc-banner-section h1 {
        font-size: 42px;
    }
    .zwc-features-section h3 {
        font-size: 27px;
    }
    .zwc-cta-section h2 {
        font-size: 32px;
        width: auto;
        max-width: 600px;
    }
}


@media screen and (max-width:1024px){
    .zwc-banner-section h1 {
        font-size: 34px;
    }
    .zwc-banner-section .zwc-image {
        margin-top: 73px;
    }
    .zwc-banner-section .zwc-content {
        margin: auto;
    }
    .zwc-banner-section h1,.zwc-banner-section p {
        width: 100%;
    }
    .zwc-banner-section span.icon.icon-6 {
        bottom: -12%;
    }
    .zwc-banner-section span.icon.icon-1 {
        top: -9%;
    }
    .zwc-features-section .zwc-card {
        width: 43%;
        padding: 36px;
    }
    .zwc-features-section h3 {
        font-size: 21px;
    }
    .gradient-green-sec img {
        width: 51%;
    }
}

@media screen and (max-width:991px){
    .zwc-banner-section .zwc-row {
        flex-direction: column;
    }
    .zwc-banner-section .zwc-content {
        text-align: center;
    }
    .gradient-green-sec img {
        margin: auto;
    }
}

@media screen and (max-width:767px){
    .zwc-banner-section span.icon.icon-3 {
        right: 5%;
    }
    .zwc-banner-section .zwc-image img.zwc-img-2 {
        left: 39%;
        width: 56%;
    }
    .zwc-banner-section span.icon.icon-4 {
        right: 0;
    }
    .zwc-banner-section span.icon.icon-6 {
        left: 15%;
    }
    .zwc-banner-section span.icon.icon-5 {
        bottom: -4%;
        left: 32%;
    }
    .zwc-features-section .zwc-card {
        width: 100%;
        padding: 28px;
    }
    .zwc-features-section {
        padding: 40px 0;
    }
    .zwc-cta-section h2 {
        font-size: 25px;
    }
    .zwc-features-section h3,.zwc-features-section p {
        width: 100%;
    }
    .gradient-green-sec img {
        width: 100%;
        padding: 0;
        margin: auto;
    }
    .zwc-features-section .zwc-card-image{
        margin-bottom: 12px;
    }
    .zwc-banner-section span.icon.icon-1 {
        top: -7%;
    }
}

@media screen and (max-width:480px){
    .zwc-banner-section span.icon.icon-5 {
        bottom: -13%;
        left: 25%;
    }
    .zwc-banner-section span.icon.icon-6 {
        left: 6%;
        bottom: -32%;
    }
    .zwc-banner-section .zwc-image img.zwc-img-1 {
        width: 52%;
    }
    .zwc-banner-section span.icon.icon-1 {
        top: -22%;
    }
    .zwc-banner-section span.icon.icon-2 {
        right: 23%;
    }
    .zwc-banner-section span.icon.icon-4 {
        bottom: 8%;
    }
    .zwc-banner-section span.icon.icon-5 {
        bottom: -22%;
    }
}
/* responsive styles ends */


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

/* Animation Styles starts */
.zwc-banner-section .animated .zwc-image img.zwc-img-1{
    animation: slideIn 1s ease forwards;
}
.content-wrap .zwc-image .icon{
    opacity: 0;
    transition: all 0.5s ease;
}

.content-wrap .zwc-image .icon-3{
   animation: scaling ease 1s forwards, floatingrev 10s ease 1s infinite;
}
.content-wrap .zwc-image .icon-4{
    animation: scaling ease 1s forwards,floating 10s ease 1s infinite;
}
.content-wrap .zwc-image .icon-6{
    animation: scaling ease 1s forwards,floatingrev 10s ease 0.5s infinite;
}

.middle-animated .zwc-image .icon{
    opacity: 1;
    transition-delay: 1s;
}
@keyframes slideIn {
    from {
        transform: translateX(30px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes floating {
    0% {
        transform: translateY(0px)
    }

    50% {
        transform: translateY(30px)
    }

    100% {
        transform: translateY(0px)
    }
}

@keyframes floatingrev {
    0% {
        transform: translateY(0px)
    }
  50% {
        transform: translateY(-30px)
    }

    100% {
        transform: translateY(0px)
    }
}


@keyframes scaling {
    0% {
        transform: scale(0.2)
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Animation Styles ends */

}