body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #fff2e0;
}

.navbar a .bi:hover {
  color: #ffc107; /* or your brand color */
  transition: color 0.3s ease;
}

.hero {
  height: calc(100vh - 56px);
  background: linear-gradient(to bottom right, #1b1f3b, #2d2a52);
  color: white;
}

.mascot-img {
  max-width: 200px;
  height: auto;
}

.contact {
  background-color: #2d2a52;
}

/* ---------------------------------- */
/* 🌀 Transition Utility Classes      */
/* ---------------------------------- */

/* Smooth transition for all card animations */
.transition {
  transition: all 0.3s ease;
}

/* Lift the card up on hover */

/*
.card.transition:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1);
}
*/

.card.transition:hover {
  transform: translateY(-6px);
  box-shadow: 0 1.5rem 2rem rgba(0, 123, 255, 0.2), 0 0 0.5rem rgba(0, 123, 255, 0.2);
}


/* Slight scale effect when active (clicked) */
.card.transition:active {
  transform: scale(0.98);
}

/* Custom Card Colors */

.border-custom-orange {
  border-top: 4px solid #fea31e !important;
}

.border-custom-purple {
  border-top: 4px solid #5e53bb !important;
}

/*Contact form inputs*/

form .form-control:focus {
  border-color: #6f42c1;
  box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
}