/* Site-specific overrides on top of the base template styles. */

/* Home hero: the template pushed the heading down with a 250px top padding
   (leftover from a different layout) — way too much empty space above it */
.hero-text h1 {
	padding-top: 40px;
}
.home_bg {
	height: auto;
	min-height: 520px;
	padding: 40px 0;
	display: flex;
	align-items: center;
	overflow: hidden;
}
/* The hero photo is absolutely positioned (bottom:0) and was rendering at
   its full natural size, which no longer fit once the section height went
   from a fixed 850px to auto — it overflowed down past the header and into
   the sections below. Cap it so it stays inside the hero. */
.hero-text-img {
	position: relative;
	bottom: auto;
	right: auto;
	display: flex;
	justify-content: flex-end;
}
.hero-text-img img {
	max-height: 460px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
@media only screen and (max-width: 960px) {
	.hero-text h1 { padding-top: 30px; }
	.home_bg { min-height: auto; padding: 30px 0; }
}
@media only screen and (max-width: 480px) {
	.hero-text h1 { padding-top: 24px; }
}

/* Numbered step tracker (an alternative to another row of cards) — circles
   connected by a line, used for "Our Recruitment Process" */
.step-tracker {
	display: flex;
	flex-direction: column;
	gap: 32px;
	position: relative;
}
.step-tracker::before {
	content: "";
	position: absolute;
	top: 26px;
	bottom: 26px;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: var(--border-color, #e0e3e9);
	z-index: 0;
}
.step-tracker-item {
	max-width: 420px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 1;
	padding: 0 12px;
}
.step-tracker-num {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--primary-color);
	color: #fff;
	font-weight: 700;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	box-shadow: 0 0 0 6px #fff;
}
.step-tracker-item:nth-child(even) .step-tracker-num {
	background: var(--secondary-color);
}
.step-tracker-item h3 {
	font-size: 17px;
	margin-bottom: 8px;
}
.step-tracker-item p {
	font-size: 13.5px;
	color: var(--text-muted, #6b7280);
}
@media only screen and (max-width: 767px) {
	.step-tracker { gap: 24px; }
	.step-tracker-item { max-width: 100%; }
}

/* "Our Recruitment Process" — cards variant: steps sit side by side in a
   row as individual cards, connected by a horizontal line, instead of the
   stacked vertical layout the base .step-tracker now uses. */
.step-tracker-cards {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0;
}
.step-tracker-cards::before {
	top: 26px;
	bottom: auto;
	left: 8%;
	right: 8%;
	width: auto;
	height: 2px;
	transform: none;
}
.step-tracker-cards .step-tracker-item {
	flex: 1 1 220px;
	max-width: 260px;
	margin: 0;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 16px rgba(23, 23, 36, 0.06);
	padding: 24px 16px;
}
@media only screen and (max-width: 767px) {
	.step-tracker-cards::before { display: none; }
	.step-tracker-cards { flex-direction: column; gap: 24px; }
	.step-tracker-cards .step-tracker-item { max-width: 100%; }
}

/* Zigzag variant (used by "The Hiring Steps") — steps alternate left/right
   of a center line. The number circle is absolutely positioned at the
   item's horizontal center so it always lands exactly on the line,
   regardless of how tall each row's text is. */
.step-tracker-zigzag .step-tracker-item {
	max-width: 100%;
	width: 100%;
	margin: 0;
	padding-right: calc(50% + 40px);
	text-align: right;
}
.step-tracker-zigzag .step-tracker-item:nth-child(even) {
	padding-right: 0;
	padding-left: calc(50% + 40px);
	text-align: left;
}
.step-tracker-zigzag .step-tracker-item .step-tracker-num {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}
.step-tracker-zigzag .step-tracker-item h3 {
	font-size: 22px;
	margin-bottom: 10px;
}
.step-tracker-zigzag .step-tracker-item p {
	font-size: 17px;
	line-height: 1.6;
}
@media only screen and (max-width: 767px) {
	.step-tracker-zigzag .step-tracker-item,
	.step-tracker-zigzag .step-tracker-item:nth-child(even) {
		max-width: 100%;
		text-align: center;
		padding-left: 0;
		padding-right: 0;
	}
	.step-tracker-zigzag .step-tracker-item .step-tracker-num {
		position: static;
		transform: none;
		margin: 0 auto 16px !important;
	}
	.step-tracker-zigzag .step-tracker-item h3 {
		margin-top: 0;
	}
}

/* Blog cards: equal height in a row, with "Read More" pinned to the
   bottom regardless of how long the title is */
.single_blog.h-100 {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.single_blog.h-100 .content_box {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.single_blog.h-100 .content_box h2 {
	min-height: 64px;
	margin-bottom: 0;
}
.single_blog.h-100 .content_box h2 a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 0;
}
.single_blog.h-100 .content_box {
	padding: 20px;
}
.single_blog.h-100 .content_box .btn_one {
	align-self: flex-start;
	margin-top: 10px;
	margin-bottom: 0;
}

/* Contact form wrapped in a proper card, matched in height to the map
   beside it */
.contact-card {
	background: #f7f8fb;
	border-radius: 14px;
	box-shadow: 0 2px 20px rgba(23, 23, 36, 0.06);
	padding: 30px;
	box-sizing: border-box;
}
.contact-card .contact {
	height: 100%;
}
/* Plain text links inside the contact/auth forms ("Login here", "Register
   here") — the template's global a:hover turns links white, which on this
   light card background made them disappear on hover */
.contact a:hover {
	color: var(--primary-color);
}
.map {
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 20px rgba(23, 23, 36, 0.06);
}

/* Normal, plain form inputs (the template's tinted 70px-tall inputs with
   square corners looked too "designed" for a simple contact form) */
.contact input,
.contact textarea,
.contact select {
	background: #fff;
	border: 1px solid #ced4da;
	border-radius: 6px;
	height: auto;
	padding: 10px 14px;
	font-size: 15px;
	margin-bottom: 18px;
}
.contact input:focus,
.contact textarea:focus,
.contact select:focus {
	background: #fff;
	border: 1px solid var(--primary-color);
	outline: 0;
}

.address_area.section-padding { padding-bottom: 0; }

/* Contact page form card: white instead of the shared .contact-card's
   light-gray fill, with a slightly stronger shadow so it reads as a
   clearly raised card. */
#contact .contact-card {
	background: #fff;
	box-shadow: 0 10px 34px rgba(23, 23, 36, .1);
}

/* 2026 refresh: icon-prefixed fields, softer corners/focus ring on the
   contact form, and card-style info tiles instead of flat pastel blocks. */
.contact input,
.contact textarea,
.contact select {
	border-radius: 8px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.contact input:focus,
.contact textarea:focus,
.contact select:focus {
	box-shadow: 0 0 0 3px rgba(24, 94, 208, .12);
}
/* Keep searchable Select2 controls the same height as regular form inputs. */
.contact .select2-container { width: 100% !important; }
.contact .select2-container .select2-selection--single {
	height: 46px;
	min-height: 46px;
	border: 1px solid #ced4da;
	border-radius: 8px;
	background: #fff;
}
.contact .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 44px;
	padding-left: 14px;
	padding-right: 34px;
	font-size: 15px;
}
.contact .select2-container .select2-selection--single .select2-selection__arrow {
	height: 44px;
	right: 7px;
}
.contact .select2-container--focus .select2-selection--single,
.contact .select2-container--open .select2-selection--single {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(24, 94, 208, .12);
}
.contact .btn_one {
	border-radius: 8px;
	padding: 11px 34px;
}

/* Shared authentication presentation: clean white cards, logo-led entry and
   the green accent taken from the brand mark (buttons remain primary blue). */
.auth-card {
	background: #fff !important;
	border: 1px solid #e7ecf3;
	box-shadow: 0 14px 38px rgba(25, 45, 78, .12);
}
.auth-card-brand { margin-bottom: 24px; }
.auth-card-brand img { width: 190px; max-width: 72%; height: 92px; object-fit: contain; }
.auth-card-brand p { color: #6b7280; font-size: 14px; margin: 7px auto 0; }
.registration-section-title {
	font-size: 17px;
	font-weight: 700;
	color: #222;
	border-bottom: 2px solid var(--secondary-color);
	padding-bottom: 9px;
	margin-bottom: 18px;
}
.registration-section-title i {
	width: 29px;
	height: 29px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 7px;
	border-radius: 8px;
	background: rgba(40, 167, 69, .12);
	color: var(--secondary-color);
	font-size: 14px;
}
.auth-card .form-group { margin-bottom:18px; }
.auth-card .form-group > input,
.auth-card .form-group > select,
.auth-card .form-group > textarea,
.auth-card .form-group > .select2-container { margin-bottom:0!important; }
.auth-card .contact .btn_one { display:flex; align-items:center; justify-content:center; width:100%; min-height:40px; padding:8px 16px; line-height:1.2; }
.ajax-field-error { display:block; margin:6px 0 0; font-size:12px; line-height:1.35; font-weight:600; }
.is-invalid { border-color:#dc3545!important; box-shadow:0 0 0 3px rgba(220,53,69,.1)!important; }
.select2-selection.is-invalid { border-color:#dc3545!important; box-shadow:0 0 0 3px rgba(220,53,69,.1)!important; }
select.is-invalid,
.select2-selection.is-invalid { background-image:none!important; }
.select2-selection__clear { display:none!important; }
.contact .otp-inline-control,
.contact .otp-resend-text { box-sizing:border-box; height:45px!important; min-height:45px!important; max-height:45px!important; }
.contact .otp-spacer-label { visibility:hidden; }
.contact .otp-resend-text { display:flex; align-items:center; justify-content:center; width:100%; padding:0 8px!important; margin:0!important; border:1px solid var(--primary-color)!important; border-radius:8px; background:var(--primary-color); color:#fff!important; line-height:1!important; white-space:nowrap; }
.contact .otp-resend-text:hover { border-color:var(--secondary-color)!important; background:var(--secondary-color); color:#fff!important; }
.otp-resend-text:disabled { opacity:.55; cursor:not-allowed; }
.ajax-spinner { width:15px; height:15px; display:inline-block; margin-right:7px; vertical-align:-2px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:ajaxSpin .65s linear infinite; }
.ajax-results-loading { opacity:.48; pointer-events:none; transition:opacity .2s ease; }
@keyframes ajaxSpin { to { transform:rotate(360deg); } }

/* Compact faceted filter card used on Jobs and Companies listings. */
.modern-filter-panel {
	padding: 26px 24px;
	overflow: visible;
}
.modern-filter-panel > h3 { font-size:21px!important; padding-bottom:18px; margin-bottom:0!important; border-bottom:1px solid #e4e8ef; }
.filter-sections { display:grid; gap:10px; padding-top:12px; }
.filter-section { border:1px solid #e4e8ef; border-radius:10px; padding:0 14px; background:#fff; overflow:hidden; }
.filter-section summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 0; cursor:pointer; color:#101828; font-size:16px; font-weight:700; }
.filter-section summary::-webkit-details-marker { display:none; }
.filter-section summary i { color:#91a4c8; font-size:12px; transition:transform .2s ease; }
.filter-section[open] summary i { transform:rotate(180deg); }
.filter-section-body { padding:2px 4px 12px 0; border-top:1px solid #eef1f5; max-height:310px; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#d3d9e4 transparent; }
.filter-section-body::-webkit-scrollbar { width:5px; }
.filter-section-body::-webkit-scrollbar-thumb { background:#d3d9e4; border-radius:10px; }
.filter-section-body .mb-3, .filter-section-body > .row, .filter-section-body > .form-check { margin-bottom:14px!important; }
.filter-section-body .select2-container { width:100%!important; }
.filter-checkbox-list { display:grid; gap:10px; padding:2px 0 8px; }
.filter-checkbox-option { display:flex!important; align-items:center; gap:10px; margin:0!important; color:#4d5874!important; font-size:14px!important; font-weight:500!important; cursor:pointer; }
.filter-checkbox-option input { width:20px; height:20px; flex:0 0 20px; margin:0; accent-color:var(--primary-color); }
.filter-extra-option { display:none!important; }
.filter-search-hidden { display:none!important; }
.filter-more-button { display:block; border:0; background:transparent; color:var(--primary-color); font-size:13px; font-weight:700; padding:3px 0; margin:0 0 8px; cursor:pointer; }
.filter-more-button:hover { color:var(--secondary-color); }
@media(max-width:991px) { .modern-filter-panel { position:relative; } }
.contact-field {
	position: relative;
	margin-bottom: 18px;
}
.contact-field input,
.contact-field select {
	padding-left: 40px;
	margin-bottom: 0;
}
.contact-field > i {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--primary-color);
	font-size: 15px;
	pointer-events: none;
}
.contact-field-textarea textarea {
	padding-left: 40px;
	margin-bottom: 0;
}
.contact-field-textarea > i {
	top: 24px;
	transform: none;
}

.single_address {
	background: #fff !important;
	border: 1px solid #e6ecf4;
	border-radius: 16px;
	box-shadow: 0 8px 20px rgba(30, 41, 59, .06);
	margin: 0 12px 24px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.single_address:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(30, 41, 59, .1);
}
.single_address i {
	width: 64px;
	height: 64px;
	line-height: 64px;
	border-radius: 50%;
	font-size: 26px;
	background: #edf4ff;
	color: var(--primary-color);
	transition: transform .3s ease;
}
.single_address:hover i {
	transform: rotate(90deg);
}
.sa_two i { background: #eefbf1; color: var(--secondary-color); }
.sa_three i { background: #fff3e9; color: #e56b00; }
.single_address h4 { font-size: 17px; }
.single_address p { color: #667085; margin-bottom: 0; }

/* Inner-page hero ("Get In Touch", "About Us", etc.) was nearly 240px tall —
   cut roughly in half for a tighter, less top-heavy page */
.section-top {
	padding-top: 70px;
	padding-bottom: 45px;
}
.section-top-title h1 {
	font-size: 32px;
	margin-bottom: 6px;
}

/* Simple job-themed preloader (replaces the template's default spinner) */
.job-loader {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: job-loader-pulse 1s ease-in-out infinite;
}
.job-loader i {
	color: #fff;
	font-size: 30px;
}
@keyframes job-loader-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.15); opacity: 0.75; }
}

/* Tighter section padding everywhere — the template default (80px) felt
   too heavy across stacked sections */
.section-padding {
	padding: 55px 0;
}
@media only screen and (max-width: 767px) {
	.section-padding { padding: 40px 0; }
	.gradient-card { padding: 30px !important; }
}

/* Even tighter — used on the home page, which stacks many sections back
   to back */
.section-padding-tight {
	padding: 28px 0;
}
@media only screen and (max-width: 767px) {
	.section-padding-tight { padding: 22px 0; }
}

/* Privacy Policy / Terms & Conditions — numbered points sat right on top
   of each other with no breathing room between them */
.legal-content h4 {
	margin-top: 28px;
	margin-bottom: 8px;
}
.legal-content h4:first-of-type {
	margin-top: 0;
}
.legal-content p {
	margin-bottom: 16px;
}

/* Active nav link — header and footer */
#main-menu ul li a.nav-active,
.mobile_menu li a.nav-active {
	color: var(--primary-color) !important;
}
.single_footer ul li a.nav-active {
	color: var(--primary-color) !important;
	font-weight: 600;
}

/* Reusable gradient background for cards across the site */
.gradient-card {
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: #fff;
	border-radius: 14px;
}
.gradient-card h2,
.gradient-card h3,
.gradient-card h4,
.gradient-card p,
.gradient-card a:not(.btn_one):not(.btn-outline-brand) {
	color: #fff !important;
}
.gradient-card .btn_one,
.gradient-card .btn-outline-brand {
	background: #fff;
	border-color: #fff;
	color: var(--primary-color) !important;
}
.gradient-card .btn_one:hover,
.gradient-card .btn-outline-brand:hover {
	background: transparent;
	color: #fff !important;
}

/* Varied gradient tones so a row of gradient cards doesn't look like one
   flat block of identical color — cycle these across cards */
.gradient-card.grad-2 { background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); }
.gradient-card.grad-3 { background: linear-gradient(135deg, var(--primary-color), #6f42c1); }
.gradient-card.grad-4 { background: linear-gradient(135deg, var(--secondary-color), #17a2b8); }
.gradient-card.grad-5 { background: linear-gradient(135deg, #fd7e14, var(--primary-color)); }
.gradient-card.grad-6 { background: linear-gradient(135deg, #6f42c1, var(--secondary-color)); }

/* Icon + title + description card, stacked in a row of gradient cards
   (services, process steps, hiring steps) */
.service-card {
	padding: 32px 26px;
	box-sizing: border-box;
}
.service-card-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: #fff;
	margin-bottom: 18px;
}
.service-card h3 {
	font-size: 18px;
	margin-bottom: 10px;
}
.service-card p {
	font-size: 14px;
	opacity: 0.92;
}

/* Header: reduce height and keep logo + nav vertically centered */
#navigation {
	padding: 0px 40px;
}
@media only screen and (max-width: 767px) {
	#navigation {
		padding: 14px 5px;
	}
}
.site-logo {
	width: auto;
	max-width: 220px;
	padding: 0;
	margin: 0;
}
.site-logo a {
	padding: 0;
}
.site-logo img {
	max-height: 75px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	padding: 0;
}
#main-menu ul li {
	line-height: 1;
	padding: 0 14px;
}
#main-menu ul li a {
	text-transform: none;
}
#main-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}
#main-menu ul {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	width: 100%;
}
.col-60.d-flex {
	justify-content: center;
}
@media only screen and (max-width: 1024px) {
	#main-menu ul li { padding: 0 8px; }
}

/* Right-side header actions: keep Sign In (text link) and Sign Up (button)
   vertically aligned instead of sitting on the inline-block baseline, which
   made the shorter "Sign In" text float above the taller "Sign Up" button.
   Scoped to the d-xl-block breakpoint — this element carries Bootstrap's
   d-none d-xl-block, and an unscoped `display: flex !important` here (an ID
   selector) beat `.d-none`'s `!important` on specificity, forcing the Sign
   In button to always render on phones instead of moving into the mobile
   hamburger menu. */
@media only screen and (min-width: 1200px) {
	#navigation .col-20.text-end {
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		gap: 18px;
		height: 100%;
	}
}
#navigation .col-20.text-end .dropdown {
	display: flex;
	align-items: center;
	margin: 0;
}
#navigation .col-20.text-end .header-btn,
#navigation .col-20.text-end .btn_one {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	vertical-align: middle;
	margin: 0;
}

/* Filter pills (e.g. blog category filters) reusing header-btn as a plain
   link look broken next to the active .btn_one pill — give them a real
   pill button treatment */
.filter-pill {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 30px;
	border: 1px solid var(--primary-color);
	color: var(--primary-color) !important;
	font-weight: 600;
	transition: 0.3s;
}
.filter-pill:hover {
	background: var(--primary-color);
	color: #fff !important;
}
.filter-pill.active {
	background: var(--primary-color);
	color: #fff !important;
}

/* Footer logo: the template applies no size constraint to footer images,
   which made a full-resolution uploaded logo render at native size. */
.single_footer img {
	max-height: 46px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

/* App store / Play store badges in the footer */
.footer-app-badges {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.footer-app-badges img {
	max-height: 40px;
	width: auto;
	margin-bottom: 0;
}

/* FAQ accordion tuned to the brand colors */
.faq_area .accordion-button:not(.collapsed) {
	color: #fff;
	background-color: var(--primary-color);
}
.faq_area .accordion-button:focus {
	box-shadow: none;
	border-color: var(--primary-color);
}

/* Outline button variant, used next to a solid .btn_one for CTA pairs */
.btn-outline-brand {
	display: inline-block;
	background: transparent;
	border: 1px solid var(--primary-color);
	color: var(--primary-color) !important;
	padding: 15px 30px;
	border-radius: 2px;
	font-weight: 600;
	transition: 0.3s;
}
.btn-outline-brand:hover {
	background: var(--primary-color);
	color: #fff !important;
}
@media only screen and (max-width: 960px) {
	.btn-outline-brand { padding: 14px 25px; }
}

/* Stat counter cards: equal height + consistent padding regardless of
   how many lines the label wraps to */
.count_area .row {
	align-items: stretch;
}
.single-counter {
	height: 100%;
	box-sizing: border-box;
	padding: 24px 20px;
}
.single-counter::after {
	content: "";
	display: table;
	clear: both;
}
.single-counter h2 {
	white-space: nowrap;
}
.single-counter .sc_one,
.single-counter .sc_two,
.single-counter .sc_three,
.single-counter .sc_four {
	color: #fff;
	background: var(--primary-color);
}
.single-counter .sc_two { background: var(--secondary-color); }
.single-counter .sc_four { background: var(--secondary-color); }

/* "Why Choose Us" / process-step cards on About & Services pages */
.single_tp .sc_one,
.single_tp .sc_two,
.single_tp .sc_three,
.single_tp .sc_four {
	color: #fff;
	background: var(--primary-color);
}
.single_tp .sc_two,
.single_tp .sc_four {
	background: var(--secondary-color);
}
.single_tp {
	height: calc(100% - 30px);
	box-sizing: border-box;
}
.single_tp::after {
	content: "";
	display: table;
	clear: both;
}

/* Review / testimonial cards */
.review-scroll-row {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	scrollbar-width: none;
}
.review-scroll-row::-webkit-scrollbar {
	display: none;
}
.review-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 16px rgba(23, 23, 36, 0.06);
	padding: 28px;
	box-sizing: border-box;
	flex: 0 0 340px;
	max-width: 340px;
	scroll-snap-align: start;
}
.review-card .stars {
	color: #ffb400;
	margin-bottom: 12px;
}
.review-arrow {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--primary-color);
	background: #fff;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: 0.3s;
}
.review-arrow:hover {
	background: var(--primary-color);
	color: #fff;
}

/* Footer "Account Login" column — breathing room from the Contact Info
   column that sits right next to it */
.f_account-login {
	margin-right: 20px;
}

/* Sign-in page tabs (Job Seeker / Employer) — bootstrap's default nav-tabs
   look (gray text, faint border) gave no visual feedback for which tab is
   active. Hover/active now only ever change color, nothing else. */
#signInTabs {
	gap: 10px;
	border-bottom: none;
}
#signInTabs .nav-link {
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	border-radius: 4px;
	transition: 0.3s;
}
#signInTabs .nav-link:hover {
	color: var(--secondary-color);
	border-color: var(--secondary-color);
}
#signInTabs .nav-link.active {
	background: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color);
}

/* The sign-in/register cards now sit on the .gradient-card brand gradient —
   an unselected tab's primary-color border/text would nearly disappear
   against that background, and form labels default to dark text, so both
   need to switch to white on this background specifically. */
.contact-card.gradient-card #signInTabs .nav-link {
	border-color: rgba(255, 255, 255, 0.75);
	color: #fff;
}
.contact-card.gradient-card #signInTabs .nav-link:hover {
	border-color: #fff;
	color: #fff;
}
.contact-card.gradient-card #signInTabs .nav-link.active {
	background: #fff;
	color: var(--primary-color);
	border-color: #fff;
}
.contact-card.gradient-card label {
	color: #fff;
}
/* .gradient-card normally inverts CTA buttons to a white pill so they read
   against the gradient — on the login/register cards specifically we want
   the buttons to keep their normal solid brand color instead. */
.contact-card.gradient-card .btn_one,
.contact-card.gradient-card .btn-outline-brand {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff !important;
}
.contact-card.gradient-card .btn_one:hover,
.contact-card.gradient-card .btn-outline-brand:hover {
	background: var(--secondary-color);
	border-color: var(--secondary-color);
	color: #fff !important;
}

/* "Remember me" checkbox on the sign-in form — the default stacked
   form-group label put the checkbox above its own text instead of inline
   next to it */
.contact .remember-me-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
}
.contact .remember-me-row input[type="checkbox"] {
	margin: 0;
	width: 16px;
	height: 16px;
}
.contact .remember-me-row label {
	margin: 0;
}

/* Rich text saved by Quill: keep advanced formatting responsive on public pages. */
.job-rich-content img,
.blog-content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 18px auto;
	border-radius: 10px;
}
.job-rich-content .ql-align-center, .blog-content .ql-align-center { text-align: center; }
.job-rich-content .ql-align-right, .blog-content .ql-align-right { text-align: right; }
.job-rich-content .ql-align-justify, .blog-content .ql-align-justify { text-align: justify; }
.job-rich-content .ql-size-small, .blog-content .ql-size-small { font-size: .8em; }
.job-rich-content .ql-size-large, .blog-content .ql-size-large { font-size: 1.5em; }
.job-rich-content .ql-size-huge, .blog-content .ql-size-huge { font-size: 2.2em; }
.job-rich-content .ql-font-serif, .blog-content .ql-font-serif { font-family: Georgia, serif; }
.job-rich-content .ql-font-monospace, .blog-content .ql-font-monospace { font-family: Consolas, monospace; }
.job-rich-content blockquote, .blog-content blockquote { padding: 10px 18px; border-left: 4px solid var(--primary-color); background: #f8fafc; }
.job-rich-content pre, .blog-content pre { padding: 14px; overflow-x: auto; border-radius: 8px; background: #172033; color: #fff; }

/* Dashboard sidebar (user/company account areas) — plain nav list inside a
   .contact-card, matching the site's existing card styling instead of a
   separate dashboard design language */
.dashboard-sidebar .nav li a {
	display: block;
	padding: 8px 4px;
	border-radius: 6px;
}
.dashboard-sidebar .nav li a.nav-active {
	color: #fff !important;
	background: var(--primary-color);
}
.dashboard-sidebar .nav li a:hover {
	color: var(--primary-color);
}

/* Status badges used on application/ticket listing tables */
.status-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}
.status-badge.status-gray { background: #6b7280; }
.status-badge.status-blue { background: #2563eb; }
.status-badge.status-teal { background: #0d9488; }
.status-badge.status-purple { background: #7c3aed; }
.status-badge.status-green { background: #16a34a; }
.status-badge.status-red { background: #dc2626; }
.status-badge.status-orange { background: #ea580c; }

/* Company contact details (address/phone) on a public job listing — hidden
   from guests behind a blur until they log in */
.blur-guest {
	filter: blur(4px);
	user-select: none;
	display: inline-block;
}

/* Job-first public marketplace cards and horizontal discovery rows. */
.company-scroll-row, .job-scroll-row { display:flex; align-items:stretch; gap:18px; overflow-x:auto; padding:16px 2px 14px; scroll-snap-type:x proximity; }
.featured-scroll-row { display:flex; gap:18px; overflow-x:auto; padding:5px 2px 16px; scroll-snap-type:x proximity; }
.featured-scroll-row .job-card { flex:0 0 calc(25% - 14px); min-width:280px; scroll-snap-align:start; }
.company-card { display:block; position:relative; flex:0 0 222px; min-height:202px; padding:26px 15px 18px; text-align:center; color:#232333; background:linear-gradient(145deg,#fff,#f8fbff); border:1px solid #e6ecf4; border-radius:16px; box-shadow:0 8px 20px rgba(30,41,59,.08),inset 0 1px 0 #fff; scroll-snap-align:start; transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease; transform:perspective(800px) rotateX(0); }
.company-card-badge { position:absolute; top:-11px; left:16px; z-index:2; background:#fff3e9; color:#e56b00; box-shadow:0 2px 6px rgba(229,107,0,.18); }
.company-card:hover { color:var(--primary-color); transform:perspective(800px) translateY(-7px) rotateX(2deg); border-color:rgba(24,94,208,.3); box-shadow:0 17px 30px rgba(30,64,175,.16),inset 0 1px 0 #fff; }
.company-card-logo, .company-profile-logo { width:58px; height:58px; margin:0 auto 10px; border-radius:14px; background:#fff; border:1px solid #e9eef5; display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--primary-color); font-size:22px; font-weight:700; box-shadow:0 5px 12px rgba(30,41,59,.08); }
.company-card-logo img, .company-profile-logo img { width:100%; height:100%; object-fit:contain; padding:8px; }
.company-card-name { font-size:16px; line-height:1.3; margin:0 0 5px; font-weight:700; }.company-card-meta { color:#667085; font-size:12px; }.company-card-jobs { display:inline-block; color:var(--primary-color); font-size:12px; font-weight:700; margin-top:8px!important; padding:4px 9px; border-radius:20px; background:#edf4ff; }
.job-scroll-row .job-card { flex:0 0 calc(33.333% - 14px); min-width:280px; min-height:230px; }.job-card { height:100%; text-align:center; background:linear-gradient(145deg,#fff,#f8fbff); border:1px solid #e5ebf4; border-radius:16px; padding:26px 17px 17px; box-shadow:0 8px 20px rgba(30,41,59,.07),inset 0 1px 0 #fff; position:relative; transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease; }.job-card:hover { transform:perspective(900px) translateY(-7px) rotateX(1.5deg); border-color:rgba(24,94,208,.34); box-shadow:0 18px 32px rgba(30,64,175,.15),inset 0 1px 0 #fff; }.job-card-featured { border-color:var(--primary-color); }.job-card-badge { position:absolute; top:-11px; left:16px; margin:0; z-index:2; background:#fff3e9; color:#e56b00; box-shadow:0 2px 6px rgba(229,107,0,.18); }.job-card-logo { width:58px; height:58px; margin:0 auto 12px; border:1px solid #e2e9f2; border-radius:14px; display:grid; place-items:center; overflow:hidden; color:var(--primary-color); font-weight:700; background:#fff; box-shadow:0 4px 10px rgba(30,41,59,.06); }.job-card-logo img { width:100%; height:100%; object-fit:contain; padding:5px; }.job-card-title { font-size:17px; line-height:1.25; margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.job-card-title a, .job-card-company a { color:inherit; }.job-card-company { font-size:13px; color:#49566a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.job-card-meta { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 11px; color:#667085; font-size:11px; }.job-card-meta i { color:var(--primary-color); }.job-card-skills { display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; }.skill-pill { display:block; padding:3px 6px; margin:0; border-radius:5px; background:#edf2f8; color:#566276; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.company-profile-logo { width:96px; height:96px; font-size:34px; }
@media(max-width:575px) { .job-scroll-row .job-card { flex-basis:300px; }.company-card { flex-basis:210px; } }
.job-rich-content { color:#4b5563; font-size:16px; line-height:1.8; }.job-rich-content ul,.job-rich-content ol { padding-left:1.25rem; }
/* Home search and carousel controls. */
.hero-search-form { display:flex; align-items:stretch; gap:0; background:#fff; border-radius:12px; overflow:hidden; padding:6px; box-shadow:0 12px 32px rgba(15,23,42,.16); }
.hero-search-field { flex:1; min-width:0; display:flex; align-items:center; padding:0 14px; border-right:1px solid #e5e7eb; }.hero-search-field i { color:var(--primary-color); margin-right:10px; }.hero-search-field input { border:0!important; box-shadow:none!important; outline:none!important; width:100%; height:42px; color:#27364a; }
.hero-search-button.btn_one { border:0; border-radius:8px; padding:0 22px; margin:0; display:flex; align-items:center; gap:8px; white-space:nowrap; }.hero-search-button.btn_one i { display:inline; margin:0; }
.job-filter-card { padding:14px!important; border:1px solid #e3e9f2; box-shadow:0 10px 24px rgba(30,41,59,.06); }
.sidebar-filter-card { position:sticky; top:90px; }
@media(max-width:991px) { .sidebar-filter-card { position:static; } }.job-filter-card label { font-size:13px; font-weight:700; color:#344054; margin-bottom:6px; }.job-filter-card .form-control,.job-filter-card .select2-selection { min-height:44px!important; border:1px solid #dbe3ee!important; border-radius:8px!important; }.job-filter-card .select2-selection__rendered { line-height:42px!important; color:#667085!important; }.job-filter-card .select2-selection__arrow { height:42px!important; }.filter-search-button.btn_one { height:44px; padding:0 14px; display:flex; justify-content:center; align-items:center; gap:7px; border-radius:8px; }.filter-search-button.btn_one i { display:inline; margin:0; }
.carousel-arrows { display:flex; gap:8px; }.carousel-arrows button { width:38px; height:38px; border:1px solid #d9e0ea; border-radius:50%; background:#fff; color:var(--primary-color); transition:.2s; }.carousel-arrows button:hover { color:#fff; background:var(--primary-color); border-color:var(--primary-color); }
.company-scroll-row, .job-scroll-row, .featured-scroll-row { scrollbar-width:none; }.company-scroll-row::-webkit-scrollbar, .job-scroll-row::-webkit-scrollbar, .featured-scroll-row::-webkit-scrollbar { display:none; }
@media(max-width:767px) { .hero-search-form { display:block; padding:8px; }.hero-search-field { border-right:0; border-bottom:1px solid #e5e7eb; padding:0 8px; }.hero-search-button.btn_one { width:100%; justify-content:center; height:45px; margin-top:8px; }.featured-scroll-row .job-card { flex-basis:300px; } }
/* Centered job-search hero, inspired by modern job marketplaces. */
.naukri-hero { min-height:470px; display:flex; align-items:center; background-size:cover; background-position:center; position:relative; }.naukri-hero-content { width:100%; max-width:940px; margin:auto; color:#fff; padding:72px 0; }.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); border-radius:20px; font-size:13px; }.naukri-hero h1 { color:#fff; font-size:48px; font-weight:800; margin:18px 0 10px; letter-spacing:-1.4px; }.naukri-hero h1 span { color:#f8bf4b; }.naukri-hero p { font-size:18px; color:rgba(255,255,255,.84); margin-bottom:28px; }.naukri-hero .hero-search-form { max-width:900px; margin:auto; text-align:left; }.naukri-hero .hero-popular { margin-top:18px; display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; }.hero-popular a { color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:15px; padding:4px 11px; transition:.2s; display:inline-flex; align-items:center; gap:6px; }.hero-popular a i { font-size:12px; }.hero-popular a:hover { background:#fff; color:var(--primary-color); }.home-jobs-section { background:linear-gradient(180deg,#f7faff 0,#fff 100%); }
@media(max-width:767px) { .naukri-hero { min-height:430px; }.naukri-hero-content { padding:52px 0; }.naukri-hero h1 { font-size:34px; letter-spacing:-.8px; }.naukri-hero p { font-size:15px; padding:0 10px; } }

/* Nav "Find Jobs" / "Companies" mega menu, Naukri-style: a wide white flyout
   with categories laid out in a grid rather than the base theme's narrow
   210px single-column dark dropdown (which wrapped our longer category
   names into an unreadable stack). Built on its own class instead of the
   theme's generic ul-li-ul selectors so nothing else can bleed into it. */
#navigation #main-menu li.nav-mega { position: relative; }
#navigation #main-menu .nav-mega-panel {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 18px;
	background: #fff;
	width: 552px;
	max-width: calc(100vw - 40px);
	border-radius: 10px;
	border-top: 3px solid var(--primary-color);
	box-shadow: 0 20px 45px rgba(15,23,42,.16);
	padding: 16px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px 14px;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 1000;
}
#navigation #main-menu li.nav-mega:hover .nav-mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#navigation #main-menu .nav-mega-panel li {
	display: block;
	position: static;
	margin: 0;
	padding: 0;
	line-height: normal;
}
#navigation #main-menu .nav-mega-panel li a,
#navigation.navbar-fixed #main-menu .nav-mega-panel li a {
	display: block;
	color: #27364a;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	padding: 8px 10px;
	border-radius: 6px;
	text-transform: none;
	white-space: normal;
}
#navigation #main-menu .nav-mega-panel li a:hover {
	color: var(--primary-color);
	background-color: #eef4ff;
}
@media(max-width:991px) {
	#navigation #main-menu .nav-mega-panel { width: 384px; grid-template-columns: repeat(2, 1fr); }
}

/* Stat counter strip: base theme's 80px padding-bottom left too much empty
   space below the gradient cards before the next section. */
.count_area { padding-bottom: 40px; }