:root {
   --sprite-icon: url("/sites/zweb/images/contracts/free-cms/sprite.png");
}

.inline-block {
   display: inline-block
}

.page-wrapper .content-wrap {
   padding: 50px 0px;
}

.page-wrapper h2,
.page-wrapper h3 {
   font-family: var(--zf-primary-bold);
}

.page-wrapper .act-btn,
.page-wrapper .cta-btn,
.page-wrapper .bdr-btn {
   padding: 12px 30px;
   font-size: 16px;
}

.page-wrapper .bdr-btn {
   font-family: var(--zf-primary-semibold);
   color: #000;
   border: 1px solid #000;
   display: inline-block;
   margin-left: 9px;
   text-transform: uppercase;
}

.page-wrapper .cta-box a {
   margin: 10px 15px 10px 0px;
}

.page-wrapper img {
   vertical-align: top;
}

[class|="zsprite"] {
   display: inline-block;
   width: 50px;
   height: 50px;
   background: var(--sprite-icon) no-repeat;
   background-size: 150px auto;
   background-position: 0 0;
   letter-spacing: -40px;
   margin-bottom: 20px;
}

.zsprite-cms-icon1 {
   background-position: 0 0;
}

.zsprite-cms-icon2 {
   background-size: 180px auto;
   background-position: -62px 2px;
   width: 60px;
}

.zsprite-cms-icon3 {
   background-position: -102px 0;
}

.page-wrapper .section-block-box {
   padding: 40px 25px;
   border-radius: 10px;
}

.page-wrapper .zlist {
   position: relative
}

.page-wrapper ul li {
   font-size: 15px;
   margin-bottom: 15px;
}

.page-wrapper .zlist li {
   position: relative;
   margin-bottom: 20px;
   padding-left: 45px;
}

.page-wrapper .zlist li:last-child {
   margin-bottom: 0px;
}

.page-wrapper .zlist li::before,
.page-wrapper .zlist li::after {
   content: '';
   position: absolute;
   z-index: 1
}

