*, h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}
.videocta{
  padding: 0 0 80px;
  margin-left: -40px;
}
.videocta-cont{
  border: 1px solid #1fa763;
  text-transform: uppercase;
  font: 18px / 1.2 var(--zf-primary-regular);
  padding: 16px 40px 16px 60px;
  border-radius: 30px;
  color: #fff;
  background-color: #000;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all .3s ease-in-out;
  z-index: 1;
  position: relative;
  cursor: pointer;
}
.bg_lazy_loaded .videocta:before {
    background-image: url(/sites/zweb/images/desk/zd-ai-agent-sprite-2x.webp);
}
.zwc-watch-video:focus, .studo-img:focus {
  outline: none !important;
  box-shadow: none !important;
}
.ftrsec-studio .iner-hdr{
  position: relative;
  z-index: 1;
}
.videocta:before {
    content: '';
    background-size: 1440px auto;
    background-position: -592px -167px;
    width: 64px;
    height: 65px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    left: 40px;
    display: inline-block;
    z-index: 2;
    cursor: pointer;
}
.desk-breadcrumb {
    list-style-type: none;
    max-width: 1280px;
    margin: 0 auto;
    width: 90%;
}
.desk-breadcrumb li {
    display: inline-block;
    margin-right: 25px;
    font: 12px / 1.2 var(--zf-primary-semibold);
    color: #fff;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}
.desk-features-link {
    color: #ffffff69;
    position: relative;
    display: inline-block;
}
.desk-features-link:before {
    content: ">";
    position: absolute;
    right: -15px;
    display: inline-block;
}
.desk-features-link:after {
    content: '';
    display: block;
    position: absolute;
    left: auto;
    right: 0;
    bottom: -4px;
    height: 1px;
    width: 0;
    background: #fff;
    transition: all .3s linear;
}
.desk-features-link:hover {
    color: #fff;
}
.desk-features-link:hover:after {
    width: 100%;
    left: 0;
    right: auto;
    transition: all .2s linear;
}
h1{
  font: 88px / 1 var(--zf-primary-bold);
  padding-bottom: 20px;
}
.cta-btn{
  border-radius: 20px;
  margin-right: 20px;
  width: 220px;
}
/* --- START: REUSABLE VIEWPORT ANIMATION SYSTEM --- */
.anim-item {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.anim-item.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}
/* --- END: REUSABLE VIEWPORT ANIMATION SYSTEM --- */
.ai-agent{
  background: #000;
  color: #fff;
  overflow: hidden;
  margin-top: -70px;
}
.ai-agent-bg{
  position: relative;
  padding-top: 90px;
  max-width: 1440px;
  margin: 0 auto;
}
.ai-bg-rotating-layer {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 150%;
  height: 150%;
  background: radial-gradient( circle, rgba(33, 105, 44, 0.5) 0%, rgba(33, 105, 44, 0.5) 20%, rgba(16, 37, 28, 0.2) 40%, rgba(16, 37, 28, 0.1) 60%, transparent 80% );
  animation: move-bg 35s ease-in-out infinite alternate;
  z-index: 0;
  filter: blur(20px);
  opacity: 0.6;
  pointer-events: none;
  mix-blend-mode: screen;
}
.ai-bg-rotating-layerone{
  position: absolute;
  top: -50%;
  right: -50%;
  width: 150%;
  height:150%;
  background: radial-gradient( circle, rgba(79, 93, 29, 0.5) 0%, rgba(79, 93, 29, 0.5) 20%, rgba(16, 37, 28, 0.2) 40%, rgba(16, 37, 28, 0.1) 60%, transparent 80% );
  animation: move-bg-one 25s ease-in-out infinite alternate;
  z-index: 0;
  filter: blur(20px);
  opacity: 0.4;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes move-bg-one {
  0% { transform: translate(0%, 0%); }
  20% { transform: translate(0%, 45%); }
  40% { transform: translate(-30%, 25%); }
  60% { transform: translate(-60%, 5%); }
  80% { transform: translate(-70%, 42%); }
  90% { transform: translate(-30%, 25%); }
  100% { transform: translate(0%, 0%); }
}
@keyframes move-bg {
  0% { transform: translate(0%, 0%); }
  20% { transform: translate(0%, 55%); }
  40% { transform: translate(18%, 24%); }
  60% { transform: translate(38%, 0%); }
  80% { transform: translate(38%, 40%); }
  90% { transform: translate(18%, 24%); }
  100% { transform: translate(0%, 0%); }
}
.star-wrapper,
.zd-lines > svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bg_lazy_loaded .sparkle {
  background-image: url('/sites/zweb/images/desk/zd-ai-agents-star-line.svg');
  background-size: cover;
  background-repeat: no-repeat;
}
 .sparkle {
  position: absolute;
  width: 74px;
  height: 150px;
  opacity: 0;
  animation: starBlast 3s ease-out infinite;
  animation-fill-mode: forwards;
  --rotation: 0deg;
  transform-origin: bottom center;
}
@keyframes starBlast {
  0% { transform: rotate(var(--rotation)) translateY(0) scale(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: rotate(var(--rotation)) translateY(100px) scale(1); opacity: 0; }
}
.star1 { top: 19%; left: 19.7%; width: 64px; height: 130px; --rotation: 115deg; animation-delay: 0s; }
.star2 { top: 10%; left: 71.4%; width: 54px; height: 110px; --rotation: 232deg; animation-delay: 0.6s; }
.star3 { top: 13%; left: 52.5%; width: 44px; height: 90px; --rotation: 196deg; animation-delay: 1.2s; }
.star4 { top: 33%; left: 77%; width: 34px; height: 70px; --rotation: -105deg; animation-delay: 1.8s; }
.star5 { top: 9%; left: 35.3%; width: 50px; height: 100px; --rotation: 149deg; animation-delay: 2.4s; }

.zd-cards{
  position: relative;
  padding-top: 150px;
  text-align: center;
}
.zd-cards-inner{
  max-width: 1800px;
  margin: 0 auto;
  position: relative;
  text-align: left;
}
.zd-cards .iner-hdr{
  max-width: 910px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 25px;
}
.zd-lines{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}
.zd-lines > .line{
  opacity: 0.1;
}
.zd-line-star, .zd-line-star-hrzontal{
  transform: translateY(-8px);
}
.zd-line-hrzntalstar{
  transform: rotate(273deg) translateY(-8px);
}
.agent-hdrbg{
  position: relative;
  padding: 0;
}
.zd-fxdimg{
  filter: blur(200px);
  opacity: 0.4;
  z-index: 0;
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  object-fit: cover;
  object-position: center;
}
.ai-agent-hdr{
  background-image: url("/sites/zweb/images/desk/zd-ai-splashing-stars-2x.webp");
  background-position: top center;
  background-repeat: no-repeat;
}
.ai-agent-hdr{
  max-width: 1170px;
  margin: 0 auto;
  padding: 160px 20px 100px;
  text-align: center;
  z-index: 1;
  position: relative;
  background-size: 806px auto;
  box-sizing: border-box;
}
.hdragnt-txt, .higlted-txt {
  background: linear-gradient(-53deg, #1eda4f 40%, #f1f047 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-repeat: repeat;
  animation: gradientMove 2s linear infinite alternate;
}
.hdragnt-txt.hdr-txt{
   font-size: 24px;
   text-align: center;
}
@keyframes gradientMove {
  from { background-position: 0% 0%; }
  to { background-position: 100% 0%; }
}
.hdr-para{
  font: 20px / 1.6 var(--zf-primary-regular);
  padding-bottom: 40px;
  max-width: 900px;
  margin: 0 auto;
}
.hdr-txt{
  font: 27px / 1.2 var(--zf-primary-regular);
  padding-bottom: 20px;
  color: #fff;
}
.bg_lazy_loaded .sprite-image{
  background-image: url(/sites/zweb/images/desk/zd-ai-agent-sprite-2x.webp);
  background-size: 1440px auto;
  display: inline-block;
}
.agent-card.card-container {
    transition: height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card-container{
  max-width: 1260px;
  margin: 0 auto;
  padding-top: 70px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}
.sprtspl-card{
  width: calc(50% - 40px);
  margin: 10px 20px 130px;
  position: static;
  display: flex;
}
.resolution-card .sprt-clse{ background-position: -496px -18px; width: 68px; height: 68px; }
.sentiment-card .sprt-clse{ background-position: -590px -18px; width: 68px; height: 68px; }
.quality-card .sprt-clse{ background-position: -683px -18px; width: 68px; height: 68px; }
.arrow-sec {
    width: 14px;
    margin: 0 auto;
}
.m_scroll_arrows{
  display: block;
  transform: rotate(45deg);
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  margin: 0 0 4px;
  width: 12px;
  height: 12px;
}
.line-1, .line-2, .line-3{
    animation: mouse-scroll 1s infinite;
}
.line-1{ animation-delay: .1s; }
.line-2{ animation-delay: .2s; animation-direction: alternate; margin-top: -6px; }
.line-3{ animation-delay: .3s; animation-direction: alternate; margin-top: -6px; }

@keyframes mouse-scroll {
  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
.sprt-card{
  border-radius: 32px;
  background-color: #000;
  box-shadow: 0 0 0 0 rgba(43,172,58,0.3), inset 2px 0 25px rgba(255, 255, 255, 0.3);
  width: 100%;
  padding: 40px 60px;
  position: relative;
  color: #fff;
  transition: box-shadow 0.1s ease;
  box-sizing: border-box;
}
.sprt-card:hover{
  box-shadow: 0 3px 20px 6px rgba(43,172,58,0.3);
}
.agent-card .resolution-card .smal-hdr{ background: linear-gradient(-360deg,#97e05f 0%,#0de3ab 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.agent-card .sentiment-card .smal-hdr{ background: linear-gradient(-360deg,#c1bee6 0%,#ea88de 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.agent-card .quality-card .smal-hdr{ background: linear-gradient(-360deg,#d3fbfb 0%,#fbdd97 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.smal-hdr{
  font: 40px / 1 var(--zf-primary-medium);
}
.sprt-card-cont{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}
.sprt-card-txt{
  width: 100%;
  padding: 0 0 20px;
  position: relative;
}
.sprtspl-card .hdragnt-mncnt {
    position: absolute;
    left: 0;
    margin: 0 auto;
    z-index: 9;
    padding: 10px 30px;
    max-width: 190px;
    top: -67px;
    border: 1px solid rgba(43,172,58,0.3);
    border-radius: 30px;
    background: #000;
}
.sprtspl-card .hdragnt-txt.hdr-txt{
    font-size: 20px
}
.agent-card .smal-hdr{
  background: linear-gradient(-360deg,#fedd45 0%,#fb7099 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.card-hdng{
  font: 32px / 1.2 var(--zf-primary-medium);
  padding-bottom: 10px;
}
.card-para{
  font: 20px / 1.6 var(--zf-primary-regular);
}
.sprt-ext{
  background-position: -23px -18px;
  width: 68px;
  height: 68px;
  position: absolute;
  bottom: -33px;
  right: 20px;
  z-index: 1;
  cursor: pointer;
}
.resolution-card .sprt-ext{ background-position: -116px -18px; width: 69px; height: 68px; }
.sentiment-card .sprt-ext{ background-position: -210px -18px; width: 68px; height: 68px; }
.quality-card .sprt-ext{ background-position: -303px -18px; width: 69px; height: 68px; }
.expnd-card {
    position: absolute;
    z-index: 1000;
    background-color: #000;
    border-radius: 32px;
    padding: 40px 60px;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: top 1s ease, left 1s ease, right 1s ease, bottom 1s ease, transform 1s ease, opacity 1s ease;
}
.expnd-card.is-expanded {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  top: 80px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -20px !important;
  background-color: #000;
}
.expnd-card.is-closing {
    background: #000;
    visibility: visible;
}
.expnd-card.is-closing .inercrd-content, .expnd-card.is-closing .sprt-inercrd {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}
.expnd-card.is-expanded .inercrd-content, .expnd-card.is-expanded .sprt-inercrd {
  opacity: 1;
  transition-delay: 0.2s;
}
.inercrd-content, .sprt-inercrd {
    opacity: 0;
    transition: opacity 1s ease;
}
.sprt-inercrd{
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}
.inercrd-hdr{
  font: 32px / 1.2 var(--zf-primary-medium);
  color: #10e3aa;
  background: linear-gradient(-360deg, #fedd45 0%, #fb7099 70%);
  padding-bottom: 10px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.agent-card .resolution-card .inercrd-hdr{ background: linear-gradient(-360deg, #97e05f 0%, #0de3ab 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.agent-card .sentiment-card .inercrd-hdr{ background: linear-gradient(-360deg, #c1bee6 0%, #ea88de 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.agent-card .quality-card .inercrd-hdr{ background: linear-gradient(-360deg, #d3fbfb 0%, #fbdd97 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.inercrd-content{
  display: flex;
  justify-content: space-between;
}
.inercrd-content-lists{
  width: 48%;
  padding-right: 30px;
}
.quality-card .inercrd-content-lists, .sentiment-card .inercrd-content-lists {
  width: 100%;
  justify-content: space-between;
  display: flex;
  padding-top: 30px;
}
.inercrd-listdider{
  width: 48%;
}
.inercrd-content-image{
  width: 45%;
}
.inercrd-content-image video{
  border-radius: 10px;
}
.inercrd-cont-hdr{
  font: 24px / 1.2 var(--zf-primary-regular);
  padding: 10px 20px ;
  color: #fff5e7;
  background: #000;
  border-radius: 999px;
  margin-bottom: 20px;
  display: inline-block;
  position: relative;
}
.inercrd-cont-hdr::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(90deg, #fedd45, #fb7099);
  border-radius: inherit;
  z-index: -1;
}
.agent-card .resolution-card .inercrd-cont-hdr::before { background: linear-gradient(90deg, #97e05f, #0de3ab); }
.agent-card .sentiment-card .inercrd-cont-hdr::before { background: linear-gradient(90deg, #c1bee6, #ea88de); }
.agent-card .quality-card .inercrd-cont-hdr::before { background: linear-gradient(90deg, #d3fbfb, #fbdd97); }
.inercrd-content-list li{
  font: 20px / 1.6 var(--zf-primary-regular);
  color: #fff5e7;
  padding: 0 0 20px 40px;
  position: relative;
}
.inercrd-content-list li::before {
  content: "—";
  color: #fff;
  font-size: 14px;
  margin-right: 8px;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 4px;
}
.inercrd-content-list{
  padding-bottom: 50px;
}
.inercrd-content-list:last-child{
  padding-bottom: 0;
}
.sprt-clse{
  background-position: -403px -18px;
	width: 68px;
	height: 68px;
  position: absolute;
  top: -33px;
  right: 50px;
  z-index: 1;
  cursor: pointer;
}
.comming-soon{
  background: rgba(0,0,0,0.7);
  box-shadow: 0 0 0 0 rgba(43, 172, 58, 0.3), inset 2px 0 25px rgba(255, 255, 255, 0.3);
  display: inline-block;
  color: #fff;
  padding: 10px 40px;
  margin-bottom: 20px;
  border-radius: 20px;
  text-align: center;
}
.zia-pfmer{
  position: relative;
  padding: 0 20px;
}
.prfm-chk{
  display: none;
  align-items: center;
  max-width: 1170px;
  margin:0 auto;
  position: relative;
  z-index: 1;
  padding-bottom: 150px;
}
.iner-hdr{
  color: #fff5e7;
  font: 56px / 1.1 var(--zf-primary-bold);
  padding-bottom: 15px;
}
.higlted-txt{
    background: linear-gradient(-53deg, #1eda4f 40%, #f1f047 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.prfm-chk-cont{
  width: 40%;
  margin-right: 50px;
}
.prfm-chk-img{
  width: 55%;
}
.img-overlay{
  background: rgba(0, 0, 0, 0.4);
  border-radius: 24px;
  padding: 30px;
  color: #fff;
  width: 100%;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(0, 255, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
}
.star-img{
  position: absolute;
  top: -20px;
  right: 150px;
  animation: spin 8s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.sec-para{
  font: 18px / 1.6 var(--zf-primary-regular);
  margin-bottom: 20px;
  color: #fff5e7;
}
.prfm-dtlscard{
  display: flex;
  flex-wrap: wrap;
  max-width: 1170px;
  margin: 0 auto;
  justify-content: center;
  padding: 60px 20px 0;
}
.prfm-dtlscard .iner-hdr{
  z-index: 1;
  text-align: center;
  padding-bottom: 50px;
}
.prfm-card{
  width: 48%;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 24px;
  padding: 30px;
  color: #fff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 2px 0 25px rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 30px;
}
.prfm-card.first{
  margin-right: 30px;
}
.studo-sec img,
.prfm-card:last-child {
  width: 100%;
}
.prfm-card:last-child .sec-para{
  max-width: 820px;
  margin-bottom: 20px;
  margin-left: 0;
}
.prfm-card .smal-hdr{
  background: linear-gradient(-53deg, #1eda4f 40%, #f1f047 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 70%;
  margin: 0 auto 0 30px;
  font: 40px / 1.2 var(--zf-primary-bold);
}
.prfm-card .sec-para{
  padding-left: 18px;
}
.deploy-icn{ background-position:-29px -126px; width: 102px; height: 117px; }
.cond-icn{ background-position: -221px -123px; width: 122px; height: 122px; }
.layer-icn{ background-position:  -410px -135px; width: 148px; height: 122px; }
.prfmspl-card{
  display: flex;
  width: 100%;
  padding-bottom: 25px;
  align-items: center;
}
.convin-studio{
  position: relative;
}
.studo-sec{
  max-width: 1170px;
  margin: 0 auto;
  padding: 100px 20px 0;
  text-align: center;
  z-index: 1;
  position: relative;
  box-sizing: border-box;
}
.ftrsec-btn,
.studo-img {
  padding-top: 30px;
}
.studo-img video{
  border-radius: 12px;
}
.ftrsec-btn{
  position: relative;
  z-index: 1;
}
.studo-bg-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#svg-container {
    width: 100%;
    position: absolute;
    inset: 0;
    pointer-events: none;
}
#Layer_1{
  opacity: .5;
}
#runner, #runner-reverse {
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  offset-rotate: auto;
  offset-path: path('M 2758 472.261 2532.342 472.261 2532.342 663.002 2341.601 663.002 2341.601 853.762 2150.841 853.762 2150.841 1044.503 1960.08 1044.503 1960.08 1235.263 1768.468 1235.263 1768.468 1235.31 1768.468 1426.07 1576.673 1426.07 1576.673 1426.588 1576.673 1617.348 1199.424 1617.348 1199.424 1426.588 1199.424 1426.07 1007.629 1426.07 1007.629 1235.31 1007.629 1235.263 815.577 1235.263 815.577 1044.503 624.817 1044.503 624.817 853.762 434.076 853.762 434.076 663.002 243.316 663.002 243.316 472.261 22.299 472.261');
  width: 20px;
  height: 120px;
}
#runner { animation: move-along 20s linear infinite; }
#runner-reverse { animation: move-along 20s linear infinite reverse; }

@keyframes move-along {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
.studo-sec .iner-hdr{
  max-width: 910px;
  margin: 0 auto;
  padding-bottom: 30px;
}
.comng-soon{
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font: 16px / 1.2 var(--zf-primary-regular);
  margin-bottom: 50px;
  display: inline-block;
  border: 1px solid #2f3c22;
}
.suprt-sec{
  max-width: 1170px;
  margin: 0 auto;
  padding: 200px 20px 100px;
  text-align: center;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}
@keyframes floating {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.float-anim {
  display: inline-block;
  animation-name: floating;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.smiley-icn{ background-position: -224px -317px; width: 139px; height: 128px; position: absolute; bottom: 0; left: 0; animation-duration: 4s; z-index: 1; }
.arow-icn{ background-position: -40px -317px; width: 136px; height: 125px; position: absolute; top: 70px; left: 70px; z-index: 1; animation-duration: 3.5s; }
.docmt-icn{ background-position: -414px -321px; width: 131px; height: 123px; position: absolute; top: 70px; right: 10px; z-index: 1; animation-duration: 3.5s; }
.star-icn{ background-position: -607px -320px; width: 128px; height: 124px; position: absolute; bottom: 0; right: 10px; z-index: 1; animation-duration: 4s; }
.vert-lines-container {
  position: absolute;
  inset: 0;
}
.vert-line-wrapper {
  position: absolute;
  height: 100%;
  width: 30px;
  top: 0;
  z-index: 1;
}
.vert-line {
  position: absolute;
  display: block;
  width: 1px;
  height: 100%;
}
.star-anim {
  position: absolute;
  top: 0;
  left: -9px;
  width: 20px;
  z-index: 2;
}
@keyframes moveDown {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  100% { top: calc(100% - 20px); opacity: 0; }
}
.ftrsec-studio{
  padding-bottom: 100px;
  position: relative;
}
.dislmer-txt{
  font: 13px / 1.6 var(--zf-primary-regular);
  color: #fff5e680;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px 40px;
}
.bkdemo-btn{
  color: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 2px 0 25px rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  max-width: 270px;
  padding: 10px 30px;
}
.act-btn{
  font: 18px / 1.6 var(--zf-primary-semibold);
  width: 270px;
  position: relative;
  z-index: 1;
}
.zd-cards .arrow-sec {
    margin-bottom: 60px;
}
.studo-img img{
   vertical-align: bottom;
   cursor: pointer;
  border-radius: 12px;
}
/* --- RESPONSIVE STYLES --- */
@media only screen and (max-width: 1200px) {
.card-hdng br{
    display: none;
}
}
@media only screen and (max-width: 1140px) {
   .sprt-card{ padding: 30px 40px; }
   .suprt-sec{ overflow: hidden; }
}
@media only screen and (max-width: 1024px) {
  br{
    display: none;
  }
.sprtspl-card .hdragnt-mncnt {
    position: relative;
    top: -40px;
}
.sprtspl-card .hdragnt-txt.hdr-txt {
    font-size: 18px;
}
  h1{ max-width: 780px; margin: 0 auto; }
  .ai-agent-hdr{ padding: 150px 30px 60px; margin: -40px auto 0; }
  .card-container{ padding-top: 20px; }
  .studo-sec .iner-hdr{ max-width: 700px; }
  .zd-lines{ display: none; }
  .card-hdng{ font-size: 28px; padding-right: 20px; }
  .suprt-sec{ padding: 115px 20px 100px; }
  .ftrsec-studio{ padding: 0; }
  .ftrsec-btn{ padding: 30px 0 0; }
  .float-anim{ position: static; animation: none; }
  h1, .iner-hdr{ font-size: 56px; }
  .prfm-card{ width: 100%; }
  .prfm-card.first{ margin-right: 0; }
  .prfm-dtlscard{ padding: 45px 30px 0; }
  .studo-sec{ padding: 60px 30px 0; }
  .ftrsec-studio .iner-hdr{ max-width: 710px; margin: 0 auto; padding-bottom: 50px; }
  .sprtspl-card { width: calc(100% - 60px); margin: 10px auto 50px 20px; display: block; }
  .sprt-card{ cursor: pointer; }
  .expnd-card, .expnd-card.is-expanded, .expnd-card.is-closing {
    display: none; position: relative; inset: auto; opacity: 1;
    visibility: visible; transform: none; transition: none;
    pointer-events: auto; padding: 40px 20px 20px; background-color: #000;
    border-radius: 0 0 32px 32px;
    margin-top: -1px;
    box-shadow: inset 4px 0 25px rgba(255, 255, 255, 0.1), inset 0 -6px 14px rgba(255, 255, 255, 0.1)
  }
  .sprt-card:hover { transform: none; box-shadow: 0 0 0 0 rgba(43,172,58,0.3),inset 2px 0 25px rgba(255,255,255,0.3); }
  .accordion-active .sprt-card {
      border-bottom-left-radius: 0; border-bottom-right-radius: 0;
      box-shadow: inset 0 5px 10px rgba(255, 255, 255, 0.3);
  }
  .inercrd-content, .sprt-inercrd { opacity: 1; transition: none; font-size: initial; }
  .sprt-card-txt{ width: 100%; flex:unset; padding: 0; }
  .agent-card .smal-hdr{ font-size: 40px; padding: 0 0 20px; }
  .sprt-card-cont{ padding-bottom: 0; }
  .sprt-inercrd { flex-direction: column; text-align: center; display: none; }
  .sprt-inercrd-img { margin-top: -70px; padding: 0 0 20px; }
  .inercrd-content { flex-direction: column; }
  .inercrd-content-lists, .inercrd-listdider { width: 100%; }
  .quality-card .inercrd-content-lists, .sentiment-card .inercrd-content-lists { flex-direction: column; }
  .inercrd-content-image { width: 100%; margin-top: 30px; }
  .inercrd-content-image video, .inercrd-content-image img { max-width: 100%; height: auto; }
  .sprt-clse { display: none !important; }
  .sprt-ext {
      transition: transform 0.3s ease; bottom: 33%; right: -30px; background-position:-294px -508px;
      width: 67px; height: 67px;
  }
  .resolution-card .sprt-ext{ background-position: -384px -508px; width: 67px; height: 67px; }
  .sentiment-card .sprt-ext{ background-position: -474px -508px; width: 67px; height: 67px; }
  .quality-card .sprt-ext{ background-position:-563px -508px; width: 69px; height: 68px; }
  .accordion-active .sprt-ext { transform: rotate(180deg); }
}
@media only screen and (max-width: 767px) {
  .sprt-card:hover{
    box-shadow:none ;
  }
.hdragnt-txt.hdr-txt{
   font-size: 20px
}
.sprtspl-card .hdragnt-txt.hdr-txt {
    font-size: 16px;
}
.sprtspl-card .hdragnt-mncnt {
    position: static;
    display: inline-block;
      padding: 0 0 10px;
        border: none;
        background: unset;
}
  .desk-breadcrumb{ display: none; }
  .sprtspl-card {
    width: 100%;
    border-bottom: 1px solid #21301e;
    margin: 0;
    padding: 30px 30px 30px 0;
  }
  .star-anim{ left: -4px; width: 10px; }
  .zd-cards{ padding-top: 100px; }
  .prfm-card .smal-hdr{ font-size: 22px; }
  .prfm-card .sec-para { padding-left: 10px; }
  .ftrsec-studio .iner-hdr { max-width: 440px; margin: 0 auto; }
  .suprt-sec{ padding: 65px 20px 60px; }
  .arow-icn{ background-position: -676px -498px; width: 79px; height: 73px; }
  .smiley-icn{ background-position: -775px -498px; width: 80px; height: 73px; }
  .docmt-icn{ background-position: -974px -500px; width: 76px; height: 72px; }
  .star-icn{ background-position: -881px -501px; width: 74px; height: 71px; }
  .sprt-ext { background-position:-64px -524px; width: 35px; height: 35px; }
  .resolution-card .sprt-ext{ background-position: -109px -524px; width: 35px; height: 35px; }
  .sentiment-card .sprt-ext{ background-position: -154px -524px; width: 35px; height: 35px; }
  .quality-card .sprt-ext{ background-position:-199px -524px; width: 35px; height: 35px; }
  .prfm-card{ padding: 25px; }
  .ai-agent-hdr{ background-image: none; padding: 50px 20px 0; }
  h1, .iner-hdr{ font-size: 32px; }
  .card-hdng{ font-size: 18px; }
  .hdr-para{ font-size: 18px; }
  .hdr-txt{ max-width: 240px; margin: 0 auto; }
  .card-container{ justify-content: left; margin: 0 auto; padding-top: 0; }
  .agent-card .smal-hdr{ font-size: 24px; padding-bottom: 10px; }
  .prfm-dtlscard { padding: 55px 20px 0; }
  .smal-hdr{ font-size: 24px; }
  .sec-para{ font-size: 16px; }
  .expnd-card, .expnd-card.is-expanded, .expnd-card.is-closing{ background: none; box-shadow: none; padding: 20px 0; }
  .inercrd-cont-hdr{ font-size: 18px; }
  .inercrd-content-list li{ font-size: 16px; }
  .inercrd-content-list { padding-bottom: 10px; }
  .sprt-card{ padding: 0; background: none; box-shadow: none; }
  .accordion-active .sprt-card{ box-shadow: none; }
  .card-para{ font-size: 16px; }
  .star-wrapper .sparkle{ display: none; }
  .deploy-icn{ background-position:-60px -619px; width: 50px; height: 59px; }
  .cond-icn{ background-position: -143px -619px; width: 60px; height: 62px; }
  .layer-icn{ background-position:  -238px -620px; width: 73px; height: 61px; }
}