/* Navbar custom styles */
.nav-link {
  color: #e0e0e0 !important;
  transition: 0.3s ease;
}

.nav-link:hover {
  color: #00ffcc !important;
  text-shadow: 0 0 5px #00ffcc, 0 0 10px #00ffcc;
}

.navbar-toggler {
  border-color: #00ffcc;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,255,204, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.hero {
  background: linear-gradient(270deg, #0f2027, #203a43, #2c5364);
  background-size: 600% 600%;
  animation: gradientShift 15s ease infinite;
  color: white;
  padding: 100px 20px;
  text-align: center;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Put in style.css or your <style> block */
:root { --card-max: 1100px; } /* pick your favorite width: 960–1200px works well */

#projects .card,
#jobs .card {
  max-width: var(--card-max);
  margin-left: auto;
  margin-right: auto;
}

.research-image {
  width: 75%;
}

@media (min-width: 992px) {
  .research-image {
    width: 55%;
  }
}