.zw-product-header {
    background-color: #070c1a;
}
.content-wrap {
    max-width: 1280px;
}
.zw-template-inner h1, .zw-template-inner h2, .zw-template-inner h3, .zw-template-inner h4, .zw-template-inner h5, .zw-template-inner h6 {
    color: rgb(255, 255, 255);
}
.extention p {
    color: rgb(255, 255, 255);
}
.extention {
    background-color: rgb(7, 12, 26);
}
.zblock {
    position: relative;
    padding: 100px 0px;
}
.banner-wrap {
    max-width: 1055px;
    margin: auto;
    position: relative;
    padding: 150px 0;
}
.ban-img {
    max-width: 1055px;
    margin: auto;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}
.zblock.build-app {
    padding: 0 !important;
}
.zblock.build-app .column-wrap {
    margin: auto;
}
h1 {
    font-size: 66px;
    font-family: var(--primaryfont-bold);
    position: relative;
    max-width: 670px;
    margin: 0 auto 20px;
    text-align: center;
    line-height: 1.1;
}
h1::before, h1::after {
    content: "";
    width: 35px;
    height: 35px;
    position: absolute;
    border-left: 8px solid #fff;
    border-bottom: 8px solid #fff;
    transition: 1.5s all;
}
h1::before {
    left: 0;
    top: 18px;
    transform: translateX(-30px) rotate(44deg);
}
h1::after {
    right: 0;
    top: 26px;
    transform: translateX(30px) rotate(227deg);
}
.animated h1::before {
    transform: translateX(0) rotate(44deg) scale(1);
}
.animated h1::after {
    transform: translateX(0) rotate(227deg) scale(1);
}
h1 span {
    background: transparent linear-gradient(180deg, rgb(119 102 244 / 90%) 0%, rgb(77 155 246 / 90%) 51%, rgb(83 189 138 / 90%) 100%) 0% 0%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.zapps h2 span {
    color: #706cd8;
}
.build-app p {
    max-width: 611px;
    margin: auto;
    text-align: center;
}
.fea-bg {
    width: 85px;
    height: 85px;
    display: block;
    position: absolute;
    background: linear-gradient(164deg, rgb(24, 32, 71) 0%, rgb(17, 17, 44) 100%) 0% 0% no-repeat padding-box padding-box transparent;
    border-radius: 50%;
}
.fea-icon::before {
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    background: url(/sites/zweb/images/developer/extention.svg) 0% 0% / 660px no-repeat;
}
.banner-wrap .fea-icon::before {
    transform: scale(.9);
}
.fea-bg::before {
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}
.fea-ic1::before {
    background-position: 8px -13px;
}
.fea-ic2::before {
    width: 15px;
    height: 17px;
    background-position: -31px -73px;
}
.fea-ic3::before {
    width: 27px;
    height: 17px;
    background-position: 2px -74px;
}
.fea-ic4::before {
    background-position: -43px -14px;
}
.fea-ic1 {
    bottom: 22%;
    animation: 1.5s linear infinite alternate-reverse none running float;
}
.fea-ic2 {
    right: 8%;
    bottom: 22%;
    animation: 1.5s linear infinite alternate none running dotz;
}
.fea-ic3 {
    top: 22%;
    left: 6%;
    animation: 1.5s linear infinite alternate-reverse none running dotz;
}
.fea-ic4 {
    right: 0px;
    animation: 1.5s linear infinite alternate none running float;
    top: 16%;
}
.zdot {
    position: absolute;
}
@keyframes float {
    0% {
        transform: translateY(0px);
   }
    100% {
        transform: translateY(10px);
   }
}
@keyframes dotz {
    0% {
        transform: scale(0.5);
   }
    100% {
        transform: scale(1);
   }
}
/* sigma */
.zblock.sigma {
    padding: 0;
}
.column-block {
    max-width: 924px;
    margin: auto;
    padding: 80px 80px;
    border-radius: 14px;
    background: transparent linear-gradient(117deg, rgb(81 21 145 / 40%) 0%, rgb(28 82 151 / 40%) 56%, rgb(20 137 152 / 40%) 100%) 0% 0%;
}
h2 {
    font-size: 45px;
    font-family: var(--primaryfont-bold);
}
.learn-more {
    border: 1px solid #fff;
    color: #fff;
    margin: 10px 10px 0 10px;
    padding: 14px 40px;
    font-family: var(--zf-secondary-medium);
    text-transform: capitalize;
    font-size: 16px;
}
.learn-more:hover {
    background-color: #ffffff12;
    transition: 500ms;
}
.content-block .cta-btn {
    padding: 14px 40px;
    text-transform: capitalize;
    font-family: var(--zf-secondary-medium);
    font-size: 16px;
}
.content-block .cta-btn:hover, .sig-btn:hover {
    background-color: #da3127;
    transition: 500ms;
}
.banner-wrap a {
    color: #fff;
    transform: translateX(30px);
    display: inline-block;
    transition: 1.5s all;
}
.animated .banner-wrap a {
    transform: translateX(5px);
}
.sigma .content-block {
    position: relative;
    padding-left: 13em;
}
.sigma .content-block h3 {
    font-size: 32px;
    font-family: var(--primaryfont-bold);
}
.sigma .content-block::before {
    content: '';
    width: 172px;
    height: 172px;
    background: url(/sites/zweb/images/developer/extention.svg) no-repeat;
    background-size: 709px auto;
    position: absolute;
    left: 0;
    background-position: -186px -72px;
    transform: translate(-20px, 20px);
}
.sigma .middle-animated .content-block::before {
    transform: translate(0, 0);
    transition: 1s all;
}
/* apps */
.head-cont {
    max-width: 672px;
    margin: 0 auto 60px;
    text-align: center;
}
.icon-section {
    background-color: #111623;
    max-width: 1130px;
    margin: auto;
    text-align: center;
    padding: 80px 60px;
    position: relative;
    border-radius: 12px;
}
.icon-section::before, .grid-cont::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid #1f2535;
}
.icon-section::before {
    width: 78%;
    height: 1px;
    right: 0;
    left: 0;
}
.grid-cont::before {
    width: 1px;
    height: 80%;
    top: 0;
}
.fst-child::before {
    border: none;
}
.lst-child::before {
    left: -20px;
}
.grid-item h4 {
    font-size: 22px;
    font-family: var(--zf-secondary-medium);
    margin: 0 auto 30px;
}
.grid-item span.zicon {
    color: #eeeeee;
    position: relative;
    padding-top: 53px;
    display: inline-block;
    width: 90px;
}
.zicon::before {
    content: '';
    width: var(--zp-i-w);
    height: var(--zp-i-w);
    background: var(--product-icons) no-repeat;
    background-size: var(--zp-i-bs);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    transform: scale(1.35);
}
.zcrm::before {
    background-position: var(--zp-crm-bp);
    transform: scale(1.4);
}
.zrecruit::before {
    background-position: var(--zp-recruit-bp);
}
.zdesk::before {
    background-position: var(--zp-desk-bp);
}
.zcreator::before {
    background-position: var(--zp-creator-bp);
    transform: scale(1.40);
}
.zqntrl::before {
    background-position: var(--zp-qntrl-bp);
    transform: scale(1.40);
}
.zmail::before {
    background-position: var(--zp-mail-bp);
    left: -5px;
    transform: scale(1.30);
}
.zprojects::before {
    background-position: var(--zp-projects-bp);
}
.zbugtracker::before {
    background-position: var(--zp-bugtracker-bp);
}
.zwriter:before {
    background-position: var(--zp-writer-bp);
}
.grid-wrap {
    display: grid;
    grid-template-columns: 30% 30% 40%;
    justify-content: space-between;
}
.grid-cont {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 100px;
    position: relative;
}
.grid-cont img {
    max-width: 228px;
}
/* build */
.zblock.built {
    background: transparent linear-gradient(133deg, rgb(81 21 145 / 67%) 0%, rgb(28 82 151 / 67%) 56%, hsl(186.82deg 76.74% 33.73%) 100%) 0% 0%;
}
.line-wrap {
    display: grid;
    grid-template-columns: repeat(2, 46%);
    gap: 35px;
    justify-content: center;
}
.line-item {
    background: #E5E6FF;
    padding: 60px 46px;
    border-radius: 16px;
}
.line-cont p {
    color: #000;
}
.line-cont h3 {
    color: #000;
    font-size: 25px;
}
.line-cont a {
    color: #000;
    border: 1px solid #000;
    border-radius: 30px;
    padding: 8px 26px;
    font-size: 16px;
    text-transform: capitalize;
}
.line-cont {
    position: relative;
    padding-left: 70px;
}
.line-cont::before {
    top: 0;
    left: 0;
    transform: scale(1.2);
}
.built1::before {
    background-position: -94px -17px;
}
.built2::before {
    background-position: -151px -13px;
    width: 57px;
}
.built3::before {
    background-position: -202px -13px;
}
.built4::before {
    background-position: -254px -10px;
    height: 55px;
}
/* get-start */
.getstart .content-block {
    max-width: 1035px;
    margin: auto;
    padding: 100px 100px 110px;
    background: transparent linear-gradient(111deg, rgb(81 21 145 / 40%) 0%, rgb(28 82 151 / 40%) 56%, rgb(20 137 152 / 40%) 100%) 0% 0% no-repeat padding-box;
    border-radius: 14px;
    position: relative !important;
}
.wave-line::before {
    width: 249px;
    height: 163px;
    background-position: -419px -14px;
}
.zsigma::before {
    width: 82px;
    height: 78px;
    background-position: -92px -39px;
    background-size: 350px auto;
}
.wave-line, .zsigma {
    position: absolute;
}
.zsigma {
    right: 16em;
    top: 6em;
    transform: translate(-20px, 20px);
}
.animated .zsigma {
    transform: translate(0, 0);
    transition: 1s all;
}
.wave-line {
    right: 22em;
    bottom: 8em;
}
.sig-btn {
    background: #f0483e;
    color: #fff;
    padding: 14px 40px;
    font-family: var(--zf-secondary-medium);
    text-transform: capitalize;
    font-size: 16px;
}
.zblock.getstart {
    padding-top: 0;
}
/* customer */
.customer-content {
    max-width: 1180px;
    margin: auto;
    text-align: center;
}
.customer-item h2 {
    padding: 95px 0 0;
}
.customer-item {
    max-width: 100%;
    margin: auto;
}
.customer-item p {
    color: #BEBDC1;
    font-size: 26px !important;
    font-style: italic;
    padding: 20px 0 0;
    max-width: 924px;
    margin: 0 auto 20px;
}
.slick-next, .slick-prev {
    transform: translate(0, -50%) scale(2);
    top: 62%;
}
.slick-next:after, .slick-next:before, .slick-prev:after, .slick-prev:before {
    background: #2c303c;
}
.customer-item h5 span {
    font-size: 15px;
    color: #BEBDC1;
    font-family: var(--primaryfont-regular);
}
.customer-item h5 {
    font-size: 20px;
    font-family: var(--primaryfont-bold);
}
.customer-section .cus-child-img {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 30px 0 10px;
}
.customer-section .cus-child-img .zcus-img {
    width: 60px;
    height: 60px;
    background: url(/sites/zweb/images/developer/build-customer.png) no-repeat;
    display: inline-block;
    cursor: pointer;
    filter: grayscale(1);
    opacity: .5;
    transition: 1s all;
    position: relative;
    background-size: 182px auto;
}
.customer-section .cus-child-img .zcus1 {
    background-position: 4px 4px;
}
.customer-section .cus-child-img .zcus2 {
    background-position: -61px 4px;
    margin: 0 8px;
}
.customer-section .cus-child-img .zcus3 {
    background-position: -126px 3px;
}
.customer-item .fea-icon::before {
    width: 90px;
    height: 72px;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-position: -320px 0px;
}
.customer-section .cus-child-img .greenDiv {
    opacity: 1;
    filter: unset;
    transform: scale(1.1);
    transition: .5s all ease;
}
circle {
    display: none;
}
.customer-section .cus-child-img .greenDiv .circle {
    display: block;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ringloader 50s ease-out;
}
@keyframes ringloader {
    0% {
        stroke-dashoffset: 1000;
   }
    100% {
        stroke-dashoffset: 0;
   }
}
.i18n-ja .getstart .content-block {margin: 100px auto}
.other-lang .zblock.customer {
  display: none;
}
@media only screen and (min-width: 992px) {
    .line-cont p {
        font-size: 19px !important;
   }
    .extention p {
        font-size: 22px;
   }
}
@media only screen and (min-width: 1024px) {
    .grid-wrap {
        margin-right: 30px;
   }
}
@media only screen and (max-width: 1199px) {
    .customer-item p {
        font-size: 24px !important;
   }
   .icon-section {
    padding: 60px 40px;
}
.grid-item span.zicon {
    width: 85px;
}
}
@media only screen and (max-width: 991px) {
    .zblock {
        padding: 70px 0;
   }
    h1 {
        font-size: 50px;
        max-width: 523px;
        margin: 0 auto 15px;
   }
    .animated h1::before {
        transform: translateX(0) rotate(44deg) scale(.8);
   }
    .animated h1::after {
        transform: translateX(0) rotate(227deg) scale(.8);
   }
    h1::before {
        top: 9px;
   }
    h1::after {
        top: 16px;
   }
    .banner-wrap {
        padding: 70px 0;
   }
    .column-block {
        padding: 60px;
   }
    .line-item {
        padding: 60px 20px;
   }
    .head-cont {
        margin: 0 auto 40px;
        max-width: 450px;
   }
    h2 {
        font-size: 30px;
   }
    .customer-item p {
        font-size: 20px !important;
        max-width: 675px;
   }
    .grid-wrap {
        grid-template-columns: repeat(1, 100%);
        max-width: 600px;
        margin: auto;
   }
    .zsigma {
        right: 16em;
        top: 4em;
   }
    .getstart .content-block {
        max-width: 1035px;
        margin: auto;
        padding: 100px 50px;
   }
    .icon-section::before, .grid-cont::before {
        display: none;
   }
    .icon-section {
        padding: 50px;
   }
   .grid-item span.zicon {
    width: 102px;
}
.zicon.zmail, .zicon.zprojects {
    padding-bottom: 20px;
}
.grid-cont.lst-child {
    margin-bottom: 0px;
}
}
@media only screen and (max-width: 991px) and (min-width: 769px) {
    .grid-item {
        width: 50%;
   }
    .grid-cont {
        gap: 0;
        border-bottom: 1px solid #1f2535;
        margin-bottom: 40px;
        padding-bottom: 40px;
        flex-direction: row;
   }
    .grid-item h4 span {
        display: block;
   }
}
@media only screen and (max-width: 768px) {
    .zblock {
        padding: 60px 0;
   }
    h1 {
        font-size: 40px;
        max-width: 431px;
   }
    h1::before {
        left: 4px;
        top: 5px;
   }
    h1::before {
        transform: translateX(0) rotate(44deg) scale(.6) !important;
   }
    h1::after {
        top: 9px;
   }
    h1::after {
        transform: translateX(0) rotate(227deg) scale(.6) !important;
   }
    .banner-wrap {
        padding: 50px 0 60px;
   }
    .banner-wrap .fea-icon::before, .banner-wrap .fea-icon {
        display: none;
   }
    .zblock.build-app .column-wrap {
        max-width: 430px;
   }
    .sigma .content-block {
        text-align: center;
        padding-left: 0;
        padding-top: 12em;
        margin: auto;
   }
    .sigma .content-block::before {
        top: 0;
        right: 0;
        margin: auto;
   }
    .line-wrap {
        display: grid;
        grid-template-columns: repeat(1, 80%);
   }
    .line-item {
        padding: 50px 20px;
   }
    .customer-item p {
        font-size: 18px !important;
        max-width: 540px;
        margin: 0 auto 20px;
   }
    .grid-wrap {
        grid-template-columns: repeat(1, 100%);
        max-width: 500px;
        margin: auto;
   }
    .grid-cont {
        gap: 0;
   }
    .grid-item {
        margin-bottom: 30px;
        border-bottom: 1px solid #1f2535;
        padding-bottom: 30px;
   }
    .grid-item.lst-plus {
        margin-bottom: 0;
        border-bottom: none;
        padding-bottom: 0;
   }
    .sigma .content-block h3 {
        font-size: 27px;
   }
    h2 {
        font-size: 26px;
   }
    .head-cont {
        max-width: 390px;
   }
    .wave-line, .zsigma {
        display: none;
   }
    .getstart .content-block {
        padding: 70px 50px;
        text-align: center;
   }
    .slick-next, .slick-prev {
        transform: translate(0, -50%) scale(1.5);
        top: 59%;
   }
.i18n-ja .getstart .content-block {margin: 80px auto}
.grid-item span.zicon {
    width: 83px;
}

}
@media only screen and (max-width: 640px) {
    .customer-item p {
        max-width: 380px;
   }
    h1::before, h1::after, .banner-wrap a {
        display: none;
   }
.i18n-ja .getstart .content-block {margin: 60px auto}
}
@media only screen and (max-width: 480px) {
    h1 {
        font-size: 27px;
        max-width: 300px;
   }
    .banner-wrap {
        padding: 40px 0 60px;
   }
    .column-block {
        padding: 60px 15px;
   }
    .line-wrap {
        display: grid;
        grid-template-columns: repeat(1, 100%);
        gap: 20px;
   }
    .line-cont::before {
        right: 0;
        margin: auto;
   }
    .line-cont {
        position: relative;
        padding-left: 0px;
        padding-top: 60px;
        text-align: center;
   }
    h2 {
        font-size: 24px;
   }
    .customer-item p {
        font-size: 15px !important;
   }
    .icon-section {
        padding: 50px 5px;
   }
    .sigma .content-block h3 {
        font-size: 24px;
   }
    .grid-item h4 {
        font-size: 20px;
   }
    .getstart .content-block {
        padding: 50px 15px;
        text-align: center;
   }
    .slick-next, .slick-prev {
        display: none;
   }
   .grid-cont.lst-child .grid-item {
    max-width: 230px;
    margin-left: auto;
    margin-right: auto;
}
}