body {
  min-height: 100vh;
  background: linear-gradient(135deg,#0366d6 0%,#67cef7 100%);
  font-family: 'Segoe UI', Arial, sans-serif;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('images/hatter.jpg') center center / cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.navbar, .navbar-nav .nav-link {
  border-radius: 0 !important;
}
.btn-main {
  padding: 0.6rem 2.2rem;
  border-radius: 1.7rem;
  background: #ffcb05;
  color: #073263;
  font-weight: bold;
  transition: background 0.2s;
}
.btn-main:hover {
  background: #ffe170;
  color: #013163;
}
.calendar-main {
  min-height: 70vh;
}
.calendar-header h2 {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  text-shadow: 0 2px 16px #0003;
}
.calendar-filters {
  background: rgba(255,255,255,0.11);
  border-radius: 0.7rem;
  padding: 1rem 0;
  color: #073263;
  margin-bottom: 2rem;
}
#calendar .calendar-card {
  background: rgba(255,255,255,0.90);
  border-radius: 1rem;
  box-shadow: 0 4px 24px #0366d633;
  padding: 1.2rem 1.2rem 0.6rem 1.2rem;
  color: #073263;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.14s;
}
#calendar .calendar-card:hover {
  box-shadow: 0 8px 32px #0366d666;
}
.calendar-card-date {
  font-size: 1.45rem;
  color: #0366d6;
  font-weight: bold;
}
.calendar-card-title {
  font-size: 1.13rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.calendar-card-meta {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.calendar-card-icon {
  font-size: 2.2rem;
  color: #ffcb05;
  margin-bottom: 0.5rem;
}

.badge.bg-primary {
  background: #0366d6 !important;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 1.2rem;
  padding: 0.4em 1em 0.35em 1em;
}


@media (max-width: 576px) {
  .calendar-header h2 { font-size: 1.3rem; }
  .calendar-card-date { font-size: 1.1rem; }
  .calendar-card-title { font-size: 1rem; }
}