@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600&family=Poppins:wght@300;400&display=swap');
  * {
     box-sizing: border-box;
     font-family: 'Nunito', sans-serif;
     font-family: 'Poppins', sans-serif;
  }
  

  
  #regForm {
    background-color: #ffffff;
    font-family: Raleway;
    padding: 40px;
    width: 100%;
    min-width: 300px;
    border-radius: 7px;
  }
  
  h1 {
    text-align: center;  
  }
#nextBtn{
    border-radius: 7px;
}
.last-text{
    color: rgb(70, 131, 211);
}
 .top-text{
     background-color: #04AA6D;
     color: white;
     border-radius: 7px;
  }
  .next-text{
    background-color: #04AA6D;
     color: white;
     border-radius: 7px;
     display: none;
  }
  
  input {
  
    font-size: 17px;
    font-family: Raleway;
    border: 1px solid #aaaaaa;
  }
  
  /* Mark input boxes that gets an error on validation: */
  input.invalid {
    background-color: #ffdddd;
  }
  
  /* Hide all steps by default: */
  .tab {
    display: none;
    border-radius: 7px;
  }
  
  button {
    background-color: #04AA6D;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 17px;
    cursor: pointer;
    border-radius: 5px;
  }
  
  button:hover {
    opacity: 0.8;
  }
  
  #prevBtn {
    background-color: #bbbbbb;
    border-radius: 7px;
  }
  
  /* Make circles that indicate the steps of the form: */
  .step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;  
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
  }
  
  .step.active {
    opacity: 1;
  }
  
  /* Mark the steps that are finished and valid: */
  .step.finish {
    background-color: #04AA6D;
  }
  .msg{
    max-width: 700px;
    align-items: center;
  }
  .colors{
    opacity: 0.8;
    border-radius: 7px;
    min-height: 20px;
  }
  #again{
      display: none;
  }
  .callus{
      color: #04AA6D;
      font-weight: bold;
  }
  .green{
      background-color: #04AA6D;
      border-radius: 5px;
      color: white;
      padding: 7px;
  }
  .yellow{
    background-color: rgb(201, 173, 15);
    border-radius: 5px;
    color: white;
    padding: 7px;
  }

  .orange{
    background-color: rgb(214, 124, 20);
    border-radius: 5px;
    color: white;
    padding: 7px;  
  }
  .red{
    background-color: rgb(204, 28, 16);
    border-radius: 5px;
    color: white;
    padding: 7px;  
  }
  .topp{
    background-color: #f1f1f1;
    padding: 20px;
    border-radius: 8px;
  }