/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Orbitron:900|Poppins:300,400,500,600,700&display=swap');
html {
	height: 100%!important
}

body {
	background: url(/images/body-bg.jpg) #e7faff no-repeat!important;
	font-family: 'Poppins', sans-serif!important;
	background-size: 65% 110%!important;
}

.poppins-light {
	font-family: 'Poppins', sans-serif;
	font-weight: 300
}

.poppins-regular {
	font-family: 'Poppins', sans-serif;
	font-weight: 400
}

.poppins-medium {
	font-family: 'Poppins', sans-serif;
	font-weight: 500
}

.poppins-semi-bold {
	font-family: 'Poppins', sans-serif;
	font-weight: 600
}

.poppins-bold {
	font-family: 'Poppins', sans-serif;
	font-weight: 700
}

.orbitron-black {
	font-family: 'Orbitron', sans-serif;
	font-weight: 700
}

.opensans-bold {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700
}

.color-white {
	color: #fff!important
}

.color-primary {
	color: #0f3d56!important
}

.color-black {
	color: #000!important
}

.login {
	letter-spacing: 3px;
	font-size: 50px;
	text-shadow: 2px 4px 3px #0000002b
}

/* Form fields – shared */
.login-field {
	position: relative;
	margin-bottom: 1.5rem;
}

.login-field-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	pointer-events: none;
	background: transparent !important;
	border: 0 !important;
}

/* Desktop PNG icons – beat Bootstrap .img-fluid height:auto */
.login-field-icon-img {
	height: 30px !important;
	width: 30px !important;
	max-width: 30px !important;
	max-height: 30px !important;
	object-fit: contain;
	left: 18px;
}

.login-eye-btn {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: transparent;
	z-index: 12;
	color: #7b7b7b;
	padding: 0;
	cursor: pointer;
}

input#email,
#password {
	padding: 16px 52px 16px 58px;
	border-radius: 40px;
	border-color: transparent!important;
	-webkit-box-shadow: -1px 3px 5px 0 rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -1px 3px 5px 0 rgba(0, 0, 0, 0.2);
	box-shadow: -1px 3px 5px 0 rgba(0, 0, 0, 0.2);
	height: auto;
}

/* Legacy absolute icon support (if any remain) */
img.img-fluid.position-absolue {
	background: transparent!important;
	border: 0;
	position: absolute;
	top: 4px;
	left: 21px
}

img.img-fluid.position-absolue.pass {
	background: transparent!important;
	border: 0!important;
	position: absolute!important;
	top: 85px!important;
	left: 21px!important
}

button.bg-gradiant {
	border-radius: 20px;
	padding: 9px 0;
	margin-top: 20px!important;
	background: url(/images/button-bg.png) no-repeat;
	background-size: cover;
	background-position: center;
	color: #fff!important;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700!important;
	text-transform: uppercase!important
}

p.opensans.text-center.my-3 {
	letter-spacing: 3px;
	font-family: 'Open Sans', sans-serif
}

canvas {
	display: block;
	vertical-align: bottom
}

.count-particles {
	background: #002;
	position: absolute;
	top: 48px;
	left: 0;
	width: 80px;
	color: #13e8e9;
	font-size: .8em;
	text-align: left;
	text-indent: 4px;
	line-height: 14px;
	padding-bottom: 2px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold
}

.js-count-particles {
	font-size: 1.1em
}

#stats,
.count-particles {
	-webkit-user-select: none;
	margin-top: 5px;
	margin-left: 5px
}

#stats {
	border-radius: 3px 3px 0 0;
	overflow: hidden
}

.count-particles {
	border-radius: 0 0 3px 3px
}

#particles-js {
	width: 100%;
	height: 100%;
	background-image: url('');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat
}

canvas.particles-js-canvas-el {
	position: absolute;
	width: 100%;
	top: 0
}

.container-fluid {
	position: relative;
	z-index: 99999999999!important
}

input#email:focus {
	background: #0f3d56 !important;
	color: #ffffff !important;
	border: 2px solid #ffffff !important;
}

input#password:focus {
	background: #0f3d56 !important;
	color: #ffffff !important;
	border: 2px solid #ffffff !important;
}

button.btn:hover {
	background: #dfc93c !important;
}

button.btn:focus {
	background: #dfc93c !important;
}

.focuslogin:focus {
	background: #0f3d56 !important;
	color: #ffffff !important;
	border: 2px solid #ffffff !important;
}

.login-tagline {
	display: none;
}

.error-control {
	display: block;
	color: #dc3545;
	margin-top: -0.75rem;
	margin-bottom: 0.75rem;
	font-size: 13px;
}

