:root {
  --primary-color: #424bf5;
  --secondary-color: #fff0f0;
}

body {
  background: #f9f9f9;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.colorpp {
    color:#424bf5;
}

.navbar {
  background-color: var(--primary-color);
}

.navbar .nav-link,
.navbar-brand {
  color: white !important;
  font-weight: 500;
}

.navbar .nav-link:hover {
  color: #ffcfcf !important;
}

.footer {
  background-color: var(--primary-color);
  color: white;
  padding: 40px 0;
}

.footer a {
  color: #fff;
  text-decoration: none;
}

.footer a:hover {
  color: #ffeaea;
  text-decoration: underline;
}

.footer .logo-text {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.tracking-container {
  max-width: 950px;
  margin: auto;
  padding: 30px;
  background-color: white;
}

#map {
  height: 300px;
  border-radius: 8px;
}

.timeline {
  border-left: 3px solid var(--primary-color);
  margin-left: 20px;
  padding-left: 20px;
}

.timeline-item::before {
  font-family: "bootstrap-icons";
  position: absolute;
  left: -28px;
  font-size: 1.2rem;
}

.timeline-item.origin::before {
  content: "\f30c";
  color: var(--primary-color);
}

.timeline-item.transit::before {
  content: "\f3b2";
  color: orange;
}

.timeline-item.delivered::before {
  content: "\f26a";
  color: green;
}

.progress-bar {
  background-color: var(--primary-color);
}

.countdown {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--primary-color);
}

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}