/* banner css :start */
:root {
    --primary-color:#000;
    /* --secondary-color: #0A65F5; */
    --tab-text-color:#001DFF;
  }
  .zw-product-header{
    background-color: #fff;
  }
  body{
    color: var(--primary-color);
    font-family: var(--primaryfont-regular);
  }
  .pagewrapper a.txt-link {
    color: #093EF9;
    text-decoration: underline;
  }
  .hi-txt{
    font-family: var(--primaryfont-semibold);
  }
  .banner {
    /* background-color: #F5F5F5; */
    font-family: var(--primaryfont-regular);
    max-width: 1800px;
    background: url(/sites/zweb/images/rpa/guides/rpa-automation-banner-bg.svg) no-repeat;
    background-size: cover;
  }
  .pagewrapper .content-wrap{
    padding: 80px 0px;
    max-width: 1280px;
  }
  .pagewrapper img{
    display: block;
  }
  .pagewrapper .cta-btn {
    padding: 12px 30px;
  }
  .subtitle {
    text-transform: uppercase;
    color: #66FFCF;
    margin-bottom: 10px;
    font-size: 18px;
    font-family: var(--primaryfont-semibold);
  }
  
  .pagewrapper h2 {
    font-size: 56px;
    line-height: 1.25;
    letter-spacing: -1.12px;
    margin-bottom: 40px;
  }
  .banner .content-wrap{
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    max-width: 1250px;
    padding: 0;
  }
  .banner-content {
    flex: 1;
    min-width: 300px;
    max-width: 56%;
  }
  .banner-breadcrumb {
    color: #696969;
    margin-bottom: 10px;
    font-family: var(--primaryfont-regular);
  }
  .banner-breadcrumb a {
    color: var(--tab-text-color);
    font-family: var(--primaryfont-semibold);
    text-decoration: none;
  }
  
  .banner-title {
    font-size: 54px;
    line-height: 1.2;
    letter-spacing: -1.44px;
    margin: 20px 0;
    color: var(--primary-color);
    font-family: var(--primaryfont-semibold);
    max-width: 520px;
  }
  
  .banner-description {
    color: var(--primary-color);
    margin-bottom: 30px;
    max-width: 700px;
  }
  
  .banner-btn:hover {
    background-color: #c0392b;
  }
  
  .banner-image {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 450px;
    padding-top: 150px;
  }
  
  .banner-image img {
    border-radius: 14px;
    max-width: 100%;
    height: auto;
  }
   /* banner css end */

/* file automation */
/* Container */
.file-automation-page {
    /* max-width: 1400px; */
    margin: 0 auto;
    padding: 0px 0px 40px;
  }
  .file-automation-page .content-wrap{
    display: flex;
  }
  /* Sidebar */
  .file-automation-sidebar {
    width: 30%;
    /* background: #f7f9fb; */
    border-radius: 12px;
    padding: 20px;
    margin-right: 50px;
    height: 100vh;
    position: sticky;
    top: 60px;
  }
  
  .file-automation-sidebar ul {
    list-style: none;
  }
  
  .file-automation-sidebar li {
    padding: 12px 40px 12px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    color: #333;
    margin-bottom: 5px;
    position: relative;
  }
  .file-automation-sidebar li::after{
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M7 3L12.5 8.5L7 14' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 10px;
  }
  .file-automation-sidebar li:hover::after,
  .file-automation-sidebar li.active::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M7 3L12.5 8.5L7 14' stroke='%23001DFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .file-automation-sidebar li.active,
  .file-automation-sidebar li:hover {
    background: #eef3ff;
    color: #3a57e8;
    /* font-family: var(--primaryfont-semibold); */
  }
  
  /* Main Content */
  .file-automation-content h2{
    font-size: 36px;
    font-family: var(--primaryfont-semibold);
    margin-bottom: 15px;
  }
  .file-automation-content p{
    max-width: 90%;
  }
.file-automation-content section{
    padding: 40px 0;
    width: 100%;
    border-bottom: 1px solid #C8C8C8;
}
.file-automation-content section:last-child{
    padding-bottom: 0;
    border: unset;
}
.last-para{
    margin-bottom: 0;
}
/* automation-section */

