body, html {
  height: 100%;
  margin: 0;
  padding: 0 20px; /* padding on the sides */
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333; /* dark grey color for text */
}

.container {
  text-align: center;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row; /* default orientation */
}

.logo {
  width: 200px; /* Logo width updated to 200px */
  /* margin-right: 20px; */
}

.bar {
  height: 100px; /* Adjust height as necessary */
  width: 1px;
  background-color: #333; /* dark grey color */
  margin-right: 20px;
}

.contact-info {
  margin-top: 20px;
}

.contact-info a {
  color: #333; /* dark grey color for links */
  text-decoration: none; /* removes underline from links */
}

.contact-info a:hover {
  text-decoration: underline; /* adds underline on hover for links */
}

/* Media query for mobile devices */
@media (max-width: 600px) {
  .header {
    flex-direction: column; /* stack logo and h1 vertically */
  }

  .logo {
    margin-bottom: 20px; /* margin below logo */
    margin-right: 0; /* remove margin to the right of the logo */
  }

  .bar {
    display: none; /* hide the bar on mobile devices */
  }

  /* Add padding to the container instead of body to maintain center alignment */
  .container {
    padding: 0 20px;
  }

  body, html {
    padding: 0; /* Remove padding from the body on mobile */
  }
}