@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
}

html {
  font-size: 62.5%;
  font-family: 'Inter', sans-serif;
  background-image: linear-gradient(to left, #abf0d1, #b2f4f4, #cff5ff, #edf7ff, #fdfdfd);
}

body {
  font-size: 1.6rem;
}

:root {
  --primary: #5429FF;
  --secondary: #e5fce7;
  --text-dark: #344054;
  --text-light: #667085;
}

.container {
  max-width: 144rem;
  margin: 1rem auto;
  padding: 0rem 15rem;
}


.signin-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
  gap: 3rem;
  align-items: center;
}

.signin-form {
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.title {
    font-size: 24px;
    font-weight: bold;
    color: transparent;
    background: linear-gradient(to right, rgb(2, 253, 2), rgb(25, 27, 3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

.heading {
  font-size: 4.2rem;
  font-weight: 700;
  color: var(--text-dark);
}

.paragraph {
  color: var(--text-light);
  font-size: 1.6rem;
  padding: 3rem 0 3rem 0;
  width: 100%;
}

.signin_form {
  width: 35rem;
}

.input-form-container {
  padding: 1rem 0;
}

.input-form-container label {
  color: #000000;
  font-weight: 500;
  font-size: 1.6rem;
}

.input-group {
  margin-top: 1rem;
  padding: 0.7rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0.15rem solid #D0D5DD;
  border-radius: 0.5rem;
}

.input-group input {
  width: 100%;
  font-size: 1.7rem;
  padding: 0.2rem 0.5rem;
  border: none;
  outline: none;
  background: #f8f8f800;

}

.input-group ion-icon {
  font-size: 2.4rem;
  color: #D0D5DD;
}

.d-flex {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3rem;
  justify-content: space-between;
}

.link {
  color: var(--primary);
  font-weight: 500;
}

.btn {
  display: block;
  padding: 0.7rem 1.2rem;
  width: 100%;
  text-align: center;
}

.btn-primary {
  color: #fff;
  background: var(--primary);
  border: none;
  outline: none;
  font-weight: 500;
  font-size: 1.6rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.btn-signup {
  border: 0.15rem solid #D0D5DD;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-weight: 500;
}


.logo-img{
  width: 50px;
}
.img-container {
  /* background: var(--secondary); */
  border-radius: 3rem;
}

.img-container img {
  width: 100%;
  animation: floating 3s ease-in-out infinite;

}

/* Aturan keyframes untuk animasi floating */
@keyframes floating {
  0% {
    transform: translateY(0); /* Posisi awal */
  }
  50% {
    transform: translateY(-10px); /* Bergerak ke atas 10px */
  }
  100% {
    transform: translateY(0); /* Kembali ke posisi awal */
  }
}

.icons{
  cursor: pointer
}

  /* Loader Styles */
  .loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(238, 255, 236, 0.8);
    z-index: 9999;
  }

  .loader {
    width: 50px;
    height: 50px;
    background-image: url('images/aelear.png');
    background-size: contain;
    background-repeat: no-repeat;
    animation: breathe 2s ease-in-out infinite;
  }

  /* Animasi breathe untuk efek pernapasan */
  @keyframes breathe {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.2);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0.8;
    }
  }

  /* Sembunyikan loader saat konten dimuat */
  body.loaded .loader-container {
    display: none;
  }


@media (max-width:850px) {
  .img-container {
    display: none;
  }
  .signin-container {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .form-container>.paragraph {
    padding: 1rem 0;
  }
  .signin_form {
    width: 100%;
  }
    .form-container {
      padding: 2rem 0;
    }
}