/* =========================================================
   MOBILE / TABLET – stacked layout (< 1200px)
   Desktop split layout only from xl (1200px+)
   ========================================================= */
@media (max-width: 1199.98px) {
	html,
	body {
		min-height: 100%;
		height: auto !important;
		background-color: #071828 !important;
	}

	body {
		/* shorthand !important fully replaces desktop body-bg.jpg split */
		background: #071828 linear-gradient(180deg, #0c2740 0%, #071828 45%, #05101c 100%) no-repeat fixed !important;
		background-size: cover !important;
		overflow-x: hidden;
	}

	#particles-js {
		min-height: 100vh;
		height: auto;
		overflow: visible;
		background-color: transparent;
	}

	canvas.particles-js-canvas-el {
		opacity: 0.45;
		pointer-events: none;
	}

	.container-fluid {
		padding-left: 0;
		padding-right: 0;
	}

	.login-page-row {
		margin: 0;
	}

	.login-form-col,
	.col-md-4.px-0 {
		background: transparent !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.login-form-container {
		max-width: 440px;
		margin: 0 auto;
		padding: 0;
	}

	.login-form-inner {
		margin-top: 1.25rem !important;
		padding-bottom: 0.5rem;
	}

	.login-logo-link {
		display: block;
	}

	.site-logo {
		max-width: 220px;
		width: 70%;
		margin-top: 1.5rem !important;
		/* outline dark logo parts so they stay readable on navy bg */
		filter:
			drop-shadow(0 0 1px rgba(255, 255, 255, 0.95))
			drop-shadow(0 1px 0 rgba(255, 255, 255, 0.85))
			drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.85))
			drop-shadow(1px 0 0 rgba(255, 255, 255, 0.85))
			drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.85));
	}

	.login-tagline {
		display: block !important;
		text-align: center;
		color: #ffffff;
		font-size: 11px;
		letter-spacing: 2.5px;
		text-transform: uppercase;
		margin: 10px 0 0;
		font-weight: 400;
		opacity: 0.95;
	}

	h1.login {
		color: #ffffff !important;
		font-size: clamp(32px, 9vw, 42px);
		letter-spacing: 4px;
		margin-top: 1.5rem !important;
		margin-bottom: 1.25rem;
		text-shadow: none;
		position: relative;
		padding-bottom: 12px;
	}

	h1.login::after {
		content: '';
		display: block;
		width: 48px;
		height: 4px;
		background: #dfc93c;
		border-radius: 2px;
		margin: 10px auto 0;
	}

	.login-form-wrap {
		padding-left: 8px;
		padding-right: 8px;
	}

	.login-form {
		background: rgba(8, 28, 48, 0.55);
		border: 1.5px solid rgba(64, 168, 230, 0.55);
		border-radius: 18px;
		padding: 22px 16px 20px;
		box-shadow: 0 0 24px rgba(30, 140, 220, 0.15);
	}

	.login-field {
		margin-bottom: 1rem;
	}

	.login-field:last-of-type {
		margin-bottom: 0.25rem;
	}

	.login-field-icon-fa {
		left: 18px;
		top: 50%;
		transform: translateY(-50%);
		color: #ffffff;
		font-size: 16px;
		opacity: 0.9;
		height: auto;
		width: auto;
		pointer-events: none;
	}

	input#email,
	#password {
		background: rgba(6, 22, 38, 0.85) !important;
		color: #ffffff !important;
		border: 1.5px solid rgba(70, 170, 230, 0.65) !important;
		border-radius: 14px !important;
		box-shadow: none !important;
		padding: 14px 48px 14px 52px !important;
		font-size: 14px;
		height: 52px;
	}

	input#email::placeholder,
	#password::placeholder {
		color: rgba(180, 210, 230, 0.7);
		opacity: 1;
	}

	input#email:focus,
	input#password:focus,
	.focuslogin:focus {
		background: rgba(10, 36, 58, 0.95) !important;
		color: #ffffff !important;
		border: 1.5px solid #4fc3f7 !important;
		box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.2) !important;
	}

	.login-eye-btn {
		right: 16px;
		color: #ffffff;
		font-size: 16px;
		opacity: 0.85;
	}

	.login-eye-btn:hover,
	.login-eye-btn:focus {
		opacity: 1;
		outline: none;
	}

	button.bg-gradiant,
	button.btn.mt-4.w-100.bg-gradiant {
		background: linear-gradient(90deg, #1565c0 0%, #0288d1 45%, #00bcd4 100%) !important;
		background-image: linear-gradient(90deg, #1565c0 0%, #0288d1 45%, #00bcd4 100%) !important;
		border: none !important;
		border-radius: 14px !important;
		padding: 14px 0 !important;
		margin-top: 1.25rem !important;
		font-size: 15px;
		letter-spacing: 1px;
		box-shadow: 0 6px 18px rgba(2, 136, 209, 0.35);
	}

	button.bg-gradiant:hover,
	button.btn:hover,
	button.btn:focus {
		background: linear-gradient(90deg, #0d47a1 0%, #0277bd 45%, #00acc1 100%) !important;
		background-image: linear-gradient(90deg, #0d47a1 0%, #0277bd 45%, #00acc1 100%) !important;
	}

	.login-divider {
		margin-top: 0.5rem;
	}

	.login-hr,
	hr.mt-5 {
		display: none;
	}

	.login-divider p.opensans,
	p.opensans.text-center.my-3 {
		color: #ffffff;
		letter-spacing: 1px;
		font-size: 12px;
		position: relative;
		margin: 1.5rem 0 0.5rem !important;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}

	.login-divider p.opensans::before,
	.login-divider p.opensans::after,
	p.opensans.text-center.my-3::before,
	p.opensans.text-center.my-3::after {
		content: '';
		flex: 1;
		height: 1px;
		background: rgba(120, 180, 220, 0.45);
		max-width: 70px;
	}

	.error-control {
		color: #ff8a80;
	}

	/* Mobile services grid */
	.login-mobile-services {
		padding: 8px 12px 24px;
		background: transparent;
	}

	.mobile-services-grid {
		max-width: 420px;
		margin: 0 auto;
	}

	.mobile-service-item {
		padding-left: 10px;
		padding-right: 10px;
	}

	.mobile-service-item img {
		width: 88px;
		height: 88px;
		object-fit: contain;
		border-radius: 50%;
		box-shadow: 0 0 0 3px rgba(64, 180, 240, 0.75), 0 0 18px rgba(30, 160, 230, 0.35);
		background: #fff;
	}

	.mobile-service-item p {
		font-size: 11px;
		letter-spacing: 0.5px;
		line-height: 1.3;
		margin-bottom: 0;
	}

	.mobile-service-last {
		/* center the 7th item in the 2-col grid */
		flex: 0 0 50%;
		max-width: 50%;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.mobile-vector {
		max-width: 200px;
		width: 55%;
		margin-top: 8px;
		filter: drop-shadow(0 0 12px rgba(64, 180, 240, 0.45));
	}
}

/* Extra-small phones */
@media (max-width: 374.98px) {
	.site-logo {
		max-width: 180px;
	}

	h1.login {
		font-size: 28px;
		letter-spacing: 2px;
	}

	.mobile-service-item img {
		width: 72px;
		height: 72px;
	}

	.mobile-service-item p {
		font-size: 10px;
	}

	.login-form {
		padding: 18px 12px 16px;
	}

	input#email,
	#password {
		height: 48px;
		font-size: 13px;
	}
}

/* Large phones */
@media (min-width: 480px) and (max-width: 767.98px) {
	.login-form-container {
		max-width: 480px;
	}

	.mobile-service-item img {
		width: 100px;
		height: 100px;
	}

	.mobile-service-item p {
		font-size: 12px;
	}

	.mobile-vector {
		max-width: 240px;
	}
}

/* Tablets (iPad etc.) – same stacked design, roomier spacing */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.login-form-col,
	.col-xl-4.px-0 {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.login-form-container {
		max-width: 520px;
		width: 100%;
	}

	.login-form-inner {
		margin-top: 0.5rem !important;
	}

	.site-logo {
		max-width: 240px;
		width: 50%;
		margin-top: 1rem !important;
	}

	.login-tagline {
		font-size: 13px;
		letter-spacing: 3px;
	}

	h1.login {
		font-size: 42px;
		margin-top: 1.25rem !important;
		margin-bottom: 1rem;
	}

	.login-form {
		padding: 24px 22px 22px;
		max-width: 100%;
		box-sizing: border-box;
	}

	.login-form-wrap {
		padding-left: 0;
		padding-right: 0;
		max-width: 100%;
	}

	input#email,
	#password {
		height: 54px;
		font-size: 15px;
		padding: 14px 52px 14px 56px !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	.login-field-icon-fa {
		left: 20px;
		font-size: 18px;
	}

	button.bg-gradiant,
	button.btn.mt-4.w-100.bg-gradiant {
		padding: 14px 0 !important;
		font-size: 16px;
	}

	.mobile-services-grid {
		max-width: 560px;
	}

	.mobile-service-item img {
		width: 100px;
		height: 100px;
	}

	.mobile-service-item p {
		font-size: 13px;
	}

	.mobile-vector {
		max-width: 240px;
		width: 40%;
	}
}