body, html {
				margin: 0;
				padding: 0;
				font-family: 'Athiti', sans-serif;
				background-color: #f0f0f0;
				height: 100%;
				width: 100%;
			}

			.logincontainer {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				width: 100%;
				padding: 0;
			}

			.loginrow {
				display: flex;
				width: 100%;
				height: 100%; /* Full screen height */
				background-color: #2c3e50;
				border-radius: 0; /* Remove border radius to fill the screen fully */
				overflow: hidden;
			}

			.lgn_left {
				flex: 1;
				padding: 40px;
				text-align: center;
				background-color: #3C4F4F;
				color: #ffffff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.lgn_left img {
				width: 65%;
				max-width: 300px;
			}

			.lgn_right {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #ecf0f1;
				padding: 40px;
			}

			.rect {
				width: 100%;
				max-width: 400px;
				background-color: white;
				padding: 20px;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
				border-radius: 8px;
				text-align:center;
			}

			.form-4 {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.form-4 h1 {
				margin-bottom: 20px;
				color: #34495e;
			}

			.form-4 input[type="text"],
			.form-4 input[type="password"] {
				width: 100%;
				padding: 10px;
				margin: 10px 0;
				border-radius: 4px;
				border: 1px solid #bdc3c7;
				font-size: 16px;
			}

			.form-4 input[type="submit"] {
				width: 100%;
				padding: 10px;
				background-color: #3498db;
				color: white;
				border: none;
				border-radius: 4px;
				cursor: pointer;
				font-size: 16px;
			}

			.form-4 input[type="submit"]:hover {
				background-color: #2980b9;
			}

			/* Media Queries for responsiveness */
			@media screen and (max-width: 768px) {
				
				.logincontainer {
				
				height: 90vh;
				
			}
				
				.loginrow {
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
				
				.lgn_left p {
					display:none;
				}

				.lgn_left, .lgn_right {
					width: 100%;
					padding: 5px;
				}

				.lgn_left img {
					width: 60%;
					margin-top: 5px;
				}

				.rect {
					max-width: 90%; /* Reduce max-width to fit smaller screens */
					padding: 20px;
				}
			}

			@media screen and (max-width: 480px) {
				.lgn_left p {
					font-size: 14px;
				}

				.form-4 input[type="text"],
				.form-4 input[type="password"],
				.form-4 input[type="submit"] {
					font-size: 14px;
				}

				.rect {
					max-width: 90%;
					padding: 20px;
				}
			}