#bg-sign-in {
  background-image: url("https://images.unsplash.com/photo-1524222717473-730000096953?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80%22");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-content: center;
  display: flex;
  position: fixed;
  right: 100%;
  transition: 1.5s right;
}

#sign-in-content {
  width: 65%;
  height: 540px;
  background-color: rgb(75, 91, 62);
  margin-top: 5%;
  margin-bottom: 10%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 40px;
}

.sign-in-element {
  margin-left: 20px; /* Added margin to align the content */
}

.fa.fa-google {
  background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.forgotps {
  text-decoration: none;
  color: #bfd5b6;
  font-size: medium;
  margin: 10px 0;
}

.forgotps:hover {
  color: white;
}

.changeCursor {
  border: unset;
  background-color: unset;
  text-decoration: underline; /* Fixed hover effects */
  color: white;
  text-decoration: none;
}

.changeCursor:hover {
  cursor: pointer;
  text-decoration: underline;
}

.loginBtn:hover {
  background-color: #aac7a3 !important;
}

.sign-in-loco {
  width: 30%;
  margin-top: 10%;
  margin-bottom: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#sign-in-line {
  border-left: 6px solid rgb(200, 223, 191);
  height: 350px;
  margin-left: 1%;
  margin-right: 2%;
}

.loginBtn {
  width: 100%; /* Fixed width of btn */
}

.Text-below-btn {
  margin-top: 10px; /* Added margin to align the text */
}

.sign-in-element {
  width: 37%;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.signIn-Up-desc {
  color: rgb(200, 223, 191);
}

.fIn {
  animation: fadeIn 3s;
}

.fOut {
  animation: fadeIn 3s;
}

.divider:after,
.divider:before {
  content: "";
  flex: 1;
  height: 1px;
  background: #eee;
}

#bg-sign-in.animationSignIn {
  right: 0%;
}

#bg-sign-in.animationOffSignIn {
  right: 100%;
}

.closeBtn {
  position: relative;
  padding: 0.5rem 1rem;
  right: 0rem;
  margin-top: 2.5rem;
  margin-bottom: auto;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@media (max-width: 1600px) {}

@media (max-width: 1500px) {}

@media (max-width: 1400px) {}

@media (max-width: 1330px) {
  #sign-in-content {
    width: 70%;
  }
}

@media (max-width: 1180px) {
  #sign-in-content {
    width: 70%;
    margin-top: 10%;
  }
}

@media (max-width: 980px) {
  #sign-in-content {
    width: 80%;
    margin-top: 7%;
  }
}

@media (max-width: 915px) {
  #sign-in-content {
    width: 100%;
    margin: 0%;
  }

  .sign-in-element,
  .sign-in-loco {
    width: 40%;
  }

  .closeBtn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    margin-top: 0;
  }
}

@media (max-width: 705px) {
  #sign-in-content {
    width: 100%;
    margin: 0%;
  }

  .sign-in-element {
    width: 50%;
    margin-left: 5%;
    margin-right: 5%;
  }
}

@media (max-width: 680px) {

  .sign-in-loco,
  #sign-in-line {
    display: none;
    margin-bottom: 5%;
  }
}

@media (max-width: 570px) {

  .sign-in-loco,
  #sign-in-line {
    display: none;
    margin-bottom: 5%;
  }

  .sign-in-element {
    width: 65%;
    margin-left: 5%;
    margin-right: 5%;
  }
}

@media (max-width: 280px) {

  .sign-in-loco,
  #sign-in-line {
    display: none;
    margin-bottom: 5%;
  }

  .sign-in-element {
    width: 77%;
    margin-left: 5%;
    margin-right: 5%;
  }
}