:root {
  --rpa-blue: #001DFF;
  --rpa-dark-blue: #0119D4;
  --rpa-deep-blue: #061B27;
  --rpa-green: #0DEAA0;
  --automation-card-blue: #EAF1F5;
  --getstart-lavender: #F4F5FF;
  --usecase-card-grey: #DBDBDB;
  --usecase-card-bg: #EBF1FF;
  --productivity-card-grey: #F5F5F5;
  --productivity-card-light-grey: #E5E5E5;
  --sticky-text-color: #909090;
  --border-grey-color: #D3D3D3;
  --sprite-path: url(/sites/zweb//sites/zweb/images/rpa/rpa/rpa-home-sprite.svg);
  --sprite-size: 332px auto;
}
body{
  font-family:var(--zf-primary-regular)
}
/* banner start */
.pagewrapper .content-wrap{
  padding: 120px 0;
  max-width: 1170px;
  width: 90%;
}
.pagewrapper .cta-btn {
  padding: 12px 30px;
  opacity: 1;
  visibility: visible;
}
.txt-anim{
  color: var(--rpa-blue);
}
.banner{
  text-align: center;
  position: relative;
  /* background: url(/sites/zweb/images/rpa/rpa-hr-ban-bg.png) no-repeat;
  background-size: 100%;
  background-position: 0 240px; */
}
.ban-bg{
position: absolute;
z-index: 0;
bottom: 180px;
left: 0;
}
.banner .content-wrap{
padding-top: 30px;
z-index: 1;
}
.banner .ctn-wrap{
  padding-bottom: 60px;
}
.banner h1{
font-size: 72px;
line-height: 82px;
letter-spacing: -1.6px;
  max-width: 980px;
  margin: 0 auto 30px;
  font-family: var(--zf-primary-semibold);
}
.banner p{
  max-width: 680px;
  margin: 0 auto 30px;
}
.ban-img{
position: relative;
}
.ban-img-anim{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

}
.ban-img-anim .ban-img:nth-child(1){
transform:translate(-100px,-150px);
}
.ban-img-anim .ban-img:nth-child(2){
  transform:translate(0px,60px);
  }
  .ban-img-anim .ban-img:nth-child(3){
      transform:translate(100px,-150px);
      }
      .ban-img-anim .ban-img {
          transition: transform 0.1s ease;
      }
      .svg-left,.svg-right{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
      }
      .svg-left{
        left: -135px;
        top: -32px;
      }
      .svg-right{
      width: 370px;
      max-width: unset;
      left: 20px;
      top: -120px;
      transition-delay: 5s;
      }
/* banner end */
/* Container styling */
.process-container, 
.crm-form-section {
  max-width: 1280px;
  margin: 0 auto;
  background-color: #EAF1F5;
  border: 1px solid #D9DCF4;
  border-radius: 24px;
  width: 90%;
  margin: 0 auto;
}
.process-container h2.all-proces{
  font-size: 30px;
  text-align: left;   
  margin-bottom: 30px;
  line-height: 46px; /* 161.111% */
letter-spacing: -1px;
margin: 0 0 30px;
font-family: var(--zf-primary-semibold);
}
/* Filter Buttons */
/* General styling for the select dropdown */
.filter-select {
appearance: none; /* Remove default styles */
-webkit-appearance: none; /* Remove default styles for Safari */
-moz-appearance: none; /* Remove default styles for Firefox */
background-color: #fff; /* Light background */
border: 1px solid #ccc; /* Subtle border */
border-radius: 8px; /* Rounded corners */
padding: 10px 15px; /* Padding for better spacing */
font-size: 16px; /* Larger font */
color: #333; /* Text color */
cursor: pointer;
outline: none; /* Remove default outline */
width: 100%; /* Full width */
transition: border-color 0.3s, box-shadow 0.3s;
margin-bottom: 40px;
font-family: var(--zf-primary-semibold);
position: relative;
}
.filter-select-wrap{
display: none;
position: relative;
max-width: 400px; /* Set max-width for smaller containers */
}
.filter-select-wrap::after{
content: "";
  position: absolute;
  top: 15px;
  right: 16px;
  width: 8px;
  height: 8px;
  background-image: none;
  border-right: 1.5px solid #000;
  border-top: 1.5px solid #000;
  transform: rotate(135deg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 12px;
  pointer-events: none;
}
/* Add hover and focus effects */
.filter-select:hover,
.filter-select:focus {
border-color: #007bff; /* Highlight border on hover */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Glow effect */
}
/* Styling for individual options */
.filter-select option {
padding: 10px; /* Spacing for options */
background-color: #ffffff; /* White background */
color: #333; /* Text color */
}
/* Change option hover effects */
.filter-select option:hover {
background-color: #007bff; /* Highlight color */
color: #ffffff; /* Change text color on hover */
}
/*  */

/*  */
.filter-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-button {
  padding: 10px 20px;
  color: #333;
  border: 1px solid #D2D2D2;
  border-radius: 20px;
  cursor: pointer;
  font-size: 15px;
  text-transform: capitalize;
  transition: all 0.3s ease;
  background-color: unset;
  font-family: var(--zf-primary-semibold);
}

.filter-button.active,
.filter-button:hover {
  background-color: var(--rpa-blue);
  color: #fff;
}

/* Heading */
.pagewrapper h2 {
  font-size: 48px;
  color: #000;
  text-align: center;
  font-family: var(--zf-primary-bold);
  line-height: 58px; /* 120.833% */
letter-spacing: -1.44px;
max-width: 660px;
margin: 0 auto 35px;
}
/* Card Grid */
.cards-container {
  column-count: 3;
  column-gap: 20px; 
}
/* Card Styling */
.card {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* border-left: 4px solid var(--rpa-blue); */
  transition: transform 0.2s ease;
  display: inline-flex;
  flex-wrap: wrap;
  flex-flow: column;
  margin-bottom: 20px;
}
.card:hover {
  transform: translateY(-5px);
}
.card h3 {
  font-size: 18px;
  color: var(--rpa-blue);
  font-family: var(--zf-primary-semibold);
  margin-bottom: 10px;
}
.cards-container .top-ctn{
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}
.top-ctn-wrap{
  padding: 15px 0;
  border-bottom: 1px solid var(--border-grey-color);
}
.top-ctn-wrap:last-child{
  border: none;
}
.br-hide{
  border: none;
}
.top-ctn-wrap p{
  margin: 0;
}
.card h4 {
  font-size: 18px;
  color: #000;
  font-family: var(--zf-primary-semibold);
  margin: 0;
}
.card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 10px;
}

.card ul li {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

/* .card ul li::before {
  content: "✔️";
  color: #4caf50;
  margin-right: 8px;
} */

.learn-more {
  color: var(--rpa-blue);
  text-decoration: none;
  font-family: var(--zf-primary-bold);
  display: inline-flex;
  gap: 10px;
  align-items: center;
 transition: all 1s ease;
}

.learn-more span{
  display: flex;
  align-items: center;
  transition: all 0.5s ease;
}
.learn-more:hover span{
 transform: translateX(5px);
 transition: all 0.5s ease;
}

/* why-choose start */
.why-choose{
text-align: center;
}
.why-choose .content-wrap{
  /* max-width: 1000px; */
  margin: 0 auto ;
  padding-top: 0;
}
.why-choose ul{
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: space-around;
  text-align: left;
}
.why-choose ul li{
  display: flex;
  gap: 15px;
  align-items: flex-start;
  width: calc(45% - 30px);
  justify-content: flex-start;
  font-size: 20px;
  line-height: 38px; /* 175% */
letter-spacing: -0.24px;
}
.why-choose ul li span{
  display: flex;
  top: 10px;
  position: relative;
}
/* why-choose end */
/* video start */
.video-sec{
text-align: center;
}
.zcr-test-vdo-area{
position: relative;
}
.vid-ply-icon {
position: absolute;
display: block;
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-animation: ripple 1.4s linear infinite;
animation: ripple 1.4s linear infinite;
cursor: pointer;
z-index: 2
}

.vid-ply-icon::before {
content: "";
position: absolute;
border-color: transparent transparent transparent #4a5334;
border-style: solid;
border-width: 8px 0 8px 12px;
height: 0;
left: 21px;
top: 17px;
width: 0
}

@-webkit-keyframes ripple {
0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,255,255,0.3),0 0 0 12px rgba(255,255,255,0.3),0 0 0 20px rgba(255,255,255,0.1);
    box-shadow: 0 0 0 0 rgba(255,255,255,0.3),0 0 0 12px rgba(255,255,255,0.3),0 0 0 20px rgba(255,255,255,0.1)
}

100% {
    -webkit-box-shadow: 0 0 0 12px rgba(255,255,255,0.3),0 0 0 20px rgba(255,255,255,0.1),0 0 0 30px rgba(255,255,255,0);
    box-shadow: 0 0 0 12px rgba(255,255,255,0.3),0 0 0 20px rgba(255,255,255,0.1),0 0 0 30px rgba(255,255,255,0)
}
}

