/* =========================================================
   Process Timeline Section - Frontend Styles
   Brand: #04295F  |  Titles: Plus Jakarta Sans  |  Body: DM Sans
========================================================= */

.prs-section{
  --prs-brand:        #04295F;
  --prs-brand-soft:   #E8EEF7;
  --prs-brand-light:  #F4F7FB;
  --prs-text-dark:    #04295F;
  --prs-text-muted:   #6B7280;
  --prs-white:        #FFFFFF;
  --prs-border:       #E5E7EB;
  --prs-shadow-sm:    0 2px 8px rgba(4, 41, 95, 0.05);
  --prs-shadow-md:    0 4px 20px rgba(4, 41, 95, 0.08);

  --prs-font-title:   'Plus Jakarta Sans', sans-serif;
  --prs-font-body:    'DM Sans', sans-serif;

  font-family: var(--prs-font-body);
  padding: 60px 20px;
  color: var(--prs-text-dark);
  -webkit-font-smoothing: antialiased;
}

.prs-container{
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start;
}

/* ============================================================
   LEFT  -  STEPS TIMELINE
============================================================ */
.prs-steps{
  position: relative;
  display: flex; flex-direction: column;
  gap: 18px;
}
/* dashed vertical line behind step numbers */
.prs-steps::before{
  content: '';
  position: absolute;
  left: 22px;
  top: 22px;
  bottom: 22px;
  width: 0;
  border-left: 2px dashed #B8C5D9;
  z-index: 0;
}

.prs-step{
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 1;
}

.prs-step-number{
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--prs-brand);
  color: var(--prs-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--prs-font-title);
  font-weight: 700; font-size: 14px;
  letter-spacing: .5px;
  box-shadow: 0 2px 6px rgba(4,41,95,.20);
}

.prs-step-card{
  flex: 1;
  background: var(--prs-white);
  border: 1px solid var(--prs-border);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 22px;
  box-shadow: var(--prs-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.prs-step-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--prs-shadow-md);
}

.prs-step-icon{
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  color: var(--prs-brand);
  font-size: 26px;
}

.prs-step-content{flex: 1;}
.prs-step-title{
  font-family: var(--prs-font-title);
  font-weight: 700;
  font-size: 17px;
  color: var(--prs-text-dark);
  margin: 0 0 4px 0;
  line-height: 1.3;
}
.prs-step-desc{
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--prs-text-muted);
  margin: 0;
}

/* ============================================================
   RIGHT  -  BENEFITS CARD
============================================================ */
.prs-benefits-card{
  background: var(--prs-white);
  border: 1px solid var(--prs-border);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: var(--prs-shadow-sm);
  position: sticky;
  top: 30px;
}

.prs-benefits-heading{
  font-family: var(--prs-font-title);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.3;
  color: var(--prs-text-dark);
  margin: 0 0 26px 0;
}

.prs-benefits-list{
  display: flex; flex-direction: column;
  gap: 22px;
}

.prs-benefit-item{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--prs-border);
}
.prs-benefit-item:last-child{border-bottom: none; padding-bottom: 0;}

.prs-benefit-icon{
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--prs-brand-soft);
  color: var(--prs-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}

.prs-benefit-content{flex: 1;}
.prs-benefit-title{
  font-family: var(--prs-font-title);
  font-weight: 700;
  font-size: 15px;
  color: var(--prs-text-dark);
  margin: 0 0 4px 0;
}
.prs-benefit-desc{
  font-size: 13px;
  line-height: 1.55;
  color: var(--prs-text-muted);
  margin: 0;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1000px){
  .prs-container{
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .prs-benefits-card{position: static;}
}

@media (max-width: 640px){
  .prs-section{padding: 40px 14px;}

  .prs-steps::before{left: 18px;}

  .prs-step{gap: 12px;}
  .prs-step-number{
    width: 38px; height: 38px;
    font-size: 12px;
  }
  .prs-step-card{
    padding: 14px;
    gap: 14px;
    border-radius: 12px;
  }
  .prs-step-icon{
    width: 34px; height: 34px;
    font-size: 22px;
  }
  .prs-step-title{font-size: 15px;}
  .prs-step-desc{font-size: 12.5px;}

  .prs-benefits-card{
    padding: 24px 20px;
    border-radius: 14px;
  }
  .prs-benefits-heading{font-size: 19px; margin-bottom: 20px;}
  .prs-benefit-icon{
    width: 40px; height: 40px;
    font-size: 17px;
  }
}

@media (max-width: 420px){
  .prs-step-card{
    flex-wrap: wrap;
  }
  .prs-step-icon{display: none;}   /* save space on very small screens */
}