:root {
   --yellow-color: #ffb939;
}

.zinline-block {
   display: inline-block
}

.page-wrapper .content-wrap {
   max-width: 1170px;
   padding: 90px 0
}

.page-wrapper h1 {
   font-size: 52px;
   margin-bottom: 20px;
}

.page-wrapper h2 {
   font-size: 42px
}

.page-wrapper h3 {
   font-size: 27px
}

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

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

.act-btn,.cta-btn {
   padding: 12px 30px
}

.watch-video-btn {
   color: #000;
   padding: 10px 0 10px 38px;
   text-transform: none;
   position: relative;
   display: inline-block;
   font-family: var(--zf-primary-semibold);
   margin: 10px 15px;
   cursor: pointer
}

.watch-video-btn:after,.watch-video-btn:before {
   position: absolute;
   content: ''
}

.watch-video-btn:before {
   left: 0;
   top: 10px;
   width: 26px;
   height: 26px;
   border: 1px solid #000;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   border-radius: 100%
}

.watch-video-btn:after {
   left: 11px;
   top: 18px;
   width: 0;
   height: 0;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
   border-left: 7px solid #000
}

.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
}

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

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

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

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

.page-wrapper .breadcrumb .content-wrap {
   max-width: 1280px;
   padding: 30px 0 0
}

.breadcrumb ul.flex-content {
   justify-content: initial
} 

.breadcrumb ul li {
   font-size: 15px;
   line-height: 1.6;
   padding-right: 20px;
   position: relative
}

.breadcrumb ul li:last-child {
   padding-right: 0
}

.breadcrumb ul li:after {
   content: '';
   position: absolute;
   top: 10px;
   right: 8px;
   width: 6px;
   height: 6px;
   border-top: 1px solid #000;
   border-right: 1px solid #000;
   transform: rotate(45deg)
}

.breadcrumb ul li:last-child:after {
   display: none
}

.breadcrumb ul li a {
   color: var(--zqe-link-clr);;
   font-family: var(--zf-secondary-medium)
}

.breadcrumb ul li a:hover {
    border-bottom: 1px solid var(--zqe-link-clr);
}

.breadcrumb ul li:last-child a {
   color: rgba(0,0,0,0.56)
}

.breadcrumb,.banner-section,.bottom-cta-section,.zw-product-header {
   background: var(--zqe-light-green-bg)
}

.page-wrapper .banner-section .content-wrap {
   padding-top:50px
}

.banner-section .banner-content {
   max-width: 950px;
   margin: 0 auto;
   text-align: center
}

.banner-section .banner-content p {
   max-width: 750px;
   margin: 0 auto 20px
}

.banner-section .banner-content p:last-child {
   margin-bottom: 0
}

.banner-section p:last-child,.guide-section .zguide-block .zguide-box p:last-child,.guide-section .zguide-block .zguide-fea-block .fea-box p:last-child,.guide-section .zguide-block .zguide-imp-box p:last-child {
   margin-bottom: 0
}

.page-wrapper .guide-section .content-wrap {
   padding-top: 0
}

.guide-section .zguide-block {
   padding-top: 60px;
   -webkit-box-align: unset;
   -ms-flex-align: unset;
   align-items: unset;
   gap: 7%
}

.guide-section .zguide-block .zguide-block-sidebar {
   display: block;
   -webkit-box-flex: 0;
   -ms-flex: 0 0 28%;
   flex: 0 0 28%
}

.guide-section .zguide-block .zguide-block-content {
   -webkit-box-flex: 0;
   -ms-flex: 0 0 67%;
   flex: 0 0 65%
}

.guide-section .zguide-block .zguide-block-content .fullwidth-box:first-child{
   padding-top: 0px;
}

.guide-section .zguide-menu {
   position: sticky;
   top: 100px
}

.guide-section .zguide-menu ul {
   border-left: 1px solid #e1e1e1;
   padding-left: 30px
}

.guide-section .zguide-menu ul li {
   margin-bottom: 15px;
   cursor: pointer;
   padding: 6px 0;
   position: relative;
   font-size: 17px
}

.guide-section .zguide-menu ul li.active {
   color: var(--zqe-green-bg);
   font-family: var(--zf-secondary-semibold)
}

.guide-section .zguide-menu ul li.active::before {
   content: '';
   background: var(--zqe-green-bg);
   border-radius: 10px;
   height: 110%;
   width: 5px;
   position: absolute;
   left: -33px;
   top: 0;
   bottom: 0;
   margin: auto
}

.guide-section .zguide-sub-box ul.steps-list li {
   padding-left: 0
}

.guide-section .zguide-sub-box ul.steps-list li::before {
   border: 0
}

.guide-section .zguide-sub-box ul li {
   position: relative;
   padding-left: 28px;
   margin-bottom: 10px
}

