::placeholder {
    color:blue;
    opacity: 1; }
   body {
       background-color: #f8f9fa;
       display: flex;
       align-items: center;
       justify-content: center;
       height: 100vh;
       margin: 0;
       overflow: hidden;
   }

   .container {
      
       display: flex;
       width: 120vw; /* Set width to 80% of the viewport width */
       max-width: 1400px; /* Maximum width to ensure it doesn't get too wide on larger screens */
       background-color: #ffffff;
       border-radius: 10px;
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
       border: 2px solid #4285f4; /* Google Blue border */
   }

   .logo-side {
   
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: #4285f4; /* Google Blue */
       width: 40%;
       padding: 25px;
       border-radius: 10px 0 0 10px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
       border-right: 2px solid #ffffff; /* Google Green border */
       color: #ffffff; /* White text */
       font-family: 'Poppins', sans-serif;
       text-align: center;
   }

   .logo-side h1 {
       font-size: 3rem;
       margin: 0;
       font-weight: 700; /* Bold weight for the font */
   }

   .login-side {
    height: 650px;
       width: 60%;
       padding:25px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       background-color: #ff1500; /* Google Red */
       border-radius: 0 10px 10px 0;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
       border-left: 2px solid #ffffff; /* Google Yellow border */
   }

   .login-side h2 {
       margin-bottom: 30px;
       font-weight: bold;
       color: #ffffff; /* White text */
       border-bottom: 2px solid #fafafa; /* Google Green border below header */
       padding-bottom: 10px;
   }

   .login-side .form-control {
       border-radius: 50px;
       height: 60px;
       font-size: 1.5rem;
       text-align: center;
       padding: 10px;
       color:#0e51ef;
       background-color: #ffffff; /* White background for input */
       border: 2px solid #4285f4; /* Google Blue border */
   }

   .login-side .btn-primary {
       border-radius: 50px;
       padding: 15px 30px;
       font-size: 1.5rem;
       width: 100%;
       margin-top: 20px;
       background-color: #fbbc05; /* Google Yellow */
       color: #ffffff; /* White text */
       border: 2px solid #4285f4; /* Google Blue border */
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }

   .login-side .btn-primary:active {
       background-color: #000000; /* Black for button press effect */
       border-color: #000000; /* Black border when active */
   }

   .keypad {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 10px;
       margin-top: 20px;
   }

   .keypad button {
       border-radius: 50px;
       padding: 20px;
       font-size: 1.5rem;
       background-color: #fcfcfc; /* Google Yellow */
       color: #0e51ef; /* Black text */
       border: 2px solid #4285f4; /* Google Blue border */
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
       touch-action: manipulation;
   }

   .keypad button:active {
       background-color: #000000; /* Black for button press effect */
       border-color: #000000; /* Black border when active */
   }

   @media (max-width: 768px) {
       .container {
           flex-direction: column;
           width: 95vw; /* Adjusted for smaller screens */
           max-width: none;
       }

       .logo-side,
       .login-side {
           width: 100%;
           border-radius: 10px 10px 0 0;
           padding: 20px;
       }

       .logo-side {
           border-radius: 10px 10px 0 0;
       }

       .login-side {
           border-radius: 0 0 10px 10px;
       }

       .logo-side h1 {
           font-size: 2rem;
       }
   }