/* =========================
SMART PAN PROCESS
========================= */

.smart-pan-process{
padding:110px 5%;
background:#ffffff;
position:relative;
overflow:hidden;
}

.timeline-wrapper{
position:relative;
max-width:1200px;
margin:auto;
display:flex;
flex-direction:column;
gap:30px;
}

/* CENTER LINE */

.timeline-wrapper::before{
content:"";
position:absolute;
left:50%;
top:0;
transform:translateX(-50%);
width:4px;
height:100%;
background:linear-gradient(to bottom,#16a34a,#86efac);
border-radius:20px;
}

/* CARD */

.timeline-card{
width:48%;
background:#fff;
border:1px solid #dcfce7;
border-radius:30px;
padding:30px;
position:relative;
display:flex;
align-items:flex-start;
gap:20px;
box-shadow:0 20px 50px rgba(34,197,94,.08);

opacity:0;
transform:translateY(80px);
animation:showCard 1s forwards;
}

/* SERIAL ANIMATION */

.timeline-card:nth-child(1){
animation-delay:.3s;
}

.timeline-card:nth-child(2){
margin-left:auto;
animation-delay:1.2s;
}

.timeline-card:nth-child(3){
animation-delay:2.1s;
}

.timeline-card:nth-child(4){
margin-left:auto;
animation-delay:3s;
}

.timeline-card:nth-child(5){
animation-delay:3.9s;
}

.timeline-card:nth-child(6){
margin-left:auto;
animation-delay:4.8s;
}

/* ICON */

.timeline-icon{
min-width:75px;
height:75px;
border-radius:22px;
background:linear-gradient(135deg,#16a34a,#22c55e);
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
color:#fff;
box-shadow:0 15px 35px rgba(34,197,94,.25);
animation:pulseIcon 2s infinite;
}

/* CONTENT */

.timeline-content{
flex:1;
}

.step-badge{
display:inline-block;
padding:7px 16px;
border-radius:30px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:700;
margin-bottom:15px;
}

.timeline-content h3{
font-size:28px;
margin-bottom:14px;
color:#111827;
}

.timeline-content p{
font-size:15px;
line-height:1.9;
color:#64748b;
margin-bottom:22px;
}

/* LIVE STATUS BOX */

.live-box{
height:55px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:15px;
background:#f0fdf4;
border:1px solid #bbf7d0;
color:#16a34a;
animation:blinkBox 2s infinite;
}

.green-box{
background:#dcfce7;
color:#15803d;
}

.blue-box{
background:#dbeafe;
color:#2563eb;
border-color:#bfdbfe;
}

.orange-box{
background:#ffedd5;
color:#ea580c;
border-color:#fed7aa;
}

.success-box{
background:linear-gradient(135deg,#16a34a,#22c55e);
color:#fff;
border:none;
}

/* DOT */

.timeline-card::before{
content:"";
position:absolute;
top:45px;
width:22px;
height:22px;
background:#16a34a;
border:5px solid #dcfce7;
border-radius:50%;
z-index:2;
}

.timeline-card:nth-child(odd)::before{
right:-60px;
}

.timeline-card:nth-child(even)::before{
left:-60px;
}

/* ANIMATION */

@keyframes showCard{

0%{
opacity:0;
transform:translateY(80px) scale(.95);
}

100%{
opacity:1;
transform:translateY(0) scale(1);
}

}

@keyframes pulseIcon{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}

@keyframes blinkBox{

0%{
opacity:1;
}

50%{
opacity:.6;
}

100%{
opacity:1;
}

}

/* =========================
MOBILE RESPONSIVE
========================= */

@media(max-width:900px){

.timeline-wrapper::before{
left:25px;
}

.timeline-card{
width:100%;
margin-left:0 !important;
padding:24px;
}

.timeline-card::before{
left:14px !important;
right:auto !important;
top:-14px;
}

.timeline-content h3{
font-size:22px;
}

.timeline-icon{
min-width:60px;
height:60px;
font-size:25px;
border-radius:18px;
}

}

@media(max-width:600px){

.smart-pan-process{
padding:80px 4%;
}

.timeline-card{
flex-direction:column;
gap:18px;
border-radius:24px;
}

.timeline-content h3{
font-size:20px;
}

.timeline-content p{
font-size:14px;
}

.live-box{
font-size:13px;
height:50px;
}

}