header {
  background: #1a1f36; /* Dark blue */
  display: flex;
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
  justify-content: space-between;
}

header a {
  color: #ffffff; /* White text */
  border-radius: 1rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 1.5rem;
  text-decoration: none;
}

header a:hover {
  background-color: #2a2f48; /* Slightly lighter blue for hover */
}

header nav {
  align-self: center;
}

header ul {
  display: flex;
  float: right;
}

header li {
  display: inline;
}

body {
  background: #121826; /* Very dark blue */
  color: #ffffff; /* White text */
  font-family: 'Arial', sans-serif;
  line-height: 1.5;
  margin: 0;
  width: 100%;
  min-width: 400px;
}

/* Call-to-Action Section */
div.CallToAction {
  width: 70%;
  padding: 2rem 15%;
  text-align: left; /* Align content to the left */
}

/* Call-to-Action Buttons */
div.CallToAction nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* Adds spacing between buttons */
  justify-content: flex-start; /* Align buttons to the left */
  margin-top: 1rem; /* Add spacing between text and buttons */
}

div.CallToAction a {
  display: inline-block;
}

div.Transition {
  background: #1e253e; /* Medium dark blue */
  color: #ffffff;
  padding: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* Align cards to the left */
  gap: 2rem; /* Space between cards */
  width: 100%;
  box-sizing: border-box;
}

div.card {
  background-color: #2a2f48; /* Slightly lighter blue */
  color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  padding: 1rem;
  flex: 1 1 calc(100% - 2rem); /* Default to full width */
  max-width: 300px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0; /* Remove margin to align cards properly */
}

div.card img {
  max-width: 100%;
  border-radius: 0.5rem;
}

div.card-content {
  flex-grow: 1; /* Ensures the content takes up available space */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

div.card p {
  margin: 1rem 0;
}

.inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  box-sizing: border-box;
}

a.LinkedIn {
  text-align: center;
  color: #4a90e2; /* Light blue for LinkedIn link */
}

a.LinkedIn:hover {
  color: #72b4f2; /* Lighter blue on hover */
}

button {
  background-color: #4a90e2; /* Light blue */
  border: none;
  border-radius: 0.6rem;
  color: #ffffff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.8rem 1.2rem;
  text-align: center;
  text-decoration: none;
}

button.view {
  margin-top: auto; /* Push button to the bottom of the card */
}

button:hover,
button:focus {
  background-color: #72b4f2; /* Lighter blue for hover */
}

button:active {
  background-color: #3a78c2; /* Slightly darker blue for active */
}

footer {
  background: #1a1f36; /* Match header background */
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  width: 100%;
}