.signup-form-wrapper {
  max-width: 674px;
  margin: auto;
}

.signup-form-wrapper .form-card {
  --form-subtitle-spacing: 32px;
  --form-bottom-spacing: 29px;
}
.signup-form-wrapper.get-otp {
  max-width: 674px;
}
.signup-form-wrapper.get-otp .form-card {
  --form-c-padding: 56px 44px;
  --form-title-spacing: 48px;
  --form-subtitle-spacing: 48px;
  --form-bottom-spacing: 29px;
  position: relative;
}

.horizontal-badge {
  position: absolute;
  top: -18.5px;
  right: 18px;
  width: 90%;
  max-width: 430px;
}

.horizontal-badge .badge-img {
  width: 100%;
}
.horizontal-badge .inner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  gap: 12px;

  color: #fff;
  font-family: Raleway;
  font-size: clamp(1.125rem, 0.875rem + 0.6944444444444444vw, 1.5rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.5rem;
}

.continue-login {
  width: 100%;
  max-width: 334px;
  margin-inline: auto;
  margin-top: 29px;
}

.signup-form-wrapper.get-otp .continue-login {
  margin-top: 8px;
}

.signup-option {
  border: 1px solid #d5d5d5;
  border-radius: 16px;

  padding: 30px 17px;
  margin-bottom: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* When the input inside is checked, change border */
.signup-option:has(input:checked) {
  border: 2px solid var(--gradient, #e4c77b);
}

.signup-option.selected {
  border-color: red;
}
.signup-option img {
  width: 83.242px;
  height: 44.5px;
}
.signup-option h5 {
  color: #252c32;
  font-family: Raleway;
  font-size: clamp(
    1.125rem,
    0.9583333333333334rem + 0.4629629629629629vw,
    1.375rem
  );
  font-style: normal;
  font-weight: 700;
  line-height: clamp(
    1.5rem,
    1.2166666666666666rem + 0.7870370370370371vw,
    1.925rem
  );

  margin-bottom: 7px;
}
.signup-option p {
  color: #252c32;
  font-family: Raleway;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22.4px;
  margin-bottom: 0px;
}
.star-icon {
  color: #ffd700;
}
.signup-option input[type="radio"] {
  display: none;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .signup-option {
    padding: 18px 12px;
  }
  .signup-option img {
    width: 60px;
  }

  .continue-login {
    margin-top: 15px;
  }

  .signup-form-wrapper .form-card {
    --form-subtitle-spacing: 28px;
    --form-bottom-spacing: 24px;
  }

  .signup-form-wrapper.get-otp .form-card {
    --form-c-padding: 42px 28px;
    --form-title-spacing: 32px;
    --form-subtitle-spacing: 32px;
  }
}

@media (max-width: 567px) {
  .signup-form-wrapper.get-otp .form-card {
    --form-c-padding: 32px 20px;
    --form-title-spacing: 29px;
    --form-subtitle-spacing: 29px;
  }

  .horizontal-badge {
    width: 90%;
    max-width: 250px;
    top: -11px;
  }

  .horizontal-badge .inner-content {
    font-size: 12px;
  }

  .horizontal-badge .star {
    width: 10px;
  }
}

/* VERIFY OTP STYLES HERE ----------------------------------- */
.verify-otp {
  max-width: 674px;
}
.verify-otp .form-card {
  --form-c-padding: 56px 44px;
  --form-title-spaceing: 28px;
  --form-subtitle-spaceing: 48px;
}
/* VERIFY OTP STYLES END HERE  ------------------------------ */

/* STEPS STYLES HERE ------------------------------ */
.steps-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 23px;
  margin-bottom: var(--form-steps-bottom-spacing, 48px);
}

.steps-wrapper .step-item {
    --step-bg: linear-gradient(115deg, #c2c2c2 4.94%, #5b5b5b 95.11%);

  display: flex;
  align-items: start;
  flex: 1;
  gap: 8px;
 
  --step-label-color: #000000d9;
}

.steps-wrapper .divider {
  height: 1px;
  width: 100%;
  flex: 1;
  background: #d6ac58;
  margin-top: 18px;
}

.steps-wrapper .step-item .step {
  
  border-radius: 8px;
  background: var(--step-bg);
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;

  color: var(--Neutral-1, #fff);
  text-align: center;

  font-family: "Raleway";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.steps-wrapper .step-item.active {
  --step-bg: linear-gradient(115deg, #eed69a 4.94%, #bf841a 95.11%);
  --step-label-color: #c7912f;
}

.steps-wrapper .step-item .step-label {
  color: var(--step-label-color);
  font-family: Raleway;
  font-size: clamp(0.75rem, 0.583rem + 0.463vw, 1rem);
  font-style: normal;
  font-weight: 600;
  line-height: clamp(1.25rem, 1.083rem + 0.463vw, 1.5rem);
  margin: 0px;
}
.steps-wrapper .step-item .step-label span {
  font-size: clamp(0.625rem, 0.458rem + 0.463vw, 0.875rem);
  line-height: clamp(1rem, 0.75rem + 0.694vw, 1.375rem);
  display: inline-block;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .steps-wrapper {
    gap: 16px;
  }
  .steps-wrapper .step-item .step {
    width: 24px;
    height: 24px;
  }

  /* .steps-wrapper .step-item .step-label {
    font-size: 14px;
    line-height: 22px;
  } */
}
@media (max-width: 576px) {
  .steps-wrapper {
    gap: 10px;
    /* flex-direction: column; */
    align-items: flex-start;
  }

  .steps-wrapper .divider {
    /* width: 1px;
    height: 21px;
    flex: unset;
    margin-left: 11px;
    margin-top: -26px;
    margin-bottom: -11px; */
  }
}

/* STEPS STYLE END HERE  ------------------------------ */

.logo-wrapper {
  margin-bottom: clamp(0.625rem, -2.125rem + 7.639vw, 4.75rem);
  /* position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%); */
}

.networth-wrapper {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.25rem + 1.389vw, 1.5rem);
  margin-bottom: 10px;
}

.networth-wrapper .networth-label {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 600;
  font-size: clamp(0.875rem, 0.792rem + 0.231vw, 1rem);
  line-height: 24px;

  color: rgba(0, 0, 0, 0.85);

  flex: none;
}

.create-guest-profile{
  font-size: 15px;
  font-family:Raleway;
  font-weight: 700;
}

 .input-button {
  position: absolute;
  right: 10px;
  top: 40%;
  transform: translateY(-50%);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  padding-bottom: 5px;;
  cursor: pointer;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 0;
}

.title-text{
    color: var(--text-primary, #1c252e) !important;
  font-family: Raleway;
  font-size: clamp(
    1.5rem,
    1.1666666666666667rem + 0.9259259259259258vw,
    2rem
  ) !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: 122% !important;

  letter-spacing: var(--h5-letter-spacing, 0px);
  margin-bottom: var(--form-title-spacing, 12px) !important;
  margin-top: 0px !important;
}

#noteModal .modal-content {
  border-radius: 24px;
}

 
#noteModal .modal-header {
padding-bottom: 0;
}

@media (max-width: 576px) {
  .modal-responsive {
    max-width: 90%;
    margin: 0 10px;
  }
}