@import url("/assets/css/auth/index.css");

.logo {
  margin: 0px;
}

.section-2 {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.signin {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-1 {
  background-image: url("https://res.nilgai.cloud/imgs/authentication.svg") !important;
}

.signup-frame-pass-details p:last-child {
  color: var(--color-white-opacity);
  cursor: pointer;
}

.signin-frame-signup {
  color: var(--color-white-opacity);
  font-size: 14px;
}

.signin-frame-signup a {
  color: var(--color-white);
  padding: 2.5px 5px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
  border: 1.5px solid var(--color-white-opacity);
  border-radius: var(--border-radius);
  cursor: pointer;
  margin-left: 10px;
  font-weight: var(--thick-font-weight);
  transition: all var(--short-anim-secs);
}

.signin-frame-signup a:hover {
  border-color: var(--color-white);
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
  .signin {
    max-width: 100%;
  }

  .signin-frame-signup {
    margin-top: 15px;
    text-align: center;
  }
}

@media screen and (max-width: 480px) {
  .signin {
    padding: 0 10px;
  }

  .signin-frame-signup {
    font-size: 12px;
    flex-direction: column;
    gap: 8px;
  }

  .signin-frame-signup a {
    margin-left: 0;
    font-size: 11px;
    padding: 2px 8px;
  }
}

/* Landscape mode */
@media screen and (max-width: 896px) and (orientation: landscape) {
  .signin {
    max-width: 350px;
  }
}