:root {
  --cPurple: #957BDC;
  --darlPurple: #6B4E90;
  --cPurpleLight: #C9BBE0;
  --cPurplePale: #EDE8F5;
  --cGreen: #6FBF8A;
  --cGreenLight: #BDE7C3;
  --cLavender: #9DA3CB;
  --cMint: #A9D4C5;
  --cText: #2D2D2D;
  --cMuted: #7c7c7c;
  --cCard: #D9D3EE;
  --BtnColor: #C1ADF4;

  --TextColor: #636363;

  --fDisplay: 'CuteFrog', sans-serif;
  --fBody: 'Nunito', sans-serif;

  --rSm: 0.75rem;
  --rMd: 1.25rem;
  --rLg: 2rem;
  --rXl: 2.5rem;
  --rPill: 999px;

  --shSm: 0 2px 14px rgba(123, 94, 167, .10);
  --shMd: 0 8px 32px rgba(123, 94, 167, .16);

  --maxW: 1200px;
  --navH: 68px;
  --secPad: 50px;
}
/* PAGE LAYOUT */
.RegPage {
  min-height: 100vh;
  padding-top: calc(var(--navH) + 60px);
  padding-bottom: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.RegInner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* LEFT */
.RegLeft {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.RegLogoWrap {
    display: flex;
    align-items: center;
    position: relative;
    gap: 1rem;
    margin-left: -110px;
    margin-top: -160px;
    margin-bottom: -150px;
}

.RegLogoWrap::after {
  content: '';
  position: absolute;
    right: 155px;
    top: 95px;
    width: 75px;
    height: 75px;
  background-image: url(../Assets/Svgs/3\ hearts\ shape\ \(2\).svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

}

.RegLogoWrap img {
  height: 400px;
  width: auto;
}


.RegSub {
  font-family: var(--fDisplay);
  font-size: 30px;
  color: var(--cMuted);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-left: -65px;
}

.RegSub span {
  color: var(--cPurple);
}

.RegHeadline{
  font-family: var(--fBody);
  font-size: 30px;
  font-weight: 800;
  color: var(--cMuted);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.RegHeadline span {
  color: var(--darlPurple);
}



/* STEPS */
.RegSteps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.RegStep {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.RegStepIcon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.RegStepIcon svg {
  width: 16px;
  height: 16px;
}

.RegStepText {
  font-family: var(--fBody);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cMuted);
  padding-top: 5px;
}


/* FORM CARD */
.RegCard {
  background: #fff;
  border-radius: 2rem;
  padding:3rem 2rem;
  box-shadow: 0 12px 48px rgba(123, 94, 167, .15);
}

.RegCardTitle {
  font-family: var(--fBody);
  font-size: 30px;
  font-weight: 900;
  color: var(--darlPurple);
  text-align: center;
}

.RegCardLogo {
  display: flex;
  justify-content: center;
}

.RegCardLogo img {
  height: 90px;
  width: auto;
}

/* FORM FIELDS */
.RegField {
  position: relative;
  margin-bottom:10px;
}
.RegField label {
  display: block;
  font-size: 0.8rem;
  color: #aaa;
  font-weight: 700;
  margin-bottom: 4px;
  font-family: var(--fBody);
}

.RegField input {
  width: 100%;
  border: none;
  border-bottom: 1.5px solid #ccc;
  background: transparent;
  padding: 0.75rem 0.25rem;
  font-family: var(--fBody);
  font-size: 0.9rem;
  color: var(--cText);
  outline: none;
  transition: border-color .2s;
}

.RegField input::placeholder {
  color: #aaa;
  font-weight: 600;
}

.RegField input:focus {
  border-bottom-color: var(--cPurple);
}

.RegField.Error input {
  border-bottom-color: #e05555;
}

/* VALIDATION ERROR */
.RegError {
  font-family: var(--fBody);
  font-size: 0.78rem;
  color: #e05555;
  margin-top: 0.25rem;
  display: none;
  font-weight: 700;
}

.RegError.Show {
  display: block;
}

/* SUBMIT BUTTON */
.RegSubmitBtn {
  display: block;
  margin: auto;
  padding: 10px 50px;
  background: var(--darlPurple);
  color: #fff;
  border: none;
  border-radius: var(--rPill);
  font-family: var(--fBody);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 30px;
  transition: opacity .2s, transform .2s, box-shadow .2s;
}

.RegSubmitBtn:hover {
  opacity: .88;
  transform: translateY(-2px);
  box-shadow: var(--shMd);
}

.RegSubmitBtn:active {
  transform: translateY(0);
}

.RegSubmitBtn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.RegSpinner {
  display: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  animation: Spin .7s linear infinite;
  margin: 0 auto;
}

.RegSubmitBtn.Loading .RegBtnText {
  display: none;
}

.RegSubmitBtn.Loading .RegSpinner {
  display: block;
}

/*SUCCESS STATE */
.RegSuccess {
  display: none;
  text-align: center;
  padding: 2rem 0;
  animation: FadeUp .4s ease;
}

.RegSuccess.Show {
  display: block;
}

.RegSuccessIcon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--cGreenLight);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.RegSuccessIcon svg {
  width: 36px;
  height: 36px;
  stroke: var(--cGreen);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.RegSuccessTitle {
  font-family: var(--fDisplay);
  font-size: 1.8rem;
  color: var(--cPurple);
  margin-bottom: 0.5rem;
}

.RegSuccessMsg {
  font-family: var(--fBody);
  font-size: 0.9rem;
  color: var(--TextColor);
  line-height: 1.7;
  font-weight: 600;
}

.RegSuccessEmail {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 700;
  color: var(--cPurple);
}

/* FORM FADE OUT TRANSITION */
.RegFormWrap {
  transition: opacity .3s ease;
}

/* ANIMATION */
@keyframes FadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* RESPONSIVE CLEAN */
/* Tablet */
@media (max-width: 1200px) {

  .RegInner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .RegLeft {
    align-items: center;
    text-align: center;
  }

  .RegLogoWrap {
    margin: 0 !important;
    justify-content: center;
  }

  .RegLogoWrap::after {
    display: none;
  }

  .RegLogoWrap img {
    height: 220px;
  }

  .RegSub {
    margin-left: 0 !important;
    font-size: 22px;
  }

  .RegHeadline {
    font-size: 24px;
  }

  .RegSteps {
    align-items: center;
  }

  .RegStep {
    justify-content: center;
  }
}


/* Mobile */
@media (max-width: 600px) {

  .RegPage {
    padding-top: calc(var(--navH) + 20px);
  }

  .RegInner {
    padding: 0 1rem;
  }

  .RegLogoWrap img {
    height: 140px;
  }

  .RegSub {
    font-size: 18px;
  }

  .RegHeadline {
    font-size: 20px;
  }

  .RegSteps {
    gap: 0.6rem;
  }

  .RegStepText {
    font-size: 0.85rem;
  }

  .RegCard {
    padding: 1.5rem 1rem;
    border-radius: 1.2rem;
    width: 100%;
  }

  .RegCardTitle {
    font-size: 22px;
  }

  .RegCardLogo img {
    height: 65px;
  }

  .RegField input {
    font-size: 0.85rem;
  }

  .RegSubmitBtn {
    width: 100%;
    padding: 10px;
  }
}


/* Tablet Landscape */
@media (max-width: 1300px) and (orientation: landscape) {

  .RegInner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
  }

  .RegLogoWrap {
    margin: 0 !important;
  }

  .RegLogoWrap::after {
    display: none;
  }

  .RegLogoWrap img {
    height: 260px;
  }

  .RegSub {
    margin-left: 0 !important;
    font-size: 22px;
  }

  .RegHeadline {
    font-size: 24px;
  }

  .RegLeft {
    align-items: flex-start;
    text-align: left;
    gap: 0;
  }

  .RegSteps {
    align-items: flex-start;
  }
}