:root {
  --primary: #624C6F;
  --secondary: #378FEB;
  --text: #303030;
  --light: #f6f6f6;
}

body {
  font: 400 16px 'Lato', sans-serif;
  line-height: 1.6;
  color: var(--text);
}

.navbar {
  background-color: var(--secondary);
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 2px;
}

.navbar-brand svg {
  max-width: 32px;
  height: auto;
}

.navbar-nav .nav-link {
  color: white !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link {
  background-color: var(--primary) !important;
}

.card {
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

.hero-section {
  background-position: center;
  background-size: cover;
  min-height: 400px;
}

@media (max-width: 768px) {
  h1.display-4 {
    font-size: 2rem;
  }
}