:root {
   --sprite-icon: url("/sites/zweb/images/contracts/chatgpt-integration/sprite.png")
}

.znote{
   padding-top: 40px;
   font-family: var(--secondaryfont-semibold);
   font-size: 14px;
   color: #808080;
}

.zinline-block {
   display: inline-block
}

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

h1,h2 {
   font-family: var(--zf-primary-bold)
}

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

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

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

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

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

.page-wrapper .zblock-title {
   max-width: 500px;
   margin-bottom: 60px
}

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

.page-wrapper .cta-wrap {
   margin-top: 40px;
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
   justify-content: center
}

.page-wrapper .zdemo-cta {
   display: inline-block;
   font-family: var(--zf-primary-semibold),sans-serif;
   padding: 12px 30px;
   border: 1px solid #000;
   cursor: pointer;
   z-index: 1;
   font-size: 15px;
   text-transform: uppercase;
   position: relative;
   text-align: center;
   color: #000
}

.page-wrapper .mob-only {
   display: none
}

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

[class|="zsprite"] {
   display: inline-block;
   background: var(--sprite-icon) no-repeat;
   background-size: 405px auto;
   background-position: 0 0;
   letter-spacing: -40px
}

.zsprite-bnft-icon1 {
   background-position: 0 -97px;
   width: 29px;
   height: 26px
}

.zsprite-bnft-icon2 {
   background-position: -38px -97px;
   width: 28px;
   height: 29px
}

.zsprite-bnft-icon3 {
   background-position: -78px -97px;
   width: 29px;
   height: 29px
}

.zsprite-bnft-icon4 {
   background-position: -123px -97px;
   width: 28px;
   height: 28px
}

.zsprite-bnft-icon5 {
   background-position: -166px -97px;
   width: 26px;
   height: 29px
}

.zsprite-bnft-icon6 {
   background-position: -207px -97px;
   width: 30px;
   height: 29px
}

[class|="zsprite-fea"] {
   margin-bottom: 20px
}

.zsprite-fea-icon1 {
   background-position: 0 -5px;
   width: 68px;
   height: 65px
}

.zsprite-fea-icon2 {
   background-position: -83px -5px;
   width: 69px;
   height: 65px
}

.zsprite-fea-icon3 {
   background-position: -167px 0;
   width: 74px;
   height: 70px
}

.zsprite-fea-icon4 {
   background-position: -341px -5px;
   width: 64px;
   height: 65px
}

.zsprite-fea-icon5 {
   background-position: -256px -2px;
   width: 70px;
   height: 69px
}

.banner-section {
   max-width: 1350px;
   margin: 50px auto 0;
   border-radius: 32px;
   background: rgba(31,74,176,0.06)
}

.banner-section h1 {
   color: var(--zcnt-blue-txt-clr)
}

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

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

.chatgptcm-section .chatgptcm-list {
   padding-right: 10%
}

.chatgptcm-section .chatgptcm-list li {
   position: relative;
   padding-left: 32px
}

.chatgptcm-section .chatgptcm-list li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 10px;
   height: 18px;
   width: 8px;
   border-bottom: 2px solid var(--zcnt-dark-blue-bg);
   border-right: 2px solid var(--zcnt-dark-blue-bg);
   transform: rotate(50deg) translate(-50%,-50%)
}

.chatgptcm-section .chatgptcm-list li:not(:last-child) {
   margin-bottom: 20px
}

.benefits-section {
   background: var(--zcnt-dark-blue-bg);
   color: #fff
}

.benefits-section .bnft-block {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   gap: 30px 50px
}

.benefits-section .bnft-block .bnft-box {
   position: relative;
   width: calc(33% - 31px);
   display: flex;
   gap: 15px 20px;
   align-items: center
}

.benefits-section .bnft-block .bnft-box p {
   font-size: 18px;
   line-height: 1.4;
   margin-bottom: 0
}

.benefits-section .bnft-block .bnft-box p span {
   display: block
}

.feature-box-section {
   background: var(--zcnt-gray-bg)
}

.feature-box-section .flex-content {
   -webkit-box-align: unset;
   -ms-flex-align: unset;
   -ms-grid-row-align: unset;
   align-items: unset;
   gap: 40px 80px
}

