.zc-video-modal {
    background: rgba(0, 0, 0,0.95);
}

*:before,
    *:after {
      box-sizing: border-box;
    }

    section#block-panels-mini-product-menu {
      background: rgb(61, 21, 84);
    }

    #mini-panel-product_menu .menu-icon-help-header .product-title a,
    #mini-panel-product_menu .product-nav-links .menu>li>a,
    #mini-panel-product_menu .product-nav-links li .nolink {
      color: #fff;
    }

    .zlazy-img {
      filter: blur(8px);
    }

    .zlazy-img.loaded {
      filter: blur(0);
    }

    #mini-panel-product_menu .expanded.dropdown .caret {
      background-position: -167px 0;
    }

    .zlazy-img {
      width: 100%;
    }

    h2 {
      font-size: 36px;
      font-family: var(--zf-primary-bold);
      line-height: 1.3em;
    }

    p {
      font-size: 18px;
      line-height: 1.5em;
    }

    .zwrapper>div {
      position: relative;
      width: 100%;
      overflow: hidden;
      display: inline-block;
    }

    .zsprite:after {
      background: url(/sites/zweb/images/show/slack-show-sprite.png) no-repeat;
      background-size: 575px auto;
      content: "";
    }

    .zelem {

      display: none;
    }

    @-webkit-keyframes floating {
      from {
        transform: translate(0, 0px);
      }

      65% {
        transform: translate(0, 15px);
      }

      to {
        transform: translate(0, -0px);
      }
    }

    .zmain-img {
      position: relative;
    }


    .zheader .zmain-img #play {
      cursor: pointer;
      position: absolute;
      right: 0;
      left: -15%;
      bottom: 0;
      top: -11.2%;
      margin: auto;
      box-shadow: 0px 0px 20px 0px #ccc;
      border-radius: 50%;
      background: #fff;
      z-index: 9;
      -webkit-transform: translate3d(0px, 40px, 0);
      transform: translate3d(0px, 40px, 0);
    }

    @-webkit-keyframes scale-up {
      0% {
        opacity: 0;
        transform: translateY(70%) translateX(-170%);
      }

      100% {
        opacity: 1;
        transform: translateY(-50%) translateX(-170%);
      }
    }

    @keyframes scale-up {
      0% {
        opacity: 0;
        transform: translateY(70%) translateX(-170%);
      }

      100% {
        opacity: 1;
        transform: translateY(-50%) translateX(-170%);
      }
    }


    .zmain-img .icon {
      transform: scale(.6);
      transform-origin: 50% 50%;
      transition: transform 200ms ease-out;
    }


    .zelem.zelem1 {
      width: 17px;
      height: 22px;
      top: 11em;
      background-position: -32px -20px;
      animation-duration: 8s;
    }

    .zelem.zelem2 {
      width: 10px;
      height: 22px;
      top: 14em;
      background-position: -48px -20px;
      left: 17em;
      animation-duration: 5s;
    }

    .zelem.zelem3 {
      width: 10px;
      height: 22px;
      top: 2em;
      background-position: -58px -20px;
      right: 22em;
      animation-duration: 4s;
    }

    .zelem.zelem4 {
      width: 19px;
      height: 22px;
      top: 6em;
      background-position: -70px -20px;
      right: 0;
      animation-duration: 5s;
    }

    .zelem.zelem5 {
      width: 13px;
      height: 22px;
      top: 16em;
      background-position: -93px -20px;
      right: 5em;
      animation-duration: 10s;
    }

    .zelem.zelem6 {
      width: 15px;
      height: 22px;
      top: 19em;
      background-position: -113px -20px;
      right: 35em;
    }

    .zheader {
      position: relative;
      margin-bottom: 100px;
      width: 100%;
    }

    .zsection1 .zflex-wrap>div {
      width: 50%;
    }

    .zslider-nav {
      font-size: 12px;
      text-align: center;
      max-width: 400px;
      margin: 0 auto 30px;
      position: relative;
      cursor: pointer;
    }
    .zsection1 .zflex-wrap>div:last-child {
      padding-bottom: 80px;
    }

    .zslider-nav:before {
      content: "";
      position: absolute;
      left: -30px;
      width: 30px;
      height: 1px;
      background: rgb(186, 187, 189);
      bottom: 0px;
    }

    .zslider-nav:after {
      content: "";
      position: absolute;
      right: -30px;
      width: 30px;
      height: 1px;
      background: rgb(186, 187, 189);
      bottom: 0px;
    }

    .zslider-nav .slick-slide {
      padding-bottom: 10px;
      padding-top: 30px;
      position: relative;
      border-bottom: 1px solid rgb(186, 187, 189);
      font-size: 12px;
    }

    .zslider-nav .slick-slide.slick-current.slick-active {
      border-bottom: 1px solid #fff;
      color: #e05751;
    }

    .zslider-nav .slick-slide:focus {
    }

    .zslider-nav .slick-slide.slick-current.slick-active {
      position: relative;
    }

    .zslider-nav .slick-slide.slick-current.slick-active:before {
      background: rgb(225, 227, 230);
      position: absolute;
      content: "";
      left: 0;
      bottom: 0;
      width: 1px;
      height: 130%;
    }

    /* .zslider-nav .slick-slide.slick-current.slick-active:first-child::before {
    display: none;
}
.zslider-nav .slick-slide.slick-current.slick-active:last-child::after {
    display: none;
} */

    .zslider-nav .slick-slide.slick-current.slick-active:after {
      background: rgb(225, 227, 230);
      background: linear-gradient(0deg, rgb(186, 187, 189) 0%, rgba(255, 255, 255, 1) 100%);
      position: absolute;
      content: "";
      right: 0;
      bottom: 0;
      width: 1px;
      height: 130%;
    }

    .zslider-nav .slick-slide.slick-current.slick-active:after {}

    .zslider-nav span {
      width: 25px;
      height: 21px;
      position: absolute;
      top: 0;
      background: url(/sites/zweb/images/show/slack-show-sprite.png) no-repeat;
      background-size: 516px;
      margin: auto;
      left: 0;
      right: 0;
    }

    .zp-img {
      background: url(/sites/zweb/images/show/slack-show-sprite.png) no-repeat;
      background-size: 516px;
    }

    span.zsprites.zsprites1 {
      background-position: -3px -130px;
    }

    span.zsprites.zsprites2 {
      background-position: -30px -127px;
      height: 25px;
    }

    span.zsprites.zsprites3 {
      background-position: -56px -127px;
      height: 25px;
    }

    span.zsprites.zsprites4 {
      background-position: -81px -127px;
      height: 25px;
    }

    span.zsprites.zsprites5 {
      background-position: -105px -127px;
      height: 25px;
    }

    .zslider-nav .slick-track {
      transform: none !important;
    }

    .zflex-wrap {
      display: flex;
      flex-wrap: wrap;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
    }

    .zheader:before {
      content: "";
      position: absolute;
      top: 0;
      width: 100%;
      height: 80%;
      background: rgb(61, 21, 84);
      background: linear-gradient(180deg, rgba(61, 21, 84, 1) 0%, rgba(90, 27, 94, 1) 100%);
    }

    .zheader p {
      color: #fff;
      text-align: center;
      font-size: 18px;
      line-height: 1.5em;
    }

    .zheader a {
      position: relative;
      border: 1px solid #fff;
      padding: 13px 20px 13px 40px;
      border-radius: 5px;
      color: #fff;
      font-size: 16px;
      margin: 0 10px;
      display: inline-block;
      text-transform: uppercase;
    }

    a.zact-btn.zplay-btn span {
      margin-left: 0px;
    }

    a.zact-btn.zplay-btn {
      padding-left: 20px;
    }

    a.add-to-slack-btn {
      background: #fff;
      color: #320c62;
      padding-left: 60px;
      position: relative;
      border: 1px solid #fff;
      padding: 13px 20px 13px 60px;
      border-radius: 5px;
      text-transform: uppercase;
      font-size: 16px;
      display: inline-block;
      font-family: var(--zf-primary-semibold);
      transition: 0.5s all ease;
    }

    a.add-to-slack-btn:hover {
      transform: translateY(-3px);
      transition: all .5s ease;
      box-shadow: 0 10px 12px -3px rgba(0, 0, 0, .17);
    }

    a.add-to-slack-btn::after {
      width: 32px;
      height: 32px;
      left: 15px;
      position: absolute;
      top: 0;
      background-position: -3px -48px;
      margin: auto;
      bottom: 0;
      content: "";
    }

    .zheader img {
      margin-top: 100px;
      width: 100%;
      max-width: 1280px;
      margin: 100px auto 0;
      display: block;
    }

    .zplay-btn {
      position: relative;
      transition: 0.5s all ease;
    }

    .zplay-btn:hover {
      background: #fff;
      color: #320c62;
      transform: translateY(-3px);
      transition: all .5s ease;
      box-shadow: 0 10px 12px -3px rgba(0, 0, 0, .17);
    }

    .zplay-btn:hover .triangle {
      background-color: #320c62;
    }

    .triangle {
      position: relative;
      background-color: #fff;
      text-align: left;
      display: inline-block;
    }

    .triangle:before,
    .triangle:after {
      content: '';
      position: absolute;
      background-color: inherit;
    }

    .triangle,
    .triangle:before,
    .triangle:after {
      width: 8px;
      height: 8px;
      border-top-right-radius: 30%;
    }

    .triangle {
      transform: rotate(32deg) skewX(-30deg) scale(1, .866);
      position: absolute;
      left: 20px;
      top: 19px;
    }

    .triangle:before {
      transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
    }

    .triangle:after {
      transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
    }
