body {
      background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Poppins', sans-serif;
      align-content: 25%;
    }

    .card {
      border: none;
      border-radius: 1rem;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      background-color: rgb(231, 223, 223);
      padding: 2rem;
    }

    h4 {
      text-align: center;
      font-weight: 600;
      margin-bottom: 1.5rem;
      color: #4e4376;
    }

    .btn-primary {
      background-color: #4e4376;
      border: none;
    }
    input:focus{
      outline: none;
      border-bottom: 1px solid black;
    }

    .btn-primary:hover {
      background-color: #2b5876;
    }

    .btn-outline-secondary:hover {
      color: #fff;
      background-color: #4e4376;
      border-color: #4e4376;
    }

    @media (max-width: 576px) {
      .card {
        margin: 1rem;
        padding: 1.5rem;
      }

      input.form-control {
        font-size: 1.1rem;
      }
      .containerr{
      margin-bottom: 280px;
    }
    }