.automation-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px;
    text-align: left;
    background-color: #F6F6F6;
  }
  .file-automation-content section:first-child{
    padding-top: 20px;
 }
  .automation-section p {
    max-width: 88%;
  }
  
  .automation-section .card-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
  }
  
  .automation-section .card {
    background: #fff;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-align: left;
    transition: transform 0.3s ease;
  }
  
  .automation-section .card:hover {
    transform: translateY(-5px);
  }
  
  .automation-section .icon {
    margin-bottom: 15px;
    width: 40px;
    height: 40px;
    background: url(/sites/zweb/images/rpa/guides/rpa-file-automation-sprite.png) no-repeat;
    background-size: 190px auto;
    background-position: 0 1px;
    display: block;
  }
  .common-file-man .icon{
    background-position: -165px 1px;
    width: 25px;
    height: 25px;
  }
  .auto-essn .card:nth-child(2) .icon{
    background-position: -40px 1px;
  }
  .auto-essn .card:nth-child(3) .icon{
    background-position: -80px 1px;
  }
  .auto-essn .card:nth-child(4) .icon{
    background-position: -123px 1px;
  }
  .automation-section .card h3 {
    margin-bottom: 10px;
    font-size: 24px;
    font-family: var(--primaryfont-semibold);
    max-width: 240px;
  }
  
  .automation-section .card p {
  }
/*  */
  .file-automation {
    padding: 40px 20px;
    /* max-width: 900px; */
    margin: 0 auto;
  }
  
  h2.file-automation-header {
    margin-bottom: 30px;
  }
  
  .file-automation-section {
    border-radius: 16px;
    padding: 40px 40px 40px 40px;
    margin-bottom: 30px;
  }
  
  .file-automation-boost-productivity {
    background-color: #e6e8fc;
  }
  
  .file-automation-bridge-gap {
    background-color: #e6f7f1;
    margin-bottom: 0;
  }
  
  .file-automation-title {
    /* font-size: 32px; */
    font-family: var(--primaryfont-semibold);
    margin-bottom: 20px;
  }
  
  .file-automation-content {
    display: flex;
    flex-wrap: wrap;
    /* gap: 30px; */
    align-items: center;
  }
  .file-automation-content-wrap{
    width: 70%;
  }
  .file-automation-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 30px 40px;
    flex: 1 1 350px;
  }
  
  .file-automation-percentage {
    font-family: var(--primaryfont-semibold);
  }
  
  .file-automation-text {
    margin-bottom: 20px;
  }
  
  .file-automation-source {
    font-size: 15px;
  }
  
  .file-automation-source a {
    text-decoration: underline;
    color: #001DFF;
    font-size: 15px;
  }
  
  .file-automation-source a:hover {
    text-decoration: underline;
  }
  
  .file-automation-description {
    flex: 2 1 260px;
    /* font-size: 16px; */
    /* line-height: 1.6; */
  }
  .file-automation-description p{
    width: 100%;
    font-size: 16px;
  }
  .common-file-man .card{
    border: 1px solid #DBDBDB;
    border-radius: 16px;
  } 
  .file-automation .file-automation-content{
    gap: 30px;
  }
  /* file automation */

  /* demo section */
  .demo-section {
    width: 100%;
    padding: 40px 0 0;
  }
  .demo-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background-color: #f5f5f5; 
    padding: 45px;
    border-radius: 16px;
  }
  
  .demo-content h2 {
    margin: 0;
    flex: 1 1 auto;
    max-width: 495px;
  }
  
  .demo-button {
    display: inline-block;
    font-family: var(--zf-primary-semibold), sans-serif;
    background: var(--primary-btn-color);
    color: #fff;
    padding: 12px 30px;
    margin: 0;
    border: 1px solid transparent;
    cursor: pointer;
    z-index: 1;
    font-size: 15px;
    text-transform: uppercase;
    position: relative;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
  }
/* demo section   */

/* real-usecase start */
.real-usecase .innr{
    padding: 40px;
    border-radius: 16px;
    background-color: #F5F5F5;
}

