/* Our Working Process - premium SaaS style */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.our-process-section{
  background: #ffffff;
  padding: 44px 20px;
  animation: fadeInUp 0.6s ease-out;
}
.our-process-section .container{max-width:1200px;margin:0 auto}
.process-header{text-align:center;margin-bottom:20px}
.process-label{display:inline-block;color:#FF6B1A;font-weight:800;letter-spacing:1.5px;font-size:12px}
.process-subtitle{color:#0B1F4D;font-size:18px;margin:2px 0 0;font-weight:600}
.process-title{color:#0B1F4D;font-size:28px;margin:1px 0 0;font-weight:800}

.process-timeline{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px}
/* dotted connector across center */
.process-timeline::before{content:"";position:absolute;left:2%;right:2%;top:50%;transform:translateY(-50%);border-top:2px dotted rgba(255,107,26,0.5);z-index:1}

.process-step{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0;z-index:2;animation:fadeInUp 0.6s ease-out both}

.process-step:nth-child(1){animation-delay:0ms}
.process-step:nth-child(2){animation-delay:100ms}
.process-step:nth-child(3){animation-delay:200ms}
.process-step:nth-child(4){animation-delay:300ms}
.process-step:nth-child(5){animation-delay:400ms}

/* circular white icon card */
.step-icon-wrap{background:transparent;border-radius:28px;padding:2px;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease}
.step-icon{width:60px;height:60px;border-radius:50%;background:#ffffff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(11,31,77,0.08);transition:all 0.3s ease;position:relative}
.step-icon svg{width:32px;height:32px}

/* small orange number badge */
.step-badge{position:absolute;left:50%;transform:translateX(-50%);top:-8px;background:#FF6B1A;color:#fff;font-size:11px;font-weight:700;padding:5px 7px;border-radius:14px;box-shadow:0 4px 12px rgba(255,107,26,0.1);z-index:3}

.step-title{margin:8px 0 4px;color:#0B1F4D;font-size:16px;font-weight:700;transition:color 0.3s ease}
.step-desc{color:#334155;font-size:13px;line-height:1.4;max-width:200px}

/* hover effects */
.process-step:hover .step-icon{
  transform:scale(1.08);
  box-shadow:0 12px 28px rgba(255,107,26,0.18);
}

.process-step:hover .step-title{
  color:#FF6B1A;
}

.process-step:hover .step-icon-wrap{
  filter: drop-shadow(0 0 12px rgba(255,107,26,0.25));
}

/* equal heights and widths */
@media(min-width:1200px){
  .process-timeline{gap:16px}
  .process-step{min-height:auto}
}

/* Tablet: 3 per row */
@media(max-width:1199px){
  .process-timeline{flex-wrap:wrap}
  .process-step{flex:0 0 calc(33.333% - 12px);margin-bottom:20px}
  .process-timeline::before{left:6%;right:6%;top:50%;transform:translateY(-50%)}
}
/* Small tablet: 2 per row */
@media(max-width:767px){
  .process-step{flex:0 0 calc(50% - 9px)}
  .process-timeline::before{left:6%;right:6%;top:50%;transform:translateY(-50%)}
  .step-desc{max-width:160px}
}
/* Mobile: single column */
@media(max-width:480px){
  .process-step{flex:0 0 100%;display:flex;flex-direction:row;align-items:flex-start;text-align:left;padding:12px 6px;gap:12px}
  .step-icon{width:52px;height:52px;flex-shrink:0}
  .step-icon svg{width:24px;height:24px}
  .step-badge{left:8px;top:2px;transform:none}
  .step-title{margin:0;text-align:left}
  .step-desc{margin:4px 0 0;max-width:unset;text-align:left}
  .process-timeline::before{display:none}
}

/* compact the section visually to match reference */
.our-process-section{padding-top:36px;padding-bottom:36px}
.process-title{font-size:26px}

/* Process Details (small row below timeline) */
.process-details{background:#fff;padding:20px 0}
.details-grid{display:flex;gap:20px;justify-content:center;align-items:stretch;max-width:1100px;margin:0 auto}
.detail-item{flex:1 1 0;background:#fafafa;border-radius:10px;padding:18px;text-align:center;box-shadow:0 6px 18px rgba(11,31,77,0.04)}
.detail-item h5{color:#0B1F4D;margin-bottom:8px;font-size:16px;font-weight:700}
.detail-item p{color:#475569;font-size:14px;line-height:1.4}

@media(max-width:767px){
  .details-grid{flex-direction:column}
}