* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		body {
			font-family: 'Poppins', sans-serif;
			overflow: hidden;
			background: #fff;
		}

		.wave {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 100%;
			z-index: -1;
		}

		.container {
			width: 100vw;
			height: 100vh;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 7rem;
			padding: 0 2rem;
		}

		.img {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.login-content {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			text-align: center;
		}

		.img img {
			width: 500px;
		}

		form {
			width: 360px;
		}

		.login-content img {
			height: 100px;
		}

		.login-content .input-div {
			position: relative;
			display: grid;
			grid-template-columns: 7% 93%;
			margin: 25px 0;
			padding: 5px 0;
			border-bottom: 2px solid #d9d9d9;
		}

		.i {
			color: #d9d9d9;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.i i {
			transition: .3s;
		}

		.input-div>div {
			position: relative;
			height: 45px;
		}

		.input-div>div>h5 {
			position: absolute;
			left: 10px;
			top: 50%;
			transform: translateY(-50%);
			color: #999;
			font-size: 18px;
			transition: .3s;
		}

		.input-div:before,
		.input-div:after {
			content: '';
			position: absolute;
			bottom: -2px;
			width: 0%;
			height: 2px;
			background-color: #38d39f;
			transition: .4s;
		}

		.input-div:before {
			right: 50%;
		}

		.input-div:after {
			left: 50%;
		}

		.input-div.focus:before,
		.input-div.focus:after {
			width: 50%;
		}

		.input-div.focus>div>h5 {
			top: -5px;
			font-size: 15px;
		}

		.input-div.focus>.i>i {
			color: #38d39f;
		}

		.input-div>div>input {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			border: none;
			outline: none;
			background: none;
			padding: 0.5rem 0.7rem;
			font-size: 1.2rem;
			color: #555;
			font-family: 'poppins', sans-serif;
		}

		.btn {
			display: block;
			width: 90%;
			height: 50px;
			border-radius: 25px;
			outline: none;
			border: none;
			background-image: linear-gradient(to right, #32be8f, #0f1a16, #32be8f);
			background-size: 200%;
			font-size: 1.2rem;
			color: #fff;
			font-family: 'Poppins', sans-serif;
			text-transform: uppercase;
			margin: 1rem 0;
			cursor: pointer;
			transition: .5s;
		}

		.btn:hover {
			background-position: right;
		}

		/* =======  FOOTER BAR ======= */
		.footer-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 12px 40px;
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
			background: rgba(255, 255, 255, 0.15);
			border-top: 1px solid rgba(255, 255, 255, 0.3);
			color: #ff9000;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 0.95rem;
			letter-spacing: 0.5px;
			text-shadow: 0 0 5px rgba(56, 211, 159, 0.7);
			box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.2);
			z-index: 999;
		}

		.footer-bar b>a {
			color: #00aaf7;
			margin-left: 5px;
		}

		@media screen and (max-width: 900px) {
			.container {
				grid-template-columns: 1fr;
			}

			.img {
				display: none;
			}

			.wave {
				display: none;
			}

			.footer-bar {
				font-size: 0.85rem;
				padding: 10px 20px;
				text-align: center;
				justify-content: center;
			}
		}