.feature-box-section .fea-title {
   max-width: 800px;
   margin: 0 auto 60px;
   text-align: center
}

.feature-box-section .fea-box {
   -webkit-box-flex: 0;
   -ms-flex: 0 0 calc(50% - 40px);
   flex: 0 0 calc(50% - 40px)
}

.feature-box-section .fea-box h3 {
   font-size: 32px;
   line-height: 1.2
}

.feature-box-section .fea-box .fea-content {
   max-width: 500px
}

.feature-box-section .img-fea-box .fea-image {
   opacity: 0;
   -webkit-transform: translateX(30px);
   -ms-transform: translateX(30px);
   transform: translateX(30px);
   -ms-filter: "alpha(opacity=0)";
   -webkit-transition: all 1000ms cubic-bezier(0.11,0.16,0.43,0.86);
   -o-transition: all 1000ms cubic-bezier(0.11,0.16,0.43,0.86);
   transition: all 1000ms cubic-bezier(0.11,0.16,0.43,0.86)
}

.feature-box-section .img-fea-box.zwe-op .fea-image {
   opacity: 1;
   -webkit-transform: translateX(0);
   -ms-transform: translateX(0);
   transform: translateX(0);
   -ms-filter: "alpha(opacity=100)"
}

.feature-box-section .fea-box p:last-child {
   margin-bottom: 0
}

.feature-box-section .fea-box.img-fea-box {
   display: flex;
   justify-content: center;
   align-items: end
}

.bottom-cta-section {
   background: var(--zcnt-dark-blue-bg);
   color: #fff
}

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

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

.page-wrapper .bottom-cta-section .zdemo-cta {
   border-color: #fff;
   color: #fff
}

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

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

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

   .feature-box-section .fea-box h3,.page-wrapper h3 {
       font-size: 27px
   }
}

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

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

   .feature-box-section .fea-box h3,.page-wrapper h3 {
       font-size: 24px
   }

   .benefits-section .bnft-block .bnft-box {
       flex-direction: column;
       align-items: unset
   }

   .benefits-section .bnft-block .bnft-box p {
       font-size: 16px
   }

   .benefits-section .bnft-block .bnft-box p span {
       display: unset
   }
}

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

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

   .feature-box-section .fea-box h3,.page-wrapper h3 {
       font-size: 21px
   }

   .page-wrapper .zblock-title,.feature-box-section .fea-title,.bottom-cta-section .block-content {
       max-width: 500px;
       margin-bottom: 30px
   }

   .chatgptcm-section .zflex-two-col {
       -ms-flex: 0 0 100%;
       flex: 0 0 100%
   }

   .chatgptcm-section .zblock-image {
       max-width: 450px
   }

   .chatgptcm-section .chatgptcm-list {
       padding-left: 0;
       padding-right: 0;
       margin-bottom: 50px
   }

   .benefits-section .bnft-block {
       gap: 30px
   }

   .benefits-section .bnft-block .bnft-box {
       width: calc(50% - 25px)
   }
}

@media only screen and (max-width: 767px) {
   .page-wrapper .mob-only {
       display:block
   }

   .page-wrapper .content-wrap {
       padding: 50px 0;
       max-width: 600px
   }
   .page-wrapper .cta-wrap {
       justify-content: unset
   }

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

   .feature-box-section .fea-icon {
       -webkit-transform: scale(0.7) translate(-20%,5%);
       transform: scale(0.7) translate(-20%,5%)
   }

   .page-wrapper .zblock-title,.feature-box-section .fea-title {
       margin-bottom: 40px
   }

   .feature-box-section .fea-box .fea-content {
       max-width: 100%
   }

   .feature-box-section .fea-box.img-fea-box {
       display: none
   }

   .page-wrapper .zblock-title,.feature-box-section .fea-title,.banner-section .banner-content,.bottom-cta-section .block-content {
       text-align: unset;
       max-width: 100%
   }
}

@media only screen and (max-width: 480px) {
   .benefits-section .bnft-block .bnft-box {
       width:100%
   }
}