/* Center the contact block */
#contact .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Add any custom CSS here */
#hero .container {
  /* Add a black overlay with 50% opacity */
  background-color: rgba(0, 0, 0, 0.5); 
  padding: 2rem; /* Add some padding for better readability */
  border-radius: 0.5rem; /* Add a slight border-radius for a softer look */
}

/* Logo styling */
.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  height: 40px;
  margin-right: 1rem;
}

/* Custom color variables */
:root {
  --primary-blue: #2b4c8a;
  --secondary-red: #e63946;
  --light-bg: #f1faee;
  --dark-text: #333333;
}