body {
                 font-family: 'Nunito', sans-serif;
                 /* background: linear-gradient(135deg, #f4f1e8, #dad8c8, #eae8de); */
               }
           
               .card {
                 border: none;
                 border-radius: 1.5rem;
                 overflow: hidden;
                 transition: all 0.3s ease-in-out;
               }
           
               .card:hover {
                 transform: translateY(-4px);
                 box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
               }
           
               .input-group-text {
                 border-radius: 0.75rem 0 0 0.75rem;
                 background: #f4f1e8;
                 border: none;
                 font-size: 1.1rem;
                 color: #504c35;
               }
           
               .form-control {
                 border-radius: 0 0.75rem 0.75rem 0;
                 padding: 0.85rem 1rem;
                 font-size: 1rem;
                 border: none;
                 /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); */
                 transition: all 0.3s ease-in-out;
               }
           
               .form-control:focus {
                 box-shadow: 0 0 0 0.25rem rgba(80, 76, 53, 0.3);
               }
           
               .btn-login {
                 /* background: linear-gradient(135deg, #504c35, #333125); */
                 background-color: #dad8c8;
                 margin: 5% 30%; 
           
                 color: #333125;
                 font-weight: 600;
                 border-radius: 0.75rem;
                 padding:8px 25px ;
                 font-size: 1.05rem;
                 border: none;
                 /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); */
                 transition: all 0.3s ease-in-out;
               }
           
               .btn-login:hover {
                         border: 1px solid #dad8c8;
                   background-color: transparent;
                    color: #504e4b;
                 /* transform: translateY(-2px) scale(1.02); */
                 /* box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); */
               }
           
               .logo-side {
                 background: #f4f1e8;
                 display: flex;
                 align-items: center;
                 justify-content: center;
               }
           
               .logo-side img {
                 width: 70%;
                 max-width: 240px;
                 filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.15));
               }