:root {
  --primary-color: #3067a2;
  --primary-color-light: #4273a7;
  --secondary-color: #dee1e2;
  --black-color: #000000;
}

/* ------------------- Footer ------------------- */
.footer {
  background-color: #222;
  color: #fff;
  border-top: 3px solid var(--primary-color);
  padding: 40px 20px;
  text-align: center;
}

.footer a:hover {
  color: var(--primary-color) !important;
  text-decoration: underline !important;
}

/* Social media iconen */
.footer i {
  transition: transform 0.3s ease-in-out;
}

.footer i:hover {
  transform: scale(1.2);
}

.footer img {
  background: rgba(255, 255, 255, 0.07);
  height: 70px;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}


/* Responsive styling */
@media (max-width: 768px) {
  .footer .row {
      flex-direction: column;
      text-align: center;
  }

  .footer .col-md-4 {
      margin-bottom: 20px;
  }

  .footer i {
      font-size: 1.5rem; /* Kleinere iconen op mobiel */
      margin: 5px;
  }
}