header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #3C5070;
  padding: 0 20px;
  height: 80px;
}

.logo img {
  height: 40px; /* Adjust logo height */
}

/* Wrapper for auth buttons (login, register, or logout) */
header .auth-buttons {
    display: flex;
    gap: 15px; /* Add spacing between login and register */
}

header .auth-buttons a {
    text-decoration: none;
    display: flex;
    align-items: center;
}

header .auth-buttons p{
    text-align: center;
    color:white;
    margin: 0; /* Remove default paragraph margin */
    margin-right: 3px;
}

header .login-icon,
header .register-icon {
    height: 30px; /* Adjust icon size */
    width: 30px;
    cursor: pointer;
}

header .login-icon:hover,
header .register-icon:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}

header .auth-buttons a:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}

header .logout a img:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}

/* Align logout icon separately */
header .logout {
    margin-left: 15px; /* Spacing for the logout icon */
}