body {
     font-family: 'Dosis', sans-serif;
     font-size: 14px;
     background: #f8f9fa;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1rem;
     overflow-x: hidden;
 }

 /* Background Animation */
 body::before {
     content: '';
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background:
         radial-gradient(circle at 20% 80%, rgba(30, 64, 175, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(30, 64, 175, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 40% 40%, rgba(30, 64, 175, 0.05) 0%, transparent 50%);
     animation: backgroundFloat 20s ease-in-out infinite;
     z-index: -1;
 }

 @keyframes backgroundFloat {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
         opacity: 0.5;
     }

     33% {
         transform: translateY(-10px) rotate(1deg);
         opacity: 0.7;
     }

     66% {
         transform: translateY(10px) rotate(-1deg);
         opacity: 0.6;
     }
 }

 .container {
     max-width: 100%;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
 }

 .login-container {
     background: white;
     border-radius: 1rem;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     width: 100%;
     max-width: 720px;
     animation: slideUp 0.8s ease-out;
 }

 @keyframes slideUp {
     from {
         opacity: 0;
         transform: translateY(50px);
     }

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

 .login-left {
     background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
     color: white;
     padding: 2rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     position: relative;
     overflow: hidden;
 }

 .login-left::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
     animation: shimmer 3s ease-in-out infinite;
 }

 @keyframes shimmer {
     0% {
         transform: translateX(-100%) translateY(-100%) rotate(45deg);
     }

     100% {
         transform: translateX(100%) translateY(100%) rotate(45deg);
     }
 }

 .login-right {
     padding: 2rem;
     animation: fadeInRight 1s ease-out 0.3s both;
 }

 @keyframes fadeInRight {
     from {
         opacity: 0;
         transform: translateX(30px);
     }

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

 .form-control {
     border: 2px solid #e9ecef;
     border-radius: 0.5rem;
     padding: 0.75rem 1rem;
     transition: all 0.3s ease;
     font-size: 14px;
     animation: fadeInUp 0.6s ease-out 0.5s both;
 }

 .form-control:focus {
     border-color: #1e40af;
     box-shadow: 0 0 0 0.2rem rgba(30, 64, 175, 0.25);
     animation: pulse 0.3s ease-in-out;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

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

 @keyframes pulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.02);
     }

     100% {
         transform: scale(1);
     }
 }

 .btn-primary {
     background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
     border: none;
     border-radius: 0.5rem;
     padding: 0.75rem 2rem;
     font-weight: 600;
     transition: all 0.3s ease;
     font-size: 14px;
     position: relative;
     overflow: hidden;
     animation: fadeInUp 0.6s ease-out 0.7s both;
 }

 .btn-primary::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.5s;
 }

 .btn-primary:hover::before {
     left: 100%;
 }

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(30, 64, 175, 0.3);
 }

 .input-group-text {
     background: transparent;
     border: 2px solid #e9ecef;
     border-right: none;
     color: #6c757d;
     font-size: 14px;
     transition: all 0.3s ease;
     animation: fadeInUp 0.6s ease-out 0.6s both;
 }

 .input-group .form-control {
     border-left: none;
 }

 .input-group:focus-within .input-group-text {
     border-color: #1e40af;
     color: #1e40af;
     transform: scale(1.05);
 }

 .alert {
     border-radius: 0.5rem;
     border: none;
     font-size: 14px;
     animation: slideInLeft 0.5s ease-out;
 }

 @keyframes slideInLeft {
     from {
         opacity: 0;
         transform: translateX(-100%);
     }

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

 .form-label {
     font-size: 14px;
     font-weight: 500;
     animation: fadeInUp 0.6s ease-out 0.4s both;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-weight: 600;
     animation: fadeInUp 0.6s ease-out 0.2s both;
 }

 .small {
     font-size: 12px;
 }

 p {
     font-size: 14px;
     animation: fadeInUp 0.6s ease-out 0.3s both;
 }

 /* Icon Animation */
 .fa-shield-alt {
     animation: float 3s ease-in-out infinite;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 /* Form check animation */
 .form-check {
     animation: fadeInUp 0.6s ease-out 0.8s both;
 }

 .form-check-input {
     transition: all 0.3s ease;
 }

 .form-check-input:checked {
     animation: bounce 0.6s ease-out;
 }

 @keyframes bounce {

     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translateY(0);
     }

     40% {
         transform: translateY(-5px);
     }

     60% {
         transform: translateY(-3px);
     }
 }

 /* Link animations */
 a {
     transition: all 0.3s ease;
 }

 a:hover {
     transform: translateX(5px);
 }

 /* Floating particles */
 .particle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: rgba(30, 64, 175, 0.3);
     border-radius: 50%;
     pointer-events: none;
 }

 .particle:nth-child(1) {
     top: 20%;
     left: 10%;
     animation: floatParticle 8s ease-in-out infinite;
 }

 .particle:nth-child(2) {
     top: 60%;
     left: 80%;
     animation: floatParticle 10s ease-in-out infinite reverse;
 }

 .particle:nth-child(3) {
     top: 40%;
     left: 60%;
     animation: floatParticle 12s ease-in-out infinite;
 }

 .particle:nth-child(4) {
     top: 80%;
     left: 20%;
     animation: floatParticle 9s ease-in-out infinite reverse;
 }

 .particle:nth-child(5) {
     top: 30%;
     left: 90%;
     animation: floatParticle 11s ease-in-out infinite;
 }

 @keyframes floatParticle {

     0%,
     100% {
         transform: translateY(0px) translateX(0px);
         opacity: 0.3;
     }

     25% {
         transform: translateY(-20px) translateX(10px);
         opacity: 0.6;
     }

     50% {
         transform: translateY(-10px) translateX(-10px);
         opacity: 0.4;
     }

     75% {
         transform: translateY(-30px) translateX(5px);
         opacity: 0.7;
     }
 }

 /* Loading animation for button */
 .btn-loading {
     position: relative;
     color: transparent;
 }

 .btn-loading::after {
     content: '';
     position: absolute;
     width: 16px;
     height: 16px;
     top: 50%;
     left: 50%;
     margin-left: -8px;
     margin-top: -8px;
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     border-top-color: white;
     animation: spin 1s ease-in-out infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }