body {
	  overflow: hidden;
	  height: 100vh;
	  margin: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-family: 'Arial', sans-serif;
	  background-color: #180550; /* fallback solid color */
	  position: relative;
	}
	
	/* Radiating, blurred gradient layer */
	body::before {
	  content: "";
	  position: absolute;
	  top: -50%;
	  left: -50%;
	  width: 200%;
	  height: 200%;
	  background:radial-gradient(circle at 30% 30%, #5d0053, #2c001e, #0a0028, #50001b, #51233f, #111497);   /* radial-gradient(circle at 30% 30%, #5c0072, #2c001e, #0a0028, #97113e) */
	  background-size: 200% 200%;
	  filter: blur(120px);
	  opacity: 0.9;
	  animation: radiateGradient 6s ease-in-out infinite alternate;   
	  z-index: -1;
	}
	.form-label{
		font-weight:700;
	}
	/* Radiating animation */
	@keyframes radiateGradient {
	  0% {
	    background-position: 20% 20%;
	    filter: blur(120px) brightness(1);
	  }
	  50% {
	    background-position: 80% 80%;
	    filter: blur(130px) brightness(1.2);
	  }
	  100% {
	    background-position: 20% 20%;
	    filter: blur(120px) brightness(1);
	  }
	}
	
	.rainbow-1:hover{
	  background:#0078b9; 
	  color:#fff;
	  animation:slidebg 5s linear infinite;
	}

	.card0 {
		/* box-shadow: 0px 4px 8px 0px #757575; */ 
		border-radius: 0px;
	}

	.card2 {
		margin: 10px 40px;
	}

	.logo {
		/* width: 185px; */
		/*height: 62px;*/
		/* margin-top: 20px; */
		/* margin-left: 35px; */		
	    display: block;
	    margin: 0 auto;
	    width: 40%;
		}

	.image {
		width: 70%;
	    position: absolute;
	    bottom: 35%;
	    height:40%;
	    object-fit:cover;
	}

	.border-line {
		border-right: 1px solid #EEEEEE;
	}

	.line {
		height: 1px;
		width: 45%;
		background-color: #E0E0E0;
		margin-top: 10px;
	}

	.or {
		width: 10%;
		font-weight: bold;
	}

	.text-sm {
		font-size: 14px !important;
	}

	::placeholder {
		color: #BDBDBD;
		opacity: 1;
		font-weight: 300
	}

	:-ms-input-placeholder {
		color: #BDBDBD;
		font-weight: 300
	}

	::-ms-input-placeholder {
		color: #BDBDBD;
		font-weight: 300
	}

	input, textarea {
		padding: 10px 12px 10px 12px;
		border: 1px solid lightgrey;
		border-radius: 2px;
		margin-bottom: 5px;
		margin-top: 2px;
		width: 100%;
		box-sizing: border-box;
		color: #2C3E50;
		font-size: 14px;
		letter-spacing: 1px;
	}

	input:focus, textarea:focus {
		-moz-box-shadow: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		border: 1px solid #304FFE;
		outline-width: 0;
	}

	button:focus {
		-moz-box-shadow: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		outline-width: 0;
	}

	a {
		color: inherit;
		cursor: pointer;
	}

	.btn-blue {
		background-color: #00aeff;
		width: 100%; 
		color: #fff;
	}

	.btn-blue:hover {
		background-color: #0094d9;
		cursor: pointer;
	}

	.bg-blue {
		color: #fff;
		background-color: #ff6a9c;
	}

	@media screen and (max-width: 991px) {
		.logo {
			margin-left: 0px;
		}

		.image {
			width: 300px;
			height: 220px;
		}

		.border-line {
			border-right: none;
		}

		.card2 {
			border-top: 1px solid #EEEEEE !important;
			margin: 0px 15px;
		}
	 }
	
		.height {
		  height: calc(2.5em + 0.75rem + 2px);
		}	
        .glass{
        	background: rgba(255, 255, 255, 0.01);
			border-radius: 16px;
			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(4.3px);
			-webkit-backdrop-filter: blur(4.3px);
			border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .login-card {
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            display: flex;
            max-width: 900px;
            width: 100%; 
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .quote-overlay {
            position: absolute;
            bottom: 20%;
            left: 10%;
            color: #fff;
            font-style: italic;
            text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
        }

        .login-form {
            flex: 1;
            padding:1.6rem 3rem;
            background:#fff;
        }

        .login-form h2 {
            font-weight: bold;
            margin-bottom: 2rem;
            color: #764ba2;
        }

        .btn-primary {
            background: linear-gradient(90deg, #667eea, #764ba2);
            border: none;
        }

        .btn-primary:hover {
            opacity: 0.9;
        }

        .captcha-group {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .captcha-refresh {
            font-size: 1.5rem;
            cursor: pointer;
            color: #764ba2;
        }

        footer {
            position: fixed;
		    bottom: 0;
		    width: 100%;
		    text-align: center;
		    color: #ffffffa1;
		    padding-top: 1rem;
		    font-size: 0.9rem; 
        } 
        
         .shimmer {
		  color: #fff;
		  display: inline-block;
		  font-size: 50px;
		  position: relative;     
		  -webkit-mask: linear-gradient(-40deg, #000 48%, #0005, #000 52%) left/200% 100%;
		  background-repeat: no-repeat; 
		  animation: shimmer 6.2s linear infinite;
		  max-width: 200px;
		}
		
		@keyframes shimmer {
		  0% {
		    -webkit-mask-position: 300% 50%; /* starts fully off-screen right */
		  }
		  100% {
		    -webkit-mask-position: -75% 0; /* ends fully off-screen left */ 
		  }
		}
 
	 .login-img{
	 	 width: 100%;
	     height: 100%;
	     max-width: 400px;
	     position:relative;
	     box-shadow:2px 1px 20px 6px rgb(128 128 128);
	 }
	 
	 .milky-way{
	 	font-weight: bold;
	 	letter-spacing: 1px;
	    font-size: 11px;
	    padding:0;
	    color:#e14d2c;
	    margin-top:-8px;
	    text-align:center;
	    font-family: monospace;
	 }
	 
	 /* Make login card responsive for mobiles */
	@media (max-width: 768px) {
    .login-card {
        flex-direction: column;    /* Stack image & form */
        max-width: 95%;
        height: auto;
    }

    .login-img {
        max-width: 100%;
        height: auto;
        box-shadow: none; /* remove heavy shadow on mobile */
    }

    .login-form {
        padding: 1.5rem 1.5rem !important;
    }

    .login-card > div:first-child {
        width: 100% !important;
        display: flex;
        justify-content: center;
    }

    #milkyLogo {
        width: 55% !important;  /* Reduce size of logo */
        margin: 0 auto;
    }

    .milky-way {
        font-size: 12px !important;
        margin-top: -6px !important;
    }
    
    .login-img {
        display: none !important;
    }

    /* Optional: remove the empty container space */
    .login-card > div:first-child {
        display: none !important;
    }
    
    html, body {
        overflow: hidden !important;   /* Stop scrolling */
        height: 100vh !important;      /* Lock height */
    }

    .login-card {
        max-height: 100vh !important;
        overflow: hidden !important;
    }

    .login-form {
        padding: 1.5rem !important;    /* reduce padding */
    }

    /* Hide left image */
    .login-card > div:first-child,
    .login-img {
        display: none !important;
    }
   }

	/* Very small devices */
	@media (max-width: 480px) {
	    .login-form {
	        padding: 1rem 1rem !important;
	    }
	
	    input, select {
	        font-size: 13px;
	    }
	
	    button.btn-primary {
	        font-size: 14px;
	        padding: 0.6rem;
	    }
	
	    #milkyLogo {
	        width: 60% !important;
	    }
	
	    .shimmer {
	        font-size: 35px !important;
	    }
	}