.guide-section .zguide-sub-box ul li::after,.guide-section .zguide-sub-box ul li::before {
   content: '';
   position: absolute;
   top: 12px
}

.guide-section .zguide-sub-box ul li::before {
   left: 5px;
   width: 8px;
   height: 4px;
   border-left: 1px solid #132610;
   border-bottom: 1px solid #132610;
   -webkit-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg)
}

.guide-section .zguide-sub-box ul li::after {
   width: 17px;
   height: 17px;
   left: 0;
   top: 6px;
   border-radius: 50%;
   border: 1px solid #132610
}

.guide-section .zguide-sub-box ul.steps-points-list,.guide-section .zguide-sub-box ul.steps-points-list li {
   position: relative
}

.guide-section .zguide-sub-box ul.steps-points-list li {
   padding-left: 35px
}

.guide-section .zguide-sub-box ul.steps-points-list::before {
   content: '';
   background: #e5f1ea;
   width: 1.5px;
   height: 0;
   position: absolute;
   top: 9px;
   left: 8px;
   -webkit-transition: height 2s linear;
   transition: height 2s linear
}

.guide-section .zguide-sub-box ul.steps-points-list.zwe-op::before {
   height: 92%
}

.guide-section .zguide-sub-box ul.steps-points-list li::before {
   content: '';
   background: var(--zqe-green-bg);
   width: 7px;
   height: 7px;
   position: absolute;
   top: 10px;
   left: 5px;
   border-radius: 50%;
   z-index: 1
}

.guide-section .zguide-sub-box ul.steps-points-list li::after {
   content: '';
   background: #fff;
   width: 17px;
   height: 17px;
   position: absolute;
   top: 5px;
   left: 0;
   border-radius: 50%;
   border: 1px solid var(--zqe-green-bg)
}

.guide-section .zguide-sub-box ul+p {
   margin-top: 20px;
   margin-bottom: 0
}

.guide-section .zguide-block .zguide-box.zcenter-box {
   text-align: center
}

.guide-section .zguide-block .zguide-box {
   padding: 60px 40px
}

.guide-section .zguide-block .zguide-box .note-box {
   margin-top: 30px
}

.guide-section .zguide-block .zguide-box .zguide-img-box {
   margin: 30px 0 25px
}

.guide-section .zguide-block .zguide-box.green-bg,.guide-section .zguide-block .zguide-box.dgreen-bg,.guide-section .zguide-block .zguide-box.yellow-bg,.guide-section .zguide-block .zguide-box.gray-bg {
   border-radius: 10px
}

.guide-section .zguide-block .zguide-box.dgreen-bg {
   background: var(--zqe-green-bg);
   color: #fff
}

.guide-section .zguide-block .zguide-box.green-bg {
   background: var(--zqe-light-green-bg)
}

.guide-section .zguide-block .zguide-box.yellow-bg {
   background: var(--zqe-yellow-bg)
}

.guide-section .zguide-block .zguide-box.gray-bg {
   background: var(--zqe-gray-bg)
}

.guide-section .zguide-block .zguide-sub-box:not(:last-child) {
   margin-bottom: 50px
}

.guide-section .zguide-block p a, .guide-summary-section p a {
   color: var(--zqe-link-clr);
   text-decoration: underline
}

.guide-summary-section a {
   color: var(--zqe-link-clr-dark);
}

.guide-section .zguide-block .zguide-fea-block {
   -webkit-box-align: unset;
   -ms-flex-align: unset;
   -ms-grid-row-align: unset;
   align-items: unset;
   gap: 20px;
   margin-top: 30px
}

.guide-section .zguide-block .zguide-fea-block .fea-box {
   -webkit-box-flex: 0;
   -ms-flex: 0 0 calc(50% - 10px);
   flex: 0 0 calc(50% - 10px);
   padding: 30px;
   border-radius: 10px;
   border: 1px solid #e1e1e1
}

.guide-section .zguide-block .zguide-fea-block .fea-box.fullbox,.guide-section .zguide-block .zguide-fea-block.fullwithbox .fea-box {
   -ms-flex: 0 0 100%;
   flex: 0 0 100%
}

.guide-section .zguide-block .zguide-fea-block .fea-box h3,.guide-section .zguide-block .zguide-fea-block .fea-box h4 {
   font-size: 23px
}

.guide-section .zguide-block .yellow-bg .zguide-fea-block .fea-box,.guide-section .zguide-block .green-bg .zguide-fea-block .fea-box,.guide-section .zguide-block .dgreen-bg .zguide-fea-block .fea-box {
   background: #fff;
   color: #000
}

.guide-section .zguide-block .zguide-fea-block ul li {
   line-height: 1.6;
   font-size: 17px
}

