body {
      margin: 0;
      min-height: 100vh;   /* full height */
      display: flex;
      flex-direction: column;
    font-family: 'Exo 2';
    }
main {
      flex: 1; /* takes remaining space */
    }
/* ---------------- HEADER ---------------- */
    .header-container {
      background: #fff;
      padding: 8px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .header-logo img {
      height: 40px;
    }
    .header-right {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    .contact {
      font-size: 14px;
      color: #333;
    }
    .lang-switch {
      display: inline-flex;
      border: 1px solid #ccc;
      border-radius: 25px;
      overflow: hidden;
      font-size: 14px;
      background: #fff;
    }
    .lang-switch span {
      padding: 5px 15px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .lang-switch .active {
      background-color: #dc3545;
      color: #fff;
    }

    /* ---------------- CARGO DETAILS ---------------- */
    .cargo-card {
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
      font-family: Arial, sans-serif;
      font-size: 14px;
    }
    .cargo-header,
    .cargo-list-header {
      background: #f1f1f1;
      padding: 10px 15px;
      font-weight: bold;
      border-bottom: 1px solid #ddd;
    }
    .cargo-body {
      padding: 10px 15px;
    }
    .cargo-body p {
      margin: 4px 0;
    }
    .cargo-body p span {
      font-weight: bold;
    }
    .cargo-list-item {
      display: flex;
      justify-content: space-between;
      padding: 10px 15px;
      border-top: 1px solid #ddd;
    }
    .cargo-list-item a {
      color: red;
      text-decoration: none;
      font-weight: bold;
    }
    .cargo-list-item a:hover {
      text-decoration: underline;
    }

    /* ---------------- TIMELINE ---------------- */
    .timeline {
      position: relative;
      margin: 20px 0;
      padding-left: 40px;
    }
    /* Grey line */
    .timeline::before {
      content: '';
      position: absolute;
      left: 20px;
      top: 0;
      width: 4px;
      height: 100%;
      background: #ddd;
      border-radius: 2px;
    }
    /* Red animated progress line */
    .timeline::after {
      content: '';
      position: absolute;
      left: 20px;
      top: 0;
      width: 4px;
      height: 0;
      background: #dc3545;
      border-radius: 2px;
      animation: growLine 2s ease forwards;
    }
    @keyframes growLine {
      from { height: 0; }
      to   { height: var(--progress-height, 0); }
    }
    /* Timeline items */
    .timeline-item {
      position: relative;
      margin-bottom: 30px;
    }
    .timeline-item::before {
      content: '';
      position: absolute;
      left: -27px;
      top: 0;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid #ddd;
      background: #fff;
      z-index: 1;
    }
    .timeline-item.completed::before {
      background: #dc3545;
      border-color: #dc3545;
    }
    .timeline-content {
      padding-left: 15px;
    }
      .text1{font-size: 22px;font-weight: 600;}
    /* ---------------- BADGES ---------------- */
    .status-badge {
      padding: 10px;
      border-radius: 9px;
      background: linear-gradient(90deg, rgba(46, 125, 50, 0.8) 0%, rgba(2, 136, 209, 0.8) 100%);
    }
      .track-box {
  background: linear-gradient(90deg, #B8C3C9 0%, #FFFFFF 100%);}
 /* Footer */
    footer {
      background: #fff;
      border-top: 1px solid #ddd;
      margin-top: 50px;
    }
    footer a {
      color: #333;
      text-decoration: none;
      font-size: 14px;
    }
    footer a:hover {
      text-decoration: underline;
    }
#myDiv {
      display: none; /* hide initially */
}