/* ====================================================  Common ============================================================= */
.pf-head-title {
  color: rgba(0, 0, 0, 0.67);
  font-size: 14.4px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 20px;
}
.pf-head-subtitile {
  color: #393939;
  font-size: 42px;
  font-weight: 500;
  line-height: 50px;
  margin-bottom: 20px;
}
.pf-head-cont {
  color: #393939;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}
@media only screen and (max-width: 768px) {
  .pf-head-subtitile {
    font-size: 38px;
    line-height: 44px;
  }
}
@media only screen and (max-width: 580px) {
  .pf-head-subtitile {
    font-size: 28px;
    line-height: 32px;
  }
}
/*  =================================================== Approval Banner Begins ===================================================  */
.pf-approval-banner {
  padding-top: 74px;
  margin-bottom: 100px;
}
.pf-appr-banner-cont {
  max-width: 1320px;
  width: 90%;
  margin: 0 auto;
  padding: 76px 0 0 0;
}
.pf-appr-banner-cont img {
  max-width: 1320px;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .pf-approval-banner {
    margin-bottom: 60px;
  }
}
/*  =================================================== Approval Banner Ends ===================================================  */
/* =================================================== Background and my role Begins =================================================== */
.pf-approval-bg .pf-wrt-bg-left-wrap p {
  font-weight: 600;
}
.pf-approval-bg .pf-wrt-bg-left-wrap a {
  margin-top: 8px;
  color: #1877f2;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 24px;
}
.pf-appr-bg-impact {
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  background: #fbfbfb;
  max-width: 364px;
  padding: 12px;
  margin-top: 24px;
}
.pf-appr-bg-impact span {
  display: block;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 16px;
}
.pf-appr-bg-impact p {
  color: #393939;
  font-size: 16px;
  font-weight: 400 !important;
  line-height: 26px;
  margin-bottom: 0;
}
/* =================================================== Background and my role Ends =================================================== */
/* =================================================== Approval Problem Begins =================================================== */

/* =================================================== Approval Problem Ends =================================================== */
/* =================================================== Design Question Begins =================================================== */

/* =================================================== Design Question Ends =================================================== */
/* =================================================== Approvals Solution Begins ===================================================  */
.pf-appr-solution {
  padding-bottom: 100px;
}
.pf-appr-sol-wrap {
  max-width: 816px;
  width: 90%;
  margin: 0 auto;
}
.pf-appr-sol-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.pf-appr-sol-content {
  max-width: 466px;
}
.pf-appr-sol-image img {
  max-width: 250px;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .pf-appr-solution {
    padding-bottom: 60px;
  }
  .pf-appr-sol-wrap {
    flex-direction: column;
  }
}
/* =================================================== Approvals Solution Ends ===================================================  */
/* =================================================== Research Begins =================================================== */
.pf-research {
  padding-bottom: 120px;
}
.pf-research-wrap {
  max-width: 926px;
  width: 90%;
  margin: 0 auto;
}
.pf-resrch-title {
  color: #1877f2;
  font-size: 42px;
  font-weight: 500;
  line-height: 50px;
  margin-bottom: 40px;
}
.pf-resrch-ques {
  color: rgba(0, 0, 0, 0.67);
  font-size: 14.4px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 20px;
}
.pf-resrch-ans {
  color: #393939;
  font-size: 42px;
  font-weight: 500;
  line-height: 50px;
  margin-bottom: 12px;
}
.pf-research-wrap p {
  max-width: 754px;
  color: #393939;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 40px;
}
.pf-research-wrap p span {
  font-weight: 600;
}
.pf-resrch-roles {
  color: rgba(0, 0, 0, 0.67);
  font-size: 14.4px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 44px;
  display: block;
}
.pf-resrch-img-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.pf-resrch-img-wrap img {
  max-width: 396px;
  width: 100%;
  height: auto;
}
.pf-resrch-img-wrap img:last-child {
  max-width: 430px;
}
@media only screen and (max-width: 998px) {
  .pf-resrch-img-wrap {
    justify-content: center;
  }
}
@media only screen and (max-width: 768px) {
  .pf-resrch-ans {
    font-size: 38px;
    line-height: 44px;
  }
  .pf-research {
    padding-bottom: 80px;
  }
}

/* =================================================== Research Ends =================================================== */
/* =================================================== User stories Begins ===================================================  */
.pf-appr-user-stories {
  padding-bottom: 100px;
}
.pf-appr-iuserstory-head {
  max-width: 832px;
  width: 90%;
  margin: 0 auto;
}
.pf-appr-iuserstory-head .pf-prb-subtitile {
  margin-bottom: 60px;
}
.pf-appr-userstory-carousel {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  background-color: #101b28;
}
.pf-appr-carousel-container {
  max-width: 874px;
  width: 90%;
  margin: 0 auto;
  transition: transform 0.5s ease-in-out;
  padding: 65px 0 75px;
}
.pf-appr-carousel-slide {
  box-sizing: border-box;
  display: none;
  min-height: 387px;
}
.pf-appr-carousel-slide.active {
  display: block;
}
.pf-appr-carousel-title {
  color: #fff;
  font-size: 14.4px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 20px;
}
.pf-appr-carousel-cont {
  color: #fff;
  font-size: 42px;
  font-weight: 500;
  line-height: 50px;
}
.pf-appr-carousel-navigation button {
  background: none;
  border: none;
  color: #fff;
  font-size: 2em;
  cursor: pointer;
  padding: 0 10px;
  visibility: visible;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  transition: transform 0.2s ease, font-size 0.2s ease;
}
.pf-appr-navBtn svg {
  width: 28px;
  height: 50px;
}
.pf-appr-carousel-navigation .pf-appr-prev {
  left: 72px;
}

.pf-appr-carousel-navigation .pf-appr-next {
  right: 72px;
}

.pf-appr-carousel-navigation button:hover {
  transform: translateY(-50%) scale(1.1);
  color: #00a8e8;
}
.pf-appr-carousel-indicators {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 30px;
  left: 50%;
}
.pf-appr-carousel-indicators .indicator {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #3a3e43;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.pf-appr-carousel-indicators .indicator.active {
  background-color: #ffffff;
}
@media only screen and (max-width: 998px) {
  .pf-appr-carousel-container {
    max-width: 900px;
  }
  .pf-appr-carousel-cont {
    font-size: 32px;
    line-height: 42px;
  }
  .pf-appr-navBtn svg {
    width: 20px;
    height: 40px;
  }
  .pf-appr-carousel-navigation .pf-appr-prev {
    left: 12px;
  }
  .pf-appr-carousel-navigation .pf-appr-next {
    right: 12px;
  }
}
@media only screen and (max-width: 768px) {
  .pf-appr-carousel-container {
    max-width: 460px;
  }
  .pf-appr-carousel-cont {
    font-size: 28px;
    line-height: 38px;
  }
}
@media only screen and (max-width: 598px) {
  .pf-appr-carousel-container {
    max-width: 260px;
  }
  .pf-appr-carousel-cont {
    font-size: 20px;
    line-height: 30px;
  }
  .pf-appr-navBtn svg {
    width: 16px;
    height: 36px;
  }
}
/* =================================================== User stories Ends ===================================================  */
/* =================================================== Pain points Begins ===================================================  */
.pf-painpoints {
  padding-bottom: 100px;
}
.pf-painpoints-wrap {
  max-width: 990px;
  width: 90%;
  margin: 0 auto;
}
.pf-painpoints-wrap .pf-prb-subtitile {
  margin-bottom: 66px;
}
.pf-painpoints-list {
  display: flex;
  align-items: center;
  gap: 100px;
  flex-wrap: wrap;
}
.pf-painpoints-item {
  background-color: #f5f5f5;
  padding: 40px;
  border-radius: 12px;
  color: #1e242a;
  line-height: 26px;
  max-width: 306px;
}
.pf-painpoints-item:first-child {
  min-height: 352px;
}
.pf-painpoints-item:nth-child(2) {
  max-width: 331px;
}
.pf-painpoints-item span {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  display: block;
}
.pf-painpoints-item p {
  font-size: 16px;
  font-weight: 400;
}
@media only screen and (max-width: 998px) {
  .pf-painpoints-list {
    justify-content: center;
    gap: 60px;
  }
}
/* =================================================== Pain points Ends ===================================================  */
/* =================================================== Userflow Begins ===================================================  */
.pf-user-flow {
  padding-bottom: 100px;
}
.pf-user-flow-head {
  max-width: 990px;
  width: 90%;
  margin: 0 auto;
}
.pf-head-content {
  color: #393939;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 60px;
}
.pf-user-flow-img-wrap {
  max-width: 1320px;
  width: 90%;
  margin: 0 auto;
  background-color: #f5f5f5;
  height: auto;
}
.pf-user-flow-img-item {
  padding: 40px 96px 50px 88px;
  border-bottom: 8px solid #ffffff;
}
.pf-user-flow-img-item img {
  max-width: 719px;
  width: 100%;
  height: auto;
}
.pf-user-flow-img-item:first-child {
  display: flex;
  gap: 110px;
  flex-wrap: wrap;
}
.pf-user-flow-img-item:last-child img {
  max-width: 1136px;
}
.pf-user-flow-img-item span {
  display: block;
  color: #cf3431;
  font-size: 32px;
  font-weight: 400;
  line-height: normal;
}
.pf-user-flow-img-item:last-child span {
  color: #16ad4c;
}
@media only screen and (max-width: 1280px) {
  .pf-user-flow-img-item:first-child {
    gap: 0;
  }
}
@media only screen and (max-width: 998px) { 
  .pf-user-flow {
    padding-bottom: 60px;
  }
  .pf-user-flow-img-item span  {
    font-size: 28px;
  }
}
@media only screen and (max-width: 768px) { 
  .pf-user-flow-img-item {
    padding: 30px;
  }
  .pf-user-flow-img-item span  {
    font-size: 28px;
  }
}
/* =================================================== Userflow ENds ===================================================  */
/* =================================================== Userflow Begins ===================================================  */
.pf-final-stage {
  padding-bottom: 60px;
}
.pf-final-stage-wrap {
  max-width: 840px;
  width: 90%;
  margin: 0 auto;
}
.pf-final-stage-title {
  color: #393939;
  font-size: 42px;
  font-weight: 500;
  line-height: 50px;
}
.pf-process-img {
  max-width: 1118px;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 100px;
}
.pf-process-img-wrap {
  background-color: #f5fafe;
  padding: 74px 56px 54px 96px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.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-process-img-content2 div {
  font-size: 15px;
  line-height: 23px;
  font-weight: 600;
  color: #000000ab;
  margin-bottom: 12px;
}
@media only screen and (max-width: 998px) {
  .pf-process-img-wrap {
    flex-wrap: wrap;
    justify-content: center;
    gap: 62px;
  }
  .pf-final-stage-title {
    font-size: 38px;
    line-height: 44px;
  }
}
@media only screen and (max-width: 580px) {
  .pf-process-img-wrap {
    padding: 30px;
  }
  .pf-process-img-container img {
    width: 180px;
  }
}
/* =================================================== Userflow Ends ===================================================  */
/* =================================================== Approval stages Begins =================================================== */
.pf-appr-stages {
  padding-bottom: 100px;
}
.pf-appr-stages-content {
  max-width: 840px;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 60px;
}
.pf-appr-stage-cont-wrap {
  max-width: 1320px;
  margin: 0 auto;
  width: 90%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 20px 74px 20px;
}
.pf-appr-stage-cont-wrap img {
  max-width: 798px;
  width: 100%;
  height: auto;
}
.pf-appr-stage-cont-wrap img:nth-child(2) {
  max-width: 820px;
  margin-left: 22px;
}
.pf-appr-stage-cont-wrap img:last-child {
  max-width: 805px;
  margin-top: 10px;
  margin-left: 8px;
}
@media only screen and (max-width: 768px) {
  .pf-appr-stage-cont-wrap img:nth-child(2),
  .pf-appr-stage-cont-wrap img:last-child {
    margin-left: 0;
  }
}
/* =================================================== Approval stages Ends =================================================== */
/* =================================================== Approvals Images gif Begins =================================================== */

.pf-appr-design-wrap {
  max-width: 896px;
  margin: 0 auto;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 100px;
  gap: 30px;
}
.pf-appr-design-content .pf-head-subtitile {
  max-width: 493px;
}
.pf-appr-design-content .pf-head-cont {
  max-width: 445px;
}
.pf-appr-design-img img {
  max-width: 250px;
  width: 100%;
  height: auto;
}
.pf-appr-design-container .pf-appr-design-wrap:nth-child(odd) {
  flex-direction: row-reverse;
}
@media only screen and (max-width: 768px) {
  .pf-appr-design-wrap {
    flex-direction: column;
    padding-bottom: 60px;
  }
  .pf-appr-design-container .pf-appr-design-wrap:nth-child(odd) {
    flex-direction: column;
  }
}
/* =================================================== Approvals Images gif Ends =================================================== */
/* =================================================== Impact Begins =================================================== */
.pf-appr-impact {
  margin-bottom: 120px;
}
.pf-appr-impact-wrap {
  max-width: 985px;
  width: 90%;
  margin: 0 auto;
}
.pf-appr-impact-cont {
  display: flex;
  align-items: center;
  gap: 172px;
}
.pf-appr-impact-content-wrap div:first-child {
  margin-bottom: 30px;
}
.pf-appr-impact-content-wrap p {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  max-width: 635px;
  margin-bottom: 0 !important;
  padding-bottom: 10px;
}
.pf-appr-impact-content-wrap div:last-child p:last-child {
  padding: 0;
}
.pf-appr-impact-content-wrap div p:last-child {
  padding-bottom: 20px;
}
.pf-appr-impact-content-wrap span {
  color: #1877f2;
  font-size: 42px;
  font-weight: 500;
  line-height: 50px;
  margin-bottom: 20px;
  display: block;
}
.pf-appr-impact-content-wrap p:first-child {
  margin-bottom: 30px;
}
@media only screen and (max-width: 998px) {
  .pf-appr-impact {
    margin-bottom: 62px;
  }
  .pf-appr-impact-cont {
    gap: 90px;
  }
  .pf-appr-impact-content-wrap p {
    max-width: 560px;
  }
}
@media only screen and (max-width: 768px) {
  .pf-appr-impact-cont {
    flex-direction: column-reverse;
    align-items: center;
    gap: 40px;
  }
  .pf-appr-impact-content-wrap p {
    max-width: 100%;
  }
  .pf-appr-impact-content-wrap p:first-child {
    margin-bottom: 20px;
  }
  .pf-appr-impact-content-wrap div p:last-child {
    padding-bottom: 0;
  }
  .pf-appr-impact-content-wrap span {
    font-size: 28px;
    line-height: 38px;
  }
}
/* =================================================== Impact 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;
}
.pf-head-cont span {
  font-weight: 600;
}
@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 ===================================================  */