* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'poppins', sans-serif;
}

.main-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  min-width: 100rem;
}

.lt-container,
.rt-container {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rt-container {
  background: url(../images/Blue-Rectangle.jpg), no-repeat center center fixed;
  background-size: cover;
  position: relative;
}

.text-img-container {
  background-color: rgba(255, 255, 255, 0.21);
  width: 41.2rem;
  height: 52.4rem;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 4.6rem;
  position: relative;
}

.light-icon {
  display: flex;
  width: 7.9rem;
  height: 7.9rem;
  position: absolute;
  left: -3rem;
  top: 34.7rem;
}

.img-container {
  position: absolute;
  bottom: 0;
  right: -4.5rem;
  height: 100%;
}

.woman-smiling {
  height: 100%;
}

.rt-text-container {
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.6rem;
  width: 18.4rem;
  color: #fff;
  margin-left: 3.1rem;
  margin-top: 2.6rem;
}

.lt-container--all--items {
  margin: 0 auto;
  width: 36.4rem;
  background-color: #fff;
}

.lt-container--desc {
  text-align: center;
}

.primary-heading {
  text-transform: uppercase;
  font-size: 3rem;
  font-weight: 700;
  color: #000;
  line-height: 4.6rem;
}

.lt-container--desc {
  margin-bottom: 2.4rem;
}

.lt-container--desc p {
  font-size: 1.6rem;
  font-weight: 400;
  color: #525252;
}

form {
  text-align: center;
}

.input-group {
  background-color: rgba(240, 237, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 1.4rem 1.8rem;
  border-radius: 1.6rem;
}

.first-input-group {
  margin-bottom: 1.8rem;
}

.second-input-group {
  margin-bottom: 2.4rem;
}

.icon {
  width: 2.4rem;
  height: 2.4rem;
}

.input-group input {
  background-color: inherit;
  line-height: 1.8rem;
  font-size: 1.2rem;
  border: none;
  font-weight: 400;
  color: #1c1c1c;
  outline: none;
}

.input-group input::placeholder {
  color: #1c1c1c;
  font-size: 1.2rem;
}

.btn {
  background: linear-gradient(99.78deg, #9181f4 -5.85%, #5038ed 109.55%);
  box-shadow: 0 8px 21px rgba(0, 0, 0, 0.16);
  color: #fff;
  padding: 1.7rem 3rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.8rem;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  margin-bottom: 2.4rem;
}

.sec-heading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.4rem;
}
.sec-heading-container::before,
.sec-heading-container::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #f0edff;
}

.sec-heading {
  margin: 0 0.2rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #525252;
  line-height: 2.4rem;
}

.sec-heading strong {
  color: #1c1c1c;
  font-weight: 700;
}

.alt-login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.social-icon img {
  width: 100%;
  height: 100%;
}
.social-icon {
  max-width: 3rem;
  max-width: 3rem;
}

.google-container,
.facebook-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid #f0edff;
  width: 100%;
  border-radius: 1.6rem;
  padding: 1.1rem 0;
  cursor: pointer;
}

.google-container p,
.facebook-container p {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.8rem;
  color: #1c1c1c;
}

.alt-login-container strong {
  font-weight: 700;
}