@keyframes ripple {
0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,255,255,0.3),0 0 0 12px rgba(255,255,255,0.3),0 0 0 20px rgba(255,255,255,0.1);
    box-shadow: 0 0 0 0 rgba(255,255,255,0.3),0 0 0 12px rgba(255,255,255,0.3),0 0 0 20px rgba(255,255,255,0.1)
}

100% {
    -webkit-box-shadow: 0 0 0 12px rgba(255,255,255,0.3),0 0 0 20px rgba(255,255,255,0.1),0 0 0 30px rgba(255,255,255,0);
    box-shadow: 0 0 0 12px rgba(255,255,255,0.3),0 0 0 20px rgba(255,255,255,0.1),0 0 0 30px rgba(255,255,255,0)
}
}

@-webkit-keyframes ripple2 {
0% {
    -webkit-box-shadow: 0 0 0 0 rgba(116,185,71,0.3),0 0 0 6px rgba(116,185,71,0.3),0 0 0 16px rgba(116,185,71,0.1);
    box-shadow: 0 0 0 0 rgba(116,185,71,0.3),0 0 0 6px rgba(116,185,71,0.3),0 0 0 16px rgba(116,185,71,0.1)
}

100% {
    -webkit-box-shadow: 0 0 0 6px rgba(116,185,71,0.3),0 0 0 16px rgba(116,185,71,0.1),0 0 0 28px rgba(116,185,71,0);
    box-shadow: 0 0 0 6px rgba(116,185,71,0.3),0 0 0 16px rgba(116,185,71,0.1),0 0 0 28px rgba(116,185,71,0)
}
}

