:root {
  --background: #050c2d;

  --forground-dark-pri: #252c32;
  --forground-dark-sec: #84818a;
  --forground-dark-third: #6b7280;

  --forground-white-pri: #ffffff;

  --accent-color: #1f305e;

  --border-color: #dfe0e4;

  --font-poppins: "Poppins", sans-serif;
  --base-transition: all 0.3s ease-in-out;
}

body {
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden !important;
  font-family: "Poppins", sans-serif;
}

p {
  font-size: 14px;
}

.background {
  background-color: var(--background);
  min-height: 100vh;
  padding: 16px;
}

/* authentication section start */
.auth-section {
  color: var(--forground-dark-pri);
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 50px;
}

.auth-section .card {
  border-radius: 10px;
  padding: 20px;
  background: var(--forground-white-pri);
}

.auth-section .card > * + * {
  margin-top: 20px;
}

.auth-section .com {
  width: 100%;
}

.auth-section .card h2 {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 132%; /* 52.8px */
  letter-spacing: -0.4px;
}

.auth-form {
  margin-top: 13px;
}

.auth-form > * + * {
  margin-top: 25px;
}

.auth-form button[type="submit"] {
  margin: 0;
}

.auth-form .row {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.auth-form.sign-up button[type="submit"] {
  width: 100%;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
  width: 100%;
}

.auth-form .auth-form-footer {
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: space-between;
}

.auth-form-footer .forget-password {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 164%;
  color: var(--forground-dark-third);
}

.auth-section .info {
  color: var(--forground-white-pri);
}

.auth-section .info > * + * {
  margin-top: 1.5rem; /* 16px */
}

.auth-section .info h1 {
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 132%; /* 63.36px */
  letter-spacing: -0.48px;
}

.auth-section .info p {
  font-size: 14px;
  font-style: normal;
  max-width: 400px;
  font-weight: 200;
  line-height: 164%; /* 22.96px */
  /* opacity: 0.6; */
}

.auth-section .info .stat {
  display: flex;
  align-items: center;
  gap: 5px;
}

.auth-section .info .stat .profiles {
  display: flex;
}

.auth-section .info .stat .profiles div {
  --img-size: 32px;
  --left-size: -5px;

  width: var(--img-size);
  height: var(--img-size);
  border: 2px solid var(--forground-white-pri);
  overflow: hidden;
  border-radius: var(--img-size);
}

.auth-section .info .stat .profiles div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-section .info .stat .profiles div:nth-child(2) {
  transform: translateX(var(--left-size));
}

.auth-section .info .stat .profiles div:nth-child(3) {
  transform: translateX(calc(var(--left-size) * 2));
}

.auth-section .info .stat p {
  font-weight: 400;
}

.social-auth {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.social-auth button {
  width: 100%;
}

.auth-section .terms-text {
  color: var(--forground-dark-sec);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 164%; /* 19.68px */
}

.auth-section .terms-text a {
  color: var(--accent-color);
  font-weight: 500;
}

.auth-section .checkbox {
  margin-top: 24px;
}
/* authentication style end */