:root {
			--blue: #0d6efd;
			--nav-bg: rgba(0, 48, 110, 0.85);
			--text-dark: #052032;
			--bg-blue: #00306e;
		}

		html,
		body {
			margin: 0;
			height: 100%;
			font-family: 'Inter', sans-serif;
			overflow: hidden;
			background: linear-gradient(to bottom right, rgba(0, 48, 110, 0.95), rgba(0, 0, 0, 0.35));
		}

		/* Small spinner bottom-right (no text) */
		#spinner.show {
			position: fixed;
			right: 16px;
			bottom: 16px;
			z-index: 3000;
			background: rgba(255, 255, 255, 0.90);
			border: 1px solid rgba(13, 110, 253, 0.18);
			border-radius: 999px;
			padding: .35rem .55rem;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
			pointer-events: none;
		}

		#spinner .spinner-grow {
			width: .9rem;
			height: .9rem;
		}

		.hero {
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;

			background-color: var(--bg-blue);
			background-image:
				linear-gradient(to bottom right, rgba(0, 48, 110, 0.55), rgba(0, 0, 0, 0.55)),
				url('/new/assets/img/carousel-11.png');
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;

			position: relative;
			color: #fff;
			text-align: center;
			overflow: hidden;
		}

		/* Portal name placed lower */
		.navbar {
			position: absolute;
			top: 54px;
			left: 24px;
			width: fit-content;
			background: var(--nav-bg);
			border-radius: 14px;
			padding: .55rem 1rem;
			z-index: 10;
			border: 1px solid rgba(255, 255, 255, 0.14);
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
		}

		.navbar-brand {
			color: #fff !important;
			font-weight: 900;
			letter-spacing: .2px;
			display: flex;
			align-items: center;
			gap: .55rem;
			margin: 0;
			text-decoration: none;
		}

		.brand-badge {
			width: 34px;
			height: 34px;
			border-radius: 12px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.14);
			border: 1px solid rgba(255, 255, 255, 0.18);
		}

		.cente-badge {
			display: inline-flex;
			align-items: center;
			gap: .35rem;
			background: #ffc107;
			color: #052032;
			padding: .32rem .7rem;
			border-radius: 999px;
			font-weight: 900;
			font-size: .78rem;
			letter-spacing: .04em;
			width: fit-content;
			margin: 0 auto .6rem auto;
		}

		.cente-badge b {
			color: #fff;
			background: #0d6efd;
			padding: .12rem .42rem;
			border-radius: 7px;
			font-weight: 900;
		}

		.slide-card {
			background: rgba(255, 255, 255, 0.09);
			border: 1px solid rgba(255, 255, 255, 0.14);
			padding: 1.45rem;
			border-radius: 22px;
			color: #fff;
			max-width: 500px;
			min-width: 500px;
			margin: 0 auto;
			height: 340px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28);
		}

		.slide-title {
			font-size: 1.65rem;
			font-weight: 800;
			margin-bottom: .35rem;
		}

		.slide-subtitle {
			font-size: .98rem;
			margin: .25rem 0 .9rem 0;
			color: rgba(232, 236, 248, 0.95);
		}

		.slide-links {
			display: flex;
			justify-content: center;
			gap: .7rem;
			flex-wrap: wrap;
		}

		.slide-link {
			color: rgba(255, 255, 255, 0.92);
			text-decoration: none;
			cursor: pointer;
			font-size: .92rem;
			padding: .22rem .5rem;
			border-radius: 10px;
			border: 1px solid rgba(255, 255, 255, 0.12);
			background: rgba(0, 0, 0, 0.12);
			display: inline-flex;
			align-items: center;
			gap: .35rem;
		}

		.slide-link:hover {
			background: rgba(255, 255, 255, 0.12);
			color: #fff;
		}

		/* Jobs count badge (replaces repetitive View Jobs link) */
		.jobs-count {
			cursor: default;
			user-select: none;
		}

		.jobs-count b {
			background: rgba(13, 110, 253, 0.95);
			color: #fff;
			padding: .1rem .45rem;
			border-radius: 8px;
			font-weight: 900;
			margin-left: .25rem;
		}

		.overlay {
			position: fixed;
			left: 50%;
			top: -120%;
			transform: translateX(-50%);
			width: 92%;
			max-width: 950px;
			background: #fff;
			border-radius: 14px;
			padding: 2rem 2rem 2.4rem;
			z-index: 4000;
			box-shadow: 0 8px 35px rgba(0, 0, 0, 0.25);
			transition: top .45s cubic-bezier(.2, .9, .3, 1);
			overflow-y: auto;
			max-height: 78vh;
		}

		.overlay.active {
			top: 12%;
		}

		.overlay h3 {
			color: var(--blue);
			font-weight: 700;
			margin-bottom: .75rem;
		}

		.overlay .close-btn {
			position: absolute;
			right: 20px;
			top: 14px;
			font-size: 1.5rem;
			cursor: pointer;
			color: #666;
		}



		footer.site-footer {
			position: absolute;
			bottom: 15px;
			left: 50%;
			transform: translateX(-50%);
			background: var(--blue);
			padding: .55rem 1.25rem;
			border-radius: 999px;
			color: #fff;
			font-size: .92rem;
			z-index: 10;
			box-shadow: 0 6px 18px rgba(13, 110, 253, 0.2);
			max-width: 92%;
			text-align: center;
		}

		/* Job list template */
		.job-card {
			border: 1px solid #e4e9f2;
			border-radius: 12px;
			padding: .95rem 1rem;
			margin-bottom: .85rem;
			background: #f9fbff;
			color: #052032;
		}

		.job-head {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: .75rem;
			flex-wrap: wrap;
		}

		.job-card h5 {
			font-weight: 900;
			margin: 0 0 .35rem 0;
			font-size: 1.02rem;
		}

		.job-pill {
			display: inline-flex;
			align-items: center;
			gap: .35rem;
			padding: .22rem .6rem;
			border-radius: 999px;
			background: #0d6efd;
			color: #fff;
			font-weight: 800;
			font-size: .78rem;
			white-space: nowrap;
		}

		.job-meta {
			font-size: .84rem;
			color: #555;
			display: flex;
			flex-wrap: wrap;
			gap: .9rem;
			margin: .2rem 0 .55rem 0;
		}

		.job-desc {
			font-size: .94rem;
			margin: 0 0 .75rem 0;
			color: #111827;
		}

		.job-actions {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: .75rem;
			flex-wrap: wrap;
		}

		.job-actions .btn {
			border-radius: 12px;
		}

		/* ✅ Jobs search bar */
		.job-search-wrap {
			position: sticky;
			top: 0;
			z-index: 2;
			background: #fff;
			padding: .25rem 0 .9rem 0;
		}

		.job-search {
			display: flex;
			gap: .6rem;
			align-items: center;
			flex-wrap: wrap;
		}

		.job-search .form-control {
			border-radius: 12px;
		}

		.job-search .btn {
			border-radius: 12px;
			white-space: nowrap;
		}

		.job-search-hint {
			font-size: .86rem;
			color: #6b7280;
			margin-top: .45rem;
		}

		.job-empty {
			display: none;
			border: 1px dashed #cbd5e1;
			border-radius: 12px;
			padding: 1rem;
			background: #f8fafc;
			color: #0f172a;
		}

		/* OTP (kept intact) */
		.otp-box {
			width: 50px;
			height: 55px;
			font-size: 24px;
			font-weight: bold;
			text-align: center;
			border: 2px solid #ccc;
			border-radius: 12px;
		}

		.otp-box:focus {
			border-color: #0d6efd;
			box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .18);
		}

		/* jquery-confirm internal forms */
		.jc-form .form-group {
			margin-bottom: 0.9rem;
		}

		.jc-form label {
			font-weight: 600;
			font-size: 0.95rem;
		}

		.jc-form .errorDiv,
		.jc-form .errorDiv2 {
			margin-top: 0.6rem;
			color: #d9534f;
			font-size: 0.9rem;
		}

		#overlay-jobs {
			width: 96% !important;
			max-width: 1400px !important;
			/* was 950px */
		}

		/* Optional: give it a bit more height room */
		#overlay-jobs.active {
			top: 8%;
		}

		.req-row {
			display: flex;
			gap: .9rem;
			align-items: flex-start;
		}

		.req-details {
			flex: 1 1 auto;
			/* takes remaining space */
			min-width: 260px;
		}

		.req-actions {
			flex: 0 0 170px;
			/* fixed column on the right */
			display: flex;
			flex-direction: column;
			gap: .5rem;
			align-items: stretch;
		}

		.req-desc {
			margin-top: .35rem;
			line-height: 1.35;
		}

		/* small screens: stack, actions become full width */
		@media (max-width: 576px) {
			.req-row {
				flex-direction: column;
			}

			.req-actions {
				width: 100%;
				flex-direction: row;
			}

			.req-actions .btn,
			.req-actions label.btn {
				flex: 1;
			}
		}

		/* Top-right login button – uses existing login flow */
		.top-right-login {
			position: fixed;
			top: 24px;
			right: 28px;
			z-index: 15;
			/*background: rgba(0, 48, 110, 0.85);*/
			/*border: 1px solid rgba(255, 255, 255, 0.18);*/
			/*backdrop-filter: blur(10px);*/
			-webkit-backdrop-filter: blur(10px);
			border-radius: 999px;
			padding: .4rem .9rem;
			/*box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);*/
		}

		.top-right-login .btn {
			border-radius: 999px;
			font-weight: 600;
			padding: .35rem .9rem;
		}

		/* Phones */
		@media (max-width: 576px) {

			/* Allow the page to behave nicely on small screens */
			html,
			body {
				overflow-x: hidden !important;
				overflow-y: auto !important;
				/* override your overflow:hidden */
				height: auto !important;
			}

			/* Hero must create space for fixed elements (top bar + footer) */
			.hero {
				height: auto !important;
				min-height: 100vh;
				align-items: flex-start;
				justify-content: center;
				padding:
					92px
					/* space for navbar/top login */
					12px calc(90px + env(safe-area-inset-bottom))
					/* space for footer */
					12px;
			}

			/* Navbar should not overflow */
			.navbar {
				top: 14px;
				left: 12px;
				right: 12px;
				width: auto;
				max-width: calc(100% - 24px);
				padding: .5rem .85rem;
			}

			/* Top-right login should not collide with content */
			.top-right-login {
				top: 14px;
				right: 12px;
				padding: .25rem .6rem;
			}

			/* ✅ BIG FIX: remove the hard min-width that breaks phones */
			.slide-card {
				min-width: 0 !important;
				width: 100%;
				max-width: 520px;
				height: auto !important;
				/* let it grow naturally */
				padding: 1.1rem;
				border-radius: 18px;
			}

			/* Buttons wrap cleanly (ms-2 breaks when wrapping) */
			.slide-card .mt-2 .btn {
				width: 100%;
			}

			.slide-card .mt-2 .ms-2 {
				margin-left: 0 !important;
				margin-top: .55rem;
			}

			/* Footer: keep it visible but don’t cover carousel content */
			footer.site-footer {
				position: fixed;
				/* instead of absolute inside hero */
				bottom: 10px;
				left: 50%;
				transform: translateX(-50%);
				z-index: 12;
				font-size: .82rem;
				padding: .45rem .9rem;
				max-width: calc(100% - 24px);
			}

			/* Carousel controls a bit slimmer on phones */
			.carousel-control-prev,
			.carousel-control-next {
				width: 12%;
			}
		}

		/* Very small phones */
		@media (max-width: 420px) {
			.slide-link {
				font-size: .86rem;
				padding: .18rem .45rem;
			}

			.cente-badge {
				font-size: .74rem;
			}
		}