Become a professional in either field

<section class="mb-9 position-relative" style="background-image:url(assets/images/bg/07.jpg); background-position: center left; background-size: cover;">
	<!-- Background dark overlay -->
	<div class="bg-overlay bg-blue opacity-9"></div>
	<div class="container z-index-9 position-relative">
		<div class="row g-4 justify-content-between align-items-center">
			<!-- Content -->
			<div class="col-lg-6">
				<h1 class="text-white">Become a professional in either field</h1>
				<p class="text-white mb-3">Man children rejoiced yet uncommonly his ten who. Yet uncommonly his ten who diminution astonished. Yet uncommonly his ten who diminution astonished.</p>
				<a href="#" class="btn btn-white mb-0">Explore our courses<i class="bi bi-arrow-right ms-2"></i></a>
			</div>

			<!-- Form -->
			<div class="col-lg-6 col-xl-5 mb-n9">
				<div class="card card-body shadow p-4 p-sm-5">
					<!-- Title -->
					<h2 class="mb-0 h3">Welcome back</h2>
					<p class="mb-0">New here?<a href="#"> Create an account</a></p>
					<!-- Form START -->
					<form class="mt-3 mt-sm-4 text-start">
						<!-- Email -->
						<div class="mb-3">
							<label class="form-label">Enter email id</label>
							<input type="email" class="form-control">
						</div>
						<!-- Password -->
						<div class="mb-3">
							<label class="form-label">Enter password</label>
							<input class="form-control" type="password">
						</div>
						<!-- Remember me -->
						<div class="mb-3 d-sm-flex justify-content-between">
							<div>
								<input type="checkbox" class="form-check-input" id="rememberCheck">
								<label class="form-check-label" for="rememberCheck">Remember me?</label>
							</div>
							<a href="#" class="text-primary-hover text-muted">Forgot password?</a>
						</div>
						<!-- Button -->
						<div class="d-grid"><button type="submit" class="btn btn-dark mb-0">Login</button></div>

						<!-- Divider -->
						<div class="position-relative my-4">
							<hr>
							<p class="small position-absolute top-50 start-50 translate-middle bg-body px-2">Or sign in with</p>
						</div>

						<div class="row g-3">
							<div class="col-sm-6 d-grid">
								<a href="#" class="btn btn-outline-light mb-0"><i class="fab fa-fw fa-google text-google-icon me-2"></i>Google</a>
							</div>

							<div class="col-sm-6 d-grid">
								<a href="#" class="btn btn-outline-light mb-0"><i class="fab fa-fw fa-facebook-f text-facebook me-2"></i>Facebook</a>
							</div>
						</div>
					</form>
					<!-- Form END -->
				</div>
			</div>

		</div> <!-- Row END -->
	</div>
	</section>