.fadeinup {
      -webkit-transform: translate3d(0px, 40px, 0);
      transform: translate3d(0px, 40px, 0);
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      -webkit-transition: opacity 0.75s ease-in, -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
      transition: opacity 0.75s ease-in, -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
      transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
      transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
      transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
    }

    .fadeinup.inview {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      -webkit-transform: translate3d(0px, 0px, 0);
      transform: translate3d(0px, 0px, 0);
    }

    h1 {
      font-family: var(--zf-secondary-bold);
      font-size: 44px;
      color: #fff;
      text-align: center;
      padding-top: 100px;
    }

    h1 span {
      background: -webkit-linear-gradient(45deg, #57c0d6, #58bb92 80%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-animation: hue 10s infinite linear;
    }

    @-webkit-keyframes hue {
      from {
        -webkit-filter: hue-rotate(0deg);
      }

      to {
        -webkit-filter: hue-rotate(-360deg);
      }
    }

    .zheader p {
      margin-bottom: 30px;
    }

    .zheader h1.inview,
    .zheader p.inview,
    .zheader img.inview {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      -webkit-transform: translate3d(0px, 0px, 0);
      transform: translate3d(0px, 0px, 0);
    }

    .zsection1 {
      margin-bottom: 100px;
    }

    .zsection1 .zflex-wrap div h2,
    .zsection1 .zflex-wrap div p {
      max-width: 450px;
    }

    .fadeinleft {
      transform: translateX(250px);
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      -webkit-transition: opacity 1s ease-in, -webkit-transform 1s cubic-bezier(0.39, 0.575, 0.565, 1);
      transition: opacity 1s ease-in, -webkit-transform 1s cubic-bezier(0.39, 0.575, 0.565, 1);
      transition: opacity 1s ease-in, transform 1s cubic-bezier(0.39, 0.575, 0.565, 1);
      transition: opacity 1s ease-in, transform 1s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s cubic-bezier(0.39, 0.575, 0.565, 1);
      transition: opacity 1s ease-in, transform 1s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s cubic-bezier(0.39, 0.575, 0.565, 1);
    }

    .fadeinleft.inview {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      -webkit-transform: translate3d(0px, 0px, 0);
      transform: translate3d(0px, 0px, 0);
    }

    .zsection2 .zflex-wrap div {
      max-width: 610px;
      margin: 0 auto;
      text-align: center;
    }

    .zsection2 span.zp-img {
      width: 94px;
      height: 95px;
    }

    .zsection2 span.zp-img {
      transform: translateX(-3em);
      transition: 0.7s all ease 0.5s;
      opacity: 0;
    }
    .zsection2 span.zp-img.zp-img-5, .zsection2 span.zp-img.zp-img-4{
         transform: translateX(3em);
    }

    span.zp-img.zp-img-1 {
      top: 0em;
      left: 10.4em;
      background-position: -34px -2px;
    }

    span.zp-img.inview,.zsection2 span.zp-img.zp-img-5.inview, .zsection2 span.zp-img.zp-img-4.inview {
      transform: translateX(0em);
      opacity: 1;
    }

    span.zp-img.zp-img-2 {
      left: 2.4em;
      top: 5.5em;
      background-position: -129px -2px;
    }

    span.zp-img.zp-img-3 {
      left: 10em;
      top: 10.1em;
      background-position: -226px -2px;
      z-index: 9;
    }

    span.zp-img.zp-img-4 {
      right: 9.6em;
      top: 11em;
      background-position: -324px -2px;
      z-index: 9;
    }

    span.zp-img.zp-img-5 {
      right: 2em;
      top: 5.5em;
      background-position: -420px -2px;
    }


    .zsection.zsection2 {
      padding: 150px 0;
      display: inline-block;
      width: 100%;
      position: relative;
    }

    .zsection.zsection2:before {
      content: "";
      position: absolute;
      top: 0;
      width: 100%;
      height: 65%;
      background: #f9f6f4;
    }

    .zsection.zsection2 img.zmain-img {
      margin-top: 70px;
      box-shadow: 0px 0px 33px 19px rgba(0, 0, 0, 0.08);
      border-radius: 20px;
      -webkit-box-shadow: 0px 0px 33px 19px rgba(0, 0, 0, 0.08);
      -moz-box-shadow: 0px 0px 33px 19px rgba(0, 0, 0, 0.08);
      max-width: 85%;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      display: block;
    }

    .zsection.zsection2 img.zsub-img {
      position: absolute;
      max-width: 300px;
      right: 24px;
      top: 12.6%;
      box-shadow: 14px 2px 17px -10px rgba(0, 0, 0, 0.08);
      border-radius: 10px;
    }
.mobile-view{
    display:none
}
    .zsection2-img {
      position: relative;
    }

    span.zsprite {
      position: relative;
    }

    .zsection2 .zicon4:after {
      position: absolute;
      width: 120px;
      height: 100px;
      background-position: -450px 0;
      left: 10em;
      top: -3em;
      transform: translate3d(-4em, 9em, 0);
      transition: 1.5s all ease 0.5s;
      opacity: 0;
    }

    .zsection2 .zicon4.inview:after {
      transform: translateX(0em);
      opacity: 1;
    }

    .zsection3 {
      padding: 0 0 150px;
    }

    .zsection3 .zp-img {
      opacity: 0;
      width: 70px;
      height: 71px;
    }

    .zsection3 .zp-img b {
      position: absolute;
      bottom: -15px;
      color: #778396;
      font-size: 9px;
      left: 0;
      right: 0;
      margin: auto;
      text-align: center;
    }

    .zsection3 .inview .zp-img {
      -webkit-animation: scale-up-center 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
      animation: scale-up-center 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }

    .zsection3 .inview .zp-img6 {
      animation-delay: 0.7s;
    }

    .zsection3 .inview .zp-img7 {
      animation-delay: 1s;
    }

    .zsection3 .inview .zp-img8 {
      animation-delay: 0.3s;
    }

    .zsection3 .inview .zp-img9 {
      animation-delay: 1.3s;
    }

    .zsection3 .inview .zp-img10 {
      animation-delay: 1.7s;
    }

    .zsection3 .zp-img6 {
      background-position: -136px -100px;
      left: 3em;
      top: 0.5em;
    }

    .zsection3 .zp-img7 {
      background-position: -208px -100px;
      left: 3em;
      top: 9em;
    }

    .zsection3 .zp-img8 {
      background-position: -282px -100px;
      left: 12em;
      top: 4em;
    }

    .zsection3 .zp-img9 {
      background-position: -354px -100px;
      left: 22em;
      top: 0.5em;
    }

    .zsection3 .zp-img10 {
      background-position: -427px -100px;
      left: 22em;
      top: 9em;
    }

    .zsection3 .zp-img6 {}

    @-webkit-keyframes scale-up-center {
      0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
      }

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

    @keyframes scale-up-center {
      0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
      }

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

    .zsection3 .zflex-wrap div h2,
    .zsection3 .zflex-wrap div p {
      max-width: 390px;
      position: relative;
    }

    
    .zsection.zsection1 .content-wrap {
      max-width: 1100px;
    }
    .zsection.zsection3 .content-wrap{
        max-width: 1000px;
    }
    .zsection.zsection4 .content-wrap{
        max-width: 1170px;
    }
.zsection.zsection1 .content-wrap {
     max-width: 1240px;
}

    h2 {
      padding-bottom: 20px;
      margin-bottom: 30px;
      position: relative;
    }

    h2:after {
      content: "";
      position: absolute;
      width: 50px;
      height: 1px;
      background: #000;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }

    .zsection3 .zflex-img-wrap {
      padding: 250px 0 0px 0;
      position: relative;
      transform: scale(0.9);
    }

    .zsection3 .zflex-img-wrap img.zp-main-img {
      max-width: 522px;
    }

    span.zp-img {
      position: absolute;
      width: 85px;
      border-radius: 7px;
    }

    span.zp-img.zp-img1 {
      left: 3em;
      top: 5em;
      transition-delay: 0.2s;
    }

    span.zp-img.zp-img2 {
      top: 1em;
      left: 15em;
    }

    span.zp-img.zp-img3 {
      right: 0;
      top: 4em;
    }

    span.zp-img.zp-img4 {
      bottom: 2em;
      left: 6em;
    }

    span.zp-img.zp-img5 {
      bottom: 1.3em;
      right: 4em;
    }

    span.zsprite.zicon.zicon1:after {
      position: absolute;
      width: 155px;
      height: 100px;
      background-position: -128px 0;
      left: 0;
    }

    span.zsprite.zicon.zicon1 {
      position: absolute;
      left: 0;
      top: 0;
    }

    .zsection4 .zflex-wrap {
      flex: 1;
      align-items: unset;
      z-index: 9;
      position: relative;
    }

    .zsection4 h2 {
      max-width: 400px;
      box-shadow: 0 0 black;
      margin: 0 auto 30px;
    }

    .zsection.zsection4 {
      padding: 150px 0;
    }

    .zsection4 p {
      margin-bottom: 60px;
    }

    .zsection.zsection4:after {
      content: "";
      position: absolute;
      top: 0;
      height: 70%;
      width: 100%;
      background: #f6f7fa;
      left: 0;
    }

    .zsection4 .zflex-wrap>div {
      width: 50%;
      flex: 1;
      padding: 40px;
    }

    .zsection4 .zicon {
      position: relative;
      width: 73px;
      height: 90px;
    }

    .zsprite.zicon.zicon2:after {
      position: absolute;
      width: 73px;
      height: 90px;
      background-position: -314px 0;
    }

    .zsprite.zicon.zicon3:after {
      position: absolute;
      width: 60px;
      height: 90px;
      background-position: -390px 0;
    }

    .zflex-inner {
      background: #fff;
      padding: 80px 50px 0;
      height: 100%;
      text-align: center;
      -webkit-box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.21);
      -moz-box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.21);
      box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.07);
      background-color: white;
    }

    .zflex-inner2 {
      background: #ffffff;
    }

    .zfooter-top {
      background: #fff;
      padding: 0px 0 100px;
      text-align: center;
      color: #fff;
      margin-top: 100px;
    }

    .zfooter-top h2 {
      color: #000;
      font-size: 36px;
      margin-bottom: 15px;
    }

    .zfooter-top h2:after {
      display: none;
      ;
    }

    .zfooter-top h2 span {
      background: -webkit-linear-gradient(45deg, #57c0d6, #58bb92 80%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-animation: hue 10s infinite linear;
    }

    .zfooter-top a.add-to-slack-btn {
      background: #3f0e40;
      color: #fff;
      padding: 15px 30px 15px 70px;
    }

    .zfooter-top a.add-to-slack-btn:after {
      left: 25px;
    }

    .zsection5 .zflex-wrap>div {
      width: 65%;
      height: 450px;
      position: relative;
      padding-top: 50px;
    }

    .zsection5 .zflex-wrap>div:last-child {
      width: 35%;
      padding-left: 60px;
      padding-right: 30px;
      height: auto;
    }

    .zsection5 .zflex-wrap>div:first-child {
      transform: scale(0.8);
    }

    .zsection5 .zflex-wrap>div img {
      position: absolute;
      opacity: 0;
      transition: 1s all ease;
      transform: translateX(-20px);
    }

    .zsection5 .zflex-wrap>div.inview img {
      opacity: 1;
      transform: translateX(0px);
    }

    .zsection5 .zflex-wrap>div img.zthumb1 {
      max-width: 150px;
      z-index: 99;
      left: 2.4em;
      transition-delay: 200ms;
    }

    .zsection5 .zflex-wrap>div img.zthumb2 {
      width: 240px;
      z-index: 9;
      left: -2em;
      top: 8.6em;
      transition-delay: 300ms;
    }

    .zsection5 .zflex-wrap>div img.zthumb3 {
      width: 250px;
      z-index: 9;
      left: 5em;
      top: 17em;
      transition-delay: 400ms;
    }

    .zsection5 .zflex-wrap>div img.zthumb4 {
      max-width: 200px;
      z-index: 9;
      left: 12em;
      top: 0;
      transition-delay: 500ms;
    }

    .zsection5 .zflex-wrap>div img.zthumb5 {
      max-width: 300px;
      z-index: 9;
      left: 12em;
      top: 6.8em;
      transition-delay: 600ms;
    }

    .zsection5 .zflex-wrap>div img.zthumb6 {
      max-width: 150px;
      z-index: 9;
      top: 17.6em;
      left: 19.8em;
      transition-delay: 700ms;
    }

    .zsection5 .zflex-wrap>div img.zthumb7 {
      top: 4em;
      right: 3em;
      max-width: 190px;
      transition-delay: 800ms;
    }

    .zsection5 .zflex-wrap>div img.zthumb8 {
      max-width: 244px;
      z-index: 9;
      right: 0em;
      top: 11em;
      transition-delay: 900ms;
    }

    .zsection5 .zflex-wrap>div img.zthumb9 {
      max-width: 180px;
      top: 19em;
      right: 3.5em;
      transition-delay: 1000ms;
    }

    .zsection5 h2:after,
    .zsection1 h2:after,
    .zsection3 .zflex-wrap div h2:after {
      margin: 0;
    }

    @-webkit-keyframes hue {
      from {
        -webkit-filter: hue-rotate(0deg);
      }

      to {
        -webkit-filter: hue-rotate(-360deg);
      }
    }

    .slideinleft,
    .slideinright {
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      -webkit-transition: opacity 0.75s ease-in, -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
      transition: opacity 0.75s ease-in, -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
      transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
      transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
      transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
    }

    .slideinleft {
      -webkit-transform: translate3d(300px, 0px, 0);
      transform: translate3d(300px, 0px, 0);
    }

    .slideinright {
      -webkit-transform: translate3d(-300px, 0px, 0);
      transform: translate3d(-300px, 0px, 0);
    }

    .slideinleft.inview,
    .slideinright.inview {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      -webkit-transform: translate3d(0px, 0px, 0);
      transform: translate3d(0px, 0px, 0);
    }

    .zfooter-top p {
      margin-bottom: 0;
    }
.i18n-ar .zsection5 .zflex-wrap>div:last-child {
    padding-right: 60px;
    padding-left: 30px;
}
@media only screen and (min-width:1200px){
 .zsection1 .zflex-wrap>div:nth-child(1){
      width: 44%;
    }
    .zsection1 .zflex-wrap>div:nth-child(2){
      width: 56%;
    }

}

    @media only screen and (max-width:1024px) {
      .zflex-inner {
        padding: 40px;
      }
.zflex-wrap div p{
    
width: 91%;
}
.zheader .zmain-img #play{  
    top: -14.2%;
}
    .zsection3 {
      padding: 0 0 70px;
    }
    .zsection.zsection4 {
    padding: 100px 0 150px;
}
      .zsection4 .zflex-wrap>div {
        padding: 20px;
      }
      .zthumb7,.zthumb8,.zthumb9{display:none}

   .zsection3 .zflex-img-wrap {
       transform:scale(.85)
   }
.zsection5 .zflex-wrap>div:last-child{
    padding-left:0px;
    width: 38%;
}
      span.zp-img.zp-img-3 {
        top: 11em;
      }

      span.zp-img.zp-img-1 {
        top: -2em;
        left: 5.4em;
      }

      .zsection.zsection2 img.zsub-img {
        max-width: 230px;
        top: 14%;
      }
      .zfooter-top{
          margin-top:60px
      }
    }

    @media only screen and (max-width:991px) {
      .zsection1 .zflex-wrap>div {
        width: 80%;
      }

      .zsection1 .zflex-wrap div h2,
      .zsection1 .zflex-wrap div p {
        margin-left: auto;
        margin-right: auto;
      }

      .zsection1 .zflex-wrap>div {
        margin-bottom: 20px;
      }

      .zflex-wrap {
        flex-flow: column;
        text-align: center;
      }

      .zheader {
        margin-bottom: 100px;
      }
  .zsection1{
      margin-bottom: 0px;
  }
      .zsection.zsection2 {
        padding: 100px 0;
      }

      .zsection3 .zflex-img-wrap {
        margin-top: 40px;
      }

      .zsection4 .zflex-wrap>div {
        text-align: left;
        max-width: 550px;
        margin: 0 auto;
        width: calc(100% - 40px);
      }

      .zsection.zsection4 {
        padding: 100px 0;
      }

      .zsection2 span.zp-img {
        display: none;
      }

      .zsection.zsection2 img.zmain-img {
        margin-top: 40px;
      }

      .zsection5 h2:after,
      .zsection1 h2:after,
      .zsection3 .zflex-wrap div h2:after {
        margin: auto;
      }

      .zsection2 h2 {
        max-width: 410px;
        margin: 0 auto 30px;
      }

      .zsection3 .zflex-wrap div h2,
      .zsection3 .zflex-wrap div p {
        max-width: 530px;
        position: relative;
      }

      .zsection5 .zflex-wrap{
        /* display: none; */
        flex-direction: column-reverse;
      }

      .zsection5 .zflex-wrap>div:last-child {
        max-width: 550px;
        margin: 0 auto;
        width: 100%;
        height: auto;
        padding-left: 0;
        padding-right: 0px;
        padding-top: 0px;
      }

      .zfooter-top {
        margin-top: 0;
      }
.zcpopup-controller::before, .zcpopup-controller::after{display: none !IMPORTANT;}
      .zheader .zmain-img #play {
        width: 50px;
        height: 50px;
      }
   .zsection5 .zflex-wrap>div:last-child {
        padding-left: 0;
        padding-right: 0;
    }
    .i18n-ar .zsection5 p, .i18n-ar .zsection3 p, .i18n-ar .zsection1 p{
        text-align: center;
    }
    }

    @media only screen and (max-width:767px) {
      h1 {
        font-size: 44px;
      }

      .zsection3 .zflex-img-wrap img.zp-main-img {
        width: 100%;
      }

      .zfooter-top h2 {
        font-size: 40px;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
      }

      .zheader {
        margin-bottom: 70px;
      }

      .zsection.zsection2 img.zsub-img {
        top: 19%;
        max-height: 230px;
        max-width: none;
        ;
      }
    }

    @media only screen and (max-width:600px) {
      .zheader a {
        margin-bottom: 20px;
      }
      .zheader .zmain-img #play{
    top: -30.2%;
}
      .zheader img {
        margin: 0;
      }
