.tracking-page {
    padding-top: 140px;
    padding-bottom: 80px;
    background: #f8fafc;
    min-height: 70vh;
}

.tracking-header {
    text-align: center;
    margin-bottom: 40px;
}

    .tracking-header h1 {
        font-size: 48px;
        color: #0B1F3A;
    }

.tracking-search {
    max-width: 900px;
    margin: auto;
}

    .tracking-search form {
        display: flex;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(0,0,0,.08);
    }

    .tracking-search input {
        flex: 1;
        border: none;
        padding: 20px;
    }

    .tracking-search button {
        border: none;
        background: #129CE1;
        color: white;
        padding: 20px 35px;
    }
    .tracking-search button {
        min-width: 180px;
    }

.status-card {
    background: white;
    border-radius: 22px;
    padding: 30px;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

.status-badge {
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
}

.shipment-details {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.detail-card {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 8px 30px rgba(0,0,0,.05);
}

.location-card {
    margin-top: 25px;
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,.05);
}
.status-success {
    background: #DCFCE7;
    color: #166534;
}

.status-warning {
    background: #FEF3C7;
    color: #92400E;
}

.status-purple {
    background: #EDE9FE;
    color: #6D28D9;
}

.status-info {
    background: #DBEAFE;
    color: #1D4ED8;
}

.route-card {
    background: #fff;
    margin-top: 25px;
    padding: 30px;
    border-radius: 16px;
}

.route {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.route-line {
    flex: 1;
    height: 2px;
    background: #129CE1;
    margin: 0 20px;
}

.support-card {
    margin-top: 25px;
    background: #0B1F3A;
    color: white;
    padding: 30px;
    border-radius: 16px;
}

.btn-support {
    display: inline-block;
    margin-top: 15px;
    background: #129CE1;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
}

.status-success{
    background:#DCFCE7;
    color:#166534;
}

.status-warning{
    background:#FEF3C7;
    color:#92400E;
}

.status-purple{
    background:#EDE9FE;
    color:#6D28D9;
}

.status-info{
    background:#DBEAFE;
    color:#1D4ED8;
}

.status-card h2 {
    font-size: 40px;
    font-weight: 700;
}

.route-card{
    margin-top:25px;
    background:#fff;
    padding:30px;
    border-radius:16px;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
}

.route-card h3{
    margin-bottom:25px;
}

.route{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.route-item{
    text-align:center;
}

.route-item span{
    color:#64748B;
    font-size:14px;
}

.route-item h4{
    margin-top:10px;
    font-size:20px;
    color:#0B1F3A;
}

.route-line{
    flex:1;
    height:3px;
    background:#129CE1;
    margin:0 20px;
}

.support-card{
    margin-top:25px;
    background:#0B1F3A;
    color:white;
    padding:30px;
    border-radius:16px;
}

.support-card h3{
    margin-bottom:10px;
}

.support-card p{
    margin-bottom:20px;
}
    .support-card p {
        max-width: 500px;
    }

.btn-support{
    display:inline-block;
    background:#129CE1;
    color:white;
    text-decoration:none;
    padding:12px 24px;
    border-radius:8px;
}

@media(max-width:768px){

    .shipment-details{
        grid-template-columns:1fr;
    }

    .route{
        flex-direction:column;
        gap:20px;
    }

    .route-line{
        width:3px;
        height:40px;
        margin:0;
    }
}
.tracking-label {
    color: #64748B;
    font-size: 14px;
    text-transform: uppercase;
}

.tracking-info p {
    color: #64748B;
    margin-top: 5px;
}

.location-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.location-status {
    background: #129CE1;
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
}
.route-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    font-size: 24px;
}

.support-card {
    margin-top: 25px;
    padding: 25px 30px;
}
.section-title {
    margin: 30px 0 15px;
    color: #0B1F3A;
}

.detail-card {
    transition: .3s;
}

    .detail-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 35px rgba(0,0,0,.08);
    }

    .detail-card span {
        color: #64748B;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .detail-card h3 {
        color: #0B1F3A;
        font-size: 24px;
        margin-top: 8px;
    }

.location-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.location-status {
    background: #129CE1;
    color: #fff;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
}

.label {
    color: #64748B;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.timeline-card {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    margin-top: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

.timeline {
    margin-top: 30px;
}

.timeline-item {
    display: flex;
    gap: 20px;
    position: relative;
    padding-bottom: 30px;
}

    .timeline-item:last-child {
        padding-bottom: 0;
    }

.timeline-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #cbd5e1;
    margin-top: 5px;
}

.timeline-item.active .timeline-dot {
    background: #129CE1;
}

.timeline-content h4 {
    margin-bottom: 5px;
}

@media(max-width:768px) {

    .services-grid,
    .why-grid,
    .vehicle-grid,
    .stats-grid,
    .shipment-details {
        grid-template-columns: 1fr;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .counter-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hero h1 {
        font-size: 40px;
    }
}

.tracking-command-card {
    background: linear-gradient( rgba(7,26,53,.75), rgba(15,45,92,.75) ), url('/images/hcc-truck-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    padding: 50px;
    border-radius: 24px;
    margin-bottom: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,.2);
}
.tracking-command-card {
    min-height: 320px;
}

.tracking-label {
    color: #94a3b8;
    font-size: 13px;
    letter-spacing: 2px;
}

.tracking-number {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

    .tracking-number h2 {
        font-size: 52px;
        font-weight: 800;
        margin: 0;
    }

.copy-btn {
    border: none;
    background: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.shipment-status {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
}

.status-success {
    background: #22c55e;
}

.status-warning {
    background: #f59e0b;
}

.status-purple {
    background: #8b5cf6;
}

.status-info {
    background: #129CE1;
}

.current-location {
    margin-top: 30px;
}

    .current-location span {
        color: #cbd5e1;
    }

    .current-location h3 {
        font-size: 32px;
        margin-top: 8px;
    }

.last-updated {
    margin-top: 20px;
    color: #cbd5e1;
}

.tracking-info-cards {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 15px;
    margin: 25px 0;
}

.info-card {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 100px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

.info-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.purple {
    background: #f3e8ff;
    color: #8b5cf6;
}

.blue {
    background: #dbeafe;
    color: #2563eb;
}

.green {
    background: #dcfce7;
    color: #16a34a;
}

.info-content span {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 5px;
}

.info-content h3 {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    color: #071A35;
}

.info-content small {
    color: #94a3b8;
    font-size: 14px;
}

@media(max-width:768px) {

    .tracking-info-cards {
        grid-template-columns: 1fr;
    }
}

.info-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

    .info-icon i {
        font-size: 28px;
    }

.purple {
    background: #f3e8ff;
}

    .purple i {
        color: #8b5cf6;
    }

.blue {
    background: #e0ecff;
}

    .blue i {
        color: #2563eb;
    }

.green {
    background: #e6f8ee;
}

    .green i {
        color: #16a34a;
    }

@media(max-width:1200px) {
    .tracking-info-cards {
        grid-template-columns: repeat(3,1fr);
    }
}

@media(max-width:768px) {
    .tracking-info-cards {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:576px) {
    .tracking-info-cards {
        grid-template-columns: 1fr;
    }
}

.tracking-command-card {
    position: relative;
}

.tracking-command-card {
    position: relative;
}

.status-badge {
    position: absolute;
    top: 28px;
    right: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: linear-gradient( 90deg, #7c3aed, #9333ea );
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(124,58,237,.35);
}

    .status-badge i {
        font-size: 18px;
    }

.badge-purple {
    background: linear-gradient(90deg,#7c3aed,#9333ea);
}

.badge-success {
    background: linear-gradient(90deg,#16a34a,#22c55e);
}

.badge-warning {
    background: linear-gradient(90deg,#f59e0b,#fbbf24);
    color: #071A35;
}

.badge-info {
    background: linear-gradient(90deg,#0ea5e9,#2563eb);
}

.tracking-hero {
    text-align: center;
    padding: 40px 0 30px;
}

    .tracking-hero h1 {
        font-size: 58px;
        font-weight: 800;
        color: #fff;
        margin-bottom: 10px;
    }

    .tracking-hero p {
        color: #dbeafe;
        font-size: 20px;
        margin-bottom: 35px;
    }

.search-box {
    display: flex;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(37,99,235,.25), 0 10px 20px rgba(0,0,0,.15);
}

    .search-box i {
        padding: 0 20px;
        color: #94a3b8;
        font-size: 22px;
    }

    .search-box input {
        flex: 1;
        border: none;
        height: 72px;
        font-size: 20px;
        outline: none;
    }

    .search-box button {
        border: none;
        height: 72px;
        padding: 0 40px;
        background: linear-gradient( 135deg, #2563eb, #1d4ed8 );
        color: #fff;
        font-weight: 700;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

.tracking-features {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 25px;
}

    .tracking-features div {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #fff;
        font-size: 18px;
    }

    .tracking-features i {
        color: #0ea5e9;
        font-size: 22px;
    }

    .shipment-tracker{
    background:#fff;
    border-radius:24px;
    padding:40px;

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

    margin-top:30px;

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

.tracker-step{
    text-align:center;
    width:180px;
}

.tracker-icon{
    width:70px;
    height:70px;

    margin:auto;

    border-radius:50%;

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

    background:#e2e8f0;

    font-size:28px;

    color:#64748b;
}

.tracker-step.completed .tracker-icon{
    background:#10b981;
    color:#fff;
}

.tracker-step.active .tracker-icon{
    background:#129CE1;
    color:#fff;

    box-shadow:0 0 0 8px rgba(18,156,225,.15);
}

.tracker-line{
    flex:1;
    height:4px;
    background:#e5e7eb;
    margin:0 10px;
}

.tracker-line.active{
    background:#129CE1;
}

.tracker-step h4{
    margin-top:15px;
    color:#071A35;
}

.tracker-step p{
    color:#64748b;
    font-size:14px;
}

@media(max-width:991px) {

    .shipment-tracker {
        flex-direction: column;
        gap: 25px;
    }

    .tracker-line {
        width: 4px;
        height: 50px;
    }
}

.live-status-banner {
    background: linear-gradient( 135deg, #071A35, #0F2D5C );
    color: white;
    border-radius: 20px;
    padding: 25px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0;
}

.live-status-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pulse-dot {
    width: 14px;
    height: 14px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34,197,94,.7);
    }

    100% {
        box-shadow: 0 0 0 15px rgba(34,197,94,0);
    }
}

.status-pill {
    background: #129CE1;
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
}
.tracker-step.completed .tracker-icon {
    background: #10b981;
    color: #fff;
}

.tracker-step.completed h4 {
    color: #10b981;
    font-weight: 700;
}

.tracker-line.active {
    background: #10b981;
}

.tracker-line.active {
    background: #10b981;
}

.tracker-step.completed .tracker-icon {
    background: #10b981;
    color: #fff;
}

.blink .tracker-icon {
    animation: deliveredPulse 1.5s infinite;
}


@keyframes deliveredPulse {

    0% {
        box-shadow: 0 0 0 0 rgba(16,185,129,.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(16,185,129,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16,185,129,0);
    }
}