.guide-section .zguide-block .ztick-icon {
   display: inline-block;
   position: relative;
   background: #ccc;
   border-radius: 100%;
   height: 28px;
   width: 28px;
   margin-bottom: 10px
}

.guide-section .zguide-block .ztick-icon::before {
   content: '';
   position: absolute;
   transform: rotate(50deg) translate(-50%,-50%);
   left: 7px;
   top: 13px;
   height: 15px;
   width: 8px;
   border-bottom: 2px solid #fff;
   border-right: 2px solid #fff
}

.guide-section .zguide-block .fullwidth-box,
.guide-section .zguide-block .fullwidth-green-box,
.guide-section .zguide-block .fullwidth-yellow-box,
.guide-section .zguide-block .fullwidth-black-box,
.guide-section .zguide-block .steps-box {
   padding-inline:0
}

.guide-section .zguide-block .btmspace {
   margin-bottom: 60px
}

.guide-section .zguide-block .nobtmspace {
   padding-bottom: 0
}

.guide-section .zguide-block .fullwidth-yellow-box .fea-box {
   border-color: var(--yellow-color)
}

.guide-section .zguide-block .fullwidth-black-box .fea-box {
   border-color: var(--zqe-dark-green-bg)
}

.guide-section .zguide-block .fullwidth-green-box .fea-box {
   border-color: var(--zqe-green-bg)
}

.guide-section .zguide-block .fullwidth-yellow-box .fea-box .ztick-icon {
   background: var(--yellow-color)
}

.guide-section .zguide-block .fullwidth-black-box .fea-box .ztick-icon {
   background: var(--zqe-dark-green-bg)
}

.guide-section .zguide-block .fullwidth-green-box .fea-box .ztick-icon {
   background: var(--zqe-green-bg)
}

.guide-section .zguide-block .zguide-box.gray-bg .fea-box {
   background: #fff
}

.guide-section .zguide-block .zguide-imp-box {
   background: var(--zqe-gray-bg);
   padding: 30px;
   border: 1px dashed rgba(0,0,0,.094);
   border-radius: 3px;
   margin-top: 30px
}

.guide-section .zguide-block .steps-box {
   counter-reset: stepcounter
}

.guide-section .zguide-block .steps-box .fea-box {
   position: relative;
   background: var(--zqe-gray-bg);
   padding: 30px 60px 30px 90px
}

.guide-section .zguide-block .steps-box .fea-box::before {
   counter-increment: stepcounter;
   content: counter(stepcounter);
   font-family: var(--zf-primary-semibold);
   font-size: 22px;
   position: absolute;
   top: 25px;
   left: 23px;
   background: #fff;
   color: var(--zqe-text-green);
   padding: 6px 8px;
   border: 2px dotted #8d8d8d;
   border-radius: 50%;
   width: 48px;
   height: 48px;
   text-align: center
}

.guide-section .zguide-block .steps-box .fea-box h3,.guide-section .zguide-block .zguide-box.gray-bg .fea-box h3,.guide-section .zguide-block .steps-box .fea-box h4,.guide-section .zguide-block .zguide-box.gray-bg .fea-box h4 {
   color: var(--zqe-text-green)
}

.guide-section .zguide-block .fea-box .compprod-logo {
   margin-bottom: 15px
}

.guide-summary-section {
   background: var(--zqe-dark-green-bg);
   color: #fff
}

.guide-summary-section .block-content {
   text-align: center;
   max-width: 850px;
   margin: 0 auto
}

.guide-summary-section .block-content p:last-child {
   margin-bottom: 0
}

.bottom-cta-section .block-content {
   text-align: center;
   max-width: 720px;
   margin: 0 auto
}

.faq-section h2 {
   max-width: 560px;
   margin: 0 auto 30px
}

.guide-section .zguide-table {
  /*  max-width: 860px; */
   margin-top: 30px;
}

.guide-section .zguide-table .fea-each-block,.guide-section .zguide-table .fea-each-box {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex
}

.guide-section .zguide-table .fea-each-box {
   padding: 15px 25px;
   width: 37%
}

.guide-section .zguide-table .fea-each-box:first-child {
   width: 26%
}

.guide-section .zguide-table .fea-head-block .fea-each-box{
   background: var(--zqe-green-bg);
   color: #FFF;
   line-height: 1.2;
   border: 1px solid rgba(0,0,0,0.04)
}

.guide-section .zguide-table .fea-head-block .fea-each-box .zguide-table-title {
   font-size: 20px;
   font-family: var(--zf-primary-semibold);
   margin-bottom: 0px;
}

.guide-section .zguide-table .fea-content-block .fea-each-box {
   background: var(--zqe-gray-bg);
   border: 1px solid rgba(0,0,0,0.04);
   font-size: 17px
}