.zsection3 .zflex-img-wrap{margin-top:0px}
      .zsection1,
      .zheader {
        margin-bottom: 70px;
      }

      .zsection3 {
        padding: 0 0 50px;
      }

      .zfooter-top {
        margin-top: 0px;
      }

      span.zp-img {
        width: 70px;
      }

      span.zp-img.zp-img2 {
        top: 2em;
        left: 9em;
      }

      span.zp-img.zp-img4 {
        bottom: 2em;
        left: 3em;
      }

      .zsection3 .zp-img10 {
        left: 14em;
        top: 9em;
      }

      .zsection3 .zp-img10 {
        left: auto;
        top: 9em;
        right: 12%;
      }

      .zsection3 .zp-img9 {
        left: auto;
        top: 1em;
        right: 10%;
      }

      .zsection3 .zp-img8 {
        left: 39%;
        top: 4em;
      }

      .zsection3 .zp-img7 {
        left: 10%;
        top: 40%;
      }

      .zsection3 .zp-img6 {
        left: 10%;
        top: 0%;
      }

      .zsection.zsection2 img.zsub-img {
        top: 19%;
        max-height: unset;
        max-width: none;
      }

      .zsection.zsection2 img.zmain-img {
        border-radius: 10px;
        max-width: 100%;
      }
