.dasboard-login {
  background-color: #2148c0;
  width: 100%;
  min-width: auto; /* Remove fixed min-width */
  height: 100vh; /* Use viewport height */
  min-height: 720px; /* Maintain minimum height */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dasboard-login .BG {
  position: absolute;
  top: 0;
  left: 0;
  width: 35%; /* Relative width */
  max-width: 502px; /* Maintain max width from original */
  height: 100%;
  object-fit: cover;
}

/* Center container for login elements */
.dasboard-login .login-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dasboard-login .username,
.dasboard-login .password,
.dasboard-login .login-btn {
  position: relative; /* Change from absolute */
  top: auto;
  left: auto;
  width: 100%;
  max-width: 302px;
  height: 45px;
  margin: 0 auto 15px auto; /* Center and add spacing */
}

/* Adjust positioning for logo/illustration */
.dasboard-login .png-transparent {
  position: relative;
  top: auto;
  left: auto;
  width: 221px;
  height: auto;
  margin: 0 auto 40px auto;
  aspect-ratio: 1.1;
}

.dasboard-login .g {
  position: relative;
  width: 241px;
  height: 271px;
  margin: 0 auto 20px auto;
  left: auto;
  top: auto;
}

/* Keep absolute positioning only for complex SVG elements */
.dasboard-login .layer {
  position: relative;
  height: 100%;
}

/* Links styling */
.dasboard-login .text-wrapper-2,
.dasboard-login .text-wrapper-3 {
  position: relative;
  top: auto;
  left: auto;
  display: inline-block;
  margin: 20px 10px 0;
}

.dasboard-login .links-container {
  text-align: center;
  margin-top: 20px;
}

/* Responsive adjustments for different screen sizes */
@media screen and (max-width: 1440px) {
  .dasboard-login .login-container {
    padding: 0 20px;
  }
}

@media screen and (max-width: 1024px) {
  .dasboard-login .BG {
    width: 30%;
  }
  
  .dasboard-login .g {
    width: 200px;
    height: 225px;
  }
  
  .dasboard-login .png-transparent {
    width: 180px;
  }
}

@media screen and (max-width: 768px) {
  .dasboard-login {
    min-height: 100vh;
  }
  
  .dasboard-login .BG {
    width: 100%;
    opacity: 0.3; /* Make background subtle on mobile */
  }
  
  .dasboard-login .g,
  .dasboard-login .png-transparent {
    width: 160px;
    height: auto;
  }
}

/* Keep existing styles for inner elements but make them relative */
.dasboard-login .rectangle {
  width: 100%;
  border: 1px solid #ffffff;
}

.dasboard-login .div {
  width: 100%;
}

.dasboard-login .login {
  left: 50%;
  transform: translateX(-50%);
}

/* Ensure SVG elements scale properly */
.dasboard-login .vector,
.dasboard-login .img,
.dasboard-login .vector-2,
.dasboard-login .vector-3 {
  width: auto;
  height: auto;
  max-width: 100%;
}