.auth_cont {
  padding: 40px;
  display: flex;
  /* justify-content: space-between; */
  height: 100vh;
  /* border: 1px solid red; */
  justify-content: center;
}
.auth_right {
  width: 35%;
  /* border: 1px solid green; */
  /* padding: 0; */
  padding-top: 36px;
  display: flex;
  flex-direction: column;
  height: auto;
  /* justify-content: center; */
}
.auth_right_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-bottom: 24px;
}
.auth_right_head img {
  margin-bottom: 24px;
}
.auth_right_head h2 {
  color: var(--Gray-900, #101828);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
}
.auth_right_head p {
  color: var(--Gray-500, #667085);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  width: 55%;
}
.auth_input {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 60%;
  margin: 0 auto;
}
.terms {
  width: 55%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
}
.remember_p {
  /* border: 1px solid red; */
  width: auto;
  margin-left: 0;
}
.terms p {
  color: var(--Gray-700, #344054);
  font-family: Outfit;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
.terms p span {
  color: var(--Brand-Azure-Blue-500, #1d72db);
  cursor: pointer;
}
.btn_cont {
  width: 60%;
  margin: 16px auto 32px;
}
.btm_text {
  display: flex;
  align-items: center;
  gap: 5px;
  /* border: 1px solid red; */
  justify-content: center;
}
.btm_text p {
  color: var(--Gray-500, #667085);
  text-align: center;
  font-family: Outfit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
#click_login,
#click_create {
  color: var(--Brand-Azure-Blue-500, #1d72db);
  font-family: Outfit;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}
.terms_cont {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 60%;
  margin: 0 auto;
  /* border: 1px solid blue; */
}
.forgot_p {
  color: var(--Brand-Azure-Blue-500, #1d72db);
  font-family: Outfit;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
  /* border: 1px solid red; */
  width: auto;
}
.otp-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 18px;
}

.otp-input {
  width: 52px;
  height: 64px;
  border-radius: 16px;
  border: 1px solid #d0d5dd;
  background: white;
  color: var(--Gray-300, #d0d5dd);
  text-align: center;
  font-family: Outfit;
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
  line-height: 60px; /* 125% */
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  letter-spacing: -0.96px;
  transition: box-shadow 0.12s, border-color 0.12s, transform 0.08s;
}
.otp-input:focus {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(29, 114, 219, 0.12);
  transform: translateY(-2px);
}
.otp_code{
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid red; */
    width: 60%;
    margin: 0 auto;
}
.otp_code p {
  color: var(--Gray-500, #667085);
  text-align: center;
  font-family: Outfit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.otp_code p span {
  color: var(--Brand-Azure-Blue-500, #1d72db);
  font-family: Outfit;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; 
  margin-left: 8px;
  cursor: pointer;
}
.btn_container{
    width: 60%;
    margin: 32px auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 900px) {
  .auth_cont {
    flex-direction: column;
    padding: 0;
    /* min-height: 100%; */
    /* border: 2px solid purple; */
    /* justify-content: start; */
  }
  .auth_left {
    /* border: 2px solid red; */
    border-radius: 0 0 24px 24px;
    background: linear-gradient(
      45deg,
      #1d72db 0%,
      #1e73da 8.47%,
      #1f76d9 15.58%,
      #2079d7 21.58%,
      #237ed5 26.74%,
      #2584d2 31.3%,
      #298ccf 35.52%,
      #2c94cb 39.65%,
      #309dc7 43.94%,
      #35a7c2 48.66%,
      #3ab1bd 54.05%,
      #3fbcb7 60.37%,
      #44c8b2 67.87%,
      #4ad5ac 76.8%,
      #50e2a5 87.43%,
      #56ef9f 100%
    );
    width: 100%;
    height: 37%;
    overflow: hidden;
  }

  .auth_left img {
    right: 15%;
    top: 15%;
    width: 70%;
    height: 90%;
  }
  .auth_right {
    /* border: 2px solid green; */
    width: 100%;
    height: 63%;
    padding: 24px;
    padding-top: 20px;
    display: block;
    /* z-index: 2; */
    overflow: auto;
  }
  .auth_right_head p,
  .auth_input,
  .btn_cont,
  .terms,
  .terms_cont {
    width: 100%;
  }
  .remember_p {
    width: 50%;
  }
  .otp-row {
    gap: 8px;
  }
  .btn_container{
    width: 100%;
  }
  .otp_code{
    width: 100%;
  }
  .otp-input{
    width: 48px;
  }
}