.zsection2-img img,.zsection.zsection2 img.zmain-img{display:none}
.zsection2-img .zsub-img.mobile-view,.mobile-view{display:block;opacity: 1;position: relative !important;box-shadow: 0px 0px 0px #ffff !important;}
      .zsection.zsection2 img.zsub-img {
        max-width: none;
        right: 0px;
        width: 100%;
      }
[class^="zthumb"]{display:none}
.zsection5 .zflex-wrap>div{height:auto;padding-top: 20px;width: 90%;}
      .zsection.zsection2 {
        overflow: hidden;
        width: 100%;
      }
.zsection5 .content-wrap{padding:50px 0px 100px}
      .zsection.zsection4 {
        padding: 50px 0 0px;
      }

      .zflex-inner {
        padding: 30px;
      }

      .zsection.zsection2 {
        padding: 50px 0;
      }

      h1 {
        font-size: 34px;
        padding-top: 60px
      }

      p {
        font-size: 18px;
      }
      .zflex-wrap div p{margin:0px auto 15px}
    }

    @media only screen and (max-width:480px) {
      .zsection.zsection2 img.zsub-img {
        top: 0px;
        position: unset;
        width: 100%;
      }
      .zsection1 .zflex-wrap>div:last-child{
          
padding-bottom: 0px;
      }
      .zsection5 .zflex-wrap>div:first-child{transform:scale(1)}
    }

