:root {
  --primary-blue: #2563eb;       /* Deep modern blue - main color */
  --dark-blue: #14144C;          /* Darker blue */
  --light-blue: #575757;         /* Light sky blue */
  --cream-bg: #f8fafc;           /* Clean light gray-blue bg */
}

body { 
  margin: 2px; 
  font-family: 'Segoe UI', sans-serif; 
  background: linear-gradient(to bottom right, #eff6ff, #dbeafe, #bfdbfe); /* Fresh blue gradient */
  color: #1e293b; 
  padding: 15px;
  padding-bottom:5px; 
}

header { 
  text-align: center; 
  margin-bottom: 20px; 
}

header h1 { 
  color: var(--primary-blue); /* Deep blue */
  font-size: 2.5rem; 
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); 
  margin-top:-15px; 
}

.scroll-btn { 
  position: fixed;
  right: 15px;
  width: 45px; 
  height: 45px; 
  border-radius: 50%;
  border: 1px solid var(--primary-blue);
  background: rgba(248, 250, 252, 0.9); /* Light bg with transparency */
  color: var(--dark-blue);
  font-size: 20px; 
  backdrop-filter: blur(4px); 
  transition: 0.3s; 
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3); /* Blue shadow */
}

.scroll-btn:hover { 
  background: rgba(248, 250, 252, 1); 
  transform: scale(1.1); 
}

#up { bottom: 70px; }
#down { bottom: 15px; }

.nav a { 
  background-color: var(--primary-blue); /* Deep blue */
  color: #fff; 
  text-decoration: none; 
  padding:8px 20px; 
  border-radius: 10px; 
  font-weight: bold; 
  display: inline-block; 
  margin-top:-15px; 
}

.schedule { 
  max-width: 1000px; 
  margin: auto; 
  display: flex; 
  flex-direction: column; 
  gap: 05px; 
}

.bus-card { 
  background: #fff; 
  border-left: 6px solid var(--primary-blue); /* Deep blue accent */
  border-radius: 8px; 
  padding: 16px; 
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15); /* Blue shadow */
  transform: scale(0.95); 
  transform-origin: top; 
}

.bus-number { 
  font-size: 1.1rem; 
  font-weight: bold; 
  color: var(--dark-blue); /* Dark blue */
}

.bus-origin { 
  font-weight: bold; 
  color: var(--primary-blue); /* Deep blue */
}


.bus-time { 
  font-weight: bold; 
  color: var(--primary-blue); /* Deep blue */
}

.bus-via { 
  font-style: italic; 
  color: var(--light-blue); /* Sky blue */
  margin-left: 5px; 
}

.driver-info { 
  margin-top: 5px; 
  font-size: 1rem; 
}

.driver-name { 
  font-weight: bold; 
  color: var(--primary-blue); /* Deep blue */
}

.driver-number { 
  font-weight: bold; 
  color: var(--light-blue); /* Deep blue */
}

/* MOBILE VIEW */
@media (max-width: 600px) {
  body {
    padding: 10px;
  }

  header h1 {
    font-size: 1.7rem;
    margin-top: -5px;
  }

  .nav a {
    padding: 6px 14px;
    font-size: 0.9rem;
  }

  .schedule {
    gap: 12px;
  }

  .bus-card {
    padding: 14px;
    transform: scale(1);
  }

  .bus-number {
    font-size: 1rem;
  }

  .bus-origin {
    font-size: 1rem;
  }

  .bus-time {
    font-size: 1rem;
  }

  .bus-via {
    font-size: 0.9rem;
  }

  .driver-info {
    font-size: 0.9rem;
  }

  .scroll-btn {
    width: 38px;
    height: 38px;
    font-size: 16px;
    right: 10px;
  }

  #up { bottom: 65px; }
  #down { bottom: 12px; }
}