body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
            margin: 0;
        }
        .login-container {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 450px;
            text-align: center;
            /* height: 70vh; */
        }
        .login-container h2 {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        .login-container p {
            margin-bottom: 30px;
            color: #6c757d;
        }
        .input-group {
            position: relative;
            border-radius: 17px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .input-group .form-control {
            border-radius: 17px;
            background-color: #f8eaf6;
            border: none;
            padding-left: 40px; /* Adjust padding to accommodate the icon */
            height: 54px;
        }
        .input-group-text {
            background-color: transparent;
            border: none;
            position: absolute;
            left: 4px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }
        .btn-login {
            background-color: #8b38d5;
            color: #ffffff;
            border-radius: 17px;
            padding: 10px 20px;
            border: none;
            width: 100%;
            margin-top: 20px;
        }
        .btn-login:hover {
            background-color: #732ab9;
        }
        .forgot-password, .signup-link {
            color: #8b38d5;
            margin-top: 20px;
            display: block;
        }
        .signup-link {
            margin-top: 10px;
        }
        .input-group .toggle-password {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .inline-text {
            display: inline;
        }

        .signup-container {
          background-color: #ffffff;
          padding: 20px;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          width: 450px;
          text-align: center;
      }
      .signup-container h2 {
          font-size: 2rem;
          margin-bottom: 10px;
      }
      .signup-container p {
          margin-bottom: 30px;
          color: #6c757d;
      }
      .input-group {
          position: relative;
          border-radius: 17px;
          overflow: hidden;
          margin-bottom: 20px;
      }
      .input-group .form-control {
          border-radius: 17px;
          background-color: #f8eaf6;
          border: none;
          padding-left: 40px; /* Adjust padding to accommodate the icon */
          height: 54px;
      }
      .input-group-text {
          background-color: transparent;
          border: none;
          position: absolute;
          left: 4px;
          top: 50%;
          transform: translateY(-50%);
          z-index: 10;
      }
      .btn-login {
          background-color: #8b38d5;
          color: #ffffff;
          border-radius: 54px;
          padding: 10px 20px;
          border: none;
          width: 100%;
          margin-top: 20px;
      }
      .btn-login:hover {
          background-color: #732ab9;
      }
      .forgot-password, .signup-link {
          color: #8b38d5;
          margin-top: 20px;
          display: block;
      }
      .signup-link {
          margin-top: 10px;
      }
      .input-group .toggle-password {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 10; /* Ensure the icon is on top */
    }
      .inline-text {
          display: inline;
      }

      @media screen and (min-width: 320px) and (max-width: 575.99px){
        .login-container {
          background-color: #ffffff;
          padding: 20px;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          width: 450px;
          text-align: center;
          /* height: 50vh; */
      }
        .login-container h2{
          font-size: 28px;
          font-weight: bold;
          margin-top: 3rem;
        }
        .signin-p1{
          font-size: 18px;
          margin-top: 2rem;
          margin-bottom: -1rem;
        }
        .signin-p2{
          font-size: 19px;
          margin-top: 4rem;
        }
        .fp{
          margin-top: 3rem;
          font-size: 18px;
        }
        .signup-container {
          background-color: #ffffff;
          padding: 20px;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          width: 400px;
          text-align: center;
      }
      .signup-container h2{
        font-size: 30px;
        font-weight: bold;
        margin-top: 2rem;
      }
      .signup-p1{
        font-size: 20px;
        margin-top: 2rem;
      }
      .signup-p2{
        font-size: 20px;
        margin-top: 7rem;
      }
      }
      @media screen and (min-width: 576px) and (max-width: 767.98px) {
        .login-container {
          background-color: #ffffff;
          padding: 20px;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          width: 550px;
          text-align: center;
          /* height: 50vh; */
      }
        .login-container h2{
          font-size: 28px;
          font-weight: bold;
          margin-top: 3rem;
        }
        .signin-p1{
          font-size: 18px;
          margin-top: 2rem;
          margin-bottom: -1rem;
        }
        .signin-p2{
          font-size: 19px;
          margin-top: 4rem;
        }
        .fp{
          margin-top: 3rem;
          font-size: 18px;
        }
        .signup-container {
          background-color: #ffffff;
          padding: 20px;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          width: 550px;
          text-align: center;
      }
      .signup-container h2{
        font-size: 30px;
        font-weight: bold;
        margin-top: 2rem;
      }
      .signup-p1{
        font-size: 20px;
        margin-top: 2rem;
      }
      .signup-p2{
        font-size: 20px;
        margin-top: 7rem;
      }
      }

      @media screen and (min-width: 768px) and (max-width: 1023.99px){
        .login-container {
          background-color: #ffffff;
          padding: 20px;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          width: 550px;
          text-align: center;
          /* height: 50vh; */
      }
        .login-container h2{
          font-size: 28px;
          font-weight: bold;
          margin-top: 3rem;
        }
        .signin-p1{
          font-size: 18px;
          margin-top: 2rem;
          margin-bottom: -1rem;
        }
        .signin-p2{
          font-size: 19px;
          margin-top: 4rem;
        }
        .fp{
          margin-top: 3rem;
          font-size: 17px;
        }
        .signup-container {
          background-color: #ffffff;
          padding: 20px;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          width: 550px;
          text-align: center;
      }
      .signup-container h2{
        font-size: 30px;
        font-weight: bold;
        margin-top: 2rem;
      }
      .signup-p1{
        font-size: 20px;
        margin-top: 2rem;
      }
      .signup-p2{
        font-size: 20px;
        margin-top: 7rem;
      }
      }

      @media screen and (min-width: 1024px) and (max-width: 1399.99px){
        .login-container {
          background-color: #ffffff;
          padding: 20px;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          width: 550px;
          text-align: center;
          /* height: 50vh; */
      }
        .login-container h2{
          font-size: 28px;
          font-weight: bold;
          margin-top: 3rem;
        }
        .signin-p1{
          font-size: 18px;
          margin-top: 2rem;
          margin-bottom: -1rem;
        }
        .signin-p2{
          font-size: 17px;
          margin-top: 4rem;
        }
        .fp{
          margin-top: 3rem;
          font-size: 17px;
        }
        .signup-container {
          background-color: #ffffff;
          padding: 20px;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          width: 550px;
          text-align: center;
      }
      .signup-container h2{
        font-size: 30px;
        font-weight: bold;
        margin-top: 2rem;
      }
      .signup-p1{
        font-size: 20px;
        margin-top: 2rem;
      }
      .signup-p2{
        font-size: 20px;
        margin-top: 7rem;
      }
      }

      @media screen and (min-width: 1400px){
        .login-container {
          background-color: #ffffff;
          padding: 20px;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          /* width: 550px; */
          text-align: center;
          /* height: 80vh; */
      }
      .login-container h2{
        font-size: 28px;
        font-weight: bold;
        margin-top: 1rem;
      }
      .signin-p1{
        font-size: 18px;
        margin-top: 2rem;
        margin-bottom: -1rem;
      }
      .signin-p2{
        font-size: 17px;
        margin-top: 2rem;
      }
      .fp{
        margin-top: 1.5rem;
        font-size: 17px;
      }
      .signup-container h2{
        font-size: 30px;
        font-weight: bold;
        margin-top: 1rem;
      }
      .signup-p1{
        font-size: 20px;
        margin-top: 2rem;
      }
      .signup-p2{
        font-size: 17px;
        margin-top: 4rem;
      }
      }