.page-wrapper .zlist li::before {
   top: 12px;
   left: 6px;
   width: 12px;
   height: 6px;
   border-left: 2px solid #ffc252;
   border-bottom: 2px solid #ffc252;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

.page-wrapper .zlist li::after {
   top: 4px;
   left: 0;
   width: 23px;
   height: 23px;
   border-radius: 50%;
   background-color: rgba(255, 194, 82, 0.2);
   border: 2px solid #ffc252;
}

.flex-content {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

.page-wrapper .what-cms-section .content-wrap,
.page-wrapper .cms-benefit-section .content-wrap,
.page-wrapper .freemium-plans-section .content-wrap,
.page-wrapper .choose-cms-section .content-wrap {
   padding: 0px;
}

.why-cms-section h2,
.freemium-plans-section h2,
.benefit-section h2,
.cms-benefit-section h2,
.choose-cms-section h2 {
   max-width: 500px;
   margin: 0px auto 40px;
}

/* banner-section */
.banner-section {
   position: relative;
}

.banner-section h1 {
   font-family: var(--zf-primary-extrabold);
}

.banner-section .small-head {
   display: block;
   font-size: 16px;
   font-family: var(--zf-primary-semibold);
   color: #f0483e;
   margin-bottom: 5px;
}

.banner-section .banner-image {
   display: none;
}

.banner-section .banner-image .banner-icons {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
}

.banner-section .banner-image .banner-icons li {
   position: absolute;
   margin: 0px;
}

.banner-section .banner-image .banner-icons .bnr-icon-1 {
   max-width: 140px;
   top: 8%;
   right: 13%;
   width: 10%;
}

.banner-section .banner-image .banner-icons .bnr-icon-2 {
   max-width: 156px;
   top: 48%;
   right: 15%;
   width: 13%;
}

.banner-section .banner-image .banner-icons .bnr-icon-3 {
   max-width: 222px;
   bottom: 8%;
   left: 43%;
   width: 18%;
}

.banner-section .banner-image .banner-icons .bnr-icon-4 {
   max-width: 184px;
   top: 54%;
   left: 14%;
   width: 15%;
}

.banner-section .banner-image .banner-icons .bnr-icon-5 {
   max-width: 182px;
   top: 9%;
   left: 11%;
   width: 15%;
}

.banner-section .banner-image .banner-icons .bnr-icon-arrow {
   max-width: 32px;
   width: 4%;
}

.banner-section .banner-image .banner-icons .bnr-icon-arrow-1 {
   top: 23%;
   right: 15%;
   -webkit-transform: rotate(4deg) translateX(-10px);
   transform: rotate(4deg) translateX(-10px);
}

.banner-section .banner-image .banner-icons .bnr-icon-arrow-2 {
   bottom: 10%;
   right: 32%;
   -webkit-transform: rotate(62deg) translateX(-10px);
   transform: rotate(62deg) translateX(-10px);
}

.banner-section .banner-image .banner-icons .bnr-icon-arrow-3 {
   bottom: 6%;
   left: 32%;
   -webkit-transform: rotate(113deg) translateX(-10px);
   transform: rotate(113deg) translateX(-10px);
}

.banner-section .banner-image .banner-icons .bnr-icon-arrow-4 {
   bottom: 51%;
   left: 15%;
   -webkit-transform: rotate(180deg) translateX(-10px);
   transform: rotate(180deg) translateX(-10px);
}

/* banner-section */
/* what-cms-section */
.what-cms-section .what-cms-wrap {
   background: #08215f;
   color: #fff;
}

.what-cms-section .block-content p:last-child {
   margin-bottom: 0px;
}

/* what-cms-section */
/* why-cms-section */
.why-cms-section .points-list li {
   margin-bottom: 40px;
   padding-left: 40px;
}

/* why-cms-section */
/* freemium-plans-section */
.freemium-plans-section .freemium-plans-wrap {
   background: #F2F6FF;
}

.freemium-plans-section .plan-block {
   gap: 25px;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: unset;
   -ms-flex-align: unset;
   -ms-grid-row-align: unset;
   align-items: unset;
}

.freemium-plans-section .plan-box {
   background: #fff;
   border-radius: 10px;
   padding: 30px 30px 30px 40px;
}

.freemium-plans-section .plan-box h4 {
   position: relative;
}

.freemium-plans-section .plan-box h4::before {
   position: absolute;
   content: '';
   left: -15px;
   top: 50%;
   width: 3px;
   height: 24px;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}

.freemium-plans-section .plan-box:nth-child(1) h4::before {
   background: #e42527;
}

.freemium-plans-section .plan-box:nth-child(2) h4::before {
   background: #089949;
}

.freemium-plans-section .plan-box:nth-child(3) h4::before {
   background: #226db4;
}

.freemium-plans-section .plan-box:nth-child(4) h4::before {
   background: #f9b21d;
}

.freemium-plans-section .plan-box p:last-child {
   margin-bottom: 0px;
}

/* freemium-plans-section */
/* benefit-section */

.benefit-section .benefit-box {
   background: #fff;
   border-radius: 10px;
   padding: 30px 20px 30px 35px;
   border-radius: 10px;
   border: 1px solid transparent;
}

.benefit-section .benefit-box:nth-child(1) {
   background: -webkit-linear-gradient(90deg, #FFF7DB 0%, #FFFCF2 100%) 0% 0%;
   background: -webkit-linear-gradient(left, #FFF7DB 0%, #FFFCF2 100%) 0% 0%;
   background: linear-gradient(90deg, #FFF7DB 0%, #FFFCF2 100%) 0% 0%;
   border-color: #FFFCF2;
}

.benefit-section .benefit-box:nth-child(2) {
   background: -webkit-linear-gradient(90deg, #E5FFE7 0%, #F2FFF3 100%) 0% 0%;
   background: -webkit-linear-gradient(left, #E5FFE7 0%, #F2FFF3 100%) 0% 0%;
   background: linear-gradient(90deg, #E5FFE7 0%, #F2FFF3 100%) 0% 0%;
   border-color: #F2FFF3;
}

.benefit-section .benefit-box:nth-child(3) {
   background: -webkit-linear-gradient(90deg, #E4F4FF 0%, #F2FAFF 100%) 0% 0%;
   background: -webkit-linear-gradient(left, #E4F4FF 0%, #F2FAFF 100%) 0% 0%;
   background: linear-gradient(90deg, #E4F4FF 0%, #F2FAFF 100%) 0% 0%;
   border-color: #F2FAFF;
}

.benefit-section .benefit-box h4 {
   font-size: 30px;
}

.benefit-section .benefit-box p:last-child {
   margin-bottom: 0px;
}

.benefit-section .benefit-box p:first-child {
   position: relative;
}

.benefit-section .benefit-box p:first-child::before {
   position: absolute;
   content: '';
   left: -15px;
   top: 2px;
   width: 3px;
   height: 24px;
}

.benefit-section .benefit-box:nth-child(1) p:first-child::before {
   background: #FCD699;
}

.benefit-section .benefit-box:nth-child(2) p:first-child::before {
   background: #72E050;
}

.benefit-section .benefit-box:nth-child(3) p:first-child::before {
   background: #48B2F4;
}

/* benefit-section */
/* choose-cms-section */
.choose-cms-section .choose-cms-wrap {
   background: #0A235E;
}

.choose-cms-section .choose-cms-wrap h2 {
   color: #fff;
}

.choose-cms-section .features-table {
   max-width: 750px;
   margin: 0px auto;
}

.choose-cms-section .fea-content-block .fea-each-box:nth-child(1),
.choose-cms-section .fea-each-block {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

.choose-cms-section .fea-each-box:nth-child(1) {
   width: 35%;
   border-right: 1px solid #0A235E;
}

.choose-cms-section .fea-each-box:nth-child(2) {
   width: 65%;
}

.choose-cms-section .fea-head-block .fea-each-box {
   padding: 20px 30px;
   font-size: 16px;
   font-family: var(--zf-primary-semibold);
   line-height: 1.2;
   background: #FFBF57;
   border-radius: 10px 10px 0px 0px;
}

.choose-cms-section .fea-content-block .fea-each-box {
   padding: 25px 30px;
   background: #fff;
   border-bottom: 1px solid #0A235E;
}

.choose-cms-section .fea-each-block:last-child .fea-each-box {
   border-bottom: 0px;
}

.choose-cms-section .fea-content-block .fea-each-box:nth-child(1) {
   -webkit-box-align: center;
   -ms-flex-align: center;
   -ms-grid-row-align: center;
   align-items: center;
   font-family: var(--zf-primary-semibold);
   font-size: 18px;
}

.choose-cms-section .fea-content-block ul {
   list-style: disc;
   padding-left: 15px;
}

.choose-cms-section .fea-content-block ul li {
   font-family: var(--zf-primary-medium);
}

.choose-cms-section .fea-content-block ul li:last-child {
   margin-bottom: 0px;
}

/* choose-cms-section */
/* cms-benefit-section */
.page-wrapper .cms-benefit-section .content-wrap {
   padding-top: 50px;
}

.cms-benefit-section .cms-benefit-box {
   background: #F7F7F8;
   border-radius: 10px;
   padding: 30px;
}

.cms-benefit-section .cms-benefit-box p:last-child {
   margin-bottom: 0px;
}

.cms-benefit-section .cms-benefit-box .zlist {
   margin-top: 20px;
}

.cms-benefit-section .cms-benefit-box h4 {
   font-family: var(--zf-primary-bold);
   line-height: 1.2;
}

/* cms-benefit-section */
/* bottom-cta-section */
.bottom-cta-section .block-content {
   max-width: 94%;
   margin: 0px auto;
}

.bottom-cta-section .zlist {
   margin: 40px auto;
}

.bottom-cta-section .zlist li {
   text-align: left;
   font-family: var(--zf-primary-semibold);
   font-size: 16px;
}

/* bottom-cta-section */

@media only screen and (max-width: 767px) {
   .content-wrap {
      max-width: 600px;
   }

   .page-wrapper .act-btn,
   .page-wrapper .cta-btn,
   .page-wrapper .bdr-btn {
      padding: 10px 20px;
      font-size: 14px;
   }

   .page-wrapper .cta-box {
      text-align: left;
   }

   .zflex-one-col,
   .zflex-two-col,
   .zflex-three-col {
      -webkit-box-flex: 0;
      -ms-flex: 100%;
      flex: 100%;
   }

   .why-cms-section h2,
   .freemium-plans-section h2,
   .benefit-section h2,
   .cms-benefit-section h2,
   .choose-cms-section h2 {
      margin: 0px 0px 30px;
   }

   .bottom-cta-section .zlist,
   .why-cms-section .points-list li {
      max-width: 100%;
      margin: 30px 0px;
   }

   .why-cms-section .points-box-image,
   .choose-cms-section .fea-head-block {
      display: none;
   }

   .benefit-section .benefit-box:not(:last-child),
   .choose-cms-section .fea-each-block:not(:last-child),
   .cms-benefit-section .cms-benefit-box:not(:last-child) {
      margin-bottom: 25px;
   }

   .choose-cms-section .fea-each-box:nth-child(1) {
      background: #FFBF57;
      border-radius: 10px 10px 0px 0px;
   }

   .choose-cms-section .fea-each-box:nth-child(1),
   .choose-cms-section .fea-each-box:nth-child(2) {
      width: 100%;
      border-right: none;
   }

   .choose-cms-section .fea-content-block .fea-each-box {
      padding: 20px 25px;
   }

   .choose-cms-section .fea-content-block .fea-each-box:nth-child(2) {
      padding: 20px 25px 25px;
      border-radius: 0px 0px 10px 10px;
   }
}

@media only screen and (min-width: 768px) {
   .page-wrapper .content-wrap {
      padding: 70px 0px;
   }

   .page-wrapper .cms-benefit-section .content-wrap {
      padding-top: 70px;
   }

   .page-wrapper .section-block-box,
   .cms-benefit-section .cms-benefit-box {
      padding: 70px 50px;
   }

   .zflex-one-col {
      -webkit-box-flex: 0;
      -ms-flex: 100%;
      flex: 100%;
   }

   .zflex-two-col {
      -webkit-box-flex: 0;
      -ms-flex: 50%;
      flex: 50%;
   }

   .zflex-three-col {
      -webkit-box-flex: 0;
      -ms-flex: 33%;
      flex: 33%;
   }

   .zflex-row-reverse-lg {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
   }

   .banner-section .banner-content {
      text-align: center;
   }

   .banner-section .banner-content,
   .what-cms-section .block-content {
      max-width: 600px;
      margin: 0px auto;
   }

   .banner-section .small-head {
      font-size: 20px;
   }

   .why-cms-section .points-block {
      gap: 30px 4%;
   }

   .why-cms-section .points-box-left {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 38%;
      flex: 0 0 38%;
   }

   .why-cms-section .points-box-right {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 58%;
      flex: 0 0 58%;
   }

   .freemium-plans-section h2,
   .benefit-section h2,
   .cms-benefit-section h2,
   .choose-cms-section h2 {
      text-align: center;
   }

   .freemium-plans-section h2,
   .choose-cms-section h2 {
      max-width: 580px;
   }

   .freemium-plans-section .plan-block {
      gap: 12px;
   }

   .freemium-plans-section .plan-box {
      width: calc(50% - 12px);
   }

   .benefit-section .benefit-block,
   .cms-benefit-section .cms-benefit-block {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: unset;
      -ms-flex-align: unset;
      -ms-grid-row-align: unset;
      align-items: unset;
   }

   .benefit-section .benefit-block {
      gap: 30px;
   }

   .benefit-section .benefit-box {
      padding: 60px 40px 60px 50px;
      width: calc(50% - 30px);
   }

   .cms-benefit-section .cms-benefit-block {
      gap: 20px;
   }

   .cms-benefit-section .cms-benefit-box .zflex-two-col {
      -ms-flex: 100%;
      -webkit-box-flex: 100%;
      flex: 100%;
   }
}

@media only screen and (min-width: 992px) {
   .i18n-en h1 {
      font-size: 42px;
   }

   .page-wrapper .banner-section .content-wrap {
      padding: 150px 0px 230px;
   }

   .banner-section .banner-content {
      max-width: 400px;
   }

   .banner-section .banner-image {
      display: block;
   }

   .banner-section .bnr-icon {
      opacity: 0;
      -webkit-transform: scale(0.60);
      transform: scale(0.60);
      -ms-filter: "alpha(opacity=0)";
   }

   .banner-section .middle-animated .data-loaded .bnr-icon {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
      -ms-filter: "alpha(opacity=100)";
      -webkit-transition: all 900ms cubic-bezier(0.11, 0.16, 0.43, 0.86);
      transition: all 900ms cubic-bezier(0.11, 0.16, 0.43, 0.86);
   }

   .banner-section .bnr-icon-arrow {
      opacity: 0;
      -ms-filter: "alpha(opacity=0)";
   }

   .banner-section .middle-animated .data-loaded .bnr-icon-arrow {
      opacity: 1;
      -ms-filter: "alpha(opacity=100)";
      -webkit-transition: all 900ms cubic-bezier(0.11, 0.16, 0.43, 0.86);
      transition: all 900ms cubic-bezier(0.11, 0.16, 0.43, 0.86);
   }

   .banner-section .middle-animated .data-loaded .bnr-icon-1 {
      -webkit-transition-delay: 400ms;
      transition-delay: 400ms;
   }

   .banner-section .middle-animated .data-loaded .bnr-icon-arrow-1 {
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms;
   }

   .banner-section .middle-animated .data-loaded .bnr-icon-2 {
      -webkit-transition-delay: 800ms;
      transition-delay: 800ms;
   }

   .banner-section .middle-animated .data-loaded .bnr-icon-arrow-2 {
      -webkit-transition-delay: 1000ms;
      transition-delay: 1000ms;
   }

   .banner-section .middle-animated .data-loaded .bnr-icon-3 {
      -webkit-transition-delay: 1200ms;
      transition-delay: 1200ms;
   }

   .banner-section .middle-animated .data-loaded .bnr-icon-arrow-3 {
      -webkit-transition-delay: 1400ms;
      transition-delay: 1400ms;
   }

   .banner-section .middle-animated .data-loaded .bnr-icon-4 {
      -webkit-transition-delay: 1600ms;
      transition-delay: 1600ms;
   }

   .banner-section .middle-animated .data-loaded .bnr-icon-arrow-4 {
      -webkit-transition-delay: 1800ms;
      transition-delay: 1800ms;
   }

   .banner-section .middle-animated .data-loaded .bnr-icon-5 {
      -webkit-transition-delay: 2000ms;
      transition-delay: 2000ms;
   }

   .cms-benefit-section .cms-benefit-box {
      width: calc(50% - 20px);
   }

   .cms-benefit-section .cms-benefit-box:last-child {
      width: calc(100% - 20px);
   }

   .cms-benefit-section .cms-benefit-box .zlist {
      margin-top: 0px;
   }

   .cms-benefit-section .cms-benefit-box .zflex-two-col {
      -ms-flex: 50%;
      -webkit-box-flex: 50%;
      flex: 50%;
   }

   .cms-benefit-section .cms-benefit-box .cms-benefit-content {
      max-width: 460px;
      margin-right: 30px;
   }

   .bottom-cta-section .block-content {
      max-width: 750px;
   }
}

@media only screen and (min-width: 1200px) {
   .page-wrapper .content-wrap {
      padding: 90px 0px;
   }

   .page-wrapper .banner-section .content-wrap {
      padding: 150px 0px 230px;
   }

   .page-wrapper .cms-benefit-section .content-wrap {
      padding-top: 90px;
   }

   /* .page-wrapper .what-cms-section .content-wrap,
   .page-wrapper .cms-benefit-section .content-wrap,
   .page-wrapper .freemium-plans-section .content-wrap,
   .page-wrapper .choose-cms-section .content-wrap {
      max-width: 1450px;
   } */

   .page-wrapper .section-block-box {
      padding: 90px 80px;
   }

   .page-wrapper ul li {
      font-size: 17px;
   }

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

   .i18n-en h2 {
      font-size: 36px;
   }

   .banner-section .banner-image .banner-icons .bnr-icon-1 {
      top: 4%;
   }

   .why-cms-section h2,
   .freemium-plans-section h2,
   .benefit-section h2,
   .cms-benefit-section h2,
   .choose-cms-section h2,
   .bottom-cta-section h2 {
      max-width: 750px;
   }

   .why-cms-section h2 {
      margin-left: 0px;
      margin-right: 0px;
   }

   .choose-cms-section h2,
   .freemium-plans-section h2 {
      max-width: 840px;
   }

   .banner-section .banner-content {
      max-width: 510px;
   }

   .banner-section .small-head {
      font-size: 24px;
   }

   .what-cms-section .block-content {
      max-width: 810px;
   }

   .freemium-plans-section .plan-box {
      padding: 50px 50px 50px 60px;
   }

   .freemium-plans-section .plan-box h4 {
      font-size: 24px;
   }

   .benefit-section .benefit-block {
      max-width: 100%;
   }

   .benefit-section .benefit-box {
      width: calc(33.33% - 30px);
   }

   .choose-cms-section .fea-head-block .fea-each-box {
      padding: 2% 4%;
   }

   .choose-cms-section .fea-content-block .fea-each-box {
      padding: 3% 4%;
   }

   /* 
   .choose-cms-section .fea-each-box:nth-child(1) {
      padding-left: 5%;
   } */

   .choose-cms-section .fea-head-block .fea-each-box {
      font-size: 20px;
   }

   .choose-cms-section .fea-content-block .fea-each-box:nth-child(1) {
      font-size: 24px;
   }

   .cms-benefit-section .cms-benefit-box {
      padding: 70px;
      width: calc(50% - 20px);
   }

   .cms-benefit-section .cms-benefit-box h4 {
      font-size: 34px;
   }

   .bottom-cta-section .zlist li {
      font-size: 20px;
   }
}

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

   .i18n-en h1 {
      font-size: 60px;
   }

   .i18n-en h2 {
      font-size: 40px;
   }
}