/* HERO */

.process-hero{
height:500px;
background:linear-gradient(135deg,#111827,#1f2937);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}

.hero-content{
max-width:700px;
animation:fadeUp 1s ease;
}

.hero-content h1{
font-size:50px;
margin-bottom:20px;
}

.hero-content p{
font-size:18px;
opacity:.9;
}

/* SECTION */

.procedure-steps{
position:relative;
padding:100px 20px;
max-width:1100px;
margin:auto;
}

/* TIMELINE LINE */

.timeline-line{
position:absolute;
left:50%;
top:0;
bottom:0;
width:4px;
background:linear-gradient(#2563eb,#111827);
transform:translateX(-50%);
}

/* STEP */

.step{
position:relative;
width:50%;
padding:40px;
box-sizing:border-box;
}

.step:nth-child(odd){
left:0;
text-align:right;
}

.step:nth-child(even){
left:50%;
}

/* CARD */

.step-content{

background:white;

padding:30px;

border-radius:16px;

box-shadow:0 20px 50px rgba(0,0,0,.1);

transition:.4s;

}

.step-content:hover{
transform:translateY(-8px);
box-shadow:0 25px 60px rgba(0,0,0,.15);
}

/* NUMBER */

.step-number{
position:absolute;
top:40px;
right:-30px;
background:#2563eb;
color:white;
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
font-size:18px;
}

.step:nth-child(even) .step-number{
left:-30px;
right:auto;
}

/* ANIMATION */

.fadeUp{
opacity:0;
transform:translateY(60px);
transition:all .8s ease;
}

.fadeUp.show{
opacity:1;
transform:translateY(0);
}

/* RESPONSIVE */

@media(max-width:900px){

.timeline-line{
left:20px;
}

.step{
width:100%;
padding-left:60px;
text-align:left !important;
left:0 !important;
}

.step-number{
left:0 !important;
right:auto;
}

}