.guide-section .zguide-table .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
}

.zguide-box-banner{
   background: var(--zqe-green-bg);
   color: #fff;
   padding: 8%; 
   border-radius: 9px;
   margin-top: 60px;
   text-align: center;
}

.zguide-box-banner h2{
   font-size: 40px;
}

.zguide-box-banner .cta-btn{
   margin-top: 12px;
   background: #FFF;
   color: #000;
}

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

   .page-wrapper .banner-section .content-wrap {
      padding-top:50px
   }

   .page-wrapper h1 {
       font-size: 40px
   }

   .page-wrapper h2,
   .zguide-box-banner h2 {
       font-size: 30px
   }
}

@media only screen and (max-width: 1024px) {
   .page-wrapper h1 {
       font-size:34px
   }

   .page-wrapper h2,
   .zguide-box-banner h2 {
       font-size: 28px
   }

   .page-wrapper h3 {
       font-size: 21px
   }
}

@media only screen and (max-width: 991px) {
   .page-wrapper h1 {
       font-size:30px
   }

   .page-wrapper h2,
   .zguide-box-banner h2 {
       font-size: 25px
   }

   .page-wrapper h3 {
       font-size: 21px
   }

   .guide-section .zguide-block .zguide-fea-block ul li,.guide-section .zguide-menu ul li,.page-wrapper ul li {
       font-size: 15px;
       line-height: 1.8
   }

   .banner-section .banner-content {
       max-width: 580px
   }

   .guide-section .zguide-block .zguide-block-sidebar {
       display: none
   }

   .guide-section .zguide-block .zguide-block-content,.guide-section .zguide-block .zguide-block-sidebar {
       -ms-flex: 0 0 100%;
       flex: 0 0 100%
   }
}

@media only screen and (max-width: 767px) {
   .page-wrapper .banner-section .content-wrap {
       padding-top:30px
   }

   .page-wrapper .banner-section .content-wrap,.page-wrapper .content-wrap {
       max-width: 600px
   }

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

   .breadcrumb li {
       font-size: 16px
   }

   .banner-section .banner-content,.guide-summary-section .block-content,.bottom-cta-section .block-content,.guide-section .zguide-block .zguide-box.zcenter-box {
       text-align: unset
   }

   .guide-section .zguide-block {
       padding-top: 0
   }

   .guide-section .zguide-block .zguide-box {
       padding: 30px 20px;
       margin-top: 50px
   }

   .guide-section .zguide-block .btmspace {
       margin-bottom: 30px
   }

   .guide-section .zguide-block .nobtmspace {
       padding-bottom: 0
   }

   .guide-section .zguide-block .steps-box,.guide-section .zguide-block .fullwidth-box,.guide-section .zguide-block .fullwidth-green-box,.guide-section .zguide-block .fullwidth-yellow-box,.guide-section .zguide-block .fullwidth-black-box {
       padding: 0
   }

   .guide-section .zguide-block .zguide-fea-block .fea-box {
       -ms-flex: 0 0 100%;
       flex: 0 0 100%
   }

   .guide-section .zguide-block .zguide-fea-block .fea-box:not(:last-child) p:last-child {
       margin-bottom: 10px
   }

   .guide-section .zguide-block .zguide-fea-block .fea-box {
       padding: 30px 20px
   }

   .guide-section .zguide-block .zguide-fea-block .fea-box h3,.guide-section .zguide-block .zguide-fea-block .fea-box h4 {
       font-size: 19px
   }

   .guide-section .zguide-block .steps-box .fea-box {
       padding: 80px 20px 30px
   }

   .guide-section .zguide-block .steps-box .fea-box::before {
       width: 45px;
       height: 45px;
       top: 20px;
       left: 20px
   }

   .guide-section .zguide-block .zguide-block-content {
       overflow: hidden
   }

   .guide-section .zguide-table {
       overflow-x: auto
   }

   .guide-section .zguide-table .fea-each-block {
       width: 650px
   }

   .guide-section .zguide-table .fea-head-block .fea-each-box .zguide-table-title {
       font-size: 18px
   }

   .guide-section .zguide-table .fea-content-block .fea-each-box {
       font-size: 14px
   }

   .guide-section .zguide-table .fea-content-block .fea-each-box:nth-child(1) {
       font-size: 16px
   }

   .guide-section .zguide-table .fea-each-box {
       padding: 15px 20px
   }
}

.i18n-ar .breadcrumb ul li {
   padding-left: 40px;
   padding-right: unset
}

.i18n-ar .breadcrumb ul li:after {
   left: 20px;
   right: unset;
   border-left: 1px solid #000;
   transform: rotate(-45deg);
   border-right: 0
}