/* =================================================== Project file common css Begins ===================================================  */

/* =================================================== project banner css Begins ===================================================  */
.pf-appl-banner {
  padding-top: 74px;
}
.pf-appl-banner-container {
  max-width: 1320px;
  width: 90%;
  margin: 0 auto;
  padding: 76px 0 120px 0;
}
.pf-appl-banner-title-wrap {
  text-align: center;
  margin-bottom: 36px;
}
.pf-appl-banner-title {
  margin-bottom: 12px;
  font-size: 43px;
  line-height: 62px;
  font-weight: 700;
  color: #000000;
}
.pf-appl-banner-design-device {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.pf-appl-banner-design-device p {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.pf-appl-banner-device-type {
  display: flex;
  align-items: center;
  gap: 18px;
}
.pf-appl-banner-img img {
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 580px) {
  .pf-appl-banner-container {
    padding: 46px 0 80px 0;
  }
}
/* =================================================== project banner css Ends ===================================================  */
/* =================================================== Overview css Begins ===================================================  */
.pf-overview-conatainer {
  max-width: 924px;
  width: 90%;
  margin: 0 auto 148px auto;
}
.pf-title {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: #868585;
  margin-bottom: 20px;
}
.pf-overview-wrap p {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #000000;
  margin-bottom: 100px;
}
.pf-overview-profile {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.pf-overview-role {
  max-width: 262px;
}
.pf-overview-team {
  max-width: 258px;
}
.pf-overview-timeline {
  max-width: 225px;
}
.pf-overview-profile h6,
.pf-overview-profile p {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #000000;
}
.pf-overview-profile h6 {
  font-weight: 500;
  margin-bottom: 12px;
}
@media only screen and (min-width: 1520px) {
  .pf-overview-profile h6,
  .pf-overview-profile p {
    font-size: 16px;
    line-height: 26px;
  }
  .pf-overview-conatainer {
    max-width: 1080px;
  }
  .pf-overview-role {
    max-width: 268px;
  }
  .pf-title {
    font-size: 16px;
  }
}
@media only screen and (max-width: 768px) {
  .pf-overview-conatainer {
    margin: 0 auto 98px auto;
  }
}
@media only screen and (max-width: 580px) {
  .pf-overview-wrap p {
    margin-bottom: 50px;
  }
}
/* =================================================== Overview css Ends ===================================================  */
/* ===================================================  Problem statement CSS Begins ===================================================  */
.pf-problem-statement {
  background: #f5f5f5;
  padding: 60px 20px 82px 20px;
  margin-bottom: 100px;
}
.pf-problem-statement-wrap {
  max-width: 963px;
  margin: 0 auto;
  position: relative;
}
.pf-problem-statement-wrap .pf-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}
.pf-problem-statement-emoji {
  width: 78px;
  height: auto;
}
.pf-problem-statement-wrap p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
/* .pf-problem-statement-wrap p b {
    font-weight: 500;
  } */
/* ===================================================  Problem statement CSS Ends ===================================================  */
/* ===================================================  Process and solution CSS Begins ===================================================  */
.pf-process {
  margin-bottom: 120px;
}
.pf-process-wrap {
  max-width: 1040px;
  width: 90%;
  margin: 0 auto;
}
.pf-process-header {
  margin-bottom: 60px;
}
.pf-process-header h6 {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #000000ab;
  margin-bottom: 16px;
}
.pf-process-header p {
  font-size: 22px;
  font-weight: 600;
  line-height: 33px;
  color: #000000;
}
.pf-process-cont h6 {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #000000ab;
  margin-bottom: 60px;
}
.pf-process-list {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 54px;
}
.pf-process-item {
  max-width: 489px;
  color: #000000ab;
  font-weight: 400;
  line-height: 22px;
  font-size: 14px;
  display: flex;
  gap: 20px;
}
/* .pf-process-item b {
    font-weight: 500;
    color: #000000;
  } */
.pf-process-img {
  max-width: 1118px;
  width: 90%;
  margin: 0 auto;
}
.pf-process-img-wrap {
  background-color: #f5fafe;
  padding: 74px 56px 54px 96px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 120px;
}
.pf-process-img-container img {
  width: 288px;
  height: auto;
  margin-bottom: 46px;
}
.pf-process-img-content1 {
  border-top: 4px solid #ff1515;
  max-width: 372px;
}
.pf-process-img-content2 {
  border-top: 4px solid #58ad66;
  max-width: 340px;
}
.pf-process-img-title {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  color: #ff1515;
  margin-bottom: 7px;
  margin-top: 16px;
  display: block;
}
.pf-process-img-title {
  color: #58ad66;
}
.pf-process-img-content p {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #000000ab;
}
.pf-text-underline {
  text-decoration: underline;
  font-weight: 400;
}
.pf-process-img-content2 div {
  font-size: 15px;
  line-height: 23px;
  font-weight: 600;
  color: #000000ab;
  margin-bottom: 12px;
}
@media only screen and (min-width: 1520px) {
  .pf-process-wrap {
    max-width: 1080px;
  }
  .pf-process-header h6,
  .pf-process-cont h6 {
    font-size: 16px;
  }
  .pf-process-item {
    max-width: 490px;
    font-size: 16px;
    line-height: 26px;
  }
}
@media only screen and (max-width: 1080px) {
  .pf-process-item {
    max-width: 380px;
  }
}
@media only screen and (max-width: 998px) {
  .pf-process-img-wrap {
    flex-wrap: wrap;
    justify-content: center;
    gap: 62px;
    margin-top: 60px;
  }
}
@media only screen and (max-width: 768px) {
  .pf-process {
    margin-bottom: 62px;
  }
  .pf-process-header {
    margin-bottom: 40px;
  }
  .pf-process-list {
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .pf-process-item {
    max-width: 100%;
  }
}
@media only screen and (max-width: 580px) {
  .pf-process-img-wrap {
    padding: 74px 36px 54px 56px;
  }
  .pf-process-img-container img {
    width: 180px;
  }
}
/* ===================================================  Process and solution CSS Ends   ===================================================  */
/* =================================================== Approval post method 1 css Begins ===================================================  */
.pf-approval-post {
  margin-bottom: 120px;
}
.pf-approval-post-wrap {
  max-width: 985px;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}
.pf-approval-post-img {
  background-color: #f5fafe;
  padding: 66px 94px 68px 82px;
}
.pf-approval-post-img img {
  width: 288px;
  height: auto;
}
.pf-approval-post-default-title {
  font-size: 11px;
  font-weight: 500;
  line-height: 12px;
  color: #868585;
}
.pf-approval-post-title {
  font-size: 25px;
  font-weight: 600;
  line-height: 29px;
  color: #000000;
  margin-top: 8px;
  margin-bottom: 12px;
}
.pf-approval-post-content {
  max-width: 442px;
}
.pf-approval-post-content p,
.pf-approvalPost-m2-content p {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #000000ab;
}
@media only screen and (max-width: 1080px) {
  .pf-approval-post-img {
    padding: 52px 64px 56px 64px;
  }
  .pf-approval-post-img img {
    width: 200px;
  }
}
@media only screen and (max-width: 980px) {
  .pf-approval-post {
    margin-bottom: 82px;
  }
  .pf-approval-post-img {
    padding: 36px 48px;
  }
  .pf-approval-post-img img {
    width: 184px;
  }
}
@media only screen and (max-width: 768px) {
  .pf-approval-post-wrap {
    flex-direction: column-reverse;
    gap: 60px;
  }
}
@media only screen and (max-width: 428px) {
  .pf-approval-post-img img {
    width: 140px;
  }
}
/* =================================================== Approval post method 1 css Ends ===================================================  */
/* =================================================== Approval post method 2 css Begins ===================================================  */
.pf-approvalPost-m2 {
  margin-bottom: 120px;
}
.pf-approvalPost-m2-wrap {
  max-width: 985px;
  margin: 0 auto;
  width: 90%;
}
.pf-approvalPost-m2-img-cont {
  background-color: #f5fafe;
  padding: 0 128px 74px 106px;
  display: flex;
  justify-content: space-between;
}
.pf-approvalPost-m2-img-top-pad {
  padding-top: 66px;
}
.pf-approvalPost-m2-img-cont img {
  width: 288px;
  height: auto;
}
.pf-delailed-view-img1 {
  margin-top: 52px;
}
.pf-approvalPost-m2-content {
  margin-top: 40px;
}
.pf-approvalPost-m2-content p {
  max-width: 800px;
}
@media only screen and (max-width: 998px) {
  .pf-approvalPost-m2 {
    margin-bottom: 62px;
  }
  .pf-approvalPost-m2-img-cont {
    padding: 0 68px 74px 68px;
  }
  .pf-approvalPost-m2-img-top-pad {
    padding-top: 66px;
  }
  .pf-approvalPost-m2-img-cont img {
    width: 228px;
  }
}
@media only screen and (max-width: 768px) {
  .pf-approvalPost-m2-wrap {
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
  }
  .pf-approvalPost-m2-content {
    margin-top: 0;
  }
}
@media only screen and (max-width: 682px) {
  .pf-approvalPost-m2-img-cont {
    padding: 0 38px 74px 38px;
  }
  .pf-approvalPost-m2-img-top-pad {
    padding-top: 66px;
  }
  .pf-approvalPost-m2-img-cont img {
    width: 158px;
  }
}
@media only screen and (max-width: 486px) {
  .pf-approvalPost-m2-img-cont {
    padding: 0 28px 44px 28px;
  }
  .pf-approvalPost-m2-img-top-pad {
    padding-top: 44px;
  }
  .pf-approvalPost-m2-img-cont img {
    width: 108px;
  }
}
@media only screen and (max-width: 320px) {
  .pf-approvalPost-m2-img-cont {
    padding: 0 28px 20px 28px;
  }
  .pf-approvalPost-m2-img-top-pad {
    padding-top: 20px;
  }
  .pf-approvalPost-m2-img-cont img {
    width: 68px;
  }
}
/* =================================================== Approval post method 2 css End ===================================================  */
/* =================================================== Approval post method 3 css Begins ===================================================  */
.pf-approvalPost-m3-wrap {
    max-width: 1080px;
    margin: 0 auto;
    width: 90%;
  }
  .pf-approvalPost-m3-img-cont {
    background-color: #f5fafe;
    padding: 60px;
    display: flex;
    justify-content: space-between;
  }
  .pf-approvalPost-m3-img-cont img {
    width: 250px;
    height: auto;
  }
  @media only screen and (max-width: 1080px) {
    .pf-approvalPost-m3-img-cont img {
      width: 200px;
    }
  }
  @media only screen and (max-width: 998px) {
    .pf-approvalPost-m3-img-cont img {
      width: 170px;
    }
  }
  @media only screen and (max-width: 768px) {
    .pf-approvalPost-m3-wrap {
      display: flex;
      flex-direction: column-reverse;
      gap: 40px;
    }
    .pf-approvalPost-m3-img-cont {
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
    }
    .pf-approvalPost-m3-img-cont img {
      width: 200px;
    }
  }
  /* =================================================== Approval post method 3 css Ends ===================================================  */
  /* =================================================== Impact css Begins ===================================================  */
.pf-impact {
    margin-bottom: 120px;
  }
  .pf-impact-wrap {
    max-width: 985px;
    width: 90%;
    margin: 0 auto;
  }
  .pf-bold-title {
    font-size: 25px;
    line-height: 32px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 32px;
  }
  .pf-impact-cont {
    display: flex;
    gap: 172px;
  }
  .pf-impact-content-wrap p {
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    color: #000000;
    max-width: 635px;
  }
  .pf-impact-content-wrap span {
    font-weight: 600;
  }
  .pf-impact-content-wrap p:first-child {
    margin-bottom: 30px;
  }
  @media only screen and (max-width: 998px) {
    .pf-impact {
      margin-bottom: 62px;
    }
    .pf-impact-cont {
      gap: 90px;
    }
    .pf-impact-content-wrap p {
      max-width: 560px;
    }
  }
  @media only screen and (max-width: 768px) {
    .pf-impact-cont {
      flex-direction: column-reverse;
      align-items: center;
      gap: 40px;
    }
    .pf-bold-title {
      margin-bottom: 20px;
    }
    .pf-impact-content-wrap p {
      max-width: 100%;
    }
    .pf-impact-content-wrap p:first-child {
      margin-bottom: 20px;
    }
  }
  /* =================================================== Impact css Ends ===================================================  */
  /* =================================================== Keytakeaway css Begins ===================================================  */
.pf-keytakeaway-wrap {
    max-width: 985px;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 140px;
  }
  .pf-keytakeaway-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
  }
  .pf-keytakeaway-content-wrap p {
    max-width: 522px;
  }
  .pf-keytakeaway-content-wrap p:nth-child(2) {
    max-width: 444px;
    margin-bottom: 30px;
  }
  .pf-keytakeaway-img img {
    width: 317px;
    height: auto;
  }
  @media only screen and (max-width: 998px) {
    .pf-keytakeaway-wrap {
      padding-bottom: 80px;
    }
    .pf-keytakeaway-content-wrap p {
      max-width: 462px;
    }
    .pf-keytakeaway-content-wrap p:nth-child(2) {
      max-width: 410px;
    }
    .pf-keytakeaway-img img {
      width: 276px;
    }
  }
  @media only screen and (max-width: 768px) {
    .pf-keytakeaway-cont {
      flex-direction: column;
    }
    .pf-keytakeaway-content-wrap p {
      max-width: 100%;
    }
    .pf-keytakeaway-content-wrap p:nth-child(2) {
      max-width: 100%;
      margin-bottom: 20px;
    }
    .pf-keytakeaway-img img {
      width: 276px;
    }
  }
  @media only screen and (max-width: 486px) {
    .pf-keytakeaway-img img {
      width: 226px;
    }
  }
  /* =================================================== Keytakeaway css Ends ===================================================  */