.real-usecase .innr ul li{
    padding: 30px 25px;
    border-radius: 12px;
    border: 1px solid #868686;
    margin-bottom: 20px;
}
.real-usecase .innr ul li p{
    margin: 0;
}
/* real-usecase end */
.implement-automation h2{
    max-width: 80%;
}
.implement-automation .innr{
    padding: 40px;
    border-radius: 16px;
    background-color: #F5F5F5;
}
.implement-automation .innr div{
    margin-bottom: 50px;
}
.implement-automation .list-wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.implement-automation .list-wrap li{
    width: calc(50% - 20px);
    margin-bottom: 20px;
}
.implement-automation .list-wrap h4{
    font-size: 18px;
    margin-bottom: 5px;
}

/* automating-storage start */
.automating-storage h2{
    max-width: 80%;
}
.automating-storage .innr{
    padding: 40px;
    background-color: #f5f5f5;
    border-radius: 16px;
}
.pro-statement{
    margin-bottom: 40px;
}
.record-title{
    max-width: 80%;
    margin-bottom: 20px;
}
.recording-progress{
    padding: 32px;
    background-color: #fff;
    border-radius: 24px;
}
.recording-progress .overview{
    margin-top: 22px;
}
/* .recording-progress ul.main-list-wrap{
    margin-top: 50px;
} */

ul.folder {
    list-style-type: none;
    padding-left: 15px;
  }
  .main-list-wrap li p{
    margin: 0;
  }
  .main-list-wrap li.spl-case{
    border: none;
    padding-bottom: 0;
  }
  .main-list-wrap li h5{
    margin-top: 10px;
  }
  .main-list-wrap li h4{
    margin-top: 20px;
  }
  .folder-name {
    /* font-family: var(--primaryfont-semibold); */
    display: inline-block;
    margin-bottom: 5px;
  }
  .folder-name::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M0 5.5L5 0.5L10 5.5' fill='%237985E0'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    left: -5px;
    position: relative;
  }
  .main-list-wrap li{
    border-bottom: 1px solid #B1B1B1;
    padding: 24px 0;
  }
  .files li {
    margin-left: 10px;
    margin-bottom: 5px;

  }
  .folder li{
    border: none;
    padding: 0;
  }
  .files li::before{
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #7985E0;
    position: relative;
    top: -2px;
    left: -5px;
  }
  .folder-innr{
    padding-left: 10px;
  }




  /* why-choose start */
  .why-choose ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
  }
  .why-choose li{
    width: 50%;
    padding-left: 40px;
    position: relative;
  }
  .why-choose li p{
    max-width: 95%;
  }
  /* .why-choose li p{
    font-size: 20px;
  } */
  .why-choose li p::before{
    content: "";
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    left: 0;
    top: 5px;
    background: url(/sites/zweb/images/rpa/guides/rpa-file-automation-sprite.png) no-repeat;
    background-size: 190px auto;
    background-position: -165px 1px;
  }
.why-choose h2{
    margin-bottom: 30px;
}
/* faq */
.zrpa-mailto{
    color: var(--zwc-link-clr);
  }
.zrpa-faq-inner h2{
    margin-bottom: 20px;
}
/* .zrpa-accordian{
    margin-bottom: 30px;
} */
/* 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 {
    font-family: var(--primaryfont-semibold);
  }
  
  /*  accordian end */
  .zrpa-faq-inner {
    max-width: 750px;
    margin: 0 auto;
  }
  
  .zrpa-faq-inner h2 {
    text-align: left;
    max-width: inherit;
  }
  
  .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 */
