html,
body {
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-image: url('../images/debit-bg-v4.jpg');
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
   /*  background-color: #1a237e; */
}

.form-signin {
/*     width: 100%;
    max-width: 330px;
    padding: 15px; */
    margin: auto;
}

/*     .form-signin .checkbox {
        font-weight: 400;
    }

    .form-signin .form-floating:focus-within {
        z-index: 2;
    }

    .form-signin input[type="text"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .form-signin input[type="password"] {
        margin-bottom: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    } */


    .form {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-left: 2em;
        padding-right: 2em;
        padding-bottom: 0.4em;
        border-radius: 25px;
        transition: 0.4s ease-in-out;
        width: 500px;
        background: linear-gradient(145deg, #0c1b73, #0e2089);
      }
      
      .card {
        background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
        border-radius: 22px;
        transition: all 0.3s;
      }
      
      .card2 {
        border-radius: 0;
        transition: all 0.2s;
      }
      
      .card2:hover {
        transform: scale(0.98);
        border-radius: 20px;
      }
      
      .card:hover {
        box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.3);
      }
      
      #heading {
        text-align: center;
        margin: 2em;
        color: rgb(255, 255, 255);
        font-size: 1.2em;
      }
      
      .field {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5em;
        border-radius: 25px;
        padding: 0.6em;
        border: none;
        outline: none;
        color: white;
        background-color: #1a237e;
        box-shadow: inset 2px 5px 10px rgb(9 18 75), inset -2px -5px 10px #2a36af;
      }
      
      .input-icon {
        height: 1.3em;
        width: 1.3em;
        fill: white;
      }
      
      .input-field {
        background: none;
        border: none;
        outline: none;
        width: 100%;
        color: #d3d3d3;
      }
      
      .form .btn {
        display: flex;
        justify-content: center;
        flex-direction: row;
        margin-top: 2.5em;
      }
      
      .button1 {
        padding: 0.5em;
        padding-left: 1.1em;
        padding-right: 1.1em;
        margin-right: 0.5em;

        color: #ffffff;
    border: none;
    border-radius: 1.5rem;
    box-shadow: 3px 3px 8px rgb(9 18 75), -3px -3px 8px #2a36af;
    transition: box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
    padding-left: 1.3rem;
    padding-right: 1.3rem;
    background: #1a237e;
      }
      
      .button1:hover {
        background-color: black;
        color: white;
      }
      
      .button2 {
        padding: 0.5em;
        padding-left: 2.3em;
        padding-right: 2.3em;
        border-radius: 5px;
        border: none;
        outline: none;
        transition: 0.4s ease-in-out;
        background-color: #252525;
        color: white;
      }
      
      .button2:hover {
        background-color: black;
        color: white;
      }
      
      .button3 {
        margin-bottom: 2em;
        border-radius: 2rem;
      }