*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Vazirmatn',sans-serif;
background:#DFE5D7;
color:#2C3229;
min-height:100vh;
padding:40px 20px;
}

h1,
h2,
h3{
font-family:'Lalezar',cursive;
font-weight:400;
letter-spacing:.4px;
line-height:1.5;
}

.page{

width:100%;

max-width:980px;

margin:auto;

}

.card{

background:#fff;

border-radius:30px;

box-shadow:0 18px 55px rgba(44,50,41,.08);

overflow:hidden;

}
.logo{

width:90px;

display:block;

margin:45px auto 25px;

}

.hero{

text-align:center;

padding:0 40px;

margin-bottom:40px;

}

.hero h1{

font-size:38px;

color:#2C3229;

margin-bottom:16px;

}

.hero p{

font-size:16px;

line-height:2;

color:#666;

max-width:620px;

margin:auto;

}

.status-card{

margin:0 40px 45px;

background:#F6F7F3;

border:1px solid #D6DBCF;

border-radius:24px;

overflow:hidden;

}

.status-top{

height:6px;

background:#C2C8BC;

}

.status-body{

padding:38px;

text-align:center;

}

.status-label{

font-size:14px;

color:#7A8076;

margin-bottom:14px;

}

.status-title{

font-family:'Lalezar',cursive;

font-size:44px;

color:#2C3229;

margin-bottom:12px;

}

.status-date{

font-size:14px;

color:#888;

}
.timeline{

margin:0 40px 50px;

padding:35px 20px;

display:flex;

justify-content:space-between;

align-items:flex-start;

position:relative;

}

.timeline::before{

content:"";

position:absolute;

top:18px;

right:60px;

left:60px;

height:3px;

background:#D7DCD2;

z-index:1;

border-radius:99px;

}

.step{

flex:1;

position:relative;

z-index:2;

text-align:center;

}

.step-circle{

width:38px;

height:38px;

margin:auto;

border-radius:50%;

background:#D7DCD2;

display:flex;

align-items:center;

justify-content:center;

font-size:15px;

font-weight:700;

color:#fff;

transition:.25s;

}

.step.done .step-circle{

background:#4F8A57;

}

.step.active .step-circle{

background:#2C3229;

transform:scale(1.08);

}

.step-title{

margin-top:14px;

font-size:13px;

line-height:1.8;

color:#666;

padding:0 5px;

}

.step.done .step-title{

color:#2C3229;

font-weight:600;

}

.step.active .step-title{

color:#2C3229;

font-weight:700;

}