html, body {
      margin: 0;
      padding: 0;
      height: 100%;              /* for min-height to work nicely */
    }

body {    
      
      justify-content: center;   /* horizontal center */
      align-items: center;       /* vertical center */
      min-height: 100vh;        /* full viewport height */          
    }
  
  a {
      text-decoration: underline !important;
    }
 a:hover, a:active, a:visited {
      text-decoration: none !important;
      outline: 3px solid #3076C8 !important;
    }

input[type="text"]:focus, 
input[type="password"]:focus {
	box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6), inset 0px 0px 3px #3076C8;
}

:focus {
  outline: 3px solid #3076C8;
  outline-offset: 2px;
}
/* Page centering */
    .page-center {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px 10px 0 10px;     
      background: #1B3055;
      box-sizing: border-box;
      font-family: 'Roboto';

    }
    .page-container {
      width: 100%;
      max-width: 1024px;
      overflow: hidden;
    }

    /* Card */
    .login-card {   
      background: #fff;
    }

    /* Make columns stretch to same height */
    .login-card .col {
      display: flex;
      align-items: stretch;
      min-height: 380px; /* visual baseline height — adjust as needed */
    }

    /* Image column: make image fill column while keeping aspect via object-fit */
    .img-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Form column inner wrapper to center content vertically */
    .form-wrap {
      padding: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      min-height: 600px;
    }

    .form-wrap h2 {
      margin-bottom: 20px;	
      font-size: 34px;
      font-weight: 700;
      color: #1B3055;
      font-family: 'Roboto';
      text-transform: uppercase;
    }

    .control-label {
      font-size: 12px;
      color:#0C2856;
      text-transform: uppercase;
      padding: 0;
      font-family: 'Roboto';
    }
    .form-control {
      border:2px solid #4A5A6C;
    }
    .form-control:focus {
       border-color: #3076C8;
    }
    .forgot-password-link{
      text-align: right;   
    }
   
 

     /* Warning div */
  .no-bookmark {     
      font-weight: bold;    
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
      width: 100%;
      text-align: center;
      margin:10px 0;
      padding: 5px 0;
      color: #fff;
    }

   /* Footer pinned at bottom */
    footer {     
      color: #fff;
      text-align: center;
      font-size: 14px ;
      width: 100%;
     
    }
     footer p {
      color: #fff;
      margin: 0;
      padding: 0;
     }

    footer a {
      color: #fff !important;
      text-decoration: underline;
    }
    footer a:hover {
      color: #fff !important;
      text-decoration: none;
      outline: 3px solid #4A90E2;
    }

    /*OTP CSS*/
    .otp_pagesize {
      max-width: 480px;
      padding: 80px 0 0 0;    
      margin: 0 auto;
    }
    .otp_container {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      padding: 40px 35px;
      width: 100%;     
    }

    .otp_logo {
      width: 200px;
      margin: 0 auto 20px;
      display: block;
    }

    .otp_PageTitle {
      font-size: 1.25rem;
      margin-bottom: 10px;
      color: #111;
      text-align: center;
    }

    .otp_subtitle {
      font-size: 0.95rem;
      color: #555;
      margin-bottom: 25px;
      text-align: center;
    }
 
    .verficationbutton {
        width: 100%;
        padding: 12px;
        background-color: #bfc4cc;
        border: none;
        border-radius: 4px;
        font-size: 1rem;
        font-weight: bold;
        color: #555;
        cursor: not-allowed;
        margin: 40px 0px;
        
      }

    
  .btn-primary,
  .btn-primary.disabled, 
  .btn-primary:disabled {
      background: #E52015 ;
      border-color: #1ab26b ;
      color: #fff ;
  }
    .is-invalid + .invalid-feedback {
      display: block;
    }
    @media (max-width: 480px) {
      .otp_container {
        padding: 25px 20px;
      }

      .otp_PageTitle {
        font-size: 1.1rem;
      }

      .otp_subtitle {
        font-size: 0.9rem;
      }
    }


    @media screen and (max-width: 991.98px)  {
      .form-wrap{ 
        padding: 0px 20px;     
        min-height: 435px;       
      }
      
    }
    
    @media screen and (max-width: 768px)  {
      body{
        height: 80%;
         min-height: 80vh; 
      }
      .forgot-password-link{ text-align: left; }
      .page-center { padding: 10px;  margin-top: 60px;}
    }

    @media only screen and (min-width: 320px) and (max-width: 359.98px){
      .form-wrap{ padding: 10px 0px;  }
      
    }

    /* On small screens remove fixed min-height so content flows naturally */
    @media (max-width: 575.98px) {
      .login-card .col { min-height: auto; }
      .form-wrap { padding: 20px; }
      .forgot-password-link{ text-align: left; }
    }