html,
 body {
     height: 100%;
     margin: 0;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     /* background-color: #f1f1f1; */
     /* background: url(img/vt-menu.jpg); */
     display: flex;
     flex-direction: column;
     background: url('../img/background.jpg') no-repeat center center fixed;
     background-size: cover;
     /* opacity: 0.3; */

 }

 .digit-box {
     width: 50px;
     height: 50px;
     font-size: 24px;
     text-align: center;
     line-height: 50px;
     border: 1px solid #ced4da;
     border-radius: 0.25rem;
     margin: 0 5px;
     display: inline-block;
 }


 .main-wrapper {
     flex: 1;
     display: flex;
     flex-direction: column;
 }

 .auth-wrapper {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 2rem;
 }

 .auth-card {
     display: flex;
     width: 40%;
     max-width: 1000px;
     background: #fffffff1;
     border-radius: 16px;
     box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     animation: slideUp 0.4s ease-in-out;
     flex-direction: row;
 }

 .auth-left,
 .auth-right {
     padding: 2rem;

     /* display: flex; */
     flex-direction: column;
     justify-content: center;
     flex: 1;
     background: url(../img/mybg.png);

 }

 .auth-left {
     background: url(../img/violate.jpg);
     /* background: #474544; */
     color: white;
     align-items: center;
     text-align: center;
     flex: 1.4;
 }

 .auth-left img {
     max-width: 60%;
     margin-bottom: 1.5rem;
 }

 .auth-left h1 {
     font-size: 1.7rem;
     font-weight: bold;
     margin-bottom: 1rem;
     white-space: nowrap;
 }

 .auth-left p {
     font-size: 1rem;
     margin-top: 1.2rem;
     line-height: 1.7;
     opacity: 0.95;
     font-weight: 400;
     color: #f1f1f1;
     max-width: 95%;
     text-align: justify;
     text-justify: inter-word;
     animation: fadeIn 1s ease-in;
 }

 .auth-right h3 {
     font-size: 2rem;
     font-weight: 600;
     margin-bottom: 2rem;
     color: #333;
     text-align: center;
 }

 .auth-right p {
     font-size: 0.95rem;
     color: #666;
     text-align: center;
 }

 .form-control {
     height: 48px;
     font-size: 1rem;
 }

 .btn-block {
     padding: 0.8rem;
     font-size: 1.1rem;
 }

 .footer-note {
     font-size: 0.85rem;
     color: #888;
     text-align: center;
     padding: 1.2rem 0;
     background-color: transparent;
 }

 .footer-note a {
     color: #888;
     text-decoration: none;
 }

 /* Responsive Styles */
 @media (max-width: 768px) {
     .auth-card {
         flex-direction: column;
         box-shadow: none;
         width: 100%;
     }

     .auth-left,
     .auth-right {
         padding: 1.5rem;
         text-align: center;
         flex: unset;
     }

     .auth-left h1 {
         font-size: 1.4rem;
         margin-bottom: 0.8rem;
         white-space: normal;
     }

     .auth-left img {
         max-width: 80%;
     }

     .auth-left p {
         font-size: 0.95rem;
         line-height: 1.6;
         margin-top: 0.5rem;
     }

     .auth-right h3 {
         font-size: 1.5rem;
         margin-bottom: 1.5rem;
     }

     .form-control {
         height: 44px;
         font-size: 0.95rem;
     }

     .btn-block {
         padding: 0.6rem;
         font-size: 1rem;
     }

     .footer-note {
         font-size: 0.75rem;
         padding: 1rem 0;
     }


 }

 /* Animations */
 @keyframes slideUp {
     from {
         transform: translateY(30px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }