/* Official & Helpful Links pills (pastel + clean) */
.official-links { margin: 18px auto 8px; max-width: 1100px; padding: 0 18px; }
.official-links .row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.official-links h2 { margin: 0; font-size: 18px; }
.official-links .hint { margin: 0; font-size: 12px; opacity: .65; }

.official-grid{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px){ .official-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px){ .official-grid{ grid-template-columns: 1fr; } }

.official-grid a{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 700;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
  color: #0f172a;
  background: #fff;
}
.official-grid a:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 35px rgba(0,0,0,.10);
}

/* Pastel backgrounds like your screenshot */
.official-grid a.box-pnr{  background: #fff3df; border-color:#f7d7a7; }
.official-grid a.box-seat{ background: #e9fbf0; border-color:#b8f0cd; }
.official-grid a.box-ntes{ background: #f2eaff; border-color:#d7c2ff; }
.official-grid a.box-irctc{ background:#eaf2ff; border-color:#c6dbff; }