/*  */
  @media screen and (max-width: 1440px) {
    .compliance-section .card h3{
      font-size: 22px;
    }
    .banner .content-wrap{
      max-width: 1170px;
    }
    .banner-title{
      font-size: 50px;
      max-width: 480px;
    }
    /* .file-automation-content */
    .file-automation-content h2 {
      font-size: 32px;
    }
 /*  */
  }
  
  /* Max 1280px */
  /* RPA Benefits & Why Choose & Banner */
  @media (max-width: 1280px) {
    /* Why Choose */
    /* .why-choose h2 {
      max-width: 750px;
    } */
    /* Banner */
    .banner-title {
      font-size: 54px;
    }
  }
  
  /* Max 1199px */
  /* Common Padding & RPA Panel & Automation */
  @media (max-width: 1199px) {
    /* Common */
    .pagewrapper .content-wrap {
      padding: 60px 0;
    }
    /*  */
    /* banner */
    .banner .content-wrap{
        padding-bottom: 0;
    }
    .banner-image{
        max-width: 350px;
        padding-top: 100px;
    }
    /* .file-automation-sidebar */
    .file-automation-sidebar{
        display: none;
    }
    .file-automation-content-wrap {
        width: 100%;
    }
    .file-automation-page{
        padding: 0;
    }
    /*  */
    /* faq start */
    .zrpa-faq-inner h2{
        text-align: left;
    }
  }
  /*  */

  @media (max-width: 1024px) {
  }
  /* Max 991px */
  /* Banner, Automation, Why Choose, Compliance */
  @media (max-width: 991px) {
    /* Banner */
    .pagewrapper .content-wrap {
      padding: 40px 0;
  }
    .banner-image{
        display: none;
    }
    .banner{
        background: unset;
    }
    .banner .content-wrap {
      text-align: left;
      flex-flow: column;
      align-items: flex-start;
      gap: 10px;
    }
    .banner-image{
        padding: 0;
    }
    .banner {
      flex-direction: column;
      padding: 0px 0;
      text-align: center;
    }
  
    .banner-content {
      max-width: 100%;
    }
  
    .banner-title {
      font-size: 40px;
      max-width: 380px;
    }
  
    .banner-description {
      font-size: 15px;
    }
  
    .banner-btn {
      padding: 12px 22px;
    }
  
    .banner-image {
      margin-top: 40px;
    }
      /* demo */
      .demo-content{
        padding: 25px;
    }
  }
  
  /* Max 768px */
  /* RPA Benefits, Automation, Pagewrap, Compliance */
  @media (max-width: 768px) {
  
    /* Common Headings */
    .pagewrapper h2 {
      font-size: 28px;
    }
  }
  
  /* Max 767px */
  /* Common Padding, RPA, Banner, Why Choose */
  @media (max-width: 767px) {
    .file-automation-description p{
      font-size: 15px;
    }
    /* .why-choose ul */
    .why-choose ul{
        flex-flow: column;
    }
    .why-choose li{
        width: 100%;
    }
    /*  */
          /* demo */
          .demo-button{
            font-size: 15px;
          }
          .demo-content{
            padding: 25px;
            flex-flow: column;
            text-align: left;
            align-items: flex-start;
            gap: 20px;
        }
        .demo-content h2{
          max-width: 80%;
        }
        /*  */
    /* common-file-man */
.common-file-man.automation-section .card-grid{
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
    /*  */
    /* .automation-section .card-grid */
    .implement-automation .list-wrap li {
        width: 100%;
    }
    .file-automation-content p{
        width: 100%;
    }
    .automation-section .container{
        padding: 60px 20px;
    }
    .automation-section .card-grid{
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    .automation-section .card,
    .file-automation-card,
    .implement-automation .innr,
    .real-usecase .innr,
    .file-automation-section,
    .automating-storage .innr{
        padding: 20px;
    }
    .zrpa-faq-inner .zrpa-accordian h3 {
        padding: 20px 25px 20px 0;
        font-size: 20px;
    }
    .recording-progress {
      padding: 20px;
    }
    /*  */
    /* Common */
    .pagewrapper .content-wrap {
      padding: 40px 0;
    }
    /* Section Common */
    section .content-wrap {
      max-width: unset;
    }
  
    /* Banner */
    .banner-title {
      font-size: 32px;
      max-width: 290px;
    }
  
    .banner-description {
      font-size: 14px;
    }
  
    .banner-btn {
      font-size: 15px;
      padding: 12px 20px;
    }
  
  }
  
  /* Max 480px */
  /* Compliance */
  @media (max-width: 480px) {
    .demo-content h2 {
      max-width: 100%;
      font-size: 20px;
  }
    .pagewrapper h2 {
        font-size: 24px;
        letter-spacing: -0.5px;
      }
      .automation-section .card h3{
        font-size: 22px;
      }
  }