:root {
  --white: #fff;
  --blue: #004D80;
  --green: #0f9556;
  --black: #212121;
}
/* Style for valid input */
.is-valid {
  border-color: #28a745; /* Green border */
}

/* Additional visual feedback (e.g., green checkmark) can be added using pseudo-elements */
.is-valid::after {
  content: '\2714'; /* Unicode checkmark symbol */
  position: absolute;
  top: 10px;
  right: 10px;
  color: #28a745;
}

.gradient-button {
  background-image: linear-gradient(to right, var(--blue), var(--green));
  border: none;
  color: var(--white); /* Sets button text color to white */
}

.gradient-button:hover {
  background-color: var(--green); /* Changes to solid green on hover */
  color: var(--white); /* Ensures text remains white on hover */

}
.gradient-button {
        width: 120px;
        height: 40px;
        position:relative;
    }

h4#registration-heading {
  color: var(--blue); /* Sets the color of the heading to blue */
  font-size: 40px;
  position: relative; /* Required for absolute positioning of dotted line */
}

h4#registration-heading::after {
  content: '';
  position: absolute;
  bottom: -5px; /* Adjust the distance of the dotted line from the text */
  left: 0;
  width: 100%;
  border-bottom: 1px dotted var(--blue); /* Creates a dotted line below the heading */
}

/* Style to ensure button text color is white */
button.gradient-button {
  color: var(--white);
}