.elementor-193 .elementor-element.elementor-element-cce9a11{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-193 .elementor-element.elementor-element-a805c49{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-193 .elementor-element.elementor-element-2fc9ee9{--spacer-size:50px;}.elementor-193 .elementor-element.elementor-element-440c8e1{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-193 .elementor-element.elementor-element-0b80e05{--display:flex;--border-radius:10px 10px 10px 10px;box-shadow:0px 0px 2px 0px rgba(0,0,0,0.5);--padding-top:25px;--padding-bottom:25px;--padding-left:25px;--padding-right:25px;}.elementor-193 .elementor-element.elementor-element-94920db{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-193 .elementor-element.elementor-element-19f5170{padding:0px 0px 8px 0px;text-align:center;}.elementor-193 .elementor-element.elementor-element-19f5170 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:43px;font-weight:500;color:#000000;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-193 .elementor-element.elementor-element-5779f59{--divider-border-style:solid;--divider-color:#6F6F6F;--divider-border-width:1px;}.elementor-193 .elementor-element.elementor-element-5779f59 .elementor-divider-separator{width:87%;margin:0 auto;margin-center:0;}.elementor-193 .elementor-element.elementor-element-5779f59 .elementor-divider{text-align:center;padding-block-start:9px;padding-block-end:9px;}.elementor-193 .elementor-element.elementor-element-829524c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-193 .elementor-element.elementor-element-829524c .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:15px;font-weight:400;text-decoration:underline;color:#000000;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-193 .elementor-element.elementor-element-0b80e05{--width:32%;}}/* Start custom CSS for html, class: .elementor-element-84ad0c1 */.google-login-btn {
  display: flex;
  align-items: center;
  border: 1.5px solid #dadce0;
  border-radius: 8px;
  background: #fff;
  color: #222;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 500;
  padding: 15px 22px 15px 20px;
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s;
  box-shadow: none;
  outline: none;
  width: 100%; /* <-- This makes the button full width */
}

.google-login-btn:hover,
.google-login-btn:focus {
  border-color: #222;
  background: #fff;
  color: #222; /* <-- ensures text is visible on hover/focus */
}

.google-login-icon {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

.google-login-text {
  display: inline-block;
  vertical-align: middle;
  color: inherit; /* <-- ensures it uses the button's color property */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b3d2c0c *//* ADD THESE NEW STYLES for the error messages */
.my-signup-error-container {
  border: 1.5px solid #d32f2f;
  border-radius: 8px;
  padding: 12px 16px;
  background-color: #ffebee; /* Light red background */
  color: #d32f2f;
  margin-bottom: 20px; /* Space between errors and form */
  font-size: 14px;
}

.my-signup-error-container div {
  margin-bottom: 5px;
}

.my-signup-error-container div:last-child {
  margin-bottom: 0;
}


/* EXISTING CSS (with minor adjustments as discussed) */
.my-signup-form {
  width: 100%;
  margin: 20px auto;
  font-family: sans-serif;
}

.my-form-group {
  position: relative;
  margin-bottom: 20px;
}

.my-form-group input {
  width: 100%;
  padding: 18px 12px 15px 12px; /* Adjusted padding to remove right padding by default */
  font-size: 16px;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  outline: none;
  background: none;
  transition: border-color 0.2s;
}

/* Specific padding for password field to accommodate eye icon */
.my-form-group input[type="password"] {
  padding-right: 40px;
}

.my-form-group input:focus,
.my-form-group input.focus {
  border-color: #000;
}

.my-form-group input.invalid {
  border-color: #d32f2f !important;
}

.my-form-group input::placeholder {
  color: transparent;
}

.my-form-group label {
  position: absolute;
  left: 12px;
  top: 21px;
  color: #888;
  font-size: 16px;
  pointer-events: none;
  background: transparent;
  transition: 0.2s;
  padding: 0 4px;
  z-index: 1;
}

/* Floating label: black on focus or when input has content */
.my-form-group input:focus + label,
.my-form-group input.focus + label,
.my-form-group input:not(:placeholder-shown) + label {
  top: -10px;
  left: 8px;
  font-size: 13px;
  background: #fff;
  color: #000; /* Ensure this is black for both email and password on focus/float */
}

/* Red label for invalid password, always takes priority */
.my-form-group input.invalid + label,
.my-form-group label.invalid-label {
  color: #d32f2f !important;
}

/* Black label for email on focus/float */
.my-form-group label.focus-label {
  color: #000 !important; /* Ensure email label turns black and stays black if valid */
}


.my-toggle-password {
  position: absolute;
  right: 17px;
  top: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 22px;
  width: 20px;
  justify-content: center;
  z-index: 2;
  background: transparent;
  pointer-events: auto;
  border: none;
  padding: 0;
}

.my-toggle-password svg {
  display: block;
  pointer-events: none;
}

.password-requirements {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  padding: 12px 16px;
  margin-top: 10px;
  font-size: 15px;
  color: #222;
}

.password-requirements ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.password-requirements li {
  margin-bottom: 4px;
  list-style: disc;
}

/* Only show checkmark when needed, don't reserve space */
.password-requirements .pw-check {
  color: green;
  font-weight: bold;
  margin-right: 4px;
  display: none;
}

/* Continue button styles */
.my-continue-btn {
  width: 100%;
  padding: 16px 0;
  background: #181818;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  margin-top: 24px;
  transition: background 0.2s;
}

.my-continue-btn:hover,
.my-continue-btn:focus {
  background: #333;
  outline: none;
}

.my-signup-form {
  width: 100%;
  margin: 20px auto;
  font-family: sans-serif;
}

.my-form-group {
  position: relative;
  margin-bottom: 20px;
}

.my-form-group input {
  width: 100%;
  padding: 18px 40px 15px 12px;
  font-size: 16px;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  outline: none;
  background: none;
  transition: border-color 0.2s;
}

.my-form-group input:focus,
.my-form-group input.focus {
  border-color: #000;
}

.my-form-group input.invalid {
  border-color: #d32f2f !important;
}

.my-form-group input::placeholder {
  color: transparent;
}

.my-form-group label {
  position: absolute;
  left: 12px;
  top: 21px;
  color: #888;
  font-size: 16px;
  pointer-events: none;
  background: transparent;
  transition: 0.2s;
  padding: 0 4px;
  z-index: 1;
}

/* Floating label: black on focus or when input has content */
.my-form-group input:focus + label,
.my-form-group input.focus + label,
.my-form-group input:not(:placeholder-shown) + label {
  top: -10px;
  left: 8px;
  font-size: 13px;
  background: #fff;
  color: #000;
}

/* Red label for invalid password, always takes priority */
.my-form-group input.invalid + label,
.my-form-group label.invalid-label {
  color: #d32f2f !important;
}

.my-toggle-password {
  position: absolute;
  right: 17px;
  top: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 22px;
  width: 20px;
  justify-content: center;
  z-index: 2;
  background: transparent;
  pointer-events: auto;
  border: none;
  padding: 0;
}

.my-toggle-password svg {
  display: block;
  pointer-events: none;
}

.password-requirements {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  padding: 12px 16px;
  margin-top: 10px;
  font-size: 15px;
  color: #222;
}

.password-requirements ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.password-requirements li {
  margin-bottom: 4px;
  list-style: disc;
}

/* Only show checkmark when needed, don't reserve space */
.password-requirements .pw-check {
  color: green;
  font-weight: bold;
  margin-right: 4px;
  display: none;
}

/* Continue button styles */
.my-continue-btn {
  width: 100%;
  padding: 16px 0;
  background: #181818;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  margin-top: 24px;
  transition: background 0.2s;
}

.my-continue-btn:hover,
.my-continue-btn:focus {
  background: #333;
  outline: none;
}/* End custom CSS */