@keyframes ripple2 {
0% {
    -webkit-box-shadow: 0 0 0 0 rgba(116,185,71,0.3),0 0 0 6px rgba(116,185,71,0.3),0 0 0 16px rgba(116,185,71,0.1);
    box-shadow: 0 0 0 0 rgba(116,185,71,0.3),0 0 0 6px rgba(116,185,71,0.3),0 0 0 16px rgba(116,185,71,0.1)
}

100% {
    -webkit-box-shadow: 0 0 0 6px rgba(116,185,71,0.3),0 0 0 16px rgba(116,185,71,0.1),0 0 0 28px rgba(116,185,71,0);
    box-shadow: 0 0 0 6px rgba(116,185,71,0.3),0 0 0 16px rgba(116,185,71,0.1),0 0 0 28px rgba(116,185,71,0)
}
}
/*  */

/* crm-form-section start */
.crm-form-section .inner-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
.crm-form-section h2{
  text-align: left;
}

.crm-form-section .ctn-wrap{
  max-width: 500px;
}
.crm-form-section .ctn-wrap h2{
margin-bottom: 20px;
}
.crm-form-section .ctn-wrap p{
max-width: 340px;
}
#crm-form-wrap{
background-color: #fff;
max-width: 500px;
padding: 50px;
border: 1px solid #e4e8f1;
filter: drop-shadow(0 64px 74px rgba(228, 231, 236, 0.38));
margin: 0 auto;
border-radius: 12px;
}
  /* crm-form-section end */
  /* faq-sec */
  /* accordian start */
.zrpa-accordian {
border-bottom: 1px solid var(--border-grey-color);
}

.zrpa-accordian:first-child .zrpa-accordian-ans {
display: block;
}
.zrpa-accordian-ans a{
color: var(--rpa-blue);
}
.zrpa-accordian-ans {
display: none;
padding-right: 40px;
}

.zrpa-accordian h3 {
font-size: 28px;
margin-bottom: 0;
padding: 20px 0;
cursor: pointer;
position: relative;
color: #000;
}

.zrpa-accordian h3:before,
.zrpa-accordian h3:after {
content: '';
position: absolute;
background: #000;
transition: 1s;
top: 50%;
transform: translateY(-50%);
}

.zrpa-accordian h3:before {
right: 0;
height: 2px;
width: 16px;
}

