.track-result-page{

padding:140px 0 80px;

background:#F6F8FD;

}

.tracking-header{

background:#25358F;

border-radius:22px;

padding:35px 40px;

color:#fff;

margin-bottom:35px;

}

.tracking-label{

font-size:13px;

letter-spacing:1px;

opacity:.8;

}

.tracking-header h1{

font-size:42px;

font-weight:800;

margin:8px 0;

letter-spacing:2px;

}

.tracking-header p{

opacity:.85;

margin:0;

}

.status-pill{

display:inline-block;

padding:10px 20px;

border-radius:50px;

font-weight:700;

font-size:14px;

}

.status-submitted{

background:#EDE9FE;

color:#6D28D9;

}

.status-received{

background:#DBEAFE;

color:#2563EB;

}

.status-review{

background:#FEF3C7;

color:#D97706;

}

.status-progress{

background:#DCFCE7;

color:#059669;

}

.status-resolved{

background:#D1FAE5;

color:#047857;

}

.header-buttons{

display:flex;

justify-content:flex-end;

gap:10px;

flex-wrap:wrap;

}

.header-buttons .btn{

border:1px solid rgba(255,255,255,.3);

color:#fff;

}

/*======================================
        DETAILS CARD
======================================*/

.details-card{

background:#fff;

border-radius:22px;

padding:30px;

box-shadow:0 15px 35px rgba(0,0,0,.06);

height:100%;

}

.details-card h4{

font-size:22px;

font-weight:700;

margin-bottom:25px;

color:#1F2A5A;

}

.details-table{

margin-bottom:30px;

}

.details-table td{

color:#64748B;

padding:15px 0;

width:45%;

}

.details-table th{

text-align:right;

font-weight:600;

padding:15px 0;

}

.priority{

font-weight:700;

}

.priority-low{

color:#16A34A;

}

.priority-medium{

color:#F59E0B;

}

.priority-high{

color:#DC2626;

}

.remarks-box{

background:#FFF4CC;

border-radius:15px;

padding:18px;

margin-bottom:18px;

}

.resolution-box{

background:#DDFCE8;

border-radius:15px;

padding:18px;

}

.remarks-title{

font-size:13px;

font-weight:700;

margin-bottom:10px;

color:#92400E;

}

.resolution-box .remarks-title{

color:#047857;

}

.remarks-box p,

.resolution-box p{

margin:0;

line-height:28px;

}

/*====================================
        TIMELINE
====================================*/

.timeline-card{

background:#fff;

padding:30px;

border-radius:22px;

box-shadow:0 15px 35px rgba(0,0,0,.06);

height:100%;

}

/*====================================
        TIMELINE
====================================*/

.timeline-item{

position:relative;

display:flex;

align-items:flex-start;

padding-bottom:40px;

}

.timeline-item:last-child{

padding-bottom:0;

}

/* Vertical Line */

.timeline-item::before{

content:"";

position:absolute;

left:18px;

top:38px;

bottom:-5px;

width:3px;

background:#D9E2F2;

z-index:0;

}

.timeline-item:last-child::before{

display:none;

}

/* Circle */

.timeline-icon{

width:38px;
height:38px;
min-width:38px;

border-radius:50%;

display:flex;
justify-content:center;
align-items:center;

margin-right:20px;

color:#fff;

position:relative;
z-index:2;

border:4px solid #fff;

box-shadow:0 0 0 3px rgba(91,91,246,.08);

opacity:1;

}

.timeline-icon.active{

opacity:1;

transform:scale(1.08);

box-shadow:0 10px 25px rgba(0,0,0,.18);

}

/* Content */

.timeline-content{

padding-top:2px;

}

.timeline-content h5{

font-size:18px;

font-weight:700;

margin-bottom:4px;

color:#1F2A5A;

}

.timeline-content small{

font-size:14px;

color:#64748B;

}
.timeline-content h5{

font-size:18px;

font-weight:700;

margin-bottom:5px;

color:#1F2A5A;

}

.timeline-content small{

color:#64748B;

font-size:14px;

}

.purple{
background:#6D28D9;
}

.blue{
background:#2563EB;
}

.cyan{
background:#0891B2;
}

.orange{
background:#EA580C;
}

.green{
background:#059669;
}

.red{
background:#DC2626;
}


.timeline-icon.pending{

    background:#ffffff;
    color:#b7c1d6;
    border:3px solid #d9e3f2;

}

.timeline-icon.pending i{

    color:#b7c1d6;

}

.timeline-icon.red{

    background:#ef4444;
    color:#fff;

}