/* Fleet */
.fleet-section { padding: 40px 0; }
.fleet-title { text-align:center; margin-bottom: 12px; }
.fleet-carousel { position: relative; overflow: hidden; padding: 20px 0; }
.fleet-track {
  --gap: 20px;
  display: flex;
  gap: var(--gap);
  will-change: transform;
  transition: transform 0.6s ease;
}
.fleet-section {
  text-align: center;
  padding: 40px 20px;
}

.fleet-section .fleet-title {
  font-size: 2rem;
  margin-bottom: 10px;
}

.fleet-section p {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto 30px; /* centers and gives space below */
}

/* Cards */
.fleet-card {
  flex: 0 0 320px;           /* card width */
  background: #fff;
  color: #111;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  transform: perspective(900px) rotateY(-10deg);
  opacity: .6;
  transition: transform .6s ease, opacity .6s ease, box-shadow .6s ease;
}
.fleet-card img { width: 100%; height: 190px; object-fit: cover; display:block; }
.fleet-info { padding: 14px 16px 18px; }
.fleet-card .badge {
  position: absolute; top: 10px; left: 10px;
  background: linear-gradient(90deg,#F28C28,#7B1E1E);
  color:#fff; padding:4px 10px; border-radius: 8px; font-size:.8rem;
}

/* Active (center) card straight + pop */
.fleet-card.active {
  transform: perspective(900px) rotateY(0deg) scale(1.05);
  opacity: 1;
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
}
.animated-text {
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}
.fleet-card.active .animated-text { opacity: 1; transform: translateY(0); }

/* Entering/exiting cards slanted */
.fleet-card.exit-left  { transform: perspective(900px) rotateY(12deg)  scale(.98); }
.fleet-card.exit-right { transform: perspective(900px) rotateY(-12deg) scale(.98); }

/* Dark mode */
body.dark .fleet-card { background:#111; color:#fff; box-shadow: 0 8px 18px rgba(0,0,0,.45); }
body.dark .fleet-info p { color:#e7e7e7; }

/* Responsive tweak */
@media (max-width: 600px) { .fleet-card { flex-basis: 260px; } }