.zrpa-accordian h3:after {
right: 7px;
width: 2px;
height: 15px;
}

.zrpa-accordian.active h3:after,
.zrpa-accordian.active h3:before {
opacity: 0;
}

.zrpa-accordian-ans li {
position: relative;
font-size: 18px;
padding: 0 0 20px 15px;
}

.zrpa-accordian-ans li:before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
left: 0;
top: 9px;
background-color: var(--rpa-dark-blue);
}

.zrpa-accordian-ans li span {
display: block;
}
/*  accordian end */
.zrpa-faq-inner {
  max-width: 750px;
  margin: 0 auto;
}

.zrpa-faq-inner h2 {
  text-align: center;
}

.zrpa-faq-inner .zrpa-accordian {
  border-color: var(--productivity-card-light-grey);
}

.zrpa-faq-inner .zrpa-accordian:last-child {
  border: none;
}

.zrpa-faq-inner .zrpa-accordian h3 {
  font-size: 24px;
  padding: 30px 25px 30px 0;
}

.zrpa-faq-inner .zrpa-accordian-ans {
  padding: 0 40px 0 0;
}

.zrpa-faq-inner .zrpa-accordian p,
.zrpa-faq-inner .zrpa-accordian-ans li {
  font-size: 16px;
}

.zrpa-faq-inner .zrpa-accordian-ans li:before {
  background-color: #000;
}

/* end-faq-sec */
.footer-sign-cta {
text-align: center;
}
.pagewrapper .footer-sign-cta h2{
max-width: 800px;
}
.pagewrapper .footer-sign-cta .content-wrap{
padding-top: 0;
}
.footer-sign-cta .inner-wrap{
background-color: #EAF1F5;
border: 1px solid #D9DCF4;
border-radius: 24px;
padding: 60px 30px;
width: 90%;
margin: 0 auto;
}

@media screen and (max-width:1440px) {
.pagewrapper .content-wrap{
  padding: 60px 0;
}
.pagewrapper h2 {
  max-width: 500px;
}
.banner h1 {
font-size: 52px;
line-height: 62px;
max-width: 700px;
}
.pagewrapper h2 {
font-size: 38px;
line-height: 48px;
letter-spacing: -1px;
}
.why-choose ul li{
font-size: 18px;
line-height: 35px;
}
.zrpa-faq-inner .zrpa-accordian h3 {
font-size: 22px;
}
.process-container h2.all-proces{
letter-spacing: -0.5px;
font-size: 26px;
line-height: 36px;
}
}

@media screen and (max-width:1280px) {
/* .pagewrapper h2 {
  font-size: 38px;
  line-height: 48px;
} */
}

@media screen and (max-width:1199px) {
  .ban-bg{
    bottom: 150px;
  }
  .crm-form-section .ctn-wrap{
    text-align: center;
  }
  .crm-form-section .ctn-wrap p{
    margin: 0 auto;
  }
  .banner h1 {
    font-size: 42px;
    line-height: 52px;
    max-width: 580px;
  }
  .svg-left,
  .svg-right{
    display: none;
  }
  .banner{
    background: unset;
  }
  .crm-form-section .ctn-wrap h2{
    text-align: center;
  }
  .crm-form-section .inner-wrap{
    flex-flow: column;
  }
  }

  @media screen and (max-width:991px) {
    .ban-bg{
      display: none;
    }
    .filter-select-wrap{
      display: block;
    }
    .why-choose ul{
      gap: 20px;
    }
    .filter-buttons,.all-proces{
      display: none;
    }
    .ban-img-anim .ban-img{
      transform: none !important;
    }
    .cards-container{
      column-count: 2;
    }
  }

  @media screen and (max-width:767px) {
 
    .banner h1 {
      font-size: 32px;
      line-height: 42px;
      letter-spacing: -1px;
  }
    .pagewrapper .content-wrap{
      padding: 45px 0;
    }
  .cards-container {
    column-count: 1;
}
.card{
  width: calc(100% - 20px);
}
.why-choose ul{
  flex-flow: column;
}
.why-choose ul li{
  width: calc(100% - 30px);
}
.pagewrapper h2 {
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
}
.crm-form-section .inner-wrap{
  gap: 20px;
}
}
@media screen and (max-width:480px) {
.slide-img-1,
.slide-img-2{
display: none;
}
.slide-img-3 img{
width: 320px;
}
}