.zcpopup-controller::before,.zcpopup-controller::after{
    position:absolute;
    content:"";
    width: 80px;
    height: 80px;
    display: inline-block;
    left: -15%;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 100%;
    margin: auto;
    animation-iteration-count: infinite;
    animation-duration:2s;
    opacity:1;
    /* border:1px solid #000 */
    background-color: #d3e7f5;
}

.inview .zcpopup-controller::before{
    transform: scale(1);
    z-index: 8;
    animation-name: scaleani;
    animation-delay: 2s;
    transition-delay: 2s;
}

.zcpopup-controller::after{
     transform: scale(1);
     z-index: 7;
       animation-name: scaleanisec;
     animation-delay: 1s;
     opacity:0;
}
@keyframes scaleani{
    0% {transform: scale(1);  opacity:1;}
    100% {transform: scale(1.6);  opacity:0;}
}

/*Arabic starts*/
.i18n-ar .zheader h1, .i18n-ar .slick-list .slick-slide, .i18n-ar .zsection2 .zflex-wrap > div h2, .i18n-ar .zsection2 .zflex-wrap > div p, .i18n-ar .zsection4 .zflex-wrap > div h2, .i18n-ar .zsection4 .zflex-wrap > div p, .i18n-ar .zfooter-top .content-wrap h2, .i18n-ar .zfooter-top .content-wrap p {
    text-align: center;
}
@media only screen and (max-width: 991px)
{
.i18n-ar .zsection .content-wrap .zflex-wrap > div h2{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.i18n-ar .zsection5 .zflex-wrap>div:last-child{
    padding-right: 0px;
    padding-left: 0px;
}
}
/*Arabic ends*/