.login-container {
    display: flex;
    height: 100%;
  }
  
  .left-container, .right-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .image-container {
    position: relative;
    background-image: url('https://app.portpro.io/assets/images/background/LoginScreen.png');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh; /* Full height of the viewport */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
  }
  
  .logo-container {
    position: absolute;
    top: 2rem; /* or whatever value suits your design */
    left: 50%;
    transform: translateX(-50%);
    /* If your SVG is not appearing, ensure its dimensions are set inside the SVG code itself, or set them here */
  }

.logo-container img,
.logo-container svg {
  width: 350px; /* or any size you prefer */
  height: auto;
  /* Additional styling */
}

  .form-container {
    max-width: 400px;
    width: 100%;
    padding: 20px;
    text-align: center;
  }
  
  input[type="email"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  
  a {
    color: #007bff;
    text-decoration: none;
  }
  
  hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #eee;
  }
  
  @media (max-width: 768px) {
    .login-container {
      flex-direction: column;
    }
    .image-container {
      height: 50%;
      order: 2;
    }
    .right-container {
      height: 50%;
      order: 1;
    }
  }